/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

.quote-illustration {
  margin-bottom: 15px;
  text-align: center;
}
.quote-illustration img {
  max-width: 100%;
  height: auto;
}
@media(min-width: 768px) {
  #bath-quote-form-Slim-mo-quay {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .quote-illustration {
    flex: 1;
    margin: 0;
    text-align: center;
  }
  .quote-content-wrapper {
    flex: 2;
  }
}

}

/* ===== DANH MỤC CON ===== */
.tbvs-subcats .tbvs-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 18px !important;
  justify-items: center !important;
  align-items: start !important;
}

.tbvs-subcats .tbvs-card-circle{
  display:inline-block !important;
  width:auto !important;
  max-width:none !important;
  text-decoration:none !important;
}

.tbvs-subcats .tbvs-circle{
  width: 110px !important;
  height: 110px !important;
  border-radius: 999px !important;
  background: #cfcfcf !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  overflow:hidden !important;
}

.tbvs-subcats .tbvs-circle-img{
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  opacity: .45 !important;
  max-width:none !important;
  margin:0 !important;
  display:block !important;
}

.tbvs-subcats .tbvs-circle-title{
  position:absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  text-align:center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color:#fff !important;
  text-transform: uppercase !important;
  pointer-events:none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

.tbvs-subcats .tbvs-card-circle:hover .tbvs-circle{
  background:#00a8e8 !important;
}

@media (max-width: 768px){
  .tbvs-subcats .tbvs-grid{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
  .tbvs-subcats .tbvs-circle{
    width: 86px !important;
    height: 86px !important;
  }
  .tbvs-subcats .tbvs-circle-img{
    width: 34px !important;
    height: 34px !important;
  }
  .tbvs-subcats .tbvs-circle-title{
    font-size: 10px !important;
  }
}


/* ===== THƯƠNG HIỆU ===== */
.tbvs-brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tbvs-brand {
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    transition: .2s;
}

.tbvs-brand:hover {
    border-color: #00a8e8;
    color: #00a8e8;
}