/* Bộ khối landing chung của năm web SaaS (myHRM, myCRM, myFNB, myPMS, myINFO), theme.css
   Tách 13/11/2026 từ myinfo-landing-web (main a6c6f992). Một tệp cho mọi trang: màu (token), cỡ chữ, thành phần dùng từ hai trang trở lên,
   vỏ trang (đầu, chân, thanh đáy, nút nổi) và mọi khối của trang chủ. Lớp mang đúng tên khoá data-k.
   Theo hệ TUỆ TRÂN Brand (tuetran-brand/brand-kit): nền phẳng, không gradient, không bóng, bo 11 và 18,
   JetBrains Mono cho mã số, cỡ chữ theo thang 28 · 26 · 22 · 18 · 17 · 16 · 15 · 14 · 13 · 12 · 11 · 10, đệm và khe theo thang 2 · 4 · 6 · 8 · 10 · 12 · 16 · 20 · 24 · 32 · 40 · 48.
   Ba khổ: máy tính (từ 1024), máy tính bảng (561 đến 1023), điện thoại (đến 560); ở điện thoại chữ không dưới 13, vùng chạm từ 44.
   Màu nhấn ở :root là myINFO #1D4ED8 (bảng Brand đã đo ở to-ve/05-so-chot.json); sản phẩm khác do theme.js ghi đè từ SAAS_LANDING.accent
   (chỉ chọn giữa màu nhấn, chữ đậm và trắng, không pha màu). Kiểu trình bày của khối theo data-style; xem pages.html mục «Khối». */

:root {
  --tt-myinfo: #1D4ED8;
  --tt-radius-card: 18px; --tt-radius-btn: 11px; --tt-section-gap: 96px;
  --radius-field: 11px; --radius-inner: 14px;
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --page: #F4F6F8; --page-blur: rgba(244,246,248,0.94); --surface: #FFFFFF; --surface-2: #F4F6F8;
  --border: #E3E7ED; --border-strong: #E3E7ED; --text: #172948; --text-2: #565E6D; --text-3: #565E6D;
  --band-line: #2A3D5C; --band-line-strong: #3C4E6B; --band-text: #C3CCD9; --band-muted: #9AA8BC;
  --action: #1D4ED8; --action-fill: #1D4ED8; --action-on: #FFFFFF; --action-soft: #EEF3FE; --action-text: #1D4ED8; --action-hover: #1E3A8A;
  --focus: rgba(29,78,216,0.22); --hero: #172948; --brand-info: #1D4ED8;
  --success: #12805C; --success-bg: #E8F6F1; --success-text: #0E6449;
  --warning: #B4690E; --warning-bg: #FDF4E7; --warning-text: #8C5209;
  --info: #2563A8; --info-bg: #EDF3FB; --info-text: #1E4F86; --danger: #C0362C;
  --icon-moon: block; --icon-sun: none; --mark-text: #93A0B4;
  --accent: #1D4ED8; --band-accent: #93B4F8; --band-accent-on: #0F1B2E; --band-shot: #0F1B2E;
}
:root[data-theme="dark"] {
  --page: #0F1B2E; --page-blur: rgba(15,27,46,0.94); --surface: #172948; --surface-2: #14223A;
  --border: #2A3D5C; --border-strong: #3C4E6B; --text: #F2F5F9; --text-2: #9AA8BC; --text-3: #9AA8BC;
  --action: #6F97F6; --action-fill: #6F97F6; --action-on: #0F1B2E; --action-soft: #17284D; --action-text: #93B4F8; --action-hover: #BFD2FB;
  --focus: rgba(111,151,246,0.35); --hero: #0F1B2E; --brand-info: #93B4F8;
  --success: #6FD3B0; --success-bg: #123F33; --success-text: #6FD3B0;
  --warning: #E3A857; --warning-bg: #3B2A12; --warning-text: #E3A857;
  --info: #7FB0EA; --info-bg: #152C4A; --info-text: #7FB0EA; --danger: #F0857B;
  --icon-moon: none; --icon-sun: block; --mark-text: #5A6880;
  --accent: #6F97F6; --band-shot: #172948;
  color-scheme: dark;
}
html { scroll-behavior: smooth; color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button { font-family: inherit; font-size: 13px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
:where(a) { color: var(--action-text, #1D4ED8); }
.lnk { color: inherit; text-decoration: none; }
:where(a):hover { color: var(--action-hover, #1E3A8A); }
.site-menu-link[aria-current] { color:var(--text, #172948); text-decoration:underline; text-underline-offset:6px; }
.site-menu a.lnk:hover { color: var(--action-hover, #1E3A8A) !important; }
[id] { scroll-margin-top: calc(66px - var(--tt-section-gap) / 2); }
:focus-visible { outline: 2px solid var(--action, #1D4ED8); outline-offset: 2px; }
.skip { display: inline-flex; align-items: center; min-height: 44px; position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--surface, #FFFFFF); color: var(--text, #172948); border: 1px solid var(--border-strong, #E3E7ED); border-radius: var(--tt-radius-btn, 11px); padding: 10px 16px; font-size: 15px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.nojs-bar { max-width: 1200px; margin: 0 auto; padding: 12px 40px; display: flex; flex-wrap: wrap; gap: 16px; font-size: 15px; }
.nojs-bar a { color: inherit; }
.fab { width: 52px; padding: 0; justify-content: center; transition: width .22s ease, padding .22s ease; }
.fab:hover { width: auto; padding: 0 20px; justify-content: flex-start; }
.fab-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .22s ease, opacity .18s ease, padding .22s ease; }
.fab:hover .fab-label, .fab:focus-visible .fab-label { max-width: 210px; opacity: 1; padding-left: 10px; }
.fab:focus-visible { width: auto; padding: 0 20px; justify-content: flex-start; }
.tabbar { display: none; }
html[data-lang="en"] [data-badge="vi"], html:not([data-lang="en"]) [data-badge="en"] { display: none !important; }

/* ---- sinh từ bản vẽ cũ ---- */
/* hero */
.hero-point-number { font-size:15px; color:var(--band-accent, #93B4F8); font-variant-numeric:tabular-nums; flex-shrink:0; }
.hero-point-text { font-size:15px; line-height:1.55; color:var(--band-text, #C3CCD9); }
.hero-point { padding:16px 0; border-top:1px solid var(--band-line, #2A3D5C); display:flex; gap:16px; align-items:baseline; }
.hero-point-last { padding:16px 0; border-top:1px solid var(--band-line, #2A3D5C); border-bottom:1px solid var(--band-line, #2A3D5C); display:flex; gap:16px; align-items:baseline; }
.hero-card-time { font-size:14px; font-weight:700; color:var(--text, #172948); }
.hero-card-name, .feature-row-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-card-sub, .feature-row-note, .scan-meta-text { font-size:13px; color:var(--text-3, #565E6D); }
.hero-card-titles, .invite-item-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.hero-card-status, .post-status { border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; white-space:nowrap; text-align:center; }
.hero-card-row { padding:12px 20px; border-bottom:1px solid var(--border, #E3E7ED); display:grid; grid-template-columns:52px minmax(0, 1fr) auto; gap:16px; align-items:center; font-variant-numeric:tabular-nums; }
.hero-card-title, .feature-card-title { font-size:16px; font-weight:700; }
.hero-card-chip { background:var(--success-bg, #E8F6F1); color:var(--success-text, #0E6449); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; white-space:nowrap; text-align:center; }
.hero-card-head, .scan-head { padding:16px 20px; border-bottom:1px solid var(--border, #E3E7ED); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-card-foot-icon { flex-shrink:0; color:var(--success, #12805C); }
.hero-card-foot { padding:12px 20px; background:var(--surface-2, #F4F6F8); display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-2, #565E6D); }
.hero-card { position:relative; z-index:1; background:var(--surface, #FFFFFF); color:var(--text, #172948); border:1px solid var(--border-strong, #E3E7ED); border-radius:var(--tt-radius-card, 18px); overflow:hidden; }
.hero-grid-bg { position:absolute; inset:-10px 0 0; pointer-events:none; }
.hero-art { position:relative; padding:20px 0; }
.hero-eyebrow { align-self:flex-start; border:1px solid var(--band-line-strong, #3C4E6B); color:var(--band-accent, #93B4F8); border-radius:999px; padding:8px 12px; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.hero-title { margin:0; font-size:28px; line-height:1.16; font-weight:700; letter-spacing:-0.02em; }
.hero-lead { margin:0; font-size:18px; line-height:1.65; color:var(--band-muted, #9AA8BC); max-width:520px; }
.hero-cta-trial { height:52px; padding:0 24px; border-radius:var(--tt-radius-btn, 11px); background:var(--band-accent, #93B4F8); color:var(--band-accent-on, #0F1B2E); font-size:16px; font-weight:700; display:flex; align-items:center; }
.hero-cta-demo { height:52px; padding:0 24px; border-radius:var(--tt-radius-btn, 11px); border:1px solid var(--band-line-strong, #3C4E6B); color:#FFFFFF; font-size:16px; font-weight:600; display:flex; align-items:center; }
.hero-actions, .trial-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-points { display:flex; flex-direction:column; margin-top:6px; }
.hero-copy, .trial-copy { display:flex; flex-direction:column; gap:24px; }
.hero-row { max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap:48px; align-items:center; }
.hero { background:var(--hero, #172948); color:#FFFFFF; padding:calc(var(--tt-section-gap) / 2) 0; }
/* post */
.post-avatar { width:32px; height:32px; border-radius:16px; background:var(--action-soft, #EEF3FE); color:var(--action-text, #1D4ED8); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; line-height:1; }
/* feature */
.feature-row-titles { display:flex; flex-direction:column; gap:2px; min-width:0; }
/* post */
.post-row { padding:12px 20px; border-bottom:1px solid var(--border, #E3E7ED); display:grid; grid-template-columns:32px minmax(0, 1fr) auto; gap:12px; align-items:center; font-variant-numeric:tabular-nums; }
/* feature */
.feature-point { padding:12px 0; border-top:1px solid var(--border, #E3E7ED); font-size:15px; line-height:1.55; color:var(--text-2, #565E6D); }
.feature-point-last { padding:12px 0; border-top:1px solid var(--border, #E3E7ED); border-bottom:1px solid var(--border, #E3E7ED); font-size:15px; line-height:1.55; color:var(--text-2, #565E6D); }
.feature-points { display:flex; flex-direction:column; margin-top:2px; }
.feature-label { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--action-text, #1D4ED8); }
.feature-title { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.012em; line-height:1.22; }
.feature-text { margin:0; font-size:16px; line-height:1.68; color:var(--text-2, #565E6D); }
.feature-copy, .legal-section-list { display:flex; flex-direction:column; gap:16px; }
/* post */
.post-label { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3, #565E6D); }
.post-head { padding:16px 20px; border-bottom:1px solid var(--border, #E3E7ED); display:flex; flex-direction:column; gap:6px; }
/* feature */
.feature-card, .feature-card-2 { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); overflow:hidden; }
.feature-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:40px; align-items:center; }
/* inbox */
.inbox-avatar { width:36px; height:36px; border-radius:18px; background:var(--surface-2, #F4F6F8); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; line-height:1; }
.inbox-snippet { font-size:13px; color:var(--text-3, #565E6D); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-page { font-size:12px; color:var(--text-3, #565E6D); font-variant-numeric:tabular-nums; }
.inbox-row { padding:12px 20px; border-bottom:1px solid var(--border, #E3E7ED); display:grid; grid-template-columns:36px minmax(0, 1fr) auto; gap:12px; align-items:center; }
.inbox-quick-chip { border:1px solid var(--border-strong, #E3E7ED); background:var(--surface, #FFFFFF); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; text-align:center; }
.inbox-tab-active { color:var(--action-text, #1D4ED8); border-bottom:2px solid var(--action, #1D4ED8); padding-bottom:6px; }
.inbox-tab { color:var(--text-3, #565E6D); padding-bottom:6px; }
.inbox-tabs { padding:16px 20px; border-bottom:1px solid var(--border, #E3E7ED); display:flex; gap:20px; font-size:14px; font-weight:600; }
.inbox-quick-chips { display:flex; flex-wrap:wrap; gap:8px; }
.inbox-quick { padding:16px 20px; display:flex; flex-direction:column; gap:10px; background:var(--surface-2, #F4F6F8); }
/* scan */
.scan-text { font-size:14px; line-height:1.5; }
.scan-tag { background:var(--action-soft, #EEF3FE); color:var(--action-text, #1D4ED8); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; text-align:center; }
.scan-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.scan-row { padding:12px 20px; border-bottom:1px solid var(--border, #E3E7ED); display:flex; flex-direction:column; gap:6px; }
/* features */
.features-number, .more-features-number, .rollout-number, .comparison-number, .trust-number, .pricing-number, .faq-number, .contact-number { font-size:28px; line-height:1; color:var(--action, #1D4ED8); font-variant-numeric:tabular-nums; flex-shrink:0; }
.features-label, .more-features-label, .rollout-label, .comparison-label, .trust-label, .pricing-label, .faq-label, .contact-label { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3, #565E6D); }
.features-title, .more-features-title, .rollout-title, .comparison-title, .trust-title, .trial-title, .pricing-title, .faq-title, .contact-title { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.015em; line-height:1.18; }
.features-lead { margin:0; font-size:16px; line-height:1.62; color:var(--text-2, #565E6D); }
.features-head-body { display:flex; flex-direction:column; gap:12px; max-width:680px; }
.features-head, .more-features-head, .rollout-head, .comparison-head, .trust-head, .pricing-head, .faq-head, .contact-head { display:flex; gap:32px; align-items:baseline; border-top:2px solid var(--text, #172948); padding-top:20px; }
.features-wrap { max-width:1200px; margin:0 auto; padding:0 40px; display:flex; flex-direction:column; gap:40px; }
.features, .more-features, .rollout, .comparison, .trust, .pricing, .faq, .contact { padding:calc(var(--tt-section-gap) / 2) 0; }
/* more */
.more-feature-title { font-size:18px; font-weight:600; line-height:1.3; }
.more-feature-text { margin:0; font-size:15px; line-height:1.62; color:var(--text-2, #565E6D); }
.more-feature { padding:20px 0; border-top:1px solid var(--border, #E3E7ED); display:flex; flex-direction:column; gap:8px; }
.more-features-head-body, .rollout-head-body, .pricing-head-body { display:flex; flex-direction:column; gap:12px; max-width:620px; }
.more-features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:0 48px; }
.more-features-wrap, .rollout-wrap, .comparison-wrap, .pricing-wrap { max-width:1200px; margin:0 auto; padding:0 40px; display:flex; flex-direction:column; gap:48px; }
/* rollout */
.rollout-step-number { font-size:28px; line-height:1; color:var(--action, #1D4ED8); font-variant-numeric:tabular-nums; flex-shrink:0; min-width:52px; }
.rollout-step-text { font-size:18px; font-weight:600; line-height:1.5; }
.rollout-step { padding:24px 0; border-top:1px solid var(--border, #E3E7ED); border-bottom:0; display:flex; gap:40px; align-items:baseline; }
.rollout-steps, .comparison-list, .trust-list, .demo-account-list, .faq-list, .contact-steps, .legal-list, .legal-toc-list { display:flex; flex-direction:column; }
/* comparison */
.comparison-row-title, .pricing-plan-name, .request-sent-title { font-size:22px; font-weight:600; line-height:1.3; }
.comparison-row-text { margin:0; font-size:15px; line-height:1.66; color:var(--text-2, #565E6D); }
.comparison-row { padding:24px 0; border-top:1px solid var(--border, #E3E7ED); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:12px 48px; align-items:start; }
.comparison-row-last { padding:24px 0; border-top:1px solid var(--border, #E3E7ED); border-bottom:1px solid var(--border, #E3E7ED); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:12px 48px; align-items:start; }
.comparison-head-body { display:flex; flex-direction:column; gap:12px; max-width:660px; }
/* trust */
.trust-item-title { font-size:18px; font-weight:600; line-height:1.3; }
.trust-item-text, .pricing-plan-text, .contact-step-text, .request-sent-text { font-size:15px; line-height:1.62; color:var(--text-2, #565E6D); }
.trust-item { padding:20px 0; border-top:1px solid var(--border, #E3E7ED); border-bottom:0; display:flex; flex-direction:column; gap:6px; }
.trust-head-body, .trial-head-body, .faq-head-body, .contact-head-body, .legal-toc, .site-footer-column { display:flex; flex-direction:column; gap:12px; }
.trust-wrap, .faq-row { max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:40px; align-items:start; }
/* trial */
.trial-card-logo, .site-logo-image, .site-footer-logo-image { width:30px; height:30px; }
.trial-card-my, .site-logo-my { font-weight:300; color:var(--mark-text, #93A0B4); }
.trial-card-info, .site-logo-info { font-weight:700; color:var(--brand-info, #1D4ED8); }
.trial-card-name, .site-logo-text, .site-footer-logo-text { font-size:22px; line-height:1.3; }
.trial-card-brand, .site-footer-logo { display:flex; align-items:center; gap:10px; }
.trial-card-title { font-size:22px; font-weight:700; letter-spacing:-0.015em; line-height:1.3; }
.trial-card-field { border:1px solid var(--border-strong, #E3E7ED); border-radius:var(--radius-field, 11px); height:48px; display:flex; align-items:center; padding:0 16px; font-size:15px; color:var(--text-3, #565E6D); }
.trial-card-field-active { border:2px solid var(--action, #1D4ED8); border-radius:var(--radius-field, 11px); height:48px; display:flex; align-items:center; padding:0 16px; font-size:15px; color:var(--text-3, #565E6D); }
.trial-card-submit { background:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); border-radius:var(--tt-radius-btn, 11px); height:48px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; }
.trial-card { width:100%; max-width:420px; background:var(--surface, #FFFFFF); color:var(--text, #172948); border:1px solid var(--border-strong, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:32px; display:flex; flex-direction:column; gap:16px; }
.trial-art { display:flex; justify-content:center; }
/* demo */
.demo-account-label { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--band-muted, #9AA8BC); }
.demo-account-value { font-size:17px; font-weight:600; color:var(--band-muted, #9AA8BC); }
.demo-account-info { flex:1; min-width:180px; display:flex; flex-direction:column; gap:4px; }
.demo-account-copy { height:44px; min-width:96px; padding:0 16px; border-radius:var(--tt-radius-btn, 11px); border:1px solid var(--band-line-strong, #3C4E6B); color:#FFFFFF; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.demo-account-row { padding:16px 0; border-top:1px solid var(--band-line, #2A3D5C); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.demo-account-row-last { padding:16px 0; border-top:1px solid var(--band-line, #2A3D5C); border-bottom:1px solid var(--band-line, #2A3D5C); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.demo-account-note { font-size:14px; line-height:1.6; color:var(--band-muted, #9AA8BC); }
.demo-account { display:flex; flex-direction:column; gap:20px; }
/* trial */
.trial-number { font-size:28px; line-height:1; color:var(--band-accent, #93B4F8); font-variant-numeric:tabular-nums; flex-shrink:0; }
.trial-label, .site-footer-heading { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--band-muted, #9AA8BC); }
.trial-lead { margin:0; font-size:16px; line-height:1.65; color:var(--band-muted, #9AA8BC); }
.trial-head { display:flex; gap:32px; align-items:baseline; border-top:2px solid var(--band-line-strong, #3C4E6B); padding-top:20px; }
.trial-cta-open { height:52px; padding:0 24px; border-radius:var(--tt-radius-btn, 11px); background:#FFFFFF; color:#172948; font-size:15px; font-weight:600; display:flex; align-items:center; white-space:nowrap; }
.trial-cta-contact { height:52px; padding:0 24px; border-radius:var(--tt-radius-btn, 11px); border:1px solid var(--band-line-strong, #3C4E6B); color:#FFFFFF; font-size:15px; font-weight:600; display:flex; align-items:center; white-space:nowrap; }
.trial-row { max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:40px; align-items:center; }
.trial { background:var(--hero, #172948); color:#FFFFFF; padding:calc(var(--tt-section-gap) / 2) 0; }
/* pricing */
.pricing-plan-price { font-size:28px; font-weight:700; letter-spacing:-0.015em; line-height:1.3; }
.pricing-plan-unit, .pricing-plan-scope { font-size:14px; color:var(--text-3, #565E6D); }
.pricing-plan-sample { background:var(--warning-bg, #FDF4E7); color:var(--warning-text, #8C5209); border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; text-align:center; }
.pricing-plan-price-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.pricing-plan-flag { color:var(--action-text, #1D4ED8); font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }
.pricing-plan-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pricing-plan-price-box, .contact-step-body { display:flex; flex-direction:column; gap:4px; }
.pricing-plan-cta { margin-top:auto; height:48px; border-radius:var(--tt-radius-btn, 11px); border:1px solid var(--border-strong, #E3E7ED); background:transparent; color:var(--text, #172948); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.pricing-plan { border-top:1px solid var(--border-strong, #E3E7ED); padding-top:20px; display:flex; flex-direction:column; gap:16px; }
.pricing-plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:40px; }
.pricing-note { font-size:14px; line-height:1.6; color:var(--text-3, #565E6D); }
/* faq */
.faq-question-text { flex:1; }
.faq-chevron { color:var(--text-3, #565E6D); flex-shrink:0; }
.faq-question { padding:20px 0; display:flex; align-items:center; gap:16px; font-size:18px; font-weight:600; line-height:1.45; }
.faq-answer { padding:0 0 20px; font-size:15px; line-height:1.68; color:var(--text-2, #565E6D); max-width:620px; }
.faq-item { border-top:1px solid var(--border, #E3E7ED); border-bottom:0; }
.faq-phone { padding:16px 0; font-weight:700; text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.faq-lead { margin:0; font-size:15px; line-height:1.62; color:var(--text-2, #565E6D); }
/* contact */
.contact-step-number { font-size:17px; color:var(--action-text, #1D4ED8); flex-shrink:0; font-variant-numeric:tabular-nums; }
.contact-step-title { font-size:16px; font-weight:600; }
.contact-step { padding:20px 0; border-top:1px solid var(--border, #E3E7ED); border-bottom:0; display:flex; gap:16px; align-items:baseline; }
/* request */
.request-sent-badge { width:46px; height:46px; border-radius:22px; background:var(--success-bg, #E8F6F1); color:var(--success-text, #0E6449); display:flex; align-items:center; justify-content:center; }
.request-sent { display:flex; flex-direction:column; gap:16px; align-items:flex-start; padding:16px 0; }
.request-select { height:48px; border-radius:var(--radius-field, 11px); border:1px solid var(--border-strong, #E3E7ED); background:var(--surface, #FFFFFF); color:var(--text, #172948); font-family:inherit; font-size:15px; padding:0 12px; outline:none; }
.request-textarea { border-radius:var(--radius-field, 11px); border:1px solid var(--border-strong, #E3E7ED); background:var(--surface, #FFFFFF); color:var(--text, #172948); font-family:inherit; font-size:15px; padding:12px 16px; outline:none; resize:vertical; line-height:1.55; }
.request-input { height:48px; border-radius:var(--radius-field, 11px); border:1px solid var(--border-strong, #E3E7ED); background:var(--surface, #FFFFFF); color:var(--text, #172948); font-family:inherit; font-size:15px; padding:0 16px; outline:none; }
.request-label { font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-3, #565E6D); }
.request-field { display:flex; flex-direction:column; gap:8px; }
.request-field-pair { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:16px; }
.request-submit { height:52px; border-radius:var(--tt-radius-btn, 11px); border:0; padding:0; background:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.request-note { font-size:13px; line-height:1.55; color:var(--text-3, #565E6D); }
.request-form, .legal-header, .legal-section, .site-footer-brand { display:flex; flex-direction:column; gap:16px; }
/* contact */
.contact-copy { display:flex; flex-direction:column; gap:24px; }
.contact-card { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:32px; }
.contact-row { max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:40px; align-items:start; }
/* legal */
.legal-label, .legal-toc-label, .card-eyebrow, .invite-code-label, .invite-item-kind { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-2, #565E6D); }
.legal-title { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.025em; line-height:1.15; }
.legal-subtitle { margin:0; font-size:15px; font-weight:600; color:var(--text-2, #565E6D); }
.legal-date { border-top:1px solid var(--border, #E3E7ED); border-bottom:1px solid var(--border, #E3E7ED); padding:12px 0; margin-top:4px; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-2, #565E6D); font-variant-numeric:tabular-nums; }
.legal-draft { border-top:1px solid var(--border, #E3E7ED); border-bottom:1px solid var(--border, #E3E7ED); padding:12px 0; margin-top:4px; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--warning-text, #8C5209); }
.legal-text, .card-lead { margin:0; font-size:16px; line-height:1.7; color:var(--text-2, #565E6D); }
.legal-section-number { font-size:28px; line-height:1; font-weight:700; color:var(--action-text, #1D4ED8); font-variant-numeric:tabular-nums; flex-shrink:0; }
.legal-section-title { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.015em; line-height:1.3; }
.legal-section-head { display:flex; gap:24px; align-items:baseline; border-top:2px solid var(--text, #172948); padding-top:20px; }
.legal-list-title { font-size:16px; font-weight:700; }
.legal-list-text { font-size:16px; line-height:1.7; color:var(--text-2, #565E6D); }
.legal-list-item { padding:20px 0; border-top:1px solid var(--border, #E3E7ED); display:flex; flex-direction:column; gap:6px; }
.legal-list-item-last { padding:20px 0; border-top:1px solid var(--border, #E3E7ED); border-bottom:1px solid var(--border, #E3E7ED); display:flex; flex-direction:column; gap:6px; }
.legal-contact-number { font-size:28px; line-height:1; font-weight:700; color:var(--action-text, #1D4ED8); font-variant-numeric:tabular-nums; flex-shrink:0; }
.legal-contact-title { margin:0; font-size:22px; font-weight:700; letter-spacing:-0.015em; line-height:1.3; }
.legal-contact-head { display:flex; gap:16px; align-items:baseline; }
.legal-contact-mail { align-self:flex-start; height:48px; padding:0 20px; border-radius:var(--tt-radius-btn, 11px); background:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); font-size:15px; font-weight:600; display:flex; align-items:center; gap:10px; }
.legal-contact-call { align-self:flex-start; height:48px; padding:0 20px; border-radius:var(--tt-radius-btn, 11px); background:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); font-size:15px; font-weight:600; display:flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
.legal-contact { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:32px; display:flex; flex-direction:column; gap:16px; }
.legal-toc-number { font-size:15px; font-weight:700; color:var(--action-text, #1D4ED8); font-variant-numeric:tabular-nums; flex-shrink:0; min-width:28px; }
.legal-toc-text { color:var(--text, #172948); }
.legal-toc-link { padding:12px 0; border-top:1px solid var(--border, #E3E7ED); display:flex; gap:16px; align-items:baseline; font-size:15px; }
.legal-main { max-width:860px; margin:0 auto; padding:48px 40px 48px; display:flex; flex-direction:column; gap:48px; }
/* card */
.card-title { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; overflow-wrap:anywhere; }
.card-heading, .card-stores { display:flex; flex-direction:column; gap:10px; }
/* state */
.state-swap { display:contents; }
/* invite */
.invite-copy-button { height:44px; padding:0 16px; border-radius:var(--tt-radius-btn, 11px); border:1px solid var(--border-strong, #E3E7ED); background:var(--surface, #FFFFFF); color:var(--text, #172948); font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; cursor:pointer; }
.invite-expiry { font-size:14px; line-height:1.5; color:var(--text-2, #565E6D); display:flex; align-items:center; gap:8px; }
.invite-code-meta { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; }
.invite-code-chunk { flex:1 1 0; min-width:0; text-align:center; font-size:28px; line-height:1.2; font-weight:700; color:var(--text, #172948); font-variant-numeric:tabular-nums; padding:16px 6px; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--radius-field, 11px); }
.invite-code-row { display:flex; gap:10px; }
.invite-code-panel, .invite-item-panel { background:var(--surface-2, #F4F6F8); border-radius:var(--radius-inner, 14px); padding:16px; display:flex; flex-direction:column; gap:12px; }
.invite-open-button, .reset-submit-button, .reset-open-button { height:48px; padding:0 20px; border-radius:var(--tt-radius-btn, 11px); border:0; background:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; width:100%; }
/* card */
.card-store-image { position:absolute; display:block; max-width:none; border:0; }
.card-store-badge { display:block; position:relative; flex:0 0 auto; height:48px; overflow:hidden; text-decoration:none; }
.card-stores-row { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.card-stores-caption { font-size:14px; line-height:1.5; color:var(--text-2, #565E6D); }
/* invite */
.invite-steps-title { font-size:15px; font-weight:700; }
.invite-step-number { width:28px; height:28px; border-radius:14px; background:var(--action-soft, #EEF3FE); color:var(--action-text, #1D4ED8); font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-variant-numeric:tabular-nums; }
.invite-step-text { font-size:15px; line-height:1.55; padding-top:2px; }
.invite-step { display:flex; gap:12px; align-items:flex-start; }
.invite-steps { border-top:1px solid var(--border, #E3E7ED); padding-top:20px; display:flex; flex-direction:column; gap:16px; }
/* card */
.card-scene { display:flex; flex-direction:column; gap:20px; }
.card-icon-warning { width:52px; height:52px; border-radius:22px; background:var(--warning-bg, #FDF4E7); color:var(--warning-text, #8C5209); display:flex; align-items:center; justify-content:center; }
/* invite */
.invite-howto-title, .reset-label, .reset-howto-title, .fab-text { font-size:15px; font-weight:600; }
.invite-howto-text, .reset-howto-note { font-size:15px; line-height:1.6; color:var(--text-2, #565E6D); }
.invite-howto { background:var(--surface-2, #F4F6F8); border-radius:var(--radius-inner, 14px); padding:16px; display:flex; flex-direction:column; gap:8px; }
/* card */
.card-icon-info { width:52px; height:52px; border-radius:22px; background:var(--info-bg, #EDF3FB); color:var(--info-text, #1E4F86); display:flex; align-items:center; justify-content:center; }
/* invite */
.invite-item-icon { width:44px; height:44px; border-radius:22px; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); color:var(--action-text, #1D4ED8); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.invite-item-name { font-size:17px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.invite-item { display:flex; align-items:center; gap:12px; }
.invite-permission { padding-top:12px; border-top:1px solid var(--border, #E3E7ED); display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.invite-card, .reset-card { width:100%; max-width:480px; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:32px; display:flex; flex-direction:column; gap:20px; }
.invite-states-label { font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--text-2, #565E6D); }
.invite-states-card { width:100%; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:32px; display:flex; flex-direction:column; gap:20px; }
.invite-states-cell { display:flex; flex-direction:column; gap:10px; min-width:0; }
.invite-states-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:24px; align-items:start; }
.invite-states { width:100%; }
/* card */
.card-main { flex:1 0 auto; width:100%; max-width:860px; margin:0 auto; padding:48px 40px 48px; display:flex; flex-direction:column; align-items:center; }
/* reset */
.reset-input { width:100%; height:48px; border-radius:var(--radius-field, 11px); border:1px solid var(--border-strong, #E3E7ED); background:var(--surface, #FFFFFF); color:var(--text, #172948); font-family:inherit; font-size:15px; padding:0 48px 0 16px; outline:none; }
.reset-toggle-button { position:absolute; right:2px; top:2px; width:44px; height:44px; border:0; padding:0; background:transparent; color:var(--text-2, #565E6D); display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:var(--tt-radius-btn, 11px); }
.reset-input-wrap { position:relative; }
.reset-hint { font-size:14px; line-height:1.5; color:var(--text-2, #565E6D); display:flex; align-items:center; gap:8px; }
.reset-error-icon { flex-shrink:0; margin-top:2px; }
.reset-error { font-size:14px; line-height:1.5; color:var(--danger, #C0362C); font-weight:500; display:flex; align-items:flex-start; gap:8px; }
.reset-field { display:flex; flex-direction:column; gap:8px; }
/* card */
.card-icon-success { width:52px; height:52px; border-radius:22px; background:var(--success-bg, #E8F6F1); color:var(--success, #12805C); display:flex; align-items:center; justify-content:center; }
/* reset */
.reset-howto-path { font-size:15px; line-height:1.6; font-weight:600; }
.reset-howto { background:var(--surface-2, #F4F6F8); border-radius:var(--radius-inner, 14px); padding:16px; display:flex; flex-direction:column; gap:12px; }
/* site */
.site-menu-link { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-2, #565E6D); white-space:nowrap; }
.site-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; padding:8px 0; min-height:44px; }
.site-menu { flex:1; min-width:0; display:flex; align-items:center; gap:32px; overflow-x:auto; scrollbar-width:none; }
.site-header-cta { flex-shrink:0; height:44px; padding:0 20px; border-radius:var(--tt-radius-btn, 11px); background:var(--hero, #172948); color:#FFFFFF; font-size:14px; font-weight:600; display:flex; align-items:center; white-space:nowrap; }
.site-header-inner { max-width:1200px; margin:0 auto; padding:0 40px; height:66px; display:flex; align-items:center; gap:32px; }
.site-footer-logo-my { font-weight:300; color:#5A6880; }
.site-footer-logo-info { font-weight:700; color:#FFFFFF; }
.site-footer-about { font-size:14px; line-height:1.65; color:var(--band-muted, #9AA8BC); max-width:340px; }
.site-footer-link { font-size:15px; color:var(--band-text, #C3CCD9); }
.site-footer-contact-icon { flex-shrink:0; color:var(--band-muted, #9AA8BC); }
.site-footer-contact-phone { font-size:15px; color:var(--band-text, #C3CCD9); display:flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
.site-footer-contact-mail { font-size:15px; color:var(--band-text, #C3CCD9); display:flex; align-items:center; gap:10px; }
.site-footer-contact-address-icon { flex-shrink:0; color:var(--band-muted, #9AA8BC); margin-top:4px; }
.site-footer-contact-address { font-size:15px; line-height:1.6; color:var(--band-text, #C3CCD9); display:flex; align-items:flex-start; gap:10px; }
.site-footer-note { font-size:14px; color:var(--band-muted, #9AA8BC); }
.site-footer-credit { padding:16px 0; color:#FFFFFF; text-decoration:none; font-weight:600; }
.site-footer-bottom { border-top:1px solid var(--band-line, #2A3D5C); padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.site-footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 196px), 1fr)); gap:40px; }
.site-footer-inner { max-width:1200px; margin:0 auto; padding:0 40px; display:flex; flex-direction:column; gap:48px; }
/* tabbar */
.tabbar-label { font-size:11px; font-weight:600; }
.tabbar-more { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 2px; background:none; border:0; font-family:inherit; cursor:pointer; color:var(--text-2, #565E6D); }
.tabbar-link { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 2px; }
/* more */
.more-sheet-backdrop { position:fixed; inset:0; z-index:64; background:rgba(15,27,46,0.34); }
.more-sheet-link { display:flex; align-items:center; gap:12px; padding:16px 16px; border-radius:10px; color:#FFFFFF; font-size:16px; font-weight:600; }
.more-sheet { position:fixed; left:0; right:0; z-index:65; background:var(--hero, #172948); border-top:1px solid var(--band-line-strong, #3C4E6B); display:flex; flex-direction:column; padding:6px 8px; }
/* fab */
.fab-icon-moon { flex-shrink:0; display:var(--icon-moon, block); }
.fab-icon-sun { flex-shrink:0; display:var(--icon-sun, none); }
.fab-theme { height:52px; border-radius:22px; background:var(--surface, #FFFFFF); border:1px solid var(--border-strong, #E3E7ED); color:var(--text, #172948); font-family:inherit; cursor:pointer; display:flex; align-items:center; }
.fab-icon { flex-shrink:0; }
.fab-zalo { height:52px; border-radius:22px; background:var(--surface, #FFFFFF); border:1px solid var(--border-strong, #E3E7ED); color:var(--text, #172948); display:flex; align-items:center; }
.fab-call { height:52px; border-radius:22px; background:var(--action-fill, #1D4ED8); border:1px solid var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); display:flex; align-items:center; }
/* site */
.site-header { position:sticky; top:0; z-index:50; background:var(--page-blur, rgba(244,246,248,0.94)); backdrop-filter:blur(12px); border-bottom:1px solid var(--border, #E3E7ED); }
.site-header-back { height:44px; padding:0 16px; border-radius:var(--tt-radius-btn, 11px); border:1px solid var(--border-strong, #E3E7ED); font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.site-header-inner.is-narrow { max-width:860px; justify-content:space-between; gap:20px; }
.site-logo.is-simple { flex-shrink:1; }
.site-logo-image.is-small { width:28px; height:28px; }
.site-footer.is-simple { padding:48px 0 24px; }
.site-footer-simple-links { display:flex; flex-wrap:wrap; gap:20px; }
.site-footer-simple-top { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.site-footer-simple-bottom { border-top:1px solid var(--band-line, #2A3D5C); padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.site-footer-inner.is-narrow { max-width:860px; gap:24px; }
.site-footer-logo-image.is-small { width:28px; height:28px; }
/* page */
.page { background:var(--page, #F4F6F8); color:var(--text, #172948); font-family:'Be Vietnam Pro', system-ui, -apple-system, sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; position:relative; }
/* site */
.site-footer { background:var(--hero, #172948); color:#FFFFFF; padding:calc(var(--tt-section-gap) / 2) 0 24px; }
/* tabbar */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--page-blur, rgba(244,246,248,0.94)); backdrop-filter:blur(12px); border-top:1px solid var(--border, #E3E7ED); padding:8px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
/* fab */
.fab-stack { position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }

/* ---- trạng thái do trang đặt (màu chip, hàng cuối, gói nổi bật) ---- */
.st-ok { background:var(--success-bg, #E8F6F1); color:var(--success-text, #0E6449); }
.st-wait { background:var(--info-bg, #EDF3FB); color:var(--info-text, #1E4F86); }
.st-review { background:var(--warning-bg, #FDF4E7); color:var(--warning-text, #8C5209); }
.rollout-step.is-last { border-bottom:1px solid var(--border, #E3E7ED); }
.trust-item.is-last { border-bottom:1px solid var(--border, #E3E7ED); }
.contact-step.is-last { border-bottom:1px solid var(--border, #E3E7ED); }
.faq-item.is-last { border-bottom:1px solid var(--border, #E3E7ED); }
.pricing-plan.is-featured { border-top:3px solid var(--accent, #1D4ED8); padding-top:20px; }
.page-column { display:flex; flex-direction:column; }
.store-apple { width:119.66px; }
.store-apple .card-store-image { left:0; top:4px; width:119.66px; height:40px; }
.store-google.is-vi { width:134.58px; }
.store-google.is-vi .card-store-image { left:0; top:-2.04px; width:134.58px; height:52.08px; }
.store-google.is-en { width:134.29px; }
.store-google.is-en .card-store-image { left:-9.76px; top:-5.76px; width:153.81px; height:59.52px; }
.badge-dark { display:none; }
.reset-input.is-invalid { border-color:var(--danger, #C0362C); }
.reset-input:focus { border-color:var(--action, #1D4ED8); outline:2px solid var(--action, #1D4ED8); outline-offset:2px; }
.invite-open-button:hover { background:var(--action-hover, #1E3A8A); }
.reset-open-button:hover { background:var(--action-hover, #1E3A8A); }
.reset-submit-button:hover { background:var(--action-hover, #1E3A8A); }
.invite-copy-button:hover { background:var(--surface-2, #F4F6F8); }
.site-header-back:hover { background:var(--surface-2, #F4F6F8); }
:root[data-theme="dark"] .site-header-cta { border:1px solid var(--border-strong, #3C4E6B); }
.pricing-plan-cta.is-featured { border-color:var(--action-fill, #1D4ED8); background:var(--action-fill, #1D4ED8); color:var(--action-on, #FFFFFF); }

/* ---- hành vi co giãn của bản vẽ cũ, chuyển từ các lớp .topnav .mnav .hero-cta .old-row ... sang tên khoá mới ---- */
.site-footer-link:hover { color: var(--action-hover, #1E3A8A); }
@media (min-width: 1024px) {
  .rollout-title, .comparison-title, .pricing-title { white-space: nowrap; }
}
@media (max-width: 900px) {
  .site-menu { display: none; }
  .tabbar { display: flex; }
  .site-header-cta { margin-left: auto; }
  .hero-cta-trial, .hero-cta-demo { font-size: 15px; white-space: nowrap; }
  .fab { width: 44px; height: 44px; border-radius: 22px; }
  .fab-stack { bottom: calc(48px + 48px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom: calc(48px + 48px + env(safe-area-inset-bottom, 0px)); }
  .fab-stack { right: 16px; }
  /* vùng chạm từ 44 cho liên kết chân trang; hai hàng liền nhau không chồng lên nhau */
  .site-footer-column { gap: 0; }
  .site-footer-link, .site-footer-contact-phone, .site-footer-contact-mail { padding: 12px 0; min-height: 44px; }
  .site-footer-link { display: flex; align-items: center; }
  .site-footer-contact-address { margin-top: 4px; }
  .site-footer-simple-links { gap: 0 20px; }
}
html[data-theme="dark"] .badge-light { display: none; }
html[data-theme="dark"] .badge-dark { display: block; }
@media (max-width: 349px) { .card-stores-row { justify-content: center; } }
@media (max-width: 700px) {
  .comparison-row, .comparison-row-last { grid-template-columns: minmax(0, 1fr); }
  .feature-card-2 { order: 1; }
}
@media (max-width: 560px) {
  .hero-title { line-height: 1.2; }
  .trial-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fab, .fab-label { transition: none; }
}


/* ---- mã số: JetBrains Mono (phụ) theo Brand, mã mời và mọi số thứ tự dạng 01 ---- */
.hero-point-number,
.features-number,
.more-features-number,
.rollout-number,
.comparison-number,
.trust-number,
.pricing-number,
.faq-number,
.contact-number,
.trial-number,
.rollout-step-number,
.contact-step-number,
.legal-section-number,
.legal-toc-number,
.legal-contact-number,
.invite-step-number,
.invite-code-chunk { font-family:var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); font-weight:500; }

/* ---- thang theo khổ (T) ---- */
@media (max-width: 1023px) {
  .nojs-bar { padding:12px 32px; }
  .hero-title { font-size:26px; }
  .hero-lead { font-size:16px; }
  .hero-row { padding:0 32px; gap:40px; }
  .feature-title { font-size:22px; }
  .feature-row { gap:24px; }
  .features-title, .more-features-title, .rollout-title, .comparison-title, .trust-title, .trial-title, .pricing-title, .faq-title, .contact-title { font-size:26px; }
  .features-head, .more-features-head, .rollout-head, .comparison-head, .trust-head, .pricing-head, .faq-head, .contact-head { gap:20px; }
  .features-wrap { padding:0 32px; gap:32px; }
  .more-features-grid { gap:0 32px; }
  .more-features-wrap, .rollout-wrap, .comparison-wrap, .pricing-wrap { padding:0 32px; gap:32px; }
  .rollout-step-number { font-size:26px; }
  .rollout-step-text { font-size:16px; }
  .rollout-step { gap:24px; }
  .trust-wrap, .faq-row { padding:0 32px; gap:24px; }
  .trial-head { gap:20px; }
  .trial-row { padding:0 32px; gap:24px; }
  .pricing-plans { gap:24px; }
  .contact-card { padding:20px; }
  .contact-row { padding:0 32px; gap:24px; }
  .legal-section-number { font-size:26px; }
  .legal-section-title { font-size:22px; }
  .legal-section-head { gap:20px; }
  .legal-contact-number { font-size:26px; }
  .legal-contact-title { font-size:18px; }
  .legal-contact { padding:20px; }
  .legal-main { padding:40px 32px 48px; gap:32px; }
  .card-title { font-size:26px; }
  .invite-card, .reset-card { padding:24px; }
  .invite-states-card { padding:24px; }
  .card-main { padding:40px 32px 48px; }
  .site-menu { gap:16px; }
  .site-header-inner { padding:0 32px; gap:20px; }
  .site-footer-grid { gap:24px; }
  .site-footer-inner { padding:0 32px; gap:32px; }
  .site-footer.is-simple { padding:40px 0 24px; }
}

/* ---- thang theo khổ (P) ---- */
@media (max-width: 560px) {
  .nojs-bar { padding:12px 16px; }
  .hero-card-status, .post-status { font-size:13px; }
  .hero-card-chip { font-size:13px; }
  .hero-eyebrow { font-size:13px; }
  .hero-row { padding:0 16px; gap:32px; }
  .post-avatar { font-size:13px; }
  .feature-label { font-size:13px; }
  .post-label { font-size:13px; }
  .inbox-page { font-size:13px; }
  .scan-tag { font-size:13px; }
  .features-label, .more-features-label, .rollout-label, .comparison-label, .trust-label, .pricing-label, .faq-label, .contact-label { font-size:13px; }
  .features-head, .more-features-head, .rollout-head, .comparison-head, .trust-head, .pricing-head, .faq-head, .contact-head { gap:16px; }
  .features-wrap { padding:0 16px; }
  .more-features-wrap, .rollout-wrap, .comparison-wrap, .pricing-wrap { padding:0 16px; }
  .rollout-step { gap:20px; }
  .trust-wrap, .faq-row { padding:0 16px; }
  .demo-account-label { font-size:13px; }
  .trial-label, .site-footer-heading { font-size:13px; }
  .trial-head { gap:16px; }
  .trial-row { padding:0 16px; }
  .pricing-plan-sample { font-size:13px; }
  .pricing-plan-flag { font-size:13px; }
  .request-label { font-size:13px; }
  .contact-row { padding:0 16px; }
  .legal-label, .legal-toc-label, .card-eyebrow, .invite-code-label, .invite-item-kind { font-size:13px; }
  .legal-date { font-size:13px; }
  .legal-draft { font-size:13px; }
  .legal-section-head { gap:16px; }
  .legal-main { padding:40px 16px 48px; }
  .card-main { padding:40px 16px 48px; }
  .site-menu-link { font-size:13px; }
  .site-header-inner { padding:0 16px; gap:16px; }
  .site-footer-inner { padding:0 16px; }
  .tabbar-label { font-size:13px; }
}

/* ==== Bộ khối SaaS, tờ 01 (13/11/2026): đứng yên, khung ảnh, kiểu mới của khối cũ, bốn khối mới, thẻ bài viết ==== */
html[data-still] { scroll-behavior: auto; }
html[data-still] *, html[data-still] *::before, html[data-still] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
.pname { white-space: nowrap; }

/* khung ảnh chụp màn: khoá tỉ lệ, nền trơn; dev đặt <img class="shot-image"> vào trong, ảnh phủ kín khung */
.shot { position:relative; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); color:var(--text-2, #565E6D); }
.shot-desktop { width:100%; aspect-ratio:16 / 10; }
.shot-phone { aspect-ratio:9 / 19.5; }
.shot-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shot-icon { flex-shrink:0; }
.shot-pair { position:relative; padding:0 0 32px; }
.shot-pair .shot-desktop { width:88%; }
.shot-pair .shot-phone { position:absolute; right:0; bottom:0; width:22%; }
.hero .shot, .trial .shot { background:var(--band-shot, #0F1B2E); border-color:var(--band-line-strong, #3C4E6B); color:var(--band-muted, #9AA8BC); }

/* biểu tượng trang trí vẽ bằng mặt nạ (Lucide: image, check, quote), không chở thêm svg trong từng khung */
.shot::before, .feature-showcase-point-icon, .testimonial-icon { content:''; display:block; flex-shrink:0; background:currentColor; -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
.shot::before { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'%3E%3C/rect%3E%3Ccircle cx='9' cy='9' r='2'%3E%3C/circle%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'%3E%3C/path%3E%3C/svg%3E"); width:28px; height:28px; }
.shot:has(.shot-image)::before { display:none; }
.feature-showcase-point-icon { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'%3E%3C/path%3E%3C/svg%3E"); width:18px; height:18px; }
.testimonial-icon { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'%3E%3C/path%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'%3E%3C/path%3E%3C/svg%3E"); width:24px; height:24px; }

/* biểu tượng của thẻ more-features: Quản trị chọn tên biểu tượng Lucide; web thật vẽ svg Lucide inline, bản vẽ dùng mặt nạ cho nhẹ trang */
.more-feature-icon::before { content:''; width:22px; height:22px; background:currentColor; -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
.more-feature-icon[data-icon="user-round"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'%3E%3C/circle%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'%3E%3C/path%3E%3C/svg%3E"); }
.more-feature-icon[data-icon="clock"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 6v6l4 2'%3E%3C/path%3E%3C/svg%3E"); }
.more-feature-icon[data-icon="target"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='6'%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='2'%3E%3C/circle%3E%3C/svg%3E"); }
.more-feature-icon[data-icon="user-plus"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M19 8v6M22 11h-6'%3E%3C/path%3E%3C/svg%3E"); }
.more-feature-icon[data-icon="package"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'%3E%3C/path%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'%3E%3C/path%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'%3E%3C/path%3E%3Cpath d='M12 22V12'%3E%3C/path%3E%3C/svg%3E"); }
.more-feature-icon[data-icon="calendar"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'%3E%3C/rect%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'%3E%3C/path%3E%3C/svg%3E"); }
.more-feature-icon[data-icon="shield"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'%3E%3C/path%3E%3Cpath d='m9 12 2 2 4-4'%3E%3C/path%3E%3C/svg%3E"); }

/* đầu khối có số dùng chung cho khối mới (cùng hình với đầu khối cũ) */
.sec-head { display:flex; gap:32px; align-items:baseline; border-top:2px solid var(--text, #172948); padding-top:20px; }
.sec-number { font-family:var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); font-weight:500; font-size:28px; line-height:1; color:var(--action, #1D4ED8); font-variant-numeric:tabular-nums; flex-shrink:0; }
.sec-head-body { display:flex; flex-direction:column; gap:12px; max-width:680px; flex:1; min-width:0; }
.sec-label { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3, #565E6D); }
.sec-title { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.015em; line-height:1.18; }
.sec-lead { margin:0; font-size:16px; line-height:1.62; color:var(--text-2, #565E6D); }
.sec-more { flex-shrink:0; align-self:center; margin-left:auto; min-height:44px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--action-text, #1D4ED8); white-space:nowrap; }
.sec-wrap { max-width:1200px; margin:0 auto; padding:0 40px; display:flex; flex-direction:column; gap:40px; }

/* hero kiểu 2 «Hình lớn»: chữ trái, ảnh máy tính kèm điện thoại phải; điện thoại: ảnh dưới chữ */
.hero-shots { display:none; }
.hero[data-style="2"] .hero-shots { display:block; }
.hero[data-style="2"] .hero-points, .hero[data-style="2"] .hero-card, .hero[data-style="2"] .hero-grid-bg { display:none; }
.hero[data-style="2"] .hero-row { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
.hero[data-style="2"] .hero-art { padding:0; }

/* trial kiểu 2 «Ảnh màn đăng nhập»: ảnh thật thay thẻ đăng nhập minh hoạ */
.trial-shot { display:none; }
.trial[data-style="2"] .trial-card { display:none; }
.trial[data-style="2"] .trial-shot { display:flex; }

/* more-features kiểu 2 «Thẻ có biểu tượng» (kiểu 1 «Danh sách chữ» giữ hình cũ) */
.more-feature-icon { display:none; }
.more-feature:hover .more-feature-title { text-decoration:underline; }
.more-features[data-style="2"] .more-features-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:24px; }
.more-features[data-style="2"] .more-feature { background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:24px; gap:12px; }
.more-features[data-style="2"] .more-feature-icon { display:flex; width:44px; height:44px; border-radius:var(--tt-radius-btn, 11px); background:var(--surface-2, #F4F6F8); color:var(--action-text, #1D4ED8); align-items:center; justify-content:center; flex-shrink:0; }

/* stats «Dải số» */
.stats { padding:calc(var(--tt-section-gap) / 2) 0; }
.stats-wrap { max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:40px; }
.stats-item { border-top:2px solid var(--accent, #1D4ED8); padding-top:16px; display:flex; flex-direction:column; gap:6px; }
.stats-value { font-size:28px; font-weight:700; line-height:1.2; letter-spacing:-0.015em; font-variant-numeric:tabular-nums; }
.stats-label { font-size:15px; line-height:1.5; color:var(--text-2, #565E6D); }

/* feature-showcase: kiểu 1 «Hình trái», kiểu 2 «Hình phải» */
.feature-showcase { padding:calc(var(--tt-section-gap) / 2) 0; }
.feature-showcase-row { max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:48px; align-items:center; }
.feature-showcase[data-style="2"] .feature-showcase-row { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
.feature-showcase[data-style="2"] .feature-showcase-media { order:2; }
.feature-showcase-copy { display:flex; flex-direction:column; gap:16px; }
.feature-showcase-label { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--action-text, #1D4ED8); }
.feature-showcase-title { margin:0; font-size:28px; font-weight:700; letter-spacing:-0.015em; line-height:1.2; }
.feature-showcase-text { margin:0; font-size:16px; line-height:1.65; color:var(--text-2, #565E6D); }
.feature-showcase-points { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.feature-showcase-point { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; }
.feature-showcase-point-icon { flex-shrink:0; margin-top:2px; color:var(--action-text, #1D4ED8); }
.feature-showcase-link { align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--action-text, #1D4ED8); }
.feature-showcase-link:hover { text-decoration:underline; }

/* screenshot: kiểu 1 «Chỉ máy tính», kiểu 2 «Máy tính và điện thoại» */
.screenshot { padding:calc(var(--tt-section-gap) / 2) 0; }
.screenshot[data-style="1"] .shot-phone { display:none; }
.screenshot[data-style="1"] .shot-pair { padding:0; }
.screenshot[data-style="1"] .shot-pair .shot-desktop { width:100%; }

/* testimonials «Ba thẻ lời khách»; điện thoại cuộn ngang có chấm */
.testimonials { padding:calc(var(--tt-section-gap) / 2) 0; }
.testimonials-track { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.testimonial { margin:0; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); padding:32px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.testimonial-icon { color:var(--action-text, #1D4ED8); flex-shrink:0; }
.testimonial-quote { margin:0; flex:1; font-size:17px; line-height:1.6; }
.testimonial-person { display:flex; align-items:center; gap:12px; border-top:1px solid var(--border, #E3E7ED); padding-top:16px; }
.testimonial-avatar { width:44px; height:44px; border-radius:22px; background:var(--surface-2, #F4F6F8); color:var(--text, #172948); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; overflow:hidden; position:relative; }
.testimonial-meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.testimonial-name { font-size:15px; font-weight:700; }
.testimonial-role { font-size:14px; line-height:1.5; color:var(--text-2, #565E6D); }
.testimonials-dots { display:none; }
.testimonials-dot { width:44px; height:44px; border:0; padding:0; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.testimonials-dot::before { content:''; display:block; width:8px; height:8px; border-radius:4px; background:var(--text-2, #565E6D); }
.testimonials-dot[aria-current="true"]::before { width:24px; background:var(--accent, #1D4ED8); }

/* thẻ bài viết: dùng ở blog-latest (trang chủ), blog-list, post-related */
.blog-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.blog-card { display:flex; flex-direction:column; min-width:0; background:var(--surface, #FFFFFF); border:1px solid var(--border, #E3E7ED); border-radius:var(--tt-radius-card, 18px); overflow:hidden; color:var(--text, #172948); }
.blog-card:hover .blog-card-title { text-decoration:underline; }
.blog-card-image { aspect-ratio:16 / 9; border:0; border-bottom:1px solid var(--border, #E3E7ED); border-radius:0; background:var(--surface-2, #F4F6F8); }
.blog-card-body { padding:20px; display:flex; flex-direction:column; gap:8px; }
.blog-card-meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; line-height:1.5; color:var(--text-2, #565E6D); }
.blog-card-group { font-weight:700; color:var(--action-text, #1D4ED8); }
.blog-card-date { font-variant-numeric:tabular-nums; }
.blog-card-title { margin:0; font-size:18px; font-weight:600; line-height:1.4; }
.blog-card-text { margin:0; font-size:15px; line-height:1.6; color:var(--text-2, #565E6D); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-latest { padding:calc(var(--tt-section-gap) / 2) 0; }

@media (max-width: 1023px) {
  .sec-head { gap:20px; }
  .sec-title { font-size:26px; }
  .sec-wrap { padding:0 32px; gap:32px; }
  .hero[data-style="2"] .hero-row { grid-template-columns:minmax(0, 1fr); }
  .stats-wrap { padding:0 32px; gap:24px; }
  .feature-showcase-row, .feature-showcase[data-style="2"] .feature-showcase-row { grid-template-columns:minmax(0, 1fr); padding:0 32px; gap:32px; }
  .feature-showcase-media, .feature-showcase[data-style="2"] .feature-showcase-media { order:2; }
  .feature-showcase-title { font-size:26px; }
  .testimonial { padding:24px; }
  .testimonial-quote { font-size:16px; }
  .blog-grid { gap:20px; }
}
@media (max-width: 700px) {
  .testimonials-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 16px; gap:16px; margin:0 -16px; padding:0 16px; scrollbar-width:none; }
  .testimonials-track::-webkit-scrollbar { display:none; }
  .testimonial { flex:0 0 86%; scroll-snap-align:start; }
  .testimonials-dots { display:flex; justify-content:center; margin-top:-24px; }
  .blog-latest .blog-grid { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sec-head { gap:16px; }
  .sec-label { font-size:13px; }
  .sec-title { font-size:22px; }
  .sec-head { flex-wrap:wrap; }
  .sec-more { margin-left:auto; }
  .sec-wrap { padding:0 16px; }
  .stats-wrap { padding:0 16px; grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 16px; }
  .stats-value { font-size:26px; }
  .feature-showcase-row, .feature-showcase[data-style="2"] .feature-showcase-row { padding:0 16px; }
  .feature-showcase-label { font-size:13px; }
  .feature-showcase-title { font-size:22px; }
  .trial[data-style="2"] .trial-art { display:flex; order:2; }
  .blog-grid { grid-template-columns:minmax(0, 1fr); gap:16px; }
}