/*==================================================
    General
==================================================*/
html,body{
  padding: 0;
  margin: 0; 
  height: 100%; 
}  

/* html.pc{
  scroll-behavior:unset !important
} */
.scroll-behavior{
  scroll-behavior:unset !important
}
body{     
  
  margin:0; 
  padding:0;  
 
  position: relative;
  overflow-x: hidden;

  /* overscroll-behavior: contain; */
  /*filter: grayscale(80%);*/
}
 
:root {    

  --bs-body-color:#5D5D5D;
  --bs-body-bg:#fff;
  --bs-body-text-align:left;
  --bs-body-font-weight:var(--fw-400);
  --bs-body-line-height:1.65; 
  --bs-body-font-size:var(--fs-14);
  --bs-body-font-family:"Noto Sans Thai", sans-serif; 
  --bs-link-hover-color:inherit; 
  
  --main:#0063AC;
  --main-bg:#0063AC;
  --title:#004477;
  --body:#8E8E8E;  
  --body-2:#5D5D5D;
  --secondary:#A10A0A;
  --third:#194CAB;
  --fourth:#8E9194;
   
  --yellow:#E4CD83;
  --light-gray:#A3A3A3;
  --red:#EE3943;
  --green:#006838;
  --gold:#B0A07F;
  --disable:#DBDBDB;
  
  
  --body-rgb-a:1;
  --rgb-white:255,255,255;   
 
  --color-primary:var(--main);     
  --card-border-radius:12px; 
  
  --fs-32:32px;
  --fs-30:30px;
  --fs-28:28px;
  --fs-24:24px;
  --fs-20:20px; 
  --fs-18:18px; 
  --fs-16:16px;  
  --fs-14:14px;
  --fs-12:12px;

  --animation-primary: 0.4s cubic-bezier(.75, 0, .25, 1);
  --animation-navigation-fade: 0.3s ease-in-out; 
    
  --header-height:100px; 
  --navbar-brand:60px; 
  
  --padding-90:90px;
  --padding-80:80px;
  --padding-75:70px;
  --padding-50:50px;
  --padding-30:30px;
 
  /* --fw-200:200;
  --fw-300:200;
  --fw-400:300;
  --fw-500:400;
  --fw-600:500; 
  --fw-700:600;
  --fw-800:700;
  --fw-900:800; */

  --fw-200:200;
  --fw-300:300;
  --fw-400:400;
  --fw-500:500;
  --fw-600:600; 
  --fw-700:700;
  --fw-800:800;
  --fw-900:900;

  --text-title:#111111;
}  
 
@media (max-width:1700px) {
  :root{}
}
@media (max-width:1550px) {
  :root{
    --padding-90:70px;

    --fs-28:26px;
  }
}
@media (max-width:1300px) {
  :root{ 
    --header-height:85px; 
    --navbar-brand:50px; 
  }
}   
@media (max-width:1280px) {
  :root{ 
    --fs-28:24px;
    --fs-24:20px;
    --fs-20:18px;
    --fs-16:15px;
  }
}   
@media (max-width:767px) {
  :root{
    --header-height:75px; 
    --navbar-brand:40px;

    --fs-28:22px;
  }
}

@media (max-width:698px) {
  :root{ 
    --padding-90:50px; 
    
    --fs-32:28px;
    --fs-24:18px;
    --fs-18:18px; 
  }
}  

@media (max-width:575px) {
  :root{
    --fs-32:25px;
    --fs-28:20px;
  }
}
 
.modal-open{
  touch-action: none; 
  overscroll-behavior: contain;
}
  
.modal-backdrop{
  overscroll-behavior: contain;
  --bs-backdrop-opacity: 0.8;
  --bs-backdrop-zindex: 1051;
}
 
a{
  color:inherit;
  text-decoration: none; 
  transition: all 0.2s ease-in-out; 
}
a:hover{ text-decoration: none;   }
 
.star{ color: #FF3E40 }
.highlight{color: var(--blue-light) !important;}
.font-poppins{font-family: var(--poppins);}

.form-control,
.form-select,
.form-selects{
  --input-h:48px;
 -webkit-appearance: none; 
  padding:0 15px;
 
  font-weight:var(--fw-400); 
  font-family:inherit;  
  font-size:var(--fs-16); 
  border:1px solid #DEE1E8;

  height:var(--input-h);
  line-height:calc(var(--input-h) - 2px);  
  background:#fff; 
  border-radius:8px;  
  color:#111;
 
    -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-control::placeholder {   
  opacity:1;  
  color: #8D93A5; 
}

.form-control:-ms-input-placeholder {   
  opacity:1;  
  color: #8D93A5;
}

.form-control::-ms-input-placeholder {   
  opacity:1;  
  color: #8D93A5;
}

.form-control.disabled,
.form-control:disabled, 
.form-control[readonly] {
background: #E3E3EE;
border-color: #DEE1E8;
color: #111111;
} 

.form-control.bg-light{
  background-color: #F7F7FC !important;
  border-color: #F7F7FC !important;
}
 
.form-select,
.form-selects{
  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='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); 
  background-position:right .75rem center;
  background-size: 15px;
  background-repeat: no-repeat; 
  padding-right: 30px;
} 
 
.form-control:focus,
.form-select:focus{
  background-color: #fff; 
  outline: 0; 
  box-shadow: 0 0 0 0.2rem rgba(14, 106, 199, 0.1); 
} 
textarea.form-control{
  height: 120px;
  line-height: normal;
  padding-top: 10px;  
}
textarea.form-control.h-200{height: 180px;}

.form-select:not(.selected){color: rgba(0, 0, 0, 0.5);}
 
div.form-control{
  display: flex;
  align-items: center;
  gap:10px
}

.form-check {
  position: relative;
  padding-left:0;
  display: flex; 
  gap: 10px; 
}
.form-check strong{font-weight: var(--fw-500);}
.form-check .form-check-input{
  width:19px;
  height:19px;
  margin-right: 0; 
  border-width:1px;
  position: relative;
  margin-left:0;
  margin-top: 2px;
  border-radius:2px; 
  flex-shrink: 0;
  border-color:#E4E4E4;
  background-color: #FBFBFB;
  box-shadow: none !important;
}
.form-check {font-size: var(--fs-16); gap:15px}
@media (min-width:1200px) {
  .form-check.lg .form-check-input{
    width:22px;
    height:22px;
    margin-top: 1px;
  }

}

.form-check .form-check-input[type=radio],
.form-check .form-check-input[type=checkbox].circle{
  border-radius: 50%; 
  border-width: 2px;
}

.form-check .form-check-input[type=radio]:checked,
.form-check .form-check-input[type=checkbox].circle:checked {
  background-color: transparent; 
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230063ac'/%3e%3c/svg%3e");
  border-color: #0063ac;
}
.form-check label{
  margin-bottom:0;
  font-weight: var(--fw-300);
  font-size: inherit; 
}
.form-check-input:checked[type=checkbox], 
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent; 
}

.form-check-input:checked[type=checkbox]{
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-color:var(--red);
  border-color:var(--red); 
}
.form-select [data-bs-toggle]{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap:5px; 
  padding-top: 2px;
  opacity: 0.5;
  outline: 0 !important;
  color:#222222;
}
  
.form-group{
  display: block;
  position: relative;  
  z-index: 10;
} 
 
.form-group h6{ 
  gap:10px; 
  padding-bottom:7px;
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
}
  
.form-group .group{
  position: relative;
  display: block;
} 
.form-group .icons.left,
.form-group .icons.right{
  position: absolute;
  top: 0 !important;
  right: 11px;
  bottom: 0 !important;
  width: 16px; 
  height: auto;

  transition: none;
  z-index: 1;
} 
  
.form-group .icons.left{
  left: 10px;
  right: auto;
}
.form-group .icons.left.w-20{
  left: 14px;
}
.form-group .icons.left + .form-control{
  padding-left: 45px;
}
 
.form-group .icon-search{
  --icon-size:22px ;
  width: var(--icon-size) !important;
  background-image: url(../img/icons/icon-search.svg);
}
.form-group  .error + .icons{bottom: 31px !important;}
.form-group  .error[style] + .icons{bottom: 0 !important;}
.form-group.search input{width:265px;}
.error + .form-select{border-color: #DF1642; }

.form-select + .error{
  position: absolute;
  left: 0;
  top: 100%;
  line-height: 0.9;
}

select.form-select.error{display: none !important;}

.form-group.rows{
  display: flex;
  align-items: center;
}
.form-group.rows h6.title{
  flex-shrink: 0;
  margin: 0;
}
.form-group.rows .w-120{width: 120px;}
 
.btn{
  --btn-h:50px; 
  position: relative; 
  padding:0 20px;       
  height:var(--btn-h); 
  line-height:calc(var(--btn-h) - 2px);  
  transition: all 0.25s ease-in-out;    
  font-weight: var(--fw-500);     
  display: flex;
  align-items: center;
  justify-content: center;  
  font-size: var(--fs-16);   
  gap:12px;    
  max-width: var(--max-width);
  --max-width:none;
  --bs-btn-border-width:0;
  --bs-btn-border-radius:80px;

  --bs-btn-color:#fff; 
  --bs-btn-bg:var(--third); 
 
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--main-bg);
  --bs-btn-active-color:var(--bs-btn-hover-color);  
  --bs-btn-active-bg:var(--bs-btn-hover-bg); 
}   
.btn{
  display: flex;
  align-items: center;
  justify-content: center; 
} 
.btn-secondary{
  --bs-btn-bg:var(--main-bg);
  --bs-btn-color:#fff; 
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--third);
}
.btn-light{
  --bs-btn-bg:#DC1F26;
  --bs-btn-color:#fff; 
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#B70007;
}

.btn-light-2{
  --bs-btn-bg:#F5F8FB;
  --bs-btn-color:var(--main-bg); 
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--main-bg);
}
.btn-green{
  --bs-btn-bg:#006838;
  --bs-btn-color:#fff;
  --bs-btn-hover-bg:#018045;
}
.btn-red{
  --bs-btn-bg:#DC1F26;
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#B70007;
}
.btn-blue{
  --bs-btn-bg:var(--main);
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--third);
}
.btn-gray{
  --bs-btn-bg:#E1E1E1;
  --bs-btn-color:#111;
  --bs-btn-hover-color:#111;
  --bs-btn-hover-bg:#F1F1F1;
}
.btn-orange{
  --bs-btn-bg:#F2994A;
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#D9812F;
}
.btn-trans{
  padding: 0;
  border: 0 !important;
  height: auto;
  line-height: normal;
  width: auto;
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:transparent;
  --bs-btn-active-bg:transparent;
}
.btn-xs{
  --btn-h:32px;
  font-size: 14px;
  padding: 0 15px;
  border-radius: 4px;
}
.btn-xl{
  --btn-h:65px;
}
.btn-sm{
  --btn-h:36px;
  font-size: var(--fs-14);
}

.btn.w-130{width: 130px;}
.btn span,
.btn .icons{
  position: relative;
  z-index: 10;
}  
.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.rounded{
  --bs-btn-border-radius:50px;
  border-radius:var(--bs-btn-border-radius) !important ;
}
 
.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   /* outline: none;
   box-shadow: none; */
} 

.btn.disabled, .btn:disabled{  
  pointer-events: none;
  opacity: 0.8 !important;
  background-color: #f8f9fa !important;;
}
 
.shadow-0{box-shadow: none !important;}
  
.buttons{
  display: flex; 
  text-align: center; 
  justify-content: center;
  gap:25px;  
  padding: 30px 0 0;
} 

.buttons.gap-15{gap:15px}
.buttons.gap-15 .btn{min-width: 100px;}
 
.rounded{border-radius: 50% !important;}

.py-90{padding: var(--padding-90) 0 !important;}
.pt-90{padding-top: var(--padding-90) !important;}
.pb-90{padding-bottom: var(--padding-90) !important;}

.py-80{padding: var(--padding-80) 0 !important;}
.pt-80{padding-top: var(--padding-80) !important ;}
.pb-80{padding-bottom: var(--padding-80) !important ;}

.py-70{padding: var(--padding-75) 0 !important;}
.pt-70{padding-top: var(--padding-75) !important;}
.pb-70{padding-bottom: var(--padding-75)!important ;}

.py-50{padding: var(--padding-50) 0 !important;}
.pt-50{padding-top: var(--padding-50) !important;}
.pb-50{padding-bottom: var(--padding-50)!important ;}

.py-30{padding: var(--padding-30) 0 !important;}
.pt-30{padding-top: var(--padding-30) !important;}
.pb-30{padding-bottom: var(--padding-30)!important ;}

hr{border-color: #EBEBEB; opacity: 1;}

svg path,
svg rect,
svg line,
svg circle,
svg polygon{  
 transition: all 0.2s ease-in-out;
} 

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

@media (max-width:575px){
  .form-control,
  .form-select,
  .form-selects{
    --input-h:44px;
  }

  .form-select, .form-selects{
    background-size: 12px;
    background-position: right .55rem center;
  }

  .form-group.rows{
    flex-direction: column;
    align-items: flex-start;
  }
}
  
/*==================================================
    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;
  
  --icon-size:24px;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  
}
.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.35s 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; }

img.icons,
svg.icons{ 
  object-fit: contain;
  object-position:center;
  flex-shrink: 0;
}
.icons.w-14{--icon-size:14px;}
.icons.w-16{--icon-size:16px;}
.icons.w-18{--icon-size:18px !important;}
.icons.w-20{--icon-size:20px;}
.icons.w-32{--icon-size:32px;}

.container-fluid{ 
  --padding-x:50px; 
  max-width: 100%;
  padding-left:var(--padding-x);
  padding-right:var(--padding-x); 
  position: relative;
  z-index: 9;    
}

.container{ 
  --padding-x:50px;
  max-width: calc(1440px + (var(--padding-x) * 2));
  padding-left: var(--padding-x);
  padding-right: var(--padding-x);
  position:relative;
  z-index:9; 
}
 
.section-target{
  position: absolute; 
  /* top: calc((var(--header-height)  + 0px) * -1);  */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; 
}
 
.section{
  display: block;
  position: relative; 
  flex: 1 1 auto;
  --padding-top:50px;
  --padding-bottom:50px;

  padding: var(--padding-top) 0 var(--padding-bottom);
}
.textrow{position: relative; overflow: hidden;}
.textrow > span{display:inline-block;}
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }
 
@media (max-width:1440px) {
  .container-fluid{
    --padding-x:40px;
  } 
   
}
@media (max-width:1199px) {
  .container-fluid,
  .container{
    --padding-x:40px;
  } 
  
}
  
@media (max-width:1024px) { 
  .container-fluid,
  .container{
    --padding-x:30px;
  } 
}
@media (max-width:767px) {
  
}

@media (max-width: 670px) {
  .container,
  .container-fluid{
    --padding-x:20px;
  } 

  .section{
    --padding-top:25px;
    --padding-bottom:25px;
  }
}

/*==================================================
    Header Setup
==================================================*/   
.fw-light{font-weight: var(--fw-300) !important;}
.fw-400{font-weight: var(--fw-400) !important;}
.fw-500{font-weight: var(--fw-500) !important;}
.fw-600{font-weight: var(--fw-600) !important;}   
.fw-700{font-weight: var(--fw-700) !important;}    
 
b, strong{
  font-weight: var(--fw-600); 
  font-family: inherit;
}
.fs-20{font-size: var(--fs-20) !important;}
.fs-18{font-size: var(--fs-18) !important;}
.fs-16{font-size: var(--fs-16) !important;}
.fs-14{font-size: var(--fs-14) !important;}
.fs-12{font-size: var(--fs-12) !important;}
.fs-10{font-size: var(--fs-10) !important;}
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6{   
  margin:0;    
  font-weight:var(--fw-600);
  font-style: normal;  
  line-height:1.5;    
  position: relative;   
  color:var(--title); 
} 

h1, .h1{
  font-size: var(--fs-32);
}
h2, .h2{
  font-size: var(--fs-28);
}
h3, .h3{
  font-size: var(--fs-24);
}
h4, .h4{
  font-size: var(--fs-20);
}
h6{font-weight: var(--fw-500);}
  
.nowrap{ white-space: nowrap; }    
  
.header,
.navbar-brand,
.navbar-brand img{
  transition: all 0.3s;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
 
  height: auto;
  z-index: 1020;      
  display: block;    
  height: var(--header-height);   
  background-color:#fff;  
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
} 
  
.header .container,
.header .container-fluid{  
  display: flex;   
  align-items:center;   
  height: 100%; 
  z-index: 400;
  position: relative;   
  justify-content: space-between;
} 
 
.navbar-brand{ 
  padding: 0;   
  flex-shrink: 0;
  z-index: 200;    
  margin-left: 0; 
}
 
.navbar-brand a{ 
  flex-shrink: 0;
  display: flex;
  gap:23px;
}
.navbar-brand img,
.navbar-brand svg{ 
  width:auto;  
  margin: 0;
  height: var(--navbar-brand);
}   

.navbar-brand a:nth-child(1){display: flex;}
.navbar-brand a:nth-child(2){display: none;}

.btn-menu{display: none;} 
.nav-btn-menu{display: none;}
 
.dropdown [data-bs-toggle]{
  display: flex;
  align-items: center;
  gap:8px
}
.dropdown [data-bs-toggle]:after{
  content: '';
  width: 13px;
  height: 13px;
 
  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='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); 

}
.dropdown [data-bs-toggle].arrow-none:after{display: none;}
.dropdown-menu{
  --bs-dropdown-border-radius:10px;
  --bs-dropdown-menu-border-radius:5px;
  --bs-dropdown-border-color:#fff;
  --bs-dropdown-bg:#fff; 
  --bs-dropdown-color:#222;
  --bs-dropdown-padding-x:15px;
  --bs-dropdown-padding-y:5px;
  --bs-dropdown-spacer:0;
  --bs-dropdown-min-width:0;
  --bs-dropdown-link-hover-bg:rgba(0, 0, 0, 0.05); 
  --bs-dropdown-border-width:0;
  
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: all 0.35s;
  top: 110%; 
  box-shadow: 0 5px 8px rgba(45, 82, 114, 0.1);
  padding: 10px 0; 
  width: auto;
}  
.dropdown-menu.right{
  left: auto;
  right: 0;
}
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu.show{
  opacity: 1;
  top: 100%;
  pointer-events: all;
}
 
.dropdown-menu > li{
  position: relative;
  z-index: 10; 
}

.dropdown-menu > li > a{
  font-size: var(--fs-14);
  display: block;
  position: relative;
  padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);  
  color: var(--title);
} 
.dropdown-menu > li > a:hover{
  color: rgba(255, 255, 255, 0.5);
}
.btn.btn-icon,
.navbar-slider{display: none;}
@keyframes trin {

  from {
      transform:rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
      transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
      transform: rotate3d(0,0,1,15deg);
  }
  26%, 38%, 50%, 62%, 74% {
      transform: rotate3d(0,0,1,0deg);
  }
  29%, 41%, 53%, 65%, 77% {
      transform: rotate3d(0,0,1,-15deg);
  }
  80% {
      transform:rotate3d(0, 0, 1, 0deg);
  }

}

.nav-genaral{ 
  display: flex; 
  align-items: center;
  gap:10px;
}
 
.nav-genaral li > a{  
  height: 100%;
}  
.nav-genaral li.lang > a{  
  font-size: 16px;
  font-weight: var(--fw-500);
  color: #000000;
}
.nav-genaral .btn-trans{
  --btn-h:40px;
  width:var(--btn-h);
  height:var(--btn-h);
  padding: 0;
}

.nav-genaral .btn-light{
  margin-left: 5px;
  --bs-btn-border-width:1px;
}
.nav-genaral .btn-trans svg path[fill]{fill: #111;}
.nav-genaral .btn-trans svg path[stroke]{stroke: #111;}

.nav-genaral .btn-theme-toggle .icons.sun{
  display: none;
  --icon-size:28px
}

.nav-genaral .btn-username{
  --bs-btn-bg:transparent;
  --bs-btn-color:var(--main); 
  --bs-btn-hover-bg:transparent;
  --bs-btn-hover-color:var(--bs-btn-color); 
  
}
.nav-genaral .btn-username .name{
  flex-shrink: 0;
  max-width: 190px;
  padding-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-genaral .btn-username:after{
  content: '';
  width: 13px;
  height: 13px;
  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='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.line-animate{ 
  height: 4px;
  position: relative;
}
.line-animate:before{
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  display: inline-block;
  top: 0;
  background:#EE3943;
 
  transition: all 0.8s;
  transition-delay: 0.04s;
} 
.line-animate.center:before{
  left: 50%;
  transform: translateX(-50%);
}
.line-animate.animated:before {width: 100%;}
 
.nav .line-animate{
  height: auto;
}
.nav .line-animate:before{
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  top: auto;
  bottom: 0;
  transition: all 0.25s;
}
.nav > li > a:hover .line-animate:before ,
.nav > li.active > a .line-animate:before {width: 100%;}

@media (min-width:1200px) {
  .navbar-slider{display: none;}
  .nav-main{
    display: flex;
    gap:30px;
  }
  .nav-main > li > a{ 
    display: flex;
    height: 100%;
    color: #111;
    font-size: 15px;
    font-weight: var(--fw-500);
    position: relative;
  }
  .nav-main > li > a span{
    position: relative;
    display: inline-block;
    padding:7px 0;
  }
 
  .nav-main > li > a:hover,
  .nav-main > li.active > a{
    color: var(--main);
  }
  .nav-main .btn{
    font-size: 15px;
  }
  .nav-genaral{gap:5px}

  .nav-main .dropdown-menu{min-width: 200px;}
}
@media (min-width:1301px) {
  .nav-main{
    gap:20px;
  }
  .nav-main > li > a{
    font-size: 16px;
  }
  .nav-main .btn{
    font-size: 16px;
  }
  .nav-genaral{gap:10px}
}
/*==================================================
   Mobile
==================================================*/   
@media (max-width:1199px) {
  .header .nav-main{display: none;}
  .header .dropdown.lang{display: none;}

  .navbar-slider .lang{
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    color: #fff;
    display: flex;
    padding: 20px 0;
    font-size: 18px; 
    gap: 10px;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .navbar-slider .lang h6{
    margin-right: auto;
    color: #fff;
    font-size: inherit;
  }

  .navbar-slider .lang a{color: rgba(255, 255, 255, 0.5);}
  .navbar-slider .lang a.active{color: rgba(255, 255, 255, 1);}

  .btn.btn-icon{
    padding: 0 !important;
    border:0 !important;   
    z-index: 1060; 
    border-radius: 0;
    position: relative; 
    margin: auto 0 auto 9px; 
    width: auto; 
    height: auto;
    background-color:transparent !important;
    overflow: visible;  
    --bs-btn-bg:transparent;
    box-shadow: none;
    opacity: 1 !important;
    display: block;
  }
 
  .btn-icon:before{display: none;}
  .btn-icon .group{
    display: block;
    position: relative;
    width:25px;
    height:17px;
    margin: 0 auto 0
  }
  .btn-icon .group span{
    height: 3px;

    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:#111;
    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: 7px; 
      -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: 14px;
      -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(5px, 5px, 0);
    transform: rotate(45deg) translate3d(5px, 5px, 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(5px, -5px, 0);
    transform: rotate(-45deg) translate3d(5px, -5px, 0)
  }

  /**/

  .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-slider {
    --navbar-width:440px;
    --navbar-width-column:220px;

      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1095;
      width: var(--navbar-width);
      overflow: hidden;
      padding: 0; 
      display:block;
      background-color:var(--main-bg);
      align-items: normal;
      -ms-flex-align: normal;
      -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;
  }
  .nav-opened .navbar-slider {
      -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-inner{
    position: relative;
    overflow: hidden;
    height: 100%;
  }
 
  .nav-main {
      position: absolute;
      top: 0;
      bottom: 0;
      display: block;
      height: 100%; 
      right: calc(-1 * var(--navbar-width));
      width: calc(var(--navbar-width) * 2);
      overflow: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; 
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
  }
  .nav-main li {
      display: block;
      position: static;
  }
  .nav-main li {
      padding-left: 30px !important;
  }
  .nav-main li a {
      padding: 18px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-weight: 400;
      font-size:18px;
      height: auto!important;
      line-height: normal !important; 
      display: block;
      position: relative;
      color: #fff;
      outline: 0 !important;
  } 
  .nav-main > li > a {
      /* width: var(--navbar-width-column);; */
      position: relative;
  }
  .nav-main > li.dropdown > a:after {
      content: "";
      position: absolute;
      top: 25px;
      left:calc(var(--navbar-width) - 60px);
      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-main > li > a .arrow{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    z-index: 1; 
   }
  .nav-main .dropdown-menu {
      position: absolute;
      top: 0 !important;
      right: 0;
      bottom: 0;
      left: auto !important;
      width: var(--navbar-width);
      margin: 0;
      padding: 0;
      transition: none;
      border: 0;
      background-color:var(--main-bg);
      
  } 
  .nav-main li.nav-title {
      padding-left: 0;
      position: relative;
      cursor: pointer;
      display: flex;

      opacity: 0.8; 
      padding: 13px 0 13px 40px;
      margin-bottom: 0;
      padding-left: 40px !important;
      color:rgba(255,255,255,0.5); 
      font-size: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important
  } 
  .nav-main li.nav-title > span{
    display: block;
    position: relative;
    padding: 0 0 0 30px;
  }
  .nav-main li.nav-title:after{
    display: none;
  }
  .nav-main li.nav-title .arrow{
      display: inline-block;
      position: absolute;
      vertical-align: top;
      left: 20px;
      top: 50%;
      margin-top: -4px;
  }
  .nav-main li.nav-title .arrow:before{
      content: "";
      width: 8px;
      height: 8px;
      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-main .dropdown.showing .dropdown-menu {
      display: block;
      opacity: 1;
  }
  .nav-main .dropdown .nav{
    flex-direction: column;
  }
  .level-1-opened .nav-main {
      right: 0;
  }

  .nav-main .dropdown-menu > li{border: 0;}

  .nav-genaral .btn-username{padding-left: 0; gap:5px}
}

@media (max-width:767px) {
  .nav-genaral .btn-trans{
    --btn-h:36px;
  }
  .nav-genaral .btn-light{
    --btn-h:42px;
    font-size: 14px;
  }

  .navbar-brand a{
    gap:18px
  }

  .nav-genaral .dropdown-menu.member{
    min-width: 200px;
    left: auto;
    right: -25px;
  }
}

@media (max-width:575px) {
  .nav-genaral{gap:5px}

  .navbar-slider {
    --navbar-width:calc(100vw - 50px);
  }
  .nav-main li {
    padding-left:20px !important;
  }
  .nav-main li a{font-size: 16px;}
  .nav-main > li.dropdown > a:after{
    left: calc(var(--navbar-width) - 45px);
  }
  .navbar-slider .lang{font-size: 16px;}
}
 
@media (max-width:360px) {
  .nav-genaral{gap:0}
  .nav-genaral .btn-trans{--btn-h:32px}
  .nav-genaral .btn-trans .icons{--icon-size:20px}
  .nav-genaral .btn-theme-toggle .icons.sun{--icon-size:22px}

 
}
/*==================================================
   Section
==================================================*/  
 
.page{
  display: flex;
  position: relative;
  overflow: hidden;   
  padding-top: var(--header-height); 
  flex-direction: column;
  min-height: 100%; 
  /* background-color: #f7f8fc; */
}  
.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#fff;
  z-index: 1090; 
  display:flex;   
} 
  
.loader {
  width: 34px;
  height:34px;
  margin:  auto;
  display: block;
  border-top: 3px solid var(--color-primary);
  border-right: 3px solid rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  border-left: 3px solid rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  animation: spin 1s infinite linear;
}
 
 
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
} 
.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;
}
 
.background.fixed{
  background-attachment: fixed;
}
.device .background.parallaxie,
.device .background.fixed{
  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{ 
  position: relative;  
}
  
.card{ 
  position: relative;
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block;   
  border-radius: 15px;
}

.card-photo .photo{
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.35s ease 0s;  
  border-radius: 15px;
}
.card-photo .photo img{
  width: 100%
}
 
.card-body{color: inherit;}
 
.card-link{
  position: absolute !important;
  top: 0;
  left: 0; 
  right: 0;
  height: 100%;
  z-index: 100;
  z-index: 20 !important;
}
.card h3,
.card p,
.card .card-body{transition: all 0.2s ease 0s;}
 
.section-banner{ 
  position: relative;
  padding: 0 !important;
  flex: unset;
}

.section-body{
  flex: 1 1 auto;
  /* padding-top:var(--header-height); */ 
}
 
/*==================================================
  Home
==================================================*/ 

.section-banner{
  padding:0 !important;  
}
 
.section-banner.main img{
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;
}
.section-banner.main .swiper-banner .swiper-slide{
  height: 500px;
  position: relative;
  width: 100%;
}

.section-banner.main .container{
  height: 100%;
  display: flex; 
}
.swiper-button-group.banner{
  top: auto;
  bottom: 0;
  gap:0
}

.banner-caption{
  position: relative;
  margin-top: auto;
  margin-left: 30px;
  margin-bottom: 50px;
  padding: 20px;
  color: #fff;
  max-width: 650px;
}
.banner-caption:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(95deg, rgba(255, 255, 255, 0.5) 0%, rgba(226, 241, 255, 0.5) 100%);
  z-index: -1;
}
.banner-caption h5{
  font-size: var(--fs-20);
  color: #0063AC;
  font-weight: var(--fw-500); 
}
.banner-caption h2{
  font-size: var(--fs-32);
  color: #111;
  font-weight: var(--fw-600);
  position: relative;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.banner-caption h2:after{
  content: '';
  position:relative;
  width:50px;
  height: 4px;
  background-color: #EE3943;
}

.banner-caption p{
  font-size: var(--fs-16);
  font-weight: var(--fw-300);
  color: #111111;
  margin: 0;
}

.banner-caption{
  -webkit-animation-delay: 0ms;
   animation-delay: 0ms;
     -webkit-animation-duration: 300ms;
   animation-duration: 300ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeOut;
   animation-name: fadeOut;
}
.swiper-slide-active .banner-caption{ 

  opacity: 1;
  visibility: visible;
  -webkit-animation-duration: 800ms;
   animation-duration: 800ms;
   -webkit-animation-delay: 400ms;
   animation-delay: 400ms; 
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
} 
  
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.section-banner.small{ 
  padding:42px 0 !important;
  background-color: #ccc;
  text-align: center;
}
.section-banner.small img{
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;
}
.section-banner.small h1{
  color: #fff;
  margin-bottom:10px;
}
.section-banner.small p{
  margin: 0;
  font-size: 14px;
  color: #fff;
  word-spacing:5px;
}
.section-banner.small p a:hover{opacity: 0.6;}
.section-body{
  background-color: #f7f8fc;
}

.bg-light{
  background-color:#f7f8fc !important;
}

.nav-links{
  display: flex;
  gap:30px;
  padding: 10px 0;
  margin-bottom: 15px;
}
.nav-links > li > a{
  display:block;
  position: relative;
  font-weight: var(--fw-600);
  font-size: var(--fs-20);
}
.nav-links > li > a span{
  display: inline-block;
  padding: 3px 0;
  position: relative;
}
.nav-links > li > a:hover,
.nav-links > li > a.active {color: var(--red);}
.nav-links > li > a:hover .line-animate:before ,
.nav-links > li > a.active .line-animate:before {width: 100%;}

.card-news-lists{
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.8rem;
}
.card-news{
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  border-radius: 0 0 12px 12px;
}
.card-news .date{
  position: absolute;
  left: 12px;
  bottom: 12px;
  border-radius: 4px;
  background-color:var(--red);
  color: #fff;
  padding:3px 10px;
}
.card-news .card-body{
  padding:17px 15px;
  font-weight: var(--fw-500);
}
.card-news h3{
  font-size: var(--fs-16);
  color: var(--body);
  font-weight: var(--fw-500);
  transition: all 0.25s;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-news h3 + p{
  margin-top: 12px;
}
.card-news p{
  margin: 0;
}
.card-news:hover .photo{transform: scale(1.1);}
.card-news:hover h3{color: var(--main);}

.card-news.bg-none {
  background-color: transparent;
}
.card-news.bg-none .card-body{
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 10px;
}
.card-news.bg-none h3{color: #111;}
.card-news.bg-none:hover h3{color: var(--main);}
.link-viewall{
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness:1px;
  font-size: var(--fs-18);
   position: relative;
   top: -8px;
}
.link-viewall:hover{
  color: #B70007;
  text-decoration-thickness:1px;
  text-decoration: underline;
}
.hgroup{  color: var(--body);}
.hgroup.d-flex{
  align-items: center;
  justify-content: space-between;

}
.hgroup hr{
  margin: 25px 0;
  border-color: #CDD0DB;
}

.form-group.search{
  width: 100%;
  max-width: 580px;
  margin:0 auto;
  display: flex;
  border-radius: 8px;
  border: 1px solid #285CA1;
}
.form-group.search .form-control{
  --input-h:44px;
  background-color: rgba(4, 23, 86, 0.6);  
  border: 0;
  color: #7CC0FF;
  border-radius: 8px 0 0 8px;
  width: calc(100% - 80px);
  font-weight: var(--fw-400);
}
.form-group.search .btn-search{
  padding: 0;
  width: 80px;
  border-radius: 0 8px 8px 0;
  font-weight: var(--fw-400);
  --bs-btn-bg:var(--gold);
  --bs-btn-hover-bg:#CBB78C;
  --btn-h:44px;
  
}
.form-group.search .form-control::placeholder {    
  color: #7CC0FF; 
}

.form-group.search .form-control:-ms-input-placeholder {    
  color: #7CC0FF;
}

.form-group.search .form-control::-ms-input-placeholder {    
  color: #7CC0FF;
}
@media (max-width:1280px) {
  .banner-caption h2{
    font-size: 28px;
  }
}

@media (max-width:1199px) {
  .nav-links{gap:20px;}
  .nav-links > li > a{
    font-size: var(--fs-18);
  }

  .link-viewall{
    font-size: var(--fs-16);
  }
}

@media (max-width:991.98px) {
  .card-news .date{font-size: 13px;}
  .card-news .card-body {padding: 14px 12px;}

  .card-news-lists {
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 1.6rem;
  }

  .banner-caption{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
  }
  .banner-caption h5{font-size: 16px;}
  .banner-caption h2{font-size: 24px; gap:5px}
}

@media (max-width:575px) {
  .card-news-lists { 
    --bs-gutter-y: 1.4rem;
  }
  .nav-links{
    gap:15px; 
    padding: 5px 0;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    overflow: hidden;
    overflow-x: auto;
    flex-wrap: unset;
  }
  .nav-links > li{
    flex-shrink: 0;
  }
  .nav-links > li > a{
    font-size: var(--fs-16);
  }
  
  .hgroup.d-flex{
     flex-direction: column;
     align-items: flex-start;
  }
  .hgroup.d-flex .link-viewall{
    margin-left: auto; 
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 12px;
  }

  .banner-caption{
    margin-bottom: 50px;
  }
  .banner-caption h2{font-size: 20px;}
  .banner-caption h2:after{height: 3px; width: 40px;}
  .banner-caption p{font-size: 14px;}

  .section-banner.small{ 
    padding:30px 0 !important;
  }
  .section-banner.small h1{
    margin-bottom: 0;
  }
  .section-banner.small p{
    font-size: 12px;
  }
}

@media (max-width:420px) {
  .banner-caption h5{font-size: 14px;}
  .banner-caption h2{font-size: 18px; margin-bottom: 12px;}
  .banner-caption p{font-size: 12px;}
}

/*==================================================
  Home - Chart
==================================================*/ 
.background.bg-01{display: block;}
.background.bg-01.dark{display: none;}
.card-chart{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(79, 155, 198, 0.2);
  padding: 20px;
  height: 100%;
}
 
.card-chart .card-title{
  border-left:5px solid var(--red);
  padding-left: 15px;
  line-height: 1.3;
  margin-top: 5px;
}
.card-chart .card-body{
  padding: 0 10px ;
}

.chart-legend{
  display: flex;
  gap:10px;
  font-size: 14px;
}
.chart-legend h5{
  font-size: inherit;
  font-weight: var(--fw-500); 
  margin-bottom: 2px;
  color:#111 !important;
}
.chart-legend p{
  margin: 0; 
}
.chart-legend .circle{
  --bg:#ccc;
  width:16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--bg);
  position: relative;
  top: 3px;
}

.chart-block{
  display: block;
  text-align: center;
  position: relative;
}
.swiper-overflow.institution{
  position: relative;
  padding-top:70px;
  margin-top: -40px; 
  margin-left: -15px;
  margin-bottom: 20px;
} 
.swiper-overflow.institution .logo{
  height: 100px;
  width: 100%;
  object-fit: contain;
  object-position: center;
}
.swiper-overflow.institution .swiper-slide{
  width:16.6667%;
  padding: 0;
}

.swiper-button-group{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap:15px
}
.swiper-button{
  width: 36px;
  height: 36px;
  background-color:#F0F1F3;
  top: auto;
  right: auto;
  left: auto;
  margin: 0;
  border-radius: 0;
  position: relative;
  transition: all 0.25s;
  display: flex;
}

.swiper-button .icons{
  --icon-size:14px;
  margin: auto;
  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='%232A2B71' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.swiper-button-prev .icons{
  transform: rotate(90deg);
}
.swiper-button-next .icons{
  transform: rotate(-90deg);
}
.swiper-button:hover{
  background-color:#DC1F26;
}
.swiper-button:hover .icons{
  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='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

@media (max-width:1550px) {
  .swiper-overflow.institution .logo{height:90px;}
}
@media (max-width:1280px) {
  .swiper-overflow.institution .logo{height:70px;}
}
@media (max-width:1199px) {
  .swiper-overflow.institution .swiper-slide{width: 20%;}
}
@media (max-width:991.98px) {
  .swiper-button-group{gap:10px}
  .swiper-overflow.institution .swiper-slide{width: 25%;}
}
@media (max-width:670px) {
  .swiper-overflow.institution .logo{height:50px;}
}

@media (max-width:575px) {
  .card-chart .card-body{
    padding-left: 0;
    padding-right: 0;
  }
  .chart-legend .circle{
    width: 14px;
    height: 14px;
  }
  .swiper-overflow.institution{
    margin-top: -32px;
    padding-top: 50px;
  }
 
 
  .swiper-overflow.institution .swiper-slide{width: 33.33%; padding: 0 15px;}
  .swiper-button-group{gap:5px}
  .swiper-button{
    width:28px;
    height:28px;
  }
  .swiper-button .icons{
    --icon-size:12px
  }
}

/*==================================================
 Menu Highlight
==================================================*/ 
.section-menu-highlight{
  --padding-top:0;
  --padding-bottom:0;
  z-index: 100;
}

.card-menu-highlight{
  --card-border-radius:8px; 
  --card-height:100px;
  --card-height-half:calc(var(--card-height)/2);
  /* --card-padding:20px; */
  --card-icon-size:60px;

  position: relative;
  z-index: 10;
  padding: var(--card-padding);
  margin: 0;
  list-style-type: none;
  display: flex;
  border-radius: var(--card-border-radius);
  background-color: #fff;
  height: var(--card-height);
  color: var(--blue-drak);
  text-align: center;
  box-shadow: 0px 6px 12px rgba(171, 190, 209, 0.3);
  margin-top:calc(var(--card-height-half) * -1);
}
.card-menu-highlight li{
  flex: 1 1 auto;
  border-right: 1px solid rgba(202, 202, 202, 0.5);
}
 
.card-menu-highlight li:last-child{
  display: none;
}

.card-menu-highlight li > a{
  display: flex;
  flex-direction: row; 
  align-items: center;
  height: 100%;
  padding:20px 30px;
}
.card-menu-highlight h3{
  font-size: var(--fs-16);
  padding-top: 0px;
  text-align: left;
  padding-left: 15px;
  color: #0063AC;
}

.card-menu-highlight p{
  font-size: var(--fs-12);
  text-align: left;
  padding-left: 15px;
  font-weight: 400;
  margin: 0;
  line-height: 16px;
}

.card-menu-highlight .icons{
  --icon-size:var(--card-icon-size);
  top: 0;
  background-color: #0063AC;
  border-radius: 50%;
}
.pc .card-menu-highlight a:hover .icons{
  top: -5px;
}

.card-menu-highlight li > a:hover{
  background-color: #0063AC;
}

.card-menu-highlight li.left > a:hover{
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.card-menu-highlight li.right > a:hover{
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.card-menu-highlight li > a:hover h3{  
  color: #fff;
}

.card-menu-highlight li > a:hover p{
  color: #9BC7E7;
}

.card-menu-highlight li > a:hover .icons{  
  background-color: #DC1F26;
}


/* .pc .card-welink:hover .card-icon{
  animation-name: trin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
} */

@keyframes trin {

  from {
      transform:rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
      transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
      transform: rotate3d(0,0,1,15deg);
  }
  26%, 38%, 50%, 62%, 74% {
      transform: rotate3d(0,0,1,0deg);
  }
  29%, 41%, 53%, 65%, 77% {
      transform: rotate3d(0,0,1,-15deg);
  }
  80% {
      transform:rotate3d(0, 0, 1, 0deg);
  }
  
  }

@media (max-width:1280px) {
  .card-menu-highlight{ 
    --card-height:152px;
    --card-icon-size:60px;
    padding-left: 0;
    padding-right: 0;
  }
  
  .card-menu-highlight li > a{
    flex-direction: column;
  }

  .card-menu-highlight h3{
    padding-top: 5px;
  }

  .card-menu-highlight h3,
  .card-menu-highlight p{
    text-align: center;
    padding-left: 0;
  }
}

@media (min-width:881px) {
  .card-menu-highlight li:nth-last-child(2){
    border: 0;
  }
}
@media (max-width:880px) {
  .card-menu-highlight{
    flex-wrap: wrap;
    --card-height:auto;

    margin-top:-60px;
    padding:var(--card-padding);
    border-radius: 0;
  }
  .card-menu-highlight li{
    flex: unset;
    width:50%;
    border-top: 1px solid rgba(202, 202, 202, 0.3);
    border-right-color: rgba(202, 202, 202, 0.3);
  }
  .card-menu-highlight li.right > a:hover,
  .card-menu-highlight li.left > a:hover{
    border-radius: 0;
  }
  
  .card-menu-highlight li a{
    padding: 15px;
    
  }
  .card-menu-highlight h3{margin-bottom:5px;}
  .card-menu-highlight li:last-child{
    display: block;
    border-right-width:1px;
  }
  
}
@media (min-width:501px) and (max-width:880px) {
  .card-menu-highlight li:nth-child(3),
  .card-menu-highlight li:nth-child(6){
    /* border-right: 0; */
  }
  .card-menu-highlight li:nth-child(4),
  .card-menu-highlight li:nth-child(5),
  .card-menu-highlight li:nth-child(6){
    border-top: 1px solid rgba(202, 202, 202, 0.5);
  }
}

@media (min-width:0px) and (max-width:500px) {
  .card-menu-highlight{
    margin-top: -40px;
    /* padding-left: 10px;
    padding-right: 10px; */
  }
  
  .card-menu-highlight li:nth-child(1),
  .card-menu-highlight li:nth-child(2){
    border-top: 0;
  }
  .card-menu-highlight li:nth-child(even){
    border-right: 0;
  }

  .card-menu-highlight h3{
    font-size: 12px;
  }
}


/*==================================================
  News
==================================================*/ 

.pagination{
  display: flex;
  justify-content: center;
  gap:12px;
  padding: 40px 0 0;
}
.pagination a{
  width:30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3E5699;
  font-size: 16px;
}
.pagination li.prev a, .pagination li.next a{
  width:40px;
}
.pagination a.arrow{
  background-color: #D6E1FD; 
}
.pagination a.arrow .icons{
  width: 13px;
  height: 13px;
  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='%232A2B71' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.pagination a.arrow.prev .icons{transform: rotate(90deg);}
.pagination a.arrow.next .icons{transform: rotate(-90deg);}
.pagination a.arrow.disabled{
  background-color: #C0C2CA;
  pointer-events: none;
}
.pagination a.arrow.disabled .icons{
  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='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.pagination .active a{
  background-color: var(--main-bg);
  color: #fff;
  pointer-events: none;
}
.pagination a:hover{
  background-color: #f1f1f1; 
}

.pagination a.arrow:hover{
  background-color:var(--main);
}
.pagination a.arrow:hover .icons{
  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='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.news-details .hgroup{
  border-bottom: 1px solid #EDEFF3;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.news-details .hgroup h2{
  font-size: var(--fs-24);
  color: var(--main);
  margin-bottom: 15px;
}
.news-details .hgroup .date{
  color: var(--light-gray);
  font-size: 14px;
}

.article{ 
  font-size: var(--font-size);
  color:var(--color);
  --color:var(--body);
  --font-size:var(--fs-16);
  --margin-bottom:20px;

}
.article h3,
.article h4,
.article h6{
 
  font-size: var(--fs-16);
  margin-bottom: calc(var(--margin-bottom) - 5px);
}
.article p,
.article ul{
  margin-bottom: var(--margin-bottom);
}
.article ul,
.article ol{
  padding-left: 17px;
}
.article ul li{ margin-bottom: 8px;}
.article strong{color: var(--title);}
.article img:not(.icons){
  width: 100%;
  max-width:1024px;
  margin: 20px 0;
}
.article table{
  width: 100%;
}
.article table th{
  font-weight: var(--fw-600);
}
.article table th,
.article table td{
  vertical-align: top;
  padding: 10px 10px;
}
.article table th h6{margin: 0;}
.article hr{
  margin:20px 0 25px;
}

table.v-align-middle td {
  vertical-align: middle;
}

.nav-download-list{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 10px;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.nav-download-list li{
  margin: 0 !important;
}
.nav-download-list li a{
  display: flex;
  gap:10px;
  color: var(--third);
}
.nav-download-list li a:hover{
  color: var(--main);
}

.alert {
  --bs-alert-border-radius:12px;
}
.alert-primary{
  --bs-alert-color: #111;
  --bs-alert-bg: #F5F8FB;
  --bs-alert-border-color: #F5F8FB; 
}

.alert-secondary{
  --bs-alert-color: #2A2B71;
  --bs-alert-bg: #D6E1FD;
  --bs-alert-border-color: #D6E1FD; 
  color:var(--bs-alert-color) !important;
  padding:25px;
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
}
.alert-secondary table th{font-weight: inherit;}
.alert-secondary table td{padding-right: 10px; vertical-align: top;}
.alert-secondary h4{
  color: inherit;
  margin-bottom: 10px;
}

.alert-warning{
  --bs-alert-color: #B46100;
  --bs-alert-bg: #FFE8BD;
  border: 0;
}
.alert-xs{
  --bs-alert-border-radius:4px;
  padding:5px 10px;
  font-size: 14px;
}
.alert table th,
.alert table td{
  padding-top: 5px;
  padding-bottom: 5px;
}

@media (max-width:1280px) {
  .table-xl-full th,
  .table-xl-full td{
    width: 100% !important;
    display: block;
  }
  .table-xl-full th{
    padding-bottom: 5px!important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .table-xl-full td{
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width:575px) {
  .pagination{
    padding-top:25px;
  }
  .pagination a{
    width:26px;
    height:26px;
    font-size: 14px;
  }

  .news-details .hgroup .date{font-size: 12px;}
  .news-details .hgroup h2{margin-bottom: 10px;}
  .news-details .hgroup { 
    padding-bottom:0;
    margin-bottom:15px;
  }

  .alert-xs{font-size: 12px;}

  .article img{
    margin: 5px 0;
  }

  .article h3, .article h4 { 
    margin-bottom: calc(var(--margin-bottom) - 10px);
  }

  .article table td,
  .article table th{
    display: block;
    width: 100%;
  }
  .article table th:first-child,
  .article table td:first-child{
    padding-bottom: 0;
  }
  .article table td:last-child{
    padding-bottom: 15px;
  }
  .table-xl-full th{
    padding-bottom: 0px!important;
  }
  .nav-download-list{
    gap:10px !important
  }
  .nav-download-list .icons{
    --icon-size:20px
  }

  .table-xs-full th,
  .table-xs-full td{
    width: 100% !important;
    display: block;
  }
  .table-xs-full th{
    padding-bottom: 5px!important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .table-xs-full td{
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .alert-secondary{padding: 20px;}
}

/*==================================================
  Contact
==================================================*/ 

.google-map{
  position: relative;
  width: 100%;
  height:540px;
}
.google-map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.google-map.h-300{
  height: 300px;
}
.title-underline{
  position: relative;
  display: flex;
  flex-direction: column;
  gap:10px;
  font-size: var(--fs-24);
  margin-bottom: 20px;
}
.title-underline:after{
  content: '';
  position:relative;
  width:65px;
  height: 6px;
  background-color:#DC1F26;
}

.title-bar{
  background-color: var(--third);
  border-radius: 8px;
  font-size:22px;
  color: #fff !important;
  min-height: 57px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
  font-weight: var(--fw-600);
}

.contact-infos{
  padding: 0 !important;
  margin: 0;
  list-style-type:none;
  flex-direction: column;
  gap:10px;
  display: flex;
  color: var(--title);
}
.contact-infos li{
  display: flex;
  gap:10px;
}
.contact-infos .icons{
  --icon-size:24px;
  flex-shrink: 0;
}
.contact-infos p{
  margin: 0;
}

.text-warning{
  color:#B46100 !important;
}
.text-danger{
  color: var(--red) !important;
}
.text-primary{
  color: var(--main) !important;
}
.text-info{
  color: var(--third) !important;
}
.link-danger{
  color: var(--red) !important;
}
.link-primary{
  color:var(--third) !important;
}
.link-primary:hover{
  color:var(--main) !important;
  text-decoration: underline;
}

.link-gray{
  color: var(--body) !important;
}

.link-gray:hover{
  color: var(--body-2) !important;
  text-decoration: underline;
}

.link-title{color: var(--title);}
.link-title:hover{color: var(--main);  text-decoration: underline;}
.link-underline,
.link-underline:hover{
  text-decoration: underline;
}


a.link-danger.d-flex{
  flex-wrap: wrap;
}
a.link-danger.d-flex .icons{
  display: inline-block;
}
@media (max-width:1280px) {
  .title-bar{
    font-size: var(--fs-24);
    min-height: 52px;
  }
}

@media (max-width:991.98px) {
  .title-underline:after{
    height: 4px;
    width: 55px;
  }

  .google-map{ height: 450px;}
}
@media (max-width:575px) {
  .google-map{ height: 80vw; margin-top: 25px;}

  .title-bar{ 
    min-height: 45px;
  }
}

/*==================================================
  Content Sidebar
==================================================*/
.container.has-sidebar{
  display: flex;
  gap:35px;

  --sidebar:280px;
}

.sidebar{
  width:var(--sidebar);
  height: 100%;
  flex-shrink: 0;
}
.content{
  width: calc(100% - var(--sidebar));
  height: 100%;
}

.card-infos{
   padding: 23px 25px 30px;
   margin-bottom: 5px;
   border-radius: 12px;
   background-color: #fff;
   word-break: break-all;
}
.card-infos h3{
  color: var(--main);
}
.card-infos.has-shadow{ 
  box-shadow: 0px 0px 15px rgba(79, 155, 198, 0.2);
}  
.card-infos.has-shadow-black{
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
}
.card-infos.w-1020{
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}
.w-600{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.w-640{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.infos-list{
  display: flex;
  flex-direction:column;
  gap:10px;
  font-size: var(--fs-16);
  margin:15px 0 0 0;
  padding: 0;
  list-style-type: none;
  color: var(--body);
}
.infos-list li{
  display: flex;
  gap:15px
}
.infos-list h6{
  font-size: inherit;
  flex-shrink: 0;
  color: var(--main);
  font-weight: var(--fw-500);
}

.infos-list li p{
  margin: 0;
}
.infos-list li p:last-child{
  margin: 0;
}
.infos-list  strong{font-weight: var(--fw-500); color: var(--title);}
.infos-list p a:hover{text-decoration: underline;}

.infos-list.has-line li{
  border-bottom: 1px solid #EDEFF3;
  padding-bottom: 15px;
  padding-top:5px;
}
.infos-list.has-line li:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.infos-list li .icons{top: 2px;}
.button-list{
  display: flex;
  gap:15px;
  flex-wrap: wrap;
}
.button-list .btn{
    font-size: 14px;
    border-radius: 4px;
    padding: 0 8px;
    font-weight: var(--fw-400) !important;
    cursor: default;
    pointer-events: none;
    --btn-h:30px;
    --bs-btn-bg:var(--gold); 
    --bs-btn-hover-bg:var(--bs-btn-bg) 
}
.button-list a.btn{
  --bs-btn-hover-bg:var(--third);
  cursor: pointer;
  pointer-events: all;
}

.show-list{
  display: flex;
  align-items: center;
  gap:15px;
  margin-left: auto;
  white-space: nowrap;
}
.show-list p{
  margin: 0;
}
.show-list .form-select{
  background-color: #E9F0FD;
  border-color: #E9F0FD;
  font-size: 14px;
  border-radius: 6px;
  padding: 0 20px 0 10px;
  min-width:55px;
  background-size: 10px;
  background-position: right 8px center;
  --input-h:34px;
}

.boxed{
  --width:840px;
  width: 100%;
  max-width: var(--width);
  margin: 0 auto;
}
@media (max-width:1280px) {
  .sidebar{
    width: 260px;
  }
  .button-list{gap:10px}

  .container.has-sidebar{gap:25px}
}

@media (max-width:991.98px) {
  .sidebar{
    width: 100%;
  }
  .container.has-sidebar{
    flex-direction: column;
    --sidebar:100%;
  }
  .content{width: 100%;}
}

@media (max-width:575px) {
  .infos-list:not(.links) li{
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid #EDEFF3;
    padding-bottom: 13px;
    padding-top: 4px;
  }
  .infos-list li:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
  .card-infos {
    padding: 23px 20px 30px;
    margin-bottom: 0;
  }


}

/*==================================================
  Accordion
==================================================*/ 

.card-accordion{
  display: block; 
  position: relative;
  margin-bottom:30px;
}

.card-accordion .card-header{
  border-radius:8px;
  background-color:var(--third);
  padding: 15px 25px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content:space-between; 
  cursor: pointer;
}

.card-accordion .card-header h2{
  font-size: 22px;
  color: #fff; 
}

.card-accordion .card-header .arrow{
  transform: rotate(-90deg);
  transition: all 0.25s;
  width:16px;
  height: 16px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  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='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.card-accordion .card-header[aria-expanded="true"] .arrow{transform: rotate(0deg);}

.card-accordion .card-body{
  border: 1px solid #EDEFF3;
  padding:20px 25px; 
  font-size: var(--fs-16);
}

.card-accordion .card-body:first-child{
  margin-top: 15px;
}

.card-accordion .card-body + .card-body{border-top: 0;}

.card-accordion .card-body h3{
  font-size: var(--fs-20);
  color: var(--title);
}
.card-accordion .card-body > p{
  margin-bottom: 20px;
}
.card-accordion .card-body > p:last-child{
  margin-bottom: 10px;
}

.nav-links.in-accordion{
  background-color: #FAFAFA;
  justify-content: center;
  margin: 0;
  border: 1px solid #EDEFF3;
  border-bottom: 0;
  margin-top: 15px;
  padding: 15px 0;
  gap:50px;
}
.nav-links.in-accordion > li{
  position: relative;
}
.nav-links.in-accordion > li:after{
  content: '';
  position: absolute;
  top:7px;
  bottom:4px;
  right: -25px;
  border-right: 1px solid rgba(42, 43, 113, 0.5);
}
.nav-links.in-accordion > li:last-child:after{display: none;}
.nav-links.in-accordion > li > a{
  font-size: 18px;
  font-weight: var(--fw-500);
}
.nav-links.in-accordion > li > a span{
  padding: 0;
}

.card-statistic{
  display: block;
  padding:20px;
  background-color: #D6E1FD;
  border-radius: 12px;
  box-shadow: 0px 0px 15px rgba(79, 155, 198, 0.2);
  color: var(--main);
}
.card-statistic .card-header{
  display: flex;
  align-items: center;
  gap:10px;
  margin-bottom:5px;
}
.card-statistic .card-header h4{
  font-size: 14px;
  font-weight: var(--fw-500);
  color: inherit;
}
.card-statistic .card-icon{
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}
.card-statistic .card-title{
  color: inherit;
  font-size:30px
}
.card-statistic .row > div{position: relative;}
.card-statistic .border-left:before{
  content: '';
  position: absolute;
  left: -10px;
  top: 5px;
  bottom: 5px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.title-line-left{
  position: relative;
  border-left: 4px solid var(--red);
  font-size: var(--fs-20);
  color: var(--main);
  padding: 2px 0 2px 10px;
  margin: 25px 0;
}

h4.title-line-left{
  border-left-width: 3px;
  font-size:18px;
}

.btn-download{
  border-radius: 0;
  gap:20px;
}
.btn-download p{
  margin: 0;
  line-height: 1.2;
  text-align: left;
}
.btn-download .icons{
  --icon-size:48px;
}

.share-icons{
  display: flex;
  gap:15px;
}
.share-icons .icons{
  --icon-size:40px
}
.share-icons a:hover{
  opacity: 0.8;
}

@media (max-width:1280px) {
  .card-accordion .card-header h2{
    font-size: 20px; 
  }
  .card-accordion .card-header,
  .card-accordion .card-body{
    padding-left: 20px;
    padding-right: 20px;
  }
  .nav-links.in-accordion{gap:30px}
  .nav-links.in-accordion > li:after{right: -15px;}
  .nav-links.in-accordion > li > a{
    font-size: 16px;
  }
}

@media (max-width:670px) {
  .card-accordion {
    margin-bottom: 20px;
  }
  .card-accordion .card-header {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .card-accordion .card-header h2{
    font-size:18px; 
  }
  .card-accordion .card-body:first-child {
    margin-top: 10px;
  }
  .card-accordion .card-body h3{
    font-size: 16px;
  }
  .card-accordion .card-body > p{
    margin-bottom: 15px;
  }
}

@media (max-width:575px) {
  .nav-links.in-accordion{
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
  }
  .card-accordion{margin-bottom: 15px;}
  .card-accordion .card-header h2{
    font-size: 16px;
  }
  .card-accordion .card-header .arrow{
    right: -10px;
    position: relative;
    width: 14px;
    height: 14px;
  }

  .btn-download{
    --btn-h:55px;
    gap:10px
  }
  .btn-download .icons{
    --icon-size:38px;
  }
  .btn-download p.fs-14{
    font-size: 12px !important;
  }
  .title-line-left{
    margin: 20px 0;
  }
}

@media (max-width:400px) {
  .card-statistic .card-title{
    font-size: 26px;
  }
}

/*==================================================
  scholarship
==================================================*/ 
.nav-sidebar-box{
  border: 1px solid #E8E8E8;
  border-radius: 12px;
  overflow: hidden;
}
.nav-sidebar-box .nav-sidebar li:last-child a{
  border-bottom: none;
}
.nav-sidebar{
  display: flex;
  flex-direction: column;
}
.nav-sidebar li a{
  display: flex;
  align-items: center;
  padding: 14px 20px;
  position: relative;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--title);
  border-bottom: 1px solid #E8E8E8;
}
.nav-sidebar li a:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border-right: 4px solid #0063ac;
  opacity: 0;
}
.nav-sidebar svg path[fill]{fill: #111;}

.nav-sidebar li.active svg path[fill],
.nav-sidebar li:hover svg path[fill]{fill: #fff;}
.nav-sidebar li.active a,
.nav-sidebar li:hover a{
  background-color: #0063ac;
  color: #fff;
}
.nav-sidebar li.active a:after{
  opacity: 1;
}
.nav-category {
  gap:5px;
  margin: 10px 0;
}
.nav-category .btn{
  --btn-h:29px;
  --bs-btn-bg:#F2F2F2;
  --bs-btn-color:#111;
  --bs-btn-hover-bg:#D6E1FD;
  --bs-btn-hover-color:var(--third);
  font-weight: var(--fw-400);
  padding: 0 15px;
  font-size: 14px;
}

.nav-category + .card-news-lists{
  padding-top:15px;
}

.form-check + .form-check{margin-top: 15px;}

.keyword-block{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid #DEE1E8;
  border-radius: 8px;
  padding: 10px;
  margin: 0;
  list-style-type: none;
  min-height: 48px;
  align-items: center;
}
.keyword-block li{
  border-radius: 4px;
  height: 34px;
  background-color: #EFEFEF;
  border: 1px solid #EDEDED;
  display: flex;
  align-items: center;
  gap:7px;
  padding: 0 10px;
  color: #111;
}
.keyword-block .del{
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 1;
  transition: all 0.25s;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/8px auto no-repeat; 
}
.keyword-block .del:hover{ 
  background: var(--red) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/8px auto no-repeat;
}
@media (max-width:575px) {
  .nav-sidebar li a{
    padding: 12px 15px;
    gap:8px
  }
  .nav-sidebar .icons{
    --icon-size:20px;
  }

  .nav-category .btn{
    --btn-h:27px;
    font-size: 13px;
    padding: 0 12px;
  }
  .nav-category + .card-news-lists{
    padding-top:12px;
  }

  .keyword-block{
    padding: 5px;
    gap:5px
  }
}

/*==================================================
  Table
==================================================*/ 
.table-responsive{
  border-radius: 8px;
  border: 1px solid #E7E7E7;
}
.table-info{
  --bs-table-color: #111111;
  --bs-table-bg: #fff;
  --bs-table-border-color: #E7E7E7; 
  --bs-table-accent-bg:#fff;
  --bs-table-hover-bg:#f9f9f9;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
  border-radius: 16px;
  margin: 0;
}
.table-info>:not(caption)>*>*{ 
  box-shadow: none;
}
.table-hover>tbody>tr:hover>* {
  background-color:var(--bs-table-hover-bg);
}
.table-info thead th{
  text-align: center; 
  font-weight: var(--fw-500); 
  padding: 10px 15px;
  background-color: #EDEFF3;
}

.table-info tbody td{ 
  padding: 10px 15px;
}
.table-info .icons.trash{
  --icon-size:20px
}
table p{margin: 0;}
.nav-steps{
  padding: 0;
  margin: 30px 0;
  list-style-type: none;
  display: flex;
  font-size: 14px;
}
.nav-steps li{
  flex: 1 1 auto;
  text-align: center;
  position: relative; 
}
.nav-steps li > a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:8px;
  position: relative;
  pointer-events: none;
}
.nav-steps li > a:before,
.nav-steps li > a:after{
  content: '';
  position: absolute;
  top: 28px;
  height:3px;
  background-color: #F0F0F0;
  width: 50%;
}
.nav-steps li > a:before{
  left: 0;
}
.nav-steps li > a:after{
  right: 0;
}

.nav-steps li:first-child > a:before{display: none;}
.nav-steps li:last-child > a:after{display: none;}
.nav-steps .number{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #F0F0F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:20px;
  color: #5D5D5D;
  position: relative;
  z-index: 10;
}
 
.nav-steps li.done a{pointer-events: all;}
.nav-steps li.active .number,
.nav-steps li.done .number{
  border: 2px solid #ffccce;
  background-color: #dc1f26;
  color: #fff;
}
.nav-steps li.active a,
.nav-steps li.done a{
  color: #111;
  font-weight: 600;
}
.nav-steps li.done > a:before,
.nav-steps li.done > a:after{background-color:var(--red);}
.nav-steps li.active > a:before{background-color:var(--red);}

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

@media (max-width:991.98px) {
  .nav-steps .number{
    width:50px;
    height:50px;
    font-size: 18px;
  }
  .nav-steps li > a:before,
  .nav-steps li > a:after{
    top: 25px;
  }

  .table-responsive table{white-space: nowrap;}
}

@media (max-width:575px) {
  .nav-steps{
    margin: 20px -20px; 
  }
}

@media (max-width:400px) {
  .nav-steps{
    margin: 20px -10px 10px; 
    font-size: 12px;
  }

  .nav-steps .number{
    width:45px;
    height:45px;
    font-size: 15px;
  }
}


/*==================================================
  News
==================================================*/ 
.section-news h2{
  color: #fff;
}

.section-news .card-news{
  border-radius: 15px;
  filter: drop-shadow(0px 6px 12px rgba(0, 99, 172, 0.6));
}

.section-news  .nav-links{
  gap: 15px;
}
.section-news .nav-links > li > a{
  font-size: var(--fs-16);
  background-color: transparent;
  color: #fff;
  padding: 2px 16px;
  border-radius: 20px;

}
.section-news .nav-links > li > a:hover, 
.section-news .nav-links > li > a.active{
  font-size: var(--fs-16);
  background-color: #BEDDF4;
  color: #2A2B71;
  padding: 2px 16px;
}

.section-news .link-viewall{
  color: #fff;
}

.section-news .link-viewall:hover{
  color: #BEDDF4;
}

.section-news .card-photo .photo, .section-news .card-photo{
  border-radius: 0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

/*==================================================
  scholarship
==================================================*/ 

.card-statistics{
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(79, 155, 198, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:15px 20px;
  color: var(--title);
  height: 100%;
}
.card-statistics p{
  margin: 0;
  font-size: 13px;
  font-weight: var(--fw-500);
  line-height: 1.2;
} 
.card-statistics .number{
  font-size: 42px;
  color: var(--main);
}
.card-statistics .icons{
  --icon-size:34px
}
.card-statistics .card-group{
  display: flex;
  flex-direction: column;
  gap:7px
}
.card-primary{
  display: block;
  background-color: #F5F8FB;
  padding: 30px;
  border-radius: 12px;
}
.card-secondary{
  display: block;
  background-color: #D6E1FD;
  padding:25px 30px 20px;
  border-radius: 12px;
}

.card-secondary .table-info th,
.card-secondary .table-info td{
  padding: 6px 0;
  font-weight: var(--fw-500);
  color: var(--main);
}

.card-gray{
  padding:25px 30px 20px;
  border-radius: 12px;
  background-color: #EDEFF3;
}
.table-form-infos{
  width: 100%;
  --text-color:var(--main);
  --title-color:var(--title);
  --table-bg:#F2F3FF;
  font-size: var(--fs-16);
}
.table-form-infos th,
.table-form-infos td{
  font-weight: var(--fw-500);
  padding:12px;
}
.table-form-infos th{color: var(--title-color);}
.table-form-infos td{color: var(--text-color); text-align: right;}

.table-form-infos tr:nth-child(odd) th,
.table-form-infos tr:nth-child(odd) td{background-color:var(--table-bg);}
@media (max-width:575px) {
  .card-statistics .number{
    font-size: 35px;
  }

  .card-secondary{
    padding: 20px 20px 30px;
  }

  .table-form-infos th,
  .table-form-infos td{
    display: block;
    width: 100%;
  }
  .table-form-infos td{
    text-align: left;
    padding-top: 0;
  }
  .table-form-infos th {
    padding-bottom: 0;
  }
}

/*==================================================
  Overview
==================================================*/ 

.title-line-left.fs-28{
  font-size: var(--fs-28);
  border-left-width: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.article-item{
  font-size: var(--fs-16);
  color: var(--body-2);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;

  --col-left:345px; 
}
.article-item .title-line-left{
  margin-top: 0;
}
.article-item .cols.left{
  width: var(--col-left);
}
.article-item .cols.right{
  width: calc(100% - var(--col-left));
  padding-left: 20px;
}
.article-item p:last-child{margin-bottom: 0;}

.card-story{
  display: flex;
  position: relative;
  margin: 70px 0 50px;
}
.card-story .card-photo,
.card-story .card-body{
  width: 50%;
  position: relative;
}
.card-story .card-photo{
  margin-bottom:auto;
  background-color: #ccc;
  z-index: 100;
}
.card-story .card-body{
  padding-left: 40px;
  padding-right:40px;
  font-size: var(--fs-16);
}

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

.card-story .card-body:before{
  content: '';
  position: absolute;
  top: -35px;
  left: -30%;
  right: 0;
  bottom: -35px;
  z-index: -1;

  background-color: #edf1fa;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/thumb/story-bg.jpg);
}

.card-story .title-line-left{
  margin: 0 0 25px;
}

@media (max-width:1280px) {
  .card-story .card-body{
    padding-left: 30px;
    padding-right: 30px;
  }
  .card-story .title-line-left{
    margin-bottom: 20px;
  }
}

@media (max-width:1199px) {
  .article-item{
    --col-left:305px; 
  } 
}

@media (max-width:991.98px) {
  .article-item{
    flex-direction: column;
  } 
  .article-item .cols.left{
    width: 100%;
  }
  .article-item .cols.right{
    padding-left: 0;
    padding-top: 30px;
    width: 100%;
  }

  .title-line-left.fs-28{margin-bottom: 15px;}

  .card-story {
    flex-direction: column;
    margin-top: 30px;
  }

  .card-story .card-photo,
  .card-story .card-body{
    width:100%;
  }

  .card-story .card-body{
    padding: 40px 0 40px;
  }

  .card-story .card-body:before{
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: 0;
  }
}

@media (max-width:575px) {
  .card-story .card-body{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .card-story{margin-bottom: 25px;}
}

 
/*==================================================
  Mission
==================================================*/ 

.card-mission{
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  padding: 20px;
  height: calc(100% - 10px);
  margin-bottom: 10px;
}
.card-mission h3{
  font-size: var(--fs-18);
  margin-bottom:4px;
}
.card-mission p{
  margin: 0 0 5px;
  font-size: var(--fs-16);
}
.card-mission .card-icon{
  margin-bottom: 18px;
  margin-top: 5px;
}
.card-mission .icons{
  --icon-size:60px;
}

.mission-banner{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px 0;
  margin: 40px 0 50px;
  height: 350px;
  text-align: center;
}
.mission-banner h2{
  font-size: 36px;
  font-weight: var(--fw-600);
  color: #fff;
}
.mission-banner h3{
  font-size: var(--fs-28);
  font-weight: var(--fw-500);
  color: #fff;
}

@media (max-width:1280px) {
  .mission-banner{
    height: 300px;
  }
  .mission-banner h2{
    font-size:30px
  }
}

@media (max-width:991.98px) {
  .card-mission{margin-bottom: 0; height: 100%;}

  .mission-banner{
    margin: 50px 0;
    height: 260px;
  }
}


@media (max-width:575px) { 
  .card-mission h3{
    font-size: 16px;
  }
  .card-mission p{
    font-size: 14px;
  }
  .mission-banner{
    height: 220px;
    margin:40px 0;
  }
  .mission-banner h2{
    font-size:24px
  }
}

/*==================================================
  Footer
==================================================*/ 

.footer{
  background-color:#E2ECF4;
  color: #386B91;
  padding: 35px 0;
  font-size: 14px;
}
.footer .container{
  display: flex;
  flex-wrap: wrap;
}
.footer-logo{
  display: flex;
  gap:20px;
  align-items: center;
  width: 100%;
  margin-bottom:35px;
}
.footer-logo h5{
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-500);
}
.footer-logo p{
  margin: 0;
  font-size: 10px;
}
.footer-logo .logo{
  width: 450px;
  height: auto;
}
.footer-info h3{
  color: #004477;
  font-size: 20px;
  margin-bottom: 10px;
}
.footer-info p{
  max-width: 457px;
  margin: 0;
}
.footer-links {
  width: 100%;
  max-width:900px;
  margin-left: auto;
  padding-left: 40px;
  display: flex;
  justify-content: space-between;
}
.footer-links h4{
  font-size: 18px;
  margin-bottom: 5px;
  color: #004477;
}
.footer-links .cols.w-340{max-width: 340px; width: 100%;}

.footer-links hr{
  border-color: #B1CEE4;
  margin: 20px 0;
}
.nav-footer{
  flex-direction: column;
}
.nav-footer li a{
  display: inline-block;
  padding:5px 0;
}
.nav-footer li a:hover{
  opacity: 0.5;
}
.footer-links .tel{
  margin: -10px 0 0 0;
  font-weight: var(--fw-500);
  font-size: 30px;
}

.followus{
  display: flex;
  gap:15px;
}
.followus a:hover{
  opacity: 0.5;
}
.followus.blue-dark svg{opacity: 1;}
.followus.blue-dark svg:not(.twitter) path[fill]{fill: var(--main);}
.followus.blue-dark svg:not(.twitter) path[stroke]{stroke: var(--main);}
.followus.blue-dark svg.twitter g path[fill]{fill: var(--main);}
 
.footer-copyright{
  background-color: #0063AC;
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 15px 0;
}
.footer-copyright p{
  margin: 0;
}
@media (max-width:1480px) {
  .footer-info{width: 40%;}
  .footer-links{width: 60%;}
  .footer-links .cols.w-340{max-width: 280px;}
}

@media (max-width:1199px) {
  .footer-info,
  .footer-links{
    width: 100%;
    max-width: 100%;
    padding-left: 0;
  }

  .footer-links{
    padding-top:35px;
  }
}

@media (max-width:991.98px) {
  .footer-info h3{font-size: 18px;}
  .footer-links .tel{font-size: 26px;}
}
@media (max-width:767px) {
  .footer-links .cols.w-340{
    max-width: none;
    width: auto;
  }
}

@media (max-width:575px) {
  .footer-logo{gap:10px}
  .footer-logo .logo{width: 80px;}
  .footer-links {flex-wrap: wrap;}
  .footer-links .cols:nth-child(1){width: 65%;}
  .footer-links .cols:nth-child(2){width: 35%; padding-top:30px;}
  .footer-links .cols:nth-child(3){width: 100%; padding-top: 35px;}

  .footer-info h3,
  .footer-links h4{
    font-size: 16px;
  }

  .footer-copyright{
    font-size: 10px;
  }
}



.nav-lang .dropdown-menu > li > a:hover{
  color: var(--main) !important;
}
@media (max-width: 575px) {
  .nav-lang {
    display: none;
  }
}

.input-group .btn:not(.d-none) {
  --btn-h: inherit !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.form-check-inline {
  display: inline-block !important;
}
.form-check-inline .form-check-label {
  padding-left: 10px;
}
.form-group h6 {
  color: var(--main);
  font-size: 0.9rem;
}


/*==================================================
Faq
==================================================*/
.faq-row{
  --bs-gutter-x:35px;
  --bs-gutter-y:35px;
}
.card-faq{
  display: flex;
  border: 1px solid #DBDBDB;
  border-radius: 8px;
  padding: 15px;
}
.card-faq .icons{
  --icon-size:30px;
  margin-right:20px;
  margin-left:8px;
}
.card-faq .icons path[fill]{fill: var(--main);}
.card-faq h3{
  font-size: var(--fs-18);
  transition: all 0.25s;
}
.card-faq p{
  margin: 0;
  font-weight: var(--fw-300);
}
.card-faq.active,
.card-faq:hover{
  border-color: #0063AC;
  background-color: var(--main);
  color: #fff;
}
.card-faq.active h3,
.card-faq:hover h3{color: #fff;}
.card-faq.active .icons path[fill],
.card-faq:hover .icons path[fill]{fill:#fff;}

.card-faq.hgroup{
  pointer-events: none;
  border: 0;
  padding: 0;
}
.card-faq.hgroup h2{
  font-size:24px;
  color:var(--main);
  font-weight: var(--fw-500);
}
.card-faq.hgroup .icons{
  --icon-size:50px;
}


.accordion-faq{
  display: flex;
  flex-direction: column;
  padding: 0 0;
  margin-bottom: 80px;
  margin-top:30px;
  border-top: 1px solid #DBDBDB;
}

.accordion{
  --bs-accordion-border-width:0;
  --bs-accordion-border-radius:0;
  --bs-accordion-bg:#fff;
  --bs-accordion-body-padding-x:0;
  --bs-accordion-body-padding-y:20px;
}

.accordion-item{
  border-radius: var(--bs-accordion-border-radius);
  border-bottom: 1px solid #DBDBDB;

}

.accordion-header{
  background-color: var(--bs-accordion-bg);
  border-radius: var(--bs-accordion-border-radius);
  padding:20px var(--bs-accordion-body-padding-x);

  font-size: 18px;
  color:var(--main);
  display: flex;
  gap:15px;
  justify-content: space-between;
  font-weight: var(--fw-500);
  cursor: pointer;
  transition: all 0.25s;
}

.accordion-header .icons{
  border-radius: 50%;
  border:2px solid #0063AC;
  --icon-size:20px;
}
.accordion-header .icons:before,
.accordion-header .icons:after{
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: #0063AC;
  transition: all 0.25s;
}
.accordion-header .icons:after{
  transform: rotate(-90deg);
}
.accordion-header[aria-expanded="true"] .icons:before{
  transform: rotate(90deg);
}
.accordion-header:hover{color: var(--main);}
.accordion-body{
  font-size: var(--fs-16);
  padding: 0 0 10px;
}


@media (max-width:1199px) {
  .card-faq{
    padding: 10px;
  }
  .card-faq .icons {
    --icon-size:24px;
    margin-right:12px;
    margin-left:5px;
  }
  .card-faq h3{font-size: 16px;}
  .card-faq p{font-size: 14px;}

  .card-faq.hgroup{margin-top: 25px;}
  .card-faq.hgroup .icons{
    --icon-size:40px
  }
  .card-faq.hgroup h2{font-size: 20px;}
  .faq-row {
    --bs-gutter-x: 25px;
    --bs-gutter-y: 25px;
  }
}

@media (max-width:575px) {
  .accordion-header{
    font-size: 16px;
    color: var(--main) !important;
  }
}

/* 2025/05/24 */
label.title {
  padding-bottom: 5px;
  font-size: inherit;
  font-weight: var(--fw-400);
  color: var(--text-title);
  display: block;
}
.googlemap {
  height: 400px;
  position: relative;
  margin: 60px 0 20px;
}
.googlemap iframe {
  width: 100%;
  height: 100%;
}
.card-contact-infos .hgroup .logo {
  width: 200px;
  height: auto;
  margin-bottom: 2px;
}
.contact-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-weight: var(--fw-400);
}
.contact-list li {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1366px) {
  .contact-list .icon-circle {
    width: 48px;
    height: 48px;
  }
}
.contact-list .icon-circle {
  background-color: var(--main-bg);
  border-radius: 50%;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/*==================================================
    Open Data preview pages (/service, /open-data, /open-data/detail/*)
    Styles for: application/views/front/th/service.php,
    open-data.php, open-data-detail.php
    Ported from 06082026/screens mockup (09-landing.html,
    51-opendata.html, 52-opendata-detail.html), colors/spacing
    hardcoded to match this site's existing theme values.
    Layout (row/col, grid) uses Bootstrap; these are the mockup's
    own component/utility classes that Bootstrap doesn't provide.
==================================================*/
.btn-primary-cta {
  background: #DC1F26;
  color: #fff;
  border-radius: 80px;
  padding: 0 20px;
  height: 44px;
}
.btn-dark {
  background: #222222;
  color: #fff;
  border-radius: 80px;
  padding: 10px 30px;
}

/* Reusable card + hover-lift, shared by feature-card/news-card/dataset-card
   and the open-data pages' own .card wrapper */
.card {
  background: #fff;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 24px;
}
.card.shadow-sm { transition: transform .2s, box-shadow .2s; }
.card.shadow-sm:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

/* service.php */
.hero-landing {
  background: linear-gradient(135deg, #004477, var(--color-primary));
  padding: 80px 24px;
  text-align: center;
  color: #fff;
}
.hero-landing h1 { font-size: 32px; color: #fff; margin-bottom: 16px; }
.hero-landing p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  max-width: 700px;
  margin: 0 auto 24px;
}
.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.section-title { text-align: center; margin-bottom: 32px; }
.section-title h2 { font-size: 24px; border: none; }
.section-title p { color: #8E8E8E; margin-top: 8px; }
.feature-card { text-align: center; height: 100%; }
.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon svg { width: 30px; height: 30px; color: #fff; }
.feature-card h3 { font-size: 16px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: #8E8E8E; }
.stats-section { background: #F7F9FB; padding: 48px 0; }
.stats-grid { text-align: center; }
.stat-item .stat-number { font-size: 32px; font-weight: 700; color: var(--color-primary); }
.stat-item .stat-text { font-size: 14px; color: #8E8E8E; margin-top: 4px; }
.news-card { padding: 0; overflow: hidden; height: 100%; }
.news-img { height: 200px; overflow: hidden; }
.news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 20px; }
.news-body .date { font-size: 12px; color: #8E8E8E; margin-bottom: 8px; }
.news-body h4 { font-size: 16px; margin-bottom: 8px; }
.news-body p { font-size: 14px; color: #8E8E8E; }
@media (max-width: 767px) {
  .hero-landing h1 { font-size: 24px; }
}

/* open-data.php + open-data-detail.php */

/* Utility classes (mockup's own, not Bootstrap's) */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
.text-center { text-align: center; }
.text-muted { color: #5D5D5D; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-6 { margin-top: 24px; }

.format-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.format-json { background: #E8FFF3; color: #0BB783; }
.format-csv { background: #FFF8DD; color: #B58B00; }
.format-api { background: #EEF6FF; color: var(--color-primary); }

.dataset-card { padding: 20px; height: 100%; }
.dataset-card h4 { font-size: 16px; margin-bottom: 8px; }
.dataset-meta { display: flex; font-size: 12px; color: #8E8E8E; margin-top: 12px; }
.dataset-meta .w-33 { width: 33.333%; }
.text-right { text-align: right; }

.opendata-stat-grid { margin: 24px 0; }
.opendata-stat-value { font-size: 20px; font-weight: 700; }
.opendata-stat-label { font-size: 12px; color: #8E8E8E; }
.chart-placeholder { height: 200px; background: #F7F9FB; border: 2px dashed #DBDBDB; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8E8E8E; font-size: 14px; }

/* Tabs (visual only, no panel-toggle JS — same as the mockup itself) */
.tabs { display: flex; border-bottom: 2px solid #DEE1E8; margin-bottom: 20px; }
.tab { padding: 12px 20px; font-size: 14px; font-weight: 500; color: #8E8E8E; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; }
.tab:hover { color: var(--color-primary); }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.data-table { width: 100%; border-collapse: collapse; background: #fff; }
.data-table thead th { color: #5A7492; font-size: 14.4px; font-weight: 400; padding: 12px 7px; border-bottom: 1px solid #ECEFF1; text-align: left; }
.data-table tbody td { color: #5A7492; font-size: 14.4px; padding: 7px; vertical-align: middle; border-bottom: 1px solid #F5F8FA; }
.data-table tbody tr:hover { background: #F5F8FA; }
.table-info { color: #5A7492; font-size: 13px; text-align: right; padding: 12px 0; }
.page-title { color: var(--color-primary); font-size: 18px; font-weight: 600; border-left: 3px solid #EE3943; padding-left: 10px; margin-bottom: 24px; }

.api-box { background: #1E1E1E; color: #D4D4D4; border-radius: 8px; padding: 16px; font-family: monospace; font-size: 13px; overflow-x: auto; }
.api-box .method { color: #4EC9B0; }
.api-box .url { color: #CE9178; }

/* Sign-in "or sign in with" divider */
.divider{ display:flex; align-items:center; margin:20px 0; color:var(--body); font-size:14px; }
.divider::before, .divider::after{ content:""; flex:1; border-bottom:1px solid #DEE1E8; }
.divider span{ padding:0 12px; }

/* Forgot-password icon above title */
.forgot-icon{ width:64px; height:64px; background:#FFF8DD; border-radius:50%; margin:0 auto 15px; display:flex; align-items:center; justify-content:center; font-size:28px; }

/* Reset-password icon + password rules checklist above title */
.reset-icon{ width:64px; height:64px; background:#EEF6FF; border-radius:50%; margin:0 auto 15px; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--main); }
.strength-bar{ height:4px; background:#DEE1E8; border-radius:2px; margin-top:8px; overflow:hidden; }
.strength-fill{ height:100%; width:0%; background:#50CD89; border-radius:2px; transition:width 0.2s ease-in-out; }
.password-rules{ font-size:var(--fs-12); color:var(--body); margin-top:5px; padding-left:18px; }

/* 404 / 403 error pages */
.error-page{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.error-code{ font-size:120px; font-weight:800; line-height:1; margin-bottom:15px; }
.error-code.error-404{ color:var(--main); }
.error-code.error-403{ color:var(--red); }
.error-title{ font-size:28px; color:var(--title); margin-bottom:10px; }
.error-desc{ font-size:16px; color:var(--body); margin-bottom:30px; max-width:480px; }
.error-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.error-actions .btn{ height:48px; padding:0 32px; border-radius:80px; }
.btn-outline{ background:transparent; border:1px solid var(--main); color:var(--main); }
.btn-outline:hover{ background:var(--main); color:#fff; }

/* Signup type selector role cards */
.role-options{ display:flex; flex-direction:column; gap:15px; margin:20px 0; }
.role-card{ border:2px solid #DEE1E8; border-radius:8px; padding:20px; cursor:pointer; transition:border-color .2s, background .2s; }
.role-card:hover{ border-color:var(--main); background:#EEF6FF; }
.role-card.selected{ border-color:var(--main); background:#EEF6FF; }
.role-card h4{ color:var(--title); margin-bottom:5px; }
.role-card p{ font-size:var(--fs-14); color:var(--body); margin-bottom:0; }
.role-card input[type="radio"]{ display:none; }

/* Signup form step indicator (visual only) */
.step-indicator{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:30px; }
.step-indicator .step{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-14); font-weight:var(--fw-600); }
.step-indicator .step.completed{ background:var(--main); color:#fff; }
.step-indicator .step.active{ background:var(--red); color:#fff; }
.step-indicator .step.pending{ background:#DEE1E8; color:var(--body); }
.step-indicator .step-line{ width:40px; height:2px; background:#DEE1E8; }
.step-indicator .step-line.done{ background:var(--main); }
.api-box .comment { color: #608B4E; }

/* Member profile header (/member/profile) */
.profile-header{ display:flex; align-items:center; gap:20px; margin-bottom:25px; padding-bottom:25px; border-bottom:1px solid #E8E8E8; flex-wrap:wrap; }
.profile-avatar{ width:80px; height:80px; border-radius:50%; background:var(--main); display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; font-weight:var(--fw-600); flex-shrink:0; overflow:hidden; }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-avatar.lg{ width:120px; height:120px; font-size:44px; }
.profile-info h4{ margin-bottom:2px; color:var(--title); }
.profile-info .role-badge{ display:inline-block; padding:3px 12px; background:#EEF6FF; color:var(--main); border-radius:50px; font-size:var(--fs-14); font-weight:var(--fw-500); }
.profile-info .member-since{ font-size:var(--fs-14); color:var(--body); margin:8px 0 0; }
.profile-header .buttons{ margin-left:auto; }

/* Account linking (/member/linking) */
.account-card{ border:1px solid #DEE1E8; border-radius:8px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; margin-bottom:15px; }
.account-card .account-info{ display:flex; align-items:center; gap:15px; }
.account-icon{ width:48px; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:var(--fw-600); color:#fff; flex-shrink:0; }
.account-icon.email{ background:var(--main); }
.account-icon.thaid{ background:#1B4F93; }
.account-detail h4{ font-size:var(--fs-16); margin-bottom:2px; color:var(--title); }
.account-detail p{ font-size:var(--fs-14); color:var(--body); margin:0; }
.linked-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:50px; font-size:var(--fs-14); font-weight:var(--fw-500); }
.linked-badge.connected{ background:#E8FFF3; color:#0BB783; }
.linking-info-box{ background:#EEF6FF; border:1px solid #B8D4F0; border-radius:8px; padding:15px; font-size:var(--fs-14); color:var(--title); margin-top:25px; }

/* Activity log (/member/activity) */
.activity-badge{ display:inline-block; padding:4px 12px; border-radius:50px; font-size:var(--fs-12); font-weight:var(--fw-500); white-space:nowrap; }
.activity-badge.login{ background:#EEF6FF; color:var(--main); }

/* Status badge — reused across dashboard, proposals, appointments */
.status-badge{ display:inline-block; padding:4px 12px; border-radius:50px; font-size:var(--fs-12); font-weight:var(--fw-500); white-space:nowrap; }
.status-badge.info{ background:#EEF6FF; color:var(--main); }
.status-badge.warning{ background:#FFF4E5; color:#B76E00; }
.status-badge.success{ background:#E8FFF3; color:#0BB783; }
.status-badge.danger{ background:#FDEAEA; color:#DC1F26; }

/* Member dashboard (/member) */
.dashboard-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:20px; }
.dash-stat{ background:#fff; border-radius:12px; padding:20px; box-shadow:0px 0px 20px rgba(0, 0, 0, 0.05); }
.dash-stat .stat-icon{ width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; margin-bottom:12px; }
.dash-stat .stat-value{ font-size:var(--fs-28); font-weight:var(--fw-700); color:var(--title); }
.dash-stat .stat-label{ font-size:var(--fs-14); color:var(--body); margin-top:2px; }
.dashboard-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dashboard-section-card{ background:#fff; border-radius:12px; padding:20px; margin-bottom:20px; box-shadow:0px 0px 20px rgba(0, 0, 0, 0.05); }
.dashboard-section-card .section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.dashboard-section-card .section-head h5{ margin:0; color:var(--title); }
.dashboard-recent-list{ list-style:none; margin:0; padding:0; }
.dashboard-recent-list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #EDEFF3; }
.dashboard-recent-list li:last-child{ border-bottom:0; padding-bottom:0; }
.dashboard-recent-list .title{ font-size:var(--fs-14); font-weight:var(--fw-500); color:var(--title); }
.dashboard-recent-list .subtitle{ font-size:var(--fs-12); color:var(--body); margin-top:2px; }
.dashboard-notification-item{ display:flex; gap:10px; padding:12px 0; border-bottom:1px solid #EDEFF3; }
.dashboard-notification-item:last-child{ border-bottom:0; padding-bottom:0; }
.dashboard-notification-item .notif-dot{ width:8px; height:8px; border-radius:50%; background:#DC1F26; margin-top:6px; flex-shrink:0; }
.dashboard-notification-item .notif-dot.read{ background:#DEE1E8; }
.dashboard-notification-item .title{ font-size:var(--fs-14); font-weight:var(--fw-500); color:var(--title); }
.dashboard-notification-item.read .title{ font-weight:var(--fw-400); }
.dashboard-notification-item .subtitle{ font-size:var(--fs-12); color:var(--body); margin-top:2px; }
@media (max-width:991.98px){
  .dashboard-stats{ grid-template-columns:repeat(2, 1fr); }
  .dashboard-two-col{ grid-template-columns:1fr; }
}
@media (max-width:575px){
  .dashboard-stats{ grid-template-columns:1fr; }
}

/* Notifications (/member/notification) */
.notif-actions{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.notif-filters{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.notif-filter{ padding:6px 16px; border:1px solid #DEE1E8; border-radius:50px; font-size:var(--fs-14); background:#fff; color:var(--body); }
.notif-filter.active{ background:var(--main); color:#fff; border-color:var(--main); }
.notif-list{ list-style:none; margin:0; padding:0; }
.notif-item{ display:flex; gap:15px; padding:15px; border-bottom:1px solid #EDEFF3; }
.notif-item:last-child{ border-bottom:0; }
.notif-item.unread{ background:#F0F7FF; border-radius:8px; }
.notif-icon{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.notif-content{ flex:1; }
.notif-content .title{ font-size:var(--fs-14); font-weight:var(--fw-500); color:var(--title); margin-bottom:2px; }
.notif-content .desc{ font-size:var(--fs-14); color:var(--body); }
.notif-content .time{ font-size:var(--fs-12); color:var(--body); margin-top:4px; }

/* Provider dashboard (/member — member_type = provider) */
.chart-placeholder{ height:200px; background:#F5F8FB; border:2px dashed #DEE1E8; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--body); font-size:var(--fs-14); }

/*==================================================
    Provider directory (public, /provider, /provider/detail/*)
    TOR 4.16.9 — ported from 06082026/screens/provider/21-search.html,
    22-detail.html; layout uses Bootstrap row/col + real theme
    section-banner, only the mockup's own utility/component classes
    not covered by Bootstrap are added here.
==================================================*/
.gap-4 { gap: 16px; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.provider-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--main); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.provider-avatar-lg { width: 72px; height: 72px; font-size: 28px; }
.info-table { width: 100%; }
.info-table td { padding: 8px 0; font-size: var(--fs-14); border-bottom: 1px solid #ECEFF1; vertical-align: top; }
.info-table td:first-child { color: var(--body); width: 200px; font-weight: var(--fw-500); }
.info-table td:last-child { color: var(--title); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-card { border: 1px solid #ECEFF1; border-radius: 8px; padding: 16px; }
.product-img { height: 120px; background-color: #F5F8FB; background-size: cover; background-position: center; border-radius: 6px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; color: var(--body); font-size: var(--fs-14); }
.product-card h4 { font-size: var(--fs-14); margin-bottom: 4px; }