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

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

/* === Typography: Roboto thống nhất toàn site === */
:root {
  --mb-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mb-fs-base: 15px;
  --mb-fs-sm: 13px;
  --mb-fs-xs: 12px;
  --mb-fs-nav: 14px;
  --mb-lh: 1.55;
  --mb-lh-tight: 1.35;
  --mb-phone-color: #ff9800;
  --mb-phone-hover: #ffdf6b;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--mb-font) !important;
  font-size: var(--mb-fs-base);
  line-height: var(--mb-lh);
  font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6,
.heading-font, .banner h1, .banner h2 {
  font-family: var(--mb-font) !important;
  line-height: var(--mb-lh-tight);
  letter-spacing: 0;
}

.alt-font {
  font-family: var(--mb-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* === Top bar: cùng cỡ chữ, căn giữa dọc === */
#top-bar {
  font-family: var(--mb-font);
}

#top-bar .flex-row.container {
  align-items: center;
}

#top-bar .nav-small.nav > li.html,
#top-bar .nav-small.nav > li.html_topbar_left,
#top-bar .mb-topbar-brand,
#top-bar .mb-topbar-brand strong,
#top-bar .mb-topbar-brand .topbar-sub {
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-family: var(--mb-font) !important;
  text-transform: none !important;
}

#top-bar .mb-topbar-brand strong {
  font-weight: 700;
  display: block;
}

#top-bar .mb-topbar-brand .topbar-sub {
  font-weight: 400;
  display: block;
  margin-top: 1px;
  opacity: 0.95;
}

#top-bar #header-contact,
#top-bar #header-contact li,
#top-bar #header-contact li a,
#top-bar #header-contact li a span {
  font-family: var(--mb-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#top-bar #header-contact {
  display: none !important;
}

/* Topbar liên hệ: 2 dòng, không chồng chữ */
#top-bar .mb-topbar-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  max-width: 100%;
  text-align: right;
}

#top-bar .mb-topbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 8px;
  font-family: var(--mb-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  color: #fff !important;
}

#top-bar .mb-topbar-row i {
  font-size: 14px !important;
  opacity: 0.92;
  flex-shrink: 0;
}

#top-bar .mb-topbar-row a {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: #fff !important;
  text-decoration: none !important;
}

#top-bar .mb-topbar-row a.mb-phone {
  color: var(--mb-phone-color) !important;
  font-weight: 700 !important;
}

#top-bar .mb-topbar-row a.mb-phone:hover,
#top-bar .mb-topbar-row a.mb-phone:focus,
#top-bar .mb-topbar-row a.mb-phone:active {
  color: var(--mb-phone-hover) !important;
}

#top-bar .mb-topbar-row .mb-sep {
  opacity: 0.45;
  font-size: 11px;
  padding: 0 1px;
}

#top-bar .mb-topbar-phones-row {
  white-space: nowrap;
}

#top-bar .html_topbar_right {
  max-width: 100%;
}

#top-bar .header-social-icons .icon {
  margin-left: 4px;
}

#top-bar .header-social-icons .icon i {
  font-size: 16px !important;
}

#top-bar .mb-topbar-phones,
#top-bar .html_topbar_right,
#top-bar .mb-topbar-phones a {
  font-family: var(--mb-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}

@media (min-width: 850px) {
  #top-bar .flex-right {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }
  #top-bar .flex-left {
    flex: 0 0 200px;
    max-width: 200px;
  }
  #top-bar .flex-center {
    display: none;
  }
}

/* Header + menu */
#top-bar a {
  font-family: var(--mb-font);
}

.header-main .nav > li > a,
#wide-nav .header-nav .nav > li > a,
.nav-dropdown > li > a {
  font-family: var(--mb-font) !important;
  font-size: var(--mb-fs-nav) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
}

#mega-menu-title {
  font-family: var(--mb-font) !important;
  font-size: var(--mb-fs-nav) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

#mega_menu a {
  font-family: var(--mb-font) !important;
  font-size: var(--mb-fs-sm) !important;
  line-height: 1.45 !important;
}

/* Mega menu: chỉ mở khi click, không che menu chính */
#mega_menu {
  display: none !important;
  z-index: 200;
}

#mega_menu.active,
.ot-vm-hover:hover #mega_menu {
  display: block !important;
}

body.home.ot-menu-show-home #mega_menu {
  display: none !important;
}

body.home.ot-menu-show-home #mega_menu.active {
  display: block !important;
}

#mega-menu-wrap {
  position: relative;
  z-index: 50;
}

#wide-nav,
#wide-nav .header-nav,
.header-main .header-nav {
  position: relative;
  z-index: 100;
}

#wide-nav .header-nav > li > a,
.header-main .nav > li > a {
  position: relative;
  z-index: 101;
  pointer-events: auto !important;
}

/* Overlay OT menu không chặn header/footer click */
.ot-overplay.active-menu #header,
.ot-overplay.active-menu #wide-nav,
.ot-overplay.active-menu #footer {
  position: relative;
  z-index: 9999;
}

.ot-overplay.active-menu main#main:after,
.ot-overplay.active-menu footer#footer:after {
  pointer-events: none;
}

/* Search dropdown luôn trên cùng */
.header .live-search-results {
  z-index: 99999 !important;
}

.header input[type="search"],
.header .search-field {
  font-family: var(--mb-font);
  font-size: var(--mb-fs-sm);
}

/* === Footer: đồng nhất cỡ & font === */
#footer,
#footer p,
#footer li,
#footer a,
#footer span,
#footer .button,
#footer .featured-box {
  font-family: var(--mb-font) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

#footer h4,
#footer h4 strong {
  font-family: var(--mb-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.35em;
  text-transform: none;
}

#footer ul {
  margin-bottom: 0;
}

#footer ul li {
  margin-bottom: 0.35em;
}

#footer span[style*="font-size"] {
  font-size: inherit !important;
}

#footer .featured-box p {
  margin-bottom: 0.55em;
}

#footer .featured-box strong,
#footer .featured-box span strong {
  font-family: var(--mb-font) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Hotline footer: số nổi bật, cùng font/cỡ với dòng tên */
#footer .featured-box .icon-box-text {
  flex: 1;
  min-width: 0;
}

#footer .mb-hotline {
  margin: 0 0 0.55em 0;
  padding: 0;
  display: block;
}

#footer .mb-hotline-num {
  display: inline;
  font-family: var(--mb-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--mb-phone-color) !important;
  text-decoration: none !important;
}

#footer .mb-hotline-num:hover,
#footer .mb-hotline-num:focus,
#footer .mb-hotline-num:active {
  color: var(--mb-phone-hover) !important;
}

#footer .mb-hotline-label {
  display: inline;
  font-family: var(--mb-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #fff !important;
}

#footer .featured-box .icon-box-img {
  width: 48px;
  max-width: 48px;
}

#footer .follow-icons a {
  font-size: 0 !important;
}

/* Shop / widget */
.product-small .product-title,
p.name.product-title a,
.woocommerce-loop-product__title {
  font-family: var(--mb-font) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.widget-title,
span.widget-title {
  font-family: var(--mb-font) !important;
  font-size: 14px !important;
  line-height: 38px !important;
}

.price span.amount,
.woocommerce-Price-amount {
  font-family: var(--mb-font);
  font-size: 15px;
  font-weight: 700;
}

button, .button, input[type="submit"] {
  font-family: var(--mb-font) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Topbar brand column width (desktop) */
@media (min-width: 850px) {
  #top-bar .nav-left.medium-nav-center {
    justify-content: flex-start !important;
  }
  #top-bar .mb-topbar-brand {
    text-align: left;
    white-space: normal;
  }
}

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


}