/* Animation chung */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Áp dụng */
.intro,
.hot-news,
.latest-jobs,
.contact-section {
    animation: fadeUp 0.8s ease forwards;
}

.btn-login,
.btn-register,
.btn-search,
.contact-btn {
    transition: all 0.3s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.btn-register:hover,
.btn-search:hover,
.contact-btn:hover {
    transform: translateY(-3px) scale(1.03);
}

nav ul li a {
    position: relative;
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: #ff6600;
    transition: 0.3s;
}

nav ul li a:hover::after {
    width: 100%;
}

.news-item,
.job-card,
.estate-card {
    transition: all 0.3s ease;
}

.news-item:hover,
.job-card:hover,
.estate-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.social-icon {
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2) rotate(5deg);
}

/* 
.dotted-circle {
    animation: rotateCircle 20s linear infinite;
} */

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate > * {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.5s ease;
}

.animate.show > * {
    opacity: 1;
    transform: translateY(0);
}

/* delay từng item */
.animate.show > *:nth-child(1) { transition-delay: 0.1s; }
.animate.show > *:nth-child(2) { transition-delay: 0.2s; }
.animate.show > *:nth-child(3) { transition-delay: 0.3s; }
.animate.show > *:nth-child(4) { transition-delay: 0.4s; }