.hep-course-player-wrapper{display:flex;gap:20px;flex-wrap:wrap;max-width:100%}.hep-layout-left .hep-course-navigation{order:-1}.hep-layout-right .hep-course-player-main{flex:1;min-width:0}.hep-layout-left .hep-course-player-main{flex:1;min-width:0}.hep-layout-bottom{flex-direction:column}.hep-layout-bottom .hep-course-navigation{width:100%!important}.hep-course-player{max-width:100%}.hep-video-container{position:relative;width:100%;height:400px;background:#000;border-radius:8px;overflow:hidden;margin-bottom:20px}.hep-video-container iframe,.hep-video-container video{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.hep-video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#f0f0f0;color:#666}.hep-video-placeholder p{margin:0;text-align:center}.hep-video-placeholder a{color:#0073aa;text-decoration:none;font-weight:500}.hep-video-placeholder a:hover{text-decoration:underline}.hep-video-info h3{margin:0 0 15px 0;font-size:24px;font-weight:600;color:#333;line-height:1.3}.hep-video-info p{margin:0 0 15px 0;color:#666;line-height:1.6}.hep-video-meta{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid #e5e5e5;font-size:14px;color:#666}.hep-section-name{font-weight:500;color:#0073aa}.hep-video-duration{background:#f5f5f5;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:500}.hep-course-navigation{background:#f9f9f9;border:1px solid #e5e5e5;border-radius:8px;padding:20px;width:300px;max-height:600px;overflow-y:auto}.hep-course-navigation h3{margin:0 0 20px 0;font-size:18px;font-weight:600;color:#333;border-bottom:2px solid #0073aa;padding-bottom:10px}.hep-nav-section{margin-bottom:20px}.hep-nav-section h4{margin:0 0 10px 0;font-size:14px;font-weight:600;color:#555;padding:8px 0;border-bottom:1px solid #e5e5e5}.hep-nav-section.active h4{color:#0073aa;font-weight:700}.hep-nav-videos{list-style:none;padding:0;margin:0}.hep-nav-videos li{margin-bottom:2px}.hep-nav-videos li.current{background:#0073aa;border-radius:6px}.hep-nav-videos a{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;text-decoration:none;color:#555;border-radius:6px;transition:all 0.2s ease;font-size:13px;line-height:1.4}.hep-nav-videos li.current a{color:#fff;font-weight:500}.hep-nav-videos a:hover{background:#f0f0f0;color:#0073aa}.hep-nav-videos li.current a:hover{background:rgba(255,255,255,.1);color:#fff}.hep-video-title{flex:1;margin-right:10px}.hep-nav-videos .duration{font-size:11px;color:#999;font-style:italic;background:rgba(0,0,0,.05);padding:2px 6px;border-radius:10px}.hep-nav-videos li.current .duration{color:rgba(255,255,255,.8);background:rgba(255,255,255,.2)}@media (max-width:1024px){.hep-course-player-wrapper{flex-direction:column}.hep-course-navigation{width:100%!important;max-height:400px}.hep-layout-left .hep-course-navigation,.hep-layout-right .hep-course-navigation{order:1}}@media (max-width:768px){.hep-video-container{height:250px}.hep-video-info h3{font-size:20px}.hep-video-meta{flex-direction:column;align-items:flex-start;gap:8px}.hep-course-navigation{padding:15px}.hep-nav-videos a{padding:10px 12px;font-size:12px}}@media (max-width:480px){.hep-video-container{height:200px}.hep-course-player-wrapper{gap:15px}.hep-course-navigation{padding:12px;max-height:300px}.hep-nav-videos a{flex-direction:column;align-items:flex-start;gap:4px}.hep-nav-videos .duration{align-self:flex-end}}.hep-course-navigation::-webkit-scrollbar{width:6px}.hep-course-navigation::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.hep-course-navigation::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.hep-course-navigation::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.hep-course-player.loading .hep-video-container::after{content:'';position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:4px solid #f3f3f3;border-top:4px solid #0073aa;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.hep-nav-videos a:focus{outline:2px solid #0073aa;outline-offset:2px}.hep-nav-videos li.current a:focus{outline-color:#fff}@media print{.hep-course-navigation{display:none}.hep-video-container{display:none}.hep-video-info{border:1px solid #ddd;padding:20px}}