/* =====================================================================
   VERSION NEW · Trang chủ (02/10/2026)
   Định hướng: "Enterprise Power & Industrial Elegance" — giữ bảng màu + font của version cũ
   (đỏ #E8262D dùng tiết chế, navy #0F1B2D, nền xám khói #F3F3F3, Inter).
   Quy ước: 1rem = px thiết kế / 10 (≥1200px) · hover chỉ chạy ≥1200px có chuột.
   ===================================================================== */
.v2 { --v2-line: rgba(15, 27, 45, .1); --v2-line-dark: rgba(255, 255, 255, .14); --v2-smoke: #F3F3F3; --v2-sec: 16rem; }

/* ---------- chung ---------- */
.v2-sec-label .tagline { position: relative; padding-left: 1.6rem; }
.v2-sec-label .tagline::before { content: ''; position: absolute; left: 0; top: 50%; width: .6rem; height: .6rem; margin-top: -.3rem; background: var(--primary); }
.v2-h2 { font-size: 5.6rem; line-height: 1.1; font-weight: 500; letter-spacing: -.25rem; }
.v2-h2 em { font-style: normal; color: var(--primary); }
.v2-lead { margin-top: 2.8rem; max-width: 72rem; font-size: 1.8rem; line-height: 1.65; color: var(--fg-muted); }
.v2-head-cta { display: flex; justify-content: flex-end; align-items: end; }

/* ---------- HERO ---------- */
.v2-hero { position: relative; display: flex; flex-direction: column; color: #fff; overflow: hidden; background: var(--dark); }
.v2-hero-media { position: absolute; inset: 0; background: url('../assets/img/new-hero-photos.png') center top / 100% auto no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .v2-hero-media { will-change: transform; }
}
/* .v2-hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.72) 38%, rgba(15,27,45,.15) 72%, rgba(15,27,45,0) 100%),
  linear-gradient(0deg, rgba(15,27,45,.85) 0%, rgba(15,27,45,0) 34%); } */
/* màn hình đầu = đúng 100vh (heading trên · 2 thẻ dưới); dải logo nằm ngoài 100vh, cuộn xuống mới thấy */
.v2-hero-inner { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; padding-top: 16rem; padding-bottom: 3rem; align-content: stretch; align-items: start; row-gap: 4rem; }
.v2-hero-copy { align-self: center; }   /* heading canh giữa theo chiều dọc màn hình đầu */
.v2-hero-title { font-size: 8rem; line-height: 1.04; font-weight: 500; letter-spacing: -.35rem; }
.v2-hero-lead { margin-top: 3rem; font-size: 1.9rem; line-height: 1.6; color: rgba(255,255,255,.8); }
.v2-hero-actions { margin-top: 4.8rem; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }   /* 2 nút rộng bằng nhau (= nút dài hơn) */
.v2-hero-actions .btn { padding: 1.7rem 3.2rem; justify-content: center; }
/* 2 thẻ lối tắt (v2.26): khối 4 cột (cột 8–11), mỗi thẻ 2 cột, khoảng cách = gutter · không padding, canh trái · đáy ngang nút hộp thoại (3rem từ đáy màn hình)
   hover: thẻ cao lên (đẩy lên trên), nền trắng 20% + mũi tên hiện */
.v2-hero-cards { align-self: end; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--grid-gutter); align-items: end; }
.v2-hero-card { --hc-pad: 0rem; position: relative; display: block; height: 8rem; padding: 1.6rem var(--hc-pad) 0; border-radius: .4rem; color: #fff; background: rgba(255,255,255,0);
  transition: height .7s cubic-bezier(.22,1,.36,1), padding .7s cubic-bezier(.22,1,.36,1), background .7s cubic-bezier(.22,1,.36,1); }
.v2-hero-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.6); }
.v2-hc-t { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -.04rem; line-height: 1.3; text-align: left; }
.v2-hc-arrow { position: absolute; left: 1.6rem; bottom: 1.6rem; width: 4.2rem; height: 4.2rem; border-radius: .4rem; display: grid; place-items: center; background: #fff; color: var(--dark);
  opacity: 0; transform: translateY(1rem); transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }   /* mặc định ẩn */
.v2-hc-arrow svg { width: 2rem; height: 2rem; }
@media (min-width: 1200px) and (hover: hover) {
  .v2-hero-card:hover { --hc-pad: 1.6rem; height: 16rem; background: rgba(255,255,255,.2); }
  .v2-hero-card:hover .v2-hc-arrow { opacity: 1; transform: none; transition-delay: .12s; }
}

/* dải logo trong hero */
.v2-hero-logos { position: relative; z-index: 2; padding: var(--v2-sec) 0; }   /* trên (từ line) = dưới = khoảng trên của section dưới (--v2-sec) */
.v2-hero-logos::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255,255,255,.3); }   /* line trắng full width trên đỉnh */
.v2-hero-logos-tag { color: rgba(255,255,255,.7); text-align: left; }
.v2-hero .clients-marquee { margin: 2.4rem 0 0; }
.v2-hero .clients-marquee .marquee-track { gap: 1.9rem; }
.v2-hero .client-box { width: 20rem; height: 12.8rem; border-radius: 1rem; }   /* 0.8× kích thước gốc 25×16rem */
.v2-hero .client-box { background: none; border: 0; }   /* không viền, không nền */
.v2-hero .client-box img { filter: brightness(0) invert(1); opacity: 1; }   /* trắng 100% */
/* logo có khối nền đặc (Dussmann) — không đổi sang trắng để khỏi thành ô trắng, chỉ chuyển xám + mờ */
.v2-hero .client-box img[src*="dussmann"] { filter: grayscale(1) brightness(1.1); opacity: 1; }
@media (min-width: 1200px) and (hover: hover) {
}
.v2-intro { padding-top: 16rem; }
.v2-intro .stats { align-self: start; }   /* "Những con số biết nói" canh trên */

/* ---------- SƠ ĐỒ KIẾN TRÚC — isometric nét mảnh (v2.14) ---------- */
.v2-map { padding: 12rem 0 8rem; display: flex; flex-direction: column; justify-content: center; background: var(--v2-smoke); position: relative; overflow: hidden; }
.v2-map > .container { position: relative; }
.v2-map-title { text-align: center; display: flex; flex-direction: column; align-items: center; }
.v2-map-title .tagline { margin-bottom: 1.6rem; }
.v2-map-title .v2-lead { margin-top: 1.6rem; }
.v2-map-title .v2-lead { margin-inline: auto; }
.v2-arch-stage { position: relative; margin-top: 4rem; height: 92vh; height: 92svh; max-height: 54vw; min-height: 56rem; }   /* sơ đồ cao ~90–95% màn hình */
.v2-arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* lưới isometric mờ phía sau */
.v2-arch-svg .iso-grid { stroke: rgba(15,27,45,.06); stroke-width: 1; }
/* tầng (plate) */
.v2-arch-svg .plate-top { fill: #fff; stroke: rgba(15,27,45,.35); stroke-width: 1.2; stroke-linejoin: round; transition: stroke .35s, fill .35s; }
.v2-arch-svg .plate-l { fill: #ECEDEF; stroke: rgba(15,27,45,.35); stroke-width: 1.2; stroke-linejoin: round; transition: stroke .35s; }
.v2-arch-svg .plate-r { fill: #E2E4E8; stroke: rgba(15,27,45,.35); stroke-width: 1.2; stroke-linejoin: round; transition: stroke .35s; }
.v2-arch-svg .plate-inset { fill: none; stroke: rgba(15,27,45,.12); stroke-width: 1; stroke-dasharray: 3 5; }
.v2-arch-svg .pillar { stroke: rgba(15,27,45,.28); stroke-width: 1; stroke-dasharray: 2 5; }
.v2-arch-svg .plate-label { font: 600 12px/1 var(--font-display); letter-spacing: .12em; fill: rgba(15,27,45,.5); text-transform: uppercase; transition: fill .35s; }
.v2-arch-svg .plate.on .plate-top { stroke: var(--primary); fill: #FFF7F7; }
.v2-arch-svg .plate.on .plate-l, .v2-arch-svg .plate.on .plate-r { stroke: var(--primary); }
.v2-arch-svg .plate.on .plate-label { fill: var(--primary); }
.v2-arch-svg .plate-icon { fill: none; stroke: rgba(15,27,45,.55); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.v2-arch-svg .plate-icon * { vector-effect: non-scaling-stroke; }
.v2-arch-svg .plate.on .plate-icon { stroke: var(--primary); }
.v2-arch-svg .plate-label { font-size: 14px; }
.v2-arch-svg .plate-side { font-size: 12px; fill: rgba(15,27,45,.6); transition: fill .35s; }
.v2-arch-svg .plate-side-bg { fill: #fff; stroke: rgba(15,27,45,.3); stroke-width: 1; transition: stroke .35s; }
.v2-arch-svg .hub.on .plate-side-bg { stroke: var(--primary); }
.v2-arch-svg .hub.on .plate-side { fill: var(--primary); }
/* đường nối */
.v2-arch-svg .wire { fill: none; stroke: rgba(15,27,45,.2); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .3s, stroke-dashoffset .5s ease-in; }
.v2-arch-svg .wire.drawn { stroke-dashoffset: 0; transition: opacity .3s, stroke-dashoffset .5s cubic-bezier(.4,0,.2,1) var(--d, 0s); }   /* dây chạy từ tầng ra phân hệ */
.v2-arch-svg .wire-dot, .v2-arch-svg .hub { opacity: 0; transition: opacity .3s; }
.v2-arch-svg .wire-dot.drawn, .v2-arch-svg .hub.drawn { opacity: 1; transition: opacity .4s ease .1s; }
.v2-arch-svg .wire-dot { fill: #fff; stroke: rgba(15,27,45,.35); stroke-width: 1; }
.v2-arch.has-focus .v2-arch-svg .wire { opacity: .45; }
.v2-arch-svg .flow { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 8; opacity: 0; transition: opacity .3s; animation: v2flow .9s linear infinite; }
.v2-arch-svg .flow.out { animation-direction: reverse; }
.v2-arch-svg .flow.on { opacity: 1; }
@keyframes v2flow { to { stroke-dashoffset: -26; } }

/* phân hệ: thẻ nét mảnh */
.v2-anode { position: absolute; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.6rem .9rem 1rem;
  background: #fff; border: 1px solid rgba(15,27,45,.14); border-radius: .8rem; white-space: nowrap; cursor: pointer; color: var(--fg);
  transition: opacity .3s, border-color .3s, color .3s, box-shadow .3s, transform .35s var(--ease); }
.v2-anode .ico, .v2-alist-item .ico { flex: none; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; color: var(--fg); border-right: 1px solid rgba(15,27,45,.1); padding-right: 1rem; box-sizing: content-box; transition: color .3s; }
.v2-anode .ico svg, .v2-alist-item .ico svg { width: 2.2rem; height: 2.2rem; }
.v2-arch.has-focus .v2-anode { opacity: .35; }
.v2-arch.has-focus .v2-anode.is-linked { opacity: 1; border-color: rgba(232,38,45,.45); }
.v2-arch.has-focus .v2-anode.is-linked .ico { color: var(--primary); }
.v2-arch.has-focus .v2-anode.is-active { opacity: 1; border-color: var(--primary); color: var(--primary); transform: translate(-50%, calc(-50% - .3rem));
  box-shadow: 0 1.4rem 3rem -1.6rem rgba(232,38,45,.55); }
.v2-arch.has-focus .v2-anode.is-active .ico { color: var(--primary); }
.v2-anode:focus-visible, .v2-alist-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.v2-arch-list { display: none; }
/* v2.21 — thẻ rộng đều · lớp bấm được · phân hệ đã chọn phủ đỏ từ trái sang · hoạt cảnh xuất hiện */
.v2-anode { isolation: isolate; overflow: hidden; }
.v2-anode::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--primary); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease); }
.v2-arch .v2-anode.is-selected, .v2-arch.has-focus .v2-anode.is-selected { opacity: 1; color: #fff; border-color: var(--primary); }
.v2-arch .v2-anode.is-selected::before { transform: scaleX(1); }
.v2-arch .v2-anode.is-selected .ico, .v2-arch.has-focus .v2-anode.is-selected .ico { color: #fff; border-right-color: rgba(255,255,255,.35); }
.v2-anode.is-selected .ico img { filter: brightness(0) invert(1); }
.v2-arch.has-focus .v2-anode.is-tier { opacity: 1; border-color: var(--primary); color: var(--primary); }
.v2-arch.has-focus .v2-anode.is-tier .ico { color: var(--primary); }
.v2-arch-svg [data-layer] { pointer-events: auto; cursor: pointer; }
.v2-arch:not(.nodes-in) .v2-anode { opacity: 0; transform: translate(-50%, -20%); pointer-events: none; }
.v2-arch.nodes-entering .v2-anode { transition: opacity .35s var(--ease) calc(var(--i, 0) * 15ms), transform .45s var(--ease) calc(var(--i, 0) * 15ms); }
@media (min-width: 1200px) { .v2-drawer .v2-drawer-bg { background: rgba(15,27,45,.22); backdrop-filter: none; } }   /* nhìn rõ phân hệ đã chọn phía sau bảng chi tiết */

/* ---- bảng chi tiết ---- */
.v2-drawer-open .contact-dock { opacity: 0; visibility: hidden; }
.v2-drawer { position: fixed; inset: 0; z-index: 1300; visibility: hidden; pointer-events: none; }
.v2-drawer.open { visibility: visible; pointer-events: auto; }
.v2-drawer-bg { position: absolute; inset: 0; background: rgba(15,27,45,.45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s; }
.v2-drawer.open .v2-drawer-bg { opacity: 1; }
.v2-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 56rem; max-width: 100%; background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .55s var(--ease); box-shadow: -3rem 0 8rem -3rem rgba(15,27,45,.45); }
.v2-drawer.open .v2-drawer-panel { transform: none; }
.v2-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 2.4rem 4rem; border-bottom: 1px solid var(--gray); }
.v2-drawer-tier { font-size: 1.3rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.v2-drawer-x { width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid var(--gray); display: grid; place-items: center; color: var(--fg); }
.v2-drawer-x svg { width: 2rem; height: 2rem; }
.v2-drawer-body { flex: 1; overflow-y: auto; padding: 4rem; overscroll-behavior: contain; }
.v2-drawer-ico { width: 7.2rem; height: 7.2rem; border-radius: 1.8rem; background: var(--dark); color: #fff; display: grid; place-items: center; }
.v2-drawer-ico.is-logo { background: #fff; border: 1px solid var(--gray); }
.v2-drawer-ico svg { width: 3.4rem; height: 3.4rem; }
.v2-drawer-body h3 { margin-top: 3.2rem; font-size: 4rem; letter-spacing: -.15rem; line-height: 1.1; }
.v2-drawer-desc { margin-top: 2rem; font-size: 1.8rem; line-height: 1.65; color: var(--fg-muted); }
.v2-drawer-cap { margin-top: 4rem; font-size: 1.2rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-500); }
.v2-drawer-does { list-style: none; margin-top: 1.6rem; display: flex; flex-direction: column; }
.v2-drawer-does li { position: relative; padding: 1.5rem 0 1.5rem 3.2rem; border-top: 1px solid var(--gray); font-size: 1.6rem; line-height: 1.55; }
.v2-drawer-does li:last-child { border-bottom: 1px solid var(--gray); }
.v2-drawer-does li::before { content: ''; position: absolute; left: .2rem; top: 2.2rem; width: 1.4rem; height: .8rem; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.v2-drawer-links { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.v2-drawer-links button { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.4rem; font-weight: 500; padding: .6rem 1.4rem .6rem .6rem; border-radius: 99px; border: 1px solid var(--gray); color: var(--fg); background: #fff; transition: border-color .25s, color .25s; }
.v2-drawer-links button .ico { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--v2-smoke); }
.v2-drawer-links button .ico svg { width: 1.5rem; height: 1.5rem; }
.v2-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.4rem 4rem; border-top: 1px solid var(--gray); }
/* v18: nút "Xem trang phân hệ" (khi phân hệ có trang chi tiết) — đứng trước nút đặt lịch demo */
.v2-drawer-foot { flex-wrap: wrap; justify-content: flex-start; }
.v2-drawer-nav { margin-left: auto; }
.v2-drawer-page[hidden] { display: none; }
.v2-drawer-nav { display: flex; gap: .8rem; }
.v2-drawer-nav button { width: 4.8rem; height: 4.8rem; border-radius: 50%; border: 1px solid var(--gray); font-size: 1.8rem; color: var(--fg); }
@media (min-width: 1200px) and (hover: hover) {
  .v2-anode:hover { border-color: var(--fg); }
  .v2-drawer-links button:hover, .v2-drawer-nav button:hover, .v2-drawer-x:hover { border-color: var(--primary); color: var(--primary); }
}

/* ---------- GIẢI PHÁP THEO NHU CẦU — tối giản: tiêu đề giữa + nhãn ---------- */
.v2-needs { padding: 20rem 0; }
.v2-needs-inner { text-align: center; }
.v2-needs-title { font-size: 6.4rem; font-weight: 500; letter-spacing: -.25rem; line-height: 1.1; }
.v2-needs-sub { margin-top: 1.6rem; font-size: 1.8rem; color: var(--fg-muted); }
.v2-pills { margin-top: 7.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.v2-pill { display: inline-flex; align-items: center; padding: .6rem 2.4rem .9rem; border-radius: 99px; background: var(--v2-smoke);
  font-size: 4rem; font-weight: 400; letter-spacing: -.12rem; line-height: 1.25; color: var(--fg); transition: background .3s, color .3s; }
@media (min-width: 1200px) and (hover: hover) {
  .v2-pill:hover { background: var(--fg); color: #fff; }
}

/* ---------- DỮ LIỆU LÀ TÀI SẢN CỦA BẠN — khối lớn bo góc, nền đỏ thương hiệu chuyển sắc ---------- */
.v2-own { padding: 8rem 0 var(--v2-sec); }
.v2-own-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding: 8rem 8rem 7.2rem; border-radius: 4rem; color: #fff;
  background: linear-gradient(115deg, #F5584A 0%, #E8262D 42%, #B8141B 100%); box-shadow: 0 4rem 8rem -5rem rgba(184,20,27,.55); }
.v2-own-card::after { content: ''; position: absolute; right: -16rem; bottom: -24rem; width: 64rem; height: 64rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 65%); pointer-events: none; }
.v2-own-title { font-size: 7.2rem; line-height: 1.04; font-weight: 500; letter-spacing: -.3rem; max-width: 64rem; }
.v2-own-right { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6rem; }
.v2-own-list { list-style: none; display: flex; flex-direction: column; gap: 2.6rem; }
.v2-own-list li { display: flex; align-items: center; gap: 1.8rem; font-size: 2.6rem; line-height: 1.3; letter-spacing: -.06rem; }
.v2-chk { flex: none; width: 4rem; height: 4rem; }
.v2-chk svg { width: 100%; height: 100%; }
.v2-own-actions { display: flex; flex-wrap: wrap; gap: 1.6rem; }   /* nút dùng đúng hình dạng .btn chung, rộng theo nội dung */
.v2-own-btn--solid.btn--primary { background: #fff; color: var(--primary); }
@media (min-width: 1200px) and (hover: hover) {
  .v2-own-btn--solid.btn--primary:hover { background: var(--dark); color: #fff; }
  .v2-own-btn--ghost:hover { background: #fff; color: var(--primary); border-color: #fff; }
}

/* ---------- LỘ TRÌNH CHUYỂN ĐỔI ---------- */

/* ---------- CHUYỂN ĐỔI HỆ THỐNG (v2.22): full width · 100vh · cuộn chỉ điều khiển khối chữ, minh hoạ hạt tự chạy theo bước ---------- */
.v2-migrate { position: relative; height: 100vh; height: 100svh; padding: 0; background: var(--v2-smoke); overflow: hidden; }
.v2-mig-inner { height: 100%; align-items: stretch; }
.v2-mig-copy { display: flex; flex-direction: column; justify-content: center; padding: 10rem 0 6rem; }
.v2-mig-copy .v2-h2 { margin-top: 2.4rem; }
.v2-migrate .v2-steps { list-style: none; margin-top: 5.6rem; }
.v2-step { position: relative; padding-left: 3.2rem; }
.v2-step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(15,27,45,.14); }
.v2-step::after { content: ''; position: absolute; left: -.5px; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: var(--primary); }
.v2-step-head { display: flex; align-items: baseline; gap: 2rem; width: 100%; padding: 1.6rem 0; text-align: left; color: var(--fg); opacity: .32; transition: opacity .45s var(--ease); cursor: pointer; }
.v2-step.is-on .v2-step-head { opacity: 1; }
.v2-step-no { flex: none; width: 3.2rem; color: var(--primary); }
.v2-step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.v2-step-body > div { overflow: hidden; }
.v2-step.is-on .v2-step-body { grid-template-rows: 1fr; }
.v2-step-body p { padding: 0 0 2rem 5.2rem; max-width: 56rem; color: var(--fg-muted); }
@media (min-width: 1200px) and (hover: hover) { .v2-step:not(.is-on) .v2-step-head:hover { opacity: .7; } }

.v2-mig-stage { position: relative; padding: 10rem 0 5rem; }
.v2-mig-vis { position: relative; width: 100%; height: 100%; }
.v2-mig-vis canvas { position: absolute; left: 0; top: 0; display: block; }
.v2-mig-vis > :not(canvas) { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; transition: opacity .5s var(--ease); }
.v2-mig-cap { font-size: 1.2rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(15,27,45,.55); transition: opacity .5s var(--ease); }
.v2-mig-cap.is-red { color: var(--primary); }
.v2-migrate[data-step="0"] #mig-cap-new { opacity: .4; }
.v2-migrate[data-step="3"] #mig-cap-old { opacity: .3; }
.v2-mig-legend { list-style: none; display: flex; flex-direction: column; gap: .8rem; font-size: 1.3rem; color: var(--fg-muted); }
.v2-mig-legend li { display: flex; align-items: center; gap: .8rem; }
.v2-mig-legend i { width: .8rem; height: .8rem; border-radius: 50%; }
.v2-mig-legend .k { background: var(--dark); }
.v2-mig-legend .l { border: 1.5px solid var(--dark); }
.v2-mig-legend .r { background: var(--primary); }
.v2-mig-data { font-size: 1.4rem; font-weight: 500; color: var(--primary); }
.v2-mig-badge { padding: .7rem 1.4rem; border: 1px solid var(--primary); border-radius: 99rem; background: #fff; font-size: 1.3rem; font-weight: 500; color: var(--primary); }
.v2-mig-legend, .v2-mig-data, .v2-mig-badge { opacity: 0; }
.v2-mig-legend.is-on, .v2-mig-data.is-on, .v2-mig-badge.is-on { opacity: 1; }
.v2-mig-br { display: flex; align-items: center; gap: 1.6rem; }
.v2-mig-live { display: flex; align-items: center; gap: .8rem; padding-left: 1.6rem; border-left: 1px solid rgba(15,27,45,.16); font-size: 1.3rem; color: var(--fg-muted); }
.v2-mig-live b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.v2-mig-pulse { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: var(--primary); }
.v2-mig-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--primary); animation: v2MigPulse 1.6s ease-out infinite; }
@keyframes v2MigPulse { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
.v2-mig-stepname { display: none; }

@media (max-width: 1199px) {
  .v2-migrate { height: auto; padding: 8rem 0; }
  .v2-mig-copy { padding: 0; }
  .v2-migrate .v2-steps { margin-top: 3.2rem; }
  .v2-step-body p { padding-left: 4.4rem; }
  .v2-step-head { gap: 1.2rem; }
  .v2-mig-stage { padding: 4.8rem 0 0; }
  .v2-mig-vis { height: auto; aspect-ratio: 1 / 1; }
  .v2-mig-stepname { display: block; left: 0 !important; top: 0 !important; transform: none !important; font-size: var(--m-tag, 1.2rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
  .v2-mig-cap { font-size: 1.1rem; }
  .v2-mig-legend { display: none; }
  .v2-mig-badge, .v2-mig-live { font-size: 1.2rem; }
  .v2-mig-br { gap: 1rem; } .v2-mig-live { padding-left: 1rem; }
}

/* ===================== MOBILE / TABLET (< 1200px) ===================== */
@media (max-width: 1199px) {
  .v2 { --v2-sec: 8rem; }
  :is(.v2-hero, .v2-map, .v2-needs, .v2-own, .v2-migrate) .container > [class*="col-"] { grid-column: 1 / -1; }   /* grid.css: start-auto + end -1 làm cột co về 1 ô */
  .v2-h2 { font-size: 3.2rem; letter-spacing: -.1rem; }
  .v2-lead { font-size: 1.6rem; margin-top: 1.6rem; }
  .v2-sec-label { margin-bottom: 2rem; }
  .v2-head-cta { justify-content: flex-start; }
  .v2-hero-shade { background: linear-gradient(0deg, rgba(15,27,45,.95) 0%, rgba(15,27,45,.7) 55%, rgba(15,27,45,.35) 100%); }
  .v2-hero-inner { padding-top: 12rem; padding-bottom: 3rem; row-gap: 3.2rem; }
  .v2-hero-title { font-size: 4.2rem; letter-spacing: -.15rem; }
  .v2-hero-inner { padding-bottom: 4rem; }
  .v2-hero-cards { column-gap: var(--grid-gutter); }   /* < 1200px: khối 2 thẻ giãn full container */
  .v2-hero-logos { padding: var(--v2-sec) 0; }
  .v2-hero .client-box { width: 10.4rem; height: 6.7rem; border-radius: .8rem; }
  .v2-hero .clients-marquee .marquee-track { gap: 1.1rem; }
  .v2-intro { padding-top: 8rem; }
  .v2-hc-t { font-size: 1.6rem; }
  .v2-hero-card { height: auto; padding-bottom: .4rem; }
  .v2-hc-arrow { display: none; }
  .v2-hero-lead { font-size: 1.6rem; margin-top: 2rem; }
  .v2-hero-actions { margin-top: 3rem; grid-template-columns: 1fr; }   /* mobile: xếp dọc, vẫn rộng bằng nhau */
  .v2-needs { padding: 10rem 0; }
  .v2-needs-title { font-size: 3.2rem; letter-spacing: -.1rem; }
  .v2-needs-sub { font-size: 1.5rem; }
  .v2-pills { margin-top: 3.2rem; gap: .8rem; }
  .v2-pill { font-size: 1.8rem; letter-spacing: -.04rem; padding: .6rem 1.4rem .7rem; }
  .v2-own { padding: 4rem 0 8rem; }
  .v2-own-card { grid-template-columns: 1fr; gap: 3.2rem; padding: 3.6rem 2.4rem; border-radius: 2.4rem; }
  .v2-own-title { font-size: 3.6rem; letter-spacing: -.12rem; }
  .v2-own-right { gap: 3.2rem; }
  .v2-own-list { gap: 1.6rem; }
  .v2-own-list li { font-size: 1.7rem; gap: 1.2rem; align-items: flex-start; }
  .v2-chk { width: 2.8rem; height: 2.8rem; }
  .v2-map { min-height: 0; padding: 8rem 0; display: block; }
  /* sơ đồ: mobile dùng danh sách theo tầng */
  .v2-map-title { text-align: left; align-items: flex-start; }
  .v2-arch-stage { display: none; }
  .v2-arch-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 3.2rem; }
  .v2-alist-core { width: 100%; display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem; border-radius: 1.2rem; background: #fff; border: 1px solid rgba(15,27,45,.12); text-align: left; color: var(--fg); }
  .v2-alist-core img { width: 4.4rem; height: 4.4rem; flex: none; }
  .v2-alist-core b { display: block; font-size: 1.8rem; font-weight: 500; }
  .v2-alist-group { padding: 1.6rem; border-radius: 1.6rem; background: #fff; border: 1px solid rgba(15,27,45,.08); }
  .v2-alist-group > p { font-size: 1.2rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: .4rem .4rem 1rem; }
  .v2-alist-item { width: 100%; display: flex; align-items: center; gap: 1.2rem; padding: .8rem .4rem; font-size: 1.5rem; font-weight: 500; color: var(--fg); text-align: left; border-top: 1px solid rgba(15,27,45,.06); }
  .v2-alist-item:first-of-type { border-top: 0; }
  .v2-alist-item .ico { width: 2.8rem; height: 2.8rem; }
  .v2-alist-item::after { content: '›'; margin-left: auto; font-size: 2rem; color: var(--neutral-400); }
  .v2-drawer-panel { top: auto; bottom: 0; width: 100%; height: auto; max-height: 88svh; border-radius: 2rem 2rem 0 0; transform: translateY(100%); }
  .v2-drawer-top, .v2-drawer-body, .v2-drawer-foot { padding-left: 2rem; padding-right: 2rem; }
  .v2-drawer-top { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .v2-drawer-body { padding-top: 2.4rem; padding-bottom: 2.4rem; }
  .v2-drawer-ico { width: 5.6rem; height: 5.6rem; border-radius: 1.4rem; }
  .v2-drawer-body h3 { margin-top: 2rem; font-size: 2.8rem; }
  .v2-drawer-desc { font-size: 1.6rem; }
  .v2-drawer-cap { margin-top: 2.8rem; }
  .v2-drawer-foot { padding-top: 1.6rem; padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  .v2-drawer-foot { gap: 1.2rem; }
  .v2-drawer-foot .btn { flex: 1; justify-content: center; padding: 1.4rem 1.2rem; }
  .v2-drawer-nav button { width: 4.4rem; height: 4.4rem; }
}

/* =====================================================================
   HỆ THỐNG CHỮ (TYPE SCALE) — NGUỒN DUY NHẤT cho các section version new.
   Bám đúng phân cấp của website cũ (site.css / base.css / mobile-type.css):
     H1 trang ........ 8.8rem · 500 · -0.4rem · lh 1.05      (mobile --m-h1)
     H2 section ...... 6.4rem · 500 · -0.4rem · lh 1.1       (mobile --m-h2)
     H3 card/mục ..... 2.8rem · 500 · lh 1.3                 (mobile --m-h3)
     Lead ............ 1.6rem · lh 1.6 · màu phụ             (mobile --m-lead)
     Body / mô tả .... 1.6rem · lh 1.7                       (mobile --m-desc)
     Tagline ......... 1.4rem · 500 · 0.04em · in hoa        (mobile --m-tag)
     Nút ............. .btn chung (1.5rem · 500)
   Không đặt cỡ chữ riêng trong từng section — thêm selector vào nhóm phù hợp bên dưới.
   ===================================================================== */
.v2-hero-title { font-size: 8.8rem; font-weight: 500; letter-spacing: -.4rem; line-height: 1.2; }
.v2-h2, .v2-needs-title, .v2-own-title, .v2 .ai-title, .v2 .footer-cta h2 { font-size: 6.4rem; font-weight: 500; letter-spacing: -.4rem; line-height: 1.1; }   /* AI + footer CTA trước là 4.4rem → đưa về H2 */
.v2-step-t, .v2-pill, .v2-own-list li, .v2-drawer-body h3 { font-size: 2.8rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.v2-lead, .v2-needs-sub, .v2-hero-lead, .v2-drawer-desc { font-size: 1.6rem; line-height: 1.6; }
.v2-step-body p, .v2-drawer-does li, .v2-anode, .v2-hc-t, .v2-alist-item { font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; }
.v2-step-body p, .v2-drawer-does li { font-weight: 400; line-height: 1.7; }
.v2-hc-t { line-height: 1.3; }
.v2-drawer-tier, .v2-drawer-cap, .v2-step-no, .v2-alist-group > p {
  font-size: 1.4rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.v2-drawer-links button { font-size: 1.4rem; }
@media (max-width: 1199px) {
  .v2-br-d { display: none; }
  .v2-hero-title { font-size: var(--m-h1); line-height: 1.15; letter-spacing: -1px; }
  .v2-h2, .v2-needs-title, .v2-own-title, .v2 .ai-title, .v2 .footer-cta h2 { font-size: var(--m-h2); line-height: 1.2; letter-spacing: -1px; }
  .v2-step-t, .v2-pill, .v2-own-list li, .v2-drawer-body h3 { font-size: var(--m-h3); line-height: 1.3; letter-spacing: 0; }
  .v2-lead, .v2-needs-sub, .v2-hero-lead, .v2-drawer-desc { font-size: var(--m-lead); }
  .v2-step-body p, .v2-drawer-does li, .v2-anode, .v2-hc-t, .v2-alist-item { font-size: var(--m-desc); }
  .v2-drawer-tier, .v2-drawer-cap, .v2-step-no, .v2-alist-group > p { font-size: var(--m-tag); }
  .v2-drawer-links button { font-size: var(--m-meta); }
}

/* =====================================================================
   v2.35 · 07/10/2026 — MOBILE / TABLET (< 1200px)
   - Hero: ảnh nền phủ kín màn hình, dính (sticky) tới hết dải logo khách hàng; lớp phủ tông đen #000; 2 nút xếp ngang, lấp đầy chiều ngang container.
   - "Dữ liệu là tài sản của bạn": full width, cao theo nội dung, padding trên/dưới rộng; chữ theo tỉ lệ mobile (tiêu đề 24px, nội dung 16px); 2 nút xếp ngang.
   ===================================================================== */
@media (max-width: 1199px) {
  .v2-hero { overflow: clip; }   /* hidden → clip để ảnh nền dính được */
  /* ảnh nền: khối dính cao 100svh nằm trong luồng; nội dung hero kéo lên đè lên ảnh → ảnh đứng yên tới khi đáy dải logo chạm đáy ảnh rồi cùng trượt lên */
  .v2-hero-media { position: sticky; inset: 0 auto auto 0; flex: none; width: 100%; height: 100vh; height: 100svh; z-index: 0; }
  .v2-hero-inner { margin-top: -100vh; margin-top: -100svh; }
  .v2-hero-shade { display: none; }
  .v2-hero-media { background-size: cover; background-position: 62% center; transform: none !important; }   /* bỏ parallax desktop */
  .v2-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.1) 100%); pointer-events: none; }   /* lớp phủ đen */
  .v2-hero-actions { display: flex; flex-wrap: nowrap; gap: .8rem; width: 100%; }   /* 2 nút lấp đầy chiều ngang container */
  .v2-hero-actions .btn { flex: 1 1 auto; justify-content: center; padding: 1.3rem 1rem; font-size: 1.4rem; white-space: nowrap; }

  .v2-own { padding: 0; }
  .v2-own > .container { padding-inline: 0; }
  .v2-own-card { gap: 3.2rem; padding: 9.6rem var(--grid-margin) 10.4rem; border-radius: 0; }
  .v2-own-title { font-size: 2.4rem; line-height: 1.25; letter-spacing: -.04rem; max-width: none; }
  .v2-own-right { gap: 3.2rem; }
  .v2-own-list { gap: 1.4rem; }
  .v2-own-list li { font-size: 1.6rem; line-height: 1.5; letter-spacing: 0; gap: 1.2rem; }
  .v2-chk { width: 2.4rem; height: 2.4rem; flex: none; }
  .v2-own-actions { flex-wrap: nowrap; gap: 1rem; }
  .v2-own-actions .btn { padding: 1.3rem 1.8rem; white-space: nowrap; }
}

/* =====================================================================
   v2.36 · 07/10/2026
   - TẠM ẨN section "Dữ liệu là tài sản của bạn" (#so-huu) trên mọi màn hình — bỏ dòng display:none bên dưới để hiện lại.
   - Mobile / tablet: "Bắt đầu từ bài toán của bạn" — chữ các nút 16px; "Chuyển đổi hệ thống" — nhãn trạng thái (Đối chiếu số liệu…) xuống dưới sơ đồ, canh giữa.
   ===================================================================== */
.v2-own { display: none !important; }
@media (max-width: 1199px) {
  .v2-pills { gap: .8rem; }
  .v2-pill { font-size: 1.6rem; line-height: 1.3; letter-spacing: 0; padding: .7rem 1.4rem .8rem; }
  .v2-mig-stage { padding-bottom: 7.2rem; }
  .v2-mig-vis > .v2-mig-badge { left: 50% !important; top: auto !important; bottom: -5.6rem; transform: translateX(-50%) !important; }
}

/* =====================================================================
   v2.37 · 07/10/2026 — MOBILE / TABLET (< 1200px)
   - Mọi heading section (H2) dùng chung thông số với đoạn văn mở đầu (.reveal-text): 24px · đậm 600 · letter-spacing -1px · line-height 1.35.
   - Mobile (< 768px): ẩn phần hình minh hoạ của section "Chuyển đổi hệ thống".
   ===================================================================== */
@media (max-width: 1199px) {
  .v2-h2, .v2-needs-title, .v2-own-title, .insight-title, .v2 .ai-title, .v2 .footer-cta h2, .footer-cta h2 {
    font-size: var(--m-statement, 2.4rem); font-weight: 600; letter-spacing: -1px; line-height: 1.35; }
}
@media (max-width: 767px) {
  .v2-mig-stage { display: none; }
}

/* v2.47 · TABLET (768–1199px) — hero: cụm heading + nút tối đa 5/8 cột, bắt đầu cột 1 */
@media (min-width: 768px) and (max-width: 1199px) {
  .v2-hero .container.v2-hero-inner > .v2-hero-copy { grid-column: 1 / span 5; }
}

/* v2.48 · 08/10/2026 — Hero: 2 nút rộng bằng nhau, lấp đầy chiều ngang cụm nội dung hero (mọi màn hình) */
.v2-hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.6rem; width: 100%; }
.v2-hero-actions .btn { width: 100%; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 1199px) {
  .v2-hero-actions { gap: .8rem; }
  .v2-hero-actions .btn { flex: none; padding: 1.3rem 1rem; }
}

/* v2.50 · 08/10/2026 — Hero desktop (≥1200px): cụm 2 nút rộng tối đa 3.5 cột */
@media (min-width: 1200px) {
  .v2-hero-actions { max-width: calc(3.5 * (100vw - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12 + 3 * var(--grid-gutter)); }
}