/* GUM Auction — สไตล์กลางของหน้าบทความ (static, ไม่เกี่ยวกับแอป Nuxt) */
:root{
  --red:#bd0202; --red2:#8a0303; --ink:#241a1c; --muted:#6f6164;
  --line:#ecdedc; --bg:#faf6f5; --card:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Kanit","Sukhumvit Set","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.75; -webkit-text-size-adjust:100%;
}
.wrap{max-width:760px; margin:0 auto; padding:0 16px 56px}

/* ---------- header ---------- */
header.site{
  background:linear-gradient(135deg,var(--red),var(--red2));
  color:#fff; padding:22px 16px;
}
.hdr{max-width:760px; margin:0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hdr img{width:52px; height:52px; border-radius:12px; background:#fff; object-fit:contain; flex:0 0 auto}
.hdr .brand{font-weight:700; font-size:18px; line-height:1.3}
.hdr .brand small{display:block; font-weight:400; font-size:12.5px; opacity:.92}
.hdr a{color:#fff; text-decoration:none}

/* ---------- breadcrumb ---------- */
nav.crumb{max-width:760px; margin:14px auto 0; padding:0 16px; font-size:13px; color:var(--muted)}
nav.crumb a{color:var(--red); text-decoration:none}
nav.crumb span{margin:0 6px; color:var(--line)}

/* ---------- article ---------- */
article{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 22px 26px; margin-top:14px}
h1{margin:0 0 8px; font-size:26px; font-weight:700; line-height:1.35; color:var(--ink)}
.meta-line{font-size:13px; color:var(--muted); margin:0 0 14px}
h2{margin:30px 0 8px; font-size:20px; font-weight:700; color:var(--red); line-height:1.4}
h3{margin:20px 0 6px; font-size:16.5px; font-weight:700}
p{margin:8px 0}
.lead{font-size:16.5px}
.answer{background:#fff6f6; border-left:4px solid var(--red); border-radius:0 10px 10px 0; padding:10px 14px; margin:8px 0 12px}
ul,ol{margin:8px 0; padding-left:22px}
li{margin:5px 0}
a{color:var(--red)}
figure{margin:16px 0}
figure img{max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); display:block}
figcaption{font-size:13px; color:var(--muted); margin-top:6px}
.note{background:#fff6f6; border:1px solid #f0d3d3; border-radius:12px; padding:12px 14px; font-size:14.5px}
hr{border:0; border-top:1px dashed var(--line); margin:24px 0}

/* ---------- อ่านต่อ / CTA ---------- */
.related{background:#fffdfd; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:22px}
.related b{color:var(--red)}
.cta{
  background:linear-gradient(135deg,var(--red),var(--red2)); color:#fff;
  border-radius:14px; padding:20px 20px 22px; margin-top:22px; text-align:center;
}
.cta h2{color:#fff; margin:0 0 6px; font-size:20px}
.cta p{margin:4px 0 14px; font-size:14.5px; opacity:.95}
.cta .btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.cta a.btn{
  display:inline-block; background:#fff; color:var(--red); font-weight:700;
  border-radius:10px; padding:10px 18px; text-decoration:none; font-size:15px;
}
.cta a.btn.ghost{background:transparent; color:#fff; border:2px solid #fff}

footer.site{max-width:760px; margin:0 auto; padding:26px 16px 40px; text-align:center; color:var(--muted); font-size:13px}
footer.site a{margin:0 8px; white-space:nowrap; display:inline-block}

@media (max-width:420px){
  body{font-size:15.5px}
  h1{font-size:22px}
  h2{font-size:18px}
  article{padding:16px 14px 20px}
}