@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&display=swap');

body {
  font-family: 'Sarabun', sans-serif;
  background-color: #f8f9fa;
  color: #333;
  /* line-height: 1.5; */
}

/* -----------------------------------------
  ระบบ Auto Numbering (1, 1.1, 1.1.a)
----------------------------------------- */
.manual-content {
  counter-reset: section;
}

/* ปรับหัวข้อให้กะทัดรัด พร้อมสี */
h1 {
  font-size: 1.8rem !important;
  margin-bottom: 1.5rem !important;
  color: #0051ca;
}

h2 {
  font-size: 1.4rem !important;
  margin: 1.5rem 0 0.8rem 0 !important;
  padding-bottom: 0.2rem !important;
  border-bottom: 1px solid #0d6efd;
  color: #0d6efd;
  font-weight: 700;
}

h3 {
  font-size: 1.15rem !important;
  margin: 1rem 0 0.5rem 0 !important;
  color: #495057;
  font-weight: 600;
}

h4 {
  font-size: 1rem !important;
  margin: 0.8rem 0 0.3rem 0 !important;
  color: #6c757d;
  font-weight: 600;
}

/* ตั้งค่าการแสดงเลขลำดับอัตโนมัติ */
.manual-content h2::before {
  counter-increment: section;
  content: counter(section) ". ";
}

.manual-content h3 {
  padding: 7px 0;
  color: rgb(0, 110, 0);
  border-bottom: 1px dashed green;
}
/* .manual-content h3::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
} */

.manual-content h4 {
  padding: 5px 0;
  color: rgb(0, 153, 0);
}

/* .manual-content h4::before {
  counter-increment: subsubsection;
  content: counter(section) "." counter(subsection) "." counter(subsubsection, lower-alpha) " ";
} */

/* -----------------------------------------
       ส่วนตกแต่ง (โค้ด และ กล่องข้อความ)
    ----------------------------------------- */

/* กล่อง Code Block (สีเข้ม + ระยะกระชับ) */
pre {
  background-color: #212529;
  color: #f8f9fa;
  padding: 0.75rem !important;
  margin: 0.5rem 0 !important;
  font-size: 0.85rem !important;
  border-radius: 0.375rem;
}

/* ตัวอักษร Code (สีชมพู) */
code {
  color: #d63384;
}

/* กล่อง Callout (สีเทาอ่อน มีเส้นขอบซ้าย + ระยะกระชับ) */
.callout {
  background-color: #e9ecef;
  border-left: 4px solid #6c757d;
  padding: 0.75rem !important;
  margin: 0.75rem 0 !important;
  border-radius: 0 0.25rem 0.25rem 0;
}


ul > li { margin-top: 4px!important; }
ol > li { margin-top: 4px!important; }