/* Ẩn phần tử ban đầu */
.feature-services .swiper-slide img, .feature-services .swiper-slide div {
    opacity: 0;
    transform: translateY(50px); /* Di chuyển xuống dưới 50px khi ẩn */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Hiệu ứng khi phần tử vào viewport */
.feature-services .swiper-slide.visible img {
    animation: slideInFromBottom 1s ease-out forwards;
}

.feature-services .swiper-slide.visible div {
    animation: slideInFromLeft 0.5s ease-out forwards;
}

/* Ẩn phần tử ban đầu */
.why-choose-us .left-wcs img, .why-choose-us .right-wcs h3, .why-choose-us .right-wcs h2, .why-choose-us .right-wcs p, .why-choose-us .right-wcs ul {
    opacity: 0;
    transform: translateY(50px); /* Di chuyển xuống dưới 50px khi ẩn */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.why-choose-us.visible .left-wcs img {
    opacity: 0;
    transform: translateY(150px);
    transition: all 2s;
}

.why-choose-us.visible .left-wcs img {
    opacity: 1;
    transform: translateY(0);
}

.why-choose-us.visible .right-wcs h3,.why-choose-us.visible .right-wcs h2, .why-choose-us.visible .right-wcs p, .why-choose-us.visible .right-wcs ul {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

/* Hiệu ứng riêng cho từng phần tử trong ul */
.why-choose-us.visible .right-wcs ul li {
    animation: slideInFromLeft 1s ease-out forwards;
    animation-delay: calc(0.1s * var(--i)); /* Độ trễ cho từng item */
}

/* Ẩn phần tử ban đầu */
.home-services .top-home-services, .home-services .main-home-services {
    opacity: 0;
    transform: translateX(50px); /* Di chuyển từ phải qua 50px khi ẩn */
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.top-home-services.visible h3 img{
    opacity: 1;
    animation: shake 1s ease forwards;
    animation-delay: 1s;
}
/* Hiệu ứng khi phần tử vào viewport */
.home-services .top-home-services.visible {
    animation: slideInFromLeft 1s ease-out forwards;
}

.home-services .main-home-services.visible {
    animation: slideInFromRight 1s ease-out forwards;
}

.home-services .main-home-services .content-hs >div.active img {
    opacity: 1;
}

.home-services .tab-service-mobile.visible img, .home-services .tab-content-placeholder.visible img {
    animation: slideIn 1s ease-out forwards;
}

/* Ẩn phần tử ban đầu */
.customers .swiper-slide {
    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 */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hiệu ứng khi phần tử vào viewport */
.customers .swiper-slide.visible {
    animation: fadeInScaleUp 0.6s ease forwards;
}

/* Ẩn phần tử ban đầu */
.feedback h3,.feedback h2, /* Tiêu đề */
.feedback .swiper-slide {
    opacity: 0;
    transform: translateY(20px); /* Di chuyển phần tử từ dưới lên */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hiệu ứng khi phần tử vào viewport */
.feedback h3.visible,.feedback h2.visible, /* Tiêu đề */
.feedback .swiper-slide.visible {
    animation: fadeInSlideUp 0.6s ease forwards;
}

/* Ẩn phần tử ban đầu */
.title-portfolio h3,.title-portfolio h2, /* Tiêu đề */
.title-portfolio span {
    opacity: 0;
    transform: translateY(20px); /* Di chuyển từ dưới lên */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hiệu ứng khi phần tử vào viewport */
.title-portfolio h3.visible,.title-portfolio h2.visible,
.title-portfolio span.visible, /* Mô tả */
.content-portfolio .swiper-slide {
    animation: fadeInSlideUp 0.6s ease forwards;
}

/* Hiệu ứng cho các phần tử trong .numberism li (từ trái sang phải) */
.cta-section .numberism li {
    opacity: 0;
    transform: translateX(-50px); /* Di chuyển từ trái sang phải */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.cta-section .numberism li.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Hiệu ứng cho .textbox (từ trên xuống) */
.cta-section .textbox {
    opacity: 0;
    transform: translateX(-50px); /* Di chuyển từ trên xuống */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cta-section .textbox.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Hiệu ứng cho form (từ phải sang trái) */
.cta-section .gform_wrapper {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1.6s ease, transform 1.6s ease;
}

.cta-section .gform_wrapper.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Hiệu ứng cho tiêu đề h3 (từ trên xuống) */
.blog-section .container-c >h3,.blog-section .container-c >h2 {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.blog-section .container-c >h3.visible,.blog-section .container-c >h2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hiệu ứng cho các tab (từ trái sang phải) */
.blog-section .tab-blog li {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.blog-section .tab-blog li.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Hiệu ứng cho nút "View All Blog" (từ phải sang trái) */
.blog-section .btn-vew-all-blog a {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.blog-section .btn-vew-all-blog a.visible {
    opacity: 1;
    transform: translateY(0);
}

.numberism strong {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.numberism .visible strong {
    opacity: 1;
    transform: translateY(0);
}

.content-section-blog .blog-tab .swiper-slide-item, .tab-content-placeholder li, #content-hs-1 li {
    animation: fadeInSlideUp 0.6s ease forwards;
}

.content-hs ul li {
    position: relative;
    overflow: hidden;
}

.content-hs ul li img {
    transition: transform 0.4s ease;
    width: 100%;
    height: auto;
}

.content-hs ul li:hover img {
    transform: scale(1.1);
}