src/lib/txa/txaplayer.js

/**
 * TXAPlayer v1.0 - TPhimX Next Generation
 * Base Logic: Markers, Subtitles (VTT/SRT), Replay, Skip Outro, Snapshot
 * v1.0: Optimized for Astro/Vite environment, integrated with KKPhim API
 */

// dashjs is loaded via CDN or global script
var dashjs = window.dashjs || {};

var TXA_VERSION = 'v1.0';

// 🤖 TXA NEON CORE 2030 - STORYBOARD CONFIG
var STORYBOARD_LEVELS = window.STORYBOARD_LEVELS || {
    L1: { grid: [10, 10], size: [160, 90], interval: 10, prefix: 'L1_M' },
    L2: { grid: [5, 5], size: [240, 135], interval: 30, prefix: 'L2_M' },
    L3: { grid: [3, 3], size: [320, 180], interval: 60, prefix: 'L3_M' }
};

const txaStorage = {
    dbName: 'TXA_BLOB_CACHE',
    storeName: 'episodes',
    version: 1,
    _getDB() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open(this.dbName, this.version);
            request.onupgradeneeded = (e) => {
                const db = e.target.result;
                if (!db.objectStoreNames.contains(this.storeName)) {
                    db.createObjectStore(this.storeName, { keyPath: 'id' });
                }
            };
            request.onsuccess = (e) => resolve(e.target.result);
            request.onerror = (e) => reject(e.target.error);
        });
    },
    async get(id) {
        try {
            const db = await this._getDB();
            return new Promise((resolve, reject) => {
                const tx = db.transaction(this.storeName, 'readonly');
                const store = tx.objectStore(this.storeName);
                const req = store.get(id);
                req.onsuccess = () => resolve(req.result);
                req.onerror = () => reject(req.error);
            });
        } catch (e) { return null; }
    },
    async set(id, data, m3u8Url) {
        try {
            const db = await this._getDB();
            const tx = db.transaction(this.storeName, 'readwrite');
            const store = tx.objectStore(this.storeName);
            store.put({ id, data, m3u8Url, timestamp: Date.now() });
            return true;
        } catch (e) { return false; }
    }
};

if (typeof window.TXAPlayer === 'undefined') {
    window.TXAPlayer = class {

    constructor(options) {
        const defaults = {
            containerId: 'player-container',
            videoUrl: '',
            posterUrl: '',
            title: 'TPhimX Media',
            markers: { intro: [0, 65], outro: [0, 0] },
            subtitles: [],
            autoPlay: false,

            movieId: null,
            episodeId: null,
            movieSlug: null,
            episodeSlug: null,
            movieThumb: null,
            epCount: null,
            saveUrl: null,
            restoreUrl: null,
            csrfToken: null,

            nextEpisodeUrl: null,
            prevEpisodeUrl: null,
            autoSkipIntro: false,
            autoNextEpisode: false,
            hasSubtitles: true
        };

        this.options = { ...defaults, ...options };

        // Deep validate markers to support [0,0] fallback
        if (this.options.markers) {
            if (!this.options.markers.intro || (this.options.markers.intro[0] === 0 && this.options.markers.intro[1] === 0)) {
                this.options.markers.intro = defaults.markers.intro;
            }
            if (!this.options.markers.outro || (this.options.markers.outro[0] === 0 && this.options.markers.outro[1] === 0)) {
                this.options.markers.outro = defaults.markers.outro;
            }
        }

        this.settings = {
            volume: this.options.volume !== undefined ? this.options.volume : 1,
            muted: this.options.muted !== undefined ? this.options.muted : false,
            playbackRate: 1,
            autoSkipIntro: this.options.autoSkipIntro || false,
            autoNextEpisode: this.options.autoNextEpisode || false,
            showRealTime: true,
            clockFormat: 'H:i:s',
            ...this.loadSettings()
        };

        let target = this.options.container || this.options.containerId;
        this.container = typeof target === 'string'
            ? (document.querySelector(target) || document.getElementById(target.replace(/^#/, '')))
            : target;

        if (!this.container) { console.error('TXAPlayer: Container not found'); return; }

        // State
        this._isAutoNextTriggered = false;
        this._autoNextCountdownInterval = null; // Store countdown interval ID
        this._isRetryingVideo = false; // Track video retry state
        this.dashPlayer = null;
        this.video = null;
        this.wrapper = null;
        this.seekAccumulator = 0;
        this.seekDebounce = null;
        this.isDragging = false;
        this.currentSubCues = [];
        this.feedbackTimer = null;
        this.activeSubIdx = -1;
        this.destroyed = false;
        this._handlers = {};

        // v5.8.0 New Features State
        this.isTheaterMode = false;
        this.isCinemaMode = false;
        this.isSpeedPreview = false;
        this.originalSpeed = 1;
        this.resumeShown = false;

        // v6.5.0 Preview Thumbnail State
        this._previewSpriteUrl = null;
        this._previewSpriteLoaded = false;
        this._previewLowUrl = null;
        this._previewLowLoaded = false;
        this._previewUpgradeTimer = null;

        // v6.6.2 - Dynamic Preview Engine Fallback
        this._useDynamicPreview = false;
        this._previewVideo = null;
        this._previewHls = null;
        this._isPreviewSeeking = false;
        this._pendingPreviewSeekTime = null;

        // v6.5.2 - Turbo Storyboard (Neon Core 2030)
        this._useStoryboard = false;
        this._storyboardPath = null;
        this._currentStoryboardLevel = 'L1';
        this._storyboardCache = new Set();

        // v6.5.2 - Predictive MP4 Multi-Quality
        this._mp4Levels = [];
        this._lastMP4Url = null;

        // v6.1.0 Ticker State
        this.tickerMax = Math.floor(Math.random() * 9) + 2; // Random 2-10 times
        this.tickerCount = 0;
        this.tickerNextTime = 5 + Math.random() * 20; // Faster first ticker for better visibility
        this._isTickerRunning = false;
        this._fixedTickerShown = false;
        this._endingTickerShown = false;
        this._loadProgress = 0;
        this._loadInterval = null;

        this.init();
    }

    init() {
        // v6.3.0 - Grouped Console Log
        console.group('%c ✨ TPHIMX PLAYER %c ' + TXA_VERSION + ' %c ACTIVE ✨ ',
            'background:#8b5cf6; color:#fff; font-weight:bold; padding:4px 0 4px 8px; border-radius:4px 0 0 4px;',
            'background:#facc15; color:#000; font-weight:900; padding:4px 8px;',
            'background:#8b5cf6; color:#fff; font-weight:bold; padding:4px 8px 4px 0; border-radius:0 4px 4px 0;'
        );
        console.log('%cVersion: %c' + TXA_VERSION, 'color:#94a3b8', 'color:#fff; font-weight:bold');
        console.log('%cMode:    %cPlatinum Premium', 'color:#94a3b8', 'color:#fbbf24');
        console.groupEnd();

        if (window.txaPlayer && window.txaPlayer.container === this.container) {
            console.log('[TXAPlayer] Destroying existing instance for this container...');
            window.txaPlayer.destroy();
        }

        window.txaPlayer = this;
        window.TXAPlayer = TXAPlayer;

        this.container.classList.add('txa-player-skin');
        this.tickerCount = 0;
        this.tickerMax = 5;
        this.tickerNextTime = 15;
        this._uiTimer = null;

        // Bind Methods
        this.showUI = this.showUI.bind(this);
        this.hideUI = this.hideUI.bind(this);

        this.injectStyles();
        this.renderUI();
        this.setupMedia();
        this.bindEvents();
        this.startClock(); // v6.4.0 Real-time Clock
        this.handleMobileEvents(); // v6.1.0 Mobile Events
        this.setupContextMenu();
        this.setupShortcuts();
        this.loadInitialSettings();
        this.setupNewFeatures(); // v5.8.0 - Initialize new features
        this.updateTopTitle(); // Set initial title
        this.detectDevTools();
        console.log(
            `%cSTOP! %cThis is a browser feature intended for developers. If someone told you to copy-paste something here to enable a feature or "hack" someone's account, it is a scam and will give them access to your account.\n\n%c[TXAPlayer ${TXA_VERSION}] %cSecurity Active`,
            'color:red;font-family:system-ui;font-size:4rem;font-weight:bold;-webkit-text-stroke:1px black;',
            'font-family:system-ui;font-size:1.5rem;font-weight:bold;',
            'color:#8b5cf6;font-size:1.2rem;font-weight:bold;',
            'color:gray;font-size:1.2rem;'
        );
    }

    detectMobile() {
        // Use external TXA Detector if available
        if (typeof window.detectMobile === 'function') return window.detectMobile();
        if (window.TXADetector) return window.TXADetector.isMobile();

        // Standard minimal fallback for extreme cases where script fails to load
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent || '') || window.innerWidth <= 1024;
    }

    handleMobileEvents() {
        if (!this.detectMobile()) return;

        this.container.classList.add('is-mobile');
        const wrapper = this.wrapper;

        // State for Gestures
        let lastTap = 0;
        let tapTimer = null;
        let touchStartX = 0;
        let touchStartY = 0;
        let startVolume = 0;
        let isLongPress = false;
        let pressTimer = null;
        let isScrubbing = false;
        let isVolumeGesture = false;

        // --- 1. LONG PRESS (2x SPEED) & GESTURE START ---
        wrapper.addEventListener('touchstart', (e) => {
            // Ignore if touching controls or panels
            if (e.target.closest('.txa-controls, .txa-panel, .txa-ctx, .txa-replay-overlay, .txa-skip-btn, .txa-resume-overlay, .txa-next-countdown, .txa-loader, .txa-stats-panel, button, i, .txa-btn')) return;

            const touch = e.touches[0];
            touchStartX = touch.clientX;
            touchStartY = touch.clientY;
            startVolume = this.video.volume;
            isLongPress = false;
            isVolumeGesture = false;

            // Start Long Press Timer (YouTube Style 2x Speed)
            pressTimer = setTimeout(() => {
                if (!this.video.paused && !isScrubbing && !isVolumeGesture) {
                    isLongPress = true;
                    this.startSpeedPreview();
                    if (window.navigator.vibrate) window.navigator.vibrate(20);
                }
            }, 500);

        }, { passive: true });

        wrapper.addEventListener('touchend', (e) => {
            if (e.target.closest('.txa-controls, .txa-panel, .txa-ctx, .txa-replay-overlay, .txa-skip-btn, .txa-resume-overlay, .txa-next-countdown, .txa-loader, .txa-stats-panel, button, i, .txa-btn')) return;

            clearTimeout(pressTimer);

            if (isLongPress) {
                isLongPress = false;
                this.stopSpeedPreview();
                e.preventDefault();
                return;
            }

            if (isVolumeGesture) {
                isVolumeGesture = false;
                return;
            }

            const touchEnd = e.changedTouches[0];
            const dx = Math.abs(touchEnd.clientX - touchStartX);
            const dy = Math.abs(touchEnd.clientY - touchStartY);

            if (dx > 20 || dy > 20) return;

            const currentTime = new Date().getTime();
            const tapLength = currentTime - lastTap;

            if (tapLength < 300 && tapLength > 0) {
                // DOUBLE TAP detection
                clearTimeout(tapTimer);
                const rect = wrapper.getBoundingClientRect();
                const x = touchEnd.clientX - rect.left;

                // 25% Left (Rewind), 25% Right (Forward), 50% Center (Toggle Play)
                if (x < rect.width * 0.25) {
                    this.seekAccumulated(-10);
                } else if (x > rect.width * 0.75) {
                    this.seekAccumulated(10);
                } else {
                    this.togglePlay();
                }
                if (e.cancelable) e.preventDefault();
            } else {
                // SINGLE TAP logic - Highly sensitive center zone (60% width)
                tapTimer = setTimeout(() => {
                    const rect = wrapper.getBoundingClientRect();
                    const x = touchEnd.clientX - rect.left;

                    if (x > rect.width * 0.2 && x < rect.width * 0.8) {
                        this.togglePlay();
                    } else {
                        if (wrapper.classList.contains('active-ui')) this.hideUI();
                        else this.showUI();
                    }
                }, 200); // Shorter delay for better responsiveness
            }
            lastTap = currentTime;
            if (e.cancelable) e.preventDefault();
        }, { passive: false });

        wrapper.addEventListener('touchmove', (e) => {
            if (isScrubbing) return;
            const touch = e.touches[0];
            const dx = touch.clientX - touchStartX;
            const dy = touch.clientY - touchStartY;

            // Fullscreen Gestures (Volume on Right Side)
            const isFS = !!(document.fullscreenElement || document.webkitIsFullScreen || this.video?.webkitDisplayingFullscreen || this.wrapper.classList.contains('fullscreen-mode'));

            if (isFS && !isLongPress && Math.abs(dy) > 20) {
                const rect = wrapper.getBoundingClientRect();
                // Right side check
                if (touchStartX > rect.width * 0.5) {
                    if (!isVolumeGesture && Math.abs(dy) > Math.abs(dx)) {
                        isVolumeGesture = true;
                        clearTimeout(pressTimer);
                    }
                    if (isVolumeGesture) {
                        if (e.cancelable) e.preventDefault();
                        const sensitivity = 1.5; // Swipe height = 1.5x range
                        const delta = (touchStartY - touch.clientY) / (rect.height / sensitivity);
                        const newVol = Math.max(0, Math.min(1, startVolume + delta));
                        this.video.volume = newVol;
                        this.video.muted = false;
                        this.updateVolUI();
                        this.showFeedback('volume');
                    }
                }
            } else if (Math.abs(dx) > 20 || Math.abs(dy) > 20) {
                clearTimeout(pressTimer);
            }
        }, { passive: false });

        // --- 2. MOBILE PROGRESS SCRUBBING ---
        const pWrap = this.container.querySelector('#txa-progress');
        if (pWrap) {
            pWrap.addEventListener('touchstart', (e) => {
                isScrubbing = true;
                pWrap.classList.add('dragging');
                this.showUI(false);
                this.updateMobileScrub(e, pWrap);
            }, { passive: true });

            pWrap.addEventListener('touchmove', (e) => {
                if (isScrubbing) {
                    if (e.cancelable) e.preventDefault();
                    this.updateMobileScrub(e, pWrap);
                }
            }, { passive: false });

            pWrap.addEventListener('touchend', (e) => {
                if (isScrubbing) {
                    isScrubbing = false;
                    pWrap.classList.remove('dragging');
                    const rect = pWrap.getBoundingClientRect();
                    const x = e.changedTouches[0].clientX - rect.left;
                    const pct = Math.max(0, Math.min(1, x / rect.width));
                    this.safeSeek(pct * this.video.duration);
                    const timeOverlay = this.container.querySelector('.txa-mobile-seek-time');
                    if (timeOverlay) timeOverlay.style.display = 'none';
                    this.showUI();
                }
            }, { passive: true });
        }
    }

    updateMobileScrub(e, pWrap, timeOverlay) {
        if (!this.video.duration) return;
        const rect = pWrap.getBoundingClientRect();
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const x = clientX - rect.left;
        const pct = Math.max(0, Math.min(1, x / rect.width));
        const targetTime = pct * this.video.duration;

        // Update Visual Bar immediately
        const playedBar = this.container.querySelector('#txa-played');
        if (playedBar) playedBar.style.width = (pct * 100) + '%';

        // Update Time Preview
        if (timeOverlay) {
            timeOverlay.style.display = 'block';
            timeOverlay.innerText = this.formatTime(targetTime, this.video.duration >= 3600);
        }
    }

    /**
     * YouTube-style buffer bar update
     * Called every 1s and on FRAG_LOADED to reflect pre-loaded segments
     */
    _updateBufferBar() {
        if (!this.video) return;
        const duration = this.video.duration;
        if (!duration || !isFinite(duration)) return;

        const bufBar = this.container.querySelector('#txa-buffer');
        if (!bufBar) return;

        const buffered = this.video.buffered;
        const current = this.video.currentTime;
        let bufferEnd = 0;

        // Find the buffer range that contains or is closest ahead of current time
        for (let i = 0; i < buffered.length; i++) {
            if (current >= buffered.start(i) - 0.5 && current <= buffered.end(i)) {
                bufferEnd = buffered.end(i);
                break;
            }
        }

        // Fallback: use the largest buffered end
        if (bufferEnd === 0 && buffered.length > 0) {
            bufferEnd = buffered.end(buffered.length - 1);
        }

        const bufPct = (bufferEnd / duration) * 100;
        bufBar.style.width = Math.min(100, bufPct).toFixed(2) + '%';
    }

    updateProgress() {
        if (!this.video || this.isDragging) return;
        const current = this.video.currentTime;
        const duration = this.video.duration;
        if (!duration) return;

        const pct = (current / duration) * 100;
        const playedBar = this.container.querySelector('#txa-played');
        if (playedBar) playedBar.style.width = pct + '%';

        // Update Buffer Progress (YouTube-style)
        this._updateBufferBar();

        const currText = this.container.querySelector('#txa-curr') || this.container.querySelector('#txa-time');
        if (currText) {
            if (currText.id === 'txa-time') {
                currText.innerText = this.formatTimeDisplay();
            } else {
                currText.innerText = this.formatTime(current, duration >= 3600);
            }
        }

        this.checkMarkers(current);
        this.checkTicker();
        this.renderSubtitles();
    }

    injectStyles() {
        if (document.getElementById('txa-css')) return;
        const s = document.createElement('style');
        s.id = 'txa-css';
        s.textContent = `
            @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');
            @import url('https://fonts.cdnfonts.com/css/digital-7-mono');

            
            :root {
                --txa-brand: #8b5cf6;
                --txa-brand-glow: rgba(139,92,246,0.6);
                --txa-glass: rgba(12,12,18,0.85);
                --txa-glass-light: rgba(30,30,40,0.9);
                --txa-border: rgba(255,255,255,0.12);
                --txa-text: #f1f5f9;
                --txa-intro: #fbbf24;
                --txa-outro: #ef4444;
                --txa-brand-light: #a78bfa;
            }

            /* BRANDING elements - LUXURY STYLE */
            .txa-brand-logo {
                position: absolute; top: 25px; left: 25px; z-index: 150;
                pointer-events: none; opacity: 0.6; transform: translateY(0);
                transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
                filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8));
            }
            
            /* REAL-TIME CLOCK - v6.5.1 Top-Down Dynamic */
            .txa-realtime-clock {
                position: absolute; top: 25px; right: 25px; z-index: 2147483647;
                background: rgba(15, 15, 20, 0.7); backdrop-filter: blur(25px);
                border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50px;
                padding: 8px 16px; font-family: 'Digital-7 Mono', 'Outfit', sans-serif;
                font-size: 16px; font-weight: 600; color: #fff;
                display: none; align-items: center; gap: 8px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.6);
                transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
                pointer-events: none;
                letter-spacing: 1px;
                will-change: top, transform;
            }
            .txa-realtime-clock.active { display: flex; }
            .active-ui .txa-realtime-clock { top: 85px; } /* Slide DOWN to avoid Top Info Bar */
            .txa-realtime-clock i { font-size: 12px; color: var(--txa-brand); opacity: 0.8; }
            
            @media (max-width: 768px) {
                .txa-realtime-clock { font-size: 15px; padding: 6px 12px; top: 15px; right: 15px; }
            }
            
            .txa-wrapper.video-playing.active-ui .txa-brand-logo { opacity: 1; }
            .txa-wrapper.video-playing:not(.active-ui) .txa-brand-logo { opacity: 0.25; }
            
            .txa-logo-text { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -1px; }
            .txa-logo-t { color: var(--txa-brand); }
            .txa-logo-phimx { color: #fff; }

            /* Smooth Center Play/Pause Animation */
            .txa-center-feedback {
                position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
                width: 80px; height: 80px; background: rgba(0,0,0,0.4); border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                z-index: 200; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);
            }
            .txa-center-feedback.animate { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
            .txa-center-feedback.animate-out { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
            .txa-center-feedback i { font-size: 32px; color: #fff; text-shadow: 0 0 15px var(--txa-brand-glow); }

            .txa-watermark {
                position: absolute; bottom: 100px; right: 25px; z-index: 80;
                pointer-events: none; opacity: 0.3; font-size: 11px; font-weight: 800;
                color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 2px;
                font-family: 'Outfit', sans-serif; transition: opacity 0.3s;
            }
            .txa-watermark span { color: var(--txa-brand); }
            .txa-wrapper.video-playing:not(.active-ui) .txa-watermark { opacity: 0.15; }

            .txa-player-skin { position:absolute; inset:0; background:#000; font-family:'Outfit',sans-serif; color:var(--txa-text); user-select:none; overflow:hidden; }
            .txa-wrapper { position:relative; width:100%; height:100%; outline:none; container-type: inline-size; container-name: player; }
            .txa-video { width:100%; height:100%; object-fit:contain; }

            /* LOADER - Enhanced */
            .txa-loader { position:absolute; inset:0; background:rgba(0,0,0,0.85); z-index:95; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:0; backdrop-filter:blur(8px); pointer-events: none; }
            .txa-loader.hidden { display:none; }
            .txa-loader-content { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:380px; width:90%; }
            .txa-spinner { width:52px; height:52px; border:3px solid rgba(255,255,255,0.08); border-top-color:var(--txa-brand); border-radius:50%; animation:txaspin 0.7s linear infinite; }
            .txa-load-pct-row { display:flex; align-items:baseline; gap:10px; justify-content:center; }
            .txa-load-pct { font-size:28px; font-weight:900; color:#fff; text-shadow: 0 0 15px var(--txa-brand-glow); font-variant-numeric:tabular-nums; }
            .txa-load-speed { font-size:12px; font-weight:700; color:var(--txa-brand); background:rgba(139,92,246,0.15); padding:3px 10px; border-radius:20px; font-variant-numeric:tabular-nums; letter-spacing:0.3px; white-space:nowrap; }
            .txa-load-text { font-size:12px; font-weight:500; color:rgba(255,255,255,0.5); letter-spacing:0.3px; text-align:center; }
            .txa-load-info { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; width:100%; }
            .txa-load-info-tag { 
                font-size:11px; font-weight:700; color:#fff; 
                background:rgba(255,255,255,0.06); backdrop-filter:blur(10px);
                padding:6px 14px; border-radius:10px; 
                border:1px solid rgba(255,255,255,0.1);
                text-transform:uppercase; letter-spacing:0.8px; 
                display:flex; align-items:center; gap:8px; 
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                transition: transform 0.3s ease;
            }
            .txa-load-info-tag i { font-size:12px; color: var(--txa-brand-light); }
            .txa-load-info-tag .tag-val { color:#fff; font-weight: 800; }
            .txa-load-info-tag.bg-warning { border-color: rgba(234, 179, 8, 0.4); color: #facc15; }
            .txa-load-info-tag.bg-warning i { color: #facc15; }

            @container player (max-width: 500px) {
                .txa-load-info { flex-direction: column; align-items: center; gap: 10px; }
                .txa-load-info-tag { width: 85%; justify-content: center; font-size: 10px; padding: 10px; }
                .txa-load-pct { font-size: 42px; }
            }

            .txa-load-bar { width:100%; height:5px; background:rgba(255,255,255,0.1); border-radius:10px; overflow:hidden; margin-top:10px; }
            .txa-load-bar-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--txa-brand), #f472b6); border-radius:10px; transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 15px var(--txa-brand-glow); }
            @keyframes txaspin { to { transform:rotate(360deg); } }

            /* STATS PANEL - Premium Centered */
            .txa-stats-panel { 
                position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.9);
                z-index:2147483647; 
                background:rgba(10, 10, 15, 0.9); backdrop-filter:blur(30px); 
                border:1px solid rgba(255,255,255,0.15); border-radius:24px; 
                padding:25px; min-width:320px; max-width:450px; 
                font-family:'Outfit', system-ui, sans-serif; 
                display:none; pointer-events:auto;
                box-shadow: 0 30px 100px rgba(0,0,0,0.9), 0 0 40px rgba(139,92,246,0.2);
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .txa-stats-panel.active { display:block; animation:txaStatsIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
            @keyframes txaStatsIn { 
                from { opacity:0; transform:translate(-50%, -45%) scale(0.95); } 
                to { opacity:1; transform:translate(-50%, -50%) scale(1); } 
            }
            @keyframes txaShortcutsIn {
                from { opacity:0; transform:translateY(20px) scale(0.95); }
                to { opacity:1; transform:translateY(0) scale(1); }
            }
            .txa-shortcuts-panel {
                position: absolute; inset: 0;
                display: flex; align-items: center; justify-content: center;
                pointer-events: none; z-index: 2147483647;
            }
            .txa-shortcuts-panel.active { pointer-events: auto; }
            .txa-shortcuts-panel .txa-shortcuts-content {
                background:rgba(10, 10, 15, 0.9); backdrop-filter:blur(30px); 
                border:1px solid rgba(255,255,255,0.15); border-radius:24px; 
                padding:25px; min-width:320px; max-width:500px; 
                font-family:'Outfit', system-ui, sans-serif; 
                box-shadow: 0 30px 100px rgba(0,0,0,0.9), 0 0 40px rgba(139,92,246,0.2);
                opacity: 0; /* Start hidden for animation */
                animation: txaShortcutsIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            .txa-shortcuts-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
            .txa-shortcuts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
            @media (max-width: 600px) { .txa-shortcuts-grid { grid-template-columns: 1fr; } }
            .txa-shortcuts-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--txa-brand); letter-spacing: 1px; padding: 0 10px 10px; opacity: 0.8; }
            .txa-shortcuts-table td { padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }
            .txa-shortcuts-table td:first-child { border-radius: 10px 0 0 10px; border-right: none; font-size: 13px; color: #cbd5e1; }
            .txa-shortcuts-table td:last-child { border-radius: 0 10px 10px 0; border-left: none; text-align: right; }
            .txa-shortcuts-table kbd { 
                background: #1e293b; color: #fff; padding: 3px 8px; border-radius: 6px; 
                border-bottom: 2px solid #000; font-size: 10px; font-weight: 800; 
                font-family: inherit; display: inline-block; min-width: 18px; text-align: center;
                box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            }
            .txa-shortcuts-table tr:hover td { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); }
            .txa-stats-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.08); }
            .txa-stats-title { font-size:12px; font-weight:800; color:var(--txa-brand); text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; gap:6px; }
            .txa-stats-title i { font-size:11px; }
            .txa-stats-close { background:none; border:none; color:rgba(255,255,255,0.4); cursor:pointer; font-size:14px; padding:4px; border-radius:6px; transition:0.2s; }
            .txa-stats-close:hover { color:#fff; background:rgba(255,255,255,0.1); }
            .txa-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
            .txa-stat-item { display:flex; flex-direction:column; gap:2px; padding:6px 8px; background:rgba(255,255,255,0.03); border-radius:8px; }
            .txa-stat-item.full { grid-column:1/-1; }
            .txa-stat-label { font-size:9px; font-weight:700; color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:0.8px; }
            .txa-stat-value { font-size:13px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
            .txa-stat-value.brand { color:var(--txa-brand); }
            .txa-stat-value.green { color:#34d399; }
            .txa-stat-value.yellow { color:#fbbf24; }
            .txa-stat-value.red { color:#f87171; }
            @media (max-width:600px) {
                .txa-stats-panel { 
                    top:5px; left:5px; right:5px; width: auto;
                    min-width:unset; max-width:unset; padding:12px; 
                    font-size:10px; border-radius: 12px;
                }
                .txa-stats-grid { grid-template-columns: 1fr; gap:4px; }
                .txa-stat-item { padding: 4px 8px; flex-direction: row; justify-content: space-between; align-items: center; }
                .txa-stat-item.full { flex-direction: column; align-items: flex-start; }
                .txa-stat-value { font-size:11px; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                .txa-stat-item.full .txa-stat-value { text-align: left; max-width: 100%; }
                .txa-load-pct { font-size:22px; }
                .txa-load-speed { font-size:11px; }
            }

            /* REPLAY OVERLAY */
            .txa-replay-overlay {
                position:absolute; inset:0; background:rgba(0,0,0,0.85); z-index:250;
                display:none; align-items:center; justify-content:center; flex-direction:column; gap:20px;
                backdrop-filter:blur(15px);
            }
            .txa-replay-overlay.show { display:flex; }
            .txa-replay-btn {
                width:100px; height:100px; background:var(--txa-brand); border:none; border-radius:50%;
                display:flex; align-items:center; justify-content:center; cursor:pointer;
                transition:all 0.3s; box-shadow:0 10px 40px var(--txa-brand-glow);
            }
            .txa-replay-btn:hover { transform:scale(1.1); box-shadow:0 15px 50px var(--txa-brand-glow); }
            .txa-replay-btn i { font-size:40px; color:#fff; }
            .txa-replay-text { font-size:18px; font-weight:600; color:#fff; }

            /* FEEDBACK POPUP */
            .txa-feedback {
                position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.8);
                background:var(--txa-glass); backdrop-filter:blur(20px); border:1px solid var(--txa-border);
                padding:16px 28px; border-radius:16px; font-size:22px; font-weight:700; color:#fff;
                opacity:0; pointer-events:none; transition:all 0.4s cubic-bezier(0.16,1,0.3,1); z-index:1100;
                box-shadow:0 15px 40px rgba(0,0,0,0.5); display:flex; align-items:center; gap:12px;
            }
            .txa-feedback.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
            
            /* Smart Avoidance: Shift feedback up when Countdown is showing */
            .has-countdown .txa-feedback.show { transform:translate(-50%, -120%) scale(1); }
            @media (max-width: 768px) {
                .has-countdown .txa-feedback.show { transform:translate(-50%, -150%) scale(0.9); }
            }
            .txa-feedback.high-priority { z-index: 1000; background: var(--txa-brand); border-color: rgba(255,255,255,0.3); box-shadow: 0 20px 50px var(--txa-brand-glow); }
            .txa-feedback.high-priority span { font-size: 18px; font-weight: 800; }
            .txa-feedback i { font-size:26px; color:var(--txa-brand); }
            .txa-feedback.high-priority i { color: #fff; }

            /* SEEK BADGES */
            .txa-seek-badge {
                position:absolute; top:50%; width:90px; height:90px; background:rgba(0,0,0,0.6);
                border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
                backdrop-filter:blur(10px); border:1px solid var(--txa-border);
                opacity:0; pointer-events:none; transition:all 0.25s; z-index:100;
            }
            .txa-seek-badge.left { left:18%; transform:translate(-50%,-50%); }
            .txa-seek-badge.right { right:18%; transform:translate(50%,-50%); }
            .txa-seek-badge.show { opacity:1; }
            .txa-seek-badge i { font-size:22px; margin-bottom:6px; }
            .txa-seek-badge span { font-size:16px; font-weight:700; }

            /* CENTER PLAY */
            .txa-center-play {
                position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9);
                width:80px; height:80px; background:rgba(255,255,255,0.15); border-radius:50%;
                display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px);
                border:1px solid rgba(255,255,255,0.2); opacity:0; transition:all 0.3s; pointer-events:none;
                z-index: 150; cursor: pointer;
            }
            .txa-center-play.show { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
            .txa-center-play i { font-size:30px; }

            .txa-video { width:100%; height:100%; object-fit:contain; cursor: pointer; }

            /* TICKER NOTIFICATION - PREMIUM MARQUEE */
            .txa-ticker-container {
                position: absolute; bottom: 40px; left: 0; right: 0; pointer-events: none; z-index: 20000; display: none;
                height: 50px; overflow: hidden;
                mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
                -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
                transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .txa-ticker-container.active { display: block; }
            .active-ui .txa-ticker-container { bottom: 130px; } /* Push up when controls are visible */
            .has-countdown .txa-ticker-container { bottom: 180px; }

            .txa-ticker-text {
                position: absolute; top: 50%; transform: translateY(-50%);
                white-space: nowrap; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.9);
                text-shadow: 0 2px 10px rgba(0,0,0,0.8);
                font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
                left: 100%; will-change: transform, left;
                padding: 10px 24px; border-radius: 12px;
                display: flex; align-items: center; gap: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            }
            .txa-ticker-text img { height: 20px; vertical-align: middle; margin-right: 5px; }
            
            /* Ticker Variants - Random Backgrounds */
            .txa-ticker-text.style-1 {
                background: rgba(15, 23, 42, 0.8);
                backdrop-filter: blur(12px);
                border: 1px solid rgba(255, 255, 255, 0.08);
            }
            .txa-ticker-text.style-2 {
                background: linear-gradient(90deg, rgba(88, 28, 135, 0.85), rgba(124, 58, 237, 0.85));
                backdrop-filter: blur(12px);
                border: 1px solid rgba(139, 92, 246, 0.3);
                box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4);
            }
            .txa-ticker-text.style-3 {
                background: linear-gradient(90deg, rgba(6, 182, 212, 0.85), rgba(59, 130, 246, 0.85));
                backdrop-filter: blur(12px);
                border: 1px solid rgba(6, 182, 212, 0.3);
                box-shadow: 0 10px 40px rgba(6, 182, 212, 0.4);
            }
            .txa-ticker-text.style-4 {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(20px) saturate(180%);
                border: 1px solid rgba(255, 255, 255, 0.2);
                color: #fff;
            }

            .txa-ticker-text span.highlight { color: #facc15; font-weight: 800; }
            .txa-ticker-text span.brand { color: #a78bfa; font-weight: 900; text-transform:uppercase; letter-spacing:1px; }
            .txa-ticker-text i { font-size: 18px; margin-right: 4px; }
            
            .txa-ticker-text.run { animation: txamarquee var(--ticker-dur) linear forwards; }
            @keyframes txamarquee {
                from { left: 100%; transform: translate(0, -50%); }
                to { left: 0%; transform: translate(-100%, -50%); }
            }

            /* TXA PRO TOGGLES */
            /* TXA PRO TOGGLES - BADGE STYLE */
            .txa-btn-pro { width: 42px; padding: 0; border-radius: 50%; gap: 0; border: 1px solid transparent; position: relative; }
            .txa-btn-pro:hover { background: rgba(255,255,255,0.1); border-color: transparent; }
            .txa-btn-status { 
                position: absolute; top: -2px; right: -2px;
                font-size: 8px; font-weight: 900; 
                padding: 1px 3px; border-radius: 6px; 
                background: #475569; color: #cbd5e1; 
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                min-width: 18px; text-align: center;
                border: 2px solid rgba(0,0,0,0.9); /* Cutout effect for dark mode */
                transform: scale(0.9); z-index: 5;
            }
            .txa-btn-pro.active .txa-btn-status { 
                background: var(--txa-brand); color: #fff; 
                box-shadow: 0 0 8px var(--txa-brand-glow); 
                transform: scale(1);
                border-color: #000;
            }
            .txa-btn-pro.active i { color: var(--txa-brand-light); filter: drop-shadow(0 0 5px var(--txa-brand-glow)); }

            /* CONTROLS */
            .txa-controls {
                position:absolute; bottom:0; left:0; right:0; z-index:100; padding:20px;
                background:linear-gradient(transparent, rgba(0,0,0,0.95) 80%); pointer-events:none;
                opacity:0; transform:translateY(15px); transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                cursor: default;
            }
            .active-ui .txa-controls { opacity:1; transform:translateY(0); pointer-events:auto; }

            /* PROGRESS - THICKER */
            .txa-progress-wrap { position:relative; height:10px; width:100%; cursor:pointer; margin-bottom:20px; transition:all 0.15s; }
            .txa-progress-wrap:hover { height:16px; }
            .txa-progress-bg { position:absolute; inset:0; background:rgba(255,255,255,0.15); border-radius:6px; overflow:hidden; }
            .txa-progress-buf { position:absolute; height:100%; background:rgba(255,255,255,0.4); border-radius:6px; width:0; transition: width 0.4s ease; overflow:hidden; z-index: 2; box-shadow: 0 0 10px rgba(255,255,255,0.1); }
            .txa-progress-buf.loading { background:rgba(255,255,255,0.5); }
            .txa-progress-buf.loading::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation:txaBufShimmer 1.5s ease-in-out infinite; }
            @keyframes txaBufShimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
            .txa-progress-fill { position:absolute; height:100%; background:var(--txa-brand); border-radius:6px; width:0; box-shadow:0 0 15px var(--txa-brand-glow); z-index: 3; }
            
            /* SCRUBBER - REFINED */
            .txa-scrubber {
                position:absolute; right:-11px; top:50%; transform:translateY(-50%) scale(1);
                width:22px; height:22px; background:var(--txa-brand); border-radius:50%;
                box-shadow:0 0 15px var(--txa-brand-glow); transition:transform 0.15s;
                display:flex; align-items:center; justify-content:center;
                z-index: 5; border: 2px solid white; cursor: grab;
            }
            .txa-scrubber:active { cursor: grabbing; }
            .txa-scrubber::after {
                content:'T'; font-size:12px; font-weight:900; color:#fff;
                font-family:'Inter',sans-serif;
            }

            /* MARKERS - HIGHLIGHTED */
            .txa-marker-zone {
                position:absolute; top:0; height:100%; z-index:5; pointer-events:none;
            }
            .txa-marker-zone.intro {
                background: #facc15;
                opacity: 0.8;
                box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
            }
            .txa-marker-zone.outro {
                background: #f87171;
                opacity: 0.8;
                box-shadow: 0 0 15px rgba(248, 113, 113, 0.6);
            }
            .txa-marker-dot {
                position:absolute; top:50%; width:8px; height:8px; border-radius:50%;
                transform:translateY(-50%); z-index:5; box-shadow:0 0 10px currentColor; border: 1px solid #fff;
            }
            .txa-marker-dot.intro-start, .txa-marker-dot.intro-end { background:var(--txa-intro); color:var(--txa-intro); }
            .txa-marker-dot.outro-start, .txa-marker-dot.outro-end { background:var(--txa-outro); color:var(--txa-outro); }

            /* HOVER TIME TOOLTIP */
            .txa-hover-time {
                position:absolute; bottom:28px; transform:translateX(-50%); background:rgba(0,0,0,0.85);
                backdrop-filter: blur(8px);
                padding:4px 10px; border-radius:6px; font-size:13px; font-weight:800; pointer-events:none;
                color: #fff;
                opacity:0; transition:opacity 0.15s, bottom 0.2s ease; border:1px solid rgba(255,255,255,0.1); 
                z-index:20;
                box-shadow: 0 4px 12px rgba(0,0,0,0.5);
                white-space: nowrap;
            }
            .txa-progress-wrap:hover .txa-hover-time { opacity:1; }
            .txa-progress-wrap.dragging .txa-hover-time { opacity:1; }

            /* Dynamic positioning when preview thumbnail is visible */
            .txa-preview-thumb.has-sprite ~ .txa-hover-time {
                bottom: 142px; /* 40px (thumb bottom) + 90px (thumb height) + 12px (offset) */
                background: var(--txa-brand);
                border-color: var(--txa-brand-glow);
                box-shadow: 0 4px 15px var(--txa-brand-glow);
            }

            /* PREVIEW THUMBNAIL on progress bar hover */
            .txa-preview-thumb {
                position:absolute; bottom:40px; transform:translateX(-50%);
                width:160px; height:90px;
                background-color:#000; background-size:1600px 900px; background-repeat:no-repeat;
                border-radius:8px; border:2px solid rgba(139,92,246,0.6);
                box-shadow:0 8px 32px rgba(0,0,0,0.8), 0 0 16px rgba(139,92,246,0.3);
                pointer-events:none; opacity:0; transition:opacity 0.15s ease;
                z-index:11; overflow:hidden;
            }
            .txa-preview-thumb::after {
                content:''; position:absolute; inset:0;
                border-radius:6px;
                box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
                pointer-events:none;
            }
            .txa-preview-thumb.loading::before {
                content:''; position:absolute; top:50%; left:50%;
                width:20px; height:20px; margin:-10px 0 0 -10px;
                border:2px solid rgba(255,255,255,0.15); border-top-color:var(--txa-brand);
                border-radius:50%; animation:txaspin 0.6s linear infinite;
            }
            .txa-progress-wrap:hover .txa-preview-thumb.has-sprite { opacity:1; }
            .txa-progress-wrap.dragging .txa-preview-thumb.has-sprite { opacity:1; }

            /* TOOLBAR */
            .txa-toolbar { display:flex; align-items:center; justify-content:space-between; position:relative; z-index: 10; }
            .txa-group { display:flex; align-items:center; gap:6px; background:var(--txa-glass); backdrop-filter:blur(16px); padding:5px 10px; border-radius:100px; border:1px solid var(--txa-border); transition:all 0.3s; }
            
            .txa-btn { background:none; border:none; color:#fff; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; transition:all 0.2s; position:relative; }
            .txa-btn:hover { background:rgba(255,255,255,0.12); }
            .txa-btn i { font-size:17px; filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); }

            .txa-video { width:100%; height:100%; object-fit:contain; cursor: pointer; }
            .txa-wrapper { position:relative; width:100%; height:100%; outline:none; cursor: none; }
            .txa-wrapper.active-ui { cursor: auto; }
            
            /* v6.4.6 - Force Hide Controls (for Speed Preview) */
            .txa-wrapper.hide-controls .txa-controls, 
            .txa-wrapper.hide-controls .txa-top-info, 
            .txa-wrapper.hide-controls .txa-realtime-clock { opacity: 0 !important; transform: translateY(15px); pointer-events: none !important; }
            .txa-wrapper.hide-controls .txa-top-info { transform: translateY(-20px); }

            /* CC/SUB INDICATOR */
            .txa-btn.cc-active { color: var(--txa-brand); }
            .txa-btn.cc-active i { filter: drop-shadow(0 0 8px var(--txa-brand-glow)); }

            /* TOOLTIP PUSHED HIGHER - SMART POSITIONING */
            /* TOOLTIP PUSHED HIGHER - SMART POSITIONING */
            .txa-tooltip { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); background:var(--txa-glass-light); padding:8px 16px; border-radius:10px; font-size:12px; font-weight:700; white-space:nowrap; opacity:0; transition:all 0.2s; pointer-events:none; border:1px solid var(--txa-border); z-index:1000; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
            
            /* Right align tooltips for right-side buttons */
            .txa-right-group .txa-btn .txa-tooltip { left:auto; right:0; transform:translateX(0); }
            .txa-btn:hover .txa-tooltip { opacity:1; bottom:65px; }

            .txa-time { font-size:13px; font-weight:700; margin:0 14px; color:#cbd5e1; font-feature-settings:"tnum"; }

            /* VOLUME PREMIUM ENHANCED */
            .txa-vol-container { display:flex; align-items:center; position:relative; }
            .txa-vol-slider-wrap { 
                position:relative;
                width:0; overflow:hidden; transition:width 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
                display:flex; align-items:center; height: 42px;
            }
            .txa-vol-container:hover .txa-vol-slider-wrap { width:130px; }
            .txa-vol-slider { 
                width:115px; height:24px; margin-left:12px; appearance:none; -webkit-appearance:none; 
                background: linear-gradient(to right, var(--txa-brand) 0%, rgba(255,255,255,0.1) 0%);
                background-size: 100% 6px;
                background-position: center;
                background-repeat: no-repeat;
                border-radius:10px; cursor:pointer; outline:none;
                transition: background 0.2s;
            }
            .txa-vol-tooltip-p {
                position:absolute; bottom:75px; background:var(--txa-glass-light);
                backdrop-filter:blur(10px); color:#fff; padding:4px 10px; border-radius:8px;
                font-size:11px; font-weight:800; opacity:0; pointer-events:none;
                transition: opacity 0.2s, transform 0.2s; transform:translateX(-50%) translateY(5px);
                border:1px solid var(--txa-border); z-index:100; box-shadow:0 8px 20px rgba(0,0,0,0.4);
            }
            .txa-vol-tooltip-p.visible { opacity:1; transform:translateX(-50%) translateY(0); }

            .txa-vol-slider::-webkit-slider-thumb { 
                -webkit-appearance:none; appearance:none; width:18px; height:18px; 
                background:#fff; border-radius:50%; box-shadow:0 0 15px var(--txa-brand-glow); 
                border: 3px solid var(--txa-brand); cursor:pointer;
                transition: transform 0.1s;
            }
            .txa-vol-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
            .txa-vol-slider::-moz-range-thumb { 
                appearance:none; width:18px; height:18px; background:#fff; border-radius:50%; 
                box-shadow:0 0 15px var(--txa-brand-glow); border: 3px solid var(--txa-brand); 
                cursor:pointer; transition: transform 0.1s;
            }
            .txa-vol-slider::-moz-range-thumb:hover { transform: scale(1.2); }

            /* SETTINGS PANEL */
            .txa-panel {
                position:absolute; bottom:95px; right:20px; width:300px;
                max-height: 480px; height: auto; overflow-y:auto; /* Fixed height safe */
                background:var(--txa-glass); backdrop-filter:blur(30px); border:1px solid var(--txa-border);
                border-radius:20px; display:none; z-index:200;
                box-shadow:0 30px 60px rgba(0,0,0,0.7); animation:txafadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            }
            /* Custom Scrollbar for Panel */
            .txa-panel::-webkit-scrollbar { width:4px; }
            .txa-panel::-webkit-scrollbar-track { background:transparent; }
            .txa-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2); border-radius:4px; }
            .txa-panel::-webkit-scrollbar-thumb:hover { background:var(--txa-brand); }
            .txa-panel.active { display:block; }
            @keyframes txafadeIn { from { opacity:0; transform:translateY(10px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }

            .txa-panel-header { position: sticky; top: 0; background: #1a1a24; z-index: 20; padding:16px 20px; border-bottom:1px solid var(--txa-border); font-weight:700; font-size:15px; display:flex; align-items:center; gap:10px; }
            .txa-panel-header i { color:var(--txa-brand); }
            .txa-menu-item { padding:14px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:14px; color:#e2e8f0; transition:all 0.2s; }
            .txa-menu-item:hover { background:rgba(255,255,255,0.08); }
            .txa-menu-item.active { color:var(--txa-brand); font-weight:700; background: rgba(139,92,246,0.1); }
            .txa-menu-item span:last-child { opacity:0.6; font-size:12px; font-weight:600; }
            .txa-menu-item.active span { opacity:1; }

            .txa-menu-back { position: sticky; top: 0; background: #1a1a24; z-index: 20; padding:14px 20px; border-bottom:1px solid var(--txa-border); display:flex; align-items:center; gap:12px; cursor:pointer; font-weight:700; font-size:14px; }
            .txa-menu-back:hover { background:rgba(255,255,255,0.08); }

            /* CONTEXT MENU */
            .txa-ctx {
                position:absolute; min-width:240px; background:var(--txa-glass); backdrop-filter:blur(30px);
                border:1px solid var(--txa-border); border-radius:16px; padding:8px 0; display:none; z-index:300;
                box-shadow:0 20px 50px rgba(0,0,0,0.7); animation:txafadeIn 0.2s;
            }
            .txa-ctx.active { display:block; }
            .txa-ctx-header { padding:12px 18px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--txa-brand); font-weight:800; border-bottom:1px solid var(--txa-border); margin-bottom:4px; }
            .txa-ctx-item { padding:12px 18px; font-size:13px; color:#e2e8f0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:0.15s; }
            .txa-ctx-item:hover { background:rgba(139,92,246,0.15); color:#fff; }
            .txa-ctx-divider { height:1px; background:var(--txa-border); margin:6px 0; }
            .txa-ctx-footer { padding:10px 18px; font-size:11px; color:#64748b; text-align:center; font-weight:600; }

            /* SWITCH TOGGLE */
            .txa-switch { position:relative; display:inline-block; width:36px; height:20px; }
            .txa-switch input { opacity:0; width:0; height:0; }
            .txa-slider { position:absolute; cursor:pointer; inset:0; background:rgba(255,255,255,0.1); transition:.4s; border-radius:34px; border:1px solid var(--txa-border); }
            .txa-slider:before { position:absolute; content:""; height:14px; width:14px; left:2px; bottom:2px; background:white; transition:.4s; border-radius:50%; }
            .txa-switch input:checked + .txa-slider { background:var(--txa-brand); border-color:transparent; }
            .txa-switch input:checked + .txa-slider:before { transform:translateX(16px); }

            /* SUBTITLES - DRAGGABLE */
            .txa-captions { 
                position:absolute; bottom:110px; left:50%; transform:translateX(-50%); 
                text-align:center; width:auto; max-width:80%; z-index:90; transition: bottom 0.3s;
                cursor:grab; user-select:none; white-space: pre-wrap; word-break: break-word;
            }
            .txa-captions.dragging { cursor:grabbing; }
            .txa-cue { 
                display:inline-block; padding:8px 16px; border-radius:12px; 
                background:rgba(0,0,0,0.75); font-size:24px; font-weight:600; 
                text-shadow:0 2px 4px rgba(0,0,0,0.5); line-height: 1.4; 
                pointer-events:none;
            }
            
            /* Subtitle Style Presets */
            .txa-captions.size-mini .txa-cue { font-size:14px; padding:4px 8px; }
            .txa-captions.size-small .txa-cue { font-size:18px; padding:6px 12px; }
            .txa-captions.size-medium .txa-cue { font-size:24px; }
            .txa-captions.size-large .txa-cue { font-size:32px; padding:10px 20px; }
            .txa-captions.size-jumbo .txa-cue { font-size:48px; padding:14px 28px; }
            
            .txa-captions.bg-none .txa-cue { background:transparent; text-shadow:1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000; }
            .txa-captions.bg-dark .txa-cue { background:rgba(0,0,0,0.85); }
            .txa-captions.bg-light .txa-cue { background:rgba(255,255,255,0.2); }
            .txa-captions.bg-glass .txa-cue { background:rgba(15, 23, 42, 0.6); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); }
            
            .txa-captions.weight-bold .txa-cue { font-weight: 800; }
            .txa-captions.weight-normal .txa-cue { font-weight: 500; }

            /* Subtitle Stroke (Border) */
            .txa-captions.stroke-on .txa-cue { -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
            .txa-captions.stroke-white .txa-cue { -webkit-text-stroke-color: #ffffff !important; }
            .txa-captions.stroke-black .txa-cue { -webkit-text-stroke-color: #000000 !important; }
            .txa-captions.stroke-yellow .txa-cue { -webkit-text-stroke-color: #facc15 !important; }
            .txa-captions.stroke-red .txa-cue { -webkit-text-stroke-color: #f87171 !important; }
            .txa-captions.stroke-blue .txa-cue { -webkit-text-stroke-color: #3b82f6 !important; }

            /* Subtitle Color Classes */
            .txa-captions.color-white .txa-cue { color: #ffffff !important; }
            .txa-captions.color-yellow .txa-cue { color: #facc15 !important; }
            .txa-captions.color-orange .txa-cue { color: #fb923c !important; }
            .txa-captions.color-red .txa-cue { color: #f87171 !important; }
            .txa-captions.color-green .txa-cue { color: #4ade80 !important; }
            .txa-captions.color-cyan .txa-cue { color: #22d3ee !important; }
            .txa-captions.color-pink .txa-cue { color: #f472b6 !important; }
            .txa-captions.color-violet .txa-cue { color: #a78bfa !important; }

            .txa-stroke-ctrl { overflow:hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; max-height:0; opacity:0; }
            .txa-stroke-ctrl.active { max-height: 100px; opacity:1; padding-top:10px; }
            .txa-color-btn[data-substroke].active { transform:scale(1.2); border:2px solid #fff; }

            /* SKIP BUTTONS - PUSHED HIGHER */
            .txa-skip-btn { position:absolute; bottom:160px; right:30px; z-index:120; background:rgba(255,255,255,0.1); border:2px solid var(--txa-border); backdrop-filter:blur(15px); color:#fff; padding:12px 28px; border-radius:14px; font-size:13px; font-weight:800; cursor:pointer; display:none; transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
            .txa-skip-btn:hover { background:var(--txa-brand); border-color:transparent; transform:scale(1.05) translateX(-5px); }
            .txa-skip-btn.intro { border-color:var(--txa-intro); color:#fff; }
            .txa-skip-btn.intro:hover { background:var(--txa-intro); box-shadow: 0 10px 30px rgba(251,191,36,0.5); }
            .txa-skip-btn.outro { border-color:var(--txa-outro); color:#fff; }
            .txa-skip-btn.outro:hover { background:var(--txa-outro); box-shadow: 0 10px 30px rgba(239,68,68,0.5); }

            /* ZONES */
            .txa-zone { position:absolute; top:0; bottom:0; width:30%; z-index:30; cursor: pointer; }
            .txa-zone.left { left:0; }
            .txa-zone.right { right:0; }

            /* UTILS */
            .txa-hidden { display:none !important; }
            /* Grid for Sub Style */
            .txa-grid-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 20px 14px; }
            .txa-grid-item { 
                background:rgba(255,255,255,0.05); border:1px solid transparent; border-radius:8px; 
                padding:8px; font-size:12px; text-align:center; cursor:pointer; transition:all 0.2s; color:#cbd5e1;
            }
            .txa-grid-item:hover { background:rgba(255,255,255,0.1); }
            .txa-grid-item.active { background:rgba(139,92,246,0.15); border-color:var(--txa-brand); color:#fff; font-weight:700; }
            
            /* Color circles */
            .txa-color-opts { display:flex; gap:10px; padding:0 20px 20px; justify-content:center; }
            .txa-color-btn { width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:all 0.2s; position:relative; }
            .txa-color-btn.active { border-color:white; transform:scale(1.1); box-shadow:0 0 10px var(--txa-brand-glow); }
            .txa-color-btn[data-subcolor="white"] { background:#fff; }
            .txa-color-btn[data-subcolor="yellow"] { background:#facc15; }
            .txa-color-btn[data-subcolor="orange"] { background:#fb923c; }
            .txa-color-btn[data-subcolor="red"] { background:#f87171; }
            .txa-color-btn[data-subcolor="green"] { background:#4ade80; }
            .txa-color-btn[data-subcolor="cyan"] { background:#22d3ee; }
            .txa-color-btn[data-subcolor="pink"] { background:#f472b6; }
            .txa-color-btn[data-subcolor="violet"] { background:#a78bfa; }

            /* v5.8.0 - THEATER MODE */
            .txa-wrapper.theater-mode {
                z-index: 100;
                /* Transition for smooth expansion */
                transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            }
            /* body.theater-mode-active handled in watch.css */

            /* v5.8.0 - CINEMA AMBIENT LIGHT */
            .txa-ambient-canvas {
                position: absolute;
                top: -50px;
                left: -50px;
                right: -50px;
                bottom: -50px;
                pointer-events: none;
                z-index: -1;
                filter: blur(80px) saturate(2);
                opacity: 0;
                transition: opacity 0.8s ease;
            }
            .txa-wrapper.cinema-mode .txa-ambient-canvas {
                opacity: 0.6;
            }
            .txa-wrapper.cinema-mode {
                overflow: visible;
                --txa-intro: #fbbf24;
                --txa-outro: #8b5cf6;
            }

            .txa-switch { position: relative; display: inline-block; width: 34px; height: 18px; margin-left: auto; }
            .txa-switch input { opacity: 0; width: 0; height: 0; }
            .txa-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 34px; border: 1px solid var(--txa-border); }
            .txa-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
            input:checked + .txa-slider { background-color: var(--txa-brand); }
            input:checked + .txa-slider:before { transform: translateX(16px); }

            .txa-player-skin.cinema-active {
                background: transparent !important;
            }

            /* v5.8.0 - SPEED PREVIEW INDICATOR */
            .txa-speed-indicator {
                position: absolute;
                top: 30px;
                left: 50%;
                transform: translateX(-50%) translateY(-20px) scale(0.9);
                background: rgba(139, 92, 246, 0.9);
                backdrop-filter: blur(10px);
                padding: 12px 24px;
                border-radius: 100px;
                font-size: 16px;
                font-weight: 800;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 10px;
                z-index: 2147483647;
                opacity: 0;
                pointer-events: none;
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 92, 246, 0.4);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .txa-speed-indicator.show {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            .txa-speed-indicator i {
                animation: txapulse 0.5s infinite alternate;
            }
            @keyframes txapulse {
                from { transform: scale(1); }
                to { transform: scale(1.2); }
            }

            /* v5.8.0 - RESUME PLAYBACK OVERLAY */
            .txa-resume-overlay {
                position: absolute;
                bottom: 120px;
                left: 50%;
                transform: translateX(-50%) translateY(20px);
                background: var(--txa-glass);
                backdrop-filter: blur(20px);
                border: 1px solid var(--txa-border);
                border-radius: 20px;
                padding: 16px 24px;
                display: flex;
                align-items: center;
                gap: 16px;
                z-index: 210;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
            }
            .txa-resume-overlay.show {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateX(-50%) translateY(0);
            }
            .txa-resume-text {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .txa-resume-text span:first-child {
                font-size: 12px;
                color: #94a3b8;
                font-weight: 600;
            }
            .txa-resume-text span:last-child {
                font-size: 16px;
                font-weight: 800;
                color: #fff;
            }
            .txa-resume-btns {
                display: flex;
                gap: 10px;
            }
            .txa-settings-panel {
                width: 100vw;
                max-width: none;
                padding: 24px 20px 40px 20px;
                border-radius: 24px 24px 0 0;
                bottom: 0;
                left: 0;
                right: 0;
                top: auto;
                transform: translateY(105%);
                max-height: 80vh;
                background: rgba(15, 23, 42, 0.98);
                box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
                border: none;
                border-top: 1px solid rgba(255,255,255,0.1);
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .txa-settings-panel.active {
                transform: translateY(0);
            }

            .txa-settings-panel::before {
                content: '';
                position: absolute;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                width: 40px;
                height: 4px;
                background: rgba(255,255,255,0.2);
                border-radius: 10px;
            }
            .txa-resume-btn {
                padding: 10px 20px;
                border-radius: 12px;
                border: none;
                font-weight: 700;
                font-size: 13px;
                cursor: pointer;
                transition: all 0.2s;
            }
            .txa-resume-btn.primary {
                background: var(--txa-brand);
                color: #fff;
                box-shadow: 0 5px 20px var(--txa-brand-glow);
            }
            .txa-resume-btn.primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px var(--txa-brand-glow);
            }
            .txa-resume-btn.secondary {
                background: rgba(255, 255, 255, 0.1);
                color: #fff;
                border: 1px solid var(--txa-border);
            }
            .txa-resume-btn.secondary:hover {
                background: rgba(255, 255, 255, 0.15);
            }

            .txa-ripple {
                position: absolute;
                width: 100px;
                height: 100px;
                background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
                border-radius: 50%;
                transform: scale(0);
                pointer-events: none;
                z-index: 50;
                animation: txaripple 0.6s ease-out forwards;
            }
            @keyframes txaripple {
                0% { transform: scale(0); opacity: 1; }
                100% { transform: scale(4); opacity: 0; }
            }

            .txa-btn.mode-active {
                color: var(--txa-brand);
            }
            .txa-btn.mode-active i {
                filter: drop-shadow(0 0 8px var(--txa-brand-glow));
            }

            .txa-badge-quality {
                position: absolute;
                top: 4px;
                right: 4px;
                background: rgba(255,255,255,0.2);
                color: #fff;
                font-size: 8px;
                font-weight: 800;
                padding: 1px 3px;
                border-radius: 3px;
                line-height: 1;
                pointer-events: none;
                transition: all 0.3s;
                display: none;
                z-index: 2;
                font-family: sans-serif;
                box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            }

            /* --- 2X SPEED OVERLAY --- */
            .txa-speed-overlay {
                position: absolute;
                top: 15%;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(0, 0, 0, 0.6);
                color: #fff;
                padding: 8px 16px;
                border-radius: 20px;
                font-size: 13px;
                font-weight: 700;
                opacity: 0;
                transition: opacity 0.2s;
                pointer-events: none;
                z-index: 10000;
                display: flex;
                align-items: center;
                gap: 8px;
                backdrop-filter: blur(4px);
                border: 1px solid rgba(255,255,255,0.1);
            }
            .txa-speed-overlay.show { opacity: 1; }

            /* v6.2.0 - TOP INFO BAR */
            .txa-top-info {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                padding: 15px 25px;
                background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
                z-index: 10002;
                display: flex;
                justify-content: space-between;
                align-items: center;
                opacity: 0;
                transform: translateY(-20px);
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                pointer-events: none;
            }
            .active-ui .txa-top-info { opacity: 1; transform: translateY(0); }
            .txa-top-title { 
                font-weight: 700; 
                font-size: 15px; 
                color: #fff; 
                text-shadow: 0 2px 10px rgba(0,0,0,0.5);
                display: flex;
                align-items: center;
                gap: 8px;
                max-width: 80%;
            }

            /* Desktop Title Size Increase */
            @media (min-width: 1024px) {
                .txa-top-title { font-size: 20px; }
                .txa-top-title i { font-size: 18px; }
                .txa-top-logo { font-size: 24px; }
            }

            .txa-top-title i { color: #facc15; font-size: 14px; }
            
            .txa-top-logo { font-weight: 800; font-size: 18px; letter-spacing: 0.5px; }
            .txa-logo-t { color: #a855f7; }
            .txa-logo-phim { color: #fff; }
            .txa-logo-x { color: #ef4444; }

            /* Aspect Ratio & Flip Support */
            .txa-video.ratio-4-3 { object-fit: fill; aspect-ratio: 4/3; width: auto; height: 100%; margin: 0 auto; display: block; }
            .txa-video.ratio-16-9 { object-fit: contain; aspect-ratio: 16/9; }
            .txa-video.ratio-stretch { object-fit: fill; }
            .txa-video.flip-h { transform: scaleX(-1); }
            .txa-video.flip-v { transform: scaleY(-1); }
            .txa-video.flip-both { transform: scale(-1); }

            /* Hide simple logo in FS when controls are shown */
            .fullscreen-mode.active-ui .txa-brand-logo { opacity: 0 !important; visibility: hidden !important; }

            /* --- NEXT EPISODE COUNTDOWN OVERLAY --- */
            .txa-next-countdown {
                position: absolute; bottom: 120px; right: 30px; 
                background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
                border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 20px;
                display: flex; align-items: center; gap: 20px; z-index: 220;
                transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
                opacity: 0; transform: translateY(20px) scale(0.9); pointer-events: none;
                box-shadow: 0 15px 45px rgba(0,0,0,0.5), 0 0 20px rgba(139,92,246,0.2);
                max-width: 400px;
                padding: 25px;
            }
            .txa-next-countdown.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
            .txa-nc-thumb-wrap { position: relative; width: 140px; height: 79px; flex-shrink: 0; }
            .txa-nc-thumb { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; background: #000; border: 1px solid rgba(255,255,255,0.1); }
            .txa-nc-badge {
                position: absolute; top: -10px; left: -10px;
                background: var(--txa-brand); color: #fff;
                padding: 4px 10px; border-radius: 8px;
                font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 16px;
                box-shadow: 0 4px 15px var(--txa-brand-glow);
                border: 2px solid rgba(255,255,255,0.2);
                transform: rotate(-5deg);
                z-index: 2;
                text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            }
            .txa-nc-badge span { font-size: 10px; text-transform: uppercase; margin-right: 3px; opacity: 0.8; font-weight: 600; }
            .txa-nc-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
            .txa-nc-label { font-size: 12px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 1.2px; }
            .txa-nc-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
            .txa-nc-timer { font-size: 13px; font-weight: 600; color: var(--txa-brand-light); }
            .txa-nc-actions { display: flex; flex-direction: column; gap: 10px; }
            .txa-nc-next {
                background: var(--txa-brand); border: none; color: #fff; font-size: 12px; font-weight: 800;
                padding: 8px 16px; border-radius: 10px; cursor: pointer; transition: 0.3s;
                text-align: center; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
            }
            .txa-nc-next:hover { transform: translateY(-2px); filter: brightness(1.1); }
            .txa-nc-cancel { 
                background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 11px; font-weight: 700;
                padding: 6px 12px; border-radius: 10px; cursor: pointer; transition: 0.3s;
                opacity: 0.7;
            }
            .txa-nc-cancel:hover { background: rgba(255,255,255,0.15); opacity: 1; }
            
            .txa-desktop-only { display: none; }
            @media (min-width: 1024px) { .txa-desktop-only { display: block; } }

            @media (max-width: 768px) {
                .txa-next-countdown { left: 15px; right: 15px; bottom: 85px; max-width: none; padding: 15px; gap: 12px; }
                .txa-nc-thumb-wrap { width: 100px; height: 56px; }
                .txa-nc-badge { font-size: 13px; padding: 3px 8px; top: -8px; left: -8px; }

                /* Mobile Controls Minimalist */
                .txa-controls { padding: 8px 15px; }
                .txa-toolbar { display: flex; align-items: center; justify-content: space-between; }
                .txa-group { padding: 3px 6px; gap: 4px; background: rgba(0,0,0,0.4); }
                .txa-btn { width: 34px; height: 34px; }
                .txa-btn i { font-size: 14px; }
                .txa-time { font-size: 10px; margin: 0 4px; }
                
                /* Hide secondary tools on mobile vertical */
                #txa-theater, #txa-cinema, #txa-pip, .txa-vol-container, .txa-watermark { display: none; }
                
                /* Keep PRO buttons small & showing status */
                .txa-btn-pro { width: 32px; height: 32px; }
                .txa-btn-status { font-size: 7px; min-width: 14px; top: -1px; right: -1px; border-width: 1px; transform: scale(0.85); visibility: visible !important; opacity: 1 !important; }

                /* Mobile Controls Minimalist */
                .txa-progress-wrap { height: 14px; margin-bottom: 25px; }
                .txa-progress-wrap::before {
                    content: ''; position: absolute; top: -20px; bottom: -20px; left: 0; right: 0;
                }

                /* Fullscreen Landscape Adjustments */
                .fullscreen-mode .txa-controls { padding: 15px 40px 30px; }
                .fullscreen-mode .txa-toolbar { gap: 15px; }

                /* AUTOMATIC MINIMALISM BASED ON WIDTH */
                @container player (max-width: 500px) {
                    .txa-time { display: none !important; }
                    #txa-cc, #txa-pip, #txa-auto-skip, #txa-auto-next { display: none !important; }
                }

                /* Ticker - Only show in fullscreen on mobile as requested */
                .txa-ticker-container { display: none !important; }
                .fullscreen-mode .txa-ticker-container.active { display: block !important; bottom: 60px; }
                .fullscreen-mode.active-ui .txa-ticker-container { bottom: 120px; }

                /* EXTREME MINIMALISM (< 480px) */
                @media (max-width: 480px) {
                    #txa-auto-skip, #txa-auto-next, #txa-cc, .txa-time { display: none !important; }
                    .txa-group { background: transparent; padding: 0; }
                    .txa-controls { padding: 5px 10px; }
                    .txa-toolbar { height: 40px; }
                    .txa-btn { width: 42px; height: 42px; }
                    .txa-btn i { font-size: 18px; }
                    .txa-top-info { padding: 10px 15px; }
                    .txa-top-logo { display: none; }
                }

                /* TABLET ADAPTATION (768px - 1024px) */
                @media (min-width: 769px) and (max-width: 1024px) {
                    .txa-toolbar { gap: 5px; }
                    #txa-theater, #txa-cinema { display: none; }
                    .txa-btn-status { font-size: 8px; padding: 1px 3px; }
                }
            }
            .txa-ticker-text { font-size: 13px; padding: 8px 18px; }

            /* v6.4.0 - Intermediate Responsive (Tablet/Resized Desktop) */
            @media (max-width: 1024px) {
                .txa-vol-container:hover .txa-vol-slider-wrap { width: 100px; }
                .txa-vol-slider { width: 85px; }
                .txa-top-title { font-size: 16px; }
            }

            /* Hide some buttons on very narrow players even on desk */
            @media (max-width: 650px) {
                #txa-theater, #txa-cinema, #txa-pip, .txa-vol-container { display: none !important; }
                .txa-group { padding: 4px 8px; }
                .txa-btn { width: 38px; height: 38px; }
            }

            /* Ultra small devices */
            @media (max-width: 375px) {
                 .txa-time, #txa-prev, #txa-next { display: none !important; }
                 .txa-nc-title { font-size: 14px; }
                 .txa-top-info { padding: 8px 12px; }
                 .txa-top-logo { font-size: 16px; }
                 .txa-brand-logo { display: none !important; }
                 .txa-realtime-clock { display: none !important; }
            }

            /* Mobile Landscape Enhancements */
            @media (max-width: 768px) and (orientation: landscape) {
                .txa-controls { padding: 6px 12px; }
                .txa-toolbar { height: 35px; }
                .txa-btn { width: 32px; height: 32px; }
                .txa-btn i { font-size: 12px; }
                .txa-time { font-size: 9px; margin: 0 2px; }
                .txa-progress-wrap { height: 12px; margin-bottom: 20px; }
            }

            /* Touch Device Optimizations */
            @media (hover: none) and (pointer: coarse) {
                .txa-btn:hover { background: none; }
                .txa-btn:active { background: rgba(255,255,255,0.15); transform: scale(0.95); }
                .txa-tooltip { display: none !important; }
                
                /* Larger touch targets for mobile */
                .txa-btn { min-width: 44px; min-height: 44px; }
                .txa-vol-slider { height: 28px; }
                .txa-vol-slider::-webkit-slider-thumb { width: 20px; height: 20px; }
                .txa-vol-slider::-moz-range-thumb { width: 20px; height: 20px; }
            }

            /* High DPI Mobile Displays */
            @media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
                .txa-btn i { filter: drop-shadow(0 0 3px rgba(0,0,0,0.3)); }
                .txa-progress-wrap { height: 16px; }
                .txa-scrubber { width: 16px; height: 16px; }
            }

            .txa-menu-item.disabled { opacity: 0.5; pointer-events: auto; cursor: not-allowed; }
            .txa-menu-item.disabled:hover { background: transparent; }
        `;
        document.head.appendChild(s);
    }

    renderUI() {
        this.container.innerHTML = `
        <div class="txa-wrapper active-ui" id="txa-wrapper" tabindex="0">
            <!-- TOP INFO BAR -->
            <div class="txa-top-info" id="txa-top-info">
                <div class="txa-top-title" id="txa-top-title">
                    <i class="fas fa-play-circle"></i>
                    <span>TPhimX Media</span>
                </div>
                <div class="txa-top-logo">
                    <span class="txa-logo-t">T</span><span class="txa-logo-phim">PHIM</span><span class="txa-logo-x">X</span>
                </div>
            </div>

            <!-- BRANDING -->
            <div class="txa-brand-logo">
                <div class="txa-logo-text">
                    <span class="txa-logo-t">T</span><span class="txa-logo-phimx">PHIMX</span>
                </div>
            </div>

            <!-- REAL-TIME CLOCK v6.4.0 -->
            <div id="txa-clock" class="txa-realtime-clock">
                <i class="fas fa-clock"></i>
                <span id="txa-clock-text">00:00:00</span>
            </div>
            <div class="txa-watermark"><span>TPHIMX</span> Player-${TXA_VERSION}</div>

            <video class="txa-video" id="txa-video" playsinline poster="${this.options.posterUrl || ''}"></video>
            
            <div id="txa-loader" class="txa-loader">
                <div class="txa-loader-content">
                    <div class="txa-spinner"></div>
                    <div class="txa-load-pct-row">
                        <div class="txa-load-pct" id="txa-load-pct">0%</div>
                        <div class="txa-load-speed" id="txa-load-speed">-- KB/s</div>
                    </div>
                    <div class="txa-load-bar"><div class="txa-load-bar-fill" id="txa-load-bar-fill"></div></div>
                    <div class="txa-load-text" id="txa-load-text">Vui lòng chờ trong giây lát...</div>
                    <div class="txa-load-info" id="txa-load-info"></div>
                </div>
            </div>

            <!-- STATS PANEL -->
            <div class="txa-stats-panel" id="txa-stats-panel">
                <div class="txa-stats-header">
                    <div class="txa-stats-title"><i class="fas fa-chart-bar"></i> STREAM STATS</div>
                    <button class="txa-stats-close" id="txa-stats-close"><i class="fas fa-times"></i></button>
                </div>
                <div class="txa-stats-grid" id="txa-stats-grid"></div>
            </div>
            
            <div id="txa-replay" class="txa-replay-overlay">
                <button class="txa-replay-btn" id="txa-replay-btn"><i class="fas fa-redo"></i></button>
                <span class="txa-replay-text">Phát lại</span>
            </div>
            
            <div id="txa-feedback" class="txa-feedback"><i class="fas fa-volume-up"></i><span>50%</span></div>
            
            <div id="txa-badge-l" class="txa-seek-badge left"><i class="fas fa-angle-double-left"></i><span>-10s</span></div>
            <div id="txa-badge-r" class="txa-seek-badge right"><i class="fas fa-angle-double-right"></i><span>+10s</span></div>
            
            <div id="txa-center-play" class="txa-center-play"><i class="fas fa-play"></i></div>
            
            <div id="txa-captions" class="txa-captions"></div>

            <button id="txa-skip-intro" class="txa-skip-btn intro"><i class="fas fa-forward"></i> SKIP INTRO</button>
            <button id="txa-skip-outro" class="txa-skip-btn outro" style="bottom:230px;"><i class="fas fa-step-forward"></i> SKIP OUTRO</button>

            <canvas id="txa-ambient" class="txa-ambient-canvas"></canvas>
            
            <div id="txa-speed-indicator" class="txa-speed-indicator">
                <i class="fas fa-forward"></i>
                <span>2x Tua nhanh</span>
            </div>
            
            <div id="txa-resume" class="txa-resume-overlay">
                <div class="txa-resume-text">
                    <span>Tiếp tục xem?</span>
                    <span id="txa-resume-time">00:00</span>
                </div>
                <div class="txa-resume-btns">
                    <button class="txa-resume-btn primary" id="txa-resume-yes">
                        <i class="fas fa-play" style="margin-right:6px;"></i>Tiếp tục
                    </button>
                    <button class="txa-resume-btn secondary" id="txa-resume-no">Xem từ đầu</button>
                </div>
            </div>

            <!-- NEXT COUNTDOWN -->
            <div id="txa-next-countdown" class="txa-next-countdown">
                <div class="txa-nc-thumb-wrap">
                    <div class="txa-nc-badge" id="txa-nc-badge"><span>Tập</span>--</div>
                    <img src="${this.options.movieThumb || ''}" id="txa-nc-thumb" class="txa-nc-thumb">
                </div>
                <div class="txa-nc-info">
                    <span class="txa-nc-label">Tập Tiếp Theo</span>
                    <span class="txa-nc-title" id="txa-nc-title">Đang chuẩn bị...</span>
                    <span class="txa-nc-timer" id="txa-nc-timer">Bắt đầu sau 05s</span>
                </div>
                <div class="txa-nc-actions">
                    <button class="txa-nc-next txa-desktop-only" id="txa-nc-next">Chuyển Ngay</button>
                    <button class="txa-nc-cancel" id="txa-nc-cancel">Hủy</button>
                </div>
            </div>

            <!-- TICKER -->
            <div id="txa-ticker" class="txa-ticker-container">
                <div id="txa-ticker-text" class="txa-ticker-text"></div>
            </div>

            <div class="txa-controls">
                <div class="txa-progress-wrap" id="txa-progress">
                    <div class="txa-progress-bg"></div>
                    <div class="txa-progress-buf" id="txa-buffer"></div>
                    <div class="txa-progress-fill" id="txa-played"><div class="txa-scrubber"></div></div>
                    <div id="txa-markers" style="position:absolute; inset:0; z-index:20; pointer-events:none;"></div>
                    <div class="txa-preview-thumb" id="txa-preview-thumb"></div>
                    <div class="txa-hover-time" id="txa-hover-time">0:00</div>
                </div>

                <div class="txa-toolbar">
                    <div style="display:flex;align-items:center;gap:10px;">
                        <div class="txa-group">
                            <button class="txa-btn txa-btn-nav" id="txa-prev" style="${!this.options.prevEpisodeUrl ? 'display:none;' : ''}"><i class="fas fa-step-backward"></i><div class="txa-tooltip">Tập trước</div></button>
                            <button class="txa-btn" id="txa-play"><i class="fas fa-play"></i><div class="txa-tooltip">Play (k)</div></button>
                            <button class="txa-btn txa-btn-nav" id="txa-next" style="${!this.options.nextEpisodeUrl ? 'display:none;' : ''}"><i class="fas fa-step-forward"></i><div class="txa-tooltip">Tập sau</div></button>
                            <div class="txa-vol-container">
                                <button class="txa-btn" id="txa-mute"><i class="fas fa-volume-up"></i><div class="txa-tooltip">Mute (m)</div></button>
                                <div class="txa-vol-tooltip-p" id="txa-vol-tooltip">100%</div>
                                <div class="txa-vol-slider-wrap">
                                    <input type="range" class="txa-vol-slider" id="txa-vol" min="0" max="1" step="0.02" value="1">
                                </div>
                            </div>
                        </div>
                        <div class="txa-time" id="txa-time">0:00 / 0:00</div>
                    </div>

                    <div style="display:flex;align-items:center;gap:10px;">
                        <div class="txa-group txa-right-group">
                            <button class="txa-btn txa-btn-pro" id="txa-auto-skip">
                                <i class="fas fa-forward"></i><span class="txa-btn-status">OFF</span>
                                <div class="txa-tooltip">Tự động bỏ qua giới thiệu (Pro)</div>
                            </button>
                            <button class="txa-btn txa-btn-pro" id="txa-auto-next">
                                <i class="fas fa-step-forward"></i><span class="txa-btn-status">OFF</span>
                                <div class="txa-tooltip">Tự động chuyển tập (Pro)</div>
                            </button>
                            <div style="width:1px;height:20px;background:rgba(255,255,255,0.1);margin:0 4px;"></div>
                            <button class="txa-btn" id="txa-cc" style="${!this.options.hasSubtitles ? 'display:none;' : ''}"><i class="far fa-closed-captioning"></i><div class="txa-tooltip">Subtitles (c)</div></button>
                            <button class="txa-btn" id="txa-cinema"><i class="fas fa-lightbulb"></i><div class="txa-tooltip">Ánh sáng (a)</div></button>
                            <button class="txa-btn" id="txa-theater"><i class="fas fa-tv"></i><div class="txa-tooltip">Theater (t)</div></button>
                            <button class="txa-btn" id="txa-settings">
                                <i class="fas fa-cog"></i>
                                <span id="txa-quality-badge" class="txa-badge-quality"></span>
                                <div class="txa-tooltip">Settings</div>
                            </button>
                            <button class="txa-btn" id="txa-pip"><i class="fas fa-clone"></i><div class="txa-tooltip">Mini Player (p)</div></button>
                            <button class="txa-btn" id="txa-fs"><i class="fas fa-expand"></i><div class="txa-tooltip">Fullscreen (f)</div></button>
                        </div>
                    </div>
                </div>

                <div class="txa-panel" id="txa-panel">
                    <div id="txa-view-main">
                        <div class="txa-panel-header"><i class="fas fa-sliders-h"></i> Settings</div>
                        <div class="txa-menu-item" data-goto="speed"><span>Playback Speed</span><span id="txa-lbl-speed">1x</span></div>
                        <div class="txa-menu-item" data-goto="ratio"><span>Aspect Ratio</span><span id="txa-lbl-ratio">Default</span></div>
                        <div class="txa-menu-item" data-goto="flip"><span>Video Flip</span><span id="txa-lbl-flip">Normal</span></div>
                        <div class="txa-menu-item" data-goto="subs" id="txa-item-subs" style="${!this.options.hasSubtitles ? 'display:none;' : ''}"><span>Subtitles</span><span id="txa-lbl-subs">Off</span></div>
                        <div class="txa-menu-item" data-goto="quality" id="txa-item-quality" style="display:none;"><span>Quality</span><span id="txa-lbl-quality">Auto</span></div>
                        <div class="txa-menu-item" style="border-top:1px solid var(--txa-border);margin-top:8px;padding-top:10px;justify-content:space-between;">
                            <span style="display:flex;align-items:center;gap:10px;"><i class="fas fa-clock" style="opacity:0.7;"></i> Hiện đồng hồ</span>
                            <label class="txa-switch"><input type="checkbox" id="txa-clock-toggle"><span class="txa-slider"></span></label>
                        </div>
                        <div class="txa-menu-item" data-goto="clock" id="txa-item-clock" style="display: none;"><span>Định dạng giờ</span><span id="txa-lbl-clock">H:i:s</span></div>
                    </div>
                    <div id="txa-view-clock" class="txa-hidden">
                        <div class="txa-menu-back" data-back="main"><i class="fas fa-chevron-left"></i> Kiểu hiển thị đồng hồ</div>
                        
                        <div style="padding:14px 20px 8px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;">Chỉ thời gian</div>
                        <div class="txa-menu-item active" data-clock="H:i:s"><span>Giờ : Phút : Giây</span><span style="font-size:10px;opacity:0.5;">H:i:s</span></div>
                        <div class="txa-menu-item" data-clock="H:i"><span>Giờ : Phút</span><span style="font-size:10px;opacity:0.5;">H:i</span></div>
                        
                        <div style="padding:10px 20px 8px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--txa-border);margin-top:4px;padding-top:14px;">Thời gian & Ngày</div>
                        <div class="txa-menu-item" data-clock="H:i:s d/M/YYYY"><span>Đầy đủ</span><span style="font-size:10px;opacity:0.5;">H:i:s d/M/YYYY</span></div>
                        <div class="txa-menu-item" data-clock="H:i d/M/YYYY"><span>Gọn</span><span style="font-size:10px;opacity:0.5;">H:i d/M/YYYY</span></div>
                        <div class="txa-menu-item" data-clock="H:i:s d/M"><span>Giờ & Ngày/Tháng</span><span style="font-size:10px;opacity:0.5;">H:i:s d/M</span></div>
                        
                        <div style="padding:10px 20px 8px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--txa-border);margin-top:4px;padding-top:14px;">Chỉ ngày tháng</div>
                        <div class="txa-menu-item" data-clock="d/M/YYYY"><span>Ngày / Tháng / Năm</span><span style="font-size:10px;opacity:0.5;">d/M/Y</span></div>
                        <div class="txa-menu-item" data-clock="H:i:s - YYYY/M/d"><span>Chuẩn ISO</span><span style="font-size:10px;opacity:0.5;">YYYY/M/d</span></div>
                    </div>

                    <div id="txa-view-ratio" class="txa-hidden">
                        <div class="txa-menu-back" data-back="main"><i class="fas fa-chevron-left"></i> Aspect Ratio</div>
                        <div class="txa-menu-item active" data-ratio="default">Default</div>
                        <div class="txa-menu-item" data-ratio="4-3">4:3</div>
                        <div class="txa-menu-item" data-ratio="16-9">16:9</div>
                        <div class="txa-menu-item" data-ratio="stretch">Stretch</div>
                    </div>
                    <div id="txa-view-flip" class="txa-hidden">
                        <div class="txa-menu-back" data-back="main"><i class="fas fa-chevron-left"></i> Video Flip</div>
                        <div class="txa-menu-item active" data-flip="normal">Normal</div>
                        <div class="txa-menu-item" data-flip="h">Horizontal</div>
                        <div class="txa-menu-item" data-flip="v">Vertical</div>
                        <div class="txa-menu-item" data-flip="both">Both</div>
                    </div>
                    <div id="txa-view-speed" class="txa-hidden">
                        <div class="txa-menu-back" data-back="main"><i class="fas fa-chevron-left"></i> Speed</div>
                        <div class="txa-menu-item" data-speed="0.25">0.25x</div>
                        <div class="txa-menu-item" data-speed="0.5">0.5x</div>
                        <div class="txa-menu-item" data-speed="0.75">0.75x</div>
                        <div class="txa-menu-item active" data-speed="1">Normal</div>
                        <div class="txa-menu-item" data-speed="1.25">1.25x</div>
                        <div class="txa-menu-item" data-speed="1.5">1.5x</div>
                        <div class="txa-menu-item" data-speed="1.75">1.75x</div>
                        <div class="txa-menu-item" data-speed="2">2x</div>
                        <div class="txa-menu-item" data-speed="2.5">2.5x</div>
                        <div class="txa-menu-item" data-speed="3">3x</div>
                    </div>
                    <div id="txa-view-subs" class="txa-hidden">
                        <div class="txa-menu-back" data-back="main"><i class="fas fa-chevron-left"></i> Subtitles</div>
                        <div id="txa-list-subs"></div>
                        <div class="txa-menu-item" data-goto="substyle" id="txa-item-substyle" style="border-top:1px solid var(--txa-border);margin-top:8px;"><span><i class="fas fa-paint-brush" style="margin-right:8px;opacity:0.7;"></i>Thiết kế phụ đề</span><i class="fas fa-chevron-right" style="font-size:12px;opacity:0.5;"></i></div>
                    </div>
                    <div id="txa-view-substyle" class="txa-hidden">
                        <div class="txa-menu-back" data-back="subs"><i class="fas fa-chevron-left"></i> Thiết kế phụ đề</div>
                        
                        <div style="padding:14px 20px 8px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;">Cỡ chữ</div>
                        <div class="txa-grid-opts">
                            <div class="txa-grid-item" data-subsize="mini">Tí hon</div>
                            <div class="txa-grid-item" data-subsize="small">Nhỏ</div>
                            <div class="txa-grid-item active" data-subsize="medium">Vừa</div>
                            <div class="txa-grid-item" data-subsize="large">Lớn</div>
                            <div class="txa-grid-item" data-subsize="jumbo" style="grid-column:span 2">Khổng lồ</div>
                        </div>

                        <div style="padding:0 20px 8px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--txa-border);margin-top:4px;padding-top:14px;">Độ đậm</div>
                        <div class="txa-grid-opts">
                            <div class="txa-grid-item active" data-subweight="normal">Thường</div>
                            <div class="txa-grid-item" data-subweight="bold">Đậm</div>
                        </div>

                        <div style="padding:0 20px 8px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--txa-border);margin-top:4px;padding-top:14px;">Nền phụ đề</div>
                        <div class="txa-grid-opts" style="grid-template-columns: 1fr 1fr 1fr;">
                            <div class="txa-grid-item" data-subbg="none">Không</div>
                            <div class="txa-grid-item active" data-subbg="default">Chuẩn</div>
                            <div class="txa-grid-item" data-subbg="glass">Kính</div>
                            <div class="txa-grid-item" data-subbg="dark">Tối</div>
                            <div class="txa-grid-item" data-subbg="light">Sáng</div>
                        </div>

                        <div style="padding:0 20px 10px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--txa-border);margin-top:4px;padding-top:14px;">Màu chữ</div>
                        <div class="txa-color-opts" style="flex-wrap:wrap; gap:8px 12px;">
                            <div class="txa-color-btn active" data-subcolor="white" title="Trắng"></div>
                            <div class="txa-color-btn" data-subcolor="yellow" style="background:#facc15" title="Vàng"></div>
                            <div class="txa-color-btn" data-subcolor="orange" style="background:#fb923c" title="Cam"></div>
                            <div class="txa-color-btn" data-subcolor="red" style="background:#f87171" title="Đỏ"></div>
                            <div class="txa-color-btn" data-subcolor="green" style="background:#4ade80" title="Lục"></div>
                            <div class="txa-color-btn" data-subcolor="cyan" style="background:#22d3ee" title="Lam"></div>
                            <div class="txa-color-btn" data-subcolor="pink" style="background:#f472b6" title="Hồng"></div>
                            <div class="txa-color-btn" data-subcolor="violet" style="background:#a78bfa" title="Tím"></div>
                        </div>

                        <div style="padding:14px 20px 8px;font-size:11px;color:var(--txa-brand);font-weight:800;text-transform:uppercase;letter-spacing:1px;border-top:1px solid var(--txa-border);margin-top:4px;padding-top:14px;display:flex;justify-content:space-between;align-items:center;">
                            Viền chữ
                            <label class="txa-switch"><input type="checkbox" id="txa-substroke-toggle"><span class="txa-slider"></span></label>
                        </div>
                        
                        <div class="txa-stroke-ctrl" id="txa-stroke-panel">
                            <div style="padding:0 20px 8px;font-size:11px;color:#94a3b8;font-weight:800;text-transform:uppercase;letter-spacing:1px;">Màu viền</div>
                            <div class="txa-color-opts" style="flex-wrap:wrap; gap:8px 12px; padding-bottom:15px;">
                                <div class="txa-color-btn active" data-substroke="black" style="background:#000; border:1px solid rgba(255,255,255,0.2);" title="Đen"></div>
                                <div class="txa-color-btn" data-substroke="white" style="background:#fff" title="Trắng"></div>
                                <div class="txa-color-btn" data-substroke="yellow" style="background:#facc15" title="Vàng"></div>
                                <div class="txa-color-btn" data-substroke="red" style="background:#f87171" title="Đỏ"></div>
                                <div class="txa-color-btn" data-substroke="blue" style="background:#3b82f6" title="Xanh"></div>
                            </div>
                        </div>
                    </div>
                    <div id="txa-view-quality" class="txa-hidden">
                        <div class="txa-menu-back" data-back="main"><i class="fas fa-chevron-left"></i> Quality</div>
                        <div id="txa-list-quality"></div>
                    </div>
                </div>
            </div>

            <div id="txa-tamper" class="txa-loader txa-hidden" style="background:rgba(0,0,0,0.95); z-index:2147483647; backdrop-filter:blur(20px); pointer-events:all;">
                <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:40px;">
                    <div style="width:80px;height:80px;background:var(--txa-brand);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:30px;box-shadow:0 0 30px var(--txa-brand-glow);">
                        <i class="fas fa-user-shield" style="font-size:35px;color:#fff;"></i>
                    </div>
                    <h2 style="margin:0 0 15px;font-size:24px;background:linear-gradient(to right, #fff, var(--txa-brand));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:900;">QUYỀN TRUY CẬP BỊ CHẶN</h2>
                    <p style="opacity:0.7;max-width:450px;margin:0 0 30px;line-height:1.6;font-size:15px;">Chúng tôi phát hiện bạn đang cố gắng can thiệp vào mã nguồn của trình phát. Để bảo vệ bản quyền và tài nguyên hệ thống, trình phát đã bị khóa.</p>
                    <div style="display:flex;gap:15px;">
                        <button onclick="location.reload()" style="background:var(--txa-brand);border:none;color:#fff;padding:14px 35px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 10px 20px var(--txa-brand-glow);transition:all 0.3s;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
                            TẢI LẠI TRANG ĐỂ LÀM MỚI
                        </button>
                    </div>
                    <div style="margin-top:40px;font-size:11px;opacity:0.4;letter-spacing:1px;">TXA SECURITY PROTOCOL ACTIVE</div>
                </div>
            </div>

            <div id="txa-ctx" class="txa-ctx">
                <div class="txa-ctx-header">TXAPlayer Controls</div>
                <div class="txa-ctx-item" id="txa-ctx-snap"><span>Chụp màn hình (4K)</span><i class="fas fa-camera"></i></div>
                <div class="txa-ctx-item" id="txa-ctx-url"><span>Copy Video URL</span><i class="fas fa-link"></i></div>
                <div class="txa-ctx-item" id="txa-ctx-loop"><span>Lặp lại (Loop)</span><span id="txa-loop-stat">Off</span></div>
                <div class="txa-ctx-item" id="txa-ctx-stats"><span>Thống kê (Stats)</span><i class="fas fa-chart-line"></i></div>
                <div class="txa-ctx-divider"></div>
                <div class="txa-ctx-item" id="txa-ctx-sc"><span>Bảng phím tắt</span><i class="fas fa-keyboard"></i></div>
                <div class="txa-ctx-footer">${TXA_VERSION} Platinum</div>
            </div>

            <div class="txa-zone left" id="txa-zone-l"></div>
            <div class="txa-zone right" id="txa-zone-r"></div>
        </div>`;
        this.wrapper = this.container.querySelector('#txa-wrapper');
        this.video = this.container.querySelector('#txa-video');
    }

    async switchEpisode(newOptions = {}) {
        // console.log('[TXAPlayer] Switching episode...', newOptions);

        // Save fullscreen state before switching
        const wasFullscreen = !!document.fullscreenElement;
        // Store reference to wrapper, not fullscreenElement (which will be null after video destroy)
        const wrapperToFS = this.wrapper;

        // 0. Save current progress
        this.saveWatchProgress(true);

        // Feedback immediately
        if (newOptions.isAutoNext) {
            this.showToast('⏭️ Tự động chuyển tập...');
        } else {
            this.showToast('🚀 Đang chuyển tập mới...');
        }

        // 1. Cleanup current media
        if (this._bufferInterval) { clearInterval(this._bufferInterval); this._bufferInterval = null; }
        if (this.dashPlayer) {
            try { this.dashPlayer.destroy(); } catch (e) { }
            this.dashPlayer = null;
        }
        if (this.hls) {
            try { this.hls.destroy(); } catch (e) { }
            this.hls = null;
        }
        if (this._previewHls) {
            try { this._previewHls.destroy(); } catch (e) { }
            this._previewHls = null;
        }

        // Reset video state
        if (this.video) {
            this.video.pause();
            this.video.src = "";
            this.video.load();

            // Clear text tracks (subtitles)
            while (this.video.firstChild) {
                this.video.removeChild(this.video.firstChild);
            }
        }

        // 2. Update Options
        this.options = { ...this.options, ...newOptions };

        // Clear runtime state
        this.currentSubCues = [];
        this.activeSubIdx = -1;
        this.seekAccumulator = 0;
        this._isAutoNextTriggered = false;
        this._fixedTickerShown = false; // Reset fixed ticker flag
        this._endingTickerShown = false; // Reset ending ticker flag
        if (this.wrapper) this.wrapper.classList.remove('has-countdown');
        this.tickerCount = 0; // Reset ticker count for new episode
        this._isTickerRunning = false;
        this.tickerNextTime = 40; // Wait 40s for new episode ticker
        this.resumeShown = false; // Reset resume flag for new episode

        // Clear any pending auto-next countdown
        if (this._autoNextCountdownInterval) {
            clearInterval(this._autoNextCountdownInterval);
            this._autoNextCountdownInterval = null;
        }

        // Reset markers on UI immediately
        this.renderMarkers();

        // Reset preview thumbnail state for new episode
        this._previewSpriteUrl = null;
        this._previewSpriteLoaded = false;
        this._previewLowUrl = null;
        this._previewLowLoaded = false;
        if (this._previewUpgradeTimer) { clearTimeout(this._previewUpgradeTimer); this._previewUpgradeTimer = null; }
        const previewThumb = this.container.querySelector('#txa-preview-thumb');
        if (previewThumb) { previewThumb.classList.remove('has-sprite', 'loading'); previewThumb.style.backgroundImage = ''; }

        // Cleanup dynamic preview engine on episode switch
        if (this._previewVideo) {
            try {
                this._previewVideo.pause();
                this._previewVideo.src = "";
                this._previewVideo.load();
                this._previewVideo.remove();
            } catch (e) { }
            this._previewVideo = null;
        }
        if (this._previewHls) {
            try { this._previewHls.destroy(); } catch (e) { }
            this._previewHls = null;
        }
        this._useDynamicPreview = false;
        this._isPreviewSeeking = false;
        this._pendingPreviewSeekTime = null;

        // Reset UI Components
        const replay = this.container.querySelector('#txa-replay');
        if (replay) replay.classList.remove('show');

        const loader = this.container.querySelector('#txa-loader');
        if (loader) loader.classList.remove('hidden');

        // Update Top Title
        this.updateTopTitle();

        // 3. Re-initialize Media
        try {
            await this.setupMedia();
        } catch (error) {
            console.error('[TXAPlayer] setupMedia failed:', error);
            this.reportErrorToServer('setupMediaError', error.message, { stack: error.stack });
            
            // Keep loader hidden, show error
            if (loader) loader.classList.add('hidden');
            this.showToast('❌ Lỗi load video. Đang thử lại...');

            // Retry after 2 seconds
            setTimeout(() => {
                if (!this.destroyed) {
                    console.log('[TXAPlayer] Retrying setupMedia...');
                    this.setupMedia().catch(err => {
                        console.error('[TXAPlayer] Retry failed:', err);
                        this.reportErrorToServer('setupMediaError', 'Retry failed: ' + err.message, { stack: err.stack });
                        this.showToast('❌ Không thể load video. Vui lòng reload trang.');
                    });
                }
            }, 2000);
            return; // Exit early, don't show feedback
        }

        // 4. Re-initialize Subtitles UI (not just tracks)
        this.initSubtitles();

        // 5. Update Navigation Buttons
        const prevBtn = this.container.querySelector('#txa-prev');
        const nextBtn = this.container.querySelector('#txa-next');
        if (prevBtn) {
            prevBtn.style.display = this.options.prevEpisodeUrl ? 'flex' : 'none';
        }
        if (nextBtn) {
            nextBtn.style.display = this.options.nextEpisodeUrl ? 'flex' : 'none';
        }

        // 6. Wait for video to be ready before hiding loader
        await new Promise((resolve) => {
            const checkReady = () => {
                // Check if video has valid duration and readyState
                if (this.video && this.video.readyState >= 2) {
                    // HAVE_CURRENT_DATA - enough data to play
                    resolve();
                } else if (this.destroyed) {
                    resolve(); // Don't wait if destroyed
                } else {
                    // Wait a bit and check again
                    setTimeout(checkReady, 100);
                }
            };

            // Timeout after 15 seconds
            setTimeout(() => {
                console.warn('[TXAPlayer] Video ready timeout, proceeding anyway');
                resolve();
            }, 15000);

            checkReady();
        });

        // 7. Final UI Polish (especially for Full Screen)
        this.showUI();

        // Hide loader only after video is ready
        if (loader) loader.classList.add('hidden');

        // 8. Restore fullscreen if it was active before switching
        if (wasFullscreen && wrapperToFS) {
            // Wait a bit for video to be ready before requesting fullscreen
            setTimeout(async () => {
                try {
                    await wrapperToFS.requestFullscreen();
                    console.log('[TXAPlayer] Fullscreen restored after episode switch');
                } catch (err) {
                    console.warn('[TXAPlayer] Could not restore fullscreen:', err);
                }
            }, 500);
        }

        // 9. Trigger external event if needed
        if (this.options.onEpisodeSwitched) {
            this.options.onEpisodeSwitched(this.options);
        }

        // 10. Final Feedback (High Priority) - Only show after video is ready
        setTimeout(() => {
            if (!this.destroyed) {
                this.showFeedback('high', `⏭️ Đã chuyển: ${this.options.episodeName || 'Tập mới'}`);
            }
        }, 500);
    }

    updateTopTitle() {
        const titleEl = this.container.querySelector('#txa-top-title span');
        if (!titleEl) return;

        let movieTitle = this.options.title || 'Đang tải...';
        let episodeTitle = this.options.episodeName || '';

        // Clean up movieTitle if it already contains the episode name to avoid duplication
        if (episodeTitle && movieTitle.includes(episodeTitle)) {
            // If movieTitle is "Phim A - Tập 1" and episodeTitle is "Tập 1"
            // We want titleStr to be "Xem phim: Phim A - Tập 1" 
            // Instead of "Xem phim: Phim A - Tập 1 - Tập 1"
            titleEl.textContent = 'Xem phim: ' + movieTitle + (this.options.serverName ? ' - ' + this.options.serverName : '');
            return;
        }

        let titleStr = 'Xem phim: ' + movieTitle;

        // Handle episode name logic (skip if "Full" or if duplication detected)
        if (episodeTitle && !episodeTitle.toLowerCase().includes('full')) {
            titleStr += ' - ' + episodeTitle;
        }

        // Add server name if exists
        if (this.options.serverName) {
            titleStr += ' - ' + this.options.serverName;
        }

        titleEl.textContent = titleStr;
    }

    async getM3u8TsListFast(url) {
        // Ensure URL is absolute because proxy URLs might be relative paths (e.g., /api/proxy-media...)
        const absoluteUrl = new URL(url, window.location.origin).href;

        let response = await fetch(absoluteUrl, { headers: { 'X-EXTENSION-MODE': '1' } });
        if (!response.ok) throw new Error("Fetch m3u8 lỗi.");
        let text = await response.text();
        let lines = text.split("\n");

        if (text.includes("METHOD=AES-128")) {
            throw new Error("Luồng bị mã hóa AES-128 (Yêu cầu HLS.js để giải mã).");
        }

        if (text.includes("EXT-X-STREAM-INF")) {
            let variants = [];
            for (let i = 0; i < lines.length; i++) {
                if (lines[i].includes("EXT-X-STREAM-INF")) {
                    let info = lines[i];
                    let nextLine = lines[i + 1];
                    if (nextLine && !nextLine.startsWith("#")) {
                        let bandwidth = 0;
                        const bwMatch = info.match(/BANDWIDTH=(\d+)/);
                        if (bwMatch) bandwidth = parseInt(bwMatch[1]);

                        let resolution = "0x0";
                        const resMatch = info.match(/RESOLUTION=(\d+x\d+)/);
                        if (resMatch) resolution = resMatch[1];

                        variants.push({
                            url: new URL(nextLine.trim(), absoluteUrl).href,
                            bandwidth: bandwidth,
                            resolution: resolution
                        });
                    }
                }
            }

            if (variants.length > 0) {
                // Sort by bandwidth descending (best quality first)
                variants.sort((a, b) => b.bandwidth - a.bandwidth);
                if (this.options.isAdmin) console.log('[TXAPlayer] High Quality Variant Selected:', variants[0]);
                return await this.getM3u8TsListFast(variants[0].url);
            }
        }

        let tsUrls = [];
        let initUrl = null;
        let totalDuration = 0;
        for (let i = 0; i < lines.length; i++) {
            let line = lines[i].trim();
            if (line.startsWith("#EXTINF:")) {
                let dur = parseFloat(line.split(":")[1]);
                if (!isNaN(dur)) totalDuration += dur;
            }
            if (line.startsWith("#EXT-X-MAP:URI=")) {
                const mapMatch = line.match(/URI="([^"]+)"/);
                if (mapMatch) initUrl = new URL(mapMatch[1], absoluteUrl).href;
            }
            if (line && !line.startsWith("#")) {
                tsUrls.push(new URL(line, absoluteUrl).href);
            }
        }

        if (initUrl) {
            tsUrls.unshift(initUrl); // Prepend init map for FMP4
        }

        // Estimate 1.5 Mbps bitrate for size calculation
        const estimatedSize = totalDuration * (1.5 * 1024 * 1024 / 8);
        return { urls: tsUrls, duration: totalDuration, estimatedSize: estimatedSize };
    }

    async loadM3u8AsMP4(m3u8Url, updateLoadingPct, completeLoading, showLoaderWithProgress) {
        try {
            const loadText = this.container.querySelector('#txa-load-text');
            const pctEl = this.container.querySelector('#txa-load-pct');
            const speedEl = this.container.querySelector('#txa-load-speed');
            const loadInfoEl = this.container.querySelector('#txa-load-info');

            // --- CACHE CHECK ---
            const cacheKey = this.options.episodeId ? `ep-${this.options.episodeId}` : null;
            if (cacheKey) {
                if (loadText) loadText.textContent = "🔍 Đang kiểm tra bộ nhớ tạm (Cache)...";
                const cached = await txaStorage.get(cacheKey);
                if (cached && (cached.m3u8Url === m3u8Url || m3u8Url.includes('proxy-media'))) {
                    if (loadText) loadText.textContent = "⚡ Phát từ Cache (Siêu tốc)!";
                    updateLoadingPct(100, true);
                    completeLoading();
                    const objectUrl = URL.createObjectURL(cached.data);
                    this.video.src = objectUrl;
                    if (this.options.autoPlay) this.video.play().catch(() => { });
                    return;
                }
            }

            if (loadText) loadText.textContent = "⚙️ Đang phân tích luồng HLS...";
            showLoaderWithProgress(5);

            const m3u8Result = await this.getM3u8TsListFast(m3u8Url);
            let tsList = m3u8Result.urls;
            if (!tsList || tsList.length === 0) throw new Error("Không có file TS trong playlist!");

            let total = tsList.length;
            let mergedBuffers = [];
            let totalBytes = 0;
            let startTime = performance.now();
            let lastUpdate = performance.now();

            if (loadInfoEl) {
                const sMB = window.txaformat ? window.txaformat.fileSize(m3u8Result.estimatedSize, 1) : (m3u8Result.estimatedSize / (1024 * 1024)).toFixed(1) + " MB";
                const durStr = window.txaformat ? window.txaformat.timeRemaining(m3u8Result.duration) : (m3u8Result.duration / 60).toFixed(0) + " phút";
                loadInfoEl.innerHTML = `
                    <span class="txa-load-info-tag"><i class="fas fa-clock"></i> <span class="tag-val">${durStr}</span></span>
                    <span class="txa-load-info-tag"><i class="fas fa-hdd"></i> <span class="tag-val">~${sMB}</span></span>
                    <span class="txa-load-info-tag bg-warning bg-opacity-25 text-warning"><i class="fas fa-crown"></i> <span class="tag-val">PREMIUM BLOB ACTIVE</span></span>
                `;
            }

            // Batch size for parallel downloads (Turbo Mode: 17)
            const batchSize = 17;

            for (let i = 0; i < total; i += batchSize) {
                const batch = tsList.slice(i, i + batchSize);
                const promises = batch.map(async (ts, idx) => {
                    const r = await fetch(ts, {
                        headers: { 'X-EXTENSION-MODE': '1' }
                    });
                    if (!r.ok) throw new Error(`Fetch TS ${i + idx} fail: ${r.status}`);
                    const buf = await r.arrayBuffer();
                    totalBytes += buf.byteLength;

                    // Periodic stats update
                    const now = performance.now();
                    if (now - lastUpdate > 500) {
                        const elapsed = (now - startTime) / 1000;
                        const speed = totalBytes / elapsed;
                        const remaining = total - (i + idx);
                        const avgTimePerTs = elapsed / (i + idx + 1);
                        const etaSec = Math.round(remaining * avgTimePerTs);

                        if (speedEl) {
                            const speedStr = window.txaformat ? window.txaformat.fileSize(speed, 1) + "/s" : (speed / 1048576).toFixed(1) + " MB/s";
                            const etaStr = window.txaformat ? window.txaformat.timeRemaining(etaSec) : (etaSec > 60 ? Math.floor(etaSec / 60) + "m " + (etaSec % 60) + "s" : etaSec + "s");
                            speedEl.innerHTML = `<span class="text-white">${speedStr}</span> <span class="ms-2 opacity-50">ETA: ${etaStr}</span>`;
                        }
                        if (loadText) loadText.textContent = `🚀 [TSHORT] Đang tải seg ${i + idx + 1}/${total}...`;
                        lastUpdate = now;
                    }
                    return buf;
                });

                const buffers = await Promise.all(promises);
                mergedBuffers.push(...buffers);

                const progress = 10 + Math.floor((Math.min(i + batchSize, total) / total) * 85);
                updateLoadingPct(progress, true);
            }

            if (loadText) loadText.textContent = "🛠️ Đang lắp ráp Video MP4...";

            const isFmp4 = tsList[0].includes('.m4s') || tsList[0].includes('.mp4');
            const blobType = isFmp4 ? 'video/mp4' : 'video/mp2t';
            const combinedBlob = new Blob(mergedBuffers, { type: blobType });

            // --- SAVE TO CACHE ---
            if (cacheKey) {
                txaStorage.set(cacheKey, combinedBlob, m3u8Url);
            }

            const objectUrl = URL.createObjectURL(combinedBlob);

            if (loadText) loadText.textContent = "✨ Sẵn sàng phát (Premium)!";
            updateLoadingPct(100, true);
            completeLoading();

            this.video.src = objectUrl;
            if (this.options.autoPlay) this.video.play().catch(() => { });

        } catch (e) {
            console.error("[TXAPlayer Premium] Error: ", e);
            if (window.txatoastfy) window.txatoastfy.error('Anti-403 Mode thất bại: ' + e.message, 5000);

            // Fallback to standard HLS
            const loadText = this.container.querySelector('#txa-load-text');
            if (loadText) loadText.textContent = "⚠️ Lỗi Anti-403, đang rollback về HLS tiêu chuẩn...";
            setTimeout(() => {
                this._initStandardHls();
            }, 2000);
        }
    }

    async setupMedia() {
        if (!this.video) return;

        // --- Google Drive Auto-Resolution ---
        // Detects Google Drive sharing links and converts to proxy stream URL
        // Supported formats:
        //   https://drive.google.com/file/d/FILE_ID/view?usp=...
        //   https://drive.google.com/file/d/FILE_ID/preview
        //   https://drive.google.com/open?id=FILE_ID
        //   https://drive.google.com/uc?id=FILE_ID&export=download
        if (this.options.videoUrl && this.options.videoUrl.includes('drive.google.com')) {
            let driveFileId = null;

            // Pattern 1: /file/d/FILE_ID/
            const fileMatch = this.options.videoUrl.match(/\/file\/d\/([a-zA-Z0-9_-]+)/);
            if (fileMatch) {
                driveFileId = fileMatch[1];
            }

            // Pattern 2: ?id=FILE_ID or &id=FILE_ID
            if (!driveFileId) {
                try {
                    const u = new URL(this.options.videoUrl);
                    driveFileId = u.searchParams.get('id');
                } catch (_) { }
            }

            if (driveFileId) {
                // Convert to local proxy stream URL (supports HTTP Range seeking)
                const proxyUrl = '/api/drive-stream/' + driveFileId;
                console.log(
                    '%c[TXAPlayer] 📁 Google Drive Detected ✅',
                    'color:#4285f4; font-weight:bold;',
                    { fileId: driveFileId, proxyUrl }
                );
                this.options.videoUrl = proxyUrl;

                // Show status on loader
                const _loadText = this.container?.querySelector('#txa-load-text');
                if (_loadText) _loadText.textContent = 'Đang kết nối Google Drive...';
            }
        }

        // --- StreamC Auto-Resolution (Dynamic Subdomain Support) ---
        if (this.options.videoUrl && (this.options.videoUrl.includes('streamc.xyz') || this.options.videoUrl.includes('streamc.top') || /^[a-f0-9]{32}$/i.test(this.options.videoUrl))) {
            let hash = null;
            let embedHost = '';
            if (/^[a-f0-9]{32}$/i.test(this.options.videoUrl)) {
                hash = this.options.videoUrl;
            } else if (this.options.videoUrl.includes('hash=')) {
                try {
                    const u = new URL(this.options.videoUrl);
                    hash = u.searchParams.get('hash');
                    embedHost = u.hostname; // e.g., embed18.streamc.xyz
                    embedHost = u.hostname;
                } catch (_) { }
            } else {
                const m = this.options.videoUrl.match(/\/([a-f0-9]{32})\//i);
                if (m) hash = m[1];
            }
            if (!embedHost && this.options.videoUrl.includes('streamc')) {
                const hm = this.options.videoUrl.match(/(embed\d*\.streamc\.(?:xyz|top))/i);
                if (hm) embedHost = hm[1];
            }
            if (hash) {
                // ── Hiển thị trạng thái đang resolve trên loader ──
                const _loadText = this.container?.querySelector('#txa-load-text');
                if (_loadText) _loadText.textContent = 'Đang kết nối nguồn phim...';

                /** Hiện error overlay thay vì để loader treo mãi */
                const _showStreamCError = (msg, canRetry = true) => {
                    // Report resolve error to server
                    this.reportErrorToServer('resolveError', msg, { hash, embedHost });

                    const loader = this.container?.querySelector('#txa-loader');
                    if (!loader) return;
                    const pctEl = loader.querySelector('#txa-load-pct');
                    const barFill = loader.querySelector('#txa-load-bar-fill');
                    const spinner = loader.querySelector('.txa-spinner');
                    const loadText = loader.querySelector('#txa-load-text');
                    const speedEl = loader.querySelector('#txa-load-speed');

                    // Đổi giao diện loader → error state
                    if (spinner) { spinner.style.borderTopColor = '#ef4444'; spinner.style.animationPlayState = 'paused'; }
                    if (pctEl) { pctEl.textContent = '!'; pctEl.style.color = '#ef4444'; }
                    if (barFill) { barFill.style.background = '#ef4444'; barFill.style.width = '100%'; barFill.style.boxShadow = '0 0 10px #ef4444'; }
                    if (speedEl) speedEl.textContent = '';
                    if (loadText) {
                        loadText.style.color = '#fca5a5';
                        loadText.innerHTML = `<i class="fas fa-exclamation-triangle" style="color:#ef4444; margin-right:6px;"></i>${msg}`;
                    }

                    // Thêm nút Retry nếu chưa có
                    if (canRetry && !loader.querySelector('#txa-retry-btn')) {
                        const retryBtn = document.createElement('button');
                        retryBtn.id = 'txa-retry-btn';
                        retryBtn.innerHTML = '<i class="fas fa-redo" style="margin-right:6px;"></i>Thử lại';
                        retryBtn.style.cssText = `
                            margin-top:14px; padding:8px 22px;
                            background:#3b82f6; color:#fff; border:none;
                            border-radius:8px; cursor:pointer; font-size:13px; font-weight:600;
                            pointer-events:all;
                        `;
                        retryBtn.onmouseenter = () => retryBtn.style.background = '#2563eb';
                        retryBtn.onmouseleave = () => retryBtn.style.background = '#3b82f6';
                        retryBtn.onclick = () => window.location.reload();
                        const content = loader.querySelector('.txa-loader-content');
                        if (content) content.appendChild(retryBtn);
                        // Đảm bảo loader nhận pointer events để click được
                        loader.style.pointerEvents = 'all';
                    }
                };

                try {
                    let resolveUrl = '/api/resolve-streamc?hash=' + encodeURIComponent(hash);
                    if (embedHost) resolveUrl += '&embed_host=' + encodeURIComponent(embedHost);

                    // Timeout 20s — nếu server không trả lời thì abort
                    const controller = new AbortController();
                    const resolveTimeout = setTimeout(() => controller.abort(), 20000);

                    let res;
                    try {
                        res = await fetch(resolveUrl, { signal: controller.signal });
                    } finally {
                        clearTimeout(resolveTimeout);
                    }

                    // HTTP error (502, 403, 500...)
                    if (!res.ok) {
                        const errMsg = res.status === 502
                            ? 'Nguồn phim đang bảo trì hoặc bị chặn. Hãy thử nguồn khác.'
                            : res.status === 403
                                ? 'Truy cập bị từ chối. Hãy thử nguồn khác.'
                                : `Lỗi kết nối (HTTP ${res.status}). Thử lại sau.`;

                        console.error(`[TXAPlayer] StreamC HTTP ${res.status} ❌`, { hash, embedHost });
                        _showStreamCError(errMsg, true);
                        return; // Dừng setupMedia — không tiếp tục khởi tạo HLS với URL rỗng
                    }

                    const data = await res.json();
                    const checkBlob = this.options.anti403Mode === 'blob' || this.options.videoUrl.includes('anti403=1');

                    if (data.success) {
                        if (checkBlob && data.raw_url) {
                            this.options.videoUrl = data.raw_url;
                        } else if (data.video_url) {
                            this.options.videoUrl = data.video_url;
                            if (this.options.isAdmin) {
                                console.log('%c[TXAPlayer] StreamC Resolved ✅', 'color:#10b981;font-weight:bold;', {
                                    hash, embedHost: data.embed_host, method: data.method,
                                    proxyUrl: data.video_url.substring(0, 80) + '...'
                                });
                            }
                        }
                    } else {
                        const reason = data.message || data.error || 'Không xác định';
                        console.error('[TXAPlayer] StreamC Resolve Failed ❌', { hash, embedHost, error: reason });
                        _showStreamCError('Không thể kết nối nguồn phim. ' + reason, true);
                        return; // Dừng — không khởi tạo HLS với URL không hợp lệ
                    }

                } catch (e) {
                    if (e.name === 'AbortError') {
                        console.error('[TXAPlayer] StreamC Resolve Timeout (20s) ❌', { hash, embedHost });
                        _showStreamCError('Nguồn phim phản hồi quá chậm. Hãy thử lại.', true);
                    } else {
                        console.error('[TXAPlayer] StreamC Resolve Error ❌', e);
                        _showStreamCError('Lỗi mạng khi kết nối nguồn phim.', true);
                    }
                    return; // Dừng — không tiếp tục HLS setup
                }
            }
        }

        // Auto-proxy logic for known SSL-untrusted domains
        if (this.options.videoUrl && (this.options.videoUrl.includes('phimmoi.net') || this.options.videoUrl.includes('sing.phimmoi.net') || this.options.videoUrl.includes('streamvda.top') || this.options.videoUrl.includes('phim1280.tv'))) {
            if (this.options.videoUrl.includes('?url=')) {
                console.log(
                    '%c[TXAPlayer] 🛡️ SSL Guard Bypass: Already Proxied via Cloudflare/Vercel Proxy ✅',
                    'color:#10b981; font-weight:bold;',
                    { videoUrl: this.options.videoUrl }
                );
            }
            if (!this.options.videoUrl.includes('/api/proxy-media') && !this.options.videoUrl.includes('/api/video/') && !this.options.videoUrl.includes('?url=')) {
                try {
                    console.log('%c[TXAPlayer] 🛡️ SSL Guard Active: Resolving video URL...', 'color:#f59e0b; font-weight:bold;');
                    const r = await fetch(`/api/video/resolve?url=${encodeURIComponent(btoa(this.options.videoUrl))}`);
                    const data = await r.json();
                    if (data.success && data.url) {
                        this.options.videoUrl = data.url;
                        console.log('%c[TXAPlayer] 🛡️ SSL Guard Resolved URL ✅', 'color:#10b981; font-weight:bold;', { resolvedUrl: this.options.videoUrl });
                    }
                } catch (e) { console.error('[TXAPlayer] SSL Guard Fail', e); }
            }
        }

        const loader = this.container.querySelector('#txa-loader');
        const pctEl = this.container.querySelector('#txa-load-pct');
        const speedEl = this.container.querySelector('#txa-load-speed');
        const barFill = this.container.querySelector('#txa-load-bar-fill');
        const loadInfoEl = this.container.querySelector('#txa-load-info');
        let loadProgress = 0, loadInterval = null, lastBytes = 0, lastSpeedTime = performance.now();
        let speedHistory = [], isHLS = false;

        // Populate loading info tags
        if (loadInfoEl) {
            const tags = [];
            if (this.options.title) tags.push({ icon: 'fa-film', label: this.options.title });
            if (this.options.episodeName) tags.push({ icon: 'fa-list', label: this.options.episodeName });
            if (this.options.serverName) tags.push({ icon: 'fa-server', label: this.options.serverName });
            const url = this.options.videoUrl || '';
            if (url.includes('.mpd')) tags.push({ icon: 'fa-video', label: 'DASH' });
            else if (url.includes('.m3u8')) tags.push({ icon: 'fa-video', label: 'HLS' });
            else if (url.includes('.mp4')) tags.push({ icon: 'fa-video', label: 'MP4' });
            else if (url.includes('/api/drive-stream/')) tags.push({ icon: 'fab fa-google-drive', label: 'Google Drive' });
            loadInfoEl.innerHTML = tags.map(t => `<span class="txa-load-info-tag"><i class="fas ${t.icon}"></i> <span class="tag-val">${t.label}</span></span>`).join('');
        }

        const updateSpeed = (n) => {
            const now = performance.now(), elapsed = (now - lastSpeedTime) / 1000;
            if (elapsed > 0.2 && n > lastBytes) {
                const bps = (n - lastBytes) / elapsed;
                speedHistory.push(bps);
                if (speedHistory.length > 5) speedHistory.shift();
                const currentSpeed = speedHistory.reduce((a, b) => a + b, 0) / speedHistory.length;
                if (speedEl) speedEl.textContent = (window.txaformat && window.txaformat.fileSize) ? window.txaformat.fileSize(currentSpeed, 1) + '/s' : (currentSpeed / 1048576).toFixed(1) + ' MB/s';
                lastBytes = n; lastSpeedTime = now;
            }
        };

        const updateLoadingPct = (targetPct, instant = false) => {
            if (!pctEl) return;
            const loadText = this.container.querySelector('#txa-load-text');
            if (instant) {
                this._loadProgress = targetPct;
                pctEl.textContent = Math.round(this._loadProgress) + '%';
                if (barFill) barFill.style.width = Math.round(this._loadProgress) + '%';
                return;
            }
            if (this._loadInterval) clearInterval(this._loadInterval);
            this._loadInterval = setInterval(() => {
                if (this._loadProgress < targetPct) {
                    const inc = targetPct >= 90 ? 0.5 : (targetPct >= 70 ? 1 : 2);
                    this._loadProgress = Math.min(targetPct, this._loadProgress + inc);
                    pctEl.textContent = Math.round(this._loadProgress) + '%';
                    if (barFill) barFill.style.width = Math.round(this._loadProgress) + '%';
                    if (loadText) {
                        if (this._loadProgress < 20) loadText.textContent = 'Đang khởi tạo trình phát...';
                        else if (this._loadProgress < 40) loadText.textContent = 'Đang tải manifest...';
                        else if (this._loadProgress < 70) loadText.textContent = 'Đang đệm dữ liệu...';
                        else if (this._loadProgress < 95) loadText.textContent = 'Đang tối ưu hóa...';
                        else loadText.textContent = 'Sẵn sàng!';
                    }
                } else { clearInterval(this._loadInterval); this._loadInterval = null; }
            }, 50);
        };

        const completeLoading = () => {
            if (this._loadInterval) clearInterval(this._loadInterval);
            this._loadProgress = 100;
            if (pctEl) pctEl.textContent = '100%';
            if (barFill) barFill.style.width = '100%';
            if (speedEl) speedEl.textContent = '✓ Ready';
            setTimeout(() => loader.classList.add('hidden'), 200);
        };

        const showLoaderWithProgress = (startPct = null) => {
            // v6.6.1 - Reset loader styles to default (clearing error states)
            if (loader) {
                const _spin = loader.querySelector('.txa-spinner');
                const _pct = loader.querySelector('#txa-load-pct');
                const _bar = loader.querySelector('#txa-load-bar-fill');
                const _text = loader.querySelector('#txa-load-text');
                const _retry = loader.querySelector('#txa-retry-btn');

                if (_spin) { _spin.style.borderTopColor = 'var(--txa-brand)'; _spin.style.animationPlayState = 'running'; }
                if (_pct) { _pct.style.color = '#fff'; }
                if (_bar) {
                    _bar.style.background = 'linear-gradient(90deg, var(--txa-brand), #f472b6)';
                    _bar.style.boxShadow = '0 0 15px var(--txa-brand-glow)';
                }
                if (_text) { _text.style.color = 'rgba(255,255,255,0.5)'; }
                if (_retry) _retry.remove();
                loader.style.pointerEvents = 'none';
            }

            loader?.classList.remove('hidden');
            if (startPct !== null) updateLoadingPct(startPct, true);
        };

        // Expose to instance so setQuality can use it
        this.updateLoadingPct = updateLoadingPct;
        this.hideLoader = completeLoading;
        this.showLoader = showLoaderWithProgress;

        if (this.options.videoUrl?.endsWith('.mpd')) {
            this.dashPlayer = dashjs.MediaPlayer().create();
            this.dashPlayer.initialize(this.video, this.options.videoUrl, this.options.autoPlay);
            updateLoadingPct(10);
            this.dashPlayer.on('streamInitialized', () => {
                updateLoadingPct(80);
                this.container.querySelector('#txa-item-quality').style.display = 'flex';
                this.generateQualityList(); this.initSubtitles(); this.renderMarkers();
            });
            this.dashPlayer.on('canPlay', completeLoading);
            this.dashPlayer.on('bufferStalled', () => showLoaderWithProgress(loadProgress > 50 ? loadProgress : 50));
            this.dashPlayer.on('bufferLoaded', completeLoading);
            this.dashPlayer.on('fragmentLoadingCompleted', (e) => { if (e?.request?.bytesTotal) updateSpeed(lastBytes + e.request.bytesTotal); });
        } else if (this.options.videoUrl) {
            // Updated isHLS detection to be more robust
            isHLS = this.options.videoUrl.includes('.m3u8') ||
                this.options.videoUrl.includes('txaformat=.m3u8') ||
                this.options.videoUrl.includes('format=.m3u8') ||
                (this.options.videoUrl.includes('streamc') && this.options.videoUrl.includes('.m3u8'));

            if (isHLS && typeof Hls !== 'undefined' && Hls.isSupported()) {
                const isStreamC = this.options.videoUrl.includes('streamc');
                const isBlobMode = this.options.anti403Mode === 'blob' || this.options.videoUrl.includes('anti403=1');

                if (this.options.isAdmin) {
                    console.log('%c[TXAPlayer] HLS Detected', 'color: #3b82f6; font-weight: bold;', this.options.videoUrl);
                    console.log('%c[TXAPlayer] Anti-403 Mode Strategy:', 'color: #10b981;', this.options.anti403Mode);
                }

                const initStandardHls = (useExtensionMode = false) => {
                    if (this.options.isAdmin) console.log('%c[TXAPlayer] Initializing Standard HLS (Proxy Mode)...', 'color: #3b82f6;');
                    if (this.hls) this.hls.destroy();
                    this.hls = new Hls({
                        enableWorker: true,
                        lowLatencyMode: false,
                        backBufferLength: 120,
                        maxBufferLength: 180,
                        maxMaxBufferLength: 600,
                        maxBufferSize: 250 * 1000 * 1000,
                        fragLoadingRetryDelay: 500,
                        fragLoadingMaxRetry: 10,
                        manifestLoadingMaxRetry: 5,
                        manifestLoadingRetryDelay: 1000,
                        levelLoadingMaxRetry: 5,
                        fragLoadingTimeOut: 20000,
                        startLevel: -1,
                        abandonAudioCodec: true,
                        fastReadyState: true,
                        liveDurationInfinity: true,
                        capLevelToPlayerSize: true,
                        xhrSetup: (xhr, url) => {
                            if (useExtensionMode) {
                                xhr.setRequestHeader('X-EXTENSION-MODE', '1');
                            } else {
                                xhr.setRequestHeader('X-TXA-PLAYER', 'Premium');
                            }
                        }
                    });
                    updateLoadingPct(10);
                    this.hls.attachMedia(this.video);
                    this.hls.on(Hls.Events.MEDIA_ATTACHED, () => this.hls.loadSource(this.options.videoUrl));
                    this.hls.on(Hls.Events.MANIFEST_LOADING, () => updateLoadingPct(20));
                    this.hls.on(Hls.Events.MANIFEST_LOADED, () => updateLoadingPct(40));
                    this.hls.on(Hls.Events.LEVEL_LOADING, () => updateLoadingPct(55));
                    this.hls.on(Hls.Events.LEVEL_LOADED, () => updateLoadingPct(70));
                    this.hls.on(Hls.Events.FRAG_LOADING, () => { if (loadProgress < 80) updateLoadingPct(80); });
                    this.hls.on(Hls.Events.FRAG_LOADED, (e, data) => {
                        updateLoadingPct(90);
                        if (data?.frag?.stats?.loaded) updateSpeed(lastBytes + data.frag.stats.loaded);
                        this._updateBufferBar();
                    });
                    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                        this.renderMarkers(); this.generateQualityList();
                        if (this.options.autoPlay) this.video.play().catch(() => { });
                    });
                    this.hls.on(Hls.Events.LEVEL_SWITCHED, () => {
                        this.updateQualityUI(this.hls.autoLevelEnabled ? -1 : this.hls.loadLevel);
                        if (this.hideLoader) this.hideLoader(); // Hide loader after quality switch
                    });
                    this.hls.on(Hls.Events.ERROR, (e, data) => {
                        console.warn('[TXAPlayer] HLS Error', data.type, data.details, data.fatal);
                        if (data.fatal) {
                            if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
                                // Network error: thử recover, nếu vẫn fail thì hiện lỗi
                                this._hlsNetworkRetries = (this._hlsNetworkRetries || 0) + 1;
                                if (this._hlsNetworkRetries <= 3) {
                                    console.warn(`[TXAPlayer] HLS Network Error - Retry ${this._hlsNetworkRetries}/3`);
                                    setTimeout(() => this.hls?.startLoad(), 1500);
                                } else {
                                    console.error('[TXAPlayer] HLS Fatal Network Error after retries');
                                    this._txaShowHlsError('Không tải được video. Kiểm tra kết nối mạng.', data);
                                }
                            } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
                                this._hlsMediaRetries = (this._hlsMediaRetries || 0) + 1;
                                if (this._hlsMediaRetries <= 2) {
                                    this.hls.recoverMediaError();
                                } else {
                                    this._txaShowHlsError('Lỗi giải mã video. Thử tải lại trang.', data);
                                }
                            } else {
                                this._txaShowHlsError('Lỗi không xác định khi phát video.', data);
                                this.hls.destroy();
                            }
                        }
                    });
                };
                this._initStandardHls = initStandardHls;
                if (isBlobMode) {
                    if (this.options.isAdmin) console.log('%c[TXAPlayer] 🚀 EXTENSION MODE. Fetching and merging M3U8...', 'color: #10b981; font-weight: bold; font-size: 14px;');
                    this.loadM3u8AsMP4(this.options.videoUrl, updateLoadingPct, completeLoading, showLoaderWithProgress);
                    return;
                }
                initStandardHls(false);
            } else if (isHLS) {
                this.showFeedback('high', '❌ Thiếu thư viện HLS.js - Không thể phát M3U8. Vui lòng kiểm tra import HLS.js hoặc dùng link MP4 trực tiếp.'); completeLoading();
            } else { // Regular MP4 or other direct video URL
                updateLoadingPct(15);
                this.video.src = this.options.videoUrl;
                if (this.options.autoPlay) this.video.play().catch(() => { });
            }
            this.initSubtitles();
        }

        // Loading state management
        const hideLoader = () => completeLoading();
        const showLoader = () => showLoaderWithProgress(loadProgress > 30 ? loadProgress : 30);

        this.video.onloadstart = () => {
            if (loadProgress < 20) updateLoadingPct(20);
        };
        this.video.onloadeddata = () => {
            updateLoadingPct(60);
        };
        this.video.oncanplay = () => {
            updateLoadingPct(85);
        };
        this.video.oncanplaythrough = () => {
            completeLoading();
        };
        this.video.onwaiting = showLoader;
        this.video.onseeking = () => {
            showLoaderWithProgress(50);
        };
        this.video.onseeked = hideLoader;
        this.video.onplaying = hideLoader;
        this.video.onloadedmetadata = () => {
            updateLoadingPct(45);
            this.updateTopTitle();
            this.renderMarkers();
            this.checkWatchResume();
            this.initSubtitles(); // Ensure subs are synced after metadata
        };

        /**
         * ACCURATE BUFFERED PERCENTAGE CALCULATION
         */
        this.video.onprogress = () => {
            if (!loader.classList.contains('hidden') && pctEl) {
                const duration = this.video.duration;
                if (!duration || !isFinite(duration)) return;
                const buffered = this.video.buffered;
                if (buffered.length === 0) return;
                let totalBuffered = 0;
                for (let i = 0; i < buffered.length; i++) {
                    totalBuffered += buffered.end(i) - buffered.start(i);
                }
                const bufferPct = (totalBuffered / duration) * 100;
                const mappedPct = 60 + (bufferPct * 0.39);
                if (mappedPct > loadProgress) {
                    updateLoadingPct(Math.min(99, mappedPct));
                }
            }
        };

        // ===== CONTINUOUS BUFFER BAR UPDATE (YouTube-style) =====
        if (this._bufferInterval) clearInterval(this._bufferInterval);
        const bufBar = this.container.querySelector('#txa-buffer');
        if (bufBar) {
            bufBar.classList.add('loading');
            this._bufferInterval = setInterval(() => {
                this._updateBufferBar();
            }, 1000);

            this.video.addEventListener('progress', () => {
                const duration = this.video.duration;
                if (!duration || !isFinite(duration)) return;
                const buffered = this.video.buffered;
                if (buffered.length > 0) {
                    const lastEnd = buffered.end(buffered.length - 1);
                    if (lastEnd >= duration - 1) {
                        bufBar.classList.remove('loading');
                    }
                }
            });
        }
        // ── Watchdog: nếu progress stuck ở ≤20% sau 18s thì hiển thị lỗi ──
        // Bảo vệ người dùng khỏi loader treo vô hạn khi mạng chậm hoặc nguồn lỗi
        if (this._stuckWatchdog) clearTimeout(this._stuckWatchdog);
        this._stuckWatchdog = setTimeout(() => {
            // Chỉ kích hoạt nếu loader vẫn còn hiện và progress ≤ 22%
            const _loader = this.container?.querySelector('#txa-loader');
            if (!_loader || _loader.classList.contains('hidden')) return;
            const _pct = this.container?.querySelector('#txa-load-pct');
            const currentPct = parseInt(_pct?.textContent || '0');
            if (currentPct <= 22 && !isNaN(currentPct)) {
                console.warn('[TXAPlayer] Watchdog: loader stuck at', currentPct + '% after 18s');
                this._txaShowHlsError?.('Quá trình tải mất quá nhiều thời gian. Có thể nguồn phim đang bảo trì.', null);
            }
        }, 18000);

        // Clear watchdog khi video thực sự play được
        this.video.addEventListener('playing', () => {
            if (this._stuckWatchdog) { clearTimeout(this._stuckWatchdog); this._stuckWatchdog = null; }
        }, { once: true });

        // v6.5.0 - Auto-detect preview thumbnail sprite
        this._detectPreviewSprite();
    }

    /**
     * v6.5.2 - Auto-detect and preload preview sprite (preview.jpg)
     * OR New Turbo Storyboard (L1_M0.jpg)
     */
    _detectPreviewSprite() {
        let previewUrl = this.options.previewUrl;
        const videoUrl = this.options.videoUrl;
        const thumbEl = this.container?.querySelector('#txa-preview-thumb');
        if (!thumbEl) return;

        // Reset state
        this._useStoryboard = false;
        this._currentStoryboardLevel = 'L1';

        // Try auto-detection of base path
        let basePath = '';
        if (videoUrl) {
            try {
                const url = new URL(videoUrl);
                const m3u8Match = videoUrl.match(/(https?:\/\/[^/]*(?:s3|tebi|storage|cdn)[^/]*\/[^?]*\/)/);
                if (m3u8Match) {
                    basePath = m3u8Match[1];
                } else if (!url.pathname.includes('/api/proxy-media') && !url.pathname.includes('proxy-m3u8')) {
                    const pathParts = url.pathname.split('/');
                    pathParts.pop();
                    basePath = url.origin + pathParts.join('/') + '/';
                }
            } catch (e) {
                const lastSlash = videoUrl.lastIndexOf('/');
                if (lastSlash > 0) basePath = videoUrl.substring(0, lastSlash + 1);
            }
        }

        const handleFinalError = () => {
            this._previewSpriteUrl = null;
            this._previewSpriteLoaded = false;
            thumbEl.classList.remove('loading', 'has-sprite');
            thumbEl.style.backgroundImage = 'none';
            console.log('[TXAPlayer] Storyboard/Legacy Preview failed/missing. Initializing Dynamic Preview Engine...');
            this._initDynamicPreviewEngine(videoUrl, thumbEl);
        };

        // 🚀 STRATEGY 1: Check for Turbo Storyboard (VOD Pipeline v2)
        if (basePath) {
            const storyboardPath = basePath + 'storyboard/';
            const checkImg = new Image();
            checkImg.src = storyboardPath + 'L1_M0.jpg';
            checkImg.onload = () => {
                if (this.destroyed) return;
                this._useStoryboard = true;
                this._storyboardPath = storyboardPath;
                this._previewSpriteLoaded = true;
                thumbEl.classList.add('has-sprite');
                thumbEl.classList.remove('loading');
                console.log('%c[TXAPlayer] 🚀 Turbo Storyboard Engine Active (L1) ✅', 'color:#a855f7; font-weight:bold;');

                // Level Upgrade Timer (Premium Strategy)
                this._previewUpgradeTimer = setTimeout(() => {
                    if (this.destroyed) return;
                    if (window.innerWidth > 1200) this._currentStoryboardLevel = 'L3';
                    else if (window.innerWidth > 768) this._currentStoryboardLevel = 'L2';
                    console.log(`%c[TXAPlayer] 🖼️ Storyboard upgraded to ${this._currentStoryboardLevel} for crispness`, 'color:#a855f7;');
                }, 4000);
            };
            checkImg.onerror = () => {
                // FALLBACK to Strategy 2 (Legacy preview.jpg)
                this._detectLegacyPreview(previewUrl, basePath, thumbEl, handleFinalError);
            };

            // 🚀 STRATEGY 3: Detect MP4 Multi-Quality (NEW v6.5.2)
            if (videoUrl && videoUrl.toLowerCase().endsWith('.mp4')) {
                const filename = videoUrl.split('/').pop();
                if (filename.match(/(\d+)p\.mp4/i)) {
                    this._detectMP4Qualities(basePath, filename);
                }
            }
            return;
        }

        this._detectLegacyPreview(previewUrl, basePath, thumbEl, handleFinalError);
    }

    /**
     * v6.5.2 - Predictive MP4 Multi-Quality Detection
     * Probes tebi/s3 folder for 1080p.mp4, 720p.mp4, etc.
     */
    async _detectMP4Qualities(basePath, currentFilename) {
        const qualities = ['1080p', '720p', '480p', '360p', '144p'];
        const results = [];
        const currentLabel = currentFilename.replace('.mp4', '').toLowerCase();

        for (const q of qualities) {
            if (q === currentLabel) {
                results.push({ height: parseInt(q), url: this.options.videoUrl, name: q.toUpperCase() });
                continue;
            }

            const checkUrl = basePath + q + '.mp4';
            try {
                // Fast check with HEAD request
                const res = await fetch(checkUrl, { method: 'HEAD' });
                if (res.ok) {
                    results.push({ height: parseInt(q), url: checkUrl, name: q.toUpperCase() });
                }
            } catch (e) { }
        }

        if (results.length > 1) {
            this._mp4Levels = results.sort((a, b) => b.height - a.height);
            this.generateQualityList();
            console.log(`%c[TXAPlayer] 🎞️ Predictive MP4 Active: ${this._mp4Levels.length} qualities found`, 'color:#a855f7; font-weight:bold;');
        }
    }

    /**
     * v6.5.2 - Legacy Sprite Logic (Backward Compatibility)
     */
    _detectLegacyPreview(previewUrl, basePath, thumbEl, handleFinalError) {
        if (!previewUrl && basePath) {
            previewUrl = basePath + 'preview.jpg';
        }
        if (!previewUrl) {
            handleFinalError();
            return;
        }

        const loadPreview = (useCORS = true) => {
            const img = new Image();
            if (useCORS) img.crossOrigin = 'anonymous';

            img.onload = () => {
                if (this.destroyed) return;
                if (img.naturalWidth < 160 || img.naturalHeight < 90) {
                    handleFinalError();
                    return;
                }

                if (useCORS) {
                    if (this.options.previewLowUrl) {
                        this._previewLowUrl = this.options.previewLowUrl;
                        this._previewLowLoaded = true;
                        thumbEl.style.backgroundImage = `url('${this._previewLowUrl}')`;
                        thumbEl.classList.add('has-sprite');
                        thumbEl.classList.remove('loading');

                        this._previewUpgradeTimer = setTimeout(() => {
                            if (this.destroyed) return;
                            this._previewSpriteUrl = previewUrl;
                            this._previewSpriteLoaded = true;
                            thumbEl.style.backgroundImage = `url('${previewUrl}')`;
                            thumbEl.style.backgroundSize = '1600px 900px';
                        }, 500);
                    } else {
                        // Canvas downscale
                        try {
                            const canvas = document.createElement('canvas');
                            const scale = 0.25;
                            canvas.width = Math.round(img.naturalWidth * scale);
                            canvas.height = Math.round(img.naturalHeight * scale);
                            const ctx = canvas.getContext('2d');
                            ctx.imageSmoothingEnabled = true;
                            ctx.imageSmoothingQuality = 'low';
                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                            this._previewLowUrl = canvas.toDataURL('image/jpeg', 0.5);
                            this._previewLowLoaded = true;
                            thumbEl.style.backgroundImage = `url('${this._previewLowUrl}')`;
                            thumbEl.style.backgroundSize = '400px 225px';
                            thumbEl.classList.add('has-sprite');
                            thumbEl.classList.remove('loading');
                        } catch (e) {
                            useHQDirectly();
                            return;
                        }
                        this._previewUpgradeTimer = setTimeout(() => {
                            if (this.destroyed) return;
                            this._previewSpriteUrl = previewUrl;
                            this._previewSpriteLoaded = true;
                            thumbEl.style.backgroundImage = `url('${previewUrl}')`;
                            thumbEl.style.backgroundSize = '1600px 900px';
                        }, 600);
                    }
                } else {
                    useHQDirectly();
                }
            };

            const useHQDirectly = () => {
                this._previewSpriteUrl = previewUrl;
                this._previewSpriteLoaded = true;
                thumbEl.style.backgroundImage = `url('${previewUrl}')`;
                thumbEl.style.backgroundSize = '1600px 900px';
                thumbEl.classList.add('has-sprite');
                thumbEl.classList.remove('loading');
            };

            img.onerror = () => {
                if (useCORS) loadPreview(false);
                else handleFinalError();
            };
            img.src = previewUrl;
        };

        loadPreview(true);
    }

    /**
     * v6.6.2 - Dynamic Canvas Hover Preview Engine Fallback
     */
    _initDynamicPreviewEngine(videoUrl, thumbEl) {
        if (!videoUrl) return;
        if (this._useDynamicPreview) return;

        console.log('[TXAPlayer] Dynamic Canvas Hover Preview Engine initializing...');

        this._useDynamicPreview = true;
        this._previewSpriteLoaded = true; // Set to true to bypass early return in hover

        // Create a hidden video element
        this._previewVideo = document.createElement('video');
        this._previewVideo.crossOrigin = 'anonymous';
        this._previewVideo.muted = true;
        this._previewVideo.playsInline = true;
        this._previewVideo.style.display = 'none';
        this._previewVideo.style.position = 'absolute';
        this._previewVideo.style.width = '0';
        this._previewVideo.style.height = '0';
        this._previewVideo.style.pointerEvents = 'none';
        
        // Append to container or body
        if (this.container) {
            this.container.appendChild(this._previewVideo);
        } else {
            document.body.appendChild(this._previewVideo);
        }

        // Smart CORS proxy: Only proxy HLS streams (.m3u8) to save bandwidth and memory
        let streamUrl = videoUrl;
        if (videoUrl.includes('.m3u8') && !videoUrl.includes('/api/proxy-media')) {
            streamUrl = `/api/proxy-media?url=${encodeURIComponent(videoUrl)}`;
        }

        const isHLS = streamUrl.includes('.m3u8') || streamUrl.includes('proxy-media');

        if (isHLS && typeof Hls !== 'undefined' && Hls.isSupported()) {
            this._previewHls = new Hls({
                enableWorker: true,
                lowLatencyMode: false,
                maxBufferLength: 2, // 1-2 segments to keep network traffic minimal
                maxMaxBufferLength: 5,
                maxBufferSize: 2 * 1024 * 1024, // 2MB max
                capLevelToPlayerSize: true, // Auto-cap to lowest quality level
                autoStartLoad: true
            });
            this._previewHls.attachMedia(this._previewVideo);
            this._previewHls.on(Hls.Events.MEDIA_ATTACHED, () => {
                this._previewHls.loadSource(streamUrl);
            });
            this._previewHls.on(Hls.Events.MANIFEST_PARSED, () => {
                // Pin to lowest quality level to make seeking instant and save bandwidth
                let lowestLevel = 0;
                let minHeight = 9999;
                this._previewHls.levels.forEach((lvl, idx) => {
                    if (lvl.height && lvl.height < minHeight) {
                        minHeight = lvl.height;
                        lowestLevel = idx;
                    }
                });
                this._previewHls.currentLevel = lowestLevel;
                this._previewHls.loadLevel = lowestLevel;
            });
        } else {
            this._previewVideo.src = streamUrl;
        }

        // Setup seeked event listener
        this._previewVideo.addEventListener('seeked', () => {
            this._isPreviewSeeking = false;
            
            try {
                const canvas = document.createElement('canvas');
                canvas.width = 160;
                canvas.height = 90;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(this._previewVideo, 0, 0, canvas.width, canvas.height);
                
                const dataUrl = canvas.toDataURL('image/jpeg', 0.6);
                
                if (thumbEl) {
                    thumbEl.style.backgroundImage = `url('${dataUrl}')`;
                    thumbEl.style.backgroundSize = 'cover';
                    thumbEl.style.backgroundPosition = 'center';
                    thumbEl.classList.add('has-sprite');
                    thumbEl.classList.remove('loading');
                }
            } catch (e) {
                console.warn('[TXAPlayer] Dynamic preview frame extraction failed (CORS restriction):', e);
            }

            // Execute pending seek if requested
            if (this._pendingPreviewSeekTime !== null && this._pendingPreviewSeekTime !== undefined) {
                const nextTime = this._pendingPreviewSeekTime;
                this._pendingPreviewSeekTime = null;
                
                if (Math.abs(this._previewVideo.currentTime - nextTime) > 0.3) {
                    this._isPreviewSeeking = true;
                    this._previewVideo.currentTime = nextTime;
                }
            }
        });
    }

    _seekDynamicPreview(targetTime) {
        if (!this._previewVideo) return;
        
        this._pendingPreviewSeekTime = targetTime;
        
        if (this._isPreviewSeeking) return;
        
        this._isPreviewSeeking = true;
        this._previewVideo.currentTime = targetTime;
    }

    /**
     * v6.5.2 - Update preview thumbnail position based on hover/scrub position
     * Supports both Legacy Sprite, Neon Core Storyboard (L1/L2/L3) and Dynamic Canvas Preview
     */
    _updatePreviewThumb(pos) {
        const thumbEl = this.container?.querySelector('#txa-preview-thumb');
        if (!thumbEl || !this._previewSpriteLoaded) return;

        const duration = this.video?.duration;
        if (!duration || !isFinite(duration)) return;

        const targetTime = pos * duration;
        let thumbW = 160, thumbH = 90;

        if (this._useDynamicPreview) {
            // Dynamic Canvas Preview Logic!
            thumbEl.classList.add('has-sprite'); // ensure it is visible
            
            // Show loading spinner initially until first frame is rendered
            if (!thumbEl.style.backgroundImage || thumbEl.style.backgroundImage === 'none' || thumbEl.style.backgroundImage === 'url("")') {
                thumbEl.classList.add('loading');
            }
            
            // Trigger seek to targetTime
            this._seekDynamicPreview(targetTime);
            
            thumbW = 160;
            thumbH = 90;
        } else if (this._useStoryboard) {
            const config = STORYBOARD_LEVELS[this._currentStoryboardLevel];
            const framesPerChunk = config.grid[0] * config.grid[1];
            const frameIndex = Math.floor(targetTime / config.interval);
            const chunkIndex = Math.floor(frameIndex / framesPerChunk);
            const frameInChunk = frameIndex % framesPerChunk;

            const chunkUrl = `${this._storyboardPath}${config.prefix}${chunkIndex}.jpg`;
            const col = frameInChunk % config.grid[0];
            const row = Math.floor(frameInChunk / config.grid[0]);

            thumbW = config.size[0];
            thumbH = config.size[1];

            thumbEl.style.backgroundImage = `url('${chunkUrl}')`;
            thumbEl.style.backgroundSize = `${config.grid[0] * thumbW}px ${config.grid[1] * thumbH}px`;
            thumbEl.style.backgroundPosition = `${-(col * thumbW)}px ${-(row * thumbH)}px`;
            thumbEl.style.width = thumbW + 'px';
            thumbEl.style.height = thumbH + 'px';
        } else {
            // Legacy Logic
            const frameIndex = Math.min(99, Math.floor(targetTime / 10));
            const col = frameIndex % 10;
            const row = Math.floor(frameIndex / 10);
            thumbEl.style.backgroundPosition = `${-(col * 160)}px ${-(row * 90)}px`;
            thumbEl.style.width = '160px';
            thumbEl.style.height = '90px';
        }

        // Clamp to container bounds
        const pWrap = this.container?.querySelector('#txa-progress');
        if (pWrap) {
            const wrapW = pWrap.offsetWidth;
            const half = thumbW / 2;
            const leftPx = pos * wrapW;

            if (leftPx < half) {
                thumbEl.style.left = half + 'px';
                thumbEl.style.transform = 'translateX(-50%)';
            } else if (leftPx > wrapW - half) {
                thumbEl.style.left = (wrapW - half) + 'px';
                thumbEl.style.transform = 'translateX(-50%)';
            } else {
                thumbEl.style.left = (pos * 100) + '%';
                thumbEl.style.transform = 'translateX(-50%)';
            }
        }
    }

    generateQualityList() {
        const list = this.container.querySelector('#txa-list-quality');
        if (!list) return;
        list.innerHTML = '';

        let levels = [];
        let currentLevel = -1;

        if (this.hls) {
            levels = this.hls.levels;
            currentLevel = this.hls.currentLevel;
        } else if (this.dashPlayer) {
            levels = this.dashPlayer.getBitrateInfoListFor('video');
            currentLevel = this.dashPlayer.getQualityFor('video');
        } else if (this._mp4Levels.length > 0) {
            levels = this._mp4Levels.map((l, i) => ({ ...l, originalIndex: i }));
            // Find current active level by URL
            currentLevel = this._mp4Levels.findIndex(l => l.url === (this._lastMP4Url || this.options.videoUrl));
            if (currentLevel !== -1) currentLevel = levels[currentLevel].originalIndex; // Map to originalIndex
        }

        // Parse whitelist / manual quality list
        const maxQRaw = this.options.maxQuality || 'auto';
        const qList = maxQRaw.split(',').map(s => s.trim().toLowerCase());
        const isAutoAllowed = qList.includes('auto');

        // Allow single manual quality (e.g. "1080p") to show menu if provided
        const hasManualQualities = qList.length > 0 && !(qList.length === 1 && qList[0] === 'auto');
        const hasMultipleLevels = levels && levels.length > 1;

        if (!hasMultipleLevels && !hasManualQualities) {
            this.container.querySelector('#txa-item-quality').style.display = 'none';
            return;
        }

        this.container.querySelector('#txa-item-quality').style.display = 'flex';

        // Filter levels for UI
        const isWhitelisted = (lvl) => {
            if (qList.length === 0 || (qList.length === 1 && qList[0] === 'auto')) return true;
            const h = lvl.height || 0;
            const label = h + 'p';
            return qList.some(q => {
                if (q === label) return true; // Exact match: "360p" === "360p"
                if (q === '4k' && h >= 2160) return true;
                if (q === '2k' && h >= 1440) return true;
                if (q === 'fullhd' && h >= 1080) return true;
                if (q === 'fhd' && h >= 1080) return true;
                if (q === 'hd' && h >= 720 && h < 1080) return true; // HD = 720p only
                if (['cam', 'sd'].includes(q)) return true;
                return false;
            });
        };

        const availableLevels = levels.map((l, i) => ({ ...l, originalIndex: i }));
        const filteredLevels = availableLevels.filter(isWhitelisted);

        let uiLevels = filteredLevels.length > 0 ? filteredLevels : availableLevels;

        // Dummy Logic if no levels found but Manual Quality is Enforced (e.g. Single MP4 with label)
        if (uiLevels.length === 0 && hasManualQualities && (!levels || levels.length === 0)) {
            uiLevels = qList.filter(q => q !== 'auto').map((q, i) => ({
                height: parseInt(q.replace(/\D/g, '')) || 0,
                name: q.toUpperCase(),
                originalIndex: -100 - i // Dummy Index
            }));
            // Force first one active if no HLS
            if (currentLevel === -1 && uiLevels.length > 0) currentLevel = uiLevels[0].originalIndex;
        }

        // Special check: if we are using MP4 Predictive levels, levels are ALREADY uiLevels
        if (this._mp4Levels.length > 0 && uiLevels.length === 0) {
            uiLevels = levels;
        }

        // Auto Option (Only if we have real HLS/DASH switching capability)
        if (isAutoAllowed && (hasMultipleLevels || levels.length > 0)) {
            const autoItem = document.createElement('div');
            autoItem.className = 'txa-menu-item' + (currentLevel === -1 ? ' active' : '');
            autoItem.dataset.quality = -1;

            let autoLabel = 'Auto';
            if (uiLevels.length < levels.length && levels.length > 0) {
                const sorted = [...uiLevels].sort((a, b) => a.height - b.height);
                const minH = sorted[0]?.height || '?';
                const maxH = sorted[sorted.length - 1]?.height || '?';
                autoLabel = `Auto (${minH}p — ${maxH}p)`;
            }

            autoItem.innerHTML = `<span>${autoLabel}</span><span id="txa-auto-label"></span>`;

            if (this.options.isGuest) {
                autoItem.classList.add('disabled');
                autoItem.onclick = (e) => { e.stopPropagation(); this.showToast('Vui lòng đăng nhập để chỉnh chất lượng', 'warning'); };
            } else {
                autoItem.onclick = (e) => {
                    e.stopPropagation();
                    this.setQuality(-1);
                    this.updateQualityUI(-1);
                };
            }
            list.appendChild(autoItem);
        }

        // Sort levels high to low for UI
        const sortedUiLevels = [...uiLevels].sort((a, b) => b.height - a.height);

        sortedUiLevels.forEach((level) => {
            const item = document.createElement('div');
            item.className = 'txa-menu-item' + (currentLevel === level.originalIndex ? ' active' : '');
            item.dataset.quality = level.originalIndex; // Ensure dataset is set

            if (this.options.isGuest) item.classList.add('disabled');

            let label = '';

            // Priority 1: Resolution based
            if (level.height && level.height > 0) {
                label = level.height + 'p';
                if (level.height >= 2160) label = '2160p 4K';
                else if (level.height >= 1440) label = '1440p 2K';
                else if (level.height >= 1080) label = '1080p FHD';
                else if (level.height >= 720) label = '720p HD';
            }

            // Priority 2: Level Name from Manifest
            if ((!label || label === '0p') && level.name) {
                label = level.name;
            }

            // Priority 3: Inference from Config (Single Custom Label)
            if (!label || label === '0p') {
                const specialLabels = qList.filter(q =>
                    q !== 'auto' && !q.endsWith('p') && !['4k', '2k', 'fullhd', 'hd'].includes(q.toLowerCase())
                );

                if (specialLabels.length === 1) {
                    label = specialLabels[0]; // Keep original case
                } else if (specialLabels.length > 1) {
                    label = level.bitrate ? `SD (${(level.bitrate / 1000).toFixed(0)}k)` : `Quality ${level.originalIndex}`;
                } else {
                    label = level.bitrate ? `SD (${(level.bitrate / 1000).toFixed(0)}k)` : 'Original';
                }
            }

            const bitrate = level.bitrate ? ` ${(level.bitrate / 1000000).toFixed(1)} Mbps` : '';
            const isPremiumQuality = level.height >= 1080;
            if (this.options.isGuest && isPremiumQuality) {
                item.innerHTML = `<span>${label}</span><span style="background:#facc15;color:#000;font-size:8px;padding:2px 4px;border-radius:4px;font-weight:900;margin-left:8px;">PRO</span>`;
                item.style.opacity = '0.7';
                item.onclick = (e) => {
                    e.stopPropagation();
                    this.showToast('Vui lòng đăng nhập để xem chất lượng ' + label, 'warning');
                };
            } else {
                item.innerHTML = `<span>${label}</span><span style="opacity:0.5;font-size:11px;">${bitrate}</span>`;
                item.onclick = (e) => {
                    e.stopPropagation();
                    this.setQuality(level.originalIndex);
                    this.updateQualityUI(level.originalIndex);

                    // For dummy levels (MP4), give immediate feedback as setQuality HLS logic won't run
                    if (level.originalIndex <= -100) {
                        this.showFeedback('text', `Quality: ${label}`);
                    }
                };
            }
            list.appendChild(item);
        });

        // Ensure "Auto" is the default selection if currentLevel is -1
        this.updateQualityUI(currentLevel);

        // Apply Default Quality Logic (Moved inside function)
        let targetLevel = null;
        const savedQ = localStorage.getItem('txa-quality');

        // Check against `uiLevels` (variable from above scope)
        if (savedQ !== null && !this.options.isGuest) {
            const parsed = parseInt(savedQ);
            const isStillAllowed = parsed === -1 || uiLevels.some(l => l.originalIndex === parsed);
            if (isStillAllowed) {
                targetLevel = parsed;
            } else {
                targetLevel = -1;
                localStorage.removeItem('txa-quality');
            }
        } else if (this.options.maxQuality && !this.options.isGuest) {
            targetLevel = -1;
        }

        if (targetLevel !== null && targetLevel !== undefined) {
            this.setQuality(targetLevel);
            this.updateQualityUI(targetLevel);
        }

        if (uiLevels.length < levels.length) {
            this.enforceQualityRestriction(availableLevels, uiLevels);
        }
    }

    /**
     * HARD QUALITY ENFORCEMENT
     * Physically removes disallowed levels from HLS.js manifest
     * and sets autoLevelCapping + LEVEL_SWITCHING interceptor as fallback.
     * This ensures ABR can NEVER select a quality outside admin's config.
     */
    enforceQualityRestriction(allLevels, allowedLevels) {
        const allowedIndices = new Set(allowedLevels.map(l => l.originalIndex));

        if (this.hls) {
            // Strategy 1: Remove levels from HLS.js (v1.4+)
            // We must remove from highest index to lowest to avoid index shifting
            const toRemove = allLevels
                .filter(l => !allowedIndices.has(l.originalIndex))
                .sort((a, b) => b.originalIndex - a.originalIndex);

            if (typeof this.hls.removeLevel === 'function') {
                // Build index mapping: old index → new index after removals
                this._qualityIndexMap = {};
                let newIdx = 0;

                for (const lvl of allLevels.sort((a, b) => a.originalIndex - b.originalIndex)) {
                    if (allowedIndices.has(lvl.originalIndex)) {
                        this._qualityIndexMap[lvl.originalIndex] = newIdx;
                        newIdx++;
                    }
                }

                // Actually remove the levels (reverse order to keep indices stable)
                toRemove.forEach(lvl => {
                    try {
                        this.hls.removeLevel(lvl.originalIndex);
                    } catch (e) {
                        // Silently fail if removeLevel not available on this version
                    }
                });

                // After removal: cap auto to available levels
                const newMaxIdx = this.hls.levels.length - 1;
                if (newMaxIdx >= 0) {
                    this.hls.autoLevelCapping = newMaxIdx;
                }

                // Remap onclick handlers for quality items
                const qualityItems = this.container.querySelectorAll('#txa-list-quality .txa-menu-item[data-quality]');
                // Items' data-quality may refer to old indices which no longer exist
            } else {
                // Strategy 2: Fallback for older HLS.js without removeLevel
                // Use autoLevelCapping for max, and LEVEL_SWITCHING to block disallowed
                const maxAllowed = Math.max(...allowedIndices);
                this.hls.autoLevelCapping = maxAllowed;

                // Intercept level switching to block non-allowed levels
                this.hls.on(Hls.Events.LEVEL_SWITCHING, (event, data) => {
                    if (!allowedIndices.has(data.level)) {
                        // Force back to nearest allowed level
                        const nearest = [...allowedIndices].sort((a, b) =>
                            Math.abs(a - data.level) - Math.abs(b - data.level)
                        )[0];
                        if (nearest !== undefined) {
                            this.hls.currentLevel = nearest;
                        }
                    }
                });
            }
        } else if (this.dashPlayer) {
            // DashJS: Use maxBitrate and minBitrate constraints
            const allowedBitrates = allowedLevels.map(l => l.bitrate).filter(Boolean);
            if (allowedBitrates.length > 0) {
                const maxBr = Math.max(...allowedBitrates);
                const minBr = Math.min(...allowedBitrates);
                this.dashPlayer.updateSettings({
                    'streaming': {
                        'abr': {
                            'maxBitrate': { 'video': maxBr },
                            'minBitrate': { 'video': minBr }
                        }
                    }
                });
            }
        }
    }

    setQuality(levelIndex) {
        if (this.options.isGuest) return;

        // Show immediate loading indicator when switching quality
        if (this.showLoader) {
            this.showLoader(50);
            const loadText = this.container.querySelector('#txa-load-text');
            if (loadText) loadText.textContent = 'Đang chuyển đổi chất lượng...';
        }

        if (this.hls) {
            // Check if we need to force a redraw or buffer clear
            const wasPlaying = !this.video.paused;
            this.hls.currentLevel = levelIndex;

            // Fix for "stuck/frozen" frames on some browsers:
            // Briefly pause and play to force-refresh the decoder if it was playing
            if (wasPlaying) {
                setTimeout(() => {
                    if (this.video.paused) this.video.play().catch(() => { });
                }, 100);
            }
        } else if (this.dashPlayer) {
            const wasPlaying = !this.video.paused;
            if (levelIndex === -1) {
                this.dashPlayer.updateSettings({ 'streaming': { 'abr': { 'autoSwitchBitrate': { 'video': true } } } });
            } else {
                this.dashPlayer.updateSettings({ 'streaming': { 'abr': { 'autoSwitchBitrate': { 'video': false } } } });
                this.dashPlayer.setQualityFor('video', levelIndex);
            }
            if (wasPlaying) {
                setTimeout(() => {
                    if (this.video.paused) this.video.play().catch(() => { });
                }, 100);
            }

            // For DASH, hide loader after a short delay or logic (simplification)
            setTimeout(() => this.hideLoader && this.hideLoader(), 1500);
        } else if (this._mp4Levels.length > 0 && levelIndex >= 0) {
            // v6.5.2 Switching between Direct MP4 files
            // Handle originalIndex mapping back to our _mp4Levels
            const newLevel = this._mp4Levels.find(l => l.originalIndex === levelIndex) || this._mp4Levels[levelIndex];

            if (newLevel && newLevel.url !== (this._lastMP4Url || this.options.videoUrl)) {
                const currentTime = this.video.currentTime;
                const wasPlaying = !this.video.paused;

                if (this.showLoader) this.showLoader(50);

                this._lastMP4Url = newLevel.url;
                this.video.src = newLevel.url;

                this.video.onloadedmetadata = () => {
                    this.video.currentTime = currentTime;
                    if (wasPlaying) this.video.play().catch(() => { });
                    this.hideLoader && this.hideLoader();
                    this.generateQualityList(); // Update UI active state
                    this.video.onloadedmetadata = null;
                };
            }
        }

        // Save preference
        localStorage.setItem('txa-quality', levelIndex);

        // Close settings menu
        this.navSettings('main');
    }

    updateQualityUI(levelIndex) {
        const items = this.container.querySelectorAll('#txa-list-quality .txa-menu-item');
        let activeLabel = 'Auto';
        let shortLabel = 'Auto';
        let realResolution = ''; // New: Track actual playing resolution

        // 1. Detect Real Resolution used by Auto (-1)
        if (levelIndex === -1 && this.hls) {
            // HLS: Use currentLevel (playing) or loadLevel (loading)
            const lvlIdx = this.hls.currentLevel !== -1 ? this.hls.currentLevel : this.hls.loadLevel;
            if (lvlIdx !== -1 && this.hls.levels && this.hls.levels[lvlIdx]) {
                const lvl = this.hls.levels[lvlIdx];
                if (lvl && lvl.height) realResolution = lvl.height;
            }
        } else if (levelIndex === -1 && this.dashPlayer) {
            // DASH: Logic if needed
        }

        items.forEach(item => {
            item.classList.remove('active');
            const icon = item.querySelector('.fa-check');
            if (icon) icon.remove();

            if (parseInt(item.dataset.quality) === levelIndex) {
                item.classList.add('active');

                const check = document.createElement('i');
                check.className = 'fas fa-check';
                check.style.marginLeft = 'auto';
                check.style.color = 'var(--txa-brand)';
                check.style.fontSize = '12px';
                item.appendChild(check);

                const textSpan = item.querySelector('span');
                if (textSpan) {
                    activeLabel = textSpan.textContent;

                    // Generate Short Label for Badge
                    if (levelIndex === -1) {
                        shortLabel = 'Auto';
                        // Keep pure Auto for badge text to avoid clutter, 
                        // but we will use realResolution for color coding below
                    } else {
                        shortLabel = activeLabel
                            .replace(' UHD', '')
                            .replace(' QHD', '')
                            .replace(' FHD', '')
                            .replace(' HD', '')
                            .replace('p', '');
                    }
                }
            }
        });

        // Update Parent Menu Text
        const lbl = this.container.querySelector('#txa-lbl-quality');
        if (lbl) {
            // If Auto, append real resolution dynamically
            if (levelIndex === -1 && realResolution) {
                lbl.textContent = `Auto (${realResolution}p)`;
            } else {
                lbl.textContent = activeLabel;
            }
        }

        // Update Settings Button Badge
        const badge = this.container.querySelector('#txa-quality-badge');
        if (badge) {
            // If Auto, show actual res if we have it? Or just 'Auto'?
            // "SHOW CURENT QUALITY ON BAGE ICON SETTINGS" -> User wants to see resolution
            if (levelIndex === -1 && realResolution) {
                badge.textContent = `${realResolution}p`; // e.g. "720p"
            } else {
                badge.textContent = shortLabel; // "1080", "AUTO"
            }

            // Color Coding
            badge.style.background = 'rgba(255,255,255,0.2)';
            badge.style.color = '#fff';
            badge.style.fontWeight = 'normal';
            badge.style.boxShadow = 'none';

            // Determine effective resolution for styling
            let effectiveRes = realResolution ? parseInt(realResolution) : 0;
            if (levelIndex !== -1) effectiveRes = parseInt(shortLabel) || 0;
            if (shortLabel.includes('4K')) effectiveRes = 2160;

            if (effectiveRes >= 2160) { // 4K
                badge.style.background = '#f43f5e'; // Rose
                badge.style.boxShadow = '0 0 10px rgba(244, 63, 94, 0.4)';
                badge.style.fontWeight = 'bold';
            } else if (effectiveRes >= 1080) { // FHD
                badge.style.background = '#eab308'; // Yellow
                badge.style.color = '#000';
                badge.style.fontWeight = '800';
            } else if (effectiveRes >= 720) { // HD
                badge.style.background = '#3b82f6'; // Blue
            } else if (activeLabel === 'Auto' || levelIndex === -1) {
                // Low res auto or unknown
                badge.style.background = 'var(--txa-brand)';
            }
        }

        // Toast Notification
        if (this._lastQualityIndex !== levelIndex) {
            if (this._lastQualityIndex !== undefined) {
                let msg = `Đã chuyển sang: ${activeLabel}`;
                if (levelIndex === -1 && realResolution) msg = `Tự động (${realResolution}p)`;
                this.showToast(msg, 'info');
            }
            this._lastQualityIndex = levelIndex;
        }
    }

    renderMarkers() {
        const container = this.container.querySelector('#txa-markers');
        if (!container) return;

        // Always reset markers first, even if duration is not ready
        container.innerHTML = '';

        if (!this.video || !this.video.duration || !this.options.markers) return;

        const dur = this.video.duration;
        const { intro, outro } = this.options.markers;

        if (intro && intro[1] > intro[0]) {
            const zone = document.createElement('div');
            zone.className = 'txa-marker-zone intro';
            zone.style.left = (intro[0] / dur * 100) + '%';
            zone.style.width = ((intro[1] - intro[0]) / dur * 100) + '%';
            container.appendChild(zone);

            const dotStart = document.createElement('div');
            dotStart.className = 'txa-marker-dot intro-start';
            dotStart.style.left = (intro[0] / dur * 100) + '%';
            container.appendChild(dotStart);

            const dotEnd = document.createElement('div');
            dotEnd.className = 'txa-marker-dot intro-end';
            dotEnd.style.left = (intro[1] / dur * 100) + '%';
            container.appendChild(dotEnd);
        }

        if (outro && (outro[1] > outro[0] || (outro[0] > 0 && (outro[1] === 0 || !outro[1])))) {
            const effectiveOutroOut = (outro[1] > 0) ? outro[1] : dur;
            const zone = document.createElement('div');
            zone.className = 'txa-marker-zone outro';
            zone.style.left = (outro[0] / dur * 100) + '%';
            zone.style.width = ((effectiveOutroOut - outro[0]) / dur * 100) + '%';
            container.appendChild(zone);

            const dotStart = document.createElement('div');
            dotStart.className = 'txa-marker-dot outro-start';
            dotStart.style.left = (outro[0] / dur * 100) + '%';
            container.appendChild(dotStart);

            const dotEnd = document.createElement('div');
            dotEnd.className = 'txa-marker-dot outro-end';
            dotEnd.style.left = (effectiveOutroOut / dur * 100) + '%';
            container.appendChild(dotEnd);
        }
    }

    initSubtitles() {
        const subs = this.options.subtitles || [];
        const hasSubs = subs.length > 0;

        // 1. Update Internal Toolbar Track support if needed
        // (Clearing old tracks first)
        // Remove existing track elements from video to prevent duplicates
        Array.from(this.video.children).filter(child => child.tagName === 'TRACK').forEach(track => track.remove());

        subs.forEach((sub, index) => {
            const track = document.createElement('track');
            track.kind = 'subtitles';
            track.label = sub.label || sub.lang;
            track.srclang = sub.lang;
            // Handle both URL (src/file) and inline content
            if (sub.src || sub.file) {
                track.src = sub.src || sub.file;
            } else if (sub.content) {
                // Create blob URL for inline VTT content
                const blob = new Blob([sub.content], { type: 'text/vtt' });
                track.src = URL.createObjectURL(blob);
            }
            this.video.appendChild(track);
        });

        // 2. Update Settings Menu UI
        const list = this.container.querySelector('#txa-list-subs');
        const itemSubs = this.container.querySelector('#txa-item-subs');
        const btnSubs = this.container.querySelector('#txa-cc');

        if (itemSubs) itemSubs.style.display = hasSubs ? 'flex' : 'none';
        if (btnSubs) {
            btnSubs.style.display = hasSubs ? '' : 'none';
            const icon = btnSubs.querySelector('i');
            if (icon) {
                icon.style.opacity = hasSubs ? '1' : '0.4';
                icon.style.filter = hasSubs ? 'none' : 'grayscale(1)';
            }
            const tip = btnSubs.querySelector('.txa-tooltip');
            if (tip) tip.textContent = hasSubs ? 'Subtitles (c)' : 'No Subtitles';
        }

        if (list) {
            list.innerHTML = `<div class="txa-menu-item" data-sub="-1">Off</div>`;
            subs.forEach((sub, index) => {
                const item = document.createElement('div');
                item.className = 'txa-menu-item';
                item.dataset.sub = index;
                item.innerHTML = `<span>${sub.label || sub.lang}</span><span style="font-size:10px;opacity:0.5;">${sub.lang || ''}</span>`;
                item.onclick = (e) => {
                    e.stopPropagation();
                    this.toggleSub(index);
                };
                list.appendChild(item);
            });

            // Auto-load first subtitle if enabled or newly switched
            // If activeSubIdx is -1 (Off) and there are subs, default to first
            // If activeSubIdx is set, try to re-activate it
            if (hasSubs) {
                if (this.activeSubIdx === undefined || this.activeSubIdx === -1) {
                    this.toggleSub(0);
                    list.querySelector('[data-sub="0"]')?.classList.add('active');
                } else {
                    this.toggleSub(this.activeSubIdx);
                    list.querySelector(`[data-sub="${this.activeSubIdx}"]`)?.classList.add('active');
                }
            } else {
                this.toggleSub(-1); // Ensure subtitles are off if none are available
                list.querySelector('[data-sub="-1"]')?.classList.add('active');
            }
        }
    }


    bindEvents() {
        const el = (s) => this.container.querySelector(s);

        // Play/Pause
        const toggle = () => this.togglePlay();
        const playBtnMain = el('#txa-play');
        if (playBtnMain) playBtnMain.onclick = toggle;

        // Prev/Next Navigation
        const prevBtn = el('#txa-prev');
        const nextBtn = el('#txa-next');
        if (prevBtn) prevBtn.onclick = (e) => {
            if (e) e.preventDefault();
            if (this.options.prevEpisodeUrl && typeof window.switchEpisodeSeamless === 'function') {
                window.switchEpisodeSeamless(this.options.prevEpisodeUrl);
            } else if (this.options.prevEpisodeUrl) {
                window.location.href = this.options.prevEpisodeUrl;
            }
        };
        if (nextBtn) nextBtn.onclick = (e) => {
            if (e) e.preventDefault();
            if (this.options.nextEpisodeUrl && typeof window.switchEpisodeSeamless === 'function') {
                window.switchEpisodeSeamless(this.options.nextEpisodeUrl);
            } else if (this.options.nextEpisodeUrl) {
                window.location.href = this.options.nextEpisodeUrl;
            }
        };
        if (this.video) this.video.onclick = toggle;

        const centerPlay = el('#txa-center-play');
        if (centerPlay) centerPlay.onclick = toggle;

        const zoneL = el('#txa-zone-l');
        if (zoneL) zoneL.onclick = (e) => {
            if (e.detail === 1) {
                this._clickTimer = setTimeout(() => toggle(), 250);
            } else if (e.detail > 1) {
                clearTimeout(this._clickTimer);
            }
        };

        const zoneR = el('#txa-zone-r');
        if (zoneR) zoneR.onclick = (e) => {
            if (e.detail === 1) {
                this._clickTimer = setTimeout(() => toggle(), 250);
            } else if (e.detail > 1) {
                clearTimeout(this._clickTimer);
            }
        };

        const replayBtnMain = el('#txa-replay-btn');
        if (replayBtnMain) replayBtnMain.onclick = () => {
            if (this.video) {
                this.video.currentTime = 0;
                this.video.play();
            }
            const replayDiv = el('#txa-replay');
            if (replayDiv) replayDiv.classList.remove('show');
        };

        this.video.addEventListener('play', () => {
            if (this.destroyed) return;
            const playBtn = el('#txa-play');
            if (playBtn) playBtn.innerHTML = '<i class="fas fa-pause"></i><div class="txa-tooltip">Pause (k)</div>';
            this.animateCenter('play');
            const replayBtn = el('#txa-replay');
            if (replayBtn) replayBtn.classList.remove('show');
            if (this.wrapper) this.wrapper.classList.add('video-playing');
            const cp = el('#txa-center-play');
            if (cp) cp.classList.remove('show');
            this.showUI(); // Auto hide after playing starts
        });

        this.video.addEventListener('pause', () => {
            if (this.destroyed) return;
            const playBtn = el('#txa-play');
            if (playBtn) playBtn.innerHTML = '<i class="fas fa-play"></i><div class="txa-tooltip">Play (k)</div>';
            this.animateCenter('pause');
            this.showUI(false); // Maintain UI while paused
            if (this.wrapper) this.wrapper.classList.remove('video-playing');
            const cp = el('#txa-center-play');
            if (cp) cp.classList.add('show');
        });

        // Video Error Handler
        this.video.addEventListener('error', () => {
            if (this.destroyed) return;

            const error = this.video.error;
            if (!error) return;

            // Report native video error to database
            this.reportErrorToServer('nativeVideoError', error.message || 'Lỗi phát video HTML5', { code: error.code });

            let errorMsg = 'Lỗi không xác định';
            let shouldRetry = false;

            switch (error.code) {
                case MediaError.MEDIA_ERR_ABORTED:
                    errorMsg = 'Phát video bị hủy';
                    break;
                case MediaError.MEDIA_ERR_NETWORK:
                    errorMsg = 'Lỗi mạng khi load video';
                    shouldRetry = true;
                    break;
                case MediaError.MEDIA_ERR_DECODE:
                    errorMsg = 'Lỗi giải mã video';
                    break;
                case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
                    errorMsg = 'Nguồn video không hỗ trợ';
                    break;
            }

            console.error('[TXAPlayer] Video error:', error.code, errorMsg);

            // Hide loader
            const loader = el('#txa-loader');
            if (loader) loader.classList.add('hidden');

            // Show error toast
            this.showToast(`❌ ${errorMsg}`);

            // Auto retry for network errors
            if (shouldRetry && !this._isRetryingVideo) {
                this._isRetryingVideo = true;
                setTimeout(() => {
                    if (!this.destroyed && this.options.videoUrl) {
                        console.log('[TXAPlayer] Retrying video load...');
                        this.showToast('🔄 Đang thử load lại video...');

                        // Reload video source
                        this.video.src = this.options.videoUrl;
                        this.video.load();

                        // Show loader again
                        if (loader) loader.classList.remove('hidden');

                        setTimeout(() => {
                            this._isRetryingVideo = false;
                        }, 2000);
                    }
                }, 1500);
            }
        });

        this.video.addEventListener('ended', () => {
            if (this.destroyed) return;
            if (this.wrapper) this.wrapper.classList.remove('video-playing');
            if (!this.video.loop) {
                // Check if auto-next is enabled and we have next episode
                if (this.settings.autoNextEpisode && this.options.nextEpisodeUrl && !this._isAutoNextTriggered) {
                    // Show countdown overlay
                    this._showAutoNextCountdown();
                } else {
                    // Show replay button only if auto-next is not active
                    const replayBtn = el('#txa-replay');
                    if (replayBtn) replayBtn.classList.add('show');
                    if (this.wrapper) this.wrapper.classList.add('active-ui');
                }
            }
        });

        this.video.ondurationchange = () => {
            if (this.destroyed) return;
            this.renderMarkers();
        };

        const pWrap = el('#txa-progress');
        let pendingSeekPct = -1;



        const updateScrubbingUI = (pos, isDragOrClick = false) => {
            const duration = this.video?.duration || 0;
            const targetTime = pos * duration;

            // Only update the actual progress bar and main time if we are DRAGGING or explicitly CLICKING
            if (isDragOrClick || this.isDragging) {
                const playedEl = el('#txa-played');
                if (playedEl) playedEl.style.width = (pos * 100) + '%';

                const timeEl = el('#txa-time');
                if (timeEl) timeEl.textContent = this.formatTimeDisplay(targetTime);

                pendingSeekPct = pos;
            }

            // Tooltip and Preview ALWAYS follow on hover
            const tip = el('#txa-hover-time');
            if (tip) {
                const needHours = duration >= 3600;
                tip.textContent = this.formatTime(targetTime, needHours);
                tip.style.left = (pos * 100) + '%';
            }

            this._updatePreviewThumb(pos);
        };

        const updateHoverTooltip = (e, isDragOrClick = false) => {
            if (!pWrap) return;
            const rect = pWrap.getBoundingClientRect();
            const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            updateScrubbingUI(pos, isDragOrClick);
            return pos;
        };

        pWrap.onmousemove = (e) => {
            updateHoverTooltip(e, false); // Just hover tooltip
        };
        pWrap.onmousedown = (e) => {
            if (e.button !== 0) return; // Left click only
            this.isDragging = true;
            pWrap.classList.add('dragging');
            updateHoverTooltip(e, true);
        };

        // Desktop Long Press (2x Speed)
        let deskPressTimer = null;
        let isDeskLongPress = false;

        this.video.onmousedown = (e) => {
            if (this.detectMobile()) return;
            if (e.button !== 0) return; // Left click only

            deskPressTimer = setTimeout(() => {
                if (!this.video.paused) {
                    isDeskLongPress = true;
                    if (!this.originalSpeed) this.originalSpeed = this.video.playbackRate;
                    this.video.playbackRate = 2.0;

                    let speedOverlay = this.container.querySelector('.txa-speed-overlay');
                    if (!speedOverlay) {
                        speedOverlay = document.createElement('div');
                        speedOverlay.className = 'txa-speed-overlay';
                        speedOverlay.innerHTML = '<i class="fas fa-forward"></i> 2x Tốc độ';
                        this.container.appendChild(speedOverlay);
                    }
                    this.wrapper.classList.add('hide-controls');
                    setTimeout(() => speedOverlay.classList.add('show'), 10);
                }
            }, 500);
        };
        pWrap.onclick = (e) => {
            if (!this.isDragging) {
                const rect = pWrap.getBoundingClientRect();
                const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
                this.safeSeek(pos * this.video.duration);
            }
        };

        // Improved Mobile Touch Interaction
        const handleTouchProgress = (e) => {
            if (e.touches && e.touches[0]) {
                const rect = pWrap.getBoundingClientRect();
                const pos = Math.max(0, Math.min(1, (e.touches[0].clientX - rect.left) / rect.width));
                updateScrubbingUI(pos);
                // Show UI to prevent controls hiding while dragging
                this.wrapper.classList.add('active-ui');
                e.preventDefault(); // Stop browser back/scroll
                e.stopPropagation();
            }
        };

        pWrap.addEventListener('touchstart', (e) => {
            this.isDragging = true;
            pWrap.classList.add('dragging');
            handleTouchProgress(e);
        }, { passive: false });

        pWrap.addEventListener('touchmove', (e) => {
            if (this.isDragging) handleTouchProgress(e);
        }, { passive: false });

        const endTouchProgress = (e) => {
            if (this.isDragging) {
                this.isDragging = false;
                pWrap.classList.remove('dragging');
                if (pendingSeekPct !== -1) {
                    this.safeSeek(pendingSeekPct * this.video.duration);
                    pendingSeekPct = -1;
                }
            }
        };

        pWrap.addEventListener('touchend', endTouchProgress);
        pWrap.addEventListener('touchcancel', endTouchProgress);

        this._handlers.winMouseMove = (e) => {
            if (this.isDragging) {
                const rect = pWrap.getBoundingClientRect();
                const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
                updateScrubbingUI(pos);
            }
        };
        this._handlers.winMouseUp = () => {
            if (this.isDragging) {
                this.isDragging = false;
                pWrap.classList.remove('dragging');
                if (pendingSeekPct !== -1) {
                    this.safeSeek(pendingSeekPct * this.video.duration);
                    pendingSeekPct = -1;
                }
            }

            if (deskPressTimer) clearTimeout(deskPressTimer);
            if (isDeskLongPress) {
                isDeskLongPress = false;
                this.video.playbackRate = this.originalSpeed || 1.0;
                const speedOverlay = this.container.querySelector('.txa-speed-overlay');
                if (speedOverlay) speedOverlay.classList.remove('show');
                this.wrapper.classList.remove('hide-controls');
            }
        };

        window.addEventListener('mousemove', this._handlers.winMouseMove);
        window.addEventListener('mouseup', this._handlers.winMouseUp);

        this.video.addEventListener('timeupdate', () => {
            if (this.destroyed) return;
            this.updateProgress();
        });

        this.video.addEventListener('play', () => this.showUI());
        this.video.addEventListener('pause', () => this.showUI(false));
        this.video.addEventListener('playing', () => this.showUI());

        // v6.4.1 - Enhanced Mobile UI Handling
        if (this.detectMobile()) {
            // Remove redundant touchstart on video which might reset timer too often
            // Instead rely on handleMobileEvents wrapper listener

            // Listen for orientation/resize to update clock visibility immediately
            window.addEventListener('resize', () => this.updateClockVisibility());
            window.addEventListener('orientationchange', () => {
                setTimeout(() => this.updateClockVisibility(), 200);
            });
        }

        el('#txa-mute').onclick = () => { this.video.muted = !this.video.muted; this.updateVolUI(); this.saveSettings(); };
        const volSlider = el('#txa-vol');
        const volTooltip = el('#txa-vol-tooltip');

        const showVolTooltip = () => volTooltip?.classList.add('visible');
        const hideVolTooltip = () => { if (!this._isVolDragging) volTooltip?.classList.remove('visible'); };

        volSlider.oninput = (e) => {
            this.video.volume = e.target.value;
            this.video.muted = false;
            this.updateVolUI();
            showVolTooltip();
        };

        // v6.5.2 - Centralized volume/rate sync to always save state correctly
        this.video.addEventListener('volumechange', () => {
            this.updateVolUI();
            this.saveSettings();
        });

        this.video.addEventListener('ratechange', () => {
            this.saveSettings();
        });

        volSlider.onmousedown = () => { this._isVolDragging = true; showVolTooltip(); };
        volSlider.onmouseenter = showVolTooltip;
        volSlider.onmouseleave = hideVolTooltip;

        window.addEventListener('mouseup', () => {
            if (this._isVolDragging) {
                this._isVolDragging = false;
                hideVolTooltip();
            }
        });

        el('#txa-settings').onclick = (e) => { e.stopPropagation(); el('#txa-panel').classList.toggle('active'); this.navSettings('main'); };
        el('#txa-fs').onclick = () => this.toggleFS();
        el('#txa-pip').onclick = () => this.toggleNativePiP();

        // TXA PRO Toggles
        const autoSkipBtn = el('#txa-auto-skip');
        if (autoSkipBtn) autoSkipBtn.onclick = (e) => { e.stopPropagation(); this.toggleAutoSkipIntro(); };

        const autoNextBtn = el('#txa-auto-next');
        if (autoNextBtn) autoNextBtn.onclick = (e) => { e.stopPropagation(); this.toggleAutoNextEpisode(); };

        // DETECTION PIP/FS TO UPDATE UI
        this.video.onenterpictureinpicture = () => {
            const pipBtn = el('#txa-pip'); // Added null check
            if (pipBtn) pipBtn.innerHTML = '<i class="fas fa-window-restore"></i><div class="txa-tooltip">Exit Mini Player (p)</div>';
        };
        this.video.onleavepictureinpicture = () => {
            const pipBtn = el('#txa-pip'); // Added null check
            if (pipBtn) pipBtn.innerHTML = '<i class="fas fa-clone"></i><div class="txa-tooltip">Mini Player (p)</div>';
        };
        this._handlers.docFSChange = () => {
            const fsBtn = el('#txa-fs');
            if (document.fullscreenElement) {
                this.wrapper.classList.add('fullscreen-mode');
                if (fsBtn) fsBtn.innerHTML = '<i class="fas fa-compress"></i><div class="txa-tooltip">Exit Fullscreen (f)</div>';
            } else {
                this.wrapper.classList.remove('fullscreen-mode');
                if (fsBtn) fsBtn.innerHTML = '<i class="fas fa-expand"></i><div class="txa-tooltip">Fullscreen (f)</div>';
            }
            this.showUI(); // Trigger timer on FS change
            this.updateClockVisibility();
        };
        document.addEventListener('fullscreenchange', this._handlers.docFSChange);

        el('#txa-nc-cancel').onclick = (e) => {
            e.stopPropagation();

            // Clear countdown interval if exists
            if (this._autoNextCountdownInterval) {
                clearInterval(this._autoNextCountdownInterval);
                this._autoNextCountdownInterval = null;
            }

            this._isAutoNextTriggered = true; // Block auto-trigger for this episode
            el('#txa-next-countdown').classList.remove('show');
            if (this.wrapper) this.wrapper.classList.remove('has-countdown');
            this.showToast('Đã hủy tự động chuyển tập');

            // Change "Skip Outro" button text if next episode exists
            const skipOutro = this.container.querySelector('#txa-skip-outro');
            if (skipOutro && this.options.nextEpisodeUrl) {
                skipOutro.innerHTML = '<i class="fas fa-step-forward"></i> Tập Tiếp';
                skipOutro.style.display = 'block'; // Ensure it's visible now
            }
        };

        el('#txa-nc-next').onclick = (e) => {
            e.preventDefault();
            e.stopPropagation();

            // Clear countdown interval if exists
            if (this._autoNextCountdownInterval) {
                clearInterval(this._autoNextCountdownInterval);
                this._autoNextCountdownInterval = null;
            }

            this._isAutoNextTriggered = true;
            el('#txa-next-countdown').classList.remove('show');
            if (this.wrapper) this.wrapper.classList.remove('has-countdown');

            this._triggerAutoNext();
        };

        el('#txa-skip-intro').onclick = () => this.skipIntro();
        el('#txa-skip-outro').onclick = () => this.skipOutro();

        this.container.querySelectorAll('[data-goto]').forEach(i => i.onclick = (e) => { e.stopPropagation(); this.navSettings(i.dataset.goto); });
        this.container.querySelectorAll('[data-back]').forEach(i => i.onclick = (e) => { e.stopPropagation(); this.navSettings(i.dataset.back); });

        // Speed Menu Clicks
        this.container.querySelectorAll('[data-speed]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            this.setSpeed(parseFloat(i.dataset.speed));
            this.container.querySelectorAll('[data-speed]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
        });

        // Ratio Menu Clicks
        this.container.querySelectorAll('[data-ratio]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            this.setAspectRatio(i.dataset.ratio);
            this.container.querySelectorAll('[data-ratio]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
        });

        // Flip Menu Clicks
        this.container.querySelectorAll('[data-flip]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            this.setVideoFlip(i.dataset.flip);
            this.container.querySelectorAll('[data-flip]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
        });

        // Subtitle Size Menu
        this.container.querySelectorAll('[data-subsize]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            const cap = el('#txa-captions');
            if (cap) {
                cap.classList.remove('size-mini', 'size-small', 'size-medium', 'size-large', 'size-jumbo');
                cap.classList.add('size-' + i.dataset.subsize);
            }
            this.container.querySelectorAll('[data-subsize]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
            this.saveSettings();
        });

        // Subtitle Weight Menu
        this.container.querySelectorAll('[data-subweight]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            const cap = el('#txa-captions');
            if (cap) {
                cap.classList.remove('weight-normal', 'weight-bold');
                cap.classList.add('weight-' + i.dataset.subweight);
            }
            this.container.querySelectorAll('[data-subweight]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
            this.saveSettings();
        });

        // Subtitle Background Menu
        this.container.querySelectorAll('[data-subbg]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            const cap = el('#txa-captions');
            if (cap) {
                cap.classList.remove('bg-none', 'bg-dark', 'bg-light', 'bg-glass', 'bg-default');
                if (i.dataset.subbg !== 'default') cap.classList.add('bg-' + i.dataset.subbg);
            }
            this.container.querySelectorAll('[data-subbg]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
            this.saveSettings();
        });

        // Subtitle Color Menu
        this.container.querySelectorAll('[data-subcolor]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            const cap = el('#txa-captions');
            if (cap) {
                cap.classList.remove('color-white', 'color-yellow', 'color-orange', 'color-red', 'color-green', 'color-cyan', 'color-pink', 'color-violet');
                cap.classList.add('color-' + i.dataset.subcolor);
            }
            this.container.querySelectorAll('[data-subcolor]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
            this.saveSettings();
        });

        // Subtitle Stroke Toggle
        const strokeToggle = el('#txa-substroke-toggle');
        const strokePanel = el('#txa-stroke-panel');
        if (strokeToggle) {
            strokeToggle.onchange = (e) => {
                const cap = el('#txa-captions');
                if (cap) {
                    if (e.target.checked) {
                        cap.classList.add('stroke-on');
                        strokePanel.classList.add('active');
                    } else {
                        cap.classList.remove('stroke-on');
                        strokePanel.classList.remove('active');
                    }
                }
                this.saveSettings();
            };
        }

        // Subtitle Stroke Color
        this.container.querySelectorAll('[data-substroke]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            const cap = el('#txa-captions');
            if (cap) {
                cap.classList.remove('stroke-white', 'stroke-black', 'stroke-yellow', 'stroke-red', 'stroke-blue');
                cap.classList.add('stroke-' + i.dataset.substroke);
            }
            this.container.querySelectorAll('[data-substroke]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
            this.saveSettings();
        });

        // Real-time Clock Toggle v6.4.0
        const clockToggle = el('#txa-clock-toggle');
        if (clockToggle) {
            clockToggle.checked = this.settings.showRealTime;
            clockToggle.onchange = (e) => {
                this.settings.showRealTime = e.target.checked;
                this.updateClockVisibility();
                this.saveSettings();
            };
        }

        // Clock Format Selection
        this.container.querySelectorAll('[data-clock]').forEach(i => i.onclick = (e) => {
            e.stopPropagation();
            this.settings.clockFormat = i.dataset.clock;
            this.container.querySelectorAll('[data-clock]').forEach(o => o.classList.remove('active'));
            i.classList.add('active');
            const lbl = el('#txa-lbl-clock');
            if (lbl) lbl.textContent = this.settings.clockFormat;
            this.updateClock(); // Immediate update
            this.saveSettings();
        });

        // v6.4.5 - Robust Click/Touch Outside Logic for Panels
        this._handlers.docClick = (e) => {
            if (this.destroyed) return;

            const panel = el('#txa-panel');
            const settingsBtn = el('#txa-settings');
            const ctx = el('#txa-ctx');
            const stats = el('#txa-stats-panel');

            // 1. Settings Panel Click Outside
            if (panel && panel.classList.contains('active')) {
                // Check if target is NOT inside panel AND NOT inside settings button
                if (!panel.contains(e.target) && (!settingsBtn || !settingsBtn.contains(e.target))) {
                    panel.classList.remove('active');
                }
            }

            // 2. Context Menu Click Outside
            if (ctx && ctx.classList.contains('active')) {
                if (!ctx.contains(e.target)) ctx.classList.remove('active');
            }

            // 3. Stats Panel Click Outside
            if (stats && stats.classList.contains('active')) {
                if (!stats.contains(e.target) && !e.target.closest('#txa-ctx-stats')) {
                    this.toggleStatsPanel(); // Use clear cleanup logic
                }
            }
        };
        document.addEventListener('click', this._handlers.docClick);
        document.addEventListener('touchstart', this._handlers.docClick, { passive: true });


        this.wrapper.onmousemove = (e) => {
            if (this.detectMobile()) return; // Absolutely disable bottom hover for mobile

            const rect = this.wrapper.getBoundingClientRect();
            const y = e.clientY - rect.top;
            // Only show UI if cursor is in the bottom 30% or if video is paused (Desktop)
            if (y > rect.height * 0.7 || this.video.paused) {
                this.showUI();
            }
        };
        this.wrapper.onclick = (e) => {
            // Desktop click logic (Mobile handled in handleMobileEvents)
            if (!this.detectMobile()) {
                if (!e.target.closest('.txa-controls,.txa-panel,.txa-ctx,.txa-replay-overlay,.txa-loader,.txa-stats-panel,.txa-resume-overlay,.txa-next-countdown,.txa-skip-btn')) this.showUI();
            }
        };

        el('#txa-zone-l').ondblclick = () => this.seekAccumulated(-10);
        el('#txa-zone-r').ondblclick = () => this.seekAccumulated(10);

        // REMOVED: Scroll wheel volume control (user request)
        // this.wrapper.onwheel = (e) => { ... };

        el('#txa-cc').onclick = (e) => { e.stopPropagation(); this.toggleSubLoop(); };

        // SUBTITLE DRAGGING
        this.setupSubtitleDrag();

        // Initialize UI timer (Auto hide)
        this.showUI();
    }

    /**
     * Centralized UI visibility logic
     * @param {boolean} autoHide - Whether to start a timer to hide the UI
     */
    showUI(autoHide = true) {
        if (!this.wrapper || this.destroyed) return;
        this.wrapper.classList.add('active-ui');
        if (this._uiTimer) clearTimeout(this._uiTimer);

        // Always start timer if autoHide is requested
        if (autoHide && this.video) {
            const delay = this.detectMobile() ? 5000 : 3000;
            this._uiTimer = setTimeout(() => this.hideUI(), delay);
        }
    }

    hideUI() {
        if (!this.wrapper || this.destroyed) return;

        // Prevent hiding if video is paused
        if (!this.video || this.video.paused) return;

        // Prevent hiding if any interactable panel is open
        const el = (s) => this.container.querySelector(s);
        const panel = el('#txa-panel');
        const ctx = el('#txa-ctx');
        const stats = el('#txa-stats-panel');
        const shortcuts = document.querySelector('.txa-shortcuts-panel');

        if ((panel && panel.classList.contains('active')) ||
            (ctx && ctx.classList.contains('active')) ||
            (stats && stats.classList.contains('active')) ||
            (shortcuts)) {
            // Something is active, reset timer to try again later
            this.showUI();
            return;
        }

        this.wrapper.classList.remove('active-ui');
    }

    setupSubtitleDrag() {
        const captions = this.container.querySelector('#txa-captions');
        if (!captions) return;

        // Load saved position & styles
        const saved = this.loadSettings();
        if (saved.captionBottom) captions.style.bottom = saved.captionBottom + 'px';

        // Fix: Use pixel positioning if available
        if (saved.captionLeft !== undefined && saved.captionLeft !== null) {
            if (saved.captionLeft <= 100 && saved.captionIsPercent) {
                captions.style.left = saved.captionLeft + '%';
                captions.style.transform = 'translateX(-50%)';
            } else {
                captions.style.left = saved.captionLeft + 'px';
                captions.style.transform = 'none';
            }
        }

        // Apply saved styles
        if (saved.subSize) {
            captions.classList.add('size-' + saved.subSize);
            this.container.querySelectorAll('[data-subsize]').forEach(i => {
                i.classList.toggle('active', i.dataset.subsize === saved.subSize);
            });
        }
        if (saved.subBg) {
            if (saved.subBg !== 'default') captions.classList.add('bg-' + saved.subBg);
            this.container.querySelectorAll('[data-subbg]').forEach(i => {
                i.classList.toggle('active', i.dataset.subbg === saved.subBg);
            });
        }
        if (saved.subColor) {
            if (saved.subColor !== 'white') captions.classList.add('color-' + saved.subColor);
            this.container.querySelectorAll('[data-subcolor]').forEach(i => {
                i.classList.toggle('active', i.dataset.subcolor === saved.subColor);
            });
        }

        let isDragging = false;
        let startX = 0, startY = 0;
        let startLeft = 0, startBottom = 0;

        captions.addEventListener('mousedown', (e) => {
            isDragging = true;
            captions.classList.add('dragging');
            startX = e.clientX;
            startY = e.clientY;
            const style = getComputedStyle(captions);
            startBottom = parseInt(style.bottom) || 110;
            const rect = captions.getBoundingClientRect();
            const pRect = this.wrapper.getBoundingClientRect();

            // Calculate current relative position (Pixels)
            startLeft = rect.left - pRect.left;
            startBottom = pRect.bottom - rect.bottom;

            // Prepare for pixel drag
            captions.style.left = startLeft + 'px';
            captions.style.bottom = startBottom + 'px';
            captions.style.transform = 'none';
            e.preventDefault();
        });

        this._handlers.dragMouseMove = (e) => {
            if (!isDragging) return;
            const rect = this.wrapper.getBoundingClientRect();

            // Vertical movement
            const deltaY = startY - e.clientY;
            const newBottom = Math.max(20, Math.min(rect.height - 80, startBottom + deltaY));
            captions.style.bottom = newBottom + 'px';

            // Horizontal movement
            const deltaX = e.clientX - startX;
            const newLeft = Math.max(0, Math.min(rect.width - captions.offsetWidth, startLeft + deltaX)); // Boundary check
            captions.style.left = newLeft + 'px';
            captions.style.transform = 'none';
        };

        this._handlers.dragMouseUp = () => {
            if (isDragging) {
                isDragging = false;
                captions.classList.remove('dragging');
                // Save position (Pixels)
                const cfg = this.loadSettings();
                cfg.captionBottom = parseInt(captions.style.bottom);
                cfg.captionLeft = parseFloat(captions.style.left);
                cfg.captionIsPercent = false;
                localStorage.setItem('txa-txa-cfg', JSON.stringify(cfg));
            }
        };

        window.addEventListener('mousemove', this._handlers.dragMouseMove);
        window.addEventListener('mouseup', this._handlers.dragMouseUp);
    }

    togglePlay() {
        this._isExplicitToggle = true;
        this.video.paused ? this.video.play().catch(() => { }) : this.video.pause();
        // Clear the flag after a short delay
        setTimeout(() => { this._isExplicitToggle = false; }, 500);
    }

    animateCenter(type) {
        // Only run animation if it was an explicit user toggle
        if (!this._isExplicitToggle) return;

        // Remove existing if any
        let c = this.container.querySelector('.txa-center-feedback');
        if (!c) {
            c = document.createElement('div');
            c.className = 'txa-center-feedback';
            this.container.appendChild(c);
        }

        c.innerHTML = type === 'play' ? '<i class="fas fa-play"></i>' : '<i class="fas fa-pause"></i>';

        // Reset classes
        c.classList.remove('animate', 'animate-out');
        void c.offsetWidth; // Trigger reflow

        c.classList.add('animate');

        setTimeout(() => {
            if (c) {
                c.classList.add('animate-out');
                setTimeout(() => {
                    c.classList.remove('animate', 'animate-out');
                }, 400);
            }
        }, 400);
        if (window.navigator.vibrate) window.navigator.vibrate(15);
    }

    showFeedback(type, value = null) {
        const fb = this.container.querySelector('#txa-feedback');
        if (!fb) return;

        fb.classList.remove('high-priority'); // Reset

        if (type === 'volume') {
            fb.innerHTML = `<i class="fas fa-volume-${this.video.muted || this.video.volume === 0 ? 'mute' : this.video.volume < 0.5 ? 'down' : 'up'}"></i><span>${Math.round(this.video.volume * 100)}%</span>`;
        } else if (type === 'seek') {
            fb.innerHTML = `<i class="fas fa-forward"></i><span>${value}</span>`;
        } else if (type === 'text') {
            fb.innerHTML = `<span>${value}</span>`;
        } else if (type === 'high') {
            fb.innerHTML = `<span>${value}</span>`;
            fb.classList.add('high-priority');
        }

        fb.classList.add('show');
        clearTimeout(this.feedbackTimer);

        const duration = type === 'high' ? 3000 : 800;
        this.feedbackTimer = setTimeout(() => fb.classList.remove('show'), duration);
    }

    reportErrorToServer(errorType, errorMessage, errorDetails = {}) {
        const payload = {
            movie_slug: this.options.movieSlug || null,
            movie_name: this.options.title || null,
            episode_name: this.options.episodeName || null,
            error_type: errorType,
            error_message: errorMessage || '',
            error_details: {
                ...errorDetails,
                video_url: this.options.videoUrl || '',
                server_name: this.options.serverName || '',
                settings: this.settings || {},
                txa_version: typeof TXA_VERSION !== 'undefined' ? TXA_VERSION : 'v1.0'
            },
            browser_token: localStorage.getItem('zalo_browser_token') || null
        };

        fetch('/api/player/report-error', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .then(res => res.json())
        .then(data => {
            if (this.options.isAdmin) {
                console.log('[TXAPlayer] Error reported to server successfully:', data);
            }
        })
        .catch(err => {
            console.error('[TXAPlayer] Failed to report error to server:', err);
        });
    }

    _txaShowHlsError(msg, hlsData = null) {
        // Report HLS fatal error to database
        this.reportErrorToServer('hlsError', msg, hlsData);

        const loader = this.container?.querySelector('#txa-loader');
        if (!loader) return;

        loader.classList.remove('hidden');
        loader.style.pointerEvents = 'all';

        const spinner = loader.querySelector('.txa-spinner');
        const pctEl = loader.querySelector('#txa-load-pct');
        const barFill = loader.querySelector('#txa-load-bar-fill');
        const loadText = loader.querySelector('#txa-load-text');
        const speedEl = loader.querySelector('#txa-load-speed');

        if (spinner) { spinner.style.borderTopColor = '#f59e0b'; spinner.style.animationPlayState = 'paused'; }
        if (pctEl) { pctEl.textContent = '✕'; pctEl.style.color = '#f59e0b'; }
        if (barFill) { barFill.style.background = '#f59e0b'; barFill.style.width = '100%'; }
        if (speedEl) speedEl.textContent = '';
        if (loadText) {
            loadText.style.color = '#fde68a';
            loadText.innerHTML = `<i class="fas fa-exclamation-circle" style="color:#f59e0b; margin-right:6px;"></i>${msg}`;
        }

        if (hlsData && this.options.isAdmin) {
            console.error('[TXAPlayer] HLS Fatal:', hlsData.type, hlsData.details, hlsData.response);
        }

        if (!loader.querySelector('#txa-retry-btn')) {
            const retryBtn = document.createElement('button');
            retryBtn.id = 'txa-retry-btn';
            retryBtn.innerHTML = '<i class="fas fa-redo" style="margin-right:6px;"></i>Tải lại';
            retryBtn.style.cssText = `
                margin-top:14px; padding:8px 22px;
                background:#f59e0b; color:#000; border:none;
                border-radius:8px; cursor:pointer; font-size:13px; font-weight:700;
                pointer-events:all;
            `;
            retryBtn.onclick = () => window.location.reload();
            const content = loader.querySelector('.txa-loader-content');
            if (content) content.appendChild(retryBtn);
        }
    }

    setAspectRatio(ratio) {
        if (!this.video) return;
        this.video.classList.remove('ratio-4-3', 'ratio-16-9', 'ratio-stretch');
        if (ratio !== 'default') this.video.classList.add('ratio-' + ratio);

        const lbl = this.container.querySelector('#txa-lbl-ratio');
        if (lbl) lbl.textContent = ratio === 'default' ? 'Default' : ratio.replace('-', ':').toUpperCase();

        // Update menu status
        this.container.querySelectorAll('[data-ratio]').forEach(i => i.classList.toggle('active', i.dataset.ratio === ratio));

        this.showFeedback('text', 'Ratio: ' + (ratio === 'default' ? 'Default' : ratio));
        this.saveSettings();
    }

    setVideoFlip(flip) {
        if (!this.video) return;
        this.video.classList.remove('flip-h', 'flip-v', 'flip-both');
        if (flip !== 'normal') this.video.classList.add('flip-' + flip);

        const lbl = this.container.querySelector('#txa-lbl-flip');
        if (lbl) {
            const names = { normal: 'Normal', h: 'Horizontal', v: 'Vertical', both: 'Both' };
            lbl.textContent = names[flip] || 'Normal';
        }

        // Update menu status
        this.container.querySelectorAll('[data-flip]').forEach(i => i.classList.toggle('active', i.dataset.flip === flip));

        this.showFeedback('text', 'Flip: ' + flip);
        this.saveSettings();
    }

    seekAccumulated(sec) {
        this.seekAccumulator += sec;
        clearTimeout(this.seekDebounce);
        const badge = this.container.querySelector(this.seekAccumulator > 0 ? '#txa-badge-r' : '#txa-badge-l');
        const other = this.container.querySelector(this.seekAccumulator > 0 ? '#txa-badge-l' : '#txa-badge-r');
        if (other) other.classList.remove('show'); // Added null check
        if (badge) { // Added null check
            badge.querySelector('span').textContent = `${this.seekAccumulator > 0 ? '+' : ''}${this.seekAccumulator}s`;
            badge.classList.add('show');
        }
        this.seekDebounce = setTimeout(() => {
            this.safeSeek(this.video.currentTime + this.seekAccumulator);
            this.seekAccumulator = 0;
            if (badge) badge.classList.remove('show'); // Added null check
        }, 700);
    }

    updateVolUI() {
        const v = this.video.muted ? 0 : this.video.volume;
        const btn = this.container.querySelector('#txa-mute');
        const volInput = this.container.querySelector('#txa-vol');
        const volTooltip = this.container.querySelector('#txa-vol-tooltip');

        if (volInput) {
            volInput.value = v;
            const pct = v * 100;
            // Update the premium fill effect
            volInput.style.backgroundImage = `linear-gradient(to right, var(--txa-brand) ${pct}%, rgba(255,255,255,0.15) ${pct}%)`;

            if (volTooltip) {
                volTooltip.textContent = Math.round(pct) + '%';
                // Precise positioning follow thumb
                const sliderWidth = 115;
                const thumbWidth = 18;
                const btnWidth = 42;
                const usableWidth = sliderWidth - thumbWidth;
                // Offset calculation relative to volume container
                const leftOffset = btnWidth + 12 + (v * usableWidth) + (thumbWidth / 2);
                volTooltip.style.left = leftOffset + 'px';
            }
        }
        if (btn) {
            const icon = v === 0 ? 'mute' : v < 0.5 ? 'down' : 'up';
            btn.innerHTML = `<i class="fas fa-volume-${icon}"></i><div class="txa-tooltip">${v === 0 ? 'Unmute' : 'Mute'} (m)</div>`;
            if (v === 0) btn.style.opacity = '0.6';
            else btn.style.opacity = '1';
        }
    }

    formatTime(s, forceHours = false) {
        if (!s || isNaN(s)) return '00:00';
        const h = Math.floor(s / 3600);
        const m = Math.floor((s % 3600) / 60);
        const sec = Math.floor(s % 60);
        const pad = n => n < 10 ? '0' + n : n;
        // If duration >= 1 hour OR forceHours, show HH:MM:SS
        if (forceHours || h > 0) {
            return `${pad(h)}:${pad(m)}:${pad(sec)}`;
        }
        return `${pad(m)}:${pad(sec)}`;
    }

    /**
     * Safe seek - prevents "non-finite" errors when duration/time is NaN or Infinity
     */
    safeSeek(time) {
        if (!this.video) return;
        if (!isFinite(time) || isNaN(time)) return;
        const dur = this.video.duration;
        if (!isFinite(dur) || isNaN(dur) || dur <= 0) return;
        this.video.currentTime = Math.max(0, Math.min(dur, time));
    }

    formatTimeDisplay() {
        const current = this.video.currentTime || 0;
        const duration = this.video.duration || 0;
        return `${this.formatTime(current, duration >= 3600)} / ${this.formatTime(duration)}`;
    }

    async toggleFS() {
        try {
            const isFS = document.fullscreenElement || document.webkitFullscreenElement;
            if (isFS) {
                if (document.exitFullscreen) await document.exitFullscreen();
                else if (document.webkitExitFullscreen) await document.webkitExitFullscreen();
                if (screen.orientation && screen.orientation.unlock) {
                    try { await screen.orientation.unlock(); } catch (e) { }
                }
            } else {
                if (this.wrapper.requestFullscreen) await this.wrapper.requestFullscreen();
                else if (this.wrapper.webkitRequestFullscreen) await this.wrapper.webkitRequestFullscreen();
                else if (this.video.webkitEnterFullscreen) {
                    this.video.webkitEnterFullscreen();
                    return;
                }
                if (this.detectMobile() && screen.orientation && screen.orientation.lock) {
                    try { await screen.orientation.lock('landscape'); } catch (e) { }
                }
            }
        } catch (err) {
            console.error('FS Error:', err);
            if (this.video.webkitEnterFullscreen) this.video.webkitEnterFullscreen();
        }
    }

    skipIntro() {
        const intro = this.options.markers.intro;
        if (intro) {
            this.safeSeek(intro[1]);
            this.showToast('🚀 Bỏ qua Intro');
        }
    }

    skipOutro() {
        const outro = this.options.markers.outro;
        if (!outro) return;

        const effectiveOutroOut = (outro[1] > 0) ? outro[1] : this.video.duration;

        if (this.options.nextEpisodeUrl && Math.abs(effectiveOutroOut - this.video.duration) < 5) {
            if (this.options.onAutoNext) {
                this.options.onAutoNext(true);
            } else if (typeof window.switchEpisodeSeamless === 'function' && this.options.nextEpisodeUrl) {
                window.switchEpisodeSeamless(this.options.nextEpisodeUrl, true);
            } else {
                window.location.href = this.options.nextEpisodeUrl;
            }
            return;
        }

        if (effectiveOutroOut >= this.video.duration - 5) {
            this.video.pause();
            const replay = this.container.querySelector('#txa-replay');
            if (replay) replay.classList.add('show');
        } else {
            this.safeSeek(outro[1]);
            this.showToast('🚀 Bỏ qua Outro');
        }
    }

    toggleAutoSkipIntro() {
        this.settings.autoSkipIntro = !this.settings.autoSkipIntro;
        this.saveSettings();
        const text = this.settings.autoSkipIntro ? 'Auto Skip Intro: Bật' : 'Auto Skip Intro: Tắt';
        this.showToast('🚀 ' + text);
        this.updatePeSwitches();
    }

    toggleAutoNextEpisode() {
        this.settings.autoNextEpisode = !this.settings.autoNextEpisode;
        this.saveSettings();
        const text = this.settings.autoNextEpisode ? 'Auto Next: Bật' : 'Auto Next: Tắt';
        this.showToast('⏭️ ' + text);
        this.updatePeSwitches();
    }

    updatePeSwitches() {
        // Update Internal Toolbar Buttons
        const skipBtn = this.container ? this.container.querySelector('#txa-auto-skip') : null;
        if (skipBtn) {
            const isOn = this.settings.autoSkipIntro;
            skipBtn.classList.toggle('active', isOn);
            const statusEl = skipBtn.querySelector('.txa-btn-status');
            if (statusEl) statusEl.textContent = isOn ? 'ON' : 'OFF';
            const tooltipEl = skipBtn.querySelector('.txa-tooltip');
            if (tooltipEl) tooltipEl.textContent = `Tự động bỏ qua giới thiệu (${isOn ? 'Bật' : 'Tắt'})`;
        }

        const nextBtn = this.container ? this.container.querySelector('#txa-auto-next') : null;
        if (nextBtn) {
            const isOn = this.settings.autoNextEpisode;
            nextBtn.classList.toggle('active', isOn);
            const statusEl = nextBtn.querySelector('.txa-btn-status');
            if (statusEl) statusEl.textContent = isOn ? 'ON' : 'OFF';
            const tooltipEl = nextBtn.querySelector('.txa-tooltip');
            if (tooltipEl) tooltipEl.textContent = `Tự động chuyển tập (${isOn ? 'Bật' : 'Tắt'})`;
        }

        // Sync external UI if needed
        const extAutoSkip = document.querySelector('.pe-item.auto-skip-intro');
        if (extAutoSkip) {
            extAutoSkip.classList.toggle('active-pro', this.settings.autoSkipIntro);
            extAutoSkip.setAttribute('data-txa-tooltip', `Tự động bỏ qua Intro (${this.settings.autoSkipIntro ? 'BẬT' : 'TẮT'})`);
        }

        const extAutoNext = document.querySelector('.pe-item.auto-next');
        if (extAutoNext) {
            extAutoNext.classList.toggle('active-pro', this.settings.autoNextEpisode);
            extAutoNext.setAttribute('data-txa-tooltip', `Tự động chuyển tập (${this.settings.autoNextEpisode ? 'BẬT' : 'TẮT'})`);
        }
    }

    /**
     * Show auto-next countdown overlay when video ends (without outro markers)
     */
    _showAutoNextCountdown() {
        console.log('[TXAPlayer] _showAutoNextCountdown called', {
            autoNextEpisode: this.settings.autoNextEpisode,
            nextEpisodeUrl: this.options.nextEpisodeUrl,
            isAutoNextTriggered: this._isAutoNextTriggered
        });

        const overlay = this.container.querySelector('#txa-next-countdown');
        const timeEl = this.container.querySelector('#txa-nc-timer');
        const titleEl = this.container.querySelector('#txa-nc-title');
        const badgeEl = this.container.querySelector('#txa-nc-badge');

        if (!overlay) {
            console.warn('[TXAPlayer] Countdown overlay not found in DOM');
            return;
        }

        // Set title
        if (titleEl) titleEl.textContent = this.options.title || 'Tập tiếp theo';

        // Smart Badge: Try to detect next episode number
        if (badgeEl) {
            let nextNum = '--';
            try {
                const url = this.options.nextEpisodeUrl || '';
                const curName = this.options.episodeName || '';
                const matchUrl = url.match(/(tap|ep|episode)[\-_](\d+)/i) || url.match(/-(\d+)\.html/) || url.match(/-(\d+)$/);

                if (matchUrl) {
                    nextNum = matchUrl[matchUrl.length - 1];
                } else {
                    const matchCurr = curName.match(/(\d+)/);
                    if (matchCurr) {
                        const num = parseInt(matchCurr[1]) + 1;
                        nextNum = (matchCurr[1].startsWith('0') && num < 10) ? '0' + num : num;
                    }
                }
            } catch (e) { }
            badgeEl.innerHTML = `<span>Tập</span>${nextNum}`;
        }

        // Show overlay
        overlay.classList.add('show');
        if (this.wrapper) this.wrapper.classList.add('has-countdown');

        // Start countdown
        let countdown = 5;
        if (timeEl) {
            timeEl.textContent = `Bắt đầu sau 0${countdown}s`;
        }

        const countdownInterval = setInterval(() => {
            countdown--;
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                overlay.classList.remove('show');
                if (this.wrapper) this.wrapper.classList.remove('has-countdown');

                // Trigger auto-next
                this._isAutoNextTriggered = true;
                this._triggerAutoNext();
            } else {
                if (timeEl) {
                    timeEl.textContent = `Bắt đầu sau 0${countdown}s`;
                }
            }
        }, 1000);

        // Store interval ID to clear if needed
        this._autoNextCountdownInterval = countdownInterval;
    }

    /**
     * Trigger auto-next episode switch
     */
    _triggerAutoNext() {
        // Always prefer window.switchEpisodeSeamless if available (for seamless SPA experience)
        if (typeof window.switchEpisodeSeamless === 'function' && this.options.nextEpisodeUrl) {
            console.log('[TXAPlayer] Using switchEpisodeSeamless for auto-next');
            window.switchEpisodeSeamless(this.options.nextEpisodeUrl, true);
        } else if (this.options.onAutoNext) {
            this.options.onAutoNext(true);
        } else if (window.loadEpisode && typeof window.loadEpisode === 'function') {
            window.loadEpisode(this.options.nextEpisodeUrl);
        } else if (this.options.nextEpisodeUrl) {
            console.warn('[TXAPlayer] No seamless switch available, falling back to page reload');
            window.location.href = this.options.nextEpisodeUrl;
        }
    }

    checkMarkers() {
        const ct = this.video.currentTime;
        const dur = this.video.duration;
        const { intro, outro } = this.options.markers;

        // Player Internal Buttons
        const skipIntro = this.container.querySelector('#txa-skip-intro');
        const skipOutro = this.container.querySelector('#txa-skip-outro');

        // External Buttons (for TPhimX Tools)
        const extIntro = document.querySelector('.skip-intro-btn');
        const extOutro = document.querySelector('.skip-outro-btn');

        // Initial UI sync for external switches
        if (!this._peSwitchesInited) {
            this.updatePeSwitches();
            this._peSwitchesInited = true;
        }

        // Skip Intro logic
        if (intro && ct >= intro[0] && ct <= intro[1]) {
            if (skipIntro) skipIntro.style.display = 'block';
            if (extIntro) extIntro.classList.remove('d-none');

            if (this.settings.autoSkipIntro && ct < intro[1]) {
                this.safeSeek(intro[1]);
                this.showToast('🚀 Đã tự động bỏ qua Intro');
            }
        } else {
            if (skipIntro) skipIntro.style.display = 'none';
            if (extIntro) extIntro.classList.add('d-none');
        }

        // Skip Outro / Next Episode logic
        // STRICT CHECK: Only trigger if Outro is VALID (Start > 0) per user request
        const isValidOutro = outro && (outro[1] > outro[0] || (outro[0] > 0 && (outro[1] === 0 || !outro[1]))) && outro[0] > 0;
        const effectiveOutroOut = isValidOutro ? (outro[1] > 0 ? outro[1] : dur) : 0;

        if (isValidOutro && ct >= outro[0] && ct <= effectiveOutroOut) {
            if (skipOutro) {
                skipOutro.style.display = 'block';
                // If we are very close to end, change text
                if (this.options.nextEpisodeUrl && Math.abs(dur - ct) < 15) {
                    skipOutro.innerHTML = '<i class="fas fa-step-forward"></i> Tập Tiếp';
                }
            }
            if (extOutro) extOutro.classList.remove('d-none');

            // Auto Next Countdown & Logic
            // Only runs if Auto Next is enabled AND we have a valid Outro
            if (this.settings.autoNextEpisode && this.options.nextEpisodeUrl && !this._isAutoNextTriggered) {
                const triggerWait = 5; // 5s countdown
                const overlay = this.container.querySelector('#txa-next-countdown');
                const timeEl = this.container.querySelector('#txa-nc-timer');
                const titleEl = this.container.querySelector('#txa-nc-title');
                const badgeEl = this.container.querySelector('#txa-nc-badge');

                // Show Overlay
                if (overlay && !overlay.classList.contains('show')) {
                    if (titleEl) titleEl.textContent = this.options.title || 'Tập tiếp theo';

                    // Smart Badge: Try to detect next episode number
                    if (badgeEl) {
                        let nextNum = '--';
                        try {
                            const url = this.options.nextEpisodeUrl || '';
                            const curName = this.options.episodeName || '';
                            const matchUrl = url.match(/(tap|ep|episode)[\-_](\d+)/i) || url.match(/-(\d+)\.html/) || url.match(/-(\d+)$/);

                            if (matchUrl) {
                                nextNum = matchUrl[matchUrl.length - 1];
                            } else {
                                const matchCurr = curName.match(/(\d+)/);
                                if (matchCurr) {
                                    const num = parseInt(matchCurr[1]) + 1;
                                    nextNum = (matchCurr[1].startsWith('0') && num < 10) ? '0' + num : num;
                                }
                            }
                        } catch (e) { }
                        badgeEl.innerHTML = `<span>Tập</span>${nextNum}`;
                    }

                    overlay.classList.add('show');
                    this.wrapper.classList.add('has-countdown');
                    if (skipOutro) skipOutro.style.display = 'none';
                }

                // Calculate Countdown
                const elapsedInOutro = ct - outro[0];
                const remain = Math.max(0, triggerWait - Math.floor(elapsedInOutro));

                if (timeEl) {
                    const fmt = (remain < 10 ? '0' + remain : remain) + 's';
                    timeEl.textContent = `Bắt đầu sau ${fmt}`;
                }

                // Trigger Next
                if (elapsedInOutro >= triggerWait) {
                    this._isAutoNextTriggered = true;
                    if (overlay) overlay.classList.remove('show');
                    this.wrapper.classList.remove('has-countdown');

                    this._triggerAutoNext();
                }
            }
        } else {
            // Not in Outro / Invalid Outro
            if (skipOutro) skipOutro.style.display = 'none';
            if (extOutro) extOutro.classList.add('d-none');

            // Clean up if we sought out of outro
            const overlay = this.container.querySelector('#txa-next-countdown');
            if (overlay && overlay.classList.contains('show')) {
                overlay.classList.remove('show');
                this.wrapper.classList.remove('has-countdown');
            }
        }
    }

    setupShortcuts() {
        this._handlers.winKeyDown = (e) => {
            if (this.destroyed) return;
            if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;
            const k = e.key.toLowerCase();

            // Prevent scrolling for arrow keys if player is in focus or just generally
            if ([' ', 'k', 'f', 'm', 'p', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(k)) {
                // Only prevent default if it's a player key
            }

            switch (k) {
                case ' ': case 'k': e.preventDefault(); this.togglePlay(); break;
                case 'f': this.toggleFS(); break;
                case 'm': this.video.muted = !this.video.muted; this.updateVolUI(); this.showFeedback('volume'); this.saveSettings(); break;
                case 'p': this.toggleNativePiP(); break;
                case 'j': case 'arrowleft': this.seekAccumulated(-10); break;
                case 'l': case 'arrowright': this.seekAccumulated(10); break;
                case 'arrowup': e.preventDefault(); this.video.volume = Math.min(1, this.video.volume + 0.05); this.updateVolUI(); this.showFeedback('volume'); this.saveSettings(); break;
                case 'arrowdown': e.preventDefault(); this.video.volume = Math.max(0, this.video.volume - 0.05); this.updateVolUI(); this.showFeedback('volume'); this.saveSettings(); break;
                case 'c': this.toggleSubLoop(); break;
                case 'i': this.skipIntro(); break;
                case 'o': this.skipOutro(); break;
                case 't': this.toggleTheaterMode(); break; // v5.8.0 - Theater Mode
                case 'a': this.toggleCinemaMode(); break; // v5.8.0 - Ambient Light
                case 'escape': {
                    const el = (s) => this.container.querySelector(s);

                    // 1. Close dynamic shortcuts panel
                    const sc = document.querySelector('.txa-shortcuts-panel');
                    if (sc) sc.remove();

                    // 2. Toggle off Stats Panel if active
                    const stats = el('#txa-stats-panel');
                    if (stats && stats.classList.contains('active')) this.toggleStatsPanel();

                    // 3. Hide Settings Panel
                    const settings = el('#txa-panel');
                    if (settings && settings.classList.contains('active')) settings.classList.remove('active');

                    // 4. Hide Context Menu
                    const ctx = el('#txa-ctx');
                    if (ctx && ctx.classList.contains('active')) ctx.classList.remove('active');

                    // 5. Hide Resume Overlay
                    const resume = el('#txa-resume');
                    if (resume && resume.classList.contains('show')) {
                        resume.classList.remove('show');
                        this.resumeShown = true;
                    }

                    // 6. Cancel Next Episode Countdown
                    const next = el('#txa-next-countdown');
                    if (next && next.classList.contains('show')) {
                        next.classList.remove('show');
                        this._isAutoNextTriggered = true;
                    }

                    break;
                }
                case '/': {
                    if (e.shiftKey) {
                        e.preventDefault();
                        this.showShortcuts();
                    } else {
                        // Search Shortcut Focus
                        e.preventDefault();
                        setTimeout(() => {
                            const searchInput = document.querySelector('input[name="keyword"]') ||
                                document.querySelector('#search-keyword') ||
                                document.querySelector('.search-input');
                            if (searchInput) {
                                searchInput.focus();
                                searchInput.select();
                            }
                        }, 50);
                    }
                    break;
                }
                default:
                    if (k >= '0' && k <= '9') {
                        const pct = parseInt(k) * 10;
                        const t = (pct / 100) * this.video.duration;
                        this.safeSeek(t);
                        this.showFeedback('seek', `${pct}% (${this.formatTime(t)})`);
                    }
            }
        };
        window.addEventListener('keydown', this._handlers.winKeyDown);
    }

    // initSubtitles merged with version above to avoid duplication logic bugs


    async toggleSub(idx) {
        const lbl = this.container.querySelector('#txa-lbl-subs');
        const btn = this.container.querySelector('#txa-cc');
        const subs = this.options.subtitles;

        // Clear previous subtitles immediately to avoid "stuck" captions while loading
        this.currentSubCues = [];
        this.renderSubtitles();

        if (idx === -1) {
            if (lbl) lbl.textContent = 'Off'; // Added null check
            this.activeSubIdx = -1;
            if (btn) btn.classList.remove('cc-active'); // Added null check
            this.showFeedback('text', 'Subtitles: Off');
        } else {
            const sub = subs && subs[idx];
            if (!sub) {
                if (lbl) lbl.textContent = 'Off';
                this.activeSubIdx = -1;
                if (btn) btn.classList.remove('cc-active');
                return;
            }
            if (lbl) lbl.textContent = sub.label || sub.lang; // Added null check
            this.activeSubIdx = idx;
            if (btn) btn.classList.add('cc-active'); // Added null check
            this.showFeedback('text', `Subtitles: ${sub.label || sub.lang}`);

            let txt = sub.content || '';
            if (sub.file) {
                try {
                    txt = await (await fetch(sub.file)).text();
                } catch (e) {
                    console.error('Subtitle fetch failed:', e);
                    this.showToast('Lỗi tải phụ đề');
                }
            }

            this.currentSubCues = this.parseVTT(txt);
            // Re-render immediately so the correct subtitle shows up at current time
            this.renderSubtitles();
        }
        this.navSettings('main');

        // Update active class in menu list
        const list = this.container.querySelector('#txa-list-subs');
        if (list) {
            list.querySelectorAll('.txa-menu-item').forEach(o => o.classList.remove('active'));
            list.querySelector(`[data-sub="${idx}"]`)?.classList.add('active');
        }
    }

    toggleSubLoop() {
        if (this.currentSubCues.length > 0) this.toggleSub(-1);
        else if (this.options.subtitles?.length > 0) this.toggleSub(0);
    }

    renderSubtitles() {
        const box = this.container.querySelector('#txa-captions');
        if (!box) return; // Added null check
        if (!this.currentSubCues.length) { box.innerHTML = ''; return; }
        const ct = this.video.currentTime;
        const cue = this.currentSubCues.find(c => ct >= c.start && ct <= c.end);
        box.innerHTML = cue ? `<div class="txa-cue">${cue.text}</div>` : '';
    }

    parseVTT(content) {
        if (!content) return [];
        const cues = [];
        // Clean up content: Remove WEBVTT header and metadata
        let processed = content.replace(/^WEBVTT.*\r?\n/i, '');
        // Convert SRT commas to dots for universal parsing
        processed = processed.replace(/(\d+:\d+:\d+),(\d+)/g, '$1.$2');

        const lines = processed.split(/\r?\n/);
        let start = null, end = null, text = [];

        const parseTime = (t) => {
            t = t.trim().replace(/[\[\]]/g, '');
            const p = t.split(':');
            if (p.length === 3) {
                // HH:MM:SS.mmm or MM:SS.mmm
                const hours = parseInt(p[0]) || 0;
                const minutes = parseInt(p[1]) || 0;
                const seconds = parseFloat(p[2].replace(',', '.')) || 0;
                return hours * 3600 + minutes * 60 + seconds;
            } else if (p.length === 2) {
                const minutes = parseInt(p[0]) || 0;
                const seconds = parseFloat(p[1].replace(',', '.')) || 0;
                return minutes * 60 + seconds;
            }
            return parseFloat(t) || 0;
        };

        lines.forEach(line => {
            const l = line.trim();
            if (l.includes('-->')) {
                // Time range line
                if (start !== null && text.length > 0) {
                    cues.push({ start, end: end || start + 5, text: text.join('<br>') });
                    text = [];
                }
                const p = l.split('-->');
                start = parseTime(p[0]);
                end = parseTime(p[1]);
            } else if (l === '') {
                // Separator
                if (start !== null && text.length > 0) {
                    cues.push({ start, end: end || start + 5, text: text.join('<br>') });
                    start = null; end = null; text = [];
                }
            } else if (/^\d+$/.test(l)) {
                // Index line (SRT) - ignore
            } else if (l !== '') {
                // Text line
                if (start !== null) text.push(l);
            }
        });

        // Push last cue
        if (start !== null && text.length > 0) {
            cues.push({ start, end: end || start + 5, text: text.join('<br>') });
        }

        return cues;
    }

    navSettings(view) {
        const p = this.container.querySelector('#txa-panel');
        if (!p) return; // Added null check
        p.querySelectorAll('[id^="txa-view-"]').forEach(d => d.classList.add('txa-hidden'));
        const target = p.querySelector(`#txa-view-${view}`);
        if (target) target.classList.remove('txa-hidden');
    }

    setSpeed(rate) {
        this.video.playbackRate = rate;
        const speedLabel = this.container.querySelector('#txa-lbl-speed'); // Added null check
        if (speedLabel) speedLabel.textContent = rate === 1 ? 'Normal' : rate + 'x'; // Added null check
        this.navSettings('main');
        this.saveSettings();
    }

    setupContextMenu() {
        const el = (s) => this.container.querySelector(s);
        const ctx = el('#txa-ctx');
        if (!ctx) return;

        if (this.detectMobile()) {
            this.wrapper.oncontextmenu = (e) => {
                if (this.destroyed) return;
                e.preventDefault();
                return false;
            };
            return;
        }

        this.wrapper.oncontextmenu = (e) => {
            if (this.destroyed) return;
            e.preventDefault();
            const r = this.wrapper.getBoundingClientRect();
            // Collision detection
            let left = e.clientX - r.left;
            let top = e.clientY - r.top;

            // If menu goes off right edge
            if (left + 250 > r.width) left = r.width - 250;
            // If menu goes off bottom edge
            if (top + 280 > r.height) top = r.height - 280;

            ctx.style.left = Math.max(10, left) + 'px';
            ctx.style.top = Math.max(10, top) + 'px';
            ctx.classList.add('active');
        };
        // Redundant ctxClick removed - now handled by docClick in bindEvents()
        /*
        this._handlers.ctxClick = (e) => {
            if (this.destroyed) return;
            if (ctx && !ctx.contains(e.target)) ctx.classList.remove('active');
        };
        document.addEventListener('click', this._handlers.ctxClick);
        */

        // Ensure these el() calls find elements correctly
        const bindCtx = (id, fn) => {
            const item = el(id);
            if (item) item.onclick = () => {
                if (ctx) ctx.classList.remove('active');
                fn();
            };
        };

        bindCtx('#txa-ctx-snap', () => this.takeSnapshot());
        bindCtx('#txa-ctx-url', () => { navigator.clipboard.writeText(location.href); this.showToast('URL Copied!'); });
        bindCtx('#txa-ctx-loop', () => {
            this.video.loop = !this.video.loop;
            const state = this.video.loop ? 'On' : 'Off';
            const loopStat = el('#txa-loop-stat'); // Added null check
            if (loopStat) loopStat.textContent = state; // Added null check
            this.showFeedback('text', `Loop Mode: ${state}`);
        });
        bindCtx('#txa-ctx-stats', () => this.toggleStatsPanel());
        bindCtx('#txa-ctx-sc', () => this.showShortcuts());

        // Auto Toggle Handlers
        const introSw = el('#txa-sw-intro');
        if (introSw) {
            introSw.onchange = (e) => {
                this.settings.autoSkipIntro = e.target.checked;
                this.saveSettings();
                this.showToast(`Auto Skip Intro: ${e.target.checked ? 'ON' : 'OFF'}`);
            };
        }
        const nextSw = el('#txa-sw-next');
        if (nextSw) {
            nextSw.onchange = (e) => {
                this.settings.autoNextEpisode = e.target.checked;
                this.saveSettings();
                this.showToast(`Auto Next: ${e.target.checked ? 'ON' : 'OFF'}`);
            };
        }
    }

    showToast(msg) {
        const t = document.createElement('div');
        t.className = 'txa-feedback show';
        t.innerHTML = `<span>${msg}</span>`;
        if (this.container) this.container.appendChild(t); // Added null check
        setTimeout(() => t.remove(), 2500);
    }
    showShortcuts() {
        // Removed redundant pointer check that might fail on some Windows desktops


        const o = document.createElement('div');
        o.className = 'txa-shortcuts-panel active';
        o.id = 'txa-sc-panel';

        const css = `
            .txa-shortcuts-panel {
                background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(25px);
                z-index: 10000;
                display: flex; align-items: center; justify-content: center;
                opacity: 0; animation: txafadeIn 0.3s forwards;
            }
            .txa-shortcuts-content {
                width: 900px; max-width: 90%;
                background: #0d0d0d; border: 1px solid rgba(255,255,255,0.1);
                border-radius: 24px; padding: 40px;
                position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.8);
            }
            .txa-shortcuts-header {
                display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px;
            }
            .txa-sc-title h3 { margin: 0; font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -1px; }
            .txa-sc-title p { margin: 8px 0 0; font-size: 14px; color: #64748b; font-weight: 500; }
            .txa-sc-close {
                width: 44px; height: 44px; border-radius: 14px; border: none;
                background: rgba(255,255,255,0.05); color: #fff; cursor: pointer;
                transition: 0.3s; display: flex; align-items: center; justify-content: center;
            }
            .txa-sc-close:hover { background: #ef4444; transform: rotate(90deg); }
            
            .txa-sc-grid {
                display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
            }
            
            .txa-sc-column {
                display: flex; flex-direction: column; gap: 15px;
            }
            
            .txa-sc-group-label {
                font-size: 11px; text-transform: uppercase; letter-spacing: 2px; 
                color: var(--txa-brand, #8b5cf6); font-weight: 800; opacity: 0.8;
                padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
            }
            
            .txa-sc-item {
                display: flex; justify-content: space-between; align-items: center;
                padding: 12px 16px; background: rgba(255,255,255,0.02);
                border-radius: 12px; border: 1px solid transparent; transition: 0.2s;
            }
            .txa-sc-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
            
            .txa-sc-name { color: #cbd5e1; font-size: 14px; font-weight: 500; }
            .txa-sc-keys { display: flex; gap: 6px; }
            
            kbd {
                background: #1a1a1a; border: 1px solid #333; border-bottom-width: 3px;
                color: #fff; border-radius: 6px; padding: 4px 8px;
                font-family: inherit; font-size: 11px; font-weight: 700;
                min-width: 20px; text-align: center;
            }
            .txa-sc-footer {
                margin-top: 40px; padding: 20px; border-radius: 16px;
                background: linear-gradient(to right, rgba(139,92,246,0.1), transparent);
                border: 1px solid rgba(139,92,246,0.2); display: flex; align-items: center; gap: 15px;
            }
            .txa-sc-footer i { font-size: 20px; color: #8b5cf6; }
            .txa-sc-footer p { margin: 0; font-size: 13px; color: #94a3b8; line-height: 1.5; }
        `;

        o.innerHTML = `
            <style>${css}</style>
            <div class="txa-shortcuts-content" onclick="event.stopPropagation()">
                <div class="txa-shortcuts-header">
                    <div class="txa-sc-title">
                        <h3>PHÍM TẮT</h3>
                        <p>Trải nghiệm điều khiển điện ảnh với TPhimX Player</p>
                    </div>
                    <button class="txa-sc-close"><i class="fas fa-times"></i></button>
                </div>

                <div class="txa-sc-grid">
                    <div class="txa-sc-column">
                        <span class="txa-sc-group-label">ĐiềU KHIỂN CHÍNH</span>
                        <div class="txa-sc-item"><span class="txa-sc-name">Phát / Dừng</span><div class="txa-sc-keys"><kbd>Space</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Tua lại 10s</span><div class="txa-sc-keys"><kbd>J</kbd> / <kbd>←</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Tua tiếp 10s</span><div class="txa-sc-keys"><kbd>L</kbd> / <kbd>→</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Nhảy nhanh</span><div class="txa-sc-keys"><kbd>0-9</kbd></div></div>
                    </div>
                    
                    <div class="txa-sc-column">
                        <span class="txa-sc-group-label">ÂM THANH & SUB</span>
                        <div class="txa-sc-item"><span class="txa-sc-name">Tăng âm lượng</span><div class="txa-sc-keys"><kbd>↑</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Giảm âm lượng</span><div class="txa-sc-keys"><kbd>↓</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Tắt tiếng</span><div class="txa-sc-keys"><kbd>M</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Đổi phụ đề</span><div class="txa-sc-keys"><kbd>C</kbd></div></div>
                    </div>
                    
                    <div class="txa-sc-column">
                        <span class="txa-sc-group-label">GIAO DIỆN</span>
                        <div class="txa-sc-item"><span class="txa-sc-name">Toàn màn hình</span><div class="txa-sc-keys"><kbd>F</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Thu nhỏ (PiP)</span><div class="txa-sc-keys"><kbd>P</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Rạp chiếu phim</span><div class="txa-sc-keys"><kbd>T</kbd></div></div>
                        <div class="txa-sc-item"><span class="txa-sc-name">Đóng Menu</span><div class="txa-sc-keys"><kbd>Esc</kbd></div></div>
                    </div>
                </div>

                <div class="txa-sc-footer">
                    <i class="fas fa-keyboard"></i>
                    <p>Mẹo: Nhấn đúp vào hai bên màn hình để tua nhanh trên điện thoại. <br>Hệ thống phím tắt chỉ hỗ trợ khi trình duyệt đang ở trạng thái tập trung.</p>
                </div>
            </div>
        `;

        const closeBtn = o.querySelector('.txa-sc-close');
        if (closeBtn) {
            closeBtn.onclick = (e) => { e.stopPropagation(); o.remove(); };
        }

        o.onclick = (e) => { o.remove(); };
        if (this.wrapper) this.wrapper.appendChild(o);
    }

    loadInitialSettings() {
        const el = (s) => this.container.querySelector(s);
        if (this.settings.volume !== undefined) {
            this.video.volume = this.settings.volume;
            this.video.muted = this.settings.muted || false;
            this.updateVolUI();
        }
        if (this.settings.playbackRate) {
            this.setSpeed(this.settings.playbackRate);
        }

        // v6.5.2 - Load Aspect Ratio & Flip
        if (this.settings.aspectRatio) {
            this.setAspectRatio(this.settings.aspectRatio);
        }
        if (this.settings.videoFlip) {
            this.setVideoFlip(this.settings.videoFlip);
        }

        if (this.settings.loop !== undefined) {
            this.video.loop = this.settings.loop;
            const loopStat = this.container.querySelector('#txa-loop-stat');
            if (loopStat) loopStat.textContent = this.video.loop ? 'On' : 'Off';
        }
        if (this.settings.activeSubIdx !== undefined && this.settings.activeSubIdx !== -1) {
            setTimeout(() => this.toggleSub(this.settings.activeSubIdx), 500);
        }
        const cap = el('#txa-captions');
        const s = this.settings;
        if (cap && s.subStyle) {
            if (s.subStyle.size) {
                cap.classList.add('size-' + s.subStyle.size);
                this.container.querySelectorAll('[data-subsize]').forEach(o => {
                    o.classList.toggle('active', o.dataset.subsize === s.subStyle.size);
                });
            }
            if (s.subStyle.weight) {
                cap.classList.add('weight-' + s.subStyle.weight);
                this.container.querySelectorAll('[data-subweight]').forEach(o => {
                    o.classList.toggle('active', o.dataset.subweight === s.subStyle.weight);
                });
            }
            if (s.subStyle.bg) {
                if (s.subStyle.bg !== 'default') cap.classList.add('bg-' + s.subStyle.bg);
                this.container.querySelectorAll('[data-subbg]').forEach(o => {
                    o.classList.toggle('active', o.dataset.subbg === s.subStyle.bg);
                });
            }
            if (s.subStyle.color) {
                cap.classList.add('color-' + s.subStyle.color);
                this.container.querySelectorAll('[data-subcolor]').forEach(o => {
                    o.classList.toggle('active', o.dataset.subcolor === s.subStyle.color);
                });
            }
            if (s.subStyle.stroke) {
                cap.classList.add('stroke-on');
                const strokeToggle = el('#txa-substroke-toggle');
                if (strokeToggle) strokeToggle.checked = true;
                const strokePanel = el('#txa-stroke-panel');
                if (strokePanel) strokePanel.classList.add('active');
            }
            if (s.subStyle.strokeColor) {
                cap.classList.add('stroke-' + s.subStyle.strokeColor);
                this.container.querySelectorAll('[data-substroke]').forEach(o => {
                    if (o.dataset.substroke === s.subStyle.strokeColor) o.classList.add('active');
                    else o.classList.remove('active');
                });
            }
        }

        // v6.4.0 - Real-time clock initial state
        const clockToggle = el('#txa-clock-toggle');
        if (clockToggle) clockToggle.checked = this.settings.showRealTime;

        if (this.settings.clockFormat) {
            const lbl = el('#txa-lbl-clock');
            if (lbl) lbl.textContent = this.settings.clockFormat;
            this.container.querySelectorAll('[data-clock]').forEach(o => {
                o.classList.toggle('active', o.dataset.clock === this.settings.clockFormat);
            });
        }
        this.updateClockVisibility();

        // v6.1.0 - Sync external switches
        this.updatePeSwitches();
    }
    loadSettings() {
        const key = 'txa-p-conf';
        let saved = localStorage.getItem(key);
        if (!saved) {
            // Migration for old keys
            const oldKeys = ['txa-txa-cfg', 'txa_player_settings', 'txa-player-v4-settings'];
            for (const ok of oldKeys) {
                const oldData = localStorage.getItem(ok);
                if (oldData) {
                    localStorage.setItem(key, oldData);
                    // Cleanup old keys
                    oldKeys.forEach(k => localStorage.removeItem(k));
                    localStorage.removeItem('txa_player_state');
                    return JSON.parse(oldData);
                }
            }
            return {};
        }
        try { return JSON.parse(saved) || {}; } catch { return {}; }
    }
    saveSettings() {
        if (!this.video || this.destroyed) return;
        const el = (s) => this.container.querySelector(s);
        const cap = el('#txa-captions');
        const strokeToggle = el('#txa-substroke-toggle');

        // Extract Aspect Ratio and Flip from classList
        const aspectRatio = Array.from(this.video.classList).find(c => c.startsWith('ratio-'))?.replace('ratio-', '') || 'default';
        const videoFlip = Array.from(this.video.classList).find(c => c.startsWith('flip-'))?.replace('flip-', '') || 'normal';

        const cfg = {
            volume: this.video.volume,
            muted: this.video.muted,
            playbackRate: this.video.playbackRate,
            loop: this.video.loop,
            activeSubIdx: this.activeSubIdx,
            aspectRatio: aspectRatio,
            videoFlip: videoFlip,
            subStyle: cap ? {
                size: Array.from(cap.classList).find(c => c.startsWith('size-'))?.replace('size-', ''),
                weight: Array.from(cap.classList).find(c => c.startsWith('weight-'))?.replace('weight-', ''),
                bg: Array.from(cap.classList).find(c => c.startsWith('bg-'))?.replace('bg-', '') || 'default',
                color: Array.from(cap.classList).find(c => c.startsWith('color-'))?.replace('color-', ''),
                stroke: strokeToggle ? strokeToggle.checked : false,
                strokeColor: Array.from(cap.classList).find(c => c.startsWith('stroke-'))?.replace('stroke-', '')
            } : {},
            captionBottom: cap ? parseInt(cap.style.bottom) : 110,
            captionLeft: (cap && cap.style.left) ? parseFloat(cap.style.left) : undefined,
            autoSkipIntro: this.settings.autoSkipIntro,
            autoNextEpisode: this.settings.autoNextEpisode,
            brightness: this.options.brightness || 1,
            showRealTime: this.settings.showRealTime,
            clockFormat: this.settings.clockFormat
        };
        localStorage.setItem('txa-p-conf', JSON.stringify(cfg));

        // v6.0.0 - Sync to Cloud if saveSettingsUrl is provided
        if (this.options.saveSettingsUrl && this.options.csrfToken) {
            fetch(this.options.saveSettingsUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': this.options.csrfToken
                },
                body: JSON.stringify({ settings: cfg })
            }).catch(e => console.warn('[TXAPlayer] Settings sync failed:', e));
        }
    }

    takeSnapshot() {
        try {
            const c = document.createElement('canvas');
            c.width = this.video.videoWidth;
            c.height = this.video.videoHeight;
            const ctx = c.getContext('2d');

            // Draw video frame
            ctx.drawImage(this.video, 0, 0);

            const watermark = `TPHIMX Player - ${TXA_VERSION} `;
            const fontSize = Math.max(18, c.height * 0.03);
            ctx.font = `bold ${fontSize}px Inter, sans - serif`;
            ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
            ctx.textAlign = 'right';
            ctx.textBaseline = 'bottom';
            ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
            ctx.shadowBlur = 6;
            ctx.fillText(watermark, c.width - 25, c.height - 20);

            const a = document.createElement('a');
            a.download = `tphimx - snapshot - ${Date.now()}.png`;
            a.href = c.toDataURL('image/png', 1.0);
            a.click();
            this.showToast('Snapshot 4K Captured!');
        } catch (e) {
            console.error('TXAPlayer Snapshot Error:', e);
            if (e.name === 'SecurityError') {
                this.showToast('Lỗi bảo mật: Không thể chụp ảnh từ máy chủ này (CORS)');
            } else {
                this.showToast('Không thể chụp ảnh màn hình lúc này');
            }
        }
    }

    toggleView(v) {
        if (v === 'shortcuts') this.showShortcuts();
        if (v === 'stats') this.toggleStatsPanel();
    }

    toggleStatsPanel() {
        const panel = this.container.querySelector('#txa-stats-panel');
        if (!panel) return;

        if (panel.classList.contains('active')) {
            panel.classList.remove('active');
            if (this._statsInterval) { clearInterval(this._statsInterval); this._statsInterval = null; }
            return;
        }

        panel.classList.add('active');
        this.updateStatsPanel();

        // Update every 1s
        this._statsInterval = setInterval(() => {
            if (this.destroyed || !panel.classList.contains('active')) {
                clearInterval(this._statsInterval);
                this._statsInterval = null;
                return;
            }
            this.updateStatsPanel();
        }, 1000);

        // Close button
        const closeBtn = this.container.querySelector('#txa-stats-close');
        if (closeBtn) closeBtn.onclick = () => this.toggleStatsPanel();
    }

    updateStatsPanel() {
        const grid = this.container.querySelector('#txa-stats-grid');
        if (!grid || !this.video) return;
        const v = this.video;
        const fmt = window.txaformat;

        // Gather stats
        const resolution = `${v.videoWidth || '?'}×${v.videoHeight || '?'} `;
        const currentTime = this.formatTime(v.currentTime);
        const duration = this.formatTime(v.duration);
        const ahead = (v.buffered && v.buffered.length > 0) ? (v.buffered.end(v.buffered.length - 1) - v.currentTime) : 0;

        // Fast DOM Update
        const html = `
            < div class="txa-stat-item" ><div class="txa-stat-label">Resolution</div><div class="txa-stat-value brand">${resolution}</div></div >
            <div class="txa-stat-item"><div class="txa-stat-label">Speed</div><div class="txa-stat-value">${v.playbackRate}x</div></div>
            <div class="txa-stat-item full"><div class="txa-stat-label">Progress</div><div class="txa-stat-value">${currentTime} / ${duration}</div></div>
            <div class="txa-stat-item"><div class="txa-stat-label">Buffer</div><div class="txa-stat-value ${ahead > 10 ? 'green' : ahead > 3 ? 'yellow' : 'red'}">${ahead.toFixed(1)}s ahead</div></div>
            <div class="txa-stat-item"><div class="txa-stat-label">Volume</div><div class="txa-stat-value">${v.muted ? 'Muted' : Math.round(v.volume * 100) + '%'}</div></div>
            <div class="txa-stat-item full"><div class="txa-stat-label">Player</div><div class="txa-stat-value brand">TXAPlayer ${TXA_VERSION}</div></div>
        `;

        if (this._lastStatsHTML !== html) {
            grid.innerHTML = html;
            this._lastStatsHTML = html;
        }
    }
    toggleNativePiP() { document.pictureInPictureElement ? document.exitPictureInPicture() : this.video.requestPictureInPicture(); }

    destroy() {
        this.destroyed = true;

        if (this._devCheck) clearInterval(this._devCheck);
        if (this._statsInterval) clearInterval(this._statsInterval);
        if (this._autoNextCountdownInterval) clearInterval(this._autoNextCountdownInterval);

        // Stop playback & Cleanup Video
        if (this.video) {
            try {
                this.video.ontimeupdate = null; // Unbind immediately
                this.video.pause();
                this.video.src = "";
                this.video.load();
                this.video.remove();
            } catch (e) { }
        }

        // Destroy dashjs
        if (this.dashPlayer) {
            try { this.dashPlayer.destroy(); } catch (e) { }
            this.dashPlayer = null;
        }

        // Destroy Hls
        if (this.hls) {
            try { this.hls.destroy(); } catch (e) { }
            this.hls = null;
        }

        // Cleanup dynamic preview engine on destroy
        if (this._previewVideo) {
            try {
                this._previewVideo.pause();
                this._previewVideo.src = "";
                this._previewVideo.load();
                this._previewVideo.remove();
            } catch (e) { }
            this._previewVideo = null;
        }
        if (this._previewHls) {
            try { this._previewHls.destroy(); } catch (e) { }
            this._previewHls = null;
        }

        // Remove global listeners
        if (this._handlers) {
            if (this._handlers.winMouseMove) window.removeEventListener('mousemove', this._handlers.winMouseMove);
            if (this._handlers.winMouseUp) window.removeEventListener('mouseup', this._handlers.winMouseUp);
            if (this._handlers.winKeyDown) window.removeEventListener('keydown', this._handlers.winKeyDown);
            if (this._handlers.docClick) document.removeEventListener('click', this._handlers.docClick);
            if (this._handlers.docFSChange) document.removeEventListener('fullscreenchange', this._handlers.docFSChange);
            if (this._handlers.dragMouseMove) window.removeEventListener('mousemove', this._handlers.dragMouseMove);
            if (this._handlers.dragMouseUp) window.removeEventListener('mouseup', this._handlers.dragMouseUp);
            if (this._handlers.ctxClick) document.removeEventListener('click', this._handlers.ctxClick);
            if (this._handlers.theaterEscape) window.removeEventListener('keydown', this._handlers.theaterEscape); // v5.8.0
        }

        if (this.feedbackTimer) clearTimeout(this.feedbackTimer);
        if (this.seekDebounce) clearTimeout(this.seekDebounce);
        if (this._clickTimer) clearTimeout(this._clickTimer);
        if (this._progressSaveInterval) clearInterval(this._progressSaveInterval); // v5.8.0 - Clear progress save interval

        // v5.8.0 - Stop ambient light animation
        this.stopAmbientLight();

        // v5.8.0 - Save final progress
        this.saveWatchProgress();

        // Clear UI
        if (this.container) this.container.innerHTML = "";

        console.log("TXAPlayer: Destroyed instance");
    }

    detectDevTools() {
        if (this.options.isAdmin) return;
        if (this.detectMobile()) return; // Skip on mobile as requested

        const threshold = 160;
        this._devCheck = setInterval(() => {
            if (this.destroyed) return;

            const start = performance.now();
            debugger;
            const end = performance.now();

            if (end - start > threshold) {
                this.tamperAlert(true);
            } else {
                this.tamperAlert(false);
            }
        }, 2000); // 2s check to be less noisy
    }

    tamperAlert(isBlocked) {
        const overlay = this.container.querySelector('#txa-tamper');
        if (!overlay || this.isTamperPermanent) return;

        if (isBlocked) {
            // Once detected, it becomes permanent
            this.isTamperPermanent = true;
            overlay.classList.remove('txa-hidden');

            console.warn('[TXA] Tamper detected! Locking player.');

            // Aggressively stop video
            if (this.video) {
                try {
                    this.video.pause();
                    this.video.muted = true;
                    this.video.removeAttribute('src'); // Remove src attr
                    this.video.load();
                } catch (e) { }
            }

            if (this.hls) {
                try {
                    this.hls.stopLoad();
                    this.hls.detachMedia();
                    this.hls.destroy();
                } catch (e) { }
                this.hls = null;
            }

            if (this.dashPlayer) {
                try {
                    this.dashPlayer.reset();
                    this.dashPlayer.destroy();
                } catch (e) { }
                this.dashPlayer = null;
            }

            // Disable interaction
            if (this.wrapper) {
                this.wrapper.style.pointerEvents = 'none';
                this.wrapper.style.opacity = '0.1';
            }
            overlay.style.pointerEvents = 'all'; // Allow clicking reload button

        } else {
            // Safe state
            overlay.classList.add('txa-hidden');
        }
    }

    // ============================================================
    // v5.8.0 NEW FEATURES
    // ============================================================

    /**
     * Theater Mode - Expand player to full screen overlay (not browser fullscreen)
     */
    toggleTheaterMode() {
        this.isTheaterMode = !this.isTheaterMode;
        const btn = this.container.querySelector('#txa-theater');

        if (this.isTheaterMode) {
            this.wrapper.classList.add('theater-mode');
            document.body.classList.add('theater-mode-active');
            if (btn) btn.classList.add('mode-active');
            this.showFeedback('text', 'Theater Mode: On');
        } else {
            this.wrapper.classList.remove('theater-mode');
            document.body.classList.remove('theater-mode-active');
            if (btn) btn.classList.remove('mode-active');
            this.showFeedback('text', 'Theater Mode: Off');
        }
    }

    /**
     * Cinema Mode - Ambient light effect that extracts colors from video
     */
    toggleCinemaMode() {
        this.isCinemaMode = !this.isCinemaMode;
        const btn = this.container.querySelector('#txa-cinema');

        if (this.isCinemaMode) {
            this.wrapper.classList.add('cinema-mode');
            this.container.classList.add('cinema-active');
            if (btn) btn.classList.add('mode-active');
            this.startAmbientLight();
            this.showFeedback('text', 'Ánh sáng: Bật');
        } else {
            this.wrapper.classList.remove('cinema-mode');
            this.container.classList.remove('cinema-active');
            if (btn) btn.classList.remove('mode-active');
            this.stopAmbientLight();
            this.showFeedback('text', 'Ánh sáng: Tắt');
        }
    }

    startAmbientLight() {
        const canvas = this.container.querySelector('#txa-ambient');
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        canvas.width = 32; // Low resolution for blur effect
        canvas.height = 18;

        this._ambientFrame = () => {
            if (!this.isCinemaMode || this.destroyed) return;
            if (this.video && !this.video.paused && this.video.readyState >= 2) {
                try {
                    ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
                } catch (e) {
                    // Cross-origin video might fail, just ignore
                }
            }
            requestAnimationFrame(this._ambientFrame);
        };
        requestAnimationFrame(this._ambientFrame);
    }

    stopAmbientLight() {
        this._ambientFrame = null;
    }

    /**
     * Speed Preview - Long press to fast forward at 2x speed
     */
    startSpeedPreview() {
        if (this.isSpeedPreview) return;
        this.isSpeedPreview = true;
        this.originalSpeed = this.video.playbackRate;
        this.video.playbackRate = 2;

        const indicator = this.container.querySelector('#txa-speed-indicator');
        if (indicator) indicator.classList.add('show');
        if (this.wrapper) this.wrapper.classList.add('hide-controls');

        // Play if paused
        if (this.video.paused) {
            this._wasPausedBeforePreview = true;
            this.video.play().catch(() => { });
        }
    }

    stopSpeedPreview() {
        if (!this.isSpeedPreview) return;
        this.isSpeedPreview = false;
        this.video.playbackRate = this.originalSpeed || 1;

        const indicator = this.container.querySelector('#txa-speed-indicator');
        if (indicator) indicator.classList.remove('show');
        if (this.wrapper) this.wrapper.classList.remove('hide-controls');

        // Pause if was paused before
        if (this._wasPausedBeforePreview) {
            this.video.pause();
            this._wasPausedBeforePreview = false;
        }
    }

    /**
     * Watch Progress Resume - Save and restore watch position
     */
    getVideoId() {
        // Generate unique ID based on movie ID and episode info for stability
        const base = this.options.movieId || this.options.title || 'unknown';
        const ep = this.options.episodeSlug || this.options.episodeName || 'single';
        return 'txa-progress-' + this.hashCode(base + '-' + ep);
    }

    hashCode(str) {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            const char = str.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash = hash & hash;
        }
        return Math.abs(hash).toString(36);
    }

    saveWatchProgress(useApi = false) {
        if (!this.video || this.video.duration < 10) return;

        const ct = this.video.currentTime;
        const dur = this.video.duration;
        const opt = this.options;

        // 1. App LocalStorage Sync (ContinueWatching)
        if (window.ContinueWatching && opt.movieSlug) {
            window.ContinueWatching.save(
                opt.movieSlug,
                opt.title.split(' - ')[0], // Assume Title is "Movie - Episode"
                opt.movieThumb,
                opt.episodeSlug,
                opt.title.split(' - ')[1]?.replace('Tập ', '') || '1',
                ct,
                dur,
                opt.epCount || 1
            );
        }

        // 2. App API Sync (Database)
        if (useApi && opt.saveUrl && opt.movieId && opt.csrfToken) {
            fetch(opt.saveUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': opt.csrfToken
                },
                body: JSON.stringify({
                    movie_id: opt.movieId,
                    episode_id: opt.episodeId,
                    current_time: ct,
                    duration: dur
                })
            }).catch(e => console.warn('Player: Progress sync failed', e));
        }

        // 3. Player Internal Backup (Fallback)
        if (ct > 10 && ct < dur - 30) {
            localStorage.setItem(this.getVideoId(), JSON.stringify({
                time: ct,
                duration: dur,
                timestamp: Date.now()
            }));
        }
    }

    async checkWatchResume() {
        if (this.resumeShown) return;
        const opt = this.options;
        let resumeTime = 0;
        let duration = 0;

        // Try API first (Best source of truth)
        if (opt.restoreUrl && opt.movieId) {
            try {
                const res = await fetch(opt.restoreUrl);
                const data = await res.json();

                if (data && data.current_time > 10) {
                    // Check if same episode (ID or Name/Slug match for multi-server)
                    // Relaxed Match: If restoreUrl is specific, we trust the data
                    const epIdMatch = (data.episode_id == opt.episodeId);

                    // Normalize "Tập 01" -> "1", "01" -> "1"
                    const norm = (s) => (s || '').toString().toLowerCase().replace('tập ', '').replace(/^0+/, '').trim();

                    const epNameMatch = norm(data.episode_name) === norm(opt.episodeName);
                    // Slug match is usually safer but relies on consistent slugs
                    const slugMatch = (data.episode_slug && opt.episodeSlug && data.episode_slug === opt.episodeSlug);

                    if (epIdMatch || epNameMatch || slugMatch || opt.restoreUrl.includes(opt.episodeId)) {
                        resumeTime = data.current_time;
                        duration = data.duration || 0;
                    }
                }
            } catch (e) { console.warn('Player: Restore API failed', e); }
        }

        // Fallback to Player's internal LocalStorage
        if (!resumeTime) {
            const saved = localStorage.getItem(this.getVideoId());
            if (saved) {
                try {
                    const data = JSON.parse(saved);
                    // Check if valid timestamp (within 30 days)
                    if (Date.now() - data.timestamp < 30 * 24 * 60 * 60 * 1000) {
                        resumeTime = data.time;
                        duration = data.duration;
                    }
                } catch (e) { }
            }
        }

        if (resumeTime > 15) {
            this.resumeShown = true;
            const timeStr = this.formatTime(resumeTime, duration >= 3600);

            // MOBILE: Use SweetAlert2 (Premium & Out-of-player)
            // Ensure Swal is available, otherwise fallback to standard overlay
            if (this.detectMobile() && typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Tiếp tục xem?',
                    text: `Hệ thống ghi nhận bạn đã xem đến ${timeStr}. Bạn có muốn tiếp tục từ đây không ? `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Có, tiếp tục',
                    cancelButtonText: 'Xem từ đầu',
                    background: '#141414',
                    color: '#fff',
                    confirmButtonColor: '#8b5cf6',
                    cancelButtonColor: '#334155',
                    heightAuto: false,
                    backdrop: `rgba(0, 0, 0, 0.6)`,
                    allowOutsideClick: false // Prevent accidental close
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.safeSeek(resumeTime);
                        this.video.play().catch(() => { });
                        this.showFeedback('text', `Đã tiếp tục từ ${timeStr} `);
                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        localStorage.removeItem(this.getVideoId());
                        // Don't auto play if cancelled, let user decide
                    }
                });
                return;
            }

            // DESKTOP or Mobile-Fallback: Classic Overlay
            const overlay = this.container.querySelector('#txa-resume');
            const timeEl = this.container.querySelector('#txa-resume-time');

            if (overlay && timeEl) {
                timeEl.textContent = timeStr;

                // Ensure overlay is visible
                overlay.style.display = 'flex';
                // Trigger animation
                requestAnimationFrame(() => {
                    overlay.classList.add('show');
                });

                // Auto-hide after 30s if no interaction (increased from 15s)
                const autoHideTimer = setTimeout(() => {
                    if (overlay.classList.contains('show')) {
                        overlay.classList.remove('show');
                        setTimeout(() => overlay.style.display = 'none', 500);
                    }
                }, 30000);

                const handleYes = (e) => {
                    if (e) e.stopPropagation();
                    clearTimeout(autoHideTimer);
                    this.safeSeek(resumeTime);
                    overlay.classList.remove('show');
                    setTimeout(() => overlay.style.display = 'none', 500);
                    this.video.play().catch(() => { });
                    this.showFeedback('text', `Đã tiếp tục từ ${timeStr} `);
                };

                const handleNo = (e) => {
                    if (e) e.stopPropagation();
                    clearTimeout(autoHideTimer);
                    overlay.classList.remove('show');
                    setTimeout(() => overlay.style.display = 'none', 500);
                    localStorage.removeItem(this.getVideoId());
                };

                const yesBtn = overlay.querySelector('#txa-resume-yes');
                const noBtn = overlay.querySelector('#txa-resume-no');

                if (yesBtn) {
                    yesBtn.onclick = handleYes;
                    yesBtn.ontouchstart = (e) => { e.preventDefault(); handleYes(e); };
                }
                if (noBtn) {
                    noBtn.onclick = handleNo;
                    noBtn.ontouchstart = (e) => { e.preventDefault(); handleNo(e); };
                }
            }
        }
    }

    /**
     * Double-tap Ripple Effect - Visual feedback for double-tap seek
     */
    createRipple(x, y) {
        const ripple = document.createElement('div');
        ripple.className = 'txa-ripple';
        ripple.style.left = (x - 50) + 'px';
        ripple.style.top = (y - 50) + 'px';
        this.wrapper.appendChild(ripple);

        // Remove after animation
        setTimeout(() => ripple.remove(), 600);
    }

    /**
     * Setup new feature event bindings
     */
    setupNewFeatures() {

        const el = (s) => this.container.querySelector(s);

        // Theater Mode Button
        const theaterBtn = el('#txa-theater');
        if (theaterBtn) {
            theaterBtn.onclick = () => this.toggleTheaterMode();
        }

        // Cinema Mode Button
        const cinemaBtn = el('#txa-cinema');
        if (cinemaBtn) {
            cinemaBtn.onclick = () => this.toggleCinemaMode();
        }

        // Speed Preview - Long press on video
        let speedTimeout = null;
        const startSpeed = () => {
            speedTimeout = setTimeout(() => {
                this.startSpeedPreview();
            }, 500);
        };
        const endSpeed = () => {
            clearTimeout(speedTimeout);
            this.stopSpeedPreview();
        };

        if (this.detectMobile()) {
            this.video.addEventListener('mousedown', startSpeed);
            this.video.addEventListener('mouseup', endSpeed);
            this.video.addEventListener('mouseleave', endSpeed);
        }

        // Touch support for Speed Preview
        this.video.addEventListener('touchstart', startSpeed, { passive: true });
        this.video.addEventListener('touchend', endSpeed);
        this.video.addEventListener('touchcancel', endSpeed);

        // Watch Resume - Check on video ready
        this.video.addEventListener('loadedmetadata', () => {
            this.checkWatchResume();
        });

        // Save progress periodically (LocalStorage: 10s, API: 30s)
        let lastApiSave = Date.now();
        this._progressSaveInterval = setInterval(() => {
            if (!this.destroyed && this.video && !this.video.paused) {
                const now = Date.now();
                const useApi = (now - lastApiSave) >= 30000;
                this.saveWatchProgress(useApi);
                if (useApi) lastApiSave = now;
            }
        }, 10000);

        // Save on pause and before unload
        this.video.addEventListener('pause', () => this.saveWatchProgress(true));
        window.addEventListener('beforeunload', () => this.saveWatchProgress(true));

        // Ripple effect on double-tap zones
        const addRippleToZone = (zone, seekFn) => {
            if (!zone) return;
            zone.addEventListener('dblclick', (e) => {
                const rect = this.wrapper.getBoundingClientRect();
                this.createRipple(e.clientX - rect.left, e.clientY - rect.top);
            });
        };

        addRippleToZone(el('#txa-zone-l'));
        addRippleToZone(el('#txa-zone-r'));

        // Escape key to exit Theater Mode
        this._handlers.theaterEscape = (e) => {
            if (e.key === 'Escape' && this.isTheaterMode) {
                this.toggleTheaterMode();
            }
        };
        window.addEventListener('keydown', this._handlers.theaterEscape);

        // v6.3.0 - Screen Width Warning (<100px)
        const checkWidth = () => {
            if (window.innerWidth < 100 && !window._txa_too_small) {
                window._txa_too_small = true;
                // Hide header/nav via CSS first just in case document.write is blocked or delayed
                const header = document.querySelector('.header');
                if (header) header.style.display = 'none';

                document.open();
                document.write(`
            < html >
                    <head>
                        <title>TPhimX - Màn hình quá nhỏ</title>
                        <style>
                            body { background:#0a0a0a; color:#fff; display:flex; align-items:center; justify-content:center; height:100vh; margin:0; font-family:'Outfit', sans-serif; text-align:center; padding:20px; }
                            .box { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:30px; backdrop-filter:blur(20px); max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
                            h1 { color:#ef4444; font-size:20px; font-weight:900; margin-bottom:15px; }
                            p { opacity:0.7; font-size:14px; line-height:1.6; }
                            .logo { font-size:24px; font-weight:800; margin-bottom:20px; }
                            .logo .t { color:#8b5cf6; }
                            .logo .phim { color:#fff; }
                            .logo .x { color:#ef4444; }
                        </style>
                    </head>
                    <body>
                        <div class="box">
                            <div class="logo"><span class="t">T</span><span class="phim">PHIM</span><span class="x">X</span></div>
                            <h1>MÀN HÌNH QUÁ NHỎ</h1>
                            <p>Vui lòng phóng to trình duyệt hoặc xoay ngang điện thoại để có trải nghiệm xem phim tốt nhất tại TPhimX.</p>
                        </div>
                        <script>
                            window.addEventListener('resize', () => {
                                if (window.innerWidth >= 100) {
                                    location.reload();
                                }
                            });
                        <\/script>
                    </body>
                    </html >
            `);
                document.close();
            }
        };

        window.addEventListener('resize', checkWidth);
        checkWidth(); // Initial check
    }

    checkTicker() {
        if (!this.video || this.video.paused) return;

        const cur = this.video.currentTime;
        const dur = this.video.duration;

        // ENDING SLOT: 1 minute before end (60s) - Only for videos > 2 mins
        if (dur > 120 && cur >= dur - 60 && cur < dur - 10) {
            if (!this._endingTickerShown) {
                console.log('[TXAPlayer] Triggering Ending Ticker');
                if (this._isTickerRunning) {
                    const container = this.container.querySelector('#txa-ticker');
                    const text = this.container.querySelector('#txa-ticker-text');
                    if (container && text) {
                        text.classList.remove('run');
                        void text.offsetWidth;
                        container.classList.remove('active');
                    }
                }
                this.triggerTicker(45, 'ending');
                this._endingTickerShown = true;
            }
            return;
        }

        // FIXED SLOT: 3:20 (200s) - Duration 40s
        if (cur >= 200 && cur < 240) {
            if (!this._fixedTickerShown) {
                console.log('[TXAPlayer] Triggering Fixed Slot Ticker (3:20)');
                if (this._isTickerRunning) {
                    const container = this.container.querySelector('#txa-ticker');
                    const text = this.container.querySelector('#txa-ticker-text');
                    if (container && text) {
                        text.classList.remove('run');
                        void text.offsetWidth;
                        container.classList.remove('active');
                    }
                }
                this.triggerTicker(40, 'fixed');
                this._fixedTickerShown = true;
            }
            return;
        }

        // Avoid random ticker if approaching fixed slot (e.g., 160s-200s buffer)
        if (cur >= 160 && cur < 240) return;
        // Avoid random ticker near end slot (80s buffer)
        if (dur > 0 && cur >= dur - 80) return;

        // Reset flags if user seeks back
        if (cur < 200 && this._fixedTickerShown) this._fixedTickerShown = false;
        if (dur > 0 && cur < dur - 100 && this._endingTickerShown) this._endingTickerShown = false;

        // Random Ticker Logic
        if (this.tickerCount >= this.tickerMax) return;

        if (cur > this.tickerNextTime && !this._isTickerRunning) {
            console.log('[TXAPlayer] Triggering Random Ticker at', cur);
            this.triggerTicker();
        }
    }

    triggerTicker(forcedDuration = null, type = 'random') {
        const container = this.container.querySelector('#txa-ticker');
        const text = this.container.querySelector('#txa-ticker-text');

        if (!container || !text) {
            console.warn('[TXAPlayer] Ticker container OR text not found!');
            return;
        }

        this._isTickerRunning = true;
        if (type === 'random') this.tickerCount++;

        // Random Style: 1-4
        const styles = ['style-1', 'style-2', 'style-3', 'style-4'];
        text.className = 'txa-ticker-text ' + styles[Math.floor(Math.random() * styles.length)];

        // Content
        const domain = window.location.hostname.replace('www.', '');
        const randomMsgs = [
            `Bạn đang thưởng thức phim tại <span class="highlight">${domain}</span> | Bản quyền thuộc về <span class="brand">TPHIMX</span>`,
            `Cảm ơn bạn đã lựa chọn <span class="highlight">${domain}</span> | Chúc bạn xem phim vui vẻ!`,
            `Hệ thống <span class="brand">TPHIMX</span> đang tối ưu hóa trải nghiệm của bạn tại <span class="highlight">${domain}</span>`,
            `Đừng quên lưu <span class="highlight">${domain}</span> vào dấu trang để truy cập nhanh hơn!`,
            `Phim chất lượng cao, tốc độ mượt mà chỉ có tại <span class="brand">TPHIMX</span> & <span class="highlight">${domain}</span>`,
            `Nếu link phim lỗi, hãy thử đổi Server hoặc báo lỗi ngay cho admin bằng nút ở ngoài nhé!`
        ];

        // Type selection
        if (type === 'random') {
            text.innerHTML = randomMsgs[Math.floor(Math.random() * randomMsgs.length)];
        } else if (type === 'ending') {
            const filmTitle = this.options.title || 'Phim';
            text.innerHTML = `<span style="opacity:0.8;font-weight:400;">BẠN đang xem</span> <span class="highlight">${filmTitle}</span> <span style="opacity:0.8;font-weight:400;margin-left:5px;">tại</span> <span style="color:#8b5cf6;font-weight:900;margin-left:5px;">T</span><span style="color:#fff;font-weight:900;">PHIM</span><span style="color:#facc15;font-weight:900;">X</span> <span style="opacity:0.3;font-size:0.9em;margin:0 5px;">|</span> <span style="opacity:0.8;font-weight:400;">Chúc bạn có những giây phút thư giãn tuyệt vời tại</span> <span class="highlight">${domain}</span>`;
        } else {
            const icon = ['fa-film', 'fa-star', 'fa-heart', 'fa-crown'][Math.floor(Math.random() * 4)];
            const iconColor = ['#fbbf24', '#f472b6', '#a78bfa', '#38bdf8'][Math.floor(Math.random() * 4)];
            text.innerHTML = `<i class="fas ${icon}" style="color:${iconColor}"></i> <span style="opacity:0.8;font-weight:400;">Bạn đang thưởng thức phim tại</span> <span class="highlight">${domain}</span> <span style="opacity:0.3;font-size:0.9em;margin:0 5px;">|</span> <span style="opacity:0.8;font-weight:400;">Bản quyền thuộc về</span> <span class="brand">TPHIMX</span>`;
        }

        // Duration Logic: Fix space issue
        const duration = forcedDuration || (Math.floor(Math.random() * (34 - 20 + 1)) + 20);
        text.style.setProperty('--ticker-dur', `${duration}s`);

        container.classList.add('active');
        text.classList.remove('run');
        void text.offsetWidth; // Trigger reflow
        text.classList.add('run');

        // Reset on end
        const onEnd = () => {
            container.classList.remove('active');
            text.classList.remove('run');
            this._isTickerRunning = false;
            this.lastTickerTime = this.video.currentTime;
            this.tickerNextTime = this.lastTickerTime + 60 + Math.random() * 60;
            text.removeEventListener('animationend', onEnd);
        };
        text.addEventListener('animationend', onEnd);
    }
    // --- v6.4.0 Real-time Clock Logic ---
    startClock() {
        if (this._clockInterval) clearInterval(this._clockInterval);
        this.updateClock();
        this._clockInterval = setInterval(() => this.updateClock(), 1000);
    }

    updateClockVisibility() {
        if (!this.container || this.destroyed) return;
        const clockEl = this.container.querySelector('#txa-clock');
        const itemClock = this.container.querySelector('#txa-item-clock');

        const isMobile = this.detectMobile();
        // v6.4.1 - Expanded fullscreen detection for iOS & Android
        const isFS = !!(
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement ||
            document.webkitIsFullScreen ||
            this.video?.webkitDisplayingFullscreen
        );
        const isFSClass = this.wrapper?.classList.contains('fullscreen-mode');

        const enabled = this.settings.showRealTime;
        // v6.4.1 - Logic Change: Always show if enabled, regardless of login (for easier verification)
        // You can restore isLogged requirement later if requested.

        // Mobile visibility: Show if Fullscreen OR Landscape (common for watching)
        const isLandscape = isMobile && window.innerWidth > window.innerHeight;
        let isVisible = enabled;

        if (isMobile && !isFS && !isFSClass && !isLandscape) isVisible = false;

        if (clockEl) clockEl.classList.toggle('active', isVisible);
        if (itemClock) itemClock.style.display = enabled ? 'flex' : 'none';

        return isVisible;
    }

    updateClock() {
        const clockText = this.container.querySelector('#txa-clock-text');
        if (!clockText || (this.settings.showRealTime === false)) return;

        const now = new Date();
        const HH = String(now.getHours()).padStart(2, '0');
        const ii = String(now.getMinutes()).padStart(2, '0');
        const ss = String(now.getSeconds()).padStart(2, '0');

        // Fast path for default format to improve performance
        if (this.settings.clockFormat === 'H:i:s' || !this.settings.clockFormat) {
            clockText.textContent = `${HH}:${ii}:${ss} `;
            return;
        }

        const dd = String(now.getDate()).padStart(2, '0');
        const mm = String(now.getMonth() + 1).padStart(2, '0');
        const yyyy = now.getFullYear();
        const yy = String(yyyy).slice(-2);

        clockText.textContent = this.settings.clockFormat
            .replace('H', HH).replace('i', ii).replace(/s|S/g, ss)
            .replace('d', dd).replace('M', mm).replace('YYYY', yyyy).replace('YY', yy);
    }

    destroy() {
        if (this.destroyed) return;
        this.destroyed = true;

        if (this._clockInterval) clearInterval(this._clockInterval);
        if (this._uiTimer) clearTimeout(this._uiTimer);
        if (this._autoNextCountdownInterval) clearInterval(this._autoNextCountdownInterval);

        // Cleanup global event listeners
        window.removeEventListener('mousemove', this._handlers.winMouseMove);
        window.removeEventListener('mouseup', this._handlers.winMouseUp);
        document.removeEventListener('fullscreenchange', this._handlers.docFSChange);
        document.removeEventListener('click', this._handlers.docClick);

        if (this.dashPlayer) {
            this.dashPlayer.destroy();
        }
        if (this.hls) {
            this.hls.destroy();
        }
    }
}; 
}