@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap');
.common-style{
  font-family: "Mitr", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.common-style-2{
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.bg-white
{
background-color: #ffffff;
}

.bg-gray-01
{
background-color: #dddddd;
}

.fw-bold-01 {
  font-weight: 400;
}

.text-danger-01
{
color: #5e1914 !important;
}
.text-danger-02
{
color: #720000 !important;
}
.border-danger-01
{
  border: 1px solid #5e1914 !important;
}
.bg-danger-01
{
background-color: #5e1914 !important;
color: #ddc656 !important;
}
.bg-danger-02
{
background-color: #5e1914 !important;
}
.bg-danger-03
{
background-color: #5e1914 !important;
}
.bg-danger-04
{
background-color: #5e1914;
}
.text-yellow-01
{
color: #dccb45;
}

.fs-7
{
font-size: 70px;
}
/* สำหรับหน้าหลัก (index.php) */



.nav-link.active {
background-color: #5e1914; /* กำหนดสีพื้นหลังเป็น #5e1914 */
border-radius: 4px;
color: #dccb45 !important; /* กำหนดสีข้อความตรงไปยัง #dccb45 โดยใช้ !important เพื่อให้มั่นใจว่ามันจะมีผลกับสีข้อความโดยไม่สนใจ CSS อื่น */
}


.border-e-white-6
{
  border-right: 0.12rem solid rgb(255, 255, 255);
  height: 1.25rem;
}



.bg-transparent
{
background-color: rgba(255, 255, 255, 0);
}

.bg-light-transparent,
.btn-light-transparent
{
background-color: rgba(255, 255, 255, 0.507);
}

.hr-01
{
height: .3rem;
background-color: #5e1914
}

.dropdown-item:hover
{
background-color: transparent !important;
}

.px-6
{
padding-left: 4rem;
padding-right: 4rem;
}
.pe-7
{
padding-right: 5rem;
}
.pe-8
{
padding-right: 6rem;
}
.pe-9
{
padding-right: 7rem;
}



.btn-black
{
background-color: #000000;
}

.text-secondary-01
{
color: #c4b8b8;
}
.text-center-01
{
  align-items: center !important;
  text-align: center !important;
}

.card
{
  overflow: hidden;
  border-radius: 1rem !important;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
} 
.card img,
.border-radius-01
{
  border-radius: 1rem 1rem 1rem 1rem;
}

.fs-7
{
font-size: 14px !important;
}

.fs-8
{
font-size: 12px !important;
}

.read-more:link {
text-decoration: none;
}

.read-more:visited {
text-decoration: none;
}

.read-more:hover {
text-decoration: underline;
}

.read-more:active {
text-decoration: underline;
}

.card
{
border-radius: 0%;
}
.border-rounded-0
{
border-radius: 0;
}
.card:hover img,
.card:focus img
{
transform: scale(1.1);
}

.card img
{
transition: all .2s ease-in-out;
}

.card > .content
{
height: 11rem;
}
.card > .content > .list
{
height: 4.5rem;
}

.bg-black-01
{
background-color: #0e0e0e;
}

.btn-warning-01
{
background-color: #e6d376;
}

.bg-gray-02
{
background-image: url("../../assets/images/background/round.png");
background-size: 40%;

}

.btn.btn-warning-01:hover
{
background-color: #5e1914;
color: #d9c663 !important;
}

.bg-success-01
{
background-color: #003634;
color: #ddc656 !important;
}

.mx-0-1
{
margin-top: 0rem !important;
margin-bottom: 0rem !important;
margin-left: .15rem !important;
margin-right: .15rem !important;
}








.text-hover-danger-01:hover
{
color: #5e1914 !important;
}
.text-hover-danger-02:hover
{
color: #e14217 !important;
}







.mb-6
{
  margin-bottom: 4rem;
}









/* styles.css */

/* Styling the scroll-down button */
.scroll-down {
 
  
 
  transform: translateX(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounce 2s infinite;
}

.scroll-down::before {
  content: '';
  width: 12px;
  height: 12px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);

}

/* Keyframes for the bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
  }
  40% {
      transform: translateX(-50%) translateY(-15px);
  }
  60% {
      transform: translateX(-50%) translateY(-10px);
  }
}



.object-fit {
  object-fit: cover
}

.bg-transparent-black-02 {
  background: rgba(0, 0, 0, 0.507);
}
.bg-transparent-black-03 {
  background: rgba(0, 0, 0, 0.207);
}

.pointer {cursor: pointer;}
.bg-transparent-black,
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu 
{
background-color: rgba(0, 0, 0, 0.755) !important;
}
/* .btn:focus
{
background-color: transparent !important;
border: 0 !important;
} */
.box-shadow-0
{
box-shadow: none !important;
}
.box-shadow-1 {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.box-shadow-2 {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.box-shadow-3 {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.box-shadow-4 {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.box-shadow-5 {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.m-0-i
{
margin: 0 !important;
}
#search .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#search .modal-header .btn-close {
    position: absolute;
    right: 1rem;
}
.thick-hr {
  width: 7.5rem;
  border: none; /* Remove default border */
  height: 2px; /* Set the thickness */
  background-color: black !important; /* Set the color */
}

.a-non-underline
{
  text-decoration: none;
  color: black;
}
a {
  transition: color 0.4s ease, background-color 0.4s ease; /* Transition for color and background-color */
}

.fs-5-01
{
  font-size: 1.2rem !important;
}

.border-top-warning-01
{
  border-top: 2px solid #FFAF00;
}

.progress-bar {
  transition: width .4s ease-in; /* เพิ่ม transition สำหรับคุณสมบัติ width ด้วยความเร็ว 0.5 วินาที แบบ ease */
}
.h-43-7-rem
{
  height: 43.7rem !important;
}
/* Custom CSS for Scroll Down button */
.scroll-down-btn {
  height: 40px;
  width: 40px;
  transform: translateX(-50%);
  z-index: 1000;
}
.scroll-down-btn i {
  top: -15px;
  left: 3px;
}

.text-light-transparent {
  color: rgba(255, 255, 255, 0.466);
}
.border-white
{
  border: 2.5px solid white;
}

.border-transparent
{
  border: 2.5px solid rgba(255, 255, 255, 0);
}
.text-underline
{
  text-decoration: underline;
}
.social-link:hover a
{
  color: #b8b8b8cb !important;
}
.social-link > div > div:hover,
.social-link > div > div:hover a
{
  color: #ffffff !important;
  transform: translateY(-5px) scale(1.1);
}
.social-link > div > div,
.social-link > div > div a
{
  transform: translateY(0) scale(1);
  transition: all .3s ease-in-out;
}


.fade-down {
  animation: fadeDownAnimation 1s ease-in-out;
}

@keyframes fadeDownAnimation {
  0% {
      transform: translateY(-50px);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

.fade-up {
  animation: fadeUpAnimation 1s ease-in-out;
}

@keyframes fadeUpAnimation {
  0% {
      transform: translateY(50px);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}




/* Add this to your CSS file */

.zoom-out {
  animation: zoomOutAnimation 1s ease-in-out;
}

@keyframes zoomOutAnimation {
  0% {
      transform: scale(1.1);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}


@media (min-width: 320px) AND (max-width: 1199px) {  


  .border-e-white
  {
    border-right: 0.1px solid rgba(160, 160, 160, 0.514);
  }
}






/* ให้ปุ่มชิดข้าง */
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 60px; /* กำหนดความกว้างของปุ่ม */
height: 60px; /* กำหนดความสูงของปุ่ม */
font-size: 2rem; /* กำหนดขนาดตัวอักษรของปุ่มลูกศรให้ใหญ่ขึ้น */
}

.carousel-control-prev {
left: 0;
}

.carousel-control-next {
right: 0;
}
/* ให้ปุ่มชิดข้าง */


.button-link-carousel,
.z-index-2
{
  z-index: 2;
}
.carousel-item {
  transition: all .2s ease-in-out !important; /* Change 0.2s to your desired duration */
}



@media (min-width: 320px){  
  .res-m-h-message-sm-post {
    max-height: 12rem;
  }
}


@media (min-width: 320px) AND (max-width: 767px){  
  /* เพิ่มสไตล์ CSS ที่ต้องการให้มีผลเมื่อขนาดหน้าจอมีความ */
  .carousel-item {
    height: auto; /* กำหนดความสูงสูงสุดของรูปใน carousel เป็น 40.6rem */
  }
  /* .card > div:first-child {
    height : 150px !important;
  } */
}


@media (min-width: 768px) AND (max-width: 991px) {   /* ขนาด ipad/taplet*/
  /* เพิ่มสไตล์ CSS ที่ต้องการให้มีผลเมื่อขนาดหน้าจอมีความ */
  .carousel-item {
    height: 25.5rem; /* กำหนดความสูงสูงสุดของรูปใน carousel เป็น 40.6rem */
  }
  .carousel-item img{
    height: 25.5rem; /* กำหนดความสูงสูงสุดของรูปใน carousel เป็น 40.6rem */
  }
  .carousel-caption
  {
    position: absolute !important;
    left: -300px !important;
    top: 50px !important;
  }
}

@media (min-width: 992px) AND (max-width: 1199px) { /* ขนาด โน๊ตบุค*/
  .carousel-item {
     /* กำหนดความสูงสูงสุดของรูปใน carousel เป็น 1000px */
     /* height: 40.6rem; */
    object-fit: contain; /* ไม่บีบภาพ เพื่อให้รูปเต็มพื้นที่และไม่ถูกตัด */
  }
  .px-lg-6
  {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
  .pe-lg-6
  {
    padding-right: 3.2rem;
  }
  .bg-lg-light
  {
    background-color: #dddddd !important;
  }
  .navbar-nav .nav-link,
  .dropdown-item {
    font-size: 100%; /* ลดขนาดตัวหนังสือลง 20% */
  }
  .navbar-collapse
  {
    overflow: visible;
  }
  .dropdown-toggle
  {
    transition: none !important;
  }
  .h-0
  {
    height: 0;
  }
  .text-lg-danger-01
  {
    color: #5e1914 !important;
  }
  .bg-lg-white
  {
    background-color: #ffffff !important;
  }
  .min-h-lg-01
  {
    min-height: 12rem;
  }
  .text-lg-danger-01
  {
    color: #5e1914 !important;
  }
  .carousel-caption
  {
    position: absolute !important;
    left: -400px !important;
    top: 80px !important;
  }
  
}

@media (min-width: 1200px) {
  .res-m-h-message-xl-post {
    max-height: 100%;
  }
  .mt-xl-35-vh {
    margin-top: 35vh !important;
  }
  .carousel-item {
     /* กำหนดความสูงสูงสุดของรูปใน carousel เป็น 1000px */ 
     /* height: 50.2rem; */
      object-fit: contain; /* ไม่บีบภาพ เพื่อให้รูปเต็มพื้นที่และไม่ถูกตัด */
  }
  .navbar-nav .nav-link,
  .dropdown-item {
    font-size: 80%; /* ลดขนาดตัวหนังสือลง 20% */
  }
  .navbar-collapse
  {
    overflow: hidden;
  }
  .dropdown-toggle
  {
    transition: none !important;
  }
  .dropdown-menu {
    display: none;
  }
  /* ทำให้ dropdown ขนาดเต็มความกว้างเต็มจอเมื่อ hover */
  .dropdown:hover .dropdown-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 6.8rem;
    width: 100%;
  }
  .bg-xl-white
  {
    background-color: #ffffff !important;
  }
  .text-xl-danger-01
  {
    color: #5e1914 !important;
  }
  .px-lg-6
  {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
  .dropdown
  {
   position: relative;
  }
  .dropdown-toggle::before {
    position: absolute;
    right: -1px;
    bottom: -4px;
    height: 12px;
    width: 12px;
    background-color: rgba(0, 0, 0, 0.623);
    content: ""; /* Insert content that looks like bullets */
    opacity: 0;
    transform: rotate(45deg) translateY(0);
    transition: opacity .2s ease-in-out;
  }
  .dropdown:hover .dropdown-toggle::before {
      opacity: 1;
      transition-delay: 0.2s;
      transform: rotate(45deg) translateY(0);
  }
  .dropdown-menu {
    display: none;
    opacity: 0;
    transform: translateY(5%);
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
  }
  .dropdown:hover .dropdown-menu {

    margin-top: 0; /* remove the gap so it doesn't close */
    /* backdrop-filter: blur(2px);  */
    border-radius: 0%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .vh-xl-0,
  .h-xl-0
  {
    height: auto !important;
  }
  .overflow-xl-hidden
  {
    overflow: hidden !important;
  }
  .fs-xl-5-01
  {
    font-size: 1.2rem !important;
  }
  .fs-xl-6-01
  {
    font-size: .95rem !important;
  }
  .dropdown:not(:hover) .dropdown-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 6.8rem; /* หรือตามความต้องการ */
    width: 100%; /* ทำให้ dropdown เต็มความกว้าง */
  }
  .button-link-carousel
  {
    left: 13.2rem;
    top: 37.5rem; 
  }
  .carousel-caption
  {
    position: absolute !important;
    left: 190px !important;
    top: 178px !important;
    width: 30%;
    height: 50%;
  }
  .scale-xl-1-5
  {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    transform: scale(1.5);
  }
  .min-h-xl-7-05-rem {
    min-height:7.05rem;
  }

  .content-custom-01{
    height: 29.01098901098901vh;
  }
  .content-custom-01 > div.col-xl-auto:nth-child(2) {
    border-left: 2px solid rgb(0, 217, 255);
    height: 2.55rem;
    transform: translateY(-2.9px);
  }
  .h-xl-494-px {
    height: 494px;
    background-position: center;
  }
  .h-xl-276-px {
    height: 276px !important;
  }
  .card-02:hover .content-02 {
    transition-delay: .5s;
  }

}













.btn-hover-text-light:hover {
  color: white !important 
}
.btn-hover-text-dark:hover {
  color: black !important 
}

.bg-gradient-01 {
  background-image: linear-gradient(to right, #ffffff, #f1f1f1, #e3e3e3, #d5d5d5, #c7c7c7);
}
















#content > #con-1,
#content > #con-3 {
    height : 395px;
}
#content > #con-4 {
  height : 215px;
}
#content > #con-5 {
  height : 590px;
}
#content > #con-6 {
  height : 60px;
}
#content hr {
  width: 2.4rem;
  opacity: 1;
}
.border-light {
  border: 1.5px solid white !important;
}
.border-dark {
  border: 1.5px solid black !important;
}
#content > #con-1 .col-xl-8 > div {
  max-width: 30rem;
}
.bg-warning-02 {
  background-color: #ffdd00;
}
.bg-dark-02 {
  background-color: #343a41;
}
.bg-danger-03 {
  background-color: #fa4616 !important;
}


.border-custom {
  border: 1px solid #eecf7c ;

}

.w-150-px
{
  width: 150px;
}
.h-150-px
{
  height: 150px;
}
.border-box-custom:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 3px solid #cf983d;
  z-index: 9999;
  transform: translate(-50%, -50%);
  /* เริ่มต้นไม่มี box-shadow */
  box-shadow: none;
  /* ตั้งค่าการแอนิเมชัน */
  animation: boxShadowEffect 1s forwards;
  /* เริ่มแอนิเมชันหลังจาก 4 วินาที */
  animation-delay: 1.5s;
 
}

@keyframes boxShadowEffect {
  to {
      box-shadow: 0px 0px 20px 3px #eecf7c;
  }
}
.fs-9 {
  font-size: .705rem;
}
.fs-7-v2 {
  font-size: .845rem;
}
.border-radius-1-rem
{
  border-radius: 1rem !important;
}
.border-radius-1-2-rem
{
  border-radius: 1.2rem !important;
}
.border-radius-1-6-rem
{
  border-radius: 1.6rem !important;
}
.f-italic {
  font-style: italic;
}
#typingText2 {
  transform: translateY(-7px);
  height: 1rem;
}
.typing-text {
  font-family: monospace; /* ใช้ฟอนต์ที่มีความกว้างตัวอักษรเท่ากัน */
}
.cursor {
  display: inline;
  animation: blink 0.7s infinite;
  font-weight: normal;
}
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}



.navbar-nav.nav-second .nav-link {
  text-decoration: none;
}

.navbar-nav.nav-second .nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px; /* คุณสามารถปรับความหนาของ underline ได้ที่นี่ */
  background-color: #720000;
  left: 0;
  bottom: -0.5px; /* ปรับระยะห่างจากตัวอักษร */
  transition: width 0.3s ease;
  transform-origin: left;
  border: none;
}

.navbar-nav.nav-second .nav-link:hover::after {
  width: 100%;
}





.navbar-nav.nav-second .nav-link.active-with-underline::after  {
  width: 100%;
}

.navbar-nav.nav-second .nav-link.active-with-underline {
  color: #5e1914 !important;
}

.w-50-px {
  width: 50px;
}
.h-50-px {
  height: 50px;
}
.w-20-px {
  width: 20px;
}
.h-20-px {
  height: 20px;
}
.w-30-px {
  width: 30px;
}
.h-30-px {
  height: 30px;
}

.position-absolute > .square {
  border: 4px solid rgba(179, 84, 77, 0.24);
}
.start-25 {
  left: 25%;
}
.start-75 {
  left: 75%;
}
.end-25 {
  right: 25%;
}
.bottom-25 {
  bottom: 25%;
}

.rotate-left-20 {
  animation: rotate 20s linear infinite;
}
.rotate-left-25 {
  animation: rotate 25s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.text-warning-01 {
  color: #ff9d00;
}

.center-01-first {
  position: absolute;
  top: -85%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: rgb(0, 0, 0);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}





.bg-blur {
  backdrop-filter: blur(10px);
  background-color: #ffbb0056;
}
.bg-blur-black {
  backdrop-filter: blur(10px);
  background-color: #00000056;
}
.bg-blur-black-01 {
  backdrop-filter: blur(15px);
  background-color: #000000ab;
}

.custom-tooltip {
  --bs-tooltip-bg: #ff00007a;
  --bs-tooltip-color: #ffffff;
}






.triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent; /* ความกว้าง 15px */
  border-right: 30px solid transparent; /* ความกว้าง 15px */
  border-bottom: 50px solid rgb(138, 65, 59);
  background-color: transparent; /* ตรงกลางเป็นพื้นที่ว่างเปล่า */
}



.flower-02 {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  transition: transform 0.5s ease-in-out;
  transform: rotate(-5deg);
}
.petal-02 {
  position: absolute;
  width: 22.5px;
  height: 45px;
  background: rgb(138, 65, 59);
  border-radius: 10px 10px 0 0;
  transform-origin: 50% 100%;
}

.petal-02:nth-child(1) { transform: rotate(0deg); }
.petal-02:nth-child(2) { transform: rotate(45deg); }
.petal-02:nth-child(3) { transform: rotate(90deg); }
.petal-02:nth-child(4) { transform: rotate(135deg); }
.petal-02:nth-child(5) { transform: rotate(180deg); }
.petal-02:nth-child(6) { transform: rotate(225deg); }
.petal-02:nth-child(7) { transform: rotate(270deg); }
.petal-02:nth-child(8) { transform: rotate(315deg); }















.flower-01-container {
  position: relative;
  width: 15px;
  height: 15px;
}

.flower-01 {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  transition: transform 0.5s ease-in-out;
  transform: rotate(-5deg);
}



.petal-01 {
  position: absolute;
  width: 7.5px;
  height: 15px;
  background: red;
  border-radius: 10px 10px 0 0;
  transform-origin: 50% 100%;
}

.petal-01:nth-child(1) { transform: rotate(0deg); }
.petal-01:nth-child(2) { transform: rotate(45deg); }
.petal-01:nth-child(3) { transform: rotate(90deg); }
.petal-01:nth-child(4) { transform: rotate(135deg); }
.petal-01:nth-child(5) { transform: rotate(180deg); }
.petal-01:nth-child(6) { transform: rotate(225deg); }
.petal-01:nth-child(7) { transform: rotate(270deg); }
.petal-01:nth-child(8) { transform: rotate(315deg); }

.center-01 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: yellow;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}



.stamen-01 {
  position: absolute;
  width: 0.6px;
  height: 15px;
  background: orange;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
}

.stamen-01:nth-child(2) { transform: translateX(-50%) rotate(45deg); }
.stamen-01:nth-child(3) { transform: translateX(-50%) rotate(90deg); }
.stamen-01:nth-child(4) { transform: translateX(-50%) rotate(135deg); }
.stamen-01:nth-child(5) { transform: translateX(-50%) rotate(180deg); }
.stamen-01:nth-child(6) { transform: translateX(-50%) rotate(225deg); }
.stamen-01:nth-child(7) { transform: translateX(-50%) rotate(270deg); }
.stamen-01:nth-child(8) { transform: translateX(-50%) rotate(315deg); }

.leaf-01 {
  position: absolute;
  width: 10px;
  height: 20px;
  background: green;
  border-radius: 0 50% 50% 50%;
  transform-origin: 100% 0;
  top: 50%;
  left: 50%;
}


@keyframes swing {
  0% {
    transform: rotate(0deg) translateX(0px);
  }
  25% {
    transform: rotate(5deg) translateX(-5px);
  }
  75% {
    transform: rotate(-5deg) translateX(5px);
  }
  100% {
    transform: rotate(0deg) translateX(0px);
  }
}





.flower-01 {
  animation: swing 5s ease-in-out infinite;
  transition: transform 5s ease; /* เพิ่ม transition เมื่อเราไม่ hover แล้ว */
}





.card-02 {

  perspective: 500px;
}



.content-02 {
  position: absolute;
  border-radius: 1.2rem;
  width: 100%;
  height: 100%;
  transition: transform .7s;

  transform-style: preserve-3d;
}

/* .card-02:hover .content-02 {
  transform: rotateY( 180deg ) ;
} */

.front-02,
.back-02 {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;

  border-radius: 1.2rem;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  backface-visibility: hidden;
}

.back-02 {
  transform: rotateY( 180deg );
}

.tranfrom-scole-1 {
  transform: scale(1.5);
}

.backdrop-filter-10-px {
  backdrop-filter: blur(10rem);
}

.card-02:hover .content-02 {
  transform: rotateY( 180deg ) ;
}


.card-02 .content-02 {
  transition: transform 0.8s;
}

.card-02.clicked .content-02 {
  transform: rotateY(180deg);
}

/* Custom CSS */
.scroll-to-top {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  transition: opacity 0.3s ease; /* กำหนด transition */
}

























.overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 8%; /* ขนาดส่วนของพื้นที่ที่ต้องการให้เป็นสีดำที่ด้านซ้าย */
  height: 100%;
  background-color: black; /* สีดำ */
  opacity: 0.5; /* ความโปร่งใสของสีดำ */
  z-index: 1; /* ให้พื้นที่ทับอยู่ด้านบน */
  box-shadow: -10px 0px 10px 0px black; /* เงาสีดำที่ใช้ใส่ */
}

.overlay-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 8%; /* ขนาดส่วนของพื้นที่ที่ต้องการให้เป็นสีดำที่ด้านขวา */
  height: 100%;
  background-color: black; /* สีดำ */
  opacity: 0.5; /* ความโปร่งใสของสีดำ */
  z-index: 1; /* ให้พื้นที่ทับอยู่ด้านบน */
  box-shadow: 10px 0px 10px 0px black; /* เงาสีดำที่ใช้ใส่ */
}





















.slider {
    width: 50%;
    margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}



/* เลือกไอคอนของปุ่มกลับไป (Previous) */
.center.slider.end-0 .slick-prev:before {
  color: white; /* ตั้งค่าสีไอคอนเป็นสีขาว */
  font-size: 2.5rem !important;
}

/* เลือกไอคอนของปุ่มถัดไป (Next) */
.center.slider.end-0 .slick-next:before {
  color: white; /* ตั้งค่าสีไอคอนเป็นสีขาว */
  font-size: 2.5rem !important;
}

.center.slider.end-0 .slick-prev {
  left: 0% !important;
  z-index: 99999;
}

.center.slider.end-0 .slick-next {
  z-index: 99999;
  right: 2% !important;
}









.slick-slide {
  transform: scale(.95) !important;
  margin: 0 !important;
}

.slick-slide.selected {
  transform: scale(.95) !important;
  margin-left: 10rem;
  margin-right: 10rem;

}

.slick-slide,
.slick-slide.selected,
.slick-slide.selected img {
  transition: .4s ease-in-out;
}




.con-count > div > div > div > div > div.position-relative {
  width: 6.5rem;
  height: 6.5rem;
  border: 4px solid white;
}

.btn-primary-pastel {
  background-color: #84bed6;
}
.btn-primary-pastel:hover, .btn-primary-pastel:active, .btn-primary-pastel:focus {
  background-color: #458ead !important;
}

.btn-danger-pastel {
  background-color: #ea7066;
}

.btn-danger-pastel:hover, .btn-danger-pastel:active, .btn-danger-pastel:focus {
  background-color: #ed4d3e !important;
}

.btn-success-pastel {
  background-color: #b5d56a;
}

.btn-success-pastel:hover, .btn-success-pastel:active, .btn-success-pastel:focus {
  background-color: #a1d230 !important;
}

.btn-warning-pastel {
  background-color: #f0c24b;
}

.btn-warning-pastel:hover, .btn-warning-pastel:active, .btn-warning-pastel:focus {
  background-color: #deab29 !important;
}









/* HTML: <div class="loader"></div> */
.loader-01 {
  top: 45px;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #5e1914;
  animation:
    l20-1 5.5s infinite linear alternate,
    l20-2 10.5s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(145deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}
/* ---------------------------------------------------------------------------------------------------------------------BTN NEWS ALL */
.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  border-radius: .5rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  color: #5e1914; /* สีข้อความของปุ่ม */
  background-color: #e6d376; /* สีพื้นหลังเริ่มต้นของปุ่ม */
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-warning-01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%); /* การ fade แนวทะแยง */
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  transform: scale(0);
  transform-origin: center;
  border-radius: .5rem; /* เพิ่ม border-radius ให้กับ fade */
  clip-path: inset(0); /* ใช้ clip-path เพื่อให้ fade ขอบโค้ง */
  z-index: 0;
}

.btn-warning-01:hover::before {
  transform: scale(1.1); /* ขยายให้ใหญ่กว่าปุ่มเล็กน้อยเพื่อเพิ่มเอฟเฟกต์ */
  opacity: 1;
}

.btn-warning-01:hover {
  background-color: #5e1914; /* เปลี่ยนสีพื้นหลังเป็นสีที่ต้องการเมื่อ hover */
  color: #e6d376; /* เปลี่ยนสีข้อความเป็นสีที่ต้องการเมื่อ hover */
  transform: translateY(-4px); /* ยกปุ่มขึ้นเมื่อ hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้ปุ่ม */
}

.btn-warning-01:active {
  transform: translateY(0); /* คืนสู่ตำแหน่งเดิมเมื่อคลิก */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* ลดเงาเมื่อคลิก */
}

.btn span {
  position: relative;
  z-index: 1;
}
/* ------------------------------------------------------------------------------------------------------------------END BTN NEWS ALL */
/*--------------------------------------------------------------------------------------------------------------- Start Count footer  */
.visitor-counter {
  text-align: center;
  color: #5e1914; /* Text color */
  background-color: black;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
}

.visitor-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.visitor-digits {
  display: flex;
  justify-content: center;
}

.visitor-digit {
  width: 30px; /* Smaller size */
  height: 30px; /* Smaller size */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500; /* Updated font weight */
  font-size: 1em; /* Adjusted font size to fit the smaller circle */
  background-color: #5e1914; /* Background color */
  color: white; /* Text color */
  margin-right: 5px; /* Adjusted margin */
  margin-top: 5px; /* Adjusted margin */ 
  border-radius: 50%; /* Circular shape */
  transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
  animation: pulse 1.5s ease-in-out infinite; /* Updated animation */
}

.visitor-digit:last-child {
  margin-right: 0;
}

.visitor-digit:hover {
  transform: scale(1.1);
  background-color: white; /* Background color on hover */
  color: #5e1914; /* Text color on hover */
}

/* Updated animation keyframes */
@keyframes pulse {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      transform: scale(1.1);
      opacity: 0.8;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

/*--------------------------------------------------------------------------------------------------------------- End Count footer  */


/*--------------------------------------------------------------------------------------------------------------- เริ่มปุ่ม back to top  */
#toTopBtn {
  position: fixed; /* ปุ่มอยู่ที่มุมขวาล่างของหน้าจอ */
  bottom: 20px;
  right: 30px;
  z-index: 99; /* ให้ปุ่มอยู่บนสุด */
  border: 2px solid transparent; /* ขอบโปร่งใสเริ่มต้น */
  outline: none;
  background-color: rgba(0, 54, 52, 0.5); /* สีพื้นหลังของปุ่ม พร้อมโปร่ง 50% */
  color: white;
  cursor: pointer;
  padding: 15px;
  width: 60px; /* กำหนดความกว้างให้ปุ่ม */
  height: 60px; /* กำหนดความสูงให้ปุ่ม */
  border-radius: 50%; /* ทำให้ปุ่มเป็นวงกลม */
  font-size: 18px;
  justify-content: center;
  align-items: center;
  opacity: 0; /* เริ่มต้นให้ปุ่มโปร่งใส */
  transform: scale(0); /* เริ่มต้นให้ปุ่มเล็ก */
  transition: opacity 0.5s ease, transform 0.5s ease; /* แอนิเมชันสำหรับการปรากฏ */
}

#toTopBtn.show {
  opacity: 1; /* ค่อย ๆ ปรากฏ */
  transform: scale(1); /* ขยายจากเล็กไปใหญ่ */
}

#toTopBtn:hover {
  background-color: rgba(94, 25, 20, 0.5); /* เปลี่ยนสีปุ่มเมื่อ hover */
  transform: scale(1.1); /* เพิ่มขนาดเล็กน้อยเมื่อ hover */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อ hover */
  border: 2px solid #ffffff; /* เพิ่ม border สีขาวเมื่อ hover */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-10px);
  }
  60% {
      transform: translateY(-5px);
  }
}

#toTopBtn i {
  font-size: 24px; /* ขนาดของไอคอน */
  animation: bounce 2s infinite; /* แอนิเมชันของไอคอน */
}

/*--------------------------------------------------------------------------------------------------------------- จบปุ่ม back to top  */

/*--------------------------------------------------------------------------------------------------------------- เริ่มเส้น hr-01  */
.hr-01 {
  position: relative;
  width: 100%;
  height: 4px;
  margin: 20px auto;
  overflow: hidden;
}

.hr-01::before, .hr-01::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, #5e1914, #e6d376);
  animation: moving-stripes 4s linear infinite;
}

.hr-01::before {
  top: 0;
  left: -100%;
}

.hr-01::after {
  top: 0;
  left: 0%;
  animation-delay: -2s;
}

@keyframes moving-stripes {
  0% {
      left: -100%;
  }
  100% {
      left: 100%;
  }
}
/*--------------------------------------------------------------------------------------------------------------- จบเส้น hr-01  */
/*--------------------------------------------------------------------------------------------------------------- เริ่ม card hover */
/* สไตล์สำหรับการ์ด */
.cardh {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

/* สไตล์สำหรับการ์ดเมื่อเคอร์เซอร์อยู่เหนือ */
.cardh:hover {
  transform: scale(1.05); /* ขยายการ์ดเล็กน้อย */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
}

/* สไตล์สำหรับภาพในการ์ด */
.cardh img {
  transition: opacity 0.3s ease;
}

/* สไตล์สำหรับภาพเมื่อเคอร์เซอร์อยู่เหนือการ์ด */
.cardh:hover img {
  opacity: 0.8; /* ลดความชัดเจนของภาพ */
}

/* สไตล์สำหรับเนื้อหาของการ์ด */
.cardh .content {
  transition: background-color 0.3s ease;
}

/* สไตล์สำหรับเนื้อหาของการ์ดเมื่อเคอร์เซอร์อยู่เหนือการ์ด */
.cardh:hover .content {
  background-color: #f8f9fa; /* เปลี่ยนสีพื้นหลัง */
}

/*--------------------------------------------------------------------------------------------------------------- จบ card hover */
/*-----------------------------------------------------------------------------------------------------------------เริ่ม เพิ่มเอฟเฟกต์ซูมให้กับไอคอน */
.zoom {
  display: inline-block;
  animation: zoom 4s ease-in-out infinite;
}
/* กำหนด keyframes สำหรับการซูม */
@keyframes zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
/*-----------------------------------------------------------------------------------------------------------------จบ เพิ่มเอฟเฟกต์ซูมให้กับไอคอน */
/*-----------------------------------------------------------------------------------------------------------------เริ่ม รวงวัล แห่งความสำเร็จ */
.custom-link {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.custom-link::before,
.custom-link::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
}
.custom-link::before {
  background-color: #fd7e14 ;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
.custom-link::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  color:  #5e1914;
  font-style: italic;
}

.custom-link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.custom-link:hover::after {
  transform: translate3d(0, 0, 0);
}

.custom-link span {
  display: inline-block;
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.custom-link:hover span {
  transform: translate3d(-200%, 0, 0);
}

.custom-link {
  text-decoration: none;
  color: #5e1914;
  font-weight: 100;
  vertical-align: top;
}
/*-----------------------------------------------------------------------------------------------------------------จบ รวงวัล แห่งความสำเร็จ */