/* ==========================================================================
   Windify Corporate — giao diện tối "Liquid Glass"
   Hướng: theo ngôn ngữ vật liệu kính của iOS. Kính chỉ dành cho lớp điều khiển
   nổi (header, thanh công cụ, nút phụ, segmented, sheet); nội dung nằm trên
   các "platter" đặc, bo góc đồng tâm. Nền là "hình nền" tối có vài vùng màu
   thương hiệu để kính có thứ khúc xạ.
   Chi tiết đặc trưng giữ lại: hai nét xiên của chữ W (dấu tiêu đề, panel CTA).
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Nền & bề mặt */
  --bg: #05070d;
  --surface: rgba(255, 255, 255, 0.055);      /* platter nội dung */
  --surface-hi: rgba(255, 255, 255, 0.085);   /* platter khi hover / lồng nhau */
  --fill: rgba(255, 255, 255, 0.075);         /* ô nhập, chip */
  --separator: rgba(255, 255, 255, 0.1);

  /* Chữ */
  --label: #f3f5fa;
  --label-2: rgba(232, 237, 250, 0.7);
  --label-3: rgba(232, 237, 250, 0.5);        /* chỉ cho chữ lớn / chú thích phụ */

  /* Màu thương hiệu trên nền tối */
  --tint: #3d6bd0;          /* nền nút chính, chữ trắng đạt AA */
  --tint-hi: #4a78dc;
  --tint-text: #93b3f2;     /* chữ liên kết */
  --ember: #e9481f;
  --ember-text: #ff8a5f;

  /* Kính */
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  --glass-blur: blur(22px) saturate(180%);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.08);
  --glass-drop: 0 12px 32px -12px rgba(0,0,0,.7);
  --platter-rim: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.04);

  /* Chữ */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-foot: 0.8125rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h1: clamp(2.5rem, 1.55rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.5rem + 1.9vw, 3.125rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5rem);

  /* Khoảng cách */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 96px; --s8: 160px;
  --section-y: clamp(64px, 3.5rem + 4.5vw, 128px);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;

  /* Bo góc đồng tâm: góc ngoài = góc trong + khoảng đệm */
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;

  /* Chuyển động: lò xo nhẹ cho phản hồi, ease-out cho xuất hiện */
  --spring: cubic-bezier(0.34, 1.3, 0.55, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 320ms;
  --header-h: 60px;
  --header-top: 12px;
}

/* Điện thoại: bo góc nhỏ lại cho cân với màn hình hẹp (vẫn giữ quan hệ đồng tâm) */
@media (max-width: 639px) {
  :root { --r-xl: 22px; --r-lg: 18px; --r-md: 13px; --r-sm: 9px; }
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--header-top) + 24px);
  background: var(--bg);
}
body {
  margin: 0; min-height: 100vh;
  background: transparent; color: var(--label); /* để lớp hình nền phía sau hiện ra */
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Hình nền: vài vùng màu thương hiệu, cố định sau mọi lớp kính */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55vw 48vh at 88% 4%, rgba(61,107,208,.42), transparent 70%),
    radial-gradient(42vw 46vh at 4% 42%, rgba(45,78,138,.32), transparent 70%),
    radial-gradient(38vw 32vh at 72% 96%, rgba(233,72,31,.16), transparent 70%),
    var(--bg);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--tint-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600; color: var(--label);
  margin: 0; text-wrap: balance; font-optical-sizing: auto;
}
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.016em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.005em; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--tint-text); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tint); color: #fff; }

.skip-link {
  position: absolute; left: var(--s3); top: -60px; z-index: 100;
  background: var(--tint); color: #fff; padding: var(--s2) var(--s3); border-radius: 999px;
}
.skip-link:focus { top: var(--s3); color: #fff; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
main { padding-top: calc(var(--header-h) + var(--header-top)); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.55); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--label-2); max-width: 60ch; }
.muted { color: var(--label-2); }

/* Dấu tiêu đề: hai nét xiên của chữ W, bo mềm */
.mark { display: inline-flex; gap: 5px; margin-right: 14px; vertical-align: 0.12em; }
.mark::before, .mark::after { content: ""; width: 7px; height: 0.72em; transform: skewX(-18deg); border-radius: 2px; }
.mark::before { background: var(--tint-hi); }
.mark::after { background: var(--ember); }

.section-head { display: grid; gap: var(--s4); margin-bottom: clamp(32px, 4.5vw, 64px); }
@media (min-width: 960px) { .section-head--split { grid-template-columns: 6fr 5fr; gap: var(--s6); align-items: end; } }

/* ==========================================================================
   Vật liệu
   ========================================================================== */
/* Kính: cho lớp điều khiển nổi */
.site-header__inner, .btn--ghost, .btn--outline-light, .segmented, .mobile-cta,
.cta-band__inner, .form, .media-chip, .leader figcaption, .mobile-menu, .nav-toggle, .tags li, .chips li, .sectors li {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-drop);
}
/* Vệt sáng phản chiếu đi theo con trỏ (JS đặt --mx/--my) */
.site-header__inner, .segmented, .cta-band__inner, .form, .mobile-cta { position: relative; isolation: isolate; }
.site-header__inner::after, .segmented::after, .cta-band__inner::after, .form::after, .mobile-cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(240px circle at var(--mx, 20%) var(--my, -40%), rgba(255,255,255,.12), transparent 60%);
  transition: opacity 400ms var(--ease);
}

/* Platter: cho nội dung */
.tile, .index__item, .figures li, .project, .capabilities, .step, .values li, .clients li,
.faq, .contact-list, .about__facts, .statement > div, .audience, .feature, .problem-list li,
.program, .case-list, .related a, .facts li, .service, .site-footer .container, .quote blockquote {
  background: var(--surface);
  box-shadow: var(--platter-rim);
}

/* ==========================================================================
   Nút
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font: 600 1rem/1.2 var(--font-body); letter-spacing: -0.005em;
  border-radius: 999px; border: 0;
  text-decoration: none; cursor: pointer; color: var(--label);
  transition: transform 450ms var(--spring), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.96); transition-duration: 120ms; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }
/* Nút chính: nền màu đặc + viền sáng mảnh phía trên, không phát sáng */
.btn--primary {
  background: var(--tint); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px -8px rgba(0,0,0,.6);
}
.btn--primary:hover { background: var(--tint-hi); color: #fff; }
.btn--ghost, .btn--outline-light { color: var(--label); }
.btn--ghost:hover, .btn--outline-light:hover { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); }
/* Nút trắng trong panel CTA (giống nút nổi bật trên sheet iOS) */
.btn--light { background: #f3f5fa; color: #0b1430; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08), 0 6px 18px -8px rgba(0,0,0,.6); }
.btn--light:hover { background: #fff; color: #0b1430; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .btn-row .btn { flex: 1 1 100%; } }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--tint-text); text-decoration: none; padding-block: 4px;
}
.link:hover { color: #fff; }
.link svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
.link:hover svg { transform: translate(2px, -2px); }

/* ==========================================================================
   Header: thanh kính dạng viên thuốc, nổi tách khỏi mép màn hình
   ========================================================================== */
.site-header { position: fixed; top: var(--header-top); left: 0; right: 0; z-index: 50; pointer-events: none; }
.site-header__inner.container {
  pointer-events: auto;
  width: calc(100% - var(--gutter) * 2); max-width: 1120px;
  display: flex; align-items: center; gap: var(--s3);
  height: var(--header-h); padding: 0 8px 0 20px; border-radius: 999px;
  transition: max-width 600ms var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-scrolled .site-header__inner.container { max-width: 1040px; }
.brand { display: inline-flex; align-items: center; flex: none; padding-block: 10px; }
.brand img { width: 128px; height: auto; filter: brightness(0) invert(1); }
.nav { margin-left: auto; }
.nav ul { position: relative; display: flex; gap: 2px; list-style: none; }
.nav a {
  position: relative; z-index: 1; display: block;
  color: var(--label-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500;
  padding: 8px 14px; border-radius: 999px; transition: color var(--dur) var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--label); }
/* Viên kính nhỏ trượt theo mục đang trỏ/đang xem (JS điều khiển) */
.nav__lens {
  position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; pointer-events: none;
  background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  opacity: 0; transition: transform 520ms var(--spring), width 520ms var(--spring), opacity 240ms var(--ease);
}
.site-header .btn { min-height: 44px; padding: 10px 18px; font-size: var(--fs-small); }
.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 999px;
  padding: 0; cursor: pointer; color: var(--label); flex-direction: column; justify-content: center;
  transition: transform 450ms var(--spring);
}
.nav-toggle:active { transform: scale(.92); }
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; margin: 2.5px auto; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu điện thoại: sheet trượt lên từ đáy, có thanh kéo, nền phía sau tối đi */
.mobile-menu {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 60;
  max-height: calc(100dvh - 80px); overflow-y: auto;
  padding: 10px var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(40,48,70,.82), rgba(20,25,40,.9));
  box-shadow: var(--glass-rim), 0 0 0 100vmax rgba(0,0,0,0);
  display: flex; flex-direction: column; gap: var(--s4);
  transform: translateY(calc(100% + 16px)); visibility: hidden;
  transition: transform 560ms var(--spring), box-shadow 400ms var(--ease), visibility 0s linear 560ms;
}
.mobile-menu::before { content: ""; align-self: center; width: 36px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); flex: none; }
.mobile-menu.is-open { transform: none; visibility: visible; transition-delay: 0s; box-shadow: var(--glass-rim), 0 0 0 100vmax rgba(0,0,0,.55); }
.mobile-menu ul { list-style: none; background: rgba(255,255,255,.06); border-radius: var(--r-lg); overflow: hidden; }
.mobile-menu li + li { border-top: 1px solid var(--separator); }
.mobile-menu a.mobile-menu__link {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  min-height: 56px; padding: 12px 18px;
  font-size: 1.0625rem; font-weight: 500; color: var(--label); text-decoration: none;
}
.mobile-menu a.mobile-menu__link::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--label-3); border-top: 2px solid var(--label-3); transform: rotate(45deg); flex: none;
}
.mobile-menu a.mobile-menu__link[aria-current] { color: var(--tint-text); }
.mobile-menu__foot { display: grid; gap: 10px; }
.mobile-menu__foot .btn { width: 100%; }

@media (max-width: 1023px) {
  .nav, .site-header .header-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 1024px) { .mobile-menu { display: none; } }
body.menu-open { overflow: hidden; }

/* Thanh công cụ nổi ở đáy màn hình điện thoại (vùng ngón cái) */
.mobile-cta {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: none; gap: 6px; padding: 6px; border-radius: 999px;
  transform: translateY(calc(100% + 32px)); visibility: hidden;
  transition: transform 560ms var(--spring), visibility 0s linear 560ms;
}
.mobile-cta.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.mobile-cta .btn { flex: 1; min-height: 48px; padding-inline: 12px; }
.mobile-cta .btn--ghost { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 767px) {
  .mobile-cta { display: flex; }
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Ảnh: thẻ bo góc lớn, chú thích là viên kính nổi trên ảnh
   ========================================================================== */
.media { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--platter-rim); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06); }
.media-chip {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; max-width: calc(100% - 28px);
  padding: 8px 14px; border-radius: 999px; font-size: var(--fs-foot); line-height: 1.35; color: var(--label);
}

/* Xuất hiện khi cuộn: chỉ dùng cho ảnh và nhóm thẻ, đẩy lên rồi dừng như lò xo */
.js .reveal { opacity: 0; transform: translateY(28px) scale(.975); transition: opacity 700ms var(--ease), transform 900ms var(--spring); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal img { transform: scale(1.05); transition: transform 1400ms var(--ease); }
.js .reveal.is-in img { transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 800ms var(--spring); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-in > :nth-child(2) { transition-delay: 70ms; }
.js .stagger.is-in > :nth-child(3) { transition-delay: 140ms; }
.js .stagger.is-in > :nth-child(4) { transition-delay: 210ms; }
.js .stagger.is-in > :nth-child(5) { transition-delay: 280ms; }
.js .stagger.is-in > :nth-child(6) { transition-delay: 350ms; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.hero__grid { display: grid; gap: var(--s5); align-items: center; }
.hero__copy h1 { margin-bottom: var(--s4); max-width: 15ch; }
.hero__copy .lead { margin-bottom: var(--s5); }
.hero figure { position: relative; margin: 0; }
.hero__media { aspect-ratio: 4 / 3.3; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--s6); }
  .hero__media { aspect-ratio: 4 / 4.6; }
}
.js .hero-in { opacity: 0; transform: translateY(16px); animation: heroIn 900ms var(--ease) forwards; }
.js .hero-in:nth-child(2) { animation-delay: 90ms; }
.js .hero-in:nth-child(3) { animation-delay: 180ms; }
.js .hero-in:nth-child(4) { animation-delay: 270ms; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Bốn lĩnh vực: ô ứng dụng */
.index { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; margin-top: clamp(48px, 6vw, 88px); }
.index__item { position: relative; border-radius: var(--r-lg); transition: transform 500ms var(--spring), background-color var(--dur) var(--ease); }
.index__item:hover { background: var(--surface-hi); transform: translateY(-3px); }
.index__item:active { transform: scale(.98); transition-duration: 120ms; }
.index__item a { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 20px; height: 100%; color: inherit; text-decoration: none; border-radius: inherit; }
.app-icon {
  grid-row: span 3; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.15), 0 6px 16px -6px rgba(0,0,0,.6);
}
.app-icon svg { width: 26px; height: 26px; }
.app-icon--blue { background: linear-gradient(160deg, #5b86e5, #2d4e8a); }
.app-icon--ember { background: linear-gradient(160deg, #ff8752, #d23c12); }
.app-icon--sky { background: linear-gradient(160deg, #7cc4f5, #3c7cc9); }
.app-icon--graphite { background: linear-gradient(160deg, #8d97ad, #454e63); }
.index__label { font-size: var(--fs-foot); color: var(--label-2); align-self: end; }
.index__title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; line-height: 1.25; }
.index__desc { grid-column: 1 / -1; margin-top: 10px; font-size: var(--fs-small); color: var(--label-2); line-height: 1.6; }
.index__go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--tint-text); }
.index__go svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.index__item:hover .index__go svg { transform: translateX(3px); }
@media (min-width: 640px) { .index { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .index { grid-template-columns: repeat(4, 1fr); }
  .index__item a { grid-template-columns: 1fr; padding: 24px; }
  .app-icon { grid-row: auto; margin-bottom: 14px; }
  .index__desc { margin-top: 6px; }
}

/* ==========================================================================
   Giới thiệu
   ========================================================================== */
.about { display: grid; gap: var(--s5); }
.about__media { aspect-ratio: 3 / 2; }
.about__body h2 { margin-bottom: var(--s4); }
.about__body .lead { margin-bottom: var(--s4); }
@media (min-width: 960px) { .about { grid-template-columns: 6fr 5fr; align-items: center; gap: var(--s7); } }

/* Danh sách nhóm kiểu iOS: platter + đường phân cách thụt lề */
.about__facts, .contact-list, .audience, .capabilities, .case-list, .faq { list-style: none; border-radius: var(--r-lg); overflow: hidden; }
.about__facts { display: grid; margin-top: var(--s4); }
.about__facts li { padding: 16px 20px; color: var(--label-2); font-size: var(--fs-small); }
.about__facts li + li, .audience li + li, .capability + .capability, .case + .case, .faq details + details, .contact-list li + li {
  border-top: 1px solid var(--separator);
}
.about__facts strong { display: block; color: var(--label); font-weight: 600; font-size: var(--fs-body); }

.statement { display: grid; gap: 12px; margin-top: var(--s6); }
.statement > div { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); }
.statement h3 { font: 600 var(--fs-foot)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--tint-text); margin-bottom: var(--s3); }
.statement p { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--label); }
@media (min-width: 960px) { .statement { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Số liệu: widget
   ========================================================================== */
.band { padding-block: calc(var(--section-y) * 0.4); }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; }
.figures li { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: space-between; min-height: 168px; }
.figures li:first-child {
  background: linear-gradient(150deg, #4a78dc, #213f7c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 40px -20px rgba(61,107,208,.55);
}
.figures li:first-child .figures__label { color: rgba(255,255,255,.86); }
.figures__num { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.figures__label { display: block; margin-top: var(--s4); font-size: var(--fs-small); line-height: 1.5; color: var(--label-2); max-width: 26ch; }
@media (min-width: 960px) { .figures { grid-template-columns: repeat(4, 1fr); gap: 16px; } .figures li { min-height: 220px; } }

/* ==========================================================================
   Lĩnh vực: segmented control + thẻ chi tiết
   ========================================================================== */
.segmented {
  display: flex; gap: 0; padding: 4px; border-radius: 999px; margin-bottom: var(--s4);
  width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  position: relative; z-index: 1; flex: 1 0 auto;
  min-height: 40px; padding: 8px 20px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 var(--fs-small)/1.2 var(--font-body); color: var(--label-2); white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.segmented button[aria-selected="true"] { color: var(--label); font-weight: 600; }
.segmented__thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px rgba(0,0,0,.5);
  transition: transform 560ms var(--spring), width 560ms var(--spring);
}
@media (max-width: 639px) {
  .segmented { width: 100%; }
  .segmented button { flex: 1 1 auto; padding-inline: 7px; font-size: 0.8125rem; }
}

.service-list { display: grid; gap: 16px; }
.service { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--s4); align-items: center; padding: 10px; border-radius: calc(var(--r-xl) + 10px); }
.service[hidden] { display: none; }
.service.is-entering { animation: panelIn 600ms var(--spring); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.service__media { aspect-ratio: 5 / 4; }
.service__body { padding: 8px 14px 18px; }
.service__name { font-size: var(--fs-foot); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tint-text); margin-bottom: var(--s2); }
.service__body h3 { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); line-height: 1.2; margin-bottom: var(--s3); }
.service__body > p { color: var(--label-2); max-width: 56ch; }
.ticks { list-style: none; display: grid; gap: 10px; margin: var(--s4) 0 var(--s5); }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(147,179,242,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393b3f2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.service__links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
@media (min-width: 960px) {
  .service { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .service__body { padding: 24px 32px 24px 0; }
  .service-list:not(.is-tabbed) .service:nth-child(even) .service__media { order: 2; }
}

/* ==========================================================================
   Dự án: lưới thẻ trên máy tính, kệ cuộn ngang có điểm dừng trên điện thoại
   ========================================================================== */
.projects { display: grid; gap: 16px; }
.project { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--s3); align-content: start; padding: 8px 8px 24px; border-radius: calc(var(--r-lg) + 8px); transition: background-color var(--dur) var(--ease); }
.project:hover { background: var(--surface-hi); }
.project > div:last-child { padding-inline: 16px; }
.project__media { aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,.04); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.project:hover .project__media img { transform: scale(1.025); }
.project__meta { font-size: var(--fs-foot); color: var(--label-2); margin-bottom: 6px; }
.project h3 { margin-bottom: var(--s2); }
.project p { color: var(--label-2); font-size: var(--fs-small); line-height: 1.65; }
.tags, .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: var(--s3); }
.tags li, .chips li { font-size: var(--fs-foot); font-weight: 500; color: var(--label); padding: 5px 12px; border-radius: 999px; }
.project__result { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s3); padding: 14px 16px; border-radius: var(--r-md); background: rgba(233,72,31,.1); }
.project__result strong { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; color: var(--ember-text); line-height: 1; }
.project__result span { font-size: var(--fs-small); color: var(--label-2); line-height: 1.5; }
@media (max-width: 839px) {
  .projects {
    grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 8px; scrollbar-width: none;
  }
  .projects::-webkit-scrollbar { display: none; }
  .project { scroll-snap-align: start; }
}
@media (min-width: 840px) {
  .projects { grid-template-columns: 1fr 1fr; }
  .project--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 8px; } /* 32px = khe giữa hai thẻ (16) + đệm hai thẻ (8 + 8): mép ảnh thẳng hàng với thẻ bên dưới */
  .project--wide > div:last-child { padding: 16px 24px 16px 0; }
  .project--wide .project__media { aspect-ratio: 16 / 10; }
  /* Thẻ rộng có project--flip đảo ảnh sang phải để tạo nhịp so le */
  .project--flip .project__media { order: 2; }
  .project--flip > div:last-child { padding: 16px 0 16px 24px; }
}
.js .projects:not(.is-expanded) > .project--more { display: none; }
.js .projects.is-expanded > .project--more { animation: moreIn 700ms var(--spring) both; }
.js .projects.is-expanded > .project--more:nth-last-child(2) { animation-delay: 80ms; }
.js .projects.is-expanded > .project--more:last-child { animation-delay: 160ms; }
@keyframes moreIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.projects-more { display: flex; justify-content: center; margin-top: var(--s5); }
.projects-more[hidden] { display: none; }
.projects-more .btn { min-width: 200px; }
.projects-more .btn::after {
  content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 450ms var(--spring);
}
.projects-more .btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
@media (max-width: 839px) { .projects-more { margin-top: var(--s4); } .projects-more .btn { width: 100%; } }
.shelf-hint { display: none; margin-top: 12px; font-size: var(--fs-foot); color: var(--label-3); }
@media (max-width: 839px) { .shelf-hint { display: block; } }

/* ==========================================================================
   Năng lực: danh sách nhóm
   ========================================================================== */
.capability { display: grid; gap: 6px var(--s5); padding: 22px 24px; }
.capability h3 { font-size: 1.25rem; }
.capability p { color: var(--label-2); margin: 0; font-size: var(--fs-small); }
.capability .chips { margin-top: 6px; }
@media (min-width: 900px) { .capability { grid-template-columns: 3fr 4fr 5fr; align-items: center; padding: 28px 32px; } .capability .chips { margin-top: 0; } }

/* ==========================================================================
   Quy trình: các bước nối bằng đường mảnh
   ========================================================================== */
.steps { list-style: none; counter-reset: step; display: grid; gap: 12px; }
.step { counter-increment: step; position: relative; padding: 24px; border-radius: var(--r-lg); }
.step::before {
  content: counter(step); display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; margin-bottom: var(--s4);
  font: 600 0.9375rem/1 var(--font-body); color: #fff;
  background: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.step h3 { font-size: 1.25rem; margin-bottom: var(--s2); }
.step p { color: var(--label-2); font-size: var(--fs-small); line-height: 1.65; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 41px; left: 72px; right: -12px; height: 1px;
    background: linear-gradient(90deg, rgba(147,179,242,.5), rgba(147,179,242,0));
  }
}
@media (min-width: 640px) and (max-width: 1023px) { .steps--3 .step:last-child { grid-column: 1 / -1; } }

/* ==========================================================================
   Đội ngũ
   ========================================================================== */
.people { display: grid; gap: var(--s5); }
.leader { position: relative; margin: 0; }
.leader__media { aspect-ratio: 4 / 3; }
.leader figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 10px 18px; border-radius: 20px; font-size: var(--fs-foot); color: var(--label-2); line-height: 1.4; }
.leader figcaption strong { display: block; font-family: var(--font-display); font-size: 1.125rem; color: var(--label); font-weight: 600; }
.people__body h2 { margin-bottom: var(--s4); }
.values { display: grid; grid-template-columns: 1fr; gap: 10px; list-style: none; margin-top: var(--s5); }
.values li { padding: 20px 22px; border-radius: var(--r-lg); display: grid; gap: 4px; }
.values h3 { font-size: 1.1875rem; }
.values h3 span { display: block; font-family: var(--font-body); font-size: var(--fs-foot); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tint-text); margin-bottom: 4px; }
.values p { color: var(--label-2); font-size: var(--fs-small); margin: 0; }
@media (min-width: 640px) { .values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .people { grid-template-columns: 5fr 6fr; gap: var(--s7); align-items: center; } }

/* ==========================================================================
   Khách hàng & đánh giá (bong bóng tin nhắn)
   ========================================================================== */
.sectors { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-bottom: var(--s5); }
.sectors li { font-size: var(--fs-small); font-weight: 500; padding: 8px 16px; border-radius: 999px; }
.clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; }
.clients li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 76px; padding: var(--s3); border-radius: var(--r-md);
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; color: var(--label-2);
}
@media (min-width: 640px) { .clients { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .clients { grid-template-columns: repeat(6, 1fr); } }

.quotes { display: grid; gap: var(--s5) 16px; margin-top: clamp(56px, 7vw, 96px); }
.quote { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote {
  position: relative; margin: 0; padding: 20px 22px; border-radius: 22px 22px 22px 6px;
  font-family: var(--font-display); font-size: 1.125rem; line-height: 1.55; flex: 1;
}
.quote figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; font-size: var(--fs-foot); color: var(--label-2); line-height: 1.4; padding-left: 4px; }
.quote figcaption strong { display: block; color: var(--label); font-weight: 600; font-size: var(--fs-small); }
.avatar {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 600 1rem/1 var(--font-body); color: #fff;
  background: linear-gradient(160deg, #8d97ad, #454e63); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.quote:nth-child(3n+1) .avatar { background: linear-gradient(160deg, #5b86e5, #2d4e8a); }
.quote:nth-child(3n+2) .avatar { background: linear-gradient(160deg, #ff8752, #d23c12); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   FAQ: danh sách mở rộng kiểu Cài đặt
   ========================================================================== */
.faq { max-width: 880px; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  min-height: 60px; padding: 16px 22px; font-weight: 600; font-size: 1.0625rem;
  transition: background-color var(--dur) var(--ease);
}
.faq summary:hover { background: rgba(255,255,255,.035); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--label-3); border-top: 2px solid var(--label-3);
  transform: rotate(45deg); transition: transform 450ms var(--spring);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .faq__a { padding: 0 22px 20px; color: var(--label-2); max-width: 70ch; }
.faq details[open] .faq__a { animation: faqIn 420ms var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Liên hệ: danh sách có ô biểu tượng + biểu mẫu là một tấm kính
   ========================================================================== */
.contact { display: grid; gap: var(--s5); }
.contact__info h2 { margin-bottom: var(--s4); }
.contact-list { display: grid; margin-top: var(--s5); }
.contact-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 14px 18px; }
.contact-list svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; color: #fff; background: linear-gradient(160deg, #5b86e5, #2d4e8a); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.contact-list li:nth-child(2) svg { background: linear-gradient(160deg, #7cc4f5, #3c7cc9); }
.contact-list li:nth-child(3) svg { background: linear-gradient(160deg, #ff8752, #d23c12); }
.contact-list li:nth-child(4) svg { background: linear-gradient(160deg, #8d97ad, #454e63); }
.contact-list span { display: block; font-size: var(--fs-foot); color: var(--label-2); }
.contact-list a, .contact-list strong { font-weight: 600; color: var(--label); text-decoration: none; font-size: var(--fs-small); }
.contact-list a { display: inline-block; }
.contact-list a:hover { color: var(--tint-text); }

.form { display: grid; gap: var(--s4); padding: clamp(20px, 3.5vw, 40px); border-radius: var(--r-xl); }
.form__row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-foot); font-weight: 600; color: var(--label-2); padding-left: 4px; }
.field label .req { color: var(--ember-text); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.5 var(--font-body); color: var(--label);
  background: rgba(0,0,0,.22); border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 2px rgba(0,0,0,.3);
  padding: 12px 16px; min-height: 50px;
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background: rgba(0,0,0,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c3dc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.field select option { background: #141a2a; color: var(--label); }
.field textarea { min-height: 124px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--label-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--tint-text); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ember-text); }
.field__error { font-size: 0.875rem; color: var(--ember-text); padding-left: 4px; }
.form__note { font-size: 0.875rem; color: var(--label-2); }
.form__status { font-size: var(--fs-small); color: var(--tint-text); font-weight: 500; }
.form .btn { justify-self: start; }
@media (max-width: 639px) { .form .btn { justify-self: stretch; } }
@media (min-width: 960px) { .contact { grid-template-columns: 5fr 6fr; gap: var(--s7); align-items: start; } }

/* ==========================================================================
   Panel CTA: tấm kính lớn, hai nét xiên chữ W chìm phía sau
   ========================================================================== */
.cta-band { padding-block: calc(var(--section-y) * 0.6) var(--section-y); }
.cta-band__inner.container {
  width: calc(100% - var(--gutter) * 2); max-width: var(--max); padding: clamp(28px, 5vw, 64px);
  border-radius: calc(var(--r-xl) + 8px); overflow: hidden; display: grid; gap: var(--s5); align-items: end;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(61,107,208,.35), transparent 60%),
    var(--glass-bg);
}
.cta-band__inner::before {
  content: ""; position: absolute; z-index: -1; right: -2%; top: -30%; width: 30%; height: 160%;
  background: linear-gradient(90deg, rgba(255,255,255,.06) 0 38%, transparent 38% 54%, rgba(233,72,31,.22) 54% 92%, transparent 92%);
  transform: skewX(-18deg); border-radius: 12px; pointer-events: none;
}
.cta-band h2 { max-width: 20ch; }
.cta-band p { color: var(--label-2); max-width: 52ch; margin-top: var(--s3); }
@media (min-width: 960px) { .cta-band__inner.container { grid-template-columns: 1fr auto; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding-top: var(--s5); padding-bottom: var(--s4); font-size: var(--fs-small); color: var(--label-2); }
.site-footer .container { width: calc(100% - var(--gutter) * 2); max-width: var(--max); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); }
.site-footer a { color: var(--label); text-decoration: none; }
.site-footer a:hover { color: var(--tint-text); }
.footer-grid { display: grid; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--separator); }
.footer-brand img { width: 140px; filter: brightness(0) invert(1); margin-bottom: var(--s4); }
.footer-brand p { max-width: 34ch; }
.footer-col h2 { font: 600 var(--fs-foot)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); margin-bottom: var(--s2); }
.footer-col ul { list-style: none; display: grid; gap: 0; }
.footer-col a, .footer-bottom a { display: inline-block; padding-block: 8px; }
.footer-col small { display: block; padding-block: 8px; color: var(--label-2); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; align-items: center; padding-top: var(--s3); font-size: var(--fs-foot); }
.footer-bottom ul { display: flex; gap: var(--s4); list-style: none; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 4fr 3fr 3fr 3fr; } }
/* Chừa chỗ cho thanh công cụ nổi ở đáy điện thoại để không che liên kết cuối trang */
@media (max-width: 767px) { .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   Trang lĩnh vực
   ========================================================================== */
.breadcrumb { padding-top: var(--s4); font-size: var(--fs-foot); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; color: var(--label-2); align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
  content: ""; width: 6px; height: 6px; margin: 0 10px 0 6px;
  border-right: 1.5px solid var(--label-3); border-top: 1.5px solid var(--label-3); transform: rotate(45deg);
}
.breadcrumb a { color: var(--label-2); text-decoration: none; display: inline-block; padding-block: 10px; }
.breadcrumb a:hover { color: var(--label); }

.page-hero { padding-top: var(--s4); padding-bottom: clamp(40px, 5vw, 72px); }
.page-hero__grid { display: grid; gap: var(--s5); align-items: center; }
.page-hero__brand { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); font-weight: 600; color: var(--tint-text); margin-bottom: var(--s3); }
.page-hero h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); margin-bottom: var(--s4); max-width: 18ch; }
.page-hero .lead { margin-bottom: var(--s5); }
.page-hero__media { aspect-ratio: 5 / 4; }
.page-hero__site { margin-top: var(--s4); font-size: var(--fs-small); color: var(--label-2); }
@media (min-width: 960px) { .page-hero__grid { grid-template-columns: 6fr 5fr; gap: var(--s6); } }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; }
.facts li { padding: 22px; border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; }
.facts li:first-child { background: linear-gradient(150deg, #4a78dc, #213f7c); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.facts li:first-child span { color: rgba(255,255,255,.86); }
.facts strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; color: var(--label); }
.facts span { display: block; margin-top: var(--s3); font-size: var(--fs-small); color: var(--label-2); max-width: 24ch; line-height: 1.5; }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.two-col { display: grid; gap: var(--s5); }
.two-col h2 { margin-bottom: var(--s3); }
@media (min-width: 960px) { .two-col { grid-template-columns: 5fr 6fr; gap: var(--s7); align-items: start; } }

.audience li { padding: 18px 22px; }
.audience h3 { font-size: 1.1875rem; margin-bottom: 4px; }
.audience p { color: var(--label-2); margin: 0; font-size: var(--fs-small); }

.features { display: grid; gap: 12px; list-style: none; counter-reset: feat; }
.feature { counter-increment: feat; padding: 24px; border-radius: var(--r-lg); transition: background-color var(--dur) var(--ease); }
.feature:hover { background: var(--surface-hi); }
.feature::before {
  content: counter(feat, decimal-leading-zero); display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: var(--s4);
  font: 600 0.875rem/1 var(--font-body); color: var(--tint-text);
  background: rgba(147,179,242,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.feature__icon { width: 40px; height: 40px; color: var(--tint-text); margin-bottom: var(--s3); }
.feature:has(.feature__icon)::before { display: none; }
.feature h3 { font-size: 1.25rem; margin-bottom: var(--s2); }
.feature p { color: var(--label-2); font-size: var(--fs-small); line-height: 1.65; margin: 0; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.problem-list { display: grid; gap: 12px; list-style: none; }
.problem-list li { position: relative; padding: 24px 24px 24px 56px; border-radius: var(--r-lg); }
.problem-list li::before {
  content: "!"; position: absolute; left: 20px; top: 26px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.8125rem/1 var(--font-body); color: #fff; background: var(--ember);
}
.problem-list h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.problem-list p { color: var(--label-2); font-size: var(--fs-small); margin: 0; }
@media (min-width: 768px) { .problem-list { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.programs { display: grid; gap: 12px; list-style: none; }
.program { display: grid; gap: var(--s3); align-content: start; padding: 28px 24px; border-radius: var(--r-lg); }
.program__level { justify-self: start; font-size: var(--fs-foot); font-weight: 600; color: var(--tint-text); padding: 4px 12px; border-radius: 999px; background: rgba(147,179,242,.12); }
.program h3 { font-size: 1.3125rem; }
.program p { color: var(--label-2); font-size: var(--fs-small); margin: 0; }
.program dl { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; font-size: var(--fs-small); border-radius: var(--r-md); background: rgba(255,255,255,.04); overflow: hidden; }
.program dt, .program dd { padding: 10px 14px; }
.program dt { color: var(--label-2); }
.program dd { margin: 0; font-weight: 500; text-align: right; }
.program dt:not(:first-of-type), .program dt:not(:first-of-type) + dd { border-top: 1px solid var(--separator); }
@media (min-width: 900px) { .programs { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.case { display: grid; gap: var(--s2) var(--s5); padding: 22px 24px; align-items: baseline; }
.case__num { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 600; color: var(--ember-text); line-height: 1; }
.case h3 { font-size: 1.1875rem; }
.case p { color: var(--label-2); font-size: var(--fs-small); margin: 0; }
@media (min-width: 768px) { .case { grid-template-columns: 160px 1fr 1fr; padding: 26px 32px; } }

.related-title { font-size: var(--fs-h3); margin-bottom: var(--s4); }
.related { display: grid; gap: 12px; list-style: none; }
.related a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 20px 22px; border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: transform 500ms var(--spring), background-color var(--dur) var(--ease);
}
.related a::after {
  content: ""; grid-row: 1 / span 2; grid-column: 2; width: 9px; height: 9px;
  border-right: 2px solid var(--label-3); border-top: 2px solid var(--label-3); transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.related a:hover { background: var(--surface-hi); transform: translateY(-2px); }
.related a:hover::after { transform: translateX(3px) rotate(45deg); }
.related a:active { transform: scale(.98); }
.related strong { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--label); }
.related span { color: var(--label-2); font-size: var(--fs-small); }
@media (min-width: 900px) { .related { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ==========================================================================
   Trang pháp lý: mục lục kiểu danh sách nhóm + cột đọc
   ========================================================================== */
.legal-hero h1 { max-width: none; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.meta-chips li { font-size: var(--fs-foot); color: var(--label-2); padding: 6px 14px; border-radius: 999px; background: var(--fill); box-shadow: var(--platter-rim); }
.summary { display: grid; gap: 12px; list-style: none; }
.summary li { padding: 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--platter-rim); }
.summary li::before {
  content: ""; display: block; width: 28px; height: 28px; border-radius: 50%; margin-bottom: var(--s3);
  background: rgba(147,179,242,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393b3f2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.summary h3 { font-size: 1.125rem; margin-bottom: 6px; }
.summary p { color: var(--label-2); font-size: var(--fs-small); line-height: 1.6; }
@media (min-width: 640px) { .summary { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .summary { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.legal { display: grid; gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--section-y); align-items: start; }
@media (min-width: 1024px) { .legal { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s7); } }
.toc { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--platter-rim); overflow: hidden; }
@media (min-width: 1024px) { .toc { position: sticky; top: calc(var(--header-h) + var(--header-top) + 20px); max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; } }
.toc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  min-height: 52px; padding: 14px 20px; font: 600 var(--fs-foot)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--label-3); border-top: 2px solid var(--label-3); transform: rotate(135deg); transition: transform 450ms var(--spring); }
.toc[open] summary::after { transform: rotate(-45deg); }
@media (min-width: 1024px) { .toc summary { pointer-events: none; } .toc summary::after { display: none; } }
.toc ol { list-style: none; counter-reset: toc; padding: 0 8px 8px; }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 9px 12px; border-radius: 12px;
  font-size: var(--fs-small); line-height: 1.45; color: var(--label-2); text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.toc a::before { content: counter(toc); color: var(--label-3); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--label); background: rgba(255,255,255,.05); }
.toc a.is-active { color: var(--label); background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.toc a.is-active::before { color: var(--tint-text); }

.legal__body { counter-reset: sec; max-width: 760px; }
.legal__section { counter-increment: sec; padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--separator); }
.legal__section:last-child { border-bottom: 0; margin-bottom: 0; }
.legal__section h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); margin-bottom: var(--s4); }
.legal__section h2::before {
  content: counter(sec); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  transform: translateY(-4px); font: 600 0.875rem/1 var(--font-body); color: #fff; background: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.legal__section p, .legal__section li, .legal__section dd { color: rgba(232,237,250,.82); }
.legal__section ul:not(.contact-list) { display: grid; gap: 10px; margin: 0 0 var(--s3); padding-left: 0; list-style: none; }
.legal__section ul:not(.contact-list) > li { position: relative; padding-left: 22px; }
.legal__section ul:not(.contact-list) > li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--tint-text); }
.legal__section strong { color: var(--label); font-weight: 600; }
.legal__section .contact-list { margin: var(--s4) 0; }
.callout { position: relative; margin: var(--s4) 0; padding: 18px 20px 18px 54px; border-radius: var(--r-md); background: rgba(147,179,242,.08); box-shadow: inset 0 0 0 1px rgba(147,179,242,.18); }
.callout::before {
  content: "i"; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 italic 0.8125rem/1 var(--font-display); color: #0b1430; background: var(--tint-text);
}
.legal__related { margin-top: var(--s4); }

.data-table { margin: var(--s4) 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--platter-rim); overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.55; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 14px 18px; }
.data-table thead th { font: 600 var(--fs-foot)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--label-3); border-bottom: 1px solid var(--separator); }
.data-table tbody tr + tr > * { border-top: 1px solid var(--separator); }
.data-table tbody th { font-weight: 600; color: var(--label); min-width: 150px; }
.data-table td { color: var(--label-2); }
.data-table td:last-child { min-width: 150px; }
@media (max-width: 719px) {
  .data-table { overflow: visible; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table tbody th { padding-bottom: 4px; }
  .data-table td { padding-top: 4px; padding-bottom: 4px; }
  .data-table td:last-child { padding-bottom: 16px; font-size: var(--fs-foot); color: var(--label-3); }
  .data-table tbody tr + tr > * { border-top: 0; }
  .data-table tbody tr + tr { border-top: 1px solid var(--separator); }
}

.terms-list { display: grid; margin: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--platter-rim); overflow: hidden; }
.terms-list dt { padding: 16px 20px 2px; font-weight: 600; color: var(--label); }
.terms-list dd { margin: 0; padding: 0 20px 16px; font-size: var(--fs-small); }
.terms-list dd + dt { border-top: 1px solid var(--separator); }
@media (min-width: 720px) {
  .terms-list { grid-template-columns: 180px 1fr; }
  .terms-list dt { padding: 16px 20px; }
  .terms-list dd { padding: 16px 20px 16px 0; }
  .terms-list dd + dt, .terms-list dd + dt + dd { border-top: 1px solid var(--separator); }
}

/* ==========================================================================
   Chuyển ngôn ngữ: nút kính nhỏ + menu ngữ cảnh kiểu iOS
   ========================================================================== */
.lang { position: relative; flex: none; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 var(--fs-foot)/1 var(--font-body); letter-spacing: .04em; color: var(--label-2); background: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 450ms var(--spring);
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { color: var(--label); background: rgba(255,255,255,.1); }
.lang__btn:active { transform: scale(.94); }
.lang__btn svg { width: 18px; height: 18px; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 200px; padding: 6px; list-style: none; border-radius: 20px;
  background: linear-gradient(180deg, rgba(48,56,80,.86), rgba(26,31,48,.92));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), 0 24px 48px -16px rgba(0,0,0,.8);
  transform-origin: top right; transform: scale(.6); opacity: 0; visibility: hidden;
  transition: transform 420ms var(--spring), opacity 200ms var(--ease), visibility 0s linear 420ms;
}
.lang.is-open .lang__menu { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 14px; border-radius: 14px;
  font-size: var(--fs-small); font-weight: 500; color: var(--label); text-decoration: none;
}
.lang__menu a:hover { background: rgba(255,255,255,.1); }
.lang__menu a[aria-current]::after {
  content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393b3f2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lang__menu small { color: var(--label-3); font-size: var(--fs-foot); font-weight: 500; }
@media (max-width: 1023px) {
  .lang { margin-left: auto; }
  .nav-toggle { margin-left: 4px; }
}
@media (min-width: 1024px) { .lang { margin-left: -6px; } }

/* ==========================================================================
   Tiếng Nhật: phông Noto cho chữ Nhật, chữ Latin vẫn dùng phông thương hiệu
   ========================================================================== */
:root:lang(ja) {
  --font-display: "Source Serif 4", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-body: "Be Vietnam Pro", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
:lang(ja) body { line-height: 1.85; line-break: strict; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing: 0.01em; word-break: auto-phrase; line-height: 1.35; }
:lang(ja) h1 { line-height: 1.3; }
:lang(ja) .hero__copy h1 { max-width: 13em; font-size: clamp(2.125rem, 1.4rem + 3vw, 3.75rem); }
:lang(ja) .page-hero h1 { max-width: 16em; font-size: clamp(2rem, 1.35rem + 2.6vw, 3.375rem); }
:lang(ja) h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem); }
:lang(ja) .lead, :lang(ja) p, :lang(ja) li { word-break: auto-phrase; overflow-wrap: anywhere; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { overflow-wrap: anywhere; }
:lang(ja) .statement h3, :lang(ja) .service__name, :lang(ja) .values h3 span { letter-spacing: .02em; }
:lang(ja) .footer-col h2 { font-size: var(--fs-foot); line-height: 1.4; letter-spacing: .06em; }
@media (min-width: 720px) { :lang(ja) .terms-list { grid-template-columns: 220px 1fr; } }

/* ==========================================================================
   Thẻ dự án mở được + modal chi tiết
   ========================================================================== */
/* Giữ sẵn chỗ cho thanh cuộn: khoá cuộn khi mở modal không làm trang co giãn */
html { scrollbar-gutter: stable; }
html.modal-open { overflow: hidden; }

.project, .project__media { position: relative; }
.project:has(.project__open):active { transform: scale(.985); transition: transform 120ms var(--ease); }
.project__open {
  position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: inherit;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.project__open:focus-visible { outline: 2px solid var(--tint-text); outline-offset: 3px; }
.project__plus {
  position: absolute; z-index: 1; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(14,19,32,.48); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), 0 8px 20px -8px rgba(0,0,0,.6);
  transition: transform 520ms var(--spring), background-color var(--dur) var(--ease);
}
.project__plus svg { width: 18px; height: 18px; }
.project:hover .project__plus, .project__open:focus-visible + .project__media .project__plus { transform: rotate(90deg); background: var(--tint); }
@media (max-width: 639px) { .project__plus { top: 10px; right: 10px; width: 36px; height: 36px; } }

.modal {
  width: min(960px, calc(100% - 48px)); max-width: none; max-height: min(88vh, 900px);
  margin: auto; padding: 0; border: 0; overflow: visible; background: transparent; color: var(--label);
}
.modal::backdrop { background: rgba(3,5,10,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open]::backdrop { animation: modalFade 320ms var(--ease); }
.modal.is-closing::backdrop { animation: modalFade 260ms var(--ease) reverse forwards; }
.modal__sheet {
  display: flex; flex-direction: column; max-height: inherit; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(38,46,70,.94), rgba(14,18,30,.97));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), 0 40px 90px -24px rgba(0,0,0,.85);
}
.modal[open] .modal__sheet { animation: sheetIn 560ms var(--spring); }
.modal.is-closing .modal__sheet { animation: sheetOut 260ms var(--ease) forwards; }
@keyframes modalFade { from { opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes sheetOut { to { opacity: 0; transform: translateY(16px) scale(.98); } }

.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: 24px 24px 18px 32px; border-bottom: 1px solid var(--separator); }
.modal__eyebrow { font: 600 var(--fs-foot)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--tint-text); margin-bottom: 6px; }
.modal__head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.2; }
.modal__close {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--label); background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: background-color var(--dur) var(--ease), transform 450ms var(--spring);
}
.modal__close:hover { background: rgba(255,255,255,.18); }
.modal__close:active { transform: scale(.92); }
.modal__close svg { width: 18px; height: 18px; }
.modal__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 28px 32px 36px; }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--separator); background: rgba(10,13,22,.4); }
.modal__foot .btn svg { width: 18px; height: 18px; }
.modal__foot .btn:hover svg { transform: none; }

.modal__intro { display: grid; gap: var(--s4); }
.modal__media { aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.modal__intro .lead { font-size: var(--fs-body); margin-bottom: var(--s3); }
@media (min-width: 820px) { .modal__intro { grid-template-columns: 5fr 6fr; gap: var(--s5); align-items: start; } }

.m-facts { margin: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--platter-rim); overflow: hidden; }
.m-facts div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 11px 16px; font-size: var(--fs-small); line-height: 1.5; }
.m-facts div + div { border-top: 1px solid var(--separator); }
.m-facts dt { color: var(--label-3); }
.m-facts dd { margin: 0; color: var(--label); }

.m-section { margin-top: var(--s5); }
.m-section h3 { font-size: 1.25rem; margin-bottom: var(--s3); }
.m-list { list-style: none; display: grid; gap: 8px; }
.m-list li { position: relative; padding-left: 22px; color: var(--label-2); font-size: var(--fs-small); line-height: 1.6; }
.m-list li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
@media (min-width: 820px) { .m-list { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }

.m-steps { list-style: none; counter-reset: mstep; display: grid; gap: 0; }
.m-steps li { counter-increment: mstep; position: relative; padding: 0 0 16px 46px; font-size: var(--fs-small); line-height: 1.55; color: var(--label-2); min-height: 44px; }
.m-steps li::before {
  content: counter(mstep); position: absolute; left: 0; top: -3px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 600 0.8125rem/1 var(--font-body); color: #fff; background: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.m-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 30px; bottom: 0; width: 1px; background: rgba(147,179,242,.35); }
.m-steps li:last-child { padding-bottom: 0; }

.m-chips { margin-top: 0; }
.m-grid { list-style: none; display: grid; gap: 10px; }
.m-grid li { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--platter-rim); }
.m-grid strong { font-weight: 600; color: var(--label); }
.m-grid span { font-size: var(--fs-small); color: var(--label-2); line-height: 1.55; }
@media (min-width: 640px) { .m-grid { grid-template-columns: 1fr 1fr; } }

.m-values { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.m-values > div { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--platter-rim); }
.m-values h4 { font: 600 var(--fs-foot)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--tint-text); margin: 0 0 10px; }
.m-values ul { list-style: none; display: grid; gap: 6px; }
.m-values li { position: relative; padding-left: 22px; font-size: var(--fs-small); line-height: 1.5; color: var(--label); }
.m-values li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393b3f2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Điện thoại: modal thành sheet trượt lên từ đáy, nút bấm nằm trong vùng ngón cái */
@media (max-width: 639px) {
  .modal { width: 100%; max-height: 92dvh; margin: auto 0 0; }
  .modal__sheet { border-radius: 26px 26px 0 0; }
  .modal[open] .modal__sheet { animation: sheetUp 520ms var(--spring); }
  .modal.is-closing .modal__sheet { animation: sheetDown 260ms var(--ease) forwards; }
  .modal__head { padding: 18px 16px 14px 20px; }
  .modal__scroll { padding: 20px 20px 28px; }
  .modal__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal__foot .btn { flex: 1 1 100%; }
  .modal__foot .btn--ghost { display: none; }
  .m-facts div { grid-template-columns: 1fr; gap: 2px; }
}
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetDown { to { transform: translateY(100%); } }

/* ---------- Trình duyệt không hỗ trợ backdrop-filter: dùng nền đặc ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__inner, .segmented, .mobile-cta, .form, .media-chip, .leader figcaption, .nav-toggle { background: rgba(28,34,52,.96); }
}
/* Người dùng bật "giảm trong suốt" (hỗ trợ ở một số trình duyệt) */
@media (prefers-reduced-transparency: reduce) {
  .site-header__inner, .segmented, .mobile-cta, .form, .media-chip, .leader figcaption, .nav-toggle, .mobile-menu,
  .btn--ghost, .btn--outline-light, .cta-band__inner.container { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1a2030; }
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js .hero-in, .js .reveal, .js .stagger > * { opacity: 1; transform: none; }
  .js .reveal img { transform: none; }
}

/* Trình xem PDF trong trang */
.pdfv { width: min(1120px, 96vw); height: 94dvh; max-width: none; max-height: none; padding: 0; border: 1px solid var(--separator); border-radius: 22px; background: #0b0e18; color: var(--label); overflow: hidden; }
.pdfv[open] { display: flex; flex-direction: column; }
.pdfv::backdrop { background: rgba(4,6,12,.72); backdrop-filter: blur(8px); }
.pdfv__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--separator); }
.pdfv__title { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdfv__close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; color: var(--label); background: rgba(255,255,255,.1); }
.pdfv__close:hover { background: rgba(255,255,255,.18); }
.pdfv__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.pdfv__status { text-align: center; color: var(--label-2, #aab); margin: 40px 0; }
.pdfv__pages { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; }
.pdfv__page { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.pdfv__page canvas { display: block; }
@media (max-width: 640px) {
  .pdfv { width: 100vw; height: 100dvh; border-radius: 0; }
  .pdfv__ext { display: none; }
  .pdfv__body { padding: 8px; }
}