/* =========================================================================
   CSS cho Video Player
   Bao gồm cả thumbnail và iframe nhúng
   ========================================================================= */

.mrel-video-player {
    position: relative;
    width: 100%;
    /* Tỷ lệ 16:9 */
    padding-bottom: 56.25%; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Đảm bảo video không tràn ra ngoài */
}

/* Thẻ bao bọc bên trong để căn giữa */
.mrel-video-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Kiểu dáng nút play */
.mrel-video-play-button {
    border: none;
    background: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 10;
}

.mrel-video-play-button:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Đảm bảo biểu tượng tam giác SVG hiển thị đúng */
.mrel-video-play-button svg {
    width: 40px;
    height: 40px;
    fill: white; /* Đặt màu trắng để ghi đè */
    margin: 0; /* Loại bỏ margin không cần thiết */
    flex-shrink: 0; /* Đảm bảo SVG không bị co lại */
}

/* Kiểu dáng cho iframe và video nhúng */
.mrel-video-player iframe,
.mrel-video-player video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}