[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-family: Inter, sans-serif; }

.gradient-text {
    background: linear-gradient(135deg,#1d4ed8 0%,#3b82f6 45%,#8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-grid {
    background-image:
        linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.045) 1px, transparent 1px);
    background-size: 42px 42px;
}

.glass {
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.9);
}

.course-card {
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}

.course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 70px rgba(15,23,42,.12);
}

.course-card .icon {
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.course-card:hover .icon {
    transform: scale(1.1) rotate(-5deg);
}

.nav-link {
    position: relative;
}

.nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: #2563eb;
    transition: width .3s ease;
}

.nav-link:hover:after { width: 100%; }

.hero-person {
    filter: drop-shadow(0 25px 35px rgba(30,64,175,.18));
}

/*Float chat*/

#floating-zalo {
    isolation: isolate;
}

/* Pulse ring */
.zalo-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 9999px;
    border: 2px solid rgba(37, 99, 235, .25);
    pointer-events: none;
}

.zalo-pulse-1 {
    animation: zaloPulse 2.8s ease-out infinite;
}

.zalo-pulse-2 {
    animation: zaloPulse 2.8s ease-out 1.4s infinite;
}

@keyframes zaloPulse {
    0% {
        transform: scale(.75);
        opacity: .8;
    }

    70% {
        transform: scale(1.4);
        opacity: 0;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Floating effect */
#floating-zalo > span:nth-of-type(3) {
    animation: zaloFloat 3.5s ease-in-out infinite;
}

@keyframes zaloFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Pause floating on hover */
#floating-zalo:hover > span:nth-of-type(3) {
    animation-play-state: paused;
}

/* Mobile */
@media (max-width: 639px) {
    #floating-zalo > span:last-child {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .zalo-pulse,
    #floating-zalo > span:nth-of-type(3) {
        animation: none !important;
    }
}