@charset "UTF-8";

/**
 * CSV Studio — Theme System (Dark / Light)
 * Strict adherence to design.MD color tokens:
 * Brand Orange: #f97316 (CTA / Primary Accent / Real Estate)
 * Brand Teal:   #06b6d4 (TikTok / Short-form / Secondary Accent)
 * Default Theme: LIGHT (per user preference)
 * Light Theme:   Slate-50 (#f8fafc) / White (#ffffff) / Slate-200 (#e2e8f0)
 * Dark Theme:    #0b0f19 / #131926 / #1e293b
 *
 * NOTE: Hero video background remains cinematic dark to prevent glare!
 */

/* ----------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ---------------------------------------------------- */
:root,
[data-theme="light"],
html.theme-light,
body.theme-light {
  color-scheme: light;

  /* Brand Tokens (from design.MD) */
  --brand-orange: #f97316;
  --brand-teal: #06b6d4;

  /* Surfaces & Layout (Pure, clean, zero murky black tints) */
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-subtle: #f1f5f9;
  --bg-card-hover: #e2e8f0;
  --bg-header: rgba(255, 255, 255, 0.92);
  --bg-drawer: #ffffff;
  --bg-input: #ffffff;
  --bg-footer: #f1f5f9;

  /* Borders & Dividers */
  --border-color: #e2e8f0;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-highlight: rgba(249, 115, 22, 0.6);

  /* Typography / Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;

  /* Shadows (Soft ambient shadows for depth) */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-dropdown: 0 20px 40px -10px rgba(15, 23, 42, 0.12);

  /* Compatibility aliases for custom.css */
  --dark: var(--bg-page);
  --card: var(--bg-card);
  --border: var(--border-color);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --orange: var(--brand-orange);
  --teal: var(--brand-teal);
}

[data-theme="dark"],
html.theme-dark,
body.theme-dark {
  color-scheme: dark;

  /* Brand Tokens (from design.MD) */
  --brand-orange: #f97316;
  --brand-teal: #06b6d4;

  /* Surfaces & Layout */
  --bg-page: #0b0f19;
  --bg-card: #131926;
  --bg-card-subtle: #182030;
  --bg-card-hover: #1e293b;
  --bg-header: rgba(11, 15, 25, 0.85);
  --bg-drawer: #0b0f19;
  --bg-input: #0b0f19;
  --bg-footer: #070b12;

  /* Borders & Dividers */
  --border-color: #1e293b;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(249, 115, 22, 0.5);

  /* Typography / Text Colors */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-dropdown: 0 20px 40px rgba(0, 0, 0, 0.6);

  /* Compatibility aliases for custom.css */
  --dark: var(--bg-page);
  --card: var(--bg-card);
  --border: var(--border-color);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --orange: var(--brand-orange);
  --teal: var(--brand-teal);
}

/* Smooth theme transition */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}

/* ----------------------------------------------------
   View Transition & Circular Ripple Expansion Effect
   (Circular reveal outward from click point - like atvmedia.vn)
   ---------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 999999;
}

/* Fallback circular expanding ripple overlay */
.theme-ripple-overlay {
  position: fixed;
  z-index: 9999999;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  will-change: transform, opacity;
}

.theme-ripple-overlay.is-active {
  transform: translate(-50%, -50%) scale(1);
}

.theme-ripple-overlay.is-fading {
  opacity: 0;
}

/* ----------------------------------------------------
   2. Theme Toggle Buttons UI
   ---------------------------------------------------- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.theme-toggle-btn:hover {
  background: rgba(249, 115, 22, 0.08);
  border-color: #f97316;
  color: #ea580c;
  transform: translateY(-1px);
}

.theme-toggle-btn:active {
  transform: scale(0.96);
}

.theme-toggle-btn .theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon visibility: Default is Light */
.theme-toggle-btn .dark-icon {
  display: none;
}
.theme-toggle-btn .light-icon {
  display: inline-block;
  color: #f97316;
}

/* Dark mode toggle button state */
[data-theme="dark"] .theme-toggle-btn,
html.theme-dark .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  box-shadow: none;
}

[data-theme="dark"] .theme-toggle-btn:hover,
html.theme-dark .theme-toggle-btn:hover {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.4);
  color: #f97316;
}

[data-theme="dark"] .theme-toggle-btn .dark-icon,
html.theme-dark .theme-toggle-btn .dark-icon {
  display: inline-block;
  color: #fbbf24;
}
[data-theme="dark"] .theme-toggle-btn .light-icon,
html.theme-dark .theme-toggle-btn .light-icon {
  display: none;
}

/* Mobile Drawer Switch Item */
.mobile-theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-block: 0.75rem;
}

[data-theme="dark"] .mobile-theme-item,
html.theme-dark .mobile-theme-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: #1e293b;
}

.mobile-theme-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-theme-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  font-size: 13px;
}

/* Pill Toggle Switch */
.theme-switch-pill {
  width: 58px;
  height: 30px;
  border-radius: 999px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  padding: 2px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.25s ease;
  user-select: none;
}

.theme-switch-pill:hover {
  border-color: #f97316;
}

.theme-switch-pill .theme-switch-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f97316;
  font-size: 11px;
  transform: translateX(28px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.theme-switch-pill .dark-icon {
  display: none;
}
.theme-switch-pill .light-icon {
  display: inline-block;
}

[data-theme="dark"] .theme-switch-pill,
html.theme-dark .theme-switch-pill {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .theme-switch-pill .theme-switch-thumb,
html.theme-dark .theme-switch-pill .theme-switch-thumb {
  transform: translateX(0);
  background: #0b0f19;
  color: #fbbf24;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .theme-switch-pill .dark-icon,
html.theme-dark .theme-switch-pill .dark-icon {
  display: inline-block;
}
[data-theme="dark"] .theme-switch-pill .light-icon,
html.theme-dark .theme-switch-pill .light-icon {
  display: none;
}

/* ----------------------------------------------------
   3. HERO VIDEO PROTECTION (Cinematic Dark, Non-glare)
   ---------------------------------------------------- */
/* Video background & shade ALWAYS remain dark so video does NOT cause glare */
.home-hero-shade,
html.theme-light .home-hero-shade,
[data-theme="light"] .home-hero-shade {
  background: linear-gradient(90deg, rgba(7, 12, 22, 0.92), rgba(7, 12, 22, 0.66) 50%, rgba(7, 12, 22, 0.92)) !important;
}

/* All elements inside hero remain readable light over dark video */
.home-hero h1,
.home-hero .home-hero-copy h1,
html.theme-light .home-hero h1,
[data-theme="light"] .home-hero h1 {
  color: #ffffff !important;
}

.home-hero p,
.home-hero .home-hero-copy p,
html.theme-light .home-hero p,
[data-theme="light"] .home-hero p {
  color: #cbd5e1 !important;
}

.home-hero .home-hero-badge,
html.theme-light .home-hero .home-hero-badge,
[data-theme="light"] .home-hero .home-hero-badge {
  background: rgba(11, 15, 25, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Secondary CTA on Hero (transparent glass button over video) */
.home-hero a.bg-brand-cardBg,
html.theme-light .home-hero a.bg-brand-cardBg,
[data-theme="light"] .home-hero a.bg-brand-cardBg {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.home-hero a.bg-brand-cardBg:hover,
html.theme-light .home-hero a.bg-brand-cardBg:hover,
[data-theme="light"] .home-hero a.bg-brand-cardBg:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

/* ----------------------------------------------------
   4. LIGHT THEME OVERRIDES (Clean, Crisp, No Muddy Black)
   ---------------------------------------------------- */
[data-theme="light"] body,
html.theme-light body {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
}

/* Header & Navigation in Light Mode */
[data-theme="light"] header.fixed,
[data-theme="light"] .site-header,
html.theme-light header.fixed,
html.theme-light .site-header {
  background: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-color) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Brand Logo (design.MD rule: logo has dark background block to preserve contrast) */
[data-theme="light"] .csv-brand-logo,
[data-theme="light"] .site-header .brand img,
[data-theme="light"] .site-footer .brand img,
html.theme-light .csv-brand-logo,
html.theme-light .site-header .brand img,
html.theme-light .site-footer .brand img {
  background: #0b0f19 !important;
  padding: 3px !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .csv-brand-lockup span.text-white,
[data-theme="light"] .site-header .brand span,
[data-theme="light"] .site-footer .brand,
[data-theme="light"] .site-footer .brand span,
html.theme-light .csv-brand-lockup span.text-white,
html.theme-light .site-header .brand span,
html.theme-light .site-footer .brand,
html.theme-light .site-footer .brand span {
  color: #0f172a !important;
}

[data-theme="light"] .site-footer .brand:hover,
[data-theme="light"] .site-footer .brand:hover span,
html.theme-light .site-footer .brand:hover,
html.theme-light .site-footer .brand:hover span {
  color: var(--brand-orange) !important;
}

/* Nav Links in Light Mode */
[data-theme="light"] nav a.text-slate-200,
[data-theme="light"] nav a.text-slate-300,
[data-theme="light"] .primary-nav a,
html.theme-light nav a.text-slate-200,
html.theme-light nav a.text-slate-300,
html.theme-light .primary-nav a {
  color: #334155 !important;
}

[data-theme="light"] nav a:hover,
[data-theme="light"] nav button:hover,
[data-theme="light"] .primary-nav a:hover,
html.theme-light nav a:hover,
html.theme-light nav button:hover,
html.theme-light .primary-nav a:hover {
  color: #f97316 !important;
}

[data-theme="light"] .primary-nav a[aria-current="page"],
html.theme-light .primary-nav a[aria-current="page"] {
  color: #ea580c !important;
  border-color: #ea580c !important;
}

/* Dropdown Menu in Light Mode */
[data-theme="light"] .header-service-menu .header-service-dropdown,
[data-theme="light"] .header-service-menu > div.absolute,
[data-theme="light"] .site-header .group > div.absolute,
[data-theme="light"] .site-header .group .group-hover\:opacity-100,
html.theme-light .header-service-menu .header-service-dropdown,
html.theme-light .header-service-menu > div.absolute,
html.theme-light .site-header .group > div.absolute,
html.theme-light .site-header .group .group-hover\:opacity-100 {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .header-service-dropdown a,
[data-theme="light"] .site-header .group > div.absolute a,
html.theme-light .header-service-dropdown a,
html.theme-light .site-header .group > div.absolute a {
  color: #334155 !important;
}

[data-theme="light"] .header-service-dropdown a:hover,
[data-theme="light"] .site-header .group > div.absolute a:hover,
html.theme-light .header-service-dropdown a:hover,
html.theme-light .site-header .group > div.absolute a:hover {
  background: #f8fafc !important;
  color: #f97316 !important;
}

[data-theme="light"] .header-service-dropdown strong,
html.theme-light .header-service-dropdown strong {
  color: #0f172a !important;
}

/* Mobile Drawer in Light Mode */
[data-theme="light"] #mobile-drawer,
[data-theme="light"] .mobile-drawer-panel,
html.theme-light #mobile-drawer,
html.theme-light .mobile-drawer-panel {
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .mobile-drawer-header,
html.theme-light .mobile-drawer-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .mobile-drawer-header span,
html.theme-light .mobile-drawer-header span {
  color: #0f172a !important;
}

[data-theme="light"] .mobile-drawer-close,
html.theme-light .mobile-drawer-close {
  color: #64748b !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .mobile-nav-item,
html.theme-light .mobile-nav-item {
  color: #334155 !important;
}

[data-theme="light"] .mobile-nav-item:hover,
html.theme-light .mobile-nav-item:hover {
  background: #f8fafc !important;
  color: #f97316 !important;
}

[data-theme="light"] .mobile-nav-item.is-active,
html.theme-light .mobile-nav-item.is-active {
  background: rgba(249, 115, 22, 0.08) !important;
  color: #ea580c !important;
  border-color: transparent !important;
}

[data-theme="light"] .mobile-nav-icon-badge,
html.theme-light .mobile-nav-icon-badge {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .mobile-nav-item.is-active .mobile-nav-icon-badge,
html.theme-light .mobile-nav-item.is-active .mobile-nav-icon-badge {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #ea580c !important;
}

[data-theme="light"] .mobile-submenu,
html.theme-light .mobile-submenu {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .mobile-sub-link,
html.theme-light .mobile-sub-link {
  color: #475569 !important;
}

[data-theme="light"] .mobile-sub-link:hover,
html.theme-light .mobile-sub-link:hover {
  background: #ffffff !important;
  color: #f97316 !important;
}

[data-theme="light"] .mobile-drawer-footer,
html.theme-light .mobile-drawer-footer {
  border-top: 1px solid #e2e8f0 !important;
}

/* ----------------------------------------------------
   5. ELIMINATE ALL DARK / MUDDY REGIONS IN LIGHT MODE
   ---------------------------------------------------- */

/* Clean Alternating Section Backgrounds (Replaces murky dark opacities) */
[data-theme="light"] section.py-24,
html.theme-light section.py-24 {
  border-color: #e2e8f0 !important;
}

[data-theme="light"] section#services,
html.theme-light section#services {
  background-color: #ffffff !important;
}

[data-theme="light"] section.home-about,
[data-theme="light"] .home-about,
html.theme-light section.home-about,
html.theme-light .home-about {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] section#portfolio,
html.theme-light section#portfolio {
  background-color: #ffffff !important;
}

[data-theme="light"] section#pricing,
html.theme-light section#pricing {
  background-color: #f8fafc !important;
}

[data-theme="light"] section#news,
html.theme-light section#news {
  background-color: #ffffff !important;
}

[data-theme="light"] section#contact,
html.theme-light section#contact,
[data-theme="light"] .contact-page,
html.theme-light .contact-page,
[data-theme="light"] .contact-workspace,
html.theme-light .contact-workspace {
  background-color: #f8fafc !important;
}

[data-theme="light"] section#contact h2,
html.theme-light section#contact h2,
[data-theme="light"] .contact-story h1,
html.theme-light .contact-story h1 {
  color: #0f172a !important;
}

[data-theme="light"] section#contact p,
html.theme-light section#contact p,
[data-theme="light"] .contact-story p,
html.theme-light .contact-story p {
  color: #475569 !important;
}

/* Contact links in light mode */
[data-theme="light"] .contact-direct a,
html.theme-light .contact-direct a,
[data-theme="light"] .home-contact-link,
html.theme-light .home-contact-link,
[data-theme="light"] section#contact .home-contact-link,
html.theme-light section#contact .home-contact-link,
[data-theme="light"] section#contact a:not(.btn):not(.button),
html.theme-light section#contact a:not(.btn):not(.button),
[data-theme="light"] .contact-story a,
html.theme-light .contact-story a,
[data-theme="light"] section.contact a:not(.button),
html.theme-light section.contact a:not(.button),
[data-theme="light"] .contact-workspace a:not(.button),
html.theme-light .contact-workspace a:not(.button) {
  color: #0f172a !important;
}

[data-theme="light"] .contact-direct a:hover,
html.theme-light .contact-direct a:hover,
[data-theme="light"] .home-contact-link:hover,
html.theme-light .home-contact-link:hover,
[data-theme="light"] section#contact .home-contact-link:hover,
html.theme-light section#contact .home-contact-link:hover,
[data-theme="light"] section#contact a:not(.btn):not(.button):hover,
html.theme-light section#contact a:not(.btn):not(.button):hover,
[data-theme="light"] .contact-story a:hover,
html.theme-light .contact-story a:hover,
[data-theme="light"] section.contact a:not(.button):hover,
html.theme-light section.contact a:not(.button):hover,
[data-theme="light"] .contact-workspace a:not(.button):hover,
html.theme-light .contact-workspace a:not(.button):hover {
  color: var(--brand-orange) !important;
}

[data-theme="light"] .contact-direct span,
html.theme-light .contact-direct span {
  color: #64748b !important;
}

[data-theme="light"] .contact-form-card,
html.theme-light .contact-form-card,
[data-theme="light"] section#contact .bg-brand-cardBg,
html.theme-light section#contact .bg-brand-cardBg,
[data-theme="light"] .contact-form,
html.theme-light .contact-form {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .contact-form-heading,
html.theme-light .contact-form-heading {
  border-color: #f1f5f9 !important;
}

[data-theme="light"] .contact-form-heading h2,
html.theme-light .contact-form-heading h2 {
  color: #0f172a !important;
}

[data-theme="light"] .contact-form-heading p,
html.theme-light .contact-form-heading p {
  color: #64748b !important;
}

[data-theme="light"] .contact-form label,
html.theme-light .contact-form label,
[data-theme="light"] section#contact label,
html.theme-light section#contact label {
  color: #334155 !important;
}

[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form select,
[data-theme="light"] .contact-form textarea,
html.theme-light .contact-form input,
html.theme-light .contact-form select,
html.theme-light .contact-form textarea,
[data-theme="light"] section#contact input,
[data-theme="light"] section#contact select,
[data-theme="light"] section#contact textarea,
html.theme-light section#contact input,
html.theme-light section#contact select,
html.theme-light section#contact textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder,
html.theme-light .contact-form input::placeholder,
html.theme-light .contact-form textarea::placeholder,
[data-theme="light"] section#contact input::placeholder,
[data-theme="light"] section#contact textarea::placeholder,
html.theme-light section#contact input::placeholder,
html.theme-light section#contact textarea::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .contact-submit p,
html.theme-light .contact-submit p {
  color: #64748b !important;
}

[data-theme="light"] .contact-story-image figcaption,
html.theme-light .contact-story-image figcaption {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .contact-story-image figcaption strong,
html.theme-light .contact-story-image figcaption strong {
  color: #0f172a !important;
}

/* Utility Background overrides */
[data-theme="light"] .bg-brand-darkBg,
html.theme-light .bg-brand-darkBg {
  background-color: var(--bg-page) !important;
}

[data-theme="light"] .bg-brand-darkBg\/20,
[data-theme="light"] .bg-brand-darkBg\/60,
[data-theme="light"] .bg-brand-darkBg\/80,
html.theme-light .bg-brand-darkBg\/20,
html.theme-light .bg-brand-darkBg\/60,
html.theme-light .bg-brand-darkBg\/80 {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] .bg-brand-cardBg,
html.theme-light .bg-brand-cardBg {
  background-color: #ffffff !important;
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .bg-brand-cardBg\/10,
[data-theme="light"] .bg-brand-cardBg\/20,
[data-theme="light"] .bg-brand-cardBg\/30,
[data-theme="light"] .bg-brand-cardBg\/50,
html.theme-light .bg-brand-cardBg\/10,
html.theme-light .bg-brand-cardBg\/20,
html.theme-light .bg-brand-cardBg\/30,
html.theme-light .bg-brand-cardBg\/50 {
  background-color: transparent !important;
}

/* Borders in Light mode */
[data-theme="light"] .border-brand-border,
[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-800\/80,
[data-theme="light"] .border-slate-700,
html.theme-light .border-brand-border,
html.theme-light .border-slate-800,
html.theme-light .border-slate-800\/80,
html.theme-light .border-slate-700 {
  border-color: var(--border-color) !important;
}

/* Neutral Text Hierarchies in Light Mode (Excluding Hero over video) */
[data-theme="light"] h1:not(.home-hero *),
[data-theme="light"] h2:not(.home-hero *),
[data-theme="light"] h3:not(.home-hero *),
[data-theme="light"] .font-syne.text-white:not(.home-hero *),
[data-theme="light"] .font-bold.text-white:not(.home-hero *),
html.theme-light h1:not(.home-hero *),
html.theme-light h2:not(.home-hero *),
html.theme-light h3:not(.home-hero *),
html.theme-light .font-syne.text-white:not(.home-hero *),
html.theme-light .font-bold.text-white:not(.home-hero *) {
  color: var(--text-primary) !important;
}

/* Text utility overrides (Excluding Hero and Buttons) */
[data-theme="light"] .text-slate-100:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *),
[data-theme="light"] .text-slate-200:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *),
html.theme-light .text-slate-100:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *),
html.theme-light .text-slate-200:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *) {
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-slate-300:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *),
html.theme-light .text-slate-300:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *) {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .text-slate-400:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *),
html.theme-light .text-slate-400:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *) {
  color: var(--text-muted) !important;
}

[data-theme="light"] .text-slate-500:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *),
html.theme-light .text-slate-500:not(.home-hero *):not(.btn *):not(.button *):not(.bg-brand-orange *):not([class*="bg-gradient"] *) {
  color: var(--text-subtle) !important;
}

/* Home Service Cards in Light Mode */
[data-theme="light"] .home-service-visual,
html.theme-light .home-service-visual {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .home-service-featured,
html.theme-light .home-service-featured {
  background: linear-gradient(135deg, #ffffff 60%, rgba(249, 115, 22, 0.04) 100%) !important;
  background-image: linear-gradient(135deg, #ffffff 60%, rgba(249, 115, 22, 0.04) 100%) !important;
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06) !important;
}

/* Prevent image glare on white cards */
[data-theme="light"] .home-service-background,
html.theme-light .home-service-background {
  opacity: 0.22 !important;
  mix-blend-mode: multiply !important;
  filter: contrast(1.05) saturate(1.1) brightness(0.95) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.75) 55%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.75) 55%, #000 100%) !important;
}

[data-theme="light"] .home-service-visual::after,
html.theme-light .home-service-visual::after {
  display: block !important;
  background: linear-gradient(90deg, #ffffff 35%, rgba(255, 255, 255, 0.3) 70%, transparent 100%) !important;
}

/* Reduce orange ambient blur glare in light mode */
[data-theme="light"] .home-service-visual .blur-3xl,
html.theme-light .home-service-visual .blur-3xl {
  opacity: 0.15 !important;
}

/* Service card text contrast in light mode */
[data-theme="light"] .home-service-visual h3,
html.theme-light .home-service-visual h3 {
  color: #0f172a !important;
}

[data-theme="light"] .home-service-visual p,
html.theme-light .home-service-visual p {
  color: #475569 !important;
}

[data-theme="light"] .home-service-visual .text-slate-300,
[data-theme="light"] .home-service-visual .text-slate-400,
[data-theme="light"] .home-service-visual li,
html.theme-light .home-service-visual .text-slate-300,
html.theme-light .home-service-visual .text-slate-400,
html.theme-light .home-service-visual li {
  color: #334155 !important;
}

[data-theme="light"] .home-service-visual .border-brand-border\/60,
html.theme-light .home-service-visual .border-brand-border\/60 {
  border-color: #f1f5f9 !important;
}

[data-theme="light"] .service-theme-orange .home-service-icon,
[data-theme="light"] .home-service-featured .bg-brand-orange\/20,
html.theme-light .service-theme-orange .home-service-icon,
html.theme-light .home-service-featured .bg-brand-orange\/20 {
  background: #fff7ed !important;
  color: #ea580c !important;
}

[data-theme="light"] .service-theme-teal .home-service-icon,
html.theme-light .service-theme-teal .home-service-icon {
  background: #ecfeff !important;
  color: #0891b2 !important;
}

[data-theme="light"] .service-theme-purple .home-service-icon,
html.theme-light .service-theme-purple .home-service-icon {
  background: #faf5ff !important;
  color: #9333ea !important;
}

[data-theme="light"] .home-service-card,
html.theme-light .home-service-card {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .home-service-card:hover,
[data-theme="light"] .home-service-featured:hover,
html.theme-light .home-service-card:hover,
html.theme-light .home-service-featured:hover {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 16px 35px -5px rgba(15, 23, 42, 0.08) !important;
}

/* Home About Section in Light Mode */
[data-theme="light"] .home-about-label,
html.theme-light .home-about-label {
  color: #ea580c !important;
  background: #fff7ed !important;
  border-color: rgba(234, 88, 12, 0.3) !important;
  box-shadow: 0 1px 3px rgba(234, 88, 12, 0.08) !important;
}

[data-theme="light"] .home-about-story h2,
html.theme-light .home-about-story h2 {
  color: #0f172a !important;
}

[data-theme="light"] .home-about-story > p:not(.home-about-label),
html.theme-light .home-about-story > p:not(.home-about-label) {
  color: #475569 !important;
}

[data-theme="light"] .home-about-metrics article,
html.theme-light .home-about-metrics article {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .home-about-metrics strong,
html.theme-light .home-about-metrics strong {
  color: #0f172a !important;
}

[data-theme="light"] .home-about-metrics span,
html.theme-light .home-about-metrics span {
  color: #64748b !important;
}

[data-theme="light"] .home-about-office,
html.theme-light .home-about-office {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .home-about-proof,
html.theme-light .home-about-proof {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .home-about-proof > header,
html.theme-light .home-about-proof > header {
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .home-about-proof h3,
html.theme-light .home-about-proof h3 {
  color: #0f172a !important;
}

[data-theme="light"] .home-about-compare-head,
html.theme-light .home-about-compare-head {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .home-about-compare-head strong,
html.theme-light .home-about-compare-head strong {
  color: #ea580c !important;
  background: rgba(249, 115, 22, 0.08) !important;
}

[data-theme="light"] .home-about-compare-row,
html.theme-light .home-about-compare-row {
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .home-about-compare-row strong,
html.theme-light .home-about-compare-row strong {
  color: #0f172a !important;
}

[data-theme="light"] .home-about-compare-row span,
html.theme-light .home-about-compare-row span {
  color: #64748b !important;
}

[data-theme="light"] .home-about-compare-row > div + div,
html.theme-light .home-about-compare-row > div + div {
  background: rgba(249, 115, 22, 0.04) !important;
  border-left: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .home-about-compare-row > div + div strong,
html.theme-light .home-about-compare-row > div + div strong {
  color: #ea580c !important;
}

[data-theme="light"] .home-about-process ol::before,
html.theme-light .home-about-process ol::before {
  background: #e2e8f0 !important;
}

[data-theme="light"] .home-about-process li i,
html.theme-light .home-about-process li i {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #f97316 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .home-about-process li strong,
html.theme-light .home-about-process li strong {
  color: #334155 !important;
}

/* Home Portfolio Cards & Filters in Light Mode */
[data-theme="light"] .portfolio-filter-btn,
html.theme-light .portfolio-filter-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .portfolio-filter-btn:hover,
html.theme-light .portfolio-filter-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-filter-btn.is-active,
html.theme-light .portfolio-filter-btn.is-active {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
}

[data-theme="light"] .home-portfolio-card,
html.theme-light .home-portfolio-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .home-portfolio-card:hover,
html.theme-light .home-portfolio-card:hover {
  box-shadow: 0 16px 35px -5px rgba(15, 23, 42, 0.08) !important;
}

/* Portfolio Play Overlay on Hover - Keep dark blurred background across all themes */
.portfolio-play-overlay,
[data-theme="light"] .portfolio-play-overlay,
html.theme-light .portfolio-play-overlay,
[data-theme="dark"] .portfolio-play-overlay,
html.theme-dark .portfolio-play-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Home Pricing Section in Light Mode */
[data-theme="light"] .pricing-db-card,
html.theme-light .pricing-db-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .pricing-db-card button:not(.bg-brand-orange),
[data-theme="light"] .pricing-db-card a:not(.bg-brand-orange),
html.theme-light .pricing-db-card button:not(.bg-brand-orange),
html.theme-light .pricing-db-card a:not(.bg-brand-orange) {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .pricing-db-card button:not(.bg-brand-orange):hover,
[data-theme="light"] .pricing-db-card a:not(.bg-brand-orange):hover,
html.theme-light .pricing-db-card button:not(.bg-brand-orange):hover,
html.theme-light .pricing-db-card a:not(.bg-brand-orange):hover {
  background: #e2e8f0 !important;
}

[data-theme="light"] .glow-orange,
html.theme-light .glow-orange {
  border-color: #f97316 !important;
  box-shadow: 0 10px 30px -5px rgba(249, 115, 22, 0.18), 0 0 0 1px rgba(249, 115, 22, 0.3) !important;
  background-color: #ffffff !important;
}

/* Pricing Swiper Insights in Light Mode */
[data-theme="light"] .pricing-package-insight,
[data-theme="light"] .pricing-swiper .swiper-slide-active .pricing-package-insight,
html.theme-light .pricing-package-insight,
html.theme-light .pricing-swiper .swiper-slide-active .pricing-package-insight {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .pricing-package-insight strong,
html.theme-light .pricing-package-insight strong {
  color: #0f172a !important;
}

[data-theme="light"] .pricing-package-insight small,
html.theme-light .pricing-package-insight small {
  color: #64748b !important;
}

[data-theme="light"] .pricing-package-insight > p,
html.theme-light .pricing-package-insight > p {
  color: #475569 !important;
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .pricing-insight-stats > span,
html.theme-light .pricing-insight-stats > span {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .pricing-insight-stats b,
html.theme-light .pricing-insight-stats b {
  color: #0f172a !important;
}

[data-theme="light"] .pricing-swiper .swiper-pagination-bullet,
html.theme-light .pricing-swiper .swiper-pagination-bullet {
  background: #cbd5e1 !important;
}

[data-theme="light"] .pricing-swiper .swiper-pagination-bullet-active,
html.theme-light .pricing-swiper .swiper-pagination-bullet-active {
  background: #f97316 !important;
}

/* Forms & Inputs in Light Mode */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .custom-select-trigger,
html.theme-light input,
html.theme-light textarea,
html.theme-light select,
html.theme-light .custom-select-trigger {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light"] .custom-select.is-open .custom-select-trigger,
html.theme-light input:focus,
html.theme-light textarea:focus,
html.theme-light select:focus,
html.theme-light .custom-select.is-open .custom-select-trigger {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

[data-theme="light"] .custom-select-menu,
html.theme-light .custom-select-menu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .custom-select-option,
html.theme-light .custom-select-option {
  color: #334155 !important;
}

[data-theme="light"] .custom-select-option:hover,
html.theme-light .custom-select-option:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Site Footer in Light Mode */
[data-theme="light"] .site-footer,
html.theme-light .site-footer {
  background: #f1f5f9 !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .site-footer .brand,
[data-theme="light"] .site-footer .brand span,
html.theme-light .site-footer .brand,
html.theme-light .site-footer .brand span {
  color: #0f172a !important;
}

[data-theme="light"] .site-footer .brand:hover,
[data-theme="light"] .site-footer .brand:hover span,
html.theme-light .site-footer .brand:hover,
html.theme-light .site-footer .brand:hover span {
  color: var(--brand-orange) !important;
}

[data-theme="light"] .site-footer .footer-column strong,
html.theme-light .site-footer .footer-column strong {
  color: #0f172a !important;
}

[data-theme="light"] .site-footer .footer-about p,
[data-theme="light"] .site-footer .footer-column a,
[data-theme="light"] .site-footer .footer-column span,
html.theme-light .site-footer .footer-about p,
html.theme-light .site-footer .footer-column a,
html.theme-light .site-footer .footer-column span {
  color: #475569 !important;
}

[data-theme="light"] .site-footer .footer-column a:hover,
html.theme-light .site-footer .footer-column a:hover {
  color: #f97316 !important;
}

[data-theme="light"] .site-footer .copyright,
html.theme-light .site-footer .copyright {
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .site-footer .copyright strong,
html.theme-light .site-footer .copyright strong {
  color: #334155 !important;
}

/* Chatbot in Light Mode */
[data-theme="light"],
html.theme-light {
  --cb-bg-panel: #ffffff !important;
  --cb-bg-header: #f8fafc !important;
  --cb-bg-messages: #f1f5f9 !important;
  --cb-bg-card: #ffffff !important;
  --cb-text-light: #0f172a !important;
  --cb-text-muted: #64748b !important;
  --cb-border: #e2e8f0 !important;
}

[data-theme="light"] .cb-chat-panel,
html.theme-light .cb-chat-panel {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important;
}

[data-theme="light"] .cb-header,
html.theme-light .cb-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cb-header-title,
html.theme-light .cb-header-title {
  color: #0f172a !important;
}

[data-theme="light"] .cb-header-subtitle,
html.theme-light .cb-header-subtitle {
  color: #64748b !important;
}

[data-theme="light"] .cb-close-btn,
html.theme-light .cb-close-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .cb-close-btn:hover,
html.theme-light .cb-close-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .cb-messages,
html.theme-light .cb-messages {
  background: #f8fafc !important;
}

[data-theme="light"] .cb-bubble-bot,
html.theme-light .cb-bubble-bot {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .cb-bubble-bot b,
[data-theme="light"] .cb-bubble-bot strong,
html.theme-light .cb-bubble-bot b,
html.theme-light .cb-bubble-bot strong {
  color: #0f172a !important;
}

[data-theme="light"] .cb-followup-title,
html.theme-light .cb-followup-title {
  color: #64748b !important;
}

[data-theme="light"] .cb-followup-pill,
html.theme-light .cb-followup-pill {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="light"] .cb-followup-pill:hover,
html.theme-light .cb-followup-pill:hover {
  background: #fff7ed !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #ea580c !important;
}

[data-theme="light"] .cb-quick-bar,
html.theme-light .cb-quick-bar {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .cb-chip-btn,
html.theme-light .cb-chip-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .cb-chip-btn:hover,
html.theme-light .cb-chip-btn:hover {
  background: #fff7ed !important;
  border-color: #f97316 !important;
  color: #ea580c !important;
}

[data-theme="light"] .cb-input-wrap,
html.theme-light .cb-input-wrap {
  border-top: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

[data-theme="light"] .cb-input,
html.theme-light .cb-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .cb-input::placeholder,
html.theme-light .cb-input::placeholder {
  color: #94a3b8 !important;
}


/* Back to Top Button in Light Mode */
[data-theme="light"] .csv-back-to-top,
html.theme-light .csv-back-to-top {
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .csv-back-to-top::before,
html.theme-light .csv-back-to-top::before {
  background: #ffffff !important;
}

[data-theme="light"] .csv-back-to-top:hover,
html.theme-light .csv-back-to-top:hover {
  border-color: #f97316 !important;
  color: #ffffff !important;
}

[data-theme="light"] .csv-back-to-top:hover::before,
html.theme-light .csv-back-to-top:hover::before {
  background: #f97316 !important;
}

/* Toast Message in Light Mode */
[data-theme="light"] .toast,
[data-theme="light"] .home-toast,
html.theme-light .toast,
html.theme-light .home-toast {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
}

/* ----------------------------------------------------
   6. SUBPAGES & EDITORIAL SECTIONS IN LIGHT MODE
   ---------------------------------------------------- */
/* Services page: Standards & Commitments */
.service-standards-section {
  margin-top: 2rem;
  padding: 2rem;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

.service-standards-header {
  margin-bottom: 1.5rem;
}

.service-standards-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}

.service-standards-header p {
  color: var(--text-muted);
  font-size: 0.86rem;
  margin: 0;
  line-height: 1.6;
}

.service-standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.service-standard-card {
  padding: 1.2rem;
  border-radius: 14px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
}

.service-standard-card h3 {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-standard-card p {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

/* Blog page: Editorial Guide Box */
.news-editorial-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 2.2rem;
  box-shadow: var(--shadow-card);
}

.news-editorial-header {
  max-width: 800px;
  margin-bottom: 1.5rem;
}

.news-editorial-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.news-editorial-header p {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
}

.news-editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.news-editorial-item {
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
}

.news-editorial-item strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.news-editorial-item p {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
}

.detail-meta-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
}

.detail-meta-bar > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-meta-bar strong {
  color: var(--text-primary);
}

.detail-takeaways-box {
  margin-top: 40px;
  padding: 24px;
  border-radius: 16px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.detail-takeaways-box h3 {
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: var(--brand-orange);
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-takeaways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.detail-takeaways-grid strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.detail-takeaways-grid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ----------------------------------------------------
   6.1 ABOUT PAGE (gioi-thieu/)
   ---------------------------------------------------- */
[data-theme="light"] .about-proof li strong,
html.theme-light .about-proof li strong {
  color: #0f172a !important;
}

[data-theme="light"] .about-proof li span,
html.theme-light .about-proof li span {
  color: #64748b !important;
}

[data-theme="light"] .about-hero-visual::before,
html.theme-light .about-hero-visual::before {
  background: linear-gradient(155deg, #ffffff, #f1f5f9) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06), 0 0 30px rgba(249, 115, 22, 0.05) !important;
}

[data-theme="light"] .about-hero-visual::after,
html.theme-light .about-hero-visual::after {
  color: rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .about-hero-visual figcaption,
html.theme-light .about-hero-visual figcaption {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .about-hero-visual figcaption strong,
html.theme-light .about-hero-visual figcaption strong {
  color: #0f172a !important;
}

[data-theme="light"] .about-hero-visual figcaption span,
html.theme-light .about-hero-visual figcaption span {
  color: #64748b !important;
}

[data-theme="light"] .about-media,
html.theme-light .about-media {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .about-media figcaption,
html.theme-light .about-media figcaption {
  color: #64748b !important;
}

[data-theme="light"] .about-benefits article:hover,
html.theme-light .about-benefits article:hover {
  background: #f1f5f9 !important;
  border-color: rgba(249, 115, 22, 0.35) !important;
}

[data-theme="light"] .about-benefits article h3,
html.theme-light .about-benefits article h3 {
  color: #0f172a !important;
}

[data-theme="light"] .about-benefits article p,
html.theme-light .about-benefits article p {
  color: #475569 !important;
}

/* About Values Section (#about-values-title & Grid) */
[data-theme="light"] .about-values,
html.theme-light .about-values {
  background: #f1f5f9 !important;
}

[data-theme="light"] .about-values::before,
html.theme-light .about-values::before {
  background: radial-gradient(circle at 50% 0, rgba(249, 115, 22, 0.08), transparent 45%) !important;
}

[data-theme="light"] #about-values-title,
[data-theme="light"] .about-section-heading h2,
html.theme-light #about-values-title,
html.theme-light .about-section-heading h2 {
  color: #0f172a !important;
}

[data-theme="light"] .about-section-heading p,
html.theme-light .about-section-heading p {
  color: #475569 !important;
}

[data-theme="light"] .about-value-grid article,
html.theme-light .about-value-grid article {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .about-value-grid article:hover,
html.theme-light .about-value-grid article:hover {
  border-color: rgba(249, 115, 22, 0.5) !important;
  box-shadow: 0 16px 35px -5px rgba(249, 115, 22, 0.12), 0 8px 16px -3px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .about-value-grid article h3,
html.theme-light .about-value-grid article h3 {
  color: #0f172a !important;
}

[data-theme="light"] .about-value-grid article p,
html.theme-light .about-value-grid article p {
  color: #475569 !important;
}

[data-theme="light"] .about-value-grid article > span,
html.theme-light .about-value-grid article > span {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #ea580c !important;
}

[data-theme="light"] .about-value-grid .about-value-icon,
html.theme-light .about-value-grid .about-value-icon {
  opacity: 0.15 !important;
  color: var(--orange) !important;
}

/* About Steps (.about-steps) */
[data-theme="light"] .about-steps li,
html.theme-light .about-steps li {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .about-steps strong,
html.theme-light .about-steps strong {
  color: #0f172a !important;
}

[data-theme="light"] .about-steps p,
html.theme-light .about-steps p {
  color: #475569 !important;
}

[data-theme="light"] .about-teamwork,
html.theme-light .about-teamwork {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}

/* About Final CTA (.about-final-cta) */
[data-theme="light"] .about-final-cta,
html.theme-light .about-final-cta {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .about-final-cta::before,
html.theme-light .about-final-cta::before {
  background: var(--teal) !important;
  opacity: 0.08 !important;
}

[data-theme="light"] .about-final-cta::after,
html.theme-light .about-final-cta::after {
  background: var(--orange) !important;
  opacity: 0.08 !important;
}

[data-theme="light"] .about-final-cta h2,
[data-theme="light"] #about-cta-title,
html.theme-light .about-final-cta h2,
html.theme-light #about-cta-title {
  color: #0f172a !important;
}

[data-theme="light"] .about-final-cta p,
html.theme-light .about-final-cta p {
  color: #475569 !important;
}

/* ----------------------------------------------------
   6.2 SERVICES PAGE (dich-vu/)
   ---------------------------------------------------- */
[data-theme="light"] .service-hero-copy,
html.theme-light .service-hero-copy {
  background: linear-gradient(90deg, #f8fafc 65%, rgba(248, 250, 252, 0.88) 85%, transparent 100%) !important;
}

[data-theme="light"] #services-title,
[data-theme="light"] .service-hero-copy h1,
html.theme-light #services-title,
html.theme-light .service-hero-copy h1 {
  color: #0f172a !important;
}

[data-theme="light"] .service-hero-copy > p:not(.eyebrow),
html.theme-light .service-hero-copy > p:not(.eyebrow) {
  color: #475569 !important;
}

[data-theme="light"] .service-hero-media::after,
html.theme-light .service-hero-media::after {
  background: linear-gradient(90deg, #f8fafc 0%, transparent 48%), linear-gradient(0deg, rgba(248, 250, 252, 0.7) 0%, transparent 45%) !important;
}

[data-theme="light"] .service-hero-benefits article,
html.theme-light .service-hero-benefits article {
  background: transparent !important;
  border-left-color: #e2e8f0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .service-hero-benefits article i,
html.theme-light .service-hero-benefits article i {
  border-color: rgba(249, 115, 22, 0.3) !important;
  background: rgba(249, 115, 22, 0.08) !important;
  color: #ea580c !important;
}

[data-theme="light"] .service-hero-benefits article strong,
html.theme-light .service-hero-benefits article strong {
  color: #0f172a !important;
}

[data-theme="light"] .service-hero-benefits article span,
html.theme-light .service-hero-benefits article span {
  color: #64748b !important;
}

/* Service Tabs */
[data-theme="light"] .service-tabs button,
html.theme-light .service-tabs button {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .service-tabs button strong,
html.theme-light .service-tabs button strong {
  color: #1e293b !important;
}

[data-theme="light"] .service-tabs button span,
html.theme-light .service-tabs button span {
  color: #64748b !important;
}

[data-theme="light"] .service-tab-icon,
html.theme-light .service-tab-icon {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .service-tabs button:hover,
html.theme-light .service-tabs button:hover {
  background: #fff7ed !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
}

[data-theme="light"] .service-tabs button.is-active,
html.theme-light .service-tabs button.is-active {
  background: #fff7ed !important;
  border-color: var(--orange) !important;
}

[data-theme="light"] .service-tabs button.is-active strong,
[data-theme="light"] .service-tabs button.is-active span,
html.theme-light .service-tabs button.is-active strong,
html.theme-light .service-tabs button.is-active span {
  color: #ea580c !important;
}

[data-theme="light"] .service-tabs button.is-active .service-tab-icon,
html.theme-light .service-tabs button.is-active .service-tab-icon {
  border-color: rgba(249, 115, 22, 0.4) !important;
  background: rgba(249, 115, 22, 0.12) !important;
  color: #ea580c !important;
}

/* Service Focus Card (.service-focus) */
[data-theme="light"] .service-focus,
html.theme-light .service-focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .service-focus-copy h2,
html.theme-light .service-focus-copy h2 {
  color: #0f172a !important;
}

[data-theme="light"] .service-focus-copy > p,
html.theme-light .service-focus-copy > p {
  color: #475569 !important;
}

[data-theme="light"] .service-focus-badge,
html.theme-light .service-focus-badge {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #ea580c !important;
}

[data-theme="light"] .service-focus-audience,
html.theme-light .service-focus-audience {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid var(--orange) !important;
}

[data-theme="light"] .service-focus-audience small,
html.theme-light .service-focus-audience small {
  color: #64748b !important;
}

[data-theme="light"] .service-focus-audience strong,
html.theme-light .service-focus-audience strong {
  color: #0f172a !important;
}

[data-theme="light"] .service-focus-features li,
html.theme-light .service-focus-features li {
  color: #334155 !important;
}

[data-theme="light"] .service-focus-features i,
html.theme-light .service-focus-features i {
  color: #ea580c !important;
}

[data-theme="light"] .service-focus-media::after,
html.theme-light .service-focus-media::after {
  background: linear-gradient(90deg, #ffffff 0%, transparent 30%), linear-gradient(0deg, rgba(255, 255, 255, 0.85) 0%, transparent 40%) !important;
}

[data-theme="light"] .service-focus-media figcaption span,
html.theme-light .service-focus-media figcaption span {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

/* Service Price Panel */
[data-theme="light"] .service-focus-price,
html.theme-light .service-focus-price {
  background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
  border-left: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .service-price-heading span,
html.theme-light .service-price-heading span {
  color: #ea580c !important;
}

[data-theme="light"] .service-price-heading b,
html.theme-light .service-price-heading b {
  color: #0f172a !important;
}

[data-theme="light"] .service-price-value > span,
html.theme-light .service-price-value > span {
  background: rgba(249, 115, 22, 0.1) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: #ea580c !important;
}

[data-theme="light"] .service-price-value > strong,
html.theme-light .service-price-value > strong {
  color: #0f172a !important;
}

[data-theme="light"] .service-price-value > small,
html.theme-light .service-price-value > small {
  color: #64748b !important;
}

[data-theme="light"] .service-focus-price > p,
html.theme-light .service-focus-price > p {
  border-color: #e2e8f0 !important;
  color: #ea580c !important;
}

[data-theme="light"] .service-focus-price > ul li,
html.theme-light .service-focus-price > ul li {
  color: #334155 !important;
}

[data-theme="light"] .service-focus-price > ul i,
html.theme-light .service-focus-price > ul i {
  color: #ea580c !important;
}

/* Service Journey (.service-journey) */
[data-theme="light"] .service-journey article,
html.theme-light .service-journey article {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .service-journey article + article::before,
html.theme-light .service-journey article + article::before {
  background: #e2e8f0 !important;
}

[data-theme="light"] .service-journey article h2,
html.theme-light .service-journey article h2 {
  color: #0f172a !important;
}

[data-theme="light"] .service-journey article h2 b,
html.theme-light .service-journey article h2 b {
  color: #ea580c !important;
}

[data-theme="light"] .service-journey article p,
html.theme-light .service-journey article p {
  color: #64748b !important;
}

[data-theme="light"] .service-journey article span,
html.theme-light .service-journey article span {
  background: rgba(249, 115, 22, 0.08) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: #ea580c !important;
}

/* Service Standards Cards */
[data-theme="light"] .service-standard-card,
html.theme-light .service-standard-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
}

/* ----------------------------------------------------
   6.3 PORTFOLIO & PORTFOLIO DETAIL
   ---------------------------------------------------- */
[data-theme="light"] .portfolio-search > div,
html.theme-light .portfolio-search > div {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .portfolio-search input,
html.theme-light .portfolio-search input {
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-search input::placeholder,
html.theme-light .portfolio-search input::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .portfolio-filter-panel,
html.theme-light .portfolio-filter-panel {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .portfolio-filter-panel select,
html.theme-light .portfolio-filter-panel select {
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.8rem center !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .portfolio-filter-panel select option,
html.theme-light .portfolio-filter-panel select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-library-card,
html.theme-light .portfolio-library-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .portfolio-library-card h2,
html.theme-light .portfolio-library-card h2 {
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-library-copy li,
html.theme-light .portfolio-library-copy li {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .portfolio-results-meta strong,
html.theme-light .portfolio-results-meta strong {
  color: #0f172a !important;
}

/* Portfolio Filters (button pills) */
[data-theme="light"] .filters button,
html.theme-light .filters button {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="light"] .filters button.is-active,
[data-theme="light"] .filters button:hover,
html.theme-light .filters button.is-active,
html.theme-light .filters button:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #ffffff !important;
}

/* Content & Product Details (.detail-*) */
[data-theme="light"] .detail-breadcrumb a,
html.theme-light .detail-breadcrumb a {
  color: #64748b !important;
}

[data-theme="light"] .detail-breadcrumb b,
html.theme-light .detail-breadcrumb b {
  color: #0f172a !important;
}

[data-theme="light"] .detail-header h1,
html.theme-light .detail-header h1 {
  color: #0f172a !important;
}

[data-theme="light"] .detail-header p,
html.theme-light .detail-header p {
  color: #475569 !important;
}

[data-theme="light"] .detail-header ul li,
html.theme-light .detail-header ul li {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .detail-content,
[data-theme="light"] .blog-content,
[data-theme="light"] .content-prose,
html.theme-light .detail-content,
html.theme-light .blog-content,
html.theme-light .content-prose {
  color: #334155 !important;
}

[data-theme="light"] .detail-content h1,
[data-theme="light"] .detail-content h2,
[data-theme="light"] .detail-content h3,
[data-theme="light"] .detail-content h4,
[data-theme="light"] .blog-content h2,
[data-theme="light"] .blog-content h3,
[data-theme="light"] .blog-content h4,
html.theme-light .detail-content h1,
html.theme-light .detail-content h2,
html.theme-light .detail-content h3,
html.theme-light .detail-content h4,
html.theme-light .blog-content h2,
html.theme-light .blog-content h3,
html.theme-light .blog-content h4 {
  color: #0f172a !important;
}

[data-theme="light"] .detail-content p,
html.theme-light .detail-content p {
  color: #334155 !important;
}

[data-theme="light"] .detail-content blockquote,
[data-theme="light"] .blog-content blockquote,
html.theme-light .detail-content blockquote,
html.theme-light .blog-content blockquote {
  background: #f8fafc !important;
  color: #334155 !important;
  border-left-color: var(--orange) !important;
}

[data-theme="light"] .detail-content table,
html.theme-light .detail-content table {
  background: #ffffff !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .detail-content th,
html.theme-light .detail-content th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .detail-content td,
html.theme-light .detail-content td {
  border-color: #e2e8f0 !important;
}

/* Detail Specs Card */
[data-theme="light"] .detail-specs-card,
html.theme-light .detail-specs-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .detail-specs-head h3,
html.theme-light .detail-specs-head h3 {
  color: #0f172a !important;
}

[data-theme="light"] .detail-specs-list,
html.theme-light .detail-specs-list {
  border-top-color: #f1f5f9 !important;
}

[data-theme="light"] .detail-specs-label,
html.theme-light .detail-specs-label {
  color: #64748b !important;
}

[data-theme="light"] .detail-specs-val,
html.theme-light .detail-specs-val {
  color: #1e293b !important;
}

[data-theme="light"] .detail-specs-val--badge,
html.theme-light .detail-specs-val--badge {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .detail-tag-badge,
html.theme-light .detail-tag-badge {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .detail-specs-highlights,
html.theme-light .detail-specs-highlights {
  border-top-color: #f1f5f9 !important;
}

/* Detail Sidebar Side List */
[data-theme="light"] .detail-side-list,
html.theme-light .detail-side-list {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .detail-side-list > span,
html.theme-light .detail-side-list > span {
  border-bottom-color: #f1f5f9 !important;
  color: var(--orange) !important;
}

[data-theme="light"] .detail-side-list a,
html.theme-light .detail-side-list a {
  border-bottom-color: #f1f5f9 !important;
}

[data-theme="light"] .detail-side-list a:hover,
html.theme-light .detail-side-list a:hover {
  background: #f8fafc !important;
}

[data-theme="light"] .detail-side-list strong,
html.theme-light .detail-side-list strong {
  color: #1e293b !important;
}

[data-theme="light"] .detail-side-list small,
html.theme-light .detail-side-list small {
  color: #64748b !important;
}

/* Detail Lead CTA */
[data-theme="light"] .detail-lead-cta,
html.theme-light .detail-lead-cta {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
}

[data-theme="light"] .detail-lead-cta span,
html.theme-light .detail-lead-cta span {
  color: #ea580c !important;
}

[data-theme="light"] .detail-lead-cta strong,
html.theme-light .detail-lead-cta strong {
  color: #9a3412 !important;
}

[data-theme="light"] .detail-lead-cta b,
html.theme-light .detail-lead-cta b {
  color: #c2410c !important;
}

/* ----------------------------------------------------
   6.4 BLOG & BLOG DETAIL (tin-tuc/)
   ---------------------------------------------------- */
[data-theme="light"] .news-toolbar,
html.theme-light .news-toolbar {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .news-toolbar-title,
html.theme-light .news-toolbar-title {
  color: #0f172a !important;
}

[data-theme="light"] .news-total-badge,
html.theme-light .news-total-badge {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .news-toolbar-filters,
html.theme-light .news-toolbar-filters {
  border-top-color: #f1f5f9 !important;
}

[data-theme="light"] .news-filter-label,
html.theme-light .news-filter-label {
  color: #475569 !important;
}

[data-theme="light"] .news-filter-select,
html.theme-light .news-filter-select {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

[data-theme="light"] .news-category-nav,
html.theme-light .news-category-nav {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .news-category-nav > strong,
html.theme-light .news-category-nav > strong {
  color: #0f172a !important;
}

[data-theme="light"] .news-category-nav > a,
html.theme-light .news-category-nav > a {
  color: #475569 !important;
}

[data-theme="light"] .news-category-nav > a span,
html.theme-light .news-category-nav > a span {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

[data-theme="light"] .news-category-nav > a:hover,
[data-theme="light"] .news-category-nav > a.is-active,
html.theme-light .news-category-nav > a:hover,
html.theme-light .news-category-nav > a.is-active {
  background: #fff7ed !important;
  color: #ea580c !important;
}

[data-theme="light"] .news-category-nav > a.is-active span,
html.theme-light .news-category-nav > a.is-active span {
  background: #fed7aa !important;
  color: #ea580c !important;
}

[data-theme="light"] .news-nav-note,
html.theme-light .news-nav-note {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .news-nav-note b,
html.theme-light .news-nav-note b {
  color: #0f172a !important;
}

[data-theme="light"] .news-nav-note p,
html.theme-light .news-nav-note p {
  color: #64748b !important;
}

[data-theme="light"] .news-card,
html.theme-light .news-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .news-card-copy h3,
html.theme-light .news-card-copy h3 {
  color: #0f172a !important;
}

[data-theme="light"] .news-card-copy p,
html.theme-light .news-card-copy p {
  color: #475569 !important;
}

[data-theme="light"] .news-card-copy time,
html.theme-light .news-card-copy time {
  color: #64748b !important;
}

[data-theme="light"] .content-empty,
[data-theme="light"] .news-empty-feature,
html.theme-light .content-empty,
html.theme-light .news-empty-feature {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .content-empty h2,
[data-theme="light"] .content-empty h3,
html.theme-light .content-empty h2,
html.theme-light .content-empty h3 {
  color: #0f172a !important;
}

/* Blog Detail Meta Bar & Takeaways Box */
[data-theme="light"] .detail-meta-bar,
html.theme-light .detail-meta-bar {
  border-bottom-color: #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .detail-meta-bar strong,
html.theme-light .detail-meta-bar strong {
  color: #1e293b !important;
}

[data-theme="light"] .detail-takeaways-box,
html.theme-light .detail-takeaways-box {
  background: #fff7ed !important;
  border-color: rgba(249, 115, 22, 0.25) !important;
  color: #334155 !important;
}

[data-theme="light"] .detail-takeaways-box div,
html.theme-light .detail-takeaways-box div {
  color: #334155 !important;
}

[data-theme="light"] .detail-takeaways-box strong,
html.theme-light .detail-takeaways-box strong {
  color: #0f172a !important;
}

[data-theme="light"] .detail-takeaways-box p,
html.theme-light .detail-takeaways-box p {
  color: #475569 !important;
}

/* Pagination in Light Mode */
[data-theme="light"] .toc,
html.theme-light .toc {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .pagination-number,
[data-theme="light"] .pagination-arrow,
html.theme-light .pagination-number,
html.theme-light .pagination-arrow {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="light"] .pagination-number.is-active,
html.theme-light .pagination-number.is-active {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #ffffff !important;
}

[data-theme="light"] .pagination-arrow.is-disabled,
html.theme-light .pagination-arrow.is-disabled {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #cbd5e1 !important;
}

/* ----------------------------------------------------
   6.5 PRICING PAGE (bang-gia/)
   ---------------------------------------------------- */
[data-theme="light"] .price .price-value,
html.theme-light .price .price-value {
  color: #0f172a !important;
}

[data-theme="light"] .price .price-value small,
html.theme-light .price .price-value small {
  color: #64748b !important;
}

[data-theme="light"] .card.price,
html.theme-light .card.price {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .card.price h3,
html.theme-light .card.price h3 {
  color: #0f172a !important;
}

[data-theme="light"] .card.price ul li,
html.theme-light .card.price ul li {
  color: #475569 !important;
}

[data-theme="light"] .card.price.featured,
html.theme-light .card.price.featured {
  border-color: var(--orange) !important;
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.12) !important;
}

/* Primary CTA Button is ALWAYS High Contrast White on Brand Orange (except secondary/ghost buttons) */
.btn-primary,
.button:not(.button-ghost):not(.button-secondary),
.bg-brand-orange {
  color: #ffffff !important;
}

/* Secondary & Ghost Buttons in Light Mode */
[data-theme="light"] .button.button-ghost,
[data-theme="light"] .button.button-secondary,
html.theme-light .button.button-ghost,
html.theme-light .button.button-secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .button.button-ghost:hover,
[data-theme="light"] .button.button-secondary:hover,
html.theme-light .button.button-ghost:hover,
html.theme-light .button.button-secondary:hover {
  background: #f8fafc !important;
  border-color: #f97316 !important;
  color: #ea580c !important;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15) !important;
}

/* ----------------------------------------------------
   7. COMPREHENSIVE OVERRIDES: NO DARK SURFACES IN LIGHT MODE
   ---------------------------------------------------- */

/* Video Player Modal on Home */
[data-theme="light"] #video-modal-panel,
html.theme-light #video-modal-panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="light"] #video-modal-panel > div:last-child,
[data-theme="light"] #video-modal-panel .bg-\[\#0d1424\],
html.theme-light #video-modal-panel > div:last-child,
html.theme-light #video-modal-panel .bg-\[\#0d1424\] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #modal-video-title,
html.theme-light #modal-video-title {
  color: #0f172a !important;
}

[data-theme="light"] #modal-video-desc,
html.theme-light #modal-video-desc {
  color: #475569 !important;
}

[data-theme="light"] #video-modal-panel .detail-specs-val,
html.theme-light #video-modal-panel .detail-specs-val {
  color: #0f172a !important;
}

[data-theme="light"] #video-modal-panel .detail-specs-label,
html.theme-light #video-modal-panel .detail-specs-label {
  color: #64748b !important;
}

[data-theme="light"] #video-modal-panel .detail-specs-val--badge,
html.theme-light #video-modal-panel .detail-specs-val--badge {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] #video-modal-panel .detail-tag-badge,
html.theme-light #video-modal-panel .detail-tag-badge {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

/* Detail Related & Swipers (Portfolio Detail & Blog Detail) */
[data-theme="light"] .detail-related,
html.theme-light .detail-related {
  background: #ffffff !important;
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .detail-related-alt,
html.theme-light .detail-related-alt {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .detail-section-heading h2,
html.theme-light .detail-section-heading h2 {
  color: #0f172a !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide,
[data-theme="light"] .detail-card-grid article,
html.theme-light .detail-card-swiper .swiper-slide,
html.theme-light .detail-card-grid article {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide:hover,
[data-theme="light"] .detail-card-grid article:hover,
html.theme-light .detail-card-swiper .swiper-slide:hover,
html.theme-light .detail-card-grid article:hover {
  border-color: var(--orange) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09) !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide h3,
[data-theme="light"] .detail-card-grid article h3,
html.theme-light .detail-card-swiper .swiper-slide h3,
html.theme-light .detail-card-grid article h3 {
  color: #0f172a !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide p,
[data-theme="light"] .detail-card-grid article p,
html.theme-light .detail-card-swiper .swiper-slide p,
html.theme-light .detail-card-grid article p {
  color: #64748b !important;
}

[data-theme="light"] .detail-product-media,
[data-theme="light"] .detail-cover,
html.theme-light .detail-product-media,
html.theme-light .detail-cover {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .detail-specs-card,
html.theme-light .detail-specs-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .detail-specs-head h3,
html.theme-light .detail-specs-head h3 {
  color: #0f172a !important;
}

[data-theme="light"] .detail-specs-val,
html.theme-light .detail-specs-val {
  color: #0f172a !important;
}

[data-theme="light"] .detail-specs-val--badge,
[data-theme="light"] .detail-tag-badge,
html.theme-light .detail-specs-val--badge,
html.theme-light .detail-tag-badge {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .detail-side-list,
html.theme-light .detail-side-list {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .detail-side-list > span,
html.theme-light .detail-side-list > span {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .detail-side-list a,
html.theme-light .detail-side-list a {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .detail-side-list a:hover,
html.theme-light .detail-side-list a:hover {
  background: #f8fafc !important;
}

[data-theme="light"] .detail-side-list strong,
html.theme-light .detail-side-list strong {
  color: #0f172a !important;
}

[data-theme="light"] .detail-lead-cta,
html.theme-light .detail-lead-cta {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.08) !important;
}

[data-theme="light"] .detail-lead-cta strong,
html.theme-light .detail-lead-cta strong {
  color: #9a3412 !important;
}

[data-theme="light"] .detail-lead-cta b,
html.theme-light .detail-lead-cta b {
  color: #ea580c !important;
}

[data-theme="light"] .detail-header ul li,
html.theme-light .detail-header ul li {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

/* Blog Listing & Mobile Responsive News */
[data-theme="light"] .news-toolbar,
html.theme-light .news-toolbar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .news-card,
html.theme-light .news-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .news-card-copy h3,
html.theme-light .news-card-copy h3 {
  color: #0f172a !important;
}

[data-theme="light"] .news-card-copy p,
html.theme-light .news-card-copy p {
  color: #475569 !important;
}

[data-theme="light"] .news-filter-select,
[data-theme="light"] .news-filter-select-wrap .custom-select-trigger,
html.theme-light .news-filter-select,
html.theme-light .news-filter-select-wrap .custom-select-trigger {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .news-filter-select-wrap .custom-select-menu,
html.theme-light .news-filter-select-wrap .custom-select-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .news-filter-select-wrap .custom-select-option,
html.theme-light .news-filter-select-wrap .custom-select-option {
  color: #334155 !important;
}

[data-theme="light"] .news-filter-select-wrap .custom-select-option:hover,
html.theme-light .news-filter-select-wrap .custom-select-option:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .news-secondary-card,
[data-theme="light"] .news-secondary-grid article,
html.theme-light .news-secondary-card,
html.theme-light .news-secondary-grid article {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .news-nav-note,
html.theme-light .news-nav-note {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .news-nav-note b,
html.theme-light .news-nav-note b {
  color: #0f172a !important;
}

[data-theme="light"] .news-nav-note p,
html.theme-light .news-nav-note p {
  color: #64748b !important;
}

/* Portfolio Filters & Mobile Actions */
[data-theme="light"] .portfolio-filter-panel,
html.theme-light .portfolio-filter-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .portfolio-filter-panel select,
html.theme-light .portfolio-filter-panel select {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-filter-panel select option,
html.theme-light .portfolio-filter-panel select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-mobile-actions,
html.theme-light .portfolio-mobile-actions {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .portfolio-mobile-actions label,
html.theme-light .portfolio-mobile-actions label {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .portfolio-mobile-actions input,
html.theme-light .portfolio-mobile-actions input {
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-mobile-actions > button,
html.theme-light .portfolio-mobile-actions > button {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: var(--orange) !important;
}

[data-theme="light"] .portfolio-mobile-options,
html.theme-light .portfolio-mobile-options {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .portfolio-mobile-options button,
html.theme-light .portfolio-mobile-options button {
  color: #334155 !important;
}

[data-theme="light"] .portfolio-mobile-options button:hover,
[data-theme="light"] .portfolio-mobile-options button.is-selected,
html.theme-light .portfolio-mobile-options button:hover,
html.theme-light .portfolio-mobile-options button.is-selected {
  background: #fff7ed !important;
  color: var(--orange) !important;
}

[data-theme="light"] .portfolio-filter-sheet-head strong,
html.theme-light .portfolio-filter-sheet-head strong {
  color: #0f172a !important;
}

[data-theme="light"] .portfolio-filter-sheet-head button,
html.theme-light .portfolio-filter-sheet-head button {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

[data-theme="light"] .portfolio-library-media,
html.theme-light .portfolio-library-media {
  background: #f1f5f9 !important;
}

/* Custom Select Dropdowns Everywhere */
[data-theme="light"] .custom-select-trigger,
html.theme-light .custom-select-trigger {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .custom-select-menu,
html.theme-light .custom-select-menu {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .custom-select-option,
html.theme-light .custom-select-option {
  color: #334155 !important;
}

[data-theme="light"] .custom-select-option:hover,
html.theme-light .custom-select-option:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .custom-select-option[aria-selected="true"],
html.theme-light .custom-select-option[aria-selected="true"] {
  background: #fff7ed !important;
  color: #ea580c !important;
}

/* Native Select Options Everywhere */
[data-theme="light"] select option,
[data-theme="light"] select optgroup,
html.theme-light select option,
html.theme-light select optgroup {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* About Steps & Process */
[data-theme="light"] .about-steps li,
html.theme-light .about-steps li {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Home Portfolio cards media background */
[data-theme="light"] .home-portfolio-media,
html.theme-light .home-portfolio-media {
  background-color: #f1f5f9 !important;
}

/* ==========================================================================
   HEADER RESPONSIVE SAFEGUARD (Fix Double Theme Toggle On Subpages)
   ========================================================================== */
@media (min-width: 1024px) {
  .header-mobile-actions {
    display: none !important;
  }
  .primary-nav {
    display: flex !important;
  }
}

@media (max-width: 1023px) {
  .primary-nav {
    display: none !important;
  }
  .header-mobile-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
}

/* ==========================================================================
   BLOG & NEWS TITLES & HEADING BALANCE
   ========================================================================== */
#news-featured-title,
#news-category-title,
.news-heading h1,
.detail-header h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
}

/* News Story Featured Card Title In Light/Dark Mode (Always Crisp White over dark overlay) */
.news-story-overlay h2,
[data-theme="light"] .news-story-overlay h2,
html.theme-light .news-story-overlay h2,
[data-theme="dark"] .news-story-overlay h2,
html.theme-dark .news-story-overlay h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95) !important;
}

.news-story-overlay p,
[data-theme="light"] .news-story-overlay p,
html.theme-light .news-story-overlay p {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) !important;
}

.news-secondary-title,
[data-theme="light"] .news-secondary-title,
html.theme-light .news-secondary-title {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* ==========================================================================
   RELATED PRODUCTS SWIPER (Never stretch horizontal cards downwards)
   ========================================================================== */
.detail-card-swiper .swiper-wrapper {
  align-items: flex-start !important;
}

.detail-card-swiper .swiper-slide {
  align-self: flex-start !important;
  height: auto !important;
}

.detail-card-swiper .swiper-slide > a {
  height: auto !important;
}

.detail-card-swiper .swiper-slide.is-horizontal,
.detail-card-swiper .swiper-slide.is-horizontal-single {
  align-self: flex-start !important;
  height: auto !important;
}

.detail-card-swiper .swiper-slide.is-horizontal img,
.detail-card-swiper .swiper-slide.is-horizontal-single img {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  object-fit: cover !important;
}

.detail-card-swiper .swiper-slide.is-vertical {
  align-self: flex-start !important;
}

.detail-card-swiper .swiper-slide.is-vertical img {
  aspect-ratio: 9 / 16 !important;
  max-height: 540px !important;
  height: auto !important;
  object-fit: cover !important;
}

.detail-card-swiper .swiper-slide.is-horizontal-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide.is-horizontal-stack,
html.theme-light .detail-card-swiper .swiper-slide.is-horizontal-stack {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub,
html.theme-light .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub:hover,
html.theme-light .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub:hover {
  border-color: var(--border-highlight) !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub h3,
html.theme-light .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub h3 {
  color: #0f172a !important;
}

[data-theme="light"] .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub p,
html.theme-light .detail-card-swiper .swiper-slide.is-horizontal-stack .detail-card-sub p {
  color: #64748b !important;
}

/* ==========================================================================
   DETAIL CONTENT RICH TEXT & INLINE STYLES OVERRIDES (LIGHT THEME)
   Fix dark boxes, unreadable text, and white-on-white tables/nested cards
   ========================================================================== */
[data-theme="light"] .detail-content [style*="background-color: #0" i],
[data-theme="light"] .detail-content [style*="background-color:#0" i],
[data-theme="light"] .detail-content [style*="background-color: #1" i],
[data-theme="light"] .detail-content [style*="background-color:#1" i],
[data-theme="light"] .detail-content [style*="background-color: #2" i],
[data-theme="light"] .detail-content [style*="background-color:#2" i],
[data-theme="light"] .detail-content [style*="background-color: #3" i],
[data-theme="light"] .detail-content [style*="background-color:#3" i],
[data-theme="light"] .detail-content [style*="background-color: #4" i],
[data-theme="light"] .detail-content [style*="background-color:#4" i],
[data-theme="light"] .detail-content [style*="background: #0" i],
[data-theme="light"] .detail-content [style*="background:#0" i],
[data-theme="light"] .detail-content [style*="background: #1" i],
[data-theme="light"] .detail-content [style*="background:#1" i],
[data-theme="light"] .detail-content [style*="background: #2" i],
[data-theme="light"] .detail-content [style*="background:#2" i],
[data-theme="light"] .detail-content [style*="background: #3" i],
[data-theme="light"] .detail-content [style*="background:#3" i],
[data-theme="light"] .detail-content [style*="background: #4" i],
[data-theme="light"] .detail-content [style*="background:#4" i],
html.theme-light .detail-content [style*="background-color: #0" i],
html.theme-light .detail-content [style*="background-color:#0" i],
html.theme-light .detail-content [style*="background-color: #1" i],
html.theme-light .detail-content [style*="background-color:#1" i],
html.theme-light .detail-content [style*="background-color: #2" i],
html.theme-light .detail-content [style*="background-color:#2" i],
html.theme-light .detail-content [style*="background-color: #3" i],
html.theme-light .detail-content [style*="background-color:#3" i],
html.theme-light .detail-content [style*="background-color: #4" i],
html.theme-light .detail-content [style*="background-color:#4" i],
html.theme-light .detail-content [style*="background: #0" i],
html.theme-light .detail-content [style*="background:#0" i],
html.theme-light .detail-content [style*="background: #1" i],
html.theme-light .detail-content [style*="background:#1" i],
html.theme-light .detail-content [style*="background: #2" i],
html.theme-light .detail-content [style*="background:#2" i],
html.theme-light .detail-content [style*="background: #3" i],
html.theme-light .detail-content [style*="background:#3" i],
html.theme-light .detail-content [style*="background: #4" i],
html.theme-light .detail-content [style*="background:#4" i] {
  background-color: #f8fafc !important;
  background-image: none !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Headings in Light theme detail-content */
[data-theme="light"] .detail-content h2[style*="background"],
[data-theme="light"] .detail-content h3[style*="background"],
html.theme-light .detail-content h2[style*="background"],
html.theme-light .detail-content h3[style*="background"] {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
  border-left: 5px solid #0284c7 !important;
}

/* Texts inside colored boxes */
[data-theme="light"] .detail-content div[style*="background"] p,
[data-theme="light"] .detail-content div[style*="background"] li,
[data-theme="light"] .detail-content div[style*="background"] span:not([style*="background"]):not([style*="linear-gradient"]),
html.theme-light .detail-content div[style*="background"] p,
html.theme-light .detail-content div[style*="background"] li,
html.theme-light .detail-content div[style*="background"] span:not([style*="background"]):not([style*="linear-gradient"]) {
  color: #334155 !important;
}

[data-theme="light"] .detail-content div[style*="background"] strong,
[data-theme="light"] .detail-content div[style*="background"] b,
[data-theme="light"] .detail-content div[style*="background"] h4,
[data-theme="light"] .detail-content div[style*="background"] h5,
html.theme-light .detail-content div[style*="background"] strong,
html.theme-light .detail-content div[style*="background"] b,
html.theme-light .detail-content div[style*="background"] h4,
html.theme-light .detail-content div[style*="background"] h5 {
  color: #0f172a !important;
}

/* Fix nested sub-boxes (e.g. Contact box inside Dark Card) */
[data-theme="light"] .detail-content div[style*="background"] div,
html.theme-light .detail-content div[style*="background"] div {
  color: #334155 !important;
}

[data-theme="light"] .detail-content div[style*="background"] div[style*="background-color: #fff" i],
[data-theme="light"] .detail-content div[style*="background"] div[style*="background-color:#fff" i],
[data-theme="light"] .detail-content div[style*="background"] div[style*="background: #fff" i],
[data-theme="light"] .detail-content div[style*="background"] div[style*="background:#fff" i],
html.theme-light .detail-content div[style*="background"] div[style*="background-color: #fff" i],
html.theme-light .detail-content div[style*="background"] div[style*="background-color:#fff" i],
html.theme-light .detail-content div[style*="background"] div[style*="background: #fff" i],
html.theme-light .detail-content div[style*="background"] div[style*="background:#fff" i] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .detail-content div[style*="background"] div[style*="background-color: #fff" i] *,
[data-theme="light"] .detail-content div[style*="background"] div[style*="background: #fff" i] *,
html.theme-light .detail-content div[style*="background"] div[style*="background-color: #fff" i] *,
html.theme-light .detail-content div[style*="background"] div[style*="background: #fff" i] * {
  color: #1e293b !important;
}

/* Tables in Light theme */
[data-theme="light"] .detail-content table,
html.theme-light .detail-content table {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .detail-content table thead,
[data-theme="light"] .detail-content table thead tr,
[data-theme="light"] .detail-content table th,
html.theme-light .detail-content table thead,
html.theme-light .detail-content table th {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .detail-content table tbody tr,
[data-theme="light"] .detail-content table td,
html.theme-light .detail-content table tbody tr,
html.theme-light .detail-content table td {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="light"] .detail-content table td[style*="color: #fb923c"],
[data-theme="light"] .detail-content table td strong,
[data-theme="light"] .detail-content table td b,
html.theme-light .detail-content table td[style*="color: #fb923c"] {
  color: #ea580c !important;
}

/* Hardcoded white text in general content */
[data-theme="light"] .detail-content p,
[data-theme="light"] .detail-content li,
[data-theme="light"] .detail-content td,
html.theme-light .detail-content p,
html.theme-light .detail-content li,
html.theme-light .detail-content td {
  color: #334155 !important;
}

[data-theme="light"] .detail-content [style*="color: #f1f5f9" i],
[data-theme="light"] .detail-content [style*="color:#f1f5f9" i],
[data-theme="light"] .detail-content [style*="color: #fff" i],
[data-theme="light"] .detail-content [style*="color:#fff" i],
[data-theme="light"] .detail-content [style*="color: white" i],
html.theme-light .detail-content [style*="color: #f1f5f9" i],
html.theme-light .detail-content [style*="color:#f1f5f9" i],
html.theme-light .detail-content [style*="color: #fff" i],
html.theme-light .detail-content [style*="color:#fff" i] {
  color: #334155 !important;
}

/* Explicitly preserve CTA buttons, Links, Badges and Gradients */
[data-theme="light"] .detail-content [style*="linear-gradient"],
[data-theme="light"] .detail-content [style*="linear-gradient"] *,
[data-theme="light"] .detail-content a[style*="background"],
[data-theme="light"] .detail-content a[style*="background"] *,
[data-theme="light"] .detail-content a[style*="background-color"],
[data-theme="light"] .detail-content a[style*="background-color"] *,
[data-theme="light"] .detail-content a.button,
[data-theme="light"] .detail-content a.button *,
html.theme-light .detail-content [style*="linear-gradient"],
html.theme-light .detail-content [style*="linear-gradient"] *,
html.theme-light .detail-content a[style*="background"],
html.theme-light .detail-content a[style*="background"] *,
html.theme-light .detail-content a[style*="background-color"],
html.theme-light .detail-content a[style*="background-color"] * {
  color: #ffffff !important;
}

/* Preserve Corner Ribbon (LỰA CHỌN badge) */
[data-theme="light"] .detail-content [style*="transform"][style*="rotate"],
[data-theme="light"] .detail-content [style*="transform"][style*="rotate"] * {
  color: #ffffff !important;
}