/* =====================================================================
   FONT CỤC BỘ — PHƯƠNG ÁN 3
   Các font đều nằm cùng cấp với style.css, trang không tải font từ Internet.
   ===================================================================== */
@font-face{font-family:"Bodoni Moda Local";src:url("BodoniModa-Variable.ttf") format("truetype");font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond Local";src:url("CormorantGaramond-Italic-Variable.ttf") format("truetype");font-style:italic;font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter Local";src:url("Inter-VariableFont_opsz,wght.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Local";src:url("Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");font-style:italic;font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Serif Local";src:url("NotoSerif-Regular-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif Local";src:url("NotoSerif-Bold-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Noto Serif Local";src:url("NotoSerif-Italic-400.ttf") format("truetype");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif Local";src:url("NotoSerif-Italic-700.ttf") format("truetype");font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:"Oswald Local";src:url("Oswald-VariableFont_wght.ttf") format("truetype");font-style:normal;font-weight:200 700;font-display:swap}
@font-face{font-family:"Allura Local";src:url("Allura-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}

/* =====================================================================
   CAFEF INTERACTIVE LONGFORM — QUICK CONTROL
   Chỉnh palette, khổ đọc và hệ font cục bộ ngay tại đây.
   Không tải font/link/resource từ Internet. Không có !important.
   ===================================================================== */
:root{
  --paper:#ECE8E5;
  --paper-deep:#DED8D3;
  --paper-light:#F6F3F0;
  --article-paper:#F4F1ED;
  --taupe:#C9C3BF;
  --taupe-dark:#9A9897;
  --red:#C3463E;
  --red-2:#A93630;
  --charcoal:#1C1C1D;
  --charcoal-2:#303033;
  --ink-soft:#5B5757;
  --rule:rgba(28,28,29,.22);
  --display:"Bodoni Moda Local",Georgia,"Times New Roman",serif;
  --quote:"Cormorant Garamond Local",Georgia,"Times New Roman",serif;
  --serif:"Noto Serif Local",Georgia,"Times New Roman",serif;
  --sans:"Inter Local",Arial,Helvetica,sans-serif;
  --condensed:"Oswald Local","Arial Narrow",Arial,Helvetica,sans-serif;
  --signature:"Allura Local","Brush Script MT",cursive;
  --content-width:760px;
  --wide-width:1260px;
  --gutter:clamp(18px,4.4vw,68px);
  --body-size-mobile:18px;
  --body-size-desktop:20px;
  --body-line:1.74;
  --section-gap:clamp(72px,9vw,150px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--article-paper)}
body{margin:0;background:var(--article-paper);color:var(--charcoal);font-family:var(--serif);overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,a{font:inherit;color:inherit}
::selection{background:var(--red);color:var(--paper-light)}

/* Mỗi dòng text có thể tự chỉnh ngay trong style="--..." của chính thẻ. */
.editable-text{
  font-family:var(--font-family,var(--serif));
  font-size:var(--font-size-mobile,var(--body-size-mobile));
  font-weight:var(--font-weight,400);
  font-style:var(--font-style,normal);
  line-height:var(--line-height,var(--body-line));
  letter-spacing:var(--letter-spacing,0);
  text-align:var(--text-align,left);
  color:var(--color,var(--charcoal));
  margin:var(--margin,0 0 1.35em);
  max-width:var(--max-width,none);
  padding-left:var(--padding-left-mobile,0);
  padding-right:var(--padding-right-mobile,0);
  transform:translate(var(--offset-x-mobile,0),var(--offset-y-mobile,0));
}
.editable-image{
  width:var(--image-width-mobile,var(--image-width,100%));
  height:var(--image-height-mobile,var(--image-height,auto));
  aspect-ratio:var(--aspect-ratio,auto);
  object-fit:var(--object-fit,cover);
  object-position:var(--object-position-mobile,var(--object-position,center));
  margin:var(--image-margin,0);
  border-radius:var(--border-radius,0);
  opacity:var(--opacity,1);
  filter:var(--filter,none);
  box-shadow:var(--shadow,none);
}
@media(min-width:900px){
  .editable-text{
    font-size:var(--font-size-desktop,var(--font-size-mobile,var(--body-size-desktop)));
    padding-left:var(--padding-left-desktop,var(--padding-left-mobile,0));
    padding-right:var(--padding-right-desktop,var(--padding-right-mobile,0));
    transform:translate(var(--offset-x-desktop,var(--offset-x-mobile,0)),var(--offset-y-desktop,var(--offset-y-mobile,0)));
  }
  .editable-image{
    width:var(--image-width-desktop,var(--image-width,100%));
    height:var(--image-height-desktop,var(--image-height,auto));
    object-position:var(--object-position-desktop,var(--object-position-mobile,var(--object-position,center)));
  }
}

/* Layout primitives */
.longform{background:var(--article-paper);min-height:100vh}
.wide{width:min(var(--wide-width),calc(100% - 2*var(--gutter)));margin-inline:auto}
.reading{width:min(var(--content-width),calc(100% - 2*var(--gutter)));margin-inline:auto}
.quiet-zone{padding:56px 0;background-color:var(--article-paper);background-image:none}
.body-copy{display:flow-root}
.body-copy p{font-family:var(--paragraph-font,var(--serif));font-size:var(--paragraph-size-mobile,var(--body-size-mobile));font-weight:var(--paragraph-weight,400);line-height:var(--paragraph-line-height,var(--body-line));letter-spacing:var(--paragraph-letter-spacing,0);color:var(--paragraph-color,var(--charcoal));margin:var(--paragraph-margin,0 0 1.38em)}
.body-copy .question{font-family:var(--question-font,var(--sans));font-weight:var(--question-weight,700);line-height:var(--question-line-height,1.48);letter-spacing:var(--question-letter-spacing,0);color:var(--question-color,var(--red));margin:var(--question-margin,2.6em 0 1em);font-size:var(--question-size-mobile,19px)}
.body-copy .answer-start::first-letter{font-size:1.06em}
.quote-2-lead{padding-bottom:28px}
@media(min-width:900px){
  .quiet-zone{padding:38px 0}
  .quote-2-lead{padding-bottom:36px}
  .body-copy p{font-size:var(--paragraph-size-desktop,var(--body-size-desktop))}
  .body-copy .question{font-size:var(--question-size-desktop,21px)}
}

/* Paper texture + grid: dùng background CSS, không layer before/after. */
.paper-grid{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(28,28,29,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,28,29,.045) 1px,transparent 1px);
  background-size:34px 34px;
}

/* Reveal: nếu JS lỗi, nội dung vẫn hiển thị. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.is-visible{opacity:1;transform:none}

/* =====================================================================
   HƯỚNG DẪN CHỈNH COVER / HERO

   .hero              = toàn bộ khu vực cover
   .hero-inner        = khung và khoảng cách của cover
   .hero-art          = nhóm chứa tất cả các lớp hình ảnh
   .hero-paper        = nền giấy màu kem có độ nhám
   .hero-corner       = mảng sáng/đường chéo trang trí góc phải
   .hero-skyline      = ảnh đường chân trời TP.HCM phía dưới
   .hero-disc         = vòng tròn đỏ phía sau nhân vật
   .hero-person       = chân dung nhân vật đã tách nền
   .hero-copy         = nhóm tiêu đề và câu trích dẫn bên trái
   .hero-kicker       = dòng chữ INTERVIEW
   .hero-title-major  = dòng chữ đen “Doanh nghiệp”
   .hero-title-accent = dòng chữ đỏ “kiến quốc”
   .hero-quote        = câu trích dẫn bên dưới tiêu đề
   .hero-subject-name = tên nhân vật ở góc trên bên phải
   .hero-motto        = dòng “Vì một Việt Nam thịnh vượng”
   .hero-author       = thanh thông tin nằm sát cạnh dưới

   width/height = kích thước; left/right/top/bottom = vị trí;
   font-size = cỡ chữ; font-family = kiểu chữ; font-weight = độ đậm;
   line-height = khoảng cách dòng; letter-spacing = khoảng cách ký tự;
   color = màu chữ; opacity = độ mờ; z-index = thứ tự xếp lớp.
   ===================================================================== */

/* TOÀN BỘ COVER: chiều cao, màu nền và phần hình tràn ra ngoài. */
.hero{
  min-height:0;
  position:relative;
  overflow:hidden;
  background:var(--paper-light);
  border-bottom:1px solid var(--rule);
}
.hero-cover-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
}
.hero picture{display:block}
.hero-cover-content{position:absolute;z-index:2;inset:0;pointer-events:none}
@media(min-width:701px){
  .hero{height:min(100svh,56.28vw)}
  .hero picture{height:100%}
  .hero-cover-image{width:100%;height:100%;object-fit:cover;object-position:center bottom}
}
.cover-kicker{
  position:absolute;left:var(--left-desktop,clamp(28px,6vw,104px));top:var(--top-desktop,8%);
  margin:var(--margin,0);font-family:var(--font-family,var(--sans));font-size:var(--size-desktop,clamp(10px,.8vw,14px));font-weight:var(--weight,700);line-height:var(--line-height,1.3);
  letter-spacing:var(--letter-spacing-desktop,.36em);text-transform:var(--text-transform,uppercase);color:var(--color,var(--charcoal));
  display:flex;align-items:center;gap:16px;
}
.cover-kicker::after{content:"";width:48px;height:2px;background:var(--red)}
.hero-cover-title{
  position:absolute;
  left:var(--left-desktop,clamp(28px,6vw,104px));
  top:var(--top-desktop,23%);
  margin:var(--margin,0);
  font-family:var(--font-family,"Oswald Local","Arial Narrow",Arial,Helvetica,sans-serif);
  font-weight:var(--weight,700);
  font-size:var(--size-desktop,clamp(64px,7.2vw,110px));
  line-height:var(--line-height-desktop,1.2);
  letter-spacing:var(--letter-spacing-desktop,-.05em);
  text-transform:var(--text-transform,uppercase);
  color:var(--color,var(--charcoal));
}
.hero-cover-title span{display:block}
.hero-cover-title .accent{color:var(--red)}
.cover-quote{
  position:absolute;left:var(--left-desktop,clamp(28px,6vw,104px));top:var(--top-desktop,52%);
  width:var(--width-desktop,min(38vw,620px));margin:var(--margin,0);padding-left:var(--padding-left-desktop,18px);
  border-left:3px solid var(--red);font-family:var(--font-family,var(--quote));font-size:var(--size-desktop,clamp(20px,1.7vw,31px));font-style:var(--font-style,italic);font-weight:var(--weight,700);line-height:var(--line-height-desktop,1.25);
  color:var(--color,var(--charcoal));
}
.cover-quote strong{display:block;margin-top:8px;color:var(--red);text-transform:uppercase}
.cover-subject{
  display:none;position:absolute;right:var(--right-desktop,4%);top:var(--top-desktop,4%);margin:var(--margin,0);
  font-family:var(--font-family,var(--signature));font-size:var(--size-desktop,clamp(22px,2vw,34px));font-weight:var(--weight,400);line-height:var(--line-height,1.1);color:var(--color,var(--charcoal));
}
.cover-motto{
  position:absolute;right:var(--right-desktop,2.5%);top:var(--top-desktop,36%);margin:var(--margin,0);padding-left:var(--padding-left-desktop,16px);
  border-left:1px solid rgba(28,28,29,.55);font-family:var(--font-family,var(--sans));font-size:var(--size-desktop,clamp(9px,.75vw,12px));font-weight:var(--weight,700);line-height:var(--line-height,1.75);
  letter-spacing:var(--letter-spacing-desktop,.18em);text-transform:var(--text-transform,uppercase);color:var(--color,var(--ink-soft));
}
.cover-author{
  position:absolute;left:4%;right:4%;bottom:2%;
  display:flex;align-items:center;gap:20px;padding:10px 14px;
  background:rgba(246,240,231,.86);border-top:1px solid rgba(28,28,29,.4);
  font-family:var(--font-family,var(--sans));font-size:var(--size-desktop,clamp(8px,.7vw,12px));font-weight:var(--weight,700);line-height:var(--line-height-desktop,1.35);letter-spacing:var(--letter-spacing-desktop,.12em);text-transform:var(--text-transform,uppercase);color:var(--color,inherit);
}
.cover-author-name{
  font-family:var(--name-font-desktop,"Allura Local","Brush Script MT",cursive);
  font-size:var(--name-size-desktop,clamp(22px,2vw,34px));font-weight:var(--name-weight-desktop,400);
  line-height:var(--name-line-height-desktop,1);letter-spacing:var(--name-letter-spacing-desktop,0);
  text-transform:none;color:inherit;white-space:nowrap;
}
.cover-author span{font-weight:400;letter-spacing:.04em;color:var(--ink-soft)}
@media(max-width:700px){
  .hero-cover-image{
    height:auto;
    min-height:0;
    object-position:center;
  }
  .hero-cover-title{
    left:var(--left-mobile,7%);
    top:var(--top-mobile,9.5%);
    font-size:var(--size-mobile,clamp(42px,12.5vw,66px));
    line-height:var(--line-height-mobile,1.2);
    letter-spacing:var(--letter-spacing-mobile,var(--letter-spacing-desktop,-.05em));
  }
  .cover-kicker{left:var(--left-mobile,7%);top:var(--top-mobile,3%);font-size:var(--size-mobile,9px);gap:10px;letter-spacing:var(--letter-spacing-mobile,.28em)}
  .cover-kicker::after{width:32px}
  .cover-subject{display:none}
  .cover-quote{
    left:var(--left-mobile,7%);top:var(--top-mobile,24%);width:var(--width-mobile,72%);padding-left:var(--padding-left-mobile,11px);
    font-size:var(--size-mobile,clamp(14px,4vw,19px));line-height:var(--line-height-mobile,1.22);
  }
  .cover-quote strong{margin-top:5px}
  .cover-motto{display:var(--display-mobile,none)}
  .cover-author{
    left:4%;right:4%;bottom:1%;display:block;padding:10px 12px;
    font-size:var(--size-mobile,7px);line-height:var(--line-height-mobile,1.35);letter-spacing:var(--letter-spacing-mobile,.07em);
  }
  .cover-author-name{
    display:block;margin:0 0 5px;
    font-family:var(--name-font-mobile,"Allura Local","Brush Script MT",cursive);
    font-size:var(--name-size-mobile,clamp(20px,6vw,28px));
    font-weight:var(--name-weight-mobile,400);line-height:var(--name-line-height-mobile,1);
    letter-spacing:var(--name-letter-spacing-mobile,0);text-transform:none;
  }
  .cover-author span{display:block;margin-top:3px;letter-spacing:.02em}
}
/* KHUNG COVER: chiều rộng tối đa và khoảng cách với bốn cạnh. */
.hero-inner{width:100%;min-height:max(760px,100svh);margin:auto;padding:28px var(--gutter) 78px;position:relative;isolation:isolate;display:flex;align-items:flex-start}
/* NHÓM HÌNH ẢNH: chứa tất cả các lớp ảnh của cover. */
.hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* NỀN GIẤY: ảnh màu kem và lớp nhám phủ toàn bộ cover. */
.hero-paper{position:absolute;z-index:0;inset:0;margin:0}
.hero-paper img{width:100%;height:100%;object-fit:cover}
/* TRANG TRÍ GÓC PHẢI: mảng sáng và các đường chéo mờ. */
.hero-corner{position:absolute;z-index:1;right:-38%;top:-2%;width:120%;height:46%;margin:0;opacity:.6}
.hero-corner img{width:100%;height:100%;object-fit:contain;object-position:right top}
/* SKYLINE TP.HCM: lớp ảnh thành phố nằm SAU vòng tròn đỏ và chân dung.
   bottom = nâng/hạ thành phố; height = độ cao vùng ảnh; opacity = độ đậm.
   mask-image làm phần bầu trời phía trên tan nhẹ vào nền giấy, không tạo mép ảnh cứng. */
.hero-skyline{position:absolute;z-index:1;left:-22%;right:-22%;bottom:18%;height:48%;margin:0;overflow:hidden;opacity:.62;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 18%,#000 44%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 18%,#000 44%)}
.hero-skyline img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 46%;filter:contrast(.9) brightness(1.06)}
/* VÒNG TRÒN ĐỎ: chỉnh width để đổi đường kính; right/top để di chuyển. */
.hero-disc{position:absolute;z-index:2;width:min(82vw,430px);aspect-ratio:1;right:-10%;bottom:38%;margin:0}
.hero-disc img{width:100%;height:100%;object-fit:contain}
/* CHÂN DUNG: khung luôn nằm trong viewport; thông số chỉnh tay đặt tại thẻ figure trong HTML. */
.hero-person{
  position:absolute;
  z-index:3;
  left:var(--left-mobile,8px);
  right:var(--right-mobile,8px);
  bottom:var(--bottom-mobile,36%);
  width:var(--width-mobile,auto);
  height:var(--height-mobile,58%);
  margin:0;
}
.hero-person img{
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:var(--object-fit,contain);
  object-position:var(--object-position-mobile,center bottom);
  filter:var(--filter,saturate(.94) contrast(1.02) drop-shadow(-14px 20px 18px rgba(43,34,28,.13)));
}
/* KHỐI CHỮ MOBILE: kicker ở trên, panel tiêu đề nằm sát phần dưới cover. */
.hero-copy{
  position:absolute;
  z-index:4;
  inset:0;
  width:100%;
  padding:28px var(--gutter) 76px;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
/* DÒNG “INTERACTIVE LONGFORM”: chữ nhỏ phía trên tiêu đề. */
.hero-kicker{font:700 clamp(9px,2.8vw,11px)/1.3 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--charcoal);margin:0;display:flex;align-items:center;gap:14px}
/* Gạch đỏ nhỏ cạnh chữ “INTERACTIVE LONGFORM”. */
.hero-kicker span{display:block;width:44px;height:2px;background:var(--red)}
/* PANEL TIÊU ĐỀ MOBILE: nhóm tiêu đề và quote thành một mặt phẳng đọc rõ. */
.hero-headline-panel{
  width:100%;
  margin-top:auto;
  padding:var(--panel-padding-mobile,17px 18px 16px);
  background:var(--panel-background-mobile,rgba(28,28,29,.92));
  color:var(--panel-color-mobile,var(--paper-light));
  border-radius:var(--panel-radius-mobile,10px);
  box-shadow:var(--panel-shadow-mobile,0 18px 42px rgba(36,28,23,.2));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* TIÊU ĐỀ CHUNG: kiểu chữ, độ đậm và khoảng cách dòng. */
.hero-title{margin:0;display:grid;gap:0;font-family:var(--font-family,var(--display));font-weight:var(--font-weight,700);letter-spacing:var(--letter-spacing,-.045em);line-height:var(--line-height,1.05);text-transform:var(--text-transform,uppercase)}
/* Cỡ chữ chung của “Doanh nghiệp” và “kiến quốc”. */
.hero-title-major,.hero-title-accent{display:block;font-size:var(--title-size-mobile,clamp(36px,10.8vw,48px))}
/* Hai màu tiêu đề trong panel mobile. */
.hero-title-major{color:var(--title-major-mobile,var(--paper-light))}
.hero-title-accent{color:var(--title-accent-mobile,#D76A61)}
/* CÂU TRÍCH DẪN: nằm trong cùng panel với tiêu đề. */
.hero-quote{width:100%;margin:12px 0 0;padding:0;border:0;font-family:var(--font-family,var(--quote));font-size:var(--quote-size-mobile,clamp(16px,4.7vw,20px));font-style:var(--font-style,italic);font-weight:var(--font-weight,700);line-height:var(--line-height,1.24);letter-spacing:var(--letter-spacing,-.018em);color:var(--quote-color-mobile,var(--paper-light))}
/* Phần nhấn mạnh trong câu trích dẫn. */
.hero-quote strong{display:block;margin-top:8px;color:var(--quote-accent-mobile,#E3A09A);font-size:1.08em;text-transform:uppercase}
/* TÊN NHÂN VẬT: hiện ở góc trên bên phải trên mobile. */
.hero-subject-name{display:block;position:absolute;z-index:5;right:var(--gutter);top:24px;width:48%;font:400 clamp(18px,5vw,23px)/1.05 var(--signature);letter-spacing:.01em;text-align:right;text-transform:none;color:var(--ink-soft)}
/* KHẨU HIỆU: “Vì một Việt Nam thịnh vượng” ở cạnh phải. */
.hero-motto{display:none}
/* THANH DƯỚI CÙNG: tên, chức danh và đơn vị của nhân vật. */
.hero-author{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);bottom:10px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px;padding-top:8px;border-top:1px solid rgba(28,28,29,.42);font:700 7px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.hero-author span{font-weight:400;letter-spacing:.03em;color:var(--ink-soft);text-align:right}

/* TABLET: tăng nhẹ tỷ lệ ảnh và chữ từ 600px trở lên. */
@media(min-width:600px){
  .hero,.hero-inner{min-height:max(820px,100svh)}
  .hero-inner{padding-top:38px}
  .hero-copy{padding:38px var(--gutter) 82px}
  .hero-headline-panel{padding:22px 26px 20px}
  .hero-title-major,.hero-title-accent{font-size:var(--title-size-tablet,clamp(44px,8vw,68px))}
  .hero-quote{width:100%;font-size:var(--quote-size-tablet,clamp(18px,3.2vw,24px))}
  .hero-subject-name{top:31px;font-size:26px}
  .hero-person{
    left:var(--left-tablet,2%);
    right:var(--right-tablet,2%);
    bottom:var(--bottom-tablet,30%);
    width:var(--width-tablet,auto);
    height:var(--height-tablet,64%);
  }
  .hero-person img{object-position:var(--object-position-tablet,right bottom)}
  .hero-disc{width:min(72vw,600px);right:-6%;bottom:32%}
  .hero-skyline{left:-12%;right:-12%;bottom:17%;height:52%;opacity:.58}
  .hero-author{font-size:9px}
}

/* DESKTOP: bố cục ngang hoàn chỉnh từ 900px trở lên. */
@media(min-width:900px){
  .hero{min-height:100svh}
  .hero-inner{width:min(1680px,100%);min-height:100svh;padding:clamp(28px,4.2vw,72px) var(--gutter) 92px;align-items:center}
  .hero-corner{right:-4%;top:-3%;width:68%;height:73%;opacity:.78}
  .hero-skyline{left:-2%;right:-2%;bottom:-1%;height:43%;opacity:1;-webkit-mask-image:none;mask-image:none}
  .hero-skyline img{object-position:50% 58%;filter:none}
  .hero-disc{width:clamp(450px,48vw,800px);right:4%;top:12%;bottom:auto}
  .hero-person{
    left:var(--left-desktop,auto);
    right:var(--right-desktop,0);
    bottom:var(--bottom-desktop,0);
    width:var(--width-desktop,min(72%,1180px));
    height:var(--height-desktop,91%);
  }
  .hero-person img{object-position:var(--object-position-desktop,right bottom)}
  .hero-copy{position:relative;inset:auto;width:min(51%,770px);padding:10px 0 74px;display:block;align-self:center;pointer-events:auto}
  .hero-headline-panel{width:auto;margin:0;padding:0;background:transparent;color:inherit;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-kicker{font-size:clamp(11px,.85vw,14px);letter-spacing:.38em;margin-bottom:clamp(40px,6vh,78px);gap:18px}
  .hero-title-major,.hero-title-accent{font-size:clamp(68px,7.4vw,124px)}
  .hero-title-major{color:var(--charcoal)}
  .hero-title-accent{color:var(--red)}
  .hero-quote{width:auto;max-width:680px;margin-top:clamp(36px,5vh,58px);padding-left:18px;font-size:clamp(24px,2.1vw,37px);line-height:1.24}
  .hero-quote{border-left:3px solid var(--red);color:var(--charcoal)}
  .hero-quote strong{margin-top:10px;color:var(--red)}
  .hero-subject-name{display:block;position:absolute;z-index:5;right:var(--gutter);top:18px;width:auto;font:400 clamp(24px,2vw,34px)/1.1 var(--signature);letter-spacing:.01em;text-align:left;text-transform:none;color:var(--charcoal)}
  .hero-motto{display:block;position:absolute;z-index:5;right:calc(var(--gutter) + 2px);top:16%;width:145px;padding-left:20px;border-left:1px solid rgba(28,28,29,.55);font:700 12px/1.75 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
  .hero-author{left:var(--gutter);right:var(--gutter);bottom:22px;display:flex;align-items:center;gap:22px;padding-top:17px;font-size:12px;letter-spacing:.18em}
  .hero-author span{letter-spacing:.06em;text-align:left}
}

/* Cover mới chỉ còn một ảnh; vô hiệu hóa chiều cao của bố cục xếp lớp cũ. */
.hero{min-height:0}

/* INTRO */
.intro{padding:56px 0 46px}
.intro-grid{display:grid;gap:36px;align-items:start}
.intro-copy p{font-family:var(--paragraph-font,var(--serif));font-size:var(--paragraph-size-mobile,clamp(18px,4.8vw,21px));font-weight:var(--paragraph-weight,400);line-height:var(--paragraph-line-height,1.67);letter-spacing:var(--paragraph-letter-spacing,0);color:var(--paragraph-color,var(--charcoal));margin:var(--paragraph-margin,0 0 1.15em)}
.intro-note{border-top:3px solid var(--red);padding-top:18px;font:700 11px/1.45 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.intro-signal{border:1px solid var(--charcoal);padding:20px;background:var(--paper-light)}
.signal-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);align-items:center}
.signal-row:last-child{border-bottom:0}
.signal-country{font:900 clamp(25px,3vw,46px)/.95 var(--condensed);text-transform:uppercase;letter-spacing:-.02em}
.signal-country.red{color:var(--red)}
.signal-tags{text-align:right;font:700 10px/1.45 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
@media(min-width:900px){.intro{padding:clamp(80px,9vw,126px) 0 clamp(64px,7vw,96px)}.intro-grid{grid-template-columns:1fr}.intro-copy{width:min(var(--content-width),100%);margin-inline:auto}.intro-copy p{font-size:var(--paragraph-size-desktop,clamp(20px,2vw,25px))}}

/* SECTION OPENER */
.section-opener{min-height:var(--min-height-mobile,0);display:flex;align-items:center;border-block:1px solid var(--charcoal);padding:var(--padding-top-mobile,60px) 0 var(--padding-bottom-mobile,60px);background-color:var(--section-background,transparent);color:var(--section-color,inherit)}
.section-opener.dark{background:var(--charcoal);color:var(--paper-light);border-color:var(--charcoal)}
.section-opener.red{background:var(--red);color:var(--paper-light);border-color:var(--red)}
.section-opener-inner{display:grid;gap:28px;align-items:end}
.section-number{font-family:var(--font-family,var(--condensed));font-size:var(--size-mobile,clamp(92px,27vw,132px));font-weight:var(--weight,900);line-height:var(--line-height,.7);letter-spacing:var(--letter-spacing,-.07em);color:var(--color,var(--red));margin:var(--margin,0)}
.dark .section-number{color:var(--color,var(--red-2))}
.red .section-number{color:var(--color,var(--charcoal))}
.section-title{font-family:var(--font-family,var(--condensed));font-size:var(--size-mobile,clamp(34px,9.5vw,48px));font-weight:var(--weight,900);line-height:var(--line-height-mobile,.92);text-transform:var(--text-transform,uppercase);letter-spacing:var(--letter-spacing-mobile,-.035em);color:var(--color,inherit);margin:var(--margin,0);max-width:var(--max-width,1000px);text-align:var(--text-align,left);overflow-wrap:anywhere}
.section-title em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;color:var(--red)}
.dark .section-title em,.red .section-title em{color:var(--paper-light)}
.section-strap{font-family:var(--font-family,var(--sans));font-size:var(--size-mobile,11px);font-weight:var(--weight,700);line-height:var(--line-height,1.4);letter-spacing:var(--letter-spacing,.16em);text-transform:var(--text-transform,uppercase);color:var(--color,inherit);max-width:var(--max-width,420px);margin:var(--margin,0)}
@media(min-width:900px){.section-opener{min-height:var(--min-height-desktop,78svh);padding:var(--padding-top-desktop,64px) 0 var(--padding-bottom-desktop,64px)}.section-opener-inner{grid-template-columns:.65fr 1.7fr;gap:64px}.section-number{align-self:start;font-size:var(--size-desktop,clamp(120px,21vw,330px))}.section-title{font-size:var(--size-desktop,clamp(42px,7vw,104px));line-height:var(--line-height-desktop,.88);letter-spacing:var(--letter-spacing-desktop,-.045em)}.section-strap{font-size:var(--size-desktop,var(--size-mobile,11px))}}

/* DATA MOMENT */
.data-moment{padding:56px 0;background:var(--paper-deep);border-block:1px solid var(--charcoal)}
/* INFOGRAPHIC SỐ LIỆU: khối tổng 1M+ bên trên/mobile, bên trái/desktop. */
.data-infographic{border:1px solid var(--charcoal);background:var(--paper-light)}
.data-intro{padding:22px 22px 18px;border-bottom:1px solid var(--charcoal);display:flex;justify-content:space-between;gap:18px;align-items:flex-end}
.data-eyebrow{font:700 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.data-source{font:700 9px/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:right}
.data-body{display:grid}
.data-primary{position:relative;overflow:hidden;padding:var(--padding-mobile,28px 24px);background:var(--background,var(--charcoal));color:var(--color,var(--paper-light));min-height:var(--min-height-mobile,270px);display:flex;flex-direction:column;justify-content:space-between}
.data-primary::after{content:"";position:absolute;width:210px;aspect-ratio:1;border:1px solid rgba(246,243,240,.22);border-radius:50%;right:-88px;bottom:-90px;box-shadow:0 0 0 28px rgba(246,243,240,.035),0 0 0 58px rgba(246,243,240,.025)}
.data-primary-number{position:relative;z-index:1;font-family:var(--font-family,var(--condensed));font-size:var(--number-size-mobile,clamp(82px,25vw,120px));font-weight:var(--number-weight,900);line-height:var(--number-line-height,.78);letter-spacing:var(--number-letter-spacing,-.07em);color:var(--number-color,var(--paper-light))}
.data-primary-label{position:relative;z-index:1;max-width:230px;font-family:var(--label-font,var(--sans));font-size:var(--label-size,13px);font-weight:var(--label-weight,700);line-height:var(--label-line-height,1.4);letter-spacing:var(--label-letter-spacing,.08em);text-transform:var(--label-transform,uppercase);color:var(--label-color,inherit)}
.data-growth{position:relative;z-index:1;margin-top:22px;padding-top:14px;border-top:1px solid rgba(246,243,240,.35);font-family:var(--growth-font,var(--sans));font-size:var(--growth-size,10px);font-weight:var(--growth-weight,700);line-height:var(--growth-line-height,1.45);letter-spacing:var(--growth-letter-spacing,.1em);text-transform:var(--growth-transform,uppercase);color:var(--growth-color,#CEC6C1)}
.data-growth strong{color:#DCA19B;font-size:1.35em}
/* Ba thanh tỷ lệ: đổi --value trong HTML để chỉnh chiều dài thanh. */
.data-metrics{display:grid}
.data-metric{padding:var(--padding-mobile,24px);border-bottom:1px solid var(--charcoal);display:grid;gap:var(--gap,18px);background:var(--background,transparent)}
.data-metric:last-child{border-bottom:0}
.data-metric-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.data-metric-value{font-family:var(--font-family,var(--condensed));font-size:var(--number-size-mobile,clamp(48px,14vw,66px));font-weight:var(--number-weight,900);line-height:var(--number-line-height,.82);letter-spacing:var(--number-letter-spacing,-.05em);color:var(--number-color,var(--red))}
.data-metric-label{max-width:170px;font-family:var(--label-font,var(--sans));font-size:var(--label-size,11px);font-weight:var(--label-weight,700);line-height:var(--label-line-height,1.4);letter-spacing:var(--label-letter-spacing,.07em);text-transform:var(--label-transform,uppercase);color:var(--label-color,inherit);text-align:right}
.data-track{height:13px;border:1px solid var(--charcoal);background:var(--paper-deep);position:relative}
.data-fill{width:var(--bar-value,var(--value));height:100%;background:var(--bar-color,var(--red));transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.72,.2,1)}
.data-metric.is-visible .data-fill{transform:scaleX(1)}
.data-scale{display:flex;justify-content:space-between;margin-top:-12px;font:700 8px/1 var(--sans);letter-spacing:.08em;color:var(--ink-soft)}
.data-notes{display:grid;gap:12px;padding:20px 22px;background:#DED8D3}
.data-annotation{font:600 15px/1.55 var(--serif);max-width:820px}
.data-annotation strong{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-right:8px}
.source-note{font:400 10px/1.55 var(--sans);letter-spacing:.025em;color:var(--ink-soft)}
.source-note a{color:inherit;text-decoration-color:rgba(195,70,62,.55);text-underline-offset:3px}
@media(min-width:700px){.data-primary{min-height:320px;padding:34px}.data-metrics{grid-template-columns:repeat(3,1fr)}.data-metric{border-bottom:0;border-right:1px solid var(--charcoal);align-content:space-between}.data-metric:last-child{border-right:0}.data-metric-head{display:grid}.data-metric-label{text-align:left}}
@media(min-width:900px){.data-moment{padding:clamp(80px,9vw,130px) 0}.data-intro{padding:24px 30px 20px}.data-body{grid-template-columns:minmax(300px,.75fr) minmax(0,1.65fr)}.data-primary{min-height:var(--min-height-desktop,430px);padding:var(--padding-desktop,clamp(34px,4vw,56px));border-right:1px solid var(--charcoal)}.data-primary-number{font-size:var(--number-size-desktop,clamp(100px,10vw,154px))}.data-primary-label{font-size:14px}.data-metrics{grid-template-columns:repeat(3,1fr)}.data-metric{padding:var(--padding-desktop,clamp(28px,3vw,44px))}.data-metric-value{font-size:var(--number-size-desktop,clamp(58px,5.8vw,88px))}.data-notes{grid-template-columns:1fr 1fr;padding:22px 30px;align-items:start}}

/* DATA EDITORIAL — bố cục tương tác dạng magazine, không dùng ảnh hoặc UI dashboard. */
.data-moment{
  position:relative;
  padding:clamp(70px,9vw,138px) 0;
  background-color:var(--paper);
  background-image:linear-gradient(rgba(28,28,29,.025) 1px,transparent 1px);
  background-size:100% 31px;
  border-block:1px solid rgba(28,28,29,.3);
}
.data-infographic{border:0;background:transparent}
.data-intro{padding:0 0 18px;border-bottom:1px solid var(--charcoal);align-items:center}
.data-eyebrow{font-family:var(--font-family,var(--sans));font-size:var(--size,10px);font-weight:var(--weight,700);line-height:var(--line-height,1.4);letter-spacing:var(--letter-spacing,.24em);text-transform:var(--text-transform,uppercase);color:var(--color,var(--red))}
.data-source{font-family:var(--font-family,var(--serif));font-size:var(--size,9px);font-style:var(--font-style,italic);font-weight:var(--weight,400);line-height:var(--line-height,1.35);text-transform:var(--text-transform,none);letter-spacing:var(--letter-spacing,.03em);color:var(--color,var(--ink-soft))}
.data-body{gap:0}
.data-primary{
  min-height:var(--min-height-mobile,390px);padding:var(--padding-mobile,clamp(28px,4vw,54px));
  background:var(--background,var(--charcoal));color:var(--color,var(--paper-light));
  border:0;isolation:isolate;transition:background .4s ease,color .4s ease;
}

.data-primary::after{
  content:"";position:absolute;z-index:-1;width:62%;height:9px;right:-7%;bottom:31%;
  border:0;border-radius:0;background:var(--red);box-shadow:none;
  transform:scaleX(.18);transform-origin:right;transition:transform .8s cubic-bezier(.2,.75,.2,1);
}
.data-primary:hover::after,.data-primary:focus-visible::after{transform:scaleX(1)}
.data-primary-number{font-size:var(--number-size-mobile,clamp(104px,15vw,228px));line-height:var(--number-line-height,.72);letter-spacing:var(--number-letter-spacing,-.075em)}
.data-primary-label{max-width:310px;font-size:var(--label-size,clamp(12px,1vw,15px));line-height:var(--label-line-height,1.45)}
.data-growth{max-width:310px;margin-top:18px;padding-top:12px;border-color:rgba(246,243,240,.42)}
.data-metrics{display:grid;background:var(--paper-light)}
.data-metric{
  position:relative;overflow:hidden;padding:var(--padding-mobile,clamp(26px,4vw,54px));
  border:0;border-bottom:1px solid rgba(28,28,29,.28);gap:var(--gap,24px);
  background:var(--background,transparent);transition:background .35s ease,transform .35s ease;
}
.data-metric:last-child{border-bottom:0}
.data-metric::before{
  content:"";position:absolute;left:0;bottom:0;width:var(--bar-value);height:7px;
  background:var(--bar-color,var(--red));transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.72,.2,1);
}
.data-metric.is-visible::before,.data-metric:hover::before,.data-metric:focus-visible::before{transform:scaleX(1)}
.data-metric:hover,.data-metric:focus-visible{background:var(--paper-deep);transform:translateX(-6px);outline:0}
.data-metric-head{display:grid;grid-template-columns:minmax(150px,.78fr) minmax(150px,1fr);align-items:end;gap:clamp(22px,4vw,70px)}
.data-metric-value{font-size:var(--number-size-mobile,clamp(72px,9vw,138px));line-height:var(--number-line-height,.74);letter-spacing:var(--number-letter-spacing,-.065em)}
.data-metric-label{max-width:220px;padding-bottom:5px;text-align:left;font-size:var(--label-size,11px);line-height:var(--label-line-height,1.45)}
.data-track{display:none}
.data-scale{display:none}
@media(min-width:900px){
  .data-body{grid-template-columns:minmax(340px,.82fr) minmax(0,1.38fr);align-items:stretch}
  .data-primary{min-width:0;min-height:var(--min-height-desktop,620px);padding:var(--padding-desktop,clamp(34px,4vw,56px));border-right:1px solid var(--charcoal)}
  .data-primary-number{max-width:100%;font-size:var(--number-size-desktop,clamp(112px,9vw,170px));white-space:nowrap;letter-spacing:var(--number-letter-spacing,-.075em)}
  .data-metrics{grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(3,1fr)}
  .data-metric{min-width:0;align-content:center;padding:var(--padding-desktop,clamp(28px,3vw,52px))}
  .data-metric:nth-child(1){grid-column:1/12;grid-row:1}
  .data-metric:nth-child(2){grid-column:2/13;grid-row:2;border-left:1px solid rgba(28,28,29,.2)}
  .data-metric:nth-child(3){grid-column:1/13;grid-row:3}
  .data-metric-head{grid-template-columns:minmax(0,max-content) minmax(130px,220px);justify-content:start;gap:clamp(18px,2vw,34px)}
  .data-metric-value{font-size:var(--number-size-desktop,clamp(64px,5.2vw,94px));white-space:nowrap}
  .data-metric-label{max-width:220px;overflow-wrap:anywhere}
}
@media(max-width:899px){
  .data-primary{min-height:var(--min-height-mobile,360px)}
  .data-primary-number{font-size:var(--number-size-mobile,clamp(96px,28vw,156px))}
  .data-metric-head{grid-template-columns:1fr auto}
  .data-metric-value{font-size:var(--number-size-mobile,clamp(64px,18vw,92px))}
  .data-metric-label{text-align:right;max-width:150px}
}

/* QUOTES */
.quote-screen{padding:var(--padding-top-mobile,64px) 0 var(--padding-bottom-mobile,64px);position:relative;overflow:hidden;background-color:var(--section-background,transparent);color:var(--section-color,inherit)}
.quote-layout{display:grid;gap:28px;align-items:center}
.quote-paper{padding:8px 0;position:relative;z-index:2}
.quote-text{font-family:var(--font-family,var(--quote));font-style:var(--font-style,italic);font-weight:var(--weight,700);font-size:var(--size-mobile,clamp(25px,7.3vw,31px));line-height:var(--line-height-mobile,1.16);letter-spacing:var(--letter-spacing-mobile,-.02em);color:var(--color,inherit);max-width:var(--max-width,none);text-align:var(--text-align,left);margin:var(--margin,0);overflow-wrap:anywhere}
.quote-author{font-family:var(--font-family,var(--sans));font-size:var(--size-mobile,10px);font-weight:var(--weight,700);line-height:var(--line-height,1.4);letter-spacing:var(--letter-spacing,.14em);text-transform:var(--text-transform,uppercase);color:var(--color,inherit);margin:var(--margin-mobile,22px 0 0)}
.quote-photo{margin:0;position:relative;z-index:1}
.quote-photo img{width:var(--image-width-mobile,100%);height:var(--image-height-mobile,auto);aspect-ratio:var(--aspect-ratio,auto);filter:var(--filter,saturate(.88));object-fit:var(--object-fit,contain);object-position:var(--object-position-mobile,var(--object-position,center));border-radius:var(--border-radius,0);box-shadow:var(--shadow,none);opacity:var(--opacity,1)}
.quote-caption{font:700 9px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}

/* QUOTE 01 — ảnh dọc bất đối xứng, chữ thoáng và dấu ngoặc lớn. */
.quote-editorial-a{background-color:var(--section-background,var(--paper));background-image:url("quote-sme-cafef32.jpg");background-position:42% center;background-size:cover;background-repeat:no-repeat}
.quote-editorial-a::before{
  content:"";position:absolute;z-index:0;inset:-48px;
  background:none;
  filter:blur(38px) saturate(.68);opacity:.3;transform:scale(1.08);
}
.quote-editorial-a::after{
  content:"";position:absolute;z-index:0;inset:0;
  background:linear-gradient(100deg,
  rgba(246,243,240,.96) 0%,
  rgba(246,243,240,.92) 40%,
  rgba(236,232,229,.88) 70%,
  rgba(246,243,240,.92) 100%);
}
.quote-editorial-a .quote-layout{position:relative;z-index:1}
.quote-editorial-a .quote-paper{padding:24px 4px 8px}
.quote-editorial-a .quote-photo img{aspect-ratio:var(--aspect-ratio,16/11);object-fit:var(--object-fit,cover);object-position:var(--object-position-mobile,center 34%);box-shadow:var(--shadow,18px 22px 44px rgba(51,42,34,.13))}
.quote-editorial-a .quote-photo::after{content:"";position:absolute;inset:14px -10px -12px 14px;background:var(--red);opacity:.12;z-index:-1}

/* QUOTE 02 — mảng đỏ nằm trong một box, chừa nền Warm Ivory bao quanh. */
.quote-editorial-b{background:var(--section-background,var(--article-paper));color:var(--section-color,var(--paper-light))}
.quote-editorial-b .quote-layout{position:relative;padding:28px;background:var(--box-background,var(--red));overflow:hidden;box-shadow:0 22px 56px rgba(69,48,42,.14)}
.quote-editorial-b .quote-layout::after{content:"SCALE ≠ VALUE";position:absolute;right:-18px;bottom:-18px;font:900 clamp(64px,12vw,180px)/.72 var(--condensed);letter-spacing:-.07em;color:rgba(246,243,240,.07);white-space:nowrap;pointer-events:none}
.quote-editorial-b .quote-photo{width:72%;margin-left:auto}
.quote-editorial-b .quote-photo img{aspect-ratio:var(--aspect-ratio,1);object-fit:var(--object-fit,cover);object-position:var(--object-position-mobile,56% center);border-radius:var(--border-radius,50%);filter:var(--filter,grayscale(1) contrast(1.08));box-shadow:var(--shadow,-18px 22px 48px rgba(51,18,13,.26))}
.quote-editorial-b .quote-caption{color:#EAC0BC;text-align:right}
.quote-editorial-b .quote-photo,.quote-editorial-b .quote-paper{position:relative;z-index:1}
.quote-editorial-b .quote-paper{padding:8px 0;color:var(--paper-light)}
.quote-editorial-b .quote-text{font-style:var(--font-style,normal)}
.quote-editorial-b{padding-bottom:24px}
.quote-editorial-b + .quiet-zone{padding-top:24px}

/* QUOTE 03 — ảnh cảnh quan toàn khung, quote đặt ở vùng trên cùng. */
.quote-editorial-c{padding:0;background:var(--section-background,var(--article-paper));color:var(--section-color,var(--charcoal))}
.quote-editorial-c .quote-layout{position:relative;display:grid;grid-template:1fr/1fr;gap:0;width:100%;min-height:var(--image-height-mobile,clamp(620px,88svh,760px));padding:0}
.quote-editorial-c .quote-photo{grid-area:1/1;z-index:1;margin:0;align-self:stretch}
.quote-editorial-c .quote-photo img{width:100%;height:100%;min-height:inherit;aspect-ratio:auto;object-fit:var(--object-fit,cover);object-position:var(--object-position-mobile,center);filter:var(--filter,none)}
.quote-editorial-c .quote-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,241,237,.6) 0%,rgba(244,241,237,.24) 36%,rgba(244,241,237,0) 66%);pointer-events:none}
.quote-editorial-c .quote-caption{display:none}
.quote-editorial-c .quote-paper{grid-area:1/1;align-self:start;justify-self:start;z-index:2;width:calc(100% - 32px);max-width:720px;margin:24px 16px 0;padding:24px;border-top:3px solid var(--red);background:rgba(244,241,237,.74);color:var(--charcoal);box-shadow:0 18px 48px rgba(28,28,29,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

@media(min-width:600px){.quote-text{font-size:var(--size-tablet,var(--size-mobile,clamp(31px,5vw,42px)))}.quote-editorial-c .quote-paper{padding:34px}}
@media(min-width:900px){
  .quote-screen{padding:var(--padding-top-desktop,clamp(96px,10vw,150px)) 0 var(--padding-bottom-desktop,clamp(96px,10vw,150px))}
  .quote-text{font-size:var(--size-desktop,clamp(40px,4.2vw,62px));line-height:var(--line-height-desktop,1.12);letter-spacing:var(--letter-spacing-desktop,-.025em)}
  .quote-author{font-size:var(--size-desktop,var(--size-mobile,11px));margin:var(--margin-desktop,30px 0 0)}
  .quote-photo img{width:var(--image-width-desktop,var(--image-width-mobile,100%));height:var(--image-height-desktop,var(--image-height-mobile,auto));object-position:var(--object-position-desktop,var(--object-position-mobile,var(--object-position,center)))}
  .quote-editorial-a{padding:var(--padding-top-desktop,clamp(72px,8vw,116px)) 0 var(--padding-bottom-desktop,clamp(72px,8vw,116px));background:var(--section-background,var(--paper))}
  .quote-editorial-a::before{display:none}
  .quote-editorial-a::after{display:none}
  .quote-editorial-a .quote-layout{width:100%;min-height:var(--frame-height-desktop,clamp(560px,66svh,680px));grid-template-columns:1fr;grid-template-rows:1fr;gap:0;overflow:hidden;isolation:isolate;background-color:var(--paper-light);background-image:url("quote-sme-cafef32.jpg");background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:none}
  .quote-editorial-a .quote-layout::before{content:"";position:absolute;z-index:0;inset:-34px -34px -34px 40%;background:none;filter:blur(30px) saturate(.68);opacity:.66;transform:scale(1.1)}
  .quote-editorial-a .quote-layout::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(246,243,240,.16) 49%,rgba(246,243,240,.52) 68%,rgba(246,243,240,.9) 100%);pointer-events:none}
  .quote-editorial-a .quote-photo{grid-area:1/1;align-self:stretch;width:100%;height:100%;margin:0;z-index:1}
  .quote-editorial-a .quote-photo img{display:block;width:var(--image-width-desktop,66%);height:100%;min-height:var(--frame-height-desktop,clamp(560px,66svh,680px));aspect-ratio:auto;object-fit:var(--object-fit,contain);object-position:var(--object-position-desktop,left center)}
  .quote-editorial-a .quote-photo::after{display:block;content:"";position:absolute;z-index:2;top:0;bottom:0;left:48%;right:auto;width:30%;background:linear-gradient(90deg,rgba(246,243,240,0),rgba(246,243,240,.18) 48%,rgba(246,243,240,.5));opacity:1;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
  .quote-editorial-a .quote-paper{grid-area:1/1;align-self:center;justify-self:end;z-index:3;width:min(34vw,600px);margin:0 clamp(64px,7vw,140px) 0 0;padding:clamp(18px,1.8vw,28px) clamp(28px,2.8vw,44px);border-left:0;background:rgba(246,243,240,.24);backdrop-filter:blur(3px);box-shadow:none}
  .quote-editorial-a .quote-text{font-size:var(--size-desktop,clamp(34px,3vw,50px))}
  .quote-editorial-b .quote-layout{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(54px,8vw,120px);padding:clamp(48px,5vw,76px)}
  .quote-editorial-b .quote-photo{grid-column:2;grid-row:1;width:100%;margin:0}
  .quote-editorial-b .quote-paper{grid-column:1;grid-row:1;padding:40px 0}
  .quote-editorial-b{padding-bottom:32px}
  .quote-editorial-b + .quiet-zone{padding-top:32px}
  .quote-editorial-c{padding:0}
  .quote-editorial-c .quote-layout{min-height:var(--image-height-desktop,clamp(680px,82svh,860px));grid-template:1fr/1fr;padding:0}
  .quote-editorial-c .quote-photo{grid-area:1/1;margin:0;align-self:stretch}
  .quote-editorial-c .quote-photo img{height:100%;aspect-ratio:auto;object-position:var(--object-position-desktop,center)}
  .quote-editorial-c .quote-paper{grid-area:1/1;align-self:start;justify-self:center;width:min(46vw,760px);margin:clamp(42px,6vw,88px) 0 0;padding:clamp(34px,4vw,56px);background:rgba(244,241,237,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}

/* INTERACTIVE 5I — năm thẻ lật; click/chạm để xem mặt sau. */
.scrolly{padding:64px 0;background:linear-gradient(160deg,var(--paper) 0%,var(--paper-light) 64%,var(--paper-deep) 100%);overflow:hidden}
.scrolly-head{max-width:820px;margin:0 0 38px}
.scrolly-kicker{font-family:var(--font-family,var(--sans));font-size:var(--size,11px);font-weight:var(--weight,700);line-height:var(--line-height,1.4);letter-spacing:var(--letter-spacing,.18em);text-transform:var(--text-transform,uppercase);color:var(--color,var(--red));margin-bottom:var(--margin-bottom,14px)}
.scrolly-title{font-family:var(--font-family,var(--condensed));font-size:var(--size-mobile,clamp(36px,10.5vw,46px));font-weight:var(--weight,900);line-height:var(--line-height-mobile,.96);text-transform:var(--text-transform,uppercase);letter-spacing:var(--letter-spacing-mobile,-.03em);color:var(--color,inherit);max-width:var(--max-width,none);margin:var(--margin,0);overflow-wrap:anywhere}
.flip-guide{margin:var(--margin,-18px 0 26px);font-family:var(--font-family,var(--sans));font-size:var(--size,10px);font-weight:var(--weight,700);line-height:var(--line-height,1.5);letter-spacing:var(--letter-spacing,.12em);text-transform:var(--text-transform,uppercase);color:var(--color,var(--ink-soft))}
.flip-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,310px);gap:16px;overflow-x:auto;padding:8px 2px 32px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain}
.flip-card{appearance:none;border:0;background:transparent;padding:0;height:var(--card-height-mobile,390px);perspective:1200px;cursor:pointer;text-align:left;scroll-snap-align:center;color:var(--front-color,var(--charcoal))}
.flip-card-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--transition-speed,.7s) cubic-bezier(.2,.72,.2,1)}
.flip-card.is-flipped .flip-card-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:var(--padding-mobile,26px);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow,0 18px 38px rgba(28,28,29,.16));border-radius:var(--border-radius,0)}
.flip-front{justify-content:space-between;overflow:hidden;isolation:isolate;background-color:var(--front-background,var(--paper-light));color:var(--front-color,var(--charcoal))}
.flip-front::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(to bottom,rgba(246,243,240,.82) 0%,transparent 25%,transparent 68%,rgba(28,28,29,.64) 100%);pointer-events:none}
.flip-front-image{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--front-image-position,center);filter:var(--front-image-filter,none);transform:scale(1.012)}
.flip-card.new .flip-front{background-color:var(--front-background,var(--red));color:var(--front-color,var(--paper-light))}
.flip-back{transform:rotateY(180deg);justify-content:space-between;background:var(--back-background,var(--charcoal));color:var(--back-color,var(--paper-light))}
.flip-card.new .flip-back{background:var(--back-background,var(--paper-light));color:var(--back-color,var(--charcoal))}
.flip-num{font:900 15px/1 var(--condensed);letter-spacing:.08em;color:var(--red)}
.flip-front .flip-num{align-self:flex-start;padding:8px 9px 7px;background:rgba(246,240,231,.88);box-shadow:0 5px 16px rgba(28,28,29,.12);backdrop-filter:blur(4px)}
.flip-card.new .flip-front .flip-num{background:rgba(195,70,62,.9);color:var(--paper-light)}
.flip-name{display:block;font-family:var(--font-family,var(--condensed));font-size:var(--title-size-mobile,clamp(34px,10vw,48px));font-weight:var(--title-weight,900);line-height:var(--title-line-height,.88);letter-spacing:var(--title-letter-spacing,-.045em);text-transform:uppercase;overflow-wrap:anywhere}
.flip-card:last-child .flip-name{font-size:var(--title-size-mobile,clamp(28px,8vw,38px))}
.flip-vn{display:block;margin-top:12px;font:700 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.flip-hint{align-self:flex-start;padding:7px 9px;background:rgba(28,28,29,.82);color:var(--paper-light);font:700 9px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:1;backdrop-filter:blur(4px)}
.flip-back-main{display:block}
.flip-back .flip-copy{margin-top:22px}
.flip-copy{display:block;font:600 20px/1.45 var(--serif);margin:0}
.flip-role{font:700 10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#DCA19B}
.flip-card.new .flip-role{color:var(--red)}
.flip-card:focus-visible{outline:3px solid var(--red);outline-offset:5px}
.fivei-outcome{margin-top:18px;padding:26px;background:var(--charcoal);color:var(--paper-light);display:grid;gap:8px;box-shadow:0 20px 48px rgba(28,28,29,.14)}
.fivei-formula{font:900 clamp(31px,9vw,44px)/.94 var(--condensed);letter-spacing:-.03em}
.fivei-formula strong{color:#DB8E87}
.fivei-note,.flip-source{font:700 10px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#C8C1BD}
.flip-source{margin-top:var(--margin-top,18px);font-family:var(--font-family,var(--sans));font-size:var(--size,10px);font-weight:var(--weight,400);line-height:var(--line-height,1.55);color:var(--color,var(--ink-soft));text-transform:var(--text-transform,none);letter-spacing:var(--letter-spacing,.03em)}
.flip-source a{color:inherit;text-decoration-color:rgba(195,70,62,.55);text-underline-offset:3px}
/* Các class .step bên dưới vẫn phục vụ interactive Dòng vốn. */
.steps{display:grid;gap:0}
.step{min-height:auto;display:flex;align-items:center;border-top:1px solid var(--rule);padding:32px 0}
.step:first-child{border-top:0}
.step-inner{width:100%;max-width:560px;min-width:0}
.step-no{font:900 15px/1 var(--condensed);color:var(--red);letter-spacing:.08em;margin-bottom:14px}
.step h3{font:900 clamp(28px,4vw,46px)/1 var(--condensed);text-transform:uppercase;letter-spacing:-.02em;margin:0 0 14px}
.step p{font-size:18px;line-height:1.65;margin:0}
@media(min-width:900px){.scrolly{padding:clamp(100px,10vw,150px) 0}.scrolly-head{margin-bottom:56px}.scrolly-title{font-size:var(--size-desktop,clamp(44px,6vw,82px));line-height:var(--line-height-desktop,.94);letter-spacing:var(--letter-spacing-desktop,var(--letter-spacing-mobile,-.03em))}.flip-guide{margin-top:-30px}.flip-grid{grid-auto-flow:initial;grid-auto-columns:auto;grid-template-columns:repeat(5,1fr);gap:14px;overflow:visible;padding:8px 0 30px}.flip-card{height:var(--card-height-desktop,410px)}.flip-face{padding:var(--padding-desktop,24px)}.flip-name{font-size:var(--title-size-desktop,clamp(28px,2.7vw,42px))}.flip-card:last-child .flip-name{font-size:var(--title-size-desktop,clamp(23px,2.2vw,34px))}.fivei-outcome{grid-template-columns:1.2fr .8fr;align-items:end;padding:34px 38px}.step{min-height:58vh;padding:44px 0}.step p{font-size:20px}}

/* CENTRAL SECTION transition */
.transition-note{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.35);font:700 10px/1.4 var(--sans);letter-spacing:.17em;text-transform:uppercase}

/* CAPITAL FLOW */
.capital-flow{background:var(--charcoal);color:var(--paper-light);padding:60px 0}
.capital-head{max-width:880px;margin-bottom:38px}
.capital-head .scrolly-kicker{color:#D89A94}
.capital-head .scrolly-title{color:var(--color,var(--paper-light))}
.capital-shell{display:grid;gap:32px;align-items:start}
.capital-art{display:none;background:#282729;padding:16px;overflow-x:auto;overscroll-behavior-inline:contain;box-shadow:0 24px 54px rgba(0,0,0,.2),inset 0 0 0 1px rgba(246,243,240,.16)}

/* TIMELINE DỌC MOBILE: ảnh minh họa → tên lĩnh vực → diễn giải ngắn. */
.capital-mobile-flow{display:block;position:relative;margin-top:6px}
.mobile-flow-label{margin:0 0 18px;font:700 10px/1.45 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#D89A94}
.mobile-flow-list{position:relative;display:grid;gap:22px;padding-left:27px}
.mobile-flow-list::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;background:linear-gradient(to bottom,#747172 0%,var(--red) 24%,var(--red) 82%,#D89A94 100%)}
.mobile-flow-card{position:relative;overflow:visible;background:var(--card-background,var(--paper));color:var(--card-color,var(--charcoal));border-radius:var(--card-radius,12px);box-shadow:var(--card-shadow,0 18px 38px rgba(0,0,0,.2));transition:opacity .45s ease,transform .45s ease,box-shadow .45s ease}
.mobile-flow-card::before{content:"";position:absolute;z-index:3;left:-26px;top:34px;width:12px;height:12px;border-radius:50%;background:#706D6D;border:3px solid var(--charcoal);box-shadow:0 0 0 1px #9A9290;transition:background .4s ease,box-shadow .4s ease}
.mobile-flow-image{display:block;width:100%;aspect-ratio:var(--image-ratio,3/2);object-fit:cover;object-position:var(--image-position,center);background:var(--paper);border-radius:var(--card-radius,12px) var(--card-radius,12px) 0 0}
.mobile-flow-copy{padding:var(--copy-padding,17px 18px 19px)}
.mobile-flow-no{display:block;margin-bottom:7px;font:700 10px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
.mobile-flow-title{margin:0;font:700 clamp(27px,8.2vw,35px)/.96 var(--condensed);letter-spacing:-.02em;text-transform:uppercase;color:var(--charcoal)}
.mobile-flow-description{margin:10px 0 0;font:400 15px/1.55 var(--serif);color:var(--ink-soft)}
.mobile-flow-shift{position:relative;margin:2px 0 2px;padding:13px 14px;background:var(--red);color:var(--paper-light);font:700 10px/1.4 var(--sans);letter-spacing:.13em;text-align:center;text-transform:uppercase;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.mobile-flow-outcome{margin:24px 0 0 27px;padding:20px 18px;background:var(--red);color:var(--paper-light);box-shadow:0 18px 38px rgba(0,0,0,.22)}
.mobile-flow-outcome span{display:block;font:700 9px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;opacity:.74}
.mobile-flow-outcome strong{display:block;margin-top:7px;font:700 clamp(29px,8.7vw,38px)/.94 var(--condensed);letter-spacing:-.025em;text-transform:uppercase}
.capital-steps{display:none}
html.js .mobile-flow-card{opacity:.58;transform:translateY(8px)}
[data-flow-stage="1"] .mobile-flow-card[data-mobile-stage="1"],
[data-flow-stage="2"] .mobile-flow-card[data-mobile-stage="2"],
[data-flow-stage="3"] .mobile-flow-card[data-mobile-stage="3"],
[data-flow-stage="4"] .mobile-flow-card[data-mobile-stage="4"]{opacity:1;transform:none;box-shadow:0 22px 48px rgba(0,0,0,.3)}
[data-flow-stage="1"] .mobile-flow-card[data-mobile-stage="1"]::before,
[data-flow-stage="2"] .mobile-flow-card[data-mobile-stage="2"]::before,
[data-flow-stage="3"] .mobile-flow-card[data-mobile-stage="3"]::before,
[data-flow-stage="4"] .mobile-flow-card[data-mobile-stage="4"]::before{background:var(--red);box-shadow:0 0 0 4px rgba(195,70,62,.22)}


/* Trên mobile sơ đồ giữ đủ rộng để chữ không bị co nhỏ; có thể vuốt ngang. */
.flow-svg{width:620px;max-width:none;height:auto}
.flow-svg text{font-family:Arial,Helvetica,sans-serif;fill:var(--paper-light);font-weight:700;letter-spacing:.04em}
.flow-svg text{font-size:18px}
.flow-source{fill:#494647;stroke:#8A8482;stroke-width:1.5}
.flow-target{fill:#302E2F;stroke:#747172;stroke-width:1.5;transition:fill .5s ease,stroke .5s ease}
.flow-path{fill:none;stroke:#8E4541;stroke-width:3;stroke-linecap:round;stroke-dasharray:10 11;opacity:.2;transition:opacity .5s ease,stroke-width .5s ease}
[data-flow-stage="2"] .path-a,[data-flow-stage="3"] .path-a,[data-flow-stage="4"] .path-a{opacity:.8;stroke-width:4}
[data-flow-stage="3"] .path-b,[data-flow-stage="4"] .path-b{opacity:.9;stroke-width:4}
[data-flow-stage="4"] .path-c{opacity:1;stroke-width:5}
[data-flow-stage="2"] .target-a,[data-flow-stage="3"] .target-a,[data-flow-stage="4"] .target-a,
[data-flow-stage="3"] .target-b,[data-flow-stage="4"] .target-b,
[data-flow-stage="4"] .target-c{fill:var(--red);stroke:#D99A94}
.flow-legend{display:flex;justify-content:space-between;gap:18px;margin-top:18px;font:700 9px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#C8C1BD}
.capital-steps .step{border-color:rgba(246,243,240,.2)}
.capital-steps .step h3{color:var(--paper-light)}
.capital-steps .step p{color:#DCD6D2}
.capital-quote{margin-top:44px;border-top:1px solid rgba(246,243,240,.35);padding-top:28px;max-width:1000px}
.capital-quote p{font:italic 700 clamp(24px,7vw,31px)/1.2 var(--quote);margin:0;color:var(--paper-light)}
@media(min-width:900px){.capital-flow{padding:clamp(90px,10vw,150px) 0}.capital-head{margin-bottom:54px}.capital-shell{grid-template-columns:minmax(460px,1fr) minmax(0,.85fr);gap:clamp(40px,7vw,100px)}.capital-mobile-flow{display:none}.capital-art{display:block;position:sticky;top:7vh;padding:clamp(18px,3vw,34px);overflow:visible}.capital-steps{display:grid}.flow-svg{width:100%;max-width:100%}.flow-svg text{font-size:16px}.capital-quote{margin-top:60px;padding-top:36px}.capital-quote p{font-size:clamp(28px,4vw,54px);line-height:1.16}}

/* CAPITAL RIVER — landscape raster sáng, label và trạng thái vẫn là HTML tương tác. */
.capital-flow{
  background:var(--paper-light);color:var(--charcoal);
  border-block:1px solid rgba(28,28,29,.18);
}
.capital-head .scrolly-kicker{color:var(--red)}
.capital-head .scrolly-title{color:var(--charcoal)}
.capital-art{
  position:relative;background:var(--paper);padding:0;overflow:hidden;
  box-shadow:0 26px 70px rgba(28,28,29,.14);border:1px solid rgba(28,28,29,.2);
}
.capital-landscape{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.72,.2,1),filter .6s ease}
.capital-art:hover .capital-landscape{transform:scale(1.018)}
.capital-map-title{
  position:absolute;left:4%;top:4%;display:grid;gap:3px;padding:10px 13px;
  background:rgba(246,243,240,.9);box-shadow:0 10px 30px rgba(28,28,29,.09);
}
.capital-map-title span{font:700 8px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.capital-map-title strong{font:900 clamp(22px,2.3vw,36px)/.9 var(--condensed);letter-spacing:-.035em;text-transform:uppercase}
.capital-place{
  position:absolute;z-index:2;display:grid;gap:2px;max-width:180px;padding:9px 11px;
  border:0;border-left:4px solid var(--red);background:rgba(246,243,240,.9);color:var(--charcoal);
  box-shadow:0 12px 32px rgba(28,28,29,.1);font:900 clamp(10px,1vw,15px)/1.05 var(--condensed);
  letter-spacing:-.01em;text-align:left;text-transform:uppercase;cursor:pointer;
  opacity:.42;filter:saturate(.45);transform:translateY(8px);transition:opacity .45s ease,filter .45s ease,transform .45s ease,background .3s ease;
}
.capital-place span{font:700 7px/1 var(--sans);letter-spacing:.12em;color:var(--red)}
.capital-place:hover,.capital-place:focus-visible{opacity:1;filter:none;transform:translateY(0) scale(1.03);background:var(--paper-light);outline:2px solid var(--red);outline-offset:3px}
.place-real-estate{left:3%;top:30%}.place-finance{left:4%;bottom:18%}
.place-industry{right:4%;top:16%}.place-ai{right:8%;top:43%}
.place-hightech{right:5%;top:62%}.place-green{right:8%;bottom:5%}
[data-flow-stage="1"] .capital-place[data-map-stage="1"],
[data-flow-stage="2"] .capital-place[data-map-stage="2"],
[data-flow-stage="3"] .capital-place[data-map-stage="3"],
[data-flow-stage="4"] .capital-place{opacity:1;filter:none;transform:translateY(0)}
.capital-map-caption{
  position:absolute;left:4%;bottom:4%;max-width:44%;display:grid;gap:3px;padding:10px 13px;
  background:rgba(246,243,240,.9);border-top:3px solid var(--red);
}
.capital-map-caption span{font:700 8px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.capital-map-caption strong{font:600 italic clamp(11px,1vw,15px)/1.25 var(--serif)}
.capital-steps .step{border-color:rgba(28,28,29,.18)}
.capital-steps .step h3,.capital-steps .step p{color:var(--charcoal)}
.capital-quote{border-color:rgba(28,28,29,.24)}
.capital-quote p{color:var(--charcoal)}
.mobile-flow-label{color:var(--red)}
.mobile-flow-card{border-radius:0;box-shadow:0 16px 38px rgba(28,28,29,.11)}
.mobile-flow-image{border-radius:0;filter:saturate(.86) brightness(1.04)}
@media(min-width:900px){
  .capital-shell{grid-template-columns:minmax(620px,1.45fr) minmax(340px,.7fr);gap:clamp(34px,5vw,74px)}
  .capital-art{top:4vh;padding:0}
  .capital-steps .step{min-height:52vh}
}
@media(max-width:899px){
  .capital-flow{padding:70px 0}
  .capital-head{margin-bottom:30px}
}

/* CAPITAL CINEMA — các minh họa rời và dòng tiền Canvas, không dùng ảnh composite. */
.capital-cinema{
  position:relative;isolation:isolate;aspect-ratio:16/10;overflow:hidden;
  background:
    radial-gradient(circle at 48% 50%,rgba(195,70,62,.08),transparent 30%),
    linear-gradient(145deg,var(--paper-light),var(--paper) 62%,#E8E3DE);
}
.capital-cinema::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.22;
  background-image:linear-gradient(rgba(28,28,29,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(28,28,29,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
.capital-money-canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.capital-zone{
  position:absolute;z-index:1;margin:0;width:29%;opacity:.16;filter:saturate(.45) contrast(.95);
  transform:translateY(22px) scale(.94);transition:opacity .8s ease,filter .8s ease,transform 1.05s cubic-bezier(.2,.75,.2,1);
}
.capital-zone img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 82% 76% at 50% 50%,#000 53%,rgba(0,0,0,.84) 67%,transparent 100%);
  mask-image:radial-gradient(ellipse 82% 76% at 50% 50%,#000 53%,rgba(0,0,0,.84) 67%,transparent 100%);
}
.capital-zone figcaption{
  position:absolute;left:8%;bottom:7%;display:grid;gap:2px;padding:7px 9px;
  background:rgba(246,243,240,.9);border-left:3px solid var(--red);
  font-family:var(--zone-label-font,var(--condensed));font-size:var(--zone-label-size-desktop,clamp(9px,.85vw,14px));font-weight:var(--zone-label-weight,900);line-height:var(--zone-label-line-height,1.04);letter-spacing:var(--zone-label-letter-spacing,-.01em);text-transform:var(--zone-label-transform,uppercase);color:var(--zone-label-color,var(--charcoal));
}
.capital-zone figcaption span{font:700 7px/1 var(--sans);letter-spacing:.12em;color:var(--red)}
.zone-real-estate{left:-2%;top:9%}.zone-finance{left:2%;bottom:5%}
.zone-industry{right:2%;top:3%}.zone-ai{right:19%;top:34%;width:25%}
.zone-hightech{right:2%;top:49%}.zone-green{right:11%;bottom:-4%;width:34%}
[data-flow-stage="1"] .capital-zone[data-zone-stage="1"],
[data-flow-stage="2"] .capital-zone[data-zone-stage="1"],
[data-flow-stage="2"] .capital-zone[data-zone-stage="2"],
[data-flow-stage="3"] .capital-zone,
[data-flow-stage="4"] .capital-zone{opacity:1;filter:saturate(.9) contrast(1.02);transform:translateY(0) scale(1)}
[data-flow-stage="2"] .zone-real-estate,[data-flow-stage="2"] .zone-finance,
[data-flow-stage="3"] .zone-real-estate,[data-flow-stage="3"] .zone-finance,
[data-flow-stage="4"] .zone-real-estate,[data-flow-stage="4"] .zone-finance{opacity:.62;transform:translateX(-7px) scale(.98)}
.capital-cinema-title{position:absolute;z-index:4;left:34%;top:5%;display:grid;gap:3px;max-width:29%;pointer-events:none}
.capital-cinema-title span{font:700 8px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.capital-cinema-title strong{font:900 clamp(25px,3.3vw,52px)/.84 var(--condensed);letter-spacing:-.05em;text-transform:uppercase;color:var(--charcoal)}
.capital-cinema-title em{margin-top:4px;font:600 italic clamp(9px,.8vw,13px)/1.35 var(--serif);color:var(--ink-soft)}
.capital-cinema-end{
  position:absolute;z-index:4;right:4%;bottom:4%;padding:8px 11px;background:var(--red);color:var(--paper-light);
  font:900 clamp(10px,1vw,15px)/1 var(--condensed);letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;
}
[data-flow-stage="4"] .capital-cinema-end{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.capital-zone,.capital-cinema-end{transition:none}.capital-art:hover .capital-landscape{transform:none}}

/* CAPITAL CINEMA V2 — sân khấu sticky toàn màn hình cho desktop và mobile. */
.capital-flow{padding:40px 0 0}
.capital-flow>.wide{width:100%;max-width:none}
.capital-head{width:min(var(--wide-width),calc(100% - 2*var(--gutter)));margin:0 auto 24px;text-align:center}
.capital-shell{display:grid;grid-template:1fr/1fr;gap:0;position:relative}
.capital-art,.capital-steps{grid-area:1/1}
.capital-art{
  display:block;position:sticky;z-index:1;top:0;width:100%;height:100svh;
  border:0;box-shadow:none;background:var(--paper-light);overflow:hidden;
}
.capital-cinema{width:100%;height:100%;aspect-ratio:auto}
.capital-cinema-title{display:none}
.capital-mobile-flow{display:none}
.capital-steps{display:block;position:relative;z-index:4;pointer-events:none}
.capital-steps .step{
  min-height:100svh;padding:clamp(72px,9vh,120px) var(--gutter);border:0;
  display:flex;align-items:center;justify-content:flex-end;
}
.capital-steps .step-inner{
  width:min(410px,31vw);padding:clamp(24px,3vw,42px);
  background:rgba(246,243,240,.91);color:var(--charcoal);
  border-top:4px solid var(--red);box-shadow:0 24px 70px rgba(28,28,29,.12);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:.42;transform:translateY(26px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.75,.2,1);
}
.capital-steps .step.is-flow-active .step-inner{opacity:1;transform:none}
.capital-steps .step h3{font-family:var(--step-title-font,var(--condensed));font-size:var(--step-title-size-desktop,clamp(35px,4vw,62px));font-weight:var(--step-title-weight,900);line-height:var(--step-title-line-height,.9);letter-spacing:var(--step-title-letter-spacing,-.035em)}
.capital-steps .step p{font-family:var(--step-copy-font,var(--serif));font-size:var(--step-copy-size-desktop,clamp(17px,1.3vw,21px));font-weight:var(--step-copy-weight,400);line-height:var(--step-copy-line-height,1.6)}
.capital-quote{width:min(var(--wide-width),calc(100% - 2*var(--gutter)));margin:0 auto;padding:clamp(70px,9vw,130px) 0;border:0}
.capital-zone{width:32%}
.zone-real-estate{left:1%;top:10%}.zone-finance{left:3%;bottom:7%}
.zone-industry{right:4%;top:6%}.zone-ai{right:31%;top:32%;width:25%}
.zone-hightech{right:3%;top:48%}.zone-green{right:15%;bottom:0;width:36%}
[data-flow-stage="1"] .capital-zone{opacity:.14;filter:saturate(.35);transform:translateY(18px) scale(.93)}
[data-flow-stage="1"] .capital-zone[data-zone-stage="1"]{opacity:1;filter:saturate(.9);transform:none}
[data-flow-stage="2"] .capital-zone{opacity:.13;filter:saturate(.3);transform:scale(.92)}
[data-flow-stage="2"] .capital-zone[data-zone-stage="1"]{opacity:.35;transform:translateX(-20px) scale(.9)}
[data-flow-stage="2"] .capital-zone[data-zone-stage="2"]{opacity:1;filter:saturate(.95);transform:none}
[data-flow-stage="3"] .capital-zone{opacity:.12;filter:saturate(.25);transform:scale(.9)}
[data-flow-stage="3"] .capital-zone[data-zone-stage="2"]{opacity:.34;transform:translateY(-14px) scale(.91)}
[data-flow-stage="3"] .capital-zone[data-zone-stage="3"]{opacity:1;filter:saturate(.95);transform:none}
[data-flow-stage="4"] .capital-zone{opacity:.78;filter:saturate(.82);transform:scale(.96)}
[data-flow-stage="4"] .capital-cinema{transform:scale(.94);transition:transform 1.2s cubic-bezier(.2,.72,.2,1)}
@media(min-width:900px){
  .capital-shell{display:grid;grid-template:1fr/1fr}
  .capital-art{top:0;padding:0}
  .capital-steps .step:nth-child(even){justify-content:flex-start}
  .capital-steps .step:nth-child(even) .step-inner{margin-left:5vw}
  .capital-steps .step:nth-child(odd) .step-inner{margin-right:5vw}
}
@media(max-width:899px){
  .capital-flow{padding:24px 0 0}
  .capital-head{margin-bottom:20px}
  .capital-art{height:100svh}
  .capital-cinema::before{background-size:28px 28px}
  .capital-zone{width:58%}
  .capital-zone img{aspect-ratio:4/3}
  .capital-zone figcaption{font-size:clamp(12px,3.8vw,17px);padding:7px 9px}
  .zone-real-estate{left:-8%;top:10%}.zone-finance{left:-5%;bottom:14%}
  .zone-industry{right:-8%;top:9%}.zone-ai{right:-4%;top:37%;width:51%}
  .zone-hightech{right:-8%;top:49%;width:58%}.zone-green{right:-5%;bottom:5%;width:65%}
  .capital-steps .step{min-height:100svh;padding:0 16px 7svh;align-items:flex-end;justify-content:center}
  .capital-steps .step-inner{
    width:100%;max-width:560px;padding:20px 21px 22px;
    background:rgba(246,243,240,.94);border-top-width:3px;
  }
  .capital-steps .step h3{font-size:clamp(31px,9.4vw,45px)}
  .capital-steps .step p{font-size:16px;line-height:1.5}
  .capital-cinema-end{right:16px;bottom:29%;font-size:11px}
  [data-flow-stage="1"] .zone-real-estate{transform:translateY(-5px) scale(1.05)}
  [data-flow-stage="1"] .zone-finance{transform:translateY(5px) scale(1.02)}
  [data-flow-stage="2"] .zone-industry{transform:translateY(2px) scale(1.04)}
  [data-flow-stage="2"] .zone-ai{transform:translateY(8px) scale(1.03)}
  [data-flow-stage="3"] .zone-hightech{transform:translateY(-4px) scale(1.03)}
  [data-flow-stage="3"] .zone-green{transform:translateY(5px) scale(1.04)}
}

/* COLLISION-SAFE COMPOSITIONS — mỗi stage có safe zone riêng cho caption. */
.capital-zone{transition-property:opacity,filter,transform,left,right,top,bottom,width;transition-duration:.8s;transition-timing-function:cubic-bezier(.2,.75,.2,1)}
@media(min-width:900px){
  .capital-steps .step:nth-child(1),
  .capital-steps .step:nth-child(2),
  .capital-steps .step:nth-child(3),
  .capital-steps .step:nth-child(4){justify-content:flex-start}
  .capital-steps .step:nth-child(1) .step-inner{margin-left:auto;margin-right:5vw}
  .capital-steps .step:nth-child(2) .step-inner,
  .capital-steps .step:nth-child(3) .step-inner,
  .capital-steps .step:nth-child(4) .step-inner{margin-left:4vw;margin-right:0}

  [data-flow-stage="1"] .zone-real-estate{left:5%;top:7%;width:34%}
  [data-flow-stage="1"] .zone-finance{left:8%;bottom:5%;width:31%}
  [data-flow-stage="2"] .zone-industry{right:5%;top:5%;width:34%}
  [data-flow-stage="2"] .zone-ai{right:9%;top:48%;width:28%}
  [data-flow-stage="3"] .zone-hightech{right:5%;top:7%;width:34%}
  [data-flow-stage="3"] .zone-green{right:8%;bottom:3%;width:38%}

  [data-flow-stage="4"] .capital-zone{opacity:.88;filter:saturate(.82) contrast(1);transform:none}
  [data-flow-stage="4"] .zone-real-estate{left:28%;right:auto;top:3%;bottom:auto;width:21%}
  [data-flow-stage="4"] .zone-finance{left:29%;right:auto;top:auto;bottom:4%;width:20%}
  [data-flow-stage="4"] .zone-industry{left:auto;right:3%;top:3%;bottom:auto;width:24%}
  [data-flow-stage="4"] .zone-ai{left:52%;right:auto;top:28%;bottom:auto;width:20%}
  [data-flow-stage="4"] .zone-hightech{left:auto;right:3%;top:auto;bottom:17%;width:23%}
  [data-flow-stage="4"] .zone-green{left:49%;right:auto;top:auto;bottom:-2%;width:28%}
  [data-flow-stage="4"] .capital-cinema-end{right:4%;bottom:4%}
}
@media(max-width:899px){
  .capital-steps .step-inner{position:relative;z-index:10}
  [data-flow-stage="1"] .zone-real-estate{left:-5%;right:auto;top:5%;bottom:auto;width:62%}
  [data-flow-stage="1"] .zone-finance{left:auto;right:-5%;top:34%;bottom:auto;width:60%}
  [data-flow-stage="2"] .zone-industry{left:-5%;right:auto;top:5%;bottom:auto;width:62%}
  [data-flow-stage="2"] .zone-ai{left:auto;right:-4%;top:36%;bottom:auto;width:57%}
  [data-flow-stage="3"] .zone-hightech{left:-6%;right:auto;top:5%;bottom:auto;width:63%}
  [data-flow-stage="3"] .zone-green{left:auto;right:-6%;top:37%;bottom:auto;width:66%}

  [data-flow-stage="4"] .capital-zone{opacity:.82;filter:saturate(.78);transform:none}
  [data-flow-stage="4"] .zone-real-estate{left:1%;right:auto;top:3%;bottom:auto;width:35%}
  [data-flow-stage="4"] .zone-industry{left:auto;right:1%;top:3%;bottom:auto;width:35%}
  [data-flow-stage="4"] .zone-finance{left:2%;right:auto;top:24%;bottom:auto;width:34%}
  [data-flow-stage="4"] .zone-ai{left:auto;right:2%;top:24%;bottom:auto;width:34%}
  [data-flow-stage="4"] .zone-green{left:3%;right:auto;top:45%;bottom:auto;width:39%}
  [data-flow-stage="4"] .zone-hightech{left:auto;right:3%;top:45%;bottom:auto;width:37%}
  [data-flow-stage="4"] .capital-cinema-end{right:50%;bottom:31%;transform:translateX(50%);white-space:nowrap}
}

/* DESKTOP THREE-ZONE MAP — nguồn trái, narrative giữa, lĩnh vực đích thành cột phải. */
@media(min-width:900px){
  .capital-steps .step:nth-child(1),
  .capital-steps .step:nth-child(2),
  .capital-steps .step:nth-child(3),
  .capital-steps .step:nth-child(4){justify-content:flex-start}
  .capital-steps .step:nth-child(1) .step-inner,
  .capital-steps .step:nth-child(2) .step-inner,
  .capital-steps .step:nth-child(3) .step-inner,
  .capital-steps .step:nth-child(4) .step-inner{
    width:min(390px,27vw);margin-left:35vw;margin-right:0;
  }
  .zone-real-estate{left:1.5%;right:auto;top:7%;bottom:auto;width:29%}
  .zone-finance{left:2%;right:auto;top:auto;bottom:7%;width:29%}

  .zone-industry,.zone-ai,.zone-hightech,.zone-green{
    left:auto;right:2%;bottom:auto;width:27%;height:22%;
  }
  .zone-industry{top:1.5%}
  .zone-ai{top:26%}
  .zone-hightech{top:50.5%}
  .zone-green{top:75%}
  .zone-industry img,.zone-ai img,.zone-hightech img,.zone-green img{
    width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  }
  [data-flow-stage="1"] .zone-real-estate,
  [data-flow-stage="1"] .zone-finance{left:1.5%;right:auto;width:29%}
  [data-flow-stage="2"] .zone-industry,
  [data-flow-stage="2"] .zone-ai,
  [data-flow-stage="3"] .zone-hightech,
  [data-flow-stage="3"] .zone-green,
  [data-flow-stage="4"] .zone-industry,
  [data-flow-stage="4"] .zone-ai,
  [data-flow-stage="4"] .zone-hightech,
  [data-flow-stage="4"] .zone-green{left:auto;right:2%;width:27%;transform:none}
  [data-flow-stage="2"] .zone-industry,[data-flow-stage="4"] .zone-industry{top:1.5%;bottom:auto}
  [data-flow-stage="2"] .zone-ai,[data-flow-stage="4"] .zone-ai{top:26%;bottom:auto}
  [data-flow-stage="3"] .zone-hightech,[data-flow-stage="4"] .zone-hightech{top:50.5%;bottom:auto}
  [data-flow-stage="3"] .zone-green,[data-flow-stage="4"] .zone-green{top:75%;bottom:auto}
  [data-flow-stage="4"] .zone-real-estate{left:1.5%;right:auto;top:7%;bottom:auto;width:27%;transform:scale(.94)}
  [data-flow-stage="4"] .zone-finance{left:2%;right:auto;top:auto;bottom:7%;width:27%;transform:scale(.94)}
  [data-flow-stage="4"] .capital-cinema-end{right:32%;bottom:4%}
}

.capital-mobile-steps-v2{display:none}
@media(max-width:899px){
  .capital-steps{display:none}
  .capital-mobile-steps-v2{display:block;grid-area:1/1;position:relative;z-index:4;pointer-events:none}
  .mobile-cinema-step{min-height:100svh;padding:0 16px 6svh;display:flex;align-items:flex-end;justify-content:center}
  .mobile-cinema-step .step-inner{
    width:100%;max-width:560px;padding:19px 20px 21px;background:rgba(246,243,240,.95);
    border-top:3px solid var(--red);box-shadow:0 20px 55px rgba(28,28,29,.13);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:.35;transform:translateY(22px);transition:opacity .5s ease,transform .65s cubic-bezier(.2,.75,.2,1);
  }
  .mobile-cinema-step.is-flow-active .step-inner{opacity:1;transform:none}
  .mobile-cinema-step h3{margin:0 0 11px;font:900 clamp(31px,9.3vw,45px)/.9 var(--condensed);letter-spacing:-.035em;text-transform:uppercase}
  .mobile-cinema-step p{margin:0;font:400 16px/1.5 var(--serif);color:var(--charcoal)}

  .capital-zone{
    left:50%;right:auto;top:5svh;bottom:auto;width:min(88vw,620px);height:48svh;
    opacity:0;filter:saturate(.45);transform:translate(-50%,18px) scale(.92);pointer-events:none;
  }
  .capital-zone img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
  .capital-zone figcaption{left:8%;bottom:5%;font-size:clamp(12px,3.8vw,17px)}
  [data-mobile-scene="1"] .capital-zone[data-mobile-zone="1"],
  [data-mobile-scene="2"] .capital-zone[data-mobile-zone="2"],
  [data-mobile-scene="3"] .capital-zone[data-mobile-zone="3"],
  [data-mobile-scene="4"] .capital-zone[data-mobile-zone="4"],
  [data-mobile-scene="5"] .capital-zone[data-mobile-zone="5"],
  [data-mobile-scene="6"] .capital-zone[data-mobile-zone="6"]{
    left:50%;right:auto;top:5svh;bottom:auto;width:min(88vw,620px);height:48svh;
    opacity:1;filter:saturate(.92) contrast(1.02);transform:translate(-50%,0) scale(1);
  }
  .capital-cinema-end{display:none}

  [data-mobile-scene="7"] .capital-zone{height:19svh;width:42vw;opacity:.88;filter:saturate(.82);transform:none}
  [data-mobile-scene="7"] .capital-zone img{object-fit:contain}
  [data-mobile-scene="7"] .zone-real-estate{left:3%;right:auto;top:2%;bottom:auto}
  [data-mobile-scene="7"] .zone-industry{left:auto;right:3%;top:2%;bottom:auto}
  [data-mobile-scene="7"] .zone-finance{left:3%;right:auto;top:22%;bottom:auto}
  [data-mobile-scene="7"] .zone-ai{left:auto;right:3%;top:22%;bottom:auto}
  [data-mobile-scene="7"] .zone-hightech{left:3%;right:auto;top:42%;bottom:auto}
  [data-mobile-scene="7"] .zone-green{left:auto;right:3%;top:42%;bottom:auto}
  [data-mobile-scene="7"] .capital-zone figcaption{font-size:10px;padding:5px 7px}
}

/* MOBILE FIXED MAP — một sân khấu, nguồn trên cùng, bốn đích trong lưới 2x2. */
.mobile-scroll-caption{display:none}
@media(max-width:899px){
  .capital-shell{overflow:visible}
  .capital-mobile-steps-v2{
    display:block;grid-area:1/1;position:relative;z-index:4;width:100%;pointer-events:none;
  }
  .mobile-cinema-step{
    width:100%;min-height:64svh;padding:0;
  }
  .mobile-cinema-step:last-child{min-height:100svh;padding:0}
  .mobile-cinema-step .step-inner{display:none}
  .mobile-scroll-caption{
    display:block;position:absolute;z-index:7;left:14px;right:14px;bottom:3svh;
    pointer-events:none;overflow:hidden;
  }
  .mobile-scroll-caption-panel{
    width:100%;max-height:27svh;padding:14px 17px 16px;overflow:hidden;
    background:rgba(246,243,240,.95);border-top:3px solid var(--red);
    box-shadow:0 20px 55px rgba(28,28,29,.13);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .mobile-scroll-caption-panel h3{margin:0 0 7px;font-family:var(--mobile-caption-title-font,var(--condensed));font-size:var(--mobile-caption-title-size,clamp(26px,7.7vw,36px));font-weight:var(--mobile-caption-title-weight,900);line-height:var(--mobile-caption-title-line-height,.92);letter-spacing:var(--mobile-caption-title-letter-spacing,-.035em);text-transform:var(--mobile-caption-title-transform,uppercase);color:var(--mobile-caption-title-color,var(--charcoal))}
  .mobile-scroll-caption-panel p{margin:0;font-family:var(--mobile-caption-copy-font,var(--serif));font-size:var(--mobile-caption-copy-size,clamp(13px,3.7vw,15px));font-weight:var(--mobile-caption-copy-weight,400);line-height:var(--mobile-caption-copy-line-height,1.38);color:var(--mobile-caption-copy-color,var(--charcoal))}
  .mobile-scroll-caption-panel .step-no{margin-bottom:8px}

  .capital-zone{
    height:22svh;width:45vw;opacity:.18;filter:saturate(.42);transform:none;
  }
  .capital-zone img{width:100%;height:100%;object-fit:contain}
  .capital-zone figcaption{left:4%;bottom:2%;max-width:92%;padding:5px 7px;font-size:clamp(9px,2.8vw,12px)}

  .capital-flow[data-mobile-scene] .zone-real-estate{left:2%;right:auto;top:2svh;bottom:auto;width:46vw;height:23svh;transform:none}
  .capital-flow[data-mobile-scene] .zone-finance{left:auto;right:2%;top:2svh;bottom:auto;width:46vw;height:23svh;transform:none}
  .capital-flow[data-mobile-scene] .zone-industry{left:2%;right:auto;top:27svh;bottom:auto;width:46vw;height:20svh;transform:none}
  .capital-flow[data-mobile-scene] .zone-ai{left:auto;right:2%;top:27svh;bottom:auto;width:46vw;height:20svh;transform:none}
  .capital-flow[data-mobile-scene] .zone-hightech{left:2%;right:auto;top:49svh;bottom:auto;width:46vw;height:20svh;transform:none}
  .capital-flow[data-mobile-scene] .zone-green{left:auto;right:2%;top:49svh;bottom:auto;width:46vw;height:20svh;transform:none}

  .zone-real-estate,.zone-finance{opacity:1;filter:saturate(.86) contrast(1.01)}
  [data-mobile-scene="1"] .zone-industry,[data-mobile-scene="1"] .zone-ai,[data-mobile-scene="1"] .zone-hightech,[data-mobile-scene="1"] .zone-green,
  [data-mobile-scene="2"] .zone-industry,[data-mobile-scene="2"] .zone-ai,[data-mobile-scene="2"] .zone-hightech,[data-mobile-scene="2"] .zone-green{opacity:.16}
  .capital-flow[data-mobile-scene="3"] .zone-industry,
  .capital-flow[data-mobile-scene="4"] .zone-industry,.capital-flow[data-mobile-scene="4"] .zone-ai,
  .capital-flow[data-mobile-scene="5"] .zone-industry,.capital-flow[data-mobile-scene="5"] .zone-ai,.capital-flow[data-mobile-scene="5"] .zone-hightech,
  .capital-flow[data-mobile-scene="6"] .zone-industry,.capital-flow[data-mobile-scene="6"] .zone-ai,.capital-flow[data-mobile-scene="6"] .zone-hightech,.capital-flow[data-mobile-scene="6"] .zone-green,
  .capital-flow[data-mobile-scene="7"] .zone-industry,.capital-flow[data-mobile-scene="7"] .zone-ai,.capital-flow[data-mobile-scene="7"] .zone-hightech,.capital-flow[data-mobile-scene="7"] .zone-green{
    opacity:1;filter:saturate(.9) contrast(1.02);transform:none;
  }
  .capital-cinema-end{display:none}
}

/* CAPITAL FLOW — một lần cuộn kích hoạt toàn bộ hệ sinh thái và một quote duy nhất. */
.capital-flow .capital-steps,
.capital-flow .capital-mobile-steps-v2,
.capital-flow .capital-mobile-flow,
.capital-flow .mobile-scroll-caption,
.capital-flow .capital-quote,
.capital-flow .capital-cinema-end{display:none}
.capital-shell{height:100svh;min-height:680px}
.capital-art{position:relative;top:auto}
.capital-flow:not(.is-single-revealed) .capital-zone{opacity:0;filter:saturate(.35);transform:translateY(18px) scale(.93)}
.capital-flow.is-single-revealed .capital-zone{opacity:.9;filter:saturate(.9) contrast(1.02);transform:none}
.capital-single-quote{
  position:absolute;z-index:8;left:35vw;top:50%;width:min(410px,30vw);
  padding:clamp(26px,3vw,42px);background:rgba(246,243,240,.94);color:var(--charcoal);
  border-top:4px solid var(--red);box-shadow:0 24px 70px rgba(28,28,29,.14);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;transform:translateY(calc(-50% + 28px));transition:opacity .65s ease .65s,transform .8s cubic-bezier(.2,.75,.2,1) .65s;
}
.capital-flow.is-single-revealed .capital-single-quote{opacity:1;transform:translateY(-50%)}
.capital-single-quote .step-no{margin-bottom:14px}
.capital-single-quote blockquote{margin:0;font:600 italic clamp(24px,2.4vw,38px)/1.18 var(--quote);letter-spacing:-.018em}
@media(max-width:899px){
  .capital-shell{height:100svh;min-height:620px}
  .capital-single-quote{left:14px;right:14px;top:auto;bottom:3svh;width:auto;padding:19px 20px 21px;border-top-width:3px;transform:translateY(24px)}
  .capital-flow.is-single-revealed .capital-single-quote{transform:none}
  .capital-single-quote blockquote{font-size:clamp(21px,6vw,29px);line-height:1.16}
}

/* TECH FLOW */
.tech-flow{padding:60px 0}
.process{display:grid;gap:10px;margin-top:34px}
.process-item{background:var(--paper-light);padding:20px;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;min-height:94px;box-shadow:0 10px 28px rgba(28,28,29,.09)}
.process-no{font:900 30px/1 var(--condensed);color:var(--taupe-dark)}
.process-label{font:900 clamp(25px,7vw,31px)/.98 var(--condensed);text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
.process-item:last-child{background:var(--red);color:var(--paper-light);border-color:var(--red)}
.process-item:last-child .process-no{color:var(--paper-light)}
.process-message{font:italic 700 clamp(25px,7vw,32px)/1.2 var(--quote);margin:38px 0 0;border-left:5px solid var(--red);padding-left:18px;max-width:920px}
@media(min-width:900px){.tech-flow{padding:clamp(90px,10vw,150px) 0}.process{grid-template-columns:repeat(5,1fr);gap:12px;margin-top:48px}.process-item{grid-template-columns:1fr;align-content:space-between;padding:24px;min-height:112px}.process-no{font-size:44px}.process-label{font-size:34px}.process-message{font-size:clamp(30px,4vw,58px);line-height:1.15;margin-top:50px;border-left-width:8px;padding-left:26px}}

/* ECOSYSTEM */
.ecosystem{padding:60px 0;background:var(--paper-deep);border-block:1px solid var(--charcoal)}
.network-board{background:var(--paper-light);padding:16px;margin-top:34px;overflow-x:auto;overscroll-behavior-inline:contain;box-shadow:0 24px 56px rgba(28,28,29,.12)}
/* Sơ đồ hệ sinh thái giữ chiều rộng đọc được trên điện thoại và cho phép vuốt ngang. */
.network-svg{width:620px;max-width:none;height:auto}
.network-svg .link{stroke:var(--taupe-dark);stroke-width:2;opacity:.75}
.network-svg .node{fill:var(--paper);stroke:var(--charcoal);stroke-width:1.5}
.network-svg .node-red{fill:var(--red);stroke:var(--red)}
.network-svg text{font-family:Arial,Helvetica,sans-serif;fill:var(--charcoal);font-weight:700}
.network-svg .red-text{fill:var(--paper-light)}
@media(min-width:900px){.ecosystem{padding:clamp(90px,10vw,150px) 0}.network-board{padding:clamp(18px,3vw,36px);margin-top:44px;overflow:visible}.network-svg{width:100%;max-width:100%}}

/* STATE ↔ BUSINESS */
.relation{padding:60px 0}
.relation-board{display:grid;gap:18px;align-items:stretch;margin-top:46px}
.relation-side{padding:24px;background:var(--paper-light);box-shadow:0 18px 44px rgba(28,28,29,.11)}
.relation-side h3{font:900 clamp(32px,9vw,40px)/.94 var(--condensed);text-transform:uppercase;margin:0 0 22px;letter-spacing:-.03em}
.relation-side ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font:700 12px/1.45 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.relation-arrow{display:grid;place-items:center;font:900 48px/1 var(--condensed);color:var(--red);transform:rotate(90deg)}
@media(min-width:900px){.relation{padding:clamp(80px,9vw,130px) 0}.relation-board{grid-template-columns:1fr auto 1fr}.relation-side{padding:clamp(28px,4vw,52px)}.relation-side h3{font-size:clamp(38px,5vw,70px);line-height:.9;margin-bottom:28px}.relation-arrow{min-width:120px;font-size:clamp(46px,7vw,92px);transform:none}}

/* STRATEGIC TECH NETWORK */
.tech-network{padding:60px 0;background:var(--paper-deep);border-block:1px solid var(--charcoal)}
.constellation{position:relative;min-height:680px;background-color:var(--paper-light);background-image:linear-gradient(rgba(28,28,29,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(28,28,29,.05) 1px,transparent 1px);background-size:30px 30px;margin-top:34px;overflow:hidden;box-shadow:0 24px 58px rgba(28,28,29,.12)}
.constellation svg{position:absolute;inset:0;width:100%;height:100%}
.constellation-line{stroke:var(--taupe-dark);stroke-width:1.6;fill:none}
.tech-node{position:absolute;display:grid;place-items:center;text-align:center;width:104px;height:104px;border:1px solid var(--charcoal);border-radius:50%;background:var(--paper);font:800 9px/1.25 var(--sans);letter-spacing:.055em;text-transform:uppercase;padding:12px}
.tech-node.red{background:var(--red);color:var(--paper-light);border-color:var(--red)}
.tn1{left:3%;top:7%}.tn2{right:3%;top:6%}.tn3{right:2%;top:36%}.tn4{left:3%;bottom:29%}.tn5{left:35%;bottom:5%}.tn6{right:3%;bottom:24%}
@media(min-width:701px){.tech-network{padding:clamp(80px,10vw,150px) 0}.constellation{min-height:570px;margin-top:46px}.tech-node{width:128px;height:128px;font-size:11px;padding:16px}.tn1{left:8%;top:13%}.tn2{left:37%;right:auto;top:8%}.tn3{right:8%;top:16%}.tn4{left:18%;bottom:12%}.tn5{left:48%;bottom:8%}.tn6{right:10%;bottom:14%}}

/* INTERNATIONAL TRIPTYCH */
.international{padding:60px 0}
.triptych{display:grid;gap:16px;margin-top:44px}
.country-card{background:var(--background,var(--paper-light));color:var(--color,inherit);min-height:var(--min-height-mobile,0);display:flex;flex-direction:column;box-shadow:var(--shadow,0 18px 42px rgba(28,28,29,.11));border-radius:var(--border-radius,0);overflow:hidden}
.country-visual{height:160px;background:var(--charcoal);padding:18px;color:var(--paper-light);display:flex;align-items:flex-end;justify-content:space-between}
.country-visual svg{width:48%;height:100%;color:#A7A1A0}
.country-name{font:900 34px/.92 var(--condensed);text-transform:uppercase;letter-spacing:-.04em}
.country-copy{padding:28px;display:flex;flex-direction:column;gap:18px;flex:1}
.country-key{font:900 25px/1 var(--condensed);text-transform:uppercase;color:var(--red)}
.country-copy p{font-size:16px;line-height:1.62;margin:0}
.vietnam-line{margin-top:var(--margin-top-mobile,18px);background:var(--background,var(--red));color:var(--color,var(--paper-light));padding:var(--padding-mobile,24px);font-family:var(--font-family,var(--condensed));font-size:var(--size-mobile,clamp(29px,8.5vw,38px));font-weight:var(--weight,900);line-height:var(--line-height-mobile,.98);text-transform:var(--text-transform,uppercase);letter-spacing:var(--letter-spacing,-.025em);box-shadow:var(--shadow,none);overflow-wrap:anywhere}
@media(min-width:900px){.international{padding:clamp(90px,10vw,150px) 0}.triptych{grid-template-columns:repeat(3,1fr)}.country-card{min-height:var(--min-height-desktop,420px)}.country-key{font-size:28px}.country-copy p{font-size:17px}.vietnam-line{margin-top:var(--margin-top-desktop,20px);padding:var(--padding-desktop,clamp(28px,4vw,52px));font-size:var(--size-desktop,clamp(34px,5vw,70px));line-height:var(--line-height-desktop,.94)}}

/* FOOTER */
.footer{background:var(--charcoal);color:var(--paper-light);padding:46px 0 38px}
.footer-top{display:flex;flex-direction:column;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid rgba(246,243,240,.3);padding-bottom:24px;margin-bottom:24px}
.footer-brand{font-family:var(--font-family,var(--condensed));font-size:var(--size,21px);font-weight:var(--weight,900);line-height:var(--line-height,1);letter-spacing:var(--letter-spacing,.08em);text-transform:var(--text-transform,uppercase);color:var(--color,inherit)}
.footer-rule{width:80px;height:3px;background:var(--red);margin-top:10px}
.credits{display:grid;gap:var(--credits-gap,14px);font-family:var(--credits-font,var(--sans));font-size:var(--credits-size,10px);font-weight:var(--credits-weight,700);line-height:var(--credits-line-height,1.45);letter-spacing:var(--credits-letter-spacing,.13em);text-transform:var(--credits-transform,uppercase);color:var(--credits-color,#CEC6C1)}
.credit-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px}
.footer-note{font-family:var(--font-family,var(--sans));font-size:var(--size,12px);font-weight:var(--weight,400);line-height:var(--line-height,1.55);letter-spacing:var(--letter-spacing,0);color:var(--color,#BFB8B3);margin-top:var(--margin-top,26px);max-width:var(--max-width,720px)}
@media(min-width:600px){.footer-top{flex-direction:row}.credit-row{grid-template-columns:110px 1fr}}

/* PHOTO-LED EDITORIAL LAYOUTS */
.photo-card{background:transparent;padding:0;display:grid;gap:10px}
.photo-card img{width:var(--image-width-mobile,100%);height:var(--image-height-mobile,auto);aspect-ratio:var(--aspect-ratio,4/3);object-fit:var(--object-fit,cover);object-position:var(--object-position-mobile,var(--object-position,center));border-radius:var(--border-radius,0);opacity:var(--opacity,1);filter:var(--filter,none)}
.photo-card>img{box-shadow:var(--shadow,0 16px 38px rgba(28,28,29,.12))}
.photo-card.bw img,.bw-photo{filter:var(--filter,grayscale(1) contrast(1.03))}
.photo-card.tall img{aspect-ratio:var(--aspect-ratio,3/4)}
.photo-card.wide img{aspect-ratio:var(--aspect-ratio,16/10)}
.photo-caption{font-family:var(--font-family,var(--sans));font-size:var(--caption-size-mobile,9px);font-weight:var(--caption-weight,700);line-height:var(--caption-line-height,1.4);letter-spacing:var(--caption-letter-spacing,.13em);text-transform:var(--caption-transform,uppercase);color:var(--caption-color,var(--ink-soft))}
.photo-title{font-family:var(--font-family,var(--condensed));font-size:var(--title-size-mobile,clamp(20px,5.8vw,25px));font-weight:var(--title-weight,900);line-height:var(--title-line-height,1);letter-spacing:var(--title-letter-spacing,-.02em);text-transform:var(--title-transform,uppercase);color:var(--title-color,var(--charcoal));margin:var(--title-margin,0);overflow-wrap:anywhere}
.photo-title.red{color:var(--title-color,var(--red))}
.photo-note{font:400 15px/1.62 var(--serif);margin:0;color:var(--charcoal)}
.editorial-strip{padding:24px 0 56px}
.editorial-strip.tight{padding-top:0}
.strip-grid{display:grid;gap:16px}
@media(min-width:900px){.photo-card img{width:var(--image-width-desktop,var(--image-width-mobile,100%));height:var(--image-height-desktop,var(--image-height-mobile,auto));object-position:var(--object-position-desktop,var(--object-position-mobile,var(--object-position,center)))}.photo-title{font-size:var(--title-size-desktop,clamp(22px,3vw,36px));line-height:var(--title-line-height-desktop,.95)}.photo-caption{font-size:var(--caption-size-desktop,var(--caption-size-mobile,9px))}.photo-note{font-size:16px;line-height:1.58}.editorial-strip{padding:clamp(26px,4vw,54px) 0 clamp(72px,9vw,128px)}.strip-grid.cols-2{grid-template-columns:1.15fr .85fr}.strip-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.visual-split{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.visual-split{grid-template-columns:1.18fr .82fr}}
.mini-stack{display:grid;gap:16px}
.hero-collage .photo-card{padding:9px}
.hero-collage .photo-card img{aspect-ratio:1.35/1}
.hero-collage .photo-title{font-size:clamp(18px,2.2vw,24px)}
.i-support{margin-bottom:18px}
.i-support img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.capital-support{margin-bottom:18px}
.capital-support img{width:var(--image-width-mobile,100%);aspect-ratio:var(--aspect-ratio,16/10);object-fit:var(--object-fit,cover);object-position:var(--object-position-mobile,center);filter:var(--filter,grayscale(1) contrast(1.05))}
.process-layout{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.process-layout{grid-template-columns:.92fr 1.08fr}}
.process-layout .process{margin-top:0}
.strip-band{display:grid;gap:14px;margin-top:32px}
@media(min-width:900px){.strip-band.three{grid-template-columns:repeat(3,1fr)}.strip-band.two{grid-template-columns:repeat(2,1fr)}}
.relation-visual{margin-top:24px}
.relation-visual img{width:var(--image-width-mobile,100%);aspect-ratio:var(--aspect-ratio,16/8.8);object-fit:var(--object-fit,cover);object-position:var(--object-position-mobile,center);filter:var(--filter,grayscale(1) contrast(1.04))}
.tech-network .photo-card img{aspect-ratio:var(--aspect-ratio,16/8.5)}
.country-visual{height:auto;padding:10px;display:grid;gap:10px;align-items:start;justify-content:stretch;background:var(--paper-deep);color:var(--charcoal)}
.country-visual img{width:var(--image-width-mobile,100%);height:var(--image-height-mobile,auto);aspect-ratio:var(--aspect-ratio,16/10);object-fit:var(--object-fit,cover);object-position:var(--object-position-mobile,var(--object-position,center));filter:var(--filter,grayscale(1) contrast(1.05));opacity:var(--opacity,1)}
.country-name{font:900 34px/.92 var(--condensed);text-transform:uppercase;letter-spacing:-.04em}
.country-visual-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.country-tag{font:700 9px/1.35 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.strip-source{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}

/* Nền nội dung và các section sáng dùng cùng Warm Ivory của cover. */
.intro,.quiet-zone,.data-moment,.scrolly{background-color:var(--article-paper);background-image:none}
.international{background-image:radial-gradient(circle at 5% 10%,rgba(195,70,62,.055),transparent 30%)}
@media(min-width:900px){.strip-band{gap:16px;margin-top:42px}.country-name{font-size:38px}}

/* Nối liền các đoạn bài sau khi bỏ những section visual trung gian. */
.tech-flow[hidden],.ecosystem[hidden],.relation[hidden],.tech-network[hidden],.international[hidden]{display:none}
.body-copy:has(+ section[hidden][aria-hidden="true"]){padding-bottom:0}
section[hidden][aria-hidden="true"] + .body-copy{padding-top:0}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .reveal{opacity:1;transform:none;transition:none}.flip-card-inner,.data-fill,.flow-path,.flow-target{transition:none}}