.form{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.form input{width:100%;max-width:400px;padding:1rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:4px;font-size:1rem}.loader{color:#fff;font-size:10px;width:1em;height:1em;border-radius:50%;position:relative;text-indent:-9999em;animation:mulShdSpin 1.3s linear infinite;transform:translateZ(0)}@keyframes mulShdSpin{0%,to{box-shadow:0 -3em 0 .2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 .2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em 0 0,3em 0 0 .2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 .2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 .2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 .2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 .2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 .2em}}body{margin:0;background-color:#000;font-family:Noto Sans Thai,sans-serif}#__next{height:100vh;width:100vw}.video-with-overlay-container{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;margin:0 auto}.video-with-overlay-container .loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.video-with-overlay-container video{width:100%}.video-with-overlay-container .video-wrapper{width:100%;max-width:177.7777777778vh;position:relative}.video-with-overlay-container .video-wrapper .overlay-container{display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:0;width:100%;height:10%;color:#fff;font-size:2rem}.video-with-overlay-container .video-wrapper .overlay-container .header-bg{position:absolute;left:0;top:0;width:100%}.video-with-overlay-container .video-wrapper .overlay-container .title{position:absolute;font-size:min(2vw,4vh);font-weight:700;transform:translateX(-5%);width:50%}.video-with-overlay-container .video-wrapper .overlay-container .title p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-with-overlay-container .video-wrapper .overlay-container .problem-and-page-no-section{display:flex;position:absolute;right:12px;font-size:min(1.5vw,3vh)}.video-with-overlay-container .video-wrapper .overlay-container .problem-and-page-no-section .page-no,.video-with-overlay-container .video-wrapper .overlay-container .problem-and-page-no-section .problem-no{color:#3b3b3b;font-weight:700}.video-with-overlay-container .video-wrapper .overlay-container .problem-and-page-no-section .page-no:after{content:"";border:1px solid #d8d8d8;height:40px;margin:0 min(1.5vw,3vh)}.video-with-overlay-container .video-wrapper .transition-overlay-container{display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);color:#fff;font-size:2rem}.video-with-overlay-container .video-wrapper .transition-overlay-container .title{font-size:80%;position:absolute;left:50%;top:10%;transform:translateX(-50%)}.video-with-overlay-container .video-wrapper .popup-overlay-container{display:flex;justify-content:center;align-items:center;position:absolute;left:10%;bottom:20%;width:30%;height:20%;padding:1rem;background-color:rgba(0,0,0,.8);color:#fff;font-size:2rem;flex-direction:column}.video-with-overlay-container .video-wrapper .popup-overlay-container .title{font-size:min(1.5vw,2.5vh)}.video-with-overlay-container .video-wrapper .popup-overlay-container .text{font-size:min(1vw,1.5vh)}.video-with-overlay-container .video-controller{position:fixed;bottom:0;left:0;width:100%;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(0deg,#000,transparent);transition:0s ease-in-out,.5s ease-in-out;padding:24px 0 8px}.video-with-overlay-container .video-controller.hide{transform:translateY(calc(100% + 0px))}.video-with-overlay-container .video-controller .chapter-container{display:flex;overflow:auto;padding:0 16px 12px}.video-with-overlay-container .video-controller .chapter-container .chapter-list{display:flex;align-items:baseline;gap:20px;margin:auto;position:relative}.video-with-overlay-container .video-controller .chapter-container .chapter-list:after{content:"";position:absolute;height:3px;background:#3b3b3b;width:100%;top:calc(50% - 1px);z-index:-1}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip{display:flex;padding:8px 16px;font-size:.875rem;color:#d8d8d8;background:#3b3b3b;cursor:pointer;white-space:nowrap;border-radius:50px;transition:background .25s ease}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip:hover{background:#4f4f4f}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip.active{font-weight:700;background:#0074ff;color:#fff}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip.active.prioritized{background:#f76262}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip.disable{color:#666;pointer-events:none}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip .prioritized-chapter-info{display:inline-flex;margin-right:.5rem;align-items:center}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip .prioritized-chapter-info .chapter-time{transition:.2s ease;margin-left:4px;max-width:40px;opacity:1}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip .prioritized-chapter-info .chapter-time.hide{margin-left:0;width:0;opacity:0;overflow:hidden}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip .default-chapter-info{display:inline-flex;align-items:center;transition:.2s ease;margin-right:.5rem;max-width:40px}.video-with-overlay-container .video-controller .chapter-container .chapter-list .chapter-chip .default-chapter-info.hide{margin-right:0;width:0;overflow:hidden;opacity:0}.video-with-overlay-container .video-controller .progress-container{width:100%;display:flex}.video-with-overlay-container .video-controller .progress-container .progress-bar-container{width:100%;display:flex;align-items:center;cursor:pointer}.video-with-overlay-container .video-controller .progress-container .progress-bar{position:relative;border-radius:4px;background-color:#fff;flex:1 1;height:8px;display:flex}.video-with-overlay-container .video-controller .progress-container .progress-bar .left{position:relative;border-radius:4px;background-color:#0074ff;pointer-events:none}.video-with-overlay-container .video-controller .progress-container .progress-bar .left .cursor{position:absolute;right:0;width:10px;height:10px;transform:translate3d(-50%,-50%);background-color:#fff}.video-with-overlay-container .video-controller .progress-container .progress-bar .right{border-radius:4px;pointer-events:none}.video-with-overlay-container .video-controller .progress-container .progress-bar .hover-preview{position:absolute;width:8px;height:100%;background-color:#ccc;pointer-events:none;transform:translateX(-50%)}.video-with-overlay-container .video-controller .progress-container .progress-bar .hover-preview .preview-timestamp{position:absolute;background-color:#000;color:#fff;transform:translate(-50%,-200%);padding:4px 8px;border-radius:2px}.video-with-overlay-container .video-controller .progress-container .timestamp{color:#fff;width:96px;text-align:center}.video-with-overlay-container .video-controller .control-container{display:flex;justify-content:center}.video-with-overlay-container .video-controller .control-container .play-pause-seek{padding:12px 0;display:flex;gap:48px;position:absolute}@media screen and (max-width:480px){.video-with-overlay-container .video-controller .control-container .play-pause-seek{gap:24px}}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume{padding:12px 32px;display:flex;gap:16px;flex:0 1 auto;margin-left:auto}@media screen and (max-width:480px){.video-with-overlay-container .video-controller .control-container .resolution-speed-volume{padding:12px 24px}}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector{position:relative;display:flex;justify-content:center}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-text{height:32px;line-height:32px;width:48px;text-align:center;color:#fff;cursor:pointer}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-text:hover~.speed-selector-menu{display:block}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-menu{display:none;position:absolute;padding:0;margin:0;border-top-color:rgba(43,51,63,.7);background-color:rgba(74,73,74,.8);border-radius:10px;bottom:32px;z-index:1;list-style:none}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-menu li{cursor:pointer;color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:center}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-menu li:hover{background-color:rgba(115,133,159,.5)}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-menu li:first-child{border-top-left-radius:10px;border-top-right-radius:10px}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-menu li:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .speed-selector .speed-selector-menu:hover{display:block}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .volume-selector{display:flex;position:relative;padding:4px 8px;cursor:pointer}@media screen and (max-width:1200px){.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .volume-selector{display:none}}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .volume-selector:hover .volume-slider-container{display:flex}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .volume-selector .volume-slider-container{display:none;position:absolute;bottom:28px;padding:2px 4px;border-radius:4px;background-color:rgba(0,0,0,.5);transform-origin:0 100%;transform:rotate(270deg) translateY(100%)}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .volume-selector .volume-slider-container:hover{display:flex}.video-with-overlay-container .video-controller .control-container .resolution-speed-volume .volume-selector .volume-slider{height:16px;width:120px}.video-with-overlay-container .video-controller .control-container .control{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:32px;height:32px}