:root{
  --gold:#B8912F; --gold-d:#8A6A18; --gold-l:#EFE3C4;
  --ink:#2B2B26; --ink-soft:#5C5A50; --line:#E6DFCC;
  --bg:#F7F3E8; --card:#FFFFFF; --ok:#1F7A4D; --ok-bg:#E6F5EC;
  --bad:#B4342A; --bad-bg:#FBEBE9; --shadow:0 6px 24px rgba(90,74,30,.10);
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Sarabun',-apple-system,'Helvetica Neue',sans-serif;
  background:var(--bg); color:var(--ink); font-size:17px; line-height:1.7;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:820px;margin:0 auto;padding:16px 14px 64px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 20px;margin-bottom:16px}
h1,h2,h3{margin:0 0 10px;line-height:1.45}
h1{font-size:26px;color:var(--gold-d)}
h2{font-size:21px}
p{margin:0 0 12px}
.muted{color:var(--ink-soft)}
.small{font-size:15px}
.center{text-align:center}

/* หัวเรื่อง */
.hero{text-align:center;background:linear-gradient(180deg,#fff, #FFFBF0);
  border:1px solid var(--gold-l)}
.hero .logo-slot{width:120px;height:120px;margin:0 auto 12px;border:2px dashed #D8CEB2;
  border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#B3A98D;font-size:13px;text-align:center;padding:6px;overflow:hidden}
.hero .logo-slot img{max-width:100%;max-height:100%;object-fit:contain}
.hero .logo-slot.has-img{border:none;width:140px;height:140px}
.badge{display:inline-block;background:var(--gold-l);color:var(--gold-d);
  border-radius:999px;padding:4px 14px;font-size:14px;font-weight:600;margin-bottom:8px}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:12px;padding:15px 24px;font:inherit;font-weight:700;
  cursor:pointer;text-decoration:none;transition:.15s;min-height:52px}
.btn-primary{background:var(--gold-d);color:#fff}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--gold-d);border:2px solid var(--gold)}
.btn-lg{width:100%;font-size:19px;padding:18px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 180px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ฟอร์ม */
label{display:block;font-weight:600;margin:14px 0 6px}
input,select{width:100%;padding:14px;border:1px solid #D8D2C0;border-radius:12px;
  font:inherit;background:#fff;min-height:52px}
input:focus,select:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.req{color:var(--bad)}
.err{color:var(--bad);font-size:15px;margin-top:6px}

/* ข้อสอบ */
.progress{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0 8px;
  margin:-16px -14px 12px;padding-inline:14px;border-bottom:1px solid var(--line)}
.bar{height:10px;background:#E9E3D2;border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--gold);width:0;transition:.25s}
.q{margin-bottom:18px}
.q .qtitle{font-weight:700;margin-bottom:12px;display:flex;gap:10px}
.q .no{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold-l);
  color:var(--gold-d);display:grid;place-items:center;font-size:15px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:12px;padding:13px 14px;margin-bottom:9px;cursor:pointer;background:#fff}
.opt:hover{border-color:var(--gold)}
.opt input{width:22px;height:22px;min-height:0;flex:none;margin-top:3px;accent-color:var(--gold-d)}
.opt.sel{border-color:var(--gold-d);background:#FFFBF0}
.opt.correct{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.tag{font-size:14px;font-weight:700;padding:2px 10px;border-radius:99px;margin-left:8px}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.why{font-size:15px;background:#FAF7EE;border-left:4px solid var(--gold);
  padding:10px 12px;border-radius:0 8px 8px 0;margin-top:8px;color:var(--ink-soft)}

/* ผลคะแนน */
.score{font-size:64px;font-weight:800;line-height:1;color:var(--gold-d)}
.result-pass{border:2px solid var(--ok);background:var(--ok-bg)}
.result-fail{border:2px solid var(--bad);background:var(--bad-bg)}

/* พรีวิวเกียรติบัตร */
.cert-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:10px;overflow:auto;box-shadow:var(--shadow)}
.cert-box canvas,.cert-box img{width:100%;height:auto;display:block;border-radius:8px}

.steps{display:flex;gap:6px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.steps span{font-size:13px;color:#A79E86}
.steps b{color:var(--gold-d)}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}
ul.kb{padding-left:20px;margin:0 0 12px}
ul.kb li{margin-bottom:7px}
details{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;margin-bottom:10px}
summary{font-weight:700;cursor:pointer;color:var(--gold-d)}
.hidden{display:none!important}
@media print{.no-print{display:none!important}}

/* ---------- ดูเกียรติบัตรเต็มจอ ---------- */
.cert-box{cursor:zoom-in}
.viewer{position:fixed;inset:0;z-index:100;background:#171512;
  display:flex;flex-direction:column;overscroll-behavior:contain}
.viewer.hidden{display:none!important}
.viewer-bar{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:#221F1A;color:#F3ECDC;padding-top:max(10px,env(safe-area-inset-top))}
.viewer-tip{flex:1;font-size:15px;line-height:1.4}
.viewer-btn{flex:none;background:#3A342A;color:#F3ECDC;border:1px solid #554C3C;
  border-radius:10px;padding:9px 16px;font:inherit;font-weight:700;min-height:42px}
.viewer-body{flex:1;display:flex;align-items:center;justify-content:center;
  padding:10px;overflow:auto;-webkit-overflow-scrolling:touch}
.viewer-body img{max-width:100%;max-height:100%;object-fit:contain;
  border-radius:6px;background:#fff}
/* หมุนดู : ถอดรูปออกจาก flow แล้วจัดกลางด้วย transform กันภาพล้นจอ
   ความกว้างเลือกค่าที่น้อยกว่าระหว่าง "ความสูงที่เหลือ" กับ "ความกว้างจอ x อัตราส่วนภาพ" */
.viewer.rot .viewer-body{position:relative;overflow:hidden}
.viewer.rot .viewer-body img{position:absolute;top:50%;left:50%;
  max-width:none;max-height:none;
  width:min(calc(100vh - 150px), 139vw);
  transform:translate(-50%,-50%) rotate(-90deg)}
.viewer-note{flex:none;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  text-align:center;font-size:13px;color:#A79C88;background:#221F1A}

/* จอแนวนอนเตี้ย ๆ (มือถือหมุนข้าง) : บีบแถบบน-ล่างให้เกียรติบัตรใหญ่ที่สุด */
@media (orientation: landscape) and (max-height: 560px){
  .viewer-bar{padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top))}
  .viewer-tip{font-size:13px}
  .viewer-btn{padding:6px 14px;min-height:34px;font-size:14px}
  .viewer-body{padding:4px}
  .viewer-note{padding:4px 10px calc(4px + env(safe-area-inset-bottom));font-size:11px}
}