header .header-menu-bar {
    background-color: #921a21;
}
/* 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;
    transition: color 0.3s, background 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;
}

/* Submenu arrow styles */
header .header-menu-bar .menu-list > li.has-submenu > a:after {
    content: '';
    position: absolute;
    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:#14171A;
}

/*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 #cf2d1e;
   padding-left:5px;
}

/*Box link*/
.box-link ul, .frame-2 ul {
  list-style-type: none;
  font-size: 100%;
  text-align:center;
  line-height: 20pt;
  margin: 0;
  padding: 0;
  width: 100%;
}
.box-link li a, .frame-2 li a {
  display: block;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  color: #333333;
  background-color: #eeeeee;
  transition: all 0.2s;
}
.box-link li a:hover, .frame-2 li a:hover {
  background-color: #921a21;
  color:#ffffff;
}

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 {
    color: #ffffff;
    font-size: 14px;
    float: right;
    background-color: #921a21;
    padding:5px 10px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    margin-bottom:18px;
    text-decoration: none;
}
.more-link a:hover {
    color: #fffff;
    background-color: #333
}

@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 #921a21;
  width: 100%;
}
.head-line4 h2{
  color:#232931;
  font-size:2rem;
  /*margin-bottom:-20px;*/
}
.head-line4 h3{
  border-bottom:0px;
    font-size: 18px;
  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;
  font-size:110%;
  margin: 0;
  padding: 0;
  width: 100%;
}
.side-menu ul li a {
  display: block;
  background: #921a21;
  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;
  border: 1px #921a21  solid;
}
.side-menu ul li a:hover {
  background:#581014;
  border:1px #581014  solid;
  color:#FFFFFF;
}
.side-menu ul li.active a {
  background: #581014;
  border: 1px #581014 solid;
  color:#FFFFFF;
  box-shadow: rgb(0 0 0 / 7%) 0px 1px 1px, rgb(0 0 0 / 7%) 0px 2px 2px, rgb(0 0 0 / 7%) 0px 4px 4px, rgb(0 0 0 / 7%) 0px 8px 8px, rgb(0 0 0 / 7%) 0px 16px 16px;
}

.accordion-button.collapsed, .accordion-button:not(.collapsed) {
    font-size: 80%;
}
.tx-jpfaq  h2.accordion-header {font-size:130%;}

.sidemenu ul {
  font-family: 'Prompt', sans-serif;
  font-weight: 300;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.sidemenu li a {
  display: block;
  color: #303841;
  padding: 5px 5px;
  background: #f2f2f2;
  margin-bottom: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.1s;
}
.sidemenu li a.active {
  background-color: #343434;
  color: #ffffff;
}
.sidemenu li a:hover:not(.active) {
  background-color: #ffffff;
  color: #921a21;
}

/*Social media*/
footer .social-media-list{
    margin-bottom:100px;
    /*float:left;*/
}
footer .social-media-list ul {
    float: left;
}
footer .social-media-list ul li a {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
footer .social-media-list ul li a.facebook {
    background:#4267B2;
}
footer .social-media-list ul li a.youtube{
    background:#FF0000;
}
footer .social-media-list ul li a.twitter{
    background:#14171A;
}
footer .social-media-list ul li a.instagram{
    background:#FCAF45;
}
footer .social-media-list ul li a.line{
    background:#21B94E;
}
footer .social-media-list ul li a.tiktok{
    background:#00F2EA;
}
footer .social-media-list ul li a:hover {
    background:#333333;
}


.sidebar-intro ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.sidebar-intro li a {
  display: block;
  color: #000;
  padding: 5px;
  text-decoration: none;
  margin-bottom: 5px;
  border: 1px solid #eee;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.submenu li.active a {
    background: #921a21;
    border:1px solid #921a21;
    color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.sidebar-intro li a.active {
  border-left: 5px solid #cc007a;
}
.sidebar-intro li a:hover:not(.active) {
  background:#921a21;
}

.hotlink{
   background: #FFFFFF;
   padding: 0.3rem 1rem;
   color: #333333;
   border-radius: 10px;
}

/*Social media*/
footer .social-media-list{
    margin-bottom:100px;
    /*float:left;*/
}
footer .social-media-list ul {
    float: left;
}
footer .social-media-list ul li a {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
footer .social-media-list ul li a.facebook {
    background:#4267B2;
}
footer .social-media-list ul li a.youtube{
    background:#FF0000;
}
footer .social-media-list ul li a.twitter{
    background:#14171A;
}
footer .social-media-list ul li a.instagram{
    background:#FCAF45;
}
footer .social-media-list ul li a:hover {
    background:#333333;
}

/*Border around each element*/

.ce-border img {
    border: 10px solid #FFFFFF;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
    display: block; /* ช่วยเรื่องการจัดวาง */
    max-width: 100%;
    height: auto;
    border-radius:10px;
}
/* ปลดล็อกการบดบังเงาสำหรับ gallery */
.ce-textpic, .ce-image, .ce-gallery, .ce-row, .ce-outer, .ce-inner {
    overflow: visible !important;
}
.ce-gallery figure { 
    margin-bottom:20px; 
}


 /*
 * Custom Tab/Navigation Styles (nav-tabs)
 * -------------------------------------------
 */
.nav-tabs {
    border-bottom: 1px solid #000000;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #333333;
    background-color: #fff;
    border-bottom: 5px solid #333333;
    border-color: #ffffff #ffffff #CF2D1E#ffffff;
}
.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover {
    border-color:#ffffff #ffffff #333333 #ffffff;
    border-bottom: 5px solid #ae1b1f;
}
.nav-tabs .nav-link:hover {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.nav-link{
    color:#333333;
    font-size:1.2rem;
    font-family: 'athitimedium', sans-serif;
}
.nav-link:focus,.nav-link:hover {
    color: #ae1b1f;
}
@media (max-width: 576px){
    .nav-link{
        font-size:1rem;
    }
}