.italic-text {
    font-style: italic;
}

.pdd5{
	 padding-top: 7rem; /* กำหนด padding ด้านบนเป็น 5rem */
  padding-bottom: 7rem; /* กำหนด padding ด้านล่างเป็น 5rem */
}

.pda1 {
	padding: 1rem;
}
.plr1{
  padding-left: 1.5rem; /* กำหนด padding ด้านบนเป็น 5rem */
  padding-right: 1.5rem; /* กำหนด padding ด้านล่างเป็น 5rem */
}

/* กำหนดการจัดการการแสดงของ Card */
.custom-card {
  position: relative;
  width: 90%;
  border: none; /* ปรับขอบของ card */
  overflow: hidden; /* ซ่อนส่วนที่เกินออกไป */
  border-radius: 0 !important; /* ไม่มีมุมโค้ง (ใช้ !important) */
  display: flex; /* ใช้ Flexbox */
  flex-direction: column; /* จัดเรียงในแนวตั้ง */
  justify-content: center; /* จัดตำแหน่งให้ตรงกลางแนวตั้ง */
  align-items: center; /* จัดตำแหน่งให้ตรงกลางแนวนอน */
  height: 100%; /* ให้สูงสุด */
}

/* ปรับให้รูปภาพอยู่กลาง */
.card-img-top {
  width: 100%; /* ให้กว้างสุดตาม container */
  height: auto; /* ปรับความสูงของรูปภาพให้เหมาะสม */
  object-fit: cover; /* ให้รูปภาพไม่ถูกยืดหรือบีบ */
}

/* เนื้อหาภายใน Card */
.card-content-1 {
  position: absolute;
  bottom: 20px; /* เลื่อนเนื้อหาขึ้นจากด้านล่าง */
  left: 1rem;
  width: 100%; /* ความกว้าง 100% */

  border-radius: 0 !important; /* ไม่มีมุมโค้ง (ใช้ !important) */
  text-align: left; /* จัดข้อความให้อยู่กลาง */
}

.card-content-1 h1 {
  font-size: 65px; 
  color: #DFE6E2; /* สีตัวอักษร */
  line-height: 75px;
}

/* สำหรับมือถือ */
@media (max-width: 767px) {
  .card-content-1 h1 {
    font-size: 50px; /* ปรับขนาดฟอนต์เล็กลงสำหรับมือถือ */
    line-height: 50px; /* ปรับ line-height ให้เหมาะสมกับฟอนต์ใหม่ */
  }
}


/* ปุ่มปกติ */
.btn-custom {
    background-color: #003052; /* สีพื้นหลัง */
    color: #D5E70A; /* สีตัวอักษร */
    font-weight: bold; /* ตัวหนังสือหนา */
    padding: 5px 20px; /* ขนาดปุ่ม */
    font-size: 0.9rem; /* ขนาดตัวอักษร */
    border-radius: 30px; /* มุมโค้ง 30px */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็น pointer */
    transition: all 0.3s ease; /* การเปลี่ยนแปลงลื่นไหล */
	border: 1px solid #003052; 
	margin-right: 15px; /* ระยะห่างระหว่างปุ่มในแถวเดียวกัน */
}

/* เปลี่ยนแปลงเมื่อ hover */
.btn-custom:hover {
    background-color: #fff; /* เปลี่ยนเป็นสีขาวเมื่อ hover */
    color: #003052; /* ตัวอักษรเป็นสี #003052 เมื่อ hover */
    border: 1px solid #003052; 
}

/* ปุ่มปกติ */
.btn-primary {
	background-color: #DFE6E2; /* เปลี่ยนเป็นสีขาวเมื่อ hover */
    color: #003052; /* ตัวอักษรเป็นสี #003052 เมื่อ hover */
    border: 1px solid #003052;
    font-weight: bold; /* ตัวหนังสือหนา */
    padding: 8px 20px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดตัวอักษร */
    border-radius: 10px;
    transition: all 0.3s ease; /* การเปลี่ยนแปลงลื่นไหล */
	text-decoration: none; /* ไม่ให้มีขีดเส้นใต้ */
}

/* เปลี่ยนแปลงเมื่อ hover */
.btn-primary:hover {
	background-color: #003052; /* สีพื้นหลัง */
    color: white; /* สีตัวอักษร */
    border: 1px solid #003052; /* ขอบเป็นสี #003052 เมื่อ hover */
}

/* ปุ่มปกติ */
.btn-more {
	background-color: white; /* เปลี่ยนเป็นสีขาวเมื่อ hover */
    color: #003052; /* ตัวอักษรเป็นสี #003052 เมื่อ hover */
    border: 1px solid #003052;
    font-weight: bold; /* ตัวหนังสือหนา */
    padding: 8px 20px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดตัวอักษร */
    border-radius: 10px;
    transition: all 0.3s ease; /* การเปลี่ยนแปลงลื่นไหล */
	text-decoration: none; /* ไม่ให้มีขีดเส้นใต้ */
}

/* เปลี่ยนแปลงเมื่อ hover */
.btn-more:hover {
	background-color: #003052; /* สีพื้นหลัง */
    color: white; /* สีตัวอักษร */
    border: 1px solid #003052; /* ขอบเป็นสี #003052 เมื่อ hover */
}



.no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background-color: transparent;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    color: #072F4F; /* ให้ปุ่มสามขีดเป็นสีขาว */
}

/* Dropdown Content (Submenu) */
.dropdown-menu {
    display: none; /* ซ่อนเมนูตั้งแต่เริ่มต้น */
    position: absolute;
    top: 40px;
    right: 0; /* เปลี่ยนจาก left เป็น right เพื่อให้ไปทางขวา */
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #e3e7e8;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 150px; /* กำหนดความกว้างขั้นต่ำของเมนู */
    border: 2px solid #002244; /* ขอบ 5px สีดำ */
}

.dropdown-menu li {
    border-bottom: 1px solid #d1d5d8;
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu a {
    display: block;
    text-decoration: none;
    color: #002f5d;
    padding: 10px 20px;
    font-size: 16px;
    font-family: 'IBM Plex Sans Thai', sans-serif; /* กำหนดฟอนต์ */
}

.dropdown-menu a.highlight {
    background-color: #002f5d;
    color: #ffffff;
}

.dropdown-menu a:hover {
    background-color: #cfd4d8;
}

/* Dropdown Hover Effect */
.dropdown:hover .dropdown-menu {
    display: block; /* แสดงเมนูเมื่อโฮเวอร์บนปุ่ม */
}



.dropdown-toggle::after {
  content: none; /* ไม่ให้แสดงเครื่องหมายหลัง */
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Thai&display=swap');

/* กำหนดฟอนต์ IBM Plex Thai ให้กับทั้งเว็บไซต์ */
/* โหลดฟอนต์ IBM Plex Sans Thai */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Thai&display=swap');

/* ฟอนต์หลักสำหรับ body */
body {
  font-family: "IBM Plex Sans Thai", serif;
  line-height: 1.6; /* กำหนดความสูงของบรรทัดให้เหมาะสม */
  font-size: 16px; /* ขนาดฟอนต์พื้นฐาน */
  color: #333; /* สีข้อความพื้นฐาน */
  margin: 0;
  padding: 0;
}

/* กำหนดฟอนต์ให้กับหัวข้อ (h1-h6) */
h1, h2, h3, h4, h5, h6 {
  font-family: "IBM Plex Sans Thai", serif;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: bold; /* ตัวอักษรหนา */
  color: #003052; /* สีหัวข้อ */
}

/* ขนาดฟอนต์สำหรับหัวข้อ */
h1 {
  font-size: 2rem; /* ขนาดใหญ่ที่สุดสำหรับ h1 */
}

h2 {
  font-size: 1.75rem; /* ขนาดรองลงมาสำหรับ h2 */
}

h3 {
  font-size: 1.5rem; /* ขนาดรองลงมาสำหรับ h3 */
}

h4 {
  font-size: 1.25rem; /* ขนาดรองลงมาสำหรับ h4 */
}

h5 {
  font-size: 1rem; /* ขนาดรองลงมาสำหรับ h5 */
  color: white; /* สีข้อความ */
}

h6 {
  font-size: 0.75rem; /* ขนาดรองลงมาสำหรับ h6 */
}

/* สำหรับข้อความย่อยทั่วไป (p) */
p {
  font-size: 1rem; /* ขนาดฟอนต์พื้นฐาน */
  color: #003052; /* สีข้อความ */
  margin-bottom: 1rem; /* ระยะห่างด้านล่าง */

}

footer p {
  font-size: 0.75rem; /* ขนาดฟอนต์พื้นฐาน */
  line-height: 0.75; /* กำหนดระยะห่างระหว่างบรรทัดให้เหมาะสม */
  color: #003052; /* สีข้อความ */
  margin-bottom: 1rem; /* ระยะห่างด้านล่าง */
}

.text-right {
  text-align: right; /* จัดข้อความให้ชิดขวา */
}

b {
  font-size: 1rem; /* ขนาดฟอนต์พื้นฐาน */
  line-height: 1.5; /* กำหนดระยะห่างระหว่างบรรทัดให้เหมาะสม */
  color: #003052; /* สีข้อความ */
  margin-bottom: 1rem; /* ระยะห่างด้านล่าง */
   font-weight: bold; /* ตัวอักษรหนา */
}

/* สำหรับรายการ (li) */
ul, ol {
  margin-left: 20px; /* ระยะห่างจากขอบด้านซ้าย */
}

li {
  font-size: 1rem; /* ขนาดฟอนต์ข้อความในรายการ */
  line-height: 1.8; /* ระยะห่างบรรทัด */
  color: #003052; /* สีข้อความ */
  margin-bottom: 0.5rem; /* ระยะห่างระหว่างรายการ */
}

/* ลิงก์ (a) */
a {
  color: #003052; /* สีลิงก์ */
  text-decoration: none; /* ไม่ให้มีขีดเส้นใต้ */
  transition: color 0.3s ease; /* เปลี่ยนสีเมื่อ hover */
}

a:hover {
  color: #D5E70A; /* สีเมื่อ hover */
  text-decoration: underline; /* ขีดเส้นใต้เมื่อ hover */
}

/* ปรับให้ฟอนต์เหมาะสมสำหรับมือถือ */
@media (max-width: 767px) {
  /* ขนาดฟอนต์สำหรับ header และ paragraph */
  h1 {
    font-size: 2.5rem; /* ลดขนาดลงสำหรับมือถือ */
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1.5rem;
  }

  h5 {
    font-size: 1.1rem;
  }

  h6 {
    font-size: 1.0rem;
  }

  p, li {
    font-size: 0.8rem; /* ขนาดฟอนต์ข้อความเล็กลงสำหรับมือถือ */
  }
}

/* CSS สำหรับ p ในหน้าอ่านนิยาย (ที่มี container ครอบ .novel-content) */
.novel-content p {
  font-size: 1.5rem;
  /* หรือขนาดที่ต้องการให้ใหญ่ขึ้น */
  line-height: 2.3rem;
  /* กำหนดระยะห่างบรรทัดให้เหมาะ */
}

/* CSS สำหรับมือถือในหน้าอ่านนิยาย */
@media (max-width: 768px) {
  .novel-content p {
    font-size: 1.5rem;
    line-height: 2.3rem;
  }
}


/* สำหรับมือถือ */
@media (max-width: 767px) {
    footer .container {
        text-align: center; /* จัดข้อความทั้งหมดให้กึ่งกลาง */
		color: white;
    }

    footer .row {
        display: flex; /* ใช้ Flexbox สำหรับการจัดการในแถว */
        flex-direction: column; /* จัดให้คอลัมน์อยู่ในแนวตั้ง */
        align-items: center; /* จัดให้ทุกคอลัมน์อยู่ตรงกลาง */
    }

    footer .col-md-2 {
        margin-bottom: 10px; /* ให้คอลัมน์มีระยะห่างระหว่างกัน */
    }

    footer .col-md-6 {
        text-align: center; /* กึ่งกลางลิงก์ที่อยู่ใน col-md-6 */
        justify-content: center;
    }

    footer .col-12 {
        text-align: center; /* ให้ไอคอนโซเชียลอยู่กึ่งกลาง */
    }
}


.reference-content {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.reference-content h2 {
  font-family: 'Bai Jamjuree', sans-serif;
  margin-bottom: 20px;
}

.reference-content ol {
  padding-left: 20px;
}

.reference-content li {
  margin-bottom: 15px;
  line-height: 1.6;
}

.reference-content ul {
  margin-top: 10px;
  padding-left: 40px;
}

.reference-content a {
  color: #007bff;
  text-decoration: none;
}

.reference-content a:hover {
  text-decoration: underline;
}

.card-body {
  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  // as much space as possible, ensuring footers are aligned to the bottom.
  flex: 1 1 auto;
  
  color: var(--#{$prefix}card-color);
}

.carousel-caption {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

/* สำหรับอุปกรณ์มือถือ */
@media (max-width: 767px) {
  .carousel-caption {
    font-size: 8.9rem; /* ขนาดฟอนต์เล็กลงสำหรับมือถือ */
  }

  .carousel-caption h1 {
    font-size: 2rem; /* ขนาดฟอนต์หัวข้อ */
    color: white; /* สีลิงก์ */
  }

  .carousel-caption p {
    font-size: 0.5rem; /* ขนาดฟอนต์ย่อย */
    color: white; /* สีลิงก์ */
  }
}

/* สำหรับอุปกรณ์ที่มีขนาดหน้าจอใหญ่ขึ้น (เช่น tablet ขึ้นไป) */
@media (min-width: 768px) {
  .carousel-caption {
    font-size: 4rem; /* ขนาดฟอนต์เพิ่มขึ้นสำหรับอุปกรณ์ที่มีขนาดหน้าจอใหญ่ */
  }

  .carousel-caption h1 {
    font-size: 10rem; /* ขนาดฟอนต์หัวข้อใหญ่ขึ้น */
    color: white; /* สีลิงก์ */
  }

  .carousel-caption p {
    color: white; /* สีลิงก์ */
    text-decoration: none; /* ไม่ให้มีขีดเส้นใต้ */
    transition: color 0.3s ease; /* เปลี่ยนสีเมื่อ hover */
    font-size: 1.5rem; /* ขนาดฟอนต์พื้นฐาน */
    line-height: 1.5; /* กำหนดระยะห่างระหว่างบรรทัดให้เหมาะสม */
    font-weight: 300;
    font-style: normal;

  }
}
@media (min-width: 1200px) {
  .container-blog, .container-blog-lg, .container-blog-md, .container-blog-sm, .container-blog-xl {
      max-width: 750px; /* กำหนดความกว้างสูงสุดของคอนเทนเนอร์ที่ 750px */
  }
}

@media (min-width: 992px) {
  .container-blog, .container-blog-lg, .container-blog-md, .container-blog-sm {
      max-width: 960px;
  }
}

@media (min-width: 768px) {
  .container-blog, .container-blog-md, .container-blog-sm {
      max-width: 720px;
  }
}

@media (min-width: 576px) {
  .container-blog, .container-blog-sm {
      max-width: 750px;
  }
}

.container-blog, .container-blog-fluid, .container-blog-lg, .container-blog-md, .container-blog-sm, .container-blog-xl, .container-blog-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x)* .5);
  padding-left: calc(var(--bs-gutter-x)* .5);
  margin-right: auto;
  margin-left: auto;
}


  .form-control.custom-underline {
      background-color: transparent;
      border: none;
      border-bottom: 1px solid #ccc;
      border-radius: 0;
      box-shadow: none;
  }

  .form-control.custom-underline:focus {
      border-bottom: 2px solid #007bff;
      box-shadow: none;
  }

  .input-group-text {
      background-color: transparent;
      border: none;
      border-bottom: 1px solid #ccc;
      border-radius: 0;
  }

    .form-control.custom-underline,
  .form-select.custom-underline {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
  }

  .form-control.custom-underline:focus,
  .form-select.custom-underline:focus {
    border-bottom: 2px solid #007bff;
    box-shadow: none;
  }

  .input-group-text {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }

    .form-select.custom-underline {
      background-color: transparent !important;
      border: none;
      border-bottom: 1px solid #ccc;
      border-radius: 0;
      box-shadow: none;
      padding-right: 2.5rem;
      /* space for dropdown arrow */
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 1rem;
    }

         .intro-preview {
           max-height: 18rem;
           overflow: hidden;
           position: relative;
           transition: max-height 0.3s ease;
         }
    
         .intro-preview.expanded {
           max-height: 1000em;
           /* ขยายเต็ม */
         }


                 .paragraph {
                   text-indent: 1.9em;
                   /* ย่อหน้าประมาณ 2 ตัวอักษร */
                   line-height: 1.7;
                   /* ระยะห่างบรรทัด อ่านง่ายขึ้น */
                   white-space: pre-wrap;
                   /* รักษาช่องว่างและขึ้นบรรทัดใหม่ตามข้อความ */
                    font-family: "Sarabun", serif;
                 }