:root {
    --bg-primary: #f8fafc; /* slate-50 */
    --bg-secondary: #ffffff;
    --bg-tertiary: #e2e8f0; /* slate-200 */
    --text-primary: #0f172a; /* slate-900 */
    --text-secondary: #64748b; /* slate-500 */
    --border-color: #e2e8f0; /* slate-200 */
    --theme-primary: #4CAF50;
    --theme-primary-light: #E8F5E9;
    --theme-primary-dark: #2E7D32;
    --success: #16a34a;
    --error: #dc2626;
    --warning: #d97706;
    --info: #2563eb;
}

.dark {
    --bg-primary: #0f172a; /* slate-900 */
    --bg-secondary: #1e293b; /* slate-800 */
    --bg-tertiary: #334155; /* slate-700 */
    --text-primary: #f8fafc; /* slate-50 */
    --text-secondary: #94a3b8; /* slate-400 */
    --border-color: #334155; /* slate-700 */
    --theme-primary: #4CAF50;
    --theme-primary-light: #1B5E20;
    --theme-primary-dark: #C8E6C9;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hiệu ứng scroll animation */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hiệu ứng cho header khi scroll */
.header-scrolled {
    background-color: var(--bg-primary) !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* FAQ Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile responsive images */
@media (max-width: 768px) {
    .hero-image {
        width: 200px !important;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .hero-image {
        width: 150px !important;
        max-width: 150px;
    }
}

/* Optimized avatar images */
.avatar-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

/* Logo optimization */
.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}