.vplayer {
    position: relative;
    overflow: hidden;
    background: var(--bg-white);
    cursor: pointer;
    padding-bottom: 56.15%;
    height: 100%;
}
.vplayer video,
.vplayer .vp-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .3s ease;
}
.vplayer.is-playing .vp-poster {
    opacity: 0;
    pointer-events: none;
}
/* big center play button */
.vp-bigplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, opacity .25s ease;
}
/* .vplayer:hover .vp-bigplay {
    transform: translate(-50%, -50%) scale(1.08);
} */
.vplayer.is-playing .vp-bigplay {
    opacity: 0;
    pointer-events: none;
}
/* control bar */
.vp-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(51,51,51,0.9);
    padding: 10px 14px 12px;
    gap: 8px;
    transform: translateY(100%);
    transition: transform .25s ease;
}
.vplayer:hover .vp-controls,
.vplayer.is-playing .vp-controls {
    transform: translateY(0);
}
/* seek bar */
.vp-seek {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 4px;
    cursor: pointer;
    background: #B8B8B8;
    margin:0 20px 0 10px;
}
.vp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #EA7F47;
    border: none;
}
.vp-seek::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: none;
    background: #EA7F47;
}
.vp-btn {
    background: none;
    border: 0;
    transition: opacity .15s;
    padding: 0;
}
.vp-time {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #B8B8B8;
}
.vp-gear svg {
    transition: transform .3s ease;
}
.vp-settings-wrap.open .vp-gear svg {
    transform: rotate(60deg);
}
.vp-menu{
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 10px 46px;
    background: rgba(28, 28, 28, .96);
    border-radius: 12px;
    width: 230px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.vp-settings-wrap.open .vp-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.vp-panels {
    display: flex;
    width: 300%;
    transition: transform .22s ease;
}
.vp-menu.show-quality .vp-panels {
    transform: translateX(-33.3333%);
}
.vp-menu.show-speed .vp-panels {
    transform: translateX(-66.6666%);
}
/* a generic row */
.vp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    text-align: left;
    padding: 10px 16px;
}
.vp-item:hover {
    background: rgba(255, 255, 255, .1);
}
/* quality + speed option rows */
.vp-back,
.vp-quality,
.vp-speed {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    text-align: left;
    padding: 6px 10px;
}
.vp-back:hover,
.vp-quality:hover,
.vp-speed:hover {
    background: rgba(255, 255, 255, .1);
}
.vp-item .vp-val {
    color: #aaa;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vp-item .vp-val svg {
    opacity: .8;
}
.vp-quality .vp-check,
.vp-speed .vp-check {
    visibility: hidden;
}
.vp-quality.active .vp-check,
.vp-speed.active .vp-check {
    visibility: visible;
}
.vp-hd{
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    background: #fff;
    color: #1c1c1c;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 6px;
}
.vp-bigplay{
    border-radius:999px;
    overflow:hidden;
    white-space:nowrap;
    transition:width .45s cubic-bezier(.34,1.4,.5,1), gap .45s ease, background-color .35s ease; 
}
.vp-bigplay svg{transition:fill .35s ease;}
.vp-bigplay .vp-label{
    max-width:0;
    opacity:0;
    font-family: var(--Font-Face-Medium);
    transition:max-width .45s cubic-bezier(.32,.72,.24,1), opacity .35s ease; 
}
.vplayer:hover .vp-bigplay{ width:150px; gap:8px;background: var(--orange-500);}
.vplayer:hover .vp-bigplay svg path{fill: var(--text-white);}
.vplayer:hover .vp-bigplay .vp-label{ max-width:120px; opacity:1; }