@font-face{font-family:StudentThai;src:url('THSarabun.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}body{margin:0;font-family:Tahoma,'Leelawadee UI',sans-serif;color:#183a48;background:#f2f6f7;font-size:15px;line-height:1.7}header{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:white;border-bottom:1px solid #d7e3e7;gap:20px}header img{width:270px;max-width:100%;display:block}a{color:#125668}.back{text-decoration:none;white-space:nowrap}main{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);max-width:1550px;margin:auto;padding:26px;gap:25px}.editor{background:#fff;border:1px solid #d7e3e7;border-radius:14px;padding:24px}h1{font-size:23px;line-height:1.5;margin:5px 0 14px}.code{color:#125668;margin:0}.intro,.notice,.note{font-size:13px;color:#586f78}.notice{background:#edf7f7;padding:12px;border-left:3px solid #168575}fieldset{border:0;padding:0;margin:22px 0}legend{width:100%;border-bottom:1px solid #d7e3e7;padding-bottom:8px;font-weight:bold;margin-bottom:12px}label{display:block;margin-bottom:13px;font-size:14px}input,select,textarea{display:block;width:100%;font:inherit;padding:10px;border:1px solid #bdcbd5;border-radius:7px;background:white;color:#183a48;margin-top:5px}input[type=checkbox],input[type=radio]{display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:middle}.check{padding:5px 0}button{font:inherit;cursor:pointer;border:1px solid #125668;border-radius:8px;padding:11px 14px;background:#125668;color:white}.secondary,.row-buttons button{background:white;color:#125668}.actions{display:flex;gap:9px;flex-wrap:wrap}.actions button{font-size:14px}.viewer{position:sticky;top:18px;align-self:start;min-width:0}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.preview-head label{display:flex;align-items:center;gap:8px;margin:0}.preview-head select{width:auto;max-width:240px;margin:0}#page{background:white;box-shadow:0 8px 25px #183a481c}#page svg{display:block;width:100%;height:auto}details{border:1px solid #d7e3e7;border-radius:8px;padding:12px;margin:10px 0}summary{cursor:pointer;font-size:14px;font-weight:bold}.row-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:12px}.row-grid .wide{grid-column:1/-1}.row-buttons{display:flex;gap:8px;flex-wrap:wrap}button:disabled{opacity:.55;cursor:default}#status{color:#a3312b}.input-error{border-color:#a3312b}input:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bce6e1;outline-offset:2px}[hidden]{display:none!important}@media(max-width:850px){main{grid-template-columns:1fr;padding:15px}.viewer{position:static}.editor{padding:20px}header{padding:14px;flex-wrap:wrap}header img{width:230px}.preview-head select{max-width:180px}}@media(max-width:400px){.row-grid{grid-template-columns:1fr}.row-grid .wide{grid-column:auto}main{padding:10px}.editor{padding:16px}}