/* CSS Document */

/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* html5doctor.com/html-5-reset-stylesheet/ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }



*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* box-sizing: border-box; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden;  */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


:root{
  --white: #fff;
  --black: #000;
  --default:#000; 
  --primary: #0061fe;

  --filter-white: invert(100%) sepia(98%) saturate(6%) hue-rotate(63deg) brightness(103%) contrast(100%);
  --filter-primary: invert(29%) sepia(89%) saturate(4628%) hue-rotate(214deg) brightness(99%) contrast(102%);
  --filter-gray: invert(98%) sepia(20%) saturate(411%) hue-rotate(174deg) brightness(99%) contrast(94%);

  --txt-menu: 18px;
  --txt-20: 20px;
  --mp100: 100px;
  --txt-title: 55px;

}
@media (max-width: 1599px) {
  :root {
    --txt-menu: 16px;
    --txt-20: 18px;
    --txt-title: 56px;
  }
}
@media (max-width: 1199px) {
  :root {
    --txt-menu: 13px;
    --txt-20: 16px;
    --mp100: 70px;
    --txt-title: 40px;
  }
}
@media (max-width: 991px) {
  :root {
    --txt-menu: 18px;
    --txt-title: 30px;
  }
}
@media (max-width: 576px) {
  :root {
    --txt-menu: 16px;
    --mp100: 50px;
  }
}


/* -- CUSTOM CSS -- */
html, body {width:100%; height:100%; padding:0px; margin:0px}

body{ 
	background-color:#fff; 
}
body{ font-family: 'Poppins','Prompt', sans-serif; font-size:100%; font-weight:400; color:var(--default); text-decoration:none; }
img {
	border:0px;
}
.img-responsive { display: block; height: auto; max-width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
strong{ font-weight: 600; }
figure{ margin: 0 0 1rem; }

a,
a:hover{
  text-underline-offset: 7px;
  text-decoration:none;
  color: inherit;
  outline:0; transition: all 0.3s ease;
}
a:focus {
  text-decoration:none;
  outline:0;
}
button{ border: 0; cursor: pointer; background: transparent; padding: 0; margin: 0; }
.btn.focus, .btn:focus{
	outline:0;
	box-shadow: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none;
}
input,
select,
textarea{
  background-clip: padding-box;
}
address{ font-style: normal; }




.div-container--fluid{ width: 100%; position: relative; margin: 0 auto; }


.div-container{
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .div-container{
    max-width: 540px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .div-container{
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .div-container{
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .div-container {
    max-width: 1230px;
  }
}
@media (min-width: 1600px) {
  .div-container {
    max-width: 1430px;
  }
}



.build-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-left: -10px; margin-right: -10px;
}
.build-col{
  position: relative;
  width: 100%;
  padding-left: 10px; padding-right: 10px;
}

.box-card-col2 .build-col{
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.box-card-col3 .build-col{
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.box-card-col4 .build-col{
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}


.flex-row-reverse{ flex-direction: row-reverse; }

@media (max-width: 991px){

  .box-card-col2 .build-col{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .box-card-col3 .build-col,
  .box-card-col4 .build-col{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

}
@media (max-width: 576px){

  .build-row{ margin-left: -8px; margin-right: -8px; }
  .build-col{ padding-left: 8px; padding-right: 8px; }

  .box-card-col3 .build-col{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .box-card-col4 .build-col{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }


}



.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem; font-family: 'Poppins', 'Prompt', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid rgba(255,255,255,0.5);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control::placeholder {
  color: var(--white);
  opacity: 1;
}
select.select {
  width: 100%; 
  background: transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem; font-family: 'Poppins', 'Prompt', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  outline: none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  background-image: url(../images//icon/arrow-down.svg); filter: var(--filter-white); 
  background-repeat: no-repeat;
  background-position: 93% center; border: 1px solid rgba(0, 0, 0, 0.5);
}
select.select:valid{
  color: #333; 
}


.mt-4{ margin-top: 2rem; }
.mb-4{ margin-bottom: 2rem; }
.mb-3{ margin-bottom: 1.25rem; }

.c-primary{ color: var(--primary); }
.c-white{ color: var(--white); }

p{ font-size: var(--txt-20); line-height: 1.6; margin-bottom: 30px; }
p:last-of-type{ margin-bottom: 0; }

.text-center{ text-align: center; }

.bg-f4f7fd{ background-color: #f4f7fd; }
.bg-e9f0ff{ background-color: #e9f0ff; }


/**********************************************************/
/************************** nav ***************************/
/**********************************************************/

.div-nav{ position: absolute; width: 100%; top: 0; left: 0; z-index: 9999; }
.nav-container--bg{ background-color: transparent; padding: 0; width: 90%; margin: 0 auto; }
.nav-container{ display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav-logo{ width: 300px; margin: 20px 0; line-height: 0; }
.nav-logo img{ filter: var(--filter-white); }

.nav-menu{ display: flex; justify-content: flex-end; padding-right: 100px; padding-top: 34px; }
.nav-menu ul{ display: flex; justify-content: center; align-items: center; gap: 30px; }
.nav-menu ul li{ display: inline-block; cursor: pointer; position: relative; padding-bottom: 25px; }
.nav-menu ul li:first-child{ padding-left: 0; }
.nav-menu ul li:last-child{ padding-right: 0; }
.nav-menu ul li a{ display: block; font-size: var(--txt-menu); color: var(--white); font-weight: 600; position: relative;  }
.nav-menu ul li a::before{ content: ''; position: absolute; bottom: -29px; right: 0; left: 0; height: 4px; background-color: var(--primary); transform: scaleX(0) translateZ(0); transform-origin: 100% 50%; transition: transform .6s cubic-bezier(.37,.31,0,1); }
.nav-menu ul li:hover a::before,
.nav-menu ul li a.active::before{ transform: scaleX(1) translateZ(0); transform-origin: 0 50%; }
/* .nav-menu ul li a:hover, .nav-menu ul li a.active{ color: var(--primary); } */


/* .nav-menu ul li.current-menu-parent a,
.nav-menu ul li.current-menu-item a{ color: var(--primary); } */
.nav-menu ul li.current-menu-ancestor a::before,
.nav-menu ul li.current-menu-parent a::before,
.nav-menu ul li.current-menu-item a::before,
.nav-menu ul li.menu-item-has-children:hover > a::before{ transform: scaleX(1) translateZ(0); transform-origin: 0 50%; }

.nav-menu ul li.menu-item-has-children{ padding-right: 20px; }
.nav-menu ul li.menu-item-has-children::after{ content: ''; position: absolute; top: 5px; right: 0; background-image: url('../images/icon/arrow-down.svg'); width: 11px; height: 7px; background-repeat: no-repeat; background-size: cover; filter: var(--filter-white); }

.nav-menu ul li.menu-item-has-children > ul{ display: none; position: absolute; background-color: var(--white); min-width: 230px; top: 47px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.07); }
.nav-menu ul li.menu-item-has-children:hover > ul{ display: block; z-index: 9; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); }

.nav-menu ul li.menu-item-has-children > ul li{ display: block; padding: 0; margin-top: 0; }
.nav-menu ul li.menu-item-has-children > ul li a{ display: block; padding: 14px 10px; border-bottom: 1px solid #dcdcdc; color: var(--black); font-weight: 400; line-height: 1.3; }
.nav-menu ul li.menu-item-has-children > ul li a::before{ display: none; }
.nav-menu ul li.menu-item-has-children > ul li:last-of-type a{ border-bottom: 0; }
.nav-menu ul li.menu-item-has-children > ul > li.current-menu-parent > a,
.nav-menu ul li.menu-item-has-children > ul > li.current-menu-item > a,
.nav-menu ul li.menu-item-has-children > ul li a:active,
.nav-menu ul li.menu-item-has-children > ul li a:hover{ background-color: #f3f3f3; color: var(--primary); }

.subbhead{ display: flex; align-items: center; gap: 5px; }
.arrow-down img{ width: 13px; filter: var(--filter-white); }


.nav-menu ul.submenu2{ display: none; position: absolute; top: -1px; left: 100%; min-width: 220px; background-color: #f7f7f7; border-radius: 3px; border: 1px solid rgba(0,0,0,0.07); }
.nav-menu ul.submenu2 > li a{ display: block; padding: 16px 10px; border-bottom: 1px solid #dcdcdc; color: var(--black); font-weight: 400; }
li.has-submenu:hover .submenu2{ display: block; }


.nav-menu ul li.menu-item-has-children:hover > ul > li.menu-item-has-children > ul,
.nav-menu ul li.menu-item-has-children:hover > ul.sub-menu > li.menu-item-has-children > ul.sub-menu,
.nav-menu ul li.menu-item-has-children:hover > ul.submenu > li.menu-item-has-children > ul.submenu{
  display: none;
  position: absolute;
  top: -1px;
  left: 100%;
  min-width: 230px;
  background-color: #f7f7f7;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.07);
  z-index: 10;
}
.nav-menu ul li.menu-item-has-children:hover > ul > li.menu-item-has-children:hover > ul,
.nav-menu ul li.menu-item-has-children:hover > ul.sub-menu > li.menu-item-has-children:hover > ul.sub-menu,
.nav-menu ul li.menu-item-has-children:hover > ul.submenu > li.menu-item-has-children:hover > ul.submenu{
  display: block;
}

.nav-menu ul li.menu-item-has-children:hover > ul > li.menu-item-has-children::after,
.nav-menu ul li.menu-item-has-children:hover > ul.sub-menu > li.menu-item-has-children::after,
.nav-menu ul li.menu-item-has-children:hover > ul.submenu > li.menu-item-has-children::after{
  top: 20px;
  right: 10px;
  filter: none;
  transform: rotate(270deg);
}


.nav-right{ position: absolute; top: 36px; right: 0; display: flex; align-items: center; gap: 20px; }
.nav-search img{ filter: var(--filter-white); width: 16px; }

.nav-lang{ position: relative; cursor: pointer; }
.nav-lang span{ font-size: var(--txt-menu); color: var(--white); font-weight: 600; }
.nav-lang span img{ filter: var(--filter-white); width: 13px; }
.choose-lang{ display: none; position: absolute; top: 20px; right: 0; background-color: var(--white); border: 1px solid rgba(0,0,0,0.07); border-radius: 3px; }
.choose-lang a{ display: block; padding: 8px 16px; color: var(--black); font-weight: 400; }
.choose-lang a:hover{ background-color: #f3f3f3; color: var(--primary); }
.nav-lang:hover .choose-lang{ display: block; }

.navmenu-lang{ display: none; }

.scrolDisabled{
  overflow: hidden;
  /* position: fixed; */
  padding-right: var(--removed-body-scrollbar-width, 0px); 
}

.div-nav.fixHeader{ background-color: #f3f3f3; position: fixed; z-index: 90; }
.div-nav.fixHeader .nav-menu ul li a,
.div-nav.fixHeader .nav-lang span{ color: #000; }
.div-nav.fixHeader .nav-logo img,
.div-nav.fixHeader .arrow-down img,
.div-nav.fixHeader .nav-search img,
.div-nav.fixHeader .nav-lang span img{ filter: none; }

.div-nav.fixHeader .nav-menu ul li.menu-item-has-children::after{ filter: none; }

.body-pagedetail .div-nav.fixHeader{ position: absolute; }

.content-pd{ padding-top: 70px; }



@media (max-width: 1599px){

  .nav-logo{ width: 250px; }
  .nav-menu ul li a::before{ bottom: -27px; }
  .nav-menu ul li.menu-item-has-children > ul{ top: 43px; }
  .nav-right{ top: 34px; }

}
@media (max-width: 1199px){

  .nav-logo{ width: 180px; }
  .nav-menu{ padding-top: 30px; }
  .nav-menu ul{ gap: 20px; }
  .nav-menu ul li a::before{ bottom: -26px; }
  .nav-menu ul li.menu-item-has-children > ul{ top: 38px; }
  .nav-right{ top: 27px; }

}
@media (max-width: 991px){

  .nav-logo{ width: 200px; margin: 0; }
  .nav-container--bg{ padding: 10px 20px; width: 100%; height: 100%; }

  .nav-container{ display: block; padding: 0; height: 100%; }
  .div-nav{
    position: fixed; width: 100%; display: block;
    padding: 0; transform: translate3d(0px, 0px, 0px);
  }
  .div-nav.navOpen{ height: 100%; background-color: #f3f3f3; 
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.07);
    box-shadow: 0 2px 4px rgba(0,0,0,0.07); }

  .nav-menu{ display: none; padding-right: 0; }
  .nav-menu.navOpen{ display: block; width: 100%; height: 100%; padding-top: 30px; padding-bottom: 50px; margin-top: 10px; z-index: 999; overflow: scroll; }
  .nav-menu.navOpen ul{ display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
  .nav-menu.navOpen ul li{ display: block; padding: 0; width: 100%; }
  .nav-menu.navOpen ul li a{ display: inline-block; color: #000; }
  .nav-menu ul li a::before{ bottom: -15px; display: none; }

  .nav-menu ul li.current-menu-parent a,
  .nav-menu ul li.current-menu-item a{ color: var(--primary); }

  .nav-menu ul li.menu-item-has-children:hover > ul{ box-shadow: none; }

  .nav-menu.navOpen > ul > li.menu-item-has-children > ul{ position: relative; width: 100%; margin: 0 auto; top: auto; margin-top: 25px; background-color: transparent; border: 0; padding-left: 10px; display: none; }
  .nav-menu.navOpen > ul > li.menu-item-has-children.active > ul{ display: block; }
  .nav-menu.navOpen > ul > li.menu-item-has-children:hover > ul{ display: none; }
  .nav-menu.navOpen > ul > li.menu-item-has-children.active:hover > ul{ display: block; }
  .nav-menu.navOpen ul li.menu-item-has-children > ul li a{ border-bottom: 0; padding: 8px 0; line-height: 1.5; }
  .nav-menu.navOpen > ul > li.menu-item-has-children::after{ right: 0; top: 5px; filter: none; width: 16px; height: 10px; margin-right:10px;}

  .nav-menu.navOpen ul li.menu-item-has-children > ul li > ul li a{ font-size: 16px; }

  .nav-menu.navOpen > ul > li.menu-item-has-children.active > ul > li.menu-item-has-children > ul,
  .nav-menu.navOpen > ul > li.menu-item-has-children.active > ul > li.menu-item-has-children > ul.sub-menu,
  .nav-menu.navOpen > ul > li.menu-item-has-children.active > ul > li.menu-item-has-children > ul.submenu,
  .nav-menu ul.submenu2{
    display: block;
    position: relative;
    left: 0;
    top: auto;
    min-width: 100%;
    gap: 0;
    padding: 6px 16px;
    margin: 0;
    background-color: transparent;
    border: 0;
  }
  .nav-menu.navOpen > ul > li.menu-item-has-children.active > ul .menu-item-has-children::after,
  .nav-menu.navOpen > ul > li.menu-item-has-children.active > ul > li.menu-item-has-children::after,
  .nav-menu.navOpen > ul > li.menu-item-has-children.active > ul > li.menu-item-has-children > ul .menu-item-has-children::after{ display: none; }
  .nav-menu ul.submenu2 li a{ line-height: 1.3;}

  .nav-right{ right: 40px; top: 6px; }
  .nav-right .nav-lang{ display: none; }
  .nav-menu.navOpen .navmenu-lang{ font-size: var(--txt-menu); font-weight: 600; display: flex; gap: 20px; margin-top: 30px; }

  .div-nav.navOpen .nav-logo img{filter: none;}
  .div-nav.navOpen .nav-search img{ filter: var(--black); }

  .subbhead{ justify-content: space-between; }
  .content-pd{ padding-top: 61px; }

  .div-nav.fixHeader{ padding: 0; }


#nav-icon1 {
  width: 25px;
  height: 20px;
  position: fixed;
  margin: 0;
  top: 16px;
  right: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 1001;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 25px;
  background: var(--white);
  border-radius: 0px;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.div-nav.navOpen #nav-icon1 span,
.div-nav.fixHeader #nav-icon1 span{ background-color: var(--black); }

#nav-icon1 span:nth-child(1) {
  top: 0;
}

#nav-icon1 span:nth-child(2) {
  top: 8px;
}

#nav-icon1 span:nth-child(3) {
  top: 16px;
}

#nav-icon1.open span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  right: -30px;
}

#nav-icon1.open span:nth-child(3) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


}
@media (max-width: 576px){

  .nav-logo{ width: 150px; }
  .nav-search img{ width: 16px; }
  .nav-right{ top: 3px; }
  #nav-icon1{ top: 12px; }

  .nav-menu.navOpen ul li.menu-item-has-children > ul li > ul li a{ font-size: 14px; }

}


/**********************************************************/
/************************* footer *************************/
/**********************************************************/

.footer{ background-color: var(--primary); color: var(--white); }
.footer a{ font-size: 16px; line-height: 1.5; color: var(--white); }
.footer a:hover{ text-decoration: underline; }

.footer-content{ display: flex; justify-content: space-between; flex-flow: row wrap; gap: 20px; padding: 70px 0; }
.footer-content .ft-detail{ width: 350px; }
.ft-detail .ft-logo{ width: 320px; margin-bottom: 20px; }
.ft-detail p{ font-size: 16px; line-height: 1.5; margin-bottom: 30px; }
.ft-detail .ft-social{ display: flex; align-items: center; gap: 20px; }
.ft-detail .ft-social a img{ width: 44px; filter: var(--filter-white); }
.ft-detail .ft-social a:hover img{ opacity: 0.8; }
.ft-detail .contact-qr img{ width: 85px; height: 85px; margin-bottom: 0; }

.ft-title{ font-size: 20px; line-height: 1.2; font-weight: 600; margin-bottom: 20px; }
.ft-menu{ padding-top: 17px; }
.ft-menu ul li{ margin-bottom: 15px; }

.ft-contact{ width: 350px; padding-top: 17px; }
.ft-contact ul li{ display: flex; gap: 10px; margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
.ft-contact ul li:last-of-type{ margin-bottom: 0; }
.ft-contact ul li img{ width: 20px; filter: var(--filter-white); }

.footer-bottom{ display: flex; justify-content: space-between; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.2); }

.copyright{ font-size: 16px; line-height: 1.5; color: var(--white); }

.link-policy ul{ display: flex; align-items: center; flex-flow: row wrap; list-style: none; margin: 0; padding: 0; }
.link-policy li::after{ content: '|'; margin: 0 10px; color: var(--white); }
.link-policy li:last-child::after{ display: none; }


@media (max-width: 1599px){

  .ft-detail .ft-logo{ width: 260px; }
  .ft-detail .ft-social a img{ width: 40px; }
  .ft-menu, .ft-contact{ padding-top: 12px; }
  .ft-title{ font-size: 17px; }

}
@media (max-width: 1199px){

  .footer-content .ft-detail, .ft-contact{ width: 280px; }
  .ft-detail .ft-logo{ width: 220px; }
  .ft-menu, .ft-contact{ padding-top: 8px; }
  .footer a, .ft-detail p, 
  .ft-contact ul li,
  .copyright{ font-size: 15px; }

}
@media (max-width: 991px){

  .ft-contact{ width: 100%; }
  .ft-detail .ft-logo{ width: 220px; }

}
@media (max-width: 767px){

  .footer-content{ justify-content: flex-start; gap: 30px 50px; padding: 50px 0; }
  .footer-content .ft-detail, .ft-contact{ width: 100%; }
  .ft-detail .ft-logo{ width: 220px; }
  .footer-bottom{ flex-direction: column; gap: 10px; text-align: center; }
  .link-policy ul{ justify-content: center; }
  .ft-menu, .ft-contact{ padding-top: 0; }
  .ft-menu ul li{ margin-bottom: 10px; }
  .ft-contact ul li{ margin-bottom: 15px; }

  .ft-title{ font-size: 17px; margin-bottom: 15px; }
  .footer a, .ft-detail p, 
  .ft-contact ul li,
  .copyright{ font-size: 14px; }

}


/**********************************************************/
/**********************************************************/

.container-slide{ position: relative; }


/**********************************************************/
/**********************************************************/

section{ position: relative; }
.page-section{ padding: var(--mp100) 0; }
.page-section2{ padding-bottom: var(--mp100); }


.show-pc{ display: block; }
.show-mobi{ display: none; }

@media (max-width: 991px){

  .show-pc{ display: none; }
  .show-mobi{ display: block; }

}


.btn{ display: inline-block; padding: 20px 30px; background-color: var(--primary); color: var(--white); font-weight: 500; border: 1px solid var(--primary); transition: background-color 0.3s ease; cursor: pointer; font-family: inherit; }
.btn:hover{ background-color: #004bb5; }

.btn-arrow{ display: inline-flex; align-items: center; gap: 10px; }
.btn-arrow:hover{ background-color: var(--white); color: var(--primary); }
.btn-arrow img{ width: 9px; filter: var(--filter-white); }
.btn-arrow:hover img{ filter: var(--filter-primary); }

.btn-gray{ background-color: #edf1f5; color: var(--default); border-color: #edf1f5; }
.btn-gray:hover{ background-color: var(--white); color: var(--primary);  }
.btn-gray.btn-arrow img{ width: 9px; filter: none; }
.btn-gray.btn-arrow:hover img{ filter: var(--filter-primary); }

.btn-download{ display: inline-flex; align-items: center; gap: 10px; }
.btn-download:hover{ background-color: var(--white); color: var(--primary); }
.btn-download img{ width: 12px; filter: var(--filter-white); }
.btn-download:hover img{ filter: var(--filter-primary); }

.btn-send{ font-size: 20px; }


.div-breadcrumb ol{ display: flex; align-items: center; flex-flow: row wrap; }
.div-breadcrumb ol li{ display: inline-block; font-size: 17px; line-height: 1.3; color: var(--white); position: relative; padding-right: 30px; }
.div-breadcrumb ol li::after{ content: '>'; position: absolute; right: 10px; color: var(--white); }
.div-breadcrumb ol li:last-child::after{ display: none; }
.div-breadcrumb ol li a{ color: var(--white); }
.div-breadcrumb ol li a:hover{ text-decoration: underline; color: var(--white); }
.div-breadcrumb ol li:last-child{ color: #1f75ff; padding-right: 0; }
.div-breadcrumb ol li:last-child a{ color: #1f75ff; padding-right: 0; }

@media (max-width: 991px){

  .div-breadcrumb ol li{ font-size: 16px; }

}

/**********************************************************/
/************************** home **************************/

.hero-section {
  position: relative; z-index: 92;
  width: 100%;
  height: 100vh;
  overflow: hidden; /* ตัดส่วนเกินของรูปออก */
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax-bg {
  position: absolute;
  top: -10%; /* เผื่อพื้นที่ด้านบน */
  left: 0;
  width: 100%;
  height: 120%; /* สูงกว่าจอเพื่อให้มีพื้นที่ให้เลื่อน (Parallax gap) */
  /* background-image: url('../images/home/bg-top.jpg');  */
  background-size: cover; background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  will-change: transform; /* เคล็ดลับความลื่นไหล */
}

.bar-home .parallax-bg{ background-image: url('../images/home/bg-top.jpg');  }

.bgbar{ height: 520px; }
.bar-contact .parallax-bg{ background-image: url('../images/contact/bar-contact.jpg'); }
.bar-activities .parallax-bg{ background-image: url('../images/news/bar-news.jpg'); }
.bar-service .parallax-bg{ background-image: url('../images/service/bar-service.jpg'); }
.bar-about .parallax-bg{ background-image: url('../images/about/bar-about.jpg'); }
.bar-iso .parallax-bg{ background-image: url('../images/iso/bar-iso.jpg'); background-position: 80% 0; }
.bar-human-biobank .parallax-bg{ background-image: url('../images/human_biobank/bar-biobank.jpg'); }

.hero-singlepage.bgbar{ height: 85px;}

@media (max-width: 1599px){

  .hero-singlepage.bgbar{ height: 78px;}

}
@media (max-width: 1199px){

  .bgbar{ height: 350px; }
  .hero-singlepage.bgbar{ height: 71px;}

}
@media (max-width: 991px){

  .hero-singlepage.bgbar{ height: 50px;}

}
@media (max-width: 576px){

  .hero-singlepage.bgbar{ height: 42px;}

}

.hero-content { max-width: 700px; width: 80%; margin-top: 70px; }
.hero-content .title{ font-size: 70px; line-height: 1.2; font-weight: 600; color: var(--white); margin-bottom: 30px; }
.hero-content .subtitle{ font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--white); margin-bottom: 30px; border-left: 5px solid var(--primary); padding-left: 30px; }
.hero-content p{ font-size: 17px; line-height: 1.5; color: var(--white); margin-bottom: 30px; }

.titleAbout{ color: var(--white); }

.titleAbout,
.home-title{ font-size: 30px; line-height: 1.2; font-weight: 600; margin-bottom: 30px; }
.home-header{ font-size: 60px; line-height: 1.2; font-weight: 600; }
.pdr-100{ padding-right: 100px; }
.head-center{ text-align: center; max-width: 900px; margin: 0 auto 2rem; }

@media (max-width: 1599px){

  .titleAbout,
  .home-title{ font-size: 28px; }
  .home-header{ font-size: 50px; }
  .pdr-100{ padding-right: 60px; }

}
@media (max-width: 1199px){

  .hero-content .title{ font-size: 50px; }
  .hero-content .subtitle{ font-size: 24px; }
  .hero-content p{ font-size: 16px; }

  .titleAbout,
  .home-title{ font-size: 22px; }
  .home-header{ font-size: 35px; }

}
@media (max-width: 991px){

  .titleAbout,
  .home-title{ font-size: 20px; margin-bottom: 20px; }
  .home-header{ font-size: 30px; margin-bottom: 30px; }
  .pdr-100{ padding-right: 0; }

}
@media (max-width: 767px){

  .hero-content{ width: 90%; }
  .hero-content .title{ font-size: 40px; }
  .hero-content .subtitle{ font-size: 20px; padding-left: 15px; }

  .titleAbout,
  .home-title{ font-size: 17px; }
  .home-header{ font-size: 24px; }

}





/* .service-section{ margin: var(--mp100) 0; border-bottom: 1px solid #c8c8c8; padding-bottom: var(--mp100); } */
.service-section{ overflow-x: hidden; padding: var(--mp100) 0; }
.service-section:last-child{ border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.hr-line{ height: 1px; background-color: #c8c8c8; margin: 0 auto; border: 0; }

.service-section.div0{ overflow: clip; }
.service-section.div1{ padding-top: 0; }

/* @media (max-width: 1199px){

  .service-section{ padding-bottom: 50px; }

}
@media (max-width: 576px){

  .service-section{ padding-bottom: 30px; }

} */



.home-service{ overflow: hidden; }
.home-service-img{ position: relative; margin-top: var(--mp100); padding-bottom: var(--mp100); }
.imgel{ position: absolute; transition: transform 0.1s ease-out; will-change: transform; }
.imgel.el1{ right: -40px; top: 150px; }
.imgel.el2{ right: -30%; bottom: -100px; }
.imgel.el3{ left: -160px; bottom: -100px; }
.imgel.el4{ right: -180px; bottom: -100px; }
/* สร้าง Animation ชื่อ floating */
@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); } /* ขยับขึ้น 15px */
  100% { transform: translateY(0px); }
}

@media (max-width: 1024px) {
  .imgel:not(.is-gyro-active) {
    animation: floating 3s ease-in-out infinite;
  }
  .imgel.el2:not(.is-gyro-active) {
    animation-duration: 4s;
    animation-delay: 0.5s;
  }
  .imgel.is-gyro-active {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .imgel {
    animation: none !important;
  }
}

@media (max-width: 1599px){

  .imgel.el3{ left: -100px; bottom: -80px;}
  .imgel.el3 img{ width: 200px; }
  .imgel.el4{ right: -80px; bottom: -80px; }
  .imgel.el4 img{ width: 200px; }

}
@media (max-width: 1199px){

  .imgel.el1{ right: -30px; top: 100px; }
  .imgel.el1 img{ width: 90px; }
  .imgel.el2{ right: -16%; bottom: -50px; }
  .imgel.el2 img{ width: 250px; }
  .imgel.el3{ left: -100px; bottom: -60px; }
  .imgel.el3 img{ width: 180px; }
  .imgel.el4{ right: -80px; bottom: -60px; }
  .imgel.el4 img{ width: 180px; }

}
@media (max-width: 991px){

  .imgOurservice{ margin-bottom: 30px; }
  .home-service-img{ margin-top: 0; padding-bottom: 30px; }

  .imgel.el1{ right: -20px; top: 100px; }
  .imgel.el1 img{ width: 70px; }
  .imgel.el2{ right: -16%; bottom: -30px; }
  .imgel.el2 img{ width: 200px; }
  .imgel.el3{ left: -100px; bottom: -30px; }
  .imgel.el3 img{ width: 200px; }
  .imgel.el4{ right: -80px; bottom: -30px; }
  .imgel.el4 img{ width: 200px; }
}
@media (max-width: 767px){

  .imgel.el1{ right: -20px; top: 80px; }
  .imgel.el1 img{ width: 60px; }
  .imgel.el2{ right: -16%; bottom: -30px; }
  .imgel.el2 img{ width: 150px; }
  .imgel.el3{ left: -100px; bottom: -30px; }
  .imgel.el3 img{ width: 150px; }
  .imgel.el4 img{ width: 150px; }

}
@media (max-width: 576px){

  .imgel.el1{ top: 50px; }
  .imgel.el2{ right: -10%; }
  .imgel.el2 img{ width: 100px; }
  .imgel.el3{ left: -50px; bottom: 0px; }
  /* .imgel.el3 img{ width: 100px; } */
  .imgel.el4{ right: -50px; bottom: -20px; }
  /* .imgel.el4 img{ width: 100px; } */

}


/* services */
.service-content{ margin-bottom: var(--mp100);}
.service-detail{ position: relative; padding-left: 100px; }
.service-detail .title2{ font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--primary); margin-bottom: 20px; }
.service-detail .header2{ font-size: 50px; line-height: 1.2; font-weight: 600; margin-bottom: 20px; }
.service-detail p{ font-size: var(--txt-20); line-height: 1.5; }
.service-detail p:last-of-type{ margin-bottom: 0; }
.service-detail p strong{ font-weight: 600; }
.service-detail .service-year{ font-size: 60px; line-height: 1.2; font-weight: 600; color: var(--primary); margin-bottom: 10px; }


@media (max-width: 1599px){

  .service-detail .title2{ font-size: 28px; }
  .service-detail{ padding-left: 70px; }
  .service-detail .header2{ font-size: 40px; }
  .service-detail .service-year{ font-size: 50px; }

}
@media (max-width: 1199px){

  .service-detail .title2{ font-size: 22px; }
  .service-detail .header2{ font-size: 30px; }
  .service-detail .service-year{ font-size: 40px; }

}
@media (max-width: 767px){

  .service-detail{ padding-left: 0; }

  .service-detail .title2{ font-size: 20px; }
  .service-detail .header2{ font-size: 26px; }
  .service-detail .service-year{ font-size: 36px; }

}

.cardService{ position: relative; padding: 30px; background-color: #f8f9fa; border-radius: 20px; display: flex; height: 100%; }
.cardService .card--icon{ width: 100px; }
.cardService .card--icon img{ width: 60px; }
.cardService .card--detail{ width: calc(100% - 100px); }
.cardService .card--detail .title{ font-size: 20px; line-height: 1.2; font-weight: 600; text-transform: uppercase; margin-bottom: 30px; }
.cardService .card--detail .desc{ font-size: 16px; line-height: 1.5; color: var(--default); margin-bottom: 30px; }

.card--detail .linktext{ font-size: 16px; color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; transition: all 0.3s ease; }
.card--detail .linktext i{ line-height: 0; }
.card--detail .linktext img{ width: 9px; filter: var(--filter-primary); }
.card--detail .linktext:hover{ color: var(--black); }
.card--detail .linktext:hover img{ filter: none; }

.cardService:hover .card--detail .linktext{ color: var(--black); transition: all 0.3s ease; }
.cardService:hover .card--detail .linktext img{ filter: none; transition: all 0.3s ease; }

.service-slide .swiper-slide{ display: flex; height: auto; }

@media (max-width: 1199px){

  .cardService{ padding: 20px; }
  .cardService .card--icon{ width: 70px; }
  .cardService .card--icon img{ width: 40px;}
  .cardService .card--detail{ width: calc(100% - 70px); }

  .cardService .card--detail .title{ font-size: 17px; margin-bottom: 20px; }
  .cardService .card--detail .desc{ font-size: 14px; margin-bottom: 20px; }
  .card--detail .linktext{ font-size: 14px; }

}


/* about */
.home-about{ background-color: var(--primary); background-image: url('../images/about/bg-about.jpg'); background-repeat: no-repeat; background-position: left bottom; background-size: cover; color: #fff; }

.aboutvdo{ position: relative; margin-bottom: var(--mp100); }
.aboutvdo .icn-play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; }

@media (max-width: 767px){

  .aboutvdo .icn-play{ width: 60px; height: 60px; }

}

.about-amount{ display: flex; gap: 50px; justify-content: space-between; margin-top: 80px; border-top: 1px solid rgba(200, 200, 200, 0.7); padding-top: var(--mp100); }
.about-item{ display: flex; width: 33%; }
.about-item .about-item--icon{ width: 100px; }
.about-item .about-item--icon img{ width: 80px; filter: var(--filter-white); }
.about-item .about-item--detail{ width: calc(100% - 100px); }
.about-item .about-item--detail .amount{ font-size: 60px; font-weight: 600; }
.about-item .about-item--detail .text{ font-size: 20px; line-height: 1.4; font-weight: 600; text-transform: uppercase; }

.about-amount2{ display: flex; gap: 50px; justify-content: space-between; position: relative; width: 100%; margin: -180px auto 90px; background-color: #fff; border-radius: 20px; padding: 30px; z-index: 99; box-shadow: 0 8px 10px 10px rgba(0, 0, 0, 0.03); }
.about-amount2 .about-item .about-item--icon img{ filter: none; }
.about-amount2 .about-item .about-item--detail .amount{ color: var(--primary); }


@media (max-width: 1199px){

  .about-item .about-item--icon{ width: 80px; }
  .about-item .about-item--icon img{ width: 60px; }
  .about-item .about-item--detail{ width: calc(100% - 80px); }
  .about-item .about-item--detail .amount{ font-size: 50px; }
  .about-item .about-item--detail .text{ font-size: 17px; }

  .about-amount2{ gap: 30px; margin-top: -150px; margin-bottom: 50px; }

}
@media (max-width: 991px){

  .about-amount{ gap: 30px; margin-top: 50px; }
  .about-item .about-item--icon{ width: 60px; }
  .about-item .about-item--icon img{ width: 50px; }
  .about-item .about-item--detail{ width: calc(100% - 60px); }
  .about-item .about-item--detail .amount{ font-size: 40px; }
  .about-item .about-item--detail .text{ font-size: 15px; }

  .about-amount2{ padding: 20px; border-radius: 15px; margin-top: -130px; }
  .about-amount2 .about-item .about-item--detail .text{ font-size: 13px; }

}
@media (max-width: 767px){

  .about-amount{ flex-direction: column; gap: 40px; margin-top: 30px; padding-top: 30px; }
  .about-item{ width: 100%; gap: 30px; }
  .about-item .about-item--icon{ width: 80px; }
  .about-item .about-item--icon img{ width: 70px; }
  .about-item .about-item--detail{ width: calc(100% - 80px); }
  .about-item .about-item--detail .amount{ font-size: 50px; }
  .about-item .about-item--detail .text{ font-size: 17px; }

  .about-amount2{ flex-direction: column; gap: 40px; margin-top: 0px; }

}
@media (max-width: 360px){

  .about-amount{ flex-direction: column; gap: 30px; margin-top: 30px; padding-top: 30px; }
  .about-item{ width: 100%; gap: 20px; }
  .about-item .about-item--icon{ width: 60px; }
  .about-item .about-item--icon img{ width: 50px; }
  .about-item .about-item--detail{ width: calc(100% - 60px); }
  .about-item .about-item--detail .amount{ font-size: 30px; }
  .about-item .about-item--detail .text{ font-size: 14px; }

}


/* news */
.cardNews{ position: relative; padding: 30px; background-color: #f8f9fa; border-radius: 20px; height: 100%; }
.cardNews .news-img{ width: 100%; height: 200px; overflow: hidden; margin-bottom: 20px; }
.cardNews .news-img img{ width: 100%; height: 100%; object-fit: cover; }
.cardNews .card--detail{ width: 100%; }
.cardNews .card--detail .title{ font-size: 20px; line-height: 1.2; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
.cardNews .card--detail .date{ font-size: 16px; line-height: 1.2; color: var(--primary); margin-bottom: 20px; display: block; }
.cardNews .card--detail .desc{ font-size: 16px; line-height: 1.5; color: var(--default); margin-bottom: 20px; }

.cardNews:hover .card--detail .linktext{ color: var(--black); transition: all 0.3s ease; }
.cardNews:hover .card--detail .linktext img{ filter: none; transition: all 0.3s ease; }

.news-slide .swiper-slide{ display: flex; height: auto; }
.news-slide .swiper-slide article{ width: 100%; }

@media (max-width: 991px){

  .cardNews{ padding: 20px; border-radius: 15px; }

}

/* research */
.home-research{ background-color: var(--primary); background-image: url('../images/research/bg-research.jpg'); background-repeat: no-repeat; background-position: left bottom; background-size: cover; overflow: hidden; }

.research-wrapper {
  display: flex;
}

.content-research {
  flex: 0 0 50%;
  padding-right: 120px; padding-left: 13.5%;
}
/* .swiper-container-inner {
  width: calc(100% + ((100vw - 100%) / 2)); 
  overflow: hidden;
} */
.swiper-research {
  flex: 0 0 50%; position: relative; min-width: 0; 
}
.research-slide {
  width: 100%;
  /* overflow: visible !important;  */
}

@media (max-width: 1599px){

  .content-research { padding-left: 8.5%; }

}
@media (max-width: 1199px){

  .content-research{ padding-left: 4.5%; padding-right: 50px; flex: 0 0 45%; }
  .swiper-research{ flex: 0 0 55%; }

}
@media (max-width: 991px){

  .content-research{ max-width: 750px; margin: 0 auto; padding-left: 15px; padding-right: 15px; flex: 0 0 100%; }
  .swiper-research{ flex: 0 0 100%; }

  .research-wrapper{ display: block; }
  .swiper-research{ margin-top: 30px;}
  .swiper-container-inner{ width: 100%; }

}



.card--research{ position: relative; height: 100%; display:block; }
.card--research::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg,rgba(0, 97, 254, 0.9) 10%, rgba(255, 255, 255, 0) 60%); }
.card--research .card-research--img{ width: 100%; height:100%; }
.card--research .card-research--img img{ width: 100%; height: 100%; object-fit: cover; }
.card--research .card--detail{ width: 100%; position: absolute; bottom: 0; left: 0; right: 0; padding: 0 30px; }
.card--research .card--detail .title{ font-size: 20px; line-height: 1.2; font-weight: 600; text-transform: uppercase; color: var(--white); }
.card--research .card--detail .desc{ font-size: 16px; line-height: 1.5; color: var(--white); }
.card--research .card--detail .linktext{ color: var(--white); }
/* .card--research .card--detail .linktext:hover{ color: var(--black); } */
.card--research .card--detail .linktext img{ width: 9px; filter: var(--filter-white); }
/* .card--research .card--detail .linktext:hover img{ filter: none; } */

/* .research-slide .swiper-slide{ display: flex; height: auto; } */
.card--research .desc,
.card--research .linktext {
  opacity: 0;
  visibility: hidden;
  max-height: 0; 
  transform: translateY(10px); 
  transition: all 0.3s ease-in-out; 
}
.card--research:hover .desc{ margin-top: 10px; }
.card--research:hover .desc,
.card--research:hover .linktext {
  opacity: 1;
  visibility: visible;
  max-height: 100px; overflow: hidden;
  transform: translateY(0); margin-bottom: 20px;
}



@media (max-width: 1199px){

  .card--research .card--detail{ padding: 0 15px; }
  .card--research .card--detail .title{ font-size: 17px; }
  .card--research .card--detail .desc{ font-size: 14px; }

}




/* contact */
.contact-wrapper{ display: flex; }
.map-canvas{ flex: auto; margin-left: calc((100vw - 100%) / -2); }
.contact-detail{ flex: 1; padding-left: 160px; }
.contact-detail .home-header{ margin-bottom: 20px; }

.contact-social{ margin: 20px 0; display: flex; gap: 15px; }
.contact-social a img{ width: 40px; }
.contact-social a:hover img{ filter: var(--filter-primary); }
.contact-qr img{ width: 100px; height: 100px; margin-bottom: 20px; }

.contact-info .title{ font-size: 20px; line-height: 1.2; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; }
.contact-info ul li{ display: flex; gap: 10px; margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
.contact-info ul li:last-of-type{ margin-bottom: 0; }
.contact-info ul li img{ width: 20px; filter: var(--filter-primary); }
.contact-info ul li a:hover{ text-decoration: underline; }

@media (max-width: 1199px){

  .contact-detail{ padding-left: 100px; }

}
@media (max-width: 991px){

  .contact-wrapper{ flex-direction: column; }
  .map-canvas{ margin: 0; width: 100%; height: 400px; }
  .contact-detail{ padding-left: 0; margin-top: 30px; }
  .ib-contact-location address br {
    display: none;
  }
}


.home-contact{ background-color: var(--primary); background-image: url('../images/contact/bg-contact.jpg'); background-repeat: no-repeat; background-position: left bottom; background-size: cover; color: #fff; }
.home-contact .home-header{ margin-bottom: 16px; }

.contact-form{ display: flex; flex-flow: row wrap; gap: 20px; }
.form-group{ width: 100%; }
.form-group.col50{ width: calc(50% - 10px); }

@media (max-width: 991px){

  .contact-form{ margin-top: 20px; }

}
@media (max-width: 576px){

  .form-group.col50{ width: 100%; }

}

/**********************************************************/
/********************** Activities ************************/

.bg-activities{ background-image: url('../images/activities/bg.jpg'); background-repeat: no-repeat; background-position: left bottom; }

.activities-nav{ display: flex; gap: 30px; margin-bottom: var(--mp100); }
.service-archive-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-left: 0;
  margin-right: 0;
}
.service-archive-row .build-col{
  -ms-flex: none;
  flex: none;
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
.activities-card{ position: relative; border-radius: 20px; height: 100%; transform: translateY(0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.activities-card a{ position: relative; display: block; width: 100%; height: 100%; z-index: 10; }
.activities-card a::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg,rgba(30, 87, 146, 0.9) 10%, rgba(255, 255, 255, 0) 60%); border-radius: 20px; z-index: 0; }
.activities-card .activities-content{ width: 100%; position: absolute; bottom: 0; left: 0; padding: 30px; z-index: 9; }
.activities-card .activities-content .title{ font-size: 60px; line-height: 1.2; font-weight: 600; color: var(--white); margin-bottom: 10px; text-transform: uppercase; }
.activities-card .activities-content p{ font-size: 16px; line-height: 1.5; color: var(--white); margin-bottom: 20px; }
.activities-img img{ width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

.activities-card .activities-content .linktext{ font-size: 16px; color: var(--white); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.activities-card .activities-content .linktext i{ line-height: 0; }
.activities-card .activities-content .linktext img{ width: 9px; filter: var(--filter-white); }

.activities-card:hover{ transform: translateY(-20px);  transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0px 20px 40px 4px rgba(0, 0, 0, 0.3); cursor: pointer; }
body.post-type-archive-service .activities-card .activities-content .title{ font-size: 44px; }

@media (max-width: 1199px){

  .bg-activities{ background-size: contain; }
  .activities-card .activities-content .title{ font-size: 50px; }
  .activities-card .activities-content p{ font-size: 15px; line-height: 1.4; }
    body.post-type-archive-service .activities-card .activities-content .title{ font-size: 34px; }


}
@media (max-width: 991px){

  .activities-card .activities-content{ padding: 20px; }
  .activities-card .activities-content .title{ font-size: 34px; }
  .activities-card .activities-content p{ font-size: 14px; margin-bottom: 10px; }
  .activities-card .activities-content .linktext{ font-size: 12px; }
  .service-archive-row{ grid-template-columns: 1fr; }

}
@media (max-width: 767px){

  .bg-activities{ background-size: 200%; }
  .activities-nav{ flex-direction: column; }
  .activities-card .activities-content .title{ font-size: 30px; }
  body.post-type-archive-service .activities-card .activities-content .title{ font-size: 26px; }

}


/* News - Research */
.box-listnews .build-col{ margin-bottom: 30px; }


.news-row,
.research-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-left: -30px; margin-right: -30px;
}
.news-row{ row-gap: 60px; }
.news-col,
.research-col{
  position: relative;
  width: 100%;
  padding-left: 30px; padding-right: 30px;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}
.news-col article,
.research-col article{ height: 100%; }

.research-row{ margin-left: -15px; margin-right: -15px; row-gap: 30px; }
.research-col{ padding-left: 15px; padding-right: 15px; }

@media (max-width: 1199px){

  .news-row{ margin-left: -20px; margin-right: -20px; row-gap: 50px; }
  .news-col{ padding-left: 20px; padding-right: 20px; }

}
@media (max-width: 991px){

  .news-row, .research-row{ margin-left: -15px; margin-right: -15px; }
  .news-row{ row-gap: 40px; }
  .research-row{ row-gap: 40px; }
  .news-col, .research-col{ 
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 15px; padding-right: 15px;
  }

}
@media (max-width: 576px){

  .news-col, .research-col{ 
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}




.pageNumber {
  width: 100%; text-align: center;
  margin-top: 0;
}
.pageNumber:has(.nav-links a, .nav-links span) {
  margin-top: 60px;
}
.pageNumber .nav-links{ display: flex; justify-content: center; align-items: center; }
.pageNumber .nav-links a.page-numbers, 
.pageNumber .nav-links span{
  font-size: 24px; font-weight: 400; color: var(--white);
  margin: 0; margin: 0 10px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background-color: #d1d2d4; width: 55px; height: 55px; border-radius: 50%;
}

.pageNumber .nav-links a.next:hover, 
.pageNumber .nav-links a.prev:hover,
.pageNumber .nav-links a.page-numbers:hover{ background-color: #b1b1b1; }

.pageNumber .nav-links a.page-numbers.current,
.pageNumber .nav-links span.current{ color: var(--white); background-color: var(--primary); }

@media (max-width: 1199px){

  .pageNumber:has(.nav-links a, .nav-links span){ margin-top: 50px; }
  .pageNumber .nav-links a.page-numbers, 
  .pageNumber .nav-links span{ font-size: 20px; width: 50px; height: 50px; }

}
@media (max-width: 991px){

  .pageNumber:has(.nav-links a, .nav-links span){ margin-top: 40px; }

}
@media (max-width: 767px){

  .pageNumber .nav-links a.page-numbers, 
  .pageNumber .nav-links span{ font-size: 16px; width: 40px; height: 40px; margin: 0 5px; }

}


/* details */

.div-article{ max-width: 1120px; width: 100%; margin: 0 auto; }
.div-article h1{ font-size: 55px; line-height: 1.3; font-weight: 600; }
.div-article h2{ font-size: 34px; line-height: 1.3; font-weight: 600; margin-bottom: 10px; }
.div-article h3{ font-size: 24px; line-height: 1.3; font-weight: 600; margin-bottom: 10px; }
.div-article h4{ font-size: 17px; line-height: 1.3; font-weight: 600; margin-bottom: 10px; }
.div-article ul{ list-style: disc; margin-left: 23px; margin-bottom: 30px; }
.div-article ol{ list-style: decimal; margin-left: 20px; margin-bottom: 30px; }
.div-article p, .div-article li{ font-size: 16px; line-height: 1.5; font-weight: 300; }
.div-article p{ margin-bottom: 30px; }
.div-article li{ margin-bottom: 10px; }
.div-article p:last-child,
.div-article ul:last-child,
.div-article ol:last-child,
.div-article li:last-of-type{ margin-bottom: 0; }
.div-article a{ text-decoration: underline; }
.div-article figure{ margin-bottom: 30px; text-align: center; }
.div-article p + ul,
.div-article p + ol{ margin-top: -20px; }

@media (max-width: 1599px){

  .div-article h1{ font-size: 46px; }

}
@media (max-width: 1199px){

  .div-article h1{ font-size: 40px; }
  .div-article h2{ font-size: 30px; }
  .div-article h3{ font-size: 20px; }
.div-article h4{ font-size: 17px; }
}
@media (max-width: 991px){

  .div-article h1{ font-size: 30px; }
  .div-article h2{ font-size: 24px; }
  .div-article h3{ font-size: 20px; }
  .div-article h4{ font-size: 17px; }
  .div-article ul{ margin-left: 20px; }

}

.article-date_author{ display: flex; justify-content: space-between; flex-flow: row wrap; font-size: 16px; line-height: 1.4; margin-bottom: 50px; margin-top: 50px; padding-top: 20px; border-top: 1px solid #173865; }
.article-date_author .date{ color: var(--primary); }
.article-date_author .author{ color: var(--black); }

@media (max-width: 1199px){

  .article-date_author{ margin-top: 30px; margin-bottom: 30px; }

}
@media (max-width: 576px){

  .article-date_author{ gap: 5px; }
  .article-date_author .date,
  .article-date_author .author{ width: 100%; }

}


.article-share{ max-width: 1120px; width: 100%; margin: 50px auto; border-top: 1px solid #173865; padding-top: 20px; }
.article-share ul{ display: flex; gap: 20px; align-items: center; list-style: none; margin: 0; }
.article-share ul li img{ width: 40px; }
.article-share li a:hover img{ filter: var(--filter-primary); }

@media (max-width: 1199px){

  .article-share li img{ width: 30px; }

}


/**********************************************************/
/********************** service detail ********************/

.page--service{ display: flex; flex-flow: row wrap; align-items: flex-start;  position: relative; }
.service--nav{ width: 30%; padding-right: 90px; position: -webkit-sticky; position: sticky; top: 100px; }
.service--detail{ width: 70%; }

.sv--nav-title{ font-size: 30px; font-weight: 600; }
.service--nav ul li a{ display: flex; padding: 30px 0; border-bottom: 1px solid #e5e5e5; font-size: 20px; line-height: 1.3; font-weight: 600; }
.service--nav ul li a span{ padding-right: 10px; }
.service--nav ul li a:hover, .service--nav ul li a.active{ color: var(--primary); }

.sv-img{ margin-bottom: 40px; }
.hr-build{ border: none; border-bottom: 1px solid #e5e5e5; margin: 50px 0;margin-top:0px; }

.sv-article{ display: flex; flex-flow: row wrap; padding-bottom: 50px; }
.sv--title{ width: 35%; padding-right: 50px; }
.sv--detail{ width: 65%; }

.sv--title h1,
.title-h1{ font-size: 40px; line-height: 1.3; font-weight: 600;  }
.sv--title h2,
.title-h2{ font-size: 30px; line-height: 1.3; font-weight: 600; }
.sv--title h3,
.title-h3{ font-size: 20px; line-height: 1.3; font-weight: 600; }
.title-h1 span{ display: block; }
.sv--title span{ color: var(--primary); padding-right: 15px; }

.title-h2, .title-h3{ display: flex; }

.sv--detail p, .sv--detail li{ font-size: 20px; line-height: 1.4; }
.sv--detail ul{ list-style: disc; padding-left: 20px; margin-top: 15px; margin-bottom: 30px; }
.sv--detail ol{ list-style: decimal; padding-left: 20px; margin-top: 15px; margin-bottom: 30px; }
.sv--detail ul:last-child,
.sv--detail ol:last-child{ margin-bottom: 0; }
.sv--detail p:last-child{ margin-bottom: 0; }
/* เมื่อ p อยู่ติดกับ ul ให้เอา margin ที่ซ้ำซ้อนออก */
.sv--detail p:not(:last-of-type) + ul {
    margin-top: -20px; /* ดึง ul ขึ้นไปชิด p มากขึ้น */
}

/* .sv--title h1, 
.sv--title h2, 
.sv--title h3{  word-wrap: break-word;
  overflow-wrap: break-word; word-break: break-all; } */
.sv-article.width-65 .sv--title{ width: 80%; margin-bottom: 30px; }
.sv-article.width-65 .sv--detail{ width: 100%; }

@media (max-width: 1599px){

  .sv--title h1,
  .title-h1{ font-size: 34px; }
  .sv--title h2,
  .title-h2{ font-size: 24px; }
  .sv--title h3,
  .title-h3{ font-size: 20px; }
  .sv--detail p, .sv--detail li{ font-size: 17px; }

}
@media (max-width: 1199px){

  .service--nav{ padding-right: 60px; }
  .sv--nav-title{ font-size: 26px; margin-bottom: 10px; }
  .service--nav ul li a{ font-size: 16px; padding: 20px 0; }

  .sv--title{ padding-right: 30px; }

  .sv--title h1,
  .title-h1{ font-size: 30px; }
  .sv--title h2,
  .title-h2{ font-size: 20px; }
  .sv--title h3,
  .title-h3{ font-size: 17px; }
  .sv--detail p, .sv--detail li{ font-size: 16px; }

}
@media (max-width: 991px){

  .sv--title{ width: 100%; padding-right: 0; margin-bottom: 20px; }
  .sv--detail{ width: 100%; }

}
@media (max-width: 767px){

  .service--nav{ width: 100%; padding-right: 0; margin-bottom: 30px; position: relative; top: 0; }
  .service--detail{ width: 100%; }
  .sv-article.width-65 .sv--title{ width: 100%; }
}


/*  */


.accordion button {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  text-align: left;
  width: 100%;
  padding:15px 20px;
  color: var(--black);
  font-family: 'Poppins', 'Prompt', sans-serif;
  border: none; border-radius: 5px;
  background-color: #F6F7F9; cursor: pointer;
  outline: none; margin-bottom: 10px;
}
.accordion button .accordion-title{ font-size: 16px; line-height: 1.5; font-weight: 600; }

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 22px;
  right: 10px;
  background-image: url(../images/icon/arrow-down.svg); background-repeat: no-repeat;  background-size: cover; width: 16px; height: 10px; transition: all 200ms linear;
}

.accordion button[aria-expanded='true'] {
  background-color: var(--primary); color: var(--white);
}
.accordion button[aria-expanded='true'] .icon{
  transform: rotate(180deg); transition: all 200ms linear;
  filter: var(--filter-white); width: 24px; height: 14px; top: 20px;
}

.accordion .accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-out, opacity 200ms linear;
  opacity: 0;
  overflow: hidden;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-bottom: 10px;
}
.accordion-content > div {
  min-height: 0;
}

.accordion-article{ background-color: #F6F7F9; padding: 20px; }
.accordion-article h3{ font-size: 20px; line-height: 1.5; color: var(--primary); margin-bottom: 10px; }
.accordion-article p{ font-size: 16px; line-height: 1.5; color: #333; margin-bottom: 20px; }
.accordion-article ul{ list-style: disc; margin-left: 20px; margin-bottom: 20px; }
.accordion-article ol{ list-style: decimal; margin-left: 20px; margin-bottom: 20px; }
.accordion-article li{ font-size: 16px; line-height: 1.5; color: #333; }
.accordion-article p:last-child,
.accordion-article li:last-child,
.accordion-article ul:last-child,
.accordion-article ol:last-child{ margin-bottom: 0;}



@media (max-width: 991px){

  .accordion{ margin-bottom: 32px; }
  .application--accordion{ padding: 32px; }
  /* .accordion button{ padding: 16px 30px 0 0; } */
  /* .accordion button .accordion-title{ font-size: 20px; } */
  .accordion button .icon{ top: 20px; }
  /* .accordion .accordion-item{ padding-bottom: 16px; } */
  .accordion-article{ padding-top: 16px; }

  .accordion-article h3{ font-size: 17px; margin-bottom: 16px; }
  .accordion-article p,
  .accordion-article ul,
  .accordion-article ol,
  .accordion-article li{ margin-bottom: 16px; }

}
@media (max-width: 767px){

  .application--accordion{ padding: 24px; }

}
@media (max-width: 576px){

  .application--accordion{ padding: 32px; }
  /* .accordion button .accordion-title{ font-size: 24px; } */

}




/**********************************************************/
/************************ about ***************************/

.about-bg1{ background-image: url('../images/about/bg-1.jpg'); background-repeat: no-repeat; background-position: left bottom; background-size: cover; container-type: inline-size; }
.about-bg2{ background-image: url('../images/about/bg-2.jpg'); background-repeat: no-repeat; background-position: right top; background-size: cover; color: var(--white); }

.about-row{ display: flex; }
.about-col1{ flex: 1; padding-right: 50px; }
.about-col2{ flex: 1; margin-right: calc((100cqw - 100%) / -2); }

@media (max-width: 991px){

  .about-bg2{ background-position: 80% 0; }

  .about-row{ flex-direction: column-reverse; margin-left: -15px; margin-right: -15px; }
  .about-col1{ width: 100%; padding-right: 0; }
  .about-col2{ width: 100%; margin-right: 0; }
  .about-col1, .about-col2{ padding-left: 15px; padding-right: 15px; }
  
}

.aboutimg img { width: 100%; display: block; }

.about-content{ max-width: 900px; }
.about--header{ margin-bottom: 40px; }
.about--header span{ color: var(--primary); }
.about--title{ font-size: 30px; line-height: 1.3; font-weight: 600; color: var(--primary); margin-bottom: 20px; }

.about-iso{ margin: 50px 0 30px; }
.about-iso-card{ background-image: url('../images/about/bg-iso.png'); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 30px; width: 360px; height: 412px; }
.about-iso-card .iso--img{ width: 160px; margin-bottom: 20px; }
.about-iso-card .iso--img img{ width: 100%; box-shadow: 0px 8px 10px 10px rgba(0, 0, 0, 0.15); }
.about-iso-card .iso--title{ font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--primary); margin-bottom: 10px; }
.about-iso-card .iso--title::before{ content: ''; display: block; width: 60px; height: 5px; background-color: var(--primary); margin-bottom: 10px; }
.about-iso-card .iso--text{ 
  font-size: 16px; line-height: 1.5; color: var(--white); 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.about-bg1 .about--header{ margin-top: 30px;}

@media (max-width: 1199px){

  .about-content{ max-width: 600px; }
  .about-iso-card{ width: 290px; height: 332px; padding: 20px; }
  .about-iso-card .iso--img{ width: 110px; }
  .about-iso-card .iso--title{ font-size: 20px; margin-bottom: 8px; }
  .about-iso-card .iso--title::before{ width: 40px; height: 4px; margin-bottom: 8px; }
  .about-iso-card .iso--text{ font-size: 14px; }

}
@media (max-width: 991px){

  .about--header{ margin-bottom: 20px; }
  .about--title{ font-size: 24px; }
  .about--title img{ width: 14px; }

}
@media (max-width: 576px){

  .about-iso-card{ width: 270px; height: 309px; margin: 0 auto; }
  .about-iso-card .iso--img{ width: 90px; }

}


.about-content2{ max-width: 1000px; margin: 0 auto; text-align: center; }


.about-commitment{ display: flex; gap: 30px; justify-content: center; flex-flow: row wrap; margin-top: 50px; }
.commit-row{ display: flex; gap: 30px; flex-flow: row wrap; }
.commit-col1, .commit-col2{ flex: 1; }
.commit-col3{ width: 100%; }

.commit--card{ background-repeat: no-repeat; background-position: right center; background-size: cover; padding: 50px 30px; border-radius: 20px; height: 100%; display: flex; position: relative; border: 2px solid var(--white); box-shadow: 0px 10px 10px 14px rgba(0, 0, 0, 0.03); }
.commit-col1 .commit--card{ background-image: url('../images/about/bg-excellence1.jpg'); }
.commit-col2 .commit--card{ background-image: url('../images/about/bg-excellence2.jpg'); }
.commit-col3 .commit--card{ background-image: url('../images/about/bg-excellence3.jpg'); }

.commit--card .commit--icon{ width: 80px; margin-bottom: 20px; }
.commit--card .commit--icon img{ width: 100%; }
.commit--card .commit--detail{ width: 65%; padding-left: 20px; }
.commit--card .title{ font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--primary); margin-bottom: 15px; position: relative; }
.commit--card .title::after{ content: ''; display: block; width: 60px; height: 5px; background-color: var(--primary); margin-top: 15px; }
.commit--card p{ font-size: 16px; line-height: 1.5; color: var(--default); }

.commit--iso{ display: flex; gap: 20px; flex-flow: row wrap; margin-bottom: 30px; }
.commit--iso .commit-iso--card{ display: flex; width: calc(50% - 10px); }
.commit-iso--icon{ width: 50px; }
.commit-iso--icon img{ width: 100%; }
.commit-iso--detail{ width: calc(100% - 50px); padding-left: 15px; font-size: 16px; line-height: 1.5; color: var(--default); }  


@media (max-width: 1199px){

  .commit--card{ padding: 40px 20px; }
  .commit--card .commit--icon{ width: 60px; }
  .commit-iso--icon{ width: 40px; }

}
@media (max-width: 991px){

  .commit-row{ flex-direction: column; }
  .commit--iso .commit-iso--card{ width: 100%; }

}
@media (max-width: 576px){

  .commit--card{ background-position: 95% 0; }
  .commit-row{ flex-direction: column; }
  .commit--card .commit--detail{ width: 100%; padding-left: 0; }
  .commit--card .title{ padding-left: 70px; margin-bottom: 30px; }
  .commit--icon{ position: absolute; top: 40px; left: 20px; }

  .commit--iso .commit-iso--card{ width: 100%; }
  .commit-iso--detail .title{ padding-left: 0; margin-bottom: 15px; }

}


.about-gallery{ display: flex; gap: 30px; flex-flow: row wrap; margin-top: 50px; }
.img-gallery{ width: calc(33.333% - 20px); }
.img-gallery img{ width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

@media (max-width: 991px){

  .about-gallery{ gap: 20px; }
.img-gallery{ width: calc(33.333% - 14px); }
  .img-gallery img{ border-radius: 15px; }

}
@media (max-width: 767px){

  .about-gallery{ gap: 10px; margin-top: 30px; }
  .img-gallery{ width: calc(50% - 5px); }
  .img-gallery img{ border-radius: 10px; }

}




/**********************************************************/
/************************ iso *****************************/


.boxiso-content{ display: flex; gap: 30px; flex-flow: row wrap; margin-top: 50px; }
.boxiso-col{ width: calc(50% - 15px); }
.boxiso-card{ background-color: #f8f9fa; border-radius: 20px; padding: 30px; height: 100%; }
.boxiso-head{ display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.boxiso-head .boxiso--icon{ width: 60px; }
.boxiso-head .boxiso--icon img{ width: 100%; }
.boxiso-head .boxiso--title{ font-size: 30px; line-height: 1.3; font-weight: 600; }
.boxiso-head .boxiso--title h3{ font-weight: 400; }
.boxiso-head .boxiso--title span{ display: block; font-size: 16px; }

.boxiso-detail{ margin-bottom: 20px; }
.boxiso-detail p{ font-size: 16px; line-height: 1.5; color: var(--default); margin-bottom: 5px; }
.boxiso-detail ul{ list-style: disc; margin-left: 20px; margin-bottom: 5px; }
.boxiso-detail ol{ list-style: decimal; margin-left: 20px; margin-bottom: 5px; }
.boxiso-detail li{ font-size: 16px; line-height: 1.5; color: var(--default); margin-bottom: 5px; }
.boxiso-detail p:last-child,
.boxiso-detail li:last-child,
.boxiso-detail ul:last-child,
.boxiso-detail ol:last-child{ margin-bottom: 0; }

.btn-certificate{ display: inline-flex; align-items: center; gap: 10px; background-color: #3381fe; padding: 10px 20px; border-radius: 50px; font-size: 17px; border-color: #3381fe; }
.btn-certificate:hover{ background-color: var(--white); color: var(--primary); }
.btn-certificate img{ width: 22px; filter: var(--filter-white); }
.btn-certificate:hover img{ filter: var(--filter-primary); }


@media (max-width: 991px){

  .boxiso-col{ width: 100%; }

}



/**********************************************************/
/******************** human-biobank ***********************/

.overview-list{ display: flex; gap: 20px; flex-flow: row wrap; margin: 50px 0; }
.overview-card{ width: calc(20% - 20px); background-color: #ecf3fa; border-radius: 20px; border: 2px solid #b1c5da; flex: 1; display: flex; flex-direction: column; overflow: hidden; padding-top: 40px; text-align: center; }
.overview-content{ padding: 0 12px; }
.overview-number{ font-size: 28px; line-height: 1.3; font-weight: 600; color: var(--white); margin: 0 auto 10px; background-color: #3d8edc; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.overview-title{ font-size: 24px; line-height: 1.3; font-weight: 600; color: #173f77; }
.overview-title::after{ content: ''; display: block; width: 40px; height: 2px; background-color: #3d8edc; margin: 15px auto; }
.overview-description{ font-size: 17px; line-height: 1.5; color: #173f77; margin-top: 10px; }
.overview-image{ width: 100%; height: 250px; object-fit: cover; margin-top: auto; position: relative; padding-top: 5px; }
.overview-image::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg,rgba(236, 243, 250, 1) 0%, rgba(236, 243, 250, 1) 6%, rgba(236, 243, 250, 0) 50%); }
.overview-image img{ width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1199px){

  .overview-list{ gap: 15px; }
  .overview-card{ padding-top: 30px; }
  .overview-content{ padding: 0 6px; }
  .overview-number{ font-size: 24px; }
  .overview-title{ font-size: 20px; }
  .overview-description{ font-size: 14px; }
  .overview-image{ height: 180px; }

}
@media (max-width: 991px){

  .overview-card{ width: 100%; flex: auto; flex-direction: row; align-items: center; padding: 0; text-align: left; }
  .overview-content{ width: calc(100% - 350px); padding-left: 50px; }
  .overview-image{ padding-top: 0; padding-left: 5px; height: 250px; width: 350px; }
  .overview-image::before{ background: linear-gradient(90deg,rgba(236, 243, 250, 1) 0%, rgba(236, 243, 250, 1) 6%, rgba(236, 243, 250, 0) 50%); }

  .overview-top{ display: flex; align-items: center; margin-bottom: 20px; }
  .overview-number{ margin: 0; }
  .overview-title{ padding-left: 20px; width: calc(100% - 50px); padding-top: 30px; }
  .overview-title::after{ margin: 15px 0; }

}
@media (max-width: 767px){

  .overview-content{ width: calc(100% - 200px); padding-left: 30px; }
  .overview-image{ height: 180px; width: 200px; }
  .overview-top{ align-items: flex-start; margin-bottom: 10px;}
  .overview-title{ padding-top: 0; }

}
@media (max-width: 576px){

  .overview-content{ width: calc(100% - 150px); padding-left: 20px; }
  .overview-image{ height: 150px; width: 150px; }
  .overview-number{ width: 40px; height: 40px; font-size: 20px; }
  .overview-title{ padding-left: 15px; width: calc(100% - 40px); font-size: 17px; }
  .overview-description{ font-size: 12px; }
  .overview-title::after{ margin: 10px 0; }

}
/* @media (max-width: 576px){

  .overview-card{ flex-direction: column; padding-top: 30px; }
  .overview-content{ width: 100%; padding: 0 12px; }
  .overview-image{ width: 100%; height: 250px; padding: 0; padding-top: 5px; }
  .overview-image::before{ background: linear-gradient(180deg,rgba(236, 243, 250, 1) 0%, rgba(236, 243, 250, 1) 6%, rgba(236, 243, 250, 0) 50%); }

} */




/*  */
.img-process{ max-width: 1162px; width: 85%; margin: 50px auto; }

.box-process-list{ display: flex; gap: 30px; flex-flow: row wrap; margin: 50px 0; }
.box-process{ width: calc(33.333% - 20px); text-align: center; position: relative; }
.box-process::before{ content: ''; background-image: url('../images/icon/arrow-next.png'); background-repeat: no-repeat; background-size: cover; width: 24px; height: 40px; position: absolute; top: 100px; right: -24px; }
.box-process:last-child::before{ display: none; }
.box-process--img{ width: 240px; margin: 0 auto; }
.box-process--img img{ width: 100%; }
.box-process--detail .title{ font-size: 24px; line-height: 1.3; font-weight: 600; color: #173f77; margin-bottom: 10px; text-transform: uppercase; }
.box-process--detail p, .box-process--detail li{ font-size: 16px; line-height: 1.5; color: #173f77; margin-bottom: 5px; }
.box-process--detail li::before{ content: '•'; color: #173f77; display: inline-block; width: 1em; margin-left: -1em; }
.box-process--detail p:last-child,
.box-process--detail li:last-child{ margin-bottom: 0; }
.box-process--detail ul{ margin-left: 20px; width: 300px; margin: 0 auto; }
.box-process--detail li{ text-align: left; }
.box-process--detail li a:hover{ color: var(--primary); }
.box-process--detail ul li img{ width: 15px; }

@media (max-width: 1199px){

  .box-process--img{ width: 200px; }

}
@media (max-width: 991px){

  .box-process-list{ gap: 80px; }
  .box-process{ width: 100%; display: flex; text-align: left; }
  .box-process::before{ transform: rotate(90deg); top: auto; bottom: -55px; left: 50%; right: auto; margin-left: -12px;}
  .box-process--detail { width: calc(100% - 200px); padding-left: 30px; }
  .box-process--detail ul{ width: 100%; margin: 0 0 0 20px;}

}
@media (max-width: 767px){

  .box-process--img{ width: 150px; }
  .box-process--detail{ width: calc(100% - 150px); padding-left: 20px; }

}
@media (max-width: 576px){

  .box-process{ flex-direction: column; align-items: center; }
  .box-process--detail{ width: 100%; padding-left: 0; text-align: center; }

}



/*  */
.biobanking-list{ display: flex; gap: 40px 30px; flex-flow: row wrap; margin-top: 50px; }
.biobanking-col{ width: calc(25% - 23px); }
.biobanking--img{ max-width: 200px; margin: 0 auto 20px; position: relative; }
.biobanking--img img{ width: 100%; }
.biobanking--text{ font-size: 16px; line-height: 1.3; color: #173f77; text-align: center; margin-bottom: 5px; }
.biobanking--title{ font-size: 17px; line-height: 1.3; color: #173f77; text-align: center; }

.biobanking-col a:hover .biobanking--img::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 97, 254, 0.85); }
.biobanking-col a:hover .biobanking--img::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('../images/icon/icn-download2.png'); background-repeat: no-repeat; background-size: cover; width: 35px; height: 36px; }



@media (max-width: 1199px){

  .biobanking--img{ max-width: 160px; margin-bottom: 10px; }
  .biobanking--text{ font-size: 14px; }
  .biobanking--title{ font-size: 16px; }

}
@media (max-width: 991px){

  .biobanking-col{ width: calc(33.333% - 20px); }

}
@media (max-width: 767px){

  .biobanking-col{ width: calc(50% - 15px); }

}


.biobank-categories{ background-color: var(--primary); background-image: url('../images/human_biobank/bg-categories.jpg'); background-repeat: no-repeat; background-position: left bottom; background-size: cover; overflow: hidden; }

.biobank-categories .swiper-button-prev,
.biobank-categories .swiper-button-next{ filter: var(--filter-white); }

.swiper-biobank .swiper-slide{
  height: auto; 
  display: flex; 
}
.biobank-card {
  display: flex;
  flex-direction: column;
  width: 100%; 
  height: 100%; 
  background: #fff;
  overflow: hidden;
}
.biobank-card--img img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.biobank-card--body {
  padding: 15px 15px 0 15px;
  flex-grow: 1; 
}
.biobank-card--bottom {
  padding: 0 15px;
  /* border-top: 1px solid #ecf0f5; */
  margin-top: auto; 
}

.biobank-card--row{ display: flex; gap: 10px; flex-flow: row wrap; padding: 15px 0; border-bottom: 1px solid #ecf0f5; }
.biobank-card--body .biobank-card--row:last-child{ border-bottom: 0; }
.biobank-card--bottom .biobank-card--row:last-child{ border-top: 1px solid #ecf0f5; border-bottom: 0; }

.biobank-card--row .title{ width: 200px; font-size: 17px; line-height: 1.3; font-weight: 600; color: #173f77; }
.biobank-card--row .detail{ width: calc(100% - 210px); font-size: 17px; line-height: 1.5; color: var(--default); }
.biobank-card--row .detail h3{ font-weight: 400; } 
.biobank-card--row .detail ul{ display: flex; gap: 10px; flex-flow: row wrap; }
.biobank-card--row .detail ul li{ display: flex; align-items: center; gap: 5px; font-size: 14px; line-height: 1.5; color: #0050fc; background-color: #eef5ff; padding: 8px 12px; border-radius: 8px; }

.biobank-card--row .detail .bio-icon{ display: inline-flex; align-items: center; gap: 5px; font-size: 14px; line-height: 1.5; color: #0050fc; background-color: #eef5ff; padding: 8px 12px; border-radius: 8px; border: 1px solid #bacefa; } 
.biobank-card--row .detail .bio-icon i{ line-height: 0; }

@media (max-width: 1199px){

  .biobank-card--row .title,
  .biobank-card--row .detail{ font-size: 16px; width: 100%; }
  .biobank-card--img img{ height: 280px; }

}
@media (max-width: 991px){

  .biobank-card--img img{ height: 220px; }

}




/***********************************************************/
/***********************************************************/

.wpcf7-not-valid-tip{
  padding: 5px;
  padding-bottom: 0px;
  font-size: 12px;
}
.wpcf7-response-output{
  display: none !important;
}

body.logged-in.admin-bar .div-nav{ top: 32px; }
@media (max-width: 991px){
  
  body.logged-in.admin-bar .div-nav{ top: 46px; }
  body.logged-in.admin-bar .div-nav.fixHeader #nav-icon1{ top: 62px; }

}
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
  body.logged-in.admin-bar .div-nav.fixHeader #nav-icon1{ top: 58px; }
}

/***********************************************************/
/***********************************************************/


.section-search{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.8s ease; }

.div-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }

.section-search.boxOpen{ opacity: 1; visibility: visible; pointer-events: auto; transition: all 0.8s ease; z-index: 10005; }

.search--box{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.search--group{ position: relative; z-index: 10005; max-width: 883px; width: 90%; margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.search--input{ width: 100%; }
.search--input input{ width: 100%; background-color: transparent; border: 0; border-bottom: 2px solid #fff; font-family: 'Poppins', 'Prompt', sans-serif; font-size: 48px; line-height: 1.33; color: #fff; font-weight: 400; }
.search--btn img{ width: 40px; filter: var(--filter-white); }


.search--btnclose{ position: absolute; top: 20px; right: 20px; z-index: 5; }
.close-search{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.close-search img{ filter: var(--filter-white); }


@media (max-width: 991px){

  .search--input input{ font-size: 17px; }
  .search--btn img{ width: 24px; }
  .close-search{ width: 30px; height: 30px; }

}



/***********************************************************/
/***********************************************************/

.service-bottom{ padding-bottom: 80px !important; }
@media (max-width: 576px){

  .service-bottom{ padding-bottom: 30px !important; }

}


/***********************************************************/
/***********************************************************/

.boxpage404{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.boxpage404 .title{ font-size: 100px; line-height: 1; font-weight: 600; color: var(--primary); }
.boxpage404 .subtitle{ font-size: 30px; line-height: 40px; color: var(--primary); font-weight: 600; }
.boxpage404 p{ font-size: 17px; line-height: 24px; color: #333; font-weight: 400; margin-bottom: 50px; }
.boxbtn{ display: inline-block; padding: 20px 30px; background-color: var(--primary); color: var(--white); font-weight: 500; border: 1px solid var(--primary); transition: background-color 0.3s ease; }
.boxbtn:hover{ background-color: #fff; color: var(--primary); }

.popup-detail{ text-align: center; }
.popup-title{ font-size: 28px; font-weight: 600; color: var(--secondary, var(--primary)); margin-bottom: 20px; }
.popup--txt{ max-width: 570px; margin: 0 auto 30px; font-size: var(--txt-20); line-height: 1.4; font-weight: 300; color: var(--default); }
.popup-detail .btn{ border: none; cursor: pointer; font-family: 'Poppins', 'Prompt', sans-serif; font-size: 100%; }
.popup-detail .btn:hover{ background-color: #004bb5; color: var(--white); }

/* MODAL STYLES (contact form success) */
.jw-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, .75);
  padding: 40px;
  overflow: auto;
}
.jw-modal.open {
  display: block;
}
.jw-modal-body {
  background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 620px; width: 90%; padding: 50px 20px; border-radius: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
html.jw-modal-open,
body.jw-modal-open {
  overflow: hidden;
}

@media (max-width: 991px){
  .popup-title{ font-size: 24px; }
}
@media (max-width: 576px){
  .popup-title{ font-size: 20px; }
  .jw-modal-body{ padding: 40px 20px; }
}


/*  */
.no-results .page-title{ font-size: 70px; line-height: 1.2; font-weight: 600; color: var(--primary); margin-bottom: 30px; }

.wrapper-no-results{ display: flex; align-items: center; max-width: 800px; width: 100%; margin-top: 30px; }
.wrapper-no-results label{ padding-right: 20px; font-size: 17px; }
.wrapper-no-results .btn{ padding: 10px 20px; }
.wrapper-no-results .btn img{ filter: var(--filter-white); }

.input-no-results {
  display: block;
  width: 100%; height: 50px;
  padding: 0.375rem 0.75rem;
  font-size: 1rem; font-family: 'Poppins', 'Prompt', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid var(--primary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .input-no-results {
    transition: none;
  }
}
.input-no-results::placeholder {
  color: var(--black);
  opacity: 1;
}


@media (max-width: 1199px){

  .no-results .page-title{ font-size: 50px; }

}
@media (max-width: 576px){

  .no-results .page-title{ font-size: 40px; }

  .wrapper-no-results label{ padding-right: 10px; font-size: 16px; }
  .wrapper-no-results .btn{ padding: 7px 14px; }
  .wrapper-no-results .btn img{ width: 20px; }
  .input-no-results{ height: 40px; }

}




/***********************************************************/
/***********************************************************/


.no-header{ font-size: var(--txt-title); line-height: 1.3; font-weight: 600; margin-bottom: 30px; text-align: center; }
.wp-block-heading{ font-size: 34px; line-height: 1.3; font-weight: 600; margin-bottom: 10px; }

@media (max-width: 1199px){

  .wp-block-heading{ font-size: 30px; }

}
@media (max-width: 991px){

  .wp-block-heading{ font-size: 24px; }

}


.video-container { width: 100%; max-width: 100%; margin: 0 auto; }
video { width: 100%; height: auto; aspect-ratio: 16/9; display: block; }


.wp-block-table thead{ border-bottom: 0; }
.wp-block-table th{ background-color: #f3f3f3; font-size: 17px; }
.wp-block-table td, .wp-block-table th{ line-height: 1.3; }

@media (max-width: 576px){

.wp-block-table td, .wp-block-table th{ font-size: 13px; }

}




.page-template-no-header-template hr, .single-post article hr,.single-research article hr{ border: 0; border-top: 1px solid #e5e5e5; margin: 30px 0; }


/* .wp-block-paragraph{ margin-bottom: 20px; }
.wp-block-list{ list-style: disc; margin-left: 20px; margin-bottom: 20px; }
.wp-block-list li{ font-size: var(--txt-20); line-height: 1.6; margin-bottom: 5px; } */