/* ==========================================================================
   VIETD — Design System
   Palette per official brand spec sheet (see SOURCE-AUDIT.md §1)
   Ratio enforced: Ivory 65% · Charcoal 15% · Burgundy 10% · Blue 7% · Gold 3%
   ========================================================================== */

:root{
  /* --- Brand core --- */
  --burgundy:      #981B22;   /* Primary */
  --burgundy-deep: #681217;   /* Deep — footer, section titles */
  --gold:          #D5A84B;   /* Heritage Gold — accents */
  --gold-light:    #E6C77B;   /* Champagne Gold */
  --ivory:         #F8F6F1;   /* Warm Ivory — main bg */

  /* --- Neutrals & tech --- */
  --charcoal:      #191B1F;   /* body text, headings */
  --slate:         #656A72;   /* secondary text, metadata */
  --border:        #E8E4DC;   /* dividers, cards */
  --blue-corp:     #174F78;   /* AI / technology / digital */
  --blue-vietd:    #1C7389;   /* links, infographics */

  /* --- Derived --- */
  --white:         #FFFFFF;
  --ivory-2:       #F2EFE8;
  --burgundy-soft: #B32A32;
  --gold-soft:     rgba(213,168,75,.14);
  --burgundy-tint: rgba(152,27,34,.055);
  --blue-tint:     rgba(23,79,120,.06);

  /* --- Type --- */
  --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.15rem, 1.35rem + 3.1vw, 4.15rem);
  --fs-h1:      clamp(1.85rem, 1.3rem + 2.2vw, 3.15rem);
  --fs-h2:      clamp(1.5rem, 1.12rem + 1.5vw, 2.4rem);
  --fs-h3:      clamp(1.15rem, 1.02rem + .55vw, 1.5rem);
  --fs-h4:      clamp(1.02rem, .96rem + .3vw, 1.19rem);
  --fs-body:    clamp(.945rem, .91rem + .18vw, 1.045rem);
  --fs-sm:      .87rem;
  --fs-xs:      .765rem;

  /* --- Space --- */
  --sp-1:.4rem; --sp-2:.75rem; --sp-3:1.15rem; --sp-4:1.75rem;
  --sp-5:2.5rem; --sp-6:3.5rem; --sp-7:5rem; --sp-8:7rem;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --maxw: 1240px;
  --maxw-narrow: 880px;

  /* --- Form --- */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;

  --shadow-sm: 0 1px 2px rgba(25,27,31,.05), 0 2px 8px rgba(25,27,31,.04);
  --shadow-md: 0 4px 12px rgba(25,27,31,.06), 0 12px 32px rgba(25,27,31,.07);
  --shadow-lg: 0 12px 28px rgba(25,27,31,.09), 0 32px 64px rgba(25,27,31,.10);
  --shadow-burg: 0 8px 24px rgba(152,27,34,.20);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ==========================  RESET  ========================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; font-family:var(--font); font-size:var(--fs-body);
  line-height:1.68; color:var(--charcoal); background:var(--ivory);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block; height:auto}
a{color:var(--blue-vietd); text-decoration:none; transition:color .2s var(--ease)}
a:hover{color:var(--burgundy)}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,h5{margin:0; line-height:1.2; font-weight:700; letter-spacing:-.018em; color:var(--charcoal)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:3px}

/* ==========================  LAYOUT  ========================== */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--maxw-narrow)}
.section{padding-block:clamp(3.25rem, 2rem + 5vw, 6.5rem)}
.section-tight{padding-block:clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem)}
.section--ivory{background:var(--ivory)}
.section--white{background:var(--white)}
.section--ivory2{background:var(--ivory-2)}
.section--dark{background:var(--burgundy-deep); color:var(--ivory)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white)}
.section--charcoal{background:var(--charcoal); color:#E9E7E2}
.section--charcoal h1,.section--charcoal h2,.section--charcoal h3,.section--charcoal h4{color:var(--white)}
.section--blue{background:var(--blue-corp); color:#DCE7F0}
.section--blue h1,.section--blue h2,.section--blue h3,.section--blue h4{color:var(--white)}

.grid{display:grid; gap:var(--sp-4)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,4vw,4.25rem); align-items:center}
.split-wide{grid-template-columns:1.15fr .85fr}
.split-narrow{grid-template-columns:.8fr 1.2fr}
@media(max-width:900px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .split,.split-wide,.split-narrow{grid-template-columns:1fr; gap:2rem}
}
@media(max-width:600px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
}

/* ==========================  TYPE HELPERS  ========================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--burgundy); margin-bottom:var(--sp-3);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); flex:none}
.section--dark .eyebrow,.section--charcoal .eyebrow,.section--blue .eyebrow{color:var(--gold-light)}
.eyebrow--center{justify-content:center}
.display{font-size:var(--fs-display); font-weight:800; letter-spacing:-.032em; line-height:1.06}
.h1{font-size:var(--fs-h1); font-weight:800; letter-spacing:-.028em}
.h2{font-size:var(--fs-h2); letter-spacing:-.024em}
.h3{font-size:var(--fs-h3)}
.h4{font-size:var(--fs-h4)}
.lead{font-size:clamp(1.02rem, .96rem + .35vw, 1.2rem); color:var(--slate); line-height:1.72; max-width:62ch}
.section--dark .lead,.section--charcoal .lead,.section--blue .lead{color:rgba(255,255,255,.76)}
.muted{color:var(--slate)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.rule{width:56px; height:3px; background:var(--gold); border:0; margin:var(--sp-3) 0}
.rule--center{margin-inline:auto}
.text-gold{color:var(--gold)}
.text-burg{color:var(--burgundy)}
.mt-0{margin-top:0} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}

/* ==========================  BUTTONS  ========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.65em; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:700; letter-spacing:.012em;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--burgundy); color:#fff; box-shadow:var(--shadow-burg)}
.btn-primary:hover{background:var(--burgundy-deep); color:#fff; box-shadow:0 10px 30px rgba(152,27,34,.30)}
.btn-gold{
  background:transparent; color:var(--burgundy);
  border-color:var(--gold-light); border-width:1.5px;
}
.btn-gold:hover{background:var(--gold-soft); color:var(--burgundy-deep); border-color:var(--gold)}
/* Hero CTA: Khám phá giải pháp AI (scoped riêng, tham chiếu File B) */
.hero-solution-cta{
  border-color:var(--gold); color:var(--burgundy);
  box-shadow:0 2px 10px rgba(213,168,75,.1);
}
.hero-solution-cta:hover,
.hero-solution-cta:focus,
.hero-solution-cta:active{
  background:var(--gold); color:#fff; border-color:var(--gold);
  transform:translateY(-2px); box-shadow:0 6px 20px rgba(213,168,75,.35);
}
.hero-solution-cta:hover .arw,
.hero-solution-cta:focus .arw,
.hero-solution-cta:active .arw{
  stroke:#fff; transform:translateX(4px);
}
.btn-ghost-lt{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-ghost-lt:hover{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.75)}
.btn-sm{padding:.7em 1.3em; font-size:var(--fs-xs)}
.btn-block{width:100%}
.btn .arw{transition:transform .25s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center}

/* Text link with arrow */
.tlink{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:700; font-size:var(--fs-sm); color:var(--burgundy);
}
.tlink .arw{transition:transform .25s var(--ease-out)}
.tlink:hover .arw{transform:translateX(4px)}
.section--dark .tlink,.section--charcoal .tlink,.section--blue .tlink{color:var(--gold-light)}

/* ==========================  HEADER  ========================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:rgba(248,246,241,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{
  background:rgba(248,246,241,.965);
  border-bottom-color:var(--border);
  box-shadow:0 1px 18px rgba(25,27,31,.07);
}
.hdr-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); height:74px;
}
.hdr-brand{display:flex; align-items:center; gap:.75rem; flex:none; flex-shrink:0}
.hdr-brand img{height:48px; width:auto; max-width:none; object-fit:contain; flex-shrink:0; display:block}
.hdr-brand .bt{display:flex; flex-direction:column; line-height:1.12}
.hdr-brand .bt b{font-size:.845rem; font-weight:800; letter-spacing:-.01em; color:var(--burgundy)}
.hdr-brand .bt span{font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}

.nav{display:flex; align-items:center; gap:.15rem}
.nav-item{position:relative}
.nav-link{
  display:flex; align-items:center; gap:.32em;
  padding:.6rem .78rem; border-radius:var(--r-sm);
  font-size:.885rem; font-weight:600; color:var(--charcoal);
  background:none; border:0; cursor:pointer; white-space:nowrap;
}
.nav-link:hover{color:var(--burgundy); background:var(--burgundy-tint)}
.nav-link[aria-current="page"]{color:var(--burgundy)}
.nav-link .cv{width:9px; height:9px; transition:transform .25s var(--ease)}
.nav-item:hover .cv,.nav-item:focus-within .cv{transform:rotate(180deg)}

.dropdown{
  position:absolute; top:calc(100% + 8px); left:50%; translate:-50% 0;
  min-width:265px; padding:.5rem;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-7px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{
  display:block; padding:.6rem .75rem; border-radius:var(--r-sm);
  font-size:.86rem; font-weight:500; color:var(--charcoal);
}
.dropdown a:hover{background:var(--ivory-2); color:var(--burgundy)}
.dropdown a small{display:block; font-size:.74rem; color:var(--slate); font-weight:400; margin-top:.1rem}

.hdr-actions{display:flex; align-items:center; gap:.6rem; flex:none}
/* The CTA that lives inside .nav belongs to the mobile drawer only.
   On desktop the header CTA in .hdr-actions already covers this, so
   showing both produced two identical buttons side by side. */
.nav-cta{display:none}
.nav-toggle{
  display:none; width:42px; height:42px; padding:0;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer;
}
.nav-toggle span{display:block; width:19px; height:2px; background:var(--charcoal); position:relative; transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:19px; height:2px; background:var(--charcoal);
  transition:transform .28s var(--ease);
}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1080px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed; inset:74px 0 0 0; z-index:89;
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--sp-4) var(--gutter) var(--sp-7);
    background:var(--ivory); border-top:1px solid var(--border);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%); transition:transform .32s var(--ease-out);
  }
  .nav.is-open{transform:translateX(0)}
  .nav-item{border-bottom:1px solid var(--border)}
  .nav-link{width:100%; justify-content:space-between; padding:1.05rem .2rem; font-size:1.02rem}
  .nav-cta{display:inline-flex; margin-top:var(--sp-4); align-self:flex-start}
  .nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1; visibility:visible}
  .dropdown{
    position:static; translate:none; transform:none; opacity:1; visibility:visible;
    min-width:0; padding:0 0 .7rem .9rem; background:none; border:0; box-shadow:none;
    display:none;
  }
  .nav-item.is-open .dropdown{display:block}
  .dropdown a{padding:.6rem .7rem; font-size:.95rem}
  .nav .btn{margin-top:var(--sp-4)}
  .hdr-brand .bt{display:none}
  .hdr-brand img{height:44px; width:auto; object-fit:contain}
}
@media(max-width:400px){ .hdr-brand img{height:40px; width:auto; object-fit:contain} }

/* ==========================  HERO  ========================== */
.hero{
  position:relative; overflow:hidden;
  padding-top:calc(74px + clamp(2.75rem,5vw,5.5rem));
  padding-bottom:clamp(3rem,5vw,5.75rem);
  background:
    radial-gradient(circle 1px at 0 0, rgba(25,27,31,.028) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(1000px 520px at 92% -4%, rgba(152,27,34,.065), transparent 62%),
    radial-gradient(850px 480px at 80% 46%, rgba(213,168,75,.09), transparent 65%),
    radial-gradient(650px 380px at 3% 98%, rgba(213,168,75,.10), transparent 58%),
    var(--ivory);
}
.hero::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--burgundy) 0%,var(--burgundy) 34%,var(--gold) 34%,var(--gold) 52%,var(--blue-corp) 52%,var(--blue-corp) 76%,var(--blue-vietd) 76%);
}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center}
@media(max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:2.5rem} }

.hero-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.44rem .95rem .44rem .5rem; margin-bottom:var(--sp-4);
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; color:var(--burgundy-deep);
  box-shadow:var(--shadow-sm);
}
.hero-badge i{
  display:grid; place-items:center; width:22px; height:22px;
  background:var(--gold-soft); border-radius:50%; font-style:normal; font-size:.72rem;
}
.hero h1{margin-bottom:var(--sp-3); max-width:20ch}
.hero h1 em{font-style:normal; color:var(--burgundy); position:relative}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.02em; height:.28em;
  background:linear-gradient(90deg,var(--gold-light),rgba(230,199,123,.35));
  z-index:-1; border-radius:2px;
}
.hero .lead{max-width:56ch; margin-bottom:var(--sp-5)}
.hero-pillars{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-4)}
.chip{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.4rem .85rem; border-radius:var(--r-pill);
  background:var(--white); border:1px solid var(--border);
  font-size:var(--fs-xs); font-weight:600; color:var(--slate);
}
.chip b{color:var(--burgundy); font-weight:700}
/* Hero Trust Bar (tích hợp pattern File B) */
.hero-trust-bar{
  display:flex; align-items:center; gap:1.25rem;
  padding-top:var(--sp-4); margin-top:var(--sp-4);
  border-top:1px solid var(--border);
}
.trust-avatars{
  display:flex; align-items:center; margin-left:8px; flex-shrink:0;
}
.trust-avatar{
  width:36px; height:36px; border-radius:var(--r-pill);
  border:2px solid var(--ivory); margin-left:-8px;
  object-fit:cover; background:var(--border);
}
.trust-avatar-badge{
  background:var(--blue-corp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700; line-height:1;
}
.trust-text{
  font-size:var(--fs-sm); color:var(--slate); line-height:1.45;
}
.trust-text strong{
  color:var(--charcoal); font-weight:700;
}
@media(max-width:560px){
  .hero-trust-bar{flex-wrap:wrap; gap:.75rem}
}

.hero-visual{position:relative}
.hero-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3.35;
  background:var(--ivory-2);
  border:1px solid rgba(213,168,75,.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6),
    0 16px 40px -8px rgba(25,27,31,.10),
    0 32px 64px -16px rgba(25,27,31,.08);
}
.hero-frame::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg, var(--gold-light) 0%, rgba(230,199,123,.4) 65%, transparent 100%);
}
.hero-frame img{width:100%; height:100%; object-fit:cover}
.hero-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(104,18,23,.05) 0%,rgba(104,18,23,.45) 100%);
}
.hero-frame-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--sp-4); color:#fff;
  /* leave room for the bottom-right float badge, which overlaps the frame */
  padding-right:min(46%, 15rem);
}
@media(max-width:640px){ .hero-frame-cap{padding-right:var(--sp-4)} }
.hero-frame-cap strong{display:block; font-size:1rem; font-weight:700; line-height:1.35}
.hero-frame-cap span{font-size:var(--fs-xs); opacity:.85}
.hero-float{
  position:absolute; z-index:3;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:14px;
  box-shadow:0 8px 24px -4px rgba(25,27,31,.08), 0 2px 6px rgba(25,27,31,.03);
  padding:.85rem 1.15rem;
  border:1px solid rgba(232,228,220,.9);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease-out);
}
.hero-float:hover{
  border-color:rgba(213,168,75,.45);
  box-shadow:0 12px 28px -4px rgba(25,27,31,.11), 0 4px 10px rgba(213,168,75,.1);
}
.hero-float--tl{top:-14px; left:-14px}
.hero-float--br{
  bottom:-16px; right:-14px; display:flex; align-items:center; gap:.7rem;
  animation:subtleFloat 4s ease-in-out infinite;
  will-change:transform;
}
.hero-float--br:hover{
  animation-play-state:paused;
}

@keyframes subtleFloat{
  0%, 100%{
    transform:translateY(0);
    box-shadow:0 8px 24px -4px rgba(25,27,31,.08), 0 2px 6px rgba(25,27,31,.03);
  }
  50%{
    transform:translateY(-5px);
    box-shadow:0 14px 30px -4px rgba(25,27,31,.12), 0 4px 10px rgba(25,27,31,.04);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-float--br{
    animation:none !important;
  }
}
.hero-float .n{font-size:1.32rem; font-weight:800; color:var(--burgundy); line-height:1}
.hero-float .l{font-size:.7rem; color:var(--slate); font-weight:600; letter-spacing:.02em}
.hero-float .ic{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  background:var(--gold-soft); border-radius:var(--r-sm);
}
@media(max-width:520px){ .hero-float--tl{left:0} .hero-float--br{right:0} }

/* --- Hero on narrow screens -------------------------------------------
   The two float badges are absolutely positioned and hang outside the
   frame (top:-14px / bottom:-16px). On phones the bottom badge collides
   with the photo caption, so we reserve vertical room under the frame
   and drop the badges into normal flow instead of overlapping. */
@media(max-width:640px){
  .hero-visual{padding-bottom:0}
  .hero-frame-cap{padding-bottom:calc(var(--sp-4) + .4rem)}
  .hero-float{
    position:static; box-shadow:var(--shadow-md);
    width:100%; margin-top:.7rem;
  }
  .hero-float--tl,.hero-float--br{
    top:auto; right:auto; bottom:auto; left:auto;
    display:flex; align-items:center; gap:.6rem;
  }
  .hero-float--tl{justify-content:flex-start}
  .hero-float--tl .n{margin-right:.15rem}
  .hero-float--br{justify-content:flex-start}
}

/* ==========================  CARDS  ========================== */
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-4); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(213,168,75,.5)}
.card-ic{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:var(--sp-3);
  background:var(--burgundy-tint); border-radius:var(--r-sm); color:var(--burgundy); flex:none;
}
.card-ic svg{width:22px; height:22px}
.card h3{margin-bottom:.5rem}
.card p{font-size:var(--fs-sm); color:var(--slate); line-height:1.65}
.card-num{
  font-size:.72rem; font-weight:800; letter-spacing:.14em; color:var(--gold);
  display:block; margin-bottom:.7rem;
}

/* Pillar cards (Two Premium Solution Panels) */
.pillar{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:clamp(1.85rem, 3.2vw, 2.75rem);
  border-radius:24px;
  background:linear-gradient(172deg, #FFFFFF 0%, #FAF8F4 100%);
  border:1px solid rgba(232,228,220,.9);
  box-shadow:0 4px 16px rgba(25,27,31,.04);
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.pillar::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3.5px;
  background:var(--burgundy);
  transition:background .28s var(--ease);
}
.pillar--blue::before{
  background:var(--blue-corp);
}
.pillar:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -8px rgba(25,27,31,.09), 0 6px 14px rgba(152,27,34,.04);
  border-color:rgba(152,27,34,.35);
}
.pillar--blue:hover{
  border-color:rgba(23,79,120,.35);
  box-shadow:0 18px 40px -8px rgba(25,27,31,.09), 0 6px 14px rgba(23,79,120,.05);
}
.pillar-num{
  display:none;
}
.pillar-ic{
  position:absolute;
  top:1.85rem;
  right:1.85rem;
  z-index:1;
  color:var(--burgundy);
  opacity:.42;
  transition:transform .32s var(--ease-out), opacity .32s var(--ease);
}
.pillar-ic svg{
  width:32px;
  height:32px;
  display:block;
}
.pillar--blue .pillar-ic{
  color:var(--blue-corp);
  opacity:.42;
}
.pillar:hover .pillar-ic{
  transform:translate(2px, -2px);
  opacity:.8;
}
.pillar .pt{
  position:relative;
  z-index:1;
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:.85rem;
  display:inline-block;
}
.pillar--blue .pt{
  color:var(--blue-corp);
}
.pillar h3{
  position:relative;
  z-index:1;
  font-size:clamp(1.3rem, 1.15rem + .45vw, 1.65rem);
  margin-bottom:.75rem;
  color:var(--charcoal);
  font-weight:800;
}
.pillar p{
  position:relative;
  z-index:1;
  font-size:var(--fs-sm);
  line-height:1.68;
}
.pillar .tlink{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding-top:var(--sp-4);
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-weight:700;
  font-size:var(--fs-sm);
}
.pillar--blue .tlink{
  color:var(--blue-corp);
}
.pillar:hover .tlink .arw{
  transform:translateX(4px);
}

/* Executive Proof Dashboard (Homepage Section 02) */
@media(min-width:901px){
  .exec-proof{
    position:relative;
  }
  .exec-proof-text{
    position:relative;
    padding-right:clamp(1.5rem, 3.2vw, 3rem);
  }
  .exec-proof-text::after{
    content:"";
    position:absolute;
    top:6%;
    bottom:6%;
    right:0;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(213,168,75,.45) 20%, rgba(152,27,34,.35) 80%, transparent);
  }
}

/* Executive Proof Dashboard: Typographic Metric Grid (Homepage Section 02) */
.exec-proof-stats .stat-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  background:transparent;
}
.exec-proof-stats .stat{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  transform:none !important;
  cursor:default;
  outline:none;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:none;
}
.exec-proof-stats .stat::before{
  display:none !important;
}
.exec-proof-stats .stat:hover,
.exec-proof-stats .stat.active{
  transform:none !important;
  background:transparent;
  box-shadow:none;
  border:none;
}
.exec-proof-stats .stat:focus-visible{
  outline:none;
  box-shadow:none;
}
.exec-proof-stats .stat .n{
  font-size:clamp(2.1rem, 1.6rem + 1.8vw, 3rem);
  font-weight:800;
  color:var(--burgundy);
  letter-spacing:-.035em;
  line-height:1.08;
  display:block;
  font-family:var(--font);
}
.exec-proof-stats .stat .l{
  display:block;
  margin-top:.55rem;
  font-size:var(--fs-sm);
  color:var(--slate);
  font-weight:500;
  line-height:1.48;
  transition:color .2s var(--ease);
}
.exec-proof-stats .stat:hover .l,
.exec-proof-stats .stat.active .l{
  color:var(--charcoal);
}

/* Subtle 2x2 Hairline Dividers on Desktop / Tablet (>=521px) */
@media(min-width:521px){
  .exec-proof-stats .stat:nth-child(1){
    border-right:1px solid rgba(25,27,31,.08);
    border-bottom:1px solid rgba(25,27,31,.08);
    padding:1.4rem 2rem 1.8rem 0;
  }
  .exec-proof-stats .stat:nth-child(2){
    border-bottom:1px solid rgba(25,27,31,.08);
    padding:1.4rem 0 1.8rem 2rem;
  }
  .exec-proof-stats .stat:nth-child(3){
    border-right:1px solid rgba(25,27,31,.08);
    padding:1.8rem 2rem 1.4rem 0;
  }
  .exec-proof-stats .stat:nth-child(4){
    padding:1.8rem 0 1.4rem 2rem;
  }
}

/* Single column stacked on Mobile (<=520px) */
@media(max-width:520px){
  .exec-proof-stats .stat-band{
    grid-template-columns:1fr !important;
  }
  .exec-proof-stats .stat{
    border-right:none !important;
    padding:1.25rem 0;
  }
  .exec-proof-stats .stat:not(:last-child){
    border-bottom:1px solid rgba(25,27,31,.08);
  }
  .exec-proof-stats .stat:last-child{
    border-bottom:none !important;
    padding-bottom:0;
  }
  .exec-proof-stats .stat:first-child{
    padding-top:0;
  }
}

/* Generic .stat and .stat-band fallback for any other sections */
.stat{
  text-align:left;
  position:relative;
}
.stat .n{
  font-size:clamp(1.95rem, 1.35rem + 1.7vw, 2.75rem);
  font-weight:800;
  color:var(--burgundy);
  letter-spacing:-.035em;
  line-height:1;
  display:block;
}
.stat .l{
  display:block;
  margin-top:.5rem;
  font-size:var(--fs-sm);
  color:var(--slate);
  font-weight:500;
  line-height:1.45;
}
.section--dark .stat .n,.section--charcoal .stat .n{
  color:var(--gold-light);
}
.section--dark .stat .l,.section--charcoal .stat .l{
  color:rgba(255,255,255,.68);
}
.stat-band{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4)}
@media(max-width:760px){ .stat-band{grid-template-columns:repeat(2,1fr); gap:var(--sp-3)} }
@media(max-width:480px){ .stat-band{grid-template-columns:1fr; gap:var(--sp-3)} }

/* ==========================  FRAMEWORK / STEPS  ========================== */
.framework{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); position:relative}
@media(max-width:940px){ .framework{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .framework{grid-template-columns:1fr} }
.fw-step{
  position:relative; padding:var(--sp-4) var(--sp-3) var(--sp-3);
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.fw-step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.fw-step::before{
  content:""; position:absolute; top:0; left:var(--sp-3); right:var(--sp-3); height:3px;
  background:linear-gradient(90deg,var(--burgundy),var(--gold)); border-radius:0 0 3px 3px;
}
.fw-n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 .5rem; margin-bottom:.85rem;
  background:var(--burgundy); color:#fff; border-radius:var(--r-sm);
  font-size:.82rem; font-weight:800; letter-spacing:.02em;
}
.fw-step h3{font-size:1.04rem; margin-bottom:.35rem}
.fw-step p{font-size:var(--fs-sm); color:var(--slate); line-height:1.62}
.fw-tag{
  display:inline-block; margin-top:.8rem; padding:.2rem .55rem;
  background:var(--ivory-2); border-radius:var(--r-sm);
  font-size:.7rem; font-weight:700; letter-spacing:.07em; color:var(--slate);
}
.fw-chain{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.55rem; margin-top:var(--sp-5);
  font-size:var(--fs-sm); font-weight:800; letter-spacing:.1em; color:var(--burgundy);
}
.fw-chain .sep{color:var(--gold); font-weight:400}
@media(max-width:600px){ .fw-chain{font-size:.7rem; gap:.35rem} }

/* ==========================  FRAMEWORK JOURNEY (Homepage Timeline)  ========================== */
.framework-journey{
  padding-top:1.5rem;
}
.framework-journey .fw-step{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:var(--sp-4) var(--sp-4) var(--sp-4);
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.framework-journey .fw-step::before{
  display:none; /* replaced by node and timeline architecture */
}
.framework-journey .fw-n{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:50%;
  background:var(--burgundy-deep);
  border:2px solid var(--gold);
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  box-shadow:0 0 0 4px rgba(104,18,23,.55), 0 2px 8px rgba(0,0,0,.25);
  margin-bottom:1.15rem;
  transition:transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.framework-journey .fw-step h3{
  font-size:1.15rem;
  letter-spacing:.03em;
  color:var(--white);
  margin-bottom:.35rem;
}
.framework-journey .fw-step p{
  color:rgba(255,255,255,.78);
  font-size:var(--fs-sm);
  line-height:1.64;
}
.framework-journey .fw-step p[style*="color:var(--charcoal)"]{
  color:var(--gold-light) !important;
  font-size:var(--fs-sm) !important;
  letter-spacing:.01em;
}
.framework-journey .fw-step:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.085);
  border-color:rgba(213,168,75,.45);
  box-shadow:0 14px 32px rgba(0,0,0,.32);
}
.framework-journey .fw-step:hover .fw-n{
  border-color:var(--gold-light);
  color:var(--gold-light);
  box-shadow:0 0 16px rgba(213,168,75,.45), 0 0 0 4px rgba(104,18,23,.8);
}

@media(min-width:941px){
  .framework-journey{
    position:relative;
  }
  .framework-journey::before{
    content:"";
    position:absolute;
    top:calc(1.5rem + var(--sp-4) + 23px);
    left:12.5%;
    right:12.5%;
    height:2px;
    background:linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 50%, var(--gold-light) 100%);
    opacity:.35;
    z-index:0;
  }
  .framework-journey .fw-step{
    position:relative;
    z-index:1;
  }
  .framework-journey .fw-step:not(:last-child)::after{
    content:"→";
    position:absolute;
    right:-14px;
    top:calc(var(--sp-4) + 12px);
    z-index:2;
    color:var(--gold);
    font-size:1.15rem;
    font-weight:400;
    opacity:.75;
    line-height:1;
  }
}

@media(max-width:940px) and (min-width:768px){
  .framework-journey{
    grid-template-columns:repeat(2,1fr);
    gap:var(--sp-4);
  }
}

@media(max-width:767px){
  .framework-journey{
    display:flex;
    flex-direction:column;
    gap:1.35rem;
    padding-left:14px;
    padding-top:0;
    position:relative;
  }
  .framework-journey::before{
    content:"";
    position:absolute;
    top:30px;
    bottom:30px;
    left:37px;
    width:2px;
    background:linear-gradient(180deg, var(--burgundy) 0%, var(--gold) 50%, var(--gold-light) 100%);
    opacity:.35;
    z-index:0;
  }
  .framework-journey .fw-step{
    display:grid;
    grid-template-columns:46px 1fr;
    column-gap:1.15rem;
    align-items:start;
    padding:1.25rem 1.25rem 1.25rem 1rem;
    border-radius:18px;
    position:relative;
    z-index:1;
  }
  .framework-journey .fw-n{
    grid-column:1;
    grid-row:1 / span 3;
    margin-bottom:0;
  }
  .framework-journey .fw-step h3{
    grid-column:2;
    margin-bottom:.2rem;
  }
  .framework-journey .fw-step p{
    grid-column:2;
    margin:0 0 .3rem;
  }
  .framework-journey .fw-step p:last-child{
    margin-bottom:0;
  }
}

/* Hide redundant fw-chain on homepage */
.section--dark .framework-journey ~ .fw-chain{
  display:none;
}

/* Framework Journey Capsule */
.fw-capsule-wrap{
  display:flex;
  justify-content:center;
  margin-top:var(--sp-5);
}
.fw-capsule{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:0 auto;
  padding:10px 24px;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(213,168,75,.32);
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}

/* ==========================  COMPARE / PRINCIPLE  ========================== */
.principle{border-left:3px solid var(--gold); padding-left:var(--sp-3)}
.principle h4{font-size:var(--fs-h4); margin-bottom:.35rem}
.principle p{font-size:var(--fs-sm); color:var(--slate)}
.principle .k{font-size:var(--fs-xs); font-weight:800; letter-spacing:.15em; color:var(--gold); display:block; margin-bottom:.35rem}

/* ==========================  LIST CHECKS  ========================== */
.checks{display:grid; gap:.62rem}
.checks li{position:relative; padding-left:1.7rem; font-size:var(--fs-sm); color:var(--slate); line-height:1.62}
.checks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:15px; height:15px; border-radius:50%;
  background:var(--gold-soft);
  box-shadow:inset 0 0 0 1.5px var(--gold);
}
.checks li::after{
  content:""; position:absolute; left:4.5px; top:.72em;
  width:5px; height:2.5px; border-left:1.6px solid var(--burgundy); border-bottom:1.6px solid var(--burgundy);
  transform:rotate(-45deg);
}
.section--dark .checks li,.section--charcoal .checks li{color:rgba(255,255,255,.76)}
.section--blue .checks li{color:rgba(255,255,255,.8)}

/* Refined Corporate SVG Checkmark Lists */
.legal-checks,
.practice-checks{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.75rem;
}
.legal-checks li,
.practice-checks li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:var(--fs-sm);
  color:var(--charcoal);
  line-height:1.6;
}
.list-check-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:20px;
  height:20px;
  margin-top:.15em;
}
.list-check-icon svg{
  width:20px;
  height:20px;
  display:block;
}

/* Availability pills (Phù hợp với) */
.pill-row{display:flex; flex-wrap:wrap; gap:.4rem}
.pill{
  padding:.3rem .72rem; border-radius:var(--r-pill);
  background:var(--ivory-2); border:1px solid var(--border);
  font-size:var(--fs-xs); font-weight:600; color:var(--slate);
}
.pill--b{background:var(--burgundy-tint); border-color:rgba(152,27,34,.18); color:var(--burgundy)}
.pill--bl{background:var(--blue-tint); border-color:rgba(23,79,120,.18); color:var(--blue-corp)}

/* ==========================  ACCORDION (programs)  ========================== */
.acc{border:1px solid var(--border); border-radius:var(--r-md); background:var(--white); overflow:hidden}
.acc + .acc{margin-top:.85rem}
.acc-h{
  display:flex; align-items:flex-start; gap:var(--sp-3); width:100%;
  padding:var(--sp-4); background:none; border:0; cursor:pointer; text-align:left;
  transition:background .2s var(--ease);
}
.acc-h:hover{background:var(--ivory)}
.acc-n{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--burgundy); color:#fff; font-size:.9rem; font-weight:800;
}
.acc-t{flex:1; min-width:0}
.acc-t .k{font-size:var(--fs-xs); font-weight:800; letter-spacing:.14em; color:var(--gold); display:block; margin-bottom:.22rem}
.acc-t h3{font-size:var(--fs-h4); margin-bottom:.2rem}
.acc-t p{font-size:var(--fs-sm); color:var(--slate); margin:0}
.acc-x{
  flex:none; display:grid; place-items:center; width:30px; height:30px;
  border:1px solid var(--border); border-radius:50%; color:var(--burgundy);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.acc[open] .acc-x,.acc.is-open .acc-x{transform:rotate(45deg); background:var(--burgundy); color:#fff; border-color:var(--burgundy)}
.acc-b{padding:0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 44px + var(--sp-3)); display:none}
.acc.is-open .acc-b{display:block; animation:fadeUp .34s var(--ease-out)}
@media(max-width:620px){ .acc-b{padding-left:var(--sp-4)} }
@keyframes fadeUp{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ==========================  TEAM  ==========================
   Member cards use a compact horizontal layout: a small fixed-size
   portrait next to the name, rather than a large photo panel.

   Reason (measured, not cosmetic): the source PDF embeds these portraits
   at only 46x66 .. 103x129 px. A large photo panel would display them at
   ~430px wide — a ~10x blow-up that reads as blurry. At avatar size they
   render 1:1 with the available pixels and look intentional.
   ============================================================ */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
@media(max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .team-grid{grid-template-columns:1fr} }
.member{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.member:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(213,168,75,.5)}
.member-ph{
  position:relative; flex:none;
  width:72px; height:86px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--ivory-2); box-shadow:var(--shadow-sm);
}
.member-ph img{width:100%; height:100%; object-fit:cover; object-position:center 20%}
.member-ph::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(25,27,31,.06);
  border-radius:inherit;
}
.member-role{
  display:inline-block; margin-top:.32rem;
  padding:.2rem .55rem; border-radius:var(--r-pill);
  background:var(--gold-soft); color:var(--burgundy-deep);
  font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.member-body{min-width:0}
.member-body h3{font-size:1.02rem; margin-bottom:.16rem}
.member-body .cred{font-size:var(--fs-xs); font-weight:700; color:var(--burgundy); letter-spacing:.02em}
.member-body .role{font-size:var(--fs-xs); color:var(--slate)}

/* Featured leaders (Chủ tịch / Viện trưởng) */
.leadership-top{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-bottom:var(--sp-5)}
@media(max-width:760px){ .leadership-top{grid-template-columns:1fr} }
.lead-feat{
  display:flex; gap:var(--sp-3); align-items:center;
  padding:var(--sp-4); background:var(--white);
  border:1px solid var(--border); border-left:4px solid var(--burgundy); border-radius:var(--r-md);
}
.lead-feat img{
  width:88px; height:106px; flex:none; object-fit:cover; object-position:center 18%;
  border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
}
.lead-feat h3{font-size:1.1rem; margin-bottom:.18rem}
.lead-feat .cred{font-size:var(--fs-xs); font-weight:700; color:var(--burgundy)}
.lead-feat .role{font-size:var(--fs-sm); color:var(--slate); margin-top:.3rem}
@media(max-width:420px){ .lead-feat{flex-direction:column; text-align:center} }

/* ==========================  LOGO WALL  ========================== */
.logo-wall{
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); padding:clamp(1rem,2.5vw,2rem); overflow:hidden;
}
.logo-wall img{
  width:100%; filter:none; opacity:1;
}

/* ==========================  PARTNER MARQUEE (File B pattern)  ========================== */
.marquee-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.15rem;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:var(--sp-4);
}
.marquee-heading::before,
.marquee-heading::after{
  content:"";
  height:1px;
  width:44px;
  background:linear-gradient(90deg, transparent, rgba(213,168,75,.45));
}
.marquee-heading::after{
  background:linear-gradient(90deg, rgba(213,168,75,.45), transparent);
}

.marquee-wrapper{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:1.25rem 0;
  mask-image:linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.marquee-track{
  display:flex;
  gap:24px;
  width:max-content;
}
.marquee-group{
  display:flex;
  align-items:center;
  gap:24px;
  flex-shrink:0;
  animation:marqueeScroll 45s linear infinite;
}
.marquee-wrapper:hover .marquee-group{
  animation-play-state:paused;
}
@keyframes marqueeScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(calc(-100% - 24px)); }
}
.logo-item{
  height:64px;
  padding:10px 22px;
  background:var(--white);
  border:1px solid rgba(232,228,220,.85);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease-out);
  flex-shrink:0;
}
.logo-item img{
  max-height:40px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  filter:none;
  opacity:1;
}
.logo-item:hover{
  border-color:var(--gold);
  box-shadow:0 6px 18px rgba(213,168,75,.22);
  transform:translateY(-2px);
}
@media(max-width:768px){
  .marquee-heading{
    font-size:.72rem;
    letter-spacing:.06em;
    gap:.75rem;
  }
  .marquee-heading::before,
  .marquee-heading::after{
    width:28px;
  }
  .marquee-track{ gap:16px; }
  .marquee-group{ gap:16px; animation-duration:35s; }
  @keyframes marqueeScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(calc(-100% - 16px)); }
  }
  .logo-item{ height:54px; padding:8px 16px; border-radius:12px; }
  .logo-item img{ max-height:34px; max-width:100px; }
}
@media(prefers-reduced-motion:reduce){
  .marquee-group{ animation:none; }
  .marquee-wrapper{ overflow-x:auto; }
}

/* ==========================  GALLERY  ========================== */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3)}
@media(max-width:860px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .gallery{grid-template-columns:1fr} }
.shot{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  background:var(--ivory-2); aspect-ratio:4/3;
}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out)}
.shot:hover img{transform:scale(1.055)}
.shot-cap{
  position:absolute; inset:auto 0 0 0; padding:1.1rem .95rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(16,17,20,.86));
  color:#fff;
}
.shot-cap strong{display:block; font-size:.845rem; font-weight:700; line-height:1.35}
.shot-cap span{font-size:.7rem; opacity:.8}
.shot--wide{grid-column:span 2; aspect-ratio:8/3.4}
@media(max-width:520px){ .shot--wide{grid-column:span 1; aspect-ratio:4/3} }

/* ==========================  ECOSYSTEM  ========================== */
.eco-list{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem}
@media(max-width:700px){ .eco-list{grid-template-columns:1fr} }
.eco-item{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.85rem 1rem; background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:500; color:var(--charcoal);
  transition:border-color .25s var(--ease), transform .25s var(--ease-out);
}
.eco-item:hover{border-color:rgba(213,168,75,.6); transform:translateX(3px)}
.eco-item .dot{
  flex:none; width:7px; height:7px; margin-top:.55em; border-radius:50%; background:var(--gold);
}
.eco-item small{display:block; font-size:var(--fs-xs); color:var(--slate); font-weight:400}

/* ==========================  SOLUTIONS  ========================== */
.sol{
  display:flex; flex-direction:column;
  padding:clamp(1.4rem,2.6vw,2rem); background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-md);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.sol:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(23,79,120,.35)}
.sol-h{display:flex; align-items:center; gap:.85rem; margin-bottom:var(--sp-3)}
.sol-n{
  display:grid; place-items:center; flex:none; width:40px; height:40px;
  background:var(--blue-corp); color:#fff; border-radius:var(--r-sm);
  font-size:.8rem; font-weight:800;
}
.sol-h h3{font-size:var(--fs-h4)}
.sol > p{font-size:var(--fs-sm); color:var(--slate); margin-bottom:var(--sp-3)}
.sol-tasks{display:grid; gap:.35rem; margin-bottom:var(--sp-3)}
.sol-tasks li{
  position:relative; padding-left:1.15rem;
  font-size:var(--fs-sm); color:var(--slate);
}
.sol-tasks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}
.sol-goal{
  padding:.8rem .95rem; background:var(--ivory-2); border-radius:var(--r-sm);
  font-size:var(--fs-xs); color:var(--slate); margin-top:auto; margin-bottom:var(--sp-3);
}
.sol-goal b{color:var(--burgundy)}

/* ==========================  QUOTE  ========================== */
.quote{
  position:relative; padding:var(--sp-5) clamp(1.5rem,4vw,3.5rem);
  text-align:center; max-width:900px; margin-inline:auto;
}
.quote::before{
  content:"\\201C"; position:absolute; top:-.1em; left:50%; translate:-50% 0;
  font-size:7rem; line-height:1; font-family:Georgia,serif; color:var(--gold); opacity:.4;
}
.quote blockquote{
  margin:0; font-size:clamp(1.15rem,1rem + .75vw,1.62rem);
  font-weight:600; line-height:1.5; letter-spacing:-.015em; color:var(--charcoal);
}
.quote cite{
  display:block; margin-top:var(--sp-3); font-size:var(--fs-sm);
  font-style:normal; font-weight:700; color:var(--burgundy);
}
.section--dark .quote blockquote,.section--charcoal .quote blockquote{color:#fff}
.section--dark .quote cite{color:var(--gold-light)}

/* ==========================  CTA BAND  ========================== */
.cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--burgundy-deep) 0%,var(--burgundy) 58%,#7d1a20 100%);
  color:#fff; border-radius:var(--r-lg);
  padding:clamp(2rem,4.5vw,3.75rem);
}
.cta-band::before{
  content:""; position:absolute; top:-45%; right:-12%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(213,168,75,.22),transparent 66%);
}
.cta-band::after{
  content:""; position:absolute; bottom:-60%; left:-8%;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(28,115,137,.24),transparent 66%);
}
.cta-inner{position:relative; z-index:1; max-width:760px}
.cta-band h2{color:#fff; margin-bottom:var(--sp-3)}
.cta-band p{color:rgba(255,255,255,.82); margin-bottom:var(--sp-4); max-width:60ch}
.cta-note{font-size:var(--fs-xs); color:rgba(255,255,255,.62); margin-top:var(--sp-3)}

/* ==========================  CTA BAND (HOMEPAGE EXECUTIVE PANEL)  ========================== */
.cta-band--home{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(213,168,75,.32);
  background:
    radial-gradient(circle 1px at 0 0, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle 480px at 92% 50%, rgba(213,168,75,.18), transparent 68%),
    radial-gradient(circle 380px at 8% 85%, rgba(104,18,23,.55), transparent 65%),
    linear-gradient(135deg, #4F0D12 0%, var(--burgundy-deep) 42%, var(--burgundy) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 24px 56px -12px rgba(25,27,31,.24),
    0 10px 24px -4px rgba(104,18,23,.18);
  padding:clamp(2.25rem, 4.5vw, 4rem);
}
.cta-band--home::before,
.cta-band--home::after{
  display:none;
}
.cta-band--home .cta-inner{
  max-width:none;
  display:grid;
  grid-template-columns:1.65fr .85fr;
  align-items:center;
  gap:clamp(1.75rem, 3.5vw, 3.5rem);
}
.cta-band--home .cta-content{
  min-width:0;
}
.cta-band--home .cta-content .eyebrow{
  margin-bottom:var(--sp-2);
}
.cta-band--home .cta-content h2{
  color:#fff;
  font-size:clamp(1.5rem, 1.25rem + 1.2vw, 2.35rem);
  line-height:1.24;
  margin-bottom:var(--sp-3);
  max-width:24ch;
}
.cta-band--home .cta-content p{
  color:rgba(255,255,255,.84);
  font-size:clamp(.95rem, .92rem + .2vw, 1.08rem);
  line-height:1.65;
  margin:0;
  max-width:54ch;
}
.cta-band--home .cta-actions{
  justify-content:flex-end;
  margin:0;
}
.cta-band--home .btn{
  padding:1.05em 2.25em;
  font-size:1rem;
  border-radius:var(--r-pill);
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease), background .28s var(--ease), color .28s var(--ease);
}
.cta-band--home .btn:hover{
  background:#FAF6ED !important;
  color:var(--burgundy-deep) !important;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.32) !important;
}

@media(max-width:900px){
  .cta-band--home .cta-inner{
    grid-template-columns:1fr;
    gap:var(--sp-4);
  }
  .cta-band--home .cta-actions{
    justify-content:flex-start;
  }
}
@media(max-width:560px){
  .cta-band--home{
    padding:var(--sp-4);
    border-radius:20px;
  }
  .cta-band--home .btn{
    width:100%;
  }
}

/* ==========================  PAGE HEAD (subpages)  ========================== */
.page-head{
  position:relative; overflow:hidden; color:#fff;
  padding-top:calc(74px + clamp(2.5rem,4.5vw,4.5rem));
  padding-bottom:clamp(2.5rem,4.5vw,4.5rem);
  background:linear-gradient(140deg,var(--burgundy-deep) 0%,var(--burgundy) 62%,#82202a 100%);
}
.page-head::before{
  content:""; position:absolute; top:-40%; right:-8%;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(213,168,75,.2),transparent 64%);
}
.page-head::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light) 52%,transparent);
}
.page-head .wrap{position:relative; z-index:1}
.page-head h1{color:#fff; margin-bottom:var(--sp-3); max-width:24ch}
.page-head .lead{color:rgba(255,255,255,.82)}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:var(--fs-xs); margin-bottom:var(--sp-4)}
.crumbs a{color:rgba(255,255,255,.72)}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(255,255,255,.42)}
.crumbs .cur{color:var(--gold-light); font-weight:600}
.page-head .btn-row{margin-top:var(--sp-4)}
.page-head .chip{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); color:rgba(255,255,255,.9)}

/* ==========================  MODAL  ========================== */
.modal{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:flex-start; justify-content:center;
  padding:clamp(.75rem,3vw,3rem); overflow-y:auto;
  background:rgba(16,17,20,.62);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.modal.is-open{display:flex; animation:fadeIn .24s var(--ease)}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal-panel{
  position:relative; width:100%; max-width:600px; margin:auto;
  background:var(--white); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
  animation:modalIn .38s var(--ease-out);
}
@keyframes modalIn{from{opacity:0; transform:translateY(22px) scale(.985)} to{opacity:1; transform:none}}
.modal-head{
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:linear-gradient(135deg,var(--burgundy-deep),var(--burgundy));
  color:#fff; position:relative;
}
.modal-head h2{color:#fff; font-size:var(--fs-h3); margin-bottom:.5rem}
.modal-head p{color:rgba(255,255,255,.8); font-size:var(--fs-sm); margin:0; max-width:46ch}
.modal-close{
  position:absolute; top:1rem; right:1rem;
  width:36px; height:36px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:0; border-radius:50%;
  color:#fff; cursor:pointer; font-size:1.15rem; line-height:1;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.modal-close:hover{background:rgba(255,255,255,.28); transform:rotate(90deg)}
.modal-body{padding:var(--sp-5)}
@media(max-width:520px){ .modal-body,.modal-head{padding:var(--sp-4)} }

/* ==========================  FORM  ========================== */
.field{margin-bottom:var(--sp-3)}
.field label{
  display:block; margin-bottom:.4rem;
  font-size:var(--fs-sm); font-weight:600; color:var(--charcoal);
}
.field label .req{color:var(--burgundy)}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem .95rem;
  background:var(--ivory); color:var(--charcoal);
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:var(--fs-sm); transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea{resize:vertical; min-height:104px; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:var(--white);
  border-color:var(--gold); box-shadow:0 0 0 3.5px var(--gold-soft);
}
.field input::placeholder,.field textarea::placeholder{color:#9BA0A8}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
@media(max-width:560px){ .field-row{grid-template-columns:1fr} }
.field-err{display:none; margin-top:.32rem; font-size:var(--fs-xs); color:var(--burgundy); font-weight:600}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--burgundy); background:rgba(152,27,34,.035)}
.field.has-err .field-err{display:block}
.radio-row{display:flex; flex-wrap:wrap; gap:.5rem}
.radio{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border:1.5px solid var(--border); border-radius:var(--r-pill);
  background:var(--ivory); cursor:pointer; font-size:var(--fs-sm); font-weight:600;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.radio input{position:absolute; opacity:0; width:0; height:0}
.radio .rd{
  width:15px; height:15px; flex:none; border-radius:50%;
  border:1.6px solid #B6BAC1; transition:border-color .2s, box-shadow .2s;
}
.radio:hover{border-color:var(--gold)}
.radio:has(input:checked){border-color:var(--burgundy); background:var(--burgundy-tint); color:var(--burgundy-deep)}
.radio:has(input:checked) .rd{border-color:var(--burgundy); box-shadow:inset 0 0 0 3.5px var(--burgundy)}
.form-note{font-size:var(--fs-xs); color:var(--slate); margin-top:var(--sp-3); line-height:1.6}
.form-ok{
  display:none; padding:var(--sp-4); text-align:center;
  background:var(--ivory-2); border:1px dashed var(--gold); border-radius:var(--r-md);
}
.form-ok.is-on{display:block; animation:fadeUp .4s var(--ease-out)}
.form-ok .ic{
  display:grid; place-items:center; width:52px; height:52px; margin:0 auto var(--sp-3);
  background:var(--gold-soft); border-radius:50%; color:var(--burgundy); font-size:1.5rem;
}
.form-ok h3{margin-bottom:.5rem}
.form-ok p{font-size:var(--fs-sm); color:var(--slate)}

/* ==========================  FOOTER  ========================== */
.site-footer{background:var(--burgundy-deep); color:rgba(255,255,255,.72); padding-top:var(--sp-6)}
.ft-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.75rem, 3.2vw, 3.25rem); padding-bottom:var(--sp-5)}
@media(max-width:960px){ .ft-grid{grid-template-columns:1fr 1fr; gap:var(--sp-5)} }
@media(max-width:560px){ .ft-grid{grid-template-columns:1fr} }
.ft-brand{display:flex; align-items:center; gap:.85rem; margin-bottom:var(--sp-3); flex-shrink:0}
.ft-brand img{height:62px; width:auto; max-width:none; object-fit:contain; flex-shrink:0; display:block; filter:brightness(1.04)}
.ft-brand b{display:block; font-size:.9rem; font-weight:800; color:#fff; line-height:1.25; letter-spacing:-.01em}
.ft-brand span{font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); font-weight:600}
.site-footer h4{
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--sp-3);
}
.site-footer a{color:rgba(255,255,255,.72); font-size:var(--fs-sm); transition:color .22s var(--ease)}
.site-footer a:hover{color:var(--gold-light)}
.ft-links{display:grid; gap:.55rem}
.ft-tag{font-size:var(--fs-sm); line-height:1.68; max-width:38ch}
.ft-contact{display:grid; gap:.75rem; margin-top:var(--sp-3)}
.ft-contact li{display:flex; gap:.7rem; font-size:var(--fs-sm); align-items:flex-start}
.ft-contact svg{width:16px; height:16px; flex:none; margin-top:.24em; color:var(--gold)}
.ft-bottom{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; justify-content:space-between;
  padding:var(--sp-4) 0; border-top:1px solid rgba(255,255,255,.16);
  font-size:var(--fs-xs); color:rgba(255,255,255,.55);
}
.ft-social{display:flex; gap:.5rem}
.ft-social a{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid rgba(255,255,255,.2); border-radius:50%;
  color:rgba(255,255,255,.7); transition:all .22s var(--ease);
}
.ft-social a:hover{background:var(--gold); border-color:var(--gold); color:var(--burgundy-deep)}
.ft-social svg{width:15px; height:15px}
.ft-totop{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-xs); font-weight:600; color:rgba(255,255,255,.62);
}
.ft-totop:hover{color:var(--gold-light)}

/* ==========================  ACTIVITY CARDS & GALLERY (tin-tuc.html)  ========================== */
.news-activities .activity-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.news-activities .activity-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.news-activities .activity-card:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.news-activities .activity-img-wrap{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--ivory-2);
}
.news-activities .activity-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.news-activities .activity-card:hover .activity-img-wrap img{
  transform:scale(1.06);
}
.news-activities .activity-category-tag{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  background:rgba(25,27,31,.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.725rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(213,168,75,.4);
  line-height:1.2;
  pointer-events:none;
}
.news-activities .activity-body{
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  flex:1;
}

/* ==========================  LIGHTBOX MODAL  ========================== */
.lightbox-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  z-index:2500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox-modal.active{
  opacity:1;
  visibility:visible;
}
.lightbox-content{
  position:relative;
  max-width:900px;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:scale(.96);
  transition:transform .3s var(--ease-out);
}
.lightbox-modal.active .lightbox-content{
  transform:scale(1);
}
.lightbox-content img{
  max-height:75vh;
  max-width:90vw;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--r-md);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.lightbox-caption{
  color:#fff;
  text-align:center;
  padding-top:14px;
  font-weight:600;
  font-size:var(--fs-sm);
  max-width:700px;
  line-height:1.45;
}
.lightbox-close{
  position:absolute;
  top:-42px;
  right:0;
  background:transparent;
  border:none;
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  padding:4px 8px;
  opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.lightbox-close:hover{
  opacity:1;
  transform:scale(1.1);
}
@media(max-width:600px){
  .lightbox-modal{padding:16px}
  .lightbox-close{top:-36px; font-size:1.75rem}
  .lightbox-content img{max-height:68vh}
  .lightbox-caption{font-size:var(--fs-xs)}
}

/* ==========================  SCROLL REVEAL  ==========================
   Progressive enhancement: reveal animations are only armed when JS is
   confirmed running (html.js). Without JS — or if the script fails to
   load — every .rv element stays fully visible, so content is never
   hidden from crawlers, print, or no-JS users. */
.js .rv{opacity:0; transform:translateY(20px); transition:opacity .72s var(--ease-out), transform .72s var(--ease-out)}
.js .rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s} .rv-d4{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .js .rv{opacity:1; transform:none}
}

/* ==========================  ABOUT PAGE POLISH (ve-vietd.html)  ========================== */
/* Section 02: Editorial Corporate Split */
.about-intro-split{
  display:grid;
  grid-template-columns:42% 1fr;
  gap:clamp(2rem, 4vw, 3.75rem);
  align-items:start;
}
.about-intro-left .eyebrow{
  margin-bottom:.5rem;
}
.about-intro-left .h2{
  margin-bottom:var(--sp-4);
}
.about-intro-figure{
  margin-top:var(--sp-2);
}
.about-intro-img-box{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  background:var(--ivory-2);
}
.about-intro-img-box img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease);
}
.about-intro-figure:hover .about-intro-img-box img{
  transform:scale(1.02);
}
.about-intro-caption{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.7rem;
  font-size:var(--fs-xs);
  color:var(--slate);
  font-style:normal;
  line-height:1.5;
}
.cap-indicator{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--burgundy);
  flex-shrink:0;
}
.about-intro-right{
  display:flex;
  flex-direction:column;
  padding-top:.5rem;
}
.about-ed-item{
  display:flex;
  align-items:baseline;
  gap:1.25rem;
  padding-bottom:1.6rem;
  margin-bottom:1.6rem;
  border-bottom:1px solid var(--border-light);
}
.about-ed-item:last-child{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
.about-ed-num{
  font-family:var(--font-serif);
  font-size:1.65rem;
  font-weight:700;
  color:var(--burgundy);
  line-height:1;
  flex-shrink:0;
  min-width:1.75rem;
}
.about-ed-body p{
  font-size:var(--fs-base);
  line-height:1.76;
  color:var(--charcoal);
  margin:0;
}
@media(max-width:900px){
  .about-intro-split{grid-template-columns:1fr; gap:var(--sp-4)}
  .about-intro-figure{max-width:560px}
}

/* Section 03: Feature Cards (Sứ mệnh & Tầm nhìn) */
.about-features-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-4);
}
.about-feat-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  padding:clamp(1.75rem, 3vw, 2.5rem);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  background:var(--white);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.about-feat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.about-feat-card--burgundy{
  border-top:3.5px solid var(--burgundy);
  background:linear-gradient(175deg, #ffffff 0%, #fcf8f8 100%);
}
.about-feat-card--blue{
  border-top:3.5px solid var(--blue-corp);
  background:linear-gradient(175deg, #ffffff 0%, #f4f8fb 100%);
}
.about-feat-header{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:1.15rem;
  position:relative;
  z-index:1;
}
.about-feat-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(104,18,23,.06);
  color:var(--burgundy);
  border:1px solid rgba(104,18,23,.15);
  flex-shrink:0;
}
.about-feat-card--blue .about-feat-icon{
  background:rgba(18,52,86,.06);
  color:var(--blue-corp);
  border-color:rgba(18,52,86,.15);
}
.about-feat-badge{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
}
.about-feat-desc{
  font-size:var(--fs-sm);
  color:var(--charcoal);
  line-height:1.76;
  margin:0;
  position:relative;
  z-index:1;
}
@media(max-width:768px){
  .about-features-grid{grid-template-columns:1fr; gap:var(--sp-3)}
}

/* Section 03: 4 Core Values (Tâm · Tín · Trí · Đức) */
.about-core-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-3);
}
.about-core-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-3);
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.about-core-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--gold);
}
.about-core-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--ivory);
  color:var(--burgundy);
  margin-bottom:1rem;
  border:1px solid rgba(104,18,23,.12);
}
.about-core-title{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--charcoal);
  margin-bottom:.45rem;
}
.about-core-text{
  font-size:var(--fs-xs);
  color:var(--slate);
  line-height:1.62;
  margin:0;
  position:relative;
  z-index:1;
}
@media(max-width:940px){
  .about-core-grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:560px){
  .about-core-grid{grid-template-columns:1fr}
}

/* Section 04: Expert Profile Cards Template */
.expert-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-3);
}
.expert-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.expert-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(23,79,120,.25);
}
.expert-avatar-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  background:linear-gradient(135deg, #1c2638 0%, #2a3c58 100%);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.expert-avatar-placeholder{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .4s var(--ease);
}
.expert-card:hover .expert-avatar-placeholder{
  transform:scale(1.04);
}
.expert-avatar-placeholder svg{
  width:55%;
  height:55%;
  opacity:.7;
}
.expert-badge-initials{
  position:absolute;
  bottom:.75rem;
  right:.75rem;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.08em;
  padding:.2rem .5rem;
  background:rgba(0,0,0,.5);
  color:#fff;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(4px);
}
.expert-info{
  padding:1.25rem 1.15rem 1.35rem;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.expert-name{
  font-size:.95rem;
  font-weight:700;
  color:var(--charcoal);
  margin-bottom:.25rem;
  line-height:1.35;
}
.expert-role{
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--blue-corp);
  margin-bottom:.6rem;
}
.expert-field{
  font-size:var(--fs-xs);
  color:var(--slate);
  line-height:1.55;
  margin-bottom:.85rem;
  flex-grow:1;
}
.expert-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:auto;
}
.expert-tag{
  font-size:.68rem;
  font-weight:700;
  padding:.15rem .45rem;
  border-radius:4px;
  background:var(--ivory);
  color:var(--slate);
  border:1px solid var(--border);
}
@media(max-width:940px){
  .expert-grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:560px){
  .expert-grid{grid-template-columns:1fr}
}

/* ==========================  AI SOLUTIONS POLISH (giai-phap-ai.html)  ========================== */
/* Section 03: 4 Solution Groups */
.sol-h{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:-clamp(1.4rem,2.6vw,2rem) -clamp(1.4rem,2.6vw,2rem) var(--sp-3);
  padding:1.15rem clamp(1.2rem,2.5vw,1.6rem);
  background:linear-gradient(180deg, rgba(18,52,86,.04) 0%, rgba(18,52,86,.01) 100%);
  border-bottom:1px solid rgba(18,52,86,.08);
  border-radius:var(--r-md) var(--r-md) 0 0;
}
.sol-h-left{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-shrink:0;
}
.sol-ic{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:var(--r-sm);
  background:rgba(18,52,86,.06);
  color:var(--blue-corp);
  border:1px solid rgba(18,52,86,.12);
  flex-shrink:0;
}
.sol-ic svg{
  width:20px;
  height:20px;
}
.sol-h-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.sol-cat{
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:.15rem;
}
.sol-h-meta h3{
  font-size:1.18rem;
  font-weight:700;
  color:var(--charcoal);
  margin:0;
}
.sol-goal{
  padding:.9rem 1.1rem;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-left:3.5px solid var(--blue-corp);
  border-radius:var(--r-sm);
  margin-top:auto;
  margin-bottom:var(--sp-3);
}
.sol-goal-head{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--blue-corp);
  margin-bottom:.25rem;
}
.sol-goal p{
  font-size:var(--fs-xs);
  color:#475569;
  line-height:1.58;
  margin:0;
}

/* Section 04: 4-Step Process Framework (DISCOVER, DESIGN, BUILD, DEPLOY) */
.solution-process-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-3);
  position:relative;
}
.sol-proc-step{
  position:relative;
  background:#ffffff;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 10px 28px rgba(6,18,34,.28);
  padding:var(--sp-4) var(--sp-3) var(--sp-3);
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.sol-proc-step:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(6,18,34,.36);
}
.sol-proc-step::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--sp-3);
  right:var(--sp-3);
  height:3px;
  background:linear-gradient(90deg, var(--blue-corp), var(--gold));
  border-radius:0 0 3px 3px;
}
.sol-proc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.sol-proc-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:var(--blue-corp);
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  border-radius:6px;
}
.sol-proc-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(18,52,86,.07);
  color:var(--blue-corp);
  border:1px solid rgba(18,52,86,.12);
}
.sol-proc-icon svg{
  width:18px;
  height:18px;
}
.sol-proc-body{
  display:flex;
  flex-direction:column;
}
.sol-proc-name{
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--charcoal);
  margin-bottom:.2rem;
}
.sol-proc-role{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--blue-corp);
  margin-bottom:.4rem;
}
.sol-proc-desc{
  font-size:var(--fs-xs);
  color:#475569;
  line-height:1.58;
  margin:0;
}
@media(max-width:940px){
  .solution-process-grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:560px){
  .solution-process-grid{grid-template-columns:1fr}
}

/* ==========================  DAO TAO AI: METHOD JOURNEY  ========================== */
.method-journey{
  position:relative;
  width:100%;
}
.method-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.25rem;
  position:relative;
}
.method-step{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md);
  padding:1.4rem 1.25rem;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .3s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.method-step:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.055);
  border-color:rgba(213,168,75,.4);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.method-step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
  padding-bottom:.65rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.method-num{
  font-family:var(--font-serif);
  font-size:1.25rem;
  font-weight:700;
  color:var(--gold);
  line-height:1;
}
.method-code{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(255,255,255,.45);
  text-transform:uppercase;
}
.method-step-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(213,168,75,.45);
  margin-left:auto;
}
.method-step-arrow svg{
  width:16px;
  height:16px;
}
.method-title{
  font-size:1.06rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.45rem;
  letter-spacing:-.01em;
}
.method-desc{
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.68);
  line-height:1.62;
  margin:0;
}
.method-chain-sub{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.65rem;
  text-transform:uppercase;
  font-weight:700;
}

@media(max-width:960px){
  .method-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;
  }
}
@media(max-width:560px){
  .method-grid{
    grid-template-columns:1fr;
    gap:1rem;
    position:relative;
    padding-left:1.5rem;
  }
  .method-grid::before{
    content:"";
    position:absolute;
    left:.45rem;
    top:1rem;
    bottom:1rem;
    width:2px;
    background:linear-gradient(180deg, var(--gold) 0%, rgba(213,168,75,.2) 100%);
  }
  .method-step::before{
    content:"";
    position:absolute;
    left:-1.5rem;
    top:1.6rem;
    transform:translateX(-50%);
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 3px rgba(213,168,75,.25);
  }
  .method-step-arrow{
    transform:rotate(90deg);
  }
}

/* ==========================  DAO TAO AI: CUSTOMIZED TRAINING  ========================== */
.customized-training-split{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.customized-intro{
  display:flex;
  flex-direction:column;
}
.customized-cards{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.customized-card{
  background:var(--ivory);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:1.2rem 1.4rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.customized-card:nth-child(1){
  border-left:3.5px solid var(--burgundy);
}
.customized-card:nth-child(2){
  border-left:3.5px solid var(--gold);
}
.customized-card:nth-child(3){
  border-left:3.5px solid var(--blue-corp);
}
.customized-card:hover{
  transform:translateX(4px);
  box-shadow:var(--shadow-sm);
}
.customized-card-label{
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--charcoal);
  margin-bottom:.35rem;
}
.customized-card:nth-child(1) .customized-card-label{
  color:var(--burgundy);
}
.customized-card:nth-child(2) .customized-card-label{
  color:#9a7522;
}
.customized-card:nth-child(3) .customized-card-label{
  color:var(--blue-corp);
}
.customized-card-text{
  font-size:var(--fs-sm);
  color:var(--slate);
  line-height:1.6;
  margin:0;
}
@media(max-width:940px){
  .customized-training-split{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

/* ==========================  PRINT  ========================== */
@media print{
  .site-header,.modal,.btn,.ft-social{display:none !important}
  body{background:#fff}
  .section{padding-block:1.5rem}
}