/* ===========================================================================
   คลังความรู้ URANIA — สไตล์ร่วมของช่องบทความ  (urania-labs.com/guide)

   🔑 ทำไมแยกเป็นไฟล์ ไม่ฝังในหน้าเหมือนหน้าขาย:
      หน้าขายมี 9 หน้าและแทบไม่เพิ่ม → ฝังในหน้าคุ้มกว่า (ประหยัด 1 request)
      บทความจะเพิ่มเรื่อยๆ ไม่มีเพดาน → ถ้าฝัง ต้องก๊อป CSS ก้อนเดิมทุกบท
      แก้สีทีต้องไล่แก้ทุกไฟล์ · แยกไว้ = แก้ที่เดียว + เบราว์เซอร์แคชข้ามบทความ

   🎨 โทนสี/ฟอนต์ ยกมาจาก index.html ตัวเดียวกันเป๊ะ ห้ามคิดสีใหม่
   =========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* 🔴 ค่าพวกนี้ **วัดจากหน้าขายจริง** ด้วย getComputedStyle ไม่ได้ก๊อปจากบล็อก :root แรกในไฟล์
     เพราะ cut.html มี :root ซ้อนกัน 5 ชั้น ชั้นท้ายสุดทับเป็นโทนกลาง #09090c
     ⇒ ถ้าเชื่อชั้นแรก (#0b0716 ม่วง) หน้านี้จะพื้นคนละสีกับทั้งเว็บ — ผมพลาดตรงนี้มารอบนึงแล้ว */
  --bg:#09090c; --panel:#111114; --panel2:#15151a;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --vio:#b794f6; --vio2:#9f6bff; --gold:#e7c873; --cta:#6d28d9;
  --txt:#ecebf2; --txt2:#c4bed4; --muted:#9a93ad; --muted2:#8f899f;
  --grad:linear-gradient(135deg,#7c3aed,#5b21b6 62%,#4c1d95);
  --e-out:cubic-bezier(.23,1,.32,1);
  --fs-lead:16px; --fs-body:14.5px; --fs-sm:13px; --fs-xs:11.5px;
  --measure:68ch;
}

/* 🔴 7 ก.ย. — David: "คลังความรู้เล็กสุด" · ไม่ใช่ขนาดกรอบ แต่เป็นขนาดตัวอักษร
   ทุกหน้าในเว็บขยายตัวอักษรตามจอ (13 → 14 → 15px) แต่หน้านี้ผมตั้ง 13px ตายตัว
   ⇒ บนจอ 1600 ขึ้นไป ตัวหนังสือในเมนูหน้านี้เล็กกว่าทุกหน้าอยู่หน้าเดียว
   ยกสเกลเดียวกับหน้าขายมาทั้งชุด (ค่าจาก cut.html ห้ามคิดเลขเอง) */
@media(min-width:1600px){:root{--fs-lead:17.5px;--fs-body:16px;--fs-sm:14px;--fs-xs:12.5px}}
@media(min-width:1900px){:root{--fs-lead:19px;--fs-body:17px;--fs-sm:15px;--fs-xs:13.5px}}

/* 🔴 7 ก.ย. 2026 — David เห็นแถบเมนูหน้านี้ "เลื่อนไปทางขวานิดหน่อย" เทียบกับหน้าอื่น
   ต้นเหตุไม่ใช่ CSS ของแถบเมนู แต่เป็น **แถบเลื่อน**:
   หน้าคลังความรู้ตอนนี้ยังเป็น coming soon เนื้อหาสั้นกว่าความสูงจอ ⇒ เบราว์เซอร์ไม่ขึ้นแถบเลื่อน
   ⇒ พื้นที่จอกว้างกว่าหน้าอื่นราว 15px ⇒ แคปซูลที่จัดกึ่งกลางเลยเลื่อนขวา ~8px
   (เห็นชัดที่มือถือด้วย: หน้านี้แคปซูลกว้าง 355 ส่วนหน้าบทความที่ยาวกว่าได้ 340 = ต่าง 15px พอดี)
   ✅ จองที่ให้แถบเลื่อนไว้เสมอ หน้าสั้น-หน้ายาวจะวางตรงกันเป๊ะ
   ℹ️ พอมีบทความจริงหลายบท หน้านี้จะยาวเองและหายไปโดยปริยาย แต่กันไว้ดีกว่า */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Inter','Anuphan',sans-serif;
  /* 🔴 ไทยต้องการ line-height สูงกว่าอังกฤษ เพราะมีสระบน-ล่างซ้อนกัน 2 ชั้น
     แต่ห้ามตั้งที่ body — มันไหลไปโดนแถบเมนูด้วย ปุ่มสูงขึ้น 4px ทั้งแถบเลยหนากว่าหน้าอื่น
     (David ทัก 6 ก.ย.: "บางหน้าใหญ่ บางหน้าเล็กกว่า") ⇒ body ใช้ 1.65 เท่าทั้งเว็บ
     ค่าอ่านสบาย 1.9 ย้ายไปไว้ที่ .art / .hero / .item เท่านั้น */
  line-height:1.65; font-size:16.5px; overflow-x:hidden;
  /* 🔴 ห้ามใส่แสงม่วงที่พื้นหลัง — วัดแล้วหน้าขายทุกหน้าใช้ background-image:none พื้นเรียบล้วน
     ผมเผลอก๊อป radial-gradient จาก index.html ชุดเก่ามา เลยเป็นหน้าเดียวในเว็บที่พื้นมีแสง */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:var(--measure);margin-inline:auto}

/* ===== แถบบน ===== */
/* ===========================================================================
   แถบเมนู — สกัด CSS มาจาก cut.html ทั้งชุด (สคริปต์ scratchpad/extract_nav.py)

   🔴 ห้ามเขียนขึ้นเองใหม่ · David ทัก 6 ก.ย.: "tab เมนูไม่เหมือนเพื่อนเลย"
      รอบแรกผมทำแคปซูลเองจากศูนย์ ⇒ ไม่มีเมนูสินค้ากดลง ไม่มีปุ่ม TikTok และพื้นคนละสี
   🔴 รอบสองยังพัง เพราะตัวสกัดไม่ได้ลบคอมเมนต์ก่อนแยกกฎ — คอมเมนต์มี { } อยู่ข้างใน
      กฎเลยขาดกลางคัน CSS เสียไวยากรณ์ แล้วกฎถัดไปตายยกแถบ (.tt หายทั้งกฎ ปุ่มกลายเป็นข้อความเปล่า)
      ⇒ ตัวสกัดตอนนี้มีด่านเช็ค: ปีกกาสมดุล + ต้องเจอ .tt{ .navmenu{ .ndp{ .nav .wrap

   ⚠️ หน้าขายแก้แถบเมนูเมื่อไหร่ ต้องรันตัวสกัดใหม่แล้ววางทับตรงนี้
      (repo นี้ก๊อปแถบเมนูซ้ำทุกหน้าอยู่แล้ว 8 ชุด — เพิ่มชุดที่ 9 คือทำตามแบบบ้านนี้)
   =========================================================================== */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:rgba(9,8,15,.72);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 22px}
.nav img{height:38px;filter:drop-shadow(0 0 12px rgba(139,92,246,.4))}
.brandname{font-family:'Inter','Anuphan';font-weight:600;font-size:var(--fs-body);letter-spacing:.16em;margin-left:10px}
.navleft{display:flex;align-items:center}
.tt{font-family:'Inter','Anuphan';font-weight:500;font-size:var(--fs-sm);border:1px solid var(--line);padding:8px 16px;border-radius:999px;color:var(--vio);transition:.25s}
.tt:hover{background:rgba(159,107,255,.12);box-shadow:0 0 20px rgba(159,107,255,.25)}
@media(max-width:760px){.brandname{display:none}}
.nav{background:rgba(9,8,15,.7);border-bottom:0;position:sticky;transition:transform .32s var(--e-out)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,rgba(167,139,250,.45),rgba(159,107,255,.5),rgba(139,92,246,.45),transparent)}
.nav .wrap{max-width:1080px;margin:0 auto;padding:11px 24px}
.nav img{filter:none;height:30px;width:auto;display:block}
.topbar{position:sticky;top:0;z-index:90;background:rgba(9,8,15,.7);border-bottom:0;transition:transform .32s var(--e-out)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.45),rgba(159,107,255,.5),rgba(139,92,246,.45),transparent)}
.topin{max-width:1080px;padding:11px 24px}
.topbar img,.topin img{height:30px;width:auto;display:block}
.navleft{display:inline-flex;align-items:center;gap:10px}
.keybtn{display:inline-flex;align-items:center;gap:7px;font-family:'Inter','Anuphan',sans-serif;font-weight:700;font-size:var(--fs-sm);white-space:nowrap;border:0}
body.ttb-on .topbar{top:52px}
body.scrolled:not(.nav-open) .nav,body.scrolled:not(.nav-open) .topbar{transform:translateY(-115%)}
body.scrolled:not(.nav-open).ttb-on .nav,body.scrolled:not(.nav-open).ttb-on .topbar{transform:translateY(calc(-115% - 52px))}
body.nav-open .nav .wrap{padding-right:74px}
.nav .brandname,.topbar .brandname{font-family:'Inter','Anuphan',sans-serif;font-weight:600;font-size:var(--fs-body);letter-spacing:.1em;color:var(--txt);margin:0}
.navmenu{display:flex;align-items:center;gap:6px}
.navmenu a:not(.tt){display:inline-flex;align-items:center;gap:6px;font-family:'Inter','Anuphan',sans-serif;font-size:var(--fs-sm);font-weight:500;color:var(--txt2);padding:8px 12px;border-radius:10px;transition:color .2s var(--e-out),background .2s var(--e-out)}
.navmenu a:not(.tt) svg{width:15px;height:15px;opacity:.7;transition:opacity .2s var(--e-out)}
.nvarr{font-size:1.05em;line-height:1;opacity:.6;transition:opacity .2s,transform .2s var(--e-out)}
.navmenu a:not(.tt):hover .nvarr{opacity:1;transform:translateX(-2px)}
.navmenu a:not(.tt):hover{color:#fff;background:rgba(255,255,255,.06)}
.navmenu a:not(.tt):hover svg{opacity:1}
@media(max-width:560px){.navmenu .ttw{display:none}}
.navmenu a.active{color:#fff}
.navmenu a[href="scout.html"],.navmenu a[href="express.html"]{min-width:auto}
.navmenu .tt{display:inline-flex;align-items:center;justify-content:center;min-width:auto}
.navmenu a.keybtn{min-width:auto;justify-content:center}
.navmenu a.keybtn{color:#0e0a1c;background:var(--cta);font-size:var(--fs-sm);padding:8px 15px;border-radius:999px;
 box-shadow:0 6px 16px rgba(159,107,255,.2);transition:transform .16s var(--e-out),filter .2s var(--e-out)}
.navmenu a.keybtn:hover{color:#0e0a1c;background:var(--cta);filter:brightness(1.05)}
.navmenu a.keybtn:active{transform:scale(.97)}
.navmenu a.keybtn svg{width:15px;height:15px;display:inline;opacity:.78}
body.ttb-on .nav{top:52px}
.tt{font-family:'Inter','Anuphan',sans-serif;font-size:var(--fs-sm);border-color:rgba(255,255,255,.14);color:var(--vio);padding:8px 15px}
.tt:hover{background:rgba(159,107,255,.12);box-shadow:none}
@media(max-width:600px){.nav .wrap,.topin{padding:9px 14px;justify-content:flex-start}.navmenu{gap:0;flex-wrap:nowrap;flex:1}.navmenu .tt,.navmenu a.keybtn{margin-left:auto}.navmenu a:not(.tt){padding:6px 7px;font-size:var(--fs-xs);white-space:nowrap;gap:0}.navmenu a:not(.tt) svg{display:none}.nvarr{display:none}.brandname{display:none}.tt{padding:6px 10px;font-size:var(--fs-xs);white-space:nowrap}.navmenu a.keybtn{padding:6px 10px;font-size:var(--fs-xs)}}
@media(max-width:600px){body.ttb-on .nav,body.ttb-on .topbar{top:52px}}
.cta:focus-visible,.sticky button:focus-visible,.buybar button:focus-visible,.navmenu a.keybtn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nav,.topbar{position:fixed;top:14px;left:0;right:0;z-index:40;background:none!important;border:0!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none;box-shadow:none!important}
.nav::after,.topbar::after{display:none!important}
.nav .wrap,.topbar .topin{pointer-events:auto;position:relative;max-width:1040px;margin:0 22px;border-radius:999px;
 padding:8px 9px 8px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;
 background:rgba(13,11,20,.66);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.09),0 12px 40px -12px rgba(0,0,0,.6);
 transition:max-width .55s cubic-bezier(.77,0,.175,1),padding .55s cubic-bezier(.77,0,.175,1),background .4s}
@media(min-width:1085px){.nav .wrap,.topbar .topin{margin:0 auto}}
.nav .wrap::before,.topbar .topin::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.08) 82%,rgba(255,255,255,.28) 100%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
body.scrolled .nav .wrap,body.scrolled .topbar .topin{max-width:820px;padding:5px 6px 5px 15px;background:rgba(13,11,20,.78)}
body.ttb-on .nav,body.ttb-on .topbar{top:60px}
.nav .navleft img,.topbar .navleft img{filter:none}
@media(max-width:560px){.nav,.topbar{top:8px}.nav .wrap,.topbar .topin{margin:0 10px;padding:6px 7px 6px 14px}body.scrolled .nav .wrap,body.scrolled .topbar .topin{padding:5px 6px 5px 12px}}
body.scrolled:not(.nav-open) .nav,body.scrolled:not(.nav-open) .topbar,
body.scrolled:not(.nav-open).ttb-on .nav,body.scrolled:not(.nav-open).ttb-on .topbar{transform:none}
.navmenu .nd{position:relative;display:inline-flex}
.navmenu .ndlink{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:0;background:none;
 font-family:'Inter','Anuphan',sans-serif;font-weight:600;font-size:var(--fs-sm,14px);color:var(--txt,#ecebf2);
 padding:8px 14px;border-radius:999px;transition:background .2s,color .2s;-webkit-font-smoothing:antialiased}
.navmenu .ndlink:hover,.navmenu .nd.open .ndlink{background:rgba(255,255,255,.09);color:#fff}
.navmenu .ndlink svg{transition:transform .25s cubic-bezier(.23,1,.32,1)}
.navmenu .nd:hover .ndlink svg,.navmenu .nd.open .ndlink svg{transform:rotate(180deg)}
.navmenu .ndp{position:absolute;top:calc(100% + 12px);right:0;z-index:60;
 width:min(560px,calc(100vw - 36px));padding:10px;border-radius:18px;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;grid-auto-rows:1fr;
 opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);
 transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .3s cubic-bezier(.23,1,.32,1),visibility 0s .22s;
 background:rgba(13,11,20,.97);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
 border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.navmenu .ndp::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.navmenu .nd:hover .ndp,.navmenu .nd.open .ndp{opacity:1;visibility:visible;pointer-events:auto;transform:none;
 transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .3s cubic-bezier(.23,1,.32,1),visibility 0s}
.navmenu .ndp a{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:1px;
 align-items:center;padding:10px 12px;border-radius:14px;color:var(--txt,#ecebf2);text-decoration:none;min-width:0;
 border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);transition:background .2s,border-color .2s,transform .2s}
.navmenu .ndp a:hover{background:rgba(255,255,255,.06);border-color:color-mix(in srgb,var(--ac) 45%,transparent);transform:translateY(-1px)}
.navmenu .ndp a img{grid-row:1/3;width:38px;height:38px;object-fit:contain;border-radius:10px;padding:4px;
 background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.navmenu .ndp a b{font-family:'Inter','Anuphan',sans-serif;font-weight:700;font-size:var(--fs-sm,14px);letter-spacing:.02em;
 color:var(--ac,#ddd6fe);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navmenu .ndp a span{font-size:var(--fs-xs,11.5px);color:var(--muted2,#8f899f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navmenu .ndp a span i{font-style:normal;margin-left:6px;color:var(--ac);opacity:.9}
.navmenu .ndp a[href="prime.html"]{border-color:color-mix(in srgb,var(--ac) 60%,transparent);
 background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 22%,transparent),color-mix(in srgb,var(--ac) 6%,transparent) 70%);
 box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 25%,transparent),0 12px 30px -14px color-mix(in srgb,var(--ac) 80%,transparent)}
.navmenu .ndp a[href="prime.html"] b{color:#fff}
.navmenu .ndp a[href="prime.html"] img{border-color:color-mix(in srgb,var(--ac) 60%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--ac) 55%,transparent)}
.navmenu .ndp a.cur{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
@media(max-width:760px){.navmenu .ndp{position:fixed;top:66px;left:12px;right:12px;width:auto;max-height:calc(100vh - 92px);overflow-y:auto;
  grid-template-columns:1fr;transform:translateY(6px)}body.ttb-on .navmenu .ndp{top:118px}.navmenu .nd:hover .ndp{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px)}.navmenu .nd.open .ndp{opacity:1;visibility:visible;pointer-events:auto;transform:none}.navmenu .ndlink{padding:7px 10px}}
.nav .navmenu .ndcourse,.topbar .navmenu .ndcourse{color:var(--txt,#ecebf2);font-weight:600}
.nav .navmenu .ndcourse:hover,.topbar .navmenu .ndcourse:hover{color:#fff}
.navmenu .ndcourse{display:inline-flex;align-items:center;font-family:'Inter','Anuphan',sans-serif;font-weight:600;
 font-size:var(--fs-sm,14px);color:var(--txt,#ecebf2);text-decoration:none;white-space:nowrap;padding:8px 14px;border-radius:999px;
 transition:background .2s,color .2s;-webkit-font-smoothing:antialiased}
.navmenu .ndcourse:hover{background:rgba(255,255,255,.09);color:#fff}
@media(max-width:560px){.navmenu .ndcourse{padding:7px 9px}}


/* ปุ่มเมนูลอย + สถานะเลื่อนแล้ว — มาคู่กับสคริปต์ IntersectionObserver ท้ายหน้า
   ถ้าเอา CSS มาแต่ไม่เอาสคริปต์ แคปซูลจะไม่หดตอนเลื่อน = ขนาดไม่ตรงกับหน้าอื่น */
#navtoggle{position:fixed;top:14px;right:16px;z-index:70;display:none;align-items:center;justify-content:center;width:44px;height:44px;
 border-radius:12px;background:rgba(18,14,30,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border:1px solid rgba(159,107,255,.32);color:var(--vio);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .16s var(--e-out)}
#navtoggle:active{transform:scale(.94)}
#navtoggle svg{width:22px;height:22px}
#navtoggle .ic-x{display:none}
body.scrolled #navtoggle{display:flex}
body.nav-open #navtoggle .ic-menu{display:none}
body.nav-open #navtoggle .ic-x{display:block}
body.nav-open .nav .wrap{padding-right:74px}
body.ttb-on #navtoggle{top:58px}
#navtoggle{display:none!important}

/* ===== หัวหน้ารวม ===== */
/* 🔴 .nav เป็น position:fixed (กฎท้ายสุดทับ sticky) ⇒ ไม่กินที่ในสายเนื้อหา
   ถ้าเว้นระยะบนไม่พอ พาดหัวจะมุดเข้าไปใต้แถบเมนู (David ทัก 7 ก.ย. — ที่ 968px เหลื่อม 8px จริง)
   ค่านี้เทียบจากหน้าอื่น: ระยะจากขอบล่างแถบเมนูถึง H1 ราว 130-160px */
.hero{padding:clamp(150px,20vw,215px) 0 clamp(30px,4vw,44px)}
.hero h1{font-size:clamp(30px,5.4vw,46px);font-weight:700;line-height:1.22;letter-spacing:-.4px}
.hero p{color:var(--muted);margin-top:14px;font-size:17px;max-width:60ch}

/* ===== รายการบทความ ===== */
.list{display:grid;gap:14px;padding-bottom:clamp(60px,9vw,110px)}
.item{display:block;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:16px;padding:22px 24px;transition:.22s}
.item:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 12px 34px rgba(159,107,255,.16)}
.item h2{font-size:19px;font-weight:600;line-height:1.42;letter-spacing:-.2px;text-wrap:balance}
.item p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-top:8px;text-wrap:pretty}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted2);margin-bottom:9px}
.meta .tag{color:var(--vio);border:1px solid var(--line);border-radius:6px;padding:1px 8px}
.empty{border:1px dashed var(--line2);border-radius:16px;padding:34px 24px;text-align:center;color:var(--muted)}

/* ===== ตัวบทความ ===== */
.art{padding:clamp(132px,17vw,190px) 0 clamp(60px,9vw,110px)}   /* เว้นที่ให้แถบเมนู fixed เหมือน .hero */
.art h1{font-size:clamp(27px,4.6vw,40px);font-weight:700;line-height:1.28;letter-spacing:-.3px;text-wrap:balance}
.art .sub{color:var(--muted);font-size:17px;margin-top:14px;text-wrap:pretty}
.art h2{font-size:clamp(21px,3vw,26px);font-weight:600;line-height:1.35;margin:46px 0 14px;
  padding-top:26px;border-top:1px solid var(--line);letter-spacing:-.2px;text-wrap:balance;scroll-margin-top:76px}
.art h3{font-size:18.5px;font-weight:600;margin:30px 0 10px;color:var(--txt);scroll-margin-top:76px}
.art p{margin:15px 0;color:var(--txt2);text-wrap:pretty}
.art strong,.art b{color:var(--txt);font-weight:600}
.art ul,.art ol{margin:15px 0 15px 21px;color:var(--txt2)}
.art li{margin:8px 0}
.art li::marker{color:var(--vio)}
.art a:not(.btn){color:var(--vio);border-bottom:1px solid rgba(159,107,255,.35);transition:.18s}
.art a:not(.btn):hover{border-bottom-color:var(--vio)}
.art hr{border:0;border-top:1px solid var(--line);margin:38px 0}

/* คำที่ต้องพิมพ์ตามเป๊ะ — ให้ต่างจากข้อความรอบข้างชัดๆ จะได้ก๊อปไม่ผิด */
/* 🔴 ไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์เลยตัดบรรทัดกลางคำได้เอง
   เจอจริงในหน้านี้: “ตะ / กร่า” และพาดหัวที่ลงท้ายบรรทัดด้วย “คำ” โดดๆ
   .nbw = ครอบคำสั้นๆ ที่ตัดแล้วอ่านผิดความหมาย ห้ามครอบข้อความยาว (มือถือจะล้นขอบ) */
.nbw{white-space:nowrap}

.k{white-space:nowrap;font-family:'Inter',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;
  background:rgba(159,107,255,.12);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--txt)}

/* กล่องเน้น */
.note{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;margin:26px 0}
.note.warn{border-color:rgba(231,200,115,.34);background:rgba(231,200,115,.06)}
.note p:first-child{margin-top:0} .note p:last-child{margin-bottom:0}
.note .h{font-weight:600;color:var(--txt);margin-bottom:7px;display:block}

/* ตาราง — บนมือถือให้เลื่อนในกล่องตัวเอง ห้ามดันหน้าให้ล้น */
.tw{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:14px;
  -webkit-overflow-scrolling:touch}
.art table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.art th,.art td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.art thead th{background:rgba(159,107,255,.09);color:var(--txt);font-weight:600;font-size:13px;white-space:nowrap}
.art tbody tr:last-child td{border-bottom:0}
.art td:first-child{color:var(--txt);font-weight:500}

/* ===== สารบัญ ===== */
.toc{background:rgba(23,16,41,.6);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:30px 0}
.toc .h{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--vio);font-weight:600;margin-bottom:11px}
.toc ol{margin:0;padding-left:20px;color:var(--txt2);font-size:15px}
.toc li{margin:6px 0}
.toc a{border-bottom:1px solid transparent;transition:.18s}
.toc a:hover{color:var(--vio);border-bottom-color:var(--line2)}

/* ===== ท้ายบทความ ===== */
.end{margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}
.btn{display:inline-block;background:var(--grad);color:#fff;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:12px;transition:.22s;border:1px solid rgba(159,107,255,.5)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(124,58,237,.36)}
.btn.ghost{background:transparent;color:var(--txt2);border-color:var(--line2)}
.btn.ghost:hover{color:var(--txt);box-shadow:none;background:rgba(159,107,255,.1)}
.btnrow{display:flex;flex-wrap:wrap;gap:11px;margin-top:18px}

/* 📦 ที่ว่างสำหรับโฆษณา (AdSense) ในอนาคต — ตอนนี้ไม่มีอะไรอยู่ ไม่กินที่
   วันไหนจะเปิดจริง ค่อยวางสคริปต์ในกล่องนี้ ไม่ต้องรื้อเลย์เอาต์ */
.adslot{margin:36px 0;min-height:0}
.adslot:empty{display:none}

/* ===== ท้ายเว็บ ===== */
.foot{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted2);font-size:13px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.foot a:hover{color:var(--vio)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ===== ปิดท้าย ===== */
/* 🔴 7 ก.ย. — ตรงนี้เคยมีกฎล็อกแคปซูลเป็น 1080×61 ผมลบทิ้งแล้ว
   เพราะค่านั้นมาจากการวัดที่ผิด (iframe + document.write สไตล์โหลดไม่ทัน)
   มาตรฐานจริงของเว็บคือ **1040 × 55** ⇒ ปล่อยให้รับกฎบ้านมาตรงๆ ดีที่สุด
   ⚠️ ห้ามเขียนกฎล็อกขนาดแถบเมนูทับที่นี่อีก — หน้าอื่นเปลี่ยนเมื่อไหร่ หน้านี้จะเพี้ยนตามไม่ทัน */
/* เนื้อหาที่เป็นตัวหนังสือยาว ใช้ระยะบรรทัดแบบอ่านสบาย (ห้ามตั้งที่ body มันไหลไปโดนเมนู) */
.art,.hero p,.item p,.toc,.note,.foot{line-height:1.9}
.art h1,.art h2,.art h3,.hero h1,.item h2{line-height:1.3}

/* 🔤 7 ก.ย. 2026 — แถบเมนู: ตัวอักษร 13px เล็กเกินไปสำหรับไทย (David: "อ่านไม่ออก")
   และหน้าแรกดูใหญ่กว่าหน้าอื่นเพราะ **หนา 600 + ช่องไฟ 14px** ไม่ใช่เพราะขนาดตัวอักษร
   ⇒ ยกสเปกหน้าแรกมาใช้ทุกหน้า: 15px · หนา 600 · ช่องไฟ 8px 14px
   ⚠️ จอคอมเท่านั้น — มือถือ 375px แถบเมนูเต็มพอดี ขยายแล้วปุ่มขวาตกขอบ */
@media(min-width:601px){
  .navmenu a:not(.tt),.navmenu .ndlink,.navmenu .tt,.nvm .nl,.nvr .go{font-size:15px;font-weight:600}
  .navmenu a:not(.tt),.navmenu .ndlink,.nvm .nl{padding:8px 14px}
}
@media(min-width:1600px){
  .navmenu a:not(.tt),.navmenu .ndlink,.navmenu .tt,.nvm .nl,.nvr .go{font-size:16px}
}