.swiper_container.yt-container {

    padding: 9vw 20px 40px;

    overflow: hidden;

}



.swiper_container.yt-container .ytSwiper {

    overflow: visible !important;

}



.ytSwiper .yt-card {

    border: 1px solid #544D1D;

    background: linear-gradient(140deg, rgba(255, 193, 0, 0.74) 0.6%, rgb(60 72 82 / 30%) 100%);

    box-shadow: -5px -5px 250px 0px #FFFFFF05 inset;

    padding: 20px;

    display: flex;

    height: auto !important;

    flex-direction: column;

    gap: 20px;



}



.ytSwiper .swiper-button-next {

    right: -20px;

}



.ytSwiper .swiper-button-prev {

    left: -20px;

}



.ytSwiper .swiper-button-next,

.ytSwiper .swiper-button-prev {

    width: 30px;

    height: 30px;

    padding: 16px;

    border: 0.5px solid #816E25;

    background-color: #111719;

    border-style: solid;

    border-radius: 50px;

    color: #000b1b;

}



.ytSwiper .swiper-button-next::after,

.ytSwiper .swiper-button-prev::after {

    font-size: 16px;

    color: #ffcb29;

}



.ytSwiper .yt-card .thumb-wrap img {

    height: 100%;

    max-height: 220px;

    width: 100%;

    object-fit: cover;

}



.play-overlay-container {

    position: relative;

    /* Makes absolute positioning work inside this */

    display: inline-block;

    /* Or block/flex depending on your layout */

    width: 100%;

    /* Adjust to fit your thumbnail size */

}



.play-overlay-container .thumbnail-img {

    display: block;

    width: 100%;

    height: auto;

}



.play-overlay-container .play-btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    /* Perfect centering */

    pointer-events: none;

    /* Optional: allows clicks to pass through to the thumbnail/link */

}



.play-overlay-container .play-btn img {

    width: 60px;

    /* Your existing size – adjust as needed (e.g., 80px for larger) */

    height: 60px;

    display: block;

}



/* Optional: Add a semi-transparent dark overlay on hover (like YouTube) */

.play-overlay-container:hover::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

    pointer-events: none;

}



/* Optional: Scale up play button on hover */

.play-overlay-container:hover .play-btn img {

    transform: scale(1.1);

    transition: transform 0.3s ease;

}



/* .ytSwiper .yt-card .yt-content P {

    display: flex;

    flex-direction: column;

    gap: 20px;

} */



.ytSwiper .yt-card .yt-content .yt-info .yt-date {

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    color: #DFDFDF;

}



.yt-playlist-info .yt-stats #ytViews,

.yt-playlist-info .yt-stats #ytLikes,

.yt-playlist-info .yt-stats #ytComments,

.yt-playlist-info .yt-stats #ytDate {

    font-size: 14px;

    font-weight: 400;

    line-height: 26px;

    color: #DFDFDF;

}



.ytSwiper .yt-card .yt-content .yt-info .yt-title {

    font-size: 18px;

    font-weight: 600;

    line-height: 28px;

    text-transform: uppercase;

    color: #FFFFFF;

    margin: 5px 0px;

}



.ytSwiper .yt-card .yt-content .yt-info .yt-desc {

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

    color: #FFFFFF;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

}



.ytSwiper .yt-card .yt-content .yt-meta {

    display: flex;

    flex-direction: row;

    gap: 20px;

    margin: 0;

}



.ytSwiper .yt-card .yt-content .yt-meta .metacount {

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 400;

    line-height: 24px;

    display: flex;

    flex-direction: row;

    gap: 5px;

    margin: 0;

}



.ytSwiper .yt-card .yt-content .yt-meta .metacount span {

    color: #FFCB29;

    font-weight: 500;

}



/* Modal */

.yt-modal {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .85);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 0px 20px;

}



.yt-modal.active {

    display: flex;

    width: 100vw;
    height: 100vh;

}



.yt-modal-content .yt-close {

    position: absolute;

    right: -15px;

    top: -15px;

    background: #FFCB29;

    border: 1px solid #00193F;

    color: #00193F;

    font-size: 14px;

}



.yt-modal-content {

    background: #001D4A;

    padding: 40px;

    border: 1px solid #745800;

    box-shadow: 0px 0px 64px 2px #745800;

    width: 100%;

    max-width: 850px;

    height: 100%;

    max-height: 750px;

    overflow: hidden;

    margin: 0px auto;

    position: relative;

    z-index: 1;

    gap: 30px;

    display: flex;

    overflow: visible;

    flex-direction: column;

    animation: 0.6s ease 0s 1 normal forwards running fSFqQu5381;

}



/* Close button (updated version) */

.yt-close {

    position: absolute;

    top: 16px;

    right: 24px;

    font-size: 32px;

    color: #fff;

    background: rgba(0, 0, 0, 0.5);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

}



/* Player wrapper - responsive */

.yt-player-wrapper {

    position: relative;

    padding-bottom: 56.25%;

    /* 16:9 */

    height: 0;

    flex-shrink: 0;

    background: #000;

}



.yt-player-wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



/* Older player style (kept for compatibility if needed) */

.yt-player iframe {

    width: 100%;

    height: 480px;

    border: 0;

}



/* Details */

.yt-details {

    padding: 18px 20px;

}



.yt-details h2 {

    font-size: 20px;

    margin: 0 0 8px;

}



.yt-details p {

    font-size: 14px;

    color: #333;

    line-height: 1.6;

}





.yt-video-details {

    flex: 1;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    box-sizing: border-box;

    min-height: 0;

    gap: 20px;

}



.yt-video-details::-webkit-scrollbar {

    width: 8px;

}



.yt-video-details::-webkit-scrollbar-track {

    background: #222;

}



.yt-video-details::-webkit-scrollbar-thumb {

    background: #555;

    border-radius: 4px;

}



.yt-video-details::-webkit-scrollbar-thumb:hover {

    background: #777;

}



.yt-video-details .yt-model-main-container {

    padding-right: 10px;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.yt-playlist-info .yt-description {

    font-family: 'Kanit';

    font-weight: 400;

    font-size: 16px;

    line-height: 26px;

}



.yt-playlist-info .yt-description br {

    padding-bottom: 5px;

}



.yt-video-title {

    font-family: 'Kanit' !important;

    font-weight: 500 !important;

    font-size: 40px !important;

    line-height: 45px !important;

    color: #FFFFFF !important;

    margin: 0 !important;

}



.yt-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    font-size: 14px;

    color: #aaa;

    margin-top: 10px;

    margin-bottom: 20px;

}



.yt-description {

    font-size: 15px;

    line-height: 1.6;

    color: #eee;

}



.yt-description a {

    color: #ffcb29a8;

    text-decoration: underline;

}



.yt-description a:hover {

    opacity: 0.8;

    color: #9c9cb9;

}



.yt-description .hashtag {

    color: #3ea6ff;

}



/* Playlist thumbnails in modal */





.yt-playlist-thumbs .swiper-slide {

    cursor: pointer;

    transition: opacity 0.3s;

    overflow: hidden;

}

/* Navigation arrows for thumbs */

.swiper-button-next.thumbs-next,

.swiper-button-prev.thumbs-prev {

    width: 20px;

    height: 20px;

    padding: 16px;

    border: 0.5px solid #816E25;

    background-color: #111719;

    border-style: solid;

    border-radius: 50px;

    color: #000b1b;

}



.swiper-button-next.thumbs-next::after,

.swiper-button-prev.thumbs-prev::after {

    font-size: 16px;

    color: #ffcb29;

}



.yt-playlist-thumbs .thumbs-next::after,

.yt-playlist-thumbs .thumbs-prev::after {

    font-family: "swiper-icons";

    font-size: 18px;

}



#ytPlaylistThumbs {

    width: 100%;

    overflow: hidden;

}



#ytPlaylistThumbs .swiper-wrapper {

    overflow: visible;

}



#ytPlaylistThumbs .swiper-slide {

    width: 200px;

    height: 100px;

    cursor: pointer;

}



.ytModal_container {

    overflow: hidden;

}



#ytPlaylistThumbs img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 6px;

}





#ytChannelLink img.yt-channel-logo {

    display: block;

    width: 32px;

    height: 32px;

    border-radius: 1000px;

    flex-shrink: 0;

}

body:has(.yt-modal.active) {
    overflow: hidden !important;
}

@media (max-width: 1023.98px) {

    .yt-modal-content {

        padding: 20px;

        max-height: 730px;

    }

}



@media (max-width: 767.98px) {

    .ytSwiper .yt-card .yt-content .yt-meta {

        gap: 10px !important;

        flex-wrap: wrap;

    }



    .yt-modal-content {

        padding: 20px;

        max-height: 650px;

    }



    .yt-video-title {

        font-size: 30px !important;

        line-height: 40px !important;

    }

}



@media (max-width: 599.98px) {

    .ytSwiper .yt-card .yt-content .yt-meta {

        gap: 10px !important;

        flex-wrap: wrap;

    }









}