/*==================================================
    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; */

}

:root {

  --bs-body-color:var(--color-text);
  --bs-body-bg:#fff;
  --bs-body-text-align:left;
  --bs-body-font-weight:var(--fw-400);
  --bs-body-line-height:1.55;
  --bs-body-font-size:var(--fs-14);
  --bs-body-font-family:"Noto Sans Thai", sans-serif;
  --bs-link-hover-color:inherit;

  --H0:var(--fs-48);
  --H1:var(--fs-32);
  --H2:var(--fs-28);
  --H3:var(--fs-24);
  --sub-header:var(--fs-20);
  --title1:var(--fs-18);
  --title2:var(--fs-16);

  --fs-48:48px;
  --fs-32:32px;
  --fs-28:28px;
  --fs-24:24px;
  --fs-20:20px;
  --fs-18:18px;
  --fs-16:16px;
  --fs-14:14px;

  --color-brand-primary:#5834ED;
  --color-brand-secondary:#913DFF;
  --color-primary-solid:#3D3D3D;
  --color-border:#EDEDED;
  --color-text:#3D3D3D;

  --bs-primary-rgb:88, 52, 237;

  --card-border-radius:22px;

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

  --navbar-brand:90px;
  --header-height:85px;

  --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:1440px) {
  :root{ }
}

@media (max-width:767px) {
  :root{
    --fs-48:32px;
    --fs-32:28px;
    --fs-24:20px;
  }
}

@media (max-width:670px) {
  :root{
    --navbar-brand:70px;
    --header-height:75px;
  }
}


.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{
  --input-h:40px;
 -webkit-appearance: none;
  padding:0 12px;

  font-weight:var(--fw-400);
  font-size: var(--fs-14);
  border:1px solid #EDEDED;
  color:var(--color-text);
  /* filter: drop-shadow(0px 0px 5px #EDF0FF); */
  height:var(--input-h);
  line-height:calc(var(--input-h) - 0px);
  background-color:#fff;
  border-radius:8px;

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

.form-control::placeholder {
  opacity:1;
  color:#BDBDBD;
}

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

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

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

.form-select{
  background-image: url(../img/icons/icon-select-option.svg);
  background-position:right .85rem center;
  background-size: 14px;
  background-repeat: no-repeat;
}

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

.form-control:focus,
.form-select:focus{
  color: var(--bs-body-color);
  background-color: #fff;
  border-color: #913DFF;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(241, 231, 255, 1);
}
.form-select:not(.selected){color:#A3A3A3}
.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: 14px;
}
.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:18px;
  height:18px;
  border-width:2px;
  position: relative;
  margin: 0;
  margin-left: 0 !important;
  flex-shrink: 0;
  border-color:#656565;
  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-color: #F0F0F0;
  margin-top: 0;
  width: 20px;
  height: 20px;
}

.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='3' fill='%23008D7A'/%3e%3c/svg%3e");
  border-color: #913DFF;
}
.form-check-input[type=radio]:checked + .form-check-label{color: var(--text-title-black);}
.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:#913DFF;
  border-color:#913DFF;
}

.form-check-input:checked + .text-active-black{color:#1B204C; font-weight: var(--fw-500);}
.form-check label strong{font-weight: var(--fw-500);}

.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:0;
  font-size:12px;
  font-weight: var(--fw-700);
  display: block;
  color: #656565;
  margin-bottom: 8px;
}
label.title .icon-info{
  --size:16px;
  background-image: url(../img/icons/icon-info.svg);
  opacity: 0.6;
  cursor: pointer;
}
label.title .icon-info:hover {
  opacity: 1;
}
.form-group span.error,
.form-check span.error,
.input-error,
.otp-list span.error{
  color:#FF696D;
  padding-top: 5px;
  display: flex;
  font-size: 12px;
  gap: 2px;
  margin-top: 2px;

}

.form-group span.error:before,
.form-check span.error:before,
.input-error:before,
.otp-list span.error:before{
  content: '';
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-info-error.svg);
}
.form-group .group{
  position: relative;
  display: block;
}
.form-group .icons.left,
.form-group .icons.right{
  position: absolute;
  top: 0 !important;
  right: 11px;
  height: 40px;
  width:18px;

  transition: none;
  z-index: 1;
}

.form-group .icons.left{
  left: 14px;
  right: auto;
}

.form-group .icons.left + .form-control{
  padding-left: 45px;
}
.form-group .icons.right + .form-control{
  padding-right: 40px;
}

.form-group  .error[style] + .icons{bottom: 0 !important;}

.error + .form-select{border-color: #DF1642; }
.star{color: #FF3E40;}
.form-select + .error{
  position: absolute;
  left: 0;
  top: 100%;
  line-height: 0.9;
}

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

.form-group .icon-eye{
  margin-right: 5px;
  --icon-size:18px ;
  width: var(--icon-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);}


.form-control.error{
  border-color: #FFA0A2;
  outline: 0;
  /* box-shadow: 0 0 0 .25rem rgba(255, 160, 162, 0.3); */
}
.form-control.error:focus{
  box-shadow: 0 0 0 .20rem rgba(255, 160, 162, 0.3);
}
.form-check span.error{
  position: absolute;
  left: 0;
  bottom: 0;
}

.otp-list span.error{
  position: absolute;
  left: 0;
  bottom: 0;
}
.form-check input.error {border-color: #FF696D;}
.form-check input.error ~ .form-check-label{
  margin-bottom:25px;
}
.btn{
  --btn-h:40px;
  position: relative;
  padding:1px 15px 0;
  height:var(--btn-h);
  line-height:calc(var(--btn-h) - 0px);
  transition: all 0.25s ease-in-out;
  font-weight: var(--fw-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  gap:5px;
  max-width: var(--max-width);
  --max-width:none;
  --bs-btn-border-width:0;
  --bs-btn-border-radius:8px;

  --bs-btn-color:#fff;
  --bs-btn-bg:var(--color-brand-primary);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--color-brand-secondary);

  --bs-btn-active-color:var(--bs-btn-hover-color);
  --bs-btn-active-bg:var(--bs-btn-hover-bg);
  --bs-btn-active-border-color:var(--bs-btn-hover-border-color);

  --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: 10;
}
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn-gray{
  --bs-btn-border-color:#EDEDED;
  --bs-btn-color:#3D3D3D;
  --bs-btn-bg:#DEE1FF;
  --bs-btn-hover-border-color:#EDEDED;
  --bs-btn-hover-color:#3D3D3D;
  --bs-btn-hover-bg:#F8F8F8;
}
.btn-outline{
  --bs-btn-border-width:1px;
  --bs-btn-border-color:var(--color-brand-primary);
  --bs-btn-color:var(--color-brand-primary);
  --bs-btn-bg:transparent;
  --bs-btn-hover-border-color:var(--color-brand-secondary);
  --bs-btn-hover-color:var(--color-brand-secondary);
  --bs-btn-hover-bg:transparent;
}

.btn-link {
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: #fff;
  text-decoration: none;
}

.btn-trans{
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: #fff;
  padding: 0;
}

.btn-32{
  border-radius: 50px;
  --btn-h:32px;
}
.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 (max-width:1199px){
}

@media (max-width:670px){

}



/*==================================================
    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;

  --size:24px;
  flex-shrink: 0;
  width: var(--size);
  height: var(--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-101{--size:101px;}
.icons.w-40{--size:40px;}
.icons.w-20{--size:20px;}
.container-fluid{
  --padding-x:80px;
  max-width:100%;
  padding-left:var(--padding-x);
  padding-right:var(--padding-x);
  position: relative;
  z-index: 9;
}

.container{
  --padding-x:120px;
  max-width: calc(1530px + (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-target.tabien{
  top: -180px;
}

.section{
  display: block;
  position: relative;
  flex: 1 1 auto;
  --padding-top:30px;
  --padding-bottom:30px;

  padding: var(--padding-top) 0 var(--padding-bottom);
}

.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: 1366px) {
  .container{
    --padding-x:80px;
  }
}

@media (max-width: 1280px) {
  .container{
    --padding-x:50px;
  }
}

@media (max-width: 1024px) {
  .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;
  }
}

/*==================================================
    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;}

.link-white{color:#fff; text-decoration: underline;text-decoration-thickness: 1px;}
a.link-hover-white:hover{color: #fff;}
p a:hover{text-decoration: underline;text-decoration-thickness: 1px;}

.text-gray{color: #656565;}
.text-disabled{color: #BDBDBD;}
b, strong{
  font-weight: var(--fw-700);
  font-family: inherit;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6{
  margin:0;
  font-weight:var(--fw-700);
  font-style: normal;
  line-height:1.4;
  position: relative;
}

.h1{font-size: var(--H1);}
.h2{font-size: var(--H2);}
.h3{font-size: var(--H3);}


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

  height: var(--header-height);
  z-index: 1020;
  display: block;

  background-color:#fff;
  box-shadow: 0px 0px 20px #EDF0FF;
}

.header .container,
.header .container-fluid{
  display: flex;
  align-items:center;
  justify-content: space-between;
  z-index: 400;
  position: relative;
  height: 100%;
}

.navbar-brand{
  padding: 0;
  flex-shrink: 0;
  z-index: 200;
  width: var(--navbar-brand);
  margin: auto 0;
  position: relative;
}

.navbar-brand a{
  display: block;
}
.navbar-brand img,
.navbar-brand svg{
  height: auto;
  width: 100%;
  margin: 0;
}

.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{
  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='%233D3D3D' 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:16px;
  --bs-dropdown-menu-border-radius:0;
  --bs-dropdown-border-color:#fff;
  --bs-dropdown-bg:#fff;
  --bs-dropdown-color:#7B8992;
  --bs-dropdown-padding-x:15px;
  --bs-dropdown-padding-y:7px;
  --bs-dropdown-spacer:0;
  --bs-dropdown-min-width:100%;
  --bs-dropdown-link-hover-bg:transparent;
  --bs-dropdown-border-width:0;

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

  box-shadow: none;
  top: 100%;
  padding:15px 0;
  width: auto;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.dropdown-menu.right{
  left: auto;
  right: 0;
}
.dropdown-menu li{cursor: pointer;}

.dropdown:hover > .dropdown-menu,
.dropdown > .dropdown-menu.show{
  opacity: 1;
  top: 100%;
  pointer-events: all;
}

.dropdown-menu > li{
  position: relative;
  z-index: 10;
  margin: 2px 0;
}

.dropdown-menu > li > a{
  display: block;
  position: relative;
  padding:11px var(--bs-dropdown-padding-x);
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--fs-14);
}

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


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

.nav-general{
  display: flex;
  align-items: center;
  gap: 15px;
}
.nav-general > li > a{
  font-size: var(--title2);
  font-weight: var(--fw-700);
  padding: 0 15px;
}
.nav-general > li > a:not(.btn){
  height: 32px;
  color: var(--color-brand-primary);
}
.nav-general > li > a:not(.btn):hover{
  color:var(--color-brand-secondary);
}
.nav-general > li > a.btn{
  --btn-h:32px;
  --bs-btn-border-width:1px;
  --bs-btn-bg:#DEE1FF;
  --bs-btn-color:var(--color-text);
  --bs-btn-border-color:#DEE1FF;
  --bs-btn-hover-color:var(--bs-btn-color);
  --bs-btn-hover-bg:#F8F8F8;
  --bs-btn-hover-border-color:#EDEDED;
  border-radius: 50px;
}


.btn-menu{
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:transparent;
  --btn-h:24px;
  width: var(--btn-h);
  padding: 0 !important;
  z-index: 1060;
  border-radius: 0;
  position: relative;
  overflow: visible;
  display: none;
}

.btn-menu:before,
.btn-menu:after{display: none;}
.btn-menu .group{
  display: block;
  position: relative;
  width:22px;
  height:14px;
  margin: 0 auto 0
}
.btn-menu .group span{
  height: 2px;

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


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

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

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

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

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

.navbar-slider{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* bottom: 0; */
  transition: all 0.65s;
  background-color: #fff;

  z-index: 1010;
  padding: 20px;
  padding-top:var(--header-height);
  overflow-y: auto;

  display: none;
}

.navbar-slider hr{
  border-color: var(--color-border);
  opacity: 1;
  margin: 0 0 25px;
}

.navbar-slider h3{
  font-size: 16px;
  color: var(--color-text);
  font-weight: var(--fw-400);
}

.navbar-slider .btn{
  --btn-h:38px;
  --bs-btn-border-width:1px;
  --bs-btn-bg:#DEE1FF;
  --bs-btn-color:var(--color-text);
  --bs-btn-border-color:#DEE1FF;

  --bs-btn-hover-color:var(--bs-btn-color);
  --bs-btn-hover-bg:var(--bs-btn-bg);
  --bs-btn-hover-border-color:var(--bs-btn-border-color);
  font-size: 16px;

  border-radius: 50px;
}

.navbar-slider .btn.btn-login{
  --bs-btn-border-color:var(--color-brand-primary);
  --bs-btn-color:var(--color-brand-primary);
  --bs-btn-bg:#fff;
}
.navbar-slider .buttons {
  gap: 20px;
  padding: 30px 0 30px;
}
.navbar-slider .buttons .btn{
  width: 100%;
}
.nav-menu-thumb {
  gap: 40px 0;
  padding-top: 30px;
}
.nav-menu-thumb li{
  width:33.33%;
}
.nav-menu-thumb a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 14px;
}
.nav-menu-thumb a path{fill: var(--color-primary-solid);}
.nav-menu-thumb li.active a{font-weight: var(--fw-700); color: var(--color-brand-primary);}
.nav-menu-thumb li.active a path{fill: var(--color-brand-primary);}

.card-user-infos{
  display: flex;
  align-items: center;
  padding:30px 0;
}
.card-user-infos .card-photo{
  width: 80px;
  height: 80px;
}
.card-user-infos .card-photo img{
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}
.card-user-infos .card-body{
  display:flex;
  justify-content: space-between;
  padding-left:15px;
}
.card-user-infos h3{
  font-size: var(--title2);
  font-weight: var(--fw-700);
}
.card-user-infos .seemore{
  margin-left: auto;
  color: var(--color-brand-primary);
  font-size: 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap:6px;
}
.card-user-infos .seemore:after{
  content: '';
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-arrow-right.svg);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
@media (min-width:992px) {
  .nav-menu{
    gap: 10px;
    margin-left: 35px;
    margin-right: auto;
    height: var(--header-height);
    padding:10px 0;
  }
  .nav-menu > li > a{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: var(--title2);
    font-weight: var(--fw-700);
    width: auto;
    height: 100%;
    padding: 0 15px;
  }

  .nav-menu > li > a:after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 8px;
    background-color: var(--color-brand-primary);
    transition: all 0.25s;
    opacity: 0;
  }

  .nav-menu > li:hover > a,
  .nav-menu > li.active > a{color: var(--color-brand-primary);}

  .nav-menu > li:hover > a:after,
  .nav-menu > li.active > a:after{opacity: 1; bottom: 0;}
}

@media (min-width:1100px) {
  .nav-menu > li > a{width: 98px; padding: 0;}
}

@media (min-width:1201px) {
  .nav-menu > li > a{width: 112px;}
}

/*==================================================
   Mobile
==================================================*/
@media (max-width:991.98px) {
  .header .nav-menu,
  .header .nav-general{display: none;}

  .navbar-slider{
    display: block;
    top: -100%;
  }

  .nav-opened .navbar-slider {
    pointer-events: all;
    top: 0;
  }

  .btn-menu{display: flex;}
}

@media (max-width:575px) {
  .navbar-slider .btn{
    --btn-h:32px;
    font-size: var(--title2);
  }
  .navbar-slider .buttons{
    gap: 10px;
  }
  .nav-menu-thumb a{
    font-size: 12px;
  }
  .navbar-slider h3{
    font-size: 14px;
  }

  .card-user-infos{
    padding: 25px 0;
  }
}
/*==================================================
   Section
==================================================*/

.page{
  display: flex;
  position: relative;
  overflow: hidden;
  padding-top:var(--header-height);
  flex-direction: column;
  min-height: 100%;
  background-color: var(--bg);
  --bg:#fff;
}

.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#191717;
  z-index: 1090;
  display:flex;
}

.loader {
  width: 34px;
  height:34px;
  margin:  auto;
  display: block;
  border-top: 3px solid #5834ED;
  border-right: 3px solid rgba(255, 255, 255, 0.2);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid rgba(255, 255, 255, 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;
  }
}

.section{
  position: relative;
}

.card{
  position: relative;
  min-height: 100%;
  --bs-card-border-width:0;
}
.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  img{
  width: 100%
}

.card-body{color: inherit;}

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

.card-link{
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 100;
  z-index: 40 !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;
}

/*==================================================
   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: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;
  flex-direction: column;
  align-items: center;
  justify-content: center
}


.swiper-pagination.banner{
  padding: 0;
  position: absolute;
  bottom: 30px;
}

.swiper-button.banner{
  width:80px;
  height: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0;
  border-radius: 0;

  display: flex;
  align-items: center;
  transition: all 0.25s;
}
.swiper-button.banner:hover{  background-color: rgba(255, 255, 255, 0.5);}
.swiper-button-prev.banner{left: 0;}
.swiper-button-next.banner{right: 0;}

.swiper-button.banner .icons{
  margin: auto;
}
.swiper-button.banner .icons{
  --size:30px
}
.swiper-button.banner .icons path{
  fill: var(--color-primary-solid);
}
.swiper-button-prev.banner .icons{
  transform: rotate(-180deg);
}

.card-video{
  position: relative;
}

.card-video .video ,.card-video video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width:1280px) {
  .swiper-pagination-bullet{width: 16px; height: 6px;}
  .swiper-button.banner{width: 60px;}
  .swiper-button.banner .icons{--size:24px}
}
@media (max-width:767px) {
  .swiper-pagination.banner{bottom: 20px;}
  .swiper-pagination-bullet{width: 12px; height: 4px;}
  .swiper-button.banner{width: 40px;}
  .swiper-button.banner .icons{--size:24px}

  .card-video.md-full{
    margin-left: -30px;
    margin-right: -30px;
  }
}
@media (max-width:550px) {
  .swiper-pagination.banner{bottom:14px;}
  .swiper-pagination-bullet{width: 10px; height: 3px;}
  .swiper-button.banner{width: 30px;}
  .swiper-button.banner .icons{--size:20px}

  .card-video.md-full{
    margin-left: -20px;
    margin-right: -20px;
  }
}

/*==================================================
   Home - player machine
==================================================*/

.section-player-machine{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  background-color: #fff;
  filter: drop-shadow(0px 0px 20px #EDF0FF);

}
.section-player-machine .hgroup{
  width: 20%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}
.section-player-machine .hgroup .group{
  margin: 40px 0 0 16%;
}

.hgroup {
  padding: 30px 0;
}
.hgroup h3{
  font-size: var(--H1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hgroup .icons{--size:32px;}
.hgroup h2 {
  color: var(--color-brand-primary);
  line-height: 1;
  margin: 14px 0 10px;
  font-size: var(--H0);
}
.hgroup h2.d-flex {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-player-machine .hgroup p{
  margin: 0;
  font-weight: var(--fw-700);
  font-size: var(--H3);
}
.section-player-machine .player-machine-boxed{width: 80%;}

.card-player-machine{
  display: flex;
  flex-direction: column;
  height: 100%;

  box-shadow: inset 10px 0px 24px rgba(0, 0, 0, 0.1);
  background-color: #3D3D3D;
  --bg:#FFDEA9;
}
.card-player-machine .card-photo{
  position: relative;
  z-index: 20;
  background-color: var(--bg);
}
.card-player-machine .card-photo:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 10px 0px 24px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.card-player-machine .card-photo img{width: 100%; transition: all 0.25s; position: relative; }
.card-player-machine .card-photo img:nth-child(2){display:none;}
.card-player-machine:hover .card-photo img{transform: scale(1.1);}
.card-player-machine .card-photo .photo{
  background-size: auto 240px;
}
.card-player-machine:hover .card-photo .photo{
  transform: scale(1.1);
}
.card-player-machine .card-body{
  height: 100px;
  display: flex;
}
.card-player-machine .card-body .icons{
  --size:56px;
  margin: auto;
}

@media (max-width:1366px) {
  .card-player-machine .card-photo .photo{
    background-size: auto 55%;
  }
  .card-player-machine .card-body{height: 100px;}
}
@media (max-width:1199px) {
  .card-player-machine .card-body .icons{--size:48px}
}

@media (max-width:1199px) {
  .section-player-machine .hgroup{
    width: 100%;
  }
  .section-player-machine .player-machine-boxed{
    width: 100%;
  }

  .section-player-machine .hgroup{
    padding: 40px 0;
  }
  .section-player-machine .hgroup h3{justify-content: center;}
  .section-player-machine .hgroup h2 {margin: 25px 0 15px;}
  .section-player-machine .hgroup h2 br{display: none;}
  .section-player-machine .hgroup .group{
    margin: auto;
    text-align: center;
  }
}

@media (max-width:991.98px) {
  .card-player-machine .card-body{height: 110px;}
}
@media (max-width:767px) {
  .card-player-machine .card-body{height: 140px;}
}
@media (max-width:575px) {
  .card-player-machine{
    height: auto;
    flex-direction: row;
  }
  .card-player-machine .card-photo{width:69%;}
  .card-player-machine .card-photo img:nth-child(1){display: none;}
  .card-player-machine .card-photo img:nth-child(2){display: block;}
  .card-player-machine .card-photo .photo{
    background-size: auto 120px;
    height: 100%;
  }
  .card-player-machine .card-body{width:31%; height: auto;}
  .card-player-machine .card-body .icons{
    --size:30px;
  }
  .section-player-machine .hgroup {padding:30px 0;}
  .section-player-machine .hgroup h2{
    margin: 15px 0 10px;
  }
  .hgroup .icons{
    --size:28px
  }

  .section-player-machine div[data-aos]{
    transition-delay: 0s !important;
    transform: translate3d(0, 0, 0);
  }
}

/*==================================================
   Home - Our new branch
==================================================*/

.section-branch{
  background: linear-gradient(0deg, #FFFFFF 67.48%, #F8F8F8 100%);
}

.card-branch{
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  gap: 20px;
}
.card-branch .card-photo{
  border-radius: 8px;
  background-color: #ccc;
}

.card-branch .card-body{
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:15px 20px;
}
.card-branch h3{
  font-size: var(--title2);
  color: #000;
}

.card-branch:hover .card-photo .photo{transform: scale(1.1);}
.card-branch-list{
  --bs-gutter-x:35px;
  --bs-gutter-y:var(--bs-gutter-x);
  justify-content: center;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.section-branch .boxed{
  --width:70%
}

.card-branch.normal .card-body{
  height: auto;
  padding: 5px 0;
}
.card-branch .location{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--color-brand-primary);
  margin-top: 14px;
  margin-bottom: 20px;
}
.card-branch .location .icons{
  --size:18px;
}
.card-branch .location .icons path{
  fill: var(--color-brand-primary);
}

.card-branch.rows{

  justify-content: flex-start;
  flex-direction: row;
}
.card-branch.rows .card-photo{
  width: 296px;
}
.card-branch.rows .card-body{
  width: calc(100% - 296px);
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 5px;
}
.card-branch.rows h3{font-size: var(--title1);}
@media (max-width:1366px) {
  .section-branch .boxed{
    --width:800px
  }
}

@media (max-width:991.98px) {
  .card-branch-list{
    --bs-gutter-x:30px;
  }

  .card-branch .location{margin-bottom: 10px;}
}
@media (max-width:767px) {
  .card-branch-list{
    --bs-gutter-x:25px;
  }

}

@media (max-width:575px) {
  .section-branch{
    padding-top: 10px;
    padding-bottom: 40px;
  }
  .section-branch .hgroup{padding-bottom: 25px;}
  .card-branch{
    flex-direction: row;
    gap: 0;
  }
  .card-branch .card-photo{
    width: 48%;
  }
  .card-branch .card-body{
    width: 52%;
    height:auto;
    align-items: flex-start;
    text-align:left;
  }

  .card-branch .location{margin-bottom: 0;}
  .card-branch-list{
    --bs-gutter-y:20px;
    padding-left: 0;
    padding-right: 0;
  }
  .card-branch h3{font-size: 14px;}

  .card-branch.normal {margin-bottom: 5px;}
  .card-branch.normal .card-photo{width:120px;}
  .card-branch.normal .card-body{width: calc(100% - 120px); padding-left: 15px;}
  .card-branch .location{margin-top: 10px;}

  .card-branch.rows{
    flex-direction: column;
    margin-bottom: 10px;
  }
  .card-branch.rows .card-body{
    padding-top: 20px;
    padding-left: 0;
    width: 100%;
  }
}

@media (max-width:400px) {
  .card-branch .card-body{padding-left: 15px;}
}

/*==================================================
   Home - Awards and events
==================================================*/
.section-howoto {
  padding: 30px 0 100px;
}
.section-howoto .background{
  border-radius:40px 40px 0 0;
  background: linear-gradient(303.42deg, #D2B0FF 27.46%, #A0A4FF 77.17%);
}

.section-howoto .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-image: url(../img/thumb/bg-event.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto;
}

.card-howoto{
  display: flex;
  flex-direction: column;
  background: #F8F8F8;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  width: 100%;
  height: 500px;

  padding: 20px;
}

.card-howoto .card-title{
  font-size: var(--title1);
  color: #000;
  text-align: center;
  margin-bottom:30px;
}

.card-howoto .card-photo{
  border-radius: 24px;
  background-color: #EDF0FF;
  height: 164px;
}

.card-howoto-list{
  --bs-gutter-x:35px;
  --bs-gutter-y:var(--bs-gutter-x);
}

@media (max-width:1199px) {
  .card-howoto-list{
    --bs-gutter-x:25px;
  }

  .card-howoto{height: 100%;}
}

@media (max-width:575px) {
  .section-howoto{
    padding-top: 0;
  }
  .section-howoto .hgroup{
    padding-bottom: 20px;
  }
  .card-howoto-list{
    --bs-gutter-x:30px;
  }
}
/*==================================================
   About us
==================================================*/
.section-body{
  padding: 0 0 60px;
}
.section-header{
  background: linear-gradient(90.99deg, #F0F9F4 0%, #FFF8ED 98.56%);
  border-radius: 0px 0px 24px 24px;
  padding:35px 50px;
  margin-bottom: 30px;
}

.section-header h1{
  font-size: var(--H0);
  margin-right: auto;
  display: flex;
}
.section-header h1 a{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
}
.section-header h1 .icon-goback{
  --size:48px;
  left: 0;
  margin-right: 6px;
  background-image: url(../img/icons/icon-arrow-left.svg);
}
.section-header h1 a:hover .icon-goback{left: -5px;}
.background.main{
  background-image: url(../img/thumb/bg.jpg);
  background-position: center;
  background-repeat: repeat-x;
  background-size: auto;
  background-attachment: fixed;
}

.card-about{
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  background-color: #fff;
  border-radius: 24px;
  filter: drop-shadow(0px 0px 20px #EDF0FF);
}

.card-about .card-title{
  border-radius: 24px 24px 0 0;
  color: #fff;
  height: 88px;
  line-height: 1;
  font-size: var(--H2);
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;

  --bg:#913DFF;
}

.card-about > .card-body{
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-about .card-photo img{width: 100%; transition: all 0.25s;}
.card-about:hover > .card-photo img,
.card-about:hover > .card-photo .photo{
  transform: scale(1.1);
}
.card-about:hover .readmore .icons{left: 5px;}
.readmore{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-brand-primary);
  margin: 0;
}
.readmore .icons{
  --size:18px;

  left: 0;
  font-size: 14px;
  background-image: url(../img/icons/icon-arrow-right.svg);
}

.card-about.details > .card-body{
  height: auto;
  padding:40px 30px;
  display: block;
  text-align: left;
}

.card-history{
  display: flex;
  position: relative;
  justify-content: space-between;
  margin-bottom: 23px;
}

.card-history .card-photo,
.card-history .card-body{
  width:calc(50% - 30px);
}

.card-history .card-photo{
  border-radius: 8px;
  overflow: visible;
}
.card-history .card-photo .photo,
.card-history .card-photo img{
  border-radius: 8px;
}
.card-history .card-body{
  flex: unset;
  font-size: var(--title2);
  font-weight: var(--fw-700);
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
}
.card-history .card-body p:last-child{
  margin: 0;
}

.card-history:before{
  content: '';
  top:25px;
  bottom: 0;
  left: 50%;
  border-left: 1px solid var(--color-brand-primary);
  position: absolute;
}
.card-history:after,
.history-list:after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-brand-primary);
}
.history-list > div:nth-child(even){
  flex-direction: row-reverse;
}
.history-list .card-history:last-child:before{bottom: 25px;}
.history-list:after{
  top: auto;
  bottom:63px;
}

.gallery-list > div >img{
  width: 100%;
  border-radius: 8px;
}

.card-mission{
  display: flex;
}

.card-mission .card-photo{
  width: 45%;
}
.card-mission .card-photo img{
  width: 100%;
  border-radius: 8px;
}
.card-mission .card-body{
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 30px;
}
.card-mission .card-body .article{
  padding: 0 !important;
}
.card-about.details .article{
  font-weight: var(--fw-700);
  font-size: var(--title2);
  padding:30px 0;
  color: #000;
}
.card-about.details .article p:last-child{
  margin: 0;
}
@media  (max-width:1280px) {
  .section-header h1{font-size:40px;}
  .section-header h1 .icon-goback{--size:40px;}
}

@media (min-width:1200px) and (max-width:1280px) {
  .card-about .card-title{font-size: var(--H3); height: 70px;}

}

@media (min-width:992px) and (max-width:1199px) {
  .card-about .card-title{font-size:22px; height: 70px;}
}
@media  (max-width:1024px) {
  .section-header{padding-left: 30px;}
  .section-header h1{font-size:35px;}

  .background.main{background-attachment: unset;}
}
@media  (max-width:991.98px) {
  .card-about .card-title{
    font-size:20px;
    height: 70px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .card-history{
    flex-direction: column;
    margin-bottom: 0;
  }
  .history-list > div:nth-child(even){
    flex-direction: column;
  }

  .card-history {gap: 30px;padding-bottom: 30px; margin-bottom: 30px;}
  .card-history:before{
    display: none;
  }

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

  .card-history .card-body{
    padding: 0;
  }
  .card-history:after{margin-top: -4px; top: -30px;}
  .history-list .card-history:first-child{margin-top: 30px;}
  .history-list .card-history:last-child .card-photo:after{display: none;}

  .card-mission .card-body{padding-left: 25px;}

}

@media  (max-width:767px) {
  .section-header{margin-bottom: 30px;}

  .card-about.details > .card-body{
    padding: 20px;
  }
}

@media  (max-width:670px) {
  .background.main{
    background-size: 700px;
    background-repeat: repeat;
  }
  .card-history{gap: 25px;}
  .card-history:after{top: -25px;}
  .history-list .card-history:first-child{margin-top: 15px;}
}

@media  (max-width:575px) {

  .section-body{
    padding-bottom:30px;
  }
  .section-header{
    padding-left: 20px;
    padding-right: 0;
    margin: 0 -20px 20px;
  }
  .section-header h1{font-size:24px;}
  .section-header h1 a{gap: 0;}
  .section-header h1 .icon-goback{--size:28px; margin-right: 5px; margin-left: -5px;}
  .card-about{border-radius: 16px;}
  .card-about .card-title{font-size: var(--title1); height: 58px; border-radius: 16px 16px 0 0;}
  .card-about > .card-body{height: 48px;}

  .card-about.details > .card-body{
    padding: 20px;
  }

  .card-history{gap: 20px; padding-bottom: 25px;
    margin-bottom: 25px;}
  .card-history:after{top: -25px;}
  .history-list .card-history:first-child{margin-top: 30px;}

  .card-about.details{
    margin-left: -20px;
    margin-right: -20px;
  }

  .history-list:after{bottom: 30px;}

  .card-mission{
    flex-direction: column;
  }
  .card-mission .card-photo,
  .card-mission .card-body{
    width: 100%;
  }

  .card-mission .card-body{
    padding:25px 0;
  }

  .card-about.details .article{
    padding: 20px 0 30px;
  }

  .card-mission .card-photo img:nth-child(1){display: none;}
  .card-mission .card-photo img:nth-child(2){display: block;}
}

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

.card-news{
  display: flex;
  flex-direction: column;
  position: relative;
}
.card-news .card-photo{border-radius: 8px;}
.card-news .card-photo img{width: 100%; border-radius: 8px; transition: all 0.25s;}

.card-news:hover .card-photo img{transform: scale(1.1);}
.card-news .card-body{
  padding: 25px 0 0;
}
.card-news h3{
  margin-bottom: 15px;
  font-size: var(--title2);
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-news .info-row{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  flex-wrap: wrap;
}
.card-news .info-row p{
  margin: 0;
}
.card-news .info-row .readmore{
  font-size: 12px;
  gap: 2px;
}
.card-news .info-row .readmore .icons{--size:15px; left: 0 !important;}

.card-news-list > div{
  padding-bottom:5px;
}

.pagination{
  --bs-pagination-padding-x:0;
  --bs-pagination-padding-y:0;
  --bs-pagination-border-width:0;
  --bs-pagination-font-size:12px;
  --bs-pagination-bg:#fff;
  --bs-pagination-color:#737373;
  --bs-pagination-hover-color:#737373;
  --bs-pagination-hover-bg:#F2F4FB;
  --bs-pagination-active-bg:#F2F4FB;
  --bs-pagination-active-color:#737373;
  --bs-pagination-focus-bg:#fff;
  --bs-pagination-focus-color:#737373;

  --bs-pagination-disabled-color:#DADADA;
  padding:30px 0;
  margin-bottom: 0;
  justify-content: center;
  gap:4px;
}
.page-link{
  display: flex;
  align-items: center;
  justify-content: center;
  height:40px;
  width: 40px;
  box-shadow: none !important;
  border-radius: 8px;
  font-weight: var(--fw-700);
  font-family: "Bungee";
}
.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: transparent;
  border: 0;
}
.page-link.arrow path[fill]{fill: #5D5D5D;}
.page-link.arrow path[stroke]{stroke: #5D5D5D;}

.page-link.disabled{opacity: 0.5;}

.page-link.arrow:hover {border-color: #5D5D5D !important;}

.page-link .icons{
  width: 100%;
  height: 100%;
  top: -1px;
  background-image: url(../img/icons/icon-page-arrow.svg);
  background-size: 16px;
}
.page-link.prev {margin-right: 10px;}
.page-link.next{margin-left: 10px;}
.page-link.prev .icons{transform: rotate(-180deg);}

.pagination .page-link.disabled{
  pointer-events: none;
}
.pagination .page-link.disabled .icons{opacity: 0.6;}
.page-link.active{font-weight: var(--fw-700);}
@media  (max-width:991.98px) {
  .card-news .info-row{font-size: 12px;}
}

@media  (max-width:575px) {
  .card-news {
    flex-direction: row;
  }
  .card-news .card-photo{
    overflow: visible;
    width: 120px;
    flex-shrink: 0;
  }

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

  .card-news-list > div{
    padding-bottom: 0;
  }

  .card-news .info-row{
    flex-direction: column;
    font-size: 14px;
    gap:5px;
  }

  .card-news .info-row .readmore{
    justify-content: flex-start;
  }

  .card-news h3{
    margin-top: 2px;
    margin-bottom: 10px;
    font-size: 14px;
  }
  .card-news .info-row p{font-size: 12px;}
  .card-news .card-photo img{
    height: 100%;
    object-fit: cover;
  }
}

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

.card-infos{
  position: relative;
  background-color: #fff;
  border-radius: 24px;
  padding: 20px;
  filter: drop-shadow(0px 0px 20px #EDF0FF);
  margin-bottom: 25px;
}
.news-details p{margin-bottom:25px;}
.news-details p:last-child{margin-bottom:0;}
.news-details img{width: 100%;border-radius: 16px;}

.card-infos .hgroup{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 15px 0;
  margin-bottom:20px;
}
.card-infos .hgroup h2{
  font-size: var(--H3);
  color: var(--color-text);
}
.card-infos .card-header{
  border-radius: 24px 24px 0 0;
  color: #fff;
  height: 88px;
  line-height: 1;
  font-size: var(--H2);
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;

  --bg:#3D3D3D;
}
.card-infos .card-header h2{
  font-size: var(--H1);
}
.card-infos > .card-body{
  padding: 30px 25px ;

}

.card-product .card-photo{
  border-radius: 8px;
}
.card-product .card-photo img{
  width: 100%;
  transition: all 0.25s;
}

.card-product h3{
  font-size: var(--title2);
}
.card-product p{
  margin: 0;
}
.card-product .card-body{
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 20px;
}
.card-product .readmore {
  font-size: 12px;
  gap: 0;
  justify-content: flex-end;
  padding-top: 10px;
}
.skill-list{
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.skill-list h6{
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
}

.skill-list .label{
  --bg:#FFE0E1;
  --color:#FF696D;
  border-radius: 6px;
  display: flex;
  padding:4px 8px 3px;
  font-size: 12px;

  background-color: var(--bg);
  color: var(--color);
}

.skill-list .label.power{
  --bg:#FFE0E1;
  --color:#FF696D;
}
.skill-list .label.agility{
  --bg:#DDFBE1;
  --color:#53DD6C;
}
.skill-list .label.reaction{
  --bg:#FFFBC2;
  --color:#FDD112;
}
.skill-list .label.balance{
  --bg:#DEE1FF;
  --color:#5834ED;
}
.skill-list .label.speed{
  --bg:#D8BBEA;
  --color:#913DFF;
}

.card-product-list{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 2rem;
}
@media  (max-width:1280px) {
  .card-infos .card-header {
    height: 70px;
  }
  .card-infos .card-header h2{
    font-size: var(--H2);
  }
}

@media  (max-width:991.98px) {
  .card-infos .card-header h2{
    font-size: var(--H3);
  }
}

@media  (max-width:767px) {
  .card-infos .hgroup{
    padding: 0 0;
  }

  .card-infos .card-header {
    height: 58px;
  }
  .card-infos .card-header h2{
    font-size: var(--title1);
  }
}

@media  (max-width:575px) {
  .card-infos .hgroup{
    margin-bottom: 10px;
    padding: 10px 0;
  }
  .card-infos .hgroup h2{
    font-size: var(--title1);
  }

  .card-infos.xs-shadow-0{
    filter:none;
    margin: 0 -20px;
    padding-top: 0;
    padding-bottom: 20px;
  }
  .card-infos > .card-body{
    padding: 20px;
  }
  .card-infos {border-radius: 16px;}
  .card-infos .card-header{border-radius: 16px 16px 0 0;}
  .card-product{
    flex-direction: row;
    gap: 0;
    display: flex;
  }

  .card-product .card-photo{
    width:120px;
    margin-bottom: auto;
  }
  .card-product .card-body{
    width:calc(100% - 120px);
    padding-top: 0;
    padding-left:18px;
    gap:5px;
  }

  .card-product .readmore{
    margin-top: 15px;
  }

  .card-product-list{
    --bs-gutter-y: 1.5rem;
  }
}

/*==================================================
   Product
==================================================*/
.article p:last-child{margin: 0;}

.card-category{
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  background-color: #fff;
  border-radius: 24px;
  filter: drop-shadow(0px 0px 20px #EDF0FF);
}

.card-category .card-title{
  border-radius: 24px 24px 0 0;
  color: #fff;
  height: 88px;
  line-height: 1;
  font-size: var(--H2);
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;

  --bg:#3D3D3D;
}

.card-category > .card-body{
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 15px;
  gap: 10px;
}
.card-category .card-photo img{width: 100%; transition: all 0.25s;}
.card-category:hover > .card-photo img {transform: scale(1.1);}

.card-category p{
  margin: 0;
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.card-category .buttons{
  padding:5px 0 0;
  justify-content: flex-end;
}
.card-category .btn .icons{--size:18px;}
.card-category-list{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 2rem;
}

@media (min-width: 1200px) and (max-width: 1280px) {
  .card-category .card-title {
      font-size: var(--H3);
      height: 70px;
  }
}


@media  (max-width:1199px) {
  .card-category .card-title{font-size:22px; height: 70px;}
}

@media  (max-width:991.98px) {
  .card-category .card-title{font-size:20px; height: 60px;}

}
@media  (max-width:575px) {
  .card-category-list{
    --bs-gutter-y: 20px;
  }
}

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

.product-detail .row{
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

.product-detail h3{
  display: flex;
  gap:10px;
  font-size: var(--title1);
  margin-bottom: 15px;
}
.product-detail h3:before{
  content: '';
  width: 6px;
  height: 20px;
  background-color: #913DFF;
  border-radius: 0 4px 4px 0;
}

.article {
  line-height: 1.65;
}
.article ol,
.article ul{
  padding-left: 17px;
}
.article p,
.article .p{
  margin-bottom: 10px;
}

.article ol:last-child{margin-bottom: 0;}
.article p img{margin-bottom:5px; display: block;}
.star-list{
  display: flex;
  align-items: center;
  gap: 5px;
}
.star-list .icons{background-image: url(../img/icons/icon-star-stroke.svg);}
.star-list .icons.icon-fill{background-image: url(../img/icons/icon-star-fill.svg);}

.title-stroke{
  position: relative;
  display: flex;
  margin-right: auto;
  margin-top: 55px;
  margin-bottom: 29px;
}

.title-stroke h2{
  border: 4px solid #000;
  border-radius: 6px 0 8px 8px;
  padding:8px 15px;
  font-size:32px;
  color: #000;
}
.title-stroke .joyliday{
  height: 30px;
  width: 65px;
  border: 4px solid #000;
  border-radius: 0 6px 6px 0px;
  flex-shrink: 0;

  margin: -26px 0 0 -4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size:48px;
  background-image: url(../img/thumb/joyliday.svg);
}
.title-stroke .star{
  width: 45px;
  height: 24px;
  border: 4px solid #000;
  border-radius: 6px 6px 0 6px;

  position: absolute;
  top: -46px;
  right: 61px;
}

.title-stroke .star .icons{
  background-image: url(../img/icons/icon-star-fill.svg);
  position: absolute;
  left: 7px;
  top: -12px;
  --size:22px;
}

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

.product-related{
  margin-bottom: 30px;
}
.product-related h3{
  text-align: center;
  font-size: var(--H3);
  margin: 20px 0 30px;
}

.swiper-overflow.related{
  position: relative;
  width: 100%;
  max-width:1055px;
  margin: 0 auto;
  padding: 0 80px;
}
.swiper-overflow.related .swiper-button{
  width: 50px;
  height: 50px;
}
.swiper-overflow.related .swiper-button-prev{
  left: 0;
}

.swiper-overflow.related .swiper-button-next{
  right: 0;
}
.swiper-overflow.related .swiper-button-prev .icons{
  transform: rotate(-180deg);
}
.swiper-overflow.related .swiper-button .icons{
  --size:50px
}
.swiper-overflow.related .swiper-button .icons path{
  fill: #464646;
}
@media  (max-width:991.98px) {

  .product-detail h3{
    margin-bottom: 10px;
  }
}

@media  (max-width:767px) {
  .swiper-overflow.related .swiper-button .icons{
    --size:40px
  }
  .swiper-overflow.related .swiper-button{
    width: 40px;
    height: 40px;
  }
  .swiper-overflow.related{
    padding: 0 50px;
  }
}
@media  (max-width:575px) {
  .product-detail .title-stroke{
    margin-top: 40px;
  }
  .product-detail .title-stroke,
  .product-detail .title-stroke h2{width: 100%; }

  .swiper-overflow.related .swiper-button .icons{
    --size:30px
  }
  .swiper-overflow.related .swiper-button{
    width: 30px;
    height: 30px;
  }
  .swiper-overflow.related{
    padding: 0 40px;
  }
  .swiper-overflow.related .swiper-button-prev{
    left: -5px;
  }

  .swiper-overflow.related .swiper-button-next{
    right: -5px;
  }

  .product-related h3{
    font-size: var(--title1);
    margin: 30px 0 20px;
  }
}

/*==================================================
   Faq
==================================================*/


.card-faq{
  box-shadow: 0px 0px 10px #EDF0FF;
  border-radius: 16px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}
.card-faq .card-title{
  display: flex;
  gap:10px;
  font-size: var(--title1);
  position: relative;
  margin-bottom: 5px;
}
.card-faq .card-title:before{
  content: '';
  width: 6px;
  height: 20px;
  background-color: #913DFF;
  border-radius: 0 4px 4px 0;
}
.card-faq .border{
  --bs-border-color: #EDEDED;
  border-radius: 8px;
  padding:14px 12px;
  display: flex;
  gap: 7px;
}
.card-faq .border p:last-child{
  margin: 0;
}
.card-faq .question,
.card-faq .answer{
  font-weight: var(--fw-700);
  font-size: var(--title2);
  color: var(--color-text);
}

.card-faq .icons.q{background-image: url(../img/thumb/letter-q.svg);}
.card-faq .icons.a{background-image: url(../img/thumb/letter-a.svg);}

.title{
  display: flex;
  gap:10px;
  font-size: var(--H3);
  position: relative;
  margin-bottom: 5px;
  z-index: 10;
}
.title:before{
  content: '';
  width: 6px;
  height: 20px;
  background-color: #913DFF;
  border-radius: 0 4px 4px 0;
  position: relative;
  top: 7px;
}
.title-1{font-size: var(--title1) !important;}

.nav-tabs-underline{
  border:0;
  gap: 5px;
  position: relative;
  z-index: 10;
  padding: 0 25px;
  margin-bottom: 25px;
}

.nav-tabs-underline li a{
  font-size: var(--title2);
  font-weight: var(--fw-700);
  position: relative;
  padding: 15px 10px;
  display: block;
}

.nav-tabs-underline li a:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;

  height: 6px;
  background-color: var(--color-brand-primary);
  border-radius: 10px;
  transition: all 0.25s;
  opacity: 0;
}

.nav-tabs-underline li a:hover,
.nav-tabs-underline li a.active{
  color: var(--color-brand-primary);
}
.nav-tabs-underline li a.active:before{
  bottom: 0;
  opacity: 1;
}

.card-infos .nav-tabs-underline{
  padding-left: 0;
  padding-right: 0;
}
.card-infos .nav-tabs-underline:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid #EDEDED;
}
.card-infos .card-body >  .nav-tabs-underline{
  margin-top: -15px;
}
@media  (max-width:991.98px) {
  .nav-tabs-underline{
    padding: 0;
  }
}

@media  (max-width:767px) {
  .title:before{top: 3px;}
}

@media  (max-width:575px) {
  .card-faq{padding: 15px;gap: 10px; margin-bottom: 20px;}

  .card-faq .question,
  .card-faq .answer{font-size: 14px;}

  .card-faq .border .icons + p{padding-top: 2px;}

  .nav-tabs-underline{margin-bottom: 0; padding-top: 10px;}
}

/*==================================================
   Online game
==================================================*/
.section-header.game {
  background:url(../img/thumb/bg-online-game.png), radial-gradient(59.99% 215.31% at 36.71% 24.36%, #FFFFFF 0%, #EDF0FF 100%);
  background-repeat: repeat;
  background-position: center;
  background-size: auto 100%;
  overflow: hidden;

}
.section-header.game .img-title{
  width: 318px;
  height: auto;
  display: block;
  margin:15px auto;
}

.section-online-game{
  display: flex;
  --sidebar:340px;
}

.section-online-game .sidebar{
  width: var(--sidebar);
  flex-shrink: 0;
}

.section-online-game .content{
  width: calc(100% - var(--sidebar));
  flex-shrink: 0;
  padding-left: 25px;
}

.card-infos.user-infos{
  flex-direction: column;
  padding: 25px 10px 40px;
}
.card-infos.user-infos .icons{
  margin-top: 30px;
}
.card-infos.user-infos .buttons{
  gap: 15px;
  max-width: 380px;
  margin: 0 auto;
  padding: 30px 10px 0;
}
.card-infos.user-infos .buttons .btn{
  width: 100%;
}
.card-infos.user-infos.login{
  padding:30px 20px;
  margin: 0;
}
.card-infos.game {margin-bottom: 0;}
.card-infos .card-header.h-auto{
  height: auto;
  padding: 25px 25px;
  justify-content: space-between;
  --bg:#5834ED;
}
.card-infos .card-header h4{
  font-size: var(--title1);
  display: flex;
  align-items: center;
  gap: 9px;
}

.text-show-hide-data{
  text-align: center;
  font-size: 14px;
  color:#5834ED;
  margin: 0 0;
  padding: 10px 0;
  cursor: pointer;
}
.text-show-hide-data .text-hide{display: block;}
.text-show-hide-data .text-show{display: none;}

.text-show-hide-data[aria-expanded="false"] .text-hide{display: none;}
.text-show-hide-data[aria-expanded="false"] .text-show{display: block;}

.card-game-skill{
  display: flex;
  align-items: center;
  border-radius: 16px;
  padding: 20px;
  background-color: var(--bg);
  border: 1px solid var(--stroke);
  gap: 15px;
  font-size: var(--title2);
  margin-bottom: 15px;
  --bg:#FFE0E1;
  --stroke:#FFA0A2;
}
.card-game-skill.agility{
  --bg:#DDFBE1;
  --stroke:#88ED99;
}
.card-game-skill.reaction{
  --bg:#FFFBC2;
  --stroke:#FFE448;
}
.card-game-skill.balance{
  --bg:#DEE1FF;
  --stroke:#5834ED;
}
.card-game-skill.speed{
  --bg:#F1E7FF;
  --stroke:#913DFF;
}
.card-game-skill .card-icon .icons{
  --size: 50px;
}
.card-game-skill .card-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-game-skill h3{
  font-size: inherit;
}
.card-game-skill p{
  margin: 0;
  font-weight: var(--fw-400);
}
.card-game-skill .number{
  font-family:"Bungee";
  color: var(--color-brand-primary);
  font-size: 24px;
}

@media (min-width:992px) {
  .text-show-hide-data{display: none;}
  .card-game-skill-list{display:flex !important; flex-wrap: wrap; flex-direction: column;}
}

@media (max-width:1280px) {
  .section-online-game{
    --sidebar:280px;
  }
}

@media (min-width:576px) and (max-width:1280px) {
  .card-game-skill{
    padding: 15px;
    font-size: 14px;
  }
  .card-game-skill .number{
    font-size: 20px;
  }
  .card-game-skill .card-icon .icons{
    --size:40px
  }
}

@media (max-width:991.98px) {
  .section-header.game{
    margin-bottom: 25px;
  }
  .section-header.game .img-title{
    width: 250px;
    margin:10px auto;
  }
  .section-online-game{
    flex-direction: column;
  }
  .section-online-game .sidebar,
  .section-online-game .content{
    width: 100%;
  }

  .section-online-game .content{
    padding: 20px 0;
  }

  .card-infos.user-infos{
    padding: 20px 20px 30px;
  }
  .card-infos.user-infos .icons{
    --size:60px;
    margin-top: 20px;
  }
  .card-infos.user-infos h3{
    font-size: var(--title1);
  }


  .card-infos .card-header.h-auto{
    padding: 20px;
  }
}
@media (max-width:575px) {
  .card-infos.user-infos .buttons{
    padding-left: 0;
    padding-right: 0;
  }

  .section-header.game .img-title{
    width: 220px;
  }

  .card-infos.game .card-header h3{font-size: var(--title1);}
}

/*==================================================
   Profile}
==================================================*/
.profile-boxed .left{width: 40%;}
.profile-boxed .right{width: 60%;}
.card-infos.user-infos .barcode{
  text-align: center;
  margin-top:35px;
}
.card-infos.user-infos .barcode h6{
  font-size: 14px;
  margin-bottom: 10px;
}
.card-infos.user-infos .img-barcode{
  width: 100%;
  max-width: 240px;
  height: auto;
}

.card-points{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  box-shadow: 0px 0px 20px #EDF0FF;
  border-radius: 24px;
}

.card-points .card-icon{
  margin: 25px auto;
}
.card-points .card-icon .icons{
  --size:80px;
}
.card-points .card-body{
  border-radius: 20px;
  background-color: var(--bg);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 35px 0;
  --bg:#ccc;
}
.card-points .points{
  height: 56px;
  padding: 0 30px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fff;
  font-family: "Bungee";
  font-size: 30px;
  color: var(--bg);
}
.card-points h3{
  font-size: var(--H3);
  margin-bottom: 5px;
}

.card-points .readmore{
  margin:20px 15px 0 0;
  justify-content: flex-end;
}
.card-points .readmore .icons{left: 0;}
.card-points .readmore:hover .icons{left: 5px;}

.nav-profile{
  flex-direction: column;
  gap: 15px;
}

.nav-profile .btn{
  --btn-h:66px;
  --bs-btn-bg:#fff;
  --bs-btn-color:var(--color-text);
  --bs-btn-hover-bg:var(--color-brand-secondary);
  --bs-btn-hover-color:#fff;
  line-height: normal;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0px 0px 10px #EDF0FF;
  border-radius: 16px;
  font-size: var(--title1);
  font-weight: var(--fw-700);
  padding: 0 25px;
  text-align: left;
}

.nav-profile.nav-blue .btn{ --bs-btn-hover-bg:#5834ED}
.nav-profile.nav-purple .btn{ --bs-btn-hover-bg:#913DFF}
.nav-profile.nav-yellow .btn{ --bs-btn-hover-bg:#FDD112; --bs-btn-hover-color:#3D3D3D}
.nav-profile.nav-blue-light .btn{ --bs-btn-hover-bg:#5EBBFC}

.article-policy h3{
  font-size: var(--title1);
  margin-bottom:5px;
}

@media (max-width:1199px) {
  .card-points .points{
    font-size: 22px;
    height:44px;
    padding: 0 25px;
  }
  .card-points h3{
    font-size: var(--title1);
  }
  .card-points .card-icon .icons {--size: 65px;}

  .profile-boxed .right .row{height: 100%;}
}


@media (max-width:991.98px) {
  .profile-boxed .row div.left,
  .profile-boxed .row div.right{
    width: 100%;
  }
}

@media (max-width:575px) {
  .card-infos.user-infos .barcode{margin-top: 25px;}

  .card-points{
    border-radius: 12px;
  }
  .card-points .readmore{
    font-size: 12px;
    justify-content: center;
    margin: 10px 0 0;
  }
  .card-points .readmore .icons{--size:15px}
  .card-points .card-icon {margin: 15px auto;}
  .card-points .card-icon .icons {--size:40px;}
  .card-points .card-body{
    border-radius: 12px;
    padding: 10px;
  }
  .card-points h3{margin-bottom: 0; font-size: 14px;}
  .card-points .points {
    font-size: 18px;
    height:26px;
    padding: 0 0;
    width: 80%;
    border-radius: 8px;
    margin-bottom: 3px;
  }
}

@media (max-width:390px) {
  .card-points .readmore{gap: 0; font-size: 11px;}
  .card-points .readmore .icons{--size:12px}
}

/*==================================================
   History
==================================================*/
.card-point-info{
  border: 2px solid #EDEDED;
  border-radius: 16px;
  display: flex;
  padding: 20px;
  align-items: center;
  margin-bottom: 10px;
}
.card-point-info .card-icon {
  flex-shrink: 0;
}
.card-point-info .card-icon .icons{
  --size:78px;
  height: auto;
}

.card-point-info .card-body{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}

.card-point-info h3{
  font-size: var(--title2);
}
.card-point-info .group{
  display: flex;
  flex-direction: column;
  gap: 6px;
 justify-content: center;
}
.card-point-info .group:last-child{
  text-align: right;
  align-items: flex-end;
  flex-shrink: 0;
}
.card-point-info .label{
  border-radius: 6px;
  color: #3087EF;
  background-color: #DAEFFF;
  font-size: 12px;
  padding: 3px 10px;
}
.card-point-info .coins{
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-point-info .coins p{
  margin:5px 0 0;
  font-family: "Bungee";
  font-size: 24px;
  line-height: 1;
}
.card-point-info.redeemed .label{
  background-color: #EDEDED;
  color: #BDBDBD;
}
.card-point-info.redeemed .card-icon{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.card-point-info .coins .icon-coin{
  background-image: url(../img/icons/icon-coin.svg);
}
.card-point-info h2{color: #3087EF; font-size: var(--title1);}
.card-point-info .group:last-child h6{
  font-size: 16px;
}
@media (max-width:991.98px) {
  .card-point-info{padding: 15px 20px;}
  .card-point-info .card-icon .icons {
    --size: 70px;
  }
  .card-point-info .coins p{
    font-size: 20px;
  }
  .card-point-info h3{
    font-size: 14px;
  }
  .card-point-info h2{
    font-size: 16px;
  }
}

@media (max-width:575px) {
  .card-point-info{padding: 15px;}
  .card-point-info .card-icon .icons {
    --size: 40px;
  }
  .card-point-info .coins p{
    font-size:16px;
  }
  .card-point-info h3{
    font-size: 12px;
  }
  .card-point-info h2{
    font-size: 14px;
  }
  .card-point-info .group{
    gap: 4px;
  }
  .card-point-info .card-body{
    padding-left: 12px;
  }

  .card-infos .nav-tabs-underline{  margin-bottom: 25px;}

  .card-point-info .group:last-child h6{font-size: 14px;}
}

@media (max-width:420px) {
  .card-infos .nav-tabs-underline{gap: 2px; flex-wrap: unset; }
  .card-infos .nav-tabs-underline li a{
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    line-height: 1;
    height: 100%;
  }
}

@media (max-width:380px) {
  .card-infos .nav-tabs-underline li a{
    font-size: 15px;
  }
}

/*==================================================
  Profile - Setting
==================================================*/
.icon-calendar{background-image: url(../img/icons/icon-calendar.svg);}
.icon-creditcard{background-image: url(../img/icons/icon-creditcard.svg); --size:18px;}
.text-note{
  color: var(--color-brand-primary);
  font-size: 12px;
  position: relative;
}
.text-note .icons{top: -1px;}
.gender-label{
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px;
  gap: 10px;

}
.gender-label .border{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-color: #EDEDED;
  border-radius: 8px;
  transition:all 0.25s;
  background-color: #fff;
  /* filter: drop-shadow(0px 0px 5px #EDF0FF); */
  z-index: 1;
  pointer-events: none;
}
.gender-label input{
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}

.gender-label p{
  margin: 0;
  position: relative;
  z-index: 2;
}
.gender-label .icons{
  position: relative;
  z-index: 2;
}
.gender-label .icons path{
  fill: #656565;
}
.gender-label input:checked ~ .icons path{
  fill: #5834ED;
}
.gender-label input:checked ~ .border{
  border-color: #5834ED !important;
}

.gender-label input.error ~ .border{
  border-color: #FFA0A2 !important;
}
.gender-label input.error ~ .icons path{
  fill: #FF696D;
}
/* .gender-label .icons path{
  fill: #656565;
} */
.gender-row{
  position: relative;
}
.gender-row span.error{
  position: absolute;
  bottom: -26px;
  left: 0;
}
.gender-row.error{padding-bottom: 28px;}
/*==================================================
  datepicker
==================================================*/
/* .dropdown-calendar{
  padding:20px;
} */
.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;
  color: #3D3D3D;
  box-shadow: none;
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));
}


.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:14px;
  text-align: center;
  font-family: "Roboto";
}
.datepicker table th{
  color:#3D3D3D;
  font-weight: 400;
}
.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;
  border: 2px solid transparent;
  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{

  background-color:rgba(255, 255, 255, 0.2);
  transition: all 0.25s;

}
.datepicker table tr td.today,
.datepicker table tr td.active{pointer-events: none;}
.datepicker table tr td.today > span{
  color: #000;
  background:#E3EEFD;

}
.datepicker table tr td.active  > span{

  background: #5834ED;
  color: #fff;
}
.datepicker table tr td.focused > span{
  background: #eee;
  cursor: pointer;
}
.datepicker table tr td > span:hover{
  background-color: #fff;
  border: 1px solid #5834ED;
}

.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;
  border-radius:0;
  background-size:8px;
  background-image: url(../img/icons/icon-calendar-arrow.svg);

  display: block;
  margin: auto;
  transition: all 0.25s;
}
.datepicker .icon-next:hover,
.datepicker .icon-prev:hover{opacity: 1;}

.datepicker .icon-prev{
  transform: rotate(-180deg);
}

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

/*==================================================
   Register
==================================================*/

.card-info-white{
  background-color: #fff;
  border-radius: 24px;
  padding: 20px 30px;
  position: relative;
}
.card-info-white .hgroup{
  padding: 20px 0;
}
.card-info-white .hgroup h2{
  font-size: var(--H2);
  color: var(--color-text);
}

.steps{
  display: flex;
  margin: 0 0 30px;
  padding: 0;
  gap: 20px;
  justify-content: center;
}
.steps li{
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  flex: 1 1 auto;
}
.steps li:before{
  content: '';
  position: absolute;
  right: -16px;
  top: 0;
  bottom: 0;
  width: 10px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-arrow-right-gray.svg);
}
.steps li:last-child:before{display: none;}
.steps li a{
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: #989898;
  font-size: 14px;
  gap: 10px;
  justify-content: center;
  padding: 10px 10px;
  pointer-events: none;
  line-height: 1;
}
.steps li a .number{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #989898;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Bungee";
  color: #989898;
  flex-shrink: 0;

}

.steps li a.active{
  color: #3D3D3D;
  border-color: var(--color-brand-secondary);
  pointer-events: all;
}
.steps li a.active .number{
  border-color: var(--color-brand-secondary);
  background-color: var(--color-brand-secondary);
  color: #fff;
}
.steps li a.done{color: #3D3D3D; pointer-events: all;}
.steps li a.done .number{
  border-color: var(--color-brand-secondary);
  color: #fff;
  text-indent: -999px;
  overflow: hidden;

  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  background-image: url(../img/icons/icon-check.svg);
}

.hgroup + .steps{margin-top: -10px;}

.card-border{
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  position: relative;
  transition: all 0.25s;
  margin-bottom:20px;
}

.card-border > .card-body{
  padding: 20px;
}

.card-border h3{
  font-size: var(--title2);
}
.card-border p{
  margin: 0;
}
.card-border.link {
  display: flex;
}
.card-border.link .arrow{
  margin: auto;
  margin-right: 10px;
  width: 24px;
  height: 24px;
}

.card-border.link .arrow .icons{
  --size:24px;
}
.card-border.link .arrow .icons path{fill: #656565;}
.card-border.link:hover{
  border-color: var(--color-brand-primary);
}
.card-border.link:hover .arrow .icons path{fill:var(--color-brand-primary);}

.link-primary{color: var(--color-brand-primary);}
.link-primary:focus,
.link-primary:hover{color: var(--color-brand-secondary) !important;}

.text-or{
  display: flex;
  position: relative;
  font-size: 12px;
  margin-bottom:14px;
  margin-top: 25px;
}
.text-or:before{
  content: '';
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #EDEDED;
  position:absolute;
}
.text-or > span{
  margin: 0 auto;
  position: relative;
  z-index: 100;
  background-color: #fff;
}

.card-steps{
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  padding-bottom: 5px;
}

.card-steps .card-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-steps .card-title .btn{
  --btn-h:24px;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 50px;
  --bs-btn-bg:var(--color-brand-secondary)
}
.card-steps .card-title .icons{
  background-image: url(../img/icons/icon-arrow-up.svg);
  transform: rotate(180deg);
  --size:24px
}
.card-steps .card-title[aria-expanded="true"] .icons{
  transform: rotate(0deg);
}

.steps-list{
  display: flex;
  gap: 5px;
  padding:20px 0 0;
  margin: 0;
  list-style-type: none;

}
.steps-list li{
  flex: 1 1 auto;
  background-color: #F1E7FF;
  border-radius: 50px;
  padding: 0;
  margin: 0;
  height: 4px;
}
.steps-list li.active{
  background-color: var(--color-brand-secondary);
}

.title-2{font-size: var(--title2);}

.otp-list{
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-bottom: 8px;
  position: relative;
  max-width: 225px;
  margin: 0 auto;
}

.otp-list span.error ~ .form-control:not(.valid){margin-bottom: 20px; border-color: #FF696D;}

.otp-list .form-control{
  width: 48px;
  font-size: var(--title2);
  font-weight: var(--fw-700);
  --input-h:56px;
  text-align: center;
  padding: 0;
}
.otp-list .form-control.error{
  box-shadow: none !important;
}

.alert-otp{
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0px 0px 20px #EDF0FF;
  border-radius: 4px;
  padding:12px 10px;

  z-index: 100;
  background-color: #fff;
}
.alert-otp .icons{
  --size:16px
}

.card-info-white .alert-otp{
  position: absolute;
  top: 0;
  right: 0;
  min-width: 320px;
}

.alert-otp p{
  margin: 0;
}


@media (max-width:1550px) {
  .steps{gap: 30px;}
  .steps li a{
    padding-left: 0;
    padding-right: 0;
  }
  .steps li:before{
    width: 8px;
    right: -18px;
  }
}

@media (max-width:1280px) {
  .steps li a{font-size: 12px;}
}

@media (max-width:991.98px) {
  .section-register{
    padding-bottom: 40px;
  }
  .section-register .banner{
    display: block;
    max-width: 767px;
    margin: 0 auto;
  }

  .steps li a{font-size: 14px;}
}

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

@media (max-width:575px) {
  .section-register {padding-top: 0;}
  .section-register .banner{display:none}

  .card-info-white{
    padding-left: 0;
    padding-right: 0;
  }
  .card-border{margin-bottom: 15px;}
  .card-border.link .arrow .icons{
    --size:20px
  }
  .card-border.link .arrow{
    margin-right: 2px;
  }
  .card-border > .card-body{padding-right: 0; padding-left: 15px;}

  .card-info-white .alert-otp{
    position: relative;
    top: 0;
    right: 0;
    min-width: 100%;
    margin-top: 15px;
  }
}

@media (max-width:400px) {
  .otp-list .form-control{
    width: calc(16.667% - 9px);
  }
}


/*==================================================
   Modal
==================================================*/
.modal{
  --bs-modal-border-radius:5px;
  --bs-modal-header-padding: 15px 20px;
  --bs-modal-padding: 20px;
  --bs-modal-width:464px;
}
.modal-title{
  font-size: var(--title2);
}
.btn-close{
  width: 24px;
  height: 24px;
  padding: 0;
}
.modal-header .btn-close{
  padding: 0;
}
.modal-footer{
  padding: 5px var(--bs-modal-padding);
}

p[data-bs-toggle]{cursor: pointer;}
.tooltip{
  --bs-tooltip-font-size:12px;
  --bs-tooltip-bg:var(--color-brand-primary);
}
/*==================================================
   footer
==================================================*/

.footer{
  background-color: var(--color-brand-primary);
  position: relative;
  z-index: 100;
  color: #fff;
}

.footer-copyright{
  display: flex;
  justify-content:space-between;
  align-items: center;
  font-size: 10px;
  padding: 30px 0;
  border-top: 1px solid #fff;
}
.footer-copyright .d-flex{
  align-items: center;
  gap: 5px;
  margin: 0;
}
.footer-copyright .d-flex .icons{
  --size:13px
}

.followus{
  display: flex;
  align-items: center;
  gap: 14px;
}
.followus .icons:hover{opacity: 0.7;}

.footer-accordion{
  --bs-accordion-color:inherit;
  --bs-accordion-bg:transparent;
  --bs-accordion-border-width:0;

  padding: 25px 0;
  display: flex;
  flex-wrap: wrap;
}

.footer-accordion .accordion-item{
  width: 33.333%;
}
.footer-accordion .accordion-body{
  padding: 0;
}

.footer-accordion h3{
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.footer-accordion h3[data-bs-toggle]:after{
  content: '';
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-down.svg);
  transition: all 0.25s;
}
.footer-accordion h3[data-bs-toggle][aria-expanded="true"]:after{
  transform:rotate(-180deg);
}
.footer-accordion p{
  margin: 0 0 5px;
  line-height: 1.7;
}
.footer-accordion p a:hover{
  text-decoration: underline;
}

.footer-accordion .nav{
  flex-direction: column;
  margin-top: -5px;
}
.footer-accordion .nav li a{
  display: block;
  padding: 5px 0;
  color:inherit;
}
.footer-accordion .nav li a:hover{
  opacity: 0.6;
}

.footer-accordion .accordion-body.d-flex{
  justify-content: space-between;
}
.footer-accordion .player-machine{
  width: 70px;
  height: auto;
  position: relative;
  /* top: -35px; */
  margin-top: -35px;
}

.footer.bg-white{
  color: #989898;
  box-shadow: 0px 0px 20px #EDF0FF;

}
.footer.bg-white .footer-copyright{ border-color: #DCDCDC;}
.footer.bg-white .footer-accordion h3{color: var(--color-text);}
.footer.bg-white .footer-accordion h3[data-bs-toggle]:after{ background-image: url(../img/icons/icon-down-gray.svg);}
.footer.bg-white .followus svg path{fill: #989898;}
@media (min-width:576px) {
  .footer-accordion .accordion-collapse{
    display: block !important;
    height: auto !important;
  }

  .footer-accordion h3{padding-bottom: 15px;}
  .footer-accordion h3[data-bs-toggle]:after{display: none;}
}

@media (max-width:991.98px) {
  .footer-accordion {
    padding-bottom: 40px;
  }
  .footer-accordion .accordion-item{
    width: 50%;
  }
  .footer-accordion .accordion-item:nth-child(1){
    width: 100%;
    padding-bottom: 10px;
  }
  .footer-accordion .player-machine{display: none;}
}
@media (max-width:575px) {
  .footer-accordion{
    padding-bottom: 20px;
  }
  .footer-accordion .accordion-item,
  .footer-accordion .accordion-item:nth-child(1){
    width: 100%;
    padding:5px 0;
  }
  .footer-accordion h3{
    font-size: 16px;
  }
  .footer-accordion .nav{
    padding-bottom: 5px;
  }

  .footer-copyright{
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding:20px 0;
  }


}