/* ==========================================
           CUSTOM VIDEO PLAYER (JWPLAYER STYLE)
        ========================================== */
/* Custom thanh trượt (Range Input) */
input[type="range"].vn2-slider {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: height 0.2s ease;
}
input[type="range"].vn2-slider:hover {
  height: 6px;
}

/* Ẩn track mặc định */
input[type="range"].vn2-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
}

/* Nút cục tròn (Thumb) */
input[type="range"].vn2-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #ffffff;
  margin-top: -4px; /* Căn giữa thumb với track */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s;
  opacity: 0; /* Ẩn đi, chỉ hiện khi hover wrapper */
}
.player-wrapper:hover input[type="range"].vn2-slider::-webkit-slider-thumb {
  opacity: 1;
}
input[type="range"].vn2-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* Menu Settings Glassmorphism */
.vn2-settings-menu {
  background: rgba(24, 24, 27, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* Custom scrollbar nhỏ cho menu setting */
.vn2-settings-menu::-webkit-scrollbar {
  width: 4px;
}
.vn2-settings-menu::-webkit-scrollbar-thumb {
  background: #52525b;
  border-radius: 4px;
}