/* General Header Styles */
header .header-menu-bar {
    background-color: #007573;
}

/* Default styles for menu links */
header .header-menu-bar .menu-list > li > a {
    color: #ffffff !important; /* Default text color */
    background: transparent !important; /* Default background */
    position: relative;
    padding: 8px 20px; /* ลด padding บน-ล่างให้กระชับขึ้น */
    transition: color 0.3s, background 0.3s, padding 0.3s;
}

/* Hover and active styles for all menu items */
header .header-menu-bar .menu-list > li:hover > a,
header .header-menu-bar .menu-list > li.active > a {
    color: #333333 !important; /* Text color for hover and active state */
    background: #ffffff !important; /* Background color for hover and active state */
    border-radius: 0.3125rem;
}

/* เพิ่ม padding ด้านขวาให้เมนูที่มี submenu */
header .header-menu-bar .menu-list > li.has-submenu > a {
    padding-right: 2rem; /* เพิ่มพื้นที่ขวาให้ลูกศร */
}

/* Submenu arrow styles */
header .header-menu-bar .menu-list > li.has-submenu > a:after {
    content: '';
    position: absolute;
    right: 1rem; /* ขยับลูกศรออกจากขอบ */
    top: 50%;
    transform: translateY(-50%);
    border-top: 0.3125rem solid #ffffff; /* Default arrow color */
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    transition: border-top 0.3s;
}

/* Hover and active styles for submenu arrows */
header .header-menu-bar .menu-list > li.has-submenu:hover > a:after,
header .header-menu-bar .menu-list > li.active > a:after {
    border-top: 0.3125rem solid #333333 !important; /* Arrow color for hover and active state */
}
footer {
  background: #333333;
}
/*Service Box*/
.service-box {
  position: relative;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}
.service-box ul, .service-box ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-box ul {
  box-sizing: border-box;
  overflow: hidden;
}
.service-box ul li {
  width: 32.4%;
  position: relative;
  min-height: 1px;
  float: left;
  margin: 5px;
}
.service-box ul li a {
  margin: auto;
  margin-bottom: 15px;
  padding: 15px 15px;
  color: #ffffff;
  display: block;
  background-color: #3ea3cb;
  border-radius: 5px;
  font-size: 20px;
  text-align: center;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -o-transition-duration: .5s;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.service-box ul li a:hover {
  background: #213253;
  color: #ffffff;
  text-decoration: none;
}
@media (max-width: 576px) {
  .service-box ul li {
    width: 100%;
  }
}
.head-line2 {
  border-left: 15px solid #007573;
  padding-left: 5px;
}
/*Box link*/
.frame-2 ul {
  list-style-type: none;
  line-height: 20pt;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
.frame-2 li a {
  display: block;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  text-decoration: none;
  background: #F1F1F1;
  border-radius: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.frame-2 li a:hover {
  background-color: #007573;
  color: white;
}
body.dark-theme .service-box ul li a, body.dark-theme .box-link li a, body.dark-theme .footer {
  background: #333333;
}
body.dark-theme .side-menu ul li a:hover {
  background: #333333;
}
body.dark-theme .menu-list > li a {
  color: #ffffff;
}
/*more link*/
.more-link a {
  background-color: #ffffff;
  color: #333333;
  font-size: 14px;
  border-radius: 0px;
  border: 1px solid #ffffff;
  text-decoration: underline;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  float: right;
  font-family: 'Prompt', sans-serif;
  padding: 5px 10px;
}
.more-link a:hover {
  color: #ae1b1f;
  background-color: #ffff;
  text-decoration: underline;
  /*border:1px solid #43b990;*/
}

@media (min-width: 992px) {
  .card-img-2col, .card-img-3col {
    height: 10vw;
  }
}
.btn-port {
  border-radius: 0;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s
}
.btn-port.btn-porttheme {
  background: #f2f1eb;
  color: #222831;
  width: 100%;
  border-radius: 5px;
  text-align: left;
  font-size: 17px;
  margin: 1px 0;
  font-weight: 300;
  white-space: normal !important
}
.btn-port.btn-porttheme:hover, .btn-port.btn-porttheme:active {
  color: #FFF;
  background: #222831
}
.servicebox {
  position: relative;
  width: 100%;
  margin-top: 30px;
}
.servicebox .table .table-cell {
  font-size: 19px;
  line-height: 1.3333333;
  border-radius: 5px;
  padding: 16px 20px;
  background: #f2f1eb;
  color: #222831;
  text-align: center;
  text-transform: uppercase;
}
.servicebox a {
  margin: auto;
  color: #222831;
  display: block;
  font-weight: 500;
}
.servicebox .table .table-cell:hover {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  background: #222831;
  color: #fff;
  cursor: pointer;
}
.servicebox .table .table-cell:hover a {
  color: #fff;
  text-decoration: none;
}
.btn-instrument {
  color: #222831;
  width: 100%;
  text-align: left;
  font-size: 17px;
  margin: 1px 0;
  font-weight: 300;
  white-space: normal !important;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  border-left: 5px solid #8c1515
}
.btn-instrument:hover, .btn-instrument:active {
  color: #8c1515;
  border-left: 15px solid #8c1515
}
.list-underline {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.list-underline li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  background: #f2f1eb;
  margin-bottom: 10px;
  transition: all 0.3s;
  border-radius: 5px;
}
.list-underline li a:hover {
  background-color: #222831;
  color: white;
}
.head-line4 {
  text-transform: capitalize;
  margin-bottom: 10px;
  border-bottom: 5px solid #ED213A;
  /* width:50%; */
}
.head-line4 h2 {
  color: #232931;
  margin-bottom: 0;
  font-size: 250%;
}
.head-line4 h3 {
  border-bottom: 0px;
  font-size: 150%;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;
  margin-bottom: 0;
}
.block3d {
  /* border: 2px solid #45526C; */
  padding: 30px 10px;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
  background: #F8F5F1;
  border-radius: 20px;
}
.side-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.side-menu ul li a {
  display: block;
  background: #F1F1F1;
  border-radius: 5px;
  color: #333333;
  padding: 10px;
  text-decoration: none;
  margin-bottom: 15px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  border: 1px #F1F1F1 solid;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.side-menu ul li a:hover {
  font-weight: 400;
  background: #007573;
  border: 1px #007573 solid;
  color: #ffffff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.side-menu ul li.active a {
  background:#007573;
  border:1px #007573  solid;
  color:#ffffff;
}
.accordion-button.collapsed, .accordion-button:not(.collapsed) {
  font-size: 80%;
}
.tx-jpfaq h2.accordion-header {
  font-size: 130%;
}
.sidemenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
.sidemenu li a {
  font-size: 100%;
  display: block;
  background: #3ea3cb;
  border-radius: 5px;
  color: #ffffff;
  padding: 10px;
  text-decoration: none;
  margin-bottom: 15px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.sidemenu li a:hover {
  background: #213253;
  color: #FFFFFF;
}
.custom-pagination .arrow a {
  color: #FFFFFF;
  background: #333333;
}
.custom-pagination .arrow a:hover {
  color: #FFE227;
}

.PageTitle h2{
    font-family: Tahoma, Geneva, sans-serif;
    color:#3D8361;
}
h3.title-submenu{
  font-family: 'Tahoma', sans-serif;
  color: #1C6758;
}