/* Shared header/footer CSS extracted from reference page (ve-chung-toi) */
/* HEADER */
#logo{width:auto;}
#logo img{max-height:58px;width:auto}
.transparent #logo img{max-height:58px}
.stuck #logo img{max-height:48px!important}

/* On the transparent header (over the hero), sit the logo on a frosted white
   pill so the white/red/yellow brand marks pop instead of blending into the blue. */
#header.transparent:not(.stuck) #logo{
    align-self:center;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.7);
    border-radius:14px;
    padding:6px 18px;
    box-shadow:0 6px 18px rgba(3,60,82,.28);
}
@media (max-width: 549px){#logo img{max-height:46px}}
#masthead .flex-col.hide-for-medium.flex-right{
	    padding: 10px 10px 10px 36px;
	position: relative;
}
#masthead .flex-col.hide-for-medium.flex-right > ul >.nav-item--quote a{
	display: flex
;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 40px;
    min-width: 100px;
    width: 100%;
    color: #fff;
    border-radius: 48px;
    background: linear-gradient(#00A3E2 0%, #0681b1 100%);
	color: #FFF !important;
    border: 1px solid #fff;
    box-shadow: 4px 3px 15px rgba(3, 60, 82, 0.4);
    padding: 10px 14px 11px;
    letter-spacing: 0em;
    -webkit-transition: ease 0.4s;
    -moz-transition: ease 0.4s;
    -ms-transition: ease 0.4s;
    -o-transition: ease 0.4s;
    transition: ease 0.4s;
}
#masthead .flex-col.hide-for-medium.flex-right::after{
	    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(8px) brightness(1.2) contrast(100%);
    backdrop-filter: blur(8px) brightness(1.2) contrast(100%);
    border-radius: 48px;
    display: block;
    border: 1px solid #ffffff;
}
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */


.nav-megamenu__inner{
  padding: 20px 20px 20px 20px;
}
.nav-solutions__inner{
  padding: 20px 0px 20px 0px;
}
/* FOOTER — brand theme (navy · red accent · yellow headings) */
#footer{
    background: linear-gradient(160deg, #16266B 0%, #0f1b4d 100%);
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--brand-red,#E30613) 0%, var(--brand-red,#E30613) 55%, var(--brand-accent,#FFD200) 100%) 1;
}
#footer .section{
    background: transparent;
    padding-bottom: 0;
}
#footer p, #footer a{
	font-size:14px;
    color:#dfe3f0;
}
#footer h4{
    color: var(--brand-accent,#FFD200);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
}
#footer a:hover{ color:var(--brand-accent,#FFD200) }
#footer .ux-menu-link__text{ color:#dfe3f0 }
#footer .ux-menu-link:hover .ux-menu-link__text{ color:var(--brand-accent,#FFD200) }
#footer i{ color:var(--brand-accent,#FFD200) }
/* Contact highlight box */
.footer-box__inner{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    padding:1rem 1.25rem;
}
/* Social buttons */
#footer .social-icons .button{
    background: rgba(255,255,255,.12)!important;
    border:none!important;
    color:#fff!important;
}
#footer .social-icons .button:hover{ background:var(--brand-red,#E30613)!important }
/* Bottom bar */
#footer .absolute-footer{ color:#aeb6d4 }
#footer .footer-brand__text{ color:#c7cde4 }
.footer-logo{
  width: 80%;
}
.footer-brand__text{
  font-size: 0.9rem;
}
.footer-col--brand > .col-inner{
  margin: 0px 0px -15px 0px;
}
.footer-col--products > .col-inner{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px -15px 0px;
}
@media (min-width:550px){.footer-col--products > .col-inner{
    padding: 0px 0px 0px 100px;
  }}
.footer-box > .col-inner{
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 8px;
}
.footer-col--contact > .col-inner{
  margin: 0px 0px -15px 0px;
}
.footer-bottom__left{
  text-align: center;
}
@media (min-width:550px){.footer-bottom__left{
    text-align: left;
  }}
.footer-bottom__right{
  text-align: center;
}
@media (min-width:550px){.footer-bottom__right{
    text-align: right;
  }}
.footer-bottom__col > .col-inner{
  padding: 30px 0px 0px 0px;
  margin: 1px 0px 0px 0px;
}
.footer-cta{
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: transparent;
}

/* --- Fix: image-cover must fill its padded box (Flatsome ratio boxes) --- */
.image-cover{position:relative;overflow:hidden}
.image-cover > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

/* --- Product mega-menu: full container width (matches original design) --- */
#header .header-nav-main > li.menu-item-design-container-width{position:static}
#header .header-nav-main > li.menu-item-design-container-width > .nav-dropdown{
  width:1000px!important;max-width:94vw;left:auto;right:0;
}
#header .row_dm .col{margin-bottom:0}
#header .row_dm h4{font-size:14px;line-height:1.3}

/* --- Fix: declare the Flatsome icon font (theme references it but never @font-face's it) --- */
@font-face{
  font-family:'fl-icons';
  src:url('/tpl/assets/css/icons/fl-icons__61076cac.woff2') format('woff2'),
      url('/tpl/assets/css/icons/fl-icons__61076cac.woff') format('woff'),
      url('/tpl/assets/css/icons/fl-icons__61076cac.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:block;
}

/* --- Solutions (Giải pháp) mega-menu — match original: single-line headers & items, even columns --- */
#header .header-nav-main > li.nav-item--solutions > .nav-dropdown{ width:1180px!important; max-width:96vw; }
.sub-menu.giai-phap{ align-items:flex-start; padding:12px 0; }
.sub-menu.giai-phap > li{ flex:1 1 0; padding:0 14px; }
.sub-menu.giai-phap > li > a{
  display:block; min-height:0; white-space:nowrap;
  font-weight:700; color:#000; padding:6px 6px; line-height:1.3;
}
.sub-menu.giai-phap .nav-column{ margin-top:6px; }
.sub-menu.giai-phap .nav-column > li{ margin:0!important; }
.sub-menu.giai-phap .nav-column > li > a{
  display:block; white-space:nowrap; padding:8px 6px!important; line-height:1.3;
}

/* --- Floating contact action buttons (moved out of the footer partial) --- */
.fixed-action-buttons{position:fixed;bottom:70px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.action-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;text-decoration:none;box-shadow:0 4px 6px rgba(0,0,0,.2);transition:transform .3s ease}
.action-btn img{width:24px;height:24px}
.btn-phone{background-color:#4CAF50}
.btn-email{background-color:#FFA000}
.btn-contact{background-color:#1976D2}
.action-btn:hover{transform:scale(1.1)}

/* --- Home feature / stat columns (were per-id Flatsome cols, now looped from settings) --- */
.home-feature-col > .col-inner{padding:2rem;border-radius:8px}
.home-stat-col > .col-inner{margin:0}
@media (min-width:550px){.home-stat-col > .col-inner{margin:0 0 -30px 0}}

/* --- Product mega-menu inner (semantic replacements for Flatsome ids) --- */
.nav-megamenu__cover{padding-top:75%}
.nav-megamenu__name h4{font-size:14px;line-height:1.3;text-align:center}
.nav-megamenu__name h4 a{color:var(--brand-red,#E30613)}

/* --- Fit all 8 top-level menu items on one row (added "Tin tức") --- */
@media (min-width:850px){
  #masthead .flex-col.hide-for-medium.flex-right{ padding-left:12px; }
  #header .header-nav-main.nav-right{ flex-wrap:nowrap; }
  #header .header-nav-main.nav-right > li{ margin:0; }
  #header .header-nav-main.nav-right > li > a.nav-top-link{ padding:0 9px; font-size:13px; letter-spacing:0; white-space:nowrap; }
  #header .header-nav-main.nav-right .icon-angle-down{ margin-left:2px; }
  #masthead .flex-col.hide-for-medium.flex-right > ul > .nav-item--quote{ margin-left:6px; }
  #masthead .flex-col.hide-for-medium.flex-right > ul > .nav-item--quote a{
    min-width:auto; width:auto; padding:9px 14px 10px; font-size:12px; white-space:nowrap;
  }
}

/* Footer logo: subtle light halo so the navy wordmark stays legible on the navy bg */
.footer-logo img{ filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }

/* --- Off-canvas mobile drawer: the mirror lost the theme's panel background rule --- */
.off-canvas .mfp-content{
  background-color:#fff;
  box-shadow:0 0 30px rgba(0,0,0,.25);
}
.off-canvas-left.dark .mfp-content,.off-canvas-right.dark .mfp-content{background-color:rgba(0,0,0,.95)}
/* Floating contact buttons must sit under the menu overlay (mfp z-index 1042), not over it */
.fixed-action-buttons{z-index:900}

/* --- Mobile bottom navigation (partials/mobile-bottom-nav.blade.php) --- */
.mobile-bottom-nav{display:none}
@media (max-width:849px){
  .mobile-bottom-nav{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:#fff;
    border-top:1px solid #e6e8ef;
    box-shadow:0 -4px 16px rgba(16,24,40,.10);
    padding:6px 4px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
  }
  .mobile-bottom-nav__item{
    flex:1 1 0;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
    padding:6px 2px;
    font-size:10px;font-weight:600;line-height:1;text-align:center;
    color:#667085;text-decoration:none;
  }
  .mobile-bottom-nav__item i{font-size:17px}
  .mobile-bottom-nav__item.is-active,
  .mobile-bottom-nav__item:hover{color:var(--brand-red,#E30613)}

  /* Centre "Gọi ngay" sits in a raised brand-red circle */
  .mobile-bottom-nav__item--call{color:var(--brand-navy,#16266B)}
  .mobile-bottom-nav__call{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;margin-top:-24px;border-radius:50%;
    background:linear-gradient(160deg,var(--brand-red,#E30613),#b8050f);
    color:#fff;border:3px solid #fff;
    box-shadow:0 6px 14px rgba(227,6,19,.40);
  }
  .mobile-bottom-nav__call i{font-size:18px}

  /* Room for the bar + drop the floating stack (it duplicates the bar on phones) */
  body{padding-bottom:66px}
  .fixed-action-buttons{display:none}
}