*{box-sizing:border-box}.teacher-public-body{margin:0;background:#f9f7ff;color:#342843;font-family:"Noto Sans Thai","Tahoma",sans-serif;--page-width:1240px;--teacher-primary:#7546f5;--teacher-secondary:#ff6fae;--teacher-accent:#27c7ad}.teacher-public-body.font-rounded{font-family:"Mali","Noto Sans Thai",Tahoma,sans-serif}.teacher-public-body.font-friendly{font-family:"Noto Sans Thai",Tahoma,sans-serif}.teacher-public-body.font-modern{font-family:Inter,"Noto Sans Thai",sans-serif}.teacher-public-body.font-formal{font-family:"Sarabun",Tahoma,sans-serif}.teacher-public-body.modal-open{overflow:hidden}.teacher-preview-bar{position:sticky;top:0;z-index:100;background:#251b35;color:#fff;padding:10px 18px;display:flex;justify-content:center;gap:20px;font-size:13px}.teacher-preview-bar a{color:#fff;font-weight:800}.teacher-public-nav{height:76px;padding:0 max(20px,calc((100vw - var(--page-width))/2));display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(92,66,125,.12);position:relative;z-index:20}.teacher-public-brand{display:flex;align-items:center;gap:9px;color:var(--teacher-primary);text-decoration:none;font-weight:950;letter-spacing:.07em}.teacher-public-brand span{font-size:28px}.teacher-public-nav nav{display:flex;gap:28px}.teacher-public-nav nav a{color:#574c63;text-decoration:none;font-weight:750}.teacher-public-nav>div{display:flex;gap:8px}.teacher-public-nav button,.teacher-public-nav>div a{border:1px solid #e2daeb;background:#fff;color:#574a65;border-radius:13px;padding:10px 14px;display:flex;align-items:center;gap:7px;font-weight:800;text-decoration:none;cursor:pointer}.teacher-public-nav .is-primary{background:var(--teacher-primary);color:#fff;border-color:transparent}.teacher-public-nav svg{width:18px}.teacher-profile-hero{position:relative;padding-bottom:34px;background:linear-gradient(180deg,color-mix(in srgb,var(--teacher-primary) 8%,white),#fff)}.teacher-cover{height:clamp(230px,31vw,410px);overflow:hidden;background:linear-gradient(135deg,var(--teacher-primary),var(--teacher-secondary))}.teacher-cover img{width:100%;height:100%;object-fit:cover;object-position:center var(--teacher-cover-position,center);display:block}.teacher-cover:after{content:"";position:absolute;inset:0 0 auto;height:clamp(230px,31vw,410px);background:linear-gradient(180deg,transparent 45%,rgba(21,13,36,.28));pointer-events:none}.teacher-profile-shell{max-width:var(--page-width);margin:-86px auto 0;padding:0 24px;position:relative;display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:24px;align-items:end;z-index:3}.teacher-avatar{width:160px;height:160px;border-radius:40px;background:linear-gradient(135deg,var(--teacher-primary),var(--teacher-secondary));border:8px solid #fff;box-shadow:0 18px 45px rgba(38,25,60,.24);display:grid;place-items:center;color:#fff;font-size:60px;font-weight:950;position:relative;overflow:visible}.teacher-avatar>img{width:100%;height:100%;object-fit:cover;border-radius:31px}.teacher-avatar>b{position:absolute;right:-7px;bottom:8px;width:38px;height:38px;border-radius:50%;background:#fff;color:#168d68;display:grid;place-items:center;box-shadow:0 7px 20px #0002}.teacher-identity{padding-bottom:6px}.teacher-name-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.teacher-name-row h1{margin:0;font-size:clamp(32px,4vw,52px);color:#fff;text-shadow:0 3px 20px rgba(17,10,30,.45);line-height:1.2}.teacher-name-row em{font-style:normal;background:#e5faf2;color:#087b59;border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px}.teacher-identity>p{font-size:18px;color:#4e425c;margin:14px 0 10px;font-weight:650}.teacher-meta{display:flex;gap:10px;flex-wrap:wrap}.teacher-meta span{display:flex;align-items:center;gap:6px;color:#62566e;background:#fff;border:1px solid #e9e2f0;border-radius:999px;padding:7px 10px;font-size:13px}.teacher-meta svg{width:16px;color:var(--teacher-primary)}.teacher-profile-actions{display:flex;gap:8px;padding-bottom:9px}.teacher-profile-actions button{border:1px solid #e3dbeb;background:#fff;border-radius:14px;padding:11px 14px;color:#53475f;font-weight:800;display:flex;align-items:center;gap:7px;cursor:pointer}.teacher-profile-actions svg{width:18px}.teacher-profile-stats{max-width:var(--page-width);margin:25px auto 0;padding:0 24px;display:flex;gap:12px}.teacher-profile-stats span{background:#fff;border:1px solid #e9e2f0;border-radius:16px;padding:12px 22px;color:#6e6478}.teacher-profile-stats strong{color:var(--teacher-primary);font-size:20px;margin-right:5px}.teacher-page-shell{max-width:var(--page-width);margin:auto;padding:20px 24px 70px}.teacher-announcement{display:flex;align-items:flex-start;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--teacher-secondary) 12%,white),color-mix(in srgb,var(--teacher-primary) 8%,white));border:1px solid color-mix(in srgb,var(--teacher-secondary) 30%,white);border-radius:22px;padding:18px 20px;margin:8px 0 42px}.teacher-announcement>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--teacher-secondary);color:#fff}.teacher-announcement strong{font-size:18px}.teacher-announcement p{margin:4px 0 0;color:#665a71}.teacher-content-section{margin:52px 0}.teacher-section-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:22px}.teacher-section-head span,.teacher-about-section>div>span,.teacher-contact-section>div>span{color:var(--teacher-primary);font-weight:900;letter-spacing:.1em;font-size:12px}.teacher-section-head h2,.teacher-about-section h2,.teacher-contact-section h2{font-size:clamp(28px,4vw,40px);margin:5px 0;color:#30233f}.teacher-section-head p{margin:0;color:#7a7083}.teacher-section-head>strong{color:var(--teacher-primary);background:#f0ebff;border-radius:999px;padding:8px 13px}.teacher-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.teacher-game-grid.is-featured .teacher-game-card:first-child{grid-column:span 2;grid-row:span 2}.teacher-game-grid.is-featured .teacher-game-card:first-child .teacher-game-cover{aspect-ratio:16/10}.teacher-game-card{background:#fff;border:1px solid #e9e2ef;border-radius:24px;overflow:hidden;box-shadow:0 16px 38px rgba(48,31,74,.08);display:flex;flex-direction:column;transition:.25s}.teacher-game-card:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(48,31,74,.15)}.card-bubble .teacher-game-card{border-radius:36px}.card-glass .teacher-game-card{background:rgba(255,255,255,.78);backdrop-filter:blur(15px)}.card-paper .teacher-game-card{border-radius:10px;box-shadow:5px 6px 0 color-mix(in srgb,var(--teacher-primary) 14%,white)}.card-classic .teacher-game-card{border-radius:8px}.teacher-game-cover{position:relative;display:block;aspect-ratio:16/9;background:#eee;overflow:hidden}.teacher-game-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}.teacher-game-card:hover .teacher-game-cover img{transform:scale(1.035)}.teacher-game-cover span{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.93);color:#4d415a;border-radius:999px;padding:6px 10px;font-weight:800;font-size:11px}.teacher-game-cover em{position:absolute;right:12px;top:12px;background:linear-gradient(135deg,var(--teacher-secondary),var(--teacher-primary));color:#fff;border-radius:999px;padding:6px 10px;font-style:normal;font-weight:900;font-size:11px}.teacher-game-copy{padding:17px;display:flex;flex:1;flex-direction:column;justify-content:space-between}.teacher-game-copy small{color:var(--teacher-primary);font-weight:800}.teacher-game-copy h3{font-size:20px;margin:7px 0}.teacher-game-copy h3 a{color:#342841;text-decoration:none}.teacher-game-copy p{color:#756a7f;line-height:1.6;margin:0}.teacher-game-copy footer{border-top:1px solid #eee8f2;margin-top:16px;padding-top:13px;display:flex;justify-content:space-between;align-items:center}.teacher-game-copy footer span,.teacher-game-copy footer a{display:flex;align-items:center;gap:5px;font-size:13px}.teacher-game-copy footer span{color:#7b7185}.teacher-game-copy footer a{color:var(--teacher-primary);font-weight:850;text-decoration:none}.teacher-game-copy svg{width:15px}.layout-compact .teacher-game-grid{grid-template-columns:1fr 1fr}.layout-compact .teacher-game-card{display:grid;grid-template-columns:180px 1fr}.layout-compact .teacher-game-cover{height:100%;aspect-ratio:auto}.layout-featured .teacher-game-grid{grid-template-columns:repeat(2,1fr)}.layout-featured .teacher-game-card:first-child{grid-column:span 2}.teacher-game-filter{display:grid;grid-template-columns:1fr 220px auto;gap:10px;background:#fff;border:1px solid #e9e1ef;border-radius:20px;padding:12px;margin-bottom:20px}.teacher-game-filter label{display:flex;align-items:center;border:1px solid #ddd4e6;border-radius:13px;padding:0 12px}.teacher-game-filter input,.teacher-game-filter select{border:0;background:transparent;padding:12px;width:100%;outline:none;color:#4e4359}.teacher-game-filter select{border:1px solid #ddd4e6;border-radius:13px}.teacher-game-filter button{border:0;background:var(--teacher-primary);color:#fff;border-radius:13px;padding:0 20px;font-weight:850}.teacher-about-section{display:grid;grid-template-columns:1.5fr .8fr;gap:25px;align-items:stretch;background:#fff;border:1px solid #e9e2ef;border-radius:30px;padding:32px;margin:60px 0}.teacher-about-section>div>p{font-size:17px;line-height:1.9;color:#64596e}.teacher-about-section aside{background:linear-gradient(145deg,var(--teacher-primary),color-mix(in srgb,var(--teacher-secondary) 70%,var(--teacher-primary)));color:#fff;border-radius:24px;padding:25px;display:flex;flex-direction:column;justify-content:center}.teacher-about-section aside strong{font-size:24px}.teacher-about-section aside p{line-height:1.7;color:rgba(255,255,255,.88)}.teacher-about-section aside a{color:#fff;font-weight:900}.teacher-skill-tags{display:flex;gap:8px;flex-wrap:wrap}.teacher-skill-tags span{display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;background:#f4f0fa;color:#584c63;font-size:13px}.teacher-skill-tags svg{width:16px;color:var(--teacher-primary)}.teacher-contact-section{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--teacher-accent) 8%,white));border-radius:30px;padding:30px;margin:55px 0}.teacher-contact-section>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.teacher-contact-section a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e6dfec;border-radius:18px;padding:15px;text-decoration:none;color:#4d4158}.teacher-contact-section a>svg{width:42px;height:42px;padding:11px;border-radius:14px;background:#f2ecff;color:var(--teacher-primary)}.teacher-contact-section strong,.teacher-contact-section small{display:block}.teacher-contact-section small{color:#7d7286}.teacher-public-empty{display:grid;place-items:center;gap:9px;padding:50px;border:1px dashed #d7cde2;border-radius:22px;color:#786d82}.teacher-public-empty svg{width:45px}.teacher-public-empty a{color:var(--teacher-primary);font-weight:800}.teacher-public-footer{padding:35px max(24px,calc((100vw - var(--page-width))/2));background:#241b30;color:#fff;display:flex;justify-content:space-between;gap:30px}.teacher-public-footer a{color:#fff;text-decoration:none}.teacher-public-footer>div>a{display:flex;gap:8px;align-items:center;font-size:18px}.teacher-public-footer p{color:#c9bfd3}.teacher-public-footer nav{display:flex;gap:24px;align-items:center}.teacher-qr-modal{position:fixed;inset:0;background:#20172ddd;z-index:200;display:grid;place-items:center;padding:20px}.teacher-qr-modal[hidden]{display:none}.teacher-qr-modal>button{position:absolute;right:25px;top:25px;width:45px;height:45px;border:0;border-radius:50%;background:#fff;color:#3f334b}.teacher-qr-modal>div{background:#fff;border-radius:28px;padding:25px;display:grid;gap:12px;text-align:center;max-width:420px;width:100%}.teacher-qr-modal img{width:min(100%,320px);margin:auto}.teacher-qr-modal a{background:var(--teacher-primary);color:#fff;padding:12px;border-radius:13px;text-decoration:none;font-weight:850}.teacher-not-found{min-height:100vh;display:grid;place-content:center;text-align:center;padding:30px;background:linear-gradient(135deg,#f8f2ff,#eef7ff)}.teacher-not-found>div{font-size:70px}.teacher-not-found h1{font-size:40px}.teacher-not-found p{color:#746a7d}.teacher-not-found a{justify-self:center;background:#7546f5;color:#fff;padding:12px 18px;border-radius:13px;text-decoration:none;font-weight:850}.theme-dark-modern{background:#0e1221;color:#ecedff}.theme-dark-modern .teacher-public-nav{background:#111628e8;border-color:#ffffff15}.theme-dark-modern .teacher-public-nav nav a,.theme-dark-modern .teacher-public-brand{color:#f5f3ff}.theme-dark-modern .teacher-profile-hero{background:linear-gradient(180deg,#171c33,#0e1221)}.theme-dark-modern .teacher-identity>p,.theme-dark-modern .teacher-section-head p{color:#b7bad1}.theme-dark-modern .teacher-game-card,.theme-dark-modern .teacher-about-section,.theme-dark-modern .teacher-contact-section,.theme-dark-modern .teacher-game-filter{background:#171c30;border-color:#2a3048}.theme-dark-modern .teacher-game-copy h3 a,.theme-dark-modern .teacher-section-head h2,.theme-dark-modern .teacher-about-section h2,.theme-dark-modern .teacher-contact-section h2{color:#f1efff}.theme-dark-modern .teacher-game-copy p,.theme-dark-modern .teacher-about-section>div>p{color:#b6b8cb}.theme-dark-modern .teacher-page-shell{background:#0e1221}.theme-royal-minimal .teacher-profile-hero{background:#fbfaf6}.theme-thai-notebook{background:#fffaf0}.theme-nature-school{background:#f5fcf5}
@media(max-width:960px){.teacher-public-nav nav{display:none}.teacher-profile-shell{grid-template-columns:120px 1fr;align-items:end;margin-top:-60px}.teacher-avatar{width:120px;height:120px;border-radius:32px}.teacher-avatar>img{border-radius:24px}.teacher-profile-actions{grid-column:1/-1;justify-content:flex-end}.teacher-name-row h1{color:#30243e;text-shadow:none}.teacher-game-grid{grid-template-columns:repeat(2,1fr)}.teacher-game-grid.is-featured .teacher-game-card:first-child{grid-column:span 2}.teacher-about-section{grid-template-columns:1fr}.teacher-contact-section>div:last-child{grid-template-columns:repeat(2,1fr)}.layout-compact .teacher-game-grid{grid-template-columns:1fr}.layout-featured .teacher-game-grid{grid-template-columns:1fr}.layout-featured .teacher-game-card:first-child{grid-column:auto}}
@media(max-width:680px){.teacher-public-nav{height:64px;padding:0 14px}.teacher-public-nav button span,.teacher-public-nav>div a span{display:none}.teacher-public-nav button,.teacher-public-nav>div a{padding:9px}.teacher-cover{height:220px}.teacher-cover:after{height:220px}.teacher-profile-shell{grid-template-columns:90px 1fr;gap:13px;margin-top:-42px;padding:0 16px}.teacher-avatar{width:90px;height:90px;border-radius:26px;border-width:5px;font-size:36px}.teacher-avatar>img{border-radius:20px}.teacher-name-row h1{font-size:27px}.teacher-name-row em{font-size:10px}.teacher-identity>p{font-size:14px}.teacher-meta{display:none}.teacher-profile-actions{justify-content:flex-start;padding-left:103px;margin-top:-3px}.teacher-profile-actions button{font-size:12px;padding:9px}.teacher-profile-stats{padding:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.teacher-profile-stats span{padding:9px;text-align:center;font-size:11px}.teacher-profile-stats strong{display:block;font-size:18px}.teacher-page-shell{padding:15px 16px 50px}.teacher-content-section{margin:38px 0}.teacher-section-head{align-items:flex-start;flex-direction:column}.teacher-game-grid,.teacher-game-grid.is-featured{grid-template-columns:1fr}.teacher-game-grid.is-featured .teacher-game-card:first-child{grid-column:auto;grid-row:auto}.teacher-game-filter{grid-template-columns:1fr}.teacher-game-filter button{padding:12px}.layout-compact .teacher-game-card{grid-template-columns:120px 1fr}.layout-compact .teacher-game-copy p{display:none}.teacher-about-section,.teacher-contact-section{padding:20px;border-radius:22px}.teacher-contact-section>div:last-child{grid-template-columns:1fr}.teacher-public-footer{flex-direction:column;padding:28px 18px}.teacher-public-footer nav{flex-wrap:wrap}.teacher-announcement{margin-bottom:30px}.teacher-name-row{align-items:flex-start;flex-direction:column;gap:4px}}