/* =========================================================
   ĐẢO SỐ — BRAND SHELL
   Header = studio command bar
   Footer = closing statement + system directory
   ========================================================= */

.studio-shell-header{
  position:sticky;
  top:0;
  z-index:90;
  min-height:78px;
  background:rgba(3,5,13,.92);
  border-bottom:1px solid rgba(127,149,196,.16);
  box-shadow:0 10px 34px rgba(0,0,0,.16);
  backdrop-filter:blur(18px) saturate(120%);
}

.studio-nav{
  min-height:78px;
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:clamp(1rem,2.4vw,2.4rem);
  position:relative;
}

.studio-brand{
  display:inline-flex;
  align-items:center;
  gap:.72rem;
  min-width:max-content;
  color:#f7faff;
  text-shadow:none;
}

.site-header .studio-brand .studio-brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(0,245,255,.2);
  border-radius:11px;
  background:#09111f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.site-header .studio-brand .studio-brand-mark img{
  width:28px;
  height:28px;
}

.site-header .studio-brand .studio-brand-copy{
  display:grid;
  gap:.08rem;
  line-height:1;
}

.site-header .studio-brand .studio-brand-name{
  display:flex;
  align-items:baseline;
  gap:.24rem;
  color:#f7faff;
  font-size:.98rem;
  font-weight:900;
  letter-spacing:-.025em;
  white-space:nowrap;
}

.site-header .studio-brand .studio-brand-name b{
  color:#00f5ff;
  font-weight:950;
}

.site-header .studio-brand .studio-brand-name small{
  margin-left:.08rem;
  color:#a7b3ca;
  font-size:.7rem;
  font-weight:650;
  letter-spacing:.02em;
}

.site-header .studio-brand .studio-brand-descriptor{
  color:var(--ds-text-subtle-dark);
  font-size:.54rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}

.studio-header-status{
  display:flex;
  align-items:center;
  gap:.48rem;
  min-width:max-content;
  padding:.42rem .62rem;
  border-left:1px solid rgba(134,151,188,.16);
  color:var(--ds-text-subtle-dark);
  font-size:.55rem;
  font-weight:850;
  letter-spacing:.12em;
  white-space:nowrap;
}

.studio-header-status i,
.footer-system-status i{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:#c7ff3d;
  box-shadow:0 0 0 4px rgba(199,255,61,.07);
}

.studio-nav-links{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:clamp(.25rem,.8vw,.75rem);
}

.site-header .studio-nav-links .shell-nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:.38rem;
  min-height:42px;
  padding:.45rem .62rem;
  border-radius:9px;
  color:#aab6cc;
  font-size:.8rem;
  font-weight:760;
  letter-spacing:-.01em;
  text-shadow:none;
}

.site-header .studio-nav-links .shell-nav-link>span{
  color:var(--ds-text-subtle-dark);
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.08em;
}

.site-header .studio-nav-links .shell-nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.035);
  text-shadow:none;
}

.site-header .studio-nav-links .shell-nav-link[aria-current="page"]{
  color:#fff;
  background:rgba(0,245,255,.055);
}

.site-header .studio-nav-links .shell-nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:.62rem;
  right:.62rem;
  bottom:2px;
  height:1px;
  background:#00f5ff;
}

.shell-audit-cta{
  min-width:176px;
  min-height:48px;
  display:grid;
  align-content:center;
  gap:.1rem;
  margin-left:.35rem;
  padding:.5rem .78rem;
  border:1px solid rgba(0,245,255,.22);
  border-radius:12px;
  background:#0b1627;
  color:#fff;
  box-shadow:none;
}

.shell-audit-cta small{
  color:#00f5ff;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.13em;
}

.shell-audit-cta strong{
  display:flex;
  justify-content:space-between;
  gap:.65rem;
  color:#eef5ff;
  font-size:.72rem;
  font-weight:850;
}

.shell-audit-cta strong span{
  color:#c7ff3d;
}

.shell-audit-cta:hover{
  background:#101d31;
  border-color:rgba(0,245,255,.38);
}

.shell-audit-cta[aria-current="page"]{
  border-color:#00f5ff;
  box-shadow:inset 0 0 0 1px rgba(0,245,255,.08);
}

.studio-nav-toggle{
  justify-self:end;
  min-width:72px;
  display:none;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:10px;
  background:#0b1424;
  border:1px solid rgba(132,151,190,.18);
  color:#f7faff;
  box-shadow:none;
}

.studio-nav-toggle i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00f5ff;
}

/* =========================================================
   FOOTER — closing statement
   ========================================================= */

.studio-footer{
  position:relative;
  overflow:hidden;
  padding:0;
  background:#03050d;
  color:#f7faff;
  border-top:1px solid rgba(0,245,255,.13);
}

.studio-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

.studio-footer>.container{
  position:relative;
  z-index:1;
}

.studio-footer-statement{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:clamp(2.5rem,6vw,7rem);
  align-items:end;
  padding:clamp(4.8rem,8vw,8rem) 0 clamp(3.7rem,6vw,5.8rem);
  border-bottom:1px solid rgba(139,158,196,.16);
}

.footer-kicker{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:clamp(1.4rem,2vw,2rem);
  color:var(--ds-text-subtle-dark);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.14em;
}

.footer-kicker i{
  width:34px;
  height:1px;
  background:#00f5ff;
}

html[lang="vi"] .studio-footer .footer-statement-copy h2{
  max-width:13ch;
  margin:0;
  padding:0 0 .08em;
  color:#f8fbff;
  font-size:clamp(3.2rem,6.7vw,7.2rem);
  line-height:1.01;
  letter-spacing:-.032em;
  text-wrap:balance;
  overflow:visible;
}

html[lang="vi"] .studio-footer .footer-statement-copy h2 span{
  display:inline-block;
  color:#00f5ff;
  -webkit-text-fill-color:#00f5ff;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
}

.footer-statement-action{
  display:grid;
  gap:1.35rem;
  padding-bottom:.3rem;
}

.footer-statement-action p{
  max-width:390px;
  margin:0;
  color:#8f9db5;
  font-size:.93rem;
  line-height:1.65;
}

.footer-main-cta{
  display:grid;
  gap:.28rem;
  max-width:360px;
  padding:1rem 1.1rem;
  border-top:1px solid rgba(0,245,255,.34);
  border-bottom:1px solid rgba(139,92,246,.2);
  color:#f7faff;
  background:#080e19;
}

.footer-main-cta small{
  color:var(--ds-text-subtle-dark);
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.14em;
}

.footer-main-cta strong{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:1rem;
  font-weight:850;
}

.footer-main-cta strong span{
  color:#c7ff3d;
  font-size:1.15rem;
}

.footer-main-cta:hover{
  background:#0b1423;
  border-top-color:#00f5ff;
}

.studio-footer-system{
  display:grid;
  grid-template-columns:minmax(260px,1.35fr) 1.15fr .8fr 1.15fr;
  gap:clamp(2rem,4vw,4.5rem);
  padding:clamp(3rem,5vw,4.5rem) 0;
}

.footer-brand-block{
  padding-right:clamp(0rem,2vw,2rem);
}

.footer-brand-lockup{
  display:flex;
  align-items:center;
  gap:.9rem;
}

.footer-brand-lockup img{
  width:50px;
  height:50px;
}

.footer-brand-lockup>div{
  display:grid;
  gap:.18rem;
}

.footer-brand-lockup strong{
  color:#fff;
  font-size:1.03rem;
  font-weight:900;
}

.footer-brand-lockup span{
  color:var(--ds-text-subtle-dark);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footer-brand-block>p{
  max-width:340px;
  margin:1.35rem 0 1.2rem;
  color:var(--ds-text-muted-dark);
  font-size:.83rem;
  line-height:1.7;
}

.footer-system-status{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:var(--ds-text-subtle-dark);
  font-size:.66rem;
  font-weight:700;
}

.studio-footer .footer-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 1.1rem;
  padding-bottom:.72rem;
  border-bottom:1px solid rgba(132,151,190,.13);
  color:#eaf0fb;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.03em;
}

.studio-footer .footer-title span{
  color:var(--ds-text-subtle-dark);
  font-size:.52rem;
  letter-spacing:.1em;
}

.studio-footer .footer-links{
  display:grid;
  gap:.7rem;
  color:var(--ds-text-muted-dark);
  font-size:.78rem;
}

.studio-footer .footer-links a,
.studio-footer .footer-links span{
  line-height:1.45;
}

.studio-footer .footer-links a{
  width:fit-content;
  color:var(--ds-text-muted-dark);
  transition:color .16s ease,transform .16s ease;
}

.studio-footer .footer-links a:hover{
  color:#f6f9ff;
  transform:translateX(3px);
}

.studio-footer .footer-links .footer-link-all{
  margin-top:.25rem;
  color:#00f5ff;
  font-weight:800;
}

.footer-contact-column [data-email]{
  color:#dbe5f5;
  font-weight:780;
}

.footer-bottom{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:1.5rem;
  align-items:center;
  min-height:74px;
  border-top:1px solid rgba(132,151,190,.13);
}

.studio-footer .copyright{
  margin:0;
  padding:0;
  border:0;
  color:var(--ds-text-subtle-dark);
  font-size:.68rem;
}

.footer-system-note{
  color:var(--ds-text-subtle-dark);
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.13em;
  text-align:center;
}

.footer-legal{
  justify-self:end;
  display:flex;
  gap:1.1rem;
}

.footer-legal a{
  color:var(--ds-text-subtle-dark);
  font-size:.68rem;
}

.footer-legal a:hover{
  color:#fff;
}

@media(max-width:1180px){
  .studio-nav{
    grid-template-columns:auto 1fr;
  }

  .studio-header-status{
    display:none;
  }

  .studio-nav-links{
    justify-self:end;
  }

  .studio-footer-system{
    grid-template-columns:1.15fr 1fr 1fr;
  }

  .footer-brand-block{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:auto minmax(280px,1fr) auto;
    align-items:center;
    gap:2rem;
    padding:0 0 1.3rem;
    border-bottom:1px solid rgba(132,151,190,.1);
  }

  .footer-brand-block>p{
    margin:0;
  }
}

@media(max-width:980px){
  .studio-shell-header{
    min-height:72px;
  }

  .studio-nav{
    min-height:72px;
    display:flex;
    justify-content:space-between;
  }

  .studio-nav-toggle{
    display:inline-flex;
  }

  .studio-nav-links{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    z-index:5;
    padding:.7rem;
    border:1px solid rgba(0,245,255,.14);
    border-radius:16px;
    background:#070c16;
    box-shadow:0 28px 80px rgba(0,0,0,.42);
    flex-direction:column;
    align-items:stretch;
    gap:.28rem;
  }

  .studio-nav-links.open{
    display:flex;
  }

  .site-header .studio-nav-links .shell-nav-link{
    min-height:46px;
    justify-content:flex-start;
    padding:.65rem .75rem;
    border-radius:10px;
  }

  .site-header .studio-nav-links .shell-nav-link[aria-current="page"]::after{
    left:.75rem;
    right:auto;
    width:30px;
  }

  .shell-audit-cta{
    width:100%;
    min-height:58px;
    margin:.35rem 0 0;
    padding:.65rem .78rem;
  }

  .studio-footer-statement{
    grid-template-columns:1fr;
  }

  .footer-statement-action{
    max-width:580px;
  }

  .footer-main-cta{
    max-width:420px;
  }

  .studio-footer-system{
    grid-template-columns:repeat(2,1fr);
  }

  .footer-brand-block{
    grid-column:1/-1;
    grid-template-columns:1fr;
    gap:1rem;
  }

  .footer-bottom{
    grid-template-columns:1fr auto;
    padding:1.15rem 0;
  }

  .footer-system-note{
    grid-column:1/-1;
    grid-row:1;
    text-align:left;
  }

  .footer-legal{
    grid-column:2;
  }
}

@media(max-width:640px){
  .site-header .studio-brand .studio-brand-mark{
    width:34px;
    height:34px;
  }

  .site-header .studio-brand .studio-brand-mark img{
    width:25px;
    height:25px;
  }

  .site-header .studio-brand .studio-brand-descriptor{
    display:none;
  }

  .site-header .studio-brand .studio-brand-name{
    font-size:.9rem;
  }

  .site-header .studio-brand .studio-brand-name small{
    font-size:.62rem;
  }

  .studio-nav-toggle{
    min-width:66px;
    padding:.5rem .58rem;
  }

  .footer-kicker{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:.45rem .65rem;
  }

  .footer-kicker i{
    width:22px;
    margin-top:.45rem;
  }

  html[lang="vi"] .studio-footer .footer-statement-copy h2{
    font-size:clamp(2.8rem,13vw,4.8rem);
    line-height:1.04;
    letter-spacing:-.024em;
  }

  .studio-footer-system{
    grid-template-columns:1fr;
    gap:2.5rem;
  }

  .footer-brand-block,
  .footer-column{
    grid-column:auto;
  }

  .footer-bottom{
    grid-template-columns:1fr;
    gap:.7rem;
    padding:1.4rem 0 1.7rem;
  }

  .footer-system-note{
    grid-column:1;
    grid-row:auto;
    line-height:1.5;
  }

  .footer-legal{
    grid-column:1;
    justify-self:start;
  }
}

@media(prefers-reduced-motion:reduce){
  .studio-footer .footer-links a{
    transition:none!important;
  }
}