#search-trigger {
    cursor: pointer;
  }
  #search-popup {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    justify-content: center;
    z-index: 9999;
    background: rgb(196 196 196 / 30%);
  }
  #search-input {
    align-self: center;
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0;
    border-bottom: 0.5px solid #A3A3A3;
    background-color: #fff;
  }
  #search-input * {
    align-self: center;
  }
  #search-type {
    width: 100%;
    border: none;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
    color: #757575;
  }
  #search-btn {
    font-size: 16px;
    font-weight: 500;
  }
  #search-result {
    min-height: 490px;
    width: 100%;
    padding-top: 80px;
  }
  #search-result .container {
    background-color: #fff;
    padding: 20px 40px;
  }
  body.search-popup-open {
  /* .search-popup-open */
    overflow: hidden;
  }
  .search-popup-open #loc_delivery {
    display: none
  }
  .search-header svg {
    display: none;
    cursor: pointer;
  }
  .wrapper-search-popup {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .group-recommend {
    padding: 20px 40px;
  }

  .resultsearch {
    display: none;
  }
  .results { padding: 20px 40px }
  .resultsearch label {
    font-weight: 600;
    padding-bottom: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #AAAAAA;
  }

  ul.result_product {
    max-height: 300px;
    overflow: auto;
  }

  .group-promotion ul {
    margin: 0;
  }
  .group-promotion li {
    list-style: none;
    margin-bottom: 12px;
  }
  .group-promotion li a {
    color: inherit;
  }

  .group-recent {
    position: relative;
    padding: 20px 40px;
  }
  .group-recent ul {
    margin: 0;
  }
  .group-recent li {
    list-style: none;
    display: inline-block;
    margin-right: 60px;
  }
  .group-recent li a {
    color: inherit;
  }

  .last-search svg {
    width: 20px;
    vertical-align: middle;
  }
  ul.last-search a {
    vertical-align: middle;
    padding: 0 10px;
  }
  ul.last-search li span {
    cursor: pointer;
  }
  .delete-all-history {
    position: absolute;
    top: 25px;
    right: 40px;
    text-decoration: underline;
    color: #e11d1d;
    cursor: pointer;
    font-size: 12px;
  }

  form.search.search-modal__form {
    position: relative;
  }

  button.search__button svg {
    width: 25px;
    color: #495057;
    fill: #757582;
  }

  button.search__button.field__button {
    position: absolute;
    top: 50%;
    margin-top: -12px;
  }

  .close-search {
    display: none;
    position: absolute;
    right: 65px;
    top: 10px;
    cursor: pointer;
  }

  .site-overlay {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background: #0000005c;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .3s linear;
    display: block !important;
  }

  .search-popup-open .site-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    z-index: -1;
    cursor: pointer;
  }

  @media (min-width: 991px) {
    .group-recent ul {
      column-count: 3;
    }
    .group-promotion li a {
      font-size: 12px;
      font-weight: 400;
    }
    .group-recent li a {
      font-size: 12px;
      font-weight: 400;
    }
  }

  .moreresult {
    padding: 10px 40px;
    border-top: 1px solid #AAAAAA;
  }
  .moreresult * {
    align-self: center;
  }
  .moreresult p {
    margin: 0;
    font-size: 12px !important;
  }
  .moreresult svg {
    width: 13px;
  }

  @media (max-width: 992px) {
    .icon-key-mobile {
        height: auto!important;
        width: 10px!important;
    }
    body.grid-view.search-popup-open .products {
      -ms-flex: 0 0 100%!important;
      flex: 0 0 100%!important;
      max-width: 100%!important;
    }
    button.search__button svg {
      width: 20px;
    }
    #search-result {
      padding-left: 0;
      padding-right: 0;
    }
    #search-result {
      padding-top: 55px;
    }
    #search-input {
      height: 55px;
    }
    .group-recommend {
      padding: 20px;
    }
    #search-input .container {
      padding: 0 20px;
    }
    #search-type {
      font-size: 14px;
    }
    #search-btn {
      font-size: 12px;
      text-decoration: underline;
    }
    .results {
      padding: 20px;
    }
    .group-recommend h3 {
      font-size: 16px;
    }
    .products .card-body {
      padding: 8px 0px 10px;
    }
    .moreresult {
      padding: 10px 20px;
    }
  }