:root {
            --primary-color: <?= $themeColor ?>;
            --primary-gradient: <?= $themeGradient ?>;
            --bg-color: #0b0e14;
            --card-bg: rgba(22, 28, 36, 0.75);
            --card-border: rgba(255, 255, 255, 0.08);
            --text-color: #ffffff;
            --nav-bg: rgba(11, 14, 20, 0.85);
        }

        body.light-mode {
            --bg-color: #f4f6f9;
            --card-bg: rgba(255, 255, 255, 0.9);
            --card-border: rgba(0, 0, 0, 0.06);
            --text-color: #1a202c;
            --nav-bg: rgba(255, 255, 255, 0.85);
        }

        /* Dark mode: force readable white text while preserving existing layout/functions */
        body:not(.light-mode) .text-muted { color: rgba(255,255,255,.78) !important; }
        body:not(.light-mode) .form-label,
        body:not(.light-mode) .form-control,
        body:not(.light-mode) .form-select,
        body:not(.light-mode) .form-control::placeholder,
        body:not(.light-mode) .form-select option,
        body:not(.light-mode) .glass-panel,
        body:not(.light-mode) .glass-panel h1,
        body:not(.light-mode) .glass-panel h2,
        body:not(.light-mode) .glass-panel h3,
        body:not(.light-mode) .glass-panel h4,
        body:not(.light-mode) .glass-panel h5,
        body:not(.light-mode) .glass-panel h6,
        body:not(.light-mode) .table { color: #fff; }
        body:not(.light-mode) .search-box { color:#fff !important; caret-color:#fff; }
        body:not(.light-mode) .search-box::placeholder { color:rgba(255,255,255,.62) !important; }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Kanit', sans-serif;
            transition: background-color 0.3s, color 0.3s;
            min-height: 100vh;
            font-size: 0.95rem;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        .content-wrap {
            flex: 1;
        }

        .container, .container-fluid {
            max-width: 1320px;
            width: 100%;
            padding-right: 12px;
            padding-left: 12px;
            margin-right: auto;
            margin-left: auto;
        }

        .navbar-custom {
            background: var(--nav-bg);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--card-border);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .brand-logo {
            font-weight: 700;
            font-size: 1.3rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 1px;
        }

        .nav-link-custom {
            color: var(--text-color);
            font-weight: 400;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .nav-link-custom:hover, .nav-link-custom.active {
            color: #fff;
            background: var(--primary-gradient);
            font-weight: 500;
        }

        .mode-switch-bar {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            padding: 10px;
            backdrop-filter: blur(12px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .mode-btn {
            flex: 1;
            padding: 12px;
            border-radius: 12px;
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid transparent;
        }

        .mode-btn.series-mode {
            color: #00d2ff;
            background: rgba(0, 210, 255, 0.1);
            border-color: rgba(0, 210, 255, 0.2);
        }

        .mode-btn.series-mode.active, .mode-btn.series-mode:hover {
            background: linear-gradient(135deg, #0072ff 0%, #00d2ff 100%);
            color: #fff;
            box-shadow: 0 5px 20px rgba(0, 210, 255, 0.4);
            transform: translateY(-2px);
        }

        .mode-btn.movie-mode {
            color: #ffcc00;
            background: rgba(255, 204, 0, 0.1);
            border-color: rgba(255, 204, 0, 0.2);
        }

        .mode-btn.movie-mode.active, .mode-btn.movie-mode:hover {
            background: linear-gradient(135deg, #ffb700 0%, #ff8800 100%);
            color: #fff;
            box-shadow: 0 5px 20px rgba(255, 183, 0, 0.4);
            transform: translateY(-2px);
        }

        .movie-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            position: relative;
            cursor: pointer;
            height: 100%;
            text-decoration: none;
            display: block;
        }

        .movie-card:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .card-img-wrapper {
            position: relative;
            padding-top: 145%;
            overflow: hidden;
            background: #1a202c;
            width: 100%;
        }

        .card-img-wrapper img {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .movie-card:hover .card-img-wrapper img {
            transform: scale(1.05);
        }

        .play-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .movie-card:hover .play-overlay {
            opacity: 1;
        }

        .play-btn-icon {
            width: 40px; height: 40px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.1rem;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        }

        .banner-carousel {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            border: 1px solid var(--card-border);
        }

        .banner-item {
            height: 320px;
            position: relative;
            background: #1a202c;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .banner-img {
            width: 100%; height: 100%;
            object-fit: cover;
            filter: blur(15px);
            transform: scale(1.1);
            position: absolute;
            top: 0; left: 0;
        }

        .banner-content-wrapper {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: 20px;
            background: linear-gradient(90deg, rgba(11,14,20,0.95) 0%, rgba(11,14,20,0.7) 60%, rgba(11,14,20,0.4) 100%);
        }

        .banner-poster {
            width: 120px;
            height: 180px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.6);
            border: 1px solid var(--card-border);
            margin-right: 20px;
            flex-shrink: 0;
        }

        /* Latest 3 items: always use a real slideshow on desktop and mobile */
        #bannerCarousel .carousel-item {
            transition: transform .6s ease-in-out;
        }

        @media (max-width: 576px) {
            #bannerCarousel .banner-item { height: 300px; }
            #bannerCarousel .banner-content-wrapper { padding: 14px 38px 14px 14px; gap: 12px; }
            #bannerCarousel .banner-poster {
                display: block !important;
                width: 92px;
                height: 138px;
                margin-right: 0;
                flex: 0 0 92px;
            }
            #bannerCarousel .banner-content-wrapper > div { min-width: 0; flex: 1 1 auto; }
            #bannerCarousel .carousel-control-prev,
            #bannerCarousel .carousel-control-next { width: 12%; }
            #bannerCarousel .carousel-indicators { margin-bottom: 8px; }
        }

        .chip-btn {
            border-radius: 30px;
            padding: 6px 14px;
            font-size: 0.85rem;
            border: 1px solid var(--card-border);
            background: var(--card-bg);
            color: var(--text-color);
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            cursor: pointer;
            white-space: nowrap;
        }

        .chip-btn:hover, .chip-btn.active {
            background: var(--primary-gradient);
            color: #fff;
            border-color: transparent;
            font-weight: 500;
        }

        .search-box {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 25px;
            color: var(--text-color);
            padding: 8px 16px;
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
            width: 100%;
        }

        .search-box:focus {
            background: var(--card-bg);
            border-color: var(--primary-color);
            color: var(--text-color);
            box-shadow: 0 0 12px rgba(255, 204, 0, 0.2);
        }

        .btn-gradient {
            background: var(--primary-gradient);
            border: none;
            color: #fff;
            font-weight: 600;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .btn-gradient:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            color: #fff;
            box-shadow: 0 6px 15px rgba(0,0,0,0.3);
        }

        .glass-panel {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            backdrop-filter: blur(10px);
        }

        footer {
            background: var(--nav-bg);
            border-top: 1px solid var(--card-border);
            padding: 25px 0;
            margin-top: auto;
            backdrop-filter: blur(16px);
            font-size: 0.9rem;
        }
        
        footer a {
            color: var(--text-color);
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.2s;
        }
        
        footer a:hover {
            opacity: 1;
            color: var(--primary-color);
        }
        
        .glass-modal {
            background: rgba(22, 28, 36, 0.96);
            border-radius: 16px;
            backdrop-filter: blur(14px);
        }

        /* หน้าเลือก EP + Video fullscreen */
        .watch-detail-panel { background: linear-gradient(145deg, rgba(22,28,36,.94), rgba(11,14,20,.94)); }
        .watch-poster { width: 220px; max-width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
        .synopsis-box { line-height: 1.8; color: rgba(255,255,255,.72); }
        .synopsis-read-more { display:none; }
        @media (max-width:576px) {
            .watch-detail-panel { padding: 16px !important; }
            .watch-detail-panel .row { --bs-gutter-x: 0; --bs-gutter-y: 0; }
            .watch-detail-poster-col,
            .watch-detail-info-col { width:100%; max-width:100%; flex:0 0 100%; }
            .watch-detail-poster-col { margin-bottom:18px; }
            .watch-poster {
                width:145px;
                height:auto;
                display:block;
                margin:0 auto;
                border-radius:14px;
            }
            .watch-detail-info-col { text-align:left; }
            .watch-detail-info-col h2 {
                font-size:1.18rem;
                line-height:1.45;
                margin-bottom:8px !important;
                white-space:normal;
                overflow-wrap:anywhere;
            }
            .watch-detail-info-col .synopsis-heading { margin-top:14px; }
            .synopsis-box {
                font-size:.86rem;
                line-height:1.75;
                max-height:6.1em;
                overflow:hidden;
                position:relative;
                transition:max-height .25s ease;
            }
            .synopsis-box.is-expanded { max-height:1000px; }
            .synopsis-read-more {
                display:inline-flex;
                align-items:center;
                gap:5px;
                margin-top:7px;
                padding:5px 10px;
                border:1px solid var(--card-border);
                border-radius:999px;
                background:rgba(255,255,255,.05);
                color:var(--text-color);
                font-size:.78rem;
                line-height:1.2;
                cursor:pointer;
            }
            .synopsis-read-more:hover { border-color:var(--primary-color); }
        }
        .episode-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
        .episode-btn { min-height:52px; border:1px solid var(--card-border); background:rgba(255,255,255,.045); color:var(--text-color); border-radius:12px; padding:10px 12px; text-align:left; transition:.2s; }
        .episode-btn:hover { transform:translateY(-2px); border-color:var(--primary-color); background:rgba(255,255,255,.08); }
        .episode-btn.is-watched { background:rgba(25,135,84,.22); border-color:rgba(25,135,84,.75); color:#fff; }
        .episode-btn.is-watched:hover { background:rgba(25,135,84,.30); border-color:#20c997; }
        .episode-btn.is-watched .episode-status { color:#75e6a8 !important; }
        .episode-btn .episode-status { display:inline-flex; align-items:center; gap:4px; margin-left:6px; font-size:.7rem; font-weight:700; color:#8b95a7; }
        /* แสดง EP ครั้งละ 6 ตอน และปลดล็อกเพิ่มทีละ 1 ตอนเมื่อดู EP ก่อนหน้าสำเร็จ */
        .episode-btn.episode-progressive-hidden { display:none !important; }
        .player-fullscreen-modal { background:#000; }
        #videoPlayerModal .modal-dialog { margin:0; width:100vw; max-width:none; height:100dvh; }
        #videoPlayerModal .modal-content { height:100dvh; border:0; border-radius:0; background:#000; }
        #videoPlayerModal .modal-body { padding:0; height:100%; display:flex; align-items:center; justify-content:center; background:#000; }
        #videoPlayerFrame { width:100%; height:100%; border:0; background:#000; }
        .video-close-btn { position:absolute; top:max(12px, env(safe-area-inset-top)); right:12px; z-index:20; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.72); color:#fff; border:1px solid rgba(255,255,255,.25); font-size:20px; }
        .video-title-bar { position:absolute; left:12px; top:max(12px, env(safe-area-inset-top)); z-index:20; max-width:70%; padding:8px 12px; border-radius:12px; background:rgba(0,0,0,.58); color:#fff; font-size:.85rem; }
        .pagination .page-link { background:var(--card-bg); color:var(--text-color); border-color:var(--card-border); }
        .pagination .active .page-link { background:var(--primary-gradient); color:#fff; border-color:transparent; }
        /* Admin content list: search/category filter + 10 items per page */
        .admin-category-filter {
            display:flex;
            flex-wrap:wrap !important;
            gap:8px;
            width:100%;
            overflow:visible !important;
            max-height:none !important;
            align-items:center;
        }
        .admin-category-btn { flex:0 0 auto; white-space:nowrap; }
        .admin-content-row.admin-row-hidden { display:none !important; }
        .admin-content-table th { white-space:nowrap; }
        #adminContentPagination .page-link { min-width:36px; text-align:center; }
        #adminContentPagination .disabled .page-link { pointer-events:none; opacity:.55; }
        @media (max-width:576px) {
            .admin-content-table { min-width:680px; }
            .admin-content-list-panel { overflow:hidden; }
            #adminPageInfo { width:100%; text-align:center; }
            #adminContentPagination { width:100%; }
        }
        @media (max-width:576px) { .watch-poster{width:145px;} .episode-grid{grid-template-columns:repeat(2,1fr);} .episode-btn{min-height:48px;font-size:.85rem;} }

        @media (max-width: 576px) {
            .banner-item {
                height: 260px;
            }
            .banner-content-wrapper {
                padding: 15px;
            }
            .mode-btn {
                font-size: 0.85rem;
                padding: 10px 6px;
                gap: 4px;
            }
            .brand-logo {
                font-size: 1.1rem;
            }
        }