/*.player_container { display:flex; flex-wrap:wrap; padding:20px; gap:20px; }
    .main { flex:1 1 60%; min-width:320px; }
    .main iframe { width:100%; height:540px; border:none; border-radius:8px; }
    .video-title { margin:10px 0; font-size:1.2rem; font-weight:600; }
    .playlist { flex:1 1 300px; max-height:560px; overflow-y:auto; }
    .playlist-item { display:flex; align-items:center; cursor:pointer; margin-bottom:12px; transition:background .2s; padding:4px; border-radius:6px; }
    .playlist-item:hover { background:#f0f0f0; }
    .playlist-item img { width:120px; height:70px; object-fit:cover; border-radius:4px; }
    .playlist-item p { margin-left:10px; font-size:0.9rem; }
    @media(max-width:768px){
      .player_container { flex-direction:column; }
      .main iframe { height:320px; }
      .playlist { width:100%; max-height:none; overflow-x:auto; display:flex; }
      .playlist-item { flex-direction:column; min-width:150px; margin-right:10px; }
      .playlist-item img { width:100%; height:100px; }
      .playlist-item p { margin:5px 0 0; text-align:center; }
    }*/


    .player-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 20px;
  }

  .main-player {
    flex: 1 1 60%;
    max-width: 960px;
    min-width: 320px;
  }

  .main-player iframe {
    width: 100%;
    height: 540px;
    border-radius: 10px;
    border: none;
  }

  .video-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 10px 0;
    text-transform: uppercase;
  }

  .playlist {
    flex: 1 1 320px;
    max-width: 360px;
    overflow-y: auto;
    max-height: 560px;
  }

  .playlist-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s;
  }

  .playlist-item:hover {
    background: #f0f0f0;
  }

  .playlist-item img {
    width: 120px;
    height: 70px;
    border-radius: 6px;
    object-fit: cover;
  }

  .playlist-item p {
    margin-left: 10px;
    font-size: 0.9rem;
    font-weight: 500;
  }

  @media (max-width: 768px) {
    .player-container {
      flex-direction: column;
      align-items: center;
    }

    .main-player iframe {
      height: 320px;
    }

    .playlist {
      width: 100%;
      display: flex;
      overflow-x: auto;
      max-height: none;
    }

    .playlist-item {
      flex-direction: column;
      min-width: 150px;
      margin-right: 10px;
    }

    .playlist-item img {
      width: 100%;
      height: 100px;
    }

    .playlist-item p {
      margin: 5px 0 0;
      text-align: center;
    }
  }