/* Approved direction v06 — 01 Nov 2026. Artwork, form behavior and existing service scope are preserved. */
:root,.editor-styles-wrapper{--ink:#102E43;--muted:#52636F;--gold:#C89B4B;--gold-text:#74521D;--orange:var(--gold-text);--paper:#F3F0E8;--line:#D5D2C9;--surface:#EAE6DC}
body{background:var(--paper)}
body>header{background:var(--paper)}
body>header::after{background:var(--gold)}
body>header .dc-header-callback{color:var(--gold-text);border-color:var(--gold-text)}
body>footer{border-top:1px solid var(--line);background:var(--paper)}
body>footer>p{color:var(--ink);font-size:17px;max-width:330px}
/* Dark type on gold for controls; dark gold type on light surfaces. */
.button,:is(#main,.editor-styles-wrapper) .dc-primary .wp-block-button__link,:is(#main,.editor-styles-wrapper) .dc-contact-details>summary,.dc-callback-submit,.dc-callback-float{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}
.button:hover,:is(#main,.editor-styles-wrapper) .dc-primary .wp-block-button__link:hover,:is(#main,.editor-styles-wrapper) .dc-contact-details>summary:hover,.dc-callback-submit:hover,.dc-callback-float:hover{background:#D7B16E;color:var(--ink);border-color:#D7B16E}
.dc-callback-card{border-top-color:var(--gold)}
.dc-callback-submit:focus-visible,.dc-callback-float:focus-visible{outline-color:var(--ink)}
:is(#main,.editor-styles-wrapper) .brand-hero{display:block;position:relative;isolation:isolate;min-height:680px;overflow:hidden;background:var(--ink);color:var(--paper)}
:is(#main,.editor-styles-wrapper) .brand-hero-media{position:absolute;inset:0;margin:0!important;z-index:auto;width:100%;height:100%}
:is(#main,.editor-styles-wrapper) .brand-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:66% top;max-width:none}
:is(#main,.editor-styles-wrapper) .brand-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,30,45,.94) 0%,rgba(9,30,45,.84) 29%,rgba(9,30,45,.35) 67%,rgba(9,30,45,.12)),linear-gradient(0deg,rgba(9,30,45,.7),transparent 45%);z-index:1;pointer-events:none}
:is(#main,.editor-styles-wrapper) .brand-hero-copy{position:relative;z-index:2;min-height:680px;width:100%;max-width:1020px;padding:82px 7% 100px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
:is(#main,.editor-styles-wrapper) .brand-hero .eyebrow{font-size:11px;letter-spacing:1.7px;color:var(--gold);line-height:1.65;margin:0 0 26px;max-width:none}
:is(#main,.editor-styles-wrapper) .brand-hero .eyebrow::before{background:var(--gold)}
:is(#main,.editor-styles-wrapper) .brand-hero h1{color:var(--paper);font-size:clamp(44px,5.25vw,78px);font-weight:700;letter-spacing:-2.6px;line-height:1.14;margin:0 0 24px;max-width:950px;text-wrap:balance}
:is(#main,.editor-styles-wrapper) .brand-hero h1 em{color:var(--gold);font-style:normal}
:is(#main,.editor-styles-wrapper) .brand-hero .brand-service-line{max-width:760px;color:var(--paper);font-size:18px;line-height:1.65;margin:0 0 18px}
:is(#main,.editor-styles-wrapper) .brand-hero .brand-hero-intro{max-width:540px;color:#D7E0E4;font-size:16px;line-height:1.85;margin:0 0 34px}
:is(#main,.editor-styles-wrapper) .brand-hero .dc-secondary .wp-block-button__link{color:var(--paper);border-color:var(--paper)}
:is(#main,.editor-styles-wrapper) .brand-hero a:focus-visible{outline-color:var(--paper)}
:is(#main,.editor-styles-wrapper) .brand-hero-media figcaption{position:absolute;bottom:20px;right:4%;left:auto;max-width:520px;margin:0;padding:9px 13px;background:rgba(9,30,45,.88);color:var(--paper);font-size:12px;line-height:1.6;z-index:3}
:is(#main,.editor-styles-wrapper) .brand-position{display:grid;grid-template-columns:1fr 1.25fr;gap:72px;align-items:start}
:is(#main,.editor-styles-wrapper) .brand-section-heading{max-width:880px}
:is(#main,.editor-styles-wrapper) .brand-position h2{font-weight:600;max-width:520px}
:is(#main,.editor-styles-wrapper) .brand-position-copy{font-size:20px;line-height:1.8;margin:18px 0 28px;color:var(--ink)}
:is(#main,.editor-styles-wrapper) .brand-manifesto{font-size:18px;line-height:1.85;border-left:3px solid var(--gold);padding-left:24px;color:var(--muted);margin:0}
:is(#main,.editor-styles-wrapper) .brand-beliefs{background:var(--surface);border-top:1px solid var(--line)}
:is(#main,.editor-styles-wrapper) .brand-beliefs h2{max-width:760px;font-weight:600}
:is(#main,.editor-styles-wrapper) .brand-belief-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;margin-top:54px}
:is(#main,.editor-styles-wrapper) .brand-belief{min-width:0;border-top:2px solid var(--gold);padding-top:24px}
:is(#main,.editor-styles-wrapper) .brand-traditional-label{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:var(--gold-text);margin:0 0 16px}
:is(#main,.editor-styles-wrapper) .brand-belief h3{font-size:28px;line-height:1.35;font-weight:600;margin:0 0 20px;letter-spacing:-.6px}
:is(#main,.editor-styles-wrapper) .brand-belief>p:last-child{font-size:16px;color:var(--muted);line-height:1.85;margin:0}
:is(#main,.editor-styles-wrapper) .brand-goals{background:var(--ink);color:var(--paper)}
:is(#main,.editor-styles-wrapper) .brand-goals .section-tag{color:var(--gold)}
:is(#main,.editor-styles-wrapper) .brand-goals h2{font-weight:600}
:is(#main,.editor-styles-wrapper) .brand-goal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;margin-top:50px}
:is(#main,.editor-styles-wrapper) .brand-goal{min-width:0;border-top:1px solid #62727A;padding-top:28px}
:is(#main,.editor-styles-wrapper) .brand-card-number{font-size:15px;color:var(--gold);margin:0 0 30px;letter-spacing:2px}
:is(#main,.editor-styles-wrapper) .brand-goal h3{font-size:26px;font-weight:600;line-height:1.4;margin:0 0 18px}
:is(#main,.editor-styles-wrapper) .brand-goal>p:last-child{color:#D7E0E4;font-size:16px;line-height:1.85;margin:0}
:is(#main,.editor-styles-wrapper) .brand-aspirations .brand-section-heading>p:last-child{font-size:17px;color:var(--muted);max-width:760px}
:is(#main,.editor-styles-wrapper) .brand-aspirations h2{font-weight:600}
:is(#main,.editor-styles-wrapper) .brand-aspiration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:46px}
:is(#main,.editor-styles-wrapper) .brand-aspiration{min-width:0}
:is(#main,.editor-styles-wrapper) .brand-aspiration-image{margin:0}
:is(#main,.editor-styles-wrapper) .brand-aspiration-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
:is(#main,.editor-styles-wrapper) .brand-aspiration-image figcaption{margin:0;padding:12px 0;color:var(--muted);font-size:12px;line-height:1.7;border-bottom:1px solid var(--line)}
:is(#main,.editor-styles-wrapper) .brand-aspiration-copy{padding:24px 0 0}
:is(#main,.editor-styles-wrapper) .brand-aspiration-label{font-size:11px;line-height:1.7;letter-spacing:1.2px;color:var(--gold-text);font-weight:700;margin:0 0 15px}
:is(#main,.editor-styles-wrapper) .brand-aspiration h3{font-size:26px;line-height:1.4;font-weight:600;margin:0 0 18px}
:is(#main,.editor-styles-wrapper) .brand-aspiration-copy>p:last-child{color:var(--muted);font-size:16px;line-height:1.85;margin:0}
:is(#main,.editor-styles-wrapper) .brand-services{background:var(--surface)}
:is(#main,.editor-styles-wrapper) .brand-services h2{font-weight:600}
:is(#main,.editor-styles-wrapper) .brand-services .office-feature{display:none}
@media(max-width:1000px){
 :is(#main,.editor-styles-wrapper) .brand-position{gap:36px;grid-template-columns:1fr}
 :is(#main,.editor-styles-wrapper) .brand-position-copy{margin-top:0}
 :is(#main,.editor-styles-wrapper) .brand-belief-grid,:is(#main,.editor-styles-wrapper) .brand-goal-grid{gap:28px}
 :is(#main,.editor-styles-wrapper) .brand-aspiration-grid{grid-template-columns:1fr;gap:48px}
 :is(#main,.editor-styles-wrapper) .brand-aspiration{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
 :is(#main,.editor-styles-wrapper) .brand-aspiration-copy{padding-top:0}
}
@media(max-width:700px){
 :is(#main,.editor-styles-wrapper) .brand-hero,:is(#main,.editor-styles-wrapper) .brand-hero-copy{min-height:650px}
 :is(#main,.editor-styles-wrapper) .brand-hero-copy{padding:58px 7% 105px}
 :is(#main,.editor-styles-wrapper) .brand-hero h1{font-size:clamp(38px,9.6vw,57px);letter-spacing:-1.3px;line-height:1.18}
 :is(#main,.editor-styles-wrapper) .brand-hero h1 br{display:initial}
 :is(#main,.editor-styles-wrapper) .brand-hero h1 em::before{content:none}
 :is(#main,.editor-styles-wrapper) .brand-hero .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:22px}
 :is(#main,.editor-styles-wrapper) .brand-hero .brand-service-line{font-size:16px}
 :is(#main,.editor-styles-wrapper) .brand-hero .brand-hero-intro{font-size:15px;max-width:390px}
 :is(#main,.editor-styles-wrapper) .brand-hero::before{background:linear-gradient(90deg,rgba(9,30,45,.93),rgba(9,30,45,.62)),linear-gradient(0deg,rgba(9,30,45,.8),transparent)}
 :is(#main,.editor-styles-wrapper) .brand-hero-media img{object-position:70% center}
 :is(#main,.editor-styles-wrapper) .brand-hero-media figcaption{right:7%;left:7%;bottom:18px;font-size:11px;padding:7px 10px}
 :is(#main,.editor-styles-wrapper) .brand-belief-grid,:is(#main,.editor-styles-wrapper) .brand-goal-grid{grid-template-columns:1fr;gap:34px;margin-top:34px}
 :is(#main,.editor-styles-wrapper) .brand-belief h3{font-size:27px}
 :is(#main,.editor-styles-wrapper) .brand-card-number{margin-bottom:18px}
 :is(#main,.editor-styles-wrapper) .brand-aspiration{display:block}
 :is(#main,.editor-styles-wrapper) .brand-aspiration-copy{padding-top:22px}
 :is(#main,.editor-styles-wrapper) .brand-position-copy{font-size:18px}
}
/* Editor has the same tokens but keeps image selection and block controls accessible. */
.editor-styles-wrapper .brand-hero-media{position:relative;height:300px;inset:auto;z-index:auto}
.editor-styles-wrapper .brand-hero::before{display:none}
.editor-styles-wrapper .brand-hero-copy{min-height:0;padding:40px}
.editor-styles-wrapper .brand-hero-media figcaption{position:relative;inset:auto;max-width:none}
.editor-styles-wrapper .brand-belief-grid>.block-editor-inner-blocks>.block-editor-block-list__layout,.editor-styles-wrapper .brand-goal-grid>.block-editor-inner-blocks>.block-editor-block-list__layout,.editor-styles-wrapper .brand-aspiration-grid>.block-editor-inner-blocks>.block-editor-block-list__layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media(prefers-reduced-motion:reduce){.brand-hero *{animation:none!important;transition:none!important}}

/* AI provenance stays in the hero copy flow, clear of the fixed callback action. */
:is(#main,.editor-styles-wrapper) .brand-hero .brand-hero-caption{align-self:flex-start;max-width:100%;margin:-10px 0 24px;padding:7px 11px;border-left:2px solid var(--gold);background:rgba(9,30,45,.88);color:var(--paper);font-size:12px;line-height:1.65}

/* Neutralize native flow sibling margins on the three editorial grids. */
:is(#main,.editor-styles-wrapper) :is(.brand-belief-grid,.brand-goal-grid,.brand-aspiration-grid)>.wp-block-group{margin-block:0}


/* Draft: Corp homepage spacing only. Append after brand-direction.css after source CAS and preview QA. */
@media (max-width: 700px) {
  body.home.dc-language-vi > header {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 72px;
    grid-template-areas: "brand callback language" "navigation navigation navigation";
    column-gap: 8px;
    row-gap: 4px;
    padding: 10px 14px 8px;
    align-items: center;
  }

  body.home.dc-language-vi > header > .dc-brand {
    grid-area: brand;
    min-width: 0;
  }

  body.home.dc-language-vi > header > .dc-brand img {
    display: block;
    width: 88px;
    max-width: 100%;
    height: auto;
  }

  body.home.dc-language-vi > header > .dc-header-callback {
    grid-area: callback;
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 0;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
  }

  body.home.dc-language-vi > header > .language-switch {
    grid-area: language;
    margin-left: 0;
    gap: 0;
    justify-content: end;
  }

  body.home.dc-language-vi > header > .language-switch :is(a, span) {
    min-width: 36px;
    min-height: 44px;
  }

  body.home.dc-language-vi > header > nav {
    grid-area: navigation;
    order: initial;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    column-gap: 8px;
    row-gap: 0;
    font-size: 12px;
  }

  body.home.dc-language-vi > header > nav a {
    min-height: 44px;
    padding-block: 8px;
    line-height: 1.4;
  }

  body.home.dc-language-vi #main :is(.brand-hero, .brand-hero-copy) {
    min-height: 0;
  }

  body.home.dc-language-vi #main .brand-hero-copy {
    padding: 38px 6% 72px;
  }

  body.home.dc-language-vi #main .brand-hero .eyebrow {
    margin-bottom: 14px;
  }

  body.home.dc-language-vi #main .brand-hero .brand-hero-caption {
    margin-block: 0 18px;
  }

  body.home.dc-language-vi #main .brand-hero h1 {
    margin-bottom: 18px;
  }

  body.home.dc-language-vi #main .brand-hero .brand-service-line {
    margin-bottom: 14px;
  }

  body.home.dc-language-vi #main .brand-hero .brand-hero-intro {
    line-height: 1.7;
    margin-bottom: 24px;
  }

  body.home.dc-language-vi #main :is(#gioi-thieu, #niem-tin, #muc-tieu, #du-an).section {
    padding: 42px 6%;
  }

  body.home.dc-language-vi #main :is(.brand-belief-grid, .brand-goal-grid) {
    margin-top: 28px;
    gap: 26px;
  }

  body.home.dc-language-vi #main .brand-aspiration-grid {
    margin-top: 30px;
    gap: 34px;
  }
}

@media (max-width: 359px) {
  body.home.dc-language-vi > header {
    grid-template-columns: 80px minmax(0, 1fr) 72px;
    column-gap: 6px;
    padding-inline: 12px;
  }

  body.home.dc-language-vi > header > .dc-brand img {
    width: 80px;
  }

  body.home.dc-language-vi > header > .dc-header-callback {
    font-size: 11px;
  }

  body.home.dc-language-vi > header > nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
  }

  body.home.dc-language-vi > header > nav a:nth-child(even) {
    justify-self: end;
  }
}