:root{--ink:#25233c;--muted:#7c7a8f;--purple:#7057ed;--line:#ebe9f2;--paper:#fbfaff;--font:'IBM Plex Sans Thai',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px var(--font)}a{color:inherit;text-decoration:none}header{height:72px;padding:0 max(calc((100% - 1160px)/2),6%);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fbfaffee;backdrop-filter:blur(10px);z-index:3;border-bottom:1px solid var(--line)}.brand{font-weight:700;display:flex;align-items:center;gap:7px}.brand b{background:var(--purple);color:#fff;border-radius:10px 10px 10px 3px;padding:6px 11px}.brand span{color:#878499;font-weight:400}.nav{display:flex;align-items:center;gap:25px;color:#77768a;font-size:13px}.nav form{margin:0}.nav button{border:0;background:none;color:inherit;font:inherit}.menu-toggle{display:none}.hero{max-width:1160px;min-height:500px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:55px 0}.eyebrow{color:var(--purple);font-size:11px;font-weight:700;letter-spacing:.12em}.hero h1,.page-heading h1{font-size:clamp(44px,5vw,64px);line-height:1.25;margin:19px 0 14px;letter-spacing:-2px}.hero h1 em,.page-heading em{font-style:normal;color:var(--purple)}.hero p{max-width:480px;color:var(--muted);line-height:1.9}.button{display:inline-flex;justify-content:center;background:var(--purple);color:white;border:0;border-radius:8px;padding:11px 18px;font:600 13px var(--font);cursor:pointer}.button:hover{background:#5741db}.muted{color:var(--muted)}.art{height:370px;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse,#eeeaff,transparent 70%)}.art-card{width:225px;height:275px;background:linear-gradient(145deg,#7159e8,#a28df5);border-radius:18px;box-shadow:0 25px 55px #6454c34d;transform:rotate(6deg);padding:30px;color:white;display:flex;flex-direction:column;justify-content:end;font-size:75px;position:relative;overflow:hidden}.art-card strong{font-size:30px;line-height:1.3}.art-card small{font:700 8px Arial;letter-spacing:2px;margin-top:13px}.tag{position:absolute;right:5%;top:45px;background:white;padding:12px;border-radius:9px;box-shadow:0 9px 25px #221c381a;color:var(--purple);font-size:12px}.stats{max-width:1160px;margin:auto;padding:23px 0;border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}.stats div{display:grid;justify-items:center;border-right:1px solid var(--line);font-size:11px;color:var(--muted)}.stats div:last-child{border:0}.stats b{font:bold 24px Arial;color:var(--ink)}.section{max-width:1160px;margin:0 auto;padding:70px 0 15px}.section h2{font-size:26px}.features,.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.features article,.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px}.features i{font-style:normal;background:#efedff;color:var(--purple);width:38px;height:38px;display:grid;place-items:center;border-radius:11px;font-size:20px}.features h3,.course h3{font-size:15px}.features p,.course p{color:var(--muted);font-size:12px;line-height:1.8}.course{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.cover{height:165px;display:grid;place-items:center;color:#ffffffa8;font-size:75px;background:linear-gradient(135deg,#7561eb,#a692fa);position:relative}.cover span{position:absolute;top:12px;left:14px;background:#fff;color:#555;padding:4px 9px;border-radius:18px;font-size:10px}.cover.coral,.detail-art.coral{background:linear-gradient(135deg,#ed9275,#ffc299)}.cover.blue,.detail-art.blue{background:linear-gradient(135deg,#51a7d8,#8dd5e6)}.cover.lime,.detail-art.lime{background:linear-gradient(135deg,#75ba92,#b7d989)}.cover.pink,.detail-art.pink{background:linear-gradient(135deg,#d979b1,#f4a1c4)}.cover.orange,.detail-art.orange{background:linear-gradient(135deg,#ecaa50,#f5d17f)}.course-body{padding:15px}.course-body small{color:#89879a;font-size:10px}.course h3{margin:8px 0}.teacher{border-top:1px solid var(--line);padding-top:10px;font-size:11px;color:#68677a}.empty{text-align:center;grid-column:1/-1;background:white;border:1px dashed var(--line);padding:35px;border-radius:12px}.banner{max-width:1160px;margin:70px auto;padding:35px 42px;background:linear-gradient(110deg,#6350df,#856fec);border-radius:14px;color:white;display:flex;align-items:center;justify-content:space-between}.banner .eyebrow{color:#dfd9ff}.banner p{font-size:12px}.white{background:white;color:#5742d3}footer{border-top:1px solid var(--line);padding:24px 6%;color:#89879a;font-size:11px}.page-heading{text-align:center;padding:52px 15px 25px}.page-heading h1{font-size:43px}.search{display:flex;gap:10px;margin-bottom:20px}.search input{flex:1;border:1px solid var(--line);border-radius:8px;padding:11px;font:14px var(--font)}.auth{width:min(440px,92%);margin:65px auto;padding:32px}.auth h1{font-size:28px}.panel form{display:grid;gap:13px}.panel label,.form-grid label{font-size:12px;color:#5e5b72;display:grid;gap:6px}.panel input,.form-grid input,.form-grid textarea,.form-grid select{font:14px var(--font);border:1px solid var(--line);border-radius:7px;padding:10px;min-width:0}.alert,.success{padding:10px;border-radius:7px;font-size:12px}.alert{background:#fff0ed;color:#a4473d}.success{background:#e9f9f3;color:#22856b}.dashboard,.detail{max-width:1080px;margin:auto;padding:45px 0 75px}.dashboard h1{font-size:27px}.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:20px 0}.panel h2{font-size:18px}.row{border-top:1px solid var(--line);padding:11px 0;display:flex;align-items:center;gap:10px}.row>div{flex:1}.row small,.row span{display:block;color:var(--muted);font-size:10px}.row form{margin:0}.outline{background:white;border:1px solid var(--line);color:#646176}.danger{background:#fff1ef;color:#b9574b}.manager{margin-top:18px}.section-title{display:flex;align-items:center;justify-content:space-between}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .wide{grid-column:1/-1}.check{display:flex!important;align-items:center}.detail-grid{display:grid;grid-template-columns:1fr .8fr;gap:55px;align-items:center;margin-top:35px}.detail h1{font-size:39px}.detail-art{height:300px;border-radius:15px;background:linear-gradient(135deg,#7561eb,#a692fa);display:grid;place-items:center;color:#fff9;font-size:140px}.description{border-top:1px solid var(--line);padding-top:20px;line-height:2;white-space:pre-wrap}
@media(max-width:1200px){.hero,.stats,.section,.banner,.dashboard,.detail{margin-left:6%;margin-right:6%}}@media(max-width:760px){header{height:64px;padding:0 5%}.menu-toggle{display:block;border:0;background:none;font-size:21px}.nav{display:none;position:absolute;top:63px;left:0;right:0;background:white;padding:18px 5%;flex-direction:column;align-items:start}.nav.open{display:flex}.hero{grid-template-columns:1fr;padding:40px 0}.art{height:290px}.stats{grid-template-columns:1fr 1fr;row-gap:15px}.stats div:nth-child(2){border:0}.section{padding-top:48px}.features{grid-template-columns:1fr}.courses{grid-template-columns:1fr 1fr}.dash-grid{grid-template-columns:1fr}.detail-grid{gap:22px}}@media(max-width:540px){.hero h1{font-size:43px}.courses{grid-template-columns:1fr}.banner{margin:45px 5%;padding:25px;display:block}.banner .button{margin-top:10px}.section{margin-left:5%;margin-right:5%}.form-grid,.detail-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.detail-art{grid-row:1;height:200px}}

.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:25px}.upload-box,.section-editor{background:#fbfaff;border:1px solid var(--line);border-radius:10px;padding:18px;margin-top:14px}.upload-box h3,.section-editor-wrap h3{font-size:16px;margin:6px 0}.upload-box form{display:grid;gap:12px;margin-top:12px}.upload-box input[type=file]{max-width:100%;font-size:11px}.cover-preview{display:block;width:min(100%,360px);height:170px;object-fit:cover;border-radius:10px;margin:12px 0}.detail-cover{width:100%;height:300px;object-fit:cover;border-radius:15px;box-shadow:0 14px 35px #29204b18}.section-editor-wrap{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}.section-editor{background:#fff}.section-editor label+label{margin-top:12px}.section-editor textarea{width:100%;font:14px var(--font);border:1px solid var(--line);border-radius:7px;padding:10px;min-width:0}.section-tools{display:flex;justify-content:flex-end;gap:6px;margin-bottom:8px}.section-tools button{border:1px solid var(--line);background:white;color:#68657b;border-radius:6px;padding:5px 10px;cursor:pointer}.section-tools button:hover{border-color:var(--purple);color:var(--purple)}.form-actions{display:flex;gap:10px;margin-top:17px}.upload-box .success a{color:var(--purple);text-decoration:underline}.content-toc{display:flex;flex-direction:column;gap:8px;margin:34px 0;padding:20px;background:#fff;border:1px solid var(--line);border-radius:10px}.content-toc strong{margin-bottom:3px}.content-toc a{font-size:13px;color:#6550dc}.content-sections{display:grid;gap:16px}.content-section{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;scroll-margin-top:90px}.content-section h2{font-size:21px;margin:8px 0 12px}.section-body{font-size:14px;line-height:2;white-space:pre-wrap;color:#55536a}.inline-form{display:inline}.cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.cover:has(img):before{display:none}.detail-grid .description{white-space:pre-wrap}@media(max-width:760px){.upload-grid{grid-template-columns:1fr}.detail-cover{height:220px}.content-section{padding:18px}}
.rich-editor-wrap{margin:25px 0 18px;border-top:1px solid var(--line);padding-top:20px}.editor-heading h3{font-size:18px;margin:6px 0}.editor-heading p{font-size:12px;margin:4px 0 14px}.editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#f2f0fa;border:1px solid var(--line);border-bottom:0;border-radius:9px 9px 0 0;padding:8px}.editor-toolbar button{font:600 12px var(--font);border:1px solid #e3e0ed;background:white;color:#49465e;border-radius:6px;padding:7px 10px;cursor:pointer}.editor-toolbar button:hover{border-color:var(--purple);color:var(--purple)}.editor-toolbar span{height:22px;border-left:1px solid #d8d5e4;margin:0 3px}.wysiwyg{min-height:440px;background:#fff;border:1px solid var(--line);border-radius:0 0 9px 9px;padding:22px 25px;line-height:1.9;outline:none;overflow-wrap:anywhere}.wysiwyg:focus{border-color:#a99bf0;box-shadow:0 0 0 3px #7057ed12}.wysiwyg:empty:before{content:attr(data-placeholder);color:#aaa7b8}.wysiwyg h2,.wysiwyg-output h2{font-size:1.5em;line-height:1.45;margin:1.3em 0 .55em;color:var(--ink)}.wysiwyg h3,.wysiwyg-output h3{font-size:1.2em;margin:1.2em 0 .5em}.wysiwyg p,.wysiwyg-output p{margin:.45em 0}.wysiwyg blockquote,.wysiwyg-output blockquote{margin:1em 0;padding:10px 16px;border-left:3px solid var(--purple);background:#f7f5ff;color:#605d74}.wysiwyg-output{font-size:15px;line-height:1.95;overflow-wrap:anywhere}.wysiwyg-output ul,.wysiwyg-output ol{padding-left:1.7em}.wysiwyg-output a{color:var(--purple);text-decoration:underline}.content-page{margin:38px 0 0;background:#fff;border:1px solid var(--line);border-radius:13px;padding:28px 32px}.content-page>h2{font-size:24px;margin:4px 0 15px}.editor-hint{margin:18px 0}.detail-cover{object-fit:cover}@media(max-width:760px){.wysiwyg{min-height:320px;padding:16px}.content-page{padding:20px 18px}.editor-toolbar{gap:4px}.editor-toolbar button{padding:7px 8px}}
.editor-toolbar{position:sticky;top:72px;z-index:4;box-shadow:0 4px 12px #21183b10}.wysiwyg{max-height:calc(100vh - 210px);overflow:auto;overscroll-behavior:contain;scroll-behavior:auto}.wysiwyg table,.wysiwyg-output table{border-collapse:collapse;width:100%;margin:14px 0;table-layout:auto}.wysiwyg td,.wysiwyg th,.wysiwyg-output td,.wysiwyg-output th{border:1px solid #b9b7c4;padding:7px 9px;vertical-align:top;min-width:35px}.wysiwyg th,.wysiwyg-output th{font-weight:700;background:#f1eff7}.wysiwyg img,.wysiwyg-output img{max-width:100%;height:auto;object-fit:contain;vertical-align:middle}.wysiwyg-output{overflow-x:auto}.wysiwyg-output table{background:white}.wysiwyg-output hr{border:0;border-top:1px solid var(--line);margin:18px 0}@media(max-width:760px){.editor-toolbar{top:64px}.wysiwyg{max-height:calc(100vh - 180px)}}
.clipboard-hint{font-size:11px;color:var(--muted);margin:12px 0 7px}.wysiwyg iframe,.wysiwyg-output iframe{display:block;width:min(100%,720px);aspect-ratio:16/9;height:auto;border:0;border-radius:10px;margin:18px auto;background:#111}.wysiwyg-output iframe{max-width:100%}