/* ===== ฟอนต์ Kanit (เก็บไว้ในโฮสต์เอง ไม่ต้องพึ่ง Google Fonts) ===== */
@font-face{font-family:"Kanit";font-weight:400;font-display:swap;src:url(fonts/kanit-thai-400-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Kanit";font-weight:400;font-display:swap;src:url(fonts/kanit-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Kanit";font-weight:500;font-display:swap;src:url(fonts/kanit-thai-500-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Kanit";font-weight:500;font-display:swap;src:url(fonts/kanit-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Kanit";font-weight:600;font-display:swap;src:url(fonts/kanit-thai-600-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Kanit";font-weight:600;font-display:swap;src:url(fonts/kanit-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Kanit";font-weight:700;font-display:swap;src:url(fonts/kanit-thai-700-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Kanit";font-weight:700;font-display:swap;src:url(fonts/kanit-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#16236b; --blue:#2447c4; --sky:#e8f0ff; --gold:#c9a24a; --gold-soft:#f6ecd2;
  --ink:#1b2340; --muted:#5d6788; --line:#dbe3f5; --bg:#f3f6fd; --white:#fff;
  --ok:#147a4b; --ok-bg:#e3f6ec; --err:#b3261e; --err-bg:#fdeceb; --warn:#8a5a00; --warn-bg:#fff4d6;
  --radius:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Kanit",system-ui,sans-serif;font-weight:400;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
img{max-width:100%}
a{color:var(--blue)}
code{background:var(--sky);padding:1px 6px;border-radius:6px;font-size:.92em}
h1,h2,h3{line-height:1.3;margin:0 0 .5em;font-weight:600;color:var(--navy)}

.wrap{max-width:1100px;margin:0 auto;padding:16px}
.narrow{max-width:560px}

/* ===== หน้าผู้บริจาค ===== */
.hero{background:linear-gradient(160deg,var(--navy),var(--blue) 70%);color:#fff;padding:28px 16px 70px;text-align:center;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hero img.logo{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:50%;padding:6px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.hero h1{color:#fff;font-size:clamp(1.5rem,5vw,2.1rem);margin:12px 0 4px}
.hero p{margin:0;opacity:.9}
.hero h1,.hero p{text-wrap:balance}
.donate-main{max-width:560px;margin:-48px auto 40px;padding:0 16px;position:relative;z-index:1}

.card{background:var(--white);border-radius:var(--radius);box-shadow:0 6px 24px rgba(22,35,107,.08);padding:22px;margin-bottom:16px;border:1px solid var(--line)}
.step{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:600;flex:none}
.step h2{margin:0;font-size:1.15rem}

.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.presets button{font:inherit;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 4px;cursor:pointer;color:var(--navy);font-weight:500}
.presets button.on{border-color:var(--blue);background:var(--sky)}
.amount-input{position:relative}
.amount-input input[type=number]{font-size:1.6rem;font-weight:600;text-align:right;padding-right:62px;-moz-appearance:textfield}
.amount-input input::-webkit-inner-spin-button,.amount-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.amount-input span{position:absolute;right:16px;top:calc(50% + 3px);transform:translateY(-50%);color:var(--muted);pointer-events:none}

.qr-box{text-align:center;padding:12px;border:2px dashed var(--line);border-radius:12px;background:#fbfcff}
.qr-box .pp-head{background:#0e3b6d;color:#fff;border-radius:8px 8px 0 0;padding:6px;font-weight:600;letter-spacing:.5px;max-width:280px;margin:0 auto}
.qr-box #qr{background:#fff;display:inline-block;padding:10px;border:1px solid var(--line);border-top:0;max-width:280px;width:100%}
.qr-box #qr img,.qr-box #qr svg{width:100%;height:auto;display:block}
.qr-box .acc{margin-top:8px;color:var(--muted);font-size:.95rem}
.qr-box .amt{font-size:1.3rem;font-weight:600;color:var(--navy)}
.bank{white-space:pre-line;background:var(--gold-soft);border-radius:10px;padding:10px 12px;margin-top:12px;font-size:.95rem}

label{display:block;margin:0 0 14px;font-weight:500}
label small{font-weight:400;color:var(--muted)}
input[type=text],input[type=number],input[type=tel],input[type=password],input[type=email],input:not([type]),textarea,select{
  display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,71,196,.15)}
textarea{min-height:90px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{margin-top:5px;width:18px;height:18px;flex:none}

.file-drop{display:flex;gap:12px;align-items:center;border:1.5px dashed var(--line);border-radius:12px;padding:12px;margin-top:6px;cursor:pointer;background:#fbfcff;font-weight:400}
.file-drop:hover{border-color:var(--blue)}
.file-drop img{width:72px;height:72px;object-fit:cover;border-radius:10px;background:var(--sky);flex:none}
.file-drop input{position:absolute;opacity:0;width:1px;height:1px}
.file-drop .ph{width:72px;height:72px;border-radius:10px;background:var(--sky);display:grid;place-items:center;font-size:28px;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:500;border:0;border-radius:10px;padding:11px 18px;cursor:pointer;text-decoration:none;background:var(--sky);color:var(--navy)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--blue)}
.btn.gold{background:var(--gold);color:#fff}
.btn.danger{background:var(--err-bg);color:var(--err)}
.btn.ok{background:var(--ok);color:#fff}
.btn.block{width:100%;padding:14px;font-size:1.1rem}
.btn.sm{padding:6px 12px;font-size:.9rem}
.btn:disabled{opacity:.55;cursor:wait}

.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert.err{background:var(--err-bg);color:var(--err)}
.alert.warn{background:var(--warn-bg);color:var(--warn)}
.muted{color:var(--muted)}
.center{text-align:center}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:20px 0 40px}

/* ===== แอดมิน ===== */
.topbar{background:var(--navy);color:#fff}
.topbar .wrap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.topbar .brand{font-weight:600;margin-right:auto}
.topbar a{color:#dfe6ff;text-decoration:none;padding:6px 10px;border-radius:8px}
.topbar a.on,.topbar a:hover{background:rgba(255,255,255,.14);color:#fff}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.95rem}
.tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tabs .n{display:inline-block;min-width:22px;text-align:center;background:var(--sky);color:var(--navy);border-radius:999px;font-size:.8rem;margin-left:4px;padding:0 6px}
.tabs a.on .n{background:rgba(255,255,255,.2);color:#fff}

.list{display:grid;gap:10px}
.row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;text-decoration:none;color:inherit}
.row:hover{border-color:var(--blue)}
.row img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--sky);flex:none}
.row .info{flex:1;min-width:0}
.row .info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .amt{font-weight:600;color:var(--navy);white-space:nowrap}
.badge{display:inline-block;font-size:.78rem;padding:1px 8px;border-radius:999px;background:var(--sky);color:var(--navy)}
.badge.pending{background:var(--warn-bg);color:var(--warn)}
.badge.posted{background:var(--ok-bg);color:var(--ok)}
.badge.post_failed,.badge.rejected{background:var(--err-bg);color:var(--err)}

.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.grid3{grid-template-columns:1fr 1fr}.presets{grid-template-columns:repeat(2,1fr)}}
canvas.preview{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff;display:block}
.slip{width:100%;border-radius:10px;border:1px solid var(--line)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;margin:0 0 12px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.range{display:flex;align-items:center;gap:10px;font-weight:400;margin-bottom:8px}
.range span{width:86px;flex:none}
.range input{flex:1}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.stats .card{margin:0;padding:14px}
.stats b{display:block;font-size:1.4rem;color:var(--navy)}
@media (max-width:520px){.stats{grid-template-columns:1fr}}

.editor{position:relative;cursor:crosshair;touch-action:none}
.el-list{display:grid;gap:8px}
.el-item{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.el-item.sel{border-color:#ff3b6b;box-shadow:0 0 0 2px rgba(255,59,107,.15)}
.el-item header{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}
.el-item header input{width:18px;height:18px}
.el-item .fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.el-item .fields label{margin:0;font-size:.85rem;font-weight:400}
.el-item .fields input,.el-item .fields select{padding:6px 8px;margin-top:2px}
.el-item .fields .wide{grid-column:1/-1}
input[type=color]{width:100%;height:36px;padding:2px;border:1.5px solid var(--line);border-radius:8px;margin-top:2px;background:#fff}
@media (max-width:520px){.el-item .fields{grid-template-columns:1fr 1fr}}
fieldset.opts{border:1.5px solid var(--line);border-radius:12px;padding:10px 14px 2px;margin:0 0 14px}
fieldset.opts legend{font-weight:500;padding:0 6px}
fieldset.opts .check{margin-bottom:10px}
input[type=date]{display:block;width:100%;margin-top:6px;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}