/*
* 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;
    }
}

/*xoay*/
.animation-rotate {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

/*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;
    }
}