/* assets/css/video-ticker.css */

/* 1. Tổng quan */
.mvt-wrapper {
    margin-bottom: 30px;
    /* Font inherit: Kế thừa font chữ của theme hiện tại */
    font-family: inherit; 
    /* Đảm bảo box-sizing chuẩn để padding không làm vỡ layout */
    box-sizing: border_box;
}
.mvt-wrapper *,
.mvt-wrapper *:before,
.mvt-wrapper *:after {
    box-sizing: border-box;
}

/* 2. Marquee Section (Chạy chữ) */
.mvt-marquee-container {
    background: transparent;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    margin-bottom: 20px;
}

/* Track chứa nội dung */
.mvt-marquee-track {
    display: inline-flex;
    gap: 20px; /* Khoảng cách giữa các đợt lặp */
    animation: mvt-scroll var(--mvt-duration, 20s) linear infinite;
    /* Tối ưu hiệu năng: dùng GPU */
    will-change: transform; 
}

/* Nội dung bên trong */
.mvt-marquee-content {
    display: flex;
    gap: 15px; /* Khoảng cách giữa các nút slogan */
}

/* Style cho từng câu Slogan (Dạng nút/Pill) */
.mvt-text-item {
    display: inline-block;
    padding: 8px 20px;
    
    /* Dùng biến CSS để lấy màu từ cài đặt */
    background: var(--mvt-btn-bg, #0073aa); 
    color: var(--mvt-btn-text, #ffffff);
    
    border-radius: 50px; /* Bo tròn dạng viên thuốc */
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Bóng nhẹ cho đẹp */
    white-space: nowrap;
}

/* Hiệu ứng Animation */
@keyframes mvt-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* Dừng chạy khi di chuột vào */
.mvt-marquee-container:hover .mvt-marquee-track {
    animation-play-state: paused;
}


/* 3. Video Section */
.mvt-video-section {
    position: relative;
}

.mvt-video-item {
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.mvt-video-item iframe,
.mvt-video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. Grid Layout */
.mvt-video-grid {
    display: grid;
    /* Tạo số cột linh động dựa trên biến --mvt-cols */
    grid-template-columns: repeat(var(--mvt-cols, 3), 1fr); 
    gap: 20px;
}

/* 5. Slider Layout */
.mvt-video-slider {
    /* Đặt padding bottom bằng 0 vì đã xóa pagination */
    padding-bottom: 0 !important; 
}

/* Style nút điều hướng Slider */
.mvt-video-slider .swiper-button-next,
.mvt-video-slider .swiper-button-prev {
    color: #fff;
    background: rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.3s;
}
.mvt-video-slider .swiper-button-next:hover,
.mvt-video-slider .swiper-button-prev:hover {
    background: rgba(0,0,0,0.8);
}
.mvt-video-slider .swiper-button-next:after,
.mvt-video-slider .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

/* 6. Responsive */
@media screen and (max-width: 768px) {
    /* [NÂNG CẤP] Thêm padding cho mobile để không sát lề */
    .mvt-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mvt-video-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Tablet: 2 cột */
        gap: 10px;
    }
}
@media screen and (max-width: 480px) {
    .mvt-video-grid {
        grid-template-columns: 1fr !important; /* Mobile: 1 cột */
    }
}