@charset "UTF-8";
/* ===================================================================
   Property Radar — Bản đồ chủ đầu tư TP.HCM
   Light · professional · luxurious green · paged panels
   =================================================================== */

:root {
  --bg:       #F6F5F0;   /* warm ivory */
  --bg-2:     #FFFFFF;   /* cards */
  --bg-soft:  #EEEDE6;   /* alt surface */
  --green-tint: #E8F1EB;

  --ink:    #15241D;     /* deep green-black text */
  --ink-2:  #38473F;
  --muted:  #6A766E;
  --muted-2:#93998f;
  --line:   #E2E4DC;
  --line-2: #D7DAD0;

  --green:   #1C6B4C;    /* primary emerald */
  --green-d: #0F4A35;    /* deep */
  --green-dd:#0A3526;    /* darkest */
  --green-l: #4E9A77;
  --gold:    #B08D57;    /* subtle brass accent */
  --gold-d:  #8C6E3E;

  --green-grad: linear-gradient(110deg, #0F4A35 0%, #1C6B4C 55%, #2E8662 100%);
  --gold-grad:  linear-gradient(110deg, #9A7B3F, #C9A86A, #9A7B3F);

  --c-clean: #1C6B4C; --c-clean-bg:#E6F1EA;
  --c-high:  #2C6E8F; --c-high-bg: #E5EFF4;
  --c-watch: #B5821C; --c-watch-bg:#F6EDD8;
  --c-risk:  #B5462F; --c-risk-bg: #F6E4DE;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1200px;
  --radius: 16px;
  --nav-h: 70px;
  --shadow-sm: 0 2px 10px rgba(16,40,30,0.06);
  --shadow:    0 22px 48px -22px rgba(15,55,40,0.30);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); scroll-snap-type: y proximity; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }

.green { background: var(--green-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- type ---------- */
.eyebrow { font-size: 0.76rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--green); font-weight: 600; margin-bottom: 16px; }
.eyebrow--center { text-align: center; }
.eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1.5px; background: var(--gold); vertical-align: middle; margin-right: 10px; margin-bottom: 4px; }
.eyebrow--center::before { display: none; }

.section__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; color: var(--ink); }
.section__title.center { text-align: center; }
.section__sub { color: var(--muted); max-width: 720px; font-size: 1.05rem; }
.section__sub.center { text-align: center; margin-left: auto; margin-right: auto; }
.subhead { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; text-align: center; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 0.94rem; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s, color .25s; border: 1px solid transparent; }
.btn--green { background: var(--green-grad); color: #fff; box-shadow: 0 14px 28px -12px rgba(15,74,53,0.55); }
.btn--green:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(15,74,53,0.6); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--bg-2); }
.btn--ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

/* ===================================================================
   NAV
   =================================================================== */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(246,245,240,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--green-grad); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; flex: none; box-shadow: var(--shadow-sm); }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__text strong { font-size: 1.02rem; letter-spacing: 0.01em; color: var(--ink); }
.brand__text em { font-style: normal; font-size: 0.72rem; color: var(--muted); }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { position: relative; padding: 9px 13px; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); border-radius: 8px; background: none; border: none; font-family: var(--sans); cursor: pointer; transition: color .2s; }
.nav__link:hover, .nav__link.active { color: var(--green); }
.nav__link.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; background: var(--green-grad); border-radius: 2px; }
.nav__cta { margin-left: 8px; padding: 9px 18px; border-radius: 999px; background: var(--green-grad); color: #fff; font-size: 0.88rem; font-weight: 600; transition: transform .2s, box-shadow .2s; box-shadow: 0 10px 22px -12px rgba(15,74,53,0.6); }
.nav__cta:hover { transform: translateY(-1px); }
.caret { font-size: 0.7rem; color: var(--green); }

.nav__dropdown { position: relative; }
.nav__menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 340px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
.nav__dropdown:hover .nav__menu, .nav__dropdown:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 0.88rem; color: var(--ink-2); transition: background .18s; }
.nav__menu a:hover { background: var(--green-tint); color: var(--green-d); }
.nav__menu .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================================================================
   PAGER (right-side dots)
   =================================================================== */
.pager { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 12px; }
.pager button { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--muted-2); background: transparent; cursor: pointer; padding: 0; transition: all .25s; position: relative; }
.pager button:hover { border-color: var(--green); transform: scale(1.2); }
.pager button.active { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px rgba(28,107,76,0.18); }
.pager button .ptip { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 0.72rem; padding: 4px 9px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pager button:hover .ptip { opacity: 1; }

/* ===================================================================
   PANELS (paged scroll)
   =================================================================== */
.panel { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; scroll-snap-align: start; position: relative; padding: calc(var(--nav-h) + 28px) 0 56px; }
.panel--alt { background: var(--bg-soft); }
.panel__inner { width: 100%; opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.panel.is-active .panel__inner { opacity: 1; transform: translateY(0); }
.panel__scroll { width: 100%; }

/* staggered children */
.panel.is-active [data-rise] { opacity: 1; transform: none; }
[data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.panel.is-active [data-rise="1"] { transition-delay: .08s; }
.panel.is-active [data-rise="2"] { transition-delay: .16s; }
.panel.is-active [data-rise="3"] { transition-delay: .24s; }
.panel.is-active [data-rise="4"] { transition-delay: .32s; }

/* ===================================================================
   HERO
   =================================================================== */
.hero { overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(900px 520px at 78% 8%, rgba(28,107,76,0.14), transparent 60%),
  radial-gradient(720px 480px at 6% 92%, rgba(176,141,87,0.10), transparent 55%); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(15,74,53,0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(75% 70% at 50% 40%, #000 30%, transparent 100%); }
.hero .container { position: relative; z-index: 2; }
.hero__title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 5.8vw, 4.7rem); line-height: 1.08; color: var(--ink); }
.hero__place { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--green-d); margin: 16px 0 24px; }
.hero__lead { max-width: 620px; color: var(--ink-2); font-size: 1.08rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 46px; margin-top: 54px; }
.stat__num { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; color: var(--green-d); display: block; }
.stat__label { color: var(--muted); font-size: 0.85rem; margin-top: 8px; }
.hero__skyline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; line-height: 0; }
.hero__skyline svg { width: 100%; height: clamp(70px, 11vh, 130px); }
.hero__skyline path { fill: rgba(15,74,53,0.07); }
.scrollcue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scrollcue::after { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--green), transparent); animation: cue 1.8s infinite; }
@keyframes cue { 0%{opacity:.2; transform:scaleY(.4)} 50%{opacity:1} 100%{opacity:.2; transform:scaleY(.4)} }

/* ---------- prose / pullquote / pillars ---------- */
.prose { max-width: 820px; }
.prose p { color: var(--ink-2); font-size: 1.08rem; margin-bottom: 16px; }
.prose strong { color: var(--ink); font-weight: 600; }
.pullquote { padding: 26px 34px; border-left: 3px solid var(--green); background: var(--green-tint); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.4; font-style: italic; color: var(--green-dd); }
.pullquote--center { text-align: center; border-left: none; border-top: 3px solid var(--green); border-radius: var(--radius); max-width: 880px; margin: 0 auto; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--green-tint); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 14px; }
.pillar h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin-bottom: 8px; }
.pillar p { color: var(--muted); font-size: 0.95rem; }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; }
.legend__item { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--muted); }
.legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ===================================================================
   DEVELOPER PANEL (condensed, one page)
   =================================================================== */
.dev2 { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: 38px; align-items: stretch; }

.dev2__cover { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; background-size: cover; background-position: center; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; }
.dev2__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,30,22,0.05), rgba(8,30,22,0.55)); }
.dev2__cover > * { position: relative; z-index: 1; }
.dev2__top { position: absolute; top: 26px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.dev2__num { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1; }
.dev2__name { font-family: var(--serif); font-weight: 600; font-size: 2rem; color: #fff; line-height: 1.1; }
.dev2__group { color: rgba(255,255,255,0.82); font-size: 0.9rem; margin-top: 4px; }
.dev2__segs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.dev2__segs .chip { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); color: #fff; backdrop-filter: blur(4px); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 500; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); }

.badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--clean { color: var(--c-clean); background: var(--c-clean-bg); border-color: rgba(28,107,76,0.32); }
.badge--high  { color: var(--c-high);  background: var(--c-high-bg);  border-color: rgba(44,110,143,0.32); }
.badge--watch { color: var(--c-watch); background: var(--c-watch-bg); border-color: rgba(181,130,28,0.34); }
.badge--risk  { color: var(--c-risk);  background: var(--c-risk-bg);  border-color: rgba(181,70,47,0.32); }
.dev2__cover .badge { background: rgba(255,255,255,0.92); }

.dev2__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dev2__lead { color: var(--ink-2); font-size: 1.02rem; }
.dev2__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.minicard { background: var(--bg-2); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.minicard h4 { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.minicard h4::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.minicard--pro h4 { color: var(--green); } .minicard--pro h4::before { background: var(--green); }
.minicard--con h4 { color: var(--c-watch); } .minicard--con h4::before { background: var(--c-watch); }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ticks li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.ticks li::before { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 0.9rem; line-height: 1; }
.ticks--pro li::before { content: ""; left: 3px; top: 4px; width: 5px; height: 10px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ticks--con li::before { content: "!"; color: var(--c-watch); }

.legalbox { border-radius: 13px; padding: 14px 18px; border: 1px solid var(--line); border-left: 4px solid var(--green); background: var(--bg-2); }
.legalbox--clean { border-left-color: var(--c-clean); background: var(--c-clean-bg); }
.legalbox--high  { border-left-color: var(--c-high);  background: var(--c-high-bg); }
.legalbox--watch { border-left-color: var(--c-watch); background: var(--c-watch-bg); }
.legalbox--risk  { border-left-color: var(--c-risk);  background: var(--c-risk-bg); }
.legalbox__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.legalbox p { color: var(--ink-2); font-size: 0.88rem; line-height: 1.5; }

.dev2__projects h4 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.dev2__projects h4 .count { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--green); background: var(--green-tint); padding: 2px 9px; border-radius: 999px; }
.plist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.plist__item { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.plist__name { color: var(--ink); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstatus { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.pstatus.done { color: var(--c-clean); background: var(--c-clean-bg); }
.pstatus.prog { color: var(--c-high);  background: var(--c-high-bg); }
.pstatus.plan { color: var(--c-watch); background: var(--c-watch-bg); }

/* ===================================================================
   MAP
   =================================================================== */
.map { position: relative; max-width: 900px; margin: 0 auto; padding: 30px 30px 30px 64px; }
.map__grid { position: relative; height: 50vh; min-height: 360px; max-height: 460px; border: 1px solid var(--line-2); border-radius: var(--radius); background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 25% 100%,
  radial-gradient(circle at 100% 0, rgba(28,107,76,0.10), transparent 58%),
  radial-gradient(circle at 0 100%, rgba(181,70,47,0.08), transparent 58%), var(--bg-2); }
.map__axis { position: absolute; display: flex; justify-content: space-between; color: var(--muted-2); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.map__axis--y { flex-direction: column; left: 14px; top: 30px; bottom: 30px; }
.map__axis--x { left: 64px; right: 30px; bottom: 8px; }
.map__dot { position: absolute; transform: translate(-50%, 50%); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.map__dot .pt { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px currentColor, 0 4px 10px rgba(0,0,0,0.18); transition: transform .2s; }
.map__dot:hover .pt { transform: scale(1.5); }
.map__dot .lbl { font-size: 0.7rem; font-weight: 600; color: var(--ink); white-space: nowrap; background: rgba(255,255,255,0.82); padding: 1px 6px; border-radius: 5px; }
.map__dot.c-clean { color: var(--c-clean); } .map__dot.c-high { color: var(--c-high); }
.map__dot.c-watch { color: var(--c-watch); } .map__dot.c-risk { color: var(--c-risk); }

/* ===================================================================
   COMPARE TABLE
   =================================================================== */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); box-shadow: var(--shadow-sm); max-height: 64vh; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
.ctable th, .ctable td { text-align: left; padding: 13px 18px; font-size: 0.9rem; vertical-align: top; }
.ctable thead th { position: sticky; top: 0; background: var(--green-d); color: #fff; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; z-index: 1; }
.ctable tbody tr { border-top: 1px solid var(--line); }
.ctable tbody tr:nth-child(even) { background: var(--bg-soft); }
.ctable td:first-child { font-weight: 600; color: var(--ink); font-family: var(--serif); }
.ctable .origin-tag { font-size: 0.82rem; color: var(--muted); }
.ctable td .badge { font-size: 0.72rem; padding: 5px 10px; }

/* ===================================================================
   TRENDS
   =================================================================== */
.trend-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.trend { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.trend:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.trend__tag { display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--green-d); margin-bottom: 10px; padding: 5px 12px; background: var(--green-tint); border-radius: 999px; }
.trend p { color: var(--ink-2); font-size: 0.96rem; }

/* ===================================================================
   CTA + FOOTER
   =================================================================== */
.cta { background: var(--green-grad); color: #fff; text-align: center; }
.cta .panel__inner { color: #fff; }
.cta__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; color: #fff; }
.cta__title .green { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta__sub { color: rgba(255,255,255,0.86); margin: 18px auto 0; font-size: 1.05rem; max-width: 560px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta .btn--green { background: #fff; color: var(--green-d); }
.cta .btn--ghost { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.cta .btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

.footer { background: var(--green-dd); color: rgba(255,255,255,0.8); padding: 50px 0 36px; }
.footer__inner { display: flex; flex-direction: column; gap: 16px; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand strong { color: #fff; font-size: 1.05rem; }
.footer__brand p { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.footer__note { color: rgba(255,255,255,0.6); font-size: 0.84rem; max-width: 760px; line-height: 1.6; }
.footer__copy { color: rgba(255,255,255,0.5); font-size: 0.82rem; }
.footer a { color: #fff; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .dev2 { grid-template-columns: 0.9fr 1.1fr; gap: 26px; }
}
@media (max-width: 860px) {
  html { scroll-snap-type: none; }
  .panel { min-height: auto; padding: calc(var(--nav-h) + 30px) 0 48px; }
  .pager { display: none; }
  .pillars { grid-template-columns: 1fr; }
  .trend-cards { grid-template-columns: 1fr; }
  .dev2 { grid-template-columns: 1fr; }
  .dev2__cover { min-height: 240px; }
  .dev2__cols { grid-template-columns: 1fr; }
  .plist { grid-template-columns: 1fr; }
  .nav__links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 0 14px; max-height: 0; overflow: hidden; transition: max-height .35s, padding .35s; box-shadow: var(--shadow); }
  .nav__links.open { max-height: 82vh; padding: 14px; overflow-y: auto; }
  .nav__link, .nav__cta { width: 100%; text-align: left; padding: 14px 16px; }
  .nav__cta { margin: 8px 0 0; text-align: center; }
  .nav__dropdown { width: 100%; }
  .nav__menu { position: static; transform: none; opacity: 1; visibility: visible; grid-template-columns: 1fr; box-shadow: none; border: none; background: transparent; min-width: 0; padding: 0 0 0 12px; display: none; }
  .nav__dropdown.open .nav__menu { display: grid; }
  .nav__burger { display: flex; }
  .hero__stats { gap: 30px; }
  .map { padding: 20px 16px 26px 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .panel__inner, [data-rise] { transition: none; opacity: 1; transform: none; }
}

/* ===================================================================
   ABOUT (Giới thiệu)
   =================================================================== */
.about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 46px; align-items: center; }
.about__photo { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; background: var(--green-tint); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.about__photo::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(15,74,53,0.10); pointer-events: none; }
.about__tag { position: absolute; left: 18px; bottom: 18px; background: var(--green-grad); color: #fff; font-weight: 600; font-size: 0.8rem; padding: 7px 16px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.about__name { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; }
.about__role { color: var(--green-d); font-weight: 600; margin-top: 6px; font-size: 1.05rem; }
.about__bio { color: var(--ink-2); font-size: 1.06rem; margin-top: 18px; max-width: 580px; }
.about__values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vchip { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; font-size: 0.88rem; font-weight: 500; box-shadow: var(--shadow-sm); }
.about__stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 26px; }
.about__stats div { display: flex; flex-direction: column; }
.about__stats strong { font-family: var(--serif); font-size: 1.7rem; color: var(--green-d); line-height: 1; }
.about__stats span { color: var(--muted); font-size: 0.82rem; margin-top: 5px; }
.about__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ===================================================================
   REGION extras
   =================================================================== */
.dev2__kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fact { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 10px; padding: 11px 14px; box-shadow: var(--shadow-sm); }
.fact__l { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.fact__v { display: block; color: var(--ink); font-size: 0.92rem; font-weight: 500; line-height: 1.4; }
.pstatus.price { color: var(--green-d); background: var(--green-tint); }
.suitable { margin-top: 2px; padding: 12px 16px; border-radius: 10px; background: var(--green-tint); color: var(--green-dd); font-size: 0.92rem; font-weight: 500; border: 1px dashed rgba(28,107,76,0.32); }
.region-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.region-pill { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 0.92rem; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform 0.2s, border-color 0.2s, color 0.2s; }
.region-pill:hover { transform: translateY(-2px); border-color: var(--green); color: var(--green-d); }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 26px; }
  .about__photo { max-width: 330px; margin: 0 auto; width: 100%; }
  .facts { grid-template-columns: 1fr; }
  .about__stats { gap: 22px; }
}