.tlpl-body-layout {
  height: 100vh;
  min-height: -webkit-fill-available; /* cho các trình duyệt WebKit (bao gồm Safari và Chrome) */
  min-height: fill-available; /* cho các trình duyệt không phải WebKit */
  display: flex;
  background-color: #F2F4F7;
}

.tlpl-search-layout-container {
  flex: 1;
  margin: 0 auto;
  overflow: auto;
  font-family: "Montserrat", sans-serif;
}

.tlpl-search-layout-container .tlpl-search-branch {
  margin-top: 1.75rem;
  text-align: center;
}

.tlpl-search-logo {
  font-family: "Bruno Ace", sans-serif;
  color: #060047;
  font-size: 2.5rem;
  letter-spacing: 0.25rem;
  text-decoration: none;
}

.tlpl-search-logo span {
  font-family: "Bruno Ace", sans-serif;
  color: #e90064;
}

.tlpl-search-slogan {
  margin: 1.5rem 0;
  font-size: 1.375rem;
}

.tlpl-search-content {
  /* background-color: #ab5dca; */
}

.tlpl-search-content-item {
  width: 17.5rem;
  height: 17.5rem;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0.25rem;
  margin: 2rem 0;
  box-shadow: 0 0 0.5rem #ccc;
  cursor: pointer;
}

.tlpl-search-content-item .tlpl-search-content-item-title {
  margin: 0.5rem 0;
  font-size: 1.375rem;
  font-weight: 700;
}

.tlpl-search-content-item img {
  width: 3rem;
  height: auto;
}

.tlpl-search-content-item-quantity {
  margin: 0;
  opacity: 0.4;
}

/* sub break */
@media only screen and (max-width:1980px) {
  .container {
    max-width: 1200px;
    width: 90%;
  }

  .tlpl-search-branch {
    margin-top: 1.75rem;
  }

  .container .content {
    margin-top: 0rem !important;
  }

  .tlpl-search-slogan {
    text-wrap: nowrap;
  }

  .tlpl-search-content-item {
    width: 13rem;
    height: 13rem;
    box-sizing: border-box;
    background-color: #fff;
    padding: 0.25rem;
    margin: 2rem 0;
    box-shadow: 0 0 0.5rem #ccc;
    cursor: pointer;
  }
  
  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 1rem;
    font-weight: 700;
  }
  
  .tlpl-search-content-item img {
    width: 3rem;
    height: auto;
  }
  
  .tlpl-search-content-item-quantity {
    font-size: 0.85rem;
    opacity: 0.4;
  }
}

@media only screen and (max-width:1280px) {
  .container {
    max-width: 900px;
  }

  .tlpl-search-slogan {
    text-wrap: wrap;
  }
}

@media only screen and (max-width:1024px) {
  .container {
    max-width: 700px;
  }

  .tlpl-search-content-item {
    width: 11rem;
    height: 11rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 1rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.5rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width:768px) {
  .container {
    
  }

  .tlpl-search-layout-container .tlpl-search-branch {
    margin-top: 1.5rem;
  }

  .tlpl-search-logo {
    font-size: 2rem;
    letter-spacing: 0.125rem;
  }

  .tlpl-search-slogan {
    margin: 1rem 0;
    font-size: 1.25rem;
  }

  .tlpl-search-content-item {
    width: 9rem;
    height: 9rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 0.85rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.25rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width:640px) {
  .tlpl-search-content-item {
    width: 8rem;
    height: 8rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 0.8rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.15rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.75rem;
  }
}

/* sub-break */
@media only screen and (max-width:580px) {
  .tlpl-search-content-item {
    width: 11rem;
    height: 11rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 1rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.25rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width:480px) {
  html {
    font-size: 14px;
  }

  .tlpl-search-layout-container .tlpl-search-branch {
    margin-top: 1.25rem;
  }

  .tlpl-search-logo {
    font-size: 1.5rem;
    letter-spacing: 0.125rem;
  }

  .tlpl-search-slogan {
    font-size: 1rem;
  }

  .tlpl-search-content-item {
    width: 11rem;
    height: 11rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 0.9rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.15rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.75rem;
  }
}

/* sub-break */
@media only screen and (max-width:420px) {
  .tlpl-search-content-item {
    width: 10rem;
    height: 10rem;
  }

  .tlpl-search-content-item {
    width: 10rem;
    height: 10rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 0.9rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.15rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.75rem;
  }
}

@media only screen and (max-width:360px) {
  html {
    font-size: 12px;
  }

  .tlpl-search-branch {
    margin-top: 1rem;
  }

  .tlpl-search-content-item {
    width: 11rem;
    height: 11rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 1rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.25rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.9rem;
  }
}

/* sub break */
@media only screen and (max-width:320px) {
  .tlpl-search-content-item {
    width: 9.5rem;
    height: 9.5rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 1rem;
  }
  
  .tlpl-search-content-item img {
    width: 2.25rem;
  }

  .tlpl-search-content-item-quantity {
    font-size: 0.9rem;
  }
}

@media only screen and (max-width:280px) {
  .tlpl-search-logo {
    font-size: 1.25rem;
  }

  .tlpl-search-content-item {
    width: 8rem;
    height: 8rem;
  }

  .tlpl-search-content-item .tlpl-search-content-item-title {
    font-size: 0.8rem;
  }
  
  .tlpl-search-content-item img {
    width: 2rem;
  }
}