/* คู่มือ / บทความความรู้ Gold Progress (หน้า /guide/) */
:root{
  --bg:#ffffff; --bg-2:#f6f8fc; --bg-3:#eef2f9;
  --ink:#0f1a2e; --ink-2:#374151; --muted:#667085; --faint:#98a2b3;
  --line:#e6e9f0; --line-2:#d5dbe5;
  --primary:#2459d6; --primary-h:#1c48b3; --primary-soft:#edf2fd;
  --gold:#d4a017; --gold-2:#f2c94c; --gold-soft:#fdf7e6; --gold-ink:#8a6400;
  --green:#0f7a4a; --green-soft:#e8f6ee; --red:#c0271c; --red-soft:#fdeeec;
  --sh-sm:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh-md:0 8px 24px -8px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Thai','Segoe UI',Tahoma,sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto}

/* header */
.g-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.g-nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.mark{width:32px;height:32px;border-radius:9px;flex:none;background:url(/images/logo-mark.svg) center/cover no-repeat;box-shadow:0 6px 14px -5px rgba(15,26,46,.45)}
.g-links{display:flex;gap:22px;font-size:15px}
.g-links a{color:var(--ink-2);font-weight:500}
.g-links a.on{color:var(--primary)}
.g-cta{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:15px;line-height:1.4;padding:10px 18px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);white-space:nowrap}
.btn:hover{text-decoration:none;border-color:var(--faint)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 16px -6px rgba(36,89,214,.55)}
.btn-primary:hover{background:var(--primary-h);border-color:var(--primary-h)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:transparent;color:#3b2a00}

/* breadcrumb + article head */
.crumb{font-size:14px;color:var(--muted);margin:28px 0 10px}
.crumb a{color:var(--muted)}
.crumb span{margin:0 6px;color:var(--faint)}
.a-head h1{font-size:clamp(30px,4.6vw,42px);line-height:1.3;letter-spacing:-.015em;margin:0 0 14px}
.a-head .lead{font-size:19px;color:var(--ink-2);margin:0 0 14px}
.meta{font-size:14px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}

/* table of contents */
.toc{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px 22px;margin:26px 0}
.toc b{display:block;font-size:15px;margin-bottom:4px}
.toc ol{margin:0;padding-left:20px;font-size:15.5px}
.toc li{margin:2px 0}

/* article body */
.prose h2{font-size:25px;line-height:1.4;margin:44px 0 12px;letter-spacing:-.01em;scroll-margin-top:84px}
.prose h3{font-size:19.5px;margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:4px 0}
.prose strong{color:var(--ink)}
.box{border-radius:14px;padding:16px 20px;margin:22px 0;border:1px solid var(--line);background:var(--bg-2)}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.box-gold{background:var(--gold-soft);border-color:#f1dfa6}
.box-warn{background:var(--red-soft);border-color:#f4c8c3}
.box-blue{background:var(--primary-soft);border-color:#cfdcf8}
.box b.t{display:block;margin-bottom:4px}
.tbl{overflow-x:auto;margin:18px 0 22px;border:1px solid var(--line);border-radius:12px}
.tbl table{border-collapse:collapse;width:100%;font-size:15.5px}
.tbl.wide table{min-width:600px}
.tbl th,.tbl td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--bg-2);font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.hl td{background:var(--gold-soft);font-weight:600}

/* CTA + related */
.a-cta{margin:46px 0 10px;border-radius:22px;padding:32px 28px;background:linear-gradient(135deg,#1d4fc4 0%,#2459d6 45%,#3a6ee6 100%);color:#fff;text-align:center}
.a-cta h2{margin:0 0 6px;font-size:24px;color:#fff}
.a-cta p{margin:0 0 18px;color:rgba(255,255,255,.86)}
.a-cta .btn{background:#fff;color:var(--primary);border-color:#fff}
.a-cta small{display:block;margin-top:12px;color:rgba(255,255,255,.7);font-size:13px}
.related{margin:40px 0 0}
.related h2{font-size:20px;margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:block;border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;box-shadow:var(--sh-sm);color:var(--ink);transition:box-shadow .2s,border-color .2s}
.card:hover{text-decoration:none;border-color:var(--line-2);box-shadow:var(--sh-md)}
.card .k{font-size:13px;font-weight:600;color:var(--gold-ink)}
.card h3{margin:4px 0 6px;font-size:18.5px;line-height:1.45}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}

/* hub */
.hub-head{padding:40px 0 10px}
.hub-head h1{font-size:clamp(30px,4.6vw,42px);margin:0 0 8px;line-height:1.3}
.hub-head p{color:var(--ink-2);margin:0;font-size:18px}

/* footer */
footer{margin-top:64px;border-top:1px solid var(--line);background:var(--bg-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px;font-size:14px;color:var(--muted)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--ink-2)}
.disc{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:36px;padding-top:16px}

@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  .g-links{display:none}
  .g-nav .wrap{gap:12px}
  .btn{padding:9px 14px;font-size:14px}
  .a-head .lead{font-size:17.5px}
  .prose h2{font-size:22px}
  .a-cta{padding:26px 18px}
  .tbl th,.tbl td{padding:9px 10px;font-size:14.5px}
}

/* รูปประกอบบทความ */
.fig{margin:24px 0 26px}
.fig img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:var(--bg-2)}
.fig figcaption{font-size:14.5px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.6}
.card .thumb{display:block;width:calc(100% + 40px);max-width:none;height:auto;margin:-20px -20px 14px;border-radius:15px 15px 0 0;aspect-ratio:600/315;object-fit:cover}
.card{overflow:hidden}
.fig .zoom{display:none}
@media (max-width:760px){.fig .zoom{display:inline}}