@charset "windows-874";
/* CSS Document */

@font-face {
    font-family: 'Kanit-Regular';
    src: url('../font/Kanit-Regular.eot');
    src: url('../font/Kanit-Regular.eot?#iefix') format('embedded-opentype'),
         url('../font/Kanit-Regular.woff') format('woff'),
         url('../font/Kanit-Regular.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
html, body {font-family: 'Kanit-Regular';}
.form-control{color:#1447E6;font-size: 16px;}
input[type=checkbox],input[type=radio]{transform : scale(1.5);}
.chosen-container-single .chosen-single span{color:#1447E6;}
.chosen-container-single .chosen-single {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
}
.chosen-container-multi .chosen-choices {
  min-height: 45px;
  line-height: 45px;
  font-size: 16px;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  height: 45px;
  font-size: 16px;
  line-height: 45px;
}
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
  height: 45px !important;
  line-height: 45px !important;
  box-sizing: border-box;
  font-size: 16px !important;
  color:#1447E6 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1447E6 !important;            /* สีตัวอักษรในช่อง */
  vertical-align: middle;                   /* จัดให้อยู่ตรงกลางแนวนอน */
  line-height: 45px !important;
}
.select2-container--default.is-invalid .select2-selection {
    border: 1px solid #dc3545;
}

.select2-container--default.is-valid .select2-selection {
    border: 1px solid #28a745;
}

.input-hidden{visibility: hidden;} /* ซ่อน input กรณีใช้ required*/
@media screen and (max-width: 600px) {
  h1,.h1{font-size:20px}
  h2,.h2{font-size:18px}
  h3,.h3{font-size:15px}
  h4,.h4{font-size:12px}
  h5,.h5{font-size:10px}
  .font_70{font-size:35px}
}
@media screen and (min-width: 601px) {
  h1,.h1{font-size:30px}
  h2,.h2{font-size:28px}
  h3,.h3{font-size:20px}
  h4,.h4{font-size:18px}
  h5,.h5{font-size:16px}
  .font_70{font-size:70px}

}
.note_comment{
  padding:5px 20px 5px 20px;
  margin-top: 20px;
  border:3px solid indianred;
  background-color: #FADBD8;
  color:#000;
  border-radius: 15px;
}

.reason{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.table th{
  text-align: center !important;
}
.table .text-white th{
  color: #fff !important;
}
.pointer{
  cursor: pointer;
}
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.table td, .table th {
  border: 1px solid #333;
  padding: 8px;
}

/**********************************************/
.bg-navy{
  background-color:#193CB8;
}
.text-navy{
 color:#162456;
}
.styled-image {
  width: 200px; /* ปรับขนาดตามต้องการ */
  border: 4px solid #fff; /* สีขาวหรือสีอื่นก็ได้ */
  border-radius: 10px; /* ทำมุมโค้งเล็กน้อย (เลือกใส่หรือไม่ก็ได้) */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* เงาใต้ภาพ */
}
.div-box {
  position: relative;
  width: 100%;
  height: 200px; /* ปรับตามต้องการ */
  background-size: cover;       /* ทำให้รูปพอดีกับพื้นที่ */
  background-position: center;  /* จัดให้อยู่ตรงกลาง */
  background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */
  border-radius: 10px;          /* โค้งขอบเล็กน้อย (ถ้าต้องการ) */
  overflow: hidden;
}
.image-banner {
  position: relative;
  width: 100%;
  height: 250px; /* ปรับตามต้องการ */
  background-size: cover;       /* ทำให้รูปพอดีกับพื้นที่ */
  background-position: center;  /* จัดให้อยู่ตรงกลาง */
  background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */
  border-radius: 10px;          /* โค้งขอบเล็กน้อย (ถ้าต้องการ) */
  overflow: hidden;
}
.glow {
 color: rgb(180, 244, 7);
  text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black,
     0px  2px 0 black,
     2px  0px 0 black,
    -2px  0px 0 black,
     0px -2px 0 black;
  font-weight: bold;
}
/* แถบข้อความคาดกลางเต็ม div */
.text-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%; /* ยาวเต็ม div */
  background-color: rgba(240, 253, 244, 0.8); /* พื้นหลังโปร่งแสง */
  color: #000;
  text-align: center;
  padding: 20px 0;
  font-size: 20px;
  font-weight: bold;
}
.title-box {
  text-align: center;
}

.topic {
  position: relative;
  display: inline-block;
  color: #001f3f; /* น้ำเงินเข้ม */
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* เส้นด้านบน */
.topic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px; /* ความหนาเส้น */
  background: linear-gradient(to right, #007bff, #00ffff, #00ff88); /* ไล่สี */
}

/* เส้นด้านล่าง */
.topic::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px; /* ความหนาเส้น */
  background: linear-gradient(to right, #007bff, #00ffff, #00ff88); /* ไล่สี */
}
/*----------------------list contact------------------------------------------------------------------*/
.list-type1 {
  width: 400px;
  margin: 2em auto; /* เพิ่มระยะห่างรอบกล่อง */
}

.list-type1 ol {
  counter-reset: li;
  list-style: none;
  font-size: 18px;
  padding: 0;
  margin: 0;
}

.list-type1 ol li {
  margin-bottom: 1.2em; /* เพิ่มช่องว่างระหว่างรายการ */
}

.list-type1 a {
  position: relative;
  display: block;
  padding: 1em 1em 1em 4.5em; /* ขยับข้อความออกจากตัวเลข */
  color: #000;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.list-type1 a:hover {
  background: #d6d4d4;
  transform: scale(1.05);
}

.list-type1 a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%); /* จัดให้อยู่ตรงกลางแนวตั้ง */
  height: 4em;
  width: 4em;
  background:#21BCFF;
  line-height: 4em;
  border: 0.25em solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 50%;
}

/*----------------------------------------------------------------------------------------*/
  .output {
        white-space: pre-wrap; /* ให้แสดงผลหลายบรรทัด */
        min-height: 40px;
    }
/*----------------------------------------------------------------------------------------*/