/* I)bài viết slide */
.wt-post-slide {
    padding: 0 !important;
    position: relative !important;
}

.wt-post-slide:not(.slick-initialized) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 30px !important;
}

.wt-post-slide:not(.slick-initialized) article.uagb-post__inner-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;

    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 1025px) {
    .wt-post-slide article.clone {
        display: none !important;
    }
}

/* Tablet: giống mobile */
@media (min-width: 768px) and (max-width: 1024px) {

    .wt-post-slide:not(.slick-initialized) {
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .wt-post-slide:not(.slick-initialized)::-webkit-scrollbar {
        display: none !important;
    }

    .wt-post-slide:not(.slick-initialized) article.uagb-post__inner-wrap {
        flex: 0 0 calc(48% - 8px) !important;
        width: calc(48% - 8px) !important;
        max-width: calc(48% - 8px) !important;
        scroll-snap-align: start !important;
    }
}

/* ── KHI SLICK ĐÃ CHẠY ── */
.wt-post-slide.slick-initialized {
    overflow: hidden !important;
}

.wt-post-slide.slick-initialized .slick-list {
    overflow: visible !important;
    margin: 0 !important;
}

.wt-post-slide .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

.wt-post-slide .slick-slide {
    float: none !important;
    height: auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

.wt-post-slide .slick-slide:first-child {
    padding-left: 0 !important;
}

.wt-post-slide .slick-slide:last-child {
    padding-right: 0 !important;
}

.wt-post-slide .slick-slide article,
.uagb-post-grid.uagb-post__columns-4:not(.is-grid) article,
.uagb-post-grid.uagb-post__columns-mobile-1:not(.is-grid) article,
.uagb-post-grid.uagb-post__columns-tablet-2:not(.is-grid) article {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .wt-post-slide:not(.slick-initialized) {
        gap: 10px !important;
        overflow-x: scroll !important;
        /* Cho phép cuộn ngang */
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Ẩn scrollbar */
    }

    /* Ẩn scrollbar Chrome */
    .wt-post-slide:not(.slick-initialized)::-webkit-scrollbar {
        display: none !important;
    }

    .wt-post-slide:not(.slick-initialized) article.uagb-post__inner-wrap {
        flex: 0 0 calc(100vw - 40px) !important;
        width: 80% !important;
        max-width: calc(100vw - 40px) !important;
        scroll-snap-align: start !important;
        /* Snap về đầu mỗi bài */
    }
}

/* Ẩn mũi tên */
.wt-post-slide button.slick-arrow,
.wt-post-slide .slick-next,
.wt-post-slide .slick-prev {
    display: none !important;
}

/* ================================================================
   Swap Indicator for Post Carousel (mobile/tablet <= 1024px)
   ================================================================ */
.wt-post-slide-swap-wrapper {
    position: relative;
    width: 100%;
    max-width: 1212px;
    margin-left: auto;
    margin-right: auto;
}

.wt-post-slide-swap-indicator-container {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .wt-post-slide-swap-indicator-container {
        display: block;
    }
}

.wt-hand-icon {
    animation: wt-hand-swipe 1.6s ease-in-out infinite;
}

@keyframes wt-hand-swipe {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-6px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(6px);
    }
    100% {
        transform: translateX(0);
    }
}