/* ============================================================
   ICANFIELD · PREMIUM OFFICE — Private Wealth Management
   Dark cinematic luxury system
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        #111111;
  --bg-2:      #17181A;
  --espresso:  #19130E;
  --char:      #0A0A0A;
  --panel:     #1B1C1E;
  --line:      rgba(192,148,74,0.20);
  --line-soft: rgba(245,242,236,0.07);

  /* Gold */
  --gold:        #C0944A;
  --gold-bright: #F0E2A6;
  --gold-deep:   #9B7233;
  --champagne:   #F0E2A6;
  --gold-glow:   rgba(192,148,74,0.32);
  --foil: linear-gradient(96deg, #c0944a 0%, #e8d291 38%, #f0e2a6 52%, #d7b66d 66%, #c0944a 100%);

  /* Ink */
  --cream:  #F5F2EC;
  --muted:  #C2B492;
  --dim:    #847B62;

  /* Accents */
  --emerald: #0F3D33;
  --navy:    #0E1B2A;

  /* Type */
  --serif:  "UTM Avo", "Be Vietnam Pro", system-ui, sans-serif;
  --display:"UTM Avo", "Be Vietnam Pro", system-ui, sans-serif;
  --sans:   "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --script: "UTM Avo", "Be Vietnam Pro", system-ui, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: #0A0A0C; }

/* ---------- Typography helpers ---------- */
.serif { font-family: var(--serif); }
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  display: inline-block;
}
.eyebrow.center::after {
  content: "";
  width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  display: inline-block;
}
.eyebrow.center { justify-content: center; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; margin: 0; }
.display {
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.h2 { font-size: clamp(30px, 4.4vw, 60px); font-weight: 700; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); font-weight: 300; }
.gold-text { color: var(--gold); }
.italic { font-style: italic; }
.script { font-family: var(--script); font-weight: 400; font-style: italic; letter-spacing: 0; }
.foil {
  background: var(--foil);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(90px, 12vh, 170px) 0; }
.tac { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  --pad: 17px 34px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: var(--pad);
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; border: none;
  transition: all .5s var(--ease);
  position: relative; overflow: hidden;
}
.btn .arw { transition: transform .5s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }

.btn-gold {
  background: linear-gradient(120deg, var(--gold-bright), var(--gold));
  color: #16110A;
  box-shadow: 0 0 0 rgba(201,168,106,0);
}
.btn-gold:hover { box-shadow: 0 14px 44px -12px var(--gold-glow); transform: translateY(-2px); }

.btn-ghost {
  background: transparent; color: var(--cream);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Top Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10,10,12,0.78);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
  padding-top: 16px; padding-bottom: 16px;
}
.nav__brand { display: flex; align-items: center; gap: 14px; }
.nav__brand img { height: 40px; width: auto; transition: height .5s var(--ease); }
.nav.scrolled .nav__brand img { height: 33px; }
.nav__brand .bt {
  font-family: var(--serif); font-size: 19px; line-height: 1; letter-spacing: .02em;
  color: var(--cream);
}
.nav__brand .bt small {
  display: block; font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-top: 4px;
}
.nav__links { display: flex; align-items: center; gap: 38px; }
.nav__links a {
  font-size: 13px; letter-spacing: 0.05em; color: var(--muted);
  position: relative; padding: 6px 0; transition: color .4s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .45s var(--ease);
}
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { width: 100%; }
.nav__links a[aria-current] { color: var(--gold); }
.nav__links a[aria-current]::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 18px; }
.nav__burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 24px; height: 1.5px; background: var(--cream); display: block; transition: .3s; }

/* ---------- Media layers ---------- */
.media-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.media-bg video, .media-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(10,10,12,0.25), transparent 55%),
    linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.35) 40%, rgba(10,10,12,0.92) 100%);
}
.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.7), inset 0 0 80px 0 rgba(0,0,0,0.4);
  background: radial-gradient(110% 80% at 50% 45%, transparent 45%, rgba(8,8,10,0.65) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Image placeholder (fallback) ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, #15171b 0 14px, #101216 14px 28px);
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dim);
}
.imgwrap { position: relative; overflow: hidden; background: #101216; }
.imgwrap img { transition: transform 1.4s var(--ease), opacity 1s var(--ease); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero .media-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,12,0.78) 0%, rgba(10,10,12,0.35) 45%, rgba(10,10,12,0.55) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 120px; max-width: 1080px; }
.hero__title { margin: 26px 0 0; font-size: clamp(38px, 6vw, 90px); }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: block; }
.hero__title .r-line > span { white-space: nowrap; }
@media (max-width: 640px) { .hero__title { font-size: clamp(34px, 9vw, 52px); } .hero__title .r-line > span { white-space: normal; } }
.hero__sub { max-width: 560px; margin: 30px 0 40px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__meta {
  display: flex; gap: 40px; margin-top: 64px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); padding-top: 30px; max-width: 720px;
}
.hero__meta .it .n { font-family: var(--serif); font-size: 30px; color: var(--gold); line-height: 1; }
.hero__meta .it .l { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; margin-top: 8px; }

.scrollcue {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
.scrollcue .rail { width: 1px; height: 54px; background: var(--line-soft); position: relative; overflow: hidden; }
.scrollcue .rail::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(0); } 100% { transform: translateY(300%); } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { background: var(--char); position: relative; text-align: center; }
.manifesto::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 50% 30%, rgba(201,168,106,0.06), transparent 70%);
}
.manifesto__q {
  font-family: var(--serif); font-size: clamp(28px, 4.1vw, 56px); line-height: 1.28;
  font-weight: 400; max-width: 1000px; margin: 32px auto 0; color: var(--cream); position: relative;
}
.manifesto__q em { font-style: italic; color: var(--gold); }
.manifesto__by { margin-top: 40px; color: var(--muted); font-size: 14px; letter-spacing: 0.04em; }
.rule-dot { display: inline-flex; align-items: center; gap: 14px; color: var(--gold-deep); }
.rule-dot::before, .rule-dot::after { content: ""; width: 40px; height: 1px; background: var(--line); }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars { background: var(--bg); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 64px; flex-wrap: wrap; }
.sec-head .l { max-width: 620px; }
.sec-head h2 { margin-top: 22px; }
.sec-head p { margin: 18px 0 0; }

.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.pillar {
  position: relative; background: var(--bg-2); padding: 0; min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  cursor: pointer;
}
.pillar .pmedia { position: absolute; inset: 0; z-index: 0; }
.pillar .pmedia img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); filter: grayscale(0.3) brightness(0.62); }
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,14,16,0.2) 0%, rgba(14,14,16,0.55) 50%, rgba(10,10,12,0.96) 100%);
  transition: background .6s var(--ease);
}
.pillar:hover .pmedia img { transform: scale(1.07); filter: grayscale(0) brightness(0.74); }
.pillar:hover::after { background: linear-gradient(180deg, rgba(14,14,16,0.1) 0%, rgba(26,20,16,0.45) 45%, rgba(10,10,12,0.94) 100%); }
.pillar__body { position: relative; z-index: 2; padding: 34px 30px 36px; }
.pillar__no { font-family: var(--serif); font-size: 13px; color: var(--gold); letter-spacing: 0.1em; opacity: .8; }
.pillar__t { font-family: var(--serif); font-size: 25px; margin: 14px 0 0; line-height: 1.18; }
.pillar__d {
  font-size: 14px; color: var(--muted); margin: 14px 0 0; line-height: 1.6;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .5s var(--ease), margin .6s var(--ease);
}
.pillar:hover .pillar__d { max-height: 140px; opacity: 1; }
.pillar__tags { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pillar__tags span { font-size: 11px; letter-spacing: 0.06em; color: var(--gold); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; }
.pillar .topline { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold-bright), transparent); z-index: 3; transition: width .7s var(--ease); }
.pillar:hover .topline { width: 100%; }

/* ============================================================
   SCROLL-SCRUB CINEMATIC
   ============================================================ */
.scrub { position: relative; height: 360vh; background: var(--char); }
.scrub__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scrub__sticky video, .scrub__sticky img.scrub-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.62) contrast(1.04);
}
.scrub__sticky .scrim {
  background: linear-gradient(180deg, rgba(10,10,12,0.6), rgba(10,10,12,0.3) 40%, rgba(10,10,12,0.85));
}
.scrub__phases { position: absolute; inset: 0; z-index: 2; }
.scrub__phase {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter); opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none;
}
.scrub__phase.on { opacity: 1; transform: translateY(0); }
.scrub__phase .step { font-size: 12px; letter-spacing: 0.4em; color: var(--gold); text-transform: uppercase; }
.scrub__phase h3 { font-family: var(--serif); font-size: clamp(34px, 5.6vw, 78px); margin: 22px 0 0; max-width: 880px; line-height: 1.06; }
.scrub__phase p { max-width: 540px; margin: 24px 0 0; color: var(--muted); }
.scrub__progress { position: absolute; left: var(--gutter); bottom: 56px; z-index: 3; display: flex; gap: 10px; }
.scrub__progress .dash { width: 46px; height: 2px; background: var(--line-soft); overflow: hidden; }
.scrub__progress .dash i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s linear; }

/* ============================================================
   MEMBERSHIP
   ============================================================ */
.membership { background: linear-gradient(180deg, var(--char), var(--bg)); }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; }
.tier {
  position: relative; background: var(--panel); border: 1px solid var(--line-soft);
  padding: 40px 34px 38px; transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
  display: flex; flex-direction: column;
}
.tier:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }
.tier.feat { background: linear-gradient(180deg, #1b1710, var(--panel)); border-color: var(--line); }
.tier.feat::before {
  content: "Đề xuất"; position: absolute; top: 20px; right: 20px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #16110A;
  background: linear-gradient(120deg, var(--gold-bright), var(--gold)); padding: 5px 12px; border-radius: 999px;
}
.tier__k { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.tier__name { font-family: var(--serif); font-size: 34px; margin: 14px 0 0; }
.tier__min { color: var(--muted); font-size: 14px; margin-top: 10px; }
.tier__min b { color: var(--cream); font-weight: 500; font-family: var(--serif); font-size: 18px; }
.tier__line { height: 1px; background: var(--line-soft); margin: 26px 0; }
.tier__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tier__feats li { display: flex; gap: 12px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.tier__feats li::before { content: "✦"; color: var(--gold); font-size: 11px; margin-top: 3px; flex: none; }
.tier .btn { margin-top: 32px; justify-content: center; width: 100%; }

/* ============================================================
   REAL ESTATE
   ============================================================ */
.estate { background: var(--bg); }
.estate-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-top: 60px; }
.estate-col { display: grid; gap: 22px; }
.estate-col.right { grid-template-rows: 1fr 1fr; }
.prop {
  position: relative; overflow: hidden; min-height: 300px; border: 1px solid var(--line-soft);
  display: flex; align-items: flex-end; cursor: pointer;
}
.prop.tall { min-height: 632px; }
.prop .pm { position: absolute; inset: 0; z-index: 0; }
.prop .pm img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); }
.prop:hover .pm img { transform: scale(1.06); }
.prop::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,12,0) 30%, rgba(10,10,12,0.9) 100%); }
.prop__body { position: relative; z-index: 2; padding: 30px 30px 30px; width: 100%; }
.prop__loc { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.prop__t { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); margin: 12px 0 0; }
.prop__meta { display: flex; gap: 22px; margin-top: 16px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.prop__meta b { color: var(--cream); font-weight: 500; }
.prop__flag { position: absolute; top: 24px; left: 24px; z-index: 2; font-size: 12px; letter-spacing: .14em; color: var(--cream); background: rgba(10,10,12,0.5); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; backdrop-filter: blur(6px); }

/* ============================================================
   WHY / ADVISORS / STATS
   ============================================================ */
.why { background: var(--char); position: relative; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.why__list { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.why__list li { display: flex; gap: 20px; }
.why__list .ic { flex: none; width: 46px; height: 46px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold); font-family: var(--serif); font-size: 17px; border-radius: 50%; }
.why__list h4 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0 0 6px; }
.why__list p { margin: 0; color: var(--muted); font-size: 14.5px; }

.advisors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.advisor { position: relative; overflow: hidden; border: 1px solid var(--line-soft); }
.advisor .am { aspect-ratio: 3/4; }
.advisor .am img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) brightness(0.82); transition: filter 1s var(--ease), transform 1.4s var(--ease); }
.advisor:hover .am img { filter: grayscale(0) brightness(1); transform: scale(1.04); }
.advisor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,10,12,0.92)); }
.advisor__b { position: absolute; z-index: 2; left: 20px; bottom: 18px; }
.advisor__b .nm { font-family: var(--serif); font-size: 18px; }
.advisor__b .rl { font-size: 12px; color: var(--gold); letter-spacing: 0.04em; margin-top: 3px; }

.stats { border-top: 1px solid var(--line-soft); margin-top: clamp(60px, 9vh, 110px); padding-top: clamp(50px, 7vh, 80px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat .num { font-family: var(--serif); font-size: clamp(40px, 5vw, 68px); color: var(--gold); line-height: 1; letter-spacing: -0.02em; }
.stat .num .suf { color: var(--cream); }
.stat .lbl { color: var(--muted); font-size: 13.5px; margin-top: 14px; letter-spacing: 0.02em; }

/* ============================================================
   INSIGHT
   ============================================================ */
.insight { background: var(--bg); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.art { display: flex; flex-direction: column; cursor: pointer; }
.art__media { aspect-ratio: 16/11; overflow: hidden; border: 1px solid var(--line-soft); }
.art__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); filter: brightness(0.86); }
.art:hover .art__media img { transform: scale(1.05); }
.art__cat { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-top: 22px; }
.art__t { font-family: var(--serif); font-size: 23px; line-height: 1.25; margin: 14px 0 0; transition: color .4s var(--ease); }
.art:hover .art__t { color: var(--gold); }
.art__meta { color: var(--dim); font-size: 13px; margin-top: 14px; display: flex; gap: 14px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { position: relative; overflow: hidden; min-height: 86vh; display: flex; align-items: center; }
.final .media-bg img, .final .media-bg video { filter: brightness(0.4) saturate(0.9); }
.final .scrim { background: radial-gradient(80% 90% at 50% 50%, rgba(10,10,12,0.55), rgba(8,8,10,0.92)); }
.final__inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin: 0 auto; }
.final h2 { font-size: clamp(36px, 6vw, 84px); margin: 28px 0 0; }
.final p { margin: 28px auto 40px; max-width: 560px; }
.final__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.final__contact { margin-top: 46px; display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.final__contact a { color: var(--cream); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.final__contact a:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--char); border-top: 1px solid var(--line-soft); padding: 80px 0 38px; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand img { height: 64px; margin-bottom: 22px; }
.footer__brand p { color: var(--muted); font-size: 14px; max-width: 320px; }
.footer__col h5 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; font-weight: 600; }
.footer__col a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 13px; transition: color .3s; }
.footer__col a:hover { color: var(--cream); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); margin-top: 60px; padding-top: 28px;
  color: var(--dim); font-size: 12.5px; letter-spacing: 0.02em;
}
.footer__bottom .lk { display: flex; gap: 24px; }
.footer__bottom a:hover { color: var(--muted); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; }
.reveal { transform: translateY(26px); }
.reveal.in { transform: none; }
.reveal.anim { transition: opacity .95s var(--ease), transform .95s var(--ease); }
.reveal.anim.d1 { transition-delay: .07s; }
.reveal.anim.d2 { transition-delay: .14s; }
.reveal.anim.d3 { transition-delay: .21s; }
.reveal.anim.d4 { transition-delay: .28s; }

.r-line { overflow: hidden; }
.r-line > span { display: block; transform: translateY(108%); }
.r-line.in > span { transform: none; }
.r-line.anim > span { transition: transform .9s var(--ease); }
.r-line.anim.d1 > span { transition-delay: .1s; }
.r-line.anim.d2 > span { transition-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .r-line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scrollcue .rail::after { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .insight-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav__links, .nav__cta .btn { display: none; }
  .nav__burger { display: flex; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    position: fixed; inset: 64px 0 auto 0; background: rgba(10,10,10,0.97);
    backdrop-filter: blur(18px); padding: 20px var(--gutter) 30px; border-bottom: 1px solid var(--line);
    z-index: 99;
  }
  .nav.open .nav__links a { font-size: 18px; padding: 12px 0; width: 100%; }
  body.nav-open { overflow: hidden; }
  .why__grid { grid-template-columns: 1fr; gap: 50px; }
  .estate-grid { grid-template-columns: 1fr; }
  .prop.tall { min-height: 380px; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .hero__meta { gap: 28px; }
  .scrub { height: 300vh; }
}
@media (max-width: 560px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .advisors { grid-template-columns: 1fr 1fr; }
  .hero__meta .it .n { font-size: 24px; }
  .sec-head { margin-bottom: 44px; }
}

/* ============================================================
   SHARED SUB-PAGE SYSTEM  (interior pages)
   ============================================================ */

/* Italic accent (replaces former script font) */
.flourish { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.6vw, 38px); color: var(--gold); line-height: 1.1; display: inline-block; letter-spacing: 0.005em; }

/* ---------- Sub-page hero ---------- */
.subhero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; }
.subhero .media-bg img, .subhero .media-bg video { filter: brightness(0.5) grayscale(0.2) contrast(1.05); }
@keyframes slowzoom { from { transform: scale(1.02); } to { transform: scale(1.13); } }
.subhero .media-bg img { animation: slowzoom 26s var(--ease) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .subhero .media-bg img { animation: none; } }
.subhero .scrim { background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.35) 38%, rgba(10,10,10,0.95) 100%); }
.subhero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(56px, 9vh, 110px); padding-top: 160px; }
.subhero__inner .display { margin: 20px 0 0; }
.subhero__lead { max-width: 640px; margin: 28px 0 0; color: var(--cream); font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); }
.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.breadcrumb a { color: var(--muted); transition: color .3s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--gold-deep); }
.breadcrumb .cur { color: var(--gold); }

/* ---------- Two-column intro ---------- */
.intro-split { background: var(--char); }
.intro-split .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.intro-split h2 { font-size: clamp(28px, 3.6vw, 50px); }
.intro-split .body p { color: var(--muted); margin: 0 0 20px; font-size: 16.5px; }
.intro-split .body p:last-child { margin-bottom: 0; }
.intro-split .body .lead { color: var(--cream); font-weight: 300; margin-bottom: 26px; }

/* ---------- Feature rows (alternating image / text) ---------- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.frow + .frow { margin-top: clamp(70px, 10vh, 130px); }
.frow.rev .frow__media { order: 2; }
.frow__media { position: relative; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line-soft); }
.frow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); filter: brightness(0.84) contrast(1.03); }
.frow:hover .frow__media img { transform: scale(1.05); }
.frow__media .tag { position: absolute; top: 22px; left: 22px; z-index: 2; font-size: 12px; letter-spacing: .14em; color: var(--cream); background: rgba(10,10,10,0.55); border: 1px solid var(--line); padding: 8px 15px; border-radius: 999px; backdrop-filter: blur(6px); }
.frow__no { font-family: var(--display); font-size: 15px; letter-spacing: 0.14em; color: var(--gold); }
.frow h3 { font-size: clamp(26px, 3.2vw, 44px); margin: 16px 0 0; }
.frow p { color: var(--muted); margin: 22px 0 0; font-size: 16px; }
.frow__pts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.frow__pts li { display: flex; gap: 13px; color: var(--cream); font-size: 15px; font-weight: 300; }
.frow__pts li::before { content: "✦"; color: var(--gold); font-size: 11px; margin-top: 4px; flex: none; }

/* ---------- Card grid (markets / classes / types) ---------- */
.cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; }
.gcard { position: relative; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; border: 1px solid var(--line-soft); cursor: pointer; }
.gcard .gm { position: absolute; inset: 0; z-index: 0; }
.gcard .gm img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); filter: brightness(0.6) grayscale(0.25); }
.gcard:hover .gm img { transform: scale(1.07); filter: brightness(0.72) grayscale(0); }
.gcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0.5) 45%, rgba(10,10,10,0.95) 100%); }
.gcard__body { position: relative; z-index: 2; padding: 32px 30px 34px; width: 100%; }
.gcard__k { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.gcard__t { font-family: var(--display); font-size: 28px; font-weight: 700; margin: 12px 0 0; line-height: 1.1; }
.gcard__d { color: var(--muted); font-size: 14.5px; margin: 14px 0 0; line-height: 1.6; }
.gcard__stat { display: flex; gap: 26px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.gcard__stat .v { font-family: var(--display); font-size: 24px; color: var(--gold); line-height: 1; }
.gcard__stat .l { font-size: 11px; color: var(--muted); margin-top: 7px; letter-spacing: 0.04em; }
.topline-card { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold-bright), transparent); z-index: 3; transition: width .7s var(--ease); }
.gcard:hover .topline-card { width: 100%; }

/* ---------- Process steps ---------- */
.steps { background: var(--char); }
.steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: 60px; }
.step-cell { background: var(--bg); padding: 40px 30px 44px; position: relative; transition: background .5s var(--ease); }
.step-cell:hover { background: var(--bg-2); }
.step-cell .sn { font-family: var(--display); font-size: 14px; color: var(--gold); letter-spacing: 0.1em; }
.step-cell .st { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 18px 0 0; line-height: 1.18; }
.step-cell .sd { color: var(--muted); font-size: 14.5px; margin: 14px 0 0; line-height: 1.6; }

/* ---------- Stat band ---------- */
.statband { background: var(--bg); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.statband .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-top: clamp(56px, 8vh, 90px); padding-bottom: clamp(56px, 8vh, 90px); }
.statband .num { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 4.6vw, 64px); color: var(--gold); line-height: 1; letter-spacing: -0.02em; }
.statband .num .suf { color: var(--cream); }
.statband .lbl { color: var(--muted); font-size: 13.5px; margin-top: 14px; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 50px; border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; color: var(--cream); padding: 30px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--display); font-size: clamp(18px, 2vw, 24px); font-weight: 700; transition: color .3s; }
.faq-q:hover { color: var(--gold); }
.faq-q .pm { flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--gold); transition: transform .4s var(--ease), background .4s; position: relative; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--gold); }
.faq-q .pm::before { width: 11px; height: 1.5px; }
.faq-q .pm::after { width: 1.5px; height: 11px; transition: transform .4s var(--ease); }
.faq-item.open .faq-q .pm::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p { color: var(--muted); margin: 0; padding: 0 60px 30px 0; font-size: 15.5px; line-height: 1.7; }

/* ---------- News ---------- */
.news { background: var(--bg); }
.news-feat { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 4vw, 60px); margin-top: 56px; align-items: center; }
.news-feat__media { position: relative; overflow: hidden; aspect-ratio: 16/10; border: 1px solid var(--line-soft); }
.news-feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); }
.news-feat:hover .news-feat__media img { transform: scale(1.04); }
.news-feat__cat, .news-card__cat { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.news-feat h3 { font-size: clamp(26px, 3vw, 42px); margin: 18px 0 0; line-height: 1.16; }
.news-feat p { color: var(--muted); margin: 22px 0 0; font-size: 16px; max-width: 480px; }
.news-feat .nmeta, .news-card__meta { color: var(--dim); font-size: 13px; margin-top: 22px; display: flex; gap: 16px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 64px; }
.news-card { cursor: pointer; display: flex; flex-direction: column; }
.news-card__media { aspect-ratio: 16/11; overflow: hidden; border: 1px solid var(--line-soft); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); filter: brightness(0.88); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__cat { margin-top: 22px; }
.news-card__t { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.25; margin: 13px 0 0; transition: color .3s; }
.news-card:hover .news-card__t { color: var(--gold); }
.news-cats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.news-cats button { background: none; border: 1px solid var(--line); color: var(--muted); padding: 9px 20px; border-radius: 999px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: all .3s var(--ease); }
.news-cats button:hover, .news-cats button.active { border-color: var(--gold); color: var(--gold); background: rgba(192,148,74,0.08); }

/* ---------- Allocation bar (investment page) ---------- */
.alloc { margin-top: 56px; }
.alloc__bar { display: flex; height: 64px; border: 1px solid var(--line); overflow: hidden; }
.alloc__seg { height: 100%; transition: flex .8s var(--ease); position: relative; }
.alloc__legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 34px; }
.alloc__item .sw { width: 100%; height: 4px; }
.alloc__item .pct { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--cream); margin-top: 14px; line-height: 1; }
.alloc__item .nm { color: var(--muted); font-size: 13.5px; margin-top: 8px; line-height: 1.4; }
@media (max-width: 860px) { .alloc__legend { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* ============================================================
   QUOTE BAND  (editorial pull-quote)
   ============================================================ */
.quoteband { background: var(--char); position: relative; text-align: center; overflow: hidden; }
.quoteband::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 28%, rgba(192,148,74,0.08), transparent 70%); pointer-events: none; }
.quoteband .wrap { position: relative; z-index: 2; max-width: 1040px; }
.quoteband__mark { font-family: var(--display); font-size: 90px; line-height: 0.5; color: var(--gold); opacity: 0.5; display: block; height: 50px; }
.quoteband__q { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.7vw, 52px); line-height: 1.32; color: var(--cream); margin: 0 auto; letter-spacing: -0.01em; }
.quoteband__q em { font-style: italic; color: var(--gold); }
.quoteband__by { margin-top: 38px; color: var(--muted); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testi { background: var(--bg); }
.testi__card { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1080px; margin: 0 auto; }
.testi__media { position: relative; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--line-soft); }
.testi__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) brightness(0.92); transition: transform 1.6s var(--ease); }
.testi__card:hover .testi__media img { transform: scale(1.05); }
.testi__q { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.4; color: var(--cream); margin: 0; }
.testi__q em { font-style: italic; color: var(--gold); }
.testi__who { margin-top: 30px; display: flex; align-items: center; gap: 16px; }
.testi__who .ln { width: 36px; height: 1px; background: var(--gold); }
.testi__who .nm { font-family: var(--display); font-weight: 700; font-size: 17px; }
.testi__who .rl { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ============================================================
   POINT LIST  (who-it's-for / benefits)
   ============================================================ */
.pointlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-top: 56px; }
.point { background: var(--bg); padding: 38px 34px; display: flex; gap: 20px; transition: background .5s var(--ease); }
.point:hover { background: var(--bg-2); }
.point .pn { font-family: var(--display); font-weight: 700; color: var(--gold); font-size: 15px; flex: none; padding-top: 3px; }
.point h4 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0 0 10px; }
.point p { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.6; }

/* ============================================================
   STRUCTURE LADDER  (family office org)
   ============================================================ */
.ladder { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.rung { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; border: 1px solid var(--line-soft); background: var(--panel); padding: 28px 34px; transition: border-color .5s var(--ease), transform .5s var(--ease); }
.rung:hover { border-color: var(--line); transform: translateX(8px); }
.rung .rk { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.8vw, 23px); color: var(--gold); }
.rung .rd { color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 700px) { .rung { grid-template-columns: 1fr; gap: 10px; } .pointlist { grid-template-columns: 1fr; } .testi__card { grid-template-columns: 1fr; } }

/* ============================================================
   CROSS-NAV  (related services, before signup)
   ============================================================ */
.cross { background: var(--char); }
.cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.cross-card { position: relative; border: 1px solid var(--line-soft); background: var(--bg); padding: 36px 30px 32px; display: flex; flex-direction: column; min-height: 220px; transition: border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease); overflow: hidden; }
.cross-card::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold-bright), transparent); transition: width .6s var(--ease); }
.cross-card:hover { border-color: var(--line); transform: translateY(-5px); }
.cross-card:hover::after { width: 100%; }
.cross-card .ck { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.cross-card .ct { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 14px 0 0; line-height: 1.15; }
.cross-card .cd { color: var(--muted); font-size: 14px; margin: 12px 0 0; line-height: 1.6; flex: 1; }
.cross-card .cgo { margin-top: 22px; color: var(--cream); font-size: 13px; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 9px; transition: color .4s; }
.cross-card:hover .cgo { color: var(--gold); }
.cross-card .cgo .arw { transition: transform .5s var(--ease); }
.cross-card:hover .cgo .arw { transform: translateX(5px); }
@media (max-width: 860px) { .cross-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SIGNUP FORM  (every page footer)
   ============================================================ */
.signup { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, var(--char) 100%); }
.signup::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 0%, rgba(192,148,74,0.10), transparent 65%); pointer-events: none; }
.signup__card { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; background: linear-gradient(165deg, #1a1610 0%, var(--panel) 60%); border: 1px solid var(--line); padding: clamp(40px, 6vw, 76px); }
.signup__card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--foil); }
.signup__head { text-align: center; max-width: 600px; margin: 0 auto clamp(34px, 4vw, 50px); }
.signup__head .flourish { margin-bottom: 6px; }
.signup__head h2 { font-size: clamp(28px, 3.6vw, 50px); margin: 6px 0 0; }
.signup__head p { color: var(--muted); margin: 18px 0 0; font-size: 16px; }
.signup__form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  background: rgba(10,10,10,0.5); border: 1px solid var(--line-soft); color: var(--cream);
  font-family: var(--sans); font-size: 15px; padding: 15px 17px; border-radius: 2px;
  transition: border-color .3s, background .3s; width: 100%;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(10,10,10,0.7); }
.field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 22px) center, calc(100% - 16px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.signup__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.signup__note { color: var(--dim); font-size: 12.5px; max-width: 380px; line-height: 1.5; }
.signup__note a { color: var(--muted); border-bottom: 1px solid var(--line); }
.signup .btn-gold { padding: 17px 40px; }
.signup__ok { display: none; text-align: center; padding: 20px 0; }
.signup__ok .flourish { font-size: clamp(34px, 5vw, 56px); }
.signup__ok p { color: var(--muted); margin: 12px 0 0; }
.signup__card.sent .signup__form, .signup__card.sent .signup__head { display: none; }
.signup__card.sent .signup__ok { display: block; }

/* ---------- Sub-page responsive ---------- */
@media (max-width: 1080px) {
  .cardgrid { grid-template-columns: 1fr 1fr; }
  .steps__grid { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .intro-split .wrap { grid-template-columns: 1fr; gap: 36px; }
  .frow, .frow.rev .frow__media { grid-template-columns: 1fr; order: 0; }
  .frow__media { order: -1 !important; }
  .statband .wrap { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .news-feat { grid-template-columns: 1fr; }
  .signup__form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cardgrid, .steps__grid, .news-grid { grid-template-columns: 1fr; }
  .statband .wrap { grid-template-columns: 1fr 1fr; }
}

/* ====== DROPDOWN NAV (submenu) + FOOTER 4-COL — added ====== */
.nav__item{ position:relative; display:flex; align-items:center; }
.nav__item > a .caret{ font-size:8px; margin-left:5px; opacity:.55; transition:.3s; }
.nav__item:hover > a .caret{ opacity:1; transform:translateY(1px); }
.nav__sub{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px);
  min-width:240px; background:rgba(20,17,12,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:14px; padding:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:.26s var(--ease); z-index:120;
  display:flex; flex-direction:column; gap:2px;
}
.nav__item:hover > .nav__sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(2px); }
.nav__sub a{ display:block !important; padding:10px 14px; font-size:13px; color:var(--muted); border-radius:9px; white-space:nowrap; width:auto; }
.nav__sub a::after{ display:none !important; }
.nav__sub a:hover{ color:var(--cream); background:rgba(192,148,74,.12); }
.footer__top{ grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width:1080px){ .footer__top{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:860px){
  .nav.open .nav__item{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav.open .nav__item > a .caret{ display:none; }
  .nav.open .nav__sub{ position:static; transform:none; opacity:1; visibility:visible; background:none; border:none; box-shadow:none; padding:2px 0 10px 18px; min-width:0; }
  .nav.open .nav__sub a{ font-size:15px; color:var(--dim); padding:9px 0; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}

/* ===== VISUAL UPGRADE v4: ảnh SÁNG hơn, LỚN hơn, mỗi section có ảnh ===== */
.scrim{ background: radial-gradient(120% 90% at 50% 0%, rgba(10,10,12,.12), transparent 55%), linear-gradient(180deg, rgba(10,10,12,.32) 0%, rgba(10,10,12,.16) 44%, rgba(10,10,12,.76) 100%) !important; }
.subhero .scrim{ background: linear-gradient(180deg, rgba(10,10,10,.26) 0%, rgba(10,10,10,.10) 46%, rgba(10,10,10,.68) 100%) !important; }
.final .scrim{ background: radial-gradient(85% 95% at 50% 50%, rgba(10,10,12,.32), rgba(8,8,10,.80)) !important; }
.vignette{ box-shadow: inset 0 0 170px 26px rgba(0,0,0,.36) !important; background: radial-gradient(110% 80% at 50% 45%, transparent 58%, rgba(8,8,10,.40) 100%) !important; }
.gcard{ min-height:470px; }
.gcard .gm img{ filter: brightness(.98) grayscale(0) !important; }
.gcard:hover .gm img{ filter: brightness(1.07) grayscale(0) !important; }
.pillar{ min-height:480px; }
.pillar .pmedia img{ filter: grayscale(0) brightness(.92) !important; }
.pillar:hover .pmedia img{ filter: grayscale(0) brightness(1.04) !important; }
.bandimg{ width:100%; height:clamp(320px,42vw,580px); object-fit:cover; border-radius:18px; display:block; filter:brightness(1.04); box-shadow:0 30px 70px rgba(0,0,0,.45); }
.sec-photo{ margin-top:48px; }

/* ===== v6: text-card gọn · liquid-glass photoband · submenu rõ ===== */
/* Card không ảnh → kiểu text gọn gàng, không cao trống */
.gcard:not(:has(.gm)){ min-height:0; align-items:stretch; background:var(--panel); border:1px solid var(--line-soft); border-radius:16px; }
.gcard:not(:has(.gm))::after{ display:none !important; }
.gcard:not(:has(.gm)) .gcard__body{ padding:32px 28px !important; }
/* Liquid glass: content nằm trên ảnh lớn với nền mờ */
.subhero[style*="min-height"] .subhero__inner{
  background:linear-gradient(135deg, rgba(20,17,12,.42), rgba(20,17,12,.24));
  -webkit-backdrop-filter:blur(13px) saturate(1.2); backdrop-filter:blur(13px) saturate(1.2);
  border:1px solid rgba(245,242,236,.16); border-radius:24px;
  padding:clamp(30px,4vw,54px); max-width:800px;
  box-shadow:0 36px 90px rgba(0,0,0,.42);
}
.subhero[style*="min-height"] .scrim{ background:linear-gradient(180deg, rgba(10,10,10,.16) 0%, rgba(10,10,10,.04) 50%, rgba(10,10,10,.42) 100%) !important; }
/* Submenu: chỉ báo rõ hơn */
.nav__item > a .caret{ opacity:1 !important; color:var(--gold) !important; font-size:10px !important; display:inline-block; transition:transform .3s var(--ease); }
.nav__item:hover > a .caret{ transform:rotate(180deg); }
.nav__item:hover > a{ color:var(--cream); }
.nav__sub{ border-color:rgba(192,148,74,.42) !important; }
.nav__sub::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:rgba(20,17,12,.97); border-left:1px solid rgba(192,148,74,.42); border-top:1px solid rgba(192,148,74,.42); }

/* ============================================================
   ╔══════════════════════════════════════════════════════╗
   ║  v7 · LIQUID-LUXURY POLISH                             ║
   ║  warm charcoal · glassmorphism · bright editorial      ║
   ╚══════════════════════════════════════════════════════╝
   ============================================================ */

/* ---- 1 · WARM TOKENS (override, later-wins) ---- */
:root{
  --bg:        #15140F;   /* warm charcoal, not black */
  --bg-2:      #1A1814;
  --char:      #100F0B;   /* deepest warm */
  --espresso:  #1E1810;
  --panel:     #201C15;
  --line:      rgba(192,148,74,0.26);
  --line-soft: rgba(245,242,236,0.08);

  --cream:  #F6F1E8;
  --muted:  #C8BA9C;
  --dim:    #918468;

  /* light-section ink */
  --ink:        #1B1510;
  --ink-muted:  #5E5443;
  --ink-dim:    #8C806B;
  --cream-bg:   #ECE5D7;
  --cream-bg-2: #E4D9C6;

  --glass-bg:    rgba(28,24,17,0.30);
  --glass-bord:  rgba(246,241,232,0.18);
  --glass-shadow: 0 30px 80px -28px rgba(0,0,0,0.66);
  --r-lg: 26px;
  --r-md: 18px;
}
body{ background:var(--bg); }

/* warm ambient wash behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% -8%, rgba(192,148,74,0.10), transparent 60%),
    radial-gradient(55% 45% at 8% 108%, rgba(155,114,51,0.08), transparent 60%),
    linear-gradient(180deg, #15140F 0%, #131209 60%, #15140F 100%);
}

/* ---- 2 · LIQUID BLOBS ---- */
.blobs{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%; filter:blur(54px); opacity:.7;
  will-change:transform; mix-blend-mode:screen;
}
.blob.a{ width:46vw; height:46vw; left:-10vw; top:-8vw;
  background:radial-gradient(circle at 35% 35%, rgba(240,226,166,0.42), rgba(192,148,74,0.16) 55%, transparent 72%);
  animation:blobdrift 24s var(--ease) infinite alternate; }
.blob.b{ width:40vw; height:40vw; right:-12vw; top:18vw;
  background:radial-gradient(circle at 60% 40%, rgba(215,182,109,0.34), rgba(155,114,51,0.12) 58%, transparent 74%);
  animation:blobdrift2 30s var(--ease) infinite alternate; }
.blob.c{ width:34vw; height:34vw; left:24vw; bottom:-14vw;
  background:radial-gradient(circle at 50% 50%, rgba(192,148,74,0.30), transparent 70%);
  animation:blobdrift 27s var(--ease) infinite alternate-reverse; }
@keyframes blobdrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(6vw,4vw,0) scale(1.16); } }
@keyframes blobdrift2{ from{ transform:translate3d(0,0,0) scale(1.08); } to{ transform:translate3d(-5vw,-3vw,0) scale(.92); } }
@media (prefers-reduced-motion: reduce){ .blob{ animation:none !important; } }

/* ---- 3 · GLASS SYSTEM ---- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-bord);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(246,241,232,0.12);
}
.glass-card{
  position:relative;
  background:linear-gradient(155deg, rgba(38,32,22,0.58), rgba(24,21,15,0.40));
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--glass-bord);
  border-radius:var(--r-md);
  box-shadow:0 22px 60px -34px rgba(0,0,0,0.7), inset 0 1px 0 rgba(246,241,232,0.10);
  transition:transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
  overflow:hidden;
}
.glass-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%, rgba(240,226,166,0.10), transparent 42%);
  opacity:0; transition:opacity .6s var(--ease);
}
.glass-card:hover{ transform:translateY(-6px); border-color:rgba(192,148,74,0.5); box-shadow:0 40px 90px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(192,148,74,0.18); }
.glass-card:hover::before{ opacity:1; }

/* glass button */
.btn-glass{
  background:rgba(246,241,232,0.06);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--cream); border:1px solid var(--glass-bord); border-radius:999px;
}
.btn-glass:hover{ border-color:var(--gold); color:var(--gold); background:rgba(192,148,74,0.10); transform:translateY(-2px); box-shadow:0 14px 40px -16px var(--gold-glow); }
/* round the existing buttons for the liquid look */
.btn{ border-radius:999px; }
.btn-ghost{ border-radius:999px; }
.btn-gold{ border-radius:999px; box-shadow:0 10px 30px -14px rgba(192,148,74,0.5); }

/* ---- 4 · WARM, BRIGHT IMAGE TREATMENT ---- */
.editorial{ position:relative; overflow:hidden; border-radius:var(--r-lg); }
.editorial img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.08) contrast(1.03) brightness(1.04); transition:transform 1.5s var(--ease); }
.editorial::after{ /* unifying warm glaze, very light */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(165deg, rgba(192,148,74,0.06), transparent 38%, rgba(20,18,14,0.14));
  mix-blend-mode:multiply;
}
.editorial.zoom:hover img{ transform:scale(1.06); }
.editorial .ed-tag{
  position:absolute; left:18px; top:18px; z-index:2;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
  background:rgba(16,15,11,0.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--glass-bord); padding:8px 14px; border-radius:999px;
}

/* ---- 5 · LIGHT (BRIGHT) SECTION — re-scope tokens ---- */
.section--light{
  --cream:#1B1510; --muted:#5E5443; --dim:#8C806B;
  --line-soft:rgba(27,21,16,0.12); --line:rgba(192,148,74,0.34);
  --glass-bg:rgba(255,253,248,0.55); --glass-bord:rgba(27,21,16,0.10);
  background:var(--cream-bg); color:var(--ink);
  position:relative;
}
.section--light::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 85% 0%, rgba(192,148,74,0.12), transparent 60%);
}
.section--light .eyebrow{ color:var(--gold-deep); }
.section--light .glass-card{ background:linear-gradient(155deg, rgba(255,253,248,0.74), rgba(247,242,233,0.5)); border-color:rgba(27,21,16,0.08); box-shadow:0 24px 60px -38px rgba(60,46,20,0.4); }
.section--light .glass-card:hover{ border-color:rgba(192,148,74,0.5); }

/* ---- 6 · SPLIT 50/50 (image ⇆ text) ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; }
.split.rev .split__media{ order:2; }
.split__media{ position:relative; border-radius:var(--r-lg); overflow:visible; }
.split__media .editorial{ aspect-ratio:4/5; box-shadow:0 50px 100px -50px rgba(0,0,0,0.7); }
.split__media .float-stat{
  position:absolute; right:-26px; bottom:-26px; z-index:3; padding:22px 26px; min-width:180px;
  border-radius:var(--r-md);
}
.split__media .float-stat .v{ font-family:var(--display); font-weight:700; font-size:38px; color:var(--gold); line-height:1; }
.split__media .float-stat .l{ font-size:12.5px; color:var(--muted); margin-top:8px; letter-spacing:.03em; }
.split__body h2{ margin-top:20px; }
.split__body .lead{ margin-top:22px; }
.split__list{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.split__list li{ display:flex; gap:16px; align-items:flex-start; }
.split__list .ic{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(192,148,74,0.12); border:1px solid var(--line); color:var(--gold); font-size:15px; }
.split__list h4{ font-family:var(--display); font-weight:700; font-size:18px; margin:0 0 5px; }
.split__list p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:40px; } .split.rev .split__media{ order:0; } .split__media .float-stat{ right:14px; bottom:-20px; } }

/* ---- 7 · FULL-BLEED PHOTOBAND w/ glass panel ---- */
.photoband{ position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; }
.photoband__media{ position:absolute; inset:0; z-index:0; }
.photoband__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.06) contrast(1.02) brightness(1.0); }
.photoband__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,15,11,0.78) 0%, rgba(16,15,11,0.42) 42%, rgba(16,15,11,0.18) 100%); }
.photoband__panel{ position:relative; z-index:2; padding:clamp(34px,4vw,56px); max-width:560px; }
.photoband .statband{ background:transparent; border:none; }

/* statband as glass tiles */
.statband.glassstats .wrap{ gap:18px; }
.statband.glassstats .wrap > div{ padding:30px 26px; border-radius:var(--r-md);
  background:linear-gradient(155deg, rgba(38,32,22,0.5), rgba(20,18,13,0.34));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--glass-bord); box-shadow:inset 0 1px 0 rgba(246,241,232,0.10); }

/* ---- 8 · HERO upgrade (glass content panel, bright) ---- */
.hero .media-bg::after{ background:linear-gradient(95deg, rgba(16,15,11,0.74) 0%, rgba(16,15,11,0.34) 46%, rgba(16,15,11,0.12) 100%) !important; }
.hero .media-bg img, .hero .media-bg video{ filter:saturate(1.08) contrast(1.02) brightness(1.06); }
.hero__panel{
  position:relative; max-width:660px; padding:clamp(30px,3.4vw,52px);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(28,24,17,0.32), rgba(18,16,11,0.15));
  -webkit-backdrop-filter:blur(26px) saturate(1.35); backdrop-filter:blur(26px) saturate(1.35);
  border:1px solid var(--glass-bord);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(246,241,232,0.12);
}
.hero__panel::before{ content:""; position:absolute; top:0; left:26px; right:26px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,226,166,0.6), transparent); }
.hero__chips{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero__chip{ display:flex; flex-direction:column; padding:14px 20px; border-radius:14px;
  background:rgba(246,241,232,0.05); border:1px solid var(--glass-bord); }
.hero__chip .n{ font-family:var(--display); font-weight:700; font-size:24px; color:var(--gold); line-height:1; }
.hero__chip .l{ font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:.04em; }
@media (max-width:560px){ .hero__chips{ display:none; } }

/* ---- 9 · GLASS PILLAR / INSIGHT polish ---- */
.pillar{ border-radius:var(--r-md); }
.pillar .pmedia img{ filter:saturate(1.08) brightness(0.96) !important; }
.pillar::after{ background:linear-gradient(180deg, rgba(16,15,11,0.05) 0%, rgba(16,15,11,0.42) 48%, rgba(16,15,11,0.94) 100%) !important; }
.pillar:hover .pmedia img{ filter:saturate(1.12) brightness(1.06) !important; }
.pillar__body{ -webkit-backdrop-filter:blur(2px); }
.art__media{ border-radius:var(--r-md); }
.art__media img{ filter:saturate(1.06) brightness(1.0); }

/* ---- 10 · SECTION HEAD label + scrub glass ---- */
.scrub__phase h3{ background:linear-gradient(180deg,#fff,#efe6d6); -webkit-background-clip:text; background-clip:text; }
.scrub__phase{ padding-left:var(--gutter); padding-right:var(--gutter); }
.scrub__panel{ max-width:760px; padding:clamp(28px,3vw,44px); border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(20,18,13,0.4), rgba(16,15,11,0.2));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--glass-bord); }
.scrub__sticky video, .scrub__sticky img.scrub-poster{ filter:saturate(1.06) brightness(0.78) contrast(1.03) !important; }

/* ---- 11 · REVEAL refinements ---- */
.reveal{ transform:translateY(34px); }
.reveal.anim{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
.fadein{ opacity:0; transition:opacity 1.1s var(--ease); }
.fadein.in{ opacity:1; }
.scaleup{ opacity:0; transform:scale(.965) translateY(24px); }
.scaleup.anim{ transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.scaleup.in{ opacity:1; transform:none; }

/* eyebrow chip variant */
.eyebrow.pill{ background:rgba(192,148,74,0.10); border:1px solid var(--line); padding:8px 16px 8px 14px; border-radius:999px; }
.eyebrow.pill::before{ width:18px; }

/* divider flourish */
.divider{ display:flex; align-items:center; justify-content:center; gap:16px; color:var(--gold-deep); }
.divider::before, .divider::after{ content:""; height:1px; width:min(120px,18vw); background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* section spacing on big editorial blocks */
.section.tight{ padding-top:clamp(70px,9vh,120px); padding-bottom:clamp(70px,9vh,120px); }

/* nav warm glass */
.nav.scrolled{ background:rgba(18,16,11,0.72) !important; }

/* footer warm */
.footer{ position:relative; overflow:hidden; }
.footer .blobs .blob{ opacity:.28; }

/* nav collapse earlier (avoid brand/links overlap on mid widths) */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__cta .btn-ghost{ display:none; }
  .nav__burger{ display:flex; }
  .nav.open .nav__links{
    display:flex; flex-direction:column; gap:4px; align-items:flex-start;
    position:fixed; inset:64px 0 auto 0; background:rgba(16,15,11,0.97);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    padding:20px var(--gutter) 30px; border-bottom:1px solid var(--line); z-index:99; max-height:calc(100vh - 64px); overflow:auto;
  }
  .nav.open .nav__links > a{ font-size:18px; padding:12px 0; width:100%; }
  .nav.open .nav__item{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav.open .nav__item > a{ font-size:18px; padding:12px 0; width:100%; }
  .nav.open .nav__item > a .caret{ display:none; }
  .nav.open .nav__sub{ position:static; transform:none; opacity:1; visibility:visible; background:none; border:none; box-shadow:none; padding:2px 0 10px 18px; min-width:0; }
  .nav.open .nav__sub::before{ display:none; }
  .nav.open .nav__sub a{ font-size:15px; color:var(--dim); padding:9px 0; }
}

/* ============================================================
   v7 · SUB-PAGE UPLIFT (applies to every interior page)
   ============================================================ */
/* keep section content above injected liquid blobs */
.section > .wrap, .subhero > .wrap, .final > .wrap, .photoband > .wrap,
.signup > .wrap, .quoteband > .wrap, .cross > .wrap, .manifesto > .wrap,
.steps > .wrap, .membership > .wrap, .why > .wrap, .estate > .wrap, .news > .wrap, .testi > .wrap{
  position:relative; z-index:1;
}

/* brighter sub-hero imagery */
.subhero .media-bg img, .subhero .media-bg video{ filter:saturate(1.1) contrast(1.04) brightness(1.12) !important; }
.subhero .scrim{ background:linear-gradient(180deg, rgba(16,15,11,.16) 0%, rgba(16,15,11,.02) 44%, rgba(16,15,11,.5) 100%) !important; }
.subhero .vignette{ box-shadow:inset 0 0 140px 22px rgba(0,0,0,.26) !important; background:radial-gradient(120% 85% at 50% 40%, transparent 62%, rgba(8,8,10,.28) 100%) !important; }

/* sub-hero content → frosted glass panel (all interior pages) */
.subhero{ align-items:flex-end; }
.subhero__inner{
  position:relative; z-index:2; width:auto; max-width:840px;
  margin-bottom:clamp(38px,7vh,88px);
  padding:clamp(30px,3.4vw,50px) clamp(28px,3.2vw,48px);
  background:linear-gradient(150deg, rgba(30,26,18,0.34), rgba(18,16,11,0.16));
  -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid var(--glass-bord); border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(246,241,232,0.14);
}
.subhero__inner::before{ content:""; position:absolute; top:0; left:26px; right:26px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,226,166,0.6),transparent); }
.subhero__inner .display{ margin-top:14px; }
.subhero__lead{ color:var(--cream); }
@media (max-width:560px){ .subhero__inner{ padding:26px 22px; } }

/* liquid-rounded media + standalone cards (consistent with homepage) */
.frow__media, .gcard, .prop, .testi__media, .news-feat__media, .news-card__media,
.advisor, .cross-card, .tier, .alloc__bar, .art__media{ border-radius:var(--r-md); }
.frow__media img{ filter:saturate(1.07) contrast(1.02) brightness(0.96) !important; }
.gcard .gm img{ filter:saturate(1.08) brightness(0.98) grayscale(0) !important; }
.gcard:hover .gm img{ filter:saturate(1.12) brightness(1.08) grayscale(0) !important; }
.prop .pm img, .news-card__media img, .news-feat__media img{ filter:saturate(1.06) brightness(1.0) !important; }
.testi__media img{ filter:saturate(1.05) brightness(0.98) grayscale(0) !important; }
.advisor .am img{ filter:saturate(1.04) brightness(0.96) grayscale(0.15) !important; }

/* tier / cross cards → soft glass */
.tier{ background:linear-gradient(155deg, rgba(34,29,20,0.6), rgba(22,19,13,0.42)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:var(--glass-bord); }
.cross-card{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* quote / manifesto warm glow already present; lift type a touch */
.quoteband__q em, .manifesto__q em{ color:var(--gold); }

/* ============================================================
   v8 · LIVELIER LIQUID BG · NAV CTA HIGHLIGHT · RICHER FOOTER
   ============================================================ */

/* stronger, more colourful blobs (visible through the glass) */
.blob.a{ background:radial-gradient(circle at 35% 35%, rgba(244,228,168,0.6), rgba(192,148,74,0.26) 54%, transparent 72%); }
.blob.b{ background:radial-gradient(circle at 60% 40%, rgba(222,188,112,0.5), rgba(155,114,51,0.2) 56%, transparent 74%); }
.blob.c{ background:radial-gradient(circle at 50% 50%, rgba(201,158,82,0.46), rgba(192,148,74,0.14) 60%, transparent 72%); }

/* ---- NAV CTA — highlighted gold pill ---- */
.nav__cta .btn-ghost{
  background:linear-gradient(120deg, var(--gold-bright), var(--gold)) !important;
  color:#16110A !important; border:1px solid rgba(240,226,166,0.6) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 8px 26px -10px var(--gold-glow);
  animation:ctaGlow 3.4s var(--ease) infinite;
}
.nav__cta .btn-ghost:hover{ color:#16110A !important; border-color:#fff !important; transform:translateY(-2px); box-shadow:0 16px 42px -12px rgba(192,148,74,0.7); }
.nav__cta .btn-ghost .arw{ color:#16110A; }
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 8px 24px -12px rgba(192,148,74,0.5); }
  50%{ box-shadow:0 10px 30px -8px rgba(240,226,166,0.7); }
}
@media (prefers-reduced-motion: reduce){ .nav__cta .btn-ghost{ animation:none; } }

/* ---- RICHER FOOTER ---- */
.footer{ background:linear-gradient(180deg, #100F0B 0%, #14120C 60%, #16140D 100%); padding-top:0; }
.footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--foil); opacity:.85; z-index:3; }
.footer__inner-glow{ }
.footer::after{
  content:"ICANFIELD"; position:absolute; left:50%; bottom:-0.14em; transform:translateX(-50%);
  font-family:var(--display); font-weight:700; font-size:clamp(70px,17vw,260px); letter-spacing:-0.03em;
  line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(192,148,74,0.12);
  pointer-events:none; z-index:0; white-space:nowrap;
}
.footer > .wrap{ padding-top:84px; }
.footer .footer__top{ position:relative; z-index:1; }
.footer__brand img{ height:74px; filter:drop-shadow(0 8px 26px rgba(192,148,74,0.28)); }
.footer__brand p{ color:var(--muted); }
.footer__col h5{ display:flex; align-items:center; gap:9px; }
.footer__col h5::before{ content:""; width:14px; height:1px; background:var(--gold); display:inline-block; }
.footer__col a{ position:relative; width:max-content; transition:color .3s var(--ease), transform .3s var(--ease); }
.footer__col a:hover{ color:var(--gold); transform:translateX(5px); }
.footer__bottom{ position:relative; z-index:1; border-top:1px solid var(--line); }
.footer__bottom .lk a{ position:relative; padding-bottom:2px; }
.footer__bottom .lk a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .4s var(--ease); }
.footer__bottom .lk a:hover{ color:var(--gold); }
.footer__bottom .lk a:hover::after{ width:100%; }
.footer .blob{ opacity:.4 !important; }
@media (max-width:560px){ .footer::after{ font-size:clamp(54px,22vw,120px); } }

/* ============================================================
   v9 · BUGFIXES — heroes on background · grid counts · form
   ============================================================ */

/* (#3,#4) HERO content sits directly on the background — no glass box */
.hero__panel{
  background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:none !important; box-shadow:none !important; padding:0 !important; max-width:680px;
}
.hero__panel::before{ display:none !important; }
.hero .media-bg::after{ background:linear-gradient(95deg, rgba(12,11,8,0.84) 0%, rgba(12,11,8,0.5) 40%, rgba(12,11,8,0.12) 74%) !important; }
.hero .scrim{ background:linear-gradient(180deg, rgba(12,11,8,0.30) 0%, transparent 40%, rgba(12,11,8,0.42) 100%) !important; }
.hero__title, .hero .eyebrow, .hero__sub{ text-shadow:0 2px 32px rgba(0,0,0,0.55); }
.hero__chip{ background:rgba(20,17,11,0.40); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* (#3,#4,#1) SUB-HERO content directly on background — no glass box */
.subhero{ min-height:88vh; padding-top:108px; align-items:flex-end; }
.subhero__inner{
  background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:none !important; box-shadow:none !important;
  max-width:860px; padding:0 !important; margin-bottom:clamp(46px,8vh,98px);
}
.subhero__inner::before{ display:none !important; }
.subhero .scrim{ background:linear-gradient(180deg, rgba(12,11,8,0.34) 0%, rgba(12,11,8,0.06) 36%, rgba(12,11,8,0.74) 100%) !important; }
.subhero__inner .display{ font-size:clamp(38px,5.4vw,76px); }
.subhero__inner .display, .subhero__inner .flourish, .subhero__lead, .subhero .breadcrumb{ text-shadow:0 2px 28px rgba(0,0,0,0.58); }
.subhero__lead{ max-width:640px; }

/* (#1) eyebrow pill — multiline safe tag */
.eyebrow.pill{ flex-wrap:wrap; border-radius:16px; }

/* (#2) approach CTA band reads as its own section */
.approach-cta{ background:var(--char); text-align:center; }
.approach-cta .approach-link{ display:flex; flex-direction:column; align-items:center; }

/* (#5) GRID quantity-aware — never leave an orphan row (desktop only; tablet/mobile keep responsive cols) */
@media (min-width:1081px){
  .cardgrid:has(> :nth-child(4)):not(:has(> :nth-child(5))){ grid-template-columns:repeat(2,1fr); }
  .cardgrid:has(> :nth-child(2)):not(:has(> :nth-child(3))){ grid-template-columns:repeat(2,1fr); }
  .cardgrid:has(> :only-child){ grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; }
  .pillar-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))){ grid-template-columns:repeat(3,1fr); }
}

/* (#6) FORM validation states */
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#C9533A !important; background:rgba(201,83,58,0.07) !important; }
.field .err{ display:none; color:#E59177; font-size:12px; letter-spacing:.01em; margin-top:1px; }
.field.invalid .err{ display:block; }

/* ============================================================
   v11 · NAV MATCHES SITEMAP — single "Giải pháp" mega-menu
   ============================================================ */
.nav__mega{
  left:50%; transform:translateX(-50%) translateY(10px);
  display:grid; grid-template-columns:repeat(4, minmax(168px,1fr)); gap:6px 18px;
  min-width:min(840px, calc(100vw - 36px)); padding:18px;
}
.nav__item:hover > .nav__mega{ transform:translateX(-50%) translateY(2px); }
.nav__megacol{ display:flex; flex-direction:column; gap:1px; }
.nav__sub a.nav__megahead{
  color:var(--gold) !important; font-weight:600; font-size:11.5px !important; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 14px !important; margin-bottom:4px;
  border-bottom:1px solid var(--line-soft); border-radius:8px 8px 0 0;
}
.nav__sub a.nav__megahead:hover{ background:rgba(192,148,74,.16); color:var(--gold) !important; }
@media (max-width:1080px){
  .nav.open .nav__mega{ grid-template-columns:1fr; min-width:0; padding:2px 0 8px 18px; gap:0; }
  .nav.open .nav__megacol{ margin-bottom:8px; }
  .nav.open .nav__sub a.nav__megahead{ border:none; color:var(--gold) !important; font-size:13px !important; padding:10px 0 4px !important; margin-bottom:0; }
}

/* ============================================================
   v12 · SOLUTIONS — link premise → four pillars (one flow)
   ============================================================ */
.intro-split.flow-intro{ padding-bottom:clamp(36px,5vh,60px); }
.flow-link{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(40px,6vh,76px); }
.flow-link__cap{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.flow-link__line{ width:1px; height:54px; background:linear-gradient(180deg, transparent, var(--gold)); }
.flow-link__chev{ color:var(--gold); font-size:18px; line-height:1; animation:flowbob 2.2s var(--ease) infinite; }
@keyframes flowbob{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(6px); opacity:1; } }
.flow-pillars{ background:var(--char) !important; padding-top:clamp(28px,4vh,52px) !important; }
@media (prefers-reduced-motion: reduce){ .flow-link__chev{ animation:none; } }

/* ============================================================
   v13 · COMPARISON TABLE (product comparison)
   ============================================================ */
.cmp{ margin-top:56px; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; background:linear-gradient(155deg, rgba(34,29,20,0.4), rgba(20,18,13,0.28)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.cmp table{ width:100%; border-collapse:collapse; }
.cmp th, .cmp td{ text-align:left; padding:18px 22px; border-bottom:1px solid var(--line-soft); font-size:14.5px; vertical-align:top; }
.cmp thead th{ background:rgba(192,148,74,0.12); color:var(--gold); font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; }
.cmp tbody tr{ transition:background .4s var(--ease); }
.cmp tbody tr:hover{ background:rgba(192,148,74,0.07); }
.cmp tbody td{ color:var(--muted); line-height:1.5; }
.cmp tbody td:first-child{ font-family:var(--display); font-weight:700; color:var(--cream); }
.cmp tbody tr:last-child td{ border-bottom:none; }
@media (max-width:760px){ .cmp{ overflow-x:auto; } .cmp table{ min-width:640px; } }

/* ============================================================
   v14 · METHOD --linked (Phương pháp page) — tighter linkage
   ============================================================ */
.method--linked .method-steps::before{
  height:3px; opacity:.65; background-size:220% 100%;
  background:linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold-bright) 50%, var(--gold) 88%, transparent);
  animation:flowline 4.5s linear infinite;
}
@keyframes flowline{ 0%{ background-position:220% 0; } 100%{ background-position:-220% 0; } }
.method--linked .mstep__node{ width:74px; height:74px; font-size:25px; }
.method--linked .method-steps::before{ top:37px; }
@media (prefers-reduced-motion: reduce){ .method--linked .method-steps::before{ animation:none; } }

/* ============================================================
   v15 · sub-hero small-text legibility · 5/6-step in one row
   ============================================================ */
/* (#1) darken lower band + strong shadow so breadcrumb/flourish read on bright photos */
.subhero .scrim{ background:linear-gradient(180deg, rgba(12,11,8,0.46) 0%, rgba(12,11,8,0.12) 28%, rgba(12,11,8,0.52) 60%, rgba(12,11,8,0.9) 100%) !important; }
.subhero__inner .breadcrumb{ color:var(--cream); }
.subhero__inner .breadcrumb, .subhero__inner .flourish, .subhero__lead{ text-shadow:0 2px 18px rgba(0,0,0,0.92), 0 1px 4px rgba(0,0,0,0.7) !important; }
.subhero__inner .display{ text-shadow:0 3px 30px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5) !important; }

/* (#2) process grids: 5 steps → one row of 5; 6 steps → 3×2 (no orphan/empty) */
@media (min-width:1081px){
  .steps__grid:has(> :nth-child(5)):not(:has(> :nth-child(6))){ grid-template-columns:repeat(5,1fr); }
  .steps__grid:has(> :nth-child(6)):not(:has(> :nth-child(7))){ grid-template-columns:repeat(3,1fr); }
}
.steps__grid:has(> :nth-child(5)) .step-cell{ padding:34px 22px 38px; }
.steps__grid .step-cell .st{ font-size:19px; }

/* ============================================================
   v16 · GALLERY (project images) — mosaic, no empty space
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(150px,19vw,212px); gap:16px; margin-top:44px; }
.gimg{ position:relative; overflow:hidden; border-radius:var(--r-md); border:1px solid var(--line-soft); }
.gimg img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.3s var(--ease); filter:saturate(1.05) brightness(1.0); }
.gimg:hover img{ transform:scale(1.06); }
.gimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 62%, rgba(10,10,12,0.35)); opacity:0; transition:opacity .45s var(--ease); pointer-events:none; }
.gimg:hover::after{ opacity:1; }
.gimg.g-lg{ grid-column:span 2; grid-row:span 2; }
@media (max-width:640px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; } .gimg.g-lg{ grid-column:span 2; grid-row:span 2; } }

/* ============================================================
   v17 · MOBILE HARDENING
   ============================================================ */
@media (max-width:640px){
  /* heroes: comfortable height, clear of nav */
  .subhero{ min-height:74vh; padding-top:84px; }
  .hero{ min-height:90vh; }
  .hero__inner{ padding-top:92px; padding-bottom:80px; }
  .subhero__inner .display{ font-size:clamp(32px,8.5vw,46px); }
  /* tighter vertical rhythm */
  .section{ padding-top:clamp(54px,10vh,76px); padding-bottom:clamp(54px,10vh,76px); }
  .section.tight{ padding-top:48px; padding-bottom:48px; }
  .sec-head{ gap:16px; margin-bottom:32px; }
  /* method steps stack cleanly */
  .method-steps{ gap:16px; margin-top:40px; }
  .mstep__card{ min-height:0; }
  .method--linked .mstep__node, .mstep__node{ width:58px; height:58px; font-size:21px; }
  /* homepage "what we do" focus bullets → single column */
  .wd-focus{ grid-template-columns:1fr !important; gap:12px !important; }
  /* comparison table: easy horizontal scroll + cue */
  .cmp{ font-size:13px; }
  .cmp th, .cmp td{ padding:14px 16px; }
  /* photoband / final not overly tall */
  .photoband{ min-height:60vh; }
  .final{ min-height:78vh; }
  /* gallery rows shorter */
  .gallery{ grid-auto-rows:120px; gap:10px; }
  /* buttons: full width, stacked, easy tap targets */
  .hero__cta, .final__cta{ width:100%; }
  .hero__cta .btn, .final__cta .btn{ width:100%; justify-content:center; }
  .btn{ --pad:16px 26px; }
  /* eyebrow: avoid over-wide letter-spacing wrap */
  .eyebrow{ letter-spacing:0.28em; }
}

/* ============================================================
   v18 · FIX: submenu jump · sub-hero edge padding · 2-up cards
   ============================================================ */

/* (#1) mega-menu opens with NO positional shift (was jumping on hover) — desktop only */
@media (min-width:1081px){
  .nav__mega{ transform:translateX(-50%) translateY(6px) !important; }
  .nav__item:hover > .nav__mega{ transform:translateX(-50%) translateY(6px) !important; }
}
/* mobile drawer: solid backdrop so the hero doesn't bleed through */
@media (max-width:1080px){
  .nav.open .nav__links{ background:rgba(13,11,7,0.99) !important; }
  /* force the mega submenu flush in the drawer (no centering transform/offset) */
  .nav.open .nav__mega{
    position:static !important; left:auto !important; right:auto !important;
    transform:none !important; min-width:0 !important; width:100% !important;
    grid-template-columns:1fr !important; gap:0 !important; padding:2px 0 10px 18px !important;
    box-shadow:none !important; border:none !important; background:none !important;
  }
  .nav.open .nav__mega::before{ display:none !important; }
}

/* (#2) sub-hero content keeps side gutter (was touching screen edge on mobile),
        and aligns with the rest of the page content */
.subhero__inner{
  max-width:var(--maxw) !important;
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
  margin-left:auto; margin-right:auto;
}
.subhero__lead{ max-width:640px; }

/* (#3) mobile: cards 2 per row for an at-a-glance overview (not 1-by-1) */
@media (max-width:600px){
  .cardgrid, .pillar-grid, .insight-grid, .news-grid, .steps__grid, .method-steps{
    grid-template-columns:1fr 1fr !important; gap:12px !important;
  }
  .gcard__body{ padding:18px 15px !important; }
  .gcard__t{ font-size:16.5px; }
  .gcard__d{ font-size:12.5px; line-height:1.5; }
  .gcard__k{ font-size:10px; letter-spacing:0.18em; }
  .gcard .gm{ }
  .pillar{ min-height:280px; }
  .pillar__t{ font-size:17px; }
  .pillar__d{ font-size:12.5px; }
  .pillar__body{ padding:20px 16px 22px; }
  .art__t{ font-size:15.5px; }
  .art__cat{ margin-top:14px; }
  .step-cell{ padding:24px 16px 26px; }
  .step-cell .st{ font-size:16px; }
  .step-cell .sd{ font-size:12.5px; }
  .method-steps{ margin-top:34px; }
  .mstep__node, .method--linked .mstep__node{ width:48px; height:48px; font-size:17px; }
  .mstep__card{ padding:18px 14px; }
  .mstep__t{ font-size:16px; }
  .mstep__d{ font-size:12.5px; line-height:1.5; }
  .mstep__k{ font-size:10px; }
  .sec-head h2{ font-size:clamp(26px,7.6vw,36px); }
}

/* ============================================================
   v10 · nav legibility · line-break balance · METHOD (1-view)
   ============================================================ */

/* (#1) dark layer beneath nav over the hero (initial state, fades on scroll) */
.nav::before{
  content:""; position:absolute; inset:0 0 auto 0; height:160px; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(8,7,5,0.66) 0%, rgba(8,7,5,0.30) 48%, transparent 100%);
  opacity:1; transition:opacity .5s var(--ease);
}
.nav.scrolled::before{ opacity:0; }

/* (#4) balanced line wrapping for headings (no ragged orphan lines) */
h1, h2, h3, .display, .h2, .hero__title, .final h2, .subhero__inner .display,
.gcard__t, .pillar__t, .frow h3, .cross-card .ct, .art__t{ text-wrap:balance; }
.lead, p, .subhero__lead, .gcard__d, .frow p{ text-wrap:pretty; }

/* (#3) METHOD — all 4 steps in one view, visually elevated */
.method{ position:relative; overflow:hidden;
  background:radial-gradient(80% 70% at 50% -10%, rgba(192,148,74,0.12), transparent 60%), linear-gradient(180deg,#100F0B 0%, #14120C 100%); }
.method::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--foil); opacity:.85; }
.method__inner{ position:relative; z-index:2; }
.method-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px; position:relative; }
.method-steps::before{ content:""; position:absolute; top:34px; left:9%; right:9%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 14%, var(--gold) 86%, transparent); opacity:.45; }
.mstep{ position:relative; }
.mstep__node{ width:68px; height:68px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:23px; color:#16110A;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow:0 14px 36px -10px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.4); position:relative; z-index:2; }
.mstep__card{ margin-top:26px; padding:28px 24px 30px; border-radius:var(--r-md); min-height:208px;
  background:linear-gradient(155deg, rgba(40,34,23,0.56), rgba(20,18,13,0.36));
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-bord); box-shadow:0 24px 60px -36px rgba(0,0,0,.7), inset 0 1px 0 rgba(246,241,232,.08);
  transition:transform .6s var(--ease), border-color .6s var(--ease); }
.mstep:hover .mstep__card{ transform:translateY(-6px); border-color:rgba(192,148,74,.5); }
.mstep__k{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.mstep__t{ font-family:var(--display); font-weight:700; font-size:21px; margin:10px 0 0; line-height:1.18; }
.mstep__d{ color:var(--muted); font-size:14px; margin:13px 0 0; line-height:1.6; }
@media (max-width:980px){ .method-steps{ grid-template-columns:repeat(2,1fr); } .method-steps::before{ display:none; } }
@media (max-width:560px){ .method-steps{ grid-template-columns:1fr; } }


/* ============================================================
   v8 — DATA TABLE · DISCLAIMER · RED-FLAG · PROOF STRIP
   Glass-styled to match the polished design system.
   Used by: AIA illustrations, BĐS metrics, legal notes.
   ============================================================ */
.dtable-wrap{
  margin-top:44px; overflow-x:auto;
  background:var(--glass-bg); backdrop-filter:blur(13px) saturate(1.15); -webkit-backdrop-filter:blur(13px) saturate(1.15);
  border:1px solid var(--glass-bord); border-radius:var(--r-md);
  box-shadow:var(--glass-shadow);
}
.dtable{ width:100%; border-collapse:collapse; min-width:600px; font-size:14.5px; }
.dtable th,.dtable td{ padding:16px 22px; text-align:right; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.dtable tbody tr:last-child td{ border-bottom:0; }
.dtable thead th{
  background:linear-gradient(180deg, rgba(192,148,74,0.14), rgba(192,148,74,0.05));
  color:var(--gold-bright); font-family:var(--serif); font-weight:500; letter-spacing:.02em;
}
.dtable th:first-child,.dtable td:first-child{ text-align:left; color:var(--cream); font-family:var(--serif); }
.dtable tbody tr{ transition:background .4s var(--ease); }
.dtable tbody tr:hover{ background:rgba(246,241,232,0.04); }
.dtable td.g{ color:var(--cream); }
.dtable td.ng{ color:var(--gold-bright); }
.dtable .tot{ color:var(--gold); font-family:var(--serif); }
.dtable-legend{ display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--dim); }
.dtable-legend span{ display:inline-flex; align-items:center; gap:8px; }
.dtable-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.dtable-legend i.g{ background:var(--cream); }
.dtable-legend i.ng{ background:var(--gold-bright); }

.disc{
  margin-top:30px; padding:18px 24px; border-left:2px solid var(--gold-deep);
  background:rgba(192,148,74,0.06); border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--dim); font-size:13px; line-height:1.68;
}
.disc strong{ color:var(--muted); font-weight:500; }

.flag{
  margin-top:28px; padding:26px 30px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(155,114,51,0.12), rgba(0,0,0,0));
}
.flag h4{ font-family:var(--serif); font-size:17px; margin:0 0 8px; color:var(--gold-bright); }
.flag p{ margin:0; color:var(--muted); font-size:14px; line-height:1.65; }

.proofstrip{ display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:26px; }
.proofstrip .pi{ display:flex; flex-direction:column; gap:2px; }
.proofstrip .pv{ font-family:var(--display); font-weight:700; font-size:clamp(19px,2vw,25px); color:var(--gold-bright); letter-spacing:-.01em; }
.proofstrip .pl{ font-size:12px; color:var(--muted); letter-spacing:.02em; }
.proofstrip .pi + .pi{ padding-left:30px; border-left:1px solid var(--line-soft); }

/* light-section variants */
.section--light .dtable-wrap{ background:rgba(255,255,255,0.5); border-color:rgba(27,21,16,0.12); box-shadow:0 20px 50px -30px rgba(0,0,0,0.3); }
.section--light .dtable thead th{ background:rgba(192,148,74,0.16); color:var(--ink); }
.section--light .dtable th:first-child,.section--light .dtable td:first-child{ color:var(--ink); }
.section--light .dtable td.g{ color:var(--ink); }
.section--light .dtable td.ng{ color:#8A6A22; }
.section--light .dtable .tot{ color:#6E5216; }
.section--light .disc{ color:var(--ink-muted); background:rgba(192,148,74,0.10); }
.section--light .disc strong{ color:var(--ink); }
.section--light .proofstrip .pv{ color:#6E5216; }
.section--light .proofstrip .pl{ color:var(--ink-muted); }

/* ============================================================
   v9 — ASIA GEO MAP (6 pins) · OFFICE GALLERY CAPTION · CMP tweaks
   About page: Global Footprint per brief (map + gallery below)
   ============================================================ */
.geomap{
  position:relative; margin-top:52px; aspect-ratio:10/7; overflow:hidden;
  border:1px solid var(--glass-bord); border-radius:var(--r-lg);
  background:
    radial-gradient(58% 70% at 62% 44%, rgba(192,148,74,0.13), transparent 68%),
    radial-gradient(40% 50% at 30% 75%, rgba(192,148,74,0.06), transparent 70%),
    linear-gradient(165deg, #191611, #12100C 60%, #100E0A);
  box-shadow:var(--glass-shadow);
}
.geomap svg{ position:absolute; inset:0; width:100%; height:100%; }
.gpin{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:9px; white-space:nowrap; z-index:2; }
.gpin i{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; box-shadow:0 0 12px rgba(192,148,74,0.8); }
.gpin i::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(192,148,74,0.55); animation:gpulse 2.6s var(--ease) infinite; }
@keyframes gpulse{ 0%{ transform:scale(.55); opacity:.9; } 70%{ transform:scale(1.5); opacity:0; } 100%{ transform:scale(1.5); opacity:0; } }
.gpin span{ font-size:12.5px; letter-spacing:.04em; color:var(--muted); text-shadow:0 2px 8px rgba(0,0,0,.8); }
.gpin .lb-l{ order:-1; } /* label bên trái pin */
.gpin.lb-b{ flex-direction:column; gap:6px; transform:translate(-50%,-6px); text-align:center; }
.gpin--hq i{ width:13px; height:13px; background:var(--gold-bright); box-shadow:0 0 18px rgba(240,226,166,0.9); }
.gpin--hq span, .gpin--vn span{ color:var(--gold-bright); font-family:var(--display); font-weight:700; font-size:13px; }
.gpin--vn i{ width:11px; height:11px; background:var(--gold-bright); }
@media (max-width:640px){
  .geomap{ aspect-ratio:5/4; border-radius:var(--r-md); }
  .gpin span{ font-size:10px; }
  .gpin--hq span,.gpin--vn span{ font-size:10.5px; }
}

.office-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(210px,27vw,320px); }
.office-gallery figure{ margin:0; }
.gcap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:38px 22px 16px;
  font-size:13px; letter-spacing:.02em; color:var(--cream);
  background:linear-gradient(180deg, transparent, rgba(10,9,6,0.82));
}
.gcap b{ color:var(--gold-bright); font-weight:600; }
@media (max-width:640px){ .office-gallery{ grid-template-columns:1fr; grid-auto-rows:220px; } }

/* cmp: cột Premium Office được nhấn, cột giao dịch dịu xuống */
.cmp td.tx{ font-family:var(--sans); font-weight:400; color:var(--dim); }
.cmp td.po{ color:var(--gold-bright); }

/* ============================================================
   v10 — REAL WORLD MAP in geomap · GOLD HOVER on principles
   ============================================================ */
/* Bản đồ thật: ảnh NASA equirectangular, crop đúng khung 70–145°Đ / 55°B–10°N
   nên aspect phải là 75/65 để pin đặt theo %% tọa độ không lệch. */
.geomap{ aspect-ratio:75/65; }
@media (max-width:640px){ .geomap{ aspect-ratio:75/65; } }
.geomap__world{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.geomap__world image{ filter:grayscale(.25) sepia(.45) saturate(.68) brightness(.5) contrast(1.07); }
.geomap__arcs{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.geomap::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 70% at 60% 45%, rgba(192,148,74,0.13), transparent 65%),
    linear-gradient(180deg, rgba(16,14,10,0.38), transparent 32%, transparent 68%, rgba(16,14,10,0.5)),
    radial-gradient(130% 130% at 50% 50%, transparent 58%, rgba(16,14,10,0.6) 100%);
}
.gpin{ z-index:3; }

/* Bốn nguyên tắc: hover nền chuyển vàng, chữ chuyển ink để giữ độ tương phản */
.pointlist--gold .point{ cursor:default; }
.pointlist--gold .point h4, .pointlist--gold .point p, .pointlist--gold .point .pn{ transition:color .45s var(--ease); }
.pointlist--gold .point:hover{ background:linear-gradient(125deg, #C89A50 0%, #E3C078 55%, #D2AF66 100%); }
.pointlist--gold .point:hover h4{ color:var(--ink); }
.pointlist--gold .point:hover p{ color:var(--ink-muted); }
.pointlist--gold .point:hover .pn{ color:var(--ink); }
/* label phía trên pin (tránh đè nhau ở cụm Guangdong–Hong Kong) */
.gpin.lb-t{ flex-direction:column-reverse; gap:4px; transform:translate(-50%,calc(-100% + 5px)); text-align:center; }
/* Anchor ĐÚNG vào chấm (không phải giữa cụm chấm+chữ) để pin trùng tọa độ thật */
.gpin{ transform:translate(-5px,-50%); }
.gpin.lb-l{ transform:translate(calc(-100% + 5px),-50%); }

/* ============================================================
   v11 — DARK-SURFACE COMPONENTS INSIDE A CREAM SECTION
   .section--light redefines --cream/--muted to ink tones, so any card
   that keeps its own dark background renders dark text on a dark card.
   These components must flip to a light surface there.
   ============================================================ */
.section--light .pointlist{ background:rgba(27,21,16,0.10); border-color:rgba(27,21,16,0.10); }
.section--light .point{ background:rgba(255,253,248,0.66); }
.section--light .point:hover{ background:rgba(255,253,248,0.92); }
.section--light .point h4{ color:var(--ink); }
.section--light .point p{ color:var(--ink-muted); }
.section--light .point .pn{ color:var(--gold-deep); }
/* hover vàng vẫn thắng, chữ giữ ink */
.section--light .pointlist--gold .point:hover{ background:linear-gradient(125deg, #C89A50 0%, #E3C078 55%, #D2AF66 100%); }
.section--light .pointlist--gold .point:hover h4,
.section--light .pointlist--gold .point:hover .pn{ color:var(--ink); }
.section--light .pointlist--gold .point:hover p{ color:var(--ink-muted); }

.section--light .rung{ background:rgba(255,253,248,0.62); border-color:rgba(27,21,16,0.10); }
.section--light .rung .rk{ color:var(--gold-deep); }
.section--light .rung .rd{ color:var(--ink-muted); }

.section--light .tier{ background:linear-gradient(155deg, rgba(255,253,248,0.80), rgba(247,242,233,0.56)); border-color:rgba(27,21,16,0.10); }
.section--light .tier.feat{ background:linear-gradient(180deg, rgba(246,234,206,0.92), rgba(255,253,248,0.72)); border-color:rgba(192,148,74,0.42); }
.section--light .tier__k{ color:var(--gold-deep); }
.section--light .tier__name{ color:var(--ink); }
.section--light .tier__min{ color:var(--ink-muted); }
.section--light .tier__min b{ color:var(--ink); }
.section--light .tier__line{ background:rgba(27,21,16,0.12); }
.section--light .tier__feats li{ color:var(--ink-muted); }
.section--light .tier:hover{ box-shadow:0 30px 60px -34px rgba(60,46,20,0.45); }
/* body text trên nền vàng hover: đậm hơn --ink-muted để đạt WCAG AA (>=4.5)
   kể cả trên đầu đậm nhất của gradient (#C89A50) */
.pointlist--gold .point:hover p,
.section--light .pointlist--gold .point:hover p{ color:#3E3628; }
/* .rk là 18px/700 → chưa đạt ngưỡng "large text", cần >=4.5 nên dùng tông vàng đậm hơn */
.section--light .rung .rk{ color:#7A5A22; }
/* số La Mã 15px trong section kem: cùng tông vàng đậm để đạt AA */
.section--light .point .pn{ color:#7A5A22; }

/* ============================================================
   v14 — GEOMAP: dải ngang, không chiếm trọn màn hình
   Crop rộng hơn (50–160°Đ / 48°B–12°N) => tỷ lệ 110/60 (1.83) thay vì 1.15.
   max-width theo vh nên chiều cao luôn <= ~50vh mà KHÔNG méo ảnh.
   Outer svg dùng preserveAspectRatio="none" => pin bám đúng %% ở mọi tỷ lệ.
   ============================================================ */
.geomap{ aspect-ratio:110/60; max-width:min(100%, 92vh); margin-left:auto; margin-right:auto; }
@media (max-width:640px){ .geomap{ aspect-ratio:100/78; max-width:100%; } }
/* mobile: label Vietnam dài, đưa xuống dưới pin để không chạm mép phải */
@media (max-width:640px){
  .gpin--vn{ flex-direction:column; gap:5px; transform:translate(-50%,-5px); text-align:center; }
}
/* .tier__k là 12px uppercase trong section kem -> cần vàng đậm hơn để đạt AA */
.section--light .tier__k{ color:#7A5A22; }

/* ============================================================
   v17 — STEP NAV (sticky) · CHIPLIST · CALLOUT · STEP SPINE
   Trang Phương pháp: 4 bước phải đọc liền mạch nên KHÔNG dùng tab
   (tab giấu 3/4 nội dung khỏi người đọc lẫn công cụ tìm kiếm).
   Thay bằng thanh bước dính + đường nối dọc để thấy rõ tiến trình.
   ============================================================ */
.stepnav{
  position:sticky; top:64px; z-index:40; margin:0 0 8px;
  background:rgba(21,20,15,0.72); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.stepnav__in{ display:flex; gap:4px; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); overflow-x:auto; scrollbar-width:none; }
.stepnav__in::-webkit-scrollbar{ display:none; }
.stepnav a{
  flex:1 1 0; min-width:150px; display:flex; align-items:center; gap:11px;
  padding:15px 14px; border-bottom:2px solid transparent; white-space:nowrap;
  color:var(--dim); font-size:13.5px; letter-spacing:.01em; transition:color .4s var(--ease), border-color .4s var(--ease);
}
.stepnav a b{ font-family:var(--display); font-weight:700; font-size:12px; color:var(--gold-deep); transition:color .4s var(--ease); }
.stepnav a:hover{ color:var(--cream); }
.stepnav a.is-active{ color:var(--cream); border-bottom-color:var(--gold); }
.stepnav a.is-active b{ color:var(--gold-bright); }
@media (max-width:860px){ .stepnav{ top:56px; } .stepnav a{ min-width:132px; font-size:12.5px; padding:12px 10px; } }

/* đường nối dọc giữa các bước */
.stepsec{ position:relative; scroll-margin-top:132px; }
.stepsec::before{
  content:""; position:absolute; left:50%; top:0; width:1px; height:clamp(28px,5vh,54px);
  background:linear-gradient(180deg, var(--gold), transparent); opacity:.55;
}
.stepsec:first-of-type::before{ display:none; }

/* chip list: Activities / Strategy choices — các mục ngắn cách nhau bằng • */
.chiplist{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chiplist span{
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px;
  border:1px solid var(--line); border-radius:999px; background:rgba(192,148,74,0.06);
  color:var(--muted); font-size:13.5px;
}
.chiplist span::before{ content:"✦"; color:var(--gold); font-size:10px; }
.section--light .chiplist span{ background:rgba(192,148,74,0.10); border-color:rgba(27,21,16,0.14); color:var(--ink-muted); }
.section--light .chiplist span::before{ color:#7A5A22; }

/* callout: Scenario thinking / Markets / Approval point */
.callout{
  margin-top:30px; padding:24px 28px; border-radius:var(--r-md);
  border:1px solid var(--glass-bord); background:var(--glass-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.callout h4{ font-family:var(--display); font-weight:700; font-size:14px; margin:0 0 9px; color:var(--gold-bright); letter-spacing:.02em; }
.callout p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.65; }
.callout--gate{ border-color:rgba(192,148,74,0.42); background:linear-gradient(155deg, rgba(192,148,74,0.14), rgba(192,148,74,0.04)); }
.section--light .callout{ background:rgba(255,253,248,0.62); border-color:rgba(27,21,16,0.12); }
.section--light .callout h4{ color:#7A5A22; }
.section--light .callout p{ color:var(--ink-muted); }

/* deliverable: nhấn đầu ra của mỗi bước */
.deliv{
  margin-top:30px; padding:22px 26px; border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0; background:linear-gradient(90deg, rgba(192,148,74,0.13), rgba(192,148,74,0.02));
}
.deliv b{ display:block; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.deliv p{ margin:0; color:var(--cream); font-size:15px; line-height:1.62; }
.section--light .deliv{ background:linear-gradient(90deg, rgba(192,148,74,0.2), rgba(192,148,74,0.04)); }
.section--light .deliv b{ color:#7A5A22; }
.section--light .deliv p{ color:var(--ink); }

/* so sánh 2 cách tiếp cận — cột phải là kết quả của việc CÓ quy trình */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; align-items:stretch; }
.vs__col{ padding:30px 30px 32px; border-radius:var(--r-md); border:1px solid var(--line-soft); background:rgba(28,24,17,0.30); }
.vs__col h4{ font-family:var(--display); font-weight:700; font-size:17px; margin:0 0 4px; color:var(--muted); }
.vs__col .vs__cap{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.vs__col ul{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.vs__col li{ display:flex; gap:11px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.vs__col li::before{ content:"—"; color:var(--dim); flex:none; }
.vs__col--good{ border-color:rgba(192,148,74,0.44); background:linear-gradient(155deg, rgba(192,148,74,0.15), rgba(192,148,74,0.03)); }
.vs__col--good h4{ color:var(--gold-bright); }
.vs__col--good .vs__cap{ color:var(--gold); }
.vs__col--good li{ color:var(--cream); }
.vs__col--good li::before{ content:"✓"; color:var(--gold); font-weight:700; }
.vs__note{ grid-column:1/-1; margin:4px 0 0; text-align:center; font-size:13.5px; color:var(--dim); }
.section--light .vs__col{ background:rgba(255,253,248,0.55); border-color:rgba(27,21,16,0.12); }
.section--light .vs__col h4{ color:var(--ink-muted); }
.section--light .vs__col li{ color:var(--ink-muted); }
.section--light .vs__col--good{ background:linear-gradient(155deg, rgba(246,234,206,0.9), rgba(255,253,248,0.6)); border-color:rgba(192,148,74,0.5); }
.section--light .vs__col--good h4{ color:#6E5216; }
.section--light .vs__col--good .vs__cap{ color:#7A5A22; }
.section--light .vs__col--good li{ color:var(--ink); }
.section--light .vs__col--good li::before{ color:#7A5A22; }
@media (max-width:760px){ .vs{ grid-template-columns:1fr; } }

/* ============================================================
   v18 — CITY TABS · PROJECT GRID · SPEC TABLE · EMPTY STATE
   Brief BĐS Úc mô tả rõ: City tabs -> City intro panel -> Project grid,
   dùng chung trường City; thành phố chưa có dự án hiện empty state.
   ============================================================ */
.citytabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:44px; }
.citytabs button{
  font:inherit; cursor:pointer; padding:13px 24px; border-radius:999px;
  border:1px solid var(--line-soft); background:rgba(28,24,17,0.35); color:var(--muted);
  font-size:14px; letter-spacing:.01em; transition:all .4s var(--ease);
}
.citytabs button:hover{ border-color:var(--line); color:var(--cream); }
.citytabs button[aria-selected="true"]{
  background:linear-gradient(125deg, #C89A50, #E3C078 60%, #D2AF66); border-color:transparent; color:var(--ink); font-weight:600;
}
.cityintro{ margin-top:34px; }
.cityintro h3{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.2vw,26px); margin:0 0 14px; }
.cityintro p{ color:var(--muted); font-size:15px; line-height:1.7; margin:0; max-width:820px; }
.cityhl{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.cityhl span{ font-size:12px; letter-spacing:.04em; color:var(--gold); border:1px solid var(--line); padding:7px 14px; border-radius:999px; }
.propgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
@media (max-width:980px){ .propgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .propgrid{ grid-template-columns:1fr; } }
.prop__price{ font-family:var(--display); font-weight:700; color:var(--gold-bright); font-size:17px; margin-top:14px; }
.prop__cta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.prop__cta a{ font-size:12px; letter-spacing:.02em; color:var(--cream); border:1px solid var(--glass-bord); background:rgba(246,241,232,0.06); padding:8px 14px; border-radius:999px; transition:all .35s var(--ease); }
.prop__cta a:hover{ border-color:var(--gold); color:var(--gold); }
.emptystate{
  margin-top:34px; padding:44px 34px; text-align:center; border-radius:var(--r-md);
  border:1px dashed var(--line); background:rgba(28,24,17,0.28);
}
.emptystate p{ margin:0 0 20px; color:var(--muted); font-size:15px; }
.emptystate .btn{ margin:0 6px; }
/* bảng thông số/so sánh gọn */
.spec{ margin-top:30px; display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; }
.spec__row{ display:grid; grid-template-columns:210px 1fr; gap:20px; background:var(--bg); padding:15px 22px; }
.spec__row b{ color:var(--gold); font-weight:500; font-size:13px; letter-spacing:.02em; }
.spec__row span{ color:var(--muted); font-size:14px; line-height:1.6; }
@media (max-width:640px){ .spec__row{ grid-template-columns:1fr; gap:5px; } }
.section--light .spec{ background:rgba(27,21,16,0.10); border-color:rgba(27,21,16,0.10); }
.section--light .spec__row{ background:rgba(255,253,248,0.66); }
.section--light .spec__row b{ color:#7A5A22; }
.section--light .spec__row span{ color:var(--ink-muted); }
.section--light .citytabs button{ background:rgba(255,253,248,0.6); border-color:rgba(27,21,16,0.12); color:var(--ink-muted); }
.section--light .cityintro p{ color:var(--ink-muted); }
.section--light .cityhl span{ color:#7A5A22; border-color:rgba(27,21,16,0.16); }
/* thẻ dự án trong .propgrid mang nhiều nội dung hơn (giá, mô tả, 3 CTA) nên
   cần cao hơn min-height 300px mặc định, và chừa chỗ cho badge góc trên */
.propgrid .prop{ min-height:520px; border-radius:var(--r-md); }
.propgrid .prop::after{ background:linear-gradient(180deg, rgba(10,10,12,0) 12%, rgba(10,10,12,0.72) 46%, rgba(10,10,12,0.96) 100%); }
.propgrid .prop .prop__body{ padding:74px 26px 26px; }
.propgrid .prop .prop__t{ font-size:clamp(20px,2.1vw,25px); }
.propgrid .prop .gcard__d{ font-size:13.5px; line-height:1.6; color:var(--muted); }
@media (max-width:640px){ .propgrid .prop{ min-height:470px; } }
/* .prop gốc thiết kế cho ảnh full + vài dòng chữ ở đáy. Thẻ dự án BĐS mang
   giá, mô tả và 3 CTA nên chữ tràn lên vùng ảnh sáng -> tách ảnh / phần chữ. */
.propgrid .prop{ display:block; min-height:0; background:var(--panel); }
.propgrid .prop::after{ display:none; }
.propgrid .prop .pm{ position:relative; inset:auto; height:208px; }
.propgrid .prop .prop__flag{ top:14px; left:14px; }
.propgrid .prop .prop__body{ position:relative; padding:22px 24px 26px; }
.propgrid .prop .prop__t{ margin-top:10px; }
.propgrid .prop .prop__meta{ margin-top:12px; }
@media (max-width:640px){ .propgrid .prop .pm{ height:190px; } }

/* ============================================================
   v22 — FIX: proofstrip xuống dòng · stepnav vị trí/ẩn · step footer
          gọn lại · steps grid theo số ô · quote kết
   ============================================================ */
/* 1) Hero 4 bước: dùng grid 4 cột nên không rớt dòng lẻ 3+1 */
.proofstrip--steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.proofstrip--steps .pi{ padding:0 18px; border-left:1px solid var(--line-soft); }
.proofstrip--steps .pi:first-child{ padding-left:0; border-left:0; }
.proofstrip--steps .pv{ font-size:clamp(15px,1.5vw,19px); line-height:1.25; }
.proofstrip--steps .pl{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
a.pi{ transition:opacity .35s var(--ease); }
a.pi:hover{ opacity:.75; }
@media (max-width:760px){
  .proofstrip--steps{ grid-template-columns:repeat(2,1fr); gap:16px 0; }
  .proofstrip--steps .pi:nth-child(odd){ padding-left:0; border-left:0; }
}

/* 2) Thanh bước: nằm dưới header cố định, có đệm, và tự ẩn khi đã qua hết 4 bước */
.stepnav{ top:74px; transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; }
.stepnav.is-done{ opacity:0; visibility:hidden; transform:translateY(-12px); pointer-events:none; }
.stepnav a{ padding:16px 14px 14px; }
@media (max-width:860px){ .stepnav{ top:66px; } }

/* 3) Chân mỗi bước: gom thành MỘT khối có nhãn thống nhất, lặp lại y hệt ở cả
      4 bước để người đọc nhận ra quy luật thay vì thấy 3 kiểu hộp rời rạc */
.stepfoot{ margin-top:38px; border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden; }
.stepfoot__row{ display:grid; grid-template-columns:150px 1fr; gap:22px; padding:22px 26px; border-top:1px solid var(--line-soft); }
.stepfoot__row:first-child{ border-top:0; }
.stepfoot__lb{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); padding-top:3px; }
.stepfoot__bd{ color:var(--muted); font-size:14.5px; line-height:1.68; }
.stepfoot__bd b{ color:var(--cream); font-weight:600; }
.stepfoot__row--out{ background:linear-gradient(90deg, rgba(192,148,74,0.12), rgba(192,148,74,0.02)); }
.stepfoot__row--out .stepfoot__lb{ color:var(--gold); }
.stepfoot__row--out .stepfoot__bd{ color:var(--cream); font-size:15px; }
.stepfoot .chiplist{ margin-top:0; }
.stepfoot .chiplist span{ padding:8px 14px; font-size:13px; }
@media (max-width:760px){ .stepfoot__row{ grid-template-columns:1fr; gap:10px; padding:20px 20px; } }
.section--light .stepfoot{ border-color:rgba(27,21,16,0.12); }
.section--light .stepfoot__row{ border-top-color:rgba(27,21,16,0.10); }
.section--light .stepfoot__lb{ color:#7A5A22; }
.section--light .stepfoot__bd{ color:var(--ink-muted); }
.section--light .stepfoot__bd b{ color:var(--ink); }
.section--light .stepfoot__row--out{ background:linear-gradient(90deg, rgba(192,148,74,0.2), rgba(192,148,74,0.04)); }
.section--light .stepfoot__row--out .stepfoot__bd{ color:var(--ink); }

/* 4) Lưới bước tự khớp số ô (3 bước -> 3 cột, không để ô trống) */
.steps__grid{ grid-template-columns:repeat(4,1fr); }
.steps__grid:has(> :last-child:nth-child(3)){ grid-template-columns:repeat(3,1fr); }
.steps__grid:has(> :last-child:nth-child(2)){ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .steps__grid, .steps__grid:has(> :last-child:nth-child(3)){ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps__grid, .steps__grid:has(> :last-child:nth-child(3)), .steps__grid:has(> :last-child:nth-child(2)){ grid-template-columns:1fr; } }

/* 5) Câu kết dạng quote, giới hạn bề ngang để không rớt dòng lủng củng */
.endquote .quoteband__q{ max-width:26ch; margin-inline:auto; text-wrap:balance; }
@media (max-width:760px){ .endquote .quoteband__q{ max-width:none; } }

/* ============================================================
   v26 — .gcard trong section kem (lỗi cùng loại với .point/.rung/.tier
   nhưng bị sót vì lần trước tôi chỉ quét đúng 3 selector đó)
   + title không rớt dòng + hàng 4 cột / 3 cột gọn
   ============================================================ */
.section--light .gcard{ background:rgba(255,253,248,0.72); border-color:rgba(27,21,16,0.10); }
.section--light .gcard__t{ color:var(--ink); }
.section--light .gcard__d{ color:var(--ink-muted); }
.section--light .gcard__k{ color:#7A5A22; }
.section--light .gcard__stat{ color:var(--ink); }
.section--light .gcard .topline-card{ background:linear-gradient(90deg, #7A5A22, transparent); }

/* breadcrumb "/" quá mờ trên nền tối */
.breadcrumb .sep{ color:var(--muted); }

/* nhãn bước không được rớt dòng: nới cột và cho phép co chữ */
.rung{ grid-template-columns:minmax(230px, 300px) 1fr; }
.rung .rk{ white-space:nowrap; font-size:clamp(15px,1.5vw,19px); }
@media (max-width:860px){ .rung{ grid-template-columns:1fr; } .rung .rk{ white-space:normal; } }

/* tiêu đề thẻ KPI/loại hình không rớt dòng lẻ */
.cardgrid--4{ grid-template-columns:repeat(4,1fr); }
.cardgrid--4 .gcard__t{ font-size:clamp(18px,1.7vw,23px); }
@media (max-width:1100px){ .cardgrid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cardgrid--4{ grid-template-columns:1fr; } }

/* 3 ghi chú thị trường xếp 1 hàng 3 cột cho gọn */
.calloutrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.calloutrow .callout{ margin-top:0; }
@media (max-width:980px){ .calloutrow{ grid-template-columns:1fr; } }
/* bản đồ Úc: crop 108-158°Đ / 8-46°N -> tỉ lệ 50/38 */
.geomap--au{ aspect-ratio:50/38; max-width:min(100%, 78vh); margin-left:auto; margin-right:auto; }
@media (max-width:640px){ .geomap--au{ aspect-ratio:50/44; max-width:100%; } }
/* eyebrow 12px và text --dim trong section kem chưa đạt AA -> đậm thêm */
.section--light .eyebrow{ color:#7A5A22; }
.section--light{ --dim:#6B6152; }
/* Design polish cố tình xếp cardgrid 4 thẻ thành 2x2 qua selector
   .cardgrid:has(> :nth-child(4)):not(:has(> :nth-child(5))) — specificity (0,3,0).
   Muốn 1 hàng 4 cột phải ghi đè ở đúng tầng đó. */
@media (min-width:1081px){
  .cardgrid.cardgrid--4:has(> :nth-child(4)):not(:has(> :nth-child(5))){ grid-template-columns:repeat(4,1fr); }
}
/* cột hẹp hơn khi xếp 4 -> giảm cỡ tiêu đề để không rớt dòng */
.cardgrid--4 .gcard__t{ font-size:clamp(15px,1.35vw,18px); line-height:1.25; }
.tier__name{ font-size:clamp(22px,2.2vw,28px); }
/* nhãn song ngữ dài (Townhouse / Nhà liền kề) cân dòng thay vì mồ côi chữ */
.gcard__t, .h2{ text-wrap:balance; }
/* bản đồ định vị Dubai trong bối cảnh Á–Âu–Phi: crop 10°T–120°Đ / 60°B–10°N */
.geomap--gulf{ aspect-ratio:130/70; max-width:min(100%, 88vh); margin:36px auto 0; }
@media (max-width:640px){ .geomap--gulf{ aspect-ratio:130/86; max-width:100%; } }

/* ============================================================
   v32 — BIỂU ĐỒ MINH HỌA (AIA)
   HK: stacked columns guaranteed/bonus + đường tổng phí
   SG: 3 đường guaranteed / illustrated / death benefit
   ============================================================ */
.chart{ margin-top:36px; padding:26px 26px 18px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:rgba(28,24,17,0.30); }
.chart__plot{ position:relative; display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:clamp(14px,3vw,40px); align-items:end; height:270px; padding:0 4px; }
.chart__col{ position:relative; display:flex; flex-direction:column-reverse; justify-content:flex-start; height:100%; }
.chart__bar{ display:flex; flex-direction:column-reverse; width:100%; border-radius:5px 5px 0 0; overflow:hidden; }
.chart__seg{ width:100%; }
.chart__seg--g{ background:var(--cream); }
.chart__seg--r{ background:var(--gold-bright); }
.chart__seg--t{ background:var(--gold); }
.chart__x{ display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:clamp(14px,3vw,40px); margin-top:12px; padding:0 4px; }
.chart__x span{ text-align:center; font-size:12px; color:var(--muted); }
.chart__ref{ position:absolute; left:0; right:0; border-top:1px dashed rgba(246,241,232,0.45); }
.chart__ref b{ position:absolute; right:0; top:-19px; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.02em; }
.chart__legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; font-size:12.5px; color:var(--muted); }
.chart__legend span{ display:inline-flex; align-items:center; gap:8px; }
.chart__legend i{ width:11px; height:11px; border-radius:3px; }
.chart__legend i.g{ background:var(--cream); } .chart__legend i.r{ background:var(--gold-bright); } .chart__legend i.t{ background:var(--gold); }
.chart__legend i.l1{ background:var(--cream); } .chart__legend i.l2{ background:var(--gold-bright); } .chart__legend i.l3{ background:var(--gold-deep); }
.chart svg{ width:100%; height:270px; display:block; }
.section--light .chart{ background:rgba(255,253,248,0.6); border-color:rgba(27,21,16,0.12); }
.section--light .chart__x span, .section--light .chart__legend{ color:var(--ink-muted); }
.section--light .chart__seg--g{ background:#3E3628; }
.section--light .chart__legend i.g, .section--light .chart__legend i.l1{ background:#3E3628; }
.section--light .chart__ref{ border-top-color:rgba(27,21,16,0.4); }
.section--light .chart__ref b{ color:var(--ink-muted); }
@media (max-width:560px){ .chart{ padding:20px 16px 14px; } .chart__plot, .chart svg{ height:210px; } .chart__x span{ font-size:11px; } }
/* gallery văn phòng dưới bản đồ (brief: "below it, a gallery") */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:30px; }
.gallery figure{ margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-soft); background:var(--panel); }
.gallery img{ width:100%; height:230px; object-fit:cover; display:block; }
.gallery figcaption{ padding:14px 18px; font-size:13px; color:var(--muted); }
@media (max-width:640px){ .gallery{ grid-template-columns:1fr; } .gallery img{ height:190px; } }

/* ============================================================
   v33 — HERO: nền tối cục bộ sau khối chữ
   Các lớp polish đã giảm scrim xuống rất nhạt (0.02–0.12 ở giữa),
   nên ảnh sáng/nhiều sương như skyline Dubai làm chữ (nhất là chữ
   gold-foil vốn sáng) chìm hẳn. Thay vì làm tối MỌI hero, neo một
   vùng tối ngay sau khối chữ — ảnh vẫn sáng, chữ luôn đọc được.
   ============================================================ */
.subhero__inner{ isolation:isolate; }
.subhero__inner::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-48px -72px -56px -72px;
  background:
    linear-gradient(100deg, rgba(10,9,6,0.88) 0%, rgba(10,9,6,0.80) 40%, rgba(10,9,6,0.62) 68%, rgba(10,9,6,0.28) 86%, transparent 100%),
    linear-gradient(180deg, rgba(10,9,6,0.30) 0%, rgba(10,9,6,0.18) 30%, rgba(10,9,6,0.38) 72%, rgba(10,9,6,0.66) 100%);
}
@media (max-width:760px){ .subhero__inner::before{ inset:-32px -28px -40px -28px; } }
/* chữ foil trên ảnh sáng: thêm viền tối mảnh để không mất nét */
.subhero__inner .display .foil, .subhero__inner .display em{
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.55));
}
/* Lớp polish đặt brightness(1.12) cho ảnh subhero — ảnh sáng như skyline Dubai
   khiến chữ gold-foil (vốn là màu sáng) không đọc được. Ảnh NỀN SAU CHỮ phải
   tối hơn; ảnh trong card/gallery vẫn giữ nguyên độ sáng. */
.subhero .media-bg img, .subhero .media-bg video{
  filter:saturate(1.06) contrast(1.04) brightness(0.62) !important;
}
/* dấu ✦ trang trí trong section kem: đậm hơn cho đồng bộ (không bắt buộc AA
   vì là ornament, nhưng để nhất quán với các nhãn vàng khác) */
.section--light .split__list .ic{ color:#7A5A22; }
/* số thứ tự bước (01–04) dùng --gold-deep chỉ đạt 4.26 ở 11–13px -> dùng --gold */
.step-cell .sn, .stepnav a b{ color:var(--gold); }
.section--light .step-cell .sn, .section--light .stepnav a b{ color:#7A5A22; }
/* .pointlist là lưới 2 cột: số ô LẺ luôn để hở nửa hàng cuối (cùng lỗi "thừa ô"
   đã gặp ở steps__grid). Cho ô cuối trải hết chiều ngang thay vì bỏ trống. */
.pointlist > .point:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (max-width:700px){ .pointlist > .point:last-child:nth-child(odd){ grid-column:auto; } }

/* ============================================================
   v41 — FONT TOKENS theo bộ font khách cung cấp
   UTM Avo (display) → Futura Brand (dự phòng cùng chất geometric)
   Be Vietnam Pro (body) · Drayton (chữ ký)
   ============================================================ */
:root{
  --serif:  "UTM Avo","Futura Brand","Be Vietnam Pro",system-ui,sans-serif;
  --display:"UTM Avo","Futura Brand","Be Vietnam Pro",system-ui,sans-serif;
  --sans:   "Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --script: "Drayton","UTM Avo","Be Vietnam Pro",cursive;
}

/* ============================================================
   v42 — THẺ CÓ ẢNH TRONG SECTION KEM
   .gcard có ảnh: .gm phủ kín thẻ (inset:0) và .gcard::after là gradient TỐI —
   thiết kế cho chữ SÁNG. Trong .section--light tôi đã đổi chữ sang ink (đậm)
   => chữ tối nằm trên gradient tối, gần như vô hình.
   Thẻ ảnh KHÔNG phải bề mặt kem: giữ nguyên chữ sáng. Chỉ thẻ CHỈ CÓ CHỮ
   (không .gm) mới lật sang nền sáng.
   ============================================================ */
.section--light .gcard:has(.gm){ background:var(--panel); border-color:rgba(246,241,232,0.10); }
.section--light .gcard:has(.gm) .gcard__t{ color:#F6F1E8; }
.section--light .gcard:has(.gm) .gcard__d{ color:#C8BA9C; }
.section--light .gcard:has(.gm) .gcard__k{ color:#C0944A; }
.section--light .gcard:has(.gm) .gcard__stat{ color:#F6F1E8; }
.section--light .gcard:has(.gm) .topline-card{ background:linear-gradient(90deg, var(--gold-bright), transparent); }

/* ============================================================
   v43 — CHỮ FOIL TRÊN HERO
   Hai lý do khiến "nhiều thế hệ" bị xỉn:
   1) box-decoration-break mặc định là `slice` -> gradient trải trên CẢ khối,
      nên dòng 2 chỉ nhận phần đuôi (#c0944a, tối nhất). `clone` cho mỗi dòng
      nhận trọn gradient.
   2) drop-shadow đen 0.85 phủ lên chính nét chữ -> đã giảm còn 0.55.
   Thêm bản gradient SÁNG hơn dành riêng cho hero (nền hero đã tối sẵn).
   ============================================================ */
.foil, .italic.foil, .display em{
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.subhero__inner .display .foil,
.subhero__inner .display em,
.hero__title .foil, .hero__title em{
  background-image:linear-gradient(96deg,
    #D9B268 0%, #F3E3B4 26%, #FFF7DE 50%, #F5E6B8 74%, #DDBB74 100%) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   v44 — HERO: BỎ LỚP NỀN ĐEN, CHỮ NHẤN DÙNG VÀNG ĐẶC + BÓNG
   Gradient foil vốn có stop tối nên chữ luôn bị xỉn ở phần đuôi;
   lớp nền đen phía sau khối chữ thì làm ảnh mất sáng.
   Thay bằng: một màu vàng champagne đặc + bóng đổ bên dưới.
   ============================================================ */
/* 1) gỡ hẳn lớp nền đen sau khối chữ hero */
.subhero__inner::before{ content:none !important; display:none !important; }

/* 2) chữ nhấn hero: vàng đặc, KHÔNG dùng gradient clip nữa */
.subhero__inner .display .foil,
.subhero__inner .display em,
.hero__title .foil, .hero__title em{
  background:none !important; background-image:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#F5DC9A !important;
  color:#F5DC9A !important;
  filter:none !important;
  text-shadow:0 2px 6px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.55) !important;
}

/* 3) chữ trắng của hero cũng dựa vào bóng thay vì nền đen */
.subhero__inner .display,
.subhero__inner .subhero__lead,
.subhero__inner .flourish,
.subhero__inner .breadcrumb,
.subhero__inner .proofstrip .pv,
.subhero__inner .proofstrip .pl{
  text-shadow:0 2px 6px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.5) !important;
}

/* 4) ảnh hero sáng hơn vì không còn lớp đen đè */
.subhero .media-bg img, .subhero .media-bg video{
  filter:saturate(1.06) contrast(1.04) brightness(0.78) !important;
}

/* ============================================================
   v45 — SỬA 5 LỖI MOBILE
   ============================================================ */
@media (max-width:760px){

  /* 1) Bảng ÍT CỘT (2–3) phải thấy hết, không phải cuộn ngang.
        .dtable đang có min-width:600px áp dụng cho mọi bảng. */
  .dtable:not(:has(thead th:nth-child(4))){ min-width:0; width:100%; }
  .dtable:not(:has(thead th:nth-child(4))) th,
  .dtable:not(:has(thead th:nth-child(4))) td{
    white-space:normal; padding:13px 14px; font-size:13.5px;
  }
  .dtable:not(:has(thead th:nth-child(4))) th:first-child,
  .dtable:not(:has(thead th:nth-child(4))) td:first-child{ padding-left:16px; }

  /* 2) Proof strip trong hero: bỏ viền trái + padding gây thụt hàng khi wrap,
        chuyển sang lưới 2 cột đều nhau. */
  .proofstrip{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 16px; }
  .proofstrip .pi,
  .proofstrip .pi + .pi,
  .proofstrip--steps .pi,
  .proofstrip--steps .pi:first-child{
    padding:0 !important; border:0 !important;
  }
  .proofstrip .pv{ font-size:clamp(16px,4.6vw,20px); line-height:1.2; }
  .proofstrip .pl{ font-size:11.5px; }

  /* 4) Hai ảnh văn phòng ICF nằm cùng một hàng, 2 cột */
  .gallery{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .gallery img{ height:132px; }
  .gallery figcaption{ padding:10px 12px; font-size:11.5px; line-height:1.45; }

  /* 5) Thanh bước: các mục đang co lại và đè lên nhau.
        Cho phép cuộn ngang, mỗi mục giữ nguyên bề rộng nội dung. */
  .stepnav__in{ gap:0; }
  .stepnav a{
    flex:0 0 auto; min-width:0; width:auto;
    padding:14px 18px; gap:8px; white-space:nowrap;
  }
  .stepnav a + a{ border-left:1px solid var(--line-soft); }
}

/* 3) Biểu đồ: nhãn đường tổng phí đang đè lên cột.
      Đưa nhãn lên TRÊN đường kẻ, canh trái, và chừa chỗ phía trên. */
.chart__ref b{
  right:auto; left:0; top:-17px;
  background:rgba(16,15,11,.82); padding:2px 8px; border-radius:4px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.section--light .chart__ref b{ background:rgba(255,253,248,.86); }
@media (max-width:760px){
  .chart__plot{ height:230px; }
  .chart__ref b{ font-size:10px; padding:2px 6px; top:-15px; }
  .chart__legend{ gap:10px 14px; font-size:11.5px; }
}
/* nhãn đường tổng phí chuyển xuống chú thích -> không còn đè lên cột */
.chart__legend i.dash{ width:16px; height:0; border-top:1px dashed rgba(246,241,232,.55); border-radius:0; }
.section--light .chart__legend i.dash{ border-top-color:rgba(27,21,16,.5); }
/* .gallery gốc đặt grid-auto-rows cố định -> chú thích dài bị cắt.
   Cho ô tự cao theo nội dung; hai ô trong cùng hàng vẫn bằng nhau. */
.gallery{ grid-auto-rows:auto !important; align-items:stretch; }
.gallery figure{ display:flex; flex-direction:column; }
.gallery figcaption{ flex:1; }

/* ============================================================
   v49 — LƯỚI 2 CỘT: SỐ Ô LẺ KHÔNG ĐƯỢC ĐỂ HỞ NỬA HÀNG CUỐI
   Đã sửa riêng cho .pointlist và .steps__grid(desktop); nhưng lỗi này
   xảy ra ở MỌI lưới khi thu về 2 cột (tablet/mobile ngang ~560–1080px).
   Quy tắc chung: ô cuối cùng nếu ở vị trí lẻ thì trải hết chiều ngang.
   Ở ≤560px các lưới còn 1 cột nên rule này là vô hại.
   ============================================================ */
@media (max-width:1080px){
  .cardgrid    > *:last-child:nth-child(odd),
  .tier-grid   > *:last-child:nth-child(odd),
  .steps__grid > *:last-child:nth-child(odd),
  .propgrid    > *:last-child:nth-child(odd),
  .calloutrow  > *:last-child:nth-child(odd),
  .cross-grid  > *:last-child:nth-child(odd),
  .insight-grid> *:last-child:nth-child(odd),
  .news-grid   > *:last-child:nth-child(odd),
  .method-steps> *:last-child:nth-child(odd),
  .pillar-grid > *:last-child:nth-child(odd),
  .gallery     > *:last-child:nth-child(odd){ grid-column:1 / -1; }
}
/* thẻ trải ngang thì canh nội dung cho cân, tránh cột chữ quá dài */
@media (min-width:561px) and (max-width:1080px){
  .cardgrid > .gcard:last-child:nth-child(odd) .gcard__body{ max-width:60ch; }
  .steps__grid > .step-cell:last-child:nth-child(odd){ display:flex; flex-direction:column; }
}

/* ==========================================================================
   v50 — HOMEPAGE V2 + ABOUT V2 + ARTICLE
   Theo brief "ICF_Premium_Office_Sitemap (2) (1).xlsx", sheet Homepage & About.
   ========================================================================== */

/* ---------- chung ---------- */
.blocklabel{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:var(--gold);
  font-weight:600; }
.blocklabel::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.7; }

/* placeholder asset — nhìn ra ngay chỗ cần thay ảnh thật */
.ph{ position:relative; }
.ph::after{ content:attr(data-ph); position:absolute; left:10px; bottom:10px; z-index:3;
  font-family:var(--sans); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:#F6F1E8; background:rgba(20,16,11,.72); border:1px solid rgba(240,226,166,.35);
  padding:4px 9px; border-radius:99px; pointer-events:none; }

/* ==========================================================================
   HOMEPAGE — BLOCK 2 · FEATURED OPPORTUNITIES
   ========================================================================== */
.oppgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:46px; }
.opp{ display:flex; flex-direction:column; border-radius:var(--r-md); overflow:hidden;
  background:var(--glass-bg); border:1px solid var(--glass-bord);
  box-shadow:var(--glass-shadow); text-decoration:none; color:inherit;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.opp:hover{ transform:translateY(-6px); border-color:rgba(240,226,166,.42);
  box-shadow:0 38px 90px -30px rgba(0,0,0,.78); }
.opp__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--espresso); }
.opp__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease); }
.opp:hover .opp__media img{ transform:scale(1.06); }
.opp__tag{ position:absolute; top:13px; left:13px; z-index:2; font-family:var(--sans);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 12px; border-radius:99px; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.24); }
.opp__tag--growth{ background:rgba(15,61,51,.82); color:#9FE6C8; border-color:rgba(159,230,200,.4); }
.opp__tag--income{ background:rgba(155,114,51,.86); color:#FFF3D4; border-color:rgba(255,243,212,.42); }
.opp__tag--protection{ background:rgba(14,27,42,.86); color:#A9CDF2; border-color:rgba(169,205,242,.4); }
.opp__tag--diversification{ background:rgba(70,44,84,.86); color:#E3C8F2; border-color:rgba(227,200,242,.4); }
.opp__body{ padding:22px 20px 24px; display:flex; flex-direction:column; flex:1; gap:9px; }
.opp__t{ font-family:var(--display); font-weight:700; font-size:17.5px; line-height:1.28;
  margin:0; color:var(--cream); }
.opp__loc{ font-size:13px; color:var(--muted); margin:0; line-height:1.45; }
.opp__price{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--gold-bright);
  margin:2px 0 0; }
.opp__hl{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.opp__hl li{ font-size:11.5px; color:var(--muted); border:1px solid var(--line);
  border-radius:99px; padding:4px 10px; line-height:1.3; }
.opp__cta{ margin-top:auto; padding-top:16px; font-family:var(--sans); font-size:13px;
  font-weight:600; color:var(--gold-bright); display:inline-flex; align-items:center; gap:7px; }
.opp:hover .opp__cta .arw{ transform:translateX(5px); }
.opp__cta .arw{ transition:transform .45s var(--ease); }

@media (max-width:1080px){ .oppgrid{ grid-template-columns:repeat(2,1fr); } }
/* mobile: carousel vuốt ngang thay vì 1 cột dài */
@media (max-width:640px){
  .oppgrid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding:0 var(--gutter) 8px; margin-left:calc(-1*var(--gutter));
    margin-right:calc(-1*var(--gutter)); scrollbar-width:none; }
  .oppgrid::-webkit-scrollbar{ display:none; }
  .opp{ flex:0 0 78%; scroll-snap-align:center; }
}

/* ==========================================================================
   HOMEPAGE — BLOCK 3 · WEALTH SOLUTIONS
   ========================================================================== */
.wsolgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.wsol{ position:relative; display:flex; flex-direction:column; padding:36px 30px 32px;
  border-radius:var(--r-md); background:var(--glass-bg); border:1px solid var(--glass-bord);
  box-shadow:var(--glass-shadow); text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease); }
.wsol::before{ content:""; position:absolute; inset:0 0 auto; height:2px;
  background:var(--foil); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease); }
.wsol:hover{ transform:translateY(-5px); border-color:rgba(240,226,166,.4); }
.wsol:hover::before{ transform:scaleX(1); }
.wsol__no{ font-family:var(--display); font-size:12px; letter-spacing:.16em; color:var(--gold);
  font-weight:700; }
.wsol__t{ font-family:var(--display); font-weight:700; font-size:23px; line-height:1.22;
  margin:14px 0 0; color:var(--cream); }
.wsol__d{ font-size:14.5px; line-height:1.62; color:var(--muted); margin:14px 0 0; }
.wsol__tags{ display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 0; }
.wsol__tags span{ font-size:11.5px; color:var(--gold-bright); border:1px solid var(--line);
  border-radius:99px; padding:5px 11px; }
.wsol__cta{ margin-top:auto; padding-top:22px; font-family:var(--sans); font-size:13.5px;
  font-weight:600; color:var(--gold-bright); display:inline-flex; align-items:center; gap:7px; }
.wsol:hover .wsol__cta .arw{ transform:translateX(5px); }
.wsol__cta .arw{ transition:transform .45s var(--ease); }
@media (max-width:1080px){ .wsolgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .wsolgrid{ grid-template-columns:1fr; } }

/* ==========================================================================
   HOMEPAGE — BLOCK 4 · CREDIBILITY (4 KPI)
   ========================================================================== */
.kpigrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.kpi{ text-align:center; padding:36px 22px 32px; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-bord); }
.kpi__v{ font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.02em;
  font-size:clamp(30px,3.3vw,46px); color:var(--gold-bright); }
.kpi__v small{ font-size:.5em; letter-spacing:0; }
.kpi__l{ font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:14px; }
@media (max-width:900px){ .kpigrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .kpi{ padding:26px 14px 24px; } .kpi__l{ font-size:12.5px; } }

/* ==========================================================================
   HOMEPAGE — BLOCK 7 / ABOUT — form ngắn
   ========================================================================== */
.shortform{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px; }
.shortform .field{ display:flex; flex-direction:column; gap:8px; }
.shortform .field.full{ grid-column:1 / -1; }
.shortform label{ font-family:var(--sans); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:600; }
.shortform label .req{ color:var(--gold); }
.shortform input, .shortform select{ font-family:var(--sans); font-size:15px; color:var(--cream);
  background:rgba(255,255,255,.045); border:1px solid var(--glass-bord); border-radius:12px;
  padding:14px 16px; outline:none; transition:border-color .3s var(--ease), background .3s var(--ease); }
.shortform input::placeholder{ color:var(--dim); }
.shortform input:focus, .shortform select:focus{ border-color:var(--gold); background:rgba(255,255,255,.075); }
.shortform select option{ background:#1A1814; color:#F6F1E8; }
.shortform__note{ font-size:12.5px; color:var(--dim); line-height:1.6; margin:0; }
@media (max-width:640px){ .shortform{ grid-template-columns:1fr; } }

/* ==========================================================================
   ABOUT — BLOCK 2 · STATS BAR
   ========================================================================== */
.statbar-wrap{ position:relative; z-index:5; margin-top:-64px; }
.statbar{ display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(24,20,15,.86); backdrop-filter:blur(18px);
  border:1px solid var(--glass-bord); border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow); overflow:hidden; }
.statbar__c{ padding:34px 26px; text-align:center; border-right:1px solid var(--line-soft); }
.statbar__c:last-child{ border-right:none; }
.statbar__v{ font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.015em;
  font-size:clamp(24px,2.5vw,34px); color:var(--gold-bright); }
.statbar__l{ font-size:13px; line-height:1.5; color:#C8BA9C; margin-top:10px; }
.statbar__n{ font-size:11.5px; color:#918468; margin-top:7px; line-height:1.45; }
@media (max-width:900px){
  .statbar{ grid-template-columns:1fr 1fr; }
  .statbar__c:nth-child(2n){ border-right:none; }
  .statbar__c:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  .statbar-wrap{ margin-top:-40px; }
}
@media (max-width:520px){ .statbar__c{ padding:24px 14px; } .statbar-wrap{ margin-top:-28px; } }

/* ==========================================================================
   ABOUT — BLOCK 3 · LEADERSHIP
   ========================================================================== */
.leadgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.leadc{ border-radius:var(--r-md); overflow:hidden; background:var(--glass-bg);
  border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .5s var(--ease); }
.leadc:hover{ transform:translateY(-5px); border-color:rgba(240,226,166,.4); }
.leadc__ph{ aspect-ratio:4/5; display:grid; place-items:center; position:relative;
  background:linear-gradient(150deg,#241E16 0%,#1A160F 55%,#221B12 100%);
  border-bottom:1px solid var(--line-soft); }
.leadc__mono{ font-family:var(--display); font-weight:700; font-size:clamp(38px,5vw,58px);
  letter-spacing:.02em; background:var(--foil); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.leadc__body{ padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; }
.leadc__n{ font-family:var(--display); font-weight:700; font-size:20px; line-height:1.25;
  margin:0; color:var(--cream); }
.leadc__r{ font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold);
  margin:9px 0 0; font-weight:600; }
.leadc__b{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; }
.leadc__b li{ display:flex; gap:9px; font-size:13.5px; line-height:1.55; color:var(--muted); }
.leadc__b li::before{ content:"—"; color:var(--gold); flex:none; }
.leadc__b li.todo{ color:var(--dim); font-style:italic; }
.leadc__ln{ margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--gold-bright);
  text-decoration:none; }
.leadc__ln:hover{ text-decoration:underline; }
@media (max-width:1080px){ .leadgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){
  .leadgrid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:0 var(--gutter) 8px; margin-left:calc(-1*var(--gutter));
    margin-right:calc(-1*var(--gutter)); scrollbar-width:none; }
  .leadgrid::-webkit-scrollbar{ display:none; }
  .leadc{ flex:0 0 76%; scroll-snap-align:center; }
}

/* ==========================================================================
   ABOUT — BLOCK 4 · ADVISORY PILLARS (bento)
   ========================================================================== */
.bento{ display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-auto-rows:minmax(190px,auto);
  gap:20px; margin-top:46px; }
.bento > *:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
.bento > *:nth-child(2){ grid-column:2 / span 2; grid-row:1; }
.bento > *:nth-child(3){ grid-column:2; grid-row:2; }
.bento > *:nth-child(4){ grid-column:3; grid-row:2; }
.bcard{ position:relative; padding:32px 28px; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-bord);
  box-shadow:var(--glass-shadow); display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease); }
.bcard::after{ content:""; position:absolute; inset:auto auto -40% -20%; width:70%; aspect-ratio:1;
  background:radial-gradient(circle,var(--gold-glow) 0%,transparent 70%);
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none; }
.bcard:hover{ transform:translateY(-4px); border-color:rgba(240,226,166,.42); }
.bcard:hover::after{ opacity:1; }
.bcard__n{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em;
  color:var(--gold); }
.bcard__t{ font-family:var(--display); font-weight:700; font-size:22px; line-height:1.24;
  margin:14px 0 0; color:var(--cream); position:relative; z-index:1; }
.bcard__d{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:14px 0 0;
  position:relative; z-index:1; }
@media (max-width:980px){
  .bento{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
  .bento > *{ grid-column:auto !important; grid-row:auto !important; }
}
@media (max-width:640px){ .bento{ grid-template-columns:1fr; } }

/* ==========================================================================
   ABOUT — BLOCK 5 · GLOBAL ECOSYSTEM (logo grid + tabs)
   ========================================================================== */
.logotabs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.logotabs button{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:99px; padding:10px 20px;
  cursor:pointer; transition:all .35s var(--ease); }
.logotabs button:hover{ color:var(--cream); border-color:var(--gold); }
.logotabs button.active{ background:var(--foil); color:#1B1510; border-color:transparent; }
.logogrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; }
.logotile{ display:grid; place-items:center; text-align:center; min-height:118px; padding:22px 16px;
  border-radius:var(--r-md); background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);
  filter:grayscale(1); opacity:.7;
  transition:filter .45s var(--ease), opacity .45s var(--ease),
             transform .45s var(--ease), border-color .45s var(--ease); }
.logotile:hover{ filter:grayscale(0); opacity:1; transform:scale(1.05);
  border-color:var(--gold); }
.logotile__n{ font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1.25;
  color:var(--gold-bright); }
.logotile__k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  margin-top:8px; }
.logotile[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .logotile{ transition:none; } .logotile:hover{ transform:none; } }
@media (max-width:900px){ .logogrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .logogrid{ grid-template-columns:1fr 1fr; } .logotile{ min-height:96px; } }

/* ==========================================================================
   ABOUT — BLOCK 6 · PHYSICAL PROOF (text trái + slider phải)
   ========================================================================== */
.proof{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px);
  align-items:center; }
.slider{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow); background:var(--espresso); }
.slider__track{ display:flex; transition:transform .7s var(--ease); }
.slider__s{ flex:0 0 100%; position:relative; }
.slider__s img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.slider__cap{ position:absolute; left:0; right:0; bottom:0; padding:44px 24px 20px;
  background:linear-gradient(to top,rgba(12,10,7,.92) 0%,rgba(12,10,7,.55) 55%,transparent 100%);
  font-size:14px; color:#F6F1E8; line-height:1.5; }
.slider__nav{ position:absolute; right:16px; bottom:16px; display:flex; gap:8px; z-index:3; }
.slider__nav button{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,16,11,.7); backdrop-filter:blur(8px);
  border:1px solid rgba(246,241,232,.28); color:#F6F1E8; cursor:pointer; font-size:15px;
  transition:background .3s var(--ease), border-color .3s var(--ease); }
.slider__nav button:hover{ background:rgba(192,148,74,.85); border-color:var(--gold-bright); }
.slider__dots{ position:absolute; left:20px; bottom:26px; display:flex; gap:7px; z-index:3; }
.slider__dots button{ width:7px; height:7px; padding:0; border-radius:50%; border:none;
  background:rgba(246,241,232,.42); cursor:pointer; transition:all .3s var(--ease); }
.slider__dots button.active{ background:var(--gold-bright); width:22px; border-radius:99px; }
@media (max-width:900px){ .proof{ grid-template-columns:1fr; } }

/* ==========================================================================
   ABOUT — BLOCK 7 · VISIT CTA + modal
   ========================================================================== */
.visit{ position:relative; overflow:hidden; padding:clamp(64px,9vw,110px) 0;
  background:linear-gradient(140deg,#15120C 0%,#1F1810 48%,#12100B 100%); }
.visit__inner{ position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto; }
.visit h2{ font-family:var(--display); font-weight:700; line-height:1.16;
  font-size:clamp(28px,4vw,46px); color:var(--cream); margin:18px 0 0; }
.visit p{ font-size:16.5px; line-height:1.7; color:var(--muted); margin:22px auto 34px;
  max-width:560px; }

.modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:20px; background:rgba(8,6,4,.78); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.modal.open{ opacity:1; visibility:visible; }
.modal__box{ width:min(560px,100%); max-height:90vh; overflow-y:auto;
  background:linear-gradient(150deg,#211B13 0%,#191510 100%);
  border:1px solid var(--glass-bord); border-radius:var(--r-lg);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.85); padding:clamp(28px,4vw,44px);
  transform:translateY(18px) scale(.98); transition:transform .5s var(--ease); }
.modal.open .modal__box{ transform:none; }
.modal__x{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid var(--glass-bord); color:var(--cream);
  font-size:18px; cursor:pointer; display:grid; place-items:center; }
.modal__x:hover{ background:rgba(192,148,74,.3); }
.modal h3{ font-family:var(--display); font-weight:700; font-size:25px; line-height:1.24;
  margin:0; color:var(--cream); }
.modal__sub{ font-size:14px; color:var(--muted); line-height:1.6; margin:12px 0 0; }
.modal__ok{ display:none; text-align:center; padding:24px 0 8px; }
.modal__ok .flourish{ display:block; font-size:34px; }
.modal__ok p{ color:var(--muted); font-size:14.5px; line-height:1.65; margin:14px 0 0; }
.is-sent .modal__form, .is-sent .modal__head{ display:none; }
.is-sent .modal__ok{ display:block; }

/* ==========================================================================
   ARTICLE — trang tin tức chi tiết
   ========================================================================== */
.artwrap{ display:grid; grid-template-columns:minmax(0,1fr) 268px;
  gap:clamp(30px,5vw,68px); align-items:start; }
.prose{ max-width:72ch; }
.prose > * + *{ margin-top:24px; }
.prose p{ font-size:16.5px; line-height:1.86; color:var(--muted); }
.prose h2{ font-family:var(--display); font-weight:700; font-size:clamp(23px,2.7vw,31px);
  line-height:1.26; color:var(--cream); margin-top:56px; scroll-margin-top:110px; }
.prose h3{ font-family:var(--display); font-weight:700; font-size:clamp(18.5px,2vw,22px);
  line-height:1.32; color:var(--gold-bright); margin-top:40px; scroll-margin-top:110px; }
.prose h2 + p, .prose h3 + p{ margin-top:16px; }
.prose strong{ color:var(--cream); font-weight:600; }
.prose a{ color:var(--gold-bright); }
.prose ul{ list-style:none; padding:0; display:grid; gap:12px; }
.prose ul li{ display:flex; gap:12px; font-size:16px; line-height:1.75; color:var(--muted); }
.prose ul li::before{ content:"✦"; color:var(--gold); flex:none; font-size:12px; margin-top:6px; }
.pquote{ margin:44px 0; padding:30px 30px 30px 34px; border-left:2px solid var(--gold);
  background:rgba(192,148,74,.07); border-radius:0 var(--r-md) var(--r-md) 0; }
.pquote p{ font-family:var(--display); font-size:clamp(18px,2.2vw,23px); line-height:1.52;
  color:var(--cream); margin:0; font-style:italic; }
.pquote cite{ display:block; margin-top:16px; font-family:var(--sans); font-style:normal;
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }

.artmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:24px;
  font-size:13.5px; color:var(--muted); }
.artmeta .dot{ width:3px; height:3px; border-radius:50%; background:var(--dim); }
.artmeta .cat{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-bright); border:1px solid var(--line);
  padding:5px 12px; border-radius:99px; }

.artside{ position:sticky; top:104px; display:grid; gap:26px; }
.toc{ padding:24px 22px; border-radius:var(--r-md); background:var(--glass-bg);
  border:1px solid var(--glass-bord); }
.toc h4{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px; font-weight:700; }
.toc a{ display:block; font-size:13.5px; line-height:1.5; color:var(--muted);
  text-decoration:none; padding:8px 0 8px 14px; border-left:1px solid var(--line-soft);
  transition:color .3s var(--ease), border-color .3s var(--ease); }
.toc a:hover{ color:var(--cream); border-color:var(--gold); }
.toc a.active{ color:var(--gold-bright); border-color:var(--gold); }
.toc a.sub{ padding-left:26px; font-size:12.5px; }
.share{ display:flex; flex-wrap:wrap; gap:9px; }
.share a, .share button{ display:inline-grid; place-items:center; width:40px; height:40px;
  border-radius:50%; background:rgba(255,255,255,.05); border:1px solid var(--glass-bord);
  color:var(--muted); text-decoration:none; cursor:pointer; font-size:14px;
  transition:all .3s var(--ease); }
.share a:hover, .share button:hover{ color:var(--gold-bright); border-color:var(--gold);
  background:rgba(192,148,74,.14); }
.artnote{ margin-top:56px; padding:24px 26px; border-radius:var(--r-md);
  border:1px solid var(--line); background:rgba(192,148,74,.05); }
.artnote p{ font-size:13px; line-height:1.7; color:var(--dim); margin:0; }
.readbar{ position:fixed; top:0; left:0; height:2px; background:var(--foil); z-index:120;
  width:0; transition:width .12s linear; }
@media (max-width:980px){
  .artwrap{ grid-template-columns:1fr; }
  .artside{ position:static; }
  .toc{ display:none; }
}
/* form ngắn dùng chung state .sent của .signup__card */
.signup__card.sent .shortform{ display:none; }

/* --- v50b: hàng cuối lẻ thì canh giữa, đừng chừa ô trống ---
   Dùng flex thay grid vì số phần tử thay đổi (5 lãnh đạo, logo bị tab lọc ẩn bớt). */
.leadgrid, .logogrid{ display:flex; flex-wrap:wrap; justify-content:center; }
.leadgrid{ gap:24px; }
.leadgrid > .leadc{ flex:0 1 calc((100% - 48px)/3); min-width:0; }
.logogrid{ gap:16px; }
.logogrid > .logotile{ flex:0 1 calc((100% - 48px)/4); min-width:0; }
@media (max-width:1080px){ .leadgrid > .leadc{ flex-basis:calc((100% - 24px)/2); } }
@media (max-width:900px){ .logogrid > .logotile{ flex-basis:calc((100% - 32px)/3); } }
@media (max-width:640px){
  .leadgrid{ display:flex; flex-wrap:nowrap; justify-content:flex-start; }
  .leadgrid > .leadc{ flex:0 0 76%; }
}
@media (max-width:560px){ .logogrid > .logotile{ flex-basis:calc((100% - 16px)/2); } }

/* --- v50c: badge placeholder bị grid canh giữa đè lên nội dung --- */
.ph::after{ align-self:end; justify-self:start; }
/* monogram: dùng màu đặc, gradient clip bị tối và đục trên nền sẫm */
.leadc__mono{ background:none; -webkit-text-fill-color:initial;
  color:rgba(240,226,166,.34); letter-spacing:.06em; }

/* --- v50d: trong slider, badge placeholder đụng caption -> đưa lên trên --- */
.slider__s.ph::after{ align-self:start; top:12px; bottom:auto; left:12px; }
/* chấm chỉ báo nằm trên lớp caption */
.slider__dots{ bottom:20px; }
.slider__cap{ padding-right:110px; }
/* cột chữ của Physical Proof hẹp -> hạ cỡ h2 để không rớt chữ lẻ */
.proof .proof__text .h2{ font-size:clamp(26px,3.1vw,40px); }

/* --- v50e: chấm chỉ báo đang đè lên caption --- */
.slider__cap{ padding:46px 112px 42px 24px; }
.slider__dots{ left:24px; bottom:18px; }
@media (max-width:560px){
  .slider__cap{ padding:40px 24px 40px 20px; font-size:13px; }
  .slider__nav{ right:12px; bottom:auto; top:12px; }
  .slider__dots{ left:20px; bottom:16px; }
}

/* --- v50f: KPI có chữ kèm số -> cho xuống dòng gọn, đừng ngắt giữa cụm --- */
.kpi__v small{ display:block; margin-top:6px; font-size:.42em; letter-spacing:.02em;
  line-height:1.3; color:var(--muted); font-weight:600; }

/* --- v50g: bảng trong bài viết là bảng văn xuôi, không phải bảng số ---
   .dtable ép white-space:nowrap + min-width:600px nên vỡ khi ô chứa câu dài. */
.ptable-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-md); margin:34px 0; }
.ptable{ width:100%; border-collapse:collapse; font-size:14.5px; }
.ptable th, .ptable td{ padding:16px 18px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-soft); line-height:1.62; white-space:normal; }
.ptable thead th{ font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright);
  background:rgba(192,148,74,.10); border-bottom:1px solid var(--line); white-space:nowrap; }
.ptable tbody td{ color:var(--muted); }
.ptable tbody td:first-child{ color:var(--cream); font-family:var(--display); font-weight:700;
  white-space:nowrap; width:1%; }
.ptable tbody tr:last-child td{ border-bottom:0; }
.ptable tbody tr{ transition:background .4s var(--ease); }
.ptable tbody tr:hover{ background:rgba(246,241,232,.035); }
@media (max-width:640px){
  .ptable{ font-size:13.5px; min-width:520px; }
  .ptable th, .ptable td{ padding:13px 14px; }
}

/* --- v50h: li dạng flex biến <strong> thành flex item riêng -> chữ dồn cột hẹp.
   Dùng padding + ::before tuyệt đối để nội dung chảy liền mạch. --- */
.prose ul li{ display:block; position:relative; padding-left:26px; }
.prose ul li::before{ position:absolute; left:0; top:0; margin-top:6px; }

/* --- v50i: grid item mặc định min-width:auto nên bảng min-width kéo giãn cả cột chữ --- */
.artwrap > *{ min-width:0; }
.prose{ min-width:0; max-width:min(72ch,100%); }
.ptable-wrap{ max-width:100%; }

/* --- v50j: breadcrumb dài bị rớt dòng lộn xộn trên mobile --- */
@media (max-width:560px){
  .breadcrumb{ font-size:11px; letter-spacing:.08em; gap:6px; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
  .breadcrumb::-webkit-scrollbar{ display:none; }
  .breadcrumb > *{ flex:none; }
}

/* --- v50k: các lưới mới của v50 cũng phải theo quy tắc "ô cuối lẻ thì trải ngang"
   (đã bỏ sót .wsolgrid khi thêm component mới) --- */
@media (max-width:1080px){
  .wsolgrid > *:last-child:nth-child(odd),
  .kpigrid  > *:last-child:nth-child(odd),
  .oppgrid  > *:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (min-width:641px) and (max-width:1080px){
  .wsolgrid > .wsol:last-child:nth-child(odd) .wsol__d{ max-width:60ch; }
}

/* --- v50l: footer 5 cột và legend 5 mục cũng chừa ô trống khi rút về 2 cột --- */
@media (max-width:1080px){
  .footer__top   > *:last-child:nth-child(odd),
  .alloc__legend > *:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* --- v50m: lưới tin có bộ lọc -> số thẻ thay đổi, dùng flex để hàng cuối tự canh giữa
   (thêm 1 bài Dubai thành 7 thẻ, hàng cuối trơ 1 thẻ trong lưới 3 cột) --- */
.news-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
.news-grid > *{ flex:0 1 calc((100% - 52px)/3); min-width:0; }
@media (max-width:1080px){ .news-grid > *{ flex-basis:calc((100% - 26px)/2); } }
@media (max-width:640px){ .news-grid > *{ flex-basis:100%; } }

/* ==========================================================================
   v50n — Hero trang chủ lệch hẳn về phải
   Ba nguyên nhân chồng nhau:
   1. .hero__inner giới hạn 1080px trong khi mọi section dưới dùng --maxw
      (1280px) -> mép trái hero không thẳng hàng với phần còn lại của trang.
   2. .hero__panel chỉ rộng 680px.
   3. .r-line > span đặt white-space:nowrap nên dòng dài không xuống hàng mà
      tràn ra ngoài panel. Tiêu đề cũ có 2 dòng ngắn nên không lộ; tiêu đề mới
      "Cơ hội tiếp cận độc quyền." dài 1227px ở cỡ 90px, tràn 547px sang phải.
   ========================================================================== */
.hero__inner{ max-width:var(--maxw); }
.hero__panel{ max-width:100%; }
/* cỡ chữ phải để dòng dài nhất nằm gọn trong khung 1280px (1104px sau gutter) */
.hero__title{ font-size:clamp(38px,6vw,78px); }
.hero__sub{ max-width:min(660px,100%); }  /* 3 dòng như brief, và kết thúc ở ~54%
   bề ngang nên chữ vẫn nằm trong vùng tối của lớp phủ, không đè lên phần ảnh sáng */

/* --- v51a: highlight/tag hiển thị nguyên văn "A • B • C" như brief, không tách chip --- */
.opp__hl{ display:block; margin:6px 0 0; padding:0; font-size:12.5px; line-height:1.55;
  color:var(--muted); letter-spacing:.01em; }
.wsol__tags{ display:block; margin:18px 0 0; font-size:13px; line-height:1.6; color:var(--gold-bright); }

/* --- v52a: nhãn form giữ đúng hoa/thường như brief ("Anh/chị quan tâm:", "Họ tên"),
   không ép uppercase — brief chỉ viết hoa ở chỗ họ muốn hoa (tagline About) --- */
.shortform label{ text-transform:none; letter-spacing:.02em; font-size:13px; }

/* ==========================================================================
   v54 — Feedback client trên trang About
   ========================================================================== */

/* --- 1 · Thanh số liệu đang sát 2 nút CTA phía trên --------------------- */
/* block cũ đặt padding:0 !important nên nới bằng margin-bottom, không chọi !important */
.subhero:has(+ .statbar-wrap) .subhero__inner{ margin-bottom:clamp(122px,16vh,178px); }
.statbar-wrap{ margin-top:-58px; }
@media (max-width:900px){
  .subhero:has(+ .statbar-wrap) .subhero__inner{ margin-bottom:clamp(92px,13vh,132px); }
  .statbar-wrap{ margin-top:-40px; }
}

/* --- 2 · Đáy ảnh hero cắt ngang đột ngột, không tan vào nền trang ------- */
.subhero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:30%;
  background:linear-gradient(180deg,
    rgba(21,20,15,0) 0%, rgba(21,20,15,.30) 48%,
    rgba(21,20,15,.78) 80%, var(--bg) 100%);
  z-index:1; pointer-events:none;
}
.subhero__inner{ position:relative; z-index:3; }

/* --- 3 · Ban lãnh đạo cố định 5 người -> để đúng 1 hàng, không rớt ------ */
@media (min-width:1081px){
  .leadgrid{ gap:16px; flex-wrap:nowrap; }
  .leadgrid > .leadc{ flex:1 1 0; min-width:0; }
  .leadc__body{ padding:20px 16px 22px; }
  .leadc__n{ font-size:17px; }
  .leadc__r{ font-size:11px; letter-spacing:.06em; }
  .leadc__b li{ font-size:12.5px; gap:7px; }
  .leadc__ln{ font-size:12px; }
}

/* --- 3b · Tiêu đề rớt lại 1–2 chữ lẻ ở dòng cuối ------------------------
   Nguyên nhân kép: .sec-head .l khoá 620px, và trình duyệt ngắt dòng tham
   lam. text-wrap:balance chia đều các dòng; bỏ khoá bề ngang khi tiêu đề
   đứng một mình (không còn đoạn mô tả bên cạnh). */
h1, h2, h3, .display, .h2, .hero__title,
.sec-head h2, .subhero__inner .display, .visit h2, .art__t, .opp__t,
.wsol__t, .bcard__t, .leadc__n, .news-card__t, .pillar__t{
  text-wrap:balance;
}
.sec-head:not(:has(p)) .l{ max-width:none; }
.sec-head:not(:has(p)){ display:block; }

/* --- 4 · Lưới logo: 9 đối tác -> 5+4, hàng cuối canh giữa nhìn cân ------ */
@media (min-width:1081px){
  .logogrid{ gap:14px; }
  .logogrid > .logotile{ flex-basis:calc((100% - 56px)/5); }
}
.logotile{ min-height:104px; padding:18px 14px; }
.logotile__n{ font-size:15px; }
.logotile img{ max-width:100%; max-height:44px; width:auto; height:auto;
  object-fit:contain; display:block; margin:0 auto; }

/* --- 6 · Trang tối đều từ trên xuống, thiếu nhịp -----------------------
   Đổi khối Triết lý sang nền kem để cắt mạch, và thêm lớp sáng nhẹ cho
   các khối tối để bớt phẳng. */
.section--light .bcard__n{ color:var(--gold-deep); }
.section--light .logotile{ background:rgba(255,253,248,.55); border-color:rgba(27,21,16,.10); }
.section--light .logotile__n{ color:#6E5216; }
.section--light .logotile__k{ color:var(--ink-dim); }

/* lớp sáng rất nhẹ ở đầu mỗi khối tối, tạo chiều sâu thay vì một mảng đen */
.section--glow{ position:relative; }
.section--glow::before{
  content:""; position:absolute; inset:0 0 auto; height:min(520px,70%);
  background:radial-gradient(120% 100% at 50% 0%,
    rgba(192,148,74,.10) 0%, rgba(192,148,74,.035) 42%, transparent 72%);
  pointer-events:none; z-index:0;
}
.section--glow > *{ position:relative; z-index:1; }

/* đường kẻ vàng mảnh phân cách khối, thay cho việc đổi màu đột ngột */
.rule-gold{ position:relative; height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(192,148,74,.42), transparent); }

/* --- v54b: chỉnh sau khi soi lại --- */
/* số thứ tự trên nền kem chỉ đạt 3.46 — chữ nhỏ cần 4.5 */
.section--light .bcard__n{ color:#6E5216; }
/* ô chân dung chờ ảnh: thêm chiều sâu thay vì một mảng phẳng */
.leadc__ph{ position:relative; overflow:hidden; }
.leadc__ph::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 55% at 50% 38%, rgba(192,148,74,.14) 0%, transparent 70%);
  pointer-events:none;
}
.leadc:hover .leadc__ph::after{ background:radial-gradient(70% 55% at 50% 38%, rgba(240,226,166,.20) 0%, transparent 70%); }
.leadc__ph, .leadc__mono{ transition:all .55s var(--ease); }
.leadc:hover .leadc__mono{ color:rgba(240,226,166,.55); letter-spacing:.10em; }
/* thanh số liệu: nhấn nhẹ khi rê chuột để khối bớt tĩnh */
.statbar__c{ transition:background .45s var(--ease); }
.statbar__c:hover{ background:rgba(192,148,74,.08); }

/* ==========================================================================
   v58 — ảnh thật của khách hàng
   ========================================================================== */

/* Homepage · khối "Về Premium Office": gallery 4 ảnh thay 1 ảnh đơn */
.pogal{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pogal__i{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-md);
  border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease); }
.pogal__i img{ display:block; width:100%; height:100%; aspect-ratio:3/2;
  object-fit:cover; transition:transform 1.1s var(--ease); }
.pogal__i:hover{ transform:translateY(-4px); box-shadow:0 34px 80px -28px rgba(0,0,0,.7); }
.pogal__i:hover img{ transform:scale(1.06); }
.pogal__i figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 14px 12px;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:#F6F1E8; line-height:1.35;
  background:linear-gradient(to top, rgba(12,10,7,.9) 0%, rgba(12,10,7,.5) 55%, transparent 100%); }
/* ảnh đầu và ảnh cuối trải ngang -> 4 ảnh xếp kín 3 hàng, không chừa ô trống
   (2 ảnh giữa chia đôi hàng 2) */
.pogal__i:first-child, .pogal__i:last-child{ grid-column:1 / -1; }
.pogal__i:first-child img, .pogal__i:last-child img{ aspect-ratio:2.1/1; }
@media (max-width:560px){
  .pogal{ gap:10px; }
  .pogal__i figcaption{ font-size:11px; padding:26px 11px 10px; }
}

/* About · ảnh chân dung thật thay ô monogram */
.leadc__ph{ display:block; background:#1A160F; }
.leadc__ph img{ width:100%; height:100%; object-fit:cover; object-position:center 18%;
  display:block; filter:saturate(.92) contrast(1.03);
  transition:transform 1s var(--ease), filter .55s var(--ease); }
.leadc:hover .leadc__ph img{ transform:scale(1.05); filter:saturate(1) contrast(1.05); }
.leadc__ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,17,11,.62) 0%, rgba(20,17,11,.06) 46%, transparent 100%); }

/* ==========================================================================
   v60 — Bug report ICF 2026-09-08 (đợt 1: sửa chung)
   ========================================================================== */
/* AIA HK · biểu đồ: guaranteed phải màu XANH, thưởng vàng/cam — đang trắng */
.chart__seg--g, .chart__legend i.g{ background:#4C82C2; }
.chart__seg--r, .chart__legend i.r{ background:#F0D57A; }
.chart__seg--t, .chart__legend i.t{ background:#E0863A; }
.section--light .chart__seg--g{ background:#3B6FAE; }
/* AIA · "Có thể không phù hợp nếu…" quá sáng -> dùng màu eyebrow */
.flag h4{ color:var(--gold); }
/* form: thông báo lỗi dưới ô nhập (nhiều form chưa có sẵn phần tử .err) */
.field .err{ display:none; font-size:12px; color:#E8A07A; margin-top:6px; letter-spacing:.01em; }
.field.invalid .err{ display:block; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#C86A45 !important; }
/* About · popup đặt lịch trên iPad: 2 ô ngày/giờ sát nhau */
.modal__form{ column-gap:22px; row-gap:18px; }
@media (max-width:600px){ .modal__form .field{ grid-column:1 / -1; } }
/* Home · Block 6 trên iPad (700–1080px): giữ 3 cột, không để bài thứ 3 trải ngang thành ảnh khổng lồ */
@media (min-width:700px) and (max-width:1080px){
  .insight-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .insight-grid > *:last-child:nth-child(odd){ grid-column:auto; }
  .art__t{ font-size:16px; }
}
/* eyebrow pill đã bỏ khỏi HTML; khoá luôn để không quay lại */
.eyebrow.pill{ background:none; border:0; padding:0; border-radius:0; }

/* ---------- thanh lọc (AU/US/Dubai): chip theo nhóm, chọn nhiều ---------- */
.fbar{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.fbar__g{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fbar__k{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-weight:700; min-width:118px; }
.fchip{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:99px; padding:8px 14px;
  cursor:pointer; transition:all .3s var(--ease); line-height:1.2; }
.fchip:hover{ color:var(--cream); border-color:var(--gold); }
.fchip.active{ background:var(--foil); color:#1B1510; border-color:transparent; }
.fchip[aria-disabled="true"]{ opacity:.42; cursor:not-allowed; }
.fchip[aria-disabled="true"]:hover{ color:var(--muted); border-color:var(--line); }
.fbar__reset{ font-family:var(--sans); font-size:12.5px; color:var(--gold-bright); background:none;
  border:0; cursor:pointer; text-decoration:underline; padding:6px 2px; }
.fcount{ font-size:13px; color:var(--muted); margin-top:14px; }
.fcount b{ color:var(--gold-bright); }
.section--light .fchip{ color:var(--ink-muted); border-color:rgba(27,21,16,.22); }
.section--light .fchip:hover{ color:var(--ink); border-color:var(--gold-deep); }
.section--light .fbar__k{ color:var(--gold-deep); }
.section--light .fcount{ color:var(--ink-muted); } .section--light .fcount b{ color:#6E5216; }
[data-fcard][hidden]{ display:none !important; }

/* ---------- bản đồ: pin có tooltip khi hover/chạm ---------- */
.gpin{ cursor:pointer; }
.gpin.is-dim{ opacity:.28; }
.gpin.is-on i{ box-shadow:0 0 0 6px rgba(240,226,166,.28), 0 0 24px rgba(240,226,166,.6); }
.gtip{ position:absolute; z-index:6; width:236px; padding:14px 16px; border-radius:14px;
  background:rgba(24,20,15,.94); backdrop-filter:blur(12px); border:1px solid var(--glass-bord);
  box-shadow:var(--glass-shadow); color:var(--cream); font-size:13px; line-height:1.55;
  opacity:0; visibility:hidden; transform:translate(-50%,8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  pointer-events:none; }
.gtip.show{ opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto; }
.gtip b{ display:block; font-family:var(--display); font-size:15px; margin-bottom:6px; color:var(--gold-bright); }
.gtip small{ display:block; color:var(--muted); font-size:12px; }
.gtip a{ display:inline-block; margin-top:10px; color:var(--gold-bright); font-weight:600; font-size:12.5px; }

/* ---------- Dubai S5 · bảng so sánh 3 cột trên nền kem ---------- */
.ptable--cmp thead th:not(:first-child){ white-space:normal; }
.ptable--cmp tbody td:first-child{ white-space:normal; width:auto; min-width:120px; }
.section--light .ptable-wrap{ border-color:rgba(27,21,16,.14); background:rgba(255,253,248,.5); }
.section--light .ptable thead th{ color:#6E5216; background:rgba(192,148,74,.14); border-bottom-color:rgba(27,21,16,.14); }
.section--light .ptable th, .section--light .ptable td{ border-bottom-color:rgba(27,21,16,.10); }
.section--light .ptable tbody td{ color:var(--ink-muted); }
.section--light .ptable tbody td:first-child{ color:var(--ink); }
.section--light .ptable tbody tr:hover{ background:rgba(192,148,74,.06); }
@media (max-width:760px){ .ptable--cmp{ min-width:720px; } }
/* BĐS Mỹ · bản đồ khu vực (cùng kỹ thuật với AU: crop equirectangular + pin theo kinh/vĩ độ) */
.geomap--us{ aspect-ratio:169.44/75; max-width:100%; }
@media (max-width:640px){ .geomap--us{ aspect-ratio:169.44/95; } .geomap--us .gpin span{ font-size:11px; } }

/* ==========================================================================
   v61 — V2 cho 5 trang sản phẩm (BĐS Úc/Mỹ/Dubai, AIA HK/SG)
   theo "Review website PO v1 260907.xlsx"
   ========================================================================== */
/* hero: ảnh như hiện tại, zoom khi rê chuột */
.v2 .subhero .media-bg img{ animation:none !important; transition:transform 1.4s var(--ease); transform:scale(1.02); }
.v2 .subhero:hover .media-bg img{ transform:scale(1.07); }
.v2 .subhero__inner{ max-width:960px; }
.v2 .hero__cta .btn{ text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; }

/* tiêu đề phụ trong "Bài toán đầu tư" */
.subh{ display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:700;
  font-size:clamp(20px,2.2vw,26px); color:var(--gold-bright); margin:58px 0 0; text-wrap:balance; }
.subh::before{ content:""; width:28px; height:1px; background:var(--gold); flex:none; }
.section--light .subh{ color:#6E5216; }
.subh + *{ margin-top:22px; }

/* --- thẻ ảnh: title nổi, mô tả hiện khi rê chuột / chạm --- */
.icards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.icards--6{ grid-template-columns:repeat(3,1fr); }
.icard{ position:relative; aspect-ratio:4/5; border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow); background:var(--espresso); }
.icard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.icard::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,10,7,.94) 0%, rgba(12,10,7,.55) 48%, rgba(12,10,7,.08) 100%); }
.icard__b{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; }
.icard__t{ font-family:var(--display); font-weight:700; font-size:17px; line-height:1.28; color:#F6F1E8;
  margin:0; transition:color .4s var(--ease); text-wrap:balance; }
.icard__d{ max-height:0; opacity:0; overflow:hidden; margin:0; font-size:13.5px; line-height:1.6; color:#D9CFB8;
  transition:max-height .55s var(--ease), opacity .45s var(--ease), margin .45s var(--ease); white-space:pre-line; }
.icard:hover img, .icard.is-open img{ transform:scale(1.07); }
.icard:hover .icard__t, .icard.is-open .icard__t{ color:var(--gold-bright); }
.icard:hover .icard__d, .icard.is-open .icard__d{ max-height:220px; opacity:1; margin-top:10px; }
@media (max-width:1080px){ .icards, .icards--6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .icards, .icards--6{ grid-template-columns:1fr 1fr; gap:10px; } .icard{ aspect-ratio:1; } .icard__t{ font-size:14px; } .icard__b{ left:12px; right:12px; bottom:12px; } .icard__d{ font-size:12px; } }

/* --- thẻ xếp chồng: nhấn để mở --- */
.ocards{ display:flex; margin-top:26px; }
.ocard{ flex:1 1 0; min-width:0; position:relative; padding:28px 26px 26px; border-radius:var(--r-md);
  background:linear-gradient(160deg, rgba(32,27,19,.96), rgba(22,19,14,.96)); border:1px solid var(--glass-bord);
  box-shadow:var(--glass-shadow); margin-left:-26px; cursor:pointer;
  transition:flex .65s var(--ease), transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.ocard:first-child{ margin-left:0; }
.ocard:hover{ transform:translateY(-4px); border-color:rgba(240,226,166,.34); z-index:1; }
.ocard.is-open{ flex:2.3 1 0; border-color:rgba(240,226,166,.5); z-index:2; box-shadow:0 40px 90px -30px rgba(0,0,0,.8); }
.ocard__n{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--gold); }
.ocard__t{ font-family:var(--display); font-weight:700; font-size:21px; line-height:1.24; margin:12px 0 0; color:var(--cream); text-wrap:balance; }
.ocard__d{ max-height:0; opacity:0; overflow:hidden; margin:0; font-size:14.5px; line-height:1.68; color:var(--muted); white-space:pre-line;
  transition:max-height .6s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); }
.ocard.is-open .ocard__d{ max-height:520px; opacity:1; margin-top:14px; }
.ocard__hint{ margin-top:16px; font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.ocard.is-open .ocard__hint{ display:none; }
.section--light .ocard{ background:rgba(255,253,248,.72); border-color:rgba(27,21,16,.12); }
.section--light .ocard__t{ color:var(--ink); } .section--light .ocard__d{ color:var(--ink-muted); } .section--light .ocard__n{ color:#6E5216; }
@media (max-width:760px){ .ocards{ flex-direction:column; } .ocard{ margin-left:0; margin-top:-14px; } .ocard:first-child{ margin-top:0; } .ocard.is-open{ flex:none; } }

/* --- slider thẻ ảnh + chữ đè --- */
.tslider{ position:relative; margin-top:26px; }
.tslider__track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 10px; }
.tslider__track::-webkit-scrollbar{ display:none; }
.tcard{ flex:0 0 clamp(230px, 30.5%, 356px); scroll-snap-align:start; position:relative; aspect-ratio:4/5; border-radius:var(--r-md);
  overflow:hidden; border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow); background:var(--espresso); }
.tcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.tcard:hover img{ transform:scale(1.06); }
.tcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,10,7,.95) 0%, rgba(12,10,7,.5) 50%, rgba(12,10,7,.05) 100%); }
.tcard__b{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; }
.tcard__t{ font-family:var(--display); font-weight:700; font-size:19px; line-height:1.25; color:#F6F1E8; margin:0; }
.tcard__d{ font-size:13.5px; line-height:1.58; color:#D9CFB8; margin:10px 0 0; }
.tslider__nav{ position:absolute; right:0; top:-54px; display:flex; gap:8px; }
.tslider__nav button{ width:38px; height:38px; border-radius:50%; background:rgba(20,16,11,.6); border:1px solid rgba(246,241,232,.28);
  color:#F6F1E8; cursor:pointer; font-size:15px; transition:background .3s var(--ease); }
.tslider__nav button:hover{ background:rgba(192,148,74,.85); }
.section--light .tslider__nav button{ background:rgba(255,253,248,.7); color:var(--ink); border-color:rgba(27,21,16,.2); }
@media (max-width:560px){ .tcard{ flex-basis:76%; } .tslider__nav{ display:none; } }

/* --- chi phí: 2 cột, rê chuột sáng cả cột --- */
.costcols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.costcol{ padding:30px 28px; border-radius:var(--r-md); background:var(--glass-bg); border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow);
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); }
.costcol:hover{ background:rgba(192,148,74,.14); border-color:var(--gold); transform:translateY(-3px); }
.costcol h4{ font-family:var(--display); font-weight:700; font-size:20px; margin:0 0 16px; color:var(--cream); }
.costcol ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.costcol li{ display:flex; gap:10px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.costcol li::before{ content:"✦"; color:var(--gold); font-size:11px; flex:none; margin-top:5px; }
.costcol:hover li{ color:var(--cream); }
.section--light .costcol h4{ color:var(--ink); } .section--light .costcol li{ color:var(--ink-muted); } .section--light .costcol:hover li{ color:var(--ink); }
@media (max-width:640px){ .costcols{ grid-template-columns:1fr; } }

/* --- quy trình: đường ngang 5 bước --- */
.pflow{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); margin-top:30px; }
.pflow::before{ content:""; position:absolute; left:10%; right:10%; top:23px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.65; }
.pstep{ text-align:center; padding:0 10px; position:relative; }
.pstep__n{ width:46px; height:46px; border-radius:50%; border:1px solid var(--gold); display:grid; place-items:center; margin:0 auto;
  font-family:var(--display); font-weight:700; font-size:15px; color:var(--gold); background:var(--bg); transition:all .45s var(--ease); }
.pstep__t{ margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--muted); transition:color .4s var(--ease); text-wrap:balance; }
.pstep:hover .pstep__n{ background:var(--foil); color:#1B1510; box-shadow:0 0 0 8px rgba(240,226,166,.14); transform:scale(1.08); }
.pstep:hover .pstep__t{ color:var(--gold-bright); }
.section--light .pstep__n{ background:var(--cream-bg); color:#6E5216; } .section--light .pstep__t{ color:var(--ink-muted); }
.section--light .pstep:hover .pstep__t{ color:var(--ink); }
@media (max-width:760px){ .pflow{ grid-template-columns:1fr; gap:14px; } .pflow::before{ display:none; }
  .pstep{ display:flex; gap:14px; text-align:left; align-items:flex-start; padding:0; } .pstep__n{ margin:0; flex:none; } .pstep__t{ margin-top:11px; } }

/* --- danh sách sản phẩm: bản đồ + pin theo sản phẩm --- */
.pmap{ margin-top:34px; }
.geomap--dubai{ aspect-ratio:8/7; max-width:min(100%, 82vh); margin:0 auto; background:#111; }
.geomap__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; z-index:0; filter:saturate(.75) brightness(.9) contrast(1.05); }
.geomap__credit{ position:absolute; right:10px; bottom:6px; z-index:4; font-size:10px; color:rgba(246,241,232,.5); font-family:var(--sans); }
.gpin--p i{ width:10px; height:10px; }
.gpin--p span{ font-size:12px; color:var(--gold-bright); font-family:var(--display); font-weight:700; }
.gpin--p:not(.is-on) span{ display:none; }
.gpin--p.is-on i{ background:var(--gold-bright); box-shadow:0 0 0 5px rgba(240,226,166,.22), 0 0 22px rgba(240,226,166,.55); }
.gpin.is-dim{ opacity:.35; }
.gpin.is-dim i::after{ animation:none; }
.pmap .citytabs{ margin-top:30px; }
.prop.is-hl{ outline:2px solid var(--gold-bright); outline-offset:4px; }
.propgrid + .more{ text-align:center; margin-top:28px; }
.gtip small{ color:var(--muted); }
@media (max-width:640px){ .geomap--dubai{ aspect-ratio:1; max-width:100%; } }

/* --- AIA: tổng quan, phù hợp với, giá trị, minh hoạ --- */
.ovgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px; margin-top:34px; }
.ovcard{ padding:24px 22px; border-radius:var(--r-md); background:var(--glass-bg); border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow); }
.ovcard__k{ font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.ovcard__v{ font-family:var(--display); font-weight:700; font-size:18px; line-height:1.3; margin-top:10px; color:var(--cream); text-wrap:balance; }
.fitcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
.fitcard{ padding:24px 22px; border-radius:var(--r-md); background:var(--glass-bg); border:1px solid var(--glass-bord);
  transition:border-color .4s var(--ease), transform .4s var(--ease); cursor:default; }
.fitcard:hover{ border-color:var(--gold); transform:translateY(-4px); }
.fitcard__t{ font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1.3; margin:0; color:var(--cream); }
.fitcard__d{ max-height:0; opacity:0; overflow:hidden; margin:0; font-size:13.5px; line-height:1.6; color:var(--muted);
  transition:max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); }
.fitcard:hover .fitcard__d, .fitcard.is-open .fitcard__d{ max-height:200px; opacity:1; margin-top:10px; }
.fitcard--plain .fitcard__t{ font-size:15px; font-weight:600; color:var(--muted); }
.fitcard--plain:hover .fitcard__t{ color:var(--cream); }
@media (max-width:1080px){ .fitcards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fitcards{ grid-template-columns:1fr; } }
.valcols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-top:26px; }
.valcol{ padding:28px 26px; border-radius:var(--r-md); background:var(--glass-bg); border:1px solid var(--glass-bord); border-top:3px solid var(--gold); }
.valcol--g{ border-top-color:#4C82C2; } .valcol--r{ border-top-color:#F0D57A; } .valcol--t{ border-top-color:#E0863A; }
.valcol h4{ font-family:var(--display); font-weight:700; font-size:19px; margin:0 0 12px; color:var(--cream); }
.valcol p{ margin:0; font-size:14.5px; line-height:1.66; color:var(--muted); white-space:pre-line; }
.profile{ display:grid; grid-template-columns:180px 1fr; gap:26px; align-items:center; padding:26px; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-bord); margin-top:30px; max-width:640px; }
.profile img{ width:100%; aspect-ratio:1; object-fit:cover; object-position:center 20%; border-radius:50%; border:2px solid rgba(240,226,166,.35); }
.profile__n{ font-family:var(--display); font-weight:700; font-size:24px; margin:0; color:var(--cream); }
.profile__d{ margin:10px 0 0; font-size:14.5px; line-height:1.7; color:var(--muted); white-space:pre-line; }
@media (max-width:560px){ .profile{ grid-template-columns:1fr; text-align:center; } .profile img{ width:140px; margin:0 auto; } }
.ptable--num th, .ptable--num td{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:13.5px; padding:12px 14px; }
.ptable--num th.pin, .ptable--num td:first-child{ text-align:left; position:sticky; left:0; background:var(--panel); z-index:2; }
.ptable--num thead th{ text-align:center; vertical-align:bottom; }
.ptable--num thead tr:first-child th{ background:rgba(192,148,74,.16); color:var(--gold-bright); }
.ptable--num tbody tr:hover td:first-child{ background:#2A2419; }
.ptable--num tbody td.g{ color:#9DC2F0; } .ptable--num tbody td.ng{ color:#F0D57A; } .ptable--num tbody td.tot{ color:var(--cream); font-weight:600; }
.tnote{ font-size:12.5px; line-height:1.7; color:var(--dim); margin:14px 0 0; }
.faq-a table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:13.5px; }
.faq-a th, .faq-a td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-soft); color:var(--muted); }
.faq-a th{ color:var(--gold); font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }
.faq-a td:last-child{ text-align:right; color:var(--cream); white-space:nowrap; }
/* v61b · pin sản phẩm: nhãn chỉ hiện khi rê/chọn — nhiều dự án cùng thành phố chồng nhau trên bản đồ cả nước */
.gpin--p span{ display:none !important; }
.gpin--p:hover span, .gpin--p:focus span{ display:inline !important; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  white-space:nowrap; background:rgba(24,20,15,.9); padding:4px 9px; border-radius:8px; border:1px solid var(--glass-bord); z-index:5; }
.gpin--p{ transform:translate(-50%,-50%); }
/* v61c · ô trống hàng cuối ở tablet/mobile cho các lưới V2 */
@media (max-width:560px){ .proofstrip > .pi:last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (max-width:1080px){
  .ovgrid{ grid-template-columns:1fr 1fr; }
  .valcols{ grid-template-columns:1fr 1fr; }
  .ovgrid > *:last-child:nth-child(odd), .valcols > *:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (max-width:560px){ .ovgrid, .valcols{ grid-template-columns:1fr; } }

/* ==========================================================================
   v62 — dọn ô trống hàng cuối ở lưới 3 cột (quét local 50 trang)
   ========================================================================== */
/* .cross-grid và .cardgrid của trang Phương pháp: số thẻ không chia hết cho 3
   -> dùng flex canh giữa như .news-grid, hàng cuối luôn cân */
.cross-grid{ display:flex; flex-wrap:wrap; justify-content:center; }
.cross-grid > *{ flex:0 1 calc((100% - 2*var(--cg, 26px))/3); min-width:0; }
.section .cardgrid:has(> :nth-child(5)):not(:has(> :nth-child(7))){
  display:flex; flex-wrap:wrap; justify-content:center;
}
.section .cardgrid:has(> :nth-child(5)):not(:has(> :nth-child(7))) > *{
  flex:0 1 calc((100% - 2*26px)/3); min-width:0;
}
@media (max-width:1080px){
  .cross-grid > *{ flex-basis:calc((100% - 26px)/2); }
  .section .cardgrid:has(> :nth-child(5)):not(:has(> :nth-child(7))) > *{ flex-basis:calc((100% - 26px)/2); }
}
@media (max-width:640px){
  .cross-grid > *{ flex-basis:100%; }
  .section .cardgrid:has(> :nth-child(5)):not(:has(> :nth-child(7))) > *{ flex-basis:100%; }
}
/* .ovgrid: auto-fit cho ra 5 cột với 6 thẻ (AIA SG) -> đặt cột theo số thẻ */
.ovgrid{ grid-template-columns:repeat(4,1fr); }
.ovgrid:has(> :nth-child(5)){ grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px){ .ovgrid, .ovgrid:has(> :nth-child(5)){ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ovgrid, .ovgrid:has(> :nth-child(5)){ grid-template-columns:1fr; } }
/* .valcols: đặt cột theo số thẻ, không để auto-fit tạo track thừa */
.valcols{ grid-template-columns:repeat(2,1fr); }
.valcols:has(> :nth-child(3)){ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .valcols, .valcols:has(> :nth-child(3)){ grid-template-columns:1fr; } }

/* ==========================================================================
   v63 — thẻ xếp chồng bị kẹp lớp; mũi tên slider khi không có gì để cuộn
   ========================================================================== */
/* Thẻ giữa trước đây không có z-index nên bị thẻ trước (z:2) và thẻ sau (DOM sau)
   đè từ hai phía, nhìn như bị cắt. Xếp lớp tăng dần như bộ bài; thẻ mở lên trên cùng. */
.ocard{ z-index:1; }
.ocard:nth-child(2){ z-index:2; } .ocard:nth-child(3){ z-index:3; }
.ocard:nth-child(4){ z-index:4; } .ocard:nth-child(5){ z-index:5; }
.ocard.is-open{ z-index:10; }
.ocard:hover{ z-index:11; }
/* chừa chỗ cho phần bị chồng để chữ không dính mép */
.ocards .ocard + .ocard{ padding-left:46px; }
/* viền sáng bên trái làm rõ lớp chồng */
.ocards .ocard + .ocard::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(240,226,166,.34),transparent); }
@media (max-width:760px){
  .ocards .ocard + .ocard{ padding-left:26px; }
  .ocards .ocard + .ocard::before{ left:14px; right:14px; top:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg,transparent,rgba(240,226,166,.34),transparent); }
}
/* Mũi tên: ẩn hẳn khi track không tràn (Úc chỉ có 3 loại hình, vừa khít khung) */
.tslider__nav[hidden]{ display:none !important; }
.tslider__nav button[disabled]{ opacity:.32; cursor:default; }
.tslider__nav button[disabled]:hover{ background:rgba(20,16,11,.6); }
.section--light .tslider__nav button[disabled]:hover{ background:rgba(255,253,248,.7); }

/* ==========================================================================
   v64 — bỏ chồng lấn thẻ mô hình đầu tư; bỏ viền tối quanh thẻ ảnh
   ========================================================================== */
/* 1 · Thẻ "Mô hình đầu tư": xếp cạnh nhau có khoảng cách, không chồng mép.
   Kiểu chồng cũ tạo vết khía ở mép thẻ, nhìn như lỗi render. */
.ocards{ gap:16px; }
.ocards .ocard,
.ocards .ocard + .ocard{ margin-left:0; padding-left:26px; }
.ocards .ocard + .ocard::before{ display:none; }
.ocard{ z-index:auto; }
.ocard.is-open, .ocard:hover{ z-index:2; }
@media (max-width:760px){ .ocards{ gap:12px; } .ocards .ocard{ margin-top:0; padding-left:26px; } }

/* 2 · Thẻ ảnh không cần đường viền — trên nền kem nó thành một nét tối quanh hình */
.icard, .tcard, .pogal__i, .slider, .leadc__ph, .art__media, .opp__media{ border:0 !important; }
.icard, .tcard, .pogal__i{ box-shadow:0 22px 50px -26px rgba(0,0,0,.45); }
.section--light .icard, .section--light .tcard{ box-shadow:0 20px 44px -26px rgba(27,21,16,.30); }
.gcard:has(.gm){ border-color:transparent; }

/* ==========================================================================
   v65 — mở/đóng nội dung mượt bằng grid-template-rows
   max-height cố định chạy tới một con số cao hơn nội dung thật, nên phần mở
   xong sớm rồi đứng im -> mắt thấy giật; và nội dung dài hơn số đó thì bị cắt
   (FAQ AIA có bảng thưởng cao hơn 320px). 0fr→1fr chạy đúng chiều cao thật.
   ========================================================================== */
.pillar__d, .icard__d, .ocard__d, .fitcard__d, .faq-a{
  display:grid; grid-template-rows:0fr; max-height:none !important; overflow:visible;
  transition:grid-template-rows .55s var(--ease), opacity .4s var(--ease), margin .4s var(--ease);
}
.pillar__d > .rv, .icard__d > .rv, .ocard__d > .rv, .fitcard__d > .rv, .faq-a > .rv{
  overflow:hidden; min-height:0;
}
.pillar:hover .pillar__d,
.icard:hover .icard__d, .icard.is-open .icard__d,
.ocard.is-open .ocard__d,
.fitcard:hover .fitcard__d, .fitcard.is-open .fitcard__d,
.faq-item.open .faq-a{ grid-template-rows:1fr; }
/* opacity mở sớm hơn chiều cao một chút để chữ không "nhảy" vào cuối */
.icard:hover .icard__d, .icard.is-open .icard__d,
.fitcard:hover .fitcard__d, .fitcard.is-open .fitcard__d,
.ocard.is-open .ocard__d, .pillar:hover .pillar__d{ opacity:1; }
.faq-a{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .pillar__d, .icard__d, .ocard__d, .fitcard__d, .faq-a{ transition:none; }
}

/* ==========================================================================
   v66 — Danh sách sản phẩm: bản đồ tương tác tràn ngang (Leaflet + OSM/CARTO)
   ========================================================================== */
.lmap-wrap{ position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-top:34px; }
.lmap{ height:clamp(380px, 56vh, 620px); width:100%; background:#14120D;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lmap:focus{ outline:none; }
/* nền tối cho tile để hợp tông trang */
.lmap .leaflet-tile-pane{ filter:saturate(.82) contrast(1.03); }
.lmap.leaflet-container{ background:#14120D; font-family:var(--sans); }
.leaflet-container{ background:#14120D; }
/* pin vàng thay marker mặc định */
/* .lpin là <span>: inline thì width/height vô hiệu, chấm <i> inset:0 co về 0×0 */
.lpin{ display:block; position:relative; width:16px; height:16px; }
.lpin i{ position:absolute; inset:0; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px rgba(20,16,11,.85), 0 0 14px rgba(192,148,74,.9); transition:all .3s var(--ease); }
.lpin i::after{ content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px solid rgba(192,148,74,.6); animation:gpulse 2.6s var(--ease) infinite; }
.leaflet-marker-icon:hover .lpin i, .lpin.is-on i{ background:var(--gold-bright); transform:scale(1.25);
  box-shadow:0 0 0 3px rgba(20,16,11,.9), 0 0 22px rgba(240,226,166,.95); }
.lpin.is-dim{ opacity:.34; }
.lpin.is-dim i::after{ animation:none; }
/* popup theo tông site */
.lmap .leaflet-popup-content-wrapper{ background:rgba(24,20,15,.97); color:var(--cream);
  border:1px solid var(--glass-bord); border-radius:var(--r-md); box-shadow:var(--glass-shadow); padding:0; }
.lmap .leaflet-popup-content{ margin:0; width:250px !important; }
.lmap .leaflet-popup-tip{ background:rgba(24,20,15,.97); border:1px solid var(--glass-bord); }
.lmap .leaflet-popup-close-button{ color:var(--muted); padding:10px 10px 0 0; }
.lmap .leaflet-popup-close-button:hover{ color:var(--gold-bright); }
.lpop img{ width:100%; height:118px; object-fit:cover; display:block; border-radius:var(--r-md) var(--r-md) 0 0; }
.lpop__b{ padding:14px 16px 16px; }
.lpop__t{ font-family:var(--display); font-weight:700; font-size:15.5px; line-height:1.28; margin:0; color:var(--gold-bright); }
.lpop__a{ font-size:12.5px; color:var(--muted); margin:7px 0 0; line-height:1.5; }
.lpop__p{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--cream); margin:8px 0 0; }
.lpop__go{ display:inline-flex; gap:6px; margin-top:12px; font-size:12.5px; font-weight:600;
  color:var(--gold-bright); text-decoration:none; }
.lpop__go:hover{ text-decoration:underline; }
/* điều khiển zoom + attribution */
.lmap .leaflet-control-zoom a{ background:rgba(24,20,15,.92); color:var(--cream);
  border:1px solid var(--glass-bord); width:32px; height:32px; line-height:30px; }
.lmap .leaflet-control-zoom a:hover{ background:rgba(192,148,74,.85); color:#1B1510; }
.lmap .leaflet-control-attribution{ background:rgba(20,16,11,.78); color:var(--dim); font-size:10.5px; }
.lmap .leaflet-control-attribution a{ color:var(--muted); }
/* nút xem toàn bộ */
/* nav cố định cao ~100px che mất góc trên -> đặt nút ở góc dưới-trái (Leaflet để trống chỗ này) */
.lmap__all{ position:absolute; left:20px; bottom:24px; z-index:500; font-family:var(--sans);
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(24,20,15,.92); color:var(--gold-bright); border:1px solid var(--glass-bord);
  border-radius:99px; padding:9px 16px; cursor:pointer; transition:all .3s var(--ease); }
.lmap__all:hover{ background:var(--foil); color:#1B1510; border-color:transparent; }
@media (max-width:640px){ .lmap{ height:clamp(320px,48vh,420px); } .lmap__all{ left:12px; bottom:16px; font-size:11px; padding:8px 13px; } }
.pmap .citytabs{ margin-top:30px; }

/* ==========================================================================
   v71 — mỗi sản phẩm trong danh sách có biểu tượng vị trí, bấm để xem trên bản đồ
   ========================================================================== */
.prop__loc{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:0;
  font-family:inherit; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  cursor:pointer; text-align:left; line-height:1.45; transition:color .3s var(--ease); }
.prop__pin{ width:13px; height:13px; flex:none; fill:currentColor; transition:transform .3s var(--ease); }
.prop__loc:hover{ color:var(--gold-bright); }
.prop__loc:hover .prop__pin{ transform:translateY(-2px) scale(1.12); }
.prop__loc:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.section--light .prop__loc{ color:#6E5216; }
.section--light .prop__loc:hover{ color:var(--ink); }

/* v73b · popup gọn lại để luôn lọt trong khung bản đồ (đặc biệt trên mobile) */
.lpop img{ height:104px; }
@media (max-width:640px){
  .lmap .leaflet-popup-content{ width:216px !important; }
  .lpop img{ height:86px; }
  .lpop__b{ padding:12px 13px 13px; }
  .lpop__t{ font-size:14.5px; }
}

/* ==========================================================================
   v76 — phân trang danh sách sản phẩm
   ========================================================================== */
.pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:34px; flex-wrap:wrap; }
.pager__nums{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.pager__n, .pager__arw{
  min-width:40px; height:40px; padding:0 12px; border-radius:99px; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; font-weight:600; line-height:1;
  color:var(--muted); background:transparent; border:1px solid var(--line);
  transition:all .3s var(--ease); }
.pager__n:hover, .pager__arw:hover:not([disabled]){ color:var(--cream); border-color:var(--gold); }
.pager__n.active{ background:var(--foil); color:#1B1510; border-color:transparent; }
.pager__arw[disabled]{ opacity:.3; cursor:default; }
.section--light .pager__n, .section--light .pager__arw{ color:var(--ink-muted); border-color:rgba(27,21,16,.2); }
.section--light .pager__n:hover, .section--light .pager__arw:hover:not([disabled]){ color:var(--ink); border-color:var(--gold-deep); }
.prop[hidden]{ display:none !important; }
@media (max-width:560px){ .pager__n, .pager__arw{ min-width:36px; height:36px; font-size:12.5px; padding:0 10px; } }

/* ==========================================================================
   v78 — "Bảo vệ gia đình và di sản" là thông tin, không phải hỏi-đáp:
   hiện hết mọi mục kèm mô tả ngắn thay vì phải bấm từng cái
   ========================================================================== */
/* flex + canh giữa: 11 quyền lợi không chia hết cho 3, hàng cuối vẫn cân */
.bengrid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:34px; align-items:stretch; }
.bengrid > .bencard{ flex:0 1 calc((100% - 36px)/3); min-width:0; }
.bencard{ position:relative; padding:26px 24px 24px; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow);
  transition:border-color .4s var(--ease), transform .4s var(--ease); }
.bencard:hover{ border-color:rgba(240,226,166,.4); transform:translateY(-3px); }
.bengrid > .bencard--wide{ flex:0 0 100%; }
.bencard__n{ font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--gold); }
.bencard__t{ font-family:var(--display); font-weight:700; font-size:17.5px; line-height:1.28;
  margin:11px 0 0; color:var(--cream); text-wrap:balance; }
.bencard__d{ margin-top:11px; }
.bencard__d p{ margin:0; font-size:14px; line-height:1.65; color:var(--muted); white-space:pre-line; }
.bencard__d table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:13.5px; }
.bencard__d th, .bencard__d td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-soft); color:var(--muted); }
.bencard__d th{ color:var(--gold); font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.bencard__d td:last-child{ text-align:right; color:var(--cream); white-space:nowrap; font-weight:600; }
.bencard__d tr:last-child td{ border-bottom:0; }
.section--light .bencard__t{ color:var(--ink); }
.section--light .bencard__d p, .section--light .bencard__d td{ color:var(--ink-muted); }
.section--light .bencard__n{ color:#6E5216; }
/* :not(--wide) — nếu không, media query ghi đè luôn thẻ chứa bảng và nó thôi trải ngang */
@media (max-width:1080px){ .bengrid > .bencard:not(.bencard--wide){ flex-basis:calc((100% - 18px)/2); } }
@media (max-width:640px){ .bengrid{ gap:14px; } .bengrid > .bencard:not(.bencard--wide){ flex-basis:100%; } .bencard{ padding:22px 20px; } }


/* ============================================================
   v80 · CỘT GHIM CỦA BẢNG SỐ — hết đè chữ khi cuộn ngang
   1) Ô header của cột ghim đang lấy nền rgba(192,148,74,.16): TRONG SUỐT.
      Cột cuộn qua bên dưới hiện xuyên lên, chữ chồng chữ (ảnh client gửi).
      Giữ nguyên sắc vàng nhưng đặt nó thành background-image chồng lên nền đục.
   2) Ghim theo th:first-child là sai với header nhiều hàng (rowspan): ô đầu của
      hàng 2–4 là cột khác, cuộn sang phải là trượt đè lên cột ghim. Nay chỉ ghim
      ô .pin do generator đánh dấu đúng cột 1.
   3) Viền + đổ bóng phải để cột ghim tách bạch khỏi phần đang cuộn.
   ============================================================ */
.ptable--num thead tr th.pin{
  background-color:var(--panel);
  background-image:linear-gradient(rgba(192,148,74,.16), rgba(192,148,74,.16));
}
.ptable--num th.pin, .ptable--num td:first-child{
  box-shadow:1px 0 0 var(--line-soft), 12px 0 14px -12px rgba(0,0,0,.65);
}
.section--light .ptable--num th.pin, .section--light .ptable--num td:first-child{ background-color:#FFFDF8; }
.section--light .ptable--num thead tr th.pin{ background-image:linear-gradient(rgba(192,148,74,.14), rgba(192,148,74,.14)); }
/* Trên điện thoại cột ghim rộng 373px mà khung nhìn chỉ 348px: ghim thành vô nghĩa
   (che gần hết bảng) và ở cuối hành trình cuộn còn bị đẩy lệch khỏi mép trái.
   Cho nhãn xuống dòng và chặn bề ngang — số liệu vẫn giữ nowrap. */
@media (max-width:640px){
  .ptable--num th.pin, .ptable--num td:first-child{ white-space:normal; max-width:42vw; min-width:104px; }
}
/* CTA "Đặt lịch tư vấn" nay cuộn xuống form ngay trên trang (đã bỏ trang tư vấn riêng).
   Chừa chỗ cho thanh điều hướng dính, nếu không tiêu đề khối bị nó che. */
.signup{ scroll-margin-top:104px; }   /* = chiều cao thanh nav cố định */

/* ============================================================
   v85 · HOVER ĐỒNG NHẤT CHO THẺ THÔNG TIN TRONG LƯỚI
   Chuẩn sẵn có của site là nhấc 3–5px + viền chuyển vàng
   (.bcard .bencard .ocard .wsol .fitcard). Bốn thẻ dưới cùng họ
   nhưng chưa khai báo hover nên rê chuột vào không phản hồi gì.
   ============================================================ */
.ovcard, .valcol, .kpi, .vs__col{
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.ovcard:hover, .kpi:hover, .vs__col:hover{ transform:translateY(-4px); border-color:rgba(240,226,166,.40); }
/* .valcol có viền trên màu riêng cho từng nhóm giá trị — chỉ đổi 3 cạnh còn lại,
   dùng border-color sẽ xoá luôn màu nhận diện ở cạnh trên. */
.valcol:hover{ transform:translateY(-4px);
  border-left-color:rgba(240,226,166,.40); border-right-color:rgba(240,226,166,.40);
  border-bottom-color:rgba(240,226,166,.40); }

/* .costcol chỉ xuất hiện trong section nền sáng, ở đó viền lúc nghỉ là
   rgba(27,21,16,.10) gần như vô hình nên hover cũ (đổi viền + nhấc 3px)
   rất khó nhận ra. Thêm bóng đổ sâu hơn để cú nhấc đọc được trên nền kem. */
.costcol{ transition:background .4s var(--ease), border-color .4s var(--ease),
  transform .4s var(--ease), box-shadow .4s var(--ease); }
.costcol:hover{ transform:translateY(-4px); box-shadow:0 38px 66px -30px rgba(27,21,16,.5); }

/* ==========================================================================
   v88 — Brief v2 "Review website PO v2 260922": Private Equity · Private
   Credit · Family Office. Markup ở astro-pilot/src/lib/v3.js (dùng chung cho
   route CMS và bộ sinh trang tĩnh tools/v3/v3build.mjs).
   Tái dùng khối v2: .icard, .tslider, .pflow, .faq-list, .signup.
   Khối mới: tiêu đề phần không nhãn, sơ đồ luồng 4 bước, sơ đồ gia sản,
   thẻ quy trình, thẻ cơ hội đầu tư, thẻ đối tác.
   ========================================================================== */
/* Nền thẻ của hai sơ đồ. Ảnh mẫu client gửi dùng xanh lục đậm; site giữ tông
   than ấm + vàng. Muốn theo đúng ảnh mẫu thì đổi hai biến này sang
   #174a3e / #0b2a23 — mọi thứ khác giữ nguyên. */
.v3-sec{ --v3-panel-a:#231D15; --v3-panel-b:#15110C; scroll-margin-top:84px; }

/* tiêu đề phần: brief không có nhãn nhỏ, vạch vàng đứng thay chỗ nhãn */
.v3-head{ margin-bottom:clamp(40px,5vw,60px); }
.v3-head .l::before{ content:""; display:block; width:46px; height:1px; background:var(--gold); margin-bottom:22px; }
.v3-head h2{ margin-top:0; }
.v3-head .lead{ max-width:560px; }
.v3-head + .subh{ margin-top:0; }

/* nút đơn canh giữa cuối mục + nút trong thẻ cơ hội: cùng kiểu nút hero v2 */
.v3-cta{ display:flex; justify-content:center; margin-top:clamp(44px,5vw,60px); }
.v3-cta .btn, .oppc__cta{ text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; }

/* slider: dòng tên tiếng Anh dưới tên tiếng Việt */
.tcard__en{ display:block; margin-top:6px; font-family:var(--sans); font-weight:400; font-size:12.5px;
  letter-spacing:.06em; line-height:1.4; color:var(--gold-bright); }

/* --- sơ đồ luồng 4 bước: Nhà đầu tư → Cấu trúc → Tài sản → Dòng tiền về --- */
.mflow{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px; }
.mstep{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:30px 22px 32px; border-radius:var(--r-md);
  background:radial-gradient(120% 80% at 50% 0%, var(--v3-panel-a) 0%, var(--v3-panel-b) 100%);
  border:1px solid rgba(192,148,74,.42); box-shadow:0 26px 56px -30px rgba(27,21,16,.55);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.mstep__n{ position:absolute; left:20px; top:14px; font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:.04em; color:var(--gold); }
.mstep__ic{ width:88px; height:88px; border-radius:50%; display:grid; place-items:center; color:var(--gold-bright);
  border:1px solid rgba(192,148,74,.6); box-shadow:inset 0 0 0 6px rgba(192,148,74,.07), 0 0 0 1px rgba(192,148,74,.12);
  transition:box-shadow .45s var(--ease), color .45s var(--ease); }
.mstep__ic svg{ width:44px; height:44px; }
.mstep__t{ margin:22px 0 0; font-family:var(--display); font-weight:700; font-size:16px; line-height:1.35;
  letter-spacing:.06em; text-transform:uppercase; color:#F6F1E8; }
.mstep__t::after{ content:""; display:block; width:30px; height:1px; margin:16px auto 0; background:var(--gold); }
.mstep__d{ margin:14px 0 0; font-size:14.5px; line-height:1.6; color:#D9CFB8; }
/* mũi tên nối hai thẻ, nằm giữa khe */
.mstep:not(:last-child)::after{ content:""; position:absolute; top:50%; right:-38px; width:28px; height:14px;
  transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M1 7h25M20 1.5 26 7l-6 5.5' fill='none' stroke='%23C0944A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.mstep:hover{ transform:translateY(-4px); border-color:rgba(240,226,166,.7); box-shadow:0 36px 70px -30px rgba(27,21,16,.7); }
.mstep:hover .mstep__ic{ box-shadow:inset 0 0 0 6px rgba(192,148,74,.16), 0 0 30px rgba(240,226,166,.22); }
@media (max-width:1080px){
  .mflow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 48px; }
  .mstep:nth-child(2n)::after{ display:none; }
}
@media (max-width:640px){
  .mflow{ grid-template-columns:1fr; gap:36px; }
  /* điện thoại: biểu tượng trái, chữ phải — bốn thẻ dựng đứng sẽ dài gần hai màn hình */
  .mstep{ display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:18px; align-items:center;
    text-align:left; padding:20px 20px 20px 18px; }
  .mstep__ic{ grid-column:1; grid-row:1 / 4; width:64px; height:64px; }
  .mstep__ic svg{ width:32px; height:32px; }
  .mstep__n{ position:static; grid-column:2; grid-row:1; font-size:14px; }
  .mstep__t{ grid-column:2; grid-row:2; margin:2px 0 0; font-size:14.5px; }
  .mstep__t::after{ margin:10px 0 0; }
  .mstep__d{ grid-column:2; grid-row:3; margin:8px 0 0; font-size:14px; }
  .mstep:not(:last-child)::after{ display:block; top:auto; bottom:-26px; right:auto; left:50px;
    transform:translateX(-50%) rotate(90deg); width:22px; height:12px; }
}

/* --- sơ đồ gia sản: Gia đình → iCanfield → 5 nhánh ------------------------ */
.orgc{ --noi:rgba(192,148,74,.75); margin-top:30px; display:flex; flex-direction:column; align-items:center; }
.orgc__node{ position:relative; display:flex; align-items:center; gap:16px; border-radius:16px;
  background:radial-gradient(120% 100% at 50% 0%, var(--v3-panel-a) 0%, var(--v3-panel-b) 100%);
  border:1px solid rgba(192,148,74,.5); box-shadow:0 26px 56px -30px rgba(27,21,16,.55); color:#F6F1E8; }
.orgc__node--top{ padding:16px 30px; }
.orgc__node--top .orgc__t{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.14em; text-transform:uppercase; }
.orgc__node--top .orgc__ic{ width:40px; height:40px; color:var(--gold-bright); }
.orgc__node--mid{ margin-top:52px; padding:24px clamp(28px,5vw,64px); gap:20px; border-color:rgba(240,226,166,.55);
  box-shadow:0 0 0 1px rgba(192,148,74,.18), 0 34px 70px -30px rgba(27,21,16,.65); }
.orgc__node--mid .orgc__t{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:.02em;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; }
.orgc__logo{ height:44px; width:auto; }
/* nối dọc giữa các tầng */
.orgc__node--mid::before{ content:""; position:absolute; left:50%; top:-53px; width:1px; height:52px; background:var(--noi); }
.orgc__node--mid::after{ content:""; position:absolute; left:50%; bottom:-27px; width:1px; height:26px; background:var(--noi); }
.orgc__branches{ list-style:none; margin:52px 0 0; padding:0; width:100%; position:relative;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
/* thanh ngang nối 5 nhánh: từ tâm cột đầu tới tâm cột cuối */
.orgc__branches::before{ content:""; position:absolute; top:-26px; height:1px; background:var(--noi);
  left:calc((100% - 64px) / 10); right:calc((100% - 64px) / 10); }
.orgc__b{ position:relative; padding:24px 20px 24px; border-radius:var(--r-md);
  background:radial-gradient(120% 80% at 50% 0%, var(--v3-panel-a) 0%, var(--v3-panel-b) 100%);
  border:1px solid rgba(192,148,74,.42); box-shadow:0 22px 48px -30px rgba(27,21,16,.5);
  transition:transform .45s var(--ease), border-color .45s var(--ease); }
.orgc__b::before{ content:""; position:absolute; left:50%; top:-27px; width:1px; height:26px; background:var(--noi); }
.orgc__b .orgc__ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin:0 auto;
  border:1px solid rgba(192,148,74,.6); color:var(--gold-bright); }
.orgc__b .orgc__ic svg{ width:28px; height:28px; }
.orgc__bt{ margin:16px 0 0; text-align:center; font-family:var(--display); font-weight:700; font-size:14.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); line-height:1.35; }
.orgc__bt::after{ content:""; display:block; width:100%; height:1px; margin-top:14px;
  background:linear-gradient(90deg, transparent, rgba(192,148,74,.55), transparent); }
.orgc__pts{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.orgc__pts li{ position:relative; padding-left:15px; font-size:13.5px; line-height:1.5; color:#E3DAC6; }
.orgc__pts li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.orgc__b:hover{ transform:translateY(-4px); border-color:rgba(240,226,166,.7); }
.orgc__node--top .orgc__ic svg, .orgc__b .orgc__ic svg{ display:block; }
@media (max-width:1080px){
  .orgc__branches{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .orgc__branches::before, .orgc__b::before{ display:none; }
  .orgc__node--mid::after{ display:none; }
  .orgc__branches{ margin-top:28px; }
}
@media (max-width:640px){
  .orgc__branches{ grid-template-columns:1fr 1fr; gap:12px; }
  .orgc__b{ padding:18px 14px; }
  .orgc__node--mid{ flex-direction:column; text-align:center; gap:12px; }
  .orgc__node--top{ padding:14px 22px; }
}
@media (max-width:420px){ .orgc__branches{ grid-template-columns:1fr; } }

/* --- quy trình dạng đường ngang: bước dài chữ thì canh trái cho dễ đọc --- */
/* Số cột chỉ khai trong khoảng màn hình rộng: khai trần thì nó đè luôn quy tắc
   một cột của điện thoại (cùng độ ưu tiên, đứng sau) — 6 cột chen trong 375px. */
.v3-sec .pstep__n{ margin:0; }
.v3-sec .pstep__t{ font-size:14.5px; line-height:1.6; text-wrap:pretty; }
@media (min-width:761px){
  .v3-sec .pflow::before{ left:23px; right:0; background:linear-gradient(90deg, var(--gold), rgba(192,148,74,.12)); opacity:.8; }
  .v3-sec .pstep{ text-align:left; padding:0 16px 0 0; }
}
@media (min-width:1081px){
  /* gap chỉ khai ở đây: khai ở khoảng ≥761px thì .v3-sec .pflow (0,2,0) đè mất
     row-gap 30px của khổ tablet bên dưới — hai hàng bước dính sát nhau. */
  .v3-sec .pflow{ gap:0 6px; }
  .pflow--n4{ grid-template-columns:repeat(4,1fr); }
  .pflow--n6{ grid-template-columns:repeat(6,1fr); }
}
@media (min-width:761px) and (max-width:1080px){
  .pflow--n6, .pflow--n5{ grid-template-columns:repeat(3,1fr); gap:30px 6px; }
  .pflow--n4{ grid-template-columns:repeat(2,1fr); gap:30px 6px; }
  .v3-sec .pflow::before{ display:none; }
}

/* --- thẻ quy trình có tiêu đề (FO · Vai trò của iCanfield) --------------- */
.pcards{ list-style:none; margin:30px 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.pcards::before{ content:""; position:absolute; top:46px; left:44px; right:44px; height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(192,148,74,.2)); }
.pcard{ position:relative; padding:28px 24px 30px; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.pcard__n{ position:relative; z-index:1; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gold); background:var(--bg); font-family:var(--display); font-weight:700; font-size:13px;
  color:var(--gold); transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.pcard__t{ margin:20px 0 0; font-family:var(--display); font-weight:700; font-size:19px; line-height:1.3;
  color:var(--cream); transition:color .4s var(--ease); text-wrap:balance; }
.pcard__d{ margin:12px 0 0; font-size:14.5px; line-height:1.68; color:var(--muted); }
.pcard:hover{ transform:translateY(-4px); border-color:rgba(240,226,166,.45); }
.pcard:hover .pcard__n{ background:var(--foil); color:#1B1510; box-shadow:0 0 0 6px rgba(240,226,166,.14); }
.pcard:hover .pcard__t{ color:var(--gold-bright); }
.section--light .pcard{ background:rgba(255,253,248,.74); box-shadow:0 22px 50px -32px rgba(60,46,20,.35); }
.section--light .pcard__n{ background:var(--cream-bg); color:#6E5216; }
.section--light .pcard:hover{ border-color:rgba(192,148,74,.6); box-shadow:0 36px 66px -30px rgba(27,21,16,.45); }
.section--light .pcard:hover .pcard__t{ color:#6E5216; }
@media (max-width:1080px){ .pcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pcards::before{ display:none; } }
@media (max-width:640px){ .pcards{ grid-template-columns:1fr; } }

/* --- thẻ cơ hội đầu tư: ảnh trái, thông số phải ---------------------------- */
/* Thẻ luôn nền tối, nên khoá lại bộ màu chữ ngay trên thẻ: nền các phần xen kẽ theo
   vị trí, và trong .section--light các biến --cream/--muted là màu mực tối. */
.oppc{ --cream:#F5F2EC; --muted:#C2B492; --dim:#918468; --line-soft:rgba(245,242,236,.08); color:var(--cream); }
.section--light .oppc .disc{ color:var(--dim); background:rgba(192,148,74,.06); }
.oppc{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, rgba(34,28,20,.96), rgba(20,17,12,.96));
  border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow); }
.oppc__media{ position:relative; min-height:460px; overflow:hidden; background:var(--espresso); }
.oppc__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.oppc:hover .oppc__media img{ transform:scale(1.05); }
.oppc__body{ padding:clamp(28px,4vw,54px); display:flex; flex-direction:column; }
.oppc__k{ margin:10px 0 0; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.oppc__t{ margin:0; font-family:var(--display); font-weight:700; font-size:clamp(28px,3.2vw,40px);
  line-height:1.1; letter-spacing:.02em; color:var(--cream); }
.oppc__kv{ margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.oppc__row{ padding:14px 0 13px; border-top:1px solid var(--line-soft); }
.oppc__row dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:600; }
.oppc__row dd{ margin:6px 0 0; font-size:15.5px; line-height:1.45; color:var(--cream); }
.oppc__cta{ align-self:flex-start; margin-top:30px; }
.oppc__disc.disc{ margin:24px 0 0; padding:12px 16px; font-size:12px; line-height:1.6; }
@media (max-width:900px){
  .oppc{ grid-template-columns:1fr; }
  .oppc__media{ min-height:0; aspect-ratio:16/10; }
}
@media (max-width:520px){ .oppc__kv{ grid-template-columns:1fr; } }

/* --- thẻ đối tác ------------------------------------------------------------ */
.ptns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.ptns--n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ptn{ position:relative; padding:30px 28px 32px; border-radius:var(--r-md);
  background:var(--glass-bg); border:1px solid var(--glass-bord); box-shadow:var(--glass-shadow);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.ptn::before{ content:""; position:absolute; top:-1px; left:28px; width:72px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent); }
.ptn__logo{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; width:fit-content; max-width:100%; min-height:60px;
  margin-bottom:22px; padding:10px 18px; border-radius:12px; background:#FFFFFF; box-sizing:border-box; }  /* trắng thuần: logo JPG nền trắng không lộ khung */
.ptn__logo img{ display:block; min-width:0; max-height:56px; max-width:200px; width:auto; height:auto; object-fit:contain; }
/* thẻ "mạng lưới" có nhiều logo: nhỏ lại và tự xuống dòng khi hết chỗ */
.ptn__logo--nhieu img{ max-height:40px; max-width:120px; }
.ptn__t{ margin:0; font-family:var(--display); font-weight:700; font-size:19px; line-height:1.3; letter-spacing:.04em;
  color:var(--cream); transition:color .4s var(--ease); }
.ptn__qg{ font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; }
.ptn__d{ margin:14px 0 0; font-size:14.5px; line-height:1.7; color:var(--muted); }
.ptn:hover{ transform:translateY(-4px); border-color:rgba(240,226,166,.40); }
.ptn:hover .ptn__t{ color:var(--gold-bright); }
.section--light .ptn{ background:rgba(255,253,248,.74); box-shadow:0 22px 50px -32px rgba(60,46,20,.35); }
.section--light .ptn__qg{ color:#6E5216; }
.section--light .ptn:hover{ border-color:rgba(192,148,74,.6); box-shadow:0 36px 66px -30px rgba(27,21,16,.45); }
.section--light .ptn:hover .ptn__t{ color:#6E5216; }
@media (max-width:1080px){ .ptns--n3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){ .ptns, .ptns--n3{ grid-template-columns:1fr; } }

/* --- hỏi đáp nhiều đoạn + gạch đầu dòng ---------------------------------- */
.v3-faq .faq-a .rv > p, .v3-faq .faq-a .rv > ul{ margin:0 0 12px; padding-bottom:0; }
.v3-faq .faq-a .rv > :last-child{ margin-bottom:0; padding-bottom:30px; }
.v3-faq .faq-a ul{ padding:0 60px 0 20px; color:var(--muted); }
.v3-faq .faq-a li{ margin:6px 0; font-size:15.5px; line-height:1.7; }
.v3-faq .faq-a li::marker{ color:var(--gold); }
.v3-faq .faq-q:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
.section--light .v3-faq .faq-q:focus-visible{ outline-color:#6E5216; }
@media (max-width:640px){ .v3-faq .faq-a ul, .v3-faq .faq-a p{ padding-right:0; } }

/* --- thẻ ảnh "Vì sao" trên điện thoại ------------------------------------------
   Hai cột vuông cắt mất tiêu đề và đầu mô tả khi chạm mở (mô tả brief v2 dài
   30–50 chữ). Trên màn hẹp: một cột, thẻ cao theo chữ, mô tả hiện sẵn — không có
   rê chuột thì "hiện khi rê chuột" chỉ còn là chữ bị giấu. */
@media (max-width:560px){
  /* áp cho MỌI trang (issue report 30/09: thẻ vuông 2 cột ở trang BĐS cắt mất chữ) */
  .icards, .icards--6{ grid-template-columns:1fr; gap:14px; }
  .icard{ aspect-ratio:auto; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; }
  .icard__b{ position:relative; left:auto; right:auto; bottom:auto; padding:22px 20px; }
  .icard__t{ font-size:17px; }
  .icard__d{ grid-template-rows:1fr; opacity:1; margin-top:10px; font-size:13.5px; }
}

/* --- bàn phím: thẻ ảnh có tabindex nhưng mô tả chỉ mở bằng rê chuột/chạm ----- */
.icard:focus-visible, .fitcard:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }
.icard:focus-visible .icard__d, .fitcard:focus-visible .fitcard__d{ grid-template-rows:1fr; opacity:1; }
.icard:focus-visible .icard__d, .fitcard:focus-visible .fitcard__d{ margin-top:10px; }
.section--light .icard:focus-visible, .section--light .fitcard:focus-visible{ outline-color:#6E5216; }
.icard:focus-visible .icard__t{ color:var(--gold-bright); }
.icard:focus-visible img{ transform:scale(1.07); }

/* --- giảm chuyển động cho các khối v88 ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mstep, .orgc__b, .pcard, .ptn, .oppc__media img, .icard img{ transition:none; }
  .mstep:hover, .orgc__b:hover, .pcard:hover, .ptn:hover{ transform:none; }
  .oppc:hover .oppc__media img, .icard:focus-visible img{ transform:none; }
}

/* ==========================================================================
   v89 — issue report 30/09
   ========================================================================== */
/* Màn cảm ứng: :hover "dính" sau khi chạm (iOS) làm mô tả mở/đóng lung tung.
   Ở đó chỉ .is-open (do JS bật theo từng lần chạm) mới mở thẻ. */
@media (hover:none){
  .icard:hover:not(.is-open) .icard__d, .fitcard:hover:not(.is-open) .fitcard__d{ grid-template-rows:0fr; opacity:0; margin-top:0; }
  .icard:hover:not(.is-open) img{ transform:none; }
  .icard:hover:not(.is-open) .icard__t{ color:#F6F1E8; }
  .ocard:hover{ transform:none; }
}
@media (hover:none) and (max-width:560px){
  .icard:hover:not(.is-open) .icard__d{ grid-template-rows:1fr; opacity:1; margin-top:10px; }
}

/* Thẻ xếp chồng ("Bài toán đầu tư" trang BĐS) giật — issue report 30/09. Đo trên
   video: cả hàng thẻ đổi chiều cao mỗi lần chuyển, vì dòng "Nhấn để xem" bật/tắt
   tức thì và mô tả co giãn CÙNG LÚC bề ngang thẻ đổi, chữ dàn lại liên tục.
   Nay: chiều cao hàng giữ cố định (JS đo thẻ cao nhất khi mở, đặt min-height),
   dòng gợi ý không chiếm chỗ, thẻ giãn ngang trước rồi mô tả mới hiện. */
.ocard{ transition:flex .35s var(--ease), transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.ocard__hint{ position:absolute; left:26px; bottom:22px; margin:0; transition:opacity .2s; }
.ocard.is-open .ocard__hint{ display:block; opacity:0; pointer-events:none; }
.ocard__d{ transition:grid-template-rows .3s var(--ease) .3s, opacity .25s var(--ease) .35s, margin .3s var(--ease) .3s !important; }
.ocard:not(.is-open) .ocard__d{ transition:none !important; }
.ocards.is-do .ocard, .ocards.is-do .ocard__d{ transition:none !important; }  /* lúc JS đo */
.ocards{ align-items:stretch; }
@media (max-width:760px){ .ocard__hint{ position:static; margin-top:16px; } .ocard.is-open .ocard__hint{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ocard, .ocard__d{ transition:none !important; } }

/* ==========================================================================
   v90 — feedback v3 (02/10)
   ========================================================================== */
/* #1 Ban lãnh đạo 8 người, phân cấp: hàng trên 3 thẻ (ban điều hành), hàng dưới
   5 thẻ nhỏ hơn. Ảnh client gửi là chân dung nền tối, cỡ 800×974 — ô ảnh giữ 4/5
   và canh theo đầu người (object-position top). */
@media (min-width:1081px){
  /* khối v8x phía trên ép .leadgrid nowrap + flex:1 cho 5 thẻ một hàng; 8 thẻ thì phải xuống hàng */
  .leadgrid{ flex-wrap:wrap; gap:24px; }
  .leadgrid > .leadc{ flex:0 1 calc((100% - 48px)/3); }
  .leadgrid > .leadc:nth-child(n+4){ flex-basis:calc((100% - 96px)/5); }
  .leadgrid > .leadc:nth-child(n+4) .leadc__n{ font-size:17px; }
  .leadgrid > .leadc:nth-child(n+4) .leadc__r{ font-size:11px; letter-spacing:.06em; }
  .leadgrid > .leadc:nth-child(n+4) .leadc__body{ padding:20px 16px 22px; }
  .leadgrid > .leadc:nth-child(n+4) .leadc__b li{ font-size:12.5px; }
}
.leadc__ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; }

/* #3 Mạng lưới đối tác: hai khối có tiêu đề (BĐS / tài chính), ô logo là ảnh thật
   trên nền kem để logo màu tối (NHK, Manulife, Peakhouse) không chìm vào nền đen. */
.logogroup{ margin-top:34px; }
.logogroup + .logogroup{ margin-top:44px; }
.logogroup__t{ margin:0; font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:14px; }
.logogroup__t::after{ content:""; flex:1; height:1px; background:rgba(240,226,166,.18); }
.logogroup .logogrid{ margin-top:18px; }
.logotile--anh{ background:rgba(255,253,248,.94); border-color:rgba(255,253,248,.7); padding:16px 18px;
  min-height:96px; filter:none; opacity:1; }
.logotile--anh img{ max-height:48px; max-width:150px; }
.logotile--anh:hover{ background:#FFFDF8; transform:scale(1.04); border-color:var(--gold); }
@media (min-width:1081px){ .logogrid > .logotile--anh{ flex-basis:calc((100% - 70px)/6); } }
@media (max-width:1080px){ .logogrid > .logotile--anh{ flex-basis:calc((100% - 48px)/4); } }
@media (max-width:560px){ .logogrid > .logotile--anh{ flex-basis:calc((100% - 16px)/2); min-height:80px; } .logotile--anh img{ max-height:40px; } }

/* #19 #20 Thẻ đối tác PE/PC: logo to làm tâm, nền kem viền vàng; đoạn giới thiệu ẩn,
   rê chuột (máy có chuột) hoặc chạm/Enter (site.js gắn .is-open) mới hiện. */
.ptn{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 28px 30px;
  background:linear-gradient(180deg,rgba(255,253,248,.97),rgba(246,239,226,.97)); border:1px solid rgba(192,148,74,.45);
  box-shadow:0 26px 54px -34px rgba(27,21,16,.55); cursor:pointer; }
.ptn::before{ left:50%; transform:translateX(-50%); width:96px; background:var(--foil); }
.ptn__logo{ justify-content:center; min-height:110px; width:100%; }
.ptn__logo img{ max-height:96px; max-width:min(100%,260px); }
.ptn__logo--nhieu img{ max-height:64px; max-width:150px; }
.ptn__t{ margin-top:18px; color:#1B1510; }
.ptn__qg{ color:#6E5216; }
.ptn:hover .ptn__t{ color:#6E5216; }
.ptn__hint{ margin-top:10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6E5216; opacity:.75;
  transition:opacity .2s; }
/* Ẩn/hiện bằng max-height (không dùng grid 0fr: chữ trong <p> là ô lưới ẩn danh,
   không co về 0 nên thẻ gập vẫn cao như lúc mở). Thẻ cùng hàng không kéo giãn theo
   thẻ đang mở (align-items:start). */
.ptns{ align-items:start; }
.ptn__d{ max-height:0; overflow:hidden; opacity:0; margin-top:0; color:var(--ink-dim, #4A3E2C);
  transition:max-height .45s var(--ease), opacity .3s var(--ease), margin .35s var(--ease); }
.ptn.is-open .ptn__d, .ptn:focus-visible .ptn__d{ max-height:520px; opacity:1; margin-top:14px; }
.ptn.is-open .ptn__hint, .ptn:focus-visible .ptn__hint{ opacity:0; }
@media (hover:hover){
  .ptn:hover .ptn__d{ max-height:520px; opacity:1; margin-top:14px; }
  .ptn:hover .ptn__hint{ opacity:0; }
}
.ptn:hover{ border-color:var(--gold); transform:translateY(-4px); }
.section--light .ptn{ background:linear-gradient(180deg,#FFFDF8,#F4ECDC); }
@media (prefers-reduced-motion:reduce){ .ptn__d{ transition:none; } }

/* v92 · PageSpeed: chữ hero tự hiện bằng CSS, không đợi site.js. Trước đây tiêu đề và
   nút hero ẩn (translate/opacity 0) cho tới khi JS gắn .in, nên trên mobile chậm
   PageSpeed đo FCP/LCP rất muộn. Hiệu ứng giữ nguyên nhịp cũ; .in của JS gắn sau
   không đổi gì vì animation fill:both đã giữ trạng thái cuối. */
@keyframes heroLen{ from{ transform:translateY(108%); } to{ transform:none; } }
@keyframes heroHien{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:none; } }
.hero .r-line > span, .subhero .r-line > span{ animation:heroLen .9s var(--ease) both; }
.hero .r-line.d1 > span, .subhero .r-line.d1 > span{ animation-delay:.1s; }
.hero .r-line.d2 > span, .subhero .r-line.d2 > span{ animation-delay:.22s; }
.hero .reveal, .subhero .reveal{ animation:heroHien 1s var(--ease) both; }
.hero .reveal.d1, .subhero .reveal.d1{ animation-delay:.07s; }
.hero .reveal.d2, .subhero .reveal.d2{ animation-delay:.14s; }
.hero .reveal.d3, .subhero .reveal.d3{ animation-delay:.21s; }
.hero .reveal.d4, .subhero .reveal.d4{ animation-delay:.28s; }
@media (prefers-reduced-motion: reduce){ .hero .r-line > span, .subhero .r-line > span, .hero .reveal, .subhero .reveal{ animation:none; } }