/**
 * HAYAKAWA ELECTRONICS VIETNAM
 * Theme: Corporate Teal 2026
 * 
 * Kết hợp xu hướng thiết kế 2026 với tiêu chuẩn WCAG 2.1
 * Đảm bảo độ tương phản tối thiểu 4.5:1 cho text thường
 */

:root {
    /* ============================================
       CORPORATE TEAL THEME 2026
       - Phong cách: Minimalist & Calm
       - Màu chủ đạo: Teal (hiện đại, bền vững)
       - Màu phụ: Blue (tin cậy, công nghệ)
       - Quy tắc 60-30-10
       ============================================ */
    
    /* === PRIMARY COLORS (Teal) === */
    --primary: #0D9488;
    --primary-rgb: 13, 148, 136;
    --primary-light: #14B8A6;
    --primary-dark: #0F766E;
    --primary-50: #F0FDFA;
    --primary-100: #CCFBF1;
    --primary-200: #99F6E4;
    --primary-300: #5EEAD4;
    --primary-400: #2DD4BF;
    --primary-500: #14B8A6;
    --primary-600: #0D9488;
    --primary-700: #0F766E;
    --primary-800: #115E59;
    --primary-900: #134E4A;
    
    /* === SECONDARY COLORS (Blue) === */
    --secondary: #3B82F6;
    --secondary-rgb: 59, 130, 246;
    --secondary-light: #60A5FA;
    --secondary-dark: #2563EB;
    --secondary-50: #EFF6FF;
    --secondary-100: #DBEAFE;
    --secondary-500: #3B82F6;
    --secondary-600: #2563EB;
    --secondary-700: #1D4ED8;
    
    /* === ACCENT COLORS (Amber - CTA) === */
    --accent: #F59E0B;
    --accent-rgb: 245, 158, 11;
    --tertiary-rgb: 8, 145, 178;
    --accent-light: #FBBF24;
    --accent-dark: #D97706;
    --accent-50: #FFFBEB;
    --accent-100: #FEF3C7;
    --accent-500: #F59E0B;
    --accent-600: #D97706;
    
    /* === TEXT COLORS - LIGHT MODE === */
    --text-primary: #1E293B;        /* Contrast 11.5:1 on white ✅ */
    --text-secondary: #475569;      /* Contrast 6.5:1 on white ✅ */
    --text-muted: #64748B;          /* Contrast 4.5:1 on white ✅ */
    --text-disabled: #94A3B8;
    --text-on-primary: #FFFFFF;
    --text-on-dark: #F8FAFC;
    --text-on-dark-secondary: #E2E8F0;
    --text-on-dark-muted: #CBD5E1;
    
    /* === BACKGROUND COLORS === */
    --bg-primary: #F9FAFB;          /* Cloud Dancer - Main background */
    --bg-secondary: #F1F5F9;        /* Slightly darker for sections */
    --bg-surface: #FFFFFF;          /* Cards, modals */
    --bg-surface-hover: #F8FAFC;
    --bg-dark: #1E293B;             /* Dark sections */
    --bg-dark-secondary: #334155;
    --bg-footer: #0F172A;           /* Footer */
    
    /* === BORDER COLORS === */
    --border-light: #E2E8F0;
    --border-default: #CBD5E1;
    --border-dark: #94A3B8;
    --border-primary: #0D9488;
    
    /* === GRADIENTS === */
    --gradient-hero: linear-gradient(135deg, var(--primary, #0D9488) 0%, var(--primary-dark, #0F766E) 50%, var(--primary-800, #115E59) 100%);
    --gradient-hero-overlay: linear-gradient(135deg, rgba(var(--primary-rgb, 13, 148, 136), 0.7) 0%, rgba(var(--primary-rgb, 13, 148, 136), 0.5) 100%);
    --gradient-primary: linear-gradient(135deg, var(--primary, #0D9488) 0%, var(--primary-light, #14B8A6) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary, #3B82F6) 0%, var(--secondary-light, #60A5FA) 100%);
    --gradient-cta: linear-gradient(135deg, var(--accent, #F59E0B) 0%, var(--accent-light, #FBBF24) 100%);
    --gradient-dark: linear-gradient(180deg, var(--bg-dark, #1E293B) 0%, var(--bg-footer, #0F172A) 100%);
    --gradient-teal-blue: linear-gradient(135deg, var(--primary, #0D9488) 0%, var(--secondary, #3B82F6) 100%);
    
    /* === STATUS COLORS === */
    --success: #10B981;
    --success-light: #D1FAE5;
    --success-dark: #059669;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --warning-dark: #D97706;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --error-dark: #DC2626;
    --info: #3B82F6;
    --info-light: #DBEAFE;
    --info-dark: #2563EB;
    
    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 10px 25px -5px rgba(13, 148, 136, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-primary: 0 4px 14px rgba(13, 148, 136, 0.4);
    
    /* === TYPOGRAPHY === */
    --font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-heading: 'Montserrat', 'Inter', sans-serif;
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* === TEAL/CYAN COLORS (for elements using cyan/teal accents) === */
    --teal: #0D9488;
    --teal-light: #14B8A6;
    --teal-dark: #0F766E;
    --teal-50: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;
    --teal-800: #115E59;
    --teal-900: #134E4A;
    
    /* Cyan variant (brighter teal) */
    --cyan: #06B6D4;
    --cyan-light: #22D3EE;
    --cyan-dark: #0891B2;
    --cyan-50: #ECFEFF;
    --cyan-100: #CFFAFE;
    --cyan-200: #A5F3FC;
    --cyan-300: #67E8F9;
    --cyan-400: #22D3EE;
    --cyan-500: #06B6D4;
    --cyan-600: #0891B2;
    --cyan-700: #0E7490;
    --cyan-800: #155E75;
    --cyan-900: #164E63;
    
    /* Gradient with teal/cyan */
    --gradient-teal: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    --gradient-cyan: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-dark) 100%);
    --gradient-teal-cyan: linear-gradient(135deg, var(--teal) 0%, var(--cyan) 100%);
    --gradient-teal-success: linear-gradient(135deg, var(--teal) 0%, var(--success) 100%);
    
    /* === LEGACY MAPPING (backward compatibility) === */
    --navy-900: #0F766E;
    --navy-800: #0D9488;
    --navy-700: #14B8A6;
    --navy-600: #2DD4BF;
    --copper-600: #D97706;
    --copper-500: #F59E0B;
    --copper-400: #FBBF24;
    --copper-300: #FCD34D;
    --tertiary: #3B82F6;
    --tertiary-500: #3B82F6;
    --tertiary-600: #2563EB;
    --highlight: #F59E0B;
    --highlight-500: #F59E0B;
    
    /* === GRAY SCALE (updated for better contrast) === */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --white: #FFFFFF;
}

/* ============================================
   GLOBAL OVERRIDES FOR CORPORATE TEAL THEME
   ============================================ */

/* === BODY === */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* === LINKS === */
a {
    color: var(--primary) !important;
}

a:hover {
    color: var(--primary-dark) !important;
}

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header-top {
    background: var(--gradient-dark) !important;
    color: var(--text-on-dark) !important;
}

.header-top a {
    color: var(--text-on-dark-secondary) !important;
}

.header-top a:hover {
    color: var(--accent) !important;
}

.header-top i {
    color: var(--primary-400) !important;
}

.header-main {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

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

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

.nav-menu a {
    color: var(--text-secondary) !important;
}

.nav-menu a:hover {
    color: var(--primary) !important;
    background: var(--primary-50) !important;
}

.nav-menu a.active {
    color: var(--primary) !important;
    background: var(--primary-100) !important;
    border-bottom: 2px solid var(--primary) !important;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero,
.slider-section,
.page-header {
    background: var(--gradient-hero) !important;
}

.hero h1,
.slide-title,
.page-header h1 {
    color: var(--text-on-dark) !important;
}

.hero p,
.slide-description,
.page-header p {
    color: var(--text-on-dark-secondary) !important;
}

.hero-stat-value {
    color: var(--accent) !important;
}

.hero-stat-label {
    color: var(--text-on-dark-muted) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary,
button[type="submit"],
.btn-cta {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-primary) !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.btn-cta:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.5) !important;
}

.btn-secondary,
.btn-outline {
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.btn-outline-light {
    background: transparent !important;
    color: var(--text-on-dark) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.btn-outline-light:hover {
    background: var(--bg-surface) !important;
    color: var(--primary) !important;
    border-color: var(--bg-surface) !important;
}

/* ============================================
   SECTIONS
   ============================================ */

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

.section-light,
.page-section-light {
    background: var(--bg-secondary) !important;
}

.section-header h2,
.section-title {
    color: var(--text-primary) !important;
}

.section-header p,
.section-subtitle,
.section-intro p {
    color: var(--text-secondary) !important;
}

/* ============================================
   CARDS
   ============================================ */

.card,
.product-card,
.news-card,
.why-card,
.feature-card,
.industry-card,
.finder-card,
.quick-finder-card,
.capability-card,
.process-card,
.cert-badge {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-card) !important;
}

.card:hover,
.product-card:hover,
.news-card:hover,
.why-card:hover,
.feature-card:hover,
.industry-card:hover,
.finder-card:hover,
.quick-finder-card:hover,
.capability-card:hover,
.process-card:hover {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-4px) !important;
}

.card h3,
.card h4,
.product-card h3,
.news-card h3,
.why-card h3,
.feature-card h3,
.industry-card h3,
.finder-card h3,
.quick-finder-card h3,
.capability-card h3,
.process-card h3 {
    color: var(--text-primary) !important;
}

.card p,
.card .description,
.product-card p,
.news-card p,
.why-card p,
.feature-card p,
.industry-card p,
.finder-card p,
.quick-finder-card p,
.capability-card p,
.process-card p {
    color: var(--text-secondary) !important;
}

.card i,
.product-card i,
.why-card i,
.feature-card i,
.industry-card i,
.finder-card i,
.quick-finder-card i,
.capability-card i {
    color: var(--primary) !important;
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.badge,
.tag,
.category-badge {
    background: var(--primary-100) !important;
    color: var(--primary-700) !important;
}

.badge-featured,
.badge-new {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}

/* ============================================
   FORMS
   ============================================ */

.form-group label,
.form-label {
    color: var(--text-primary) !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-control {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ============================================
   RFQ FORM
   ============================================ */

.rfq-form {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-light) !important;
}

.rfq-form h3 {
    color: var(--primary) !important;
}

.rfq-form label {
    color: var(--text-primary) !important;
}

.rfq-sidebar {
    background: var(--gradient-teal-blue) !important;
    color: var(--text-on-dark) !important;
}

.rfq-sidebar h3 {
    color: var(--text-on-dark) !important;
}

.rfq-sidebar li {
    color: var(--text-on-dark-secondary) !important;
}

.rfq-sidebar li i {
    color: var(--accent) !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */

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

.breadcrumb a {
    color: var(--primary) !important;
}

.breadcrumb a:hover {
    color: var(--primary-dark) !important;
}

.breadcrumb li:last-child,
.breadcrumb span {
    color: var(--text-secondary) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.footer,
.site-footer {
    background: var(--gradient-dark) !important;
    color: var(--text-on-dark-secondary) !important;
}

.footer h4,
.footer-title {
    color: var(--text-on-dark) !important;
}

.footer a {
    color: var(--text-on-dark-muted) !important;
}

.footer a:hover {
    color: var(--primary-400) !important;
}

.footer-logo {
    color: var(--text-on-dark) !important;
}

.footer-logo span {
    color: var(--primary-400) !important;
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-on-dark-muted) !important;
}

.social-links a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-on-dark) !important;
}

.social-links a:hover {
    background: var(--primary) !important;
    color: var(--text-on-dark) !important;
}

/* ============================================
   FEATURED SECTIONS (Dark Background)
   ============================================ */

.featured-products,
.latest-news,
.why-choose,
.certificates,
.quick-finder,
.cta-section,
.process-section {
    background: var(--gradient-dark) !important;
}

.featured-products h2,
.latest-news h2,
.why-choose h2,
.certificates h2,
.quick-finder h2,
.cta-section h2,
.process-section h2 {
    color: var(--text-on-dark) !important;
}

.featured-products .subtitle,
.latest-news .subtitle,
.why-choose .subtitle,
.certificates .subtitle,
.quick-finder .subtitle,
.cta-section p,
.process-section .subtitle {
    color: var(--text-on-dark-secondary) !important;
}

/* Cards on dark background */
.featured-products .product-card,
.latest-news .news-card,
.why-choose .why-card,
.certificates .cert-item,
.quick-finder .finder-card,
.process-section .process-step {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.featured-products .product-card:hover,
.latest-news .news-card:hover,
.why-choose .why-card:hover,
.certificates .cert-item:hover,
.quick-finder .finder-card:hover,
.process-section .process-step:hover {
    border-color: var(--primary-400) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.featured-products .product-card h3,
.latest-news .news-card h3,
.why-choose .why-card h3,
.certificates .cert-item h4,
.quick-finder .finder-card h3,
.process-section .process-step h3 {
    color: var(--text-on-dark) !important;
}

.featured-products .product-card p,
.latest-news .news-card p,
.why-choose .why-card p,
.certificates .cert-item p,
.quick-finder .finder-card p,
.process-section .process-step p {
    color: var(--text-on-dark-secondary) !important;
}

.featured-products .product-card i,
.why-choose .why-card i,
.quick-finder .finder-card i,
.certificates .cert-item i {
    color: var(--primary-400) !important;
}

/* ============================================
   STATS & NUMBERS
   ============================================ */

.stat-number,
.stat-value {
    color: var(--primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--primary) !important;
}

.stat-label {
    color: var(--text-secondary) !important;
}

/* Stats on dark background */
.hero .stat-number,
.page-header .stat-number {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */

.alert-success {
    background: var(--success-light) !important;
    color: #065F46 !important;
    border-color: #A7F3D0 !important;
}

.alert-error {
    background: var(--error-light) !important;
    color: #991B1B !important;
    border-color: #FECACA !important;
}

.alert-warning {
    background: var(--warning-light) !important;
    color: #92400E !important;
    border-color: #FDE68A !important;
}

.alert-info {
    background: var(--info-light) !important;
    color: #1E40AF !important;
    border-color: #BFDBFE !important;
}

/* ============================================
   TABLES
   ============================================ */

table th {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

table td {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

table tr:hover {
    background: var(--bg-secondary) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination a,
.pagination span {
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

.pagination a:hover {
    background: var(--primary-50) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.pagination .active {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--primary) !important;
}

/* ============================================
   SLIDER CONTROLS
   ============================================ */

.slider-nav button,
.slider-arrow {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-on-dark) !important;
}

.slider-nav button:hover,
.slider-arrow:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.slider-dots .dot {
    background: rgba(255, 255, 255, 0.3) !important;
}

.slider-dots .dot.active {
    background: var(--primary-400) !important;
}

/* ============================================
   PRODUCT FILTERS
   ============================================ */

.filter-btn,
.category-btn {
    background: transparent !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
}

.filter-btn:hover,
.category-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.filter-btn.active,
.category-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* ============================================
   SEARCH BOX
   ============================================ */

.search-box input {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

.search-box input:focus {
    border-color: var(--primary) !important;
}

.search-box button {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-info h4 {
    color: var(--text-primary) !important;
}

.contact-info p,
.contact-info span {
    color: var(--text-secondary) !important;
}

.contact-info a {
    color: var(--primary) !important;
}

.contact-info i {
    color: var(--primary) !important;
}

/* ============================================
   CAREER STATS
   ============================================ */

.career-stats .stat-item {
    background: var(--gradient-teal-blue) !important;
}

.career-stats .stat-number {
    color: var(--text-on-dark) !important;
    -webkit-text-fill-color: var(--text-on-dark) !important;
}

.career-stats .stat-label {
    color: var(--text-on-dark-secondary) !important;
}

/* ============================================
   LOADING & SPINNER
   ============================================ */

.spinner,
.loading {
    border-top-color: var(--primary) !important;
}

/* ============================================
   SCROLL TO TOP
   ============================================ */

.scroll-top {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.scroll-top:hover {
    background: var(--primary-dark) !important;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.mobile-menu {
    background: var(--bg-surface) !important;
}

.mobile-menu a {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-light) !important;
}

.mobile-menu a:hover,
.mobile-menu a.active {
    color: var(--primary) !important;
    background: var(--primary-50) !important;
}

/* ============================================
   LANGUAGE DROPDOWN
   ============================================ */

.lang-dropdown {
    background: var(--bg-surface) !important;
    border-color: var(--border-light) !important;
}

.lang-dropdown a {
    color: var(--text-primary) !important;
}

.lang-dropdown a:hover {
    background: var(--primary-50) !important;
    color: var(--primary) !important;
}


/* ============================================
   SYNC HOME PAGE & RFQ PAGE STYLES
   ============================================ */

/* === PAGE HEADER - UNIFIED STYLE === */
.page-header {
    background: var(--gradient-hero) !important;
    color: var(--text-on-primary) !important;
    padding: 4rem 0 !important;
    text-align: center !important;
    position: relative !important;
}

.page-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at 50% 100%, rgba(var(--primary-rgb, 13, 148, 136), 0.2) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.page-header h1 {
    color: var(--text-on-primary) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    margin-bottom: 0.75rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.page-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.125rem !important;
    font-style: normal !important;
    margin-bottom: 0 !important;
}

/* === BREADCRUMB - UNIFIED STYLE === */
.breadcrumb {
    background: #F9FAFB !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.breadcrumb ul {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.breadcrumb a {
    color: var(--primary) !important;
    text-decoration: none !important;
}

.breadcrumb a:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline !important;
}

.breadcrumb li:last-child {
    color: #475569 !important;
}

/* === RFQ FORM SECTION === */
.page-section-light,
section.section.page-section-light {
    background: #F9FAFB !important;
}

/* === RFQ FORM STYLING === */
.rfq-form {
    background: #ffffff !important;
    padding: 2rem !important;
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 13, 148, 136), 0.08) !important;
}

.rfq-form h2,
.rfq-form h3 {
    color: #1E293B !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

.rfq-form h3 i {
    color: var(--primary) !important;
}

.rfq-form label {
    color: #374151 !important;
    font-weight: 500 !important;
}

.rfq-form input,
.rfq-form select,
.rfq-form textarea {
    background: #ffffff !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    color: #1E293B !important;
}

.rfq-form input:focus,
.rfq-form select:focus,
.rfq-form textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 13, 148, 136), 0.1) !important;
    outline: none !important;
}

.rfq-form button[type="submit"],
.rfq-form .btn-primary {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
    border: none !important;
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.rfq-form button[type="submit"]:hover,
.rfq-form .btn-primary:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb, 13, 148, 136), 0.4) !important;
}

/* === RFQ SIDEBAR - WHY CHOOSE === */
.rfq-sidebar,
section.section:has(.rfq-form) > .container > div:last-child > div:first-child {
    background: var(--gradient-teal-blue) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    color: #ffffff !important;
}

.rfq-sidebar h3,
section.section:has(.rfq-form) h3 {
    color: #ffffff !important;
}

.rfq-sidebar li,
.rfq-sidebar p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.rfq-sidebar i {
    color: #FBBF24 !important;
}

/* === RFQ SIDEBAR - CONTACT DIRECT === */
section.section:has(.rfq-form) > .container > div:last-child > div:last-child {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

section.section:has(.rfq-form) > .container > div:last-child > div:last-child h4 {
    color: #1E293B !important;
}

section.section:has(.rfq-form) > .container > div:last-child > div:last-child p {
    color: #475569 !important;
}

section.section:has(.rfq-form) > .container > div:last-child > div:last-child a {
    color: var(--primary) !important;
}

section.section:has(.rfq-form) > .container > div:last-child > div:last-child i {
    color: var(--primary) !important;
}

/* === HOME PAGE HERO/SLIDER === */
.hero,
.slider-section,
.hero-slider {
    background: var(--gradient-hero) !important;
}

.hero-slider .slide {
    /* Background image will be set inline, only set size and position */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.slide-title,
.hero h1 {
    color: #ffffff !important;
}

.slide-description,
.hero p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* === HOME PAGE INDUSTRY FINDER SECTION === */
.quick-finder-section,
section.section[style*="navy"],
section.section[style*="gradient"] {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
}

.quick-finder-section h2,
section.section[style*="navy"] h2 {
    color: #ffffff !important;
}

.quick-finder-card,
.industry-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

.quick-finder-card:hover,
.industry-card:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--primary) !important;
}

.quick-finder-card i,
.industry-card i {
    color: var(--primary-light) !important;
}

.quick-finder-card h3,
.industry-card h3 {
    color: #ffffff !important;
}

.quick-finder-card p,
.industry-card p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* === HOME PAGE CERTIFICATIONS SECTION === */
.certifications-section {
    background: #F9FAFB !important;
}

.certifications-section h2 {
    color: #1E293B !important;
}

.certifications-section p {
    color: #475569 !important;
}

.cert-badge {
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    color: #1E293B !important;
}

/* === HOME PAGE PRODUCTS SECTION === */
.products-section {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
}

.products-section h2 {
    color: #ffffff !important;
}

.products-section .section-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

.product-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.product-card .category-badge {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.product-card h3 {
    color: #1E293B !important;
}

.product-card p {
    color: #475569 !important;
}

/* === HOME PAGE WHY CHOOSE SECTION === */
.why-choose-section {
    background: var(--gradient-hero) !important;
}

.why-choose-section h2 {
    color: #ffffff !important;
}

.why-choose-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
}

.why-choose-card i {
    color: var(--primary-light) !important;
}

.why-choose-card h3 {
    color: #ffffff !important;
}

.why-choose-card p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* === HOME PAGE NEWS SECTION === */
.news-section {
    background: #F9FAFB !important;
}

.news-section h2 {
    color: #1E293B !important;
}

.news-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
}

.news-card .category-badge {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.news-card h3 {
    color: #1E293B !important;
}

.news-card p {
    color: #475569 !important;
}

/* === CTA SECTION === */
.cta-section {
    background: var(--gradient-teal-blue) !important;
}

.cta-section h2 {
    color: #ffffff !important;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta-section .btn {
    background: var(--bg-surface) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

.cta-section .btn:hover {
    background: var(--primary-50) !important;
    color: var(--primary-dark) !important;
}

/* === FOOTER === */
.footer {
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important;
}

.footer h3,
.footer h4 {
    color: #ffffff !important;
}

.footer p,
.footer li,
.footer a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer a:hover {
    color: var(--primary-light) !important;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}


/* ============================================
   HOME PAGE - LIGHT THEME SYNC
   Làm sáng nền trang chủ để đồng bộ với các trang khác
   ============================================ */

/* === HERO SLIDER - Sáng hơn với gradient Teal === */
.hero-slider {
    background: var(--gradient-primary) !important;
}

.hero-slider .slide {
    background-size: cover !important;
    background-position: center !important;
}

.hero-slider .slide-overlay {
    background: var(--gradient-hero-overlay) !important;
}

.hero-slider .slide-title {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.hero-slider .slide-subtitle {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* === QUICK FINDER - Nền sáng thay vì tối === */
.quick-finder {
    background: linear-gradient(180deg, var(--primary-50, #F0FDFA) 0%, var(--primary-100, #CCFBF1) 100%) !important;
    padding: 4rem 0 !important;
}

.quick-finder h2 {
    color: #1E293B !important;
}

.finder-card,
.quick-finder .finder-card {
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb, 13, 148, 136), 0.1) !important;
    transition: all 0.3s ease !important;
}

.finder-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb, 13, 148, 136), 0.2) !important;
    border-color: var(--primary) !important;
}

.finder-card-icon,
.finder-card .finder-card-icon {
    background: linear-gradient(135deg, var(--primary-50, #F0FDFA) 0%, var(--primary-100, #CCFBF1) 100%) !important;
    border-radius: 50% !important;
}

.finder-card-icon i,
.finder-card .finder-card-icon i {
    color: var(--primary) !important;
}

.finder-card h3 {
    color: #1E293B !important;
}

.finder-card p {
    color: #475569 !important;
}

/* === CERTIFICATES - Nền sáng === */
.certificates {
    background: #ffffff !important;
    padding: 4rem 0 !important;
}

.certificates h2 {
    color: #1E293B !important;
}

.certificates .subtitle {
    color: #475569 !important;
}

.cert-item,
.cert-grid .cert-item {
    background: #F9FAFB !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

.cert-item p {
    color: #1E293B !important;
    font-weight: 500 !important;
}

/* === FEATURED PRODUCTS - Nền sáng với accent === */
.featured-products {
    background: linear-gradient(180deg, var(--primary-50, #F0FDFA) 0%, var(--bg-primary, #F9FAFB) 100%) !important;
    padding: 4rem 0 !important;
}

.featured-products h2 {
    color: #1E293B !important;
}

.featured-products .subtitle {
    color: #475569 !important;
}

.product-card {
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb, 13, 148, 136), 0.15) !important;
}

.product-card .product-category,
.product-category {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.product-card h3 {
    color: #1E293B !important;
}

.product-card p {
    color: #475569 !important;
}

.product-card .btn-outline {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.product-card .btn-outline:hover {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* === WHY CHOOSE - Gradient Teal nhẹ nhàng === */
.why-choose {
    background: var(--gradient-teal-blue) !important;
    padding: 4rem 0 !important;
}

.why-choose h2 {
    color: #ffffff !important;
}

.why-card {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
}

.why-card:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

.why-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
}

.why-icon i {
    color: #ffffff !important;
}

.why-card h3 {
    color: #ffffff !important;
}

.why-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* === NEWS SECTION - Nền sáng === */
.news-section,
section.news-section {
    background: #ffffff !important;
    padding: 4rem 0 !important;
}

.news-section h2 {
    color: #1E293B !important;
}

.news-card {
    background: #F9FAFB !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.news-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.news-card .category-badge {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.news-card h3 {
    color: #1E293B !important;
}

.news-card p {
    color: #475569 !important;
}

.news-card .date {
    color: #64748B !important;
}

/* === CTA SECTION - Gradient đẹp === */
.cta-section {
    background: var(--gradient-teal-blue) !important;
    padding: 4rem 0 !important;
}

.cta-section h2 {
    color: #ffffff !important;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta-section .btn-primary,
.cta-section .btn {
    background: var(--bg-surface) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

.cta-section .btn:hover {
    background: var(--primary-50) !important;
    transform: translateY(-2px) !important;
}

/* === WIRE DIVIDERS - Màu theo theme === */
.section-wire-divider {
    background: transparent !important;
}

.section-wire-divider .wire-path.wire-primary {
    stroke: var(--primary) !important;
}

.section-wire-divider .wire-path.wire-secondary {
    stroke: var(--secondary) !important;
}

.section-wire-divider .wire-dot.wire-primary {
    fill: var(--primary) !important;
}

.section-wire-divider .wire-dot.wire-secondary {
    fill: var(--secondary) !important;
}

.section-wire-divider .wire-dot.wire-accent {
    fill: var(--accent) !important;
}

/* === SLIDER NAVIGATION === */
.slider-nav button,
.slider-prev,
.slider-next {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.slider-nav button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.slider-dots .dot {
    background: rgba(255, 255, 255, 0.4) !important;
}

.slider-dots .dot.active {
    background: #ffffff !important;
}

/* === DEMO EFFECTS LINK === */
.demo-effects-link {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.demo-effects-link:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}


/* ============================================
   FIX TEXT CONTRAST - TĂNG ĐỘ TƯƠNG PHẢN CHỮ
   ============================================ */

/* === QUICK FINDER SECTION - Sửa màu chữ mô tả === */
.quick-finder .finder-card h3,
.finder-card h3 {
    color: #1E293B !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

.quick-finder .finder-card p,
.finder-card p {
    color: #374151 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

/* === CERTIFICATES SECTION - Sửa màu tên chứng nhận === */
.certificates .cert-item p,
.cert-item p,
.cert-grid .cert-item p {
    color: #1E293B !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.certificates h2 {
    color: #1E293B !important;
}

.certificates .subtitle,
.certificates p.subtitle {
    color: #475569 !important;
}

/* === FEATURED PRODUCTS SECTION - Sửa màu tiêu đề và mô tả === */
.featured-products h2 {
    color: #1E293B !important;
}

.featured-products .subtitle {
    color: #475569 !important;
}

.featured-products .product-card h3,
.product-card h3 {
    color: #1E293B !important;
    font-weight: 600 !important;
}

.featured-products .product-card p,
.product-card .product-info p {
    color: #374151 !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

.product-card .btn-outline {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
}

.product-card .btn-outline:hover {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* === WHY CHOOSE SECTION - Giữ nguyên vì nền tối === */
.why-choose h2 {
    color: #ffffff !important;
}

.why-choose .why-card h3 {
    color: #ffffff !important;
}

.why-choose .why-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* === NEWS SECTION - Sửa màu tiêu đề và mô tả === */
.news-section h2,
section.news-section h2 {
    color: #1E293B !important;
}

.news-card h3 {
    color: #1E293B !important;
    font-weight: 600 !important;
}

.news-card p {
    color: #374151 !important;
}

.news-card .date {
    color: #6B7280 !important;
}

/* ============================================
   FOOTER - ĐẢM BẢO THAY ĐỔI THEO THEME
   ============================================ */

footer,
.footer,
.site-footer,
footer.footer {
    background: linear-gradient(180deg, #134E4A 0%, #0F3D3A 50%, #0A2E2C 100%) !important;
}

footer h3,
footer h4,
.footer h3,
.footer h4,
.site-footer h3,
.site-footer h4,
.footer-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

footer p,
footer li,
footer span,
.footer p,
.footer li,
.footer span,
.site-footer p,
.site-footer li {
    color: rgba(255, 255, 255, 0.85) !important;
}

footer a,
.footer a,
.site-footer a {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.3s ease !important;
}

footer a:hover,
.footer a:hover,
.site-footer a:hover {
    color: var(--primary-400, #2DD4BF) !important;
}

.footer-bottom,
footer .footer-bottom {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-bottom p,
.footer-bottom span {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Social links in footer */
.footer .social-links a,
footer .social-links a,
.social-links a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.footer .social-links a:hover,
footer .social-links a:hover,
.social-links a:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
}

/* Footer logo */
.footer-logo,
footer .logo,
.footer .logo {
    color: #ffffff !important;
}

.footer-logo span,
footer .logo span {
    color: var(--primary-400, #2DD4BF) !important;
}

/* Footer contact info */
.footer .contact-info i,
footer .contact-info i {
    color: var(--primary-400, #2DD4BF) !important;
}

/* === CTA SECTION BEFORE FOOTER === */
.cta-section,
section.cta-section {
    background: var(--gradient-hero) !important;
    padding: 4rem 0 !important;
}

.cta-section h2 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta-section .btn,
.cta-section a.btn {
    background: var(--bg-surface) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.cta-section .btn:hover,
.cta-section a.btn:hover {
    background: var(--primary-50) !important;
    color: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
}


/* =====================================================
   NEW FOOTER DESIGN - Corporate Teal 2026
   ===================================================== */

/* CTA Section */
.footer-cta {
    background: linear-gradient(135deg, var(--primary, #0D9488) 0%, var(--secondary, #0891B2) 100%) !important;
    padding: 3rem 0 !important;
    text-align: center !important;
}

.footer-cta .cta-content h3 {
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.footer-cta .cta-content p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.footer-cta .btn-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #ffffff !important;
    color: var(--primary, #0D9488) !important;
    padding: 0.875rem 2rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.footer-cta .btn-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Footer Main */
.footer {
    background: linear-gradient(180deg, #134E4A 0%, #0F3D3A 100%) !important;
    padding: 3rem 0 0 !important;
}

.footer-main {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 3rem !important;
    padding-bottom: 2rem !important;
}

/* Footer Left - Company & Map */
.footer-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

.footer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

.footer-logo img {
    height: 40px !important;
    width: auto !important;
}

.footer-logo span {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.footer-tagline {
    color: var(--accent, #F59E0B) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-style: italic !important;
    margin-bottom: 0.5rem !important;
}

.footer-desc {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

.footer-map {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.footer-map iframe {
    display: block !important;
}

/* Footer Right - Links & Contact */
.footer-right {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

.footer-links h4,
.footer-contact h4 {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--primary, #0D9488) !important;
}

.footer-links ul,
.footer-contact ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-links ul li,
.footer-contact ul li {
    margin-bottom: 0.625rem !important;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.footer-links ul li a i {
    font-size: 0.625rem !important;
    color: var(--primary-400, #2DD4BF) !important;
}

.footer-links ul li a:hover {
    color: #ffffff !important;
    padding-left: 0.25rem !important;
}

.footer-contact ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.875rem !important;
}

.footer-contact ul li i {
    color: var(--accent, #F59E0B) !important;
    font-size: 0.875rem !important;
    margin-top: 0.125rem !important;
    width: 16px !important;
    text-align: center !important;
}

.footer-contact ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-contact ul li a:hover {
    color: #ffffff !important;
}

/* Social Links */
.footer-social {
    display: flex !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
}

.footer-social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
}

.footer-social a:hover {
    background: var(--primary, #0D9488) !important;
    transform: translateY(-2px) !important;
}

/* Footer Bottom */
.footer-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.25rem 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 1rem !important;
}

.footer-bottom-left p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8125rem !important;
    margin: 0 !important;
}

.footer-bottom-right {
    display: flex !important;
    gap: 1.5rem !important;
}

.footer-bottom-right a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8125rem !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-bottom-right a:hover {
    color: #ffffff !important;
}

/* Responsive Footer */
@media (max-width: 992px) {
    .footer-main {
        grid-template-columns: 1fr !important;
    }
    
    .footer-right {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .footer-right {
        grid-template-columns: 1fr !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .footer-bottom-right {
        justify-content: center !important;
    }
}

/* =====================================================
   BREADCRUMB IMPROVEMENTS
   ===================================================== */

/* Breadcrumb in Page Header */
.page-header .breadcrumb,
.page-banner .breadcrumb {
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
}

.page-header .breadcrumb a,
.page-banner .breadcrumb a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    transition: color 0.3s ease !important;
}

.page-header .breadcrumb a:hover,
.page-banner .breadcrumb a:hover {
    color: #ffffff !important;
}

.page-header .breadcrumb span,
.page-banner .breadcrumb span {
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

.page-header .breadcrumb .separator,
.page-banner .breadcrumb .separator {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.75rem !important;
}

/* Breadcrumb on Light Background */
.breadcrumb-light {
    background: var(--bg-surface, #F9FAFB) !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--border-light, #E5E7EB) !important;
}

.breadcrumb-light .breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.breadcrumb-light .breadcrumb a {
    color: var(--primary, #0D9488) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
}

.breadcrumb-light .breadcrumb a:hover {
    text-decoration: underline !important;
}

.breadcrumb-light .breadcrumb span {
    color: var(--text-secondary, #475569) !important;
    font-size: 0.875rem !important;
}

.breadcrumb-light .breadcrumb .separator {
    color: var(--text-muted, #94A3B8) !important;
}

/* =====================================================
   HOME PAGE SECTIONS - TEXT CONTRAST FIX (Enhanced)
   ===================================================== */

/* Industry Cards Text */
.industry-card .industry-title,
.finder-card h3,
.quick-finder-card h3 {
    color: var(--text-primary, #1E293B) !important;
    font-weight: 700 !important;
}

.industry-card .industry-desc,
.finder-card p,
.quick-finder-card p {
    color: var(--text-secondary, #374151) !important;
    font-weight: 500 !important;
}

/* Certification Section */
.cert-badge .cert-name,
.certification-card h4 {
    color: var(--text-primary, #1E293B) !important;
    font-weight: 700 !important;
}

/* Product Cards */
.product-card .product-title,
.product-card h3 {
    color: var(--text-primary, #1E293B) !important;
    font-weight: 700 !important;
}

.product-card .product-desc,
.product-card p {
    color: var(--text-secondary, #374151) !important;
}

/* News Cards */
.news-card .news-title,
.news-card h3 {
    color: var(--text-primary, #1E293B) !important;
}

.news-card .news-excerpt,
.news-card p {
    color: var(--text-secondary, #374151) !important;
}


/* ========================================
   BREADCRUMB - UNIFIED STYLES
   ======================================== */

/* Breadcrumb Container */
.breadcrumb-nav {
    padding: 0.75rem 0;
    margin-bottom: 1rem;
}

/* Breadcrumb inside page-header (dark background) */
.page-header .breadcrumb-nav,
.page-hero .breadcrumb-nav,
.page-banner .breadcrumb-nav {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    display: inline-block;
    margin-top: 1rem;
}

/* Breadcrumb List */
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* Breadcrumb Item */
.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

/* Breadcrumb Link - Dark background (page header) */
.page-header .breadcrumb-item a,
.page-hero .breadcrumb-item a,
.page-banner .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-header .breadcrumb-item a:hover,
.page-hero .breadcrumb-item a:hover,
.page-banner .breadcrumb-item a:hover {
    color: #ffffff !important;
}

.page-header .breadcrumb-item.active span,
.page-hero .breadcrumb-item.active span,
.page-banner .breadcrumb-item.active span {
    color: #ffffff !important;
    font-weight: 500;
}

.page-header .breadcrumb-separator,
.page-hero .breadcrumb-separator,
.page-banner .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 0.5rem;
}

/* Breadcrumb Link - Light background */
.breadcrumb-item a {
    color: var(--primary, #0D9488) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-dark, #0F766E) !important;
    text-decoration: underline;
}

.breadcrumb-item.active span {
    color: var(--text-secondary, #475569) !important;
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--text-muted, #94A3B8) !important;
    margin: 0 0.5rem;
}

/* Breadcrumb Icon */
.breadcrumb-item a i {
    margin-right: 0.35rem;
    font-size: 0.85rem;
}

/* Legacy breadcrumb support - Override old styles */
.page-header .breadcrumb,
.page-hero .breadcrumb,
.page-banner .breadcrumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    display: inline-block;
    margin-top: 1rem;
}

.page-header .breadcrumb a,
.page-hero .breadcrumb a,
.page-banner .breadcrumb a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
}

.page-header .breadcrumb a:hover,
.page-hero .breadcrumb a:hover,
.page-banner .breadcrumb a:hover {
    color: #ffffff !important;
}

.page-header .breadcrumb span,
.page-hero .breadcrumb span,
.page-banner .breadcrumb span {
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 0.5rem;
}

/* Breadcrumb on light background sections */
section:not(.page-header):not(.page-hero):not(.page-banner) .breadcrumb {
    background: var(--bg-secondary, #F1F5F9) !important;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
}

section:not(.page-header):not(.page-hero):not(.page-banner) .breadcrumb a {
    color: var(--primary, #0D9488) !important;
}

section:not(.page-header):not(.page-hero):not(.page-banner) .breadcrumb a:hover {
    color: var(--primary-dark, #0F766E) !important;
}

section:not(.page-header):not(.page-hero):not(.page-banner) .breadcrumb span {
    color: var(--text-muted, #94A3B8) !important;
}

/* ========================================
   FOOTER - THEME COLORS
   ======================================== */

/* Footer CTA Section */
.footer-cta {
    background: var(--gradient-teal-blue) !important;
    padding: 3rem 0;
}

.footer-cta h3 {
    color: var(--text-on-dark) !important;
}

.footer-cta p {
    color: var(--text-on-dark-secondary) !important;
}

.footer-cta .btn-cta {
    background: var(--bg-surface) !important;
    color: var(--primary) !important;
    border: none !important;
}

.footer-cta .btn-cta:hover {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
}

/* Main Footer */
.footer {
    background: var(--gradient-dark) !important;
    color: var(--text-on-dark) !important;
    padding: 3rem 0 1rem;
}

/* Footer Company Info */
.footer-company {
    color: var(--text-on-dark) !important;
}

.footer-logo {
    color: var(--text-on-dark) !important;
}

.footer-logo span {
    color: var(--text-on-dark) !important;
}

.footer-tagline {
    color: var(--primary-400) !important;
    font-style: italic;
}

.footer-desc {
    color: var(--text-on-dark-secondary) !important;
}

/* Footer Links */
.footer-links h4,
.footer-products h4,
.footer-contact h4 {
    color: var(--text-on-dark) !important;
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-links h4::after,
.footer-products h4::after,
.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary) !important;
}

.footer-links ul,
.footer-products ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li,
.footer-products ul li {
    margin-bottom: 0.5rem;
}

.footer-links ul li a,
.footer-products ul li a {
    color: var(--text-on-dark-secondary) !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-links ul li a:hover,
.footer-products ul li a:hover {
    color: var(--primary-400) !important;
    padding-left: 5px;
}

/* Footer Contact Info */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    color: var(--text-on-dark-secondary) !important;
}

.footer-contact-item i {
    color: var(--primary-400) !important;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    width: 16px;
}

.footer-contact-item a {
    color: var(--text-on-dark-secondary) !important;
    text-decoration: none;
}

.footer-contact-item a:hover {
    color: var(--primary-400) !important;
}

/* Footer Social Icons */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-on-dark-secondary) !important;
    transition: all 0.2s ease;
}

.footer-social a:hover {
    background: var(--primary) !important;
    color: var(--text-on-dark) !important;
    transform: translateY(-2px);
}

/* Footer Map */
.footer-map {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-map iframe {
    display: block;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 1.5rem;
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    color: var(--text-on-dark-muted) !important;
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a {
    color: var(--text-on-dark-muted) !important;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-legal a:hover {
    color: var(--primary-400) !important;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-main {
        flex-direction: column;
    }
    
    .footer-left,
    .footer-right {
        width: 100%;
    }
    
    .footer-right {
        flex-direction: column;
    }
    
    .footer-links,
    .footer-products,
    .footer-contact {
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Responsive Breadcrumb */
@media (max-width: 768px) {
    .breadcrumb-nav {
        padding: 0.5rem 0;
    }
    
    .breadcrumb-item {
        font-size: 0.8rem;
    }
    
    .page-header .breadcrumb-nav,
    .page-hero .breadcrumb-nav,
    .page-banner .breadcrumb-nav {
        padding: 0.5rem 1rem;
    }
}


/* =====================================================
   FOOTER - THEME VARIABLES OVERRIDE (FINAL)
   Đảm bảo footer thay đổi theo theme
   ===================================================== */

/* Footer Background - Sử dụng CSS Variable */
footer.footer,
.footer,
.site-footer {
    background: var(--bg-footer, linear-gradient(180deg, #134E4A 0%, #0F3D3A 100%)) !important;
}

/* Footer CTA - Sử dụng CSS Variable */
.footer-cta {
    background: var(--gradient-teal-blue, linear-gradient(135deg, #0D9488 0%, #3B82F6 100%)) !important;
}

/* Footer Text Colors - Sử dụng CSS Variables */
.footer h3,
.footer h4,
.footer-title,
.footer-links h4,
.footer-contact h4 {
    color: var(--text-on-dark, #ffffff) !important;
}

.footer p,
.footer li,
.footer span,
.footer-desc,
.footer-tagline {
    color: var(--text-on-dark-secondary, rgba(255, 255, 255, 0.85)) !important;
}

.footer a,
.footer-links a,
.footer-contact a {
    color: var(--text-on-dark-secondary, rgba(255, 255, 255, 0.85)) !important;
}

.footer a:hover,
.footer-links a:hover,
.footer-contact a:hover {
    color: var(--primary-400, #2DD4BF) !important;
}

/* Footer Icons */
.footer i,
.footer-links i,
.footer-contact i {
    color: var(--primary-400, #2DD4BF) !important;
}

/* Footer Logo */
.footer-logo,
.footer-logo span {
    color: var(--text-on-dark, #ffffff) !important;
}

/* Footer Social */
.footer-social a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-on-dark, #ffffff) !important;
}

.footer-social a:hover {
    background: var(--primary, #0D9488) !important;
}

/* Footer Bottom */
.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.footer-bottom p,
.footer-bottom span,
.footer-bottom a {
    color: var(--text-on-dark-muted, rgba(255, 255, 255, 0.6)) !important;
}

.footer-bottom a:hover {
    color: var(--text-on-dark, #ffffff) !important;
}

/* =====================================================
   BREADCRUMB - ĐỒNG BỘ TRÊN TẤT CẢ CÁC TRANG
   ===================================================== */

/* Breadcrumb trên Page Header (nền tối) */
.page-header .breadcrumb,
.page-header nav.breadcrumb,
.page-header .breadcrumb-nav {
    background: rgba(255, 255, 255, 0.1) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
}

.page-header .breadcrumb a,
.page-header .breadcrumb span {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}

.page-header .breadcrumb a:hover {
    color: var(--primary-400, #2DD4BF) !important;
}

.page-header .breadcrumb .separator,
.page-header .breadcrumb span.separator {
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 0.25rem !important;
}

.page-header .breadcrumb .current,
.page-header .breadcrumb span:last-child {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Breadcrumb trên nền sáng */
.breadcrumb-light,
.section-light .breadcrumb,
body > .breadcrumb {
    background: var(--bg-secondary, #F1F5F9) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
}

.breadcrumb-light a,
.section-light .breadcrumb a {
    color: var(--primary, #0D9488) !important;
}

.breadcrumb-light span,
.section-light .breadcrumb span {
    color: var(--text-secondary, #475569) !important;
}

/* Breadcrumb responsive */
@media (max-width: 768px) {
    .page-header .breadcrumb {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}


/* =====================================================
   TEAL/CYAN THEME INTEGRATION
   Sử dụng CSS variables thay vì hardcoded colors
   ===================================================== */

/* === FEATURED PRODUCTS SECTION === */
.featured-products .product-card .product-badge {
    background: var(--gradient-cyan) !important;
}

.featured-products .product-card .category-tag {
    color: var(--cyan) !important;
}

.featured-products .product-card .category-tag:hover {
    background: rgba(6, 182, 212, 0.1) !important;
    border-color: var(--cyan) !important;
    color: var(--cyan-light) !important;
}

.featured-products .btn-primary {
    background: var(--gradient-cyan) !important;
}

/* === LATEST NEWS SECTION === */
.latest-news .news-date i {
    color: var(--cyan) !important;
}

.latest-news .news-card .read-more {
    color: var(--cyan) !important;
}

.latest-news .btn-primary {
    background: var(--gradient-cyan) !important;
}

/* === WHY CHOOSE SECTION === */
.why-choose .why-card:hover .why-icon {
    background: var(--gradient-teal-success) !important;
}

.why-choose .why-icon i {
    color: var(--cyan) !important;
}

/* === QUICK FINDER SECTION === */
.quick-finder .finder-card:hover {
    border-color: var(--cyan) !important;
}

.quick-finder .finder-card:hover .finder-card-icon {
    background: var(--gradient-teal-success) !important;
}

.quick-finder .finder-card-icon i {
    color: var(--cyan) !important;
}

/* === CTA SECTION === */
.cta-section .btn-primary {
    background: var(--gradient-cyan) !important;
}

/* === SECTION DECORATIONS === */
.section-header::after,
.section-title::after {
    background: linear-gradient(90deg, var(--cyan), var(--success)) !important;
}

/* === SLIDER ELEMENTS === */
.slide-title span {
    color: var(--cyan) !important;
}

.slide-content .btn-primary,
.slide-content .btn-lg {
    background: var(--gradient-cyan) !important;
}

.slide-content .btn-outline:hover {
    background: rgba(6, 182, 212, 0.15) !important;
    border-color: var(--cyan) !important;
}

.slider-prev,
.slider-next {
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: var(--cyan) !important;
}

.slider-prev:hover,
.slider-next:hover {
    background: rgba(6, 182, 212, 0.4) !important;
    border-color: var(--cyan) !important;
}

.slider-dots .dot.active,
.slider-dots .dot:hover {
    background: var(--cyan) !important;
    border-color: var(--cyan) !important;
}

.demo-effects-link {
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: var(--cyan) !important;
}

.demo-effects-link:hover {
    background: rgba(6, 182, 212, 0.3) !important;
    border-color: var(--cyan) !important;
}

/* === RFQ FORM === */
.rfq-form h3 {
    color: var(--cyan) !important;
    border-bottom-color: rgba(6, 182, 212, 0.3) !important;
}

.rfq-form h3 i {
    color: var(--cyan) !important;
}

.rfq-form input:focus,
.rfq-form select:focus,
.rfq-form textarea:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
}

.rfq-form button[type="submit"] {
    background: var(--gradient-cyan) !important;
}

/* === CATEGORY FILTER === */
.category-filter a.active {
    background: var(--gradient-cyan) !important;
    border-color: var(--cyan) !important;
}

/* === PRODUCTS PAGE === */
.products-page .filter-tab.active {
    background: var(--gradient-cyan) !important;
    border-color: var(--cyan) !important;
}

.products-page .search-input:focus {
    border-color: var(--cyan) !important;
}

.products-page .search-btn {
    background: var(--gradient-cyan) !important;
}

/* === BREADCRUMB === */
.breadcrumb a {
    color: var(--cyan) !important;
}

/* === PROCESS TIMELINE === */
.process-timeline::before {
    background: linear-gradient(180deg, var(--cyan), var(--success), var(--cyan)) !important;
}

.process-step-number {
    background: var(--gradient-cyan) !important;
}

/* === CAPABILITY ICONS === */
.capability-icon {
    color: var(--cyan) !important;
}

/* === STAT NUMBERS === */
.stat-number,
.stat-value {
    color: var(--cyan) !important;
}

/* === ICON COLORS === */
.icon-teal,
.icon-cyan {
    color: var(--cyan) !important;
}

/* === BORDER ACCENTS === */
.border-teal,
.border-cyan {
    border-color: var(--cyan) !important;
}

/* === BACKGROUND ACCENTS === */
.bg-teal-light {
    background: var(--teal-50) !important;
}

.bg-cyan-light {
    background: var(--cyan-50) !important;
}


/* ==================== IMPROVED NAVIGATION MENU ==================== */
/* Hiệu ứng đơn giản, thanh lịch cho menu navigation */

.nav-menu a {
    color: var(--text-primary) !important;
    background: transparent !important;
    position: relative;
    padding: 0.75rem 1rem !important;
    font-weight: 500;
    transition: color 0.3s ease !important;
}

/* Underline effect - ẩn mặc định */
.nav-menu a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--primary) !important;
    transition: all 0.3s ease !important;
    transform: translateX(-50%) !important;
    border-radius: 2px !important;
}

/* Hover effect - underline mở rộng từ giữa */
.nav-menu a:hover {
    color: var(--primary) !important;
    background: transparent !important;
}

.nav-menu a:hover::after {
    width: 70% !important;
}

/* Active state - underline cố định */
.nav-menu a.active {
    color: var(--primary) !important;
    background: transparent !important;
    font-weight: 600;
}

.nav-menu a.active::after {
    width: 70% !important;
    background: var(--primary) !important;
}

/* Thêm subtle dot indicator cho active */
.nav-menu a.active::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 5px !important;
    height: 5px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    opacity: 0.7;
}

/* Responsive - Mobile menu */
@media (max-width: 991px) {
    .nav-menu a {
        padding: 1rem !important;
        border-bottom: 1px solid var(--border-light) !important;
    }
    
    .nav-menu a::after {
        bottom: auto !important;
        top: 50% !important;
        left: 0 !important;
        right: auto !important;
        width: 3px !important;
        height: 0 !important;
        transform: translateY(-50%) !important;
    }
    
    .nav-menu a:hover::after,
    .nav-menu a.active::after {
        width: 3px !important;
        height: 60% !important;
    }
    
    .nav-menu a.active::before {
        display: none !important;
    }
}


/* ============================================
   HERO SLIDER - WIRE PATTERN OVERLAY
   Giống như page header
   ============================================ */
.hero-slider .slide-wire-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 2;
}

/* Cải thiện overlay để hiển thị ảnh rõ hơn */
.hero-slider .slide-overlay {
    background: linear-gradient(
        135deg, 
        rgba(var(--primary-rgb), 0.5) 0%, 
        rgba(var(--primary-rgb), 0.4) 50%,
        rgba(var(--secondary-rgb), 0.3) 100%
    ) !important;
}

/* Đảm bảo slide content nằm trên wire pattern */
.hero-slider .slide-content {
    position: relative;
    z-index: 3;
}


/* ============================================
   THEME OVERRIDE - REPLACE HARDCODED COLORS
   Thay thế tất cả màu hardcoded trong style.css
   bằng CSS variables để cho phép thay đổi theme
   ============================================ */

/* === QUICK FINDER SECTION === */
.quick-finder-section {
    background: var(--gradient-hero) !important;
}

.quick-finder-section .section-title,
.quick-finder-section .section-subtitle {
    color: var(--text-on-dark) !important;
}

.finder-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
}

.finder-card:hover {
    border-color: rgba(var(--primary-rgb), 0.5) !important;
    box-shadow: 0 20px 40px rgba(var(--primary-rgb), 0.15) !important;
}

.finder-card .icon-wrapper {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.2) 100%) !important;
}

.finder-card .icon-wrapper i {
    color: var(--primary) !important;
}

.finder-card:hover .icon-wrapper {
    background: var(--gradient-primary) !important;
}

.finder-card:hover .icon-wrapper i {
    color: var(--text-on-primary) !important;
}

/* === CERTIFICATIONS SECTION === */
.certifications-section {
    background: var(--bg-secondary) !important;
}

.cert-badge {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.cert-badge:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.cert-badge .cert-icon {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.2) 100%) !important;
}

.cert-badge .cert-icon i {
    color: var(--primary) !important;
}

.cert-badge:hover .cert-icon {
    background: var(--gradient-primary) !important;
}

.cert-badge:hover .cert-icon i {
    color: var(--text-on-primary) !important;
}

/* === FEATURED PRODUCTS SECTION === */
.featured-products-section {
    background: var(--bg-primary) !important;
}

.featured-products-section .section-title::after {
    background: var(--gradient-primary) !important;
}

/* === WHY CHOOSE SECTION === */
.why-choose-section {
    background: var(--gradient-hero) !important;
}

.why-choose-section .section-title,
.why-choose-section .section-subtitle {
    color: var(--text-on-dark) !important;
}

.why-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.why-card:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.why-card .icon-wrapper {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.3) 100%) !important;
}

.why-card .icon-wrapper i {
    color: var(--text-on-dark) !important;
}

.why-card h3,
.why-card p {
    color: var(--text-on-dark) !important;
}

/* === NEWS SECTION === */
.news-section {
    background: var(--bg-secondary) !important;
}

.news-section .section-title::after {
    background: var(--gradient-primary) !important;
}

.news-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.news-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.news-card .category-badge {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.2) 100%) !important;
    color: var(--primary) !important;
}

.news-card .read-more {
    color: var(--primary) !important;
}

.news-card .read-more:hover {
    color: var(--primary-dark) !important;
}

/* === FOOTER CTA SECTION === */
.footer-cta {
    background: var(--gradient-hero) !important;
}

.footer-cta h2,
.footer-cta p {
    color: var(--text-on-dark) !important;
}

.footer-cta .btn-outline-white {
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: var(--text-on-dark) !important;
}

.footer-cta .btn-outline-white:hover {
    background: var(--bg-surface) !important;
    color: var(--primary) !important;
    border-color: var(--bg-surface) !important;
}

/* === FOOTER === */
.footer {
    background: var(--gradient-dark) !important;
}

.footer h4 {
    color: var(--text-on-dark) !important;
    border-bottom-color: var(--primary) !important;
}

.footer a {
    color: var(--text-on-dark-secondary) !important;
}

.footer a:hover {
    color: var(--primary-light) !important;
}

.footer .social-icons a {
    background: rgba(var(--primary-rgb), 0.2) !important;
    color: var(--text-on-dark) !important;
}

.footer .social-icons a:hover {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* === PRODUCT CARDS === */
.product-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.product-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.product-card .category-badge {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.product-card .featured-badge {
    background: var(--accent) !important;
    color: var(--text-on-primary) !important;
}

.product-card .btn-outline {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.product-card .btn-outline:hover {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.product-card .btn-primary {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.product-card .btn-primary:hover {
    background: var(--primary-dark) !important;
}

.product-card .spec-label {
    color: var(--primary) !important;
}

/* === RFQ SECTION === */
.rfq-section {
    background: var(--bg-secondary) !important;
}

.rfq-form {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.rfq-form input:focus,
.rfq-form textarea:focus,
.rfq-form select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

.rfq-form .btn-submit {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}

.rfq-form .btn-submit:hover {
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4) !important;
}

.rfq-sidebar {
    background: var(--gradient-hero) !important;
}

.rfq-sidebar h3,
.rfq-sidebar p,
.rfq-sidebar li {
    color: var(--text-on-dark) !important;
}

/* === CONTACT SECTION === */
.contact-section {
    background: var(--bg-secondary) !important;
}

.contact-info-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.contact-info-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.contact-info-card .icon-wrapper {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.2) 100%) !important;
}

.contact-info-card .icon-wrapper i {
    color: var(--primary) !important;
}

/* === CAREERS SECTION === */
.careers-section {
    background: var(--bg-secondary) !important;
}

.job-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.job-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.job-card .department-badge {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.2) 100%) !important;
    color: var(--primary) !important;
}

.job-card .btn-apply {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}

/* === PROCESS SECTION === */
.process-section {
    background: var(--bg-primary) !important;
}

.process-step {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.process-step:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.process-step .step-number {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}

.process-step .step-icon {
    color: var(--primary) !important;
}

/* === CAPABILITIES SECTION === */
.capabilities-section {
    background: var(--bg-secondary) !important;
}

.capability-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.capability-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.capability-card .icon-wrapper {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.2) 100%) !important;
}

.capability-card .icon-wrapper i {
    color: var(--primary) !important;
}

.capability-card:hover .icon-wrapper {
    background: var(--gradient-primary) !important;
}

.capability-card:hover .icon-wrapper i {
    color: var(--text-on-primary) !important;
}

/* === EQUIPMENT SECTION === */
.equipment-section {
    background: var(--gradient-hero) !important;
}

.equipment-section .section-title,
.equipment-section .section-subtitle {
    color: var(--text-on-dark) !important;
}

.equipment-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.equipment-card:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.equipment-card h4,
.equipment-card p,
.equipment-card .spec-item {
    color: var(--text-on-dark) !important;
}

/* === CERTIFICATES SECTION === */
.certificates-section {
    background: var(--bg-secondary) !important;
}

.certificate-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.certificate-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

/* === BRANCHES SECTION === */
.branches-section {
    background: var(--bg-primary) !important;
}

.branch-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.branch-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.branch-card .country-flag {
    border: 2px solid var(--primary) !important;
}

/* === ABOUT SECTION === */
.about-section {
    background: var(--bg-secondary) !important;
}

.about-card {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.about-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4) !important;
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
}

.about-card .icon-wrapper {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(var(--success-rgb, 16, 185, 129), 0.2) 100%) !important;
}

.about-card .icon-wrapper i {
    color: var(--primary) !important;
}

/* === STATS SECTION === */
.stats-section {
    background: var(--gradient-hero) !important;
}

.stats-section .stat-item h3 {
    color: var(--text-on-dark) !important;
}

.stats-section .stat-item p {
    color: var(--text-on-dark-secondary) !important;
}

/* === TIMELINE === */
.timeline-item::before {
    background: var(--primary) !important;
}

.timeline-item .timeline-dot {
    background: var(--primary) !important;
    border-color: var(--primary-light) !important;
}

.timeline-item .timeline-content {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

/* === PAGINATION === */
.pagination .page-link {
    border-color: rgba(var(--primary-rgb), 0.2) !important;
    color: var(--text-primary) !important;
}

.pagination .page-link:hover {
    background: rgba(var(--primary-rgb), 0.1) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.pagination .page-item.active .page-link {
    background: var(--gradient-primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* === FILTER TABS === */
.filter-tabs .tab-btn {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
    color: var(--text-primary) !important;
}

.filter-tabs .tab-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.filter-tabs .tab-btn.active {
    background: var(--gradient-primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* === SEARCH BOX === */
.search-box input {
    border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
}

.search-box input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

.search-box .btn-search {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}

/* === BREADCRUMB === */
.breadcrumb {
    background: var(--bg-secondary) !important;
}

.breadcrumb a {
    color: var(--primary) !important;
}

.breadcrumb a:hover {
    color: var(--primary-dark) !important;
}

/* === BUTTONS GLOBAL === */
.btn-primary {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}

.btn-primary:hover {
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4) !important;
}

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

.btn-outline-primary:hover {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.btn-accent {
    background: var(--gradient-cta) !important;
    color: var(--text-on-primary) !important;
}

/* === LINKS === */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

/* === FORM ELEMENTS === */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark) !important;
}

/* === SELECTION === */
::selection {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

/* === WIRE DIVIDERS === */
.wire-divider svg path,
.wire-divider svg line {
    stroke: var(--primary) !important;
}

.wire-divider svg circle {
    fill: var(--primary) !important;
}

/* === LOADING SPINNER === */
.spinner {
    border-top-color: var(--primary) !important;
}

/* === ALERTS === */
.alert-primary {
    background: rgba(var(--primary-rgb), 0.1) !important;
    border-color: var(--primary) !important;
    color: var(--primary-dark) !important;
}

/* === BADGES === */
.badge-primary {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
}

.badge-accent {
    background: var(--accent) !important;
    color: var(--text-on-primary) !important;
}

/* === TOOLTIPS === */
.tooltip {
    background: var(--bg-dark) !important;
    color: var(--text-on-dark) !important;
}

/* === MODALS === */
.modal-header {
    background: var(--gradient-hero) !important;
    color: var(--text-on-dark) !important;
}

.modal-content {
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

/* === TABLES === */
.table thead {
    background: var(--gradient-hero) !important;
    color: var(--text-on-dark) !important;
}

.table tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.05) !important;
}

/* === ACCORDION === */
.accordion-header {
    background: var(--bg-surface) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.accordion-header:hover {
    border-color: var(--primary) !important;
}

.accordion-header.active {
    background: var(--gradient-hero) !important;
    color: var(--text-on-dark) !important;
}

/* === TABS === */
.nav-tabs .nav-link {
    color: var(--text-primary) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

/* === PROGRESS BARS === */
.progress-bar {
    background: var(--gradient-primary) !important;
}

/* === DROPDOWN === */
.dropdown-menu {
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.dropdown-item:hover {
    background: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary) !important;
}

/* === COMPARE MODAL === */
#compareModal .modal-header {
    background: var(--gradient-hero) !important;
}

#compareModal .compare-table th {
    background: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-dark) !important;
}

/* === RFQ CART === */
.rfq-cart-dropdown {
    border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
}

.rfq-cart-dropdown .cart-item:hover {
    background: rgba(var(--primary-rgb), 0.05) !important;
}

.rfq-cart-dropdown .btn-checkout {
    background: var(--gradient-primary) !important;
    color: var(--text-on-primary) !important;
}


/* =====================================================
   SECTION GRADIENT CLASSES
   ===================================================== */

/* Light gradient (white to gray) */
.section-gradient-light {
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%) !important;
}

/* Light gradient reverse (gray to white) */
.section-gradient-light-reverse {
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%) !important;
}

/* Primary gradient section */
.section-gradient-primary {
    background: var(--gradient-hero) !important;
}

/* Secondary gradient section */
.section-gradient-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--tertiary) 100%) !important;
}

/* Accent gradient section */
.section-gradient-accent {
    background: linear-gradient(135deg, var(--accent) 0%, var(--highlight) 100%) !important;
}

/* =====================================================
   STAT CARD THEMED
   ===================================================== */

.stat-card-themed {
    padding: 2rem;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.08);
    transition: all 0.3s ease;
}

.stat-card-themed:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.stat-card-themed .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
}

/* =====================================================
   ICON WRAPPER THEMED
   ===================================================== */

.icon-wrapper-themed {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.25rem;
}

.icon-wrapper-themed.circle {
    border-radius: 50%;
}

.icon-wrapper-themed.large {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

.icon-wrapper-themed.xl {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

/* =====================================================
   CUSTOM BADGE THEMED
   ===================================================== */

.badge-custom {
    background: var(--gradient-accent) !important;
    color: var(--white) !important;
}

.badge-featured {
    background: var(--gradient-primary) !important;
    color: var(--white) !important;
}

/* =====================================================
   CONTACT INFO THEMED
   ===================================================== */

.contact-icon-wrapper {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon-wrapper i {
    color: var(--white);
    font-size: 1.25rem;
}

/* =====================================================
   DEPARTMENT CARD THEMED
   ===================================================== */

.dept-icon-wrapper {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.dept-icon-wrapper i {
    color: var(--white);
    font-size: 1.5rem;
}

/* =====================================================
   RFQ SIDEBAR THEMED
   ===================================================== */

.rfq-sidebar-gradient {
    background: var(--gradient-hero);
    color: var(--white);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
}

.rfq-sidebar-gradient h3 {
    color: var(--white);
    margin-bottom: 1rem;
}

/* =====================================================
   SIMPLIFIED MENU NAVIGATION (Override previous styles)
   ===================================================== */

/* Reset all complex menu effects */
.main-nav > ul > li > a::before,
.main-nav > ul > li > a::after {
    display: none !important;
    content: none !important;
}

/* Simple clean menu style */
.main-nav > ul > li > a {
    position: relative !important;
    padding: 1rem 1.25rem !important;
    color: var(--gray-700) !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
}

/* Simple underline effect */
.main-nav > ul > li > a::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: 0.5rem !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--primary) !important;
    transition: width 0.2s ease, left 0.2s ease !important;
    transform: none !important;
}

/* Hover state - simple color change and underline */
.main-nav > ul > li > a:hover {
    color: var(--primary) !important;
    background: transparent !important;
}

.main-nav > ul > li > a:hover::after {
    width: 60% !important;
    left: 20% !important;
}

/* Active state - simple underline */
.main-nav > ul > li > a.active {
    color: var(--primary) !important;
    background: transparent !important;
}

.main-nav > ul > li > a.active::after {
    width: 60% !important;
    left: 20% !important;
}

/* Remove any dot indicators */
.main-nav > ul > li > a::before {
    display: none !important;
}