/* CSS HEX 
--emerald: #25C988ff;
--zomp: #18AD92ff;
--midnight-green: #003845ff;
--caribbean-current: #2E6874ff;
--midnight-green-2: #074455ff;
--prussian-blue: #102538ff;
--midnight-green-3: #1D5C65ff;
--emerald-2: #0BC984ff;
--prussian-blue-2: #192F44ff;
--cadet-gray: #8D9FA6ff;

--alabaster: #EAECE1ff;
--alabaster-2: #E1E2D9ff;
--french-gray: #C9CED9ff;
--midnight-green: #275A64ff;
--blue-munsell: #42828Fff;

--background-origin: #4EAE65
--background-origin: #172021
*/

/* google font */
/* @import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100;300;500;700&family=Kanit:wght@200;300;400;500;600;700;800;900&family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100;300;500;700&family=Kanit:wght@200;300;400;500;600;700;800;900&family=Noto+Sans+Thai:wght@100;300;500;700;900&family=Roboto:wght@400;500;700&family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap');
.rounded { border-radius: 0 !important;}
.anuphan {font-family: 'Kanit', sans-serif !important;}
.kanit {font-family: 'Kanit', sans-serif !important;}
.sarabun {font-family: 'Sarabun', sans-serif !important;}
.roboto {font-family: 'Roboto', sans-serif;}
.noto {font-family: 'Noto Sans Thai', sans-serif;}
.time {font-family: 'Anuphan', sans-serif !important; font-weight: 300; font-size: 14px; color: #50ae64}

body { background-color: #172021;}

.logo {
  width: 100%;
  max-width: 110px;
}

.bg-gray-transparent {
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(224,224,224,0.1) 80%);
}

.text-green {
  color:#50ae64
}

.active>.page-link, .page-link.active {
  z-index: 3;
  color: #fff  !important;
  background-color: #50ae64  !important;
  border-color:#50ae64 !important;
}

.page-item {
   border-radius: 0 !important;
}
.page-link  {
  color:#50ae64;
  background: none;
    border: none;
}
.page-link:hover  {
  color:#60d77a;
  background: none;
    border: none;
}

.btn-danger-live {
  border-color: none !important;
  background-color: #dd4341 !important;
  color: #fff !important;
  padding: 2px 7px !important;
  margin-top: -1px; 
  margin-left: 20px; 
  font-size: 16px;
}

/* btn-mint */
.btn-mint { 
    color: #ffffff; 
    background-color: #50ae64; 
    border-color: #50ae64; 
} 
   
.btn-mint:hover, 
.btn-mint:focus, 
.btn-mint:active, 
.btn-mint.active, 
.open .dropdown-toggle.btn-mint { 
    color: #ffffff; 
    background-color: #54b86a; 
    border-color: #54b86a; 
} 
   
.btn-mint:active, 
.btn-mint.active, 
.open .dropdown-toggle.btn-mint { 
    background-image: none; 
} 
   
.btn-mint.disabled, 
.btn-mint[disabled], 
  fieldset[disabled] .btn-mint, 
  .btn-mint.disabled:hover, 
  .btn-mint[disabled]:hover, 
  fieldset[disabled] .btn-mint:hover, 
  .btn-mint.disabled:focus, 
  .btn-mint[disabled]:focus, 
  fieldset[disabled] .btn-mint:focus, 
  .btn-mint.disabled:active, 
  .btn-mint[disabled]:active, 
  fieldset[disabled] .btn-mint:active, 
  .btn-mint.disabled.active, 
  .btn-mint[disabled].active, 
  fieldset[disabled] .btn-mint.active { 
    background-color: #0BC984; 
    border-color: #0BC984; 
  } 
   
  .btn-mint .badge { 
    color: #0BC984; 
    background-color: #ffffff; 
  }

  /* navbar-top */
  .navbar-top {
    font-family: 'Anuphan', sans-serif;
    /* background: linear-gradient(159deg, #25C988ff,#18AD92ff 100%); */
    background-color: #00000000 !important;
  }

  /* nav-link */
  .nav-link {
    color: #fff;
    padding: 0 !important;
    margin-left: 20px;
    border-bottom: #ffffff00 2px solid;
    text-shadow: 2px 2px 3px #0000005d;
    font-size: 16px;
 }
  .nav-link:hover { 
    color:#fff; 
    border-bottom: #25C988ff 2px solid;
    /* margin-left: 15px; */
 }

 .nav-link:focus { 
  color:#fff; 
  border-bottom: #25C988ff 2px solid;
  /* margin-left: 15px; */
}

 /* navber top icon */
 .navbar-top-icon>img { scale: 1; transition: 0.3s;}
 .navbar-top-icon>img:hover { scale: 1.4; transition: 0.3s;}

 .navbar-top-icon {
    margin-right: 7px;
    color:#fff;
    font-size: 30px;
 }

 .navbar-top-icon-group{
   margin-top: -5px; 
 }

 .btn-search {
  margin-left: 0px;
  border-radius: 50em;
 }

 .input-search {

  background-color: #172021 !important;
  border-bottom: 2px solid #50ae64 !important;

 }

 .slide-top {
  /* border-radius: 9px !important; */
  overflow: hidden;
  margin-bottom: 20px;
 }

 .slide-img {
  background-size: cover;
  background-position: center center;
 }

 .transparent-bg-img {
  background-size: cover;
  background-position: center center;
 }

 .text-left {
  text-align: left !important;
 }

 .icon-footer {
  width:25px;
  height: auto;
}

.link-footer {
  color: #EAECE1ff !important;
  text-decoration: none;
  cursor: pointer !important;
  font-weight: 300;
}
.link-footer:hover {
  color: #ffffff !important;
  cursor: pointer !important;
}

.max-w-1400 {
  max-width: 1300px !important;
}

.max-w-768 {
  width : 481px !important;
}

.box-shadow {
  box-shadow:2px 2px 12px rgba(10,10,10,0.4)
}

.header-rounded {
  -webkit-border-top-left-radius: 7px;
  -webkit-border-bottom-right-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -moz-border-radius-bottomright: 7px;
  border-top-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.thumb {
   text-decoration: none;
   color: #fff;

}

.headtitleskew {
  -moz-transform: skew(0deg, 355deg);
  -webkit-transform: skew(0deg, 355deg);
  -o-transform: skew(0deg, 355deg);
  -ms-transform: skew(0deg, 355deg);
  transform: skew(0deg, 355deg);
  box-shadow: 3px 3px 11px rgb(0 0 0 / 31%);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  margin-top: -10px;
}

.sub-category>a {
  text-decoration: none;
  color: #15454f;
}

.descrip-slide {
  font-size: 16px !important;
  text-decoration: none;
  font-weight: 200;
  line-height: 19px;
  color: #fdfdfd;
}

.head-hit {
  font-size: 15px;
}

.nav-box-shadow {
margin-bottom: 16px !important;
    box-shadow: 0 4px 9px -5px #07090a;
}

.footer-box-shadow {
  margin-bottom: 16px !important;
      box-shadow: 0 4px 9px 5px #07090a;
  }


.col-container {
  display: table;
  width: 100%;
}
.col-container-cell {
  display: table-cell;
  padding: 16px;
}



/* btn-outline-mint */
.btn-outline-mint { 
  color: #ffffff; 
  background-color: #ffffff00; 
  border-color: #ffffff; 
} 
 
.btn-outline-mint:hover, 
.btn-outline-mint:focus, 
.btn-outline-mint:active, 
.btn-outline-mint.active, 
.open .dropdown-toggle.btn-outline-mint { 
  color: #fff; 
  background-color: #00000000; 
  border-color: #fff; 
} 
 
.btn-outline-mint:active, 
.btn-outline-mint.active, 
.open .dropdown-toggle.btn-outline-mint { 
  background-image: none; 
} 
 
.btn-outline-mint.disabled, 
.btn-outline-mint[disabled], 
fieldset[disabled] .btn-outline-mint, 
.btn-outline-mint.disabled:hover, 
.btn-outline-mint[disabled]:hover, 
fieldset[disabled] .btn-outline-mint:hover, 
.btn-outline-mint.disabled:focus, 
.btn-outline-mint[disabled]:focus, 
fieldset[disabled] .btn-outline-mint:focus, 
.btn-outline-mint.disabled:active, 
.btn-outline-mint[disabled]:active, 
fieldset[disabled] .btn-outline-mint:active, 
.btn-outline-mint.disabled.active, 
.btn-outline-mint[disabled].active, 
fieldset[disabled] .btn-outline-mint.active { 
  background-color: #FFFFFF00; 
  border-color: #ffffff; 
} 
 
.btn-outline-mint .badge { 
  color: #ffffff; 
  background-color: #2dba8d00; 
}

/* div-hr-line */
.div-hr-line {
  background-color: #ffffff00;height: 1px;    margin-left: 25px !important;
  margin-right: 10px !important;background: linear-gradient(159deg, rgba(255, 255, 255, 0) 100%,rgba(255, 255, 255, 0));
}

/* font-thin */
.text-thin {
  font-weight: 300;
}

/* onhover seemore then fa-angle-double-right move right 10px */
.seemore {
  position: relative; /* Make the anchor element a reference for absolute positioning */
  display: inline-block;
  transition: all 0.3s ease; /* Add a smooth transition effect */

  /* Additional styling for the button appearance */
  padding: 5px 10px;
  /* border: 1px solid #ffffff; */
  color: #ffffff;
  text-decoration: none;
  border-radius: 0;
}

.seemore:hover .fa-angle-double-right {
  position: relative; /* To allow absolute positioning */
  left: 5px; /* Move the icon 10px to the right */
  color: #0BC984;
}

/* Additional styling for the icon */
.fa-angle-double-right {
  transition: all 0.3s ease; /* Add the same transition for smooth movement */
}

.cursor-pointer {
  cursor: pointer;
}

/* seemore  */
.seemore {
  text-decoration : none;
  font-size:1.2em;
}

.head-hot {
  font-size: 16px;
}
.sub-category-hot {
  font-size: 13px;
}  
.sub-category { margin-top: 10px;}
.sub-category>span {
  font-weight: 100;
  /* background-color: #50ae64; */
  /* padding: 1px 3px; */
  font-size: 13px;
  color: #ff5656;
}


.text-size-22 {
  font-size: 22px;
}

.detail-s { color: #fff;}

.detail>p>a { color: #fff !important; text-decoration: none !important;}


.label-content {
  width: 100%;
  color: #50ae64;
  border-bottom: 3px solid #50ae64;
  padding: 0;
  padding-bottom: 6px;
  margin-bottom: 15px !important;
  font-size: 36px !important;
}

.label-content>div {
  color: #50ae64;
  background-color: #172121;
  padding-right: 7px;
  /* height: 25px; */
  /* position: relative; */
  margin-bottom: -11px;
  padding-bottom: 0px !important;
  width: fit-content;
  max-width: none;
}

.card-img-top {
  border-radius: 0 !important;
}

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

#mobile-menu { display: none;}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 1px) and (max-width: 1214.98px) { 
  nav { display: none !important;}
  #mobile-menu { display: block; font-size: 30px; font-weight: 300; }
  #mobile-menu>span {
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #50ae64;
    padding: 0px 15px 4px 15px;
    background-color: #172121;
    margin-right: 15px;
    border-radius: 10px;
  }
}



/* Medium devices (tablets, 768px and up) */
@media (min-width:  1197px) and (max-width: 1330.98px) { 
   /* nav { display: none !important;} */
   .logo { max-width: 85px !important;}
   .navbar-expand-sm .navbar-nav .nav-link { font-size: 16px !important; }
   #mobile-menu { display: none;}
 }

 .pafe-table-body-text { text-decoration: none; color: #172121  !important;}


.procurement-btn {
  padding: 3px 15px;
  border: 2px solid #50ae64 ;
  border-radius: 50em;
  text-align: center;
  font-size: 1.2em;
}