/* ============================================================
   DESIGN TOKENS — CobePhim Visual Foundation
   Normalize all colors, spacing, typography, shadows, radii
   into a single CSS custom-property layer.
   ============================================================ */
:root {
    --cb-page-bg: #191B24;
    --cb-surface-elevated: rgba(255,255,255,0.04);
    --cb-surface-soft: rgba(255,255,255,0.06);
    --cb-surface-hover: rgba(255,255,255,0.10);
    --cb-border-subtle: rgba(255,255,255,0.08);
    --cb-text-primary: rgba(255,255,255,0.92);
    --cb-text-secondary: rgba(255,255,255,0.65);
    --cb-text-muted: rgba(255,255,255,0.42);
    --cb-brand-accent: #ffd875;
    --cb-accent-hover: #ffe599;
    --cb-badge-bg: rgba(255,255,255,0.08);
    --cb-badge-border: rgba(255,255,255,0.28);
    --cb-shadow-sm: 0 2px 8px rgba(0,0,0,0.22);
    --cb-shadow-md: 0 6px 18px rgba(0,0,0,0.35);
    --cb-radius-sm: 0.35rem;
    --cb-radius-md: 0.75rem;
    --cb-radius-lg: 1rem;
    --cb-gutter-mobile: 16px;
    --cb-section-gap-mobile: 24px;
    --cb-section-gap-desktop: 32px;
    --cb-header-h-mobile: 56px;
    --cb-header-h-desktop: 64px;
    --cb-hero-h-mobile: 400px;
    --cb-hero-h-desktop: 760px;
    --cb-transition-fast: 0.15s;
    --cb-transition-normal: 0.3s;
    --cb-max-width: 1440px;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.fade-in.visible {
    opacity: 1;
    filter: none;
}

.player-control .ep-current {
    width: 160px !important;
}

.v-pagination .page-current .v-form-control {
    width: 60px !important;
}

.heading-topic {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.detail-more.show {
    display: block !important;
}

.text-gradient {
    -webkit-background-clip: text !important;
}

.de-cw {
    grid-template-columns: repeat(5, 1fr);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.effect-fade-in {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* remove-icon visibility controlled by JS */

.comm-title {
    line-height: 1.5;
    font-size: 16px !important;
}

.switch-logo {
    margin-bottom: 2rem;
    text-align: center;
}

.switch-logo a img {
    height: 50px;
    width: auto;
}

.switch-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: rgb(33, 42, 84);
    background: linear-gradient(113deg, rgba(33, 42, 84, 1) 0%, rgba(25, 33, 67, 1) 51%, rgba(33, 42, 84, 1) 100%);
}

.switch-modal .modal-dialog {
    max-width: none;
    width: 680px;
}

.switch-modal .modal-dialog .modal-content {
    padding: 2rem;
    color: #fff8;
    line-height: 1.7;
    background-color: transparent !important;
}

.switch-modal .modal-dialog .modal-content p {
    line-height: 1.7;
    margin-bottom: 0 !important;
}

.ver-sbs {
    margin-top: 2rem;
    display: block;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.ver-sbs .ver-item {
    flex: 1;
    padding: 2rem;
    font-size: 13px;
    border-radius: .75rem;
    background-color: #4e62b4;
    color: #fff;
}

.ver-sbs .ver-item:first-of-type {
    margin-right: 2rem;
}

.ver-sbs .ver-item .btn-lg i {
    font-size: 20px;
}

.switch-notice {
    margin-top: 3rem;
    padding: 0 2rem;
}

.switch-notice p {
    line-height: 1.8 !important;
}

.switch-notice .s-qr {
    margin-right: 1rem;
    padding: 10px;
    background-color: #fff;
    border-radius: .4rem;
}

.switch-notice .s-qr img {
    width: 70px;
    height: 70px;
}

@media screen and (max-width: 800px) {
    .switch-modal .modal-dialog .modal-content {
        padding: 20px;
    }

    .ver-sbs {
        flex-direction: column;
        margin-top: 1rem;
    }

    .ver-sbs .ver-item {
        padding: 1.5rem;
    }

    .ver-sbs .ver-item:first-of-type {
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

    .switch-notice {
        margin-top: 2rem;
        padding: 0
    }

    .switch-notice p {
        line-height: 1.5 !important;
    }
}

.pin-tag-quality {
    padding: 0 .4rem;
    border-radius: 0.33rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;
    top: .35rem;
    right: .35rem;
    width: 40px;
    height: 26px;
    font-size: 13px;
    box-shadow: 0 0 0 1px #0005;
}

.tag-cam {
    backdrop-filter: blur(10px);
    background: #fff6;
    color: #000;
}

.crop-container {
    position: relative;
    width: 100%;
    height: 320px;
    background: #111;
    border-radius: 12px;
    overflow: hidden
}

.rep-subject img {
    height: auto;
    max-width: 200px;
    max-height: 140px;
    margin-top: 5px;
    object-fit: contain;
}

.match-info .team-vs .card-team .inc-icon img {
    object-fit: contain;
}

.rhap_play-pause-button {
    border-radius: 50%;
    /* Bo tròn border */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    /* Khoảng cách giữa icon và border */
}

.rhap_button-clear {
    color: #fff !important;
}

.rhap_time {
    color: #fff !important;
    font-size: 13px !important;
}

.rhap_progress-bar {
    height: 3px !important;
}

.rhap_volume-bar {
    height: 3px !important;
}

.rhap_progress-filled {
    background-color: #96e99b !important;
}

.rhap_progress-indicator {
    background: #fff !important;
    width: 10px !important;
    height: 10px !important;
    top: -3px !important;
}

.rhap_volume-indicator {
    background: #fff !important;
    width: 10px !important;
    height: 10px !important;
}

.rhap_download-progress {
    background: #ffffff10 !important;
}

.rhap_container {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Scroll Reveal - lazy load sections */
.scroll-reveal {
    position: relative;
    contain: content;
}

.scroll-reveal .sr-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: opacity 0.4s ease, visibility 0.4s;
    background: transparent;
}

.scroll-reveal .sr-content {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.scroll-reveal.is-visible .sr-loader {
    opacity: 0;
    visibility: hidden;
}

.scroll-reveal.is-visible .sr-content {
    opacity: 1;
    transform: translateY(0);
}

/* Search result items */
.s-item {
    padding: .5rem .75rem;
    border-bottom: 1px solid #ffffff08;
    transition: background-color 0.15s;
}

.s-item:last-child {
    border-bottom: none;
}

.s-item:hover {
    background-color: #ffffff10;
}

.alias-title {
    font-size: .85em;
    color: var(--text-base);
    opacity: .7;
}

.movie-info-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .8em;
}

.movie-info-line span {
    color: var(--text-base);
}

.movie-info-line .quality {
    color: #FFD875;
    font-weight: 600;
}

.movie-info-line .lang {
    color: #96e99b;
}

#search-results-dropdown .search-modal {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: none;
}

#search-results-dropdown .search-modal::-webkit-scrollbar {
    display: none;
}

#search-results-dropdown .search-modal .group-list {
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: none;
}

#search-results-dropdown .search-modal .group-list::-webkit-scrollbar {
    display: none;
}

/* === Watch Player Overlay Styles === */
#rp-player {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: .75rem .75rem 0 0;
    overflow: hidden;
    background-color: #08080A;
    margin: 0 auto;
}

#rp-player .main-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* Player Top Overlay */
#player_top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#rp-player:hover #player_top,
#player_top:hover {
    opacity: 1;
    pointer-events: auto;
}

#player_top .p_t-left .video-info .name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

#player_top .p_t-left .video-info .info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-top: 2px;
}

#player_top .cp-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

#player_top .cp-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

#player_top .cp-icon svg {
    fill: currentColor;
    color: #fff;
}

/* Video Episodes Side Panel */
#video_eps {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: none;
    pointer-events: none;
}

#video_eps.active {
    display: flex;
    pointer-events: auto;
    z-index: 30;
}

#video_eps .eps-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

#video_eps .eps-list {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 80%;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    z-index: 5;
    animation: slideInRight 0.25s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

#video_eps .eps-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

#video_eps .eps-header .name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#video_eps .eps-header .season-quantity {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    white-space: nowrap;
    margin: 0 0.5rem;
}

#video_eps #eps-close {
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    transition: color 0.2s;
    flex-shrink: 0;
}

#video_eps #eps-close:hover {
    color: #fff;
}

#video_eps .eps-list-menu {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

#video_eps .eps-list-menu::-webkit-scrollbar {
    width: 4px;
}

#video_eps .eps-list-menu::-webkit-scrollbar-track {
    background: transparent;
}

#video_eps .eps-list-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

#video_eps .item-ep {
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

#video_eps .item-ep:hover {
    background: rgba(255, 255, 255, 0.06);
}

#video_eps .item-ep.active {
    background: rgba(83, 93, 142, 0.3);
    color: var(--primary-color, #E8C547);
}

#video_eps .item-ep .v-title {
    font-weight: 500;
}

#video_eps .item-ep.active .v-title {
    color: var(--primary-color, #E8C547);
}

/* Focus mode: make player-control visible above backdrop */
body.focus-mod .player-control {
    position: relative;
    z-index: 101;
}

/* Focus mode: hide all control items except Rạp phim */
body.focus-mod .player-control .control-items .item {
    visibility: hidden;
}

body.focus-mod .player-control .control-items .item-focus.is-on {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Sidebar Ads - Left & Right */
.site-ads {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    max-width: 160px;
    display: none;
}

.site-ads-left {
    left: 5px;
}

.site-ads-right {
    right: 5px;
}

@media (min-width: 1600px) {
    .site-ads {
        display: block;
    }
}

/* Hide RoX upgrade CTA & wallet */
.call-upgrade,
.dropdown-wallet {
    display: none !important;
}

/* Preloader text */
.text-h1 {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #ffffff30;
    font-weight: 600;
    text-align: center;
    max-width: 950px;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .text-h1 {
        font-size: 1.1rem;
    }
}
/* rophim-seo-h1 */
h1.category-name{font-size:inherit;line-height:inherit;margin:0;}

/* rophim-seo100-link-button */
.rophim-link-button{background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none;display:inline;}
.rophim-link-button.text-primary{color:var(--bs-primary,#ffd875)!important;}
.rophim-link-button.small{font-size:.875em;}
.dropdown-item.rophim-link-button{display:block;width:100%;text-align:left;}
.item-more .rophim-link-button{color:inherit;}


/* rophim23-card-audio-badges-start */
.v-thumbnail .movie-audio-badges {
    left: 7px !important;
    bottom: 7px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 5 !important;
}

.v-thumbnail .movie-audio-badges .line-center {
    min-height: 20px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: .1px !important;
    color: #fff !important;
    background: rgba(88, 91, 105, .92) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.v-thumbnail .movie-audio-badges .line-center span::before {
    margin-right: 3px;
    font-weight: 800;
}

.v-thumbnail .movie-audio-badges .line-center strong {
    font-weight: 800 !important;
}

.v-thumbnail .movie-audio-badges .line-center.line-tm {
    background: rgba(31, 161, 89, .94) !important;
}

.v-thumbnail .movie-audio-badges .line-center.line-lt {
    background: rgba(35, 107, 207, .94) !important;
}

.v-thumbnail .movie-audio-badges .line-center.line-coming {
    background: rgba(255, 255, 255, .92) !important;
    color: #222 !important;
}

@media (max-width: 768px) {
    .v-thumbnail .movie-audio-badges {
        left: 6px !important;
        bottom: 6px !important;
        gap: 3px !important;
    }

    .v-thumbnail .movie-audio-badges .line-center {
        min-height: 19px !important;
        padding: 2px 7px !important;
        font-size: 10px !important;
    }
}
/* rophim23-card-audio-badges-end */

/* a11y-F: alias-title touch target min 24px (style3/style6 h-item) */
.h-item .info .alias-title > a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* /phimhay mobile: thu hẹp khoảng cách dọc giữa các block phim (~20-30%).
   Scope .phimhay-page + @media <=640 (breakpoint mobile của theme).
   KHÔNG đụng desktop/tablet, card/title/ảnh/Swiper. */
@media screen and (max-width: 640px) {
    .phimhay-page .fluid-gap {
        /* Reference @384px: ~24px between topics cards and the first movie collection. */
        gap: var(--cb-section-gap-mobile, 24px);
    }
    /* Panel gap -> device.css ships gap:1rem for .topics-list.single at <=640
       (RoPhim reference). The old 0.75rem override below-the-reference is removed,
       so the exact 1rem governs the grouped panel AND each singleton (2026-08-16). */
    /* RoPhim reference parity @384px (measured via getBoundingClientRect):
       - hero is 300px but #top_slide rendered 330px because .top-slide-main ships
         margin-bottom:30px (device.css ≤640). That trailing 30px was an invisible
         "black gap" between the hero and the "Bạn đang quan tâm gì?" heading.
       - After removing it, hero.bottom(360) -> heading.top(390) = 30px, matching RoPhim.
       - The old `.fluid-gap > .cards-row:first-of-type{ margin-top:-8px }` here was
         DEAD CODE: #top_slide (a <div>) is the first child, so the topics `.cards-row`
         is never `:first-of-type`; it never applied. Replaced with an explicit 6px
         margin on the topics row so heading.top == 390 exactly.
       - `.topics-grid.topics-line` padding-bottom 8px collapsed the next collection
         upward by 8px; zeroed so cards-bottom(517.1) -> collection(541.1) == 24px.
       - heading-md line-height 1.25 collapsed card text to 38.5px (card 70.5px);
         reference is 1.4 => intro 43.1px => card 75.1px. */
    .phimhay-page .top-slide-wrap .top-slide-main {
        margin-bottom: 0;
    }
    .phimhay-page .fluid-gap > .cards-row.wide:not(.cards-slide) {
        margin-top: 6px;
    }
    /* Style6 singleton (a single collection standing alone between non-style6
       blocks) keeps the SAME panel geometry as the grouped panel (RoPhim parity,
       2026-08-16): all 6 blocks render edge-to-edge on mobile identically.
       (AUDIT 2026-08-16, pre-edit browser pass) this rule used to set
       `padding: 0` on the singleton's `.cards-row.wide`, CANCELLING device.css's
       `padding: 0 16px` at <=640. With the panel's own `margin: 0 -16px`, the
       singleton measured 425px wide on a 393px viewport (grouped block 393px) —
       a real 32px horizontal overflow on 2 of 6 blocks. Removing the rule
       restores device's 16px side padding so the panel's -16px margins land
       exactly edge-to-edge, matching the grouped panel. */
}

/* FIX khac mobile (2026-09-15): singleton style6 dung le giua cac block
   trong suot (vd: dau-an-dien-anh-viet -> dem-kinh-hoang,
   phim-bo-da-hoan-thanh -> hanh-dong-nghet-tho) blend vao flow chung:
   panel trong suot, khong tran vien, khong bo goc => nhip gap 24px
   dong nhat ca tren lan duoi junction, khong con vach cat ngang.
   Scope: .phimhay-page + <=640px + .style6-run--singleton (Blade chi gan
   class nay khi block style6 khong co grouped-neighbor; grouped panel
   nhieu block lien tiep KHONG co class => giu nguyen). Desktop khong doi. */
@media screen and (max-width: 640px) {
    .phimhay-page .cards-row.style6-run--singleton > .topics-list.single.style6-run--singleton {
        background: transparent;
        background-image: none;
        margin: 0;
        /* device.css <=640 dat padding:1rem !important => can !important moi thang */
        padding: 0 !important;
        border-radius: 0;
    }
}

/* a11y touch target (style6): title + alias gộp thành 1 link block, vùng bấm >=44px,
   focus-visible rõ ràng. Scope .sw-cover.single => chỉ collection-style6, không đụng component khác. */
.sw-cover.single .h-item .info .item-link {
    display: block;
    min-height: 44px;
    text-decoration: none;
    border-radius: .4rem;
}
.sw-cover.single .h-item .info .item-link .item-title { color: #fff; }
.sw-cover.single .h-item .info .item-link .alias-title { color: var(--text-base); }
.sw-cover.single .h-item .info .item-link:focus-visible {
    outline: 2px solid #9582DC;
    outline-offset: 2px;
}

/* ============================================================
   Hero cinematic polish — /phimhay top banner ONLY (20260716)
   Scope: .phimhay-page. DOM & JS unchanged; visual layer only.
   Reuses existing .top-slide-* / .slide-* nodes. Does NOT touch
   phim-detail / category heroes or the card image pipeline.
   ============================================================ */

/* Desktop (>=1280): cinematic hero — content in left 55%, thumbnail rail on right.
   Hero sits flush under the header, no extra top padding. */

/* Sharpen the picture: kill the heavy grain overlay + right-edge image mask
   that were softening the subject's face. Keep a gentle left feather for text
   legibility and a soft bottom fade into the #191B24 base. */

/* FIX (20260813): .top-slide-main::before has z-index:3 (template.css) which
   stacks ABOVE .safe-area z-index:2 inside .slide-elements. This makes the
   bottom gradient overlay intercept pointer events at the play / fav / info
   button area. pointer-events:none lets clicks pass through to the interactive
   content in .safe-area. */
.phimhay-page .top-slide-main::before {
    pointer-events: none;
}
/* FIX (20260814): Reduce desktop backdrop crop — raise hero height + reclaim
   cover-fade pixels + soften gradients. Desktop ≥1280 only; mobile unchanged.
   Scoped ::before desktop override (120px vs template.css 200px baseline). */
.phimhay-page .slide-elements:before {
    pointer-events: none;
}
/* FIX (20260814): Override template.css calc(100% - 60px) to reclaim backdrop pixels. */
.phimhay-page .top-slide-main .swiper-slide .cover-image img {
    object-position: var(--hero-x, 50%) var(--hero-y, 50%);
}
/* FIX (20260814): Reduce TopBanner blur on mobile for scroll performance.
   38px → 20px blur still provides atmospheric backdrop without heavy GPU cost. */

/* FIX (20260813): hidden fade slides must never be hit targets.
   Swiper stacks every fade slide at the same position. The non-active slide
   gets opacity:0 + pointer-events:none, but its descendants (.slide-elements,
   .safe-area, .slide-content, .media-title a, .button-play, .touch-group)
   re-assert pointer-events:auto, so the LAST slide in the DOM still catches
   clicks over the active slide's title/buttons (e.g. clicking "Kẹo Ngọt Tình
   Yêu" opened "Bách Luyện Thành Thần"). Block pointer events on every
   non-active slide AND all of its descendants, then re-enable only the active
   slide's interactive controls. Scoped to .phimhay-page; mobile's full-slide
   .slide-url overlay on the ACTIVE slide is unaffected. */
.phimhay-page .top-slide-main .swiper-slide:not(.swiper-slide-active),
.phimhay-page .top-slide-main .swiper-slide:not(.swiper-slide-active) * {
    pointer-events: none !important;
}

/* Desktop: dark gradient on the left so title/description stay readable over
   bright frames. Sits above the image (safe-area z-index 2) but below the text
   block (slide-content z-index 5). Description locked to 3 lines. */
@media screen and (min-width: 1280px) {
            .phimhay-page .slide-content .description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Title: ref template.css governs (3em/700/text-shadow 0 2px 1px rgba(0,0,0,.3)).
   Khong override shadow/letter-spacing de giong y het ref. */

/* Top-slide metadata badges only; category tags and card/detail badges stay unchanged. */
.phimhay-page .slide-content .hero-meta-tags {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: .6rem;
    white-space: nowrap;
}
.phimhay-page .slide-content .hero-meta-tags > div {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 26px;
    padding: 0 .4rem;
    border-radius: .33rem;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}
.phimhay-page .slide-content .hero-meta-tags .tag-imdb {
    line-height: 24px;
    background: transparent;
    border: 1px solid #f0d25c;
    color: #fff;
    font-weight: 500;
}
.phimhay-page .slide-content .hero-meta-tags .tag-imdb span {
    color: #fff;
}
.phimhay-page .slide-content .hero-meta-tags .tag-quality {
    justify-content: center;
    border: 0;
    background: #FFD875 linear-gradient(220deg, #FFD875 0%, #FFF 100%);
    color: #000;
    font-weight: 700;
}
.phimhay-page .slide-content .hero-meta-tags .tag-model {
    border: 0;
    background: #fff;
    color: #000;
    font-weight: 700;
}
.phimhay-page .slide-content .hero-meta-tags .tag-classic {
    line-height: 1.6;
    border: 1px solid #fff;
    background: #ffffff10;
    color: #fff;
    font-weight: 400;
}

/* Play button: subtle depth (keeps the existing gold gradient). */
.phimhay-page .slide-content .touch .button-play {
    box-shadow: 0 6px 18px rgba(255,218,125,.28), 0 2px 6px rgba(0,0,0,.35);
}
.phimhay-page .slide-content .touch .button-play:hover {
    box-shadow: 0 8px 22px rgba(255,218,125,.4), 0 2px 8px rgba(0,0,0,.4);
}

/* Favorite / info bar: gentle dark-glass fill (icons already centered). */
.phimhay-page .slide-content .touch-group {
    background-color: rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
/* FIX (20260814): Remove backdrop-filter on mobile TopBanner touch-group.
   12 hero slides × touch-group backdrop = 12 compositor layers. Solid background
   sufficient for mobile. Desktop preserves glass effect. */
@media (max-width: 767px) {
    .phimhay-page .slide-content .touch-group {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(0,0,0,.3);
    }
}

/* Hero thumbnail strip: active = 2px gold border. */
.phimhay-page .top-slide-wrap .top-slide-small .swiper-slide.swiper-slide-thumb-active {
    border-color: var(--primary-color) !important;
}

/* PARITY 2026-09-16: block override typography/rail mobile da xoay — device.css +
   template.css tai hien DUNG ref gia tri (title 1.5em=21px, alias .9em,
   badge 20px/10px, rail 30px tron, strip day du). */
/* Swiper spaceBetween adds margin-right to every slide incl. the last; zero
   the trailing margin so an underflow cluster centers with equal outer gaps. */
.phimhay-page .top-slide-wrap .top-slide-small .swiper-slide:last-child {
    margin-right: 0 !important;
}

/* ============================================================
   Mobile Movie Action Bar — V3
   Scoped to new .movie-actions-layout / .movie-actions-grid structure
   ============================================================ */

/* --- Follow icon swap (active state) --- */
.cw-follow-icon .cw-bell-filled { display: none; }
.cw-follow-icon .cw-bell-outline { display: block; }
.dm-bar .item.item-follow.active .cw-follow-icon .cw-bell-filled { display: block; }
.dm-bar .item.item-follow.active .cw-follow-icon .cw-bell-outline { display: none; }

/* --- Mobile action bar (≤640px) --- */
@media screen and (max-width: 640px) {

    /* Layout: column — grid on top, badge below */
    .movie-actions-layout {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Grid: 4 equal columns */
    .movie-actions-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        align-items: start;
    }

    /* Each action item — higher specificity to override .dm-bar .item in device.css (≤479px) */
    .movie-actions-grid .movie-action-item {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        margin: 0;
        padding: .35rem .1rem;
        gap: .25rem;
    }

    /* Action icon: 24px on mobile */
    .movie-action-item .inc-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    /* Action label */
    .movie-action-item .item-v span {
        font-size: 13px;
        line-height: 1.2;
        max-height: 2.4em;
        overflow: hidden;
        word-break: normal;
        overflow-wrap: normal;
    }

    /* Secondary actions wrapper: 2-column grid on mobile */
    .movie-actions-secondary {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-width: 280px;
        margin: 14px auto 0;
        padding: 0;
    }

    /* Badge is a cell child of secondary wrapper */
    .movie-actions-badge {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Rating: centered in its cell */
    .movie-actions-badge .v-rating {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* Override .dm-bar .item-comment {display:none} in device.css (≤479px) */
    .movie-actions-layout .item-comment {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
        margin-top: 0;
    }

    /* Rating: no underline on mobile */
    .dm-bar .ro-rating .a-rate {
        text-decoration: none;
    }
}

/* --- Desktop action bar (>640px) ---
   Match selector specificity of mobile rules above to ensure desktop styles win.
   Mobile rules (.movie-actions-grid .movie-action-item, .movie-action-item .item-v span)
   are INSIDE @media(max-width:640px) so they DON'T apply on desktop.
   These rules provide the desktop horizontal layout. */
@media screen and (min-width: 641px) {

    /* Layout: horizontal flex — grid on left, secondary on right */
    .movie-actions-layout {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
    }

    /* Grid: 4 columns horizontal */
    .movie-actions-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, auto));
        gap: 4px;
        align-items: center;
        justify-content: end;
    }

    /* Each action item — match mobile specificity (.movie-actions-grid .movie-action-item) */
    .movie-actions-grid .movie-action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 56px;
        padding: .4rem .3rem;
        gap: .25rem;
        border-radius: .5rem;
        transition: background 0.15s;
    }

    .movie-actions-grid .movie-action-item:hover {
        background: rgba(255,255,255,.06);
    }

    /* Action icon: desktop size */
    .movie-action-item .inc-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Action label — match mobile specificity (.movie-action-item .item-v span) */
    .movie-action-item .item-v span {
        font-size: 11px;
        line-height: 1.2;
    }

    /* Secondary actions wrapper: horizontal row on desktop */
    .movie-actions-secondary {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Override .dm-bar .item-comment {display:none} in device.css (≤479px) */
    .movie-actions-layout .item-comment {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/* --- Mobile action bar ≤480px: 5 items ONE row ---
   Layout becomes a 5-column grid; grid spans cols 1-4 (Yêu thích | Theo dõi |
   Thêm vào | Chia sẻ), secondary (Điểm) is the 5th cell. Bình luận hidden on
   mobile (comment section still below). Compact vertical rating pill. */
@media screen and (max-width: 480px) {

    .movie-actions-layout {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        align-items: start;
    }

    .movie-actions-grid {
        grid-column: span 4;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        align-items: start;
    }

    .movie-actions-grid .movie-action-item {
        min-height: 44px;
        padding: .3rem .1rem;
        gap: .2rem;
    }

    .movie-action-item .inc-icon {
        width: 22px;
        height: 22px;
    }

    .movie-action-item .item-v span {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        max-height: none;
    }

    /* Secondary = 5th cell; comment removed on mobile */
    .movie-actions-secondary {
        grid-column: span 1;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .movie-actions-layout .item-comment {
        display: none !important;
    }

    .movie-actions-badge {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
    }

    .movie-actions-badge .v-rating {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Compact vertical rating pill: icon / score / "Điểm" */
    .movie-actions-badge .ro-rating {
        flex-direction: column;
        gap: .1rem;
        padding: .3rem .1rem;
        background-color: #3556b6;
        border-radius: .6rem;
        min-height: 44px;
        width: 100%;
    }

    .movie-actions-badge .ro-rating .ro-icon {
        width: 20px;
        height: 20px;
    }

    .movie-actions-badge .ro-rating .point {
        font-size: 13px;
        padding: 0;
        line-height: 1.1;
    }

    .movie-actions-badge .ro-rating .a-rate {
        display: block; /* re-show (device.css hid it at ≤479px) */
        font-size: 0;
        margin: 0;
        text-decoration: none;
        line-height: 1.2;
    }

    .movie-actions-badge .ro-rating .a-rate::before {
        content: "Điểm";
        font-size: 12px;
        font-weight: 500;
    }
}

/* === G8: Lịch chiếu (/lich-chieu) === */
.schedule-date-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0 4px;
}
.schedule-date-label h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text-color, #e0e0e0);
}
.schedule-total {
    font-size: 14px;
    color: var(--text-secondary, #888);
}
.schedule-count {
    font-size: 11px;
    color: var(--text-secondary, #888);
    margin-top: 2px;
}
.item-time.active .schedule-count {
    color: var(--accent-color, #ffd875);
}

/* Date tabs — wrap for mobile */
.sche-time {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.item-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    flex-shrink: 0;
    min-width: 72px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.item-time:hover {
    background: rgba(255,255,255,0.1);
    text-decoration: none;
    color: inherit;
}
.item-time.active {
    background: var(--accent-color, #ffd875);
    color: #111 !important;
}
.item-time .day {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.item-time .time {
    font-size: 14px;
    font-weight: 600;
}

/* Schedule grid */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
@media (max-width: 1024px) {
    .schedule-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .schedule-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 420px) {
    .schedule-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* Pagination */
.pagination-wrap {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: var(--text-color, #ccc);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s;
}
.page-link:hover {
    background: rgba(255,255,255,0.12);
    text-decoration: none;
    color: var(--text-color, #fff);
}
.page-link.active {
    background: var(--accent-color, #ffd875);
    color: #111 !important;
    font-weight: 600;
}

/* ============================================================
   Community density — mobile: hide less important blocks,
   compact the top comments section.
   ============================================================ */
@media screen and (max-width: 640px) {
    /* Hide "Binh luan moi" (new comments vertical swiper) on mobile — too tall */
    .it-col.this-05 { display: none !important; }
    /* Compact Top binh luan cards */
    .top-discuss .td-list { max-height: none; }
    .top-discuss .td-d-item { padding: .6rem; gap: .6rem; }
    .top-discuss .di-poster { display: none; }
    /* Reduce community section vertical space */
    .comm-wrap { gap: .75rem; }
    .irt-table { gap: .5rem; }
    /* Community section heading tighter */
    .comm-title { font-size: 14px !important; }
}
/* Desktop: show everything */
@media screen and (min-width: 641px) {
    .it-col.this-05 { display: block !important; }
}

/* ============================================================
   Footer polish — mobile: tighten spacing
   ============================================================ */
@media screen and (max-width: 640px) {
    footer .footer-elements { padding: 1.5rem 0; }
    footer .sl-brand .socials { gap: .5rem; }
    footer .sl-notice { font-size: 12px; line-height: 1.6; }
}

/* ============================================================
   Card title consistency — mobile: clamp titles properly
   ============================================================ */
@media screen and (max-width: 640px) {
    .sw-item .info .item-title {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .sw-item .info .alias-title {
        font-size: 11px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ============================================================
   Header scroll — subtle background transition on scroll
   ============================================================ */
header.fly {
    transition: background-color 0.3s ease;
}
header.fly.fixed {
    background-color: rgba(25, 27, 36, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* ============================================================
   Mobile header — compact 56px, no oversized logo.
   NOTE (20260808): /phimhay is excluded via body:not(.phimhay-page) so the
   RoPhim MHT reference header geometry can apply there. device.css @1359 already
   ships exactly the reference values (header 60px, padding 0 6px, #logo left 65px,
   #logo img 36px => rendered logo 121x36). This block was forcing 56px/30px and
   shifting the whole hero up by 4px. Other routes keep the compact 56px header.
   ============================================================ */
@media screen and (max-width: 640px) {
    body:not(.phimhay-page):not(.watch-page) header .header-elements {
        height: 56px;
        padding: 0 12px;
        gap: .5rem;
    }
    body:not(.phimhay-page):not(.watch-page) header.fixed .header-elements {
        height: 52px;
    }
    body:not(.phimhay-page):not(.watch-page) #logo img {
        height: 30px;
    }
    #search {
        display: none;
    }
}

/* ============================================================
   Episodes: match cobephim.ws mobile layout for "Rút gọn" toggle.
   Reference puts the toggle ABSOLUTE (right:0, top:5px) against
   .box-header, aligned on the same row as the part/server picker,
   while server tabs wrap on the row below. Reference box-header is
   flex-column / gap 16px / position relative (device.css 2135-2138
   already sets column; this only re-anchors the toggle).
   ========================================================= */
body.watch-page .eps-version-row {
    align-items: center;
    gap: .75rem;
}
body.watch-page .eps-version-row .flex-grow-1 {
    display: none;
}
body.watch-page .eps-version-row #server-tabs {
    flex-wrap: wrap;
    gap: .5rem;
    flex-grow: 1;
    min-width: 0;
}
/* Re-anchor "Rút gọn" absolute to .box-header like cobephim.ws.
   custom-player.css [.wc-main .wm-episodes ... .v-toggle {position:static}]
   overrides device.css with higher specificity; win it back with
   equal/higher specificity + !important. */
@media screen and (max-width: 640px) {
    body.watch-page .cg-body-box.is-eps .box-header {
        position: relative;
    }
    body.watch-page .wc-main .wm-episodes .cg-body-box.is-eps .box-header .v-toggle.v-toggle-min,
    body.watch-page .cg-body-box.is-eps .box-header .v-toggle.v-toggle-min {
        position: absolute !important;
        right: 0 !important;
        top: 5px !important;
        left: auto !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        align-self: auto !important;
    }
    body.watch-page .eps-version-row #server-tabs {
        margin-top: 0;
    }
}

/* ============================================================
   Reduced motion — disable animations for a11y
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .effect-fade-in,
    .scroll-reveal .sr-content {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ============================================================
   Desktop Detail Layout Fix — Phase 3
   Scoped: >1024px only. Mobile/tablet 100% untouched.
   Root cause: sidebar "Top phim tuần này" (10 movies ~2500px) stretches
   both columns via align-items:stretch, creating massive empty space.
   ============================================================ */
@media screen and (min-width: 1025px) {

    /* 1. AD parity: rophim.ad uses align-items:stretch so both panels
       share the row height (sidebar bg extends). Keep stretch at PC. */
    .detail-container {
        margin-top: -140px;
        align-items: flex-start !important;
    }

    /* 2. Backdrop — match rophim.ad exactly (measured: 800@1920, 546@1366, 512@1280, 300@1024/768, 200 mobile) */
    .top-detail-wrap { height: 546px; padding-bottom: 0 !important; }
    .top-detail-wrap .background-fade { opacity: .72 !important; -webkit-filter: blur(32px) !important; filter: blur(32px) !important; }
    .top-detail-wrap .cover-fade { opacity: .95; }
    @media screen and (min-width: 1400px) { .top-detail-wrap { height: 800px; padding-bottom: 0 !important; } }
    @media screen and (min-width: 1281px) and (max-width: 1399px) { .top-detail-wrap { height: 546px; padding-bottom: 0 !important; } }
    @media screen and (min-width: 1025px) and (max-width: 1280px) { .top-detail-wrap { height: 512px; padding-bottom: 0 !important; } }

    /* 3. Sidebar — AD parity: 440/40, bg rgba(25,27,36,.3) blur20, radius 1.25rem 3rem 1.25rem 1.25rem */
    .detail-container > .dc-side {
        width: 440px !important;
        padding: 40px !important;
        border-radius: 1.25rem 3rem 1.25rem 1.25rem !important;
        background-color: rgba(25, 27, 36, 0.3) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .detail-container > .dc-side::-webkit-scrollbar {
        width: 4px;
    }
    .detail-container > .dc-side::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.15);
        border-radius: 2px;
    }

    /* 4. Poster — AD parity: no shadow (AD shadow none) — y het */
    .ds-info .v-thumb-l .v-thumbnail {
        max-width: 220px;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: none !important;
        filter: none !important;
        aspect-ratio: 2 / 3;
        position: relative;
    }
    .ds-info .v-thumb-l .v-thumbnail img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 0;
        object-fit: cover;
        object-position: center;
    }

    /* 5. "Top phim tuan nay" — AD parity (measured 2026-09-18 vs rophim.ad) */
    .cc-top .item .position {
        width: 60px;
        font-size: 56px;
        font-weight: 800;
        text-align: left;
        color: rgb(25, 27, 36);
    }
    .cc-top .item+.item {
        margin-top: 0.75rem;
    }
    .cc-top .item .h-item {
        gap: 0;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.02);
        border-radius: 8px;
    }
    .cc-top .item .h-item .info {
        padding: 0.5rem 1rem;
        flex: 1;
        min-width: 0;
    }
    .cc-top .item .h-item .info .item-title {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 6.4px;
    }
    .cc-top .item .h-item .info .alias-title {
        font-size: 12.6px;
        margin-bottom: 8px;
    }
    .cc-top .item .h-item .info .info-line {
        font-size: 14px;
        gap: normal;
    }
    .cc-top .item .h-item .info .info-line .tag-small {
        font-size: 12.6px;
    }
    .cc-top .item .h-item .v-thumb-m {
        width: 80px;
        min-width: 80px;
    }
    .cc-top .item .h-item .v-thumb-m img {
        width: 80px;
        height: 120px;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
    }

    /* 6. Sidebar actors: compact 2-column */
    .dc-side .child-actors-list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 0.5rem;
        column-gap: 0.4rem;
    }
    .dc-side .child-actors .v-item {
        gap: 0.4rem;
    }
    .dc-side .child-actors .v-item .item-title {
        font-size: 11px;
    }

    /* 7. Sidebar section spacing reduction */
    .dc-side > div {
        margin-bottom: 0.75rem;
    }
    .dc-side > div + div {
        padding-top: 0.75rem;
    }

    /* 8. Content gap tighter */
    .content-gap {
        padding: 0 24px;
        gap: 12px;
    }

    /* 9. CTA bar: compact inline */
    .dm-bar {
        padding: 20px 24px;
    }
    .dm-bar .elements {
        gap: 10px;
        flex-wrap: nowrap;
    }

    /* 10. Main panel — AD parity: rgba(25,27,36,.6) blur20 exactly like AD dcMain */
    .detail-container > .dc-main {
        background-color: rgba(25, 27, 36, 0.6) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 12px;
        min-height: 400px;
    }

    /* 10b. CTA bar glass — AD has translucent dark + blur + rounded */
    .dm-bar {
        background: rgba(25, 27, 36, .55) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.06);
    }

    /* 10c. Tab bar active — ensure yellow underline visible like AD (#f5c518) */
    .v-tabs.nav-tabs .nav-link.active,
    .cg-tabs .nav-link.active,
    .nav-tabs .nav-link.active {
        color: #f5c518 !important;
        border-color: #f5c518 !important;
        border-bottom-color: #f5c518 !important;
    }

    /* 10d. Episode grid gap — AD 8-12px, 5-6 cols desktop.
       CHỈ áp cho trang chi tiết /phim/. Trước đây selector để trần nên
       #episodes-grid + .cg-body-box bên trang /xem-phim/ cũng bị dính
       (ID + !important thắng hết), ép gap lưới tập về 10px ở >=1025px
       thay vì 9.6px/16px đúng như bản mẫu. */
    .detail-container #episodes-grid,
    .detail-container .cg-body-box,
    .detail-container .ep-list {
        gap: 10px !important;
    }

    /* 11. Cap "Top phim tuần này" to 5 visible items, scrollable for rest */
    .dc-side .cc-top {
        max-height: 320px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .dc-side .child-top .cc-top::-webkit-scrollbar {
        width: 3px;
    }
    .dc-side .child-top .cc-top::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.12);
        border-radius: 2px;
    }

    /* 12. Sidebar actors: show only first 4, compact */
    .dc-side .child-actors-list {
        max-height: 180px;
        overflow: hidden;
    }

    /* 13. Title — match AD (AD uses 24px/700 at PC, bolder than 1.3rem) */
    .ds-info .v-thumb-l {
        margin-bottom: 0.6rem;
    }
    .ds-info .heading-md {
        font-size: 24px !important;
        line-height: 1.25;
        font-weight: 700 !important;
        margin-bottom: 0.3rem;
    }
    .ds-info .alias-name {
        margin-bottom: 0.6rem;
        font-size: 14px;
        opacity: .9;
    }

    /* 14. Detail toggle and info tags: compact */
    #toggle-detail {
        padding: 0.4rem 0.8rem;
        font-size: 13px;
    }
    .hl-tags {
        gap: 6px;
    }
    .hl-tags .tag-imdb,
    .hl-tags .tag-model,
    .hl-tags .tag-classic,
    .hl-tags .tag-topic {
        padding: 2px 8px;
        font-size: 12px;
    }

    /* 15. Status badge compact */
    .status .line-center {
        padding: 0.3rem 0.6rem;
        font-size: 12px;
    }

    /* 16. Description: clamp to 3 lines max */
    .detail-more .description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 17. Detail lines: smaller font */
    .detail-line {
        font-size: 13px;
        margin-bottom: 0.5rem;
    }

    /* 18. Sidebar child-header: AD parity — Top section header 22.4px/600, mb 16px */
    .dc-side .child-box.child-top .child-header {
        font-size: 22.4px;
        font-weight: 600;
        min-height: 40px;
        margin-bottom: 16px;
    }
    .dc-side .child-box .child-header {
        font-size: 1.1em;
        min-height: 28px;
        margin-bottom: 0.5rem;
    }
}

@media screen and (min-width: 1121px) {
  /* AD parity: both panels stretch to row height; sidebar is static (no nested scroll) */
  .detail-container { align-items: stretch !important; }
  .detail-container > .dc-side {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    width: 440px !important;
    padding: 40px !important;
    border-radius: 1.25rem 3rem 1.25rem 1.25rem !important;
    background-color: rgba(25, 27, 36, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  /* Remove compact caps at PC so sidebar renders full height like AD (no nested scroll) */
  .detail-container > .dc-side .cc-top,
  .detail-container > .dc-side .child-actors-list {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ============================================================
   Rating Source Distinction — IMDb vs TMDb
   ============================================================ */
.tag-source-tmdb {
    border-color: rgba(1, 180, 220, 0.5) !important;
}
.tag-source-tmdb span {
    color: rgba(1, 180, 220, 0.95);
}
.tag-source-tmdb .rating-source-label {
    color: rgba(1, 180, 220, 0.7);
}
.tag-source-imdb .rating-source-label {
    color: rgba(245, 197, 24, 0.7);
}
.rating-source-label {
    font-size: 10px;
    margin-left: 4px;
    font-weight: 400;
    opacity: 0.8;
}

/* ============================================================
   Topics section — mobile horizontal scroll, desktop grid
   ============================================================ */
@media screen and (max-width: 640px) {
    .phimhay-page .topics-grid.topics-line {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* RoPhim @384px (measured): gap 8px + full-bleed rail. The grid breaks out
           of .row-content's 16px inset via margin:0 -16px, then re-pads 0 16px, so
           it spans x0..384 with the first card at x16 — matching RoPhim's card steps
           16/144/272/400 (120 + 8 gap). Vertical padding stays 0 so the 24px gap to
           the next collection (bottom 517.13 -> 541.13) is preserved. */
        gap: 8px;
        padding: 0 16px;
        margin: 0 -16px;
        /* scroll-snap aligns card start to the scrollport edge; without this the
           proximity snap rests at scrollLeft=16 (card #0 flush to x0). Matching the
           16px padding makes the resting snap position scrollLeft=0 so card #0 sits
           at x16 like RoPhim (measured resting steps 16/144/272). */
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }
    .phimhay-page .topics-grid.topics-line::-webkit-scrollbar {
        display: none;
    }
    /* Card: reference @384px = 120×75.1, radius .75rem/1.5rem (12px 24px),
       padding 1rem. Height is NOT hardcoded — it comes from padding + 2 lines
       of 1.1em text, exactly like the reference. */
    .phimhay-page .topics-grid.topics-line .row-topic {
        flex: 0 0 120px;
        width: 120px;
        scroll-snap-align: start;
        border-radius: 12px 24px;
        min-height: 0;
        padding: 1rem !important;
    }
    /* Color base from inline .mask background-color + a soft diagonal sheen for depth. */
    .phimhay-page .topics-grid.topics-line .row-topic .mask {
        background-image: linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 45%);
    }
    /* Decorative light layer on the right half — pointer-events:none, below text (z 3). */
    .phimhay-page .topics-grid.topics-line .row-topic::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 55%;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 100%);
        border-radius: inherit;
    }
    .phimhay-page .topics-grid.topics-line .row-topic .intro {
        min-height: auto !important;
        padding: 0;
        align-items: flex-start;
        justify-content: center;
    }
    .phimhay-page .topics-grid.topics-line .row-topic .heading-md {
        font-size: 1.05em;
        /* Reference @384px: 15.4px, line-height 1.4 => intro 43.1px, card 75.1px.
           (was 1.25 => intro 38.5px, card 70.5px — 4.6px short of RoPhim) */
        line-height: 1.4;
        text-align: left;
        font-weight: 600;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* "+3 chủ đề" button card: same sizing, centered text, no decorative layer. */
    .phimhay-page .topics-grid.topics-line .row-topic#more-topics-btn::after {
        display: none;
    }
    .phimhay-page .topics-grid.topics-line .row-topic#more-topics-btn .intro {
        align-items: center;
        justify-content: center;
    }
}
@media screen and (min-width: 641px) {
    .phimhay-page .topics-grid.topics-line {
        gap: 12px;
    }
}

/* ============================================================
   MOBILE DETAIL GRADIENT — proportional height only
   Scoped ≤1120px. Gradient (::after) is position:absolute so it
   never affects layout. Margin-top / hero height are provided by
   device.css (margin-top:-150px at ≤989px, hero 200px at ≤479px).
   Desktop (≥1025px) untouched.
   ============================================================ */
@media screen and (max-width: 1120px) {
    .top-detail-wrap:after { height: 80px; }
}
@media screen and (max-width: 640px) {
    .top-detail-wrap:after { height: 60px; }
}
@media screen and (max-width: 479px) {
    .top-detail-wrap:after { height: 50px; }
}


/* ── KKPhim casts tab (Diễn viên) ── 20260808 */
/* 2:3 card ratio for the actors grid */
.de-actors .item-actor .v-actor {
    padding-bottom: 150%;
}
/* Initial-letter placeholder — never a grey box filling the card */
.de-actors .item-actor .v-actor .actor-ph,
.child-actors-list .v-actor .actor-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: linear-gradient(160deg, rgba(129, 140, 248, .30), rgba(255, 215, 117, .16) 55%, rgba(255, 255, 255, .05));
}
.child-actors-list .v-actor-medium .actor-ph {
    font-size: 1.4rem;
}
/* Responsive casts grid */
@media (max-width: 991px) {
    .de-actors { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
@media (max-width: 640px) {
    .de-actors { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
}
@media (max-width: 380px) {
    .de-actors { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
}

/* =====================================================================
   G9 Actor Directory (/dien-vien listing + detail)
   Portraits 2:3, object-fit cover, responsive columns, no broken images.
   ===================================================================== */
.actors-dir-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    row-gap: 1.5rem;
}
.actor-dir-card {
    display: flex;
    flex-direction: column;
    min-height: 44px; /* touch target floor */
    border-radius: .6rem;
    overflow: hidden;
    background: rgba(255,255,255,.02);
    text-decoration: none;
    color: var(--text-base);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.actor-dir-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    color: inherit;
}
.actor-dir-card:focus-visible {
    outline: 2px solid var(--primary, #e50914);
    outline-offset: 2px;
}
.actor-dir-photo {
    width: 100%;
    aspect-ratio: 2 / 3; /* CLS-safe; mirrors w185/w342 portrait */
    overflow: hidden;
    background: var(--placeholder, #222);
}
.actor-dir-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.actor-dir-info {
    padding: .55rem .5rem .65rem;
    text-align: center;
}
.actor-dir-name {
    font-size: .95em;
    font-weight: 500;
    color: #fff;
    margin: 0 0 .15rem;
    line-height: 1.35;
}
.actor-dir-alias {
    font-size: .78em;
    color: var(--text-base, #999);
    margin: 0 0 .25rem;
}
.actor-dir-count {
    font-size: .78em;
    color: var(--primary, #e50914);
    font-weight: 500;
}

/* Toolbar: search + sort */
.actor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}
.actor-search {
    display: flex;
    gap: .5rem;
    flex: 1 1 260px;
    max-width: 420px;
}
.actor-search-input {
    min-width: 0;
}
.actor-sort {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.actor-sort-btn {
    padding: .45rem .85rem;
    border-radius: .5rem;
    font-size: .85em;
    background: rgba(255,255,255,.05);
    color: var(--text-base);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.actor-sort-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.actor-sort-btn.active { background: var(--primary, #e50914); color: #fff; }
.actor-sort-btn:focus-visible { outline: 2px solid var(--primary, #e50914); outline-offset: 2px; }

/* Tablet 480–1023 */
@media (min-width: 481px) and (max-width: 1023px) {
    .actors-dir-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; row-gap: 1.6rem; }
}
/* Desktop 1024+ */
@media (min-width: 1024px) and (max-width: 1599px) {
    .actors-dir-grid { grid-template-columns: repeat(6, 1fr); gap: 1.2rem; row-gap: 1.8rem; }
}
@media (min-width: 1600px) {
    .actors-dir-grid { grid-template-columns: repeat(8, 1fr); gap: 1.2rem; row-gap: 1.8rem; }
}
@media (max-width: 430px) {
    .actors-dir-grid { gap: .8rem; row-gap: 1.2rem; }
}

/* ============================================================
   MOVIE BADGE — TramPhim parity (poster status overlay)
   Measured live: desktop segmented (bottom-center, 10.5px),
   mobile stacked pills (bottom-left, 9px/15.5px).
   Loaded last so these win over cached template/device.css.
   ============================================================ */
.pin-new.movie-badges {
    position: absolute;
    z-index: 15;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    line-height: 1;
}
.pin-new.movie-badges .mb-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 15.75px;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: none;
    border-radius: 0;
}
.pin-new.movie-badges .mb-primary {
    background-color: rgba(255, 255, 255, .9);
    color: #0f1115;
}
.pin-new.movie-badges .mb-quality {
    background-color: rgba(245, 197, 24, .9);
    color: #0f1115;
}
.pin-new.movie-badges .mb-chip:first-child:last-child { border-radius: 6px; }
.pin-new.movie-badges .mb-chip:first-child:not(:last-child) { border-radius: 6px 0 0 6px; }
.pin-new.movie-badges .mb-chip:last-child:not(:first-child) { border-radius: 0 6px 6px 0; }
.pin-new.movie-badges .mb-chip:not(:first-child):not(:last-child) { border-radius: 0; }

/* FIX (20260814): Remove backdrop-filter on mobile — 470 blur(4px) chips cause
   heavy GPU compositing during scroll (measured: 470 backdrop-filter elements).
   Mobile at 3x DPR renders tiny badges where 4px blur is imperceptible. Solid
   rgba() backgrounds maintain visual hierarchy without scroll jank. Desktop
   preserved. Scoped to mobile ≤767px only. */
@media (max-width: 767px) {
    .pin-new.movie-badges .mb-chip {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Mobile (<768): stacked pills, bottom-left, per live TramPhim. */
@media (max-width: 767px) {
    .pin-new.movie-badges {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        left: 8px;
        bottom: 8px;
        transform: none;
        overflow: visible;
    }
    .pin-new.movie-badges .mb-chip {
        height: 15.5px;
        padding: 1px 6px;
        font-size: 9px;
        line-height: 13.5px;
    }
    .pin-new.movie-badges .mb-chip:first-child:last-child,
    .pin-new.movie-badges .mb-chip:first-child:not(:last-child),
    .pin-new.movie-badges .mb-chip:last-child:not(:first-child),
    .pin-new.movie-badges .mb-chip:not(:first-child):not(:last-child) {
        border-radius: 999px;
    }
}

/* ============================================================
   HORIZONTAL RAILS (style6/style3) — TramPhim parity (2026-08-14)
   Live-measured on tramphim1.org (K-Drama rail) vs /phimhay at
   1920/1440/1366/390/360. Scope: .v-thumbnail-hoz = horizontal
   rails only; portrait grids (style1/2/4, grid) untouched.
   ============================================================ */

/* ROOT CAUSE — desktop badge clipping: device.css (min-width:641px)
   `.sw-cover.single .v-thumbnail-hoz .pin-new{left:1rem}` (0,3,0) beat
   `.pin-new.movie-badges{left:50%}` (0,2,0) while translateX(-50%) still
   applied => cluster rendered at 16px minus half its own width and the
   thumbnail overflow:hidden clipped the prefix ("VS+TM. 14" => "14").
   TramPhim reference: cluster centered, bottom flush with image edge. */
.sw-cover .v-thumbnail-hoz .pin-new.movie-badges {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

/* Thumbnail radius: TramPhim landscape ~8px desktop / ~12px mobile
   (Cobe rendered 12px / 4.8px). */
.sw-cover.single .v-thumbnail.v-thumbnail-hoz {
    border-radius: 8px;
}

/* Title block parity: flush left, 8px under image; VN title 600;
   alias 12px/500 #6b6b7b (TramPhim measured values). */
.sw-cover.single .h-item {
    padding: .5rem 0 0;
}
.sw-cover.single .h-item .info .item-link .item-title {
    font-weight: 600;
}
.sw-cover.single .h-item .info .item-link .alias-title {
    font-size: 12px;
    font-weight: 500;
    /* a11y (2026-08-15): was #6b6b7b at inherited opacity .7 -> computed #525361
       on #191B24 = 2.26:1 (FAIL). #83848f at full opacity = 4.63:1 on #191B24.
       Scoped + min-height/no layout change. */
    color: #83848f;
    opacity: 1;
}

/* Mobile override block. Notes (2026-08-16, RoPhim fix scope): the old
   12px thumbnail radius and the 24px/32 heading override were style6-only
   mobile bugs and are REMOVED here (thumbnail radius is now driven by the
   scoped <=640/.4rem and <=479/.3rem rules below; the heading is driven by
   device.css 1.5em/1.3). The centered horizontal-pill badge cluster below is
   KEPT as-is BUT it also matches style3's rail (`.sw-cover` + `.v-thumbnail-hoz`
   is shared by style3 AND style6). Per the fix scope "không làm badge Styler
   khác đổi", this shared rule must NOT be deleted: style3 keeps it unchanged.
   Style6 mobile is re-scoped to the generic stacked pills solely inside the
   greater-specificity `.phimhay-page .topics-list.single` rules below. */
@media (max-width: 767px) {
    .sw-cover .v-thumbnail-hoz .pin-new.movie-badges {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 8px;
        max-width: calc(100% - 16px);
    }
    .sw-cover .v-thumbnail-hoz .pin-new.movie-badges .mb-chip {
        border-radius: 999px;
    }
}

/* ============================================================
   STYLER 6 MOBILE — RoPhim parity (2026-08-16)
   Scope: ONLY `/phimhay` style6 blocks. Every rule is anchored on
   `.phimhay-page .topics-list.single` (style6's grouped/singleton wrapper;
   the ONLY collector that uses `.topics-list.single`) or
   `.phimhay-page .collection-swiper-s6`. Styler 1/2/3/4, top banner,
   header/footer, global lazy-image and the badge system for other styles
   are untouched. NO global `.swiper-slide` / `.row-topic` / `.pin-new`.
   ============================================================ */

/* ROW/PANEL basics: cards must be allowed to shrink below swiper widths
   (flex items default min-width:auto -> long title overflow). */
@media screen and (max-width: 799px) {
    .phimhay-page .topics-list.single .row-topic .row-content,
    .phimhay-page .topics-list.single .row-topic .row-content .cards-slide-wrapper {
        min-width: 0;
    }
}

/* PRE-SWIPER-INIT FALLBACK (<=799): before IntersectionObserver initializes
   a rail's Swiper, `swiper-slide` has no inline width => every slide renders
   full produced width and one card alone fills the viewport (layout shift;
   the reference bug list). Fallback flex is exactly slidesPerView:2 +
   spaceBetween:8 (RoPhim mobile parity 2026-08-17). `:not(.swiper-initialized)`
   => vanishes as soon as Swiper takes over; `.collection-swiper-s6` anchors
   ensure style3/other swipers are not affected. Desktop >=800 keeps its own
   pre-init behavior unchanged. */
@media screen and (max-width: 799px) {
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) {
        overflow: hidden;
    }
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) .swiper-slide {
        flex: 0 0 calc(50% - 4px);
        width: calc(50% - 4px);
        margin-right: 8px;
        box-sizing: border-box;
        min-width: 0;
    }
    /* No trailing gap (matches spaceBetween end-of-track behavior). */
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) .swiper-slide:last-child {
        margin-right: 0;
    }
}

/* DESKTOP PRE-SWIPER FALLBACK (>=800): same principle as mobile — before
   IntersectionObserver fires, slides have no inline width and render full
   container width (layout shift). Desktop default is ~4 cards + 20px gap.
   `:not(.swiper-initialized)` removes itself once Swiper takes over. */
@media screen and (min-width: 800px) {
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) {
        overflow: hidden;
    }
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow: visible;
    }
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) .swiper-slide {
        flex: 0 0 calc(25% - 15px);
        width: calc(25% - 15px);
        margin-right: 20px;
        box-sizing: border-box;
        min-width: 0;
    }
    .phimhay-page .collection-swiper-s6:not(.swiper-initialized) .swiper-slide:last-child {
        margin-right: 0;
    }
}

/* THUMBNAIL RADIUS (<=640 .4rem / <=479 .3rem, RoPhim measured). The old
   fixed 12px at <=767 is gone; device.css desktop 8px places over >=800. */
@media screen and (max-width: 640px) {
    .phimhay-page .topics-list.single .sw-cover.single .v-thumbnail.v-thumbnail-hoz {
        border-radius: .4rem;
    }
}
@media screen and (max-width: 479px) {
    .phimhay-page .topics-list.single .sw-cover.single .v-thumbnail.v-thumbnail-hoz {
        border-radius: .3rem;
    }
}

/* TITLE / ALIAS (<=799): flush two-line block, 1rem under the image
   (device.css .topics-list.single .h-item padding:1rem 0 already does the
   1rem; we only re-assert it at higher specificity so the old
   `.sw-cover.single .h-item { padding:.5rem 0 0 }` at custom.css can't win).
   RoPhim mobile parity 2026-08-17 (live-measured 360px): title 13px/500/1.5
   single-line ellipsis (was 14px/600); alias .9em/1.5, 5px margin, ellipsis.
   font-weight 500 here re-scopes the global 600 set for TramPhim desktop
   parity (`.sw-cover.single ... .item-title` above) on style6 mobile only. */
@media screen and (max-width: 799px) {
    .phimhay-page .topics-list.single .sw-cover.single .h-item {
        padding: 1rem 0;
    }
    .phimhay-page .topics-list.single .sw-cover.single .info,
    .phimhay-page .topics-list.single .sw-cover.single .item-link {
        min-width: 0;
    }
    .phimhay-page .topics-list.single .sw-cover.single .item-title {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1 !important;
    }
    .phimhay-page .topics-list.single .sw-cover.single .alias-title {
        margin-top: 5px;
        font-size: .9em;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1 !important;
    }
}

/* HEADING + LINE-CENTER (<=640): heading flexes to fill remaining row and
   truncates; the "Xem toàn bộ" link keeps auto width. font-size/letter-spacing
   already come from device.css (1.5em !important / 0); only add the flex
   geometry + line-height so the removed 24px/32 override is fully replaced.
   nowrap/ellipsis: reference header is always a single row — a long block name
   must clip, never wrap the intro row out of the 35px header height. */
@media screen and (max-width: 640px) {
    .phimhay-page .topics-list.single .row-topic .intro .heading-md {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .phimhay-page .topics-list.single .row-topic .intro .info {
        flex: 0 0 auto;
    }
}

/* BADGES -> STACKED PILLS (RoPhim reference). The shared <=767 rule above
   (`.sw-cover .v-thumbnail-hoz .pin-new.movie-badges`, row/center/wrap,
   gap 6px) stays live for style3's rail. Here it is neutralized for style6
   ONLY by re-declaring the generic `.pin-new.movie-badges` mobile values at
   higher specificity, then tightened further <=479 (exact RoPhim 479px
   measurement: 5px/5px, 2px gap, small chips). */
@media screen and (max-width: 640px) {
    .phimhay-page .topics-list.single .sw-cover .v-thumbnail-hoz .pin-new.movie-badges {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 4px;
        left: 8px;
        bottom: 8px;
        transform: none;
        max-width: none;
        overflow: visible;
    }
    .phimhay-page .topics-list.single .sw-cover .v-thumbnail-hoz .pin-new.movie-badges .mb-chip {
        border-radius: 999px;
    }
}
@media screen and (max-width: 479px) {
    .phimhay-page .topics-list.single .sw-cover.single .m-pin-new.movie-badges {
        flex-direction: column;
        align-items: flex-start;
        left: 5px;
        bottom: 5px;
        gap: 2px;
        transform: none;
        max-width: none;
        overflow: unset;
    }
    .phimhay-page .topics-list.single .sw-cover.single .pin-new.movie-badges .mb-chip {
        height: auto;
        padding: .15rem .4rem;
        border-radius: 1rem !important;
        font-size: 10px;
        line-height: 1.3;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .067);
    }
}

/* P2: respect reduced motion; mobile solid fallback for heavy backdrop blur */
@media (prefers-reduced-motion: reduce) {
    .fade-in, .effect-fade-in, .scroll-reveal .sr-content,
    .top-slide-wrap .swiper-slide .cover-fade,
    .top-slide-wrap .swiper-slide .slide-content,
    .live-tag.blink::before, .user-avatar.o-live,
    .live-countdown .count-start #countdown, .light-blur,
    .sb_bottom .row-new .btn-light .icon-new, .count-time {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    html { scroll-behavior: auto !important; }
}
@media (max-width: 767px) {
    .search-modal, .Toastify__toast-theme--dark,
    .sw-tip .media-item, .home-board,
    .live-countdown, .live-trailer,
    .homepage .home-board, .player-dm,
    .current-status {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .search-modal { background-color: rgba(15,17,26,.98); }
    .sw-tip .media-item { background: rgb(47,51,70); }
    .Toastify__toast-theme--dark { background: #1e212e !important; }
}

/* PARITY 2026-09-16 (ref rule cap):
   .slide-elements .hl-tags .tag-classic/.tag-topic:nth-child(n+7), .slide-url {display:none}
   <=640: .top-slide-wrap .swiper-slide .hl-tags>div:nth-child(n+6){display:none}
   Ours gom badge vao 1 hang (.hero-meta-tags) => ap dung cung nguong. */
.phimhay-page .slide-elements .hero-meta-tags > div:nth-child(n+7),
.phimhay-page .slide-elements .hl-tags.mb-4 > a:nth-child(n+7) {
    display: none;
}
@media screen and (max-width: 640px) {
    .phimhay-page .slide-elements .hero-meta-tags > div:nth-child(n+6),
    .phimhay-page .slide-elements .hl-tags.mb-4 > a:nth-child(n+6) {
        display: none;
    }
}

/* P4 2026-09-16 — keo anh hero ra giua full-bleed (fix "don 1 ben").
   Scope: .phimhay-page only. DOM/JS khong doi.
   - Bo mask feather NGANG tren .cover-image (nguyen nhan trai toi / phai sang,
     nhin nhu anh bi don sang 1 ben).
   - Giu fade DOC nhe tren .cover-fade de chu van doc duoc (da lam mem 20/80 -> 12/88).
   - Tat animation truot ngang cover-fade (keyframe -45% -> -50% gay cam giac lech
     luc load); giu transform -50% tinh de can giua dung tam.
   - Chot object-position 50% 50% (bo focal lech), img full-bleed cover. */
.phimhay-page .slide-elements .cover-fade .cover-image,
.phimhay-page .top-slide-wrap .swiper-slide .slide-elements .cover-fade .cover-image {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
.phimhay-page .slide-elements .cover-fade {
    -webkit-mask-image: linear-gradient(0deg, transparent 0, black 12%, black 88%, transparent) !important;
    mask-image: linear-gradient(0deg, transparent 0, black 12%, black 88%, transparent) !important;
}
.phimhay-page .top-slide-wrap .swiper-slide-active .cover-fade {
    animation: none !important;
}
.phimhay-page .slide-elements .cover-fade {
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    margin: 0 auto;
}
.phimhay-page .top-slide-main .swiper-slide .cover-image img {
    object-position: 50% 50% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* P7-MOBILE-HERO-ALIGN 2026-09-16 — mobile topbanner align to ref (rophim.ad).
   Scope: .phimhay-page + max-width:640px only. PC untouched.
   Measured ref@390 (labeled probe): content 390x92 @y208 pad 0 20px centered;
   h3.media-title VI 21px/27.3px/700 mb 1.6px centered ellipsis;
   h3.media-alias-title EN 12.6px/18.9px mb 12px centered ellipsis;
   hl-tags centered row gap 6px h20 @y268; rail 390x78 bottom:0 pad 32px/16px;
   thumbs 26-30px from x~6; main mb 30px h300. */
@media screen and (max-width: 640px) {
    .phimhay-page .top-slide-wrap .top-slide-main {
        margin-bottom: 30px;
    }
    .phimhay-page .top-slide-wrap .swiper-slide .slide-content {
        text-align: center;
        padding: 0 20px;
    }
    .phimhay-page .slide-content .media-title,
    .phimhay-page .top-slide-wrap .swiper-slide .slide-content .media-title {
        display: block;
        text-align: center;
        font-size: 21px;
        line-height: 27.3px;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 1.6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .phimhay-page .slide-content .media-alias-title {
        display: block;
        text-align: center;
        font-size: 12.6px;
        line-height: 18.9px;
        margin-bottom: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .phimhay-page .slide-content .media-title-image {
        display: none;
    }
    .phimhay-page .slide-content .hero-meta-tags {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 6px;
        height: 20px;
        white-space: nowrap;
    }
    .phimhay-page .slide-content .hero-meta-tags > div {
        height: 20px;
        font-size: 10px;
        line-height: 18px;
        padding: 0 .25rem;
    }
    .phimhay-page .top-slide-wrap .top-slide-small {
        bottom: 0;
        padding-top: 32px;
        padding-bottom: 16px;
    }
    .phimhay-page .top-slide-wrap .top-slide-small .swiper-wrapper {
        justify-content: center;
    }
}

/* Hidden Bootstrap tab panes must not occupy layout — GLOBAL (all viewports) */
.tab-pane:not(.show.active) { display: none !important; }
.tab-pane.show.active { display: block; }
.tab-content > .tab-pane[style] { height: auto; }
.tab-content > .tab-pane:not(.show.active)[style] { display: none !important; }

/* ============================================================
   MOBILE BLACK GAP FIX — 2026-09-17
   Root cause: hidden tab-panes still occupy layout (Bootstrap fade
   leaves opacity:0 but no display:none in project CSS), .cg-body/
   .cg-body-box/#episodes-grid can inherit min-height/padding, and
   .detail-container>.dc-main has flex-grow without reset.
   Also: rating pill too tall, cg-tabs needs overflow at 640px.
   ============================================================ */
@media screen and (max-width: 1120px) {
  .detail-container { align-items: stretch; }
  .detail-container > .dc-side,
  .detail-container > .dc-main {
    position: static;
    top: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-self: auto;
    flex: none;
  }
  .cg-body, .cg-body-box, .cg-body-box.is-eps, #episodes-grid {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  /* tab-pane collapse is now global (see above) */
}

@media screen and (max-width: 640px) {
  /* Title parity AD mobile (AD 19.6px/600 centered vs PC 24px/700) */
  .ds-info .heading-md, .ds-info .media-name { font-size: 19.6px !important; line-height: 1.35 !important; font-weight: 600 !important; text-align: center; }
  .ds-info .alias-name { font-size: 13px !important; text-align: center; }
  /* Poster parity AD 2:3 — cap at ~140px centered (PC is 220px at 1025px) */
  .ds-info .v-thumb-l .v-thumbnail { max-width: 140px; margin: 0 auto; }
  .ds-info .v-thumb-l .v-thumbnail img { width: 100%; height: auto; object-fit: cover; }
  .detail-container, .detail-container > .dc-main, .cg-body, .cg-body-box, #episodes-grid {
    height: auto;
    min-height: 0;
  }
  #episodes-grid { margin-bottom: 0; }
  .cg-body-box { padding-bottom: 16px; }
  .box-body { padding-bottom: 0; }
  /* Defensive: collapse empty inline spacer left by JS height calc */
  .cg-body-box .box-body { width: 100% !important; max-width: 100% !important; }
  .cg-body-box .box-body .de-eps { width: 100% !important; }
  .cg-body:empty, .cg-body-box:empty { display: none; }
  .child-related, #comment-area, .faq-block { margin-top: 24px; }

  /* Rating pill — compact at 640px (was too tall) */
  .v-rating .ro-rating,
  .movie-actions-badge .ro-rating {
    min-height: 0;
    height: auto;
    padding: .3rem .5rem;
    gap: .2rem;
  }
  .v-rating .ro-rating .point,
  .movie-actions-badge .ro-rating .point {
    font-size: 13px;
    line-height: 1.1;
    padding: 0;
  }
  .v-rating .ro-rating .a-rate,
  .movie-actions-badge .ro-rating .a-rate {
    line-height: 1.1;
  }

  /* Tab bar: horizontal scroll at 640px, prevent body overflow */
  .cg-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cg-tabs::-webkit-scrollbar { display: none; }
  .cg-tabs .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  body, html { overflow-x: hidden; max-width: 100%; }
}

/* P0-SINGLE-EP 2026-09-16 — UI-only single-episode (phim le 1 tap) parity ref rophim.ad.
   Scope: .detail-container.single-ep only. Multi-ep (2+ tap) untouched. No SEO change. */
.detail-container.single-ep .ds-info .media-name { font-size: 25.2px !important; line-height: 37.8px !important; font-weight: 600 !important; color: #fff !important; }
.detail-container.single-ep .ds-info .alias-name { color: #FFD875 !important; font-size: 14px !important; line-height: 22.4px !important; font-weight: 400 !important; }
.detail-container.single-ep .detail-more .hl-tags .tag-topic { font-size: 12px !important; line-height: 19.2px !important; font-weight: 300 !important; color: #fff !important; background: rgba(255,255,255,.063) !important; min-height: 26px !important; border-radius: 5.28px !important; padding: 0 6.4px !important; display: inline-flex !important; align-items: center !important; }
.detail-container.single-ep .detail-more .hl-tags .tag-imdb { font-size: 12px !important; border-radius: 5.28px !important; padding: 0 6.4px !important; }
.detail-container.single-ep .detail-more .description { font-size: 14px !important; line-height: 22.4px !important; font-weight: 300 !important; color: #AAAAAA !important; }
.detail-container.single-ep .dm-bar #btn-trailer.btn-basic { display: none !important; }
.detail-container.single-ep #season-dropdown, .detail-container.single-ep #nav-tab-child, .detail-container.single-ep .v-toggle { display: none !important; }
.detail-container.single-ep #episodes-grid { display: none !important; }
.detail-container.single-ep .single-ver-card { display: flex !important; align-items: stretch !important; justify-content: space-between !important; width: 336px !important; max-width: 100% !important; height: 158px !important; background: #5E6070 !important; border-radius: 12px !important; overflow: hidden !important; text-decoration: none !important; color: #fff !important; }
.detail-container.single-ep .single-ver-card .single-ver-body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 6px !important; padding: 16px 12px 16px 16px !important; }
.detail-container.single-ep .single-ver-card .single-ver-eyebrow { font-size: 12px !important; line-height: 16px !important; color: rgba(255,255,255,.72) !important; }
.detail-container.single-ep .single-ver-card .single-ver-title { font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; color: #fff !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.detail-container.single-ep .single-ver-card .single-ver-cta { display: inline-flex !important; align-items: center !important; width: fit-content !important; margin-top: 4px !important; font-size: 13px !important; font-weight: 600 !important; color: #FFD875 !important; border: 1px solid rgba(255,255,255,.5) !important; border-radius: 999px !important; padding: 6px 14px !important; }
.detail-container.single-ep .single-ver-card .single-ver-thumb { width: 130px !important; min-width: 130px !important; height: 100% !important; object-fit: cover !important; }
@media screen and (min-width: 641px) {
    .detail-container.single-ep .ds-info #toggle-detail { display: none !important; }
    .detail-container.single-ep .ds-info .v-thumb-l img, .detail-container.single-ep .ds-info .v-thumbnail img { width: 160px !important; height: 240px !important; object-fit: cover !important; }
}
@media screen and (max-width: 640px) {
    .detail-container.single-ep .ds-info { text-align: center !important; }
    .detail-container.single-ep .ds-info .v-thumb-l img, .detail-container.single-ep .ds-info .v-thumbnail img { width: 120px !important; height: 180px !important; object-fit: cover !important; margin: 0 auto !important; }
    .detail-container.single-ep .ds-info .media-name { font-size: 19.6px !important; line-height: 29.4px !important; text-align: center !important; }
    .detail-container.single-ep .ds-info .alias-name { color: #AAAAAA !important; font-size: 13px !important; line-height: 20.8px !important; text-align: center !important; }
    .detail-container.single-ep .ds-info #toggle-detail { display: block !important; width: 300px !important; max-width: 100% !important; margin: 8px auto !important; color: #FFD875 !important; }
    .detail-container.single-ep .single-ver-card { width: 100% !important; height: 127px !important; }
}

/* P1-SINGLE-EP 2026-09-16 — card shadow hover. Scope .single-ep only. */
.detail-container.single-ep .single-ver-card { box-shadow: 0 8px 28px rgba(0,0,0,.32) !important; }
.detail-container.single-ep .single-ver-card:hover { background: #6a6d7d !important; }

/* P2-SINGLE-EP 2026-09-16 — card ref parity: info+ver+title+btn+thumb like rophim.ad. Scope .single-ep only. */
.detail-container.single-ep .single-ver-card { display: block !important; padding: 0 !important; background: #5E6070 !important; border-radius: 12px !important; overflow: hidden !important; position: relative !important; width: 336px !important; max-width: 100% !important; height: 158px !important; }
.detail-container.single-ep .single-ver-card .m-thumbnail { position: absolute !important; right: 0 !important; top: 0 !important; width: 130px !important; height: 158px !important; overflow: hidden !important; }
.detail-container.single-ep .single-ver-card .m-thumbnail img { width: 130px !important; height: 158px !important; object-fit: cover !important; }
.detail-container.single-ep .single-ver-card .info { position: relative !important; width: 206px !important; height: 158px !important; padding: 24px 0 0 24px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.detail-container.single-ep .single-ver-card .ver { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 14px !important; line-height: 22px !important; color: #fff !important; }
.detail-container.single-ep .single-ver-card .ver .inc-icon { width: 20px !important; height: 20px !important; }
.detail-container.single-ep .single-ver-card .media-title { font-size: 16.8px !important; line-height: 25px !important; font-weight: 600 !important; color: #fff !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.detail-container.single-ep .single-ver-card .btn.btn-light { font-size: 12px !important; line-height: 18px !important; font-weight: 500 !important; color: #000 !important; background: #fff !important; border-radius: 4.8px !important; padding: 4.8px 11.2px !important; width: fit-content !important; border: none !important; }
@media screen and (max-width: 640px) {
  .detail-container.single-ep .single-ver-card { width: 100% !important; height: 127px !important; }
  .detail-container.single-ep .single-ver-card .m-thumbnail, .detail-container.single-ep .single-ver-card .m-thumbnail img { width: 110px !important; height: 127px !important; }
  .detail-container.single-ep .single-ver-card .info { width: calc(100% - 110px) !important; height: 127px !important; padding: 16px 0 0 16px !important; }
}

/* P3-SINGLE-EP 2026-09-16 — trailer parity: hide all trailer CTAs in single-ep (ref phim le has no trailer in row).
   Keep primary Xem Ngay only. Scope .single-ep. */
.detail-container.single-ep #btn-trailer { display: none !important; }
.detail-container.single-ep .dm-bar .button-play + .btn-basic { display: none !important; }

/* P4-SINGLE-EP 2026-09-16 — reuse engine .de-type grid + thumbnail mask (like ref). Reset P2 fixed overrides. Scope .single-ep only. */
.detail-container.single-ep .box-body > .de-type { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 1rem !important; }
@media screen and (max-width: 1024px) { .detail-container.single-ep .box-body > .de-type { grid-template-columns: repeat(2,1fr) !important; } }
@media screen and (max-width: 640px) { .detail-container.single-ep .box-body > .de-type { grid-template-columns: 1fr !important; } }
.detail-container.single-ep .single-ver-card { position: relative !important; width: auto !important; height: auto !important; max-width: 550px !important; overflow: hidden !important; border-radius: .75rem !important; padding: 0 !important; background: #5e6070 !important; }
.detail-container.single-ep .single-ver-card .m-thumbnail { position: absolute !important; top: 0 !important; bottom: 0 !important; right: 0 !important; width: 40% !important; max-width: 130px !important; mask-image: linear-gradient(to left, black 0%, transparent 95%) !important; -webkit-mask-image: linear-gradient(to left, black 0%, transparent 95%) !important; overflow: visible !important; }
@media screen and (max-width: 640px) { .detail-container.single-ep .single-ver-card .m-thumbnail { max-width: 110px !important; } }
.detail-container.single-ep .single-ver-card .m-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.detail-container.single-ep .single-ver-card .info { position: relative !important; z-index: 2 !important; width: 90% !important; height: auto !important; padding: 1.5rem !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 1rem !important; }
@media screen and (max-width: 640px) { .detail-container.single-ep .single-ver-card .info { padding: 1rem !important; gap: .3rem !important; } .detail-container.single-ep .single-ver-card .info .media-title { margin-bottom: .5rem !important; } }

/* ==========================================================================
   STYLE 2 PC PARITY — do cobephim.cfd khoi dem PC (20260922)
   site cobephim.cfd PC dung dung so trong template.css:
   hero 500px, cover-fade calc(100% - 500px), rail max-width 1200px,
   gap 1rem (moi case), slide flex:1 1 / border-radius .6rem.
   Nguon: Next.js bundles https://cobephim.cfd/_next/static/css/*.css
   (private CSS, khong phai rophim.ad search). Chi Style 2.
   1280px: rail van co dan (flex:1) nen dung full khung cua ref.
   Full-frame hero/rail chi ap dung khi ban dap cua ref co.
   ========================================================================== */
@media screen and (min-width: 1280px) {
    /* 1280-1599: ref dung gap:1rem con device.css nha ghi gap:0 (de Swiper
       spaceBetween lam gap). Voi flex:1 1 o template.css thi gap 0 lam rail
       cuc chum — tra ve 1rem cho dung ref. */
    .collection-style-2 .big-slide-wrapper .collection-s2-thumbs .swiper-wrapper {
        gap: 1rem !important;
    }

    /* Rail thumb: tra ve ref (flex co dan, khong ghim 65x95 cua device.css).
       device.css @max-1599 ghim width:65px/height:95px lam rail thua cho ben
       phai; ref dung flex:1 1 (gap 1rem) nen slide tu dan kin 1200px — moi
       thumb ~70-80px tuy viewport. Giu ti le poster 2:3 bang aspect-ratio. */
    /* zfix 2026-09-22: tra ve ref — device.css @max-1599 65x95 gap 0,
       custom truoc lam 89x134 do aspect-ratio + flex:1. Ref fix la gap 1rem
       o wrapper + giu 65x95, rail 1200px se hien ~15 thumbs vua khit. */
    .collection-style-2 .big-slide-wrapper .collection-s2-thumbs .swiper-wrapper .swiper-slide {
        flex: none !important;
        width: 65px !important;
        height: 95px !important;
        border-radius: .6rem !important;
        overflow: hidden !important;
        background-color: var(--bg-2) !important;
        border: 3px solid transparent !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        aspect-ratio: auto !important;
    }
    .collection-style-2 .big-slide-wrapper .collection-s2-thumbs .swiper-wrapper .swiper-slide .v-thumbnail {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: .6rem !important;
        overflow: hidden !important;
    }
    .collection-style-2 .big-slide-wrapper .collection-s2-thumbs .swiper-wrapper .swiper-slide .v-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .collection-style-2 .big-slide-wrapper .slide-elements .cover-fade {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000) !important;
    }

    /* ================== CHASE D2 — ban bi sai ==================
       custom.css dang ghi sau device.css (pass cuoi thang), nhung cfd-hero-pc.css
       min-width:1280 cua ban dang THANG device.css o @1280. Pass nay phai GHI
       LAI cfd-hero-pc.css neu k0 Style 2 se bi keo theo kich thuoc hero cua top banner. */
    /* hero Style 2 dung 500px (ref) — neu muon noi thi phai doi ref */
    .collection-style-2 .big-slide-wrapper .collection-s2-main,
    .collection-style-2 .big-slide-wrapper .collection-s2-main .swiper-slide {
        height: 500px !important;
        border-radius: 1.2rem !important;
    }
    /* cover-fade Style 2 dung calc(100% - 500px) (ref) — ko full frame */
    .collection-style-2 .big-slide-wrapper .slide-elements .cover-fade {
        width: calc(100% - 500px) !important;
        max-width: none !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        height: 100% !important;
        mask-image: linear-gradient(90deg, transparent, #000 30%, #000) !important;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000) !important;
    }
    /* safe-area va slide-content dung so cua template.css/device.css */
    .collection-style-2 .big-slide-wrapper .slide-elements .safe-area {
        align-items: flex-start !important;
        max-width: none !important;
    }
    .collection-style-2 .big-slide-wrapper .slide-content {
        max-width: 700px !important;
        padding: 3rem !important;
        box-sizing: border-box;
    }
    /* rail dung 1200px (ref) — ko full width */
    .collection-style-2 .big-slide-wrapper .collection-s2-thumbs {
        max-width: 1200px !important;
        width: calc(100% - 32px) !important;
        margin: -70px auto 0 !important;
    }
}