/* ======================= nav.css (Nav + Preheader + Footer) ======================= */

/* ======================= Preheader ======================= */
.preheader{
  position:relative;
  height:var(--preheader-h);
  line-height:calc(var(--preheader-h) - 8px);
  background:var(--brand-dark);
  color:var(--text-on-dark);
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:5000;
  isolation:isolate;
  font-size:.9rem;
  padding:0 .5rem;
}
.preheader a{ color:#fff; transition:color .2s ease; }
.preheader a:hover{ color:var(--brand-accent); }

.preheader .ph-link i,
.preheader .location i{ color:var(--brand-accent); font-size:1rem; }

.preheader .socials .social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:all .2s ease;
}
.preheader .socials .social-link i{ font-size:.9rem; color:#fff; line-height:1; }
.preheader .socials .social-link:hover{ background:var(--brand-accent); color:var(--brand-dark); }

.btn-preheader-cta{
  background:var(--brand-accent);
  color:var(--brand-dark);
  font-weight:600;
  font-size:.85rem;
  padding:.3rem .9rem;
  border-radius:50px;
  transition:all .2s ease;
}
.btn-preheader-cta:hover{ background:#e0a800; color:#fff; }


/* ======================= Navbar ======================= */
/* Navbar (before sticky) */
.shrinkable-nav{
  position:relative;
  background-color:var(--brand-dark)!important;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:1rem 0;
  z-index:5000;
  isolation:isolate;
  letter-spacing:2px;
  font-family:'Red Hat Display','Red Hat Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Base nav text */
.shrinkable-nav .nav-link,
.shrinkable-nav .nav-link i,
.shrinkable-nav .navbar-brand,
#langBtn{
  color:#fff!important;
  text-transform:uppercase;
}

/* Increase click/hover target of top links */
.shrinkable-nav .nav-link{ padding-block:0.9rem; }

/* Brand logo shrink */
.shrinkable-nav .navbar-brand .brand-logo{
  height:var(--logo-h);
  width:auto;
  max-height:none;
  display:block;
  transform-origin:left center;
  transition:transform .35s ease, height .35s ease;
  will-change:transform;
}
body.sticky-mode .shrinkable-nav.nav-shown .navbar-brand .brand-logo{
  transform:scale(0.90);
}

/* Toggler */
.navbar-toggler{ border-color:rgba(255,255,255,.25); }
.navbar-toggler:focus{ box-shadow:0 0 0 .1rem rgba(255,255,255,.25); }
.navbar-toggler-icon{ filter:invert(1); }

/* Remove blue outline on dropdown hover/click (Chrome/Bootstrap default) */
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .dropdown-toggle:focus,
.navbar .dropdown-toggle:active{
  outline:none!important;
  box-shadow:none!important;
}


/* ======================= Dropdowns (shared) ======================= */
.nav-item.dropdown .bi-chevron-down{ transition:transform .25s ease; }
.nav-item.dropdown:hover .bi-chevron-down{ transform:rotate(180deg); }


/* ======================= Desktop dropdown (>=992px) ======================= */
@media (min-width: 992px){
  .navbar .nav-item.dropdown{ position:relative; }

  .navbar .dropdown-menu{
    position:absolute;
    z-index:6000;
    background-color:var(--brand-dark)!important;
    border:none;
    margin-top:6px;

    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .8s ease, transform .8s ease, visibility .8s ease;

    pointer-events:none;
    min-width:220px;
    padding:.75rem 0;
    border-radius:.5rem;
    box-shadow:0 12px 28px rgba(0,0,0,.32);
  }

  .navbar .nav-item.dropdown:hover > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .navbar .dropdown-menu .dropdown-item{
    color:#fff!important;
    font-weight:600;
    font-size:.95rem;
    padding:.65rem 1.25rem;
    transition:background-color .2s ease;
  }
  .navbar .dropdown-menu .dropdown-item:hover{ background-color:var(--subnav-hover); }

  /* Hover bridge – tránh “rơi” menu */
  .navbar .nav-item.dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-10px;
    height:10px;
  }
  body.sticky-mode .navbar .nav-item.dropdown::after{
    bottom:-14px;
    height:14px;
  }
}


/* ======================= Sticky mode ======================= */
body.sticky-mode{
  padding-top:var(--nav-h);
  transition:padding-top .35s ease;
}
body.sticky-mode .shrinkable-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:5500;

  padding:0.5rem 0;
  opacity:0;
  transform:translateY(-20px);

  transition:
    opacity .5s cubic-bezier(0.25,0.46,0.45,0.94),
    transform .5s cubic-bezier(0.25,0.46,0.45,0.94),
    box-shadow .4s ease,
    padding .4s ease;

  box-shadow:0 8px 24px rgba(0,0,0,0);
  will-change:opacity, transform;
}
body.sticky-mode .shrinkable-nav.nav-shown{
  opacity:1;
  transform:translateY(0);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition-delay:0.05s,0s,0.1s,0s;
}

/* Sticky dropdown fine tuning (desktop) */
@media (min-width: 992px){
  body.sticky-mode .navbar .dropdown-menu{ margin-top:10px; }
  body.sticky-mode .shrinkable-nav.nav-shown .navbar .dropdown-menu{
    transform:translateY(4px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
  }
}


/* ======================= Mobile/Tablet dropdown (<992px) ======================= */
@media (max-width: 991.98px){
  .navbar .dropdown-menu{
    display:none!important;
    position:static;
    float:none;
    border:0;
    box-shadow:none;
    background:transparent;
    padding:.5rem 0 .5rem .75rem;
    margin:0;
  }
  .navbar .dropdown.show > .dropdown-menu{ display:block!important; }

  /* FIX: chữ dropdown trắng trên mobile/tablet */
  .navbar .dropdown-menu .dropdown-item,
  .navbar .dropdown-menu .dropdown-item i{
    color:#fff!important;
  }
  .navbar .dropdown-menu .dropdown-item:hover,
  .navbar .dropdown-menu .dropdown-item:focus{
    color:#fff!important;
    background-color:var(--subnav-hover);
  }

  .navbar .dropdown-toggle .bi{ transition:transform .2s ease; }
  .navbar .dropdown.show .dropdown-toggle .bi{ transform:rotate(180deg); }
}


/* ======================= Reduce motion ======================= */
@media (prefers-reduced-motion: reduce){
  body.sticky-mode .shrinkable-nav,
  body.sticky-mode .shrinkable-nav.nav-shown,
  .brand-logo,
  .nav-item.dropdown .bi-chevron-down,
  .dropdown-menu{
    transition:none!important;
    transform:none!important;
    opacity:1!important;
    box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  }
}


/* ======================= Footer Alpha ======================= */
.footer-alpha{
  --footer-bg:#131a38;
  --footer-bg-2:#141c3b;
  --footer-text:rgba(255,255,255,.92);
  --footer-dim:rgba(255,255,255,.65);
  --footer-outline:rgba(255,255,255,.25);
  --footer-accent:var(--core-accent, #5f84ff);

  background:var(--footer-bg);
  color:var(--footer-text);
  font-family:'Red Hat Display','Red Hat Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  padding:1.5rem 0;
}
.footer-alpha a:hover{ color:#fff; opacity:.95; }

.footer-alpha .footer-sep{
  border:0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
  margin:.75rem 0;
}

.footer-contact .footer-label{
  color:var(--footer-accent);
  font-weight:700;
  letter-spacing:.3px;
}
.footer-contact .footer-value a{
  font-size:1.1rem;
  font-weight:600;
}

.footer-links li + li{ margin-top:.9rem; }
.footer-links a{ font-weight:600; }

.footer-link{ color:var(--footer-text); border-bottom:1px solid transparent; }
.footer-link:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.25); }

.text-footer-dim{ color:var(--footer-dim)!important; }

/* Social circled outline */
.footer-social-outline{
  width:60px;
  height:60px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:#fff;

  --btn-outline:#3866df;
  border:1.5px solid var(--btn-outline);

  background:linear-gradient(90deg, rgba(56,102,223,0.25) 0%, rgba(56,102,223,0.6) 100%);
  background-size:0% 100%;
  background-repeat:no-repeat;
  background-position:left center;

  line-height:1;
  padding-top:.9rem;
  padding-bottom:.9rem;

  transition:background-size .5s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.footer-social-outline:hover{
  background-size:100% 100%;
  border-color:#5a84ff;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Footer layout */
.footer-alpha .footer-inner{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:0 1.5rem;
}
.footer-alpha .footer-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2.5rem;
}
.footer-alpha .footer-col{
  flex:1 1 0;
  min-width:220px;
}
.footer-alpha .footer-brand{ max-width:320px; }
.footer-alpha .footer-links{ text-align:right; }
.footer-alpha .footer-links ul{
  list-style:none;
  padding-left:0;
  margin:0;
}
.footer-alpha .footer-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:1rem;
  margin-top:1rem;
  border-top:1px solid var(--footer-bg-2);
}
.footer-alpha .footer-meta-left{ font-size:.85rem; }
.footer-alpha .footer-meta-right{
  display:flex;
  align-items:center;
  gap:1rem;
}

/* Footer responsive */
@media (max-width: 991.98px){
  .footer-alpha{ padding:1.75rem 0; }
  .footer-alpha .footer-inner{ padding:0 1.25rem; }
  .footer-alpha .footer-main{
    flex-direction:column;
    gap:1.5rem;
  }
  .footer-alpha .footer-col{ min-width:100%; }
  .footer-alpha .footer-brand,
  .footer-alpha .footer-contact,
  .footer-alpha .footer-links{ text-align:left; }
  .footer-alpha .footer-links{ margin-top:.25rem; }
  .footer-alpha .footer-meta{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  .footer-alpha .footer-meta-right{ flex-wrap:wrap; }
}

@media (max-width: 575.98px){
  .footer-alpha .footer-inner{ padding:0 1rem; }
  .footer-alpha .footer-main{ gap:1.25rem; }
  .footer-alpha .footer-contact .footer-value a{ font-size:1rem; }
  .footer-social-outline{
    width:48px;
    height:48px;
    font-size:1.3rem;
  }
  .footer-alpha .footer-meta{ gap:.75rem; }
  .footer-alpha .footer-meta-left{ font-size:.8rem; }
}