/* =========================================
   1. LAYOUT
   ========================================= */
.thx-ec-mp { margin: 30px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #333; box-sizing: border-box; width: 100%; line-height: 1.6; }
.thx-ec-mp * { box-sizing: border-box; }

.thx-ec-mp__layout { display: flex; flex-direction: column; gap: 20px; position: relative; }
.thx-ec-mp__main { width: 100%; transition: width 0.3s ease; }

@media (min-width: 850px) {
    .thx-ec-mp:not(.thx-ec-mp--mode-split) .thx-ec-mp__main { width: 100%; max-width: 850px; margin: 0 auto; }
    .thx-ec-mp.thx-ec-mp--mode-split .thx-ec-mp__layout { flex-direction: row; align-items: flex-start; }
    .thx-ec-mp.thx-ec-mp--mode-split .thx-ec-mp__main { width: 63%; flex-shrink: 0; }
    .thx-ec-mp.thx-ec-mp--mode-split .thx-ec-mp__transcript { width: 35%; height: auto; position: absolute; top: 0; bottom: 0; right: 0; }
}

/* =========================================
   2. SUBTITLES & TRANSCRIPT
   ========================================= */
.thx-ec-mp__embedded-subtitles { 
    pointer-events: auto; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(6px); 
    padding: 12px 24px; border-radius: 12px; margin: 0 auto 50px auto; 
    max-width: 90%; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; 
    z-index: 25; user-select: none; -webkit-user-select: none; 
}
.thx-ec-mp__sub-en { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
.thx-ec-mp__sub-ipa { color: #fcd34d; font-size: 15px; font-style: italic; margin-bottom: 2px; opacity: 0.95; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.thx-ec-mp__sub-vi { color: #e2e8f0; font-size: 16px; font-weight: 400; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.thx-ec-mp--mode-split .thx-ec-mp__embedded-subtitles, .thx-ec-mp--mode-video-text .thx-ec-mp__embedded-subtitles { display: none !important; }

/* Transcript */
.thx-ec-mp__transcript { display: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow-y: auto; height: 100%; max-height: 500px; position: absolute; top: 0; bottom: 0; right: 0; width: 35%; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
@media (max-width: 849px) { .thx-ec-mp__transcript { position: relative; width: 100%; height: 350px; } }
.thx-ec-mp__transcript-item { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; position: relative; padding-right: 36px; transition: background 0.15s; }
.thx-ec-mp__transcript-item:hover { background-color: #f8fafc; }
.thx-ec-mp__transcript-item.is-active { background-color: #eff6ff; border-left: 4px solid #3b82f6; padding-left: 10px; }
.thx-ec-mp__transcript-en { font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }
.thx-ec-mp__transcript-ipa { font-size: 14px; color: #b45309; font-style: italic; margin-bottom: 2px; }
.thx-ec-mp__transcript-vi { font-size: 15px; color: #64748b; }
.thx-ec-mp__loop-btn { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; color: #94a3b8; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: 0.2s; z-index: 5; }
.thx-ec-mp__play-once-btn { position: absolute; top: 50%; right: 35px; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; color: #94a3b8; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: 0.2s; z-index: 5; font-size: 10px; font-weight: bold; }
.thx-ec-mp__loop-btn::before { content: "↻"; font-weight: bold; font-size: 12px; }
.thx-ec-mp__transcript-item:hover .thx-ec-mp__loop-btn,
.thx-ec-mp__transcript-item:hover .thx-ec-mp__play-once-btn { opacity: 1; }
.thx-ec-mp__play-once-btn:hover { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.thx-ec-mp__loop-btn:hover { background: #22c55e; border-color: #22c55e; color: #fff; }

.thx-ec-mp__transcript-item.is-looping { background-color: #f0fdf4; border-left-color: #22c55e; }
.thx-ec-mp__transcript-item.is-looping .thx-ec-mp__loop-btn { opacity: 1; background: #22c55e; border-color: #22c55e; color: #fff; }

.thx-ec-mp__transcript-item.is-playing-once { background-color: #eff6ff; border-left-color: #3b82f6; }
.thx-ec-mp__transcript-item.is-playing-once .thx-ec-mp__play-once-btn { opacity: 1; background: #3b82f6; border-color: #3b82f6; color: #fff; }

.thx-ec-mp.thx-ec-mp--hide-ipa .thx-ec-mp__sub-ipa, .thx-ec-mp.thx-ec-mp--hide-ipa .thx-ec-mp__transcript-ipa { display: none !important; }
.thx-ec-mp.thx-ec-mp--hide-vi .thx-ec-mp__sub-vi, .thx-ec-mp.thx-ec-mp--hide-vi .thx-ec-mp__transcript-vi { display: none !important; }
.thx-ec-text-block.thx-ec-mp-hidden { display: none !important; }

/* =========================================
   3. INJECTED CONTROLS (Sticky Mini Player)
   ========================================= */
.thx-ec-mp__sticky-controls { display: flex; align-items: center; justify-content: center; height: 100%; margin-right: 24px; }

/* Nút bấm tròn (4 Trạng thái chuẩn) */
.thx-ec-mp__fixed-btn {
    width: 48px; height: 48px; border-radius: 50%;
    background-color: var(--tv-accent-bg, #ffffff); color: var(--tv-neutral-fg, #333333);
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer; display: flex; justify-content: center; align-items: center; padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none; opacity: 1 !important; pointer-events: auto !important; z-index: 10000;
}
.thx-ec-mp__fixed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0);
    background: var(--tv-neutral-bg, #f8fafc); color: var(--tv-accent, #000000);
}
.thx-ec-mp__fixed-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: var(--tv-accent, #e2e8f0); color: var(--tv-count-fg, #333333);
}
.thx-ec-mp__fixed-btn:focus:not(:active) {
    outline: none;
    background-color: var(--tv-accent-bg, #ffffff); color: var(--tv-neutral-fg, #333333);
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Icon (Sử dụng currentColor) */
.thx-ec-mp__fixed-icon { display: block; width: 20px; height: 20px; opacity: 0.8; transition: opacity 0.2s; }
.thx-ec-mp__fixed-btn:hover .thx-ec-mp__fixed-icon { opacity: 1; }

/* Seekbar */
.thx-ec-mp__fixed-seek {
    position: relative; width: 100%; height: 4px; min-height: 4px; background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer; z-index: 9999; transition: height 0.15s ease-out, background-color 0.15s; display: block; border-radius: 2px; overflow: hidden;
}
.thx-ec-mp__fixed-seek:hover { height: 8px; background-color: rgba(0, 0, 0, 0.15); }
.thx-ec-mp__fixed-played { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background-color: #ff0000; transition: width 0.1s linear; border-radius: 2px; box-shadow: 0 0 10px rgba(255, 0, 0, 0.4); }

/* Utility */
.thx-ec-mp-force-hidden { display: none !important; }