/* ==========================================================================
   PREMIUM FINTECH SAAS NAVIGATION & SCROLL ARCHITECTURE
   Linear / Stripe / Vercel design language: clean, light-mode, 8px grid, hairline borders
   ========================================================================== */

/* 1. Global Shell Reset & Scroll Architecture */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important; /* CRITICAL: Entire browser viewport is locked to 100vh */
  background-color: #FAFAFA !important;
}

#root {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

/* Master Layout Container */
.d-flex.bg-body {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  background: #FAFAFA !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative !important;
}

/* 2. Precision Fixed Left Sidebar Navigation Rail */
.col-2.h-100.px-3.pb-3,
.sidebar-sticky-wrapper {
  position: relative !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent !important;
  background: #0F172A !important; /* Refined dark charcoal/slate fintech base, NOT pure black */
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04) !important;
  z-index: 1000 !important;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), flex 0.28s cubic-bezier(0.16, 1, 0.3, 1), padding 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 12px 24px 12px !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  flex: 0 0 250px !important;
  box-sizing: border-box !important;
}

.col-2.h-100.px-3.pb-3::-webkit-scrollbar,
.sidebar-sticky-wrapper::-webkit-scrollbar {
  width: 4px !important;
}

.col-2.h-100.px-3.pb-3::-webkit-scrollbar-thumb,
.sidebar-sticky-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16) !important;
  border-radius: 4px !important;
}

/* Sidebar Brand Area: Original 3D Logo */
.sidebar-brand-top-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  height: 80px !important;
  min-height: 80px !important;
  margin-bottom: 12px !important;
  padding: 4px 0 !important;
  box-sizing: border-box !important;
}

.sidebar-brand-glow {
  display: block !important;
}

/* Hide legacy logos if any */
.col-2 .text-center.mb-3,
.col-2 .text-center.border-bottom.pb-2,
.sidebar-sticky-wrapper .text-center.mb-3,
.sidebar-sticky-wrapper .text-center.border-bottom,
.col-2 img[alt="logo"]:not(.sidebar-brand-logo-3d),
.sidebar-sticky-wrapper img[alt="logo"]:not(.sidebar-brand-logo-3d) {
  display: none !important;
}

/* Sidebar Menu Links: Refined typography & consistent heights */
.sidebar-sticky-wrapper .menu-links,
.col-2 .menu-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 1 auto !important;
  padding-bottom: 20px !important;
}

.sidebar-sticky-wrapper .menu-links a,
.col-2 .menu-links a,
.sidebar-sticky-wrapper .accordion-button,
.col-2 .accordion-button {
  display: flex !important;
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 0px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

.sidebar-sticky-wrapper .menu-links a svg,
.col-2 .menu-links a svg,
.sidebar-sticky-wrapper .accordion-button svg,
.col-2 .accordion-button svg {
  flex-shrink: 0 !important;
  width: 17px !important;
  height: 17px !important;
  color: #64748B !important;
  transition: color 0.18s ease !important;
}

.sidebar-sticky-wrapper .menu-links a:hover,
.col-2 .menu-links a:hover {
  color: #F8FAFC !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 0px !important;
}

.sidebar-sticky-wrapper .menu-links a:hover svg,
.col-2 .menu-links a:hover svg {
  color: #F8FAFC !important;
}

/* Tasteful Sharp Active State - Vuông vắn, không bo góc, sắc nét */
.sidebar-sticky-wrapper .menu-links a.active,
.col-2 .menu-links a.active,
.sidebar-sticky-wrapper a.text-decoration-none.active,
.col-2 a.text-decoration-none.active {
  color: #FFFFFF !important;
  background: #FF4D6D !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border-color: #FF4D6D !important;
  border-left: 3px solid #FFFFFF !important;
  border-radius: 0px !important;
}

.sidebar-sticky-wrapper .menu-links a.active svg,
.col-2 .menu-links a.active svg {
  color: #FFFFFF !important;
}

/* Sidebar Accordion Overrides */
.sidebar-sticky-wrapper .accordion,
.col-2 .accordion {
  --bs-accordion-bg: transparent !important;
  --bs-accordion-border-width: 0 !important;
}

.sidebar-sticky-wrapper .accordion-item,
.col-2 .accordion-item {
  background: transparent !important;
  border: none !important;
  margin-bottom: 3px !important;
}

.sidebar-sticky-wrapper .accordion-header button,
.col-2 .accordion-header button {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748B !important;
  padding: 0 10px !important;
  height: 32px !important;
}

.sidebar-sticky-wrapper .accordion-body,
.col-2 .accordion-body {
  padding: 2px 0 6px 14px !important;
}

/* 3. Collapsed State for Sidebar (68px Icon Rail) */
body.sidebar-collapsed .col-2.h-100.px-3.pb-3,
body.sidebar-collapsed .sidebar-sticky-wrapper {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  flex: 0 0 68px !important;
  padding: 16px 8px 24px 8px !important;
  overflow-x: hidden !important;
}

body.sidebar-collapsed .sidebar-sticky-wrapper .menu-links a,
body.sidebar-collapsed .col-2 .menu-links a {
  justify-content: center !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

body.sidebar-collapsed .sidebar-sticky-wrapper .menu-links a span,
body.sidebar-collapsed .col-2 .menu-links a span,
body.sidebar-collapsed .sidebar-sticky-wrapper .accordion-header button span,
body.sidebar-collapsed .col-2 .accordion-header button span,
body.sidebar-collapsed .sidebar-sticky-wrapper .accordion-button::after,
body.sidebar-collapsed .col-2 .accordion-button::after,
body.sidebar-collapsed .sidebar-sticky-wrapper .badge,
body.sidebar-collapsed #khabeo-sidebar-brand-card {
  display: none !important;
}

body.sidebar-collapsed .sidebar-content-area,
body.sidebar-collapsed .col-10.h-100 {
  width: calc(100% - 68px) !important;
  max-width: calc(100% - 68px) !important;
  flex: 0 0 calc(100% - 68px) !important;
}

/* 4. Independent Scroll Architecture for Main Content Area */
.col-10.h-100,
.sidebar-content-area {
  width: calc(100% - 250px) !important;
  max-width: calc(100% - 250px) !important;
  flex: 0 0 calc(100% - 250px) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important; /* Header is pinned, child scrolls */
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), flex 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

/* Pinned Top Header: Exactly 60px Height, Never Scrolls, Distinct Elevation */
.topbar-header-enhanced,
.w-100.d-flex.justify-content-between.align-items-center.py-3.pe-4 {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  padding: 0 24px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  flex: 0 0 60px !important; /* Fixed flex height */
  position: relative !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.topbar-header-enhanced *,
.topbar-header-enhanced a,
.header-brand-wrap,
.header-brand-wrap * {
  text-decoration: none !important;
}

/* Dedicated Inner Scroll Container for Content Area */
.style_rightSide__dVW0T,
.p-3.style_rightSide__dVW0T {
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #CBD5E1 transparent !important;
  box-sizing: border-box !important;
}

.style_rightSide__dVW0T::-webkit-scrollbar,
.p-3.style_rightSide__dVW0T::-webkit-scrollbar {
  width: 6px !important;
}

.style_rightSide__dVW0T::-webkit-scrollbar-thumb,
.p-3.style_rightSide__dVW0T::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 4px !important;
}

/* 5. Header Components: Dynamic Page Title Only (Clean SaaS Identity) */
.header-brand-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  border: none !important;
}

/* Header Left: Hamburger Toggle & Brand Logo matching mockup */
.khabeo-sidebar-toggle-btn,
#khabeo-sidebar-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  padding: 0 !important;
  margin-right: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.khabeo-sidebar-toggle-btn:hover,
#khabeo-sidebar-toggle-btn:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0284C7 !important;
}

.khabeo-header-logo-brand,
#khabeo-header-logo-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 14px !important;
  text-decoration: none !important;
}

.khabeo-header-brand-name {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: #0F172A !important;
}

.khabeo-header-divider {
  display: inline-block !important;
  width: 1px !important;
  height: 20px !important;
  background: #E2E8F0 !important;
  margin: 0 12px 0 2px !important;
}

/* Dynamic Page Title in Header (Prominent, Bold, Clean SaaS Identity) */
.khabeo-dynamic-header-title-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  border: none !important;
}

.khabeo-title-dot-pulse {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 50% !important;
  background: #FF4D6D !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.2) !important;
  display: inline-block !important;
  animation: khabeoPulseDot 2s infinite ease-in-out !important;
}

@keyframes khabeoPulseDot {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 5px rgba(255, 77, 109, 0.15); }
}

.khabeo-header-title-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #0F172A !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: none !important;
  text-decoration: none !important;
}

/* Right Header Cluster: Clean Profile Widget */
.khabeo-saas-profile-widget {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  min-height: unset !important;
  max-height: unset !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  position: relative !important;
  user-select: none !important;
  text-decoration: none !important;
}

.khabeo-avatar-btn-3d {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* 3D Circular Button Hover & Press Animation */
.khabeo-avatar-btn-3d:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

.khabeo-avatar-btn-3d:active {
  transform: translateY(1px) scale(0.97) !important;
}

/* Golden Neon Under-Glow Effect */
.khabeo-avatar-glow-neon {
  position: absolute !important;
  bottom: -4px !important;
  left: 10% !important;
  width: 80% !important;
  height: 18px !important;
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.95) 0%, rgba(217, 119, 6, 0.6) 50%, transparent 80%) !important;
  filter: blur(8px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: 50% !important;
  animation: avatarNeonGoldenPulse 3s ease-in-out infinite alternate !important;
}

@keyframes avatarNeonGoldenPulse {
  0% {
    opacity: 0.65;
    transform: scale(0.92);
    filter: blur(7px);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
    filter: blur(10px);
  }
  100% {
    opacity: 0.65;
    transform: scale(0.92);
    filter: blur(7px);
  }
}

/* 3D Outer Bezel & Shadow for Circular Avatar Image */
.khabeo-avatar-img-3d {
  position: relative !important;
  z-index: 2 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 2px solid #F59E0B !important; /* Golden Rim */
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.25),
    0 0 12px rgba(245, 158, 11, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.5) !important; /* Rich 3D Button Depth */
  transition: all 0.25s ease !important;
}

.khabeo-avatar-btn-3d:hover .khabeo-avatar-img-3d {
  border-color: #FDE047 !important;
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(245, 158, 11, 0.8),
    inset 0 1px 3px rgba(255, 255, 255, 0.7) !important;
}

.khabeo-avatar-online-dot {
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  border: 1.5px solid #FFFFFF !important;
  box-sizing: border-box !important;
}

.khabeo-user-meta-pro {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}

.khabeo-user-name-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.khabeo-tier-pill-pro {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.khabeo-tier-pill-pro.tier-admin {
  color: #D97706 !important;
  background: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
}

.khabeo-tier-pill-pro.tier-vip {
  color: #2563EB !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
}

.khabeo-tier-pill-pro.tier-regular {
  color: #475569 !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}

.khabeo-profile-chevron {
  color: #94A3B8 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
  margin-left: 2px !important;
}

/* User Account Menu Container & Modern Dropdown (Design based on user Image 2) */
.khabeo-account-wrapper {
  position: relative !important;
  display: inline-block !important;
}

.khabeo-account-dropdown-menu {
  position: fixed !important;
  top: 62px !important;
  right: 20px !important;
  width: 520px !important;
  max-width: calc(100vw - 32px) !important;
  background: #18181B !important; /* Premium dark surface from reference */
  border: 1px solid #27272A !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  z-index: 99999999 !important;
  display: none;
  grid-template-columns: 230px 1fr !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  animation: khabeoDropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.khabeo-account-dropdown-menu.show {
  display: grid !important;
}

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

/* Left Column of Account Dropdown */
.khabeo-dropdown-left {
  padding: 20px 18px !important;
  border-right: 1px solid #27272A !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: #18181B !important;
}

.khabeo-dropdown-user-header {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

.khabeo-dropdown-user-icon {
  width: 24px !important;
  height: 24px !important;
  color: #E4E4E7 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.khabeo-dropdown-greeting {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

.khabeo-dropdown-subname {
  font-size: 11.5px !important;
  color: #A1A1AA !important;
  margin-top: 3px !important;
  display: block !important;
}

.khabeo-dropdown-logout-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: color 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.khabeo-dropdown-logout-btn:hover {
  color: #EF4444 !important;
}

.khabeo-dropdown-divider {
  height: 1px !important;
  background: #27272A !important;
  width: 100% !important;
}

.khabeo-dropdown-theme-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.khabeo-dropdown-theme-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.khabeo-dropdown-theme-select-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #27272A !important;
  border: 1px solid #3F3F46 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  color: #FAFAFA !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.khabeo-dropdown-theme-select-box:hover {
  border-color: #52525B !important;
}

.khabeo-dropdown-feature-request {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #E4E4E7 !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 4px !important;
  transition: color 0.15s ease !important;
}

.khabeo-dropdown-feature-request:hover {
  color: #38BDF8 !important;
}

/* Right Column of Account Dropdown */
.khabeo-dropdown-right {
  padding: 20px 18px !important;
  background: #18181B !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.khabeo-dropdown-right-header {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #71717A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 2px !important;
}

.khabeo-dropdown-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.khabeo-dropdown-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: #F4F4F5 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.khabeo-dropdown-nav-item:hover {
  background: #27272A !important;
  color: #FFFFFF !important;
  transform: translateX(2px) !important;
}

.khabeo-dropdown-nav-item svg {
  width: 17px !important;
  height: 17px !important;
  color: #A1A1AA !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

.khabeo-dropdown-nav-item:hover svg {
  color: #FFFFFF !important;
}

.khabeo-saas-profile-widget:hover .khabeo-profile-chevron {
  color: #475569 !important;
  transform: translateY(1px) !important;
}

/* ==========================================================================
   PRECISION BANK SELECTION DASHBOARD SYSTEM
   ========================================================================== */

.khabeo-dashboard-canvas {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 28px 48px 28px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #111827;
}

/* 1. Page Intro Header */
.khabeo-intro-block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.khabeo-intro-left {
  flex: 1 1 auto;
}

.khabeo-intro-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  margin-bottom: 4px;
}

.khabeo-crumb-muted {
  color: #9CA3AF;
  font-weight: 500;
}

.khabeo-crumb-sep {
  color: #D1D5DB;
}

.khabeo-crumb-active {
  color: #FF4D6D;
  font-weight: 600;
}

.khabeo-intro-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #111827;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.khabeo-intro-desc {
  font-size: 13.5px;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

.khabeo-intro-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.khabeo-intro-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0284C7;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  text-decoration: none;
  transition: all 0.18s ease;
}

.khabeo-intro-btn-outline:hover {
  background: #E0F2FE;
  color: #0369A1;
  border-color: #7DD3FC;
  transform: translateY(-1px);
}

.khabeo-intro-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  background: #FF4D6D;
  border: 1px solid #FF4D6D;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(255, 77, 109, 0.25);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.khabeo-intro-btn-primary:hover {
  background: #E03556;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.35);
  transform: translateY(-1px);
}

/* 2. Uniform 4-Column Stat Cards Row */
.khabeo-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.khabeo-stat-box {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px 18px;
  height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.khabeo-stat-box:hover {
  border-color: #D1D5DB;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.khabeo-stat-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khabeo-stat-val {
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  line-height: 1;
}

.khabeo-stat-sub {
  font-size: 11.5px;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khabeo-live-pulse-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* 3. Popular Bank Strip (Single Neat Row) */
.khabeo-popular-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 16px;
  height: 52px;
  box-sizing: border-box;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.khabeo-popular-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #374151;
  flex-shrink: 0;
}

.khabeo-popular-chips-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.khabeo-popular-chips-wrap::-webkit-scrollbar {
  display: none;
}

.khabeo-popular-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.khabeo-popular-chip:hover {
  background: #FFFFFF;
  border-color: #FF4D6D;
  color: #FF4D6D;
  transform: translateY(-1px);
}

.khabeo-popular-chip-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

/* 4. Filter & Search Controls (Strict 40px Height Line) */
.khabeo-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.khabeo-tab-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
}

.khabeo-tab-pill {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6B7280;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.khabeo-tab-pill:hover {
  color: #111827;
  background: #F3F4F6;
}

.khabeo-tab-pill.active {
  background: #111827;
  color: #FFFFFF;
  font-weight: 700;
}

.khabeo-search-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 420px;
}

.khabeo-search-box-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
}

.khabeo-search-icon {
  position: absolute;
  left: 12px;
  color: #9CA3AF;
  pointer-events: none;
}

.khabeo-search-input {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 36px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12.5px;
  color: #111827;
  background: #F9FAFB;
  outline: none;
  box-sizing: border-box;
  transition: all 0.18s ease;
}

.khabeo-search-input:focus {
  border-color: #FF4D6D;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.12);
}

.khabeo-search-clear-btn {
  position: absolute;
  right: 8px;
  border: none;
  background: transparent;
  color: #9CA3AF;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
}

.khabeo-search-clear-btn:hover {
  color: #111827;
}

.khabeo-sort-dropdown {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  background: #FFFFFF;
  outline: none;
  cursor: pointer;
  transition: all 0.18s ease;
}

.khabeo-sort-dropdown:focus {
  border-color: #FF4D6D;
}

/* 5. Precision CSS Grid: 4-3-2-1 Column Strict Tile Layout */
.khabeo-bank-css-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

.khabeo-grid-item {
  width: 100%;
  min-width: 0;
}

/* Strict Uniform Bank Card: Exactly 186px Fixed Height */
.khabeo-bank-card-root {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  height: 186px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.khabeo-bank-card-root:hover {
  border-color: #CBD5E1;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}

/* Top Row: Fixed Square Logo Frame + Badge */
.khabeo-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  height: 48px;
  flex-shrink: 0;
}

.khabeo-logo-frame {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
}

.khabeo-logo-image {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
  border-radius: 4px !important;
}

.khabeo-card-badge {
  font-size: 11px;
  font-weight: 700;
  color: #FF4D6D;
  background: #FFF1F3;
  border: 1px solid #FFE4E8;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Middle Section: Clamped Title and Subtitle */
.khabeo-card-body {
  flex: 0 0 54px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.khabeo-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.khabeo-card-desc {
  font-size: 11.5px;
  color: #6B7280;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom Row: Fixed Baseline Footer via margin-top auto */
.khabeo-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  flex-shrink: 0;
}

.khabeo-speed-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
}

.khabeo-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}

.khabeo-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #FF4D6D;
  transition: gap 0.18s ease;
}

.khabeo-bank-card-root:hover .khabeo-cta-link {
  gap: 6px;
  color: #E03556;
}

/* Empty State */
.khabeo-empty-box {
  background: #FFFFFF;
  border: 1px dashed #D1D5DB;
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  width: 100%;
}

.khabeo-empty-icon-wrap {
  margin-bottom: 12px;
}

.khabeo-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.khabeo-empty-subtitle {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 16px;
}

.khabeo-empty-reset-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #FF4D6D;
  background: #FFF1F3;
  border: 1px solid #FFE4E8;
  cursor: pointer;
  transition: all 0.18s ease;
}

.khabeo-empty-reset-btn:hover {
  background: #FFE4E8;
}

/* ==========================================================================
   RESPONSIVE MATHEMATICAL ADAPTATION
   ========================================================================== */

/* Laptop & Large Tablets (<= 1200px) */
@media (max-width: 1200px) {
  .khabeo-bank-css-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets (<= 992px) */
@media (max-width: 992px) {
  .khabeo-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .khabeo-bank-css-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .khabeo-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .khabeo-search-cluster {
    flex: 1 1 100%;
  }
  .khabeo-intro-block {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile Devices (<= 640px) */
@media (max-width: 640px) {
  .khabeo-dashboard-canvas {
    padding: 16px 12px 36px 12px;
  }
  .khabeo-intro-title {
    font-size: 20px;
  }
  .khabeo-stat-grid {
    grid-template-columns: 1fr;
  }
  .khabeo-bank-css-grid {
    grid-template-columns: 1fr;
  }
  .khabeo-tab-cluster {
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .khabeo-popular-strip {
    height: auto;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   STRICT SQUARE / NO-ROUNDED-CORNER THEME OVERRIDE (USER EXPLICIT REQUEST)
   Menu vuông vắn không bo góc, Brutalist / Strict Fintech Style
   ========================================================================== */
.col-2.h-100.px-3.pb-3,
.sidebar-sticky-wrapper,
.sidebar-sticky-wrapper *,
.col-2 *,
.sidebar-toggle-btn,
.khabeo-top-action-btn,
.vip-crown-tag,
.khabeo-tab-btn,
.khabeo-pill-tag,
.khabeo-search-input,
.khabeo-select-box {
  border-radius: 0px !important;
}

/* Ensure completely square edges for all sidebar menu item links, active states and accordions */
.sidebar-sticky-wrapper .menu-links a,
.col-2 .menu-links a,
.sidebar-sticky-wrapper .accordion-button,
.col-2 .accordion-button,
.sidebar-sticky-wrapper .accordion-item,
.col-2 .accordion-item,
.sidebar-sticky-wrapper .accordion-header,
.col-2 .accordion-header,
.sidebar-sticky-wrapper .accordion-body,
.col-2 .accordion-body {
  border-radius: 0px !important;
}

/* Sharp active highlight */
.sidebar-sticky-wrapper .menu-links a.active,
.col-2 .menu-links a.active,
.sidebar-sticky-wrapper a.text-decoration-none.active,
.col-2 a.text-decoration-none.active {
  border-radius: 0px !important;
  background: #FF4D6D !important;
  border-left: 3px solid #FFFFFF !important;
  box-shadow: none !important;
}


/* ==========================================================================
   AVATAR VIP OUTER TIER RING SYSTEM & FINTECH HEADER CHIP
   ========================================================================== */
.khabeo-avatar-outer-ring {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.khabeo-avatar-inner-ring {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  background: #090d16;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.khabeo-avatar-inner-ring img.vip-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Tier: ADMIN CẤP CAO - Multi-spectral Royal Violet / Gold Halo */
.khabeo-avatar-outer-ring.tier-admin {
  background: conic-gradient(from 180deg at 50% 50%, #8b5cf6 0deg, #ec4899 90deg, #f59e0b 180deg, #38bdf8 270deg, #8b5cf6 360deg);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.7), 0 0 25px rgba(236, 72, 153, 0.3);
  animation: khabeoRingRotate 6s linear infinite;
}

/* Tier: THÀNH VIÊN VIP - Radiant Solar Gold Aura */
.khabeo-avatar-outer-ring.tier-vip {
  background: conic-gradient(from 0deg at 50% 50%, #f59e0b 0deg, #fef08a 90deg, #d97706 180deg, #fbbf24 270deg, #f59e0b 360deg);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.8), 0 0 28px rgba(251, 191, 36, 0.35);
  animation: khabeoRingRotate 8s linear infinite;
}

/* Tier: THÀNH VIÊN THƯỜNG - Sleek Platinum Metallic Rim */
.khabeo-avatar-outer-ring.tier-regular {
  background: linear-gradient(135deg, #64748b 0%, #94a3b8 50%, #cbd5e1 100%);
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.4);
}

@keyframes khabeoRingRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Compensate rotation for the inner image so avatar stays upright */
.khabeo-avatar-outer-ring.tier-admin .khabeo-avatar-inner-ring,
.khabeo-avatar-outer-ring.tier-vip .khabeo-avatar-inner-ring {
  animation: khabeoRingCounterRotate 6s linear infinite;
}
.khabeo-avatar-outer-ring.tier-vip .khabeo-avatar-inner-ring {
  animation-duration: 8s;
}

@keyframes khabeoRingCounterRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.tier-corner-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1.5px solid #090d16;
  z-index: 5;
}
.tier-corner-badge.badge-admin {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.8);
}
.tier-corner-badge.badge-vip {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #78350f;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
}
.tier-corner-badge.badge-regular {
  background: #475569;
  color: #cbd5e1;
}

/* User Meta in Header */
.khabeo-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.khabeo-username {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.khabeo-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 999px !important;
  margin-top: 3px;
  text-transform: uppercase;
}

.khabeo-tier-badge.tier-admin {
  background: linear-gradient(90deg, #3b0764 0%, #581c87 100%);
  border: 1px solid #c084fc;
  color: #fef08a;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.khabeo-tier-badge.tier-vip {
  background: linear-gradient(90deg, #78350f 0%, #92400e 100%);
  border: 1px solid #f59e0b;
  color: #fef08a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.khabeo-tier-badge.tier-regular {
  background: #1e293b;
  border: 1px solid #475569;
  color: #94a3b8;
}

/* ==========================================================================
   LEFT SIDEBAR HIGHLIGHTED BRANDING CARD & 3D TELEGRAM WIDGET
   ========================================================================== */
.khabeo-sidebar-brand-card {
  margin-top: auto;
  margin-bottom: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #0f172a 0%, #090d16 100%);
  border: 1px solid #1e293b;
  border-left: 3px solid #38bdf8;
  border-radius: 0px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.khabeo-brand-title {
  font-size: 13px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.khabeo-brand-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0;
}

.khabeo-brand-meta .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.khabeo-brand-meta .meta-label {
  color: #64748b;
  font-weight: 500;
}

.khabeo-brand-meta .meta-val {
  color: #cbd5e1;
  font-weight: 600;
}

.khabeo-brand-meta .highlight-version {
  color: #38bdf8;
  font-weight: 800;
}

.khabeo-brand-meta .status-live {
  color: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50% !important;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
  animation: pulseLive 1.8s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #10b981; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* 3D Glowing Telegram Card Button */
.khabeo-tele-3d-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 0px !important;
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(56, 189, 248, 0.1);
}

.khabeo-tele-3d-box:hover {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(15, 23, 42, 0.98) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
}

.tele-3d-logo-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tele-3d-glow-img {
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
  animation: teleGlowPulse 2.4s infinite ease-in-out;
  display: block !important;
}

@keyframes teleGlowPulse {
  0% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(56, 189, 248, 0.95); transform: scale(1.05); }
  100% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); transform: scale(1); }
}

.tele-box-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  line-height: 1.2;
}

.tele-title {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.tele-handle {
  font-size: 12px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.5px;
}

.tele-arrow {
  color: #38bdf8;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.khabeo-tele-3d-box:hover .tele-arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   DAILY BILL QUOTA MODAL (THÀNH VIÊN THƯỜNG: 3 BILL / NGÀY)
   ========================================================================== */
.khabeo-quota-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.khabeo-quota-modal-card {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(135deg, #0b1120 0%, #1e1b4b 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 0px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(245, 158, 11, 0.2);
  padding: 32px 28px;
  color: #fff;
  position: relative;
  text-align: center;
}


/* Compact & Fully Visible Sidebar Brand Card */
.sidebar-sticky-wrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  padding-bottom: 8px !important;
  box-sizing: border-box !important;
}

.sidebar-sticky-wrapper .ps.h-100,
.sidebar-sticky-wrapper > div:nth-child(2) {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 225px) !important;
}

.khabeo-sidebar-brand-card {
  margin-top: auto !important;
  margin-bottom: 4px !important;
  padding: 8px 10px !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.khabeo-brand-title {
  font-size: 11.5px !important;
}

.khabeo-brand-meta {
  padding: 4px 0 !important;
  gap: 2px !important;
}

.khabeo-brand-meta .meta-row {
  font-size: 10.5px !important;
}

.khabeo-tele-3d-box {
  padding: 6px 8px !important;
  gap: 8px !important;
}

.tele-3d-logo-wrap {
  width: 28px !important;
  height: 28px !important;
}

.tele-3d-glow-img {
  width: 26px !important;
  height: 26px !important;
}

.tele-title {
  font-size: 9.5px !important;
}

.tele-handle {
  font-size: 11px !important;
}


/* Absolute Stability & Complete Visibility for Sidebar Bottom Branding */
.sidebar-sticky-wrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  padding-bottom: 6px !important;
}

/* Force menu scroll area to take only remaining vertical space */
.sidebar-sticky-wrapper > .ps,
.sidebar-sticky-wrapper > .menu-links,
.sidebar-sticky-wrapper > div:nth-child(2) {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

#khabeo-sidebar-brand-card {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  margin-bottom: 0px !important;
  padding: 8px !important;
  background: linear-gradient(180deg, #0b1120 0%, #070a13 100%) !important;
  border: 1px solid #1e293b !important;
  border-left: 3px solid #38bdf8 !important;
}

#khabeo-sidebar-brand-card .khabeo-brand-title {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}

#khabeo-sidebar-brand-card .khabeo-brand-meta {
  padding: 3px 0 !important;
  gap: 2px !important;
}

#khabeo-sidebar-brand-card .khabeo-brand-meta .meta-row {
  font-size: 10px !important;
}

#khabeo-sidebar-brand-card .khabeo-tele-3d-box {
  padding: 5px 8px !important;
  margin-top: 4px !important;
}

#khabeo-sidebar-brand-card .tele-3d-logo-wrap {
  width: 24px !important;
  height: 24px !important;
}

#khabeo-sidebar-brand-card .tele-3d-glow-img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
}

#khabeo-sidebar-brand-card .tele-title {
  font-size: 9px !important;
}

#khabeo-sidebar-brand-card .tele-handle {
  font-size: 10.5px !important;
}

/* ==========================================================================
   MODERN FINTECH SAAS ADMIN DASHBOARD (LINEAR / STRIPE CLEAN LIGHT THEME)
   ========================================================================== */
.admin-saas-dashboard {
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.admin-saas-dashboard .card,
.admin-saas-dashboard .bg-white {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.admin-saas-dashboard .table-responsive {
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

.admin-saas-dashboard .table {
  color: #1E293B !important;
  margin-bottom: 0 !important;
}

.admin-saas-dashboard .table thead th {
  background: #F8FAFC !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 12px 14px !important;
}

.admin-saas-dashboard .table tbody td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 13px !important;
}

.admin-saas-dashboard .table tbody tr:hover {
  background-color: #F8FAFC !important;
}

.admin-saas-dashboard .form-control,
.admin-saas-dashboard .form-select {
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #0F172A !important;
  background-color: #FFFFFF !important;
  padding: 7px 12px !important;
}

.admin-saas-dashboard .form-control:focus,
.admin-saas-dashboard .form-select:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

/* ==========================================================================
   HEADER ACTION BUTTONS & USER PROFILE CHIP (MOCKUP 1 & 2)
   ========================================================================== */
.topbar-header-enhanced .w-auto.text-end,
header .w-auto.text-end,
.w-100.d-flex.justify-content-between.align-items-center .w-auto.text-end {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

.khabeo-header-actions-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.khabeo-btn-support-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #2563EB !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.khabeo-btn-support-pill:hover {
  background: #DBEAFE !important;
  border-color: #93C5FD !important;
  color: #1D4ED8 !important;
  transform: translateY(-1px) !important;
}

.khabeo-btn-deposit-pill {
  display: none !important;
}

/* User Profile Chip - Adaptive Premium Fintech SaaS Style */
.khabeo-user-chip-pro {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px 4px 5px !important;
  border-radius: 9999px !important;
  background: #111C2E !important;
  border: 1px solid #1E293B !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.khabeo-user-chip-pro:hover {
  background: #16243A !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* Light Mode Chip */
html.theme-light .khabeo-user-chip-pro,
body.theme-light .khabeo-user-chip-pro {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.theme-light .khabeo-user-chip-pro:hover,
body.theme-light .khabeo-user-chip-pro:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

.cursor-pointer.d-flex.align-items-center.khabeo-saas-profile-widget,
.topbar-header-enhanced .cursor-pointer.d-flex.align-items-center {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.khabeo-chip-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  line-height: 1.15 !important;
}

.khabeo-chip-username {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  white-space: nowrap !important;
}

html.theme-light .khabeo-chip-username,
body.theme-light .khabeo-chip-username {
  color: #0F172A !important;
}

.khabeo-chip-role {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

.khabeo-chip-role.tier-admin {
  color: #c084fc !important;
  font-weight: 700 !important;
}
.khabeo-chip-role.tier-vip {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}
.khabeo-chip-role.tier-regular {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

html.theme-light .khabeo-chip-role.tier-admin,
body.theme-light .khabeo-chip-role.tier-admin {
  color: #7c3aed !important;
}
html.theme-light .khabeo-chip-role.tier-vip,
body.theme-light .khabeo-chip-role.tier-vip {
  color: #d97706 !important;
}
html.theme-light .khabeo-chip-role.tier-regular,
body.theme-light .khabeo-chip-role.tier-regular {
  color: #64748b !important;
}

.khabeo-chip-chevron {
  color: #64748B !important;
  transition: transform 0.2s ease !important;
}

html.theme-light .khabeo-chip-chevron,
body.theme-light .khabeo-chip-chevron {
  color: #94A3B8 !important;
}

/* Aggressively hide any unwanted popovers, stray markings, or broken artifacts */
.popover,
.bs-popover-bottom,
.bs-popover-auto,
div[role="tooltip"]:not(.khabeo-custom-tooltip) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   SIDEBAR TOP BRAND, FEATURED GROUP & COLLAPSED BEHAVIOR
   ========================================================================== */
#khabeo-sidebar-top-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px 18px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 14px !important;
  text-decoration: none !important;
}

.khabeo-sidebar-brand-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
}

/* Sidebar Section Dividers */
.khabeo-sidebar-section-divider {
  display: flex !important;
  align-items: center !important;
  padding: 10px 4px 6px 4px !important;
  margin: 6px 0 4px 0 !important;
  user-select: none !important;
}

.khabeo-section-divider-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #64748B !important;
  text-transform: uppercase !important;
}

/* Standard Sidebar Accordion: Dịch vụ web site -> Thiết kế landing page */
#khabeo-sidebar-web-section {
  background: transparent !important;
  border: none !important;
  margin-bottom: 3px !important;
}

#khabeo-sidebar-web-section .accordion-button {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748B !important;
  padding: 0 10px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

#khabeo-sidebar-web-section .accordion-button svg {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#khabeo-sidebar-web-section .accordion-button:not(.collapsed) svg {
  transform: rotate(90deg) !important;
}

#khabeo-sidebar-web-section .accordion-button:hover {
  color: #F8FAFC !important;
}

#khabeo-collapse-web.collapse:not(.show) {
  display: none !important;
}

#khabeo-collapse-web.show {
  display: block !important;
}

#khabeo-sidebar-web-section .accordion-body {
  padding: 2px 0 6px 14px !important;
}

#khabeo-sidebar-web-section a.nav-link {
  display: flex !important;
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 0px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

#khabeo-sidebar-web-section a.nav-link:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

#khabeo-sidebar-web-section a.nav-link.active {
  color: #FFFFFF !important;
  background: #FF4D6D !important;
  font-weight: 600 !important;
  border-left: 3px solid #FFFFFF !important;
}

/* ==========================================================================
   DỊCH VỤ LANDING PAGE MODULE STYLES (MATCHING MOCKUP 1 & 2)
   ========================================================================== */
.khabeo-lp-module-container {
  padding: 24px 28px 48px 28px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #0F172A !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

.khabeo-lp-top-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.khabeo-lp-mode-pills {
  display: inline-flex !important;
  background: #F1F5F9 !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  gap: 4px !important;
}

.khabeo-lp-mode-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.khabeo-lp-mode-btn.active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.khabeo-lp-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.2s ease !important;
}

.khabeo-lp-add-btn:hover {
  background: #1D4ED8 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

.khabeo-lp-order-custom-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #2563EB !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.khabeo-lp-order-custom-btn:hover {
  background: #DBEAFE !important;
}

/* 1. Hero Banner */
.khabeo-lp-hero-banner {
  display: flex !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02) !important;
  position: relative !important;
  overflow: hidden !important;
  gap: 32px !important;
  align-items: center !important;
}

.khabeo-lp-hero-left {
  flex: 1 1 65% !important;
}

.khabeo-lp-pro-pill {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4F46E5 !important;
  background: #EEF2FF !important;
  border: 1px solid #E0E7FF !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  margin-bottom: 12px !important;
}

.khabeo-lp-hero-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0F172A !important;
  margin: 0 0 8px 0 !important;
}

.khabeo-lp-hero-desc {
  font-size: 14px !important;
  color: #64748B !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.5 !important;
}

.khabeo-lp-benefits-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.khabeo-lp-benefit-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #F8FAFC !important;
  border: 1px solid #F1F5F9 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

.benefit-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #EFF6FF !important;
  color: #2563EB !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.benefit-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

.benefit-text strong {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.benefit-text span {
  font-size: 10.5px !important;
  color: #64748B !important;
}

.khabeo-lp-hero-right {
  flex: 0 0 280px !important;
  display: flex !important;
  justify-content: center !important;
}

.khabeo-lp-showcase-img {
  width: 100% !important;
  max-width: 280px !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px -6px rgba(124, 58, 237, 0.25) !important;
  display: block !important;
}

/* 2. Search & Filter Bar */
.khabeo-lp-search-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.khabeo-lp-search-input-wrap {
  flex: 1 1 320px !important;
  position: relative !important;
}

.khabeo-lp-search-input-wrap .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
}

.khabeo-lp-search-input-wrap input {
  width: 100% !important;
  padding: 10px 14px 10px 38px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  font-size: 13.5px !important;
  color: #0F172A !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.khabeo-lp-search-input-wrap input:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.khabeo-lp-select-wrap select {
  padding: 10px 14px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  outline: none !important;
  cursor: pointer !important;
}

.khabeo-lp-filter-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.khabeo-lp-filter-icon-btn:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

/* 3. Category Pills Row */
.khabeo-lp-pills-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.khabeo-lp-pill {
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.khabeo-lp-pill:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

.khabeo-lp-pill.active {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

/* 4. Product Cards 4-Column Grid */
.khabeo-lp-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1200px) {
  .khabeo-lp-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .khabeo-lp-grid { grid-template-columns: 1fr !important; }
  .khabeo-lp-benefits-row { grid-template-columns: repeat(2, 1fr) !important; }
  .khabeo-lp-hero-banner { flex-direction: column !important; }
}

.khabeo-lp-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.khabeo-lp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.08) !important;
  border-color: #CBD5E1 !important;
}

.khabeo-lp-card-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  height: 165px !important;
  background: #0F172A !important;
  overflow: hidden !important;
}

.khabeo-lp-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.khabeo-lp-card:hover .khabeo-lp-card-img {
  transform: scale(1.04) !important;
}

.khabeo-lp-card-tag {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

.khabeo-lp-card-cat-pill {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
}

.khabeo-lp-card-content {
  padding: 16px 16px 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.khabeo-lp-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}

.khabeo-lp-card-desc {
  font-size: 12.5px !important;
  color: #64748B !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
}

.khabeo-lp-demo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1D4ED8 !important;
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  text-decoration: none !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.khabeo-lp-demo-link:hover {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

.khabeo-lp-demo-link svg {
  width: 14px !important;
  height: 14px !important;
}

.khabeo-lp-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid #F1F5F9 !important;
  padding-top: 12px !important;
}

.khabeo-lp-price-box {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

.price-prefix {
  font-size: 10.5px !important;
  color: #64748B !important;
}

.price-value {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.khabeo-lp-contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.18s ease !important;
}

.khabeo-lp-contact-btn:hover {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4) !important;
}

/* ==========================================================================
   ADMIN MANAGEMENT VIEW (BOTTOM HALF OF MOCKUP)
   ========================================================================== */
.khabeo-lp-admin-view {
  background: transparent !important;
}

.khabeo-lp-admin-header {
  margin-bottom: 20px !important;
}

.breadcrumb-trail {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #64748B !important;
  margin-bottom: 6px !important;
}

.breadcrumb-trail .sep {
  color: #CBD5E1 !important;
}

.breadcrumb-trail .current {
  color: #0F172A !important;
  font-weight: 600 !important;
}

.title-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.admin-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 4px 0 !important;
}

.admin-subtitle {
  font-size: 13px !important;
  color: #64748B !important;
  margin: 0 !important;
}

.btn-create-lp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  transition: all 0.18s ease !important;
}

.btn-create-lp:hover {
  background: #1D4ED8 !important;
}

.khabeo-lp-admin-filters {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.admin-search-input {
  position: relative !important;
  flex: 1 1 260px !important;
}

.admin-search-input svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
}

.admin-search-input input {
  width: 100% !important;
  padding: 8px 12px 8px 34px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.admin-select-wrap select {
  padding: 8px 12px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  outline: none !important;
  cursor: pointer !important;
}

.khabeo-lp-table-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.khabeo-lp-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

.khabeo-lp-table thead th {
  background: #F8FAFC !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.khabeo-lp-table tbody td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
}

.khabeo-lp-table tbody tr:hover {
  background: #F8FAFC !important;
}

.admin-table-thumb {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  display: block !important;
  border: 1px solid #E2E8F0 !important;
}

.table-title-cell {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.3 !important;
}

.service-title-text {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.service-desc-text {
  font-size: 12px !important;
  color: #64748B !important;
}

.admin-cat-pill {
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
}

.admin-price-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

.admin-demo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #2563EB !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.admin-demo-link:hover {
  text-decoration: underline !important;
}

/* iOS Style Switch */
.admin-status-toggle-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.lp-switch {
  position: relative !important;
  display: inline-block !important;
  width: 36px !important;
  height: 20px !important;
}

.lp-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.lp-slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #CBD5E1 !important;
  transition: 0.25s !important;
  border-radius: 20px !important;
}

.lp-slider:before {
  position: absolute !important;
  content: "" !important;
  height: 16px !important;
  width: 16px !important;
  left: 2px !important;
  bottom: 2px !important;
  background-color: white !important;
  transition: 0.25s !important;
  border-radius: 50% !important;
}

.lp-switch input:checked + .lp-slider {
  background-color: #2563EB !important;
}

.lp-switch input:checked + .lp-slider:before {
  transform: translateX(16px) !important;
}

.status-label-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
}

.status-label-text.active {
  color: #2563EB !important;
}

.order-num-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

.admin-actions-cell {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-action-edit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-action-edit:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

.btn-action-delete {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  border: 1px solid #FEE2E2 !important;
  background: #FEF2F2 !important;
  color: #EF4444 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-action-delete:hover {
  background: #FEE2E2 !important;
  border-color: #FCA5A5 !important;
  color: #DC2626 !important;
}

.btn-action-more {
  padding: 5px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #64748B !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* ==========================================================================
   MODAL DIALOG (ADD & EDIT)
   ========================================================================== */
.khabeo-lp-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.khabeo-lp-modal-overlay.show {
  display: flex !important;
}

.khabeo-lp-modal-dialog {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 600px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #E2E8F0 !important;
  overflow: hidden !important;
}

.khabeo-lp-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.khabeo-lp-modal-header h3 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.khabeo-lp-modal-close {
  background: transparent !important;
  border: none !important;
  font-size: 18px !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
}

.khabeo-lp-modal-body {
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.form-row-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

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

.form-group label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.form-group label .required {
  color: #EF4444 !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 9px 12px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  color: #0F172A !important;
  outline: none !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.khabeo-lp-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid #F1F5F9 !important;
}

.btn-cancel {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.btn-save {
  padding: 8px 20px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

/* ==========================================================================
   INTERACTIVE LIVE DEMO PREVIEW MODAL & DEVICE FRAME SIMULATOR
   ========================================================================== */
.khabeo-demo-preview-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 999999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  animation: khabeoFadeIn 0.2s ease !important;
}

.khabeo-demo-preview-overlay.show {
  display: flex !important;
}

.khabeo-demo-preview-dialog {
  width: 96vw !important;
  max-width: 1440px !important;
  height: 94vh !important;
  background: #09090B !important;
  border: 1px solid #27272A !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Top Toolbar */
.preview-modal-topbar {
  height: 60px !important;
  min-height: 60px !important;
  background: #18181B !important;
  border-bottom: 1px solid #27272A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  gap: 16px !important;
  z-index: 10 !important;
}

.preview-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.preview-template-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}

.preview-template-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.preview-template-price {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #10B981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* Device Switcher */
.preview-device-switcher {
  display: flex !important;
  align-items: center !important;
  background: #09090B !important;
  border: 1px solid #27272A !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
}

.btn-device-switch {
  padding: 6px 14px !important;
  border-radius: 7px !important;
  border: none !important;
  background: transparent !important;
  color: #71717A !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.16s ease !important;
}

.btn-device-switch:hover {
  color: #E4E4E7 !important;
}

.btn-device-switch.active {
  background: #27272A !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Right Actions */
.preview-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.btn-order-demo-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 7px 18px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

.btn-order-demo-pill:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
}

.btn-close-preview-modal {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid #27272A !important;
  background: transparent !important;
  color: #A1A1AA !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  transition: all 0.15s ease !important;
}

.btn-close-preview-modal:hover {
  background: #27272A !important;
  color: #FFFFFF !important;
}

/* Stage Area */
.preview-stage-container {
  flex: 1 !important;
  overflow-y: auto !important;
  background: #09090B !important;
  display: flex !important;
  justify-content: center !important;
  padding: 24px 16px !important;
}

/* Viewport Frames */
.preview-viewport-frame {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.preview-viewport-frame.desktop {
  width: 100% !important;
  max-width: 1280px !important;
}

.preview-viewport-frame.tablet {
  width: 768px !important;
  border: 8px solid #1E293B !important;
  border-radius: 20px !important;
}

.preview-viewport-frame.mobile {
  width: 375px !important;
  border: 12px solid #0F172A !important;
  border-radius: 38px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 0 2px #334155 !important;
}

/* Browser Chrome simulation */
.preview-browser-chrome {
  height: 36px !important;
  background: #F1F5F9 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.preview-browser-dots {
  display: flex !important;
  gap: 5px !important;
}

.preview-browser-dots span {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.dot-red { background: #EF4444 !important; }
.dot-yellow { background: #F59E0B !important; }
.dot-green { background: #10B981 !important; }

.preview-browser-url {
  flex: 1 !important;
  height: 22px !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  color: #64748B !important;
  gap: 6px !important;
}

/* Live Demo Inner Canvas */
.preview-inner-canvas {
  flex: 1 !important;
  overflow-y: auto !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: #FFFFFF !important;
  color: #1E293B !important;
}

/* Dark Theme for Game Canvas */
.preview-inner-canvas.dark-theme {
  background: #0B0F17 !important;
  color: #F1F5F9 !important;
}

/* Interactive Demo Components */
.demo-hero-section {
  padding: 40px 24px !important;
  text-align: center !important;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  position: relative !important;
}

.preview-inner-canvas.dark-theme .demo-hero-section {
  background: radial-gradient(circle at 50% 30%, #1E1B4B 0%, #0B0F17 100%) !important;
  border-bottom: 1px solid #1E293B !important;
}

.demo-hero-badge {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: #EFF6FF !important;
  color: #2563EB !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

.preview-inner-canvas.dark-theme .demo-hero-badge {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.demo-hero-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}

.preview-inner-canvas.dark-theme .demo-hero-title {
  color: #FFFFFF !important;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

.demo-hero-desc {
  font-size: 14px !important;
  color: #64748B !important;
  max-width: 600px !important;
  margin: 0 auto 20px auto !important;
}

.preview-inner-canvas.dark-theme .demo-hero-desc {
  color: #94A3B8 !important;
}

.demo-hero-cta-btn {
  padding: 10px 24px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.18s ease !important;
}

.demo-hero-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}

.preview-inner-canvas.dark-theme .demo-hero-cta-btn {
  background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.5) !important;
}

/* Feature grid in demo */
.demo-features-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  padding: 30px 24px !important;
}

.demo-feature-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 18px !important;
  text-align: left !important;
}

.preview-inner-canvas.dark-theme .demo-feature-card {
  background: #111827 !important;
  border-color: #1F2937 !important;
}

.demo-feature-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  color: #0F172A !important;
}

.preview-inner-canvas.dark-theme .demo-feature-title {
  color: #F3F4F6 !important;
}

.demo-feature-desc {
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.4 !important;
}

.preview-inner-canvas.dark-theme .demo-feature-desc {
  color: #9CA3AF !important;
}

/* Interactive FAQ Accordion */
.demo-faq-wrap {
  padding: 24px !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
}

.preview-inner-canvas.dark-theme .demo-faq-wrap {
  background: #0B0F17 !important;
  border-color: #1E293B !important;
}

.demo-faq-heading {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}

.demo-faq-item {
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}

.preview-inner-canvas.dark-theme .demo-faq-item {
  border-color: #1F2937 !important;
}

.demo-faq-q {
  padding: 12px 16px !important;
  background: #F8FAFC !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  user-select: none !important;
}

.preview-inner-canvas.dark-theme .demo-faq-q {
  background: #111827 !important;
  color: #E5E7EB !important;
}

.demo-faq-a {
  padding: 12px 16px !important;
  font-size: 12.5px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
  display: none;
  background: #FFFFFF !important;
}

.preview-inner-canvas.dark-theme .demo-faq-a {
  background: #0B0F17 !important;
  color: #9CA3AF !important;
}

.demo-faq-item.open .demo-faq-a {
  display: block !important;
}

.demo-faq-item.open .demo-faq-q span.caret {
  transform: rotate(180deg) !important;
}

/* Floating Toast */
.khabeo-live-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  z-index: 9999999999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  animation: khabeoToastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes khabeoToastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Product Card Hover Enhancement */
.khabeo-lp-card {
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.khabeo-lp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(37, 99, 235, 0.2) !important;
}

.khabeo-lp-card-thumb-wrap {
  position: relative !important;
  overflow: hidden !important;
}

.khabeo-lp-card-thumb-wrap .khabeo-lp-card-img {
  transition: transform 0.3s ease !important;
}

.khabeo-lp-card:hover .khabeo-lp-card-img {
  transform: scale(1.04) !important;
}

.khabeo-lp-card-overlay-hover {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(2px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.khabeo-lp-card:hover .khabeo-lp-card-overlay-hover {
  opacity: 1 !important;
}

.khabeo-lp-card-overlay-hover .preview-badge {
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}


/* ==========================================================================
   GLOBAL LIGHT / DARK THEME ENGINE (APPLIES TO SIDEBAR, HEADER & ALL PAGES)
   ========================================================================== */

body.theme-light, html.theme-light {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

body.theme-light .d-flex.bg-body {
  background: #F8FAFC !important;
}

/* Light Mode Sidebar Navigation */
body.theme-light .sidebar-sticky-wrapper,
body.theme-light .col-2.h-100.px-3.pb-3 {
  background: #FFFFFF !important;
  border-right: 1px solid #E2E8F0 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03) !important;
}

body.theme-light .sidebar-sticky-wrapper .menu-links a,
body.theme-light .col-2 .menu-links a {
  color: #475569 !important;
}

body.theme-light .sidebar-sticky-wrapper .menu-links a:hover,
body.theme-light .col-2 .menu-links a:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

body.theme-light .sidebar-sticky-wrapper .menu-links a.active,
body.theme-light .col-2 .menu-links a.active {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-left: 3px solid #2563EB !important;
  font-weight: 700 !important;
}

body.theme-light .sidebar-sticky-wrapper .accordion-button,
body.theme-light .col-2 .accordion-button {
  background: #FFFFFF !important;
  color: #334155 !important;
}

body.theme-light .sidebar-sticky-wrapper .accordion-button:not(.collapsed),
body.theme-light .col-2 .accordion-button:not(.collapsed) {
  background: #F8FAFC !important;
  color: #2563EB !important;
}

body.theme-light .sidebar-sticky-wrapper .accordion-collapse,
body.theme-light .col-2 .accordion-collapse {
  background: #F8FAFC !important;
  border-left: 2px solid #E2E8F0 !important;
}

body.theme-light .sidebar-brand-glow {
  opacity: 0.1 !important;
}

body.theme-light .sidebar-brand-title {
  color: #0F172A !important;
}

body.theme-light .sidebar-group-label {
  color: #94A3B8 !important;
}

/* Light Mode Top Header */
body.theme-light .topbar-header-enhanced,
body.theme-light .pe-4 {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

body.theme-light .khabeo-header-title-text {
  color: #0F172A !important;
}

body.theme-light .khabeo-btn-support-pill {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

body.theme-light .khabeo-btn-support-pill:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

body.theme-light .khabeo-user-chip-pro {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light .khabeo-chip-username {
  color: #0F172A !important;
}

body.theme-light .khabeo-chip-role {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-color: #BFDBFE !important;
}

/* Light Mode Account Dropdown */
body.theme-light .khabeo-account-dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

body.theme-light .khabeo-dropdown-left {
  background: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
}

body.theme-light .khabeo-dropdown-greeting {
  color: #0F172A !important;
}

body.theme-light .khabeo-dropdown-subname {
  color: #64748B !important;
}

body.theme-light .khabeo-dropdown-logout-btn {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #EF4444 !important;
}

body.theme-light .khabeo-dropdown-theme-section {
  border-top-color: #E2E8F0 !important;
}

body.theme-light .khabeo-dropdown-theme-label {
  color: #64748B !important;
}

body.theme-light .khabeo-dropdown-theme-select-box {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light .khabeo-dropdown-right {
  background: #FFFFFF !important;
}

body.theme-light .khabeo-dropdown-right-header {
  color: #64748B !important;
}

body.theme-light .khabeo-dropdown-nav-item {
  color: #334155 !important;
}

body.theme-light .khabeo-dropdown-nav-item:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Light Mode Main Content Area & Cards */
body.theme-light .style_rightSide__dVW0T,
body.theme-light .p-3.style_rightSide__dVW0T,
body.theme-light .content-container,
body.theme-light .col-10.h-100 {
  background: #F8FAFC !important;
}

body.theme-light .card,
body.theme-light .khabeo-lp-card,
body.theme-light .khabeo-lp-admin-card,
body.theme-light .khabeo-profile-card,
body.theme-light .terms-article-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

body.theme-light .khabeo-lp-card-title {
  color: #0F172A !important;
}

body.theme-light .khabeo-lp-filter-chip {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .khabeo-lp-filter-chip.active {
  background: #2563EB !important;
  color: #FFFFFF !important;
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* Quick Theme Toggle Button in Header */
.khabeo-btn-theme-quick-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F8FAFC !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.khabeo-btn-theme-quick-toggle:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-1px) !important;
}

body.theme-light .khabeo-btn-theme-quick-toggle {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

body.theme-light .khabeo-btn-theme-quick-toggle:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

/* ==========================================================================
   USER PROFILE SETTINGS PAGE STYLES (/profile, /tai-khoan)
   ========================================================================== */

.khabeo-profile-page-wrapper {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 24px 20px 48px 20px !important;
  box-sizing: border-box !important;
}

.khabeo-profile-header-bar {
  margin-bottom: 24px !important;
}

.khabeo-profile-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #64748B !important;
  margin-bottom: 8px !important;
}

.khabeo-breadcrumb-link {
  color: #38BDF8 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.khabeo-breadcrumb-sep {
  color: #475569 !important;
}

.khabeo-breadcrumb-current {
  color: #94A3B8 !important;
  font-weight: 600 !important;
}

.khabeo-profile-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.khabeo-profile-main-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  color: inherit !important;
  letter-spacing: -0.02em !important;
}

.khabeo-profile-sub-title {
  font-size: 13.5px !important;
  color: #64748B !important;
  margin: 0 !important;
}

.khabeo-profile-badge-tier {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.25) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #F59E0B !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* Hero Avatar Card */
.khabeo-profile-hero-card {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 24px 28px !important;
  background: #111827 !important;
  border: 1px solid #1E293B !important;
  border-radius: 16px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .khabeo-profile-hero-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.khabeo-profile-avatar-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.khabeo-profile-avatar-frame {
  position: relative !important;
  width: 105px !important;
  height: 105px !important;
  border-radius: 50% !important;
  padding: 3px !important;
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 50%, #F59E0B 100%) !important;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.35) !important;
}

.khabeo-profile-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  background: #0B0F19 !important;
}

/* PENCIL EDIT BUTTON (✏️) */
.khabeo-profile-avatar-pencil {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
  padding: 0 !important;
}

.khabeo-profile-avatar-pencil:hover {
  transform: scale(1.18) rotate(12deg) !important;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.7) !important;
}

.khabeo-profile-avatar-actions {
  display: flex !important;
  gap: 8px !important;
}

.btn-avatar-upload-direct {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #38BDF8 !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.theme-light .btn-avatar-upload-direct {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #2563EB !important;
}

.btn-avatar-reset {
  background: transparent !important;
  border: none !important;
  color: #64748B !important;
  font-size: 11px !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}

.khabeo-profile-hero-info {
  flex: 1 !important;
}

.khabeo-hero-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.khabeo-hero-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: inherit !important;
}

.khabeo-hero-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.online-indicator {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 6px #10B981 !important;
}

.khabeo-hero-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 10px 16px !important;
  font-size: 13px !important;
}

.hero-meta-item .meta-label {
  color: #64748B !important;
  margin-right: 6px !important;
}

.hero-meta-item .meta-val {
  font-weight: 600 !important;
  color: inherit !important;
}

.hero-meta-item .link-tele {
  color: #38BDF8 !important;
  text-decoration: none !important;
}

.hero-meta-item .text-success {
  color: #10B981 !important;
}

.hero-meta-item .text-gold {
  color: #F59E0B !important;
}

/* Profile Form Grid */
.khabeo-profile-form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 20px !important;
}

.khabeo-profile-card {
  background: #111827 !important;
  border: 1px solid #1E293B !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .khabeo-profile-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.khabeo-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.theme-light .khabeo-card-header {
  border-bottom-color: #E2E8F0 !important;
}

.card-header-icon {
  font-size: 22px !important;
}

.card-header-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
  color: inherit !important;
}

.card-header-desc {
  font-size: 12px !important;
  color: #64748B !important;
  margin: 0 !important;
}

.profile-input-group {
  margin-bottom: 14px !important;
}

.profile-input-group label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  margin-bottom: 6px !important;
}

body.theme-light .profile-input-group label {
  color: #475569 !important;
}

.profile-input-group .req {
  color: #EF4444 !important;
}

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

.input-with-icon .input-icon {
  position: absolute !important;
  left: 12px !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

.input-with-icon input {
  width: 100% !important;
  padding: 9px 12px 9px 36px !important;
  background: #0B0F19 !important;
  border: 1px solid #1E293B !important;
  border-radius: 8px !important;
  color: #F8FAFC !important;
  font-size: 13.5px !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

body.theme-light .input-with-icon input {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

.input-with-icon input:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

.input-hint {
  display: block !important;
  font-size: 11px !important;
  color: #64748B !important;
  margin-top: 4px !important;
}

.security-status-box {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid #1E293B !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-top: 16px !important;
}

body.theme-light .security-status-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

.security-status-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
}

.security-status-item:last-child {
  margin-bottom: 0 !important;
}

.khabeo-profile-form-footer {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

.btn-profile-cancel {
  padding: 10px 18px !important;
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  color: #94A3B8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

body.theme-light .btn-profile-cancel {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

.btn-profile-save {
  padding: 10px 24px !important;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
  transition: all 0.2s ease !important;
}

.btn-profile-save:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6) !important;
}

/* ==========================================================================
   LEGAL TERMS & DISCLAIMER PAGE STYLES (/dieu-khoan-su-dung)
   ========================================================================== */

.khabeo-terms-page-wrapper {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 24px 20px 48px 20px !important;
  box-sizing: border-box !important;
}

.khabeo-legal-stamp-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #EF4444 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* CRITICAL RED DISCLAIMER BANNER */
.khabeo-legal-disclaimer-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(185, 28, 28, 0.24) 100%) !important;
  border: 2px solid #EF4444 !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.22) !important;
}

.disclaimer-banner-top {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.disclaimer-banner-icon {
  font-size: 36px !important;
}

.disclaimer-badge {
  display: inline-block !important;
  background: #EF4444 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}

.disclaimer-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #EF4444 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.disclaimer-banner-content {
  color: #F8FAFC !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

body.theme-light .disclaimer-banner-content {
  color: #1E293B !important;
}

.disclaimer-highlight-p {
  margin: 0 0 12px 0 !important;
}

.disclaimer-highlight-p.alert-strong {
  background: rgba(239, 68, 68, 0.16) !important;
  border-left: 4px solid #EF4444 !important;
  padding: 12px 14px !important;
  border-radius: 6px !important;
  color: #FCA5A5 !important;
  font-weight: 600 !important;
}

body.theme-light .disclaimer-highlight-p.alert-strong {
  background: #FEF2F2 !important;
  color: #991B1B !important;
}

/* Articles Cards */
.khabeo-terms-content-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin-bottom: 28px !important;
}

.terms-article-card {
  background: #111827 !important;
  border: 1px solid #1E293B !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
}

body.theme-light .terms-article-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

.terms-article-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.terms-article-num {
  display: inline-block !important;
  background: #1E293B !important;
  color: #38BDF8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}

body.theme-light .terms-article-num {
  background: #EFF6FF !important;
  color: #2563EB !important;
}

.terms-article-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: inherit !important;
}

.terms-article-body {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #CBD5E1 !important;
}

body.theme-light .terms-article-body {
  color: #475569 !important;
}

.terms-article-body p {
  margin: 0 0 8px 0 !important;
}

.terms-prohibited-list {
  margin: 8px 0 0 0 !important;
  padding-left: 20px !important;
}

.terms-prohibited-list li {
  margin-bottom: 6px !important;
}

/* Legal Seal & Commitment Form */
.khabeo-legal-seal-card {
  background: #0B0F19 !important;
  border: 1px solid #1E293B !important;
  border-radius: 14px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

body.theme-light .khabeo-legal-seal-card {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

.seal-graphic-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.digital-seal-badge {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: 2px dashed #EF4444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.seal-inner-star {
  font-size: 24px !important;
  color: #EF4444 !important;
}

.seal-text-circle {
  display: none !important;
}

.seal-verified-text h4 {
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 0 4px 0 !important;
  color: inherit !important;
}

.seal-verified-text p {
  font-size: 12px !important;
  color: #64748B !important;
  margin: 0 !important;
}

.seal-commitment-action {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.commitment-checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.btn-confirm-legal-commitment {
  padding: 10px 20px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #EF4444 !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-confirm-legal-commitment.confirmed {
  background: #10B981 !important;
}

/* ==========================================================================
   LANDING PAGE QUICK TESTER & IMAGE UPLOAD STYLES
   ========================================================================== */

/* Quick Web / Image Live Tester Bar */
.khabeo-lp-quick-tester-bar {
  background: #111827 !important;
  border: 1px solid #1E293B !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
}

body.theme-light .khabeo-lp-quick-tester-bar {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

.quick-tester-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.quick-tester-badge {
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.05em !important;
}

.quick-tester-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: inherit !important;
}

.quick-tester-inputs-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.quick-tester-url-field {
  flex: 1 !important;
  min-width: 280px !important;
  display: flex !important;
  align-items: center !important;
  background: #0B0F19 !important;
  border: 1px solid #1E293B !important;
  border-radius: 8px !important;
  padding: 3px 4px 3px 10px !important;
}

body.theme-light .quick-tester-url-field {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

.url-field-icon {
  margin-right: 8px !important;
  font-size: 14px !important;
}

.quick-tester-url-field input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  font-size: 13px !important;
  outline: none !important;
}

.btn-quick-run-web {
  background: #2563EB !important;
  border: none !important;
  color: #FFFFFF !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.btn-quick-run-web:hover {
  background: #1D4ED8 !important;
}

.quick-tester-sep {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748B !important;
}

.btn-quick-upload-img {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #38BDF8 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.theme-light .btn-quick-upload-img {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #2563EB !important;
}

/* Modal Image Upload Zone */
.khabeo-lp-upload-zone {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  border: 2px dashed #334155 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  background: rgba(15, 23, 42, 0.4) !important;
  transition: border-color 0.2s ease !important;
}

body.theme-light .khabeo-lp-upload-zone {
  border-color: #CBD5E1 !important;
  background: #F8FAFC !important;
}

.khabeo-lp-upload-zone.dragover {
  border-color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
}

.upload-zone-preview {
  width: 90px !important;
  height: 90px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #334155 !important;
  flex-shrink: 0 !important;
}

.upload-zone-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.upload-zone-content {
  flex: 1 !important;
}

.upload-zone-title {
  font-size: 13.5px !important;
  margin-bottom: 2px !important;
}

.upload-zone-subtitle {
  font-size: 11.5px !important;
  color: #64748B !important;
  margin-bottom: 10px !important;
}

.upload-zone-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.btn-choose-lp-file {
  padding: 6px 12px !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Device Preview Chrome with Address Bar */
.preview-browser-url-input-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  background: #0B0F19 !important;
  border: 1px solid #1E293B !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  margin: 0 16px !important;
}

.preview-browser-url-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #38BDF8 !important;
  font-family: monospace !important;
  font-size: 12px !important;
  outline: none !important;
}

.btn-chrome-url-go {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.btn-chrome-url-ext {
  color: #38BDF8 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  margin-left: 8px !important;
  font-weight: bold !important;
}

.preview-iframe-viewport {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: #FFFFFF !important;
}


/* =========================================================================
   UNIVERSAL 100% LIGHT / DARK THEME ENGINE (V2 REFINED)
   "Bật sáng thì chữ đen, bật tối thì chữ trắng, không chừa bất kỳ chỗ nào"
   "Ảnh minh họa thiết kế 1 bản trắng 1 bản đen"
   ========================================================================= */

/* 1. DARK MODE FULL ENGINE */
html.theme-dark,
/* ==========================================================================
   UNIVERSAL 100% BULLETPROOF THEME ENGINE (DARK & LIGHT MODE)
   Covers Header, Sidebar, Cards, Bank Grid, Controls, Tables, Inputs, Badges
   ========================================================================== */

/* 1. DARK MODE FULL ENGINE */
html.theme-dark,
body.theme-dark {
  background-color: #0B1120 !important;
  color: #F8FAFC !important;
}

html.theme-dark #root,
body.theme-dark #root,
html.theme-dark .d-flex.bg-body,
body.theme-dark .d-flex.bg-body,
html.theme-dark .col-10.h-100,
body.theme-dark .col-10.h-100,
html.theme-dark .sidebar-content-area,
body.theme-dark .sidebar-content-area,
html.theme-dark .style_rightSide__dVW0T,
body.theme-dark .style_rightSide__dVW0T,
html.theme-dark .main-content-scrollable,
body.theme-dark .main-content-scrollable,
html.theme-dark .khabeo-lp-wrapper,
body.theme-dark .khabeo-lp-wrapper {
  background: #0B1120 !important;
  background-color: #0B1120 !important;
  color: #F8FAFC !important;
}

/* --- Dark Mode Header (Pinned Top Bar) --- */
html.theme-dark .topbar-header-enhanced,
body.theme-dark .topbar-header-enhanced,
html.theme-dark .pe-4,
body.theme-dark .pe-4,
html.theme-dark .w-100.d-flex.justify-content-between.align-items-center.py-3.pe-4,
body.theme-dark .w-100.d-flex.justify-content-between.align-items-center.py-3.pe-4,
html.theme-dark .w-100.d-flex.justify-content-between.align-items-center,
body.theme-dark .w-100.d-flex.justify-content-between.align-items-center,
html.theme-dark header,
body.theme-dark header {
  background: #0F172A !important;
  background-color: #0F172A !important;
  border-bottom: 1px solid #1E293B !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  color: #F8FAFC !important;
}

html.theme-dark .topbar-header-enhanced *,
body.theme-dark .topbar-header-enhanced *,
html.theme-dark .pe-4 *,
body.theme-dark .pe-4 *,
html.theme-dark .khabeo-header-title-text,
body.theme-dark .khabeo-header-title-text {
  color: #F8FAFC !important;
}

html.theme-dark .khabeo-btn-support-pill,
body.theme-dark .khabeo-btn-support-pill {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #38BDF8 !important;
}

html.theme-dark .khabeo-btn-support-pill:hover,
body.theme-dark .khabeo-btn-support-pill:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

html.theme-dark .khabeo-btn-theme-quick-toggle,
body.theme-dark .khabeo-btn-theme-quick-toggle {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

html.theme-dark .khabeo-btn-theme-quick-toggle:hover,
body.theme-dark .khabeo-btn-theme-quick-toggle:hover {
  background: #334155 !important;
  border-color: #38BDF8 !important;
}

/* --- Dark Mode Sidebar --- */
html.theme-dark .sidebar-sticky-wrapper,
body.theme-dark .sidebar-sticky-wrapper,
html.theme-dark .col-2.h-100.px-3.pb-3,
body.theme-dark .col-2.h-100.px-3.pb-3 {
  background: #0F172A !important;
  background-color: #0F172A !important;
  border-right: 1px solid #1E293B !important;
}

html.theme-dark .sidebar-sticky-wrapper .accordion-button,
body.theme-dark .sidebar-sticky-wrapper .accordion-button,
html.theme-dark .col-2 .accordion-button,
body.theme-dark .col-2 .accordion-button {
  background: #0F172A !important;
  color: #F8FAFC !important;
}

html.theme-dark .sidebar-sticky-wrapper .accordion-button:not(.collapsed),
body.theme-dark .sidebar-sticky-wrapper .accordion-button:not(.collapsed),
html.theme-dark .col-2 .accordion-button:not(.collapsed),
body.theme-dark .col-2 .accordion-button:not(.collapsed) {
  background: #111C2E !important;
  color: #60A5FA !important;
}

html.theme-dark .sidebar-sticky-wrapper .menu-links a,
body.theme-dark .sidebar-sticky-wrapper .menu-links a,
html.theme-dark .col-2 .menu-links a,
body.theme-dark .col-2 .menu-links a {
  color: #94A3B8 !important;
}

html.theme-dark .sidebar-sticky-wrapper .menu-links a:hover,
body.theme-dark .sidebar-sticky-wrapper .menu-links a:hover,
html.theme-dark .col-2 .menu-links a:hover,
body.theme-dark .col-2 .menu-links a:hover {
  background: #1E293B !important;
  color: #F8FAFC !important;
}

html.theme-dark .sidebar-sticky-wrapper .menu-links a.active,
body.theme-dark .sidebar-sticky-wrapper .menu-links a.active,
html.theme-dark .col-2 .menu-links a.active,
body.theme-dark .col-2 .menu-links a.active {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60A5FA !important;
  border-left: 3px solid #3B82F6 !important;
}

/* --- Dark Mode Bank Cards, Popular Strip & Filter Controls --- */
html.theme-dark .khabeo-bank-card-root,
body.theme-dark .khabeo-bank-card-root,
html.theme-dark .khabeo-shortcut-card,
body.theme-dark .khabeo-shortcut-card,
html.theme-dark .khabeo-popular-strip,
body.theme-dark .khabeo-popular-strip,
html.theme-dark .khabeo-filter-bar,
body.theme-dark .khabeo-filter-bar,
html.theme-dark .khabeo-intro-hero,
body.theme-dark .khabeo-intro-hero,
html.theme-dark .card,
body.theme-dark .card {
  background: #111C2E !important;
  background-color: #111C2E !important;
  border: 1px solid #1E293B !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html.theme-dark .khabeo-bank-card-root:hover,
body.theme-dark .khabeo-bank-card-root:hover,
html.theme-dark .khabeo-shortcut-card:hover,
body.theme-dark .khabeo-shortcut-card:hover {
  background: #16243A !important;
  background-color: #16243A !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.15) !important;
  transform: translateY(-2px);
}

html.theme-dark .khabeo-bank-card-root .khabeo-bank-name,
body.theme-dark .khabeo-bank-card-root .khabeo-bank-name,
html.theme-dark .khabeo-bank-card-root .khabeo-card-title,
body.theme-dark .khabeo-bank-card-root .khabeo-card-title,
html.theme-dark .khabeo-card-body h3,
body.theme-dark .khabeo-card-body h3,
html.theme-dark .khabeo-card-body h4,
body.theme-dark .khabeo-card-body h4,
html.theme-dark .khabeo-card-body h5,
body.theme-dark .khabeo-card-body h5,
html.theme-dark .khabeo-popular-label span,
body.theme-dark .khabeo-popular-label span,
html.theme-dark .khabeo-popular-label strong,
body.theme-dark .khabeo-popular-label strong,
html.theme-dark .khabeo-filter-bar span,
body.theme-dark .khabeo-filter-bar span {
  color: #F8FAFC !important;
}

html.theme-dark .khabeo-bank-card-root .khabeo-bank-sub,
body.theme-dark .khabeo-bank-card-root .khabeo-bank-sub,
html.theme-dark .khabeo-bank-card-root .khabeo-bank-desc,
body.theme-dark .khabeo-bank-card-root .khabeo-bank-desc,
html.theme-dark .khabeo-card-body p,
body.theme-dark .khabeo-card-body p {
  color: #94A3B8 !important;
}

html.theme-dark .khabeo-latency-badge,
body.theme-dark .khabeo-latency-badge {
  color: #94A3B8 !important;
}

html.theme-dark .khabeo-popular-chip,
body.theme-dark .khabeo-popular-chip {
  background: #1E293B !important;
  background-color: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #E2E8F0 !important;
}

html.theme-dark .khabeo-popular-chip:hover,
body.theme-dark .khabeo-popular-chip:hover {
  background: #2563EB !important;
  background-color: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

html.theme-dark .khabeo-tab-pill,
body.theme-dark .khabeo-tab-pill {
  color: #94A3B8 !important;
  background: transparent !important;
}

html.theme-dark .khabeo-tab-pill:hover,
body.theme-dark .khabeo-tab-pill:hover {
  color: #F8FAFC !important;
  background: #1E293B !important;
}

html.theme-dark .khabeo-tab-pill.active,
body.theme-dark .khabeo-tab-pill.active {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

html.theme-dark .khabeo-search-cluster,
body.theme-dark .khabeo-search-cluster,
html.theme-dark .khabeo-search-cluster input,
body.theme-dark .khabeo-search-cluster input,
html.theme-dark .khabeo-search-cluster select,
body.theme-dark .khabeo-search-cluster select,
html.theme-dark .khabeo-search-input-wrap,
body.theme-dark .khabeo-search-input-wrap,
html.theme-dark .khabeo-sort-select,
body.theme-dark .khabeo-sort-select {
  background: #0B1120 !important;
  background-color: #0B1120 !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

/* --- Dark Mode General Typography, Inputs & Tables --- */
html.theme-dark h1:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark h1:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark h2:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark h2:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark h3:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark h3:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark h4:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark h4:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark h5:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark h5:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark h6:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark h6:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark p:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark p:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark label:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark label:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark td:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark td:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark th:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark th:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark li:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark li:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark b:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark b:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark strong:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark strong:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *),
html.theme-dark .khabeo-lp-hero-title, body.theme-dark .khabeo-lp-hero-title,
html.theme-dark .khabeo-lp-card-title, body.theme-dark .khabeo-lp-card-title,
html.theme-dark .khabeo-lp-benefit-card strong, body.theme-dark .khabeo-lp-benefit-card strong {
  color: #F8FAFC !important;
}

html.theme-dark .khabeo-lp-hero-desc, body.theme-dark .khabeo-lp-hero-desc,
html.theme-dark .khabeo-lp-card-desc, body.theme-dark .khabeo-lp-card-desc,
html.theme-dark .khabeo-lp-benefit-card span, body.theme-dark .khabeo-lp-benefit-card span,
html.theme-dark .text-muted, body.theme-dark .text-muted {
  color: #94A3B8 !important;
}

html.theme-dark .khabeo-lp-hero-banner, body.theme-dark .khabeo-lp-hero-banner,
html.theme-dark .khabeo-lp-card, body.theme-dark .khabeo-lp-card,
html.theme-dark .khabeo-lp-card-body, body.theme-dark .khabeo-lp-card-body,
html.theme-dark .khabeo-lp-admin-panel, body.theme-dark .khabeo-lp-admin-panel,
html.theme-dark .khabeo-profile-card, body.theme-dark .khabeo-profile-card,
html.theme-dark .khabeo-terms-paper, body.theme-dark .khabeo-terms-paper,
html.theme-dark .bg-white:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *), body.theme-dark .bg-white:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *) {
  background: #111C2E !important;
  background-color: #111C2E !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

html.theme-dark .khabeo-lp-benefit-card, body.theme-dark .khabeo-lp-benefit-card {
  background: #0B1120 !important;
  border-color: #1E293B !important;
}

html.theme-dark .khabeo-lp-quick-tester-bar, body.theme-dark .khabeo-lp-quick-tester-bar {
  background: #111C2E !important;
  border-color: #1E293B !important;
}

html.theme-dark .khabeo-lp-quick-tester-bar .quick-tester-title, body.theme-dark .khabeo-lp-quick-tester-bar .quick-tester-title {
  color: #F8FAFC !important;
}

html.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.theme-dark select, body.theme-dark select,
html.theme-dark textarea, body.theme-dark textarea,
html.theme-dark .form-control, body.theme-dark .form-control,
html.theme-dark .form-select, body.theme-dark .form-select,
html.theme-dark #quick-tester-url-input, body.theme-dark #quick-tester-url-input,
html.theme-dark #lp-client-search, body.theme-dark #lp-client-search,
html.theme-dark #lp-client-category, body.theme-dark #lp-client-category,
html.theme-dark #lp-client-price, body.theme-dark #lp-client-price,
html.theme-dark #lp-client-sort, body.theme-dark #lp-client-sort {
  background-color: #0B1120 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

html.theme-dark .khabeo-lp-filter-chip, body.theme-dark .khabeo-lp-filter-chip {
  background: #111C2E !important;
  border-color: #1E293B !important;
  color: #94A3B8 !important;
}

html.theme-dark .khabeo-lp-filter-chip.active, body.theme-dark .khabeo-lp-filter-chip.active {
  background: #2563EB !important;
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
}

html.theme-dark table, body.theme-dark table,
html.theme-dark .table, body.theme-dark .table {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #1E293B !important;
}

html.theme-dark table thead th, body.theme-dark table thead th,
html.theme-dark .table thead th, body.theme-dark .table thead th {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

html.theme-dark table tbody td, body.theme-dark table tbody td,
html.theme-dark .table tbody td, body.theme-dark .table tbody td,
html.theme-dark table tbody tr, body.theme-dark table tbody tr,
html.theme-dark .table tbody tr, body.theme-dark .table tbody tr {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #1E293B !important;
}

html.theme-dark .khabeo-account-dropdown, body.theme-dark .khabeo-account-dropdown {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  color: #F8FAFC !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important;
}

html.theme-dark .khabeo-account-dropdown-item, body.theme-dark .khabeo-account-dropdown-item {
  color: #E2E8F0 !important;
}

html.theme-dark .khabeo-account-dropdown-item:hover, body.theme-dark .khabeo-account-dropdown-item:hover {
  background: #1E293B !important;
  color: #38BDF8 !important;
}


/* 2. LIGHT MODE FULL ENGINE */
html.theme-light,
body.theme-light {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

html.theme-light #root,
body.theme-light #root,
html.theme-light .d-flex.bg-body,
body.theme-light .d-flex.bg-body,
html.theme-light .col-10.h-100,
body.theme-light .col-10.h-100,
html.theme-light .sidebar-content-area,
body.theme-light .sidebar-content-area,
html.theme-light .style_rightSide__dVW0T,
body.theme-light .style_rightSide__dVW0T,
html.theme-light .main-content-scrollable,
body.theme-light .main-content-scrollable,
html.theme-light .khabeo-lp-wrapper,
body.theme-light .khabeo-lp-wrapper {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* --- Light Mode Header (Pinned Top Bar) --- */
html.theme-light .topbar-header-enhanced,
body.theme-light .topbar-header-enhanced,
html.theme-light .pe-4,
body.theme-light .pe-4,
html.theme-light .w-100.d-flex.justify-content-between.align-items-center.py-3.pe-4,
body.theme-light .w-100.d-flex.justify-content-between.align-items-center.py-3.pe-4,
html.theme-light .w-100.d-flex.justify-content-between.align-items-center,
body.theme-light .w-100.d-flex.justify-content-between.align-items-center,
html.theme-light header,
body.theme-light header {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  color: #0F172A !important;
}

html.theme-light .topbar-header-enhanced *,
body.theme-light .topbar-header-enhanced *,
html.theme-light .pe-4 *,
body.theme-light .pe-4 *,
html.theme-light .khabeo-header-title-text,
body.theme-light .khabeo-header-title-text {
  color: #0F172A !important;
}

html.theme-light .khabeo-btn-support-pill,
body.theme-light .khabeo-btn-support-pill {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #2563EB !important;
}

html.theme-light .khabeo-btn-support-pill:hover,
body.theme-light .khabeo-btn-support-pill:hover {
  background: #EFF6FF !important;
  border-color: #2563EB !important;
  color: #1D4ED8 !important;
}

html.theme-light .khabeo-btn-theme-quick-toggle,
body.theme-light .khabeo-btn-theme-quick-toggle {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

html.theme-light .khabeo-btn-theme-quick-toggle:hover,
body.theme-light .khabeo-btn-theme-quick-toggle:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* --- Light Mode Sidebar --- */
html.theme-light .sidebar-sticky-wrapper,
body.theme-light .sidebar-sticky-wrapper,
html.theme-light .col-2.h-100.px-3.pb-3,
body.theme-light .col-2.h-100.px-3.pb-3 {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-right: 1px solid #E2E8F0 !important;
}

html.theme-light .sidebar-sticky-wrapper .accordion-button,
body.theme-light .sidebar-sticky-wrapper .accordion-button,
html.theme-light .col-2 .accordion-button,
body.theme-light .col-2 .accordion-button {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

html.theme-light .sidebar-sticky-wrapper .accordion-button:not(.collapsed),
body.theme-light .sidebar-sticky-wrapper .accordion-button:not(.collapsed),
html.theme-light .col-2 .accordion-button:not(.collapsed),
body.theme-light .col-2 .accordion-button:not(.collapsed) {
  background: #F8FAFC !important;
  color: #2563EB !important;
}

html.theme-light .sidebar-sticky-wrapper .menu-links a,
body.theme-light .sidebar-sticky-wrapper .menu-links a,
html.theme-light .col-2 .menu-links a,
body.theme-light .col-2 .menu-links a {
  color: #334155 !important;
}

html.theme-light .sidebar-sticky-wrapper .menu-links a:hover,
body.theme-light .sidebar-sticky-wrapper .menu-links a:hover,
html.theme-light .col-2 .menu-links a:hover,
body.theme-light .col-2 .menu-links a:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

html.theme-light .sidebar-sticky-wrapper .menu-links a.active,
body.theme-light .sidebar-sticky-wrapper .menu-links a.active,
html.theme-light .col-2 .menu-links a.active,
body.theme-light .col-2 .menu-links a.active {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-left: 3px solid #2563EB !important;
}

/* --- Light Mode Bank Cards, Popular Strip & Filter Controls --- */
html.theme-light .khabeo-bank-card-root,
body.theme-light .khabeo-bank-card-root,
html.theme-light .khabeo-shortcut-card,
body.theme-light .khabeo-shortcut-card,
html.theme-light .khabeo-popular-strip,
body.theme-light .khabeo-popular-strip,
html.theme-light .khabeo-filter-bar,
body.theme-light .khabeo-filter-bar,
html.theme-light .khabeo-intro-hero,
body.theme-light .khabeo-intro-hero,
html.theme-light .card,
body.theme-light .card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .khabeo-bank-card-root:hover,
body.theme-light .khabeo-bank-card-root:hover,
html.theme-light .khabeo-shortcut-card:hover,
body.theme-light .khabeo-shortcut-card:hover {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

html.theme-light .khabeo-bank-card-root .khabeo-bank-name,
body.theme-light .khabeo-bank-card-root .khabeo-bank-name,
html.theme-light .khabeo-bank-card-root .khabeo-card-title,
body.theme-light .khabeo-bank-card-root .khabeo-card-title,
html.theme-light .khabeo-card-body h3,
body.theme-light .khabeo-card-body h3,
html.theme-light .khabeo-card-body h4,
body.theme-light .khabeo-card-body h4,
html.theme-light .khabeo-card-body h5,
body.theme-light .khabeo-card-body h5,
html.theme-light .khabeo-popular-label span,
body.theme-light .khabeo-popular-label span,
html.theme-light .khabeo-popular-label strong,
body.theme-light .khabeo-popular-label strong,
html.theme-light .khabeo-filter-bar span,
body.theme-light .khabeo-filter-bar span {
  color: #0F172A !important;
}

html.theme-light .khabeo-bank-card-root .khabeo-bank-sub,
body.theme-light .khabeo-bank-card-root .khabeo-bank-sub,
html.theme-light .khabeo-bank-card-root .khabeo-bank-desc,
body.theme-light .khabeo-bank-card-root .khabeo-bank-desc,
html.theme-light .khabeo-card-body p,
body.theme-light .khabeo-card-body p {
  color: #64748B !important;
}

html.theme-light .khabeo-popular-chip,
body.theme-light .khabeo-popular-chip {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

html.theme-light .khabeo-popular-chip:hover,
body.theme-light .khabeo-popular-chip:hover {
  background: #2563EB !important;
  background-color: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

html.theme-light .khabeo-tab-pill,
body.theme-light .khabeo-tab-pill {
  color: #64748B !important;
}

html.theme-light .khabeo-tab-pill:hover,
body.theme-light .khabeo-tab-pill:hover {
  color: #0F172A !important;
  background: #F1F5F9 !important;
}

html.theme-light .khabeo-tab-pill.active,
body.theme-light .khabeo-tab-pill.active {
  background: #0F172A !important;
  border-color: #0F172A !important;
  color: #FFFFFF !important;
}

html.theme-light .khabeo-search-cluster,
body.theme-light .khabeo-search-cluster,
html.theme-light .khabeo-search-cluster input,
body.theme-light .khabeo-search-cluster input,
html.theme-light .khabeo-search-cluster select,
body.theme-light .khabeo-search-cluster select,
html.theme-light .khabeo-search-input-wrap,
body.theme-light .khabeo-search-input-wrap,
html.theme-light .khabeo-sort-select,
body.theme-light .khabeo-sort-select {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* --- Light Mode General Typography, Inputs & Tables --- */
html.theme-light h1:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light h1:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light h2:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light h2:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light h3:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light h3:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light h4:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light h4:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light h5:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light h5:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light h6:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light h6:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light p:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light p:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light label:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light label:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light td:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light td:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light th:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light th:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light li:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light li:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light b:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light b:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light strong:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *), body.theme-light strong:not(.bill *):not([ref="billRef"] *):not(.billContainerIOS *):not(.billContainerAndroid *):not([class*="billStatusCard"] *):not([class*="style_txRowIos"] *):not([class*="style_withdrawalStatus"] *):not([class*="style_billInfo"] *):not(.auth-saas-viewport *):not(.saas-auth-card *),
html.theme-light .khabeo-lp-hero-title, body.theme-light .khabeo-lp-hero-title,
html.theme-light .khabeo-lp-card-title, body.theme-light .khabeo-lp-card-title,
html.theme-light .khabeo-lp-benefit-card strong, body.theme-light .khabeo-lp-benefit-card strong {
  color: #0F172A !important;
}

html.theme-light .khabeo-lp-hero-desc, body.theme-light .khabeo-lp-hero-desc,
html.theme-light .khabeo-lp-card-desc, body.theme-light .khabeo-lp-card-desc,
html.theme-light .khabeo-lp-benefit-card span, body.theme-light .khabeo-lp-benefit-card span,
html.theme-light .text-muted, body.theme-light .text-muted {
  color: #475569 !important;
}

html.theme-light .khabeo-lp-hero-banner, body.theme-light .khabeo-lp-hero-banner,
html.theme-light .khabeo-lp-card, body.theme-light .khabeo-lp-card,
html.theme-light .khabeo-lp-card-body, body.theme-light .khabeo-lp-card-body,
html.theme-light .khabeo-lp-admin-panel, body.theme-light .khabeo-lp-admin-panel,
html.theme-light .khabeo-profile-card, body.theme-light .khabeo-profile-card,
html.theme-light .khabeo-terms-paper, body.theme-light .khabeo-terms-paper,
html.theme-light .bg-white, body.theme-light .bg-white {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

html.theme-light .khabeo-lp-benefit-card, body.theme-light .khabeo-lp-benefit-card {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html.theme-light .khabeo-lp-quick-tester-bar, body.theme-light .khabeo-lp-quick-tester-bar {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html.theme-light .khabeo-lp-quick-tester-bar .quick-tester-title, body.theme-light .khabeo-lp-quick-tester-bar .quick-tester-title {
  color: #0F172A !important;
}

html.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.theme-light select, body.theme-light select,
html.theme-light textarea, body.theme-light textarea,
html.theme-light .form-control, body.theme-light .form-control,
html.theme-light .form-select, body.theme-light .form-select,
html.theme-light #quick-tester-url-input, body.theme-light #quick-tester-url-input,
html.theme-light #lp-client-search, body.theme-light #lp-client-search,
html.theme-light #lp-client-category, body.theme-light #lp-client-category,
html.theme-light #lp-client-price, body.theme-light #lp-client-price,
html.theme-light #lp-client-sort, body.theme-light #lp-client-sort {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

html.theme-light .khabeo-lp-filter-chip, body.theme-light .khabeo-lp-filter-chip {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

html.theme-light .khabeo-lp-filter-chip.active, body.theme-light .khabeo-lp-filter-chip.active {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

html.theme-light table, body.theme-light table,
html.theme-light .table, body.theme-light .table {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

html.theme-light table thead th, body.theme-light table thead th,
html.theme-light .table thead th, body.theme-light .table thead th {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

html.theme-light table tbody td, body.theme-light table tbody td,
html.theme-light .table tbody td, body.theme-light .table tbody td,
html.theme-light table tbody tr, body.theme-light table tbody tr,
html.theme-light .table tbody tr, body.theme-light .table tbody tr {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

html.theme-light .khabeo-account-dropdown, body.theme-light .khabeo-account-dropdown {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .khabeo-account-dropdown-item, body.theme-light .khabeo-account-dropdown-item {
  color: #334155 !important;
}

html.theme-light .khabeo-account-dropdown-item:hover, body.theme-light .khabeo-account-dropdown-item:hover {
  background: #F1F5F9 !important;
  color: #2563EB !important;
}

/* 3. DUAL-THEME ILLUSTRATION SWITCHER */
/* Bản Trắng (Light) & Bản Đen (Dark) */
.khabeo-illustration-dark {
  display: block !important;
}
.khabeo-illustration-light {
  display: none !important;
}

body.theme-dark .khabeo-illustration-dark {
  display: block !important;
}
body.theme-dark .khabeo-illustration-light {
  display: none !important;
}

body.theme-light .khabeo-illustration-dark {
  display: none !important;
}
body.theme-light .khabeo-illustration-light {
  display: block !important;
}

/* 4. ADMIN-ONLY VISIBILITY SAFEGUARD FOR QUICK TESTER BAR */
.khabeo-lp-quick-tester-bar.admin-only-feature {
  display: none !important;
}
body.is-admin-view .khabeo-lp-quick-tester-bar.admin-only-feature {
  display: block !important;
}

/* ==========================================================================
   5. COMPREHENSIVE TERMS OF USE BLOCKING GATE MODAL (ĐIỀU KHOẢN SỬ DỤNG)
   Bắt buộc xác nhận cam kết trước khi sử dụng các dịch vụ khác
   ========================================================================== */
.khabeo-terms-gate-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(11, 17, 32, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  animation: khabeoGateFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

.khabeo-terms-gate-dialog {
  width: 100% !important;
  max-width: 660px !important;
  background: #0F172A !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(239, 68, 68, 0.2) !important;
  padding: 28px !important;
  color: #F8FAFC !important;
  font-family: inherit !important;
  position: relative !important;
  animation: khabeoGatePop 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes khabeoGatePop {
  from { transform: scale(0.94) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.terms-gate-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(239, 68, 68, 0.14) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #F87171 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
}

.pulse-red-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #EF4444 !important;
  box-shadow: 0 0 10px #EF4444 !important;
  animation: redDotPulse 1.5s infinite !important;
}

@keyframes redDotPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.terms-gate-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.35 !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -0.2px !important;
}

.terms-gate-sub {
  font-size: 13.5px !important;
  color: #94A3B8 !important;
  margin-bottom: 18px !important;
  line-height: 1.5 !important;
}

.terms-gate-alert-box {
  background: rgba(220, 38, 38, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

.gate-alert-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #FCA5A5 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}

.gate-alert-content p {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: #E2E8F0 !important;
  margin-bottom: 8px !important;
}
.gate-alert-content p:last-child {
  margin-bottom: 0 !important;
}

.terms-gate-checkbox-wrap {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 22px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.terms-gate-checkbox-wrap:hover {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: #475569 !important;
}

.terms-gate-check-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

#gate-checkbox-agree {
  width: 19px !important;
  height: 19px !important;
  accent-color: #EF4444 !important;
  cursor: pointer !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.custom-check-box-text {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #F1F5F9 !important;
  user-select: none !important;
}

.terms-gate-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.btn-gate-confirm-action {
  width: 100% !important;
  padding: 13px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: not-allowed !important;
  background: #334155 !important;
  color: #64748B !important;
  transition: all 0.25s ease !important;
}

.btn-gate-confirm-action.ready {
  cursor: pointer !important;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45) !important;
}

.btn-gate-confirm-action.ready:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.6) !important;
}

.btn-gate-redirect-landing {
  width: 100% !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  color: #60A5FA !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-gate-redirect-landing:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: #3B82F6 !important;
}

.terms-gate-footer-note {
  text-align: center !important;
  font-size: 12.5px !important;
}

.gate-full-terms-link {
  color: #94A3B8 !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.gate-full-terms-link:hover {
  color: #FFFFFF !important;
}

/* Light Theme Terms Gate Modal */
html.theme-light .khabeo-terms-gate-dialog,
body.theme-light .khabeo-terms-gate-dialog {
  background: #FFFFFF !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #0F172A !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
}

html.theme-light .terms-gate-title,
body.theme-light .terms-gate-title {
  color: #0F172A !important;
}

html.theme-light .terms-gate-sub,
body.theme-light .terms-gate-sub {
  color: #475569 !important;
}

html.theme-light .terms-gate-alert-box,
body.theme-light .terms-gate-alert-box {
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
}

html.theme-light .gate-alert-heading,
body.theme-light .gate-alert-heading {
  color: #B91C1C !important;
}

html.theme-light .gate-alert-content p,
body.theme-light .gate-alert-content p {
  color: #1E293B !important;
}

html.theme-light .terms-gate-checkbox-wrap,
body.theme-light .terms-gate-checkbox-wrap {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html.theme-light .terms-gate-checkbox-wrap:hover,
body.theme-light .terms-gate-checkbox-wrap:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

html.theme-light .custom-check-box-text,
body.theme-light .custom-check-box-text {
  color: #1E293B !important;
}

html.theme-light .gate-full-terms-link,
body.theme-light .gate-full-terms-link {
  color: #64748B !important;
}
html.theme-light .gate-full-terms-link:hover,
body.theme-light .gate-full-terms-link:hover {
  color: #0F172A !important;
}

/* ==========================================================================
   6. 100% BULLETPROOF THEME ENGINE OVERRIDES (DASHBOARD & FULL-PAGE SYNC)
   Fixes ALL remaining Dark & Light mode contrast and visual leaks
   ========================================================================== */

/* --- DARK MODE DASHBOARD OVERRIDES --- */
html.theme-dark .khabeo-stat-box,
body.theme-dark .khabeo-stat-box {
  background: #111C2E !important;
  background-color: #111C2E !important;
  border: 1px solid #1E293B !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html.theme-dark .khabeo-stat-box:hover,
body.theme-dark .khabeo-stat-box:hover {
  background: #16243A !important;
  background-color: #16243A !important;
  border-color: #334155 !important;
}

html.theme-dark .khabeo-stat-lbl,
body.theme-dark .khabeo-stat-lbl {
  color: #94A3B8 !important;
}

html.theme-dark .khabeo-stat-val,
body.theme-dark .khabeo-stat-val {
  color: #F8FAFC !important;
}

html.theme-dark .khabeo-stat-sub,
body.theme-dark .khabeo-stat-sub {
  color: #64748B !important;
}

/* User chip / avatar in Dark Mode */
html.theme-dark .khabeo-user-chip-pro,
body.theme-dark .khabeo-user-chip-pro,
html.theme-dark #khabeo-user-chip,
body.theme-dark #khabeo-user-chip,
html.theme-dark .khabeo-saas-profile-widget,
body.theme-dark .khabeo-saas-profile-widget,
html.theme-dark .vip-avatar-badge-btn,
body.theme-dark .vip-avatar-badge-btn {
  background: #111C2E !important;
  background-color: #111C2E !important;
  border: 1px solid #1E293B !important;
  color: #F8FAFC !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html.theme-dark .khabeo-chip-username,
body.theme-dark .khabeo-chip-username {
  color: #F8FAFC !important;
  text-shadow: none !important;
}

html.theme-dark .khabeo-chip-role,
body.theme-dark .khabeo-chip-role {
  background: transparent !important;
}

html.theme-dark .khabeo-chip-role.tier-vip,
body.theme-dark .khabeo-chip-role.tier-vip {
  color: #FBBF24 !important;
}

html.theme-dark .khabeo-chip-role.tier-admin,
body.theme-dark .khabeo-chip-role.tier-admin {
  color: #C084FC !important;
}

html.theme-dark .khabeo-chip-role.tier-regular,
body.theme-dark .khabeo-chip-role.tier-regular {
  color: #38BDF8 !important;
}

html.theme-dark .khabeo-avatar-glow-neon,
body.theme-dark .khabeo-avatar-glow-neon {
  opacity: 0.35 !important;
}

/* --- LIGHT MODE DASHBOARD OVERRIDES --- */

/* 1. Banner Slider Container & Notice Marquee in Light Mode */
html.theme-light .khabeo-banner-slider-container,
body.theme-light .khabeo-banner-slider-container {
  background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%) !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  color: #0F172A !important;
}

html.theme-light .khabeo-banner-slider-container h2,
body.theme-light .khabeo-banner-slider-container h2 {
  color: #0F172A !important;
  text-shadow: none !important;
}

html.theme-light .khabeo-banner-slider-container p,
body.theme-light .khabeo-banner-slider-container p {
  color: #475569 !important;
}

html.theme-light .khabeo-admin-notice-bar,
body.theme-light .khabeo-admin-notice-bar {
  background: linear-gradient(90deg, #F8FAFC 0%, #EFF6FF 100%) !important;
  background-color: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
}

html.theme-light .khabeo-admin-notice-bar span,
body.theme-light .khabeo-admin-notice-bar span,
html.theme-light .khabeo-admin-notice-bar marquee,
body.theme-light .khabeo-admin-notice-bar marquee {
  color: #334155 !important;
}

/* 2. Stat Boxes in Light Mode */
html.theme-light .khabeo-stat-box,
body.theme-light .khabeo-stat-box {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .khabeo-stat-box:hover,
body.theme-light .khabeo-stat-box:hover {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

html.theme-light .khabeo-stat-lbl,
body.theme-light .khabeo-stat-lbl {
  color: #64748B !important;
}

html.theme-light .khabeo-stat-val,
body.theme-light .khabeo-stat-val {
  color: #0F172A !important;
}

html.theme-light .khabeo-stat-sub,
body.theme-light .khabeo-stat-sub {
  color: #94A3B8 !important;
}

/* 3. Quick Bank Shortcut Launcher Container & Cards in Light Mode */
html.theme-light div.mb-5.p-4,
body.theme-light div.mb-5.p-4,
html.theme-light .container-fluid > div.mb-5,
body.theme-light .container-fluid > div.mb-5 {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

html.theme-light div.mb-5.p-4 h4,
body.theme-light div.mb-5.p-4 h4 {
  color: #0F172A !important;
}

html.theme-light div.mb-5.p-4 .btn-outline-primary,
body.theme-light div.mb-5.p-4 .btn-outline-primary {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #2563EB !important;
}

html.theme-light div.mb-5.p-4 .btn-outline-primary:hover,
body.theme-light div.mb-5.p-4 .btn-outline-primary:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

html.theme-light .khabeo-shortcut-card,
body.theme-light .khabeo-shortcut-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  color: #0F172A !important;
}

html.theme-light .khabeo-shortcut-card .fw-bold,
body.theme-light .khabeo-shortcut-card .fw-bold {
  color: #0F172A !important;
}

html.theme-light .khabeo-shortcut-card span,
body.theme-light .khabeo-shortcut-card span {
  color: #475569 !important;
}

html.theme-light .khabeo-shortcut-card:hover,
body.theme-light .khabeo-shortcut-card:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

/* 4. Articles Section in Light Mode */
html.theme-light .khabeo-articles-section,
body.theme-light .khabeo-articles-section {
  border-top-color: #E2E8F0 !important;
}

html.theme-light .khabeo-articles-section h3,
body.theme-light .khabeo-articles-section h3 {
  color: #0F172A !important;
}

html.theme-light .khabeo-articles-section .card,
body.theme-light .khabeo-articles-section .card,
html.theme-light .khabeo-articles-section .bg-dark,
body.theme-light .khabeo-articles-section .bg-dark {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .khabeo-articles-section .card h5,
body.theme-light .khabeo-articles-section .card h5 {
  color: #0F172A !important;
}

html.theme-light .khabeo-articles-section .card p,
body.theme-light .khabeo-articles-section .card p,
html.theme-light .khabeo-articles-section .card span,
body.theme-light .khabeo-articles-section .card span {
  color: #475569 !important;
}

/* 5. User Profile Chip in Light Mode */
html.theme-light .khabeo-user-chip-pro,
body.theme-light .khabeo-user-chip-pro,
html.theme-light #khabeo-user-chip,
body.theme-light #khabeo-user-chip,
html.theme-light .khabeo-saas-profile-widget,
body.theme-light .khabeo-saas-profile-widget,
html.theme-light .vip-avatar-badge-btn,
body.theme-light .vip-avatar-badge-btn {
  background: #F1F5F9 !important;
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.theme-light .khabeo-chip-username,
body.theme-light .khabeo-chip-username {
  color: #0F172A !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

html.theme-light .khabeo-chip-role,
body.theme-light .khabeo-chip-role {
  background: transparent !important;
}

html.theme-light .khabeo-chip-role.tier-vip,
body.theme-light .khabeo-chip-role.tier-vip {
  color: #B45309 !important;
  font-weight: 800 !important;
}

html.theme-light .khabeo-chip-role.tier-admin,
body.theme-light .khabeo-chip-role.tier-admin {
  color: #7E22CE !important;
  font-weight: 800 !important;
}

html.theme-light .khabeo-chip-role.tier-regular,
body.theme-light .khabeo-chip-role.tier-regular {
  color: #0369A1 !important;
  font-weight: 800 !important;
}

html.theme-light .khabeo-avatar-glow-neon,
body.theme-light .khabeo-avatar-glow-neon {
  display: none !important;
}

/* 6. Sidebar Brand Card at bottom in Light Mode */
html.theme-light .khabeo-sidebar-brand-card,
body.theme-light .khabeo-sidebar-brand-card,
html.theme-light #khabeo-sidebar-brand-card,
body.theme-light #khabeo-sidebar-brand-card {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 3px solid #0284C7 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light #khabeo-sidebar-brand-card .khabeo-brand-title,
body.theme-light #khabeo-sidebar-brand-card .khabeo-brand-title {
  color: #0F172A !important;
}

html.theme-light #khabeo-sidebar-brand-card .meta-label,
body.theme-light #khabeo-sidebar-brand-card .meta-label {
  color: #64748B !important;
}

html.theme-light #khabeo-sidebar-brand-card .meta-val,
body.theme-light #khabeo-sidebar-brand-card .meta-val {
  color: #0F172A !important;
}

html.theme-light #khabeo-sidebar-brand-card .highlight-version,
body.theme-light #khabeo-sidebar-brand-card .highlight-version {
  color: #0284C7 !important;
}

html.theme-light #khabeo-sidebar-brand-card .khabeo-tele-3d-box,
body.theme-light #khabeo-sidebar-brand-card .khabeo-tele-3d-box {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
}

html.theme-light #khabeo-sidebar-brand-card .tele-title,
body.theme-light #khabeo-sidebar-brand-card .tele-title {
  color: #64748B !important;
}

html.theme-light #khabeo-sidebar-brand-card .tele-handle,
body.theme-light #khabeo-sidebar-brand-card .tele-handle {
  color: #0284C7 !important;
}

/* ==========================================================================
   PRISTINE 1:1 PHONE MOCKUP & BILL GENERATOR ISOLATION (ZERO UNWANTED EFFECTS)
   - Completely removes all shadows, frames, borders from phone mockups & bills
   - Protects Dynamic Island, signal bars, wifi, bank logos, avatars, copy & refresh icons
   - Guarantees 100% crisp authentic dark readability on Chi Tiết Rút Tiền & Lịch Sử Rút Tiền
   ========================================================================== */

/* 1. Global Reset for Phone Mockup & Bill Containers */
.bill,
#bill,
[ref="billRef"],
.hdBillContainer,
.billContainerIOS,
.billContainerAndroid,
.quick-bill-container,
[class*="billStatusCard"],
[class*="style_txRowIos"],
[class*="style_withdrawalStatusBlock"] {
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  filter: none !important;
}

/* 2. Absolute Flat & Authentic Reset for ALL Descendants of Simulated Screens */
.bill *,
#bill *,
[ref="billRef"] *,
.billContainerIOS *,
.billContainerAndroid *,
[class*="style_withdrawalStatusBlock"] *,
[class*="style_billStatusCard"] *,
[class*="style_txRowIos"] * {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* 3. Images & Logos Inside Simulated Screens (Zero borders, zero shadows, transparent bg) */
.bill img,
#bill img,
[ref="billRef"] img,
.billContainerIOS img,
.billContainerAndroid img,
[class*="style_withdrawalStatusBlock"] img,
[class*="style_billStatusCard"] img,
[class*="style_txRowIos"] img,
.bill img[alt="dynamic-island"],
.bill img[alt="to-bank-logo"],
.bill img[alt="napas247"],
.bill img[alt="copy icon"],
.bill img[alt="refresh icon"],
.bill img[alt="star icon"],
.bill img[alt^="Level"] {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: none !important;
  transform: none !important;
}

/* 4. Status Bar Elements (Cellular Signal Bars, Wifi, 4G/5G) */
.bill [class*="Sim"],
.bill [class*="sim"],
.bill [class*="wifi"],
.bill [class*="Wifi"],
.bill [class*="arc"],
.bill .mainSim,
.bill .itemSim1,
.bill .itemSim2,
.bill .itemSim3,
.bill .itemSim4,
.bill .wifiIcon,
.bill .arc1,
.bill .arc2,
.bill .arc3,
.bill .wifi4gLte,
.bill .timeIos,
[class*="style_withdrawalStatusBlock"] [class*="Sim"],
[class*="style_withdrawalStatusBlock"] [class*="wifi"],
[class*="style_txRowIos"] [class*="Sim"],
[class*="style_txRowIos"] [class*="wifi"] {
  box-shadow: none !important;
  border: none !important;
  background-color: transparent;
  filter: none !important;
  text-shadow: none !important;
}

/* ==========================================================================
   AUTHENTIC IPHONE STATUS BAR BATTERY RESTORATION (DARK & LIGHT MODES)
   ========================================================================== */

/* Structure & Layout */
.bill .itemPinShow,
[ref="billRef"] .itemPinShow {
  width: 40px !important;
  height: 21px !important;
  border-radius: 7px !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bill .itemPinPhantramShow,
[ref="billRef"] .itemPinPhantramShow,
.bill .itemPinPhantramShowSac,
[ref="billRef"] .itemPinPhantramShowSac {
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
}

.bill .itemPinPhantramShowSo,
[ref="billRef"] .itemPinPhantramShowSo,
.bill .itemPinPhantramShowSoSac,
[ref="billRef"] .itemPinPhantramShowSoSac {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: SFProDisplay, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.2px !important;
  z-index: 100 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.bill .juiceNumShowIos2,
[ref="billRef"] .juiceNumShowIos2 {
  width: 2px !important;
  height: 100% !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute !important;
  right: 0 !important;
}

/* 1. CHẾ ĐỘ TỐI CỦA VIÊN PIN (Dark Battery / Light Status Bar / iosPinMode: "dark") */
/* Dành cho nền sáng: Vỏ xám mờ bán trong suốt 35% black, ruột đen, chữ số trắng rõ nét */
.bill .mainPinIosShow:not(.mainPinIosShowTr2) .itemPinShow,
[ref="billRef"] .mainPinIosShow:not(.mainPinIosShowTr2) .itemPinShow {
  background: rgba(0, 0, 0, 0.35) !important;
}

.bill .mainPinIosShow:not(.mainPinIosShowTr2) .juiceNumShowIos2,
[ref="billRef"] .mainPinIosShow:not(.mainPinIosShowTr2) .juiceNumShowIos2 {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

.bill .mainPinIosShow:not(.mainPinIosShowTr2) .itemPinPhantramShow:not(.pinFillLow):not(.pinFillGreen):not(.itemPinPhantramShowSac),
[ref="billRef"] .mainPinIosShow:not(.mainPinIosShowTr2) .itemPinPhantramShow:not(.pinFillLow):not(.pinFillGreen):not(.itemPinPhantramShowSac) {
  background-color: #000000 !important;
}

.bill .mainPinIosShow:not(.mainPinIosShowTr2) .itemPinPhantramShowSo,
[ref="billRef"] .mainPinIosShow:not(.mainPinIosShowTr2) .itemPinPhantramShowSo {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Dạng pin cũ không số phần trăm ở chế độ tối */
.bill .mainPinIos:not(.maiPinIosTr) .itemPin,
[ref="billRef"] .mainPinIos:not(.maiPinIosTr) .itemPin {
  border: 2px solid rgba(0, 0, 0, 0.4) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bill .mainPinIos:not(.maiPinIosTr) .itemPinPhanTram2,
[ref="billRef"] .mainPinIos:not(.maiPinIosTr) .itemPinPhanTram2 {
  background-color: #000000 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.bill .mainPinIos:not(.maiPinIosTr) .juiceNumShowIos,
[ref="billRef"] .mainPinIos:not(.maiPinIosTr) .juiceNumShowIos {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* 2. CHẾ ĐỘ SÁNG CỦA VIÊN PIN (Light Battery / Dark Status Bar / iosPinMode: "light") */
/* Dành cho nền tối: Vỏ trắng mờ bán trong suốt 40% white, ruột trắng, chữ số đen rõ nét */
.bill .mainPinIosShowTr2 .itemPinShow,
[ref="billRef"] .mainPinIosShowTr2 .itemPinShow {
  background: rgba(255, 255, 255, 0.4) !important;
}

.bill .mainPinIosShowTr2 .juiceNumShowIos2,
[ref="billRef"] .mainPinIosShowTr2 .juiceNumShowIos2 {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.bill .mainPinIosShowTr2 .itemPinPhantramShow:not(.pinFillLow):not(.pinFillGreen):not(.itemPinPhantramShowSac),
[ref="billRef"] .mainPinIosShowTr2 .itemPinPhantramShow:not(.pinFillLow):not(.pinFillGreen):not(.itemPinPhantramShowSac) {
  background-color: #ffffff !important;
}

/* Chữ số chế độ sáng: Mặc định màu đen trên nền ruột pin trắng (không bị trắng lẫn trắng) */
.bill .mainPinIosShowTr2 .itemPinPhantramShowSo:not(.itemPinPhantramShowSoSac),
[ref="billRef"] .mainPinIosShowTr2 .itemPinPhantramShowSo:not(.itemPinPhantramShowSoSac) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Khi sạc hoặc pin yếu đỏ: chữ số màu trắng trên nền xanh/đỏ */
.bill .mainPinIosShowTr2 .itemPinPhantramShowSoSac,
[ref="billRef"] .mainPinIosShowTr2 .itemPinPhantramShowSoSac,
.bill .mainPinIosShowTr2 .itemPinPhantramShow.pinFillLow ~ .itemPinPhantramShowSo,
[ref="billRef"] .mainPinIosShowTr2 .itemPinPhantramShow.pinFillLow ~ .itemPinPhantramShowSo,
.bill .mainPinIosShowTr2 .itemPinPhantramShow.pinFillGreen ~ .itemPinPhantramShowSo,
[ref="billRef"] .mainPinIosShowTr2 .itemPinPhantramShow.pinFillGreen ~ .itemPinPhantramShowSo,
.bill .mainPinIosShowTr2 .itemPinPhantramShowSac ~ .itemPinPhantramShowSo,
[ref="billRef"] .mainPinIosShowTr2 .itemPinPhantramShowSac ~ .itemPinPhantramShowSo {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Dạng pin cũ không số phần trăm ở chế độ sáng */
.bill .maiPinIosTr .itemPin,
[ref="billRef"] .maiPinIosTr .itemPin {
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bill .maiPinIosTr .itemPinPhanTram2,
[ref="billRef"] .maiPinIosTr .itemPinPhanTram2 {
  background-color: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.bill .maiPinIosTr .juiceNumShowIos,
[ref="billRef"] .maiPinIosTr .juiceNumShowIos {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* 3. Màu Ruột Pin Đặc Biệt: Đỏ khi < 20%, Xanh khi sạc */
.bill .itemPinPhantramShow.pinFillLow,
[ref="billRef"] .itemPinPhantramShow.pinFillLow,
.bill .pinFillLow,
[ref="billRef"] .pinFillLow {
  background-color: #ff3b30 !important;
}

.bill .itemPinPhantramShowSac,
[ref="billRef"] .itemPinPhantramShowSac,
.bill .itemPinPhantramShow.pinFillGreen,
[ref="billRef"] .itemPinPhantramShow.pinFillGreen,
.bill .pinFillGreen,
[ref="billRef"] .pinFillGreen {
  background-color: #34c75a !important;
}


/* Preserve authentic SVG and arc borders without outside shadow wrappers */
.bill .arc,
[class*="style_withdrawalStatusBlock"] .arc,
[class*="style_txRowIos"] .arc {
  box-shadow: none !important;
  filter: none !important;
}

/* 5. Authentic Receipt Styling & High-Contrast Typography (Chi Tiết Rút Tiền) */
[class*="style_billStatusCard"],
.style_billStatusCard__KzAYx {
  background-color: #eff7ff !important;
  border-radius: 19px !important;
  box-shadow: none !important;
  border: none !important;
}

/* Title: Rút thành công */
.style_withdrawalStatusTitle__QC63l,
[class*="style_withdrawalStatusTitle"] {
  color: #374151 !important;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  text-shadow: none !important;
}

/* Amount: 10,000.00 */
.style_withdrawalStatusAmount__w5sJF,
[class*="style_withdrawalStatusAmount"] {
  color: #1f2937 !important;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Converted Amount: ≈10,000,000.00đ */
.style_withdrawalStatusConvertedAmount__wMm4n,
[class*="style_withdrawalStatusConvertedAmount"] {
  color: #6b7280 !important;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* Labels: Loại Giao Dịch, Phương Thức, Thời Gian, Số đơn đặt */
.style_billInfoLabelColumn__afsc\+ p,
[class*="style_billInfoLabelColumn"] p {
  color: #4b5563 !important;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

/* Values: Rút Tiền, Thẻ ngân hàng, 09/10/2026, 310323... */
.style_billInfoValueColumn__BHOtf p,
[class*="style_billInfoValueColumn"] p {
  color: #111827 !important;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.style_billInfoMutedValue__f-bEs,
[class*="style_billInfoMutedValue"] {
  color: #4b5563 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* 6. Authentic Transaction History Rows (Lịch Sử Rút Tiền) */
.style_txRowIos__w4HUS,
.style_txRowIosSafari__Prmrw,
[class*="style_txRowIos"] {
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.style_txMeta__EFw6o,
.style_txMetaSafari__qROEo,
[class*="style_txMeta"] {
  color: #5e5e5e !important;
  font-size: 20px !important;
}

.style_txLabelRow__95XIP,
.style_txLabelRowSafari__ANU51,
[class*="style_txLabelRow"] {
  color: #a6a6a6 !important;
  font-size: 16px !important;
}

.style_txValueRow__REjqa,
.style_txValueRowSafari__R14\+h,
[class*="style_txValueRow"] {
  color: #111827 !important;
  font-size: 23px !important;
  font-weight: 600 !important;
}

/* Withdrawal history row cards */
.style_txRowIosSafari__Prmrw p,
.style_txRowIosSafari__Prmrw span,
.style_txRowIos__w4HUS p,
.style_txRowIos__w4HUS span {
  text-shadow: none !important;
}

/* 7. Gaming & Home Screen Mockups (LLWIN, XX88, GG88, MM88) */
.bill [class*="fontRoboto"] span[style*="color: #000"],
.bill [class*="fontRoboto"] span[style*="color: rgb(0, 0, 0)"] {
  color: #000000 !important;
}

.bill span[style*="color: #f1a920"],
.bill span[style*="color: rgb(241, 169, 32)"] {
  color: #f1a920 !important;
}

/* ==========================================================================
   8. UNIVERSAL FORM INPUTS & OUTPUT BILL PREVIEWS (ALL 62 BANKS)
   - 100% full-width input fields, no horizontal squeezing or truncation
   - Crisp, high-contrast typography, focus glow, and smooth spacing
   - Action buttons placed neatly in a dedicated row below the inputs
   - High-fidelity output bill frame with rounded corners & clean text wrapping
   ========================================================================== */

/* Universal Form Container & Column Sizing */
.card-body form,
.card-body .form-group,
.card-body .mb-3 {
  width: 100% !important;
  position: relative !important;
}

/* Force 100% full width on every input, select, and textarea across all banks */
.card-body input.form-control,
.card-body select.form-select,
.card-body select.form-control,
.card-body textarea.form-control,
.form-group input,
.form-group select,
.form-group textarea,
.mb-3 input,
.mb-3 select,
.mb-3 textarea {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 9px !important;
  padding: 6px 11px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
  display: block !important;
}

/* Ensure form columns have enough room for long names and full STKs on tablet & mid-sized desktop */
@media (min-width: 992px) and (max-width: 1600px) {
  .card-body .row > .col-4,
  .card-body .row > .col-md-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile: Form columns must take full 100% width for clean readability */
@media (max-width: 991px) {
  .card-body .row > .col-4,
  .card-body .row > .col-md-4,
  .card-body .row > .col-12,
  .card-body .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   TRANSACTION TIME PICKER (GIỜ / PHÚT / GIÂY / NGÀY) PRECISION FIT
   Prevents time selects from inheriting 100% width and overflowing offscreen
   ========================================================================== */
.card-body .form-group .d-flex:has(> select),
.form-group .d-flex:has(> select),
.form-group > .d-flex:has(select),
.d-flex:has(> select[aria-label="Gio"]),
.d-flex:has(> select[aria-label="Phut"]),
.d-flex:has(> select[aria-label="Giay"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.form-group .d-flex select,
.card-body .d-flex select,
.form-group select[aria-label="Gio"],
.form-group select[aria-label="Phut"],
.form-group select[aria-label="Giay"],
.card-body select[aria-label="Gio"],
.card-body select[aria-label="Phut"],
.card-body select[aria-label="Giay"],
select[aria-label="Gio"],
select[aria-label="Phut"],
select[aria-label="Giay"] {
  width: 32% !important;
  min-width: 0 !important;
  max-width: 33.333% !important;
  flex: 1 1 0% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  display: inline-block !important;
}

.form-group input[type="date"],
.card-body input[type="date"],
input[type="date"] {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  display: block !important;
}


.card-body textarea.form-control,
.form-group textarea,
.mb-3 textarea {
  height: auto !important;
  min-height: 84px !important;
  line-height: 1.5 !important;
}

/* Dark Theme Form Controls */
html.theme-dark .card-body input.form-control,
body.theme-dark .card-body input.form-control,
html.theme-dark .card-body select.form-select,
body.theme-dark .card-body select.form-select,
html.theme-dark .card-body textarea.form-control,
body.theme-dark .card-body textarea.form-control,
html.theme-dark .form-group input,
body.theme-dark .form-group input,
html.theme-dark .form-group select,
body.theme-dark .form-group select,
html.theme-dark .form-group textarea,
body.theme-dark .form-group textarea {
  background-color: #0f172a !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

html.theme-dark .card-body input.form-control:focus,
body.theme-dark .card-body input.form-control:focus,
html.theme-dark .card-body select.form-select:focus,
body.theme-dark .card-body select.form-select:focus,
html.theme-dark .card-body textarea.form-control:focus,
body.theme-dark .card-body textarea.form-control:focus,
html.theme-dark .form-group input:focus,
body.theme-dark .form-group input:focus,
html.theme-dark .form-group select:focus,
body.theme-dark .form-group select:focus,
html.theme-dark .form-group textarea:focus,
body.theme-dark .form-group textarea:focus {
  background-color: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28), inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  outline: none !important;
}

/* Light Theme Form Controls */
html.theme-light .card-body input.form-control,
body.theme-light .card-body input.form-control,
html.theme-light .card-body select.form-select,
body.theme-light .card-body select.form-select,
html.theme-light .card-body textarea.form-control,
body.theme-light .card-body textarea.form-control,
html.theme-light .form-group input,
body.theme-light .form-group input,
html.theme-light .form-group select,
body.theme-light .form-group select,
html.theme-light .form-group textarea,
body.theme-light .form-group textarea {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .card-body input.form-control:focus,
body.theme-light .card-body input.form-control:focus,
html.theme-light .card-body select.form-select:focus,
body.theme-light .card-body select.form-select:focus,
html.theme-light .card-body textarea.form-control:focus,
body.theme-light .card-body textarea.form-control:focus,
html.theme-light .form-group input:focus,
body.theme-light .form-group input:focus,
html.theme-light .form-group select:focus,
body.theme-light .form-group select:focus,
html.theme-light .form-group textarea:focus,
body.theme-light .form-group textarea:focus {
  background-color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
  outline: none !important;
}

/* Crisp Form Labels */
.card-body .form-group label,
.card-body .form-group small,
.card-body form label,
.card-body form small,
.card-body .mb-3 label,
.card-body .mb-3 small {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

html.theme-dark .card-body .form-group label,
html.theme-dark .card-body .form-group small,
html.theme-dark .card-body form label,
html.theme-dark .card-body form small,
body.theme-dark .card-body .form-group label,
body.theme-dark .card-body .form-group small,
body.theme-dark .card-body form label,
body.theme-dark .card-body form small {
  color: #94a3b8 !important;
}

html.theme-light .card-body .form-group label,
html.theme-light .card-body .form-group small,
html.theme-light .card-body form label,
html.theme-light .card-body form small,
body.theme-light .card-body .form-group label,
body.theme-light .card-body .form-group small,
body.theme-light .card-body form label,
body.theme-light .card-body form small {
  color: #475569 !important;
}

/* Dedicated Action Buttons Row Underneath Inputs */
.khabeo-actions-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
  width: 100% !important;
  clear: both !important;
}

.khabeo-actions-row button {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.18s ease !important;
}

.khabeo-inline-rand-btn {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fde047 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.khabeo-inline-rand-btn:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.khabeo-inline-lookup-btn {
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.khabeo-inline-lookup-btn:hover {
  background: rgba(59, 130, 246, 0.28) !important;
  border-color: rgba(59, 130, 246, 0.75) !important;
  color: #93c5fd !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   OUTPUT BILL PREVIEW DESIGN & FIDELITY ENHANCEMENTS (ALL BANKS)
   ========================================================================== */
.card:has(.bill),
.card:has([ref="billRef"]),
.col-md-6:has(.bill),
.col-lg-6:has(.bill) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Premium Flagship Device Border & Shadow on Output Bills */
.bill,
[ref="billRef"] {
  border-radius: 24px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Text Wrapping & Preservation inside Bills */
.bill p,
.bill span,
.bill div,
.bill td,
.bill th,
[ref="billRef"] p,
[ref="billRef"] span,
[ref="billRef"] div,
[ref="billRef"] td,
[ref="billRef"] th {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Clean scrollbar for bill card containers */
.card-body:has(.bill) {
  overflow-x: auto !important;
  padding: 20px !important;
}

/* ==========================================================================
   TASK 1: HIDE SỔ STK BUTTON FROM REGULAR USERS (ADMIN ONLY)
   ========================================================================== */
.khabeo-inline-saved-btn,
button.khabeo-admin-only {
  display: none !important;
}
body.is-admin .khabeo-inline-saved-btn,
body.is-admin button.khabeo-admin-only {
  display: inline-flex !important;
}

/* ==========================================================================
   TASK 2: MẪU BILL SEGMENTED PILL BUTTONS (ALL MULTI-TEMPLATE BANKS)
   ========================================================================== */
.form-group:has(input[name="bill-template"]) .d-flex.flex-wrap,
.d-flex:has(> .form-check > input[name="bill-template"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 8px !important;
}

.form-check.khabeo-template-pill,
.form-check:has(input[name="bill-template"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(30, 41, 59, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.form-check.khabeo-template-pill:hover,
.form-check:has(input[name="bill-template"]):hover {
  background: rgba(51, 65, 85, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px) !important;
}

.form-check.khabeo-template-pill.khabeo-pill-active,
.form-check:has(input[name="bill-template"]:checked) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

.form-check.khabeo-template-pill input[type="radio"],
.form-check:has(input[name="bill-template"]) input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.form-check.khabeo-template-pill label.form-check-label,
.form-check:has(input[name="bill-template"]) label.form-check-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  margin: 0 !important;
  user-select: none !important;
  transition: color 0.2s ease !important;
}

.form-check.khabeo-template-pill.khabeo-pill-active label.form-check-label,
.form-check:has(input[name="bill-template"]:checked) label.form-check-label {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   TASK 3: UNIVERSAL DARK TEXT CONTRAST FOR WITHDRAWAL PREVIEWS & HISTORY
   ========================================================================== */
[class*="style_txRowIos"],
[class*="style_withdrawalStatusBlock"],
[class*="txRow"],
.style_totalIos,
.style_totalIosSafari,
[class*="totalIos"],
[class*="withdrawalSlip"],
[class*="withdrawalCard"],
[class*="withdrawalReceipt"],
.withdrawal-preview-card,
.withdrawal-history-table {
  color: #0f172a !important;
}

/* Ensure bill preview phone card text is NEVER overridden by global html.theme-dark */
.bill,
[ref="billRef"],
[class*="billRef"],
[class*="withdrawal"] .card-body [style*="background-color: #fff"],
[class*="withdrawal"] .card-body [style*="backgroundColor: '#fff'"] {
  color: #0f172a !important;
}

/* ==========================================================================
   TASK 4: PHONE CONFIGURATION CONTROLS PRECISION LAYOUT
   ========================================================================== */
#template-mode-select,
#dynamic-island-select,
#safari-mode-select,
select#template-mode-select,
select#dynamic-island-select,
select#safari-mode-select {
  min-width: 140px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 6px 12px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1.5px solid #334155 !important;
}

div:has(> #template-mode-select),
div:has(> #dynamic-island-select),
div:has(> #safari-mode-select) {
  min-width: 140px !important;
  flex: 1 1 auto !important;
}

/* SIM number inputs */
input[name="2sim-number-1"],
input[name="2sim-number-2"] {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  display: inline-block !important;
  text-align: center !important;
  padding: 4px 6px !important;
  height: 34px !important;
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1.5px solid #334155 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* Phone type radios & status container wrapping */
.card-body .d-flex.justify-content-center.align-items-center.gap-3.mb-3.flex-wrap.py-3 {
  gap: 12px !important;
  row-gap: 14px !important;
  justify-content: flex-start !important;
}

/* ==========================================================================
   TASK 5: ADMIN SIDEBAR & MENU STYLING
   ========================================================================== */
.sidebar-sticky-wrapper a[href="/admin/user-management"].active,
.sidebar-sticky-wrapper a[href="/admin/role-management"].active {
  background: rgba(37, 99, 235, 0.15) !important;
  border-left: 3px solid #3b82f6 !important;
  color: #60a5fa !important;
}

.khabeo-admin-logo-enhanced img {
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.45));
  transition: transform 0.25s ease;
}
.khabeo-admin-logo-enhanced img:hover {
  transform: scale(1.04);
}

.table-responsive {
  overflow-x: auto !important;
}

/* ==========================================================================
   TASK 10: LOGIN & REGISTER THEME IMMUNITY & MASTER FINTECH BACKGROUND
   Enforces Pure Dark Luxury Aesthetics (#060913) & 100% Theme Switch Immunity
   ========================================================================== */

/* Universal Background & Viewport Override (Light & Dark Theme Resistant) */
html .auth-saas-viewport,
html.theme-light .auth-saas-viewport,
html.theme-dark .auth-saas-viewport,
body.theme-light .auth-saas-viewport,
body.theme-dark .auth-saas-viewport,
div.auth-saas-viewport {
  position: relative !important;
  min-height: 100vh !important;
  width: 100% !important;
  background-color: #060913 !important;
  background-image: 
    radial-gradient(circle at 50% 15%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(6, 9, 19, 0.45) 0%, rgba(6, 9, 19, 0.72) 100%),
    url('../media/auth_fintech_master_bg.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 16px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  color: #ffffff !important;
}

/* Auth Card Glassmorphism Frame */
html .saas-auth-card,
html.theme-light .saas-auth-card,
html.theme-dark .saas-auth-card,
body.theme-light .saas-auth-card,
body.theme-dark .saas-auth-card,
.saas-auth-card {
  position: relative !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.85), 0 0 50px rgba(16, 185, 129, 0.12), 0 0 40px rgba(245, 158, 11, 0.1) !important;
  overflow: hidden !important;
}

/* Left/Right Form Panes */
html .saas-form-pane,
html.theme-light .saas-form-pane,
html.theme-dark .saas-form-pane,
body.theme-light .saas-form-pane,
body.theme-dark .saas-form-pane,
.saas-form-pane {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #ffffff !important;
}

/* High-Contrast Headings Inside Auth Card */
html .saas-auth-card h1,
html.theme-light .saas-auth-card h1,
html.theme-dark .saas-auth-card h1,
body.theme-light .saas-auth-card h1,
body.theme-dark .saas-auth-card h1,
html .saas-auth-card h2,
html.theme-light .saas-auth-card h2,
html.theme-dark .saas-auth-card h2,
body.theme-light .saas-auth-card h2,
body.theme-dark .saas-auth-card h2,
html .saas-auth-card h3,
html.theme-light .saas-auth-card h3,
html.theme-dark .saas-auth-card h3,
body.theme-light .saas-auth-card h3,
body.theme-dark .saas-auth-card h3,
.saas-form-pane h2,
.saas-overlay-panel h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8) !important;
}

/* Subtitle and Descriptions */
html .saas-auth-card p,
html.theme-light .saas-auth-card p,
html.theme-dark .saas-auth-card p,
body.theme-light .saas-auth-card p,
body.theme-dark .saas-auth-card p,
.saas-form-pane p,
.saas-overlay-panel p {
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Form Labels */
html .saas-auth-card label,
html.theme-light .saas-auth-card label,
html.theme-dark .saas-auth-card label,
body.theme-light .saas-auth-card label,
body.theme-dark .saas-auth-card label,
.saas-form-pane .saas-label {
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Input Fields */
html .saas-auth-card input,
html.theme-light .saas-auth-card input,
html.theme-dark .saas-auth-card input,
body.theme-light .saas-auth-card input,
body.theme-dark .saas-auth-card input,
.saas-form-pane .saas-input,
.saas-input-wrapper .saas-input,
.saas-form-pane input[type="text"],
.saas-form-pane input[type="password"] {
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #ffffff !important;
  border: 1.5px solid #334155 !important;
  border-radius: 10px !important;
  padding: 10px 14px 10px 42px !important;
  box-sizing: border-box !important;
  height: 44px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

html .saas-auth-card input::placeholder,
html.theme-light .saas-auth-card input::placeholder,
body.theme-light .saas-auth-card input::placeholder,
.saas-form-pane .saas-input::placeholder {
  color: #64748b !important;
}

html .saas-auth-card input:focus,
html.theme-light .saas-auth-card input:focus,
body.theme-light .saas-auth-card input:focus,
.saas-form-pane .saas-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* Sliding Overlay Right Pane */
html .saas-overlay-panel,
html.theme-light .saas-overlay-panel,
html.theme-dark .saas-overlay-panel,
body.theme-light .saas-overlay-panel,
body.theme-dark .saas-overlay-panel,
.saas-overlay-panel {
  background: linear-gradient(150deg, rgba(30, 27, 75, 0.96) 0%, rgba(15, 23, 42, 0.96) 55%, rgba(30, 41, 59, 0.96) 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

html .saas-overlay-panel .saas-badge,
html.theme-light .saas-overlay-panel .saas-badge,
.saas-overlay-panel .saas-badge {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

/* Primary Action Buttons */
html .saas-auth-card .saas-btn-primary,
html.theme-light .saas-auth-card .saas-btn-primary,
body.theme-light .saas-auth-card .saas-btn-primary,
.saas-btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 1px solid #fbbf24 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Secondary Ghost Switch Buttons */
html .saas-auth-card .saas-btn-ghost,
html.theme-light .saas-auth-card .saas-btn-ghost,
body.theme-light .saas-auth-card .saas-btn-ghost,
.saas-btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 600 !important;
}

/* Social Buttons */
html .saas-auth-card .saas-social-btn,
html.theme-light .saas-auth-card .saas-social-btn,
body.theme-light .saas-auth-card .saas-social-btn,
.saas-social-btn {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

/* Interactive Links & Terms */
html .saas-auth-card a,
html.theme-light .saas-auth-card a,
body.theme-light .saas-auth-card a,
.saas-auth-card a {
  color: #38bdf8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html .saas-auth-card a:hover,
html.theme-light .saas-auth-card a:hover,
body.theme-light .saas-auth-card a:hover,
.saas-auth-card a:hover {
  color: #60a5fa !important;
  text-decoration: underline !important;
}

/* Responsive Floating Game Partner Badges Strip */
.khabeo-auth-partner-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
  padding: 12px 24px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
  max-width: 960px !important;
  width: 90% !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
}

.khabeo-auth-partner-strip .partner-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 4px 14px !important;
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.khabeo-auth-partner-strip .partner-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2) !important;
}

.khabeo-auth-partner-strip .partner-item img {
  max-height: 26px !important;
  max-width: 90px !important;
  object-fit: contain !important;
}

.khabeo-auth-partner-strip .partner-label {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

@media (max-width: 991px) {
  #khabeo-auth-partner-strip,
  .khabeo-auth-partner-strip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
}

/* Segmented Tabs Switcher (Đăng Nhập | Đăng Ký) */
.saas-tab-switcher {
  display: flex !important;
  background: rgba(15, 23, 42, 0.85) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin-bottom: 16px !important;
  gap: 4px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.saas-tab-btn {
  flex: 1 !important;
  padding: 9px 12px !important;
  border: none !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  background: transparent !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.saas-tab-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.saas-tab-btn.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}

/* Telegram 24/7 Compact Support Pill */
.saas-telegram-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin-top: 14px !important;
  background: rgba(0, 136, 204, 0.12) !important;
  border: 1px solid rgba(0, 136, 204, 0.35) !important;
  border-radius: 9999px !important;
  color: #38bdf8 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.saas-telegram-pill:hover {
  background: rgba(0, 136, 204, 0.24) !important;
  color: #7dd3fc !important;
  transform: translateY(-1px) !important;
}

/* Refined Neon Glow behind 3D Logo */
.saas-brand-logo-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  position: relative !important;
}

.saas-brand-logo-glow {
  position: absolute !important;
  width: 140px !important;
  height: 40px !important;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(16, 185, 129, 0.15) 50%, transparent 75%) !important;
  filter: blur(18px) !important;
  pointer-events: none !important;
}

.saas-3d-logo-img {
  max-height: 44px !important;
  width: auto !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
}

/* Register Row & Inputs Mobile Compaction */
.saas-register-pane .row.g-2 {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-right: -4px !important;
  margin-left: -4px !important;
}

html body .saas-register-pane .col-6,
html body .saas-register-pane .row.g-2 > .col-6,
.saas-register-pane .row.g-2 > .col-6,
.saas-register-pane .col-6 {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  padding-right: 4px !important;
  padding-left: 4px !important;
  box-sizing: border-box !important;
}

/* Mobile Viewport & Natural Scroll Override */
@media (max-width: 991px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #root,
  .style_login__v2KKb,
  html .auth-saas-viewport,
  body .auth-saas-viewport,
  div.auth-saas-viewport,
  .auth-saas-viewport {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding: 8px 10px 40px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  html .saas-auth-card,
  html.theme-light .saas-auth-card,
  html.theme-dark .saas-auth-card,
  body.theme-light .saas-auth-card,
  body.theme-dark .saas-auth-card,
  div.saas-auth-card,
  .saas-auth-card {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 8px auto 30px auto !important;
    border-radius: 20px !important;
    overflow: visible !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(59, 130, 246, 0.12) !important;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html .saas-form-pane,
  html.theme-light .saas-form-pane,
  html.theme-dark .saas-form-pane,
  body.theme-light .saas-form-pane,
  body.theme-dark .saas-form-pane,
  div.saas-form-pane,
  .saas-form-pane {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 16px 14px 18px 14px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
  }

  .saas-brand-logo-container {
    margin-bottom: 4px !important;
  }

  .saas-3d-logo-img {
    max-height: 34px !important;
  }

  .saas-form-pane h2 {
    font-size: 17px !important;
    margin-bottom: 2px !important;
  }

  .saas-form-pane p {
    font-size: 11.5px !important;
    margin-bottom: 10px !important;
  }

  .saas-tab-switcher {
    margin-bottom: 10px !important;
    padding: 3px !important;
  }

  .saas-tab-btn {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  .saas-input-group {
    margin-bottom: 8px !important;
  }

  .saas-form-pane .saas-label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }

  .saas-form-pane .saas-input,
  .saas-input-wrapper .saas-input {
    height: 36px !important;
    font-size: 13px !important;
    padding: 5px 8px 5px 34px !important;
    border-radius: 8px !important;
  }

  .saas-btn-primary {
    height: 38px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    margin-top: 6px !important;
  }

  .saas-telegram-pill {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    margin-top: 8px !important;
  }

  .saas-overlay-panel {
    display: none !important;
  }

  .saas-auth-card.mode-login .saas-register-pane {
    display: none !important;
  }

  .saas-auth-card.mode-register .saas-login-pane {
    display: none !important;
  }

  /* Kill Yellow Scrollbar on Mobile */
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  * {
    scrollbar-width: none !important;
  }
}

/* ==========================================================================
   TASK 6: TOP RUNNING MARQUEE ANNOUNCEMENT BAR
   ========================================================================== */
.khabeo-global-ticker-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  min-height: 38px;
  background: linear-gradient(90deg, #090d16 0%, #0f172a 50%, #090d16 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  padding: 0 16px;
  overflow: hidden;
  position: relative;
  z-index: 9999;
  font-family: inherit;
}

.khabeo-global-ticker-bar .ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.khabeo-global-ticker-bar .ticker-pulse {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 8px #ef4444;
  animation: khabeoPulse 1.4s infinite ease-in-out;
}

@keyframes khabeoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.khabeo-global-ticker-bar .ticker-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

.khabeo-global-ticker-bar .ticker-content {
  display: inline-block;
  padding-left: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  animation: khabeoMarquee linear infinite;
}

.khabeo-global-ticker-bar .ticker-content:hover {
  animation-play-state: paused;
}

.khabeo-global-ticker-bar .ticker-content.speed-slow {
  animation-duration: 38s;
}

.khabeo-global-ticker-bar .ticker-content.speed-medium {
  animation-duration: 24s;
}

.khabeo-global-ticker-bar .ticker-content.speed-fast {
  animation-duration: 15s;
}

@keyframes khabeoMarquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

.khabeo-global-ticker-bar .ticker-edit-btn,
#btn-edit-global-ticker,
button.ticker-edit-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}


.sidebar-sticky-wrapper .khabeo-admin-top-brand,
.col-2 .khabeo-admin-top-brand,
div.khabeo-admin-top-brand {
  display: block !important;
  margin-bottom: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-align: center !important;
}

div.khabeo-admin-top-brand img {
  display: block !important;
  margin: 0 auto !important;
  max-height: 48px !important;
  max-width: 90% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.5)) !important;
}

/* ==========================================================================
   TASK 11: REVOLUTIONARY MOBILE & TABLET RESPONSIVE FINTECH ARCHITECTURE
   ========================================================================== */

/* 1. Backdrop Overlay */
#khabeo-mobile-sidebar-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  z-index: 99990 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.28s ease !important;
}

body.mobile-sidebar-open #khabeo-mobile-sidebar-backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.mobile-sidebar-open {
  overflow: hidden !important;
}

body.mobile-sidebar-open #root {
  position: relative !important;
  z-index: 100000 !important;
}

/* 2. Hamburger Button in Header */
.khabeo-mobile-hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  cursor: pointer;
  margin-right: 8px;
  flex-shrink: 0;
  color: #f8fafc;
  transition: all 0.2s ease;
}

.khabeo-mobile-hamburger-btn svg {
  stroke: #f8fafc;
}

.khabeo-mobile-hamburger-btn:active,
.khabeo-mobile-hamburger-btn.is-active {
  transform: scale(0.92);
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

/* 3. Drawer Header & Close Button inside Sidebar */
.khabeo-mobile-drawer-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-header-brand .drawer-brand-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 10px;
  border-radius: 9999px;
}

.khabeo-mobile-sidebar-close-btn {
  display: none;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
}

.khabeo-mobile-sidebar-close-btn:hover,
.khabeo-mobile-sidebar-close-btn:active {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #ff6b6b;
}

/* 4. Bottom Navigation Dock Bar */
.khabeo-mobile-bottom-dock {
  display: none;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  background: rgba(11, 15, 25, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  z-index: 99990 !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 0 4px !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
}

.khabeo-mobile-bottom-dock .dock-item,
.khabeo-mobile-bottom-dock .khabeo-dock-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 20% !important;
  height: 100% !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
  padding: 4px 2px !important;
  box-sizing: border-box !important;
}

.khabeo-mobile-bottom-dock .dock-item svg,
.khabeo-mobile-bottom-dock .khabeo-dock-item svg {
  stroke: #94a3b8;
  transition: stroke 0.18s ease;
}

.khabeo-mobile-bottom-dock .dock-item:hover,
.khabeo-mobile-bottom-dock .khabeo-dock-item:hover,
.khabeo-mobile-bottom-dock .dock-item:focus,
.khabeo-mobile-bottom-dock .khabeo-dock-item:focus {
  background: transparent !important;
  color: #38bdf8 !important;
}

.khabeo-mobile-bottom-dock .dock-item.active,
.khabeo-mobile-bottom-dock .khabeo-dock-item.active {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

.khabeo-mobile-bottom-dock .dock-item.active svg,
.khabeo-mobile-bottom-dock .khabeo-dock-item.active svg {
  stroke: #38bdf8 !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7)) !important;
}

.khabeo-mobile-bottom-dock .dock-item:active,
.khabeo-mobile-bottom-dock .khabeo-dock-item:active {
  transform: scale(0.92) !important;
}

/* Light Mode Overrides for Dock & Drawer */
html.theme-light .khabeo-mobile-bottom-dock,
body.theme-light .khabeo-mobile-bottom-dock {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top-color: #e2e8f0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .khabeo-mobile-bottom-dock .dock-item,
html.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item,
body.theme-light .khabeo-mobile-bottom-dock .dock-item,
body.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item {
  color: #64748b !important;
}

html.theme-light .khabeo-mobile-bottom-dock .dock-item svg,
html.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item svg,
body.theme-light .khabeo-mobile-bottom-dock .dock-item svg,
body.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item svg {
  stroke: #64748b;
}

html.theme-light .khabeo-mobile-bottom-dock .dock-item.active,
html.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item.active,
body.theme-light .khabeo-mobile-bottom-dock .dock-item.active,
body.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item.active {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.1) !important;
}

html.theme-light .khabeo-mobile-bottom-dock .dock-item.active svg,
html.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item.active svg,
body.theme-light .khabeo-mobile-bottom-dock .dock-item.active svg,
body.theme-light .khabeo-mobile-bottom-dock .khabeo-dock-item.active svg {
  stroke: #0284c7 !important;
}

/* 5. Comprehensive Mobile Breakpoint (< 992px) */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  #root,
  .d-flex.bg-body {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* Slide-out Offcanvas Sidebar Drawer */
  .col-2.h-100.px-3.pb-3,
  .sidebar-sticky-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 295px !important;
    min-width: 275px !important;
    max-width: 86vw !important;
    flex: 0 0 295px !important;
    z-index: 100050 !important;
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #0b1120 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 12px 14px 110px 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html.theme-light .col-2.h-100.px-3.pb-3,
  body.theme-light .col-2.h-100.px-3.pb-3,
  html.theme-light .sidebar-sticky-wrapper,
  body.theme-light .sidebar-sticky-wrapper {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
  }

  body.mobile-sidebar-open .col-2.h-100.px-3.pb-3,
  body.mobile-sidebar-open .sidebar-sticky-wrapper {
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.95) !important;
  }

  /* Main Content Area Takes 100% Full Viewport Width */
  .col-10.h-100,
  .sidebar-content-area {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  .style_rightSide__dVW0T,
  .p-3.style_rightSide__dVW0T {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 10px 85px 10px !important; /* Spacing for bottom dock */
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    height: calc(100vh - 54px) !important;
    max-height: calc(100vh - 54px) !important;
  }

  /* Top Header Bar */
  .topbar-header-enhanced,
  .w-100.d-flex.justify-content-between.align-items-center.py-3.pe-4 {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    padding: 0 10px !important;
  }

  .header-brand-wrap {
    padding-left: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .khabeo-dynamic-header-title-box {
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .khabeo-header-title-text {
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
  }

  .khabeo-mobile-hamburger-btn {
    display: inline-flex !important;
  }

  .khabeo-mobile-drawer-header {
    display: flex !important;
  }

  .khabeo-mobile-sidebar-close-btn {
    display: inline-flex !important;
  }

  /* Quick QR & Random Toolbar Responsive Grid on Mobile */
  #khabeo-bank-toolbar,
  #khabeo-qr-toolbar,
  .khabeo-qr-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
  }

  #khabeo-bank-toolbar > button,
  #khabeo-qr-toolbar > button,
  #khabeo-qr-toolbar > label,
  #khabeo-qr-toolbar > a,
  .khabeo-qr-toolbar > button,
  .khabeo-qr-toolbar > label,
  .khabeo-qr-toolbar > a {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 7px 4px !important;
    margin: 0 !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  #khabeo-bank-toolbar > button svg,
  #khabeo-qr-toolbar > button svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  #khabeo-bank-toolbar > button span,
  #khabeo-qr-toolbar > button span {
    font-size: 11px !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .khabeo-mobile-bottom-dock {
    display: flex !important;
  }

  /* Compact Header Action Pills */
  .khabeo-btn-support-pill span {
    display: none !important;
  }
  .khabeo-btn-support-pill {
    padding: 6px 9px !important;
    gap: 0 !important;
  }

  .khabeo-btn-theme-quick-toggle .theme-name-indicator {
    display: none !important;
  }
  .khabeo-btn-theme-quick-toggle {
    padding: 6px 9px !important;
    gap: 0 !important;
  }

  .khabeo-chip-text-wrap {
    display: none !important;
  }
  .khabeo-chip-chevron {
    display: none !important;
  }
  .khabeo-user-chip-pro {
    padding: 3px !important;
    background: transparent !important;
    border: none !important;
  }

  /* Landing Page Services Mobile Grid */
  .khabeo-lp-wrapper {
    padding: 10px 4px 20px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .khabeo-lp-header-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .khabeo-lp-tabs {
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .khabeo-lp-tabs button,
  .khabeo-lp-tabs a {
    flex: 1 1 50% !important;
    padding: 10px 6px !important;
    font-size: 12.5px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .khabeo-lp-hero-banner {
    padding: 16px 12px !important;
    border-radius: 14px !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .khabeo-lp-hero-title {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }
  .khabeo-lp-hero-desc {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  .khabeo-lp-benefits-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }
  .khabeo-lp-benefit-card {
    padding: 8px 8px !important;
  }
  .khabeo-lp-benefit-card strong {
    font-size: 11.5px !important;
  }
  .khabeo-lp-benefit-card span {
    font-size: 10px !important;
  }

  .khabeo-lp-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .khabeo-lp-top-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .khabeo-lp-mode-pills {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .khabeo-lp-mode-btn {
    flex: 1 1 50% !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    text-align: center !important;
  }

  .khabeo-lp-order-custom-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  .khabeo-lp-badge-client-indicator {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  /* Forms & Cards Mobile Polish */
  .card {
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
  .card-body {
    padding: 12px 10px !important;
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Prevent horizontal bleed and enhance touch usability */
  .sidebar-content-area,
  .col-10.h-100 {
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: hidden !important;
  }

  .style_rightSide__dVW0T {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 85px !important;
    overflow-x: hidden !important;
  }

  /* Bank Transfers Two-Column to Single-Column Responsive Stacking on Mobile */
  .style_rightSide__dVW0T > .d-flex.gap-4,
  .style_rightSide__dVW0T > .d-flex.gap-3,
  .style_rightSide__dVW0T > .d-flex {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  .style_rightSide__dVW0T > .d-flex.gap-4 > div,
  .style_rightSide__dVW0T > .d-flex.gap-3 > div,
  .style_rightSide__dVW0T > .d-flex > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .style_rightSide__dVW0T .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .style_rightSide__dVW0T .card-header,
  .style_rightSide__dVW0T .card-body {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Form controls and inputs fit comfortably within mobile card */
  .style_rightSide__dVW0T form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .style_rightSide__dVW0T .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .style_rightSide__dVW0T .col-12,
  .style_rightSide__dVW0T .form-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ==========================================================================
     MOBILE BILL EDITOR: SEGMENTED TABS, FULL PREVIEW & COMPACT CARDS
     ========================================================================== */
  .khabeo-mobile-editor-tabs {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  }

  html.theme-light .khabeo-mobile-editor-tabs,
  body.theme-light .khabeo-mobile-editor-tabs {
    background: rgba(241, 245, 249, 0.95) !important;
    border-color: #cbd5e1 !important;
  }

  .khabeo-editor-tab-btn {
    flex: 1 1 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    touch-action: manipulation !important;
  }

  .khabeo-editor-tab-btn.active {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
  }

  .khabeo-editor-tab-btn .khabeo-tab-badge {
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 1px 5px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
  }

  /* Floating Action Pill in form mode (Always accessible) */
  .khabeo-floating-view-bill {
    position: fixed !important;
    bottom: 74px !important;
    right: 14px !important;
    z-index: 99995 !important;
    display: flex !important;
  }

  .khabeo-btn-floating-preview {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.5), 0 0 12px rgba(56, 189, 248, 0.3) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: transform 0.15s ease !important;
  }

  .khabeo-btn-floating-preview:active {
    transform: scale(0.95) !important;
  }

  .preview-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #22c55e !important;
  }

  /* Preview Top Action Toolbar */
  .khabeo-preview-top-toolbar {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  .khabeo-btn-back-form {
    flex: 1 !important;
    padding: 9px 12px !important;
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
  }

  .khabeo-btn-quick-download {
    flex: 1.2 !important;
    padding: 9px 12px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid #34d399 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
    cursor: pointer !important;
  }

  /* Bill Phone Preview: 100% Full Height & Zero Clipping */
  .khabeo-bill-mobile-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: visible !important;
    margin: 0 auto 130px auto !important; /* 130px safe space above bottom dock */
    box-sizing: border-box !important;
  }

  .bill {
    width: 591px !important;
    min-width: 591px !important;
    max-width: 591px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    transform-origin: top center !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }

  /* Compact Form Cards on Mobile */
  .style_rightSide__dVW0T .card {
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0f172a !important;
  }

  html.theme-light .style_rightSide__dVW0T .card,
  body.theme-light .style_rightSide__dVW0T .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
  }

  .style_rightSide__dVW0T .card-header {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  .style_rightSide__dVW0T .card-body {
    padding: 10px 10px !important;
  }

  .style_rightSide__dVW0T .form-group,
  .style_rightSide__dVW0T .mb-3 {
    margin-bottom: 8px !important;
  }

  .style_rightSide__dVW0T label,
  .style_rightSide__dVW0T small {
    font-size: 11.5px !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
  }

  .style_rightSide__dVW0T .form-control,
  .style_rightSide__dVW0T .form-select {
    height: 38px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }

  .khabeo-actions-row {
    margin-top: 3px !important;
    margin-bottom: 2px !important;
    gap: 4px !important;
  }

  .khabeo-inline-rand-btn,
  .khabeo-inline-lookup-btn,
  .khabeo-inline-saved-btn {
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* ==========================================================================
     PHONE CONFIGURATION RESPONSIVE FIX (ZERO HORIZONTAL SPILL/OVERFLOW)
     ========================================================================== */
  .mt-3.px-3,
  .card-body .mt-3.px-3,
  .card-body .mt-3,
  .card-body .mt-4,
  .card-body .border-top {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .mt-3.px-3 .d-flex,
  .card-body .mt-3 .d-flex,
  .card-body .mt-4 .d-flex,
  .card-body .d-flex.justify-content-between,
  .card-body .d-flex:has(input[name="sim-number"]),
  .card-body .d-flex:has(input[name*="2sim-number"]),
  .card-body .d-flex:has(input[name="mang-number"]) {
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .card-body .mt-4 .ms-5,
  .card-body .d-flex .ms-5,
  .card-body .ms-5 {
    margin-left: 0 !important;
  }

  .card-body .mt-4 .ms-3,
  .card-body .d-flex:has(input[name="sim-number"]) .ms-3 {
    margin-left: 4px !important;
  }

  .card-body .d-flex:has(input[name="sim-number"]) .d-flex.align-items-center {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .card-body .d-flex:has(input[name="sim-number"]) img {
    max-width: 24px !important;
    height: auto !important;
    margin-left: 2px !important;
  }

  .card-body input[name="2sim-number-1"],
  .card-body input[name="2sim-number-2"] {
    width: 48px !important;
    max-width: 48px !important;
    min-width: 44px !important;
    margin-left: 4px !important;
    box-sizing: border-box !important;
  }

  .mt-3.px-3 .d-flex > div,
  .mt-3.px-3 .d-flex > .col-4 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mt-3.px-3 .d-flex > .col-4:has(input[type="range"]),
  .mt-3.px-3 input[type="range"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Ticker bar strictly confined within viewport */
  .khabeo-global-ticker-bar {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .ticker-track {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Drawer Menu & Accordions styling on mobile */
  .sidebar-sticky-wrapper .sidebar-brand-top-wrap,
  .col-2 .sidebar-brand-top-wrap {
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
    height: 70px !important;
    min-height: 70px !important;
  }

  .sidebar-sticky-wrapper .menu-links,
  .col-2 .menu-links {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    padding-bottom: 10px !important;
  }

  .sidebar-sticky-wrapper .accordion,
  .col-2 .accordion {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .sidebar-sticky-wrapper .accordion-item,
  .col-2 .accordion-item {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
  }

  .sidebar-sticky-wrapper .accordion-header,
  .col-2 .accordion-header {
    width: 100% !important;
  }

  .sidebar-sticky-wrapper .accordion-button,
  .col-2 .accordion-button {
    width: 100% !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    color: #f1f5f9 !important;
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .sidebar-sticky-wrapper .accordion-button:not(.collapsed),
  .col-2 .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(37, 99, 235, 0.25) 100%) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
  }

  .sidebar-sticky-wrapper .accordion-body,
  .col-2 .accordion-body {
    padding: 6px 4px 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: rgba(15, 23, 42, 0.5) !important;
    border-radius: 0 0 8px 8px !important;
  }

  .sidebar-sticky-wrapper .accordion-body a,
  .col-2 .accordion-body a {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  .sidebar-sticky-wrapper .accordion-body a:hover,
  .sidebar-sticky-wrapper .accordion-body a.active,
  .col-2 .accordion-body a:hover,
  .col-2 .accordion-body a.active {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
  }

  /* Sidebar Branding Card: Sits naturally at the bottom of the list, NEVER overlaps */
  #khabeo-sidebar-brand-card,
  .khabeo-sidebar-brand-card {
    position: static !important;
    margin-top: 20px !important;
    margin-bottom: 50px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   KHABEO V57 - COMPREHENSIVE MOBILE & PC FINTECH SUITE
   - Fix Terms Gate Modal Overflow on Mobile (100% Full View, Inner Scroll)
   - Mobile Dashboard 2-Column Grid (Zero stretched vertical stacking)
   - Mobile Sidebar Drawer Typography & Logo Visibility
   - Withdrawal Request & History Perfect Dark/Light Contrast
   - Mobile Long-Press Direct Image Save & PC Bill Preview Modal
   ========================================================================== */

/* 1. Terms Gate Modal: Zero Clipping on Any Screen Height */
.khabeo-terms-gate-overlay {
  align-items: flex-start !important;
  padding: 16px 10px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.khabeo-terms-gate-dialog {
  margin: auto !important;
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 768px) {
  .khabeo-terms-gate-dialog {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    max-width: 95vw !important;
  }
  .terms-gate-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  .terms-gate-sub {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }
  .terms-gate-alert-box {
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    max-height: 170px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .gate-alert-heading {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .gate-alert-content p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }
  .terms-gate-checkbox-wrap {
    padding: 10px !important;
    margin-bottom: 12px !important;
  }
  .custom-check-box-text {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  .btn-gate-confirm-action {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
  .btn-gate-redirect-landing {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
}

/* 2. Mobile Dashboard 2-Column Grid (Compact Fintech Cards, Zero Long Stretches) */
@media (max-width: 768px) {
  .khabeo-bank-css-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .khabeo-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .khabeo-bank-card-root {
    height: auto !important;
    min-height: 132px !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }
  .khabeo-card-header-row {
    margin-bottom: 8px !important;
  }
  .khabeo-card-logo-wrap {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
  .khabeo-card-logo-wrap img {
    max-height: 28px !important;
    max-width: 28px !important;
  }
  .khabeo-card-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }
  .khabeo-card-title {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }
  .khabeo-card-sub {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .khabeo-btn-create-bill {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }
}

/* 3. Mobile Sidebar Drawer Typography & Logo Clean-up */
@media (max-width: 992px) {
  .col-2.h-100.px-3.pb-3,
  .sidebar-sticky-wrapper {
    width: min(320px, 86vw) !important;
    min-width: 280px !important;
    max-width: 86vw !important;
    flex: 0 0 min(320px, 86vw) !important;
    padding: 12px 14px 110px 14px !important;
  }
  .sidebar-sticky-wrapper .menu-links a,
  .col-2 .menu-links a,
  .sidebar-sticky-wrapper .accordion-button,
  .col-2 .accordion-button {
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }
  .khabeo-mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .khabeo-mobile-drawer-header .drawer-header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .khabeo-mobile-drawer-header .drawer-header-brand img {
    height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* 4. High-Contrast Text Rules for Withdrawal Requests & History Tables */
html.theme-dark .card,
body.theme-dark .card {
  background-color: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}
html.theme-dark .card .card-header,
body.theme-dark .card .card-header {
  background-color: #1E293B !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}
html.theme-dark .card .card-body,
body.theme-dark .card .card-body {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
}
html.theme-dark .form-group small,
html.theme-dark .form-group label,
body.theme-dark .form-group small,
body.theme-dark .form-group label {
  color: #CBD5E1 !important;
}

html.theme-light .card,
body.theme-light .card {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
html.theme-light .card .card-header,
body.theme-light .card .card-header {
  background-color: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}
html.theme-light .card .card-body,
body.theme-light .card .card-body {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}
html.theme-light .form-group small,
html.theme-light .form-group label,
body.theme-light .form-group small,
body.theme-light .form-group label {
  color: #334155 !important;
}

/* Table High-Contrast Contrast Protection */
html.theme-dark table,
html.theme-dark .table,
body.theme-dark table,
body.theme-dark .table {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
}
html.theme-dark table thead th,
html.theme-dark .table thead th,
body.theme-dark table thead th,
body.theme-dark .table thead th {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
html.theme-dark table tbody td,
html.theme-dark .table tbody td,
html.theme-dark table tbody tr,
html.theme-dark .table tbody tr,
body.theme-dark table tbody td,
body.theme-dark .table tbody td,
body.theme-dark table tbody tr,
body.theme-dark .table tbody tr {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-light table,
html.theme-light .table,
body.theme-light table,
body.theme-light .table {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}
html.theme-light table thead th,
html.theme-light .table thead th,
body.theme-light table thead th,
body.theme-light .table thead th {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border-bottom-color: #CBD5E1 !important;
}
html.theme-light table tbody td,
html.theme-light .table tbody td,
html.theme-light table tbody tr,
html.theme-light .table tbody tr,
body.theme-light table tbody td,
body.theme-light .table tbody td,
body.theme-light table tbody tr,
body.theme-light .table tbody tr {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-bottom-color: #E2E8F0 !important;
}

/* 5. Mobile Long-Press Image Touch Callout Support */
#khabeo-preview-bill-img,
#khabeo-mobile-longpress-img,
.khabeo-rendered-bill-image {
  -webkit-touch-callout: default !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
  pointer-events: auto !important;
  touch-action: auto !important;
}

/* 6. Never Show Ticker Bar or Partner Strip on Login / Register */
.auth-saas-viewport ~ #khabeo-global-ticker-bar,
.auth-saas-viewport #khabeo-global-ticker-bar,
body:has(.auth-saas-viewport) #khabeo-global-ticker-bar,
body:has(.saas-auth-card) #khabeo-global-ticker-bar,
body:has(#khabeo-auth-saas-container) #khabeo-global-ticker-bar {
  display: none !important;
}

@media (max-width: 768px) {
  #khabeo-auth-partner-strip,
  .khabeo-auth-partner-strip,
  .saas-partner-strip,
  .khabeo-breadcrumbs,
  .khabeo-crumb-active,
  .khabeo-crumb-sep,
  .khabeo-partners-section,
  .khabeo-stat-box:has(.khabeo-stat-lbl) {
    display: none !important;
    visibility: hidden !important;
  }
}

/* 7. Mobile Drawer Logo & Header Polishing */
.sidebar-brand-top-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  margin: 6px 0 10px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.sidebar-brand-logo-3d {
  max-width: 160px !important;
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.45)) !important;
}

.khabeo-mobile-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0f172a !important;
}

.khabeo-mobile-sidebar-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.khabeo-mobile-sidebar-close-btn:hover {
  background: rgba(239, 68, 68, 0.8) !important;
  border-color: #ef4444 !important;
}

/* 8. Bill interior contrast isolation */
.bill,
.bill *,
[ref="billRef"],
[ref="billRef"] * {
  text-shadow: none;
}

/* ========================================================
   BANKSIEUNHANH.LIVE - LARGE TRANSPARENT LOGO SUITE
   - Clean transparent background
   - Significantly enlarged logo sizing across all views
   ======================================================== */
.sidebar-brand-top-wrap {
  height: 90px !important;
  min-height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sidebar-brand-logo-3d,
img.sidebar-brand-logo-3d {
  max-width: 250px !important;
  max-height: 68px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 4px 16px rgba(0, 242, 254, 0.4)) !important;
}

/* Login Modal / Auth Screen Logo - Made significantly bigger */
.saas-brand-logo-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  min-height: 65px !important;
}

.saas-3d-logo-img,
img.saas-3d-logo-img,
.auth-brand-logo,
.saas-auth-card img[src*="logo"] {
  max-height: 65px !important;
  height: 65px !important;
  max-width: 320px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 20px rgba(0, 242, 254, 0.5)) !important;
}

/* Header Brand Logo (Desktop & Mobile) */
.khabeo-header-logo-brand img,
#khabeo-header-logo-brand img,
.header-brand-logo {
  height: 44px !important;
  max-height: 48px !important;
  max-width: 260px !important;
  object-fit: contain !important;
}

/* Mobile Sidebar Drawer Logo */
.khabeo-mobile-drawer-header .drawer-header-brand img,
.drawer-header-brand img {
  height: 45px !important;
  max-height: 48px !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

/* Admin Sidebar Top Brand */
div.khabeo-admin-top-brand img,
.khabeo-admin-logo-enhanced img {
  max-height: 62px !important;
  max-width: 240px !important;
  object-fit: contain !important;
}