@charset "UTF-8";
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

input,
textarea,
select,
button {
  outline: none;
}

a {
  cursor: pointer;
  display: block;
  text-decoration: none !important;
  color: #3f3f3f;
}

img {
  display: block;
  max-width: 100%;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p,
h1,
h4,
h2,
h3 {
  margin: 0;
  line-height: 1.6;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

body {
  overflow-x: hidden !important;
}

button {
  border: 0;
  background-color: transparent;
}
button:focus {
  box-shadow: none !important;
}
button:hover {
  opacity: 0.9;
}

a,
a.nav-link {
  transition: all 0.15s linear;
}
a:hover,
a.nav-link:hover {
  opacity: 0.9;
}

/* PC Alway  */
/* PC BIG  */
/* PC BIG Lower */
/* PC BIG 16 */
/* PC fit */
/* PC custom fit sub */
/* PC fit-sub */
/* PC fit lower */
/* PC fit lower */
/* PC fit small */
/* PC HD */
/* PC Change */
/* PC LOWER  min-1023px */
/* Mobile & tablet */
/* Tablet */
/* Min Mobile */
/* Mobile */
/* Phone Small */
html {
  font-size: 16px;
  scroll-behavior: smooth !important;
}

html,
body {
  position: relative;
}

body {
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
  min-height: 100vh;
  color: #414141;
  --widthDefault: 1240px;
}
@media only screen and (max-width: 46.1875em) {
  body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1650px) {
  body .container-xl {
    max-width: 1324px;
  }
}
@media only screen and (max-width: 63.9375em) {
  body .container-xl {
    max-width: 100%;
  }
  body .container-xl .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (min-width: 1650px) {
  body .container-lg {
    max-width: 1194px;
  }
}
@media only screen and (max-width: 63.9375em) {
  body .container-lg {
    max-width: 100%;
  }
  body .container-lg .hide-on-bothTM {
    display: none !important;
  }
}
body .container {
  max-width: var(--widthDefault);
  padding: 0 16px;
}

@keyframes fadeModal {
  0% {
    transform: translateX(110%);
  }
  50% {
    transform: translateX(-6%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes fadeShow {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeHide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeShowReference {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeHover {
  0% {
    font-size: 24px;
    font-weight: 500;
  }
  50% {
    font-size: 28px;
    font-weight: 800;
  }
  100% {
    font-weight: 900;
    font-size: 27px;
  }
}
@keyframes fadeHideZoom {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}
@keyframes spinner {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-one {
  0% {
    transform: rotateX(40deg) rotateY(-50deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(40deg) rotateY(-50deg) rotateZ(360deg);
  }
}
@keyframes rotate-two {
  0% {
    transform: rotateX(55deg) rotateY(15deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(55deg) rotateY(15deg) rotateZ(360deg);
  }
}
@keyframes rotate-three {
  0% {
    transform: rotateX(40deg) rotateY(60deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(40deg) rotateY(60deg) rotateZ(360deg);
  }
}
/* Track */
/* Handle */
/* Handle on hover */
.general-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
@media only screen and (max-width: 46.1875em) {
  .general-header {
    padding: 0 14px;
    margin-bottom: 16px;
  }
}
.general-header__title {
  font-size: 40px;
  font-weight: 400;
  color: #0680cd;
  font-family: "Calistoga", serif;
}
@media only screen and (max-width: 46.1875em) {
  .general-header__title {
    font-size: 22px;
    padding-right: 10px;
    line-height: 1.4;
  }
}
.general-header__link {
  font-size: 16px;
  font-weight: 500;
  color: #2a485e;
}
@media only screen and (max-width: 46.1875em) {
  .general-header__link {
    font-size: 15px;
  }
}
.general-bg {
  background-color: #f3fbff;
}
.general-shadow {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.general-content {
  padding: 20px 20px 40px;
  background-color: #fff;
}
.general-content * {
  margin: revert;
  font-size: 16px;
  padding: revert;
  list-style-type: revert;
  display: revert;
  color: revert;
  text-decoration: revert;
  line-height: 1.7;
}
.general-content img {
  max-width: 100%;
}
.general-pagination {
  margin-top: 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.general-pagination__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 35px;
  font-weight: 500;
  padding: 2px 10px;
  transition: all 0.3s;
  border-width: 1.4px 0.5px;
  border-style: solid;
  border-color: #e3e9f1;
}
@media only screen and (max-width: 46.1875em) {
  .general-pagination__item {
    width: 38px;
    height: 32px;
  }
}
.general-pagination__item.active {
  color: #fff;
  border-color: #0089de;
  background-color: #0089de;
}
.general-pagination__item.nav {
  border-width: 1.4px 1px;
}
.general-pagination__item.nav:hover {
  border-color: #0089de;
}
.general-pagination__item.nav:hover svg path {
  fill: #0089de;
}
.general-pagination__item.nav-prev {
  border-radius: 8px 0px 0 8px;
}
.general-pagination__item.nav-next {
  border-radius: 0 8px 8px 0;
}

.offcanvas {
  transition: transform 0.3s ease-in-out !important;
}

.fade {
  transition: opacity 0.15s linear;
}

.modal {
  z-index: 1077;
}
.modal-header {
  border-bottom: 0;
}

.offcanvas {
  z-index: 1056;
}
.offcanvas-backdrop {
  z-index: 1055;
}
.offcanvas-backdrop.show {
  opacity: 0.4;
}

.optgroup .option {
  padding-left: 16px;
}

.ts-dropdown .optgroup-header {
  color: #a5a5a5;
  font-weight: 600;
}

.fancybox__container {
  z-index: 1055;
}
.fancybox__container .fancybox__content {
  width: 80% !important;
  height: 80% !important;
  max-width: calc(100% - 100px) !important;
  max-height: calc(100% - 88px) !important;
}

.f-thumbs__slide__button {
  border-radius: 5px;
  border: 1.2px solid transparent;
}
.f-thumbs__slide.is-nav-selected .f-thumbs__slide__button {
  border-color: red;
}

.dropdown-toggle::after {
  display: none;
}

@media only screen and (max-width: 46.1875em) {
  #toasts {
    max-width: 90%;
  }
}
@media only screen and (max-width: 46.1875em) {
  #toasts .toast {
    margin: 0 !important;
    width: 100% !important;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Animation khi đóng modal */
@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100px);
    opacity: 0;
  }
}
/* Gán animation cho modal */
.modal.show .modal-dialog {
  animation: slideIn 0.5s ease-out;
}

.modal.hide .modal-dialog {
  animation: slideOut 0.5s ease-in;
}

.select2-container .select2-selection--single {
  height: auto;
  font-size: 16px;
  padding: 13px 24px 14px 12px;
}
.select2-container .select2-results__option {
  font-size: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  padding-left: 0px;
  padding-right: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

.noUi {
  /* Styling;*/
  /* Handles and cursors;*/
  /* Painting and performance;
  * Browsers can paint handles in their own layer. */
  /* Slider size and handle placement;*/
}
.noUi-target, .noUi-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
  direction: ltr;
}
.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Fix 401 */
}
.noUi-origin {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}
.noUi-handle {
  position: relative;
  z-index: 1;
  cursor: default;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}
.noUi-handle:active {
  border: 8px solid #345dbb;
  border: 8px solid rgba(255, 193, 7, 0.39);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  left: -14px;
  top: -14px;
}
.noUi-background {
  background: #d6d7d9;
}
.noUi-connect {
  background: #ffb93b;
  -webkit-transition: background 450ms;
  transition: background 450ms;
}
.noUi-origin, .noUi-target {
  border-radius: 2px;
}
.noUi-draggable {
  cursor: w-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: n-resize;
}
.noUi-state-tap .noUi-origin {
  -webkit-transition: left 0.3s, top 0.3s;
  transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
.noUi-base, .noUi-handle {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.noUi-horizontal {
  height: 4px;
}
.noUi-horizontal .noUi-handle {
  left: -9px;
  top: -7px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border-radius: 50%;
  background-color: #ffb93b;
}
.noUi-horizontal .noUi-handle::after {
  position: absolute;
  content: "";
  inset: 4px;
  border-radius: 50%;
  background-color: #fff;
}

.noUi-stacking .noUi-handle {
  /* This class is applied to the lower origin when its values is > 50%. */
  z-index: 10;
}

/* Disabled state;*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled].noUi-origin,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

@media (max-width: 1200px) {
  body {
    overflow-x: auto;
  }
}
@media (min-width: 1650px) and (max-width: 1920px) {
  .modal-backdrop {
    zoom: 120%;
  }
  #show_popup,
  #tooltip {
    zoom: 1.1111111111;
  }
}
.skeleton {
  -webkit-animation: skeleton-loading 1s linear infinite alternate;
  animation: skeleton-loading 1s linear infinite alternate;
  display: block;
}

@-webkit-keyframes skeleton-loading {
  0% {
    background-color: #c2cfd6;
  }
  100% {
    background-color: #f0f3f5;
  }
}
@keyframes skeleton-loading {
  0% {
    background-color: #c2cfd6;
  }
  100% {
    background-color: #f0f3f5;
  }
}
.header {
  position: relative;
  z-index: 99;
  min-height: 80px;
}
@media only screen and (max-width: 63.9375em) {
  .header {
    min-height: 62px;
  }
  .header .hide-on-bothTM {
    display: none !important;
  }
}
.header-scroll {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.header-scroll.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  animation: fadeShow 0.35s linear;
}
.header-scroll.fixed .header-main__wrapper {
  padding: 8px 0;
}
.header-scroll.fixed .header-logo img {
  max-width: 180px;
}
.header-scroll.fixed .header-nav__link {
  padding: 15px 0 13px;
}
.header-main__wrapper {
  padding: 11px 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 63.9375em) {
  .header-nav {
    display: none;
  }
  .header-nav .hide-on-bothTM {
    display: none !important;
  }
}
.header-nav::-webkit-scrollbar {
  display: none;
}
.header-nav__link {
  font-weight: 400;
  font-size: 16px;
  color: #71848e;
  padding: 19px 0 17px;
  white-space: nowrap;
  transition: all 0.3s;
}
@media only screen and (max-width: 1440px) {
  .header-nav__link {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1283px) {
  .header-nav__link {
    font-size: 15px;
  }
  .header-nav__link .hide-on-pc-HD {
    display: none;
  }
}
.header-nav__link:hover {
  opacity: 1;
}
.header-nav__link + .header-nav__link {
  margin-left: 60px;
}
.header-nav__link.active {
  color: #0680cd;
  font-weight: 700;
}
.header-logo {
  height: 40px;
}
.header-logo img {
  height: 100%;
}
.header-activity {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.header-activity__link {
  position: relative;
}
@media only screen and (max-width: 63.9375em) {
  .header-activity__link svg {
    width: 23px;
    height: 23px;
  }
  .header-activity__link svg .hide-on-bothTM {
    display: none !important;
  }
}
.header-activity__link + .header-activity__link {
  margin-left: 26px;
}
.header-activity__login {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 9px 21px;
  border-radius: 5px;
  width: max-content;
  background-color: #ffa200;
}
@media only screen and (max-width: 63.9375em) {
  .header-activity__login {
    display: none;
  }
  .header-activity__login .hide-on-bothTM {
    display: none !important;
  }
}
.header-activity__login:hover {
  color: #fff;
}
.header-activity__menu {
  margin-left: 22px;
  display: none;
}
@media only screen and (max-width: 63.9375em) {
  .header-activity__menu {
    display: block;
  }
  .header-activity__menu .hide-on-bothTM {
    display: none !important;
  }
}
.header-activity__menu i {
  font-size: 24px;
}
.header-activity__cart {
  position: absolute;
  left: 65%;
  top: -8px;
  color: #fff;
  font-size: 13px;
  padding: 2px 6px 1.5px;
  border-radius: 10px;
  background-color: #eb2700;
  transition: all 0.3s;
}
.header-account {
  margin-left: 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 63.9375em) {
  .header-account {
    display: none;
  }
  .header-account .hide-on-bothTM {
    display: none !important;
  }
}
.header-account__avatar {
  --size: 42px;
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
}
.header-account__title {
  font-size: 16px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.header-account__info {
  max-width: 128px;
  margin-left: 12px;
}
.header-account__desc {
  color: #71848e;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.header-account__desc img {
  width: 19px;
  margin-bottom: 2px;
  margin-right: 6px;
}
.header-group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 63.9375em) {
  .header-hotline {
    display: none;
  }
  .header-hotline .hide-on-bothTM {
    display: none !important;
  }
}
.header-hotline__img {
  width: 38px;
  margin-right: 10px;
}
.header-hotline__img img {
  width: 100%;
}
.header-hotline__text {
  font-size: 12px;
  color: #000;
}
.header-hotline__link {
  font-weight: 700;
  font-size: 14px;
  color: #146cda;
  white-space: nowrap;
  margin-top: 4px;
}
.header-hotline__link:hover {
  color: #146cda;
  text-decoration: underline !important;
  opacity: 1;
}
.header-cart {
  margin-left: 50px;
}
@media only screen and (max-width: 1440px) {
  .header-cart {
    margin-left: 20px;
  }
}
@media only screen and (max-width: 63.9375em) {
  .header-cart {
    margin-left: 0;
  }
  .header-cart .hide-on-bothTM {
    display: none !important;
  }
}
.header-cart__img {
  position: relative;
  margin-right: 10px;
}
.header-cart__img span {
  position: absolute;
  top: -5px;
  right: -5px;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  text-align: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 50%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eb2700;
  border: 2px solid #fff;
}
.header-cart__img span:empty {
  display: none;
}
.header-cart__img img {
  width: 34px;
  height: 34px;
  object-fit: cover;
}
@media only screen and (max-width: 63.9375em) {
  .header-cart .header-hotline__text {
    display: none;
  }
  .header-cart .header-hotline__text .hide-on-bothTM {
    display: none !important;
  }
}
.header-offcanvas__body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header-offcanvas__list {
  margin-top: 20px;
  border-top: 1px dashed #d0d0d0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 14px 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.header-offcanvas__list::-webkit-scrollbar {
  display: none;
}
.header-offcanvas__login {
  display: block;
}
.header-offcanvas__link {
  padding: 9px 0px 8px;
}
.header-offcanvas__link + .header-offcanvas__link {
  margin-left: 0;
}
.header-offcanvas__account {
  display: flex;
}

.footer {
  border-top: 1px solid #95c8e8;
}
.footer-top {
  position: relative;
  z-index: 10;
  background: #fff;
  padding: 60px 0 60px 0;
}
@media only screen and (max-width: 46.1875em) {
  .footer-top {
    padding: 46px 0 42px 0;
  }
}
.footer-top__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media only screen and (max-width: 63.9375em) {
  .footer-top__wrapper {
    flex-direction: column;
  }
  .footer-top__wrapper .hide-on-bothTM {
    display: none !important;
  }
}
.footer-top__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 32px;
}
@media only screen and (max-width: 63.9375em) {
  .footer-top__header {
    width: 100%;
  }
  .footer-top__header .hide-on-bothTM {
    display: none !important;
  }
}
.footer-top__logo img {
  height: 72px;
}
@media only screen and (max-width: 46.1875em) {
  .footer-top__logo img {
    height: 48px;
  }
}
.footer-top__social {
  margin-top: 30px;
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
}
.footer-top__social > li {
  display: inline-block;
}
.footer-top__link {
  width: 36px;
  height: 36px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 50%;
  background: #eaedef;
}
.footer-top__main {
  padding-left: 30px;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  width: 70%;
}
@media only screen and (max-width: 63.9375em) {
  .footer-top__main {
    padding-left: 0;
    width: 100%;
    gap: 28px;
    flex-wrap: wrap;
  }
  .footer-top__main .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .footer-top__main {
    gap: 22px 8px;
  }
}
.footer-top__group {
  min-width: 140px;
}
@media only screen and (max-width: 63.9375em) {
  .footer-top__group {
    width: 30%;
  }
  .footer-top__group .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .footer-top__group {
    width: 49%;
  }
}
@media only screen and (max-width: 63.9375em) {
  .footer-top__group:last-child {
    min-width: 100%;
  }
  .footer-top__group:last-child .hide-on-bothTM {
    display: none !important;
  }
}
.footer-top__title {
  font-size: 16px;
  font-weight: 900;
  color: #146cda;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.footer-top__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-top__item {
  margin-bottom: 10px;
  color: #68737d;
  font-size: 15px;
  font-weight: 500;
  color: #414141;
}
.footer-top__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.footer-top__phone + .footer-top__phone {
  margin-left: 10px;
}
.footer-top__app-downloads {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.footer-top__app-link img {
  height: 40px;
  object-fit: contain;
}
.footer-top__contact {
  margin-top: 6px;
}
.footer-top__contact-link img {
  width: 32px;
  height: 32px;
}
.footer-bottom {
  background: #178fd6;
  color: #fff;
  text-align: center;
  padding: 16px 0;
}
.footer-bottom__copyright {
  margin: 0;
  font-size: 15px;
}
.footer-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 193px;
  z-index: -1;
  background-size: cover;
}

.banner-img {
  position: relative;
  padding-top: 48%;
  overflow: hidden;
}
.banner-img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
}
.banner-pagination .swiper-pagination-bullet-active {
  width: 70px;
  border-radius: 4px;
  background-color: #fff;
}

.product-section {
  padding: 22px 0 14px;
}
@media only screen and (max-width: 46.1875em) {
  .product-section {
    padding: 30px 0 0px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .product-section .container {
    padding: 0;
  }
}
.product-slide__pagination {
  position: relative;
  bottom: 0;
  margin-top: 24px;
}
.product-slide__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  transition: all 0.3s;
}
.product-slide__pagination .swiper-pagination-bullet-active {
  background-color: #0680cd;
}
.product-item {
  margin: 0 5px;
  display: flex;
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.product-item__image {
  border-radius: 10px 10px 0 0;
  position: relative;
  padding-top: 100%;
  overflow: hidden;
}
.product-item__image > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-item__image.image-coach {
  padding-top: 83%;
}
.product-item__discount {
  position: absolute;
  top: 14px;
  right: 0px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  padding: 6px 10px 5px 4px;
  background: #eb2700;
}
@media only screen and (max-width: 46.1875em) {
  .product-item__discount {
    padding: 5px 10px 4px 4px;
    font-size: 13px;
  }
}
.product-item__discount::after {
  position: absolute;
  content: "";
  top: 50%;
  right: calc(100% - 1px);
  transform: translateY(-50%);
  border-right: 12px solid #eb2700;
  border-bottom: 14px solid transparent;
  border-top: 14px solid transparent;
}
@media only screen and (max-width: 46.1875em) {
  .product-item__discount::after {
    right: calc(100% - 2px);
  }
}
.product-item__info {
  padding: 16px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media only screen and (max-width: 46.1875em) {
  .product-item__info {
    padding: 14px 16px 22px;
  }
}
.product-item__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #2a485e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (max-width: 1440px) {
  .product-item__name {
    font-size: 20px;
  }
}
@media only screen and (max-width: 63.9375em) {
  .product-item__name {
    font-size: 18px;
  }
  .product-item__name .hide-on-bothTM {
    display: none !important;
  }
}
.product-item__name .title-coach {
  font-size: 18px;
}
.product-item__group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.product-item__price {
  color: #ffa200;
  font-size: 22px;
  font-family: "Calistoga", serif;
}
@media only screen and (max-width: 46.1875em) {
  .product-item__price {
    font-size: 20px;
  }
}
.product-item__price.price-blue {
  color: #0680cd;
}
.product-item__old {
  font-size: 16px;
  color: #828282;
  text-decoration: line-through;
  font-weight: 400;
  min-height: 22px;
}
@media only screen and (max-width: 46.1875em) {
  .product-item__old {
    font-size: 15px;
  }
}
.product-item__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-item__add {
  cursor: pointer;
  border: none;
  background: none;
}
.product-item__add svg {
  width: 24px;
  height: 24px;
}
.product-item__add:hover .product-item__cart-icon {
  stroke: #106cb3;
}
.product-details {
  padding-top: 12px;
}
@media only screen and (max-width: 46.1875em) {
  .product-details {
    padding: 0 12px;
  }
}
.product-details__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 63.9375em) {
  .product-details__wrapper {
    flex-direction: column;
  }
  .product-details__wrapper .hide-on-bothTM {
    display: none !important;
  }
}
.product-details__slide {
  width: 38%;
  min-width: 38%;
}
@media only screen and (max-width: 63.9375em) {
  .product-details__slide {
    width: 100%;
    min-width: 100%;
  }
  .product-details__slide .hide-on-bothTM {
    display: none !important;
  }
}
.product-details__info {
  padding-left: 28px;
  width: 100%;
}
@media only screen and (max-width: 63.9375em) {
  .product-details__info {
    padding-left: 0;
    padding-top: 32px;
  }
  .product-details__info .hide-on-bothTM {
    display: none !important;
  }
}
.product-details__thumb {
  margin-top: 20px;
}
.product-details__thumb .swiper-slide {
  border-radius: 5px;
  border: 2px solid transparent;
}
.product-details__thumb .swiper-slide-thumb-active {
  border: 2px solid #ffa200;
}
.product-details__number {
  position: absolute;
  right: 26px;
  left: auto;
  bottom: 16px;
  font-size: 16px;
  padding: 2px 7px;
  border-radius: 15px;
  width: fit-content;
  background-color: rgba(255, 255, 255, 0.8);
}
.product-details__show {
  position: relative;
}
.product-details__sub {
  font-weight: 500;
  display: inline-block;
}
.product-details__title {
  margin-top: 15px;
  font-size: 30px;
  font-weight: 700;
  color: #2a485e;
}
@media only screen and (max-width: 46.1875em) {
  .product-details__title {
    font-size: 22px;
    line-height: 1.4;
  }
}
.product-details__component {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  margin-bottom: 1px;
}
.product-details__component > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-details__img {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-details__price {
  position: relative;
  margin-top: 14px;
  padding-right: 90px;
  width: fit-content;
}
.product-details__money {
  font-size: 35px;
  font-weight: 400;
  font-family: "Calistoga", serif;
  color: #0680cd;
}
@media only screen and (max-width: 46.1875em) {
  .product-details__money {
    font-size: 30px;
  }
}
.product-details__old {
  font-size: 20px;
  font-weight: 400;
  text-decoration: line-through;
  margin-left: 14px;
  color: #71848e;
}
.product-details__cover {
  --heightAction: 40px;
  margin-left: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.product-details__plus {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-details__action {
  margin-top: 22px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.product-details__quantity {
  width: 70px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 0 6px;
}
.product-details__plus, .product-details__quantity {
  height: var(--heightAction);
  border-radius: 5px;
  background-color: #f8f8f8;
  border: 1px solid #cecece;
}
.product-details__plus {
  min-width: var(--heightAction);
}
.product-details__text {
  font-weight: 500;
  font-size: 18px;
  color: #71848e;
}
.product-details__add {
  padding: 10px 40px !important;
  border-radius: 10px;
  border: 1px solid #ffa200;
}
.product-details__nav {
  padding-right: 0;
  width: 75%;
  margin-top: 55px !important;
}
@media only screen and (max-width: 46.1875em) {
  .product-details__nav {
    width: 100%;
  }
}
.product-details__article {
  margin-top: 45px;
}
.product-details__content {
  margin-top: 20px;
}
@media only screen and (max-width: 46.1875em) {
  .product-details__content {
    margin-top: 12px;
  }
}
.product-details__content * {
  margin: revert;
  font-size: revert;
  padding: revert;
  list-style-type: revert;
  display: revert;
  color: revert;
  text-decoration: revert;
  line-height: revert;
}
.product-details__content img {
  max-width: 100%;
}
@media only screen and (max-width: 46.1875em) {
  .product-details__heading {
    padding: 0 !important;
    margin-bottom: 10px !important;
  }
}

.course {
  padding-bottom: 60px;
}
.course-slide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 20px;
}
@media only screen and (max-width: 46.1875em) {
  .course-slide {
    gap: 10px;
    padding: 0 14px;
    grid-template-columns: repeat(1, 1fr);
  }
}
.course-category {
  margin-top: -82px;
}
@media only screen and (max-width: 46.1875em) {
  .course-category {
    margin-top: -110px;
  }
}
.course-category.special {
  margin-top: -102px;
}
@media only screen and (max-width: 46.1875em) {
  .course-category.special {
    margin-top: -105px;
  }
}
.course-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #fff;
}
@media only screen and (max-width: 63.9375em) {
  .course-item {
    padding: 15px 14px;
  }
  .course-item .hide-on-bothTM {
    display: none !important;
  }
}
.course-item__number {
  position: relative;
  color: #71848e;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 63.9375em) {
  .course-item__number {
    font-size: 13px;
  }
  .course-item__number .hide-on-bothTM {
    display: none !important;
  }
}
.course-item__number + .course-item__number {
  padding-left: 26px;
}
.course-item__number + .course-item__number::after {
  position: absolute;
  content: "";
  left: 10px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #71848e;
}
.course-item__number svg {
  margin-right: 7px;
}
.course-item__img {
  min-width: 22%;
  width: 22%;
  border-radius: 5px;
  position: relative;
  padding-top: 22%;
  overflow: hidden;
}
.course-item__img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-item__info {
  margin-left: 16px;
  width: 100%;
}
.course-item__title {
  font-size: 18px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (max-width: 63.9375em) {
  .course-item__title {
    font-size: 16px;
    line-height: 1.2;
  }
  .course-item__title .hide-on-bothTM {
    display: none !important;
  }
}
.course-item__cover {
  margin: 12px 0 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.course-item__cover.special {
  justify-content: space-between;
}
.course-item__type {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  margin: 8px 0;
  padding-left: 16px;
  color: #56aa02;
}
@media only screen and (max-width: 63.9375em) {
  .course-item__type {
    font-size: 15px;
  }
  .course-item__type .hide-on-bothTM {
    display: none !important;
  }
}
.course-item__type.in-cancel {
  color: #eb2700;
}
.course-item__type.in-cancel::after {
  background-color: #eb2700;
}
.course-item__type.time-end {
  color: #71848e;
}
.course-item__type.time-end::after {
  background-color: #71848e;
}
.course-item__type.in-progress {
  color: #0680cd;
}
.course-item__type.in-progress::after {
  background-color: #0680cd;
}
.course-item__type.come-soon {
  color: #ffa200;
}
.course-item__type.come-soon::after {
  background-color: #ffa200;
}
.course-item__type::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #56aa02;
  transform: translateY(-50%);
}
.course-item__btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  border-radius: 20px;
  padding: 8px 19px 7px;
  background-color: #ffa200;
}
@media only screen and (max-width: 63.9375em) {
  .course-item__btn {
    font-size: 14px;
    padding: 6px 16px 5px;
  }
  .course-item__btn .hide-on-bothTM {
    display: none !important;
  }
}
.course-item__btn.billed {
  background-color: #56aa02;
}
.course-item__btn:hover {
  color: #fff;
}
.course-item__btn.active {
  background-color: #56aa02;
}
.course-item__activity {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-pagination {
  margin-top: 50px;
  padding: 0 14px;
}
.course-pagination__item + .course-pagination__item {
  margin-left: 10px;
}
.course-pagination__link {
  color: #71848e;
  width: 33px;
  height: 40px;
  font-size: 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #95c8e8;
}
.course-pagination__link:hover {
  color: #0680cd;
  border-color: #95c8e8;
  background-color: rgba(149, 200, 232, 0.2);
}
.course-pagination__link.active {
  font-weight: 700;
  color: #fff;
  background-color: #0680cd;
  border-color: #0680cd;
}
.course-pagination__link.active:hover {
  color: #fff;
}
.course-details__img {
  margin-bottom: 14px;
  border-radius: 10px 10px 0 0;
  position: relative;
  padding-top: 67%;
  overflow: hidden;
}
.course-details__img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-details__img::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: 48%;
  background: linear-gradient(180deg, rgba(243, 251, 255, 0) 0%, rgb(255, 255, 255) 100%);
}
.course-details__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
@media only screen and (max-width: 63.9375em) {
  .course-details__wrapper {
    gap: 20px;
    flex-direction: column;
    padding: 0 14px;
  }
  .course-details__wrapper .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-details__wrapper {
    gap: 12px;
  }
}
@media only screen and (max-width: 63.9375em) {
  .course-details__wrapper.special {
    flex-direction: column-reverse;
  }
  .course-details__wrapper.special .hide-on-bothTM {
    display: none !important;
  }
}
.course-details__info {
  width: 39%;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .course-details__info {
    width: 85%;
    margin: auto;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-details__info {
    width: 100%;
  }
}
.course-details__content {
  width: 61%;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #95c8e8;
}
@media only screen and (max-width: 63.9375em) {
  .course-details__content {
    margin-top: 16px;
    width: 100%;
  }
  .course-details__content .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-details__content {
    padding: 22px 16px;
  }
}
.course-details__title {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.4;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .course-details__title {
    font-size: 22px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-details__title {
    font-size: 20px;
  }
}
.course-details__btn {
  height: 50px;
  border-radius: 10px;
  padding: 5px 6px;
}
.course-details__nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}
.course-details__phone, .course-details__step {
  color: #fff;
  background-color: #ffa200;
}
.course-details__phone, .course-details__zalo {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  min-width: 50px;
}
.course-details__step {
  font-size: 16px;
  font-weight: 600;
  width: 100%;
}
.course-details__zalo {
  background-color: #f3fbff;
  border: 1px solid #0680cd;
}
.course-details__sub {
  font-size: 16px;
  font-weight: 700;
  color: #2a485e;
}
.course-details__desc {
  padding-top: 12px;
  border-top: 1px dashed #cecece;
}
.course-details__desc + .course-details__desc {
  margin-top: 12px;
}
.course-details__text {
  margin-top: 6px;
  color: #71848e;
}
.course-details__list {
  margin-top: 12px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.course-details__item {
  width: 100%;
  padding: 20px 16px;
  border-radius: 8px;
  background-color: #f3fbff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 63.9375em) {
  .course-details__item {
    padding: 15px 10px;
  }
  .course-details__item .hide-on-bothTM {
    display: none !important;
  }
}
.course-details__item.locked {
  user-select: none;
  pointer-events: none;
  background-color: #f0f0f0;
}
.course-details__name {
  color: #71848e;
  padding-right: 10px;
}
.course-details__price {
  margin-bottom: 14px;
}
.course-details__class {
  font-size: 18px;
  font-weight: 500;
}
.course-details__box {
  margin-top: 12px;
  padding: 16px 18px 12px;
  border-radius: 10px;
  background-color: #f3fbff;
}
.course-lesson__follow {
  padding: 14px 20px 12px;
  border-radius: 8px;
  background-color: #f3fbff;
  border: 1px solid #95c8e8;
}
.course-lesson__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.course-lesson__position {
  font-size: 16px;
  font-weight: 700;
  color: #ffa200;
}
.course-lesson__title {
  font-size: 16px;
  font-weight: 700;
  width: 60%;
  line-height: 1.4;
  color: #414141;
}
.course-lesson__progress {
  height: 4px;
  border-radius: 2.5px;
  background-color: #cecece;
}
.course-lesson__bar {
  border-radius: 2.5px;
  background-color: #0680cd;
}
.course-lesson__percent {
  font-size: 14px;
  font-weight: 500;
  margin-top: 9px;
  color: #71848e;
}
.course-lesson__landmark {
  margin-top: 18px;
  background-color: #fff;
  padding: 14px 20px 27px;
}
.course-lesson__name {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 2px;
  color: #71848e;
}
.course-lesson__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
.course-lesson__list {
  margin-top: 20px;
}
.course-lesson__check {
  display: none;
}
.course-lesson__check:checked + .course-lesson__line {
  border-color: #ffa200;
  background-color: transparent;
}
.course-lesson__check:checked + .course-lesson__line + .course-lesson__info .course-lesson__name {
  color: #414141;
  font-weight: 700;
}
.course-lesson__check:checked + .course-lesson__line::after, .course-lesson__check:checked + .course-lesson__line::before {
  opacity: 1;
  visibility: visible;
}
.course-lesson__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
.course-lesson__item:last-child .course-lesson__line::after {
  display: none;
}
.course-lesson__item.step-next .course-lesson__name {
  font-weight: 700;
  color: #414141;
}
.course-lesson__item + .course-lesson__item {
  margin-top: 20px;
}
.course-lesson__info {
  margin-left: 15px;
}
.course-lesson__line {
  position: relative;
  --size-check: 20px;
  min-width: var(--size-check);
  width: var(--size-check);
  height: var(--size-check);
  display: inline-block;
  margin-top: 1px;
  border-radius: 50%;
  background-color: #f8f8f8;
  border: 1px solid #cecece;
}
.course-lesson__line::before, .course-lesson__line::after {
  position: absolute;
  content: "";
  left: 50%;
  opacity: 0;
  visibility: hidden;
  background-color: #ffa200;
  transition: opacity 0.3s, visibility 0.3s;
}
.course-lesson__line::after {
  top: calc(100% + 8px);
  width: 1.8px;
  height: 32px;
  transform: translateX(-50%);
}
.course-lesson__line::before {
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.course-video {
  padding-top: 0;
}
.course-video__content {
  position: relative;
  border: 0;
  padding-top: 31%;
  overflow: hidden;
}
@media only screen and (max-width: 63.9375em) {
  .course-video__content {
    padding: 0;
    margin-top: 0;
  }
  .course-video__content .hide-on-bothTM {
    display: none !important;
  }
}
.course-video__content iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.course-video__content img {
  width: 100%;
}
.course-news__title {
  font-size: 22px;
  font-weight: 800;
  color: #0680cd;
  margin-bottom: 20px;
}
@media only screen and (max-width: 63.9375em) {
  .course-news__title {
    font-size: 20px;
    padding: 0 14px;
    margin-bottom: 15px;
  }
  .course-news__title .hide-on-bothTM {
    display: none !important;
  }
}
.course-news__title.special {
  color: #2a485e;
}
.course-news__slide {
  position: relative;
}
.course-news__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 12px;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .course-news__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-news__list {
    padding: 0 8px;
    gap: 16px 8px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.course-news__nav {
  width: 30px;
  height: 40px;
  --position: -50px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}
@media only screen and (max-width: 63.9375em) {
  .course-news__nav {
    display: none;
  }
  .course-news__nav .hide-on-bothTM {
    display: none !important;
  }
}
.course-news__nav::after {
  display: none;
}
.course-news__nav.swiper-button-prev {
  left: var(--position);
}
.course-news__nav.swiper-button-next {
  right: var(--position);
}
.course-news__pagination {
  display: none;
  position: relative;
  margin-top: 10px;
  bottom: 0 !important;
}
@media only screen and (max-width: 63.9375em) {
  .course-news__pagination {
    display: block;
  }
  .course-news__pagination .hide-on-bothTM {
    display: none !important;
  }
}
.course-news__wrapper + .course-news__wrapper {
  margin-top: 30px;
}
.course-nav {
  position: relative;
  padding: 30px 120px 20px;
  margin-bottom: 30px;
  border-radius: 20px;
  background-color: #0680cd;
}
@media only screen and (max-width: 1440px) {
  .course-nav {
    padding: 30px 75px 20px;
  }
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .course-nav {
    padding: 30px 44px 20px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-nav {
    padding: 26px 12px 18px;
  }
}
.course-nav__list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-nav__img {
  --sizeImg: 120px;
  width: var(--sizeImg);
  height: var(--sizeImg);
  overflow: hidden;
  border-radius: 50%;
}
@media only screen and (max-width: 63.9375em) {
  .course-nav__img {
    --sizeImg: 100px;
  }
  .course-nav__img .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-nav__img {
    --sizeImg: 75px;
  }
}
.course-nav__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-nav__link {
  position: relative;
  z-index: 10;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #95c8e8;
  flex-direction: column;
  font-weight: 500;
}
.course-nav__link:hover {
  color: #95c8e8;
}
.course-nav__link.active {
  color: #fff;
  font-weight: 700;
}
.course-nav__link.active:hover {
  color: #fff;
}
.course-nav__title {
  margin-top: 18px;
  font-size: 18px;
  text-transform: uppercase;
}
@media only screen and (max-width: 63.9375em) {
  .course-nav__title {
    margin-top: 15px;
    font-size: 16px;
  }
  .course-nav__title .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-nav__title {
    font-size: 15px;
    margin-top: 12px;
  }
}
.course-nav__bg {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: 35%;
  height: 66%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
}
@media only screen and (max-width: 46.1875em) {
  .course-nav__bg {
    width: 54%;
    background-size: contain;
  }
}
.course-public {
  min-height: 47vh;
  padding-top: 0;
}
.course-public__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 63.9375em) {
  .course-public__wrapper {
    flex-direction: column;
    padding: 0 10px;
  }
  .course-public__wrapper .hide-on-bothTM {
    display: none !important;
  }
}
.course-public__price {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  width: fit-content;
  flex-direction: column;
  padding: 14px 40px 14px 18px;
  border-radius: 0 50px 50px 0;
  background-color: #0680cd;
}
.course-public__buy {
  background-color: #0680cd;
}
.course-public__buy.time-end {
  user-select: none;
  pointer-events: none;
  background-color: #eb2700;
}
.course-public__money {
  color: #fff;
  font-size: 40px;
  line-height: 1.2;
  font-family: "Calistoga", serif;
}
@media only screen and (max-width: 46.1875em) {
  .course-public__money {
    font-size: 30px;
  }
}
.course-public__old {
  font-size: 20px;
  font-weight: 400;
  color: #95c8e8;
  text-decoration: line-through;
}
@media only screen and (max-width: 46.1875em) {
  .course-public__old {
    font-size: 18px;
  }
}
.course-public__number {
  margin-top: 15px;
  font-weight: 500;
}
.course-public__number svg {
  margin-right: 10px;
}
.course-public__cover {
  padding-top: 38px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .course-public__cover {
    justify-content: flex-start;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-public__cover {
    padding-top: 42px;
    justify-content: space-between;
  }
}
.course-public__sub {
  font-size: 16px;
  font-weight: 700;
  color: #2a485e;
}
.course-public__cover, .course-public__nav {
  padding-right: 90px;
}
@media only screen and (max-width: 46.1875em) {
  .course-public__cover, .course-public__nav {
    padding-right: 0;
  }
}
.course-public__sort {
  padding-right: 60px;
}
@media only screen and (max-width: 63.9375em) {
  .course-public__sort {
    padding-right: 0;
  }
  .course-public__sort .hide-on-bothTM {
    display: none !important;
  }
}
.course-public__info {
  padding: 16px 26px;
  border-radius: 8px;
  background-color: #fff;
}
@media only screen and (max-width: 63.9375em) {
  .course-public__info {
    margin-top: 30px;
  }
  .course-public__info .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-public__info {
    padding: 16px 18px;
  }
}
.course-public__content {
  margin-top: 5px;
  color: #71848e;
  line-height: 1.5;
}
.course-public__content * {
  font-size: revert;
  margin: revert;
  padding: revert;
  text-decoration: revert;
  font-family: "Roboto", sans-serif;
}
.course-public__content ul,
.course-public__content li {
  list-style-type: revert;
}
.course-public__content img {
  width: fit-content;
  height: auto;
  /* display: revert; */
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 46.1875em) {
  .course-public__content img {
    width: auto !important;
    height: auto !important;
  }
}
.course-public__content a {
  display: revert;
}
.course-public__img {
  margin-top: -40px;
}
@media only screen and (max-width: 63.9375em) {
  .course-public__img {
    margin-left: 40px;
  }
  .course-public__img .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-public__img {
    margin-left: 22px;
  }
}
.course-public__info, .course-public__sort {
  width: 50%;
}
@media only screen and (max-width: 63.9375em) {
  .course-public__info, .course-public__sort {
    width: 100%;
  }
  .course-public__info .hide-on-bothTM, .course-public__sort .hide-on-bothTM {
    display: none !important;
  }
}
.course-public__title {
  font-size: 35px;
  line-height: 1.4;
  font-family: "Calistoga", serif;
  color: #414141;
}
@media only screen and (max-width: 63.9375em) {
  .course-public__title {
    font-size: 30px;
    line-height: 1.5;
  }
  .course-public__title .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .course-public__title {
    font-size: 27px;
  }
}

.auth {
  position: relative;
  min-height: 55vh;
}
.auth-back {
  position: absolute;
  top: 55px;
  left: 50px;
  transition: all 0.3s;
}
@media only screen and (max-width: 1440px) {
  .auth-back {
    top: 35px;
    left: 30px;
  }
}
@media only screen and (max-width: 1283px) {
  .auth-back {
    top: 20px;
    left: 20px;
  }
  .auth-back .hide-on-pc-HD {
    display: none;
  }
}
.auth-back:hover {
  opacity: 0.6;
}
@media only screen and (max-width: 1283px) {
  .auth-back img {
    width: 20px;
    height: 20px;
  }
  .auth-back img .hide-on-pc-HD {
    display: none;
  }
}
.auth-content {
  width: 75%;
  margin: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  align-items: stretch;
}
@media only screen and (max-width: 46.1875em) {
  .auth-content {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
}
.auth-banner {
  position: relative;
  width: 41%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1283px) {
  .auth-banner {
    margin-left: 40px;
  }
  .auth-banner .hide-on-pc-HD {
    display: none;
  }
}
@media only screen and (max-width: 63.9375em) {
  .auth-banner {
    display: none;
  }
  .auth-banner .hide-on-bothTM {
    display: none !important;
  }
}
.auth-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 85.5%;
  border-radius: 0 0 200px 200px;
  background-color: #f3fbff;
}
@media only screen and (max-width: 46.1875em) {
  .auth-banner::after {
    height: 100%;
  }
}
.auth-banner img {
  padding: 0 10px;
}
@media only screen and (max-width: 46.1875em) {
  .auth-banner img {
    width: 75%;
  }
}
.auth-box {
  position: relative;
  width: 53%;
  padding: 70px 0 70px 80px;
}
@media only screen and (max-width: 63.9375em) {
  .auth-box {
    width: 100%;
    padding: 70px 0 70px 0px;
  }
  .auth-box .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .auth-box {
    align-items: center;
    flex-direction: column;
    padding: 24px 0 30px;
  }
}
.auth-form {
  width: 100%;
}
@media only screen and (max-width: 1440px) {
  .auth-form {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 1283px) {
  .auth-form {
    padding-top: 40px;
  }
  .auth-form .hide-on-pc-HD {
    display: none;
  }
}
@media only screen and (max-width: 63.9375em) {
  .auth-form {
    width: 80%;
    margin: auto;
    padding-top: 30px;
  }
  .auth-form .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .auth-form {
    width: 100%;
    padding-top: 20px;
  }
}
.auth-form__title {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.3;
  color: #2a485e;
  text-transform: uppercase;
}
@media only screen and (max-width: 1440px) {
  .auth-form__title {
    font-size: 32px;
  }
}
@media only screen and (max-width: 1283px) {
  .auth-form__title {
    font-size: 28px;
  }
  .auth-form__title .hide-on-pc-HD {
    display: none;
  }
}
@media only screen and (max-width: 63.9375em) {
  .auth-form__title {
    font-size: 24px;
  }
  .auth-form__title .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .auth-form__title {
    font-size: 20px;
  }
}
.auth-form__sub {
  font-size: 18px;
  color: #71848e;
  margin: 6px 0 40px;
}
@media only screen and (max-width: 1440px) {
  .auth-form__sub {
    font-size: 16px;
    margin: 6px 0 30px;
  }
}
@media only screen and (max-width: 1283px) {
  .auth-form__sub {
    font-size: 14px;
    margin: 6px 0 20px;
  }
  .auth-form__sub .hide-on-pc-HD {
    display: none;
  }
}
.auth-form__cover + .auth-form__cover {
  margin-top: 35px;
}
.auth-form__cate {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #2a485e;
  margin-bottom: 13px;
}
@media only screen and (max-width: 46.1875em) {
  .auth-form__cate {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.auth-form__group {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #cfcece;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 63.9375em) {
  .auth-form__group {
    padding: 10px 12px;
  }
  .auth-form__group .hide-on-bothTM {
    display: none !important;
  }
}
.auth-form__group + .auth-form__group {
  margin-top: 15px;
}
.auth-form__icon {
  flex-shrink: 0;
  margin-right: 12px;
}
.auth-form__icon.eye {
  cursor: pointer;
  margin-right: 0;
  margin-left: 12px;
}
.auth-form__icon img {
  width: 20px;
  height: 20px;
}
@media only screen and (max-width: 1283px) {
  .auth-form__icon img {
    width: 18px;
    height: 18px;
  }
  .auth-form__icon img .hide-on-pc-HD {
    display: none;
  }
}
@media only screen and (max-width: 63.9375em) {
  .auth-form__icon img {
    width: 16px;
    height: 16px;
  }
  .auth-form__icon img .hide-on-bothTM {
    display: none !important;
  }
}
.auth-form__toggle img {
  width: 20px;
  height: 20px;
}
.auth-form__input {
  font-size: 16px;
  line-height: 25px;
  width: 100%;
  border: none;
}
@media only screen and (max-width: 63.9375em) {
  .auth-form__input {
    font-size: 16px;
  }
  .auth-form__input .hide-on-bothTM {
    display: none !important;
  }
}
.auth-form__input::placeholder {
  color: #cfcece;
}
.auth-form__btn {
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #fff;
  margin-top: 35px;
  padding: 13px 12px 12px;
  border-radius: 10px;
  background-color: #0680cd;
  transition: all 0.3s;
}
@media only screen and (max-width: 63.9375em) {
  .auth-form__btn {
    font-size: 14px;
    margin-top: 25px;
    padding: 12px 10px 10px;
  }
  .auth-form__btn .hide-on-bothTM {
    display: none !important;
  }
}
.auth-form__btn:hover {
  color: #fff;
}
.auth-form__forgot {
  margin-top: 30px;
}
@media only screen and (max-width: 1440px) {
  .auth-form__forgot {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .auth-form__forgot {
    margin-top: 15px;
  }
}
.auth-form__forgot a {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  color: #414141;
  transition: all 0.3s;
}
@media only screen and (max-width: 1440px) {
  .auth-form__forgot a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 63.9375em) {
  .auth-form__forgot a {
    font-size: 14px;
  }
  .auth-form__forgot a .hide-on-bothTM {
    display: none !important;
  }
}
.auth-form__forgot a:hover {
  color: #0680cd;
}
.auth-form__otp {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.auth-form__square {
  --size-square: 60px;
  width: var(--size-square);
  height: var(--size-square);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  color: #414141;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid #cfcece;
}
@media only screen and (max-width: 1283px) {
  .auth-form__square {
    --size-square: 50px;
    font-size: 20px;
  }
  .auth-form__square .hide-on-pc-HD {
    display: none;
  }
}
@media only screen and (max-width: 395px) {
  .auth-form__square {
    --size-square: 45px;
    font-size: 18px;
  }
}
.auth-form__square:focus {
  border-color: #95c8e8;
}
.auth-note {
  width: 100%;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  color: #414141;
}
@media only screen and (max-width: 1440px) {
  .auth-note {
    font-size: 16px;
    bottom: 40px;
  }
}
@media only screen and (max-width: 1283px) {
  .auth-note {
    bottom: 20px;
  }
  .auth-note .hide-on-pc-HD {
    display: none;
  }
}
@media only screen and (max-width: 63.9375em) {
  .auth-note {
    font-size: 14px;
    bottom: 10px;
  }
  .auth-note .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .auth-note {
    position: relative;
    margin-top: 25px;
  }
}
.auth-note__text {
  margin-top: 20px;
}
.auth-note__link {
  font-weight: 600;
  color: #0680cd;
  display: inline-block;
  margin-left: 2px;
}
.auth-note__link:hover {
  text-decoration: underline !important;
}
.auth-modal__dialog {
  max-width: 590px;
}
@media only screen and (max-width: 1283px) {
  .auth-modal__dialog {
    max-width: 500px;
  }
  .auth-modal__dialog .hide-on-pc-HD {
    display: none;
  }
}
.auth-modal__body {
  padding: 35px 87px;
  border-radius: 15px;
  background-color: #f3fbff;
}
@media only screen and (max-width: 46.1875em) {
  .auth-modal__body {
    padding: 20px 30px;
  }
}
.auth-modal__box {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1283px) {
  .auth-modal__img {
    width: 200px;
  }
  .auth-modal__img .hide-on-pc-HD {
    display: none;
  }
}
.auth-modal__icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 30%);
}
@media only screen and (max-width: 1283px) {
  .auth-modal__icon {
    width: 60px;
    height: 60px;
  }
  .auth-modal__icon .hide-on-pc-HD {
    display: none;
  }
}
.auth-modal__title {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
  color: #2a485e;
  margin-top: 50px;
}
@media only screen and (max-width: 1283px) {
  .auth-modal__title {
    font-size: 20px;
    margin-top: 30px;
  }
  .auth-modal__title .hide-on-pc-HD {
    display: none;
  }
}
@media only screen and (max-width: 46.1875em) {
  .auth-modal__title {
    font-size: 18px;
  }
}
.auth-modal__sub {
  font-size: 16px;
  text-align: center;
  color: #71848e;
  margin-top: 6px;
}
@media only screen and (max-width: 46.1875em) {
  .auth-modal__sub {
    font-size: 14px;
  }
}

.notify {
  padding-top: 24px;
}
.notify-special {
  padding: 22px 20px;
  border-radius: 8px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffeacd;
}
@media only screen and (max-width: 46.1875em) {
  .notify-special {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 18px;
  }
}
.notify-special__img img {
  height: 30px;
}
.notify-special__info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.notify-special__desc {
  padding-left: 20px;
  font-size: 18px;
  font-family: "Calistoga", serif;
  line-height: 1.5;
}
@media only screen and (max-width: 46.1875em) {
  .notify-special__desc {
    padding-left: 10px;
  }
}
.notify-special__link {
  color: #ffa200;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .notify-special__link {
    margin-top: 12px;
  }
}
.notify-special__link svg {
  margin-left: 10px;
}
.notify-special__link:hover svg path {
  fill: #0680cd;
}
.notify-details__empty {
  min-height: 40vh !important;
}
.notify-details__list {
  border-radius: 10px;
}
.notify-details__icon {
  --sizeIcon: 35px;
  min-width: var(--sizeIcon);
  width: var(--sizeIcon);
  height: var(--sizeIcon);
  background-color: #f3fbff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.notify-details__item {
  position: relative;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  border: 1px solid #f0f0f0;
}
.notify-details__item::after {
  position: absolute;
  content: "";
  right: 14px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #ffa200;
  opacity: 0;
  visibility: hidden;
}
.notify-details__item + .notify-details__item {
  margin-top: 14px;
}
.notify-details__item.new-mess {
  border-color: #95c8e8;
  background-color: #f3fbff;
}
.notify-details__item.new-mess::after {
  opacity: 1;
  visibility: visible;
}
.notify-details__item.new-mess .notify-details__icon {
  background-color: #fff;
}
.notify-details__title {
  font-size: 16px;
  font-weight: 500;
  color: #414141;
}
.notify-details__text {
  color: #414141;
  font-size: 16px;
}
.notify-details__time {
  color: #71848e;
}

.nav {
  padding: 22px 0 12px;
  background-size: cover;
  background-repeat: no-repeat;
}
.nav.special .nav-item__link,
.nav.special .nav-item.active,
.nav.special .nav-item {
  color: #71848e;
}
.nav.special .nav-item__link:hover {
  color: #0680cd;
}
.nav.special .nav-item + .nav-item::before {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6705 7.99999C10.6709 7.84416 10.6168 7.69308 10.5175 7.57299L7.18445 3.57299C7.12845 3.50556 7.0597 3.44982 6.98215 3.40895C6.9046 3.36808 6.81976 3.34289 6.73247 3.33481C6.55619 3.3185 6.38064 3.37288 6.24445 3.48599C6.10827 3.59911 6.02259 3.76169 6.00627 3.93797C5.98996 4.11426 6.04434 4.2898 6.15745 4.42599L9.14245 7.99999L6.26245 11.573C6.20275 11.643 6.15779 11.7243 6.13025 11.8121C6.10272 11.8999 6.09317 11.9923 6.1022 12.0839C6.11122 12.1755 6.13862 12.2643 6.18276 12.345C6.2269 12.4257 6.28688 12.4967 6.35909 12.5537C6.43131 12.6107 6.51429 12.6526 6.60306 12.6768C6.69182 12.701 6.78456 12.707 6.87571 12.6945C6.96687 12.682 7.05457 12.6513 7.13356 12.6041C7.21256 12.5569 7.28122 12.4943 7.33545 12.42L10.5555 8.41999C10.6397 8.2968 10.6802 8.14892 10.6705 7.99999Z' fill='%2371848E'/%3E%3C/svg%3E%0A");
}
.nav-wrapper {
  padding-bottom: 70px;
}
@media only screen and (max-width: 46.1875em) {
  .nav-wrapper {
    padding-bottom: 82px;
  }
}
.nav-wrapper.special {
  padding-bottom: 0px;
}
.nav-wrapper.small {
  padding-bottom: 10px;
}
.nav-cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .nav-cover {
    flex-direction: column;
    align-items: center;
  }
}
.nav-list {
  margin-bottom: 0;
}
.nav-item {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .nav-item {
    margin-bottom: 8px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .nav-item {
    font-size: 14px;
    margin-bottom: 4px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .nav-item + .nav-item {
    padding-left: 6px;
  }
}
.nav-item + .nav-item::before {
  color: #fff;
  content: "";
  height: 20px;
  width: 20px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6705 7.99999C10.6709 7.84416 10.6168 7.69308 10.5175 7.57299L7.18445 3.57299C7.12845 3.50556 7.0597 3.44982 6.98215 3.40895C6.9046 3.36808 6.81976 3.34289 6.73247 3.33481C6.55619 3.3185 6.38064 3.37288 6.24445 3.48599C6.10827 3.59911 6.02259 3.76169 6.00627 3.93797C5.98996 4.11426 6.04434 4.2898 6.15745 4.42599L9.14245 7.99999L6.26245 11.573C6.20275 11.643 6.15779 11.7243 6.13025 11.8121C6.10272 11.8999 6.09317 11.9923 6.1022 12.0839C6.11122 12.1755 6.13862 12.2643 6.18276 12.345C6.2269 12.4257 6.28688 12.4967 6.35909 12.5537C6.43131 12.6107 6.51429 12.6526 6.60306 12.6768C6.69182 12.701 6.78456 12.707 6.87571 12.6945C6.96687 12.682 7.05457 12.6513 7.13356 12.6041C7.21256 12.5569 7.28122 12.4943 7.33545 12.42L10.5555 8.41999C10.6397 8.2968 10.6802 8.14892 10.6705 7.99999Z' fill='white'/%3E%3C/svg%3E%0A");
}
@media only screen and (max-width: 46.1875em) {
  .nav-item + .nav-item::before {
    height: 18px;
    width: 18px;
    margin-top: 1px;
    padding-right: 20px;
  }
}
.nav-item__link:hover, .nav-item.active {
  color: #fff;
}
.nav-item__link {
  display: inline-block;
  color: #fff;
  transition: all 0.3s;
}
.nav-item__link:hover {
  color: #0680cd;
  text-decoration: underline !important;
}
.nav-title {
  font-size: 40px;
  font-family: "Calistoga", serif;
  color: #fff;
}
@media only screen and (max-width: 63.9375em) {
  .nav-title {
    font-size: 30px;
  }
  .nav-title .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .nav-title {
    font-size: 26px;
  }
}
.nav-title.special {
  margin-top: 10px;
}
.nav-activity {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .nav-activity {
    margin-top: 24px;
  }
}
.nav-activity__link {
  padding: 9px 26px;
  font-size: 16px;
  color: #71848e;
  border-radius: 20px;
  background-color: #fff;
}
@media only screen and (max-width: 46.1875em) {
  .nav-activity__link {
    font-size: 15px;
    padding: 8px 26px;
  }
}
.nav-activity__link:hover {
  color: #71848e;
}
.nav-activity__link + .nav-activity__link {
  margin-left: 18px;
}
.nav-activity__link.active {
  color: #fff;
  background-color: #ffa200;
}
.nav-sort {
  font-size: 16px;
  font-weight: 500;
  color: #414141;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .nav-sort {
    margin-top: 12px;
  }
}
.nav-sort svg {
  margin-left: 8px;
}
.nav-dropdown {
  margin-top: 20px !important;
  min-width: 280px;
  right: 0 !important;
  left: auto !important;
  border: 0;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
@media only screen and (max-width: 46.1875em) {
  .nav-dropdown {
    left: -70% !important;
  }
}
.nav-dropdown__item {
  border-bottom: 1px solid #f0f0f0;
}
.nav-dropdown__item:last-child {
  border-bottom: 0;
}
.nav-dropdown__link {
  font-size: 16px;
  padding: 10px 0;
  transition: all 0.3s;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-dropdown__link.active, .nav-dropdown__link:hover {
  font-weight: 500;
  color: #0680cd;
  background-color: transparent;
}
.nav-search {
  width: 29%;
  padding: 6px 0 7px;
  border-radius: 8px;
  border: 1px solid #cecece;
  background-color: #fff;
}
@media only screen and (max-width: 63.9375em) {
  .nav-search {
    width: 40%;
  }
  .nav-search .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .nav-search {
    margin-top: 10px;
    width: 100%;
    padding: 4px 0 5px;
  }
}
.nav-search__icon {
  border: 0;
  background-color: transparent;
}
.nav-search__input {
  font-size: 16px;
  border: 0;
  padding-left: 0;
}
.nav-search__input:focus, .nav-search__input:active {
  box-shadow: none;
}
.nav-search__input::placeholder {
  color: #cecece;
}
.nav-all {
  font-weight: 500;
  font-size: 16px;
  color: #0680cd;
}

.news-item {
  position: relative;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}
@media only screen and (max-width: 46.1875em) {
  .news-item {
    margin: 0 10px;
  }
}
.news-item__img {
  position: relative;
  padding-top: 80%;
  overflow: hidden;
}
.news-item__img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-item__image {
  position: relative;
  padding-top: 87%;
  overflow: hidden;
}
.news-item__image > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-item__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  padding: 20px 16px 12px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.18));
}
.news-item__title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px 0;
  line-height: 1.3;
}
@media only screen and (max-width: 63.9375em) {
  .news-item__title {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 9px 0;
  }
  .news-item__title .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .news-item__title {
    font-size: 16px;
  }
}
.news-item__meta {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #f3f3f3;
  gap: 8px;
}
.news-item__meta.special {
  color: #71848e;
}
.news-item__meta.special svg path {
  fill: #71848e;
}
.news-item__icon {
  display: inline-flex;
  vertical-align: middle;
}
.news-item__date {
  font-size: 14px;
}
.news-details {
  border-radius: 10px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 63.9375em) {
  .news-details {
    width: 100%;
  }
  .news-details .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .news-details {
    width: 96%;
  }
}
.news-details__img {
  position: relative;
  padding-top: 85%;
  overflow: hidden;
}
.news-details__img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-details__info {
  padding: 20px 20px 40px;
  background-color: #fff;
}
.news-details__title {
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 2px;
  color: #414141;
}
@media only screen and (max-width: 63.9375em) {
  .news-details__title {
    font-size: 20px;
  }
  .news-details__title .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .news-details__title {
    margin-bottom: 6px;
    line-height: 1.4;
  }
}
.news-details__content {
  margin-top: 20px;
}
.news-details__content * {
  margin: revert;
  font-size: 16px;
  padding: revert;
  list-style-type: revert;
  display: revert;
  color: revert;
  text-decoration: revert;
  line-height: 1.7;
}
.news-details__content img {
  max-width: 100%;
}
.news-same {
  margin-top: 44px;
}
@media only screen and (max-width: 46.1875em) {
  .news-same {
    margin-top: 30px;
  }
}
.news-rank {
  padding-bottom: 0;
}
.news-rank__content {
  position: relative;
}
.news-rank__title {
  font-weight: 500;
  font-family: "Calistoga", serif;
}
.news-rank__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 33%;
  overflow: hidden;
}
@media only screen and (max-width: 63.9375em) {
  .news-rank__bg {
    margin-top: 0;
  }
  .news-rank__bg .hide-on-bothTM {
    display: none !important;
  }
}
.news-rank__bg img {
  width: 100%;
}
.news-rank__people {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 120px;
}
@media only screen and (max-width: 63.9375em) {
  .news-rank__people {
    padding-top: 110px;
  }
  .news-rank__people .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .news-rank__people {
    padding-top: 90px;
  }
}
.news-rank__person {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.news-rank__person:nth-child(2) {
  transform: translateY(-50%);
}
.news-rank__person + .news-rank__person {
  margin-left: 90px;
}
@media only screen and (max-width: 46.1875em) {
  .news-rank__person + .news-rank__person {
    margin-left: 32px;
  }
}
.news-rank__avatar, .news-rank__icon {
  overflow: hidden;
  border-radius: 50%;
  border: 1.8px solid #ffa200;
}
.news-rank__icon {
  position: absolute;
  bottom: calc(100% - 18px);
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  background-color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.news-rank__icon img {
  height: 25px;
}
.news-rank__avatar {
  --size: 129px;
  width: var(--size);
  height: var(--size);
}
@media only screen and (max-width: 46.1875em) {
  .news-rank__avatar {
    --size: 80px;
  }
}
.news-rank__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.news-rank__name {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin-top: 7px;
}
.news-rank__result {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: -60px;
}
@media only screen and (max-width: 46.1875em) {
  .news-rank__result {
    margin-top: -38px;
  }
}
.news-rank__number {
  position: relative;
}
.news-rank__step {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 70px;
  font-family: "Calistoga", serif;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 46.1875em) {
  .news-rank__step {
    font-size: 50px;
  }
}
.news-rank__table {
  width: 64%;
  padding: 20px 10px 30px;
  margin: auto;
  background-color: #fff;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 63.9375em) {
  .news-rank__table {
    width: 98%;
  }
  .news-rank__table .hide-on-bothTM {
    display: none !important;
  }
}
.news-rank__item {
  position: relative;
  padding: 14px 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.news-rank__item.active {
  background-color: rgba(255, 162, 0, 0.08);
}
.news-rank__item::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  height: 1px;
  width: 94%;
  transform: translateX(-50%);
  background-color: #f0f0f0;
}
.news-rank__item:last-child::after {
  display: none;
}
.news-rank__info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.news-rank__position {
  font-family: "Calistoga", serif;
  font-size: 20px;
  min-width: 64px;
}
@media only screen and (max-width: 46.1875em) {
  .news-rank__position {
    font-size: 16px;
    min-width: 52px;
  }
}
.news-rank__img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 15px 0 2px;
}
.news-rank__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-rank__level {
  width: 31px;
  height: 31px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #ffa200;
}
.news-rank__level img {
  width: 17px;
  height: 17px;
}
.news-rank__sub {
  font-size: 16px;
}

.payment {
  padding: 20px 0 24px 0;
  margin: 0 auto;
  background: #f8f8f8;
  border-radius: 16px;
}
.payment-title {
  font-size: 16px;
  font-weight: 500;
  color: #414141;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .payment-title {
    width: 100%;
  }
}
.payment-title svg {
  margin-right: 12px;
}
.payment-group {
  position: relative;
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
@media only screen and (max-width: 46.1875em) {
  .payment-group {
    padding: 20px 12px;
  }
}
.payment-package {
  margin-top: 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
}
.payment-package__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  width: 100%;
}
@media only screen and (max-width: 46.1875em) {
  .payment-package__cover {
    flex-direction: column;
  }
}
.payment-package__image {
  --size: 100px;
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  margin-right: 16px;
  border-radius: 10px;
  border: 1px solid #95c8e8;
}
.payment-package__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.payment-package__info {
  flex: 1;
}
.payment-package__name {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 4px;
  color: #2a485e;
}
.payment-package__time {
  font-size: 15px;
  color: #8391a7;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.payment-package__time .select2-container {
  width: 140px !important;
}
.payment-package__time .select2-container .select2-selection--single {
  padding: 0;
  border: 0;
}
.payment-package__time .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 8px;
}
.payment-package__icon {
  margin-right: 8px;
}
.payment-package__price {
  font-size: 22px;
  color: #0680cd;
  font-family: "Calistoga", serif;
}
@media only screen and (max-width: 46.1875em) {
  .payment-package__price {
    margin-top: 10px;
  }
}
.payment-package__price.special {
  color: #ffa200;
}
.payment-method, .payment-voucher, .payment-point, .payment-detail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.payment-method {
  justify-content: space-between;
}
@media only screen and (max-width: 46.1875em) {
  .payment-method {
    flex-direction: column;
  }
}
.payment-method__option {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media only screen and (max-width: 46.1875em) {
  .payment-method__option {
    margin-top: 14px;
    width: 100%;
  }
}
.payment-method__check {
  width: 50%;
  margin-top: 4px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .payment-method__check {
    width: 60%;
  }
}
@media only screen and (max-width: 46.1875em) {
  .payment-method__check {
    width: 100%;
    flex-direction: column;
  }
}
.payment-method__line {
  margin-right: 10px;
}
.payment-method__line::after {
  display: none;
}
.payment-method__text {
  color: #71848e;
}
.payment-voucher {
  justify-content: space-between;
}
.payment-voucher__btn {
  color: #71848e;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  border: none;
  border-radius: 8px;
}
@media only screen and (max-width: 46.1875em) {
  .payment-voucher__btn {
    padding-left: 12px;
    width: fit-content;
    min-width: fit-content;
  }
}
.payment-point {
  justify-content: space-between;
}
@media only screen and (max-width: 46.1875em) {
  .payment-point {
    flex-direction: column;
  }
}
.payment-point__toggle {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .payment-point__toggle {
    width: 100%;
    margin-top: 12px;
  }
}
.payment-point__toggle input[type=checkbox] {
  width: 36px;
  height: 20px;
  accent-color: #048ae6;
}
.payment-point__switch {
  position: relative;
  display: inline-block;
  width: 52px;
  min-width: 52px;
  height: 32px;
}
@media only screen and (max-width: 46.1875em) {
  .payment-point__switch {
    height: 30px;
  }
}
.payment-point__input {
  display: none;
}
.payment-point__input:checked + .payment-point__round {
  background-color: #0680cd;
}
.payment-point__input:checked + .payment-point__round::after {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
@media only screen and (max-width: 46.1875em) {
  .payment-point__input:checked + .payment-point__round::after {
    -webkit-transform: translateX(23px);
    -ms-transform: translateX(23px);
    transform: translateX(23px);
  }
}
.payment-point__round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 34px;
  background-color: rgba(120, 120, 128, 0.1607843137);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.payment-point__round::after {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 3px;
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
@media only screen and (max-width: 46.1875em) {
  .payment-point__round::after {
    left: 2px;
    height: 25px;
    width: 25px;
  }
}
.payment-point__text {
  margin-right: 16px;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .payment-point__text {
    width: 100%;
  }
}
.payment-detail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.payment-detail.special {
  flex-direction: row;
}
@media only screen and (max-width: 46.1875em) {
  .payment-detail.special {
    flex-direction: column;
  }
}
.payment-detail__info {
  width: 40%;
}
@media only screen and (max-width: 63.9375em) {
  .payment-detail__info {
    width: 48%;
  }
  .payment-detail__info .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .payment-detail__info {
    width: 100%;
    margin-top: 10px;
  }
}
.payment-detail__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #6c7789;
  font-size: 16px;
}
.payment-detail__title {
  display: inline-block;
  color: #71848e;
}
.payment-detail__price {
  font-size: 18px;
  font-weight: 500;
  color: #414141;
}
.payment-detail__price.special {
  font-size: 16px;
}
.payment-detail__total {
  color: #ffa200;
  font-weight: 700;
  font-size: 18px;
}
.payment-address {
  position: relative;
  width: 100%;
  margin-top: 10px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payment-address__text {
  font-size: 16px;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .payment-address__text {
    font-size: 15px;
  }
}
.payment-address__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* full chiều ngang màn hình */
  height: 5px; /* bạn có thể chỉnh cao tùy ý */
  background: repeating-linear-gradient(-31.35deg, #ffb72b, #ffb72b 6px, #fff 6px, #fff 12px, #3093ce 12px, #3093ce 18px, #fff 18px, #fff 24px);
}
.payment-address__note {
  resize: none;
  width: 40%;
  padding: 14px 20px;
  border-radius: 8px;
  min-height: 90px !important;
  border: 1px solid #cecece;
}
@media only screen and (max-width: 46.1875em) {
  .payment-address__note {
    margin-top: 20px;
    width: 100%;
    padding: 10px 15px;
  }
}
.payment-address__note::placeholder {
  color: #cecece;
}
.payment-address__note:focus {
  box-shadow: none;
}
.payment-bottom {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px;
  margin-top: 14px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 46.1875em) {
  .payment-bottom {
    padding: 18px 13px;
  }
}
.payment-bottom__label {
  color: #a2afb9;
  font-size: 17px;
}
.payment-bottom__total {
  font-weight: 700;
  color: #ffa200;
  font-size: 22px;
}
.payment-bottom__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.payment-bottom__btn {
  font-size: 16px;
  font-weight: 600;
  margin-left: 24px;
  background: #0680cd;
  color: #fff;
  width: 36%;
  border: none;
  border-radius: 8px;
  padding: 12px 48px;
  cursor: pointer;
  transition: background 0.2s;
}
@media only screen and (max-width: 46.1875em) {
  .payment-bottom__btn {
    width: 38%;
    padding: 12px 12px;
  }
}
.payment-bottom__btn:hover {
  background: #036fc3;
}

.modal-voucher .modal-content {
  padding: 20px 14px;
  border-radius: 15px;
  background-color: #f3fbff;
}
.modal-voucher .modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #414141;
}
.modal-voucher .modal-dialog {
  max-width: 600px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher .modal-body {
    padding: 0;
  }
}
.modal-voucher .modal-header {
  padding-bottom: 6px;
  justify-content: center;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher .modal-header {
    padding-top: 10px;
  }
}
.modal-voucher__item {
  margin-top: 14px;
  gap: 10px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.modal-voucher__left {
  position: relative;
  width: 30%;
  min-width: 30%;
  display: flex;
  align-items: stretch;
  max-height: 110px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__left {
    max-height: 100%;
    height: 100%;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
  }
}
.modal-voucher__left::after, .modal-voucher__left::before {
  position: absolute;
  top: 50%;
  content: "";
  z-index: 10;
  height: 26px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #f3fbff;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__left::after, .modal-voucher__left::before {
    height: 20px;
  }
}
.modal-voucher__left::after {
  right: 0;
  transform: translate(50%, -50%);
}
.modal-voucher__left::before {
  left: 0;
  transform: translate(-50%, -50%);
}
.modal-voucher__details {
  position: relative;
  width: 100%;
  padding: 12px 25px 13px 25px;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__details {
    padding: 12px 16px 13px 16px;
  }
}
.modal-voucher__details.special {
  flex-direction: column;
  align-items: flex-start;
}
.modal-voucher__details::before, .modal-voucher__details::after {
  position: absolute;
  content: "";
  top: 50%;
  z-index: 20;
  height: 26px;
  aspect-ratio: 1/1;
  background-color: #f3fbff;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__details::before, .modal-voucher__details::after {
    height: 20px;
  }
}
.modal-voucher__details::before {
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.modal-voucher__details::after {
  right: 0;
  transform: translate(0, -50%);
  clip-path: circle(50% at 100% 50%);
}
.modal-voucher__cover {
  margin-top: 5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__cover {
    flex-direction: column;
    align-items: flex-start;
  }
}
.modal-voucher__code {
  position: relative;
  --sizeText: 50px;
  width: var(--sizeText);
  max-width: var(--sizeText);
  overflow: hidden;
  text-transform: uppercase;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px 0 0 10px;
  border-right: 1px dashed #fff;
  background-color: #0680cd;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__code {
    --sizeText: 100%;
    border-right: 0;
    border-radius: 0;
    border-bottom: 1px dashed #fff;
  }
}
.modal-voucher__code.special {
  background-color: rgba(240, 151, 0, 0.6);
}
.modal-voucher__code.disabled {
  background-color: #a8a6ac;
  pointer-events: none;
}
.modal-voucher__code span {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding-top: 14px;
  line-height: 20px;
  color: #f3fbff;
  text-wrap: nowrap;
  transform: rotate(-90deg);
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__code span {
    font-size: 13px;
    padding-top: 12px;
    padding-bottom: 10px;
    transform: rotate(0deg);
  }
}
.modal-voucher__list {
  max-height: 538px;
  overflow-y: auto;
}
.modal-voucher__time {
  padding-right: 20px;
  color: #71848e;
}
.modal-voucher__content {
  position: relative;
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  width: 100%;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
  background: linear-gradient(0deg, #0680cd 10%, #95c8e8 98%);
  padding: 22px 20px 22px 17px;
  border-radius: 0 10px 10px 0;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__content {
    font-size: 16px;
    padding: 14px 14px 15px 12px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0;
  }
}
.modal-voucher__content span {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__content span {
    font-size: 25px;
  }
}
.modal-voucher__content.special {
  background: linear-gradient(to right, rgba(224, 135, 81, 0.5) 20.43%, rgba(204, 44, 56, 0.5) 100%);
}
.modal-voucher__content.disabled {
  background: linear-gradient(to right, #c8c6cc 19%, #bab9bf 100%);
  color: #3f3f3f;
}
.modal-voucher__content.disabled span {
  color: #fff;
}
.modal-voucher__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #414141;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__text {
    font-size: 15px;
  }
}
.modal-voucher__text + .modal-voucher__text {
  margin-top: 8px;
}
.modal-voucher__text.special {
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.5;
  color: #71848e;
}
.modal-voucher__btn {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  padding: 7px 15px;
  margin-top: auto;
  color: #ffa200;
  border: 1px solid #ffa200;
  border-radius: 30px;
  transition: all 0.25s ease;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__btn {
    margin-top: 4px;
    margin-left: auto;
    display: flex;
    font-size: 14px;
    padding: 6px 15px;
  }
}
.modal-voucher__btn:hover {
  color: #fff;
  background-color: #ffa200;
}
.modal-voucher__title {
  font-size: 16px;
  font-weight: 500;
}
.modal-voucher__activity {
  margin-top: 28px;
  gap: 12px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.modal-voucher__out, .modal-voucher__select {
  font-size: 16px;
  font-weight: 600;
  padding: 13px 20px;
  min-width: 170px;
  text-align: center;
  border-radius: 10px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__out, .modal-voucher__select {
    font-size: 15px;
    padding: 10px 22px;
    min-width: auto;
  }
}
.modal-voucher__select {
  color: #fff;
  background-color: #0680cd;
}
.modal-voucher__select.special {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 30px auto 0;
}
.modal-voucher__select:hover {
  color: #fff;
}
.modal-voucher__out {
  color: #ffa200;
  border: 1px solid #ffa200;
  background-color: #fff;
}
.modal-voucher__out:hover {
  color: #ffa200;
}
.modal-voucher__full {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 20px;
  font-weight: 500;
  width: 100%;
  border-radius: 10px;
  max-height: max-content;
  padding: 29px 20px 27px 17px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__full {
    font-size: 16px;
    padding: 30px 20px 25px 17px;
  }
}
.modal-voucher__full span {
  font-size: 50px;
  font-weight: 900;
  margin-top: 8px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__full span {
    font-size: 30px;
  }
}
.modal-voucher__full::after, .modal-voucher__full::before {
  height: 34px;
}
.modal-voucher__group {
  padding-top: 20px;
}
.modal-voucher__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 46.1875em) {
  .modal-voucher__bg {
    width: 90%;
    background-size: contain;
  }
}
.modal-voucher__label {
  font-size: 16px;
  font-weight: 500;
  color: #414141;
}
.modal-qr .modal-header {
  padding-bottom: 14px;
  flex-direction: column;
}
.modal-qr__cover {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}
.modal-qr__bg {
  margin-bottom: 22px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__bg {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__bg img {
    display: none;
  }
}
.modal-qr__info {
  width: 100%;
  padding-left: 20px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__info {
    padding-left: 0;
    width: 100%;
    margin-top: 8px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
.modal-qr__group {
  font-size: 16px;
  font-weight: 500;
  color: #414141 !important;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__group {
    justify-content: center;
  }
}
.modal-qr__name {
  font-size: 16px;
  font-weight: 500;
  margin-top: 6px;
  color: #414141;
}
.modal-qr__brand {
  margin-bottom: 18px;
}
.modal-qr__brand img {
  max-height: 36px;
}
.modal-qr__desc {
  width: 90%;
  margin-top: 6px;
  font-size: 16px;
  text-align: center;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__desc {
    width: 100%;
  }
}
.modal-qr__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__cover {
    flex-direction: column;
  }
}
.modal-qr__copy {
  margin-left: 8px;
}
.modal-qr__content {
  margin-top: 12px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.modal-qr__text {
  color: #71848e;
  font-size: 14px;
  margin-right: 6px;
  width: 100%;
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__text {
    text-align: center;
  }
}
.modal-qr__total {
  margin-top: 4px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.modal-qr__sub {
  font-weight: 500;
  font-size: 14px;
  color: #71848e;
}
.modal-qr__img {
  min-width: 180px;
  width: 180px;
  position: relative;
  height: 180px;
  overflow: hidden;
}
.modal-qr__img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 46.1875em) {
  .modal-qr__img {
    margin: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.modal-qr__money {
  margin-left: 6px;
  font-size: 16px;
  color: #ffa200;
  font-weight: 700;
}
.modal-address .modal-content {
  background-color: #fff;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__list {
    margin-top: 14px;
  }
}
.modal-address__item {
  padding: 16px 0px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-top: 1px dashed #cecece;
}
.modal-address__item:first-child {
  padding-top: 0;
  border-top: 0;
}
.modal-address__method {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 10px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__method {
    grid-template-columns: repeat(1, 1fr);
  }
}
.modal-address__method.special {
  grid-template-columns: repeat(1, 1fr);
}
.modal-address__cover {
  padding-right: 60px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__cover {
    padding-right: 24px;
  }
}
.modal-address__option {
  margin-top: 3px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.modal-address__heading {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  color: #414141;
}
.modal-address__name {
  font-size: 18px;
  font-weight: 500;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__name {
    font-size: 16px;
  }
}
.modal-address__phone {
  position: relative;
  padding-left: 26px;
  font-size: 18px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__phone {
    font-size: 17px;
  }
}
.modal-address__phone::after {
  position: absolute;
  content: "";
  left: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #71848e;
  transform: translateY(-50%);
}
.modal-address__desc {
  margin-top: 2px;
  font-size: 16px;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__desc {
    font-size: 15px;
  }
}
.modal-address__line {
  transform: scale(1.1);
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__line {
    transform: scale(1);
  }
}
.modal-address__default {
  display: inline-block;
  font-size: 16px;
  color: #56aa02;
  margin-top: 6px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__default {
    font-size: 15px;
  }
}
.modal-address__enter {
  padding: 13px 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #cfcece;
}
.modal-address__input {
  width: 100%;
  border: 0;
  font-size: 16px;
  padding-left: 10px;
}
.modal-address__input::placeholder {
  color: #cecece;
}
.modal-address__content, .modal-address__body {
  padding: 0 !important;
}
.modal-address__map {
  padding: 10px 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background-color: #f3fbff;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__map {
    padding: 10px 16px;
  }
}
.modal-address__title {
  font-size: 16px;
  font-weight: 500;
  color: #0680cd;
}
.modal-address__text {
  font-size: 16px;
  color: #71848e;
  padding-left: 12px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__text {
    font-size: 15px;
    line-height: 1.5;
  }
}
.modal-address__form {
  padding: 19px 30px 40px;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__form {
    padding: 19px 16px 40px;
  }
}
.modal-address__group + .modal-address__group {
  margin-top: 24px;
}
.modal-address__select {
  padding: 0;
}
.modal-address__select .select2-container {
  width: 100% !important;
}
.modal-address__select .select2-dropdown {
  color: #414141;
}
.modal-address__select .select2-container--default .select2-selection--single {
  border: 0;
  border-radius: 8px;
}
.modal-address__check {
  margin-top: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.modal-address__tick {
  margin-right: 12px !important;
}
.modal-address__sub {
  font-size: 16px;
  color: #414141;
}
.modal-address__btn {
  margin-top: 44px;
}
.modal-address__add {
  font-size: 18px;
  font-weight: 500;
  color: #0680cd;
}
@media only screen and (max-width: 46.1875em) {
  .modal-address__add {
    font-size: 16px;
  }
}
.modal-address__add svg {
  min-width: 30px;
  margin-right: 4px;
}
.modal-address__activity {
  margin-top: 26px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.modal-address__select {
  color: #fff;
  font-weight: 600;
  border-color: #0680cd;
  background-color: #0680cd;
}
.modal-address__close {
  font-size: 16px;
  font-weight: 600;
  color: #ffa200;
  margin-left: 10px;
}
.modal-withdraw__details {
  margin-top: 20px;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
.modal-withdraw__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.modal-withdraw__cover + .modal-withdraw__cover {
  margin-top: 6px;
}
.modal-withdraw__branch {
  font-size: 16px;
  color: #414141;
}
.modal-withdraw__number {
  font-size: 18px;
  color: #71848e;
}
.modal-withdraw__text {
  font-size: 16px;
  font-weight: 500;
  color: #71848e;
}
.modal-withdraw__bank {
  text-align: right;
}
.modal-withdraw__money {
  font-size: 18px;
  font-weight: 700;
  color: #ffa200;
}

.cart {
  padding-bottom: 0;
}
.cart-empty {
  min-height: 50vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.cart-empty__text {
  font-size: 16px;
  margin-top: 20px;
  color: #71848e;
}
.cart-product {
  min-height: 77vh;
  padding-bottom: 170px;
}
.cart-product__wrapper {
  overflow: hidden;
  border-radius: 10px;
}
.cart-product__item {
  padding: 18px 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__item {
    flex-direction: column;
  }
}
.cart-product__item + .cart-product__item {
  margin-top: 16px;
}
.cart-product__details {
  width: 41%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 63.9375em) {
  .cart-product__details {
    width: 60%;
  }
  .cart-product__details .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__details {
    width: 100%;
  }
}
.cart-product__check {
  --sizeCheck: 22px;
  margin-right: 18px;
  min-width: var(--sizeCheck);
  width: var(--sizeCheck);
  height: var(--sizeCheck);
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__check {
    --sizeCheck: 18px;
    margin-right: 14px;
  }
}
.cart-product__img {
  --sizeImg: 120px;
  min-width: var(--sizeImg);
  width: var(--sizeImg);
  position: relative;
  height: var(--sizeImg);
  overflow: hidden;
}
.cart-product__img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__img {
    --sizeImg: 80px;
  }
}
.cart-product__activity {
  padding-left: 30px;
  width: 55%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 63.9375em) {
  .cart-product__activity {
    padding-left: 14px;
    width: 40%;
    flex-direction: column;
  }
  .cart-product__activity .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__activity {
    width: 100%;
    flex-direction: row;
    padding-left: 0px;
    margin-top: 12px;
  }
}
.cart-product__activity.special {
  justify-content: flex-end;
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__activity.special {
    margin-top: 16px;
  }
}
.cart-product__group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: row;
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__group {
    align-items: flex-start;
    flex-direction: column;
  }
}
.cart-product__group .product-item__old {
  margin-left: 14px;
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__group .product-item__old {
    margin-left: 0px;
  }
}
.cart-product__name {
  margin-left: 18px;
  font-size: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__name {
    margin-left: 14px;
    font-size: 16px;
  }
}
.cart-product__action {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .cart-product__action {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__action {
    flex-direction: row-reverse;
  }
}
.cart-product__total {
  padding-right: 40px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media only screen and (max-width: 63.9375em) {
  .cart-product__total {
    width: 100%;
    flex-direction: row;
    padding-right: 10px;
    margin-bottom: 8px;
  }
  .cart-product__total .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__total {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 0;
  }
}
.cart-product__total .product-item__price {
  font-size: 25px;
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__total .product-item__price {
    font-size: 20px;
  }
}
.cart-product__cover, .cart-product__remove {
  margin-left: 90px;
}
@media only screen and (max-width: 63.9375em) {
  .cart-product__cover, .cart-product__remove {
    margin-left: 24px;
  }
  .cart-product__cover .hide-on-bothTM, .cart-product__remove .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__cover, .cart-product__remove {
    margin-left: 0;
  }
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__remove {
    margin-right: 20px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__remove svg {
    width: 20px;
    height: 20px;
  }
}
.cart-product__float {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  z-index: 99;
  transform: translateX(-50%);
}
.cart-product__custom {
  min-height: 150px;
  border-radius: 0;
  box-shadow: 0 -6px 6px rgba(0, 0, 0, 0.05);
}
@media only screen and (max-width: 46.1875em) {
  .cart-product__custom {
    min-height: auto;
  }
}
.cart-product__label {
  font-weight: 500;
  font-size: 16px;
  color: #71848e;
}
.cart-product__text {
  font-size: 16px;
  color: #71848e;
  margin-bottom: 2px;
}
@media only screen and (max-width: 63.9375em) {
  .cart-product__text {
    margin-bottom: 0px;
    margin-right: 12px;
  }
  .cart-product__text .hide-on-bothTM {
    display: none !important;
  }
}
.cart-product__buy {
  padding-left: 40px;
  width: 48%;
}
@media only screen and (max-width: 63.9375em) {
  .cart-product__buy {
    width: 100%;
    padding-left: 6px;
  }
  .cart-product__buy .hide-on-bothTM {
    display: none !important;
  }
}

.calender {
  padding: 18px 0 60px;
}
.calender-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media only screen and (max-width: 46.1875em) {
  .calender-header {
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .calender-header.special {
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .calender-header.special .calender-header__right {
    width: 100%;
    margin-bottom: 20px;
  }
}
.calender-header__end {
  font-size: 16px;
  font-weight: 600;
  color: #ffa200;
  font-style: italic;
  text-align: right;
  min-width: fit-content;
}
@media only screen and (max-width: 63.9375em) {
  .calender-header__end {
    font-size: 15px;
  }
  .calender-header__end .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__end {
    width: 100%;
    text-align: right;
    margin-bottom: 6px;
  }
}
.calender-header__select {
  font-size: 16px;
  font-weight: 700;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.calender-header__select svg {
  margin-left: 12px;
}
.calender-header__popup {
  display: none;
  position: absolute;
  margin-top: 10px;
  padding: 14px 20px;
  z-index: 99;
  min-width: 383px;
  border-radius: 10px;
  background: #fff;
  animation: popupFade 0.2s;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.0666666667);
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__popup {
    min-width: 95%;
    left: 2% !important;
    transition: all 0.3s;
  }
}
.calender-header__popup .fc-toolbar-title {
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 99;
  font-size: 15px;
  font-weight: 700;
  text-transform: capitalize;
  transform: translateX(-50%);
}
.calender-header__popup .fc .fc-toolbar.fc-header-toolbar {
  min-height: 30px;
}
.calender-header__popup .fc-button-group {
  width: 100%;
}
.calender-header__popup .fc-toolbar-chunk {
  width: 100%;
}
.calender-header__popup .fc .fc-button-group {
  position: absolute;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  width: 86%;
  align-items: center;
  justify-content: space-between;
}
.calender-header__popup .fc .fc-button-group > .fc-button {
  flex: none;
}
.calender-header__popup .fc .fc-button .fc-icon {
  font-size: 17px;
}
.calender-header__popup .fc .fc-button-group > .fc-button {
  width: 28px;
  height: 28px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.calender-header__popup .fc-theme-standard .fc-scrollgrid {
  border: 0;
}
.calender-header__popup .fc .fc-daygrid-day-frame {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calender-header__popup .fc-theme-standard td,
.calender-header__popup .fc-theme-standard th {
  border: 0;
}
.calender-header__popup .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
  display: none;
}
.calender-header__popup .fc .fc-daygrid-day.fc-day-today {
  position: relative;
  background-color: transparent;
}
.calender-header__popup .fc .fc-daygrid-day.fc-day-today::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #0680cd;
}
.calender-header__popup .fc-day-active-highlight {
  position: relative;
  box-shadow: none !important;
  background-color: transparent !important;
}
.calender-header__popup .fc-day-active-highlight::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #0680cd;
  background-color: #0680cd;
}
.calender-header__popup .fc-day-active-highlight .fc-daygrid-day-number {
  color: #fff !important;
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__popup .fc-scroller table {
    width: 100% !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__popup .fc .fc-daygrid-body {
    width: 100% !important;
  }
}
.calender-header__day {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  width: 377px;
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__day {
    width: 100%;
  }
}
.calender-header__time {
  margin-top: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__date {
    width: 100%;
  }
}
.calender-header__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  width: 42px;
  padding: 13px 0;
  border-radius: 21px;
  background-color: #fff;
}
@media only screen and (max-width: 395px) {
  .calender-header__item {
    width: 36px;
  }
}
.calender-header__item.selected {
  background-color: #ffa200;
}
.calender-header__item.selected .calender-header__rank, .calender-header__item.selected .calender-header__number {
  color: #fff;
}
.calender-header__item.not-month .calender-header__rank, .calender-header__item.not-month .calender-header__number {
  color: #cecece;
}
.calender-header__number {
  font-size: 16px;
  font-weight: 700;
  color: #0680cd;
}
.calender-header__nav {
  margin-top: 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__nav {
    justify-content: space-between;
  }
}
.calender-header__rank {
  font-size: 12px;
  color: #71848e;
}
.calender-header__link {
  position: relative;
  font-size: 16px;
  color: #71848e;
}
.calender-header__link::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 50%;
  height: 4px;
  width: 30px;
  margin-top: 8px;
  border-radius: 2px;
  background-color: #0680cd;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.calender-header__link.active {
  color: #0680cd;
  font-weight: 500;
}
.calender-header__link.active::after {
  opacity: 1;
  visibility: visible;
}
.calender-header__link + .calender-header__link {
  margin-left: 50px;
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__link + .calender-header__link {
    margin-left: 0;
  }
}
.calender-header__right {
  margin-bottom: 40px;
}
@media only screen and (max-width: 46.1875em) {
  .calender-header__right {
    width: 100%;
  }
}
.calender-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 18px;
}
@media only screen and (max-width: 46.1875em) {
  .calender-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
.calender-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(27, 39, 51, 0.04);
}
.calender-item.item-teacher {
  padding: 16px 20px 16px;
}
.calender-item.item-teacher .calender-item__participants {
  margin-bottom: 0;
}
.calender-item.item-teacher .calender-item__top {
  padding-bottom: 7px;
  margin-bottom: 11px;
}
.calender-item.item-teacher .calender-item__type {
  margin-top: 0;
}
.calender-item__id {
  font-size: 16px;
  font-weight: 500;
  color: #71848e;
}
.calender-item__top {
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px dashed #f0f0f0;
}
.calender-item__title {
  color: #2a485e;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 6px;
}
@media only screen and (max-width: 63.9375em) {
  .calender-item__title {
    font-size: 16px;
  }
  .calender-item__title .hide-on-bothTM {
    display: none !important;
  }
}
.calender-item__meta {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #74829c;
  gap: 8px;
  margin: 4px 0 0px;
}
@media only screen and (max-width: 46.1875em) {
  .calender-item__meta {
    margin: 4px 0 10px;
  }
}
.calender-item__meta + .calender-item__meta {
  margin-top: 10px;
}
.calender-item__teacher {
  display: flex;
  align-items: center;
  gap: 5px;
}
.calender-item__img {
  width: 18px;
}
.calender-item__avatar {
  width: 25px;
  height: 25px;
  object-fit: cover;
  margin-right: -8px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.calender-item__avatar:last-child {
  margin-right: 0;
}
.calender-item__text {
  color: #2a485e;
}
.calender-item__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calender-item__icon {
  color: #bac2d9;
}
.calender-item__divider {
  border-top: 1px dashed #eaeaea;
  margin: 10px 0;
}
.calender-item__participants {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #74829c;
  margin-bottom: 16px;
}
.calender-item__type {
  margin-bottom: 0;
}
.calender-item__avatars {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.calender-item__more {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #71848e;
  border-radius: 50%;
  background-color: #f0f0f0;
}
.calender-item__sub, .calender-item__number, .calender-item__text {
  font-size: 16px;
}
@media only screen and (max-width: 63.9375em) {
  .calender-item__sub, .calender-item__number, .calender-item__text {
    font-size: 15px;
  }
  .calender-item__sub .hide-on-bothTM, .calender-item__number .hide-on-bothTM, .calender-item__text .hide-on-bothTM {
    display: none !important;
  }
}
.calender-item__header, .calender-item__cover, .calender-item__divider, .calender-item__participants {
  width: 100%;
}
.calender-item__sub {
  font-weight: 500;
  color: #414141;
}
.calender-item__time {
  margin-bottom: 10px;
}
.calender-item__counter {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.calender-item__group {
  width: 29px;
  height: 29px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background-color: #95c8e8;
}
.calender-item__dot {
  margin: 0 4px;
  font-weight: 800;
}
.calender-item__number {
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
}
.calender-item__joined {
  font-size: 16px;
  color: #71848e;
}
@media only screen and (max-width: 63.9375em) {
  .calender-item__joined {
    font-size: 15px;
  }
  .calender-item__joined .hide-on-bothTM {
    display: none !important;
  }
}
.calender-item__button {
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #fff;
  padding: 14px 0 13px;
  margin-top: auto;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background: #0680cd;
}
@media only screen and (max-width: 63.9375em) {
  .calender-item__button {
    font-size: 15px;
    padding: 11px 0 10px;
  }
  .calender-item__button .hide-on-bothTM {
    display: none !important;
  }
}
.calender-item__button.full-slot {
  user-select: none;
  pointer-events: none;
  opacity: 0.1;
}
.calender-item__button:hover {
  color: #fff;
}
.calender-item__link {
  width: 100%;
}
.calender-progress {
  margin-top: 20px;
  font-size: 16px;
  color: #71848e;
}
.calender-progress.special {
  text-align: right;
}
.calender-empty {
  padding: 60px 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media only screen and (max-width: 46.1875em) {
  .calender-empty__img {
    width: 60%;
  }
}
.calender-empty__text {
  text-align: center;
  font-size: 18px;
  margin-top: 20px;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .calender-empty__text {
    font-size: 16px;
  }
}
.calender-details__title {
  font-size: 35px;
  font-weight: 800;
}
@media only screen and (max-width: 46.1875em) {
  .calender-details__title {
    font-size: 24px;
    line-height: 1.4;
  }
}
.calender-details__wrapper {
  padding: 35px;
  border-radius: 10px;
  background-color: #fff;
}
@media only screen and (max-width: 46.1875em) {
  .calender-details__wrapper {
    padding: 22px;
  }
}
.calender-details__meta {
  margin-bottom: 10px;
}
.calender-details__label {
  font-size: 16px;
  font-weight: 500;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  color: #2a485e;
}
.calender-details__label img {
  margin-right: 8px;
}
.calender-details__cover {
  margin-bottom: 13px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calender-details__participants {
  margin-bottom: 0;
}
.calender-details__text {
  color: #71848e;
}
.calender-details__info {
  padding-top: 10px;
}
.calender-details__group + .calender-details__group {
  margin-top: 13px;
}
.calender-details__content {
  font-size: 16px;
  margin-top: 10px;
}
.calender-details__content * {
  margin: revert;
  font-size: 16px;
  padding: revert;
  list-style-type: revert;
  display: revert;
  color: revert;
  text-decoration: revert;
  line-height: 1.7;
}
.calender-details__content img {
  max-width: 100%;
}
.calender-details__btn {
  font-weight: 500;
  border-radius: 8px;
  width: fit-content;
  padding: 10px 16px 9px;
}
.calender-details__btn.btn-outline {
  color: #ffa200;
  background-color: #fff;
  border: 1px solid #ffa200;
}
.calender-details__copy {
  flex-direction: row;
}
.calender-details__qr {
  width: auto;
}
.calender-details__sub {
  min-width: fit-content;
  width: auto;
  color: #71848e;
}
@keyframes popupFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.account {
  padding: 36px 0px 60px;
}
.account-wrapper {
  margin-top: 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
@media only screen and (max-width: 46.1875em) {
  .account-wrapper {
    margin-top: 24px;
  }
}
.account-heading {
  font-size: 50px;
  font-family: "Calistoga", serif;
  color: #2a485e;
  line-height: 1.2;
}
@media only screen and (max-width: 63.9375em) {
  .account-heading {
    font-size: 40px;
  }
  .account-heading .hide-on-bothTM {
    display: none !important;
  }
}
.account-sidebar {
  width: 32%;
}
@media only screen and (max-width: 63.9375em) {
  .account-sidebar {
    display: none;
  }
  .account-sidebar .hide-on-bothTM {
    display: none !important;
  }
}
.account-sidebar__avatar {
  --sizeAvatar: 80px;
  width: var(--sizeAvatar);
  height: var(--sizeAvatar);
  min-width: var(--sizeAvatar);
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #fff;
}
.account-sidebar__member {
  padding: 18px 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
}
.account-sidebar__level {
  width: 100%;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 0;
  border-radius: 33px;
  border: 1px solid #95c8e8;
  background: #fff;
}
.account-sidebar__name {
  font-size: 22px;
  font-weight: 800;
  margin-top: 14px;
  line-height: 1.3;
}
.account-sidebar__img {
  --sizeBg: 30px;
  width: var(--sizeBg);
  min-width: var(--sizeBg);
}
.account-sidebar__score {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.account-sidebar__score::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 1.2px;
  height: 59%;
  background-color: #95c8e8;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
}
.account-sidebar__score + .account-sidebar__score::after {
  opacity: 1;
  visibility: visible;
}
.account-sidebar__sub {
  font-size: 14px;
  font-weight: 500;
  color: #71848e;
}
.account-sidebar__info {
  width: 100%;
}
.account-sidebar__point {
  font-size: 16px;
  line-height: 1.2;
}
.account-sidebar__list {
  padding: 5px 20px;
  margin-top: 16px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.account-sidebar__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px dashed #cfcece;
}
.account-sidebar__item:last-child {
  border-bottom: 0;
}
.account-sidebar__item.active .account-sidebar__icon {
  background-color: #95c8e8;
}
.account-sidebar__item.active .account-sidebar__icon svg path {
  stroke: #fff;
}
.account-sidebar__item.active .account-sidebar__text {
  font-weight: 500;
  color: #2a485e;
}
.account-sidebar__icon {
  --sizeIcon: 40px;
  width: var(--sizeIcon);
  height: var(--sizeIcon);
  border-radius: 50%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f3fbff;
}
.account-sidebar__text {
  font-size: 16px;
  color: #71848e;
}
.account-order {
  width: 68%;
  padding: 27px 0px 50px;
  background: #fff;
  border-radius: 10px;
}
@media only screen and (max-width: 63.9375em) {
  .account-order {
    width: 100%;
  }
  .account-order .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-order {
    padding: 16px 14px 40px;
  }
}
.account-order__box {
  position: relative;
  padding-left: 25px;
  padding-right: 25px;
}
@media only screen and (max-width: 46.1875em) {
  .account-order__box {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.account-order__top {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media only screen and (max-width: 46.1875em) {
  .account-order__top {
    flex-direction: column;
  }
}
.account-order__title {
  font-weight: bold;
  font-size: 22px;
  color: #2a485e;
}
.account-order__nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  gap: 15px;
}
@media only screen and (max-width: 46.1875em) {
  .account-order__nav {
    margin-top: 10px;
  }
}
.account-order__button {
  font-size: 16px;
  line-height: 1.2;
  color: #71848e;
  padding: 10px 25px 9px;
  border-radius: 20px;
  border: 1px solid #cecece;
  background-color: #f0f0f0;
}
@media only screen and (max-width: 46.1875em) {
  .account-order__button {
    padding: 9px 20px 8px;
  }
}
.account-order__button:hover {
  color: #71848e;
  border-color: #ffa200;
}
.account-order__button.active {
  color: #fff;
  font-weight: 700;
  border-color: #ffa200;
  background-color: #ffa200;
}
.account-order__list {
  margin-top: 29px;
}
@media only screen and (max-width: 46.1875em) {
  .account-order__list {
    margin-top: 20px;
  }
}
.account-order__content {
  margin-top: 15px;
}
.account-order__item {
  padding: 15px 16px;
  border-radius: 8px;
  background-color: #f8f8f8;
}
@media only screen and (max-width: 46.1875em) {
  .account-order__item {
    padding: 15px 14px;
  }
}
.account-order__item + .account-order__item {
  margin-top: 15px;
}
.account-order__header {
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px dashed #d7d7d7;
}
.account-order__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account-order__cover + .account-order__cover {
  margin-top: 10px;
}
.account-order__code {
  font-size: 16px;
  color: #414141;
}
.account-order__status {
  font-size: 16px;
  font-weight: 500;
  color: #71848e;
}
.account-order__status::after {
  display: none;
}
.account-order__text {
  color: #71848e;
}
.account-order__amount {
  font-size: 14px;
  color: #3a1b00;
}
.account-order__amount span {
  font-size: 16px;
  font-weight: 500;
  color: #ffa200;
}
.account-order__time {
  font-size: 16px;
  color: #3a1b00;
}
.account-order__cancel {
  font-size: 16px;
  color: #eb2700;
  padding: 6px 12px 5px;
  border-radius: 8px;
  border: 1.5px solid #eb2700;
}
@media only screen and (max-width: 46.1875em) {
  .account-order__cancel {
    font-size: 15px;
  }
}
.account-info {
  background-color: transparent;
  padding: 0px 0px 50px;
}
.account-info__text {
  font-size: 16px;
  color: #71848e;
}
.account-info__group {
  padding: 20px 0 26px;
  position: relative;
}
.account-info__group.special {
  padding: 20px 0 20px;
  border-bottom: 1px dashed #cfcece;
}
.account-info__money {
  font-size: 18px;
}
.account-info__price {
  width: 25%;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 46.1875em) {
  .account-info__price {
    width: 60%;
    flex-direction: row;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-info__price .payment-package__price {
    margin-top: 0;
  }
}
.account-info__img {
  --size: 60px;
}
.account-info__details {
  font-size: 16px;
  color: #414141;
}
@media only screen and (max-width: 46.1875em) {
  .account-info__details {
    width: 100%;
    margin-top: 4px;
    padding-left: 36px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-info__method {
    flex-direction: column;
  }
}
.account-info__method + .account-info__method {
  margin-top: 15px;
}
@media only screen and (max-width: 46.1875em) {
  .account-info__method .payment-voucher__btn {
    width: 100%;
    margin-top: 4px;
    padding-left: 36px;
  }
}
.account-info__bg {
  border-radius: 10px;
  background-color: #fff;
}
.account-info__bg.special {
  padding-top: 27px;
}
.account-info__bg + .account-info__bg {
  margin-top: 15px;
}
.account-info__total {
  width: 100%;
  margin-top: 14px;
}
.account-info__btn {
  margin-top: 24px;
  margin-left: auto;
  width: fit-content;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 89px;
  color: #ffa200;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ffa200;
}
.account-info__btn:hover {
  color: #ffa200;
}
.account-menu {
  padding: 9px 14px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #0680cd;
  display: none;
}
@media only screen and (max-width: 63.9375em) {
  .account-menu {
    display: flex;
  }
  .account-menu .hide-on-bothTM {
    display: none !important;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-menu {
    font-size: 15px;
  }
}
.account-menu img {
  margin-right: 10px;
  width: 25px;
}
@media only screen and (max-width: 46.1875em) {
  .account-menu img {
    width: 20px;
  }
}
.account-profile__img {
  position: relative;
  --sizeImg: 165px;
  min-width: var(--sizeImg);
  width: var(--sizeImg);
  height: var(--sizeImg);
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}
.account-profile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-profile__file {
  display: none;
}
.account-profile__group {
  padding: 12px 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #cfcece;
  transition: all 0.3s;
}
.account-profile__group svg {
  margin-right: 12px;
  min-width: 20px;
}
.account-profile__group .select2-container {
  width: calc(100% - 32px) !important;
}
.account-profile__group .select2-container .select2-selection--single {
  padding: 0;
  border: 0;
}
.account-profile__group .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: -8px;
}
.account-profile__group.disable {
  background-color: rgba(113, 132, 142, 0.1);
  user-select: none;
  pointer-events: none;
}
.account-profile__group.disable input {
  background-color: transparent;
}
.account-profile__group.focus {
  border-color: #95c8e8;
}
.account-profile__group.focus svg path {
  fill: #414141;
}
.account-profile__group + .account-profile__group {
  margin-top: 10px;
}
.account-profile__avatar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.account-profile__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(42, 72, 94, 0.5);
}
.account-profile__cover {
  margin-top: 26px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 46.1875em) {
  .account-profile__cover {
    flex-direction: column;
    align-items: center;
  }
}
.account-profile__text {
  font-size: 16px;
  color: #71848e;
  margin-top: 15px;
}
.account-profile__input {
  border: 0;
  width: 100%;
}
.account-profile__input::placeholder {
  color: #cecece;
}
.account-profile__form {
  width: 100%;
  padding-left: 33px;
}
@media only screen and (max-width: 46.1875em) {
  .account-profile__form {
    margin-top: 16px;
    padding-left: 0px;
  }
}
.account-profile__label {
  font-size: 16px;
  font-weight: 700;
  color: #2a485e;
  margin-top: 18px;
  margin-bottom: 12px;
}
.account-profile__activity {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 10px;
}
.account-profile__btn {
  margin-top: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  padding: 14px 20px;
  border: 1px solid transparent;
  background-color: #0680cd;
}
.account-profile__remove {
  color: #eb2700;
  background-color: #fff;
  border-color: #eb2700;
}
.account-profile__remove:hover {
  color: #eb2700;
}
.account-point__header {
  margin-top: 10px;
  padding: 20px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__header {
    padding: 14px;
  }
}
.account-point__my {
  gap: 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.account-point__img {
  --sizeImg: 70px;
  width: var(--sizeImg);
  min-width: var(--sizeImg);
  height: var(--sizeImg);
  background-color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #0680cd;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__img {
    --sizeImg: 60px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-point__img img {
    width: 36px;
  }
}
.account-point__sub {
  font-size: 16px;
  font-weight: 500;
  color: #2a485e;
}
.account-point__number {
  font-size: 25px;
  font-weight: 600;
  color: #0680cd;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__number {
    font-size: 20px;
  }
}
.account-point__number span {
  font-size: 30px;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__number span {
    font-size: 25px;
  }
}
.account-point__nav {
  margin-top: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.account-point__title {
  font-size: 16px;
  font-weight: 500;
  color: #0680cd;
}
.account-point__icon {
  --sizeIcon: 50px;
  background-color: #edfae0;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__icon {
    --sizeIcon: 45px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-point__icon svg {
    width: 22px;
    height: 22px;
  }
}
.account-point__item {
  margin-top: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account-point__item.icon-used .account-point__quantity {
  color: #ffa200;
}
.account-point__item.icon-used .account-point__icon {
  background-color: #fff0d5;
}
.account-point__item.icon-used .account-point__icon svg path {
  fill: #ffa200;
}
.account-point__status {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.account-point__option {
  position: relative;
  font-size: 16px;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__option {
    font-size: 15px;
  }
}
.account-point__option::after {
  position: absolute;
  content: "";
  left: 50%;
  top: calc(100% + 6px);
  height: 4px;
  width: 35px;
  background-color: #2a485e;
  border-radius: 5px 5px 0px 0;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.account-point__option.active {
  font-weight: 500;
  color: #2a485e;
}
.account-point__option.active::after {
  opacity: 1;
  visibility: visible;
}
.account-point__option + .account-point__option {
  margin-left: 60px;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__option + .account-point__option {
    margin-left: 35px;
  }
}
.account-point__details {
  gap: 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-right: 14px;
}
.account-point__quantity {
  font-size: 18px;
  font-weight: 700;
  color: #56aa02;
}
.account-point__name {
  font-size: 16px;
  color: #414141;
}
.account-point__bank {
  font-size: 16px;
  font-weight: 500;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}
@media only screen and (max-width: 46.1875em) {
  .account-point__bank {
    font-size: 15px;
  }
}
.account-point__bank svg {
  margin-bottom: 3px;
}
@media only screen and (max-width: 46.1875em) {
  .account-withdraw {
    padding: 16px 0 40px;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-withdraw__confirm {
    padding: 16px 16px 40px;
  }
}
.account-withdraw__map {
  margin-top: 10px;
}
.account-withdraw__label {
  margin-bottom: 4px;
  color: #0680cd;
}
.account-withdraw__desc {
  color: #71848e;
}
.account-withdraw__group {
  margin: 6px 0 12px;
}
.account-withdraw__img.img-small img {
  max-height: 160px;
}
.account-withdraw__form {
  width: 60%;
}
@media only screen and (min-width: 46.25em) and (max-width: 63.9375em) {
  .account-withdraw__form {
    width: 80%;
  }
}
@media only screen and (max-width: 46.1875em) {
  .account-withdraw__form {
    width: 100%;
  }
}
.account-withdraw__text {
  text-align: center;
  width: 80%;
}
@media only screen and (max-width: 46.1875em) {
  .account-withdraw__text {
    font-size: 16px;
  }
}
.account-withdraw__empty {
  min-height: auto;
}
@media only screen and (max-width: 46.1875em) {
  .account-withdraw__empty {
    margin-top: 20px;
  }
}
.account-withdraw__password {
  width: 60%;
  margin: 25px auto 0;
}
@media only screen and (max-width: 46.1875em) {
  .account-withdraw__password {
    width: 100%;
  }
}
.account-withdraw__remove {
  background-color: #eb2700;
}
.account-share__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account-share__text {
  font-size: 16px;
  font-weight: 500;
  color: #414141;
}
.account-share__note {
  margin-top: 16px;
  padding: 15px;
  border-radius: 5px;
  background-color: #fdf4f2;
}
.account-share__group {
  margin-top: 12px;
}
.account-share__policy {
  margin-top: 4px;
  text-align: left;
  width: 100%;
}
.account-share__warning {
  font-weight: 500;
  color: #eb2700;
}
.account-share__cover {
  margin-top: 30px;
}
.account-share__desc {
  margin-top: 6px;
  color: #71848e;
}
.account-share__code {
  font-size: 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  color: #ffa200;
}
.account-share__copy {
  display: inline-block;
  margin-left: 12px;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.account-share__copy:hover {
  opacity: 1;
}
.account-share__copy:hover svg {
  opacity: 0.9;
}
.account-share__copy:hover .account-share__tooltip {
  opacity: 1;
  visibility: visible;
}
.account-share__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  font-size: 15px;
  padding: 6px 20px;
  color: #fff;
  border-radius: 8px;
  width: max-content;
  display: inline-block;
  transform: translateX(-50%);
  background-color: #0680cd;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.account-share__tooltip::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 100%;
  border-top: 6px solid #0680cd;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  transform: translateX(-50%);
}
.account-level {
  background-repeat: no-repeat;
  background-size: cover;
}
.account-level__rank {
  position: relative;
  z-index: 10;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.account-level__sub {
  color: #71848e;
  margin-left: 14px;
  font-weight: 500;
  font-size: 16px;
}
@media only screen and (max-width: 46.1875em) {
  .account-level__sub {
    font-size: 15px;
  }
}
.account-level__time {
  margin-top: -24px;
  padding: 45px 0 20px;
  border: 1px dashed #fff;
  border-left: 0;
  border-right: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 0;
}
.account-level__cover {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.account-level__info {
  padding-left: 16px;
}
@media only screen and (max-width: 46.1875em) {
  .account-level__info {
    padding-left: 14px;
  }
}
.account-level__item {
  margin-top: 14px;
  padding: 14px 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
}
.account-level__name {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.account-level__quantity {
  font-size: 22px;
  font-weight: 700;
}
.account-level__text {
  font-weight: 600;
}
.account-level__group {
  padding-top: 22px;
}
.account-level__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
}
.account-level__icon img {
  --sizeImg: 50px;
  min-width: var(--sizeImg);
  width: var(--sizeImg);
}
@media only screen and (max-width: 46.1875em) {
  .account-level__icon img {
    --sizeImg: 40px;
  }
}
.account-level__member {
  font-size: 16px;
  font-weight: 500;
}
.account-level__details {
  font-size: 16px;
  color: #71848e;
}
@media only screen and (max-width: 46.1875em) {
  .account-level__bg {
    width: 150px;
  }
}

.box-required .modal-content {
  border-radius: 15px;
}
.box-required .modal-dialog {
  max-width: 590px;
}
.box-required__body {
  padding: 34px 80px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media only screen and (max-width: 46.1875em) {
  .box-required__body {
    padding: 34px 20px;
  }
}
.box-required__title {
  font-weight: 800;
  font-size: 22px;
  color: #2a485e;
}
@media only screen and (max-width: 46.1875em) {
  .box-required__title {
    font-size: 20px;
  }
}
.box-required__desc {
  margin-top: 2px;
  color: #71848e;
  text-align: center;
}
.box-required__btn {
  width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 14px 20px;
  margin-top: 20px;
  border-radius: 10px;
  background-color: #0680cd;
}
.box-required__btn:hover {
  color: #fff;
}
.box-active .modal-dialog {
  max-width: 537px;
}
@media only screen and (max-width: 46.1875em) {
  .box-active .modal-dialog {
    max-width: 95%;
    margin: auto;
  }
}
.box-active .modal-body {
  padding: 48px 70px;
}
@media only screen and (max-width: 46.1875em) {
  .box-active .modal-body {
    padding: 42px 30px;
  }
}
.box-register .modal-dialog {
  max-width: 535px;
}
.box-register__img {
  margin-bottom: 16px;
}
.box-register__desc {
  width: 65%;
  line-height: 1.7;
}
@media only screen and (max-width: 46.1875em) {
  .box-register__desc {
    width: 73%;
  }
}
.box-register__desc span {
  color: #2a485e;
  font-weight: 700;
}
.box-register__close {
  margin-top: 12px;
  color: #0680cd;
  background-color: #fff;
  border: 1px solid #0680cd;
}
.box-register__close:hover {
  color: #0680cd;
}
.box-register__group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.box-register__counter {
  margin-top: 20px;
  gap: 20px;
}
.box-register__number {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  width: 55px;
  height: 55px;
}
@media only screen and (max-width: 46.1875em) {
  .box-register__number {
    font-size: 22px;
    width: 52px;
    height: 52px;
  }
}
.box-register__text {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #414141;
}

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