/*
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.   ***************/

/* Ẩn đánh giá (sao) tại trang sản phẩm và danh mục */
.woocommerce-product-rating,
.star-rating {
  display: none !important;
}

/* Custom Share Section Styles */
.social-icons.share-icons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 0px !important;
  padding-top: 20px !important;
  border-top: 1px dashed #f0f0f0 !important;
}

.social-icons.share-icons:before {
  content: "Chia sẻ:";
  font-size: 12px;
  color: #000;
  letter-spacing: 0.8px;
  margin-right: 5px;
  font-family: "Quicksand";
}

.social-icons.share-icons a.icon {
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 17px !important;
  border: none !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  background-color: #f8f9fa !important;
  color: #444 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.social-icons.share-icons a.icon:hover {
  transform: translateY(-5px) scale(1.1) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
  color: #fff !important;
  background-color: #333 !important; /* Fallback for unknown icons */
}

/* Official Brand Colors on Hover */
.social-icons.share-icons a.whatsapp:hover {
  background-color: #25d366 !important;
}
.social-icons.share-icons a.facebook:hover {
  background-color: #1877f2 !important;
}
.social-icons.share-icons a.twitter:hover {
  background-color: #1da1f2 !important;
}
.social-icons.share-icons a.email:hover {
  background-color: #ea4335 !important;
}
.social-icons.share-icons a.pinterest:hover {
  background-color: #bd081c !important;
}
.social-icons.share-icons a.linkedin:hover {
  background-color: #0a66c2 !important;
}

/* Responsive Fix for Share Section */

/* Default: Desktop/Tablet styling for branding text */
.logo-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 5px 0 !important;
}

.logo-branding-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.main-branding {
  font-family: "Yeseva One", cursive !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: #5a6873 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.sub-branding {
  font-size: 16px !important; /* Desktop size */
  color: #94a3b8 !important;
  display: block !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

@media (max-width: 849px) {
  /* Force logo and branding to the far left on mobile */
  .header-inner.medium-logo-center {
    justify-content: flex-start !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Hide the empty left column that's pushing the logo */
  .header-inner.medium-logo-center .flex-left {
    display: none !important;
  }

  /* Reset logo column to be first and grow */
  .header-inner.medium-logo-center #logo {
    order: 1 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 1 !important;
    text-align: left !important;
  }

  /* RESET LOGO IMAGE MARGIN AND HIDE DUPLICATE */
  .header-inner.medium-logo-center #logo img {
    margin-left: 0 !important;
    margin-right: 8px !important;
    display: none !important;
  }

  .header-inner.medium-logo-center #logo img.header_logo {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Reset flex-right (menu icon container) */
  .header-inner.medium-logo-center .flex-right {
    order: 2 !important;
    flex-grow: 0 !important;
  }

  .logo-wrapper {
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  .logo-branding-text {
    align-items: flex-start !important;
  }

  .main-branding {
    font-size: 16px !important; /* Responsive mobile size */
  }
  .sub-branding {
    font-size: 9px !important; /* Responsive mobile size */
  }
  .header-logo {
    max-height: 52px !important;
    width: auto !important;
  }
}