/**
 * NgoiSaoSo team
 * @version 3.x
 * @contact: xinchao@ngoisaoso.vn
 * @see https://www.ngoisaoso.vn
 */

/*ADD OTHER*/
:root {
  --brand-primary-color: #ed1c25;
  --brand-secondary-color: #3c210f;
  --brand-sub-color: #f8e5c2;
  --brand-sub-color-2: #fff8f3;
}


/*only home*/
.bg-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  overflow: hidden;
  background-color: #ee1c24;
  border-radius: 20px;
}

.bg-container.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(31, 39, 73, .5)
}

.bghome {
  position: relative;
  z-index: 1;
}

.bghome-img {
  background-image: url(../images/bg-noodle-3.jpg);
}

/*end only home*/
.bg-brand {
  background-color: var(--brand-primary-color);
}

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

.bg-sub {
  background-color: var(--brand-sub-color);
}

.bg-sub-2 {
  background-color: var(--brand-sub-color-2);
}

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

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

.text-green {
  color: green;
}

.text-sm {
  font-size: .9rem !important;
  line-height: 1.3;
}

.header.is_ad {
  top: 50px;
}

.header-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
}

.header-fixed.is_ad {
  top: 40px;
}

.nav-up {
  top: 0px;
  transition: transform .5s ease .2s;
  transform: translateY(-100%);
}

.nav-down {
  transition: transform .5s ease .2s;
  top: 0px;
}

.nav-down.is_ad {
  top: 40px;
}

@media (max-width: 767.98px) {

  .header-fixed {
    top: -32px;
  }

  .header-fixed.is_ad {
    top: 20px;
  }

  .nav-down.is_ad {
    top: 20px;
  }
}

.fs-7 {
  font-size: 0.9rem !important
}

.fs-8 {
  font-size: 0.8rem !important
}

.fs-9 {
  font-size: 0.7rem !important
}

.fs-10 {
  font-size: 0.6rem !important
}

/* Các tùy chỉnh CSS của giao diện nên để vào đây */
.logo {
  height: 65px;
}

.navbar-brand {
  padding-top: 0rem;
}

.logo-mobile {
  max-width: 120px;
}

.hero-image {
  padding-top: 280px;
  padding-bottom: 120px;
  text-align: center;
}

.hero-image-middle {
  padding-top: 300px;
  padding-bottom: 300px;
  text-align: center;
}

.toast {
  position: fixed;
  width: 400px;
  top: calc(50% - 200px);
  left: calc(50% - 200px);
  z-index: 99999;
}

.modal-right {
  z-index: 99999 !important;
}

.wh-svg-icon-20 {
  width: 20px;
  height: 20px
}

.wh-svg-icon {
  width: 32px;
  height: 32px
}

.theme-line-white {
  --layer2: #ffffff;
  --layer1: #ffffff;
}

.theme-line-0 {
  --layer2: #202020;
  --layer1: #202020;
}

.theme-line-5 {
  --layer1: #202020;
  --layer2: #202020;
}

.theme-line-12 {
  --layer2: #202020;
}

.theme-line-60 {
  --layer1: #202020;
}

.theme-line-134 {
  --layer3: #202020;
  --layer2: #202020;
  --layer1: #202020;
}

/*change alert*/
.alert-primary {
  color: #716747;
  background-color: transparent;
  border-color: #d0c59f
}

.alert-primary .alert-link {
  color: #5a5239
}

.alert-secondary {
  color: #514c3c;
  background-color: transparent;
  border-color: #aba593
}

.alert-secondary .alert-link {
  color: #413d30
}

.alert-success {
  color: #186429;
  background-color: transparent;
  border-color: #69c17d
}

.alert-success .alert-link {
  color: #135021
}

.alert-info,
.alert-info .alert-link,
.alert-warning,
.alert-warning .alert-link,
.alert-danger,
.alert-danger .alert-link,
.alert-dark {
  background-color: transparent;
  color: var(--bs-gray-dark);
}

/* steppe edit */
a {
  color: var(--brand-secondary-color);
}

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

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

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

.btn-link {
  color: var(--brand-primary-color);
}

.btn-link:hover {
  color: var(--brand-primary-color);
}

.btn-primary {
  background-color: var(--brand-primary-color);
  border-color: var(--brand-primary-color);
  color: white;
}

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

a:hover {
  color: var(--brand-primary-color);
}

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

.btn-dark:hover {
  background-color: var(--brand-secondary-color);
  border-color: var(--brand-secondary-color);
}

.btn-outline-dark:hover {
  background-color: var(--brand-primary-color);
  border-color: var(--brand-primary-color);
}

.btn-primary:hover {
  color: white;
  background-color: var(--bs-gray);
  border-color: var(--bs-gray);
}

.product-label-boxed {
  padding: 0.25rem 0.8rem;
  font-size: 0.6rem;
}

.bg-info {
  background-color: rgba(var(--bs-muted-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.btn-outline-primary {
  color: var(--brand-primary-color);
  border-color: var(--brand-primary-color);
}

.fix-img-height {
  position: relative;
  height: 400px;
  overflow: hidden;
  background-repeat: no-repeat;
  display: block;
  background-size: cover;
  background-position: center;
}

@media (max-width: 767.98px) {
  .fix-img-height {
    height: 500px;
  }
}

.border-topbar {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.pt-8 {
  padding-top: 10rem !important
}

.pt-9 {
  padding-top: 12rem !important
}

.pt-10 {
  padding-top: 14rem !important
}

.pb-8 {
  padding-bottom: 10rem !important
}

.pb-9 {
  padding-bottom: 12rem !important
}

.pb-10 {
  padding-bottom: 14rem !important
}

.px-3 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.px-5 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.px-8 {
  padding-left: 10rem !important;
  padding-right: 10rem !important;
}

.px-9 {
  padding-bottom: 12rem !important;
  padding-right: 12rem !important;
}

.px-10 {
  padding-bottom: 14rem !important;
  padding-right: 14rem !important;
}

.py-8 {
  padding-left: 10rem !important;
  padding-right: 10rem !important;
}

.py-9 {
  padding-bottom: 12rem !important;
  padding-right: 12rem !important;
}

.py-10 {
  padding-bottom: 14rem !important;
  padding-right: 14rem !important;
}

.pr-2 {
  padding-right: 2rem !important;
}

.pl-4 {
  padding-left: 4rem !important;
}

.pl-5 {
  padding-left: 5rem !important;
}

@media (min-width: 992px) {
  .pt-lg-8 {
    padding-top: 10rem !important
  }

  .pt-lg-9 {
    padding-top: 12rem !important
  }

  .pt-lg-10 {
    padding-top: 14rem !important
  }

  .pb-lg-8 {
    padding-bottom: 10rem !important
  }

  .pb-lg-9 {
    padding-bottom: 12rem !important
  }

  .pb-lg-10 {
    padding-bottom: 14rem !important
  }

  .px-lg-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .px-lg-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
  }

  .px-lg-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
  }

  .py-lg-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .py-lg-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
  }

  .py-lg-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
  }
}

@media (min-width: 576px) {
  .pt-sm-8 {
    padding-top: 10rem !important
  }

  .pt-sm-9 {
    padding-top: 12rem !important
  }

  .pt-sm-10 {
    padding-top: 14rem !important
  }

  .pb-sm-8 {
    padding-bottom: 10rem !important
  }

  .pb-sm-9 {
    padding-bottom: 12rem !important
  }

  .pb-sm-10 {
    padding-bottom: 14rem !important
  }

  .px-sm-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .px-sm-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
  }

  .px-sm-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
  }

  .py-sm-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .py-sm-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
  }

  .py-sm-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
  }
}

@media (min-width: 768px) {
  .pt-md-8 {
    padding-top: 10rem !important
  }

  .pt-md-9 {
    padding-top: 12rem !important
  }

  .pt-md-10 {
    padding-top: 14rem !important
  }

  .pb-md-8 {
    padding-bottom: 10rem !important
  }

  .pb-md-9 {
    padding-bottom: 12rem !important
  }

  .pb-md-10 {
    padding-bottom: 14rem !important
  }

  .px-md-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .px-md-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
  }

  .px-md-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
  }

  .py-md-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .py-md-9 {
    padding-bottom: 12rem !important;
    padding-right: 12rem !important;
  }

  .py-md-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-8 {
    padding-top: 10rem !important
  }

  .pt-xl-9 {
    padding-top: 12rem !important
  }

  .pt-xl-10 {
    padding-top: 14rem !important
  }

  .pb-xl-8 {
    padding-bottom: 10rem !important
  }

  .pb-xl-9 {
    padding-bottom: 12rem !important
  }

  .pb-xl-10 {
    padding-bottom: 14rem !important
  }

  .px-xl-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .px-xl-9 {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }

  .px-xl-10 {
    padding-left: 14rem !important;
    padding-right: 14rem !important;
  }

  .py-xl-8 {
    padding-bottom: 10rem !important;
    padding-top: 10rem !important;
  }

  .py-xl-9 {
    padding-bottom: 12rem !important;
    padding-top: 12rem !important;
  }

  .py-xl-10 {
    padding-bottom: 14rem !important;
    padding-top: 14rem !important;
  }
}

@media (min-width: 1400px) {
  .pt-xxl-8 {
    padding-top: 10rem !important
  }

  .pt-xxl-9 {
    padding-top: 12rem !important
  }

  .pt-xxl-10 {
    padding-top: 14rem !important
  }

  .pb-xxl-8 {
    padding-bottom: 10rem !important
  }

  .pb-xxl-9 {
    padding-bottom: 12rem !important
  }

  .pb-xxl-10 {
    padding-bottom: 14rem !important
  }

  .px-xxl-8 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }

  .px-xxl-9 {
    padding-left: 12rem !important;
    padding-right: 12rem !important;
  }

  .px-xxl-10 {
    padding-bottom: 14rem !important;
    padding-right: 14rem !important;
  }

  .py-xxl-8 {
    padding-bottom: 10rem !important;
    padding-top: 10rem !important;
  }

  .py-xxl-9 {
    padding-bottom: 12rem !important;
    padding-top: 12rem !important;
  }

  .py-xxl-10 {
    padding-bottom: 14rem !important;
    padding-top: 14rem !important;
  }
}

.overlay-0::before {
  background-color: rgba(31, 39, 73, 0) !important
}

.overlay-primary-0::before {
  background-color: rgba(241, 38, 57, 0) !important
}

.overlay-secondary-0::before {
  background-color: rgba(31, 39, 73, 0) !important
}

.overlay-success-0::before {
  background-color: rgba(46, 205, 117, 0) !important
}

.overlay-info-0::before {
  background-color: rgba(65, 198, 242, 0) !important
}

.overlay-warning-0::before {
  background-color: rgba(251, 204, 93, 0) !important
}

.overlay-danger-0::before {
  background-color: rgba(245, 84, 84, 0) !important
}

.overlay-light-0::before {
  background-color: rgba(245, 245, 245, 0) !important
}

.overlay-dark-0::before {
  background-color: rgba(52, 58, 64, 0) !important
}

.overlay-blue-light-0::before {
  background-color: rgba(243, 248, 252, 0) !important
}

.overlay-facebook-0::before {
  background-color: rgba(59, 89, 152, 0) !important
}

.overlay-twitter-0::before {
  background-color: rgba(29, 161, 242, 0) !important
}

.overlay-google-plus-0::before {
  background-color: rgba(219, 68, 55, 0) !important
}

.overlay-instagram-0::before {
  background-color: rgba(195, 42, 163, 0) !important
}

.overlay-pinterest-0::before {
  background-color: rgba(189, 8, 28, 0) !important
}

.overlay-youtube-0::before {
  background-color: rgba(255, 0, 0, 0) !important
}

.overlay-vimeo-0::before {
  background-color: rgba(26, 183, 234, 0) !important
}

.overlay-slack-0::before {
  background-color: rgba(62, 184, 144, 0) !important
}

.overlay-dribbble-0::before {
  background-color: rgba(234, 76, 137, 0) !important
}

.overlay-linkedin-0::before {
  background-color: rgba(0, 123, 181, 0) !important
}

.overlay-flickr-0::before {
  background-color: rgba(244, 0, 131, 0) !important
}

.overlay-10::before {
  background-color: rgba(31, 39, 73, .1) !important
}

.overlay-primary-10::before {
  background-color: rgba(241, 38, 57, .1) !important
}

.overlay-secondary-10::before {
  background-color: rgba(31, 39, 73, .1) !important
}

.overlay-success-10::before {
  background-color: rgba(46, 205, 117, .1) !important
}

.overlay-info-10::before {
  background-color: rgba(65, 198, 242, .1) !important
}

.overlay-warning-10::before {
  background-color: rgba(251, 204, 93, .1) !important
}

.overlay-danger-10::before {
  background-color: rgba(245, 84, 84, .1) !important
}

.overlay-light-10::before {
  background-color: rgba(245, 245, 245, .1) !important
}

.overlay-dark-10::before {
  background-color: rgba(52, 58, 64, .1) !important
}

.overlay-blue-light-10::before {
  background-color: rgba(243, 248, 252, .1) !important
}

.overlay-facebook-10::before {
  background-color: rgba(59, 89, 152, .1) !important
}

.overlay-twitter-10::before {
  background-color: rgba(29, 161, 242, .1) !important
}

.overlay-google-plus-10::before {
  background-color: rgba(219, 68, 55, .1) !important
}

.overlay-instagram-10::before {
  background-color: rgba(195, 42, 163, .1) !important
}

.overlay-pinterest-10::before {
  background-color: rgba(189, 8, 28, .1) !important
}

.overlay-youtube-10::before {
  background-color: rgba(255, 0, 0, .1) !important
}

.overlay-vimeo-10::before {
  background-color: rgba(26, 183, 234, .1) !important
}

.overlay-slack-10::before {
  background-color: rgba(62, 184, 144, .1) !important
}

.overlay-dribbble-10::before {
  background-color: rgba(234, 76, 137, .1) !important
}

.overlay-linkedin-10::before {
  background-color: rgba(0, 123, 181, .1) !important
}

.overlay-flickr-10::before {
  background-color: rgba(244, 0, 131, .1) !important
}

.overlay-20::before {
  background-color: rgba(31, 39, 73, .2) !important
}

.overlay-primary-20::before {
  background-color: rgba(241, 38, 57, .2) !important
}

.overlay-secondary-20::before {
  background-color: rgba(31, 39, 73, .2) !important
}

.overlay-success-20::before {
  background-color: rgba(46, 205, 117, .2) !important
}

.overlay-info-20::before {
  background-color: rgba(65, 198, 242, .2) !important
}

.overlay-warning-20::before {
  background-color: rgba(251, 204, 93, .2) !important
}

.overlay-danger-20::before {
  background-color: rgba(245, 84, 84, .2) !important
}

.overlay-light-20::before {
  background-color: rgba(245, 245, 245, .2) !important
}

.overlay-dark-20::before {
  background-color: rgba(52, 58, 64, .2) !important
}

.overlay-blue-light-20::before {
  background-color: rgba(243, 248, 252, .2) !important
}

.overlay-facebook-20::before {
  background-color: rgba(59, 89, 152, .2) !important
}

.overlay-twitter-20::before {
  background-color: rgba(29, 161, 242, .2) !important
}

.overlay-google-plus-20::before {
  background-color: rgba(219, 68, 55, .2) !important
}

.overlay-instagram-20::before {
  background-color: rgba(195, 42, 163, .2) !important
}

.overlay-pinterest-20::before {
  background-color: rgba(189, 8, 28, .2) !important
}

.overlay-youtube-20::before {
  background-color: rgba(255, 0, 0, .2) !important
}

.overlay-vimeo-20::before {
  background-color: rgba(26, 183, 234, .2) !important
}

.overlay-slack-20::before {
  background-color: rgba(62, 184, 144, .2) !important
}

.overlay-dribbble-20::before {
  background-color: rgba(234, 76, 137, .2) !important
}

.overlay-linkedin-20::before {
  background-color: rgba(0, 123, 181, .2) !important
}

.overlay-flickr-20::before {
  background-color: rgba(244, 0, 131, .2) !important
}

.overlay-30::before {
  background-color: rgba(31, 39, 73, .3) !important
}

.overlay-primary-30::before {
  background-color: rgba(241, 38, 57, .3) !important
}

.overlay-secondary-30::before {
  background-color: rgba(31, 39, 73, .3) !important
}

.overlay-success-30::before {
  background-color: rgba(46, 205, 117, .3) !important
}

.overlay-info-30::before {
  background-color: rgba(65, 198, 242, .3) !important
}

.overlay-warning-30::before {
  background-color: rgba(251, 204, 93, .3) !important
}

.overlay-danger-30::before {
  background-color: rgba(245, 84, 84, .3) !important
}

.overlay-light-30::before {
  background-color: rgba(245, 245, 245, .3) !important
}

.overlay-dark-30::before {
  background-color: rgba(52, 58, 64, .3) !important
}

.overlay-blue-light-30::before {
  background-color: rgba(243, 248, 252, .3) !important
}

.overlay-facebook-30::before {
  background-color: rgba(59, 89, 152, .3) !important
}

.overlay-twitter-30::before {
  background-color: rgba(29, 161, 242, .3) !important
}

.overlay-google-plus-30::before {
  background-color: rgba(219, 68, 55, .3) !important
}

.overlay-instagram-30::before {
  background-color: rgba(195, 42, 163, .3) !important
}

.overlay-pinterest-30::before {
  background-color: rgba(189, 8, 28, .3) !important
}

.overlay-youtube-30::before {
  background-color: rgba(255, 0, 0, .3) !important
}

.overlay-vimeo-30::before {
  background-color: rgba(26, 183, 234, .3) !important
}

.overlay-slack-30::before {
  background-color: rgba(62, 184, 144, .3) !important
}

.overlay-dribbble-30::before {
  background-color: rgba(234, 76, 137, .3) !important
}

.overlay-linkedin-30::before {
  background-color: rgba(0, 123, 181, .3) !important
}

.overlay-flickr-30::before {
  background-color: rgba(244, 0, 131, .3) !important
}

.overlay-40::before {
  background-color: rgba(31, 39, 73, .4) !important
}

.overlay-primary-40::before {
  background-color: rgba(241, 38, 57, .4) !important
}

.overlay-secondary-40::before {
  background-color: rgba(31, 39, 73, .4) !important
}

.overlay-success-40::before {
  background-color: rgba(46, 205, 117, .4) !important
}

.overlay-info-40::before {
  background-color: rgba(65, 198, 242, .4) !important
}

.overlay-warning-40::before {
  background-color: rgba(251, 204, 93, .4) !important
}

.overlay-danger-40::before {
  background-color: rgba(245, 84, 84, .4) !important
}

.overlay-light-40::before {
  background-color: rgba(245, 245, 245, .4) !important
}

.overlay-dark-40::before {
  background-color: rgba(52, 58, 64, .4) !important
}

.overlay-blue-light-40::before {
  background-color: rgba(243, 248, 252, .4) !important
}

.overlay-facebook-40::before {
  background-color: rgba(59, 89, 152, .4) !important
}

.overlay-twitter-40::before {
  background-color: rgba(29, 161, 242, .4) !important
}

.overlay-google-plus-40::before {
  background-color: rgba(219, 68, 55, .4) !important
}

.overlay-instagram-40::before {
  background-color: rgba(195, 42, 163, .4) !important
}

.overlay-pinterest-40::before {
  background-color: rgba(189, 8, 28, .4) !important
}

.overlay-youtube-40::before {
  background-color: rgba(255, 0, 0, .4) !important
}

.overlay-vimeo-40::before {
  background-color: rgba(26, 183, 234, .4) !important
}

.overlay-slack-40::before {
  background-color: rgba(62, 184, 144, .4) !important
}

.overlay-dribbble-40::before {
  background-color: rgba(234, 76, 137, .4) !important
}

.overlay-linkedin-40::before {
  background-color: rgba(0, 123, 181, .4) !important
}

.overlay-flickr-40::before {
  background-color: rgba(244, 0, 131, .4) !important
}

.overlay-50::before {
  background-color: rgba(31, 39, 73, .5) !important
}

.overlay-primary-50::before {
  background-color: rgba(241, 38, 57, .5) !important
}

.overlay-secondary-50::before {
  background-color: rgba(31, 39, 73, .5) !important
}

.overlay-success-50::before {
  background-color: rgba(46, 205, 117, .5) !important
}

.overlay-info-50::before {
  background-color: rgba(65, 198, 242, .5) !important
}

.overlay-warning-50::before {
  background-color: rgba(251, 204, 93, .5) !important
}

.overlay-danger-50::before {
  background-color: rgba(245, 84, 84, .5) !important
}

.overlay-light-50::before {
  background-color: rgba(245, 245, 245, .5) !important
}

.overlay-dark-50::before {
  background-color: rgba(52, 58, 64, .5) !important
}

.overlay-blue-light-50::before {
  background-color: rgba(243, 248, 252, .5) !important
}

.overlay-facebook-50::before {
  background-color: rgba(59, 89, 152, .5) !important
}

.overlay-twitter-50::before {
  background-color: rgba(29, 161, 242, .5) !important
}

.overlay-google-plus-50::before {
  background-color: rgba(219, 68, 55, .5) !important
}

.overlay-instagram-50::before {
  background-color: rgba(195, 42, 163, .5) !important
}

.overlay-pinterest-50::before {
  background-color: rgba(189, 8, 28, .5) !important
}

.overlay-youtube-50::before {
  background-color: rgba(255, 0, 0, .5) !important
}

.overlay-vimeo-50::before {
  background-color: rgba(26, 183, 234, .5) !important
}

.overlay-slack-50::before {
  background-color: rgba(62, 184, 144, .5) !important
}

.overlay-dribbble-50::before {
  background-color: rgba(234, 76, 137, .5) !important
}

.overlay-linkedin-50::before {
  background-color: rgba(0, 123, 181, .5) !important
}

.overlay-flickr-50::before {
  background-color: rgba(244, 0, 131, .5) !important
}

.overlay-60::before {
  background-color: rgba(31, 39, 73, .6) !important
}

.overlay-primary-60::before {
  background-color: rgba(241, 38, 57, .6) !important
}

.overlay-secondary-60::before {
  background-color: rgba(31, 39, 73, .6) !important
}

.overlay-success-60::before {
  background-color: rgba(46, 205, 117, .6) !important
}

.overlay-info-60::before {
  background-color: rgba(65, 198, 242, .6) !important
}

.overlay-warning-60::before {
  background-color: rgba(251, 204, 93, .6) !important
}

.overlay-danger-60::before {
  background-color: rgba(245, 84, 84, .6) !important
}

.overlay-light-60::before {
  background-color: rgba(245, 245, 245, .6) !important
}

.overlay-dark-60::before {
  background-color: rgba(52, 58, 64, .6) !important
}

.overlay-blue-light-60::before {
  background-color: rgba(243, 248, 252, .6) !important
}

.overlay-facebook-60::before {
  background-color: rgba(59, 89, 152, .6) !important
}

.overlay-twitter-60::before {
  background-color: rgba(29, 161, 242, .6) !important
}

.overlay-google-plus-60::before {
  background-color: rgba(219, 68, 55, .6) !important
}

.overlay-instagram-60::before {
  background-color: rgba(195, 42, 163, .6) !important
}

.overlay-pinterest-60::before {
  background-color: rgba(189, 8, 28, .6) !important
}

.overlay-youtube-60::before {
  background-color: rgba(255, 0, 0, .6) !important
}

.overlay-vimeo-60::before {
  background-color: rgba(26, 183, 234, .6) !important
}

.overlay-slack-60::before {
  background-color: rgba(62, 184, 144, .6) !important
}

.overlay-dribbble-60::before {
  background-color: rgba(234, 76, 137, .6) !important
}

.overlay-linkedin-60::before {
  background-color: rgba(0, 123, 181, .6) !important
}

.overlay-flickr-60::before {
  background-color: rgba(244, 0, 131, .6) !important
}

.overlay-70::before {
  background-color: rgba(31, 39, 73, .7) !important
}

.overlay-primary-70::before {
  background-color: rgba(241, 38, 57, .7) !important
}

.overlay-secondary-70::before {
  background-color: rgba(31, 39, 73, .7) !important
}

.overlay-success-70::before {
  background-color: rgba(46, 205, 117, .7) !important
}

.overlay-info-70::before {
  background-color: rgba(65, 198, 242, .7) !important
}

.overlay-warning-70::before {
  background-color: rgba(251, 204, 93, .7) !important
}

.overlay-danger-70::before {
  background-color: rgba(245, 84, 84, .7) !important
}

.overlay-light-70::before {
  background-color: rgba(245, 245, 245, .7) !important
}

.overlay-dark-70::before {
  background-color: rgba(52, 58, 64, .7) !important
}

.overlay-blue-light-70::before {
  background-color: rgba(243, 248, 252, .7) !important
}

.overlay-facebook-70::before {
  background-color: rgba(59, 89, 152, .7) !important
}

.overlay-twitter-70::before {
  background-color: rgba(29, 161, 242, .7) !important
}

.overlay-google-plus-70::before {
  background-color: rgba(219, 68, 55, .7) !important
}

.overlay-instagram-70::before {
  background-color: rgba(195, 42, 163, .7) !important
}

.overlay-pinterest-70::before {
  background-color: rgba(189, 8, 28, .7) !important
}

.overlay-youtube-70::before {
  background-color: rgba(255, 0, 0, .7) !important
}

.overlay-vimeo-70::before {
  background-color: rgba(26, 183, 234, .7) !important
}

.overlay-slack-70::before {
  background-color: rgba(62, 184, 144, .7) !important
}

.overlay-dribbble-70::before {
  background-color: rgba(234, 76, 137, .7) !important
}

.overlay-linkedin-70::before {
  background-color: rgba(0, 123, 181, .7) !important
}

.overlay-flickr-70::before {
  background-color: rgba(244, 0, 131, .7) !important
}

.overlay-80::before {
  background-color: rgba(31, 39, 73, .8) !important
}

.overlay-primary-80::before {
  background-color: rgba(241, 38, 57, .8) !important
}

.overlay-secondary-80::before {
  background-color: rgba(31, 39, 73, .8) !important
}

.overlay-success-80::before {
  background-color: rgba(46, 205, 117, .8) !important
}

.overlay-info-80::before {
  background-color: rgba(65, 198, 242, .8) !important
}

.overlay-warning-80::before {
  background-color: rgba(251, 204, 93, .8) !important
}

.overlay-danger-80::before {
  background-color: rgba(245, 84, 84, .8) !important
}

.overlay-light-80::before {
  background-color: rgba(245, 245, 245, .8) !important
}

.overlay-dark-80::before {
  background-color: rgba(52, 58, 64, .8) !important
}

.overlay-blue-light-80::before {
  background-color: rgba(243, 248, 252, .8) !important
}

.overlay-facebook-80::before {
  background-color: rgba(59, 89, 152, .8) !important
}

.overlay-twitter-80::before {
  background-color: rgba(29, 161, 242, .8) !important
}

.overlay-google-plus-80::before {
  background-color: rgba(219, 68, 55, .8) !important
}

.overlay-instagram-80::before {
  background-color: rgba(195, 42, 163, .8) !important
}

.overlay-pinterest-80::before {
  background-color: rgba(189, 8, 28, .8) !important
}

.overlay-youtube-80::before {
  background-color: rgba(255, 0, 0, .8) !important
}

.overlay-vimeo-80::before {
  background-color: rgba(26, 183, 234, .8) !important
}

.overlay-slack-80::before {
  background-color: rgba(62, 184, 144, .8) !important
}

.overlay-dribbble-80::before {
  background-color: rgba(234, 76, 137, .8) !important
}

.overlay-linkedin-80::before {
  background-color: rgba(0, 123, 181, .8) !important
}

.overlay-flickr-80::before {
  background-color: rgba(244, 0, 131, .8) !important
}

.overlay-90::before {
  background-color: rgba(31, 39, 73, .9) !important
}

.overlay-primary-90::before {
  background-color: rgba(241, 38, 57, .9) !important
}

.overlay-secondary-90::before {
  background-color: rgba(31, 39, 73, .9) !important
}

.overlay-success-90::before {
  background-color: rgba(46, 205, 117, .9) !important
}

.overlay-info-90::before {
  background-color: rgba(65, 198, 242, .9) !important
}

.overlay-warning-90::before {
  background-color: rgba(251, 204, 93, .9) !important
}

.overlay-danger-90::before {
  background-color: rgba(245, 84, 84, .9) !important
}

.overlay-light-90::before {
  background-color: rgba(245, 245, 245, .9) !important
}

.overlay-dark-90::before {
  background-color: rgba(52, 58, 64, .9) !important
}

.overlay-blue-light-90::before {
  background-color: rgba(243, 248, 252, .9) !important
}

.overlay-facebook-90::before {
  background-color: rgba(59, 89, 152, .9) !important
}

.overlay-twitter-90::before {
  background-color: rgba(29, 161, 242, .9) !important
}

.overlay-google-plus-90::before {
  background-color: rgba(219, 68, 55, .9) !important
}

.overlay-instagram-90::before {
  background-color: rgba(195, 42, 163, .9) !important
}

.overlay-pinterest-90::before {
  background-color: rgba(189, 8, 28, .9) !important
}

.overlay-youtube-90::before {
  background-color: rgba(255, 0, 0, .9) !important
}

.overlay-vimeo-90::before {
  background-color: rgba(26, 183, 234, .9) !important
}

.overlay-slack-90::before {
  background-color: rgba(62, 184, 144, .9) !important
}

.overlay-dribbble-90::before {
  background-color: rgba(234, 76, 137, .9) !important
}

.overlay-linkedin-90::before {
  background-color: rgba(0, 123, 181, .9) !important
}

.overlay-flickr-90::before {
  background-color: rgba(244, 0, 131, .9) !important
}

.overlay-100::before {
  background-color: #1f2749 !important
}

.overlay-primary-100::before {
  background-color: #f12639 !important
}

.overlay-secondary-100::before {
  background-color: #1f2749 !important
}

.overlay-success-100::before {
  background-color: #2ecd75 !important
}

.overlay-info-100::before {
  background-color: #41c6f2 !important
}

.overlay-warning-100::before {
  background-color: #fbcc5d !important
}

.overlay-danger-100::before {
  background-color: #f55454 !important
}

.overlay-light-100::before {
  background-color: #f5f5f5 !important
}

.overlay-dark-100::before {
  background-color: #343a40 !important
}

.overlay-blue-light-100::before {
  background-color: #f3f8fc !important
}

.overlay-facebook-100::before {
  background-color: #3b5998 !important
}

.overlay-twitter-100::before {
  background-color: #1da1f2 !important
}

.overlay-google-plus-100::before {
  background-color: #db4437 !important
}

.overlay-instagram-100::before {
  background-color: #c32aa3 !important
}

.overlay-pinterest-100::before {
  background-color: #bd081c !important
}

.overlay-youtube-100::before {
  background-color: red !important
}

.overlay-vimeo-100::before {
  background-color: #1ab7ea !important
}

.overlay-slack-100::before {
  background-color: #3eb890 !important
}

.overlay-dribbble-100::before {
  background-color: #ea4c89 !important
}

.overlay-linkedin-100::before {
  background-color: #007bb5 !important
}

.overlay-flickr-100::before {
  background-color: #f40083 !important
}


/* ==========================================================================
   Icons
   ========================================================================== */
.icon {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.35)) !important;
  display: flex;
  width: 110px;
  height: 110px;
  border-radius: 100%;
  text-decoration: none !important;
  transition: transform 0.3s ease;
}

.icon i,
.icon svg {
  display: inline-flex;
  margin: auto;
  color: #fff;
}

.icon:hover {
  transform: scale(1.1);
}

.icon.icon-sm {
  width: 55px;
  height: 55px;
}

.icon.icon-lg {
  width: 150px;
  height: 150px;
}

/* Steppe */
.display-1 {
  font-size: 3rem;
  color: white;
  font-weight: 700;
  text-shadow: 1px 1px #333333;
}

.subtitle {
  font-size: 3.1rem;
  margin-bottom: 0;
  letter-spacing: unset;
  text-transform: unset;
  color: var(--brand-primary-color);
  font-weight: 900;
  text-shadow: 0.5px 0.5px 0.5px #ffffff;
}

h2 {
  margin-bottom: 0rem;
}

.btn {
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: bold;
  padding: .4rem 1rem;
}

.btn-dark {
  color: #fff;
  background-color: var(--brand-primary-color);
  border-color: var(--brand-primary-color);
  border-radius: 3rem;
  font-size: 1rem;
  font-weight: 700;
}

.btn-dark-2 {
  color: var(--brand-secondary-color);
  background-color: var(--brand-sub-color);
  border-color: var(--brand-sub-color);
  border-radius: 3rem;
  font-size: 1rem;
  font-weight: 700;
}

.fw-bolder {
  font-weight: 900 !important;
}

.fw-bold {
  font-weight: 600 !important;
}

.text-uppercase {
  letter-spacing: 0rem;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

.table-brand-border {
  position: relative;
}

.table-brand-border:before {
  height: 82%;
  width: 1px;
  background-color: #c1c1c1;
  position: absolute;
  left: calc(51% - 5px);
  bottom: 2%;
  content: "";
}



@media (max-width: 767.98px) {
.table-brand-border:before {
  left: calc(51% - 10px);
}
}

.table-brand-border tr.border-h td {
  position: relative;
}

.table-brand-border tr.border-h td:before {
  height: 1px;
  background-color: #c1c1c1;
  position: absolute;
  top: calc(50% - 0.5px);
  left: 5%;
  width: 90%;
  content: "";
}


.form-control.form-control-nobg {
  transition: all .5s;
  background-color: transparent
}

.form-control.form-control-nobg {
  color: white;
}

.form-control.form-control-nobg:focus,
.form-control.form-control-nobg:hover {
  border-color: white;
  box-shadow: none
}

.form-control.form-control-nobg:focus~.btn-nobg {
  border-bottom-color: white;
}

.btn.btn-nobg {
  transition: all .5s;
  border: none;
  background-color: transparent
}

.btn.btn-nobg:focus {
  box-shadow: none
}

.btn.btn-nobg .svg-icon {
  color: white;
}

.input-group-nobg {
  font-weight: 200;
}

.input-group-nobg:focus .btn-nobg,
.input-group-nobg:hover .btn-nobg {
  border-color: white;
}

.input-group-nobg:focus .form-control-nobg,
.input-group-nobg:hover .form-control-nobg {
  border-color: white;
}

.form-control-nobg::placeholder {
  color: white;
  font-weight: 200;
  font-size: .9rem;
  opacity: 1;
  /* Firefox */
}

.form-control-nobg::-ms-input-placeholder {
  /* Edge 12-18 */
  color: white;
  font-weight: 200;
  font-size: .9rem;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-hover-dark:hover .navbar-nav .nav-link,
.navbar-fixed-dark.fixed-top .navbar-nav .nav-link {
  color: white;
}

.navbar-dark .form-control {
  color: white;
}

.navbar-dark .form-control-underlined::placeholder {
  color: white;
  font-weight: 200;
  font-size: .9rem;
  opacity: 1;
  /* Firefox */
}

.navbar-dark .form-control-underlined::-ms-input-placeholder {
  /* Edge 12-18 */
  color: white;
  font-weight: 200;
  font-size: .9rem;
}

.form-control.form-control-underlined:focus,
.form-control.form-control-underlined:hover {
  border-color: red;
  box-shadow: none
}

.form-control.form-control-underlined:focus~.btn-underlined,
.form-control.form-control-underlined:hover~.btn-underlined {
  border-bottom-color: red;
}

.text-dark-hover:hover {
  color: #ffffff !important;
}

.link-animated.text-dark-hover:hover:after {
  background: #ffffff !important;
}

.light-overlay::after,
.overlay-hover-light::after {
  background: var(--brand-secondary-color);
  opacity: .3;
}

.hero-content h1,
.hero-content .h1 {
  color: var(--brand-primary-color);
}

.overlay-content .breadcrumb-item a {
  color: white;
}

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

.lead {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-secondary-color);
}

.text-content p,
.text-content ul,
.text-content ol {
  color: #323334;
}

.dropdown-menu {
  font-size: 1.1rem;
}

.breadcrumb {
  font-size: 1rem;
}

.bg-img {
  background-image: url(/assets/images/wave.png);
  background-blend-mode: overlay;
}

.text-content p,
.text-content ul,
.text-content ol {
  font-size: 1.3rem;
}

.product {
  margin-bottom: .5rem;
}


.red-arrow-right {
  position: absolute;
  background-image: url(../images/bg-red-arrow-right-v2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top: 150px;
  left: 0;
  width: 150px;
  height: 217px;
  /* border-top: 160px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 160px solid #ee1c24; */
}

@media (max-width: 767.98px) {
  .tab-content iframe {
    max-width: 100%
  }
}

.image-guide {
  width: 1000px !important;
  height: auto !important;
}

.table>tbody .image-left {
    width: 170px !important;
    height: auto !important;
    float: unset !important;
}

.table>tbody .image-right {
    height: 200px !important;
    width: auto !important;
    float: unset !important;
}

@media (max-width: 767.98px) {
  .image-guide {
    width: 100% !important;
    height: auto !important;
  }
.table>tbody .image-left {
    width: 100px !important;
    height: auto !important;
    float: unset !important;
}

.table>tbody .image-right {
    height: 120px !important;
    width: auto !important;
    float: unset !important;
}
}





@media (max-width: 991.98px) {

  h1.hero-heading,
  .hero-heading.h1 {
    font-size: 2rem;
  }
}

@media (max-width: 1024px) {
  #navbarContent {
    flex-wrap: wrap;
    flex-direction: column;
  }
}

.detail-nav-link.nav-link {
  font-size: 1rem;
}

@media (min-width: 1024px) {
  .w-lg-50 {
    width: 50% !important;
  }
}

.swiper-nav .swiper-button-prev,
.swiper-nav .swiper-button-next {
  color: #ffffff;
}

.w-60 {
  width: 60% !important;
}

@media (min-width: 992px) {
  .w-lg-60 {
    width: 60% !important;
  }
}