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

#header{display:none}
#footer{display:none}
/* --- Base layout from before (keep yours) --- */
:root{ --header-h:70px; }
.msb-hero{ position:relative; height:calc(100vh - var(--header-h)); overflow:hidden; isolation:isolate; }
.msb-hero .msb-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .45s ease; z-index:0; }
.msb-hero .msb-panels{ position:absolute; left:3rem; bottom:9rem; max-width:600px; z-index:2; color:#fff; }
.msb-hero .msb-panel{ opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.msb-hero .btn{ display:inline-block; padding:.75rem 1.1rem; border-radius:10px; background:#ff4d2d; color:#fff; font-weight:700; text-decoration:none; }
.msb-hero .btn.white{ background:#fff; color:#111; }

/* --- NAV styling (keep yours) --- */
.msb-hero .msb-nav{ 
	position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    right: 0;
    bottom: 2%;
    width: 90%;
    z-index: 3;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: .5rem;
    padding: .55rem .8rem;
    margin: 0;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(160%) blur(8px);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .06) inset;}
.msb-hero .msb-nav .nav-item{
	border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .6rem 1.8rem;
    border-radius: 12px;
    font: 600 12px / 1.2 system-ui, Segoe UI, Roboto, Arial;
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.msb-hero .msb-nav .nav-item .nav-ico{ font-size:18px; line-height:1; }
.msb-hero .msb-nav .nav-item:hover{ background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }

/* -----------------------------
   CSS-ONLY HOVER VIA :has()
   ----------------------------- */

/* Default (khi không hover nav) hiển thị HOME */
.msb-hero:not(:has(.msb-nav .nav-item:hover)) .bg--home{ opacity:1; }
.msb-hero:not(:has(.msb-nav .nav-item:hover)) .panel--home{ opacity:1; transform:none; pointer-events:auto; }

/* Hover mỗi nút → bật nền + panel tương ứng */
.msb-hero:has(.msb-nav .nav-item[data-state="home"]:hover)      .bg--home{ opacity:1; }
.msb-hero:has(.msb-nav .nav-item[data-state="about"]:hover)     .bg--about{ opacity:1; }
.msb-hero:has(.msb-nav .nav-item[data-state="invest"]:hover)    .bg--invest{ opacity:1; }
.msb-hero:has(.msb-nav .nav-item[data-state="personal"]:hover)  .bg--personal{ opacity:1; }
.msb-hero:has(.msb-nav .nav-item[data-state="sme"]:hover)       .bg--sme{ opacity:1; }

.msb-hero:has(.msb-nav .nav-item[data-state="home"]:hover)      .panel--home{ opacity:1; transform:none; pointer-events:auto; }
.msb-hero:has(.msb-nav .nav-item[data-state="about"]:hover)     .panel--about{ opacity:1; transform:none; pointer-events:auto; }
.msb-hero:has(.msb-nav .nav-item[data-state="invest"]:hover)    .panel--invest{ opacity:1; transform:none; pointer-events:auto; }
.msb-hero:has(.msb-nav .nav-item[data-state="personal"]:hover)  .panel--personal{ opacity:1; transform:none; pointer-events:auto; }
.msb-hero:has(.msb-nav .nav-item[data-state="sme"]:hover)       .panel--sme{ opacity:1; transform:none; pointer-events:auto; }


/* ========== 1) Logo góc trái trên ========== */
.msb-hero .msb-brand{
  position:absolute; top:14px; left:14px; z-index:6;
  display:inline-flex; align-items:center;
  background:#fff; border-radius:12px; padding:8px 10px;
  box-shadow:0 6px 30px rgba(0,0,0,.08);
}
.msb-hero .msb-brand img{ height:42px; width:auto; display:block; }

/* ========== 2) Thanh topbar ========== */
.msb-hero .msb-topbar{
  position:absolute; top:14px; right:14px; z-index:6;
  display:flex; gap:10px; align-items:center;
  background:rgba(24,42,94,.25); border:1px solid rgba(255,255,255,.35);
  color:#fff; padding:8px 10px; border-radius:999px; backdrop-filter:blur(8px);
}
.msb-hero .msb-topbar .tb-item{
  display:inline-flex; align-items:center; gap:6px; font-weight:600;
  font-size:13px; color:#fff; text-decoration:none; padding:8px 10px;
  border-radius:999px; transition:background .2s ease;
}
.msb-hero .msb-topbar .tb-item:hover{ background:rgba(255,255,255,.12); }
.msb-hero .msb-topbar .tb-lang img{ width:20px; height:14px; display:block; border-radius:2px; }
.msb-hero .msb-topbar .tb-cta{
  background:#ff7a45; color:#fff; text-decoration:none; font-weight:800;
  padding:9px 14px; border-radius:12px; box-shadow:0 8px 24px rgba(255,122,69,.35);
}
.msb-hero .msb-topbar .tb-cta:hover{ filter:brightness(.95); }

/* ========== 3) Thẻ nội dung lớn bên trái ========== */
.msb-hero .hero-card{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(6px);
  border-radius:14px; padding:22px 24px; color:#0f2340;
  box-shadow:0 10px 40px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
  max-width:560px;
}
.msb-hero .hero-card h1{ font-size:42px; line-height:1.15; margin:0 0 10px; font-weight:800; }
.msb-hero .hero-card p{ margin:0 0 14px; font-size:18px; color:#3b4b66; }

/* tìm kiếm */
.msb-hero .hero-search{
  display:flex; align-items:center; gap:10px; background:#fff;
  border:1px solid rgba(15,35,64,.08); border-radius:999px; padding:10px 12px; margin:8px 0 16px;
}
.msb-hero .hero-search .s-ico{ font-size:18px; line-height:1; opacity:.7; }
.msb-hero .hero-search input{
  flex:1 1 auto; border:none; outline:none; font-size:15px; background:transparent;
}
.msb-hero .hero-search .s-btn{
  border:none; border-radius:999px; padding:8px 14px; cursor:pointer;
  background:#ff4d2d; color:#fff; font-weight:700;
}

/* badges */
.msb-hero .hero-badges{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.msb-hero .hero-badges .badge{
  display:block; text-decoration:none; color:#0f2340; background:#fff;
  border:1px solid rgba(15,35,64,.08); border-radius:12px; padding:10px 12px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.msb-hero .hero-badges .badge:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.msb-hero .hero-badges .badge strong{ display:block; font-size:16px; line-height:1.25; }
.msb-hero .hero-badges .badge small{ display:block; color:#5b6b86; }

/* ========== 4) Chat widget góc phải dưới ========== */
.msb-hero .msb-chat{
  position:absolute; right:16px; bottom:120px; z-index:6;
  width:64px; height:64px; border-radius:50%; overflow:hidden;
  display:inline-flex; box-shadow:0 12px 30px rgba(0,0,0,.18);
  background:#fff;
}
.msb-hero .msb-chat img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Responsive */
@media (max-width: 991px){
  .msb-hero .hero-card{ max-width:520px; }
  .msb-hero .hero-badges{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 767px){
  .msb-hero .msb-brand{ top:10px; left:10px; }
  .msb-hero .msb-topbar{ right:10px; gap:6px; }
  .msb-hero .hero-card h1{ font-size:32px; }
  .msb-hero .hero-badges{ grid-template-columns:1fr; }
  .msb-hero .msb-chat{ bottom:130px; right:12px; width:56px; height:56px; }
}

/* Mobile tweak */
@media (max-width: 767px){
  :root{ --header-h:56px; }
  .msb-hero{ height:calc(100vh - var(--header-h)); }
  .msb-hero .msb-panels{ left:1rem; right:1rem; bottom:10.5rem; }
  .msb-hero .msb-nav{ padding:.4rem .55rem; }
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}