.header .navbar {
  transition: all .2s ease;
}

.header .navbar .container {
  max-width: 1600px;
}

.header.light .navbar .navbar-brand {
  color: #000;
  margin-right: 32px;
}

.header.light .navbar.bg-dark .navbar-brand {
  color: #fff;
}

.header.light .navbar .navbar-nav .nav-link {
  color: #1A1A1A;
  padding: 0 16px;
}

.header.light .navbar .navbar-nav .nav-link:hover {
  color: #A6FF00;
}

.header.light .navbar.bg-dark .navbar-nav .nav-link {
  color: #fff;
}

.header.light .navbar .nav-drop:hover .nav-link {
  color: #A6FF00;
}

.header.light .navbar .nav-drop .nav-link::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.87891 8.93921L7.93958 4.87854L12.0002 8.93921" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.header.light .navbar.bg-dark .nav-drop .nav-link::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.87891 8.93921L7.93958 4.87854L12.0002 8.93921" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.header.light .navbar .nav-drop:hover .nav-link::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.87891 8.93921L7.93958 4.87854L12.0002 8.93921" stroke="%23a6ff00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.header:not(.head2) .drop-menu {
  position: unset;
}

.header .drop-menu:hover .menu {
  max-height: 800px;
}

.header .drop-menu:hover .menu .menu-cont {
  cursor: auto;
}

.header .drop-menu .menu .menu-main {
  max-width: 1432px;
  padding: 64px 0;
}

.header .drop-menu .menu .menu-lft {
  width: max-content;
  margin-right: 80px;
  padding-right: 80px;
  position: relative;
}

.header .drop-menu .menu .menu-lft::after {
  content: '';
  position: absolute;
  width: 1px;
  height: calc(100% + 64px);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #FFFFFF26;
}

.header .drop-menu .menu .menu-lft.cont {
  max-width: 347px;
}

.header .drop-menu .menu .menu-lft.cont .main-product-icon {
  width: 150px;
  height: 150px;
}

.header .drop-menu .menu .menu-lft.list,
.header .drop-menu .menu .menu-lft.list>div {
  gap: 16px;
}

.header .drop-menu .menu .menu-lft.list.tab2>div {
  gap: 8px;
}

.header .drop-menu .menu .menu-lft.list .item {
  width: 300px;
  padding: 12px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
}

.header .drop-menu .menu .menu-lft.list .item:hover,
.header .drop-menu .menu .menu-lft.list .item.active {
  color: #A6FF00;
  background: #A6FF001A;
}

.header .drop-menu .menu .menu-lft.list.tab1 {
  width: 696px;
}

.header .drop-menu .menu .menu-lft.list.tab2 {
  width: 380px;
}

.header .drop-menu .menu .menu-rgt.list {
  gap: 100px;
}

.header .drop-menu .menu .menu-rgt.list.tab2 {
  gap: 64px;
}

.header .drop-menu .menu .menu-rgt.list p.title {
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 40px;
}

.header .drop-menu .menu .menu-rgt.list .item {
  min-width: 340px;
  padding: 12px 24px;
  border-radius: 16px;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

.header .drop-menu .menu .menu-rgt.list .item:not(:last-child) {
  margin-bottom: 8px;
}

.header .drop-menu .menu .menu-rgt.list .item:hover {
  color: #A6FF00;
  background: #A6FF0014;
}

.header .drop-menu .menu .menu-rgt.list .item span {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
}

.header .drop-menu .menu .menu-rgt.list .item span.small-text {
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 400;
}

.header .drop-menu .menu .menu-rgt.list .link {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.header .drop-menu .menu .menu-rgt.list .link:not(:last-child) {
  margin-bottom: 32px;
}

.header .drop-menu .menu .menu-rgt.list .link:hover {
  color: #A6FF00;
  text-decoration: underline;
}

.header .drop-menu .menu .img-wrap img {
  width: 320px;
  max-width: 100%;
  height: auto;
  margin-right: 0;
}

.header .drop-menu .menu .for-more a {
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  text-align: left;
  color: rgba(186, 186, 186, 1);
}

.header .drop-menu .menu.posi {
  transform: translateX(-25%);
}

.header .drop-menu .menu.posi.posi1 {
  width: max-content;
}

.header .drop-menu .menu.posi.posi2 {
  width: 340px;
}

.header .drop-menu .menu.posi .menu-list {
  max-height: 264px;
}

.header .drop-menu .menu .bt-demo {
  padding-top: 20px;
  padding-bottom: 20px;
  background: linear-gradient(90deg, rgba(166, 255, 0, 0.82) -0.52%, #FFEDAC 100%), linear-gradient(0deg, #1A1A1A, #1A1A1A);
}

.header .drop-menu .menu .bt-demo a {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
  gap: 4px;
}

.header.light .navbar .drop-menu #search-svg {
  color: #000;
}

.header.light .navbar.bg-dark .drop-menu #search-svg,
.header.light .navbar .drop-menu #search-svg:hover {
  color: #A6FF00;
}

.header .has-account .avatar-pic.vip::after {
  top: 50%;
  transform: translateY(8px);
}

@media (max-width: 1599.98px) {

  .header .navbar .container,
  .header .drop-menu .menu .menu-main {
    max-width: 1280px;
  }

  .header .drop-menu .menu .menu-main {
    padding: 48px 0
  }

  .header.light .navbar .navbar-nav .nav-link {
    padding: 0 8px;
  }

  .header .drop-menu .menu .menu-lft {
    margin-right: 40px;
    padding-right: 40px;
  }

  .header .drop-menu .menu .menu-rgt.list {
    gap: 64px;
  }
}

@media (max-width: 1279.98px) {

  .header .navbar .container,
  .header .drop-menu .menu .menu-main {
    max-width: max-content;
  }

  .header .drop-menu .menu .menu-rgt.list {
    gap: 32px;
  }

  .header .drop-menu .menu .menu-rgt.list .item {
    min-width: 300px;
  }

  .header .drop-menu .menu .menu-lft.list.tab1 {
    width: 557px;
    min-width: 557px;
  }

  .header .drop-menu .menu .menu-lft.list .item {
    width: 250px;
  }
}

@media (max-width: 991.98px) {
  .header .navbar .container {
    max-width: 100%;
  }

  .header .drop-menu .menu .menu-main {
    max-width: 90%;
    padding: 24px 0;
  }

  header.light .navbar-toggler .navbar-toggler-icon span {
    background-color: #000;
  }

  .header .drop-menu .menu {
    max-height: 0;
    overflow: hidden;
  }

  .header .drop-menu:hover .menu {
    max-height: 0;
  }

  .header .drop-menu.nav-drop.active .menu {
    max-height: unset;
  }

  .header.light .navbar .navbar-nav .nav-link {
    padding: 20px 0;
  }

  .header .drop-menu .menu .menu-lft {
    margin-right: 0;
    padding-right: 0;
    margin-bottom: 24px;
  }

  .header .drop-menu .menu .menu-lft::after {
    display: none;
  }

  .header .drop-menu .menu .menu-lft.cont {
    max-width: 100%;
  }

  .header .drop-menu .menu .menu-rgt.list,
  .header .drop-menu .menu .menu-rgt.list.tab2 {
    gap: 0 48px;
  }

  .header .drop-menu .menu .menu-rgt.list .link {
    margin-bottom: 32px;
  }

  .header .drop-menu .menu .menu-rgt.list .item {
    min-width: 340px;
  }

  .header .drop-menu .menu .menu-lft.list .item {
    width: max-content;
    min-width: 250px;
  }

  .header .drop-menu .menu .menu-rgt.list p.title {
    margin-bottom: 32px;
  }


  .header .drop-menu .menu .menu-lft.list.tab1,
  .header .drop-menu .menu .menu-lft.list.tab2 {
    width: 100%;
    min-width: unset;
    overflow: hidden;
    overflow-x: scroll;
  }

  .header .drop-menu .menu .tab-content {
    width: 100%;
  }

  .header .drop-menu .menu.posi.posi1,
  .header .drop-menu .menu.posi.posi2 {
    width: 100%;
    transform: none;
  }

  .header .drop-menu:hover .menu.posi.posi1 .menu-cont {
    overflow: hidden;
    overflow-x: scroll;
  }
}

@media (max-width: 767px) {
  .header .mobile-account .avatar-pic.vip::after {
    top: 50%;
    transform: translateY(5px);
  }
}