@keyframes fall {
    0% {
        transform: translateY(-100px) translateX(0px) rotate(0deg);
        opacity: 1;
        /* Bắt đầu với độ mờ đầy đủ */
    }

    25% {
        transform: translateY(25vh) translateX(-30px) rotate(-15deg);
        opacity: 1;
    }

    50% {
        transform: translateY(50vh) translateX(30px) rotate(15deg);
        opacity: 0.8;
    }

    75% {
        transform: translateY(75vh) translateX(-20px) rotate(-10deg);
        opacity: 0.5;
    }

    100% {
        transform: translateY(100vh) translateX(0px) rotate(0deg);
        opacity: 0;
        /* Giảm dần về 0 */
    }
}


.flower {
    position: fixed;
    top: -50px;
    font-size: 24px;
    color: #FFEB3B;
    /* Màu vàng cho hoa mai */
    opacity: 0.8;
    z-index: 9999;
    animation: fall linear infinite;
    animation-duration: calc(8s + (2 * var(--random-duration)));
    left: calc(100vw * var(--random-x));
}



.flower:nth-child(odd) {
    animation-duration: 8s;
}

.flower:nth-child(even) {
    animation-duration: 10s;
}

/* Tạo hiệu ứng ngẫu nhiên cho mỗi bông hoa */
.flower {
    --random-x: random();
    /* Biến ngẫu nhiên theo trục X */
    --random-duration: random();
    /* Biến ngẫu nhiên cho thời gian */
}