/**
 * 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;
}

@media (max-width: 991.98px) {
  .hero-image,
  section.hero-image,
  section.hero.hero-image {
    padding-top: 130px !important;
    padding-bottom: 50px !important;
  }
  .hero-image .hero-heading,
  section.hero-image .hero-heading {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .hero-image,
  section.hero-image,
  section.hero.hero-image {
    padding-top: 110px !important;
    padding-bottom: 40px !important;
  }
}

.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;
}

/* Product Detail Tabs on Mobile - Single Row */
@media (max-width: 575.98px) {
  .nav.nav-tabs {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav.nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav.nav-tabs .nav-item {
    flex: 0 0 auto;
  }
  .detail-nav-link.nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    text-align: center;
  }
}

@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;
  }
}


/* ==========================================================================
   Modern Blog Styling for /news/blog/
   ========================================================================== */
.blog-section {
  background-color: #fff;
}

.blog-title {
  letter-spacing: -0.02em;
  color: #1a202c;
}

.blog-subtitle {
  max-width: 680px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.btn-category-pill {
  border-radius: 50rem;
  padding: 0.4rem 1.25rem;
  border: 1px solid #e2e8f0;
  color: #4a5568;
  background-color: #fff;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.25s ease-in-out;
  text-decoration: none;
}

.btn-category-pill:hover,
.btn-category-pill.active {
  background-color: var(--brand-primary-color, #ed1c25) !important;
  border-color: var(--brand-primary-color, #ed1c25) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(237, 28, 37, 0.25);
}

.blog-zoom-img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.featured-img-wrap:hover .blog-zoom-img,
.card-img-wrap:hover .blog-zoom-img {
  transform: scale(1.05);
}

.blog-title-link {
  transition: color 0.2s ease-in-out;
  text-decoration: none;
}

.blog-title-link:hover {
  color: var(--brand-primary-color, #ed1c25) !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
  min-height: 2.9em;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}

.object-fit-cover {
  object-fit: cover;
}

.blog-featured-card {
  padding: 1.5rem 0;
}

.blog-featured-badge {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 50rem;
  padding: 0.35rem 0.85rem;
  z-index: 2;
  width: auto !important;
  height: auto !important;
  transition: all 0.3s ease;
  pointer-events: none;
}

.blog-featured-badge .badge-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1a202c;
  line-height: 1;
}

.badge-pulse-dot {
  position: relative;
  width: 7px;
  height: 7px;
  background-color: var(--brand-primary-color, #ed1c25);
  border-radius: 50%;
  display: inline-block;
}

.badge-pulse-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--brand-primary-color, #ed1c25);
  opacity: 0.6;
  animation: badge-pulse 1.8s infinite ease-out;
}

@keyframes badge-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  70% {
    transform: scale(2.2);
    opacity: 0;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.blog-featured-card .featured-title {
  line-height: 1.35;
}

.blog-divider {
  border-top: 1px solid #edf2f7;
  opacity: 0.8;
}

.blog-flat-card {
  transition: opacity 0.2s ease;
}

.blog-flat-card .card-img-wrap {
  background-color: #f7fafc;
}

.blog-flat-card .card-title {
  line-height: 1.4;
}

.blog-pagination .pagination {
  margin-top: 1.5rem;
  gap: 0.35rem;
}

.blog-pagination .page-item .page-link {
  border-radius: 8px !important;
  padding: 0.5rem 0.95rem;
  border: 1px solid #edf2f7;
  color: #4a5568;
  font-weight: 500;
  transition: all 0.2s ease;
}

.blog-pagination .page-item .page-link:hover {
  background-color: #f8fafc;
  color: var(--brand-primary-color, #ed1c25);
  border-color: #cbd5e1;
}

.blog-pagination .page-item.active .page-link {
  background-color: var(--brand-primary-color, #ed1c25) !important;
  border-color: var(--brand-primary-color, #ed1c25) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(237, 28, 37, 0.25);
}


/* ==========================================================================
   Video Play Button Overlay for /news/video/
   ========================================================================== */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  z-index: 3;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-play-btn i {
  margin-left: 3px;
  line-height: 1;
}

/* Featured Hero play button */
.featured-img-wrap .video-play-btn {
  width: 64px;
  height: 64px;
  font-size: 1.35rem;
}

/* Grid card play button */
.card-img-wrap .video-play-btn {
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
}

/* Hover interactions */
.featured-img-wrap:hover .video-play-btn,
.card-img-wrap:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--brand-primary-color, #ed1c25);
  border-color: #ffffff;
  box-shadow: 0 8px 25px rgba(237, 28, 37, 0.5);
}

/* ==========================================================================
   Reels / Shorts 9:16 Vertical Card Layout (/news/video/)
   ========================================================================== */
.ratio-9x16 {
  aspect-ratio: 9 / 16;
  width: 100%;
  overflow: hidden;
}

@supports not (aspect-ratio: 9 / 16) {
  .ratio-9x16 {
    position: relative;
    padding-top: 177.78%;
  }

  .ratio-9x16>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.reels-card {
  position: relative;
  border-radius: 12px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background-color: #0f172a;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reels-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.reels-card .reels-zoom-img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reels-card:hover .reels-zoom-img {
  transform: scale(1.06);
}

.reels-card .video-play-btn {
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
}

.reels-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--brand-primary-color, #ed1c25);
  border-color: #ffffff;
  box-shadow: 0 8px 25px rgba(237, 28, 37, 0.5);
}

.reels-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.88) 100%);
  z-index: 2;
  transition: background 0.3s ease;
}

.reels-card:hover .reels-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.95) 100%);
}

.reels-title {
  color: #ffffff !important;
  font-size: 0.95rem;
  line-height: 1.35;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 600;
}

.reels-meta {
  font-size: 0.78rem;
  opacity: 0.85;
}

.reels-adminlink {
  z-index: 4;
}

@media (max-width: 576px) {
  .reels-card {
    border-radius: 10px !important;
  }

  .reels-card .video-play-btn {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .reels-title {
    font-size: 0.825rem;
    line-height: 1.25;
    margin-bottom: 0.35rem !important;
  }

  .reels-overlay {
    padding: 0.65rem !important;
  }

  .reels-meta {
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   News Detail: Sticky Table of Contents, Lightbox, Brand Promo & Related Slider
   ========================================================================== */
.featured-img-wrap,
.card-img-wrap {
  border-radius: 12px !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Sticky & Fixed Table of Contents */
#article-main-row {
  align-items: stretch !important;
}

#article-toc-col {
  align-self: stretch !important;
  position: relative !important;
}

@media (min-width: 992px) {
  #article-content-col {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 15px) !important;
  }
}

.article-toc-sidebar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 90px !important;
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  z-index: 30;
}

.article-toc-sidebar::-webkit-scrollbar {
  width: 4px;
}

.article-toc-sidebar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.article-toc-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.toc-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px !important;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.toc-title {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.toc-list .toc-item {
  margin-bottom: 0.35rem;
}

.toc-list .toc-item:last-child {
  margin-bottom: 0;
}

.toc-list .toc-sub {
  padding-left: 0.85rem;
}

.toc-link {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #475569;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border-left: 2.5px solid transparent;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.toc-sub .toc-link {
  font-size: 0.82rem;
  color: #64748b;
}

.toc-link:hover {
  color: var(--brand-primary-color, #ed1c25);
  background-color: rgba(237, 28, 37, 0.05);
}

.toc-link.active {
  color: var(--brand-primary-color, #ed1c25) !important;
  font-weight: 700;
  background-color: rgba(237, 28, 37, 0.08);
  border-left-color: var(--brand-primary-color, #ed1c25);
}

.toc-mobile-toggle[aria-expanded="true"] .toc-chevron {
  transform: rotate(180deg);
}

.toc-chevron {
  transition: transform 0.25s ease;
}

/* Article Images & Lightbox */
#news-bodyhtml img.article-lightbox-img {
  cursor: zoom-in;
  border-radius: 10px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#news-bodyhtml a.article-lightbox-link:hover img.article-lightbox-img {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

#news-bodyhtml figure figcaption,
#news-bodyhtml .figcaption {
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
}

.fancybox-caption__body {
  font-size: 1rem;
  font-weight: 500;
  color: #f8fafc;
}

/* Brand Promotion Section */
.brand-promotion-section {
  background: linear-gradient(145deg, #fffaf5 0%, #fef2f2 100%) !important;
  border: 1px solid rgba(237, 28, 37, 0.14) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}

.brand-promotion-section h2 {
  color: var(--brand-primary-color, #ed1c25) !important;
  border-bottom-color: rgba(237, 28, 37, 0.15) !important;
}

.brand-promotion-section .promo-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: rgba(237, 28, 37, 0.12);
  color: var(--brand-primary-color, #ed1c25);
  font-weight: 800;
  font-size: 0.85rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.brand-promotion-section .cta-box {
  border-radius: 12px !important;
  border-color: #e2e8f0 !important;
}

.brand-promotion-section .cta-box .btn-dark {
  border-radius: 10px !important;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  padding: 0.6rem 0.85rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.brand-promotion-section .cta-box .btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(237, 28, 37, 0.3) !important;
}

/* Related Articles Swiper Slider (No top border line) */
.related-articles-section {
  border-top: none !important;
  margin-bottom: 40px !important;
}

.btn-swiper-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.btn-swiper-nav:hover {
  background-color: var(--brand-primary-color, #ed1c25);
  border-color: var(--brand-primary-color, #ed1c25);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(237, 28, 37, 0.25);
}

.related-news-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  opacity: 1;
  transition: all 0.25s ease;
}

.related-news-swiper .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 6px;
  background: var(--brand-primary-color, #ed1c25);
}

/* ==========================================================================
   Home Page: Editorial Magazine News Block (1 Featured + 5 Sub List)
   ========================================================================== */
.home-editorial-news {
  margin-bottom: 4rem !important;
}

@media (min-width: 992px) {
  .home-editorial-news {
    margin-bottom: 5rem !important;
  }
}

.home-editorial-news .home-featured-card {
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-editorial-news .home-featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09) !important;
}

.home-editorial-news .home-featured-img-wrap {
  border-radius: 14px 14px 0 0 !important;
}

.home-editorial-news .home-featured-img {
  transition: transform 0.4s ease;
}

.home-editorial-news .home-featured-card:hover .home-featured-img {
  transform: scale(1.04);
}

.home-editorial-news .home-featured-title {
  font-size: 1.25rem;
  line-height: 1.4;
}

.home-editorial-news .home-news-link {
  transition: color 0.2s ease;
}

.home-editorial-news .home-news-link:hover {
  color: var(--brand-primary-color, #ed1c25) !important;
}

.home-editorial-news .home-featured-desc {
  font-size: 0.885rem;
  line-height: 1.6;
  color: #64748b;
}

.home-editorial-news .home-btn-readmore {
  border-radius: 8px !important;
  border-color: #0f172a;
  color: #0f172a;
  transition: all 0.2s ease;
}

.home-editorial-news .home-btn-readmore:hover {
  background-color: var(--brand-primary-color, #ed1c25) !important;
  border-color: var(--brand-primary-color, #ed1c25) !important;
  color: #ffffff !important;
}

.home-editorial-news .home-sub-list {
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

.home-editorial-news .home-sub-item {
  transition: transform 0.2s ease;
}

.home-editorial-news .home-sub-item:hover {
  transform: translateX(4px);
}

.home-editorial-news .home-sub-img-wrap {
  border-radius: 10px !important;
}

.home-editorial-news .home-sub-img {
  transition: transform 0.3s ease;
}

.home-editorial-news .home-sub-item:hover .home-sub-img {
  transform: scale(1.06);
}

.home-editorial-news .home-sub-title {
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 600;
}

.home-editorial-news .video-play-btn-mini {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(237, 28, 37, 0.9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.home-editorial-news .home-sub-item:hover .video-play-btn-mini {
  transform: translate(-50%, -50%) scale(1.15);
}

.home-editorial-news .hover-underline:hover {
  text-decoration: underline !important;
}

@media (max-width: 991.98px) {
  .home-editorial-news .home-featured-title {
    font-size: 1.15rem;
  }

  .home-editorial-news .home-sub-title {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   News Detail: Reduced 20% Container Width for Better Readability
   ========================================================================== */
@media (min-width: 992px) {
  .news-detail-wrapper .container,
  body.is-news-detail .hero.pt-9 .container {
    max-width: 768px !important; /* 960px - 20% */
  }
  .news-detail-wrapper .toc-card {
    padding: 0.95rem 0.9rem;
  }
  .news-detail-wrapper .toc-link {
    font-size: 0.835rem;
    padding: 0.3rem 0.45rem;
  }
}

@media (min-width: 1200px) {
  .news-detail-wrapper .container,
  body.is-news-detail .hero.pt-9 .container {
    max-width: 912px !important; /* 1140px - 20% */
  }
  .news-detail-wrapper .toc-card {
    padding: 1rem 1rem;
  }
  .news-detail-wrapper .toc-link {
    font-size: 0.85rem;
    padding: 0.32rem 0.5rem;
  }
}

@media (min-width: 1400px) {
  .news-detail-wrapper .container,
  body.is-news-detail .hero.pt-9 .container {
    max-width: 1056px !important; /* 1320px - 20% */
  }
  .news-detail-wrapper .toc-card {
    padding: 1.15rem 1.25rem;
  }
  .news-detail-wrapper .toc-link {
    font-size: 0.875rem;
    padding: 0.35rem 0.6rem;
  }
}

/* ==========================================================================
   Article Tags Styling (Modern Pill Badges)
   ========================================================================== */
.article-tags-wrap {
  margin-top: 2.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid #f1f5f9;
}

.article-tags-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.02em;
  user-select: none;
}

.article-tags-label i {
  font-size: 0.95rem;
  color: var(--brand-primary-color, #ed1c25);
}

.article-tag-item {
  display: inline-flex;
  align-items: center;
  background-color: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 50rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.835rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.article-tag-item .tag-hash {
  color: var(--brand-primary-color, #ed1c25);
  font-weight: 700;
  margin-right: 0.25rem;
  font-size: 0.9em;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.article-tag-item:hover {
  background-color: #fff1f2;
  color: var(--brand-primary-color, #ed1c25);
  border-color: #fecdd3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(237, 28, 37, 0.12);
}

.article-tag-item:hover .tag-hash {
  opacity: 1;
  transform: scale(1.1);
}

.article-tag-item:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(237, 28, 37, 0.1);
}

/* ==========================================================================
   Tag & Topic Grid Page
   ========================================================================== */
.tag-topic-section .tag-header .tag-title {
  color: #dc3545 !important;
  letter-spacing: -0.02em;
}

.tag-article-card {
  border-radius: 14px !important;
  border: 1px solid #edf2f7 !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}

.tag-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.tag-article-card .card-img-wrap {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background-color: #f1f5f9;
}

.tag-article-card .blog-zoom-img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag-article-card:hover .blog-zoom-img {
  transform: scale(1.05);
}

.tag-article-card .card-title a {
  transition: color 0.2s ease;
}

.tag-article-card:hover .card-title a {
  color: var(--brand-primary-color, #ed1c25) !important;
}

.tag-article-card .btn-readmore {
  transition: transform 0.2s ease;
}

.tag-article-card:hover .btn-readmore i {
  transform: translateX(3px);
  transition: transform 0.2s ease;
}

/* ==========================================================================
   Mobile Header & Quick Language Switcher
   ========================================================================== */
@media (max-width: 991.98px) {
  #topheader_nav {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  #topheader_nav #main-logo {
    max-height: 38px;
    width: auto;
  }
}

.header-lang-quick .lang-flag-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.header-lang-quick .lang-flag-btn:active {
  transform: scale(0.92);
}

.mobile-hamburger-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0 !important;
}

.mobile-hamburger-btn:hover,
.mobile-hamburger-btn:focus {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
  outline: none !important;
}

.mobile-hamburger-btn:active {
  transform: scale(0.92);
}

.mobile-hamburger-btn .navbar-icon {
  width: 20px !important;
  height: 20px !important;
  color: #1e293b !important;
  display: inline-block;
  transform: scaleX(-1);
  transition: transform 0.2s ease;
}

.header-lang-quick .dropdown-menu {
  min-width: 140px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   Mobile Offcanvas Menu Drawer (Slide-in Right)
   ========================================================================== */
.mobile-menu-drawer {
  width: 320px !important;
  max-width: 85vw !important;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: -8px 0 35px rgba(0, 0, 0, 0.18) !important;
  z-index: 1060 !important;
}

.mobile-menu-drawer .offcanvas-header {
  background-color: #ffffff;
}

.mobile-menu-drawer .drawer-nav .navbar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem;
  padding-left: 0;
  list-style: none;
}

.mobile-menu-drawer .drawer-nav .nav-item {
  width: 100%;
}

.mobile-menu-drawer .drawer-nav .nav-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b !important;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.mobile-menu-drawer .drawer-nav .nav-link:hover,
.mobile-menu-drawer .drawer-nav .nav-link:focus,
.mobile-menu-drawer .drawer-nav .nav-item.active > .nav-link {
  background-color: #fff1f2;
  color: var(--brand-primary-color, #ed1c25) !important;
}

.mobile-menu-drawer .drawer-nav .dropdown-toggle::after {
  display: inline-block;
  margin-left: auto;
  transition: transform 0.25s ease;
  vertical-align: 0.15em;
}

.mobile-menu-drawer .drawer-nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.mobile-menu-drawer .mobile-submenu {
  padding-left: 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  border-left: 2px solid #fecdd3;
}

.mobile-menu-drawer .mobile-submenu .dropdown-item {
  display: block;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.mobile-menu-drawer .mobile-submenu .dropdown-item:hover {
  background-color: #fff5f5;
  color: var(--brand-primary-color, #ed1c25);
}

.drawer-lang-item {
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.drawer-lang-item:hover,
.drawer-lang-item.active {
  background-color: #ffffff !important;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Mobile Sticky Full-Width Action Bar (Hotline, KakaoTalk, Facebook)
   ========================================================================== */
.mobile-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 78px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 1040;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-action-bar {
    height: calc(78px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.mobile-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px 0;
  color: #333333 !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  user-select: none;
}

.mobile-action-btn .action-icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 3px;
  transition: transform 0.2s ease;
}

.mobile-action-btn .action-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #333333 !important;
}

/* 1. Hotline Button (Brand Red) */
.mobile-action-btn.action-hotline .action-icon-circle {
  background-color: #fee2e2;
  color: #ed1c25;
}

/* 2. Facebook Button (Facebook Blue #1877F2) */
.mobile-action-btn.action-facebook .action-icon-circle {
  background-color: #e0f2fe;
  color: #1877f2;
}

/* 3. TikTok Button (TikTok Dark) */
.mobile-action-btn.action-tiktok .action-icon-circle {
  background-color: #f1f5f9;
  color: #000000;
}

/* 4. Top Button (Back to top) */
.mobile-action-btn.action-top .action-icon-circle {
  background-color: #f8fafc;
  color: #333333;
  border: 1px solid #e2e8f0;
}

.mobile-action-btn:hover .action-label,
.mobile-action-btn:focus .action-label {
  color: #111827 !important;
}

.mobile-action-btn:active .action-icon-circle {
  transform: scale(0.9);
}

/* Safe area padding for body on mobile */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 86px !important;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
      padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ==========================================================================
   Home Brands / Customers Slider
   ========================================================================== */
.brands-slider {
  padding: 10px 0 25px;
}

.brands-slider .swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  min-height: 85px;
}

.brands-slider .swiper-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.brands-slider .brand-logo-img,
.brands-slider .swiper-slide img,
.brands-slider .swiper-slide span.img-fluid {
  max-width: 135px !important;
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  opacity: 0.85 !important;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.brands-slider .swiper-slide:hover .brand-logo-img,
.brands-slider .swiper-slide:hover img {
  opacity: 1 !important;
  transform: scale(1.08);
}

@media (max-width: 767.98px) {
  .brands-slider .swiper-slide {
    padding: 6px 4px;
    min-height: 90px;
  }
  .brands-slider .brand-logo-img,
  .brands-slider .swiper-slide img,
  .brands-slider .swiper-slide span.img-fluid {
    width: 100% !important;
    max-width: 105px !important;
    max-height: 75px !important;
    opacity: 0.92 !important;
  }
}