/* ========================================
   MOTCHILL WATCH PAGE STYLES v4.5.39
   Last updated: 2026-04-09
   Complete player styles from theme 20
   ======================================== */

/**
 * ThungPhim Style Player CSS
 * Modern, sleek player inspired by thungphim.net
 */

.thungphim-player-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 — 65% cao hơn video → khoảng đen dưới player */
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.thungphim-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

.thungphim-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Loading Spinner */
.thungphim-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 10;
}

.thungphim-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: thungphim-spin 1s linear infinite;
}

@keyframes thungphim-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Play Button Overlay */
.thungphim-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
    transition: opacity 0.3s ease;
}

.thungphim-play-overlay:hover {
    background: rgba(0, 0, 0, 0.5);
}

.thungphim-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.thungphim-play-btn:hover {
    transform: scale(1.1);
}

.thungphim-play-btn:active {
    transform: scale(0.95);
}

/* Controls */
.thungphim-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 8;
}

.thungphim-controls:hover {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

/* Progress Bar */
.thungphim-progress-container {
    margin-bottom: 15px;
}

.thungphim-progress-bar {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    transition: height 0.2s ease;
}

.thungphim-progress-bar:hover {
    height: 8px;
}

.thungphim-progress-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s ease;
}

.thungphim-progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.thungphim-progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #667eea;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.thungphim-progress-bar:hover .thungphim-progress-handle {
    opacity: 1;
}

/* Bottom Controls */
.thungphim-controls-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.thungphim-controls-left,
.thungphim-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Buttons */
.thungphim-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thungphim-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.thungphim-btn:active {
    transform: translateY(0);
}

.thungphim-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Play/Pause Button */
.thungphim-play-pause-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.thungphim-play-pause-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Time Display */
.thungphim-time-display {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.thungphim-time-separator {
    color: rgba(255, 255, 255, 0.6);
}

/* Volume Controls */
.thungphim-volume-slider {
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.thungphim-volume-range {
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.thungphim-volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #667eea;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.thungphim-volume-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.thungphim-volume-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #667eea;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.thungphim-volume-range::-moz-range-thumb:hover {
    transform: scale(1.1);
}

/* Seek Buttons */
.thungphim-seek-btn {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    min-width: 60px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.thungphim-seek-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.thungphim-seek-btn svg {
    width: 16px;
    height: 16px;
}

.thungphim-seek-btn span {
    font-size: 10px;
    font-weight: 700;
}

/* Episode Navigation Buttons */
.thungphim-prev-episode-btn,
.thungphim-next-episode-btn {
    background: rgba(102, 126, 234, 0.2);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.thungphim-prev-episode-btn:hover,
.thungphim-next-episode-btn:hover {
    background: rgba(102, 126, 234, 0.4);
    border-color: rgba(102, 126, 234, 0.6);
    transform: translateY(-1px);
}

.thungphim-prev-episode-btn svg,
.thungphim-next-episode-btn svg {
    width: 16px;
    height: 16px;
}

.thungphim-prev-episode-btn span,
.thungphim-next-episode-btn span {
    font-size: 10px;
    font-weight: 700;
}

/* Quality and Speed Buttons */
.thungphim-quality-btn,
.thungphim-speed-btn {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    min-width: 40px;
}

.thungphim-quality-btn:hover,
.thungphim-speed-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Fullscreen Button */
.thungphim-fullscreen-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.thungphim-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Responsive Design moved to motchill-mobile-final.css [WATCH-MOVED-THUNGPHIM-MOBILE] */

/* Fullscreen Styles */
.thungphim-player-container:fullscreen,
.thungphim-player-container:-webkit-full-screen,
.thungphim-player-container:-moz-full-screen,
.thungphim-player-container:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    padding-bottom: 0;
    border-radius: 0;
}

.thungphim-player-container:fullscreen .thungphim-video-wrapper,
.thungphim-player-container:-webkit-full-screen .thungphim-video-wrapper,
.thungphim-player-container:-moz-full-screen .thungphim-video-wrapper,
.thungphim-player-container:-ms-fullscreen .thungphim-video-wrapper {
    height: 100vh;
}

/* Hover Effects */
.thungphim-player-container:hover .thungphim-controls {
    opacity: 1;
    visibility: visible;
}

.thungphim-player-container:hover .thungphim-progress-handle {
    opacity: 1;
}

/* Animation for smooth transitions - OPTIMIZED: Only transition specific properties */
.thungphim-player-container .thungphim-btn,
.thungphim-player-container .thungphim-controls,
.thungphim-player-container .thungphim-progress-bar,
.thungphim-player-container .thungphim-volume-slider {
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

/* Disable transitions during page load to prevent flash */
.preload .thungphim-player-container *,
.preload .motchill-player-container *,
.preload .motchill-main-layout,
.preload .motchill-main-layout * {
    transition: none !important;
    animation: none !important;
}

/* Custom scrollbar for volume slider */
.thungphim-volume-range::-webkit-scrollbar {
    display: none;
}

/* Focus styles for accessibility */
.thungphim-btn:focus,
.thungphim-play-btn:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Loading animation enhancement */
.thungphim-loading.show {
    display: flex;
}

/* Error state */
.thungphim-player-container.error {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.thungphim-player-container.error::before {
    content: "⚠️ Video không thể phát";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    text-align: center;
    z-index: 10;
}

/* ========================================
   PHIMUS WATCH PAGE STYLES
   Modern PhimUs-style layout for watch page
   ======================================== */

/* Rating Display */
.movie-meta-motchill .rating-display {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    border: 1px solid #ff6b6b;
    font-weight: 600;
    font-size: 13px;
    color: #ffffff !important;
}

/* Container and Layout */
.motchill-watch-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px 20px; /* giữa 100px và 20px */
    background: #0a0a0a;
    color: #ffffff;
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.motchill-main-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    margin-top: 20px;
    min-height: 600px; /* ✅ CLS Fix: Reserve minimum space */
    contain: layout; /* Performance optimization */
}

/* Full Width Player Layout */
.motchill-player-full-width {
    grid-column: 1 / -1;
    margin-bottom: 30px;
}

/* Breadcrumbs → motchill-breadcrumbs.css (header) */

/* Movie Title Section - ✅ CLS Fix: Reserve space + đẩy xuống */
.motchill-movie-title-section {
    padding: 24px 0 20px;
    margin-bottom: 0;
    contain: layout; /* CSS containment for performance */
}

.motchill-movie-title-section .motchill-player-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Episode Status - Watch Page */
.episode-status-motchill {
    display: block;
    text-align: center;
    margin: 15px 0;
}

.episode-status-motchill .status-text {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(255, 23, 68, 0.15));
    color: #fff;
    padding: 8px 100px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(102, 126, 234, 0.45);
    letter-spacing: 0.3px;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.episode-status-motchill .status-text::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #667eea;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Ongoing: green pulse */
.episode-status-motchill.ongoing .status-text::before {
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
    animation: epPulseGreen 1.6s ease-in-out infinite;
}

/* Complete: solid red dot (no pulse) */
.episode-status-motchill.complete .status-text::before {
    background: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
    animation: none;
}

@keyframes epPulseGreen {
    0% { transform: scale(1); box-shadow: 0 0 0 3px rgba(46,204,113,0.2); }
    70% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(46,204,113,0.12); }
    100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(46,204,113,0.2); }
}

/* Left Content */
.motchill-left-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ============================================
   THÔNG BÁO & LỊCH CHIẾU — một bề mặt mềm, icon tròn, không cột màu cứng
   Markup: .motchill-info-banner + --notify | --showtime
   ============================================ */

.motchill-info-banner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 20px;
    padding: 18px 22px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.065);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 18px 48px -16px rgba(0, 0, 0, 0.55);
    transition: border-color 0.28s ease, box-shadow 0.28s ease;
    animation: motchill-banner-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.motchill-info-banner--notify {
    background:
        radial-gradient(100% 120% at 0% -20%, rgba(102, 126, 234, 0.22) 0%, transparent 52%),
        radial-gradient(80% 80% at 100% 100%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
        linear-gradient(165deg, #1c1c22 0%, #141418 48%, #101014 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 18px 48px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(102, 126, 234, 0.09);
}

.motchill-info-banner--showtime {
    background:
        radial-gradient(100% 120% at 0% -20%, rgba(245, 158, 11, 0.18) 0%, transparent 52%),
        radial-gradient(70% 70% at 100% 80%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
        linear-gradient(165deg, #1f1c18 0%, #161412 50%, #11100e 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.045) inset,
        0 18px 48px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(245, 158, 11, 0.1);
}

/* Cùng độ rộng các khối nội dung (full width vùng chứa), không thu hẹp giữa trang */
.motchill-player-showtime.motchill-info-banner {
    margin: 0 0 20px;
    max-width: none;
    width: 100%;
}

.motchill-info-banner--notify:hover {
    border-color: rgba(129, 140, 248, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 22px 56px -14px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(129, 140, 248, 0.16);
}

.motchill-info-banner--showtime:hover {
    border-color: rgba(252, 211, 77, 0.2);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.055) inset,
        0 22px 56px -14px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(251, 191, 36, 0.14);
}

/* Icon tròn — nhấn nhẹ, không chia đôi thẻ */
.motchill-info-banner__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    margin-top: 1px;
}

.motchill-info-banner--notify .motchill-info-banner__icon {
    color: #e8eaff;
    background: linear-gradient(155deg, rgba(129, 140, 248, 0.45) 0%, rgba(99, 102, 241, 0.75) 42%, rgba(79, 70, 229, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 6px 18px rgba(55, 48, 163, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.motchill-info-banner--showtime .motchill-info-banner__icon {
    color: #fffbeb;
    background: linear-gradient(155deg, rgba(253, 224, 71, 0.35) 0%, rgba(245, 158, 11, 0.82) 45%, rgba(217, 119, 6, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 6px 18px rgba(146, 64, 14, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.motchill-info-banner__body {
    flex: 1;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
}

.motchill-info-banner__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    line-height: 1.3;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    border-radius: 0;
}

.motchill-info-banner__label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.85;
}

.motchill-info-banner--notify .motchill-info-banner__label {
    color: rgba(199, 210, 254, 0.78);
}

.motchill-info-banner--notify .motchill-info-banner__label::before {
    background: linear-gradient(135deg, #a5b4fc, #6366f1);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.45);
}

.motchill-info-banner--showtime .motchill-info-banner__label {
    color: rgba(253, 230, 138, 0.82);
}

.motchill-info-banner--showtime .motchill-info-banner__label::before {
    background: linear-gradient(135deg, #fde047, #f59e0b);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.motchill-info-banner__text {
    margin: 0;
    width: 100%;
    font-size: 16px;
    line-height: 1.62;
    font-weight: 500;
    color: rgba(252, 252, 255, 0.94);
    letter-spacing: 0.01em;
}

.motchill-info-banner--showtime .motchill-info-banner__text {
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 253, 248, 0.96);
    letter-spacing: 0.015em;
}

/* Danh sách thông báo phụ — cùng họ banner */
.motchill-notices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 20px;
}

.motchill-notice {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    padding: 15px 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 14px 40px -12px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(34, 197, 94, 0.1);
    background:
        radial-gradient(90% 80% at 0% 0%, rgba(34, 197, 94, 0.12) 0%, transparent 55%),
        linear-gradient(165deg, #161a18 0%, #121614 100%);
}

.motchill-notice i {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    color: #bbf7d0;
    background: linear-gradient(145deg, rgba(74, 222, 128, 0.25) 0%, rgba(22, 163, 74, 0.45) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    margin-top: 0;
    line-height: 1;
}

.motchill-notice strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    font-weight: 700;
    color: #ecfdf5;
    letter-spacing: 0.02em;
    margin: 0;
}

.motchill-notice span {
    grid-column: 2;
    grid-row: 2;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(220, 252, 231, 0.92);
}

@keyframes motchill-banner-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .motchill-info-banner {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 15px 16px 16px;
        border-radius: 14px;
    }

    .motchill-info-banner__icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .motchill-info-banner__body {
        gap: 6px;
    }

    .motchill-info-banner__text {
        font-size: 15px;
        line-height: 1.58;
    }

    .motchill-info-banner--showtime .motchill-info-banner__text {
        font-size: 16px;
    }
}

/* Mobile/tablet tinh chỉnh thêm trong motchill-mobile-final.css [WATCH-MOVED-NOTIFY-SHOWTIME] */

/* Player Section */
.motchill-player-section {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

/* Player control — thanh dàn đều, nút không khung (chỉ giao diện; markup/onclick giữ nguyên) */
.player-control.text-center.default {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 11px 8px 13px;
    background: #080808;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 640px) {
    .player-control.text-center.default {
        flex-wrap: wrap;
        justify-content: space-evenly;
        row-gap: 6px;
    }
}

.player-control.text-center.default button {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.player-control.text-center.default button:hover,
.player-control.text-center.default button:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 6px;
    color: #fff;
    opacity: 1;
}

.player-control.text-center.default button:active {
    opacity: 0.82;
}

.player-control.text-center.default button i {
    font-size: 16px;
    line-height: 1;
    opacity: 1;
    color: #fff;
}

/* Icon FA dạng -o mảnh hơn chevron — làm đậm nhẹ cho đồng bộ với Tập trước/sau */
.player-control.text-center.default button i[class*="-o"] {
    -webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.45);
}

.player-control.text-center.default button span {
    color: inherit;
    opacity: 1;
}

.player-control.text-center.default .favorite-toggle-btn.active {
    background: transparent !important;
    border: none !important;
    color: #fb7185 !important;
}

.player-control.text-center.default .motchill-theater-btn.active {
    background: transparent !important;
    border: none !important;
    color: #fde68a !important;
    box-shadow: none !important;
}

/* iPad/mobile player controls + pagination moved to motchill-mobile-final.css [WATCH-MOVED-PLAYER-CONTROLS-MOBILE] */

/* ✅ Episode pagination container */
.episode-pagination {
    margin: 15px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.episode-pagination .episode-search {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.episode-pagination .episode-search input {
    flex: 1;
    max-width: 200px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.episode-pagination .episode-search button {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.episode-pagination .episode-search button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.pagination-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-tab-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pagination-tab-btn:hover {
    background: rgba(102, 126, 234, 0.12);
    border-color: rgba(102, 126, 234, 0.35);
    color: #fff;
}

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

/* OLD sections - keep for backward compatibility but hide */
.motchill-player-controls-section {
    display: none;
}

.motchill-player-controls {
    display: none;
}

/* ✅ Favorite Notification - HH3D Style */
.favorite-notification-success {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDownFadeIn 0.3s ease-out;
    min-width: 320px;
    max-width: 90%;
}

@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.favorite-notification-success i.fa-check-circle {
    font-size: 20px;
    color: #fff;
}

.favorite-notification-success span {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
}

.favorite-notification-success .notification-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    transition: color 0.2s;
}

.favorite-notification-success .notification-close:hover {
    color: #fff;
}

/* New Control Buttons */
.motchill-reaction-btn {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
    border-color: #FF9800 !important;
}

.motchill-reaction-btn:hover {
    background: linear-gradient(135deg, #F57C00 0%, #EF6C00 100%) !important;
    transform: translateY(-2px);
}

.motchill-reaction-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
}

.motchill-auto-play-btn {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
    border-color: #2196F3 !important;
}

.motchill-auto-play-btn:hover {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%) !important;
    transform: translateY(-2px);
}

.motchill-auto-play-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
}

.motchill-theater-btn {
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%) !important;
    border-color: #9C27B0 !important;
}

.motchill-theater-btn:hover {
    background: linear-gradient(135deg, #7B1FA2 0%, #6A1B9A 100%) !important;
    transform: translateY(-2px);
}

.motchill-theater-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
}

/* Emotion Chart Section */
.motchill-emotion-chart-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.motchill-emotion-description {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
}

.motchill-emotion-chart {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.motchill-emotion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.motchill-emotion-item:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: translateX(5px);
}

.motchill-emotion-icon {
    font-size: 24px;
    width: 40px;
    text-align: center;
}

.motchill-emotion-bar {
    flex: 1;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.motchill-emotion-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    transition: width 0.8s ease;
    position: relative;
}

.motchill-emotion-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.motchill-emotion-percentage {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    min-width: 35px;
    text-align: right;
}

/* Reaction Section */
.motchill-reaction-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 12px;
    padding: 15px 20px;
    margin: 15px 0;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: none; /* Hidden by default */
}

.motchill-reaction-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.motchill-reaction-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
}

.motchill-reaction-icon:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

.motchill-reaction-icon.active {
    background: rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

.motchill-reaction-emoji {
    font-size: 24px;
    line-height: 1;
}

.motchill-reaction-count {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    background: rgba(102, 126, 234, 0.8);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* ========================================
   REACTION LIST - RIGHT SIDEBAR (THUNGPHIM STYLE)
   ======================================== */

/* REMOVED: .motchill-reaction-sidebar - commented out for now */

/* Reaction sidebar should follow player when scrolling */
.motchill-player-container {
    position: relative;
}

/* All reaction sidebar CSS removed - feature not in use */

/* ========================================
   BIỂU ĐỒ CẢM XÚC (THUNGPHIM STYLE)
   ======================================== */

.motchill-emotion-chart {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: none; /* Hidden by default */
}

.motchill-emotion-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px 0;
    text-align: center;
}

.motchill-emotion-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0 0 20px 0;
    text-align: center;
}

.motchill-emotion-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.motchill-emotion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.motchill-emotion-emoji {
    font-size: 20px;
    min-width: 30px;
    text-align: center;
}

.motchill-emotion-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
}

.motchill-emotion-progress {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.motchill-emotion-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
}

.motchill-emotion-item[data-reaction="love"] .motchill-emotion-bar {
    background: linear-gradient(90deg, #e91e63, #f06292);
}

.motchill-emotion-item[data-reaction="sad"] .motchill-emotion-bar {
    background: linear-gradient(90deg, #2196f3, #64b5f6);
}

.motchill-emotion-item[data-reaction="wow"] .motchill-emotion-bar {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.motchill-emotion-item[data-reaction="poop"] .motchill-emotion-bar {
    background: linear-gradient(90deg, #8d6e63, #a1887f);
}

.motchill-emotion-item[data-reaction="laugh"] .motchill-emotion-bar {
    background: linear-gradient(90deg, #ffeb3b, #fff176);
}

.motchill-emotion-item[data-reaction="fire"] .motchill-emotion-bar {
    background: linear-gradient(90deg, #ff5722, #ff7043);
}

.motchill-emotion-percentage {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    min-width: 35px;
    text-align: right;
}

.motchill-emotion-collapse {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ffffff;
    padding: 8px 16px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
    transition: all 0.3s ease;
}

.motchill-emotion-collapse:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
}

.motchill-emotion-collapse i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.motchill-emotion-chart.collapsed .motchill-emotion-collapse i {
    transform: rotate(180deg);
}

/* ========================================
   THEATER MODE (THUNGPHIM STYLE) - TẮT ĐÈN
   ======================================== */

.theater-mode {
    background: #000000 !important;
}

.theater-mode .motchill-header,
.theater-mode .motchill-main-layout,
.theater-mode .motchill-right-content,
.theater-mode .motchill-emotion-chart {
    opacity: 0.1 !important;
    transition: opacity 0.3s ease;
}

.theater-mode .motchill-player-container {
    opacity: 1 !important;
    z-index: 9999 !important;
}

.theater-mode .motchill-player-controls {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theater-mode .motchill-player-container:hover .motchill-player-controls {
    opacity: 1;
}

.theater-mode .motchill-player-container:hover /* REMOVED: .motchill-reaction-sidebar */ {
    opacity: 1;
}

/* Theater Mode - Keep theater button visible */
.theater-mode .motchill-control-btn[title="Rạp phim"] {
    opacity: 1 !important;
    z-index: 10000 !important;
}



.motchill-control-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #1f2126;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(245, 247, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    min-width: auto;
}

.motchill-control-btn:hover {
    background: #2a2d35;
    border-color: rgba(161, 174, 255, 0.42);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.22);
}

/* Player bar: ghi đè .motchill-control-btn — không viền / không nền ô */
.player-control.text-center.default .motchill-control-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    transform: none !important;
}

.player-control.text-center.default .motchill-control-btn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: #fff !important;
}

.player-control.text-center.default .motchill-theater-btn:not(.active) {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
}

.player-control.text-center.default .motchill-theater-btn:not(.active):hover {
    background: transparent !important;
    color: #fff !important;
}

.player-control.text-center.default .motchill-theater-btn:not(.active) i {
    color: inherit !important;
    filter: none !important;
}

.player-control.text-center.default .motchill-theater-btn.active,
body.theater-mode-active .player-control.text-center.default .motchill-theater-btn.active {
    background: transparent !important;
    border: none !important;
    color: #fde68a !important;
    box-shadow: none !important;
}

.player-control.text-center.default .motchill-theater-btn.active:hover {
    background: transparent !important;
    color: #fffbeb !important;
}

.player-control.text-center.default .motchill-theater-btn.active i {
    color: inherit !important;
    filter: none !important;
    -webkit-text-stroke: 0 !important;
}

.motchill-control-btn i {
    font-size: 16px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Yêu thích active — trang info / chỗ khác: nền hồng; thanh player: chỉ màu chữ (override bên dưới) */
.motchill-favorite-btn.active,
.motchill-control-btn.motchill-favorite-btn.active,
.motchill-control-btn[onclick*="toggleFavorite"].active,
.motchill-control-btn[onclick*="_motchillToggleFav"].active,
.player-control .motchill-favorite-btn.active,
.player-control .motchill-control-btn.motchill-favorite-btn.active {
    background: #e91e63 !important;
    border-color: #e91e63 !important;
    color: #fff !important;
}
.motchill-favorite-btn.active i,
.motchill-favorite-btn.active span,
.motchill-control-btn[onclick*="toggleFavorite"].active i,
.motchill-control-btn[onclick*="toggleFavorite"].active span,
.motchill-control-btn[onclick*="_motchillToggleFav"].active i,
.motchill-control-btn[onclick*="_motchillToggleFav"].active span,
.player-control .motchill-favorite-btn.active i,
.player-control .motchill-favorite-btn.active span {
    color: #fff !important;
}

.player-control.text-center.default .motchill-favorite-btn.active,
.player-control.text-center.default .motchill-control-btn.motchill-favorite-btn.active {
    background: transparent !important;
    border: none !important;
    color: #fb7185 !important;
}
.player-control.text-center.default .motchill-favorite-btn.active i,
.player-control.text-center.default .motchill-favorite-btn.active span,
.player-control.text-center.default .motchill-control-btn.motchill-favorite-btn.active i,
.player-control.text-center.default .motchill-control-btn.motchill-favorite-btn.active span {
    color: #fb7185 !important;
    -webkit-text-stroke: 0 !important;
}

.motchill-toggle {
    background: #667eea;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Video Container - FIXED ASPECT RATIO (16:9 khớp JW/HLS; 65% gây dải đen dưới) */
.motchill-video-container {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    background: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure video and iframe fill the container */
.motchill-video-container video,
.motchill-video-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: contain !important;
}

/* JW Player root — lấp đầy ô #player (tránh chừa đen khi skin tính height khác) */
#player .jwplayer,
.motchill-video-player .jwplayer {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

/* Fix ArtPlayer container */
.artplayer-app {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure ArtPlayer video fills container */
.artplayer-app video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.motchill-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

/* Ensure video and iframe fill the container */
.motchill-video-container video,
.motchill-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}

/* Server Controls - Compact */
.motchill-server-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #1a1a1a;
    border-top: 1px solid #333;
}

.motchill-server-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    font-size: 13px;
    font-weight: 600;
    margin-right: 20px;
}

.motchill-server-buttons {
    display: flex;
    gap: 8px;
}

.motchill-server-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #252525 0%, #161616 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 70px;
}

.motchill-server-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.motchill-server-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* ========================================
   CONTROLS & RATING ROW
   VIP buttons (left) + Rating (right)
   ======================================== */

.motchill-controls-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 12px;
    padding: 10px 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Override server-controls when inside row */
.motchill-controls-rating-row .motchill-server-controls {
    padding: 0;
    background: transparent;
    border: none;
    flex: 0 0 auto;
}


.motchill-controls-rating-row .motchill-server-info i {
    color: #667eea;
    font-size: 16px;
}

.motchill-controls-rating-row .motchill-server-btn {
    padding: 8px 16px;
    font-size: 13px;
    min-width: 70px;
}

/* Rating Bottom in Row */
.motchill-controls-rating-row .motchill-rating-bottom {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

.motchill-rating-bottom-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.motchill-rating-bottom-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.motchill-rating-bottom-stars {
    display: flex;
    align-items: center;
    gap: 5px;
}

.motchill-rating-bottom-star {
    font-size: 16px;
    color: #ffc107;
}

.motchill-rating-bottom-score {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.motchill-rating-bottom-slash,
.motchill-rating-bottom-max {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.motchill-rating-bottom-votes {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.motchill-rating-bottom-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(33, 150, 243, 0.3);
}

.motchill-rating-bottom-btn:hover {
    background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.5);
    transform: translateY(-2px);
  }
  
/* Movie Info Section - ✅ Compact PhimUs Style */
.motchill-movie-info {
    display: flex;
    gap: 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(102, 126, 234, 0.1) inset;
    border: 1px solid rgba(102, 126, 234, 0.15);
    position: relative;
    overflow: hidden;
    contain: layout style; /* CLS fix */
}

/* Subtle gradient overlay */
.motchill-movie-info::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(102, 126, 234, 0.03) 100%);
    pointer-events: none;
    z-index: 0;
}
  
.motchill-movie-poster {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 160px;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.motchill-movie-poster:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.motchill-movie-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 2 / 3;
    background: #1a1a1a; /* Placeholder color */
}

.motchill-movie-details {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
}

.motchill-movie-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: -0.3px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.motchill-movie-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.motchill-movie-title a:hover {
    color: #667eea;
}

.motchill-movie-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 6px 0;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
}

.motchill-movie-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.motchill-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.motchill-meta-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

.motchill-meta-label {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.motchill-meta-tmdb-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}

.motchill-meta-tmdb-label .fa-star {
    color: #ffc107;
    font-size: 11px;
    text-transform: none;
}

.motchill-meta-value {
    color: #ffffff;
    font-weight: 600;
}

.motchill-meta-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.motchill-meta-link:hover {
    color: #764ba2;
}

.motchill-movie-description {
    margin-top: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
}

.motchill-movie-description p {
    margin: 0;
    width: 100%;
    max-width: none;
    display: block;
    white-space: normal;
    word-break: break-word;
}

.motchill-movie-more-link {
    color: #dd003f;
    text-decoration: none;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-weight: 600;
}

.motchill-movie-more-link:hover {
    color: #ff3b70;
}

.episode-status-motchill {
    margin-top: 12px;
}

.motchill-meta-link {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.motchill-meta-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Tags Section */
.motchill-tags-section {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 35px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.motchill-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.motchill-tag-link {
    background: #333;
    color: #ccc;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #555;
}

.motchill-tag-link:hover {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
    transform: translateY(-2px);
}

.motchill-movie-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.motchill-genre-tag {
    padding: 4px 10px;
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    color: #667eea;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.motchill-genre-tag:hover {
    background: #667eea;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.motchill-movie-description {
    color: #ccc;
    line-height: 1.6;
    font-size: 14px;
}

.motchill-more-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 25px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.motchill-more-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Episodes Section - ✅ CLS Fix - Compact */
.motchill-episodes-section {
    background: linear-gradient(135deg, #141414 0%, #1c1c1c 100%);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    min-height: 300px; /* ✅ Reserve space to prevent shift */
    contain: layout; /* Performance boost */
  }
  


.motchill-season-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 12px 0;
}

.motchill-language-selector {
    display: flex;
    gap: 10px;
}

/* Chọn nguồn / chọn phần: nhãn + khung điều khiển cùng một hàng */
.motchill-watch-select-strip,
.motchill-watch-lang-strip,
.motchill-watch-season-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    width: 100%;
    margin: 0 0 10px;
}

.motchill-watch-season-strip {
    margin: 10px 0 12px;
}

/* Season dropdown is mobile-only */
.motchill-watch-season-strip--mobile {
    display: none;
}

.motchill-watch-select-strip .motchill-watch-select-strip__label,
.motchill-watch-lang-strip .motchill-season-nav-label,
.motchill-watch-season-strip .motchill-season-nav-label {
    flex: 0 0 auto;
    margin: 0;
}

.motchill-watch-lang-strip .motchill-language-selector {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

@media (min-width: 744px) {
    .motchill-watch-lang-strip {
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Thu gọn: một hàng + cuộn ngang mỏng nếu còn chật */
    .motchill-watch-lang-strip .motchill-language-selector:not(.is-expanded) {
        flex-wrap: nowrap;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(120, 130, 255, 0.45) transparent;
        -webkit-overflow-scrolling: touch;
        align-items: center;
    }

    /* Mở full: xuống nhiều hàng, bỏ cuộn ngang — gọn hơn thanh trượt trong khối nhỏ */
    .motchill-watch-lang-strip .motchill-language-selector.is-expanded {
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: visible;
        align-items: center;
        row-gap: 10px;
        column-gap: 10px;
    }

    .motchill-watch-lang-strip .motchill-language-selector::-webkit-scrollbar {
        height: 4px;
    }

    .motchill-watch-lang-strip .motchill-lang-btn,
    .motchill-watch-lang-strip .motchill-lang-more {
        min-height: 44px;
        align-self: center;
        line-height: 1.22;
        text-align: center;
        box-sizing: border-box;
    }

    .motchill-watch-lang-strip .motchill-lang-btn span {
        display: block;
        max-width: 10.5em;
        margin: 0 auto;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* Dropdown chọn phần: ô ôm theo nhãn đang chọn; dài quá thì ellipsis, menu rộng theo tập option */
.motchill-watch-season-strip .motchill-season-dropdown {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Dropdown nguồn (mobile): ô ôm chữ giống chọn phần — nằm sát nhãn "Chọn nguồn:" */
.motchill-watch-lang-strip .motchill-language-dropdown {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.motchill-watch-lang-strip .motchill-language-dropdown-toggle {
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.motchill-watch-lang-strip .motchill-language-dropdown-text {
    flex: 0 1 auto;
    max-width: min(100%, 70vw);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motchill-watch-lang-strip .motchill-language-dropdown-menu {
    left: 0;
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(100vw - 24px, 420px);
}

.motchill-season-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 14px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.motchill-season-dropdown-text {
    flex: 0 1 auto;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(100%, 70vw);
}

.motchill-season-dropdown-arrow {
    font-size: 10px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.motchill-season-dropdown-toggle.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.45);
}

.motchill-season-dropdown-toggle.active .motchill-season-dropdown-arrow {
    transform: rotate(180deg);
}

.motchill-season-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(100vw - 24px, 420px);
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(20, 20, 20, 0.96);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.motchill-season-dropdown-menu.show {
    display: flex;
}

.motchill-season-dropdown-item {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.motchill-season-dropdown-item:hover {
    border-color: rgba(102, 126, 234, 0.45);
    background: rgba(102, 126, 234, 0.16);
}

.motchill-season-dropdown-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}

/* Nhiều nguồn (>4): chỉ hiện 4 nút đầu + "Xem thêm nguồn" (episode-phimus.php $lang_visible_cap) */
.motchill-language-selector--collapsible {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.motchill-language-selector--collapsible:not(.is-expanded) .motchill-lang-btn--extra {
    display: none;
}

.motchill-language-selector--collapsible.is-expanded .motchill-lang-btn--extra {
    display: flex;
}

.motchill-lang-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-height: 40px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 8px;
    border: 1px dashed rgba(102, 126, 234, 0.55);
    background: rgba(102, 126, 234, 0.12);
    color: #c8d4ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex: 0 0 auto;
}

.motchill-lang-more:hover {
    background: rgba(102, 126, 234, 0.22);
    border-color: rgba(102, 126, 234, 0.85);
    color: #fff;
}

/* Season navigator (watch page) */
.motchill-season-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 12px;
}

.motchill-season-nav-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d7deee;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0.95;
}

.motchill-season-list {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 130, 255, 0.5) transparent;
}

.motchill-season-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 8px 16px;
    min-height: 40px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 243, 255, 0.88);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.motchill-season-chip:hover {
    border-color: rgba(102, 126, 234, 0.55);
    background: rgba(102, 126, 234, 0.16);
    color: #fff;
}

.motchill-season-chip.active {
    border-color: transparent;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.45);
}

.motchill-season-more {
    display: none;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(120, 130, 255, 0.5);
    background: rgba(102, 126, 234, 0.14);
    color: #dfe6ff;
    font-size: 12px;
    cursor: pointer;
}

/* episode-pagination styles moved to motchill-optimized.css */

.motchill-season-btn,
.motchill-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    min-height: 40px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.motchill-season-btn:hover,
.motchill-lang-btn:hover {
    background: rgba(102, 126, 234, 0.14);
    border-color: rgba(102, 126, 234, 0.45);
    color: #fff;
}

.motchill-season-btn.active,
.motchill-lang-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.4);
}

/*
 * Dropdown nguồn: chỉ ẩn trên desktop (có hàng nút .motchill-language-selector).
 * Không dùng display:none toàn cục — watch.css load sau mobile-final trong episode-phimus.php
 * sẽ ghi đè display:flex của mobile và làm mất UI chọn nguồn trên mobile.
 */
@media (min-width: 744px) {
    .motchill-language-dropdown {
        display: none !important;
    }
}

/* 🔥 REMOVED: .motchill-toggle-btn (collapse/expand button deleted) */

/* Auto Episode Toggle Button */
.motchill-auto-episode-btn {
    background: #667eea;
    color: #fff;
    border: 2px solid #667eea;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.motchill-auto-episode-btn:hover {
    background: #b80033;
    border-color: #b80033;
}

.motchill-auto-episode-btn.disabled {
    background: #666;
    border-color: #666;
    color: #ccc;
}

.motchill-auto-episode-btn.disabled:hover {
    background: #666;
    border-color: #666;
}

/* Auto Play Control Button */
.motchill-auto-play-btn {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.motchill-auto-play-btn:hover {
    background: #444;
    border-color: #666;
}

.motchill-auto-play-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}

.motchill-auto-play-btn.active:hover {
    background: #764ba2;
}

.motchill-auto-play-icon {
    font-size: 16px;
}

.motchill-auto-play-text {
    font-weight: 500;
}

.motchill-auto-play-status {
    font-weight: 700;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Theater Mode Button */
.motchill-theater-btn {
    background: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.motchill-theater-btn:hover {
    background: #444;
    border-color: #666;
}

.motchill-theater-btn.active {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
}

.motchill-theater-btn.active:hover {
    background: #764ba2;
}

.motchill-theater-icon {
    font-size: 16px;
}

.motchill-theater-text {
    font-weight: 500;
}

/* Theater Mode - PhimUs Style (Overlay Backdrop) */
/* body.theater-mode-active class is used to trigger theater mode styles below */

/* Header below overlay (hidden) */
body.theater-mode-active header,
body.theater-mode-active .site-header,
body.theater-mode-active .header,
body.theater-mode-active nav {
    z-index: 1 !important;
}

/* Player and controls above overlay */
body.theater-mode-active .motchill-player-section,
body.theater-mode-active .motchill-player-controls-section,
body.theater-mode-active .motchill-server-controls {
    position: relative;
    z-index: 999 !important;
}

/* Keep active buttons/elements visible */
body.theater-mode-active .motchill-control-btn.active,
body.theater-mode-active .motchill-reaction-sidebar {
    z-index: 999 !important;
}

/* Smooth transition for theater mode */
#theater-mode-overlay {
    animation: fadeInOverlay 0.3s ease;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ⚠️ NOTE 2025-10-23: Watch page uses pagination tabs, NOT scroll limit
   Scroll limit conflicts with tab logic (episodes hidden by scroll can't be shown by tabs)
   For series > 100 episodes: Use pagination tabs (already implemented in episode-phimus.php)
   For series < 100 episodes: No need for scroll limit
*/
.motchill-episodes-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px;
    padding: 10px 0;
    background: transparent !important;
}

/* Collapsed state: giữ khung gọn + cuộn dọc (đồng bộ trang thông tin) */
.motchill-episodes-section.collapsed .motchill-episodes-grid {
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.5) rgba(255, 255, 255, 0.04);
}

.motchill-episodes-section.collapsed .motchill-episodes-grid::-webkit-scrollbar {
    width: 7px;
}

.motchill-episodes-section.collapsed .motchill-episodes-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.motchill-episodes-section.collapsed .motchill-episodes-grid::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.55);
    border-radius: 4px;
}

.motchill-episodes-section.collapsed .motchill-episodes-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.8);
}

@media (min-width: 744px) and (max-width: 1200px) {
    .motchill-episodes-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Mobile episode-grid columns moved to motchill-mobile-final.css [WATCH-MOVED-EPISODE-GRID-MOBILE] */

/* ============================================
   🔥 SIMPLIFIED EPISODES DISPLAY (No thumbnail, number only)
   ============================================ */

/* Episode Card - Compact, Number Only */
.motchill-episode-card {
    height: 45px;
    min-height: 45px;
    max-height: 45px;
    padding: 0 10px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}

.motchill-episode-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
    border-color: rgba(102, 126, 234, 0.5);
}

.motchill-episode-card.current {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    box-shadow: 0 3px 14px rgba(102, 126, 234, 0.5);
}

.motchill-episode-card.current .motchill-episode-number {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Hide thumbnail and status */
.motchill-episode-thumbnail {
    display: none !important;
}

.motchill-episode-status {
    display: none !important;
}

/* Episode Info - Centered */
.motchill-episode-info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Episode Number - Bold and Clear */
.motchill-episode-number {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1;
}

/* Comments Section */
.motchill-comments-wrapper {
    margin-top: 25px;
    margin-bottom: 30px;
}

/* Override wpDiscuz container (plugin set #comments { max-width:1100px; margin:50px auto; }) */
#comments {
    max-width: 100% !important;
    width: 100% !important;
    margin: 25px 0 30px 0 !important;
}

.motchill-comments-section {
    background: radial-gradient(circle at top left, rgba(102,126,234,0.18), rgba(15,15,15,0.96));
    border-radius: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    margin-top: 22px;
}

.motchill-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.motchill-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.motchill-section-title i {
    color: #ff4b2b;
}

.motchill-comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}

.motchill-comment-item {
    margin-bottom: 18px;
}

.motchill-comment-body {
    position: relative;
    display: flex;
    gap: 15px;
    padding: 16px 18px;
    background: radial-gradient(circle at top left, rgba(102,126,234,0.14), rgba(26,26,26,0.96));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 22px rgba(0,0,0,0.55);
}

.motchill-comment-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg,#667eea,#ff4b2b);
}

.motchill-comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.motchill-comment-main {
    flex: 1;
}

.motchill-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.motchill-comment-author,
.motchill-comment-author a {
    font-weight: 600;
    color: #fff;
}

.motchill-comment-date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

.motchill-comment-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.7;
}

.motchill-comment-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.motchill-comment-reply {
    color: #667eea;
    font-weight: 600;
}

.motchill-comment-reply:hover {
    color: #ff4b2b;
}

.motchill-comment-sep {
    color: rgba(255, 255, 255, 0.35);
}

.motchill-comment-moderation {
    color: #f7c948;
    font-style: italic;
    margin-bottom: 8px;
}

.motchill-comment-nav {
    margin: 20px 0;
    text-align: center;
}

.motchill-comment-nav .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 10px;
    background: rgba(26, 26, 26, 0.8);
    color: rgba(255, 255, 255, 0.7);
}

.motchill-comment-nav .page-numbers.current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.motchill-comment-form-wrapper {
    background: radial-gradient(circle at top left, rgba(102,126,234,0.18), rgba(20,20,20,0.94));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 16px 18px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.motchill-comment-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.motchill-comment-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2px;
}
.motchill-comment-placeholder {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    cursor: text;
    display: flex;
    align-items: center;
    gap: 6px;
}
.motchill-comment-form.is-expanded .motchill-comment-placeholder {
    display: none;
}

.motchill-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.motchill-input-group {
    display: flex;
    align-items: center;
    background: rgba(26, 26, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.motchill-input-group--comment textarea {
    min-height: 110px;
}

.motchill-input-group:focus-within {
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.18);
}

.motchill-input-icon {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.38);
    font-size: 13px;
}

.motchill-input-group input[type="text"],
.motchill-input-group input[type="email"],
.motchill-input-group textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    padding: 12px 14px;
    line-height: 1.6;
    resize: none;
}

.motchill-input-group textarea {
    resize: vertical;
}

.motchill-input-group input[type="text"]:focus,
.motchill-input-group input[type="email"]:focus,
.motchill-input-group textarea:focus {
    outline: none;
}

.motchill-extra-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.motchill-extra-fields .motchill-field {
    flex: 1 1 220px;
}

.motchill-extra-block {
    margin-top: 12px;
}

.motchill-comment-form.is-collapsed .motchill-extra-block {
    display: none;
}
.motchill-comment-form.is-collapsed .motchill-submit-row {
    display: none;
}
.motchill-comment-form.is-collapsed .motchill-input-group--comment textarea {
    min-height: 56px;
}

.motchill-turnstile {
    margin-top: 6px;
    padding: 8px 0;
}
.motchill-submit-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.motchill-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.motchill-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(118, 75, 162, 0.28);
}

.motchill-comment-policy {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.48);
    margin-top: 6px;
}

.motchill-comment-form .required {
    color: #ff4b2b;
}

.motchill-comments-content {
    width: 100%;
    margin-top: 14px;
}

.motchill-comment-list .children {
    list-style: none;
    margin: 15px 0 0 60px;
    padding: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.05);
}

.motchill-comment-list .children .motchill-comment-body {
    margin-left: 20px;
}

.motchill-comment-episode {
    display: inline-flex;
    align-items: center;
    background: rgba(102, 126, 234, 0.18);
    color: #9aa6ff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ========================================
   PHIMUS SHARE MODAL STYLES
   Exact PhimUs style for share modal
   ======================================== */

.thungphim-share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.thungphim-share-modal.show {
    opacity: 1;
}

.thungphim-share-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.thungphim-share-content.show {
    transform: scale(1);
}

.thungphim-share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.thungphim-share-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.thungphim-share-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.thungphim-share-close:hover {
    background: #f5f5f5;
    color: #333;
}

.thungphim-share-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.thungphim-share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    min-height: 60px;
    margin: 0 8px 0 0;
    flex: 1;
    min-width: 70px;
}

.thungphim-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.thungphim-share-btn svg {
    width: 16px !important;
    height: 16px !important;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    filter: none;
}

.thungphim-share-btn:hover svg {
    transform: scale(1.1);
    filter: none;
}

.thungphim-share-btn span {
    font-size: 9px !important;
    color: white !important;
    font-weight: 500;
    text-align: center;
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* PhimUs Style Share Buttons - Exact Colors */
.thungphim-share-btn[data-network="facebook"] {
    background: rgb(66, 103, 178);
}

.thungphim-share-btn[data-network="facebook"] span {
    color: white;
}

.thungphim-share-btn[data-network="twitter"] {
    background: rgb(29, 161, 242);
}

.thungphim-share-btn[data-network="twitter"] span {
    color: white;
}

.thungphim-share-btn[data-network="telegram"] {
    background: rgb(0, 136, 204);
}

.thungphim-share-btn[data-network="telegram"] span {
    color: white;
}

.thungphim-share-btn[data-network="messenger"] {
    background: rgb(0, 106, 255);
}

.thungphim-share-btn[data-network="messenger"] span {
    color: white;
}

.thungphim-share-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.thungphim-share-copy:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.thungphim-share-copy img {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.thungphim-share-copy span {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

/* Thungphim share modal mobile tweaks moved to motchill-mobile-final.css [WATCH-MOVED-SHARE-480] */

/* Interactive Rating */
.motchill-rate-movie {
    margin-top: 30px;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #333;
    text-align: left;
}

.motchill-rate-movie h4 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 16px;
}

.motchill-star-rating {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.motchill-star-rating i {
    font-size: 24px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.motchill-star-rating i:hover,
.motchill-star-rating i.active {
    color: #ffd700;
    transform: scale(1.1);
}

.motchill-rating-feedback {
    margin-bottom: 15px;
}

.motchill-rating-feedback .motchill-rating-text {
    color: #ccc;
    font-size: 14px;
}

.motchill-submit-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #667eea;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.motchill-submit-rating:hover:not(:disabled) {
    background: #764ba2;
    transform: translateY(-2px);
}

.motchill-submit-rating:disabled {
    background: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

/* wpDiscuz Integration - Full Width (chỉ khai báo 1 lần trong file) */
#wpdcom .wpd-wrapper,
#wpdcom .wpd-comments-wrapper,
#wpdcom .wpd-thread-wrapper,
#wpdcom .wpd-thread-list,
#wpdcom .wpd-comment-wrap,
#wpdcom #wpd-main-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.wpd-comments-wrapper {
    background: transparent;
    padding: 0;
    margin: 0;
}

.wpd-comments-wrapper .wpd-comment {
    background: rgba(15, 15, 15, 0.96);
    border-radius: 16px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
}

.wpd-comments-wrapper .wpd-comment-header {
    color: #ffffff;
    font-size: 14px;
}

.wpd-comments-wrapper .wpd-comment-text {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 1.7;
}

/* wpDiscuz Form Full Width */
.wpd-form {
    width: 100% !important;
    max-width: 100% !important;
}

.wpd-field-textarea textarea {
    width: 100% !important;
    min-height: 120px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.motchill-login-prompt {
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* wpDiscuz Login Button - Style giống demo hoathinh3d.ai */
#wpdcom .wpd-login a,
#wpdcom .wpd-form-head .wpd-login a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35) !important;
    transition: all 0.3s ease !important;
}
#wpdcom .wpd-login a:hover,
#wpdcom .wpd-form-head .wpd-login a:hover {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(25, 118, 210, 0.45) !important;
    color: #fff !important;
}
#wpdcom .wpd-login a i {
    font-size: 16px !important;
    opacity: 0.95 !important;
}
#wpdcom .wpd-login-to-comment {
    text-align: center !important;
    margin-top: 16px !important;
    padding: 14px !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
}

.motchill-comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.motchill-comment-input {
    position: relative;
}

.motchill-comment-input textarea {
    width: 100%;
    height: 100px;
    padding: 15px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.motchill-comment-input textarea:focus {
    outline: none;
    border-color: #667eea;
}

.motchill-char-count {
    position: absolute;
    bottom: 10px;
    right: 15px;
    color: #666;
    font-size: 12px;
}

.motchill-comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.motchill-spoiler-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
}

.motchill-submit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.motchill-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.motchill-comments-list {
    margin-top: 20px;
}

.motchill-empty-comments {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.motchill-empty-comments i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #333;
}

/* Right Sidebar */
.motchill-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
}



.motchill-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #ffffff;
    padding-bottom: 8px;
    border-bottom: 2px solid #667eea;
}

/* Actors Section */
.motchill-actors-section {
    background: #111;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.motchill-actors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.5) rgba(0, 0, 0, 0.2);
}

/* Custom scrollbar for actors grid */
.motchill-actors-grid::-webkit-scrollbar {
    width: 6px;
}

.motchill-actors-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.motchill-actors-grid::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.5);
    border-radius: 3px;
    transition: background 0.2s;
}

.motchill-actors-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.8);
}

.motchill-actor-card {
    text-align: center;
    contain: layout style paint; /* CLS fix */
}

.motchill-actor-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.motchill-actor-link:hover {
    transform: translateY(-5px);
}

.motchill-actor-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    background: #1a1a1a;
}

.motchill-actor-link:hover .motchill-actor-avatar {
    border-color: #667eea;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    transform: scale(1.05);
}

.motchill-actor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background: #1a1a1a; /* Placeholder */
}

.motchill-actor-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: #999;
    font-size: 24px;
}

.motchill-actor-name {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    transition: color 0.3s ease;
}

.motchill-actor-link:hover .motchill-actor-name {
    color: #667eea;
}

/* Recommended Section - Thungphim Horizontal List Style */
.motchill-recommended-section {
    background: transparent;
    border-radius: 0;
    padding: 20px 0;
    box-shadow: none;
}

.motchill-recommended-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.motchill-recommended-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    contain: layout style; /* CLS fix */
}

.motchill-recommended-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.motchill-recommended-card a {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
    padding: 12px;
}

.motchill-recommended-thumbnail {
    position: relative;
    width: 80px;
    min-width: 80px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.motchill-recommended-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.9;
    aspect-ratio: 2 / 3;
    background: rgba(255, 255, 255, 0.03); /* Placeholder */
}

.motchill-recommended-card:hover .motchill-recommended-thumbnail img {
    transform: scale(1.05);
    opacity: 1;
}

.motchill-recommended-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.motchill-recommended-card:hover .motchill-recommended-overlay {
    opacity: 1;
}

.motchill-recommended-overlay i {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.9);
}

.motchill-recommended-title {
    padding: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 6px 0;
    line-height: 1.35;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.motchill-recommended-card:hover .motchill-recommended-title {
    color: #667eea;
}

/* Movie info text container (right side) */
.motchill-recommended-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
}

.motchill-recommended-subtitle {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

.motchill-recommended-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.motchill-recommended-meta span {
    display: inline-flex;
    align-items: center;
}

.motchill-recommended-meta span:not(:last-child)::after {
    content: "•";
    margin-left: 10px;
    opacity: 0.5;
}

/* Language label (separate line below meta) */
.motchill-recommended-lang {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    margin-top: 2px;
}

/* Labels removed - all info now in text section */

/* Responsive Design */
@media (min-width: 744px) and (max-width: 1200px) {
    .motchill-main-layout {
        grid-template-columns: 1fr 250px;
        gap: 20px;
    }
    
    .motchill-player-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .motchill-player-controls {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Watch mobile stack/tuning moved to motchill-mobile-final.css [WATCH-MOVED-MOBILE-STACK] */

/* Watch tablet + <480 card/title tuning moved to motchill-mobile-final.css [WATCH-MOVED-TABLET-480-TUNING] */

/* ============================================
   ACTORS SLIDER - Watch Page (Vertical 2/row)
   ============================================ */
.motchill-actors-watch-page .motchill-actors-slider-watch {
    position: relative;
    padding: 40px 0;
}

.motchill-actors-track-watch {
    overflow: hidden;
}

.motchill-actors-grid-watch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.motchill-actors-grid-watch::-webkit-scrollbar {
    width: 6px;
}

.motchill-actors-grid-watch::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.motchill-actors-grid-watch::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.motchill-actors-grid-watch::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.motchill-actors-grid-watch .motchill-actor-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.motchill-actors-grid-watch .motchill-actor-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 10px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.motchill-actors-grid-watch .motchill-actor-avatar img {
    border-radius: 50%;
}

.motchill-actors-grid-watch .motchill-actor-name {
    font-size: 13px;
    margin-top: 8px;
}

/* Vertical Navigation Buttons */
.actors-nav-btn-watch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 35px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actors-nav-btn-watch:hover:not(:disabled) {
    background: rgba(79, 172, 254, 0.9);
    border-color: #4facfe;
}

.actors-nav-btn-watch:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.actors-up {
    top: 0;
}

.actors-down {
    bottom: 0;
}

/* 🔥 REMOVED: Mobile responsive collapsed state CSS (no longer needed) */

/* ========================================
   ANTI-FLICKER & LAYOUT STABILITY (CLS)
   Prevent image jump/flash on watch & single pages
   ======================================== */

/* Main movie thumbnails in list/grid */
.img-film {
    width: 100%;
    aspect-ratio: 2 / 3; /* 320x480 ratio */
    object-fit: cover;
    background: rgba(255,255,255,0.06); /* placeholder */
    display: block;
}

/* Sidebar/rightbar avatar thumbnails */
.film-item-ver .avatar {
    width: 60px; 
    height: 80px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: rgba(255,255,255,0.06);
    display: block;
}

/* Smooth lazy-load transition (no flash) */
.lazy, .lazyload, .lazyloading { 
    opacity: 0; 
    transition: opacity 0.25s ease-in;
}
.lazyloaded { 
    opacity: 1; 
}

/* Ensure all images maintain space */
img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

/* Prevent text reflow while fonts load */
html { text-rendering: optimizeLegibility; }
body { 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

/* ========================================
   🔥 FORCE SIMPLE EPISODES (ALL DEVICES)
   Remove ALL thumbnails and expand buttons
   ======================================== */

/* Force hide toggle button on ALL devices and states */
.motchill-toggle-btn,
button.motchill-toggle-btn,
.episode-search .motchill-toggle-btn {
    display: none !important;
    visibility: hidden !important;
}

/* Force hide thumbnails on ALL devices and states */
.motchill-episode-thumbnail,
.motchill-episodes-grid .motchill-episode-thumbnail,
.motchill-episodes-section .motchill-episode-thumbnail,
.motchill-episode-card .motchill-episode-thumbnail {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Force hide status badges */
.motchill-episode-status {
    display: none !important;
    visibility: hidden !important;
}

/* Force episode cards to be compact (number only) on ALL devices */
.motchill-episode-card,
.motchill-episodes-grid .motchill-episode-card {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force episode info to be centered */
.motchill-episode-info,
.motchill-episode-card .motchill-episode-info {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Compact episode-card mobile sizes moved to motchill-mobile-final.css [WATCH-MOVED-EPISODE-CARD-MOBILE] */

/* ============================================
   📤 SHARE MODAL - PhimUs Style
   ============================================ */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-in-out;
}

.share-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.share-modal-content {
    position: relative;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
    z-index: 1;
}

.share-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.share-modal-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.share-modal-title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 25px 0;
    text-align: center;
}

.share-buttons-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Share Buttons */
.share-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
}

.share-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.3);
}

.share-btn-facebook {
    background: #1877f2;
}

.share-btn-twitter {
    background: #000;
}

.share-btn-telegram {
    background: #0088cc;
}

.share-btn-reddit {
    background: #ff4500;
}

.share-btn-messenger {
    background: #0084ff;
}

.share-btn-copy {
    background: #4caf50;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   🔔 NOTIFICATION TOAST - Favorite/Bookmark
   ============================================ */
.motchill-notification-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: #1a1a1a;
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10001;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
    font-size: 15px;
    font-weight: 500;
}

.motchill-notification-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.motchill-notification-toast i {
    font-size: 20px;
}

.motchill-notification-success {
    border-left: 4px solid #4caf50;
}

.motchill-notification-success i {
    color: #4caf50;
}

.motchill-notification-info {
    border-left: 4px solid #2196f3;
}

.motchill-notification-info i {
    color: #2196f3;
}

/* Toast mobile position moved to motchill-mobile-final.css [WATCH-MOVED-TOAST-MOBILE] */