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

/* Override flatsome.css default (b,strong{font-weight:inherit;font-weight:bolder}) */
b, strong {
    font-weight: inherit;
    /* font-weight: bolder; */
}

/* Reveal Flatsome data-animate content (flatsome.js is not loaded).
   flatsome.css forces opacity:0!important, so override with !important.
   content-reveal.js adds html.bx-anim + .bx-in for a fade-in-on-scroll effect;
   without JS the content stays visible (fail-safe). */
[data-animate], .slider [data-animate] { opacity: 1 !important; }
html.bx-anim [data-animate] {
    opacity: 0 !important; transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
html.bx-anim [data-animate].bx-in { opacity: 1 !important; transform: none; }

/* Flatsome icon font (fonts copied to ./icons/) — the customizer.css @font-face
   points at a WordPress path that doesn't exist here, so redeclare it. */
@font-face {
    font-family: "fl-icons";
    src: url("icons/fl-icons.woff2") format("woff2"),
         url("icons/fl-icons.woff") format("woff"),
         url("icons/fl-icons.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* ===== Betongxanh header / nav ===== */
/* Inner pages: solid green, sticks to top on scroll (native sticky, no JS/spacer) */
#header.header { position: sticky; top: 0; z-index: 30; }
#header .header-main { background-color: #16733a; transition: background-color .3s ease; }

/* Homepage: header overlays the hero banner.
   At top = semi-transparent green (#16733a99, ~60%); on scroll = solid green + fixed. */
body.has-hero #header.header { position: absolute; left: 0; right: 0; top: 0; }
body.has-hero #header .header-main { background-color: #16733a99; }
body.has-hero #header.bx-stuck { position: fixed; }
body.has-hero #header.bx-stuck .header-main { background-color: #16733a; }
body.has-hero #header .header-bg-container { display: none; }
body.has-hero #main { margin-top: 0; }
#header .header-main { min-height: 90px; }
#header .header-inner { padding: 0; min-height: 90px; align-items: center; }
#logo { display: flex; align-items: center; }
#logo img.header-logo { display: block !important; height: 56px !important; max-height: none !important; width: auto !important; }

/* Header search (after language icons) */
#header .header-search > a .icon-search { font-size: 17px; }
#header .bx-search-dropdown { min-width: 300px; padding: 14px !important; }
#header .bx-searchform { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
#header .bx-searchform input[type=search] { flex: 1; border: 0; outline: 0; padding: 9px 12px; font-size: 14px; min-width: 0; }
#header .bx-searchform button { border: 0; background: #16733a; color: #fff; padding: 0 14px; align-self: stretch; cursor: pointer; }
#header .bx-searchform button:hover { background: #0f5a2c; }
#logo img.header-logo-dark { display: none !important; }
#header .header-nav > li > a { color: #fff !important; font-weight: 600; }
#header .header-nav > li > a:hover { color: #bfe6cd !important; }
#header .header-nav .icon-angle-down { color: #fff; }
#header .nav-dropdown { background: #fff; border-radius: 4px; }
#header .nav-dropdown li a { color: #222 !important; }
#header .nav-dropdown li a:hover { color: #16733a !important; background: #f2f7f4; }
#header .lang-item a { color: #fff !important; padding: 0 6px; display: inline-flex; align-items: center; }
#header .lang-item img { width: 18px; height: auto; border: 1px solid rgba(255,255,255,.4); }
#header .lang-item.current-lang img { outline: 2px solid #fff; }

/* ===== Dropdown submenu (hover) ===== */
#header .header-nav li.has-dropdown { position: relative; }
#header .header-nav li.has-dropdown > ul.nav-dropdown {
    position: absolute; top: 100%; left: 0; min-width: 230px; margin: 0; padding: 8px 0;
    list-style: none; background: #fff; border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 200;
}
#header .header-nav li.has-dropdown:hover > ul.nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
#header .nav-dropdown li { list-style: none; margin: 0; }
#header .nav-dropdown li a {
    display: block; padding: 9px 20px; white-space: nowrap;
    color: #333 !important; font-weight: 500; text-transform: none;
}
#header .nav-dropdown li a:hover { background: #f1f7f3; color: #16733a !important; }
#header .header-nav .icon-angle-down { font-size: 12px; margin-left: 4px; }


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


}