@font-face {
  font-family: adelle;
  src: url(https://res.cloudinary.com/yeungon/raw/upload/v1662636833/font/vietnamese_adelleSansEXT-Regular.otf);
}


@font-face {
  font-family: Gloria;
  src: url(https://res.cloudinary.com/yeungon/raw/upload/v1669902162/font/vietnamese__good_header_UTM_Gloria.ttf);
}


* {
  font-family: var(--font_common);
  font-size: 18px;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

:root {  
  --font_adelle: adelle;
  --font_common: var(--font_adelle) !important;
  --color-main: #ff5722;
}

.font_tiengviet-title {
  font-family: Gloria;
}

.font_tiengviet-style {
  font-family: adelle;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inform {
  color: var(--color-main);
}

.btn-search {
  height: 38px;
  color: var(--color-main);
  background-color: white;
  padding: 2px 18px;
  border: 2px solid var(--color-main);
  font-size: 16px;
  border-radius: 1px;
  transition: transform 0.3s ease;
}

.btn-search:hover {
  transform: scale(1.1);
  color: white;
  font-weight: 900;
  background-color: var(--color-main);
}

.form-control {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#input_search {
  padding: 12px 0 12px 15px;
  max-width: 575px;
  background-color: #fffcf4;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin-top: 2rem;
  /* Adding a soft shadow */
}

#navbar-name {
  display: none;
}

@media (max-width: 480px) {
  /* Styles for ultra-small devices */

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  .header {
    display: none;
  }

  #navbar-name {
    display: block;
  }
}



/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767px) {}



/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991px) {}



/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199px) {}



/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {}