.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;
}

    .video-js.yt-like .vjs-control-bar {
        background: transparent !important;
        height: 72px !important;
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* progress line */
    .video-js.yt-like .vjs-progress-control {
        position: absolute !important;
        left: 14px !important;
        right: 14px !important;
        bottom: 58px !important;
        height: 18px !important;
        padding: 0 !important;
        margin: 0 !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);
        }

    /* pills */
    .video-js.yt-like .yt-left,
    .video-js.yt-like .yt-right {
        position: absolute;
        bottom: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        border-radius: 999px;
        padding: 0 10px;
        background: linear-gradient(to top, var(--glass), var(--glass2));
        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 {
        left: 14px;
    }

    .video-js.yt-like .yt-right {
        right: 14px;
    }

    /* chỉ áp cho nút play + volume (không đụng time) */
    .video-js.yt-like .yt-left .vjs-play-control,
    .video-js.yt-like .yt-left .vjs-volume-panel {
        width: 40px;
        height: 44px;
    }

    /* time để auto */
    .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;
    }

    .video-js.yt-like .yt-left .vjs-button .vjs-icon-placeholder:before {
        font-size: 18px;
        line-height: 44px;
        color: var(--txt);
    }

    /* only volume icon */
    .video-js.yt-like .yt-left .vjs-volume-control {
        display: none !important;
    }

    .video-js.yt-like .yt-left .vjs-volume-panel {
        width: 40px !important;
    }

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

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


    .video-js.yt-like .yt-right .vjs-control {
        width: 38px;
        height: 44px;
        background: transparent !important;
    }

    .video-js.yt-like .yt-right .vjs-button .vjs-icon-placeholder:before {
        font-size: 18px;
        line-height: 44px;
        color: var(--txt);
    }

    /* ✅ skip buttons: show number "10" clearly */
    .video-js.yt-like .yt-skip-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .video-js.yt-like .yt-skip-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .video-js.yt-like .yt-skip-num {
        display: inline-block;
        font-size: 11px;
        line-height: 1;
        color: var(--txt);
        font-weight: 700;
        margin-top: 2px;
    }

    /* menu */
    .video-js.yt-like .vjs-menu-button-popup .vjs-menu {
        background: rgba(20,20,20,.92);
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,.08);
        overflow: hidden;
    }


    /* ===== FIX: left pill không giãn nữa, giữ duration trên mobile ===== */

    /* controlbar flex, nhưng không space-between */
    .video-js.yt-like .vjs-control-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* quan trọng */
        gap: 10px !important;
        height: 72px !important;
        padding: 0 12px 12px !important;
        box-sizing: border-box !important;
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent !important;
    }

    /* 2 pill không absolute */
    .video-js.yt-like .yt-left,
    .video-js.yt-like .yt-right {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    /* ✅ left pill: co theo nội dung, không chiếm thừa */
    .video-js.yt-like .yt-left {
        flex: 0 1 auto !important; /* không flex:1 */
        width: fit-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ✅ right pill: tự đẩy qua phải */
    .video-js.yt-like .yt-right {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* progress vẫn nằm trên pill */
    .video-js.yt-like .vjs-progress-control {
        bottom: 58px !important;
    }

    /* Make playback rate (1x) look clean */
    .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: 44px !important; /* match pill height */
            line-height: 1 !important;
            padding: 0 !important;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            letter-spacing: .2px !important;
            color: var(--txt) !important;
        }

        /* Remove weird button focus/spacing inside */
        .video-js.yt-like .vjs-playback-rate .vjs-menu-button {
            width: auto !important;
        }

    /* Center the whole control in right pill */
    .video-js.yt-like .yt-right .vjs-playback-rate {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


/* ===== Mobile: gọn lại nhưng GIỮ duration ===== */
@media (max-width: 480px) {
    .video-js.yt-like .yt-right .yt-skip-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

        .video-js.yt-like .yt-right .yt-skip-btn .yt-icon {
            width: 17px !important;
            height: 17px !important;
        }

        .video-js.yt-like .yt-right .yt-skip-btn .yt-skip-num {
            font-size: 11px !important;
        }
    .video-js.yt-like .vjs-playback-rate {
        min-width: 40px !important;
        padding: 0 8px !important;
    }

        .video-js.yt-like .vjs-playback-rate .vjs-playback-rate-value {
            height: 40px !important;
            font-size: 13px !important;
        }

    .video-js.yt-like .yt-left,
    .video-js.yt-like .yt-right {
        height: 40px !important;
        padding: 0 8px !important;
        gap: 6px !important;
    }

        /* nút play/volume nhỏ lại chút */
        .video-js.yt-like .yt-left .vjs-play-control,
        .video-js.yt-like .yt-left .vjs-volume-panel {
            width: 36px !important;
            height: 40px !important;
        }

        /* icon nhỏ hơn */
        .video-js.yt-like .yt-left .vjs-button .vjs-icon-placeholder:before,
        .video-js.yt-like .yt-right .vjs-button .vjs-icon-placeholder:before {
            font-size: 16px !important;
            line-height: 40px !important;
        }

        /* time nhỏ hơn + sát hơn, vẫn giữ "/" và duration */
        .video-js.yt-like .yt-left .vjs-time-control,
        .video-js.yt-like .yt-left .vjs-time-divider {
            font-size: 12px !important;
        }

        .video-js.yt-like .yt-left .vjs-time-divider {
            margin: 0 4px !important;
        }

        /* right icon gọn */
        .video-js.yt-like .yt-right .vjs-control {
            width: 34px !important;
            height: 40px !important;
        }

    /* progress cao thấp lại */
    .video-js.yt-like .vjs-progress-control {
        bottom: 54px !important;
    }
}

/* màn siêu nhỏ: nếu vẫn chật, chỉ giảm gap chứ không ẩn duration */
@media (max-width: 360px) {
    .video-js.yt-like .yt-right {
        padding: 0 6px !important;
        gap: 4px !important;
    }

    .video-js.yt-like .yt-left {
        padding: 0 6px !important;
        gap: 5px !important;
    }
}


/* ✅ Desktop bị lệch do spacer của Video.js (flex:1) */
.video-js.yt-like .vjs-custom-control-spacer,
.video-js.yt-like .vjs-spacer {
    flex: 0 0 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important; /* an toàn: node vẫn tồn tại, plugin insertBefore vẫn ok */
}

/* đảm bảo pill phải luôn sát phải */
.video-js.yt-like .yt-right {
    margin-left: auto !important;
}

.video-js.yt-like .vjs-control-bar {
    padding: 0 16px 12px !important;
}

/* ===== Pretty skip buttons (yt-skip-btn) ===== */
.video-js.yt-like .yt-right .yt-skip-btn {
    /* reset button look */
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important; /* hơi vuông, giống YT */
    cursor: pointer !important;
}

    /* nội dung trong nút */
    .video-js.yt-like .yt-right .yt-skip-btn .yt-skip-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        transform: translateY(-.5px); /* căn lại thị giác */
    }

    /* svg rõ nét */
    .video-js.yt-like .yt-right .yt-skip-btn .yt-icon {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
        opacity: .95;
    }

    /* số 10 đẹp hơn */
    .video-js.yt-like .yt-right .yt-skip-btn .yt-skip-num {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: .2px !important;
        color: var(--txt) !important;
        line-height: 1 !important;
        margin-top: 0 !important;
    }

    /* hover/active giống YouTube */
    .video-js.yt-like .yt-right .yt-skip-btn:hover {
        background: rgba(255,255,255,.10) !important;
    }

    .video-js.yt-like .yt-right .yt-skip-btn:active {
        background: rgba(255,255,255,.16) !important;
        transform: scale(.98);
    }

    /* focus ring đẹp */
    .video-js.yt-like .yt-right .yt-skip-btn:focus-visible {
        outline: 2px solid rgba(255,255,255,.7) !important;
        outline-offset: 2px !important;
    }

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

    /* SVG nét + không bị “mất 1” do scale/blur */
    .video-js.yt-like .yt-right .yt-skip-btn .yt-skip-ic {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        transform: none !important;
        image-rendering: auto;
        shape-rendering: geometricPrecision;
    }

    /* Hover nhẹ giống YouTube */
    .video-js.yt-like .yt-right .yt-skip-btn:hover {
        background: rgba(255,255,255,.10) !important;
    }

    .video-js.yt-like .yt-right .yt-skip-btn:active {
        background: rgba(255,255,255,.16) !important;
    }

/* Nếu trước đó bạn có “10 text”, ẩn luôn để khỏi dính */
.video-js.yt-like .yt-right .yt-skip-num {
    display: none !important;
}