.wrapper-main-menu {
  background-image: url("../assest/image/navbar.png");
  background-color: var(--primary-orange-1);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.menu-navbar {
  margin: 0 50px;
}

.logo a {
  display: block;
}

.logo {
  width: 320px;
  max-height: 100px;
}

  .logo img {
    width: 200px;
    height: 100%;
  }

.menu-list li a {
  padding: 10px 15px;
  border-radius: 30px;
  color: var(--primary-black-1);
  font-weight: 600;
  font-size: var(--fs-16);
}

.menu-list li a:hover {
  color: var(--primary-orange-2);
}

.menu-list .active-menu-home:hover {
  color: var(--black);
}

.active-menu-home {
  background-color: #faae35;
}

.navbar-social img {
  width: 40px;
  height: 40px;
}

/*  DRAWER */
.btn-open-drawer {
  color: var(--primary-black-1);
  padding: 0;
  border: none;
  width: 30px;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.nav-device-menu {
  row-gap: 10px;
}

.nav-device-menu li a {
  font-size: 14px;
}

/* CSS MENU ÁP DỤNG CHO TOÀN BỘ PAGE */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .menu-list {
    gap: 0px !important;
  }

  .menu-navbar {
    margin: 0 20px;
  }

  .menu-list li a {
    padding: 6px 13px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .menu-navbar {
    margin: 0 20px;
  }

  .navbar-nav {
    gap: 10px !important;
  }

  .menu-list li a {
    font-size: var(--fs-15);
    padding: 7px 9px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .btn-open-drawer {
    display: block !important;
  }
}

@media (max-width: 1199.98px) {
  .menu-navbar {
    margin: 0 20px;
  }
  .nav-device-menu li a {
    font-size: var(--fs-15);
  }

  .offcanvas-social {
    padding-left: 15px;
    margin-top: 15px !important;
  }
}

@media (max-width: 768px) {
  .nav-device-menu {
    row-gap: 5px;
  }
  .logo {
    width: 260px;
  }

  .menu-navbar {
    margin: 0 15px;
  }

  .register-now {
    display: flex;
    justify-content: center;
  }
}