.blog-wrap.style5 .post-thumb{
  padding-top: 131.85%;
  overflow: hidden;
  border-radius: 10px;
}

/* ============================================
   STYLE5 - FADE IN UP ANIMATION
   ============================================ */

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

/* Initial state - ẩn tất cả slides (KHÔNG áp dụng trong Elementor editor) */
body:not(.elementor-editor-active) .t888-list-post-slider.style5 .swiper-slide {
    opacity: 0;
    transform: translateY(80px);
}

/* Hiển thị bình thường trong Elementor editor */
body.elementor-editor-active .t888-list-post-slider.style5 .swiper-slide {
    opacity: 1;
    transform: translateY(0);
}

/* Chỉ animate khi có class 'animate-visible' (trigger by scroll) - KHÔNG trong editor */
body:not(.elementor-editor-active) .t888-list-post-slider.style5.animate-visible .swiper-slide {
    animation: fadeInUpSlide 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Stagger delay cho từng slide - giảm xuống 150ms giữa các item */
.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(1) {
    animation-delay: 0s;
}

.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(2) {
    animation-delay: 0.15s;
}

.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(3) {
    animation-delay: 0.3s;
}

.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(4) {
    animation-delay: 0.45s;
}

.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(5) {
    animation-delay: 0.6s;
}

.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(6) {
    animation-delay: 0.75s;
}

.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(7) {
    animation-delay: 0.9s;
}

.t888-list-post-slider.style5.animate-visible .swiper-slide:nth-child(8) {
    animation-delay: 1.05s;
}

.blog-grid.style8 {
    background: #fff;
    margin-bottom: 0;
}


.style8-inner {
    display: grid;
    grid-template-columns: 266px 1fr;
}

.style8-left {
    display: flex;
    flex-direction: column;
    padding-right: 60px;
}

.style8-eyebrow {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.style8-eyebrow span{
  color: var(--forth-color);
}

.style8-title {
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 44px;
  margin-top: 0;
}

.style8-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #E90380;
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    width: fit-content;
    text-decoration: none;
}

.style8-btn .arrow {
    transition: transform .3s ease;
}

.style8-btn:hover .arrow {
    transform: translateX(4px);
}

.style8-arrows {
    margin-top: 44px;
    display: flex;
    gap: 20px;
}
.style8-arrows .t888-prev,
.style8-arrows .t888-next {
    cursor: pointer;
    transition: all 0.3s ease;
}
.style8-arrows .t888-prev:hover svg circle,
.style8-arrows .t888-next:hover svg circle{
    fill: var(--forth-color);         
    fill-opacity: 1;
    stroke: var(--forth-color);  
}

.style8-right {
    overflow: hidden;
}

.style8-right .swiper-container {
    overflow: visible;
}
.blog-grid.style8 .posts-wrap .grid-default .post-thumb{
    padding-top: 56.5%;
}