a.nav_link              { color: #000000 !important; text-decoration:none; }
  a.nav_link:hover        { color: #046A38 !important; }  











  .input_smart {
    font-family:          'IBM Plex Sans Thai Looped', sans-serif !important;
    font-weight:          400 !important;
    font-size:            14.5px !important;
    padding-top:          27px !important; 
    height:               60px !important;
    border-radius:        5 !important; 
    border:               1 #ddd !important; 
    background-color:     #fff !important; 
    box-shadow:           inset 0 -0px 0 0 #ddd;
  }

  .label_smart {
    font-family:          'IBM Plex Sans Thai', sans-serif !important;
    font-weight:          500 !important;
    font-size:            17px !important;
    color:                #222 !important;   /* 222, 009688 w3-text-teal, 198754 text-success, ce3389 ping udh */
    
  }


  .textarea_smart {
    border:               1px solid #ddd;
    font-family:          'IBM Plex Sans Thai Looped', sans-serif !important;
    font-weight:          400 !important;
    font-size:            15px !important;
    padding-top:          30px !important; 
  }  



  .headline_1 {
    font-family:          'IBM Plex Sans Thai', sans-serif !important;
    font-weight:          600 !important;
    letter-spacing:       0.3px !important;
    color:                #333333 !important;
    font-size:            18px !important;
  }


  .input_readonly {
    background-color:     #e9f4f0 !important;
  }











  /* CSS สำหรับการแสดงผล select2 ---------------------------------------------------- */
  .select2.select2-container .select2-selection {
      border:           1px solid #ddd;
      border-radius:    5px;
      font-family:      'IBM Plex Sans Thai Looped', sans-serif !important;
      font-weight:      400 !important;
      font-size:        15px !important;
      color:            #000 !important;
      height:           60px;
      padding-top:      23px;
      padding-left:     3px;
  }

  .select2-dropdown {
      z-index:          100;
      font-family:      'IBM Plex Sans Thai Looped', sans-serif !important;
      font-weight:      400 !important;
      font-size:        15px !important;
      color:            #000 !important;
  }

  /* เลื่อนลูกศรของ Select2 ลงมา 10px (ปรับตามความต้องการ) */
  .select2.select2-container .select2-selection .select2-selection__arrow {
      top: 12px; 
  }













  /* CSS สำหรับการแสดงผล btn_group_check ---------------------------------------- */

  .btn_group_check {
      display: flex;
      gap: 15px; /* ระยะห่างระหว่างปุ่ม */
  }

  .checkbox_label_smart {
      font-family: 'IBM Plex Sans Thai', sans-serif !important;
      font-weight: 500 !important;            

      font-size:      15px;                    
      color:          #333; 
      padding-bottom: 2px;
      transition:     color 0.0s, border-bottom 0.0s;
  }

  .btn_group_check input[type="checkbox"] {
      display: none; /* ซ่อน checkbox */
  }

  /* เมื่อ checkbox ถูกเลือก */
  .btn_group_check input[type="checkbox"]:checked + label.checkbox_label_smart {
      color: #008e76;
      border-bottom: 2px solid #008e76;
  }









  /* CSS สำหรับการแสดงผล btn_group_radio ---------------------------------------- */

  .btn_group_radio {
      display: flex;
      gap: 20px; /* ระยะห่างระหว่างปุ่ม */
  }

  /* label สไตล์เดียวกับ checkbox */
  .radio_label_smart {
      font-family: 'IBM Plex Sans Thai', sans-serif !important;
      font-weight: 500 !important;
      font-size: 15px;
      color: #333;
      padding-bottom: 2px;
      transition: color 0.0s, border-bottom 0.0s;
      cursor:pointer;
  }

  /* ซ่อน radio ตัวจริง */
  .btn_group_radio input[type="radio"] {
      display: none;
  }

  /* แสดงผลเมื่อ radio ถูกเลือก */
  .btn_group_radio input[type="radio"]:checked + label.radio_label_smart {
      color: #dc3545;
      border-bottom: 2px solid #dc3545;
  }













  /* ปุ่มของแต่ละสี */
  .btn_trg_1 {
    /* สีพื้นหลังและสีข้อความ */
    background-color:   red;  /* #5c95ec */
    color:              white;

    /* ขนาดและระยะห่าง */
    font-size:          13.5px;
    font-weight:        500;
    padding:            3px 8px; /* บน,ล่าง + ซ้าย,ขวา */
    border:             none;
    border-radius:      5px;
  }   

  .btn_trg_2 {
    /* สีพื้นหลังและสีข้อความ */
    background-color:   #FF69B4;  /* #FF69B4, darkorange */
    color:              white;

    /* ขนาดและระยะห่าง */
    font-size:          13.5px;
    font-weight:        500;
    padding:            3px 8px; /* บน,ล่าง + ซ้าย,ขวา */
    border:             none;
    border-radius:      5px;
  } 

  .btn_trg_3 {
    /* สีพื้นหลังและสีข้อความ */
    background-color:   #FFA500;  /* #FFA500, gold */
    color:              white;

    /* ขนาดและระยะห่าง */
    font-size:          13.5px;
    font-weight:        500;
    padding:            3px 8px; /* บน,ล่าง + ซ้าย,ขวา */
    border:             none;
    border-radius:      5px;
  } 

  .btn_trg_4 {
    /* สีพื้นหลังและสีข้อความ */
    background-color:   #009688;  /* #009688, green */
    color:              white;

    /* ขนาดและระยะห่าง */
    font-size:          13.5px;
    font-weight:        500;
    padding:            3px 8px; /* บน,ล่าง + ซ้าย,ขวา */
    border:             none;
    border-radius:      5px;
  } 

  .btn_trg_5 {
    /* สีพื้นหลังและสีข้อความ */
    background-color:   #808080;   /* 808080, 7C8698 */
    color:              white;

    /* ขนาดและระยะห่าง */
    font-size:          13.5px;
    font-weight:        500;
    padding:            3px 8px; /* บน,ล่าง + ซ้าย,ขวา */
    border:             none;
    border-radius:      5px;
  } 


  .btn_trg_obs {
    /* สีพื้นหลังและสีข้อความ */
    background-color:   #673ab7;   /* 673ab7 */
    color:              white;

    /* ขนาดและระยะห่าง */
    font-size:          13.5px;
    font-weight:        500;
    padding:            3px 8px; /* บน,ล่าง + ซ้าย,ขวา */
    border:             none;
    border-radius:      5px;
  } 








































































/* Oswald */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300; /* กำหนดเป็นน้ำหนัก 300 สำหรับ Light */
  src: url('/v3/css/google_fonts/Oswald-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('/v3/css/google_fonts/Oswald-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('/v3/css/google_fonts/Oswald-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('/v3/css/google_fonts/Oswald-Bold.ttf') format('truetype');
}



/* สร้างคลาสใหม่สำหรับ Light (น้ำหนัก 300) */
.oswald_light {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}


.oswald_regular {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}

.oswald_medium {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}

.oswald_bold {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}









/* IBM Plex Sans Thai */


@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  src: url('/v3/css/google_fonts/IBMPlexSansThai-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 500;
  src: url('/v3/css/google_fonts/IBMPlexSansThai-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  src: url('/v3/css/google_fonts/IBMPlexSansThai-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 700;
  src: url('/v3/css/google_fonts/IBMPlexSansThai-Bold.ttf') format('truetype');
}

.ibm_regular {
  font-family: 'IBM Plex Sans Thai', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
  color: #333333 !important;  
}

.ibm_medium {
  font-family: 'IBM Plex Sans Thai', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  color: #333333 !important;  
}

.ibm_semibold {
  font-family: 'IBM Plex Sans Thai', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: #333333 !important;
}

.ibm_bold {
  font-family: 'IBM Plex Sans Thai', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #333333 !important;
}



.ibm_medium_nc {
  font-family: 'IBM Plex Sans Thai', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}










/* IBM Plex Sans Thai Looped */

@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 400;
  src: url('/v3/css/google_fonts/IBMPlexSansThai1Looped-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 500;
  src: url('/v3/css/google_fonts/IBMPlexSansThai1Looped-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 700;
  src: url('/v3/css/google_fonts/IBMPlexSansThai1Looped-Bold.ttf') format('truetype');
}


.ibm_regular_l {
  font-family: 'IBM Plex Sans Thai Looped', sans-serif !important;
  font-weight: 400 !important;
  color: #333 !important;
}

.ibm_medium_l {
  font-family: 'IBM Plex Sans Thai Looped', sans-serif !important;
  font-weight: 500 !important;
  color: #333 !important;
}

.ibm_bold_l {
  font-family: 'IBM Plex Sans Thai Looped', sans-serif !important;
  font-weight: 700 !important;
  color: #333 !important;
}

















/* Noto Sans Thai Looped */

@font-face {
  font-family: 'Noto Sans Thai Looped';
  font-style: normal;
  font-weight: 500;
  src: url('/v3/css/google_fonts/NotoSansThaiLooped-Medium.ttf') format('truetype');
}


.noto_medium {
  font-family: 'Noto Sans Thai Looped', sans-serif !important;
  font-weight: 500 !important;
  color: #333 !important;
  letter-spacing: 0px !important;

}
















/* Sarabun */


@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  src: url('/v3/css/google_fonts/Sarabun-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 500;
  src: url('/v3/css/google_fonts/Sarabun-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  src: url('/v3/css/google_fonts/Sarabun-Bold.ttf') format('truetype');
}

.smart_regular {
  font-family: 'Sarabun', sans-serif;
  font-weight: 400;
}

.smart_medium {
  font-family: 'Sarabun', sans-serif;
  font-weight: 500;
}

.smart_bold {
  font-family: 'Sarabun', sans-serif;
  font-weight: 700;
}