@keyframes zoomFadeOut {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(18); /* gần full */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(25); /* hoàn toàn phủ trang */
    opacity: 0; /* mờ dần thành trong suốt */
  }
}

/*mờ dần (fade in) và di chuyển lên trên (move up)*/
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUpcustom {
    from {
        opacity: 1;
        transform: translateY(70px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*Hiệu ứng bật lên từ dưới kèm theo chuyển động nảy*/
@keyframes bounceInUp {
  0% {
    opacity: 1;
    transform: translateY(30px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

/*@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}*/

/*mờ dần và trượt nhẹ từ trên xuống*/
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scaleLarge {
    0% {
        opacity: 0;
        transform: scale(2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInText {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes flipInText {
  from {
    transform: rotateX(-90deg);
    opacity: 0;
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

@keyframes fadeInCLose {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* Mờ dần hiện ra */
@keyframes fadeInBlur {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gradient chạy và quay về */
@keyframes gradientMove {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}


@keyframes marqueeText {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes zoomInLogo {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-moz-keyframes effectText {
    0% {
        background: linear-gradient(#49b9e7, #3776c3);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#FF7E5D, #f00);
        -webkit-background-clip: text;
    }
}

@-webkit-keyframes effectText {
    0% {
        background: linear-gradient(#49b9e7, #3776c3);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#FF7E5D, #f00);
        -webkit-background-clip: text;
    }
}

@-o-keyframes effectText {
    0% {
        background: linear-gradient(#49b9e7, #3776c3);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#FF7E5D, #f00);
        -webkit-background-clip: text;
    }
}

@keyframes effectText {
    0% {
        background: linear-gradient(#49b9e7, #3776c3);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#FF7E5D, #f00);
        -webkit-background-clip: text;
    }
}

@-moz-keyframes effectTextTwo {
    0% {
        background: linear-gradient(#fff, #fff);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#ffce5d, #ffe300);
        -webkit-background-clip: text;
    }
}

@-webkit-keyframes effectTextTwo {
    0% {
        background: linear-gradient(#fff, #fff);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#ffce5d, #ffe300);
        -webkit-background-clip: text;
    }
}

@-o-keyframes effectTextTwo {
    0% {
        background: linear-gradient(#fff, #fff);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#ffce5d, #ffe300);
        -webkit-background-clip: text;
    }
}

@keyframes effectTextTwo {
    0% {
        background: linear-gradient(#fff, #fff);
        -webkit-background-clip: text;
    }

    100% {
        background: linear-gradient(#ffce5d, #ffe300);
        -webkit-background-clip: text;
    }
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes anime {
    0% {
        color: grey;
        letter-spacing: 1px;
        text-shadow: 1px 1px 0 #000;
        transform: translateY(0)
    }

    50% {
        color: #ffc107;
        letter-spacing: 5px;
        text-shadow: 5px 10px 1px #000;
        transform: translateY(-10px)
    }

    100% {
        color: grey;
        letter-spacing: 1px;
        text-shadow: 1px 1px 0 #000;
        transform: translateY(0)
    }
}

/* end name*/
@-webkit-keyframes MaskPlay {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0
    }

    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0
    }
}

@keyframes MaskPlay {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0
    }

    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0
    }
}