/* Wireframe: chỉ dùng thang xám, không màu thương hiệu */
:root {
  --bg: #ffffff;
  --bg-alt: #f3f3f3;
  --fg: #222222;
  --muted: #666666;
  --line: #cfcfcf;
  --ph: #d4d4d4;
  --ph-fg: #7a7a7a;
  --radius: 6px;
  --gap: 24px;
  --maxw: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body, "Onest", system-ui, -apple-system, "Segoe UI", sans-serif);
  line-height: 1.5;
}

img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; }
.section :is(h1, h2, h3) { color: var(--color-ink-heading, #101828); }   /* chỉ áp màu mực cho section nền sáng; hero / panel nền tối tự kế thừa chữ trắng */
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: var(--h2-size, clamp(1.4rem, 3vw, 1.9rem)); font-weight: var(--h2-weight, 700); line-height: var(--h2-lh, 1.25); letter-spacing: var(--h2-tracking, 0); margin-bottom: 20px; }
h3 { font-size: var(--h3-size, 1.05rem); font-weight: var(--h3-weight, 700); letter-spacing: var(--h3-tracking, 0); }
p { margin: 0 0 12px; }
:where(.section) p { font-size: var(--body-size, 1rem); line-height: var(--body-lh, 1.5); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.section { padding: 56px 0; }
.section.alt { background: var(--bg-alt); }
.muted { color: var(--color-ink-muted, var(--muted)); }
.lead { font-size: 1.1rem; color: var(--color-ink-muted, var(--muted)); }
.eyebrow { text-transform: uppercase; letter-spacing: var(--eyebrow-tracking, .08em); font-size: var(--eyebrow-size, .8rem); font-weight: var(--eyebrow-weight, 400); color: var(--color-ink-muted, var(--muted)); }
.center { text-align: center; }
.note { font-size: .85rem; color: var(--muted); margin-top: 16px; }

/* Grid */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.align-center { align-items: center; }

/* Image placeholders: khối xám */
.ph {
  background: var(--ph);
  color: var(--ph-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--radius);
}
.ph small { font-weight: 400; margin-top: 4px; }
.ph-16x9 { aspect-ratio: 16 / 9; margin-bottom: 12px; }
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-icon { width: 48px; height: 48px; margin-bottom: 8px; font-size: .65rem; }
.ph-logo { width: 120px; height: 36px; }
.ph-logo-brand { height: 64px; }
.ph-cert { width: 88px; height: 88px; }
.ph-avatar { aspect-ratio: 1 / 1; border-radius: 50%; width: 140px; margin: 0 auto 12px; }
.ph-map { aspect-ratio: 4 / 3; }
.ph-bar { border-radius: 0; width: 100%; }
.ph-footer { height: 160px; }

/* Buttons */
.btn, .tab {
  font: inherit;
  cursor: pointer;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--fg);
  color: #fff;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 44px;
}
.btn-outline { background: transparent; color: var(--fg); }
.btn-sm { padding: 6px 14px; min-height: 36px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.btn:focus-visible, .tab:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #555;
  outline-offset: 2px;
}
.link { font-weight: 600; text-decoration: underline; }

/* Card */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  display: block;
}
.section.alt .card { background: #fff; }
.card-sm { padding: 16px 14px; }
.card-more { display: flex; align-items: center; justify-content: center; border-style: dashed; }
.list { padding-left: 18px; margin: 12px 0; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat strong { display: block; font-size: 1.5rem; }
.stat span { font-size: .85rem; color: var(--muted); }
.cert-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); counter-reset: s; }
.steps li { border-top: 3px solid var(--fg); padding-top: 12px; }
.step-no {
  display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border: 1px solid var(--fg); border-radius: 50%; font-size: .85rem; margin-bottom: 8px;
}

/* Definition list */
.dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }

/* CTA + form */
.cta { background: var(--bg-alt); }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 10px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 44px; }
.tab.is-active { background: var(--fg); color: #fff; border-color: var(--fg); }
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; background: #fff; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.form[hidden] { display: none; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.form .full { grid-column: 1 / -1; }
.form button { grid-column: 1 / -1; justify-self: start; }
input, select, textarea {
  font: inherit; padding: 10px; border: 1px solid #999; border-radius: var(--radius); background: #fff; min-height: 44px;
}

/* FAQ */
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; }


/* ===== HERO FULL-PAGE ===== */
.hero-full {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(20px, 2.4vw, 48px) clamp(32px, 5vw, 64px);
  color: #fff;
  overflow: hidden;
  background: #555;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #1A5696 0%, #123A66 38%, #0B1220 100%);   /* xanh brand (trên) -> navy mực (dưới, nơi đặt H1: chữ trắng + xanh nhạt đạt tương phản) */
}
.hero-overlay { position: absolute; inset: 0; background: none; }   /* không còn ảnh nền nên không cần lớp phủ; giữ phần tử để thay ảnh/video sau này */
.hero-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: clamp(28px, 4vw, 64px);   /* nav sát logo, cùng trục giữa */
  padding: clamp(16px, 2vw, 28px) clamp(20px, 2.4vw, 48px);
  z-index: 2;
}
.logo-img { display: block; height: auto; }
.hero-logo { display: flex; align-items: center; }   /* bỏ khoảng baseline dưới ảnh logo để căn giữa dọc với nav */
.hero-nav { align-self: center; }
.logo-on-dark { width: clamp(140px, 14vw, 192px); filter: brightness(0) invert(1); } /* logo gốc màu #14467C, đổi sang trắng trên nền tối */
.hero-menu {
  display: inline-flex; align-items: center; gap: 14px;
  font: inherit; font-size: .85rem; font-weight: 500;
  color: #fff; background: rgba(0,0,0,.45);
  border: 0; border-radius: var(--radius); padding: 8px 12px; min-height: 44px; cursor: pointer;
}
.hero-menu:hover { background: rgba(0,0,0,.65); }
.hero-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.hero-link { color: #fff; text-decoration: none; font-size: .95rem; font-weight: 500; line-height: 1; padding: 6px 0; white-space: nowrap; }
.hero-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.hero-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hero-menu:focus-visible, .hero-scroll:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.hero-meta {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 16px;
  margin-bottom: clamp(24px, 6vw, 96px);
  font-size: .9rem; font-weight: 500;
}
.hero-meta p { margin: 0; }
.hero-meta p:nth-child(2) { justify-self: start; }
.hero-scroll {
  justify-self: end; display: inline-flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none;
}
.hero-scroll-icon {
  width: 32px; height: 32px; border: 1px solid #fff; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}

.hero-title {
  --fs: 64px;
  position: relative; z-index: 2;
  margin: 0; color: #fff;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--fs);                                                                      /* JS (script.js) tính để 3 dòng lấp bề ngang, như các section chữ khổng lồ bên dưới */
  font-weight: 600; line-height: 1.2; letter-spacing: -0.03em;
}
.hero-title .mf-line { display: block; white-space: nowrap; }
.hero-title .mf-ic { width: 1.2em; height: .96em; margin: 0 .02em; }
.hero-title .dv-p { stroke: #fff; stroke-width: 3.4; }
.hero-title .dv-p2 { stroke-width: 2.2; }
.hero-title .mf-anno .dv-p { stroke: var(--color-accent-orange-400, #7DB3E8); stroke-width: 2.2; }
.hero-title .mf-hl { color: var(--color-accent-orange-400, #7DB3E8); }
/* vào cảnh: từng từ rơi xuống theo nhịp, hình thiết bị vẽ nét; không JS thì hiện luôn */
.hero-title.is-built .mf-w { opacity: 0; transform: translate3d(0, .28em, 0); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * .07s + .15s); }
.hero-title.is-in .mf-w { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-title.is-built .mf-w { opacity: 1; transform: none; transition: none; } }
.hero-hl { color: var(--color-accent-orange-400, #7DB3E8); }   /* cam nhạt: token "điểm nhấn trên nền tối" (cam 600 quá tối trên nền hero) */

@media (max-width: 680px) {
  .hero-meta { grid-template-columns: 1fr auto; row-gap: 8px; }
  .hero-meta p:nth-child(2) { grid-column: 1; grid-row: 2; }
  .hero-scroll { grid-column: 2; grid-row: 1 / span 2; }
}


/* ===== HERO + TRƯỢT NGANG (scroll-pinned) ===== */
.hs {
  --pw: 46vw;                       /* chiều rộng mỗi panel (rộng hơn trước: 39vw) */
  --gap: 15vw;                      /* khoảng trống sau thẻ cuối: kéo dài quãng cuộn để kịp xem thẻ cuối */
  position: relative;
  height: calc(100svh + var(--n) * var(--pw) + var(--gap));   /* quãng cuộn = tổng chiều rộng panel + khoảng trống cuối */
}
.hs-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hs-sticky .hero-full { position: absolute; inset: 0; min-height: 0; }
.hero-dim { position: absolute; inset: 0; background: #000; opacity: 0; will-change: opacity; z-index: 1; pointer-events: none; }
.hs .hero-top { z-index: 3; }   /* thấp hơn .hs-track (z 4): panel công trình trượt lên che luôn logo và nav */
.hs .hero-logo { will-change: opacity; }                /* opacity do JS ghi trực tiếp */
.hs .hero-title, .hs .hero-meta { z-index: 2; }

.hs-track {
  position: absolute; top: 0; left: 0; z-index: 4;
  height: 100%; width: calc(var(--n) * var(--pw) + var(--gap));
  display: flex;
  transform: translate3d(100vw, 0, 0);               /* JS ghi translate3d(px) mỗi khung hình */
  will-change: transform;
}
.hs-panel { flex: 0 0 var(--pw); width: var(--pw); height: 100%; display: flex; flex-direction: column; color: #fff; content-visibility: auto; contain-intrinsic-size: auto 46vw auto; }   /* panel ngoài khung: trình duyệt bỏ qua layout/paint nhưng vẫn focus được (Tab) */
.hs-panel + .hs-panel { margin-left: -1px; }   /* chồng 1px: xoá khe hở do làm tròn dưới-pixel (46vw lẻ + translate) giữa hai panel */
.hs-img { flex: 0 0 67%; display: flex; background: #fff; }   /* nền trắng: minh họa vẽ tay mực đen + nét xanh, đồng bộ với phần chữ khổng lồ bên dưới */
.hs-media {
  flex: 1; min-width: 0; background: transparent; color: var(--color-ink-muted, #52525B);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  transform-origin: 50% 50%; will-change: transform, opacity;          /* JS ghi: fade-in + zoom-out */
}
.hs-media small { font-weight: 400; }
/* panel dùng ảnh thật: ảnh phủ kín khung (object-fit: cover), không padding; ảnh được JS zoom-out/fade-in cùng .hs-media như các minh họa */
.hs-media.hs-media--photo { padding: 0; overflow: hidden; align-items: stretch; justify-content: stretch; }
.hs-photo { display: block; flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hs-body { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 1.6vw, 30px); }
.hs-body-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hs-body-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.hs-sub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 170px)); gap: 12px 16px; font-size: .85rem; }
.hs-sub[hidden] { display: none; }
.hs-sub a { display: flex; justify-content: space-between; gap: 8px; color: inherit; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor; min-height: 28px; }
.hs-plus {
  flex: none; width: 44px; height: 44px; border-radius: 50%; margin-left: auto;
  border: 1px solid currentColor; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.hs-plus:focus-visible, .hs-sub a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.hs-title { margin: 0; font-family: var(--font-body, system-ui, sans-serif); font-size: clamp(1.9rem, 4vw, 4rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.03em; text-wrap: balance; }
.hs-count { margin: 12px 0 0; font-size: var(--label-size); }
.hs-thumb { display: none; }
.hs-desc { margin: 0; text-align: right; font-size: .9rem; max-width: 14ch; font-weight: 500; }
/* Màu panel: thang xám cho wireframe (chữ trắng đạt contrast ≥ 4.5:1) */
/* Màu panel: xen kẽ mực #101828 (chữ trắng) và xanh nhạt (chữ mực), cùng bảng màu với phần dưới */
.hs-p1 .hs-bg, .hs-p3 .hs-bg, .hs-p5 .hs-bg { background: var(--color-ink-heading, #101828); }
.hs-p2 .hs-bg, .hs-p4 .hs-bg { background: #E6EFF9; }
.hs-p2 .hs-body, .hs-p4 .hs-body { color: var(--color-ink-heading, #101828); }
.hs-house { position: relative; width: min(100%, calc((100svh * .67 - 64px) * 420 / 446)); aspect-ratio: 420 / 446; }
.hs-media { padding: clamp(12px, 2.4vh, 32px) 0; }
/* công trình phối cảnh (is-scene): tràn hết bề ngang panel, hai biên mờ dần; <1300px giữ khung vuông cũ */
.hs-house.is-scene .dv-hl, .dv-house-in .dv-hl-base {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); mask-composite: intersect;
}
@media (min-width: 1300px) {
  .hs-house.is-scene { width: 100%; aspect-ratio: auto; height: calc(100svh * .67 - 64px); }
}

/* Giảm chuyển động: bỏ ghim, xếp panel thành dải cuộn ngang thủ công */
@media (prefers-reduced-motion: reduce) {
  .hs { height: auto; }
  .hs-sticky { position: static; height: auto; overflow: visible; }
  .hs-sticky .hero-full { position: relative; min-height: 100svh; }
  .hero-dim { display: none; }
  .hs-track { position: static; width: auto; height: 80svh; transform: none; overflow-x: auto; scroll-snap-type: x mandatory; }
  .hs-panel { scroll-snap-align: start; }
  .hs .hero-logo { opacity: 1; }
}



/* ===== HIỆU ỨNG XUẤT HIỆN CHI TIẾT PANEL =====
   1) Background: khối màu ban đầu phủ ~60% card, thu dần về kích thước thật (33%) theo tiến độ cuộn.
      JS ghi --b (0..1, đã easing). Ảnh chiếm 40% -> 67%.
   2) Text: khi background gần xong, JS thêm .is-in -> chữ mờ dần rơi từ trên xuống, có stagger (chạy theo thời gian, không theo cuộn).
   Mặc định (không JS / giảm chuyển động): hiện đầy đủ. */
.hs-img { overflow: hidden; }
.hs-end { flex: 0 0 var(--gap); background: #fff; }   /* khoảng trống trắng sau thẻ cuối */
/* Lớp nền màu: kích thước thật = khối 33% đáy card. Ban đầu JS scaleY lên ~60% card rồi thu về 1 (chỉ dùng transform -> không layout lại). */
.hs-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: -1; transform-origin: 50% 100%; will-change: transform; }

.hs-sub, .hs-title, .hs-count, .hs-plus, .hs-desc, .hs-thumb {
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0s);
}
.hs-sub   { --d: .00s; }
.hs-title { --d: .12s; }
.hs-count { --d: .22s; }
.hs-plus  { --d: .30s; }
.hs-desc  { --d: .38s; }
.hs-thumb { --d: .38s; }
.hs.is-armed .hs-panel:not(.is-in) :is(.hs-sub, .hs-title, .hs-count, .hs-plus, .hs-desc, .hs-thumb) {
  opacity: 0;
  transform: translate3d(0, -18px, 0);          /* bắt đầu ở phía trên, rơi xuống vị trí */
  transition-delay: 0s;                          /* ẩn đi thì không trễ */
}

@media (prefers-reduced-motion: reduce) {
  .hs-sub, .hs-title, .hs-count, .hs-plus, .hs-desc, .hs-thumb { transition: none; }
  .hs-bg { transform: none !important; }
  .hs-media { opacity: 1 !important; transform: none !important; }
  .hs-end { display: none; }
}
/* ===== LAYOUT XẾP DỌC (≤1299px): thẻ ngang xếp dọc, trượt từ dưới lên đè lên hero được ghim ===== */
@media (max-width: 1299px) {
  .hs { height: auto; }
  .hs-sticky { position: static; height: auto; overflow: visible; }
  .hs-sticky .hero-full { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .hs .hero-top { position: fixed; }                 /* Menu luôn nổi khi cuộn qua panel */
  .hs.is-out .hero-top { visibility: hidden; }
  .hs-bg { transform: none !important; }               /* mobile: nền cố định, không scale */
  .hs-end { flex: none; width: 100%; height: 18svh; display: block; }   /* khoảng thở sau thẻ cuối */

  .hs-track {
    position: relative; z-index: 4; width: 100%; height: auto;
    flex-direction: column; transform: none; will-change: auto; overflow: visible;
  }
  .hs-panel { flex: none; width: 100%; height: auto; min-height: clamp(205px, 29svh, 260px); flex-direction: row; content-visibility: visible; }
  .hs-img { order: 2; flex: 0 0 28%; }
  .hs-media { font-size: .65rem; padding: 6px 0; }
  .hs-media small { display: none; }
  .hs-house { width: min(100%, calc((29svh - 12px) * 420 / 446)); }
  .hs-body {
    order: 1; flex: 1; min-width: 0;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "title title" "sub sub" "gap gap" "desc thumb" "count thumb";
    column-gap: 12px; padding: 18px 16px;
  }
  .hs-body-top, .hs-body-bottom, .hs-body-bottom > div { display: contents; }
  .hs-title { grid-area: title; font-size: clamp(2rem, 9vw, 2.6rem); }
  .hs-sub { grid-area: sub; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; font-size: .85rem; }
  .hs-desc { grid-area: desc; align-self: end; text-align: left; max-width: none; font-size: var(--text-sm); }
  .hs-count { grid-area: count; margin-top: 8px; }
  .hs-thumb {
    grid-area: thumb; display: flex; align-items: center; justify-content: center;
    width: 76px; height: 56px; background: #a8a8a8; color: #e2e2e2; font-size: .6rem; font-weight: 600; align-self: end;
  }
  .hs-plus { display: none; }
}


/* ===== TEXT SECTION (statement) dưới dải công trình ===== */
.statement {
  background: var(--color-bg, #fff);
  padding: clamp(96px, 13vw, 220px) clamp(20px, 3vw, 56px) clamp(72px, 9vw, 140px);
}
.statement { display: flex; flex-direction: column; align-items: center; text-align: center; }
.statement-title {
  margin: 0 0 clamp(28px, 3.5vw, 48px); max-width: 22ch; text-wrap: balance;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(2.2rem, 5.2vw, 5rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em;   /* cùng kiểu chữ với tuyên ngôn */
  color: var(--color-ink-heading, #101828);
}
.st-hl { color: var(--color-accent-orange-600, #1A5696); }
.st-w { display: inline-block; will-change: opacity, transform; }
.statement-tag { margin: 0 0 clamp(16px, 2vw, 24px); font-size: var(--eyebrow-size, .75rem); font-weight: var(--eyebrow-weight, 500); letter-spacing: var(--eyebrow-tracking, .08em); text-transform: uppercase; color: var(--color-ink-muted, #52525B); will-change: opacity, transform; }
.statement-body { max-width: 62ch; will-change: opacity, transform; }
.statement-body p { margin: 0 0 clamp(24px, 2.4vw, 36px); font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.55; color: var(--color-ink-body, #3F3F46); text-wrap: pretty; }
.statement-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; color: var(--color-ink-heading, #101828); text-decoration: none; font-size: .95rem; transition: transform .2s; }
.link-arrow span { position: relative; padding-bottom: 4px; }
.link-arrow span::after {                      /* gạch chân: hover thì quét ra phải rồi vẽ lại từ trái */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right center;
}
.link-arrow i {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: #d9d9d9; transition: background .25s, color .25s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.link-arrow:hover i { background: var(--color-brand-700, #14467C); color: #fff; transform: scale(1.1); }
.link-arrow:hover i svg { animation: la-arrow .5s cubic-bezier(.5,0,.2,1); }      /* mũi tên cũ trượt ra, mũi tên mới trượt vào */
.link-arrow:hover span::after { animation: la-line .55s cubic-bezier(.6,0,.2,1); }
.link-arrow:active { transform: scale(.97); }
.link-arrow:focus-visible { outline: 3px solid var(--color-brand-700, #14467C); outline-offset: 4px; }
@keyframes la-arrow { 0% { transform: none; } 45% { transform: translateX(170%); } 46% { transform: translateX(-170%); } 100% { transform: none; } }
@keyframes la-line { 0% { transform: scaleX(1); transform-origin: right center; } 45% { transform: scaleX(0); transform-origin: right center; } 46% { transform: scaleX(0); transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } }
/* section CTA: 3 link hiện lần lượt theo --sr (script.js ghi tiến độ hiện của .mf-sub) */
.manifest--cta .mf-links .link-arrow { opacity: clamp(0, calc((var(--sr, 1) - var(--n) * .18) / .46), 1); }
.manifest--cta .mf-links .link-arrow:nth-child(1) { --n: 0; }
.manifest--cta .mf-links .link-arrow:nth-child(2) { --n: 1; }
.manifest--cta .mf-links .link-arrow:nth-child(3) { --n: 2; }

@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
  .link-arrow, .link-arrow i { transition: none; }
  .link-arrow:hover i, .link-arrow:active { transform: none; }
  .link-arrow:hover i svg, .link-arrow:hover span::after { animation: none; }
  .manifest--cta .mf-links .link-arrow { opacity: 1; }
}



/* ===== 3 HÀNG LOGO TRƯỢT NGANG THEO CUỘN ===== */
.brands-mq { background: linear-gradient(to bottom, var(--color-bg, #fff) 0, #f3f3f3 clamp(160px, 24vh, 260px)); padding: clamp(72px, 9vw, 140px) 0; overflow: hidden; }
/* Bàn giao từ giao thức: tấm xám bo góc trượt lên đè giao thức (cùng ngôn ngữ chuyển cảnh với thiết bị / giao thức). Chỉ ở chế độ ghim. */
@media (min-width: 1300px) and (prefers-reduced-motion: no-preference) {
  .brands-mq { position: relative; z-index: 4; margin-top: -60svh; padding-top: clamp(56px, 8vw, 110px); background: #f3f3f3; border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0; box-shadow: 0 -28px 70px rgba(16, 24, 40, .10); }
}
.mq-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 28px; padding: 0 clamp(20px, 3vw, 56px); margin-bottom: clamp(36px, 5vw, 72px); }
.mq-head h2 { margin: 0; font-family: var(--font-body, system-ui, sans-serif); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); color: var(--color-ink-heading, #101828); }
.mq-head .eyebrow { margin: 0 0 20px; }
.mq-head h2 { font-size: clamp(2rem, 4.2vw, 4.4rem); line-height: 1.14; letter-spacing: -0.03em; text-wrap: balance; max-width: 38ch; margin-inline: auto; }
.bw { display: inline-block; will-change: opacity, transform; }
.mq-hl { color: var(--color-accent-orange-600, #1A5696); }   /* cùng màu nhấn với .mf-hl / .pr-hl */
.mq-head .eyebrow, .mq-head-side { will-change: opacity, transform; }
.mq-head-side { justify-self: center; }
.mq-head-side .link-arrow { font-weight: 500; }
.mq-head-side .link-arrow i { background: #fff; box-shadow: inset 0 0 0 1px var(--color-ink-heading, #101828); }   /* nền trắng + viền: không chìm vào nền #f3f3f3 */
.mq-head-side .link-arrow:hover i { background: var(--color-accent-orange-600, #1A5696); box-shadow: inset 0 0 0 1px var(--color-accent-orange-600, #1A5696); }
.mq-head-side .link-arrow:hover span { color: var(--color-accent-orange-600, #1A5696); }
.mq-rows { display: grid; gap: clamp(12px, 1.6vw, 24px); }
.mq-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-track { display: flex; gap: clamp(12px, 1.6vw, 24px); width: max-content; will-change: transform; }
.mq-item { flex: none; width: clamp(140px, 13vw, 200px); height: clamp(60px, 5.6vw, 84px); }
.mq-item a { display: block; width: 100%; height: 100%; }
.mq-logo { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 12px; padding: 10px 16px; box-sizing: border-box; }
@media (max-width: 900px) {
  .mq-head { grid-template-columns: 1fr; }
}



/* ===== THIẾT BỊ TÍCH HỢP: trái = thiết bị vẽ tay, giữa = chuẩn kết nối, phải = tính năng (ghim khi cuộn) ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.devs { --step: 36svh; --mid: clamp(300px, 30vw, 560px);
  position: relative; z-index: 2; margin-top: -100svh;                          /* trượt lên đè 100svh cuối của section tuyên ngôn */
  height: calc(100svh + var(--steps) * var(--step));                             /* không còn đuôi bị đè: tuyên ngôn giao thức nối tiếp bình thường phía dưới */
  background: var(--color-bg, #fff);
  border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0; box-shadow: 0 -28px 70px rgba(16, 24, 40, .10); }   /* mép trên bo + bóng: như một tấm trang trượt lên */
.dv-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) var(--mid) minmax(0, 1fr); }
.dv-house { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vh, 36px) 0 clamp(150px, 20vh, 190px); }
.dv-house-in { position: relative; width: min(100%, calc((100svh - 240px) * 420 / 446)); aspect-ratio: 420 / 446; }
.dv-hl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dv-hl-base .dv-p { stroke: var(--color-ink-heading, #101828); stroke-width: 1.15; }
.dv-hl-base .dv-p.w2 { stroke-width: 1.9; }
.dv-hl-base .dv-p.w0 { stroke-width: .55; opacity: .75; }
.dv-hl-base .dv-p.gd { stroke: var(--color-accent-orange-600, #1A5696); stroke-width: .6; opacity: .3; }
.dv-hl-base .dv-p.gd-g { opacity: .16; }
.dv-f { stroke: none; }
.dv-f:not(.dv-f-solid), .dv-fgrp { opacity: 0; transition: opacity .3s ease; }          /* nền màu/bóng/kính hiện dần sau khi nét vẽ xong; fill do JS gán (gradient) */
.is-drawn .dv-f:not(.dv-f-solid) { opacity: 1; transition: opacity .8s ease var(--d, 0s); }   /* màu hiện cùng lúc với nét của chính nó */
.is-drawn .dv-fgrp { opacity: 1; transition: opacity .8s ease .3s; }
.dv-hl-base.dv-scene.is-drawn .dv-p { transition-duration: .75s; }
.dv-hl-base .dv-p.ht { stroke-width: .45; opacity: .4; }
/* công trình phối cảnh dùng bảng màu tự nhiên: nét nâu đậm ấm, đường dóng nâu xám (không dùng ink/xanh brand) */
/* tả thực: nét viền mỏng, mờ (như nét chì phác trên bản dựng), để vật liệu/ánh sáng làm chủ */
.dv-hl-base.dv-scene .dv-p { stroke: #0c0c0d; stroke-width: 1.05; opacity: .96; }
.dv-hl-base.dv-scene .dv-p.w2 { stroke-width: 1.8; opacity: 1; }
.dv-hl-base.dv-scene .dv-p.tr { stroke: #0c0c0d; stroke-width: 3; opacity: 1; }
.dv-hl-base.dv-scene .dv-p.tr2 { stroke: #0c0c0d; stroke-width: 1.2; opacity: .95; }
.dv-hl-base.dv-scene .dv-p.w0 { stroke-width: .5; opacity: .72; }
.dv-hl-base.dv-scene .dv-p.ht { stroke-width: .38; opacity: .4; }
.dv-hl-base.dv-scene .dv-p.sk { stroke-width: .8; opacity: .7; }
.dv-hl-base.dv-scene .dv-p.far { stroke-width: .4; opacity: .32; }
/* Hiệu năng: hơn 2000 transition stroke-dashoffset/opacity chạy cùng lúc khiến SVG bị vẽ lại mỗi khung hình (đo: tổng thời gian luồng chính 8.1 s -> 4.5 s khi cuộn hết trang, khung >25ms giảm 3-4 lần).
   Chỉ nét đậm (w2/tr/tr2/w1/plain) được "vẽ dần"; nét mảnh (w0/ht/far/gd) và mảng tô hiện sẵn, cả công trình hiện ra bằng một lần fade opacity trên lớp riêng (do compositor xử lý). */
.dv-hl-base.dv-scene .dv-p.w0, .dv-hl-base.dv-scene .dv-p.ht, .dv-hl-base.dv-scene .dv-p.far, .dv-hl-base.dv-scene .dv-p.gd { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.dv-hl-base.dv-scene .dv-f, .is-drawn.dv-hl-base.dv-scene .dv-f:not(.dv-f-solid) { opacity: 1; transition: none; }
.dv-hl-base.dv-scene { opacity: 0; transition: opacity .7s ease; will-change: opacity; }
.dv-hl-base.dv-scene.is-drawn { opacity: 1; }
.dv-hl-base.dv-scene .dv-p.gd { stroke: #444; stroke-width: .55; opacity: .38; }
.dv-hl-base.dv-scene .dv-p.gd-g { stroke: #3a3a3a; stroke-width: .6; opacity: .36; }   /* lưới nền ô vuông: rõ hơn */
.dv-hl-wire .dv-p { stroke: var(--color-accent-orange-600, #1A5696); stroke-width: 1; opacity: .6; }
.dv-hl-wire .dv-p2 { display: none; }
.dv-hl-layer .dv-p { stroke: var(--color-accent-orange-600, #1A5696); stroke-width: 1.5; }
.dv-glow { fill: rgba(26, 86, 150, .16); opacity: 0; transition: opacity .5s; }
.dv-hl.is-drawn .dv-glow { opacity: 1; transition: opacity 1s .5s; animation: dvGlow 3.4s ease-in-out 1.6s infinite; }
@keyframes dvGlow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.dv-cat { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--mid) minmax(0, 1fr); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.dv-cat.is-on { opacity: 1; pointer-events: auto; }
.dv-left, .dv-right { display: flex; flex-direction: column; min-height: 0; padding: clamp(20px, 3vh, 44px) clamp(20px, 3vw, 56px); }
.dv-left { justify-content: space-between; gap: 12px; }
.dv-readout { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-muted, #52525B); }
.dv-title { margin: 0; font-family: var(--font-body, system-ui, sans-serif); font-size: clamp(2rem, 4.2vw, 4.4rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.02em; text-transform: uppercase; color: var(--color-ink-heading, #101828); }
.dv-title > span:not(.dv-w) { display: block; color: #a8a8a8; }
.dv-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.6vh, 16px) clamp(8px, 1.4vw, 20px); }
.dv-dev { margin: 0; }
.dv-dev .dv { display: block; width: 100%; height: clamp(64px, 16vh, 160px); }
.dv-dev figcaption { margin-top: 2px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-muted, #52525B); }
.dv-blurb { margin: 0; max-width: 46ch; font-size: var(--body-size); line-height: 1.4; color: var(--color-ink-heading, #101828); }

/* nét vẽ: pathLength=1, dash "1 2" -> offset 1 = ẩn, 0 = hiện đủ; vẽ dần bằng transition (thời gian), kích hoạt theo cuộn */
.dv-p { fill: none; stroke: var(--color-ink-heading, #101828); stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .25s ease-in; }
.dv-p2 { opacity: .45; stroke-width: 1; }
.is-drawn .dv-p { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1) calc(var(--dd, 0s) + var(--d, 0s)); }

.dv-mid { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 clamp(8px, 1vw, 20px) clamp(20px, 3vh, 36px); }
.dv-bld { position: absolute; top: clamp(12px, 2.4vh, 28px); left: 0; right: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted, #52525B); }
.dv-bld::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-orange-600, #1A5696); }
.dv-mid-count { order: 1; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.dv-mid-count b { font-family: var(--font-body, system-ui, sans-serif); font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--color-ink-heading, #101828); }
.dv-mid-count span { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted, #52525B); }
.dv-protos { order: 2; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dv-protos li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #c9c9cf; border-radius: 999px; background: #fff; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .03em; color: var(--color-ink-heading, #101828);
  opacity: 0; transform: translateY(-12px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
.dv-protos li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-orange-600, #1A5696); }
.dv-cat.is-on .dv-protos li { opacity: 1; transform: none; transition-delay: calc(var(--i) * .1s + .35s); }
.dv-cat.is-on .dv-protos li::before { animation: dvLed 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .45s + 1s); }
@keyframes dvLed { 0%, 70%, 100% { opacity: 1; } 82% { opacity: .25; } }

.dv-right { justify-content: flex-start; gap: 0; }
/* Danh sách tính năng: vị trí cố định (mọi mục luôn chiếm chỗ), mô tả nằm ở vùng cố định phía dưới và chuyển bằng mờ dần.
   Độ đậm/nhạt, độ hiện và độ rơi của từng mục do JS ghi trực tiếp theo độ cuộn (liên tục, không theo ngưỡng). */
.dv-feats { --hd: clamp(6.6rem, 14vh, 8.6rem); position: relative; list-style: none; margin: auto 0; padding: 0 0 var(--hd); display: grid; gap: 14px; }
.dv-feats::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--hd) - 20px); height: 1px; background: var(--color-border, #E4E4E7); }   /* vạch tách vùng mô tả cố định: cách dòng cuối 20px để không cắt chữ */
.dv-feat { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 12px; }
.dv-fn { padding-top: .5em; font-family: var(--font-mono, ui-monospace, monospace); font-size: .78rem; color: color-mix(in srgb, var(--color-accent-orange-600, #1A5696) calc(var(--act, 0) * 100%), var(--color-ink-muted, #52525B)); will-change: opacity, transform; }
.dv-fb h4 { margin: 0; font-family: var(--font-body, system-ui, sans-serif); font-size: clamp(1.1rem, 2vw, 1.9rem); font-weight: 700; line-height: 1.22; text-transform: uppercase; letter-spacing: -0.01em; color: color-mix(in srgb, var(--color-accent-orange-600, #1A5696) calc(var(--act, 0) * 100%), var(--color-ink-heading, #101828)); will-change: opacity, transform; }
.dv-fd { position: absolute; left: calc(2.2rem + 12px); right: 0; bottom: 0; height: calc(var(--hd) - 40px); opacity: 0; will-change: opacity, transform; pointer-events: none; }
.dv-w { display: inline-block; will-change: opacity, transform; }
.dv-fd > p { margin: 0; max-width: 40ch; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-body, #3F3F46); }
.dv-note { position: absolute; right: clamp(20px, 3vw, 56px); bottom: 8px; margin: 0; z-index: 3; font-size: var(--label-size); color: var(--color-ink-muted, #52525B); }

/* Xếp dọc (<1300px hoặc giảm chuyển động): không ghim, hiện đủ nội dung, nét vẽ chạy khi vào màn hình */
@media (max-width: 1299px) {
  .devs { height: auto; padding: clamp(56px, 9vw, 120px) 0 56px; }
  .dv-sticky { position: static; height: auto; overflow: visible; display: block; }
  .dv-house { display: none; }
  .dv-cat { position: relative; inset: auto; display: block; opacity: 1; pointer-events: auto; padding: 0 clamp(20px, 3vw, 56px); margin-bottom: clamp(48px, 8vw, 96px); }
  .dv-left, .dv-right { padding: 0; }
  .dv-left { gap: 20px; }
  .dv-devices { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
  .dv-dev .dv { height: auto; aspect-ratio: 200 / 160; }
  .dv-mid { padding: 24px 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; }
  .dv-mid::before { content: "Chuẩn kết nối"; margin: 0 8px 0 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted, #52525B); }
  .dv-protos { justify-content: flex-start; }
  .dv-protos li { opacity: 1; transform: none; }
  .dv-mid-count { display: none; }
  .dv-bld { display: none; }
  .dv-feats { margin: 16px 0 0; }
  .dv-feats { padding-bottom: 0; }
  .dv-feats::after { display: none; }
  .dv-fn, .dv-fb h4, .dv-fd, .dv-w { opacity: 1 !important; transform: none !important; }
  .dv-fd { position: static; height: auto; pointer-events: auto; }
  .dv-fd > p { padding-top: 6px; }
  .dv-note { position: static; padding: 0 clamp(20px, 3vw, 56px); }
}
@media (max-width: 700px) {
  .dv-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .devs { height: auto; padding: clamp(56px, 9vw, 120px) 0 56px; }
  .dv-sticky { position: static; height: auto; overflow: visible; display: block; }
  .dv-house { display: none; }
  .dv-cat { position: relative; inset: auto; display: block; opacity: 1; pointer-events: auto; padding: 0 clamp(20px, 3vw, 56px); margin-bottom: clamp(48px, 8vw, 96px); }
  .dv-left, .dv-right { padding: 0; }
  .dv-left { gap: 20px; }
  .dv-devices { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
  .dv-dev .dv { height: auto; aspect-ratio: 200 / 160; }
  .dv-mid { padding: 24px 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; }
  .dv-mid::before { content: "Chuẩn kết nối"; margin: 0 8px 0 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted, #52525B); }
  .dv-protos { justify-content: flex-start; }
  .dv-protos li { opacity: 1; transform: none; }
  .dv-mid-count { display: none; }
  .dv-feats { margin: 16px 0 0; }
  .dv-feats { padding-bottom: 0; }
  .dv-feats::after { display: none; }
  .dv-fn, .dv-fb h4, .dv-fd, .dv-w { opacity: 1 !important; transform: none !important; }
  .dv-fd { position: static; height: auto; pointer-events: auto; }
  .dv-fd > p { padding-top: 6px; }
  .dv-note { position: static; padding: 0 clamp(20px, 3vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .is-drawn .dv-p, .dv-p { transition: none; }
  .dv-protos li { transition: none; }
  .dv-glow, .dv-protos li::before { animation: none !important; }
}


/* ===== TUYÊN NGÔN: chữ khổng lồ sáng dần theo cuộn; section thiết bị trượt lên đè (liền mạch) ===== */
.manifest { --total: 300svh; position: relative; height: calc(100svh + var(--total)); background: var(--color-bg, #fff); }   /* nằm ngay sau dải công trình (kết thúc bằng nền trắng) nên không còn dải #f3f3f3 chuyển tiếp từ section logo */
.mf-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 4vh, 44px); padding: 0 clamp(20px, 3vw, 56px); }
.mf-text { --fs: 88px; position: relative; margin: 0; font-family: var(--font-body, system-ui, sans-serif); font-size: var(--fs); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; color: var(--color-ink-heading, #101828); transform-origin: 0 50%; will-change: transform, opacity; }
.mf-line { display: block; white-space: nowrap; }
.mf-w { display: inline-block; will-change: opacity, transform; transform-origin: 30% 60%; }
.mf-hl { color: var(--color-accent-orange-600, #1A5696); }
.mf-ic { display: inline-block; width: 1.2em; height: .96em; margin: 0 .1em 0 0; vertical-align: -.1em; }
.mf-ic .dv { display: block; width: 100%; height: 100%; }
.mf-ic .dv-p { stroke-width: 3.4; } .mf-ic .dv-p2 { stroke-width: 2.2; }
.mf-sub { margin: 0; max-width: 52ch; font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.45; color: var(--color-ink-body, #3F3F46); will-change: opacity, transform; }
.mf-anno { position: absolute; pointer-events: none; overflow: visible; }
.mf-anno .dv-p { stroke: var(--color-accent-orange-600, #1A5696); stroke-width: 2.2; }
/* Tuyên ngôn giao thức: nằm giữa thiết bị và giao thức, nối tiếp thiết bị bình thường (không xếp lớp); chỉ bị giao thức trượt lên đè ở cuối. */
.manifest--proto { --total: 220svh; }
.manifest--cta { --total: 640svh; }   /* 2 màn tách biệt: câu hỏi (sáng dần -> tan) rồi lời mời + logo + liên hệ */
.manifest--cta .mf-sub { max-width: 60ch; font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.55; }
.cta-scene { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(24px, 5vh, 56px); padding: 0 clamp(20px, 3vw, 56px); }
.cta-big { --fs: 100px; position: relative; text-align: center; margin: 0; font-family: var(--font-body, system-ui, sans-serif); font-size: var(--fs); font-weight: 600; line-height: 1.4; letter-spacing: -0.03em; color: var(--color-ink-heading, #101828); will-change: transform, opacity; }   /* line-height 1.4 (có chỗ cho gạch chân vẽ tay dưới cụm nhấn); trước đó 1.2: dấu tiếng Việt không chạm dòng trên */
.cta-big .mf-ic { width: 1.2em; height: .96em; margin: 0 .02em; }
.cta-big .mf-logo { display: inline-block; width: 7em; vertical-align: -.12em; will-change: opacity, transform, clip-path; }
.cta-big .mf-logo img { display: block; width: 100%; height: auto; }
.cta-scene--a .mf-sub { margin: 0 auto; }
.cta-scene--a .mf-links { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .cta-scene { position: absolute; inset: 0; }
  .cta-scene--a { opacity: 0; visibility: hidden; }
}
.mf-sub p { margin: 0 0 clamp(16px, 2vw, 28px); font-size: inherit; line-height: inherit; }
.mf-links { display: flex; flex-wrap: wrap; gap: 14px 40px; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) {
  .manifest { height: auto; }
  .mf-sticky { position: static; height: auto; padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(56px, 8vw, 120px); }
  .devs { margin-top: 0; border-radius: 0; box-shadow: none; }
}


/* ===== GIAO THỨC: chồng tên khổng lồ chạy dọc (tên đang chọn ở giữa) + khung chi tiết ===== */
.protocols { --step: 30svh; --fs: clamp(3.2rem, 9.4vw, 9.6rem); --rh: calc(var(--fs) * 1.12); --tail: 70svh;   /* tail: 10svh giữ tên cuối + 60svh để section thương hiệu trượt lên đè (khớp 0.7 trong script) */
  position: relative; z-index: 3; height: calc(100svh + var(--n) * var(--step) + var(--tail));   /* nối tiếp tuyên ngôn giao thức bình thường, không xếp lớp */
  background: var(--color-bg, #fff); }
.pr-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); }
.pr-left { display: grid; grid-template-rows: 1fr auto 1fr; gap: 20px; min-height: 0; padding: clamp(24px, 4.5vh, 56px) clamp(20px, 3vw, 56px) clamp(20px, 3vh, 40px); }
.pr-left h2 { margin: 0 0 14px; font-family: var(--font-body, system-ui, sans-serif); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); color: var(--color-ink-heading, #101828); max-width: 26ch; }
.pr-top .eyebrow { margin: 0 0 18px; }
.pr-left h2 { max-width: 30ch; text-wrap: balance; line-height: 1.26; }
.pr-hl { color: var(--color-accent-orange-600, #1A5696); }   /* cùng màu nhấn với .mf-hl ở section tuyên ngôn */
.pw { display: inline-block; will-change: opacity, transform; }
.pr-top .eyebrow, .pr-detail, .pr-picker { will-change: opacity, transform; }
.pr-detail { grid-row: 2; }
.pr-top { grid-row: 1; align-self: start; }
.pr-count { margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-body, system-ui, sans-serif); color: var(--color-ink-heading, #101828); }
.pr-count b { font-size: clamp(2rem, 3vw, 3rem); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-count span { font-size: .8rem; color: var(--color-ink-muted, #52525B); }
.pr-panels { position: relative; min-height: clamp(5.2rem, 12vh, 7rem); }
.pr-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .16s ease-in, transform .16s ease-in; }   /* thoát: nhanh */
.pr-panel.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .34s cubic-bezier(.16, 1, .3, 1) .06s, transform .42s cubic-bezier(.16, 1, .3, 1) .06s; }   /* vào: trễ nhẹ sau khi bản cũ tắt, không chồng nhau */
.pr-count b.is-roll { animation: prRoll .34s cubic-bezier(.16, 1, .3, 1); }
@keyframes prRoll { from { opacity: 0; transform: translateY(.28em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pr-count b.is-roll { animation: none; } }
.pr-pname, .pr-cov { display: none; }
.pr-tag { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.7rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink-heading, #101828); max-width: 24ch; }

.pr-picker { position: relative; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
.pr-guide { position: absolute; left: 0; right: clamp(20px, 3vw, 56px); top: 50%; height: 0; z-index: 2; pointer-events: none; }
.pr-guide::before, .pr-guide::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-border, #E4E4E7); }
.pr-guide::before { top: calc(var(--rh) / -2); }
.pr-guide::after { top: calc(var(--rh) / 2); }
.pr-stack { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: clamp(20px, 3vw, 56px); top: 0; will-change: transform; }
.pr-row { position: relative; height: var(--rh); display: flex; align-items: center; padding-left: 40px; will-change: opacity, transform; transform-origin: 0 50%; }
.pr-row::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 3px; margin-top: -1.5px; background: var(--color-accent-orange-600, #1A5696); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.pr-row.is-active::before { transform: scaleX(1); }
.pr-name { font-family: var(--font-body, system-ui, sans-serif); font-size: var(--fs); font-weight: 700; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; color: color-mix(in srgb, var(--color-accent-orange-600, #1A5696) calc(var(--act, 0) * 100%), var(--color-ink-heading, #101828)); white-space: nowrap; }
.pr-note { position: absolute; right: clamp(20px, 3vw, 56px); bottom: 8px; margin: 0; z-index: 3; font-size: var(--label-size); color: var(--color-ink-muted, #52525B); }
@media (min-width: 1300px) and (prefers-reduced-motion: reduce) { .protocols { --tail: 20svh; } }

/* Xếp dọc (<1300px / giảm chuyển động): không ghim, mỗi giao thức là một thẻ */
@media (max-width: 1299px) {
  .protocols { margin-top: 0; height: auto; border-radius: 0; box-shadow: none; padding: clamp(56px, 9vw, 120px) clamp(20px, 3vw, 56px) 56px; }
  .pr-sticky { position: static; height: auto; display: block; overflow: visible; }
  .pr-left { display: flex; flex-direction: column; padding: 0; gap: 28px; }   /* bỏ 3 hàng 1fr của chế độ ghim: hết khoảng trống thừa dưới lưới */
  .pr-picker, .pr-count { display: none; }   /* bộ chọn tên khổng lồ và bộ đếm 01/11 chỉ có nghĩa khi cuộn ghim; xếp dọc thì mỗi giao thức là một thẻ */
  .pr-panels { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pr-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 11 thẻ: thẻ cuối chiếm cả hàng, không lẻ một ô */
  .pr-panel { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 18px; border: 1px solid var(--color-border, #E4E4E7); border-radius: 8px; }
  .pr-pname { display: block; margin: 0 0 6px; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--color-ink-heading, #101828); }
  .pr-cov { display: block; margin: 10px 0 0; font-size: var(--text-sm); color: var(--color-ink-muted, #52525B); }
  .pr-note { position: static; margin-top: 16px; }
  .pr-tag { max-width: 46ch; }   /* thẻ rộng hơn 24ch của chế độ ghim */
}
@media (max-width: 700px) {
  /* điện thoại: bảng thông số gọn thay cho 11 thẻ dài (tên giao thức | mô tả + phạm vi), ngăn bằng đường kẻ mảnh */
  .pr-panels { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--color-border, #E4E4E7); }
  .pr-panel, .pr-panel:last-child:nth-child(odd) { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 0; border: 0; border-bottom: 1px solid var(--color-border, #E4E4E7); border-radius: 0; }
  .pr-pname { grid-column: 1; grid-row: 1 / span 2; margin: 1px 0 0; font-size: 1.2rem; }
  .pr-tag, .pr-cov { grid-column: 2; }
  .pr-tag { max-width: none; font-size: 1rem; line-height: 1.3; }
  .pr-cov { margin: 6px 0 0; font-size: .78rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .protocols { margin-top: 0; height: auto; border-radius: 0; box-shadow: none; padding: clamp(56px, 9vw, 120px) clamp(20px, 3vw, 56px) 56px; }
  .pr-sticky { position: static; height: auto; display: block; overflow: visible; }
  .pr-left { display: flex; flex-direction: column; padding: 0; gap: 28px; }   /* bỏ 3 hàng 1fr của chế độ ghim: hết khoảng trống thừa dưới lưới */
  .pr-picker, .pr-count { display: none; }   /* bộ chọn tên khổng lồ và bộ đếm 01/11 chỉ có nghĩa khi cuộn ghim; xếp dọc thì mỗi giao thức là một thẻ */
  .pr-panels { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pr-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 11 thẻ: thẻ cuối chiếm cả hàng, không lẻ một ô */
  .pr-panel { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 18px; border: 1px solid var(--color-border, #E4E4E7); border-radius: 8px; transition: none; }
  .pr-pname { display: block; margin: 0 0 6px; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; text-transform: uppercase; color: var(--color-ink-heading, #101828); }
  .pr-cov { display: block; margin: 10px 0 0; font-size: var(--text-sm); color: var(--color-ink-muted, #52525B); }
  .pr-note { position: static; margin-top: 16px; }
  .pr-tag { max-width: 46ch; }   /* thẻ rộng hơn 24ch của chế độ ghim */
}

/* Responsive */
@media (max-width: 900px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }

}


/* ===== RESPONSIVE: điện thoại (đặt cuối file để thắng các rule cùng độ ưu tiên ở trên) ===== */
@media (max-width: 680px) {
  /* thẻ công trình: chữ nhỏ lại, ảnh hẹp hơn, danh sách con gọn hơn */
  .hs-panel { flex-direction: column; min-height: 0; }                      /* ảnh lên trên, chữ xuống dưới: ảnh rộng hết khung thay vì dải hẹp bên cạnh */
  .hs-img { order: 1; flex: none; height: clamp(190px, 56vw, 320px); }
  .hs-body { order: 2; }
  .hs-body { padding: 14px 12px; column-gap: 8px; }
  .hs-title { font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1.1; }
  .hs-sub { gap: 4px; margin-top: 10px; font-size: var(--text-sm); }
  .hs-sub a { min-height: 26px; padding-bottom: 4px; }
  .hs-desc { font-size: var(--label-size); line-height: 1.35; }
  .hs-count { font-size: var(--label-size); margin-top: 6px; }
  .hs-thumb { width: 60px; height: 44px; }
  /* hero + tiêu đề các section */
  .hero-title { line-height: 1.08; max-width: none; }
  .hero-nav { gap: 18px; }
  .hero-link { font-size: .85rem; }
  .logo-on-dark { width: 130px; }
  .mq-head { gap: 20px; }
  .link-arrow { font-size: .88rem; }
}
@media (max-width: 380px) {
  .hs-title { font-size: 1.4rem; }
  .hero-top { gap: 16px; }
}

/* ===== RESPONSIVE: section thiết bị khi xếp dọc (tablet 701–1299px: 2 cột; điện thoại ≤700px: 1 cột) ===== */
@media (min-width: 701px) and (max-width: 1299px) {
  .dv-cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 64px); align-items: start; }
  .dv-left { grid-column: 1; grid-row: 1; }
  .dv-right { grid-column: 2; grid-row: 1; }
  .dv-mid { grid-column: 1 / -1; grid-row: 2; padding: 4px 0 0; }
  .dv-devices { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .dv-title { font-size: clamp(2rem, 5.2vw, 3.2rem); }
  .dv-fb h4 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
  .dv-feats { margin-top: 0; }
}
@media (max-width: 700px) {
  .devs { padding-top: 48px; }
  .dv-cat { margin-bottom: 56px; }
  .dv-title { font-size: clamp(1.8rem, 9vw, 2.4rem); line-height: 1.16; }
  .dv-blurb { font-size: var(--body-size); max-width: none; }
  .dv-devices { gap: 14px 12px; }
  .dv-dev figcaption { font-size: var(--label-size); }
  .dv-mid { padding: 16px 0; gap: 8px; }
  .dv-protos { gap: 6px; }
  .dv-protos li { padding: 5px 10px; font-size: var(--label-size); }
  .dv-feats { gap: 12px; margin-top: 8px; }
  .dv-feat { grid-template-columns: 1.8rem minmax(0, 1fr); gap: 8px; }
  .dv-fn { font-size: var(--label-size); }
  .dv-fb h4 { font-size: clamp(1.05rem, 5.2vw, 1.3rem); line-height: 1.15; }
  .dv-fd > p { max-width: none; font-size: var(--text-sm); line-height: 1.45; padding-top: 4px; }
}

/* Section thiết bị xếp dọc: thu nhỏ hình vẽ và nén danh sách để mỗi hạng mục ngắn lại (ghi đè các giá trị rộng ở trên) */
@media (max-width: 1299px) {
  .dv-devices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; max-width: 560px; }
  .dv-dev .dv { height: clamp(72px, 16vw, 120px); aspect-ratio: auto; }
  .dv-cat + .dv-cat { border-top: 1px solid var(--color-border, #E4E4E7); padding-top: clamp(32px, 6vw, 56px); }
}
@media (max-width: 700px) {
  .dv-devices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .dv-dev .dv { height: clamp(60px, 22vw, 92px); }
  .dv-dev figcaption { font-size: var(--label-size); letter-spacing: .02em; }
  .dv-left { gap: 14px; }
  .dv-cat { margin-bottom: 40px; }
  .dv-feats { gap: 10px; }
  .dv-fd > p { font-size: var(--text-sm); line-height: 1.4; padding-top: 2px; }
  .dv-fb h4 { font-size: clamp(1.1rem, 5vw, 1.3rem); }
}

/* ===== Mục Thiết bị ở màn hẹp (<=1299px): công trình riêng cho từng hạng mục, icon có cỡ trần, máy tính bảng chia 2 cột ===== */
.dv-mhouse { display: none; }
@media (max-width: 1299px) {
  .dv-mhouse { display: block; position: relative; width: min(100%, 440px); aspect-ratio: 420 / 446; margin: 0; }
  .dv-mhouse .dv-hl-base {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); mask-composite: intersect;
  }
  .devs .dv-devices { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-width: 640px; gap: 14px 12px; }
  .devs .dv-dev .dv { width: 100%; max-width: 128px; height: auto; aspect-ratio: 200 / 160; overflow: visible; }
}
@media (min-width: 720px) and (max-width: 1299px) {
  .devs .dv-cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 64px); align-items: start; }
  .devs .dv-left { grid-column: 1; grid-row: 1; }
  .devs .dv-mid { grid-column: 1; grid-row: 2; }
  .devs .dv-right { grid-column: 2; grid-row: 1 / span 2; }
  .devs .dv-feats { margin-top: 0; }
}

/* ===== Địa điểm: nền xanh đậm + lưới bản vẽ, thiết bị vẽ tay, thông tin liên hệ + bản đồ Google nhúng ===== */
.visit { position: relative; z-index: 3; overflow: hidden; color: #fff; min-height: 100svh; display: flex; align-items: center; padding: clamp(40px, 7vh, 88px) clamp(20px, 3vw, 56px);   /* full màn hình, nội dung căn giữa dọc */
  background:
    radial-gradient(900px 460px at 90% -5%, rgba(24, 104, 194, .30), transparent 62%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--color-brand-900, #071426); }
.visit-in { width: 100%; max-width: 1280px; margin: 0 auto; }
.visit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 56px); margin-bottom: clamp(20px, 4.5vh, 56px); }
.visit .eyebrow { margin: 0 0 18px; color: rgba(255, 255, 255, .6); }
.visit-title { margin: 0; font-family: var(--font-body, system-ui, sans-serif); font-size: clamp(2.2rem, min(5.6vw, 9.5vh), 5.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
.visit-title span { display: block; color: rgba(255, 255, 255, .38); }
.visit-icons { display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 14px); flex: none; }
.visit-ico { display: block; width: clamp(56px, 7vw, 104px); height: auto; aspect-ratio: 200 / 160; overflow: visible; }
.visit .dv-p { stroke: rgba(255, 255, 255, .85); stroke-width: 1.4; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.visit-info { display: flex; flex-direction: column; align-items: flex-start; }
.visit-logo { margin: 0 0 20px; }
.visit-co { margin: 0 0 20px; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; line-height: 1.35; color: #fff; }
.visit-addr { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 22px; max-width: 44ch; font-style: normal; font-size: var(--body-size, 1rem); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.visit-addr svg, .visit-legal svg { margin-top: 3px; color: rgba(255, 255, 255, .7); }
.visit-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 520px; margin: 0 0 22px; }
.visit-tile { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 18px; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(255, 255, 255, .04); transition: transform .25s, border-color .25s, background .25s; }
.visit-tile:hover, .visit-tile:focus-visible { transform: translateY(-3px); border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .09); }
.visit-tile small { display: block; margin-bottom: 2px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--label-size); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.visit-tile b { display: block; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.visit-legal { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; max-width: 520px; margin: 0 0 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .58); }
.visit-links { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.visit .link-arrow { color: #fff; }
.visit .link-arrow i { background: rgba(255, 255, 255, .16); color: #fff; }
.visit .link-arrow:hover i { background: #fff; color: var(--color-brand-700, #14467C); }
.visit-map { position: relative; height: clamp(320px, 52vh, 560px); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; overflow: hidden; background: #0d1d33; box-shadow: 0 30px 70px rgba(0, 0, 0, .42); }
.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visit-pin { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(7, 20, 38, .28); pointer-events: none; }
.visit-pin i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent-orange-600, #1A5696); }
.visit-pin i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--color-accent-orange-600, #1A5696); opacity: 0; animation: visitPulse 2.4s ease-out infinite; }
.visit-pin b { display: block; font-size: .92rem; line-height: 1.2; color: var(--color-ink-heading, #101828); }
.visit-pin small { display: block; font-size: .74rem; line-height: 1.3; color: var(--color-ink-muted, #52525B); }
@keyframes visitPulse { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .visit-pin i::after { animation: none; } .visit-tile { transition: none; } }
@media (max-width: 899px) {
  .visit-head { flex-direction: column; align-items: flex-start; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-map { height: clamp(300px, 80vw, 420px); }
  .visit-tiles { max-width: none; }
}
@media (max-width: 520px) {
  .visit-tiles { grid-template-columns: 1fr; }
  .visit-ico:nth-child(n+5) { display: none; }
}

/* 2 nút CTA lớn của section Địa điểm: về knxstore.vn và knxstore.vn/matter */
.visit-cta { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin: 0 0 22px; }
.visit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1px solid #fff; font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.visit-btn svg { flex: none; transition: transform .25s; }
.visit-btn:hover svg, .visit-btn:focus-visible svg { transform: translateX(4px); }
.visit-btn--solid { background: #fff; color: var(--color-brand-900, #071426); }
.visit-btn--solid:hover, .visit-btn--solid:focus-visible { background: var(--color-brand-100, #EAF2FF); border-color: var(--color-brand-100, #EAF2FF); }
.visit-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.visit-btn--ghost:hover, .visit-btn--ghost:focus-visible { background: rgba(255, 255, 255, .1); border-color: #fff; }
@media (max-width: 520px) { .visit-btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .visit-btn, .visit-btn svg { transition: none; } }

/* Hero trên điện thoại: lưới bản vẽ mờ phủ lên gradient để nửa trên không trống trơn (đồng bộ với section Địa điểm) */
@media (max-width: 680px) {
  .hero-bg {
    background:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(180deg, #1A5696 0%, #123A66 38%, #0B1220 100%);
  }
}