/* CSS Document */

#la1 {
    position: absolute;
    top: 0;
    -webkit-animation: 3s run infinite;
    -moz-animtion: 3s run infinite;
    animation: 3s run infinite;
    -ms-animation: 3s run infinite;
    ;
}

@-webkit-keyframes run {
    0% {
        top: 30px;
        left: 300px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0 deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 500px;
        left: 1000px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        -ms-transform: rotate(0deg);
        opacity: 0;
    }
}

@-moz-keyframes run {
    0% {
        top: 30px;
        left: 300px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0 deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 500px;
        left: 1000px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        -ms-transform: rotate(0deg);
        opacity: 0;
    }
}

@keyframes run {
    0% {
        top: 30px;
        left: 300px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0 deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 500px;
        left: 1000px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        -ms-transform: rotate(0deg);
        opacity: 0;
    }
}

#la2 {
    position: absolute;
    top: 0;
    -webkit-animation: 3s run2 infinite;
    -moz-animtion: 3s run2 infinite;
    animation: 3s run2 infinite;
    -ms-animation: 3s run2 infinite;
}

@-webkit-keyframes run2 {
    0% {
        top: 0;
        left: 500px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0 deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: scale(1.0,1.0);
    }

    70% {
        opacity: 1;
    }

    100% {
        top: 500px;
        left: 800px;
        opacity: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90 deg);
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        opacity: 0;
    }
}

@-moz-keyframes run2 {
    0% {
        top: 0;
        left: 500px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0 deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: scale(1.0,1.0);
    }

    70% {
        opacity: 1;
    }

    100% {
        top: 500px;
        left: 800px;
        opacity: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90 deg);
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        opacity: 0;
    }
}

@-moz-keyframes run2 {
    0% {
        top: 0;
        left: 500px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0 deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: scale(1.0,1.0);
    }

    70% {
        opacity: 1;
    }

    100% {
        top: 500px;
        left: 800px;
        opacity: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90 deg);
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        opacity: 0;
    }
}

@keyframes run2 {
    0% {
        top: 0;
        left: 500px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0 deg);
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: scale(1.0,1.0);
    }

    70% {
        opacity: 1;
    }

    100% {
        top: 500px;
        left: 800px;
        opacity: 0;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90 deg);
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        opacity: 0;
    }
}

#la3 {
    position: absolute;
    top: 0;
    -webkit-animation: 5s run3 infinite;
    -moz-animtion: 5s run3 infinite;
    animation: 5s run3 infinite;
    -ms-animation: 5s run3 infinite;
    ;
}

#la1, #la2, #la3, #la4, #la5 {
    text-align: center; /* Căn giữa */
    margin-bottom: 10px; /* Khoảng cách giữa các hình */
}

    #la1 img, #la2 img, #la3 img, #la4 img, #la5 img {
        width: 100px; /* Thay đổi kích thước ảnh */
        height: auto;
    }

        #la1 img:hover, #la2 img:hover, #la3 img:hover, #la4 img:hover, #la5 img:hover {
            transform: scale(1.1); /* Tăng kích thước ảnh khi hover */
            transition: transform 0.3s ease; /* Hiệu ứng mượt */
        }

@-webkit-keyframes run3 {
    0% {
        top: 0px;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    30% {
        top: 0px;
        left: 50px;
        opacity: 1;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180 deg);
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    100% {
        top: 700px;
        left: 700px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }
}

@-moz-keyframes run3 {
    0% {
        top: 0px;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    30% {
        top: 0px;
        left: 50px;
        opacity: 1;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180 deg);
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    100% {
        top: 700px;
        left: 700px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }
}

@keyframes run3 {
    0% {
        top: 0px;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    30% {
        top: 0px;
        left: 50px;
        opacity: 1;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180 deg);
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    100% {
        top: 700px;
        left: 700px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }
}

#la4 {
    position: absolute;
    top: 0;
    -webkit-animation: 8s run4 infinite;
    -moz-animtion: 8s run4 infinite;
    animation: 8s run4 infinite;
    -ms-animation: 8s run4 infinite;
}

@-webkit-keyframes run4 {
    0% {
        top: 0;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    30% {
        opacity: 1;
        top: 0;
        left: 50px;
    }

    80% {
        opacity: 1;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270 deg);
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360 deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        top: 700px;
        left: 900px;
        opacity: 0;
    }
}

@-moz-keyframes run4 {
    0% {
        top: 0;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    30% {
        opacity: 1;
        top: 0;
        left: 50px;
    }

    80% {
        opacity: 1;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270 deg);
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360 deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        top: 700px;
        left: 900px;
        opacity: 0;
    }
}

@keyframes run4 {
    0% {
        top: 0;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    30% {
        opacity: 1;
        top: 0;
        left: 50px;
    }

    80% {
        opacity: 1;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270 deg);
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360 deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        top: 700px;
        left: 900px;
        opacity: 0;
    }
}

#la5 {
    position: absolute;
    top: 0;
    -webkit-animation: 8s run5 infinite;
    -moz-animtion: 8s run5 infinite;
    animation: 8s run5 infinite;
    -ms-animation: 8s run5 infinite;
}

@-webkit-keyframes run5 {
    0% {
        top: 0;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    60% {
        opacity: 1;
        top: 100px;
        left: 200px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180 deg);
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    65% {
        opacity: 1;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270 deg);
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360 deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        top: 500px;
        left: 1000px;
        opacity: 0;
    }
}

@-moz-keyframes run5 {
    0% {
        top: 0;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    60% {
        opacity: 1;
        top: 100px;
        left: 200px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180 deg);
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    65% {
        opacity: 1;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270 deg);
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360 deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        top: 500px;
        left: 1000px;
        opacity: 0;
    }
}

@keyframes run5 {
    0% {
        top: 0;
        left: 50px;
        opacity: 0;
        -webkit-transform: rotate(00deg);
        -moz-transform: rotate(00 deg);
        transform: rotate(00deg);
        -ms-transform: rotate(00deg);
    }

    60% {
        opacity: 1;
        top: 100px;
        left: 200px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180 deg);
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    65% {
        opacity: 1;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270 deg);
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360 deg);
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        top: 500px;
        left: 1000px;
        opacity: 0;
    }
}