/* =========================================================
   VietinBank Premium · Landing "Từ thành tựu tới di sản" · v0.2
   Màu: chấm trực tiếp từ Brand Guideline VietinBank PREMIUM
   Font: SVN-Gilroy (self-host)
   Hình khối: bề mặt/thẻ bo 10px; điều khiển nhỏ (nút, chip, island, bong bóng) dạng viên thuốc / tròn.
   ========================================================= */

@font-face{font-family:"SVN-Gilroy";src:url("../fonts/SVN-Gilroy-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"SVN-Gilroy";src:url("../fonts/SVN-Gilroy-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SVN-Gilroy";src:url("../fonts/SVN-Gilroy-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SVN-Gilroy";src:url("../fonts/SVN-Gilroy-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"SVN-Gilroy";src:url("../fonts/SVN-Gilroy-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
/* Phương án B: tiêu đề hero có chân (Fraunces, đủ dấu tiếng Việt). Chỉ tải khi html[data-type="serif"] */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-vietnamese-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-ext-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-vietnamese-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}

:root{
  /* Brand (chấm màu từ guideline) */
  --vtb-midnight:#002F54;
  --vtb-rose:#D3A097;
  --vtb-royal:#1C4586;
  --vtb-sky:#3061AE;
  --vtb-coral:#CE776D;
  --vtb-pearl:#F1F3F4;
  --g-mid-0:#683431; --g-mid-35:#0A1838; --g-mid-100:#0060AA;
  --g-rose-lo:#E9C5BB; --g-rose-hi:#A56D6A;

  --grad-midnight:linear-gradient(25deg,var(--g-mid-0) 0%,var(--g-mid-35) 35%,var(--g-mid-100) 100%);
  --grad-rose:linear-gradient(180deg,var(--g-rose-lo) 0%,var(--g-rose-hi) 100%);
  --grad-rose-d:linear-gradient(135deg,#F3DDD6 0%,var(--g-rose-lo) 35%,var(--g-rose-hi) 100%);

  /* Chất liệu phân hạng */
  --mat-plat:linear-gradient(135deg,#FFFFFF 0%,#C9D0DB 26%,#6E7889 50%,#EEF1F5 70%,#9AA4B3 100%);
  --mat-dia:linear-gradient(135deg,#F2FEFF 0%,#B4ECEE 26%,#4FB3BC 52%,#DDF7F8 72%,#2E8C98 100%);
  --mat-eli:linear-gradient(135deg,#F6E4DE 0%,#E3AFA6 26%,#9B3A45 54%,#EBC7BD 76%,#6E1F2C 100%);

  /* Bề mặt */
  --bg:#0A1A3E;
  --bg-deep:#06122F;
  --line-soft:rgba(241,243,244,.08);
  --line-rose:rgba(211,160,151,.22);

  /* Chữ */
  --text:#F1F3F4;
  --text-2:#D5DCE6;
  --text-3:#A9B4C6;
  --on-rose:#0A1838;

  --container:1240px;
  --gutter:clamp(20px,5vw,80px);
  --section:clamp(80px,9vw,136px);
  --radius:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.32,.5,1);
  --font:"SVN-Gilroy",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
p{margin:0}
::selection{background:var(--vtb-rose);color:var(--on-rose)}
:focus-visible{outline:1.5px solid var(--vtb-rose);outline-offset:4px;border-radius:4px}
html{scrollbar-color:rgba(211,160,151,.45) var(--bg-deep);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:rgba(211,160,151,.35);border-radius:10px;border:3px solid var(--bg-deep)}

.ic{width:1em;height:1em;fill:currentColor;flex:none}
.ic--rose{fill:url(#icRose)}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typography ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.h2{font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.12}
.lead{font-size:clamp(1.0625rem,1.25vw,1.1875rem);color:var(--text-2);max-width:60ch;text-wrap:pretty}
.sec-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head--row{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:24px 48px}
.sec-head--row > div{display:grid;gap:18px;max-width:760px}
.section{padding-block:var(--section)}

/* ---------- Buttons ---------- */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:var(--h);padding:0 28px;border-radius:999px;font-weight:600;font-size:.9375rem;letter-spacing:.01em;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn .ic{font-size:1.1em;transition:transform .35s var(--ease)}
.btn:hover .ic.mv{transform:translateX(3px)}
.btn--rose{background:var(--grad-rose);color:var(--on-rose);box-shadow:0 10px 30px -12px rgba(211,160,151,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--rose:hover{box-shadow:0 16px 40px -10px rgba(211,160,151,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--ghost{color:var(--text);box-shadow:inset 0 0 0 1px rgba(241,243,244,.28)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--vtb-rose);color:var(--vtb-rose)}
.btn--sm{--h:44px;padding:0 20px 0 16px;font-size:.875rem}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;color:var(--vtb-rose);font-weight:600;font-size:.9375rem;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.link-arrow:hover{background-size:100% 1px}
.link-arrow .ic{transition:transform .35s var(--ease)}
.link-arrow:hover .ic{transform:translate(2px,-2px)}

/* ---------- Island header ---------- */
.island{position:fixed;top:16px;left:50%;z-index:50;transform:translateX(-50%);width:min(1200px,calc(100% - 32px));height:68px;border-radius:999px;display:flex;align-items:center;gap:6px;padding:0 10px 0 26px;background:rgba(8,20,52,.38);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(211,160,151,.16),0 24px 60px -28px rgba(0,0,0,.75);transition:width .8s var(--spring),height .6s var(--spring),top .6s var(--ease),background-color .6s var(--ease),padding .6s var(--ease)}
.island.is-compact{width:min(1060px,calc(100% - 32px));height:58px;top:12px;background:rgba(6,16,44,.8);padding-left:22px}
.brand{display:block;flex:none}
.brand img{width:118px;height:auto;transition:width .6s var(--ease)}
.island.is-compact .brand img{width:104px}
.nav{display:flex;gap:2px;margin-inline:auto}
.nav a{position:relative;padding:9px 13px;font-size:.90625rem;font-weight:500;color:var(--text-2);border-radius:999px;transition:color .3s,background-color .3s}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--g-rose-hi),var(--g-rose-lo) 50%,var(--g-rose-hi));transform:scaleX(0);transition:transform .5s var(--ease),opacity .3s;opacity:0}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="true"]{color:var(--text)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(.5);opacity:.6}
.nav a[aria-current="true"]::after{transform:scaleX(1);opacity:1;box-shadow:0 0 10px rgba(233,197,187,.55)}
.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;flex:none;height:36px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(241,243,244,.16);margin-right:6px}
.lang::before{content:"";position:absolute;top:3px;left:3px;width:38px;height:30px;border-radius:999px;background:rgba(241,243,244,.12);box-shadow:inset 0 0 0 1px rgba(211,160,151,.45);transition:transform .55s var(--spring)}
html[lang="en"] .lang::before{transform:translateX(38px)}
.lang button{position:relative;z-index:1;width:38px;font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--text-3);transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--text)}
.island .btn--sm .ic{font-size:1.05rem}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;align-items:center;justify-content:center;font-size:1.375rem;box-shadow:inset 0 0 0 1px rgba(241,243,244,.18)}

/* Mobile sheet */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(4,12,34,.97);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:flex;flex-direction:column;padding:22px var(--gutter) calc(28px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:scale(.98);transform-origin:top center;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.sheet.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.sheet__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet__top img{width:112px}
.sheet__top .menu-btn{display:inline-flex}
.sheet nav{display:flex;flex-direction:column;margin-top:36px}
.sheet nav a{font-size:1.5rem;font-weight:500;letter-spacing:-.01em;padding:16px 0;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center}
.sheet nav a .ic{color:var(--vtb-rose);font-size:1.1rem}
.sheet .btn{margin-top:auto;width:100%}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden;background:var(--grad-midnight)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 30%;mix-blend-mode:luminosity;opacity:.92;transform:scale(1.06);animation:heroZoom 2.6s var(--ease) both}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,12,34,.94) 0%,rgba(4,12,34,.78) 34%,rgba(4,12,34,.1) 68%),linear-gradient(0deg,rgba(4,12,34,.9) 0%,rgba(4,12,34,0) 42%),linear-gradient(180deg,rgba(4,12,34,.55) 0%,rgba(4,12,34,0) 22%)}
.hero__inner{padding-top:150px;padding-bottom:clamp(130px,14vw,200px)}
.hero h1 span{display:block;text-wrap:balance}
.hero h1{font-size:clamp(2.25rem,4.9vw,4.625rem);line-height:1.06;letter-spacing:-.03em;background:linear-gradient(180deg,#F6E4DE 0%,var(--g-rose-lo) 32%,var(--g-rose-hi) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.hero__sub{margin-top:14px;font-size:.8125rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--g-rose-lo)}
.hero__sub:empty{display:none}
.hero__lead{margin-top:26px;font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:500;line-height:1.5;color:var(--text);max-width:44ch;text-wrap:balance}
.hero__desc{margin-top:12px;font-size:clamp(.96875rem,1.1vw,1.0625rem);color:var(--text-2);max-width:56ch;line-height:1.65}
.hero__cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.hero [data-in]{opacity:0;transform:translateY(22px);filter:blur(6px);animation:heroIn 1.2s var(--ease) forwards;animation-delay:calc(var(--d,0) * 1ms + 250ms)}
@keyframes heroIn{to{opacity:1;transform:none;filter:none}}
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1.06)}}

/* Yếu tố đồ hoạ: mặt vát Rose Gold, giao điểm ở 1/3 chiều ngang */
.facet{position:absolute;left:0;right:0;bottom:0;height:clamp(40px,6vw,96px);z-index:1;pointer-events:none}
.facet svg{width:100%;height:100%;display:block}

/* ---------- Pillars ---------- */
.pillars{padding-block:clamp(64px,7vw,104px) 0}
.pillars__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:32px}
.pillars__head h2{font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.015em}
.pillars__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pillar{position:relative;isolation:isolate;border-radius:var(--radius);padding:30px 24px 32px;background:linear-gradient(180deg,rgba(241,243,244,.055) 0%,rgba(241,243,244,.015) 100%);box-shadow:inset 0 0 0 1px var(--line-soft);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.pillar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0deg,transparent 190deg,rgba(233,197,187,.15) 230deg,#F3DDD6 300deg,#A56D6A 335deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .7s var(--ease);animation:runBorder 3.4s linear infinite;animation-play-state:paused;pointer-events:none}
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(211,160,151,.10),rgba(211,160,151,0) 60%);opacity:0;transition:opacity .7s var(--ease)}
.pillar.is-active,.pillar:focus-visible{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(211,160,151,.12),0 30px 60px -30px rgba(0,0,0,.8),0 0 40px -18px rgba(211,160,151,.35)}
.pillar.is-active::before{opacity:1;animation-play-state:running}
.pillar.is-active::after{opacity:1}
@keyframes runBorder{to{--ang:360deg}}
.pillar__icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.75rem;background:rgba(211,160,151,.06);box-shadow:inset 0 0 0 1px rgba(211,160,151,.32)}
.pillar h3{margin-top:26px;font-size:1.125rem;line-height:1.3;letter-spacing:-.01em}
.pillar p{margin-top:10px;font-size:.9375rem;color:var(--text-2);line-height:1.6}

/* ---------- Exclusive (3 box) ---------- */
.exclusive{padding-bottom:clamp(40px,5vw,72px)}
.exclusive__grid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:16px;min-height:660px}
.xcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:var(--radius);padding:clamp(24px,2.6vw,36px);isolation:isolate;min-height:300px;box-shadow:inset 0 0 0 1px var(--line-soft)}
.xcard--lg{grid-row:1 / span 2}
.xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.75) brightness(.85);transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.xcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,12,34,.05) 25%,rgba(4,12,34,.92) 100%)}
.xcard:hover img{transform:scale(1.045);filter:saturate(.95) brightness(.92)}
.xcard h3{font-size:clamp(1.375rem,2vw,1.875rem);letter-spacing:-.015em;line-height:1.2}
.xcard p{margin-top:12px;color:var(--text-2);max-width:42ch;font-size:1rem}
.xcard__go{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);width:48px;height:48px;border-radius:999px;display:grid;place-items:center;font-size:1.25rem;background:rgba(4,12,34,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(241,243,244,.24);transition:background-color .4s var(--ease),color .4s var(--ease),transform .6s var(--spring)}
.xcard:hover .xcard__go{background:var(--vtb-rose);color:var(--on-rose);transform:rotate(45deg)}

/* ---------- Journey ---------- */
.journey{position:relative;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 50%,var(--bg) 100%);overflow:hidden}
.journey__stage{position:relative}
.journey__curve{position:relative;height:clamp(300px,30vw,400px)}
.journey__arts{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);pointer-events:none}
.jart{position:relative;overflow:hidden;opacity:0;transform:translateY(18px) scale(1.04);transition:opacity 1.4s var(--ease),transform 1.8s var(--ease);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 90%),linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 90%),linear-gradient(90deg,transparent 0%,#000 20%,#000 80%,transparent 100%);mask-composite:intersect}
.jart img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity}
.jart.is-lit{opacity:.34;transform:none}
.journey__stage.has-focus .jart.is-lit{opacity:.12}
.journey__stage.has-focus .jart.is-lit.is-active{opacity:.55}
.journey__curve svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.curve-base{fill:none;stroke:rgba(241,243,244,.14);stroke-width:1.5}
.curve-glow{fill:none;stroke:url(#roseLine);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(211,160,151,.5))}
.curve-head{position:absolute;z-index:2;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#F6E4DE;box-shadow:0 0 0 4px rgba(233,197,187,.18),0 0 22px 6px rgba(233,197,187,.6);opacity:0;transition:opacity .5s}
.journey__stage.is-running .curve-head{opacity:1}
.node{position:absolute;z-index:1;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--bg-deep);box-shadow:0 0 0 1.5px rgba(211,160,151,.4);transition:transform .7s var(--spring),box-shadow .7s var(--ease)}
.node::before{content:"";position:absolute;left:50%;top:18px;width:1px;height:var(--drop,0px);background:linear-gradient(180deg,rgba(211,160,151,.55),rgba(211,160,151,0));transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform 1s var(--ease) .2s}
.node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--vtb-rose);transform:scale(0);transition:transform .6s var(--spring)}
.node.is-lit{box-shadow:0 0 0 1.5px var(--vtb-rose),0 0 0 9px rgba(211,160,151,.1),0 0 28px 4px rgba(211,160,151,.3)}
.node.is-lit::after{transform:scale(1)}
.node.is-lit::before{transform:translateX(-50%) scaleY(1)}
.node.is-active{transform:scale(1.4)}
.journey__tiers{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.tier{position:relative;padding:28px 0 0;border-top:1px solid var(--line-soft);opacity:.2;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.tier::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:linear-gradient(90deg,var(--g-rose-lo),rgba(165,109,106,0));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.tier.is-lit{opacity:1;transform:none}
.tier.is-lit::before{transform:scaleX(1)}
.tier__name{font-size:clamp(1.75rem,2.4vw,2.25rem);letter-spacing:-.02em;line-height:1.1}
.tier__tag{margin-top:8px;font-style:italic;color:var(--vtb-rose);font-size:1.0625rem}
.tier ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.tier li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:var(--text-2);font-size:.96875rem;line-height:1.55}
.tier li .ic{margin-top:4px;color:var(--vtb-rose);font-size:1rem}
.journey__stage.has-focus .tier.is-lit{opacity:.3}
.journey__stage.has-focus .tier.is-lit.is-active{opacity:1;transform:translateY(-6px)}

/* ---------- Privileges ---------- */
.privileges__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(230px,19vw,280px);gap:16px}
.pcard{position:relative;overflow:hidden;border-radius:var(--radius);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;box-shadow:inset 0 0 0 1px var(--line-soft);outline-offset:-2px}
.pcard--hero{grid-column:span 2;grid-row:span 2;padding:clamp(28px,2.8vw,40px)}
.pcard--wide{grid-column:span 2}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.75) brightness(.82);transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.pcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,12,34,0) 25%,rgba(4,12,34,.92) 100%)}
.pcard h3{font-size:1.1875rem;letter-spacing:-.01em;line-height:1.25}
.pcard--hero h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.pcard p{margin-top:8px;font-size:.9375rem;color:var(--text-2);line-height:1.55;max-width:42ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s var(--ease)}
.pcard--hero p{max-height:none;opacity:1;font-size:1rem}
.pcard:hover img,.pcard:focus-within img{transform:scale(1.05);filter:saturate(.95) brightness(.9)}
.pcard:hover p,.pcard:focus p{max-height:6em;opacity:1}
@media (hover:none){.pcard p{max-height:none;opacity:1}}
.swipe-hint{display:none;align-items:center;gap:8px;margin-top:20px;font-size:.875rem;color:var(--text-3)}

/* ---------- Conditions (3 hạng) ---------- */
.conditions__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.tcard{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--tint) 0%,rgba(241,243,244,.015) 62%);box-shadow:inset 0 0 0 1px var(--tline);transition:transform .7s var(--ease)}
.tcard::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--mat)}
.tcard:hover{transform:translateY(-6px)}
.tcard--plat{--mat:var(--mat-plat);--tint:rgba(213,219,228,.09);--tline:rgba(213,219,228,.16);--tc:#E4E8EE;min-height:540px}
.tcard--dia{--mat:var(--mat-dia);--tint:rgba(110,205,210,.12);--tline:rgba(110,205,210,.22);--tc:#9FE3E6;min-height:580px}
.tcard--eli{--mat:var(--mat-eli);--tint:rgba(155,58,69,.2);--tline:rgba(227,175,166,.4);--tc:var(--g-rose-lo);min-height:620px;box-shadow:inset 0 0 0 1px var(--tline),0 40px 80px -40px rgba(211,160,151,.35)}
.tcard--eli::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0deg,transparent 200deg,#F3DDD6 300deg,#A56D6A 340deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:runBorder 5s linear infinite;opacity:.9;pointer-events:none}
.tcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.emblem{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--mat);color:var(--on-rose);font-size:1.6rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px -10px rgba(0,0,0,.6)}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--on-rose);background:var(--grad-rose)}
.tcard__name{margin-top:28px;font-size:clamp(1.875rem,2.6vw,2.5rem);letter-spacing:-.025em;line-height:1.05;color:var(--tc)}
.tcard__tag{margin-top:8px;color:var(--text-2);font-size:1rem}
.tcard__perks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;font-size:.9375rem;color:var(--text-2)}
.tcard__perks li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.tcard__perks .ic{margin-top:4px;color:var(--tc)}
.tcard__rule{margin-top:auto;padding-top:24px;border-top:1px solid var(--tline)}
.tcard__rule small{display:block;font-size:.8125rem;color:var(--text-3);font-weight:500;letter-spacing:.02em}
.tcard__amount{display:block;margin-top:6px;font-size:clamp(1.5rem,2vw,1.875rem);font-weight:600;letter-spacing:-.02em;color:var(--text)}
.todo{color:var(--vtb-rose);font-weight:600}
.conditions__foot{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;margin-top:32px}
.conditions__note{display:grid;gap:6px;font-size:.875rem;color:var(--text-3);max-width:72ch}

/* ---------- FAQ ---------- */
.faq__wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}
.faq__aside{position:sticky;top:120px;display:grid;gap:18px}
.faq__list{border-top:1px solid var(--line-soft)}
.qa{border-bottom:1px solid var(--line-soft)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font-size:clamp(1.0625rem,1.3vw,1.1875rem);font-weight:500;line-height:1.4;border-radius:6px;transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--vtb-rose)}
.qa summary:focus-visible{outline-offset:6px}
.qa__icon{flex:none;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(241,243,244,.2);font-size:1rem;transition:transform .55s var(--spring),background-color .4s,color .4s,box-shadow .4s}
.qa[open] .qa__icon{transform:rotate(45deg);background:var(--vtb-rose);color:var(--on-rose);box-shadow:none}
.qa__a{display:grid;gap:12px;justify-items:start;padding:0 64px 28px 0;color:var(--text-2);max-width:72ch}
.qa__a ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.qa__a li{position:relative;padding-left:20px}
.qa__a li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:1px;background:var(--vtb-rose)}
.qa__a b{color:var(--text);font-weight:600}
.qa__a .link-arrow{margin-top:4px}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Contact ---------- */
.contact{padding-block:0 var(--section)}
.contact__panel{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--grad-midnight);padding:clamp(36px,5vw,80px);isolation:isolate;box-shadow:inset 0 0 0 1px rgba(211,160,151,.2)}
.contact__bg{position:absolute;inset:0 0 0 38%;z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 60%);mask-image:linear-gradient(90deg,transparent 0%,#000 60%)}
.contact__bg img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.38}
.contact__panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,12,34,.6),rgba(4,12,34,.1) 75%)}
.contact__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,5vw,80px);margin-top:clamp(40px,5vw,56px)}
.clist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.citem{display:flex;gap:16px;padding:22px 0;border-top:1px solid rgba(241,243,244,.12)}
.citem .ic{font-size:1.5rem;margin-top:2px}
.citem small{display:block;font-size:.8125rem;color:var(--text-3);font-weight:500;letter-spacing:.02em}
.citem a{display:inline-block;margin-top:2px;font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;transition:color .3s}
.citem a:hover{color:var(--vtb-rose)}
.citem--hl a{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--g-rose-lo)}
.app{background:rgba(4,12,34,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius);padding:28px;box-shadow:inset 0 1px 0 rgba(241,243,244,.08),inset 0 0 0 1px rgba(241,243,244,.08);display:grid;grid-template-columns:auto 1fr;gap:22px;align-content:start}
.qr{width:112px;height:112px;border-radius:8px;background:var(--vtb-pearl);display:grid;place-items:center;color:var(--on-rose);font-size:2.75rem}
.app h3{font-size:1.125rem}
.app p{margin-top:6px;font-size:.9375rem;color:var(--text-2)}
.stores{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(241,243,244,.24);font-size:.875rem;font-weight:600;transition:box-shadow .3s,color .3s}
.store .ic{font-size:1.4rem}
.store:hover{box-shadow:inset 0 0 0 1px var(--vtb-rose);color:var(--vtb-rose)}
.social{margin-top:40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.social p{font-size:.9375rem;color:var(--text-2);font-weight:500}
.social ul{list-style:none;display:flex;gap:10px;margin:0;padding:0}
.social a{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(241,243,244,.22);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s}
.social a .ic{font-size:1.125rem}
.social a:hover{background:var(--vtb-rose);color:var(--on-rose);box-shadow:none}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--bg-deep);padding:clamp(80px,9vw,120px) 0 40px;overflow:hidden}
.site-footer .facet{top:0;bottom:auto;transform:scaleY(-1);height:clamp(28px,4vw,64px)}
.footer__top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding-bottom:40px;border-bottom:1px solid var(--line-soft)}
.footer__top img{width:180px}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.footer__nav a{color:var(--text-2);font-size:.9375rem;transition:color .3s}
.footer__nav a:hover{color:var(--vtb-rose)}
.footer__meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:.8125rem;color:var(--text-3);line-height:1.7}

/* ---------- Dock: chat + lên đầu trang ---------- */
.dock{position:fixed;right:clamp(16px,2vw,28px);bottom:calc(clamp(16px,2vw,28px) + env(safe-area-inset-bottom));z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.bubble{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;background:rgba(10,24,56,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(211,160,151,.42),0 14px 34px -12px rgba(0,0,0,.75);transition:transform .5s var(--spring),box-shadow .4s,opacity .4s}
.bubble:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(233,197,187,.8),0 18px 40px -12px rgba(211,160,151,.45)}
.bubble:active{transform:scale(.94)}
.bubble--top{opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:transform .5s var(--spring),opacity .4s,visibility 0s .4s}
.bubble--top.is-on{opacity:1;visibility:visible;transform:none;transition:transform .5s var(--spring),opacity .4s}
.bubble--chat::after{content:"";position:absolute;top:10px;right:11px;width:9px;height:9px;border-radius:50%;background:var(--vtb-coral);box-shadow:0 0 0 2px #0A1838}
.bubble--chat[aria-expanded="true"]::after{display:none}
.chat{position:absolute;right:0;bottom:calc(100% + 14px);width:min(340px,calc(100vw - 32px));border-radius:16px;overflow:hidden;background:rgba(6,16,44,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px rgba(211,160,151,.25),0 30px 70px -20px rgba(0,0,0,.85);transform-origin:bottom right;opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transition:opacity .35s var(--ease),transform .5s var(--spring),visibility 0s .5s}
.chat.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .5s var(--spring)}
.chat__head{position:relative;padding:22px 64px 20px 22px;background:var(--grad-midnight)}
.chat__head h3{font-size:1.0625rem}
.chat__head p{margin-top:4px;font-size:.875rem;color:var(--text-2)}
.chat__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.95rem;box-shadow:inset 0 0 0 1px rgba(241,243,244,.22)}
.chat ul{list-style:none;margin:0;padding:10px}
.chat li a{display:flex;align-items:center;gap:14px;padding:12px;border-radius:10px;transition:background-color .3s}
.chat li a:hover{background:rgba(241,243,244,.06)}
.chat__ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:1.3rem;box-shadow:inset 0 0 0 1px rgba(211,160,151,.34)}
.chat li b{display:block;font-size:.9375rem;font-weight:600}
.chat li div span{display:block;font-size:.8125rem;color:var(--text-3)}
.chat__ico .ic{display:block}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ========================================================
   Responsive
   ======================================================== */
@media (max-width:1180px){
  .nav{display:none}
  .island .lang{margin-left:auto}
  .menu-btn{display:inline-flex}
  .pillars__list{grid-template-columns:repeat(3,1fr)}
  .privileges__grid{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  body{font-size:1rem}
  html{scroll-padding-top:84px}
  .island,.island.is-compact{top:10px;width:calc(100% - 20px);height:58px;padding:0 7px 0 18px;gap:6px}
  .brand img,.island.is-compact .brand img{width:96px}
  .island .btn--sm{display:none}
  .hero__inner{padding-top:120px;padding-bottom:104px}
  .hero__media img{object-position:68% 20%}
  .hero::before{background:linear-gradient(0deg,rgba(4,12,34,.97) 0%,rgba(4,12,34,.86) 48%,rgba(4,12,34,.35) 74%,rgba(4,12,34,.1) 100%)}
  .hero__cta .btn{flex:1 1 100%}
  .pillars__head{flex-direction:column;gap:6px}
  .pillars__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 10px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .pillars__list::-webkit-scrollbar{display:none}
  .pillar{flex:0 0 74%;scroll-snap-align:start}
  .sec-head--row{grid-template-columns:1fr}
  .exclusive__grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0}
  .xcard,.xcard--lg{grid-row:auto;min-height:340px}
  .journey__curve{display:none}
  .journey__tiers{grid-template-columns:1fr;gap:0;padding-left:28px}
  .journey__tiers::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1.5px;background:linear-gradient(180deg,rgba(211,160,151,.2),var(--vtb-rose))}
  .tier{border-top:0;padding:0 0 40px}
  .tier::before{display:none}
  .tier::after{content:"";position:absolute;left:-28px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--bg-deep);box-shadow:0 0 0 1.5px var(--vtb-rose);transition:background-color .6s}
  .tier.is-lit::after{background:var(--vtb-rose)}
  .tier:last-child{padding-bottom:0}
  .journey__stage.has-focus .tier.is-lit{opacity:1;transform:none}
  .privileges__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .privileges__grid::-webkit-scrollbar{display:none}
  .pcard,.pcard--hero,.pcard--wide{flex:0 0 80%;min-height:420px;scroll-snap-align:start;padding:24px}
  .pcard--hero h3{font-size:1.5rem}
  .pcard p{max-height:none;opacity:1}
  .swipe-hint{display:flex}
  .conditions__grid{grid-template-columns:1fr}
  .tcard--plat,.tcard--dia,.tcard--eli{min-height:0}
  .tcard__rule{margin-top:24px}
  .faq__wrap{grid-template-columns:1fr}
  .faq__aside{position:static}
  .qa__a{padding-right:0}
  .contact .container{width:100%}
  .contact__panel{border-radius:0;padding:56px var(--gutter)}
  .contact__bg{inset:0;opacity:.6}
  .clist{grid-template-columns:1fr}
  .citem a{overflow-wrap:anywhere}
  .app{grid-template-columns:1fr}
  .qr{display:none}
  .footer__top{grid-template-columns:1fr}
  .bubble{width:52px;height:52px;font-size:1.375rem}
}

/* ---------- v0.3: nội dung brief 7/10/2026 ---------- */
.sec-head .sub{color:var(--text);font-size:1.0625rem;font-weight:500}
.sec-head .sub b{color:var(--vtb-rose);font-weight:700}
.tier__level{display:inline-flex;align-items:center;height:26px;padding:0 11px;margin-bottom:14px;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.03em;color:var(--vtb-rose);box-shadow:inset 0 0 0 1px rgba(211,160,151,.35)}
.tier__serve{margin-top:22px;padding-top:16px;border-top:1px dashed rgba(211,160,151,.22);display:grid;gap:4px;font-size:.9375rem;line-height:1.55;color:var(--text-2)}
.tier__serve b{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--text-3)}

/* Dải rose gold: ánh sáng chạy ngang */
.facet__sheen{mix-blend-mode:screen}

/* Bảng đặc quyền theo hạng: cột sáng dần theo hạng, Elite nổi bật nhất */
.matrix-wrap{margin-top:clamp(64px,7vw,104px)}
.matrix__intro{display:grid;gap:10px;margin-bottom:28px;max-width:640px}
.matrix__intro h3{font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.02em;line-height:1.15}
.matrix__intro p{color:var(--text-2)}
.mtabs{display:none}
.matrix-box{position:relative;isolation:isolate}
.mcol{position:absolute;top:0;bottom:0;border-radius:var(--radius);pointer-events:none;z-index:-1}
.mcol--dia{left:48%;width:26%;background:linear-gradient(180deg,rgba(110,205,210,.08) 0%,rgba(110,205,210,.025) 100%);box-shadow:inset 0 0 0 1px rgba(110,205,210,.12)}
.mcol--eli{left:74%;width:26%;background:linear-gradient(180deg,rgba(211,160,151,.2) 0%,rgba(211,160,151,.07) 55%,rgba(211,160,151,.04) 100%);box-shadow:inset 0 0 0 1px rgba(211,160,151,.32),0 40px 90px -40px rgba(211,160,151,.5)}
.mcol--eli::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0deg,transparent 220deg,#F3DDD6 300deg,#A56D6A 340deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:runBorder 6s linear infinite;opacity:.85}
.matrix{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.9375rem;line-height:1.55}
.matrix th,.matrix td{text-align:left;vertical-align:top;padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.matrix th:first-child{padding-left:0}
.matrix thead th{vertical-align:bottom;padding-top:26px;padding-bottom:18px;border-bottom:0;position:relative}
.matrix thead th:first-child{width:22%;font-size:.8125rem;font-weight:500;color:var(--text-3)}
.matrix thead th b{display:block;font-size:1.375rem;font-weight:600;letter-spacing:-.015em;color:var(--tc)}
.matrix thead th small{display:block;margin-top:2px;font-size:.8125rem;font-weight:500;color:var(--text-3)}
.matrix thead th:not(:first-child)::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;background:var(--mat)}
.matrix thead th.m-plat::after{opacity:.55}
.matrix thead th.m-eli b{font-size:1.625rem}
.matrix thead th.m-eli small{color:var(--g-rose-lo)}
.m-plat{--tc:#C9D0DB;--mat:var(--mat-plat)}
.m-dia{--tc:#9FE3E6;--mat:var(--mat-dia)}
.m-eli{--tc:var(--g-rose-lo);--mat:var(--mat-eli)}
.matrix tbody th{font-weight:600;color:var(--text);font-size:1rem}
.matrix td[data-t="Platinum"]{color:var(--text-3)}
.matrix td[data-t="Diamond"]{color:var(--text-2)}
.matrix td[data-t="Elite"]{color:var(--text);font-weight:500}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix td.is-none{color:rgba(141,153,175,.6)}
.matrix__note{margin-top:18px;font-size:.875rem;color:var(--text-3)}

/* Thẻ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(56px,6vw,88px)}
.ccard{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);display:grid;grid-template-columns:1fr minmax(160px,.8fr);align-items:center;gap:16px;min-height:280px;padding:clamp(26px,2.8vw,40px);box-shadow:inset 0 0 0 1px var(--line-soft);transition:box-shadow .6s var(--ease)}
.ccard--inf{background:linear-gradient(120deg,rgba(48,97,174,.16) 0%,rgba(4,12,34,.2) 60%),var(--bg-deep)}
.ccard--sig{background:linear-gradient(120deg,rgba(211,160,151,.13) 0%,rgba(4,12,34,.2) 60%),var(--bg-deep)}
.ccard:hover{box-shadow:inset 0 0 0 1px rgba(211,160,151,.32)}
.ccard__txt{display:grid;gap:10px;justify-items:start}
.ccard__txt small{font-size:.8125rem;font-weight:500;color:var(--text-3)}
.ccard__txt h3{font-size:clamp(1.625rem,2.4vw,2.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.ccard__txt p{color:var(--text-2);max-width:34ch;font-size:.96875rem}
.ccard__txt .link-arrow{margin-top:8px}
.ccard__art{display:grid;place-items:center}
.ccard__art img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.5));transition:transform 1s var(--ease)}
.ccard--inf .ccard__art img{width:auto;height:230px;transform:rotate(-8deg)}
.ccard--sig .ccard__art img{width:100%;max-width:280px;height:auto;transform:rotate(6deg)}
.ccard--inf:hover .ccard__art img{transform:rotate(-4deg) translateY(-6px)}
.ccard--sig:hover .ccard__art img{transform:rotate(3deg) translateY(-6px)}

/* Tiêu chí xếp hạng: card cao dần theo hạng */
.tcard--plat{min-height:676px}
.tcard--dia{min-height:718px}
.tcard--eli{min-height:760px}
.crit{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.crit li:not(.crit__or){display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;border-radius:8px;background:rgba(241,243,244,.03);box-shadow:inset 0 0 0 1px var(--tline)}
.crit span{white-space:nowrap;font-size:.8125rem;font-weight:500;color:var(--text-3)}
.crit b{font-size:clamp(1.25rem,1.6vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:var(--text);white-space:nowrap;font-variant-numeric:lining-nums}
.crit i{font-style:normal;font-size:.8125rem;font-weight:500;color:var(--text-2);letter-spacing:0}
.crit__or{display:flex;align-items:center;gap:10px;font-size:.6875rem;font-weight:500;color:var(--tc);line-height:1.6}
.crit__or::before,.crit__or::after{content:"";flex:1;height:1px;background:var(--tline)}
.tcard--eli .crit b{color:var(--g-rose-lo)}

@media (max-width:1180px){
  .cards{grid-template-columns:1fr}
  .conditions__grid{grid-template-columns:1fr 1fr}
  .tcard--eli{grid-column:1 / -1}
  .tcard--plat,.tcard--dia,.tcard--eli{min-height:0}
}

/* ---------- Mobile: gọn, ưu tiên đọc nhanh ---------- */
@media (max-width:767px){
  :root{--section:76px}
  .sec-head{gap:14px;margin-bottom:32px}
  .h2{font-size:clamp(1.875rem,8vw,2.25rem)}
  .lead{font-size:1rem}

  /* Hero */
  .hero{min-height:88svh}
  .hero__inner{padding-top:128px;padding-bottom:96px}
  .hero__desc{margin-top:18px;font-size:1rem}
  .hero__cta{margin-top:28px}

  /* Dành riêng KHƯT */
  .exclusive__grid{gap:12px}
  .xcard--lg{min-height:300px}
  .xcard:not(.xcard--lg){min-height:220px}
  .xcard{padding:22px}
  .xcard h3{font-size:1.375rem}
  .xcard p{font-size:.9375rem;margin-top:8px}
  .xcard__go{width:40px;height:40px;font-size:1.05rem;top:16px;right:16px}

  /* Hành trình */
  .tier{padding-bottom:32px}
  .tier__name{font-size:1.75rem}
  .tier__tag{font-size:1rem}
  .tier ul{margin-top:16px;gap:10px}
  .tier li{font-size:.9375rem}
  .tier__serve{margin-top:16px;padding-top:12px;font-size:.875rem}

  /* Đặc quyền */
  .pcard,.pcard--hero,.pcard--wide{flex:0 0 78%;min-height:340px;padding:22px}
  .pcard p{font-size:.875rem}

  .matrix-wrap{margin-top:56px}
  .matrix__intro{margin-bottom:20px}
  .matrix__intro h3{font-size:1.5rem}
  .mtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin-bottom:12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(241,243,244,.12)}
  .mtabs button{height:40px;border-radius:999px;font-size:.875rem;font-weight:600;color:var(--text-3);transition:color .3s,background-color .3s}
  .mtabs button[aria-selected="true"]{background:var(--mat);color:var(--on-rose);box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
  .mcol{display:none}
  .matrix-box{border-radius:var(--radius);padding:4px 18px;box-shadow:inset 0 0 0 1px var(--line-soft);background:rgba(241,243,244,.02);transition:background-color .5s,box-shadow .5s}
  .matrix-box[data-m="1"]{background:rgba(110,205,210,.05);box-shadow:inset 0 0 0 1px rgba(110,205,210,.2)}
  .matrix-box[data-m="2"]{background:linear-gradient(180deg,rgba(211,160,151,.12),rgba(211,160,151,.03));box-shadow:inset 0 0 0 1px rgba(211,160,151,.32)}
  .matrix,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:auto}
  .matrix thead{display:none}
  .matrix tbody tr{padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .matrix tbody tr:last-child{border-bottom:0}
  .matrix tbody th{padding:0 0 4px!important;border:0;font-size:.8125rem;font-weight:500;color:var(--text-3)}
  .matrix td{padding:0;border:0;font-size:.9375rem;color:var(--text)!important;font-weight:500}
  .matrix-box[data-m="0"] td:not([data-t="Platinum"]),
  .matrix-box[data-m="1"] td:not([data-t="Diamond"]),
  .matrix-box[data-m="2"] td:not([data-t="Elite"]){display:none}
  .matrix td.is-none{color:var(--text-3)!important}

  .cards{gap:12px;margin-top:40px}
  .ccard{grid-template-columns:1fr 104px;gap:14px;min-height:0;padding:22px 18px 22px 22px}
  .ccard__txt{gap:6px}
  .ccard__txt h3{font-size:1.5rem}
  .ccard__txt p{font-size:.875rem}
  .ccard__txt .link-arrow{margin-top:4px}
  .ccard--inf .ccard__art img{height:150px}
  .ccard--sig .ccard__art img{max-width:118px;transform:rotate(-80deg)}
  .ccard--sig:hover .ccard__art img{transform:rotate(-80deg)}

  /* Điều kiện */
  .conditions__grid{grid-template-columns:1fr;gap:12px}
  .tcard{display:grid;grid-template-columns:48px 1fr;column-gap:14px;padding:22px}
  .tcard__top{display:contents}
  .tcard .emblem{grid-area:1 / 1 / 3 / 2;width:48px;height:48px;font-size:1.3rem;align-self:center}
  .tcard .chip{position:absolute;top:22px;right:22px;height:24px;font-size:.6875rem}
  .tcard__name{grid-column:2;margin-top:0;font-size:1.75rem}
  .tcard__tag{grid-column:2;margin-top:2px;font-size:.875rem}
  .tcard__perks,.tcard__rule{grid-column:1 / -1}
  .tcard__perks{margin-top:18px;gap:8px;font-size:.875rem}
  .tcard__rule{margin-top:18px;padding-top:18px}
  .crit b{font-size:1.375rem}
  .tcard:hover{transform:none}
  .conditions__foot{margin-top:24px;gap:16px}
  .conditions__foot .link-arrow{display:inline;line-height:1.6}
  .conditions__foot .link-arrow .ic{vertical-align:-3px;margin-left:6px}

  /* Liên hệ */
  .contact__panel{padding:48px var(--gutter)}
  .contact__grid{margin-top:28px;gap:20px}
  .citem{padding:16px 0;gap:14px}
  .citem--hl a{font-size:1.625rem}
  .app{padding:22px}

  /* FAQ */
  .qa summary{padding:20px 0;font-size:1rem;gap:16px}
  .qa__icon{width:32px;height:32px}
  .qa__a{font-size:.9375rem;padding-bottom:22px}

  /* Footer: chừa chỗ cho bong bóng */
  .site-footer{padding-bottom:112px}
  .footer__top{gap:28px;padding-bottom:28px}
  .footer__top img{width:148px}
  .footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
  .footer__meta{flex-direction:column;gap:10px;padding-right:64px}
  .footer__nav a{font-size:.875rem}
}

/* ---------- v0.4: nội dung output 8/10/2026 ---------- */
.lead--strong{color:var(--text);font-weight:500}
.pillar__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pillar__no{font-size:.8125rem;font-weight:600;letter-spacing:.08em;color:var(--text-3);font-variant-numeric:tabular-nums}
.pillar__tag{margin-top:6px!important;font-size:.8125rem!important;font-weight:500;color:var(--vtb-rose)!important;line-height:1.45!important}
.tier__desc{margin-top:12px;font-size:.96875rem;line-height:1.6;color:var(--text-2);max-width:40ch}
.tier__toggle{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--vtb-rose)}
.tier__toggle .ic{font-size:.875rem;transition:transform .5s var(--spring)}
.tier.is-open .tier__toggle .ic{transform:rotate(45deg)}
.tier__more{display:grid;grid-template-rows:1fr;opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s .6s}
.tier__more > div{min-height:0}
.tier.is-open .tier__more{opacity:1;transform:none;visibility:visible;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.tier ul{margin-top:16px}
.tcard__desc{margin-top:12px;font-size:.9375rem;line-height:1.6;color:var(--text-2);max-width:34ch}
.tcard__label{margin-bottom:10px}
.contact__intro{display:grid;gap:12px;justify-items:start;max-width:64ch;margin-top:20px}
.contact__intro .btn{margin-top:10px}
@media (max-width:767px){
  .hero__lead{margin-top:20px;font-size:1.0625rem}
  .hero__desc{font-size:.9375rem}
  .tier__more{grid-template-rows:0fr;opacity:1;transform:none;visibility:visible;transition:grid-template-rows .6s var(--ease)}
  .tier__more > div{overflow:hidden}
  .tier.is-open .tier__more{grid-template-rows:1fr}
  .tcard__desc{grid-column:1 / -1;font-size:.875rem;margin-top:12px}
  .contact__intro .btn{width:100%}
}

/* ---------- v0.6: mobile UX (carousel, popup, so sánh hạng) + FAQ ---------- */
@media (hover:hover) and (pointer:fine){
  .pillar:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(211,160,151,.12),0 30px 60px -30px rgba(0,0,0,.8),0 0 40px -18px rgba(211,160,151,.35)}
  .pillar:hover::before{opacity:1;animation-play-state:running}
  .pillar:hover::after{opacity:1}
}
/* FAQ: câu đang mở được làm nổi */
.qa{transition:background-color .5s var(--ease)}
.qa[open] summary{color:var(--g-rose-lo)}
.qa.is-anim .qa__a{overflow:hidden}
.qa__a > *{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.qa.is-closing .qa__a > *{opacity:0;transform:translateY(-6px)}

/* Popup chi tiết */
.pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center}
.pop[hidden]{display:none}
.pop__scrim{position:absolute;inset:0;background:rgba(2,7,22,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .45s var(--ease)}
.pop__panel{position:relative;width:min(560px,calc(100% - 32px));max-height:min(86vh,820px);display:flex;flex-direction:column;border-radius:16px;background:linear-gradient(180deg,#0B1A3F 0%,#071331 100%);box-shadow:inset 0 0 0 1px rgba(211,160,151,.22),0 40px 100px -30px rgba(0,0,0,.85);overflow:hidden;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.pop.is-open .pop__scrim{opacity:1}
.pop.is-open .pop__panel{opacity:1;transform:none}
.pop__scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pop__x{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-size:1.1rem;color:var(--text);background:rgba(4,12,34,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(241,243,244,.22)}
.pop__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.pop__media:empty{display:none}
.pop__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.85)}
.pop__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,19,49,0) 40%,#0B1A3F 100%)}
.pop__body{padding:22px 24px 28px;display:grid;gap:10px}
.pop__media:empty + .pop__body{padding-top:28px}
.pop__body .tier__more{opacity:1;transform:none;visibility:visible;display:block}
.pop__body .tier__toggle{display:none}
.pop__body > ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.pop__body > ul > li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:var(--text-2);font-size:.9375rem;line-height:1.55}
.pop__body > ul > li .ic{margin-top:4px;color:var(--vtb-rose)}
.pop__body .tier__name,.pop__body .tcard__name{margin:0;font-size:1.75rem}
.pop__body .mcard__list{max-height:none!important}
.pop__body .mcard__list::after,.pop__body .mcard__more{display:none!important}
.pop__body .tcard__rule{margin-top:14px;padding-top:16px}
.pop__body .tcard__top{display:flex}
html.pop-lock{overflow:hidden}
.pop-tcard{min-height:0!important;padding:0!important;background:none!important;box-shadow:none!important;transform:none!important;overflow:visible}
.pop-tcard::before,.pop-tcard::after{display:none}
.pop-tcard .tcard__perks{margin-top:14px}
.pop__body .mcard.in-pop{flex:none;transform:none;opacity:1;box-shadow:none;background:none;padding:0}
.mcard.in-pop::before{display:none}
.pop__body .tier__level{justify-self:start;margin:0}
.pop__body .tier__tag{margin:0}
.pop__body .tier__desc{margin:0 0 4px}

/* Carousel đặc quyền theo hạng (mobile) & so sánh điều kiện (mobile): ẩn trên desktop */
.mcar,.mdots,.cmp{display:none}

@media (max-width:767px){
  .pillar{transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .5s var(--ease);opacity:.7}
  .pillar.is-active{opacity:1;transform:translateY(-4px)}
  .pillars__list,.privileges__grid,.mcar{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .pcard,.pcard--hero,.pcard--wide{height:360px;min-height:0;scroll-snap-stop:always}

  /* Popup = bottom sheet */
  .pop{place-items:end center}
  .pop__panel{width:100%;max-height:88svh;border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .3s}
  .pop.is-open .pop__panel{transform:none}
  .pop__panel::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(241,243,244,.25);z-index:3}
  .pop__body{padding:20px 20px calc(28px + env(safe-area-inset-bottom))}

  /* Hành trình: bấm "Giá trị nổi bật" mở popup, không mở rộng tại chỗ */
  .tier__more{display:none}

  /* Đặc quyền theo hạng: carousel card, card giữa nổi bật */
  .mtabs,.matrix-box{display:none}
  .mcar{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:28px 11% 36px;scrollbar-width:none}
  .mcar::-webkit-scrollbar{display:none}
  .mcard{--glow:rgba(213,219,228,.28);--tc:#E4E8EE;--tl:rgba(213,219,228,.22);flex:0 0 78%;scroll-snap-align:center;position:relative;display:flex;flex-direction:column;border-radius:14px;padding:22px 20px 18px;background:linear-gradient(180deg,rgba(241,243,244,.06),rgba(241,243,244,.015));box-shadow:inset 0 0 0 1px var(--tl),0 26px 50px -24px var(--glow);transform:scale(.9);opacity:.55;transition:transform .55s var(--ease),opacity .55s var(--ease),box-shadow .55s var(--ease)}
  .mcard--dia{--glow:rgba(79,179,188,.5);--tc:#9FE3E6;--tl:rgba(110,205,210,.3)}
  .mcard--eli{--glow:rgba(211,160,151,.5);--tc:var(--g-rose-lo);--tl:rgba(211,160,151,.4);background:linear-gradient(180deg,rgba(211,160,151,.14),rgba(211,160,151,.03))}
  .mcard.is-active{transform:none;opacity:1;box-shadow:inset 0 0 0 1px var(--tl),0 30px 60px -20px var(--glow)}
  .mcard::before{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;border-radius:2px;background:var(--mat-plat)}
  .mcard--dia::before{background:var(--mat-dia)}
  .mcard--eli::before{background:var(--mat-eli)}
  .mcard__head b{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.015em;color:var(--tc)}
  .mcard__head small{display:block;font-size:.8125rem;color:var(--text-3)}
  .mcard__list{position:relative;list-style:none;margin:14px 0 0;padding:0;max-height:min(52svh,440px);overflow:hidden}
  .mcard__list.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(180deg,rgba(9,22,54,0),#0A1A40);pointer-events:none}
  .mcard--eli .mcard__list.is-clamped::after{background:linear-gradient(180deg,rgba(28,26,52,0),#191A3A)}
  .mrow{display:grid;gap:2px;padding:11px 0;border-top:1px solid var(--line-soft)}
  .mrow:first-child{border-top:0}
  .mrow__k{font-size:.75rem;font-weight:500;color:var(--text-3)}
  .mrow__v{font-size:.9375rem;font-weight:500;line-height:1.5;color:var(--text)}
  .mrow.is-none .mrow__v{color:var(--text-3)}
  .mcard__more{display:none;align-items:center;gap:8px;margin-top:14px;font-size:.875rem;font-weight:600;color:var(--tc)}
  .mcard.has-more .mcard__more{display:inline-flex}
  .mdots{display:flex;justify-content:center;gap:8px;margin-top:-14px}
  .mdots i{width:6px;height:6px;border-radius:6px;background:rgba(241,243,244,.25);transition:width .4s var(--ease),background-color .4s}
  .mdots i.is-on{width:22px;background:var(--vtb-rose)}

  /* Điều kiện: thay 3 card dài bằng bảng so sánh song song */
  .conditions__grid{display:none}
  .cmp{display:block;border-radius:14px;padding:16px 14px 18px;background:linear-gradient(180deg,rgba(241,243,244,.045),rgba(241,243,244,.012));box-shadow:inset 0 0 0 1px var(--line-soft)}
  .cmp__tiers,.cmp__v{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .cmp__tier{--mat:var(--mat-plat);--tc:#E4E8EE;--tl:rgba(213,219,228,.22);display:grid;justify-items:center;gap:4px;padding:14px 6px 12px;border-radius:12px;background:rgba(241,243,244,.03);box-shadow:inset 0 0 0 1px var(--tl);transition:transform .3s var(--ease),background-color .3s}
  .cmp__tier--dia{--mat:var(--mat-dia);--tc:#9FE3E6;--tl:rgba(110,205,210,.32)}
  .cmp__tier--eli{--mat:var(--mat-eli);--tc:var(--g-rose-lo);--tl:rgba(211,160,151,.45);background:rgba(211,160,151,.08);box-shadow:inset 0 0 0 1px var(--tl),0 16px 30px -18px rgba(211,160,151,.6)}
  .cmp__tier:active{transform:scale(.97)}
  .cmp__tier .emblem{width:38px;height:38px;font-size:1.1rem}
  .cmp__tier b{font-size:1rem;font-weight:600;color:var(--tc)}
  .cmp__tier small{display:inline-flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;color:var(--text-3)}
  .cmp__tier small::after{content:"+";font-size:.875rem;line-height:1;color:var(--tc)}
  .cmp__row{margin-top:14px}
  .cmp__k{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--text-3);margin:0 0 6px 2px}
  .cmp__v span{display:grid;justify-items:center;align-content:center;gap:0;min-height:58px;padding:8px 4px;border-radius:10px;background:rgba(241,243,244,.035);text-align:center}
  .cmp__v span.is-eli{background:rgba(211,160,151,.1)}
  .cmp__v b{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
  .cmp__v .is-eli b{color:var(--g-rose-lo)}
  .cmp__v i{font-style:normal;font-size:.6875rem;color:var(--text-3)}
  .cmp__v .is-none{color:var(--text-3)}
  .cmp__or{display:flex;align-items:center;gap:10px;margin:10px 0 -4px;font-size:.6875rem;color:var(--text-3)}
  .cmp__or::before,.cmp__or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
  .cmp__hint{margin-top:16px;font-size:.8125rem;line-height:1.55;color:var(--text-2)}
  .cmp__hint b{color:var(--vtb-rose)}
}
@media (prefers-reduced-motion:reduce){.pop__panel,.pop__scrim,.mcard{transition:none}}

/* ---------- Phương án B: chỉ hero dùng font có chân Fraunces (bật bằng html[data-type="serif"] hoặc ?type=serif) ---------- */
html[data-type="serif"]{--serif:"Fraunces","Georgia",serif}
html[data-type="serif"] .hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:clamp(2.5rem,5.2vw,4.875rem);line-height:1.16}
html[data-type="serif"] .hero__lead{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:clamp(1.1875rem,1.6vw,1.4375rem);line-height:1.5}
html[data-type="serif"] .hero__sub{letter-spacing:.3em}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important}
  .hero [data-in],.js .reveal,.tier,.jart{opacity:1;transform:none;filter:none}
  .hero__media img{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .island,.sheet,.app,.xcard__go,.bubble,.chat{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-deep)}
}


/* =====================================================================
   v0.7 · KV 2026 "Nước - Kim": metallic sáng hơn, cắt viền kim cương,
   sóng lụa, motif đồng tiền VietinBank, TA theo hạng
   Quy tắc hình khối: card + nút = vát góc (trên trái, dưới phải);
   phần tử tròn (icon, emblem, node đồng tiền) giữ hình tròn.
   ===================================================================== */
:root{
  --cut:18px;
  --chrome:linear-gradient(135deg,#FFFFFF 0%,#C9D0DB 22%,#7D8797 42%,#F4F6F9 58%,#E9C5BB 78%,#AEB7C4 100%);
  --line-chrome:rgba(230,234,240,.16);
}
body{background:var(--bg)}
.cut,.tcard,.xcard,.pcard,.ccard,.pillar,.contact__panel,.pop__panel,.btn{
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  border-radius:0}
.btn{--cut:12px}
.pillar{--cut:14px}
.btn--rose{background:linear-gradient(180deg,#F6E4DE 0%,#E9C5BB 35%,#C38E86 100%)}
.btn--ghost{box-shadow:inset 0 0 0 1px rgba(230,234,240,.4)}
/* đường vát sáng ở 2 góc cắt (facet glint) */
.xcard::after,.ccard::after,.contact__panel::after,.tcard:not(.tcard--eli)::after,.pcard::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.6) calc(var(--cut)*.7071 + 1.5px),transparent calc(var(--cut)*.7071 + 1.5px)) top left/calc(var(--cut)*2) calc(var(--cut)*2) no-repeat,linear-gradient(315deg,rgba(233,197,187,.55) 0,rgba(233,197,187,.55) calc(var(--cut)*.7071 + 1.5px),transparent calc(var(--cut)*.7071 + 1.5px)) bottom right/calc(var(--cut)*2) calc(var(--cut)*2) no-repeat}
@media (min-width:768px){.pop__panel{--cut:22px}}
@media (max-width:767px){.pop__panel{clip-path:none;border-radius:20px 20px 0 0}}

/* Hero: video KV đồng tiền */
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}
.hero::before{background:linear-gradient(90deg,rgba(6,18,47,.72) 0%,rgba(6,18,47,.35) 36%,rgba(6,18,47,0) 60%),linear-gradient(0deg,rgba(10,26,62,.9) 0%,rgba(10,26,62,0) 34%)}
.hero h1{background:linear-gradient(180deg,#FFFFFF 0%,#E6EAF0 30%,#E9C5BB 70%,#C38E86 100%);-webkit-background-clip:text;background-clip:text}

/* Sóng lụa: lớp nền trôi chậm, chỉ transform (compositor) */
.journey,.contact,.conditions,.site-footer{position:relative;isolation:isolate;overflow-x:clip}
.silk{position:absolute;left:-10%;width:130%;height:520px;z-index:-1;pointer-events:none;background:url(../img/silk.svg) center/100% 100% no-repeat;opacity:.42;animation:silkDrift 26s ease-in-out infinite alternate}
.silk--a{top:clamp(220px,20vw,320px)}
.silk--b{bottom:-60px;transform:scaleX(-1);opacity:.32;animation-name:silkDriftR}
@keyframes silkDrift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,-14px,0)}}
@keyframes silkDriftR{from{transform:scaleX(-1) translate3d(-4%,0,0)}to{transform:scaleX(-1) translate3d(4%,12px,0)}}

/* Watermark đồng tiền */
.coin-mark{position:absolute;z-index:-1;width:min(56vw,720px);aspect-ratio:1;right:-12vw;top:120px;fill:none;stroke:rgba(230,234,240,.07);stroke-width:.16;pointer-events:none}
.coin-mark--foot{width:min(46vw,520px);right:-8vw;top:auto;bottom:-120px;stroke:rgba(233,197,187,.09)}

/* Node hành trình = đồng tiền */
.node{width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--bg-deep);box-shadow:0 0 0 1px rgba(230,234,240,.18);display:grid;place-items:center;--tc:#E6EAF0}
.node[data-node="1"]{--tc:#9FE3E6}.node[data-node="2"]{--tc:#E9C5BB}
.node svg{width:18px;height:18px;fill:transparent;stroke:var(--tc);stroke-width:2.2;transition:fill .6s var(--ease),filter .6s var(--ease)}
.node::after{display:none}
.node::before{top:30px}
.node.is-lit{box-shadow:0 0 0 1px var(--tc),0 0 0 8px rgba(255,255,255,.04),0 0 26px 2px color-mix(in srgb,var(--tc) 45%,transparent)}
.node.is-lit svg{fill:var(--tc);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tc) 70%,transparent))}

/* TA theo hạng */
.jart img{filter:saturate(.85) contrast(1.04);mix-blend-mode:normal;object-position:center 18%}
.jart.is-lit{opacity:.5}
.journey__stage.has-focus .jart.is-lit{opacity:.22}
.journey__stage.has-focus .jart.is-lit.is-active{opacity:.95}
.tier__ta{margin-top:10px;font-size:.9375rem;line-height:1.55;color:var(--text-2);max-width:40ch}
.tier[data-tier="0"]{--tc:#E6EAF0}.tier[data-tier="1"]{--tc:#9FE3E6}.tier[data-tier="2"]{--tc:#E9C5BB}
.tier__tag{color:var(--tc)}
.tier::before{background:linear-gradient(90deg,var(--tc),transparent)}

/* Tier materials */
.tcard--eli{box-shadow:inset 0 0 0 1px var(--tline),inset 0 -80px 120px -60px rgba(155,58,69,.45)}
.tcard--dia{box-shadow:inset 0 0 0 1px var(--tline),inset 0 -80px 120px -60px rgba(79,179,188,.25)}
.m-eli{--tc:#F0C3BA}
.cmp__tier--eli{background:rgba(155,58,69,.12)}
@media (prefers-reduced-motion:reduce){.silk{animation:none}}
@media (max-width:767px){
  /* mobile: KV đồng tiền nằm trên, chữ nằm dưới, không chồng lên nhau */
  .hero{min-height:0;justify-content:flex-start}
  .hero__media{position:relative;inset:auto;height:min(92vw,440px);z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .hero__media video{object-position:50% 28%}
  .hero::before{display:none}
  .hero__inner{padding-top:0;margin-top:-28px;position:relative}
  .coin-mark{width:90vw;right:-40vw}
}
.tier__face{display:none}
@media (max-width:767px){
  .tier__face{display:block;width:100%;height:220px;object-fit:cover;object-position:center 15%;margin-bottom:18px;--cut:14px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));-webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.25));mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.25))}
  .tier::after{box-shadow:0 0 0 1.5px var(--tc)}
  .tier.is-lit::after{background:var(--tc)}
}
.pop__body .tier__face{display:none!important}

/* =====================================================================
   v0.8 · Feedback 10/10 chiều
   ===================================================================== */
/* CTA lớn bo tròn (không vát góc) */
.btn{clip-path:none;border-radius:999px}

/* Hành trình: dải lụa nằm SAU ảnh chân dung, màu navy mặc định, đổi theo hạng khi hover */
.journey__curve .jsilk{position:absolute;left:-26vw;width:calc(100% + 52vw);top:0;height:100%;z-index:0;color:#1C4586;opacity:.8;pointer-events:none;transition:color 1s var(--ease),opacity 1s var(--ease)}
.journey__stage:has(.tier[data-tier="0"]:hover) .jsilk,.journey__stage.has-focus:has(.tier[data-tier="0"].is-active) .jsilk{color:#9AA4B3}
.journey__stage:has(.tier[data-tier="1"]:hover) .jsilk,.journey__stage.has-focus:has(.tier[data-tier="1"].is-active) .jsilk{color:#3FA7B1}
.journey__stage:has(.tier[data-tier="2"]:hover) .jsilk,.journey__stage.has-focus:has(.tier[data-tier="2"].is-active) .jsilk{color:#9B3A45}
.jart.is-lit{opacity:1}
.jart{transition:opacity 1.4s var(--ease),transform 1.8s var(--ease),filter .8s var(--ease)}
.journey__stage.has-focus .jart.is-lit{opacity:1;filter:brightness(.38) saturate(.5)}
.journey__stage.has-focus .jart.is-lit.is-active{opacity:1;filter:none}

/* Đặc quyền theo hạng: cột Platinum cũng có nền nhẹ */
.mcol--plat{left:22.2%;width:25.8%;background:linear-gradient(180deg,rgba(201,208,219,.08) 0%,rgba(201,208,219,.02) 100%);box-shadow:inset 0 0 0 1px rgba(201,208,219,.14)}

/* Điều kiện: viền card chạy glow liên tục theo màu hạng */
.tcard__glow{position:absolute;inset:0;z-index:3;pointer-events:none;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0deg,transparent 190deg,color-mix(in srgb,var(--tc) 35%,transparent) 250deg,var(--tc) 312deg,#FFFFFF 330deg,var(--tc) 345deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:runBorder 7s linear infinite}
.tcard--dia .tcard__glow{animation-duration:6s;animation-delay:-2s}
.tcard--eli .tcard__glow{animation-duration:5s;animation-delay:-1s}
.tcard--eli::after{display:none}
.tcard{box-shadow:inset 0 0 0 1px var(--tline),inset 0 0 40px -10px color-mix(in srgb,var(--tc) 18%,transparent)}
.tcard--eli{box-shadow:inset 0 0 0 1px var(--tline),inset 0 -80px 120px -60px rgba(155,58,69,.45),inset 0 0 40px -10px rgba(233,197,187,.18)}
.tcard--dia{box-shadow:inset 0 0 0 1px var(--tline),inset 0 -80px 120px -60px rgba(79,179,188,.25),inset 0 0 40px -10px rgba(159,227,230,.16)}

/* Điều kiện: con số lớn, gradient kim loại theo hạng */
.tcard--plat{--num:linear-gradient(180deg,#FFFFFF 0%,#E6EAF0 40%,#8D99AF 52%,#F4F6F9 78%,#B7C0CD 100%)}
.tcard--dia{--num:linear-gradient(180deg,#F2FEFF 0%,#B4ECEE 40%,#2E8C98 52%,#DDF7F8 78%,#6CC6CC 100%)}
.tcard--eli{--num:linear-gradient(180deg,#FFF4F0 0%,#F0C3BA 40%,#A56D6A 52%,#F6E4DE 78%,#C98E86 100%)}
.crit li:not(.crit__or){align-items:center;padding:12px 14px;min-height:62px}
.crit b{display:inline-flex;align-items:baseline;gap:.32em;font-size:1rem}
.crit b .n{font-style:normal;font-size:clamp(1.875rem,2.5vw,2.375rem);font-weight:700;line-height:1;letter-spacing:-.035em;background:var(--num);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .02em .04em;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.tcard--eli .crit b{color:inherit}
@media (max-width:767px){.crit b .n{font-size:1.75rem}}

/* Bắt đầu hành trình: nền là ảnh bìa KV 2026 */
.contact__bg img{mix-blend-mode:normal;opacity:.62;object-position:70% 50%;filter:saturate(.9)}

/* Badge tải app chính thức */
.store{height:auto;padding:0;box-shadow:none;border-radius:8px;transition:transform .35s var(--ease),filter .35s var(--ease)}
.store img{display:block;height:44px;width:auto}
.store:hover{box-shadow:none;transform:translateY(-2px);filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.store:focus-visible{outline:2px solid var(--vtb-rose);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tcard__glow{animation:none}.jsilk path animate{display:none}}
.journey__curve .node svg{position:static;inset:auto;overflow:visible}
.jart{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%)}
.journey__curve .jsilk{top:18%;height:90%}

/* =====================================================================
   v0.9 · Feedback 10/10 tối: hero ảnh bìa KV, hành trình như bản cũ,
   lụa mờ ẩn sau nền, tông hạng nhẹ hơn, phân cấp chữ
   ===================================================================== */
/* Hero: ảnh bìa KV, phủ navy thương hiệu */
.hero{background:linear-gradient(25deg,#2A1A2E 0%,#0A1838 40%,#0B2A5C 100%)}
.hero__media picture{position:absolute;inset:0 0 0 auto;width:min(78%,1400px);display:block}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;mix-blend-mode:luminosity;opacity:.95;transform:scale(1.04);animation:heroZoom 2.6s var(--ease) both;filter:contrast(1.08) brightness(1.05);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
.hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,18,47,0) 40%,rgba(28,69,134,.28) 100%),linear-gradient(180deg,rgba(6,18,47,0) 60%,rgba(165,109,106,.16) 100%);mix-blend-mode:soft-light}
.hero::before{background:linear-gradient(90deg,rgba(6,18,47,.92) 0%,rgba(6,18,47,.7) 32%,rgba(6,18,47,.05) 62%),linear-gradient(0deg,rgba(10,26,62,.9) 0%,rgba(10,26,62,0) 30%)}
@media (max-width:767px){
  .hero__media picture{position:relative;inset:auto;width:100%;height:100%}
  .hero__media img{object-position:50% 40%;-webkit-mask-image:linear-gradient(180deg,#000 65%,transparent);mask-image:linear-gradient(180deg,#000 65%,transparent)}
}

/* Hành trình: bố cục như bản đã host, ảnh hoà màu vào nền */
.journey__arts{z-index:1}
.jart{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 92%),linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 92%),linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-composite:intersect}
.jart img{object-position:center 18%;filter:saturate(.55) contrast(1.02) brightness(.95);mix-blend-mode:luminosity;transition:filter .9s var(--ease),mix-blend-mode .9s}
.jart.is-lit{opacity:.5}
.journey__stage.has-focus .jart.is-lit{opacity:.2;filter:none}
.journey__stage.has-focus .jart.is-lit.is-active{opacity:.78;filter:none}
.journey__stage.has-focus .jart.is-active img{mix-blend-mode:normal;filter:saturate(.75) brightness(.9)}
/* dải lụa: mờ mạnh, gần tông nền navy, nằm sau ảnh */
.journey__curve .jsilk{top:16%;height:84%;color:#14336C;opacity:.55;filter:blur(14px)}
.journey__curve .jsilk g[stroke],.journey__curve .jsilk path[stroke]{display:none}
.journey__stage:has(.tier[data-tier="0"]:hover) .jsilk,.journey__stage.has-focus:has(.tier[data-tier="0"].is-active) .jsilk{color:#56637A}
.journey__stage:has(.tier[data-tier="1"]:hover) .jsilk,.journey__stage.has-focus:has(.tier[data-tier="1"].is-active) .jsilk{color:#1F6A78}
.journey__stage:has(.tier[data-tier="2"]:hover) .jsilk,.journey__stage.has-focus:has(.tier[data-tier="2"].is-active) .jsilk{color:#5E2433}
/* node đồng tiền nhỏ gọn như bản cũ */
.node{width:22px;height:22px;margin:-11px 0 0 -11px}
.node svg{width:12px;height:12px}
.node::before{top:22px}

/* Phân cấp chữ của từng hạng: pill nhỏ, tên lớn, câu khẩu hiệu nhấn màu, mô tả, dòng "Dành cho" trầm */
.tier__level{margin-bottom:12px}
.tier__tag{margin-top:6px}
.tier__desc{margin-top:12px;color:var(--text-2)}
.tier__ta{margin-top:10px;padding-left:12px;border-left:1px solid color-mix(in srgb,var(--tc) 45%,transparent);font-size:.875rem;color:var(--text-3)}

/* Giá trị nổi bật: mặc định thu gọn, chỉ mở khi hover / focus / bấm */
@media (min-width:768px){
  .tier__more{grid-template-rows:0fr;opacity:0;transform:translateY(6px);visibility:visible;transition:grid-template-rows .55s var(--ease),opacity .45s var(--ease),transform .55s var(--ease)}
  .tier__more > div{overflow:hidden}
  .tier.is-open .tier__more{grid-template-rows:1fr;opacity:1;transform:none}
}

/* Điều kiện: tông hạng nhạt và tinh tế hơn */
.tcard--plat{--tint:rgba(213,219,228,.05)}
.tcard--dia{--tint:rgba(110,205,210,.06);--tline:rgba(110,205,210,.2)}
.tcard--eli{--tint:rgba(155,58,69,.09);--tline:rgba(227,175,166,.28)}
.tcard{box-shadow:inset 0 0 0 1px var(--tline)}
.tcard--dia{box-shadow:inset 0 0 0 1px var(--tline),inset 0 -60px 100px -70px rgba(79,179,188,.14)}
.tcard--eli{box-shadow:inset 0 0 0 1px var(--tline),inset 0 -60px 100px -70px rgba(155,58,69,.2)}
.tcard__glow{opacity:.7}
.crit b .n{filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}

/* =====================================================================
   v0.10 · Feedback 10/10 21:54
   ===================================================================== */
/* Hero: ảnh bìa hiện trọn đồng tiền, canh phải theo chiều cao */
.hero__media picture{inset:0 0 0 auto;width:auto;height:100%;aspect-ratio:1080/1115;max-width:72%}
.hero__media img{object-fit:cover;object-position:50% 50%;transform:none;animation:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 92%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 92%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 14%);mask-composite:intersect}
@media (max-width:1180px){.hero__media picture{max-width:none;right:-12%}}
@media (max-width:767px){.hero__media picture{inset:auto;width:100%;height:100%;aspect-ratio:auto;max-width:none;right:auto}.hero__media img{object-position:45% 30%}}

/* Hành trình: ảnh đại diện đủ độ, phủ một lớp navy nhạt cho đơn sắc */
.jart.is-lit,.journey__stage.has-focus .jart.is-lit,.journey__stage.has-focus .jart.is-lit.is-active{opacity:1;filter:none}
.jart img,.journey__stage.has-focus .jart.is-active img{mix-blend-mode:normal;filter:grayscale(1) contrast(1.05) brightness(.92)}
.jart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#2B5597 0%,#1C4586 60%,#14336C 100%);mix-blend-mode:color;opacity:.85;transition:opacity .8s var(--ease)}
.jart::before{content:"";position:absolute;inset:0;z-index:1;background:#0A1A3E;opacity:0;transition:opacity .8s var(--ease)}
.journey__stage.has-focus .jart:not(.is-active)::before{opacity:.5}
.journey__stage.has-focus .jart.is-active::after{opacity:.35}
.journey__stage.has-focus .jart.is-active img{filter:grayscale(.35) contrast(1.03)}
/* dải lụa: hạ thấp dưới hình người, to hơn, biên độ sóng lớn hơn */
.journey__curve .jsilk{top:58%;height:120%;opacity:.6;filter:blur(18px)}
.journey__stage{isolation:isolate}
.journey__tiers{position:relative;z-index:1}

/* Bảng màu kim loại 3 hạng: mảng đậm sáng hơn, tự nhiên hơn */
:root{
  --mat-plat:linear-gradient(135deg,#FFFFFF 0%,#D9DEE6 28%,#9AA4B4 52%,#F2F4F7 72%,#B3BCC9 100%);
  --mat-dia:linear-gradient(135deg,#F4FEFF 0%,#C2F0F1 28%,#6CC6CD 52%,#E3F9FA 72%,#8AD3D8 100%);
  --mat-eli:linear-gradient(135deg,#FBEDE8 0%,#EDBFB6 28%,#C0706F 52%,#F4D8D0 74%,#C98A85 100%);
}
.tcard--plat{--num:linear-gradient(180deg,#FFFFFF 0%,#E9EDF2 40%,#A3ADBD 54%,#F6F8FA 80%,#C4CCD7 100%)}
.tcard--dia{--num:linear-gradient(180deg,#F4FEFF 0%,#C2F0F1 40%,#5DBFC6 54%,#E3F9FA 80%,#8AD3D8 100%)}
.tcard--eli{--num:linear-gradient(180deg,#FFF4F0 0%,#F3CDC4 40%,#C0706F 54%,#F8E6E0 80%,#D9A39C 100%)}

/* Biểu tượng đồng tiền điểm xuyết trước tiêu đề section */
.coin-sign{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--vtb-rose)}
.coin-sign svg{width:22px;height:22px;fill:url(#roseG);filter:drop-shadow(0 2px 6px rgba(211,160,151,.35))}
.coin-sign::after{content:"";width:48px;height:1px;background:linear-gradient(90deg,rgba(233,197,187,.7),rgba(233,197,187,0))}
.journey__stage:has(.tier:hover) .jsilk,.journey__stage.has-focus .jsilk{opacity:.45}

/* =====================================================================
   v0.11 · Hành trình di sản: bố cục "bậc thăng hạng"
   3 tấm chân dung cao dần như bậc thang, nối bằng đường rose gold đi lên.
   Hover / focus một bậc: bậc đó nở rộng, ảnh hiện màu hạng, mở giá trị nổi bật.
   ===================================================================== */
.journey .silk{display:none}
.ascend{position:relative;display:flex;align-items:flex-end;gap:clamp(12px,1.4vw,20px);height:clamp(600px,52vw,700px);margin-top:clamp(48px,5vw,72px);padding-top:28px}
.ascend__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.ascend__base{fill:none;stroke:rgba(241,243,244,.12);stroke-width:1.2}
.ascend__glow{fill:none;stroke:url(#ascLine);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(211,160,151,.45))}
.step{--tc:#E6EAF0;--tint:#8D99AF;--h:76%;position:relative;flex:1 1 0;min-width:0;height:var(--h);transition:flex-grow .8s var(--ease),transform 1s var(--ease),opacity 1s var(--ease);outline:none}
.step--dia{--tc:#9FE3E6;--tint:#2E8C98;--h:88%}
.step--eli{--tc:#F0C3BA;--tint:#8E2F3C;--h:100%}
.step__frame{--cut:16px;position:absolute;inset:0;overflow:hidden;isolation:isolate;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));background:#0B1C44;box-shadow:inset 0 0 0 1px rgba(241,243,244,.08)}
.step__frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 0%,transparent);background:linear-gradient(90deg,transparent,var(--tc),transparent) top/100% 1px no-repeat;opacity:.35;transition:opacity .8s var(--ease),box-shadow .8s var(--ease)}
.step__media{position:absolute;inset:0;z-index:0}
.step__media img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:grayscale(1) contrast(1.05) brightness(.9);transform:scale(1.04);transition:filter 1s var(--ease),transform 1.4s var(--ease)}
.step__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#2B5597 0%,#1C4586 55%,#14336C 100%);mix-blend-mode:color;opacity:.9;transition:opacity 1s var(--ease)}
.step__media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,18,47,0) 30%,rgba(6,18,47,.72) 62%,rgba(6,18,47,.96) 100%)}
.step__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,2.2vw,32px)}
.step__level{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:.6875rem;font-weight:600;letter-spacing:.04em;color:var(--tc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 45%,transparent);background:rgba(6,18,47,.4)}
.step__name{margin-top:12px;font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.05;letter-spacing:-.025em}
.step__tag{margin-top:8px;font-style:italic;font-size:1rem;line-height:1.45;color:var(--tc);max-width:34ch}
.step__ta{margin-top:10px;font-size:.875rem;line-height:1.5;color:var(--text-3);max-width:38ch}
.step__more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s var(--ease),opacity .5s var(--ease)}
.step__more > div{overflow:hidden;min-height:0}
.step__desc{margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--tc) 25%,transparent);font-size:.9375rem;color:var(--text-2);line-height:1.6;max-width:44ch}
.step__more ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.step__more li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:.90625rem;line-height:1.5;color:var(--text-2)}
.step__more li .ic{margin-top:4px;color:var(--tc);font-size:.9rem}
.step__serve{margin-top:14px;display:grid;gap:2px;font-size:.84375rem;color:var(--text-3)}
.step__serve b{font-weight:600;color:var(--text);font-size:.75rem;letter-spacing:.04em}
.step__toggle{display:none}
.step__node{position:absolute;left:50%;top:0;z-index:4;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:grid;place-items:center;background:#06122F;box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 60%,transparent),0 0 0 6px rgba(6,18,47,.6);transition:box-shadow .8s var(--ease),transform .8s var(--spring)}
.step__node svg{width:14px;height:14px;fill:var(--tc);opacity:.75;transition:opacity .6s}
/* trạng thái hoạt động */
.ascend.has-active .step:not(.is-active){flex-grow:.82}
.ascend.has-active .step:not(.is-active) .step__media img{filter:grayscale(1) brightness(.62)}
.step.is-active{flex-grow:1.7}
.step.is-active .step__media img{filter:grayscale(.25) contrast(1.03);transform:scale(1)}
.step.is-active .step__media::before{opacity:.4;background:linear-gradient(180deg,var(--tint) 0%,#1C4586 70%,#14336C 100%)}
.step.is-active .step__frame::after{opacity:1;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 40%,transparent)}
.step.is-active .step__more{grid-template-rows:1fr;opacity:1}
.step.is-active .step__node{transform:scale(1.18);box-shadow:0 0 0 1px var(--tc),0 0 0 6px rgba(6,18,47,.6),0 0 24px 2px color-mix(in srgb,var(--tc) 55%,transparent)}
.step.is-active .step__node svg{opacity:1}
.step:focus-visible .step__frame{outline:2px solid var(--tc);outline-offset:-2px}
/* xuất hiện: các bậc trồi lên lần lượt */
.js .ascend .step{opacity:0;transform:translateY(40px)}
.js .ascend.is-in .step{opacity:1;transform:none}
.ascend.is-in .step{transition:flex-grow .8s var(--ease),transform 1.1s var(--ease) var(--dl,0s),opacity 1.1s var(--ease) var(--dl,0s)}
.step--dia{--dl:.12s}.step--eli{--dl:.24s}
.ascend__glow{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 2.2s var(--ease) .5s}
.ascend.is-in .ascend__glow{stroke-dashoffset:0}
@media (max-width:1180px){.ascend{height:640px}.step__more li{font-size:.875rem}}
/* mobile: xếp dọc, đường thăng hạng chạy dọc bên trái */
@media (max-width:767px){
  .ascend{display:grid;gap:18px;height:auto;padding:0 0 0 22px;margin-top:32px}
  .ascend__line{display:none}
  .ascend::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,rgba(230,234,240,.5),#D3A097,#F6E4DE)}
  .step{height:auto;flex:none}
  .step__frame{position:relative;inset:auto;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end}
  .step__body{position:relative}
  .step__node{left:-16px;top:22px;margin:0 0 0 -13px}
  .step--plat .step__frame{min-height:420px}.step--dia .step__frame{min-height:450px}.step--eli .step__frame{min-height:480px}
  .step__media img{filter:grayscale(.2) contrast(1.03)}
  .step__media::before{opacity:.45}
  .step__toggle{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:.8125rem;font-weight:600;color:var(--vtb-rose)}
  .step__toggle .ic{transition:transform .5s var(--spring)}
  .step.is-open .step__toggle .ic{transform:rotate(45deg)}
  .step.is-open .step__more{grid-template-rows:1fr;opacity:1}
  .ascend.has-active .step:not(.is-active) .step__media img{filter:grayscale(.2)}
  .js .ascend .step{transform:translateY(24px)}
}
@media (prefers-reduced-motion:reduce){.step,.step__more,.step__media img,.ascend__glow{transition:none!important}.js .ascend .step{opacity:1;transform:none}.ascend__glow{stroke-dashoffset:0}}
@media (min-width:768px){
  .step__body{transition:max-width .8s var(--ease)}
  .step.is-active .step__body{max-width:60%}
  .step.is-active .step__media img{object-position:82% 14%}
  .step__media::after{transition:background 0s}
  .step.is-active .step__media::after{background:linear-gradient(90deg,rgba(6,18,47,.97) 0%,rgba(6,18,47,.9) 42%,rgba(6,18,47,.35) 66%,rgba(6,18,47,0) 82%),linear-gradient(180deg,rgba(6,18,47,0) 70%,rgba(6,18,47,.6) 100%)}
}
@media (min-width:768px){
  .ascend{height:clamp(680px,54vw,760px)}
  .step{--h:80%}.step--dia{--h:90%}.step--eli{--h:100%}
  .step.is-active .step__body{max-width:62%}
}
@media (max-width:767px){
  .step.is-open .step__media::after{background:linear-gradient(180deg,rgba(6,18,47,.1) 0%,rgba(6,18,47,.75) 30%,rgba(6,18,47,.95) 55%,rgba(6,18,47,.98) 100%)}
  .step.is-open .step__media img{object-position:50% 0}
}

/* =====================================================================
   v0.12 · Hành trình di sản (làm lại theo feedback 22:46)
   ===================================================================== */
.ascend{display:block;height:auto;padding-top:0;margin-top:clamp(40px,4vw,56px)}
.ascend__line{position:relative;inset:auto;display:block;width:100%;height:132px;overflow:visible;z-index:3}
.ascend__base{stroke:rgba(241,243,244,.1);stroke-width:1.5}
.ascend__glow{stroke-width:2;filter:drop-shadow(0 0 6px rgba(211,160,151,.5))}
/* ánh sáng chạy dọc suốt đường cong */
.ascend__run{fill:none;stroke:#FFF6F1;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px #F6E4DE) drop-shadow(0 0 14px rgba(233,197,187,.9));stroke-dasharray:90 var(--len,2000);stroke-dashoffset:90;opacity:0}
.ascend.is-in .ascend__run{opacity:1;animation:ascRun 4.6s cubic-bezier(.45,0,.25,1) 2.4s infinite}
@keyframes ascRun{from{stroke-dashoffset:90}to{stroke-dashoffset:calc(-1 * var(--len,2000))}}
.ascend__row{display:flex;gap:clamp(14px,1.4vw,20px);height:clamp(560px,44vw,640px);margin-top:-6px}
/* 3 thẻ cao bằng nhau, bo tròn, viền gradient theo hạng */
.step,.step--dia,.step--eli{--h:100%;height:100%}
.step{--g1:#FFFFFF;--g2:#9AA4B4;--g3:#E6EAF0}
.step--dia{--g1:#F4FEFF;--g2:#4FB3BC;--g3:#C2F0F1}
.step--eli{--g1:#FFF4F0;--g2:#B5635F;--g3:#F0C3BA}
.step__frame{clip-path:none;border-radius:18px;background:#0B1C44;box-shadow:0 30px 60px -36px rgba(0,0,0,.7)}
.step__frame::after{display:none}
.step__ring{position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0deg,transparent 200deg,color-mix(in srgb,var(--g3) 60%,transparent) 260deg,#FFFFFF 312deg,var(--g3) 330deg,transparent 360deg),linear-gradient(160deg,var(--g1),var(--g2) 45%,color-mix(in srgb,var(--g2) 30%,transparent) 70%,var(--g3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:runBorder 6s linear infinite;opacity:.75;transition:opacity .6s}
.step--dia .step__ring{animation-delay:-2s}.step--eli .step__ring{animation-delay:-4s}
.step.is-active .step__ring{opacity:1}
/* lớp kính ánh gương nhẹ ở mé trái */
.step__glass{position:absolute;top:0;bottom:0;left:0;width:34%;z-index:4;pointer-events:none;border-radius:18px 0 0 18px;
  background:linear-gradient(105deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%);
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent);mix-blend-mode:screen}
.step__glass::after{content:"";position:absolute;top:0;bottom:0;left:22%;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);transform:skewX(-8deg)}
/* ảnh đồng bộ với mobile: màu tự nhiên, phủ navy nhẹ */
.step__media img{filter:grayscale(.2) contrast(1.03);transform:none;object-position:50% 12%}
.step__media::before{opacity:.42}
.ascend.has-active .step:not(.is-active) .step__media img{filter:grayscale(.55) brightness(.6)}
.step.is-active .step__media img{filter:grayscale(0) contrast(1.03)}
.step.is-active .step__media::before{opacity:.22}
/* node đồng tiền: sáng hơn, có glow, nằm trên đường cong + đường gióng xuống thẻ */
.step__node{left:50%;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;background:radial-gradient(circle at 50% 40%,#13306A,#06122F 70%);box-shadow:0 0 0 1.5px var(--tc),0 0 0 6px rgba(6,18,47,.7),0 0 18px 3px color-mix(in srgb,var(--tc) 55%,transparent)}
.step__node svg{width:16px;height:16px;opacity:1;fill:var(--g1);filter:drop-shadow(0 0 4px var(--tc))}
.step__node::before{content:"";position:absolute;left:50%;top:30px;width:1px;height:var(--drop,0px);transform:translateX(-50%);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 80%,transparent),transparent)}
.step.is-active .step__node{transform:scale(1.15);box-shadow:0 0 0 1.5px var(--tc),0 0 0 6px rgba(6,18,47,.7),0 0 30px 6px color-mix(in srgb,var(--tc) 75%,transparent)}
.step__node{animation:nodePulse 3.2s ease-in-out infinite}
.step--dia .step__node{animation-delay:-1s}.step--eli .step__node{animation-delay:-2s}
@keyframes nodePulse{50%{box-shadow:0 0 0 1.5px var(--tc),0 0 0 6px rgba(6,18,47,.7),0 0 28px 6px color-mix(in srgb,var(--tc) 70%,transparent)}}
/* mở rộng theo chiều ngang: chữ một cột trái, ảnh người một cột phải, không chồng lên nhau */
@media (min-width:768px){
  .step.is-active{flex-grow:2.3}
  .ascend.has-active .step:not(.is-active){flex-grow:.7}
  .step__media{transition:left .8s var(--ease)}
  .step.is-active .step__media{left:44%}
  .step.is-active .step__media img{object-position:50% 10%}
  .step.is-active .step__media::after{background:linear-gradient(90deg,rgba(11,28,68,1) 0%,rgba(11,28,68,0) 22%),linear-gradient(180deg,rgba(6,18,47,0) 70%,rgba(6,18,47,.55) 100%)}
  .step.is-active .step__body{max-width:44%;top:0;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(11,28,68,.0),rgba(11,28,68,.0))}
  .step.is-active .step__glass{width:44%}
  .step__body{max-width:100%}
}
/* mobile: thẻ cao bằng nhau, ảnh trên, chữ dưới (không đè), đường dọc có ánh sáng chạy hết chiều dài */
@media (max-width:767px){
  .ascend{padding-left:28px}
  .ascend__line{display:none}
  .ascend__row{display:grid;gap:22px;height:auto;margin-top:0}
  .ascend::before{left:9px;top:14px;bottom:14px;width:1.5px;background:linear-gradient(180deg,rgba(230,234,240,.55),#9FE3E6 50%,#F0C3BA)}
  .ascend::after{content:"";position:absolute;left:8px;width:3.5px;height:90px;top:14px;border-radius:4px;background:linear-gradient(180deg,transparent,#FFF6F1,transparent);box-shadow:0 0 12px 3px rgba(246,228,222,.7);animation:runDown 4.2s cubic-bezier(.45,0,.25,1) infinite}
  @keyframes runDown{from{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(calc(var(--rowh,1800px) - 110px));opacity:0}}
  .step,.step--plat .step__frame,.step--dia .step__frame,.step--eli .step__frame{min-height:0}
  .step__frame{display:block;min-height:0}
  .step__media{position:relative;inset:auto;height:300px}
  .step__media::after{background:linear-gradient(180deg,rgba(11,28,68,0) 55%,#0B1C44 100%)}
  .step__body{position:relative;padding:4px 22px 24px}
  .step__glass{width:42%}
  .step__node{left:-19px;top:24px;margin:0 0 0 -15px}
  .step__node::before{display:none}
  .step.is-open .step__media::after{background:linear-gradient(180deg,rgba(11,28,68,0) 55%,#0B1C44 100%)}
  .step.is-open .step__media img{object-position:50% 12%}
}
@media (prefers-reduced-motion:reduce){.ascend__run,.ascend::after,.step__ring,.step__node{animation:none!important}}
/* v0.12b · polish: node sáng + glow theo hạng, tag pill gọn, mobile ảnh luôn hiện */
.step__tag{align-self:flex-start;width:fit-content;max-width:100%}
.step__node{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--tc) 55%,#fff) 0%,var(--tc) 38%,color-mix(in srgb,var(--tc) 40%,#0B1C44) 100%);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 0 0 5px color-mix(in srgb,var(--tc) 22%,transparent),0 0 22px 6px color-mix(in srgb,var(--tc) 70%,transparent),0 0 46px 10px color-mix(in srgb,var(--tc) 28%,transparent)}
.step__node svg{fill:#0B1C44;filter:none;opacity:.9}
.step.is-active .step__node{box-shadow:0 0 0 1.5px #fff,0 0 0 6px color-mix(in srgb,var(--tc) 30%,transparent),0 0 30px 9px color-mix(in srgb,var(--tc) 85%,transparent),0 0 70px 16px color-mix(in srgb,var(--tc) 35%,transparent)}
.step__node::before{width:1.5px;background:linear-gradient(180deg,var(--tc),transparent)}
@media (min-width:768px){.step.is-active .step__body{padding-top:32px}}
@media (max-width:767px){
  .ascend.has-active .step:not(.is-active) .step__media img{filter:grayscale(.2) contrast(1.03)}
  .step__media img{opacity:1!important;visibility:visible}
}
@keyframes nodePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25) saturate(1.15)}}
.step__level{align-self:flex-start;width:fit-content}

/* =====================================================================
   v0.13 · Hành trình: tách node khỏi thẻ + đường gióng, thẻ theo gợi ý (ribbon hạng, viền gradient, panel tint)
   ===================================================================== */
.ascend__line{height:clamp(170px,15vw,210px)}
.ascend__row{margin-top:0}
/* node: không phóng to (giữ đường gióng chuẩn), đường gióng + chấm neo trên đỉnh thẻ */
.step.is-active .step__node{transform:none}
.step__node::before{top:30px;width:1.5px;height:var(--drop,0px);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 95%,#fff),color-mix(in srgb,var(--tc) 35%,transparent))}
.step__node::after{content:"";position:absolute;left:50%;top:calc(30px + var(--drop,0px));width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 22%,transparent),0 0 10px 2px color-mix(in srgb,var(--tc) 60%,transparent)}
/* viền thẻ: gradient hạng rõ hơn, ánh chiếu vẫn chạy quanh */
.step__ring{padding:2px;opacity:1;background:conic-gradient(from var(--ang),transparent 0deg,transparent 220deg,color-mix(in srgb,#fff 50%,transparent) 290deg,#FFFFFF 318deg,transparent 350deg),linear-gradient(160deg,var(--g1) 0%,var(--g3) 32%,color-mix(in srgb,var(--g2) 65%,var(--g3)) 68%,var(--g1) 100%)}
.step__glass{z-index:1}
/* ribbon hạng ở góc trên trái */
.step__level{position:absolute;top:18px;left:2px;z-index:6;height:30px;padding:0 52px 0 14px;border-radius:0;box-shadow:none;font-size:.75rem;font-weight:600;letter-spacing:.01em;color:#0B1C44;background:linear-gradient(90deg,var(--g1) 0%,var(--tc) 42%,color-mix(in srgb,var(--tc) 0%,transparent) 100%)}
/* ảnh rực rỡ như mobile, phủ navy rất nhẹ */
.step__media img{filter:none}
.step__media::before{opacity:.1}
.step__media::after{background:linear-gradient(180deg,rgba(6,18,47,0) 40%,rgba(6,18,47,.78) 66%,#07142F 100%)}
.ascend.has-active .step:not(.is-active) .step__media img{filter:brightness(.68) saturate(.8)}
.step.is-active .step__media img{filter:none}
.step.is-active .step__media::before{opacity:.06}
/* chữ */
.step__body{top:0;display:flex;flex-direction:column;justify-content:flex-end}
.step__head{border-left:2px solid transparent;transition:padding .7s var(--ease),border-color .7s}
.step__name{margin-top:0}
.step__tag{color:#F1F3F4;transition:color .6s}
.step__toggle{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:14px;font-size:.8125rem;font-weight:600;color:var(--vtb-rose)}
.step__toggle .ic{transition:transform .5s var(--spring)}
/* panel giá trị nổi bật: nền tint theo hạng */
.step__more{transition:grid-template-rows .7s var(--ease),opacity .5s var(--ease),margin .7s var(--ease)}
.step__more > div{border-radius:12px;transition:padding .7s var(--ease)}
.step__desc{margin:0;padding:0;border:0;font-size:.875rem;line-height:1.55;color:#F1F3F4;max-width:none}
.step__more ul{margin:10px 0 0;gap:5px}
.step__more li{grid-template-columns:12px 1fr;gap:6px;font-size:.8125rem;line-height:1.45;color:rgba(241,243,244,.86)}
.step__more li .ic{display:none}
.step__more li::before{content:"";width:4px;height:4px;margin-top:.6em;border-radius:50%;background:var(--tc)}
.step__serve{margin-top:10px;font-size:.78125rem;line-height:1.45;color:rgba(241,243,244,.72)}
.step__serve b{color:#fff;font-size:.75rem}
.step.is-active .step__more,.step.is-open .step__more{margin-top:18px}
.step.is-active .step__more > div,.step.is-open .step__more > div{padding:16px 18px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 58%,transparent),color-mix(in srgb,var(--tint) 20%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 22%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.step.is-active .step__head,.step.is-open .step__head{padding-left:16px;border-left-color:color-mix(in srgb,var(--g1) 85%,transparent)}
.step.is-active .step__tag,.step.is-open .step__tag{color:var(--tc)}
/* dải lụa trang trí góc dưới trái khi mở rộng */
.step__frame::after{display:block;content:"";position:absolute;inset:auto auto -4% -8%;width:72%;height:42%;z-index:1;pointer-events:none;box-shadow:none;opacity:0;transition:opacity .9s var(--ease);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' fill='none'%3E%3Cg stroke='white' stroke-linecap='round'%3E%3Cpath d='M-20 160 C 70 80 170 200 420 45' stroke-opacity='.14' stroke-width='16'/%3E%3Cpath d='M-20 170 C 80 92 180 210 420 62' stroke-opacity='.5' stroke-width='1.6'/%3E%3Cpath d='M-20 184 C 90 112 190 220 420 82' stroke-opacity='.3' stroke-width='1'/%3E%3Cpath d='M-20 198 C 100 132 200 232 420 104' stroke-opacity='.18' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E") left bottom/100% 100% no-repeat;filter:blur(.6px)}
.step--plat .step__frame::after{mix-blend-mode:screen}
@media (min-width:768px){
  .step__frame{background:linear-gradient(135deg,#132A5C 0%,#0B1C44 55%)}
  .step.is-active .step__frame::after{opacity:.6}
  .step.is-active .step__media{left:40%}
  .step.is-active .step__media::after{background:linear-gradient(90deg,#0E2150 0%,rgba(14,33,80,.55) 16%,rgba(14,33,80,0) 36%),linear-gradient(180deg,rgba(6,18,47,0) 75%,rgba(6,18,47,.45) 100%)}
  .step.is-active .step__body{max-width:47%;justify-content:flex-start;padding:66px 26px 24px 30px}
  .step.is-active .step__toggle{display:none}
  .step.is-active .step__glass{width:47%}
}
@media (min-width:768px) and (max-width:1180px){.step.is-active .step__body{max-width:52%}.step.is-active .step__media{left:46%}}
/* mobile */
@media (max-width:767px){
  .ascend{padding-left:40px}
  .ascend::before{left:12px}
  .ascend::after{left:10.25px}
  .step__node{left:-28px;top:26px;margin:0 0 0 -15px}
  .step__node::after{left:30px;top:50%;width:13px;height:1.5px;margin:-.75px 0 0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 20%,transparent))}
  .step__body{position:static;padding:2px 22px 24px}
  .step__media{height:320px}
  .step.is-open .step__frame::after{opacity:.45;height:24%;width:90%}
}
/* điều kiện thứ hạng: emblem gradient sáng, icon navy */
.emblem{color:#141B34;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 24px -6px color-mix(in srgb,var(--tc,#fff) 70%,transparent),0 12px 30px -14px rgba(0,0,0,.6)}
.tcard--plat .emblem,.cmp__tier--plat .emblem{--tc:#E6EAF0;background:radial-gradient(110% 80% at 25% 8%,#FFFFFF 0%,rgba(255,255,255,0) 50%),radial-gradient(90% 70% at 80% 100%,#FFFFFF 0%,rgba(255,255,255,0) 55%),#CDD3DC}
.tcard--dia .emblem,.cmp__tier--dia .emblem{--tc:#9FE3E6;background:radial-gradient(110% 80% at 25% 8%,#F2FFFF 0%,rgba(242,255,255,0) 50%),radial-gradient(90% 70% at 80% 100%,#E4FFFF 0%,rgba(228,255,255,0) 55%),#8FE6E8}
.tcard--eli .emblem,.cmp__tier--eli .emblem{--tc:#F0C3BA;background:linear-gradient(180deg,#FFF8F6 0%,#F2C9C1 28%,#DD8F88 56%,#ECBDB5 82%,#FBE7E3 100%)}
.step__frame::after{filter:none;-webkit-mask-image:radial-gradient(ellipse 75% 85% at 25% 100%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 75% 85% at 25% 100%,#000 35%,transparent 80%)}
@media (max-width:767px){
  .step__frame{background:#0B1C44}
  .step__media::after,.step.is-open .step__media::after{background:linear-gradient(180deg,rgba(11,28,68,0) 50%,rgba(11,28,68,.75) 80%,#0B1C44 100%)}
}

/* =====================================================================
   v0.14 · feedback 11/10 12:40
   ===================================================================== */
/* ---- Hệ chữ: nền văn bản = SVN-Gilroy Regular 400, các cấp khác suy ra từ đó ---- */
body{font-size:1rem;line-height:1.65;font-weight:400}
.lead{font-size:clamp(1rem,1.15vw,1.0625rem);font-weight:400;line-height:1.65}
.lead--strong{font-weight:400;font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.55;color:var(--text)}
.hero__lead,.sec-head .sub,.social p,.pillar__tag{font-weight:400}
.tcard__rule small,.citem small,.ccard__txt small,.crit span,.crit i,.matrix thead th small,.matrix thead th:first-child,.matrix td[data-t="Elite"],.mrow__k,.mrow__v{font-weight:400}
@media (max-width:767px){.matrix tbody th,.matrix td{font-weight:400}.lead{font-size:.9375rem}.lead--strong{font-size:1.0625rem}}

/* ---- Hành trình: mở rộng chậm hơn ~30%, nền tối hơn, bỏ line chéo, hoạ tiết theo hạng ---- */
.step{transition:flex-grow 1.05s var(--ease),transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.ascend.is-in .step{transition:flex-grow 1.05s var(--ease),transform 1.1s var(--ease) var(--dl,0s),opacity 1.1s var(--ease) var(--dl,0s)}
.step__more{transition:grid-template-rows .9s var(--ease),opacity .65s var(--ease),margin .9s var(--ease)}
.step__more > div{transition:padding .9s var(--ease)}
.step__head{transition:padding .9s var(--ease),border-color .9s}
.step__glass::after{display:none}
.step--plat{--pat:url(../img/pattern/platinum.webp)}
.step--dia{--pat:url(../img/pattern/diamond.webp)}
.step--eli{--pat:url(../img/pattern/elite.webp)}
.step__frame::after{inset:0 auto 0 0;width:64%;height:auto;background:var(--pat) left center/cover no-repeat;opacity:0;filter:none;mix-blend-mode:normal!important;
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 100%);mask-image:linear-gradient(90deg,#000 40%,transparent 100%);transition:opacity 1.2s var(--ease)}
@media (min-width:768px){
  .step__media{transition:left 1.05s var(--ease)}
  .step.is-active .step__frame{background:#050C24}
  .step.is-active .step__frame::after{opacity:.42}
  .step.is-active .step__media img{filter:brightness(.9)}
  .step.is-active .step__media::after{background:linear-gradient(90deg,#050C24 0%,rgba(5,12,36,.72) 16%,rgba(5,12,36,0) 40%),linear-gradient(180deg,rgba(5,12,36,0) 70%,rgba(5,12,36,.55) 100%)}
  .step.is-active .step__more > div{background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 46%,rgba(5,12,36,.5)),color-mix(in srgb,var(--tint) 14%,rgba(5,12,36,.6)))}
}
/* mobile: thẻ gọn, "Xem chi tiết" mở popup */
@media (max-width:767px){
  .step__media{height:210px}
  .step__media img{object-position:50% 16%}
  .step__more{display:none}
  .step__body{padding:0 18px 18px}
  .step__name{font-size:1.625rem}
  .step__tag{margin-top:4px;font-size:.9375rem}
  .step__ta{margin-top:6px;font-size:.8125rem}
  .step__toggle{margin-top:12px}
  .step.is-open .step__frame::after{opacity:0}
  .step__node{top:22px}
  .ascend__row{gap:16px}
}
/* popup chi tiết hạng */
.pop[data-tier] .pop__media img{object-position:50% 16%;filter:none}
.step-pop{position:relative;isolation:isolate;display:grid;gap:12px}
.step-pop__pat{position:absolute;z-index:-1;left:-24px;right:-24px;top:-28px;bottom:-28px;background:var(--pat) center/cover no-repeat;opacity:.28;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.3));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.3));pointer-events:none}
.step-pop .step__level{position:relative;top:auto;left:auto;justify-self:start;margin-left:-24px;padding-left:24px}
.step-pop .step__head{padding-left:14px;border-left:2px solid color-mix(in srgb,var(--g1) 85%,transparent)}
.step-pop .step__name{font-size:1.875rem}
.step-pop .step__tag{color:var(--tc)}
.step-pop__panel{margin-top:4px;padding:16px 18px;border-radius:12px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 50%,transparent),color-mix(in srgb,var(--tint) 16%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 22%,transparent)}
.step-pop__panel ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.step-pop__panel li{display:grid;grid-template-columns:12px 1fr;gap:6px;font-size:.875rem;line-height:1.5;color:rgba(241,243,244,.88)}
.step-pop__panel li .ic{display:none}
.step-pop__panel li::before{content:"";width:4px;height:4px;margin-top:.62em;border-radius:50%;background:var(--tc)}
.step-pop__panel .step__desc{font-size:.9375rem}
.step-pop__panel .step__serve{margin-top:12px;display:grid;gap:2px;font-size:.8125rem;color:rgba(241,243,244,.72)}

/* ---- Đặc quyền theo hạng: CTA lớn ---- */
.btn--lg{--h:58px;padding:0 34px;font-size:1rem}
.btn--line{background:rgba(241,243,244,.03);color:var(--text);box-shadow:inset 0 0 0 1px rgba(241,243,244,.32)}
.btn--line:hover{background:rgba(241,243,244,.08);box-shadow:inset 0 0 0 1px rgba(241,243,244,.55)}
.mcta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
@media (max-width:767px){
  .mcta{display:none}
  .mcard__cta{display:grid;gap:10px;margin-top:16px}
  .mcard__cta .btn{width:100%;--h:50px;font-size:.9375rem}
  .mcard .mcard__more,.mcard.has-more .mcard__more{display:inline-flex;margin-top:0;color:var(--on-rose);font-weight:600}
}
/* ---- Điều kiện: mobile = card trượt ngang như "Đặc quyền theo hạng"; nhấn mạnh card khi được trỏ tới ---- */
.cdots{display:none}
@keyframes tfocus{0%,100%{box-shadow:inset 0 0 0 1px var(--tline),0 0 0 0 transparent}30%,60%{box-shadow:inset 0 0 0 1.5px var(--tc),0 0 0 6px color-mix(in srgb,var(--tc) 18%,transparent),0 30px 70px -20px color-mix(in srgb,var(--tc) 55%,transparent)}}
.tcard.is-focus{animation:tfocus 2.4s var(--ease)}
@media (max-width:767px){
  .cmp{display:none!important}
  .conditions__grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--gutter));padding:24px 9% 30px;scrollbar-width:none;align-items:stretch}
  .conditions__grid::-webkit-scrollbar{display:none}
  .js .conditions__grid .tcard,.conditions__grid .tcard{flex:0 0 82%;scroll-snap-align:center;scroll-snap-stop:always;opacity:.5;transform:scale(.95);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .conditions__grid .tcard.is-cur,.conditions__grid .tcard.is-cur{opacity:1;transform:none}
  .cdots{display:flex;justify-content:center;gap:8px;margin-top:-10px}
  .cdots i{width:6px;height:6px;border-radius:6px;background:rgba(241,243,244,.25);transition:width .4s var(--ease),background-color .4s}
  .cdots i.is-on{width:22px;background:var(--vtb-rose)}
}
/* ---- Liên hệ (mobile): gọn hơn ---- */
@media (max-width:767px){
  .contact__panel{padding:40px var(--gutter) 32px}
  .contact .h2{font-size:1.75rem}
  .contact__intro{gap:8px;margin-top:14px}
  .contact__intro .btn{margin-top:8px;--h:50px}
  .contact__grid{margin-top:22px;gap:14px}
  .clist{grid-template-columns:1fr 1fr;gap:8px}
  .citem{min-width:0;padding:12px;gap:10px;border-top:0;border-radius:12px;background:rgba(4,12,34,.45);box-shadow:inset 0 0 0 1px rgba(241,243,244,.1);align-items:flex-start}
  .citem .ic{font-size:1.125rem;margin-top:1px}
  .citem small{font-size:.75rem;line-height:1.35}
  .citem a{margin-top:1px;font-size:.9375rem;line-height:1.35}
  .citem--hl{grid-column:1 / -1;order:1}
  .citem--hl a{font-size:1.5rem}
  .clist li:nth-child(2){order:2}.clist li:nth-child(4){order:3}
  .clist li:nth-child(3),.clist li:nth-child(5){grid-column:1 / -1;order:4}
  .clist li:nth-child(5){order:5}
  .app{padding:16px;gap:10px}
  .app h3{font-size:1rem}
  .app p{margin-top:2px;font-size:.8125rem}
  .stores img{height:38px;width:auto}
  .social{margin-top:22px;gap:12px}
  .social a{width:40px;height:40px}
}

/* =====================================================================
   v0.15 · feedback 11/10 15:05: đường cong vẽ từ điểm đầu, đồng tiền đứng yên, expand mượt & chậm hơn
   ===================================================================== */
:root{--ease-x:cubic-bezier(.65,.05,.36,1)}
/* đường cong: pathLength=1 nên nét vẽ luôn bắt đầu từ điểm đầu, không phụ thuộc độ dài thật */
.ascend__glow{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1) .45s}
.ascend.is-in .ascend__glow{stroke-dashoffset:0}
.ascend__run{stroke-dasharray:.065 1.2;stroke-dashoffset:.065}
.ascend.is-in .ascend__run{animation:ascRun2 4.8s cubic-bezier(.45,0,.25,1) 3.1s infinite}
@keyframes ascRun2{from{stroke-dashoffset:.065}to{stroke-dashoffset:-1}}
/* đồng tiền: lớp riêng, vị trí cố định theo bố cục mặc định; hiện khi nét vẽ chạm tới */
.ascend__nodes{position:absolute;left:0;right:0;top:0;height:0;z-index:4;pointer-events:none}
.anode{--tc:#E6EAF0;position:absolute;left:var(--x,0);top:var(--y,0);width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--tc) 55%,#fff) 0%,var(--tc) 38%,color-mix(in srgb,var(--tc) 40%,#0B1C44) 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 0 0 5px color-mix(in srgb,var(--tc) 22%,transparent),0 0 22px 6px color-mix(in srgb,var(--tc) 70%,transparent),0 0 46px 10px color-mix(in srgb,var(--tc) 28%,transparent);
  opacity:0;transform:scale(.4);transition:opacity .7s var(--ease) var(--nd,0s),transform .9s var(--spring) var(--nd,0s),box-shadow .8s var(--ease)}
.anode--dia{--tc:#9FE3E6}.anode--eli{--tc:#F0C3BA}
.anode svg{width:16px;height:16px;fill:#0B1C44;opacity:.9}
.anode::before{content:"";position:absolute;left:50%;top:30px;width:1.5px;height:var(--drop,0px);margin-left:-.75px;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 95%,#fff),color-mix(in srgb,var(--tc) 35%,transparent));transition:transform 1s var(--ease) calc(var(--nd,0s) + .35s),opacity .8s var(--ease)}
.anode::after{content:"";position:absolute;left:50%;top:calc(30px + var(--drop,0px));width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 22%,transparent),0 0 10px 2px color-mix(in srgb,var(--tc) 60%,transparent);opacity:0;transition:opacity .6s var(--ease) calc(var(--nd,0s) + 1.1s)}
.ascend.is-in .anode{opacity:1;transform:none;animation:nodePulse 3.2s ease-in-out calc(var(--nd,0s) + 1s) infinite}
.ascend.is-in .anode::before{transform:scaleY(1)}
.ascend.is-in .anode::after{opacity:1}
.anode.is-on{box-shadow:0 0 0 1.5px #fff,0 0 0 6px color-mix(in srgb,var(--tc) 30%,transparent),0 0 30px 9px color-mix(in srgb,var(--tc) 85%,transparent),0 0 70px 16px color-mix(in srgb,var(--tc) 35%,transparent)}
.ascend.is-in .anode.is-off::before,.ascend.is-in .anode.is-off::after{opacity:.15;transition-delay:0s}
@media (min-width:768px){.step__node{display:none}}
@media (max-width:767px){.ascend__nodes{display:none}}
@media (prefers-reduced-motion:reduce){.anode,.anode::before,.anode::after,.ascend__glow{transition:none!important;animation:none!important}.anode{opacity:1;transform:none}.anode::before{transform:none}.anode::after{opacity:1}.ascend__glow{stroke-dashoffset:0}}
/* thẻ: mở rộng chậm hơn ~30% nữa, easing uyển chuyển; lớp nền tối + hoạ tiết mờ dần bằng opacity (không đổi gradient đột ngột) */
.step{transition:flex-grow 1.4s var(--ease-x),transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.ascend.is-in .step{transition:flex-grow 1.4s var(--ease-x),transform 1.1s var(--ease) var(--dl,0s),opacity 1.1s var(--ease) var(--dl,0s)}
.step__more{transition:grid-template-rows 1.25s var(--ease-x),opacity .9s var(--ease),margin 1.25s var(--ease-x)}
.step__more > div{transition:padding 1.25s var(--ease-x)}
.step__head{transition:padding 1.2s var(--ease-x),border-color 1.2s}
.step__tag{transition:color 1s var(--ease)}
.step:not(.is-active) .step__more{transition:grid-template-rows 1.15s var(--ease-x),opacity .45s var(--ease),margin 1.15s var(--ease-x)}
@media (min-width:768px){
  .step__media{transition:left 1.4s var(--ease-x)}
  .step.is-active .step__frame{background:linear-gradient(135deg,#132A5C 0%,#0B1C44 55%)}
  .step.is-active .step__frame::after,.step__frame::after{opacity:0!important}
  .step.is-active .step__media::after{background:linear-gradient(180deg,rgba(6,18,47,0) 40%,rgba(6,18,47,.78) 66%,#07142F 100%)}
  .step.is-active .step__media img{filter:brightness(.92)}
  .step__body,.step.is-active .step__body{right:auto;width:min(100%,400px);max-width:none;justify-content:flex-end;padding:60px clamp(22px,2.2vw,30px) clamp(22px,2.2vw,28px)}
  .step__body::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:128%;pointer-events:none;
    background:linear-gradient(rgba(4,10,30,.55),rgba(4,10,30,.55)),var(--pat) left center/cover no-repeat,#050C24;
    -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent 100%);mask-image:linear-gradient(90deg,#000 60%,transparent 100%);
    opacity:0;transition:opacity 1.3s var(--ease-x)}
  .step.is-active .step__body::before{opacity:1}
  .step.is-active .step__more > div{background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 24%,rgba(4,10,30,.84)),rgba(4,10,30,.86));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 26%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .step.is-active .step__more{margin-top:16px}
}
/* 2 text CTA trong thẻ mở rộng */
.step__links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--tc) 18%,transparent)}
.step__links a{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--vtb-rose);transition:color .3s}
.step__links a .ic{transition:transform .35s var(--ease)}
.step__links a:hover{color:#F6E4DE}.step__links a:hover .ic{transform:translateX(3px)}
.step-pop__panel .step__links a{font-size:.875rem}
/* mép trái ảnh luôn mềm khi trượt (không còn cạnh cắt cứng lúc thu gọn) */
@property --mf{syntax:"<percentage>";inherits:false;initial-value:0%}
@media (min-width:768px){
  .step__media{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 var(--mf));mask-image:linear-gradient(90deg,transparent 0%,#000 var(--mf));transition:left 1.4s var(--ease-x),--mf 1.4s var(--ease-x)}
  .step.is-active .step__media{--mf:34%}
}

/* =====================================================================
   v0.16 · mobile polish (21:19)
   ===================================================================== */
@media (max-width:767px){
  /* carousel: chừa đủ chỗ cho bóng đổ, không bị cắt ngang dưới chấm slide */
  .mcar{padding-bottom:76px}
  .mdots{margin-top:-46px;position:relative;z-index:1}
  .mcard,.mcard.is-active{box-shadow:inset 0 0 0 1px var(--tl),0 22px 40px -22px var(--glow)}
  .mcard:not(.is-active){box-shadow:inset 0 0 0 1px var(--tl)}
  .conditions__grid{padding-bottom:64px}
  .cdots{margin-top:-38px;position:relative;z-index:1}
  /* CTA đặc quyền: 1 text link */
  .mcard .mcard__link,.mcard.has-more .mcard__link{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:16px;padding:6px 0;font-size:.875rem;font-weight:600;color:var(--vtb-rose);background:none;box-shadow:none}
  .mcard__link .ic{transition:transform .35s var(--ease)}
  .mcard__link:active .ic{transform:translateX(3px)}
  /* thẻ hành trình bấm được cả thân thẻ */
  .step{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .step:active .step__frame{transform:scale(.985)}
  .step__frame{transition:transform .3s var(--ease)}
}
/* popup hạng: biến màu mặc định (Platinum), ảnh chuyển mượt vào nền, không lộ chữ/hoạ tiết sau ảnh */
.step-pop{--tc:#E6EAF0;--tint:#8D99AF;--g1:#FFFFFF;--g2:#9AA4B4;--g3:#E6EAF0}
.step-pop.step--dia{--tc:#9FE3E6;--tint:#2E8C98;--g1:#F4FEFF;--g2:#4FB3BC;--g3:#C2F0F1}
.step-pop.step--eli{--tc:#F0C3BA;--tint:#8E2F3C;--g1:#FFF4F0;--g2:#B5635F;--g3:#F0C3BA}
.pop[data-tier] .pop__media{aspect-ratio:4/3.4;margin-bottom:-72px}
.pop[data-tier] .pop__media img{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.55) 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.55) 72%,transparent 100%)}
.pop[data-tier] .pop__media::after{background:linear-gradient(180deg,rgba(11,26,63,0) 50%,rgba(11,26,63,.6) 80%,#0B1A3F 100%)}
.pop[data-tier] .pop__body{position:relative;z-index:1}
.step-pop__pat{top:40px;opacity:.16;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,rgba(0,0,0,.4) 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,rgba(0,0,0,.4) 100%)}
.pop[data-tier] .pop__media::after{display:none}
.pop[data-tier] .pop__media{margin-bottom:-90px}
.step-pop__pat{top:90px;bottom:-28px}
@media (max-width:767px){
  /* điều kiện trong carousel: số không tràn mép thẻ */
  .conditions__grid .tcard{padding:20px 18px}
  .conditions__grid .crit li:not(.crit__or){padding:10px 12px;gap:8px}
  .conditions__grid .crit b{gap:.25em;flex-wrap:nowrap}
  .conditions__grid .crit b .n{font-size:1.5rem}
  .conditions__grid .crit i{font-size:.75rem}
}
.pop[data-tier] .pop__media img{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.35) 68%,transparent 88%);mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.35) 68%,transparent 88%)}

/* =====================================================================
   v0.17 · mobile ổn định khi vuốt + menu bar không đè hero
   ===================================================================== */
html,body{overflow-x:clip}
/* các dải trượt ngang: chỉ trượt ngang, không xê dịch dọc, mỗi lần vuốt dừng đúng 1 thẻ */
@media (max-width:767px){
  .pillars__list,.privileges__grid,.mcar,.conditions__grid{overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-behavior:smooth}
  .pillars__list{padding-top:10px;padding-bottom:16px}
  .pillar,.pcard,.mcard,.conditions__grid .tcard{scroll-snap-stop:always}
  .pop__scroll{overflow-x:hidden;touch-action:pan-y}
  .pop__panel{overscroll-behavior:contain}
}
/* menu bar: lúc đầu là thanh ngang nằm trên hero (không đè), cuộn xuống mới thu thành island */
:root{--barh:76px}
@media (max-width:767px){:root{--barh:64px}}
.hero{margin-top:var(--barh)}
@media (min-width:768px){.hero{min-height:calc(100dvh - var(--barh))}.hero__inner{padding-top:72px}}
.island{transition:width .8s var(--spring),height .6s var(--spring),top .6s var(--ease),border-radius .6s var(--ease),background-color .6s var(--ease),padding .6s var(--ease),box-shadow .6s var(--ease)}
.island:not(.is-compact),.island:not(.is-compact){top:0;width:100%;height:var(--barh);border-radius:0;padding:0 max(24px,calc((100% - 1200px) / 2 + 20px));background:rgba(7,17,45,.97);box-shadow:inset 0 -1px 0 rgba(211,160,151,.16)}
@media (max-width:767px){
  .island:not(.is-compact){top:0;width:100%;height:var(--barh);padding:0 12px 0 20px}
}

/* v0.17b · ?figma : trạng thái tĩnh cuối cùng để import vào Figma (html.to.design), tắt mọi chuyển động */
html.figma-static *,html.figma-static *::before,html.figma-static *::after{animation:none!important;transition:none!important}
html.figma-static .reveal,html.figma-static .hero [data-in],html.figma-static .ascend .step{opacity:1!important;transform:none!important;filter:none!important}
html.figma-static .ascend__glow{stroke-dashoffset:0!important}
html.figma-static .ascend__run{display:none}
html.figma-static .anode{opacity:1!important;transform:none!important}
html.figma-static .anode::before{transform:none!important}
html.figma-static .anode::after{opacity:1!important}
html.figma-static .dock{display:none}
html.figma-static .step__ring{background:linear-gradient(160deg,var(--g1) 0%,var(--g3) 32%,color-mix(in srgb,var(--g2) 65%,var(--g3)) 68%,var(--g1) 100%)}

/* v0.18b · ?figma: thay hiệu ứng CSS mà plugin html.to.design không đọc được (mask, conic + mask-composite, clip-path, chữ gradient, backdrop-filter, blend) bằng tương đương Figma hiểu được */
html.figma-static *,html.figma-static *::before,html.figma-static *::after{-webkit-mask:none!important;mask:none!important;-webkit-mask-image:none!important;mask-image:none!important;clip-path:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important}
/* góc vát → bo 4px; bỏ vệt sáng góc vát và các viền chạy conic */
html.figma-static :is(.cut,.tcard,.xcard,.pcard,.ccard,.pillar,.contact__panel){border-radius:6px}
html.figma-static :is(.xcard,.ccard,.contact__panel,.tcard,.pcard)::after,html.figma-static .pillar::before,html.figma-static .mcol--eli::after,html.figma-static .tcard__glow,html.figma-static .step__glass{display:none!important}
html.figma-static .mcol--eli{box-shadow:inset 0 0 0 1px rgba(211,160,151,.4)}
html.figma-static .tcard--eli{box-shadow:inset 0 0 0 1px rgba(227,175,166,.4)}
/* viền thẻ hành trình: border thường thay cho conic + mask-composite */
html.figma-static .step__ring{background:none!important;padding:0;border:2px solid var(--g3);border-radius:18px;opacity:1}
/* chữ gradient → màu đặc */
html.figma-static .hero h1{background:none!important;-webkit-text-fill-color:currentColor;color:#F1F3F4}
html.figma-static .hero h1 span:last-child{color:#E3B3A8}
html.figma-static .crit b .n{background:none!important;-webkit-text-fill-color:currentColor;color:var(--tc);filter:none!important}
/* ảnh mờ dần: thay mask bằng lớp gradient phủ */
html.figma-static .hero__media img{mix-blend-mode:normal!important}
html.figma-static .hero__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0A1838 0%,rgba(10,24,56,.85) 22%,rgba(10,24,56,0) 52%)}
@media (max-width:767px){html.figma-static .hero__media::after{background:linear-gradient(180deg,rgba(10,24,56,0) 55%,#0A1838 100%)}}
html.figma-static .contact__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0B1A3F 0%,rgba(11,26,63,0) 60%)}
/* nền kính → nền đặc tương đương */
html.figma-static .island{background:#07112D!important}
html.figma-static .app{background:rgba(4,12,34,.85)}
html.figma-static .ascend__glow{filter:none}
@media (min-width:768px){
  html.figma-static .hero__media::after{display:none}
  html.figma-static .hero__media picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#081635 0%,rgba(8,22,53,.75) 12%,rgba(8,22,53,0) 30%),linear-gradient(0deg,#0A1838 0%,rgba(10,24,56,0) 18%),linear-gradient(270deg,rgba(8,22,53,.8) 0%,rgba(8,22,53,0) 9%)}
}
html.figma-static .contact__bg{inset:0!important}
html.figma-static .contact__bg::after{background:linear-gradient(90deg,#0A1A40 0%,rgba(10,26,64,.92) 38%,rgba(10,26,64,.2) 75%,rgba(10,26,64,0) 100%)}
@media (min-width:768px){html.figma-static .hero__media picture::after{background:linear-gradient(90deg,#08173A 0%,#08173A 4%,rgba(8,23,58,.82) 14%,rgba(8,23,58,.35) 26%,rgba(8,23,58,0) 38%),linear-gradient(0deg,#0A1838 0%,rgba(10,24,56,0) 18%),linear-gradient(270deg,rgba(8,22,53,.8) 0%,rgba(8,22,53,0) 9%)}}

/* ===== v0.19 · tagline hạng: UPPERCASE · Bold · tracking 2% ===== */
.step__tag,.tcard__tag{font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.875rem;line-height:1.5}
.tcard__tag{color:#F1F3F4}
@media (max-width:767px){.step__tag,.tcard__tag{font-size:.8125rem}}

/* ===== v0.20 · Feedback V1 (15/10/2026) ===== */
/* Chữ xuống dòng đều */
h1,h2,h3,.h2,.lead--strong{text-wrap:balance}
p,li,small{text-wrap:pretty}

/* Header không che hộp chat: dock nổi trên header khi mở, hộp chat tự co theo chiều cao màn hình */
.dock:has(.chat.is-open){z-index:60}
.chat{max-height:calc(100dvh - 250px);overflow-y:auto;overscroll-behavior:contain}

/* Hero KV: bỏ blend luminosity (nguồn gốc vẻ xám xịt), giữ màu thật của ảnh */

/* Dành riêng KHƯT: tiêu đề và mô tả dàn đủ chiều ngang; thẻ dạng mục lục gọn, mũi tên trỏ xuống */
.ex-head{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(40px,6vw,104px);align-items:end}
.ex-head .coin-sign{grid-column:1;margin-bottom:0}
.ex-head .h2{grid-column:1}
.ex-head__copy{grid-column:2;grid-row:1 / span 2;display:grid;gap:14px;align-self:end}
.exclusive__grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;min-height:0;gap:clamp(14px,1.4vw,20px)}
.exclusive .xcard{min-height:0;display:grid;grid-template-columns:clamp(92px,8vw,116px) minmax(0,1fr);align-items:center;gap:18px;padding:14px 64px 14px 14px;background:linear-gradient(160deg,rgba(241,243,244,.055),rgba(241,243,244,.015));--cut:14px;transition:background-color .5s var(--ease)}
.exclusive .xcard::before{display:none}
.xcard__img{position:relative;aspect-ratio:1;overflow:hidden;border-radius:6px}
.exclusive .xcard img{position:absolute;inset:0;z-index:0;filter:saturate(.85) brightness(.92)}
.xcard__txt{display:grid;gap:6px;min-width:0}
.exclusive .xcard h3{font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.3;letter-spacing:-.01em}
.exclusive .xcard p{margin:0;font-size:.875rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.exclusive .xcard__go{top:50%;right:16px;width:38px;height:38px;font-size:1rem;margin-top:-19px;transition:transform .5s var(--ease),background-color .4s,color .4s}
.exclusive .xcard:hover .xcard__go{transform:translateY(4px)}
.exclusive .xcard:hover{background-color:rgba(241,243,244,.035)}
@media (max-width:1180px){.exclusive__grid{grid-template-columns:1fr}.exclusive .xcard{grid-template-columns:96px minmax(0,1fr)}}
@media (max-width:767px){
  .ex-head{grid-template-columns:1fr}.ex-head__copy{grid-column:1;grid-row:auto}
  .exclusive .xcard,.exclusive .xcard:not(.xcard--lg){min-height:0;padding:12px 56px 12px 12px;grid-template-columns:84px minmax(0,1fr);gap:14px}
  .exclusive .xcard h3{font-size:1.0625rem}
  .exclusive .xcard__go{width:34px;height:34px;right:12px;margin-top:-17px;top:50%}
}

/* Hành trình: tagline, hover mượt (thời lượng ngắn hơn, đường cong ra mượt, bỏ blur trong khối đang co giãn) */
.step{transition:flex-grow .95s cubic-bezier(.22,1,.36,1),transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.ascend.is-in .step{transition:flex-grow .95s cubic-bezier(.22,1,.36,1),transform 1.1s var(--ease) var(--dl,0s),opacity 1.1s var(--ease) var(--dl,0s)}
.step__frame{contain:layout paint}
@media (min-width:768px){
  .step__media{transition:left .95s cubic-bezier(.22,1,.36,1),--mf .95s cubic-bezier(.22,1,.36,1)}
  .step__body::before{transition:opacity .8s cubic-bezier(.22,1,.36,1)}
  .step.is-active .step__more > div{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 22%,#06102C),#050C24 92%)}
  .step__more{transition:grid-template-rows .8s cubic-bezier(.22,1,.36,1),opacity .55s var(--ease) .12s,margin .8s cubic-bezier(.22,1,.36,1)}
  .step:not(.is-active) .step__more{transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .25s var(--ease),margin .55s cubic-bezier(.22,1,.36,1)}
  .step__media img{transition:filter .8s var(--ease),transform 1.2s var(--ease),object-position .95s cubic-bezier(.22,1,.36,1)}
}

/* Đặc quyền: thẻ "Dịch vụ ngân hàng" cũng ẩn/hiện mô tả khi hover như các thẻ còn lại */
@media (hover:hover) and (min-width:768px){
  .pcard--hero p{max-height:0;opacity:0}
  .pcard--hero:hover p,.pcard--hero:focus-within p{max-height:6em;opacity:1}
}

/* Đặc quyền theo hạng: thu gọn mặc định, bấm để mở */
.matrix__intro{max-width:none;grid-template-columns:minmax(0,640px) auto;align-items:end;column-gap:32px}
.matrix__intro h3,.matrix__intro p{grid-column:1}
.mfold__btn{grid-column:2;grid-row:1 / span 2;align-self:end;justify-self:end;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font:inherit;font-size:.9375rem;font-weight:600;color:var(--text);background:rgba(241,243,244,.04);box-shadow:inset 0 0 0 1px rgba(233,197,187,.45);cursor:pointer;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.mfold__btn:hover{background:rgba(233,197,187,.1);box-shadow:inset 0 0 0 1px rgba(233,197,187,.8)}
.mfold__btn:focus-visible{outline:2px solid var(--vtb-rose);outline-offset:3px}
.mfold__btn .ic{color:var(--vtb-rose);transition:transform .5s var(--ease)}
.mfold__btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.mfold__close,.mfold__btn[aria-expanded="true"] .mfold__open{display:none}
.mfold__btn[aria-expanded="true"] .mfold__close{display:inline}
.mfold{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .8s cubic-bezier(.22,1,.36,1),opacity .5s var(--ease)}
.mfold.is-open{grid-template-rows:1fr;opacity:1}
.mfold__in{min-height:0;overflow:hidden}
.mfold:not(.is-open) .mfold__in{visibility:hidden;transition:visibility 0s .8s}
.mfold.is-open .mfold__in{overflow:visible}
@media (max-width:767px){
  .matrix__intro{grid-template-columns:1fr}
  .mfold__btn{grid-column:1;grid-row:auto;justify-self:stretch;justify-content:center;margin-top:8px}
}

/* Sản phẩm dịch vụ tiêu biểu: mục riêng */
.products{padding-top:clamp(56px,6vw,96px)}
.products .cards{margin-top:0}

/* Điều kiện: một đoạn mô tả đồng nhất cỡ/độ đậm, số 01 vẫn nhấn màu */
.sec-head .cd-lead{color:var(--text-2)}
.sec-head .cd-lead b{color:var(--vtb-rose);font-weight:700}
/* Hàng tiêu chí: cho phép xuống dòng có kiểm soát (bản EN dài hơn) */
.crit li:not(.crit__or){flex-wrap:wrap;row-gap:2px;column-gap:10px}
.crit b{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;white-space:normal;row-gap:0}
.crit b i{white-space:nowrap}
.conditions__grid .crit b{flex-wrap:wrap}

/* Liên hệ: khối CTA hình chữ nhật, thông tin liên hệ nằm dưới */
.contact__panel{clip-path:none;border-radius:0;background:none;box-shadow:none;padding:0;overflow:visible}
.contact__panel::before,.contact__panel::after{display:none}
.contact__hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);padding:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 48px;background:linear-gradient(110deg,#0A1A40 0%,#0B2457 55%,#123A7A 100%);box-shadow:inset 0 0 0 1px rgba(211,160,151,.22),0 30px 60px -36px rgba(0,0,0,.7)}
.contact__hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0A1A40 0%,rgba(10,26,64,.92) 34%,rgba(10,26,64,.25) 70%,rgba(10,26,64,.1) 100%)}
.contact__hero .contact__bg{inset:0 0 0 30%;z-index:-2}
.contact__hero .coin-sign{grid-column:1 / -1;margin-bottom:0}
.contact__hero .h2{grid-column:1;max-width:17ch}
.contact__hero .contact__intro{grid-column:2;margin:0;align-self:end}
.contact__hero .contact__intro .btn{margin:0}
.contact__panel > .contact__grid{margin-top:clamp(36px,4vw,56px)}
@media (max-width:767px){
  .contact .container{width:auto}
  .contact__panel{padding:0}
  .contact__hero{grid-template-columns:1fr;padding:36px 22px 28px}
  .contact__hero .contact__intro{grid-column:1;width:100%}
  .contact__hero .h2{font-size:1.75rem}
  .contact__panel > .contact__grid{margin-top:24px}
  .contact__panel .social{padding:0}
}
/* v0.20b · exclusive cards: full text, image strip on top (desktop) */
.exclusive .xcard p{display:block;-webkit-line-clamp:unset;overflow:visible}
@media (min-width:1181px){
  .exclusive .xcard{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding:14px 14px 22px;gap:16px}
  .exclusive .xcard__img{aspect-ratio:16/7}
  .exclusive .xcard__txt{padding:0 8px 0 8px;padding-right:52px}
  .exclusive .xcard__go{top:auto;bottom:20px;right:18px;margin-top:0}
}

/* ===== v0.21 · Feedback 15/10 (10:49) ===== */

/* --- Popup mobile: lớp phủ 70%, vẫn thấy nội dung bên dưới, không tương tác được --- */
@media (max-width:767px){
  .pop__scrim{background:rgba(2,7,22,.7);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* --- Liên hệ: toàn bộ nội dung nằm trong một khung --- */
.contact__panel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);padding:0;background:linear-gradient(160deg,#0B1F4D 0%,#0A1A40 45%,#081536 100%);box-shadow:inset 0 0 0 1px rgba(211,160,151,.22),0 40px 80px -48px rgba(0,0,0,.75)}
.contact__hero{border-radius:0;box-shadow:none;background:transparent;padding:clamp(40px,5vw,72px) clamp(28px,5vw,72px) clamp(32px,4vw,48px)}
.contact__hero::before{background:linear-gradient(90deg,#0A1A40 0%,rgba(10,26,64,.9) 34%,rgba(10,26,64,.3) 70%,rgba(10,26,64,.15) 100%),linear-gradient(180deg,rgba(10,26,64,0) 55%,#0A1A40 100%)}
.contact__panel > .contact__grid{margin:0;padding:clamp(28px,3.4vw,44px) clamp(28px,5vw,72px) 0;border-top:1px solid rgba(211,160,151,.18)}
.contact__panel .app{background:rgba(4,12,34,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
.contact__panel > .social{margin:0;padding:clamp(24px,3vw,36px) clamp(28px,5vw,72px) clamp(32px,4vw,48px)}
@media (max-width:767px){
  .contact .container{width:auto;padding:0 var(--gutter)}
  .contact__panel{border-radius:16px}
  .contact__hero{padding:32px 20px 24px}
  .contact__panel > .contact__grid{padding:20px 16px 0;margin:0}
  .contact__panel .clist{gap:0}
  .contact__panel .citem{background:none;box-shadow:none;border-radius:0;padding:14px 4px;border-top:1px solid rgba(241,243,244,.09)}
  .contact__panel .citem--hl{border-top:0;padding-top:4px}
  .contact__panel .clist li:nth-child(2),.contact__panel .clist li:nth-child(4){padding-right:10px}
  .contact__panel .app{margin-top:6px;background:rgba(4,12,34,.4)}
  .contact__panel > .social{padding:20px 20px 28px}
}

/* --- Dành riêng KHƯT (mobile): slider thẻ lớn, thoáng --- */
.xdots{display:none}
@media (max-width:767px){
  .exclusive .container{overflow:visible}
  .exclusive__grid{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);margin:0 calc(var(--gutter)*-1);padding:4px var(--gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .exclusive__grid::-webkit-scrollbar{display:none}
  .exclusive .xcard,.exclusive .xcard:not(.xcard--lg){scroll-snap-align:start;display:block;position:relative;min-height:0;padding:0;aspect-ratio:4/5;background:none;--cut:16px}
  .exclusive .xcard__img{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
  .exclusive .xcard img{filter:saturate(.9) brightness(.9);transition:transform 1.2s var(--ease)}
  .exclusive .xcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,34,0) 35%,rgba(4,12,34,.55) 62%,rgba(4,12,34,.94) 100%)}
  .exclusive .xcard__txt{position:absolute;left:0;right:0;bottom:0;padding:22px 64px 22px 20px;gap:8px}
  .exclusive .xcard h3{font-size:1.25rem;line-height:1.25}
  .exclusive .xcard p{font-size:.875rem;line-height:1.5;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .exclusive .xcard__go{top:auto;bottom:22px;right:16px;margin:0;width:38px;height:38px;background:rgba(4,12,34,.45)}
  .xdots{display:flex;justify-content:center;gap:6px;margin-top:16px}
  .xdots i{width:6px;height:6px;border-radius:99px;background:rgba(241,243,244,.25);transition:width .45s var(--ease),background-color .45s var(--ease)}
  .xdots i.is-on{width:22px;background:var(--vtb-rose)}
}

/* --- Đặc quyền: gộp thành bộ chọn theo từng nhóm đặc quyền --- */
.privileges .swipe-hint{display:none}
.privileges .matrix-wrap{margin-top:clamp(20px,2.4vw,28px);padding:0;border:0;background:none}
.privileges .matrix-wrap .matrix__note{margin:0;color:var(--text-3);font-size:.875rem}
.privileges .mcta{margin-top:clamp(28px,3vw,40px)}
.pvx{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);margin-top:clamp(36px,4vw,56px);align-items:start}
.pvx__nav{display:flex;flex-direction:column;border-top:1px solid rgba(241,243,244,.1);position:sticky;top:110px}
.pvx__tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:8px;padding:18px 8px 18px 0;border-bottom:1px solid rgba(241,243,244,.1);color:var(--text-3);transition:color .45s var(--ease),padding-left .55s var(--ease)}
.pvx__tab::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--grad-rose-d);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.pvx__n{font-size:.8125rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:inherit;opacity:.8}
.pvx__name{font-size:1.0625rem;font-weight:500;line-height:1.35;text-wrap:balance}
.pvx__tab:hover{color:var(--text-2)}
.pvx__tab[aria-selected="true"]{color:var(--text);padding-left:10px}
.pvx__tab[aria-selected="true"] .pvx__n{color:var(--vtb-rose);opacity:1}
.pvx__tab[aria-selected="true"]::before{transform:scaleX(1)}
.pvx__tab:focus-visible{outline:2px solid var(--vtb-rose);outline-offset:2px}
.pvx__stage{display:grid}
.pvx__panel{grid-area:1/1;display:grid;gap:14px;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility 0s linear .55s}
.pvx__panel.is-on{opacity:1;visibility:visible;transition:opacity .6s var(--ease) .05s,visibility 0s}
.pvx__media{--cut:18px;position:relative;margin:0;aspect-ratio:16/8;overflow:hidden;isolation:isolate;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.pvx__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.06);filter:saturate(.85) brightness(.88);transition:transform 1.6s var(--ease)}
.pvx__panel.is-on .pvx__media img{transform:scale(1)}
.pvx__media::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,12,34,.88) 0%,rgba(4,12,34,.55) 40%,rgba(4,12,34,0) 72%),linear-gradient(0deg,rgba(4,12,34,.5) 0%,rgba(4,12,34,0) 45%)}
.pvx__media figcaption{position:absolute;left:0;bottom:0;max-width:min(30rem,62%);padding:clamp(24px,3vw,40px);display:grid;gap:10px}
.pvx__count{font-size:.8125rem;letter-spacing:.06em;color:var(--vtb-rose);font-variant-numeric:tabular-nums}
.pvx__media h3{font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.pvx__media p{color:var(--text-2);font-size:.9375rem;line-height:1.6;text-wrap:pretty}
.pvx__media figcaption>*{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.pvx__panel.is-on .pvx__media figcaption>*{opacity:1;transform:none}
.pvx__panel.is-on .pvx__media figcaption>:nth-child(2){transition-delay:.06s}
.pvx__panel.is-on .pvx__media figcaption>:nth-child(3){transition-delay:.12s}
.pvx__tiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pvx__tier{--tc:#E4E8EE;--tl:rgba(213,219,228,.18);--tb:rgba(213,219,228,.05);position:relative;padding:20px 20px 22px;border-radius:6px;background:var(--tb);box-shadow:inset 0 0 0 1px var(--tl);display:grid;align-content:start;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .8s var(--ease),background-color .5s,box-shadow .5s}
.pvx__tier::before{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:var(--mat-plat);border-radius:0 0 2px 2px}
.pvx__tier--dia{--tc:#9FE3E6;--tl:rgba(110,205,210,.22);--tb:rgba(110,205,210,.06)}
.pvx__tier--dia::before{background:var(--mat-dia)}
.pvx__tier--eli{--tc:var(--g-rose-lo);--tl:rgba(211,160,151,.34);--tb:linear-gradient(180deg,rgba(211,160,151,.14),rgba(211,160,151,.04))}
.pvx__tier--eli{background:var(--tb)}
.pvx__tier--eli::before{background:var(--mat-eli)}
.pvx__panel.is-on .pvx__tier{opacity:1;transform:none}
.pvx__panel.is-on .pvx__tier--plat{transition-delay:.1s}
.pvx__panel.is-on .pvx__tier--dia{transition-delay:.17s}
.pvx__panel.is-on .pvx__tier--eli{transition-delay:.24s}
.pvx__tier b{font-size:1rem;font-weight:600;color:var(--tc);letter-spacing:.005em}
.pvx__v{font-size:.9375rem;line-height:1.6;color:var(--text);text-wrap:pretty}
.pvx__tier.is-none .pvx__v,.pvx__na{color:var(--text-3)}
.pvx[data-focus] .pvx__tier{opacity:.5}
.pvx[data-focus="plat"] .pvx__tier--plat,.pvx[data-focus="dia"] .pvx__tier--dia,.pvx[data-focus="eli"] .pvx__tier--eli{opacity:1;box-shadow:inset 0 0 0 1px var(--tc),0 20px 40px -24px var(--tc)}
@media (max-width:1100px){.pvx{grid-template-columns:1fr}.pvx__nav{position:static;flex-direction:row;flex-wrap:wrap;border:0;gap:8px}
  .pvx__tab{grid-template-columns:auto auto;padding:10px 16px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(241,243,244,.16)}
  .pvx__tab::before{display:none}.pvx__tab[aria-selected="true"]{padding-left:16px;background:rgba(211,160,151,.14);box-shadow:inset 0 0 0 1px rgba(211,160,151,.5)}
  .pvx__name{font-size:.9375rem}}
@media (max-width:767px){
  .pvx{margin-top:28px;gap:16px}
  .pvx__nav{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(var(--gutter)*-1);padding:2px var(--gutter);scrollbar-width:none}
  .pvx__nav::-webkit-scrollbar{display:none}
  .pvx__tab{flex:none;scroll-snap-align:start;padding:9px 14px;white-space:nowrap}
  .pvx__n{display:none}
  .pvx__name{font-size:.875rem}
  .pvx__media{aspect-ratio:4/3.6;--cut:14px}
  .pvx__media::before{background:linear-gradient(180deg,rgba(4,12,34,0) 30%,rgba(4,12,34,.6) 60%,rgba(4,12,34,.94) 100%)}
  .pvx__media figcaption{max-width:none;padding:20px;gap:8px}
  .pvx__media h3{font-size:1.5rem}
  .pvx__media p{font-size:.875rem}
  .pvx__tiers{grid-template-columns:1fr;gap:8px}
  .pvx__tier{grid-template-columns:84px 1fr;align-items:baseline;gap:12px;padding:14px 16px}
  .pvx__tier::before{left:0;right:auto;top:14px;bottom:14px;width:2px;height:auto;border-radius:0 2px 2px 0}
  .pvx__tier b{font-size:.9375rem}
  .pvx__v{font-size:.875rem;line-height:1.55}
  .privileges .mcta{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){.pvx__panel,.pvx__media img,.pvx__media figcaption>*,.pvx__tier{transition:none!important;transform:none!important}}

/* ===== v0.22 · Tiêu đề đồng bộ, list đặc quyền có mũi tên, icon hạng ===== */
.ex-head__copy .link-arrow{justify-self:start;margin-top:6px}
.ex-head__copy .lead{max-width:62ch}
/* List nhóm đặc quyền: mũi tên phải, mục đang chọn sáng rose gold */
.pvx__tab{grid-template-columns:34px 1fr 20px;padding-right:4px;border-radius:0}
.pvx__arr{font-size:1rem;color:var(--text-3);opacity:.55;justify-self:end;align-self:center;transition:transform .55s var(--ease),color .45s var(--ease),opacity .45s}
.pvx__tab:hover .pvx__arr{opacity:1;transform:translateX(3px)}
.pvx__tab[aria-selected="true"]{padding-left:14px;background:linear-gradient(90deg,rgba(211,160,151,.16) 0%,rgba(211,160,151,.04) 70%,rgba(211,160,151,0) 100%)}
.pvx__tab[aria-selected="true"] .pvx__name{background:var(--grad-rose-d);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.pvx__tab[aria-selected="true"] .pvx__arr{color:var(--vtb-rose);opacity:1;transform:translateX(4px)}
.pvx__tab::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--grad-rose);transform:scaleY(0);transition:transform .55s var(--ease)}
.pvx__tab[aria-selected="true"]::after{transform:scaleY(1)}
.pvx__tab:focus{outline:none}
.pvx__tab:focus-visible{outline:1px solid rgba(211,160,151,.7);outline-offset:-1px}
/* Icon hạng trong ô so sánh */
.pvx__tier b{display:flex;align-items:center;gap:10px}
.pvx__tier .emblem{width:30px;height:30px;font-size:.9rem;flex:none}
.pvx__tier--plat .emblem{--tc:#E6EAF0;background:radial-gradient(110% 80% at 25% 8%,#FFFFFF 0%,rgba(255,255,255,0) 50%),radial-gradient(90% 70% at 80% 100%,#FFFFFF 0%,rgba(255,255,255,0) 55%),#CDD3DC}
.pvx__tier--dia .emblem{--tc:#9FE3E6;background:radial-gradient(110% 80% at 25% 8%,#F2FFFF 0%,rgba(242,255,255,0) 50%),radial-gradient(90% 70% at 80% 100%,#E4FFFF 0%,rgba(228,255,255,0) 55%),#8FE6E8}
.pvx__tier--eli .emblem{--tc:#F0C3BA;background:linear-gradient(180deg,#FFF8F6 0%,#F2C9C1 28%,#DD8F88 56%,#ECBDB5 82%,#FBE7E3 100%)}
.pvx__tier.is-none .emblem{opacity:.55}
@media (max-width:1100px){
  .pvx__tab{grid-template-columns:auto auto}
  .pvx__arr{display:none}
  .pvx__tab[aria-selected="true"]{background:rgba(211,160,151,.14)}
  .pvx__tab::after{display:none}
}
@media (max-width:767px){
  .pvx__tier{grid-template-columns:104px 1fr}
  .pvx__tier b{gap:8px}
  .pvx__tier .emblem{width:24px;height:24px;font-size:.75rem}
}

/* ===== v0.23 · 15/10 12:47 ===== */
/* Hành trình (desktop): khung text trong thẻ có bề ngang cố định, không reflow theo thẻ đang giãn
   → chiều cao ổn định, hộp chỉ được "lộ" dần theo mép thẻ, không còn khựng */
@media (min-width:768px){
  .step__more{overflow:hidden;min-width:0}
  .step__more > div{width:calc(400px - 2*clamp(22px,2.2vw,30px));max-width:none;flex:none}
  .step__more{transition:grid-template-rows .9s cubic-bezier(.22,1,.36,1),opacity .6s var(--ease) .1s,margin .9s cubic-bezier(.22,1,.36,1)}
  .step__more > div{transform:translateY(10px);transition:transform .9s cubic-bezier(.22,1,.36,1),padding .9s cubic-bezier(.22,1,.36,1)}
  .step.is-active .step__more > div{transform:none}
  .step:not(.is-active) .step__more{transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1),opacity .2s var(--ease),margin .5s cubic-bezier(.22,1,.36,1)}
}
/* Liên hệ: vùng thông tin tối hơn, bỏ line thừa trên hotline */
.contact__panel > .contact__grid{background:rgba(3,9,28,.42);border-top-color:rgba(211,160,151,.14);padding-bottom:4px}
.contact__panel > .social{background:rgba(3,9,28,.42)}
.contact__panel .citem--hl{border-top:0}
/* Hero CTA: mũi tên hướng xuống, hover nhích xuống */
.btn:hover .ic.mv--down{transform:translateY(3px)}
/* Bong bóng chat: chỉ còn tiêu đề */
.chat__head{padding-bottom:22px}

/* ===== v0.24 · 15/10 14:16 ===== */

/* --- Đặc quyền: ảnh + 3 hạng gom thành 1 card, vùng ảnh thấp lại --- */
.pvx__panel{--cut:18px;gap:0;background:linear-gradient(170deg,rgba(241,243,244,.055) 0%,rgba(241,243,244,.018) 100%),#0A1838;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:inset 0 0 0 1px rgba(241,243,244,.09)}
.pvx__media{aspect-ratio:16/6.2;clip-path:none}
.pvx__media img{object-position:50% 32%}
.pvx__media::before{background:linear-gradient(90deg,rgba(4,12,34,.9) 0%,rgba(4,12,34,.55) 38%,rgba(4,12,34,0) 68%),linear-gradient(0deg,#0A1838 0%,rgba(10,24,56,0) 38%)}
.pvx__media figcaption{padding:clamp(22px,2.6vw,34px) clamp(24px,2.8vw,36px) clamp(18px,2vw,24px)}
.pvx__tiers{gap:0;padding:4px 0 6px;border-top:1px solid rgba(241,243,244,.08)}
.pvx__tier,.pvx__tier--eli{background:none;box-shadow:none;border-radius:0;padding:20px clamp(20px,2.2vw,28px) 22px}
.pvx__tier + .pvx__tier{border-left:1px solid rgba(241,243,244,.08)}
.pvx__tier::before{left:clamp(20px,2.2vw,28px);right:auto;width:44px;top:-1px;height:2px}
.pvx__tier--eli{background:linear-gradient(180deg,rgba(211,160,151,.09),rgba(211,160,151,0) 80%)}
.pvx[data-focus="plat"] .pvx__tier--plat,.pvx[data-focus="dia"] .pvx__tier--dia,.pvx[data-focus="eli"] .pvx__tier--eli{box-shadow:none;background:color-mix(in srgb,var(--tc) 10%,transparent)}
.pvx__more{display:none}
@media (max-width:767px){
  .pvx__panel{--cut:14px}
  .pvx__media{aspect-ratio:16/10.5}
  .pvx__media img{object-position:50% 28%}
  .pvx__media::before{background:linear-gradient(180deg,rgba(4,12,34,0) 22%,rgba(4,12,34,.55) 55%,#0A1838 100%)}
  .pvx__media figcaption{padding:16px 18px 12px;gap:6px}
  .pvx__media h3{font-size:1.375rem}
  .pvx__media p{font-size:.8125rem;line-height:1.5}
  .pvx__tiers{padding:0 0 4px}
  .pvx__tier,.pvx__tier--eli{padding:13px 18px;grid-template-columns:100px 1fr}
  .pvx__tier + .pvx__tier{border-left:0;border-top:1px solid rgba(241,243,244,.08)}
  .pvx__tier::before{left:0;top:13px;bottom:13px;width:2px;height:auto}
  .privileges .ex-head__copy .link-arrow{display:none}
  .pvx__more{display:inline-flex;margin-top:16px}
}

/* --- Mobile: khoảng cách giữa các section gọn hơn --- */
@media (max-width:767px){
  :root{--section:52px}
  .sec-head{margin-bottom:24px}
  .exclusive{padding-bottom:24px}
  .products{padding-top:40px}
  .pillars{padding-top:48px}
}

/* --- Dành riêng KHƯT (mobile): thẻ thấp lại --- */
@media (max-width:767px){
  .exclusive .xcard,.exclusive .xcard:not(.xcard--lg){aspect-ratio:auto;height:236px}
  .exclusive .xcard__img::after{background:linear-gradient(180deg,rgba(4,12,34,0) 20%,rgba(4,12,34,.6) 52%,rgba(4,12,34,.95) 100%)}
  .exclusive .xcard__txt{padding:16px 60px 18px 18px;gap:6px}
  .exclusive .xcard h3{font-size:1.125rem}
  .exclusive .xcard p{-webkit-line-clamp:2;font-size:.8125rem}
  .exclusive .xcard__go{bottom:18px;width:34px;height:34px}
  .xdots{margin-top:12px}
}

/* --- Sản phẩm dịch vụ: thẻ dọc (ảnh thẻ trên, nội dung dưới), mobile dạng slide --- */
.pdots{display:none}
.products .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccard{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:0;min-height:0;padding:0}
.ccard__art{height:clamp(240px,22vw,300px);padding:28px;background:radial-gradient(60% 70% at 50% 55%,rgba(211,160,151,.14),rgba(211,160,151,0) 70%);border-bottom:1px solid rgba(241,243,244,.07)}
.ccard--inf .ccard__art{background:radial-gradient(60% 70% at 50% 55%,rgba(48,97,174,.22),rgba(48,97,174,0) 70%)}
.ccard--inf .ccard__art img{height:min(230px,100%);width:auto}
.ccard--sig .ccard__art img{width:auto;max-width:none;height:min(170px,72%)}
.ccard__txt{padding:clamp(22px,2.4vw,32px)}
.ccard__txt p{max-width:46ch}
@media (max-width:767px){
  .products .cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--gutter));padding:8px 9% 22px;scrollbar-width:none;align-items:stretch}
  .products .cards::-webkit-scrollbar{display:none}
  .products .ccard{flex:0 0 82%;scroll-snap-align:center;scroll-snap-stop:always;grid-template-columns:1fr;padding:0;opacity:.5;transform:scale(.95);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .products .ccard.is-cur{opacity:1;transform:none}
  .ccard__art{height:200px;padding:20px}
  .ccard--inf .ccard__art img{height:170px;transform:rotate(-8deg)}
  .ccard--sig .ccard__art img{height:120px;max-width:none;transform:rotate(6deg)}
  .ccard--sig:hover .ccard__art img{transform:rotate(6deg)}
  .ccard__txt{padding:20px 20px 22px}
  .pdots{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .pdots i{width:6px;height:6px;border-radius:6px;background:rgba(241,243,244,.25);transition:width .4s var(--ease),background-color .4s}
  .pdots i.is-on{width:22px;background:var(--vtb-rose)}
}
.ccard__art{display:flex;align-items:center;justify-content:center;overflow:visible}
.ccard__art::before,.ccard__art::after{position:absolute}

/* ===== v0.25 · Card đặc quyền: ảnh phủ toàn card, nội dung + 3 hạng nổi trên ảnh (theo mock 15/10) ===== */
.pvx__panel{position:relative;isolation:isolate;overflow:hidden;clip-path:none;border-radius:18px;background:#071230;box-shadow:inset 0 0 0 1px rgba(241,243,244,.08),0 40px 80px -50px rgba(0,0,0,.8);display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:clamp(220px,20vw,280px) clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px)}
.pvx__media{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;margin:0;clip-path:none}
.pvx__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;z-index:0}
.pvx__media::before{z-index:1;background:linear-gradient(180deg,rgba(7,18,48,0) 0%,rgba(7,18,48,.15) 30%,rgba(7,18,48,.78) 52%,#071230 72%,#071230 100%),linear-gradient(90deg,rgba(7,18,48,.55) 0%,rgba(7,18,48,0) 55%)}
.pvx__cap{display:grid;gap:10px;max-width:34rem;padding:0 clamp(14px,1.6vw,18px)}
.pvx__cap h3{font-size:clamp(1.75rem,2.6vw,2.375rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.pvx__cap p{color:var(--text-2);font-size:.9375rem;line-height:1.6;text-wrap:pretty}
.pvx__cap .pvx__count{font-size:1rem;letter-spacing:.04em;color:var(--vtb-rose)}
.pvx__cap>*{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.pvx__panel.is-on .pvx__cap>*{opacity:1;transform:none}
.pvx__panel.is-on .pvx__cap>:nth-child(2){transition-delay:.06s}
.pvx__panel.is-on .pvx__cap>:nth-child(3){transition-delay:.12s}
/* 3 hạng: khung kính tint theo màu hạng, viền sáng phía trên */
.pvx__tiers{border-top:0;padding:0;gap:10px;align-items:start}
.pvx__tier,.pvx__tier--eli{position:relative;border-radius:6px;padding:16px 16px 18px;gap:10px;box-shadow:inset 0 1px 0 var(--tline),inset 0 0 0 1px rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pvx__tier + .pvx__tier{border-left:0}
.pvx__tier::before{display:none}
.pvx__tier--plat{--tline:rgba(230,236,244,.75);background:linear-gradient(180deg,rgba(150,166,194,.42) 0%,rgba(70,88,124,.34) 100%)}
.pvx__tier--dia{--tline:rgba(140,226,230,.85);background:linear-gradient(180deg,rgba(54,150,162,.62) 0%,rgba(16,58,86,.32) 100%)}
.pvx__tier--eli{--tline:rgba(236,190,180,.85);background:linear-gradient(180deg,rgba(150,72,80,.66) 0%,rgba(70,32,54,.36) 100%)}
.pvx__tier b{font-size:clamp(1.125rem,1.4vw,1.375rem);font-weight:500;letter-spacing:-.01em;color:#fff;gap:10px}
.pvx__tier--dia b{color:#A6ECEE}
.pvx__tier--eli b{color:#F3CFC6}
.pvx__tier .emblem{width:30px;height:30px;font-size:.9rem}
.pvx__v{font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.9)}
.pvx__tier.is-none .pvx__v,.pvx__tier .pvx__na{color:rgba(255,255,255,.55)}
.pvx[data-focus] .pvx__tier{opacity:.45}
.pvx[data-focus="plat"] .pvx__tier--plat,.pvx[data-focus="dia"] .pvx__tier--dia,.pvx[data-focus="eli"] .pvx__tier--eli{opacity:1;background-blend-mode:normal;box-shadow:inset 0 1px 0 var(--tline),inset 0 0 0 1px var(--tline)}
@media (max-width:767px){
  .pvx__panel{border-radius:16px;padding:150px 12px 12px;gap:16px}
  .pvx__media::before{background:linear-gradient(180deg,rgba(7,18,48,0) 0%,rgba(7,18,48,.2) 14%,rgba(7,18,48,.85) 30%,#071230 42%,#071230 100%)}
  .pvx__media img{height:62%;object-position:50% 22%}
  .pvx__cap{padding:0 6px;gap:6px}
  .pvx__cap h3{font-size:1.5rem}
  .pvx__cap p{font-size:.875rem;line-height:1.55}
  .pvx__cap .pvx__count{font-size:.875rem}
  .pvx__tiers{grid-template-columns:1fr;gap:8px}
  .pvx__tier,.pvx__tier--eli{grid-template-columns:1fr;padding:12px 14px 14px;gap:6px}
  .pvx__tier b{font-size:1.0625rem;gap:8px}
  .pvx__tier .emblem{width:24px;height:24px;font-size:.75rem}
  .pvx__v{font-size:.875rem}
}
/* v0.26 · 3 box hạng: cao bằng nhau (chừa 4 dòng), gradient đáy tan vào nền navy */
.pvx__tiers{align-items:stretch}
.pvx__tier,.pvx__tier--eli{align-content:start;box-shadow:inset 0 1px 0 var(--tline);-webkit-backdrop-filter:none;backdrop-filter:none}
.pvx__tier::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.pvx__tier--plat{background:linear-gradient(180deg,rgba(150,166,194,.42) 0%,rgba(150,166,194,0) 100%)}
.pvx__tier--dia{background:linear-gradient(180deg,rgba(54,150,162,.62) 0%,rgba(54,150,162,0) 100%)}
.pvx__tier--eli{background:linear-gradient(180deg,rgba(150,72,80,.66) 0%,rgba(150,72,80,0) 100%)}
.pvx__v{min-height:6em}
.pvx[data-focus="plat"] .pvx__tier--plat,.pvx[data-focus="dia"] .pvx__tier--dia,.pvx[data-focus="eli"] .pvx__tier--eli{box-shadow:inset 0 1px 0 var(--tline)}
@media (max-width:767px){.pvx__v{min-height:0}}
/* Ảnh nhóm 03 (Sức khoẻ): đẩy khung ảnh lên để thấy rõ gương mặt */


/* v0.26c · Đẩy ảnh từng nhóm đặc quyền lên để chủ thể nằm trên vùng chữ (--k = phần ảnh dịch lên, tính theo chiều cao card) */
.pvx__media img{top:calc(var(--k,0) * -100%);height:calc(100% + var(--k,0) * 100%)}
@media (max-width:767px){.pvx__media img{top:calc(var(--km,0) * -100%);height:calc(62% + var(--km,0) * 100%)}}
#pvx-p0 .pvx__media img{--k:0;--km:0.06;object-position:50% 18%}
@media (max-width:767px){#pvx-p0 .pvx__media img{object-position:50% 20%}}
#pvx-p1 .pvx__media img{--k:0.6;--km:0.52;object-position:50% 50%}
@media (max-width:767px){#pvx-p1 .pvx__media img{object-position:45% 50%}}
#pvx-p2 .pvx__media img{--k:0.5;--km:0.45;object-position:45% 50%}
@media (max-width:767px){#pvx-p2 .pvx__media img{object-position:38% 50%}}
#pvx-p3 .pvx__media img{--k:0.31;--km:0.31;object-position:50% 50%}
@media (max-width:767px){#pvx-p3 .pvx__media img{object-position:32% 50%}}
#pvx-p4 .pvx__media img{--k:0.7;--km:0.6;object-position:50% 50%}
@media (max-width:767px){#pvx-p4 .pvx__media img{object-position:50% 50%}}
#pvx-p5 .pvx__media img{--k:0.5;--km:0.12;object-position:50% 50%}
@media (max-width:767px){#pvx-p5 .pvx__media img{object-position:55% 50%}}
#pvx-p6 .pvx__media img{--k:0.11;--km:0.17;object-position:50% 50%}
@media (max-width:767px){#pvx-p6 .pvx__media img{object-position:62% 50%}}
/* Gia đình (mobile): thu nhỏ ảnh để thấy cả người lớn và các bé */
@media (max-width:767px){
  #pvx-p5 .pvx__media img{top:0;height:300px;object-position:50% 50%}
  #pvx-p5 .pvx__media::before{background:linear-gradient(180deg,rgba(7,18,48,0) 0%,rgba(7,18,48,0) 22%,rgba(7,18,48,.7) 36%,#071230 46%,#071230 100%)}
}
.link-arrow{white-space:nowrap}
/* Điều kiện (mobile): thẻ ngắn hơn bị kéo cao bằng thẻ khác → chiều cao dư dồn hết xuống đáy, không chia vào các hàng tiêu đề */
@media (max-width:767px){.conditions__grid .tcard{align-content:start}}

/* ===== v0.27 · 15/10 18:51 ===== */
/* Điều kiện (desktop): tên hạng + tagline cùng hàng với icon, bỏ badge "Hạng cao nhất" */
.tcard__top{justify-content:flex-start;gap:16px}
.tcard__id{display:grid;gap:4px;min-width:0}
.tcard__id .tcard__name{margin-top:0;font-size:clamp(1.75rem,2.2vw,2.25rem)}
.tcard__id .tcard__tag{margin-top:0}
@media (min-width:768px){.tcard .chip{display:none}}
@media (max-width:767px){
  .tcard__id{grid-column:2;align-self:center;gap:2px}
  .tcard__id .tcard__name{font-size:1.75rem}
}
.pop__body .tcard__id{display:grid}

/* Sản phẩm (desktop): quay lại thẻ ngang — nội dung trái, ảnh thẻ phải */
@media (min-width:768px){
  .products .cards{grid-template-columns:1fr 1fr}
  .ccard{grid-template-columns:1fr minmax(160px,.8fr);grid-template-rows:none;align-items:center;gap:16px;min-height:280px;padding:clamp(28px,3vw,44px)}
  .ccard__art{order:2;height:auto;padding:0;background:none;border-bottom:0}
  .ccard--inf .ccard__art{background:none}
  .ccard__txt{order:1;padding:0}
  .ccard__txt p{max-width:34ch}
  .ccard--inf .ccard__art img{height:230px;width:auto}
  .ccard--sig .ccard__art img{width:100%;max-width:280px;height:auto}
}
.tcard__id{justify-items:start;text-align:left;justify-self:start}

/* v0.27b · Mọi slider ngang (mobile): khoá trục dọc — không cho track cuộn lên/xuống, chỉ vuốt ngang */
@media (max-width:767px){
  .exclusive__grid,.products .cards,.conditions__grid,.pvx__nav,.pillars__list,.privileges__grid,.mcar{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y;scrollbar-width:none}
  .exclusive .xcard,.exclusive .xcard:hover{transform:none}
  .exclusive .xcard,.products .ccard,.conditions__grid .tcard{scroll-snap-stop:always}
}

/* v0.28 · Điều kiện (desktop): thu khoảng trống giữa phần mô tả và khối điều kiện — giữ bậc thang nhưng bước nhỏ hơn */
@media (min-width:1181px){
  .tcard--plat{min-height:600px}
  .tcard--dia{min-height:620px}
  .tcard--eli{min-height:640px}
}
@media (min-width:768px) and (max-width:1180px){.tcard--plat,.tcard--dia,.tcard--eli{min-height:0}.tcard__rule{margin-top:24px}}
.dock{transition:opacity .4s var(--ease),transform .5s var(--ease)}
.dock.is-tucked{opacity:0;transform:translateY(12px);pointer-events:none}
@media (max-width:767px){.pvx__nav{scroll-snap-type:none;scroll-behavior:auto}.pvx__tab{scroll-snap-align:none}}

/* =====================================================================
   v0.29 · Hành trình (desktop): expand mượt — chỉ còn 1 thứ thay đổi layout (flex-grow),
   mọi thứ bên trong thẻ có kích thước cố định nên không reflow / không vẽ lại ảnh mỗi frame.
   - Chữ: bề ngang cố định (--tw) → không dàn lại dòng khi thẻ giãn
   - Ảnh: khung ảnh bề ngang cố định (--mw), chỉ dịch vị trí → ảnh không bị resize/giải mã lại
   - Bỏ filter, mask-image, mix-blend động trên ảnh lớn → thay bằng lớp phủ đổi opacity (GPU)
   ===================================================================== */
@media (min-width:768px){
  .ascend{--E:cubic-bezier(.22,1,.36,1);--T:.8s}
  .step,.ascend.is-in .step{transition:flex-grow var(--T) var(--E),transform 1.1s var(--ease) var(--dl,0s),opacity 1.1s var(--ease) var(--dl,0s)}
  .step__frame{contain:strict}
  .step__media{inset:0 auto 0 50%;width:var(--mw,100%);-webkit-mask-image:none;mask-image:none;transform:translate3d(-50%,0,0);transition:left var(--T) var(--E);contain:strict}
  .step.is-active .step__media{left:calc(100% - var(--mw,100%) / 2)}
  .step__media img,.step.is-active .step__media img,.ascend.has-active .step:not(.is-active) .step__media img{filter:none;transform:none;object-position:50% 12%;transition:none}
  .step__media::before,.step.is-active .step__media::before{mix-blend-mode:normal;background:#050C24;opacity:0;transition:opacity var(--T) var(--E)}
  .ascend.has-active .step:not(.is-active) .step__media::before{opacity:.36}
  .step__media::after,.step.is-active .step__media::after{transition:none;background:linear-gradient(180deg,rgba(6,18,47,0) 40%,rgba(6,18,47,.78) 66%,#07142F 100%)}
  .step__level{white-space:nowrap}
  .step__head{width:var(--tw,auto);max-width:none}
  .ascend:not(.has-active) .step__head{width:var(--twi,auto)}
  .step.is-active .step__head{width:calc(400px - 2*clamp(22px,2.2vw,30px))}
  .step__body::before{width:520px;will-change:opacity}
  .step__glass{display:none}
  .step__more{transition:grid-template-rows var(--T) var(--E),opacity .5s var(--ease) .12s,margin var(--T) var(--E)}
  .step:not(.is-active) .step__more{transition:grid-template-rows .5s var(--E),opacity .2s var(--ease),margin .5s var(--E)}
  .step__more > div{transition:transform var(--T) var(--E),padding var(--T) var(--E)}
  .ascend.is-measuring .step,.ascend.is-measuring .step *{transition:none!important}
}
@media (prefers-reduced-motion:reduce){.step,.step__media,.step__more,.step__more > div{transition:none!important}}
/* v0.29 · Giảm vẽ lại liên tục: viền chạy chỉ chạy ở thẻ đang mở (và chờ thẻ giãn xong mới chạy);
   mọi animation lặp vô hạn tạm dừng khi section ra khỏi màn hình */
.step__ring{animation-play-state:paused}
.step.is-active .step__ring{animation-play-state:running}
.ascend.has-active .ascend__run,.ascend.has-active .ascend__glow{animation-play-state:paused}
.is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused!important}
/* v0.29 · Viền thẻ: viền tĩnh rẻ (box-shadow inset) cho mọi thẻ; viền gradient chạy (mask, tốn vẽ) chỉ hiện ở thẻ đang mở, sau khi thẻ giãn xong */
@media (min-width:768px){
  .step__frame{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--g3,#8D99AF) 60%,transparent)}
  .step__ring{opacity:0;transition:opacity .15s linear}
  .step.is-active .step__ring{opacity:1;transition:opacity .6s var(--ease) .7s}
}

/* ===== v0.30 · Viền thẻ hạng: khi mở, một vệt sáng chạy dọc mép tô dần cho tới khi kín viền (SVG stroke, rẻ) ===== */
@media (min-width:768px){
  .step__ring{display:none!important}
  .step__frame{box-shadow:inset 0 0 0 1px rgba(241,243,244,.10);transition:box-shadow .4s var(--ease)}
  .step.is-active .step__frame{box-shadow:inset 0 0 0 1px rgba(241,243,244,0)}
  .step__trace{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible}
  .step__trace rect{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .35s cubic-bezier(.4,0,1,1)}
  .step__trace .tr-tip{stroke-width:4;stroke-dasharray:.06 .94;stroke-dashoffset:.06;opacity:0;transition:stroke-dashoffset .35s cubic-bezier(.4,0,1,1),opacity .2s}
  .step.is-active .step__trace rect{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1) .05s}
  .step.is-active .step__trace .tr-tip{stroke-dashoffset:-.94;opacity:1;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1) .05s,opacity .15s ease;animation:trTipOut .35s ease 1.1s forwards}
}
@keyframes trTipOut{to{opacity:0}}
@media (max-width:767px){.step__trace{display:none}}
@media (prefers-reduced-motion:reduce){.step__trace rect{transition:none!important}}

/* ===== v0.31 · Hero KV mới (tấm kính + logo rose gold trên biển hoàng hôn): ảnh full-bleed, màu thật ===== */
.hero{background:#1B2A66}
.hero__media picture{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;right:auto}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;mix-blend-mode:normal;opacity:1;filter:none;-webkit-mask-image:none;mask-image:none;transform:scale(1.04);animation:heroKv 2.4s cubic-bezier(.22,1,.36,1) both}
.hero__media::after{display:none}
.hero::before{background:linear-gradient(90deg,rgba(10,24,64,.82) 0%,rgba(10,24,64,.58) 26%,rgba(10,24,64,.12) 48%,rgba(10,24,64,0) 60%),linear-gradient(0deg,#0A1838 0%,rgba(10,24,56,.55) 10%,rgba(10,24,56,0) 26%)}
@keyframes heroKv{from{transform:scale(1.1);opacity:0}to{transform:scale(1.04);opacity:1}}
@media (max-width:1180px){.hero__media img{object-position:78% 50%}}
@media (max-width:767px){
  .hero__media picture{position:relative;inset:auto;height:100%}
  .hero__media img{object-position:50% 40%;transform:none;animation:heroKvM 1.8s cubic-bezier(.22,1,.36,1) both;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .hero{background:#0A1838}
}
@keyframes heroKvM{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none}}
@media (min-width:768px){
  .hero{background:#20306E}
  .hero__media picture{left:12%;width:88%}
  .hero__media img{object-position:62% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%)}
}

/* v0.32 · Thanh menu: hiệu ứng kính mờ — nền trong hơn, blur nhẹ nội dung phía dưới */
.island,.island.is-compact,.island:not(.is-compact){-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.island:not(.is-compact){background:rgba(7,17,45,.52);box-shadow:inset 0 -1px 0 rgba(211,160,151,.18)}
.island.is-compact{background:rgba(6,16,44,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(211,160,151,.2),0 24px 60px -28px rgba(0,0,0,.7)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.island:not(.is-compact),.island.is-compact{background:rgba(7,17,45,.94)}}
/* KV chạy lên dưới thanh menu để thấy hiệu ứng kính ngay từ đầu trang */
.hero{margin-top:0}
@media (min-width:768px){.hero{min-height:100dvh}.hero__inner{padding-top:calc(var(--barh) + 72px)}}
@media (max-width:767px){.hero__media{height:calc(min(92vw,440px) + 64px)}.hero__media img{object-position:50% 100%}}
/* v0.32b · Hero: đáy chuyển dần về navy thương hiệu (--bg) để nối liền các section dưới, không phủ lên khối kính + logo */
.hero::before{background:linear-gradient(90deg,rgba(10,24,64,.82) 0%,rgba(10,24,64,.58) 26%,rgba(10,24,64,.12) 48%,rgba(10,24,64,0) 60%),linear-gradient(0deg,var(--bg) 0%,rgba(10,26,62,.9) 7%,rgba(10,26,62,.6) 15%,rgba(10,26,62,.22) 25%,rgba(10,26,62,0) 34%)}
@media (min-width:1600px){.hero::before{background:linear-gradient(90deg,rgba(10,24,64,.82) 0%,rgba(10,24,64,.58) 26%,rgba(10,24,64,.12) 48%,rgba(10,24,64,0) 60%),linear-gradient(0deg,var(--bg) 0%,rgba(10,26,62,.92) 9%,rgba(10,26,62,.62) 18%,rgba(10,26,62,.24) 28%,rgba(10,26,62,0) 38%)}}

/* v0.33 · Icon ứng dụng VietinBank iPay thay ô QR */
.app__icon{width:96px;height:96px;border-radius:22px;display:block;object-fit:cover;box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
@media (max-width:767px){.app{grid-template-columns:auto 1fr;align-items:center}.app__icon{width:56px;height:56px;border-radius:13px}.app .stores{grid-column:1 / -1}}

/* v0.36 · Ghi chú dưới bảng Điều kiện: rộng hơn (desktop/tablet), vẫn chừa khoảng cách với CTA */
@media (min-width:768px){
  .conditions__foot{flex-wrap:nowrap;gap:20px 96px}
  .conditions__note{max-width:880px;flex:1 1 auto}
  .conditions__foot .link-arrow{flex:none;white-space:nowrap}
}

/* v0.37 · Đặc quyền: nhóm chỉ có 2 hạng (Sức khoẻ, Tư vấn tài chính) chia 2 cột */
@media (min-width:768px){
  .pvx__tiers:has(> .pvx__tier:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* v0.37 · Quyền lợi nhiều dòng trong box hạng: mỗi dòng một ý, có chấm màu hạng */
.pvx__v i{display:block;position:relative;padding-left:14px;font-style:normal}
.pvx__v i + i{margin-top:6px}
.pvx__v i::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tc,#F1F3F4);opacity:.85}
.pvx__tier--plat .pvx__v i::before{background:#E6EAF0}
.pvx__tier--dia .pvx__v i::before{background:#9FE3E6}
.pvx__tier--eli .pvx__v i::before{background:#F0C3BA}

/* v0.40 · Đặc quyền (desktop): tên nhóm và tiêu đề không xuống dòng ở bản VI */
@media (min-width:1101px){
  .pvx{grid-template-columns:minmax(260px,340px) minmax(0,1fr)}
  .pvx__name{white-space:nowrap}
  .pvx__cap{max-width:none}
  .pvx__cap h3{white-space:nowrap}
  .pvx__cap p{max-width:34rem}
}

/* v0.42 · Hotline KHƯT: dòng phụ số quốc tế */
.citem__note{display:block;margin-top:4px;font-size:.875rem;color:var(--text-3)}
.citem .citem__note a,.citem--hl .citem__note a{display:inline;margin:0;font-size:.875rem;font-weight:600;color:var(--text-2)}
.citem .citem__note a:hover{color:var(--vtb-rose)}

/* ===== v0.44 · Hero theo KV FINAL: ảnh nền full, logo + tagline gõ lại bằng SVN-Aptima, bố cục như KV ===== */
@font-face{font-family:"SVN-Aptima";src:url("../fonts/SVN-Aptima-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
.hero::before{background:linear-gradient(0deg,#0A1838 0%,rgba(10,24,56,.5) 9%,rgba(10,24,56,0) 22%)}
.hero__brand{margin:0}
.hero__brand img{display:block;width:clamp(150px,15.4vw,236px);height:auto}
.hero h1.hero__kvtitle{font-family:"SVN-Aptima",var(--font);font-weight:400;text-transform:uppercase;letter-spacing:.18em;line-height:1.26;font-size:clamp(1.625rem,3.28vw,3.25rem);color:#E2C1B8;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;margin:clamp(40px,7.4vh,104px) 0 0;text-shadow:0 2px 24px rgba(10,24,64,.35)}
.hero h1.hero__kvtitle span{display:block;margin-right:-.18em}
.hero__tiers{margin:clamp(18px,2.7vw,40px) 0 0;font-family:"SVN-Aptima",var(--font);font-size:clamp(.75rem,1.25vw,1.125rem);letter-spacing:.2em;text-transform:uppercase;color:#E2C1B8;margin-right:-.2em}
.hero__inner--kv .hero__lead{margin-top:clamp(28px,4vh,44px)}
@media (min-width:768px){
  .hero{justify-content:center}
  .hero__media picture{left:0;width:100%}
  .hero__media img{object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
  .hero__inner.hero__inner--kv{width:51.2%;max-width:none;margin:0;padding:calc(var(--barh) + 24px) 24px clamp(110px,12vh,150px);display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero__inner--kv .hero__lead,.hero__inner--kv .hero__desc{max-width:30rem;margin-left:auto;margin-right:auto}
  .hero__inner--kv .hero__cta{justify-content:center}
}
@media (min-width:768px) and (max-width:1180px){
  .hero__media img{object-position:28% 50%}
  .hero__inner.hero__inner--kv{width:52%}
}
@media (max-width:767px){
  .hero__media{height:auto}
  .hero__media picture{display:block;height:auto}
  .hero__media img{height:auto;aspect-ratio:900/1090;object-fit:cover;object-position:50% 0}
  .hero__inner.hero__inner--kv{margin-top:-56px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero__inner--kv .hero__cta{justify-content:center}
  .hero h1.hero__kvtitle{font-size:1.75rem;letter-spacing:.16em;margin-top:28px}
  .hero h1.hero__kvtitle span{margin-right:-.16em}
  .hero__tiers{font-size:.75rem;margin-top:16px}
}
html[lang="en"] .hero h1.hero__kvtitle{letter-spacing:.14em}

/* v0.45 · Hero: khối logo + tagline căn lề trái như bản cũ */
.hero h1.hero__kvtitle span,.hero__tiers{margin-right:0}
.hero__inner.hero__inner--kv{align-items:flex-start;text-align:left}
.hero__inner--kv .hero__cta{justify-content:flex-start}
@media (min-width:768px){
  .hero__inner.hero__inner--kv{width:min(100% - 2*var(--gutter),var(--container));max-width:none;margin:0 auto;padding-left:0;padding-right:0}
  .hero__inner--kv > *{max-width:min(560px,46vw)}
  .hero__inner--kv .hero__lead,.hero__inner--kv .hero__desc{margin-left:0;margin-right:0}
}
@media (min-width:1181px){.hero__inner--kv > h1.hero__kvtitle{max-width:none}.hero h1.hero__kvtitle span{white-space:nowrap}}

/* v0.46 · Hero: bỏ logo, tagline to hơn */
.hero h1.hero__kvtitle{margin-top:0;font-size:clamp(2.125rem,4.3vw,4.375rem);line-height:1.22}
html[lang="en"] .hero h1.hero__kvtitle{font-size:clamp(1.75rem,3.5vw,3.5rem)}
@media (max-width:767px){
  .hero h1.hero__kvtitle{font-size:2.125rem;margin-top:0}
  html[lang="en"] .hero h1.hero__kvtitle{font-size:1.625rem}
  .hero__inner.hero__inner--kv{margin-top:-40px}
}

/* v0.47 · Hero: khối chữ không lấn vào khối kính KV. Ảnh canh giữa nên mép trái khối kính ≈ giữa màn hình;
   bề ngang dành cho chữ = 50vw − lề trái container − 48px, cỡ tagline co theo bề ngang đó */
@media (min-width:768px){
  .hero{--kv-avail:calc(50vw - max(var(--gutter), (100vw - var(--container)) / 2) - 48px)}
  .hero__media img{object-position:50% 50%}
  .hero__inner.hero__inner--kv{width:min(100% - 2*var(--gutter),var(--container))}
  .hero__inner--kv > *,.hero__inner--kv > h1.hero__kvtitle{max-width:min(560px,var(--kv-avail))}
  .hero h1.hero__kvtitle{font-size:min(4.375rem,calc(var(--kv-avail) / 9.8))}
  html[lang="en"] .hero h1.hero__kvtitle{font-size:min(3.5rem,calc(var(--kv-avail) / 12.6))}
  .hero__tiers{font-size:min(1.125rem,calc(var(--kv-avail) / 30))}
  .hero__inner--kv .hero__lead{font-size:min(1.25rem,calc(var(--kv-avail) / 26))}
}
/* Tablet (768–1180px): không đủ chỗ đặt chữ cạnh khối kính → KV nguyên khung ở trên, chữ ở dưới */
@media (min-width:768px) and (max-width:1180px){
  .hero{min-height:0;justify-content:flex-start}
  .hero__media{position:relative;inset:auto;height:auto}
  .hero__media picture{position:relative;inset:auto;left:0;width:100%;height:auto;display:block}
  .hero__media img{height:auto;aspect-ratio:2400/1356;object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
  .hero__inner.hero__inner--kv{margin-top:-24px;padding-top:0;padding-bottom:clamp(110px,14vw,150px)}
  .hero__inner--kv > *,.hero__inner--kv > h1.hero__kvtitle{max-width:640px}
  .hero h1.hero__kvtitle{font-size:clamp(2.5rem,5.4vw,3.5rem)}
  html[lang="en"] .hero h1.hero__kvtitle{font-size:clamp(2rem,4.2vw,2.75rem)}
  .hero__tiers{font-size:.9375rem}
  .hero__inner--kv .hero__lead{font-size:1.1875rem}
}

/* v0.48 · Hero desktop màn hình rộng/thấp (tỉ lệ > KV 2448:1383): KV thu nhỏ theo chiều cao, hiện trọn
   khối kính (không cắt trên/dưới), neo phải; phần trống bên trái nối bằng dải màu lấy từ mép trái KV */
@media (min-width:1181px) and (min-aspect-ratio:2448/1383){
  .hero{background:linear-gradient(180deg,#061330 0%,#061738 8%,#091D43 16%,#0E244C 24%,#152B55 32%,#203360 40%,#293663 46%,#2E3963 49%,#313962 50.5%,#333A61 51.5%,#363A60 53%,#3B3556 58%,#091836 66%,#061530 76%,#050E26 88%,#030A1D 100%)}
  .hero__media picture{left:auto;right:0;top:0;bottom:0;width:auto;height:100%;aspect-ratio:2448/1383}
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%)}
  .hero{--kv-avail:calc(100vw - 87.35dvh - max(var(--gutter), (100vw - var(--container)) / 2) - 48px)}
}

/* v0.49 · Hero desktop: tagline nhỏ hơn; KV (màn hình rộng) dịch sang trái để mép phải khối kính thẳng mép phải lưới nội dung */
@media (min-width:768px){
  .hero h1.hero__kvtitle{font-size:min(3.75rem,calc(var(--kv-avail) / 11))}
  html[lang="en"] .hero h1.hero__kvtitle{font-size:min(3rem,calc(var(--kv-avail) / 13.5))}
}
@media (min-width:1181px) and (min-aspect-ratio:2448/1383){
  .hero{--kv-left:max(var(--gutter), (100vw - var(--container)) / 2);--kv-shift:max(0px, min(var(--kv-left) - 21.47dvh + 24px, 100vw - 87.35dvh - var(--kv-left) - 676px));
    --kv-avail:calc(100vw - var(--kv-shift) - 87.35dvh - var(--kv-left) - 48px);
    background:linear-gradient(180deg,#071330 0%,#061534 2%,#051536 4%,#051637 6%,#051738 8%,#05183A 10%,#06193C 12%,#071B40 14%,#091D43 16%,#0A1F46 18%,#0B2048 20%,#0C224A 22%,#0E244C 24%,#10264F 26%,#112751 28%,#132A54 30%,#142B55 32%,#182D59 34%,#1A2F5C 36%,#1D315E 38%,#1F335F 40%,#223461 42%,#263662 44%,#283662 46%,#2C3863 48%,#2E3963 49%,#303962 50%,#313962 51%,#343960 52%,#363A60 53%,#383A5F 54%,#3B395B 56%,#3B3556 58%,#373051 60%,#2F294A 62%,#081531 64%,#091836 66%,#081835 68%,#091835 70%,#071632 72%,#071631 74%,#061530 76%,#05132C 78%,#041129 80%,#041029 82%,#041028 84%,#040F27 86%,#040E26 88%,#050C23 90%,#040B22 92%,#040A21 94%,#03091F 96%,#02091D 98%,#030A1D 100%) left/50% 100% no-repeat,
      linear-gradient(180deg,#3E4C83 0%,#454F86 2%,#4E538B 4%,#55578F 6%,#5B5C94 8%,#70619A 10%,#78659C 12%,#826AA0 14%,#6D6CA5 16%,#6C71A8 18%,#7478AE 20%,#7A7DB2 22%,#8283B6 24%,#8E87BA 26%,#998EBF 28%,#A192C0 30%,#A799C4 32%,#BE9BC0 34%,#BCA5C7 36%,#C3A8C7 38%,#DCACBF 40%,#D9B9CE 42%,#D6BDD0 44%,#D9C3D2 46%,#E1C6D0 48%,#E3C9D2 49%,#E5CCD2 50%,#E6CACF 51%,#E7C6C8 52%,#E8BFC1 53%,#EBCAC6 54%,#F0CABF 56%,#F2C6B6 58%,#EDB3A5 60%,#E49F97 62%,#7C6587 64%,#74648B 66%,#776B90 68%,#625F88 70%,#5D5C84 72%,#4C507B 74%,#444B74 76%,#424A74 78%,#3C4770 80%,#37426C 82%,#343E68 84%,#2E3963 86%,#27345C 88%,#233159 90%,#1F2D54 92%,#1B2A50 94%,#17274C 96%,#112145 98%,#0D1E42 100%) right/50% 100% no-repeat}
  .hero__media picture{right:var(--kv-shift)}
  .hero__media img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 91%,transparent 100%)}
}

/* v0.50 · Hero (màn hình rộng): dải màu nối hai bên KV chuyển từ nền .hero sang lớp ảnh .hero__media và hiện dần CÙNG ảnh,
   tránh lúc mới tải trang lộ hai mảng màu đậm/nhạt khi ảnh còn trong suốt */
@keyframes heroMediaIn{from{opacity:0}to{opacity:1}}
@keyframes heroKvZoom{from{transform:scale(1.06)}to{transform:scale(1.04)}}
@media (min-width:1181px) and (min-aspect-ratio:2448/1383){
  .hero{background:#0A1838}
  .hero__media{background:linear-gradient(180deg,#071330 0%,#061534 2%,#051536 4%,#051637 6%,#051738 8%,#05183A 10%,#06193C 12%,#071B40 14%,#091D43 16%,#0A1F46 18%,#0B2048 20%,#0C224A 22%,#0E244C 24%,#10264F 26%,#112751 28%,#132A54 30%,#142B55 32%,#182D59 34%,#1A2F5C 36%,#1D315E 38%,#1F335F 40%,#223461 42%,#263662 44%,#283662 46%,#2C3863 48%,#2E3963 49%,#303962 50%,#313962 51%,#343960 52%,#363A60 53%,#383A5F 54%,#3B395B 56%,#3B3556 58%,#373051 60%,#2F294A 62%,#081531 64%,#091836 66%,#081835 68%,#091835 70%,#071632 72%,#071631 74%,#061530 76%,#05132C 78%,#041129 80%,#041029 82%,#041028 84%,#040F27 86%,#040E26 88%,#050C23 90%,#040B22 92%,#040A21 94%,#03091F 96%,#02091D 98%,#030A1D 100%) left/50% 100% no-repeat,
      linear-gradient(180deg,#3E4C83 0%,#454F86 2%,#4E538B 4%,#55578F 6%,#5B5C94 8%,#70619A 10%,#78659C 12%,#826AA0 14%,#6D6CA5 16%,#6C71A8 18%,#7478AE 20%,#7A7DB2 22%,#8283B6 24%,#8E87BA 26%,#998EBF 28%,#A192C0 30%,#A799C4 32%,#BE9BC0 34%,#BCA5C7 36%,#C3A8C7 38%,#DCACBF 40%,#D9B9CE 42%,#D6BDD0 44%,#D9C3D2 46%,#E1C6D0 48%,#E3C9D2 49%,#E5CCD2 50%,#E6CACF 51%,#E7C6C8 52%,#E8BFC1 53%,#EBCAC6 54%,#F0CABF 56%,#F2C6B6 58%,#EDB3A5 60%,#E49F97 62%,#7C6587 64%,#74648B 66%,#776B90 68%,#625F88 70%,#5D5C84 72%,#4C507B 74%,#444B74 76%,#424A74 78%,#3C4770 80%,#37426C 82%,#343E68 84%,#2E3963 86%,#27345C 88%,#233159 90%,#1F2D54 92%,#1B2A50 94%,#17274C 96%,#112145 98%,#0D1E42 100%) right/50% 100% no-repeat;animation:heroMediaIn 1.6s cubic-bezier(.22,1,.36,1) both}
  .hero__media img{animation:heroKvZoom 2.4s cubic-bezier(.22,1,.36,1) both}
}
@media (min-width:1181px) and (min-aspect-ratio:2448/1383) and (prefers-reduced-motion:reduce){.hero__media,.hero__media img{animation:none}}

/* v0.51 · Tiêu đề Liên hệ ngắt dòng cố định: "Bắt đầu hành trình di sản / cùng VietinBank" (desktop + mobile) */
#ct-title{max-width:none}
#ct-title span{display:block;white-space:nowrap}
@media (max-width:767px){#ct-title{font-size:min(1.75rem,calc((100vw - 90px) / 11.4))}}

/* v0.52 · Feedback 29/10: ngắt dòng có chủ đích + giữ cụm từ tiếng Việt không bị tách dòng (NBSP trong HTML) */
.br-d{display:none}
@media (min-width:768px){.br-d{display:inline}}
.matrix__note:empty{display:none}
.pvx__pick > i:first-of-type{margin-top:6px}

/* v0.52 · Tablet (768–1180px): thẻ Sản phẩm xếp 1 cột, chữ trái + thẻ phải cho dễ đọc */
@media (min-width:768px) and (max-width:1180px){
  .products .cards{grid-template-columns:1fr;gap:16px}
  .ccard{grid-template-columns:1fr minmax(200px,.75fr);min-height:0;padding:32px 36px}
  .ccard__txt{max-width:440px}
  .ccard--inf .ccard__art img{height:210px}
  .ccard--sig .ccard__art img{max-width:260px}
}
/* Tablet: Điều kiện 2 thẻ trên cao bằng nhau; thẻ Elite trải ngang chia 2 cột (quyền lợi | điều kiện) */
@media (min-width:768px) and (max-width:1180px){
  .conditions__grid{align-items:stretch}
  .conditions__grid .tcard--plat,.conditions__grid .tcard--dia{margin-top:0;transform:none}
  .conditions__grid .tcard--eli{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-content:start}
  .conditions__grid .tcard--eli > .tcard__top,.conditions__grid .tcard--eli > .tcard__desc,.conditions__grid .tcard--eli > .tcard__perks{grid-column:1}
  .conditions__grid .tcard--eli > .tcard__rule{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:start}
}

/* v0.57 · Mobile Đặc quyền: ảnh minh hoạ thành dải cố định 190px ở đầu thẻ (giữ mặt nhân vật), nội dung ngay bên dưới;
   thẻ đang chọn quyết định chiều cao (không còn kéo dài theo nhóm dài nhất) → cả cụm gọn ~1 màn hình */
@media (max-width:767px){
  .pvx__stage{display:block;position:relative}
  .pvx__panel{padding:0 12px 12px;justify-content:flex-start;gap:12px}
  .pvx__panel:not(.is-on){position:absolute;top:0;left:0;right:0;pointer-events:none}
  .pvx__media{position:relative;inset:auto;z-index:0;height:190px;margin:0 -12px -44px;overflow:hidden}
  .pvx__media img,#pvx-p5 .pvx__media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
  .pvx__media::before,#pvx-p5 .pvx__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,18,48,0) 45%,rgba(7,18,48,.7) 78%,#071230 100%)}
  .pvx__cap{position:relative;z-index:2;gap:4px}
  #pvx-p0 .pvx__media img{object-position:50% 22%}
  #pvx-p1 .pvx__media img{object-position:45% 35%}
  #pvx-p2 .pvx__media img{object-position:40% 25%}
  #pvx-p3 .pvx__media img{object-position:40% 30%}
  #pvx-p4 .pvx__media img{object-position:50% 25%}
  #pvx-p5 .pvx__media img{object-position:55% 30%}
  #pvx-p6 .pvx__media img{object-position:60% 25%}
}

/* =====================================================================
   v0.59 · Màu 3 hạng theo mã của đối tác (02/11)
   Platinum #687798 (xanh xám) · Diamond #E3E6EA (trắng xanh) · Elite #D5AE95 (nâu)
   Mỗi hạng có 5 tông: hi (sáng nhất) · lt (sáng) · base (mã gốc) · dk (đậm) · tint (phủ nền)
   --tc là màu chữ/điểm nhấn trên nền navy: Platinum dùng bản sáng hơn của mã gốc để đủ tương phản.
   ===================================================================== */
:root{
  --plat-hi:#DDE2EC;--plat-lt:#A9B4CC;--plat:#687798;--plat-dk:#3E4A68;--plat-tc:#9DA9C5;
  --dia-hi:#FFFFFF;--dia-lt:#F1F3F6;--dia:#E3E6EA;--dia-dk:#9AA2AF;--dia-tint:#8E97A6;
  --eli-hi:#F6E8DE;--eli-lt:#E6C7B2;--eli:#D5AE95;--eli-dk:#9C7259;--eli-tint:#8E644B;
  --mat-plat:linear-gradient(135deg,#DDE2EC 0%,#A9B4CC 28%,#687798 52%,#C3CCDD 72%,#56638A 100%);
  --mat-dia:linear-gradient(135deg,#FFFFFF 0%,#EEF0F3 28%,#BCC2CC 52%,#F8F9FA 72%,#A7AEBA 100%);
  --mat-eli:linear-gradient(135deg,#F6E8DE 0%,#E6C7B2 28%,#B58B70 52%,#EED6C6 74%,#9C7259 100%);
}
/* Hành trình: thẻ, popup, mốc */
.step,.step.step--plat,.step-pop,.step-pop.step--plat{--tc:var(--plat-tc);--tint:var(--plat);--g1:var(--plat-hi);--g2:#56638A;--g3:var(--plat-lt)}
.step.step--dia,.step-pop.step--dia{--tc:var(--dia);--tint:var(--dia-tint);--g1:var(--dia-hi);--g2:var(--dia-dk);--g3:var(--dia)}
.step.step--eli,.step-pop.step--eli{--tc:var(--eli);--tint:var(--eli-tint);--g1:var(--eli-hi);--g2:var(--eli-dk);--g3:var(--eli)}
.anode,.anode.anode--plat{--tc:var(--plat-lt)}
.anode.anode--dia{--tc:var(--dia)}
.anode.anode--eli{--tc:var(--eli)}
.ascend::before{background:linear-gradient(180deg,color-mix(in srgb,var(--plat-lt) 70%,transparent),var(--dia) 50%,var(--eli))}
/* Đặc quyền: 3 ô hạng */
.pvx__tier.pvx__tier--plat{--tc:var(--plat-tc);--tline:rgba(169,180,204,.8);background:linear-gradient(180deg,rgba(104,119,152,.58) 0%,rgba(104,119,152,0) 100%)}
.pvx__tier.pvx__tier--dia{--tc:var(--dia);--tline:rgba(227,230,234,.85);background:linear-gradient(180deg,rgba(154,162,175,.46) 0%,rgba(154,162,175,0) 100%)}
.pvx__tier.pvx__tier--eli{--tc:var(--eli);--tline:rgba(213,174,149,.85);background:linear-gradient(180deg,rgba(156,114,89,.6) 0%,rgba(156,114,89,0) 100%)}
.pvx__tier--plat b{color:#C3CCDD}
.pvx__tier--dia b{color:var(--dia)}
.pvx__tier--eli b{color:var(--eli-lt)}
.pvx__tier--plat .pvx__v i::before{background:var(--plat-lt)}
.pvx__tier--dia .pvx__v i::before{background:var(--dia)}
.pvx__tier--eli .pvx__v i::before{background:var(--eli)}
/* Emblem hạng (Đặc quyền, Điều kiện) */
.tcard--plat .emblem,.cmp__tier--plat .emblem,.pvx__tier--plat .emblem{--tc:var(--plat-lt);background:radial-gradient(110% 80% at 25% 8%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 50%),radial-gradient(90% 70% at 80% 100%,rgba(221,226,236,.9) 0%,rgba(221,226,236,0) 55%),#8F9CBA}
.tcard--dia .emblem,.cmp__tier--dia .emblem,.pvx__tier--dia .emblem{--tc:var(--dia);background:radial-gradient(110% 80% at 25% 8%,#FFFFFF 0%,rgba(255,255,255,0) 50%),radial-gradient(90% 70% at 80% 100%,#FFFFFF 0%,rgba(255,255,255,0) 55%),#DCE0E6}
.tcard--eli .emblem,.cmp__tier--eli .emblem,.pvx__tier--eli .emblem{--tc:var(--eli);background:linear-gradient(180deg,#F8EDE5 0%,#E8CBB7 28%,#C49A7F 56%,#E2C0A9 82%,#F6E8DE 100%)}
/* Điều kiện: thẻ hạng */
.tcard.tcard--plat{--tc:#C3CCDD;--tint:rgba(104,119,152,.1);--tline:rgba(169,180,204,.22);--num:linear-gradient(180deg,#FFFFFF 0%,#DDE2EC 40%,#7E8BAA 54%,#EEF1F6 80%,#A9B4CC 100%);box-shadow:inset 0 0 0 1px var(--tline),inset 0 -60px 100px -70px rgba(104,119,152,.3)}
.tcard.tcard--dia{--tc:var(--dia);--tint:rgba(227,230,234,.05);--tline:rgba(227,230,234,.22);--num:linear-gradient(180deg,#FFFFFF 0%,#F1F3F6 40%,#AEB5C0 54%,#FAFBFC 80%,#D3D7DE 100%);box-shadow:inset 0 0 0 1px var(--tline),inset 0 -60px 100px -70px rgba(227,230,234,.14)}
.tcard.tcard--eli{--tc:var(--eli);--tint:rgba(156,114,89,.12);--tline:rgba(213,174,149,.3);--num:linear-gradient(180deg,#FFF6EF 0%,#E8CBB7 40%,#B58B70 54%,#F6E8DE 80%,#D5AE95 100%);box-shadow:inset 0 0 0 1px var(--tline),inset 0 -60px 100px -70px rgba(156,114,89,.28)}
.tcard--eli::after{background:conic-gradient(from var(--ang),transparent 0deg,transparent 200deg,#F6E8DE 300deg,#9C7259 340deg,transparent 360deg)}
html.figma-static .tcard--eli{box-shadow:inset 0 0 0 1px rgba(213,174,149,.4)}

/* =====================================================================
   v0.60 · Diamond sáng hơn để tách bạch với Platinum (04/11)
   Diamond giữ gốc #E3E6EA nhưng đẩy toàn bộ shading lên tông trắng sáng:
   hi #FFFFFF · lt #F6F7F9 · base hiển thị #EEF0F3 · dk #BCC2CC · tint #C9CED6
   ===================================================================== */
:root{
  --dia-hi:#FFFFFF;--dia-lt:#F6F7F9;--dia-on:#EEF0F3;--dia-dk:#BCC2CC;--dia-tint:#C9CED6;
  --mat-dia:linear-gradient(135deg,#FFFFFF 0%,#F6F7F9 28%,#D3D8DF 52%,#FFFFFF 72%,#C3C9D2 100%);
}
.step.step--dia,.step-pop.step--dia{--tc:var(--dia-on);--tint:var(--dia-tint);--g1:#FFFFFF;--g2:var(--dia-dk);--g3:var(--dia-lt)}
.anode.anode--dia{--tc:#F6F7F9}
.ascend::before{background:linear-gradient(180deg,color-mix(in srgb,var(--plat-lt) 70%,transparent),#F6F7F9 50%,var(--eli))}
.pvx__tier.pvx__tier--dia{--tc:var(--dia-on);--tline:rgba(255,255,255,.95);background:linear-gradient(180deg,rgba(227,230,234,.36) 0%,rgba(227,230,234,.05) 100%)}
.pvx__tier--dia b{color:#FFFFFF}
.pvx__tier--dia .pvx__v i::before{background:#FFFFFF}
.tcard--dia .emblem,.cmp__tier--dia .emblem,.pvx__tier--dia .emblem{--tc:#FFFFFF;background:radial-gradient(110% 80% at 25% 8%,#FFFFFF 0%,rgba(255,255,255,0) 55%),radial-gradient(90% 70% at 80% 100%,#FFFFFF 0%,rgba(255,255,255,0) 60%),#EEF0F3}
.tcard.tcard--dia{--tc:var(--dia-on);--tint:rgba(227,230,234,.09);--tline:rgba(238,240,243,.34);--num:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 40%,#C9CED6 54%,#FFFFFF 80%,#E3E6EA 100%);box-shadow:inset 0 0 0 1px var(--tline),inset 0 -60px 100px -70px rgba(238,240,243,.26)}
.pvx__tier.pvx__tier--dia{background:linear-gradient(180deg,rgba(240,242,245,.48) 0%,rgba(227,230,234,.16) 55%,rgba(227,230,234,.06) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.22)}
.pvx__tier--dia .pvx__v{text-shadow:0 1px 2px rgba(7,18,48,.35)}
.tcard.tcard--dia{--tint:rgba(238,240,243,.12);--tline:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px var(--tline),inset 0 -60px 100px -60px rgba(255,255,255,.3),inset 0 80px 120px -90px rgba(255,255,255,.22)}