/* Bắt đầu hiệu ứng css mũi tên */
/*
.menu-item:hover .icon-svg {
  position: absolute;
  animation: jump-infinite 0.3s 1;
}

@keyframes jump-infinite {
    0% {
        right: calc(0px - 4px);
    }
    50% {
        right: calc(0px + 10px);
    }
    100% {
        right: calc(0px - 4px);
    }
}
*/
/* Kết thúc hiệu ứng css mũi tên */

/* Hiệu ứng css xoay 1 vòng khi hover menu-item */
/* .menu-item:hover .icon-svg {
    position: absolute;
    animation: rotate-once 0.3s 1;
    transform: translateY(-50%);
}

@keyframes rotate-once {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
} */

/* Kết thúc hiệu ứng css Menu ở sidebar*/

/* Hiệu ứng css adownloadAppName */
.adownload-animated-text::before {
    content: "CapCut";
    animation: adownloadAppName 3s infinite;
}

@keyframes adownloadAppName {

    0%,
    50% {
        content: "Airdrop";
    }

    51%,
    100% {
        content: "Airdrop iPhone";
    }
}

/* Kết thúc hiệu ứng css adownloadAppName */

/* Bắt đầu hiệu ứng icon download */
.icon-downl-svg {
    position: relative;
    width: 23px;
    height: 23px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-downl-svg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: unset;
    border-radius: 5px;
    box-sizing: border-box;
}

.icon-downl-svg svg {
    position: relative;
    animation: icon-downl-svg 2s ease-in-out infinite;
}

@keyframes icon-downl-svg {
    0% {
        bottom: 60%;
    }

    to {
        bottom: -100%;
    }
}

/* Kết thúc hiệu ứng icon download */

/* Bắt đầu css lắc icon hello-top */
.shake-hello-top img {
    /* display: block;*/
    animation: ringring 2s ease-in-out infinite;
    width: 25px;
    height: auto;
}

@keyframes ringring {
    0% {
        transform: rotate(-15deg);
    }

    2% {
        transform: rotate(15deg);
    }

    4% {
        transform: rotate(-18deg);
    }

    6% {
        transform: rotate(18deg);
    }

    8% {
        transform: rotate(-22deg);
    }

    10% {
        transform: rotate(22deg);
    }

    12% {
        transform: rotate(-18deg);
    }

    14% {
        transform: rotate(18deg);
    }

    16% {
        transform: rotate(-12deg);
    }

    18% {
        transform: rotate(12deg);
    }

    20% {
        transform: rotate(0deg);
    }
}

/* Kết thúc css lắc icon hello-top */

/* Bắt đầu css rung lắc icon-svg khi hover */
.icon-svg,
.button-play,
.button-play-error {
    transition: transform 0.3s;
    /* Thêm transition để tạo hiệu ứng mượt mà */
}

/* .post-audio:hover .post-title .icon-svg,
.post-standard:hover .post-title .icon-svg,
.audio-post-list:hover .section-title .icon-svg,
.standard-post-list:hover .section-title .icon-svg,
.menu-box:hover .section-title .icon-svg,
.all-post-list:hover .section-title .icon-svg,
.pending-post-list:hover .section-title .icon-svg, */
#footer .social-media a:hover .icon-svg {
    animation: jump-shaking 0.83s 1;
}

@keyframes jump-shaking {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateY(-5px)
    }

    35% {
        transform: translateY(-5px) rotate(17deg)
    }

    55% {
        transform: translateY(-5px) rotate(-17deg)
    }

    65% {
        transform: translateY(-5px) rotate(17deg)
    }

    75% {
        transform: translateY(-5px) rotate(-17deg)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

.download-share-box .button-item:hover .icon-svg {
    animation: jump-shaking-download-share 0.83s 1;
}

@keyframes jump-shaking-download-share {
    0% {
        transform: translateX(0)
    }

    25% {
        transform: translateY(-2px)
    }

    35% {
        transform: translateY(-2px) rotate(17deg)
    }

    55% {
        transform: translateY(-2px) rotate(-17deg)
    }

    65% {
        transform: translateY(-2px) rotate(17deg)
    }

    75% {
        transform: translateY(-2px) rotate(-17deg)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

/* Kết thúc css rung lắc icon-svg khi hover */

/* Hiệu ứng css xoay 1 vòng khi hover load-more */
.button-load-more:hover .icon-svg,
.load-more-standard-posts:hover .icon-svg,
.load-more-related-posts:hover .icon-svg {
    position: relative;
    animation: rotate-once-load-more 0.3s 1;
}

@keyframes rotate-once-load-more {
    0% {
        transform: rotate(0deg);
    }

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

/* Kết thúc hiệu ứng css xoay 1 vòng khi hover load-more */