@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
  outline: none !important;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow-x: hidden;
  background: url("../images/bg-desktop.jpg");
  background-size: 100% 100%;
}

a {
  text-decoration: none;
  color: #0F1010;
}
a:hover {
  color: #0054A5;
}

body {
  font-family: "Be Vietnam Pro", sans-serif;
  height: 100%;
  padding: 70px 24px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 400;
  max-width: 375px;
  margin: auto !important;
  background-color: #F2F6FA;
  position: relative;
  overflow: auto;
}
@media (max-width: 767px) {
  body {
    max-width: initial;
  }
}
body::-webkit-scrollbar {
  display: none;
}

.logged-space .menu-top {
  position: fixed;
  max-width: 375px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 12px 16px;
  z-index: 1000;
}
@media (max-width: 767px) {
  .logged-space .menu-top {
    max-width: initial;
  }
}

.default-bg {
  background: url("../images/bg-mobile.jpg") no-repeat;
  background-size: 100% 100%;
}

.second-bg {
  padding: 44px 16px !important;
  background: #F2F6FA url("../images/bg-second.png") no-repeat;
  background-size: 100%;
  overflow-y: initial !important;
  overflow-x: hidden !important;
}

.heading-md {
  font-size: 20px;
  font-weight: 600;
  color: #0054A5;
}

.logo {
  display: block;
  margin-bottom: 100px;
}
.logo img {
  height: 78px;
  object-fit: contain;
}

header.main {
  flex-shrink: 0;
  text-align: center;
}
header.main .profile {
  margin-bottom: 24px;
  color: white;
}
header.main .profile .avatar {
  border: 2px solid white;
  border-radius: 100%;
  margin-right: 8px;
}
header.main .profile .avatar img {
  width: 40px;
  height: 40px;
}
header.main .profile button {
  background: transparent;
  border: 0;
}
header.main .profile button + button {
  margin-left: 10px;
}

main.main {
  flex: 1 0 auto;
}

footer.main {
  flex-shrink: 0;
}

.input-group {
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 84, 165, 0.12), 0 12px 24px rgba(0, 84, 165, 0.14);
}
.input-group.icon {
  position: relative;
}
.input-group.icon input {
  padding-left: 50px;
  border-radius: 8px !important;
}
.input-group.icon:before {
  content: "";
  position: absolute;
  left: -1px;
  height: 48px;
  width: 42px;
  display: block;
  border-radius: 8px 0 0 8px;
  z-index: 100;
}
.input-group.icon.phone:before {
  background: #E0F6FF url("../images/icon/phone.png") no-repeat center;
  background-size: 20px;
}
.input-group.icon.code:before {
  background: #E0F6FF url("../images/icon/code.png") no-repeat center;
  background-size: 20px;
}
.input-group.icon.otp:before {
  background: #E0F6FF url("../images/icon/otp.png") no-repeat center;
  background-size: 20px;
}
.input-group.icon.user:before {
  background: #E0F6FF url("../images/icon/user.png") no-repeat center;
  background-size: 20px;
}
.input-group.icon.users:before {
  background: #E0F6FF url("../images/icon/users.png") no-repeat center;
  background-size: 20px;
}
.input-group.icon.maker:before {
  background: #E0F6FF url("../images/icon/maker.png") no-repeat center;
  background-size: 20px;
}
.input-group.icon.home:before {
  background: #E0F6FF url("../images/icon/home.png") no-repeat center;
  background-size: 20px;
}
.input-group .clear-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  height: 20px;
  width: 20px;
  background: url("../images/icon/clear.png") no-repeat;
  background-size: contain;
  color: #999;
  z-index: 100;
  opacity: 0;
}
.input-group .clear-btn.show {
  opacity: 1;
  pointer-events: auto;
}

.select2-container {
  width: 100% !important;
  border-radius: 8px !important;
}
.select2-container .select2-selection--single {
  height: 48px !important;
  padding-left: 50px !important;
  display: flex;
  align-items: center;
  position: relative;
  border: none !important;
  box-shadow: 0 4px 8px rgba(0, 84, 165, 0.12), 0 12px 24px rgba(0, 84, 165, 0.14);
  border-radius: 8px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding-left: 0 !important;
  color: #0F1010;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  display: none;
}
.select2-container .select2-selection--single::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 17px;
  height: 9px;
  transform: translateY(-50%);
  transition: 0.2s;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='9' viewBox='0 0 17 9' fill='none'><path d='M16.281 1.28104L8.78104 8.78104C8.71139 8.85077 8.62867 8.90609 8.53762 8.94384C8.44657 8.98158 8.34898 9.00101 8.25042 9.00101C8.15186 9.00101 8.05426 8.98158 7.96321 8.94384C7.87216 8.90609 7.78945 8.85077 7.71979 8.78104L0.219792 1.28104C0.0790615 1.14031 0 0.94944 0 0.750417C0 0.551394 0.0790615 0.360522 0.219792 0.219792C0.360523 0.0790612 0.551394 0 0.750417 0C0.94944 0 1.14031 0.0790612 1.28104 0.219792L8.25042 7.1901L15.2198 0.219792C15.2895 0.150109 15.3722 0.0948337 15.4632 0.0571218C15.5543 0.0194098 15.6519 0 15.7504 0C15.849 0 15.9465 0.0194098 16.0376 0.0571218C16.1286 0.0948337 16.2114 0.150109 16.281 0.219792C16.3507 0.289474 16.406 0.3722 16.4437 0.463245C16.4814 0.554289 16.5008 0.651871 16.5008 0.750417C16.5008 0.848963 16.4814 0.946545 16.4437 1.03759C16.406 1.12863 16.3507 1.21136 16.281 1.28104Z' fill='%230054A5'/></svg>") no-repeat center;
  background-size: contain;
}
.select2-container.select2-container--open .select2-selection--single::after {
  transform: translateY(-50%) rotate(180deg);
}

input.form-control, input {
  height: 48px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  color: #0F1010;
}
input.form-control:focus, input:focus {
  border: 0;
  box-shadow: none;
}
input.form-control::placeholder, input::placeholder {
  color: #B7B7B7;
}
input.form-control::-webkit-input-placeholder, input::-webkit-input-placeholder {
  color: #B7B7B7;
}
input.form-control:-ms-input-placeholder, input:-ms-input-placeholder {
  color: #B7B7B7;
}
input.form-control::-ms-input-placeholder, input::-ms-input-placeholder {
  color: #B7B7B7;
}

.btn {
  padding: 10px;
  border: 0;
  border-radius: 100px;
  display: block;
  width: 100%;
}
.btn:focus {
  box-shadow: none !important;
  border: 0 !important;
}
.btn.btn-primary {
  background-color: #FEC323;
  color: #242424;
  font-size: 18px;
  font-weight: 600;
}
.btn.btn-primary:hover {
  background-color: #E0F6FF;
}
.btn.btn-outline-primary {
  border: 0;
  background-color: transparent !important;
  color: #0054A5;
  font-size: 18px;
  font-weight: 600;
}
.btn.btn-history {
  width: 40px;
  height: 40px;
}

.text-third {
  color: #0054A5 !important;
}

.btn-link.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

.fw-semi {
  font-weight: 600;
}

.card {
  border: 0;
  border-radius: 12px;
  padding: 16px;
}
.card.shadow {
  box-shadow: 0 4px 8px rgba(0, 84, 165, 0.12), 0 12px 24px rgba(0, 84, 165, 0.14);
}

.custom-border {
  padding-bottom: 10px !important;
  border-bottom: 1px dashed #E4E9EE;
}
.custom-border .border-left-right {
  border-right: 1px dashed #E4E9EE;
  border-left: 1px dashed #E4E9EE;
}

.small-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.custom-icon {
  position: relative;
  display: inline-block;
}
.custom-icon:before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.custom-icon.size-md {
  width: 28px;
  height: 28px;
}
.custom-icon.size-sm {
  width: 20px;
  height: 20px;
}
.custom-icon.coin:before {
  background: url("../images/icon/coin.png") no-repeat center;
  background-size: contain;
}
.custom-icon.platinum:before {
  background: url("../images/icon/rank-platinum.svg") no-repeat center;
  background-size: contain;
}
.custom-icon.member:before {
  background: url("../images/icon/rank-member.svg") no-repeat center;
  background-size: contain;
}
.custom-icon.titan:before {
  background: url("../images/icon/rank-titan.svg") no-repeat center;
  background-size: contain;
}
.custom-icon.gold:before {
  background: url("../images/icon/rank-gold.svg") no-repeat center;
  background-size: contain;
}
.custom-icon.arrow-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 25px;
}
.custom-icon.arrow-right:before {
  top: 10px;
}
.custom-icon.arrow-right:after {
  position: absolute;
  content: "";
  top: 15px;
  right: 0;
  width: 7px;
  height: 12px;
  background: url("../images/icon/arrow-right.png") no-repeat center;
  background-size: contain;
}
.custom-icon.history-auth:before {
  width: 20px;
  height: 18px;
  background: url("../images/icon/history.png") no-repeat center;
  background-size: contain;
}
.custom-icon.expired-coin:before {
  width: 20px;
  height: 22px;
  background: url("../images/icon/expired.png") no-repeat center;
  background-size: contain;
}
.custom-icon.weight:before {
  width: 22px;
  height: 28px;
  background: url("../images/icon/weight.png") no-repeat center;
  background-size: contain;
}
.custom-icon.calender:before {
  width: 24px;
  height: 26px;
  background: url("../images/icon/calender.png") no-repeat center;
  background-size: contain;
}
.custom-icon.expired:before {
  width: 24px;
  height: 26px;
  background: url("../images/icon/time.png") no-repeat center;
  background-size: contain;
}
.custom-icon.arrow-left {
  width: 16px;
  height: 12px;
}
.custom-icon.arrow-left:before {
  background: url("../images/icon/arrow-left.png") no-repeat center;
  background-size: contain;
}
.custom-icon.scan-code {
  width: 21px;
  height: 15px;
}
.custom-icon.scan-code:before {
  background: url("../images/icon/scan.png") no-repeat center;
  background-size: contain;
}
.custom-icon.scan-qr {
  width: 18px;
  height: 18px;
}
.custom-icon.scan-qr:before {
  background: url("../images/icon/scan-qr.png") no-repeat center;
  background-size: contain;
}
.custom-icon.scan-qr-now {
  width: 16px;
  height: 16px;
}
.custom-icon.scan-qr-now:before {
  background: url("../images/icon/qr.png") no-repeat center;
  background-size: contain;
}
.custom-icon.plus {
  width: 20px;
  height: 20px;
}
.custom-icon.plus:before {
  background: url("../images/icon/plus.png") no-repeat center;
  background-size: contain;
}
.custom-icon.gift {
  width: 20px;
  height: 20px;
}
.custom-icon.gift:before {
  background: url("../images/icon/gift.png") no-repeat center;
  background-size: contain;
}
.custom-icon.bonus {
  width: 20px;
  height: 20px;
}
.custom-icon.bonus:before {
  background: url("../images/icon/bonus.svg") no-repeat center;
  background-size: contain;
}
.custom-icon.timeout {
  width: 20px;
  height: 20px;
}
.custom-icon.timeout:before {
  background: url("../images/icon/timeout.png") no-repeat center;
  background-size: contain;
}
.custom-icon.no-data-expired {
  width: 100px;
  height: 100px;
}
.custom-icon.no-data-expired:before {
  background: url("../images/icon/no-expired.png") no-repeat center;
  background-size: contain;
}
.custom-icon.no-data-history {
  width: 65px;
  height: 75px;
}
.custom-icon.no-data-history:before {
  background: url("../images/icon/no-history.png") no-repeat center;
  background-size: contain;
}
.custom-icon.white:before {
  filter: brightness(0) saturate(100%) invert(100%) sepia(23%) saturate(274%) hue-rotate(101deg) brightness(115%) contrast(99%);
}

.bg-success {
  background-color: #E7F5E9 !important;
}

.bg-orange {
  background-color: #FFF3E1 !important;
}

.bg-danger {
  background-color: #FDE3EB !important;
}

.ff-secondary {
  font-family: "Montserrat", sans-serif;
}

.fs-largest {
  font-size: 24px;
}

.fs-larger {
  font-size: 18px;
}

.fs-large {
  font-size: 16px;
}

.fs-middle {
  font-size: 13px;
}

.fs-medium {
  font-size: 12px;
}

.fs-small {
  font-size: 10px;
}

.progress {
  border-radius: 16px;
}
.progress .progress-bar {
  background-color: #0054A5;
  border-radius: 16px;
}

.number {
  background: #0054A5;
  border-radius: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notify {
  position: relative;
  width: 20px;
  height: 20px;
}
.notify:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #FF4842;
  top: 1px;
  right: 1px;
  z-index: 10;
  display: block;
}
.notify:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: url("../images/icon/bell.png") no-repeat center;
  background-size: 100% 100%;
  z-index: 9;
  display: block;
}

.toggle-canvas {
  position: relative;
  width: 18px;
  height: 13px;
  background: url("../images/icon/bars.png") no-repeat center !important;
  background-size: contain !important;
}

.icon-canvas:before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.icon-canvas.home:before {
  background: url("../images/icon/home-line.png") no-repeat center;
  background-size: contain;
}
.icon-canvas.profile:before {
  background: url("../images/icon/user-line.png") no-repeat center;
  background-size: contain;
}
.icon-canvas.logout:before {
  background: url("../images/icon/logout.png") no-repeat center;
  background-size: contain;
}

.offcanvas-end {
  width: 265px;
  background: url("../images/bg-menu.png") no-repeat;
  background-size: 100% 100%;
  border: 0;
  padding: 40px 24px;
}
@media (min-width: 1399px) {
  .offcanvas-end {
    position: absolute;
  }
}
.offcanvas-end .offcanvas-header, .offcanvas-end .offcanvas-body {
  padding: 0;
}
.offcanvas-end ul li {
  margin-bottom: 16px;
}
.offcanvas-end ul li a {
  padding: 10px 0;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.offcanvas-end ul li a span {
  line-height: 20px;
}
.offcanvas-end ul li:last-child .small-icon {
  height: 16px;
}

.menu-top {
  background-color: #0054A5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  font-size: 18px;
  font-weight: 600;
}
.menu-top a {
  line-height: 1;
}

.custom-tabs {
  display: flex;
  flex-direction: row;
  padding: 8px;
  border-radius: 100px;
  background-color: white;
  white-space: nowrap;
}
.custom-tabs.custom-scroll-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}
.custom-tabs.two-column li {
  flex-basis: 50%;
}
.custom-tabs li {
  flex-basis: 33.33%;
}
.custom-tabs li button, .custom-tabs li a {
  background-color: transparent;
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #696969;
  font-size: 16px;
  padding: 8px !important;
  border: 2px solid white;
}
.custom-tabs li button.active, .custom-tabs li button:hover, .custom-tabs li a.active, .custom-tabs li a:hover {
  background-color: #E0F6FF;
  border-radius: 100px;
  color: #0054A5;
  border-color: #E0F6FF;
}

.sx-icon {
  width: 7px;
  height: 12px;
  object-fit: contain;
}

.lg-icon {
  width: 22px;
  height: 26px;
  object-fit: contain;
}

.xl-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.no-data {
  text-align: center;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.no-data img {
  width: 65px;
  height: 75px;
  object-fit: contain;
}

.text-muted {
  color: #B7B7B7 !important;
}

.text-danger {
  color: #C7282F !important;
}

.text-orange {
  color: #E7511F !important;
}

.text-blue {
  color: #0054A5 !important;
}

.text-success {
  color: #2A7E39 !important;
}

.notify-bottom {
  position: fixed;
  max-width: 375px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
@media (max-width: 767px) {
  .notify-bottom {
    max-width: initial;
  }
}

.img-rounded {
  border-radius: 12px;
}

.img-lg {
  width: 100%;
  height: 325px;
  object-fit: cover;
}

.img-md {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.modal .modal-content {
  border-radius: 15px;
  border: 0;
}
.modal .modal-content .modal-body {
  padding: 24px 16px;
}
.modal .modal-dialog {
  max-width: 327px;
  margin: auto;
  z-index: 9999;
}

.auto-modal:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: url("../images/bg-modal.png") no-repeat top right;
  z-index: 20;
}
@media (min-width: 799px) {
  .auto-modal:before {
    max-width: 375px;
    margin: auto;
    background-position: 204px 5px;
  }
}
@media (max-width: 767px) {
  .auto-modal:before {
    top: 5px;
    right: 5px;
  }
}

.guide {
  padding: 10px 16px;
  border: 1px dashed #ACE6FF;
  background-color: #F4FCFF;
}
.guide p {
  margin-bottom: 8px;
  font-size: 12px;
}
.guide p:last-child {
  margin-bottom: 0;
}

.loading {
  position: absolute;
  border-radius: 50%;
  border-left: 2px solid #ffffff;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  height: 46px;
  width: 46px;
  left: 50%;
  top: 50%;
  margin: -23px 0 0 -23px;
  text-indent: -9999em;
  font-size: 10px;
  z-index: 9999;
  -webkit-animation: themex-load 0.8s infinite linear;
  -moz-animation: themex-load 0.8s infinite linear;
  ms-animation: themex-load 0.8s infinite linear;
  o-animation: themex-load 0.8s infinite linear;
  animation: themex-load 0.8s infinite linear;
}
.loading:after {
  border-radius: 50%;
  width: 46px;
  height: 46px;
}

@-webkit-keyframes themex-load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes themex-load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.qr-wrapper {
  position: fixed;
  inset: 0;
}

#qr-reader {
  width: 100vw;
  height: 100vh;
}
#qr-reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
#qr-reader canvas {
  display: none !important;
}

#qr-reader__dashboard {
  display: none !important;
}

.input-group .invalid-feedback {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
}

.page-not-found {
  width: 100%;
  height: 320px;
  background: url("../images/404.png") no-repeat center;
  background-size: contain;
}

.loading-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1111;
}

.qr-scanner-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
}
.qr-scanner-box video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/*# sourceMappingURL=main.css.map */