.video-highlight-container{
display:flex;
gap:20px;
background:#f5f5f5;
padding:20px;
border-radius:10px;
}

.video-main{
flex:2;
}

.video-main iframe{
width:100%;
height:500px;
border-radius:10px;
}

.video-thumbnails{
flex:1;
max-height:500px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:10px;
}

.video-thumbnail{
display:flex;
gap:10px;
cursor:pointer;
padding:8px;
border-radius:8px;
transition:0.3s;
}

.video-thumbnail img{
width:120px;
height:70px;
object-fit:cover;
border-radius:5px;
}

.video-thumbnail .title{
font-size:14px;
line-height:1.4;
}

.video-thumbnail.active{
border:2px solid #3b82f6;
background:#eef5ff;
}
@media (max-width: 768px){

.video-highlight-container{
flex-direction: column;
}

.video-main{
width:100%;
}

.video-main iframe{
height:250px;
}

.video-thumbnails{
width:100%;
max-height:none;
}

.video-thumbnail img{
width:110px;
height:70px;
}

}