/* VIET69 Theme v1.0.5 — Video.js progress knob alignment repair. */
.vtt-player-viewport .video-js .vjs-progress-holder {
    position: relative !important;
    overflow: visible !important;
}

.vtt-player-viewport .video-js .vjs-play-progress {
    overflow: visible !important;
}

/*
 * Replace the Video.js icon-font glyph with a real CSS knob. This prevents
 * baseline/font changes from moving the marker above or below the seek bar.
 */
.vtt-player-viewport .video-js .vjs-play-progress::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: var(--ec18-player-accent, #f47c20) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .55) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translate(50%, -50%) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.vtt-player-viewport .video-js .vjs-progress-control:hover .vjs-play-progress::before,
.vtt-player-viewport .video-js .vjs-progress-control:focus-within .vjs-play-progress::before {
    width: 14px !important;
    height: 14px !important;
}

@media (max-width: 767px) {
    .vtt-player-viewport .video-js .vjs-play-progress::before {
        width: 10px !important;
        height: 10px !important;
        border-width: 2px !important;
    }

    .vtt-player-viewport .video-js .vjs-progress-control:hover .vjs-play-progress::before,
    .vtt-player-viewport .video-js .vjs-progress-control:focus-within .vjs-play-progress::before {
        width: 12px !important;
        height: 12px !important;
    }
}