body {
    font-family: 'Inter', sans-serif; /* Font modern */
    background: linear-gradient(135deg, #f0f4ff, #ffffff); /* Gradient nền nhẹ */
    color: #333; /* Tối hơn cho contrast */
}

/* Navbar - Glassmorphism với blur và glow */
header {
    background: rgba(255, 255, 255, 0.85); /* Nền mờ */
    backdrop-filter: blur(12px); /* Glass effect */
    transition: all 0.3s ease-in-out;
}

    header:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* Hover lift */
    }

    header a, header button {
        transition: all 0.3s ease-in-out;
    }

        /*header a:hover, header button:hover {
            color: #007bff !important;*/ /* Neon blue */
        /*}*/

/* Hero Section - Animation fade-in với neon text */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.6s;
}

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

h1 span {
    background: linear-gradient(135deg, #007bff, #00c6ff); /* Neon gradient text */
    -webkit-background-clip: text;
    color: transparent;
    transition: all 0.3s;
}

h1:hover span {
    filter: brightness(1.1); /* Brighten on hover */
}

/* Buttons - Gradient neon với pulse hover */
button, a.bg-blue-600 {
    background: linear-gradient(135deg, #007bff, #00c6ff) !important; /* Gradient neon */
    transition: all 0.3s ease-in-out;
}

    button:hover, a.bg-blue-600:hover {
        transform: scale(1.05);
        animation: pulse 1s infinite;
    }

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* Features Section - Glass cards với hover glow */
.features div.p-6 {
    background: rgba(255, 255, 255, 0.7); /* Glass bg */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 123, 255, 0.1);
    transition: all 0.3s ease-in-out;
}

    .features div.p-6:hover {
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.9); /* Tăng độ sáng */
    }

.features .rounded-full {
    transition: all 0.3s;
}

    .features .rounded-full:hover {
        transform: scale(1.1);
    }

/* How It Works Section - Grid cards tương tự features */
#how-it-works div.p-6 {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 123, 255, 0.1);
    transition: all 0.3s ease-in-out;
}

    #how-it-works div.p-6:hover {
        transform: scale(1.05);
    }

/* Why Choose Section - Flex với glass features */
.why-choose .flex.items-start {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    transition: all 0.3s;
}

    .why-choose .flex.items-start:hover {
        transform: scale(1.05);
    }

.why-choose .rounded-full {
    transition: all 0.3s;
}

    .why-choose .rounded-full:hover {
        transform: scale(1.1);
    }

/* CTA Newsletter - Glass bg với center button glow */
.cta {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    transition: all 0.3s;
}

    .cta button {
        background: linear-gradient(135deg, #007bff, #00c6ff) !important;
    }

        .cta button:hover {
            transform: scale(1.05);
            animation: pulse 1s infinite;
        }

/* Footer - Simple glass footer */
footer {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

    footer a {
        transition: all 0.3s;
    }

        footer a:hover {
            color: #007bff !important;
        }

/* Responsive cho mobile */
@media (max-width: 768px) {
    .md:flex {
        flex-direction: column;
    }

    button, a.bg-blue-600 {
        width: 100%; /* Full width */
    }

    .grid-cols-3 {
        grid-template-columns: 1fr; /* Stack cards */
    }
}