/* Custom Player Controls */

/* Settings dropdown overrides */
#rp-player .item-setup .player-dm .cs-list .cs-item {
    display: flex !important;
    cursor: pointer;
}

#rp-player .item-setup .player-dm .cs-list .cs-item .csi-current {
    display: inline-flex !important;
}

/* Override: .p_b-right .item-btn .line-center span { display:none } */
.p_b-right .item-btn .player-dm span,
.p_b-right .item-btn .player-dm .line-center span {
    display: inline !important;
    opacity: 0.7;
    color: #fff;
}

#rp-player .item-setup .player-dm .dropdown-title {
    font-size: 14px !important;
}


#rp-player {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: block !important;
    height: auto !important;
    overflow: hidden;
    margin: 0 auto;
    cursor: none;
}

#rp-player.cp-show {
    cursor: default;
}

#rp-player:fullscreen,
#rp-player.cp-fullscreen {
    display: block !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #000;
}

/* Force player_top to overlay instead of taking flow space */
#rp-player #player_top {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 25;
}

#rp-player .main-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #08080A;
    border-radius: .75rem .75rem 0 0;
}

#rp-player:fullscreen .main-player,
#rp-player.cp-fullscreen .main-player {
    height: 100vh;
    width: 100vw;
    max-height: 100vh;
    aspect-ratio: unset;
    border-radius: 0;
}

#rp-player:fullscreen .cp-controls,
#rp-player.cp-fullscreen .cp-controls {
    z-index: 30;
}

#rp-player:fullscreen.cp-show .cp-controls,
#rp-player.cp-fullscreen.cp-show .cp-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#rp-player:fullscreen .main-player video,
#rp-player.cp-fullscreen .main-player video {
    object-fit: contain !important;
}

/* Nut zoom bat -> lap kin man hinh. Phai co !important va do uu tien cao
   hon rule contain o tren, neu khong inline style se bi de. */
#rp-player:fullscreen.cp-zoom-fill .main-player video,
#rp-player.cp-fullscreen.cp-zoom-fill .main-player video,
body.watch-page.cp-mobile-fullscreen #rp-player.cp-zoom-fill .main-player video {
    object-fit: cover !important;
}

#rp-player .main-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    z-index: 2;
    display: block;
}

#rp-player .main-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 2;
}

/* Controls wrapper */
.cp-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%);
    padding: 0 0 0;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

/* Show controls only via JS-managed cp-show class (auto-hides after 3s) */
#rp-player.cp-show .cp-controls {
    opacity: 1;
    pointer-events: auto;
}

/* Hide custom controls when iframe is used (iframe has its own controls) */
#rp-player.has-iframe .cp-controls,
#rp-player.has-iframe #player_top {
    display: none !important;
}

/* Seek bar */
.cp-seek-wrap {
    padding: 0 16px;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.cp-seek-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, .2);
    border-radius: 2px;
    position: relative;
    overflow: visible;
}

.cp-seek-track:hover {
    height: 6px;
}

.cp-seek-buffer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, .3);
    border-radius: 2px;
    pointer-events: none;
}

.cp-seek-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #e74c3c;
    border-radius: 2px;
    pointer-events: none;
}

.cp-seek-knob {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #e74c3c;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}

.cp-seek-wrap:hover .cp-seek-knob {
    opacity: 1;
}

.cp-seek-tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .85);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    display: none;
    margin-bottom: 8px;
}

.cp-seek-wrap:hover .cp-seek-tooltip {
    display: block;
}

/* Bottom function bar */
.cp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px 10px;
    gap: 8px;
}

.cp-bar-left,
.cp-bar-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.cp-bar .item-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.cp-bar .item-btn:hover {
    color: var(--primary-color, #e74c3c);
}

.cp-bar .item-btn .inc-icon.icon-large {
    width: 48px !important;
    height: 48px !important;
}

.cp-bar .item-btn .inc-icon.icon-large svg {
    width: 100% !important;
    height: 100% !important;
}

/* Buttons */
.cp-btn {
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: .85;
    transition: opacity .15s;
    padding: 4px;
    user-select: none;
}

.cp-btn:hover {
    opacity: 1;
}

.cp-btn .cp-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-btn .cp-icon svg {
    width: 100%;
    height: 100%;
}

.cp-btn .cp-icon.cp-icon-lg {
    width: 26px;
    height: 26px;
}

.cp-btn span {
    font-size: 13px;
    white-space: nowrap;
}

/* Time display */
.cp-time {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    white-space: nowrap;
    user-select: none;
    padding: 0 4px;
}

/* Volume */
.cp-volume {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
}

.cp-volume-bar {
    width: 70px;
    height: 4px;
    background: rgba(255, 255, 255, .25);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.cp-volume-level {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    pointer-events: none;
}

/* Speed dropdown */
.cp-dropdown {
    position: relative;
}

.cp-dropdown-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: rgba(20, 22, 30, .96);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 140px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    margin-bottom: 8px;
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
}

.cp-dropdown.open .cp-dropdown-menu {
    display: block;
}

.cp-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.cp-dropdown-item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.cp-dropdown-item.active {
    color: #e74c3c;
}

.cp-dropdown-item.active::after {
    content: '✓';
    margin-left: 8px;
}

.cp-dropdown-title {
    padding: 8px 16px 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    text-transform: uppercase;
}

/* Fullscreen
   z-index 200 keeps the player above .focus-backdrop (100) and focus-mode
   .player-ratio (101) while staying inside the page's own stacking range —
   the native :fullscreen layer is on top of the document anyway, so this
   value only matters for the class-only fallback path. */
#rp-player.cp-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 200 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#rp-player.cp-fullscreen .main-player {
    height: 100vh !important;
    max-height: 100vh !important;
    aspect-ratio: unset !important;
    padding-top: 0 !important;
    border-radius: 0 !important;
}

/* Loading spinner */
.cp-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
}

.cp-loading .spinner-border {
    width: 40px;
    height: 40px;
}

/* Big play button center */
.cp-big-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    cursor: pointer;
    opacity: .8;
    transition: opacity .2s;
}

.cp-big-play:hover {
    opacity: 1;
}

.cp-big-play svg {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
}

/* Player top bar */
#player_top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .7) 0%, transparent 100%);
    pointer-events: auto;
    opacity: 0;
    transition: opacity .18s ease;
}

#rp-player.cp-show #player_top {
    opacity: 1;
}

/* Hide player_top when episode panel is open (panel has its own header) */
.main-player:has(#video_eps.active) #player_top {
    opacity: 0 !important;
    pointer-events: none !important;
}

#player_top .video-info .name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

#player_top .video-info .info {
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
}

/* Settings Menu */
.cp-settings-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: rgba(20, 22, 30, .96);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
}

.cp-settings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 4px;
}

.cp-settings-header:hover {
    background: rgba(255, 255, 255, .05);
}

.cp-settings-header i {
    font-size: 12px;
}

.cp-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.cp-settings-item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.cp-settings-item.active {
    color: #e74c3c;
}

.cp-settings-item i {
    font-size: 12px;
    margin-left: 8px;
}

/* Right side controls */
.p_b-right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.item-setup,
.item-pip,
.item-next,
.item-zoom,
.item-fullscreen {
    position: relative;
}

/* Hide control labels on mobile/tablet, show on PC */
.cp-label {
    display: none !important;
}

@media (min-width: 1200px) {
    .cp-label {
        display: inline !important;
    }
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .cp-bar {
        padding: 2px 6px 6px;
        gap: 4px;
    }

    .cp-bar-left,
    .cp-bar-right {
        gap: 4px;
        min-width: 0;
    }

    .cp-bar-left {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .cp-btn .cp-icon {
        width: 18px;
        height: 18px;
    }

    .cp-time {
        font-size: 11px;
        padding: 0 2px;
        white-space: nowrap;
    }

    .cp-settings-menu {
        min-width: 160px;
    }

    /* === W2G (live-status-play) mobile fixes === */

    /* Hide text labels in control buttons - only show icons (exclude dropdown menus) */
    .live-status-play .cp-bar .item-btn>.line-center>span,
    .live-status-play .cp-bar .jw-audio-label>span,
    .live-status-play .cp-bar .icon-quality .q-play {
        display: none !important;
    }

    /* Ensure dropdown menu text stays visible */
    .live-status-play .cp-bar .player-dm span {
        display: inline !important;
    }

    /* Shrink play/pause icon */
    .live-status-play .cp-bar .item-play .icon-large {
        width: 28px !important;
        height: 28px !important;
    }

    /* Right side: override Bootstrap gap-4 and shrink */
    .live-status-play .cp-bar .p_b-right {
        gap: 10px !important;
        flex-shrink: 0;
    }

    .live-status-play .cp-bar .p_b-right .inc-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .live-status-play .cp-bar .p_b-right .item-btn .line-center {
        gap: 0 !important;
    }

    /* Shrink volume icon */
    .live-status-play .cp-bar .cp-volume .cp-btn i {
        font-size: 14px !important;
    }

    /* Player top bar compact */
    #player_top {
        padding: 6px 10px;
    }

    #player_top .video-info .name {
        font-size: 12px;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #player_top .video-info .info {
        color: rgba(255, 255, 255, .7);
        font-size: 11px;
    }

    #player_top .p_t-right .cp-btn span {
        font-size: 11px !important;
    }

    #player_top .p_t-right .cp-icon {
        width: 16px !important;
        height: 16px !important;
    }

    /* Big play button smaller on mobile */
    .cp-big-play svg {
        width: 44px;
        height: 44px;
    }

    /* Episode list - ensure proper mobile coverage */
    .live-status-play #video_eps {
        z-index: 50 !important;
    }

    .live-status-play #video_eps .eps-list {
        width: 300px;
        max-width: 85%;
    }

    /* Dropdown menus positioning */
    .live-status-play .player-dm {
        max-height: 60vh;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {

    /* Hide PiP on very small screens */
    .live-status-play .cp-bar .item-pip {
        display: none !important;
    }

    /* Even smaller controls */
    .live-status-play .cp-bar .item-play .icon-large {
        width: 36px !important;
        height: 38px !important;
    }

    .live-status-play .cp-bar .p_b-right {
        gap: 15px !important;
    }

    .live-status-play .cp-bar .p_b-right .inc-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .cp-volume {
        padding-left: 4px !important;
    }

    .cp-time {
        font-size: 10px;
    }

    #player_top .video-info .name {
        max-width: 140px;
        font-size: 11px;
    }

    #player_top .p_t-right .cp-btn span {
        display: none !important;
    }

    .cp-big-play svg {
        width: 36px;
        height: 36px;
    }

    /* Seek bar tighter */
    .cp-seek-wrap {
        padding: 0 8px;
        height: 16px;
    }

    .live-status-play #video_eps .eps-list {
        width: 100%;
        max-width: 100%;
    }
}

/* W2G specific adjustments */
.live-status-play #rp-player .main-player {
    border-radius: 0;
}

.live-status-play #rp-player {
    border-radius: 0;
    height: 100%;
    width: 100%;
}

/* Import necessary styles from style.min.css for W2G only */
.live-status-play .inc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.live-status-play .icon-large {
    height: 48px;
    width: 48px;
}

.live-status-play .line-center {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dropdown menu styles for W2G */
.live-status-play .player-dm {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(20, 22, 30, 0.96);
    border-radius: 8px;
    padding: 0.6rem 0;
    color: #fff;
}

.live-status-play .player-dm::-webkit-scrollbar {
    display: none;
}

.live-status-play .player-dm .dropdown-title {
    font-size: 1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.2rem 1rem 0.6rem;
}

.live-status-play .player-dm .dropdown-item {
    align-items: center;
    background-color: initial !important;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    cursor: pointer;
}

.live-status-play .player-dm .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff;
}

.live-status-play .player-dm .dropdown-item.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--primary-color, #e74c3c);
}

.live-status-play .player-dm .dropdown-item .w-check {
    opacity: 0;
}

.live-status-play .player-dm .dropdown-item.active .w-check {
    opacity: 1;
}

.live-status-play .player-dm .dropdown-item.active .s-title {
    font-weight: 600;
}

.live-status-play .dropdown-menu {
    background-color: rgba(20, 22, 30, 0.96);
    border: none;
    color: #fff;
}

.live-status-play .dropdown-menu.show {
    display: block;
}

/* Settings menu specific styles */
.live-status-play .player-dm .cs-list {
    display: flex;
    flex-direction: column;
}

.live-status-play .player-dm .cs-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
}

.live-status-play .player-dm .cs-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.live-status-play .player-dm .cs-item.active {
    color: var(--primary-color, #e74c3c);
}

.live-status-play .player-dm .cs-item .csi-current {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.7;
}

.live-status-play .player-dm .cs-item .csi-title {
    flex-grow: 1;
}

.live-status-play .player-dm .cs-item .csi-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.live-status-play .player-dm .cs-item .csi-font {
    font-size: 13px;
}

.live-status-play .player-dm .sub-back {
    cursor: pointer;
}

.live-status-play .player-dm .sub-back:hover {
    color: #fff;
}

/* Override style.min.css hiding controls on W2G pages - desktop only */
@media (min-width: 1200px) {
    .live-status-play #rp-player .item-btn .line-center span {
        display: inline !important;
    }
}

.live-status-play #rp-player .item-btn {
    font-size: 14px !important;
}

/* Use icon sizes from style.min.css */
.live-status-play #rp-player .inc-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.live-status-play #rp-player .inc-icon svg {
    width: 100% !important;
    height: 100% !important;
}

.live-status-play #rp-player .cp-controls {
    display: block !important;
}

.live-status-play #rp-player .cp-bar {
    display: flex !important;
}

.live-status-play #rp-player .cp-btn {
    display: inline-flex !important;
}

.live-status-play #rp-player .cp-time {
    display: block !important;
}

/* Ensure player fills the container */
.live-status-play .lw-player #rp-player {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.live-status-play .lw-player #rp-player .main-player {
    height: 100%;
    padding-top: 0;
}

/* Episode list panel styles for W2G */
.live-status-play #video_eps {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}

.live-status-play #video_eps.active {
    opacity: 1;
    pointer-events: auto;
}

.live-status-play #video_eps .eps-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #08080a;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

.live-status-play #video_eps.active .eps-mask {
    opacity: 0.8;
    pointer-events: auto;
}

.live-status-play #video_eps .eps-list {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 90%;
    background-color: #1e1f28;
    z-index: 3;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 0.35s;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.live-status-play #video_eps .eps-list::-webkit-scrollbar {
    display: none;
}

.live-status-play #video_eps.active .eps-list {
    transform: translateX(0);
}

.live-status-play #video_eps .eps-list .eps-header {
    padding: 0.5rem 3.5rem 0.5rem 1.2rem;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.live-status-play #video_eps .eps-list .eps-header .name {
    font-size: 1.2em;
    font-weight: 600;
    color: #fff;
}

.live-status-play #video_eps .eps-list .eps-header .season-eps {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.live-status-play #video_eps .eps-list .eps-header #eps-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

.live-status-play #video_eps .eps-list .eps-header #eps-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.live-status-play #video_eps .eps-list .eps-list-menu {
    display: flex;
    flex-direction: column;
}

.live-status-play #video_eps .eps-list .item-ep {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.2s;
}

.live-status-play #video_eps .eps-list .item-ep:hover {
    background-color: rgba(255, 255, 255, 0.08);
    opacity: 1 !important;
}

.live-status-play #video_eps .eps-list .item-ep.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--primary-color, #e74c3c);
}

.live-status-play #video_eps .eps-list .item-ep .v-thumbnail {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.05);
}

.live-status-play #video_eps .eps-list .item-ep.active .v-thumbnail {
    box-shadow: 0 0 0 2px var(--primary-color, #e74c3c);
}

.live-status-play #video_eps .eps-list .item-ep .v-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-status-play #video_eps .eps-list .item-ep .v-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.live-status-play #video_eps .eps-list .item-ep .v-title {
    font-size: 14px;
    font-weight: 500;
}

/* === Mobile gesture + seek feedback (player UX) === */
/* Prevent double-tap zoom on the video surface and timeline drag scroll;
   scoped to the player only (never global touch-action). */
#rp-player .main-player video {
    touch-action: manipulation;
}
.cp-seek-wrap {
    touch-action: manipulation;
}

/* Double-tap seek feedback — reuses the existing .cp-seek-tooltip visual
   language (rgba(0,0,0,.85) bg, #fff text, 12px, 4px radius). */
.cp-seek-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 16;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, .85);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.cp-seek-feedback i {
    font-size: 12px;
    color: var(--primary-color, #e74c3c);
}
.cp-seek-feedback-show {
    opacity: 1;
}

/* Invisible timeline hit area — keeps the 4px visual track, widens the touch
   zone to ~28px without changing the visible layout. */
.cp-seek-wrap::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 28px;
    cursor: pointer;
}
@media (max-width: 480px) {
    .cp-seek-wrap::before {
        top: -6px;
        height: 28px;
    }
}

/* =====================================================================
   AD Parity — Watch layout
   Nguồn số liệu: đo trực tiếp rophim.ad/xem-phim/... bằng Playwright tại
   13 viewport (1920/1600/1440/1366/1280/1180/1024/834/768/412/390/360/320).

   template.css + device.css ĐÃ khớp bản mẫu ở đúng các breakpoint
   1599 / 1359 / 1279 / 1120 / 989 / 799 / 640 / 479:
     .watch-container  row >=1121, column <=1120, align-items stretch, gap 0
     .wc-side          440px >=1360 | 380px 1121-1359 | 100% <=1120
     .wc-main/.wc-side padding 40 >=1600 | 30 990-1599 | 20 641-989 | 20/16 <=640
     .de-eps.is-simple 8 cột >=1600 | 6 cột 800-1599 | 4 cột 641-799 | 3 cột <=640
     .wm-info          ẩn ở <=1279
   Nên khối này KHÔNG ghi đè geometry khung 2 cột nữa. Bản cũ đặt
   gap:24px, .wc-side:360px, flex-direction:row!important ở <=1120px và
   repeat(8,1fr) ở mọi width — sai toàn bộ so với bản mẫu.
   ===================================================================== */

/* Cột phải không được tự tạo vùng cuộn riêng (nguyên nhân thanh cuộn trắng cũ). */
.wc-side {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent;
}

/* Player tuỳ biến của rophim.loan: 16/9 fluid, không height cố định.
   Bản mẫu dùng iframe embed; ta giữ player riêng nhưng cùng kích thước
   (1400x788 tại viewport 1440) và cùng vị trí thanh điều khiển. */
.watch-player .player-ratio,
#rp-player .main-player,
#player-wrapper {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.watch-player .player-ratio {
    aspect-ratio: 16 / 9;
    /* Bo góc đỉnh; góc đáy thuộc về .player-control nằm ngay bên dưới.
       Bo cả 4 góc sẽ lộ 2 vết khía ở chỗ tiếp giáp vì .player-control
       có border-radius: 0 0 .75rem .75rem. */
    border-radius: .75rem .75rem 0 0;
}
#rp-player .main-player {
    aspect-ratio: 16 / 9;
}

/* --- Full-bleed mobile/tablet -------------------------------------------
   device.css kéo .player-ratio ra mép màn hình bằng margin âm
   (0 -20px ở <=799px, -2rem -16px ở <=640px) nhưng KHÔNG bù chiều rộng.
   Rule width:100% / max-width:100% ngay trên nằm ở file nạp SAU device.css
   nên thắng, kẹp .player-ratio theo content box (vw-40 / vw-32).
   Hệ quả: video dịch sang trái đúng 20px (16px ở <=640) và để hở một dải
   trống bằng chừng đó ở mép phải — hình trông lệch hẳn về một bên.
   Bản mẫu đặt width tràn mép ngay cùng chỗ với margin âm; ta làm tương tự
   bằng calc() theo content box (không dùng 100vw để khỏi tính cả scrollbar).
   .player-control phải tràn mép theo, nếu không video và thanh điều khiển
   sẽ lệch nhau 20px. */
@media screen and (max-width: 799px) {
    .watch-player .player-ratio {
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        /* Tràn mép thì bo góc thành dị; bản mẫu để bề mặt video vuông góc. */
        border-radius: 0;
    }
    #rp-player .main-player {
        border-radius: 0;
    }
}
@media screen and (min-width: 641px) and (max-width: 799px) {
    .watch-player .player-control {
        margin: 0 -20px;
        width: calc(100% + 40px);
        border-radius: 0;
    }
}
@media screen and (max-width: 640px) {
    /* Ở <=640 gutter là 16px chứ không phải 20px. */
    .watch-player .player-ratio {
        width: calc(100% + 32px);
        max-width: calc(100% + 32px);
    }

    /* device.css đặt .box-header .v-toggle là position:absolute (right:0, top:5px)
       vì ở trang chi tiết dòng đầu của header là season-dropdown "Phần 1" và
       toggle nép bên phải dòng đó. Trang xem phim KHÔNG có season-dropdown nên
       dòng đầu trống, hàng tab server dồn lên và bị toggle đè chéo.
       Đưa toggle về luồng chảy: nó tự thành dòng riêng căn phải, tab server
       xuống dòng dưới — đúng thứ tự thị giác của bản mẫu ở mobile. */
    .wc-main .wm-episodes .cg-body-box.is-eps .box-header .v-toggle {
        position: static;
        align-self: flex-end;
        top: auto;
    }
}

/* Nút tập (is-simple): pill cao 50px, radius 6.4px, padding ngang 3.2px,
   chữ 14px căn giữa. template.css để padding .5rem .8rem và không height —
   chỉ đúng cho bản is-grid có thumbnail. Màu nền/trạng thái on-air đã khớp
   sẵn qua var(--bg-2) #282b3a và var(--primary-color) #ffd875. */
.wc-main .wm-episodes .de-eps.is-simple .item {
    height: 50px;
    padding: 0 3.2px;
    border-radius: 6.4px;
    font-size: 14px;
    justify-content: center;
}
.wc-main .wm-episodes .de-eps.is-simple .item .h-thumbnail { display: none !important; }
@media screen and (max-width: 640px) {
    /* device.css đặt 42px nhưng selector ở đây đặc thù hơn nên phải nhắc lại. */
    .wc-main .wm-episodes .de-eps.is-simple .item { height: 42px; }
}

/* =====================================================================
   Mobile Immersive Player — V3
   ---------------------------------------------------------------------
   V2 keyed on (orientation: landscape) + viewport size ALONE. That made
   merely rotating the phone hide the header/breadcrumb/episode list and
   pin #rp-player to position:fixed, even when the viewer never asked for
   fullscreen — the page looked broken and could not be scrolled back.
   V3 requires the real fullscreen state: the JS fullscreen controller
   adds .cp-mobile-fullscreen to <body> (and to #rp-player) only after the
   Fullscreen API actually reports this player as the fullscreen element,
   and removes it on every exit path (button, Esc, Back, system gesture).
   Rotation alone now changes nothing.
   Kept from V2: black stage, object-fit: contain (no crop), dynamic
   viewport units with vh fallback, safe-area padding, hidden chrome not
   eating taps. No player engine changes.
   ===================================================================== */
@media (max-width: 1300px) {
    body.watch-page.cp-mobile-fullscreen {

        /* --- Scroll lock (auto-reverts when rotated back to portrait) --- */
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* --- Hide page chrome around the player --- */
    body.watch-page.cp-mobile-fullscreen #site-header,
    body.watch-page.cp-mobile-fullscreen .wp-bread,
    body.watch-page.cp-mobile-fullscreen .player-control,
    body.watch-page.cp-mobile-fullscreen .watch-container,
    body.watch-page.cp-mobile-fullscreen footer,
    body.watch-page.cp-mobile-fullscreen .site-ads {
        display: none !important;
    }

    /* --- Neutralize container layout on .watch-player / .player-ratio --- */
    body.watch-page.cp-mobile-fullscreen .watch-player {
        max-width: none;
        margin: 0;
        padding: 0;
    }
    body.watch-page.cp-mobile-fullscreen .player-ratio {
        border-radius: 0;
        box-shadow: none;
    }

    /* --- Player stage: fill the viewport ---
       position:fixed here is TRUE viewport-fixed: the ancestor chain
       (video -> .main-player -> #rp-player -> .player-ratio ->
       .watch-player -> #wrapper -> main -> #app -> body) has
       transform/filter/perspective/contain/will-change all 'none', so no
       containing block traps fixed. 100vh falls back for older browsers,
       100dvh tracks the dynamic viewport (URL-bar collapse/expand). */
    body.watch-page.cp-mobile-fullscreen #rp-player {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        /* above .focus-backdrop (z100) and focus-mode .player-ratio (z101) */
        z-index: 200 !important;
        background: #000 !important;
    }

    /* --- Video surface --- */
    body.watch-page.cp-mobile-fullscreen #rp-player .main-player {
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: unset;
        border-radius: 0;
        background: #000;
    }
    body.watch-page.cp-mobile-fullscreen #rp-player .main-player video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* --- Top overlay: title + episode + "Danh sách tập" ---
       Safe-area aware: notch / cutout / rounded corner never covers chrome. */
    body.watch-page.cp-mobile-fullscreen #player_top {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: 10px;
        padding-left: max(16px, env(safe-area-inset-left));
    }

    /* Dead chrome must not eat taps: while hidden (tied to the existing
       .cp-show state), pass events through so single-tap-to-show and
       double-tap ±10s keep working over the whole stage. Visible state
       (.cp-show) restores interactivity for the episode button. */
    body.watch-page.cp-mobile-fullscreen #rp-player:not(.cp-show) #player_top {
        pointer-events: none;
    }

    /* --- Bottom controls: keep overlay, respect bottom safe area --- */
    body.watch-page.cp-mobile-fullscreen .cp-controls {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    body.watch-page.cp-mobile-fullscreen .cp-seek-wrap {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* =====================================================================
   Touch target floor — coarse pointers only
   ---------------------------------------------------------------------
   Control buttons keep their existing icon sizes and spacing; this only
   guarantees the hit area reaches ~44x44 CSS px on touch devices so the
   bar stays usable in mobile fullscreen. Desktop (fine pointer) layout
   is untouched.
   ===================================================================== */
@media (pointer: coarse) {
    #rp-player .cp-bar .item-btn,
    #rp-player .cp-bar .cp-btn,
    #rp-player #cp-mute-btn,
    #rp-player #toggle-eps-btn,
    #rp-player #video_eps .close-eps {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    /* The volume slider is not a tap target; keep it from inheriting the
       44px floor and stretching the left group. */
    #rp-player .cp-bar .cp-volume-bar {
        min-width: 0;
        min-height: 0;
    }
}

/* =====================================================================
   Nut "Tap tiep" + nut Zoom (lap kin man hinh)
   ---------------------------------------------------------------------
   Tap tiep : JS an/hien theo cpUpdateNextEpButton() -> chi hien khi CUNG
              server hien tai con tap ke tiep (phim le / tap cuoi thi an).
              Khong bi an o man nho nhu PiP: tren dien thoai day la nut
              duoc dung nhieu nhat.
   Zoom     : JS chi hien khi dang fullscreen tren mobile. Man 20:9/21:9
              chieu phim 16:9 se co dai den 2 ben; nut nay doi object-fit
              contain <-> cover de nguoi xem tu chon giu tron hinh hay
              lap kin (cat bot tren/duoi).
   Ca hai dung .inc-icon (16px, template.css) nen dong bo voi PiP/Cai dat.
   ===================================================================== */

/* Trang thai bat cua nut zoom: dung mau nhan chung cua player */
.item-zoom.active,
.item-next:hover,
.item-zoom:hover {
    color: var(--primary-color, #e74c3c);
}

/* Nhan chu "Tap tiep" chi hien tren PC; mobile chi con icon */
.cp-next-label {
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .cp-next-label {
        display: none !important;
    }

    /* Vung bam >= 44px CSS px cho ca hai nut moi (yeu cau cham tay) */
    #cp-next-ep-btn,
    #cp-zoom-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =====================================================================
   FIX: ten phim phai an CUNG LUC voi thanh control tren man cam ung
   ---------------------------------------------------------------------
   style.min.css (vendor) co #rp-player:hover #player_top{opacity:1}.
   Tren dien thoai :hover DINH lai sau khi cham, nen no de rule an cua
   .cp-show va tieu de cu sang mai trong fullscreen. Khoa lai theo dung
   trang thai .cp-show cho thiet bi khong co con tro that.
   ===================================================================== */
@media (hover: none), (pointer: coarse) {
    #rp-player:not(.cp-show) #player_top,
    #rp-player:hover:not(.cp-show) #player_top,
    #player_top:hover {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #rp-player.cp-show #player_top {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* =====================================================================
   Nut doi-server / phu de (CC) chi danh cho PC
   ---------------------------------------------------------------------
   Menu nay phuc vu m3u8 cua vsmov (nhieu phu de) -> chi co nghia tren
   man rong. Tren dien thoai da co thanh chon server ngay duoi player,
   nen an nut trong player de bot chat cho thanh control.
   ===================================================================== */
@media (max-width: 1199px) {
    .cp-bar .item-audio,
    #cp-audio-btn {
        display: none !important;
    }
}

/* =====================================================================
   VSMOV external subtitle spacing fix for mobile fullscreen
   ---------------------------------------------------------------------
   When VSMOV serves external .vtt subs (not hardsub), Android Chrome and
   iPhone Safari both render the subtitle track container inside the
   video element. On ultra-wide screens (20:9, 21:9) in fullscreen with
   contain object-fit, black bars appear at top/bottom. Without adjustment,
   subtitles sit flush against the bottom control bar (60px + safe-area),
   making the last line hard to read.

   The JS fullscreen controller detects VSMOV + external subs and adds
   .cp-vsmov-external-sub to <body>. These rules then:
   - Push subtitle container up by 60px + safe-area to clear the controls
   - Default ultra-wide screens to object-fit: cover (fills screen, crops
     top/bottom slightly) so black bars disappear and subs stay readable
   - Let users toggle back to contain via the zoom button (adds .cp-zoom-disabled)
   ===================================================================== */

/* VSMOV external subtitle marker - add this class via JS when detecting VSMOV + external subs */
body.watch-page.cp-vsmov-external-sub.cp-mobile-fullscreen video::-webkit-media-text-track-container {
  max-height: calc(100% - 60px - env(safe-area-inset-bottom)) !important;
}

/* Android Chrome ultra-wide default to cover for VSMOV external subs */
body.watch-page.cp-vsmov-external-sub.cp-mobile-fullscreen.cp-ultrawide-screen video {
  object-fit: cover;
}

/* Preserve contain when zoom toggle is explicitly disabled */
body.watch-page.cp-vsmov-external-sub.cp-mobile-fullscreen.cp-ultrawide-screen.cp-zoom-disabled video {
  object-fit: contain;
}

/* iPhone Safari: Lift subtitles higher to avoid bottom edge in fullscreen */
@supports (-webkit-touch-callout: none) {
  body.watch-page.cp-vsmov-external-sub.cp-mobile-fullscreen video::-webkit-media-text-track-container {
    bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
    max-height: calc(100% - 100px - env(safe-area-inset-bottom, 20px)) !important;
  }
}

/* =====================================================================
   VSMOV Android landscape video fill fix
   ---------------------------------------------------------------------
   On Android devices in landscape with ultra-wide aspect ratios (>=16:9),
   force object-fit: cover for VSMOV video in fullscreen to eliminate
   black bars and ensure video fills the screen properly.
   Only applies to VSMOV external subtitle content (phụ đề rời).
   ===================================================================== */
@media (orientation: landscape) and (min-aspect-ratio: 16/9) {
  body.cp-vsmov-external-sub.cp-mobile-fullscreen #cp-video:fullscreen,
  body.cp-vsmov-external-sub.cp-mobile-fullscreen #cp-video:-webkit-full-screen {
    object-fit: cover !important;
  }
}

/* =====================================================================
   VSMOV iPhone landscape subtitle positioning fix
   ---------------------------------------------------------------------
   On iPhone in landscape fullscreen, lift subtitle containers higher
   to prevent overlap with bottom controls. Applies additional 25px
   offset to both primary and secondary subtitle tracks.
   Only applies to VSMOV external subtitle content (phụ đề rời).
   ===================================================================== */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    body.cp-vsmov-external-sub.cp-mobile-fullscreen #cp-subtitle-primary,
    body.cp-vsmov-external-sub.cp-mobile-fullscreen #cp-subtitle-secondary {
      bottom: calc(12% + 30px) !important;
    }
  }
}