/* style.css */
/* Các tùy chỉnh không thể hiện qua Tailwind Utilities */

html {
    scroll-behavior: smooth;
}

/* Background Lưới cho Hero Section */
.hero-bg {
    background: radial-gradient(circle at center, #f0fdf4 0%, #f9fafb 70%);
}
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}

/* Dark Mode Background Lưới */
.dark .hero-bg {
    background: radial-gradient(circle at center, #1a2e1a 0%, #111111 70%);
}
.dark .hero-bg::before {
    background-image: linear-gradient(rgba(57, 255, 20, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(57, 255, 20, 0.03) 1px, transparent 1px);
}

/* Hiệu ứng Reveal (Trượt lên khi cuộn) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hiệu ứng trượt xuống cho slogan */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
    animation: fadeInDown 1s ease forwards;
}

/* Hiệu ứng xuất hiện cho Modal */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-50px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-modal-in {
    animation: modalFadeIn 0.4s ease-out forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.dark ::-webkit-scrollbar-track {
    background: #111;
}
::-webkit-scrollbar-thumb {
    background: #008050;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #39FF14;
}