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

html,body{
  padding: 0;
  margin: 0;
  height: 100%;
  scroll-behavior:unset !important
}

body{
  margin:0;
  padding:0;

  position: relative;
  overflow-x: hidden;

  /* overscroll-behavior:unset !important;
  filter: grayscale(80%); */
}

:root {

  --bs-body-color:#545454; /*646464*/
  --bs-body-bg:#fff;
  --bs-body-text-align:left;
  --bs-body-font-weight:var(--fw-300);
  --bs-body-line-height:1.55;
  --bs-body-font-size:16px;
  --bs-body-font-family:"Noto Sans Thai", sans-serif;
  --bs-link-hover-color:inherit;

  --fs-48:48px;
  --fs-36:36px;
  --fs-30:30px;
  --fs-26:26px;
  --fs-24:24px;
  --fs-20:20px;
  --fs-18:18px;
  --fs-16:16px;
  --fs-14:14px;
  --fs-12:12px;

  --text-body:#545454;
  --text-title:#111111;
  --medium-gray:#767676;
  --light-gray:#DBDBDB;
  --light:#F1F3FF;
  --stroke:#E5E8F4;

  --red:#DC1F26;
  --white:#fff;
  --blue-main:#003AAC;
  --blue-dark:#032478;
  --blue-light:#ACC3FF;
  --blue:#0063AC;
  --green:#2EA7AB;
  --yellow:#EF951B;
  --toppage-bg:#2F2878;

  --g-red:linear-gradient(135deg, #E70A12 0%, #8B0308 100%);
  --g-gray:linear-gradient(135deg, #FDFDFD 0%, #F0F0F0 100%);;

  --animation-primary: 0.4s cubic-bezier(.75, 0, .25, 1);
  --animation-navigation-fade: 0.3s ease-in-out;

  --navbar-brand-height:55px;
  --navbar-menu-height:46px;
  --navbar-toppage-height:80px;

  --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;

}

@media (max-width:1550px) {
  :root{
    --padding-90:70px;
    --fs-36:32px;
  }
}

@media (max-width:1280px) {
  :root{

    --fs-36:28px;
    --fs-30:26px;
    --fs-24:22px;
    --fs-18:16px;
    --fs-16:15px;
    --bs-body-font-size:15px
  }
}

@media (max-width:991.98px) {
  :root{
    --fs-36:30px;
  }

}

@media (max-width:670px) {
  :root{
    --navbar-brand-height:45px;
    --navbar-toppage-height:75px;

    --fs-36:24px;
    --fs-30:22px;
    --fs-24:20px;
  }
}
@media (max-width:575px) {
  :root{
    --navbar-brand-height:35px;
    --navbar-toppage-height:70px;

    --fs-36:22px;
    --fs-30:20px;
    --fs-24:18px;
  }
}
.modal-open{
  touch-action: none;
  overscroll-behavior: contain;
}

.modal-backdrop{
  overscroll-behavior: contain;
  --bs-backdrop-opacity: 0.6;
  --bs-backdrop-zindex: 1051;
}

a{
  color:inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none;   }
.form-control,
.form-select,
.form-selects{
  --input-border:#D7E4FB;
  --input-border-focus:#C4D9FF;
  --input-bg:#FBFCFF;

  --input-h:46px;
  -webkit-appearance: none;
  padding:0 15px;

  font-weight:var(--fw-400);
  font-family:inherit;
  font-size: var(--fs-16);
  border: 1px solid var(--input-border);
  color: var(--text-body);
  height:var(--input-h);
  line-height:calc(var(--input-h) - 0px);
  background-color:var(--input-bg);
  border-radius:8x;

  -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;
}

.input-stroke-gradient{
  position: relative;
  border-radius: 7px;
  border: 1px solid transparent;
  background-color: #12131A;
  --bg-before: linear-gradient(180deg, #8C93AD 0%, #4F4565 100%);
  --bg-after:#12131A;
}
.input-stroke-gradient:before,
.input-stroke-gradient:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  transition: all 0.45s;
}
.input-stroke-gradient:before {
  z-index: -1;
  margin: -2px;
  opacity: 1 !important;
  background: var(--bg-before);
}
.input-stroke-gradient:after {
  z-index: 2;
  opacity: 1;
  background: var(--bg-after);
}
.input-stroke-gradient .form-control,
.input-stroke-gradient .form-select{
  border: 0;
  outline:0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  color: #fff;
  position: relative;
  z-index: 13;
  padding-left: 15px;
}
.form-control::placeholder {
  opacity:1;
  color:#797474;
}

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

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

.form-control.disabled,
.form-control:disabled,
.form-control[readonly],
.form-select.disabled,
.form-select:disabled,
.form-select[readonly] {
  background-color: #F6F7F9 !important;
  border-color: #F6F7F9;
  color: #A3A3A3;
}

.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='%23B8ADAD' 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: 12px;
  background-repeat: no-repeat;
}

.form-select{padding-right: 35px;}

.form-control:focus,
.form-select:focus{
  background-color: transparent !important;
  outline: 0;
  box-shadow:none;
  border-color:var(--input-border-focus);
}
.form-control.dark:focus,
.form-select.dark:focus{
  background-color: #09255C;
  border-color:#4580EF;
}
textarea.form-control{
  height: 120px;
  line-height: normal;
  padding-top: 10px;
}

.form-select:not(.selected){color:#A3A3A3}
.form-select.dark:not(.selected){color:#fff}

.form-select.dropdown  [data-bs-toggle]:after{margin-left: auto;}
.form-select.dropdown{z-index: auto;}
.form-select.dropdown .dropdown-menu{
  left: 0;
  z-index: 100;
  margin-top: 1px;
  padding: 0;
  box-shadow: 0 0px 10px rgba(199, 199, 227, 0.3);
  --bs-dropdown-border-width:1px;
  overflow: hidden;
}

.form-select.dropdown .dropdown-menu li{
  display: block;
  line-height: normal;
  padding:5px 15px;
  margin: 0;
  font-size: var(--fs-14);
}
.form-select.dropdown .dropdown-menu li:hover{
  background-color: #f1f1f1;
}
.form-select.dropdown .dropdown-menu li.active{
  background-color: #767676;
  pointer-events:none;
  color: #fff;
}
.form-check {
  position: relative;
  padding-left:0;
  display: flex;
  gap: 10px;
}
.form-check-input{
  width:20px;
  height:20px;
  border-width:1.5px;
  position: relative;
  margin:2px 0 0;
  margin-left: 0 !important;
  flex-shrink: 0;
  border-color:var(--medium-gray);
  box-shadow: none !important;
}
.form-check-input[type=checkbox],
.form-check-input[type=radio].square{
  border-radius: 4px;
}
.form-check-input[type=radio],
.form-check-input[type=checkbox].circle{
  border-radius: 50%;
  border-width: 2px;
}

.form-check-input[type=radio]:checked,
.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='2.8' fill='%230063AC'/%3e%3c/svg%3e");
  border-color:var(--blue);
  /*fill='%230063AC'*/
}
.form-check label{
  margin-bottom:0;
  font-weight: var(--fw-400);
  font-size: var(--fs-15);
}
.form-check-input:checked[type=checkbox],
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent;
}

.form-check-input:checked[type=checkbox],
.form-check-input:checked[type=radio].square{
  background-image: 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='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-color:var(--blue);
  border-color:var(--blue);
}

.form-check-input:checked + .text-active-black{color:#1B204C; font-weight: var(--fw-500);}
.form-check label strong{font-weight: var(--fw-500);}
.form-switch{min-height: 0 !important; }
.form-switch .form-check-input{
  width: 44px !important;
  border-radius: 50px;
  height: 24px;
  box-shadow: none !important;
  outline: 0 !important;
}
.form-switch .form-check-input[type=checkbox]{
  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='%23fff'/%3e%3c/svg%3e");
  background-size: 22px;
  border-radius: 50px;
  background-color:#D6D6D6;
  border-color:#D6D6D6;
}
.form-switch .form-check-input:checked[type=checkbox]{
  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='%23fff'/%3e%3c/svg%3e");
  background-position:center right;
  background-color:#00DD9C;
  border-color:#00DD9C;
  background-size: 22px;
}

.form-switch .form-check-label{
  font-size: var(--fs-14);
  color: #A3AED0;
}
.form-switch .form-check-label  > span:nth-child(1){display: none;}
.form-switch .form-check-label  > span:nth-child(2){display: block;}
.form-switch .form-check-input:checked + .form-check-label  > span:nth-child(1){display: block;}
.form-switch .form-check-input:checked + .form-check-label  > span:nth-child(2){display: none;}

.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-select [data-bs-toggle].selected{opacity: 1;}
.form-select [data-bs-toggle] .icons{top: -2px;}

.form-group .form-select [data-bs-toggle]{color: #A1B1BA; opacity: 1;}
.form-group .form-select [data-bs-toggle].selected{color: #1F1F1F;}
.form-group .form-select [data-bs-toggle]::after{display: none;}
.form-group{
  display: block;
  position: relative;
}

label.title{
  padding-bottom:5px;
  font-size: inherit;
  font-weight: var(--fw-400);
  color: var(--text-title);
  display: block;
}

.form-group span.error{
  color:#FF3E40;
  padding-top: 8px;
  display: block;
  font-size: var(--fs-12);
  font-weight: 400;
}

.form-group .group{
  position: relative;
  display: block;
}
.form-group .icons.left,
.form-group .icons.right{
  position: absolute;
  top: 0 !important;
  right: 11px;
  width:23px;
  height:auto;
  bottom: 0 !important;

  transition: none;
  z-index: 20;
}

.form .form-group .icons.left,
.form .form-group .icons.right{height: 46px;}
.form-group .icons.left{
  left: 12px;
  right: auto;
}
.form-group .icons.left.w-20{
  left: 14px;
}
.form-group .icons.left + .form-control{
  padding-left: 40px;
}
.form-group .icons.right + .form-control{
  padding-right: 40px;
}
.form-group  .error + .icons{bottom: 31px !important;}
.form-group  .error[style] + .icons{bottom: 0 !important;}

.error + .form-select{border-color: var(--red); }
.star{color: var(--red);}

.form-select.error,
.form-control.error{
  border-color: var(--red);
}
.form-select + .error{
  position: absolute;
  left: 0;
  top: 100%;
  line-height: 0.9;
}

select.form-select.error{display: none !important;}
.form-check span.error{
  position: absolute;
  left: 0;
  bottom: -20px;
  white-space: nowrap;
}

.form-check-input.error{border-color: var(--red);}
.form-group .icon-eye{
  margin-right: 5px;
  --size:18px ;
  width: var(--size) !important;
  background-image: url(../img/icons/icon-eye-slash.svg);
  cursor: pointer;
}
.form-group .icon-eye.on{background-image: url(../img/icons/icon-eye.svg);}

.btn{
  --btn-h:45px;
  position: relative;
  padding:0 22px 0;
  height:var(--btn-h);
  line-height:calc(var(--btn-h) - 0px);
  transition: all 0.25s ease-in-out;
  font-weight: var(--fw-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-18);
  gap:12px;
  max-width: var(--max-width);
  --max-width:none;
  --bs-btn-border-width:0;
  --bs-btn-border-radius:4px;

  --bs-btn-color:#fff;
  --bs-btn-bg:var(--blue-dark);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--blue);
  --bs-btn-active-color:var(--bs-btn-color);
  --bs-btn-active-bg:var(--bs-btn-hover-bg);

  --bs-btn-icon-color:var(--bs-btn-color);
  --bs-btn-hover-icon-color:var(--bs-btn-hover-color);

}

.btn path[fill]{fill: var(--bs-btn-icon-color);}
.btn path[stroke]{stroke: var(--bs-btn-icon-color);}
.btn line[stroke]{stroke:var(--bs-btn-icon-color);}

.btn:hover path[fill],
.btn.active path[fill],
.btn:active path[fill]{fill: var(--bs-btn-hover-icon-color) !important;}

.btn:hover path[stroke],
.btn.active path[stroke],
.btn:active path[stroke]{stroke:var(--bs-btn-hover-icon-color)!important;}

.btn:hover line[stroke],
.btn.active line[stroke],
.btn:active line[stroke]{stroke:var(--bs-btn-hover-icon-color)!important;}

.btn{
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn span,
.btn .icons{
  position: relative;
  z-index:20;
}
.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-blue{
  --bs-btn-bg:#0063AC;
  --bs-btn-hover-bg:var(--blue-main)
}
.btn-outline{
  --bs-btn-border-width:1px;
  --bs-btn-bg:transparent;
  --bs-btn-color:var(--blue-dark);
  --bs-btn-border-color:var(--blue-dark);

}
.btn-outline-white{
  --bs-btn-border-width:1px;
  --bs-btn-bg:transparent;
  --bs-btn-color:#fff;
  --bs-btn-border-color:#fff;

  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-color:#000;
}
.btn-view{
  font-size:var(--fs-16);
  font-weight: var(--fw-500);
  padding: 0 35px;
  gap: 6px;
  --btn-h:40px;
}
.btn-view .icons{right: 0; left: auto;}
.btn-view:hover .icons{right:-5px;}


.btn-gradient:before,
.btn-gradient:after{
  content: '';
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #3271EA 0%, #263DB6 100%);
  transition: all 0.25s;
}

.btn-gradient:after{
  transform: rotate(-180deg);
  opacity: 0;

}
.btn-gradient:hover:after{
  opacity: 1;
}
.btn.h-40{
  --btn-h:40px;
  font-size: 1em;
}
.btn.h-54{
  --btn-h:54px;
  font-size: var(--fs-18);
  border-radius: 8px;
}
.btn.w-175{width: 175px; padding: 0;}
.btn.w-265{width: 265px; padding: 0;}
.btn.w-330{width: 100%; max-width: 330px;  padding: 0;}
div.btn{pointer-events: none;}
.btn.disabled, .btn:disabled{  pointer-events: none;}
.shadow-0{box-shadow: none !important;}
.btn.rounded{border-radius: 100px !important;}

.buttons{
  display: flex;
  text-align: center;
  justify-content: center;
  gap:10px;
  padding:25px 0 0;
}

svg path,
svg rect,
svg line,
svg circle,
svg polygon{
  transition: all 0.2s ease-in-out;
}
@media (min-width:1081px){
  .d-desktop-none{display: none !important;}
}

@media (max-width:575px){
  .form-group .icons.left,
  .form-group .icons.right{
    height: 40px;
  }
  .form .form-group .icons.left,
  .form .form-group .icons.right{height: 40px;}
}

/*==================================================
    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-10{--icon-size:10px;}
.icons.w-12{--icon-size:12px;}
.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:80px;
  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: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);
}
.bg-light{background-color:var(--bg-light) !important;}
.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{
    --padding-x:50px
  }
}

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

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

@media (max-width: 575px) {
  .section{
    --padding-top:30px;
    --padding-bottom:30px;
  }
  .container,
  .container-fluid{
    --padding-x:20px;
  }

}

/*==================================================
    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;}
.text-red{color: var(--red);}
.text-blue{color: var(--blue) !important;}
.text-blue-dark{color: var(--blue-dark) !important;}
.text-title{color: var(--text-title);}
.link-white{color: #fff;}
.link-underline{text-decoration: underline;text-decoration-thickness: 1px;}
.link-dark-blue{color: var(--blue-dark);}
.link-dark-blue:hover{text-decoration: underline;}
p a:hover{text-decoration: underline;text-decoration-thickness: 1px;}

.fs-14{font-size: var(--fs-14);}
.fs-16{font-size: var(--fs-16);}
.fs-18{font-size: var(--fs-18);}
.fs-20{font-size: var(--fs-20);}
b, strong{
  font-weight: var(--fw-600);
  font-family: inherit;
}

.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.4;
  position: relative;
  color: var(--text-title);
}

h1,.h1{
  font-size: var(--fs-36);
}
h2,.h2{
  font-size: var(--fs-30);
}
h3,.h3{
  font-size: var(--fs-24);
}
h4,.h4{
  font-size: var(--fs-24);
  font-weight: var(--fw-500);
}

.text-underline{text-decoration: underline;}
.nowrap{ white-space: nowrap; }

.header,
.navbar-brand,
.navbar-brand img,
.navbar-toppage,
.navbar-menu{
  transition: all 0.3s;
}
.header{
  position: fixed;
  top: 0;
  left:0;
  right: 0;
  padding: 0;
  height:auto;
  z-index: 1020;
  display: block;
  transition: all 0.45;
}

.header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.navbar-brand{
  padding: 0;
  flex-shrink: 0;
  z-index: 20;
  margin: auto 0;

}

.navbar-brand a{
  display: flex;
  width:auto;
  height:var(--navbar-brand-height);
  gap: 4px;
}
.navbar-brand img,
.navbar-brand svg{
  height: 100%;
  width:auto;
}

.dropdown [data-bs-toggle]{
  display: flex;
  align-items: center;
  gap:5px
}
.dropdown [data-bs-toggle]:after{
  content: '';
  width: 11px;
  height: 11px;
  margin-left:2px;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position:center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.header .dropdown [data-bs-toggle]:after,
.nav-main [data-bs-toggle="collapse"]:after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ACC3FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.header .dropdown:hover > [data-bs-toggle]:after,
.header .dropdown.active  > [data-bs-toggle]:after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2358B8FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.dropdown-menu{
  --bs-dropdown-border-radius:4px;
  --bs-dropdown-menu-border-radius:4px;
  --bs-dropdown-border-color:#f1f1f1;
  --bs-dropdown-bg:#fff;
  --bs-dropdown-color:#375B51;
  --bs-dropdown-padding-x:20px;
  --bs-dropdown-padding-y:7px;
  --bs-dropdown-spacer:0;
  --bs-dropdown-min-width:100%;
  --bs-dropdown-link-hover-bg:rgba(0, 0, 0, 0.05);
  --bs-dropdown-border-width:0;

  opacity: 0;
  border: 0;
  display: block;
  pointer-events: none;
  transition: all 0.35s;

  box-shadow: 0px 0px 15px rgba(170, 176, 209, 0.3);
  top: 100%;
  padding:10px 0;
  width: auto;
  overflow-x: auto;
}

.dropdown-menu li{cursor: pointer;}
.dropdown-menu > li:hover > a  {background-color:#F4F7FC; color: #2E3192;}

.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{
  display: block;
  position: relative;
  padding:8px var(--bs-dropdown-padding-x) 6px;
  font-size: var(--fs-14);
}

.dropdown-menu > li.active > a,
.dropdown-menu > li > a:hover{
  color: var(--blue);
  background-color: var(--light);
}

.dropdown.lang .dropdown-menu li a{
  padding: 3px 10px;
  font-size: 14px;
}

@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);
  }

}

.avatar{
  --avatar-size:40px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.btn-menu{
  --btn-h:30px;
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:transparent;

  width: var(--btn-h);
  padding: 0;
  margin-left: 20px;

}

.btn-menu .icons{
  background-image:url(../img/icons/icon-menu.svg);
  --icon-size:30px;
}

.navbar-toppage{
  height: var(--navbar-toppage-height);
  background-color:#2F2878;
  position: relative;
  z-index: 100;
}

.navbar-toppage .btn-menu{display: none;}
.navbar-menu{
  background-color:#110D3E;
  height: var(--navbar-menu-height);
}
.page.p-0 .navbar-toppage{  background-color: rgba(17, 13, 62, 0.6);}
.page.p-0 .navbar-menu{  background-color:  rgba(17, 13, 62, 0.8)}
.scrolling .page.p-0 .navbar-toppage{  background-color: var(--toppage-bg);}
.scrolling .navbar-menu{  background-color: rgba(17, 13, 62, 1)!important;}
.nav-main {
  gap:50px;
  font-size: var(--fs-16);
}
.nav-main > li > a{
  color:var(--blue-light);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--fw-500);
  min-height: 45px;

  position: relative;
  padding: 5px 0;
}
.nav-main > li > a:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 0;
  height: 2px;
  background-color:#58B8FF;
  transition: all 0.45s;
}
.nav-main > li:hover > a,
.nav-main > li.active > a,
.navbar-menu .nav-main > li:hover > a,
.navbar-menu .nav-main > li.active > a{
  color: #58B8FF;
}
.nav-main > li.active > a:before,
.nav-main > li:hover > a:before{width: 100%;}
.navbar-menu .nav-main > li > a {color: #E3EBFF;}
.navbar-menu .nav-main > li > a:before{display: none;}
.nav-main.main {
  gap:35px;
  margin-left: auto;
  margin-right: auto;
  font-size:var(--fs-18);   /*18*/
}

.nav-general{
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-general .icon-user{background-image: url(../img/icons/icon-user.svg);}
.nav-general .icon-search{background-image: url(../img/icons/icon-search.svg);}
.nav-general .icon-cart{background-image: url(../img/icons/icon-cart.svg);}

.nav-general .badge{
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 0;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  color: var(--white);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red);
  font-weight: 400;
}
.dropdown-menu .title{
  font-weight: var(--fw-500);
  color: var(--text-title);
  font-size: var(--fs-18);
  margin-bottom: 6px;
}

.nav-lang{padding-left:0;}
.nav-lang .btn[data-bs-toggle]{
  border-radius: 50px;
  font-size: var(--fs-16);
  padding: 0 15px;
  --btn-h:28px;
  --bs-btn-border-width:1px;
  --bs-btn-border-color:#fff;
  --bs-btn-bg:transparent;
  --bs-btn-color:#fff;
  --bs-btn-hover-bg:transparent;
  --bs-btn-hover-border-color:#fff;
  --bs-btn-hover-color:#fff;
}
/* .nav-lang .btn[data-bs-toggle]:after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
} */

.header .nav-general .dropdown [data-bs-toggle]:after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") ;
}
.header .nav-general .dropdown [data-bs-toggle]:hover:after{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") ;
}
.nav-lang .flag{
  width: 28px;
  height: 28px;
  margin-right: 4px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}
.nav-lang .flag{
  width: 15px;
  height: 15px;
  display: block;
  margin-right: 4px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}
.nav-lang .flag-th{
  background-image: url(../img/icons/flag-th.png);
}
.nav-lang .flag-en{
  background-image: url(../img/icons/flag-en.png);
}
.nav-lang .dropdown-menu{
  padding: 5px 0;
  overflow: hidden;
  left: 50%;
  margin-left: -40px;
}
.nav-lang .dropdown-menu a{
  display: flex;
  align-items: center;
  gap:6px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: var(--fs-14);
}

.nav-general > li.nav-user > a{
  color:var(--white);
  min-height: 45px;
}
.nav-general > li.nav-user .dropdown-menu .icons{
  --icon-size:18px
}
.nav-general > li.nav-user .dropdown-menu .icons path{
  fill: var(--text-body);
}
.nav-general li .username{
  font-size: var(--fs-14);
}

.navbar-slide{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  background-color: rgba(12, 17, 62, 0.9);

  padding: 0;
  color: #9FB4E8;

  opacity: 0;
  pointer-events: none;
  transition: all 0.7s;
}
.nav-opened .navbar-slide{
  opacity: 1;
  pointer-events: all;
}
html.nav-opened, html.nav-opened body{
  position: relative;
  overflow: hidden;
}
.navbar-slide .row{
  --bs-gutter-x:30px;
  --bs-gutter-y:30px;

  padding: 70px 0 50px;
}
.navbar-slide h3{
  color: #fff;
  font-size:var(--fs-18);
  margin-bottom: 10px;
}
.navbar-slide .nav{
  flex-direction: column;
}
.navbar-slide .nav li a{
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
  padding: 6px 0;
  display:flex;
  gap: 15px;
  position: relative;

}
.navbar-slide .nav li a[data-bs-toggle]:after{
  content: '';
  width: 10px;
  height: 10px;
  margin-left:auto;
  position: relative;
  top: 5px;
  transition: all 0.25s;
  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='%239FB4E8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.navbar-slide .nav li a[data-bs-toggle][aria-expanded="true"]:after{
  transform: rotate(-180deg);
}
.navbar-slide .nav li a:hover{color:#58B8FF;}
.navbar-slide .nav .nav li a{
  display: flex;
  gap: 10px;
  padding: 4px 0 4px 15px;
  position: relative;
}
.navbar-slide .nav .nav li a:before{
  content: '';
  width: 5px;
  height: 5px;
  background-color: #9FB4E8;
  border-radius: 50%;
  position: relative;
  top: 10px;
  flex-shrink: 0;

}
.navbar-slide .nav .nav .nav{
  margin-left: 25px;
}
.navbar-slide .nav .nav .nav  a{
  opacity: 0.8;
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
}
.navbar-slide .nav .nav .nav  a:hover{opacity: 1;}
.navbar-slide .btn-close{
  position:fixed;
  top: 30px;
  right: 30px;
  background-color: #4757AB;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  --bs-btn-close-opacity:1;
  --bs-btn-close-bg: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");
  background-size: 12px;
  z-index: 100;
}

.navbar-slide .scrollbar-inner{
  height:100vh;

}
.icon-search{
  background-image: url(../img/icons/icon-search.svg);
}
.form-group.search .icons.right{width: 18px; right: 8px;}
.form-group.search .form-control{
  --input-h:26px;
  background-color: #E2E3FF !important;
  border-color: #E2E3FF !important;
  padding-left: 10px;
  color: var(--blue-dark);
  font-size: var(--fs-14);
}


.navbar-slide .form-group.search{
  /* background-color: rgba(12, 17, 62, 0.9);
  padding: 20px;
  border-radius: 12px; */
  margin-top: 30px;
  display: none
}
.navbar-slide .form-group.search .form-control{
  --input-h:32px
}

.nav-main .dropdown-menu{
  max-height: none;
  /* min-width: 226px; */
  max-height: 60vh;
  min-width: 300px;
  overflow: visible;
  overflow-x: auto;
  font-weight: var(--fw-400);
  border-radius: 0;
}
.nav-main.main .dropdown-menu{min-width: 226px;}
.nav-main .dropdown-menu .dropdown-menu{
  left: 100%;
  top: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.nav-main .dropdown-menu .dropdown:hover > .dropdown-menu{
  opacity: 1;
  pointer-events: all;
}

.dropdown-menu .dropdown [data-bs-toggle]:after{
  margin-left: auto;
  transform: rotate(-90deg);
  right: -5px;
  position: relative;
}

.nav-main .nav{
  flex-direction: column;
  padding-left:10px;
  margin-left: 6px;
}
.nav-main .nav li{
  position: relative;
}
.nav-main .nav li a{
  display: flex;
  font-size: var(--fs-12);
  padding:3px var(--bs-dropdown-padding-x) 3px;
}
.nav-main .nav li:before{
  content: '';
  position: absolute;
  top: 10px;
  left: 8px;
  width:4px;
  height: 4px;
  border-radius: 50%;
  background-color: #375B51;
}
.nav-main .nav .nav {padding-left:15px;}
.nav-main .nav .nav li:before{
  background-color: transparent;
  border: 1px solid #375B51;

}

.nav-main .nav li:hover>a{
  color: var(--blue);
}
.nav-main li [data-bs-toggle]:after{
  margin-left: auto;
  transition: all 0.25s;
}
.nav-main li a[aria-expanded="true"]:after{transform: rotate(-180deg);}
@media (max-width:1199px) {
  .navbar-slide .btn-close{
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
  }

  .navbar-slide h3{margin-bottom: 6px;}

  .navbar-slide .row{
    padding: 50px 0;
  }
}
/*==================================================
   Mobile
==================================================*/
@media (max-width:1366px) {
  .nav-main.main{
    font-size: var(--fs-16);
  }
  .nav-main .dropdown-menu{
    --bs-dropdown-width:730px;
  }
  .nav-lang .btn[data-bs-toggle]{
    font-size: var(--fs-14);
  }
}
@media (max-width:1366px) {
  .navbar-menu .nav-main {gap:20px;}
}



@media (max-width:1280px) {
  .navbar-brand .logo-2{display: none;}
  .nav-main.main{
    font-size: var(--fs-18);
  }
}

@media (max-width:1199px) {

  .nav-main{gap:35px;}

  /* .navbar-menu .nav-main > li > a{
    font-size: var(--fs-14);
  } */
}

@media (max-width:1199px) {
  .navbar-menu{display: none;}
  .nav-main{display: none;}

  .nav-general{margin-left: auto;}

  .navbar-toppage{background-color: rgba(17, 13, 62, 0.95);}
  .navbar-toppage .btn-menu{display: flex;}

  .navbar-slide .form-group.search{display: block;}
}

@media (max-width:575px) {
  .nav-general{gap: 10px;}
  .nav-lang .btn[data-bs-toggle]{
    font-size: var(--fs-12);
    --btn-h:23px;
    padding: 0 10px 0 12px;
    gap: 4px;
  }
  .nav-lang.dropdown [data-bs-toggle]:after{
    width: 10px;
    height: 10px;
  }
  .nav-general li a .icons{--icon-size:22px; background-size: 19px;}

  .nav-general li .username{display: none;}
  .nav-general > li.nav-user > a:after{display: none;}
}

@media (max-width:390px) {
  .btn-menu{
    margin-left: 10px;
  }
}

@media (max-width:360px) {
  .btn-menu{
    margin-left:5px;
  }
}
/*==================================================
   Section
==================================================*/

.page{
  display: flex;
  position: relative;
  overflow: hidden;
  padding-top:calc(var(--navbar-toppage-height) + var(--navbar-menu-height));
  flex-direction: column;
  min-height: 100%;
  background-color: var(--bs-body-bg);
}

.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:var(--bs-body-bg);
  z-index: 1090;
  display:flex;
}

.loader {
  width: 34px;
  height:34px;
  margin:  auto;
  display: block;
  border-top: 3px solid var(--blue-dark);
  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);
  }
}
.section-full{
  min-height: 100vh;
  min-height: calc(var(--vhs, 1vh) * 100) !important;
  display: flex;
}

.background{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.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;
  }
}

@media (max-width:1280px) {
  .page{
    padding-top: var(--navbar-toppage-height) !important;
  }
  .page.p-0 .navbar-toppage{
    background-color: var(--toppage-bg);
  }
}
.section{
  position: relative;
}

.card{
  position: relative;
  min-height: 100%;
  --bs-card-border-width:1px;
  --bs-border-radius:10px;
  --bs-card-border-color:var(--stroke);
  --bs-card-spacer-y: 25px;
  --bs-card-spacer-x: 25px;
  background: rgba(18, 19, 26, 0.7);
  box-shadow: inset 2px 0px 10px 6px rgba(44, 41, 46, 0.28);
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block;
}
.card-photo .photo{
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.35s ease 0s;
}
.card-photo .photo img{
  width: 100%
}

.card-body{color: inherit;}

.card-photo.video:before,
.card-photo.video:after{
  content: '';
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.card-photo.video:before{

  background-position: center;
  background-size: 11%;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-play.svg);
  z-index: 10;
}
.card-photo.video:after{
  z-index: 8;
  background-color: rgba(0, 0, 0, 0.2);
  transition: all 0.25s;
  opacity: 0;
}
.card-photo.video:hover:after{opacity: 1;}

.card.h-auto{min-height: 0;}

.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;
  flex: unset;
}

.section-body{
  flex: 1 1 auto;
  --padding-top:40px;
  --padding-bottom:40px;
}

.textrow{
  position: relative;
  overflow: hidden;
  display: block;
}
.textrow > span{
  display: inline-block;
}


@media (max-width:991.98px) {

}
@media (max-width:670px) {
  .section-body{
    padding-top: 0;
  }
}
/*==================================================
   Home
==================================================*/
.boxed{
  margin:auto;
  width: 100%;
  max-width: var(--width);
  --width:970px;
}
.line-animate{
  height:var(--line-h);
  position: relative;
  width:39px;

  --line-color:var(--yellow);
  --line-h:1px;
}
.line-animate.blue{--line-color:var(--main-blue)}
.line-animate:before{
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  display: inline-block;
  top: 0;
  background:var(--line-color);

  transition: all 0.8s;
  transition-delay: 0.2s;
}
.line-animate.center{
  margin-left: auto;
  margin-right: auto;
}
.line-animate.center:before{
  left: 50%;
  transform: translateX(-50%);
}
.line-animate.aos-animate:before {width: 100%;}

.hgroup{
  display: flex;
  justify-content: center;
}

/*==================================================
   home - Banner
==================================================*/
.section-banner-highlight{
  padding: 0 !important;
}

.swiper-banner-button{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
  width: 165px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px 0 0 0;
  gap: 10px;
}
.swiper-banner-button .swiper-button{
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin: 0;

  width: 42px;
  height: 42px;
}
.swiper-banner-button .swiper-button .icons{
  width: 15px;
  height: 15px;
}

@media (max-width:1280px) {
  .swiper-banner-button{
    width: 120px;
    height: 56px;
  }
  .swiper-banner-button .swiper-button{
    width: 32px;
    height: 32px;
  }
  .swiper-banner-button .swiper-button .icons{
    width: 12px;
    height: 12px;
  }
}

@media (max-width:991.98px) {
  .swiper-banner-button{
    width: 100px;
    height:48px;
  }
  .swiper-banner-button .swiper-button{
    width: 28px;
    height: 28px;
  }
  .swiper-banner-button .swiper-button .icons{
    width: 10px;
    height: 10px;
  }
}

@media (max-width:575px) {
  .swiper-banner-button{
    width: 70px;
    height:38px;
    border-top-left-radius:20px ;
    gap: 5px;
  }
  .swiper-banner-button .swiper-button{
    width: 24px;
    height: 24px;
  }
}

/*==================================================
   home - intro
==================================================*/

.article.intro{
  text-align: center;
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.article.intro h2{

  background: linear-gradient(90deg, #0063AC 0%, #8F5BFF 50%, #FF6262 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  position: relative;
  margin: 20px auto 30px;
  padding: 0 90px;
}

.article.intro h2:before,
.article.intro h2:after{
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  background-image: url(../img/icons/icon-quotes.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.article.intro h2:before{
  left: 0;
  top: -20px;
}
.article.intro h2:after{
  right: 0;
  bottom: -20px;
  transform: rotate(-180deg);
}

.article.intro strong{
  color: var(--text-title);
}


@media (max-width:1024px) {

  .article.intro h2:before,
  .article.intro h2:after{
    width: 42px;
    height: 42px;
  }

  .article.intro h2{
    padding:0 58px;
  }
}

@media (max-width:670px) {
  .article.intro h2{
    padding:0 32px;
  }
  .article.intro h2:before,
  .article.intro h2:after{
    width: 28px;
    height: 28px;
  }
  .article.intro h2:before{top: -4px;}
  .article.intro h2:after{bottom: -4px;}

}

/*==================================================
   home - news
==================================================*/
.section-news{
  background-color: #C9D6EF;
}
.nav-news-tabs{
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  padding: 20px 0;
}
.nav-news-tabs .btn{
  --btn-h:40px;
  --bs-btn-color:var(--blue-dark);
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:#C9D6EF;

  font-size: var(--fs-18);
  border-radius: 0;
  padding:0 15px;
  min-width:150px ;
}

.card-news-list{
  padding: 20px 0;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y:20px;
}

.card-news-list.main{
  --bs-gutter-y:35px;
}
.card-news{
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-news .card-body{
  padding: 15px;
}

.card-news p{
  margin: 0;
}

.card-news p.date{
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.card-news p.date .icons{
  --icon-size:18px;
}
.card-news p.date svg path{fill: #545454;}

.card-news h3{
  font-size: var(--fs-16);
  font-weight: var(--fw-500);

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  transition: all 0.25s;
}
.card-news:hover .photo{transform:scale(1.05);}
.card-news:hover h3{color: var(--blue-dark);}


@media (max-width:1440px) {
  .card-news .card-body{
    padding: 15px 0;
  }
}

@media (max-width:1366px) {
  .nav-news-tabs{gap: 5px;}
  .nav-news-tabs .btn{
    min-width: 0;
    font-size: var(--fs-16);
  }
}

@media (max-width:1024px) {
  .nav-news-tabs{
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
  }

  .card-news-list{padding-top: 10px; padding-bottom: 0;}
}

@media  (max-width:991.98px) {
  .card-news p.date{font-size: var(--fs-12);}
  .card-news p.date .icons {--icon-size: 16px; top: -2px;}
  .card-news h3{font-size: var(--fs-15);}
}
@media (max-width:768px) {
  .card-news-list{
    --bs-gutter-x:20px;
    --bs-gutter-y:20px;
  }
  .card-news-list > div{width: 50%;}

  .nav-news-tabs .btn{
    --btn-h:35px;
    font-size: var(--fs-14);
  }
}

@media (max-width:575px) {
  .nav-news-tabs{padding: 10px 0; gap: 2px;}
}

@media (max-width:400px) {

  .card-news-list > div{width: 100%;}
}

/*==================================================
   Announce
==================================================*/

.announce-highlight{
  padding:60px 0;
}
.announce-highlight .right .row{
  --bs-gutter-x: 15px;
  --bs-gutter-y: 20px;
}
.nav-announce {
  gap:15px;
}
.nav-announce li{
  width: 100%;
}

.nav-announce li a{
  color:var(--text-body);
  font-size: var(--fs-20);
  font-weight: var(--fw-500);
  display: flex;
  gap: 12px;
  align-items: center;
  padding:5px 0;
  position: relative;
}
.nav-announce li a:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: var(--blue-dark);
  opacity: 0;
  transition: all 0.25s;
}
.nav-announce li a.active:before{opacity: 1;}
.nav-announce .icons{--icon-size:30px;}

.nav-announce li a.active{
  color: var(--blue-dark);
  padding-left: 14px;

}

.nav-announce li a:hover{
  color: var(--blue-dark);

}

.nav-announce li a svg path{fill:var(--text-body);}
.nav-announce li a:hover svg path,
.nav-announce li a.active svg path{fill: var(--blue-dark);}

.card-announce{
  display: flex;
  background-color: #fff;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.card-announce .card-date{
  width: 86px;
  background-color: #A3D3FF;
  color: var(--blue-dark);
  font-weight: var(--fw-500);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: var(--fs-15);
  flex-shrink: 0;
  transition: all 0.35s;
}
.card-announce .card-date h4{
  font-size: var(--fs-26);
  color:inherit;
  font-weight: var(--fw-600);
  line-height: 1;
  transition: all 0.35s;
  color: var(--blue-dark);
}
.card-announce .card-body{
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap:4px;
  width: calc(100% - 86px);
}
.card-announce p{
  margin: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
}
.card-announce h3{
  font-size:var(--fs-18);
  font-weight: var(--fw-500);
  color: var(--blue-dark);
  transition: all 0.35s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  width: 98%;


}
.card-announce p .link{
  color: var(--red);
  font-weight: var(--fw-500);
  text-decoration: none;
}

.docs-list{
  display: flex;
  align-items: center;
  gap:8px;
}
.docs-list .icon-pdf{
  --icon-size:20px;
  background-image: url(../img/icons/icon-pdf.svg);
}

.card-announce:hover .card-date{
  background-color:var(--blue-dark);
  color: #fff;
}
.card-announce:hover .card-date h4{color: #fff;}
.card-announce:hover h3{color: var(--text-title);}

.announce-list{
  --bs-gutter-y: 22px;
}
.announce-list .card-announce .card-body{
  border: 1px solid #E7EEF9;
  border-left: 0;
  border-radius: 0 12px 12px 0;
}
@media (max-width:991.98px) {
  .nav-announce{
    flex-direction: row;
    gap:10px 0;
    margin-bottom: 30px;
  }
  .nav-announce li{
    width: 33.33%;
  }
  .ads-banner{
    margin:0 -30px;
  }

  .nav-announce li a{
    font-size: var(--fs-18);
    gap: 10px;
  }
  .announce-list{
    --bs-gutter-y: 20px;
  }

}

@media (max-width:670px) {
  .announce-list{
    --bs-gutter-y: 15px;
  }
  .nav-announce li{
    width: 50%;
  }
  .nav-announce li a:before{
    width:2px;
  }
}

@media (max-width:670px) {
  .announce-highlight{
    padding: 40px 0;
  }
  .nav-announce{margin-bottom: 20px;}
  .nav-announce li a{
    font-size: var(--fs-16);
    gap: 8px;
  }
  .nav-announce .icons{
    --icon-size:24px
  }

  .nav-announce li a:hover, .nav-announce li a.active{
    padding-left: 8px;
    gap: 8px;
  }

  .card-announce .card-date{width: 72px;}
  .card-announce .card-date h4{font-size: 22px;}
  .card-announce p{font-size: var(--fs-12);}
  .card-announce h3{font-size: var(--fs-16);}
  .card-announce .card-body{padding: 10px 15px; gap: 2px;}

  .card-announce .docs-list .icon-pdf{--icon-size:17px; margin-bottom: auto;}

  .ads-banner{
    margin:0 -20px;
  }
  .announce-highlight .right .row{
    --bs-gutter-y:15px;
  }
}

@media (max-width:390px) {
  /* .nav-announce li{width: 100%;} */

  .nav-announce li a{font-size: var(--fs-14);}
  .nav-announce .icons{--icon-size:20px}
}

/*==================================================
   home - E-Services
==================================================*/

.section-eservice{
  background-color:#EAF0FF ;
}

.card-eservice{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  height: 140px;
  background: linear-gradient(135deg, #FDFDFD 0%, #F4F8FE 100%);
  border-radius: 12px;

}
.card-eservice:before{
  content: '';
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  background: linear-gradient(135deg, #3271EA 0%, #263DB6 100%);
  box-shadow: 0px 0px 10px rgba(145, 159, 192, 0.25);
  opacity: 0;
  transition: all 0.25s;
}

.card-eservice .card-icon{
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.card-eservice .card-icon .icons{
  --icon-size:54px
}
.card-eservice .card-icon .icon-1{
  opacity: 1;
}
.card-eservice .card-icon .icon-2{
  opacity:0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.card-eservice h3{
  font-size: var(--fs-20);
  transition: all 0.25s;
  text-align: center;
}
.card-eservice:hover:before{opacity: 1;}
.card-eservice:hover h3{color: #fff;}
.card-eservice:hover .card-icon .icon-1{opacity: 0;}
.card-eservice:hover .card-icon .icon-2{opacity: 1;}

.eservice-list{
  --bs-gutter-y: var(--bs-gutter-x);
}
.eservice-list > div{
  /* width: 12.5%; */
  width: 25%;
  flex: unset;
}


@media (max-width:1366px) {
  .eservice-list{
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }
}


@media (max-width:991.98px) {
  .eservice-list > div{
    width:33.33%;
  }
  .card-eservice h3{
    font-size: var(--fs-18);
  }
}

@media (max-width:670px) {
  .eservice-list{
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
  }
  .eservice-list > div{
    width:50%;
  }
}
@media (max-width:580px) {

  .section-eservice {padding-bottom: 40px;}
  .section-eservice h2{margin-top: 0 !important;}
}

@media (max-width:480px) {
  .card-eservice h3{
    font-size: var(--fs-15);
  }
}

/*==================================================
   home - E-Services
==================================================*/

.section-service .hgroup{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seemore{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-dark);
  font-weight: var(--fw-500);
  border-bottom: 1px solid var(--blue-dark);
}
.seemore .icons{
  --icon-size:11px
}
.seemore:hover{color: var(--blue);border-color: var(--blue);}
.seemore:hover svg path{fill: var(--blue);}

.card-service{
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 12px;
  height: 100%;
  --fs-title:1.5em;
}
.card-service .card-photo,
.card-service .card-photo .photo{height: 100%;border-radius:12px 12px 15px 12px;}
.card-service .photo{transition: all 0.35s;}
/* .card-service:hover .photo{background-position: left center;} */
.card-service .card-body{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
  padding: 30px 30px 70px 30px;
  color: #fff;
  overflow: hidden;
  border-radius: inherit;
}
.card-service .card-body *{
  position: relative;
  z-index: 10;
}
.card-service .card-body:before,
.card-service .card-body:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  border-radius: inherit;
  transition: all 0.55s;
}
.card-service .card-body:before{
  background: linear-gradient(180deg, rgba(69, 79, 165, 0) 0%, rgba(12, 11, 41, 0.8) 100%);
}

.card-service .card-body:after{
  backdrop-filter: blur(3px);
  background: linear-gradient(180deg, rgba(11, 19, 86, 0.3) 0%, #2126AD 100%);
  opacity: 0;
}


.card-service h3{
  color: #fff;
  margin-bottom: 0;
  margin-top: auto;
  transition: all 0.45s;
  position: relative;
  font-size: var(--fs-title);
  top: 0;
}
.card-service h4{
  font-size: var(--fs-title);
  color: #fff;
  margin-bottom:6px;
}
.card-service .group{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.65s;
  opacity: 0;
  padding: 30px 30px 50px 30px;

  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.card-service p{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;

  -webkit-box-orient: vertical;
}
.card-service .card-icon{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78px;
  height: 58px;
  border-radius: 12px 0 11.5px 0;
  background-color: #fff;
  transition: all 0.45s;
  display: flex;
  align-items: center;
  justify-content:center;
  z-index: 100;
}
.card-service .card-icon .icons{
  --icon-size:38px;
  transition: all 0.45s;
  border-radius: 50%;
  background-color: var(--blue-dark);
  background-size: 15px;
  transform: rotate(-90deg);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.h-70p .card-service p{
  -webkit-line-clamp: 4;
}
.h-30p .card-service p{
  -webkit-line-clamp: 1;
}

.card-service.w-100 {height:260px ;}
.card-service.w-100 p{ -webkit-line-clamp: 2; margin-bottom: 30px;}
.card-service:hover h3{opacity: 0;}
.card-service:hover .group{
  opacity: 1;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.card-service:hover .card-body:before{opacity: 0;}
.card-service:hover .card-body:after{opacity: 1;}

.card-service:hover .card-icon{background-color: var(--blue-dark);}
.card-service:hover .card-icon .icons{background-color:#fff; 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='%23032478' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
.service-highlight-list{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  padding-top:35px;
}
.service-highlight-list .row{
  height: 100%;
}
.service-highlight-list .h-70p{height: 65%; margin-top:1.5rem ;}
.service-highlight-list .h-30p{height: calc(35% - 1.5rem);}

@media (max-width:1550px) {
  .card-service{
    --fs-title:1.25em;
    font-size: var(--fs-15);
  }

  .card-service .card-icon{
    width: 70px;
    height: 50px;
  }
  .card-service .card-icon .icons{
    --icon-size:32px;
  }
  .card-service .group{
    padding-bottom: 40px;
  }
}

@media (max-width:1440px) {
  .service-highlight-list {
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 1.2rem;
  }

  .service-highlight-list .h-30p{height: calc(35% - 1.2rem);}
}

@media (max-width:1280px) {
  .card-service{
    font-size: var(--fs-14);
  }
  .card-service .card-body,
  .card-service .group{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width:1199px) {
  .card-service{
    --fs-title:1.5em;
    font-size: var(--fs-15);
  }

  .service-highlight-list .h-70p,
  .service-highlight-list .h-30p{height: auto;}

  .service-highlight-list .h-30p{ margin-top:var(--bs-gutter-y);}

  .card-service .card-photo img{ display: none;}
  .card-service .card-photo .photo{height: 100%;}
  .card-service .card-photo{height: 40vw;}

  .h-70p .card-service p,
  .h-30p .card-service p{
    -webkit-line-clamp:unset;
  }
}

@media (max-width:991.98px) {
  .card-service .card-photo{height: auto;}
  .card-service .card-photo img{ display: block;}

  .card-service.w-100 .card-photo{height: 100%;}

  .card-service{
    --fs-title:1.25em;
    font-size: var(--fs-14);
  }

  .card-service .card-icon{
    width: 60px;
    height: 40px;
  }
  .card-service .card-icon .icons{
    --icon-size:24px;
    background-size: 11px;
  }
  .card-service .card-body{
    padding-bottom: 50px;
  }

  .service-highlight-list ,
  .service-highlight-list .row{
    --bs-gutter-x:30px;
    --bs-gutter-y:30px;
  }
}

@media (max-width:767px) {
  .service-highlight-list ,
  .service-highlight-list .row{
    --bs-gutter-x:20px;
    --bs-gutter-y:20px;
  }

  .card-service{
    --fs-title:1.125em;
    font-size: 0.8125em;
  }
  .card-service p{
    -webkit-line-clamp:5 !important;
  }
}
@media (max-width:575px) {
  .card-service{
    --fs-title:1.25em;
    font-size: var(--fs-14);
  }

  .card-service.w-100 {height:auto ;}

  .card-service .card-photo,
  .card-service.w-100 .card-photo{height:90vw;}
}

/*==================================================
   home - media
==================================================*/
.section-media{
  padding: 0;
  background-color: #162C74;
}
.section-media .container{position:static;}
.section-media div.left {
  padding-top: 60px;
  padding-bottom: 60px;
  padding-right: 40px;
}
.section-media div.left .background{
  background-color: #162C74;
  width: 50%;
  right: auto;
}
.section-media div.right .card-photo.video{
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
}
.section-media div.right .card-photo.video .photo{height: 100%;}


@media (min-width:1761px) {
  .section-media div.right .card-photo.video:before{
    background-size: 90px;
  }
}
.section-media .article{
  position: relative;
  z-index: 10;
}
.section-media h2{
  font-size: var(--fs-48);
  line-height: 1.2;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #169FEC 0%, #8F5BFF 50%, #FF6262 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.section-media p{
  font-size: var(--fs-24);
  color: var(--blue-light);
}


.card-photo.video:before,
.card-photo.video:after{
  content: '';
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.card-photo.video:before{

  background-position: center;
  background-size: 11%;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-play.svg);
  z-index: 10;
}
.card-photo.video:after{
  z-index: 8;
  background-color: rgba(0, 0, 0, 0.2);
  transition: all 0.25s;
  opacity: 0;
}
.card-photo.video:hover:after{opacity: 1;}

.swiper-media .card-photo.video:before{background-size: 16%;}
.swiper-overflow{position: relative; z-index: 10;}
.swiper-overflow.media {
  margin-top: 60px;
  padding-top: 20px;
}

@media (max-width:1480px) {
  .section-media h2{font-size: 38px;}
  .section-media p{font-size: 22px;}
}
@media (max-width:1280px) {
  .section-media h2{font-size: 32px;}
  .section-media p{font-size: 20px;}
}

@media (max-width:991.98px) {
  .section-media .container{
    padding: 0;
  }
  .section-media div.left{
    padding: 50px 30px;
  }
  .section-media div.left .background{width: 100%;}
  .section-media div.left .article{max-width:500px;}
  .section-media div.right .card-photo.video{
    position: relative;
    left: 0;
  }
}

@media (max-width:670px) {
  .section-media div.left{
    padding: 50px 20px;
  }

  .swiper-overflow.media{
    margin-top: 50px;
  }
  .swiper-overflow.media .top-right{top: -20px;}
  .swiper-overflow.media .swiper-button {
    width: 26px;
    height: 26px;
  }
}

@media (max-width:575px){
  .section-media h2{font-size:24px;}
  .section-media p{font-size:15px;}
}
/*==================================================
   home - Product
==================================================*/

.section-product{
  background-color: #f0f5ff;
}

.section-product .hgroup{
  margin-bottom:35px;
}

.card-product{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color:transparent;
  filter: drop-shadow(0px 0px 15px rgba(190, 200, 225, 0.5));
  padding: 18px;
  transition: all 0.25s;
  height: 100%;
  position: relative;
}

.card-product .card-hover{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(152, 199, 255, 0.05) 0%, rgba(92, 97, 217, 0.5) 100%);
  transition: all 0.25s;
  opacity: 0;
}

.card-product .card-hover .btn{
  --btn-h:29px;
  --bs-btn-bg:var(--red);
  --bs-btn-color:#fff;
  font-size: 14px;
  border-radius: 4px;
  padding: 0 20px;
  position: relative;
  top: 30px;
  transition: all 0.4s;
  opacity: 0;
}

.card-product:hover .card-hover{opacity: 1;}
.card-product:hover .card-hover .btn{top: 0; opacity: 1; transition-delay: 0.1s;}
.card-product .card-photo{
  border-radius: 5px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;

}
.card-product .card-body{
  text-align: center;
  padding:15px 0 0;
  display: flex;
  flex-direction: column;
}
.card-product h3{
  font-size: var(--fs-18);
  transition: all 0.25s;
  margin-bottom: 2px;
}
.card-product p{
  margin:auto 0 0;
  font-weight:var(--fw-600);
}

.card-product:hover{background-color: #fff;}
.card-product:hover h3{color: var(--blue-dark);}
.card-product-list.main{
  --bs-gutter-y: 25px;
}
.card-product-list.main > div{
  width: 25%;
  flex: 0 0 auto;
}
.card-product-list.main .card-product{padding: 22px;}
@media (max-width:1280px) {
  .card-product{
    padding: 12px;
  }
  .card-product .card-hover .btn{
    padding: 0 12px;
    font-size: 0.8125em;
  }

  .card-product-list.main .card-product{padding: 15px;}
}

@media (max-width:991.98px) {
  .card-product{
    padding:18px;
  }
  .card-product-list .col{
    flex: unset;
    width: 33.33%;
  }
  .card-product-list.main > div{
    width:33.33%;
  }
}

@media (max-width:767px) {
  .card-product{
    padding:14px;
  }
}

@media (max-width:670px) {
  .section-product .hgroup{
    margin-bottom:25px;
  }

  .card-product-list{
    --bs-gutter-x:20px;
    --bs-gutter-y:30px;
  }
  .card-product{
    background-color: transparent !important;
    padding: 0;
  }
  .card-product h3{font-size: 0.875em;}
  .card-product .card-hover{display: none;}
  .card-product-list.main .card-product{padding: 0px;}
}

@media (max-width:520px) {
  .card-product-list .col{
    flex: unset;
    width:50%;
  }
  .card-product-list.main > div{
    width:50%;
  }
  .card-product h3{font-size: 0.875em;}
}
/*==================================================
   government
==================================================*/
.swiper-government {
  padding: 25px 0  ;
}
.swiper-government .swiper-slide{
  width: 16.6667%;
}
.swiper-government img{
  width:75%;
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.swiper-button{
  width: 36px;
  height: 36px;
  background-color: #F0F1F3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.swiper-button .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='%23032478' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  width: 12px;
  height: 12px;
}
.swiper-button-prev{
  left: 0;
}
.swiper-button-prev .icons{
  transform: rotate(90deg);
}
.swiper-button-next{
  right: 0;
}
.swiper-button-next .icons{
  transform: rotate(-90deg);
}

.swiper-button:hover{background-color: var(--blue-dark);}
.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");
}

.swiper-button.outline{
  background-color: transparent;
  border: 1px solid var(--blue-light);
}
.swiper-button.outline .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='%23ACC3FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.swiper-button.outline:hover{
  border-color: #fff;
}
.swiper-button.outline: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='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.top-right {
  position: absolute;
  top: -40px;
  right: 0;
  display: flex;
  gap: 15px;
}
.top-right .swiper-button{
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
}
@media (max-width:1100px) {
  .swiper-government .swiper-slide{
    width:20%;
  }
}
@media (max-width:991.8px) {
  .swiper-government .swiper-slide{
    width:25%;
  }
}
@media (max-width:575px) {
  .swiper-government{
    padding: 15px 0 0;
  }
  .swiper-government .swiper-slide{
    width:33.33%;
  }

  .swiper-pagination-bullet{
    width: 8px;
    height: 8px;
  }

  .swiper-button{
    width: 30px;
    height: 30px;
  }
}


/*==================================================
   TCELS Life Sciences Beyond Aspiration
==================================================*/
.section-innovation{
  padding: 70px 0;
  min-height: 600px;
  display: flex;
}
.section-innovation .container{
  display: flex;
}
.section-innovation .row{
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}
.section-innovation h2{
  font-size:var(--fs-48);
  text-align: center;
  margin-bottom: 40px;
}
.section-innovation .article{
  max-width: 466px;
}
.section-innovation .article h3{
  color:var(--text-body) ;
  font-weight: var(--fw-500);
}

.section-innovation .article h3 strong{
  color: var(--blue-dark);
  font-weight: var(--fw-600);
}

.section-innovation .article p{
  font-weight: var(--fw-400);
  font-size: var(--fs-18);
}

.section-innovation .article p:last-child{
  margin: 0;
}

.play-button{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  display: flex;
  cursor: pointer;
  margin-left: -75px;
  margin-top: 0px;
  z-index: 100;
}

.play-button img{
  position: absolute;
  top: 0;
  left: 0;
}
.play-button:hover img{
  animation: rotate-btn 2s linear 3;
  -webkit-animation: rotate-btn 2s linear 3;
}

.play-button .icons{
  --icon-size:88px;
  margin: auto;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(122, 124, 169, 0.4);
  background-image: url(../img/icons/icon-play-2.svg);
  background-size:20px;
}

@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@media (max-width:1280px) {
  .section-innovation h2{
    font-size:40px
  }
  .section-innovation .article{max-width: 400px;}
}

@media (max-width:1199px) {
  .section-innovation .background:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: linear-gradient(180deg, rgba(152, 199, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 100%);
  }

  .play-button{
    width: 130px;
    height: 130px;
  }
  .play-button .icons {
    --icon-size: 72px;
  }
}

@media (max-width:1024px) {
  .section-innovation{text-align: center;}
  .section-innovation .row >div{width: 100%;}
  .section-innovation .article h3{color:var(--text-title); margin-bottom: 20px;}
  .section-innovation .article{
    max-width: 600px;
    color:var(--text-title);
    margin-left: auto;
    margin-right: auto;
  }

  .section-innovation .background:before{background-color: rgba(255, 255, 255, 0.5);}

  .play-button{
    position: relative;
    top: auto;
    left: auto;
    margin: auto auto 40px;
  }
}

@media (max-width:575px) {
  .section-innovation h2{
    font-size: 2.1875em;
  }

}

@media (max-width:440px) {
  .section-innovation h2{
    font-size:1.5625em;
  }
}

/*==================================================
   News
==================================================*/
.section-banner-medium{
  height: 300px;
  background-color: #ccc;
}


.breadcrumb{
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y:0;
  --bs-breadcrumb-item-padding-x:10px;
  --bs-breadcrumb-margin-bottom:0;
  --bs-breadcrumb-font-size:16px;
  --bs-breadcrumb-color:#173F94;
  --bs-breadcrumb-item-hover-color:var(--bs-breadcrumb-color);
  --bs-breadcrumb-item-active-color:var(--bs-breadcrumb-color);
  --bs-breadcrumb-divider-color:var(--bs-breadcrumb-color);
  font-weight: var(--fw-400);
  width: 100%;
  justify-content: center;
}
.breadcrumb-item + .breadcrumb-item:before{
  content: '' !important;
  width: 12px;
  height: 12px;
  position: relative;
  top: 6px;
  margin-right: var(--bs-breadcrumb-item-padding-x);
  transform: rotate(-90deg);
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  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='%23173F94' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.breadcrumb-item a{color: var(--bs-breadcrumb-color);}
.breadcrumb-item.active:before{color: var(--bs-breadcrumb-item-active-color);}
.breadcrumb-item a:hover{text-decoration: underline;}

.breadcrumb + h1{margin-top: -5px;}

.pagination{
  --bs-pagination-padding-x:0;
  --bs-pagination-padding-y:0;
  --bs-pagination-border-width:0;
  --bs-pagination-border-radius:50px;
  --bs-pagination-font-size:14px;
  --bs-pagination-bg:#F1F2F7;
  --bs-pagination-color:#5D5D5D;
  --bs-pagination-hover-color:#fff;
  --bs-pagination-hover-bg:var(--blue-dark);
  --bs-pagination-active-bg:var(--blue-dark);
  --bs-pagination-focus-bg:var(--blue-dark);
  --bs-pagination-focus-color:#fff;

  --bs-pagination-disabled-color:var(--light-gray);
  padding:30px 0 50px ;
  margin-bottom: 0;
  justify-content: center;
  gap:15px;
}
.page-link{
  border-radius: var(--bs-pagination-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:2px 0 0;
  height:32px;
  width: 32px;
  box-shadow: none !important;
  font-weight: var(--fw-500);
}
.page-link small{font-size: 12px; font-weight: 500;}
.page-link.text{padding: 2px 0 0; width: 62px;}
.page-link.dot{
  border: 0 !important;
  pointer-events: none;
}
.page-link.arrow{
  background-color: var(--bs-pagination-bg);
}

.page-link.arrow path[fill]{fill: #5D5D5D;}
.page-link.arrow path[stroke]{stroke: #5D5D5D;}

.page-link.arrow:hover path[fill]{fill: var(--blue-dark);}
.page-link.arrow:hover path[stroke]{stroke: var(--blue-dark);}



.page-link.prev .icons{transform: rotate(-180deg);}

.pagination .page-link.disabled{
  pointer-events: none;
  opacity: 0.55;
}

.section-header{
  padding-top: 170px;
  padding-bottom:45px;
  text-align: center;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.section-header h1{
  color: var(--blue-dark);
  margin-bottom: 10px;
}

@media (max-width:1280px) {
  .section-header{
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .section-header h1{
    font-size: var(--fs-30);
  }
}

@media (max-width:1070px) {
  .section-header h1{
    margin-bottom: 5px;
  }
}

@media (max-width:1024px) {
  .breadcrumb{
    padding:5px 0 0;
    --bs-breadcrumb-font-size:14px;
    --bs-breadcrumb-item-padding-x: 6px;
  }
  .breadcrumb-item + .breadcrumb-item:before{
    width: 10px;
    height: 10px;
  }
}

@media (max-width:991.98px){
  .section-header {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width:670px){
  .section-header {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media (max-width:575px){

  .section-header h1{
    margin-bottom: 0;
  }
  .pagination{
    gap:7px;
    padding-top: 35px;
    --bs-pagination-font-size:12px;
  }
  .page-link{
    width: 28px;
    height: 28px;
  }
  .page-link .icons{
    --icon-size: 20px;
  }

  .card-news-list.main{
    padding-top: 0;
    --bs-gutter-y:15px;
  }
}

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

.news-details{
  width: 100%;
  color: var(--bs-body-color);
}
.news-details .banner{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 40px;
}
.news-details .date{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-500);
  padding-bottom:5px;
}
.news-details .date .icons path{
  fill: var(--bs-body-color);
}

.news-gallery{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
  margin: 30px -10px 0;
}
.news-gallery li{
  width: 20%;
  padding: 10px;
}
.news-gallery .photo{
  width: 100%;
  height: 100%;
}

@media (max-width:1199px){
  .news-gallery{
    margin-left:-6px;
    margin-right:-6px;
  }
  .news-gallery li{
    padding: 6px;
  }
}

@media (max-width:575px){
  .news-gallery{
    margin-left:-4px;
    margin-right:-4px;
    margin-top:20px;
  }
  .news-gallery li{
    width: 25%;
    padding: 4px;
  }
  .news-details .date{
    padding-bottom: 0;
  }
  .news-details .date .icons{
    --icon-size:20px;
  }
  .news-details .banner{
    margin-bottom: 30px;
  }
}

/*==================================================
   Product Details
==================================================*/

.product-details{
  display: flex;
  --sidebar:32%;
}
.product-details .content{
  width: calc(100% - var(--sidebar));
}
.product-details .sidebar{
  width: var(--sidebar);
}

.card-product-xl{
  display: flex;
}
.card-product-xl .card-photo{
  width: 32%;
  flex-shrink: 0;
  border-radius: 4px;
}
.card-product-xl .card-body{
  padding-left: 30px;
}

.card-product-xl h2{
  font-size: var(--fs-24);
  margin-bottom: 5px;
}

.card-product-xl h4{
  font-size: var(--fs-30);
  margin-bottom: 5px;
  color: var(--blue);
  font-weight: var(--fw-600);
}

.card-product-xl .text-icon{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: var(--fs-18);
  color: var(--text-title);
  font-weight: var(--fw-500);
  gap: 10px;
}
.card-product-xl .text-icon .icons{
  --icon-size:30px;
}
.card-product-xl .text-icon .icons path{
  fill: var(--red);
}

.card-sidebar{
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 15px rgba(190, 200, 225, 0.5);
  border-radius: 20px;
  padding: 30px;
  color: var(--text-title);
  font-weight: var(--fw-500);

}
.card-sidebar h3.title{
  font-size: var(--fs-30);
  margin-bottom: 15px;
  font-weight: var(--fw-600);
}

html:not(.page-theme) .card-sidebar h3.title span{
  display: inline-block;
  background: linear-gradient(90deg, #169FEC 0%, #8F5BFF 50%, #FF6262 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.card-sidebar h4{
  font-weight: var(--fw-600);
  font-size: var(--fs-18);
}

.card-sidebar p{
  margin: 0 0 4px;
}
.card-sidebar p small{
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
}

.card-sidebar hr{
  margin:15px 0;
  border-color: var(--light-gray);
  border-style: dashed;
  opacity: 1;
}
.card-sidebar .form-control{
  --input-border:var(--light-gray);
  --input-bg:transparent;
}
.card-sidebar .info-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-sidebar .info-row .text-gray{color: var(--medium-gray);}
.card-sidebar .info-row .fs-18{font-size: var(--fs-18);}
.card-sidebar .info-row .fs-24{font-size: var(--fs-24);}
.card-sidebar .price-info{
  font-size: 1.125em;
}
.card-sidebar .price-info .price{
  color:var(--blue-dark);
  font-size:1.5em;
  font-weight: var(--fw-600);
}

@media (max-width:1280px) {
  .card-sidebar{
    padding: 20px;
  }
  .card-sidebar h3.title{
    margin-bottom: 10px;
  }

  .card-product-xl .text-icon .icons{
    --icon-size:24px
  }
}

@media (max-width:1199px) {
  .card-product-xl h4{font-size: var(--fs-26);}
  .card-product-xl .text-icon{font-size: var(--fs-16); margin-bottom: 10px;}
}

@media (max-width:1024px) {
  .product-details{
    flex-direction: column;

  }
  .product-details .content,
  .product-details .sidebar{
    width: 100%;
  }

  .product-details .sidebar{
    margin-top: 40px;
  }

  .card-sidebar h3.title{font-size: 2em;}
}

@media (max-width:670px) {
  .card-product-xl .card-body{
    padding-left: 20px;
  }
  .card-sidebar h3.title{font-size: 1.7em;}
}

@media (max-width:670px) {
  .card-product-xl{
    flex-direction: column;
  }
  .card-product-xl .card-photo{
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .card-product-xl .card-body{
    padding-left: 0;
    padding-top: 20px;
  }
  .card-product-xl .text-icon .icons{
    --icon-size:20px
  }
  .card-product-xl .text-icon{margin-bottom: 5px;}
}

.product-infos{
  position: relative;
  padding: 50px 0;
}

.product-infos h3{
  position: relative;
  border-left:3px solid var(--red);
  color: var(--blue-dark);
  font-weight: 600;
  margin-bottom: 20px;
  padding-left:15px;
}
.product-related{
  padding-bottom: 30px;
}
.product-related h2{
  margin-bottom: 15px;
  color: var(--blue-dark);
}


@media (max-width:670px) {
  .product-infos{
    padding: 40px 0 30px;
  }
  .product-infos h3{
    margin-bottom: 15px;
  }
}
/*==================================================
  QTY
==================================================*/

.qty-item{
  display: flex;
  gap:0;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  width: auto;
  border-radius: 50px;
  padding: 0 6px;
  border: 1px solid var(--medium-gray);
}
.qty-item input{
  --input-h:30px;
  width:44px;
  text-align: center !important;
  padding: 0  !important;
  border-radius: 0;
  pointer-events: none;
  background-color:transparent;
  border:0;
  transition:none;
  font-size:var(--fs-20);
  font-weight: var(--fw-600);
}
.qty-item .btn{
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  width:26px;
  --btn-h:26px;
  --bs-btn-bg:var(--light-gray);
  --bs-btn-hover-bg:var(--blue);
  --bs-btn-hover-color:#fff;
  border: 0;
  outline: none;
  font-weight: 400;
}
.qty-item .btn .icons{
  --icon-size:10px;
  margin: auto;
}
.qty-item .btn .icons:before,
.qty-item .btn .icons:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 1.5px;
  width: 100%;
  background-color: var(--text-title);
}
.qty-item .btn.sub .icons:after{display: none;}
.qty-item .btn.add .icons:after{
  transform: rotate(-90deg);
}

.qty-item .btn:hover .icons:before,
.qty-item .btn:hover .icons:after{
  background-color: var(--white);
}

@media (max-width:1366px) {
  .qty-item{
    height: 40px;
  }
}

@media (max-width:575px) {
  .qty-item{
    height:34px;
  }
  .qty-item .btn{
    --btn-h:22px;
    width: 22px;
  }
  .qty-item .btn .icons{
    --icon-size:8px
  }
  .qty-item input{font-size: var(--fs-16); width: 38px;}
}

/*==================================================
  My cart
==================================================*/

.card-table{
  position: relative;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 25px 30px;
  border-radius: 8px;
}

.card-table li.check{width: 5%;}
.card-table li.infos{width: 60%;}
.card-table li.qty{width: 20%; text-align: center;}
.card-table li.price{width: 15%; text-align: right;}
.card-table-body li.price{
  font-size: var(--fs-24);
  color: var(--blue-dark);
  font-weight: var(--fw-600);
}

.card-table-header{
  background-color: #FAFCFF;
  border-radius: 8px;
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  color: var(--text-title);
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.card-table-header .form-check-input{
  margin-top: 4px;
}
.card-table-header .form-check-label{
  white-space: nowrap;
  font-weight: var(--fw-600);
  padding-left:15px;
}
.card-table-body {
  border: 1px solid var(--light-gray);
  margin-bottom: 25px;
}
.card-table-body li.check{
  display: flex;
  align-items: center;
}

.cart-infos{
  display: flex;
  position: relative;
}
.cart-infos .card-photo{
  border-radius: 4px;
  margin-bottom: auto;
}

.cart-infos:hover h3{color: var(--blue-dark);}
.cart-infos .card-body{
  display:flex;
  flex-direction: column;
  padding-left: 20px;
}
.cart-infos h3{
  font-size:var(--fs-20);
  font-weight: var(--fw-600);
  margin-bottom: 5px;
}
.cart-infos p{
  margin: 0;
}

.cart-infos .text-icon{
  display: flex;
  align-items: center;
  margin-bottom:5px;
  font-weight: var(--fw-500);
  gap: 10px;
}
.cart-infos .text-icon .icons{
  --icon-size:18px;
}
.cart-infos .text-icon .icons path{
  fill: var(--red);
}
.cart-infos .text-note{
  font-size: var(--fs-14);
  color: var(--red);
  font-weight: var(--fw-400);
  margin-top: auto;
}
.cart-infos .text-note strong{
  color: var(--text-title);
  font-weight: var(--fw-600);
}
.card-table-body .qty-item{
  max-width: 126px;
  margin: auto;
}

.content.cart{padding-right:35px;}
.card-table-body:last-child{margin-bottom: 0;}

.card-sidebar .cart-infos{
  align-items: center;
  margin-bottom: 20px;
  margin-top:5px;
}
.card-sidebar .cart-infos .card-photo{
  width: 75px;
}
.card-sidebar .cart-infos .card-body{
  padding-left: 15px;
}
@media (max-width:1366px) {
  .card-table{padding-left: 20px;}
  .card-table-body .qty-item{
    max-width: 115px;
  }
  .card-table-body .qty-item input{width: 40px;}
  .card-table-body li.price{font-size: var(--fs-20);}

  .cart-infos h3{font-size: var(--fs-18);}
  .cart-infos .text-icon{font-size: var(--fs-14); gap: 6px;}
  .cart-infos .text-note{font-size: var(--fs-12);}

  .card-table-header{font-size: var(--fs-16);}
}

@media (max-width:1280px) {
  .cart-infos .text-note{padding-top: 10px;}
}


@media (max-width:1199px) {
  .card-table .qty-item{
    height:34px;
    max-width: 100px;
  }
  .card-table .qty-item .btn{
    --btn-h:22px;
    width: 22px;
  }
  .card-table .qty-item .btn .icons{
    --icon-size:8px
  }
  .card-table .qty-item input{font-size: var(--fs-16); width: 38px;}
}

@media (max-width:1024px) {
  .content.cart{padding-right:0px;}
  .card-table li.infos{padding-left: 5px;}
  .cart-infos .card-body{padding-left: 15px;}
}

@media (max-width:991.98px) {
  .card-table-body li.price{font-size: 1.2em;}
}

@media (max-width:767px) {
  .card-table-body li.check{
    align-items: flex-start;
    margin-bottom:auto ;
  }
}

@media (max-width:670px) {
  .card-table-body{
    padding: 20px;
  }
  .card-table-body li.check{width: 35px;}
  .card-table-body:not(.order) li.infos{width:calc(100% - 35px);}
  .card-table:not(.order) li.qty,
  .card-table li.price{
    width: 50%;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dashed var(--light-gray);
  }

  .card-table .qty-item{
    margin-left: 35px;
  }

  .cart-infos .card-photo{width: 109px; flex-shrink: 0;}

  .card-table-header:not(.order) li.qty,
  .card-table-header:not(.order) li.price{display: none;}

  .card-table-header .form-check-label{padding-left: 5px;}
  .card-table-body{margin-bottom: 20px;}

  .cart-infos .text-icon{font-size: var(--fs-12);}
  .cart-infos .text-icon .icons{--icon-size:15px}


}

@media (max-width:460px) {
  .card-table-body{
    padding:15px;
  }
  .card-table-body li.check {
    width: 24px;
  }
  .cart-infos .card-photo{width: 70px;}
  .cart-infos h3{font-size: var(--fs-14);}
  .cart-infos .text-note{font-size:0.6875em;}
  .card-table .form-check-input{width: 16px; height: 16px;}

  .card-table .qty-item{
    height:30px;
    margin-left: 27px;
    max-width: 85px;
    padding: 3px;
  }
  .card-table .qty-item .btn{
    --btn-h:20px;
    width: 20px;
  }
  .card-table .qty-item .btn .icons{
    --icon-size:8px
  }
  .card-table .qty-item input{font-size: var(--fs-14); width: 24px;}
}

/*==================================================
   Form
==================================================*/

.card-form{
  border-radius: 20px;
  position: relative;
  background-color: #FAFBFF;
  padding: 25px;
  margin-bottom: 20px;
}

.card-form.shadow-1{
  background-color: transparent !important;
  box-shadow: 0px 0px 15px rgba(190, 200, 225, 0.3);

  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 12px;
}

@media (min-width:1280px) {
  .card-form.shadow-1{
    padding: 30px 35px;
  }
}


.card-form:not(.shadow-1) .form-control,
.card-form:not(.shadow-1) .form-select{
  --input-bg:#fff;
}

.form .buttons .btn{
  width: 100%;
  max-width: 340px;
}

.form-check .payment-logo{
  margin-left: -27px;
}

.card-success{
  box-shadow: 0px 0px 20px rgba(190, 200, 225, 0.5);
  border-radius: 20px;
  width: 100%;
  max-width: 945px;
  margin: 10px auto ;
  padding: 50px 15px 50px;
  text-align: center;

  display: flex;
  gap: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-success .icons{
  --icon-size:110px;
  margin-bottom: 15px;
}
.card-success h3{
  font-size: 1.5em;
  color: var(--blue-dark);
}
.card-success h5{
  color: var(--text-title);
  font-weight: var(--fw-500);
  font-size: var(--fs-18);
}
.card-success h6{
  color: var(--blue-dark);
  font-weight: var(--fw-600);
  font-size: var(--fs-16);
}
.card-success h6 a{
  color: var(--blue-dark);
  text-decoration: underline;
}
.card-success h6 a:hover{
  color: var(--blue);
}
.card-success p{
  margin: 0;
}

.card-success p.fs-18{
  color: var(--text-body);
  font-weight: var(--fw-500);
}

@media (max-width:575px) {
  .card-success .icons{
    --icon-size:90px;
    margin-bottom: 10px;
  }
}

/*==================================================
  datepicker
==================================================*/
/* .dropdown-calendar{
  padding:20px;
} */

.icons svg.icons{
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.icon-calendar svg.icons path{fill: var(--text-body);}

.dropdown-calendar .form-control{
  border-radius: 5px;
  --input-h:32px;
  padding-top: 1px;
}
.datepicker-dropdown {
  opacity: 1;
  pointer-events: all;
  display: none;
  --bs-dropdown-padding-x:10px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-min-width:0;
  --bs-dropdown-border-radius:2px;
  left: 0;
  margin-top: 10px;
  max-height: none;
  width: 280px;
  padding:10px !important;
  box-shadow: none;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));

  --color-white:#fff;
  --bg-today:#58B8FF;
  --bg-hover:#EFF2FF;
  --bg-active:var(--blue);
}


.datepicker-dropdown:after{
  content: '';
  position: absolute;
  right: 14px;
  top:-8px;

  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;

  border-bottom: 8px solid #fff;
}
.datepicker thead tr:nth-child(2) th{
  cursor: pointer;
}
.datepicker-inline thead th{
  padding: 5px 5px;
}

.datepicker table{
  width: 100%;
  font-size:var(--fs-14);
  text-align: center;
}
.datepicker table th{
  color:var(--blue-dark);
  font-weight:500;
}
.datepicker table thead tr:nth-child(2) th{
  padding-bottom: 8px;
  padding-top: 8px;
  border-bottom: 1px solid #f1f1f1;
}
.datepicker table thead tr:nth-child(3) th{
  padding-bottom: 8px;
  padding-top: 15px;
}
.datepicker table td{
  text-align: center;
  padding:5px 0;
  min-width: 30px;
}
.datepicker table td.old,
.datepicker table td.new{
  color: #BDBDBD;
}

.datepicker table tr td > span{
  display: block;
  width: 24px;
  height: 24px;
  line-height:normal;
  border-radius:3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  cursor: pointer;
}
.datepicker table tr td.today > span,
.datepicker table tr td.day:hover > span,
.datepicker table tr td.focused  > span,
.datepicker table tr td.active  > span{

  transition: all 0.25s;

}
.datepicker table tr td.today,
.datepicker table tr td.active{pointer-events: none;}
.datepicker table tr td.today > span{
  color:var(--color-white);
  background:var(--bg-today);

}
.datepicker table tr td.active  > span{
  color:var(--color-white);
  background:var(--bg-active);
}

.datepicker table tr td.day:hover > span{
  background: var(--bg-hover);
}

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

.datepicker table th.prev,
.datepicker table th.next{
  cursor: pointer;
}
.datepicker table th.prev{text-align: left; padding-right: 0 !important;}
.datepicker table th.next{ text-align: right; padding-left: 0 !important;}
.datepicker .icon-next,
.datepicker .icon-prev{
  width: 24px;
  height: 24px;

  display: block;
  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='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-size: 14px;
  background-repeat: none;
}
.datepicker .icon-next:hover,
.datepicker .icon-prev:hover{opacity: 1;}

.datepicker .icon-prev{
  transform: rotate(90deg);
}
.datepicker .icon-next{
  transform: rotate(-90deg);
}
.datepicker-inline table td{  padding:3px 0;}

.datepicker-months span.month,
.datepicker-years span.year,
.datepicker table tr td > span.century,
.datepicker table tr td > span.decades{
  display:inline-block;
  margin: 20px 10px;
  cursor: pointer;
  transition: all 0.25s;
  border-radius:4px;
  width: 60px;
  height: 24px;
  line-height: 23px;
  padding: 0 0;
  text-align: center;
  border: 1px solid transparent;
}
.datepicker-months span.month.active,
.datepicker-years span.year.active,
.datepicker table tr td > span.century.active,
.datepicker table tr td > span.decades.active{
  border-color: #913DFF;
  background-color: #913DFF;
  color: #fff;
}

/*==================================================
   Login
==================================================*/
.section-column{
  padding: 0 !important;
}
.section-column .row > div{
  position: relative;
}
.section-column .background{
  background-color: #ccc;
}

.section-column .form{
  margin: 50px 70px;
  max-width: 560px;
}
.form-hgroup{
  margin-bottom: 25px;
}
.form-hgroup h2{
  color: var(--blue-dark);
  margin-bottom: 5px;
}
.form-hgroup p{
  margin: 0;
  font-size: var(--fs-18);
  font-weight: var(--fw-400);
}

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

.forgotpass{
  font-size: var(--fs-18);
  text-align: right;
  font-weight: var(--fw-500);
}

.social-media-icons{
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-media-icons .icons{
  --icon-size:30px;
}

@media (max-width:1366px) {
  .section-column .form{
    margin: 50px;
  }
}

@media (max-width:991.98px) {
  .section-column .background{
    position: relative;
    height: 200px;
  }

  .section-column .form{
    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width:991.98px) {
  .form-hgroup h2{
    font-size: 1.8em;
  }

  .form .fs-18, .forgotpass{font-size: var(--fs-16);}
  .form-hgroup p {font-size: var(--fs-16);}
}

/*==================================================
   Profile
==================================================*/
.profile-setting {
  --sidebar:345px;
}
.profile-setting .container{
  display: flex;
  flex-wrap: wrap;
}
.profile-setting .sidebar{
  width: var(--sidebar);
}
.profile-setting .content{
  width: calc(100% - var(--sidebar));
  padding-left: 30px;
}
.profile-setting .buttons{
  gap:25px;
  padding-top: 35px;
  padding-bottom: 35px;
  justify-content: flex-start;
}
.profile-setting .buttons .btn{
  width: 100%;
  max-width: 300px;
}

.card-menu{
  display: flex;
  flex-direction: column;
  border: 1px solid #E7EEF9;
  border-radius: 8px;
  padding: 15px 20px;
}
.card-menu .title{
  padding-bottom:5px;
}
.card-menu h3{
  color: var(--blue-dark);
}

.card-menu .nav{
  flex-direction: column;
}
.card-menu .nav li{
  position: relative;
  border-bottom: 1px solid #E7EEF9;
  padding:8px 0;
}
.card-menu .nav li:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}
.card-menu .nav li a{
  display: flex;
  gap: 10px;
  height: 55px;
  display: flex;
  align-items: center;
  font-size: var(--fs-18);
  color: var(--text-body);
  font-weight: var(--fw-500);
  position: relative;
}
.card-menu .nav li a span{
  position: relative;
  z-index: 100;
}
.card-menu .nav li a:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: -20px;
  background-color: #F1F3FF;
  opacity: 0;
  transition: all 0.25s;
}
.card-menu .nav li.active a{
  color: var(--text-title);
  font-weight: var(--fw-600);
}
.card-menu .nav li:hover a{
  color: var(--text-title);
}
.card-menu .nav li.active a:before,
.card-menu .nav li:hover a:before{
  opacity: 1;
}

@media (max-width:1440px) {
  .profile-setting {
    --sidebar: 315px;
  }
}
@media (max-width:1199px) {
  .profile-setting {
    --sidebar:260px;
  }
  .profile-setting .content{
    padding-left: 25px;
  }
  .card-menu .title{
    font-size: 1.3em;
  }

  .card-menu .nav li a{
    height: 48px;
  }
}

@media (max-width:991.98px) {
  .profile-setting .sidebar,
  .profile-setting .content{
    width: 100%;
  }

  .profile-setting .content{
    padding-left: 0;
    padding-top: 30px;
  }


}

@media (max-width:670px) {
  .card-menu .nav li{
    padding: 5px 0;
  }
  .card-menu .nav li a{
    height: 40px;
    font-size: var(--fs-16);
    gap: 8px;
  }

  .card-menu .nav li a .icons{
    --icon-size:20px;
  }

  .profile-setting h2{font-size: 1.5em;}

  .profile-setting .buttons{gap: 15px;}
}

/*==================================================
   My order
==================================================*/
.card-table.order li.number{width:20%;}
.card-table.order li.date{width: 20%;}
.card-table.order li.info{width: 40%;}
.card-table.order li.status{width: 20%;}
.card-table-header.order{
  color: var(--text-body);
  font-size: var(--fs-16);
  margin-bottom: 0px;
}

.card-table.order .cart-infos .card-photo{
  width: 75px;
  flex-shrink: 0;
}
.card-table.order .cart-infos .photo{
  width: 100%;
  height: 100%;
}
.card-table.order .cart-infos .card-body{
  padding-left: 15px;
  padding-right: 15px;
  margin-top: auto;
  margin-bottom: auto;
}
.card-table.order .cart-infos h3{
  font-size: var(--fs-16);
}
.card-table-body.order{
  --border-colors:#E5E8F4;
  border: 0;
  border-bottom: 1px solid var(--border-colors);
  border-radius: 0;
  font-weight: var(--fw-400);
  color: var(--text-title);
  font-size: var(--fs-16);
  padding-top:18px;
  padding-bottom: 18px;
  margin-bottom: 0;
}
.card-table-body.order li.status{font-weight: var(--fw-600);}
.card-table-body.order li.status.waiting{color: var(--yellow);}
.card-table-body.order li.status.success{color: var(--green);}
.card-table-body.order li.status.cancel{color: var(--medium-gray);}
@media (max-width:991.98px) {
  .card-table-header.order{font-size: 0.85em;}

  .card-table-body.order{font-size: 0.85em;}
  .card-table.order .cart-infos .card-photo{
    width: 60px;
  }
}

@media (max-width:620px) {
  .card-table-header.order{
    display: none;
  }
  .card-table-body.order {
    border: 1px solid var(--border-colors);
    border-radius: 8px;
    margin-bottom: 15px;
  }
  .card-table.order li.number,
  .card-table.order li.date{
    font-weight: var(--fw-500);
    width: 50%;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-colors);
  }

  .card-table.order li.date{
    text-align: right;
  }

  .card-table.order li.info{
    width: 100%;
    padding: 15px 0;
  }
  .card-table-body.order li.status{
    width: 100%;
    padding-top: 10px;
    border-top: 1px dashed var(--border-colors);
  }
}

/*==================================================
   Order Info
==================================================*/

.card-order-infos{
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0px 0px 20px rgba(190, 200, 225, 0.5);
  width: 100%;
  max-width: 955px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.card-order-infos .card-header{
  background-color:var(--light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
}

.card-order-infos .card-header h6{
  font-size: var(--fs-18);
  font-weight: var(--fw-500);
}
.card-order-infos .card-header h2{
  line-height: 1;
  margin-top: 5px;
  color: var(--blue-dark);
}

.card-order-infos > .card-body{
  padding: 25px 30px;
}

.card-order-infos h3{
  font-size: var(--fs-20);
  margin-bottom: 10px;
  color: var(--blue-dark);

}
.card-order-infos table.table-data th{width: 220px;}
.card-order-infos table.table-data .text-title{font-weight: var(--fw-500);}

.card-order-infos .card-header .btn{
  border-radius: 50px;
  padding: 0 20px;
  min-width: 150px;
  margin-left: auto;
}
.card-order-infos .btn.success{
  --bs-btn-bg:var(--green);
}
.card-order-infos .btn.cancel{
  --bs-btn-bg:var(--medium-gray);
}
.card-order-infos .btn.waiting{
  --bs-btn-bg:var(--yellow);
}
table.table-data{
  width: 100%;
  table-layout: fixed;
}

table.table-data th,
table.table-data td{
  padding: 12px 0;
  font-weight: var(--fw-400);
  border-bottom: 1px solid var(--stroke);
}

@media (min-width:575px) {
  .cart-infos.sm .card-photo{
    width: 80px;
    height: auto !important;
  }
  .cart-infos.sm .card-body{
    padding-left: 15px;
    color: var(--text-title);
  }
  .cart-infos.sm h3{font-size: var(--fs-16);}
}

@media (max-width:991.98px) {
  .card-order-infos .card-header,
  .card-order-infos  > .card-body{
    padding-left: 20px;
    padding-right: 20px;
  }
  .card-order-infos .card-header .btn{
    min-width: 100px;
    --btn-h:40px;
  }

  .card-order-infos table.table-data th{
    width: 160px;
  }
}

@media (max-width:620px) {
  .card-order-infos .card-table-body{
    padding: 15px;
  }
  .card-order-infos .card-table li.infos{
    padding-left: 0;
    width: 100%;
    margin-bottom: 15px;
  }
  .card-order-infos .card-table-body.order li.qty,
  .card-order-infos .card-table-body.order li.status{
    width: 50%;
  }
  .card-order-infos .card-table-body.order li.status{
    text-align: right;
  }
  .card-order-infos .card-table-body.order li.qty{
    border-top: 1px dashed var(--border-colors);
    padding-top: 10px;
    text-align: left;
  }
  .card-order-infos .card-table-body.order li.qty:before{
    content: 'ร ยนโ‚ฌร ยธหœร‚ห†ร ยนโ‚ฌร ยธหœร ยธโ€œร ยนโ‚ฌร ยธหœร‚โ„ขร ยนโ‚ฌร ยธหœร ยธโ€กร ยนโ‚ฌร ยธหœร‚โ„ข : ';
  }
}
@media (max-width:575px) {
  .card-order-infos table.table-data{
    font-size: var(--fs-14);
  }
  .card-order-infos table.table-data th{
    width: 130px;
  }
  .card-order-infos h3{
    font-size: var(--fs-18);
  }
  .card-order-infos .card-header h6{
    font-size: var(--fs-14);
  }
}

/*==================================================
   careers
==================================================*/

.table-info{
  --bs-table-bg:transparent;
  --bs-table-border-color:var(--stroke);
  --bs-table-color:var(--text-body);
  --bs-table-head-bg:#FAFBFF;
  --bs-table-hover-bg:var(--bs-table-bg);
  --bs-table-hover-color:var(--blue-dark)
}

.table-info>:not(caption)>*>* {
  padding: .85rem 1rem;
}

.table-info thead th{
  background-color: var(--bs-table-head-bg);
  color: var(--blue-dark);
  font-weight: var(--fw-600);
  border-bottom: 0;
}

.table-info.careers{
  font-weight: var(--fw-500);
}
.table-info.careers a:hover{
  color: var(--blue-dark);
  text-decoration: underline;
}
.boxed-careers{
  font-weight: var(--fw-400);
}
.boxed-careers .hgroup{
  flex-direction: column;
  border-bottom: 1px solid var(--blue-light);
  padding-bottom: 25px;
  margin-bottom: 25px;
}
.boxed-careers .hgroup h2{
  color: var(--blue-dark);
  margin-bottom: 15px;
}
.boxed-careers .hgroup table{
  table-layout: fixed;
  font-weight: var(--fw-500);
  font-size: var(--fs-18);
}
.boxed-careers .hgroup table td{
  padding:5px 0;
}
.boxed-careers .hgroup table td:first-child{
  width: 150px;
  color: var(--text-title);
}
.boxed-careers .hgroup table td:nth-child(2){
  color: var(--blue-dark);
}
.boxed-careers .article h3{
  background-color: var(--light);
  font-size: var(--fs-20);
  padding: 10px 20px;
  margin-bottom: 20px;
  margin-top: 50px;
}
.boxed-careers .article h3:first-child{
  margin-top: 0;
}
.boxed-careers .article ul{
  margin-left: 20px;
  margin-bottom: 20px;
}
.boxed-careers .article ul li{
  margin-bottom: 10px;
}

.card-career-contact{
  border-radius: 12px;
  padding: 35px 40px;
  background-color:var(--light);
  margin: 50px 0 ;
  font-size: var(--fs-24);
}

.card-career-contact h3{
  color: var(--blue-dark);
  font-size: inherit;
  margin-bottom:20px;
}

.card-career-contact .info-row{
  display: flex;
  gap:15px 40px;
  flex-wrap: wrap;
}

.card-career-contact .text-icon{
  margin: 0;
  display: flex;
  align-items: center;
  gap:20px;
  color: var(--blue-dark);
  font-size:inherit;
  font-weight: var(--fw-500);
}
.card-career-contact .text-icon .icons{
  --icon-size:44px;
}
.card-career-contact .text-icon a{
  color:inherit;
}
.card-career-contact .text-icon:hover a{
  color: var(--blue);
}
@media (max-width:991.98px) {
  .boxed-careers .article ul{
    padding-left: 0;
  }
  .card-career-contact .text-icon .icons{
    --icon-size:36px
  }
  .card-career-contact .text-icon{
    gap: 15px;
  }
}

@media (max-width:575px) {
  .table-info.careers {
    white-space: nowrap;
  }
  .table-info.careers {
    font-size: var(--fs-14)
  }
  .table-info.careers td{
    font-weight: var(--fw-400);
  }

  .boxed-careers .article{
    font-size: var(--fs-15);
  }

  .boxed-careers .hgroup table{
    font-size: var(--fs-15);
  }
  .boxed-careers .hgroup table td:first-child{
    width: auto;
    padding-right:20px;
    white-space: nowrap;
  }

  .boxed-careers .article h3{
    font-size: var(--fs-18);
    margin-top: 40px;
  }
  .boxed-careers .hgroup{
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .boxed-careers .hgroup h2{
    margin-bottom: 10px;
  }
  .card-career-contact{
    padding:30px 20px;
    margin: 30px 0;
  }
  .card-career-contact{
    font-size: var(--fs-20);
  }
  .card-career-contact .info-row{gap: 10px 20px;}
  .card-career-contact .text-icon{
    font-size: var(--fs-14);
    gap: 10px;
  }
  .card-career-contact .text-icon .icons {
    --icon-size:24px;
  }

}

/*==================================================
   services
==================================================*/
.blog-list{
  --bs-gutter-y:50px;
}
.card-blog{
  display: flex;
  position: relative;

  --space:50px;
}
.blog-list > div:nth-child(even) .card-blog{
  flex-direction: row-reverse;
}
.card-blog .card-photo,
.card-blog .card-body{
  width: 50%;
}

.card-blog .card-body{
  padding:calc(var(--space) - 10px) var(--space);
  display: flex;
  flex-direction: column;
  gap:12px;
}
.card-blog h3{
  transition: all 0.25s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-blog p{
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-blog .buttons{
  padding: 0;
  justify-content: flex-start;
}
.card-blog .btn{
  --btn-h:38px;
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
  width: 137px;
  margin-top: 10px;
}
.card-blog:hover .photo{transform: scale(1.15);}
.card-blog:hover h3{color: var(--blue-dark);}
.card-blog:hover .btn{
  --bs-btn-bg:var(--blue);
}

.nav-tabs{
  border:0;
  margin-bottom: 35px;
  --bs-nav-link-color:var(--blue);
  --bs-nav-tabs-link-bg:var(--light);
  --bs-nav-tabs-link-border-color:var(--blue-light);
  --bs-nav-tabs-link-active-border-color:var(--bs-nav-tabs-link-border-color);
  --bs-nav-tabs-link-hover-border-color:var(--bs-nav-tabs-link-border-color);
}
.nav-tabs li{
  flex: 1 1 auto;
}
.nav-tabs .nav-link{
  border-radius:0;
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  border: 1px solid var(--bs-nav-tabs-link-border-color);
  border-right-width:0;
  background-color: var(--bs-nav-tabs-link-bg);
  text-align: center;
  padding:14px 15px;
  position: relative;
}
.nav-tabs li:last-child .nav-link{
  border-right-width:1px;
}

.nav-tabs .nav-link:before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, #3271EA 0%, #263DB6 100%);
  transition: all 0.25s;
  opacity: 0;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active{color: var(--white);}

.nav-tabs .nav-link:hover:before,
.nav-tabs .nav-link.active:before{opacity: 1;}

.nav-tabs .nav-link span{
  position: relative;
  z-index: 10;
}

.card-blog-detail{
  margin-bottom: 60px;
}

.card-blog-detail h3{
  font-size: var(--fs-18);
  color: var(--text-title);
  background-color: var(--light);
  padding: 10px 20px;
  margin-bottom: 30px;
}
.card-blog-detail img{
  max-width: 100%;
  height: auto !important;
  width: auto !important;
}

.card-blog-detail .row{
  --bs-gutter-x: 2rem;
  --bs-gutter-y: var(--bs-gutter-x);
}
.card-blog-detail p{
  /* text-indent: 35px; */
}
@media (max-width:1366px) {
  .card-blog{
    --space:35px
  }
}

@media (max-width:1280px) {
  .blog-list{
    --bs-gutter-y:40px;
  }
  .card-blog{
    --space:25px;
  }
  .card-blog .card-body{
    gap: 5px;
  }

  .card-blog-detail h3{
    margin-bottom: 25px;
  }
  .card-blog-detail .row{
    --bs-gutter-x:1.5rem;
  }

  .card-blog-detail{
    margin-bottom:40px;
  }
}

@media (max-width:991.98px) {
  .card-blog h3{
    font-size: var(--fs-20);
  }
  .card-blog p{
    -webkit-line-clamp: 2;
  }

  .card-blog .btn{
    font-size: var(--fs-14);
    width: 120px;
  }

  .card-blog{
    flex-direction: column !important;
    height: 100%;
  }
  .card-blog .card-photo,
  .card-blog .card-body{
    width: 100%;
  }

  .card-blog .card-body{
    padding: 20px 0  0!important;
  }

  .card-blog .buttons{
    margin-top: auto;
  }

  .blog-list {
    --bs-gutter-y: 40px;
    --bs-gutter-x:18px;
  }

  .nav-tabs{
    margin-left: -30px;
    margin-right: -30px;
  }

  .card-blog-detail .row{
    --bs-gutter-x:20px;
  }
}

@media (max-width:575px) {
  .blog-list {
    --bs-gutter-y:35px;
  }

  .nav-tabs{
    margin-left: -20px;
    margin-right: -20px;
  }

  .nav-tabs .nav-link{
    padding: 10px 5px;
    font-size: var(--fs-16);
  }

  .card-blog-detail h3{
    font-size: var(--fs-16);
    margin-bottom: 20px;
  }
}

/*==================================================
   Portfolio
==================================================*/
.card-portfolio{
  display: flex;
  /* box-shadow: 0px 0px 15px rgba(190, 200, 225, 0.3); */
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 20px;
  margin-bottom:30px;
  transition: all 0.25s;

  --photo-width:345px;
}

.card-portfolio .card-photo{
  width: var(--photo-width);
}
.card-portfolio .card-body{
  width: calc(100% - var(--photo-width));
  padding-left: 25px;
}

.card-portfolio h3{
  font-size: var(--fs-24);
  margin-bottom:8px;
  margin-top: 20px;
  transition: all 0.25s;
}
.card-portfolio p.date{
  display: flex;
  align-items: center;
  gap:5px;
  font-size: var(--fs-14);
}
.card-portfolio p.date .icons{
  --icon-size:18px;
  top: -1px;
}
.card-portfolio p.date path{
  fill: var(--text-body);
}

.card-portfolio .buttons{
  gap: 30px;
  justify-content: flex-start;
  padding-top:15px;
}
.card-portfolio .buttons .btn{
  --btn-h:36px;
  font-size: var(--fs-16);
  font-weight: var(--fw-400);
  width: 160px;
  gap:6px;
}
.card-portfolio .buttons .btn .icons{
  --icon-size:20px;
}

.card-portfolio:hover{
  box-shadow: 0px 0px 15px rgba(190, 200, 225, 0.3);
}

.card-portfolio:hover h3{
  color: var(--blue-dark);
}

.googlemap{
  height: 400px;
  position: relative;
  margin: 60px 0 20px;
}
.googlemap iframe{
  width: 100%;
  height: 100%;
}

.card-contact-infos{
  background-color: var(--light);
  border-radius: 12px;
  padding: 50px;
  height: calc(100% - 60px);
}
.card-contact-infos .hgroup{
  flex-direction: column;
  padding-bottom:30px;
}
.card-contact-infos .hgroup .logo{
  width: 200px;
  height: auto;
  margin-bottom: 2px;
}
.card-contact-infos .hgroup h3{
  color: var(--blue-dark);
  margin: 10px 0;
}
.card-contact-infos .hgroup p{
  margin: 0;
  color: var(--blue);
  font-weight: var(--fw-400);
}

.card-contact-infos table th,
.card-contact-infos table td{
  font-weight: var(--fw-400);
  vertical-align: top;
  padding: 10px 0;
}
.card-contact-infos table th{
  color: var(--text-title);
  width: 100px;
}
.card-contact-infos table a{color: var(--blue-dark); text-decoration: underline;}
.card-contact-infos table a:hover{color: var(--blue); text-decoration: underline;}
.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;
}
.contact-list .icon-circle{
  background-color:var(--blue-light);
  border-radius: 50%;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-list .icon-circle path{fill: var(--white);}
.contact-list a:hover{
  color: var(--blue-dark);
  text-decoration: underline;
}

@media (max-width:1366px) {
  .contact-list{
    gap: 15px;
  }
  .contact-list .icon-circle{
    width: 48px;
    height: 48px;
  }
}

@media (max-width:1199px) {
  .card-contact-infos{
    padding: 35px;
  }
  .card-contact-infos .hgroup{
    padding-bottom: 20px;
  }
  .card-contact-infos .hgroup h3{
    margin-bottom: 5px;
  }
  .card-contact-infos .hgroup .logo{
    width: 160px;
  }
  .contact-list .icon-circle{
    width: 42px;
    height: 42px;
  }
}

@media (max-width:991.98px) {
  .card-portfolio{
    --photo-width:240px;
    padding: 15px;
  }
  .card-portfolio h3{
    margin-top: 0;
    font-size: var(--fs-20);
  }
  .card-portfolio .buttons{
    gap:15px;
  }
  .card-portfolio .buttons .btn{
    width: 140px;
  }

  .card-contact-infos{
    height: auto;
    margin-top: 50px;
  }
}

@media (max-width:670px) {
  .card-portfolio h3{
    font-size: var(--fs-18);
  }
  .card-portfolio .card-body{
    padding-left: 15px;
  }
  .card-portfolio .buttons{
    gap:10px;
    padding-top: 5px;
  }

  .card-portfolio .buttons .btn{
    padding:0 10px;
    width: 110px;
    font-size: var(--fs-14);
  }
  .card-portfolio .buttons .btn .icons{
    --icon-size:16px;
  }
}

@media (max-width:575px) {
  .card-portfolio{
    flex-direction: column;
    margin-bottom: 20px;
  }
  .card-portfolio .card-photo{
    width: 100%;
  }
  .card-portfolio .card-body{
    padding: 20px 0 10px;
    width: 100%;
  }
  .card-portfolio h3{
    font-size:1.15em;
  }

  .card-contact-infos{
    padding:30px 20px;
  }
  .contact-list li{gap: 10px;}
  .contact-list .icon-circle {
    width:34px;
    height: 34px;
    margin-bottom: auto;
  }
  .contact-list .icon-circle .icons{
    --icon-size:20px
  }

  .googlemap{margin-top: 25px;}
}
/*==================================================
   Committee
==================================================*/

.title-bar{
  font-size: var(--fs-18);
  color: var(--text-title);
  background-color: var(--light);
  padding: 10px 20px;
  margin-bottom: 30px;
}

.card-committee{
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.card-committee .card-photo{
  width: 200px;
  margin: 0 auto 0;
  overflow:visible;
  display: flex;
  align-items: center;
  justify-content: center;

  filter: drop-shadow(0px 0px 15px rgba(175, 178, 199, 0.25));
}

.card-committee .card-photo img{
  width: 100%;
}
.card-committee .card-photo .mask {
  -webkit-mask-image:url(../img/thumb/hex.svg);
  mask-image: url(../img/thumb/hex.svg);
  background-size: contain;
  background-position: center;
  mask-repeat: no-repeat;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.card-committee .card-photo .mask img{
  margin: auto;
}
.card-committee .card-photo .hex{
  position: absolute;
  top: 1px;
  right: -16px;
  z-index: 1;
}
.card-committee .card-body{
  padding: 20px 10px;
}
.card-committee h3{
  color: var(--blue-dark);
  font-size: var(--fs-18);
  margin-bottom: 5px;
}
.card-committee p{
  margin: 0;
  font-weight: var(--fw-400);
}

.card-committee .icon-plus{
  width:42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;

  position: absolute;
  right: 10px;
  bottom: 20px;
  z-index: 20;
}
.card-committee .icon-plus .icons{
  --icon-size:16px;
}
.card-committee .icon-plus .icons path{fill: var(--white);}

.card-committee:hover .icon-plus{
  background-color: var(--blue);
}

.card-committee.lg{
  margin-top: 20px;
  margin-bottom: 20px;
}
.card-committee.lg .card-photo{
  width: 245px;
}
.card-committee.lg .card-photo .mask {
  -webkit-mask-image:url(../img/thumb/hex-2.svg);
  mask-image: url(../img/thumb/hex-2.svg);
}
.card-committee.lg .card-photo .hex{
  right:-5px;
}
.card-committee.lg h3{
  font-size: var(--fs-24);
}
.card-committee.lg p a.link{
  color: var(--blue-dark);
  text-decoration: underline;
  font-weight: var(--fw-600);
}
.card-committee.lg p a.link:hover{
  color: var(--blue);
}

.card-chairman{
  display: flex;
  margin-bottom: 35px;
}
.card-chairman .card-photo,
.card-chairman .card-body{
  width: 50%;
}

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

.card-chairman h2{
  color: var(--blue-dark);
}
.card-chairman h3{
  color:var(--text-body);
  font-weight: var(--fw-500);
  margin: 10px 0;
}

.card-chairman .buttons{
  padding:10px 0 0;
  gap: 20px;
}
.card-chairman .buttons .btn{
  --btn-h:38px;
  font-size: var(--fs-16);
  width: 160px;
}

@media (max-width:1199px) {
  .card-chairman h2{font-size: 1.5em;}
  .card-chairman h3{font-size: 1.2em; margin: 5px 0;}
  .card-chairman .buttons{gap: 15px;}
}

@media (max-width:880px) {
  .card-chairman{
    flex-direction: column;
    max-width:500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap:30px;
  }
  .card-chairman > div{
    width: 100% !important;
  }
}

@media (max-width:575px) {
  .card-chairman h2{font-size: 1.3em;}
  .card-chairman h3{font-size: 1.1em;}

  .card-chairman .buttons{
    gap: 12px;
    width: 100%;
    max-width: 280px;

  }
  .card-chairman .buttons .btn{
    width: 50%;
    padding: 0;
    min-width: 0;
    font-size: 0.9em;
  }
}

/*==================================================
    Modal
==================================================*/

.modal{
  --bs-modal-bg:var(--white);
  --bs-modal-border-radius:10px;
  --bs-modal-border-width:0;
  --bs-modal-padding:30px;
}

.modal-content{
  background: var(--bs-modal-bg);
  box-shadow: 1px 1px 9px -2px rgba(0, 0, 0, 0.25);
}


.modal-alert{
  --bs-modal-width:320px;
  text-align: center;
}

.btn-close{
  opacity: 1;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111'%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/1em auto no-repeat;
}
.modal-dialog {
  max-width: var(--bs-modal-width);
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.modal-committee{
  --bs-modal-width:770px;
}

.modal-committee .card-contact-infos{
  padding: 20px 30px;
  margin-bottom: 10px;
  margin-top: 0;
}
@media (max-width:1366px) {
  .nav-tabs.committee .nav-link,
  .nav-tabs.about .nav-link{
    font-size: 1em;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width:575px) {
  .nav-tabs.committee,
  .nav-tabs.about{
    flex-wrap: nowrap;
  }
  .nav-tabs.committee li,
  .nav-tabs.about li{
    width: 20%;
  }
  .nav-tabs.committee .nav-link,
  .nav-tabs.about .nav-link{
    height: 100%;
    font-size: 0.88em;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .card-contact-infos table{
    margin-top: 10px;
  }
  .card-contact-infos table th,
  .card-contact-infos table td{
    width: 100%;
    display: block;
    padding: 0;
  }

  .card-contact-infos table th{
    font-weight: var(--fw-600);
  }
  .card-contact-infos table td{
    padding-bottom: 15px;
  }

  .modal{
    --bs-modal-padding:20px;
  }
  .modal-committee .card-contact-infos{
    padding: 20px;
  }
}

/*==================================================
  About us
==================================================*/
.section-vistion{
  text-align: center;
}
.section-vistion h2,
.section-vistion h3{
  color: var(--white);
}
.section-vistion h3{
  font-size: var(--fs-30);
  margin-bottom:20px;
  margin-top: 20px;
}
.section-vistion h2{
  font-size:2.5em
}

.section-vistion h2{
  position: relative;
}

.section-vistion .quote{
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1060px;
  display: flex;
  margin: 0 auto 10px;
}
.section-vistion .quote .icons{
  --icon-size:56px;
  vertical-align: top;
}
.section-vistion .quote .icons.left{top: -10px;}
.section-vistion .quote .icons.right{
  bottom: -10px;
  transform: rotate(-180deg);
  margin-top: auto;
}
.tab-content-about .article{
  font-weight: 400;
}
.tab-content-about h2{
  margin: 25px 0 15px;
  color: var(--blue-dark);
}
.tab-content-about ul{
  padding-left: 17px;
}
.tab-content-about ul li{
  margin-top: 8px;
  margin-bottom: 8px;
}
.tab-content-about .text-gray{
  color: var(--text-body);
}
.tab-content-about img{
  width: 100%;
}
@media (max-width:1280px) {
  .section-vistion .quote .icons{
    --icon-size:42px;
  }
  .section-vistion h3{
    font-size: 1.6em
  }
  .section-vistion h2{
    font-size: 2em;
  }
}

@media (max-width:991.98px) {
  .section-vistion h3{
    margin-top: 0;
  }
  .section-vistion .quote{
    margin-bottom: 0;
  }
}
@media (max-width:767px) {
  .section-vistion .quote{
    gap: 10px;
  }
  .section-vistion .quote .icons{
    --icon-size:34px;
  }
  .section-vistion h3{
    font-size: 1.3em;
    margin-bottom: 10px;
  }
  .section-vistion h2{
    font-size: 1.6em;
  }

  .tab-content-about h2{
    margin-top: 15px;
  }
}

@media (max-width:575px) {
  .section-vistion h3{
    font-size: 1.1em;
    font-weight: var(--fw-500);
  }
  .section-vistion h2{
    font-size: 1.2em;
  }
  .section-vistion .quote .icons{
    --icon-size:24px;
  }
}

/*==================================================
   footer
==================================================*/
.footer{
  background-color: var(--blue-dark);
  color: #ADD7FE;
  padding:35px 0;
  background-image: url(../img/thumb/bg-footer.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.footer hr{
  border-color:#212A59;
  opacity: 1;
  margin: 25px 0;
}
.footer h3{
  font-size:var(--fs-18);
  color: #fff;
  margin-bottom: 16px;
}
.nav-footer{
  flex-direction: column;
  margin-top: -8px;
  padding-bottom: 5px;
}
.nav-footer li a{
  display: inline-block;
  padding: 5px 0;
  color: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  color: #808DBE;
}
.nav-footer li a:hover{
  color:rgba(255, 255, 255, 0.8);
}
.nav-footer .nav {
  flex-direction: column;
  padding-left: 12px;
  /* padding-bottom: 10px; */
}
.nav-footer .nav li a{
  position: relative;
  font-size: var(--fs-12);
  padding: 3px 0 3px 12px;
  display: block;
}
.nav-footer .nav li a:before{
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #808DBE;
}
.nav-footer .nav .nav{
  padding-left:15px;
}
.nav-footer .nav .nav li a:before{
  display: none;
}
.row.footer-links{
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 1.5rem;;
}


.footer-infos {
  font-size: var(--fs-14);
  color: #8BA5E6;
  padding-right: 50px;
}
.footer-infos .logo{
  display: flex;
  gap: 10px;
  height: 40px;
  margin-bottom: 20px;
  align-items: center;
}
.footer-infos .logo .logo-1{
  height: 36px;
}
.footer-infos .logo img{
  height: 100%;
  width: auto;
}
.footer-infos p{
  margin: 0;
  font-weight: var(--fw-400);
}
.footer-infos h3{
  font-size: var(--fs-20);
  color: #fff;
  font-weight: var(--fw-500);
  margin-bottom: 10px;
}
.footer-group{
  display:flex;
  justify-content: space-between;

}
.footer-contact {margin-top: auto;}
.footer-contact .tel{
  color: var(--yellow);
  font-size: 30px;
  font-weight: var(--fw-500);
  margin-bottom: 0;
}

.followus{
  display: flex;
  gap: 14px;
}
.followus a:hover {opacity: 0.7;}

.followus path[fill]{fill: #fff ;}
.followus path[stroke]{stroke:#fff;}
.footer-copyright{
  font-size: var(--fs-12);
  color: #6C80C8;
  background-color: #10144e;
  text-align: center;
  padding: 18px 0;
}

@media (max-width:991.98px) {
  .footer{padding: 50px 0;}
  .footer h3{margin-bottom: 10px; font-size: var(--fs-16);}
  .footer hr{margin: 35px 0;}
  .footer-group{
    flex-direction: column;
  }
  .footer-contact{
    padding-top:25px;
  }

  .footer-infos h3{
    font-size: 1.125em;
  }
  .nav-footer{margin-top: -4px;}
}

@media (max-width:575px) {
  .footer{padding: 40px 0;}
  .footer-infos .logo{
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    width: auto;
    max-width: 100%;
  }

  .footer-infos .logo img.logo-2{max-width: 100%;}

  .row.footer-links{ --bs-gutter-y:0.1rem;}

}

.button-fixed{
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap:15px;
  z-index: 1000;
}
.button-fixed .icons{
  --icon-size:50px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: var(--blue-dark);
  display: flex;

}
.button-fixed .icons img,
.button-fixed .icons svg{
  width:30px;
  height: 30px;
  margin: auto;
  display: block;
}
.button-fixed .icons svg path{fill: #fff;}
.button-fixed .icons:hover{
  border-color: var(--light-orange);
}

.button-fixed .icons.light{
  background-color: var(--blue);
}

.card-tools{
  position: fixed;
  right: -320px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  z-index: 1090;
  width: 280px;
  box-shadow: 0px 0px 20px rgba(136, 136, 152, 0.3);
  transition: all 0.5s;
  opacity: 0;

}

.card-tools-opened .card-tools {
  pointer-events: all;
  right: 20px;
  opacity: 1;
}
.card-tools .card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #E2E5F1;
  margin-bottom: 10px;
}
.card-tools .btn-close{
  width: 30px;
  height: 30px;
  padding: 0;
  top: 0;
  right: 0;
  position: relative;
  border-radius: 50%;
  background: var(--blue-dark) 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/9px auto no-repeat;
  opacity: 1;
}
.card-tools .card-header h2{
  color: var(--text-title);
  font-size: var(--fs-18);
}
.card-tools .card-body{
  padding: 0 0 20px;
}
.card-tools .nav{
  flex-direction: column;
}

.card-tools .nav .icons{
  --icon-size:30px;
}
/* .card-tools .icons path{fill: var(--body-color);} */
.card-tools .nav h3,
.card-tools .hgroup h3{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-dark);
  font-size: var(--fs-16);
  padding: 10px 20px;
  transition: all 0.25s;
  cursor: pointer;
  pointer-events: none;
}
.card-tools .nav li:first-child,
.card-tools .nav li:first-child:hover{
  background-color: transparent !important;
}
.card-tools .nav li:last-child{
  border-bottom: 0 !important;
  margin-top:15px ;
}
.card-tools .nav li.active,
.card-tools .nav li:hover{
  background-color:#EAF0FF;
}
.card-tools .hgroup h3{
  margin-bottom: 10px;
}

.card-tools .hgroup{
  display: flex;
  flex-direction: column;
}

.page-fontsize{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 15px;
  margin-top: -5px;
  padding-right: 10px;
}
.page-fontsize > span{
  width: 30px;
  height: 30px;
  color: #474749;
  cursor: pointer;
  border-radius: 50%;
  background-color:#F3F3F3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.pc .page-fontsize > span:hover,
.page-fontsize > span.active{
  background-color:#E2EAFF;
  color: var(--blue-dark);
}

.page-fontsize > span.level-1{font-size: 18px;}
.page-fontsize > span.level-2{font-size: 22px;}
.page-fontsize > span.level-3{font-size: 26px;}

.btn:active path[fill]{fill: var(--bs-btn-hover-icon-color);}
.btn:active line[stroke]{stroke:var(--bs-btn-hover-icon-color);}

@media (max-width:144px) {
  .button-fixed{
    bottom: 30px;
    right: 30px;
  }
}

@media (max-width:575px) {
  .card-tools .nav .icons{
    --icon-size:26px
  }
  .card-tools .nav h3{
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .button-fixed{
    bottom: 20px;
    right: 20px;
    gap: 8px;
  }
  .button-fixed .icons {
    --icon-size:40px;
  }
  .button-fixed .icons img, .button-fixed .icons svg{
    width: 22px;
    height: 22px;
  }
}

/* สร้าง Class สำหรับแผ่นฟิล์ม */
.grayscale-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent; /* พื้นหลังใส */
  backdrop-filter: grayscale(80%); /* พระเอกของเรา: ย้อมสีสิ่งที่อยู่ข้างหลัง */
  -webkit-backdrop-filter: grayscale(80%); /* Support Safari */
  z-index: 99999; /* ให้มันอยู่บนสุด ทับทุกอย่าง */
  pointer-events: none; /* สำคัญมาก! สั่งให้คลิกทะลุได้ (ไม่งั้นจะกดลิงก์ไม่ได้เลย) */
}