@charset "utf-8";

[x-cloak] {
  display: none;
}

/* vietnamese */
@font-face {
  font-family: "Saira Stencil One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../webfonts/SLXSc03I6HkvZGJ1GvvipLoYSTEL9DsEYQmv2Q.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Saira Stencil One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../webfonts/SLXSc03I6HkvZGJ1GvvipLoYSTEL9DsFYQmv2Q.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Saira Stencil One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../webfonts/SLXSc03I6HkvZGJ1GvvipLoYSTEL9DsLYQk.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

body {
  font-size: 16px;
  font-family: "Microsoft YaHei", "微软雅黑", Arial, "Nunito", sans-serif;
}

a {
  outline: none;
}

a:hover {
  text-decoration: none !important;
}

/**
 * Menu
 */
#menu a {
  text-decoration: none;
  color: rgba(75, 85, 99, 1);
}

#menu a:hover,
#menu li.active > a {
  color: #0d6efd;
  background-color: rgba(243, 244, 246, 0.5);
}

#menu .btn-toggle {
  position: relative;
}

#menu .btn-toggle::after {
  width: 1.25em;
  line-height: 28px;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: 0.5em 50%;
  position: absolute;
  right: 10px;
}

#menu .btn-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

/**
 * Animation
 */
a.swing:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/**
 * Scroll Bar
 */
::-webkit-scrollbar {
  width: 10px;
  height: 7px;
}

::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-thumb {
  background: #525965;
  border: 0px none #ffffff;
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: #525965;
}

::-webkit-scrollbar-thumb:active {
  background: #525965;
}

::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none #ffffff;
  border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
  background: transparent;
}

::-webkit-scrollbar-track:active {
  background: transparent;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/**
 * Bootstrap5 Custom
 */
.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.navbar-brand span {
  font-size: 100% !important;
  font-weight: bold;
  display: inline-block;
  background: linear-gradient(135deg, #0d6efd 0%, #a3c6ff 100%);
  background: -webkit-linear-gradient(-45deg, #0d6efd 0%, #a3c6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

hr {
  position: relative;
}

hr::before {
  content: attr(data-content) '';
  position: absolute;
  top: calc(50% - 12px);
  margin: 0 15px;
  text-transform: uppercase;
}