<!-- วางทั้งหมดนี้ในกล่องข้อความโพสต์ได้เลย -->
<link href="https://fonts.googleapis.com/css2?family=Mali:wght@300;400;600;700&family=Sriracha&display=swap" rel="stylesheet">
<style>
/* ===== SCOPE เฉพาะใน .sd-wrap ===== */
.sd-wrap{
max-width:980px; margin:0 auto; background:#fff; border-radius:12px; padding:24px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
font-family:'Mali','Sarabun',system-ui,-apple-system,sans-serif; color:#2b2b2b; line-height:1.7;
}
.sd-wrap *{ box-sizing:border-box; }
/* พาเลทสี */
.sd-wrap{
--c1:#262e4c; /* Cosmic Night */
--c2:#45538a; /* Lunar Shadow */
--c3:#724972; /* Galaxy Mauve */
--c4:#b199db; /* Lilac */
--c5:#e9ccd3; /* Pale Nebula */
}
.sd-title{
text-align:center; font-size:36px; margin:0 0 8px;
font-family:'Sriracha','Mali',cursive; letter-spacing:.02em;
}
.sd-sub{ text-align:center; color:#777; margin:-2px 0 26px; font-size:15px; }
.sd-top{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; margin-bottom:24px; }
.sd-img{ width:100%; height:100%; border-radius:12px; object-fit:cover; display:block; }
.sd-color-list{ display:grid; grid-template-columns:1fr; gap:12px; }
.sd-chip{
display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px;
background:#f7f7f9; border:1px solid #ececf0;
}
.sd-chip-swatch{ width:56px; height:56px; border-radius:10px; flex:0 0 56px; }
.sd-chip > div{ min-width:0; } /* ให้ข้อความด้านขวาห่อบรรทัดได้ */
.sd-chip-code{ font-weight:700; font-size:15px; }
.sd-chip-name{ font-size:13px; color:#6a6a6a; word-break:break-word; }
.sd-samples{ display:flex; gap:22px; justify-content:center; margin:10px 0 26px; flex-wrap:wrap; }
.sd-sample{ font-weight:700; font-size:22px; }
/* ===== บล็อกหัวข้อ + กล่องเนื้อหา (ยืดสูงตามข้อความ) ===== */
.sd-section{ margin-bottom:18px; }
.sd-section-head{
border-radius:12px 12px 0 0; padding:12px 16px; color:#fff; font-weight:800; line-height:1.6;
word-break:break-word;
}
.sd-section-body{
border:1px solid #ececf0; border-top:0; background:#fafbff;
border-radius:0 0 12px 12px; padding:16px;
}
/* ฟุตเตอร์ */
.sd-footer{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sd-foot-box{
border-radius:12px; padding:18px; color:#fff; text-align:center; font-weight:800;
font-family:'Mali','Sarabun',sans-serif;
}
.sd-foot-note{ display:block; font-weight:600; opacity:.9; font-size:12px; margin-top:6px; }
/* มือถือ */
@media (max-width:768px){
.sd-top{ grid-template-columns:1fr; }
.sd-footer{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
.sd-footer{ grid-template-columns:1fr; }
}
</style>
<div class="sd-wrap">
<h2 class="sd-title"><font size="6">สมุดโง่ ๆ ของ มณีกานต์ บุปผชาติ หน้าที่ 31</font></h2>
<div class="sd-sub"><font size="3">นาคคค ผมอยากเจอนาคคค นังคำแก้วมันเป็นงู๊ววว</font></div>
<section class="sd-top">
<!-- เปลี่ยน URL รูปได้ตามต้องการ -->
<img class="sd-img" src="https://img2.pic.in.th/pic/IMG_8406926507c66a18b9c1.jpg" alt="Galaxy">
<div class="sd-color-list">
<div class="sd-chip">
<div class="sd-chip-swatch" style="background:var(--c1)"></div>
<div>
<div class="sd-chip-code">ชื่ออสรุกาย</div>
<div class="sd-chip-name">พญานาค หรือ Nāga</div>
</div>
</div>
<div class="sd-chip">
<div class="sd-chip-swatch" style="background:var(--c2)"></div>
<div>
<div class="sd-chip-code">สังกัด</div>
<div class="sd-chip-name">ท้าวนาคราช</div>
</div>
</div>
<div class="sd-chip">
<div class="sd-chip-swatch" style="background:var(--c3)"></div>
<div>
<div class="sd-chip-code">การพิชิตครั้งแรก</div>
<div class="sd-chip-name">
แม่น้ำเจ้าพระยา ประเทศไทย <a href="https://percyjackson.mooorp.com/forum.php?mod=redirect&goto=findpost&ptid=312&pid=10378" style="font-size: 12px;">[กุญแจนำทาง]</a></div>
</div>
</div>
<div class="sd-chip">
<div class="sd-chip-swatch" style="background:var(--c4)"></div>
<div>
<div class="sd-chip-code">#คำเตือน</div>
<div class="sd-chip-name">ของดีย์ ผมจะเอาอัญมณี วะฮ่ะๆๆๆ </div>
</div>
</div>
<div class="sd-chip">
<div class="sd-chip-swatch" style="background:var(--c5)"></div>
<div>
<div class="sd-chip-code">#เพิ่มเติม</div>
<div class="sd-chip-name">ได้รับตื่นรู้ +1</div>
</div>
</div>
</div>
</section>
<div class="sd-samples">
<span class="sd-sample" style="color:var(--c1)">ง่าย</span>
<span class="sd-sample" style="color:var(--c2)">ก็</span>
<span class="sd-sample" style="color:var(--c3)">เหี้ย</span>
<span class="sd-sample" style="color:var(--c4)">แล้ว</span>
<span class="sd-sample" style="color:var(--c5)">ล่ะ</span>
</div>
<!-- หัวข้อ + เนื้อหา (ยืดตามข้อความอัตโนมัติ) -->
<div class="sd-section">
<div class="sd-section-head" style="background:linear-gradient(90deg,var(--c1),var(--c4))"><font size="4">
เนื้อหา ประวัติอสุรกาย
</font></div>
<div class="sd-section-body"><p><font size="3">พญานาคคือสิ่งมีชีวิตกึ่งเทพกึ่งสัตว์ผู้ทรงอำนาจจากตำนานเอเชียและอินเดีย มีรูปลักษณ์เป็นงูยักษ์ที่มีเกล็ดหลากสีและหงอนอันเป็นสัญลักษณ์แห่งบารมี สามารถแปลงกายเป็นมนุษย์และอาศัยอยู่ในเมืองบาดาล ใต้แหล่งน้ำสำคัญ พวกมันมีบุคลิกที่ลึกลับ เงียบขรึม และเปี่ยมด้วยศักดิ์ศรี โดยยึดมั่นในคำสัตย์เป็นที่สุด หากถูกดูหมิ่นหรือพบคนผิดคำสาบานความโกรธจะปะทุรุนแรงดั่งพายุใต้น้ำ<br><br>
ในตำนานมีนาคราชผู้ยิ่งใหญ่มากมาย เช่นพญาอนันตนาคราช ผู้เป็นบัลลังก์ของพระวิษณุ และพญาวาสุกรี ผู้รับใช้พระศิวะ พญานาคมีความหยิ่งทระนงในสายเลือดที่เชื่อว่าเก่าแก่กว่าเทพเจ้าโอลิมปัส ทำให้พวกมันเป็นศัตรูคู่อาฆาตกับสายเลือดเทพสมุทรทั้งหมด โดยเฉพาะความไม่พอใจที่มหาเทพกรีกมักละเลยคำสัตย์ของตนเอง<br><br>
จุดอ่อนตามธรรมชาติของพญานาคคือพลังงานไฟและความแห้งแล้ง รวมถึงแสงสว่างศักดิ์สิทธิ์ซึ่งสามารถสยบฤทธิ์ของพวกมันได้ หากเหล่านักเดินทางต้องผ่านน่านน้ำแถบเอเชีย การรักษาคำสัตย์และการทำสมาธิอาจเป็นวิธีเดียวที่จะรอดพ้นจากอาญาของท้าวนาคราช</font></p>
</div>
</div>
<div class="sd-section">
<div class="sd-section-head" style="background:linear-gradient(90deg,var(--c2),var(--c5))"><font size="4">
เนื้อหา ประสบการณ์ของคุณ
</font></div>
<div class="sd-section-body">
<p><font size="3">ความโง่ของคนเราคือคนเราอ่ะลืมว่าต้องใช้หนังครอมมิออน ... หึ อดทำแว่นเลยล่ะ ช่างมันเถอะ .... ฮืออ อยากจะร้องไห้ออกมาเป็นสายเลือด เอาเป็นว่า...นังคำแก้วมันเป็นงู๊ววว</font></p>
</div>
</div>
<div class="sd-footer">
<div class="sd-foot-box" style="background:var(--c1)"><font size="2">Cosmic Night
</font><span class="sd-foot-note"><font size="2">RGB 38 46 76</font></span>
</div>
<div class="sd-foot-box" style="background:var(--c2)"><font size="2">Lunar Shadow
</font><span class="sd-foot-note"><font size="2">RGB 69 83 138</font></span>
</div>
<div class="sd-foot-box" style="background:var(--c3)"><font size="2">Galaxy Mauve
</font><span class="sd-foot-note"><font size="2">RGB 114 73 114</font></span>
</div>
<div class="sd-foot-box" style="background:var(--c5); color:#2b2b2b;"><font size="2">Pale Nebula
</font><span class="sd-foot-note"><font size="2">RGB 233 204 211</font></span>
</div>
</div>
</div>