/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.animation {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1; /*infinite: vô hạn*/
    -webkit-animation-direction: normal;
            animation-direction: normal; /*normal reverse alternate alternate-reverse*/
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; /*hoạt ảnh smooth*/
}

    .animation.animation-iteration-1 {
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
    }

    .animation.animation-iteration-2 {
        -webkit-animation-iteration-count: 2;
                animation-iteration-count: 2;
    }

    .animation.animation-iteration-3 {
        -webkit-animation-iteration-count: 3;
                animation-iteration-count: 3;
    }

    .animation.animation-iteration-4 {
        -webkit-animation-iteration-count: 4;
                animation-iteration-count: 4;
    }

    .animation.animation-iteration-5 {
        -webkit-animation-iteration-count: 5;
                animation-iteration-count: 5;
    }

    .animation.animation-iteration-10 {
        -webkit-animation-iteration-count: 10;
                animation-iteration-count: 10;
    }

    .animation.animation-iteration-infinite {
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite; /*lặp lại vô hạn*/
    }

/*animation text*/
.animation-wordtext {
    -webkit-animation-name: appear-right;
            animation-name: appear-right;
}

/*animation shapes*/
.animation-top {
    -webkit-animation-name: appear-top;
            animation-name: appear-top;
}

.animation-right {
    -webkit-animation-name: appear-right;
            animation-name: appear-right;
}

.animation-bottom {
    -webkit-animation-name: appear-bottom;
            animation-name: appear-bottom;
}

.animation-left {
    -webkit-animation-name: appear-left;
            animation-name: appear-left;
}

.animation-top-left {
    -webkit-animation-name: appear-top-left;
            animation-name: appear-top-left;
}

.animation-top-right {
    -webkit-animation-name: appear-top-right;
            animation-name: appear-top-right;
}

.animation-bottom-right {
    -webkit-animation-name: appear-bottom-right;
            animation-name: appear-bottom-right;
}

.animation-bottom-left {
    -webkit-animation-name: appear-bottom-left;
            animation-name: appear-bottom-left;
}

.animation-round-correct {
    -webkit-animation-name: appear-round-correct;
            animation-name: appear-round-correct;
}

.animation-round-wrong {
    -webkit-animation-name: appear-round-wrong;
            animation-name: appear-round-wrong;
}

.animation-zigzag-top {
    -webkit-animation-name: appear-zigzag-top;
            animation-name: appear-zigzag-top;
}

.animation-zigzag-right {
    -webkit-animation-name: appear-zigzag-right;
            animation-name: appear-zigzag-right;
}

.animation-zigzag-bottom {
    -webkit-animation-name: appear-zigzag-bottom;
            animation-name: appear-zigzag-bottom;
}

.animation-zigzag-left {
    -webkit-animation-name: appear-zigzag-left;
            animation-name: appear-zigzag-left;
}



@-webkit-keyframes appear-top {
    0% {
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}



@keyframes appear-top {
    0% {
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@-webkit-keyframes appear-right {
    0% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes appear-right {
    0% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@-webkit-keyframes appear-bottom {
    0% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes appear-bottom {
    0% {
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@-webkit-keyframes appear-left {
    0% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes appear-left {
    0% {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}



@-webkit-keyframes appear-top-left {
    0% {
        -webkit-transform: translate(-100%,-100%);
                transform: translate(-100%,-100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}



@keyframes appear-top-left {
    0% {
        -webkit-transform: translate(-100%,-100%);
                transform: translate(-100%,-100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@-webkit-keyframes appear-top-right {
    0% {
        -webkit-transform: translate(100%,-100%);
                transform: translate(100%,-100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-top-right {
    0% {
        -webkit-transform: translate(100%,-100%);
                transform: translate(100%,-100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@-webkit-keyframes appear-bottom-right {
    0% {
        -webkit-transform: translate(100%,100%);
                transform: translate(100%,100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-bottom-right {
    0% {
        -webkit-transform: translate(100%,100%);
                transform: translate(100%,100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@-webkit-keyframes appear-bottom-left {
    0% {
        -webkit-transform: translate(-100%,100%);
                transform: translate(-100%,100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-bottom-left {
    0% {
        -webkit-transform: translate(-100%,100%);
                transform: translate(-100%,100%);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}



@-webkit-keyframes appear-round-correct {
    from {
        -webkit-transform: rotate(0deg) translate(-768px) rotate(0deg);
                transform: rotate(0deg) translate(-768px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);
                transform: rotate(360deg) translate(0) rotate(-360deg);
    }
}



@keyframes appear-round-correct {
    from {
        -webkit-transform: rotate(0deg) translate(-768px) rotate(0deg);
                transform: rotate(0deg) translate(-768px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);
                transform: rotate(360deg) translate(0) rotate(-360deg);
    }
}

@-webkit-keyframes appear-round-wrong {
    from {
        -webkit-transform: rotate(0deg) translate(-768px) rotate(0deg);
                transform: rotate(0deg) translate(-768px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg) translate(0) rotate(360deg);
                transform: rotate(-360deg) translate(0) rotate(360deg);
    }
}

@keyframes appear-round-wrong {
    from {
        -webkit-transform: rotate(0deg) translate(-768px) rotate(0deg);
                transform: rotate(0deg) translate(-768px) rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg) translate(0) rotate(360deg);
                transform: rotate(-360deg) translate(0) rotate(360deg);
    }
}



@-webkit-keyframes appear-zigzag-top {
    0% {
        -webkit-transform: translate(-800px,-800px);
                transform: translate(-800px,-800px);
    }

    25% {
        -webkit-transform: translate(600px,-600px);
                transform: translate(600px,-600px);
    }

    50% {
        -webkit-transform: translate(-400px,-400px);
                transform: translate(-400px,-400px);
    }

    75% {
        -webkit-transform: translate(200px,-200px);
                transform: translate(200px,-200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}



@keyframes appear-zigzag-top {
    0% {
        -webkit-transform: translate(-800px,-800px);
                transform: translate(-800px,-800px);
    }

    25% {
        -webkit-transform: translate(600px,-600px);
                transform: translate(600px,-600px);
    }

    50% {
        -webkit-transform: translate(-400px,-400px);
                transform: translate(-400px,-400px);
    }

    75% {
        -webkit-transform: translate(200px,-200px);
                transform: translate(200px,-200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@-webkit-keyframes appear-zigzag-right {
    0% {
        -webkit-transform: translate(800px,-800px);
                transform: translate(800px,-800px);
    }

    25% {
        -webkit-transform: translate(600px,600px);
                transform: translate(600px,600px);
    }

    50% {
        -webkit-transform: translate(400px,-400px);
                transform: translate(400px,-400px);
    }

    75% {
        -webkit-transform: translate(200px,200px);
                transform: translate(200px,200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-zigzag-right {
    0% {
        -webkit-transform: translate(800px,-800px);
                transform: translate(800px,-800px);
    }

    25% {
        -webkit-transform: translate(600px,600px);
                transform: translate(600px,600px);
    }

    50% {
        -webkit-transform: translate(400px,-400px);
                transform: translate(400px,-400px);
    }

    75% {
        -webkit-transform: translate(200px,200px);
                transform: translate(200px,200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@-webkit-keyframes appear-zigzag-bottom {
    0% {
        -webkit-transform: translate(-800px,800px);
                transform: translate(-800px,800px);
    }

    25% {
        -webkit-transform: translate(600px,600px);
                transform: translate(600px,600px);
    }

    50% {
        -webkit-transform: translate(-400px,400px);
                transform: translate(-400px,400px);
    }

    75% {
        -webkit-transform: translate(200px,200px);
                transform: translate(200px,200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-zigzag-bottom {
    0% {
        -webkit-transform: translate(-800px,800px);
                transform: translate(-800px,800px);
    }

    25% {
        -webkit-transform: translate(600px,600px);
                transform: translate(600px,600px);
    }

    50% {
        -webkit-transform: translate(-400px,400px);
                transform: translate(-400px,400px);
    }

    75% {
        -webkit-transform: translate(200px,200px);
                transform: translate(200px,200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@-webkit-keyframes appear-zigzag-left {
    0% {
        -webkit-transform: translate(-800px,-800px);
                transform: translate(-800px,-800px);
    }

    25% {
        -webkit-transform: translate(-600px,600px);
                transform: translate(-600px,600px);
    }

    50% {
        -webkit-transform: translate(-400px,-400px);
                transform: translate(-400px,-400px);
    }

    75% {
        -webkit-transform: translate(-200px,200px);
                transform: translate(-200px,200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-zigzag-left {
    0% {
        -webkit-transform: translate(-800px,-800px);
                transform: translate(-800px,-800px);
    }

    25% {
        -webkit-transform: translate(-600px,600px);
                transform: translate(-600px,600px);
    }

    50% {
        -webkit-transform: translate(-400px,-400px);
                transform: translate(-400px,-400px);
    }

    75% {
        -webkit-transform: translate(-200px,200px);
                transform: translate(-200px,200px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}


/*rung*/
.animation-vibrate {
    -webkit-animation-name: appear-vibrate;
            animation-name: appear-vibrate;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
}

@-webkit-keyframes appear-vibrate {
    0% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }

    20% {
        -webkit-transform: translate(-5px,-5px);
                transform: translate(-5px,-5px);
    }

    40% {
        -webkit-transform: translate(5px,5px);
                transform: translate(5px,5px);
    }

    60% {
        -webkit-transform: translate(-5px,5px);
                transform: translate(-5px,5px);
    }

    80% {
        -webkit-transform: translate(5px,-5px);
                transform: translate(5px,-5px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-vibrate {
    0% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }

    20% {
        -webkit-transform: translate(-5px,-5px);
                transform: translate(-5px,-5px);
    }

    40% {
        -webkit-transform: translate(5px,5px);
                transform: translate(5px,5px);
    }

    60% {
        -webkit-transform: translate(-5px,5px);
                transform: translate(-5px,5px);
    }

    80% {
        -webkit-transform: translate(5px,-5px);
                transform: translate(5px,-5px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

/*lung lay*/
.animation-waver {
    -webkit-animation-name: appear-vibrate;
            animation-name: appear-vibrate;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}

@-webkit-keyframes appear-waver {
    0% {
        -webkit-transform: translate(-20px,-20px);
                transform: translate(-20px,-20px);
    }

    25% {
        -webkit-transform: translate(20px,20px);
                transform: translate(20px,20px);
    }

    50% {
        -webkit-transform: translate(-20px,20px);
                transform: translate(-20px,20px);
    }

    75% {
        -webkit-transform: translate(20px,-20px);
                transform: translate(20px,-20px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

@keyframes appear-waver {
    0% {
        -webkit-transform: translate(-20px,-20px);
                transform: translate(-20px,-20px);
    }

    25% {
        -webkit-transform: translate(20px,20px);
                transform: translate(20px,20px);
    }

    50% {
        -webkit-transform: translate(-20px,20px);
                transform: translate(-20px,20px);
    }

    75% {
        -webkit-transform: translate(20px,-20px);
                transform: translate(20px,-20px);
    }

    100% {
        -webkit-transform: translate(0,0);
                transform: translate(0,0);
    }
}

/*nhay len*/
.animation-jump {
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-name: appear-jump;
            animation-name: appear-jump;
}

@-webkit-keyframes appear-jump {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    25%, 75% {
        -webkit-transform: translate3d(0, -50px, 0);
                transform: translate3d(0, -50px, 0);
    }

    50%, 100% {
        -webkit-transform: translate3d( 0,0, 0);
                transform: translate3d( 0,0, 0);
    }
}

@keyframes appear-jump {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    25%, 75% {
        -webkit-transform: translate3d(0, -50px, 0);
                transform: translate3d(0, -50px, 0);
    }

    50%, 100% {
        -webkit-transform: translate3d( 0,0, 0);
                transform: translate3d( 0,0, 0);
    }
}



/*di chuyen qua lai*/
.animation-move {
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-name: appear-move;
            animation-name: appear-move;
}

@-webkit-keyframes appear-move {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80%, 100% {
        -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
    }
}

@keyframes appear-move {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80%, 100% {
        -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
    }
}



/*hien thi tu tu*/
.animation-fadein {
    -webkit-animation-name: fade-in;
            animation-name: fade-in;
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*an di tu tu*/
.animation-fadeout {
    -webkit-animation-name: fade-out;
            animation-name: fade-out;
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/*nhấp nháy*/
.animation-flicker {
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-name: flicker;
            animation-name: flicker;
    -webkit-animation-iteration-count: 3;
            animation-iteration-count: 3;
}

@-webkit-keyframes flicker {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flicker {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*nhấp nháy*/
.animation-flicker-limit {
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-name: flicker-limit;
            animation-name: flicker-limit;
    -webkit-animation-iteration-count: 3;
            animation-iteration-count: 3;
}

@-webkit-keyframes flicker-limit {
    0% {
        opacity: 0.75;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.75;
    }
}

@keyframes flicker-limit {
    0% {
        opacity: 0.75;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.75;
    }
}

/*unset*/
@media (prefers-reduced-motion) {
    .animation {
        -webkit-animation: unset !important;
                animation: unset !important;
        -webkit-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
}