html,body { overflow-x: hidden; /* Prevent scroll on narrow devices */ }
body {
  padding-top: 56px;
  padding-bottom: 36px;
  font-family: 'Sarabun', sans-serif;
  color: #5a5a5a;
}

a:link { text-decoration: none; }

/* Offcanvas
-------------------------------*/
@media (max-width: 991.98px) {
    .offcanvas-collapse {
      position: fixed;
      top: 56px; /* Height of navbar */
      bottom: 0;
      left: 100%;
      width: 100%;
      padding-right: 1rem;
      padding-left: 1rem;
      padding-bottom: 2rem;
      overflow-y: auto;
      visibility: hidden;
      background-color: #343a40;
      transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    }
    .offcanvas-collapse.open {
      visibility: visible;
      transform: translateX(-100%);
    }
}
/* END Offcanvas
-------------------------------*/

/* NAV
-------------------------------*/
.btn-min-width-120 { min-width: 120px; }
.nav-min-width { min-width: 75px; }
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}
.nav-underline .nav-link:hover { color: #007bff; }
.nav-underline .active { font-weight: 500; color: #343a40; }
.bg-purple { background-color: #6f42c1; }
.dropdown-divider {
  border: 1px solid rgba(0, 0, 0, .15);
  margin: 0px 5px;
  color: rgb(212, 212, 214);
}
/* END NAV
-------------------------------*/

/* HEADER
-------------------------------*/
.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.form-control-dark {
  color: #fff;
  background-color: var(--bs-dark);
  border-color: var(--bs-gray);
}
.form-control-dark:focus {
  color: #fff;
  background-color: var(--bs-dark);
  border-color: #fff;
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}
.bi { vertical-align: -.125em; fill: currentColor; }
.text-small { font-size: 85%; }
.dropdown-toggle { outline: 0; }

/* Marketing heading
-------------------------------*/
.marketing .col-lg-4 { margin-bottom: 1.5rem; text-align: center; }
.marketing h2 { font-weight: 400; }
.marketing .col-lg-4 p { margin-right: .75rem; margin-left: .75rem; }
/* rtl:end:ignore */
.featurette-divider { margin: 5rem 0; /* Space out the Bootstrap <hr> more */ }
.featurette-heading { font-weight: 300; line-height: 1; /* rtl:remove */ letter-spacing: -.05rem; }

/* Image heading
-------------------------------*/
.image-heading {
  position: relative;
  max-height: 400px;
  margin: 0 auto;
}
.image-heading img {vertical-align: middle; max-height: 400px;}  
.image-heading .image-heading-content {
  position: absolute;
  top: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
@media (max-width: 380px) {
    .image-heading {
      position: static;
      max-height: inherit;
      display: block;
    }
    .image-heading .image-heading-content {
      position: static;
      display: block;
      max-height: inherit;
      top: none;
    }
    .post-text { display: block; }

}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* END HEADER
-------------------------------*/

/* TRAPTOP
-------------------------------*/
.trap-top {
  display: none;
  position: fixed;
  bottom: 95px;
  right: 20px;
  z-index: 999;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: rgba(0, 119, 255, 0.596);
  color: white;
  cursor: pointer;
  padding: 1px 10px 5px 10px;
  border-radius: 4px;
}
.trap-top:hover {background-color: rgba(85, 85, 85, 0.425); color: #fff; }
/* END TRAPTOP
-------------------------------*/

/* ICON LIST
-------------------------------*/
.icon-list {
  padding-left: 0;
  list-style: none;
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: .25rem;
}
.icon-list li::before {
  display: block;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  /* margin-right: .5rem; */
  content: "";
  /*
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
  */
}
/* END ICON LIST
-------------------------------*/

.youtube-vedio {
  min-width: 100%;
  min-height: 225px;
}


/* FOOTER
-------------------------------*/
.ms-footer { font-size: 28px; }
.bi-youtube { background-color: none; padding: 1px 7px; border-radius: 4px; color: red;}
.bi-line { background-color: none; padding: 1px 7px; border-radius: 4px; color: limegreen;}
.bi-facebook { background-color: none; padding: 1px 7px; border-radius: 4px; color: blue;}
.bi-twitter { background-color: none; padding: 1px 7px; border-radius: 4px; color: skyblue;}
.bi-instagram { background-color: none; padding: 1px 7px; border-radius: 4px; color: sienna;}
.link-muted:hover { border-radius: 4px; padding: 8px 1px; }
.link-muted:hover {
  background-color: rgba(172, 172, 172, 0.425);
  border-radius: 4px;
  padding: 8px 1px;
}
.social-link { text-align: right; }
@media (max-width: 700px) {
  .inc-company, .social-link {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
}
/* END FOOTER
-------------------------------*/

/** Elerment Class */
.font-b {
  font-weight: bold;
}


/* PAGENATION --------- */
.PageNation {
	display: inline-block;
	margin-top: 5px;
	font-size: 100%;
	}
.PageNation a {
	border: 1px solid #FFA500;
	margin-left: 2px;
	margin-right: 2px;
    padding: 7px 9px;
    text-decoration: none;
	color: black;
    transition: background-color .3s;
	}
.PageNation a.active {
    background-color: #1E90FF;
    color: white;
	}
.PageNation a:hover:not(.active) { background-color: #ddd; }