/* ============================================
   MODERN THEME - SYNCED WITH WEB UI
   Primary: #6366f1 → #8b5cf6 (Indigo → Purple)
   ============================================ */

/* Import SF Pro Display Font */
@font-face {
  font-family: "SFProDisplay";
  src:
    url("../fonts/SFProDisplay-Regular.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SFProDisplay";
  src:
    url("../fonts/SFProDisplay-Medium.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SFProDisplay";
  src:
    url("../fonts/SFProDisplay-Bold.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  /* Primary Gradient */
  --primary-start: #6366f1;
  --primary-end: #8b5cf6;
  --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  /* Dạng RGB rời của hai màu trên — dùng cho rgba(): bóng đổ và nền mờ.
     CSS không tách được kênh màu từ một biến dạng #hex, nên phải khai riêng.
     Mọi nơi đều viết rgba(var(--primary-rgb, 99, 102, 241), .x) để nếu biến vắng
     mặt thì vẫn ra đúng màu gốc — đổi thương hiệu là no-op tuyệt đối với nền tảng.
     public/js/branding.js chịu trách nhiệm đặt lại hai biến này theo màu đại lý. */
  --primary-rgb: 99, 102, 241;
  --primary-end-rgb: 139, 92, 246;

  /* Secondary Gradient */
  --secondary-start: #ec4899;
  --secondary-end: #f43f5e;
  --secondary-gradient: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);

  /* Accent Gradient */
  --accent-start: #06b6d4;
  --accent-end: #0ea5e9;
  --accent-gradient: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);

  /* Status Colors */
  --success: #10b981;
  --success-light: #34d399;
  --warning: #f59e0b;
  --warning-light: #fbbf24;
  --danger: #ef4444;
  --danger-light: #f87171;
  --info: #3b82f6;

  /* Accent Colors */
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --cyan: #06b6d4;
  --pink: #ec4899;
  --green: #10b981;
  --orange: #f59e0b;

  /* Background & Surface */
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-hover: rgba(var(--primary-rgb, 99, 102, 241), 0.04);
  --bg-active: rgba(var(--primary-rgb, 99, 102, 241), 0.08);

  /* Text Colors */
  --text-primary: #232e3d;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-white: #ffffff;

  /* Border */
  --border-color: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.05);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --shadow-primary: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.25);
  --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* Transitions */
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   BASE STYLES
   ============================================ */
html {
  font-size: 14px;
}

body {
  font-family:
    "SFProDisplay",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  font-weight: 500;
  background: var(--bg-body);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override AG-Grid font */
[class*="ag-theme-"] {
  font-family:
    "SFProDisplay",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

/* ============================================
   MAIN APP CONTAINER
   ============================================ */
#app {
  padding: 38px 10px 10px 10px !important;
  background: var(--primary-gradient) !important;
  background-image: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)
  ) !important;
  min-height: 100vh;
}

#app[data="popup"] {
  padding: 20px !important;
  background: var(--primary-gradient) !important;
  background-image: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)
  ) !important;
}

#app[data="ads"],
#app[data="bm"],
#app[data="clone"],
#app[data="page"],
#app[data="via"] {
  padding: 38px 10px 10px 10px !important;
  background: var(--primary-gradient) !important;
  background-image: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)
  ) !important;
}

/* ============================================
   HEADER STYLES
   ============================================ */
#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  color: var(--text-white);
  padding: 0 16px;
  z-index: 100;
  display: flex;
  align-items: center;
}

.header-top {
  height: 38px;
  width: 100%;
}

.header-top a:hover {
  transform: translateY(-1px);
}

.header-bottom {
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  width: calc(100vw - 400px);
}

.titleBar {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.appVersion {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
}

/* Header Navigation Pills - Floating Cards Style */
#header .nav-pills-container,
#header .rounded.row {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  height: auto;
  width: fit-content !important;
  max-width: 100%;
  gap: 7px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#header .nav-pills-container a,
#header .rounded.row a {
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 0.82rem;
  -webkit-text-stroke: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  padding: 6px 13px !important;
  margin: 0 !important;
  height: 28px;
  line-height: 14px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.2px;
  text-transform: none;
  gap: 6px;
  flex: 0 0 auto;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
  /* Frosted glass button */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Icon trong nav pill */
#header .nav-pills-container a .nav-pill-ic {
  font-size: 14.5px;
  line-height: 1;
  flex-shrink: 0;
  font-weight: normal !important;
  -webkit-text-stroke: 0 !important;
  -webkit-font-smoothing: antialiased;
}

/* Gradient border animation on hover */
#header .nav-pills-container a::before,
#header .rounded.row a::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-start, #6366f1), var(--primary-end, #8b5cf6), #06b6d4, var(--primary-start, #6366f1));
  background-size: 300% 300%;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#header .nav-pills-container a::after,
#header .rounded.row a::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.2) 0%,
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.1) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover state - gradient border reveal */
#header .nav-pills-container a:not(.active):hover::before,
#header .rounded.row a:not(.bg-white):hover::before {
  opacity: 1;
  animation: gradientShift 2s linear infinite;
}

#header .nav-pills-container a:not(.active):hover::after,
#header .rounded.row a:not(.bg-white):hover::after {
  opacity: 1;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#header .nav-pills-container a:not(.active):hover,
#header .rounded.row a:not(.bg-white):hover {
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  border-color: transparent;
  box-shadow:
    0 8px 25px rgba(var(--primary-rgb, 99, 102, 241), 0.25),
    0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Active state - Solid gradient background */
#header .nav-pills-container a.active,
#header .rounded.row a.bg-white {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: var(--primary-start, #6366f1) !important;
  font-weight: 700;
  border: none !important;
  box-shadow:
    0 4px 20px rgba(var(--primary-rgb, 99, 102, 241), 0.4),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 -2px 0 rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  transform: translateY(-1px);
}

/* Active state decorators */
#header .nav-pills-container a.active::before,
#header .rounded.row a.bg-white::before {
  opacity: 0;
}

#header .nav-pills-container a.active::after,
#header .rounded.row a.bg-white::after {
  display: none;
}

/* Press down effect */
#header .nav-pills-container a:active,
#header .rounded.row a:active {
  transform: scale(0.95) translateY(0);
  transition: transform 0.1s ease;
}

/* ============================================
   APP WRAPPER & CARDS
   ============================================ */
.app-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 18px 50px -12px rgba(var(--primary-rgb, 99, 102, 241), 0.45),
    0 4px 14px rgba(15, 23, 42, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.account-wrapper {
  width: calc(100% - 350px);
  height: calc(100vh - 48px);
}

#app[data="clone"] .account-wrapper {
  width: 100% !important;
}

/* Home dashboard: full width (no side panel) */
#app[data="via"] .account-wrapper {
  width: 100% !important;
}

/* ============================================
   MODERN CARDS
   ============================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

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

/* Stats Cards with Icons */
.card .rounded-circle {
  transition: var(--transition-normal);
}

.card:hover .rounded-circle {
  transform: scale(1.05);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  transition: var(--transition-normal);
  border: none;
  font-size: 0.875rem;
}

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

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb, 99, 102, 241), 0.35);
  background: linear-gradient(135deg, #5558e8 0%, #7c4fe6 100%);
}

.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
  color: white;
}

.btn-secondary {
  background: var(--bg-body);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Control Buttons */
.control-btn {
  padding: 0 14px 0 10px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-light) !important;
  background: var(--bg-card);
  transition: var(--transition-normal);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.control-btn:hover {
  background: var(--bg-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  border-color: var(--border-color) !important;
}

.control-btn i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  color: var(--text-white);
  border-radius: 6px;
  font-weight: 400;
  font-size: 12px;
}

/* Icon-only control buttons */
.control-btn.px-2 i {
  margin-right: 0;
  width: 20px;
  height: 20px;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 18px;
  /* .btn kế thừa line-height:1.5 → line-box (26px) cao hơn glyph (18px) nên glyph lệch LÊN
     trong nút cao (vd 2 nút #userInfo h-100). line-height:1 để glyph căn giữa đúng. */
  line-height: 1;
}

.control-btn.px-2:hover i {
  color: var(--primary-start) !important;
}

.control-btn i.ri-play-fill {
  background: none !important;
  color: #10b981 !important;
}

.control-btn i.ri-stop-fill {
  background: none !important;
  color: #ef4444 !important;
}

/* ============================================
   FORM CONTROLS
   ============================================ */
.form-control,
.form-select {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  background-color: var(--bg-card);
  transition: var(--transition-normal);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-start);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
  outline: none;
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 0.875rem;
}

/* Form Switch - Sleek Minimal Style */
.form-switch .form-check-input {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  border: 2px solid #c7d2e0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c7d2e0'/%3e%3c/svg%3e");
  background-position: 2px center;
  background-size: 16px;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

.form-switch .form-check-input:checked {
  border-color: var(--primary-start, #6366f1);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236366f1'/%3e%3c/svg%3e");
  background-position: calc(100% - 2px) center;
}

.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
  outline: none;
  border-color: var(--primary-start, #6366f1);
}

.form-switch .form-check-input:hover {
  border-color: #a5b4c8;
}

.form-switch .form-check-input:checked:hover {
  border-color: #4f46e5;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234f46e5'/%3e%3c/svg%3e");
}

/* Checkbox & Radio */
.form-check-input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.form-check-input:checked {
  background: var(--primary-gradient);
  border-color: var(--primary-start);
}

.form-check-input[type="radio"] {
  border-radius: var(--radius-circle);
}

/* ============================================
   BADGES
   ============================================ */
.badge {
  font-weight: 600;
  padding: 3.5px 6.5px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  letter-spacing: 0.3px;
}

.badge.rounded-pill {
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.text-bg-primary,
.badge-primary {
  background: var(--primary-gradient) !important;
}

.text-bg-success,
.badge-success {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
}

.text-bg-danger,
.badge-danger {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
}

.text-bg-warning,
.badge-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
  color: white !important;
}

.text-bg-info,
.badge-info {
  background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%) !important;
}

/* ============================================
   PANELS & SIDEBARS
   ============================================ */
#panel,
#adPanel {
  background: var(--bg-body);
  border-left: 1px solid var(--border-light);
}

/* Adjust height to stop above footer bar */
#adPanel {
  top: 98px !important; /* Move up a bit */
  height: calc(
    100% - 153px
  ) !important; /* Adjusted to align with table bottom */
  z-index: 10;
}

/* Footer bar - must be above sidebar */
.account-wrapper > .border-top.p-3.py-2 {
  position: relative;
  z-index: 20;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Footer stats labels - make all labels bold */
.account-wrapper
  > .border-top.p-3.py-2
  span
  > span:not(.badge):not(.rounded-circle) {
  font-weight: 600;
}

#adPanel > .flex-grow-1 {
  background: var(--bg-body);
}

/* Panel Cards - Sidebar Options */
#adPanel .card,
[data-tool] .card {
  background: var(--bg-card) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--transition-normal);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

#adPanel .card:hover,
[data-tool] .card:hover {
  box-shadow:
    0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.1),
    0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-1px);
}

/* Panel Toggle Headers */
#adPanel .card > .p-3:first-child,
[data-tool] .card > .p-3:first-child {
  background: transparent;
  padding: 16px !important;
}

/* Panel Icons - Simple colored icons without background */
#adPanel .form-check-label i,
[data-tool] .form-check-label i {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  font-size: 20px;
  margin-right: 12px !important;
}

/* Colorful Icons - dùng inline style trên HTML, không dùng nth-child vì card có thể reorder */

/* Toggle switch in side panel - ad-switch-slider style */
#adPanel .form-switch .form-check-input,
[data-tool] .form-switch .form-check-input {
  width: 36px !important;
  height: 20px !important;
  border-radius: 20px !important;
  background-color: #d1d5db !important;
  border: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: 0.25s ease !important;
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}
#adPanel .form-switch .form-check-input::before,
[data-tool] .form-switch .form-check-input::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: 0.25s ease;
}
#adPanel .form-switch .form-check-input:checked,
[data-tool] .form-switch .form-check-input:checked {
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7) !important;
}
#adPanel .form-switch .form-check-input:checked::before,
[data-tool] .form-switch .form-check-input:checked::before {
  transform: translateX(16px);
}

/* Toolbar Icons - simple colored style */
.control-btn i.ri-filter-line {
  background: transparent !important;
  color: var(--primary-start, #6366f1) !important;
}
.control-btn i.ri-menu-add-fill {
  background: transparent !important;
  color: #10b981 !important;
}
.control-btn i.ri-loop-left-fill {
  background: transparent !important;
  color: #3b82f6 !important;
}
.control-btn i.ri-layout-line {
  background: transparent !important;
  color: var(--primary-end, #8b5cf6) !important;
}
.control-btn i.ri-customer-service-line {
  background: transparent !important;
  color: #f59e0b !important;
}
.control-btn i.ri-equalizer-line {
  background: transparent !important;
  color: #06b6d4 !important;
}
.control-btn i.ri-search-line {
  background: transparent !important;
  color: #ec4899 !important;
}

/* Panel Switch Labels */
#adPanel .form-check-label .fw-bold,
[data-tool] .form-check-label .fw-bold {
  color: var(--text-primary);
  font-weight: 600 !important;
  font-size: 0.9rem;
}

/* Panel Inner Content */
#adPanel .border-top,
[data-tool] .border-top {
  border-color: var(--border-light) !important;
  background: rgba(248, 250, 252, 0.5);
  padding: 16px !important;
}

#foldButton {
  position: absolute;
  width: 24px;
  height: 48px;
  background: var(--bg-card);
  right: 349px;
  top: 50%;
  margin-top: -24px;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  cursor: pointer;
  z-index: 99;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-light);
  border-right: none;
  transition: var(--transition-normal);
  color: var(--text-secondary);
}

#foldButton:hover {
  color: var(--primary-start);
  background: var(--bg-hover);
}

/* ============================================
   CONTENT AREA
   ============================================ */
#viaPanel {
  background: var(--bg-body) !important;
  padding: 24px !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.modal-header {
  background: var(--bg-body);
  border-bottom: 1px solid var(--border-light);
  padding: 20px 24px;
}

.modal-title {
  font-weight: 700;
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  background: var(--bg-body);
  border-top: 1px solid var(--border-light);
  padding: 10px 24px;
}

.btn-close {
  opacity: 0.5;
  transition: var(--transition-normal);
}

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

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  animation: fadeInDown 0.2s ease;
}

.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-weight: 500;
  transition: var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--primary-start);
}

/* ============================================
   TABS
   ============================================ */
.cat-item,
.tool-item,
#addCategory {
  border: 0;
  padding: 12px 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  height: 45px;
  display: inline-block;
  background: transparent;
  font-size: 0.875rem;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  position: relative;
  transition: var(--transition-normal);
}

.cat-item.active,
.tool-item.active {
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.cat-item:not(.active):hover,
.tool-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* ============================================
   LOADING STATES
   ============================================ */
#loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .loader - Moved to style.css */
/*
.loader {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  border: 4px solid var(--border-light);
  border-top-color: var(--primary-start);
  animation: spin 0.8s linear infinite;
}
*/

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

#loadingData strong {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================
   CONTEXT MENU
   ============================================ */
#contextMenu,
#contextMenuCategory,
#contextMenuPhoi,
#contextMenuWhatsApp,
#contextMenuInsta,
#pqmCtx {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 9999999 !important;
  position: fixed;
  padding: 8px;
  animation: fadeInScale 0.15s ease;
}
/* Menu chuột phải của bảng Quản lý bài trang dùng CHUNG bộ luật ở trên (nối id vào các selector
   `#contextMenu…` bằng :is() nên chỉ có MỘT nguồn giao diện, không chép lại ~120 dòng CSS).
   Riêng luật ẩn khi chưa mở phải khai ở đây: bản gốc nằm trong style.css và chỉ nhắm #contextMenu. */
#pqmCtx:not(.open) { top: -999px; left: -999px; }

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Context menu BM — 2 cột: "Dữ liệu & Clipboard" | "Kiểm tra" */
:is(#contextMenu, #pqmCtx).ctx-2col {
  display: flex;
  gap: 16px;
  align-items: stretch;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Nền card vẽ bằng ::after để "mụn ruồi" (::before, z-index:-1) nằm SAU nền menu,
   chỉ ló ra ở góc. ::after luôn paint trên ::before (cùng z-index) nên che được chấm. */
:is(#contextMenu, #pqmCtx).ctx-2col::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
/* Chấm tròn trắng trang trí góc trên-trái (đồng bộ với các menu khác) */
:is(#contextMenu, #pqmCtx).ctx-2col::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: -1;
}
:is(#contextMenu, #pqmCtx).ctx-2col .ctx-col {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 224px;
  width: 224px;
  box-sizing: border-box;
  background: #f4f6fb;
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.12);
  border-radius: 12px;
  padding: 6px;
}
/* Mỗi cột đã có card riêng → bỏ đường kẻ ngăn ở giữa cho gọn. */
:is(#contextMenu, #pqmCtx).ctx-2col .ctx-col + .ctx-col::before {
  display: none;
}
:is(#contextMenu, #pqmCtx).ctx-2col .ctx-col-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px 10px;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light);
}
:is(#contextMenu, #pqmCtx).ctx-2col .ctx-col-head i {
  font-size: 17px;
  color: var(--primary-start, #6366f1);
}
:is(#contextMenu, #pqmCtx).ctx-2col .dropdown-menu {
  position: static !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  animation: none !important;
}
/* Item trên card cột — hover nổi lên như nút bấm */
:is(#contextMenu, #pqmCtx).ctx-2col .dropdown-item:hover {
  background: #ffffff;
  color: var(--primary-start);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
/* Dark mode: card cột + hover */
/* ⚠ Nền tối: .dropdown-item giữ nguyên màu chữ mặc định #212529 của Bootstrap trên thẻ cột đã
   chuyển sang tối → tương phản ~1.2:1, menu gần như VÔ HÌNH. Lỗi này có ở CẢ #contextMenu của
   /page /bm /ads từ trước, không riêng menu mới; sửa chung một chỗ cho cả hai. */
[data-bs-theme="dark"] :is(#contextMenu, #pqmCtx).ctx-2col .dropdown-item { color: #cbd5e1; }
[data-bs-theme="dark"] :is(#contextMenu, #pqmCtx).ctx-2col .dropdown-item.disabled { color: rgba(203, 213, 225, .45); }
[data-bs-theme="dark"] :is(#contextMenu, #pqmCtx).ctx-2col .dropdown-divider { border-top-color: rgba(255, 255, 255, .1); }
[data-bs-theme="dark"] :is(#contextMenu, #pqmCtx).ctx-2col .ctx-col {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] :is(#contextMenu, #pqmCtx).ctx-2col .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* ============================================
   AVATAR
   ============================================ */
.avatar-letter {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 14px;
  font-family: "SFProDisplay", "Microsoft YaHei", "Segoe UI", sans-serif;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: #6c757d; /* Màu nền mặc định cho ký tự đặc biệt */
}

/* ============================================
   SELECT2 OVERRIDES
   ============================================ */
.select2-container .select2-selection--single {
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
}

.select2-container--default .select2-selection--single:focus,
.select2-container--open .select2-selection--single {
  border-color: var(--primary-start);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 40px;
  color: var(--text-primary);
  font-weight: 500;
}

.select2-dropdown {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.select2-results__option--selected {
  background: var(--bg-hover) !important;
}

.select2-results__option--highlighted {
  background: var(--primary-gradient) !important;
}

/* ============================================
   CURRENCY SELECT2 (footer TKQC) — compact, dropdown chỉ hiện MÃ + có tìm kiếm
   Container scope theo #currencyWrapper; dropdown theo .currency-select2-dd
   ============================================ */
#currencyWrapper {
  white-space: nowrap; /* "Tiền tệ:" không xuống dòng làm pill cao gấp đôi */
  flex-shrink: 0; /* giữ nguyên bề rộng, không bị layout co ép */
}
#currencyWrapper .select2-container {
  vertical-align: middle;
  margin-left: 6px;
}
#currencyWrapper .select2-selection--single {
  height: 26px !important;
  min-height: 26px !important;
  border: none !important; /* bỏ khung bao quanh — pill đã có viền, tránh box lồng box */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  position: relative; /* làm mốc định vị cho mũi tên */
  display: flex;
  align-items: center;
}
/* Mở dropdown cũng không viền/không glow */
#currencyWrapper .select2-container--open .select2-selection--single {
  border: none !important;
  box-shadow: none !important;
}
#currencyWrapper .select2-selection--single .select2-selection__rendered {
  line-height: 24px !important;
  padding-left: 4px;
  padding-right: 18px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap; /* không xuống dòng → không cao lên */
  overflow: hidden;
  text-overflow: ellipsis;
}
#currencyWrapper .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important; /* trải full chiều cao → caret ▾ căn giữa ngang mã */
}
.currency-select2-dd {
  min-width: 0; /* dropdown khớp bề rộng ô select đã fill */
}
/* Cao ~5 dòng rồi cuộn (đè max-height:200px mặc định của select2, specificity 0,3,0) */
.select2-dropdown.currency-select2-dd .select2-results > .select2-results__options {
  max-height: 160px !important;
}
.currency-select2-dd .select2-results__option {
  padding: 6px 10px;
  font-weight: 600;
}

/* ============================================
   SWEETALERT2 OVERRIDES
   ============================================ */
.swal2-popup {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: none !important;
  padding: 20px !important;
}

.swal2-title {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.swal2-html-container {
  color: var(--text-secondary) !important;
}

.swal2-confirm {
  background: var(--primary-gradient) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-primary) !important;
}

.swal2-deny {
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
}

.swal2-cancel {
  background: var(--bg-body) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
}

.swal2-container {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
}

/* ============================================
   SUPPORT POPUP
   ============================================ */
.support-popup {
  padding: 0 !important;
  border-radius: 20px !important;
  overflow: hidden;
}

.support-popup .swal2-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 10px;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.support-popup .swal2-close:hover {
  background: #e2e8f0 !important;
  color: #1b2433 !important;
  transform: scale(1.05);
}

.support-popup .swal2-close:focus {
  box-shadow: 0 0 0 2px rgba(var(--primary-end-rgb, 139, 92, 246), 0.3);
}

.support-popup .swal2-html-container {
  padding: 0 !important;
  margin: 0 !important;
}

.sp-wrapper {
  text-align: left;
  padding-top: 8px;
}

.sp-section {
  padding: 16px 20px 4px;
}

.sp-section:last-child {
  padding-bottom: 16px;
}

.sp-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-section-label i {
  font-size: 0.85rem;
  color: var(--primary-end, #8b5cf6);
}

.sp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none !important;
  color: #232e3d !important;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.04);
  margin-bottom: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.sp-item:last-child {
  margin-bottom: 0;
}

.sp-item:hover {
  background: #f1f5f9;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sp-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-item-icon.sp-zalo {
  background: #e8f4fd;
}

.sp-item-icon.sp-admin1 {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: white;
  font-size: 1.1rem;
}

.sp-item-icon.sp-admin2 {
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7);
  color: white;
  font-size: 1.1rem;
}

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

.sp-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1b2433;
}

.sp-item-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}

.sp-item-arrow {
  color: #cbd5e1;
  font-size: 1rem;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.sp-item:hover .sp-item-arrow {
  color: var(--primary-end, #8b5cf6);
}

/* ============================================
   AG-GRID OVERRIDES
   ============================================ */
[class*="ag-theme-"] {
  font-family: "SFProDisplay", sans-serif !important;
}

.ag-root-wrapper.ag-layout-normal {
  border: none !important;
  border-radius: var(--radius-lg);
}

.ag-header {
  background: var(--bg-body) !important;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  min-height: 40px !important;
}

.ag-header-row {
  height: 40px !important;
}

.ag-header-cell {
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  color: var(--text-secondary);
  height: 40px !important;
}

/* Sortable column khi chưa sort → hiện ⇅ ở đúng vị trí sort icon, opacity nhẹ
   Khi đã sort (asc/desc) → ag-Grid render icon riêng, pseudo-element bị tắt
   Dùng aria-sort thay vì class vì ag-Grid không gắn class .ag-header-cell-sorted-* lên outer cell */
.ag-theme-balham .ag-header-cell.ag-header-cell-sortable:not([aria-sort="ascending"]):not([aria-sort="descending"]) .ag-sort-indicator-container::after {
  content: "⇅";
  display: inline-block;
  opacity: 0.4;
  font-size: 12px;
  margin-left: 2px;
  line-height: 1;
  color: inherit;
}

/* Progressive pin icon — boundary giữa pinned và unpinned */
.pin-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.6;
  font-size: 15px;
  line-height: 1;
  color: var(--primary-start, #6366f1);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
  user-select: none;
}
.pin-toggle-btn:hover {
  opacity: 1;
  transform: scale(1.2);
}
.pin-toggle-btn[data-action="unpin"] {
  opacity: 0.9;
  color: var(--primary-end, #8b5cf6);
}
.pin-toggle-btn[data-action="unpin"]:hover {
  opacity: 1;
  color: #ef4444;
}
.pin-toggle-btn svg {
  width: 1em;
  height: 1em;
  display: block;
  vertical-align: middle;
}
/* Chỉ stroke path có fill="currentColor" — tránh stroke cả viewBox path nền tạo box */
.pin-toggle-btn svg path[fill="currentColor"] {
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-linejoin: round;
}

/* ============================================
   COLUMN FILTER — 3-dot button + popup
   ============================================ */
/* Note: ag-Grid .ag-header-cell đã có position: absolute (cho column virtualization)
   → đủ làm positioning context cho .col-filter-btn absolute, KHÔNG override position của cell */

/* Reserve 24px ở mép phải header để 3-dot button (position:absolute) không đè lên text/sort/pin */
.ag-theme-balham .ag-header-cell .ag-header-cell-label,
.ag-theme-balham .ag-header-cell .ag-cell-label-container {
  padding-right: 22px;
}
/* Pin button (in flex flow) cần margin-left tối thiểu để cách sort indicator */
.pin-toggle-btn { margin-left: 6px; }

/* Cột "Trạng thái" trong SKIP_HEADER_NAMES (không có filter-btn 3-dot) →
   không cần padding-right 22px reserved cho filter-btn. Bỏ padding để đủ chỗ
   text + sort + pin in-flow, chữ "Trạng thái" không bị che. */
.ag-header-cell[col-id="status"] .ag-cell-label-container { padding-right: 0 !important; }

.col-filter-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  cursor: pointer;
  opacity: 0.45;
  color: #6b7280;
  z-index: 5;
  pointer-events: auto;
  transition: opacity 0.15s ease, color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  line-height: 1;
  box-shadow: none !important;
}
.col-filter-btn:hover { opacity: 1; color: var(--primary-start, #6366f1); }
.col-filter-btn:focus, .col-filter-btn:active { outline: 0 !important; box-shadow: none !important; background: transparent !important; }
/* Đang lọc — 3-dot đỏ rực */
.col-filter-btn.has-filter { opacity: 1; color: #ef4444 !important; }
.col-filter-btn.has-filter:hover { color: #dc2626 !important; }
.col-filter-btn::-moz-focus-inner { border: 0; }
.col-filter-btn svg { display: block; pointer-events: none; }

.col-filter-popup {
  position: fixed;
  width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.14);
  z-index: 1080;
  font-family: inherit;
  font-size: 13px;
  color: #1f2937;
  /* KHÔNG dùng overflow:hidden vì sẽ clip dropdown menu khi mở; thay vào đó border-radius rõ ràng cho footer */
}
.cfp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  gap: 8px;
}
.cfp-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfp-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cfp-clear-link {
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.cfp-clear-link:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}
.cfp-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.cfp-close:hover {
  color: #ef4444;
}
.cfp-close svg { display: block; }
.cfp-body {
  padding: 0 16px 12px;
}
/* Custom dropdown — thay native select, styling được phần menu options */
.cfp-dd {
  position: relative;
  display: inline-block;
  font-family: inherit;
}
.cfp-dd-combinator { display: block; width: 100%; }
.cfp-dd-op { flex: 0 0 124px; }
.cfp-dd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12.5px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  color: #1f2937;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfp-dd-combinator .cfp-dd-trigger { padding: 9px 12px; font-size: 13px; }
.cfp-dd-trigger:hover { border-color: #d1d5db; }
.cfp-dd.open .cfp-dd-trigger {
  border-color: var(--primary-end, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246), 0.12);
}
.cfp-dd-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfp-dd-caret {
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.18s ease;
}
.cfp-dd.open .cfp-dd-caret { transform: rotate(180deg); }
.cfp-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 1090;
  max-height: 220px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.18s;
  pointer-events: none;
}
.cfp-dd.open .cfp-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.cfp-dd-menu li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: #374151;
  transition: background 0.12s ease, color 0.12s ease;
}
.cfp-dd-combinator .cfp-dd-menu li { font-size: 13px; padding: 8px 10px; }
.cfp-dd-menu li + li { margin-top: 1px; }
.cfp-dd-menu li:hover {
  background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.08);
  color: #1f2937;
}
.cfp-dd-menu li.active {
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 99, 102, 241), 0.1), rgba(var(--primary-end-rgb, 139, 92, 246), 0.1));
  color: var(--primary-start, #6366f1);
  font-weight: 600;
}
.cfp-dd-text { flex: 1; }
.cfp-dd-check { margin-left: auto; color: var(--primary-start, #6366f1); flex-shrink: 0; }
.cfp-divider {
  border: none;
  border-top: 1px solid #f3f4f6;
  margin: 12px 0;
}
.cfp-conditions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfp-condition {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* (cfp-op cũ đã thay bằng custom dropdown .cfp-dd-op) */
.cfp-inputs {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.cfp-value, .cfp-value2 {
  flex: 1;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  color: #1f2937;
  min-width: 0;
  background: #fff;
}
.cfp-value:focus, .cfp-value2:focus {
  border-color: var(--primary-end, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246), 0.12);
}
.cfp-hidden { display: none !important; }
.cfp-del {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #9ca3af;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.cfp-del:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.cfp-del svg { display: block; }
.cfp-add-condition {
  background: none;
  border: none;
  color: var(--primary-end, #8b5cf6);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 0 4px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.cfp-add-condition:hover { color: var(--primary-start, #6366f1); }

/* Mode VALUES — danh sách giá trị có sẵn (compact & polished) */
.cfp-values-wrap { margin-top: 4px; }
.cfp-values-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.cfp-values-search-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.cfp-values-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 1;
}
.cfp-values-search {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
  color: #1f2937;
  background: #fff;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfp-values-search::-webkit-search-cancel-button,
.cfp-values-search::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.cfp-values-search::placeholder { color: #9ca3af; }
.cfp-values-search:focus {
  border-color: var(--primary-end, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246), 0.12);
}
.cfp-values-search-wrap:focus-within .cfp-values-search-icon { color: var(--primary-end, #8b5cf6); }
.cfp-values-all, .cfp-values-none {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  color: #4b5563;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.cfp-values-all:hover {
  border-color: var(--primary-end, #8b5cf6);
  color: var(--primary-end, #8b5cf6);
  background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.06);
}
.cfp-values-none:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}
.cfp-values-count {
  font-size: 11px;
  color: var(--primary-start, #6366f1);
  font-weight: 700;
  background: linear-gradient(135deg, rgba(var(--primary-end-rgb, 139, 92, 246), 0.14), rgba(var(--primary-rgb, 99, 102, 241), 0.14));
  padding: 4px 9px;
  border-radius: 12px;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.cfp-values-list {
  display: block;
  max-height: 220px;
  overflow-y: auto;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 3px;
  background: #fff;
}
.cfp-value-item {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: #374151;
  transition: background 0.1s, color 0.1s;
  box-sizing: border-box;
}
.cfp-value-item + .cfp-value-item { margin-top: 1px; }
.cfp-value-item.cfp-value-hidden { display: none !important; }
.cfp-value-item:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.06); }
.cfp-value-item:has(.cfp-value-cb:checked) {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.07);
  color: var(--primary-start, #6366f1);
  font-weight: 600;
}
.cfp-value-cb {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary-end, #8b5cf6);
  margin: 0;
}
.cfp-value-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfp-values-list::-webkit-scrollbar { width: 5px; }
.cfp-values-list::-webkit-scrollbar-track { background: transparent; }
.cfp-values-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.cfp-values-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Toggle cards (Loại trừ / Tự động tích chọn) — clone style của ID filter */
.cfp-toggles {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.cfp-toggle-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  user-select: none;
  min-width: 0;
}
.cfp-toggle-card:hover { border-color: #d1d5db; background: #fafafa; }
.cfp-toggle-card.active {
  border-color: var(--primary-end, #8b5cf6);
  background: linear-gradient(135deg, rgba(var(--primary-end-rgb, 139, 92, 246), 0.06), rgba(var(--primary-rgb, 99, 102, 241), 0.06));
  box-shadow: 0 1px 4px rgba(var(--primary-end-rgb, 139, 92, 246), 0.1);
}
.cfp-toggle-info { flex: 1; min-width: 0; }
.cfp-toggle-title { font-size: 12px; font-weight: 600; color: #1f2937; line-height: 1.3; }
.cfp-toggle-card.active .cfp-toggle-title { color: var(--primary-start, #6366f1); }
.cfp-toggle-desc { font-size: 10px; color: #6b7280; margin-top: 2px; line-height: 1.3; }
.cfp-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}
.cfp-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cfp-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d1d5db;
  border-radius: 18px;
  transition: background 0.18s;
}
.cfp-switch-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.cfp-switch input:checked + .cfp-switch-slider { background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7); }
.cfp-switch input:checked + .cfp-switch-slider::before { transform: translateX(14px); }
.cfp-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fafafa;
  border-top: 1px solid #f3f4f6;
  border-radius: 0 0 16px 16px;
}
/* 3 nút footer — 1 dải gradient liên tục từ violet → indigo → teal → green,
   chạy từ "Bỏ lọc" (trái) qua "Chỉ tích chọn" (giữa) đến "Lọc" (phải).
   Mỗi nút pick up màu từ chỗ nút trước kết thúc → seam liền mạch. */
.cfp-clear, .cfp-apply, .cfp-deny {
  flex: 1;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s, filter 0.15s;
}
.cfp-clear {
  background: linear-gradient(to right, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1));
  box-shadow: 0 4px 12px rgba(var(--primary-end-rgb, 139, 92, 246), 0.26);
}
.cfp-clear:hover { opacity: 0.94; box-shadow: 0 6px 16px rgba(var(--primary-end-rgb, 139, 92, 246), 0.38); }
.cfp-deny {
  background: linear-gradient(to right, var(--primary-start, #6366f1), #14b8a6);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.26);
}
.cfp-deny:hover { opacity: 0.94; box-shadow: 0 6px 16px rgba(20, 184, 166, 0.38); }
.cfp-apply {
  background: linear-gradient(to right, #14b8a6, #10b981);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.26);
}
.cfp-apply:hover { opacity: 0.94; box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4); }
.cfp-clear:active, .cfp-apply:active, .cfp-deny:active { transform: scale(0.97); }
.pin-toggle-btn i {
  font-size: inherit;
  line-height: 1;
}

.ag-header-cell-text {
  font-weight: 800 !important;
  font-size: 0.86rem !important;
}

.ag-row {
  border-color: var(--border-light) !important;
  transition: var(--transition-fast);
}

.ag-row:hover {
  background: var(--bg-hover) !important;
}

.ag-row-selected {
  background: var(--bg-active) !important;
}

/* ============================================
   POPUP SPECIFIC STYLES
   ============================================ */
#app[data="popup"] {
  border-radius: var(--radius-xl);
}

#app[data="popup"] .rounded {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-lg);
}

#app[data="popup"] .border-bottom {
  border-color: var(--border-light) !important;
}

/* Popup Icons - Simple colored icons without background */
#app[data="popup"] strong i {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  font-size: 18px;
}

/* Different colors for each popup menu item - no background */
#app[data="popup"] .border-bottom:nth-child(1) strong i {
  color: var(--primary-start, #6366f1) !important;
}
#app[data="popup"] .border-bottom:nth-child(2) strong i {
  color: #10b981 !important;
}
#app[data="popup"] .border-bottom:nth-child(3) strong i {
  color: #f59e0b !important;
}
#app[data="popup"] .border-bottom:nth-child(4) strong i {
  color: #3b82f6 !important;
}
#app[data="popup"] .border-bottom:nth-child(5) strong i {
  color: #ec4899 !important;
}
#app[data="popup"] .border-bottom:nth-child(6) strong i {
  color: #06b6d4 !important;
}
#app[data="popup"] .border-bottom:nth-child(7) strong i {
  color: var(--primary-end, #8b5cf6) !important;
}
#app[data="popup"] .border-bottom:nth-child(8) strong i {
  color: #ef4444 !important;
}

/* Popup Icon Style */
.popup-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: white;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.popup-icon i {
  color: white !important;
}

.popup-item {
  transition: var(--transition-fast);
}

.popup-item:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.03);
}

/* ============================================
   SETTING PAGE
   ============================================ */
#app[data="setting"] {
  background: var(--bg-card) !important;
  padding: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Status dot — chấm trạng thái phát ring nháy (giống .nh-quality 'Live ads ko sao cả')
   Target trực tiếp pattern .bg-X.rounded-circle trong cell (bm.js render inline ko qua createStatusBadge).
   Set color = bg để box-shadow currentColor match màu dot, sau đó animate spread 0→5px fade. */
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-success,
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-danger,
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-warning,
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-info,
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-primary,
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-secondary {
  animation: status-dot-glow 1.6s ease-out infinite;
}
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-success { color: #198754; }
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-danger { color: #dc3545; }
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-warning { color: #ffc107; }
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-info { color: #0dcaf0; }
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-primary { color: #0d6efd; }
.ag-theme-balham .ag-cell span.d-flex.rounded-circle.bg-secondary { color: #6c757d; }
@keyframes status-dot-glow {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  100% {
    box-shadow: 0 0 0 5px transparent;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: var(--primary-gradient) !important;
}

.bg-gradient-secondary {
  background: var(--secondary-gradient) !important;
}

.bg-gradient-accent {
  background: var(--accent-gradient) !important;
}

.shadow-primary {
  box-shadow: var(--shadow-primary) !important;
}

.hover-lift {
  transition: var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Text Colors using new palette */
.text-primary-new {
  color: var(--primary-start) !important;
}

/* Border helpers */
.border-light-new {
  border-color: var(--border-light) !important;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
[data-bs-theme="dark"] {
  --bg-body: #1b2433;
  --bg-card: #232e3d;
  --bg-sidebar: #232e3d;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .card {
  background: var(--bg-card);
  border-color: var(--border-light) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-bs-theme="dark"] .modal-content {
  background: var(--bg-card);
}

[data-bs-theme="dark"] .dropdown-menu {
  background: var(--bg-card);
  border-color: var(--border-light);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-card);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   DARK MODE — MỞ RỘNG cho surface hardcode (toolbar/adPanel/grid/footer/
   button/input/AG-Grid/SweetAlert). Block này nằm sau cùng modern-theme.css
   (load sau style.css) + selector [data-bs-theme=dark] đủ specificity để đè
   các rule sáng hardcode trong style.css. Bảng màu: body #1b2433 (darkest),
   surface #232e3d, elevated #2e3a4b, text #e2e8f0/#94a3b8, border rgba trắng.
   ============================================ */
[data-bs-theme="dark"] {
  --bs-body-bg: #232e3d; /* surface — dùng bởi .dark-body-bg (toolbar strip) */
  --bs-body-color: #e2e8f0;
  --bs-border-color: rgba(255, 255, 255, 0.1);
  --bs-secondary-bg: #2e3a4b;
  color-scheme: dark;
}

/* Toolbar trên + footer dưới + thanh strip bg-white */
[data-bs-theme="dark"] .border-bottom.bg-white,
[data-bs-theme="dark"] .border-top.bg-white,
[data-bs-theme="dark"] .tkqc-toolbar {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Panel "Chức năng" bên phải + app wrapper */
[data-bs-theme="dark"] #adPanel,
[data-bs-theme="dark"] .app-wrapper {
  background: #232e3d !important;
}
/* Viền bao cụm content (.app-wrapper rounded) — tách khỏi khung #app cùng màu,
   thay cho tương phản viền tím ở light. + divider grid|panel rõ. */
[data-bs-theme="dark"] .app-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 18px 50px -12px rgba(var(--primary-rgb, 99, 102, 241), 0.22),
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.07) !important;
}
[data-bs-theme="dark"] #adPanel {
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Khung viền bao quanh = padding #app → ĐỒNG MÀU header tối #232e3d (user muốn
   viền mép trái/phải/dưới khớp header trong dark; light vẫn giữ gradient tím). */
[data-bs-theme="dark"] #app,
[data-bs-theme="dark"] #app[data] {
  background: #232e3d !important;
  background-image: none !important;
}
[data-bs-theme="dark"] #header {
  background: #232e3d !important;
  background-image: none !important;
}

/* ----- Patch các surface sáng còn sót (từ audit F12) ----- */
/* Header bar panel "Chức năng" (inline background:#f8f9fa) + mọi inline #f8f9fa/#fafafb sáng */
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #fafafb"],
[data-bs-theme="dark"] .bg-light {
  background-color: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Nút "Sắp xếp" feature panel (inline #fff) — 4 trang */
[data-bs-theme="dark"] #btnSortAdsFeatures,
[data-bs-theme="dark"] #btnSortBmFeatures,
[data-bs-theme="dark"] #btnSortPageFeatures,
[data-bs-theme="dark"] #btnSortCloneFeatures,
[data-bs-theme="dark"] #btnSortGroupFeatures,
[data-bs-theme="dark"] #btnSortFeatures {
  background: #2e3a4b !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
/* Text tối hardcode (#374151/#1a1a1a/#475569) trong header/card/modal → sáng */
[data-bs-theme="dark"] [style*="color: #374151"],
[data-bs-theme="dark"] [style*="color:#374151"],
[data-bs-theme="dark"] [style*="color: #1a1a1a"],
[data-bs-theme="dark"] [style*="color: #475569"] {
  color: #e2e8f0 !important;
}
/* Công tắc bật/tắt (form-switch) — track lúc OFF đang xám sáng */
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-color: #334155 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
/* Avatar / vòng tròn nền trắng */
[data-bs-theme="dark"] .rounded-circle.bg-white {
  background-color: #2e3a4b !important;
}
/* Ô toggle theme-aware MỌI feature card — chuẩn = #vuotVeryMailOption (#232e3d trong dark).
   Bắt cả .fx-very-toggle (cũ) LẪN mọi label toggle đã đổi sang background:var(--bs-tertiary-bg)
   → đồng bộ nền + viền cho tất cả toggle-box, không phải sửa từng card. */
[data-bs-theme="dark"] .fx-very-toggle,
[data-bs-theme="dark"] label[style*="var(--bs-tertiary-bg)"] {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ----- Nội dung CÀI ĐẶT feature khi bật/mở rộng (sidebar) — nhiều text xám + nền sáng hardcode ----- */
/* Text xám hardcode (#6c757d ×50, #666, #6b7280, #495057) → sáng hơn cho đọc được */
[data-bs-theme="dark"] [style*="color: #6c757d"],
[data-bs-theme="dark"] [style*="color:#6c757d"],
[data-bs-theme="dark"] [style*="color: #6b7280"],
[data-bs-theme="dark"] [style*="color:#6b7280"],
[data-bs-theme="dark"] [style*="color: #666"],
[data-bs-theme="dark"] [style*="color:#666"],
[data-bs-theme="dark"] [style*="color: #495057"] {
  color: #94a3b8 !important;
}
/* Nền sáng hardcode trong feature card (sub-panel / pill "Đã thêm") → tối */
[data-bs-theme="dark"] [style*="background: #f3f4f6"],
[data-bs-theme="dark"] [style*="background:#f3f4f6"],
[data-bs-theme="dark"] [style*="background: #e9ecef"],
[data-bs-theme="dark"] [style*="background: #f1f5f9"],
[data-bs-theme="dark"] [style*="background: #fafafa"],
[data-bs-theme="dark"] [style*="background: #fff3e0"] {
  background-color: #2e3a4b !important;
}
/* Nhãn + chú thích form trong feature/setting → sáng (không !important để label accent inline giữ màu) */
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] [data-feature] small {
  color: #cbd5e1;
}
[data-bs-theme="dark"] [data-feature] .text-muted,
[data-bs-theme="dark"] [data-feature] .text-secondary {
  color: #94a3b8 !important;
}
/* Panel cài đặt feature mở rộng (#xxxSetting .border-top, bg #f8fafc từ style.css) */
[data-bs-theme="dark"] [data-feature] .border-top {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Nhãn Luồng/Delay (#64748b) hơi mờ → sáng */
[data-bs-theme="dark"] label.position-absolute.fw-medium {
  color: #94a3b8 !important;
}
/* Công tắc role=switch lúc OFF (rule .form-switch cũ chưa ăn) */
[data-bs-theme="dark"] .form-check-input[role="switch"]:not(:checked) {
  background-color: #334155 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== Select2 (dropdown ngôn ngữ...) — mặc định toàn trắng ===== */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] .select2-selection__rendered,
[data-bs-theme="dark"] .select2-selection__placeholder {
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .select2-dropdown {
  background-color: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] .select2-results__option {
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary-start, #6366f1) !important;
}
[data-bs-theme="dark"] .select2-search__field {
  background: #1b2433 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ===== SweetAlert2 close + cancel button ===== */
[data-bs-theme="dark"] .swal2-close {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .swal2-close:hover {
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .swal2-cancel.swal2-styled {
  background: #2e3a4b !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ===== Popup "Tải dữ liệu" (Page/BM/TKQC) — class bm-*/ad-* trong .fx-load-modal.
   Các popup này dùng inline <style> tô màu sáng bằng CLASS nên rule [style*=] không bắt;
   cần override theo class khi dark. ===== */
[data-bs-theme="dark"] .fx-load-modal {
  background: #232e3d !important;
}
[data-bs-theme="dark"] .fx-load-modal .bm-modal-header,
[data-bs-theme="dark"] .fx-load-modal .ad-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .fx-load-modal .bm-modal-header-title,
[data-bs-theme="dark"] .fx-load-modal .ad-modal-header-title {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .fx-load-modal .bm-modal-header-sub,
[data-bs-theme="dark"] .fx-load-modal .ad-modal-header-sub {
  color: #94a3b8 !important;
}
/* Thẻ radio / toggle / limit (nền trắng → tối) */
[data-bs-theme="dark"] .fx-load-modal .bm-radio-card .bm-radio-content,
[data-bs-theme="dark"] .fx-load-modal .ad-radio-card .ad-radio-content,
[data-bs-theme="dark"] .fx-load-modal .bm-toggle-item,
[data-bs-theme="dark"] .fx-load-modal .ad-toggle-item,
[data-bs-theme="dark"] .fx-load-modal .bm-limit-row,
[data-bs-theme="dark"] .fx-load-modal .ad-limit-row {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .fx-load-modal .bm-toggle-item:hover,
[data-bs-theme="dark"] .fx-load-modal .ad-toggle-item:hover {
  background: #374559 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
/* Thẻ radio đang chọn */
[data-bs-theme="dark"] .fx-load-modal .bm-radio-card input[type="radio"]:checked + .bm-radio-content,
[data-bs-theme="dark"] .fx-load-modal .ad-radio-card input[type="radio"]:checked + .ad-radio-content {
  background: linear-gradient(135deg, #3a3160, #2c2550) !important;
  border-color: var(--primary-end, #8b5cf6) !important;
}
/* Chữ chính */
[data-bs-theme="dark"] .fx-load-modal .bm-radio-text,
[data-bs-theme="dark"] .fx-load-modal .ad-radio-text,
[data-bs-theme="dark"] .fx-load-modal .bm-toggle-label,
[data-bs-theme="dark"] .fx-load-modal .ad-toggle-label,
[data-bs-theme="dark"] .fx-load-modal .bm-limit-label,
[data-bs-theme="dark"] .fx-load-modal .ad-limit-label {
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .fx-load-modal .bm-radio-card input[type="radio"]:checked + .bm-radio-content .bm-radio-text,
[data-bs-theme="dark"] .fx-load-modal .ad-radio-card input[type="radio"]:checked + .ad-radio-content .ad-radio-text {
  color: #c4b5fd !important;
}
/* Chú thích nhỏ */
[data-bs-theme="dark"] .fx-load-modal .bm-radio-desc,
[data-bs-theme="dark"] .fx-load-modal .ad-radio-desc,
[data-bs-theme="dark"] .fx-load-modal .bm-toggle-desc,
[data-bs-theme="dark"] .fx-load-modal .ad-toggle-desc,
[data-bs-theme="dark"] .fx-load-modal .bm-limit-desc,
[data-bs-theme="dark"] .fx-load-modal .ad-limit-desc {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .fx-load-modal .bm-radio-card input[type="radio"]:checked + .bm-radio-content .bm-radio-desc,
[data-bs-theme="dark"] .fx-load-modal .ad-radio-card input[type="radio"]:checked + .ad-radio-content .ad-radio-desc {
  color: #a78bfa !important;
}
/* Khối icon nền trắng / tint sáng → tối (toggle + limit + radio Loại tài khoản) */
[data-bs-theme="dark"] .fx-load-modal .bm-toggle-icon,
[data-bs-theme="dark"] .fx-load-modal .ad-toggle-icon,
[data-bs-theme="dark"] .fx-load-modal .bm-limit-icon,
[data-bs-theme="dark"] .fx-load-modal .ad-limit-icon,
[data-bs-theme="dark"] .fx-load-modal .ad-radio-icon,
[data-bs-theme="dark"] .fx-load-modal .bm-radio-icon {
  background: rgba(255, 255, 255, 0.06) !important;
}
/* Ô nhập số + textarea ID */
[data-bs-theme="dark"] .fx-load-modal .bm-limit-input,
[data-bs-theme="dark"] .fx-load-modal .ad-limit-input,
[data-bs-theme="dark"] .fx-load-modal #pageLoadIdInput textarea,
[data-bs-theme="dark"] .fx-load-modal #bmLoadIdInput textarea,
[data-bs-theme="dark"] .fx-load-modal #adLoadIdInput textarea {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

/* ===== Popup Bảo mật (bms-*) — dựng bằng JS, hardcode sáng toàn bộ ===== */
[data-bs-theme="dark"] .bms-toggle-card,
[data-bs-theme="dark"] .bms-stat-card,
[data-bs-theme="dark"] .bms-item,
[data-bs-theme="dark"] .bms-interval-btn,
[data-bs-theme="dark"] .bms-search-input,
[data-bs-theme="dark"] #bms-search-input {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .bms-toggle-icon,
[data-bs-theme="dark"] .bms-stat-icon,
[data-bs-theme="dark"] .bms-avatar {
  background: #312e81 !important;
}
[data-bs-theme="dark"] .bms-header-status.inactive,
[data-bs-theme="dark"] #bms-status-badge.inactive {
  background: #334155 !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .bms-slider {
  background: #475569 !important;
}
[data-bs-theme="dark"] .bms-header-sub,
[data-bs-theme="dark"] .bms-stat-label,
[data-bs-theme="dark"] .bms-list-title {
  color: #94a3b8 !important;
}

/* ===== Trang HOME — sidebar (hm-*), dashboard (mt-*), Nạp tiền (dep-*) ===== */
/* Card / sidebar / surface trắng → dark */
[data-bs-theme="dark"] .hm-sidebar,
[data-bs-theme="dark"] .hm-content,
[data-bs-theme="dark"] .mt-card,
[data-bs-theme="dark"] .dep-card,
[data-bs-theme="dark"] .dep-history-card {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .mt-card-head {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}
/* Field thông tin CK + header bảng lịch sử nền sáng → tối */
[data-bs-theme="dark"] .dep-field,
[data-bs-theme="dark"] .dep-history-table thead th {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .dep-history-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.04) !important;
}
/* Nút copy / cancel nền trắng → dark */
[data-bs-theme="dark"] .dep-copy,
[data-bs-theme="dark"] .dep-usdt-cancel-btn,
[data-bs-theme="dark"] .dep-usdt-cancel-no,
[data-bs-theme="dark"] .textarea-clear-btn {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}
/* Highlight nội dung CK (vàng) — box USDT teal xử lý ở block HOME đầy đủ bên dưới */
[data-bs-theme="dark"] .dep-field-highlight {
  background: #2a2410 !important;
  border-color: #a16207 !important;
}
/* USDT amount input */
[data-bs-theme="dark"] .dep-input {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
/* Status pill cancelled (xám) — các pill màu khác giữ nguyên */
[data-bs-theme="dark"] .dep-status-pill.is-cancelled {
  background: #334155 !important;
  color: #cbd5e1 !important;
}
/* Text xám trang HOME */
[data-bs-theme="dark"] .hm-item-label,
[data-bs-theme="dark"] .hm-section-label,
[data-bs-theme="dark"] .dep-subtitle,
[data-bs-theme="dark"] .dep-note,
[data-bs-theme="dark"] .dep-input-lbl,
[data-bs-theme="dark"] .dep-history-table thead th {
  color: #94a3b8 !important;
}
/* Nút logout VIA (soft-red) → red tối */
[data-bs-theme="dark"] #logoutVia.btn {
  background: rgba(220, 38, 38, 0.18) !important;
  color: #f87171 !important;
}
/* QR (.dep-qr-wrap) GIỮ nền trắng để quét được — KHÔNG đổi */

/* ===== DARK MODE CHO TX-PAGE (Lịch sử biến động) ===== */
[data-bs-theme="dark"] .tx-section-title { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .tx-section-desc { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tx-title-icon-box {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3) !important;
}
[data-bs-theme="dark"] .tx-view-switcher {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .tx-view-btn {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .tx-view-btn:hover {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .tx-view-btn.is-active {
  background: #2e3a4b !important;
  color: #a5b4fc !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
[data-bs-theme="dark"] .tx-btn-refresh {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .tx-btn-refresh:hover {
  background: #2e3a4b !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .tx-table-card {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .tx-filter-bar-wrap {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .tx-filter-bar-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] .tx-filter {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .tx-filter:hover {
  background: #2e3a4b !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .tx-filter.is-active {
  background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6)) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .tx-table thead th {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .tx-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] .tx-table tbody td {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .tx-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}
[data-bs-theme="dark"] .tx-type-name { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .tx-desc-cell { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tx-after { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .tx-feed-item {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .tx-feed-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] .tx-feed-item:hover {
  background: #202b3c !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-bs-theme="dark"] .tx-feed-title { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .tx-feed-desc { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tx-empty p { color: #94a3b8 !important; }

/* ===== DARK HOME ĐẦY ĐỦ (workflow) — sidebar/dashboard/mail-temp/deposit/login.
   Đặt SAU block patch trên để override đúng hue (vd box USDT teal, không vàng). ===== */
/* ---------- SIDEBAR (.hm-*) ---------- */
[data-bs-theme="dark"] .hm-section-label { color: #94a3b8 !important; }
/* USDT min/max hint + banner gói active (chữ indigo đậm #4338ca khó đọc trên dark) */
[data-bs-theme="dark"] #depUsdtMin,
[data-bs-theme="dark"] #depUsdtMax { color: #94a3b8 !important; }
[data-bs-theme="dark"] .pkg-active-info,
[data-bs-theme="dark"] .pkg-active-info b { color: #c7d2fe !important; }
[data-bs-theme="dark"] .pkg-upgrade-guide { color: #a7f3d0 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .pkg-upgrade-guide b { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .hm-item { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .hm-item:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] .hm-sec-toggle { color: #cbd5e1 !important; background: rgba(59, 130, 246, 0.14) !important; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36) !important; }
[data-bs-theme="dark"] .hm-sec-toggle:hover { background: rgba(59, 130, 246, 0.22) !important; color: #f1f5f9 !important; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.52) !important; }
[data-bs-theme="dark"] .hm-item.active { background: rgba(var(--primary-rgb, 99, 102, 241), 0.22) !important; color: #a5b4fc !important; box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.45) !important; }
[data-bs-theme="dark"] .hm-item-danger { background: rgba(239, 68, 68, 0.1) !important; color: #fca5a5 !important; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3) !important; }
[data-bs-theme="dark"] .hm-item-danger:hover { background: rgba(239, 68, 68, 0.18) !important; color: #fecaca !important; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45) !important; }
[data-bs-theme="dark"] .hm-sep { background: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .hm-side-header { background: #1b2130 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55) !important; }
/* Flyout "Danh sách ứng dụng" (#hmAppPopup) — Bento Grid Launchpad Dark Mode */
[data-bs-theme="dark"] .hm-app-popup {
  background: #111827 !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(99, 102, 241, 0.12) !important;
}
[data-bs-theme="dark"] .hm-app-popup::before {
  background: #111827 !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
}
[data-bs-theme="dark"] .hm-app-popup-hd { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
[data-bs-theme="dark"] .hm-app-popup-title { color: #818cf8 !important; }
[data-bs-theme="dark"] .hm-app-popup-dot { background: #818cf8 !important; box-shadow: 0 0 10px rgba(129, 140, 248, 0.85) !important; }
[data-bs-theme="dark"] .hm-app-popup-count {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .hm-app-search i { color: #64748b !important; }
[data-bs-theme="dark"] .hm-app-search:focus-within i { color: #818cf8 !important; }
[data-bs-theme="dark"] .hm-app-search-input {
  background: #0b0f17 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .hm-app-search-input::placeholder { color: #64748b !important; }
[data-bs-theme="dark"] .hm-app-search-input:focus {
  border-color: #6366f1 !important;
  background: #111827 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}
[data-bs-theme="dark"] .hm-app-grid .hm-app {
  background: #161f30 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
[data-bs-theme="dark"] .hm-app-grid .hm-app:hover {
  background: #1e293b !important;
  border-color: color-mix(in srgb, var(--c, #6366f1) 50%, rgba(255, 255, 255, 0.18)) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--c, #6366f1) 30%, transparent) !important;
}
[data-bs-theme="dark"] .hm-app-ic {
  background: color-mix(in srgb, var(--c, #6366f1) 16%, #1a2234) !important;
  border-color: color-mix(in srgb, var(--c, #6366f1) 28%, transparent) !important;
}
[data-bs-theme="dark"] .hm-app-lb { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .hm-app-grid .hm-app:hover .hm-app-lb {
  color: color-mix(in srgb, var(--c, #6366f1) 85%, #ffffff) !important;
}
[data-bs-theme="dark"] .hm-app-grid .hm-app.active {
  background: color-mix(in srgb, var(--c, #6366f1) 18%, #161f30) !important;
  border-color: color-mix(in srgb, var(--c, #6366f1) 55%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #6366f1) 50%, transparent) !important;
}
[data-bs-theme="dark"] .hm-app-grid .hm-app.active .hm-app-lb {
  color: color-mix(in srgb, var(--c, #6366f1) 85%, #ffffff) !important;
}
[data-bs-theme="dark"] .hm-app-de { color: #94a3b8 !important; }
[data-bs-theme="dark"] .hm-app-grid { scrollbar-color: #334155 transparent; }
[data-bs-theme="dark"] .hm-app-grid::-webkit-scrollbar-thumb { background: #334155 !important; background-clip: content-box; }
[data-bs-theme="dark"] .hm-app-empty { color: #64748b !important; }
/* Nút "Danh sách ứng dụng" (.hm-applist): chữ #4f46e5 quá tối trên nền dark → indigo sáng */
[data-bs-theme="dark"] .hm-applist { color: #a5b4fc !important; }
/* QUY TẮC icon popup header: nền tint NHẠT + icon màu (chuẩn .bmp-hd-ic), KHÔNG gradient đậm/icon trắng */
[data-bs-theme="dark"] .pmb-picker-ic, [data-bs-theme="dark"] .fxcl-h-ic { background: #2e2740 !important; color: #b794f6 !important; }
[data-bs-theme="dark"] .hm-side-dot { border-color: #7c3aed !important; }
[data-bs-theme="dark"] .hm-side-name { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .hm-side-bal { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .hm-side-bal i { color: #34d399 !important; }
[data-bs-theme="dark"] .hm-side-download { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #9333ea 100%) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; }
[data-bs-theme="dark"] .hm-side-download:hover { box-shadow: 0 8px 22px rgba(124, 58, 237, 0.45) !important; }
[data-bs-theme="dark"] .hm-empty-title { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .hm-empty-sub { color: #94a3b8 !important; }
/* ---------- DASHBOARD / MAIL-TEMP (.mt-*) ---------- */
[data-bs-theme="dark"] .mt-title, [data-bs-theme="dark"] .mt-item-email, [data-bs-theme="dark"] .mt-mail-subj, [data-bs-theme="dark"] .mt-msg-subj { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .mt-subtitle, [data-bs-theme="dark"] .mt-label, [data-bs-theme="dark"] .mt-mail-from, [data-bs-theme="dark"] .mt-msg-from, [data-bs-theme="dark"] .mt-msg-snippet, [data-bs-theme="dark"] .mt-msg-time, [data-bs-theme="dark"] .mt-empty-text, [data-bs-theme="dark"] .mt-link-list-head, [data-bs-theme="dark"] .mt-msg-head { color: #94a3b8 !important; }
[data-bs-theme="dark"] .mt-input, [data-bs-theme="dark"] .mt-select { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .mt-input::placeholder { color: #64748b !important; }
[data-bs-theme="dark"] .mt-input[readonly] { background: #2e3a4b !important; color: #cbd5e1 !important; }
[data-bs-theme="dark"] .mt-input:disabled { background: #1f2937 !important; color: #64748b !important; }
[data-bs-theme="dark"] .mt-btn-amber { color: #232e3d !important; }
[data-bs-theme="dark"] .mt-link-row { background: #2e3a4b !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .mt-link-row:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.12) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .mt-link-text, [data-bs-theme="dark"] .mt-mail-body { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .mt-pill { background: #2e3a4b !important; }
[data-bs-theme="dark"] .mt-item, [data-bs-theme="dark"] .mt-mail-msg, [data-bs-theme="dark"] .mt-msg { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .mt-item:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.1) !important; border-color: var(--primary-start, #6366f1) !important; }
[data-bs-theme="dark"] .mt-item.active, [data-bs-theme="dark"] .mt-msg.expanded { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; border-color: var(--primary-start, #6366f1) !important; }
[data-bs-theme="dark"] .mt-otp-card { background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(var(--primary-rgb, 99, 102, 241), 0.14)) !important; border-color: rgba(16, 185, 129, 0.35) !important; }
[data-bs-theme="dark"] .mt-otp-label, [data-bs-theme="dark"] .mt-otp-value { color: #34d399 !important; }
[data-bs-theme="dark"] .mt-otp-badge { background: #3a2e0a !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .mt-otp-badge:hover { background: #4a3a0c !important; }
[data-bs-theme="dark"] .mt-link-btn { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .mt-link-btn:hover { background: rgba(59, 130, 246, 0.28) !important; }
[data-bs-theme="dark"] .mt-link-btn.copied { background: rgba(16, 185, 129, 0.18) !important; color: #34d399 !important; }
[data-bs-theme="dark"] .mt-link-item { background: rgba(59, 130, 246, 0.12) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .mt-link-item:hover { background: rgba(59, 130, 246, 0.2) !important; }
[data-bs-theme="dark"] .mt-modal-meta { color: #94a3b8 !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .mt-modal-iframe { border-color: rgba(255, 255, 255, 0.1) !important; background: #232e3d !important; }
/* ---------- NẠP TIỀN (.dep-*) ---------- */
[data-bs-theme="dark"] .dep-no-method { background: #1c2634 !important; border-color: #334155 !important; }
[data-bs-theme="dark"] .dep-no-method > i { color: #64748b !important; }
[data-bs-theme="dark"] .dep-no-method-title { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .dep-no-method-desc { color: #94a3b8 !important; }
[data-bs-theme="dark"] .dep-title, [data-bs-theme="dark"] .dep-val { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .dep-label, [data-bs-theme="dark"] .dep-qr-hint, [data-bs-theme="dark"] .dep-usdt-rate, [data-bs-theme="dark"] .dep-usdt-amount-lbl, [data-bs-theme="dark"] .dep-usdt-wallet-lbl, [data-bs-theme="dark"] .dep-usdt-vnd-eq, [data-bs-theme="dark"] .dep-usdt-countdown, [data-bs-theme="dark"] .dep-history-empty, [data-bs-theme="dark"] .dep-history-empty p { color: #94a3b8 !important; }
[data-bs-theme="dark"] .dep-qr-empty, [data-bs-theme="dark"] .dep-input-hint { color: #64748b !important; }
[data-bs-theme="dark"] .dep-history-empty i { color: #475569 !important; }
[data-bs-theme="dark"] .dep-usdt-preview { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .dep-usdt-info-bar { background: rgba(38, 161, 123, 0.16) !important; border-color: rgba(38, 161, 123, 0.4) !important; color: #5eead4 !important; }
[data-bs-theme="dark"] .dep-usdt-amount-box { background: rgba(38, 161, 123, 0.1) !important; border-color: rgba(38, 161, 123, 0.45) !important; }
[data-bs-theme="dark"] .dep-usdt-wallet-box { background: rgba(38, 161, 123, 0.1) !important; border-color: rgba(38, 161, 123, 0.4) !important; }
[data-bs-theme="dark"] .dep-usdt-cancel-btn:hover { background: #2c3a4f !important; }
[data-bs-theme="dark"] .dep-usdt-error { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(220, 38, 38, 0.35) !important; }
[data-bs-theme="dark"] .dep-history-table tbody td { color: #e2e8f0 !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; }
[data-bs-theme="dark"] .dep-status-pill.is-completed { background: rgba(16, 185, 129, 0.18) !important; color: #34d399 !important; }
[data-bs-theme="dark"] .dep-status-pill.is-pending { background: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; }
[data-bs-theme="dark"] .dep-status-pill.is-cancelled { background: #2e3a4b !important; color: #94a3b8 !important; }
/* ---------- LOGIN / AUTH (.au-*) — .au-page/.au-hero giữ gradient gốc ---------- */
[data-bs-theme="dark"] .au-card { background: rgba(30, 41, 59, 0.94) !important; }
[data-bs-theme="dark"] .au-form-pane { background: #232e3d !important; }
[data-bs-theme="dark"] .au-form-head-title, [data-bs-theme="dark"] .au-section-title, [data-bs-theme="dark"] .au-success-title { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .au-form-head-sub, [data-bs-theme="dark"] .au-section-sub, [data-bs-theme="dark"] .au-success-sub { color: #94a3b8 !important; }
[data-bs-theme="dark"] .au-label, [data-bs-theme="dark"] .au-check { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .au-optional, [data-bs-theme="dark"] .au-input-wrap > i, [data-bs-theme="dark"] .au-toggle-pass, [data-bs-theme="dark"] .au-divider span { color: #64748b !important; }
[data-bs-theme="dark"] .au-input { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .au-input::placeholder { color: #64748b !important; }
[data-bs-theme="dark"] .au-toggle-pass:hover { background: #2e3a4b !important; color: #cbd5e1 !important; }
[data-bs-theme="dark"] .au-error { color: #fca5a5 !important; background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.3) !important; }
[data-bs-theme="dark"] .au-divider::before, [data-bs-theme="dark"] .au-divider::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important; }
[data-bs-theme="dark"] .au-btn-google, [data-bs-theme="dark"] .au-btn-licensekey { background: #2e3a4b !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .au-btn-google:hover, [data-bs-theme="dark"] .au-btn-licensekey:hover { background: #2c3a4f !important; border-color: rgba(255, 255, 255, 0.2) !important; }
[data-bs-theme="dark"] .au-input-code, [data-bs-theme="dark"] .au-tab.is-active { color: #a5b4fc !important; }
[data-bs-theme="dark"] .au-tab.is-active { background: #2e3a4b !important; }
[data-bs-theme="dark"] .au-tab { color: #94a3b8 !important; }
/* Value accent hơi tối trên nền dark → nâng sáng cho rõ */
[data-bs-theme="dark"] #hmSideBalance { color: #34d399 !important; }
[data-bs-theme="dark"] .dep-val.dep-mono,
[data-bs-theme="dark"] strong.dep-qr-content,
[data-bs-theme="dark"] .dep-qr-content { color: #f87171 !important; }
[data-bs-theme="dark"] #depUsdtRate,
[data-bs-theme="dark"] #depUsdtPreview { color: #5eead4 !important; }
[data-bs-theme="dark"] .dep-history-table code,
[data-bs-theme="dark"] .dep-history-card code { color: #67e8f9 !important; }

/* ===== HOME view Gói (.pkg-*) + container .hm-view ===== */
[data-bs-theme="dark"] .hm-view.active { background: #1b2433 !important; }
[data-bs-theme="dark"] .pkg-title,
[data-bs-theme="dark"] .pkg-card-title,
[data-bs-theme="dark"] .pkg-card-name,
[data-bs-theme="dark"] .pkg-card-section > .mt-card-head { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .pkg-subtitle,
[data-bs-theme="dark"] .pkg-card-desc,
[data-bs-theme="dark"] .pkg-card-price-suffix,
[data-bs-theme="dark"] .pkg-sum-label,
[data-bs-theme="dark"] .pkg-duration-label { color: #94a3b8 !important; }
[data-bs-theme="dark"] .pkg-card-section,
[data-bs-theme="dark"] .pkg-card,
[data-bs-theme="dark"] .pkg-cancel-btn,
[data-bs-theme="dark"] .pkg-buy-btn-outline {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .pkg-duration-card {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .pkg-card-section > .mt-card-head {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .pkg-sum-balance,
[data-bs-theme="dark"] .pkg-sum-row {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .pkg-card.is-selected,
[data-bs-theme="dark"] .pkg-card:hover {
  border-color: var(--primary-start, #6366f1) !important;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.1) !important;
}

/* ===== Công tắc Bootstrap OFF — ép tối (rule role=switch trước chưa ăn) ===== */
[data-bs-theme="dark"] input.form-check-input:not(:checked) {
  background-color: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== Popup Lọc ID (id-*) + công tắc custom ===== */
[data-bs-theme="dark"] .id-toggle-card {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] #swal-input-ids {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .id-toggle-desc { color: #94a3b8 !important; }
[data-bs-theme="dark"] .id-switch-slider { background: #475569 !important; }
/* Slider toggle custom popup JS (bm.js .bm-switch-slider, scripts.js .ad-switch-slider) — OFF #d1d5db → tối */
[data-bs-theme="dark"] .bm-switch-slider,
[data-bs-theme="dark"] .ad-switch-slider { background-color: #475569 !important; }

/* ===== Popup config feature multi-select (bm-/ad-/page-/clone-* — JS inject <style> sáng).
   Dùng [class*="-suffix"] để phủ MỌI tiền tố trang trong 1 block. ===== */
[data-bs-theme="dark"] [class*="-toggle-item"],
[data-bs-theme="dark"] [class*="-limit-row"],
[data-bs-theme="dark"] [class*="-radio-content"] {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] [class*="-toggle-item"]:hover { background: #2e3a4b !important; }
[data-bs-theme="dark"] [class*="-radio-icon"],
[data-bs-theme="dark"] [class*="-limit-icon"] { background: #2e3a4b !important; }
[data-bs-theme="dark"] [class*="-limit-input"] {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] [class*="-toggle-label"],
[data-bs-theme="dark"] [class*="-limit-label"] { color: #cbd5e1 !important; }
[data-bs-theme="dark"] [class*="-radio-text"] { color: #a78bfa !important; }

/* ===== Swal close button (nền trắng / chữ #666) ===== */
[data-bs-theme="dark"] .swal2-close,
[data-bs-theme="dark"] .sp-modal .swal2-close {
  background: transparent !important;
  color: #94a3b8 !important;
}

/* ===== Overlay loading vùng lưới (#loading nền #ffffffc7 trắng) → tối ===== */
[data-bs-theme="dark"] #loading {
  background: rgba(27, 36, 51, 0.88) !important;
}
[data-bs-theme="dark"] #loadingData strong {
  color: #cbd5e1 !important;
}

/* Nút control (Bắt đầu/Lọc/Cột/Xuất...) + nút viền trắng */
[data-bs-theme="dark"] .control-btn,
[data-bs-theme="dark"] .btn.border:not(.btn-primary):not([class*="bg-"]),
[data-bs-theme="dark"] .shadow-sm.btn.border {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .control-btn:hover,
[data-bs-theme="dark"] .btn.border:hover {
  background: #2d3b52 !important;
}

/* Ô tìm kiếm + input/select */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input.form-control {
  background-color: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: #64748b !important;
}

/* Text tối hardcode (#1a1a1a/.text-dark) trong card/modal → sáng lại */
[data-bs-theme="dark"] .text-dark {
  color: #e2e8f0 !important;
}

/* ===== AG-Grid (ag-theme-balham) — bảng chính ===== */
[data-bs-theme="dark"] .ag-theme-balham {
  --ag-background-color: #232e3d;
  --ag-odd-row-background-color: #1f2937;
  --ag-foreground-color: #e2e8f0;
  --ag-data-color: #e2e8f0;
  --ag-secondary-foreground-color: #94a3b8;
  --ag-header-background-color: #334155;
  --ag-header-foreground-color: #e2e8f0;
  --ag-border-color: rgba(255, 255, 255, 0.08);
  --ag-row-border-color: rgba(148, 163, 184, 0.18);
  --ag-row-hover-color: rgba(var(--primary-rgb, 99, 102, 241), 0.15);
  --ag-selected-row-background-color: rgba(var(--primary-rgb, 99, 102, 241), 0.22);
  --ag-control-panel-background-color: #232e3d;
  --ag-input-background-color: #1b2433;
  --ag-input-border-color: rgba(255, 255, 255, 0.15);
  --ag-modal-overlay-background-color: rgba(15, 23, 42, 0.65);
  background-color: #232e3d;
}
/* Renderer cột Tài khoản (bm/ads/page) dùng class .text-black (Bootstrap #000 !important)
   → đè --ag-data-color làm tên + UID đen xì trong dark. Ép .text-black trong grid sáng. */
[data-bs-theme="dark"] .ag-theme-balham .text-black {
  color: #e2e8f0 !important;
}
/* Đường kẻ giữa các dòng → xám mảnh (1px, ép trực tiếp phòng balham không ăn var) */
[data-bs-theme="dark"] .ag-theme-balham .ag-row {
  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
  border-bottom-width: 1px !important;
}
/* .ag-header trong modern-theme dùng var(--bg-body) (=#1b2433 dark) → OK.
   Pinned bottom (TỔNG CỘNG) hardcode #ffffff ở style.css → ép tối. */
[data-bs-theme="dark"] .ag-floating-bottom,
[data-bs-theme="dark"] .ag-floating-bottom .ag-row,
[data-bs-theme="dark"] .ag-floating-bottom .ag-cell {
  background-color: #1b2433 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Grid phụ .bst-grid header hardcode #f8fafc/#cbd5e1 */
[data-bs-theme="dark"] .bst-grid .ag-header,
[data-bs-theme="dark"] .bst-grid .ag-header-cell {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Header CỘT grid chính — balham là theme SASS cũ, --ag-* không ăn → ép trực tiếp */
[data-bs-theme="dark"] .ag-theme-balham .ag-header,
[data-bs-theme="dark"] .ag-theme-balham .ag-header-viewport,
[data-bs-theme="dark"] .ag-theme-balham .ag-header-row,
[data-bs-theme="dark"] .ag-theme-balham .ag-header-cell,
[data-bs-theme="dark"] .ag-theme-balham .ag-header-group-cell,
[data-bs-theme="dark"] .ag-theme-balham .ag-pinned-left-header,
[data-bs-theme="dark"] .ag-theme-balham .ag-pinned-right-header {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ag-theme-balham .ag-header-cell-text,
[data-bs-theme="dark"] .ag-theme-balham .ag-header-icon,
[data-bs-theme="dark"] .ag-theme-balham .ag-header-cell-menu-button,
[data-bs-theme="dark"] .ag-theme-balham .ag-sort-indicator-icon {
  color: #cbd5e1 !important;
}

/* ===== SweetAlert2 ===== */
[data-bs-theme="dark"] .swal2-popup {
  background: #232e3d !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-label {
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select,
[data-bs-theme="dark"] .swal2-file {
  background: #1b2433 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   FEATURE INFO POPUP (ⓘ "Hướng dẫn sử dụng") — _featInfoTpl dùng class .fi-*
   thay vì inline màu cứng, để popup thích nghi giao diện tối (trước đây chữ
   tối #374151/#111827 đè lên nền popup tối #232e3d → không đọc được).
   ============================================ */
.fi-body { text-align: left; font-size: 14px; line-height: 1.7; color: #374151; }
.fi-intro { margin: 0 0 16px; }
.fi-sec { margin-bottom: 14px; }
.fi-h { font-weight: 700; margin-bottom: 8px; font-size: 14px; color: #111827; }
.fi-body ul, .fi-body ol { margin: 0; padding-left: 20px; font-size: 13.5px; }
.fi-body li { margin-bottom: 4px; }
.fi-box { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; border: 1.5px solid transparent; }
.fi-box-h { font-weight: 700; margin-bottom: 6px; font-size: 13.5px; }
.fi-when { background: #eff6ff; border-color: #dbeafe; color: #1e40af; }
.fi-warn { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.fi-danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.fi-tip { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.fi-faq { background: #f9fafb; border-left: 3px solid var(--primary-end, #8b5cf6); padding: 8px 12px; margin-bottom: 6px; border-radius: 0 6px 6px 0; }
.fi-faq-q { font-weight: 600; font-size: 13.5px; color: #374151; margin-bottom: 2px; }
.fi-faq-a { font-size: 13px; color: #6b7280; }

[data-bs-theme="dark"] .fi-body { color: #cbd5e1; }
[data-bs-theme="dark"] .fi-h { color: #f1f5f9; }
[data-bs-theme="dark"] .fi-when { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); color: #93c5fd; }
[data-bs-theme="dark"] .fi-warn { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; }
[data-bs-theme="dark"] .fi-danger { background: rgba(239, 68, 68, 0.13); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
[data-bs-theme="dark"] .fi-tip { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
[data-bs-theme="dark"] .fi-faq { background: rgba(255, 255, 255, 0.04); border-left-color: #a78bfa; }
[data-bs-theme="dark"] .fi-faq-q { color: #e2e8f0; }
[data-bs-theme="dark"] .fi-faq-a { color: #94a3b8; }

/* ============================================
   NAVIGATION PILLS (HEADER)
   ============================================ */
.nav-pills-container {
  transition: var(--transition-normal);
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.nav-pills-container .nav-pill {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;
}

.nav-pill {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition-normal);
  border-radius: var(--radius-sm) !important;
}

.nav-pill:hover:not(.active) {
  background: rgba(255, 255, 255, 0.15);
}

.nav-pill.active {
  color: var(--primary-start) !important;
  background: white !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================
   STAT CARDS (HOME PAGE)
   ============================================ */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 20px;
  border: 1px solid var(--border-light);
  transition: var(--transition-normal);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white !important;
}

.stat-icon.pink {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  color: white;
}

.stat-icon.purple {
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6) 0%, #a78bfa 100%);
  color: white;
}

.stat-icon.orange {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: white;
}

.stat-icon.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: white;
}

.stat-icon.green {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
}

.stat-icon.cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
  color: white;
}

.stat-icon.indigo {
  background: linear-gradient(135deg, var(--primary-start, #6366f1) 0%, #818cf8 100%);
  color: white;
}

.stat-icon.red {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  color: white;
}

/* ============================================
   DATA TABLE CARDS
   ============================================ */
.data-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

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

.data-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.data-card-body {
  padding: 0;
}

.data-list-item {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  transition: var(--transition-fast);
}

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

.data-list-item:hover {
  background: var(--bg-hover);
}

/* ============================================
   INFO ROWS (POPUP & DETAILS)
   ============================================ */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition-fast);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row:hover {
  background: var(--bg-hover);
}

.info-label {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-weight: 500;
}

.info-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 14px;
}

.info-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================
   QUICK ACTIONS
   ============================================ */
.quick-action {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  transition: var(--transition-normal);
}

.quick-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.quick-action img {
  margin-right: 12px;
}

/* ============================================
   FILTER DROPDOWN
   ============================================ */
.filter-item {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  transition: var(--transition-fast);
  cursor: pointer;
}

.filter-item:hover {
  border-color: var(--primary-start);
  background: var(--bg-hover);
}

.filter-item:last-child {
  margin-bottom: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  margin-right: 8px;
}

/* ============================================
   PANEL CARDS (SIDEBAR)
   ============================================ */
.panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

.panel-card-header {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-card-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--text-primary);
}

.panel-card-title i {
  margin-right: 10px;
  font-size: 18px;
  color: var(--primary-start);
}

.panel-card-body {
  padding: 16px;
  border-top: 1px solid var(--border-light);
}

/* ============================================
   STATUS BADGES
   ============================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge.success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.status-badge.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.status-badge.info {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  margin-bottom: 16px;
}

/* ============================================
   TOOLBAR STYLES
   ============================================ */
.border-bottom.bg-white {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* Search Input */
#search {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-body);
  transition: var(--transition-normal);
}

#search:focus {
  background: var(--bg-card);
  border-color: var(--primary-start);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
}

/* Luong/Delay Inputs */
input[name="limit"],
input[name="delay"] {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  font-weight: 600;
}

input[name="limit"]:focus,
input[name="delay"]:focus {
  border-color: var(--primary-start);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
}

/* ============================================
   STATUS BAR (FOOTER)
   ============================================ */
.status-bar,
body > div:last-child .badge,
#app ~ .fixed-bottom,
.position-fixed.bottom-0 {
  background: var(--primary-gradient);
}

/* ============================================
   FOOTER STATUS BAR - BOTTOM
   ============================================ */
#app > .position-fixed,
.position-fixed.bottom-0.start-0.end-0 {
  background: var(--primary-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)) !important;
  padding: 8px 16px !important;
  border-top: none !important;
}

/* Status counts in footer */
#app .position-fixed .badge,
.position-fixed.bottom-0 .badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Footer text colors */
.position-fixed.bottom-0 span,
#app .position-fixed span {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 0.8rem;
}

/* Status Footer Text */
[style*="background: linear-gradient"] .text-success,
.text-success {
  color: #10b981 !important;
}

[style*="background: linear-gradient"] .text-danger,
.text-danger {
  color: #ef4444 !important;
}

[style*="background: linear-gradient"] .text-warning,
.text-warning {
  color: #f59e0b !important;
}

[style*="background: linear-gradient"] .text-info,
.text-info {
  color: #06b6d4 !important;
}

/* ============================================
   AG-GRID TABLE ENHANCEMENTS
   ============================================ */
.ag-root-wrapper {
  border: none !important;
  border-radius: 0 !important;
}

.ag-header {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.ag-header-cell {
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  font-size: 0.8rem !important;
}

.ag-header-cell-label {
  padding: 0 !important;
}

.ag-cell {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
}

/* Status badge trong bảng AG-Grid */
.ag-cell .badge.rounded-pill {
  font-size: 0.7rem;
  padding: 3px 8px;
}

.ag-row {
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.12) !important;
}

.ag-row:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.04) !important;
}

.ag-row-selected {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08) !important;
}

.ag-row-selected:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12) !important;
}

/* ============================================
   FOOTER STATUS COUNTS
   ============================================ */
.badge.rounded-pill {
  font-weight: 600;
  font-size: 0.65rem;
  padding: 3px 8px;
}

/* Custom Primary Colors for Bootstrap */
.bg-primary {
  background: var(--primary-gradient) !important;
}

.text-primary {
  color: var(--primary-start) !important;
}

.border-primary {
  border-color: var(--primary-start) !important;
}

.btn-outline-primary {
  color: var(--primary-start);
  border-color: var(--primary-start);
}

.btn-outline-primary:hover {
  background: var(--primary-gradient);
  border-color: var(--primary-start);
  color: white;
}

/* ============================================
   TOOLBAR AREA
   ============================================ */
.border-bottom.bg-white .p-3 {
  background: var(--bg-card);
}

.border-end {
  border-color: var(--border-light) !important;
}

/* Input with label overlay */
.position-relative label.position-absolute {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================
   LOADING SPINNER - Moved to style.css
   ============================================ */
/*
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary-start);
  animation: spin 0.8s linear infinite;
}
*/

/* ============================================
   MISC IMPROVEMENTS
   ============================================ */

/* App Version Badge */
.appVersion {
  background: rgba(255, 255, 255, 0.2) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  backdrop-filter: blur(4px);
}

/* Title Bar */
.titleBar {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

/* Shadow utilities */
.shadow-sm {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 1px rgba(0, 0, 0, 0.03) !important;
}

.shadow {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 2px 4px -1px rgba(0, 0, 0, 0.04) !important;
}

/* Improve rounded corners */
.rounded {
  border-radius: var(--radius-md) !important;
}

.rounded-4 {
  border-radius: var(--radius-lg) !important;
}

/* Fix dropdown shadows */
.dropdown-menu {
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  border-radius: var(--radius-lg) !important;
  padding: 8px !important;
}

.dropdown-item {
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

.dropdown-item:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08) !important;
  color: var(--primary-start) !important;
}

/* Fix Modal styling */
.modal-content {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border-light) !important;
  padding: 20px 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--border-light) !important;
  padding: 10px 24px !important;
}

/* Better focus states */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-start) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12) !important;
}

/* Quality indicator in header */
#quality {
  display: flex;
  align-items: center;
}

/* Nút Đăng nhập trong #quality — premium pill 3D glass với shimmer hover.
   Gradient 3-stop tím lavender (#8B7FFF) + top highlight + inner shadow. */
.nh-quality-login-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 15px 6px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #a89bff 0%, #8b7fff 50%, #6a5ddb 100%);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.4;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(139, 127, 255, 0.48),
    0 1px 2px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.nh-quality-login-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.nh-quality-login-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(139, 127, 255, 0.58),
    0 2px 4px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  filter: brightness(1.08);
}
.nh-quality-login-btn:hover::before {
  transform: translateX(100%);
}
.nh-quality-login-btn:active {
  transform: translateY(0);
  box-shadow:
    0 3px 8px rgba(139, 127, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 4px rgba(0, 0, 0, 0.12);
}
.nh-quality-login-btn i {
  font-size: 14px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.nh-quality-login-btn > span {
  position: relative;
  z-index: 1;
}

/* OVERRIDE khi nút Đăng nhập render trong #userInfo (grid pages — toolbar
   header). Style match với toolbar buttons (Hướng dẫn/Cài đặt/Bảo mật):
   white bg + border subtle + icon tím accent + height/padding nhỏ gọn.
   Không pill gradient prominent (lạc lõng giữa toolbar gray outline). */
#userInfo .nh-quality-login-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  padding: 6px 14px 6px 6px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: none;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
#userInfo .nh-quality-login-btn::before {
  display: none;
}
#userInfo .nh-quality-login-btn:hover {
  background: #f8fafc;
  border-color: #c4b5fd;
  color: var(--primary-start, #6366f1);
  transform: translateY(-1px);
  filter: none;
  box-shadow:
    0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.16),
    0 1px 3px rgba(15, 23, 42, 0.06);
}
#userInfo .nh-quality-login-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
#userInfo .nh-quality-login-btn i {
  /* Chỉ màu icon, không nền — gradient text qua background-clip */
  width: auto;
  height: auto;
  background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 18px;
  box-shadow: none;
}

#quality .badge {
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

/* Live Ads - Không Sao Cả - Màu xanh nổi bật */
#quality .badge.text-bg-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

#quality .badge.text-bg-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
}

/* Trạng thái lỗi - Màu đỏ */
#quality .badge.text-bg-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* Trạng thái cảnh báo - Màu vàng */
#quality .badge.text-bg-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* ============================================
   HOME PAGE - MODERN DASHBOARD V2
   ============================================ */

/* Dashboard Hero Banner */
.dashboard-hero {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.dashboard-hero:hover {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.08);
}

.hero-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--primary-start, #6366f1), var(--primary-end, #8b5cf6), #a855f7, #ec4899);
}

.hero-content {
  padding: 20px 26px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
}

@media (max-width: 768px) {
  .hero-content {
    padding: 16px 18px;
    gap: 16px;
  }
}

.hero-user {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.hero-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb, 99, 102, 241), 0.3);
  overflow: hidden;
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.hero-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  background: #10b981;
  border: 2.5px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

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

.hero-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1b2433;
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

.hero-identifiers {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.hero-uid {
  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
  font-size: 0.78rem;
  color: var(--primary-end, #8b5cf6);
  font-weight: 600;
  background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.08);
  padding: 2px 8px;
  border-radius: 6px;
}

.hero-email {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.hero-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 0.75rem;
  color: #475569;
  background: #f1f5f9;
  border-radius: 20px;
  font-weight: 500;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.hero-chip:hover {
  background: #e2e8f0;
}

.hero-chip i {
  font-size: 0.8rem;
  color: var(--primary-end, #8b5cf6);
}

/* Hero Counters */
.hero-counters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: #f8fafc;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.hero-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 14px;
}

.hero-counter-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.hero-counter-bm {
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7);
  box-shadow: 0 4px 12px rgba(var(--primary-end-rgb, 139, 92, 246), 0.3);
}

.hero-counter-ads {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.hero-counter-page {
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.hero-counter-data {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hero-counter-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1b2433;
  letter-spacing: -0.5px;
  line-height: 1;
}

.hero-counter-label {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.hero-counter-divider {
  width: 1px;
  height: 36px;
  background: #e2e8f0;
  margin: 0 4px;
}

/* Dashboard Grid (legacy — keep for backward compat) */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}

.dashboard-col {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 20px;
}


/* Dashboard Cards */
.dashboard-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.4s ease;
  z-index: 1;
}

.dashboard-card-ads::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.dashboard-card-bm::before {
  background: linear-gradient(90deg, var(--primary-end, #8b5cf6), #a855f7);
}
.dashboard-card-page::before {
  background: linear-gradient(90deg, #06b6d4, #0ea5e9);
}
.dashboard-card-detail::before {
  background: linear-gradient(90deg, var(--primary-start, #6366f1), var(--primary-end, #8b5cf6));
}
.dashboard-card-chart::before {
  background: linear-gradient(90deg, #06b6d4, #0891b2);
}
.dashboard-card-history::before {
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

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

/* Card Header */
.dcard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.dcard-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dcard-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.dcard-icon-ads {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.dcard-icon-bm {
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7);
}
.dcard-icon-page {
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
}
.dcard-icon-detail {
  background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
}
.dcard-icon-chart {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.dcard-icon-history {
  background: linear-gradient(135deg, #64748b, #94a3b8);
}

.dcard-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1b2433;
  margin: 0;
}

.dcard-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-start, #6366f1);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.06);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.dcard-link:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
  color: #4f46e5;
}

/* Card Body */
.dcard-body {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.dcard-body:has(.empty-state) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.empty-icon i {
  font-size: 1.6rem;
  color: #94a3b8;
}

.empty-state p {
  color: #94a3b8;
  font-size: 0.85rem;
  margin-bottom: 0;
  font-weight: 500;
}

/* Ad Details List */
.ad-details-list {
  padding: 0 16px 16px;
}

.ad-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.15s ease;
}

.ad-detail-item:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.02);
}

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

.detail-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 500;
}

.detail-label i {
  color: var(--primary-end, #8b5cf6);
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
}

.detail-value {
  font-weight: 600;
  color: #1b2433;
  font-size: 0.85rem;
}

/* Versions List */
.versions-list {
  overflow-y: auto;
  padding: 0 16px 16px !important;
  min-height: 0;
  max-height: 420px;
}

.versions-list::-webkit-scrollbar {
  width: 4px;
}

.versions-list::-webkit-scrollbar-track {
  background: transparent;
}

.versions-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.versions-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Version Timeline */
.version-timeline {
  position: relative;
  padding-left: 20px;
}

.version-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e2e8f0;
  border-radius: 1px;
}

.vt-item {
  position: relative;
  padding-bottom: 16px;
}

.vt-item:last-child {
  padding-bottom: 0;
}

.vt-dot {
  position: absolute;
  left: -20px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #e2e8f0;
  z-index: 1;
}

.vt-latest .vt-dot {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.vt-content {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.vt-latest .vt-content {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.12);
}

.vt-item:hover .vt-content {
  background: #f1f5f9;
}

.vt-latest:hover .vt-content {
  background: rgba(16, 185, 129, 0.06);
}

.vt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.vt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 6px;
  background: #e2e8f0;
  color: #475569;
  letter-spacing: 0.3px;
}

.vt-badge-new {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.vt-date {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}

.vt-body {
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.5;
  font-weight: 450;
}

/* Responsive */
@media (max-width: 1400px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .dashboard-col {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .hero-content {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-counters {
    width: 100%;
    justify-content: center;
  }
}

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

  .hero-user {
    flex-direction: column;
    text-align: center;
  }

  .hero-identifiers {
    justify-content: center;
  }

  .hero-chips {
    justify-content: center;
  }

  .hero-counters {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-counter {
    justify-content: center;
  }

  .hero-counter-divider {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }
}

/* ============================================
   BM CHART STYLES
   ============================================ */

.bm-chart-container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 0;
}

.bm-chart-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

.bm-chart-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}

.bm-chart-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.bm-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.bm-legend-item:hover {
  background: #f1f5f9;
  transform: translateX(4px);
}

.bm-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bm-legend-dot.live {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.bm-legend-dot.die-xmdt {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.bm-legend-dot.die-vv {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.bm-legend-dot.other {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.4);
}

.bm-legend-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bm-legend-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.bm-legend-value {
  font-size: 18px;
  font-weight: 700;
  color: #232e3d;
}

@media (max-width: 576px) {
  .bm-chart-container {
    flex-direction: column;
    align-items: center;
  }

  .bm-chart-legend {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .bm-legend-item {
    padding: 8px 12px;
  }
}

/* ============================================
   ZOOM CONTROL — stepper [−] 100% [+]
   ============================================ */
.zoom-control {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  height: 30px;
  overflow: hidden;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.zoom-control:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.zoom-control.zoom-active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}

.zoom-btn {
  background: transparent;
  border: 0;
  color: #fff;
  width: 26px;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s ease, transform 0.1s ease;
  font-family: inherit;
  line-height: 1;
}

.zoom-btn:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.18);
}

.zoom-btn:not(:disabled):active {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(0.92);
}

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

.zoom-display {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  min-width: 40px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s ease;
}

.zoom-display:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   FULLSCREEN TOGGLE BUTTON (header)
   ============================================ */
.fullscreen-toggle {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition:
    background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.12s ease,
    box-shadow 0.2s ease;
  font-family: inherit;
}

.fullscreen-toggle:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.fullscreen-toggle:active {
  transform: scale(0.94);
}

.fullscreen-toggle i {
  display: inline-block;
  line-height: 1;
}

/* ============================================
   GOOGLE TRANSLATE — ẨN UI MẶC ĐỊNH
   ============================================ */
.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-te-gadget,
.goog-te-gadget-icon,
.goog-te-gadget-simple,
.goog-te-menu-value,
.goog-te-spinner-pos,
.goog-logo-link,
.goog-te-ftab,
#goog-gt-tt,
#google_translate_element,
iframe.skiptranslate,
iframe[id^="goog-gt-"],
iframe[name="goog-tooltip"],
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body {
  top: 0 !important;
  position: static !important;
}

html {
  margin-top: 0 !important;
}

.goog-text-highlight {
  background: transparent !important;
  box-shadow: none !important;
}

font[style*="background-color"] {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   DARK MODE — popup nhúng JS (workflow sweep: bm.js / scripts.js /
   via.js / ads-security.js / page.js). Phủ ba-/zlink-/bms-/lp-/sp-/
   ext-install-/fxa-/ad-/bm-/id-/sa-/cp-/qd-/mt-otp-. Đặt CUỐI để thắng.
   GIỮ nền trắng: .dep-qr-wrap .qd-usdt-qr .avatar-letter .fiox-color-badge.
   ============================================================ */

/* #4 — SweetAlert close/cancel popup inject !important (html prefix nâng specificity) */
html[data-bs-theme="dark"] .swal2-popup.ba-popup .swal2-close,
html[data-bs-theme="dark"] .swal2-popup.bms-popup .swal2-close,
html[data-bs-theme="dark"] .swal2-popup.zlink-popup .swal2-close,
html[data-bs-theme="dark"] .swal2-popup.id-popup .swal2-close,
html[data-bs-theme="dark"] .sp-modal .swal2-close,
html[data-bs-theme="dark"] .sa-modal .swal2-close {
  background: #334155 !important;
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .swal2-popup.ba-popup .swal2-close:hover,
html[data-bs-theme="dark"] .swal2-popup.bms-popup .swal2-close:hover,
html[data-bs-theme="dark"] .swal2-popup.zlink-popup .swal2-close:hover,
html[data-bs-theme="dark"] .swal2-popup.id-popup .swal2-close:hover,
html[data-bs-theme="dark"] .sp-modal .swal2-close:hover,
html[data-bs-theme="dark"] .sa-modal .swal2-close:hover {
  background: #475569 !important;
  color: #e2e8f0 !important;
}
/* Nút X custom vòng tròn trắng nổi (top:-14px, background:#fff inline) trong Bootstrap modal
   — customizeModal "Tùy chỉnh cột", settingModal "Cài đặt"... (con trực tiếp của .modal-content) */
[data-bs-theme="dark"] .modal-content > button[aria-label="Close"] {
  background: #334155 !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .modal-content > button[aria-label="Close"]:hover {
  background: #475569 !important;
  color: #e2e8f0 !important;
}

/* Nút "Chỉ định tài sản" ngang search trong viewer Quản trị viên BM */
.ba-assign-all-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 9px 14px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1)); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.3); transition: filter 0.15s; white-space: nowrap; }
.ba-assign-all-btn:hover { filter: brightness(1.07); }
.ba-assign-all-btn i { font-size: 16px; }
/* Checkbox tích chọn QTV trên card để Chỉ định tài sản hàng loạt */
.ba-pick { flex-shrink: 0; width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary-end, #8b5cf6); margin: 0 2px 0 0; }
.ba-card { cursor: pointer; }
.ba-card-picked { border-color: var(--primary-end, #8b5cf6) !important; background: #f5f3ff !important; }

/* ===== Modal Chỉ định tài sản cho QTV (aam-*) ===== */
.aam-overlay {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.aam-modal {
  width: 100%; max-width: 1130px; max-height: 86vh;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.aam-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef0f3; }
.aam-h-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1)); color: #fff; font-size: 19px; }
.aam-h-text { flex: 1; min-width: 0; }
.aam-title { font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.aam-sub { font-size: 12.5px; color: #94a3b8; margin-top: 2px; }
.aam-close { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.aam-close:hover { background: #e2e8f0; color: #0f172a; }
.aam-body { display: flex; flex: 1; min-height: 0; }
.aam-col { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px; }
.aam-col-types { width: 240px; flex-shrink: 0; border-right: 1px solid #eef0f3; overflow-y: auto; }
.aam-modal.aam-has-user { max-width: 1340px; }
.aam-pp-modal { max-width: 480px; }
.aam-pp-body { padding: 16px 20px; max-height: 62vh; overflow-y: auto; }
.aam-pp-body .aam-perm-opts { flex: none; min-height: 0; overflow: visible; }
.aam-col-users { width: 220px; flex-shrink: 0; border-right: 1px solid #eef0f3; overflow-y: auto; }
.aam-user-list { display: flex; flex-direction: column; gap: 4px; }
.aam-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
.aam-user:hover { background: #f8fafc; }
.aam-user.is-active { background: rgba(var(--primary-rgb, 99, 102, 241), 0.1); border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.25); }
.aam-user-av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1)); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.aam-user-info { display: flex; flex-direction: column; min-width: 0; }
.aam-user-name { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aam-user-sub { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aam-user input[type="checkbox"] { flex-shrink: 0; cursor: pointer; accent-color: var(--primary-start, #6366f1); width: 15px; height: 15px; margin: 0; }
.aam-user-selall { display: flex; align-items: center; gap: 7px; padding: 4px 10px 8px; font-size: 12.5px; font-weight: 600; color: #64748b; cursor: pointer; }
.aam-user-selall input { accent-color: var(--primary-start, #6366f1); cursor: pointer; margin: 0; }
[data-bs-theme="dark"] .aam-user-selall { color: #94a3b8; }
[data-bs-theme="dark"] .aam-col-users { border-right-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-user { color: #cbd5e1; }
[data-bs-theme="dark"] .aam-user:hover { background: #2e3a4b; }
[data-bs-theme="dark"] .aam-user.is-active { background: rgba(var(--primary-rgb, 99, 102, 241), 0.18); border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4); }
[data-bs-theme="dark"] .aam-user-name { color: #e2e8f0; }
.aam-col-assets { flex: 1; min-width: 0; }
.aam-col-perm { width: 300px; flex-shrink: 0; border-left: 1px solid #eef0f3; display: flex; flex-direction: column; overflow: hidden; }
.aam-perm-opts { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.aam-perm-opts > * { flex-shrink: 0; }
.aam-perm-hr { flex-shrink: 0; height: 1px; background: #e5e7eb; margin: 3px 0; }
[data-bs-theme="dark"] .aam-perm-hr { background: rgba(255, 255, 255, 0.1); }
.aam-btn-remove { flex-shrink: 0; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px solid #fecaca; border-radius: 10px; background: #fff5f5; color: #dc2626; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.aam-btn-remove i { font-size: 16px; }
.aam-btn-remove:hover { background: #fee2e2; }
.aam-btn-remove.is-confirm { background: #dc2626; color: #fff; border-color: #dc2626; }
.aam-btn-remove:disabled { opacity: 0.6; cursor: default; }
[data-bs-theme="dark"] .aam-btn-remove { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
[data-bs-theme="dark"] .aam-btn-remove:hover { background: rgba(239, 68, 68, 0.18); }
[data-bs-theme="dark"] .aam-btn-remove.is-confirm { background: #dc2626; color: #fff; border-color: #dc2626; }
.aam-perm-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1.5px solid #e5e7eb; border-radius: 11px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.aam-perm-opt:hover { border-color: #c4b5fd; }
.aam-perm-opt.is-sel { border-color: var(--primary-end, #8b5cf6); background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.06); }
.aam-perm-opt input { flex-shrink: 0; cursor: pointer; accent-color: var(--primary-end, #8b5cf6); width: 16px; height: 16px; margin: 1px 0 0; }
.aam-perm-opt-body { display: flex; flex-direction: column; gap: 3px; }
.aam-perm-opt-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #1e293b; }
.aam-perm-opt-desc { font-size: 12px; line-height: 1.5; color: #64748b; }
.aam-perm-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #94a3b8; margin: 8px 2px 2px; }
.aam-perm-group:first-child { margin-top: 0; }
.aam-bag-block { border: 1px solid #eef0f3; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.aam-bag-sec { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; background: #f8fafc; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--primary-start, #6366f1); text-align: left; }
.aam-bag-sec > span { display: flex; align-items: center; }
.aam-bag-sec > i { font-size: 18px; color: #94a3b8; transition: transform 0.2s ease; }
.aam-bag-block.is-open .aam-bag-sec > i { transform: rotate(180deg); }
.aam-bag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-end, #8b5cf6); margin-left: 7px; }
.aam-bag-body { display: none; padding: 8px; flex-direction: column; gap: 8px; }
.aam-bag-block.is-open .aam-bag-body { display: flex; }
[data-bs-theme="dark"] .aam-bag-block { border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-bag-sec { background: #1b2433; color: #a5b4fc; }
.aam-perm-opt.is-disabled { opacity: 0.55; cursor: not-allowed; background: #f8fafc; }
.aam-perm-opt.is-disabled input { cursor: not-allowed; }
.aam-perm-pending { padding: 14px; border-radius: 11px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.2); font-size: 12.5px; line-height: 1.5; color: #b45309; display: flex; gap: 7px; }
.aam-perm-pending i { flex-shrink: 0; margin-top: 1px; font-size: 15px; }
.aam-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #94a3b8; margin-bottom: 10px; }
.aam-type-list { display: flex; flex-direction: column; gap: 4px; }
.aam-type { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; font-size: 13.5px; color: #1e293b; transition: background 0.15s, border-color 0.15s; }
.aam-type:hover { background: #f8fafc; }
.aam-type.is-active { background: rgba(var(--primary-rgb, 99, 102, 241), 0.1); border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.25); color: #4338ca; font-weight: 600; }
.aam-type-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; font-size: 16px; }
.aam-type-name { flex: 1; }
.aam-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.aam-col-head .aam-col-label { margin-bottom: 0; }
.aam-load-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #4338ca; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.aam-load-btn:hover { background: #f5f3ff; border-color: #c4b5fd; }
.aam-search-wrap { position: relative; margin-bottom: 8px; }
.aam-search-wrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 16px; }
.aam-search { width: 100%; box-sizing: border-box; padding: 9px 12px 9px 36px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13.5px; color: #1e293b; outline: none; transition: border-color 0.15s; }
.aam-search:focus { border-color: var(--primary-end, #8b5cf6); }
.aam-selall { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #64748b; cursor: pointer; margin-bottom: 8px; user-select: none; }
.aam-grid { flex: 1; min-height: 240px; width: 100%; border: 1px solid #eef0f3; border-radius: 10px; overflow: hidden; }
.aam-grid .aam-grid-mono { font-family: monospace; font-size: 12px; }
.aam-grid .ag-cell { display: flex; align-items: center; }
.aam-grid .ag-header-cell-menu-button, .aam-grid .ag-header-icon.ag-header-cell-menu-button, .aam-grid .col-filter-btn { display: none !important; }
.aam-cell-acc { line-height: 1.25; }
.aam-cell-name { font-weight: 600; font-size: 13px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aam-cell-id { font-size: 11px; color: #94a3b8; font-family: monospace; }
.aam-asset-list { flex: 1; overflow-y: auto; min-height: 220px; border: 1px solid #eef0f3; border-radius: 10px; padding: 4px; }
.aam-asset { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.12s; }
.aam-asset:hover { background: #f8fafc; }
.aam-asset.is-sel { background: rgba(var(--primary-rgb, 99, 102, 241), 0.08); }
.aam-asset input { flex-shrink: 0; cursor: pointer; }
.aam-asset-name { flex: 1; min-width: 0; font-size: 13px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aam-asset-id { flex-shrink: 0; font-size: 11.5px; color: #94a3b8; font-family: monospace; }
.aam-asset-live, .aam-asset-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; line-height: 1; }
.aam-asset-live i { font-size: 8px; }
.aam-asset-kind i { font-size: 11px; }
.aam-asset-live.aam-live-on { color: #15803d; }
.aam-asset-live.aam-live-off { color: #dc2626; }
.aam-asset-kind.aam-kind-own { color: #15803d; }
.aam-asset-kind.aam-kind-share { color: #b45309; }
.aam-empty { padding: 36px 12px; text-align: center; font-size: 13px; color: #94a3b8; }
.aam-spin { display: inline-block; animation: aamspin 0.8s linear infinite; }
@keyframes aamspin { to { transform: rotate(360deg); } }
.aam-grid .ag-overlay-loading-wrapper { background: rgba(255, 255, 255, 0.72); }
.aam-grid-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aam-grid-spinner { width: 32px; height: 32px; border: 3px solid rgba(var(--primary-rgb, 99, 102, 241), 0.18); border-top-color: var(--primary-start, #6366f1); border-radius: 50%; animation: aamspin 0.7s linear infinite; }
.aam-grid-loading-txt { font-size: 13px; font-weight: 600; color: var(--primary-start, #6366f1); }
[data-bs-theme="dark"] .aam-grid .ag-overlay-loading-wrapper { background: rgba(27, 36, 51, 0.72); }
[data-bs-theme="dark"] .aam-grid-spinner { border-color: rgba(129, 140, 248, 0.22); border-top-color: #818cf8; }
[data-bs-theme="dark"] .aam-grid-loading-txt { color: #a5b4fc; }
.aam-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid #eef0f3; }
.aam-foot-info { font-size: 12.5px; color: #64748b; }
.aam-foot-info b { color: #0f172a; }
.aam-foot-btns { display: flex; gap: 10px; }
.aam-btn { border: none; border-radius: 10px; padding: 9px 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter 0.15s, background 0.15s; }
.aam-btn-cancel { background: #f1f5f9; color: #64748b; }
.aam-btn-cancel:hover { background: #e2e8f0; }
.aam-btn-assign { background: linear-gradient(135deg, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1)); color: #fff; box-shadow: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.35); }
.aam-btn-assign:hover { filter: brightness(1.07); }
.aam-btn-assign:disabled { opacity: 0.6; cursor: not-allowed; }
.aam-status { padding: 11px 20px; font-size: 13px; line-height: 1.45; display: flex; align-items: center; gap: 8px; border-top: 1px solid #eef0f3; }
.aam-status[hidden] { display: none; }
.aam-status i { flex-shrink: 0; font-size: 16px; }
.aam-status.is-loading { color: #4338ca; background: rgba(var(--primary-rgb, 99, 102, 241), 0.06); }
.aam-status.is-done { color: #15803d; background: rgba(34, 197, 94, 0.08); }
.aam-status.is-warn { color: #b45309; background: rgba(245, 158, 11, 0.1); }
.aam-status.is-error { color: #b91c1c; background: rgba(220, 38, 38, 0.08); }
/* ── Dark ── */
[data-bs-theme="dark"] .aam-modal { background: #232e3d; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6); }
[data-bs-theme="dark"] .aam-header,
[data-bs-theme="dark"] .aam-footer { border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-col-types { border-right-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-col-perm { border-left-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-perm-opt { border-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme="dark"] .aam-perm-opt:hover { border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.5); }
[data-bs-theme="dark"] .aam-perm-opt.is-sel { border-color: var(--primary-end, #8b5cf6); background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16); }
[data-bs-theme="dark"] .aam-perm-opt-name { color: #e2e8f0; }
[data-bs-theme="dark"] .aam-perm-opt-desc { color: #94a3b8; }
[data-bs-theme="dark"] .aam-perm-opt.is-disabled { background: #1b2433; }
[data-bs-theme="dark"] .aam-perm-pending { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; }
[data-bs-theme="dark"] .aam-title,
[data-bs-theme="dark"] .aam-foot-info b,
[data-bs-theme="dark"] .aam-asset-name { color: #e2e8f0; }
[data-bs-theme="dark"] .aam-type { color: #cbd5e1; }
[data-bs-theme="dark"] .aam-type:hover { background: #2e3a4b; }
[data-bs-theme="dark"] .aam-type.is-active { background: rgba(var(--primary-rgb, 99, 102, 241), 0.18); border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4); color: #c4b5fd; }
[data-bs-theme="dark"] .aam-type-ic { background: #2e3a4b; }
[data-bs-theme="dark"] .aam-close { background: #2e3a4b; color: #cbd5e1; }
[data-bs-theme="dark"] .aam-close:hover { background: #475569; color: #fff; }
[data-bs-theme="dark"] .aam-load-btn { background: #2e3a4b; border-color: rgba(255, 255, 255, 0.1); color: #c4b5fd; }
[data-bs-theme="dark"] .aam-load-btn:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.18); border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4); }
[data-bs-theme="dark"] .aam-search { background: #1b2433; border-color: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
[data-bs-theme="dark"] .aam-search:focus { border-color: var(--primary-end, #8b5cf6); }
[data-bs-theme="dark"] .aam-grid { border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-cell-name { color: #e2e8f0; }
[data-bs-theme="dark"] .aam-asset-list { border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-asset:hover { background: #2e3a4b; }
[data-bs-theme="dark"] .aam-asset.is-sel { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16); }
[data-bs-theme="dark"] .aam-asset-kind.aam-kind-own { color: #6ee7b7; }
[data-bs-theme="dark"] .aam-asset-kind.aam-kind-share { color: #fcd34d; }
[data-bs-theme="dark"] .aam-asset-live.aam-live-on { color: #6ee7b7; }
[data-bs-theme="dark"] .aam-asset-live.aam-live-off { color: #fca5a5; }
[data-bs-theme="dark"] .aam-btn-cancel { background: #2e3a4b; color: #cbd5e1; }
[data-bs-theme="dark"] .aam-btn-cancel:hover { background: #475569; }
[data-bs-theme="dark"] .aam-status { border-top-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .aam-status.is-loading { color: #a5b4fc; background: rgba(var(--primary-rgb, 99, 102, 241), 0.14); }
[data-bs-theme="dark"] .aam-status.is-done { color: #6ee7b7; background: rgba(16, 185, 129, 0.14); }
[data-bs-theme="dark"] .aam-status.is-warn { color: #fcd34d; background: rgba(245, 158, 11, 0.14); }
[data-bs-theme="dark"] .aam-status.is-error { color: #fca5a5; background: rgba(220, 38, 38, 0.16); }
html[data-bs-theme="dark"] .swal2-popup.bms-popup .swal2-cancel.swal2-styled,
html[data-bs-theme="dark"] .swal2-popup.ba-popup .swal2-cancel.swal2-styled {
  background: #2e3a4b !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ba-* — Quản trị viên BM / TKQC */
[data-bs-theme="dark"] .ba-id-info-row,
[data-bs-theme="dark"] .ba-id-sep,
[data-bs-theme="dark"] .ba-id-chip,
[data-bs-theme="dark"] .ba-email,
[data-bs-theme="dark"] .ba-email i,
[data-bs-theme="dark"] .ba-email-empty,
[data-bs-theme="dark"] .ba-email-empty i,
[data-bs-theme="dark"] .ba-id-mono,
[data-bs-theme="dark"] .ba-time,
[data-bs-theme="dark"] .ba-tab,
[data-bs-theme="dark"] .ba-actions,
[data-bs-theme="dark"] .ba-empty,
[data-bs-theme="dark"] .ba-td-idx,
[data-bs-theme="dark"] .ba-search > i { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ba-bmname,
[data-bs-theme="dark"] .ba-name,
[data-bs-theme="dark"] .ba-menu-item,
[data-bs-theme="dark"] .ba-cur-opt,
[data-bs-theme="dark"] .ba-td,
[data-bs-theme="dark"] .ba-td-limit,
[data-bs-theme="dark"] .ba-acc-name { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ba-id-chip:hover,
[data-bs-theme="dark"] .ba-id-mono:hover,
[data-bs-theme="dark"] .ba-actions:hover,
[data-bs-theme="dark"] .ba-actions.active,
[data-bs-theme="dark"] .ba-menu-item:hover,
[data-bs-theme="dark"] .ba-cur-opt:hover,
[data-bs-theme="dark"] .ba-cell-sel .ba-acc-name,
[data-bs-theme="dark"] .ba-cell-sel .ba-id-mono { color: #c4b5fd !important; background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .ba-id-chip.copied,
[data-bs-theme="dark"] .ba-id-mono.copied { color: #6ee7b7 !important; background: rgba(16, 185, 129, 0.15) !important; }
[data-bs-theme="dark"] .ba-tabs,
[data-bs-theme="dark"] .ba-tabs-row { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-tab-count { background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .ba-search input { border-color: rgba(255, 255, 255, 0.1) !important; background: #1b2433 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ba-search input::placeholder { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ba-search input:focus { border-color: var(--primary-end, #8b5cf6) !important; }
[data-bs-theme="dark"] .ba-loading-mini { background: #2a2410 !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.3) !important; }
[data-bs-theme="dark"] .ba-list::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .ba-cur-panel::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .ba-table-wrap::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-card,
[data-bs-theme="dark"] .ba-menu,
[data-bs-theme="dark"] .ba-cur-panel,
[data-bs-theme="dark"] .ba-table-wrap { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-card:hover { border-color: rgba(255, 255, 255, 0.18) !important; background: #2e3a4b !important; }
[data-bs-theme="dark"] .ba-card-viewer { border-color: var(--primary-end, #8b5cf6) !important; background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .ba-platform-fb { color: #93c5fd !important; background: rgba(59, 130, 246, 0.15) !important; }
[data-bs-theme="dark"] .ba-platform-ig { color: #f9a8d4 !important; background: rgba(236, 72, 153, 0.16) !important; }
[data-bs-theme="dark"] .ba-role-chip { background: #2e3a4b !important; color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-role-chip-full { background: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .ba-role-chip-limited { background: #2a2410 !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.3) !important; }
[data-bs-theme="dark"] .ba-menu-item-danger { color: #f87171 !important; }
[data-bs-theme="dark"] .ba-menu-item-danger:hover { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .ba-menu-sep,
[data-bs-theme="dark"] .ba-cur-opt-divider { background: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-cur-btn { color: #e2e8f0 !important; background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-cur-btn:hover { border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.5) !important; background: #2e3a4b !important; }
[data-bs-theme="dark"] .ba-cur-btn.open { border-color: var(--primary-end, #8b5cf6) !important; background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ba-cur-btn i,
[data-bs-theme="dark"] .ba-cur-opt .ba-cur-opt-name { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ba-copy-btn { color: #c4b5fd !important; background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.3) !important; }
[data-bs-theme="dark"] .ba-copy-btn:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.24) !important; border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.5) !important; }
[data-bs-theme="dark"] .ba-copy-btn.copied { color: #6ee7b7 !important; background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .ba-table thead th { background: linear-gradient(180deg, #2a2438, #241f33) !important; color: #c4b5fd !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-row:hover { background: #2e3a4b !important; }
[data-bs-theme="dark"] .ba-row + .ba-row .ba-td { border-top-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ba-status-chip-live { background: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .ba-status-chip-die { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(220, 38, 38, 0.35) !important; }

/* lp-* — Load Pixel (page.js) */
[data-bs-theme="dark"] .lp-card:not(.active) { background: #232e3d !important; }
[data-bs-theme="dark"] .lp-card:not(.active):hover { background: #2e3a4b !important; }
[data-bs-theme="dark"] .lp-card::before { border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .lp-card:not(.active):hover::before { border-color: var(--primary-start, #6366f1) !important; }
[data-bs-theme="dark"] .lp-card:not(.active) .lp-icon-wrap { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; }
[data-bs-theme="dark"] .lp-card .fw-semibold { color: #e2e8f0 !important; }
[data-bs-theme="dark"] #lpBmIdInput { background: #1b2433 !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] #lpBmInput textarea:focus { border-color: var(--primary-start, #6366f1) !important; }

/* zlink-* — Liên kết Zalo */
[data-bs-theme="dark"] .zlink-header { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .zlink-header-title,
[data-bs-theme="dark"] .zlink-step-content,
[data-bs-theme="dark"] .zlink-step-content b { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .zlink-header-sub { color: #94a3b8 !important; }
[data-bs-theme="dark"] .zlink-account-card { background: rgba(59, 130, 246, 0.15) !important; border-color: rgba(59, 130, 246, 0.3) !important; }
[data-bs-theme="dark"] .zlink-account-name { color: #93c5fd !important; }
[data-bs-theme="dark"] .zlink-account-phone { color: #60a5fa !important; }
[data-bs-theme="dark"] .zlink-phone-copy { color: #93c5fd !important; background: #232e3d !important; border-color: rgba(59, 130, 246, 0.3) !important; }
[data-bs-theme="dark"] .zlink-phone-copy:hover { background: rgba(59, 130, 246, 0.2) !important; border-color: rgba(59, 130, 246, 0.5) !important; }
[data-bs-theme="dark"] .zlink-phone-copy.copied,
[data-bs-theme="dark"] .zlink-code-copy.copied,
[data-bs-theme="dark"] .zlink-status.linked { background: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .zlink-code-box { background: #2a2410 !important; border-color: #f59e0b !important; }
[data-bs-theme="dark"] .zlink-code-label { color: #fcd34d !important; }
[data-bs-theme="dark"] .zlink-code-value { color: #fde68a !important; }
[data-bs-theme="dark"] .zlink-code-copy { color: #fde68a !important; background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(253, 230, 138, 0.25) !important; }
[data-bs-theme="dark"] .zlink-code-copy:hover { background: rgba(255, 255, 255, 0.14) !important; }
[data-bs-theme="dark"] .zlink-status { background: #2a2410 !important; color: #fcd34d !important; }

/* bms-* — Bảo mật */
[data-bs-theme="dark"] .bms-header { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .bms-header-title,
[data-bs-theme="dark"] .bms-toggle-title,
[data-bs-theme="dark"] .bms-name,
[data-bs-theme="dark"] .bms-stat-value,
[data-bs-theme="dark"] .bms-int-input-group input { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .bms-header-sub,
[data-bs-theme="dark"] .bms-toggle-interval,
[data-bs-theme="dark"] .bms-int-section-label,
[data-bs-theme="dark"] .bms-int-unit,
[data-bs-theme="dark"] .bms-stat-label,
[data-bs-theme="dark"] .bms-list-title,
[data-bs-theme="dark"] .bms-meta,
[data-bs-theme="dark"] .bms-footer,
[data-bs-theme="dark"] .bms-empty,
[data-bs-theme="dark"] .bms-search i { color: #94a3b8 !important; }
[data-bs-theme="dark"] .bms-header-status.active { background: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .bms-header-status.inactive { background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .bms-toggle-card,
[data-bs-theme="dark"] .bms-stat-card,
[data-bs-theme="dark"] .bms-item,
[data-bs-theme="dark"] .bms-interval-drop { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .bms-toggle-card.enabled,
[data-bs-theme="dark"] .bms-item-checked { border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.5) !important; background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .bms-toggle-icon,
[data-bs-theme="dark"] .bms-stat-selected .bms-stat-icon,
[data-bs-theme="dark"] .bms-avatar { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .bms-avatar { border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.3) !important; }
[data-bs-theme="dark"] .bms-switch .bms-slider { background: #475569 !important; }
[data-bs-theme="dark"] .bms-switch .bms-slider::before { background: #e2e8f0 !important; }
[data-bs-theme="dark"] .bms-interval-btn { border-color: rgba(255, 255, 255, 0.1) !important; background: #2e3a4b !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .bms-interval-btn:hover { border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.5) !important; }
[data-bs-theme="dark"] .bms-int-preset { border-color: rgba(255, 255, 255, 0.1) !important; background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .bms-int-preset:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.5) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .bms-int-divider,
[data-bs-theme="dark"] .bms-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .bms-int-input-group { border-color: rgba(255, 255, 255, 0.1) !important; background: #1b2433 !important; }
[data-bs-theme="dark"] .bms-int-step { background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .bms-int-step:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.24) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .bms-int-hint { background: #2a2410 !important; border-color: rgba(245, 158, 11, 0.3) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .bms-int-hint b { color: #fde68a !important; }
[data-bs-theme="dark"] .bms-stat-selected.full .bms-stat-icon { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .bms-stat-countdown .bms-stat-icon { background: rgba(16, 185, 129, 0.15) !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .bms-stat-countdown.idle .bms-stat-icon { background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .bms-stat-countdown.overdue .bms-stat-icon { background: #2a2410 !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .bms-stat-selected.full .bms-stat-value { color: #fca5a5 !important; }
[data-bs-theme="dark"] .bms-list-btn:hover,
[data-bs-theme="dark"] .bms-item:hover { background: #2e3a4b !important; }
[data-bs-theme="dark"] .bms-item:hover { border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.5) !important; }
[data-bs-theme="dark"] .bms-search input { border-color: rgba(255, 255, 255, 0.1) !important; background: #1b2433 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .bms-search input::placeholder { color: #94a3b8 !important; }
[data-bs-theme="dark"] .bms-check-mark { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; }

/* sp-* — Hỗ trợ */
[data-bs-theme="dark"] .sp-card:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .sp-card-icon.sp-zalo { background: rgba(16, 185, 129, 0.15) !important; }
[data-bs-theme="dark"] .sp-card-icon.sp-bill { background: #2a2410 !important; }
[data-bs-theme="dark"] .sp-card-icon.sp-dev { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .sp-card-name { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .sp-card-desc,
[data-bs-theme="dark"] .sp-card-arrow { color: #94a3b8 !important; }

/* ext-install-* */
[data-bs-theme="dark"] .ext-install-popup {
  background-image: linear-gradient(#232e3d, #232e3d), linear-gradient(90deg, var(--primary-start, #6366f1), var(--primary-end, #8b5cf6), #ec4899) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
[data-bs-theme="dark"] .ext-install-close { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ext-install-close:hover { background: #2e3a4b !important; color: #e2e8f0 !important; }

/* fxa-* — Xác nhận chạy luồng & Popup thứ tự chạy tính năng */
[data-bs-theme="dark"] .swal2-popup.fxa-confirm-popup {
  background: #232e3d !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important;
}
[data-bs-theme="dark"] .fxa-hd {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .fxa-hd-ic {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .fxa-hd-ti {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .fxa-hd-sub {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .fxa-count-badge {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #c4b5fd !important;
}
[data-bs-theme="dark"] .fxa-toolbar-hint {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .fxa-btn-clear-all {
  color: #f87171 !important;
}
[data-bs-theme="dark"] .fxa-btn-clear-all:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}
[data-bs-theme="dark"] .fxa-flow {
  scrollbar-color: #334155 transparent !important;
}
[data-bs-theme="dark"] .fxa-flow::-webkit-scrollbar-thumb {
  background: #334155 !important;
}
[data-bs-theme="dark"] .fxa-step {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .fxa-step:hover {
  background: #202b3c !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-bs-theme="dark"] .fxa-step-idx {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .fxa-drag {
  color: #64748b !important;
}
[data-bs-theme="dark"] .fxa-drag:hover {
  color: #b794f6 !important;
  background: rgba(139, 92, 246, 0.18) !important;
}
[data-bs-theme="dark"] .fxa-step.fxa-ghost {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: #7c3aed !important;
}
[data-bs-theme="dark"] .fxa-step.fxa-chosen {
  border-color: rgba(139, 92, 246, 0.5) !important;
}
[data-bs-theme="dark"] .fxa-step.fxa-dragging,
[data-bs-theme="dark"] .sortable-fallback.fxa-step {
  border-color: #8b5cf6 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55) !important;
}
[data-bs-theme="dark"] .fxa-step-icon {
  background: #2e3a4b !important;
}
[data-bs-theme="dark"] .fxa-step-name {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .fxa-step-key {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .fxa-btn-remove {
  color: #64748b !important;
}
[data-bs-theme="dark"] .fxa-btn-remove:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-bs-theme="dark"] .fxa-empty-ic {
  background: #1b2433 !important;
  color: #64748b !important;
}
[data-bs-theme="dark"] .fxa-empty-t {
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .fxa-empty-sub {
  color: #64748b !important;
}
[data-bs-theme="dark"] .fxa-name { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .fxa-header { color: #94a3b8 !important; }

/* Dark Mode: Sửa ngân sách popup (.camp-budget-popup) */
[data-bs-theme="dark"] .swal2-popup.camp-budget-popup {
  background: #232e3d !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}
[data-bs-theme="dark"] .cbp-hd {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .cbp-hd-ic {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
}
[data-bs-theme="dark"] .cbp-hd-ti {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .cbp-hd-sub {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .cbp-card {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .cbp-id {
  color: #64748b !important;
}
[data-bs-theme="dark"] .cbp-name {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .cbp-cur-row {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .cbp-cur-lbl {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .cbp-cur-val {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .cbp-label {
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .cbp-lbl-tag {
  background: #2e3a4b !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .cbp-input-box {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] .cbp-input-box:focus-within {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.25) !important;
}
[data-bs-theme="dark"] .cbp-input {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .cbp-input::placeholder {
  color: #475569 !important;
}
[data-bs-theme="dark"] .cbp-input-suffix {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #a5b4fc !important;
}
[data-bs-theme="dark"] .cbp-prev-lbl {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .cbp-prev-num {
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .cbp-diff.same {
  background: #2e3a4b !important;
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .cbp-diff.up {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #6ee7b7 !important;
}
[data-bs-theme="dark"] .cbp-diff.down {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #fcd34d !important;
}
[data-bs-theme="dark"] .cbp-presets-row {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .cbp-presets-lbl {
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .cbp-chip {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .cbp-chip:hover {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
[data-bs-theme="dark"] .cbp-chip[data-pct^="+"],
[data-bs-theme="dark"] .cbp-chip[data-pct="100"] {
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  background: rgba(16, 185, 129, 0.12) !important;
}
[data-bs-theme="dark"] .cbp-chip[data-pct^="+"]:hover,
[data-bs-theme="dark"] .cbp-chip[data-pct="100"]:hover {
  background: rgba(16, 185, 129, 0.22) !important;
}
[data-bs-theme="dark"] .cbp-chip[data-pct^="-"] {
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  background: rgba(245, 158, 11, 0.12) !important;
}
[data-bs-theme="dark"] .cbp-chip[data-pct^="-"]:hover {
  background: rgba(245, 158, 11, 0.22) !important;
}
[data-bs-theme="dark"] .cbp-chip.reset {
  color: #94a3b8 !important;
}

/* ad-* / bm-* — Load TKQC / BM / Page (radio + toggle + limit) */
[data-bs-theme="dark"] .ad-radio-card .ad-radio-content,
[data-bs-theme="dark"] .bm-radio-card .bm-radio-content,
[data-bs-theme="dark"] .ad-toggle-item,
[data-bs-theme="dark"] .bm-toggle-item,
[data-bs-theme="dark"] .ad-limit-row,
[data-bs-theme="dark"] .bm-limit-row { border-color: rgba(255, 255, 255, 0.1) !important; background: #232e3d !important; }
[data-bs-theme="dark"] .ad-radio-card input[type="radio"]:checked + .ad-radio-content,
[data-bs-theme="dark"] .bm-radio-card input[type="radio"]:checked + .bm-radio-content { border-color: var(--primary-end, #8b5cf6) !important; background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .ad-radio-card .ad-radio-icon,
[data-bs-theme="dark"] .bm-radio-card .bm-radio-icon { background: #232e3d !important; }
[data-bs-theme="dark"] .ad-radio-card .ad-radio-text,
[data-bs-theme="dark"] .bm-radio-card .bm-radio-text,
[data-bs-theme="dark"] .ad-toggle-label,
[data-bs-theme="dark"] .bm-toggle-label,
[data-bs-theme="dark"] .ad-limit-label,
[data-bs-theme="dark"] .bm-limit-label { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ad-radio-card input[type="radio"]:checked + .ad-radio-content .ad-radio-text,
[data-bs-theme="dark"] .bm-radio-card input[type="radio"]:checked + .bm-radio-content .bm-radio-text { color: #c4b5fd !important; }
[data-bs-theme="dark"] #adLoadIdInput textarea,
[data-bs-theme="dark"] #bmLoadIdInput textarea,
[data-bs-theme="dark"] #pageLoadIdInput textarea,
[data-bs-theme="dark"] .ad-limit-input,
[data-bs-theme="dark"] .bm-limit-input { border-color: rgba(255, 255, 255, 0.1) !important; background: #1b2433 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] #adLoadIdInput textarea::placeholder,
[data-bs-theme="dark"] #bmLoadIdInput textarea::placeholder,
[data-bs-theme="dark"] #pageLoadIdInput textarea::placeholder { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ad-toggle-item:hover,
[data-bs-theme="dark"] .bm-toggle-item:hover { border-color: rgba(255, 255, 255, 0.18) !important; background: #2e3a4b !important; }
[data-bs-theme="dark"] .ad-switch-slider,
[data-bs-theme="dark"] .bm-switch-slider { background-color: #475569 !important; }
[data-bs-theme="dark"] .ad-switch-slider::before,
[data-bs-theme="dark"] .bm-switch-slider::before { background-color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ad-select-all-btn:hover,
[data-bs-theme="dark"] .bm-select-all-btn:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .ad-limit-icon,
[data-bs-theme="dark"] .bm-limit-icon { background: #2a2410 !important; }

/* id-* — Lọc theo ID */
[data-bs-theme="dark"] .id-count-badge { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.18) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .id-clear-link:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .id-textarea-wrap textarea { border-color: rgba(255, 255, 255, 0.1) !important; background: #1b2433 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .id-textarea-wrap textarea::placeholder { color: #94a3b8 !important; }
[data-bs-theme="dark"] .id-toggle-card { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .id-toggle-card:hover { border-color: rgba(255, 255, 255, 0.18) !important; }
[data-bs-theme="dark"] .id-toggle-card.active { border-color: var(--primary-end, #8b5cf6) !important; }
[data-bs-theme="dark"] .id-toggle-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .id-toggle-desc { color: #94a3b8 !important; }
[data-bs-theme="dark"] .id-switch-slider { background: #475569 !important; }
[data-bs-theme="dark"] .id-switch-slider::before { background: #e2e8f0 !important; }

/* sa-* — Chọn / Đổi tài khoản */
[data-bs-theme="dark"] .sa-search input { border-color: rgba(255, 255, 255, 0.1) !important; background-color: #1b2433 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .sa-search input::placeholder { color: #94a3b8 !important; }
[data-bs-theme="dark"] .sa-list::-webkit-scrollbar-thumb { background: #475569 !important; }
[data-bs-theme="dark"] .sa-item:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .sa-item-active,
[data-bs-theme="dark"] .sa-item-active:hover { background: rgba(16, 185, 129, 0.15) !important; }
[data-bs-theme="dark"] .sa-avatar { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .sa-name { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .sa-uid { color: #94a3b8 !important; }
[data-bs-theme="dark"] .sa-badge-active,
[data-bs-theme="dark"] .sa-badge-live { background: rgba(16, 185, 129, 0.15) !important; color: #4ade80 !important; }
[data-bs-theme="dark"] .sa-badge-die { background: rgba(220, 38, 38, 0.18) !important; color: #f87171 !important; }
[data-bs-theme="dark"] .sa-badge-warn { background: #2a2410 !important; color: #fbbf24 !important; }
[data-bs-theme="dark"] .sa-badge-info { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; }
[data-bs-theme="dark"] .sa-footer { border-top-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .sa-add-btn { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; }
[data-bs-theme="dark"] .sa-add-btn:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.22) !important; }
[data-bs-theme="dark"] .sa-add-text { color: #c4b5fd !important; }

/* #colPalettePop + cp-* — popover màu cột */
[data-bs-theme="dark"] #colPalettePop { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; }
[data-bs-theme="dark"] #colPalettePop > div:first-child { color: #94a3b8 !important; }
[data-bs-theme="dark"] #colPalettePop .cp-sw { border-color: #232e3d !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important; }
[data-bs-theme="dark"] #colPalettePop .cp-native-wrap { border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] #colPalettePop .cp-hex { border-color: rgba(255, 255, 255, 0.1) !important; background: #1b2433 !important; color: #e2e8f0 !important; }

/* via.js — nạp/mua gói + OTP (QR .qd-usdt-qr GIỮ trắng) */
[data-bs-theme="dark"] .swal2-popup .qd-tabs { background: #1b2433 !important; }
[data-bs-theme="dark"] .swal2-popup .qd-tab { background: transparent !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .swal2-popup .qd-tab.is-active { background: #232e3d !important; color: #a5b4fc !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; }
[data-bs-theme="dark"] .swal2-popup .qd-pane div[style*="#f1f5f9"],
[data-bs-theme="dark"] .swal2-popup .qd-usdt-loading,
[data-bs-theme="dark"] .swal2-popup .qd-usdt-pending div[style*="#f1f5f9"] { background: #1b2433 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .swal2-popup .qd-usdt-err { background: rgba(220, 38, 38, 0.18) !important; border-color: rgba(248, 113, 113, 0.4) !important; }
[data-bs-theme="dark"] .swal2-popup .qd-usdt-pending-wallet { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .swal2-popup .qd-usdt-wallet-copy,
[data-bs-theme="dark"] .swal2-popup .dep-usdt-copy { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .swal2-popup .qd-usdt-cancel-btn { background: #232e3d !important; border-color: rgba(248, 113, 113, 0.4) !important; }
[data-bs-theme="dark"] .mt-otp-card { background: #2e3a4b !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .mt-otp-label { color: #94a3b8 !important; }
[data-bs-theme="dark"] .mt-otp-value { color: #e2e8f0 !important; }

/* ===== Nút .btn-light (Hủy #drpCancel...) — Bootstrap trắng cố định, dark không tự đổi ===== */
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: #2e3a4b;
  --bs-btn-border-color: rgba(255, 255, 255, 0.12);
  --bs-btn-color: #e2e8f0;
  --bs-btn-hover-bg: #3a465a;
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.2);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #3a465a;
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.25);
  --bs-btn-active-color: #ffffff;
}

/* ===== Công tắc feature OFF (#d1d5db) — track = Bootstrap base background:var(--bs-form-check-bg).
   Override CẢ biến LẪN background-color + html-prefix specificity cao. Checked giữ primary. ===== */
html[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked),
html[data-bs-theme="dark"] input.form-check-input[role="switch"]:not(:checked),
html[data-bs-theme="dark"] .form-check .form-check-input[type="checkbox"]:not(:checked) {
  --bs-form-check-bg: #2e3a4b !important;
  background-color: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ===== Language picker setting.html (.lang-select*) — style inline trong setting.html (light) ===== */
[data-bs-theme="dark"] .lang-select-toggle {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .lang-select-toggle:hover { border-color: rgba(255, 255, 255, 0.25) !important; }
[data-bs-theme="dark"] .lang-select-toggle::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 15.5l-6-6h12l-6 6z'/%3E%3C/svg%3E") !important;
}
[data-bs-theme="dark"] .lang-select-menu {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .lang-select-option { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .lang-select-option:hover { background: #2e3a4b !important; color: #ffffff !important; }
[data-bs-theme="dark"] .lang-select-option.selected { color: #a5b4fc !important; }

/* ===== View Camp (camp-*) + Date Range Picker (drp-*/date-range-picker) — tkqc.js ===== */
/* Loading overlay chiến dịch/nhóm QC/QC + pixel (inline white #fff .95-.98) */
[data-bs-theme="dark"] #camp-loading-overlay,
[data-bs-theme="dark"] #px-loading-overlay { background: rgba(27, 36, 51, 0.96) !important; }
[data-bs-theme="dark"] #camp-loading-overlay strong,
[data-bs-theme="dark"] #px-loading-overlay strong { color: #cbd5e1 !important; }
/* Camp toolbar / tabs */
[data-bs-theme="dark"] .camp-tools-btn {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .camp-tab-label { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .camp-tab-btn.active .camp-tab-label,
[data-bs-theme="dark"] .camp-tab-btn:hover .camp-tab-label { color: #ffffff !important; }
[data-bs-theme="dark"] #dateFilterLabel.btn-label { color: #cbd5e1 !important; }
/* Date range picker */
[data-bs-theme="dark"] .date-range-picker {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .drp-presets,
[data-bs-theme="dark"] .drp-footer {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .drp-preset,
[data-bs-theme="dark"] .drp-nav-btn,
[data-bs-theme="dark"] .drp-day { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .drp-preset:hover,
[data-bs-theme="dark"] .drp-nav-btn:hover,
[data-bs-theme="dark"] .drp-day:hover { background: #2e3a4b !important; }
[data-bs-theme="dark"] .drp-preset.active { background: rgba(var(--primary-rgb, 99, 102, 241), 0.2) !important; color: #a5b4fc !important; }
[data-bs-theme="dark"] .drp-day.selected,
[data-bs-theme="dark"] .drp-day.in-range,
[data-bs-theme="dark"] .drp-day.range-start,
[data-bs-theme="dark"] .drp-day.range-end { background: rgba(var(--primary-rgb, 99, 102, 241), 0.25) !important; color: #ffffff !important; }
[data-bs-theme="dark"] .drp-day.muted,
[data-bs-theme="dark"] .drp-day.disabled,
[data-bs-theme="dark"] .drp-day.other-month { color: #475569 !important; }
[data-bs-theme="dark"] .drp-cselect-btn,
[data-bs-theme="dark"] .drp-cselect-list {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .drp-cselect-item { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .drp-cselect-item:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #ffffff !important; }
[data-bs-theme="dark"] .drp-range-text { color: #a5b4fc !important; }
[data-bs-theme="dark"] .drp-weekday,
[data-bs-theme="dark"] .drp-month-label,
[data-bs-theme="dark"] .drp-cal-title,
[data-bs-theme="dark"] .drp-cselect-label { color: #94a3b8 !important; }

/* ===== Empty-state grid (fx-grid-empty*) — "Chưa có dữ liệu" ===== */
[data-bs-theme="dark"] .fx-grid-empty-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .fx-grid-empty-ic {
  background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important;
  color: #c4b5fd !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] .fx-grid-empty-ic--fb {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #60a5fa !important;
}

/* ===== Modal Tùy chỉnh cột (cc-*) — style.css + tkqc.js ===== */
[data-bs-theme="dark"] .cc-overlay { background: rgba(0, 0, 0, 0.6) !important; }
[data-bs-theme="dark"] .cc-modal,
[data-bs-theme="dark"] .cc-header,
[data-bs-theme="dark"] .cc-close,
[data-bs-theme="dark"] .cc-col-row,
[data-bs-theme="dark"] .cc-preset-dd,
[data-bs-theme="dark"] .cc-preset-menu {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .cc-sidebar,
[data-bs-theme="dark"] .cc-footer,
[data-bs-theme="dark"] .cc-pill-locked,
[data-bs-theme="dark"] .cc-selected-list {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Header nhóm (THÔNG TIN/PHÂN PHỐI...) — gốc trong suốt chỉ chữ xám, KHÔNG box */
[data-bs-theme="dark"] .cc-group-label {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .cc-search,
[data-bs-theme="dark"] .cc-search-wrap input {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .cc-search::placeholder { color: #94a3b8 !important; }
[data-bs-theme="dark"] .cc-selected-pill,
[data-bs-theme="dark"] .cc-preset-trigger,
[data-bs-theme="dark"] .cc-preset-item,
[data-bs-theme="dark"] .cc-btn-cancel {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .cc-title,
[data-bs-theme="dark"] .cc-pill-name,
[data-bs-theme="dark"] .cc-col-row { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cc-sidebar-item,
[data-bs-theme="dark"] .cc-group-label,
[data-bs-theme="dark"] .cc-empty,
[data-bs-theme="dark"] .cc-search-icon,
[data-bs-theme="dark"] .cc-pill-remove { color: #94a3b8 !important; }
[data-bs-theme="dark"] .cc-sidebar-item:hover,
[data-bs-theme="dark"] .cc-col-row:hover,
[data-bs-theme="dark"] .cc-preset-item:hover,
[data-bs-theme="dark"] .cc-close:hover { background: #2e3a4b !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cc-sidebar-item.cc-sidebar-active,
[data-bs-theme="dark"] .cc-preset-active {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important;
  color: #a5b4fc !important;
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important;
}
[data-bs-theme="dark"] .cc-col-locked,
[data-bs-theme="dark"] .cc-pill-locked { color: #94a3b8 !important; }
/* Label tên cột (.cc-col-row span #1e293b đen) → sáng; cột locked xám nhạt */
[data-bs-theme="dark"] .cc-col-row span { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cc-col-row.cc-col-locked span { color: #94a3b8 !important; }
/* "Đã chọn N cột" — số đếm strong (#0f172a đen) → sáng */
[data-bs-theme="dark"] .cc-right-head { color: #94a3b8 !important; }
[data-bs-theme="dark"] .cc-right-head strong { color: #e2e8f0 !important; }

/* ===== Popup Kho tính năng (store-* — ads/bm/clone/page.html, inline + <style>) ===== */
[data-bs-theme="dark"] .swal2-popup.store-popup,
[data-bs-theme="dark"] .store-popup { background: #232e3d !important; }
[data-bs-theme="dark"] .store-tab:not(.active) {
  background: #2e3a4b !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .store-tab { border-left-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .store-close-btn {
  background: #2e3a4b !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .store-close-btn:hover { color: #ffffff !important; }
[data-bs-theme="dark"] #storeSearch {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] #storeSearch::placeholder { color: #94a3b8 !important; }
/* Viền hộp nhóm tab + search (#e5e7eb inline) — scope trong store popup */
[data-bs-theme="dark"] .swal2-popup.store-popup [style*="solid #e5e7eb"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}
/* Thẻ tính năng trong store (buildStoreHtml: inline background:#fff, KHÔNG class) */
[data-bs-theme="dark"] #storeGrid > div > div,
[data-bs-theme="dark"] #storeGrid [style*="background:#fff"] {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] #storeGrid [style*="color:#1a1a1a"] { color: #e2e8f0 !important; }
[data-bs-theme="dark"] #storeGrid [style*="color:#6b7280"] { color: #94a3b8 !important; }

/* ============================================================
   DARK MODE — TRANG CHỦ (HOME) đầy đủ (workflow sweep):
   nh-* dashboard, vt-* timeline, tx-* giao dịch, fbs-* phiên FB, nt-* note, pkg-* gaps.
   ============================================================ */
[data-bs-theme="dark"] .nh-hero,
[data-bs-theme="dark"] .nh-stat,
[data-bs-theme="dark"] .nh-card,
[data-bs-theme="dark"] .tx-filter,
[data-bs-theme="dark"] .tx-table-card,
[data-bs-theme="dark"] .fbs-pagination,
[data-bs-theme="dark"] .nt-item {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .nh-stat:hover { border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .tx-filter { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tx-filter:hover { border-color: var(--primary-start, #6366f1) !important; color: #c4b5fd !important; }
/* Pill filter ĐANG CHỌN ở dark: khôi phục gradient+trắng (rule .tx-filter dark ở trên dùng !important
   đè mất .tx-filter.is-active — cần đặc hiệu hơn để lấy lại phản hồi trạng thái đang lọc) */
[data-bs-theme="dark"] .tx-filter.is-active {
  background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6)) !important;
  color: #fff !important;
  border-color: var(--primary-start, #6366f1) !important;
}
[data-bs-theme="dark"] .nh-card-head,
[data-bs-theme="dark"] .tx-table-card > .mt-card-head,
[data-bs-theme="dark"] .pkg-summary-card > .mt-card-head,
[data-bs-theme="dark"] .pkg-promo-card > .mt-card-head,
[data-bs-theme="dark"] .nt-share-head { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nh-hero-foot { border-top-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .pkg-sum-divider { border-top-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .fbs-table-wrap { border-top-color: rgba(255, 255, 255, 0.1) !important; }
/* Text sáng */
[data-bs-theme="dark"] .nh-name,
[data-bs-theme="dark"] .nh-tile-value,
[data-bs-theme="dark"] .nh-stat-value,
[data-bs-theme="dark"] .nh-license-days-num,
[data-bs-theme="dark"] .nh-license-sessions-val,
[data-bs-theme="dark"] .nh-ac-next strong,
[data-bs-theme="dark"] .nh-ac-label,
[data-bs-theme="dark"] .nh-ac-counter strong,
[data-bs-theme="dark"] .nh-ac-hour-label,
[data-bs-theme="dark"] .nh-card-h5,
[data-bs-theme="dark"] .nh-empty-title,
[data-bs-theme="dark"] .vt-body,
[data-bs-theme="dark"] .tx-title,
[data-bs-theme="dark"] .tx-table tbody td,
[data-bs-theme="dark"] .fbs-title,
[data-bs-theme="dark"] .fbs-table tbody td,
[data-bs-theme="dark"] .nt-title,
[data-bs-theme="dark"] .nt-item-title,
[data-bs-theme="dark"] .pkg-duration-lbl,
[data-bs-theme="dark"] .pkg-sum-row strong { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .pkg-sum-balance strong { color: #34d399 !important; }
/* Text mờ */
[data-bs-theme="dark"] .nh-section-label,
[data-bs-theme="dark"] .nh-email,
[data-bs-theme="dark"] .nh-email i,
[data-bs-theme="dark"] .nh-tile-label,
[data-bs-theme="dark"] .nh-foot-status,
[data-bs-theme="dark"] .nh-foot-sync,
[data-bs-theme="dark"] .nh-stat-label,
[data-bs-theme="dark"] .nh-license-days-lbl,
[data-bs-theme="dark"] .nh-license-sessions-row,
[data-bs-theme="dark"] .nh-ac-next,
[data-bs-theme="dark"] .nh-ac-counter,
[data-bs-theme="dark"] .nh-ac-status,
[data-bs-theme="dark"] .nh-empty-sub,
[data-bs-theme="dark"] .vt-date,
[data-bs-theme="dark"] .tx-balance-before,
[data-bs-theme="dark"] .tx-desc,
[data-bs-theme="dark"] .tx-time,
[data-bs-theme="dark"] .tx-empty,
[data-bs-theme="dark"] .tx-empty p,
[data-bs-theme="dark"] .fbs-subtitle,
[data-bs-theme="dark"] .fbs-cell-muted,
[data-bs-theme="dark"] .fbs-time,
[data-bs-theme="dark"] .fbs-empty,
[data-bs-theme="dark"] .fbs-empty-text,
[data-bs-theme="dark"] .fbs-page-info,
[data-bs-theme="dark"] .nt-subtitle,
[data-bs-theme="dark"] .nt-empty,
[data-bs-theme="dark"] .nt-share-sub,
[data-bs-theme="dark"] .pkg-sum-row,
[data-bs-theme="dark"] .pkg-sum-balance { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tx-time i,
[data-bs-theme="dark"] .tx-empty i { color: #64748b !important; }
[data-bs-theme="dark"] .nh-section-label::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent) !important; }
[data-bs-theme="dark"] .nh-uid { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.3) !important; }
[data-bs-theme="dark"] .nh-tile { background: rgba(var(--primary-rgb, 99, 102, 241), 0.1) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.2) !important; }
[data-bs-theme="dark"] .nh-tile:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.32) !important; }
[data-bs-theme="dark"] .nh-tile-icon { background: #2e3a4b !important; }
[data-bs-theme="dark"] .nh-stat-trend { color: #94a3b8 !important; background: #1b2433 !important; }
[data-bs-theme="dark"] .nh-license-bar { background: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nh-ac-tabs { background: #1b2433 !important; }
[data-bs-theme="dark"] .nh-ac-tab { color: #94a3b8 !important; }
[data-bs-theme="dark"] .nh-ac-tab:hover { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .nh-ac-tab.is-active { background: #2e3a4b !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .nh-ac-tab-badge { background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .nh-ac-tab.is-active .nh-ac-tab-badge { background: rgba(var(--primary-rgb, 99, 102, 241), 0.2) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .nh-ac-textarea { background: #1b2433 !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nh-ac-textarea:focus { background: #232e3d !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.5) !important; }
[data-bs-theme="dark"] .nh-ac-hour-select { background-color: #2e3a4b !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nh-card-history .nh-card-icon { background: rgba(148, 163, 184, 0.16) !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .nh-empty-ico { background: linear-gradient(135deg, #2e3a4b, #1b2433) !important; }
[data-bs-theme="dark"] .nh-empty-ico i { color: #94a3b8 !important; }
[data-bs-theme="dark"] .nh-tops .nh-card-body::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .versions-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16) !important; }
/* Timeline vt-* */
[data-bs-theme="dark"] .version-timeline::before { background: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .vt-dot { background: #475569 !important; border-color: #232e3d !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .vt-latest .vt-dot { background: #10b981 !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important; }
[data-bs-theme="dark"] .vt-content { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .vt-latest .vt-content { background: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.16) !important; }
[data-bs-theme="dark"] .vt-item:hover .vt-content { background: #2e3a4b !important; }
[data-bs-theme="dark"] .vt-latest:hover .vt-content { background: rgba(16, 185, 129, 0.14) !important; }
[data-bs-theme="dark"] .vt-badge { background: #2e3a4b !important; color: #94a3b8 !important; }
/* Giao dịch tx-* + bảng */
[data-bs-theme="dark"] .tx-table thead th,
[data-bs-theme="dark"] .fbs-table thead th { color: #94a3b8 !important; background: #1b2433 !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .tx-table tbody td,
[data-bs-theme="dark"] .fbs-table tbody td { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .tx-table tbody tr:hover td,
[data-bs-theme="dark"] .fbs-table tbody tr:hover td { background: #2e3a4b !important; }
[data-bs-theme="dark"] .tx-type-pill.is-deposit { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .tx-type-pill.is-buy_package { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .tx-type-pill.is-upgrade { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .tx-type-pill.is-buy_feature { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .tx-type-pill.is-adjust { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .tx-type-pill.is-refund { background: rgba(6, 182, 212, 0.16) !important; color: #67e8f9 !important; }
/* Toolbar head icon (thay inline #6366f1 cũ — indigo tối khó đọc trên head #2e3a4b) */
[data-bs-theme="dark"] .tx-head-title i { color: #a5b4fc !important; }
/* Badge đếm — indigo trên dark → tím sáng (khớp .nh-uid / .tx-filter hover) */
[data-bs-theme="dark"] .tx-count-badge {
  background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important;
  color: #c4b5fd !important;
}
/* "Số dư sau" dùng --primary-start #6366f1 (~3:1 trên card tối) → indigo đọc-được-trên-dark */
[data-bs-theme="dark"] .tx-balance-after { color: #a5b4fc !important; }
/* Cột "Thay đổi" xanh/đỏ light rò rỉ sang dark → sáng hoá khớp palette dark */
[data-bs-theme="dark"] .tx-amount.is-positive { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .tx-amount.is-negative { color: #fca5a5 !important; }
/* Phiên FB fbs-* */
[data-bs-theme="dark"] .fbs-quota { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.3) !important; }
[data-bs-theme="dark"] .fbs-quota.fbs-quota-danger { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(220, 38, 38, 0.3) !important; }
[data-bs-theme="dark"] .fbs-quota.fbs-quota-success { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .fbs-btn-delete { color: #fca5a5 !important; background: rgba(220, 38, 38, 0.12) !important; border-color: rgba(220, 38, 38, 0.3) !important; }
[data-bs-theme="dark"] .fbs-btn-delete:hover { background: rgba(220, 38, 38, 0.22) !important; border-color: rgba(220, 38, 38, 0.45) !important; }
[data-bs-theme="dark"] .fbs-page-btn { border-color: rgba(255, 255, 255, 0.1) !important; background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .fbs-page-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.18) !important; }
/* Note nt-* */
[data-bs-theme="dark"] .nt-btn-cancel { color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nt-btn-cancel:hover { background: #2e3a4b !important; }
[data-bs-theme="dark"] .nt-textarea { background: #1b2433 !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nt-search-row input { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .nt-item.active { background: rgba(245, 158, 11, 0.16) !important; border-color: rgba(245, 158, 11, 0.5) !important; }
[data-bs-theme="dark"] .nt-edit-badge { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .nt-item-preview { background: #1b2433 !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .nt-share-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .nt-share-row { border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nt-share-row input { color: #e2e8f0 !important; background: #1b2433 !important; }
[data-bs-theme="dark"] .nt-share-btn { border-left-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .nt-share-btn-open { background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .nt-share-btn-open:hover { background: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; }
/* Gói pkg-* gaps */
[data-bs-theme="dark"] .pkg-sum-discount { color: #34d399 !important; }
[data-bs-theme="dark"] .pkg-sum-total { background: linear-gradient(135deg, rgba(var(--primary-rgb, 99, 102, 241), 0.18), rgba(var(--primary-end-rgb, 139, 92, 246), 0.12)) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3) !important; }
[data-bs-theme="dark"] .pkg-sum-total span { color: #c7d2fe !important; }
[data-bs-theme="dark"] .pkg-card-sessions { background: transparent !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .pkg-card-sessions i { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .pkg-promo-input { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .pkg-promo-input::placeholder { color: #64748b !important; }
[data-bs-theme="dark"] .pkg-promo-input:focus { border-color: var(--primary-start, #6366f1) !important; }
[data-bs-theme="dark"] .pkg-promo-msg.is-success { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }

/* ===================================================================
   DARK MODE — HOME (index.html) đợt 2: gộp 4 block
   Phủ 5 prefix CHƯA có rule dark: cf- (Check live) · tfa- (Lấy 2FA)
   · ac- (Auto check) · sup- (Hỗ trợ) · st- (Cài đặt / kết nối Zalo).
   Palette: surface #fff→#232e3d · elevated (sub/menu/control trắng)→#2e3a4b
   · input/xám (#f8fafc/#fafafb/#f9fafb)→#1b2433 · chữ đen→#e2e8f0
   · chữ xám→#94a3b8 · border sáng→rgba(255,255,255,.1). Brand gradient,
   Zalo blue (#0068ff) và pill/nút màu GIỮ hue, chỉ đổi tint tối.
   GIỮ trắng (KHÔNG override): .dep-qr-wrap .qd-usdt-qr .avatar-letter
   .fiox-color-badge.
   =================================================================== */

/* ===== CHECK LIVE (cf-*) ===== */
[data-bs-theme="dark"] .cf-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cf-subtitle,
[data-bs-theme="dark"] .cf-progress-row { color: #94a3b8 !important; }
[data-bs-theme="dark"] .cf-progress-percent { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cf-textarea {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .cf-textarea[readonly] { background: #232e3d !important; }
[data-bs-theme="dark"] .cf-progress-bar { background: #1b2433 !important; }
/* Pill: nền trắng → elevated tối, giữ chữ màu */
[data-bs-theme="dark"] .cf-pill {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}
[data-bs-theme="dark"] .cf-pill:hover:not(:disabled) { background: #2d3b52 !important; }
[data-bs-theme="dark"] .cf-pill-indigo { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #a5b4fc !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-indigo:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-amber { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-amber:hover { background: rgba(245, 158, 11, 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-green { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-green:hover { background: rgba(16, 185, 129, 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-purple { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-purple:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-cyan { background: rgba(6, 182, 212, 0.16) !important; color: #67e8f9 !important; border-color: rgba(14, 165, 233, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-cyan:hover { background: rgba(6, 182, 212, 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-red { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-red:hover { background: rgba(220, 38, 38, 0.26) !important; }
[data-bs-theme="dark"] .cf-pill-blue { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; border-color: rgba(59, 130, 246, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-blue:hover { background: rgba(59, 130, 246, 0.24) !important; }

/* ===== LẤY 2FA (tfa-*) ===== */
[data-bs-theme="dark"] .tfa-title,
[data-bs-theme="dark"] .tfa-code { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .tfa-subtitle,
[data-bs-theme="dark"] .tfa-secret,
[data-bs-theme="dark"] .tfa-empty { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tfa-timer-text { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .tfa-timer-row > i { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tfa-timer-bar { background: #1b2433 !important; }
[data-bs-theme="dark"] .tfa-input {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .tfa-input::placeholder { color: #64748b !important; }
/* Item: nền xám sáng (#f8fafc) → input tối */
[data-bs-theme="dark"] .tfa-item {
  background: #1b2433 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .tfa-item:hover { border-color: rgba(255, 255, 255, 0.2) !important; }
[data-bs-theme="dark"] .tfa-item-saved {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
[data-bs-theme="dark"] .tfa-item-saved:hover { border-color: rgba(245, 158, 11, 0.5) !important; }
[data-bs-theme="dark"] .tfa-saved-label { color: #fcd34d !important; }
/* Nút hành động: nền trắng → tint tối, giữ chữ màu */
[data-bs-theme="dark"] .tfa-act-btn { background: #2e3a4b !important; }
[data-bs-theme="dark"] .tfa-act-save { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.4) !important; }
[data-bs-theme="dark"] .tfa-act-save:hover { background: rgba(16, 185, 129, 0.24) !important; }
[data-bs-theme="dark"] .tfa-act-edit { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.4) !important; }
[data-bs-theme="dark"] .tfa-act-edit:hover { background: rgba(245, 158, 11, 0.24) !important; }
[data-bs-theme="dark"] .tfa-act-del { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .tfa-act-del:hover { background: rgba(220, 38, 38, 0.26) !important; }

/* ===== AUTO CHECK (ac-*) ===== */
[data-bs-theme="dark"] .ac-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-card,
[data-bs-theme="dark"] .ac-zalo-gate {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ac-card-head { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-card .nh-ac-foot { border-top-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-head-divider { background: rgba(255, 255, 255, 0.12) !important; }
/* Ô giờ/phút + control nền trắng → elevated */
[data-bs-theme="dark"] .ac-hour-box {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ac-hour-box .ac-hm-sep { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .ac-hm-pick { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-hm-pick:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; }
[data-bs-theme="dark"] .ac-hm-pick.is-open { background: rgba(var(--primary-rgb, 99, 102, 241), 0.22) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-hm-caret { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-hm-menu {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ac-hm-opt { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-hm-opt:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-hm-opt.is-active { color: #c4b5fd !important; }
/* Chip Danh mục — giữ tint tím */
[data-bs-theme="dark"] .ac-cat-chip {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12) !important;
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3) !important;
  color: #c4b5fd !important;
}
[data-bs-theme="dark"] .ac-cat-chip:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.18) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .ac-cat-chip-value { color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-chip-menu {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ac-cat-opt { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-cat-opt:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-opt.is-active { color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-opt-count { background: #1b2433 !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-cat-opt:hover .ac-cat-opt-count,
[data-bs-theme="dark"] .ac-cat-opt.is-active .ac-cat-opt-count { background: rgba(var(--primary-rgb, 99, 102, 241), 0.2) !important; color: #a5b4fc !important; }
/* Nút header Lọc / Nhập — nền trắng → elevated */
[data-bs-theme="dark"] .ac-hbtn {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .ac-hbtn:hover { background: #2d3b52 !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .ac-hbtn.is-open { background: rgba(var(--primary-rgb, 99, 102, 241), 0.14) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.5) !important; }
[data-bs-theme="dark"] .ac-hbtn > i { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-hbtn.is-open > i { color: #a5b4fc !important; }
[data-bs-theme="dark"] .ac-hbtn-menu {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ac-filter-opt { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-filter-opt:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; }
/* Search box — nền trắng → elevated */
[data-bs-theme="dark"] .ac-search {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ac-search:focus-within { background: #2e3a4b !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.5) !important; }
[data-bs-theme="dark"] .ac-search-ico { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-search:focus-within .ac-search-ico { color: #a5b4fc !important; }
[data-bs-theme="dark"] .ac-search-input { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-search-input::placeholder { color: #64748b !important; }
/* Nút sm danger */
[data-bs-theme="dark"] .ac-btn-danger { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .ac-btn-danger:not(:disabled):hover { background: rgba(220, 38, 38, 0.28) !important; }
/* Footer thống kê — nhóm nền trắng → elevated + chữ đen/xám */
[data-bs-theme="dark"] .ac-stats-grp {
  background: #2e3a4b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .ac-stat-item { color: #e2e8f0 !important; border-right-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-stat-item strong { color: #94a3b8 !important; }
/* Gate Zalo — card nền trắng (giữ Zalo blue #0068ff cho brand) */
[data-bs-theme="dark"] .ac-zalo-gate-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-zalo-gate-desc,
[data-bs-theme="dark"] .ac-zalo-countdown { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-zalo-countdown strong { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-zalo-gate-icon { background: rgba(0, 104, 255, 0.18) !important; }
[data-bs-theme="dark"] .ac-zalo-gate-btn-ghost { color: #cbd5e1 !important; border-color: rgba(255, 255, 255, 0.12) !important; }
[data-bs-theme="dark"] .ac-zalo-gate-btn-ghost:hover { background: #2e3a4b !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-zalo-code-box { background: rgba(0, 104, 255, 0.12) !important; border-color: rgba(0, 104, 255, 0.45) !important; }
[data-bs-theme="dark"] .ac-zalo-code-box:hover { background: rgba(0, 104, 255, 0.2) !important; }
/* Empty grid + cell ID đậm */
[data-bs-theme="dark"] .ac-grid-empty,
[data-bs-theme="dark"] .ac-grid-empty p { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-grid-empty i { color: #475569 !important; }
[data-bs-theme="dark"] .ac-aggrid .ac-cell-id { color: #e2e8f0 !important; }

/* .sup-* dark: đã gộp xuống block "HỖ TRỢ (sup-*) — dark mode (redesign)" bên dưới */

/* ===== CÀI ĐẶT / KẾT NỐI ZALO (st-*) ===== */
[data-bs-theme="dark"] .st-card,
[data-bs-theme="dark"] .st-action-bar {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .st-card:hover { border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.32) !important; }
[data-bs-theme="dark"] .st-card-head { background: #2e3a4b !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .st-card-title,
[data-bs-theme="dark"] .st-card b,
[data-bs-theme="dark"] .st-card span,
[data-bs-theme="dark"] .st-zalo-step { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .st-card-desc,
[data-bs-theme="dark"] .st-zalo-desc { color: #94a3b8 !important; }
/* Icon card head pastel — giữ hue */
[data-bs-theme="dark"] .st-card-head-icon-zalo { background: rgba(59, 130, 246, 0.16) !important; }
[data-bs-theme="dark"] .st-card-head-icon-purple { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; }
/* Pill trạng thái — nền/border sáng → tint tối */
[data-bs-theme="dark"] .st-zalo-status-checking { background: #1b2433 !important; color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .st-zalo-status-connected { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .st-zalo-status-pending { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.3) !important; }
/* Skeleton bar shimmer — dải tối */
[data-bs-theme="dark"] .st-skel-bar { background: linear-gradient(90deg, #1b2433 0%, #2e3a4b 50%, #1b2433 100%) !important; background-size: 200% 100% !important; }
/* Code box dashed + nút copy nền trắng → tint indigo */
[data-bs-theme="dark"] .st-zalo-code-box { background: rgba(var(--primary-rgb, 99, 102, 241), 0.1) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .st-zalo-code { color: #a5b4fc !important; }
[data-bs-theme="dark"] .st-zalo-copy { background: #2e3a4b !important; color: #a5b4fc !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .st-zalo-copy:hover { background: var(--primary-start, #6366f1) !important; color: #fff !important; }
[data-bs-theme="dark"] .st-zalo-expire { color: #fcd34d !important; }
/* Connected state — green tint tối */
[data-bs-theme="dark"] .st-zalo-connected { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .st-zalo-connected-name { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .st-zalo-connected-sub { color: #34d399 !important; }
/* Nút danger nền trắng / pastel → tint đỏ tối */
[data-bs-theme="dark"] .st-btn-danger,
[data-bs-theme="dark"] .st-btn-outline-danger { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .st-btn-danger:hover,
[data-bs-theme="dark"] .st-btn-outline-danger:hover { background: rgba(220, 38, 38, 0.28) !important; }
[data-bs-theme="dark"] .pkg-promo-msg.is-error { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(220, 38, 38, 0.35) !important; }

/* Logout swal (via.js menu Đăng xuất FB/tài khoản) — inline color đen/xám trong swal */
[data-bs-theme="dark"] .swal2-html-container [style*="color:#0f172a"],
[data-bs-theme="dark"] .swal2-html-container [style*="color: #0f172a"],
[data-bs-theme="dark"] .swal2-html-container [style*="color:#1a1a1a"],
[data-bs-theme="dark"] .swal2-html-container [style*="color:#1f2937"],
[data-bs-theme="dark"] .swal2-html-container [style*="color:#111827"] { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .swal2-html-container [style*="color:#475569"],
[data-bs-theme="dark"] .swal2-html-container [style*="color:#64748b"],
[data-bs-theme="dark"] .swal2-html-container [style*="color:#6b7280"] { color: #94a3b8 !important; }

/* Header panel "Chức năng" — đường kẻ trên + chiều cao 41.5px (gốc 40px) */
.d-flex.align-items-center.justify-content-between.px-3.py-2 {
  border-top: 1px solid #e5e7eb;
  min-height: 41.5px !important;
  height: 41.5px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== Popup Ghi chú (fxnote-*) — dark (icon + nút Save giữ gradient tím) ===== */
[data-bs-theme="dark"] .fxnote-popup { background: #232e3d !important; }
[data-bs-theme="dark"] .fxnote-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .fxnote-field textarea {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
  background: #1b2433 !important;
}
[data-bs-theme="dark"] .fxnote-field textarea:focus {
  border-color: var(--primary-start, #6366f1) !important;
  background: #232e3d !important;
}
[data-bs-theme="dark"] .fxnote-field textarea::placeholder { color: #64748b !important; }
[data-bs-theme="dark"] .fxnote-cancel {
  background: #2e3a4b !important;
  color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .fxnote-cancel:hover { background: #374151 !important; }
[data-bs-theme="dark"] .d-flex.align-items-center.justify-content-between.px-3.py-2 {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== HIỆU ỨNG BONG BÓNG — biến CSS đồng bộ 1 CHỖ (light + dark).
   Muốn chỉnh (màu glow, độ sáng viền, độ bóng) → sửa các biến dưới đây,
   áp ngay cho MỌI element dùng chúng. ===== */
:root {
  --bubble-rim: rgba(15, 23, 42, 0.16);           /* viền nghỉ — hairline RÕ trên nền sáng */
  --bubble-rim-hover: rgba(var(--primary-rgb, 99, 102, 241), 0.6);     /* viền hover — indigo theo glow */
  --bubble-glow: rgba(var(--primary-rgb, 99, 102, 241), 0.28);         /* glow nghỉ (tím) */
  --bubble-glow-hover: rgba(var(--primary-rgb, 99, 102, 241), 0.55);   /* glow hover */
  --bubble-gloss: rgba(255, 255, 255, 0.7);        /* ánh đỉnh nghỉ */
  --bubble-gloss-hover: rgba(255, 255, 255, 0.9);  /* ánh đỉnh hover */
  --bubble-drop: rgba(15, 23, 42, 0.08);           /* đổ bóng nền */
}
[data-bs-theme="dark"] {
  --bubble-rim: rgba(255, 255, 255, 0.34);         /* viền nghỉ — hairline trắng RÕ trên nền tối */
  --bubble-rim-hover: rgba(255, 255, 255, 0.6);
  --bubble-glow: rgba(var(--primary-rgb, 99, 102, 241), 0.26);
  --bubble-glow-hover: rgba(var(--primary-rgb, 99, 102, 241), 0.48);
  --bubble-gloss: rgba(255, 255, 255, 0.1);
  --bubble-gloss-hover: rgba(255, 255, 255, 0.16);
  --bubble-drop: rgba(0, 0, 0, 0.3);
}
/* Áp cho TẤT CẢ nút control (toolbar + header + #switchAccount).
   Thêm element khác vào hiệu ứng: chỉ cần copy 3 dòng border/box-shadow/transition. */
.control-btn {
  border: 1px solid var(--bubble-rim) !important;
  box-shadow:
    0 3px 10px -3px var(--bubble-glow),
    0 1px 2px var(--bubble-drop),
    inset 0 1px 1.5px var(--bubble-gloss) !important;
  transition: box-shadow 0.2s ease, transform 0.16s ease, border-color 0.2s ease !important;
}
.control-btn:hover {
  border-color: var(--bubble-rim-hover) !important;
  box-shadow:
    0 7px 20px -3px var(--bubble-glow-hover),
    0 2px 6px var(--bubble-drop),
    inset 0 1px 2px var(--bubble-gloss-hover) !important;
  transform: translateY(-1.5px) !important;
}
.control-btn:active { transform: translateY(0) !important; }

/* ===== Thanh công cụ grid — kiểu "Glossy 3D" (CHỈ trong .tkqc-toolbar, KHÔNG đụng nút header) ===== */
/* Nút thường: khối bóng nổi (gradient trắng→xám nhạt + ánh đỉnh trong + đổ bóng mềm) */
.tkqc-toolbar .control-btn {
  background: linear-gradient(180deg, #ffffff, #eef1f6) !important;
  border: 1px solid #d6dce6 !important;
  color: #3d4757 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(16,24,40,.12) !important;
  transition: background .16s ease, box-shadow .16s ease, transform .12s ease, border-color .16s ease !important;
}
.tkqc-toolbar .control-btn:hover {
  background: linear-gradient(180deg, #ffffff, #e6eaf2) !important;
  border-color: #c7cfdb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -4px rgba(16,24,40,.2) !important;
  transform: translateY(-1px) !important;
}
.tkqc-toolbar .control-btn:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px rgba(16,24,40,.14) !important; }
/* Icon 1 tông trung tính (bỏ 7 màu rối), hover ngả accent + khoảng cách icon–chữ ĐỒNG NHẤT
   (đè m-0 của ads lẫn margin 10px của bm/clone/page → luôn 6px) */
.tkqc-toolbar .control-btn i { color: #5a6675 !important; width: auto !important; height: auto !important; margin-right: 6px !important; }
.tkqc-toolbar .control-btn:hover i { color: var(--primary-start, #6366f1) !important; }
/* Nút chính "Bắt đầu" = khối gradient tím→indigo bóng nổi bật (#pxStart = trang /pixel) */
.tkqc-toolbar #start,
.tkqc-toolbar #pxStart {
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1)) !important;
  border-color: #5b52d6 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px -2px rgba(var(--primary-end-rgb, 139,92,246), .5) !important;
}
.tkqc-toolbar #start:hover,
.tkqc-toolbar #pxStart:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 7px 16px -3px rgba(var(--primary-end-rgb, 139,92,246), .6) !important; }
/* Nút "Dừng lại" = khối đỏ bóng (#pxStop = trang /pixel) */
.tkqc-toolbar #stop,
.tkqc-toolbar #pxStop {
  background: linear-gradient(180deg, #f87171, #dc2626) !important;
  border-color: #b91c1c !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -2px rgba(239,68,68,.5) !important;
}
.tkqc-toolbar #stop:hover,
.tkqc-toolbar #pxStop:hover { filter: brightness(1.05); }
/* Icon trong start/stop = trắng (đè màu/inline cũ) */
.tkqc-toolbar #start i, .tkqc-toolbar #stop i,
.tkqc-toolbar #pxStart i, .tkqc-toolbar #pxStop i { color: #fff !important; }
/* ===== Trạng thái ĐANG BẬT cho nút công cụ (Camp / Tự động&Bảo mật / Phân tích Ads) =====
   CHƯA bật = nút trắng bóng; ĐANG BẬT = sáng gradient indigo + chữ/icon trắng + glow → nhìn là biết. */
.tkqc-toolbar #btnCamp.active,
.tkqc-toolbar #adsRulesBtn.active,
.tkqc-toolbar #adsAnalyticsBtn.active,
.tkqc-toolbar #adsRadarBtn.active,
.tkqc-toolbar #adsShareBtn.active {
  background: linear-gradient(180deg, #7b78f2, #574fdc) !important;
  border-color: #4a41cf !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px -2px rgba(99,102,241,.55) !important;
}
.tkqc-toolbar #btnCamp.active .btn-icon,
.tkqc-toolbar #adsRulesBtn.active .btn-icon,
.tkqc-toolbar #adsAnalyticsBtn.active .btn-icon,
.tkqc-toolbar #adsRadarBtn.active .btn-icon,
.tkqc-toolbar #adsShareBtn.active .btn-icon,
.tkqc-toolbar #btnCamp.active i,
.tkqc-toolbar #adsRulesBtn.active i,
.tkqc-toolbar #adsAnalyticsBtn.active i,
.tkqc-toolbar #adsRadarBtn.active i,
.tkqc-toolbar #adsShareBtn.active i { color: #fff !important; }
.tkqc-toolbar #btnCamp.active:hover,
.tkqc-toolbar #adsRulesBtn.active:hover,
.tkqc-toolbar #adsAnalyticsBtn.active:hover,
.tkqc-toolbar #adsRadarBtn.active:hover,
.tkqc-toolbar #adsShareBtn.active:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 7px 16px -3px rgba(99,102,241,.6) !important; }
/* Ô tìm kiếm khớp phong cách khối bóng */
.tkqc-toolbar .form-control {
  background: linear-gradient(180deg, #ffffff, #eef1f6) !important;
  border: 1px solid #d6dce6 !important;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.05) !important;
}
.tkqc-toolbar .form-control:focus { border-color: var(--primary-end, #8b5cf6) !important; box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139,92,246), .15) !important; }
/* Vạch ngăn nhóm — ĐẶC, đậm, bo đầu gọn (dày rõ, KHÔNG mờ 2 đầu, cao 24px).
   Dùng CHUNG cho .border-end & .border-start (chỉ khác vị trí trái/phải). */
.tkqc-toolbar .border-end { position: relative; border-right: 0 !important; }
.tkqc-toolbar .border-end::before,
.tkqc-toolbar .border-start::before {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 2px; height: 24px; border-radius: 3px;
  background: rgba(15,23,42,.55);
}
.tkqc-toolbar .border-end::before { right: -1px; }
/* Thu gọn khoảng cách giữa các nút (me-3/ms-3 16px → 8px) cho bớt xa */
/* Hở 2 bên MỌI vạch ngăn = 14px SINGLE-SOURCE (mỗi bên 1 nguồn duy nhất, cùng giá trị)
   → làm tròn giống nhau ở mọi mức zoom, KHÔNG bao giờ lệch "lúc cân lúc không".
   Vạch #1: Bắt đầu me-3(14) | nhóm B ms-3(14). */
.tkqc-toolbar .me-3 { margin-right: 14px !important; }
.tkqc-toolbar .ms-3 { margin-left: 14px !important; }
/* Vạch #2 (nhóm B | ô Tìm kiếm): nhóm B dùng flex-gap cho khoảng giữa nút (bỏ me-2 nút),
   padding-right 14px = hở TRÁI (1 nguồn); ô Tìm kiếm padding-left 14px = hở PHẢI (1 nguồn). */
.tkqc-toolbar .border-end.ms-3.pe-3 { gap: .5rem !important; padding-right: 14px !important; }
.tkqc-toolbar .border-end.ms-3.pe-3 > * { margin-right: 0 !important; }
.tkqc-toolbar .flex-grow-1.px-3 { padding-left: 14px !important; }
/* Vạch #3 (cụm nút phải): data-tool gap 14px = hở TRÁI (1 nguồn); ps-2→padding-left 14px = hở PHẢI. */
.tkqc-toolbar [data-tool="general"] { gap: 14px !important; }
.tkqc-toolbar .border-start.ps-2 { padding-left: 14px !important; margin-left: 0 !important; }
/* .border-start (khối #userInfo + cụm nút phải): dùng chung kiểu khắc chìm ở trên, chỉ đổi vị trí sang TRÁI */
.tkqc-toolbar .border-start { position: relative; border-left: 0 !important; }
.tkqc-toolbar .border-start::before { left: -1px; }

[data-bs-theme="dark"] .tkqc-toolbar .control-btn {
  background: linear-gradient(180deg, #232d40, #1a2233) !important;
  border-color: #33405a !important;
  color: #cdd5e2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.35) !important;
}
[data-bs-theme="dark"] .tkqc-toolbar .control-btn:hover {
  background: linear-gradient(180deg, #26314a, #1c2436) !important;
  border-color: #3d4b66 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 7px 16px -4px rgba(0,0,0,.5) !important;
}
[data-bs-theme="dark"] .tkqc-toolbar .control-btn i { color: #9aa5b8 !important; }
[data-bs-theme="dark"] .tkqc-toolbar .control-btn:hover i { color: #c9b8ff !important; }
[data-bs-theme="dark"] .tkqc-toolbar #start i, [data-bs-theme="dark"] .tkqc-toolbar #stop i { color: #fff !important; }
[data-bs-theme="dark"] .tkqc-toolbar .form-control {
  background: linear-gradient(180deg, #232d40, #1a2233) !important;
  border-color: #33405a !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3) !important;
}
[data-bs-theme="dark"] .tkqc-toolbar .border-end::before,
[data-bs-theme="dark"] .tkqc-toolbar .border-start::before {
  background: rgba(255,255,255,.5);
}

/* ===== Nav-pills (#header) — bong bóng rõ + nút ĐANG CHỌN nổi bật hơn ===== */
#header .nav-pills-container a,
#header .rounded.row a {
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    0 3px 10px rgba(var(--primary-rgb, 99, 102, 241), 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.35) !important;
}
#header .nav-pills-container a:not(.active):hover,
#header .rounded.row a:not(.bg-white):hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}
#header .nav-pills-container a.active,
#header .rounded.row a.bg-white {
  font-weight: 800 !important;
  box-shadow:
    0 9px 30px rgba(var(--primary-rgb, 99, 102, 241), 0.6),
    0 3px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(var(--primary-rgb, 99, 102, 241), 0.18) !important;
  transform: translateY(-2px) scale(1.06) !important;
}

/* ============================================================
   DARK MODE — HOME đợt 2 (workflow): cf- Check live, tfa- 2FA,
   ac- Auto check, sup- Hỗ trợ, st- Cài đặt/Zalo. Pill/nút giữ hue.
   ============================================================ */
/* CHECK LIVE (cf-*) */
[data-bs-theme="dark"] .cf-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cf-subtitle,
[data-bs-theme="dark"] .cf-progress-row { color: #94a3b8 !important; }
[data-bs-theme="dark"] .cf-progress-percent { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cf-textarea { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cf-textarea[readonly] { background: #232e3d !important; }
[data-bs-theme="dark"] .cf-progress-bar { background: #1b2433 !important; }
[data-bs-theme="dark"] .cf-pill { background: #2e3a4b !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .cf-pill:hover:not(:disabled) { background: #2d3b52 !important; }
[data-bs-theme="dark"] .cf-pill-indigo { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #a5b4fc !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-amber { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-green { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-purple { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-cyan { background: rgba(6, 182, 212, 0.16) !important; color: #67e8f9 !important; border-color: rgba(14, 165, 233, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-red { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-blue { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; border-color: rgba(59, 130, 246, 0.4) !important; }
[data-bs-theme="dark"] .cf-pill-indigo:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-amber:hover { background: rgba(245, 158, 11, 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-green:hover { background: rgba(16, 185, 129, 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-purple:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-cyan:hover { background: rgba(6, 182, 212, 0.24) !important; }
[data-bs-theme="dark"] .cf-pill-red:hover { background: rgba(220, 38, 38, 0.26) !important; }
[data-bs-theme="dark"] .cf-pill-blue:hover { background: rgba(59, 130, 246, 0.24) !important; }
/* 2FA (tfa-*) */
[data-bs-theme="dark"] .tfa-title,
[data-bs-theme="dark"] .tfa-code { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .tfa-subtitle,
[data-bs-theme="dark"] .tfa-secret,
[data-bs-theme="dark"] .tfa-empty { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tfa-timer-text { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .tfa-timer-row > i { color: #94a3b8 !important; }
[data-bs-theme="dark"] .tfa-timer-bar { background: #1b2433 !important; }
[data-bs-theme="dark"] .tfa-input { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .tfa-input::placeholder { color: #64748b !important; }
[data-bs-theme="dark"] .tfa-item { background: #1b2433 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .tfa-item:hover { border-color: rgba(255, 255, 255, 0.2) !important; }
[data-bs-theme="dark"] .tfa-item-saved { background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.3) !important; }
[data-bs-theme="dark"] .tfa-item-saved:hover { border-color: rgba(245, 158, 11, 0.5) !important; }
[data-bs-theme="dark"] .tfa-saved-label { color: #fcd34d !important; }
[data-bs-theme="dark"] .tfa-act-btn { background: #2e3a4b !important; }
[data-bs-theme="dark"] .tfa-act-save { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.4) !important; }
[data-bs-theme="dark"] .tfa-act-save:hover { background: rgba(16, 185, 129, 0.24) !important; }
[data-bs-theme="dark"] .tfa-act-edit { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.4) !important; }
[data-bs-theme="dark"] .tfa-act-edit:hover { background: rgba(245, 158, 11, 0.24) !important; }
[data-bs-theme="dark"] .tfa-act-del { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .tfa-act-del:hover { background: rgba(220, 38, 38, 0.26) !important; }
/* AUTO CHECK (ac-*) */
[data-bs-theme="dark"] .ac-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-card,
[data-bs-theme="dark"] .ac-zalo-gate { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-card-head { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-card .nh-ac-foot { border-top-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-head-divider { background: rgba(255, 255, 255, 0.12) !important; }
[data-bs-theme="dark"] .ac-hour-box { background: #2e3a4b !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-hour-box .ac-hm-sep { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .ac-hm-pick { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-hm-pick:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; }
[data-bs-theme="dark"] .ac-hm-pick.is-open { background: rgba(var(--primary-rgb, 99, 102, 241), 0.22) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-hm-caret { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-hm-menu { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-hm-opt { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-hm-opt:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-hm-opt.is-active { color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-chip { background: rgba(var(--primary-rgb, 99, 102, 241), 0.12) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-chip:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.18) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .ac-cat-chip-value { color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-chip-menu { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-cat-opt { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-cat-opt:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-opt.is-active { color: #c4b5fd !important; }
[data-bs-theme="dark"] .ac-cat-opt-count { background: #1b2433 !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-cat-opt:hover .ac-cat-opt-count,
[data-bs-theme="dark"] .ac-cat-opt.is-active .ac-cat-opt-count { background: rgba(var(--primary-rgb, 99, 102, 241), 0.2) !important; color: #a5b4fc !important; }
[data-bs-theme="dark"] .ac-hbtn { background: #2e3a4b !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #cbd5e1 !important; }
[data-bs-theme="dark"] .ac-hbtn:hover { background: #2d3b52 !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .ac-hbtn.is-open { background: rgba(var(--primary-rgb, 99, 102, 241), 0.14) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.5) !important; }
[data-bs-theme="dark"] .ac-hbtn > i { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-hbtn.is-open > i { color: #a5b4fc !important; }
[data-bs-theme="dark"] .ac-hbtn-menu { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-filter-opt { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-filter-opt:hover { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; }
[data-bs-theme="dark"] .ac-search { background: #2e3a4b !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-search:focus-within { border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.5) !important; }
[data-bs-theme="dark"] .ac-search-ico { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-search:focus-within .ac-search-ico { color: #a5b4fc !important; }
[data-bs-theme="dark"] .ac-search-input { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-search-input::placeholder { color: #64748b !important; }
[data-bs-theme="dark"] .ac-btn-danger { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .ac-btn-danger:not(:disabled):hover { background: rgba(220, 38, 38, 0.28) !important; }
[data-bs-theme="dark"] .ac-stats-grp { background: #2e3a4b !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-stat-item { color: #e2e8f0 !important; border-right-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .ac-stat-item strong { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-zalo-gate-title { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-zalo-gate-desc,
[data-bs-theme="dark"] .ac-zalo-countdown { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-zalo-countdown strong { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-zalo-gate-icon { background: rgba(0, 104, 255, 0.18) !important; }
[data-bs-theme="dark"] .ac-zalo-gate-btn-ghost { color: #cbd5e1 !important; border-color: rgba(255, 255, 255, 0.12) !important; }
[data-bs-theme="dark"] .ac-zalo-gate-btn-ghost:hover { background: #2e3a4b !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .ac-zalo-code-box { background: rgba(0, 104, 255, 0.12) !important; border-color: rgba(0, 104, 255, 0.45) !important; }
[data-bs-theme="dark"] .ac-zalo-code-box:hover { background: rgba(0, 104, 255, 0.2) !important; }
[data-bs-theme="dark"] .ac-grid-empty,
[data-bs-theme="dark"] .ac-grid-empty p { color: #94a3b8 !important; }
[data-bs-theme="dark"] .ac-grid-empty i { color: #475569 !important; }
[data-bs-theme="dark"] .ac-aggrid .ac-cell-id { color: #e2e8f0 !important; }
/* ===== HỖ TRỢ (sup-*) — dark mode (redesign) ===== */
[data-bs-theme="dark"] .sup-card {
  background: #232e3d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
[data-bs-theme="dark"] .sup-card:hover {
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4) !important;
}
[data-bs-theme="dark"] .sup-section-title,
[data-bs-theme="dark"] .sup-card-name { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .sup-section-meta,
[data-bs-theme="dark"] .sup-card-desc { color: #94a3b8 !important; }
/* Hero giữ gradient sáng (brand) — chỉ giảm bóng; stat-chip glass đậm hơn */
[data-bs-theme="dark"] .sup-hero { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important; }
[data-bs-theme="dark"] .sup-stat {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
/* Banner FB — dark: nền tím giảm chói (đồng bộ tông tím app), bóng đen; CTA chữ tím đậm */
[data-bs-theme="dark"] .sup-banner {
  background: linear-gradient(120deg, #4338ca 0%, #6d28d9 100%) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important;
}
[data-bs-theme="dark"] .sup-banner:hover { box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55) !important; }
[data-bs-theme="dark"] .sup-banner-cta { color: #5b21b6 !important; }
/* Banner Zalo — dark: nền indigo tối, card tối, chữ/icon tím sáng */
[data-bs-theme="dark"] .sup-zbanner {
  background: linear-gradient(135deg, #221d3f 0%, #2a2356 60%, #322a66 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42) !important;
}
[data-bs-theme="dark"] .sup-zbanner::before { opacity: 0.25 !important; }
[data-bs-theme="dark"] .sup-zbanner-title { color: #e8e6fc !important; }
[data-bs-theme="dark"] .sup-zbanner-title strong { color: #a78bfa !important; }
[data-bs-theme="dark"] .sup-zfeat {
  background: #251f40 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
[data-bs-theme="dark"] .sup-zfeat > i {
  background: rgba(124, 58, 237, 0.22) !important;
  color: #c4b5fd !important;
}
[data-bs-theme="dark"] .sup-zfeat-t { color: #e8e6fc !important; }
[data-bs-theme="dark"] .sup-zfeat-d { color: #94a3b8 !important; }
[data-bs-theme="dark"] .sup-zbanner-foot {
  color: #cbd5e1 !important;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
}
[data-bs-theme="dark"] .sup-zbanner-foot i { color: #a78bfa !important; }
/* Icon chip card */
[data-bs-theme="dark"] .sup-card-zalo .sup-card-icon { background: rgba(59, 130, 246, 0.16) !important; }
[data-bs-theme="dark"] .sup-card-admin-bill .sup-card-icon { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .sup-card-admin-dev .sup-card-icon { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; }
/* Badge + CTA */
[data-bs-theme="dark"] .sup-card-badge { background: rgba(var(--primary-rgb, 99, 102, 241), 0.16) !important; color: #a5b4fc !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3) !important; }
[data-bs-theme="dark"] .sup-card-cta { color: #a5b4fc !important; }
[data-bs-theme="dark"] .sup-card-admin-bill .sup-card-cta-pill { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .sup-card-admin-dev .sup-card-cta-pill { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .sup-card-admin-bill:hover .sup-card-cta-pill { background: rgba(245, 158, 11, 0.24) !important; }
[data-bs-theme="dark"] .sup-card-admin-dev:hover .sup-card-cta-pill { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.24) !important; }
/* Tags */
[data-bs-theme="dark"] .sup-tag-amber { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .sup-tag-violet { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; }
/* Tip */
[data-bs-theme="dark"] .sup-tip { background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.3) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .sup-tip i { color: #fbbf24 !important; }
[data-bs-theme="dark"] .sup-tip a { color: #fbbf24 !important; }
/* CÀI ĐẶT / ZALO (st-*) */
[data-bs-theme="dark"] .st-card,
[data-bs-theme="dark"] .st-action-bar { background: #232e3d !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .st-card:hover { border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.32) !important; }
[data-bs-theme="dark"] .st-card-head { background: #2e3a4b !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .st-card-title,
[data-bs-theme="dark"] .st-card b,
[data-bs-theme="dark"] .st-card span,
[data-bs-theme="dark"] .st-zalo-step { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .st-card-desc,
[data-bs-theme="dark"] .st-zalo-desc { color: #94a3b8 !important; }
[data-bs-theme="dark"] .st-card-head-icon-zalo { background: rgba(59, 130, 246, 0.16) !important; }
[data-bs-theme="dark"] .st-card-head-icon-purple { background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.16) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .st-zalo-status-checking { background: #1b2433 !important; color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="dark"] .st-zalo-status-connected { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .st-zalo-status-pending { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.3) !important; }
[data-bs-theme="dark"] .st-skel-bar { background: linear-gradient(90deg, #1b2433 0%, #2e3a4b 50%, #1b2433 100%) !important; background-size: 200% 100% !important; }
[data-bs-theme="dark"] .st-zalo-code-box { background: rgba(var(--primary-rgb, 99, 102, 241), 0.1) !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .st-zalo-code { color: #a5b4fc !important; }
[data-bs-theme="dark"] .st-zalo-copy { background: #2e3a4b !important; color: #a5b4fc !important; border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4) !important; }
[data-bs-theme="dark"] .st-zalo-copy:hover { background: var(--primary-start, #6366f1) !important; color: #fff !important; }
[data-bs-theme="dark"] .st-zalo-expire { color: #fcd34d !important; }
[data-bs-theme="dark"] .st-zalo-connected { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.3) !important; }
[data-bs-theme="dark"] .st-zalo-connected-name { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .st-zalo-connected-sub { color: #34d399 !important; }
[data-bs-theme="dark"] .st-btn-danger,
[data-bs-theme="dark"] .st-btn-outline-danger { background: rgba(220, 38, 38, 0.18) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.4) !important; }
[data-bs-theme="dark"] .st-btn-danger:hover,
[data-bs-theme="dark"] .st-btn-outline-danger:hover { background: rgba(220, 38, 38, 0.28) !important; }

/* ===== Dark override — nút trong card feature (ads/bm/page/via) =====
   Đã gộp & dedupe so với các rule [style*=...] toàn cục có sẵn:
     • .textarea-copy-btn  (inline background: #f8f9fa)  → đã phủ ở rule global
       [style*="background: #f8f9fa"] (→ #232e3d + border rgba(255,255,255,.08)).
     • .textarea-copy-btn  (inline color: #6c757d)       → đã phủ ở rule global
       [style*="color: #6c757d"] (→ #94a3b8).
     • ads-add-the icon "DS Thẻ" (inline color: #666)    → đã phủ ở rule global
       [style*="color: #666"] (→ #94a3b8).
   Chỉ còn 1 phần tử chưa có rule nào bắt → thêm bên dưới (GIỮ accent border/color). */

/* bm-tao-tkqc — nút "Set" cấu hình sau khi tạo TKQC (inline background: #fff);
   chỉ tối hoá nền, GIỮ NGUYÊN viền + chữ accent #0d6efd. */
[data-bs-theme="dark"] [data-feature="bm-tao-tkqc"] #btnAfterCreateSet {
  background: #2e3a4b !important;
}

/* ===== Lên Camp — Trình tạo chiến dịch chi tiết (wizard, redesign 2 cột) ===== */
.lcw-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: lcwOvIn .2s ease;
  background: rgba(15,23,42,.52);
  --lc-surface:#fff; --lc-surface2:#f5f7fb; --lc-surface3:#eef2f8; --lc-line:#e6eaf1; --lc-line2:#eef1f6;
  --lc-ink:#101828; --lc-ink2:#5b6672; --lc-ink3:#98a2b3;
  --lc-acc:var(--primary-end,#8b5cf6); --lc-acc2:var(--primary-start,#6366f1); --lc-accrgb:var(--primary-end-rgb,139,92,246);
  --lc-weak:#f3effe; --lc-accink:#6b34d6;
  --lc-ok:#16a34a; --lc-okw:#e7f6ec; --lc-danger:#dc2626; --lc-dangerw:#fdecec; }
[data-bs-theme="dark"] .lcw-overlay {
  background: rgba(2,6,14,.64);
  --lc-surface:#141b2b; --lc-surface2:#1b2333; --lc-surface3:#212b3d; --lc-line:#293345; --lc-line2:#222b3b;
  --lc-ink:#e9edf5; --lc-ink2:#98a2b8; --lc-ink3:#6b7689;
  --lc-weak:#241b46; --lc-accink:#c5b3ff;
  --lc-ok:#34d27f; --lc-okw:#12301f; --lc-danger:#f87171; --lc-dangerw:#3a1b1b; }

.lcw-modal { background: var(--lc-surface); border: 1px solid var(--lc-line); border-radius: 18px; width: 960px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px -18px rgba(16,24,40,.4); animation: lcwModalIn .3s cubic-bezier(.16,1,.3,1); }
[data-bs-theme="dark"] .lcw-modal { box-shadow: 0 26px 70px -18px rgba(0,0,0,.7); }

/* Header: badge + tiêu đề + phụ đề + nút đóng */
.lcw-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px; }
.lcw-badge { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--lc-acc), var(--lc-acc2)); box-shadow: 0 6px 16px -4px rgba(var(--lc-accrgb), .55); }
.lcw-badge i { font-size: 22px; }
.lcw-htxt { min-width: 0; }
.lcw-h-title { font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--lc-ink); }
.lcw-h-sub { margin-top: 2px; font-size: 12.5px; color: var(--lc-ink2); }
.lcw-close { margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--lc-line); background: var(--lc-surface); color: var(--lc-ink2); cursor: pointer; display: grid; place-items: center; font-size: 22px; line-height: 1; transition: all .15s; }
.lcw-close:hover { background: var(--lc-dangerw); color: var(--lc-danger); border-color: transparent; }

/* Stepper rail mảnh: chấm nối, dấu ✓ khi hoàn thành */
.lcw-steps { display: flex; align-items: flex-start; gap: 0; padding: 4px 26px 18px; overflow-x: auto; }
.lcw-step { flex: 1; min-width: 78px; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; text-align: center; }
.lcw-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; z-index: 1; position: relative;
  background: var(--lc-surface3); color: var(--lc-ink3); border: 2px solid var(--lc-line); transition: all .2s; }
.lcw-step-t { font-size: 11.5px; font-weight: 600; color: var(--lc-ink3); white-space: nowrap; transition: color .2s; }
.lcw-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--lc-line); z-index: 0; transition: background .3s; }
.lcw-step.is-done .lcw-step-n, .lcw-step.is-active .lcw-step-n { background: linear-gradient(135deg, var(--lc-acc), var(--lc-acc2)); border-color: transparent; color: #fff; }
.lcw-step.is-active .lcw-step-n { background: var(--lc-surface); border-color: var(--lc-acc); color: var(--lc-acc); box-shadow: 0 0 0 4px var(--lc-weak); }
.lcw-step.is-done::after { background: var(--lc-acc); }
.lcw-step.is-active .lcw-step-t { color: var(--lc-accink); font-weight: 700; }
.lcw-step.is-done .lcw-step-t { color: var(--lc-ink2); }

/* Body + 2 cột (form trái · panel ngữ cảnh phải) */
.lcw-body { padding: 6px 26px 24px; overflow-y: auto; flex: 1; }
.lcw-stepwrap.lcw-anim { animation: lcwStepIn .25s ease; }
.lcw-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-ink3); margin: 2px 0 12px; }
.lcw-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.lcw-cols > div, .lcw-cols > aside { min-width: 0; }
.lcw-aside { position: sticky; top: 0; border: 1px solid var(--lc-line); border-radius: 12px; background: var(--lc-surface2); padding: 15px; display: flex; flex-direction: column; gap: 14px; }
.lcw-aside .lcw-eyebrow { margin: 0; }

.lcw-label { font-weight: 600; font-size: 13px; color: var(--lc-ink); margin-bottom: 7px; }
.lcw-label .req { color: var(--lc-danger); }
.lcw-hint { font-size: 12px; color: var(--lc-ink3); margin-top: 7px; line-height: 1.5; }
.lcw-hint-inline { color: var(--lc-ink3); font-weight: 400; font-size: 10.5px; }
.lcw-input { width: 100%; border: 1px solid var(--lc-line); background: var(--lc-surface); border-radius: 9px; padding: 10px 12px; font-size: 14px; color: var(--lc-ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.lcw-input::placeholder { color: var(--lc-ink3); }
.lcw-input:focus { border-color: var(--lc-acc); box-shadow: 0 0 0 3px var(--lc-weak); }
.lcw-row, .lcw-two { display: flex; gap: 12px; }
.lcw-f { flex: 1; min-width: 0; }
.lcw-divider { border-top: 1px solid var(--lc-line); margin: 16px 0 12px; }
.lcw-mt { margin-top: 16px; }

/* Card mục tiêu (lưới 3 cột) */
.lcw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.lcw-card { position: relative; border: 1.5px solid var(--lc-line); border-radius: 12px; padding: 14px 12px 12px; cursor: pointer; background: var(--lc-surface); transition: transform .14s, border-color .14s, background .14s, box-shadow .14s; }
.lcw-card input { position: absolute; opacity: 0; pointer-events: none; }
.lcw-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lc-acc) 45%, var(--lc-line)); box-shadow: 0 10px 22px -12px rgba(var(--lc-accrgb), .5); }
.lcw-card.is-sel { border-color: var(--lc-acc); background: var(--lc-weak); }
.lcw-card-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 9px; color: #fff; }
.lcw-card-ic i { font-size: 20px; }
.lcw-card-t { font-weight: 700; font-size: 13.5px; color: var(--lc-ink); }
.lcw-card-d { font-size: 11.5px; color: var(--lc-ink2); margin-top: 3px; line-height: 1.4; }
.lcw-card.is-sel::after { content: "✓"; position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; background: var(--lc-acc); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(var(--lc-accrgb), .4); }

/* Kết quả nhận về — lưới 3 cột giống card mục tiêu, có icon */
.lcw-dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.lcw-dcard { position: relative; border: 1.5px solid var(--lc-line); border-radius: 12px; padding: 14px 12px 12px; cursor: pointer; background: var(--lc-surface); transition: transform .14s, border-color .14s, background .14s, box-shadow .14s; }
.lcw-dcard input { position: absolute; opacity: 0; pointer-events: none; }
.lcw-dcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lc-acc) 45%, var(--lc-line)); box-shadow: 0 10px 22px -12px rgba(var(--lc-accrgb), .5); }
.lcw-dcard.is-sel { border-color: var(--lc-acc); background: var(--lc-weak); }
.lcw-dic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 9px; background: var(--lc-surface3); color: var(--lc-ink2); transition: all .14s; }
.lcw-dcard.is-sel .lcw-dic { background: linear-gradient(140deg, var(--lc-acc), var(--lc-acc2)); color: #fff; }
.lcw-dic i { font-size: 19px; }
.lcw-dcard h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--lc-ink); }
.lcw-dcard p { margin: 3px 0 0; font-size: 11px; color: var(--lc-ink2); line-height: 1.4; }
.lcw-dcard.is-sel::after { content: "✓"; position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; background: var(--lc-acc); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(var(--lc-accrgb), .4); }

/* Pill radio + chip */
.lcw-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lcw-opt { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--lc-line); background: var(--lc-surface); border-radius: 9px; padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--lc-ink2); transition: all .14s; }
.lcw-opt input { display: none; }
.lcw-opt i { font-size: 15px; }
.lcw-opt:hover { border-color: color-mix(in srgb, var(--lc-acc) 40%, var(--lc-line)); }
.lcw-opt.is-sel { border-color: var(--lc-acc); background: var(--lc-weak); color: var(--lc-accink); }
.lcw-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.lcw-chip { border: 1px solid var(--lc-line); background: var(--lc-surface); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; color: var(--lc-ink2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .14s; }
.lcw-chip input { display: none; }
.lcw-chip:hover { border-color: color-mix(in srgb, var(--lc-acc) 40%, var(--lc-line)); }
.lcw-chip.is-sel { border-color: var(--lc-acc); background: var(--lc-weak); color: var(--lc-accink); }
.lcw-chip-sm { padding: 4px 10px; font-size: 11px; }
.lcw-chip-plat { padding: 7px 13px; font-weight: 500; }
.lcw-chip-plat i { font-size: 15px; }
.lcw-chip-ex { background: var(--lc-dangerw); border-color: color-mix(in srgb, var(--lc-danger) 28%, var(--lc-line)); color: var(--lc-danger); }
.lcw-int-rm, .lcw-ex-rm { cursor: pointer; opacity: .6; }
.lcw-int-rm:hover, .lcw-ex-rm:hover { opacity: 1; }
.lcw-plat { margin-top: 8px; }
.lcw-pos { margin: 6px 0 0 12px; }

/* Upload ảnh */
.lcw-upload { display: block; border: 1.5px dashed color-mix(in srgb, var(--lc-acc) 30%, var(--lc-line)); border-radius: 11px; padding: 16px; text-align: center; cursor: pointer; color: var(--lc-ink2); font-size: 13px; transition: all .15s; }
.lcw-upload:hover { border-color: var(--lc-acc); background: var(--lc-weak); }
.lcw-upload i { font-size: 20px; }
.lcw-img-prev { max-height: 120px; border-radius: 8px; }

/* Ô tìm + kết quả (sở thích) */
.lcw-searchbox { display: flex; align-items: center; gap: 9px; border: 1px solid var(--lc-line); background: var(--lc-surface); border-radius: 9px; padding: 0 13px; transition: border-color .15s, box-shadow .15s; }
.lcw-searchbox:focus-within { border-color: var(--lc-acc); box-shadow: 0 0 0 3px var(--lc-weak); }
.lcw-searchbox i { color: var(--lc-ink3); flex-shrink: 0; }
.lcw-searchbox .lcw-input { border: none; background: none; padding: 10px 0; box-shadow: none; }
.lcw-search-res { border: 1px solid var(--lc-line); border-radius: 9px; margin-top: 6px; max-height: 160px; overflow-y: auto; }
.lcw-search-res:empty { display: none; }
.lcw-search-item { padding: 9px 12px; font-size: 13px; color: var(--lc-ink); cursor: pointer; }
.lcw-search-item:hover { background: var(--lc-weak); }
.lcw-search-loading { padding: 9px 12px; font-size: 12px; color: var(--lc-ink3); }

/* Ô tiền + selectlike (ngân sách) */
.lcw-money { display: flex; align-items: center; border: 1px solid var(--lc-line); border-radius: 9px; background: var(--lc-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.lcw-money:focus-within { border-color: var(--lc-acc); box-shadow: 0 0 0 3px var(--lc-weak); }
.lcw-money > span { align-self: stretch; display: flex; align-items: center; padding: 0 13px; color: var(--lc-ink3); font-weight: 700; font-size: 14px; background: var(--lc-surface2); border-right: 1px solid var(--lc-line); }
.lcw-money .lcw-input { border: none; background: none; box-shadow: none; }

/* Tóm tắt / ước tính (panel phải) */
.lcw-meter { background: var(--lc-surface); border: 1px solid var(--lc-line); border-radius: 10px; padding: 12px; }
.lcw-meter-row { display: flex; align-items: baseline; justify-content: space-between; }
.lcw-meter-row b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--lc-ink); font-variant-numeric: tabular-nums; }
.lcw-meter-row small { font-size: 11px; color: var(--lc-ink3); }
.lcw-bar { height: 7px; border-radius: 99px; background: var(--lc-surface3); margin-top: 10px; overflow: hidden; }
.lcw-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lc-acc), var(--lc-acc2)); }
.lcw-sumline { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 0; border-top: 1px dashed var(--lc-line); }
.lcw-sumline:first-child { border-top: none; }
.lcw-sumline span { color: var(--lc-ink3); }
.lcw-sumline b { font-weight: 600; color: var(--lc-ink); text-align: right; word-break: break-word; }

/* Cây phân cấp tên */
.lcw-tree { display: flex; flex-direction: column; gap: 9px; }
.lcw-tnode { display: flex; align-items: center; gap: 11px; border: 1px solid var(--lc-line); border-radius: 11px; background: var(--lc-surface); padding: 9px 11px; }
.lcw-tnode.lv1 { margin-left: 20px; }
.lcw-tnode.lv2 { margin-left: 40px; }
.lcw-tic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: linear-gradient(140deg, var(--lc-acc), var(--lc-acc2)); }
.lcw-tnode b { display: block; font-size: 12.5px; font-weight: 600; color: var(--lc-ink); }
.lcw-tnode small { display: block; font-size: 11px; color: var(--lc-ink2); margin-top: 1px; }

/* Xem trước quảng cáo (panel phải bước Trang&Bài / Review) */
.lcw-adprev { border: 1px solid var(--lc-line); border-radius: 11px; background: var(--lc-surface); overflow: hidden; }
.lcw-adhead { display: flex; align-items: center; gap: 9px; padding: 10px 11px; }
.lcw-adav { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: linear-gradient(135deg, #dfe6f2, #c9d5ea); display: grid; place-items: center; color: #8a99b5; font-weight: 700; font-size: 12px; }
.lcw-adhead b { font-size: 12.5px; color: var(--lc-ink); }
.lcw-adhead small { display: block; color: var(--lc-ink3); font-size: 10.5px; }
.lcw-adtxt { padding: 0 11px 9px; font-size: 12px; color: var(--lc-ink); line-height: 1.5; }
.lcw-adimg { height: 150px; object-fit: cover; width: 100%; display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--lc-acc) 22%, #cbd6ea), color-mix(in srgb, var(--lc-acc) 42%, #8fa4cf)); }
.lcw-adimg-ph { height: 150px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--lc-acc) 22%, #cbd6ea), color-mix(in srgb, var(--lc-acc) 42%, #8fa4cf)); }
.lcw-adimg-ph i { font-size: 34px; opacity: .85; }
.lcw-adcta { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; background: var(--lc-surface3); }
.lcw-adcta small { color: var(--lc-ink2); font-size: 11px; }
.lcw-adcta span { background: var(--lc-surface); border: 1px solid var(--lc-line); color: var(--lc-ink); font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 7px; }

/* Review — nhóm tóm tắt có icon */
.lcw-review { display: flex; flex-direction: column; gap: 12px; }
.lcw-revgroup { border: 1px solid var(--lc-line); border-radius: 12px; background: var(--lc-surface); padding: 2px 14px 9px; }
.lcw-revhead { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lc-accink); padding: 11px 0 9px; border-bottom: 1px solid var(--lc-line2); margin-bottom: 2px; }
.lcw-revhead i { font-size: 15px; color: var(--lc-acc); }
.lcw-rev-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12.5px; border-top: 1px dashed var(--lc-line2); }
.lcw-rev-row:first-of-type { border-top: none; }
.lcw-rev-k { color: var(--lc-ink3); flex-shrink: 0; }
.lcw-rev-v { color: var(--lc-ink); font-weight: 600; text-align: right; word-break: break-word; }

/* Bài viết (chọn post) */
.lcw-posts { display: flex; flex-direction: column; gap: 9px; max-height: 320px; overflow-y: auto; margin-top: 4px; }
.lcw-post { display: flex; gap: 11px; border: 1.5px solid var(--lc-line); border-radius: 11px; padding: 9px; cursor: pointer; background: var(--lc-surface); transition: all .14s; }
.lcw-post:hover { border-color: color-mix(in srgb, var(--lc-acc) 40%, var(--lc-line)); }
.lcw-post.is-sel { border-color: var(--lc-acc); background: var(--lc-weak); }
.lcw-post-img { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.lcw-post-noimg { display: grid; place-items: center; background: var(--lc-surface3); color: var(--lc-ink3); font-size: 20px; }
.lcw-post-body { min-width: 0; flex: 1; }
.lcw-post-msg { font-size: 12.5px; color: var(--lc-ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcw-post-stats { display: flex; gap: 13px; margin-top: 6px; font-size: 11.5px; color: var(--lc-ink3); }
.lcw-post-stats i { margin-right: 4px; }

/* Sub-label + nút nhỏ + gợi ý ± */
.lcw-sublabel { font-size: 12px; font-weight: 600; color: var(--lc-ink2); margin: 11px 0 6px; }
.lcw-sublabel-row { display: flex; align-items: center; justify-content: space-between; }
.lcw-mini-btn { border: none; background: none; color: var(--lc-acc); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.lcw-mini-btn:hover { text-decoration: underline; }
.lcw-mini-btn-danger { color: var(--lc-danger); }
.lcw-airow { display: flex; gap: 8px; align-items: stretch; }
.lcw-airow .lcw-input { flex: 1; }
.lcw-airow .lcw-btn { flex-shrink: 0; white-space: nowrap; }
.lcw-sug { display: inline-flex; align-items: center; gap: 5px; background: var(--lc-surface); border: 1px solid var(--lc-line); border-radius: 999px; padding: 4px 5px 4px 12px; font-size: 12.5px; color: var(--lc-ink); cursor: default; }
.lcw-sug:hover { border-color: color-mix(in srgb, var(--lc-acc) 40%, var(--lc-line)); }
.lcw-sug-lbl { cursor: default; }
.lcw-sug-inc, .lcw-sug-exc { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; cursor: pointer; transition: all .13s; }
.lcw-sug-inc { background: var(--lc-okw); color: var(--lc-ok); }
.lcw-sug-inc:hover { background: var(--lc-ok); color: #fff; }
.lcw-sug-exc { background: var(--lc-dangerw); color: var(--lc-danger); }
.lcw-sug-exc:hover { background: var(--lc-danger); color: #fff; }
.lcw-ind { background: var(--lc-surface2); }
.lcw-ind:hover { border-color: color-mix(in srgb, var(--lc-acc) 40%, var(--lc-line)); }

/* Footer */
.lcw-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--lc-line); background: var(--lc-surface); }
.lcw-foot-spacer, .lcw-spacer { flex: 1; }
.lcw-fprog { font-size: 12px; color: var(--lc-ink3); font-weight: 600; }
.lcw-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lc-line); background: var(--lc-surface); color: var(--lc-ink2); border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.lcw-btn i { font-size: 16px; }
.lcw-btn:hover { color: var(--lc-ink); background: var(--lc-surface2); }
.lcw-btn:active { transform: scale(.97); }
.lcw-btn-ghost { border-color: transparent; background: transparent; }
.lcw-btn-primary { border-color: transparent; color: #fff; padding: 10px 24px; background: linear-gradient(135deg, var(--lc-acc), var(--lc-acc2)); box-shadow: 0 8px 18px -6px rgba(var(--lc-accrgb), .55); }
.lcw-btn-primary:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.lcw-btn-primary:active { transform: translateY(0) scale(.97); }
.lcw-btn-sm { padding: 7px 12px; font-size: 13px; }

/* Lỗi inline */
.lcw-err { display: flex; align-items: center; gap: 8px; margin: 0 22px; padding: 9px 14px; background: var(--lc-dangerw); border: 1px solid color-mix(in srgb, var(--lc-danger) 32%, transparent); border-radius: 10px; color: var(--lc-danger); font-size: 13px; font-weight: 600; animation: lcwErrIn .18s ease; }
.lcw-err i { font-size: 16px; flex-shrink: 0; }

@keyframes lcwOvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lcwModalIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lcwStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lcwErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lcw-overlay, .lcw-modal, .lcw-stepwrap.lcw-anim, .lcw-err { animation: none; } }
@media (max-width: 820px) {
  .lcw-cols { grid-template-columns: 1fr; }
  .lcw-aside { position: static; }
  .lcw-grid, .lcw-dgrid { grid-template-columns: repeat(2, 1fr); }
}

/* Toggle Cơ bản / Chi tiết — viền rõ để nút chưa chọn (trắng) không bị hoà vào nền */
.lc-variant-toggle .btn-check:checked + .btn { background: var(--primary-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)); border-color: #7c6cf0; color: #fff; box-shadow: none; }
.lc-variant-toggle .btn-check:not(:checked) + .btn { border: 1.5px solid #cbd5e1; background: #f8fafc; color: #475569; }
.lc-variant-toggle .btn-check:not(:checked) + .btn:hover { background: #eef2f7; border-color: #94a3b8; }
[data-bs-theme="dark"] .lc-variant-toggle .btn-check:not(:checked) + .btn { border-color: #475569; background: #1e293b; color: #cbd5e1; }
[data-bs-theme="dark"] .lc-variant-toggle .btn-check:not(:checked) + .btn:hover { background: #273449; border-color: #64748b; }

/* Segmented "Chế độ đặt tên" — Tạo Page: nút chưa chọn plain, hover chỉ hiện viền tím (không fill để chữ luôn đọc được) */
.tp-seg .btn-check:checked + .btn { background: var(--primary-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)); border-color: #7c6cf0; color: #fff; box-shadow: none; }
.tp-seg .btn-check:not(:checked) + .btn { border: 1.5px solid #e2e8f0; background: transparent; color: #475569; }
.tp-seg .btn-check:not(:checked) + .btn:hover { background: transparent; border-color: #6366f1; color: #6366f1; }
[data-bs-theme="dark"] .tp-seg .btn-check:not(:checked) + .btn { border-color: #334155; background: transparent; color: #cbd5e1; }
[data-bs-theme="dark"] .tp-seg .btn-check:not(:checked) + .btn:hover { border-color: #818cf8; color: #a5b4fc; }

/* ===== Đồng bộ BM — popup tiến trình (light, hợp giao diện) ===== */
.bms-log {
  height: 240px;
  overflow-y: auto;
  background: var(--bg-body, #f8fafc);
  border: 1px solid var(--border-light, rgba(0, 0, 0, 0.05));
  border-radius: var(--radius-md, 10px);
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary, #64748b);
  word-break: break-word;
}
.bms-line { padding: 1px 0; }
.bms-line .bms-time { color: var(--text-muted, #94a3b8); margin-right: 4px; }
.bms-line.is-ok { color: #047857; }
.bms-line.is-err { color: #dc2626; }
.bms-line.is-warn { color: #b45309; }
.bms-line.is-run { color: var(--text-secondary, #64748b); }
.bms-line.is-done { color: #7c3aed; font-weight: 600; }

[data-bs-theme="dark"] .bms-log { background: #1b2433; border-color: rgba(255, 255, 255, 0.08); color: #cbd5e1; }
[data-bs-theme="dark"] .bms-line.is-ok { color: #34d399; }
[data-bs-theme="dark"] .bms-line.is-err { color: #f87171; }
[data-bs-theme="dark"] .bms-line.is-warn { color: #fbbf24; }
[data-bs-theme="dark"] .bms-line.is-run { color: #cbd5e1; }
[data-bs-theme="dark"] .bms-line.is-done { color: #a78bfa; }

/* ===== Đổi thông tin Page — mỗi mục là 1 HỘP VIỀN riêng, ô nhập nằm TRONG hộp
   và ngăn bằng đường kẻ (đúng khuôn thẻ chức năng lớn bên ngoài). ===== */
.cpi-item {
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px;
  background: #fff; margin-bottom: 8px; overflow: hidden;
}
.cpi-item:last-child { margin-bottom: 0; }
.cpi-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; margin: 0; cursor: pointer;
}
.cpi-row .form-check-input {
  width: 34px; height: 18px; margin: 0; flex-shrink: 0; cursor: pointer;
}
.cpi-head { display: flex; align-items: center; gap: 10px; margin: 0; }
.cpi-ic { color: #0ea5e9; font-size: 18px; flex-shrink: 0; }
.cpi-panel {
  padding: 10px 12px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
[data-bs-theme="dark"] .cpi-item { background: #262f3c; border-color: #2e3a4b; }
[data-bs-theme="dark"] .cpi-panel { border-top-color: #2e3a4b; }

/* Nút "Huỷ" liên kết Zalo/Telegram — pill đỏ nhạt bo tròn (mềm, đồng bộ nút danger).
   Tự khai báo đủ shape vì setting.html link style.css KHÔNG có ?v= (cache cũ không chắc có). */
.st-zalo-unlink-head {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.st-zalo-unlink-head:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
[data-bs-theme="dark"] .st-zalo-unlink-head {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.32);
}


/* ===== Nút hỗ trợ nổi ở màn đăng nhập/đăng ký ===== */
.au-sup { position: fixed; right: 22px; bottom: 22px; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.au-sup-fab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; border-radius: 50px; background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #06b6d4); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 8px 24px rgba(var(--primary-end-rgb, 139, 92, 246),.45); transition: transform .2s, box-shadow .2s; }
.au-sup-fab i { font-size: 20px; }
.au-sup-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--primary-end-rgb, 139, 92, 246),.55); }
.au-sup-panel { width: 290px; background: #0f172a; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px; box-shadow: 0 16px 44px rgba(0,0,0,.4); opacity: 0; transform: translateY(12px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: .2s; }
.au-sup.open .au-sup-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.au-sup-head { font-size: 15px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.au-sup-head i { color: #a5b4fc; }
.au-sup-desc { font-size: 12px; color: #94a3b8; margin: 6px 0 12px; line-height: 1.5; }
.au-sup-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); text-decoration: none; margin-bottom: 8px; transition: .15s; }
.au-sup-item:last-child { margin-bottom: 0; }
.au-sup-item:hover { background: rgba(var(--primary-end-rgb, 139, 92, 246),.15); border-color: rgba(var(--primary-end-rgb, 139, 92, 246),.4); }
.au-sup-item i { font-size: 22px; color: #38bdf8; flex: 0 0 auto; }
.au-sup-item b { display: block; font-size: 13px; color: #fff; font-weight: 700; }
.au-sup-item span { font-size: 11px; color: #94a3b8; }
@media (max-width: 640px) { .au-sup { right: 14px; bottom: 14px; } .au-sup-panel { width: min(290px, 86vw); } }

/* ===== Popup Khuyến mãi nạp tiền (mẫu 29 + aura xoay) ===== */
@property --dppAng { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.dpp-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2,6,23,.55); backdrop-filter: blur(3px); animation: dppFade .2s ease; }
@keyframes dppFade { from { opacity: 0; } to { opacity: 1; } }
.dpp-wrap { position: relative; animation: dppPop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes dppPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Vòng sáng gradient xoay mờ (aura nổi khối) */
.dpp-wrap::before {
  content: ""; position: absolute; inset: -6px; border-radius: 28px; z-index: 1;
  background: conic-gradient(from var(--dppAng), #7c3aed, #22d3ee, #ec4899, #f59e0b, #7c3aed);
  filter: blur(13px); opacity: .85; animation: dppSpin 5s linear infinite;
}
@keyframes dppSpin { to { --dppAng: 360deg; } }
.dpp-pop { position: relative; z-index: 2; width: 320px; max-width: 88vw; border-radius: 22px; overflow: hidden; background: #faf5ff; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.dpp-pop::before { content: ""; position: absolute; width: 180px; height: 180px; background: radial-gradient(circle, #c4b5fd, transparent 70%); top: -40px; left: -40px; }
.dpp-pop::after  { content: ""; position: absolute; width: 180px; height: 180px; background: radial-gradient(circle, #a5f3fc, transparent 70%); bottom: -40px; right: -40px; }
.dpp-body { position: relative; z-index: 2; padding: 26px 24px 22px; text-align: center; }
.dpp-ic { font-size: 36px; color: #7c3aed; line-height: 1; }
.dpp-body h2 { color: #4c1d95; font-size: 19px; margin: 6px 0 0; }
.dpp-big { background: linear-gradient(135deg,#7c3aed,#0891b2); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 42px; font-weight: 900; margin: 6px 0; line-height: 1.05; }
.dpp-body p { color: #6b7280; font-size: 13px; line-height: 1.55; margin: 0; }
.dpp-min { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 4px 12px; border-radius: 20px; background: rgba(124,58,237,.1); color: #7c3aed; font-size: 12px; font-weight: 700; }
.dpp-cta { display: block; width: 100%; border: none; border-radius: 12px; padding: 12px; font-size: 14.5px; font-weight: 800; color: #fff; cursor: pointer; margin-top: 16px; background: linear-gradient(135deg,#7c3aed,#0891b2); transition: filter .15s ease; }
.dpp-cta:hover { filter: brightness(1.07); }
.dpp-skip { display: block; width: 100%; text-align: center; background: none; border: none; font-size: 12.5px; color: #a78bfa; cursor: pointer; margin-top: 10px; }
.dpp-skip:hover { color: #7c3aed; }
.dpp-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; border: none; background: #ede9fe; color: #7c3aed; display: grid; place-items: center; cursor: pointer; font-size: 15px; }
.dpp-close:hover { background: #ddd6fe; }
@media (prefers-reduced-motion: reduce) { .dpp-wrap::before { animation: none; } }
/* Dark mode: giữ popup sáng (thiết kế mẫu 29 nền sáng) — chỉ chỉnh overlay đậm hơn chút */
[data-bs-theme="dark"] .dpp-overlay { background: rgba(0,0,0,.66); }

/* Banner KM ở tab Nạp tiền — viền gradient xoay nhẹ (đồng bộ mẫu 29) */
.dpb { display: flex; flex-shrink: 0; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; margin-bottom: 18px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(6,182,212,.08)); border: 1px solid rgba(124,58,237,.22); }
.dpb::before { content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px; background: conic-gradient(from var(--dppAng), #7c3aed, #22d3ee, #ec4899, #7c3aed); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: dppSpin 5s linear infinite; opacity: .7; pointer-events: none; }
.dpb-ic { font-size: 26px; color: #7c3aed; flex: 0 0 auto; line-height: 1; }
.dpb-main { flex: 1 1 auto; min-width: 0; }
.dpb-title { font-weight: 800; color: #4c1d95; font-size: 15px; }
.dpb-desc { font-size: 12.5px; color: #6b7280; margin-top: 2px; line-height: 1.4; }
.dpb-min { font-size: 11.5px; font-weight: 700; color: #7c3aed; margin-top: 4px; }
[data-bs-theme="dark"] .dpb-min { color: #c4b5fd; }
.dpb-reward { flex: 0 0 auto; font-weight: 900; font-size: 22px; background: linear-gradient(135deg,#7c3aed,#0891b2); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
[data-bs-theme="dark"] .dpb { background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.12)); border-color: rgba(var(--primary-end-rgb, 139, 92, 246),.4); }
[data-bs-theme="dark"] .dpb-title { color: #c4b5fd; }
[data-bs-theme="dark"] .dpb-desc { color: #94a3b8; }
[data-bs-theme="dark"] .dpb-reward { background: linear-gradient(135deg,#a78bfa,#22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .dpb::before { animation: none; } }

/* ===== Hộp thư & Thống kê tin nhắn Page (page-inbox.js) ===== */
/* Messenger mode (F5 trên /messenger): ẩn grid Pages NGAY (msngr-mode set ở đầu <head>) để KHÔNG
   nháy grid trước khi inbox overlay mount. Nền trắng/tối cho tới khi inbox hiện. */
.msngr-mode #app[data="page"] .account-wrapper > *:not(.pmb-overlay) { visibility: hidden !important; }
.msngr-mode #app[data="page"] #adPanel { display: none !important; }
.msngr-mode #app[data="page"] .account-wrapper { background: #fff; }
[data-bs-theme="dark"].msngr-mode #app[data="page"] .account-wrapper { background: #1a212b; }
/* Mount ĐÈ KÍN .account-wrapper (không phải popup nổi) — z-index 100 để phủ cả #adPanel(10)+footer(20) */
.pmb-overlay { position: absolute; inset: 0; z-index: 100; background: #fff; animation: lcwOvIn .16s ease; }
.pmb-modal { background: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; animation: pmbSlideIn .24s cubic-bezier(.16,1,.3,1); }
@keyframes pmbSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Header */
.pmb-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; flex-shrink: 0; position: relative; z-index: 31; }
.pmb-title { font-weight: 700; font-size: 16px; color: #111827; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pmb-title i { color: var(--primary-start, #6366f1); font-size: 20px; }
.pmb-back { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; background: #fff; border-radius: 9px; padding: 7px 11px 7px 9px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; transition: all .15s; }
.pmb-back:hover { background: #f5f3ff; border-color: #c4b5fd; color: var(--primary-start, #6366f1); }
.pmb-back i { font-size: 17px; }
.pmb-pagesel { border: 1px solid #e2e8f0; border-radius: 9px; padding: 7px 11px; font-size: 13px; color: #334155; background: #fff; max-width: 220px; outline: none; }
.pmb-pagesel:focus { border-color: var(--primary-end, #8b5cf6); }
.pmb-tabs { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; }
.pmb-tab-btn { border: none; background: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; }
.pmb-tab-btn.on { background: #fff; color: var(--primary-start, #6366f1); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.pmb-head-sp { flex: 1; }
.pmb-icon { border: 1px solid #e2e8f0; background: #fff; width: 34px; height: 34px; border-radius: 9px; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; transition: all .15s; }
.pmb-icon:hover { background: #f8fafc; color: #334155; }
/* Nút Quay lại + icon chip (đồng bộ kiểu .arad-hd-ic / .bmp-hd-ic: chip vuông bo, nền tint nhạt + icon màu) */
.pmb-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: none; border-radius: 8px; background: #e0f2fe; color: #0369a1; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.pmb-back i { font-size: 16px; }
.pmb-back:hover { background: #bae6fd; }
.pmb-hd-ic { width: 34px; height: 34px; border-radius: 10px; background: #eef2ff; color: #6366f1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pmb-title .pmb-hd-ic i { color: inherit; font-size: 19px; }
.pmb-close:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
/* Body layout */
.pmb-body { flex: 1; min-height: 0; overflow: hidden; }
.pmb-tab-inbox { display: grid; grid-template-columns: 320px 1fr 268px; height: 100%; }
/* Cột danh sách */
.pmb-col-list { border-right: 1px solid #eef2f7; display: flex; flex-direction: column; min-height: 0; }
.pmb-list-top { padding: 11px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.pmb-search-box { display: flex; align-items: center; gap: 7px; background: #f1f5f9; border-radius: 9px; padding: 8px 11px; }
.pmb-search-box i { color: #94a3b8; }
.pmb-search { border: none; background: none; outline: none; font-size: 13px; color: #1e293b; width: 100%; }
.pmb-list-count { font-size: 11px; color: #94a3b8; font-weight: 600; }
.pmb-filters { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; flex-wrap: nowrap; }
.pmb-chip { border: 1px solid #e2e8f0; background: #fff; border-radius: 20px; padding: 4px 12px; font-size: 12px; color: #475569; cursor: pointer; white-space: nowrap; transition: all .15s; }
.pmb-chip:hover { border-color: #c4b5fd; }
.pmb-chip.on { background: #eef2ff; border-color: #818cf8; color: #4f46e5; font-weight: 600; }
/* Hàng lọc tràn ngang: ẩn scrollbar, hiện mũi tên trái/phải (fade gradient) khi còn cuộn được */
.pmb-filters-wrap { position: relative; }
.pmb-filters { scrollbar-width: none; }
.pmb-filters::-webkit-scrollbar { display: none; }
.pmb-filt-nav { position: absolute; top: 0; bottom: 8px; width: 30px; display: none; align-items: center; border: none; cursor: pointer; z-index: 3; color: #475569; font-size: 20px; padding: 0; }
.pmb-filt-nav:hover { color: #4f46e5; }
.pmb-filt-prev { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, 0)); }
.pmb-filt-next { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(270deg, #fff 55%, rgba(255, 255, 255, 0)); }
.pmb-filters-wrap.can-prev .pmb-filt-prev { display: inline-flex; }
.pmb-filters-wrap.can-next .pmb-filt-next { display: inline-flex; }
.pmb-conv-list { flex: 1; overflow-y: auto; min-height: 0; }
.pmb-conv { display: flex; gap: 10px; padding: 11px 12px; cursor: pointer; border-bottom: 1px solid #f5f7fa; transition: background .12s; }
.pmb-conv:hover { background: #f8fafc; }
.pmb-conv.active { background: #eff6ff; }
.pmb-conv-mid { flex: 1; min-width: 0; }
.pmb-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pmb-conv-name { font-weight: 600; font-size: 13.5px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmb-conv-time { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.pmb-conv-snip { font-size: 12.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pmb-conv-page { font-size: 11px; color: #94a3b8; margin-top: 3px; display: inline-flex; align-items: center; gap: 3px; }
.pmb-conv-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.pmb-conv-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.pmb-unread { background: #ef4444; color: #fff; border-radius: 20px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pmb-av { width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; }
.pmb-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pmb-av-sm { width: 36px; height: 36px; font-size: 13px; }
.pmb-av-lg { width: 64px; height: 64px; font-size: 22px; }
.pmb-tag { display: inline-block; border: 1px solid; border-radius: 20px; padding: 1px 8px; font-size: 10.5px; font-weight: 600; line-height: 1.5; }
.pmb-loadmore { padding: 10px 12px; text-align: center; }
.pmb-sentinel i { font-size: 20px; color: #94a3b8; }
/* Cột luồng tin nhắn */
.pmb-col-thread { display: flex; flex-direction: column; min-height: 0; background: #fbfcfe; }
.pmb-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; background: #fff; flex-shrink: 0; min-height: 60px; }
.pmb-thread-hi { flex: 1; min-width: 0; }
.pmb-thread-name { font-weight: 700; font-size: 14.5px; color: #1e293b; }
.pmb-thread-sub { font-size: 12px; color: #94a3b8; display: inline-flex; align-items: center; gap: 4px; }
.pmb-thread-open { color: #94a3b8; font-size: 18px; text-decoration: none; }
.pmb-thread-open:hover { color: var(--primary-start, #6366f1); }
.pmb-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
/* Kiểu Messenger: mỗi tin 1 HÀNG; khách có avatar bên trái (chỉ tin cuối cụm); tin mình bên phải. */
.pmb-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 100%; }
.pmb-msg.in { justify-content: flex-start; }
.pmb-msg.out { justify-content: flex-end; }
.pmb-msg.grp-last { margin-bottom: 9px; } /* dãn cách giữa các cụm */
.pmb-msg-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }
.pmb-msg-av.empty { background: none !important; } /* spacer giữ bubble thẳng hàng khi không có avatar */
.pmb-msg-av img { width: 100%; height: 100%; object-fit: cover; }
.pmb-bubble { padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; word-break: break-word; max-width: 68%; }
.pmb-msg.in .pmb-bubble { background: #f0f2f5; color: #1e293b; }
.pmb-msg.out .pmb-bubble { background: var(--primary-gradient, linear-gradient(135deg,#6366f1,#8b5cf6)); color: #fff; }
.pmb-msg-pend, .pmb-msg-err { font-size: 12px; align-self: flex-end; margin-bottom: 3px; }
.pmb-msg-txt { white-space: pre-wrap; }
.pmb-msg-img { max-width: 200px; max-height: 200px; border-radius: 10px; display: block; margin-top: 2px; }
.pmb-msg-file { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: underline; font-size: 13px; }
.pmb-msg-meta { font-size: 10.5px; color: #b0bac9; margin-top: 3px; padding: 0 4px; }
.pmb-msg-pend { color: #f59e0b; }
.pmb-msg-err { color: #ef4444; }
.pmb-seen { width: 16px; height: 16px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.06); flex-shrink: 0; }
.pmb-seen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmb-seen-row { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: 1px 2px 4px; }
.pmb-seen-t { font-size: 10.5px; color: #94a3b8; }
[data-bs-theme="dark"] .pmb-seen-t { color: #64748b; }
/* Composer */
.pmb-composer { border-top: 1px solid #eef2f7; background: #fff; padding: 8px 12px 10px; flex-shrink: 0; }
.pmb-noreply { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; font-size: 12px; padding: 6px 10px; border-radius: 8px; margin-bottom: 7px; }
.pmb-comp-tools { display: flex; gap: 3px; margin-bottom: 5px; }
.pmb-ct { border: none; background: none; width: 32px; height: 32px; border-radius: 8px; color: #64748b; cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.pmb-ct:hover { background: #f1f5f9; color: var(--primary-start, #6366f1); }
.pmb-comp-row { display: flex; align-items: flex-end; gap: 8px; }
.pmb-input { flex: 1; border: 1px solid #e2e8f0; border-radius: 12px; padding: 9px 13px; font-size: 13.5px; color: #1e293b; outline: none; resize: none; max-height: 120px; line-height: 1.4; font-family: inherit; }
.pmb-input:focus { border-color: var(--primary-end, #8b5cf6); box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246),.12); }
.pmb-send { border: none; background: var(--primary-gradient, linear-gradient(135deg,#6366f1,#8b5cf6)); color: #fff; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; }
.pmb-send:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--primary-rgb, 99, 102, 241),.4); }
.pmb-send:active { transform: scale(.95); }
/* Cột thông tin */
.pmb-col-info { border-left: 1px solid #eef2f7; overflow-y: auto; }
.pmb-info { padding: 16px 14px; }
.pmb-info-cust { text-align: center; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.pmb-av-lg { margin: 0 auto 9px; }
.pmb-info-name { font-weight: 700; font-size: 15px; color: #1e293b; }
.pmb-info-page { font-size: 12px; color: #94a3b8; margin-top: 2px; display: inline-flex; align-items: center; gap: 4px; }
.pmb-info-stat { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.pmb-info-sec { padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.pmb-info-lbl { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; }
.pmb-cur-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.pmb-muted { color: #94a3b8; font-size: 12px; }
.pmb-tagopts { display: flex; flex-wrap: wrap; gap: 6px; }
.pmb-tagopt { border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; color: #475569; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all .15s; }
.pmb-tagopt:hover { border-color: var(--tc,#c4b5fd); }
.pmb-tagopt.on { background: color-mix(in srgb, var(--tc,#6366f1) 12%, #fff); border-color: var(--tc,#6366f1); color: var(--tc,#4f46e5); font-weight: 600; }
.pmb-tagnew { border: 1px dashed #cbd5e1; background: none; border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--primary-start, #6366f1); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.pmb-tagnew:hover { border-color: var(--primary-end, #8b5cf6); background: #faf5ff; }
.pmb-note { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 11px; font-size: 13px; color: #1e293b; outline: none; resize: vertical; font-family: inherit; }
.pmb-note:focus { border-color: var(--primary-end, #8b5cf6); box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246),.1); }
/* Empty / loading */
.pmb-empty { padding: 20px; text-align: center; color: #94a3b8; font-size: 13px; }
.pmb-empty-big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; }
.pmb-empty-big i { font-size: 40px; opacity: .5; }
/* Chưa đăng nhập FB (trang /messenger) — phủ kín modal, canh giữa; nội dung dùng .fx-grid-empty* cho ĐỒNG BỘ với grid */
.pmb-nologin { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: #fff; }
[data-bs-theme="dark"] .pmb-nologin { background: #1e2530; }
.pmb-spin { animation: pmbSpin 1s linear infinite; display: inline-block; }
@keyframes pmbSpin { to { transform: rotate(360deg); } }
/* Popover (emoji / quick / tag) */
.pmb-pop { position: absolute; z-index: 5; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.2); padding: 8px; }
.pmb-pop-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 292px; max-height: 210px; overflow-y: auto; }
.pmb-emo { border: none; background: none; font-size: 20px; cursor: pointer; border-radius: 7px; padding: 4px; line-height: 1; }
.pmb-emo:hover { background: #f1f5f9; }
.pmb-pop-quick { width: 300px; }
.pmb-pop-hd { font-weight: 700; font-size: 13px; color: #334155; padding: 4px 6px 8px; }
.pmb-quick-list { max-height: 200px; overflow-y: auto; }
.pmb-quick-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.pmb-quick-item:hover { background: #f5f3ff; }
.pmb-quick-t { flex: 1; font-size: 13px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmb-quick-x { color: #cbd5e1; cursor: pointer; }
.pmb-quick-x:hover { color: #ef4444; }
.pmb-quick-add { border-top: 1px solid #f1f5f9; margin-top: 6px; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pmb-quick-title, .pmb-quick-text, .pmb-tag-name { border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit; resize: none; }
.pmb-quick-title:focus, .pmb-quick-text:focus, .pmb-tag-name:focus { border-color: var(--primary-end, #8b5cf6); }
.pmb-btn-primary { border: none; background: var(--primary-gradient, linear-gradient(135deg,#6366f1,#8b5cf6)); color: #fff; border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pmb-btn-primary:hover { filter: brightness(1.05); }
.pmb-btn-ghost { border: 1px solid #e2e8f0; background: #fff; border-radius: 9px; padding: 7px 14px; font-size: 13px; color: #475569; cursor: pointer; }
.pmb-btn-ghost:hover { background: #f8fafc; border-color: #c4b5fd; }
.pmb-pop-tag { width: 230px; display: flex; flex-direction: column; gap: 8px; }
.pmb-tag-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.pmb-cdot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.pmb-cdot.on { border-color: #1e293b; box-shadow: 0 0 0 2px #fff inset; }
/* Bộ chọn Trang cho Messenger */
.pmb-picker-ov { position: absolute; inset: 0; z-index: 20; background: rgba(15,23,42,.35); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pmb-picker { background: #fff; border-radius: 16px; width: 560px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(15,23,42,.35); overflow: hidden; animation: pmbSlideIn .24s cubic-bezier(.16,1,.3,1); }
.pmb-picker-hd { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid #eef2f7; }
.pmb-picker-ic { width: 42px; height: 42px; border-radius: 12px; background: #f5f3ff; color: #8b5cf6; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.pmb-picker-hi { flex: 1; }
.pmb-picker-title { font-weight: 800; font-size: 16px; color: #1e293b; }
.pmb-picker-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; line-height: 1.45; }
.pmb-picker-x { flex-shrink: 0; }
.pmb-picker-tools { display: flex; align-items: center; gap: 8px; padding: 12px 20px; }
.pmb-picker-sb { flex: 1; }
.pmb-picker-search { border: none; background: none; outline: none; font-size: 13px; color: #1e293b; width: 100%; }
.pmb-picker-list { flex: 1; overflow-y: auto; padding: 0 12px; min-height: 120px; }
.pmb-pick { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.pmb-pick:hover { background: #f5f3ff; }
.pmb-pick-name { flex: 1; font-size: 13.5px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmb-pick input { width: 18px; height: 18px; accent-color: var(--primary-start, #6366f1); cursor: pointer; flex-shrink: 0; }
.pmb-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid #eef2f7; }
.pmb-picker-count { font-size: 13px; color: #64748b; font-weight: 600; }
.pmb-picker-save { padding: 9px 22px; font-size: 14px; }
[data-bs-theme="dark"] .pmb-picker { background: #1e2530; }
[data-bs-theme="dark"] .pmb-picker-hd, [data-bs-theme="dark"] .pmb-picker-foot { border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-picker-title { color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-pick:hover { background: #262f3c; }
[data-bs-theme="dark"] .pmb-pick-name, [data-bs-theme="dark"] .pmb-picker-search { color: #e5e9f0; }
/* Thống kê */
.pmb-tab-stats { height: 100%; overflow-y: auto; padding: 18px 22px; }
.pmb-stats-scope { font-size: 13px; color: #475569; margin-bottom: 14px; }
.pmb-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.pmb-kpi { border: 1px solid #eef2f7; border-radius: 13px; padding: 14px; display: flex; align-items: center; gap: 11px; background: #fff; }
.pmb-kpi-ic { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.pmb-kpi-val { font-size: 22px; font-weight: 800; color: #1e293b; line-height: 1; }
.pmb-kpi-lbl { font-size: 12px; color: #64748b; margin-top: 4px; }
.pmb-stats-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pmb-stats-card { border: 1px solid #eef2f7; border-radius: 13px; padding: 16px; }
.pmb-stats-h { font-weight: 700; font-size: 14px; color: #334155; margin-bottom: 13px; }
.pmb-bars { display: flex; flex-direction: column; gap: 9px; }
.pmb-bar-row { display: flex; align-items: center; gap: 10px; }
.pmb-bar-lbl { width: 120px; font-size: 12.5px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.pmb-bar-track { flex: 1; height: 9px; background: #f1f5f9; border-radius: 20px; overflow: hidden; }
.pmb-bar-fill { height: 100%; background: linear-gradient(90deg,var(--primary-start, #6366f1),var(--primary-end, #8b5cf6)); border-radius: 20px; }
.pmb-bar-val { width: 36px; text-align: right; font-size: 12.5px; font-weight: 700; color: #334155; }
.pmb-table-wrap { overflow-x: auto; }
.pmb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pmb-table th { text-align: left; color: #94a3b8; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.pmb-table td { padding: 7px 8px; border-bottom: 1px solid #f5f7fa; color: #334155; }
.pmb-table tr:last-child td { border-bottom: none; }
@media (max-width: 900px) {
  .pmb-tab-inbox { grid-template-columns: 1fr; }
  .pmb-col-info { display: none; }
  .pmb-kpis { grid-template-columns: repeat(2, 1fr); }
  .pmb-stats-2col { grid-template-columns: 1fr; }
}
/* Dark mode */
[data-bs-theme="dark"] .pmb-overlay { background: #1a212b; }
[data-bs-theme="dark"] .pmb-modal { background: #1e2530; }
[data-bs-theme="dark"] .pmb-back { background: #262f3c; border-color: #384354; color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-back:hover { background: #303b4a; color: #a5b4fc; }
[data-bs-theme="dark"] .pmb-head { border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-title { color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-pagesel { background: #262f3c; border-color: #384354; color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-tabs { background: #262f3c; }
[data-bs-theme="dark"] .pmb-tab-btn.on { background: #1e2530; color: #a5b4fc; }
[data-bs-theme="dark"] .pmb-icon { background: #262f3c; border-color: #384354; color: #94a3b8; }
[data-bs-theme="dark"] .pmb-icon:hover { background: #303b4a; }
[data-bs-theme="dark"] .pmb-back { background: #0e3a52; color: #7dd3fc; }
[data-bs-theme="dark"] .pmb-back:hover { background: #12496a; }
[data-bs-theme="dark"] .pmb-hd-ic { background: #262b45; color: #a5b4fc; }
[data-bs-theme="dark"] .pmb-col-list, [data-bs-theme="dark"] .pmb-col-info { border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-search-box { background: #262f3c; }
[data-bs-theme="dark"] .pmb-search { color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-chip { background: #262f3c; border-color: #384354; color: #94a3b8; }
[data-bs-theme="dark"] .pmb-chip.on { background: #312e81; border-color: var(--primary-start, #6366f1); color: #c7d2fe; }
[data-bs-theme="dark"] .pmb-filt-nav { color: #94a3b8; }
[data-bs-theme="dark"] .pmb-filt-nav:hover { color: #c7d2fe; }
[data-bs-theme="dark"] .pmb-filt-prev { background: linear-gradient(90deg, #1e2530 55%, rgba(30, 37, 48, 0)); }
[data-bs-theme="dark"] .pmb-filt-next { background: linear-gradient(270deg, #1e2530 55%, rgba(30, 37, 48, 0)); }
[data-bs-theme="dark"] .pmb-conv { border-color: #262f3c; }
[data-bs-theme="dark"] .pmb-conv:hover { background: #262f3c; }
[data-bs-theme="dark"] .pmb-conv.active { background: #23324a; }
[data-bs-theme="dark"] .pmb-conv-name, [data-bs-theme="dark"] .pmb-thread-name, [data-bs-theme="dark"] .pmb-info-name { color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-conv-snip { color: #94a3b8; }
[data-bs-theme="dark"] .pmb-col-thread { background: #1a212b; }
[data-bs-theme="dark"] .pmb-thread-head { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-msg.in .pmb-bubble { background: #262f3c; border-color: #333e4d; color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-composer { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-input { background: #262f3c; border-color: #384354; color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-ct:hover { background: #303b4a; }
[data-bs-theme="dark"] .pmb-info-sec, [data-bs-theme="dark"] .pmb-info-cust { border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-tagopt { background: #262f3c; border-color: #384354; color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-note { background: #262f3c; border-color: #384354; color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-pop, [data-bs-theme="dark"] .pmb-kpi, [data-bs-theme="dark"] .pmb-stats-card { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-emo:hover, [data-bs-theme="dark"] .pmb-quick-item:hover { background: #262f3c; }
[data-bs-theme="dark"] .pmb-quick-title, [data-bs-theme="dark"] .pmb-quick-text, [data-bs-theme="dark"] .pmb-tag-name { background: #262f3c; border-color: #384354; color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-btn-ghost { background: #262f3c; border-color: #384354; color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-kpi-val { color: #e5e9f0; }
[data-bs-theme="dark"] .pmb-stats-h { color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-bar-track { background: #262f3c; }
[data-bs-theme="dark"] .pmb-table th { border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-table td { border-color: #262f3c; color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-thread-sub, [data-bs-theme="dark"] .pmb-info-page, [data-bs-theme="dark"] .pmb-info-stat, [data-bs-theme="dark"] .pmb-list-count, [data-bs-theme="dark"] .pmb-conv-time, [data-bs-theme="dark"] .pmb-conv-page { color: #64748b; }
[data-bs-theme="dark"] .pmb-info-lbl { color: #94a3b8; }

/* ===== Bình luận (tab .pmb-tab-comments) — reuse .pmb-* cho bubble/avatar/composer, phần riêng bên dưới ===== */
.pmb-tab-comments { display: grid; grid-template-columns: 320px 1fr 268px; height: 100%; }
.pmb-snip-ic { font-size: 12px; color: #94a3b8; }
/* Thẻ bài viết ghim đầu luồng bình luận */
.pmb-post-card { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #eef2f7; border-radius: 12px; padding: 10px; margin: 0 0 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.pmb-post-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.pmb-post-noimg { display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-size: 20px; }
.pmb-post-body { min-width: 0; flex: 1; }
.pmb-post-lbl { font-size: 11px; font-weight: 700; color: var(--primary-start, #6366f1); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.pmb-post-txt { font-size: 13px; color: #334155; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmb-post-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--primary-start, #6366f1); text-decoration: none; margin-top: 4px; }
.pmb-post-link:hover { text-decoration: underline; }
/* Toggle chế độ trả lời (công khai / nhắn riêng) */
.pmb-mode { display: inline-flex; gap: 4px; background: #f1f5f9; border-radius: 8px; padding: 3px; margin-bottom: 8px; }
.pmb-mode-btn { border: none; background: none; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all .15s; }
.pmb-mode-btn.on { background: #fff; color: var(--primary-start, #6366f1); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
/* Hàng thao tác trên mỗi bình luận (hiện khi hover) */
.pmb-tab-comments .pmb-msg { position: relative; }
.pmb-cmt-acts { display: flex; gap: 2px; align-self: center; opacity: .5; transition: opacity .12s; }
.pmb-msg:hover .pmb-cmt-acts { opacity: 1; }
.pmb-cmt-act { width: 26px; height: 26px; border: none; border-radius: 50%; background: #f1f5f9; color: #64748b; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; }
.pmb-cmt-act:hover { background: #e2e8f0; color: #334155; }
.pmb-cmt-del:hover { background: #fee2e2; color: #dc2626; }
/* Chân bong bóng bình luận (đã ẩn / nhắn riêng / lượt thích) */
.pmb-cmt-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 11px; opacity: .9; }
.pmb-cmt-pvt, .pmb-cmt-likes { display: inline-flex; align-items: center; gap: 3px; }
.pmb-cmt-hidden { display: inline-flex; align-items: center; gap: 3px; background: #fef3c7; color: #b45309; padding: 1px 8px; border-radius: 10px; font-weight: 700; font-size: 10.5px; }
.pmb-cmt-pvt { color: var(--primary-end, #8b5cf6); }
.pmb-msg.out .pmb-cmt-foot { color: #e9e5ff; }
/* Loading + kết quả hiện NGAY tại bình luận đang thao tác */
.pmb-cmt-loading { display: inline-flex; align-items: center; gap: 3px; color: #d97706; font-weight: 600; }
.pmb-cmt-flash { display: inline-flex; align-items: center; gap: 3px; color: #16a34a; font-weight: 700; }
.pmb-msg.out .pmb-cmt-loading, .pmb-msg.out .pmb-cmt-flash { color: #fff; }
.pmb-cmt-act-load { pointer-events: none; }
/* Trạng thái ẩn: viền đứt cam + mờ nhẹ → thấy ngay khi ẩn/hiện thành công */
.pmb-bubble-hidden { opacity: .72; border: 1px dashed #f59e0b !important; }
.pmb-msg.hidden .pmb-msg-av { opacity: .5; }
/* Info: preview bài viết */
.pmb-info-post { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.pmb-info-post img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.pmb-info-post-txt { font-size: 12px; color: #64748b; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .pmb-tab-comments { grid-template-columns: 1fr; } }
/* Dark mode — Bình luận */
[data-bs-theme="dark"] .pmb-post-card { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pmb-post-noimg { background: #262f3c; }
[data-bs-theme="dark"] .pmb-post-txt { color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-mode { background: #262f3c; }
[data-bs-theme="dark"] .pmb-mode-btn.on { background: #1e2530; color: #a5b4fc; }
[data-bs-theme="dark"] .pmb-cmt-act { background: #262f3c; color: #94a3b8; }
[data-bs-theme="dark"] .pmb-cmt-act:hover { background: #303b4a; color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-cmt-del:hover { background: #4c1d1d; color: #f87171; }
[data-bs-theme="dark"] .pmb-info-post-txt { color: #94a3b8; }
[data-bs-theme="dark"] .pmb-cmt-hidden { background: #3a2e12; color: #fbbf24; }

/* ===================== Nội dung & Bài đăng (/quan-ly-bai) — workspace sidebar ===================== */
@keyframes pqm-spin { to { transform: rotate(360deg); } }
.pqm-spin { display: inline-block; animation: pqm-spin .8s linear infinite; }
.pqm-modal { display: flex; flex-direction: column; }
/* Topbar */
.pqm-topbar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #fff; border-bottom: 1px solid #eef2f7; flex-shrink: 0; }
.pqm-back { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; color: #475569; cursor: pointer; padding: 7px 13px 7px 10px; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s; }
.pqm-back i { font-size: 18px; }
.pqm-back:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
.pqm-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pqm-brand-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: linear-gradient(135deg, #0ea5e9, #22d3ee); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(14,165,233,.32); }
.pqm-brand-t { font-weight: 700; font-size: 15px; color: #0f172a; line-height: 1.25; }
.pqm-brand-s { font-size: 11.5px; color: #94a3b8; }
.pqm-top-sp { flex: 1; }
.pqm-pagechip { display: flex; align-items: center; gap: 8px; border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 10px; padding: 5px 11px 5px 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: border-color .15s, background .15s; }
.pqm-pagechip:hover { border-color: #94a3b8; }
.pqm-pagechip.on { border-color: #0ea5e9; color: #0284c7; background: #f0f9ff; }
.pqm-pagechip-avs { display: inline-flex; }
.pqm-pagechip-avs:empty { display: none; }
.pqm-pagechip-avs img, .pqm-av-none { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-left: -8px; border: 2px solid #fff; background: #e2e8f0; }
.pqm-pagechip-avs img:first-child, .pqm-av-none:first-child { margin-left: 0; }
.pqm-av-none { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 12px; }
.pqm-top-ic { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background .15s; }
.pqm-top-ic:hover { background: #f1f5f9; color: #334155; }
/* Main + sidebar */
.pqm-main { flex: 1; display: flex; min-height: 0; }
.pqm-nav { width: 218px; flex-shrink: 0; background: #fafbfc; border-right: 1px solid #eef2f7; padding: 16px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.pqm-nav-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #94a3b8; padding: 0 8px 7px; }
.pqm-nav-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin-bottom: 2px; border-radius: 9px; border: 0; background: transparent; font-size: 13.5px; font-weight: 500; color: #475569; cursor: pointer; text-align: left; transition: background .13s, color .13s; }
.pqm-nav-item i { font-size: 18px; color: #94a3b8; transition: color .13s; }
.pqm-nav-item:hover { background: #eef2f7; color: #1e293b; }
.pqm-nav-item.on { background: #e0f2fe; color: #0369a1; font-weight: 600; }
.pqm-nav-item.on i { color: #0284c7; }
/* Content — mặc định TRẮNG, panel trải kín (đây là dáng /quan-ly-nhom vẫn đang dùng) */
.pqm-content { flex: 1; min-width: 0; position: relative; background: #fff; }
.pqm-panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* ===== Workspace kiểu THẺ NỔI: nền xám + panel là thẻ trắng =====
   Dùng cho CẢ /quan-ly-bai (.pqm-ws-page) lẫn /quan-ly-nhom (.pqm-ws-group) — hai trang cùng
   một bố cục 3 thẻ. Giữ 2 tên riêng thay vì gộp làm một tên chung: đổi tên lớp đang chạy thì
   giữa lúc CSS mới và JS mới chưa cùng về tới trình duyệt, trang sẽ vỡ bố cục.
   ⚠ Nền xám đặt ở .pqm-main để TRẢI HẾT BỀ NGANG, KHÔNG đặt ở .pqm-content: .pqm-work bị bó
   1560px, nếu nền xám bó theo thì hai bên lộ nền trắng của .pqm-modal → thành 3 dải
   trắng · xám · trắng, nhìn như bị chia lớp.
   ⚠ PHẢI neo: .pqm-main/.pqm-content/.pqm-panel là lớp DÙNG CHUNG, workspace khác cũng có.
   `inset` thay cho padding của .pqm-content vì panel định vị absolute nên ăn theo padding-box
   của cha → đặt padding ở cha KHÔNG tạo ra khe. Khe giữa 2 thẻ = 13px (xem .pqm-navpg).
   `overflow:hidden` để lưới/cột con vuông góc bị bo theo góc thẻ. */
:is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-main { background: #f4f5f8; }
/* .pqm-content PHẢI trong suốt ở workspace này: nó trắng (mặc định cho workspace kiểu cũ) thì khe
   14px/13px quanh thẻ panel cũng trắng → thẻ nằm trong khung trắng chứ không nổi trên nền xám.
   Chỉ CHÍNH thẻ panel mới có nền trắng. */
:is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-content { background: transparent; }
:is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-panel { inset: 14px 13px; background: #fff; border: 1px solid #e8eaf1;
  border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(15,23,42,.18); overflow: hidden; }
.pqm-phead { flex-shrink: 0; padding: 15px 22px; border-bottom: 1px solid #eef2f7; }
.pqm-phead-t { font-size: 16px; font-weight: 700; color: #0f172a; }
.pqm-phead-s { font-size: 12.5px; color: #94a3b8; margin-top: 2px; line-height: 1.45; }
.pqm-pbody { flex: 1; min-height: 0; overflow-y: auto; }
.pqm-host { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.pqm-card-wrap .card { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.pqm-card-wrap .card > .p-3:first-child { display: none; }
.pqm-card-wrap [id$="Setting"] { display: flex !important; flex-direction: column; border-top: 0 !important; padding: 0 !important; }
.pqm-runbar { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #eef2f7; padding: 12px 0 2px; margin-top: 4px; background: #fff; }
.pqm-log { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.pqm-log-line { display: flex; align-items: flex-start; gap: 7px; color: #475569; padding: 2px 0; line-height: 1.45; }
.pqm-log-line > i { flex-shrink: 0; font-size: 14px; line-height: 1.45; }
.pqm-log-line > span { min-width: 0; word-break: break-word; }
.pqm-log-line.err, .pqm-ll-err { color: #dc2626; }
.pqm-ll-err > i { color: #ef4444; }
.pqm-ll-ok { color: #16a34a; font-weight: 500; }
.pqm-ll-ok > i { color: #22c55e; }
.pqm-ll-page { color: #4f46e5; font-weight: 700; margin-top: 5px; }
.pqm-ll-page > i { color: #6366f1; font-size: 15px; }
.pqm-ll-start { color: #64748b; font-weight: 600; }
.pqm-ll-run > i { color: #6366f1; }
.pqm-ll-info > i { color: #94a3b8; }
.pqm-ll-run.spin > i { animation: pqm-spin .7s linear infinite; }
@keyframes pqm-spin { to { transform: rotate(360deg); } }
.pqm-prog { border: 1px solid #e6e9f2; background: #f8f9fd; border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; }
.pqm-prog-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pqm-prog-ttl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #4f46e5; }
.pqm-prog-ttl i { font-size: 15px; }
.pqm-prog-ttl i.spin { animation: pqm-spin .7s linear infinite; }
.pqm-prog-cnt { font-size: 13px; font-weight: 700; color: #334155; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pqm-prog-bar { height: 8px; border-radius: 99px; background: #e2e6f0; overflow: hidden; }
.pqm-prog-bar > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #6366f1); transition: width .3s ease; }
.pqm-prog-stats { display: flex; gap: 16px; font-size: 12px; font-weight: 600; }
.pqm-prog-stats .ok { color: #16a34a; display: inline-flex; align-items: center; gap: 5px; }
.pqm-prog-stats .er { color: #dc2626; display: inline-flex; align-items: center; gap: 5px; }
.pqm-prog-stats i { font-size: 14px; }
[data-bs-theme="dark"] .pqm-prog { background: rgba(255,255,255,.03); border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-prog-cnt { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-prog-bar { background: #2e3947; }
[data-bs-theme="dark"] .pqm-ll-start { color: #94a3b8; }
.pqm-run { align-self: flex-start; }
.pqm-run.busy { opacity: .7; pointer-events: none; }
/* State (empty / error / loading) */
.pqm-state { min-height: 260px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; padding: 34px; }
.pqm-state > i { font-size: 44px; color: #cbd5e1; }
.pqm-state-t { font-size: 15.5px; font-weight: 600; color: #334155; }
.pqm-state-s { font-size: 12.5px; color: #94a3b8; max-width: 360px; line-height: 1.55; }
/* Buttons */
.pqm-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 9px; padding: 8px 14px; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.pqm-btn i { font-size: 15px; }
.pqm-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
.pqm-btn-go { background: #0ea5e9; border-color: #0ea5e9; color: #fff; box-shadow: 0 2px 8px rgba(14,165,233,.28); }
.pqm-btn-go:hover { background: #0284c7; border-color: #0284c7; color: #fff; }
/* Post list */
.pqm-list { padding: 18px 22px; }
.pqm-postlist { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.pqm-post { display: flex; gap: 12px; background: #fff; border: 1px solid #eef2f7; border-radius: 13px; padding: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
/* Bộ chọn Trang — CỘT RIÊNG nằm giữa thanh điều hướng và bảng (bố cục eztool), chỉ hiện ở tab
   danh sách vì tab Đăng bài đã có bộ chọn ở cột phải. Danh sách chiếm hết chiều cao còn lại và
   cuộn riêng, nên nhiều Trang cũng không đẩy dài cả trang. */
/* Không chừa lề PHẢI: khe giữa thẻ này và thẻ panel do `inset` của .pqm-panel lo (13px), chừa
   cả 2 bên sẽ thành khe đôi 26px rộng hơn hẳn các lề còn lại. */
.pqm-navpg { width: 270px; flex-shrink: 0; background: #f4f5f8; padding: 14px 0 14px 13px; display: flex; min-height: 0; }
.pqm-npg-card { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid #e8eaf1; border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(15,23,42,.18);
  padding: 13px 12px 10px; }
.pqm-npg-head { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.pqm-npg-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: #e0f2fe; color: #0284c7;
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pqm-npg-t { font-size: 13px; font-weight: 700; color: #0f172a; }
.pqm-npg-cnt { margin-left: auto; padding: 2px 8px; border-radius: 20px; background: #e0f2fe; color: #0284c7;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pqm-npg-search { margin-bottom: 0; }
.pqm-npglist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  border-top: 1px solid #eef2f7; padding-top: 8px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
@media (max-width: 1100px) { .pqm-nav { width: 176px; } .pqm-navpg { width: 224px; } }
.pqm-npgitem { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px; cursor: pointer; margin: 0; transition: background .12s; }
.pqm-npgitem:hover { background: #f1f5f9; }
.pqm-npgitem input { flex-shrink: 0; cursor: pointer; }
.pqm-npgitem .pqm-pgnm { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqm-btn-del { background: #ef4444; border-color: #ef4444; color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,.26); }
.pqm-btn-del:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; color: #fff; }
.pqm-btn-del:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.pqm-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ===== Quản lý bài trang — bảng chỉ số (ag-Grid balham, đồng bộ bảng /page và /bm) =====
   Panel chia 3 tầng cứng: thanh lọc · bảng (cuộn dọc + ngang riêng) · chân trang. Panel body
   KHÔNG cuộn (grid tự cuộn) nên phải chặn overflow ở đây, khác các tab dạng danh sách. */
.pqm-panel[data-panel="published"] > .pqm-pbody,
.pqm-panel[data-panel="scheduled"] > .pqm-pbody { overflow: hidden; display: flex; flex-direction: column; }
.pqm-gbar { flex-shrink: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid #eef2f7; background: #fbfcfe; }
.pqm-gsel { font-size: 12.5px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 9px; padding: 7px 28px 7px 11px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
.pqm-gsel:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
/* ===== Bộ chọn khoảng ngày — chép thẩm mỹ #dateRangePicker của trang Ads =====
   ⚠ TÊN LỚP RIÊNG `.pqm-drp*`, KHÔNG dùng lại `.drp-*`: bản gốc có CSS sáng nằm trong thẻ <style>
   của ads.html và bị khoá trong `.tkqc-toolbar`, còn CSS tối trong file này lại KHÔNG khoá — dùng
   chung tên sẽ ra giao diện nửa vời (tối thì ăn, sáng thì trần). */
.pqm-drp-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; font-size: 12.5px; font-weight: 600;
  color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 0 10px 0 11px; cursor: pointer; }
.pqm-drp-btn > i:first-child { font-size: 15px; color: #6366f1; }
.pqm-drp-car { font-size: 15px; color: #94a3b8; transition: transform .18s ease; }
.pqm-drp-btn:hover { border-color: #c7d2fe; background: #f8faff; }
.pqm-drp-btn.on { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.pqm-drp-btn.on .pqm-drp-car { transform: rotate(180deg); }
/* Popup gắn ở <body> → position:fixed. z-index trên overlay (100) và trên nút hỗ trợ (3000),
   vẫn dưới thanh hết hạn (99990). */
.pqm-drp { position: fixed; z-index: 3200; background: #fff; border-radius: 12px; font-size: 13px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08); }
.pqm-drp-body { display: flex; align-items: stretch; }
/* 15 mốc xếp 2 CỘT để thấy hết trong một tầm mắt — xếp 1 cột thì cao 503px trong khung lịch 340px,
   tức phải cuộn mới thấy 5 mốc cuối, trái với ý "nhiều mốc thời gian". */
.pqm-drp-presets { border-right: 1px solid #f0f0f0; display: grid; grid-template-columns: 1fr 1fr;
  align-content: start; gap: 2px 4px; padding: 10px 8px; background: #fafafa; border-radius: 12px 0 0 0; }
.pqm-drp-preset { padding: 7px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; color: #555;
  font-size: 12.5px; transition: background .15s, color .15s; }
.pqm-drp-preset:hover { background: #eef2ff; color: #6366f1; }
.pqm-drp-preset.on { background: #e0e7ff; color: #6366f1; font-weight: 600; }
/* "Tuỳ chỉnh" chiếm trọn 2 cột và có vạch ngăn — nó khác loại với các mốc tính sẵn ở trên */
.pqm-drp-preset[data-k="custom"] { grid-column: 1 / -1; margin-top: 4px; padding-top: 9px; border-top: 1px solid #e8eaf1; border-radius: 0 0 7px 7px; }
.pqm-drp-cals { display: flex; padding: 14px 12px; gap: 14px; align-items: flex-start; }
.pqm-drp-cal { min-width: 210px; flex: 1; }
.pqm-drp-nav { background: none; border: 1px solid #e0e0e0; cursor: pointer; color: #555; width: 30px; height: 30px;
  min-width: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: background .15s, border-color .15s, color .15s; }
.pqm-drp-nav:hover { background: #eef2ff; border-color: #a5b4fc; color: #6366f1; }
/* ⚠ style.css có rule TRẦN `.ri-arrow-left-s-line{display:none}` (dòng ~3420) ẩn icon này trên
   TOÀN APP → nút lùi tháng ra vòng tròn rỗng. Bật lại trong phạm vi component (2 lớp nên thắng),
   không sửa rule gốc vì không rõ chỗ nào đang dựa vào nó. */
.pqm-drp-nav .ri-arrow-left-s-line { display: block; }
.pqm-drp-chead { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; }
.pqm-drp-cs { position: relative; }
.pqm-drp-csb { display: flex; align-items: center; gap: 2px; border: 1px solid #e0e7ff; background: #f5f7ff;
  font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 8px; color: #3730a3; border-radius: 6px; user-select: none; white-space: nowrap; }
.pqm-drp-csb:hover { border-color: #6366f1; background: #eef2ff; }
.pqm-drp-csb i { font-size: 14px; opacity: .6; }
.pqm-drp-csl { display: none; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  max-height: 190px; overflow-y: auto; z-index: 3; min-width: 96px; padding: 4px; }
.pqm-drp-cs.mo .pqm-drp-csl { display: block; }
.pqm-drp-csi { padding: 5px 10px; font-size: 12.5px; border-radius: 6px; cursor: pointer; white-space: nowrap; color: #334155; }
.pqm-drp-csi:hover { background: #eef2ff; color: #6366f1; }
.pqm-drp-csi.on { background: #6366f1; color: #fff; font-weight: 600; }
.pqm-drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 2px; }
.pqm-drp-wd { font-size: 11px; color: #888; font-weight: 700; padding: 4px 0; text-transform: uppercase; letter-spacing: .3px; }
.pqm-drp-day { width: 30px; height: 30px; margin: 1px auto; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; font-size: 12.5px; color: #333; transition: background .12s, color .12s; }
.pqm-drp-day:hover { background: #eef2ff; color: #6366f1; }
.pqm-drp-day.ngoai { color: #ccc; }
.pqm-drp-day.giua { background: #eef2ff; color: #6366f1; border-radius: 0; }
.pqm-drp-day.dau { background: #6366f1; color: #fff; font-weight: 600; border-radius: 50% 0 0 50%; }
.pqm-drp-day.cuoi { background: #6366f1; color: #fff; font-weight: 600; border-radius: 0 50% 50% 0; }
.pqm-drp-day.dau.cuoi { border-radius: 50%; }
.pqm-drp-day.naz { border: 2px solid #6366f1; font-weight: 600; }
.pqm-drp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px;
  border-top: 1px solid #f0f0f0; background: #fafafa; border-radius: 0 0 12px 12px; }
/* Hai ô nhập ngày cụ thể ở chân popup — thay cho dòng chữ khoảng ngày chỉ để đọc trước đây */
.pqm-drp-range { display: flex; align-items: center; gap: 8px; }
.pqm-drp-d { font-size: 12.5px; font-weight: 600; color: #3730a3; background: #fff; border: 1px solid #e0e7ff;
  border-radius: 7px; padding: 5px 8px; font-family: inherit; cursor: pointer; }
.pqm-drp-d:hover { border-color: #a5b4fc; }
.pqm-drp-d:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.pqm-drp-to { color: #94a3b8; font-size: 15px; }
.pqm-drp-acts { display: flex; gap: 8px; }
.pqm-drp-acts .pqm-btn { padding: 6px 14px; }
/* Select2 cho ô "Mọi loại bài".
   ⚠ style.css có `.select2-container{width:100%!important}` toàn cục → truyền số px lúc init là vô
   nghĩa, phải chặn bề rộng ở đây (2 lớp nên thắng specificity dù cả hai đều !important). */
.pqm-gbar .select2-container { width: 172px !important; }
.pqm-gbar .select2-container .select2-selection--single { height: 34px; border-radius: 9px; border-color: #e2e8f0; }
.pqm-gbar .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; font-size: 12.5px; font-weight: 600; color: #475569; }
.pqm-gbar .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-container--open .select2-dropdown.pqm-gsel-dd { z-index: 3200; font-size: 12.5px; }
/* Mọi control trên thanh cùng CAO 34px — nếu không thì nút lịch 38, select2 34, nút thường 40 */
.pqm-gbar .pqm-btn { height: 34px; padding: 0 13px; }
.pqm-gbar .pqm-gsearch-in { height: 34px; }
.pqm-gsearch { position: relative; display: flex; align-items: center; min-width: 230px; }
.pqm-gsearch > i { position: absolute; left: 10px; font-size: 15px; color: #94a3b8; pointer-events: none; }
.pqm-gsearch-in { width: 100%; font-size: 12.5px; border: 1px solid #e2e8f0; border-radius: 9px;
  padding: 7px 11px 7px 31px; background: #fff; color: #334155; font-family: inherit; }
.pqm-gsearch-in:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.pqm-gsp { margin-left: auto; }
/* Chân trang: 2 "viên thuốc" viền tròn như footer lưới ads/bm/page — cụm đếm + cụm cộng dồn.
   Các ô ngăn nhau bằng vạch dọc thay vì dấu chấm, cho khớp `border-end` của các trang kia. */
.pqm-fpill { display: flex; align-items: center; flex-shrink: 0; border: 1px solid #e5e7eb; border-radius: 9px;
  padding: 5px 12px; font-size: 12.5px; color: #64748b; background: #fff; font-variant-numeric: tabular-nums; }
.pqm-fpill > span { display: inline-flex; align-items: center; gap: 5px; }
.pqm-fpill > span + span { margin-left: 10px; padding-left: 10px; border-left: 1px solid #eef2f7; }
.pqm-fpill b { color: #0f172a; font-weight: 700; }
.pqm-fpill i { font-size: 14px; color: #94a3b8; }
.pqm-fstats i { color: #6366f1; }
.pqm-gwrap { flex: 1; min-height: 0; }
/* ⚠ `rowHeight` trong gridOptions CHỈ đặt chiều cao phần tử dòng; line-height của Ô lại tính từ
   BIẾN CSS: `--ag-internal-calculated-line-height: var(--ag-line-height, calc(--ag-row-height -
   --ag-row-border-width))` rồi `line-height: min(cái đó, --ag-internal-padded-row-height)`.
   Balham để --ag-row-height = calc(--ag-grid-size*7) = 28px → ĐO TRÊN BẢN LIVE: ô cao 45px mà
   line-height chỉ 27px nên chữ DÍNH MÉP TRÊN. Khai biến cho khớp → line-height 45px, chữ về giữa.
   Không dùng `.ag-cell{display:flex}`: cách đó phá `text-align:right` của cột type numericColumn.
   (Phần đầu bảng vốn đã cân — .ag-header-cell-label là flex/center — nên KHÔNG khai header-height.) */
.pqm-grid { width: 100%; height: 100%; }
/* ⚠ PHẢI kèm .ag-theme-balham cho đủ 2 lớp: theme khai `--ag-row-height` ngay trên CHÍNH phần tử
   này với độ ưu tiên (0,1,0), mà CSS của ag-Grid do bundle JS tự chèn vào <head> SAU file này →
   cùng độ ưu tiên thì bản chèn sau thắng. `.pqm-grid` trần bị nuốt, đo ra vẫn calc(4px*7). */
.pqm-grid.ag-theme-balham { --ag-row-height: 46px; }
.pqm-gfoot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 46px;
  padding: 8px 18px; border-top: 1px solid #eef2f7; }
/* Né nút hỗ trợ .sup-chat (FAB 56px, fixed right:20 bottom:20, z-index 3000). Nút này và FAB đều
   neo theo mép phải nên LUÔN chồng ngang 34px, chỉ hở 8px theo chiều dọc — đổi zoom hoặc mở panel
   chat là che hẳn. Cùng cách xử lý với chân trang lưới clone/page/bm/pixel/group trong style.css. */
.pqm-pubmore, .pqm-schadd { margin-right: 70px; }
.pqm-gstat { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #64748b; }
.pqm-gstat i { font-size: 14px; }
.pqm-gerr { color: #ef4444; }
/* Ô Tiêu đề: ảnh đại diện bài + nội dung 1 dòng + cảnh báo trùng + nút mở bài trên Facebook */
.pqm-gtitle { display: flex; align-items: center; gap: 9px; height: 100%; min-width: 0; }
.pqm-gth { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; background-size: cover; background-position: center; }
.pqm-gth-none { display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-size: 15px; }
.pqm-gtx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqm-gdup { flex-shrink: 0; color: #d97706; font-size: 14px; }
.pqm-gopen { flex-shrink: 0; color: #94a3b8; font-size: 14px; line-height: 1; text-decoration: none; }
.pqm-gopen:hover { color: #0284c7; }
.pqm-gnul { color: #cbd5e1; }
/* Nhãn Loại / Trạng thái — cùng ngôn ngữ viên thuốc với bảng /page */
.pqm-gpill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 16px;
  font-size: 10.5px; font-weight: 700; line-height: 18px; }
.pqm-gpill i { font-size: 12px; }
.pqm-gpill.k-text, .pqm-gpill.k-other, .pqm-gpill.s-mut { background: #f1f5f9; color: #64748b; }
.pqm-gpill.k-photo { background: #e0f2fe; color: #0284c7; }
.pqm-gpill.k-video { background: #ede9fe; color: #7c3aed; }
.pqm-gpill.k-link { background: #ccfbf1; color: #0d9488; }
.pqm-gpill.s-ok { background: #dcfce7; color: #16a34a; }
.pqm-gpill.s-warn { background: #fef3c7; color: #b45309; }
.pqm-gpill.s-bad { background: #fee2e2; color: #dc2626; }
/* Cột "Thao tác" của bảng bài hẹn giờ — 4 nút icon, ghim phải. Cao 26px (dòng 46px) để còn hở
   viền trên/dưới; vùng bấm nhỏ hơn 44px là có chủ ý: đây là lưới chuột trên desktop, ô chỉ cao
   46px nên nút to hơn sẽ tràn dòng — mỗi nút đều có title + aria-label bù lại. */
.pqm-gact { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.pqm-gic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 7px; cursor: pointer;
  font-size: 14px; line-height: 1; transition: background .15s, border-color .15s, color .15s; }
.pqm-gic:hover { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }
.pqm-gic-go:hover { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.pqm-gic-del:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
/* ===== Quét tương tác (UID người thả cảm xúc / bình luận) — tab nhóm "Tương tác" =====
   Cùng khuôn bảng Quản lý bài: 2 thanh .pqm-gbar (quét · lọc bảng) · lưới balham · chân trang.
   Panel body KHÔNG cuộn (lưới tự cuộn). Chân trang chừa phải 88px né nút hỗ trợ .sup-chat. */
.pqm-panel[data-panel="quet-tuong-tac"] > .pqm-pbody { overflow: hidden; display: flex; flex-direction: column; }
.pqm-panel[data-panel="quet-tuong-tac"] .pqm-gfoot { padding-right: 88px; }
.pqs-url { flex: 1; min-width: 280px; }
/* Ô chế độ quét có nhãn dài "Tất cả (cảm xúc + bình luận)" → rộng hơn mức 172px chung của thanh lọc */
.pqm-panel[data-panel="quet-tuong-tac"] select[data-q="mode"] + .select2-container { width: 236px !important; }
.pqs-user { display: flex; align-items: center; gap: 9px; height: 100%; min-width: 0; }
.pqs-user .pqm-gth { border-radius: 50%; }
.pqs-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-weight: 600; text-decoration: none; }
.pqs-name:hover { color: #0284c7; text-decoration: underline; }
.pqs-uid { display: flex; align-items: center; gap: 6px; height: 100%; }
/* UID dùng ĐÚNG font/cỡ chữ của lưới như cột "ID bài viết" ở bảng Quản lý bài (font mono lệch hẳn tổng thể);
   chỉ giữ chữ số đều bề ngang để các UID thẳng cột */
.pqs-mono { font-variant-numeric: tabular-nums; }
.pqm-gstat.pqs-ok { color: #16a34a; }
.pqm-gpill.r-like { background: #dbeafe; color: #1877f2; }
.pqm-gpill.r-love { background: #ffe4e6; color: #e11d48; }
.pqm-gpill.r-care, .pqm-gpill.r-haha, .pqm-gpill.r-wow { background: #fef3c7; color: #b45309; }
.pqm-gpill.r-sad { background: #f1f5f9; color: #475569; }
.pqm-gpill.r-angry { background: #ffedd5; color: #ea580c; }
.pqm-gpill.r-comment { background: #dcfce7; color: #16a34a; }
/* ===== Bộ chọn giờ đăng — hộp thoại giữa màn hình (lịch 1 tháng + ô giờ + nút Áp dụng) =====
   z-index trên .pqm-drp (3200) và nút hỗ trợ (3000), vẫn dưới thanh hết hạn (99990). Dùng lại
   đúng bảng màu tím của .pqm-drp để hai bộ lịch trong cùng workspace không lệch tông. */
.pqm-dtp-ov { position: fixed; inset: 0; z-index: 3400; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
.pqm-dtp { width: 340px; max-width: 100%; max-height: 100%; overflow-y: auto; background: #fff; border-radius: 14px;
  font-size: 13px; box-shadow: 0 18px 48px rgba(15,23,42,.28), 0 2px 8px rgba(0,0,0,.08); }
.pqm-dtp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #eef2f7; }
.pqm-dtp-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: #e0e7ff; color: #6366f1;
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pqm-dtp-tt { flex: 1; min-width: 0; }
.pqm-dtp-t { font-size: 14px; font-weight: 700; color: #0f172a; }
.pqm-dtp-s { font-size: 12px; color: #94a3b8; margin-top: 1px; }
.pqm-dtp-x { width: 28px; height: 28px; flex-shrink: 0; border: none; background: none; color: #94a3b8; cursor: pointer;
  border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pqm-dtp-x:hover { background: #f1f5f9; color: #334155; }
.pqm-dtp-body { padding: 12px 16px 14px; }
.pqm-dtp-calbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pqm-dtp-mon { font-size: 13.5px; font-weight: 700; color: #334155; }
.pqm-dtp-nav { background: none; border: 1px solid #e0e0e0; cursor: pointer; color: #555; width: 30px; height: 30px;
  min-width: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s; }
.pqm-dtp-nav:hover:not(:disabled) { background: #eef2ff; border-color: #a5b4fc; color: #6366f1; }
.pqm-dtp-nav:disabled { opacity: .35; cursor: not-allowed; }
/* style.css có rule TRẦN `.ri-arrow-left-s-line{display:none}` ẩn icon này toàn app — bật lại
   trong phạm vi component (2 lớp nên thắng), y như đã làm cho .pqm-drp-nav. */
.pqm-dtp-nav .ri-arrow-left-s-line { display: block; }
.pqm-dtp-cal { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 2px; }
.pqm-dtp-wd { font-size: 11px; color: #888; font-weight: 700; padding: 4px 0; text-transform: uppercase; letter-spacing: .3px; }
.pqm-dtp-day { width: 34px; height: 34px; margin: 1px auto; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: #334155; transition: background .12s, color .12s; }
.pqm-dtp-day:hover { background: #eef2ff; color: #6366f1; }
.pqm-dtp-day.ngoai { color: #cbd5e1; }
/* Ngày quá khứ: khoá hẳn — gạch ngang để phân biệt với ô tháng kề (chỉ mờ), không chỉ dựa vào màu */
.pqm-dtp-day.tat { color: #cbd5e1; cursor: not-allowed; text-decoration: line-through; }
.pqm-dtp-day.tat:hover { background: none; color: #cbd5e1; }
.pqm-dtp-day.naz { border: 2px solid #a5b4fc; font-weight: 600; }
.pqm-dtp-day.chon { background: #6366f1; color: #fff; font-weight: 700; border-color: #6366f1; }
.pqm-dtp-time { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.pqm-dtp-time > i { font-size: 16px; color: #6366f1; }
.pqm-dtp-tlbl { font-size: 12.5px; font-weight: 600; color: #475569; }
.pqm-dtp-hm { margin-left: auto; font-size: 13px; font-weight: 700; color: #3730a3; background: #fff;
  border: 1px solid #e0e7ff; border-radius: 8px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.pqm-dtp-hm:hover { border-color: #a5b4fc; }
.pqm-dtp-hm:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.pqm-dtp-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.45; background: #f8fafc; color: #94a3b8; }
.pqm-dtp-note i { font-size: 15px; flex-shrink: 0; }
.pqm-dtp-note b { color: #0f172a; font-weight: 700; }
.pqm-dtp-note.ok { background: #f0fdf4; color: #15803d; }
.pqm-dtp-note.ok b { color: #14532d; }
.pqm-dtp-note.loi { background: #fef2f2; color: #dc2626; }
.pqm-dtp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef2f7; background: #fafbfd; border-radius: 0 0 14px 14px; }
.pqm-dtp-foot .pqm-btn { padding: 7px 16px; }

/* ===== Bảng BÌNH LUẬN của một bài — dựng theo giao diện xem bài của Facebook =====
   Nút mở nằm trong ô Tiêu đề của bảng bài đã đăng. */
.pqm-gcmt { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 22px; padding: 0 7px;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 20px; cursor: pointer;
  font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s, color .15s; }
.pqm-gcmt i { font-size: 13px; }
.pqm-gcmt:hover { background: #eef2ff; border-color: #a5b4fc; color: #4f46e5; }
/* Lớp phủ + thẻ: cùng ngôn ngữ với .pqm-dtp, chỉ rộng hơn và cao kịch trần cho danh sách dài */
.pqm-cmt-ov { position: fixed; inset: 0; z-index: 3400; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
.pqm-cmt { width: 680px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; font-size: 13px;
  box-shadow: 0 18px 48px rgba(15,23,42,.28), 0 2px 8px rgba(0,0,0,.08); }
.pqm-cmt-hd { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  padding: 14px 52px; border-bottom: 1px solid #eef2f7; }
.pqm-cmt-hd-t { font-size: 15px; font-weight: 700; color: #0f172a; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqm-cmt-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  border: none; background: #f1f5f9; color: #475569; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 19px; }
.pqm-cmt-x:hover { background: #e2e8f0; color: #0f172a; }
.pqm-cmt-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* --- Khối bài --- */
.pqm-cmt-phd { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
.pqm-cmt-pav { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background-size: cover; background-position: center; }
.pqm-cmt-pnm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pqm-cmt-pnm b { font-size: 14px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqm-cmt-pmt { font-size: 12px; color: #94a3b8; display: inline-flex; align-items: center; gap: 4px; }
.pqm-cmt-popen { flex-shrink: 0; color: #94a3b8; font-size: 17px; line-height: 1; text-decoration: none; }
.pqm-cmt-popen:hover { color: #0284c7; }
.pqm-cmt-ptx { padding: 0 16px 10px; font-size: 14px; line-height: 1.5; color: #1e293b; white-space: pre-wrap; word-break: break-word; }
.pqm-cmt-pimg { width: 100%; height: 320px; background-size: cover; background-position: center; background-color: #f1f5f9; }
.pqm-cmt-pcnt { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-bottom: 1px solid #eef2f7;
  font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; }
.pqm-cmt-pcnt span { display: inline-flex; align-items: center; gap: 5px; }
.pqm-cmt-pcnt i { font-size: 16px; color: #94a3b8; }
/* --- Thanh công cụ --- */
.pqm-cmt-tools { display: flex; align-items: center; gap: 10px; padding: 9px 16px; }
.pqm-cmt-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; margin: 0; }
.pqm-cmt-cnt { font-size: 12.5px; font-weight: 700; color: #4f46e5; }
.pqm-cmt-sp { flex: 1; }
.pqm-cmt-ord { font-size: 12.5px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 5px 9px; cursor: pointer; }
/* Bộ chọn thứ tự dùng Select2 cho khớp chuẩn app (giống .pqm-gsel ở thanh lọc).
   ⚠ z-index PHẢI vượt lớp phủ popup bình luận (.pqm-cmt-ov = 3400); mặc định của Select2 chỉ
   1051 nên dropdown sẽ nằm DƯỚI lớp phủ và bấm không tới. (.pqm-gsel-dd dùng 3200 vì nó chỉ
   phải vượt bộ chọn ngày .pqm-drp.) */
.pqm-cmt-tools .select2-container { width: 152px !important; }
.pqm-cmt-tools .select2-container--default .select2-selection--single {
  height: 30px; border-radius: 9px; border-color: #e2e8f0; background: #fff; }
.pqm-cmt-tools .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px; font-size: 12.5px; font-weight: 600; color: #475569; padding-left: 11px; }
.pqm-cmt-tools .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; right: 4px; }
.pqm-cmt-tools .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.select2-container--open .select2-dropdown.pqm-cmt-ord-dd {
  z-index: 3500; font-size: 12.5px; border-color: #e2e8f0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 28px -8px rgba(15,23,42,.28); }
.pqm-cmt-ord-dd .select2-results__option { padding: 8px 12px; font-weight: 600; color: #475569; }
/* ⚠ KHÔNG đặt màu cho --highlighted / --selected ở đây: modern-theme.css:1254 đã có rule TOÀN
   APP `.select2-results__option--highlighted { background: var(--primary-gradient) !important }`
   và Select2 tự cho chữ trắng trên đó. Đặt thêm màu chữ là ghi đè mất chữ trắng → nền tím trên
   chữ tím, tương phản ~1.2:1 (đã dính). Cứ để app lo, ở đây chỉ lo dáng: padding + màu chữ
   trạng thái thường. (Ngoài ra Select2 4.1 dùng class --selected chứ không phải aria-selected.) */
.pqm-cmt-bulk { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 10px; }
.pqm-cmt-bulk .pqm-btn { height: 30px; padding: 0 11px; font-size: 12px; }
/* --- Danh sách bình luận --- */
.pqm-cmt-list { padding: 4px 16px 16px; }
.pqm-cmt-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; }
.pqm-cmt-cb { margin-top: 12px; flex-shrink: 0; cursor: pointer; }
.pqm-cmt-av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background-size: cover; background-position: center; background-color: #e2e8f0; }
.pqm-cmt-av-none { display: flex; align-items: center; justify-content: center; background-color: #6366f1; color: #fff; font-weight: 700; font-size: 14px; }
.pqm-cmt-main { flex: 1; min-width: 0; }
/* Bong bóng xám bo tròn — dấu hiệu nhận dạng của bình luận Facebook */
.pqm-cmt-bub { display: inline-block; max-width: 100%; background: #f0f2f5; border-radius: 16px; padding: 7px 12px; }
.pqm-cmt-bub b { display: block; font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.pqm-cmt-bub span { display: block; font-size: 13.5px; color: #1e293b; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.pqm-cmt-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 3px 12px 0; }
.pqm-cmt-tm { font-size: 11.5px; color: #94a3b8; }
.pqm-cmt-a { display: inline-flex; align-items: center; gap: 3px; border: none; background: none; padding: 0;
  font-size: 11.5px; font-weight: 700; color: #64748b; cursor: pointer; }
.pqm-cmt-a i { font-size: 13px; }
.pqm-cmt-a:hover { text-decoration: underline; color: #334155; }
.pqm-cmt-a.on { color: #4f46e5; }
.pqm-cmt-a:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
.pqm-cmt-lk { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: #4f46e5; }
.pqm-cmt-hid { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
  background: #fef3c7; color: #b45309; padding: 1px 7px; border-radius: 20px; }
/* Phản hồi: thụt lề + đường kẻ dọc nối xuống, giống cách Facebook lồng bình luận */
.pqm-cmt-kids { margin-left: 20px; padding-left: 18px; border-left: 2px solid #e8eaf1; }
/* --- Ô trả lời --- */
.pqm-cmt-foot { flex-shrink: 0; border-top: 1px solid #eef2f7; padding: 10px 16px; background: #fafbfd; border-radius: 0 0 14px 14px; }
.pqm-cmt-reply-to { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 12px; color: #64748b; }
.pqm-cmt-reply-to b { color: #0f172a; }
.pqm-cmt-rx { margin-left: auto; border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 15px; line-height: 1; }
.pqm-cmt-rx:hover { color: #ef4444; }
.pqm-cmt-inbox { display: flex; align-items: flex-end; gap: 8px; }
/* Nút chọn danh tính bình luận — ô tròn bên TRÁI ô nhập, giống chỗ đổi tư cách của Facebook.
   Danh sách mở LÊN TRÊN (bottom:100%) vì nút nằm sát đáy hộp thoại. .pqm-cmt-foot phải
   position:relative để cái này neo theo nó. */
.pqm-cmt-foot { position: relative; }
.pqm-cmt-as-wrap { position: relative; flex-shrink: 0; }
.pqm-cmt-as { display: flex; align-items: center; gap: 1px; padding: 0; border: none; background: none;
  cursor: pointer; color: #94a3b8; border-radius: 20px; }
.pqm-cmt-as:hover { color: #4f46e5; }
.pqm-cmt-as i { font-size: 15px; }
.pqm-cmt-as-av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background-size: cover;
  background-position: center; background-color: #e2e8f0; }
.pqm-cmt-as-av2 { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background-size: cover;
  background-position: center; background-color: #e2e8f0; }
/* ===== Hộp thoại chọn tư cách bình luận — dựng theo kiểu của Facebook: to, có ô tìm =====
   z-index trên popup bình luận (3400) vì mở CHỒNG lên nó. */
.pqm-as-ov { position: fixed; inset: 0; z-index: 3600; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.pqm-as { width: 460px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(15,23,42,.3); }
.pqm-as-hd { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  padding: 15px 52px; border-bottom: 1px solid #eef2f7; }
.pqm-as-t { font-size: 16px; font-weight: 700; color: #0f172a; }
.pqm-as-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  border: none; background: #f1f5f9; color: #475569; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 19px; }
.pqm-as-x:hover { background: #e2e8f0; color: #0f172a; }
.pqm-as-sub { flex-shrink: 0; padding: 12px 16px 0; font-size: 13px; color: #64748b; line-height: 1.5; }
.pqm-as-search { flex-shrink: 0; position: relative; margin: 10px 16px 6px; }
.pqm-as-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 16px; }
.pqm-as-in { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px; color: #1e293b;
  background: #f0f2f5; border: 1px solid transparent; border-radius: 20px; padding: 9px 14px 9px 36px; }
.pqm-as-in:focus { outline: none; background: #fff; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.pqm-as-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; }
.pqm-as-it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none;
  background: none; cursor: pointer; border-radius: 10px; text-align: left; }
.pqm-as-it:hover { background: #f1f5f9; }
.pqm-as-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background-size: cover;
  background-position: center; background-color: #e2e8f0; }
/* Khai SAU .pqm-as-av nên phải nhắc lại nền tím + chữ trắng: .pqm-as-av đặt background-color
   xám và cùng độ ưu tiên, khai sau nên nó thắng → chữ cái xám trên nền xám, gần như không đọc được. */
.pqm-as-av.pqm-cmt-av-none { background-color: #6366f1; color: #fff; font-size: 17px; }
.pqm-as-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pqm-as-nm b { font-size: 14px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqm-as-ph { font-size: 12px; color: #94a3b8; font-style: normal; }
.pqm-as-ck { flex-shrink: 0; font-size: 21px; color: #2563eb; }
.pqm-as-nores { padding: 24px 12px; text-align: center; font-size: 13px; color: #94a3b8; }
[data-bs-theme="dark"] .pqm-as { background: #1e2735; box-shadow: 0 18px 48px rgba(0,0,0,.6); }
[data-bs-theme="dark"] .pqm-as-hd { border-bottom-color: #2e3947; }
[data-bs-theme="dark"] .pqm-as-t, [data-bs-theme="dark"] .pqm-as-nm b { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-as-x { background: #262f3c; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-as-x:hover { background: #303b4a; color: #f1f5f9; }
[data-bs-theme="dark"] .pqm-as-in { background: #171d27; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-as-in:focus { background: #1e2530; border-color: #6366f1; }
[data-bs-theme="dark"] .pqm-as-it:hover { background: #262f3c; }
[data-bs-theme="dark"] .pqm-as-ck { color: #60a5fa; }
/* Mục tài khoản cá nhân: CHỈ để giải thích, không bấm được — Facebook trả lỗi 1705 nếu
   bình luận bằng token người dùng. Để mờ + con trỏ not-allowed cho thấy rõ là không dùng được. */
/* overflow-y:hidden la MAC DINH — o nhap tu gian theo noi dung nen khong can thanh cuon. Chi khi
   cham tran chieu cao thi JS moi bat lai overflow:auto (xem cmtFit). box-sizing khai ro vi phep
   tinh chieu cao ben JS cong phan vien theo kieu border-box. */
.pqm-cmt-in { flex: 1; min-width: 0; resize: none; font-family: inherit; font-size: 13.5px; color: #1e293b;
  background: #f0f2f5; border: 1px solid transparent; border-radius: 18px; padding: 9px 14px; line-height: 1.4; box-sizing: border-box; overflow-y: hidden; }
.pqm-cmt-in:focus { outline: none; background: #fff; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.pqm-cmt-send { width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 50%; cursor: pointer;
  background: #6366f1; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.pqm-cmt-send:hover:not(:disabled) { background: #4f46e5; }
.pqm-cmt-send:disabled { background: #cbd5e1; cursor: not-allowed; }
.pqm-cmt-more { width: 100%; justify-content: center; margin-top: 10px; }
.pqm-thumb { width: 58px; height: 58px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; }
.pqm-thumb-none { display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-size: 22px; }
.pqm-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pqm-post-msg { font-size: 13.5px; color: #334155; line-height: 1.5; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.pqm-nomsg { color: #94a3b8; font-style: italic; }
.pqm-post-meta { font-size: 12px; color: #64748b; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.pqm-pagetag { display: inline-flex; align-items: center; gap: 3px; color: #0284c7; font-weight: 600; }
.pqm-post-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.pqm-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 7px; padding: 4px 9px; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.pqm-mini i { font-size: 13px; }
.pqm-mini:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
.pqm-mini-go { color: #0284c7; border-color: #bae6fd; background: #f0f9ff; }
.pqm-mini-go:hover { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }
.pqm-mini-del { color: #dc2626; }
.pqm-mini-del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.pqm-dup { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #b45309; background: #fef3c7; padding: 2px 8px; border-radius: 10px; }
.pqm-editor, .pqm-dt { width: 100%; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 9px; padding: 8px 10px; font-family: inherit; }
.pqm-editor { min-height: 84px; resize: vertical; line-height: 1.5; }
.pqm-editor:focus, .pqm-dt:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
/* Picker */
.pqm-picker-ov { position: absolute; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 20px; }
.pqm-picker { width: min(480px, 100%); max-height: 82%; background: #fff; border-radius: 15px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.32); }
.pqm-pk-hd { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid #eef2f7; }
.pqm-pk-title { font-weight: 700; font-size: 15px; color: #0f172a; display: flex; align-items: center; gap: 7px; }
.pqm-pk-title i { color: #0ea5e9; }
.pqm-pk-tools { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.pqm-pk-search { flex: 1; display: flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 9px; padding: 7px 11px; color: #64748b; }
.pqm-pk-search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 13px; }
.pqm-pk-all { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #475569; white-space: nowrap; cursor: pointer; }
.pqm-pk-list { flex: 1; overflow-y: auto; padding: 8px; }
.pqm-pk-item { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 10px; cursor: pointer; }
.pqm-pk-item:hover { background: #f8fafc; }
.pqm-pk-item img, .pqm-pk-noimg { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.pqm-pk-noimg { display: flex; align-items: center; justify-content: center; background: #e2e8f0; color: #94a3b8; }
.pqm-pk-name { flex: 1; min-width: 0; font-size: 13px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pqm-pk-tick { color: #0ea5e9; font-size: 17px; opacity: 0; flex-shrink: 0; }
.pqm-pk-item input:checked ~ .pqm-pk-tick { opacity: 1; }
.pqm-pk-item input[type="checkbox"] { accent-color: #0ea5e9; width: 16px; height: 16px; flex-shrink: 0; }
.pqm-pk-foot { padding: 13px 16px; border-top: 1px solid #eef2f7; display: flex; align-items: center; justify-content: space-between; }
.pqm-pk-count { font-size: 12.5px; color: #64748b; font-weight: 600; }
/* ---- Dark ---- */
[data-bs-theme="dark"] .pqm-topbar { background: #161b22; border-bottom-color: #2e3947; }
[data-bs-theme="dark"] .pqm-back, [data-bs-theme="dark"] .pqm-top-ic { background: #1e2530; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-back:hover, [data-bs-theme="dark"] .pqm-top-ic:hover { background: #262f3c; }
[data-bs-theme="dark"] .pqm-brand-t { color: #f1f5f9; }
[data-bs-theme="dark"] .pqm-pagechip { background: #1e2530; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-pagechip.on { background: rgba(14,165,233,.14); border-color: #0ea5e9; color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-pagechip-avs img, [data-bs-theme="dark"] .pqm-av-none { border-color: #161b22; background: #303b4a; }
[data-bs-theme="dark"] .pqm-nav { background: #12171e; border-right-color: #2e3947; }
[data-bs-theme="dark"] .pqm-nav-item { color: #94a3b8; }
[data-bs-theme="dark"] .pqm-nav-item:hover { background: #1e2530; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-nav-item.on { background: rgba(14,165,233,.16); color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-nav-item.on i { color: #38bdf8; }
/* Nền tối: giá trị MẶC ĐỊNH là dáng workspace kiểu cũ; phần thẻ nổi neo 2 lớp workspace.
   .pqm-runbar dính đáy panel nên phải mang ĐÚNG màu nền phía sau nó ở từng workspace, không thì
   lộ vệt khác màu khi cuộn. */
[data-bs-theme="dark"] .pqm-content, [data-bs-theme="dark"] .pqm-runbar { background: #161b22; }
[data-bs-theme="dark"] :is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-main { background: #151b25; }
[data-bs-theme="dark"] :is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-content { background: transparent; }
[data-bs-theme="dark"] :is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-panel { background: #1e2735; border-color: #2e3947; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
[data-bs-theme="dark"] :is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-runbar { background: #1e2735; }
[data-bs-theme="dark"] .pqm-phead { border-bottom-color: #2e3947; }
[data-bs-theme="dark"] .pqm-phead-t { color: #f1f5f9; }
[data-bs-theme="dark"] .pqm-runbar { border-top-color: #2e3947; }
[data-bs-theme="dark"] .pqm-log-line { color: #94a3b8; }
[data-bs-theme="dark"] .pqm-state > i { color: #3a4658; }
[data-bs-theme="dark"] .pqm-state-t { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-btn { background: #1e2530; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-btn:hover { background: #262f3c; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-btn-go { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
/* Phải khai lại ở dark: `[data-bs-theme] .pqm-btn` ăn đứt `.pqm-btn-del` về độ ưu tiên → nút xoá
   mất hẳn màu đỏ, thành nút xám như nút thường (nguy hiểm: hành động phá huỷ mà không còn cảnh báo). */
[data-bs-theme="dark"] .pqm-btn-del { background: #ef4444; border-color: #ef4444; color: #fff; }
[data-bs-theme="dark"] .pqm-btn-del:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; color: #fff; }
[data-bs-theme="dark"] .pqm-post { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-navpg { background: #151b25; }
[data-bs-theme="dark"] .pqm-npg-card { background: #1e2735; border-color: #2e3947; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .pqm-npg-t { color: #f1f5f9; }
[data-bs-theme="dark"] .pqm-npg-ic { background: rgba(14,165,233,.16); color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-npg-cnt { background: rgba(14,165,233,.16); color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-npglist { border-top-color: #2e3947; }
[data-bs-theme="dark"] .pqm-npgitem:hover { background: #262f3c; }
[data-bs-theme="dark"] .pqm-drp-btn { background: #1e2530; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-drp-btn:hover { background: #262f3c; border-color: #4c5a72; }
[data-bs-theme="dark"] .pqm-drp { background: #1e2735; box-shadow: 0 8px 32px rgba(0,0,0,.55); }
[data-bs-theme="dark"] .pqm-drp-presets { background: #161d28; border-right-color: #2e3947; }
[data-bs-theme="dark"] .pqm-drp-preset { color: #94a3b8; }
[data-bs-theme="dark"] .pqm-drp-preset:hover { background: rgba(99,102,241,.16); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-drp-preset.on { background: rgba(99,102,241,.24); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-drp-nav { border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-drp-nav:hover { background: rgba(99,102,241,.16); border-color: #6366f1; color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-drp-csb { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.4); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-drp-csl { background: #1e2735; border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-drp-csi { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-drp-csi:hover { background: rgba(99,102,241,.16); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-drp-day { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-drp-day.ngoai { color: #4b5563; }
[data-bs-theme="dark"] .pqm-drp-day:hover { background: rgba(99,102,241,.16); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-drp-day.giua { background: rgba(99,102,241,.18); color: #a5b4fc; }
/* Nền tối phải nâng sáng nhãn thứ, giữ nguyên #64748b của bản sáng chỉ đạt 2.9:1 */
[data-bs-theme="dark"] .pqm-drp-wd { color: #94a3b8; }
[data-bs-theme="dark"] .pqm-drp-d { background: #1e2530; border-color: rgba(99,102,241,.4); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-drp-d::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.65); }
[data-bs-theme="dark"] .pqm-drp-foot { background: #161d28; border-top-color: #2e3947; }
[data-bs-theme="dark"] .pqm-gbar { background: #1a212b; border-bottom-color: #2e3947; }
[data-bs-theme="dark"] .pqm-gfoot { border-top-color: #2e3947; }
[data-bs-theme="dark"] .pqm-gsel,
[data-bs-theme="dark"] .pqm-gsearch-in { background-color: #1e2530; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-fpill { background: #1e2530; border-color: #2e3947; color: #94a3b8; }
[data-bs-theme="dark"] .pqm-fpill > span + span { border-left-color: #2e3947; }
[data-bs-theme="dark"] .pqm-fpill b { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-fstats i { color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-gth-none { background: #262f3c; }
[data-bs-theme="dark"] .pqm-gnul { color: #4b5563; }
[data-bs-theme="dark"] .pqm-gpill.k-text,
[data-bs-theme="dark"] .pqm-gpill.k-other,
[data-bs-theme="dark"] .pqm-gpill.s-mut { background: rgba(148,163,184,.16); color: #94a3b8; }
[data-bs-theme="dark"] .pqm-gpill.k-photo { background: rgba(14,165,233,.16); color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-gpill.k-video { background: rgba(139,92,246,.18); color: #c4b5fd; }
[data-bs-theme="dark"] .pqm-gpill.k-link { background: rgba(13,148,136,.18); color: #5eead4; }
[data-bs-theme="dark"] .pqm-gpill.s-ok { background: rgba(34,197,94,.16); color: #4ade80; }
[data-bs-theme="dark"] .pqm-gpill.s-warn { background: rgba(245,158,11,.16); color: #fbbf24; }
[data-bs-theme="dark"] .pqm-gpill.s-bad { background: rgba(239,68,68,.16); color: #f87171; }
[data-bs-theme="dark"] .pqm-gic { background: #1e2530; border-color: #2e3947; color: #94a3b8; }
[data-bs-theme="dark"] .pqm-gic:hover { background: #262f3c; border-color: #3b4757; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-gic-go:hover { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.42); color: #fbbf24; }
[data-bs-theme="dark"] .pqm-gic-del:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.42); color: #fca5a5; }
[data-bs-theme="dark"] .pqs-name:hover { color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-gstat.pqs-ok { color: #4ade80; }
[data-bs-theme="dark"] .pqm-gpill.r-like { background: rgba(24,119,242,.2); color: #60a5fa; }
[data-bs-theme="dark"] .pqm-gpill.r-love { background: rgba(244,63,94,.18); color: #fb7185; }
[data-bs-theme="dark"] .pqm-gpill.r-care,
[data-bs-theme="dark"] .pqm-gpill.r-haha,
[data-bs-theme="dark"] .pqm-gpill.r-wow { background: rgba(245,158,11,.16); color: #fbbf24; }
[data-bs-theme="dark"] .pqm-gpill.r-sad { background: rgba(148,163,184,.16); color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-gpill.r-angry { background: rgba(234,88,12,.18); color: #fb923c; }
[data-bs-theme="dark"] .pqm-gpill.r-comment { background: rgba(34,197,94,.16); color: #4ade80; }
[data-bs-theme="dark"] .pqm-dtp { background: #1e2735; box-shadow: 0 18px 48px rgba(0,0,0,.6); }
[data-bs-theme="dark"] .pqm-dtp-head, [data-bs-theme="dark"] .pqm-dtp-foot,
[data-bs-theme="dark"] .pqm-dtp-time { border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-dtp-foot { background: #1a212c; }
[data-bs-theme="dark"] .pqm-dtp-ic { background: rgba(99,102,241,.2); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-dtp-t { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-dtp-mon { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-dtp-tlbl { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-dtp-x:hover { background: #262f3c; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-dtp-nav { border-color: #2e3947; color: #94a3b8; }
[data-bs-theme="dark"] .pqm-dtp-nav:hover:not(:disabled) { background: #262f3c; border-color: #4c5a72; color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-dtp-day { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-dtp-day:hover { background: #262f3c; color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-dtp-day.ngoai, [data-bs-theme="dark"] .pqm-dtp-day.tat { color: #4b5563; }
[data-bs-theme="dark"] .pqm-dtp-day.tat:hover { background: none; color: #4b5563; }
[data-bs-theme="dark"] .pqm-dtp-day.chon { background: #6366f1; color: #fff; }
[data-bs-theme="dark"] .pqm-dtp-hm { background: #171d27; border-color: #2e3947; color: #c7d2fe; }
[data-bs-theme="dark"] .pqm-dtp-note { background: #171d27; color: #94a3b8; }
[data-bs-theme="dark"] .pqm-dtp-note b { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-dtp-note.ok { background: rgba(34,197,94,.14); color: #4ade80; }
[data-bs-theme="dark"] .pqm-dtp-note.ok b { color: #bbf7d0; }
[data-bs-theme="dark"] .pqm-dtp-note.loi { background: rgba(239,68,68,.16); color: #fca5a5; }
[data-bs-theme="dark"] .pqm-gcmt { background: #1e2530; border-color: #2e3947; color: #94a3b8; }
[data-bs-theme="dark"] .pqm-gcmt:hover { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.45); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-cmt { background: #1e2735; box-shadow: 0 18px 48px rgba(0,0,0,.6); }
[data-bs-theme="dark"] .pqm-cmt-hd, [data-bs-theme="dark"] .pqm-cmt-pcnt,
[data-bs-theme="dark"] .pqm-cmt-foot { border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-cmt-hd-t, [data-bs-theme="dark"] .pqm-cmt-pnm b,
[data-bs-theme="dark"] .pqm-cmt-bub b, [data-bs-theme="dark"] .pqm-cmt-reply-to b { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-cmt-x { background: #262f3c; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-cmt-x:hover { background: #303b4a; color: #f1f5f9; }
[data-bs-theme="dark"] .pqm-cmt-ptx, [data-bs-theme="dark"] .pqm-cmt-bub span { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-cmt-pimg { background-color: #262f3c; }
[data-bs-theme="dark"] .pqm-cmt-bub { background: #262f3c; }
[data-bs-theme="dark"] .pqm-cmt-all, [data-bs-theme="dark"] .pqm-cmt-a { color: #94a3b8; }
[data-bs-theme="dark"] .pqm-cmt-a:hover { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-cmt-a.on, [data-bs-theme="dark"] .pqm-cmt-lk, [data-bs-theme="dark"] .pqm-cmt-cnt { color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-cmt-ord { background: #1e2530; border-color: #2e3947; color: #cbd5e1; }
/* Bộ chọn thứ tự KHÔNG cần rule dark riêng: modern-theme/style.css đã có rule Select2 toàn app,
   đo trên bản live thấy đè sạch (ô #1b2433, dropdown #232e3d, chữ #e2e8f0). Thêm ở đây chỉ là rác. */
[data-bs-theme="dark"] .pqm-cmt-kids { border-left-color: #2e3947; }
[data-bs-theme="dark"] .pqm-cmt-hid { background: rgba(245,158,11,.16); color: #fbbf24; }
[data-bs-theme="dark"] .pqm-cmt-foot { background: #1a212c; }
[data-bs-theme="dark"] .pqm-cmt-in { background: #171d27; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-cmt-in:focus { background: #1e2530; border-color: #6366f1; }
[data-bs-theme="dark"] .pqm-cmt-send:disabled { background: #3b4757; }
[data-bs-theme="dark"] .pqm-thumb-none { background: #262f3c; }
[data-bs-theme="dark"] .pqm-post-msg { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-mini { background: #1e2530; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-mini:hover { background: #262f3c; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-mini-go { background: rgba(14,165,233,.14); border-color: rgba(14,165,233,.4); color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-mini-del { color: #f87171; }
[data-bs-theme="dark"] .pqm-mini-del:hover { background: #4c1d1d; color: #fca5a5; border-color: #7f1d1d; }
[data-bs-theme="dark"] .pqm-dup { background: #3a2e12; color: #fbbf24; }
[data-bs-theme="dark"] .pqm-editor, [data-bs-theme="dark"] .pqm-dt { background: #171d27; border-color: #2e3947; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-picker { background: #1a212c; }
[data-bs-theme="dark"] .pqm-pk-hd, [data-bs-theme="dark"] .pqm-pk-tools, [data-bs-theme="dark"] .pqm-pk-foot { border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-pk-title { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-pk-search { background: #262f3c; }
[data-bs-theme="dark"] .pqm-pk-name, [data-bs-theme="dark"] .pqm-pk-all, [data-bs-theme="dark"] .pqm-pk-count { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-pk-item:hover { background: #262f3c; }
[data-bs-theme="dark"] .pqm-pk-noimg { background: #303b4a; }

/* ---- Composer Đăng bài (3 cột) ---- */
.pqm-panel[data-panel="dang-bai"] .pqm-pbody { overflow: hidden; display: flex; }
.pqm-panel[data-panel="dang-bai"] .pqm-phead { align-self: center; width: 100%; max-width: 1240px; }
.pqm-compose { flex: 1; min-height: 0; width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; }
.pqm-cleft, .pqm-cmid, .pqm-cright { min-width: 0; overflow-y: auto; }
.pqm-cleft { border-right: 1px solid #eef2f7; background: #fafbfc; padding: 16px 14px; }
.pqm-cmid .pqm-host { max-width: none; }
.pqm-cright { border-left: 1px solid #eef2f7; background: #fafbfc; padding: 16px 16px; display: flex; flex-direction: column; overflow: hidden; }
.pqm-pghd { flex-shrink: 0; }
.pqm-csec { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #94a3b8; margin: 0 0 9px; }
.pqm-csec:not(:first-child) { margin-top: 18px; }
.pqm-cbox { background: #fff; border: 1px solid #e9edf4; border-radius: 14px; padding: 13px; box-shadow: 0 1px 3px rgba(15,23,42,.04); }
[data-bs-theme="dark"] .pqm-cbox { background: #1a212b; border-color: #2a3441; box-shadow: none; }
.pqm-pglist { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-height: 0; overflow-y: auto; }
.pqm-pgempty { display: flex; align-items: center; gap: 7px; padding: 12px; border: 1px dashed #d7deea; border-radius: 10px; color: #94a3b8; font-size: 12px; }
.pqm-pgempty i { font-size: 15px; }
.pqm-pghd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pqm-pgcnt { font-size: 12px; font-weight: 700; color: #6366f1; font-variant-numeric: tabular-nums; letter-spacing: normal; text-transform: none; }
.pqm-pgcnt:not(.on) { display: none; }
.pqm-pgitem { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #eef2f7; background: #fff; border-radius: 10px; }
.pqm-pgitem.on { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.pqm-pgitem.done { border-color: #bbf7d0; background: #f6fef9; }
.pqm-pgitem.fail { border-color: #fecaca; background: #fef6f6; }
.pqm-pgav { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #eef2f7; display: flex; align-items: center; justify-content: center; }
.pqm-pgav img { width: 100%; height: 100%; object-fit: cover; }
.pqm-pgav-none { color: #94a3b8; font-size: 15px; }
.pqm-pgmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pqm-pgnm { min-width: 0; font-size: 12.5px; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pqm-pgprog { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; color: #94a3b8; }
.pqm-pgprog > i { flex-shrink: 0; font-size: 13px; }
.pqm-pgprog > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pqm-pgprog.run { color: #6366f1; }
.pqm-pgprog.ok { color: #16a34a; }
.pqm-pgprog.err { color: #dc2626; }
.pqm-pgprog.run .ri-loader-4-line { animation: pqm-spin .7s linear infinite; }
[data-bs-theme="dark"] .pqm-pgitem { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-pgitem.done { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); }
[data-bs-theme="dark"] .pqm-pgitem.fail { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }
[data-bs-theme="dark"] .pqm-pgnm { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-pgav { background: #2e3947; }
[data-bs-theme="dark"] .pqm-pgempty { border-color: #3a4658; }
/* Chọn Trang inline (tick + tiến trình + mở bài) — mirror bên Nhóm */
.pqm-pgsearch { position: relative; margin-bottom: 8px; flex-shrink: 0; }
.pqm-pgsearch > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 15px; }
.pqm-pgsearch-in { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 10px 7px 32px; font-size: 13px; box-sizing: border-box; font-family: inherit; color: #334155; background: #fff; }
.pqm-pgsearch-in:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.pqm-pgall { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #64748b; padding: 2px 2px 8px; cursor: pointer; border-bottom: 1px solid #eef2f7; margin-bottom: 6px; flex-shrink: 0; }
.pqm-pgall input { accent-color: #6366f1; margin: 0; }
.pqm-pgitem { cursor: pointer; }
.pqm-pgcb { flex-shrink: 0; accent-color: #6366f1; margin: 0; }
.pqm-pgopen { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; color: #6366f1; font-size: 16px; cursor: pointer; }
.pqm-pgopen:hover { background: #eef2ff; color: #4f46e5; }
.pqm-pgitem.done .pqm-pgprog { color: #16a34a; }
.pqm-pgitem.fail .pqm-pgprog { color: #dc2626; }
/* Seeding: 3 cột trạng thái Cảm xúc / Bình luận / Chia sẻ trên mỗi Trang */
.pqm-pgitem.tt .pqm-pgnm { flex: 1; }
.pqm-pgtt { display: inline-flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
.pqm-ttc { width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; color: #94a3b8; background: #f1f5f9; transition: color .15s, background .15s; }
.pqm-ttc-skip { color: #cbd5e1; background: transparent; }
.pqm-ttc-run { color: #0ea5e9; background: #e0f2fe; }
.pqm-ttc-run i { animation: pqm-spin .7s linear infinite; }
.pqm-ttc-ok { color: #16a34a; background: #dcfce7; }
.pqm-ttc-fail { color: #dc2626; background: #fef2f2; }
[data-bs-theme="dark"] .pqm-ttc { background: rgba(255,255,255,.06); color: #7a8496; }
[data-bs-theme="dark"] .pqm-ttc-skip { background: transparent; color: #3a4658; }
[data-bs-theme="dark"] .pqm-ttc-run { background: rgba(14,165,233,.18); color: #38bdf8; }
[data-bs-theme="dark"] .pqm-ttc-ok { background: rgba(22,163,74,.18); color: #4ade80; }
[data-bs-theme="dark"] .pqm-ttc-fail { background: rgba(239,68,68,.16); color: #f87171; }
[data-bs-theme="dark"] .pqm-pgsearch-in { background: #1e2530; border-color: #2e3947; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-pgall { color: #94a3b8; border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-pgopen:hover { background: rgba(99,102,241,.16); }
.pqm-plist { display: flex; flex-direction: column; gap: 8px; }
.pqm-pitem { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #eef2f7; background: #fff; border-radius: 10px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.pqm-pitem:hover { border-color: #cbd5e1; }
.pqm-pitem.on { border-color: #0ea5e9; background: #f0f9ff; box-shadow: 0 0 0 2px #e0f2fe; }
.pqm-pgrip { color: #cbd5e1; font-size: 15px; cursor: grab; }
.pqm-pdoc { width: 28px; height: 28px; border-radius: 7px; background: #e0f2fe; color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.pqm-pnm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #334155; }
.pqm-pnm small { display: block; font-weight: 400; font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pqm-pdel { color: #94a3b8; font-size: 15px; padding: 2px; border-radius: 5px; }
.pqm-pdel:hover { color: #dc2626; background: #fef2f2; }
.pqm-addpost { margin-top: 9px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1px dashed #cbd5e1; background: transparent; color: #0284c7; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.pqm-addpost:hover { background: #f0f9ff; border-color: #0ea5e9; }
.pqm-dist { display: flex; flex-direction: column; gap: 9px; }
.pqm-df2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pqm-df { display: flex; flex-direction: column; gap: 4px; }
.pqm-df label { font-size: 11px; font-weight: 600; color: #64748b; }
.pqm-din, .pqm-dsel { border: 1px solid #e5e7eb; background: #fff; color: #334155; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; width: 100%; }
.pqm-din:focus, .pqm-dsel:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.pqm-run-wrap { margin-top: 0; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
/* ===== Tab Đăng bài: panel CHỈ còn cột soạn bài =====
   ⚠ Các lớp .pqm-compose / .pqm-cleft / .pqm-cmid / .pqm-cright / .pqm-run-wrap là lớp DÙNG
   CHUNG, workspace khác có thể dựng lại y hệt → sửa TRẦN là vỡ trang kia.
   ⚠⚠ Khoá bằng `.pqm-panel[data-panel="dang-bai"]` KHÔNG đủ: cả hai workspace đều dựng ĐÚNG
   panel đó và gốc overlay cũng y hệt (`pmb-overlay pqm-overlay`) → phải neo thêm lớp workspace.
   Trang và Nhóm nay CÙNG bố cục 1 cột nên kê cả hai; workspace nào chưa chuyển thì không mang
   lớp này và vẫn giữ lưới 3 cột mặc định ở trên. */
:is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-panel[data-panel="dang-bai"] .pqm-compose { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
/* Màn Theo dõi trải hết bề ngang; bản dùng chung đặt `grid-column: 1/4` cho lưới 3 cột, lưới 1
   cột sẽ sinh thêm 2 cột ngầm → dùng 1/-1. */
:is(.pqm-ws-page, .pqm-ws-group, .pqm-ws-profile) .pqm-panel[data-panel="dang-bai"] .pqm-compose.running .pqm-monitor { grid-column: 1 / -1; }
/* ===== Thẻ nổi NGOÀI CÙNG PHẢI: Danh sách bài + cụm nút chạy =====
   Đối xứng với .pqm-navpg bên trái: nền xám, thẻ trắng bo góc. Không chừa lề TRÁI vì khe với
   panel đã do `inset` của .pqm-panel lo (13px) — chừa cả 2 bên sẽ thành khe đôi. */
.pqm-sidepv { width: 336px; flex-shrink: 0; background: #f4f5f8; padding: 14px 13px 14px 0; display: flex; min-height: 0; }
/* Thẻ chia 2 tầng: phần trên cuộn riêng, cụm nút chạy GHIM ĐÁY nên luôn thấy dù danh sách dài */
.pqm-pv-card { overflow: hidden; }
.pqm-pv-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: 0 -4px; padding: 0 4px; }
.pqm-pv-card .pqm-cbox { flex-shrink: 0; }
.pqm-pv-card .pqm-run-wrap { flex-shrink: 0; margin: 0 -12px -10px; padding: 11px 12px 12px; border-top: 1px solid #eef2f7; }
[data-bs-theme="dark"] .pqm-sidepv { background: #151b25; }
[data-bs-theme="dark"] .pqm-pv-card .pqm-run-wrap { border-top-color: #2e3947; }
/* Bó 3 cột làm việc vào GIỮA ở tab Đăng bài — màn hình siêu rộng không kéo giãn vô ích.
   Tab Quản lý bài KHÔNG bó (bảng 17 cột cần hết bề ngang) nên chỉ áp khi overlay có .pqm-hep.
   ⚠ Con số này quyết bề ngang của THẺ GIỮA (.pqm-panel): hai thẻ bên rộng CỐ ĐỊNH (270 + 336),
   chỉ .pqm-content co giãn → panel = trần này − 606. 1320 cho panel ~714px, vừa tầm đọc cho
   form soạn bài (65-75 ký tự/dòng); để 1560 thì panel ~954px, chữ chạy dài hết cỡ. */
.pqm-work { flex: 1; min-width: 0; display: flex; }
.pqm-hep .pqm-work { max-width: 1320px; margin: 0 auto; }
@media (max-width: 1500px) { .pqm-sidepv { width: 300px; } }
/* (Cụm nút chạy đã chuyển sang thẻ nổi bên phải → xem .pqm-pv-card .pqm-run-wrap ở trên) */
/* Khoá thẻ chọn Trang trong lúc đang đăng — danh sách Trang đã chốt trước vòng lặp, tick thêm
   lúc này không đổi được gì nên đừng để bấm. */
.pqm-npg-card.lock { pointer-events: none; opacity: .72; }
.pqm-npg-prog { margin-left: auto; padding: 2px 8px; border-radius: 20px; background: #eef2ff; color: #4f46e5;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pqm-npg-prog + .pqm-npg-cnt { margin-left: 6px; }
[data-bs-theme="dark"] .pqm-npg-prog { background: rgba(99,102,241,.2); color: #a5b4fc; }
.pqm-run-compose { justify-content: center; }
.pqm-run-many { justify-content: center; background: #fff; color: #6d28d9; border: 1px solid #ddd6fe; }
.pqm-run-many:hover { background: #f5f3ff; border-color: #a78bfa; }
.pqm-run-row { display: flex; gap: 8px; }
.pqm-run-row > .pqm-btn { flex: 1; justify-content: center; white-space: nowrap; min-width: 0; padding-left: 8px; padding-right: 8px; }
.pqm-btn-save { background: #fff; color: #16a34a; border: 1px solid #bbf7d0; }
.pqm-btn-save:hover { background: #f0fdf4; border-color: #86efac; }
[data-bs-theme="dark"] .pqm-btn-save { background: #1e2530; color: #4ade80; border-color: rgba(34,197,94,.4); }
[data-bs-theme="dark"] .pqm-btn-save:hover { background: rgba(34,197,94,.14); border-color: #22c55e; }
/* Màn theo dõi chạy nhiều bài */
.pqm-monitor { display: none; }
.pqm-compose.running .pqm-cleft, .pqm-compose.running .pqm-cmid, .pqm-compose.running .pqm-cright { display: none; }
.pqm-compose.running .pqm-monitor { display: flex; flex-direction: column; grid-column: 1 / 4; min-width: 0; min-height: 0; padding: 16px; overflow: hidden; }
.pqm-mon-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pqm-mon-ttl { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #4f46e5; }
.pqm-mon-ttl i { font-size: 18px; }
.pqm-mon-act { display: flex; gap: 8px; }
.pqm-mon-stop, .pqm-mon-back { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid #e6e9f2; background: #fff; color: #475569; }
.pqm-mon-stop { color: #dc2626; border-color: #fecaca; }
.pqm-mon-stop:hover:not(:disabled) { background: #fef2f2; }
.pqm-mon-stop:disabled { opacity: .4; cursor: default; }
.pqm-mon-back:hover { background: #f8fafc; }
.pqm-mon-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pqm-mon-bar { height: 8px; border-radius: 99px; background: #e2e6f0; overflow: hidden; }
.pqm-mon-bar > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #6366f1); transition: width .3s ease; }
.pqm-mon-stats { display: flex; gap: 18px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pqm-mon-stats span { display: inline-flex; align-items: center; gap: 5px; }
.pqm-mon-stats .cnt { color: #334155; }
.pqm-mon-stats .ok { color: #16a34a; }
.pqm-mon-stats .er { color: #dc2626; }
.pqm-mon-stats .tm { color: #64748b; margin-left: auto; }
.pqm-mon-tablewrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid #eef2f7; border-radius: 12px; }
.pqm-mon-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pqm-mon-table thead th { position: sticky; top: 0; background: #f8f9fd; z-index: 1; text-align: left; padding: 9px 10px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.pqm-mon-table tbody td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.pqm-mon-table tbody tr.on { background: #f5f7ff; }
.pqm-mon-table tbody tr.done { background: #f6fef9; }
.pqm-mon-table tbody tr.fail { background: #fef6f6; }
.pm-pg { display: flex; align-items: center; gap: 7px; }
.pm-pg .pm-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #eef2f7; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 12px; }
.pm-pg .pm-av img { width: 100%; height: 100%; object-fit: cover; }
.pm-pg > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pm-post { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #64748b; }
.pm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pm-badge.wait { background: #f1f5f9; color: #94a3b8; }
.pm-badge.run { background: #eef2ff; color: #4f46e5; }
.pm-badge.ok { background: #dcfce7; color: #16a34a; }
.pm-badge.fail { background: #fee2e2; color: #dc2626; }
.pm-ok { color: #16a34a; font-size: 16px; }
.pm-err { color: #dc2626; font-weight: 700; }
.pm-link { display: inline-flex; align-items: center; gap: 4px; color: #4f46e5; text-decoration: none; font-weight: 600; white-space: nowrap; }
.pm-link:hover { text-decoration: underline; }
.pm-errmsg { color: #dc2626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 200px; }
[data-bs-theme="dark"] .pqm-run-many { background: #1e2530; color: #a5b4fc; border-color: #3a4658; }
[data-bs-theme="dark"] .pqm-run-many:hover { background: rgba(124,58,237,.16); border-color: #6366f1; }
[data-bs-theme="dark"] .pqm-mon-stop, [data-bs-theme="dark"] .pqm-mon-back { background: #1e2530; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-mon-stop { color: #f87171; border-color: rgba(239,68,68,.4); }
[data-bs-theme="dark"] .pqm-mon-tablewrap { border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-mon-table thead th { background: #12171e; color: #94a3b8; border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-mon-table tbody td { color: #e5e7eb; border-color: #232e3d; }
[data-bs-theme="dark"] .pqm-mon-table tbody tr.on { background: rgba(99,102,241,.1); }
[data-bs-theme="dark"] .pqm-mon-table tbody tr.done { background: rgba(34,197,94,.08); }
[data-bs-theme="dark"] .pqm-mon-table tbody tr.fail { background: rgba(239,68,68,.08); }
[data-bs-theme="dark"] .pqm-mon-bar { background: #2e3947; }
[data-bs-theme="dark"] .pm-post { color: #94a3b8; }
[data-bs-theme="dark"] .pm-pg .pm-av { background: #2e3947; }
.pqm-mon-setup { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.pqm-mon-setuphd { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #334155; }
.pqm-mon-setuphd > i { color: #6366f1; font-size: 17px; }
.pqm-mon-selcnt { color: #6366f1; font-weight: 700; }
.pqm-mon-selall { margin-left: auto; border: 1px solid #e6e9f2; background: #fff; color: #4f46e5; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.pqm-mon-selall:hover { background: #eef2ff; }
.pqm-mon-checklist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border: 1px solid #eef2f7; border-radius: 12px; padding: 10px; }
.pqm-mon-citem { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #eef2f7; border-radius: 10px; background: #fff; cursor: pointer; }
.pqm-mon-citem:hover { border-color: #c7d2fe; }
.pqm-mon-citem input { width: 18px; height: 18px; flex-shrink: 0; accent-color: #6366f1; cursor: pointer; }
.pqm-mon-citem.empty { opacity: .55; }
.pm-cdoc { width: 32px; height: 32px; border-radius: 8px; background: #eef2ff; color: #6366f1; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.pm-cmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-cmain b { font-size: 13px; color: #334155; }
.pm-cmain small { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-cbadges { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; }
.pm-cbg { font-size: 10.5px; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.pqm-mon-dist { border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; }
.pqm-mon-distlbl { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 10px; }
.pqm-mon-distlbl i { color: #6366f1; font-size: 15px; }
.pqm-mon-distrow { display: flex; gap: 12px; flex-wrap: wrap; }
.pqm-mon-distrow .pqm-df { flex: 1; min-width: 150px; }
[data-bs-theme="dark"] .pqm-mon-dist { border-color: #2e3947; }
.pqm-mon-start { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; border: 0; background: #6366f1; color: #fff; border-radius: 10px; padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 3px 10px rgba(99,102,241,.3); }
.pqm-mon-start:hover { background: #4f46e5; }
.pqm-mon-chk { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #475569; cursor: pointer; padding: 2px 0; }
.pqm-mon-chk input { width: 17px; height: 17px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0; margin: 0; }
.pqm-mon-chk b { color: #4f46e5; }
.pqm-mon-tone { display: flex; gap: 18px; padding: 2px 0 4px 26px; }
.pqm-mon-radio { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #64748b; cursor: pointer; }
.pqm-mon-radio input { width: 15px; height: 15px; accent-color: #6366f1; cursor: pointer; margin: 0; }
[data-bs-theme="dark"] .pqm-mon-chk { color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-mon-chk b { color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-mon-radio { color: #94a3b8; }
[data-bs-theme="dark"] .pqm-mon-setuphd { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-mon-selall { background: #1e2530; border-color: #2e3947; color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-mon-checklist { border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-mon-citem { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pm-cmain b { color: #e5e7eb; }
[data-bs-theme="dark"] .pm-cdoc { background: rgba(99,102,241,.18); }
[data-bs-theme="dark"] .pm-cbg { background: #232e3d; color: #cbd5e1; }
/* Swal đặt tên bài (Lưu Bài Viết) */
.swal2-popup.pqm-swal { border-radius: 16px !important; padding: 26px !important; font-family: inherit; width: 28em; max-width: 92vw; }
.swal2-popup.pqm-swal .swal2-title { font-size: 18px; font-weight: 700; color: #1e293b; padding: 0 0 2px; }
.pqm-swal-lb { color: #64748b !important; font-size: 12.5px !important; font-weight: 600 !important; margin: 8px 0 6px !important; }
.pqm-swal-in.swal2-input { border: 1px solid #dfe3ec !important; border-radius: 10px !important; font-size: 14px !important; box-shadow: none !important; height: auto !important; padding: 11px 13px !important; margin: 2px auto 4px !important; width: 100%; color: #334155; font-family: inherit; }
.pqm-swal-in.swal2-input:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important; }
.swal2-popup.pqm-swal .swal2-actions { gap: 8px; margin-top: 20px; }
.pqm-swal-ok, .pqm-swal-cancel { border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; padding: 11px 24px; cursor: pointer; font-family: inherit; }
.pqm-swal-ok { background: #6366f1; color: #fff; }
.pqm-swal-ok:hover { background: #4f46e5; }
.pqm-swal-cancel { background: #f1f5f9; color: #475569; }
.pqm-swal-cancel:hover { background: #e2e8f0; }
[data-bs-theme="dark"] .swal2-popup.pqm-swal { background: #1a212b !important; }
[data-bs-theme="dark"] .swal2-popup.pqm-swal .swal2-title { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-swal-lb { color: #94a3b8 !important; }
[data-bs-theme="dark"] .pqm-swal-in.swal2-input { background: #171d27 !important; border-color: #333c4e !important; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-swal-cancel { background: #232e3d; color: #cbd5e1; }
[data-bs-theme="dark"] .pqm-swal-cancel:hover { background: #2e3947; }
@media (max-width: 1180px) { .pqm-compose { grid-template-columns: 280px minmax(0, 1fr); } .pqm-cright { display: none; } }
@media (max-width: 820px) { .pqm-compose { grid-template-columns: minmax(0, 1fr); } .pqm-cleft { display: none; } }
[data-bs-theme="dark"] .pqm-cleft, [data-bs-theme="dark"] .pqm-cright { background: #12171e; border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-pitem { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .pqm-pitem:hover { border-color: #3a4658; }
[data-bs-theme="dark"] .pqm-pitem.on { background: rgba(14,165,233,.12); border-color: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.2); }
[data-bs-theme="dark"] .pqm-pdoc { background: rgba(14,165,233,.2); color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-pnm { color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-addpost { border-color: #3a4658; color: #7dd3fc; }
[data-bs-theme="dark"] .pqm-addpost:hover { background: rgba(14,165,233,.14); border-color: #0ea5e9; }
[data-bs-theme="dark"] .pqm-din, [data-bs-theme="dark"] .pqm-dsel { background: #171d27; border-color: #2e3947; color: #e5e7eb; }
[data-bs-theme="dark"] .pqm-df label { color: #94a3b8; }

/* ---- Accent TÍM (đồng bộ app --primary) — đè sky cho workspace ---- */
.pqm-overlay .pqm-brand-ic { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 12px rgba(99,102,241,.32); }
.pqm-overlay .pqm-nav-item.on { background: #eef2ff; color: #4f46e5; }
.pqm-overlay .pqm-nav-item.on i { color: #6366f1; }
.pqm-overlay .pqm-pagechip.on { border-color: #6366f1; background: #eef2ff; color: #4f46e5; }
.pqm-overlay .pqm-btn-go { background: #6366f1; border-color: #6366f1; box-shadow: 0 3px 10px rgba(99,102,241,.3); }
.pqm-overlay .pqm-btn-go:hover { background: #4f46e5; border-color: #4f46e5; }
.pqm-overlay .pqm-pitem.on { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 2px #e0e7ff; }
.pqm-overlay .pqm-pdoc { background: #e0e7ff; color: #4f46e5; }
.pqm-overlay .pqm-addpost { color: #4f46e5; }
.pqm-overlay .pqm-addpost:hover { background: #eef2ff; border-color: #6366f1; }
.pqm-overlay .pqm-pagetag { color: #6366f1; }
.pqm-overlay .pqm-mini-go { color: #4f46e5; border-color: #c7d2fe; background: #eef2ff; }
.pqm-overlay .pqm-mini-go:hover { background: #e0e7ff; border-color: #a5b4fc; color: #4338ca; }
.pqm-overlay .pqm-pk-title i, .pqm-overlay .pqm-pk-tick { color: #6366f1; }
.pqm-overlay .pqm-pk-item input[type="checkbox"] { accent-color: #6366f1; }
.pqm-overlay .pqm-din:focus, .pqm-overlay .pqm-dsel:focus, .pqm-overlay .pqm-editor:focus, .pqm-overlay .pqm-dt:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
[data-bs-theme="dark"] .pqm-overlay .pqm-nav-item.on { background: rgba(99,102,241,.18); color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-overlay .pqm-nav-item.on i { color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-overlay .pqm-pagechip.on { background: rgba(99,102,241,.16); border-color: #6366f1; color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-overlay .pqm-pitem.on { background: rgba(99,102,241,.14); border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.2); }
[data-bs-theme="dark"] .pqm-overlay .pqm-pdoc { background: rgba(99,102,241,.24); color: #c7d2fe; }
[data-bs-theme="dark"] .pqm-overlay .pqm-addpost { color: #a5b4fc; }
[data-bs-theme="dark"] .pqm-overlay .pqm-mini-go { background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.4); color: #a5b4fc; }

/* ===== Trả lời 1 tin nhắn (Hộp thư) ===== */
.pmb-tab-inbox .pmb-msg { position: relative; }
.pmb-msg-reply { align-self: center; width: 26px; height: 26px; border: none; border-radius: 50%; background: #f1f5f9; color: #64748b; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, background .12s; flex-shrink: 0; }
.pmb-msg:hover .pmb-msg-reply { opacity: .65; }
.pmb-msg-reply:hover { opacity: 1; background: #e2e8f0; color: #334155; }
.pmb-msg-quote { font-size: 11.5px; opacity: .8; border-left: 2px solid currentColor; padding: 1px 0 1px 6px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmb-msg.out .pmb-msg-quote { color: #e9e5ff; }
.pmb-reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f8fafc; border-left: 3px solid var(--primary-start, #6366f1); border-radius: 6px; padding: 5px 9px; margin-bottom: 7px; }
.pmb-reply-info { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pmb-reply-info > i { font-size: 15px; flex-shrink: 0; color: var(--primary-start, #6366f1); }
.pmb-reply-txt { min-width: 0; }
.pmb-reply-to { font-size: 11px; font-weight: 700; color: var(--primary-start, #6366f1); }
.pmb-reply-snip { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmb-reply-x { border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 16px; padding: 2px; flex-shrink: 0; display: inline-flex; }
.pmb-reply-x:hover { color: #ef4444; }
[data-bs-theme="dark"] .pmb-msg-reply { background: #262f3c; color: #94a3b8; }
[data-bs-theme="dark"] .pmb-msg-reply:hover { background: #303b4a; color: #cbd5e1; }
[data-bs-theme="dark"] .pmb-reply-bar { background: #262f3c; }
[data-bs-theme="dark"] .pmb-reply-snip { color: #94a3b8; }

/* ===== Password input eye toggle (fx-pwd-wrap + fx-pwd-toggle) ===== */
.fx-pwd-wrap { position: relative; display: block; }
.fx-pwd-wrap > .form-control,
.fx-pwd-wrap > input[type="password"],
.fx-pwd-wrap > input[type="text"] { padding-right: 36px; }
.fx-pwd-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
  transition: color .15s;
  line-height: 1;
}
.fx-pwd-toggle:hover { color: #374151; }
[data-bs-theme="dark"] .fx-pwd-toggle { color: #9ca3af; }
[data-bs-theme="dark"] .fx-pwd-toggle:hover { color: #e5e7eb; }

/* ===== Password input eye toggle (fx-pwd-wrap + fx-pwd-toggle) ===== */
.fx-pwd-wrap { position: relative; display: block; }
.fx-pwd-wrap > .form-control { padding-right: 36px; }
.fx-pwd-wrap > input[type="password"], .fx-pwd-wrap > input[type="text"] { padding-right: 36px; }

/* ===== HẾT HẠN GÓI: banner nhắc gia hạn + khoá feature card ===== */
:root { --fiox-exp-bar-h: 52px; }
.fiox-expired-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
  height: var(--fiox-exp-bar-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, #b45309, #d97706);
  color: #fff; padding: 9px 16px; font-size: 13.5px;
  box-shadow: 0 -2px 14px rgba(0,0,0,.22);
}
.fiox-expired-bar > i { font-size: 18px; flex-shrink: 0; }
.fiox-expired-bar > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiox-expired-bar b { font-weight: 800; }
.fiox-expired-btn {
  border: none; background: #fff; color: #b45309; font-weight: 700;
  padding: 6px 16px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  font-size: 13px; transition: background .15s;
}
.fiox-expired-btn:hover { background: #fffbeb; }
/* Hết hạn: chừa đúng chiều cao banner ở đáy để KHÔNG che chân trang.
   Phải giảm CẢ .account-wrapper (chứa footer, cao calc(100vh - 48px))
   VÀ #adPanel (absolute, neo theo viewport, cao calc(100% - 153px)) —
   giảm 1 cái thì cái kia vẫn thò xuống che footer vừa đẩy lên. */
body.fiox-has-expired-bar .account-wrapper {
  height: calc(100vh - 48px - var(--fiox-exp-bar-h));
}
body.fiox-has-expired-bar #adPanel {
  height: calc(100% - 153px - var(--fiox-exp-bar-h)) !important;
}
/* Feature card đã khoá: xám + overlay bắt click + badge ổ khoá */
.fiox-locked { position: relative; }
.fiox-locked > * { filter: grayscale(.5); opacity: .68; }
.fiox-locked::after {
  content: ""; position: absolute; inset: 0; z-index: 5;
  background: rgba(148,163,184,.1); border-radius: 12px; cursor: not-allowed;
}
.fiox-locked::before {
  content: "🔒 Đã khoá"; position: absolute; top: 8px; right: 10px; z-index: 6;
  background: #b45309; color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 8px; pointer-events: none; letter-spacing: .2px;
}
/* Chữ do CSS sinh ra (::before) KHÔNG phải text node nên lớp dịch không với tới. Bám vào dấu
   data-i18n-lang mà server đã đóng sẵn lên <html> để đổi theo ngôn ngữ. */
:root[data-i18n-lang="en"] .fiox-locked::before { content: "🔒 Locked"; }

/* ===== Cột Message: icon trạng thái theo dòng (đang chạy / thành công / lỗi) =====
   Text màu tươi (#ef4444, #16a34a) trên white contrast thấp → chữ mờ/lóa.
   Đổi sang shade đậm hơn (đạt WCAG AA) + font-weight 500 + antialias cho nét. */
.ag-cell[col-id="message"] { cursor: pointer; }
.fxmsg {
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0; max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.fxmsg-ic { flex-shrink: 0; font-size: 15px; line-height: 1; }
.fxmsg-err { color: #dc2626; }
.fxmsg-ok { color: #15803d; }
.fxmsg-run { color: #4f46e5; display: inline-block; animation: spin 0.8s linear infinite; }
.fxmsg-info { color: #64748b; }
.fxmsg-txt {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.fxmsg-t-err .fxmsg-txt { color: #b91c1c; }
.fxmsg-t-ok .fxmsg-txt { color: #15803d; }
[data-bs-theme="dark"] .fxmsg-err { color: #f87171; }
[data-bs-theme="dark"] .fxmsg-t-err .fxmsg-txt { color: #fca5a5; }
[data-bs-theme="dark"] .fxmsg-ok, [data-bs-theme="dark"] .fxmsg-t-ok .fxmsg-txt { color: #86efac; }
[data-bs-theme="dark"] .fxmsg-run { color: #a5b4fc; }
[data-bs-theme="dark"] .fxmsg-info { color: #94a3b8; }
/* ===== Popup tiến trình (bấm ô Message) — overlay timeline khớp modal app ===== */
.fxlog-ov { position: fixed; inset: 0; z-index: 20001; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.fxlog-modal { width: 100%; max-width: 520px; max-height: 82vh; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(15,23,42,.45); display: flex; flex-direction: column; overflow: hidden; }
.fxlog-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #eef0f3; flex-shrink: 0; }
.fxlog-h-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1)); color: #fff; font-size: 19px; }
.fxlog-h-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fxlog-h-title { font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.fxlog-h-sub { font-size: 12.5px; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxlog-close { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.fxlog-close:hover { background: #e2e8f0; color: #0f172a; }
.fxlog-body { padding: 18px; overflow-y: auto; }
.fxlog-item { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.fxlog-item:last-child { padding-bottom: 0; }
.fxlog-item::before { content: ""; position: absolute; left: 12px; top: 27px; bottom: -1px; width: 2px; background: #e5e7eb; }
.fxlog-item:last-child::before { display: none; }
.fxlog-dot { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; z-index: 1; background: #f1f5f9; color: #94a3b8; }
.fxlog-dot.fxmsg-err { background: #fee2e2; color: #ef4444; }
.fxlog-dot.fxmsg-ok { background: #dcfce7; color: #16a34a; }
.fxlog-dot.fxmsg-run { background: #e0e7ff; color: #6366f1; }
.fxlog-dot.fxmsg-run i { display: inline-block; animation: spin 0.8s linear infinite; }
.fxlog-msg { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: #334155; padding-top: 3px; word-break: break-word; }
[data-bs-theme="dark"] .fxlog-modal { background: #1e2530; }
[data-bs-theme="dark"] .fxlog-head { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .fxlog-h-title { color: #e2e8f0; }
[data-bs-theme="dark"] .fxlog-close { background: #2e3a4b; color: #94a3b8; }
[data-bs-theme="dark"] .fxlog-close:hover { background: #3a475a; color: #e2e8f0; }
[data-bs-theme="dark"] .fxlog-item::before { background: #2e3a4b; }
[data-bs-theme="dark"] .fxlog-msg { color: #cbd5e1; }

/* ============================================================
   POPUP HƯỚNG DẪN SỬ DỤNG — 3 PHẦN cố định header/footer, content cuộn
   ------------------------------------------------------------
   CHUẨN: mọi popup hướng dẫn dùng bộ class này.
   • .fx-guide-modal = flex column + max-height + overflow:hidden  (khung)
   • .fx-guide-head  = flex-shrink:0   → HEADER ĐỨNG YÊN khi cuộn
   • .fx-guide-body  = flex:1 + min-height:0 + overflow-y:auto → CHỈ PHẦN NÀY CUỘN
   • .fx-guide-foot  = flex-shrink:0   → FOOTER ĐỨNG YÊN khi cuộn
   (min-height:0 trên body BẮT BUỘC — thiếu nó flex-child không co, không cuộn được)
   ============================================================ */
.fx-guide-ov { position: fixed; inset: 0; z-index: 20001; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.fx-guide-modal { width: 100%; max-width: 560px; max-height: 85vh; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(15,23,42,.45); display: flex; flex-direction: column; overflow: hidden; }

/* 1) HEADER — cố định */
.fx-guide-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef0f3; flex-shrink: 0; }
.fx-guide-h-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-end, #8b5cf6), var(--primary-start, #6366f1)); color: #fff; font-size: 20px; }
.fx-guide-h-text { flex: 1; min-width: 0; }
.fx-guide-h-title { font-size: 16.5px; font-weight: 700; color: #0f172a; line-height: 1.25; }
.fx-guide-h-sub { font-size: 12.5px; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-guide-close { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.fx-guide-close:hover { background: #e2e8f0; color: #0f172a; }

/* 2) CONTENT — CUỘN (chỉ phần này) */
.fx-guide-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; font-size: 14px; line-height: 1.65; color: #334155; }
.fx-guide-body h4 { font-size: 14.5px; font-weight: 700; color: #0f172a; margin: 18px 0 8px; }
.fx-guide-body h4:first-child { margin-top: 0; }
.fx-guide-body p { margin: 0 0 10px; }
.fx-guide-body ol, .fx-guide-body ul { margin: 0 0 12px; padding-left: 22px; }
.fx-guide-body li { margin-bottom: 6px; }

/* 3) FOOTER — cố định */
.fx-guide-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #eef0f3; flex-shrink: 0; }

/* Dark mode */
[data-bs-theme="dark"] .fx-guide-modal { background: #1e2530; }
[data-bs-theme="dark"] .fx-guide-head { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .fx-guide-h-title, [data-bs-theme="dark"] .fx-guide-body h4 { color: #e2e8f0; }
[data-bs-theme="dark"] .fx-guide-body { color: #cbd5e1; }
[data-bs-theme="dark"] .fx-guide-close { background: #2e3a4b; color: #94a3b8; }
[data-bs-theme="dark"] .fx-guide-close:hover { background: #3a475a; color: #e2e8f0; }
[data-bs-theme="dark"] .fx-guide-foot { border-top-color: #2e3a4b; }
[data-bs-theme="dark"] .fxlog-dot { background: #262f3c; }
[data-bs-theme="dark"] .fxlog-dot.fxmsg-err { background: rgba(239,68,68,.18); color: #f87171; }
[data-bs-theme="dark"] .fxlog-dot.fxmsg-ok { background: rgba(22,163,74,.2); color: #4ade80; }
[data-bs-theme="dark"] .fxlog-dot.fxmsg-run { background: rgba(99,102,241,.22); color: #a5b4fc; }

/* ===== Ô tìm nhanh tính năng ở sidebar (TKQC / BM / Pages / Clone) =====
   Hàng dính ngay DƯỚI header "Chức năng" — header cao đúng 40px nên top: 40px. */
/* padding ngang 16px = px-3 của header + p-3 của danh sách card → thẳng mép.
   top: 45px = chiều cao header (đệm 10+11 + nội dung 24) để hàng này dính đúng
   ngay dưới header khi cuộn — đổi đệm header thì phải đổi số này theo. */
.fx-fsearch {
  position: sticky; top: 45px; z-index: 19;
  padding: 0 16px 11px; background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
}
/* Icon căn theo VÙNG Ô NHẬP, không theo cả hàng: hàng còn 11px đệm dưới nên
   top:50% của hàng nằm thấp hơn tâm ô nhập. Trừ đúng phần đệm đó rồi flex-center. */
.fx-fsearch-ic {
  position: absolute; left: 26px; top: 0; bottom: 11px;
  display: flex; align-items: center;
  color: #9ca3af; font-size: 14px; pointer-events: none;
}
.fx-fsearch-input {
  width: 100%; height: 30px; padding: 0 30px 0 32px;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  background: #fff; color: #374151; font-size: 12px;
  outline: none; box-sizing: border-box;
}
.fx-fsearch-input:focus { border-color: #a5b4fc; }
/* type="search" → ẩn nút X mặc định của trình duyệt (đã có nút ✕ riêng .fx-fsearch-clear) */
.fx-fsearch-input::-webkit-search-cancel-button,
.fx-fsearch-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fx-fsearch-clear {
  position: absolute; right: 26px; top: 0; bottom: 11px;
  align-items: center;
  color: #9ca3af; font-size: 15px; cursor: pointer; display: none;
}
.fx-fsearch.has-value .fx-fsearch-clear { display: flex; }
.fx-fsearch-clear:hover { color: #ef4444; }
/* Card bị lọc: dùng CLASS riêng, KHÔNG đụng style.display — nút X ẩn feature
   ghi thẳng inline display:none, xoá ô tìm kiếm không được làm nó hiện lại. */
.fx-fsearch-hide { display: none !important; }
.fx-fsearch-empty {
  padding: 18px 12px; text-align: center; color: #9ca3af; font-size: 12.5px;
}
[data-bs-theme="dark"] .fx-fsearch { background: #232e3d; border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fx-fsearch-input { background: #262f3c; border-color: #2e3a4b; color: #e2e8f0; }

/* ===== Popup chọn khoảng thời gian của "Tải hóa đơn" (ads-tai-hoa-don) =====
   Hộp nổi GIỮA màn hình; phần lịch bên trong dùng lại nguyên CSS .drp-* của
   bộ lọc ngày trên thanh công cụ (kể cả bản dark) → chỉ cần style lớp vỏ. */
.ivd-ov {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45); padding: 16px;
}
/* width theo NỘI DUNG (lịch 2 tháng = 7 ô 30px + preset + nút điều hướng);
   đặt cứng 660px thì bảng rộng hơn hộp → cuộn ngang dù màn còn thừa chỗ. */
.ivd-pop {
  background: #fff; border-radius: 12px; font-size: 13px;
  width: max-content; max-width: 96vw; max-height: 92vh; overflow: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .12);
}
/* Nhãn ngày trong card hẹp (2 cột) → cắt bớt bằng "…" thay vì đẩy tràn nút.
   height 40px = đúng chiều cao select2 bên cạnh (.select2-selection--single). */
#invoiceDlDateBtn {
  overflow: hidden; height: 40px; border-radius: var(--radius-md);
}
#invoiceDlDateBtn > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ivd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid #f0f0f0;
  font-weight: 600; font-size: 14px;
}
.ivd-x {
  border: none; background: none; color: #94a3b8; font-size: 19px;
  line-height: 1; padding: 0; cursor: pointer; transition: color .15s;
}
.ivd-x:hover { color: #ef4444; }
[data-bs-theme="dark"] .ivd-pop { background: #1e2530; color: #e2e8f0; }
[data-bs-theme="dark"] .ivd-head { border-bottom-color: #2e3a4b; }

/* ============================================================
   NHẬT KÝ LỖI (.fxcl-*) — bảng xem log console cho khách, mở bằng Ctrl+Shift+L.
   Cấu trúc 3 phần cố định giống .fx-guide-*: head/bar/foot flex-shrink:0,
   body flex:1 + min-height:0 + overflow-y:auto (thiếu min-height:0 sẽ không cuộn).
   z-index 100002 — trên popup tiến trình (.v2 = 100000) và toast (99999) để luôn
   xem được log kể cả khi popup khác đang mở.
   ============================================================ */
.fxcl-ov { position: fixed; inset: 0; z-index: 100002; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; padding: 20px; }
.fxcl-ov.is-open { display: flex; }
.fxcl-modal { width: 100%; max-width: 880px; max-height: 86vh; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(15,23,42,.45); display: flex; flex-direction: column; overflow: hidden; }

.fxcl-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef0f3; flex-shrink: 0; }
.fxcl-h-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f5f3ff; color: #8b5cf6; font-size: 20px; }
.fxcl-h-tx { flex: 1; min-width: 0; }
.fxcl-h-title { font-size: 16.5px; font-weight: 700; color: #0f172a; line-height: 1.25; }
.fxcl-h-sub { font-size: 12.5px; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxcl-close { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.fxcl-close:hover { background: #e2e8f0; color: #0f172a; }

.fxcl-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #eef0f3; flex-shrink: 0; flex-wrap: wrap; }
.fxcl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.fxcl-f { border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fxcl-f:hover { background: #f8fafc; color: #0f172a; }
.fxcl-f.is-active { background: var(--primary-start, #6366f1); border-color: var(--primary-start, #6366f1); color: #fff; }
.fxcl-search { flex: 1; min-width: 160px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 12px; font-size: 13px; color: #0f172a; background: #fff; outline: none; transition: border-color .15s; }
.fxcl-search:focus { border-color: var(--primary-start, #6366f1); }

.fxcl-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; background: #f8fafc; font-size: 12.5px; }
.fxcl-row { display: flex; gap: 8px; padding: 7px 8px; border-radius: 8px; align-items: flex-start; border-left: 3px solid transparent; }
.fxcl-row + .fxcl-row { margin-top: 3px; }
.fxcl-row.is-error { background: rgba(239,68,68,.07); border-left-color: #ef4444; }
.fxcl-row.is-warn { background: rgba(245,158,11,.09); border-left-color: #f59e0b; }
.fxcl-time { flex-shrink: 0; color: #94a3b8; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.fxcl-lv { flex-shrink: 0; min-width: 62px; font-weight: 700; color: #64748b; }
.fxcl-row.is-error .fxcl-lv { color: #ef4444; }
.fxcl-row.is-warn .fxcl-lv { color: #d97706; }
.fxcl-msg { flex: 1; min-width: 0; color: #334155; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; line-height: 1.55; }
.fxcl-empty { text-align: center; color: #94a3b8; padding: 40px 20px; }
.fxcl-empty i { font-size: 34px; display: block; margin-bottom: 8px; opacity: .6; }
.fxcl-empty p { margin: 0; font-size: 13px; }
.fxcl-more { text-align: center; color: #94a3b8; font-size: 12px; padding: 12px; }

.fxcl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid #eef0f3; flex-shrink: 0; flex-wrap: wrap; }
.fxcl-stat { font-size: 13px; color: #64748b; }
.fxcl-stat b { color: #0f172a; }
.fxcl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fxcl-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fxcl-btn:hover { background: #f1f5f9; color: #0f172a; }
.fxcl-btn.is-primary { background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6)); border-color: transparent; color: #fff; }
.fxcl-btn.is-primary:hover { filter: brightness(1.06); color: #fff; }

/* Dark mode */
[data-bs-theme="dark"] .fxcl-modal { background: #1e2530; }
[data-bs-theme="dark"] .fxcl-head, [data-bs-theme="dark"] .fxcl-bar { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .fxcl-h-title { color: #e2e8f0; }
[data-bs-theme="dark"] .fxcl-close { background: #2e3a4b; color: #94a3b8; }
[data-bs-theme="dark"] .fxcl-close:hover { background: #3a475a; color: #e2e8f0; }
[data-bs-theme="dark"] .fxcl-f { background: #232e3d; border-color: #2e3a4b; color: #94a3b8; }
[data-bs-theme="dark"] .fxcl-f:hover { background: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .fxcl-f.is-active { background: var(--primary-start, #6366f1); border-color: var(--primary-start, #6366f1); color: #fff; }
[data-bs-theme="dark"] .fxcl-search { background: #232e3d; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .fxcl-body { background: #171e29; }
[data-bs-theme="dark"] .fxcl-msg { color: #cbd5e1; }
[data-bs-theme="dark"] .fxcl-lv { color: #94a3b8; }
[data-bs-theme="dark"] .fxcl-row.is-error { background: rgba(239,68,68,.14); }
[data-bs-theme="dark"] .fxcl-row.is-warn { background: rgba(245,158,11,.14); }
[data-bs-theme="dark"] .fxcl-row.is-warn .fxcl-lv { color: #fbbf24; }
[data-bs-theme="dark"] .fxcl-foot { border-top-color: #2e3a4b; }
[data-bs-theme="dark"] .fxcl-stat b { color: #e2e8f0; }
[data-bs-theme="dark"] .fxcl-btn { background: #232e3d; border-color: #2e3a4b; color: #cbd5e1; }
[data-bs-theme="dark"] .fxcl-btn:hover { background: #2e3a4b; color: #e2e8f0; }

/* ================================================================================
 * NỀN TỐI — ĐỢT VÁ DIỆN RỘNG
 *
 * Nguồn: rà soát toàn bộ server/public/css, server/public/js và server/views. Mọi
 * component dưới đây đặt màu SÁNG ghi cứng (#fff, #1a1a1a, #f0f0f0…) mà không có
 * luật [data-bs-theme="dark"] nào phủ, nên giữ nguyên màu sáng khi cả trang chuyển
 * tối — nền trắng giữa nền tối, hoặc chữ đen trên nền tối.
 *
 * NGUYÊN TẮC: chỉ THÊM luật tối, KHÔNG đụng luật sáng. Giao diện sáng là mặc định và
 * đang đúng; viết lại nó sang biến sẽ đổi cả màu đang chạy tốt.
 *
 * Bảng màu theo đúng tiền lệ trong chính file này:
 *   #232e3d nền nổi (modal/popup/card) · #171e29 nền chìm (ô nhập, vùng cuộn)
 *   #2e3a4b viền và nền hover · #e2e8f0 chữ chính · #94a3b8 chữ phụ · #cbd5e1 chữ mờ
 * ================================================================================ */

/* ── Popup Phương thức thanh toán (cột Thanh toán ở lưới TKQC) ── */
[data-bs-theme="dark"] .pm-modal { background: #232e3d; }
[data-bs-theme="dark"] .pm-header { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .pm-title { color: #e2e8f0; }
[data-bs-theme="dark"] .pm-account strong { color: #e2e8f0; }
[data-bs-theme="dark"] .pm-account small { color: #94a3b8; }
[data-bs-theme="dark"] .pm-card { border-color: #2e3a4b; }
[data-bs-theme="dark"] .pm-card-num { color: #e2e8f0; }
[data-bs-theme="dark"] .pm-card-sub { color: #94a3b8; }
[data-bs-theme="dark"] .pm-empty { color: #94a3b8; }
/* Nút xoá: nền đỏ nhạt #fef2f2 trên nền tối thành một mảng chói. Hạ về đỏ trong suốt. */
[data-bs-theme="dark"] .pm-del-btn { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
[data-bs-theme="dark"] .pm-del-btn:hover { background: rgba(239,68,68,.22); }

/* ── Popup Đặt giới hạn chi tiêu (.scm-*) ── */
[data-bs-theme="dark"] .scm-modal { background: #232e3d; }
[data-bs-theme="dark"] .scm-header { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .scm-title { color: #e2e8f0; }
/* Nút đóng là hình tròn nổi ĐÈ LÊN góc modal — nền phải trùng modal thì chỗ giao mới
   liền mạch, đúng như chú thích ở luật sáng. Đổi trắng sang màu nền tối của modal. */
[data-bs-theme="dark"] .scm-close-btn { background: #232e3d; }
[data-bs-theme="dark"] .scm-account { background: #171e29; border-color: #2e3a4b; }
[data-bs-theme="dark"] .scm-account strong { color: #e2e8f0; }
[data-bs-theme="dark"] .scm-account small { color: #94a3b8; }
[data-bs-theme="dark"] .scm-status-main { color: #e2e8f0; }
[data-bs-theme="dark"] .scm-status-sub { color: #cbd5e1; }
[data-bs-theme="dark"] .scm-hint { color: #94a3b8; }
[data-bs-theme="dark"] .scm-section-title { color: #94a3b8; }
[data-bs-theme="dark"] .scm-radio { background: #171e29; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .scm-radio-dot { border-color: #4a5568; }
[data-bs-theme="dark"] .scm-input-row { background: #171e29; border-color: #2e3a4b; }
[data-bs-theme="dark"] .scm-input-row input { color: #e2e8f0; }
[data-bs-theme="dark"] .scm-input-wrap label { color: #94a3b8; }
[data-bs-theme="dark"] .scm-footer { border-top-color: #2e3a4b; }

/* ── Popup Đổi tên (TKQC/BM/Trang) + Ghi chú ── */
[data-bs-theme="dark"] .ren-bar { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .ren-bar-title { color: #e2e8f0; }
[data-bs-theme="dark"] .ren-footer { border-top-color: #2e3a4b; }
[data-bs-theme="dark"] .ren-id-pill { color: #94a3b8; }
[data-bs-theme="dark"] .ren-id-pill > span { color: #94a3b8; }
[data-bs-theme="dark"] .ren-id-pill strong { color: #e2e8f0; }

/* ── Popup Lọc cột của lưới (.col-filter-popup / .cfp-*) ──
   Cụm lớn nhất: 14 luật màu cứng nằm ngay trong file lo phần nền tối. */
[data-bs-theme="dark"] .col-filter-popup { background: #232e3d; color: #e2e8f0; }
[data-bs-theme="dark"] .cfp-title { color: #e2e8f0; }
[data-bs-theme="dark"] .cfp-dd-trigger { background: #171e29; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .cfp-dd-menu { background: #232e3d; border-color: #2e3a4b; }
[data-bs-theme="dark"] .cfp-dd-menu li { color: #cbd5e1; }
[data-bs-theme="dark"] .cfp-dd-menu li:hover { background: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .cfp-divider { border-top-color: #2e3a4b; }
[data-bs-theme="dark"] .cfp-value,
[data-bs-theme="dark"] .cfp-value2 { background: #171e29; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .cfp-values-search { background: #171e29; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .cfp-values-all,
[data-bs-theme="dark"] .cfp-values-none { background: #232e3d; border-color: #2e3a4b; color: #cbd5e1; }
[data-bs-theme="dark"] .cfp-values-list { background: #171e29; border-color: #2e3a4b; }
[data-bs-theme="dark"] .cfp-value-item { color: #cbd5e1; }
[data-bs-theme="dark"] .cfp-toggle-card { background: #171e29; border-color: #2e3a4b; }
[data-bs-theme="dark"] .cfp-footer { background: #1b2433; border-top-color: #2e3a4b; }

/* ── Tab Trình QC (Danh sách TK / Chiến dịch / Nhóm QC / QC) ──
   ⚠ CHỖ TỆ NHẤT TRONG CẢ ĐỢT: nền hover #f1f5f9 (gần trắng) đứng cùng lúc với luật đã
   có sẵn ở trên — [data-bs-theme="dark"] .camp-tab-btn:hover .camp-tab-label
   { color:#ffffff!important } — tức CHỮ TRẮNG TRÊN NỀN GẦN TRẮNG, mất chữ hoàn toàn khi
   rê chuột. Ai đó đã tối hoá cái nhãn nhưng bỏ quên nền của chính cái nút. */
[data-bs-theme="dark"] .camp-tab-btn { color: #94a3b8; }
[data-bs-theme="dark"] .camp-tab-btn:not(.camp-tab-active) { border-color: #2e3a4b; }
[data-bs-theme="dark"] .camp-tab-btn:hover { background: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .camp-empty-title { color: #cbd5e1; }

/* ── Modal Tuỳ chỉnh cột: dòng preset + phần viền/nền còn sót ──
   .cc-preset-item ĐÃ có nền tối, nhưng .cc-preset-name tự đặt color:#0f172a nên thắng
   thừa kế → tên preset gần như đen trên nền tối, coi như vô hình. */
[data-bs-theme="dark"] .cc-preset-name { color: #e2e8f0; }
[data-bs-theme="dark"] .cc-preset-item:hover { background: #2e3a4b; }
[data-bs-theme="dark"] .cc-preset-item.cc-preset-active { background: rgba(99,102,241,.22); }
[data-bs-theme="dark"] .cc-preset-icon-btn:hover { background: #3a465c; }
[data-bs-theme="dark"] .cc-preset-create-btn { border-color: #4a5568; }
[data-bs-theme="dark"] .cc-preset-create-btn:hover { background: rgba(99,102,241,.18); }
[data-bs-theme="dark"] .cc-preset-wrap { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .cc-footer-left label { color: #94a3b8; }
[data-bs-theme="dark"] .cc-middle { border-right-color: #2e3a4b; }
[data-bs-theme="dark"] .cc-search-wrap { border-bottom-color: #2e3a4b; }
[data-bs-theme="dark"] .cc-search { background: #171e29; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .cc-col-row:hover { background: #2e3a4b; }
[data-bs-theme="dark"] .cc-col-row span { color: #e2e8f0; }
[data-bs-theme="dark"] .cc-col-row.cc-col-locked span { color: #94a3b8; }
[data-bs-theme="dark"] .cc-right-head { color: #94a3b8; }
[data-bs-theme="dark"] .cc-right-head strong { color: #e2e8f0; }
[data-bs-theme="dark"] .cc-selected-pill { background: #171e29; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] .cc-selected-pill:hover { border-color: #4a5568; }
[data-bs-theme="dark"] .cc-drag-handle { color: #64748b; }
[data-bs-theme="dark"] .cc-footer { border-top-color: #2e3a4b; }


/* ── Popup Điều khoản & Chính sách (màn đăng ký) ── */
[data-bs-theme="dark"] .fx-terms { color: #cbd5e1; }
[data-bs-theme="dark"] .fx-terms-intro { color: #94a3b8; }
[data-bs-theme="dark"] .fx-terms details { border-color: #2e3a4b; }
[data-bs-theme="dark"] .fx-terms summary { background: #171e29; }
[data-bs-theme="dark"] .fx-terms details > b { color: #e2e8f0; }
[data-bs-theme="dark"] .fx-terms-table th,
[data-bs-theme="dark"] .fx-terms-table td { border-color: #2e3a4b; }
[data-bs-theme="dark"] .fx-terms-table th { background: #171e29; color: #e2e8f0; }

/* ── Popup Đăng nhập (loginDialog) ──
   ⚠ SỬA LẠI LẦN HAI. Lần đầu tôi chỉ thêm .lgn-ta:focus{background} mà QUÊN color, thành ra
   bấm vào ô dán token là chữ #1f2733 trên nền #171e29 — đen trên đen, tệ hơn lúc chưa vá.
   Lúc chưa focus thì ô vẫn trắng vì luật gốc .lgn-ta{background:#fbfbfe} không hề bị đụng.
   Vá nửa vời còn hại hơn không vá: phải phủ ĐỦ nền + chữ + viền cho cả hai trạng thái. */
[data-bs-theme="dark"] .lgn-ta { background: #171e29; color: #e2e8f0; border-color: #2e3a4b; }
[data-bs-theme="dark"] .lgn-ta:focus { background: #1b2433; }
[data-bs-theme="dark"] .lgn-ta::placeholder { color: #64748b; }
[data-bs-theme="dark"] .lgn-opt { background: #171e29; color: #cbd5e1; border-color: #2e3a4b; }
[data-bs-theme="dark"] .lgn-opt:has(input:checked) { background: rgba(99, 102, 241, 0.22); }
[data-bs-theme="dark"] .lgn-opt-fb:has(input:checked) { background: rgba(59, 130, 246, 0.22); }

/* ── Nút Đăng nhập trong thanh công cụ ── */
[data-bs-theme="dark"] #userInfo .nh-quality-login-btn { background: #232e3d; border-color: #2e3a4b; color: #e2e8f0; }
[data-bs-theme="dark"] #userInfo .nh-quality-login-btn:hover { background: #2e3a4b; }

/* ── Ô chọn thư mục (đổi ảnh đại diện Trang) ── */
[data-bs-theme="dark"] .fiox-folder-pick { background: #171e29; }
[data-bs-theme="dark"] .fiox-folder-pick:hover { background: #2e3a4b; color: #e2e8f0; }

/* ── Trang Góp ý: khối rỗng + nút phân trang ── */
[data-bs-theme="dark"] .fr-empty { background: #232e3d; border-color: rgba(255,255,255,.14); }
[data-bs-theme="dark"] .fr-page-btn { background: #232e3d; border-color: #2e3a4b; color: #cbd5e1; }

/* ── Ô lưới đang tải (skeleton) — nền xám sáng nhấp nháy giữa lưới tối ──
   ⚠ SỬA LẠI: lần đầu tôi bám nhầm class. `.cell-loading` (style.css:2565) KHÔNG được dùng ở
   bất kỳ đâu — grep toàn dự án ra 0 chỗ. Class JS thật sự dựng là `.cell-loading-placeholder`
   (ads.js:121, bm.js 331/1471/1496/2905/2926, grid-config.js:240, grid-utils.js:204).
   Nên luật cũ chạy vào hư không, mỗi lần lưới tải cột vẫn nhấp nháy hàng loạt thanh #e0e0e0.
   Giữ cả hai tên: cái đang dùng, và cái kia phòng khi có chỗ nào dùng lại. */
[data-bs-theme="dark"] .cell-loading,
[data-bs-theme="dark"] .cell-loading-placeholder { background: #2a3546; }

/* ── Nút Cài đặt / Đăng xuất trên thẻ người dùng ở thanh bên ── */
[data-bs-theme="dark"] .hm-side-act { background: #2e3a4b; color: #cbd5e1; }

/* ── Trạng thái rỗng của cột Chức năng ── */
[data-bs-theme="dark"] .fx-feat-empty-title { color: #e2e8f0; }

/* ── Lớp phủ "Đang tải" (phủ vùng lưới và phủ toàn màn hình) ──
   Màu vốn nằm NỘI TUYẾN trong scripts.js — mà style nội tuyến thì CSS ngoài không đè
   được nếu không dùng !important. Đã gỡ hai khai báo màu khỏi chuỗi HTML trong JS và
   đưa xuống đây; phần định vị/kích thước vẫn để nội tuyến vì không liên quan giao diện.
   Không có luật này thì mỗi lần tải dữ liệu là loé một mảng trắng kín màn hình. */
#grid-loading-overlay,
.fx-load-veil { background: rgba(255, 255, 255, 0.95); }
.loading-message { color: #333; }
[data-bs-theme="dark"] #grid-loading-overlay,
[data-bs-theme="dark"] .fx-load-veil { background: rgba(23, 30, 41, 0.94); }
[data-bs-theme="dark"] .loading-message { color: #e2e8f0; }

/* ── Popup Tour hướng dẫn ──
   Luật sáng nằm trong khối <style> của BA trang (ads.html, bm.html, page.html) — ba bản
   sao y hệt nhau. Bản nền tối để MỘT chỗ ở đây, vì cả ba trang đều nạp file này; thêm
   vào từng trang là nhân bản lỗi lên ba lần nữa. */
[data-bs-theme="dark"] .tour-tooltip { background: #232e3d; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
[data-bs-theme="dark"] .tour-tooltip-title { color: #e2e8f0; }
[data-bs-theme="dark"] .tour-tooltip-desc { color: #a7aebd; }
[data-bs-theme="dark"] .tour-tooltip-steps { color: #7b8798; }
[data-bs-theme="dark"] .tour-btn-skip { background: #2e3a4b; color: #a7aebd; }
[data-bs-theme="dark"] .tour-btn-skip:hover { background: #3a465c; }
[data-bs-theme="dark"] .tour-btn-prev { background: #2e3a4b; color: #cbd5e1; }
[data-bs-theme="dark"] .tour-btn-prev:hover { background: #3a465c; }
/* page.html còn có mũi tên chỉ hướng, nền phải trùng thân tooltip */
[data-bs-theme="dark"] .tour-arrow { background: #232e3d; }

/* ── Popup "Xác nhận mua tính năng" ──
   Nội dung là một chuỗi HTML với màu ghi thẳng vào thuộc tính style, lặp ở 5 chỗ
   (ads/bm/clone/page + libs.js). Đã thêm class .fx-buy-confirm vào thẻ bọc của cả 5 để
   có chỗ bám; màu nội tuyến nên phải !important mới đè được.
   Tên tính năng để #111 trên nền popup tối #232e3d là gần như đen trên xám đậm. */
[data-bs-theme="dark"] .fx-buy-confirm b { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .fx-buy-confirm > div { border-bottom-color: #2e3a4b !important; }
[data-bs-theme="dark"] .fx-buy-confirm > div > span:first-child { color: #94a3b8 !important; }
/* Hộp nhắc "Mua sớm" nền vàng kem — giữa popup tối thành một mảng chói. Hạ về vàng trong suốt. */
[data-bs-theme="dark"] .fx-buy-confirm > div:last-child { background: rgba(245, 158, 11, 0.16) !important; }
[data-bs-theme="dark"] .fx-buy-confirm > div:last-child > div { color: #fcd34d !important; }

/* ── Bảng điều khiển HOME (Dashboard V2) ──
   Chỉ đổi BỀ MẶT và CHỮ. Các chỗ để `color: white` đứng trên chip/nút nền gradient đậm
   (.hero-avatar, .hero-counter-icon, .dcard-icon) là ĐÚNG ở cả hai giao diện — không đụng. */
[data-bs-theme="dark"] .dashboard-hero { background: #232e3d; }
[data-bs-theme="dark"] .dashboard-card { background: #232e3d; }
[data-bs-theme="dark"] .hero-email { color: #94a3b8; }
[data-bs-theme="dark"] .hero-chip { background: #2e3a4b; color: #cbd5e1; }
[data-bs-theme="dark"] .hero-chip:hover { background: #3a465c; }
[data-bs-theme="dark"] .hero-counters { background: #1b2433; }
[data-bs-theme="dark"] .hero-counter-label { color: #94a3b8; }
[data-bs-theme="dark"] .hero-counter-divider { background: #2e3a4b; }
[data-bs-theme="dark"] .hero-online-dot { border-color: #232e3d; }
[data-bs-theme="dark"] .empty-icon { background: linear-gradient(135deg, #2e3a4b, #3a465c); }
[data-bs-theme="dark"] .detail-label { color: #94a3b8; }
[data-bs-theme="dark"] .versions-list::-webkit-scrollbar-thumb { background: #3a465c; }

/* ── Popup Hỗ trợ ── */
[data-bs-theme="dark"] .support-popup .swal2-close { background: #2e3a4b !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .support-popup .swal2-close:hover { background: #3a465c !important; }
[data-bs-theme="dark"] .sp-item { background: #1b2433; }
[data-bs-theme="dark"] .sp-item:hover { background: #2e3a4b; }
[data-bs-theme="dark"] .sp-item-arrow { color: #64748b; }

/* ── Vài chi tiết lẻ ──
   Ba selector này là số ít thật sự còn thiếu sau khi soát: phần lớn những chỗ trông "thiếu"
   ở lượt quét đầu thì hoá ra đã có luật tối rồi, chỉ nằm ở file khác. */
[data-bs-theme="dark"] .phoiItem.active { background-color: #2e3a4b; }
[data-bs-theme="dark"] #igResizer > div:hover { background: #3a465c !important; }
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(99, 102, 241, 0.24) !important; }
/* track-piece là phần rãnh NGOÀI vùng đã có luật ::-webkit-scrollbar-track ở trên */
[data-bs-theme="dark"] ::-webkit-scrollbar-track-piece { background: var(--bg-card); }

/* ================================================================================
 * NỀN TỐI cho các khối do JAVASCRIPT dựng
 *
 * Luật sáng của những khối này nằm trong chuỗi <style> tiêm từ JS (libs.js, scripts.js,
 * bm.js, setting.js, ads-analytics.js) hoặc trong thuộc tính style nội tuyến. Bản nền tối
 * để ở ĐÂY chứ không nhét ngược vào JS, vì mọi trang mở các khối đó đều nạp file này —
 * gom một chỗ thì lần sau còn tìm thấy.
 * Chỗ nào màu gốc là NỘI TUYẾN thì bắt buộc !important, không có cách khác.
 * ================================================================================ */

/* ── Toast dùng chung (window.showFioxToast) ── */
[data-bs-theme="dark"] .fiox-toast { background: #232e3d; }
[data-bs-theme="dark"] .fiox-toast span { color: #e2e8f0 !important; }

/* ── Popup Thông tin tài khoản / checkpoint (.cp-m) ── */
[data-bs-theme="dark"] .cp-m .swal2-close { background: #2e3a4b; color: #94a3b8; }
[data-bs-theme="dark"] .cp-m .swal2-close:hover { background: #3a465c; color: #e2e8f0; }
/* Thẻ hồ sơ bên trong dùng nền tím nhạt #f5f3ff và tên màu #1a1a1a, cả hai nội tuyến */
[data-bs-theme="dark"] .cp-m .swal2-html-container div[style*="#f5f3ff"] { background: rgba(139, 92, 246, 0.16) !important; }
[data-bs-theme="dark"] .cp-m .swal2-html-container div[style*="color:#1a1a1a"] { color: #e2e8f0 !important; }

/* ── Popup Chọn tài khoản (.sa-modal) ── */
[data-bs-theme="dark"] .sa-modal .swal2-close { background: #2e3a4b; color: #94a3b8; }
[data-bs-theme="dark"] .sa-modal .swal2-close:hover { color: #e2e8f0; }
[data-bs-theme="dark"] .sa-header h6 { color: #e2e8f0; }
[data-bs-theme="dark"] .sa-search input { background-color: #171e29; border-color: #2e3a4b; color: #e2e8f0; }

/* ── Popup Điều khoản trong trang Cài đặt ──
   Cả khối là một div nội tuyến có id, nên bám theo id và ép !important. */
[data-bs-theme="dark"] #termsScrollBox { background: #1b2433 !important; border-color: #2e3a4b !important; color: #cbd5e1 !important; }
[data-bs-theme="dark"] #termsScrollBox h3 { color: #93b4ff !important; }

/* ── Popup Cấu hình mục tiêu (Phân tích Ads) ── */
[data-bs-theme="dark"] .aan-tg-row label { color: #cbd5e1; }
[data-bs-theme="dark"] .aan-econ-card { background: #232e3d; border-color: #2e3a4b; }
[data-bs-theme="dark"] .aan-econ-h { color: #e2e8f0; }

/* ── Hộp "Tự động tải lại" trong popup Cấu hình tải dữ liệu ──
   Có BA bản y hệt nhau trong scripts.js (Ads / BM / Trang). Trước đây là một div trần,
   toàn bộ màu ghi nội tuyến nên không có gì để bám — đó là lý do nó lọt qua đợt vá đầu.
   Nay tách màu ra class; phần kích thước/căn lề vẫn để nội tuyến vì không liên quan giao diện.
   Khối SÁNG dưới đây chép đúng giá trị nội tuyến cũ, không đổi một sắc nào. */
.fx-cfg-box { border: 1.5px solid #ece9fb; border-radius: 12px; background: #fff; }
.fx-cfg-ic { border-radius: 9px; background: #f5f3ff; color: #8b5cf6; }
.fx-cfg-t { font-size: 12.5px; font-weight: 600; color: #374151; }
.fx-cfg-s { font-size: 10.5px; color: #9ca3af; line-height: 1.35; }
.fx-cfg-unit { font-size: 11.5px; color: #9ca3af; }
.fx-cfg-min { font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; }

[data-bs-theme="dark"] .fx-cfg-box { background: #232e3d; border-color: #2e3a4b; }
[data-bs-theme="dark"] .fx-cfg-ic { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; }
[data-bs-theme="dark"] .fx-cfg-t { color: #e2e8f0; }
[data-bs-theme="dark"] .fx-cfg-s { color: #94a3b8; }
[data-bs-theme="dark"] .fx-cfg-unit { color: #94a3b8; }
[data-bs-theme="dark"] .fx-cfg-min { background: #171e29; border-color: #2e3a4b; color: #e2e8f0; }

/* ── Tab Quy tắc trong popup Bảo mật BM ── */
[data-bs-theme="dark"] .bms-ar { background: #171e29; border-color: #2e3a4b; color: #94a3b8; }
[data-bs-theme="dark"] .bms-ar.on { background: rgba(239, 68, 68, 0.18); border-color: #ef4444; color: #fca5a5; }
[data-bs-theme="dark"] .bms-warn { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.4); }
[data-bs-theme="dark"] .bms-warn b { color: #fca5a5; }
[data-bs-theme="dark"] .bms-tabs { border-bottom-color: #2e3a4b; }

/* ===================== Công cụ profile (/cong-cu-profile) — workspace thứ BA =====================
   Vỏ dùng lại nguyên hệ .pqm-* của /noi-dung-tuong-tac (đã mở khoá bằng lớp .pqm-ws-profile ở các
   rule :is(...) phía trên). Khối dưới đây CHỈ là phần riêng: ô lưới bạn bè / bài viết và bảng
   công tắc Tối ưu. Tiền tố .pft- để không đụng .pqm-* dùng chung với 2 workspace kia. */
.pft-brand-ic { background: linear-gradient(135deg, #1877f2, #4f9cf9) !important; box-shadow: 0 4px 12px rgba(24,119,242,.32) !important; }

/* ⚠ BẮT BUỘC cho mọi panel có LƯỚI. `.pqm-pbody` mặc định là `overflow-y:auto` chứ KHÔNG phải
   flex container, nên `.pqm-gwrap{flex:1}` bên trong không có cha flex → flex:1 trơ, chiều cao co
   về 0, và `.pqm-grid{height:100%}` = 100% của 0 → lưới CAO 0px: dữ liệu nạp đủ, đếm dòng đúng,
   mà màn hình trống trơn (không lỗi, không cảnh báo). Cùng lý do khiến page-manager phải khai
   riêng cho panel published/scheduled (dòng ~7621) và quet-tuong-tac (~7781).
   Panel `toiuu` KHÔNG nằm trong danh sách: nó cuộn bằng chính `.pqm-pbody` như panel thường.
   Neo vào `.pqm-ws-profile` vì `[data-panel]` là khoá DÙNG CHUNG giữa các workspace. */
.pqm-ws-profile .pqm-panel:is([data-panel="ds"], [data-panel="den"], [data-panel="gui"], [data-panel="chan"], [data-panel="bai"]) > .pqm-pbody {
  overflow: hidden; display: flex; flex-direction: column;
}

/* Tab Tối ưu chỉ có mấy thẻ công tắc, KHÔNG có lưới, nên thẻ panel không việc gì phải kéo hết
   chiều cao màn hình. Panel ở workspace này là thẻ trắng nổi neo cả bốn cạnh (`inset: 14px 13px`)
   nên mặc định luôn cao kín, để thừa một mảng trắng lớn dưới hàng thẻ cuối.
   Bỏ neo đáy → thẻ cao đúng bằng nội dung, phần dưới trả về nền xám của workspace.
   ⚠ VẪN phải chặn trần: cửa sổ hẹp thì lưới thẻ xếp thành nhiều hàng, không chặn là thẻ tràn ra
   ngoài màn. `.pqm-pbody` sẵn `overflow-y:auto` nên chạm trần là tự cuộn bên trong.
   Bề ngang cũng vậy: panel neo cả trái lẫn phải nên trải hết khung, trong khi lưới thẻ chỉ rộng
   tối đa 1100px → dư ra một dải trắng bên phải. Chặn trần 1144px = 1100 của `.pft-optgrid` cộng
   hai bên padding 22px của `.pft-opt`, tức vừa khít nội dung, không thừa không cắt.
   ⚠ ĐỪNG dùng `width: fit-content`: lưới khai `repeat(2, minmax(0, 1fr))` nên co theo nội dung là
   hai cột tụt về bề rộng chữ, thẻ méo hết.
   Màn hẹp hơn 1144px thì `max-width` không ép gì, panel vẫn trải như cũ.
   ⚠ Neo `.pqm-ws-profile` vì `[data-panel]` là khoá DÙNG CHUNG giữa **BỐN** workspace
   (/noi-dung-tuong-tac, /quan-ly-nhom, /tim-nhom, /cong-cu-profile) — viết trần là giáng sang cả ba
   trang kia. Lưu ý `.pqm-ws-group` KHÔNG phải mốc neo riêng của /quan-ly-nhom: /tim-nhom gắn CẢ
   `pqm-ws-group` lẫn `pqm-ws-finder`. Chỉ `.pqm-ws-page` và `.pqm-ws-profile` mới thật sự duy nhất. */
.pqm-ws-profile .pqm-panel[data-panel="toiuu"] { bottom: auto; max-height: calc(100% - 28px); max-width: 1144px; }
/* Panel giờ cao theo nội dung (`height:auto`) mà vẫn là flex column, trong khi `.pqm-pbody` mang
   `flex: 1` tức `flex-basis: 0`. Chiều cao nội tại của trường hợp đó phải qua thuật toán đo nội
   dung của Flexbox, không phải phép cộng — trình duyệt nào tính khác là thẻ CO SẬP còn mỗi thanh
   tiêu đề, mất sạch 6 công tắc. Cho đáy dùng `auto` là bỏ hẳn chỗ mơ hồ đó: cao đúng bằng nội dung.
   Vẫn giữ hệ số co bằng 1 nên chạm trần max-height thì nó co lại và tự cuộn như cũ. */
.pqm-ws-profile .pqm-panel[data-panel="toiuu"] > .pqm-pbody { flex: 0 1 auto; }

/* Ô trong lưới ag-Grid: cell mặc định canh trái, các cột huy hiệu/nút cần canh giữa */
.pft-c.ag-cell { display: flex; align-items: center; justify-content: center; }
.pft-pc.ag-cell { display: flex; align-items: center; padding-top: 6px; padding-bottom: 6px; line-height: 1.45; }

/* Ô tài khoản: avatar + tên */
.pft-acct { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pft-av { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: #eef2f7; }
.pft-av-tx { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11.5px; font-weight: 700; }
.pft-nm { min-width: 0; font-size: 12.5px; font-weight: 600; color: #334155; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pft-nm:hover { color: #0284c7; text-decoration: underline; }

/* Chip UID bấm để sao chép */
/* UID: chữ mã số phẳng, KHÔNG khung. Nút sao chép chỉ hiện khi rê vào dòng — viền + icon
   thường trực ở mọi dòng làm bảng rối mà chẳng thêm thông tin gì. */
.pft-uid { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; cursor: pointer; }
/* Dùng CHÍNH phông của bảng, chỉ bật chữ số đều bề ngang để các hàng số thẳng cột.
   ⚠ ĐỪNG dùng monospace: trên Windows nó rơi về Consolas/Courier, nhìn thô và rộng hơn hẳn
   phần còn lại của dòng. tabular-nums cho đúng cái lợi canh cột mà không đổi mặt chữ. */
.pft-uid-tx { font-size: 12px; font-variant-numeric: tabular-nums; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pft-uid-ic { flex-shrink: 0; font-size: 12.5px; color: #cbd5e1; opacity: 0; transition: opacity .12s; }
.ag-row:hover .pft-uid-ic { opacity: 1; }
.pft-uid:hover .pft-uid-tx { color: #0f172a; }
.pft-uid:hover .pft-uid-ic { color: #0284c7; }

/* Huy hiệu giới tính — có icon nên không truyền tin chỉ bằng màu */
/* Giới tính chỉ có 3 giá trị nên KHÔNG cần viên thuốc có nền: đặt cạnh các ô chữ phẳng thì
   nền đặc làm nó nổi hơn cả tên người. Để icon + chữ nhỏ, phân biệt bằng CẢ icon lẫn màu
   (không truyền tin chỉ bằng màu). */
.pft-gb { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; }
.pft-gb > i { font-size: 13px; opacity: .85; }
.pft-gb.m { color: #2563eb; }
.pft-gb.f { color: #db2777; }
.pft-gb.u { color: #94a3b8; font-weight: 500; }

/* Trạng thái LIVE/DIE: chấm màu + chữ, KHÔNG nền — cùng tông nhẹ với cột Giới tính. */
.pft-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.pft-st > i { font-size: 8px; }
.pft-st.ok { color: #16a34a; }
.pft-st.die { color: #dc2626; cursor: help; }

/* Bạn chung: số rồi tới chữ. */
.pft-mu { font-size: 12.5px; color: #475569; }
.pft-mu b { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
/* Thời gian tương đối: giờ chính xác nằm ở tooltip */
.pft-ago { font-size: 12px; color: #64748b; white-space: nowrap; border-bottom: 1px dotted #cbd5e1; cursor: help; }
.pft-mu-none { font-size: 12px; color: #94a3b8; }

/* Nút hành động trong dòng */
.pft-act { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px;
  min-width: 72px; padding: 0 10px; margin: 0 2px; border-radius: 8px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; border: 1px solid #e2e8f0; background: #fff; color: #475569; }
.pft-act > i { font-size: 13px; }
.pft-act:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
.pft-act.ok { border-color: rgba(22,163,74,.45); color: #16a34a; background: rgba(22,163,74,.08); }
.pft-act.ok:hover { background: rgba(22,163,74,.16); }
.pft-act.dg { border-color: rgba(239,68,68,.45); color: #dc2626; background: rgba(239,68,68,.07); }
.pft-act.dg:hover { background: rgba(239,68,68,.15); }
/* Trạng thái đang chạy. CHỈ dùng opacity nên KHÔNG cần dòng [data-bs-theme="dark"] riêng: khối dark
   ở cuối file đã lo xong nền/viền/chữ, opacity chỉ nhân đè lên kết quả đó. Đúng tiền lệ sẵn có của
   dự án (.pqm-run.busy và .pqm-btn:disabled đều chỉ opacity, đều không có bản dark).
   ⚠ Đặt mã màu mới vào đây là lập tức phải thêm bản dark. */
.pft-act.busy { opacity: .6; pointer-events: none; }
/* Nút anh em trong cùng ô bị khoá theo (tab "Lời mời đã nhận" có 2 nút). Trước đây .pft-act không
   hề có rule :disabled nên đặt thuộc tính disabled KHÔNG đổi vẻ ngoài chút nào. */
.pft-act:disabled { opacity: .6; cursor: not-allowed; }
/* .pqm-spin dùng chung chưa có lá chắn giảm chuyển động nào. Chắn tại đây cho đúng phạm vi nút của
   cụm này, không đụng các workspace khác. Tắt hoạt ảnh vẫn còn icon đổi + mờ đi, nên tín hiệu
   không nằm hết ở chuyển động. */
@media (prefers-reduced-motion: reduce) { .pft-act .pqm-spin { animation: none; } }

/* Menu chọn số lượng của nút "Tải thêm". Mở LÊN TRÊN từ chân bảng nên nằm gọn trong vùng lưới,
   không bị .pqm-pbody (workspace này khai overflow:hidden) cắt mất — đã đo, .pqm-gwrap và
   .pqm-gfoot đều KHÔNG khai overflow nên không có lớp cắt nào ở giữa.
   ⚠ Ẩn bằng display:none, TUYỆT ĐỐI không dùng luật toạ độ âm kiểu :not(.open){top:-999px}: dự án
   đã dính bẫy "gỡ class open mà menu vẫn hiện" vì toạ độ inline luôn thắng stylesheet. */
.pft-mw { position: relative; display: inline-flex; }
.pft-mm { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: none;
  min-width: 170px; padding: 6px; border-radius: 10px; background: #fff;
  border: 1px solid #e2e8f0; box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .35); }
.pft-mw.open .pft-mm { display: block; }
.pft-mm > .pft-mi { display: flex; width: 100%; justify-content: flex-start; margin: 0 0 3px; }
.pft-mm > .pft-mi:last-child { margin-bottom: 0; }
[data-bs-theme="dark"] .pft-mm { background: #1e2735; border-color: #2e3947;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .6); }

/* Ô bài viết: ảnh 64px + khối chữ (khuôn giống bảng Quản lý bài trang) */
.pft-pcell { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; width: 100%; }
.pft-thumb { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: hidden;
  background: #eef2f7; display: flex; align-items: center; justify-content: center; }
.pft-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pft-thumb-ph > i { font-size: 22px; color: #94a3b8; }
.pft-ttype { position: absolute; right: 3px; bottom: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(2,6,23,.78); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.pft-ptxt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pft-pmsg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; font-size: 12.5px; color: #334155; line-height: 1.45; }
.pft-pid { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  font-weight: 600; color: #0284c7; cursor: pointer; }
.pft-pid:hover { text-decoration: underline; }
.pft-empty { color: #94a3b8; font-style: italic; }

.pft-prv { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; background: rgba(148,163,184,.18); color: #475569; white-space: nowrap; }
.pft-prv.pub { background: rgba(22,163,74,.12); color: #16a34a; }
.pft-prv.me { background: rgba(239,68,68,.1); color: #dc2626; }
.pft-view { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  color: #0284c7; text-decoration: none; }
.pft-view:hover { text-decoration: underline; }

/* Nút lọc dạng bật/tắt trên thanh lọc bài viết */
.pft-flag.on { border-color: #0ea5e9; color: #0284c7; background: #f0f9ff; }
/* Dòng trạng thái ở chân bảng */
.pft-ok { color: #16a34a; }
.pft-err { color: #dc2626; }
.pft-ok > i, .pft-err > i { color: inherit; }

/* ===== Tối ưu Facebook — lưới thẻ công tắc ===== */
.pft-opt { padding: 20px 22px 24px; overflow-y: auto; }
.pft-optgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1100px; }
.pft-card { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 72px; text-align: left;
  padding: 13px 15px; border: 1px solid #e8eaf1; background: #fff; border-radius: 15px; cursor: pointer;
  font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.pft-card:hover { background: #f8fafc; border-color: #cbd5e1; }
.pft-card.on { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
/* Mục chưa làm được: hiện mờ + nêu lý do, KHÔNG cho gạt. Thà lộ rõ còn hơn bật mà không tác dụng. */
.pft-card.off { cursor: default; opacity: .62; }
.pft-card.off:hover { background: #fff; border-color: #e8eaf1; }
.pft-card.off .pft-cic { filter: grayscale(.55); }
.pft-soon { flex-shrink: 0; border: 1px dashed #cbd5e1; border-radius: 20px; padding: 3px 10px;
  font-size: 10.5px; font-weight: 700; color: #94a3b8; white-space: nowrap; }
.pft-why { display: block; margin-top: 3px; font-size: 10.5px; font-style: italic; color: #b08968; }
.pft-cic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; }
.pft-ccopy { flex: 1; min-width: 0; }
.pft-ct { display: block; font-size: 13px; font-weight: 700; color: #0f172a; }
.pft-cd { display: block; font-size: 11px; color: #94a3b8; line-height: 1.45; margin-top: 2px; }
.pft-sw { flex-shrink: 0; position: relative; width: 42px; height: 24px; border-radius: 20px; background: #cbd5e1; transition: background .18s; }
.pft-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pft-card.on .pft-sw { background: #0ea5e9; }
.pft-card.on .pft-sw::after { left: 21px; }
@media (prefers-reduced-motion: reduce) { .pft-sw, .pft-sw::after { transition: none; } }
/* Khoá cả khối khi chưa có extension / chưa đăng nhập */
.pft-opt.is-disabled .pft-optgrid { opacity: .72; pointer-events: none; }
.pft-opthint { display: flex; align-items: flex-start; gap: 9px; max-width: 1100px; margin-top: 16px;
  border: 1px dashed #d7deea; border-radius: 11px; padding: 11px 13px; color: #94a3b8;
  font-size: 11.5px; line-height: 1.55; }
.pft-opthint > i { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.pft-opthint.err { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.05); color: #dc2626; }
@media (max-width: 1100px) { .pft-optgrid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Dark mode ===== */
[data-bs-theme="dark"] .pft-nm { color: #cbd5e1; }
[data-bs-theme="dark"] .pft-uid-tx { color: #7f8da3; }
[data-bs-theme="dark"] .pft-uid-ic { color: #475569; }
[data-bs-theme="dark"] .pft-uid:hover .pft-uid-tx { color: #e5e7eb; }
[data-bs-theme="dark"] .pft-uid:hover .pft-uid-ic { color: #7dd3fc; }
[data-bs-theme="dark"] .pft-mu { color: #94a3b8; }
[data-bs-theme="dark"] .pft-mu b { color: #f1f5f9; }
[data-bs-theme="dark"] .pft-ago { color: #94a3b8; border-bottom-color: #3a475a; }
[data-bs-theme="dark"] .pft-gb.m { color: #93c5fd; }
[data-bs-theme="dark"] .pft-gb.f { color: #f9a8d4; }
[data-bs-theme="dark"] .pft-gb.u { color: #cbd5e1; }
[data-bs-theme="dark"] .pft-mu { color: #94a3b8; }
[data-bs-theme="dark"] .pft-mu b { color: #e5e7eb; }
[data-bs-theme="dark"] .pft-act { background: #1e2735; border-color: #2e3947; color: #cbd5e1; }
[data-bs-theme="dark"] .pft-act:hover { background: #26303f; border-color: #475569; color: #f1f5f9; }
[data-bs-theme="dark"] .pft-act.ok { color: #4ade80; }
[data-bs-theme="dark"] .pft-act.dg { color: #fca5a5; }
[data-bs-theme="dark"] .pft-thumb { background: #171e29; }
[data-bs-theme="dark"] .pft-pmsg { color: #cbd5e1; }
[data-bs-theme="dark"] .pft-pid { color: #7dd3fc; }
[data-bs-theme="dark"] .pft-prv { background: rgba(148,163,184,.16); color: #cbd5e1; }
[data-bs-theme="dark"] .pft-prv.pub { color: #4ade80; }
[data-bs-theme="dark"] .pft-prv.me { color: #fca5a5; }
[data-bs-theme="dark"] .pft-view { color: #7dd3fc; }
[data-bs-theme="dark"] .pft-flag.on { background: rgba(14,165,233,.16); border-color: #0ea5e9; color: #7dd3fc; }
[data-bs-theme="dark"] .pft-card { background: #1e2735; border-color: #2e3947; }
[data-bs-theme="dark"] .pft-card:hover { background: #26303f; border-color: #475569; }
[data-bs-theme="dark"] .pft-card.on { border-color: #0ea5e9; }
[data-bs-theme="dark"] .pft-ct { color: #f1f5f9; }
[data-bs-theme="dark"] .pft-sw { background: #3a475a; }
[data-bs-theme="dark"] .pft-opthint { border-color: #2e3a4b; color: #7f8da3; }
[data-bs-theme="dark"] .pft-opthint.err { background: rgba(239,68,68,.12); color: #fca5a5; }