@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;
}


.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: 86px; 
  color: #DFE6E2; /* สีตัวอักษร */
  line-height: 86px;
}

/* สำหรับมือถือ */
@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 {

  line-height: 1.6; /* กำหนดความสูงของบรรทัดให้เหมาะสม */
  font-size: 16px; /* ขนาดฟอนต์พื้นฐาน */
  color: #333; /* สีข้อความพื้นฐาน */
  margin: 0;
  padding: 0;

  font-weight: 100;
  font-style: normal;
}

.sarabun-thin {
  font-family: "Sarabun", serif;
  font-weight: 100;
  font-style: normal;
}

/* กำหนดฟอนต์ให้กับหัวข้อ (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; /* สีหัวข้อ */
  line-height: 1.5; /* กำหนดระยะห่างระหว่างบรรทัดให้เหมาะสม */
}

/* ขนาดฟอนต์สำหรับหัวข้อ */
h1 {
  font-size: 2.5rem; /* ขนาดใหญ่ที่สุดสำหรับ 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 {
  border-left: 1px solid #003052;
    padding-left: 10px;
  font-size: 1rem; /* ขนาดรองลงมาสำหรับ h6 */
  color:3971a3;
  font-style: italic;
  font-weight: 300;
}

/* สำหรับข้อความย่อยทั่วไป (p) */
p {
  font-size: 1.1rem; /* ขนาดฟอนต์พื้นฐาน */
  line-height: 2rem; /* กำหนดระยะห่างระหว่างบรรทัดให้เหมาะสม */
  color: black; /* สีข้อความ */
  margin-bottom: 1rem; /* ระยะห่างด้านล่าง */
  font-weight: 500;
  font-style: normal;
    font-family: "Sarabun", serif;
}



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

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

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

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

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

/* ลิงก์ (a) */

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

.reference-content a
{
  color: #003052; /* สีลิงก์ */
  text-decoration: none; /* ไม่ให้มีขีดเส้นใต้ */
  transition: color 0.3s ease; /* เปลี่ยนสีเมื่อ hover */
  font-size: 12px; /* ขนาดฟอนต์พื้นฐาน */
  line-height: 1.4; /* กำหนดระยะห่างระหว่างบรรทัดให้เหมาะสม */
  font-weight: 200;
  font-style: normal;
    font-family: "Sarabun", serif;
  
}

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

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

  h2 {
    font-size: 1.5rem;
        font-family: "Sarabun", serif;
  }

  h3 {
    font-size: 1.3rem;
        font-family: "Sarabun", serif;
  }

  h4 {
    font-size: 1rem;
        font-family: "Sarabun", serif;
  }

  h5 {
    font-size: 0.75rem;
    font-family: "Sarabun", serif;
  }

  h6 {
    font-size: 1rem;
    font-family: "Sarabun", serif;
  }

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

  }

  b {
    font-size: 1rem; /* ขนาดฟอนต์ข้อความเล็กลงสำหรับมือถือ */
   color: #003052; /* สีข้อความ */
    font-family: "Sarabun", serif;
     font-weight: bold; /* ตัวอักษรหนา */
    font-weight: 400;
  }
}



/* สำหรับมือถือ */
@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;
 
}

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

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

.reference-content li {
  margin-bottom: 5px;
  line-height: 1.6;
  font-size: 12px;
font-weight: 400;
}

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

}

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

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


/* สไตล์สำหรับกล่องแชร์ */
.share-icons {
  display: flex;
 
  gap: 20px; /* ระยะห่างระหว่างไอคอน */
  margin-top: 20px;
}

/* สไตล์สำหรับแต่ละไอคอน */
.share-icon i {
  font-size: 40px;  /* ขนาดไอคอน */
  color: #003052;
  transition: transform 0.3s ease;
}

/* เอฟเฟกต์เมื่อ hover */
.share-icon:hover i {
  transform: scale(1.1);  /* ขยายไอคอนเมื่อ hover */
  color: #D5E70A;  /* เปลี่ยนสีเมื่อ hover */
}

/* จัดตรงกลางเฉพาะหน้าจอขนาดเล็ก (มือถือ) */
@media (max-width: 768px) {
  .content-container {
    text-align: center; /* จัดข้อความให้อยู่กลาง */
    margin: 0 auto; /* จัดตัวบล็อกให้อยู่ตรงกลาง */
  }
}

/* ปรับขนาดรูปสำหรับหน้าจอมือถือ */
@media (max-width: 768px) {
  .responsive-image {
    width: 20%; /* ลดขนาดรูปให้เล็กลง */
  }

  .content-container {
    text-align: center; /* จัดข้อความให้อยู่กลาง */
  }
}


.image-container {
    position: relative;

}

.main-image {
    width: 45%;
    /* ขนาดของภาพหลัก */
    position: relative;
    z-index: 2;
    /* ทำให้ภาพหลักอยู่ด้านบน */
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    transform: scale(1);
    z-index: 1;
    pointer-events: none;
    background-attachment: fixed;
    background-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 255) 100%);
}


.editors-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 150px;
}

.editor-box {
    flex: 1;
    border: 1px solid #ccc;
    height: 1000px;
    overflow-y: auto;
    padding: 15px;
    background: #fff;
    font-family: 'Sarabun', sans-serif;
}