/* Root Variables */
:root,
[class*="elementor-kit-"],
body[class*="elementor-kit-"] {
  --e-global-color-primary: #672D8B !important;
  --e-global-color-primary-dark: #5A2A78 !important;
  --e-global-color-secondary: #54595F !important;
  --e-global-color-text: #2D2D2D !important;
  --e-global-color-text-muted: #54595F !important;  /* Thay vì excerpt */
  --e-global-color-accent: #672D8B !important;
  
  --e-global-color-link: #672D8B !important;  /* Thay vì text-dancing */
  --e-global-color-link-hover: #8B3FB3 !important;  /* Tím nhạt hơn */

  --e-global-color-background: #f9f9f9 !important;
  --e-global-color-background-alt: #FFFFFF !important;
  --e-global-color-background-hover: #f0f7ff !important;
  --e-global-color-background-accent: rgb(239, 250, 255) !important;

  --dots-normal-color: var(--e-global-color-accent) !important;
  --dots-hover-color: var(--e-global-color-accent) !important; /* Màu hover cho pagination bullets */
  
  --e-global-color-footer-background: var(--e-global-color-background) !important;
  --e-global-color-footer-group-title-background: var(--e-global-color-accent) !important;
  --e-global-color-footer-item: var(--e-global-color-text) !important;
  --e-global-color-footer-group-title: #fff !important;

  --e-global-color-menu-background: var(--e-global-color-background) !important;
  --e-global-color-menu-item: var(--e-global-color-text) !important;
  --e-global-color-menu-item-hover: var(--e-global-color-primary) !important;
  --e-global-color-menu-item-active: var(--e-global-color-primary) !important;
  --e-global-color-menu-item-active-after: var(--e-global-color-accent) !important;
  --e-global-color-menu-toggle: var(--e-global-color-primary) !important;
  --e-global-color-menu-toggle-fill: #fff !important;

  /* Thêm màu trạng thái */
  --e-global-color-success: #10B981 !important;
  --e-global-color-error: #EF4444 !important;
  --e-global-color-warning: #F59E0B !important;
}

.tele-section-footer .tele-zalo svg {
  fill: var(--e-global-color-accent) !important;
}
.tele-section-footer .tele-facebook svg {
  fill: var(--e-global-color-accent) !important;
}
.tele-section-footer .tele-fb-messenger svg {
  fill: var(--e-global-color-accent) !important;
}

@media (max-width: 767px) {    
  :root,
  [class*="elementor-kit-"],
  body[class*="elementor-kit-"] {
    --e-global-color-menu-item: var(--e-global-color-text) !important;
    --e-global-color-menu-item-hover: var(--e-global-color-primary) !important;
    --e-global-color-menu-item-active: var(--e-global-color-primary) !important;
  }
}