@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Manrope:wght@600;700;800&display=swap";:root{--navy:#10233f;--coral:#ff5d42;--sky:#e4f4f7;--sand:#f6ead8;--muted:#607087;--line:#c9d1dc;--white:#fff;--yellow:#ffb000;color:var(--navy);font-synthesis:none;background:#fff;font-family:IBM Plex Sans Thai,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#fff;min-width:320px;margin:0}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #ff5d4260}img{max-width:100%;display:block}.page-shell{width:min(1380px,100% - 80px);margin-inline:auto}.topbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:50;background:#fffc;border-bottom:1px solid #dce1e7;align-items:center;height:76px;padding:0 40px;display:flex;position:sticky;top:0}.logo{background:0 0;border:0;align-items:baseline;gap:8px;padding:0;font-family:Manrope,sans-serif;display:flex}.logo strong{letter-spacing:3px;font-size:28px}.logo span{color:var(--coral);font-size:19px}.nav{align-items:center;gap:28px;margin-left:auto;display:flex}.nav button{background:0 0;border:0;border-bottom:3px solid #0000;align-items:center;gap:8px;padding:24px 2px 20px;font-weight:600;display:flex}.nav button:hover,.nav button.active{color:var(--coral);border-color:var(--coral)}.account{border-left:1px solid var(--line);align-items:center;gap:10px;margin-left:32px;padding-left:24px;display:flex}.avatar{background:var(--sky);border:0;border-radius:50%;width:38px;height:38px;font-weight:700}.icon-button{background:0 0;border:0;padding:6px}.outline-button{border:1px solid var(--navy);background:#fff;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-weight:600;display:flex}.auth-button{margin-left:28px}.menu-button{background:0 0;border:0;margin-left:auto;display:none}.hero{grid-template-columns:.82fr 1.18fr;align-items:stretch;gap:48px;padding-top:38px;padding-bottom:26px;display:grid}.hero-copy{padding:48px 10px 40px 26px;position:relative}.hero-copy:after{content:"";opacity:.75;z-index:-1;background:linear-gradient(8deg,#0000 30%,#f6ead8 31% 57%,#0000 58%);width:380px;height:100px;position:absolute;bottom:-10px;left:-70px}.hero h1{letter-spacing:-3px;margin:0 0 25px;font-size:clamp(48px,5.2vw,78px);font-weight:700;line-height:1.02}.hero-copy p{color:#4d5d72;margin:0 0 32px;font-size:19px;line-height:1.55}.coral-button,.navy-button,.light-button{border:0;border-radius:8px;justify-content:center;align-items:center;gap:10px;padding:14px 22px;font-weight:700;display:inline-flex}.coral-button{background:var(--coral);color:#fff;box-shadow:4px 4px #10233f}.coral-button:hover{transform:translate(-1px,-1px);box-shadow:6px 6px #10233f}.navy-button{background:var(--navy);color:#fff}.light-button{color:var(--navy);background:#fff}.feature{text-align:left;color:#fff;background:var(--navy);border:0;border-radius:14px;min-height:410px;padding:0;position:relative;overflow:hidden;box-shadow:5px 6px #dbe8ea}.feature img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.feature:after{content:"";background:linear-gradient(90deg,#07182ff2 0%,#07182fbd 42%,#0000 70%);position:absolute;inset:0}.feature-copy{z-index:1;width:60%;padding:48px 40px;position:relative}.feature-copy>span{color:var(--coral);font-weight:700}.feature h2{margin:16px 0 24px;font-size:38px;line-height:1.18}.feature-copy p{color:#fff;margin:0 0 26px}.play-row{border-top:1px solid #ffffff4d;align-items:center;gap:12px;padding-top:20px;font-weight:600;display:flex}.play-row i{background:var(--coral);border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.section-heading{justify-content:space-between;align-items:end;margin:0 0 16px;display:flex}.section-heading h2{margin:0;font-size:24px}.section-heading p{color:var(--muted);margin:3px 0 0}.section-heading button{background:0 0;border:0;align-items:center;gap:6px;display:flex}.section-heading>span{color:#92a1b2;font-family:Manrope,sans-serif}.continue-section{padding:22px 0 8px}.continue-row{border:1px solid var(--navy);border-radius:9px;grid-template-columns:190px 1.4fr 1fr auto;align-items:center;gap:24px;padding:8px;display:grid}.continue-row img{object-fit:cover;border-radius:6px;width:190px;height:94px}.continue-copy{flex-direction:column;gap:4px;display:flex}.continue-copy span,.progress-wrap span{color:var(--muted);font-size:14px}.progress{background:#e4e8ed;border-radius:20px;height:6px;overflow:hidden}.progress i{background:var(--coral);border-radius:inherit;height:100%;display:block}.progress-wrap .progress{margin-top:9px}.course-section{padding:38px 0 70px}.course-list{border-top:1px solid var(--navy)}.course-card{border-bottom:1px solid var(--navy);grid-template-columns:42% 1fr;gap:30px;padding:26px 0;display:grid}.course-image{background:var(--sky);border:0;border-radius:12px;height:260px;padding:0;position:relative;overflow:hidden}.course-image img{object-fit:cover;width:100%;height:100%;transition:all .35s}.course-image:hover img{transform:scale(1.025)}.course-image>span{color:#ffffffd6;text-shadow:0 1px 9px #10233f45;font:800 54px Manrope;position:absolute;top:10px;left:20px}.course-info{grid-template-rows:1fr auto;grid-template-columns:1fr auto;gap:12px;display:grid}.course-info h3{max-width:650px;margin:6px 0 5px;font-size:30px;line-height:1.18}.course-info p{color:#425268;margin:0 0 12px;font-size:17px}.course-info small{color:var(--muted)}.course-meta{flex-direction:column;grid-area:1/2;justify-content:space-between;align-items:flex-end;display:flex}.course-meta span{align-items:center;gap:5px;display:flex}.course-meta em{color:var(--muted);font-style:normal}.course-meta strong{color:var(--coral);font:700 25px Manrope}.course-action{text-align:left;background:0 0;border:0;border-top:1px solid #dce1e7;grid-column:1/-1;justify-content:space-between;align-items:center;padding:14px 0 0;font-weight:700;display:flex}.closing-band{background:var(--navy);color:#fff;justify-content:space-between;align-items:center;padding:42px max(40px,50vw - 650px);display:flex}.closing-band h2{margin:0 0 4px;font-size:30px}.closing-band p{color:#cbd4df;margin:0}.back-button{background:0 0;border:0;align-items:center;gap:8px;margin:28px 0;display:flex}.detail-hero{border-bottom:1px solid var(--navy);grid-template-columns:1.2fr .8fr;gap:46px;padding-bottom:52px;display:grid}.detail-media{border-radius:14px;height:480px;position:relative;overflow:hidden}.detail-media img{object-fit:cover;width:100%;height:100%}.detail-media button{background:var(--coral);color:#fff;border:0;border-radius:50%;place-items:center;width:70px;height:70px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.detail-copy{align-self:center}.detail-copy>span{color:var(--coral);font:800 17px Manrope}.detail-copy h1{margin:15px 0;font-size:46px;line-height:1.13}.detail-copy>p{color:#526176;font-size:18px;line-height:1.55}.rating{align-items:center;gap:7px;margin:26px 0 6px;display:flex}.detail-copy small{color:var(--muted)}.buy-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;margin-top:38px;padding-top:24px;display:flex}.buy-row>strong{color:var(--coral);font:800 34px Manrope}.syllabus{max-width:880px;margin:52px auto 80px}.syllabus h2{font-size:31px}.syllabus-row{border-bottom:1px solid var(--line);grid-template-columns:62px 1fr auto;align-items:center;padding:18px 0;display:grid}.syllabus-row>span{color:var(--coral);font:800 22px Manrope}.syllabus-row small{align-items:center;gap:5px;display:flex}.page-title{border-bottom:1px solid var(--navy);padding:44px 0 25px}.page-title h1{margin:0;font-size:48px}.page-title p{color:var(--muted);margin:5px 0 0;font-size:18px}.library{min-height:calc(100vh - 76px)}.owned-list{padding:26px 0 70px}.owned-list article{border-bottom:1px solid var(--navy);grid-template-columns:340px 1fr;gap:28px;padding:22px 0;display:grid}.owned-list img{object-fit:cover;border-radius:10px;width:100%;height:190px}.owned-list article>div{flex-direction:column;align-items:flex-start;display:flex}.owned-list span{color:var(--coral);font-weight:600}.owned-list h2{margin:8px 0 22px}.owned-list .progress{width:100%;margin-bottom:22px}.empty{text-align:center;padding:110px 0}.empty svg{color:var(--coral)}.empty h2{margin:15px 0 4px;font-size:30px}.empty p{color:var(--muted);margin:0 0 28px}.player-page{color:#fff;background:#071526;min-height:100vh}.player-top{border-bottom:1px solid #ffffff24;grid-template-columns:1fr 2fr 1fr;align-items:center;height:70px;padding:0 26px;display:grid}.player-top button{color:#fff;background:0 0;border:0;align-items:center;gap:8px;display:flex}.player-top strong{text-align:center}.player-top>span{text-align:right;color:#aab6c6}.player-layout{grid-template-columns:1fr 350px;min-height:calc(100vh - 70px);display:grid}.video-stage{flex-direction:column;justify-content:center;padding:36px;display:flex}.video-stage video{background:#000;border-radius:12px;width:100%;max-height:65vh}.lesson-caption{grid-template-columns:auto 1fr auto;align-items:center;gap:22px;margin-top:22px;display:grid}.lesson-caption>span{color:var(--coral);font:800 40px Manrope}.lesson-caption h1{margin:0 0 3px;font-size:28px}.lesson-caption p{color:#aab6c6;margin:0}.round-play{background:var(--coral);color:#fff;border:0;border-radius:50%;place-items:center;width:50px;height:50px;display:grid}.lesson-panel{color:var(--navy);background:#fff;padding:26px 0}.lesson-panel>h2,.panel-progress{padding-inline:24px}.lesson-panel>h2{margin:0 0 22px}.panel-progress{margin-bottom:22px}.panel-progress span{font-size:14px}.panel-progress .progress{margin-top:8px}.lesson-panel>button{text-align:left;background:#fff;border:0;border-top:1px solid #e0e4e9;gap:12px;width:100%;padding:16px 22px;display:flex}.lesson-panel>button.selected{background:var(--sky);border-left:4px solid var(--coral);padding-left:18px}.lesson-panel>button>i{background:#edf0f3;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-style:normal;display:grid}.lesson-panel>button.selected>i{background:var(--coral);color:#fff}.lesson-panel>button>span{flex-direction:column;gap:3px;display:flex}.lesson-panel small{color:var(--muted)}.studio-grid{grid-template-columns:minmax(0,1fr) 390px;display:grid}.studio-main{border-right:1px solid var(--line);padding:30px 30px 70px 0}.number-title{align-items:baseline;gap:16px;margin-bottom:18px;display:flex}.number-title b{color:var(--coral);font:800 31px Manrope}.number-title h2{margin:0;font-size:24px}.number-title span{color:var(--muted)}.dropzone{border:2px dashed var(--navy);background:#f9fdff;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:380px;padding:30px;display:flex}.dropzone h3{margin:14px 0 2px;font-size:23px}.dropzone>p{color:var(--muted);margin:0 0 20px}.upload-status{grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;width:min(620px,100%);margin:8px 0 23px;display:grid}.upload-status>div{grid-template-columns:1fr auto;gap:2px 10px;display:grid}.upload-status>div .progress{grid-column:1/-1;margin-top:7px}.upload-status span{color:var(--muted);font-size:14px}.upload-status>b{color:var(--coral)}.upload-status button{background:0 0;border:0}.lesson-head{border-bottom:1px solid var(--line);margin-top:38px;padding-bottom:16px}.lesson-head button{background:0 0;border:0;margin-left:auto;font-weight:700}.upload-lesson{border:1px solid var(--navy);border-radius:10px;grid-template-columns:auto 180px 1fr auto;align-items:center;gap:18px;padding:14px;display:grid}.lesson-thumb{border-radius:8px;height:100px;position:relative;overflow:hidden}.lesson-thumb img,.lesson-thumb video{object-fit:cover;width:100%;height:100%}.lesson-thumb span{color:#fff;background:#071526;padding:2px 6px;font-size:12px;position:absolute;bottom:4px;right:4px}.upload-lesson>div:nth-of-type(2){flex-direction:column;gap:9px;display:flex}.upload-lesson>div:nth-of-type(2) span{color:var(--muted);align-items:center;gap:5px;display:flex}.upload-lesson>button{background:0 0;border:0}.mini-empty{border:1px dashed var(--line);text-align:center;color:var(--muted);padding:30px}.course-form{padding:30px 0 70px 30px}.course-form h2{margin:0 0 25px;font-size:26px}.course-form label,.auth-modal label,.checkout label{margin-bottom:20px;font-weight:600;display:block;position:relative}.course-form input,.course-form textarea,.course-form select,.auth-modal input,.checkout input{border:1px solid var(--navy);background:#fff;border-radius:8px;width:100%;margin-top:8px;padding:13px 14px}.course-form textarea{resize:vertical;height:130px}.course-form small{color:var(--muted);font-weight:400;position:absolute;bottom:9px;right:10px}.course-form label>svg{pointer-events:none;position:absolute;bottom:14px;right:12px}.course-form select{appearance:none}.publish{width:100%;margin-top:12px;padding:16px}.publish:disabled{opacity:.4;cursor:not-allowed}.modal-backdrop{z-index:100;background:#071526bf;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:14px;width:min(470px,100%);padding:34px;position:relative;box-shadow:9px 10px #ff5d42}.modal-x{background:0 0;border:0;position:absolute;top:16px;right:16px}.modal-mark{background:var(--navy);color:#fff;place-items:center;width:48px;height:48px;font:800 25px Manrope;display:grid}.modal h2{margin:18px 0 3px;font-size:31px}.modal>p{color:var(--muted);margin:0 0 25px}.auth-modal form .coral-button{width:100%;margin-top:4px}.switch-mode{width:100%;color:var(--coral);background:0 0;border:0;margin-top:24px;font-weight:600}.checkout{width:min(580px,100%)}.step-label{color:var(--coral);font-weight:700}.checkout h2{margin-top:5px}.checkout-course{border-bottom:1px solid var(--line);grid-template-columns:100px 1fr auto;align-items:center;gap:14px;padding:12px 0 20px;display:grid}.checkout-course img{object-fit:cover;border-radius:6px;width:100px;height:66px}.checkout-course>div{flex-direction:column;display:flex}.checkout-course span{color:var(--muted);font-size:13px}.checkout-course>b{font:700 19px Manrope}.methods{gap:8px;margin:20px 0;display:flex}.methods button{border:1px solid var(--line);background:#fff;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px;display:flex}.methods button.selected{border-color:var(--coral);background:#fff5f2}.field-row{grid-template-columns:1fr 1fr;gap:14px;display:grid}.total{border-top:1px solid var(--line);justify-content:space-between;padding-top:18px;display:flex}.total strong{color:var(--coral);font:800 25px Manrope}.pay-button{width:100%;margin-top:18px}.secure{text-align:center;color:var(--muted);margin-top:13px;display:block}.qr-mock{text-align:center;border:1px dashed var(--line);padding:16px}.qr-mock i{background:repeating-conic-gradient(#10233f 0 25%,#fff 0 50%) 50%/14px 14px;width:70px;height:70px;margin:auto;display:block}.success{text-align:center}.success-check{color:#16844e;background:#dff5e9;border-radius:50%;place-items:center;width:68px;height:68px;margin:0 auto;display:grid}.success .coral-button{margin:auto}.toast{background:var(--navy);color:#fff;border-left:5px solid var(--coral);z-index:150;align-items:center;gap:9px;padding:14px 19px;display:flex;position:fixed;bottom:25px;right:25px;box-shadow:4px 4px #ff5d42}@media (width<=1000px){.page-shell{width:min(100% - 36px,900px)}.topbar{padding:0 18px}.menu-button{display:block}.nav{border:1px solid var(--navy);box-shadow:5px 5px 0 var(--coral);background:#fff;padding:10px;display:none;position:absolute;top:68px;left:18px;right:18px}.nav.open{display:block}.nav button{border-bottom:1px solid #e5e8ec;width:100%;padding:12px}.account span{display:none}.auth-button{padding:9px;font-size:0}.auth-button svg{font-size:initial}.hero{grid-template-columns:1fr;padding-top:20px}.hero-copy{padding:24px 0}.feature{min-height:380px}.continue-row{grid-template-columns:140px 1fr auto}.continue-row img{width:140px}.progress-wrap{display:none}.course-card{grid-template-columns:1fr 1fr}.detail-hero{grid-template-columns:1fr}.detail-media{height:420px}.studio-grid{grid-template-columns:1fr}.studio-main{border:0;padding-right:0}.course-form{border-top:1px solid var(--navy);padding-left:0}.player-layout{grid-template-columns:1fr}.lesson-panel{min-height:500px}.player-top{grid-template-columns:1fr auto}.player-top strong{display:none}}@media (width<=650px){.page-shell{width:calc(100% - 28px)}.topbar{height:66px}.logo strong{font-size:22px}.logo span{font-size:14px}.account{margin-left:9px;padding-left:8px}.hero{gap:8px}.hero h1{letter-spacing:-2px;font-size:45px}.hero-copy p br{display:none}.feature{min-height:360px}.feature-copy{width:78%;padding:30px 23px}.feature h2{font-size:29px}.continue-row{grid-template-columns:90px 1fr;gap:10px;padding:7px}.continue-row img{width:90px;height:70px}.continue-row .navy-button{display:none}.course-card{grid-template-columns:1fr;gap:15px}.course-image{height:210px}.course-info{display:grid}.course-info h3{font-size:24px}.course-meta{flex-direction:row;grid-area:auto;align-items:center}.closing-band{padding:30px 22px;display:block}.closing-band .light-button{margin-top:18px}.detail-media{height:260px}.detail-copy h1{font-size:35px}.buy-row{align-items:flex-end}.syllabus-row{grid-template-columns:45px 1fr}.syllabus-row small{grid-column:2}.page-title h1{font-size:38px}.owned-list article{grid-template-columns:1fr}.player-top{padding:0 13px}.player-top>span{font-size:13px}.video-stage{padding:14px}.lesson-caption{grid-template-columns:auto 1fr}.lesson-caption>span{font-size:28px}.lesson-caption h1{font-size:21px}.lesson-caption .round-play{display:none}.number-title{flex-wrap:wrap;gap:8px 12px}.number-title span{width:100%;padding-left:50px}.dropzone{text-align:center;min-height:400px;padding:18px}.upload-status{grid-template-columns:auto 1fr auto}.upload-status>b{grid-column:2}.upload-status>button{grid-area:1/3}.upload-lesson{grid-template-columns:auto 100px 1fr;gap:9px}.upload-lesson>button{grid-column:3}.course-form{padding-bottom:40px}.modal{padding:28px 20px}.checkout-course{grid-template-columns:76px 1fr}.checkout-course img{width:76px}.checkout-course>b{grid-column:2}.methods{flex-direction:column}.field-row{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}