/* Rainbow shared site shell v1.3.0 — navigation, accessibility and form safety. */
:root{
  --shell-max:1200px;
  --shell-gutter:clamp(16px,3vw,24px);
  --shell-section:clamp(56px,7vw,80px);
  --shell-focus:#ffb300;
  --shell-radius:20px;
}

html{scroll-behavior:smooth;overflow-x:hidden}
html.lang-vi .en{display:none!important}
html.lang-en .vi{display:none!important}
body{overflow-x:hidden}
html.menu-open,body.menu-open{overflow:hidden!important;overscroll-behavior:none}
body.menu-open{position:fixed;width:100%;left:0;right:0}
*:focus-visible{outline:3px solid var(--shell-focus)!important;outline-offset:3px!important}

.wrap,.ftop,.fbot{max-width:var(--shell-max)}
#nav .nw{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important}
.nlinks{gap:clamp(8px,1vw,18px)}
.nlinks>li>a{white-space:nowrap}
.has-dd:focus-within .ddm{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}

/* Careers must remain legible on the white desktop navigation. */
.nav-careers>a{
  color:var(--eb,#0d58a9)!important;
  background:#eaf4ff;
  padding:8px 13px!important;
  border-radius:999px;
}

/* Shared language control; Careers does not define this component itself. */
.ltog{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  flex:0 0 auto;
  gap:2px;
  padding:3px;
  border-radius:999px;
  background:var(--bg,#f4f7fb);
}
.lbtn{
  min-width:38px;
  min-height:36px;
  padding:6px 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--lt,#707889);
  font:700 .75rem/1 var(--fb,'Plus Jakarta Sans',sans-serif);
  cursor:pointer;
}
.lbtn.ac{background:#fff;color:var(--eb,#0d58a9);box-shadow:0 2px 10px rgba(8,26,51,.1)}

.mobile-edu-toggle{
  width:100%;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  border:0;
  color:inherit;
  text-align:left;
  min-height:46px;
  cursor:pointer;
}
.mobile-edu-group{display:grid}
.mobile-edu-group[hidden]{display:none!important}
.mnav a,.mnav button{min-height:44px}

img{max-width:100%}
.placeholder-img{aspect-ratio:16/9;object-fit:cover}
.page-hero-picture,.page-hero-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero .ph-ov{z-index:1}.page-hero .wrap{position:relative;z-index:2}
.tc-photo,.card-image,.post-cover,.event-cover{aspect-ratio:4/3;object-fit:cover}

form label{font-weight:650}
input,select,textarea,button{font:inherit}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  box-sizing:border-box;
  max-width:100%;
  min-height:46px;
}
.form-status[role="status"],.form-status[role="alert"]{margin-top:12px;padding:12px 14px;border-radius:12px}
.form-status.is-success{background:#e7f6ec;color:#196536}.form-status.is-error{background:#fff0f0;color:#9c1c1c}

/* Footer copy must meet WCAG AA contrast on the dark footer background. */
footer .fbrand p{color:rgba(255,255,255,.76)!important}
footer .fcol h4{color:rgba(255,255,255,.82)!important}
footer .fcol a,footer .flinks a{color:rgba(255,255,255,.76)!important}
footer .fcp,footer .fcp a{color:rgba(255,255,255,.68)!important}
footer .fsb{color:rgba(255,255,255,.78)!important}

@media(max-width:1120px){
  .nlinks{gap:7px}
  .nlinks>li>a{font-size:.72rem}
  .nav-careers>a{padding:7px 10px!important}
}

@media(max-width:880px){
  #nav{z-index:1002}
  #nav .nw{min-height:64px}
  .nright{display:none!important}
  .mbtn{
    display:flex!important;
    min-width:44px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:10px!important;
    position:relative;
    z-index:2;
  }
  .mbtn span{transform-origin:center;transition:transform .2s ease,opacity .2s ease}
  .mbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* The outer drawer is a backdrop; its inner panel sizes to the menu. */
  .mnav{
    position:fixed!important;
    inset:64px 0 0!important;
    z-index:1001!important;
    padding:0!important;
    overflow:hidden!important;
    background:rgba(8,26,51,.42)!important;
  }
  .mnav.op{display:block!important}
  .mobile-nav-panel{
    width:100%;
    max-height:100%;
    display:flex;
    flex-direction:column;
    gap:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:8px 20px calc(16px + env(safe-area-inset-bottom));
    border-radius:0 0 22px 22px;
    background:#fff;
    box-shadow:0 18px 42px rgba(8,26,51,.2);
  }
  .mnav .mcl{display:none!important}
  .mnav a{
    min-width:0;
    min-height:44px;
    display:flex!important;
    align-items:center;
    padding:9px 0!important;
    border-bottom:1px solid var(--bd,#e6e9ef)!important;
    color:var(--dk,#172033)!important;
    font-size:.94rem!important;
    line-height:1.35;
  }
  .mnav .nav-careers{background:transparent;border-radius:0}
  .mobile-edu-toggle{
    padding:9px 0!important;
    border-bottom:1px solid var(--bd,#e6e9ef)!important;
    color:var(--dk,#172033)!important;
    font:700 .94rem/1.35 var(--fb,'Plus Jakarta Sans',sans-serif)!important;
    letter-spacing:0!important;
    text-transform:none!important;
  }
  .mobile-edu-toggle>span:last-child{font-size:1rem;transition:transform .2s ease}
  .mobile-edu-toggle[aria-expanded="true"]>span:last-child{transform:rotate(180deg)}
  .mobile-edu-group{padding:4px 0 6px}
  .mnav .mobile-edu-group .msub{
    min-height:42px;
    padding:8px 8px 8px 18px!important;
    font-size:.82rem!important;
    color:var(--md,#4a4a6a)!important;
  }
  .mobile-nav-actions{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:10px;
    margin-top:10px;
    padding-top:12px;
    border-top:1px solid var(--bd,#e6e9ef);
  }
  .mnav .mobile-nav-actions .ltog{display:inline-flex!important}
  .mnav .mobile-nav-actions .lbtn{min-height:38px;padding:7px 10px!important}
  .mnav .mobile-nav-actions .btn{
    width:100%;
    min-width:0;
    min-height:44px;
    display:inline-flex!important;
    align-items:center;
    justify-content:center!important;
    padding:10px 14px!important;
    border:0!important;
    border-radius:999px!important;
    background:var(--eb,#1565c0)!important;
    color:#fff!important;
    font-size:.82rem!important;
    line-height:1.25;
    text-align:center;
    box-shadow:0 6px 20px rgba(21,101,192,.28);
  }
  section{scroll-margin-top:70px}
}

@media(max-width:360px){
  .mobile-nav-panel{padding-inline:16px}
  .mobile-nav-actions{grid-template-columns:1fr}
  .mnav .mobile-nav-actions .ltog{justify-self:start}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}