/* assets/css/theme_overrides.css */
/* This file contains more aggressive general overrides and generic page content overrides 
   to ensure dark theme consistency across pages with inline styles or local style blocks. */

/* === AGGRESSIVE GENERAL OVERRIDES === */
html.dark-theme body {
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
    /* Consolidate page-specific CSS variable overrides here for broad availability */
    /* These might also be in the main theme.css, but repeating them here ensures they are considered with high priority if this file is loaded last */
    --eco-primary-color: #28a745;
    --eco-primary-light: #5cb85c;
    --eco-primary-lighter: #90d990;
    --eco-bg-light: #222324;
    --eco-bg-lighter: #2a2b2c;
}

/* Universal reset for backgrounds, borders, shadows. Text color handled more specifically. */
html.dark-theme body * {
    background-color: transparent !important;
    box-shadow: none !important;
    /* border-color will be handled by ::before/::after in main theme.css or specific component rules */
}

html.dark-theme body .page-title-section {
    background: var(--header-bg-color) !important;
}

/* === Broad Text Color Overrides === */
html.dark-theme body p,
html.dark-theme body li,
html.dark-theme body dt,
html.dark-theme body dd,
html.dark-theme body label,
html.dark-theme body legend,
html.dark-theme body h1,
html.dark-theme body h2,
html.dark-theme body h3,
html.dark-theme body h4,
html.dark-theme body h5,
html.dark-theme body h6,
html.dark-theme body figcaption,
html.dark-theme body blockquote,
html.dark-theme body .text-content,
html.dark-theme body .description,
html.dark-theme body .caption,
html.dark-theme body .title,
html.dark-theme body .subtitle,
html.dark-theme body address,
html.dark-theme body article,
html.dark-theme body aside,
html.dark-theme body details,
html.dark-theme body summary,
html.dark-theme body footer:not(#emc-main-footer) span,
html.dark-theme body header:not(#emc-global-header) span,
html.dark-theme body span:not([class*="icon"]):not([class*="fa-"]):not([class*="fas"]):not([class*="far"]):not([class*="fal"]):not([class*="fab"]):not(.dot):not(.badge):not(.label):not(.tag):not([class*="slick"]):not([class*="carousel"]):not([aria-hidden="true"]):not([class*="progress"]):not([class*="chart"]),
html.dark-theme body div:not([class*="icon"]):not([class*="logo"]):not([class*="fa-"]):not([class*="fas"]):not([class*="far"]):not([class*="fal"]):not([class*="fab"]):not([class*="slick"]):not([class*="slider"]):not([role]):not([class*="modal"]):not([class*="tooltip"]):not([class*="progress"]):not([class*="chart"]):not([class*="video"]):not([class*="map"]):not([class*="carousel"]):not([class*="tab-pane"]):not([class*="card-img"]):not([class*="img-"]):not([style*="background-image"]):not([style*="background:"]):not([class*="container"]):not([class*="row"]):not([class*="col-"]) {
    color: var(--text-color) !important;
}

html.dark-theme body th,
html.dark-theme body td {
    color: var(--text-color) !important;
}

html.dark-theme body small,
html.dark-theme body .text-muted {
    color: var(--text-color-secondary) !important;
}

html.dark-theme body strong,
html.dark-theme body b {
    color: var(--text-color) !important;
}

html.dark-theme body hr {
    border-top-color: var(--border-color) !important;
    border-width: 1px !important;
    opacity: 0.25 !important;
}

/* === GENERIC PAGE CONTENT OVERRIDES === */
html.dark-theme body section[style*="background: #f8fafc"],
html.dark-theme body div[style*="background: #f8fafc"],
html.dark-theme body section[style*="background: #ffffff"],
html.dark-theme body div[style*="background: #ffffff"],
html.dark-theme body section[style*="background-color: #fff"],
html.dark-theme body div[style*="background-color: #fff"],
html.dark-theme body section[style*="background: #f5fcf6"],
html.dark-theme body div[style*="background: #f5fcf6"],
html.dark-theme body section[style*="background-color: #f8fff8"],
html.dark-theme body div[style*="background-color: #f8fff8"],
html.dark-theme body section[style*="background: linear-gradient(135deg, #e0ffe8 0%, #f5fcf6 100%)"],
html.dark-theme body div[style*="background: linear-gradient(135deg, #e0ffe8 0%, #f5fcf6 100%)"],
html.dark-theme body section[style*="background: linear-gradient(135deg, #f8fff8 0%, #eaffea 100%)"],
html.dark-theme body div[style*="background: linear-gradient(135deg, #f8fff8 0%, #eaffea 100%)"],
html.dark-theme body section[style*="background: #f0fff5"],
html.dark-theme body div[style*="background: #f0fff5"],
html.dark-theme body section[style*="background-color: #f0fff5"],
html.dark-theme body div[style*="background-color: #f0fff5"] {
    background-color: var(--background-color) !important;
    background-image: none !important;
}

html.dark-theme body div[style*="background: #f8fff8"],
html.dark-theme body div[style*="background: #f0f9f1"],
html.dark-theme body div.card[style*="background: #f8fff8"] {
    background-color: var(--card-bg-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 5px var(--shadow-color) !important;
    background-image: none !important;
}

html.dark-theme body *[style*="color: #222"],
html.dark-theme body *[style*="color: #333"],
html.dark-theme body *[style*="color: #000"],
html.dark-theme body *[style*="color: #1a1a1a"],
html.dark-theme body *[style*="color: black"],
html.dark-theme body *[style*="color:initial"] {
    color: var(--text-color) !important;
}

html.dark-theme body *[style*="color: #555"],
html.dark-theme body *[style*="color: #666"],
html.dark-theme body *[style*="color: #777"],
html.dark-theme body *[style*="color: #7b8ca0"],
html.dark-theme body *[style*="color: #6c757d"] {
    color: var(--text-color-secondary) !important;
}

html.dark-theme body *[style*="color: #086924"],
html.dark-theme body *[style*="color: #28a745"],
html.dark-theme body *[style*="color: #198754"],
html.dark-theme body *[style*="color: #43b26c"] {
    color: var(--eco-primary-light) !important;
}

/* Neutralize inline gradients - these are often page specific and hard to theme generically */
html.dark-theme body *[style*="background: linear-gradient"],
html.dark-theme body *[style*="background-image: linear-gradient"] {
    background-image: none !important;
    background-color: var(--card-bg-color) !important;
    /* Default to a card background or adjust as needed */
}

html.dark-theme body *[style*="background: radial-gradient"],
html.dark-theme body *[style*="background-image: radial-gradient"] {
    background-image: none !important;
    background-color: var(--card-bg-color) !important;
}

/* Text gradients (if any are used and need specific dark theme versions) */
html.dark-theme body span[style*="-webkit-text-fill-color: transparent"][style*="background: linear-gradient"] {
    background: linear-gradient(90deg, var(--eco-primary-light) 0%, var(--eco-primary-lighter) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* === News Page Specifics (and similar patterns) === */

/* Pagination Overrides from news.php */
html.dark-theme body a.page-link[style*="background: #a7fb6c"][style*="color: #086924"],
html.dark-theme body a.page-link[style*="background: #fff"][style*="color: #086924"] {
    background-color: var(--button-secondary-bg-color) !important;
    color: var(--button-secondary-text-color) !important;
}

html.dark-theme body a.page-link.active[style*="background: #43b26c"][style*="color: #fff"],
html.dark-theme body a.page-link[style*="background: #43b26c"][style*="color: #fff"]

/* For cases where .active might be missing but style matches */
    {
    background-color: var(--button-primary-bg-color) !important;
    color: var(--button-primary-text-color) !important;
    border-color: var(--button-primary-bg-color) !important;
}

/* Form input styles from news.php filter bar */
html.dark-theme body select[style*="border: 1px solid #a7fb6c"][style*="color: #086924"],
html.dark-theme body input[type="text"][style*="border: 1px solid #a7fb6c"][style*="color: #086924"] {
    background-color: var(--input-bg-color) !important;
    color: var(--input-text-color) !important;
    border-color: var(--input-border-color) !important;
}

html.dark-theme body select[style*="border: 1px solid #a7fb6c"][style*="color: #086924"] option {
    background-color: var(--input-bg-color) !important;
    /* For dropdown options */
    color: var(--input-text-color) !important;
}

/* Icon color override for warning/error icons */
html.dark-theme body i[style*="color: #ff5722"] {
    color: var(--warning-color) !important;
    /* Assuming --warning-color is defined in theme.css, e.g., a brighter orange/yellow */
}

/* === Contact Page Specific Overrides (pages/contact.php) === */

/* Page Banner */
html.dark-theme body .page-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/contact-banner.jpg') !important;
    /* Add dark overlay */
    color: var(--text-color-light) !important;
    /* Light text on dark banner */
}

html.dark-theme body .page-banner .banner-overlay {
    background: linear-gradient(135deg, #0d4b2e 0%, #5ac694 100%) !important;
    /* Remove original overlay if we apply it directly to page-banner */
}

html.dark-theme body .page-banner h1,
html.dark-theme body .page-banner p {
    color: var(--text-color-light) !important;
    /* Ensure text on banner is light */
}

/* Contact Form and Info Wrappers */
html.dark-theme body .contact-section .contact-form-wrapper,
html.dark-theme body .contact-section .contact-info-wrapper {
    background: var(--card-bg-color) !important;
    box-shadow: 0 5px 20px var(--shadow-color) !important;
    border: 1px solid var(--border-color) !important;
    /* Add border for better definition */
}

/* Headers within wrappers */
html.dark-theme body .contact-section .form-header,
html.dark-theme body .contact-section .info-header {
    border-bottom-color: var(--border-color) !important;
}

html.dark-theme body .contact-section .form-header h3,
html.dark-theme body .contact-section .info-header h3 {
    color: var(--heading-color) !important;
}

/* Input field focus */
html.dark-theme body .contact-section .input-field input:focus,
html.dark-theme body .contact-section .input-field textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-color-faded) !important;
    /* Assuming --primary-color-faded is like rgba(var(--primary-rgb), 0.25) */
}

/* Info Icons */
html.dark-theme body .contact-section .info-icon {
    background: var(--background-color-light) !important;
    color: var(--primary-color) !important;
}

/* Info Content text & links */
html.dark-theme body .contact-section .info-content h4 {
    color: var(--heading-color) !important;
}

html.dark-theme body .contact-section .info-content p {
    color: var(--text-color-secondary) !important;
}

html.dark-theme body .contact-section .info-content a {
    color: var(--link-color) !important;
}

html.dark-theme body .contact-section .info-content a:hover {
    color: var(--link-hover-color) !important;
}

/* Address potential hardcoded header styles from contact.php <style> block */
/* These are very specific and might need adjustment based on actual header structure from includes/header.php */
html.dark-theme body #emc-global-header.scrolled {
    /* Let main theme.css handle this, but if contact.php's style is too specific, we might need to re-declare */
    /* background-color: var(--header-bg-scrolled, var(--background-color-semi-transparent)) !important; */
    background-color: var(--header-bg-color) !important;
    box-shadow: var(--header-shadow-scrolled, 0 2px 10px var(--shadow-color)) !important;
}

/* html.dark-theme body #emc-global-header.scrolled .emc-global-header-nav-link {
    color: var(--header-link-color-scrolled, var(--link-color)) !important;
} */

/* Required field asterisk color */
html.dark-theme body .contact-section .required {
    color: var(--danger-color, #ff6b6b) !important;
    /* Use a theme variable or a brighter red */
}

/* === Home Page Section Background Overrides (pages/home.php) === */

/* Target sections or divs that might be using problematic --eco- variables or direct light hex codes from home.php's <style> blocks */
html.dark-theme body section,
html.dark-theme body div[class*="section"],
/* Common naming for sections */
html.dark-theme body div[class*="wrapper"],
/* Common naming for wrappers */
html.dark-theme body div[class*="container"]>section,
/* Sections inside containers */
html.dark-theme body div[class*="page-content"]

/* Common page content wrapper */
    {
    /* Attempt to override backgrounds that might be set using --eco-bg-light or --eco-bg-lighter from home.php */
    --eco-bg-light: var(--background-color-darker, #1e1e1e) !important;
    /* Map to a slightly darker theme background */
    --eco-bg-lighter: var(--background-color, #121212) !important;
    /* Map to main theme background */
}

/* Specifically target elements that might have the problematic gradients from home.php's body or .made-by-emc styles */
/* This is broad, assuming these classes/tags might be used for full-width colored sections */
html.dark-theme body section[style*="linear-gradient(135deg, #e0ffe8 0%, #f5fcf6 100%)"],
html.dark-theme body div[style*="linear-gradient(135deg, #e0ffe8 0%, #f5fcf6 100%)"],
html.dark-theme body section[style*="linear-gradient(135deg, #f8fafc 0%, #e8f5e9 100%)"],
html.dark-theme body div[style*="linear-gradient(135deg, #f8fafc 0%, #e8f5e9 100%)"],
html.dark-theme body section.made-by-emc,
/* If class is used */
html.dark-theme body section.vision-strategy-section

/* If class is used */
    {
    background-image: none !important;
    background-color: var(--background-color) !important;
}

/* Override for text that might be set to #333 or #555 by home.php's local styles on a light background */
html.dark-theme body section h1,
html.dark-theme body section h2,
html.dark-theme body section h3,
html.dark-theme body section h4,
html.dark-theme body section h5,
html.dark-theme body section h6,
html.dark-theme body section p,
html.dark-theme body section span,
html.dark-theme body section li,
html.dark-theme body div[class*="section"] h1,
html.dark-theme body div[class*="section"] h2,
html.dark-theme body div[class*="section"] h3,
html.dark-theme body div[class*="section"] h4,
html.dark-theme body div[class*="section"] h5,
html.dark-theme body div[class*="section"] h6,
html.dark-theme body div[class*="section"] p,
html.dark-theme body div[class*="section"] span,
html.dark-theme body div[class*="section"] li {
    /* Check if parent has a forced light background due to local styles, then force dark text */
    /* This is complex; simpler to ensure backgrounds are dark first. */
    /* For now, rely on the global text color overrides, this is a placeholder for more complex scenarios */
}

/* Override the :root --eco- variables for critical background colors if they are used directly by elements */
/* This is very aggressive and might have unintended side effects if these variables are used for more than just large backgrounds */
html.dark-theme {
    --eco-bg-light: var(--background-color-darker, #1e1e1e) !important;
    --eco-bg-lighter: var(--background-color, #121212) !important;
    --eco-primary-color: #28a745 !important;
    /* Already defined in body, but reinforcing here */
    --eco-primary-light: #5cb85c !important;
    /* Already defined in body, but reinforcing here */
}

/* Ensure the direct body gradient from home.php is overridden. */
/* This rule might be redundant if html.dark-theme body already sets background-color !important, but being explicit. */
html.dark-theme body {
    background-image: none !important;
    /* Remove any lingering body gradients from local styles */
    background-color: var(--background-color) !important;
    /* Reaffirm dark background */
}

/* === About Page - Products/Services Section (pages/about.php emc-products-section) === */

/* Ensure the section itself has a proper background if it was missed */
html.dark-theme body .emc-products-section {
    background-color: var(--background-color) !important;
    /* Or var(--background-color-darker) if a slight contrast is needed */
    /* If it had a light gradient image, remove it */
    background-image: none !important;
}

/* Title overrides */
html.dark-theme body .emc-products-section .emc-ps-title span[style*="#1a3c1a"] {
    color: var(--text-color) !important;
}

html.dark-theme body .emc-products-section .emc-ps-title span.gradient-text[style*="background: linear-gradient(90deg, #a7fb6c 0%, #43b26c 100%)"] {
    background: linear-gradient(90deg, var(--eco-primary-light, #5cb85c) 0%, var(--eco-primary-lighter, #90d990) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Description text */
html.dark-theme body .emc-products-section .emc-ps-desc {
    color: var(--text-color-secondary) !important;
}

/* Feature items */
html.dark-theme body .emc-products-section .emc-ps-feature {
    color: var(--text-color) !important;
    /* Assuming the feature items themselves might have a light background if they are distinct boxes */
    /* background-color: var(--card-bg-color) !important; */
    /* Uncomment if they are boxed */
    /* border: 1px solid var(--border-color) !important; */
    /* Uncomment if they are boxed */
}

html.dark-theme body .emc-products-section .emc-ps-feature .emc-ps-feature-circle {
    background-color: var(--primary-color) !important;
    /* Darker circle background */
    color: var(--text-color-light) !important;
    /* Light text for number */
    border-color: var(--primary-color) !important;
    /* Ensure border matches */
}

/* Bubbles on the right - general approach, may need refinement based on actual CSS */
html.dark-theme body .emc-products-section .emc-ps-bubble {
    background-color: var(--card-bg-color) !important;
    /* Example: make bubbles like cards */
    /* If they use gradients, try to switch to solid or dark-theme gradients */
    background-image: none !important;
    /* Remove light gradients by default */
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    /* Add a border */
    box-shadow: var(--shadow-color) !important;
}

html.dark-theme body .emc-products-section .emc-ps-bubble .emc-ps-bubble-label {
    color: var(--text-color) !important;
}

/* Associated bubble elements - make them neutral or theme-aware */
html.dark-theme body .emc-products-section .emc-ps-bubble-rect span {
    /* This might be a border or accent, try to make it theme-aware */
    background-color: var(--border-color) !important;
}

html.dark-theme body .emc-products-section .emc-ps-bubble-outline {
    /* border-color: var(--border-color) !important; */
    /* If it has a border */
}

html.dark-theme body .emc-products-section .emc-ps-bubble-shadow {
    display: none !important;
    /* Hide existing light shadows, new shadow on bubble itself */
}

/* Decorative dots - try to make them less prominent or theme-aware */
html.dark-theme body .emc-products-section .emc-ps-dot,
html.dark-theme body .emc-products-section .emc-ps-bubble-dot {
    background-color: var(--text-color-secondary) !important;
    /* Example: make them a muted color */
    opacity: 0.5;
}

/* === About Page - Hero Section (.emc-hero-modern-green) === */
html.dark-theme body section.emc-hero-modern-green {
    background-color: var(--background-color-darker, #1a1a1a) !important;
    /* Dark background, allows blobs to show */
    /* If blobs are CSS pseudo-elements on this section, ensure they use theme variables or are adjusted */
}

html.dark-theme body .emc-hero-modern-green .emc-hero-modern-label {
    color: var(--eco-primary-light, #5cb85c) !important;
    /* Brighter green label */
}

html.dark-theme body .emc-hero-modern-green .emc-hero-modern-title {
    color: var(--text-color-light, #f5f5f5) !important;
    /* Main title text white */
}

/* Highlighted text in title and description - original light green gradient is good for dark mode */
html.dark-theme body .emc-hero-modern-green .emc-hero-modern-title .highlight,
html.dark-theme body .emc-hero-modern-green .emc-hero-modern-desc.simple .desc-gradient {
    background: linear-gradient(90deg, var(--eco-primary-lighter, #90d990) 0%, var(--eco-primary-light, #5cb85c) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.dark-theme body .emc-hero-modern-green .emc-hero-modern-desc.simple {
    color: var(--text-color-light, #e0e0e0) !important;
    /* Description text light */
}

html.dark-theme body .emc-hero-modern-green .emc-hero-btn.secondary {
    background: var(--button-secondary-bg-color, #f0f0f0) !important;
    /* Light background */
    color: var(--button-secondary-text-color-dark, #111312) !important;
    /* Dark text */
    border-color: var(--button-secondary-bg-color, #f0f0f0) !important;
    /* Border same as background or slightly darker */
}

html.dark-theme body .emc-hero-modern-green .emc-hero-btn.secondary:hover {
    background: #e0e0e0 !important;
    color: #ffffff !important;
    border-color: #e0e0e0 !important;
    filter: brightness(1.08) !important;
}

/* === About Page - Awards Journey Timeline (awards-timeline-modern) === */
html.dark-theme body section.awards-timeline-modern {
    background: var(--background-color-darker, #18191a) !important;
    /* Darker background for the section */
}

/* Title */
html.dark-theme body section.awards-timeline-modern .section-title span[style*="#1a3c1a"] {
    color: var(--heading-color) !important;
}

html.dark-theme body section.awards-timeline-modern .section-title span.gradient-text {
    /* Assuming .gradient-text is styled globally or in about.php CSS. Re-apply with dark theme vars */
    background: linear-gradient(90deg, var(--eco-primary-light, #5cb85c) 0%, var(--eco-primary-lighter, #90d990) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Timeline Track */
html.dark-theme body section.awards-timeline-modern .timeline-horizontal-track {
    background: linear-gradient(90deg, var(--primary-color-dark, #1e6a38) 0%, var(--primary-color, #28a745) 100%) !important;
    box-shadow: 0 2px 16px rgba(var(--primary-rgb, 40, 167, 69), 0.2) !important;
}

html.dark-theme body section.awards-timeline-modern .timeline-horizontal-track::before {
    background: rgba(var(--primary-rgb, 40, 167, 69), 0.15) !important;
}

/* Timeline Item general appearance */
html.dark-theme body section.awards-timeline-modern .timeline-horizontal-item {
    /* If items have a background, make it card-like */
    /* background-color: var(--card-bg-color); */
}

/* Year */
html.dark-theme body section.awards-timeline-modern .timeline-horizontal-year {
    color: var(--text-color-light, #f0f0f0) !important;
}

/* Dot on the line */
html.dark-theme body section.awards-timeline-modern .timeline-horizontal-dot {
    background-color: var(--background-color-lighter, #333) !important;
    /* Darker dot */
    border-color: var(--primary-color, #28a745) !important;
    /* Brighter border */
}

/* Icon SVG - targeting the circle and strokes specifically */
html.dark-theme body section.awards-timeline-modern .timeline-horizontal-icon svg circle[fill="#fff"] {
    fill: var(--card-bg-color, #2a2b2c) !important;
    /* Dark fill for the circle part of icon */
}

html.dark-theme body section.awards-timeline-modern .timeline-horizontal-icon svg path[stroke="#43b26c"] {
    stroke: var(--eco-primary-light, #5cb85c) !important;
}

html.dark-theme body section.awards-timeline-modern .timeline-horizontal-icon svg path[stroke="#fbc02d"] {
    stroke: var(--warning-color-light, #ffd966) !important;
    /* Lighter warning yellow/gold */
}

html.dark-theme body section.awards-timeline-modern .timeline-horizontal-icon svg path[stroke="#bdbdbd"] {
    stroke: var(--text-color-secondary, #888) !important;
}

/* Description Box / Card */
html.dark-theme body section {
    background-color: var(--card-bg-color) !important;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

html.dark-theme body section.awards-timeline-modern .timeline-horizontal-desc {
    color: var(--text-color-secondary) !important;
}

html.dark-theme body section.awards-timeline-modern .timeline-horizontal-desc a.award-link {
    color: var(--link-color) !important;
}

html.dark-theme body section.awards-timeline-modern .timeline-horizontal-desc a.award-link:hover {
    color: var(--link-hover-color) !important;
}

html.dark-theme body .hero-bg-soft {
    background: var(--hero-bg-soft)
}

html.dark-theme body .emc-hero-modern-green .emc-hero-btn.secondary:hover {
    background: #e0e0e0 !important;
    color: #17803a !important;
    border-color: #e0e0e0 !important;
    filter: brightness(1.08) !important;
}

/* Card đội ngũ lãnh đạo: tên và vai trò nổi bật ở dark mode */
html.dark-theme body .leader-card-custom .leader-info-custom h3.gradient-text {
    background: linear-gradient(90deg, #a7fb6c 0%, #43b26c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    text-shadow: 0 2px 12px #1a1a1a, 0 1px 0 #43b26c99 !important;
}

html.dark-theme body .leader-card-custom .leader-info-custom h3.gradient-text,
html.dark-theme body .leader-card-custom:hover .leader-info-custom h3.gradient-text {
    color: unset !important;
}

html.dark-theme body .leader-card-custom .leader-role-badge {
    background: linear-gradient(90deg, #43b26c 0%, #a7fb6c 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px #43b26c55 !important;
    border: none !important;
}

html.dark-theme body .leader-card-custom:hover .leader-role-badge {
    background: linear-gradient(90deg, #a7fb6c 0%, #43b26c 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px #a7fb6c !important;
}

/* === Investor Policy Section Dark Theme - Flat Background, No Border === */
html.dark-theme body .policy-section {
    background: none !important;
    color: var(--text-color) !important;
}

html.dark-theme body .policy-title,
html.dark-theme body .policy-title h3 {
    color: var(--text-color) !important;
}

html.dark-theme body .policy-title span,
html.dark-theme body .policy-title .gradient-text {
    background: linear-gradient(90deg, var(--eco-primary-light, #5cb85c) 0%, var(--eco-primary-lighter, #90d990) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    color: unset !important;
}

html.dark-theme body .policy-card,
html.dark-theme body .policy-card-inner {
    padding-top: 30px;
    background: #18191a !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-theme body .policy-card-border,
html.dark-theme body .policy-card-orange {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html.dark-theme body .policy-card {
    background: var(--card-bg-color, #181a1b) !important;
    background-color: var(--card-bg-color, #181a1b) !important;
    border: 1.5px solid var(--border-color, #333) !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

html.dark-theme body .policy-card-inner {
    background: transparent !important;
    color: var(--text-color) !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-theme body .policy-card-content {
    background: transparent !important;
    color: var(--text-color) !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-theme body .policy-card-inner h4 {
    color: var(--text-color) !important;
}

html.dark-theme body .policy-card-inner p {
    color: var(--text-color-secondary) !important;
}

html.dark-theme body .policy-card-border,
html.dark-theme body .policy-card-orange {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

html.dark-theme body .policy-icon {
    background: var(--background-color-light, #232a2c) !important;
    color: var(--eco-primary-light, #5cb85c) !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-theme body .policy-cta {
    background: var(--eco-primary-light, #5cb85c) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
}

/* === Global Header Search Input Dark Theme === */
html.dark-theme body .emc-global-header-search-form {
    border: none !important;
}

html.dark-theme body .emc-global-header-search-input {
    background-color: var(--input-bg-color, #2a2b2c) !important;
    color: var(--text-color) !important;
    border: 0 solid var(--border-color, #333) !important;
    border-radius: 32px 0 0 32px !important;
    transition: all 0.3s ease !important;
}

html.dark-theme body .emc-global-header-search-input:focus {
    border-color: #74cda3 !important;
    box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.2) !important;
    outline: none !important;
}

html.dark-theme body .emc-global-header-search-input::placeholder {
    color: var(--text-color-secondary, #888) !important;
}

/* === Latest News Item Dark Theme === */
html.dark-theme body .news-section .latest-news-item,
html.dark-theme body .news-container .latest-news-item,
html.dark-theme body .news-wrapper .latest-news-item,
html.dark-theme body .news-grid .latest-news-item,
html.dark-theme body .news-list .latest-news-item,
html.dark-theme body .news-detail .latest-news-item,
html.dark-theme body .news-related .latest-news-item,
html.dark-theme body .news-sidebar .latest-news-item,
html.dark-theme body .news-main .latest-news-item,
html.dark-theme body .news-content .latest-news-item {
    border: none !important;
    background-color: var(--card-bg-color, #2a2b2c) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

html.dark-theme body .news-section .latest-news-item:hover,
html.dark-theme body .news-container .latest-news-item:hover,
html.dark-theme body .news-wrapper .latest-news-item:hover,
html.dark-theme body .news-grid .latest-news-item:hover,
html.dark-theme body .news-list .latest-news-item:hover,
html.dark-theme body .news-detail .latest-news-item:hover,
html.dark-theme body .news-related .latest-news-item:hover,
html.dark-theme body .news-sidebar .latest-news-item:hover,
html.dark-theme body .news-main .latest-news-item:hover,
html.dark-theme body .news-content .latest-news-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* === Improved Button Styling for Dark Mode === */
html.dark-theme body .btn,
html.dark-theme body button,
html.dark-theme body .button,
html.dark-theme body [class*="btn-"],
html.dark-theme body [class*="button-"] {
    transition: all 0.3s ease !important;
}

/* Primary Buttons */
html.dark-theme body .btn-primary,
html.dark-theme body .button-primary,
html.dark-theme body [class*="btn-primary"],
html.dark-theme body [class*="button-primary"] {
    background: linear-gradient(135deg, var(--eco-primary-light, #5cb85c) 0%, var(--eco-primary-lighter, #90d990) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(92, 184, 92, 0.2) !important;
}

html.dark-theme body .btn-primary:hover,
html.dark-theme body .button-primary:hover,
html.dark-theme body [class*="btn-primary"]:hover,
html.dark-theme body [class*="button-primary"]:hover {
    background: linear-gradient(135deg, var(--eco-primary-lighter, #90d990) 0%, var(--eco-primary-light, #5cb85c) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.3) !important;
}

/* Secondary Buttons */
html.dark-theme body .btn-secondary,
html.dark-theme body .button-secondary,
html.dark-theme body [class*="btn-secondary"],
html.dark-theme body [class*="button-secondary"] {
    background: var(--background-color-light, #2a2b2c) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

html.dark-theme body .btn-secondary:hover,
html.dark-theme body .button-secondary:hover,
html.dark-theme body [class*="btn-secondary"]:hover,
html.dark-theme body [class*="button-secondary"]:hover {
    background: var(--background-color-lighter, #333) !important;
    color: var(--eco-primary-light) !important;
    border-color: var(--eco-primary-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Outline Buttons */
html.dark-theme body .btn-outline,
html.dark-theme body .button-outline,
html.dark-theme body [class*="btn-outline"],
html.dark-theme body [class*="button-outline"] {
    background: transparent !important;
    color: var(--eco-primary-light) !important;
    border: 2px solid var(--eco-primary-light) !important;
    box-shadow: none !important;
}

html.dark-theme body .btn-outline:hover,
html.dark-theme body .button-outline:hover,
html.dark-theme body [class*="btn-outline"]:hover,
html.dark-theme body [class*="button-outline"]:hover {
    background: var(--eco-primary-light) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(92, 184, 92, 0.2) !important;
}

/* Text Buttons */
html.dark-theme body .btn-text,
html.dark-theme body .button-text,
html.dark-theme body [class*="btn-text"],
html.dark-theme body [class*="button-text"] {
    background: transparent !important;
    color: var(--eco-primary-light) !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-theme body .btn-text:hover,
html.dark-theme body .button-text:hover,
html.dark-theme body [class*="btn-text"]:hover,
html.dark-theme body [class*="button-text"]:hover {
    color: var(--eco-primary-lighter) !important;
    transform: translateY(-1px) !important;
}

/* Disabled Buttons */
html.dark-theme body .btn:disabled,
html.dark-theme body button:disabled,
html.dark-theme body .button:disabled,
html.dark-theme body [class*="btn-"]:disabled,
html.dark-theme body [class*="button-"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Button with Icons */
html.dark-theme body .btn i,
html.dark-theme body button i,
html.dark-theme body .button i,
html.dark-theme body [class*="btn-"] i,
html.dark-theme body [class*="button-"] i {
    transition: transform 0.3s ease !important;
}

html.dark-theme body .btn:hover i,
html.dark-theme body button:hover i,
html.dark-theme body .button:hover i,
html.dark-theme body [class*="btn-"]:hover i,
html.dark-theme body [class*="button-"]:hover i {
    transform: translateX(3px) !important;
}

/* Button Groups */
html.dark-theme body .btn-group,
html.dark-theme body .button-group {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

html.dark-theme body .btn-group .btn,
html.dark-theme body .button-group .button {
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Floating Action Buttons */
html.dark-theme body .btn-floating,
html.dark-theme body .button-floating {
    background: linear-gradient(135deg, var(--eco-primary-light) 0%, var(--eco-primary-lighter) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(92, 184, 92, 0.3) !important;
    border-radius: 50% !important;
}

html.dark-theme body .btn-floating:hover,
html.dark-theme body .button-floating:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.4) !important;
}

/* === Leadership Cards Text Colors === */
/* Light Mode */
body .leader-card-custom .leader-info-custom h3.gradient-text {
    background: linear-gradient(90deg, #17803a 0%, #43b26c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    text-shadow: 0 2px 12px rgba(67, 178, 108, 0.2) !important;
}

body .leader-card-custom .leader-role-badge {
    background: linear-gradient(90deg, #43b26c 0%, #a7fb6c 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(67, 178, 108, 0.2) !important;
    border: none !important;
}

body .leader-card-custom:hover .leader-info-custom h3.gradient-text {
    background: linear-gradient(90deg, #43b26c 0%, #a7fb6c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    text-shadow: 0 2px 12px rgba(167, 251, 108, 0.3) !important;
}

body .leader-card-custom:hover .leader-role-badge {
    background: linear-gradient(90deg, #a7fb6c 0%, #43b26c 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(167, 251, 108, 0.3) !important;
}

/* Dark Mode */
html.dark-theme body .leader-card-custom .leader-info-custom h3.gradient-text {
    background: linear-gradient(90deg, #a7fb6c 0%, #43b26c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    text-shadow: 0 2px 12px rgba(167, 251, 108, 0.2) !important;
}

html.dark-theme body .leader-card-custom .leader-role-badge {
    background: linear-gradient(90deg, #43b26c 0%, #a7fb6c 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(67, 178, 108, 0.3) !important;
    border: none !important;
}

html.dark-theme body .leader-card-custom:hover .leader-info-custom h3.gradient-text {
    background: linear-gradient(90deg, #a7fb6c 0%, #43b26c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    text-shadow: 0 2px 12px rgba(167, 251, 108, 0.4) !important;
}

html.dark-theme body .leader-card-custom:hover .leader-role-badge {
    background: linear-gradient(90deg, #a7fb6c 0%, #43b26c 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(167, 251, 108, 0.4) !important;
}

/* Card Background and Border */
body .leader-card-custom {
    background: #fff !important;
    border: 1px solid rgba(67, 178, 108, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html.dark-theme body .leader-card-custom {
    background: #1a1a1a !important;
    border: 1px solid rgba(167, 251, 108, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Card Hover Effects */
body .leader-card-custom:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 30px rgba(67, 178, 108, 0.15) !important;
}

html.dark-theme body .leader-card-custom:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 30px rgba(167, 251, 108, 0.15) !important;
}