/* ============================================================
   PHFM — Phú Hưng Fund Management
   Design system built on the official Brand Bible v2.0
   Palette: warm neutrals + gold. Text is always Charcoal.
   Gold is for lines, icons, fills, gradients — never body text.
   ============================================================ */

:root{
  /* Neutrals */
  --ivory:      #F6F6F0;   /* default background 60% */
  --cream:      #EAE4D2;   /* soft content blocks */
  --sand:       #DBD3C2;   /* borders, dividers */
  --charcoal:   #494949;   /* ALL text, contrast bg */
  --charcoal-2: #2E2E2E;   /* deeper charcoal for dark sections */

  /* Brand gold (decorative only) */
  --hoangkim:   #BF9000;   /* logo gold, premium accent */
  --gold:       #C0972D;   /* lines, icons */
  --amber:      #D99B39;   /* fresher accent, CTA fill */
  --gold-deep:  #7A5C00;   /* accessible gold for small text/links (6.2:1) */

  /* Gradients */
  --grad-dawn:  linear-gradient(120deg,#EAE4D2 0%,#D99B39 100%);
  --grad-gold:  linear-gradient(120deg,#DBD3C2 0%,#BF9000 100%);
  --grad-shine: linear-gradient(120deg,#FBF3DA 0%,#EFD98F 50%,#D99B39 100%);

  --maxw: 1240px;
  --pad: clamp(20px,5vw,64px);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --tc: "Noto Serif TC", serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* zh text uses serif TC */
:lang(zh){font-family:var(--tc)}

/* ---------- Type scale ---------- */
h1,h2,h3,.serif{font-family:var(--serif);color:var(--charcoal);font-weight:600;line-height:1.1}
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--gold-deep);
}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--charcoal)}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,9vw,140px)}
.divider{height:1px;background:var(--sand);border:0}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(246,246,240,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--sand);
  padding-block:12px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:34px;width:auto}
.brand-logo{height:46px;width:auto;transition:height .4s var(--ease)}
.site-header.scrolled .brand-logo{height:38px}
.brand-logo-foot{height:54px;width:auto;margin-bottom:16px}
.brand .bname{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--hoangkim);line-height:1}
.brand .bsub{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);opacity:.7}

.nav{display:flex;align-items:center;gap:30px}
.nav a.navlink{font-size:.9rem;font-weight:500;position:relative;padding:4px 0}
.nav a.navlink::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--gold);
  transition:width .3s var(--ease);
}
.nav a.navlink:hover::after{width:100%}

.tools{display:flex;align-items:center;gap:14px}
.lang{
  display:inline-flex;border:1px solid var(--sand);border-radius:999px;overflow:hidden;
  font-size:.72rem;font-weight:600;background:var(--ivory);
}
.lang button{
  border:0;background:transparent;color:var(--charcoal);
  padding:6px 12px;cursor:pointer;letter-spacing:.04em;transition:.25s;
}
.lang button.active{background:var(--charcoal);color:var(--ivory)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:.9rem;
  padding:12px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.btn-gold{background:var(--charcoal);color:var(--ivory)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(73,73,73,.22)}
.btn-ghost{border-color:var(--charcoal);color:var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:var(--ivory)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--charcoal);transition:.3s}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:120px;overflow:hidden;background:var(--ivory);
}
.hero-knot{
  position:absolute;right:-6vw;top:50%;transform:translateY(-50%);
  width:min(58vw,780px);opacity:.10;pointer-events:none;
  animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.hero-inner{position:relative;z-index:2;max-width:900px}
.hero h1{
  font-size:clamp(2.6rem,6.6vw,5.6rem);
  letter-spacing:-.01em;margin:.35em 0 .5em;
}
.hero h1 .accent{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.hero .lead{max-width:640px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}
.hero-scroll{
  position:absolute;left:var(--pad);bottom:34px;z-index:2;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal);
  display:flex;align-items:center;gap:10px;opacity:.7;
}
.hero-scroll::before{content:"";width:34px;height:1px;background:var(--gold);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- Stat strip ---------- */
.stats{background:var(--charcoal);color:var(--ivory)}
.stats h2,.stats h3{color:var(--ivory)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.stat .num{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;color:#EFD98F}
.stat .lbl{font-size:.86rem;margin-top:10px;opacity:.82;max-width:220px}
.stats .eyebrow{color:#EFD98F}

/* ---------- Section head ---------- */
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head h2{font-size:clamp(1.9rem,3.8vw,3rem);margin:.3em 0 .4em}
.sec-head p{font-size:1.05rem;color:var(--charcoal);opacity:.9}

/* ---------- Philosophy: Tân Tốc Thực Giản ---------- */
.philo{background:var(--cream)}
.philo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sand);border:1px solid var(--sand)}
.philo-card{background:var(--cream);padding:38px 30px;transition:background .4s var(--ease)}
.philo-card:hover{background:var(--ivory)}
.philo-card .zh{font-family:var(--tc);font-size:2.6rem;color:var(--gold);line-height:1;font-weight:600}
.philo-card h3{font-size:1.5rem;margin:14px 0 4px}
.philo-card .en{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.philo-card p{font-size:.94rem;margin-top:16px;opacity:.9}

/* ---------- Products ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  background:var(--ivory);border:1px solid var(--sand);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(73,73,73,.12)}
.card .card-top{padding:30px 30px 0;display:flex;justify-content:space-between;align-items:flex-start}
.card .tag{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:5px 12px;border-radius:999px;background:var(--cream);color:var(--gold-deep);
}
.card .knot{width:40px;opacity:.6}
.card .card-body{padding:22px 30px 30px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.5rem;margin-bottom:6px}
.card .code{font-size:.8rem;color:var(--gold-deep);font-weight:600;letter-spacing:.05em;margin-bottom:14px}
.card p{font-size:.95rem;opacity:.9;flex:1}
.card .meta{display:flex;gap:20px;margin:20px 0;border-top:1px solid var(--sand);padding-top:18px}
.card .meta div span{display:block}
.card .meta .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6}
.card .meta .v{font-family:var(--serif);font-size:1.2rem;color:var(--charcoal)}
.card .link{font-weight:600;font-size:.9rem;color:var(--gold-deep);display:inline-flex;gap:8px;align-items:center}
.card .link .arrow{transition:transform .3s var(--ease)}
.card:hover .link .arrow{transform:translateX(5px)}

/* ---------- Ecosystem ---------- */
.eco{background:var(--charcoal-2);color:var(--ivory);position:relative;overflow:hidden}
.eco h2,.eco h3{color:var(--ivory)}
.eco .eyebrow{color:#EFD98F}
.eco-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.eco-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.eco-item{border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:22px}
.eco-item .abbr{font-family:var(--serif);font-size:1.6rem;color:#EFD98F}
.eco-item p{font-size:.86rem;opacity:.82;margin-top:6px}
.eco-knot{width:100%;max-width:360px;margin:0 auto;opacity:.9;filter:drop-shadow(0 0 40px rgba(191,144,0,.3))}

/* ---------- Insights ---------- */
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.insight{border-top:2px solid var(--charcoal);padding-top:20px;transition:.3s}
.insight:hover{border-color:var(--gold)}
.insight .date{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.insight h3{font-size:1.25rem;margin:12px 0}
.insight p{font-size:.92rem;opacity:.85}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad-shine);color:var(--charcoal);text-align:center}
.cta-band h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:820px;margin:0 auto .3em}
.cta-band p{max-width:600px;margin:0 auto 34px;font-size:1.08rem}
.cta-band .hero-cta{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal-2);color:var(--ivory);padding-block:70px 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.site-footer .brand .bname{color:#EFD98F}
.site-footer .brand .bsub{color:rgba(255,255,255,.7)}
.foot-col h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#EFD98F;margin-bottom:16px;font-weight:600;font-family:var(--sans)}
.foot-col a{display:block;font-size:.9rem;opacity:.8;padding:5px 0;transition:.2s}
.foot-col a:hover{opacity:1;color:#EFD98F}
.foot-about p{font-size:.9rem;opacity:.8;margin-top:16px;max-width:340px}
.disclaimer{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;font-size:.78rem;opacity:.62;max-width:900px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:.8rem;opacity:.6}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding-top:160px;padding-bottom:20px;background:var(--ivory);position:relative;overflow:hidden}
.page-hero .knot-bg{position:absolute;right:-4vw;top:20%;width:min(40vw,460px);opacity:.08;animation:spin 90s linear infinite}
.page-hero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);margin:.3em 0 .4em;max-width:14ch}
.page-hero .lead{max-width:640px}
.breadcrumb{font-size:.8rem;color:var(--gold-deep);font-weight:600;letter-spacing:.04em}

/* ---------- misc content ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.pillar-row{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--sand)}
.pillar-row .zh{font-family:var(--tc);font-size:3rem;color:var(--gold);line-height:1}
.pillar-row h3{font-size:1.4rem;margin-bottom:8px}
.feature{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--sand)}
.feature .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--cream);display:grid;place-items:center;color:var(--gold-deep)}
.feature h4{font-size:1.05rem;font-family:var(--serif)}
.feature p{font-size:.9rem;opacity:.85}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.team .ph{aspect-ratio:1;border-radius:16px;background:var(--grad-gold);display:grid;place-items:center;margin-bottom:16px}
.team .ph span{font-family:var(--serif);font-size:2.4rem;color:var(--ivory)}
.team h3{font-size:1.2rem}
.team .role{font-size:.85rem;color:var(--gold-deep);font-weight:600;margin:4px 0 8px}
.team p{font-size:.88rem;opacity:.85}

.big-quote{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.3;max-width:16ch}
.big-quote .accent{color:var(--gold-deep)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ---------- Language visibility ---------- */
[data-en]{display:none}
html[lang="en"] [data-vi]{display:none}
html[lang="en"] [data-en]{display:revert}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .philo-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid,.insight-grid,.team-grid{grid-template-columns:1fr 1fr}
  .eco-grid,.two-col{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    background:var(--ivory);padding:40px;box-shadow:-10px 0 40px rgba(0,0,0,.12);
    transform:translateX(100%);transition:transform .4s var(--ease);z-index:55;
  }
  .nav.open{transform:none}
  .burger{display:flex;z-index:60}
  .prod-grid,.insight-grid,.team-grid,.philo-grid,.foot-grid,.stat-grid{grid-template-columns:1fr}
  .foot-grid{gap:30px}
  .hero{padding-top:110px}
}