/* Fade mờ dần */
.fadeout { 
  animation: fadeout .5s forwards;
}
@keyframes fadeout {
  to { opacity: 0; }
}

/* Bay sang trái */
.fadeout-left {
  animation: fadeoutLeft .6s forwards;
}
@keyframes fadeoutLeft {
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

/* Bay sang phải */
.fadeout-right {
  animation: fadeoutRight .6s forwards;
}
@keyframes fadeoutRight {
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* Bay lên */
.fadeout-up {
  animation: fadeoutUp .6s forwards;
}
@keyframes fadeoutUp {
  to {
    opacity: 0;
    transform: translateY(-40px);
  }
}

/* Rơi xuống */
.fadeout-down {
  animation: fadeoutDown .6s forwards;
}
@keyframes fadeoutDown {
  to {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* Thu nhỏ */
.scaleout {
  animation: scaleOut .5s forwards;
}
@keyframes scaleOut {
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Phóng to rồi biến mất */
.zoomout {
  animation: zoomOut .5s forwards;
}
@keyframes zoomOut {
  to {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* lắc lư */
.shake-top {
	-webkit-animation: shake-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	animation: shake-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@-webkit-keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}