/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0; 
  height: 100%; 

  /*touch-action: none;*/
}  
body{    
  background-color:#ecf0f3;
  
  margin:0;
  padding:0;  

  position: relative;
  overflow-x: hidden;

  overscroll-behavior: contain;
}

.modal-open{
  touch-action: none; 
  overscroll-behavior: contain;
}
 

.modal-backdrop{
  overscroll-behavior: contain;
}

.pc body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  image-rendering: -webkit-optimize-contrast;
}

b, strong{
  font-weight: bold; 
  font-family: inherit;
}
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6{   
  margin:0;  
  color:#141852;  
  font-weight: 500;
  font-style: normal; 
  line-height: 1.5;   
}  
h2, .h2{
  font-size: var(--f-32);
}
h3, .h3{
  font-size: var(--f-24);
}
h4, .h4{
  font-size: var(--f-20);
}
h6, .h6{
  font-size: var(--f-16);
  font-weight: 400;
}

.nowrap{ white-space: nowrap; }
 

@media (max-width:991.98px){}
 
a{
  color:inherit;
  text-decoration: none; 
  transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none; color:inherit; }
 
.star{ color: #bc0000 }

.form-control,
.form-select{
 -webkit-appearance: none;
   
  padding:0 15px;

  color:var(--black);
  font-weight:400;
  font-size:var(--f-16);
  font-family:inherit;

  height:46px;
  line-height:44px; 
  border-radius:10px;  
  background-color:#F6F6F6;   
  border:1px solid var(--stroke); 
 
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.form-select.sm{
  height: 32px;
  line-height: 30px;
  font-size: 13px;
  border-radius: 5px;
  padding: 0 10px;
}

.form-select.d-inline-block{
  width: auto; 
  min-width: 50px;
  padding-right: 30px;
}
.form-control:disabled, 
.form-control[readonly] {
background-color: #e2e2e2;
border-color: #c7c7c7;
} 


textarea.form-control{
  height: 100px;
  line-height: normal;
  padding-top: 10px; 
}

.form-control.h-45{
  height: 45px;
  line-height: 43px;
}
 

.form-group{
  display: block;
  position: relative;
  margin-bottom: 20px;
}
.form-group label.title{
  text-align: left;
  display: block; 

  font-weight: 300;
  font-size: 14px;
  color: rgba(45, 45, 45, 0.5);
  margin-bottom:8px;
  padding: 0 0 0 5px;
} 
  
.form-group label.title .star{
  color:rgba(237, 28, 36, 0.5);
  margin-right: 3px;
}
 
 
.form-group .group{
  position: relative;
  display: block;
}
.form-group .group .icons.float{
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -11px;
}
.form-group .group .icons.left{
  right: auto;
  left: 10px;
}

.form-group .group .icon-search{
  background-image: url(../img/icons/icon-search.svg); 
}
 

.form-group.has-prefix .group{
  display: flex;
  position: relative;
 
  border:1px solid var(--stroke);
  border-radius: 5px;
}
.form-group.has-prefix .form-control{
  border:0;
  height: 50px;
  line-height:48px;
  padding-left: 20px;
}
.form-group.has-prefix .group .prefix{ 
  text-align: center;
  display: flex;
  padding: 0 15px;
  border-right: 1px solid var(--stroke);
}
::-webkit-input-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.5;
  color: inherit
}

::-moz-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.5;
  color:inherit
}

:-ms-input-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.5;
  color: inherit
}

::-ms-input-placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.5;
  color:inherit
}

::placeholder {
  color: inherit;
  font-weight: inherit;
  opacity:0.5;
  color: inherit
}
  

.form-check .form-check-input{
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-color: #E1E1E1;
  border-width: 2px;
  position: relative;
  top: 3px;
}
.form-check .form-check-input[type="checkbox"]{
  width: 16px;
  height: 16px;
  border-width: 1px;
  border-radius: 4px;
}
.form-check label{
  margin-bottom:0;
  font-weight: 400;
  font-size: inherit;
  padding-top: 4px;
}
.form-check-input:checked {
  background-color:var(--dark-blue);
  border-color:var(--dark-blue);
}

.form-check .form-check-input:checked {
  background-color:#ffffff;
  border-color:var(--dark-blue);
  box-shadow: none !important;
}
.form-check .form-check-input:checked[type=radio]{
  background-image: url(../img/icons/dot.svg);
  background-size:9px; 
  border-color: #E1E1E1;
} 
.form-check .form-check-input:checked[type=checkbox]{
  background-image: url(../img/icons/icon-checked-2.svg);
  background-size:72%;
  background-color: var(--dark-blue);;
}
 
.form-check .form-check-label{
  left: -5px;
  position: relative;
}

  
  
.btn{
  position: relative; 
  padding:0 30px;  
  font-family:inherit;   
  font-size: var(--f-16);
  font-family: inherit;
  font-weight:400;
  height:45px;
  line-height:43px; 
  border-radius:10px; 
  border:1px solid var(--dark-blue);  
  background-color:var(--dark-blue);  
  transition: all 0.2s ease-in-out;
  color: #fff;
} 
 
.btn span{
  position: relative;
  z-index: 1;
} 
.pc .btn:hover{ 
  background-color: var(--dark-blue-hover);
  border-color: var(--dark-blue-hover);
  color: #fff; 
} 
.btn-light-grey{
  background-color: var(--light-grey);
  border-color:  var(--light-grey);
  color: var(--dark-blue);
}
.btn-light{
/*
  background-color: var(--light-blue);
  border-color:  var(--light-blue);
*/
  background-color: #977EB4;
  border-color: #977EB4;
  color: #fff;
}
.pc .btn-light:hover{
  /*
  background-color: var(--dark-blue);
  border-color:  var(--dark-blue);
  */
  background-color: #8D76A9;
  border-color: #8D76A9; 
}
.btn-darkness{
  background-color: var(--darkness-blue);
  border-color:  var(--darkness-blue);
  color: #fff;
}
.pc .btn-darkness:hover{
  background-color: var(--dark-blue);
  border-color:  var(--dark-blue); 
}

.btn-grey{
  background-color:#EDF0F2;
  border-color: #EDF0F2; 
  color: var(--black);
}
.pc .btn-darkness:hover{
  background-color: var(--dark-blue);
  border-color:  var(--dark-blue); 
}

.btn-trans{
  background-color: transparent;
  border-color: transparent;
}
 
.btn-shadow{
  border-color:  #F6F6F6;;
  background: #F6F6F6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
  border-radius: 20px;
}
.pc .btn-shadow:hover{
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
}
.btn span.link{
  border-bottom: 1px solid #fff;
  line-height: 1.2;
}
 
.btn.d-flex span{
  margin-top: auto;
  margin-bottom: auto;
}
.btn.d-flex .icons{
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-right: 10px;
}
.btn.d-flex .icons svg{
  width: 100%;
  height: auto;
  vertical-align: top;
} 
.btn.d-flex .icons svg.print path{stroke: #fff;}
.btn.d-flex .icons svg.filter path{fill: #fff;}

.btn .badge{
  position: absolute;
  top: -10px;
  right: -10px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  padding: 0;
  text-align: center;
  background-color: var(--orange);
  border-radius: 50%;
  display: block;
  font-weight:400;
}
 
.btn[disabled]{
  border-color: #D4EAEA;
  background-color:#D4EAEA;
  color:#A1C9C9;
  line-height: 56px;
  pointer-events: none;
  opacity: 1;
} 
.btn.disabled, .btn:disabled{opacity: 0.35; pointer-events: none;}
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
 
.btn-link, 
.btn-link:hover, 
.btn-link:focus, 
.btn-link:active{
  background-color: transparent;
} 

.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important; 
} 
.buttons{
  display: block; 
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
} 
 
.buttons.center .btn{
  margin: 0 auto;
}
.buttons.d-flex {
  -ms-flex-pack: center;
justify-content: center;
}
.buttons.d-flex .btn{
  margin: 0 7px; 
}
 
svg path,
svg rect,
svg line,
svg circle,
svg polygon{ 
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
} 

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

@media (max-width:1199px) {
  .btn .badge { 
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
  }

}

@media (max-width:670px) {
  .form-control, .form-select{
    height: 42px;
    line-height: 40px;
    border-radius: 8px;
  }

  .btn{
    height: 42px;
    line-height: 40px;
  }

  .btn.d-flex .icons{
    width: 16px;
    height: 16px;
    min-width: 16px;
  }

  .btn .badge { 
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
}
 

/*==================================================
    Icon Setup
==================================================*/  

.icons{
  display:inline-block;
  position:relative;
  vertical-align:middle; 
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
.icons.before:before,
.icons.before:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
.btn .icons.before:before{ opacity: 1; }
.btn .icons.before:after{ opacity: 0; }
.pc .btn:hover .icons.before:before{ opacity: 0; }
.pc .btn:hover .icons.before:after{ opacity: 1; }
 

.inline-black{
  display: inline-block;
  padding: 0 10px
}

/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
  height:5px;
  vertical-align:top;

  border-top: 1px solid #676767;
  border-left: 1px solid #676767;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

.arrow-right{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);  
}

.arrow-up{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.arrow-down{
   margin-left:1px; 
   -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  
}
 
 
.container-fluid{
  max-width:100%; 
  padding-left:60px;
  padding-right:60px; 
  position: relative;
  z-index: 9;  
}

.container{ 
  max-width:calc(1420px + 120px); 
  padding-left:60px;
  padding-right:60px; 
  position:relative;
  z-index:9; 
}

.section-target{
  position: absolute;
  top:0px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.section{
  display: block;
  position: relative;
}
 
@media (max-width:1280px) {
  .container,
  .container-fluid{
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width:1024px) {
  .container,
  .container-fluid{
    padding-left: 30px;
    padding-right: 30px;
  }
}
 

@media only screen and (min-width: 768px) and (max-height: 500px) {} 

@media (max-width: 576px) {
  .container,
  .container-fluid{ 
    padding-left:20px;
    padding-right: 20px;
  }
  
  .form-group label.title{font-size: 13px;}

	.table-responsive .chart-box {
		min-width: 500px;
	}
}
   
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }


.fancybox-button--arrow_left > div,
.fancybox-button--arrow_right > div,
.fancybox-button--zoom,
.fancybox-button--play{opacity: 0 !important; pointer-events: none;} 
/*==================================================
    Header Setup
==================================================*/  
 
:root {    

  --bs-body-color:var(--almost-black);
  --bs-body-text-align:left;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.6;
  --bs-body-font-size:var(--f-14);
  
  --bs-body-font-family:'Prompt', sans-serif;

  --font-promt:'Prompt', sans-serif;
  --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
  --font-sarabun: 'Sarabun', sans-serif;

  --f-32:32px;
  --f-24:24px;
  --f-20:20px;
  --f-16:16px;
  --f-14:14px;
 
  --black:#212529;
  --dark-blue:#273D62; 
  --darkness-blue:#1A0C51; 
  --dark-blue-hover:#748DCD; 
  --light-blue:#748DCD;
  --almost-black:#59595C;
  --light-grey:#EDF0F2;
  --green:#298432;
  --orange:#F9A431;
  --stroke:#D9D9D9;
  --bright-red:#EE4B2B;

  --animate-duration-2s: all 0.2s ease-in-out;
  --animate-duration-35s: all 0.35s ease-in-out;
  --animate-duration-40s: all 0.40s ease-in-out;
  --animate-duration-45s: all 0.45s ease-in-out;
   
  --f-300:200;
  --f-400:300;
  --f-500:400;
  --f-600:500; 
  --f-700:600; 
}
.f-12{
  font-size: 12px !important;
}
.f-14{
  font-size: 14px !important;
}
.f-20{font-size: var(--f-20);}
.prompt{font-family: var(--font-promt) !important;}
 
.regular{font-weight: 400 !important}
.medium{font-weight: 500 !important}
.semibold{font-weight: 600 !important}
.light{font-weight: 300 !important}
.bold{font-weight: 700 !important}
.white{color: #fff;}
.blue{color: var(--dark-blue);}

  
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  :root{
    --f-300:300;
    --f-400:400;
    --f-500:500;
    --f-600:600; 
  }

} 
 
@media (max-width:1550px) {
  :root{
    --f-32:28px;
  }
}

@media (max-width:1280px) {
  :root{
    --f-32:26px;
    --f-24:22px;
    --f-20:18px;
    --f-16:15px;
  }
   
}
 
@media (max-width:1199px) { 
   
}

@media (max-width:991.98px) { 
  :root{ }
}

@media (max-width:670px) { 
  :root{
    --f-32:30px;
    --f-24:18px;
    --f-20:16px;
    --f-16:14px
  }
}
  

.header,   
.navbar-brand,
.navbar-brand img{ 
   -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
}
 

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding:25px 0;
  height: auto;
  z-index: 1060;      
  display: block;  
  background-color: #fafbfc; 
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.05);    
}

 
.header .container,
.header .container-fluid{  
  display: flex;  

} 
 
.navbar-brand{
  margin:auto 0; 
  padding: 0;  
  position: relative; 
  width: 202px;
  min-width: 202px;
}
 
.navbar-brand img {width: 100%; height: auto;} 

.form-group.search{
  margin: auto 0;
  margin-left:35px;
  margin-right:5%;
  width: 100%;
}
.form-group.search .form-control{
  background-color:#EDF0F2;
  border-radius: 20px;
  padding: 0 20px;
  height: 53px;
  line-height: 51px;
  
  border-color: #EDF0F2;
  font-size: 15px;
}

.form-group.search ::placeholder {  
  font-weight: 200; 
  opacity: 1; 
  font-style: italic;
}

.form-group.search :-ms-input-placeholder {  
  font-weight: 200; 
  font-style: italic;
}

.form-group.search ::-ms-input-placeholder {  
  font-weight: 200; 
  font-style: italic;
}
 
.btn-icon{display: none;}

.nav-main{
  margin: auto 0;
  margin-right: -20px;
  margin-left: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-main > li{
  margin: 0 20px;
}
.nav-main > li a{
  color: var(--dark-blue);
  font-size: var(--f-16);
  padding: 10px 0;
  display: block;
}
.pc .nav-main > li:hover a{color: var(--almost-black);}

.nav-main a[data-bs-toggle="dropdown"]:after{
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
}

.nav-main > li > a[data-bs-toggle="dropdown"]:after{
  margin-left: 8px;
  position: relative;
  top: 2px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23273D62' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.nav-main li{position: relative;}
.nav-main li li a:after{
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 4px;
  position: relative;
  top: 2px;
  display: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23273D62' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.nav-main li li a{
  position: relative;
  padding: 15px 20px;
  display:block;
}
.nav-main li li a:before{
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  border-bottom: 1px solid var(--stroke);
} 
.nav-main li:last-child a:before{
  border: 0;
}
 
.nav-main li li a:after{
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23BBBCBE' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  transform: rotate(-90deg);
}
.pc .nav-main li li:hover > a:before,
.nav-main li li.active > a:before{border: 0;}

.pc .nav-main li li:hover > a:after,
.nav-main li li.active > a:after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.nav-main li.nav-home {
  margin-left: 0;
  margin-right: 30px;
}
.nav-main li.nav-home:before{
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -25px;
  border-right: 2px solid var(--dark-blue);
}
.nav-main .icon-home{
  width: 22px;
  height: 22px;
  background-image: url(../img/icons/icon-home.svg);
  top: -2px;
}
body:not(.scrolling) .page-index .nav-main li.nav-home:before{border-color: #fff;}
body:not(.scrolling) .page-index .nav-main .icon-home{background-image: url(../img/icons/icon-home-white.svg);}

.nav-main .dropdown-menu {
  border-radius: 0px 10px 10px 10px;
  padding:0;
  margin: 0;
  border:0;
  width: auto;
  top: 120%;

  display: block;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}
.nav-main .dropdown-menu  a{
  background: #EDF0F2;
}

.nav-main .dropdown-menu.lv-1 li:first-child >  a,
.nav-main .dropdown-menu.lv-2 li:first-child >  a{
  border-radius: 0 10px 0 0;
}
.nav-main .dropdown-menu.lv-1 li:first-child:hover >  a{
  border-radius: 0;
}
.nav-main .dropdown-menu.lv-2 li:first-child >  a{
  border-radius: 0 10px 0 0 !important;
}
.nav-main .dropdown-menu.lv-2 li:last-child >  a,
.nav-main .dropdown-menu.lv-1 li:last-child >  a{
  border-radius: 0 0 10px 10px !important;
}
.nav-main .dropdown-menu.lv-2 {
  left:80%;
  top: 0 !important; 
  width: auto;
  
}
.nav-main .dropdown-menu.lv-2 a:after{display: none;}
.nav-main .dropdown-menu.show,
.pc .nav-main li.dropdown:hover > .dropdown-menu{
  opacity: 1;
  pointer-events: all;
  top: 100%;
}

.nav-main .dropdown-menu.lv-2.show,
.pc .nav-main li.dropdown:hover > .dropdown-menu.lv-2{
  left:100%;
}

.pc .nav-main .dropdown-menu li:hover > a{
  background-color: var(--dark-blue);
  color: #fff;
}

 
.scrolling .header{
  padding:15px 0;
}
.scrolling .navbar-brand{
  width: 170px;
  min-width: 170px;
}

.search-mobile-button{display: none;}

 
@media (max-width:1440px){
  .header{padding:15px 0;}
 
  .form-group.search{ 
    margin-right:4%;
  }
  .form-group.search .form-control{
    height: 45px;
    line-height: 43px;
    border-radius: 15px;
  }
  .nav-main{margin-right: -15px;}
  .nav-main > li{
    margin:0 15px;
  }
}
@media (max-width:1330px){
  .form-group.search{
    margin-left: 20px;
    margin-right: 3%;
  }
}

@media (max-width:1199px){
  .navbar-brand{
    width: 150px!important;
    min-width: 150px!important;
  }

  .form-group.search .group .icons.float{
    width: 16px;
    height: 16px;
    margin-top: -8px;
  }
  .nav-main > li{
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media (max-width:991.98px){
  
  .btn.btn-icon{
    padding: 0 !important;
    border:0 !important;  
    background-color: transparent !important;
    vertical-align: middle;
    z-index: 1060;  
    overflow: visible;
    margin:auto 0; 
    display: flex; 
  }
  
  .btn-icon:before{display: none;}
  .btn-icon .group{
    display: block;
    position: relative;
    width:25px;
    height:18px;
    margin: auto
  }
  .btn-icon .group span{
    height: 2px;

    position: absolute;
    left: 0;
    right: 0;
    border-radius: 10px;
    -webkit-transform-origin: 25px, 1px;
    -ms-transform-origin: 25px, 1px;
    transform-origin: 25px, 1px
  }
  .btn-icon .group span:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background:var(--dark-blue);
    transition: all 0.25s ease-in-out;
  } 

  .btn-icon .group span:nth-child(1) {
      top: 0;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(2) {
      top:8px; 
      -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(3) {
      top: 16px;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }


  .nav-opened .btn-icon .group span:nth-child(1) {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(45deg) translate3d(6px, 6px, 0);
    transform: rotate(45deg) translate3d(6px, 6px, 0)
  }

  .nav-opened .btn-icon .group span:nth-child(2) {
    -webkit-transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0)
  }

  .nav-opened .btn-icon .group span:nth-child(3)  {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform:rotate(-45deg) translate3d(7px, -6px, 0);
    transform: rotate(-45deg) translate3d(7px, -6px, 0)
  } 
  .form-group.search{margin-right: 15px;}
  .form-group.search .form-control{
    height: 40px;
    line-height:38px;
    border-radius: 10px;
  }
  .nav-main .icon-home{
    width: 19px;
    height: 19px;
  }
  .nav-main li.nav-home{
    margin-right: 20px;
  }
  .nav-main li.nav-home:before{
    right: -15px
  }
}

@media (max-width:670px){
  .header {
    padding: 10px 0!important;
  }
  .navbar-brand{
    width: 120px !important;
    min-width: 120px!important;
  } 
    
  .search-mobile-button{
    display: block;
    margin: auto 0;
    margin-left: auto;
    width: 25px;
    height: 25px;
    cursor:pointer;
    border-radius: 50%;
    background-color: var(--light-grey);
  }
  .search-mobile-button .icons{
    width: 100%;
    height: 100%;
    background-image:url(../img/icons/icon-search.svg);
    background-size: 13px;
  }

  .header .form-group.search{
    position: absolute;
    top: 134%;
    left: 0;
    right:0;
    z-index: 1005;
    background-color: #fff;
    padding: 20px;
    width: auto;
    margin: 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    pointer-events: none;
  }

  .search-opened  .header .form-group.search{
    opacity: 1;
    top: 123%;
    pointer-events: all;
  }
  .search-opened .page-blocker{
    display: block;
    z-index: 1000;
    pointer-events: all;
    opacity: 1;
  }

  .nav-main .icon-home{
    width: 16px;
    height: 16px;
  }
  .nav-main li.nav-home{
    margin-right: 5px;
  }
  .nav-main li.nav-home:before{
    right: -10px;
    border-width: 1px;
    top: 10px;
    bottom: 10px;
  }
}

@media (max-width:375px){
  .nav-main{margin-left: auto; margin-right: -10px;}
  .nav-main > li{
    margin-left: 10px;
    margin-right: 10px;
  }
  .nav-main li.nav-home{display: none;}

  .btn.btn-icon{margin-left: 5px;}
}

@media (max-width:330px){
  .navbar-brand {
    width: 100px;
    min-width: 100px;
  }
  .nav-main{margin-left: auto; margin-right: -5px;}
  .nav-main > li{
    margin-left: 5px;
    margin-right: 5px;
  }
}
/*==================================================
   Mobile Menu
==================================================*/  
@media (max-width:991.98px){
  .header-slideout,
  .page-slideout {
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .page-slideout {
      position: relative;
      background-color: #fff;
      overflow: hidden;
  }
  .closing .page-slideout,
  .nav-opened .page-slideout {
      z-index: 1040;
  }
  .closing .header-slideout,
  .nav-opened .header-slideout {
      z-index: 1043;
  }
  .page-blocker {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
      z-index: 1090;
      pointer-events: none;
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .nav-opened .header-slideout,
  .nav-opened .page-blocker,
  .nav-opened .page-slideout {
      /*-webkit-transform: translate(-280px, 0);
      -ms-transform: translate(-280px, 0);
      transform: translate(-280px, 0);
      -webkit-transform: translate3d(-280px, 0, 0);
      transform: translate3d(-280px, 0, 0);*/
  }
  .nav-opened .page-blocker {
      background-color: rgba(0, 0, 0, 0.6);
  }
  .nav-opened .page-blocker {
      pointer-events: auto;
      display: block;
      cursor: pointer;
  }
  .navbar-slide {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1095;
      width: 300px;
      overflow: hidden;
      padding: 0; 
      display:block;
      background-color:var(--dark-blue) ;
      align-items: normal;
      -ms-flex-align: normal;
      -webkit-transform: translate(300px, 0);
      -ms-transform: translate(300px, 0);
      transform: translate(300px, 0);
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .nav-opened .navbar-slide {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
  .nav-opened .header {
      pointer-events: none;
  }
  .navbar-device .container-fluid {
      padding: 0;
  }
  .nav-menu {
      position: absolute;
      top: 0;
      bottom: 0;
      display: block;
      height: 100%;
      right: -300px;
      width: 600px;
      overflow: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; 
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
  }
  .nav-menu li {
      display: block;
      position: static;
  }
  .nav-menu li {
      padding-left: 20px !important;
  }
  .nav-menu li a {
      padding: 18px 0 18px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-weight: 400;
      font-size: 16px !important;
      height: auto!important;
      line-height: normal !important;
      display: block;
      position: relative;
      color: #fff;
  } 
  .nav-menu > li > a {
      width: 280px;
      position: relative;
  }
  .nav-menu > li.dropdown > a:after {
      content: "";
      position: absolute;
      top: 25px;
      left: 245px;
      content: "";
      width: 8px;
      height: 8px;
      opacity: 0.75;
      vertical-align: top; 
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
  }

   .nav-menu > li > a .arrow{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    z-index: 1; 
   }
  .nav-menu .dropdown-menu {
      position: absolute;
      top: 0 !important;
      right: 0;
      bottom: 0;
      left: auto !important;
      width: 300px;
      margin: 0;
      padding: 0;
      transition: none;
      border: 0;
      background-color: var(--black);
      
  } 
  .nav-menu li.nav-title {
      padding-left: 0;
      position: relative;
      cursor: pointer;
      display: block;

      opacity: 0.8;
      font-weight: 300;
      font-size: 14px;
      padding: 20px 0 20px 50px;
      color:rgba(255,255,255,0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  } 
  .nav-menu li.nav-title > span{
    display: block;
    position: relative;
    padding: 0 0 0 30px;
  }
  .nav-menu li.nav-title .arrow{
      display: inline-block;
      position: absolute;
      vertical-align: top;
      left: 5px;
      top: 50%;
      margin-top: -6px;
  }
  .nav-menu li.nav-title .arrow:before{
      content: "";
      width: 12px;
      height: 12px;
      vertical-align: top;
      position: absolute;
      top: 0;
      left: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.8);
      border-left: 1px solid rgba(255, 255, 255, 0.8);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
  } 
  .nav-menu > li .dropdown-menu a{font-size: 16px !important}
  .nav-menu .dropdown.showing .dropdown-menu {
      display: block;
      opacity: 1;
  }
  .nav-menu .dropdown .nav{
    flex-direction: column;
  }
  .level-1-opened .nav-menu {
      right: 0;
  } 
}

@media (max-width:330px) , (max-height:580px) {
  .navbar-slide{ 
    width: 260px;
    -webkit-transform: translate(260px, 0);
    -ms-transform: translate(260px, 0);
    transform: translate(260px, 0);
    -webkit-transform: translate3d(260px, 0, 0);
    transform: translate3d(260px, 0, 0);
  }
  .nav-menu{
    width: 520px;
    right: -260px;
  }
  .nav-menu .dropdown-menu{
    width: 260px;
  }

  .nav-menu > li > a{
    width: 240px;
  }
  .nav-menu > li.dropdown > a:after{
    left: 212px;
    top: 20px;
  }
  .nav-menu li.nav-title{
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .nav-menu li a{
    padding: 13px 0;
    font-size: 14px !important;
  }
  .nav-menu > li .dropdown-menu a {
    font-size: 14px !important;
}
}

/*==================================================
   Section
==================================================*/  
 
.page{
  display: block;
  position: relative;
  overflow: hidden;  
  padding-top:120px;
}
@media (max-width:1440px){
  .page{
    padding-top:100px;
  }
}
 
@media (max-width:1199px){
  .page{
    padding-top:81px;
  }
}
  
@media (max-width:670px){
  .page{
    padding-top:63px;
  }
}
  

.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#fff;
  z-index: 1090; 
  display:block;  
} 
 
 
.section-full{
  min-height: 100vh;
  min-height: calc(var(--vhs, 1vh) * 100) !important;
  display: flex;
}
 
.background{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  pointer-events: none;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.device .background.parallaxie{
  background-attachment: scroll !important;
  background-position: center center !important;
}


@media (max-width:1199px) {
  .background.parallaxie{
    background-attachment: scroll !important;
    background-position: center center !important;
  }
}
 
.section{
  padding: 0;
  position: relative;
}
.py-50{padding: 50px 0} 
 

.section.h-full{
  min-height: 100vh;
}

.section-title{ 
  display: block;
  position: relative;
  padding:45px 0; 
} 
 
 .section-title.center{
   text-align: center;
 }
 .section-title.center hr{
   margin-left: auto;
   margin-right: auto;
 }

.card{
  border:0;
  border-radius: 0;
  background-color: transparent;
  position: relative;
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block;
}

.card-photo .photo{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.35s ease 0s;
}
.card-photo img{
  width: 100%
}
 
.card-link{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.card h3,
.card p,
.card .card-body{transition: all 0.2s ease 0s;}

strong{
  font-weight: 500;
}
.row.space-8{margin:0 -8px}
.row.space-8 > div{padding:0 8px}
.row.space-10{margin:0 -10px}
.row.space-10 > div{padding:0 10px}
.row.space-20{margin:0 -20px}
.row.space-20 > div{padding:0 20px}
.row.space-25{margin:0 -25px}
.row.space-25 > div{padding:0 25px}
.row.space-30{margin:0 -30px}
.row.space-30 > div{padding:0 30px}
.row.space-40{margin:0 -40px}
.row.space-40 > div{padding:0 40px}
.row.space-60{margin:0 -60px}
.row.space-60 > div{padding:0 60px}
.row.space-70{margin:0 -70px}
.row.space-70 > div{padding:0 70px}

@media (max-width: 1680px){
  .section-title.rows{
    padding: 30px 0;
  }
}

@media (max-width: 1550px){
  .row.space-20{margin:0 -15px}
  .row.space-20 > div{padding:0 15px}
 
}

@media (max-width: 1280px){  

  .row.space-70{margin:0 -50px}
  .row.space-70 > div{padding:0 50px}

  .row.space-40{margin:0 -20px}
  .row.space-40 > div{padding:0 20px}
 
}

@media (max-width: 1024px){ 
  .section-title{ padding:35px 0;}
  .row.space-20{margin:0 -15px}
  .row.space-20 > div{padding:0 15px}    
  
}
@media (max-width:991.98px){
  .row.space-20{margin:0 -10px}
  .row.space-20 > div{padding:0 10px}
}

@media (max-width: 670px){
  
  .section-title{ padding:30px 0;}
  .section-title.rows{padding:20px 0}
  .row.space-20{margin:0 -10px}
  .row.space-20 > div{padding:0 10px}   
 
} 

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

.switch-item {
  position: relative!important;
  display: inline-block;
  width:50px;
  height: 23px;
  margin: 0 0 0 auto;
  color: var(--dark-blue);
}

.switch-item input { 
  opacity:0;
  width:0;
  height:0;
}

.switch-item .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:var(--light-grey);
  -webkit-transition: .2s;
  transition: .2s;
  border-radius:50px;
}

.switch-item .slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left:4px;
  bottom:3px;
  background-color: var(--dark-blue);
  -webkit-transition: .2s;
  transition: .2s;
  border-radius: 50%;
}

.switch-item input:checked + .slider {
  background-color:var(--light-grey);
}

.switch-item input:focus + .slider {
  box-shadow: 0 0 1px var(--light-grey);
}

.switch-item input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}
.switch-item.lang{
  display: flex;
  margin:10px 30px;  
}
.switch-item.lang:before,
.switch-item.lang:after{
  display: inline-block;
  position: absolute;
  top: 2px; 
}
.switch-item.lang:before{content: 'TH';  left: -30px;}
.switch-item.lang:after{content: 'EN';  right: -30px;}

.switch-item-group{
  display: flex;
  margin-top: 7px;
  margin-bottom: 7px;
  font-size: 13px;
}
.switch-item-group .switch-item{
  margin: 0 10px 0 0;
  width: 38px;
}
.switch-item-group .switch-item .slider:before{
  background-color: #fff;
}
.switch-item-group .switch-item .slider:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 17px;
  height: 17px; 
  margin-top: -8px;
  background-image: url(../img/icons/icon-compare-close.svg);
  background-size:8px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: .2s;
}
.switch-item-group .switch-item input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}
.switch-item-group .switch-item input:checked + .slider:after {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);

  background-image: url(../img/icons/icon-compare-checked.svg);
}
.switch-item-group .switch-item input:checked + .slider{
  background-color: var(--dark-blue);
}
.switch-item-group .switch-item input:checked + .slider:before{
  background-color: var(--light-grey);
}
@media (max-width: 1024px){
  .switch-item.lang{
    width: 40px;
    height: 19px;
  }
  .switch-item.lang input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  .switch-item.lang .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 4px;
    bottom: 3px;
  }
  .switch-item.lang{margin: 12px 20px;}
  .switch-item.lang:before, 
  .switch-item.lang:after{top: -1px;}

  .switch-item.lang:before{left: -25px;} 
  .switch-item.lang:after{right: -25px;}
}
@media (max-width: 670px){
  .switch-item.lang {
    margin: 12px 26px;
  }
}
@media (max-width: 330px){
  .switch-item.lang {
     font-size: 12px;
  }
  .switch-item.lang {
    width:32px;
    height: 19px;
  }
  .switch-item.lang:before, 
  .switch-item.lang:after{top: 1px;}

  .switch-item.lang:before{left: -21px;}
  .switch-item.lang:after{ right: -21px;}

  .switch-item.lang input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
  }
}

/*==================================================
   secton
==================================================*/  


.section-body{
  min-height: calc(100vh - (120px + 214px));
  padding-bottom: 74px;
  padding-top: 30px;
}

@media (max-height: 670px){
 
  .section-body.fit-content{
    padding-top: 0;
  }
}

@media (max-width: 1440px){
  .section-body{ 
    padding-top:25px;
    min-height: calc(100vh - (100px + 214px));
  }

  
}
@media (max-width: 1280px){
  .section-body{
    min-height: calc(100vh - (81px + 214px));
  }
}


@media (max-width: 991.98px){
  .section-body.fit-content{
    min-height: calc(100vh - (81px + 214px));
  }
}
@media (max-width: 670px){
  .section-body,
  .section-body.fit-content{
    min-height: calc(100vh - (63px + 290px));
    padding-bottom: 30px;
  }
}

/*==================================================
   Index
==================================================*/  
.page-index{
  background-image: url(../img/thumb/bg-main.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment: fixed;
}
.device .page-index{background-attachment: scroll !important;}
body:not(.scrolling) .page-index .header{
  background-color: transparent;
  box-shadow: none;
}



body:not(.scrolling) .page-index .nav-main > li > a{color: var(--light-grey);}
body:not(.scrolling) .page-index .nav-main > li > a[data-bs-toggle="dropdown"]:after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23EDF0F2' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
body:not(.scrolling) .page-index .switch-item.lang{color: var(--light-grey);}

body:not(.scrolling) .page-index .navbar-brand{opacity: 0;}

body:not(.scrolling) .page-index .btn-icon .group span:before{background-color: var(--light-grey);}

.page-index {color: #fff;}
.page-index .form-group.search{display: none;}

.page-index .header .container.small{
  max-width: 1120px;
  padding: 0; 
}
 
.scrolling .page-index .header{
  background-color:#FAFBFC
}

/*
.scrolling .page-index .header .container{
    max-width: calc(1420px + 120px);
    padding-left: 60px;
    padding-right: 60px;
}
*/
.search-container{
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 30px; 
  
}
.search-container .logo{
  display: block;
  width:340px;
  position: relative;
  margin: 0 0 20px 0;
  position: relative;
  left: 0;
}
.search-container .logo img{
  width: 100%;
}
.search-container .logo h3{
  position: absolute;
  left: 33%;
  bottom: -10%;
  color: #fff;
  white-space: nowrap;
  font-weight: 300;
  font-size: var(--f-20);
}
.search-container h6{
  color: inherit;
  padding-left: 0;
  font-weight: 300;
  margin-bottom: 10px;
}
.form-group.search.lg {
  display: block !important;
  margin: 0;
}
.form-group.search.lg .form-control{
  height: 66px;
  line-height: 64px;
  font-size: var(--f-16);
  color: var(--dark-blue);
  font-style: normal;
}
.form-group.search.lg .icons{
  width: calc(66px - 10px);
  height: calc(66px - 10px);
  margin-top: 0 !important;
  top: 5px;
  right: 5px;
  cursor: pointer;
  background-color: transparent;
  border-radius: 20px;
  background-image: none;
  display: flex;
}
.form-group.search.lg .icons svg{
  width:30px;
  height: auto;
  vertical-align: top;
  margin: auto;
}
.pc .form-group.search.lg .icons:hover{background-color: var(--dark-blue);}
.pc .form-group.search.lg .icons:hover svg circle,
.pc .form-group.search.lg .icons:hover svg line{stroke: var(--light-grey);}

.pointer{
  cursor: pointer;
}
.icon-list{
  width: 16px;
  height: 16px;
  background-image: url(../img/icons/icon-list.svg);

}
.nav.search-category{
  margin:0 -8px;
  padding: 0 0 10px;
}
.nav.search-category li{
  width: 12.5%;
  padding: 8px;
}

.card-category{
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #F6F6F6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  height: 132px;
  width: 100%;
  position: relative;
  transition: all 0.2s ease-in-out; 
}
.card-category .card-icons{
  width: 47px;
  height: 47px;
  margin: 20px auto 6px;
  position: relative;
}
.card-category .card-title{
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-blue);
  transition: all 0.2s ease-in-out;
  padding: 0 5px;
}
.card-category .card-icons img {
  width: 100%;
  height: auto;
  transition: all 0.2s ease-in-out;
}
.card-category .card-icons img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
}
.pc .card-category:hover{
  background-color:var(--dark-blue) ;
  color: #fff;
}
.pc .card-category:hover .card-title{
  color: #fff;
}
.pc .card-category:hover .card-icons img:nth-child(1){opacity: 0;}
.pc .card-category:hover .card-icons img:nth-child(2){opacity: 1;}

.keyword-recent{
  margin: 17px -10px 10px;
}
.keyword-recent li{
  padding: 0 10px; 
  font-size: var(--f-16);
  font-weight: 300;
}
.keyword-recent li:first-child{padding-right:30px;}
.pc .keyword-recent li a:hover{border-bottom: 1px solid var(--light-grey);}

.dropdown-menu.search{
  background-color:#fff;
  border-radius: 20px;
  border:0;
  width: 100%;
  max-height: 250px;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0;
  top: 110%;
  padding: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.075);
}
.dropdown-menu.search li{
  border-bottom:1px solid rgba(0,0,0,0.03); 
}
.dropdown-menu.search li a{
  display: block;
  padding: 10px 15px; 
}
.pc .dropdown-menu.search li:hover a{
  background-color: var(--dark-blue);
  color: #fff; 
}



@media (max-width: 1440px){
  .search-container{
    padding-top: 10px;
  }
  .search-container .logo{
    width:290px;
  }
  .search-container .logo h3{ font-size:20px;}
}

@media (max-width: 1199px){
  .page-index .header .container.small{
    padding-left:60px;
    padding-right: 60px;
  }
  .search-container {
    padding-left: 40px;
    padding-right: 40px;
  }
  .form-group.search.lg .form-control {
    height:52px;
    line-height: 50px;
  }

  .search-container .logo{
    width: 300px;
    margin-bottom:40px;
  }
  .search-container .logo h3{
    font-size: 20px;
  }

  .form-group.search.lg .icons {
    width: calc(52px - 10px) !important;
    height: calc(52px - 10px) !important;
    
  }
  .form-group.search.lg .icons svg{
    width: 25px;
  }
  .dropdown-menu.search{
    border-radius: 12px;
  }
  .dropdown-menu.search li a{
    font-size: 14px;
    padding: 8px 15px;
  }

  .card-category{
    height: 126px;
  }
  .card-category .card-title{
    font-size: 14px;

  }
}

@media (max-width: 1150px){
  .page-index .header .container.small{
    padding-left:80px;
    padding-right: 80px;
  }


}
@media (max-width: 1050px){
  .nav.search-category li{
    width: 25%;
  }
  .card-category{height: 130px;}
  .card-category .card-title{
    font-size: 15px;
  }
}

@media (max-width: 991.98px){
  .search-container{padding-top: 15px;}
  
  .search-container .logo{
    width: 240px; 
    margin-bottom: 40px;
  }
  .search-container .logo h3{
    font-size: 16px;
  }
 
  .card-category{
    height: 135px;
  }
  .card-category .card-title{
    font-size: 15px;
  }

  
}

@media (max-width:670px){

  .page-index .header .container.small{
    padding-left:25px;
    padding-right: 25px;
  }
  .search-container{
    padding:15px 0;
  }
  .search-container .logo{
    width:150px;
    left: 0;
    margin-bottom: 30px;
  }
  .search-container .logo h3{
    font-size: 3vw; 
    bottom: -20%;
  }
  .form-group.search.lg .icons svg {
    width:20px;
  }
  .form-group.search.lg .form-control{
    padding: 0 10px;
  }
  .form-group.search.lg .icons{
    background-color:var(--light-grey) !important;
  }
  .nav.search-category{
    margin-left: -5px;
    margin-right: -5px;
  }
  .nav.search-category li{
    width: 33.333%;
    padding: 5px;
  }
 
  .card-category{height: 105px;}
  .card-category .card-icons{
    margin-top:15px;
    margin-bottom:3px;
    width: 40px;
    height: 40px;
  }
  .card-category .card-title{
    font-size: 12px;
  }
  .keyword-recent{margin-left: -5px;margin-right: -5px;}
  .keyword-recent li{font-size: 12px; padding: 5px;}
  .keyword-recent li:first-child{
    padding-right: 5px;
  }

  .header .dropdown-menu.search{top: 100%; border-radius: 0;}

  .search-container h6{margin-bottom: 5px; font-size: 12px;}
  .keyword-recent{margin-top: 10px;}
}

.section-body.mainpage,
.section-body.mainpage .container{
  display: flex;
}
.section-body.mainpage .container{
  
}
.search-container.w-100{
  max-width: 100%; 
}
.search-container.w-100 .logo{
  width:260px; 
  left:0;
  margin-bottom: 30px;
}
.search-container.w-100 .logo h3{
  font-size: 16px;
}
.mainpage-infos{
  display: flex; 
  background: #EDF0F2;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  border-radius: 20px; 
  width:auto;
  position: relative;
  transition: all 0.2s ease-in-out;
  color: var(--black);
  padding:30px 40px 40px 0;
  margin: 0 0 0 15px;
  list-style-type: none;
  font-size: var(--f-16);
}
.mainpage-infos .icons{
  width:95px;
  min-width: 95px;
  display: flex;
  margin-bottom: auto;
  margin-left: 20px;
  margin-right: 20px;
  
}
.mainpage-infos.h-100{ height: calc( 100% - 25px) !important;}
.mainpage-infos li.text{
  display: flex;
  flex-direction: column;
}
.mainpage-infos li.text .goto{
  margin-top: auto;
}
.mainpage-infos .icons img{
  margin: auto;
  width: 100%;
}
.mainpage-infos h2{
  font-size: var(--f-24);
  margin-bottom:5px; 
}
.mainpage-infos .btn{
  padding: 0 20px;
}
.mainpage-infos .btn .img,
.mainpage-infos .btn svg{
  width: 23px;
  height: auto;
  margin-right: 5px;
  vertical-align:middle;
  position: relative;
  top: -1px;
}
@media (max-height:800px){
  .section-body.mainpage{
    min-height: 465px;
  }
}
@media (max-width:1550px){
  .section-body.mainpage{
    min-height: 465px;
  }
  .mainpage-infos .icons {
    width: 85px;
    min-width: 85px;
  }
}

@media (max-width:1440px){ 
  .section-body.mainpage{
    padding-top: 30px !important;
  }
  .mainpage-infos{
    padding-right: 25px;
  }
  .mainpage-infos .icons {
    width: 70px;
    min-width: 70px;
  }
  .mainpage-infos h2{
    font-size: 20px;
  }
}

@media (max-width:1280px){
  .mainpage-infos .icons {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (max-width:1199px){
  .mainpage-infos{
    margin: 50px 40px;
  }
}


@media (max-width:670px){
  .search-container.w-100 .logo {
    width: 150px;
    left: 0;
  }
  .search-container.w-100 .logo h3{
    font-size: 3vw;
  }

  .mainpage-infos {
    margin: 30px 0px;
  } 
}
@media (max-width:576px){
  .mainpage-infos {
    text-align: center;
    flex-direction: column;
    padding: 20px 20px 30px;
  }
  .mainpage-infos .icons{
    margin: auto;
    margin-bottom:10px;
  }
  .mainpage-infos h2{
    margin-bottom: 10px;
  }
}


/*==================================================
   Chat
==================================================*/  

.chat-popup{
  background: #FFFFFF;
  border-radius: 20px;
  position: fixed;
  right:85px;
  bottom: 12px;
  z-index: 1000;
  padding: 20px 30px; 
  transition: all 0.7s; 

   transform: translate(160%, 0); 
   box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
   opacity: 1; 
}

.page-loaded .chat-popup {
  transform: translate(0, 0); 
}
.chat-popup.close{
  transform: translate(160%, 0); 
  opacity: 0;
}

.chat-popup p{
  margin: 0;
  font-size: var(--f-16);
  font-weight: 300;
  text-align: center;
  color: var(--almost-black);
}
.chat-popup p:nth-child(2){
  color: #464FAB;
  font-weight: 400;
}

.chat-popup .chat-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  background-position:center center;
  background-repeat: no-repeat;
  background-size: 70%;
  background-image: url(../img/icons/icon-close.svg);
  cursor: pointer;
}
@media (max-width:670px){
  .chat-popup{padding:15px 20px; border-radius: 15px;}
  .chat-popup p{font-size:12px;  }
}

/*==================================================
   Tabs
==================================================*/  

.card-tabs{
  background:var(--dark-blue);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  display: flex;
  padding: 0 10px;
  position: relative;
}
.card-tabs .btn{
  margin: auto;
  margin-right: 0;
}
.nav-tabs{
  border:0
}
.nav-tabs > li > a,
.nav-tabs > li > span{
  height: 70px;
  line-height: 70px;
  color: #fff !important;
  font-size: var(--f-16);
  padding: 0 20px;
  position: relative;
  display: block;
  cursor: pointer;
}

.nav-tabs > li > a:before,
.nav-tabs > li > span:before{
  content: '';
  position: absolute;
  left: 0;
  right:0;
  bottom: 0;
  height: 5px;
  background-color: var(--orange);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
.pc .nav-tabs > li:hover > a:before,
.nav-tabs > li > a.active:before,
.pc .nav-tabs > li:hover > span:before,
.nav-tabs > li > span.active:before{
  opacity: 1;
}

.nav-tabs .dropdown-menu{
  background: #fff;
  border-radius:0 0 10px 10px;
  border:0;
  padding: 0;
  margin-top: 0;
  box-shadow: 0px 1px 10px rgb(0 0 0 / 5%);
  font-size: var(--f-16);
  width: 240px;
}
.nav-tabs .dropdown-menu a{
  display: block;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nav-tabs .dropdown-menu li:last-child a{
  border:0;
  border-radius: 0 0 10px 10px;
}
.pc .nav-tabs .dropdown-menu a:hover{
  background-color: var(--dark-blue);
  color: #fff;
}
.nav-tabs li.dropdown:hover .dropdown-menu{
  display: block;
}


@media (max-width:1440px){
  .nav-tabs > li > a,
  .nav-tabs > li > span{
    padding: 0 15px;
  }

  .card-tabs .btn{
    padding: 0 20px;
    margin-right: 10px;
  }
}

@media (max-width:1330px){
  .nav-tabs > li > a,
  .nav-tabs > li > span{
    font-size: 15px;
    height: 60px;
    line-height: 60px;
  }
  .card-tabs .btn{
    font-size: 15px;
  }
}

@media (max-width:1280px){
  .card-tabs{
    padding-left:15px;
  }
  .nav-tabs > li > a,
  .nav-tabs > li > span{
    padding: 0 10px;
  }
  .card-tabs .btn{
    height: 40px;
    line-height: 38px;
    margin-right: 0;
  }
}

@media (max-width:1199px){
  .card-tabs .nav-tabs {
    border: 0;
    width: 100%;
  }
  .card-tabs .btn{display: none;}
}

@media (max-width:1024px){
  .nav-tabs > li > a,
  .nav-tabs > li > span{
    font-size: 14px;
  }
 
  .nav-tabs .dropdown-menu{  
    font-size: 14px;
  }
  .nav-tabs .dropdown-menu a{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width:991.98px){
  .card-tabs .nav-tabs:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255,255,255,0.1); 
  }
  .nav-tabs > li > a:before{height: 3px;}
  .card-tabs .nav-tabs > li{
    width: 33.333%;
  }

  .nav-tabs .dropdown-menu{ 
    width: 100%;
  }
}

@media (max-width:670px){
  .card-tabs .nav-tabs > li{
    width: 100%;
  }

  .card-tabs .nav-tabs:before{display: none;}
  .card-tabs .nav-tabs > li{
    padding-left: 10px;
    padding-right: 10px;
  }
  .card-tabs .nav-tabs > li > a,
  .card-tabs .nav-tabs > li > span{ 
    height:50px;
    line-height: 50px;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.1); 
  }
  .nav-tabs > li > a:before,
  .nav-tabs > li > span:before{
    
  }
  .nav-tabs .dropdown-menu {
    width: calc(100% - 20px);
    min-width: 0;
    border-radius: 0 0 0 0;
  }
}

/*==================================================
   Page header
==================================================*/  

.page-header{
  display: flex;
  width: 100%;
  padding:30px 0;
}
.page-header .cols{
  margin: auto 0;
}
.page-header h4{
  font-weight: 400;
}
.page-header h4,
.page-header h3{
  padding: 3px 0;
}

.page-header .info-right{
  margin-left: auto;
  text-align:right;
  min-width: 230px;
  margin-top: 0;
}
.page-header .info-right .buttons{
  padding: 0;
  display: flex;
  margin: auto;
  margin-right: -5px;
  justify-content: flex-end;

}
.page-header .info-right .buttons .btn{
  margin: 0 5px;
}
.page-header .info-right .buttons .btn.d-flex{
  padding-left: 20px;
  padding-right: 20px;
}
.page-header p{
  margin-bottom: 10px;
}

.card-infos{
  background: #FAFBFC;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  display: block;
  padding: 10px 30px;
  margin-bottom: 30px;
  position: relative;
  -ms-word-break: break-all;
     word-break: break-all;
 
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

.card-infos.h-100{
  height: calc(100% - 30px) !important;
}

.card-infos .card-title{
  font-size: var(--f-20);
  font-weight:500;
  color: var(--dark-blue);
  border-bottom: 1px solid rgba(39, 61, 98, 0.5);
  padding: 10px 0; 
  margin-bottom:5px;
}
@media (max-width:1440px){
	.card-infos .card-title small{
		font-weight: 300;
		font-size: .800em;
	}
	
	.card-infos p.card-title{
	  font-size: 16px;
	}
}
.card-infos .card-title small{
	font-weight: 300;
}
.card-infos h6.card-title{
  font-size: 14px;
}
.card-infos .card-body{
  padding:10px 0;
  font-family: var(--font-sarabun);
  font-size: var(--f-14);
  position: relative;
}
.card-infos .card-body .row.infos > div{
  padding-top: 5px;
  padding-bottom: 5px;
}
.card-infos .card-body a.link{
  border-bottom: 1px solid var(--almost-black);
  color:inherit;
}
.pc .card-infos .card-body a.link:hover{color: var(--orange); border-color: var(--orange); text-decoration: none;}

.card-infos .card-body h5{
  font-size: inherit
}
.card-infos ol,
.card-infos ul{
  padding-left: 17px;
}
.card-infos ol li,
.card-infos ul li{
  margin-top: 4px;
  margin-bottom: 4px;
}

.card-infos p:last-child{
  margin-bottom: 0;
}

.card-infos .card-body h6{font-family: var(--font-promt);}

.card-infos.trans{
  background-color: transparent !important;
  box-shadow: none !important;
}
.green{
  color: var(--green) !important;
}
.bright-red{
  color: var(--bright-red) !important;
}

.page-content.rows{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.page-content.rows .cols.content{
  width: calc(100% - 240px);
  padding-right: 30px;
  position: relative;
}
.page-content.rows .sidebar{
  width: 240px; 
}
.table-note{
  width: 100%;
  font-family: 'Prompt';
  font-weight: normal;
  font-size:14px; 
} 
.table-note.font-small{ font-size: 18px }

.table-note tr td:first-child{
  white-space: nowrap;
  vertical-align: top;
  padding-right: 15px; 
}
.table-note a{
  color:var(--dark-blue);
  text-decoration: underline;
} 
.pc .table-note a:hover{
  color: var(--orange);
}
.dropdown.print {
  margin: auto;
  margin-right: 0;
}
.dropdown.print > a{
  color: #fff !important;
}
.dropdown.print > a[data-bs-toggle="dropdown"]:after {
  content: '';
  margin-left: 8px;
  position: relative;
  top: 2px;
  width: 10px;
  height: 10px;
  margin-top: auto;
  margin-bottom: auto;
  display: inline-block;
  display: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.dropdown-menu.normal{
  border:0;
  background-color: #fff;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 15%);
  border-radius: 10px;
  padding:0 ;
  margin-top: 0;
  top: 110%;
}
.dropdown-menu.normal a{
  display: block;
  border-bottom: 1px solid var(--stroke);
  padding: 8px 0;
  color: var(--almost-black);
}
.dropdown-menu.normal li:first-child a{  border-radius:10px 10px 0 0;}
.dropdown-menu.normal li:last-child a{border-bottom: 0; border-radius:  0 0 10px 10px;}
.pc .dropdown-menu.normal a:hover{
  background-color: var(--light-grey);
}
.dropdown.print .dropdown-menu{
  width: 100%;
}
.dropdown.print .dropdown-menu a{
  padding-left: 20px;

}
.dropdown.print > a{margin: 0; padding: 0 20px;}

.card-infos .box-purple {
  border-left: 4px solid #dddddd; 
  padding:5px 15px; 
  color: #595959;
  line-height: 1.6; 
  margin-bottom: 15px; 

}
.calc-option .box-purple{
  border:1px solid #f9f9f9;
  border-left: 4px solid #aaa; 
  background-color:rgba(255, 231, 158, 0.2);
  padding-top: 15px;
  padding-bottom: 15px;
}
.box-restricted{
  display:flex;
  flex-direction: column;
  position: relative;
  top:0;
  left:0;
  right:0;
  bottom:0; 
  /*background: linear-gradient(to right bottom, #fbfbfb 50%, #f7f7f7 50%);*/
  background-color: #f7f7f7;
  border-radius: 10px;
  z-index:10;
  padding-top:30px
}

.restricted-icons{
  width:40px;
  height:40px;
  margin:auto;
}
.restricted-icons svg{
  width:100%;
  height:auto;
}
.restricted-icons svg path{
  fill:var(--dark-blue)
}
.restricted-login{
  display:flex; 
  border-radius: 5px;
  margin:auto 15px 15px 15px;
  padding:15px;
  
}
.restricted-login .btn{
  width:100%;
  height:34px;
  line-height: 32px;
  border-radius: 25px;
  max-width: 286px; 
  margin: 0 auto;
}
 

@media (max-width:1199px){
  .page-header{
    flex-direction: column; 
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
  }
  .page-header .info-right{
    margin-left: 0;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 15px;
    margin-top: 15px;
  }
  .page-header .info-right p{
    margin: auto 0;
  }

  .page-content.rows .cols.content{
    padding-right: 20px;
  }
}
@media (max-width:991.98px){

  .page-header .info-right .btn{
    height:38px;
    line-height: 36px;
    font-size: 14px;
  }

  .page-content.rows{
    flex-direction: column; 
  }
  .page-content.rows .cols.content{
    width: 100%;
    padding-right: 0;
  }
   
  .page-content.rows .sidebar{
    width: 100%;
  }

  .page-content.rows .sidebar{
    background-color: rgba(255, 255, 255, 0.6);
    padding:30px 50px 20px;
    margin: 20px -50px 30px;
    width: auto;
  }
  
}

@media (max-width:670px){
  .card-infos{
    padding: 10px 20px;
    margin-bottom: 15px;
    box-shadow: 0px 1px 10px rgb(0 0 0 / 5%);
  }
  .card-infos.h-100 {
    height: calc(100% - 15px) !important;
  }
  .card-infos .card-body{font-size: 13px;}

  .page-header{
    padding: 30px 0 15px;
  }
  .page-header .info-right{
    font-size: 13px; 
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 15px;
    margin-top: 15px;
    padding-bottom: 0;
    text-align: left;
  }
   
  .page-header .info-right .btn{ 
    padding: 0 20px;
    font-size: 12px;
  }

  .card-infos.trans{
    padding-left: 0;
    padding-right: 0;
  }

  .page-content.rows .sidebar{margin-top: 10px;}

  .table-note tr td{
    display: block;
    width: 100%;
  }

  .page-header .info-right .buttons .btn.d-flex{
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width:576px){
  .page-header .info-right{
    flex-direction: column; 
  }

  .page-header .info-right .buttons{
    margin-left: 0;
    justify-content: unset;
    padding-top: 10px;
    padding-bottom: 5px;
    margin-left: -3px;
    text-align: left;
  }
  .page-header .info-right .buttons .btn{
    width: auto;
    margin:0 3px;
  }

  .dropdown.print{
    margin-left: 0;
  }
}

/*==================================================
   Table 
==================================================*/  
 
.preload,
.preload-table { 
  position: absolute;
  z-index: 1000;  
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #f1f1f1;
  display: flex;
  flex-direction: column;
} 

.preload{
  z-index: 1090;
}

.preload p.text,
.preload-table p.text{ 
  margin: auto;
  margin-top:0;
  text-align: center;
  color: var(--dark-blue); 
  font-weight: 300;
  letter-spacing: 2px;
  font-size: 12px;
}
.preload .loader,
.preload-table .loader { 

  display: block;
  background: url(../img/logo-loading.svg) no-repeat center center; 
  
  width: 50px;
  height:50px;
  margin: auto;
  margin-bottom: 10px;
  text-align: center;
  line-height: 80px; 
  -webkit-animation: rotateRec 2s infinite;
        animation: rotateRec 2s infinite;
  -webkit-backface-visibility: visible;
        backface-visibility: visible;
  -webkit-transform-style: preserve-3d; 
} 
 
@-webkit-keyframes rotateRec {
  0% {
    -webkit-transform:rotateX(0deg) rotateY(0deg);
        transform:rotateX(0deg) rotateY(0deg);
  }
  
  100% {
    -webkit-transform:rotateX(0deg) rotateY(360deg);
        transform:rotateX(0deg) rotateY(360deg);
  }
}
@keyframes rotateRec {
  0% {
    -webkit-transform:rotateX(0deg) rotateY(0deg);
        transform:rotateX(0deg) rotateY(0deg);
  }
  
  100% {
    -webkit-transform: rotateX(0deg) rotateY(360deg);
        transform: rotateX(0deg) rotateY(360deg);
  }
}

.box-conteainer{
  position: relative;
}

.preload-table{
  position: absolute;
  background-color: var(--light-grey);
  pointer-events: none;
  opacity: 0;
  border-radius: 20px;
}
.preload-table:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  border:5px solid #fff
}
.table-responsive{
  position: relative;
  overflow: hidden !important;
  overflow-x: auto !important;
  border-radius: 10px;
}

.loading{ 
  overflow: hidden !important;
  position: relative;
  height: 250px;
}
.table-responsive.loading{
  position: static !important;
}
.loading .preload-table{
  pointer-events: all;
  opacity: 1;
}
 
.content > .preload-table,
.box-conteainer .preload-table{
  right: 30px;
  height:250px; 
  box-shadow: 0px 1px 10px rgb(0 0 0 / 10%);
  border-radius: 20px;
}

.content.loading > .preload-table,
.box-conteainer.loading .preload-table{  
  z-index: 1011;
}
.box-conteainer.loading{height:250px ;}
.content.loading   {height: auto;}

.dropdown-menu.search .preload-table .loader{
  width: 25px;
  height: 25px;
}
.dropdown-menu.search .preload-table .text{
  font-size: 10px;
}
.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
}
.table{
  border-radius: 10px;
  font-family: var(--font-sarabun);
  margin-bottom: 0;
}
.table tr th{
  background-color: var(--dark-blue);
  color: #fff;
  
}
.table tr th,
.table tr td{
  font-weight: 400;
  font-size: 14px;
  padding: 10px;

  white-space: nowrap;
}
.table tr th{
  border:1px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}
.table tr td{
  border:1px solid rgba(0, 0, 0, 0.1)
}
.table thead tr:first-child th:first-child{
  border-radius: 10px 0 0 0;
}
.table thead tr:first-child th:last-child{
  border-radius: 0 10px 0 0;
}
.table thead th{font-family: var(--font-promt); white-space: nowrap;}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background-color: #EDF0F2;
  box-shadow: none !important;
}
.table-striped.noline>tbody>tr:nth-of-type(odd)>*{
  background-color: #fff;
  box-shadow: none !important;
}
.table-striped.noline>tbody>tr:nth-of-type(even)>*{
  background-color: #EDF0F2;
  box-shadow: none !important;
}
.table td.flag{
  text-align: center;
}
.table img.flag,
.table svg.flag{
  width: 22px;
  height: auto;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: -2px;
}
.table.noline tr{
  border:0 !important
}
.table.noline td{
  border:0;
  padding-top: 20px;
  padding-bottom: 20px;
}

.table.noline tr:first-child td:first-child {
  border-radius: 10px 0 0 0;
}
.table.noline tr:first-child td:last-child {
  border-radius: 0 10px 0 0;
}
.table.noline tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}
.table.noline tr:last-child td:last-child {
  border-radius: 0 0 10px 0 ;
}
.table-bordered>:not(caption)>*>* {
  border-width: 0 1px;
  border-color: #f1f1f1;
}
.table>:not(:first-child){border:0}

.table tr:hover th{color: #fff;}
.card-infos.card-table{
  padding: 15px; 
}
.card-infos.trans.card-table{
  padding: 0;
}
.card-infos.trans .table td{
  background-color: #fff;
}

.table-fixed .col-fixed{
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  min-width: 10rem;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

 
@media (max-width:1440px){
  .table.noline td{ 
    padding-top:15px;
    padding-bottom: 15px;
  }
  
}

@media (max-width:1199px){
  .content > .preload-table:before{
    border-width: 10px;
  }
  .content > .preload-table{
    right: 20px;
  }

  .table.noline td{ 
    padding-top:10px;
    padding-bottom: 10px;
  }
}

@media (max-width:991.98px){
  .content{
    min-height:300px;
  }
  .content > .preload-table{
    right: 0;
  }
}
/*==================================================
   Sidebar  
==================================================*/ 

.card-infos.filter{ 
  padding:  5px 20px 10px;
  height: calc(100% - 15px);
  margin-bottom:15px;
}

.card-infos.filter .card-title{
  text-align: center;
}
.card-infos.filter .card-body{
  font-family: var(--font-promt);
}
.card-infos.filter .form-group{margin-bottom: 5px;}
.card-infos.filter .form-control,
.card-infos.filter .form-select{
  height: 32px;
  line-height: 32px;
  font-size: 13px;
  border-radius: 8px;
  border-color: #EDF0F2;
  background-color: #EDF0F2;
  color: var(--dark-blue);
}
.card-infos.filter .form-select{
  padding-right: 10px;
  background-position: right .45rem center;
}
.card-infos.filter .has-value .form-select,
.card-infos.filter .input-focus .form-select{
  color: var(--dark-blue);
}
.card-infos.filter .btn{
  height: 32px;
  line-height: 32px;
  font-size: 13px;
  border-radius: 8px;
  border-color: #EDF0F2;
  background-color: #EDF0F2;
  color: var(--dark-blue);
}
.card-infos.filter .card-body{
  font-size: var(--f-14);
}
.card-infos.filter .card-body .row > div {
  padding-top: 0;
  padding-bottom: 0;
}
.card-infos.filter .btn.active,
.card-infos.filter .btn:hover{
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
  color: #fff;
}
.card-infos.filter{
  padding-bottom: 0;
  padding-top: 0;
}
.card-infos.filter .card-title{
  font-size: var(--f-14);
  text-align: left;
  position: relative;
}
.card-infos.filter .card-title[data-bs-toggle]{
  border-color: transparent;
  margin-bottom: 0; 
}
.card-infos.filter .card-title[aria-expanded="true"]{
  border-color: rgba(39, 61, 98, 0.5);
}
 
.plusminus {
  position: absolute;
  top: 50%;
  right:0px;
  width: 12px;
  height: 12px;
  cursor: pointer;
  margin-top: -6px;
}
.card-title[aria-expanded="true"] .plusminus:before {
  transform: translatey(-50%) rotate(-90deg);
  opacity: 0;
}
.card-title[aria-expanded="true"] .plusminus:after {
  transform: translatey(-50%) rotate(0);
}
.plusminus:before, .plusminus:after {
  content: "";
  display: block;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 0;
  transition: 0.35s;
  width: 100%;
  height:2px;
}
.plusminus:before {
  transform: translatey(-50%);
}
.plusminus:after {
  transform: translatey(-50%) rotate(90deg);
}
@media (min-width:1280px){
  .plusminus.md {
    width: 16px;
    height: 16px;
    margin-top: -7px;
    right: 0;
  }
}
@media (min-width:1500px){
  .plusminus.md {
    width: 18px;
    height: 18px;
    margin-top: -9px;
    right: 0;
  }
  .plusminus.md:before, .plusminus.md:after {
    height: 3px;
  }
}
.card-infos.filter .collapse .card-body,
.card-infos.filter .collapsing .card-body{
  margin-top:5px;
}
.nav-letter{
  justify-content: center;
  color:var(--dark-blue);
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: 5px;
  padding: 0 !important;
}
.nav-letter li{
  padding: 0 !important;
  width: 33.333%;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out; 
  line-height: 0.9;
  color: #EDF0F2;
}
.nav-letter li.active,
.pc .nav-letter li:hover{
  color: var(--dark-blue);
  opacity: 1;
}

.card-infos.filter.extra{
  margin-left: -40px;
  padding-right: 5px;
  z-index: 10;
}
.card-infos.filter.extra table{
  width: 100%;
}

@media (max-width:991.98px){
  .card-infos.filter.extra{
    margin-left: 0;
    padding-right: 20px;
  }
  .card-infos.filter.extra table td:first-child{
    width: 55%;
  }
}
/*==================================================
   Login
==================================================*/  

.chart-info{
  display: block;
  padding: 10px 0 10px;
  margin-top: 20px;
  font-weight: 500;
}
.hide{display: none !important;}
.grey{color:#B2AFAF;}
.grey-link{color:#B2AFAF;}
a.grey-link:hover{color: var(--orange); text-decoration:underline;}

.orange-link{color: var(--orange);}
a.orange-link:hover{color: var(--dark-blue); text-decoration:underline;}

a.link{color: var(--dark-blue);}
a.link:hover{color: var(--orange); text-decoration:underline;}


.modal-backdrop{z-index: 1090;}
.modal{z-index: 1095;}
.modal .btn-close{
  position: absolute;
  top: 20px;
  right: 20px;
}

.modal-title{
  text-align: center;
  color: var(--dark-blue);
  padding:20px 0 20px;
}

.modal-title-consent{
  text-align: center;
  color: var(--dark-blue);
}

.modal-content{
  background: #F6F6F6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  border:0;
  padding:30px 40px;
}
.modal-logo{
  width:285px;
  margin: auto;
}
.modal-body{
  padding: 0;
}

.modal-login .modal-dialog{
  max-width: 480px;
}
.modal-login .form-group{
  margin-bottom: 10px;
}
.modal-login .modal-content{
  font-size: 14px;
}
.modal-login .form-control,
.modal-login .form-select{
  /*font-size: 12px;*/
}

.socail-connect{
  display: block;
  text-align: center;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--stroke);
}
.socail-connect p{
  margin-bottom: 10px;
}
.socail-connect .d-flex{
  justify-content: center;
}
.socail-connect .btn{
  margin: 0 10px;
  width: 53px; 
  height: 51px;
  line-height: 49px;
  padding: 0;
}
.pc .socail-connect .btn:hover svg path{fill: #fff;}


@media (max-width:1440px){
  .modal-logo {
    width: 235px;
  }
  .modal-title{padding: 15px 0; font-size: 26px;}
  .modal-login .modal-dialog{
    max-width: 420px;
  }

  .socail-connect{
    display: block;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .socail-connect .btn{
    width: 48px;
    height: 48px;
    line-height: 46px;
    border-radius: 17px;
  }
  .socail-connect .btn svg{transform: scale(0.8);}
}
@media (max-width:670px){
  .modal-logo {
    width: 185px;
  }
  .modal-title{padding: 15px 0; font-size: 20px;}
  .socail-connect .btn {
    width: 42px;
    height: 42px;
    line-height: 40px;
    border-radius: 12px;
  }
}

/*==================================================
   Financial table
==================================================*/  
.icon-blue svg path{ fill:var(--dark-blue) }
.icon-blue svg circle{fill:var(--dark-blue) }
.icon-orange svg path{ fill:var(--orange); opacity: 0.7; }
.icon-orange svg circle{fill:var(--orange); opacity: 0.7 }
.icon-gray svg path{ fill: #a8a8a8 }

.financial-table{ margin-top:10px;  }
.financial-table .row{
  margin: 0
}
.financial-table .row > div{
  padding: 0
}
.financial-item{
  display: block;
  width: 100%;
  font-family: 'Prompt', sans-serif;
  background-color: #fafafa;
  padding: 10px;
  height: auto; 
  position: relative;
  line-height: 20px;
  text-align: center;
}
.financial-item.item1{ background-color:#F6FAFF; border-left: 10px solid #fafafa;}
.financial-item.item2{ background-color:#F0F5FE; border-left: 10px solid #f6f6f6;}
.financial-item.item3{ background-color:#F3F8FF; border-left: 10px solid #F0F5FE}
.financial-item.item4{ background-color:#EAF2FF; border-left: 10px solid #E7F0FF}

.financial-item.has-title{
  height: 90px;
  padding-top: 25px
}
.financial-item.has-title h5{ 
  line-height: 1;
  top: 7px;
}

.financial-item .info.blue{ color:var(--dark-blue)}
.financial-item .info.gray{ color:var(--grey)}

.financial-item.noBorder{ border-left: 0 }


.financial-item .info{
  display: block;
  padding-top: 13px
}
.financial-item h3{
  color: #4e2c78;
  font-size: 17px;
  font-weight: 400
}
.financial-item h5,
.chart-item h5{
  font-weight: 300;
  text-align: center;
  margin-bottom:5px; 
  font-size: 13px;

  position: absolute;
  top:5px;
  left: 0;
  right: 0; 
}
.financial-item h5{
  position: relative;
  top: auto;
  max-height: 20px;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.financial-item h5.purple,
.chart-item h5.purple{ color:#4e2c78 }

.chart-item h5{
  position: relative;
  top: auto;
  margin-top: 5px;
}

.financial-item ul{
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  position: relative;
}
.financial-item ul li{
  display: inline-block;
  position: relative;
  font-size: 14px;
  font-weight: 300;
  vertical-align: top;
  padding: 5px;
}
.financial-item ul li.icon{
  width: 45px;
  height: 45px;
  text-align: center;
}
.financial-item ul li.icon svg{ width: 35px; height: 35px; }
.financial-item ul li.icon img{ width: 35px; height: 35px; }

.financial-item ul li.icon.small{
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
  left: 0;
  padding: 0
}
.financial-item ul li.icon.small svg{ width: 20px; height: 20px; }

.financial-item ul li.benefit {text-align: right; width: auto;}
.financial-item ul li.benefit span{ display: block; }
.financial-item ul li.benefit span:nth-child(1){font-size: 16px;font-weight: 400}
.financial-item ul li.benefit span:nth-child(2){  }

.financial-item ul li.percent{text-align: center; width: 100px;}
.financial-item ul li.percent span{ display: block; position: relative; }
.financial-item ul li.percent span:nth-child(1){font-size: 16px;}
.financial-item ul li.percent span:nth-child(2){font-size: 10px; color: #999; line-height: 10px}

 

.financial-item ul li.percent .wrap{ 
  display: inline-block; 
  position: relative;
  padding-left: 15px;
}
.financial-item ul li.percent .arrow-up{
  border-top: 2px solid #247606;
  border-left: 2px solid #247606; 
  width: 10px;
  height: 10px;

  left: 0;
  top:7px;
}

.financial-item ul li.percent .arrow-down{
  border-top: 2px solid #999999;
  border-left: 2px solid #999999; 
  width: 10px;
  height: 10px;

  left: 0;
  top:3px;

  transform: rotate(-135deg);
}
.financial-item .icon-letter {
  position: absolute;
  top: 10px;
  left: -55px;
}
.financial-item .icon-letter:before,
.financial-item .icon-flag{
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 30px;
  font-weight: 700;
  content: '';
  color: #cccccc;
  font-size: 45px;
}
.financial-item .icon-letter.blue:before{ color: #273D62 }
.financial-item .icon-letter.l:before{content: 'L'; color: rgba(39,61,98,1)}
.financial-item .icon-letter.m:before{content: 'M'; color: rgba(39,61,98,0.8)}
.financial-item .icon-letter.s:before{content: 'S'; color: rgba(39,61,98,0.6)}

/*
.bg-level-1{ background-color:#F3F8FF}
.bg-level-2{ background-color:#EDF4FF}
.bg-level-3{ background-color:#E3ECFC}
*/

.bg-level-1{ background-color:#F6FAFF}
.bg-level-2{ background-color:#F6FAFF}
.bg-level-3{ background-color:#F6FAFF}

.financial-item .icon-flag{
  top: 0px;
  left: -20px;
  padding: 0;
  width: 22px; 
}
 
.financial-item .icon-flag img{ width: 100% } 

.financial-item.item-lg{
  height: auto;
  border-radius: 10px;
}
.financial-item.item-lg h5{
  position: relative;
}
 
.financial-item.item-lg ul li.percent span:nth-child(2){color: #404040}
.financial-item.item-lg ul li.percent{ padding-top: 9px }

.financial-item.item-lg ul li.col1{}
.financial-item.item-lg ul li.col2{ width: 200px; }
.financial-item.item-lg ul li.col3{ width: 125px }

.financial-table.has-chart{
  position: relative;
  margin-top:0; 
}
.financial-table.has-chart .financial-item{
  border-left: 0
}
.financial-table.has-chart .financial-item.item1,
.financial-table.has-chart .financial-item.item2{
  border-right:4px solid #fff;
  padding-right: 100px;
}

.financial-table.has-chart .financial-item.item3,
.financial-table.has-chart .financial-item.item4{
  border-left:4px solid #fff;
  padding-left: 100px;
}

.financial-table.has-chart .financial-item h5.right{ padding-left: 100px }
.financial-table.has-chart .chart-box-wrap{
  position: absolute;
  top: 0;
  bottom: 0; 
  left: 0;
  right: 0;
  text-align: center;
}
.financial-table.has-chart .chart-box-wrap .chart-info{
  position: relative;
  padding-top: 0;
  text-align: center;
  font-size: 12px;
  margin-top:-7px; 
  z-index: 9;
  line-height: 12px;
}
.financial-table.has-chart .chart-box{ 
  display: inline-block; 
  z-index: 9;
  width: 250px;
  margin:10px 0 0;
}
 
.financial-table.has-chart .chart-box img{
  display: block;
  max-width:100%
}
.chart-item.has-bg {
  padding: 20px 0;
}
.chart-item {
  font-family: 'Prompt', sans-serif;
}


.ranking-table{
  background-color: #fafafa;
  display: block;
  padding:10px 0 10px 20px;
  margin: auto;
  height: 160px;
 
  font-weight: 300;
  line-height: 1.1;
  font-family: 'Prompt', sans-serif;
}
.ranking-table h5{
  text-align: center;
  font-size:inherit;
  font-weight: 500; 
  margin-bottom: 15px;
}
.ranking-table table{
  width: 100%;
  font-weight: 400;
}
.ranking-table table tr td{
  padding: 5px;
  vertical-align: middle;
}
.ranking-table table tr td:nth-child(2){
  text-align: right; 
  line-height: 1;
  
}

.ranking-table table tr td:nth-child(2) span{
  font-size: var(--f-24);
  font-weight: 600; 
  display: inline-block; 
  padding-right: 3px;
  color:var(--dark-blue);
}

@media (max-width:1280px){
  .financial-item h5{max-height: 40px; height: 40px;}
  .ranking-table{margin-top: 20px;}
}

@media (max-width:1024px){
  .financial-item{
    font-size: 12px;
  }
  .financial-item h5{
    font-size: 12px !important;
  }
  .financial-item ul li{
    font-size: 12px;
  }
}

@media (max-width:670px){
  .financial-item{ 
    padding-left: 5px;
    padding-right: 5px;
    height: auto;
  }
  .financial-item h5{ 
    font-size: 13px; 
    padding-top: 5px; 
    position: relative;
    height: auto;
    max-height: none;
  }
  .financial-item ul li{
    display: block;
    width: 100%;
    height: auto;
    text-align: center !important;
    border-bottom:1px dotted #e3e3e3;
  }
  .financial-item ul li:first-child{ border:0; padding-bottom: 0; }
  .financial-item ul li:last-child{ border:0; }
  .financial-item ul li.icon{ height: 35px; width: 35px; margin: 0 auto }
  .financial-item ul li.icon svg{ width: 25px; height: 25px }
  .financial-item ul li.benefit span:nth-child(1){ font-size: 14px }
  .financial-item ul li.benefit span:nth-child(2){ font-size: 12px }

  .financial-item.item-lg{ padding:20px  }
  .financial-item.item-lg ul li.col3{ width: auto; }

  .financial-table.has-chart .financial-item.item1, 
  .financial-table.has-chart .financial-item.item2{
    padding-right: 5px;
    width: 50%;
  }
}

/*==================================================
   alert
==================================================*/  
.img-svg.gray svg path{ fill: #b7b7b7 !important }
.img-svg.purple svg path{ fill: #4d2b75 !important }
.alert-info{ 
  border-radius:15px;
  border: 0;
  font-family: var(--font-sarabun);
  color: var(--almost-black);
  font-style: italic;
  display: block;
  background-color: #eef1f3;
  padding: 0;
  margin: 0;
}
.alert-info .img-svg {
  width: 20px;
  margin-right: 5px;
  display: inline-block;
}
.alert-info .img-svg svg{
  width: 100%;
  height: auto;
}
.alert-info .img-svg svg path{
  fill:rgba(0, 0, 0, 0.3) !important;
}
.alert-info .form-select{
  display: inline-block;
  width: auto;
  margin-left: 5px; 
  padding-right: 35px;
}

.pager-wrap{
  text-align:right;
  padding: 0 0 15px;
  display: flex;
}
.pager-wrap .pager{
  text-align:right;
  margin:0;
  font-size: 15px;
  font-family: 'Sarabun';
  font-weight: normal;
  margin-left: auto;
  
}

.pager .form-control{
  display:inline-block;
  vertical-align: top;
  padding:0; 
  width: 45px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-family:inherit;
  font-weight: inherit;
  font-size: inherit;

}
.pager li > span{
  border:0;
  font-family:inherit;
  font-weight: inherit; 
  padding:0 5px;   
  line-height: 35px;
  vertical-align: middle;
}
.pager .btn{
  height: 35px;
  width: 35px;
  line-height: 30px;
  vertical-align: top;
  padding: 0;
  margin: 0 3px;
}
 
.pager .btn .arrow{
  width: 10px;
  height: 10px;
  top: 12px;
  left: 50%;
  margin-left: -5px;
}
 
.pager .btn .arrow-right,
.pager .btn .arrow-left{
  position: absolute;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
.pager .btn .arrow-left{margin-left: -4px}
.pager .btn .arrow-right{margin-left: -7px}

.card-footer{
  background-color: transparent;
  border:0;
  border-radius: 0;
  padding: 20px 0;
}

.search-result,
.box-footer-buttons{
  display: block;
  padding-top: 30px;
}
.search-result h5,
.box-footer-buttons h5{
  font-family: 'Sarabun';
  font-size:18px;
  font-style: italic;
  margin-bottom: 10px;
  color: #999999
}
.search-result ul,
.box-footer-buttons ul{
  list-style-type: none;
  margin: 0 -10px;
  padding: 0;
  font-size: 0;
}
.search-result ul li,
.box-footer-buttons ul li{
  display: inline-block;
  font-size: 16px;
  margin: 0 10px 15px;
}
.search-result ul li > a,
.search-result ul li > span,
.box-footer-buttons ul li > a,
.box-footer-buttons ul li > span{
  display: block;
  color: var(--dark-blue);
  background-color: #f6f6f6;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: 400
}
.search-result ul li > a:hover{
  background-color:var(--dark-blue);
  color: #fff;
}
.search-result ul li > a:hover .highlight{ color: #fff }
.search-result ul li .list,
.search-result ul li .highlight{
  color: #505050;
  display: inline-block;
  vertical-align: top;
  padding-left: 10px;
}

.search-result ul li .highlight{ color:var(--dark-blue) }

.box-footer-buttons ul li > a,
.box-footer-buttons ul li > span{ background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.025) }

.box-footer-buttons ul li > a:hover{ background-color: #4d2b75; color: #fff }

.box-footer-buttons ul li .highlight{ color: #febd01 }

.table button.icon-heart{
  display: block;
  margin:auto;
  border:0;
  width: 30px;
  height:17px;
  background-color:transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px;
  background-image: url(../img/icons/icon-heart-gray.svg);
}
.table button.icon-heart.active,
.table button.icon-heart:hover{
  background-image: url(../img/icons/icon-heart-orange.svg);
}

.table button.icon-compare{
  display: block;
  margin:auto; 
  width:24px;
  height:24px;
  border-radius: 4px;
  border:1px solid #59595C;
  background-color:transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px;
  background-image: url(../img/icons/icon-plus-gray.svg);
}

.table button.icon-compare.active
/*,.table button.icon-compare:hover*/
{
  background-image: url(../img/icons/icon-plus-white.svg);
  border:1px solid #F9A431;
  background-color: #F9A431;
}

.table .fixCol{ z-index: 9 }
.table .fixCol:before{
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    background-color: #f6f6ee!important;
    width: 1px;
    height: 100%; 
}

@-moz-document url-prefix() { 
  .table .fixCol{ top: -1px }
  .table .fixCol:before{
   content: '';
    position: absolute;
    top: 0;
    right: -1px;
    background-color: #f6f6ee!important;
    width: 1px;
    height: 100%; 
  }
  .table .fixCol:after{
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    background-color: #f6f6ee!important;
    width: 100%;
    height:1px;
  }
 
} 
.form-filter {
  width: 100%;
}
.form-filter .form-title{
  border-bottom: 1px solid var(--stroke);
  font-size: var(--f-20);
  padding:15px 0 10px;
  margin-bottom: 20px;
}
.form-filter h5{
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 5px; 
}
.form-filter  .form-note{
  font-weight:400;
  font-size: 11px;
  color:rgba(0,0,0,0.4);
  margin:5px 0 0 0;
}

.form-filter .form-control,
.form-filter .form-select{
  height: 38px;
  line-height: 36px; 
  margin-bottom: 15px;

  background-color: #fff;
  border-radius:10px;
  padding: 0 15px;  
  font-size: 14px;
}
.form-filter .form-control:focus{
  box-shadow: none;
}
.form-filter .rows{
  display: flex;
}
.form-filter .rows .col-5{
  width: 45%;
}
.form-filter .rows .col-2{
  width: 10%;
  text-align: center;
  margin:  auto;
  font-size: 13px;
  color: #000;
  top: -9px;
  position: relative;
}

.form-filter.mh-300 .box{
  max-height: 300px;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}
.chosen-container{
  width: 100% !important;
}

.filter-advanced{
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 550px;
  padding: 20px 40px;
  background-color:#fff;
  color: var(--dark-blue);
  z-index: 1095;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  -webkit-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

.filter-advanced .btn-close{
  position: absolute;
  top: 40px;
  right: 35px;
}

.filter-advanced-opened .filter-advanced {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.chosen-container-multi .chosen-choices{
  height: 40px;
  line-height: 38px; 
  margin-bottom: 15px;

  background: #fff;
  border-radius: 10px;
  padding: 0 15px; 
  border-color:var(--stroke);
  font-size: 14px; 
  box-shadow: none;
}
.chosen-container .chosen-drop{
  border:0;
  box-shadow: 0 0 10px rgb(0 0 0 / 15%);
  border-radius: 10px;
  top: calc(100% - 10px);
}
.filter-advanced-opened .page-blocker{
  background-color:rgba(0, 0, 0, 0.6);
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1090;
  pointer-events: all;
}

html.filter-advanced-opened,
html.filter-advanced-opened body{
  overflow: hidden;
  position: relative;
}


@media (max-width:699px){
  .filter-advanced{
    width: 100%;
    padding: 20px;
  }
}
@media (max-width:670px){
  .pager-wrap .pager{
    margin: auto;
  }
  .alert-info .img-svg{
    width: 14px;
    top: -2px;
    position: relative;
  }

  .alert-info .form-select{
    width: 100%;
    margin: 10px 0 0 ;
  }

  
}

/*==================================================
   Investment
==================================================*/ 

.white-space-normal tr td{ white-space:normal}

.chart-item{
  font-family: 'Prompt', sans-serif;
} 
.chart-item.has-bg{
  padding:20px 0 
}
.chart-item.has-bg .chart-box{ margin-top:0}
.chart-item.has-bg  p{ margin-bottom: 0 }

.chart-two-column .chart-box,
.chart-two-column .chart-legend{
  display: inline-block;
  vertical-align: top;
}
.chart-two-column {
  display: block;
  margin: 0 auto;
  width: 100%;
}
.chart-two-column.mw-400 { max-width: 400px }

.chart-two-column .chart-legend{ padding-top: 20px; padding-left: 20px }

.chart-wrap{
  display: block;
  margin:0 auto; 
  text-align: center;
  position: relative;
}

.chart-box{
  display: block;
  margin:15px auto; 
  text-align: center;
  position: relative;
  vertical-align: top;
}
.chart-box .img{ width: 100%; max-width: 100%; display: inline-block; }
.chart-box .img-responsive{ width: auto;max-width: 100%; display: inline-block; }

.chart-box h5{
  font-weight: 300;
  text-align: center;
  margin-bottom: 5px;
  font-size: 13px;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
}
 
.chart-box h5.pos-relative {
  position: relative;
  top: auto;
}
 
.chart-box-table{
  display: table;
  width: 100%;
}

.chart-box-table .chart-box,
.chart-box-table .chart-legend{
  display: table-cell;
}

.chart-legend{
  display: block;
  text-align: center;
  padding: 15px 0; 
}
.chart-legend ul{
  padding: 0;
  margin:0 -10px;
  list-style-type: none; 
  display: flex;
}
.chart-legend ul li{
  display:flex;
  vertical-align: top;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 0;
  
}
.chart-legend ul li span{
  display: inline-block;
  vertical-align: top;
}
.chart-legend ul li span.square{
  width: 10px;
  height: 9px;
  background-color: #ccc; 
  position: relative;
  top: 5px;
}
.chart-legend ul li span.circle{
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #ccc; 
  border-radius: 50%;
  position: relative; 
  margin-top: auto;
  margin-bottom: auto;
}
.chart-legend ul li span.line{
  width: 38px;
  height: 5px;
  border-radius: 5px;
  background-color: #886ea8;
  position: relative; 
  top: 9px;
}
.chart-legend ul li span.line-dashed{
  width: 38px;
  height: 5px; 
  position: relative; 
  top: 9px;
  border-color: #886ea8;
  margin-right: 5px
}
.chart-legend ul li span.line-dashed:before{
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  right: -10px;
  border:0;
  border-top:6px dotted;
  border-color: inherit;
}
.chart-legend ul li span.line .dot,
.chart-legend ul li span.line-dashed .dot{
  width: 10px;
  height: 10px;
  background-color: #fff;
  border:2px solid #886ea8;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin:-5px 0 0 -5px; 
}
.chart-legend ul li span.line-dashed .dot{
  width: 9px;
  height: 9px;
  margin-top: -4px;
}
.chart-legend ul li span.label{
  font-size: 13px; 
    color: #273D62;
  font-weight: 600;
  text-align: left;
  padding-left: 5px;
  vertical-align: middle;
}
.chart-legend ul li span.label.center{ text-align: center; }

.chart-legend ul li.block{
  display: block;
  padding: 5px 0;
  text-align: left;
}

.chart-legend ul li .img-svg{
  display: inline-block;
  vertical-align: top;
  position: relative;
 
}
.chart-legend ul li .img-svg svg{
  width: 25px;
  height: 25px;
}
.chart-legend ul li .img-svg.icon-purple{
  margin-top: -3px;
}
.chart-legend ul li .img-svg.icon-purple svg path{fill: #000}

.chart-legend ul li .img-svg.icon-purple.foreign svg path{fill:#83a7e3}
.chart-legend ul li .img-svg.icon-purple.foreign svg circle{fill:#83a7e3}

.chart-legend ul li .img-svg.icon-purple.thai svg path{fill:#27539d}
.chart-legend ul li .img-svg.icon-purple.thai svg circle{fill:#27539d}

.chart-legend ul.li-block li{
  display: block;
  position: relative;
  padding: 3px 0
}
.chart-legend ul.li-block li span.square{
  top: 7px
}



.stock-value{ display: block; }
.stock-value ul{
  display: table; 
  background-color:#f5f5f5;
  background: linear-gradient(to right bottom, #fbfbfb 50%, #f5f5f5 50%);
  position: relative;
  border-right:5px solid #eae9e9; 

  padding:10px 10px 5px 10px;
  margin: 0 0 10px;
  border-radius: 5px;
  width: 100%;
  list-style-type: none;
  font-family: var(--font-promt);
}
.stock-value li{
  display: table-cell; 
  vertical-align: top;
}
.stock-value li.col1{ width: 50px; text-align: center;}
.stock-value li:before{ display: none !important; }

.stock-value li.col2{ padding-left: 10px; }
.stock-value li.col2 .font1,
.stock-value li.col2 .font2{ display: block; } 

.stock-value li.col2 .font1{
  font-size: 20px;
  text-align: right;
  max-width:80px;
}
.stock-value li.col2 .font1 span{ font-size: 14px; }

.stock-value li.col2 .font2{
  font-size: 14px;
  line-height: 12px;
  text-align: right;
}

.stock-value li .flag{
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: 300
}
.stock-value li .flag img{ 
  width: 25px;
  display: block;
  margin: 0 auto;
}


@media (max-width:991.98px){
  .white-space-normal tr td{ white-space:nowrap}
  
 	.financial-table.has-chart .chart-box-wrap{
  		position: relative;
	}
}

@media (max-width:767px) {
	.chart-legend ul {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (max-width:576px){
  .chart-legend ul{
    flex-direction: row !important;
    justify-content: center;
  }
  .chart-legend ul li span.label{
    font-size: 11px;
  }
  .chart-legend ul li span.circle{
    width: 8px;
    height: 8px;
    margin-right: 4px;
    top:1px;
  }
}

/*==================================================
   footer
==================================================*/  
.footer{
  display: block;
  background-color: #273D62;
  color: #fff;
  position: relative;
}
.footer:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(110.43deg, #EDF0F2 9.84%, rgba(136, 156, 188, 0) 60.38%, rgba(143, 161, 192, 0.0531915) 113.07%);
   
}
.page-index .footer{
  background-color:transparent;
  filter: drop-shadow(4px 0px 4px rgba(0, 0, 0, 0.25));
}
.footer .container{
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  font-size: 15px;
  position: relative;
  z-index: 10;
}
.footer .cols{
  display: flex;
  
}
.footer .cols:nth-child(2){
  flex-direction: column;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  font-size:15px;
}
.footer .logo{
  width:120px;
  margin: auto 0;
}
.footer p{
  margin-bottom:5px;
}
.footer p:last-child{
  margin-bottom: 0;
}
.footer small{
  font-size: 11px;
}
.pc .footer a:hover{color: var(--orange);}
.footer-infos{
  display: block;
  padding-left: 45px;
  margin-left: 45px;
  position: relative;
  font-size: var(--f-16);
}
.footer-infos:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 2px solid #F9A431;
}
.footer-infos h4{
  font-size: var(--f-20);
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.user-counter{
  display: flex;
  padding: 5px 0;
  margin: 0;
  list-style-type: none;
  justify-content: center;
}
.user-counter li{
  padding: 2px;
}

.followus{
  display: flex;
  padding: 0 2px;
  margin: 0 -5px;
  font-size: 16px;
  padding-top: 10px;
}

.followus a{
  width:29px;
  height: 29px;
  display: inline-block; 
  margin: 0 5px;
  
}
.pc .followus a:hover{opacity: 0.8;}
.followus a.icon-facebook{background-image: url(../img/icons/icon-facebook.svg); background-size: 80%;}
.followus a.icon-twitter{background-image: url(../img/icons/icon-twitter.svg);background-size: 90%;}
.followus a.icon-youtube{background-image: url(../img/icons/icon-youtube.svg);}

@media (max-width:1280px){
  .footer .logo{
    width: 120px;
  }
  .footer-infos { 
    padding-left:30px;
    margin-left: 30px;
  }
  .followus a {
    width: 24px;
    height: 24px;
  }

  .footer-infos h4{
    margin-bottom: 7px;
  }
}

@media (max-width:1024px){
  .footer-infos{
    max-width: 350px;
  }
}
@media (max-width:991.98px){
  .footer .container{
    flex-direction: column;
  }
  .footer .cols:nth-child(1){
    flex-direction: column;
  }

  .footer-infos{
    padding-left: 0;
    margin-left: 0;
    padding-top:30px;
    margin-top: 30px;
    max-width: 100%;
    text-align: center;
  }
  .footer-infos:before{
    border:0;
    border-top: 2px solid var(--orange);
    width:200px;
    left: 50%;
    margin-left: -100px;
    top: 0;
    bottom: auto;
  }
  .footer .cols:nth-child(2){
    padding-top:30px;
    margin-left: auto;
    margin-right: auto;

  }
  .followus{
    margin: auto;
    justify-content: center;
  }

  .footer .logo{
    margin: auto;
  }
}

@media (max-width:576px){
  .footer .container{
    font-size: 13px;
  }
  .footer-infos{ 
    padding-top:20px;
    margin-top: 20px;
  }
  .footer-infos:before{
    width: 100px;
    margin-left: -50px;
  }
  .footer .logo{
    width: 90px;
  }
  
}
.navbar-compare{
  position:fixed;
  left:50%; 
  bottom:10px;
  z-index:1020;
  background-color:#fff;
  padding:20px 20px;
  display:flex; 
  font-size:var(--f-16);
  font-weight:300;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
  width: 1200px;
  margin-left: -600px;
  border-radius: 10px;
}

.navbar-compare .cols{
display:flex;
margin:auto 0;
align-items: center;
}

.navbar-compare .cols:nth-child(2){
margin-left:auto;
}

.navbar-compare h5{
  font-size:inherit;
  font-weight: inherit; 
  padding:0 15px;
}

.navbar-compare h6{
font-size:inherit;
font-weight: inherit;
color: #fff;
padding:0 15px;
}

.navbar-compare .number{
border-radius: 10px;
background-color:var(--orange);
  color: #fff;
height:18px;
line-height: 18px;
padding: 0 10px;
font-size:var(--f-16)
}
.navbar-compare .icon-compare{
width:15px;
height:15px;
background-image: url(../img/icons/icon-compare.svg);
}

.navbar-compare .btn-clear,
.navbar-compare .btn-compare{
  height: 35px;
  line-height: 33px;
  font-size:var(--f-16);
  font-weight: 300;
  display:flex;
}
 
.navbar-compare .btn-clear {
  background-color: var(--light-grey);
  border-color: var(--light-grey);
  color: var(--dark-blue);
  flex-shrink: 0;
}
 
.pc .navbar-compare .btn-clear:hover .icons{
  background-image: url(../img/icons/icon-close-white.svg);
}
.pc .navbar-compare .btn-clear:hover {
  background-color: var(--dark-blue-hover);
  border-color: var(--dark-blue-hover);
}
.navbar-compare .btn-clear .icons{
width:8px;
height:8px;
margin:auto 5px auto 0;
top:1px;
background-image: url(../img/icons/icon-close.svg);
}
.navbar-compare .btn-compare{ 
  margin-left:10px; 
}
 
svg.white path{fill: #fff !important;}
svg.w-14{width: 14px; height: auto;}
svg.w-18{width: 18px; height: auto;}

@media (max-width:1440px){
  .navbar-compare{
    width: 1000px;
    margin-left: -500px;
  }
}
 
@media (max-width:1199px){
  .navbar-compare{
    flex-direction: column;
    width: auto;
    margin-left:0;
    left: 80px;
    right: 80px;
  }
  .navbar-compare .cols:nth-child(1){
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f1f1;
  }
  .navbar-compare .cols:nth-child(2){
    margin-left: 0;
    padding-top: 15px;
  }
  .navbar-compare .cols:nth-child(2) .btn:first-child{
    margin-left: -5px;
  }
  .navbar-compare .number{
    margin-left: auto;
  }
}

@media (max-width:670px){
  .navbar-compare{
    padding-left: 20px;
    padding-right: 20px;
    left: 0;
    right: 0;
    bottom: -2px;
  }
  .navbar-compare h5{
    font-size: 14px;
    padding: 0 10px;
  }
  .navbar-compare .btn{
    margin: 0 2px!important;
    white-space: nowrap;
    justify-content: center;
  }
  .navbar-compare .btn-clear, .navbar-compare .btn-compare{
    padding: 0 10px;
    height: 30px;
    line-height:28px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .navbar-compare .btn.btn-clear{
    white-space: nowrap; 
  } 

  .navbar-compare .cols:nth-child(2){
    flex-direction: column;
    }
    .navbar-compare .btn{
      width: 200px;
      margin: 4px auto !important;
    }
  
}

@media (max-width:475px){
  
}
 
/*==================================================
  Business Partner
==================================================*/  

.partner-tab-wrap{
  display: block;
  padding:50px 0 75px;
  font-family: var(--font-promt) !important;
}
.partner-tab-wrap .nav-tabs{
  max-width:900px;
  margin:0 auto;
  padding:40px 0 25px 0; 
  border:0; 
  position: relative;
}

.partner-tab-wrap .nav-tabs:before{
  content: '';
  position: absolute;
  top: 100px;
  left: 90px;
  right: 102px;
  margin-left: 15px; 
  height: 10px;
  border-bottom: 6px dotted var(--dark-blue-hover);
  display: block;
  z-index: 0
}

.partner-tab-wrap .nav-tabs .icon,
.partner-tab-wrap .nav-tabs .dot,
.partner-tab-wrap .nav-tabs .dot:before,
.partner-tab-wrap .nav-tabs .biz-number,
.partner-tab-wrap .nav-tabs .text .number,
.breadcrumb.biz{
   -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}

.partner-tab-wrap .nav-tabs .icon{
  position: absolute;
  left: 50%;
  top: 0;
  width: 40px;
  margin-left: -20px;
  margin-top: -37px;
  visibility: hidden;
  opacity: 0;
}
.partner-tab-wrap .nav-tabs .icon img,
.partner-tab-wrap .nav-tabs .icon svg{ width: 100%; height: auto;  vertical-align: top;}

.partner-tab-wrap .nav-tabs .active .icon{ visibility: visible; opacity: 1 }

.partner-tab-wrap .nav-tabs .icon.hand{
  top: auto;
  top:81px;

  width: 50px;
  height: 40px;
  margin-left: -25px;

  background-color: #fbfbfb;
  visibility: visible;
  opacity: 1;
  z-index: 3
}
.partner-tab-wrap .nav-tabs .active .icon.hand svg{
  vertical-align: top;
}
.partner-tab-wrap .nav-tabs .active .icon.hand svg path{
  fill:var(--dark-blue);
}
.partner-tab-wrap .nav-tabs .icon.hand svg path{
  fill:#a6a6a6;
}

.partner-tab-wrap .nav-tabs .text{
  display: block;
  font-size: var(--f-16);
  color:var(--dark-blue);
  text-align: center;
  font-weight: 400
}
.partner-tab-wrap .nav-tabs .text br{display: none;}
.partner-tab-wrap .nav-tabs .text .number{
  
  vertical-align: top; 
}

.partner-tab-wrap .nav-tabs .text-xs{
  display: block;
  text-align: center;
  font-size: 13px;
  display: none;
}

.partner-tab-wrap.tab1n3_active .nav-tabs .text .number{ display: inline-block;}
.partner-tab-wrap.tab1n3_active .nav-tabs .text-xs{display: block;}

.partner-tab-wrap .nav-tabs .dot{
  display: block;
  position: absolute;
  top: 60px;
  width: 14px;
  height: 14px;
  background-color:#aaa;
  border-radius: 50%;
  left: 50%;
  margin-left:-7px;  
}
 

.partner-tab-wrap .nav-tabs .dot:before{
  content: '';
  position: absolute;
  left: -7px;
  right: -7px;
  bottom: -7px;
  top: -7px;
  border:3px solid #aaa;
  border-radius: 50%;
  z-index: 1;
 
}
.partner-tab-wrap .nav-tabs .active .dot{ background-color:var(--dark-blue) }
.partner-tab-wrap .nav-tabs .active .dot:before{ border-color:var(--dark-blue) }

@keyframes fadeDelay{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadeDelay{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.partner-tab-wrap .nav-tabs .dot:after{
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  margin-left: -15px;

  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
  border-bottom: 50px solid var(--dark-blue-hover);

  visibility: hidden;
  opacity: 0;

  
}

.partner-tab-wrap .nav-tabs .active .dot:after{
  visibility: visible;
  opacity: 1;
  -webkit-animation: 0.2s ease 0s normal forwards 1 fadeDelay;
    animation: 0.2s ease 0s normal forwards 1 fadeDelay;
}

.partner-tab-wrap .nav-tabs .biz-number{
  position: absolute;
  left: 50%;
  top: 95px; 
  width: 120px;
  height: auto;
  margin-left: -60px;
  padding:15px 10px; 
  background-color:#EDF0F2;
  color:var(--dark-blue);
  text-align: center;
  font-size: 16px;
 
  visibility: visible;
  opacity: 1; 
  display: flex;
  flex-direction: column;
  line-height: normal;
}

.card-title .note{
  color: #59595C;
  font-weight: 400;
  display: inline-block;
}
.card-title .note a{
  color: #273D62;
  text-decoration: underline;
}
.card-title .note a:hover{opacity: 0.8;}
.partner-tab-wrap.tab1n3_active .nav-tabs .biz-number{ visibility: hidden; opacity: 0 }

.partner-tab-wrap .nav-tabs .biz-number .number{ 
  font-size: 34px;
  font-weight: 500;
  display: block;
  margin-top: -5px;
  line-height: 34px;
}
 
.partner-tab-wrap .nav-tabs{ display: table; width: 100% }
.partner-tab-wrap .nav-tabs > li{ display: table-cell !important; float: none !important; }
.partner-tab-wrap .nav-tabs > li.left{width: 180px;}
.partner-tab-wrap .nav-tabs > li.right{width: 180px}
.partner-tab-wrap .nav-tabs > li.center{width: auto;}
 
.partner-tab-wrap .nav-tabs > li > a{
  border:0 !important;
  margin:0; 
  padding-left:0 !important; 
  padding-right:0 !important; 
  height: 150px;
}

.partner-tab-wrap .nav-tabs > li > a:before, 
.partner-tab-wrap .nav-tabs > li > span:before{
  display: none;
}

.partner-tab-wrap .tab-content{
  padding-top: 30px;
  position: relative;
  z-index: 1
}
.partner-tab-wrap .tab-content #partner2{
  margin:0 auto 0;
  /*max-width: 480px;*/
  max-width: 950px;
  width: 100%; 
}

.partner-tab-wrap .tab-content #partner1,
.partner-tab-wrap .tab-content #partner3{
  margin:-85px auto 0;
  max-width: 950px;
  width: 100%; 
}

.partner-tab-wrap .tab-content #partner2 .p-note{
  font-size:14px; 
  line-height: 1.5;
  display: block;
  margin:0 auto 10px;
  padding:0;   
  text-align: center;
}
.partner-tab-wrap .tab-content #partner2 .p-note strong{ font-weight: 500; color: var(--dark-blue) }
.partner-tab-wrap .tab-content #partner2 .p-note i{ font-style: italic; }

.table-partner{
  text-align: center;
  color:var(--dark-blue);
}
.table-partner.collapse.in{ display: table; }
.table-partner .col1{ width: 51px }
.table-partner .col2{ width: 100px }
.table-partner .col4{ width: 150px }
.table-partner .col5{ width: 55px; padding-left: 5px; padding-right: 5px; }
.table-partner .col6{ width: 55px; padding-left: 5px; padding-right: 5px; }
.table-partner .col7{ width: 55px; padding-left: 5px; padding-right: 5px; }

.table-partner thead tr th.button span {
  background-color:var(--dark-blue);
  color:#fff;
  border-radius: 5px;
  width: 60px;
  display: block;
  padding: 5px 0;
  font-size: 11px;
}

.table-partner .btn-icon{
  padding: 0; 
  height: 25px;
  line-height: 23px;
  background-color: transparent;
  border:1px solid var(--dark-blue);
  width: 100%;
  display: block !important;
  border-radius: 5px !important;
}

.table-partner .btn-icon svg{
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  position: relative;
  top: -2px !important;
}
.table-partner .btn-icon svg path{
  fill:var(--dark-blue);
  -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

.table-partner .btn-icon:hover,
.table-partner .btn-icon.active{ background-color: var(--dark-blue) }

.table-partner .btn-icon:hover svg path,
.table-partner .btn-icon.active svg path{fill: #fff}

.table-partner .btn-icon.hands svg{ width: 22px; height: 22px }
.table-partner .btn-icon.workbag svg{ width: 19px; height: 18px; top: -1px }
.table-partner .btn-icon.thaimap svg{ top: -1px }

.table-partner .btn-icon .icons{
  width: 22px;
  height: 22px;
  vertical-align: top;
  top: 1px;
} 
.table-partner .btn-icon .icons:before{opacity: 1;}
.table-partner .btn-icon .icons:after{opacity: 0;}

.pc .table-partner .btn-icon:hover .icons:before{opacity:0;}
.pc .table-partner .btn-icon:hover .icons:after{opacity: 1;}

.table-partner .btn-icon.juristic .icons:before{background-image: url(../img/icons/icon-index-1-black.png);}
.table-partner .btn-icon.juristic .icons:after{background-image: url(../img/icons/icon-index-1-white.png);}

.table-partner .btn-icon.biztype .icons:before{background-image: url(../img/icons/icon-index-2-black.png);}
.table-partner .btn-icon.biztype .icons:after{background-image: url(../img/icons/icon-index-2-white.png);}

.table-partner .btn-icon.investment .icons:before{background-image: url(../img/icons/icon-index-3-black.png);}
.table-partner .btn-icon.investment .icons:after{background-image: url(../img/icons/icon-index-3-white.png);}

.table-partner .btn-icon.partner .icons:before{background-image: url(../img/icons/icon-index-4-black.png);}
.table-partner .btn-icon.partner .icons:after{background-image: url(../img/icons/icon-index-4-white.png);}

.table-partner .btn-icon.opportunity .icons:before{background-image: url(../img/icons/icon-index-5-black.png);}
.table-partner .btn-icon.opportunity .icons:after{background-image: url(../img/icons/icon-index-5-white.png);}

.table-partner .btn-icon.area .icons:before{background-image: url(../img/icons/icon-index-6-black.png);}
.table-partner .btn-icon.area .icons:after{background-image: url(../img/icons/icon-index-6-white.png);}

.table-partner .btn-icon.foreign .icons:before{background-image: url(../img/icons/icon-index-7-black.png);}
.table-partner .btn-icon.foreign .icons:after{background-image: url(../img/icons/icon-index-7-white.png);}

.table-partner .btn-icon.stats .icons:before{background-image: url(../img/icons/icon-index-8-black.png);}
.table-partner .btn-icon.stats .icons:after{background-image: url(../img/icons/icon-index-8-white.png);}


.table-partner thead tr th{  
  white-space: nowrap;
} 
.table-partner thead tr th.button{
  padding-left: 5px;
  padding-right: 5px;
  width: 60px;
} 
 
.table-partner > tbody > tr > td{ white-space: normal !important; padding-top: 7px; padding-bottom: 7px; }
.table-partner > tbody > tr > td.button{ padding-left: 5px;padding-right: 5px; vertical-align: top;}

.table.rounded-0 thead tr:first-child th:first-child, 
.table.rounded-0 thead tr:first-child th:last-child {
  border-radius: 0 !important;
}
.table-partner-toggle + .table  thead tr th{
  background-color: rgba(116, 141, 205, 0.5); 
  color: var(--black);
}

.table-partner-toggle{
  width: 100%;
  table-layout: fixed; 
}
.table-partner-toggle .col1{ width: 54px;}
.table-partner-toggle .col2{ text-align: left; white-space: normal;}
.table-partner-toggle .col3{ width: 318px; text-align: center; }

.table-partner-toggle tr td{
  background-color:var(--dark-blue);
  color: #fff;
  padding: 10px 10px 5px;
  border: 1px solid #9f82c2;
  border-top: 0 !important; 
  vertical-align: middle !important;
  white-space: normal !important;
  cursor: pointer;
}
.table-partner-toggle tr:hover td{background-color:var(--dark-blue);}

.table-partner-toggle .icon-toggle{
  display: block;
  width: 18px;
  height: 18px;
  border:1px solid #fff;
  border-radius: 3px;
  margin:0 auto; 
  position: relative;
}
.icon-toggle:before,
.icon-toggle:after{
  content: "";
  position: absolute;
  background-color: #fff;
  -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.icon-toggle:before{
  top: 2px;
  left: 8px;
  width: 1px;
  height: 11px; 
}
 
.icon-toggle:after{
  top: 7px;
  left: 3px;
  width: 11px;
  height: 1px; 
} 
      
.table-partner-toggle[aria-expanded="true"] .icon-toggle:before{ transform: rotate(90deg); }
.table-partner-toggle[aria-expanded="true"] .icon-toggle:after{ transform: rotate(180deg); }


.biz-type-info-wrap{
  position: relative;
  overflow: hidden;

  margin:20px auto 0; 
  padding:0; 
  max-width: 450px;
  display: block;
  font-family: var(--font-promt) !important;
  
  height: 0;

  -webkit-transition: all 0.7s ease-in-out;
       -moz-transition: all 0.7s ease-in-out;
         -o-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
            transition: all 0.7s ease-in-out;
}

.biz-type-info-wrap.active{ height: auto; }

.biz-type-info{
  display: block;  
  padding:0; 
  /*height: 133px;*/
  max-width: 450px;
  list-style-type: none;
}



.biz-type-info li{
  display: block;
  padding:10px 20px 10px 160px;  
  color:var(--dark-blue);
}
.biz-type-info li p{ margin:0  }
.biz-type-info li.icon{
  position: absolute;
  left: 23px;
  top: 10px;  
  padding:0;
  width: 110px; 
}
.biz-type-info li.icon img{ width: 100% }
.biz-type-info li.info1 p:nth-child(1){
  font-weight: 300;
  font-size: 15px;
}
.biz-type-info li.info1 p:nth-child(2){
  font-weight: 400;
  font-size: 17px;
  margin-top: -5px;
}
.biz-type-info li.info2{
  background-color:#EDF0F2;
  text-align: right; 
}
.biz-type-info li.info2 p:nth-child(1){
  font-weight: 500;
  font-size: 30px;
  margin-top: -5px;
}
.biz-type-info li.info2 p:nth-child(2){
  font-weight: 300;
  font-size: 17px;
  margin-top: -10px;
}
.biz-type-info li.info2 .wrap{
  display: inline-block;
  position: relative;
}
.biz-type-info li.info2 .wrap:before{
  content: '';
  position: absolute;
  left: -35px;
  bottom: 0;
  width:30px;
  height: 30px;
  z-index: 100;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-user-purple.svg);
}

.breadcrumb.biz{
  background-color: transparent;
  font-size: 16px;
  font-weight: 300;
  color:var(--dark-blue);
  padding:10px 0 10px 40px;

  visibility: hidden;
  opacity: 0;

  position: relative;
}
.breadcrumb.biz.active{ visibility: visible; opacity: 1 }
.breadcrumb.biz.show{ visibility: visible !important; opacity: 1 !important }


.breadcrumb.biz > .active{
  color:var(--dark-blue);
  font-weight:500;
}
.breadcrumb.biz > li{ display: inline; } 
.breadcrumb.biz > li + li::before {
    padding: 0 8px 0 5px;
    content: ">";
    color:var(--dark-blue);
    font-weight: 300
}

.breadcrumb.biz a{ color:var(--dark-blue);}
.breadcrumb.biz a:hover{ text-decoration: underline; }

.breadcrumb.biz li.icon{
  width: 30px;
  vertical-align: middle;
  margin-right: 10px;

  position: absolute;
  left: 0;
  top: 5px
}
.breadcrumb.biz li.icon svg{
  width: 100%;
}
.breadcrumb.biz > li.icon + li::before { display: none; }


.biz-type-wrap{
  display: block;
  position: relative;
  width: 100%;
  max-width: 750px;
  margin:0 auto  
}

.biz-type-wrap .chart-box{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  text-align: center;
  margin: 0;
  padding:0 0 20px;
}
.biz-type-wrap .chart-box h5{ margin-bottom: 10px }

.biz-type-table{
  float: right;
  margin:25px 0 
}
.biz-type-table tr td{padding: 10px; vertical-align: middle;}
.biz-type-table tr td:first-child{ width: 230px }
.biz-type-table .heading{
  display: block;
}
.biz-type-table .heading span,
.biz-type-table .amount span{
  display: block;
  color: inherit;
}
.biz-type-table .heading span.t1{
  font-size: 22px;
}
.biz-type-table .heading span.t2{
  font-weight: 300
}
.biz-type-table .heading span.t1 > span{
  font-size: 36px;
  font-weight: 900;
  display: inline;
}

.biz-type-table .amount{
  position: relative;
  display: block;
  padding-left: 35px;
  color:var(--dark-blue);
}
.biz-type-table .amount .icon-purple{
  position: absolute;
  top: 0;
  left: 0;
}
.biz-type-table .amount .icon-purple svg{ width: 25px }
.biz-type-table .amount span{ text-align: right; }

.biz-type-table .amount span.t1{font-size: 19px;}
.biz-type-table .amount span.t2{
  font-size: 13px;
  font-weight: 300
}

.icon-purple svg path{ fill:var(--dark-blue) }
.icon-purple svg circle{ fill:var(--dark-blue) }
.text-left{text-align: left !important;}
.purple{color: var(--dark-blue);}

.partner-tab-wrap.tab1n3_active .nav-tabs .biz-number{
  visibility: hidden;
  opacity: 0;
}
 
@media (min-width: 1241px) and (max-width: 1390px){
  .partner-tab-wrap .nav-tabs .biz-number{ 
    font-size: 13px;
    width: 100px;
    margin-left: -50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .partner-tab-wrap .nav-tabs .biz-number .number{ font-size: 28px; line-height: 28px; margin-top: 0 }
}
@media (min-width: 768px) and (max-width: 1500px){ 
   .table-partner.rounded-0 > thead > tr > th,
   .table-partner.rounded-0 > tbody > tr > td {
      font-size: 13px;
  }
  .biz-type-info li.info1 p:nth-child(2){
    font-size:15px;
  }
  .biz-type-info li{padding-left: 100px;}
  .biz-type-info li.icon{
    width: 80px;
  }
  .biz-type-info li.info2 p:nth-child(1){
    font-size: 25px;
  }
  .biz-type-info li.info2 .wrap:before { 
    left: -25px; 
    width:25px;
    height: 25px; 
  }
}
@media (max-width: 767px){
  .biz-type-info{
    padding: 0 !important;
  }
  .biz-type-info li{
    padding-left:60px;
  }
  .biz-type-info li.icon{
    width:45px;
    left: 0;
  }
  .biz-type-info li.info1 p:nth-child(1){
    font-size: 13px;
  }
  .biz-type-info li.info1 p:nth-child(2){
    font-size: 14px;
    line-height: 1.4;
    padding-top: 4px;
  }
  .biz-type-info li.info2 p:nth-child(1){
    font-size: 20px;
  }
  .biz-type-info li.info2 p:nth-child(2){
    font-size: 13px;
  }
  .biz-type-info li.info2 .wrap:before { 
    left: -25px; 
    bottom: 2px;
    width: 20px;
    height: 20px; 
  }
  .biz-type-info-wrap{
    margin-top: 0;
  }
  .breadcrumb.biz{
    display: none;
  }
  .breadcrumb.biz.active{
    display: block;
  }

  .partner-tab-wrap .nav-tabs .biz-number .number{
    font-size: 20px;
  }
  .partner-tab-wrap .nav-tabs .biz-number{
    font-size: 13px;
    display: none;
  }
  .partner-tab-wrap .nav-tabs .text{
    line-height: 1.3;
    font-size: 14px;
  }
  .partner-tab-wrap .nav-tabs .text br{
    display: block;
  }
 
  .partner-tab-wrap .nav-tabs > li.left,
  .partner-tab-wrap .nav-tabs > li.right {
    width: 100px;
  }
  .partner-tab-wrap .nav-tabs .dot{
    width: 10px;
    height: 10px; 
    top:75px;
  }
  .partner-tab-wrap .nav-tabs .dot::before {
    border: 2px solid #a6a6a6;
    left: -5px;
    right: -5px;
    bottom: -5px;
    top: -5px;
  } 

  .partner-tab-wrap .nav-tabs .icon.hand{ width: 40px; top: 99px}
  .partner-tab-wrap .nav-tabs .icon{width: 30px;margin-left: -15px;}

  .partner-tab-wrap .nav-tabs:before{
    left: 42px;
    right: 60px;
    top: 114px;
  }
  .partner-tab-wrap{
    padding-top:20px
  }
  .partner-tab-wrap .nav-tabs > li > a{
    height: 70px;
  }
  .table-partner-toggle tr td{
    white-space: nowrap;
  }
  .table-partner-toggle .col2{ width: 320px }
  .table-partner{ table-layout: fixed; }
  .table-partner .col3 { width:220px  }

  .partner-tab-wrap .tab-content #partner1, .partner-tab-wrap .tab-content #partner3{
    margin-top: 0px;
  }

  .biz-type-wrap .chart-box{
    position: relative;
    margin: auto;
    height: 250px;
  }
  .biz-type-wrap .chart-box + .biz-type-table{
    float: none;
    width: 100%;
  }

  .biz-type-table .amount span.t1{
    font-size: 14px;
  }
  .biz-type-table .heading span.t1 {
    font-size: 16px;
  }
  .biz-type-table .heading span.t1 > span {
    font-size: 25px;
  }
  .biz-type-table .amount .icon-purple svg{width: 20px;}
  .biz-type-table .amount{white-space: nowrap;}
}

/*==================================================
  Financial model
==================================================*/  

.table-filter{
  display: block;
  text-align: right;
  padding: 20px 0;
  font-weight: 300
}
.table-filter ul.filter-list{
  margin: 0;
  padding: 0 0 0 15px;
  list-style-type: none;
  display: inline-block;
  vertical-align: middle;
}
.table-filter ul.filter-list li{ display: inline-block; }
.table-filter .filter-list.icon li{
  display: inline-block;
  vertical-align: top;
}
.table-filter .filter-list li span{
  display: block;
  width: 40px;
  height: 40px;
  background-color:transparent;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
.table-filter .filter-list li:hover span,
.table-filter .filter-list li.active span{background-color: #ffe79e;}
.table-filter .filter-list li svg{
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-top:10px; 
}
.row.small-gap{ margin: 0 -7px }
.row.small-gap > div{ padding: 0 7px }

.gdp-overview-box{
  display: block;
  margin: 0 -10px;
  font-size: 0
}
.gdp-overview-box > div{
  display: inline-block;
  vertical-align: top;
  padding: 0 10px;
}
.gdp-overview-box > div.has-padding-top{padding-top: 30px; }
.gdp-overview-box > div.col-1{ width: 25% }
.gdp-overview-box > div.col-2{ width: 75% }
.gdp-overview-box .col-group{ margin: 0 -10px; }
.gdp-overview-box .col-half{
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 0 10px
}
.gdp-overview-box .title-main{
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  color: #4e2c78;
  height: 30px; 
}
.gdp-overview-box .title-main.floating{margin-top:-30px; height: 45px}
.gdp-overview-box .title-main.norwrap{
  white-space: nowrap;
  text-align: left;
  width: 30vw; 
  white-space: normal; 
}

.gdp-overview-box .juristic-info{height: 200px}
.gdp-overview-box .juristic-info ul{
  height: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 20px;
}
.juristic-info ul.h-auto{
  height: auto;
  padding-top: 10px;
}

.gdp-overview-box .juristic-info ul li{
  font-size:15px; 
  vertical-align: middle;
} 
.gdp-overview-box .juristic-info ul li.left{ width: 100px;}
.gdp-overview-box .juristic-info ul li.left .text{line-height: 1.3; padding-top: 10px }
.gdp-overview-box .juristic-info ul li.right .t1{ font-size: 20px; position: relative;}
.gdp-overview-box .juristic-info ul li.right .arrow-wrap{
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 10px;
  height: 10px;
}
.gdp-overview-box .juristic-info ul li.right .arrow-up{
  border-top: 2px solid #247606;
  border-left: 2px solid #247606;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
}
.gdp-overview-box .juristic-info ul li.right .arrow-down{
  border-top: 2px solid #999999;
  border-left: 2px solid #999999;
  width: 10px;
  height: 10px;
  left: 0;
  top:-3px;
  transform: rotate(-135deg);
}
.gdp-overview-box .juristic-info ul li.right .amount.average .t1{ font-size: 20px; line-height: 1.4 }
.gdp-overview-box .juristic-info ul li.right .t1.font-extra{font-size: 24px}

.gdp-overview-box .juristic-info ul li.right .amount.percent{ padding-top: 20px }
.gdp-overview-box .juristic-info ul li.right .amount.percent .t2{ font-size: 12px; color:#595959; }

.gdp-box{
  display: inline-block;
  width: 100%;
  border-radius: 5px;
  background-color: #e6dcef;
  color: #4e2c78;

  height: 100%;
  padding: 15px 20px;
  text-align: center;
}
.gdp-box h3{
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: inherit;
  padding: 10px;
  height: 80px;
}
.gdp-box h3 em{
  text-decoration: underline;
  font-style: normal;
}

.gdp-box .icon-wrap{
  display: block;
}
.gdp-box .icon-wrap svg{
  width: 50px;
  height: 50px;
  display:block;
  margin: 15px auto 0
}
.gdp-box .icon-wrap .text{
  display: block;
  font-size: 14px;
  font-weight: 300;
  padding: 5px 0 0
}

.fin-demo-tree{
  display: none;
  padding: 0 30px
}
.fin-demo-tree .row{margin:0 -4vw 0 0 }
.fin-demo-tree .row > div{padding: 0}
.fin-demo-group{
  display: block;
  position: relative;
  width: 100%; 
  padding-right:4vw 
}
.fin-demo-group:before{
  content: '';
  position: absolute;
  top: 45px;
  bottom: 20px;
  right: 2vw;
  width: 2px;
  background-color:var(--dark-blue-hover)
}
.fin-demo-group .input-block{
  display: block;
  position: relative;
  margin-bottom:30px; 
}

.fin-demo-group .input-block:before{
  content: '';
  position: absolute;
  bottom: 20px;
  right: -2vw;
  width: 2vw;
  height: 2px; 
  background-color:var(--dark-blue-hover)
}
.fin-demo-group .input-block.last:before{ display: none; }
.fin-demo-group .input-block.auto-calc:after{
  content: '';
  position: absolute;
  bottom: 20px;
  left: -2vw;
  width: 2vw;
  height: 2px; 
  background-color: var(--dark-blue-hover)
}

.fin-demo-group .input-text,
.fin-demo-list .input-text{
  display: block;
  font-size: 14px;
  font-weight:400;
  padding-bottom: 5px;
  white-space: nowrap;
  color: var(--dark-blue);
}
.fin-demo-group .form-control,
.fin-demo-list .form-control{
  border-radius: 0;
  text-align: right; 
  padding: 0 45px 0 5px;
  height: 40px;
  line-height: 40px;
  font-weight: 400;
  font-size: 14px;
  background-color: transparent;
  border-radius: 5px;
  border-color: #aaa;
}
.fin-demo-group .bath,
.fin-demo-list .bath{
  position: absolute;
  bottom: 0;
  right: 10px;
  font-weight: 300;
  font-size: 15px;
  line-height: 40px;
}
.fin-demo-group .average,
.fin-demo-list .average{
  position: absolute;
  bottom:-24px;
  right: 0;
  color: #888;
  font-weight: 300;
  font-size: 13px;
  text-decoration: underline;
}
.fin-demo-list .average{}

.input-block.auto-calc { 
  color:var(--dark-blue);
  
}
.fin-demo-group .space-top-2x{ margin-top:42px  }
.fin-demo-group .space-top-3x{ margin-top:129px  }
.fin-demo-group .space-top-4x{ margin-top:170px  }
.fin-demo-group .space-top-5x{ margin-top:220px  }

.input-block.auto-calc .form-control{
  background-color:rgba(116, 141, 205, 0.4)!important;
  border:1px solid var(--dark-blue-hover)!important;
  color:inherit;
  pointer-events: none; 
  font-weight: 500;
}
.input-block.auto-calc .text-label{
  color:#4e2c76 !important;
}

.fin-demo-list {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 850px;
  display: none;
}
.fin-demo-list .input-block{
  display: table;
  position: relative;
  width: 100%;
  table-layout: fixed;
  margin-bottom:30px 
} 
.fin-demo-list .input-block.auto-calc{ margin-bottom: 10px  }
.fin-demo-list .input-text{
  display: table-cell;
  width: 180px;
  font-size: 16px;
  line-height: 40px;
  text-align: right;
  padding-right: 15px;
  padding-bottom: 0;
  vertical-align: middle;
}

.fin-demo-list .input-wrap{
  display: table-cell;
  width: 100%; 
  position: relative;
  height: 40px;
  vertical-align: top;
}

 
.fin-demo-button{
  display: block;
  text-align: center;
  padding: 25px 0
}
.fin-demo-button .btn{
  height: 50px;
  line-height: 50px;
  font-weight: 300;
  font-size: 18px; 
}
.fin-demo-button .btn .icon-purple{
  display: inline-block;
  vertical-align: middle;
  height: 20px;
}
.fin-demo-button .btn svg{
  width: 20px; 
  height: 20px;
  vertical-align: top;
}
.fin-demo-button .btn svg path{
  fill:#fff;
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
 
.fin-demo-button .btn:hover svg path{
  fill:#fff;
}

.fin-demo-tree.active,
.fin-demo-list.active{ display: block; }

.fin-demo-button.inline{
  padding:0;
  display: inline-block; 
  margin-top:-5px;
  margin-left:10px; 
}
.fin-demo-button.inline .btn{
  height: 40px;
  line-height: 38px;
  font-size: 16px;
}
.fin-demo-button.inline .btn svg{
  width: 23px;
  height: 23px;
  position: relative;
  top: 2px;
}

.box-gray{
  background-color: #f2f2f2;
  padding:20px;
  text-align: center; 
  margin:0 50px 10px;  
  border-radius: 5px;
}

.box-gray h3{
  font-size:18px; 
  color: var(--dark-blue);
  font-weight: 400
}

.box-gray + .link{
  margin: 0 50px; 
  text-align: right;
}
.box-gray + .link a:hover{color: var(--orange);}
.box-gray + .link a .text2{ display: none; }
.box-gray + .link a[aria-expanded="true"] .text1{display: none;}
.box-gray + .link a[aria-expanded="true"] .text2{display: inline;}

.calc-bar{
  display: block;
  position: relative;
  margin: 20px 20px 20px;
  padding: 0 !important;
  height: 50px;
}
.calc-bar.has-arrow-flip{ margin-top:70px  }
.calc-bar:before{
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  height: 10px;
  background-color: #bfbfbf;
  border-radius: 5px;
}
.calc-bar li{
  position: absolute;
  top: 0;
  left: auto;
  display: block;
  text-align: center;
  width: 70px;
  margin-left:-35px;
}
.calc-bar li .arrow{
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  border-bottom: 20px solid var(--dark-blue-hover);
  margin-top: 7px;


}
.calc-bar li .arrow.red{ border-bottom-color:#c00000  }
.calc-bar li .arrow.green{ border-bottom-color:#00b050  }
.calc-bar li .text{
  display: block;
  font-size: 14px;
  line-height: 18px;
  color:var(--dark-blue);
  font-weight: 400;
  padding-top: 5px;
}

.calc-bar li.flip .arrow{
  border:0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  border-top: 20px solid var(--dark-blue-hover);

  position: relative;
  top: -35px
}
.calc-bar li.flip .arrow.red{ border-top-color:#c00000  }
.calc-bar li.flip .arrow.green{ border-top-color:#00b050  }
.calc-bar li.flip .text{
  position: absolute;
  left: 0;
  right: 0;
  top:-67px;
}
.box-purple{
  background-color:transparent;
  padding:20px; 
  margin-bottom: 20px;
  border-radius: 5px;
  text-align: left;
  font-size: 15px;
  font-weight: 300;
  color: var(--dark-blue)
}
.box-purple h3{ 
  font-size: 15px;
  margin-bottom: 5px;
}
.box-purple h3.red{ color: #c00000;margin: 0 }
.box-purple h3.green{ color: #00b050 }
.box-purple p:last-child{ margin-bottom: 0 }

.box-purple em{
  text-decoration: underline;
  font-style: normal;
}

.calc-option h4{
  font-size: 15px; 
  margin-bottom: 10px;
}

.table-calc-option{
  width: 100%;
  table-layout: fixed;
  margin-bottom: 30px;
}
.table-calc-option tr td{ 
  text-align: right;
  width: 150px;
  padding:5px 10px
}
.table-calc-option tr td:first-child{ 
  width: 100%;
  text-align: left;
}
.table-calc-option tr td.col2{ width: 180px; }
.table-calc-option .form-control{
  width: 100%;
  text-align: right;
  border-radius: 5px;
  padding-right:40px; 
  height: 35px;
  line-height: 35px;
  background-color: transparent;
  border-color: #aaa;
}
.table-calc-option .checkbox-disable .input-block,
.table-calc-option .input-block.disable { opacity: .85;pointer-events: none; }

.table-calc-option .checkbox-disable .input-block .form-control,
.table-calc-option .input-block.disable .form-control{
   
  background-color: #F6F6F6;
  border: 1px solid var(--stroke);
}
.table-calc-option .input-block{
  position: relative;
  display: inline-block;
  width: 130px;
  vertical-align: top;
  font-weight: 300;
}
.table-calc-option .input-block .text-label{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 35px;
  line-height: 35px;
  padding-right: 10px;
  color:#595959;
}
.table-calc-option .or-text{
  display: inline-block;
  vertical-align: top;
  line-height: 35px;
  position: relative;
  right: -7px;
}

.table-calc-option-header{
  display: block;
  text-align: right;
  padding-right: 15px
}
 
.fin-demo-index{padding-top: 25px !important;}
.fin-demo-index .box-info-wrap{ padding-left: 0 }
.fin-demo-index .box-purple{ 
  font-size: inherit;
  background-color: rgba(255, 231, 158, 0.2);
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.fin-demo-index h3{
  color:var(--dark-blue);
  font-size: var(--f-16);
  font-weight: 500;
  margin-bottom:10px 
}
.fin-demo-index .no-margin{ margin: 0 }
.btn.get-started{
  height: 48px;
  line-height: 48px;
  padding:0 20px 0 45px;
  border-radius: 5px;
  font-size: 18px; 
  -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.btn.get-started .arrow{
  position: absolute;
  top: 12px;
  left: 17px;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  
  border-left: 15px solid #fff;
  -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}  
.fin-demo-index .buttons{
  text-align: center;
  padding:30px 0 
}
.box-indent{
  display: block;
  padding:0 30px; 
}
.box-indent .box-indent{
   padding:0 15px; 
}

.fin-demo-index {
  font-family: var(--font-promt) !important;
}
.howto-wrap{
  font-size: 0;
  padding: 20px 0 35px 0;
  margin: 0 auto;
  display: table;
  max-width: 950px;
}
.howto-wrap:before{ display: none; }
.howto-wrap > div{
  display:table-cell;
  vertical-align: top;
  font-weight: 300;
  line-height: 1.6;
  font-size: 16px;
  position: relative;
  height: 100%;
}
.fin-demo-index .img-demo,
.howto-wrap .img-demo{ 
  max-width: 100%; 
  width: 100%;
}
.fin-demo-index .img-demo.block{
  margin: 20px auto;
  display: block;
}
.fin-demo-index .img-demo.button{ 
  max-width: 270px; 
  margin-left:10px;
  position: relative;
  top: 5px
}

.howto-wrap .center{
  width: 120px;
  vertical-align: middle;
}
.howto-wrap .center .text-or{
  display: block;
  text-align: center;
  font-weight: 500; 
}
.howto-wrap .box-purple{ margin: 0 }
.howto-wrap .input-block{
  max-width: 200px
}
.howto-wrap .input-block::before { display: none !important; }
.howto-wrap .input-block.after{ float: right; margin-top:15px  }

.howto-group{
  display: block;
  width: 100%;
  max-width: 400px;
  margin:10px auto;
  position: relative;
}
.howto-group:before{
  content: '';
  position: absolute;
  right: 84px;
  top: 26px;
  width: 100px;
  height: 100px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/icons/icon-arrow-demo.png);
}
 
.number-list { 
  counter-reset: numberList;
  list-style: none;
  padding-left: 40px;
  padding-top: 5px;
}
.number-list li {
  margin: 0;
  padding:5px 0 5px 40px; 
  counter-increment: numberList;
  position: relative;
}
.number-list li::before {
  content: counter(numberList); 
  position: absolute;
  left: 0;
  width: 23px;
  height: 23px;
  line-height: 23px;
     
  border-radius: 50%;
  background-color:var(--dark-blue-hover);
  color: #fff;
  text-align: center; 
}
.switch-status {
  padding: 5px 0 10px;
  margin: 0 -3px;
  white-space: nowrap;
  list-style-type: none;
  display: flex;
  float: right;
}
.switch-status li{
  width: 158px; 
}
.switch-status li:nth-child(2){ 
  padding-left:15px;
}
.switch-status li:nth-child(3){ 
  width: 128px;
  text-align: right;
  margin-top: auto;
  margin-bottom: auto;
  font-weight:500;
  color: var(--dark-blue);
}


.radio-group, 
.checkbox-group{ 
	padding-left:0; 
	position:relative;
	list-style-type:none;
	margin:0px;
	padding:0px;
	text-align:center;
	display:inline-block;
	vertical-align:top
}
.radio-group{ display:inline-block; position:relative}


.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
	/*display: none;*/
	visibility: hidden;
	opacity: 0;
	height: 0;
	position: absolute;
	width: 0
}
.checkbox-group label:before,
.radio-group label:before {
	content: "";
	display: inline-block;

	margin-right: 5px;
	position: absolute;
	left:0;
	top:5px;
	background-color: transparent;
	border: 1px solid #aaaaaa; 
	width:16px;
	height:16px; 

	 -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.radio-group label:before { 
	
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
	
}
.radio-group label,
.checkbox-group label {
	position:relative;
	padding-left:30px;
	padding-right:15px;
	text-align:left;
	margin:1px 0;
	display:block;
	font-weight:300;
	font-size:inherit;
	line-height:25px;
	cursor:pointer;

	-webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.checkbox-group label{color: inherit;}
.checkbox-group label span{ font-size: 12px; font-style: italic; color: #8f8f8f } 
.checkbox-group label span.block{display: block; margin-top:-5px;  line-height: normal;}

.radio-group label{color: inherit; padding-left: 28px} 

 
.radio-group input[type="radio"]:checked + label:after {
    content: "";
    color: #ea6f21;
	background-color:#555;
	-webkit-border-radius:50%;
     -moz-border-radius:50%;
          border-radius:50%;
	position:absolute;
	left: 3px;
  top: 8px;
  width: 10px;
  height: 10px;
}
 

.checkbox-group input[type="checkbox"]:checked + label:after,
.checkbox-group input[type="checkbox"]:checked + .error + label:after {
	content: "";
	width:15px;
	height:15px;
	position:absolute;
	top: 8px;
  left: 2px;
	display:block; 
	background-image: url(../img/icons/icon-checked.svg);
	background-position:0 0;
	background-size: 11px;
	background-repeat: no-repeat;
	
}
  
.checkbox-disable.checkbox-group label:before{
	background-color:#c0c0c0;
	border:2px solid #b1b1b1;
	cursor:default !important
}
.checkbox-disable.checkbox-group input[type="checkbox"]:checked + label:after {
	content:'';
}

@media (max-width:1440px){
  .fin-demo-tree{
    padding: 0;
  }

  .box-purple{font-size: inherit;}
}

@media (max-width:1199px){
  .box-gray{
    margin-left: 0;
    margin-right: 0;
  }

  .box-gray + .link{
    margin: 20px 0;
  }
  .table-calc-option .form-control{
    font-size: inherit;
  }

  .btn.get-started{
    height: 48px !important;
    line-height: 48px !important;
  }

  .howto-wrap .center{
    width: 60px;
  }
  .box-indent{
    padding: 0;
  }
}

@media (min-width:700px) and (max-width:1024px){
  .fin-demo-group .form-control, .fin-demo-list .form-control{
    font-size: 12px;
    padding-right: 35px;
  }
  .fin-demo-group .bath, .fin-demo-list .bath{
    font-size: 12px;
  }
  .fin-demo-group .average, .fin-demo-list .average{
    font-size: 11px;
  }

  .fin-demo-button .btn{
    font-size: 16px;
  }

  .fin-demo-group .input-text{padding-bottom: 1px;}

  .fin-demo-group .input-block{margin-bottom: 45px;}
  .fin-demo-group:before{top: 41px;}
  .fin-demo-group .space-top-2x{margin-top: 55px;}
  .fin-demo-group .space-top-3x{margin-top: 135px;}
  .fin-demo-group .space-top-4x{margin-top: 185px;}
  .fin-demo-group .space-top-5x{margin-top: 260px;}
}
@media (max-width:670px) {
  .fin-demo-tree {
    display: none !important;
  }
  /*.table-filter{display: none !important;}*/
  .fin-demo-list{display: block !important;}
  .fin-demo-list .input-block{
    display: block;
  }
  .fin-demo-list .input-text,
  .fin-demo-list .input-wrap{
    display: block;
    width: 100%;
  }
  .fin-demo-list .input-text{
    text-align: left;
    font-size: 13px;
    margin-bottom: 5px;
    line-height: normal;
  }
  .fin-demo-group .bath, .fin-demo-list .bath{
    font-size: 14px;
  }
  .fin-demo-button .btn{
    font-size: 14px;
    padding: 0;
    width: 100%;
  }

  .box-gray h3,
  .calc-option h4{
    font-size: 13px;
  }
  .calc-bar li .text{
    font-size: 12px;
  }
  .calc-bar li .arrow{
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 0;
    border-bottom-width: 12px;
  }
  .calc-bar li.flip .arrow{
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 12px;
    border-bottom-width: 0;
  }

  .calc-bar:before{
    left: -5px;
    right: -5px;
  }
  .switch-status{
    float: none;
    padding-left: 15px !important;
  }
  .switch-status li:nth-child(3){
    display: none;
  } 
  .switch-status li{
    padding: 0 !important;
    width: 50% !important;
  } 
   
  .table-calc-option{ display: block;  clear: both;}
  .table-calc-option tbody,
  .table-calc-option tbody tr{ width: 100%; display: block; clear: both; }
  .table-calc-option tr td{ display: block; }
  .table-calc-option tr td.col1{ width: 100% }

  .table-calc-option tr td.col2, 
  .table-calc-option tr td.col3, 
  .table-calc-option tr td.col4{
    width: 100%;
    float: none;
    text-align: left;

  }

  .table-calc-option .input-block{ width: calc(100% - 50px) } 

  .table-calc-option .or-text{ top: 20px; }

  .howto-wrap{
    display: block;
    padding: 0px 0 20px;
  }
  .howto-wrap > div{
    display: block;
    width: 100% !important;
  }
  .howto-wrap .center{
    padding: 10px 0;
    font-size: 14px;
  }

  .page-header .btn.get-started{
    height: 35px !important;
    line-height: 35px !important;
    font-size: 12px;
    padding-left: 35px;
    padding-right: 15px;
  }

  .page-header .btn.get-started .arrow{
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left: 10px solid #fff;
    left: 12px;
    top:  11px;
  }
}


.mapbox{ 
  display: block; 
  position: relative;
  padding: 20px 0 0 0;
}
.mapbox h2{
  font-weight: 300;
  font-size: 17px;
  padding: 7px 15px 7px 15px;
  font-family: 'Kanit', sans-serif;
  line-height: 1.42857;
  text-align: center;
}

.mapbox .img{
  display: inline-block;
  max-width: 300px;
  width: 100%
}
.mapbox .map{
  display: block;
  margin:0 auto;
  text-align: center;
  min-height: 350px
}

.map-info{
  display: table;
  padding: 0 !important;
  margin: 20px auto 0;
  width: 100%;
  max-width: 300px;
  position: relative;
  font-family: 'Kanit', sans-serif; 

  font-size: 0;
}
.map-info li{
  display: table-cell;
  position: relative;
  vertical-align: top;
}
.map-info li.info{
  font-size: 15px;
  color: #5077b9;
}
.map-info li.info span{
  display: block;
  width: 100px;
}
.map-info li.info span.text{
  font-weight: 200px;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 300
}
.map-info li.left{ text-align: right;}
.map-info li.center{ padding: 0 10px }
.map-info li.right{text-align: left;}

.map-info li .progress-map{ 
  width: 200px;
  height: 20px;
  border:1px solid #fff;
  box-shadow: none;
  border-radius: 0;
  background: #efe8f4; /* Old browsers */
  background: -moz-linear-gradient(left,  #99afd6 0%, #17243a 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #99afd6 0%,#17243a 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #99afd6 0%,#17243a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99afd6', endColorstr='#17243a',GradientType=1 ); /* IE6-9 */
}

.business-table-wrap{
  display: block;
  position: relative; 
}
.business-table{
  width: 100%
}
.business-table tr td{border-bottom:2px solid #fff; }
.business-table tr td.col1{background-color: #fafafa; padding-left: 250px; padding-right: 20px; text-align: right; }
.business-table tr td.col2{ background-color: #f6f6f6; text-align: center;}
.business-table tr td.col3{background-color: #fafafa;  text-align: center;}

.business-table .financial-item{ 
  background-color: transparent;
  display: inline-block;
  width: auto;
}

.business-table .financial-item h5{ color: #4e2c78; font-size: 15px ; display: none;}
.business-table .financial-item ul li.benefit span:nth-child(2){ font-size: 13px }

.business-table tr:first-child .financial-item h5{ display: block; }

.business-table-wrap .chart-box{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 350px;
  text-align: center;
  margin: 0;
  padding: 30px 0 20px
} 
.business-table-wrap .chart-box img{
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
}

.business-table.icons-list{
  text-align: center;
}
.business-table.icons-list tr td{
/*   background-color: #fbf9fc; */
  border-bottom:2px solid #fff;
  vertical-align: middle; 
}

.business-table.icons-list .tooltip-inner{ text-align: left; max-width: 250px;}

.business-icon{
  display: inline-block;
  text-align: center;
  height: 70px;
  vertical-align: middle;
  margin-top: 10px
}
.business-icon .icon{
  display: block;
  margin: 0 auto 0;
  width: 100%;
  max-width: 45px;
}
.business-icon .icon img{ width: 100% }
.business-icon .icon svg{ width: 100%; height: auto;}
.business-icon .number{
  color: #273D62;
  font-size: 13px;
  font-weight: 300
}

.business-letter{
  display: inline-block;
  font-size: 45px;
  font-weight: 700;
}
.business-letter.l{ color: rgba(39,61,98,1) }
.business-letter.m{ color: rgba(39,61,98,0.8) }
.business-letter.s{ color: rgba(39,61,98,0.6) }

.col-xl-3,
.col-xl-4,
.col-xl-8,
.col-xl-9{
  padding-left: 15px;
  padding-right: 15px
}

.business-table-wrap .table-benefit{ border:0; }
.business-table-wrap .table-benefit tr td{
  /*white-space: normal !important;*/
  font-size: 18px !important;
  padding-top: 11px;
  padding-bottom: 10px;
}

.chart-tab-wrap{
  position: relative;
  display: block;
  margin:0 auto; 
  width: 100%;
  max-width: 280px;
  padding-right: 45px;
}
.chart-tab-wrap .nav-tabs{
  border:0;
  padding-left:0; 
  position: absolute;
  top:20px;
  right: 0;
  width: 40px;
  z-index: 9
}
.chart-tab-wrap .nav-tabs > li{ margin-bottom:5px;  }
.chart-tab-wrap .nav-tabs > li > a{
  display: block;
  border:0 !important;
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  padding: 0;
  text-align: center;
  line-height: 40px;
}
.chart-tab-wrap .nav-tabs > li > a:before{
	display: none;
}
.chart-tab-wrap .nav-tabs > li > a svg{ 
  width: 20px; 
  height: 20px; 
  display: inline-block;
  vertical-align: middle;
}
.chart-tab-wrap .nav-tabs > li > a svg path{
	fill: #fff;
}
.chart-tab-wrap .nav-tabs > li:hover > a,
.chart-tab-wrap .nav-tabs > li > a.active, 
.chart-tab-wrap .nav-tabs > li > a.active:hover, 
.chart-tab-wrap .nav-tabs > li > a.active:focus{
  background-color: rgba(151, 126, 180, 1) !important
}

.juristic-info{
  display: block;
  border-radius: 5px;
  background-color: var(--dark-blue);
  padding: 10px;
  margin-bottom:5px;
  color: #fff;
}
.juristic-info.padding-md{ padding-right:20px  }

.juristic-info h5,
.juristic-info h6{
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  text-align: center;
}
.juristic-info h6{
  font-size: 13px;
}
.juristic-info h6.twoline{height: 39px}

.juristic-info h5 em{
  font-style: normal;
  text-decoration: underline;
}

.juristic-info ul{
  font-size: 0;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%; 
  list-style-type: none;
  display: table;
  table-layout: fixed;
}
.juristic-info ul li{
  display:table-cell;
  vertical-align: top;
  font-size: 13px;
  font-weight: 300;
  color: #fff;
  height: 100%;
  vertical-align: middle;
}
.juristic-info ul li span{
  display: block;
}
.juristic-info ul li.left{
  width: 72px; 
  text-align: center;
}
.juristic-info ul li.left .icon{ width: 40px; display: inline-block; }
.juristic-info ul li.left .icon svg{ width: 40px; height: 40px; }
.juristic-info ul li.left .text{ margin-top: -5px; }

.juristic-info ul li.right{
  width: 80%; 
  text-align: right;
}
.juristic-info ul li.right.bottom{ vertical-align: bottom; }
.juristic-info ul li.right .t1{
  font-size: 24px;
  font-weight: 400;
}
.juristic-info ul li.right .t2{ line-height: 18px }
.juristic-info ul li.right .amount{
  display: inline-block;
  vertical-align: middle;
  min-width: 100px;
}
.juristic-info ul li.right .amount.average{
  border-top: 1px solid #ccc;
  margin-top:5px;
  padding-top:5px;  
  color:#fff;
}

.juristic-info ul li.right .amount.average .t1{ font-size:16px; line-height: 16px }

.juristic-info.twoCol{ margin-bottom: 10px }
.juristic-info  ul li .line{
  border-top: 1px solid #ccc;
  margin-top: 10px;
  padding-top: 5px;
}
.juristic-info ul li .gray{
  color: #fff;
}
.juristic-info ul li .font-sm .t1{ font-size:16px  }
.juristic-info ul li.right .arrow-wrap {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 10px;
  height: 10px;
}

.juristic-info ul li.right  .arrow-up {
  border-top: 2px solid #247606;
  border-left: 2px solid #247606;
  width: 8px;
  height: 8px;
  left: 0;
  top:3px;
}
.juristic-info ul li.left .text{margin-top:5px }

.juristic-info.gray ul li.left{ color: #222 }
.juristic-info.gray ul li{ color: #595959 }
.juristic-info.gray .icon-gray svg path{ fill: #222 }

.juristic-info .icon-purple svg path{ fill: #fff }

.chart-header{
  display: block;
  text-align: center;
}
.chart-header table{ margin:0 auto  }
.chart-header h3{
  font-weight: 400;
  font-size: 16px;
  color: #4e2c78;
  padding: 0 30px 0 10px;
}
.chart-header h3 .light{ font-weight: 300 }
.chart-header.text-left h3{
  text-align: left;
  padding-bottom: 10px;
}
.chart-header h4{
  font-weight: 300;
  font-size: 15px;
  color: #4e2c78;
  padding: 0 30px 0 10px;
}

.chart-header .ratio-info{
  border-radius: 5px;
  display: inline-block;
  padding: 12px 15px;
  background-color: var(--dark-blue);
  color: #fff;
  line-height: 1.4;
}

.chart-header .ratio-info h5{
  font-size: 24px;
  color: inherit;
  font-weight: 400;
  line-height: inherit;
  margin-top:-5px 
}
.chart-header .ratio-info h6{
  font-size: 12px;
  font-weight: 400;
  color: inherit;
  line-height: inherit
}
.chart-header .ratio-info p{
  font-size: 11px;
  font-weight: 200;
  margin-bottom: 0;
  line-height: inherit;
}

.chart-header .ratio-info.age h5{font-size: 30px}
.chart-header .ratio-info.age h6{font-size: 15px}

.investment-wrap{
  display: block;
  position: relative;
}
.investment-wrap .chart-box-wrap{
  position: absolute;
  top: 50%; 
  left: 0;
  right: 0;
  text-align: center;
  margin-top:-120px; 
}
.investment-wrap .chart-box-wrap .chart-box {
  display: inline-block;
  z-index: 9;
  width: 200px;
  margin: 10px 0 0;
  position: relative;
}

.investment-wrap .wrap{
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 350px
}

.investment-wrap .wrap.left{ float: left; padding-left: 15px }
.investment-wrap .wrap.right{ float: right;padding-right: 15px }
.investment-wrap .title-overlap{
  position: absolute;
  top: -50px;
  right: 20px;
  white-space: nowrap;

  font-weight: 300;
  font-size: 14px;
  padding: 7px 10px 7px 15px;
  font-family: 'Kanit', sans-serif;
  line-height: 1.42857;
}

.investment-wrap .chart-legend ul li span.label{ font-size: 11px; }

/* chatbot */
.budge-style {
	height: 60px !important;
	width: 60px !important;
	border-radius: 50% !important;
}

/* cookie */
/*
.cwc-cookie-banner-ui-sdk .cwc-css-paoozj-cwc {
	bottom: 80px !important;
}
*/

/* recaptcha */
.grecaptcha-badge {
	display: none;
}

.mw-800{
  width: 100%;
  max-width: 800px;
}
.mw-1200{
  width: 100%;
  max-width: 1200px;
}
.search-category.eng{
  margin-left: -30px;
  margin-right: -30px;
}
.search-category.eng li{
  width: 50%;
  padding: 8px 30px;
}
.card-category.rows{
  flex-direction: row;
  text-align: left;
}
.card-category.rows .card-icons{ 
  margin: auto 30px;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
}

.card-category .card-title{
  width: 100%;
  padding: 0;
  margin: 5px 0 0; 
  
}
.card-category.rows .card-title{
  margin: auto 0;
}

.section-banner.h-240{
  height: 240px;
  background-color: #000;
  position: relative;
}
.section-banner h1{
  font-size:48px;
  color: #fff;
  font-weight: 600;
  position:relative;
  z-index: 100;

}

@media (max-width:1280px){
  .search-category.eng{
    margin-left: -20px;
    margin-right: -20px;
  }
  .search-category.eng li{ 
    padding: 8px 20px;
  }
  .mw-800{
    width: 100%;
    max-width: 700px;
    margin-left: -350px;
  }

  .section-banner h1{
    font-size: 35px;
  }
  .section-banner.h-240{
    height: 200px;
  }
}

@media (max-width: 1180px) {
  .financial-item .icon-letter{ left: -30px; }
  .business-table-wrap .financial-item .icon-letter{ left: -45px; }
}
@media (max-width:991.98px){
  .card-category.rows .card-icons {
    margin: auto 20px;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
  }
  .search-category.eng{
    margin-left: -15px;
    margin-right: -15px;
  }
  .search-category.eng li{ 
    padding: 8px 15px;
  }

  .card-category.rows{
    height: 120px;
  }

  .business-table-wrap .chart-box{
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 350px;
    height: 350px;
    margin-bottom: 100px;
  }
  .financial-item .icon-letter{ left: -50px; } 
  .business-table tr td.col1,
  .business-table tr td.col2,
  .business-table tr td.col3{
    padding-left: 0;
  }

  .financial-item .icon-letter:before, .financial-item .icon-flag{
    font-size: 30px;
  }
  .financial-item ul li.benefit span:nth-child(1),
  .financial-item ul li.percent span:nth-child(1){
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .business-table tr td.col1,
  .business-table tr td.col2,
  .business-table tr td.col3{
    display: block;
    width: 100%;
    text-align: center !important;
  }

  .business-table tr:first-child td.col1{border-top: 5px solid #e3e3e3; } 
  .business-table tr td.col3{ border-bottom: 5px solid #e3e3e3; }

  .business-icon .icon{
    width: 25px;
  }
  .business-letter{
    font-size: 30px;
  }
  .financial-item .icon-letter:before, .financial-item .icon-flag{
    font-size:30px;
  }
 
  .business-table .financial-item{
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .business-table .financial-item .info{ padding-top: 0 }
  .business-table .financial-item h5{
    position: relative;
    top: auto;
    margin-bottom: 0;
    display: block !important;
  }
  
  .investment-wrap .chart-box-wrap {
  	position: relative;
  	margin-top: 0;
  	top: 0;
  	margin-bottom: 20px;
  }
}

@media (max-width:576px){
  .card-category.rows .card-icons {
    margin-top: 15px;
    margin-bottom: 3px;
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
  }
   

  .card-category.rows{
    height: 130px;
    flex-direction: column;
    text-align: center;
  }
  .card-category.rows .card-title{
    padding-left: 10px;
    padding-right: 10px;
  }

  .search-category.eng{
    margin-left: -5px;
    margin-right: -5px;
  }
  .search-category.eng li{ 
    padding: 8px 5px;
  }

  .section-banner h1{
    font-size: 22px;
  }
  .section-banner.h-240{
    height:150px;
  }

  .business-table-wrap .chart-box{
    width: 250px;
    height: 250px;
    margin-bottom: 100px;
  }

  .financial-item ul li.icon.small{left: -5px;}
  
  .table-partner thead tr th.button{
	  width: 80px;
	}
	
	.map-info li.center{ width: 55%; }
	.map-info li.info span {
		width: auto;
	}
	.map-info li.info {
		font-size: 12px;
	}
	.map-info li .progress-map {
		width: 100%;
	}
}

.icon-info {
	width: 16px;
	height: 16px;
	background-image: url(../img/icons/icon-info-outline.svg);
	cursor: pointer;
}

.icon-info2 {
	width: 14px;
	height: 14px;
	background-image: url(../img/icons/icon-info-2.svg);
	cursor: pointer;
}

svg {
	height: auto;
}

.page-index .navbar-brand{
  pointer-events: none;
}

.scrolling .page-index .navbar-brand{
  pointer-events: all;
}

.navbar-search-option{
  display: flex;
  padding: 20px 0 0;
}

.search-container .logo{ margin-bottom: 40px;}
.navbar-search-option { margin-bottom: 20px; }

.section-body.fit-content{  
  min-height: calc(100vh - 100px);
  padding-bottom: 50px;
}

.card-infos.error-400{
  width: 100%;
  max-width: 60%;
  margin: auto;
  text-align: center;
  color: var(--black); 
  padding-bottom: 50px;
  padding-top: 30px;
  background-color: rgba(255, 255, 255, 0.8);

  /*background: linear-gradient(110.43deg, #EDF0F2 4.84%, rgba(136, 156, 188, 0) 97.38%, rgba(143, 161, 192, 0.0531915) 113.07%);*/
}
.card-infos.error-400 h3{
  font-size: 5vw;
  font-weight: 700; 
}
.card-infos.error-400 h6{
  font-size: 18px;
  font-weight: 500;
  margin-bottom:15px;
  color: var(--orange);
}
.card-infos.error-400 p{
  width: 100%;
  max-width: 80%;
  margin: auto;
}
@media (min-width:1280px){
  .footer .container.small{
    max-width: 1120px; 
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width:1025px) and (min-height: 620px){
  .section-body.fit-content{
    display: flex;
  }
  .section-body.fit-content .container{
    margin-top: auto;
    margin-bottom: auto;
    top: -40px;
  }
  .section-body.fit-content .container .row.w-100{width: 110% !important;}
  .search-container .logo{ margin-bottom: 5.5%;}
  .navbar-search-option { margin-bottom: 3.5%; }
}

@media (min-width:1025px) and (min-height: 900px){
  .search-container .logo{ margin-bottom:6%;}
  .navbar-search-option { margin-bottom: 4.2%; }

  .section-body.fit-content .container{
    top: -80px;
  }
}

@media (min-width: 1601px){ 
  .col-xxl-8-custom {
      flex: 0 0 auto;
      width: 66.66666667%;
  }
  .col-xxl-4-custom {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-7-custom {
      flex: 0 0 auto;
      width: 58.33333333%;
  }
  .col-xxl-5-custom {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
}
@media (max-width: 1600px){}

@media (max-width: 1199px){
  .section-body.fit-content{
    min-height: calc(100vh - 81px);
  }
  .section-body.fit-content{
    padding-top: 30px;
  }
  .section-body.fit-content .container{
    top: 0;
  }

  .card-infos.error-400{
    max-width: 80%;
  }
  .card-infos.error-400 h3{
    font-size: 80px;
  }
}

@media (max-width: 1024px){
  .section-body.fit-content .container .row.w-100{width: auto !important;}

  .card-infos.error-400{
    max-width: 100%;
  }
}
 
@media (max-width: 670px){
  .section-body.fit-content{
    padding-top: 0;
  }

  .section-body.fit-content{
    min-height: calc(100vh - 63px);
  }

  .card-infos.error-400 h3{
    font-size: 15vw;
    margin-bottom: 15px;
  }
  .card-infos.error-400 h6{
    font-size: 16px;
  }
  .card-infos.error-400 p{
    max-width: 100%;
  }
}

.avatar{
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%; 
  margin-right: 10px;
}

ul.checklist{
  padding: 0 15px;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
}

ul.checklist li{
  display: block;
  padding:10px 0 10px 32px;
  margin: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
}

ul.checklist li::before{
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 18px;
  height: 18px;
  background-image: url(../img/icons/icon-checklist.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.card-infos .card-title[data-bs-toggle]{
  cursor: pointer;
  margin-bottom: 0;
  transition: all 0.2s;
  position: relative;
}
.card-infos .card-title[aria-expanded="false"]{
  border-color: transparent;
}
.card-infos .collapse .card-body,
.card-infos .collapsing .card-body{
  padding-top:10px;
}

.card-body h4{
  color: var(--dark-blue); 
}

.card-shadow{
  background: #FAFBFC;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  display: block;
  width: 100%;
  height: 200px;
}

@media (max-width: 1199px){
  .card-shadow{height:160px;}
}

.none-pointer {
	cursor: default !important;
}

/*09/10/2022*/

.survey-icons{  
  position: fixed;
  right:0px;
  bottom:30%;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  opacity: 1;
  border-radius: 10px 10px  0  0;
  background-color: #fff;
  cursor: pointer;
  color: var(--dark-blue);
  padding:10px 20px;
  z-index: 1000;
  
  
  transform-origin: top left; 
  transform: rotate(-90deg) translateX(-100%) translateY(120px);
  line-height: 1;
  transition: all 0.35s;
}
.pc .survey-icons:hover{color:#fff;background-color: var(--dark-blue);}

.modal-survey .modal-dialog{
  max-width:780px;
}

.form-survey h4{
  text-align: center;
  color: var(--dark-blue);
  font-size:18px;
  font-weight: 600;
}

.form-survey h3{
  text-align: center;
  color: var(--dark-blue);
  font-size: 20px;
  font-weight: 400;
  margin-top: 15px;
}

.form-survey p{
  font-size: 16px;
}
.form-survey .modal-logo{
  width: 200px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.emojicons-survey{
  display: flex;
  margin:0 auto;
  width: 100%;
  max-width: 500px;
  padding:80px 0;
}
.emojicons-survey .item{
  padding: 0 20px;
  width: 33.333%;
  display: flex;
  position: relative;
}
.emojicons-survey .item:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  height:25px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-shadow.png);
}
.emojicons-survey .item *{
  margin: auto;
}
.emojicons-survey .item >a{
  position: relative;
}
.emojicons-survey .item img{
  width: 60px;
  margin: 0 auto;
}
.survey-des {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translate3d(0, -50%, 0);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  background: none;
  border-radius: 10px; 
  padding:0 10px;
  background: #fff;
  color: var(--dark-blue);
  white-space: normal;
  margin-left:-55px !important;

  opacity: 0;
  transition: all 0.4s;
 
}

.survey-des:after {
  content: "";
  width:10px;
  height: 14px;
  transform: rotate(-45deg);
  background: #fff;
  position: absolute;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
  z-index: -1;
  bottom: -6px;
  left: calc(50% - 5px);
}

.survey-des > span{
  display: block;
  text-align: center;
  padding: 10px 20px;
  background: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.emojicons-survey li.active a .survey-des{
  -webkit-animation: bounce-survey-modal 2s ease infinite;
  animation: bounce-survey-modal 2s ease infinite;
}
.emojicons-survey li.active a .survey-des{opacity: 1; top: -60px;}
@keyframes bounce-survey-modal {
  0% {
      transform: scale(1, 1) translateY(0);
  }

  10% {
      transform: scale(1.1, .9) translateY(0);
  }

  30% {
      transform: scale(.9, 1.1) translateY(-20px);
  }

  50% {
      transform: scale(1.05, .95) translateY(0);
  }

  57% {
      transform: scale(1, 1) translateY(-7px);
  }

  64% {
      transform: scale(1, 1) translateY(0);
  }

  100% {
      transform: scale(1, 1) translateY(0);
  }
}
.form-survey{
  display: block;
  padding-bottom: 20px;
}
.smartwizard{ 
  display: block;
  flex-direction: column;
  position: relative;
  justify-content: center;
  padding-bottom: 70px;
}
.smartwizard .tab-content{
  height: auto !important;
}
.smartwizard  ul.steps{
  justify-content: center;

  position: relative;
  left: 0;
  right: 0; 
}
.smartwizard  ul.steps li{
  position: relative;
  margin: 0 20px;
}
.smartwizard  ul.steps li a:after {
  content: '';
  position: absolute;
  width: 145%;
  height: 4px;
  background: #ccc;
  top: 14px;
  left: -145%;
  z-index:1;
}
.smartwizard  ul.steps li a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark-blue);
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 15px;
  background-image: url(../img/icons/icon-checked-2.svg);
  z-index: 135;
  opacity: 0;
  transition: all 0.4s;
}
.smartwizard  ul.steps li:first-child a:after {display: none;}
.smartwizard  ul.steps li a{
  display: block;
  width: 30px;
  height: 30px; 
  pointer-events: none;
  position: relative; 
  padding: 0;
  background-color: transparent;
}
.smartwizard  ul.steps li a > span{
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  padding: 0;
  color: #fff;
  pointer-events: none;
  position: relative;
  z-index: 15;

}
.smartwizard  ul.steps li a.active span{
  background-color: var(--orange);
}
.smartwizard  ul.steps li a.done span{
  background-color:var(--dark-blue);
}
.smartwizard  ul.steps li a.active:after ,
.smartwizard  ul.steps li a.done:after{
  background-color: var(--dark-blue);
}

.smartwizard  ul.steps li a.done:before{opacity: 1;}

.smartwizard  ul.steps li:last-child{display: none;}
.smartwizard .toolbar-bottom{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  display: flex;
  justify-content: center; 
}

.smartwizard .toolbar-bottom .btn{
  padding: 0;
  margin: 0 5px;
  width: 110px;
  height: 41px;
  line-height: 39px;
  margin-top: 30px;
}
.smartwizard textarea.form-control{
  margin: 0 auto;
  max-width: 480px;
  height: 140px;
}
.smartwizard .sw-btn-prev{display: none; }
.smartwizard .sw-btn-next.disabled{display: none; }

.smartwizard .tab-pane{
  background-color:#F6F6F6;
  transition-delay: 0.6s;
}
 

@media (max-width: 600px){
  .modal-survey .modal-content{
    padding-left: 20px;
    padding-right: 20px;
  }

  .form-survey .modal-logo{
    width: 140px;
  }
  .form-survey h4{
    font-size: 14px;
  }
  .form-survey h3{
    font-size: 16px;
  }
  .survey-des > span{
    padding: 6px 15px;
  }

  .emojicons-survey .item img{
    width: 50px;
  }

  .survey-des{margin-left: -48px !important;}

  .emojicons-survey li.active a .survey-des{top: -45px;}

  .emojicons-survey{
    padding: 60px 0;
  }

  .smartwizard ul.steps li a > span{
    font-size: 14px;
  }
  .emojicons-survey .item:before{
    height: 21px;
  }
  .smartwizard ul.steps li{
    margin: 0 13px;
  }
  .smartwizard ul.steps li a:after{
    height: 3px;
  }
}


.card-nav{
  margin: auto;
  margin-right: -10px;
  flex-shrink: 0;
}
.card-nav li{
  padding: 0 10px;
}
.card-nav li a{
  display: block;
}
.card-nav li .icons{
  width: 20px;
  height: 20px;
}
.card-nav .icon-list{
  background-image: url(../img/icons/icon-list.svg);
}
.card-nav .icon-chart{
  background-image: url(../img/icons/icon-chart.svg);
}
.card-nav svg{
  width: 20px;
  height: auto;
  position: relative;
}
.card-nav svg.chart{ top: -2px;}
.card-nav svg.chart path{fill: #ccc !important;}
.card-nav svg.list line{stroke: #ccc;}

.pc .card-nav li a:hover svg.list line,
.card-nav  li a.active svg.list line{stroke: var(--dark-blue);}

.pc .card-nav li a:hover svg.chart path,
.card-nav  li a.active svg.chart path{fill: var(--dark-blue) !important;}

.modal-inform .modal-dialog {
	max-width: 600px;
}

.modal-consent .modal-dialog {
	max-width: 800px;
}

.filter-advanced .note {
	font-size: 12px;
	color: gray;
	font-style: italic;
	margin-top: -5px;
}
.dropdown.tooltips{
  display: inline-block;
}
.dropdown.tooltips .dropdown-menu{
  background-color: rgba(0, 0, 0, 0.88);
  box-shadow: none;
  border-radius: 8px;
  padding: 7px 10px;
  margin: 0;
  display: block;
  opacity: 0;
  color: #fff;
  font-size: 13px;
  border: 0;
  bottom:calc(100% + 10px);
  top: auto;
  transition: all 0.2s;
  pointer-events: none;
  left: 50%;
  width: 280px;
  margin-left: -140px;
}
.pc .dropdown.tooltips:hover .dropdown-menu,
.dropdown.tooltips .dropdown-menu.show{
  opacity: 1;
}
.dropdown.tooltips .dropdown-menu:before{
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-top: 5px solid rgba(0, 0, 0, 0.9);;
}

.btn-login{
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  border:0;
  color: #fff;
  font-size: 12px;
  font-family:'Kanit';
  border-radius: 7px;
  display: flex;
  align-items: center;
  width: 190px;
}
.btn-login .icon-lock,
.btn-login .icons{
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background-image: url(../img/icons/icon-lock.svg);
}
.btn-login svg.icons path{
  fill: #fff;
}

@media (max-width: 576px) {
	.dropdown.tooltips .dropdown-menu {
		width: 220px;
		margin-left: -110px;
	}
}

/*28/11*/

.card-infos.trade-mark{
  display: flex;
  padding: 20px;
}
.card-infos.trade-mark .card-photo{
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  overflow:visible;
  margin-right: 20px;
  border:1px solid #f1f1f1;
  padding: 5px;
}

.card-infos.trade-mark .card-photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
@media (max-width: 576px){
  .card-infos.trade-mark{
    flex-direction: column;
  }
  .card-infos.trade-mark .card-photo{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
}

/*31/07/2023*/
.cac-certified{
  display: flex;
  gap:20px;
  align-items: center;
}
.cac-certified .logo{
  width: 65px;
}

.card-tabs{
  align-items: center;
}
.dropdown .card-tabs .btn{
  margin-right: 0;
}
.card-tabs-button{ 
  position: absolute;
  top: 0;
  right: 15px;
  height: 70px;
  display: flex;
  align-items: center;
}
.card-tabs-button .dropdown .dropdown-menu{
  border-radius: 10px;
  box-shadow: 0px 1px 10px rgb(0 0 0 / 5%);
  border: 0;
  padding: 0;
  min-width: 100%;
}
.card-tabs-button .dropdown .dropdown-menu li a{
  padding:8px 15px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display:block;
  width: 100%;
}
@media (max-width: 1325px){
  .card-tabs-button{height: 60px; right: 10px;}
}

@media (max-width: 1280px){
  .cac-certified .logo{
    width: 55px;
  }
 
}
@media (max-width: 1199px){
  .card-tabs .card-tabs-button{display: none;}

  .card-tabs-button{
    height: auto;
    position: relative;
    right: auto;
    top: auto;
  }
}


@media (max-width: 767px){
  .cac-certified .logo{
    width: 45px;
    flex-shrink: 0;
  }
}
@media (max-width: 500px){
  .cac-certified{
    align-items: flex-start;
  }
  .cac-certified .logo{
    padding-top: 10px;
  }
}

.icons {
  --size:auto;
  width: var(--size);
  height: var(--size);

  object-fit: contain;
  object-position: center;
}