.hover15 {
    position: relative;
}

.hover15::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, .2);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.hover15:hover::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
}

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

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }

}

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

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }

}

/* Shine */
.hover14 {
    position: relative;
    overflow: hidden;
}

.hover14::before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.hover14:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }

}

@keyframes shine {
    100% {
        left: 125%;
    }

}

@keyframes bounce-arrow {
    0%, 100% {
        transform: translateY(1px);
    }

    50% {
        transform: translateY(-1px);
    }

}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Di chuyển phần tử từ dưới lên */
    }

    to {
        opacity: 1;
        transform: translateY(0); /* Về vị trí gốc */
    }

}

/* Hiệu ứng quay */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

/* Hiệu ứng khi phần tử vào viewport */
@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: scale(0.9); /* Thu nhỏ phần tử để nó có vẻ như đang di chuyển lên từ phía dưới */
    }

    to {
        opacity: 1;
        transform: scale(1); /* Về kích thước gốc */
    }

}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px); /* Di chuyển từ phải qua 50px khi ẩn */
    }

    to {
        opacity: 1;
        transform: translateX(0); /* Về vị trí gốc */
    }

}

/* Hiệu ứng khi phần tử vào viewport */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px); /* Di chuyển từ trái qua 50px khi ẩn */
    }

    to {
        opacity: 1;
        transform: translateX(0); /* Về vị trí gốc */
    }

}

/* Hiệu ứng khi phần tử vào viewport */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px); /* Di chuyển xuống dưới 50px khi ẩn */
    }

    to {
        opacity: 1;
        transform: translateY(0); /* Về vị trí gốc */
    }

}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes shake {
    0% {
        transform: rotate(0deg); /* Bắt đầu ở góc 0 */
    }
    10% {
        transform: rotate(-10deg); /* Quay về bên trái 10 độ */
    }
    20% {
        transform: rotate(10deg); /* Quay về bên phải 10 độ */
    }
    30% {
        transform: rotate(-10deg); /* Quay về bên trái 10 độ */
    }
    40% {
        transform: rotate(10deg); /* Quay về bên phải 10 độ */
    }
    50% {
        transform: rotate(-10deg); /* Quay về bên trái 10 độ */
    }
    60% {
        transform: rotate(10deg); /* Quay về bên phải 10 độ */
    }
    70% {
        transform: rotate(-10deg); /* Quay về bên trái 10 độ */
    }
    80% {
        transform: rotate(10deg); /* Quay về bên phải 10 độ */
    }
    90% {
        transform: rotate(-10deg); /* Quay về bên trái 10 độ */
    }
    100% {
        transform: rotate(0deg); /* Trở lại vị trí ban đầu */
    }
}