/* VND's own portal direction. See design/VND_PORTAL_2026-09-08.md. */
:root {
  --butter:#F6E79D; --cream:#FFF8DA; --blue:#244DB5; --blue-hover:#153E95;
  --bg:#FAFAFA; --raised:#FFF8DA; --panel:#EDF2FC; --soft:#EDF2FC;
  --text:#192B4D; --muted:#526079; --faint:#617088;
  --accent:#244DB5; --accent-hover:#153E95; --paper:#EDF2FC; --paper-soft:#FAFAFA;
  --ink:#192B4D; --ink-soft:#526079; --light-accent:#244DB5; --strong:700;
}
[hidden] { display:none !important; }
body { color:var(--ink); background:var(--bg); }
.wrap { width:min(1280px,calc(100% - 96px)); }
.masthead { padding-block:20px; gap:48px; }
.brand { display:flex; align-items:center; gap:16px; }
.brand-name { font-size:40px; line-height:1; font-weight:700; }
.brand-detail { font-size:12px; line-height:1.45; color:var(--muted); }
.brand-detail b { font-weight:400; display:block; }
.brand:hover { color:var(--blue); }
.nav { gap:32px; }
.nav a { font-weight:700; font-size:16px; }
.nav .search-trigger { background:var(--soft); padding:8px 16px; gap:8px; border-radius:var(--radius); }
.nav .search-trigger:hover { background:var(--cream); color:var(--ink); }
.nav .search-label { font-size:14px; font-weight:400; }
.site-footer { font-size:13px; padding-block:32px; }
.article-footer { background:var(--soft); color:var(--ink); }
.button { background:var(--blue); color:var(--bg); min-height:48px; padding:12px 24px; gap:32px; }
.button:hover { background:var(--blue-hover); color:var(--bg); }
.text-link:hover { color:var(--blue); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.section-heading h2 { font-size:28px; line-height:1.3; }
.section-eyebrow { color:var(--muted); font-size:13px; margin-bottom:8px; }
.section-heading .text-link { font-size:14px; white-space:nowrap; }
/* A low, full-width campaign surface. Products remain flat and unaltered. */
.feature { background:var(--butter); overflow:hidden; }
.feature-wrap { padding-top:32px; }
.feature-slides { position:relative; }
.feature-slide { display:grid; grid-template-columns:6fr 6fr; gap:16px 64px; align-items:center; }
.feature-copy { padding-left:32px; }
.feature-eyebrow { font-size:13px; margin-bottom:16px; color:var(--ink); }
.feature-copy h1,.feature-copy h2 { font-size:44px; line-height:1.16; margin:0 0 16px; }
.feature-description { font-size:17px; line-height:1.65; color:var(--ink); }
.feature-copy .button { margin-top:24px; }
.feature-visual { display:grid; grid-template-columns:minmax(0,1fr) 144px; gap:24px; align-items:center; }
.feature-visual figure { min-width:0; }
.feature-visual img { width:100%; height:232px; object-fit:contain; display:block; }
.feature-visual figcaption { font-size:12px; text-align:center; color:var(--ink); margin-top:8px; }
.feature-benefit span { font-size:14px; display:block; }
.feature-benefit strong { font-size:64px; line-height:1.15; display:block; font-variant-numeric:tabular-nums; margin-top:4px; }
.feature-benefit p { font-size:13px; line-height:1.55; margin-top:8px; }
.feature-costs .feature-benefit strong { font-size:32px; }
.feature-fineprint { grid-column:1/-1; text-align:center; font-size:12px; line-height:1.6; color:var(--ink); padding-top:4px; }
.feature-fineprint span { white-space:nowrap; margin-left:12px; }
.feature-controls { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:16px; }
.feature-topics { display:flex; align-items:center; gap:32px; }
.feature-topics button { font-size:13px; font-weight:400; display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 0; color:var(--ink); }
.feature-topics button:hover { background:transparent; color:var(--blue); }
.feature-topics button[aria-pressed=true] { font-weight:700; }
.topic-marker { display:block; width:6px; height:6px; background:var(--ink); opacity:.3; }
[aria-pressed=true]>.topic-marker { opacity:1; background:var(--blue); }
.feature-paging { display:flex; align-items:center; gap:8px; }
.feature-count { display:flex; gap:8px; margin-right:16px; font-size:13px; font-variant-numeric:tabular-nums; }
.feature-paging button { display:grid; place-items:center; min-width:44px; height:44px; background:var(--cream); color:var(--ink); }
.feature-paging button:hover { background:var(--bg); }
/* Product shelf: image, name, condition and action share fixed tracks. */
.card-shelf { padding-block:48px; }
.card-shelf-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px; }
.shelf-card { display:grid; grid-template-rows:128px 24px 36px 48px 44px 44px; text-decoration:none; min-width:0; align-items:start; }
.shelf-art { margin:0; width:100%; height:128px; display:flex; align-items:center; justify-content:center; }
.shelf-art img { width:100%; max-width:188px; height:112px; object-fit:contain; display:block; transition:transform .2s; }
.shelf-card:hover .shelf-art img { transform:translateY(-2px); }
.shelf-image-type { font-size:11px; line-height:1.6; color:var(--faint); text-align:center; align-self:center; }
.shelf-card h3 { font-size:22px; line-height:1.3; text-align:center; align-self:center; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.shelf-subtitle { font-size:15px; line-height:1.6; text-align:center; color:var(--muted); padding-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shelf-state { height:100%; font-size:12px; line-height:1.6; text-align:center; color:var(--muted); padding-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shelf-action { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:700; min-height:44px; align-self:end; }
.shelf-action .icon { width:16px; height:16px; }
.shelf-note { margin-top:24px; color:var(--faint); font-size:13px; }
.brand-art { background:var(--soft); }
.shelf-art.brand-art img { max-width:156px; height:40px; }
.shelf-card[data-card=redotpay] .shelf-art { background:transparent; }
/* Magazine: one cover story followed by flat, informative article rows. */
.magazine { background:var(--soft); padding-block:48px; }
.story-layout { display:grid; grid-template-columns:5fr 7fr; gap:64px; }
.lead-story { display:block; text-decoration:none; min-width:0; }
.lead-story-art { position:relative; background:var(--cream); display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:32px; height:256px; overflow:hidden; }
.lead-story-art img { width:100%; height:176px; object-fit:contain; display:block; }
.story-art-question { font-size:64px; line-height:1.2; font-weight:700; }
.lead-story-copy { padding-top:24px; }
.story-category { font-size:13px; color:var(--muted); margin-bottom:8px; }
.lead-story h3 { font-size:32px; line-height:1.3; margin-bottom:16px; }
.story-summary { font-size:16px; color:var(--muted); line-height:1.75; }
.story-meta { font-size:12px; display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; color:var(--muted); margin-top:16px; }
.story-meta .icon { width:16px; height:16px; }
.story-meta time { white-space:nowrap; }
.story-list { display:grid; gap:24px; }
.story-row { display:grid; grid-template-columns:120px minmax(0,1fr) 20px; align-items:center; gap:24px; text-decoration:none; min-width:0; }
.story-thumb { background:var(--bg); display:flex; align-items:center; justify-content:center; height:100px; width:120px; padding:12px; }
.story-thumb img { display:block; width:100%; height:76px; object-fit:contain; }
.story-thumb.brand-art img { height:24px; }
.story-row h3 { font-size:19px; line-height:1.35; }
.story-row h3 br { display:none; }
.story-row-summary { font-size:13px; color:var(--muted); margin-top:4px; }
.story-row .story-meta { margin-top:8px; font-size:11px; }
.story-row:hover h3,.lead-story:hover h3 { color:var(--blue); }
.reader-tools { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding-block:48px; }
.reader-tools p { font-size:13px; color:var(--muted); margin-bottom:8px; }
.reader-tools h2 { font-size:24px; line-height:1.35; }
.reader-tools .text-link { font-size:15px; margin-top:16px; }
/* Carry the independent VND identity into the existing reading and calculation pages. */
.reading-page .masthead-shell { background:var(--bg); color:var(--ink); }
.article-intro { padding:32px 0; }
.article-status { background:var(--cream); }
.answer-block { background:var(--soft); }
.step-check,.faq-list details,.fee-row:nth-child(odd),.mobile-toc { background:var(--soft); }
.reading-page .button { background:var(--blue); color:var(--bg); }
.reading-page .button:hover { background:var(--blue-hover); }
.recommend-hero { background:var(--bg); }
.pick-summary { background:var(--cream); }
.reco-table-section { background:var(--soft); }
.compare-table thead,.compare-table tbody tr:nth-child(even) { background:var(--bg); }
.calculator { background:var(--soft); }
.number-field,.search-field,.search-result { background:var(--bg); }
.dialog-close { background:var(--bg); }
.search-result:hover { background:var(--cream); color:var(--ink); }
.dialog-body h2 { color:var(--ink); }
@media(min-width:1600px) {
  .wrap { width:min(1440px,calc(100% - 128px)); }
  .feature-wrap { padding-top:40px; }
  .feature-slide { gap:16px 96px; }
  .feature-copy { padding-left:64px; }
  .feature-visual { grid-template-columns:minmax(0,1fr) 160px; gap:32px; }
  .feature-visual img { height:248px; }
  .shelf-art img { max-width:208px; height:128px; }
  .shelf-card { grid-template-rows:144px 24px 36px 48px 44px 44px; }
  .shelf-art { height:144px; }
  .story-layout { gap:96px; }
}
@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .brand-name { font-size:36px; }
  .nav { gap:24px; }
  .nav .nav-exchange { display:none; }
  .feature-slide { gap:16px 32px; }
  .feature-copy { padding-left:0; }
  .feature-copy h1,.feature-copy h2 { font-size:36px; }
  .feature-visual { grid-template-columns:minmax(0,1fr); gap:12px; }
  .feature-visual img { height:172px; }
  .feature-benefit { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0 16px; }
  .feature-benefit span { font-size:12px; }
  .feature-benefit strong { font-size:40px; grid-column:2; grid-row:1/3; }
  .feature-benefit p { font-size:11px; margin-top:0; }
  .feature-topics { gap:24px; }
  .feature-topics button { font-size:12px; }
  .card-shelf-track { gap:24px; }
  .shelf-card { grid-template-rows:112px 32px 36px 48px 48px 44px; }
  .shelf-art { height:112px; }
  .shelf-art img { height:96px; }
  .shelf-card h3 { font-size:20px; }
  .shelf-subtitle { font-size:14px; }
  .shelf-action { font-size:12px; }
  .shelf-art.brand-art img { max-width:120px; }
  .story-layout { grid-template-columns:1fr 1fr; gap:40px; }
  .lead-story-art { padding:24px; height:232px; }
  .story-art-question { font-size:48px; }
  .story-row { grid-template-columns:88px minmax(0,1fr); gap:16px; }
  .story-row>.icon { display:none; }
  .story-thumb { width:88px; height:88px; padding:8px; }
  .story-thumb img { height:64px; }
  .story-row h3 { font-size:17px; }
  .story-row-summary { display:none; }
}
@media(max-width:767px) {
  .wrap { width:calc(100% - 40px); }
  .masthead { padding-block:16px; gap:16px; flex-wrap:wrap; }
  .brand { gap:12px; }
  .brand-name { font-size:32px; }
  .brand-detail { font-size:10px; }
  .nav { gap:16px; }
  .nav a { font-size:14px; }
  .nav .desktop-nav { display:none; }
  .nav .nav-stories { display:none; }
  .nav .search-trigger { width:44px; height:44px; padding:8px; background:transparent; }
  .feature-wrap { padding-top:24px; }
  .feature-slide { grid-template-columns:minmax(0,1fr) 120px; gap:16px; align-items:center; }
  .feature-copy { display:contents; }
  .feature-eyebrow { grid-column:1/-1; font-size:11px; margin:0; }
  .feature-copy h1,.feature-copy h2 { grid-column:1/-1; font-size:32px; line-height:1.2; margin:0; }
  .feature-description { grid-column:1; grid-row:3; font-size:15px; line-height:1.6; }
  .feature-description br { display:none; }
  .feature-visual { display:block; grid-column:2; grid-row:3/5; }
  .feature-visual img { height:88px; }
  .feature-visual figcaption { font-size:10px; line-height:1.4; margin-top:4px; }
  .feature-benefit { display:block; text-align:center; margin-top:12px; }
  .feature-benefit span { font-size:11px; }
  .feature-benefit strong { font-size:36px; margin:0; }
  .feature-benefit p { font-size:10px; line-height:1.5; margin-top:2px; }
  .feature-costs .feature-benefit strong { font-size:22px; }
  .feature-copy .button { grid-column:1; grid-row:4; align-self:start; margin-top:0; padding:10px 12px; min-height:48px; font-size:13px; gap:8px; justify-content:center; }
  .feature-copy .button .icon { width:16px; height:16px; }
  .feature-fineprint { grid-column:1/-1; font-size:10px; text-align:left; padding-top:0; }
  .feature-fineprint span { display:none; }
  .feature-controls { gap:16px; padding-block:12px; }
  .feature-topics { gap:12px; }
  .feature-topics button { width:24px; height:32px; min-height:32px; padding:0; justify-content:center; font-size:0; }
  .topic-marker { width:8px; height:8px; }
  .feature-paging { gap:8px; }
  .feature-count { margin-right:4px; font-size:12px; }
  .feature-paging button { min-width:40px; height:40px; }
  .card-shelf { padding-block:32px; }
  .section-heading { gap:16px; margin-bottom:24px; }
  .section-heading h2 { font-size:24px; }
  .section-eyebrow { font-size:12px; margin-bottom:6px; }
  .section-heading .text-link { font-size:12px; gap:8px; }
  .section-heading .text-link .icon { width:16px; height:16px; }
  .card-shelf-track { display:flex; gap:24px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x proximity; scrollbar-width:thin; padding:4px 0 12px; }
  .shelf-card { flex:0 0 148px; scroll-snap-align:start; grid-template-rows:104px 32px 36px 48px 44px 44px; }
  .shelf-art { height:104px; }
  .shelf-art img { height:92px; max-width:144px; }
  .shelf-image-type { font-size:10px; }
  .shelf-subtitle { font-size:14px; }
  .shelf-state { font-size:11px; }
  .shelf-action { font-size:12px; gap:4px; }
  .shelf-note { font-size:12px; margin-top:16px; }
  .magazine { padding-block:32px; }
  .story-layout { grid-template-columns:1fr; gap:32px; }
  .lead-story-art { height:216px; padding:24px; }
  .lead-story-art img { height:152px; }
  .story-art-question { font-size:56px; }
  .lead-story-copy { padding-top:20px; }
  .lead-story h3 { font-size:28px; }
  .story-summary { font-size:16px; }
  .story-list { gap:24px; }
  .story-row { grid-template-columns:96px minmax(0,1fr); gap:16px; }
  .story-thumb { width:96px; height:96px; }
  .story-row h3 { font-size:18px; }
  .story-row .story-category { font-size:12px; margin-bottom:4px; }
  .story-row .story-meta { font-size:10px; gap:4px 12px; }
  .reader-tools { grid-template-columns:1fr; gap:32px; padding-block:32px; }
  .reader-tools h2 { font-size:22px; }
  .site-footer { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .shelf-art img { transition:none; }
  .shelf-card:hover .shelf-art img { transform:none; }
}
.brand .brand-name { font-weight:700; }
.shelf-subtitle { font-size:16px; }
@media(max-width:767px) {
  .feature-description { font-size:16px; }
  .feature-topics button { min-height:44px; width:44px; }
  .feature-paging button { min-width:44px; height:44px; }
  .feature-visual figcaption { font-size:11px; }
  .shelf-subtitle { font-size:16px; }
  .shelf-card { grid-template-rows:104px 32px 36px 52px 44px 44px; }
}

@media(max-width:767px) {
  .feature-benefit p,.feature-fineprint { font-size:12px; }
}

@media(max-width:767px) {
  .feature-wrap { padding-top:20px; }
  .feature-slide { gap:12px 16px; }
  .feature-fineprint span { display:block; margin:4px 0 0; font-size:11px; }
  .feature-controls { padding-block:8px; }
}