.video-wrapper {
position: relative;
width: 100%;
border-radius: 0.5rem;
overflow: hidden;
background: #000;
}


.hero-video {
width: 100%;
height: auto;
display: block;
max-height: 65vh;
background: #000;
}


.play-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(2,6,23,0.30), rgba(2,6,23,0.10));
    border: none;
    cursor: pointer;
    transition: opacity 240ms ease;
    color: #fff;
    font-size: 0;
    z-index: 2; /* อยู่เหนือ video ก่อนเริ่ม */
}

.play-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* ไม่บังปุ่ม controls */
}



.play-overlay svg { filter: drop-shadow(0 6px 18px rgba(2,6,23,0.45)); transition: transform 180ms ease; }
.play-overlay:hover svg { transform: scale(1.06); }