:root {

  --bs-blue: #0d6efd;

  --bs-indigo: #6610f2;

  --bs-purple: #6f42c1;

  --bs-pink: #d63384;

  --bs-red: #dc3545;

  --bs-orange: #fd7e14;

  --bs-yellow: #ffc107;

  --bs-green: #198754;

  --bs-teal: #20c997;

  --bs-cyan: #0dcaf0;

  --bs-black: #000;

  --bs-white: #fff;

  --bs-gray: #6c757d;

  --bs-gray-dark: #343a40;

  --bs-gray-100: #f8f9fa;

  --bs-gray-200: #e9ecef;

  --bs-gray-300: #dee2e6;

  --bs-gray-400: #ced4da;

  --bs-gray-500: #adb5bd;

  --bs-gray-600: #6c757d;

  --bs-gray-700: #495057;

  --bs-gray-800: #343a40;

  --bs-gray-900: #212529;

  --bs-primary: #0d6efd;

  --bs-secondary: #6c757d;

  --bs-success: #198754;

  --bs-info: #0dcaf0;

  --bs-warning: #ffc107;

  --bs-danger: #dc3545;

  --bs-light: #f8f9fa;

  --bs-dark: #212529;

  --bs-primary-rgb: 133, 27, 6;

  --bs-secondary-rgb: 108,117,125;

  --bs-success-rgb: 25,135,84;

  --bs-info-rgb: 13,202,240;

  --bs-warning-rgb: 255,193,7;

  --bs-danger-rgb: 220,53,69;

  --bs-light-rgb: 248,249,250;

  --bs-dark-rgb: 33,37,41;

  --bs-white-rgb: 255,255,255;

  --bs-black-rgb: 0,0,0;

  --bs-body-color-rgb: 33,37,41;

  --bs-body-bg-rgb: 255,255,255;

  --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  --bs-body-font-family: var(--bs-font-sans-serif);

  --bs-body-font-size: 1rem;

  --bs-body-font-weight: 400;

  --bs-body-line-height: 1.5;

  --bs-body-color: #212529;

  --bs-body-bg: #fff;

  --bs-border-width: 1px;

  --bs-border-style: solid;

  --bs-border-color: #dee2e6;

  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

  --bs-border-radius: 0.375rem;

  --bs-border-radius-sm: 0.25rem;

  --bs-border-radius-lg: 0.5rem;

  --bs-border-radius-xl: 1rem;

  --bs-border-radius-2xl: 2rem;

  --bs-border-radius-pill: 50rem;

  --bs-link-color: #0d6efd;

  --bs-link-hover-color: #0a58ca;

  --bs-code-color: #d63384;

  --bs-highlight-bg: #fff3cd; }



/* Grow Shadow */

.hvr-grow-shadow {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: perspective(1px) translateZ(0);

  transform: perspective(1px) translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

  -webkit-transition-property: box-shadow, transform;

  transition-property: box-shadow, transform; }



.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {

  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);

  -webkit-transform: scale(1.1);

  transform: scale(1.1); }



/* BODY LOGIN&REGISTER*/

body.fullHeight {

  width: 100%;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center; }

  body.fullHeight #main {

    width: 100%;

    margin-top: 0;

    padding-top: 0;

    min-height: auto; }

    body.fullHeight #main .container {

      width: 720px; }

      @media screen and (max-width: 540px) {

        body.fullHeight #main .container {

          width: 100%; } }

    body.fullHeight #main .content-middle {

      padding-bottom: 0;

      min-height: auto;

      position: relative; }

      @media screen and (max-width: 340px) {

        body.fullHeight #main .content-middle .form-set {

          margin-bottom: 15px; } }

      @media screen and (max-width: 340px) {

        body.fullHeight #main .content-middle .form-set input {

          font-size: 14px;

          padding-bottom: 2px; } }

      @media screen and (max-width: 340px) {

        body.fullHeight #main .content-middle .content-right {

          font-size: 12px; } }

    @media screen and (max-width: 340px) {

      body.fullHeight #main.register .register__logo {

        height: 50px;

        margin-bottom: 30px; } }

    @media screen and (max-width: 340px) {

      body.fullHeight #main.register form input[type="submit"] {

        margin-top: 30px; } }

    body.fullHeight #main.register form .other-btn {

      font-size: 16px; }

      @media screen and (max-width: 340px) {

        body.fullHeight #main.register form .other-btn {

          font-size: 12px; } }



.form-set {

  position: relative; }



.fa-eye {

  position: absolute;

  cursor: pointer;

  color: #515151; }

  .fa-eye.logineye {

    top: 37px;

  right: 15px;

  }

  @media screen and (max-width: 340px) {

    .fa-eye {

      

      font-size: 14px; }

      .fa-eye.logineye {

        top: 34px;

        right: 10px;

      } }



@media screen and (max-width: 767px) {

  .content-top {

    padding-bottom: 20px; } }



.offcanvas.navBtn {

  border-radius: 15px 15px 0 0;

  width: 672px;

  height: auto; }

.offcanvas.offcanvas-bottom {

  left: 50%;

  transform: translate(-50%, 100%); }

.offcanvas.show:not(.hiding), .offcanvas.showing {

  transform: translate(-50%, 0); }

.offcanvas .offcanvas-header {

  position: absolute;

  right: 0; }

@media screen and (max-width: 767px) {

  .offcanvas .offcanvas-body {

    padding: 10px; } }

.offcanvas .offcanvas-body ul {

  margin-bottom: 0;

  padding: 0; }

  .offcanvas .offcanvas-body ul li {

    list-style-type: none; }

    .offcanvas .offcanvas-body ul li a {

      display: block;

      width: 100%;

      color: inherit;

      padding: 8px 10px;

      font-size: 18px;

      letter-spacing: 1px;

      font-weight: 500; }

      @media screen and (max-width: 767px) {

        .offcanvas .offcanvas-body ul li a {

          font-size: 16px;

          padding: 8px 10px; } }



.badge {

  padding: 6px 12px;

  border-radius: 1rem; }



.header__left.sub_header svg {

  margin-left: 1rem; }



.header__back svg {

  margin-left: 0 !important; }



.progress {

  overflow: inherit; }



.content-top .nav {

  align-items: center; }

.content-top .nav-tabs {

  border-bottom: 0; }



#main.profile {

  min-height: calc(100vh - 130px); }



.header__right {

  height: 30px; }

  .header__right .header__avatar img {

    width: 40px;

    height: 40px;

    object-fit: cover;

    position: relative;

    top: -5px;

    border-radius: 50%; }



.blogArticle .slick-prev,

.blogArticle .slick-next {

  display: none !important; }



#main.shop .product-detail .detail {

  display: flex;

  justify-content: flex-start; }

  @media screen and (max-width: 767px) {

    #main.shop .product-detail .detail {

      flex-direction: column; } }

  #main.shop .product-detail .detail .images {

    width: 40%; }

    @media screen and (max-width: 767px) {

      #main.shop .product-detail .detail .images {

        width: 100%; } }

    #main.shop .product-detail .detail .images .mySwiper2 {

      margin-bottom: 6px; }

      @media screen and (max-width: 767px) {

        #main.shop .product-detail .detail .images .mySwiper2 {

          margin-bottom: 12px; } }

      #main.shop .product-detail .detail .images .mySwiper2 .swiper-wrapper .swiper-slide img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 10px;

        border: 1px solid #EEE; }

    #main.shop .product-detail .detail .images .mySwiper .swiper-wrapper .swiper-slide {

      width: 20%; }

      #main.shop .product-detail .detail .images .mySwiper .swiper-wrapper .swiper-slide img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 5px;

        border: 1px solid #EEE; }

  #main.shop .product-detail .detail .content {

    flex: 1;

    padding-left: 5%;

    display: flex;

    justify-content: space-between;

    flex-direction: column; }

    @media screen and (max-width: 767px) {

      #main.shop .product-detail .detail .content {

        padding-left: 0;

        padding-top: 5%; } }

    #main.shop .product-detail .detail .content .text h3 {

      font-family: 'Glacial';

      font-weight: bold;

      margin-bottom: 1.5rem; }

      @media screen and (max-width: 767px) {

        #main.shop .product-detail .detail .content .text h3 {

          font-size: 1.25rem;

          margin-bottom: 0.5rem; } }

    #main.shop .product-detail .detail .content .text .price {

      font-size: 1.75rem;

      font-weight: bold;

      color: #943133; }

      @media screen and (max-width: 767px) {

        #main.shop .product-detail .detail .content .text .price {

          font-size: 1.25rem; } }

    @media screen and (max-width: 767px) {

      #main.shop .product-detail .detail .content .btn-buy {

        display: flex;

        justify-content: center; } }

    #main.shop .product-detail .detail .content .btn-buy a {

      width: 200px;

      height: 50px;

      border-radius: 50px;

      background-color: #943133;

      color: #FFF;

      display: flex;

      justify-content: center;

      align-items: center;

      font-weight: bold;

      font-family: 'Glacial';

      letter-spacing: 1px; }

      @media screen and (max-width: 767px) {

        #main.shop .product-detail .detail .content .btn-buy a {

          width: 175px;

          height: 40px;

          font-size: 14px; } }

      #main.shop .product-detail .detail .content .btn-buy a span {

        margin-right: 10px; }

#main.shop .product-detail .desc {

  margin-top: 30px;

  padding: 30px;

  background-color: rgba(245, 245, 245, 0.5);

  border-radius: 10px; }

  @media screen and (max-width: 767px) {

    #main.shop .product-detail .desc {

      padding: 1rem;

      border-radius: 5px; } }

#main.shop .shop-detail ul {

  padding-left: 0;

  display: flex;

  justify-content: flex-start;

  gap: 5%;

  flex-wrap: wrap; }

  @media screen and (max-width: 767px) {

    #main.shop .shop-detail ul {

      justify-content: space-between;

      gap: 0; } }

  #main.shop .shop-detail ul li {

    list-style-type: none;

    width: 30%;

    border: 1px solid #EEE;

    transition: all 0.3s ease;

    border-radius: 9px;

    margin-bottom: 5%; }

    #main.shop .shop-detail ul li:hover {

      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12); }

    @media screen and (max-width: 767px) {

      #main.shop .shop-detail ul li {

        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);

        width: calc(50% - 6px);

        margin-bottom: 12px;

        border-radius: 6px; }

        #main.shop .shop-detail ul li:hover {

          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06); } }

    #main.shop .shop-detail ul li a {

      width: 100%;

      display: block;

      color: inherit; }

      #main.shop .shop-detail ul li a .img {

        width: 100%;

        height: 200px;

        border-radius: 9px 9px 0 0; }

        @media screen and (max-width: 767px) {

          #main.shop .shop-detail ul li a .img {

            border-radius: 6px 6px 0 0;

            height: 41.475vw; } }

        #main.shop .shop-detail ul li a .img img {

          width: 100%;

          height: 100%;

          object-fit: cover;

          border-radius: 9px 9px 0 0; }

          @media screen and (max-width: 767px) {

            #main.shop .shop-detail ul li a .img img {

              border-radius: 6px 6px 0 0; } }

      #main.shop .shop-detail ul li a .text {

        padding: 0.5rem; }

        #main.shop .shop-detail ul li a .text .title {

          font-size: 14px;

          font-family: "Glacial";

          margin-bottom: 5px;

          line-height: 1.5;

          min-height: 42px; }

          @media screen and (max-width: 767px) {

            #main.shop .shop-detail ul li a .text .title {

              font-size: 3.5vw;

              min-height: 15.75vw; } }

        #main.shop .shop-detail ul li a .text .price {

          font-size: 16px;

          font-weight: bold;

          margin-bottom: 3px; }

          @media screen and (max-width: 767px) {

            #main.shop .shop-detail ul li a .text .price {

              font-size: 3.75vw; } }



#main.quest .ratio {

  position: relative; }

  #main.quest .ratio:before {

    display: none; }

  #main.quest .ratio * {

    position: relative; }

#main.quest iframe {

  height: 34vw; }

  @media screen and (max-width: 767px) {

    #main.quest iframe {

      height: 50vw !important; } }

h1.main-title {
  margin-bottom: 2rem;
}

#main.register .main-card.notes {
  padding: 0;
  background-color: #FFF;
  border-radius: 0;
  padding-bottom: 3rem;
}

#main.register .main-card.notes .scrollable {
  margin-bottom: 2rem;
  max-height: 100%;
  overflow-y: inherit;
}
#main.register .main-card.notes .scrollable article ol {
  padding-left: 0;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  list-style-type: none;
}
@media screen and (max-width: 767px) {
  #main.register .main-card.notes .scrollable article ol {
    gap: 0;
  }
}
#main.register .main-card.notes .scrollable article ol li {
  flex: 0 0 40%;
  list-style-type: unset;
  padding-left: 0;
}
#main.register .main-card.notes .scrollable article ol li .img img {
  width: 70%;
  margin: auto;
  display: block;
}

#main.register .main-card.notes .scrollable article .big {
  font-weight: normal;
  text-align: justify;
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  #main.register .main-card.notes .scrollable article ol li .img img {
    width: 75%;
  }
  #main.register .main-card.notes .scrollable article .big {
    text-align: justify;
  }
  #main.register .main-card.notes .scrollable article ol li {
    flex: unset;
    width: 80%;
    margin-bottom: 1.5rem;
  }
}

/*# sourceMappingURL=new-template.css.map */