/**
 * mp-video.css v2.11.2
 * [FIXED] Seekbar 100% Width in Fullscreen Idle Mode.
 * [BASE] Stable Version + Chapter Markers + Tooltips.
 */

/* --- 1. PLAYER CONTAINER --- */
.lelh-mp__player {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    min-height: 240px;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.3);
    z-index: 1;
}

/* Youtube: Ép tỷ lệ 16:9 */
.lelh-mp--youtube .lelh-mp__player { padding-top: 56.25%; height: 0; min-height: 0; }
.lelh-mp__yt-target, .lelh-mp__player iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; margin: 0; }

/* Audio: Chiều cao cố định */
.lelh-mp--audio .lelh-mp__player {
    padding: 0; height: 120px; min-height: 120px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.lelh-mp__audio { display: none; }

/* --- 2. OVERLAY --- */
.lelh-mp__player-overlay {
    position: absolute; inset: 0; 
    pointer-events: auto; 
    display: flex; flex-direction: column; justify-content: flex-end;
    z-index: 20; padding-bottom: 0;
}

/* --- 3. CONTROLS BAR --- */
.lelh-mp__controls-bar {
    pointer-events: auto; width: 100%; height: 4px; background: rgba(255,255,255,0.2);
    display: flex; align-items: center; gap: 0; padding: 0;
    overflow: visible; /* Để hiển thị Tooltip */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* HIỆN CONTROLS */
.lelh-mp__player:hover .lelh-mp__controls-bar,
.lelh-mp.is-mouse-active .lelh-mp__controls-bar,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__controls-bar,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__controls-bar,
.lelh-mp__controls-bar.is-dragging {
    height: 54px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.6) 60%, transparent 100%);
    padding: 0 16px; gap: 12px; overflow: visible;
}

/* --- BUTTONS --- */
.lelh-mp__btn-play, .lelh-mp__btn-fs, .lelh-mp__btn-prev, .lelh-mp__btn-next {
    height: 36px; border: none; background: transparent; 
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; opacity: 0; 
    width: 0; padding: 0; margin: 0; color: #fff;
}

/* Hiện nút */
.lelh-mp__player:hover .lelh-mp__btn-play, 
.lelh-mp__player:hover .lelh-mp__btn-prev, 
.lelh-mp__player:hover .lelh-mp__btn-next,
.lelh-mp.is-mouse-active .lelh-mp__btn-play,
.lelh-mp.is-mouse-active .lelh-mp__btn-prev,
.lelh-mp.is-mouse-active .lelh-mp__btn-next,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__btn-play,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__btn-prev,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__btn-next,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__btn-play,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__btn-prev,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__btn-next,
.lelh-mp__controls-bar.is-dragging .lelh-mp__btn-play { width: 36px; opacity: 0.9; }

/* Nút Fullscreen */
.lelh-mp__btn-fs { display: none; margin-left: auto; }
.lelh-mp--mode-embedded .lelh-mp__btn-fs { display: flex; }
.lelh-mp--mode-embedded .lelh-mp__player:hover .lelh-mp__btn-fs,
.lelh-mp--mode-embedded.is-mouse-active .lelh-mp__btn-fs,
.lelh-mp--mode-embedded:fullscreen.is-mouse-active .lelh-mp__btn-fs,
.lelh-mp--mode-embedded:-webkit-full-screen.is-mouse-active .lelh-mp__btn-fs { width: 36px; opacity: 0.9; }

.lelh-mp__btn-play:hover, .lelh-mp__btn-fs:hover, .lelh-mp__btn-prev:hover, .lelh-mp__btn-next:hover { opacity: 1; transform: scale(1.1); }

/* --- ICONS --- */
.lelh-mp__icon { width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.lelh-mp__icon-play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
.lelh-mp__icon-pause { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E"); }
.lelh-mp__icon-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 6h2v12H6zm3.5 6l8.5 6V6z'/%3E%3C/svg%3E"); }
.lelh-mp__icon-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z'/%3E%3C/svg%3E"); }
.lelh-mp__icon-fs-enter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E"); }
.lelh-mp__icon-fs-exit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'/%3E%3C/svg%3E"); }

/* --- SEEK BAR --- */
.lelh-mp__seek-wrap { 
    flex-grow: 1; height: 100%; display: flex; align-items: center; cursor: pointer; 
    /* Trạng thái nghỉ: Phủ kín 100% */
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; z-index: 5; margin: 0; padding: 0;
}

/* Khi Active: Chuyển về Relative để nằm giữa các nút */
.lelh-mp__player:hover .lelh-mp__seek-wrap, 
.lelh-mp.is-mouse-active .lelh-mp__seek-wrap,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__seek-wrap,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__seek-wrap,
.lelh-mp__controls-bar.is-dragging .lelh-mp__seek-wrap { 
    position: relative; width: auto; left: auto; top: auto; right: auto; bottom: auto; 
}

.lelh-mp__seek-track { 
    width: 100%; height: 100%; background: rgba(255,255,255,0.15); 
    border-radius: 0; position: relative; transition: height 0.2s, border-radius 0.2s; 
    z-index: 0; 
}
.lelh-mp__player:hover .lelh-mp__seek-track, 
.lelh-mp.is-mouse-active .lelh-mp__seek-track,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__seek-track,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__seek-track { height: 4px; border-radius: 2px; }

.lelh-mp__seek-played { position: absolute; inset: 0 auto 0 0; width: 0; background: #ff0000; transition: width 0.1s linear; z-index: 2; pointer-events: none; }

/* Thumb: Ẩn khi nghỉ */
.lelh-mp__seek-thumb { 
    position: absolute; top: 50%; left: 0%; width: 14px; height: 14px; background: #fff; border-radius: 50%; 
    transform: translate(-50%, -50%) scale(0); box-shadow: 0 1px 3px rgba(0,0,0,0.4); 
    transition: transform 0.2s; pointer-events: none; z-index: 25;
}
.lelh-mp__player:hover .lelh-mp__seek-thumb, 
.lelh-mp.is-mouse-active .lelh-mp__seek-thumb,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__seek-thumb,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__seek-thumb,
.lelh-mp__controls-bar.is-dragging .lelh-mp__seek-thumb { transform: translate(-50%, -50%) scale(1); }
.lelh-mp__seek-wrap:hover .lelh-mp__seek-thumb { transform: translate(-50%, -50%) scale(1.3); }

/* --- TIME DISPLAY --- */
.lelh-mp__time-display { 
    color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
    width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin: 0; padding: 0; 
    transition: all 0.2s; position: relative; z-index: 10; 
}
.lelh-mp__player:hover .lelh-mp__time-display, 
.lelh-mp.is-mouse-active .lelh-mp__time-display,
.lelh-mp:fullscreen.is-mouse-active .lelh-mp__time-display,
.lelh-mp:-webkit-full-screen.is-mouse-active .lelh-mp__time-display { width: auto; opacity: 1; margin-left: 12px; }

/* [CHAPTER MARKERS] */
.lelh-mp__chapters-layer {
    position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
    pointer-events: none; z-index: 20; display: flex;
}
.lelh-mp__chapter-marker {
    position: absolute; top: -15px; bottom: -15px; background: transparent;
    pointer-events: auto; box-sizing: border-box;
}
.lelh-mp__chapter-marker::before {
    content: ''; position: absolute;
    top: 15px; bottom: 15px; /* Khớp với track 4px */
    left: 0; right: 0;
    border-left: 1px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05);
    transition: background 0.2s;
}
.lelh-mp__chapter-marker:hover::before { background: rgba(255,255,255,0.3); }
.lelh-mp__chapter-marker::after {
    content: attr(data-label);
    position: absolute; bottom: 100%; left: 50%;
    transform: translate(-50%, 0); margin-bottom: 8px;
    padding: 4px 8px; background: rgba(0,0,0,0.85);
    color: #fff; font-size: 11px; white-space: nowrap;
    border-radius: 4px; pointer-events: none; opacity: 0;
    transition: opacity 0.1s; box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 30;
}
.lelh-mp__chapter-marker:hover::after { opacity: 1; }

/* 5. FULLSCREEN FIXES */
.lelh-mp:fullscreen .lelh-mp__controls, .lelh-mp:-webkit-full-screen .lelh-mp__controls { display: none !important; }
.lelh-mp:fullscreen .lelh-mp__layout, .lelh-mp:fullscreen .lelh-mp__main { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
.lelh-mp:fullscreen .lelh-mp__player { width: 100vw !important; height: 100vh !important; padding-top: 0 !important; border-radius: 0 !important; background: #000; display: flex; align-items: center; justify-content: center; }

/* 6. FULLSCREEN IDLE STATE - RESET CONTROLS */
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__controls-bar:not(.is-dragging),
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__controls-bar:not(.is-dragging) { 
    height: 4px !important; background: rgba(255,255,255,0.2) !important; overflow: hidden !important; padding: 0 !important; 
}
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__btn-play, 
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__btn-fs,
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__btn-prev,
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__btn-next,
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__time-display,
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__btn-play, 
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__btn-fs,
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__btn-prev,
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__btn-next,
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__time-display {
    width: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; display: none !important;
}

/* 7. FULLSCREEN IDLE STATE - SEEKBAR 100% */
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__seek-wrap,
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__seek-wrap {
    position: absolute !important; 
    left: 0 !important; right: 0 !important; 
    width: 100% !important; 
    bottom: 0 !important; top: auto !important;
    margin: 0 !important; padding: 0 !important;
}
.lelh-mp:fullscreen:not(.is-mouse-active) .lelh-mp__seek-thumb, 
.lelh-mp:-webkit-full-screen:not(.is-mouse-active) .lelh-mp__seek-thumb { transform: scale(0) !important; }
.lelh-mp:fullscreen:not(.is-mouse-active), .lelh-mp:-webkit-full-screen:not(.is-mouse-active) { cursor: none !important; }