/* ======================================================
   article.css — สไตล์หน้าบทความของดวงพลัส
   ยกมาจาก <style> เดิมในหน้าบทความ ไม่ได้แก้กฎใด ๆ
   แยกออกมาเป็นไฟล์เดียวเพื่อให้ห้องเขียนสร้างหน้าใหม่ได้โดยหน้าตาเหมือนเดิมเป๊ะ
   โหลดต่อจาก css/style.css เสมอ
   ====================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0d0916;--bg2:#140e20;--card:#1a1229;--card2:#221735;--gold:#d4af37;--gold-l:#f0d98c;--line:rgba(212,175,55,.22);--text:#f2ecdf;--muted:#9a91ad;--grad:linear-gradient(135deg,#f5e08a 0%,#d4af37 45%,#a07d1c 100%)}
body{background:var(--bg);color:var(--text);font-family:'Sarabun',sans-serif;line-height:1.85}
h1,h2,h3,h4{font-family:'Kanit',sans-serif;font-weight:600}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:50;background:rgba(13,9,22,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Kanit',sans-serif;font-size:21px;font-weight:700;color:var(--gold-l)}
.nav-links{display:flex;gap:20px;margin-left:auto}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
.nav-links a.active{color:var(--gold-l);border-bottom-color:var(--gold)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.ad{border:1.5px dashed rgba(212,175,55,.4);color:#7d7490;display:grid;place-items:center;border-radius:12px;font-size:13px;letter-spacing:1.5px}
.wrap{display:grid;grid-template-columns:1fr 320px;gap:34px;margin-top:34px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--gold-l);text-decoration:none}
article h1{font-size:32px;line-height:1.4;font-weight:700;margin:12px 0 14px}
.meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13.5px;margin-bottom:14px}
.meta b{color:var(--gold-l);font-family:'Kanit',sans-serif;font-weight:500}
.tagdesc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tag{font-size:12.5px;font-family:'Kanit',sans-serif;color:var(--gold-l);border:1px solid var(--line);background:rgba(212,175,55,.08);padding:4px 14px;border-radius:99px}
article h2{font-size:23px;color:var(--gold-l);margin:30px 0 10px;scroll-margin-top:88px}
article h3{font-size:19px;color:var(--gold-l);margin:24px 0 8px;scroll-margin-top:88px}
article p{font-size:16px;color:#ddd6c8;margin-bottom:14px}
article ul,article ol{margin:0 0 14px 24px;color:#ddd6c8;font-size:16px}
article li{margin-bottom:6px}
p.lead{font-size:17.5px;color:#e8e1d2;border-left:3px solid var(--gold);padding-left:18px;margin-bottom:22px}
p.note{background:rgba(212,175,55,.07);border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-size:15px}
article a{color:var(--gold-l)}
/* การ์ดไพ่ */
.tcard{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;padding:20px 22px;margin-bottom:16px;scroll-margin-top:88px}
.tcard img{width:120px;height:auto;border-radius:10px;display:block;border:1px solid var(--line)}
.tcard h3{margin:0 0 2px;font-size:19px}
.tcard .en{font-size:13px;color:var(--muted);font-family:'Kanit',sans-serif;margin-bottom:8px}
.tcard p{font-size:15.5px;margin-bottom:8px}
.tcard .kw{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.tcard .kw span{font-size:12.5px;font-family:'Kanit',sans-serif;padding:3px 12px;border-radius:99px;border:1px solid var(--line);color:var(--gold-l);background:rgba(212,175,55,.08)}
.tcard .rev{color:#b8aecb}
.tcard .rev b{color:#ff9aa6;font-family:'Kanit',sans-serif;font-weight:500}
.tcard .up b{color:#8ee8b0;font-family:'Kanit',sans-serif;font-weight:500}
.share{display:flex;gap:10px;margin:30px 0;flex-wrap:wrap}
.share a{font-size:13.5px;color:var(--gold-l);border:1px solid var(--line);padding:8px 18px;border-radius:99px;text-decoration:none}
aside .box{padding:22px 24px;margin-bottom:22px}
aside h3{font-size:17px;color:var(--gold-l);margin-bottom:12px}
.toc a{display:block;font-size:14px;color:var(--muted);text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.toc a.on{color:var(--gold-l)}
.rel{display:flex;gap:12px;margin-bottom:14px;text-decoration:none;color:var(--text)}
.rel .t{width:64px;height:64px;flex:none;border-radius:12px;background:linear-gradient(135deg,#2a1f42,#3b2a56);display:grid;place-items:center;font-size:24px;color:rgba(240,217,140,.5)}
.rel h4{font-size:13.5px;line-height:1.45;font-weight:500}
.rel span{font-size:12px;color:var(--muted)}
.sticky{position:sticky;top:88px}
footer{background:var(--bg2);border-top:1px solid var(--line);padding:26px 0;margin-top:50px;text-align:center;color:#6c6480;font-size:13px}
@media(max-width:900px){.wrap{grid-template-columns:1fr}.sticky{position:static}}
@media(max-width:640px){article h1{font-size:25px}.tcard{grid-template-columns:88px 1fr;padding:16px 16px}.tcard img{width:88px}}
/* ── ตารางในบทความ (ตัวแปลงมาร์กดาวน์ครอบ .mdtable-wrap มาให้แล้ว) ── */
.mdtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.mdtable{width:100%;min-width:460px;border-collapse:collapse;font-size:15px}
.mdtable th,.mdtable td{padding:11px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;line-height:1.65;color:#ddd6c8}
.mdtable th{font-family:'Kanit',sans-serif;font-weight:500;font-size:14.5px;color:var(--gold-l);background:rgba(212,175,55,.08);white-space:nowrap}
.mdtable tbody tr:last-child td{border-bottom:0}
.mdtable tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
article h2{scroll-margin-top:88px}
@media(max-width:640px){.mdtable th,.mdtable td{padding:9px 11px;font-size:14.5px}}