/* ==========================================================================
   DV26 — 8 trang dịch vụ 2026 (Figma jynpBqG3TaeX4weAd28GoP).
   Nền token/reset: page-pricing-2026.css (.pg26). Mọi lớp mới mang tiền tố .dv26-.
   Khung: desktop 1440 (nội dung 1200), mobile 390 (lề 16). Số đo lấy từ Figma.
   ========================================================================== */

.dv26 {
  --dv26-navy: #001435;
  --dv26-navy-2: #0A2350;
  --dv26-lime: #D1E751;
  --dv26-ink: #001435;
  --dv26-check: #15803D;
  --dv26-ease-out: cubic-bezier(0, 0, .58, 1);     /* Figma EASE_OUT */
  --dv26-ease-io: cubic-bezier(.42, 0, .58, 1);    /* Figma EASE_IN_AND_OUT */
  --dv26-spring: cubic-bezier(.34, 1.3, .64, 1);   /* Figma spring bounce .25 (dự phòng) */
  background: var(--bg-surface);
}
@supports (animation-timing-function: linear(0, 1)) {
  .dv26 { --dv26-spring: linear(0, .07 5%, .224 10%, .405 15%, .577 20%, .723 25%, .836 30%, .918 35%, .972 40%, 1.004 45%, 1.021 50%, 1.028 57%, 1.024 65%, 1.014 75%, 1.006 85%, 1); }
}
.dv26 [id] { scroll-margin-top: 96px; }
.dv26 img { max-width: 100%; height: auto; }
.dv26 a { color: inherit; }
.dv26 .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.dv26 .dv26-m { display: none; }
.dv26-wrap { width: 100%; max-width: 1200px; margin: 0 auto; }

/* ---------- section + tiêu đề ---------- */
.dv26-sec { padding: 96px 24px; }
.dv26-sec > .dv26-wrap { display: flex; flex-direction: column; gap: 48px; }
.dv26-sec--white { background: var(--bg-surface); }
.dv26-sec--canvas { background: var(--bg-canvas); }
.dv26-sec--navy { background: var(--dv26-navy); }
.dv26-head { display: flex; flex-direction: column; gap: 12px; }
.dv26-head--center { align-items: center; text-align: center; }
.dv26-overline { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-brand); }
.dv26-h2 { font-size: 36px; line-height: 44px; font-weight: 700; color: var(--text-primary); }
.dv26-lead { font-size: 18px; line-height: 28px; color: var(--text-secondary); }
.dv26-lead a { color: inherit; text-decoration: none; }
.dv26-sec__more { display: flex; }
.dv26-sec__more--center { justify-content: center; }

/* ---------- nút + link ---------- */
.dv26-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 24px; border: 1px solid transparent; border-radius: 8px; font: 600 16px/24px var(--font); text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.dv26 .dv26-btn { text-decoration: none; }
.dv26-btn--primary { background: var(--bg-brand); color: #fff !important; }
.dv26-btn--primary:hover { background: var(--bg-brand-hover); }
.dv26-btn--secondary { min-height: 54px; background: #fff; border-color: var(--border-strong); color: var(--text-primary) !important; }
.dv26-btn--secondary:hover { border-color: var(--text-primary); }
.dv26-btn--outline { min-height: 54px; background: #fff; border-color: var(--bg-brand); color: var(--text-brand) !important; }
.dv26-btn--outline:hover { background: var(--bg-brand-subtle); }
.dv26-btn--lime { background: var(--dv26-lime); color: var(--dv26-navy) !important; }
.dv26-btn--lime:hover { background: #C3D945; }
.dv26-btn--block { display: flex; width: 100%; }
.dv26-btn:focus-visible, .dv26-link:focus-visible, .dv26 summary:focus-visible, .dv26-hv__chip:focus-visible { outline: 2px solid var(--bg-brand); outline-offset: 2px; }
.dv26-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-brand) !important; text-decoration: none; }
.dv26-link .pg26-ico { transition: transform .2s var(--dv26-ease-out); }
.dv26-link:hover .pg26-ico, a:hover > .dv26-industry__body .pg26-ico { transform: translateX(3px); }

/* ---------- khối dùng chung ---------- */
.dv26-card { background: #fff; border: 1px solid var(--border-default); border-radius: 16px; }
.dv26-iconbox { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--bg-brand-subtle); color: var(--text-brand); }
.dv26-iconbox--md { width: 40px; height: 40px; border-radius: 10px; }
.dv26-iconbox--sm { width: 36px; height: 36px; border-radius: 10px; }
.dv26-iconbox--navy { background: var(--dv26-navy-2); color: var(--dv26-lime); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.dv26-hero { padding: 88px 24px 96px; background: var(--bg-canvas); overflow: hidden; }
.dv26-hero__row { display: flex; align-items: center; gap: 64px; }
.dv26-hero__copy { flex: 1 1 596px; min-width: 0; max-width: 596px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.dv26-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--bg-brand-subtle); color: var(--text-brand); font-size: 14px; line-height: 20px; font-weight: 600; }
.dv26-h1 { font-size: 48px; line-height: 56px; font-weight: 700; color: var(--text-primary); }
.dv26-hero__lead { font-size: 18px; line-height: 28px; color: var(--text-secondary); }
.dv26-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.dv26-hero__stats { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; padding-top: 24px; border-top: 1px solid var(--border-default); }
.dv26-hero__stats > div { display: flex; flex-direction: column; gap: 4px; }
.dv26-hero__stats dt { font-size: 28px; line-height: 36px; font-weight: 700; color: var(--text-brand); }
.dv26-hero__stats dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.dv26-hero__features { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 24px; border-top: 1px solid var(--border-default); }
.dv26-hero__features li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.dv26-hero__features b { margin-top: 8px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-primary); }
/* hiệu ứng vào trang của cột chữ (nhẹ, không có trong frame Motion) */
.dv26-in { animation: dv26-up .5s var(--dv26-ease-out) var(--d, 0ms) both; }
@keyframes dv26-up { from { opacity: 0; transform: translateY(12px); } }

/* ---------- breadcrumb (dv26_breadcrumb: hero trang Kho mẫu, Đăng kí tư vấn) ---------- */
.dv26-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.dv26-crumb li { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.dv26-crumb li + li::before { content: "/"; margin: 0 7px; }
.dv26-crumb a { display: inline; min-height: 0; padding: 0; font-size: inherit; line-height: inherit; color: var(--text-secondary) !important; text-decoration: none; }
.dv26-crumb a:hover { color: var(--text-brand) !important; }

/* ==========================================================================
   2. HERO VISUAL — 540x480, đơn vị --u (1 px Figma)
   Thời điểm/easing: frame Motion/hero-visual (prototype) 31:1761, timeline 8 giây.
   ========================================================================== */
.dv26-hv { position: relative; flex: 0 1 540px; width: 540px; max-width: 100%; aspect-ratio: 540 / 480; container-type: inline-size; }
.dv26-hv__stage { --u: 1px; position: absolute; inset: 0; font-family: var(--font); }
@supports (width: 1cqw) { .dv26-hv__stage { --u: calc(100cqw / 540); } }
.dv26-hv__stage i { display: block; }
.dv26-hv__backdrop { position: absolute; left: calc(56 * var(--u)); top: calc(40 * var(--u)); width: calc(470 * var(--u)); height: calc(420 * var(--u)); border-radius: calc(40 * var(--u)); background: var(--bg-brand-subtle); overflow: hidden; }
.dv26-hv__blob { position: absolute; left: calc(150 * var(--u)); top: calc(170 * var(--u)); width: calc(380 * var(--u)); height: calc(380 * var(--u)); border-radius: 50%; background: var(--bg-accent); }
.dv26-hv__browser { position: absolute; left: calc(66 * var(--u)); top: calc(92 * var(--u)); width: calc(400 * var(--u)); height: calc(290 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; overflow: hidden; box-shadow: 0 calc(20 * var(--u)) calc(40 * var(--u)) rgba(0, 20, 54, .14); }
.dv26-hv__browser > * { position: absolute; }
.dv26-hv__bar { left: 0; top: 0; width: 100%; height: calc(34 * var(--u)); background: var(--bg-subtle); }
.dv26-hv__bar i { position: absolute; top: calc(13 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #FF5F57; }
.dv26-hv__bar i:nth-child(1) { left: calc(14 * var(--u)); }
.dv26-hv__bar i:nth-child(2) { left: calc(27 * var(--u)); background: #FEBC2E; }
.dv26-hv__bar i:nth-child(3) { left: calc(40 * var(--u)); background: #28C840; }
.dv26-hv__bar span { position: absolute; left: calc(60 * var(--u)); top: calc(8 * var(--u)); width: calc(130 * var(--u)); height: calc(18 * var(--u)); padding-left: calc(12 * var(--u)); border-radius: calc(9 * var(--u)); background: #fff; font-size: calc(9 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.dv26-hv__brand { left: calc(20 * var(--u)); top: calc(50 * var(--u)); width: calc(46 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--bg-brand); }
.dv26-hv__nav { top: calc(51 * var(--u)); width: calc(24 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--border-default); }
.dv26-hv__nav:nth-of-type(2) { left: calc(280 * var(--u)); }
.dv26-hv__nav:nth-of-type(3) { left: calc(314 * var(--u)); }
.dv26-hv__nav:nth-of-type(4) { left: calc(348 * var(--u)); }
.dv26-hv__title { left: calc(20 * var(--u)); top: calc(76 * var(--u)); width: calc(185 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 700; color: var(--dv26-ink); }
.dv26-hv__title span { display: block; color: var(--text-brand); }
.dv26-hv__line { left: calc(20 * var(--u)); top: calc(128 * var(--u)); width: calc(160 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--border-default); }
.dv26-hv__line--2 { top: calc(140 * var(--u)); width: calc(120 * var(--u)); }
.dv26-hv__btn { left: calc(20 * var(--u)); top: calc(158 * var(--u)); width: calc(66 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--bg-brand); }
.dv26-hv__btn--2 { left: calc(92 * var(--u)); background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--bg-brand); }
.dv26-hv__tile { left: calc(214 * var(--u)); top: calc(72 * var(--u)); width: calc(166 * var(--u)); height: calc(106 * var(--u)); display: flex; align-items: center; justify-content: center; border-radius: calc(10 * var(--u)); background: var(--bg-accent); color: #fff; }
.dv26-hv__tile .pg26-ico { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.dv26-hv__card { left: calc((20 + var(--i) * 124) * var(--u)); top: calc(196 * var(--u)); width: calc(112 * var(--u)); height: calc(72 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--bg-subtle); }
.dv26-hv__card i { position: absolute; left: calc(12 * var(--u)); top: calc(42 * var(--u)); width: calc(70 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--border-strong); }
.dv26-hv__card i + i { top: calc(54 * var(--u)); width: calc(46 * var(--u)); background: var(--border-default); }
.dv26-hv__phone { position: absolute; left: calc(404 * var(--u)); top: calc(220 * var(--u)); width: calc(132 * var(--u)); height: calc(250 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--dv26-navy); box-shadow: 0 calc(18 * var(--u)) calc(36 * var(--u)) rgba(0, 20, 54, .22); }
.dv26-hv__screen { position: relative; width: 100%; height: 100%; border-radius: calc(17 * var(--u)); background: #fff; }
.dv26-hv__screen > * { position: absolute; left: calc(12 * var(--u)); }
.dv26-hv__mbar { top: calc(14 * var(--u)); width: calc(30 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--dv26-navy); }
.dv26-hv__screen p { top: calc(26 * var(--u)); width: calc(92 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(11 * var(--u)); font-weight: 600; color: var(--dv26-ink); }
.dv26-hv__mtile { top: calc(62 * var(--u)); width: calc(92 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--bg-accent); }
.dv26-hv__mbtn { top: calc(136 * var(--u)); width: calc(92 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--bg-brand); }
.dv26-hv__mline { top: calc(162 * var(--u)); width: calc(80 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--border-default); }
.dv26-hv__mline + .dv26-hv__mline { top: calc(174 * var(--u)); width: calc(60 * var(--u)); }
.dv26-hv__mline + .dv26-hv__mline + .dv26-hv__mline { top: calc(186 * var(--u)); width: calc(72 * var(--u)); }

/* thẻ nổi: .float = vị trí + parallax (transform), .fin = thẻ (opacity/scale vào trang, translate lơ lửng) */
.dv26-hv__float { position: absolute; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .6s var(--dv26-ease-out); }
.dv26-hv__float--chips { left: 0; top: calc(40 * var(--u)); }
.dv26-hv__float--steps { right: 0; top: 0; }
.dv26-hv__float--checks { left: 0; top: calc(340 * var(--u)); }
.dv26-hv__fin { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--border-default); border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0, 20, 54, .12); white-space: nowrap; }
.dv26-hv__float--checks .dv26-hv__fin { gap: calc(7 * var(--u)); }
.dv26-hv__float--steps .dv26-hv__fin { min-width: calc(222 * var(--u)); }
.dv26-hv__head { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 600; color: var(--dv26-ink); }
.dv26-hv__head span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--bg-brand-subtle); color: var(--text-brand); }
.dv26-hv__head .pg26-ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.dv26-hv__chips { display: flex; gap: calc(6 * var(--u)); }
.dv26-hv__chip { padding: calc(4 * var(--u)) calc(9 * var(--u)); border: 0; border-radius: 999px; background: var(--bg-subtle); color: var(--text-secondary); font: 500 calc(11 * var(--u)) / calc(14 * var(--u)) var(--font); cursor: pointer; transition: background-color .2s var(--dv26-ease-out), color .2s var(--dv26-ease-out); }
.dv26-hv__chip:hover { color: var(--text-brand); }
.dv26-hv__chip.is-on { background: var(--bg-brand); color: #fff; }
.dv26-hv__steps { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.dv26-hv__dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--border-strong); transition: background-color .5s var(--dv26-ease-io); }
.dv26-hv__seg { width: calc(26 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--border-default); transition: background-color .5s var(--dv26-ease-io); }
.dv26-hv__steps .is-on { background: var(--bg-brand); transition: background-color .3s var(--dv26-ease-out); }
.dv26-hv__note { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); color: var(--text-secondary); }
.dv26-hv__checks { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.dv26-hv__checks li { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(15 * var(--u)); color: var(--text-primary); }
.dv26-hv__checks .pg26-ico { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--dv26-check); }

/* chuyển động vào trang (giây tính từ đầu timeline Figma) */
.dv26-hv__backdrop { animation: dv26-fade .5s var(--dv26-ease-out) both, dv26-scale94 .7s var(--dv26-ease-out) both; }
.dv26-hv__browser { animation: dv26-fade .6s var(--dv26-ease-out) .1s both, dv26-rise24 .6s var(--dv26-ease-out) .1s both; }
.dv26-hv__phone { animation: dv26-fade .6s var(--dv26-ease-out) .25s both, dv26-slide40 .6s var(--dv26-ease-out) .25s both; }
.dv26-hv__float--chips .dv26-hv__fin { --t: .45s; --bob: 1.2s; }
.dv26-hv__float--steps .dv26-hv__fin { --t: .57s; --bob: 1.5s; }
.dv26-hv__float--checks .dv26-hv__fin { --t: .69s; --bob: 1.8s; }
.dv26-hv__fin { animation: dv26-fade .4s var(--dv26-ease-out) var(--t) both, dv26-pop .45s var(--dv26-spring) var(--t) both, dv26-bob 3.2s var(--dv26-ease-io) var(--bob) infinite; }
.dv26-hv__checks li { animation: dv26-fade .3s var(--dv26-ease-out) calc(1s + var(--i) * .25s) both, dv26-nudge .35s var(--dv26-ease-out) calc(1s + var(--i) * .25s) both; }
@keyframes dv26-fade { from { opacity: 0; } }
@keyframes dv26-scale94 { from { scale: .94; } }
@keyframes dv26-rise24 { from { translate: 0 24px; } }
@keyframes dv26-slide40 { from { translate: 40px 0; } }
@keyframes dv26-pop { from { scale: .96; } }
@keyframes dv26-nudge { from { translate: -8px 0; } }
@keyframes dv26-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ==========================================================================
   3. LOGO KHÁCH
   ========================================================================== */
.dv26-logos { padding: 40px 24px; background: #fff; border-bottom: 1px solid var(--border-default); }
.dv26-logos .dv26-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.dv26-logos__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.dv26-logos__row { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dv26-logos__row img { display: block; width: auto; height: 40px; }

/* ==========================================================================
   4. TÌNH HUỐNG
   ========================================================================== */
.dv26-situations__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dv26-situation { display: flex; flex-direction: column; gap: 16px; padding: 28px; transition: border-color .2s, box-shadow .2s, transform .2s var(--dv26-ease-out); }
.dv26-situation:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dv26-situation__text { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.dv26-situation h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); }
.dv26-situation p { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.dv26-situation .dv26-link { margin-top: auto; padding-top: 16px; }

/* ==========================================================================
   5. BẢNG GIÁ 5 GÓI
   ========================================================================== */
.dv26-pricing__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.dv26-plan { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; border: 1px solid var(--border-default); border-radius: 16px; background: #fff; }
.dv26-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.dv26-plan__top b { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .06em; color: var(--text-brand); }
.dv26-plan__top span { padding: 2px 10px; border-radius: 999px; background: var(--dv26-lime); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--dv26-navy); }
.dv26-plan__price { display: flex; align-items: baseline; gap: 4px; }
.dv26-plan__price b { font-size: 28px; line-height: 36px; font-weight: 700; color: var(--text-primary); }
.dv26-plan__price span { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-secondary); }
.dv26-plan__desc { min-height: 40px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.dv26-plan__feats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 17px; }
.dv26-plan__feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-primary); }
.dv26-plan__feats .pg26-ico { margin-top: 0; color: var(--dv26-check); }
.dv26-plan .dv26-btn { margin-top: auto; }
.dv26-plan.is-hot { border-color: var(--dv26-navy); background: var(--dv26-navy); }
.dv26-plan.is-hot .dv26-plan__top b { color: var(--dv26-lime); }
.dv26-plan.is-hot .dv26-plan__price b, .dv26-plan.is-hot .dv26-plan__feats li { color: #fff; }
.dv26-plan.is-hot .dv26-plan__price span, .dv26-plan.is-hot .dv26-plan__desc { color: var(--text-inverse-secondary); }
.dv26-plan.is-hot .dv26-plan__desc { border-color: var(--dv26-navy-2); }
.dv26-plan.is-hot .dv26-plan__feats .pg26-ico { color: var(--dv26-lime); }
.dv26-pricing__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }

/* ==========================================================================
   6. SO SÁNH
   ========================================================================== */
.dv26-compare__table { border: 1px solid var(--border-default); border-radius: 16px; overflow: hidden; }
.dv26-compare__table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dv26-compare__table th, .dv26-compare__table td { padding: 20px; vertical-align: top; text-align: left; font-size: 14px; line-height: 20px; }
.dv26-compare__table thead th { background: var(--bg-subtle); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.dv26-compare__table thead th small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-inverse-secondary); }
.dv26-compare__table thead th.is-hl { background: var(--bg-brand); color: #fff; }
.dv26-compare__table .dv26-compare__corner { width: 200px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.dv26-compare__table tbody tr { border-top: 1px solid var(--border-default); }
.dv26-compare__table tbody th { font-weight: 600; color: var(--text-primary); }
.dv26-compare__table td { color: var(--text-secondary); }
.dv26-compare__table td.is-hl { background: var(--bg-brand-subtle); color: var(--text-primary); }
.dv26-compare__table td.is-strong { font-weight: 600; }
.dv26-compare__cards { display: none; }

/* ==========================================================================
   7. QUY TRÌNH
   ========================================================================== */
.dv26-process__steps { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 24px; }
.dv26-process__steps li { position: relative; display: flex; flex-direction: column; gap: 16px; }
.dv26-process__steps li > div { display: flex; flex-direction: column; gap: 16px; }
.dv26-process__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-brand); color: #fff; font-size: 20px; line-height: 28px; font-weight: 600; }
.dv26-process__steps li:not(:last-child)::after { content: ""; position: absolute; left: 64px; right: 0; top: 23px; height: 2px; background: var(--border-strong); transform-origin: left; }
.dv26-process__steps h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); }
.dv26-process__steps p { font-size: 16px; line-height: 24px; color: var(--text-secondary); }

/* ==========================================================================
   8. MẪU THEO NGÀNH
   ========================================================================== */
.dv26-industries__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dv26-industry { overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s var(--dv26-ease-out); }
.dv26-industry:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dv26-industry > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.dv26-industry__img { display: block; aspect-ratio: 280 / 180; overflow: hidden; background: var(--bg-subtle); }
.dv26-industry__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s var(--dv26-ease-out); }
.dv26-industry:hover .dv26-industry__img img { transform: scale(1.03); }
.dv26-industry__body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px 20px; }
.dv26-industry__body b { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-primary); }

/* ---------- thẻ ngành địa phương (industry-cards) ---------- */
.dv26-icards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dv26-icard { display: flex; flex-direction: column; overflow: hidden; }
.dv26-icard__img { display: block; aspect-ratio: 382 / 216; overflow: hidden; background: var(--bg-subtle); }
.dv26-icard__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dv26-icard__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; }
.dv26-icard__top { display: flex; align-items: center; gap: 12px; }
.dv26-icard__top h3 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-primary); }
.dv26-icard__text { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.dv26-icard__note { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.dv26-icard .dv26-link { margin-top: auto; }

/* ==========================================================================
   9. DỰ ÁN / CASE STUDY
   ========================================================================== */
.dv26-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dv26-project { display: flex; flex-direction: column; overflow: hidden; }
.dv26-project__img { position: relative; display: block; aspect-ratio: 382 / 230; overflow: hidden; padding: 18px 18px 0; background: linear-gradient(135deg, #EEF2FB 0%, #E3EAF8 55%, #F4F1FB 100%); }
/* cửa sổ trình duyệt kiểu macOS: thanh tiêu đề 3 chấm + ô địa chỉ, ảnh giữ phần đầu trang */
.dv26-project__img::before { content: ""; position: absolute; z-index: 1; left: 18px; right: 18px; top: 18px; height: 22px; border-radius: 10px 10px 0 0; background: radial-gradient(circle at 13px 11px, #FF5F57 3.4px, transparent 3.9px), radial-gradient(circle at 25px 11px, #FEBC2E 3.4px, transparent 3.9px), radial-gradient(circle at 37px 11px, #28C840 3.4px, transparent 3.9px), linear-gradient(#fff, #fff) center 6px / 42% 10px no-repeat, #ECEDF0; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06); }
.dv26-project__img img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; padding-top: 22px; border-radius: 10px 10px 0 0; background: #ECEDF0; box-shadow: 0 10px 30px rgba(0, 20, 53, .16), 0 0 0 1px rgba(0, 20, 53, .06); transition: transform .4s var(--dv26-ease-out, ease); }
.dv26-project:hover .dv26-project__img img { transform: translateY(-4px); }
.dv26-project__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.dv26-project__ind { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-brand); }
.dv26-project h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); }
.dv26-project__about { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.dv26-project__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dv26-project__chips li { padding: 4px 10px; border-radius: 6px; background: var(--bg-subtle); font-size: 12px; line-height: 15px; font-weight: 500; color: var(--text-primary); }
.dv26-project__method { font-size: 12px; line-height: 15px; font-weight: 600; color: var(--text-brand); }
.dv26-project .dv26-link { margin-top: auto; }

/* ==========================================================================
   10. KHÁCH HÀNG NÓI GÌ
   ========================================================================== */
.dv26-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dv26-quote { height: 100%; margin: 0; display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid var(--border-default); border-radius: 16px; background: var(--bg-canvas); }
.dv26-quote__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; color: var(--bg-accent); }
.dv26-quote__logo { display: block; max-width: 60%; height: auto; object-fit: contain; }
.dv26-quote blockquote { margin: 0; padding: 0; border: 0; }
.dv26-quote blockquote p { font-size: 16px; line-height: 24px; color: var(--text-primary); font-style: normal; }
.dv26-quote figcaption { display: flex; align-items: center; gap: 12px; }
.dv26-quote figcaption > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.dv26-quote figcaption b { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.dv26-quote figcaption span span { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.dv26-quote__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--border-default); border-radius: 50%; background: var(--bg-subtle); color: var(--text-secondary); }

/* ==========================================================================
   11. HỎI ĐÁP
   ========================================================================== */
.dv26-faq__layout { display: grid; grid-template-columns: 384px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "head list" "more list" ". list"; column-gap: 64px; }
.dv26-faq__head { grid-area: head; }
.dv26-faq__more { grid-area: more; margin-top: 24px; }
.dv26-faq__list { grid-area: list; display: flex; flex-direction: column; gap: 12px; }
.dv26-faq__item { border: 1px solid var(--border-default); border-radius: 12px; background: #fff; transition: border-color .2s; }
.dv26-faq__item[open] { border-color: var(--bg-brand); }
.dv26-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; list-style: none; cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.dv26-faq__item summary::-webkit-details-marker { display: none; }
.dv26-faq__item summary i { flex: none; display: inline-flex; color: var(--text-secondary); }
.dv26-faq__minus { display: none !important; color: var(--text-brand); }
.dv26-faq__item[open] .dv26-faq__plus { display: none !important; }
.dv26-faq__item[open] .dv26-faq__minus { display: block !important; }
.dv26-faq__a { margin-top: -8px; padding: 0 24px 20px; }
.dv26-faq__a p { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.dv26-faq__a a { color: var(--text-brand) !important; text-decoration: none; }
.dv26-faq__a a:hover { text-decoration: underline; text-underline-offset: 2px; }
.dv26-faq__item.is-anim .dv26-faq__a { animation: dv26-faq .25s var(--dv26-ease-out); }
@keyframes dv26-faq { from { opacity: 0; transform: translateY(-4px); } }

/* ==========================================================================
   12. CTA + FORM
   ========================================================================== */
.dv26-cta__layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 520px; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". form" "copy form" "contacts form" ". form"; column-gap: 80px; row-gap: 0 !important; }
.dv26-cta__copy { grid-area: copy; display: flex; flex-direction: column; gap: 24px; }
.dv26-cta .dv26-overline { color: var(--dv26-lime); }
.dv26-cta .dv26-h2 { color: #fff; }
.dv26-cta .dv26-lead { color: var(--text-inverse-secondary); }
.dv26-cta__contacts { grid-area: contacts; display: flex; flex-direction: column; gap: 16px; padding-top: 32px; }
.dv26-cta__contacts li, .dv26-remote__card li { display: flex; align-items: center; gap: 16px; }
.dv26-cta__contacts li > span:last-child, .dv26-remote__card li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.dv26-cta__contacts small { font-size: 14px; line-height: 20px; color: var(--text-inverse-secondary); }
.dv26-cta__contacts b, .dv26-cta__contacts a { font-size: 16px; line-height: 24px; font-weight: 600; color: #fff; text-decoration: none; }
.dv26-form { grid-area: form; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 16px; background: #fff; }
.dv26-form__title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); }
.dv26-form__privacy { margin-top: -0px; font-size: 12px; line-height: 16px; color: var(--text-secondary); text-align: center; }
.dv26-form__done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; text-align: center; font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.dv26-form__done > span { display: inline-flex; padding: 12px; border-radius: 50%; background: var(--bg-brand-subtle); color: var(--text-brand); }
.dv26-form__done[hidden], .dv26-form__extra[hidden] { display: none !important; }
.dv26-form.is-done > :not(.dv26-form__done) { display: none !important; }
/* Fluent form trong thẻ (ghi đè nền pg26-ff cho đúng Figma: ô 50px, chữ 16px, cách 20px) */
.dv26-ff .frm-fluent-form fieldset { column-gap: 16px; }
.dv26-ff .frm-fluent-form fieldset > .ff-el-group:has([name="ho_ten"]) { grid-column: 1; }
.dv26-ff .frm-fluent-form fieldset > .ff-el-group:has([name="so_dien_thoai"]) { grid-column: 2; }
.dv26-ff .frm-fluent-form .pg26-ff-plan, .dv26-ff .frm-fluent-form .pg26-ff-need, .dv26-ff .frm-fluent-form .ff-el-group:has([name="email"]), .dv26-ff .frm-fluent-form .ff-el-group:has(> .ff-el-input--content > [name="noi_dung"]) { display: none !important; }
.dv26-ff .frm-fluent-form .ff-el-group { margin-bottom: 20px !important; }
.dv26-ff .frm-fluent-form .ff-el-input--label { margin-bottom: 8px !important; line-height: 20px; }
.dv26-ff .frm-fluent-form .ff-el-input--label label { display: block; }
.dv26-ff .frm-fluent-form .ff-el-input--content { line-height: 0; }
.dv26-ff .frm-fluent-form .ff-el-input--content > * { line-height: normal; }
.dv26-ff .frm-fluent-form .ff-el-input--label label { font: 600 14px/20px var(--font) !important; }
.dv26-ff .frm-fluent-form .ff-el-is-required label::after { content: none; }
.dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form .ff-el-form-control { display: block; width: 100%; max-width: none; height: 50px !important; padding: 12px 16px !important; font: 400 16px/24px var(--font) !important; }
.dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form .ff-el-form-control::placeholder { color: var(--text-secondary) !important; }
.dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form textarea.ff-el-form-control { height: 104px !important; min-height: 104px; resize: vertical; }
.dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form select.ff-el-form-control { padding-right: 44px !important; -webkit-appearance: none; appearance: none; cursor: pointer; }
.dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form select.ff-el-form-control:invalid, .dv26 .dv26-ff .dv26-select select.is-empty { color: var(--text-secondary) !important; }
.dv26-select { position: relative; }
.dv26-select > .pg26-ico { position: absolute; right: 16px; top: 15px; color: var(--text-secondary); pointer-events: none; }
.dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form .ff_submit_btn_wrapper { margin: 0 !important; }
.dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form .ff-btn-submit { min-height: 52px; padding: 14px 24px !important; font: 600 16px/24px var(--font) !important; }
.dv26-ff iframe { display: block; width: 100%; border: 0; }
.dv26-form.is-loading .ff-btn-submit { opacity: .7; pointer-events: none; }

/* ==========================================================================
   13. LÀM VIỆC TỪ XA (trang tỉnh)
   ========================================================================== */
.dv26-remote__layout { display: flex; align-items: flex-start; gap: 64px; }
.dv26-remote__steps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dv26-remote__steps li { position: relative; display: flex; gap: 24px; padding-bottom: 36px; }
.dv26-remote__steps li:last-child { padding-bottom: 0; }
.dv26-remote__steps li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--border-strong); }
.dv26-remote__steps li > div { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.dv26-remote__steps h3 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-primary); }
.dv26-remote__steps p { font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.dv26-remote__card { flex: 0 0 440px; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 20px; background: var(--dv26-navy); }
.dv26-remote__title { font-size: 24px; line-height: 32px; font-weight: 600; color: #fff; }
.dv26-remote__card ul { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-inverse); }
.dv26-remote__card li { align-items: flex-start; gap: 14px; }
.dv26-remote__card small { font-size: 12px; line-height: 16px; color: var(--text-inverse-secondary); }
.dv26-remote__card b, .dv26-remote__card li a { font-size: 16px; line-height: 24px; font-weight: 500; color: #fff; text-decoration: none; }
.dv26-remote__note { display: flex; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-inverse-secondary); }
.dv26-remote__note .pg26-ico { margin-top: 2px; }

/* ==========================================================================
   Hiệu ứng xuất hiện khi cuộn (IntersectionObserver trong page-dv26.js)
   ========================================================================== */
.dv26-js [data-dv26-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); }
.dv26-js [data-dv26-reveal] { transition: opacity .5s var(--dv26-ease-out), transform .5s var(--dv26-ease-out); }
.dv26-js ul[data-dv26-reveal], .dv26-js ol[data-dv26-reveal] { opacity: 1 !important; transform: none !important; }
.dv26-js ul[data-dv26-reveal]:not(.is-in) > li, .dv26-js ol[data-dv26-reveal]:not(.is-in) > li { opacity: 0; transform: translateY(16px); }
.dv26-js ul[data-dv26-reveal] > li, .dv26-js ol[data-dv26-reveal] > li { transition: opacity .5s var(--dv26-ease-out) calc(var(--i, 0) * 70ms), transform .5s var(--dv26-ease-out) calc(var(--i, 0) * 70ms), border-color .2s, box-shadow .2s; }
.dv26-js .dv26-process__steps:not(.is-in) li::after { transform: scaleX(0); }
.dv26-process__steps li::after { transition: transform .6s var(--dv26-ease-out) calc(var(--i, 0) * 120ms + .2s); }

/* ---------- footer chrome-2026 khi trang đã có form cuối (không có dải CTA) ---------- */
body.dv26-nocta .c26-footer { padding-top: 24px; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199px) {
  .dv26-hero__row { gap: 40px; }
  .dv26-h1 { font-size: 42px; line-height: 50px; }
  .dv26-pricing__grid { grid-template-columns: repeat(3, 1fr); }
  .dv26-situations__grid { grid-template-columns: repeat(2, 1fr); }
  .dv26-faq__layout { grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; }
  .dv26-cta__layout { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 48px; }
  .dv26-remote__card { flex-basis: 380px; }
  .dv26-logos__row { flex-wrap: wrap; justify-content: center; gap: 24px 40px; }
}
@media (max-width: 1023px) {
  .dv26-hero__row { flex-direction: column; align-items: stretch; }
  .dv26-hero__copy { max-width: none; flex-basis: auto; }
  .dv26-hv { align-self: center; flex-basis: auto; }
  .dv26-projects__grid, .dv26-quotes__grid, .dv26-icards__grid { grid-template-columns: 1fr; max-width: 640px; }
  .dv26-industries__grid { grid-template-columns: repeat(3, 1fr); }
  .dv26-faq__layout { grid-template-columns: 1fr; grid-template-areas: "head" "list" "more"; row-gap: 0; }
  .dv26-faq__list { margin-top: 24px; }
  .dv26-cta__layout { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "copy" "form" "contacts"; row-gap: 28px !important; }
  .dv26-cta__contacts { padding-top: 0; }
  .dv26-remote__layout { flex-direction: column; align-items: stretch; gap: 32px; }
  .dv26-remote__card { flex-basis: auto; }
  .dv26-compare__table { display: none; }
  .dv26-compare__cards { display: flex; flex-direction: column; gap: 16px; }
  .dv26-compare__card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--border-default); border-radius: 16px; background: #fff; }
  .dv26-compare__card.is-hl { border: 2px solid var(--bg-brand); background: var(--bg-brand-subtle); }
  .dv26-compare__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .dv26-compare__title b { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); }
  .dv26-compare__title span { padding: 2px 10px; border-radius: 999px; background: var(--bg-brand); font-size: 12px; line-height: 16px; color: #fff; white-space: nowrap; }
  .dv26-compare__card dl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
  .dv26-compare__card dl > div { display: flex; flex-direction: column; gap: 2px; }
  .dv26-compare__card dt { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-secondary); }
  .dv26-compare__card dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-primary); }
  .dv26-compare__card dd.is-strong { font-weight: 600; }
}

/* ==========================================================================
   Mobile (Figma Mobile 390)
   ========================================================================== */
@media (max-width: 767px) {
  .dv26 .dv26-d { display: none; }
  .dv26 .dv26-m { display: inline; }
  .dv26 p.dv26-m { display: block; }
  .dv26-sec { padding: 56px 16px; }
  .dv26-sec > .dv26-wrap { gap: 32px; }
  .dv26-head { gap: 10px; }
  .dv26-head--center { align-items: flex-start; text-align: left; }
  .dv26-h2 { font-size: 28px; line-height: 36px; letter-spacing: -.003em; }
  .dv26-lead { font-size: 16px; line-height: 24px; }

  .dv26-hero { padding: 40px 16px 48px; }
  .dv26-hero__row { gap: 32px; }
  .dv26-hero__copy { gap: 20px; }
  .dv26-h1 { font-size: 32px; line-height: 40px; }
  .dv26-hero__lead { font-size: 16px; line-height: 24px; }
  .dv26-hero__actions { align-self: stretch; flex-direction: column; gap: 12px; }
  .dv26-hero__actions .dv26-btn { width: 100%; }
  .dv26-hero__stats { gap: 12px; padding-top: 20px; }
  .dv26-hero__stats > div { gap: 2px; }
  .dv26-hero__stats dt { font-size: 20px; line-height: 28px; }
  .dv26-hero__stats dd { font-size: 12px; line-height: 16px; }
  .dv26-hero__features { grid-template-columns: 1fr; gap: 16px; }
  .dv26-hv { width: 100%; }
  .dv26-hv__float--hide-m { display: none; }

  .dv26-logos { padding: 32px 16px; }
  .dv26-logos .dv26-wrap { gap: 16px; }
  .dv26-logos__label { max-width: 300px; font-weight: 400; }
  .dv26-logos__row { gap: 20px 24px; }
  .dv26-logos__row img { height: 28px; }

  .dv26-situations__grid { grid-template-columns: 1fr; gap: 16px; }
  .dv26-situation { flex-direction: row; align-items: flex-start; padding: 20px; }
  .dv26-situation .dv26-iconbox { width: 44px; height: 44px; }
  .dv26-situation .dv26-iconbox .pg26-ico { width: 22px; height: 22px; }
  .dv26-situation__text { gap: 8px; }
  .dv26-situation p { font-size: 14px; line-height: 20px; }
  .dv26-situation .dv26-link { padding-top: 0; }

  .dv26-pricing > .dv26-wrap { gap: 24px; }
  .dv26-pricing__grid { grid-template-columns: 1fr; }
  .dv26-plan { padding: 24px; }
  .dv26-plan.is-hot { order: -1; }
  .dv26-plan__desc { min-height: 0; }
  .dv26-plan__top { min-height: 20px; }
  .dv26-plan__feats { gap: 10px; margin-bottom: 0; }
  .dv26-pricing__note { flex-direction: column; align-items: flex-start; gap: 24px; }

  .dv26-process__steps { grid-template-columns: 1fr; gap: 0; }
  .dv26-process__steps li { flex-direction: row; gap: 16px; padding-bottom: 0; }
  .dv26-process__num { width: 40px; height: 40px; font-size: 16px; line-height: 24px; }
  .dv26-process__steps li > div { gap: 4px; padding: 8px 0 24px; }
  .dv26-process__steps li:last-child > div { padding-bottom: 0; }
  .dv26-process__steps li:not(:last-child)::after { left: 19px; right: auto; top: 40px; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .dv26-js .dv26-process__steps:not(.is-in) li::after { transform: scaleY(0); }

  .dv26-industries__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dv26-industry { border-radius: 12px; }
  .dv26-industry__img { aspect-ratio: 171 / 116; }
  .dv26-industry__body { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px 14px; }
  .dv26-sec__more--center .dv26-btn { width: 100%; }

  .dv26-projects__grid, .dv26-quotes__grid, .dv26-icards__grid { gap: 16px; }
  .dv26-project__img { aspect-ratio: 356 / 200; padding: 14px 14px 0; }
  .dv26-project__img::before { left: 14px; right: 14px; top: 14px; }
  .dv26-project__body { gap: 10px; padding: 20px; }

  .dv26-quote { gap: 16px; padding: 20px; }
  .dv26-quote__top > .pg26-ico { width: 24px; height: 24px; }
  .dv26-quote__avatar { width: 44px; height: 44px; }
  .dv26-quote__avatar .pg26-ico { width: 20px; height: 20px; }

  .dv26-faq__list { gap: 10px; }
  .dv26-faq__item summary { gap: 12px; padding: 16px; }
  .dv26-faq__a { margin-top: -6px; padding: 0 16px 16px; }
  .dv26-faq__a p { font-size: 14px; line-height: 20px; }

  .dv26-cta__copy { gap: 16px; }
  .dv26-form { gap: 16px; padding: 20px; }
  .dv26-ff .frm-fluent-form fieldset > .ff-el-group:has([name="so_dien_thoai"]) { grid-column: 1 / -1; }
  .dv26-ff .frm-fluent-form fieldset > .ff-el-group:has([name="ho_ten"]) { grid-column: 1 / -1; }
  .dv26-ff .frm-fluent-form .ff-el-group { margin-bottom: 16px !important; }
  .dv26-ff .frm-fluent-form .ff-el-input--label { margin-bottom: 6px !important; }
  .dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form .ff-el-form-control { padding: 12px 14px !important; }
  .dv26 .dv26-ff .w123-ff-wrap .frm-fluent-form textarea.ff-el-form-control { height: 96px !important; min-height: 96px; }
  .dv26-cta__contacts { gap: 14px; }
  .dv26-cta__contacts li { gap: 14px; }
  .dv26-cta__contacts .dv26-iconbox { width: 44px; height: 44px; }
  .dv26-cta__contacts .dv26-iconbox .pg26-ico { width: 20px; height: 20px; }

  .dv26-remote__steps li { gap: 16px; padding-bottom: 24px; }
  .dv26-remote__steps .dv26-process__num { width: 40px; height: 40px; }
  .dv26-remote__steps li:not(:last-child)::before { left: 19px; top: 40px; }
  .dv26-remote__steps li > div { padding-top: 6px; }
  .dv26-remote__steps h3 { font-size: 20px; line-height: 28px; }
  .dv26-remote__card { padding: 24px; }
  .dv26-icard__top h3 { font-size: 20px; line-height: 28px; }
  .dv26-icard__body { padding: 20px; }
}

/* ==========================================================================
   Mobile / màn cảm ứng: chỉ hiệu ứng vào trang, không lặp
   ========================================================================== */
@media (max-width: 1023px), (hover: none) {
  .dv26-hv__fin { animation: dv26-fade .4s var(--dv26-ease-out) var(--t) both, dv26-pop .45s var(--dv26-spring) var(--t) both; }
  .dv26-hv__float { transition: none; }
}

/* ==========================================================================
   Giảm chuyển động: tắt hết
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dv26 *, .dv26 *::before, .dv26 *::after { animation: none !important; transition: none !important; }
  .dv26-js [data-dv26-reveal]:not(.is-in), .dv26-js ul[data-dv26-reveal]:not(.is-in) > li, .dv26-js ol[data-dv26-reveal]:not(.is-in) > li { opacity: 1; transform: none; }
  .dv26-js .dv26-process__steps:not(.is-in) li::after { transform: none; }
}