.test-video-page{min-height:100vh;background:#f5f5f5}.test-video-container{max-width:1400px;margin:0 auto;padding:20px}.test-video-header{background:#fff;padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.test-video-content{display:flex;gap:20px;align-items:flex-start}.test-video-sidebar{width:250px;flex-shrink:0;background:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 4px rgba(0,0,0,.1);max-height:calc(100vh - 200px);overflow-y:auto}.test-video-sidebar .nav-link{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;word-break:break-word;text-align:left}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #e0e0e0}.sidebar-header h5{margin:0;font-size:18px;font-weight:700;color:#333}.sidebar-close-btn{display:none;width:40px;height:40px;border-radius:50%;border:none;background:#f5f5f5;color:#666;font-size:20px;cursor:pointer;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;position:relative;z-index:1001;box-shadow:0 2px 4px rgba(0,0,0,.1)}.sidebar-close-btn:hover{background:#e0e0e0;color:#333;box-shadow:0 2px 6px rgba(0,0,0,.15)}.sidebar-close-btn:active{transform:scale(.95)}.hamburger-menu-btn{display:none;background:#f5f5f5;border:none;border-radius:50%;width:36px;height:36px;padding:0;cursor:pointer;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.hamburger-menu-btn:hover{background:#e0e0e0}.hamburger-menu-btn span{display:block;width:18px;height:2px;background:#666;margin:3px auto;transition:.3s}.hamburger-menu-btn.active span:first-child{transform:rotate(45deg) translate(4px,4px)}.hamburger-menu-btn.active span:nth-child(2){opacity:0}.hamburger-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999}.sidebar-overlay.active{display:block}.orientation-warning-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:10000;align-items:center;justify-content:center;flex-direction:column;color:#fff;text-align:center;padding:20px}.orientation-warning-overlay.active{display:flex}.orientation-warning-icon{font-size:80px;margin-bottom:30px;animation:rotate-device 2s ease-in-out infinite}@keyframes rotate-device{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}.orientation-warning-title{font-size:24px;font-weight:700;margin-bottom:15px}.orientation-warning-message{font-size:16px;line-height:1.6;max-width:300px}.test-video-main-wrapper{flex:1;display:flex;flex-direction:column}.test-video-main{flex:1;position:relative;background:#fff;border-radius:8px 8px 0 0;overflow:hidden;position:relative;height:calc(100vh - 300px);max-height:calc(100vh - 300px);line-height:0}#countdown.timer{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.5);z-index:1000;margin:0}#countdown.timer svg{width:200px;height:200px}#countdown.timer #myTimer{font-size:60px;fill:#fff;font-weight:700}.test-video-group{display:flex;gap:20px;width:100%;height:100%;max-height:100%;line-height:0;font-size:0;overflow:hidden}.test-video-tab-content{flex:1;background:#fff;display:block;width:100%;height:100%;max-height:100%;position:relative;line-height:0;font-size:0;overflow:hidden}.test-video-filming{display:none;flex:1;background:#000;max-width:50%}.test-video-group{display:flex;flex-direction:row}.test-video-page.two-partition-mode .test-video-tab-content{display:block!important;width:50%!important;flex:0 0 50%}.test-video-page.two-partition-mode .test-video-filming{display:block!important;width:50%!important;flex:0 0 50%;max-width:50%!important}.test-video-page.two-partition-mode .test-video-filming video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.test-video-main video{width:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;display:block;background:#000!important}.test-video-tab-content .tab-pane{height:100%!important;max-height:100%!important;width:100%;display:none;position:relative;margin:0!important;padding:0!important;background:#000;overflow:hidden;line-height:0;font-size:0}.test-video-tab-content .tab-pane.active,.test-video-tab-content .tab-pane.show{display:block!important}.test-video-tab-content .tab-pane video{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important;display:block!important;margin:0!important;padding:0!important;background:#000!important;border:none!important;outline:0!important;vertical-align:top!important;line-height:0}.test-teacher-video{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent!important;pointer-events:auto!important}.test-teacher-video::-webkit-media-controls{-webkit-user-select:none!important}.test-teacher-video::selection{background:0 0!important}.test-teacher-video::-moz-selection{background:0 0!important}.test-video-tab-content .tab-pane video-neutral-skin{display:block;width:100%;max-width:100%;height:100%;overflow:hidden;font-size:16px;line-height:normal;--media-border-radius:0;--media-object-fit:contain}#test-video-tabContent video-neutral-skin.is-fullscreen video{height:100%!important;max-height:none!important}.test-video-tab-content .tab-pane video::-webkit-media-controls{margin:0!important;padding:0!important}.test-video-page.zoom-teacher .test-video-sidebar{display:none}.test-video-page.zoom-teacher .test-video-group{flex-direction:column;height:calc(100vh - 300px)}.test-video-page.zoom-teacher .test-video-tab-content{flex:1;width:100%;position:relative}.test-video-page.zoom-teacher .test-video-tab-content video{width:100%;height:100%;object-fit:contain;background:#000}.test-video-page.zoom-teacher .test-video-filming{width:220px;height:124px;position:absolute;bottom:20px;right:20px;z-index:1000;border:2px solid #fff;border-radius:8px;max-width:none;display:block!important}.test-video-page.zoom-teacher .test-video-filming video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.test-video-page.zoom-self .test-video-sidebar{display:none}.test-video-page.zoom-self .test-video-filming{display:block!important;flex:1;width:100%;max-width:100%}.test-video-page.zoom-self .test-video-filming video{width:100%;height:calc(100vh - 300px);object-fit:contain;transform:scaleX(-1)}.test-video-page.zoom-self .test-video-tab-content{width:220px;height:124px;position:absolute;bottom:20px;right:20px;z-index:1000;border:2px solid #fff;border-radius:8px;flex:none;overflow:hidden}.test-video-page.zoom-self .test-video-tab-content video{width:100%;height:100%;object-fit:cover}.test-video-page.zoom-self .test-video-tab-content .tab-pane{height:100%!important;max-height:100%!important}.test-video-page.only-self-mode .test-video-sidebar{display:none}.test-video-page.only-self-mode .test-video-tab-content{display:none!important}.test-video-page.only-self-mode .test-video-filming{display:block!important;flex:1;width:100%;max-width:100%}.test-video-page.only-self-mode .test-video-filming video{width:100%;height:calc(100vh - 300px);object-fit:contain;transform:scaleX(-1)}.test-video-page.only-teacher-mode .test-video-sidebar{display:none}.test-video-page.only-teacher-mode .test-video-filming{display:none!important}.test-video-page.only-teacher-mode .test-video-tab-content{flex:1;width:100%!important}.test-video-page.only-teacher-mode .test-video-tab-content video{width:100%;height:calc(100vh - 300px);object-fit:contain}.test-video-footer{background:#fff;padding:15px 20px;border-radius:0 0 8px 8px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.test-video-footer .content-name{font-size:1.5rem;font-weight:700;color:#333;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eee}.instructor-name{font-size:20px;font-weight:700;color:#333;padding:10px 15px;background:#fff;border-radius:8px 8px 0 0;margin-bottom:0;box-shadow:0 -2px 4px rgba(0,0,0,.05)}.instructor-name .label{color:#666;font-weight:400;margin-right:10px}.instructor-header{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:8px 8px 0 0;padding-right:10px;position:relative}.instructor-header .instructor-name{box-shadow:none;border-radius:0;flex:1}.instructor-header .instructor-name-placeholder{flex:1;padding:10px 15px}.instructor-header .close-page-btn{position:relative;top:auto;right:auto;padding:6px 16px;border-radius:6px;border:1px solid #ccc;background:#f5f5f5;color:#666;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;pointer-events:auto;white-space:nowrap}.instructor-header .close-page-btn:hover{background:#e0e0e0;color:#333}.instructor-header+.test-video-main{border-radius:0}.instructor-name+.test-video-main{border-radius:0}.test-video-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.recording-options{display:none;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease}.recording-options.expanded{display:flex;opacity:1;max-height:200px;flex-wrap:wrap;gap:10px;align-items:center;margin-top:15px;padding-top:15px;border-top:1px solid #e0e0e0}.recording-options button{transition:transform .2s ease,box-shadow .2s ease}.recording-options button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.main-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mode-btn.selected{background-color:#007bff!important;color:#fff!important;border-color:#007bff!important;box-shadow:0 4px 8px rgba(0,123,255,.4)}.mode-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.nav-link.video-watched{position:relative}.nav-link.video-watched .key{color:#33a852;margin-right:5px}.mode-btn:disabled:hover{transform:none!important;box-shadow:none!important}@media screen and (min-width:769px) and (max-width:1024px){.test-video-page{min-height:auto;height:auto}.test-video-container{padding:15px}.test-video-content{align-items:stretch}.test-video-main-wrapper{min-height:0}.test-video-main{max-height:none!important;height:auto!important;min-height:300px}.test-video-footer{position:relative;z-index:10;flex-shrink:0}.test-video-sidebar{max-height:calc(100vh - 150px)}}@media screen and (min-width:1367px){.test-video-page{min-height:auto;height:auto}.test-video-content{align-items:stretch}.test-video-main-wrapper{min-height:0}.test-video-main{max-height:none!important;height:auto!important;min-height:500px}.test-video-main video,.test-video-tab-content .tab-pane video{width:100%!important;max-height:calc(100vh - 350px)!important;object-fit:contain!important;background:#000!important}.test-video-sidebar{max-height:calc(100vh - 180px)}}@media screen and (min-width:1025px) and (max-width:1366px){.test-video-page{min-height:auto;height:auto}.test-video-content{align-items:stretch}.test-video-main-wrapper{min-height:0}.test-video-main{max-height:none!important;height:auto!important;min-height:400px}.test-video-sidebar{max-height:calc(100vh - 180px)}}@media screen and (min-width:600px) and (max-width:768px){.test-video-page{min-height:auto;height:auto}.test-video-container{padding:15px}.test-video-content{align-items:stretch}.test-video-main-wrapper{min-height:0}.test-video-main{max-height:none!important;height:auto!important;min-height:250px}.test-video-footer{position:relative;z-index:10;flex-shrink:0}.test-video-group{max-height:none!important;height:auto!important}.test-video-tab-content{max-height:none!important;height:auto!important}.test-video-tab-content .tab-pane{max-height:none!important;height:auto!important}.test-video-sidebar{max-height:calc(100vh - 120px)}}@media screen and (max-width:599px){.header-middle-banner,.main-navbar{display:none!important}.test-video-container{padding:20px 20px 0 20px;margin-top:0}.test-video-content{margin-bottom:0}.instructor-name{font-size:16px;padding:8px 12px}.instructor-header{padding-left:8px;padding-right:8px;gap:8px}.instructor-header .close-page-btn{width:32px;height:32px;font-size:16px}.test-video-sidebar{position:fixed;top:0;left:-100%;width:280px;max-width:80%;height:100vh;max-height:100vh;z-index:1000;transition:left .3s ease;box-shadow:2px 0 8px rgba(0,0,0,.2)}.test-video-sidebar.active{left:0}.sidebar-close-btn{display:flex!important;width:44px!important;height:44px!important;font-size:22px!important;z-index:1002!important}.hamburger-menu-btn{display:flex;flex-direction:column;width:36px;height:36px}.test-video-main-wrapper{flex:1;display:flex;flex-direction:column}.test-video-main{height:auto!important;max-height:none!important;min-height:180px;background:#000;line-height:0;font-size:0;overflow:hidden;margin-bottom:0;padding-bottom:0;border-radius:8px 8px 0 0}.test-video-group{line-height:0;font-size:0;height:100%!important;max-height:180px!important;margin:0;padding:0;overflow:hidden}.test-video-tab-content{background:#000;height:100%!important;max-height:180px!important;line-height:0;font-size:0;margin:0;padding:0;position:relative;overflow:hidden}.test-video-tab-content .tab-pane{height:100%!important;max-height:180px!important;overflow:hidden!important;margin:0!important;padding:0!important;line-height:0;font-size:0;position:relative!important;background:#000}.test-video-tab-content .tab-pane.active{display:block!important;position:relative!important}.test-video-tab-content .tab-pane video{width:100%!important;max-width:100%!important;height:100%!important;max-height:180px!important;object-fit:contain!important;display:block!important;margin:0!important;padding:0!important;background:#000!important;border:none!important;outline:0!important;vertical-align:top!important;line-height:0}.test-video-footer{margin-top:0;padding-top:20px}.test-video-controls{flex-direction:column}.test-video-controls .btn{width:100%}.test-video-page.zoom-teacher .test-video-group{height:calc(100vh - 200px)}.test-video-page.zoom-teacher .test-video-filming{width:25%;max-width:160px;min-width:100px;aspect-ratio:16/9;bottom:10px;top:auto}.test-video-page.zoom-self .test-video-main{height:auto!important;max-height:none!important;min-height:0!important}.test-video-page.zoom-self .test-video-group{width:100%!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:0!important;margin:0!important;padding:0!important}.test-video-page.zoom-self .test-video-tab-content{width:25%;max-width:160px;min-width:100px;height:auto;aspect-ratio:16/9;bottom:10px;right:10px;top:auto}.test-video-page.zoom-self .test-video-filming{width:100%!important;flex:1 1 100%!important;max-width:100%!important;height:auto!important;position:relative!important;overflow:hidden!important;margin:0!important;padding:0!important}.test-video-page.zoom-self .test-video-filming video{width:100%!important;height:auto!important;max-height:70vh!important;object-fit:contain!important;object-position:center center!important;margin:0 auto!important;padding:0!important;display:block!important;background:#000;transform:scaleX(-1)}.test-video-page.two-partition-mode .test-video-main{height:auto!important;max-height:none!important;min-height:0!important}.test-video-page.two-partition-mode .test-video-group{flex-direction:row!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;gap:0!important;margin:0!important;padding:0!important}.test-video-page.two-partition-mode .test-video-tab-content{width:50%!important;flex:0 0 50%!important;max-width:50%!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;position:relative!important;overflow:hidden!important}.test-video-page.two-partition-mode .test-video-filming{width:50%!important;flex:0 0 50%!important;max-width:50%!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important;display:block!important;box-sizing:border-box!important;position:relative!important;overflow:hidden!important}.test-video-page.two-partition-mode .test-video-filming.ms-3{margin-left:0!important;margin-inline-start:0!important}.test-video-page.two-partition-mode .test-video-tab-content .tab-pane{height:100%!important;position:relative!important;overflow:hidden!important}.test-video-page.two-partition-mode .test-video-tab-content .tab-pane video{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;display:block!important;background:#000!important}.test-video-page.two-partition-mode .test-video-filming video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;margin:0!important;padding:0!important;display:block!important;transform:scaleX(-1)}.test-video-page.only-self-mode .test-video-main{height:auto!important;max-height:none!important;min-height:0!important}.test-video-page.only-self-mode .test-video-group{width:100%!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:0!important;margin:0!important;padding:0!important}.test-video-page.only-self-mode .test-video-filming{width:100%!important;flex:1 1 100%!important;max-width:100%!important;height:auto!important;position:relative!important;overflow:hidden!important;margin:0!important;padding:0!important}.test-video-page.only-self-mode .test-video-filming video{width:100%!important;height:auto!important;max-height:70vh!important;object-fit:contain!important;object-position:center center!important;margin:0 auto!important;padding:0!important;display:block!important;transform:scaleX(-1)}}.custom-expandable-panel{position:fixed;top:0;left:0;right:0;z-index:10000;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-100%);transition:transform .3s ease;max-height:80vh;overflow-y:auto}.custom-expandable-panel.active{transform:translateY(0)}.custom-expandable-panel-content{padding:20px 30px;text-align:center;max-width:800px;margin:0 auto}.custom-expandable-panel-header{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:15px;position:relative}.custom-expandable-panel-close{position:absolute;right:0;top:50%;transform:translateY(-50%);background:0 0;border:none;font-size:24px;color:#666;cursor:pointer;padding:5px 10px;line-height:1;transition:color .2s ease;z-index:10003;pointer-events:auto}.custom-expandable-panel-close:hover{color:#333}.custom-expandable-panel-icon{font-size:36px;flex-shrink:0}.custom-expandable-panel-icon.success{color:#28a745}.custom-expandable-panel-icon.error{color:#dc3545}.custom-expandable-panel-icon.warning{color:#ffc107}.custom-expandable-panel-icon.info{color:#17a2b8}.custom-expandable-panel-title{font-size:20px;font-weight:700;color:#333;margin:0}.custom-expandable-panel-message{font-size:16px;color:#666;margin-bottom:20px;line-height:1.6;text-align:left}.custom-expandable-panel-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.custom-expandable-panel-btn{padding:12px 30px;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:all .2s ease;min-width:120px}.custom-expandable-panel-btn.primary{background:#007bff;color:#fff}.custom-expandable-panel-btn.primary:hover{background:#0056b3}.custom-expandable-panel-btn.secondary{background:#6c757d;color:#fff}.custom-expandable-panel-btn.secondary:hover{background:#545b62}.custom-expandable-panel-btn.success{background:#28a745;color:#fff}.custom-expandable-panel-btn.success:hover{background:#1e7e34}.custom-expandable-panel-btn.danger{background:#d33;color:#fff}.custom-expandable-panel-btn.danger:hover{background:#c82333}.custom-expandable-panel-btn.orientation-stop{background:#9b2424;color:#fff}.custom-expandable-panel-btn.orientation-stop:hover{background:#7a1c1c}body.has-expandable-panel{padding-top:0}@media (max-width:768px){.custom-expandable-panel-content{padding:15px 20px}.custom-expandable-panel-icon{font-size:28px}.custom-expandable-panel-title{font-size:18px}.custom-expandable-panel-message{font-size:14px}.custom-expandable-panel-btn{padding:10px 20px;font-size:14px;min-width:100px}.custom-expandable-panel-close{font-size:20px;padding:5px}}.loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:10001;justify-content:center;align-items:center;flex-direction:column}.loading-overlay.active{display:flex}.loading-spinner{width:60px;height:60px;border:5px solid rgba(255,255,255,.3);border-top:5px solid #fff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading-text{color:#fff;font-size:18px;margin-bottom:15px}.loading-progress-container{width:300px;max-width:80%;background:rgba(255,255,255,.2);border-radius:10px;overflow:hidden;margin-bottom:10px}.loading-progress-bar{height:10px;background:linear-gradient(90deg,#28a745,#20c997);width:0%;transition:width .3s ease;border-radius:10px}.loading-progress-text{color:#fff;font-size:14px}#chatBubble{z-index:10002!important;position:fixed!important}