/* Frontend Styles - Edu Khóa Học Việt Pro */

:root {
    --primary-color: #2563eb;
    --secondary-bg: #f2f2f2;
    --text-main: #0f0f0f;
    --text-muted: #606060;
    --border-color: #e5e5e5;
    --hover-bg: #e5e5e5;
}

.edu-course-landing { font-family: 'Roboto', sans-serif; }
.tab-active { border-bottom: 2px solid #2563eb; color: #2563eb; }

.status-badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
.status-free { background-color: #d1fae5; color: #065f46; } 
.status-paid { background-color: #fee2e2; color: #991b1b; }
.status-highlight { background-color: #fef3c7; color: #92400e; }

/* Custom Scrollbar for sleek UI */
.scrollbar-hide::-webkit-scrollbar { display: none; } 

/* Scrollbar tối màu riêng cho Modal Học Thử */
.edu-scrollbar-dark::-webkit-scrollbar { width: 6px; } 
.edu-scrollbar-dark::-webkit-scrollbar-track { background: transparent; } 
.edu-scrollbar-dark::-webkit-scrollbar-thumb { background-color: #444; border-radius: 4px; } 
.edu-scrollbar-dark::-webkit-scrollbar-thumb:hover { background: #666; }

/* Active status cho Sidebar Phòng học */
.edu-sidebar-active { 
    background-color: #ffffff !important; 
    border-color: #d1d5db !important; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; 
} 

/* Active state for Dashboard Menus */
.edu-nav-active { 
    background-color: #f3f4f6 !important; 
    color: #2563eb !important; 
    font-weight: 700;
}
.edu-nav-active .material-symbols-outlined { color: #2563eb !important; }

/* Custom CSS cho thanh kéo thả lọc giá */
.edu-price-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; background: #2563eb; border-radius: 50%; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.2); border: 2px solid #ffffff; }
.edu-price-slider::-moz-range-thumb { width: 20px; height: 20px; background: #2563eb; border-radius: 50%; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.2); border: 2px solid #ffffff; }

/* ==============================================================
   CSS HỆ THỐNG PRO VIDEO PLAYER
============================================================== */
.edu-pro-video-wrapper { position: relative; width: 100%; height: 100%; background-color: #000; overflow: hidden; user-select: none; font-family: 'Roboto', sans-serif; }

/* Ngăn click Iframe gốc */
.edu-pro-video-wrapper iframe, .edu-pro-video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none !important; }

.edu-pro-watermark { position: absolute; top: 15px; right: 20px; z-index: 10; font-size: 14px; font-weight: bold; color: rgba(255, 255, 255, 0.3); text-shadow: 1px 1px 2px rgba(0,0,0,0.8); pointer-events: none; letter-spacing: 1px; }

/* Kính bảo vệ đón thao tác click */
.edu-pro-mask { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0,0,0,0.1); transition: background 0.3s; }
.edu-pro-video-wrapper:hover .edu-pro-mask { background: rgba(0,0,0,0.2); }

/* Nút Center Play */
.edu-pro-center-play { width: 75px; height: 75px; background-color: rgba(37, 99, 235, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(4px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 25px rgba(0,0,0,0.4); pointer-events: none; }
.edu-pro-video-wrapper:hover .edu-pro-center-play { transform: scale(1.05); }
.edu-pro-center-play span { font-size: 44px; margin-left: 4px; } 

/* Khi video đang phát -> Ẩn nút giữa và ảnh bìa */
.edu-pro-video-wrapper.is-playing .edu-pro-center-play { opacity: 0; transform: scale(1.5); }
.edu-pro-video-wrapper.is-playing .edu-pro-mask { background: transparent; }
.edu-pro-video-wrapper.is-playing .edu-pro-mask-thumb { opacity: 0; pointer-events: none; }

/* Khối Control dưới cùng */
.edu-pro-controls { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); z-index: 50; padding: 40px 15px 10px 15px; display: flex; flex-direction: column; gap: 8px; transform: translateY(10px); opacity: 0; transition: all 0.3s ease; pointer-events: auto !important; }
.edu-pro-video-wrapper:hover .edu-pro-controls { transform: translateY(0); opacity: 1; }
.edu-pro-controls * { pointer-events: auto !important; }

/* Thanh tiến trình (Timeline) */
.edu-pro-progress-container { width: 100%; height: 5px; background: rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer; position: relative; transition: height 0.1s, transform 0.1s; margin-bottom: 5px; }
.edu-pro-progress-container:hover { height: 7px; transform: scaleY(1.1); }
.edu-pro-progress-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: var(--primary-color); border-radius: 4px; pointer-events: none; }
.edu-pro-progress-bar::after { content: ''; position: absolute; right: -5px; top: -2.5px; width: 10px; height: 10px; background: #fff; border-radius: 50%; transform: scale(0); transition: transform 0.2s; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.edu-pro-progress-container:hover .edu-pro-progress-bar::after { transform: scale(1); top: -1.5px;}

/* Bố cục Nút bấm */
.edu-pro-controls-row { display: flex; justify-content: space-between; align-items: center; color: white; }
.edu-pro-controls-left, .edu-pro-controls-right { display: flex; align-items: center; gap: 18px; }
.edu-pro-btn { background: none; border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0.85; transition: opacity 0.2s, color 0.2s; outline: none; }
.edu-pro-btn:hover { opacity: 1; color: var(--primary-color); }
.edu-pro-btn span { font-size: 28px; }
.edu-pro-time { font-family: "Courier New", monospace; font-size: 13px; font-weight: 600; opacity: 0.9; letter-spacing: 0.5px; }

/* Âm lượng */
.edu-pro-vol-group { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.edu-pro-vol-slider { width: 0; opacity: 0; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; height: 4px; -webkit-appearance: none; background: rgba(255,255,255,0.3); border-radius: 2px; outline: none; cursor: pointer; margin: 0; }
.edu-pro-vol-group:hover .edu-pro-vol-slider { width: 80px; opacity: 1; }
.edu-pro-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; }

/* Chế độ Idle */
.edu-pro-video-wrapper.is-playing.is-idle { cursor: none; }
.edu-pro-video-wrapper.is-playing.is-idle .edu-pro-controls { opacity: 0; transform: translateY(10px); }

/* ==============================================================
   HIỆU ỨNG KÍCH THÍCH NÚT BẤM CTA (Xóa lướt sáng, Giữ vòng sóng, Chữ trắng)
============================================================== */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.edu-cta-btn {
    animation: pulse-glow 2s infinite;
    position: relative;
    transform: scale(1);
    transition: transform 0.2s, background-color 0.2s;
    color: #ffffff !important; 
}
.edu-cta-btn:hover {
    transform: scale(1.03);
    color: #ffffff !important; 
}
.edu-cta-btn-green { animation: pulse-glow-green 2s infinite; color: #ffffff !important; }
@keyframes pulse-glow-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}