/* ========================================
   MOTCHILL SINGLE MOVIE PAGE FIX v4.8.0
   Last updated: 2026-04-07
   Nguồn chính: .movie-info-wrapper + combined (mô tả, diễn viên, tập, tags)
   ======================================== */

/* ⚡ CRITICAL FIX 2025-10-30: Breadcrumb span display fix - HIGHEST PRIORITY! */
/* Must be at top to override all other CSS! */
html body.single-ophim .breadcrumbs li:not(:nth-last-child(2)) a span,
html body .breadcrumbs li:not(:nth-last-child(2)) a span,
html body.single-ophim .breadcrumbs li.active span,
html body .breadcrumbs li.active span,
html .breadcrumbs li:not(:nth-last-child(2)) a span {
    display: inline !important;
    position: static !important;
    vertical-align: baseline !important;
}

/* ----- HIDE BROKEN ELEMENTS ----- */
.hidden,
[hidden],
.hide,
.display-none {
    display: none !important;
}

/* ----- COPY EXACT LAYOUT FROM HOMEPAGE ----- */
body.single-ophim {
    background: #0a0a0a !important;
    color: #fff !important;
}

body.single-ophim .container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Breadcrumb margin desktop → motchill-breadcrumbs.css */

/* ========================================================================
   LAYOUT - CLEAN CSS (Higher specificity without !important)
   ======================================================================== */

/* Base Layout - Desktop (1024px+) */
html body.single-ophim .content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    margin-top: 20px;
    align-items: flex-start;
    width: 100%;
}

/* Left Content - Main content area */
html body.single-ophim .left-content {
    flex: 0 0 68%;
    max-width: 68%;
    order: 1;
    box-sizing: border-box;
    float: none;
    padding: 0;
}

/* Right Content - Sidebar */
html body.single-ophim .right-content {
    flex: 0 0 30%;
    max-width: 30%;
    order: 2;
    box-sizing: border-box;
    float: none;
    padding: 0;
}

/* Trang thông tin phim: không sidebar → left full width */
html body.single-ophim .content-wrapper.motchill-single-no-sidebar .left-content {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Tablet/mobile layout rules moved to motchill-mobile-final.css [SINGLE-MOVED-LAYOUT-RESPONSIVE] */

/* Clear - Must be full width to not interfere with flex layout */
html body.single-ophim .content-wrapper .clear {
    clear: both;
    width: 100%;
    flex: 0 0 100%;
    height: 0;
    order: 3;
}

/* ========================================
   NEW LAYOUT STYLES
   ======================================== */

/* Hero Section */
body.single-ophim .movie-hero-section {
    display: flex !important;
    gap: 25px !important;
    margin-bottom: 30px !important;
    padding: 25px !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(102, 126, 234, 0.1) !important;
}

/* PhimUs variant: reduce CLS with aspect-ratio */
.movie-hero-section-motchill {
    display: flex !important;
    gap: 25px !important;
    align-items: flex-start !important;
}

.movie-poster-motchill {
    flex: 0 0 220px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #222;
}

.movie-poster-motchill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ✅ FIX: Đảm bảo cả 2 ảnh (desktop/mobile) có cùng position để overlay hoạt động đúng */
.movie-poster-motchill .movie-poster-desktop,
.movie-poster-motchill .movie-poster-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop ≥744: chỉ hiện .movie-poster-desktop (thumb). Ảnh .movie-poster-mobile nằm sau trong DOM
   nếu không ẩn sẽ đè poster lên thumb trên màn rộng (>1180px không có rule cũ). Mobile ≤743: mobile-final đảo. */
@media (min-width: 744px) {
    html body.single-ophim .movie-poster-motchill .movie-poster-desktop {
        display: block !important;
        z-index: 1;
    }

    html body.single-ophim .movie-poster-motchill .movie-poster-mobile {
        display: none !important;
    }
}

body.single-ophim .movie-hero-section .movie-poster {
    flex: 0 0 200px !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
}

body.single-ophim .movie-hero-section .movie-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

body.single-ophim .movie-hero-section .movie-poster:hover img {
    transform: scale(1.05);
}

body.single-ophim .movie-hero-section .hero-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 10px 0 !important;
}

body.single-ophim .movie-hero-section .movie-title {
    color: #fff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

body.single-ophim .movie-hero-section .movie-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    margin: 0 0 20px 0 !important;
    font-style: italic !important;
}

/* Hero Tags */
body.single-ophim .hero-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 25px !important;
}

body.single-ophim .hero-tag {
    background: linear-gradient(to right, #fb0, #e43603, #ff6290, #ff5000) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
}

body.single-ophim .hero-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Hero Watch Button */
body.single-ophim .hero-watch-button {
    background: linear-gradient(to right, #fb0, #e43603, #ff6290, #ff5000) !important;
    color: #fff !important;
    padding: 15px 30px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.3s ease !important;
    max-width: 200px !important;
    justify-content: center !important;
}

body.single-ophim .hero-watch-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
    color: #fff;
}

body.single-ophim .hero-watch-button i {
    font-size: 18px !important;
}

/* Đã xóa legacy không còn trong single-motchill: .movie-poster-section, .movie-description global, .episodes-section, .episode-btn, v.v. — xem khối .movie-info-wrapper bên dưới */

.related-movies {
    margin-top: 35px !important;
    margin-bottom: 20px !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    padding: 30px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(102, 126, 234, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.related-movies::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea) !important;
    background-size: 200% 100% !important;
    animation: shimmer 3s ease-in-out infinite !important;
}

.related-movies h3 {
    color: #667eea !important;
    margin: 0 0 20px 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Phim đề cử: grid 4 cột — .list-films từ optimized/homepage */
body.single-ophim .related-movies .list-films .item,
body.single-ophim .related-movies .list-films ul li.item {
    flex: 0 0 calc((100% - 45px) / 4) !important;
    max-width: calc((100% - 45px) / 4) !important;
    width: calc((100% - 45px) / 4) !important;
}

/* Related 3/2 cột (≤1024 / ≤640) → motchill-mobile-final.css */

.clear {
    clear: both !important;
}

/* ----- SIDEBAR STYLING (flex defined above) ----- */
body.single-ophim .right-content {
    position: relative !important;
    top: 0 !important;
}

/* Widget Most Viewed - Margin Top */
body.single-ophim .right-content .homepage-section:first-child {
    margin-top: 0 !important;
}

body.single-ophim .right-content .homepage-section:not(:first-child) {
    margin-top: 30px !important;
}



body.single-ophim .right-content .most-view .caption,
body.single-ophim .right-content .trailer .caption {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #667eea !important;
}

body.single-ophim .right-content .most-view .caption span,
body.single-ophim .right-content .trailer .caption span {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

/* Most View - Top Text Style - Điều chỉnh nhẹ */
body.single-ophim .right-content .most-view .list-film {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.single-ophim .right-content .most-view .list-film .item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    min-height: 60px !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

body.single-ophim .right-content .most-view .list-film .item:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    transform: translateX(5px) !important;
}

body.single-ophim .right-content .most-view .list-film .item .number-rank {
    background: transparent !important;
    background: linear-gradient(39deg, #fecf59, #fff1cc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    min-width: 25px !important;
    max-width: 25px !important;
}

/* Override absolute positioning from template */
body.single-ophim .right-content .most-view .list-film .item .number-rank.absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

body.single-ophim .right-content .most-view .list-film .item span {
    flex: 1 !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.single-ophim .right-content .most-view .list-film .item span a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: block !important;
    margin-bottom: 3px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

body.single-ophim .right-content .most-view .list-film .item span a:hover {
    color: #667eea !important;
}

body.single-ophim .right-content .most-view .list-film .item .count_view {
    color: #667eea !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    display: block !important;
    width: 100% !important;
}

/* Trailer - Top Thumb Style - Điều chỉnh nhẹ */
body.single-ophim .right-content .trailer .list-film {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    transform: translateX(5px) !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver a {
    width: 50px !important;
    height: 70px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: block !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .title {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .title .name {
    margin: 0 0 3px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .title .name a {
    color: #fff !important;
    text-decoration: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    flex-shrink: 1 !important;
    display: inline !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .title .name a:hover {
    color: #667eea !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .title .real-name {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 11px !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
    display: block !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .title .episode-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10px !important;
    font-style: italic !important;
    margin: 0 0 3px 0 !important;
    display: block !important;
    line-height: 1.2 !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .top-star {
    color: #FFD700 !important;
    font-size: 11px !important;
    margin-top: 3px !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    order: 3 !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .top-star i.fa-star,
body.single-ophim .right-content .trailer .list-film .film-item-ver .top-star i.fa-star-half-o {
    color: #FFD700 !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .top-star i.fa-star-o {
    color: rgba(255, 255, 255, 0.3) !important;
}

body.single-ophim .right-content .trailer .list-film .film-item-ver .top-star .rating-number {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 10px !important;
    margin-left: 3px !important;
    font-weight: 600 !important;
}

/* Override inline width from template */
body.single-ophim .right-content .trailer .list-film .film-item-ver .top-star[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
}


/* ----- FIX SPECIFIC ISSUES ----- */
.blockbody {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.info {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.poster {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.text {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dinfo {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.detail {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide broken elements */
.buttons,
.one-button,
.btn-groups,
.box-btn,
.box-rating,
.tags,
.keywords {
    display: none !important;
}

/* Breadcrumb look & separators → motchill-breadcrumbs.css
   Giữ chỉnh span inline (trên) để tránh theme/plugin ép display:block */

/* Tags / mô tả / tập trong .movie-info-wrapper → khối combined-content + actors bên dưới */

/* ========================================
   TẬP PHIM - episode-grid-motchill / episode-card-motchill
   Áp dụng cho tất cả thiết bị (desktop → mobile), chỉ responsive grid
   ======================================== */
html body.single-ophim .episodes-section-motchill {
    display: block !important;
}

/* Cột grid mobile (≤743) nằm ở motchill-mobile-final.css — không đặt repeat(6) ở đây vì file này load sau và sẽ ghi đè media query */
html body.single-ophim .episode-grid-motchill {
    display: grid !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px 0 4px 0 !important;
}

@media (min-width: 744px) {
    html body.single-ophim .episode-grid-motchill {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 10px !important;
    }
}

html body.single-ophim .episode-grid-motchill::-webkit-scrollbar {
    width: 6px;
}

html body.single-ophim .episode-grid-motchill::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

html body.single-ophim .episode-grid-motchill::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* display: flex (không !important) để inline style="display:none" từ PHP pagination có hiệu lực */
html body.single-ophim .episode-card-motchill {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    background: #2a2a2a !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

html body.single-ophim .episode-card-motchill .episode-number,
html body.single-ophim .episode-card-motchill .episode-label {
    color: inherit !important;
    text-decoration: none !important;
}

html body.single-ophim .episode-card-motchill:hover {
    background: #333 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html body.single-ophim .episode-card-motchill.current {
    background: #1a3a5c !important;
    border-color: rgba(79, 172, 254, 0.4) !important;
    color: #fff !important;
}

html body.single-ophim .episode-card-motchill.upcoming {
    opacity: 0.5 !important;
    background: rgba(26, 26, 26, 0.8) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

html body.single-ophim .episode-card-motchill.upcoming:hover {
    opacity: 0.8 !important;
}

/* Grid tập phim responsive (≤743 / ≤480) → motchill-mobile-final.css */
/* Poster desktop/mobile swap ≤743 → đã có trong motchill-mobile-final.css */

/* ========================================================================
   single-motchill.php — desktop; mobile/tablet: motchill-mobile-final.css
   ======================================================================== */

html body.single-ophim .motchill-season-selector.motchill-season-selector-info {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

html body.single-ophim .motchill-season-selector-info .motchill-season-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: rgba(102, 126, 234, 0.15) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  border-radius: 8px !important;
  color: inherit !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

html body.single-ophim .motchill-season-selector-info .motchill-season-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body.single-ophim .motchill-info-value .network-item,
html body.single-ophim .motchill-info-value .company-item {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* Meta + tags + trailer + badge poster (nhỏ) */
body.single-ophim .movie-meta-motchill-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  margin: 0 0 14px 0 !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  line-height: 1.4 !important;
}

body.single-ophim .movie-meta-motchill-inline .meta-item-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: inherit !important;
  text-decoration: none !important;
}

body.single-ophim .movie-meta-motchill-inline .meta-separator {
  opacity: 0.45 !important;
  user-select: none !important;
}

body.single-ophim .movie-meta-motchill-inline .meta-tmdb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.single-ophim .movie-meta-motchill-inline .meta-tmdb .meta-tmdb-star {
  color: #ffc107 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

body.single-ophim .movie-meta-motchill-inline .meta-tmdb .meta-tmdb-brand {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #01d277 !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}

body.single-ophim .movie-meta-motchill-inline .meta-tmdb .meta-tmdb-score {
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

body.single-ophim .hero-tags-motchill {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px 0 !important;
}

body.single-ophim .hero-tag-motchill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.single-ophim .movie-poster-motchill .btn-trailer-poster {
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

html body.single-ophim .movie-poster-motchill .rating-badge {
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
}

html body.single-ophim .movie-poster-motchill .rating-badge .rating-number {
  font-size: 11px !important;
}

html body.single-ophim .movie-poster-motchill .rating-badge .rating-max {
  font-size: 9px !important;
  opacity: 0.88 !important;
}

/* Trạng thái tập + reset .status-text (watch.css) */
body.single-ophim .episode-status-motchill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 4px 0 12px 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.single-ophim .episode-status-motchill.ongoing {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(45, 40, 72, 0.95) 0%, rgba(26, 28, 46, 0.98) 100%) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
}

html body.single-ophim .episode-status-motchill.complete {
  color: rgba(255, 255, 255, 0.96) !important;
  background: linear-gradient(135deg, rgba(48, 42, 72, 0.98) 0%, rgba(32, 28, 52, 0.99) 100%) !important;
  border: 1px solid rgba(102, 126, 234, 0.35) !important;
}

html body.single-ophim .episode-status-motchill.complete .status-text::before {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  margin-right: 10px !important;
  border-radius: 50% !important;
  background: #a78bfa !important;
  vertical-align: middle !important;
}

html body.single-ophim .episode-status-motchill .status-text {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: inline !important;
}

body.single-ophim .episode-status-motchill.ongoing .status-text::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin-right: 10px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  vertical-align: middle !important;
}

/* Accordion Thông tin phim */
body.single-ophim .motchill-info-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

body.single-ophim .motchill-info-toggle > span {
  flex: 1 1 auto !important;
  text-align: left !important;
}

body.single-ophim .motchill-info-content {
  margin-top: 12px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.single-ophim .motchill-info-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px 16px !important;
}

@media (min-width: 744px) {
  body.single-ophim .motchill-info-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

body.single-ophim .motchill-info-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 13px !important;
}

body.single-ophim .motchill-info-label {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 600 !important;
}

body.single-ophim .motchill-info-value {
  color: #fff !important;
  line-height: 1.45 !important;
}

body.single-ophim .motchill-info-value a {
  color: #9bb4ff !important;
  text-decoration: none !important;
}

/* Hàng nút: không đè gradient — responsive-v2 + optimized quyết định màu CTA */
body.single-ophim .action-buttons-motchill-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 10px !important;
  width: 100% !important;
}

body.single-ophim .action-buttons-motchill-text .secondary-buttons-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
}

body.single-ophim .action-buttons-motchill-text .secondary-buttons-group .btn-motchill-secondary {
  flex: 1 1 calc(33.333% - 7px) !important;
  min-width: 0 !important;
}

/* Nút phụ full width ≤480 → motchill-mobile-final.css */

/* ========================================================================
   Card thông tin phim — desktop (≥744). Mobile: motchill-mobile-final.css
   Load sau mobile-final → chỉ dùng min-width để không trùng breakpoint 743/744.
   ======================================================================== */

html body.single-ophim .movie-info-wrapper::before {
  display: none !important;
}

@media (min-width: 744px) {
  html body.single-ophim .movie-info-wrapper .hero-content-motchill,
  html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline,
  html body.single-ophim .movie-info-wrapper .hero-tags-motchill,
  html body.single-ophim .movie-info-wrapper .episode-status-motchill,
  html body.single-ophim .movie-info-wrapper .motchill-info-section,
  html body.single-ophim .movie-info-wrapper .action-buttons-motchill-text,
  html body.single-ophim .movie-info-wrapper .motchill-rating-bottom,
  html body.single-ophim .movie-info-wrapper .episodes-section-motchill {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body.single-ophim .movie-info-wrapper .hero-content-motchill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  html body.single-ophim .movie-info-wrapper .movie-header {
    width: 100% !important;
    text-align: center !important;
  }

  html body.single-ophim .movie-info-wrapper .movie-hero-section-motchill {
    padding: 28px 32px !important;
    margin-bottom: 24px !important;
    background: #1a1a1a !important;
    border-radius: 18px !important;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    gap: clamp(20px, 3vw, 32px) !important;
    align-items: flex-start !important;
  }

  html body.single-ophim .movie-info-wrapper .movie-poster-motchill {
    border-radius: 15px !important;
    flex-shrink: 0 !important;
  }

  html body.single-ophim .movie-info-wrapper .btn-trailer-poster {
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #6a5acd 0%, #7b68ee 100%) !important;
    box-shadow: 0 4px 16px rgba(106, 90, 205, 0.45) !important;
  }
}

@media (min-width: 744px) and (max-width: 1180px) {
  html body.single-ophim .movie-info-wrapper .movie-poster-motchill {
    flex: 0 0 clamp(200px, 31vw, 288px) !important;
    width: clamp(200px, 31vw, 288px) !important;
    max-width: 36% !important;
  }
}

@media (min-width: 1181px) {
  html body.single-ophim .movie-info-wrapper .movie-poster-motchill {
    flex: 0 0 min(300px, 33%) !important;
    width: auto !important;
    max-width: 34% !important;
  }
}

html body.single-ophim .movie-info-wrapper .poster-overlay .rating-badge {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  background: #6b5cd7 !important;
  border-radius: 0 12px 0 12px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  gap: 3px !important;
}

html body.single-ophim .movie-info-wrapper .poster-overlay .rating-badge::before {
  color: #ffeb3b !important;
  font-size: 12px !important;
}

html body.single-ophim .movie-info-wrapper .btn-trailer-poster span {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

html body.single-ophim .movie-info-wrapper .movie-title-motchill {
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  margin: 0 0 6px 0 !important;
}

html body.single-ophim .movie-info-wrapper .movie-subtitle-motchill {
  color: rgba(255, 255, 255, 0.62) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  margin: 0 0 10px 0 !important;
}

html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline {
  gap: 8px !important;
  margin-bottom: 0 !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline .meta-separator {
  display: none !important;
}

html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline .meta-item-inline {
  background: #333333 !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline .meta-item-inline i {
  opacity: 0.85 !important;
}

html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline .meta-quality {
  border-color: rgba(33, 150, 243, 0.5) !important;
  box-shadow: 0 0 12px rgba(33, 150, 243, 0.2) !important;
}

html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline .meta-tmdb {
  border-color: rgba(1, 210, 119, 0.45) !important;
  box-shadow: 0 0 12px rgba(1, 210, 119, 0.18) !important;
}

html body.single-ophim .movie-info-wrapper .movie-meta-motchill-inline .meta-tmdb .meta-tmdb-star {
  opacity: 1 !important;
}

html body.single-ophim .movie-info-wrapper .hero-tags-motchill {
  margin: 0 !important;
  justify-content: center !important;
}

html body.single-ophim .movie-info-wrapper .hero-tag-motchill {
  background: #333333 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body.single-ophim .movie-info-wrapper .hero-tag-motchill:hover {
  background: #3d3d3d !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html body.single-ophim .movie-info-wrapper .episode-status-motchill {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body.single-ophim .movie-info-wrapper .episode-status-motchill.ongoing {
  max-width: 100% !important;
  justify-content: center !important;
  background: linear-gradient(90deg, #3d2a5c 0%, #5c2840 50%, #3a1f2e 100%) !important;
  border: 1px solid rgba(180, 120, 200, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html body.single-ophim .movie-info-wrapper .episode-status-motchill .status-text {
  text-align: center !important;
  width: auto !important;
  max-width: 100% !important;
}

html body.single-ophim .movie-info-wrapper .episode-status-motchill.complete {
  background: linear-gradient(90deg, #2a3048 0%, #1e2838 100%) !important;
  border: 1px solid rgba(90, 110, 160, 0.35) !important;
}

html body.single-ophim .movie-info-wrapper .motchill-info-toggle {
  background: #252525 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 14px 18px !important;
}

html body.single-ophim .movie-info-wrapper .motchill-info-toggle > i:first-child {
  position: static !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

html body.single-ophim .movie-info-wrapper .motchill-info-toggle > span {
  flex: 1 1 auto !important;
  text-align: left !important;
  min-width: 0 !important;
}

html body.single-ophim .movie-info-wrapper .motchill-info-toggle .toggle-icon {
  position: static !important;
  transform: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

html body.single-ophim .movie-info-wrapper .motchill-info-toggle.active .toggle-icon {
  transform: rotate(180deg) !important;
}

html body.single-ophim .movie-info-wrapper .action-buttons-motchill-text {
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body.single-ophim .movie-info-wrapper .btn-motchill-primary {
  background: linear-gradient(90deg, #f7931e 0%, #ef4136 100%) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(239, 65, 54, 0.35) !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 1.9vw, 18px) !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: center !important;
}

html body.single-ophim .movie-info-wrapper .btn-motchill-primary:hover {
  background: linear-gradient(90deg, #ffa726 0%, #f44336 100%) !important;
  box-shadow: 0 8px 26px rgba(239, 65, 54, 0.45) !important;
  transform: translateY(-2px) !important;
}

html body.single-ophim .movie-info-wrapper .btn-motchill-secondary {
  background: #333333 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 44px !important;
  font-size: clamp(12px, 1.4vw, 14px) !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

html body.single-ophim .movie-info-wrapper .btn-motchill-secondary:hover {
  background: #404040 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* Đồng bộ với watch page: nút Yêu thích active màu hồng */
html body.single-ophim .movie-info-wrapper .btn-motchill-favorite.active {
  background: #e91e63 !important;
  border-color: #e91e63 !important;
  color: #fff !important;
}

html body.single-ophim .movie-info-wrapper .btn-motchill-favorite.active i,
html body.single-ophim .movie-info-wrapper .btn-motchill-favorite.active span {
  color: #fff !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  border: 1px solid #1e5bb8 !important;
  background: rgba(18, 22, 32, 0.85) !important;
  box-sizing: border-box !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px 10px !important;
  width: 100% !important;
  text-align: left !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-label {
  color: #fff !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-star {
  color: #ffeb3b !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-score {
  color: #2196f3 !important;
  font-weight: 700 !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-slash,
html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-max {
  color: rgba(255, 255, 255, 0.75) !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-votes {
  color: rgba(255, 255, 255, 0.7) !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-btn {
  background: #2196f3 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(33, 150, 243, 0.35) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

html body.single-ophim .movie-info-wrapper .motchill-rating-bottom-btn:hover {
  background: #42a5f5 !important;
}

/* ========================================================================
   Episode pagination tabs (single info) — đồng bộ watch page
   ======================================================================== */
html body.single-ophim .episode-pagination {
  margin: 14px 0 16px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 10px !important;
}

html body.single-ophim .episode-pagination .episode-search {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}

html body.single-ophim .episode-pagination .episode-search input {
  flex: 1 1 180px !important;
  max-width: 220px !important;
  min-width: 140px !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 14px !important;
}

html body.single-ophim .episode-pagination .episode-search input:focus {
  outline: none !important;
  border-color: rgba(102, 126, 234, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.18) !important;
}

html body.single-ophim .episode-pagination .episode-search button:not(.motchill-toggle-btn) {
  padding: 8px 16px !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

html body.single-ophim .episode-pagination .episode-search button:not(.motchill-toggle-btn):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35) !important;
}

html body.single-ophim .episode-pagination .pagination-tabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

html body.single-ophim .episode-pagination .pagination-tab,
html body.single-ophim .episode-pagination .pagination-tab-btn {
  padding: 7px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: all 0.25s ease !important;
}

html body.single-ophim .episode-pagination .pagination-tab:hover,
html body.single-ophim .episode-pagination .pagination-tab-btn:hover {
  background: rgba(102, 126, 234, 0.14) !important;
  border-color: rgba(102, 126, 234, 0.45) !important;
  color: #fff !important;
}

html body.single-ophim .episode-pagination .pagination-tab.active,
html body.single-ophim .episode-pagination .pagination-tab-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* ========================================================================
   Mô tả phim — tối giản (một khối phẳng, typography rõ, nút ghost)
   ======================================================================== */

html body.single-ophim .movie-info-wrapper .movie-info-section {
  margin-bottom: 28px !important;
  padding: 22px 24px !important;
  background: #161616 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: static !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description::before {
  display: none !important;
  content: none !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description h3 {
  margin: 0 0 14px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: clamp(15px, 1.45vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  letter-spacing: -0.02em !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .description-content {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  max-width: 72ch !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .description-short,
html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .description-full {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .description-content p {
  margin: 0 0 0.9em 0 !important;
  color: inherit !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .description-content p:last-child {
  margin-bottom: 0 !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .toggle-description-btn {
  margin-top: 18px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  gap: 8px !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .toggle-description-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  box-shadow: none !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .toggle-description-btn i {
  font-size: 11px !important;
  opacity: 0.8 !important;
  transition: transform 0.25s ease !important;
}

html body.single-ophim .movie-info-wrapper .movie-info-section .movie-description .toggle-description-btn:hover i {
  transform: none !important;
}

/* ========================================================================
   Diễn viên — slider ngang (single ophim; không trang xem .motchill-actors-watch-page)
   Tiêu đề section trên single (vd. Phim đề cử) — trước nằm trong motchill-optimized.css
   ======================================================================== */

html body.single-ophim .motchill-section-title {
  color: #667eea !important;
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: inline-block !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) {
  position: relative !important;
  background: #161616 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  border-left: none !important;
  padding: 20px 22px !important;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-section-title {
  margin: 0 0 4px 0 !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  display: block !important;
  width: 100% !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-slider {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  width: 100% !important;
  margin-top: 14px !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 0 10px !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track::-webkit-scrollbar {
  height: 5px !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 4px !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track .motchill-actors-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 14px !important;
  width: max-content !important;
  min-width: min(100%, max-content) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 2px !important;
  overflow: visible !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
  transition: transform 0.2s ease !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-card:hover {
  transform: translateY(-2px) !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  text-align: center !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-avatar {
  width: 72px !important;
  height: 72px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 auto 8px auto !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-icon {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 26px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  width: 72px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-name {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-align: center !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 2.4em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-nav-btn {
  position: static !important;
  transform: none !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  margin-top: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-nav-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-prev,
html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-next {
  left: auto !important;
  right: auto !important;
}

/* Mobile: đúng 3 avatar / hàng trong vùng cuộn, nút prev/next không đè lên (container query theo .motchill-actors-track) */
@media (max-width: 743px) {
  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-slider {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 8px !important;
    align-items: center !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track {
    container-type: inline-size;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-nav-btn {
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-nav-btn:hover:not(:disabled),
  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .actors-nav-btn:active {
    transform: none !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track .motchill-actors-grid {
    gap: 8px !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track .motchill-actor-card {
    flex: 0 0 calc((100cqi - 16px) / 3) !important;
    min-width: calc((100cqi - 16px) / 3) !important;
    max-width: calc((100cqi - 16px) / 3) !important;
    width: auto !important;
    scroll-snap-align: center !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-avatar {
    width: clamp(48px, 26cqi, 64px) !important;
    height: clamp(48px, 26cqi, 64px) !important;
    margin-bottom: 6px !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-icon {
    width: clamp(48px, 26cqi, 64px) !important;
    height: clamp(48px, 26cqi, 64px) !important;
    font-size: 22px !important;
  }

  html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actor-name {
    font-size: 10px !important;
    line-height: 1.25 !important;
    min-height: 2.5em !important;
    height: auto !important;
    max-height: none !important;
    word-break: break-word !important;
  }

  @supports not (container-type: inline-size) {
    html body.single-ophim .movie-info-wrapper .motchill-actors-section:not(.motchill-actors-watch-page) .motchill-actors-track .motchill-actor-card {
      flex: 0 0 calc((100vw - 132px) / 3) !important;
      min-width: calc((100vw - 132px) / 3) !important;
      max-width: calc((100vw - 132px) / 3) !important;
    }
  }
}

/* ========================================================================
   Tập phim + Tags — card tối giản
   ======================================================================== */

html body.single-ophim .movie-info-wrapper .combined-content-section .episodes-section-motchill,
html body.single-ophim .movie-info-wrapper .combined-content-section .movie-tags-section {
  background: #161616 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  border-left: none !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tập phim: bỏ mũi tên trùng trên header, chỉ giữ thanh Tập trước/sau */
html body.single-ophim .movie-info-wrapper .episodes-section-motchill .episodes-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body.single-ophim .movie-info-wrapper .episodes-section-motchill .episodes-header .episode-controls {
  display: none !important;
}

html body.single-ophim .movie-info-wrapper .episodes-section-motchill .episodes-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: -0.02em !important;
}

html body.single-ophim .movie-info-wrapper .episode-grid-motchill {
  max-height: 480px !important;
}

html body.single-ophim .movie-info-wrapper .episode-navigation-motchill {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body.single-ophim .movie-info-wrapper .episode-navigation-motchill .btn-change-episode {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

html body.single-ophim .movie-info-wrapper .episode-navigation-motchill .btn-change-episode:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html body.single-ophim .movie-info-wrapper .episode-navigation-motchill .current-episode-info {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Tags */
html body.single-ophim .movie-info-wrapper .movie-tags-section h3 {
  margin: 0 0 12px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

html body.single-ophim .movie-info-wrapper .movie-tags-section .tags-list {
  gap: 8px !important;
}

html body.single-ophim .movie-info-wrapper .movie-tags-section .tag-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html body.single-ophim .movie-info-wrapper .movie-tags-section .tag-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}