:root {
    /* Light Theme */
    --color-bg: #ffffff; /* Nền chính */
    --color-bg-primary: #f0f4f9; /* Nền phụ (dùng cho card, section phụ) */
    --color-text: #1e1e1e; /* Text chính */
    --color-primary: #007BFF; /* Xanh dương đậm – chủ đạo */
    --color-secondary: #6c757d; /* Xám trung tính */
    --color-border: #dee2e6; /* Viền input/card */
    --color-input-bg: #f8f9fa; /* Background input */
    --color-hover: #0056b3; /* Hover cho nút/link */
}

[data-theme="dark"] {
    /* Dark Theme */
    --color-bg: #1e1e1e; /* Nền chính */
    --color-bg-primary: #2c2f33; /* Nền phụ – card, section */
    --color-text: #e0e0e0; /* Text chính */
    --color-primary: #3399ff; /* Xanh sáng – chủ đạo */
    --color-secondary: #a0a0a0; /* Xám trung tính sáng hơn */
    --color-border: #444; /* Viền input/card */
    --color-input-bg: #2a2a2a; /* Background input */
    --color-hover: #66b2ff; /* Hover cho nút/link */
}

/* Body */
body.app-body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Section */
.hero,
.features,
.video-section,
.contact-section {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Card */
.feature-card {
    background-color: var(--color-input-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: background-color 0.3s;
}

    .feature-card h5, .feature-card p {
        color: var(--color-text);
    }

/* Theme button */
.theme-toggle {
    background-color: var(--color-secondary);
    color: #fff;
}

    .theme-toggle:hover {
        background-color: var(--color-hover);
    }
body {
    background-color: var(--color-secondary);
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }

.text-primary {
    color: #007bff;
}

.text-secondary {
    color: #5c636a;
}

.border-primary {
    border-color: #007bff !important;
}
.nav-link {
    color: var(--color-text);
    transition: color 0.3s;
}

    .nav-link:hover {
        color: var(--color-primary);
        background: var(--color-secondary);
        font-weight: bold;
    }

    .nav-link.active {
        font-weight: bold;
        color: var(--color-primary);
        border-bottom: 1px solid var(--color-primary);
    }