.video-js.yt-like {
    --glass: rgba(0,0,0,.45);
    --glass2: rgba(0,0,0,.25);
    --txt: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.72);
    --red: #ff0033;
    --pill-h: 44px;
    --pad-x: 16px;
    --pad-b: 12px;
    --gap-progress: 12px;
}

    /* Control bar nằm dưới cùng + flex layout */
    .video-js.yt-like .vjs-control-bar {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0 !important;
        top: auto !important;
        z-index: 20 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 var(--pad-x) var(--pad-b) !important;
        height: calc(var(--pill-h) + var(--pad-b) + var(--gap-progress) + 18px) !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* ✅ Progress luôn ở ngay trên pill (ép top:auto để không nhảy lên trên) */
    .video-js.yt-like .vjs-progress-control {
        position: absolute !important;
        left: var(--pad-x) !important;
        right: var(--pad-x) !important;
        top: auto !important;
        bottom: calc(var(--pad-b) + var(--pill-h) + var(--gap-progress)) !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 21 !important;
    }

    .video-js.yt-like .vjs-progress-holder {
        height: 4px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.22) !important;
    }

    .video-js.yt-like .vjs-load-progress {
        background: rgba(255,255,255,.14) !important;
        border-radius: 999px !important;
    }

    .video-js.yt-like .vjs-play-progress {
        background: var(--red) !important;
        border-radius: 999px !important;
    }

        .video-js.yt-like .vjs-play-progress:before {
            content: "";
            position: absolute;
            right: -6px;
            top: 50%;
            width: 12px;
            height: 12px;
            transform: translateY(-50%);
            border-radius: 50%;
            background: var(--red);
            box-shadow: 0 2px 10px rgba(0,0,0,.35);
        }

    /* Ẩn spacer */
    .video-js.yt-like .vjs-custom-control-spacer,
    .video-js.yt-like .vjs-spacer {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
    }

    /* 2 pill */
    .video-js.yt-like .yt-left,
    .video-js.yt-like .yt-right {
        position: relative !important;
        height: var(--pill-h) !important;
        border-radius: 999px !important;
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: linear-gradient(to top, var(--glass), var(--glass2)) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 8px 20px rgba(0,0,0,.25);
    }

    .video-js.yt-like .yt-left {
        flex: 0 1 auto !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .video-js.yt-like .yt-right {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    /* Icon chung */
    .video-js.yt-like .vjs-button .vjs-icon-placeholder:before {
        color: var(--txt) !important;
        font-size: 18px !important;
        line-height: var(--pill-h) !important;
    }

    /* Left sizes */
    .video-js.yt-like .yt-left .vjs-play-control,
    .video-js.yt-like .yt-left .vjs-volume-panel {
        width: 40px !important;
        height: var(--pill-h) !important;
    }

    /* Time giữ "/" + duration */
    .video-js.yt-like .yt-left .vjs-time-control,
    .video-js.yt-like .yt-left .vjs-time-divider {
        width: auto !important;
        min-width: unset !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 13px !important;
        color: var(--txt) !important;
        padding: 0 !important;
    }

    .video-js.yt-like .yt-left .vjs-time-divider {
        color: var(--muted) !important;
        margin: 0 6px !important;
    }

    /* Right icon size */
    .video-js.yt-like .yt-right .vjs-control {
        width: 38px !important;
        height: var(--pill-h) !important;
        background: transparent !important;
    }

    /* Playback rate đẹp */
    .video-js.yt-like .vjs-playback-rate {
        width: auto !important;
        min-width: 44px !important;
        padding: 0 10px !important;
    }

        .video-js.yt-like .vjs-playback-rate .vjs-playback-rate-value {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: var(--pill-h) !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            color: var(--txt) !important;
            line-height: 1 !important;
        }

    /* Skip buttons: icon-only (giống ảnh cũ) */
    .video-js.yt-like .yt-right .yt-skip-btn {
        width: 44px !important;
        height: var(--pill-h) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .video-js.yt-like .yt-right .yt-skip-btn .yt-skip-ic {
            width: 24px !important;
            height: 24px !important;
            display: block !important;
            shape-rendering: geometricPrecision;
        }

    /* Volume: hover mới hiện (desktop), mobile thì hiện luôn */
    .video-js.yt-like .yt-left .vjs-volume-panel {
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .video-js.yt-like .yt-left .vjs-volume-control {
        display: block !important;
        width: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: width .15s ease, opacity .15s ease !important;
    }

    .video-js.yt-like .yt-left .vjs-volume-panel:hover .vjs-volume-control,
    .video-js.yt-like .yt-left .vjs-volume-panel:focus-within .vjs-volume-control {
        width: 90px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .video-js.yt-like .yt-left .vjs-slider {
        height: 4px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.22) !important;
    }

    .video-js.yt-like .yt-left .vjs-volume-level {
        height: 4px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.9) !important;
    }

        .video-js.yt-like .yt-left .vjs-volume-level:before {
            display: none !important;
        }

@media (max-width:480px) {
    .video-js.yt-like {
        --pill-h: 40px;
        --pad-x: 12px;
    }

        .video-js.yt-like .yt-right .vjs-control {
            width: 34px !important;
        }

        .video-js.yt-like .vjs-button .vjs-icon-placeholder:before {
            font-size: 16px !important;
            line-height: var(--pill-h) !important;
        }

        /* mobile không hover -> hiện volume luôn */
    .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
        display: none !important
    }
        .video-js.yt-like .yt-left {
            gap: 0px !important
        }
}