/* ==========================================================================
   Trang xem phim – bố cục PC (>=1024px): player tràn trái + cột phải 440px
   Cột phải: tab Video/Comments, tên phim, thông tin, nút thao tác,
   server SR/SB, nguồn phát + lưới tập 3 cột, Related Titles 3 cột.
   Màu nhấn: đổi --dy-side-accent nếu muốn khác màu chung của theme.
   ========================================================================== */
@media (min-width: 1024px) {
    :root { --dy-side-w: 440px; --dy-head-h: 82px; --dy-side-accent: var(--dy-accent, #fe2c55); --dy-tile: #22232d; }

    /* ---- khung chính: bỏ giới hạn container, player + cột phải ---- */
    #play_page .play_boxbg { background: #000 !important; }
    #play_page .play_boxbg > .container {
        max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important;
    }
    #play_page .play_box.play_video {
        display: flex; align-items: stretch; padding: 0 !important; margin: 0;
    }
    #play_page .play_box.play_video > .left_row {
        float: none !important; flex: 1 1 auto; width: auto !important; min-width: 0; margin: 0 !important; background: #000;
    }
    #play_page .play_box.play_video > .right_row.dy-side-col {
        display: block !important; float: none !important; flex: 0 0 var(--dy-side-w); width: var(--dy-side-w) !important; margin: 0 !important;
        background: var(--dy-bg, #161823);
    }

    /* ---- player cao bằng màn hình ---- */
    #play_page .play_box.play_video .player_video {
        height: calc(100vh - var(--dy-head-h)) !important; min-height: 420px; padding-bottom: 0 !important;
        border-radius: 0 !important; overflow: hidden;
    }
    #play_page .play_box.play_video .player_video .MacPlayer {
        position: absolute !important; inset: 0; height: 100% !important; padding-bottom: 0 !important;
    }
    #play_page .play_box.play_video .player_video iframe,
    #play_page .play_box.play_video .player_video video,
    #play_page .play_box.play_video .player_video #playleft { width: 100% !important; height: 100% !important; }

    /* khối tên phim/giới thiệu dưới player: đã có trong cột phải */
    #play_page .play_boxbg > .container > .play_box:not(.play_video) { display: none !important; }
    #play_page .play_box.play_video > .left_row > .play_but { background: transparent !important; border-radius: 0 !important; }

    /* ---- nội dung bên dưới (diễn viên, phim liên quan, bình luận): căn giữa 1280px ---- */
    #play_page > .container {
        max-width: 1280px !important; width: 100%; margin: 24px auto 0; padding: 0 24px; box-sizing: border-box; min-height: 0 !important;
    }
    #play_page > .container > .left_row { float: none !important; width: 100% !important; }

    /* ======================= CỘT PHẢI ======================= */
    #play_page .play_box_right.dy-side {
        width: 100% !important; max-height: none !important; background: var(--dy-bg, #161823) !important;
    }
    .dy-side {
        position: relative; box-sizing: border-box; height: calc(100vh - var(--dy-head-h)) !important; min-height: 420px !important;
        overflow-y: auto !important; overflow-x: hidden; padding: 0 22px 24px !important; color: rgba(255, 255, 255, .9);
        scrollbar-width: thin;
    }

    /* tab Video / Comments */
    .dy-side__tabs { display: flex; gap: 32px; padding: 20px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .dy-side__tabs a { position: relative; font-size: 19px; font-weight: 600; color: #fff; text-decoration: none; padding-bottom: 8px; }
    .dy-side__tabs a.is-active { color: var(--dy-side-accent); }
    .dy-side__tabs a.is-active::after {
        content: ""; position: absolute; left: 50%; bottom: -2px; width: 22px; height: 3px; margin-left: -11px;
        border-radius: 2px; background: var(--dy-side-accent);
    }

    /* tên phim + thông tin */
    .dy-side__head { padding: 22px 0 6px; }
    .dy-side__title {
        margin: 0 0 12px; font-size: 26px; line-height: 1.3; font-weight: 500; color: var(--dy-side-accent);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .dy-side__meta { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
    .dy-side__meta > span + span::before,
    .dy-side__meta > span + a::before,
    .dy-side__meta > span ~ .dy-side__more::before { content: "·"; margin: 0 6px; color: rgba(255, 255, 255, .5); font-weight: 400; }
    .dy-side__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dy-side-accent); margin-right: 6px; vertical-align: 0; }
    .dy-side__more { color: #fff !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .dy-side__more .iconfont { font-size: 12px; }

    /* nút thao tác (Favorite / Report / Share / Prev / Next...) */
    .dy-side__actions { margin: 16px 0 6px; }
    #play_page .dy-side__actions .play-but-bar { background: rgba(255, 255, 255, .05); border-radius: 8px; padding: 4px 6px; }
    #play_page .dy-side__actions .play-but-wrap,
    #play_page .dy-side__actions .play-but-wrap .scroller { overflow: visible !important; width: 100% !important; }
    #play_page .dy-side__actions .play-but-strip { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 2px 4px; }
    #play_page .dy-side__actions .play-but-item { display: flex !important; align-items: center !important; }
    #play_page .dy-side__actions .play-but-item > .play_collec,
    #play_page .dy-side__actions .play-but-item .play_share { display: inline-flex !important; align-items: center !important; gap: 4px; line-height: 1.25 !important; }
    #play_page .dy-side__actions .play-but-item .play_share .open-share { padding: 0 !important; }
    #play_page .dy-side__actions .play-but-item > a,
    #play_page .dy-side__actions .play-but-item > .play_collec,
    #play_page .dy-side__actions .play-but-item .open-share {
        min-height: 40px !important; height: 40px; padding: 0 9px !important; margin: 0 !important; font-size: 14px; line-height: 40px !important;
        color: rgba(255, 255, 255, .85) !important;
    }
    #play_page .dy-side__actions .play-but-item > a:hover,
    #play_page .dy-side__actions .play-but-item > .play_collec:hover { color: #fff !important; }

    /* icon report (svg) mất kích thước khi rời khung .play_but -> đặt lại */
    #play_page .dy-side__actions .play-but-item__report-ico { display: block; width: 16px !important; height: 16px !important; flex-shrink: 0; }
    #play_page .dy-side__actions .play-but-item > a { display: inline-flex !important; align-items: center !important; gap: 4px; white-space: nowrap; }
    #play_page .dy-side__actions .play-but-item .iconfont { font-size: 16px; }

    /* server SR / SB */
    .dy-side__sources { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 18px; padding-top: 6px; }
    #play_page .dy-side .fr-server-bar { background: transparent !important; border: 0 !important; padding: 12px 0 4px !important; }

    /* nguồn phát + lưới tập */
    #play_page .dy-side #bofy { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
    #play_page .dy-side #bofy .pannel_head { padding: 12px 0 6px !important; gap: 10px !important; }
    #play_page .dy-side #bofy .pannel_head .title { font-size: 22px !important; font-weight: 700 !important; color: #fff !important; max-width: none !important; }
    #play_page .dy-side #bofy .vod-playlist-head-center { display: none !important; }
    #play_page .dy-side #bofy .vod-playlist-head-sort .sort_btn { color: rgba(255, 255, 255, .75) !important; font-size: 14px; }
    #play_page .dy-side #bofy .tabs.playlist .wrapper_fl.xl { margin: 0 0 4px; }
    #play_page .dy-side #bofy .title_nav { display: flex !important; flex-wrap: wrap; gap: 4px 22px; padding: 8px 0 !important; margin: 0 !important; }
    #play_page .dy-side #bofy .title_nav li { float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
    #play_page .dy-side #bofy .title_nav li a {
        position: relative; display: inline-block; padding: 6px 0 10px !important; font-size: 17px; font-weight: 700;
        color: #fff !important; background: none !important;
    }
    #play_page .dy-side #bofy .title_nav li a .iconfont { color: var(--dy-side-accent); font-size: 14px; }
    #play_page .dy-side #bofy .title_nav li.active a { color: var(--dy-side-accent) !important; }
    #play_page .dy-side #bofy .title_nav li.active a::after {
        content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; border-radius: 2px; background: var(--dy-side-accent);
    }

    #play_page .dy-side #bofy .playlist_notfull { padding: 0 !important; background: none !important; }
    #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist {
        display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important;
        padding: 12px 0 !important; margin: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important;
    }
    #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li {
        display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important;
    }
    /* trong cột phải: hiện tất cả tập, cột có thanh cuộn riêng */
    #play_page .dy-side #bofy .playlist_notfull--collapsible.is-collapsed .content_playlist > li:nth-child(n+7) { display: block !important; }
    #play_page .dy-side #bofy .js-vod-playlist-expand { display: none !important; }

    body.bstem #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li > a,
    #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li > a {
        position: relative; display: flex !important; align-items: center; justify-content: center;
        height: 58px; min-height: 58px !important; padding: 0 6px !important; box-sizing: border-box;
        background: var(--dy-tile) !important; border: 0 !important; border-radius: 6px !important;
        color: #fff !important; font-size: 17px; font-weight: 700; text-align: center;
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }
    body.bstem #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li:not(.active) > a:hover,
    #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li:not(.active) > a:hover {
        background: #2b2c38 !important; color: #fff !important;
    }
    body.bstem #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li.active > a,
    body.bstem #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li.active > a:hover,
    #play_page .dy-side #bofy .tabs.playlist .playlist_notfull .content_playlist li.active > a {
        background: var(--dy-tile) !important; color: var(--dy-side-accent) !important;
    }
    /* vạch "đang phát" dưới số tập */
    #play_page .dy-side #bofy .content_playlist li.active > a > .hl-play-active.hl-bg-conch {
        left: 50% !important; bottom: 8px !important; margin-left: -1px !important; background-color: var(--dy-side-accent) !important;
    }
    #play_page .dy-side #bofy .content_playlist li.active > a > .hl-play-active.hl-bg-conch::before,
    #play_page .dy-side #bofy .content_playlist li.active > a > .hl-play-active.hl-bg-conch::after { background-color: var(--dy-side-accent) !important; }

    /* ---- Related Titles: lưới ảnh 3 cột ---- */
    .dy-side__related { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 14px; padding-top: 18px; }
    .dy-side__related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .dy-side__related-head h3 { margin: 0; font-size: 22px; font-weight: 700; color: #fff; }
    .dy-side__related-head a { color: var(--dy-side-accent) !important; font-size: 16px; text-decoration: none; }
    .dy-side__related-head a .iconfont { font-size: 12px; }

    #play_page .dy-side .play_infobox.dy-side__grid {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px;
        background: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
    }
    #play_page .dy-side .dy-side__grid > :not(.play_vlist) { grid-column: 1 / -1; }
    #play_page .dy-side .dy-side__grid .play_vlist { margin: 0 !important; min-width: 0; }
    #play_page .dy-side .dy-side__grid .play_vlist--recommend > a { display: block !important; text-decoration: none; }
    #play_page .dy-side .dy-side__grid .play_vlist_img,
    #play_page .dy-side .dy-side__grid .play_vlist_img--h {
        display: block !important; width: 100% !important; flex: none !important; overflow: hidden; border-radius: 4px;
    }
    #play_page .dy-side .dy-side__grid .play_vlist_thumb {
        width: 100% !important; aspect-ratio: 20 / 29; height: auto !important; border-radius: 4px; transform: none !important;
    }
    #play_page .dy-side .dy-side__grid .play_vlist_thumb--h { aspect-ratio: 20 / 29; }
    #play_page .dy-side .dy-side__grid .play_vlist--recommend > a:hover .play_vlist_thumb { filter: brightness(.85); }
    #play_page .dy-side .dy-side__grid .play_vlist_text { display: block !important; padding: 8px 0 0 !important; }
    #play_page .dy-side .dy-side__grid .play_vlist_title {
        display: block !important; margin: 0 !important; font-size: 15px; line-height: 1.35 !important; max-height: none !important;
        color: var(--dy-side-accent) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #play_page .dy-side .dy-side__grid .play_vlist_meta { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    :root { --dy-side-w: 380px; }
    .dy-side { padding: 0 16px 20px; }
    .dy-side__title { font-size: 22px; }
}