@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@200;300;400;500;600;700&display=swap");
@font-face {
  font-family: "DB Helvethaica X";
  src: url("../font/DBHelvethaicaX-45Li.woff2") format("woff2"), url("DBHelvethaicaX-45Li.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DB Helvethaica X";
  src: url("../font/DBHelvethaicaX-75Bd.woff2") format("woff2"), url("DBHelvethaicaX-75Bd.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DB Helvethaica X";
  src: url("../font/DBHelvethaicaX-35Thin.woff2") format("woff2"), url("DBHelvethaicaX-35Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DB Helvethaica X";
  src: url("../font/DBHelvethaicaX-55Regular.woff2") format("woff2"), url("DBHelvethaicaX-55Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DB Helvethaica X";
  src: url("../font/DBHelvethaicaX-65Med.woff2") format("woff2"), url("DBHelvethaicaX-65Med.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-primary: #2875A2;
  --color-primary-light: #c7e8f3;
  --color-secondary: #E9D691;
  --color-secondary-light: #f9f0db;
  --color-secondary-dark: #957523;
  --color-success: #28a745;
  --color-info: #17a2b8;
  --color-warning: #cbaa05;
  --color-warning-light: #fff7cf;
  --color-danger: #c61429;
  --color-gray: #6c757d;
  --color-gray-100: #acb5bd;
  --color-gray-150: #dde2e5;
  --color-gray-200: #f3f4f6;
  --color-light: #fff;
  --color-dark: #2b2b2b;
  --color-black: #000000;
  --color-default: #222;
  --color-border: #ebebeb;
  --fw-extra-light: 100;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: bold;
  --typo-xs: 10px;
  --typo-sm: 12px;
  --typo-md: 16px;
  --typo-lg: 18px;
  --typo-xl: 18px;
  --typo-xxl: 20px;
  --typo-default: 14px;
  --typo-biggest: 36px;
  --font-family-1: "Noto Serif Display", serif;
  --font-family-2: "Brush Script MT", cursive;
  --box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
  --max-app-width: 640px;
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-secondary-dark {
  color: var(--color-secondary-dark) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-gray {
  color: var(--color-gray) !important;
}

.text-gray-100 {
  color: var(--color-gray-100) !important;
}

.text-light {
  color: var(--color-light) !important;
}

.text-dark {
  color: var(--color-dark) !important;
}

.text-default {
  color: var(--color-default) !important;
}

.text-border {
  color: var(--color-border) !important;
}

.fw-light {
  font-weight: var(--fw-light) !important;
}

.fw-normal {
  font-weight: var(--fw-normal) !important;
}

.fw-medium {
  font-weight: var(--fw-medium) !important;
}

.fw-bold {
  font-weight: var(--fw-bold) !important;
}

.typo-xs {
  font-size: var(--typo-xs);
}

.typo-sm {
  font-size: var(--typo-sm);
}

.typo-md {
  font-size: var(--typo-md);
}

.typo-lg {
  font-size: var(--typo-lg);
}

.typo-xl {
  font-size: var(--typo-xl);
}

.typo-xxl {
  font-size: var(--typo-xxl);
}

.typo-biggest {
  font-size: var(--typo-biggest);
}

.typo-default {
  font-size: var(--typo-default);
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-primary-light {
  background-color: var(--color-primary-light) !important;
}

.bg-light {
  background-color: var(--color-light) !important;
}

.bg-gray-light {
  background-color: var(--color-gray-200) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-secondary-light {
  background-color: var(--color-secondary-light) !important;
}

.bg-secondary-dark {
  background-color: var(--color-secondary-dark) !important;
}

.bg-graphic {
  background-image: url(../img/background/bg-graphic.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 180px;
}

.card-styled, .noti-list .card, .my-address .card, .redeem-item .card, .stock-total-box .card, .no-coupon .card, .order-product-list .card, .product-credit-item .card, .credit-block .card, .profile-block .card, .wg-overview .card, .coupon-list .card, .bank-info .card, .product-item .card {
  border-radius: unset;
  border: none;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}

html,
body {
  height: 100%;
}

body {
  font-family: "Anuphan", sans-serif;
  background-color: #f3f4f6;
  line-height: 1;
  word-break: break-word;
  color: var(--color-default);
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 1210px;
}

.gutters-5 {
  margin: 0 -2.5px;
}
.gutters-5 > div {
  padding: 0 2.5px;
}

.gutters-10 {
  margin: 0 -5px;
}
.gutters-10 > div {
  padding: 0 5px;
}

.gutters-15 {
  margin: 0 -7.5px;
}
.gutters-15 > div {
  padding: 0 7.5px;
}

.gutters-20 {
  margin: 0 -10px;
}
.gutters-20 > div {
  padding: 0 10px;
}

.gutters-30 {
  margin: 0 -15px;
}
.gutters-30 > div {
  padding: 0 15px;
}

.gutters-35 {
  margin: 0 -17.5px;
}
.gutters-35 > div {
  padding: 0 17.5px;
}

.gutters-40 {
  margin: 0 -20px;
}
.gutters-40 > div {
  padding: 0 20px;
}

.gutters-50 {
  margin: 0 -25px;
}
.gutters-50 > div {
  padding: 0 25px;
}

.gutters-60 {
  margin: 0 -30px;
}
.gutters-60 > div {
  padding: 0 30px;
}

@media (min-width: 576px) {
  .gutters-sm-35 {
    margin: 0 -17.5px;
  }
  .gutters-sm-35 > div {
    padding: 0 17.5px;
  }
}
@media (min-width: 992px) {
  .gutters-lg-30 {
    margin: 0 -15px;
  }
  .gutters-lg-30 > div {
    padding: 0 15px;
  }
  .gutters-lg-40 {
    margin: 0 -20px;
  }
  .gutters-lg-40 > div {
    padding: 0 20px;
  }
  .gutters-lg-50 {
    margin: 0 -25px;
  }
  .gutters-lg-50 > div {
    padding: 0 25px;
  }
  .gutters-lg-60 {
    margin: 0 -30px;
  }
  .gutters-lg-60 > div {
    padding: 0 30px;
  }
}
img {
  max-width: 100%;
}

.icon {
  position: relative;
}
.icon > img {
  display: block;
}

.btn,
.link {
  transition: all 200ms ease-out;
}

.link:focus,
.link:hover {
  text-decoration: none;
}

a:focus {
  outline: none;
}

input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.item-list {
  margin: 0;
  padding: 0;
}
.item-list > li {
  list-style: none;
  float: left;
}
.item-list.fluid > li {
  width: 100%;
}
.item-list:before, .item-list:after {
  content: " ";
  display: table;
}
.item-list:after {
  clear: both;
}
.item-list.bullet-list > li {
  position: relative;
  padding-left: 1rem;
}
.item-list.bullet-list > li::before {
  position: absolute;
  content: "";
  top: 0.4em;
  left: 0;
  width: 0.24em;
  height: 0.24em;
  border-radius: 50%;
  background-color: var(--color-default);
}

.nav-list {
  margin: 0;
  padding: 0;
}
.nav-list > li {
  list-style: none;
  float: left;
}
.nav-list.fluid > li {
  width: 100%;
}

.nav-list:before,
.nav-list:after {
  content: " ";
  display: table;
}

.nav-list:after {
  clear: both;
}

.icon img {
  display: block;
}

.cover {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.cover .img-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.vdo-cover {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.vdo-cover .vdo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  text-align: center;
}
.vdo-cover .vdo-wrapper video {
  width: 100%;
  height: 100%;
}

.h-title {
  margin: 0;
}

.title {
  margin: 0;
}

.subtitle {
  margin: 0;
}

.desc {
  margin: 0;
  line-height: 1.2em;
}

.text-limit {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.4em;
  max-height: 1.4em;
  -webkit-line-clamp: 1;
}
.text-limit.-x2 {
  max-height: 2.8em;
  -webkit-line-clamp: 2;
}

.transition-speed {
  transition: all 200ms ease;
}

.transition-delay {
  transition-delay: 100ms;
}

figure.cover {
  position: relative;
  overflow: hidden;
  margin: 0;
}
figure.cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
figure.contain {
  position: relative;
  overflow: hidden;
  margin: 0;
}
figure.contain img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.hidden {
  display: none;
  visibility: hidden;
}

.app-width {
  max-width: var(--max-app-width) !important;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */ /* IE 10 and IE 11 */
  -moz-user-select: none;
       user-select: none; /* Standard syntax */
}

.grid-divider {
  position: relative;
}

.grid-divider > [class*=col]:nth-child(n+2):after {
  content: "";
  background-color: #eaecee;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  left: -1px;
}

.divider {
  border-top-color: #eaecee;
}
.divider.-x2 {
  border-top-color: #f8f9fa;
  border-width: 4px;
}

.icon > span[class*=material-symbols] {
  position: relative;
  top: 2px;
  font-weight: 400;
}

.scroll-wrapper {
  padding-right: 1rem;
  margin-right: -1rem;
  padding-bottom: 3rem;
  overflow: scroll;
}

@media (min-width: 376px) {
  .flex-xs-row {
    flex-direction: row !important;
  }
}
.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.right-align {
  float: right;
  text-align: right;
}

.left-align {
  float: left;
  text-align: left;
}

[data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] {
  transition-duration: 50ms;
}

[data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate {
  transition-delay: 50ms;
}

[data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] {
  transition-duration: 0.1s;
}

[data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate {
  transition-delay: 0.1s;
}

[data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] {
  transition-duration: 0.15s;
}

[data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate {
  transition-delay: 0.15s;
}

[data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] {
  transition-duration: 0.2s;
}

[data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate {
  transition-delay: 0.2s;
}

[data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] {
  transition-duration: 0.25s;
}

[data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate {
  transition-delay: 0.25s;
}

[data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] {
  transition-duration: 0.3s;
}

[data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate {
  transition-delay: 0.3s;
}

[data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] {
  transition-duration: 0.35s;
}

[data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate {
  transition-delay: 0.35s;
}

[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
  transition-duration: 0.4s;
}

[data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate {
  transition-delay: 0.4s;
}

[data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] {
  transition-duration: 0.45s;
}

[data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="450"].aos-animate, body[data-aos-delay="450"] [data-aos].aos-animate {
  transition-delay: 0.45s;
}

[data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] {
  transition-duration: 0.5s;
}

[data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate {
  transition-delay: 0.5s;
}

[data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] {
  transition-duration: 0.55s;
}

[data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate {
  transition-delay: 0.55s;
}

[data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] {
  transition-duration: 0.6s;
}

[data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="600"].aos-animate, body[data-aos-delay="600"] [data-aos].aos-animate {
  transition-delay: 0.6s;
}

[data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] {
  transition-duration: 0.65s;
}

[data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="650"].aos-animate, body[data-aos-delay="650"] [data-aos].aos-animate {
  transition-delay: 0.65s;
}

[data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] {
  transition-duration: 0.7s;
}

[data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="700"].aos-animate, body[data-aos-delay="700"] [data-aos].aos-animate {
  transition-delay: 0.7s;
}

[data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] {
  transition-duration: 0.75s;
}

[data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="750"].aos-animate, body[data-aos-delay="750"] [data-aos].aos-animate {
  transition-delay: 0.75s;
}

[data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] {
  transition-duration: 0.8s;
}

[data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="800"].aos-animate, body[data-aos-delay="800"] [data-aos].aos-animate {
  transition-delay: 0.8s;
}

[data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] {
  transition-duration: 0.85s;
}

[data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate {
  transition-delay: 0.85s;
}

[data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] {
  transition-duration: 0.9s;
}

[data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="900"].aos-animate, body[data-aos-delay="900"] [data-aos].aos-animate {
  transition-delay: 0.9s;
}

[data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] {
  transition-duration: 0.95s;
}

[data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="950"].aos-animate, body[data-aos-delay="950"] [data-aos].aos-animate {
  transition-delay: 0.95s;
}

[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {
  transition-duration: 1s;
}

[data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate {
  transition-delay: 1s;
}

[data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] {
  transition-duration: 1.05s;
}

[data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1050"].aos-animate, body[data-aos-delay="1050"] [data-aos].aos-animate {
  transition-delay: 1.05s;
}

[data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] {
  transition-duration: 1.1s;
}

[data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1100"].aos-animate, body[data-aos-delay="1100"] [data-aos].aos-animate {
  transition-delay: 1.1s;
}

[data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] {
  transition-duration: 1.15s;
}

[data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1150"].aos-animate, body[data-aos-delay="1150"] [data-aos].aos-animate {
  transition-delay: 1.15s;
}

[data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] {
  transition-duration: 1.2s;
}

[data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate {
  transition-delay: 1.2s;
}

[data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] {
  transition-duration: 1.25s;
}

[data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1250"].aos-animate, body[data-aos-delay="1250"] [data-aos].aos-animate {
  transition-delay: 1.25s;
}

[data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] {
  transition-duration: 1.3s;
}

[data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1300"].aos-animate, body[data-aos-delay="1300"] [data-aos].aos-animate {
  transition-delay: 1.3s;
}

[data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] {
  transition-duration: 1.35s;
}

[data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1350"].aos-animate, body[data-aos-delay="1350"] [data-aos].aos-animate {
  transition-delay: 1.35s;
}

[data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] {
  transition-duration: 1.4s;
}

[data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1400"].aos-animate, body[data-aos-delay="1400"] [data-aos].aos-animate {
  transition-delay: 1.4s;
}

[data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] {
  transition-duration: 1.45s;
}

[data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1450"].aos-animate, body[data-aos-delay="1450"] [data-aos].aos-animate {
  transition-delay: 1.45s;
}

[data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] {
  transition-duration: 1.5s;
}

[data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate {
  transition-delay: 1.5s;
}

[data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] {
  transition-duration: 1.55s;
}

[data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1550"].aos-animate, body[data-aos-delay="1550"] [data-aos].aos-animate {
  transition-delay: 1.55s;
}

[data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] {
  transition-duration: 1.6s;
}

[data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1600"].aos-animate, body[data-aos-delay="1600"] [data-aos].aos-animate {
  transition-delay: 1.6s;
}

[data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] {
  transition-duration: 1.65s;
}

[data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1650"].aos-animate, body[data-aos-delay="1650"] [data-aos].aos-animate {
  transition-delay: 1.65s;
}

[data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] {
  transition-duration: 1.7s;
}

[data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1700"].aos-animate, body[data-aos-delay="1700"] [data-aos].aos-animate {
  transition-delay: 1.7s;
}

[data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] {
  transition-duration: 1.75s;
}

[data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1750"].aos-animate, body[data-aos-delay="1750"] [data-aos].aos-animate {
  transition-delay: 1.75s;
}

[data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] {
  transition-duration: 1.8s;
}

[data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1800"].aos-animate, body[data-aos-delay="1800"] [data-aos].aos-animate {
  transition-delay: 1.8s;
}

[data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] {
  transition-duration: 1.85s;
}

[data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1850"].aos-animate, body[data-aos-delay="1850"] [data-aos].aos-animate {
  transition-delay: 1.85s;
}

[data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] {
  transition-duration: 1.9s;
}

[data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1900"].aos-animate, body[data-aos-delay="1900"] [data-aos].aos-animate {
  transition-delay: 1.9s;
}

[data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] {
  transition-duration: 1.95s;
}

[data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="1950"].aos-animate, body[data-aos-delay="1950"] [data-aos].aos-animate {
  transition-delay: 1.95s;
}

[data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] {
  transition-duration: 2s;
}

[data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate {
  transition-delay: 2s;
}

[data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] {
  transition-duration: 2.05s;
}

[data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2050"].aos-animate, body[data-aos-delay="2050"] [data-aos].aos-animate {
  transition-delay: 2.05s;
}

[data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] {
  transition-duration: 2.1s;
}

[data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2100"].aos-animate, body[data-aos-delay="2100"] [data-aos].aos-animate {
  transition-delay: 2.1s;
}

[data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] {
  transition-duration: 2.15s;
}

[data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2150"].aos-animate, body[data-aos-delay="2150"] [data-aos].aos-animate {
  transition-delay: 2.15s;
}

[data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] {
  transition-duration: 2.2s;
}

[data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2200"].aos-animate, body[data-aos-delay="2200"] [data-aos].aos-animate {
  transition-delay: 2.2s;
}

[data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] {
  transition-duration: 2.25s;
}

[data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2250"].aos-animate, body[data-aos-delay="2250"] [data-aos].aos-animate {
  transition-delay: 2.25s;
}

[data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] {
  transition-duration: 2.3s;
}

[data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2300"].aos-animate, body[data-aos-delay="2300"] [data-aos].aos-animate {
  transition-delay: 2.3s;
}

[data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] {
  transition-duration: 2.35s;
}

[data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2350"].aos-animate, body[data-aos-delay="2350"] [data-aos].aos-animate {
  transition-delay: 2.35s;
}

[data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] {
  transition-duration: 2.4s;
}

[data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2400"].aos-animate, body[data-aos-delay="2400"] [data-aos].aos-animate {
  transition-delay: 2.4s;
}

[data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] {
  transition-duration: 2.45s;
}

[data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2450"].aos-animate, body[data-aos-delay="2450"] [data-aos].aos-animate {
  transition-delay: 2.45s;
}

[data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] {
  transition-duration: 2.5s;
}

[data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2500"].aos-animate, body[data-aos-delay="2500"] [data-aos].aos-animate {
  transition-delay: 2.5s;
}

[data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] {
  transition-duration: 2.55s;
}

[data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2550"].aos-animate, body[data-aos-delay="2550"] [data-aos].aos-animate {
  transition-delay: 2.55s;
}

[data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] {
  transition-duration: 2.6s;
}

[data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2600"].aos-animate, body[data-aos-delay="2600"] [data-aos].aos-animate {
  transition-delay: 2.6s;
}

[data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] {
  transition-duration: 2.65s;
}

[data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2650"].aos-animate, body[data-aos-delay="2650"] [data-aos].aos-animate {
  transition-delay: 2.65s;
}

[data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] {
  transition-duration: 2.7s;
}

[data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2700"].aos-animate, body[data-aos-delay="2700"] [data-aos].aos-animate {
  transition-delay: 2.7s;
}

[data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] {
  transition-duration: 2.75s;
}

[data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2750"].aos-animate, body[data-aos-delay="2750"] [data-aos].aos-animate {
  transition-delay: 2.75s;
}

[data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] {
  transition-duration: 2.8s;
}

[data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2800"].aos-animate, body[data-aos-delay="2800"] [data-aos].aos-animate {
  transition-delay: 2.8s;
}

[data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] {
  transition-duration: 2.85s;
}

[data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2850"].aos-animate, body[data-aos-delay="2850"] [data-aos].aos-animate {
  transition-delay: 2.85s;
}

[data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] {
  transition-duration: 2.9s;
}

[data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2900"].aos-animate, body[data-aos-delay="2900"] [data-aos].aos-animate {
  transition-delay: 2.9s;
}

[data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] {
  transition-duration: 2.95s;
}

[data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="2950"].aos-animate, body[data-aos-delay="2950"] [data-aos].aos-animate {
  transition-delay: 2.95s;
}

[data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] {
  transition-duration: 3s;
}

[data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] {
  transition-delay: 0ms;
}

[data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate {
  transition-delay: 3s;
}

[data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
  transition-timing-function: ease;
}

[data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] {
  transition-timing-function: ease-in;
}

[data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] {
  transition-timing-function: ease-out;
}

[data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] {
  transition-timing-function: ease-in-out;
}

[data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] {
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] {
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

[data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] {
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] {
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-aos^=fade][data-aos^=fade] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos^=fade][data-aos^=fade].aos-animate {
  opacity: 1;
  transform: translateZ(0);
}

[data-aos=fade-up] {
  transform: translate3d(0, 100px, 0);
}

[data-aos=fade-down] {
  transform: translate3d(0, -100px, 0);
}

[data-aos=fade-right] {
  transform: translate3d(-100px, 0, 0);
}

[data-aos=fade-left] {
  transform: translate3d(100px, 0, 0);
}

[data-aos=fade-up-right] {
  transform: translate3d(-100px, 100px, 0);
}

[data-aos=fade-up-left] {
  transform: translate3d(100px, 100px, 0);
}

[data-aos=fade-down-right] {
  transform: translate3d(-100px, -100px, 0);
}

[data-aos=fade-down-left] {
  transform: translate3d(100px, -100px, 0);
}

[data-aos^=zoom][data-aos^=zoom] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos^=zoom][data-aos^=zoom].aos-animate {
  opacity: 1;
  transform: translateZ(0) scale(1);
}

[data-aos=zoom-in] {
  transform: scale(0.6);
}

[data-aos=zoom-in-up] {
  transform: translate3d(0, 100px, 0) scale(0.6);
}

[data-aos=zoom-in-down] {
  transform: translate3d(0, -100px, 0) scale(0.6);
}

[data-aos=zoom-in-right] {
  transform: translate3d(-100px, 0, 0) scale(0.6);
}

[data-aos=zoom-in-left] {
  transform: translate3d(100px, 0, 0) scale(0.6);
}

[data-aos=zoom-out] {
  transform: scale(1.2);
}

[data-aos=zoom-out-up] {
  transform: translate3d(0, 100px, 0) scale(1.2);
}

[data-aos=zoom-out-down] {
  transform: translate3d(0, -100px, 0) scale(1.2);
}

[data-aos=zoom-out-right] {
  transform: translate3d(-100px, 0, 0) scale(1.2);
}

[data-aos=zoom-out-left] {
  transform: translate3d(100px, 0, 0) scale(1.2);
}

[data-aos^=slide][data-aos^=slide] {
  transition-property: transform;
}

[data-aos^=slide][data-aos^=slide].aos-animate {
  transform: translateZ(0);
}

[data-aos=slide-up] {
  transform: translate3d(0, 100%, 0);
}

[data-aos=slide-down] {
  transform: translate3d(0, -100%, 0);
}

[data-aos=slide-right] {
  transform: translate3d(-100%, 0, 0);
}

[data-aos=slide-left] {
  transform: translate3d(100%, 0, 0);
}

[data-aos^=flip][data-aos^=flip] {
  backface-visibility: hidden;
  transition-property: transform;
}

[data-aos=flip-left] {
  transform: perspective(2500px) rotateY(-100deg);
}

[data-aos=flip-left].aos-animate {
  transform: perspective(2500px) rotateY(0);
}

[data-aos=flip-right] {
  transform: perspective(2500px) rotateY(100deg);
}

[data-aos=flip-right].aos-animate {
  transform: perspective(2500px) rotateY(0);
}

[data-aos=flip-up] {
  transform: perspective(2500px) rotateX(-100deg);
}

[data-aos=flip-up].aos-animate {
  transform: perspective(2500px) rotateX(0);
}

[data-aos=flip-down] {
  transform: perspective(2500px) rotateX(100deg);
}

[data-aos=flip-down].aos-animate {
  transform: perspective(2500px) rotateX(0);
}

@font-face {
  font-family: "feather";
  src: url("../font/feather.eot?t=1501841394106"); /* IE9*/
  src: url("../font/feather.eot?t=1501841394106#iefix") format("embedded-opentype"), url("../font/feather.woff?t=1501841394106") format("woff"), url("../font/feather.ttf?t=1501841394106") format("truetype"), url("../font/feather.svg?t=1501841394106#feather") format("svg"); /* iOS 4.1- */
}
.feather {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "feather" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-alert-octagon:before {
  content: "\e81b";
}

.icon-alert-circle:before {
  content: "\e81c";
}

.icon-activity:before {
  content: "\e81d";
}

.icon-alert-triangle:before {
  content: "\e81e";
}

.icon-align-center:before {
  content: "\e81f";
}

.icon-airplay:before {
  content: "\e820";
}

.icon-align-justify:before {
  content: "\e821";
}

.icon-align-left:before {
  content: "\e822";
}

.icon-align-right:before {
  content: "\e823";
}

.icon-arrow-down-left:before {
  content: "\e824";
}

.icon-arrow-down-right:before {
  content: "\e825";
}

.icon-anchor:before {
  content: "\e826";
}

.icon-aperture:before {
  content: "\e827";
}

.icon-arrow-left:before {
  content: "\e828";
}

.icon-arrow-right:before {
  content: "\e829";
}

.icon-arrow-down:before {
  content: "\e82a";
}

.icon-arrow-up-left:before {
  content: "\e82b";
}

.icon-arrow-up-right:before {
  content: "\e82c";
}

.icon-arrow-up:before {
  content: "\e82d";
}

.icon-award:before {
  content: "\e82e";
}

.icon-bar-chart:before {
  content: "\e82f";
}

.icon-at-sign:before {
  content: "\e830";
}

.icon-bar-chart-2:before {
  content: "\e831";
}

.icon-battery-charging:before {
  content: "\e832";
}

.icon-bell-off:before {
  content: "\e833";
}

.icon-battery:before {
  content: "\e834";
}

.icon-bluetooth:before {
  content: "\e835";
}

.icon-bell:before {
  content: "\e836";
}

.icon-book:before {
  content: "\e837";
}

.icon-briefcase:before {
  content: "\e838";
}

.icon-camera-off:before {
  content: "\e839";
}

.icon-calendar:before {
  content: "\e83a";
}

.icon-bookmark:before {
  content: "\e83b";
}

.icon-box:before {
  content: "\e83c";
}

.icon-camera:before {
  content: "\e83d";
}

.icon-check-circle:before {
  content: "\e83e";
}

.icon-check:before {
  content: "\e83f";
}

.icon-check-square:before {
  content: "\e840";
}

.icon-cast:before {
  content: "\e841";
}

.icon-chevron-down:before {
  content: "\e842";
}

.icon-chevron-left:before {
  content: "\e843";
}

.icon-chevron-right:before {
  content: "\e844";
}

.icon-chevron-up:before {
  content: "\e845";
}

.icon-chevrons-down:before {
  content: "\e846";
}

.icon-chevrons-right:before {
  content: "\e847";
}

.icon-chevrons-up:before {
  content: "\e848";
}

.icon-chevrons-left:before {
  content: "\e849";
}

.icon-circle:before {
  content: "\e84a";
}

.icon-clipboard:before {
  content: "\e84b";
}

.icon-chrome:before {
  content: "\e84c";
}

.icon-clock:before {
  content: "\e84d";
}

.icon-cloud-lightning:before {
  content: "\e84e";
}

.icon-cloud-drizzle:before {
  content: "\e84f";
}

.icon-cloud-rain:before {
  content: "\e850";
}

.icon-cloud-off:before {
  content: "\e851";
}

.icon-codepen:before {
  content: "\e852";
}

.icon-cloud-snow:before {
  content: "\e853";
}

.icon-compass:before {
  content: "\e854";
}

.icon-copy:before {
  content: "\e855";
}

.icon-corner-down-right:before {
  content: "\e856";
}

.icon-corner-down-left:before {
  content: "\e857";
}

.icon-corner-left-down:before {
  content: "\e858";
}

.icon-corner-left-up:before {
  content: "\e859";
}

.icon-corner-up-left:before {
  content: "\e85a";
}

.icon-corner-up-right:before {
  content: "\e85b";
}

.icon-corner-right-down:before {
  content: "\e85c";
}

.icon-corner-right-up:before {
  content: "\e85d";
}

.icon-cpu:before {
  content: "\e85e";
}

.icon-credit-card:before {
  content: "\e85f";
}

.icon-crosshair:before {
  content: "\e860";
}

.icon-disc:before {
  content: "\e861";
}

.icon-delete:before {
  content: "\e862";
}

.icon-download-cloud:before {
  content: "\e863";
}

.icon-download:before {
  content: "\e864";
}

.icon-droplet:before {
  content: "\e865";
}

.icon-edit-2:before {
  content: "\e866";
}

.icon-edit:before {
  content: "\e867";
}

.icon-edit-1:before {
  content: "\e868";
}

.icon-external-link:before {
  content: "\e869";
}

.icon-eye:before {
  content: "\e86a";
}

.icon-feather:before {
  content: "\e86b";
}

.icon-facebook:before {
  content: "\e86c";
}

.icon-file-minus:before {
  content: "\e86d";
}

.icon-eye-off:before {
  content: "\e86e";
}

.icon-fast-forward:before {
  content: "\e86f";
}

.icon-file-text:before {
  content: "\e870";
}

.icon-film:before {
  content: "\e871";
}

.icon-file:before {
  content: "\e872";
}

.icon-file-plus:before {
  content: "\e873";
}

.icon-folder:before {
  content: "\e874";
}

.icon-filter:before {
  content: "\e875";
}

.icon-flag:before {
  content: "\e876";
}

.icon-globe:before {
  content: "\e877";
}

.icon-grid:before {
  content: "\e878";
}

.icon-heart:before {
  content: "\e879";
}

.icon-home:before {
  content: "\e87a";
}

.icon-github:before {
  content: "\e87b";
}

.icon-image:before {
  content: "\e87c";
}

.icon-inbox:before {
  content: "\e87d";
}

.icon-layers:before {
  content: "\e87e";
}

.icon-info:before {
  content: "\e87f";
}

.icon-instagram:before {
  content: "\e880";
}

.icon-layout:before {
  content: "\e881";
}

.icon-link-2:before {
  content: "\e882";
}

.icon-life-buoy:before {
  content: "\e883";
}

.icon-link:before {
  content: "\e884";
}

.icon-log-in:before {
  content: "\e885";
}

.icon-list:before {
  content: "\e886";
}

.icon-lock:before {
  content: "\e887";
}

.icon-log-out:before {
  content: "\e888";
}

.icon-loader:before {
  content: "\e889";
}

.icon-mail:before {
  content: "\e88a";
}

.icon-maximize-2:before {
  content: "\e88b";
}

.icon-map:before {
  content: "\e88c";
}

.icon-map-pin:before {
  content: "\e88e";
}

.icon-menu:before {
  content: "\e88f";
}

.icon-message-circle:before {
  content: "\e890";
}

.icon-message-square:before {
  content: "\e891";
}

.icon-minimize-2:before {
  content: "\e892";
}

.icon-mic-off:before {
  content: "\e893";
}

.icon-minus-circle:before {
  content: "\e894";
}

.icon-mic:before {
  content: "\e895";
}

.icon-minus-square:before {
  content: "\e896";
}

.icon-minus:before {
  content: "\e897";
}

.icon-moon:before {
  content: "\e898";
}

.icon-monitor:before {
  content: "\e899";
}

.icon-more-vertical:before {
  content: "\e89a";
}

.icon-more-horizontal:before {
  content: "\e89b";
}

.icon-move:before {
  content: "\e89c";
}

.icon-music:before {
  content: "\e89d";
}

.icon-navigation-2:before {
  content: "\e89e";
}

.icon-navigation:before {
  content: "\e89f";
}

.icon-octagon:before {
  content: "\e8a0";
}

.icon-package:before {
  content: "\e8a1";
}

.icon-pause-circle:before {
  content: "\e8a2";
}

.icon-pause:before {
  content: "\e8a3";
}

.icon-percent:before {
  content: "\e8a4";
}

.icon-phone-call:before {
  content: "\e8a5";
}

.icon-phone-forwarded:before {
  content: "\e8a6";
}

.icon-phone-missed:before {
  content: "\e8a7";
}

.icon-phone-off:before {
  content: "\e8a8";
}

.icon-phone-incoming:before {
  content: "\e8a9";
}

.icon-phone:before {
  content: "\e8aa";
}

.icon-phone-outgoing:before {
  content: "\e8ab";
}

.icon-pie-chart:before {
  content: "\e8ac";
}

.icon-play-circle:before {
  content: "\e8ad";
}

.icon-play:before {
  content: "\e8ae";
}

.icon-plus-square:before {
  content: "\e8af";
}

.icon-plus-circle:before {
  content: "\e8b0";
}

.icon-plus:before {
  content: "\e8b1";
}

.icon-pocket:before {
  content: "\e8b2";
}

.icon-printer:before {
  content: "\e8b3";
}

.icon-power:before {
  content: "\e8b4";
}

.icon-radio:before {
  content: "\e8b5";
}

.icon-repeat:before {
  content: "\e8b6";
}

.icon-refresh-ccw:before {
  content: "\e8b7";
}

.icon-rewind:before {
  content: "\e8b8";
}

.icon-rotate-ccw:before {
  content: "\e8b9";
}

.icon-refresh-cw:before {
  content: "\e8ba";
}

.icon-rotate-cw:before {
  content: "\e8bb";
}

.icon-save:before {
  content: "\e8bc";
}

.icon-search:before {
  content: "\e8bd";
}

.icon-server:before {
  content: "\e8be";
}

.icon-scissors:before {
  content: "\e8bf";
}

.icon-share-2:before {
  content: "\e8c0";
}

.icon-share:before {
  content: "\e8c1";
}

.icon-shield:before {
  content: "\e8c2";
}

.icon-settings:before {
  content: "\e8c3";
}

.icon-skip-back:before {
  content: "\e8c4";
}

.icon-shuffle:before {
  content: "\e8c5";
}

.icon-sidebar:before {
  content: "\e8c6";
}

.icon-skip-forward:before {
  content: "\e8c7";
}

.icon-slack:before {
  content: "\e8c8";
}

.icon-slash:before {
  content: "\e8c9";
}

.icon-smartphone:before {
  content: "\e8ca";
}

.icon-square:before {
  content: "\e8cb";
}

.icon-speaker:before {
  content: "\e8cc";
}

.icon-star:before {
  content: "\e8cd";
}

.icon-stop-circle:before {
  content: "\e8ce";
}

.icon-sun:before {
  content: "\e8cf";
}

.icon-sunrise:before {
  content: "\e8d0";
}

.icon-tablet:before {
  content: "\e8d1";
}

.icon-tag:before {
  content: "\e8d2";
}

.icon-sunset:before {
  content: "\e8d3";
}

.icon-target:before {
  content: "\e8d4";
}

.icon-thermometer:before {
  content: "\e8d5";
}

.icon-thumbs-up:before {
  content: "\e8d6";
}

.icon-thumbs-down:before {
  content: "\e8d7";
}

.icon-toggle-left:before {
  content: "\e8d8";
}

.icon-toggle-right:before {
  content: "\e8d9";
}

.icon-trash-2:before {
  content: "\e8da";
}

.icon-trash:before {
  content: "\e8db";
}

.icon-trending-up:before {
  content: "\e8dc";
}

.icon-trending-down:before {
  content: "\e8dd";
}

.icon-triangle:before {
  content: "\e8de";
}

.icon-type:before {
  content: "\e8df";
}

.icon-twitter:before {
  content: "\e8e0";
}

.icon-upload:before {
  content: "\e8e1";
}

.icon-umbrella:before {
  content: "\e8e2";
}

.icon-upload-cloud:before {
  content: "\e8e3";
}

.icon-unlock:before {
  content: "\e8e4";
}

.icon-user-check:before {
  content: "\e8e5";
}

.icon-user-minus:before {
  content: "\e8e6";
}

.icon-user-plus:before {
  content: "\e8e7";
}

.icon-user-x:before {
  content: "\e8e8";
}

.icon-user:before {
  content: "\e8e9";
}

.icon-users:before {
  content: "\e8ea";
}

.icon-video-off:before {
  content: "\e8eb";
}

.icon-video:before {
  content: "\e8ec";
}

.icon-voicemail:before {
  content: "\e8ed";
}

.icon-volume-x:before {
  content: "\e8ee";
}

.icon-volume-2:before {
  content: "\e8ef";
}

.icon-volume-1:before {
  content: "\e8f0";
}

.icon-volume:before {
  content: "\e8f1";
}

.icon-watch:before {
  content: "\e8f2";
}

.icon-wifi:before {
  content: "\e8f3";
}

.icon-x-square:before {
  content: "\e8f4";
}

.icon-wind:before {
  content: "\e8f5";
}

.icon-x:before {
  content: "\e8f6";
}

.icon-x-circle:before {
  content: "\e8f7";
}

.icon-zap:before {
  content: "\e8f8";
}

.icon-zoom-in:before {
  content: "\e8f9";
}

.icon-zoom-out:before {
  content: "\e8fa";
}

.icon-command:before {
  content: "\e8fb";
}

.icon-cloud:before {
  content: "\e8fc";
}

.icon-hash:before {
  content: "\e8fd";
}

.icon-headphones:before {
  content: "\e8fe";
}

.icon-underline:before {
  content: "\e8ff";
}

.icon-italic:before {
  content: "\e900";
}

.icon-bold:before {
  content: "\e901";
}

.icon-crop:before {
  content: "\e902";
}

.icon-help-circle:before {
  content: "\e903";
}

.icon-paperclip:before {
  content: "\e904";
}

.icon-shopping-cart:before {
  content: "\e905";
}

.icon-tv:before {
  content: "\e906";
}

.icon-wifi-off:before {
  content: "\e907";
}

.icon-minimize:before {
  content: "\e88d";
}

.icon-maximize:before {
  content: "\e908";
}

.icon-gitlab:before {
  content: "\e909";
}

.icon-sliders:before {
  content: "\e90a";
}

.icon-star-on:before {
  content: "\e90b";
}

.icon-heart-on:before {
  content: "\e90c";
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  font-weight: normal;
  font-style: normal;
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir=rtl] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "←";
}

[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir=rtl] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: "→";
}

[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  /* cursor: hand; */
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.breadcrumb {
  background-color: transparent;
  margin: 5px 0 0 0;
  padding: 0;
  border-radius: 0;
}
.breadcrumb li + li:before {
  font-family: "feather";
  content: "\e844";
  padding: 0 6px;
  float: left;
  position: relative;
  top: 1px;
}
.breadcrumb .link {
  float: left;
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb .link.-nolimit {
  max-width: inherit;
}
.breadcrumb .link.active {
  color: var(--color-primary);
}
.breadcrumb li,
.breadcrumb .link {
  color: var(--color-default);
}

.btn-link {
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0;
  position: relative;
}
.btn-link:hover {
  text-decoration: none;
}
.btn-link:focus {
  box-shadow: none;
  outline: none;
  text-decoration: none;
}

.btn {
  background: none;
  position: relative;
  padding: 0 10px;
  min-width: 100px;
  height: 38px;
  line-height: 36px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
}
.btn.fluid {
  min-width: inherit;
  width: 100%;
}
.btn:focus {
  box-shadow: none;
}
.btn.btn-xs {
  font-size: var(--typo-xs);
  height: 20px;
  line-height: 18px;
  min-width: 50px;
}
.btn.btn-sm {
  font-size: var(--typo-xs);
  height: 24px;
  line-height: 22px;
  min-width: 60px;
}
.btn.btn-md {
  font-size: var(--typo-sm);
  height: 26px;
  line-height: 24px;
  min-width: 60px;
}
.btn.btn-lg {
  font-size: var(--typo-md);
  min-width: 120px;
  height: 42px;
  line-height: 40px;
  border-radius: 21px;
}
.btn.btn-xl {
  font-size: 16px;
  font-weight: 600;
  min-width: 140px;
  height: 50px;
  line-height: 48px;
  border-radius: 25px;
}
.btn.disabled {
  cursor: unset;
}

.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.show > .btn.dropdown-toggle:focus {
  box-shadow: none;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary);
  border-color: transparent;
}

.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.actitve:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.btn-primary:focus:hover,
.btn-primary.focus:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: transparent;
}

.btn-primary:disabled,
.btn-primary:disabled:hover,
.btn-primary.disabled,
.btn-primary.disabled:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: transparent;
  opacity: 0.5;
  box-shadow: none;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--color-light);
  background-color: var(--color-secondary);
  border-color: transparent;
}

.btn-secondary:hover,
.btn-secondary:active:hover,
.btn-secondary.active:hover,
.btn-secondary:active:focus,
.btn-secondary.actitve:focus,
.btn-secondary:active.focus,
.btn-secondary.active.focus,
.btn-secondary:focus:hover,
.btn-secondary.focus:hover {
  color: var(--color-light);
  background-color: var(--color-secondary);
  border-color: transparent;
}

.btn-secondary.disabled,
.btn-secondary.disabled:hover {
  color: var(--color-gray-100);
  opacity: 0.5;
}

.btn-secondary-light,
.btn-secondary-light:focus,
.btn-secondary-light.focus,
.btn-secondary-light:not(:disabled):not(.disabled).active,
.btn-secondary-light:not(:disabled):not(.disabled):active,
.show > .btn-secondary-light.dropdown-toggle {
  color: var(--color-secondary);
  background-color: var(--color-secondary-light);
  border-color: transparent;
}

.btn-secondary-light:hover,
.btn-secondary-light:active:hover,
.btn-secondary-light.active:hover,
.btn-secondary-light:active:focus,
.btn-secondary-light.actitve:focus,
.btn-secondary-light:active.focus,
.btn-secondary-light.active.focus,
.btn-secondary-light:focus:hover,
.btn-secondary-light.focus:hover {
  color: var(--color-light);
  background-color: var(--color-secondary);
  border-color: transparent;
}

.btn-secondary-light.disabled,
.btn-secondary-light.disabled:hover {
  color: var(--color-gray-100);
  opacity: 0.5;
}

.btn-border-primary,
.btn-border-primary:focus,
.btn-border-primary.focus,
.btn-border-primary:not(:disabled):not(.disabled).active,
.btn-border-primary:not(:disabled):not(.disabled):active,
.show > .btn-border-primary.dropdown-toggle {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}

.btn-border-primary:hover,
.btn-border-primary:active:hover,
.btn-border-primary.active:hover,
.btn-border-primary:active:focus,
.btn-border-primary.actitve:focus,
.btn-border-primary:active.focus,
.btn-border-primary.active.focus,
.btn-border-primary:focus:hover,
.btn-border-primary.focus:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: transparent;
}

.btn-border-primary.disabled,
.btn-border-primary.disabled:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: transparent;
  opacity: 0.5;
}

.btn-delete,
.btn-delete:focus,
.btn-delete.focus,
.btn-delete:not(:disabled):not(.disabled).active,
.btn-delete:not(:disabled):not(.disabled):active,
.show > .btn-delete.dropdown-toggle {
  color: var(--color-gray-100);
  min-width: unset !important;
}

.btn-delete:hover,
.btn-delete:active:hover,
.btn-delete.active:hover,
.btn-delete:active:focus,
.btn-delete.actitve:focus,
.btn-delete:active.focus,
.btn-delete.active.focus,
.btn-delete:focus:hover,
.btn-delete.focus:hover {
  color: var(--color-danger);
}

.btn-delete.disabled,
.btn-delete.disabled:hover {
  color: var(--color-gray-100);
  opacity: 0.5;
}

.btn-light,
.btn-light:focus,
.btn-light.focus,
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle {
  color: var(--color-primary);
  background-color: var(--color-light);
  border-color: transparent;
}

.btn-light:hover,
.btn-light:active:hover,
.btn-light.active:hover,
.btn-light:active:focus,
.btn-light.actitve:focus,
.btn-light:active.focus,
.btn-light.active.focus,
.btn-light:focus:hover,
.btn-light.focus:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: transparent;
  box-shadow: 0px 2px 10px #fff;
}

.btn-light.disabled,
.btn-light.disabled:hover {
  color: var(--color-primary);
  background-color: var(--color-light);
  border-color: transparent;
  opacity: 0.5;
}

.guest-btn {
  font-size: var(--typo-md);
  padding: 0;
}
.guest-btn .icon {
  width: 50px;
}
.guest-btn .icon > img {
  width: 21px;
  margin: 0 auto;
}
.guest-btn .txt {
  width: calc(100% - 50px);
}
.guest-btn .icon ~ .txt {
  margin-left: 0 !important;
  border-left: 1px solid var(--color-border);
}

.editor-content {
  font-size: 14px;
  color: var(--color-default);
  line-height: 1.4em;
}
.editor-content p {
  margin-bottom: 20px;
}
.editor-content p:last-child {
  margin-bottom: 0;
}
.editor-content img {
  height: auto !important;
}
.editor-content .item-list.bullet-list > li::before {
  top: 0.6em;
}
.editor-content figure.contain img {
  height: 100% !important;
}

.input-height, .form-default .select2-container--default .select2-selection--single .select2-selection__arrow, .form-default .select2-container--default .select2-selection--single,
.form-default .select2-container--default .select2-selection--multiple {
  height: calc(1.5em + 0.75rem + 6px);
}

.input-line-height, .select2-container--default .select2-search--inline .select2-search__field {
  line-height: calc(1.5em + 0.75rem + 6px);
}

.form-default .form-group {
  position: relative;
  margin-bottom: 15px;
}

.form-default .control-label {
  margin-bottom: 10px;
  font-weight: var(--fw-normal);
  font-size: var(--typo-default);
  color: var(--color-default);
  line-height: 1.2em;
}

.form-default .form-control {
  height: 42px;
  padding: 10px 12px;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  box-shadow: none;
  font-size: var(--typo-default);
  color: var(--color-default);
  font-weight: var(--fw-default);
}
.form-default .form-control::-moz-placeholder {
  color: var(--color-gray);
  opacity: 1;
}
.form-default .form-control::placeholder {
  color: var(--color-gray);
  opacity: 1;
}
.form-default .form-control:disabled {
  background-color: transparent;
}

.form-default textarea.form-control {
  line-height: 1.2em;
  height: auto;
  transition: all 200ms;
}

.form-default textarea::-webkit-scrollbar {
  width: 0px;
}

.form-default .form-note {
  position: absolute;
  top: 100%;
  left: 20px;
  margin-top: 4px;
  font-size: var(--typo-xs);
  color: var(--color-gray);
}

.form-default .form-control:focus {
  border-color: var(--color-primary);
  text-shadow: none;
  box-shadow: none;
}

.form-default .block-control {
  position: relative;
}

.form-default .has-error .form-control:focus {
  box-shadow: none;
}

.form-default .has-success .form-control:focus {
  box-shadow: none;
}

.form-default .floating-label {
  color: var(--color-default);
  font-size: var(--typo-xs);
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 9px;
  transition: all 200ms ease-out;
}

.form-default .form-control:focus ~ .floating-label,
.form-default .form-control:not(:focus):valid ~ .floating-label {
  color: var(--color-default);
  font-size: var(--typo-xs);
  left: 0;
  top: -22px;
}

.form-default .select2-container--default .select2-selection--single,
.form-default .select2-container--default .select2-selection--multiple {
  background-color: #fff;
  border-radius: 0;
  border: 1px solid var(--color-border);
  padding-left: 7px;
  padding-right: 7px;
}

.form-default .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: var(--typo-md);
  line-height: calc(1.5em + 0.75rem + 4px);
}

.form-default .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem + 4px);
  right: 10px;
}

.select2-container--default .select2-search--inline .select2-search__field {
  margin-top: 0;
}

.select2-results__option {
  padding: 12px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  font-family: "Material Symbols Outlined" !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  position: absolute;
  content: "\e5cf";
  top: calc(50% - 12px);
  right: 0;
  font-size: 26px;
  font-weight: 200;
  color: var(--color-gray-100);
  width: 24px;
  height: 24px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  content: "\e5ce";
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary);
}

.select2-dropdown {
  border-color: var(--color-border);
  border-radius: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  padding: 7px;
  background-color: var(--color-primary-light);
  border: none;
  display: flex;
  flex-direction: row-reverse;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 5px;
  margin-right: 0;
}

.form-control-feedback::after {
  position: absolute;
  left: 0;
  bottom: -24px;
}

.form-control-feedback:before {
  display: none;
}

.form-control-feedback.glyphicon-ok {
  background: url("../img/icon/checked.png") center no-repeat;
  background-size: 16px;
}

.form-control-feedback.glyphicon-remove {
  padding-bottom: 1rem;
}
.form-control-feedback.glyphicon-remove::after {
  content: "This field cannot be empty.";
  color: var(--color-danger);
}

.radio-control {
  position: relative;
  display: inline-block;
}

.radio-control .icon {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.radio-control .title {
  margin: 0;
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  color: var(--color-default);
  padding-left: 30px;
  line-height: 1.2em;
  display: block;
}

.radio-control input[type=radio] {
  margin-top: 0;
  position: absolute;
  z-index: 5;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.radio-control input[type=radio]:checked ~ .icon {
  border-color: transparent;
  border-color: var(--color-border);
}

.radio-control input[type=radio]:checked ~ .icon:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: var(--color-default);
  border-radius: 50%;
}

.checkbox-control {
  position: relative;
  display: inline-block;
}

.checkbox-control .icon {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  background-color: #fff;
  position: absolute;
  top: -1px;
  left: 0;
  border-radius: 0;
}

.checkbox-control .title {
  margin: 0;
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  color: var(--color-default);
  padding-left: 30px;
  line-height: 1.2em;
  display: block;
}

.checkbox-control input[type=checkbox] {
  margin-top: 0;
  position: absolute;
  z-index: 5;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.checkbox-control input[type=checkbox]:checked ~ .icon {
  border-color: transparent;
  background-color: var(--color-primary);
}

.checkbox-control input[type=checkbox]:checked ~ .icon:before {
  font-family: "feather";
  content: "\e83f";
  color: #fff;
}

.has-feedback {
  transition: all 300ms;
}
.has-feedback.has-error .form-control {
  border-color: var(--color-danger);
}
.has-feedback.has-success .form-control {
  border-color: var(--color-primary);
}
.has-feedback.has-error {
  margin-bottom: 2.5rem;
}

.checkbox-control {
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.checkbox-control .checkbox-label {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.checkbox-control .checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox-control .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
}
.checkbox-control .checkbox-label:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkbox-control .checkbox-label input:checked ~ .checkmark {
  background-color: var(--color-primary);
}
.checkbox-control .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox-control .checkbox-label input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-control .checkbox-label .checkmark:after {
  left: calc(50% - 3px);
  top: calc(50% - 6.5px);
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.radio-control {
  /* Hide the browser's default radio */
  /* Create a custom radio */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a priamry color */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.radio-control .radio-label {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.radio-control .radio-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radio-control .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid var(--color-gray);
}
.radio-control .radio-label input:checked ~ .checkmark {
  border-color: var(--color-primary);
}
.radio-control .radio-label input:checked ~ .checkmark::after {
  background-color: var(--color-primary);
}
.radio-control .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.radio-control .radio-label input:checked ~ .checkmark:after {
  display: block;
}
.radio-control .radio-label .checkmark:after {
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.radio-control .txt {
  line-height: 0.8em;
}

.form-search {
  position: relative;
}
.form-search .control-label {
  position: absolute;
  top: calc(50% - 12px);
  left: 10px;
  height: auto;
  margin-bottom: 0;
}
.form-search .control-label > span {
  color: var(--color-gray-100);
}
.form-search .form-control {
  font-size: var(--typo-md);
  padding-left: 44px;
  border-radius: unset;
}
.form-search .icon > span[class*=material-symbols] {
  top: 0;
  color: var(--color-gray-100);
}

.form-default input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  position: relative;
  right: -6px;
  content: "\e5cd";
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-image: url(../img/icon/icon-close.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.datepicker {
  position: relative;
  margin-bottom: 0;
}
.datepicker::after {
  position: absolute;
  font-family: "Material Symbols Rounded";
  content: "\e935";
  color: transparent;
  font-weight: 400;
  font-size: 22px;
  height: 22px;
  top: calc(50% - 12px);
  right: 10px;
  color: var(--color-gray-100);
}
.datepicker > .form-control {
  padding-right: 2.5rem;
}

.ui-widget-header {
  color: var(--color-primary);
  font-size: 14px;
  border-color: transparent;
  background-color: transparent;
}

.ui-widget-content {
  color: var(--color-dark);
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-radius: unset;
}

.ui-widget {
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  border-color: var(--color-border);
  border-radius: 3px;
  width: 280px;
}

.ui-datepicker td span, .ui-datepicker td a {
  padding: 10px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border-color: transparent;
  background: var(--color-gray-200);
  color: var(--color-default);
  border-radius: 3px;
  font-size: 12px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-light);
}

.ui-datepicker table {
  font-size: 0.8em;
}

.ui-datepicker-prev span {
  display: none !important;
}

.ui-datepicker-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ui-datepicker-prev:before {
  font-family: "feather";
  content: "\e843";
}

.ui-datepicker-next span {
  display: none !important;
}

.ui-datepicker-next {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ui-datepicker-next:before {
  font-family: "feather";
  content: "\e844";
}

.ui-datepicker .ui-datepicker-title {
  line-height: 2.4em;
}

.form-default .input-group .radio-control + .radio-control {
  margin-left: 1rem;
}

.pagination-block {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.pagination {
  margin: 0;
}
.pagination .link {
  display: block;
  min-width: 54px;
  height: 54px;
  padding: 0 5px;
  text-align: center;
  line-height: 54px;
  border-radius: 10px;
  background-color: var(--color-default);
  font-weight: var(--fw-normal);
  font-size: var(--typo-default);
  color: var(--color-light);
}
.pagination .link:hover {
  color: var(--color-primary);
}
.pagination .link span {
  position: relative;
  line-height: 54px;
}
.pagination .link.link-text {
  border-color: transparent;
  background-color: transparent;
}
.pagination .link.link-text:hover {
  border-color: transparent;
  background-color: transparent;
}
.pagination li {
  display: inline-block;
  vertical-align: middle;
}
.pagination li.active .link {
  color: var(--color-light);
  border-color: transparent;
  background: none;
  background-color: var(--color-primary);
}
.pagination li + li {
  margin-left: 10px;
}

.whead {
  margin-bottom: 1.25rem;
}
.whead .h-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2em;
}
.whead .title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
}
.whead .title small {
  font-size: 12px;
}

.modal-dialog {
  margin: 0 auto;
}

.modal-lg,
.modal-xl {
  max-width: 640px;
}

.modal-default .modal-content {
  border: unset;
  border-radius: 0;
  overflow: hidden;
  height: 100dvh;
  min-height: -webkit-fill-available;
}
.modal-default .modal-title {
  color: var(--color-default);
}
.modal-default .close {
  opacity: 1;
  color: var(--color-default);
  transition: all 200ms;
}
.modal-default .close .icon > span[class*=material-symbols] {
  top: 2px;
  font-size: 22px;
  font-weight: 400;
}
.modal-default .close:hover {
  color: var(--color-primary);
}
.modal-default .close:active, .modal-default .close:focus {
  outline: none;
}
.modal-default .back {
  margin-left: -1rem;
  margin-right: 0;
}
.modal-default .modal-header {
  border-bottom-color: var(--color-border);
}
.modal-default .modal-footer {
  border-top-color: var(--color-border);
}
.modal-default .modal-footer {
  background-color: var(--color-light);
}
.modal-default .scroll-wrapper {
  margin-right: 0;
  padding-bottom: 1.5rem;
}

.interest-health-modal .modal-header,
.interest-health-modal .modal-body {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.interest-health-modal .scroll-wrapper {
  max-height: calc(100vh - 75px - 77px - 3.5rem);
}

.my-coupon-modal .scroll-wrapper {
  max-height: calc(100vh - 75px - 3.5rem);
}

@media (max-width: 575px) {
  .coupon-modal .modal-dialog {
    margin: 0;
  }
  .coupon-modal .modal-body {
    height: calc(100vh - 75px - 77px);
  }
  .interest-health-modal .modal-body {
    max-height: calc(100vh - 75px - 77px - 1rem);
  }
}
div.swal2-container {
  padding: 0 15px;
}

div.swal2-popup {
  border-radius: 15px;
  width: 26em;
  padding-bottom: 40px;
  color: var(--color-default);
  background-color: var(--color-light);
}

div.swal2-icon {
  margin-top: 40px;
  margin-bottom: 0;
}

h2.swal2-title {
  padding-top: 20px;
  font-size: var(--typo-md);
  font-weight: var(--fw-medium);
  color: var(--color-default);
}

div.swal2-html-container {
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 3em;
  margin-right: 3em;
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  color: var(--color-default);
  overflow: visible;
  line-height: 1.4em;
}

.swal2-actions .btn {
  margin: 0 5px;
}

div.swal2-loader {
  opacity: 0.4;
  border-width: 0.15em;
  border-color: var(--color-gray) transparent var(--color-gray) transparent;
}

.preload {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-image: url(../img/background/bg-preload.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.preload .txt {
  font-family: var(--font-family-1);
  font-size: 24px;
  font-weight: var(--fw-normal);
  line-height: 1.4em;
  color: var(--color-light);
  margin-top: 3rem;
}
.preload .txt span {
  position: relative;
  top: -8px;
  font-family: var(--font-family-2);
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.02em;
}

.preload-wrapper {
  height: 100vh;
  width: 100%;
  padding: 3rem calc(3rem - 15px);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (min-width: 768px) {
  .preload .txt {
    font-size: 32px;
    margin-top: 5rem;
  }
  .preload .txt span {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  .preload {
    background-size: var(--max-app-width);
  }
}
.swiper-pagination-bullet {
  width: 0.3em;
  height: 0.3em;
  opacity: 1;
  background-color: #d9d9d9;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-warning) !important;
}

.thumb-swiper .swiper-pagination-fraction {
  font-size: var(--typo-md);
  left: unset;
  right: 10px;
  width: unset;
  text-align: right;
  color: var(--color-light);
  background: rgba(43, 43, 43, 0.5);
  border-radius: 50rem;
  padding: 2px 12px;
}

.swal2-styled.swal2-confirm {
  background-color: var(--color-primary) !important;
  min-width: 80px;
  box-shadow: none;
  outline: none;
  border-radius: 30px !important;
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: none !important;
}

.swal2-styled.swal2-cancel {
  background-color: var(--warning) !important;
  min-width: 80px;
  box-shadow: none;
  outline: none;
  border-radius: 30px !important;
}

.swal2-styled.swal2-cancel:focus {
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .swiper-pagination-bullet {
    width: 0.5em;
    height: 0.5em;
  }
}
.feed-block .feed-thumb .cover,
.feed-block .feed-thumb .contain,
.feed-block .feed-thumb .vdo-cover {
  padding-top: 88%;
  background-color: #f4f4f5;
}
.feed-block .feed-swiper {
  padding-bottom: 35px;
}
.feed-block .feed-swiper .swiper-horizontal > .swiper-pagination-bullets,
.feed-block .feed-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.feed-block .feed-swiper .swiper-pagination-custom,
.feed-block .feed-swiper .swiper-pagination-fraction {
  bottom: 0px;
}
.feed-block .topbar {
  margin-top: -30px;
  margin-bottom: 0.5rem;
}
.feed-block .feed-content {
  padding: 1rem 0;
}
.feed-block .feed-content .title {
  color: var(--color-dark);
}
.feed-block .feed-content .editor-content {
  position: relative;
}
.feed-block .feed-content .editor-content:not(.show-more) {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.4em;
  max-height: 2.82em;
  -webkit-line-clamp: 2;
}
.feed-block .feed-content .editor-content:not(.show-more) .more-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--color-light);
}
.feed-block .feed-content .editor-content:not(.show-more) .less-btn {
  display: none;
}
.feed-block .feed-content .editor-content .more-btn {
  position: relative;
}
.feed-block .feed-content .editor-content .less-btn {
  display: inline-block;
}
.feed-block .btn,
.feed-block .link {
  color: var(--color-default);
}
.feed-block .feed-item {
  margin-bottom: 2rem;
}
.feed-block .feed-item.-vdo .feed-thumb .link,
.feed-block .feed-item.-vdo .feed-thumb a {
  position: relative;
  display: block;
}
.feed-block .feed-item.-vdo .feed-thumb .link .icon,
.feed-block .feed-item.-vdo .feed-thumb a .icon {
  color: var(--color-light);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-block .feed-item.-vdo .feed-thumb .link .icon span,
.feed-block .feed-item.-vdo .feed-thumb a .icon span {
  font-size: 2.64em;
}
.feed-block .feed-item.-vdo .feed-thumb .link:not(.play-vdo) .cover video,
.feed-block .feed-item.-vdo .feed-thumb a:not(.play-vdo) .cover video {
  opacity: 0;
  visibility: hidden;
}
.feed-block .feed-item.-vdo .feed-thumb .link:not(.play-vdo) .vdo-cover,
.feed-block .feed-item.-vdo .feed-thumb a:not(.play-vdo) .vdo-cover {
  padding-top: 0;
}
.feed-block .feed-item.-vdo .feed-thumb .link.play-vdo .cover,
.feed-block .feed-item.-vdo .feed-thumb a.play-vdo .cover {
  padding-top: 0;
  opacity: 0;
  visibility: hidden;
}
.feed-block .more-btn,
.feed-block .less-btn {
  color: var(--color-primary);
}
.feed-block .more-btn:hover span,
.feed-block .less-btn:hover span {
  text-decoration: underline;
}

.material-symbols-rounded-fill {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
}

span[class*=material-symbols] {
  font-weight: 200;
}

.tags {
  padding: 0;
  margin: 0;
  margin-top: 1rem;
}
.tags li {
  float: left;
  list-style: none;
}

.tags:after {
  clear: both;
}

.tags:before,
.tags:after {
  content: " ";
  display: table;
}

.tag {
  background: var(--color-primary-light);
  border-radius: 50rem;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  display: inline-block;
  height: 28px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
  text-decoration: none;
}

.default-dropdown .dropdown-menu {
  min-width: 12rem;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: unset;
  border: unset;
  box-shadow: 0px 0.25rem 1.5rem rgba(0, 0, 0, 0.24);
}
.default-dropdown .dropdown-divider {
  margin: 0 1rem;
}
.default-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  font-size: var(--typo-md);
  padding: 1rem 1rem;
}
.default-dropdown .dropdown-item .icon {
  width: 24px;
  height: 24px;
}
.default-dropdown .dropdown-item .dropdown-inner {
  margin-left: 0.5rem;
}
.default-dropdown .dropdown-item.active,
.default-dropdown .dropdown-item:active {
  color: var(--color-dark);
  background-color: var(--color-primary-light);
}

.navbar-wrapper ~ .cart-block {
  margin-top: 145px;
  margin-bottom: 120px;
  overflow: hidden;
}

.cart-block .scroll-wrapper {
  overflow: inherit;
  padding-bottom: 0;
}
.cart-block .scroll-wrapper .cart-summary {
  position: fixed;
  width: 320px;
  left: auto;
  bottom: 0;
  right: 0;
  background-color: rgb(243, 244, 246);
}
.cart-block .cart-group {
  padding: 0 1rem;
}
.cart-block .cart-group .navbar-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0.5rem !important;
}
.cart-block .cart-group + .cart-group .navbar-wrapper {
  padding-top: 0.5rem;
}

.cart-list .thumbnail {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.cart-list .thumbnail .icon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-light);
  border-radius: 10px;
  color: var(--color-primary);
}
.cart-list .thumbnail .icon span {
  font-size: 34px;
}
.cart-list .thumbnail .cover {
  padding-top: 100%;
}
.cart-list .product-item {
  border-radius: 10px;
  background-color: #f3f4f6;
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.6), 15px 15px 15px rgba(0, 0, 0, 0.05);
}
.cart-list .product-item .checkbox-control {
  margin-top: 1.36rem;
}
.cart-list .product-item .inner {
  padding: 8px 0 0 0;
  margin-left: 12px;
  margin-right: 8px;
}
.cart-list .product-item .title {
  color: var(--color-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3em;
}
.cart-list .product-item .desc {
  margin-top: 3px;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.3em;
}
.cart-list .product-item .desc li {
  margin-right: 6px;
}
.cart-list .product-item .desc strong {
  font-weight: normal;
}
.cart-list .product-item .amount {
  margin-bottom: 0.5rem;
}
.cart-list .product-item .price {
  font-size: var(--typo-sm);
  font-weight: var(--fw-medium);
  padding: 3px 0;
}
.cart-list .product-item .price span {
  color: var(--color-primary);
  font-size: var(--typo-md);
}
.cart-list .product-item .btn-delete {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
}
.cart-list .product-item .btn-delete span {
  font-size: 20px;
}
.cart-list .product-item .badge-list {
  margin-left: -10px;
  margin-right: -1rem;
  margin-bottom: 0.25rem;
  padding-left: 5px;
  padding-right: 1rem;
}
.cart-list .product-group {
  padding-left: 0;
  margin-bottom: 10px;
}
.cart-list .product-group .product-item {
  list-style: none;
}
.cart-list .product-group .product-item + .product-item {
  margin-top: 10px;
}
.cart-list .product-group + .product-group {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.cart-list .product-item .qty-list {
  margin-top: 5px;
  margin-bottom: 0;
}
.cart-list .product-item .qty-item {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.cart-summary {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 1rem;
  background-color: var(--color-light);
  z-index: 1;
}
.cart-summary .title {
  color: var(--color-dark);
}
.cart-summary .total {
  font-size: var(--typo-xxl);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.divider ~ .cart-block {
  margin-top: -1rem;
  padding-top: 1rem;
}

.wg-product .product-list .product-slide .swiper-slide {
  width: 168px;
}

.product-list .qty-list {
  min-height: 88px;
}
.product-list .product-slide > .swiper {
  margin-left: -15px;
  margin-right: -15px;
  padding-right: 30px;
}
.product-list .product-slide > .swiper > .swiper-wrapper {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
.product-list .product-slide > .swiper > .swiper-wrapper > .swiper-slide {
  width: 245px;
}
.product-list .product-item .quantity {
  padding: 0 5px;
}
.product-list .product-item .quantity input[type=text] {
  max-width: 40px;
  padding-left: 5px;
  padding-right: 5px;
}
.product-list .product-item .topbar .fav-btn .icon > span {
  color: var(--color-dark);
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
  -webkit-text-fill-color: var(--color-light);
  -webkit-text-stroke: 1px;
}
.product-list .product-item .topbar .fav-btn .icon > span.material-symbols-rounded-fill {
  -webkit-text-fill-color: #e92038;
}
.product-list > .product-item {
  margin-bottom: 1rem;
}

.product-item .link {
  color: var(--color-default);
}
.product-item .cover,
.product-item .contain {
  padding-top: 100%;
}
.product-item .inner {
  padding: 1rem;
}
.product-item .title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}
.product-item .subtitle {
  font-size: var(--typo-sm);
  font-weight: var(--fw-normal);
}
.product-item .thumbnail {
  background-color: #f4f4f5;
}
.product-item .thumbnail .topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.product-item .topbar {
  padding: 1rem;
  padding-bottom: 0;
}
.product-item .qty-list {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.product-item .qty-item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.product-item .qty-item .price {
  font-size: var(--typo-md);
}
.product-item .qty-item .price span {
  font-size: var(--typo-xl);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.badge-list {
  margin: 0 -1rem;
  padding: 0 0.75rem;
  overflow: hidden;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.badge-list .badge-swiper .swiper-slide {
  padding: 0 0.25rem;
  width: auto;
}

.alert-default .alert {
  border-radius: 0;
  border-color: transparent;
}
.alert-default .alert .icon.rounded-circle {
  font-size: 22px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-default .alert .icon.rounded-circle > span[class*=material-symbols] {
  top: 0;
}
.alert-default .alert .alert-heading {
  font-size: var(--typo-lg);
  font-weight: var(--fw-medium);
}
.alert-default .alert .desc {
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
}
.alert-default .alert-success {
  color: var(--color-default);
  background-color: transparent;
}
.alert-default .alert-success .alert-heading {
  color: var(--color-primary);
}
.alert-default .alert-success .icon {
  color: var(--color-primary);
}
.alert-default .alert-success .desc {
  color: var(--color-dark);
}
.alert-default .alert-warning .icon.bg-secondary-light {
  background-color: var(--color-warning-light) !important;
}
.alert-default .alert-warning .icon.bg-secondary-light span {
  color: var(--color-warning);
}

.payment-warning {
  line-height: 1.4em;
}

.default-filter .filter-box {
  font-size: var(--typo-md);
  padding: 1rem;
  background-color: var(--color-gray-200);
  margin-bottom: 1rem;
}
.default-filter .filter-box .icon img {
  filter: grayscale(1);
}
.default-filter .filter-box .btn-link {
  color: var(--color-default);
  text-decoration: none;
  min-width: unset;
  padding: 0;
  line-height: unset;
  height: unset;
}
.default-filter .filter-box .btn .badge {
  font-size: var(--typo-md);
  padding: 0 0.3015em;
  margin-left: 0.25rem;
}
.default-filter .filter.active .btn-filter,
.default-filter .filter.active .btn-sorting,
.default-filter .sorting.active .btn-filter,
.default-filter .sorting.active .btn-sorting {
  color: var(--color-primary);
}
.default-filter .filter.active .btn-filter .icon img,
.default-filter .filter.active .btn-sorting .icon img,
.default-filter .sorting.active .btn-filter .icon img,
.default-filter .sorting.active .btn-sorting .icon img {
  filter: none;
}
.default-filter .filter:not(.active) .btn-filter .badge {
  display: none;
}
.default-filter .filter .checkbox-control .checkbox-label {
  padding-left: 18px;
}
.default-filter .filter .action {
  text-align: right;
}
.default-filter .filter .action .btn-link {
  color: var(--color-primary);
  text-decoration: none;
}
.default-filter .filter .topic {
  font-size: var(--typo-sm);
  line-height: 1.4em;
  opacity: 0.5;
}
.default-filter .sorting:not(.active) .sorted {
  display: none;
}
.default-filter .sorting .sorted:empty {
  display: none;
}
.default-filter .sorting .dropdown-menu {
  min-width: 8.5rem;
}

.filter-collapse .navbar-collapse {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 3rem;
  width: 88%;
  height: 100%;
  transition: left 300ms ease-in-out;
  z-index: 1031;
}
.filter-collapse .navbar-collapse .scroll-wrapper {
  max-height: calc(100vh - 3rem - 60px - 92px);
  padding-top: 1rem;
  padding-bottom: 2rem;
}
.filter-collapse .navbar-collapse .navbar-toggler {
  position: relative;
  right: -6px;
}
.filter-collapse .navbar-collapse .navbar-toggler .icon {
  color: var(--color-secondary);
}
.filter-collapse .navbar-collapse .navbar-toggler .icon span {
  font-size: 32px;
  font-weight: 300;
}
.filter-collapse .navbar-collapse .navbar-wrapper {
  padding: 0 1.5rem;
}
.filter-collapse .navbar-collapse .whead .title {
  font-size: var(--typo-xl);
}
.filter-collapse .navbar-collapse .filler-search {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-border);
}
.filter-collapse .navbar-collapse .filler-search .action {
  padding: 1rem;
  padding-bottom: 2rem;
}
.filter-collapse .navbar-collapse.collapsing {
  left: -88%;
  transition: height 0s ease;
}
.filter-collapse .navbar-collapse.show {
  left: 0;
  transition: left 300ms ease-in-out;
}
.filter-collapse .navbar-toggler.collapsed ~ .navbar-collapse {
  transition: left 300ms ease-in-out;
}

.filter-list {
  margin-top: 0.5rem;
}
.filter-list .btn {
  color: var(--color-dark);
  font-size: var(--typo-md);
  font-weight: var(--fw-light);
  border-radius: 50rem;
  background-color: var(--color-primary-light);
}
.filter-list .btn .icon > span[class*=material-symbols] {
  top: 6px;
}
.filter-list .filter-swiper {
  overflow: hidden;
  margin: 0 -1rem;
  padding: 0 1rem;
}
.filter-list .filter-swiper .swiper-slide {
  width: auto;
}
.filter-list .filter-swiper .swiper-scrollbar {
  bottom: -10px;
}

@media (min-width: 576px) {
  .filter-collapse .navbar-collapse {
    width: 85%;
  }
  .filter-collapse .navbar-collapse.collapsing {
    left: -85%;
  }
}
@media (min-width: 768px) {
  .filter-collapse .navbar-collapse {
    width: 50%;
  }
  .filter-collapse .navbar-collapse.collapsing {
    left: -50%;
  }
  .filter-collapse .navbar-collapse .scroll-content {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .filter-collapse .navbar-collapse {
    width: 40%;
  }
  .filter-collapse .navbar-collapse.collapsing {
    left: -40%;
  }
}
@media (min-width: 1200px) {
  .filter-collapse .navbar-collapse {
    width: 30%;
  }
  .filter-collapse .navbar-collapse.collapsing {
    left: -30%;
  }
}
@media (min-width: 1600px) {
  .filter-collapse .navbar-collapse {
    width: 25%;
  }
  .filter-collapse .navbar-collapse.collapsing {
    left: -25%;
  }
}
.category {
  margin-bottom: 0.5rem;
}
.category .nav-tabs {
  border: none;
}
.category .nav-tabs .nav-link {
  text-align: center;
  color: var(--color-default);
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  border-radius: 0;
  border: 1px solid transparent;
  opacity: 0.5;
  transition: all 300ms;
}
.category .nav-tabs .nav-link .icon {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  margin-bottom: 0.25rem;
}
.category .nav-tabs .nav-link .icon img {
  filter: grayscale(1);
}
.category .nav-tabs .nav-item.show .nav-link,
.category .nav-tabs .nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  opacity: 1;
}
.category .nav-tabs .nav-item.show .nav-link .icon img,
.category .nav-tabs .nav-link.active .icon img {
  filter: none;
}

.total-items {
  font-size: var(--typo-md);
  margin-bottom: 1.25rem;
  opacity: 0.5;
}

@media (min-width: 575px) {
  .category .nav-tabs .nav-link {
    padding-left: 2.35rem;
    padding-right: 2.35rem;
  }
}
@media (min-width: 640px) {
  .category .nav-tabs .nav-link {
    padding-left: 2.85rem;
    padding-right: 2.85rem;
  }
}
.cookie-tab .app-width {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 15px 15px 0 0;
  box-shadow: -15px -15px 15px rgba(0, 0, 0, 0.05), 15px 15px 15px rgba(0, 0, 0, 0.05);
}
.cookie-tab .text {
  font-size: 14px;
  line-height: 1.4em;
}
.cookie-tab .link {
  color: var(--color-primary);
  text-decoration: underline;
}
.cookie-tab .fixed-bottom .wrapper {
  padding: 20px 15px;
}
.cookie-tab .action {
  text-align: right;
  margin-top: 1rem;
}
.cookie-tab .action .btn {
  font-weight: 500;
  min-width: 50px;
  border-radius: 5px;
  font-size: 14px;
}
.cookie-tab .action .btn + .btn {
  margin-left: 5px;
}

.site-header .fixed-top {
  z-index: 1031;
}
.site-header .app-width > [class*=container] {
  background-color: #f3f4f6;
}
.site-header .navbar {
  padding: 0;
}
.site-header .navbar-collapse-left {
  border-radius: 0 15px 15px 0;
}
.site-header .bg-primary .navbar-toggler,
.site-header .bg-primary .navbar-nav .nav-link {
  color: var(--color-light);
}
.site-header .bg-primary .navbar-toggler .icon img,
.site-header .bg-primary .navbar-nav .nav-link .icon img {
  filter: grayscale(1) invert(1) brightness(2);
  width: 24px;
  height: 24px;
}
.site-header .bg-primary .navbar-toggler .icon span,
.site-header .bg-primary .navbar-nav .nav-link .icon span {
  color: var(--color-light);
}
.site-header .bg-primary .navbar-toggler .inner,
.site-header .bg-primary .navbar-nav .nav-link .inner {
  padding-left: 1rem;
}
.site-header .bg-primary.navbar-collapse-left {
  color: var(--color-light);
}
.site-header .bg-primary.navbar-collapse-left hr {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.site-header .navbar-toggler.btn,
.site-header .notification .btn {
  min-width: 38px;
  padding: 0;
}
.site-header .navbar-nav .nav-item:last-child {
  margin-bottom: 1rem;
}
.site-header .navbar-nav .nav-link {
  font-size: var(--typo-md);
  padding: 1rem 0;
}
.site-header .navbar-nav .nav-menu .menu-body {
  padding: 0 2.5rem;
}
.site-header .navbar-nav .dropdown-toggle {
  position: relative;
}
.site-header .navbar-nav .dropdown-toggle:after {
  font-family: "feather" !important;
  content: "\e842";
  position: absolute;
  right: 0;
  top: calc(50% - 11px);
  position: absolute;
  border: none;
  transition: all 200ms;
}
.site-header .navbar-nav .dropdown-toggle:not(.collapsed)::after {
  transform: rotate(180deg);
}
.site-header .navbar-toggler {
  color: var(--color-dark);
}
.site-header .navbar-toggler > div {
  position: relative;
  margin: 0 auto;
  width: 20px;
  height: 14px;
}
.site-header .navbar-collapse-left .navbar-toggler.close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.site-header .navbar-collapse-left .navbar-toggler.close .bar {
  background-color: var(--color-light);
}
.site-header .navbar-collapse {
  z-index: 1;
  padding-top: 4rem;
}
.site-header .navbar-collapse .navbar-toggler {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.site-header .nav-wrapper {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.site-header .navbar-brand {
  display: flex;
  align-items: center;
  padding: 10px 0;
  color: var(--color-default);
  margin-left: -2px;
}
.site-header .navbar-brand img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-right: 8px;
}
.site-header .navbar-brand .title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1em;
}
.site-header .navbar-brand .desc {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  display: flex;
  align-items: center;
}
.site-header .navbar-brand .desc span {
  position: relative;
  top: 0.04em;
  margin-left: -3px;
  font-size: 15px;
  margin-right: 2px;
}
.site-header .navbar-collapse-left {
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 0;
  width: 320px;
  height: 100%;
  transition: left 300ms ease-in-out;
}
.site-header .navbar-collapse-left .scroll-content {
  margin-right: -15px;
  padding-right: 15px;
  max-height: calc(100vh - 5rem - 57px);
}
.site-header .navbar-collapse-left .scroll-wrapper {
  max-height: calc(100vh - 5rem - 57px);
  padding-bottom: 4rem;
}
.site-header .navbar-collapse-right {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0;
  padding-top: 0;
  padding-bottom: 0;
  width: 320px;
  max-width: 640px;
  border-radius: 15px 0 0 15px;
  transition: right 300ms ease-in-out;
  overflow: auto;
}
.site-header .navbar-collapse-right .whead {
  margin-bottom: 15px;
}
.site-header .navbar-collapse-right > .navbar-wrapper {
  padding-top: 15px !important;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: 320px;
  background-color: rgb(243, 244, 246);
  border-radius: 15px 0 0 0;
}
.site-header .navbar-collapse-right .navbar-wrapper {
  padding: 0 1rem;
}
.site-header .navbar-collapse-right .navbar-toggler {
  top: 11px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .navbar-collapse-right .material-symbols-outlined {
  font-weight: 400;
}
.site-header .navbar-collapse-left.collapsing {
  left: -320px;
}
.site-header .navbar-collapse-right.collapsing {
  right: -320px;
  height: auto;
}
.site-header .navbar-collapse-left.show {
  left: 0;
  transition: left 300ms ease-in-out;
}
.site-header .navbar-collapse-right.show {
  right: 0;
  transition: right 300ms ease-in-out;
}
.site-header .navbar-toggler.collapsed ~ .navbar-collapse-left {
  transition: left 300ms ease-in-out;
}
.site-header .navbar-toggler.collapsed ~ .navbar-collapse-right {
  transition: right 300ms ease-in-out;
}
.site-header .navbar-toggler {
  border-color: transparent;
}
.site-header .navbar-toggler:focus {
  outline: none;
}
.site-header .navbar-toggler .bar {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  background-color: var(--color-black);
  margin: auto;
  border-radius: 2px;
  -webkit-transition: All 400ms ease;
  -moz-transition: All 400ms ease;
  -o-transition: All 400ms ease;
}
.site-header .navbar-toggler .bar:nth-child(1) {
  top: 0;
}
.site-header .navbar-toggler .bar:nth-child(2) {
  top: 0;
  bottom: 0;
  width: 75%;
}
.site-header .navbar-toggler .bar:nth-child(3) {
  top: 0;
  bottom: 0;
  width: 75%;
}
.site-header .navbar-toggler .bar:nth-child(4) {
  bottom: 0;
}
.site-header .navbar-toggler.collapsed,
.site-header .navbar-toggler.close {
  opacity: 1;
}
.site-header .navbar-toggler.close .bar:nth-child(1) {
  top: 0;
  opacity: 0;
}
.site-header .navbar-toggler.close .bar:nth-child(2) {
  top: 0;
  bottom: 0;
  width: 100%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
.site-header .navbar-toggler.close .bar:nth-child(3) {
  top: 0;
  bottom: 0;
  width: 100%;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
.site-header .navbar-toggler.close .bar:nth-child(4) {
  bottom: 0;
  opacity: 0;
}
.site-header .whead .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-default);
}

.site-header .bg-drop::after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 0;
}
.site-header .menu-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1049;
}
.site-header .menu-mobile > div {
  border-top: 1px solid var(--color-border);
}
.site-header .menu-mobile .item {
  text-align: center;
}
.site-header .menu-mobile .item .icon {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  margin-bottom: 0.4rem;
}
.site-header .menu-mobile .item .icon .cover {
  position: relative;
  top: 1px;
  left: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.site-header .menu-mobile .item .icon > img {
  position: relative;
  top: 2px;
}
.site-header .menu-mobile .link {
  display: block;
  color: var(--color-dark);
  background-color: var(--color-light);
  padding: 8px 5px 20px 5px;
  font-size: 13px;
  font-weight: 400;
}
.site-header .menu-mobile .link.active {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}
.site-header .menu-mobile .link .material-symbols-outlined {
  font-size: 25px;
}
.site-header .menu-mobile .dropdown-menu {
  position: fixed !important;
  z-index: 10000;
  left: 0 !important;
  right: 0 !important;
  top: 60px !important;
  bottom: 72.4px !important;
  transform: none !important;
  max-width: 640px;
  overflow: auto;
  border: none;
  box-shadow: none;
  border-radius: 15px 15px 0 0;
  margin: 0 auto;
  padding: 20px;
  background-color: #f3f4f6;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
}
.site-header .menu-mobile .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
}
.site-header .menu-mobile .dropdown-menu .nav-list {
  background-color: #fff;
  border-radius: 10px;
}
.site-header .menu-mobile .dropdown-menu li + li {
  border-top: 1px solid var(--color-border);
}
.site-header .menu-mobile .dropdown-menu .title {
  color: var(--color-default);
  font-weight: 600;
  font-size: 20px;
  padding: 5px 0;
  margin-bottom: 10px;
}
.site-header .menu-mobile .dropdown-menu .link {
  position: relative;
  display: block;
  padding: 15px 40px 15px 15px;
  background-color: transparent;
  font-weight: 400;
  font-size: 14px;
}
.site-header .menu-mobile .dropdown-menu .link:after {
  font-family: "feather";
  content: "\e844";
  position: absolute;
  top: 13px;
  right: 10px;
  font-size: 18px;
  opacity: 0.4;
}

.show-left .site-header .menu-mobile {
  z-index: 1031;
}

.show-right .site-header .menu-mobile {
  z-index: 1030;
}

@media (min-width: 1600px) {
  .site-header .navbar-collapse-left,
  .site-header .navbar-collapse-right {
    width: 320px;
  }
  .site-header .navbar-collapse-left.collapsing {
    left: -320px;
  }
  .site-header .navbar-collapse-right.collapsing {
    right: -320px;
  }
}
body,
.global-container {
  background-color: #f3f4f6;
}

.global-container .site-header:before {
  content: "";
  position: fixed;
  z-index: 1040;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
}
.global-container.overlay .site-header:before {
  opacity: 1;
  visibility: visible;
}

.site-container {
  overflow: hidden;
  padding-top: 66px;
}

.default-page {
  padding-bottom: 74.4px;
  min-height: calc(100dvh - 62px);
}
.default-page .default-head .default-filter {
  padding-top: 1rem;
}

.badge-danger {
  background-color: var(--color-danger);
}

.badge-primary {
  background-color: var(--color-primary);
}

.badge-secondary {
  background-color: var(--color-secondary);
}

.noti-btn {
  position: relative;
}
.noti-btn .badge {
  position: absolute;
  top: -0.3rem;
  right: calc(50% - 0.25rem);
  font-size: 0;
  padding: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.noti-btn .badge-danger {
  color: var(--color-danger);
}

.cart-btn {
  position: relative;
}
.cart-btn .badge {
  position: absolute;
  top: -0.25rem;
  right: -8px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 0.1rem;
  font-size: 11px;
}

.bg-drop .navbar .header-bg-drop::after,
.bg-drop .filter-bg-drop::after {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms;
}

.bg-drop .filter-bg-drop::after {
  z-index: 1031;
}

.bg-drop.show-right, .bg-drop.show-left, .bg-drop.show-filter {
  height: 100vh;
  overflow: hidden;
}
.bg-drop.show-right .navbar .navbar-toggler-right.header-bg-drop::after, .bg-drop.show-left .navbar .navbar-toggler-left.header-bg-drop::after, .bg-drop.show-filter .filter-collapse .navbar-toggler.header-bg-drop::after {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.bg-drop.show-right .navbar .navbar-toggler-right.filter-bg-drop::after, .bg-drop.show-left .navbar .navbar-toggler-left.filter-bg-drop::after, .bg-drop.show-filter .filter-collapse .navbar-toggler.filter-bg-drop::after {
  opacity: 1;
  visibility: visible;
}

.headline .h-title {
  color: var(--color-dark);
  font-size: var(--typo-xxl);
  line-height: 1.1em;
}
.headline .title {
  font-size: var(--typo-lg);
}

.home-tab .tabbable {
  margin: 0 -15px;
}
.home-tab .tabbable .nav-tabs {
  padding: 0 15px;
  padding-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}
.home-tab .tabbable .nav-tabs .nav-link {
  white-space: nowrap;
}
.home-tab .nav-tabs {
  border: none;
  /* one item */
}
.home-tab .nav-tabs .nav-link:not(.active) {
  opacity: 0.6;
}
.home-tab .nav-tabs .nav-item,
.home-tab .nav-tabs .nav-link {
  color: var(--color-default);
  text-align: center;
  border: none;
}
.home-tab .nav-tabs .nav-item span,
.home-tab .nav-tabs .nav-link span {
  position: relative;
}
.home-tab .nav-tabs .nav-item span::after,
.home-tab .nav-tabs .nav-link span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0;
  visibility: hidden;
}
.home-tab .nav-tabs .nav-item.show .nav-link,
.home-tab .nav-tabs .nav-link.active {
  color: var(--color-primary);
}
.home-tab .nav-tabs .nav-item.show .nav-link span::after,
.home-tab .nav-tabs .nav-link.active span::after {
  opacity: 1;
  visibility: visible;
}
.home-tab .tab-content {
  padding-top: calc(1rem - 10px);
}

.tabbable {
  margin: 0 -15px;
}

.tabbable .nav-tabs {
  padding: 0 15px;
  padding-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

.tabbable .nav-tabs .nav-link {
  white-space: nowrap;
}

.default-tab .nav-tabs {
  border: none;
}
.default-tab .nav-tabs .nav-link {
  padding: 0.8rem 1rem;
}
.default-tab .nav-tabs .nav-link:not(.active) {
  opacity: 0.6;
}
.default-tab .nav-tabs .nav-item,
.default-tab .nav-tabs .nav-link {
  position: relative;
  font-size: var(--typo-xl);
  color: var(--color-default);
  text-align: center;
  border: none;
}
.default-tab .nav-tabs .nav-item::after,
.default-tab .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-border);
  transition: all 200ms;
}
.default-tab .nav-tabs .nav-item.show .nav-link::after,
.default-tab .nav-tabs .nav-link.active::after {
  height: 3px;
  background-color: var(--color-primary);
}
.default-tab .tab-content {
  padding-top: calc(1rem - 10px);
}

.fav-btn {
  padding: 0;
  height: auto;
  line-height: 1;
}
.fav-btn .icon > span {
  color: var(--color-dark);
}
.fav-btn .icon > span.material-symbols-rounded-fill {
  color: #e92038;
}

.back-block {
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}
.back-block .link {
  position: absolute;
  left: 15px;
  top: 12px;
  z-index: 10;
  font-size: var(--typo-default);
  color: var(--color-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
}
.back-block .link .icon span {
  font-size: 22px;
}
.back-block .link .txt {
  margin-left: 0.5rem;
}
.back-block .link ~ .h-title {
  padding-left: 30px;
}
.back-block .h-title {
  font-weight: 600;
  font-size: 16px;
}

.topbar .favourite .btn .icon > span {
  color: var(--color-dark);
}
.topbar .favourite .btn .icon > span.material-symbols-rounded-fill {
  color: #e92038;
}
.topbar .favourite .txt {
  font-size: var(--typo-xs);
}
.topbar .share .btn {
  color: var(--color-primary);
}
.topbar .share .btn .txt {
  font-size: var(--typo-md);
}
.topbar .favourite,
.topbar .share {
  position: relative;
  z-index: 1020;
}
.topbar .favourite .btn,
.topbar .share .btn {
  font-size: var(--typo-xl);
  color: var(--color-default);
  padding: 0;
  height: auto;
  line-height: 1;
}
.topbar .dropdown.show .btn {
  color: var(--color-primary);
}

.cart-qty input {
  color: var(--color-default);
  background-color: transparent;
}
.cart-qty input[type=text] {
  color: var(--color-default);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  max-width: 40px;
  padding: 0;
}
.cart-qty input,
.cart-qty button {
  width: 24px;
  height: 24px;
  border: none;
}
.cart-qty .value_button {
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  padding: 0;
  min-width: unset;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 14px;
}
.cart-qty .form-control {
  width: 36px;
  text-align: center;
  padding: 0;
  color: var(--color-default);
  font-weight: 500;
  font-size: 14px;
  pointer-events: none;
}
.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-qty input[type=number] {
  -moz-appearance: textfield;
}

.qty-list {
  margin-top: 15px;
}
.qty-list .btn-add {
  margin-left: 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  min-width: inherit;
}

.detail-page .whead .title {
  font-size: var(--typo-xl);
}

.collapse-default {
  border: none;
  border-radius: 0;
}
.collapse-default .card {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}
.collapse-default .card-header {
  background: transparent;
  padding: 0.5rem;
  border-radius: 0;
  border-bottom: none;
}
.collapse-default .card-header .link {
  display: block;
  padding: 0.5rem 0;
}
.collapse-default .card-header .btn {
  width: 100%;
  text-align: left;
  height: unset;
  text-decoration: none;
  color: var(--color-dark);
}
.collapse-default .card-header .btn > .row {
  width: -moz-fit-content;
  width: fit-content;
}
.collapse-default .card-header .link:not(.collapsed),
.collapse-default .card-header .btn:not(.collapsed) {
  color: var(--color-primary);
}
.collapse-default .card-header .link:after,
.collapse-default .card-header .btn:after {
  font-family: "Material Symbols Outlined";
  content: "\e5ce";
  float: right;
  font-weight: 200;
  font-size: 30px;
  position: relative;
  right: -8px;
}
.collapse-default .card-header .link.collapsed:after,
.collapse-default .card-header .btn.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e5cf";
}
.collapse-default .card-body {
  padding-left: 1rem;
  padding-right: 1rem;
}

.total-payment .title {
  font-size: var(--typo-default);
  color: var(--color-dark);
}
.total-payment .total {
  font-size: var(--typo-xl);
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 5px;
}
.total-payment .wrapper {
  padding: 1rem;
}
.total-payment .wrapper .action {
  box-shadow: none;
  padding: 0;
}

.bank-info {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.bank-info .card {
  padding: 15px;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
}
.bank-info .bank-img {
  width: 56px;
  height: 56px;
}
.bank-info .bank-img .contain {
  padding-top: 100%;
}
.bank-info .bank-title,
.bank-info .account-name,
.bank-info .account-number {
  font-size: var(--typo-default);
  font-weight: var(--fw-normal);
  line-height: 1.4em;
}

.btn-copy {
  color: var(--color-default);
  min-width: unset;
  padding: 0;
  height: 22px;
  line-height: inherit;
  display: flex;
  align-items: center;
  opacity: 0.6;
}
.btn-copy .icon > span {
  font-size: 20px;
}
.btn-copy:hover, .btn-copy:active {
  background-color: #f4f4f5;
}
.btn-copy .txt {
  font-weight: var(--fw-light);
  margin-left: 0.25rem;
}

.attachment {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.attachment .btn {
  margin-bottom: 0;
}
.attachment .btn .icon > span {
  top: 5px;
}
.attachment .btn-input {
  padding: 0 25px;
}
.attachment .txt {
  margin-left: 0.25rem;
}
.attachment .file-input {
  visibility: hidden;
  display: none;
}
.attachment .file-uploaded {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.attachment .file-uploaded button[type=reset] {
  position: absolute;
  right: 0;
  top: 0;
  min-width: unset;
  height: 36px;
  line-height: 34px;
  color: var(--color-primary);
}
.attachment .file-uploaded .file-name {
  color: var(--color-primary);
  border-radius: 50rem;
  padding: 4px 40px 4px 20px;
  background-color: var(--color-primary-light);
}

.option-default .item-list {
  margin: 0 -5px;
}
.option-default .item-list > li {
  padding: 0 5px;
  margin-bottom: 15px;
  width: 50%;
}
.option-default .form-group {
  margin-bottom: 0;
}
.option-default .btn {
  color: var(--color-dark);
  text-align: unset;
  height: unset;
  min-height: 40px;
  line-height: 38px;
  border-color: var(--color-gray-150);
  padding: 0 15px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.option-default .btn:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}
.option-default .btn .icon {
  line-height: 1em;
}
.option-default .btn .icon > span[class*=material-symbols] {
  top: 5px;
  font-size: 20px;
}
.option-default .btn .txt .title {
  font-size: var(--typo-default);
  font-weight: var(--fw-medium);
}
.option-default .btn .txt .desc {
  font-size: var(--typo-xs);
  line-height: 22px;
  margin-bottom: 0.75rem;
}
.option-default .btn .price {
  font-size: var(--typo-md);
  margin-left: auto;
  white-space: nowrap;
}
.option-default input {
  display: none;
}
.option-default input:checked ~ .btn {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}
.option-default input:checked ~ .btn:hover {
  border-color: var(--color-primary);
}
.option-default .brand {
  width: 50px;
}
.option-default .brand ~ .txt {
  margin-left: 0.5rem;
}

.no-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  text-align: center;
  opacity: 1;
}
.no-content img {
  width: 80px;
}
.no-content .txt {
  margin-top: 10px;
}

.btn .icon ~ .txt,
.btn-link .icon ~ .txt {
  margin-left: 0.5rem;
}

.link .icon ~ .txt {
  margin-left: 0.25rem;
}

.my-coupon {
  margin-bottom: 2rem;
}
.my-coupon .btn {
  text-align: left;
  border-bottom-color: var(--color-border);
}
.my-coupon .btn .icon > span[class*=material-symbols] {
  top: 5px;
}
.my-coupon .btn .title {
  font-size: var(--typo-xl);
}
.my-coupon .btn .subtitle {
  font-size: var(--typo-md);
}
.my-coupon .btn .subtitle::after {
  font-family: "Material Symbols Outlined";
  content: "\e5cc";
  font-size: 26px;
  font-weight: 200;
  line-height: 1;
  color: var(--color-default);
  position: relative;
  top: 8px;
}
.my-coupon .btn .subtitle span[class*=material-symbols] {
  display: none;
}
.my-coupon .btn .subtitle.selected {
  color: var(--color-primary);
}
.my-coupon .btn .subtitle.selected::before {
  font-family: "Material Symbols Outlined";
  content: "\e5ca";
  font-size: 18px;
  font-weight: 300;
  color: var(--color-light);
  position: relative;
  top: 4px;
  left: -5px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  display: inline-block;
  background-color: #62AA84;
  border-radius: 50%;
}

.coupon-list .thumbnail {
  width: 117px;
  height: 117px;
  background-repeat: no-repeat;
  background-size: contain;
}
.coupon-list .thumbnail .cover {
  padding-top: 100%;
}
.coupon-list .thumbnail .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
}
.coupon-list .thumbnail .inner .title {
  font-size: 140%;
  color: var(--color-light);
}
.coupon-list .thumbnail .inner .subtitle {
  font-size: 160%;
  color: var(--color-light);
}
.coupon-list .discount .thumbnail {
  background-color: #62aa84;
  background-image: url(../img/background/bg-graphic-coupon-discount.svg);
  background-position: bottom left;
  background-size: 103px;
}
.coupon-list .free-delivery .thumbnail {
  background-color: #dbb344;
  background-image: url(../img/background/bg-graphic-coupon-discount.svg);
  background-position: bottom left;
  background-size: 103px;
}
.coupon-list .card {
  color: var(--color-default);
  text-decoration: none;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
  margin-right: 1rem;
}
.coupon-list .card .styled-coupon {
  margin-right: -1rem;
}
.coupon-list .card-body {
  padding: 0;
}
.coupon-list .inner {
  padding: 0.5rem;
}
.coupon-list .inner .title {
  font-size: var(--typo-md);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}
.coupon-list .inner .desc {
  font-size: var(--typo-sm);
  line-height: 1.1em;
  height: 3.3em;
  max-height: unset;
  -webkit-line-clamp: 3;
}
.coupon-list .inner .period {
  font-size: var(--typo-xs);
  opacity: 0.45;
}
.coupon-list .checkbox {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 1.5rem;
}
.coupon-list .checkbox .icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border);
}
.coupon-list .checkbox .icon > span[class*=material-symbols] {
  top: 1px;
  font-size: 22px;
  font-weight: 300;
  opacity: 0;
  visibility: hidden;
}
.coupon-list input {
  display: none;
}
.coupon-list input:checked ~ label .checkbox .icon {
  color: var(--color-light);
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.coupon-list input:checked ~ label .checkbox .icon > span[class*=material-symbols] {
  opacity: 1;
  visibility: visible;
}
.coupon-list .styled-coupon {
  width: 1rem;
  height: 100%;
  padding: 0.25rem 0.25rem 0.5rem;
  filter: drop-shadow(0.5rem 0 0.25rem rgba(0, 0, 0, 0.04)); /* update the shadow here */
  position: relative;
  z-index: 0;
}
.coupon-list .styled-coupon::before {
  position: absolute;
  content: "";
  top: 0;
  left: -3.75rem;
  bottom: 0;
  width: 3px;
  border-left: 3px dashed var(--color-border);
  opacity: 0.5;
}
.coupon-list .styled-coupon:after {
  content: "";
  position: absolute;
  right: 0;
  z-index: -1;
  inset: 0;
  background: var(--color-light);
  --mask: conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 50%/100% 14px;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.file-input {
  display: none;
}

.checkbox-list .item-list > li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.checkbox-list .form-group .topic {
  font-size: var(--typo-sm);
  line-height: 1.4em;
  opacity: 0.5;
}
.checkbox-list .checkbox-control .checkbox-label {
  padding-left: 18px;
}

.fixed-bottom .wrapper {
  padding: 1rem 1rem 1.5rem 1rem;
}

.fixed-bottom .app-width > .action {
  padding: 1rem 1rem 1.5rem 1rem;
}

.progress-default {
  position: relative;
}
.progress-default .progress {
  background-color: #d9d9d9;
}
.progress-default .progress-label {
  font-size: var(--typo-xs);
  font-weight: var(--fw-light);
  color: var(--color-gray-100);
  margin-bottom: 0.5rem;
}
.progress-default .progress-bar {
  background: linear-gradient(90deg, #cb9c24 0%, #7dc71f 102.3%);
  border-radius: 50rem;
}
.progress-default .progress-bar[aria-valuenow="100"] ~ .progress-success::before {
  background-color: #84c31f;
}
.progress-default .progress-success::before {
  font-family: "Material Symbols Outlined";
  position: absolute;
  content: "\e876";
  font-size: 14px;
  color: var(--color-light);
  right: 0;
  line-height: 1;
  bottom: -4px;
  width: 14px;
  height: 14px;
  background-color: var(--color-gray-150);
  border-radius: 50%;
}

.cart-note {
  font-size: 14px;
  line-height: 1.2em;
  margin-bottom: 15px;
  font-weight: 500;
  color: var(--color-primary);
}
.cart-note .row {
  margin: 0 -3px;
}
.cart-note .row > div {
  padding: 0 3px;
}
.cart-note .desc {
  color: #fff;
  margin-top: 8px;
  font-weight: normal;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 15px;
  text-align: center;
  padding: 7px 10px;
  font-size: 12px;
}
.cart-note .desc strong {
  font-weight: 500;
}
.cart-note .note {
  color: var(--color-danger);
  font-size: 11px;
  margin-top: 5px;
}

.text-policy {
  border-radius: 15px;
  border: 1px solid var(--color-border);
  padding: 15px;
  margin-bottom: 18px;
}
.text-policy p {
  line-height: 1.4em;
  margin-bottom: 10px;
}

.file-uploaded-html {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 5px;
}

.file-uploaded-html button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: var(--color-danger);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-uploaded-html button:focus {
  outline: none;
}

.file-uploaded-html button .material-symbols-outlined {
  font-size: 18px;
  top: 0 !important;
}

.file-uploaded-html .file-name img {
  max-width: inherit !important;
  width: 100%;
}

.cookie-tab .fixed-bottom {
  z-index: 2000;
}

.dealer-page {
  padding-bottom: 120px;
}
.dealer-page .whead {
  padding: 20px 0 5px 0;
  text-align: center;
}
.dealer-page .whead .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.dealer-page .whead img {
  width: 100px;
}
.dealer-page .whead .title {
  font-size: 17px;
  line-height: 1.4em;
}
.dealer-page .fixed-bottom {
  border-top: 1px solid var(--color-border);
}
.dealer-page .text-policy {
  margin-bottom: 25px;
  border: none;
  background-color: #ffe2e6;
  padding: 10px 15px;
  border-radius: 3px;
}
.dealer-page .text-policy p {
  color: var(--color-danger);
}

.js-signature canvas {
  border-radius: 3px;
}

.file-uploaded-html button {
  z-index: 200;
  top: 5px;
  right: 10px;
}

.doc-upload {
  margin: 0;
  padding: 0;
  position: relative;
}
.doc-upload .btn {
  border-style: dashed;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-upload .btn:hover {
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  background-color: transparent !important;
}
.doc-upload .upload-button {
  position: relative;
  z-index: 100;
}
.doc-upload .upload-result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.doc-upload .file-uploaded-html {
  height: 130px;
  margin: 5px 0;
}
.doc-upload .file-uploaded-show {
  position: absolute;
  top: 0;
  left: 5px;
  right: 5px;
  height: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff;
  z-index: 100;
  border-radius: 0px;
}
.doc-upload .file-uploaded-show img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  -o-object-fit: contain;
     object-fit: contain;
}

.welcome {
  padding: 15px 15px 5px 15px;
}
.welcome .title {
  line-height: 1.1em;
  font-size: 4.8vw;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-primary);
}
.welcome .desc {
  font-size: 14px;
  margin-top: 8px;
}
.welcome .desc strong {
  font-weight: 600;
}

@media (min-width: 640px) {
  .welcome .title {
    font-size: 32px;
  }
}
.hero-banner {
  padding: 15px;
  padding-bottom: 0;
}
.hero-banner .cover {
  border-radius: 15px;
  padding-top: 100%;
}
.hero-banner .swiper {
  overflow: visible;
}
.hero-banner .swiper-pagination-bullet {
  background-color: var(--color-light);
}

.wg-note .row {
  margin: 0 -7.5px;
}
.wg-note .row > div {
  padding: 0 7.5px;
}
.wg-note .wrapper {
  padding: 15px 10px 20px 10px;
  text-align: center;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4em;
  background-color: #f3f4f6;
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.6), 15px 15px 15px rgba(0, 0, 0, 0.05);
  color: var(--color-default);
}
.wg-note .wrapper .icon {
  margin-bottom: 8px;
  color: var(--color-primary);
}
.wg-note .wrapper .material-symbols-outlined {
  font-size: 36px;
}

.wg-package {
  padding: 30px 0 0 0;
}
.wg-package .whead {
  margin-bottom: -10px;
}

.wg-package-list {
  margin: 0 -15px;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.wg-package-list::-webkit-scrollbar {
  display: none;
}
.wg-package-list .item-list {
  margin-left: 15px;
  display: inline-flex;
}
.wg-package-list .item {
  margin-right: 15px;
  vertical-align: top;
}
.wg-package-list .pop {
  background-color: var(--color-danger);
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  line-height: 24px;
  width: 100px;
  text-align: center;
  position: absolute;
  top: 15px;
  left: -23px;
  transform: rotate(-45deg);
  transform-origin: center;
}
.wg-package-list .wrapper {
  width: 220px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.wg-package-list .wrapper .inner {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  padding: 20px 15px;
  border-radius: 15px;
  background-color: var(--color-primary-light);
}
.wg-package-list .wrapper .inner .name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3em;
  text-align: center;
}
.wg-package-list .wrapper .inner .price {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3em;
  text-align: center;
}
.wg-package-list .wrapper .inner .title {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.3em;
  text-align: center;
}
.wg-package-list .wrapper .inner .desc {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3em;
  opacity: 0.6;
  text-align: center;
}
.wg-package-list .wrapper .btn {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  margin-left: 20px;
  margin-right: 20px;
  height: 30px;
  border-radius: 15px;
  background-color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  line-height: 30px;
}
.wg-package-list .wrapper .note {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--color-danger);
}

.wg-overview {
  padding: 1rem 0;
  margin-bottom: 1rem;
}
.wg-overview .link {
  color: var(--color-default);
}
.wg-overview .card {
  text-align: center;
  padding: 0.4rem 0;
  box-shadow: none;
  background-color: transparent;
}
.wg-overview .row-2 .card {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.wg-overview .row-2 .card .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}
.wg-overview .row-2 .card .icon img {
  width: 15px;
}
.wg-overview .row-2 .card .rounded-circle {
  background-color: var(--color-primary-light);
}
.wg-overview .row-2 .card .txt {
  font-size: var(--typo-md);
  margin-left: 0.4rem;
}
.wg-overview .row-2 .card .txt span {
  position: relative;
  top: -1px;
  font-size: var(--typo-sm);
  color: var(--color-primary);
}
.wg-overview .row-3 .card .icon {
  color: var(--color-primary);
  width: 36px;
  height: 36px;
  margin: 0 auto;
  margin-bottom: 0.4rem;
}
.wg-overview .row-3 .card .icon img {
  width: 36px;
  height: 36px;
}
.wg-overview .row-3 .card .icon span {
  font-size: 36px;
}
.wg-overview .row-3 .card .txt {
  font-size: var(--typo-sm);
  color: var(--color-dark);
}
.wg-overview [class*=row-] + [class*=row-] {
  margin-top: 1rem;
}
.wg-overview .grid-divider {
  border-bottom: 1px solid #eaecee;
  padding-bottom: 1rem;
  margin-left: 0;
  margin-right: 0;
}

.coupon .btn {
  box-shadow: var(--box-shadow);
}

.wg-product .tab-nav {
  position: relative;
  z-index: 100;
  margin-bottom: 15px;
  padding: 0 15px;
  border-bottom: 2px solid var(--color-primary);
}
.wg-product .tab-nav li {
  width: 50%;
}
.wg-product .whead {
  position: relative;
  margin: 0;
  color: var(--color-default);
  padding: 8px 10px;
  display: block;
  border-radius: 15px 15px 0 0;
  background-color: #f3f4f6;
  opacity: 0.4;
}
.wg-product .whead.active {
  opacity: 1;
  background-color: var(--color-primary);
  color: #fff;
  position: relative;
}
.wg-product .whead .title {
  text-align: center;
  font-size: 16px;
}
.wg-product .whead .title small {
  display: block;
}

.wg-qualification {
  padding-top: 2rem;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 2rem;
}
.wg-qualification .contain {
  padding-top: 100%;
}

.wg-quote {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.wg-quote .quote {
  width: 16px;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.wg-quote .txt {
  font-size: var(--typo-default);
  color: var(--color-dark);
  line-height: 1.2em;
  margin-bottom: 0;
}
.wg-quote .divider {
  width: 100px;
}

@media (min-width: 576px) {
  .wg-qualification {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.wg-product {
  padding: 0 0 30px 0;
}

.wg-product-list .wrapper {
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  background-color: #f3f4f6;
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.6), 15px 15px 15px rgba(0, 0, 0, 0.05);
}
.wg-product-list .cover {
  width: 110px;
  height: 110px;
  border-radius: 15px;
}
.wg-product-list .inner {
  padding: 10px 0;
  margin: 0 10px 0 13px;
}
.wg-product-list .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3em;
}
.wg-product-list .desc {
  margin-top: 5px;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3em;
}
.wg-product-list .desc li {
  margin-right: 6px;
}
.wg-product-list .desc li:last-child {
  margin-right: 0;
}
.wg-product-list .desc strong {
  font-weight: normal;
}

.product-page .default-tab .nav-tabs .nav-item {
  min-width: 120px;
}
.product-page .default-tab .nav-tabs {
  margin-bottom: 0.5rem;
}
.product-page .default-tab .nav-tabs .nav-item,
.product-page .default-tab .nav-tabs .nav-link {
  font-size: var(--typo-xxl);
}
.product-page .product-list {
  margin-bottom: 1.25rem;
}
.product-page .product-item .topbar {
  margin-top: 0;
  margin-bottom: 0;
}
.product-page .product-item .subtitle {
  margin-bottom: 0.5rem;
}
.product-page.detail-page .product-detail .product-item .inner .title {
  font-size: var(--typo-xxl);
}
.product-page.detail-page .product-detail .product-item .inner .subtitle {
  font-size: var(--typo-lg);
}
.product-page.detail-page .product-detail .product-item .qty-item .price {
  font-size: var(--typo-md);
}
.product-page.detail-page .product-detail .product-item .qty-item .price span {
  font-size: var(--typo-xxl);
}
.product-page.detail-page .product-detail .product-item .qty-list .qty-item + .qty-item {
  border-top: 1px dashed var(--color-border);
}
.product-page.detail-page .product-detail .product-item .qty-list {
  margin-top: 0;
}
.product-page.detail-page .product-detail .product-item .inner {
  padding: 0 1rem;
}
.product-page.detail-page .product-detail .product-item .badge-list .btn {
  font-size: var(--typo-sm);
}
.product-page.detail-page .product-detail .tag {
  font-size: var(--typo-md);
  height: 32px;
  line-height: 30px;
}
.product-page.detail-page .product-detail .bullet-list > li {
  width: 50%;
}
.product-page.detail-page .other-product {
  padding-bottom: 1rem;
}
.product-page.detail-page .product-action .action {
  box-shadow: 0px -0.18rem 1.8rem rgba(0, 0, 0, 0.1);
  padding: 1rem 1rem 1.5rem 1rem;
}

.product-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 4px solid #f8f9fa;
  border-bottom: 4px solid #f8f9fa;
  margin-bottom: 1rem;
}

@media (min-width: 575px) {
  .product-page .default-tab .nav-tabs .nav-item {
    min-width: 181px;
  }
}
@media (min-width: 640px) {
  .product-page .default-tab .nav-tabs .nav-item {
    min-width: 202px;
  }
}
.profile-block .head {
  margin: 0 -15px 20px -15px;
  color: var(--color-light);
  background-color: var(--color-primary);
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-image: url(../img/background/bg-graphic-header.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 290px;
}
.profile-block .head .link {
  color: var(--color-light);
}
.profile-block .point .wrapper {
  display: flex;
  align-items: center;
}
.profile-block .point .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}
.profile-block .point .txt {
  font-size: var(--typo-md);
  margin-left: 0.5rem;
}
.profile-block .card {
  margin-bottom: 1rem;
}

.profile-block {
  margin-bottom: 1rem;
}
.profile-block .thumbnail {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
}
.profile-block .thumbnail .cover {
  padding-top: 100%;
}
.profile-block .title {
  font-size: var(--typo-xl);
  margin-bottom: 6px;
}
.profile-block .note {
  font-size: 12px;
  margin-top: 7px;
}
.profile-block .point.badge {
  font-size: 11px;
  color: var(--color-primary);
  font-weight: var(--fw-normal);
  padding: 4px 10px;
}

.profile-page .whead {
  padding: 1rem 0;
}
.profile-page .whead .title {
  font-size: 16px;
  font-weight: 600;
}
.profile-page .edit-img {
  text-align: center;
}
.profile-page .edit-img .link {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.profile-page .edit-img .link span {
  font-size: 1.4em;
}
.profile-page .profile-block {
  margin-bottom: 1rem;
}
.profile-page .profile-block .thumbnail {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  overflow: hidden;
}
.profile-page .profile-block .thumbnail .cover {
  padding-top: 100%;
}
.profile-page .profile-block .title {
  font-size: var(--typo-xl);
  margin-bottom: 6px;
}
.profile-page .profile-block .note {
  font-size: 12px;
  margin-top: 7px;
}
.profile-page .profile-block .point.badge {
  font-size: 11px;
  color: var(--color-primary);
  font-weight: var(--fw-normal);
  padding: 4px 10px;
}

.btn-level {
  border: none;
  height: 20px;
  line-height: 20px;
  border-radius: 10rem;
  min-width: 50px;
  display: flex;
  align-items: center;
}
.btn-level .icon {
  width: 12px;
  height: 12px;
  margin-right: 0.25rem;
}
.btn-level.btn-silver {
  color: #7c7c7c;
  background: linear-gradient(101.07deg, #d9d9d9 5.26%, #fcfcfc 40.45%, #d9d9d9 79.77%, #f9f9f9 120.48%, #d9d9d9 137.73%);
}
.btn-level.btn-gold {
  color: #816a1c;
  background: linear-gradient(101.07deg, #d4af37 5.26%, #f1db96 40.45%, #d4af37 79.77%, #fef3cf 120.48%, #d4af37 137.73%);
}

.menu-buttons {
  margin-top: -41px;
  margin-bottom: 1.5rem;
}
.menu-buttons .btn {
  font-size: var(--typo-xs);
  font-weight: var(--fw-light);
  height: calc(50px + 2rem);
  padding: 1rem 0;
}
.menu-buttons .btn .icon {
  position: relative;
  color: var(--color-primary);
  width: 24px;
  height: 24px;
  margin: 0 auto;
}
.menu-buttons .btn .badge {
  position: absolute;
  top: -0.15rem;
  right: calc(50% - 18px);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  padding: 0.1rem;
}
.menu-buttons .grid-divider > [class*=col]:nth-child(n+2):after {
  top: 23%;
  height: 54%;
}

.menu-list .item-list > li:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}
.menu-list .link {
  display: block;
  font-size: var(--typo-md);
  color: var(--color-dark);
  padding: 1rem;
}
.menu-list .link .inner {
  margin-left: 0.5rem;
}

.edit-img label {
  cursor: pointer;
}

.interest-health .btn-link .icon > span[class*=material-symbols] {
  font-size: 20px;
  top: 1px;
}

.auth-block .back-block .h-title {
  font-size: 26px;
  text-align: center;
  color: var(--color-primary);
}
.auth-block .back-block .h-desc {
  font-size: 13px;
  text-align: center;
  margin-top: 0.8rem;
  text-transform: uppercase;
}
.auth-block .form-control {
  height: 46px;
}
.auth-block .btn.btn-xl {
  height: 46px;
  line-height: 44px;
  border-radius: 3px;
}
.auth-block .or {
  margin: 2rem 1rem;
  text-align: center;
  font-size: 13px;
  position: relative;
  border-top: 2px solid var(--color-border);
}
.auth-block .or div {
  color: var(--color-gray);
  font-weight: 600;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: -1px;
  background-color: #fff;
  padding: 0 10px;
}
.auth-block .btn-line {
  background-color: #1BB71F;
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.auth-block .btn-line img {
  width: 24px;
  margin-right: 10px;
  filter: brightness(1) invert(1);
}
.auth-block .regis {
  margin-top: 2rem;
  text-align: center;
  font-size: 15px;
  color: var(--color-gray);
  font-weight: normal;
}
.auth-block .regis .link {
  color: var(--color-primary);
  font-weight: 600;
}
.auth-block .input-group-text {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 46px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.auth-block .input-group-text .material-symbols-outlined {
  font-size: 20px;
}

@media (min-width: 375px) {
  .menu-buttons .btn {
    font-size: var(--typo-sm);
  }
}
@media (min-width: 390px) {
  .menu-buttons .btn {
    font-size: var(--typo-default);
  }
}
@media (min-width: 575px) {
  .menu-buttons .btn {
    font-size: var(--typo-md);
  }
}
.credit-page:not(.detail-page) .default-body {
  padding-top: 1.5rem;
}
.credit-page.detail-page .default-body {
  padding-bottom: 2rem;
}
.credit-page .nav-tabs .nav-item {
  width: 50%;
}
.credit-page .default-tab .tab-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.credit-page .other-product .product-list .product-slide .swiper-slide {
  width: 308px;
}
.credit-page .default-tab {
  overflow: hidden;
}
.credit-page .alert-default {
  height: calc(100vh - 184px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.credit-page .alert-default .alert-heading {
  font-size: var(--typo-xxl);
}
.credit-page .alert-default .icon.rounded-circle {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.credit-page .alert-default .icon.rounded-circle span {
  font-size: 40px;
}

.topup-page {
  min-height: calc(100vh - 160px);
}

.credit-block {
  margin-bottom: 2rem;
}
.credit-block .card {
  margin-bottom: 1rem;
  box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.1);
}
.credit-block .link {
  color: var(--color-dark);
}
.credit-block .whead .title {
  color: var(--color-primary);
}
.credit-block .whead .title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-light);
  width: 32px;
  height: 32px;
}
.credit-block .whead .title .icon > img {
  width: 21px;
}
.credit-block .card {
  font-size: var(--typo-md);
  padding: 1.5rem 1rem;
}
.credit-block .card span {
  font-size: var(--typo-xl);
}
.credit-block .btn-primary .icon > img {
  width: 26px;
  height: 26px;
}
.credit-block .history {
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}
.credit-block .history .whead {
  margin-bottom: 0.5rem;
}
.credit-block .history .whead .title {
  color: var(--color-dark);
}
.credit-block .history .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.credit-block .history .icon > img {
  width: 26px;
}
.credit-block .history .pay .icon {
  color: var(--color-secondary);
  background-color: var(--color-secondary-light);
}
.credit-block .history .topup .icon {
  background-color: var(--color-primary-light);
}
.credit-block .history .item-wrapper {
  padding: 1rem 0;
}
.credit-block .history .item-wrapper .title,
.credit-block .history .item-wrapper .value {
  font-size: var(--typo-md);
  color: var(--color-dark);
  font-weight: var(--fw-medium);
}
.credit-block .history .item-wrapper .subtitle {
  font-size: var(--typo-sm);
}
.credit-block .history .item-wrapper .col > .row + .row {
  margin-top: 0.5rem;
}
.credit-block .history .status {
  font-size: var(--typo-sm);
}
.credit-block .history .status.pending {
  color: var(--color-secondary);
}
.credit-block .history .status.succeed {
  color: var(--color-primary);
}
.credit-block .history .status.cancel {
  color: var(--color-danger);
}
.credit-block .history .item-list > li + li .item-wrapper {
  border-top: 1px solid var(--color-border);
  margin-top: -1px;
}

.product-credit-list .item-list > li {
  margin-bottom: 1.25rem;
}

.product-credit-item .card {
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
}
.product-credit-item .inner {
  padding: 1rem;
}
.product-credit-item .inner .title {
  font-size: var(--typo-xl);
  color: var(--color-dark);
}
.product-credit-item .thumbnail {
  background-color: #f4f4f5;
}
.product-credit-item .thumbnail .cover,
.product-credit-item .thumbnail .contain {
  padding-top: 100%;
}

.amount-topup {
  min-height: calc(100vh - 420px);
  /* When the checkbox is checked, add a blue background */
}
.amount-topup .item-list {
  margin: 0 -7.5px;
}
.amount-topup .item-list > li {
  width: 50%;
  padding: 0 7.5px;
  margin-bottom: 15px;
}
.amount-topup .form-group {
  margin-bottom: 0;
}
.amount-topup .btn {
  color: var(--color-dark);
  border-color: #62aa84;
  margin-bottom: 0;
}
.amount-topup .btn:hover {
  color: var(--color-light);
  border-color: var(--color-primary);
}
.amount-topup input {
  display: none;
}
.amount-topup input:checked ~ .btn {
  color: var(--color-dark);
  background-color: var(--color-primary-light);
}

.order-history-page {
  min-height: calc(100vh - 78px);
  padding-bottom: 2rem;
}
.order-history-page .default-tab .nav-tabs .nav-item {
  margin-left: 10px;
}
.order-history-page .default-tab .nav-tabs .nav-item:after {
  display: none;
}
.order-history-page .default-tab .nav-tabs .nav-item:first-child {
  margin-left: 15px;
}
.order-history-page .default-tab .nav-link {
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  opacity: 1 !important;
}
.order-history-page .default-tab .nav-link:after {
  display: none;
  width: auto;
  left: 15px;
  right: 15px;
}
.order-history-page .default-tab .nav-link.active {
  background-color: var(--color-primary);
  color: #fff;
}
.order-history-page .default-tab .nav-link.active:after {
  display: none;
  height: 4px;
}
.order-history-page .default-tab .tab-content {
  padding-top: 10px;
}
.order-history-page .alert-default .alert-success .card-header {
  padding: 0.719rem 0.5rem;
  background-color: var(--color-gray-200);
}
.order-history-page .alert-default .alert-success .card-header .btn {
  color: var(--color-primary);
  display: flex;
  align-items: center;
}
.order-history-page .alert-default .alert-success .card-header .btn:after {
  position: absolute;
  right: 0;
}
.order-history-page .alert-default .alert-success .card-header .btn .alert-heading {
  margin-left: 0.5rem;
  line-height: 1;
  position: relative;
  top: 2px;
}
.order-history-page .alert-default .alert-success .card-body {
  background-color: var(--color-gray-200);
}
.order-history-page .alert-default .alert-secondary {
  background-color: var(--color-gray-200);
}
.order-history-page .alert-default .tracking-no {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 0.2rem;
}
.order-history-page .alert-default .tracking-no .btn-copy {
  height: 34px;
  line-height: 32px;
  border-color: transparent;
  background-color: var(--color-light);
}
.order-history-page .alert-default .tracking-no .btn-copy .icon {
  display: block;
  width: unset;
  height: unset;
}
.order-history-page .alert-default .tracking-no .btn-copy .icon > span {
  top: 5px;
}
.order-history-page .order-list {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.order-history-page .order-list .card {
  border: 1px solid var(--color-border);
  border-radius: 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--color-default);
}
.order-history-page .order-list .card-body {
  padding: 15px;
}
.order-history-page .order-list .note {
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
  color: var(--color-danger);
  font-size: 11px;
  text-align: right;
  line-height: 1.4em;
}
.order-history-page .order-list .link {
  color: var(--color-default);
  font-size: var(--typo-sm);
  font-weight: var(--fw-light);
}
.order-history-page .order-list .item-list > li + li {
  margin-top: 15px;
}
.order-history-page .order-list .order-no {
  font-size: var(--typo-default);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}
.order-history-page .order-list .order-status.waiting .btn {
  color: var(--color-secondary-dark);
  background-color: var(--color-secondary-light);
}
.order-history-page .order-list .order-status.success .btn {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}
.order-history-page .order-list .order-status.cancelled .btn {
  color: var(--color-gray);
  background-color: var(--color-gray-200);
}
.order-history-page .order-list .order-total {
  font-size: var(--typo-md);
}
.order-history-page .order-list .order-price {
  font-size: var(--typo-xl);
  font-weight: 600;
  color: var(--color-primary);
}
.order-history-page .order-list .order-total,
.order-history-page .order-list .order-timestamp {
  color: var(--color-dark);
}
.order-history-page .order-list .order-timestamp .table {
  width: 180px;
}
.order-history-page .order-list .order-timestamp .table td {
  padding: 0 10px;
  border: none;
}
.order-history-page .order-list .order-timestamp strong {
  font-weight: 500;
}
.order-history-page .order-list .order-deliver-date .material-symbols-outlined {
  font-size: 1.1em;
  opacity: 0.8;
  margin-right: 3px;
}
.order-history-page .order-list .order-deliver-date .txt {
  font-size: 12px;
}
.order-history-page .order-list .icon span {
  font-size: 20px;
}
.order-history-page .order-list .icon img {
  width: 20px;
  filter: grayscale(1) brightness(1.25);
}
.order-history-page .wait2pay-alert .alert {
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.order-history-page .wait2pay-alert .alert-heading {
  font-size: var(--typo-lg);
  font-weight: var(--fw-medium);
}
.order-history-page .wait2pay-alert .title {
  font-size: var(--typo-xs);
  text-align: right;
}
.order-history-page .wait2pay-alert .desc {
  font-size: var(--typo-sm);
}
.order-history-page .wait2pay-alert .order-price {
  font-size: var(--typo-xxl);
}
.order-history-page .alert-cancelled {
  background-color: var(--color-gray-200);
}
.order-history-page .alert-cancelled .icon {
  background: var(--color-gray-150);
}
.order-history-page .alert-cancelled .icon span {
  font-size: 22px;
}
.order-history-page .alert-cancelled .alert-heading {
  font-size: var(--typo-lg);
}
.order-history-page .alert-cancelled .timestamp {
  font-size: var(--typo-sm);
  font-weight: var(--fw-light);
}
.order-history-page .order-detail .order-deliver {
  margin-bottom: 0.5rem;
}
.order-history-page .order-detail .icon {
  color: var(--color-primary);
}
.order-history-page .order-detail .icon ~ .txt {
  margin-left: 0.5rem;
}
.order-history-page .order-detail .order-address {
  margin-bottom: 2rem;
}
.order-history-page .order-detail .order-address [class*=address-] {
  line-height: 1.4em;
}
.order-history-page .order-detail .action {
  text-align: center;
}
.order-history-page .order-detail .action .btn-link {
  font-size: var(--typo-md);
  color: var(--color-gray-100);
}
.order-history-page .order-detail .action .btn-primary {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.order-history-page .styled-receipt {
  width: 100%;
  padding: 1rem 1rem 2rem;
  filter: drop-shadow(0 1rem 0.5rem rgba(0, 0, 0, 0.04)); /* update the shadow here */
  position: relative;
  z-index: 1;
}
.order-history-page .styled-receipt:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--color-light);
  --mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/25px 100%;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.order-history-page .order-product-list {
  background-color: var(--color-gray-200);
  box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.08);
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
}

.order-history .order-timeline {
  padding-left: 0.5rem;
}

.order-timeline .item {
  position: relative;
  padding-left: 1em;
}
.order-timeline .item .title {
  font-size: var(--typo-md);
  color: var(--color-primary);
}
.order-timeline .item .desc {
  font-size: var(--typo-xs);
  font-weight: var(--fw-light);
}
.order-timeline .item::before {
  position: absolute;
  content: "";
  top: 0.24em;
  left: 0;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--color-primary);
  border-radius: 50%;
  z-index: 1;
}
.order-timeline .item:not(:last-child) {
  padding-bottom: 1rem;
}
.order-timeline .item:not(:last-child)::after {
  position: absolute;
  content: "";
  top: 0.24em;
  left: calc(0.3em - 1px);
  bottom: -0.24em;
  width: 1px;
  background-color: var(--color-dark);
  opacity: 0.2;
}
.order-timeline .item:not(.active) .title {
  color: var(--color-dark);
  opacity: 0.35;
}
.order-timeline .item:not(.active) .timestamp {
  display: none;
}
.order-timeline .item:not(.active)::before {
  background-color: var(--color-dark);
  opacity: 0.35;
}

.order-detail .order-history-page {
  margin: 5px 0 10px 0;
}
.order-detail .order-history-page .order-list .order-status .btn {
  width: 100%;
  height: 40px;
  line-height: 38px;
  font-size: 16px;
}
.order-detail .cart-block {
  margin-bottom: 30px;
}
.order-detail .cart-block .cart-group {
  padding: 0;
}
.order-detail .cart-block .scroll-wrapper {
  min-height: inherit;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.order-detail .cart-qty .value_button {
  display: none;
}
.order-detail .cart-list .product-item .btn-delete {
  display: none;
}
.order-detail .cart-list .product-item {
  border: 1px solid var(--color-border);
  background-color: transparent;
  box-shadow: none;
}
.order-detail .cart-qty input[type=number] {
  border: 1px solid var(--color-border);
  pointer-events: none;
}

.earned-points {
  margin-top: 3rem;
  background-color: transparent;
}
.earned-points .card {
  background-color: transparent;
}
.earned-points .card-body {
  padding-top: 1.5rem;
  padding-bottom: 0;
}
.earned-points .icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: var(--color-primary-light);
}
.earned-points .title {
  font-size: var(--typo-md);
}
.earned-points .points {
  font-size: var(--typo-xl);
  color: var(--color-primary);
}

.order-product-list {
  border-radius: 15px;
  border: 1px solid var(--color-primary-light);
  padding: 15px;
}
.order-product-list .card {
  box-shadow: none;
}
.order-product-list .card-header {
  padding: 0.5rem;
  border-radius: 0;
  border-bottom: none;
}
.order-product-list .card-header .btn {
  font-size: var(--typo-lg);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}
.order-product-list .card-header .btn:not(.collapsed) {
  color: var(--color-dark);
}
.order-product-list .stock-product-list .card-header {
  background-color: var(--color-secondary-light);
}
.order-product-list .send-product-list .card-header {
  background-color: var(--color-primary-light);
}
.order-product-list .thumbnail {
  width: 58px;
  height: 58px;
}
.order-product-list .thumbnail .cover {
  padding-top: 100%;
}
.order-product-list .product-item .checkbox-control {
  margin-top: 1.2rem;
}
.order-product-list .product-item .inner {
  padding: 0;
  margin-left: 10px;
}
.order-product-list .product-item .title {
  color: var(--color-dark);
  font-size: var(--typo-md);
  font-weight: var(--fw-medium);
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
}
.order-product-list .product-item .amount {
  margin-bottom: 0.5rem;
}
.order-product-list .product-item .price {
  font-size: var(--typo-md);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  padding: 3px 0;
}
.order-product-list .product-group {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.order-product-list .product-group:last-child {
  margin-bottom: 0;
}
.order-product-list .product-group .product-item {
  list-style: none;
}
.order-product-list .product-group .product-item + .product-item {
  margin-top: 1rem;
}
.order-product-list .styled-receipt {
  margin-bottom: -3rem;
}

.order-summary .card-body > .row + .row {
  margin-top: 1rem;
}
.order-summary .title,
.order-summary .price,
.order-summary .desc {
  font-size: var(--typo-default);
  color: var(--color-dark);
}
.order-summary .title small {
  display: block;
  color: var(--color-primary);
  margin-top: 7px;
}
.order-summary .net-balance .title,
.order-summary .net-balance .price {
  font-size: var(--typo-lg);
  font-weight: 600;
  color: var(--color-primary);
}
.order-summary .payment .desc {
  font-weight: var(--fw-medium);
}
.order-summary .payment .title,
.order-summary .transaction-date .title {
  font-weight: var(--fw-medium);
}

@media (max-width: 360px) {
  .wait2pay-alert .title {
    text-align: unset;
  }
}
.search-product-page .card-body {
  padding: 1rem;
}
.search-product-page .product-item {
  margin-bottom: 1.25rem;
}
.search-product-page .product-item .qty-item .price {
  padding: 2px 0;
}
.search-product-page .product-item .card-body {
  padding: 1rem;
}
.search-product-page .quantity {
  padding: 0 5px;
}
.search-product-page .quantity input[type=text] {
  max-width: 40px;
  padding: 0 4px;
}

.checkout-page .whead .title {
  font-size: 16px;
}
.checkout-page .default-body {
  padding-bottom: 2rem;
}
.checkout-page .order-product-list {
  margin-bottom: 5rem;
}
.checkout-page .link {
  color: var(--color-primary);
}
.checkout-page .alert-default .alert:not(.alert-secondary) .icon.rounded-circle {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.checkout-page .alert-default .alert:not(.alert-secondary) .icon.rounded-circle > span[class*=material-symbols] {
  font-size: 30px;
}
.checkout-page .alert-default .alert-heading {
  margin-top: 1rem;
}
.checkout-page .alert-default .alert-secondary {
  background-color: var(--color-gray-200);
}
.checkout-page .alert-default .alert-warning {
  color: var(--color-default);
}

.shopping-status {
  text-align: center;
  padding: 1rem 0;
  margin-bottom: 1rem;
}
.shopping-status .item {
  position: relative;
}
.shopping-status .item .title {
  margin-top: 0.5rem;
  font-size: var(--typo-sm);
  font-weight: normal;
}
.shopping-status .item .icon {
  width: 30px;
  height: 30px;
  margin: 0 auto;
  background-color: var(--color-light);
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.shopping-status .item .icon > img {
  height: 16px;
  margin: 0 auto;
}
.shopping-status .item .icon span {
  color: var(--color-primary);
}
.shopping-status .item .icon > span[class*=material-symbols] {
  font-size: 22px;
  top: 0;
}
.shopping-status .item + .item::before {
  position: absolute;
  content: "";
  top: 15px;
  left: -50%;
  height: 1px;
  width: 100%;
  background-color: var(--color-border);
  z-index: 0;
}
.shopping-status .item.active .icon {
  background-color: var(--color-primary);
}
.shopping-status .item.active .icon > img {
  filter: grayscale(1) invert(1) brightness(2);
}
.shopping-status .item.active .icon span {
  color: var(--color-light);
}

.htg-product {
  margin-bottom: 1rem;
}

.delivery-address {
  margin-bottom: 1.5rem;
}
.delivery-address .add-address {
  font-size: var(--typo-default);
  color: var(--color-default);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  height: auto;
  line-height: 40px;
}
.delivery-address .add-address .icon > span[class*=material-symbols] {
  top: 5px;
  font-size: 20px;
  color: var(--color-primary);
}
.delivery-address .link {
  color: var(--color-primary);
}
.delivery-address .change-address {
  font-size: var(--typo-sm);
}
.delivery-address .change-address .icon > span[class*=material-symbols] {
  top: 2px;
  font-size: 18px;
}
.delivery-address .address-detail {
  font-size: var(--typo-default);
  font-weight: normal;
  line-height: 1.4em;
  margin-bottom: 15px;
}

.type-transport {
  margin-bottom: 1rem;
}

.delivery-date {
  margin-bottom: 1.5rem;
}
.delivery-date .control-label {
  font-size: var(--typo-default);
}

.add-address-modal .fixed-bottom .modal-footer {
  width: auto;
  margin: 0.5rem;
}
.add-address-modal .my-location {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-primary);
  font-size: var(--typo-sm);
  font-weight: var(--fw-medium);
}
.add-address-modal .my-location .icon > span[class*=material-symbols] {
  font-size: 20px;
  font-weight: 400;
}
.add-address-modal .checkbox-control {
  top: -2px;
}

.change-address-modal .delivery-address {
  margin-bottom: 1rem;
}
.change-address-modal .delivery-address .add-address {
  border: none;
  background-color: var(--color-gray-200);
  height: 42px;
  line-height: 42px;
}
.address-modal .scroll-wrapper {
  max-height: calc(100vh - 168px);
  padding-right: 1rem;
  padding-bottom: 1rem;
  margin-right: 0;
}

.map-modal .mapouter .map-text {
  position: relative;
  font-size: var(--typo-default);
  line-height: 1.4em;
  padding-left: 28px;
  margin: 0 1rem;
}
.map-modal .mapouter .map-text .icon {
  position: absolute;
  top: 15px;
  left: 0;
}

.address-options input {
  display: none;
}
.address-options input:checked ~ label {
  color: var(--color-dark);
  background-color: var(--color-primary-light);
}
.address-options input:checked ~ label .card {
  border-color: transparent;
}
.address-options label {
  margin: 0;
}
.address-options .form-group {
  margin-bottom: 1rem;
}
.address-options .title {
  font-size: var(--typo-md);
  font-weight: 500;
}
.address-options label {
  font-size: var(--typo-md);
  color: var(--color-dark);
  text-align: unset;
  padding: 0;
  height: unset;
  line-height: 1.4em;
  border: none;
  border-radius: 15px;
}
.address-options label .card {
  background-color: transparent;
  border-radius: 15px;
  border-color: var(--color-border);
}
.address-options label .card-body {
  padding: 15px;
}
.address-options .address-detail {
  margin-top: 10px;
  font-size: var(--typo-default);
  font-weight: normal;
}
.address-options .address-detail > div {
  line-height: 1.4em;
}
.address-options .address-detail .name {
  margin-bottom: 0;
}
.address-options .edit-address {
  font-size: var(--typo-sm);
  color: var(--color-primary);
}
.address-options .edit-address .icon span {
  font-size: 18px;
}
.address-options input:not(:checked):hover ~ .btn {
  color: var(--color-light);
}
.address-options input:not(:checked):hover ~ .btn .icon img {
  filter: grayscale(1) invert(1) brightness(2);
}
.address-options input:not(:checked):hover ~ .btn .edit-address {
  color: var(--color-light);
}
.address-options .ad-btn {
  display: none;
  visibility: hidden;
  opacity: 0;
}
.address-options .address-default .ad-btn {
  display: block;
  visibility: visible;
  opacity: 1;
}

.delivery-information {
  padding: 15px;
  border-radius: 15px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.delivery-information .icon {
  margin-right: 10px;
}
.delivery-information .icon span {
  top: 0 !important;
  font-size: 22px;
  float: left;
}

.order-summary .delivery-information > div.row:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.order-summary .delivery-information > .row + .row {
  margin-top: 0 !important;
}
.order-summary .delivery-information .title {
  color: var(--color-primary);
}

.payment-type .whead .title {
  font-size: var(--typo-xl);
}
.payment-type .link {
  font-size: var(--typo-md);
}
.payment-type .option-default .btn .txt .desc {
  margin-bottom: 0;
}
.payment-type .btn .txt {
  position: relative;
  line-height: 1em;
  padding: 4px 0;
}
.payment-type .btn .txt + .txt {
  margin-left: 1rem;
  padding-left: 1rem;
}
.payment-type .btn .txt + .txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 1px;
  background-color: var(--color-primary);
}
.payment-type .payment-credit .title {
  color: var(--color-dark);
}

.alert-point {
  font-size: var(--typo-md);
}

.pickup-at-hub {
  margin-bottom: 2rem;
}
.pickup-at-hub .hub-nearme .form-group {
  margin-bottom: 0.5rem;
}

.hub-address {
  margin-bottom: 0.5rem;
}
.hub-address .link {
  color: var(--color-primary);
}
.hub-address .address-detail {
  font-size: var(--typo-md);
  font-weight: var(--fw-light);
  line-height: 1.4em;
}
.hub-address .address-detail .title {
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.total-payment.fixed-bottom,
.fixed-bottom {
  z-index: 1050;
}

.total-payment .app-width {
  overflow: visible;
  border-top: 1px solid var(--color-border);
  box-shadow: -15px -15px 15px rgba(255, 255, 255, 0.6), 15px 15px 15px rgba(0, 0, 0, 0.1);
}

.contact-line .link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-align: center;
  background-color: #00C200;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}
.contact-line strong {
  display: block;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 5px;
}
.contact-line .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.contact-line .icon img {
  width: 30px;
  filter: brightness(1) invert(1);
}

.my-coupon-page .default-body .container-fluid {
  min-height: calc(100vh - 220px);
}
.my-coupon-page .coupon-list .item-list > li {
  margin-bottom: 1rem;
}
.my-coupon-page .coupon-list .styled-coupon {
  width: 4.75rem;
}
.my-coupon-page .coupon-list .styled-coupon::before {
  left: 0;
}

.no-coupon {
  text-align: center;
}
.no-coupon .card {
  height: calc(100vh - 300px);
  box-shadow: none;
  justify-content: center;
}
.no-coupon .card .graphic img {
  width: 111px;
}
.no-coupon .card .desc {
  margin-top: 1.5rem;
}

@media (max-width: 375px) {
  .my-coupon-page .coupon-list .styled-coupon {
    width: 2.5rem;
  }
}
@media (min-width: 578px) {
  .no-coupon .card .graphic img {
    width: 140px;
  }
}
.my-stock-page .default-body {
  padding-top: 1rem;
  margin-bottom: 3rem;
}
.my-stock-page .product-item .card-body {
  padding: 1rem;
}
.my-stock-page .product-item .qty-item .price {
  padding: 2px 0;
}
.my-stock-page .product-item .stock-total {
  text-align: center;
  line-height: 0.8em;
}
.my-stock-page .product-list.not-specified .product-item .thumbnail img {
  transform: scale(0.45);
}
.my-stock-page .product-list.not-specified .product-item .title {
  font-size: var(--typo-xl);
  font-weight: var(--fw-normal);
}
.my-stock-page .product-list.not-specified .qty-list.item-list {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.my-stock-page .product-list.not-specified .qty-list.item-list > li {
  padding-top: 0;
  padding-bottom: 0;
}
.my-stock-page .product-list.not-specified .qty-list.item-list > li + li {
  padding-left: 1rem;
  margin-left: 1rem;
  border-left: 1px solid var(--color-border);
}
.my-stock-page .product-list.not-specified .notify {
  min-width: 80px;
  margin-top: 0.5rem;
}
.my-stock-page .quantity {
  padding: 0 5px;
}
.my-stock-page .quantity input[type=text] {
  max-width: 40px;
  padding: 0 4px;
}
.my-stock-page .default-tab .nav-tabs .nav-item {
  min-width: 180px;
}
.my-stock-page .default-tab .tab-content {
  padding-top: 1rem;
}

.stock-total-box {
  margin-bottom: 1.25rem;
}
.stock-total-box .card {
  background-color: var(--color-gray-200);
}
.stock-total-box .card .stock-total {
  text-align: center;
}
.stock-total-box .card .title {
  font-size: var(--typo-lg);
}
.stock-total-box .card .icon img {
  width: 22px;
}
.stock-total-box .card-body {
  padding: 0.75rem 1rem;
}

@media (min-width: 390px) {
  .stock-total-box .card .stock-total {
    padding: 0 1rem;
  }
}
@media (min-width: 420px) {
  .my-stock-page .default-tab .nav-tabs .nav-item {
    min-width: 250px;
  }
}
@media (min-width: 578px) {
  .my-stock-page .default-tab .nav-tabs .nav-item {
    min-width: 305px;
  }
}
.payment-form-page .default-body {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.favorite-page .default-body {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.redeem-page.detail-page .redeem-item .btn.btn-primary {
  margin-top: 0;
}
.redeem-page.detail-page .redeem-item .topbar {
  margin-bottom: 1rem;
}
.redeem-page.detail-page .redeem-item .topbar .btn {
  font-size: var(--typo-lg);
  line-height: 28px;
  height: 30px;
  margin-top: 0;
}
.redeem-page.detail-page .redeem-item .card-body .title {
  font-size: var(--typo-xxl);
}
.redeem-page.detail-page .redeem-item .card-body .period {
  font-size: var(--typo-md);
}
.redeem-page.detail-page .progress-default .progress-success::before {
  font-size: 20px;
  bottom: -7px;
  width: 20px;
  height: 20px;
}
.redeem-page .whead .link {
  font-size: var(--typo-md);
  color: var(--color-primary);
}
.redeem-page .whead .link .icon > span[class*=material-symbols] {
  top: 3px;
  font-size: 22px;
}
.redeem-page .category .nav-tabs .nav-link {
  padding-left: 1.47rem;
  padding-right: 1.47rem;
}
.redeem-page .detail {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.redeem-page .detail .whead .title {
  font-size: var(--typo-lg);
  font-weight: var(--fw-nomal);
}

.redeem-topbar {
  color: var(--color-light);
  padding: 2rem;
  margin-bottom: 2rem;
  background-color: var(--color-primary);
  background-image: url(../img/background/bg-graphic-header.svg);
  background-repeat: no-repeat;
  background-position: 0 -20px;
  background-size: 80%;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
.redeem-topbar .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.redeem-topbar .title {
  font-size: var(--typo-md);
}
.redeem-topbar .point {
  font-size: var(--typo-md);
}
.redeem-topbar .point span {
  font-size: 32px;
}

.redeem-list.item-list {
  margin: 0 -0.5rem;
}
.redeem-list.item-list > li {
  width: 50%;
  padding: 0 0.5rem;
}

.redeem-item {
  margin-bottom: 1.25rem;
}
.redeem-item .cover {
  padding-top: 80%;
}
.redeem-item .thumbnail {
  background-color: #f4f4f5;
}
.redeem-item .thumbnail .topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.redeem-item .thumbnail .topbar {
  padding: 1rem;
  padding-bottom: 0;
}
.redeem-item .card-body {
  padding: 1rem;
}
.redeem-item .card-body .title {
  font-size: var(--typo-md);
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}
.redeem-item .card-body .period {
  font-weight: var(--fw-light);
}
.redeem-item .card-body .progress-default {
  margin-top: 1rem;
}
.redeem-item .card-body .btn.btn-primary {
  margin-top: 1.25rem;
}

@media (max-width: 320px) {
  .redeem-list.item-list > li {
    width: 100%;
  }
}
@media (min-width: 390px) {
  .redeem-page .category .nav-tabs .nav-link {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 576px) {
  .redeem-page .category .nav-tabs .nav-link {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-width: 640px) {
  .redeem-page .category .nav-tabs .nav-link {
    padding-left: 3.42rem;
    padding-right: 3.42rem;
  }
}
.address-page .default-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.address-page .default-body .gmap_canvas,
.address-page .default-body .gmap_iframe {
  height: calc(100vh - 365px);
}
.address-page .my-address {
  margin-top: 1rem;
}

.no-address .alert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 300px);
}
.no-address .alert-default .alert .icon.rounded-circle {
  color: var(--color-gray-100);
  width: 89px;
  height: 89px;
  margin: 0 auto;
}
.no-address .alert-default .alert .icon.rounded-circle > span[class*=material-symbols] {
  font-size: 50px;
  font-weight: 300;
}
.no-address .alert-default .alert-heading {
  font-size: var(--typo-lg);
  font-weight: var(--fw-light);
  color: var(--color-dark);
  margin-top: 1.5rem;
  margin-bottom: 0;
}
.no-address .alert-default .alert-heading ~ div {
  margin-top: 1.5rem;
}

.link.my-location {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-primary);
  font-size: var(--typo-sm);
  font-weight: var(--fw-medium);
}
.link.my-location .icon > span[class*=material-symbols] {
  font-size: 20px;
  font-weight: 400;
}
.link.my-location:hover {
  opacity: 0.75;
}

.my-address .title {
  font-size: var(--typo-md);
}
.my-address .card {
  font-size: var(--typo-md);
  color: var(--color-dark);
  padding: 0;
  line-height: 1.4em;
  background-color: transparent;
  box-shadow: none;
}
.my-address .card-body {
  padding: 1.25rem 1rem;
}
.my-address .edit-address {
  font-size: var(--typo-sm);
  color: var(--color-primary);
}
.my-address .edit-address .icon span {
  font-size: 18px;
}
.my-address .address-detail .name {
  margin-bottom: 0.25rem;
}
.my-address .ad-btn {
  display: none;
  visibility: hidden;
  opacity: 0;
}
.my-address .address-default .ad-btn {
  display: block;
  visibility: visible;
  opacity: 1;
}
.my-address .item-list > li {
  border-top: 1px solid var(--color-border);
}
.my-address .item-list > li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.select-address .btn {
  font-size: var(--typo-default);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-color: transparent;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 42px;
  border-radius: 3px;
  line-height: 1.4em;
  padding: 10px 10px;
}
.select-address .btn span {
  margin-right: 5px;
  font-size: 20px;
}

.mapouter {
  position: relative;
  width: 100%;
}

.gmap_canvas {
  overflow: hidden;
  background: none !important;
  width: 100%;
  min-height: 400px;
  height: calc(100dvh - 320px);
  position: relative;
}
.gmap_canvas .gmap_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mapouter .map-text {
  font-size: var(--typo-md);
  padding: 1rem 0;
  line-height: 1.2em;
}
.mapouter .map-text .icon {
  width: 22px;
}
.mapouter .select-address {
  padding: 1rem;
}
.mapouter .select-address .btn {
  width: 38px;
  height: 38px;
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: center;
}

.faq-page .default-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.about-page .default-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.blog-page .default-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.blog-page .home-tab .tabbable .nav-tabs {
  justify-content: center;
}
.blog-page .whead {
  margin-bottom: 25px;
}
.blog-page .blog-nav {
  margin-bottom: 25px;
  margin-left: -15px;
  margin-right: -15px;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.blog-page .blog-nav::-webkit-scrollbar {
  display: none;
}
.blog-page .blog-nav li {
  margin-left: 10px;
}
.blog-page .blog-nav li:first-child {
  margin-left: 15px;
}
.blog-page .blog-nav .nav-list {
  display: inline-flex;
  vertical-align: top;
  padding-right: 15px;
}
.blog-page .blog-nav .link {
  display: block;
  width: 140px;
  height: 90px;
  background-color: var(--color-primary-light);
  padding: 15px;
  border-radius: 15px;
}
.blog-page .blog-nav .link .icon {
  background-color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.blog-page .blog-nav .link .icon .material-symbols-outlined {
  font-size: 18px;
  top: 0;
}
.blog-page .blog-nav .link .title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}
.blog-page .blog-nav .link.active {
  background-color: var(--color-primary);
}
.blog-page .blog-nav .link.active .icon {
  color: var(--color-primary);
}
.blog-page .blog-nav .link.active .title {
  color: #fff;
}
.blog-page .blog-list li {
  margin-bottom: 15px;
}
.blog-page .blog-list .cover {
  width: 110px;
  height: 110px;
  overflow: hidden;
}
.blog-page .blog-list .inner {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-page .blog-list .title {
  color: var(--color-default);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4em;
}
.blog-page .blog-list .create {
  margin-top: 15px;
  color: var(--color-default);
  opacity: 0.4;
  font-size: 12px;
  font-weight: 500;
}

.detail-cover {
  margin: 0 -15px 25px -15px;
}

.whead .create {
  margin-top: 15px;
  margin-bottom: 15px;
  color: var(--color-default);
  opacity: 0.4;
  font-size: 12px;
  font-weight: 500;
}

.notification-page .default-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.noti-list .item-list > li + li {
  border-top: 1px solid var(--color-border);
}
.noti-list .link {
  color: var(--color-default);
}
.noti-list .noti-icon .badge {
  display: none;
  position: absolute;
  top: 0;
  right: calc(50% - 0.8rem);
  font-size: 0;
  padding: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.noti-list .icon {
  color: var(--color-primary);
  width: 34px;
  height: 34px;
  background-color: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
}
.noti-list .icon > img {
  width: 20px;
}
.noti-list .icon span,
.noti-list .icon img {
  opacity: 0.55;
  filter: grayscale(1);
}
.noti-list .title {
  font-size: var(--typo-md);
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
.noti-list .desc {
  font-size: var(--typo-sm);
  font-weight: var(--fw-light);
}
.noti-list .card {
  box-shadow: none;
}
.noti-list .card-body {
  padding: 0.75rem 0.5rem;
}
.noti-list .new-noti .icon {
  background-color: var(--color-primary-light);
}
.noti-list .new-noti .title {
  color: var(--color-primary);
}
.noti-list .new-noti span,
.noti-list .new-noti img {
  opacity: 1;
  filter: none;
}
.noti-list .new-noti .noti-icon .badge {
  display: block;
}

.pdpa-page .default-body {
  padding-top: 1rem;
}

.guest-block {
  margin-bottom: 1rem;
}

@media (min-width: 1200px) {
  .container {
    max-width: inherit;
    width: 1210px;
  }
}
@media (max-width: 1600px) {
  .container {
    max-width: inherit;
    width: 1210px;
  }
}
@media (max-width: 1440px) {
  .container {
    max-width: inherit;
    width: 1210px;
  }
}
@media (max-width: 1199px) {
  .container {
    max-width: inherit;
    width: 970px;
  }
}
@media (max-width: 991px) {
  .container {
    max-width: inherit;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .container {
    max-width: inherit;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .container {
    max-width: inherit;
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */