/* หน้ารวมบทความ */
.blog-wrap { padding: 60px 0; }
.blog-heading { color: orange; text-align:center; margin-bottom: 28px; }

.posts-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.post-card {
  background:#111; border:1px solid #333; border-radius:12px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(255,165,0,.2); }
.post-thumb { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.post-body { padding:14px 16px 18px; text-align:center; }
.post-title { font-size:1.02rem; color:#fff; margin:8px 0 6px; }
.post-excerpt { color:#bbb; font-size:.95rem; line-height:1.5; min-height:3.1em; }
.post-read { color:orange; font-weight:700; font-size:.9rem; display:inline-block; margin-top:10px; }

/* Pagination */
.pagination { display:flex; gap:8px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.page-btn {
  background:#111; color:#fff; border:1px solid #333; padding:8px 12px; border-radius:8px; cursor:pointer;
}
.page-btn.active, .page-btn:hover { background:orange; color:#000; border-color:orange; }

/* หน้าโพสต์เดี่ยว */
.post-wrap { padding:60px 0; }
.post-meta { display:flex; justify-content:space-between; align-items:center; color:#aaa; margin-bottom:8px; }
.back-link { color:orange; text-decoration:none; }
.post-title { color:#ffcc00; text-align:left; font-size:1.8rem; margin:10px 0 12px; }
.post-cover { width:100%; max-width:300px; display:block; border-radius:10px; margin:10px 0 20px; }
.post-content { color:#ddd; line-height:1.8; max-width:900px; }
.post-content h2, .post-content h3 { color:orange; margin-top:24px; }
.post-content ul { padding-left:18px; }

/* Responsive */
@media (max-width:1024px){ .posts-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){
  .posts-grid{ grid-template-columns:1fr; }
  .post-title{ font-size:1.05rem; }
}
/* หัวข้อในหน้าโพสต์ */
.post-content h2{
  background:#0b0b0b;
  border-radius:8px;
  padding:12px 16px;
  color:#ffb000;              /* ส้มเด่น */
  margin:26px 0 12px;
  line-height:1.3;
  border:1px solid #2b2b2b;
}
.post-content ul{ margin: 10px 0 18px; }
.post-content ul li{ margin: 8px 0; color:#ddd; }

/* กล่องไฮไลต์เรืองแสง */
.callout{
  margin:26px 0;
  background:#121212;
  border:1px solid rgba(255,165,0,.45);
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow: 0 0 24px rgba(255,165,0,.15), inset 0 0 12px rgba(255,165,0,.08);
}
.callout h3{
  margin:0 0 10px;
  color:#ffd76a;
}
ul.tick{ list-style:none; padding-left:0; }
ul.tick li{
  position:relative; padding-left:26px; margin:8px 0; color:#e6e6e6;
}
ul.tick li::before{
  content:"✔"; position:absolute; left:0; top:0; color:#ffb000; font-weight:700;
}
.callout .note{ color:#bbb; font-size:.95rem; margin-top:8px; }

/* มือถือ */
@media (max-width: 768px){
  .post-content h2{ font-size:1.05rem; padding:10px 12px; }
  .callout{ padding:14px; }
}
/* จัดทุกอย่างในโพสต์ให้กึ่งกลาง */
.post-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* ให้ข้อความอยู่กึ่งกลาง */
}

/* จำกัดความกว้างเนื้อหาไม่ให้ยืดเต็มจอ */
.post-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: left; /* กลับมาให้ย่อหน้าอยู่ชิดซ้าย อ่านง่าย */
}

/* รูปภาพในโพสต์ */
.post-container img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto 20px;
}