/* ==========================================================================
   KBW Digital — Design System
   1. Tokens
   2. Reset & base
   3. Layout primitives
   4. Typography
   5. Buttons & links
   6. Header / navigation
   7. Hero
   8. Proof strip
   9. Problem ↔ Outcome
   10. Solutions (3 layers)
   11. Case studies
   12. Process
   13. Why KBW
   14. FAQ
   15. CTA & form
   16. Footer
   17. Motion & utilities
   18. Responsive
   ========================================================================== */

/* ========================================================================== 
   1. TOKENS
   ========================================================================== */

:root {
  /* Brand palette */
  --ink-900: #070d18;
  --ink-800: #0a1424;
  --ink-700: #101d33;
  --ink-600: #1a2b47;
  --ink-500: #2c3e5c;

  --slate-600: #4a5a73;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f7f9fc;

  --blue-600: #1d4ed8;
  --blue-500: #2f6bff;
  --blue-400: #5b8bff;
  --blue-100: #e6edff;

  --mint-600: #00a88a;
  --mint-500: #00d3a7;
  --mint-100: #dcfaf2;

  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-100: #fef3c7;

  --rose-500: #e5484d;
  --rose-100: #ffe8e8;

  /* Semantic */
  --bg: #ffffff;
  --bg-muted: var(--slate-50);
  --bg-dark: var(--ink-800);
  --text: var(--ink-800);
  --text-soft: var(--slate-600);
  --text-faint: var(--slate-500);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --accent: var(--blue-500);
  --accent-strong: var(--blue-600);

  /* Type scale — fluid */
  /* Thang chữ dùng chung cho toàn site: trang chủ và các trang dịch vụ
     cùng một mức để không bị tụt cấp khi chuyển trang. */
  /* Hero trang chủ lớn hơn H2 một bậc vì đây là câu định vị thương hiệu */
  --fs-display: clamp(1.8rem, 1.05rem + 2.4vw, 3rem);
  --fs-h2: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.25vw, 1.175rem);
  --fs-lede: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.78125rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --section-y: clamp(4rem, 2.5rem + 5.5vw, 7.5rem);

  /* Shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(10, 20, 36, 0.05);
  --shadow-sm: 0 2px 8px rgba(10, 20, 36, 0.06);
  --shadow: 0 8px 24px -6px rgba(10, 20, 36, 0.12), 0 2px 6px rgba(10, 20, 36, 0.05);
  --shadow-lg: 0 24px 56px -16px rgba(10, 20, 36, 0.22), 0 6px 16px rgba(10, 20, 36, 0.06);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 260ms;

  /* Layout */
  --container: 1300px;
  --container-narrow: 780px;
  --header-h: 74px;
}

/* ========================================================================== 
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent-strong);
  text-decoration-color: color-mix(in srgb, var(--accent-strong) 35%, transparent);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--ink-800);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 999;
  transform: translate(-50%, -140%);
  padding: 0.75rem 1.25rem;
  background: var(--ink-800);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* ========================================================================== 
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 0.5rem + 2.5vw, 2.5rem);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--muted {
  background: var(--bg-muted);
}

.section--dark {
  background: var(--bg-dark);
  color: #fff;
  --text: #fff;
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-faint: rgba(255, 255, 255, 0.55);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
}

/* Nền sáng cho khu trưng bày dự án: thoáng, hiện đại và vẫn có chiều sâu
   nhờ các vầng sáng thương hiệu cùng lưới mờ rất nhẹ. */
.section--showcase {
  color: var(--text);
  background:
    radial-gradient(85% 72% at 0% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 62%),
    radial-gradient(75% 64% at 100% 100%, rgba(0, 184, 148, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #edf4ff 52%, #ffffff 100%);
  overflow: hidden;
}

/* Nền cho khối "Vì sao KBW": nghiêng về sắc mint để tách khỏi nền trung tính
   của khối quy trình phía trên và nền trắng của FAQ phía dưới. */
.section--tint {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(0, 184, 148, 0.12) 0%, transparent 60%),
    radial-gradient(60% 55% at 0% 100%, rgba(37, 99, 235, 0.08) 0%, transparent 62%),
    linear-gradient(180deg, #f4fbf8 0%, #ffffff 100%);
}

.section--tight {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
}

/* ========================================================================== 
   4. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}

.section--dark .eyebrow {
  color: var(--mint-500);
}

/* Biến thể dạng viên thuốc: dùng khi eyebrow đứng giữa và cần nổi hơn kiểu
   gạch ngang mặc định. Bỏ gạch ngang vì trong viên nó thành nhiễu. */
.eyebrow--pill {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--blue-100);
  color: var(--blue-600);
  letter-spacing: 0.12em;
}

.eyebrow--pill::before {
  content: none;
}

.section--dark .eyebrow--pill {
  background: rgba(0, 211, 167, 0.14);
  color: var(--mint-500);
}

.h2 {
  font-size: var(--fs-h2);
}

.h3 {
  font-size: var(--fs-h3);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text-soft);
  margin-top: var(--space-4);
  text-wrap: pretty;
}

.small {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.xs {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ========================================================================== 
   5. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--ink-800);
  --btn-fg: #ffffff;
  --btn-bd: var(--ink-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn--primary {
  --btn-bg: var(--blue-500);
  --btn-bd: var(--blue-500);
}

.btn--primary:hover {
  --btn-bg: var(--blue-600);
  --btn-bd: var(--blue-600);
  box-shadow: 0 12px 28px -10px rgba(47, 107, 255, 0.6);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
}

.btn--ghost:hover {
  --btn-bd: var(--ink-800);
  --btn-bg: rgba(10, 20, 36, 0.03);
}

.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-bd: rgba(255, 255, 255, 0.45);
}

.btn--light {
  --btn-bg: #ffffff;
  --btn-fg: var(--ink-800);
  --btn-bd: #ffffff;
}

.btn--sm {
  padding: 0.65rem 1.15rem;
  font-size: var(--fs-xs);
}

.btn--lg {
  padding: 1.05rem 1.9rem;
  font-size: var(--fs-body);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-strong);
}

.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

.section--dark .link-arrow {
  color: var(--mint-500);
}

/* ========================================================================== 
   6. HEADER
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-top: 10px;
  background: transparent;
  transition: background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
    padding-top var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 0.4rem + 0.8vw, 1.5rem);
  width: 100%;
}

.header.is-stuck {
  padding-top: 0;
}

.header.is-stuck,
.header--light {
  background: #fff;
  border-bottom-color: var(--slate-200);
  box-shadow: var(--shadow-xs);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
  flex: none;
}

.logo__mark {
  width: 38px;
  height: 38px;
  flex: none;
}

.logo__img {
  display: block;
  max-height: 55px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Dual logo: Logo light ở đầu trang (nền tối), Logo chính ở header is-stuck (nền sáng) */
.header .logo__img--main,
.header .logo__img--dark {
  display: none;
}

.header .logo__img--light {
  display: block;
}

.header.is-stuck .logo__img--light,
.header--light .logo__img--light {
  display: none;
}

.header.is-stuck .logo__img--main,
.header.is-stuck .logo__img--dark,
.header--light .logo__img--main,
.header--light .logo__img--dark {
  display: block;
}

.footer .logo__img--main,
.footer .logo__img--dark {
  display: none;
}

.footer .logo__img--light {
  display: block;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo__name {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.logo__sub {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.62;
}

.header.is-stuck .logo,
.header--light .logo {
  color: var(--ink-800);
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.2rem, 0.1rem + 0.25vw, 0.45rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list > li,
.nav__list > .nav__item,
.nav__list > .nav__group {
  display: inline-flex;
  align-items: center;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.nav li::before,
.nav li::marker {
  display: none !important;
  content: none !important;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem clamp(0.45rem, 0.28rem + 0.3vw, 0.75rem);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem; /* 15px thanh thoát */
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap; /* Chống tuyệt đối việc rớt chữ hoặc icon xuống dòng */
  text-decoration: none;
  /* Trên hero nền tối: chữ trắng hẳn cho dễ đọc */
  color: #ffffff;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Nav submenu (dịch vụ) — mở bằng hover hoặc focus, không cần JS */
.nav__group {
  position: relative;
}

.nav__link--parent {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__chevron {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
  opacity: 0.75;
  transition: transform var(--dur) var(--ease);
}

.nav__group:hover .nav__chevron,
.nav__group:focus-within .nav__chevron {
  transform: rotate(90deg) translateX(2px);
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 250px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

/* Vùng đệm giữ submenu không bị đóng khi con trỏ đi qua khoảng trống */
.nav__submenu::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto 0;
  height: 12px;
}

.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__submenu li,
.nav__submenu .nav__item {
  display: block !important;
  width: 100%;
}

.nav__sublink {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav__sublink:hover,
.nav__sublink:focus-visible {
  color: var(--accent-strong);
  background: var(--blue-100);
}

/* Khi header dính (đã cuộn) hoặc trang nền sáng: chữ đậm hơn hẳn */
.header.is-stuck .nav__link,
.header--light .nav__link {
  color: var(--ink-700);
  font-weight: 600;
}

.header.is-stuck .nav__link:hover,
.header.is-stuck .nav__link.is-active,
.header--light .nav__link:hover,
.header--light .nav__link.is-active {
  color: var(--ink-800);
  background: var(--slate-100);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.header__phone:hover {
  color: #fff;
}

.header.is-stuck .header__phone,
.header--light .header__phone {
  color: var(--ink-700);
}

.header .btn--header {
  --btn-bg: #ffffff;
  --btn-fg: var(--ink-800);
  --btn-bd: #ffffff;
  font-size: 14px;
}

.header.is-stuck .btn--header,
.header--light .btn--header {
  --btn-bg: var(--blue-500);
  --btn-fg: #fff;
  --btn-bd: var(--blue-500);
}

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #fff;
}

.header.is-stuck .burger,
.header--light .burger {
  background: var(--slate-100);
  border-color: var(--slate-200);
  color: var(--ink-800);
}

.burger__bars {
  position: relative;
  width: 18px;
  height: 12px;
}

.burger__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5px; }
.burger__bars span:nth-child(3) { top: 10px; }

.burger[aria-expanded="true"] .burger__bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bars span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--ink-900);
  padding: var(--space-6) 0 var(--space-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-6);
}

.drawer__item {
  list-style: none;
  position: relative;
}

/* Top-level menu link */
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: color var(--dur) var(--ease);
}

.drawer__link:hover,
.drawer__link:focus-visible {
  color: var(--mint-500);
}

.drawer__link[aria-current="page"] {
  color: var(--mint-500);
}

.drawer__link-label {
  flex: 1;
}

/* Parent menu item containing submenu */
.drawer__item--has-children {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: padding-bottom var(--dur) var(--ease);
}

.drawer__item--has-children.is-open {
  padding-bottom: 0.5rem;
}

.drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.drawer__row .drawer__link {
  flex: 1;
  border-bottom: none;
}

/* Dropdown toggle button */
.drawer__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  height: 48px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mint-500);
  font-size: 1.05rem;
  font-family: inherit;
  transition: color var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.drawer__toggle:hover,
.drawer__toggle:focus-visible {
  color: #fff;
}

.drawer__toggle-arrow {
  display: inline-block;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: center;
  line-height: 1;
}

/* Rotate arrow from right (→) to down (↓) when open */
.drawer__item--has-children.is-open .drawer__toggle-arrow {
  transform: rotate(90deg);
}

/* Subnav container: hidden by default, animated on open */
.drawer__subnav {
  display: none;
  list-style: none;
  margin: 0.15rem 0 0.5rem 0.5rem;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 2px solid rgba(47, 107, 255, 0.45);
  flex-direction: column;
  gap: 0.35rem;
}

.drawer__item--has-children.is-open .drawer__subnav {
  display: flex;
  animation: drawerSubnavIn 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawerSubnavIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer__item--sub {
  list-style: none;
}

/* Sub-level item link: visually distinct, indented, and nested */
.drawer__link.drawer__link--sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  transition: all var(--dur) var(--ease);
}

.drawer__link.drawer__link--sub:hover,
.drawer__link.drawer__link--sub:active {
  color: #fff;
  background: rgba(47, 107, 255, 0.15);
  padding-left: 0.95rem;
}

.drawer__link.drawer__link--sub[aria-current="page"] {
  color: #fff;
  background: rgba(47, 107, 255, 0.2);
  font-weight: 600;
}

.drawer__sub-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.55rem;
  color: var(--mint-500);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
}

.drawer__meta {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
}

.drawer__meta a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* ========================================================================== 
   7. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  padding-bottom: clamp(3rem, 2.5rem + 5vw, 3rem);
  background: radial-gradient(120% 100% at 78% 0%, #16305c 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, #0d2b48 0%, transparent 60%),
    linear-gradient(168deg, var(--ink-900) 0%, var(--ink-700) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Lưới nền mờ, tĩnh */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(85% 70% at 50% 30%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(85% 70% at 50% 30%, #000 0%, transparent 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   7b. HERO — ÁNH SÁNG TRÔI & CHẤM SÁNG NHIỀU LỚP
   Chỉ animate transform/opacity nên toàn bộ chạy trên compositor,
   không gây reflow/repaint. Xem partials/hero-visual.php.
   ------------------------------------------------------------------ */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Hero ra khỏi tầm mắt → dừng chuyển động (JS gắn class .is-idle) để không
   tốn pin khi người dùng đang đọc phần dưới. */
.hero.is-idle .hero__bg * {
  animation-play-state: paused;
}

/* --- Ánh sáng trôi --- */

/*
 * Cố ý KHÔNG dùng filter: blur(). Vầng sáng rộng gần 1000px, blur nó buộc
 * trình duyệt rasterise lại một layer khổng lồ. Thay vào đó dùng gradient
 * NHIỀU CHẶNG mô phỏng độ giảm gaussian — vừa mượt như blur, vừa không tốn gì,
 * và animation chỉ còn translate/opacity nên chạy hẳn trên compositor.
 * Nhiều chặng cũng là cách chống banding trên màn 8-bit.
 */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Vầng chính: phía trên, sau tiêu đề */
.hero__glow--blue {
  left: 50%;
  top: -42%;
  width: 58rem;
  height: 58rem;
  margin-left: -29rem;
  background: radial-gradient(circle,
    rgba(47, 107, 255, 0.20) 0%,
    rgba(47, 107, 255, 0.16) 22%,
    rgba(47, 107, 255, 0.10) 40%,
    rgba(47, 107, 255, 0.05) 56%,
    rgba(47, 107, 255, 0.02) 72%,
    transparent 88%);
  animation: glow-drift-a 38s var(--ease) infinite alternate;
}

/* Vầng dưới phải */
.hero__glow--mint {
  left: 50%;
  bottom: -46%;
  width: 50rem;
  height: 50rem;
  margin-left: -14rem;
  background: radial-gradient(circle,
    rgba(0, 211, 167, 0.15) 0%,
    rgba(0, 211, 167, 0.12) 22%,
    rgba(0, 211, 167, 0.075) 40%,
    rgba(0, 211, 167, 0.04) 56%,
    rgba(0, 211, 167, 0.015) 72%,
    transparent 88%);
  animation: glow-drift-b 46s var(--ease) infinite alternate;
}

/* Vầng rìa trái, thấp — chỉ để tạo bề dày không gian */
.hero__glow--violet {
  left: -10%;
  top: 30%;
  width: 44rem;
  height: 44rem;
  background: radial-gradient(circle,
    rgba(99, 102, 241, 0.12) 0%,
    rgba(99, 102, 241, 0.095) 22%,
    rgba(99, 102, 241, 0.06) 40%,
    rgba(99, 102, 241, 0.03) 56%,
    rgba(99, 102, 241, 0.012) 72%,
    transparent 88%);
  animation: glow-drift-c 52s var(--ease) infinite alternate;
}

/* Biên độ nhỏ tính theo % kích thước của chính vầng sáng: 4% của 928px là
   khoảng 37px. Trải trên 38 giây thì từng khung gần như không thấy dịch,
   nhưng nhìn lại sau một lúc thì ánh sáng đã ở chỗ khác. */
@keyframes glow-drift-a {
  from { transform: translate3d(0, 0, 0); opacity: 0.7; }
  to   { transform: translate3d(-4%, -5%, 0); opacity: 1; }
}

@keyframes glow-drift-b {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(5%, 4%, 0); opacity: 0.65; }
}

@keyframes glow-drift-c {
  from { transform: translate3d(0, 0, 0); opacity: 0.75; }
  to   { transform: translate3d(6%, -4%, 0); opacity: 1; }
}

.hero__particles {
  position: absolute;
  inset: 0;
}

/* Dùng currentColor cho cả nền và quầng sáng → đổi tông chỉ cần đặt color. */
.hero__particle {
  position: absolute;
  left: var(--p-x, 50%);
  bottom: var(--p-from, -14px);
  width: var(--p-size);
  height: var(--p-size);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 var(--p-blur) currentColor;
  opacity: 0;
  will-change: transform, opacity;
  animation: particle-rise var(--p-time, 24s) linear var(--p-delay, 0s) infinite;
}

/* Ba lớp chiều sâu theo quy tắc thị sai: càng xa thì càng nhỏ, càng mờ,
   dịch ngang càng ít. Quãng bay và thời lượng đặt ở dữ liệu từng chấm —
   lớp xa bay ngắn mà lâu, lớp gần bay dài mà nhanh. */
.hero__particle[data-depth="far"] {
  --p-size: 1px;
  --p-blur: 0;
  --p-drift: 4px;
  --p-opacity: 0.16;
}

.hero__particle[data-depth="mid"] {
  --p-size: 2px;
  --p-blur: 6px;
  --p-drift: 14px;
  --p-opacity: 0.28;
}

.hero__particle[data-depth="near"] {
  --p-size: 3px;
  --p-blur: 10px;
  --p-drift: 26px;
  --p-opacity: 0.42;
}

.hero__particle[data-tone="white"] { color: rgba(255, 255, 255, 0.9); }
.hero__particle[data-tone="mint"]  { color: var(--mint-500); }
.hero__particle[data-tone="blue"]  { color: var(--blue-400); }

@keyframes particle-rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  14%  { opacity: var(--p-opacity); }
  82%  { opacity: var(--p-opacity); }
  100% { opacity: 0; transform: translate3d(var(--p-drift), calc(var(--p-rise) * -1), 0); }
}

/* Hero một cột, căn giữa. Container mặc định rộng 1200px; ở hero ta nới thêm
   để tiêu đề có chỗ thở, vì đây là khối duy nhất trên màn hình đầu. */
.hero__inner {
  max-width: 1320px;
}

.hero__content {
  max-width: 68rem;
  margin-inline: auto;
  text-align: center;
}

/* Không đặt max-width: bề rộng do .hero__content quyết định. Dòng 'accent'
   là block nên H1 luôn gọn 2 dòng, không cần giới hạn theo ch. */
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
  color: #fff;
}

.hero h1 .accent {
  display: block;
  max-width: 800px;
  margin-inline: auto;
  background: linear-gradient(96deg, #7ea6ff 0%, var(--mint-500) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--space-5);
  margin-inline: auto;
  max-width: 61ch;
  text-wrap: pretty;
}

.hero__ctas {
  margin-top: var(--space-7);
  justify-content: center;
}

/* ========================================================================== 
   8. PROOF STRIP
   ========================================================================== */

/* Nền TIẾP NỐI hero thay vì tụt xuống tối hơn.
   Hero có gradient kết thúc ở #101d33 (ink-700) tại mép dưới; nếu .proof dùng
   ink-900 phẳng thì độ sáng tụt còn khoảng một nửa → tạo một bậc thang không
   chủ ý, dải này trông như thanh đen chèn giữa hero và phần nội dung trắng.
   Bắt đầu đúng ở ink-700 rồi tối dần xuống ink-800 để chuyển sang phần trắng
   bên dưới có chủ đích. Bỏ border-top vì tông đã khớp, không cần đường ghép. */
.proof {
  position: relative;
  background: linear-gradient(180deg, var(--ink-700) 0%, #0c1526 55%, var(--ink-800) 100%);
  color: #fff;
  padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* Vầng sáng rất nhẹ phía sau nhóm số, để dải không phẳng chết. Cùng ngôn ngữ
   với hero nhưng mờ hơn nhiều — đây là bằng chứng, không phải sân khấu. */
.proof::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60%;
  width: 46rem;
  height: 46rem;
  margin-left: -23rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(47, 107, 255, 0.10) 0%,
    rgba(47, 107, 255, 0.06) 35%,
    rgba(47, 107, 255, 0.02) 62%,
    transparent 82%);
  pointer-events: none;
}

.proof__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.proof__stat {
  text-align: center;
  padding-inline: var(--space-2);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.proof__stat:first-child {
  border-left: 0;
}

/* Trước đây chữ nhạt dần xuống 62% ở chân số — chính con số là thứ cần nổi
   nhất mà lại bị làm mờ. Giữ hiệu ứng chuyển sắc nhưng đáy chỉ còn 88%. */
.proof__value {
  display: block;
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  background: linear-gradient(180deg, #fff 40%, rgba(255, 255, 255, 0.88) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Nền sáng hơn trước nên nhãn cần đậm thêm một chút để giữ độ tương phản. */
.proof__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   7c. LOGO KHÁCH HÀNG TRONG HERO — chạy ngang liên tục (marquee)
   Đặt trong hero, ngay dưới CTA, cùng nền tối nên đọc liền mạch với hero
   thay vì một khối trắng rời phía dưới.
   ------------------------------------------------------------------ */

.hero__logos {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero__logos-title {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: var(--space-5);
}

/* Viewport của marquee: che phần logo tràn ra hai bên, và làm mờ dần ở hai
   mép để logo "tan" vào nền tối thay vì bị cắt cụt — đúng tinh thần hero:
   không có mép cứng, không có gì để mắt bám chặt ngoài nội dung chính. */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  /* Mỗi nửa track giờ dài gấp 4 lần (lặp để tránh hụt khi cuộn), nên cùng
     một thời gian sẽ trôi nhanh hơn hẳn so với bản chỉ có 1 bộ logo/nửa.
     90s cho tốc độ đọc được tên từng công ty, không vội. */
  animation: marquee-scroll var(--marquee-dur, 90s) linear infinite;
}

/* Track gồm 2 NỬA giống nhau, cuộn đúng 50% chiều rộng track rồi lặp lại —
   vì nửa 2 là ảnh giống nửa 1, thời điểm nối không có khung hình nào bị
   giật hay nhảy. */
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Một "nửa" của track — chỉ để gom nhiều .marquee__set, không tự có gap. */
.marquee__group {
  display: flex;
  flex: none;
}

/*
 * Một bộ logo đầy đủ. Mỗi nửa track chứa NHIỀU set lặp lại (xem index.php)
 * để đảm bảo mỗi nửa luôn rộng hơn viewport — đây là điều kiện bắt buộc của
 * kỹ thuật marquee "cuộn 50%". Nếu một nửa hẹp hơn màn hình, nửa đó trôi hết
 * trước khi nửa sau lấp đầy, để lại một khoảng trống giữa track — đúng lỗi
 * đã xảy ra khi chỉ có 1 set (6 logo, ~900–1100px) trên màn hình rộng.
 */
.marquee__set {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(0.75rem, 0.5rem + 1.5vw, 2rem);
  padding-right: clamp(0.75rem, 0.5rem + 1.5vw, 2rem);
}

/* Dừng khi hover để đọc tên nếu cần — không bắt buộc nhưng lịch sự với
   người dùng dùng chuột. Trên mobile hover không tồn tại nên vô hại. */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem 0.55rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.logo-chip:hover {
  opacity: 1;
  filter: none;
  background: rgba(255, 255, 255, 0.08);
}

.logo-chip__mono {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--blue-500), var(--mint-500));
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.logo-chip__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

/* ========================================================================== 
   9. DỊCH VỤ
   Ưu tiên hình ảnh: khung hình lớn chiếm phần trên mỗi thẻ, chữ giữ tối thiểu
   (tên + một câu + ba từ khoá). Khung hình dùng aspect-ratio nên chiều cao ba
   thẻ luôn bằng nhau kể cả khi chưa có ảnh thật.
   ========================================================================== */

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}

.service {
  --service-accent: var(--blue-500);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* Ba màu nhấn để phân biệt dịch vụ mà không cần thêm chữ. */
.service[data-accent="blue"]  { --service-accent: var(--blue-500); }
.service[data-accent="amber"] { --service-accent: var(--amber-500); }
.service[data-accent="mint"]  { --service-accent: var(--mint-600); }

.service:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--service-accent) 35%, transparent);
}

/* --- Khung hình --- */

/* Vầng sáng trong khung hình lấy đúng màu nhấn của dịch vụ, nên ba khung
   phân biệt được với nhau ngay cả khi chưa có ảnh thật. */
.service__visual {
  position: relative;
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 70% 15%,
      color-mix(in srgb, var(--service-accent) 38%, transparent) 0%, transparent 60%),
    radial-gradient(90% 90% at 15% 95%, rgba(0, 211, 167, 0.18) 0%, transparent 62%),
    linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);
}

/* Lưới mờ trên khung hình, cùng ngôn ngữ với nền hero */
.service__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 100%);
  pointer-events: none;
}

.service__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.service:hover .service__visual img {
  transform: scale(1.04);
}

/* Icon lớn thay ảnh khi chưa có ảnh thật */
.service__glyph {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--service-accent) 65%, transparent));
  transition: transform 600ms var(--ease-out);
}

.service:hover .service__glyph {
  transform: scale(1.06);
}

.service__index {
  position: absolute;
  top: 0.85rem;
  left: 0.95rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* --- Phần chữ --- */

.service__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
}

.service__name {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.service__desc {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-soft);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  text-wrap: pretty;
}

.service__points {
  display: grid;
  gap: 0.7rem;
}

.service__points li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 0.65rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-700);
}

/* Icon tick lấy màu nhấn riêng của từng dịch vụ (xem data-accent bên dưới) */
.service__points svg {
  margin-top: 3px;
  flex: none;
  color: var(--service-accent);
}

.service__action {
  margin-top: auto;
  padding-top: var(--space-5);
  color: var(--service-accent);
}

.service__action:focus-visible {
  outline: 2px solid var(--service-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ========================================================================== 
   10. SOLUTIONS — 3 LAYERS
   ========================================================================== */

.layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}

.layer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  overflow: hidden;
}

.layer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--mint-500));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.layer:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-100);
}

.layer:hover::before {
  opacity: 1;
}

.layer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.layer__index {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--slate-300);
  font-variant-numeric: tabular-nums;
}

.layer__role {
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.layer__name {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.layer__summary {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  text-wrap: pretty;
}

.layer__items {
  display: grid;
  gap: 0.7rem;
  padding-block: var(--space-5);
  flex: 1;
}

.layer__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-soft);
}

.layer__item svg {
  margin-top: 4px;
  color: var(--mint-600);
  flex: none;
}

.layer__outcome {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.layer__outcome dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.layer__outcome dd {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
  background: var(--bg);
  text-align: center;
}

.inline-cta p {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

/* ========================================================================== 
   11. CASE STUDIES
   ========================================================================== */

/* Card dự án trên trang chủ. Dùng cùng thiết kế với trang project.php:
   ảnh preview, chip ngành, tên dự án, mô tả và chip dịch vụ ở chân card. */
.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.7rem + 1vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease);
}

.case:hover { border-color: var(--accent-strong); }

.case__img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border);
}

/* Khung giữ chỗ dạng cửa sổ trình duyệt */
.case__ph {
  display: block;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, var(--slate-100) 100%);
}

.case__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  background: var(--slate-100);
  border-bottom: 1px solid var(--border);
}

.case__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate-300);
}

.case__body {
  display: flex;
  gap: 10px;
  padding: 12px;
}

.case__block {
  flex: 0 0 42%;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
}

.case__lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  padding-top: 3px;
}

.case__lines i {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--slate-200);
}

.case__lines i:nth-child(2) { width: 80%; }
.case__lines i:nth-child(3) { width: 55%; }

.case__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4);
}

.case__tag {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--blue-100);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.case__name {
  margin: var(--space-3) 0 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-800);
  letter-spacing: -0.01em;
}

.case__desc {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* Chip dịch vụ luôn nằm sát chân card để các card thẳng hàng */
.case__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
  list-style: none;
}

.case__services li {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--slate-100);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* Link xem tất cả dự án */
.cases__more {
  margin: var(--space-5) 0 0;
  text-align: center;
}

.cases__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap var(--dur) var(--ease);
}

.cases__more a:hover {
  gap: 0.6rem;
  text-decoration: underline;
}

.cases__more svg { flex: none; }

/* ========================================================================== 
   12. PROCESS
   ========================================================================== */

/* Bốn bước dạng listing dọc: listing bên trái, khung ảnh bên phải. */
.process-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: start;
}

/* Mỗi bước là một thẻ trắng riêng, tách nhau bằng khoảng trống. */
.process-list {
  display: grid;
  gap: 2rem;
  list-style: none;
}

.pstep {
  --step-accent: var(--blue-500);
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  align-items: center;
  padding: clamp(1.1rem, 1rem + 0.5vw, 1.5rem) clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease);
}

.pstep[data-accent="amber"] { --step-accent: var(--amber-600); }
.pstep[data-accent="mint"]  { --step-accent: var(--mint-600); }

.pstep:hover {
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--step-accent) 40%, transparent);
  box-shadow: var(--shadow);
}

/* Cột mốc bên trái: số bước trong vòng tròn, nối nhau bằng đường dọc. */
.pstep__marker {
  position: relative;
  display: grid;
  place-items: center;
  align-self: start;
}

.pstep__num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--step-accent) 35%, var(--border));
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--step-accent);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.pstep:hover .pstep__num {
  background: var(--step-accent);
  border-color: var(--step-accent);
  color: #fff;
  transform: scale(1.06);
}

/* Đường nối dọc giữa các mốc, bỏ ở dòng cuối. */
/* Nét nối dọc chạy qua khoảng trống giữa hai thẻ liền nhau. */
.pstep::before {
  content: "";
  position: absolute;
  top: 100%;
  height: 2rem;
  left: calc(clamp(1rem, 0.85rem + 0.6vw, 1.4rem) + 1.625rem - 1px);
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--step-accent) 45%, transparent),
    var(--border));
}

.pstep:last-child::before {
  display: none;
}

.pstep__name {
  font-size: var(--fs-h4);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.pstep__desc {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* Khung ảnh để trống bên phải: dán dính khi cuộn để cân với danh sách bước. */
.process-figure {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
  background: var(--bg);
  box-shadow: var(--shadow-xs);
}

/* ========================================================================== 
   13. WHY KBW
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

.why-card {
  padding: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.why-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--ink-700), var(--ink-800));
  color: var(--mint-500);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.why-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.why-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* ========================================================================== 
   14. FAQ
   ========================================================================== */

.faq {
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.faq__item[open] {
  border-color: var(--blue-100);
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1.1rem 1.35rem;
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  color: var(--text);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--accent-strong);
}

.faq__sign {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--slate-400);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}

.faq__sign::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq__sign::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.faq__item[open] .faq__sign {
  color: var(--accent);
}

.faq__item[open] .faq__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Không giới hạn bề rộng theo ký tự: trước đây max-width 62ch làm dòng chữ
   ngắn hơn thẻ khá nhiều, nhìn như bị hụt so với khung. */
.faq__a {
  padding: 0 1.35rem 1.35rem;
  font-size: var(--fs-sm);
  line-height: 1.68;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* ========================================================================== 
   15. CTA & FORM
   ========================================================================== */

.cta-section {
  background: radial-gradient(100% 100% at 80% 0%, #16305c 0%, transparent 55%),
    linear-gradient(172deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta-section::before {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -30%;
  width: 40rem;
  height: 40rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 211, 167, 0.16) 0%, transparent 65%);
  pointer-events: none;
}

.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: start;
}

/* Ba điểm nhấn nhanh: chỉ để đọc, không còn là lựa chọn radio như trước. */
.highlights {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  list-style: none;
}

.highlight {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease-out);
}

.highlight:hover {
  border-color: rgba(0, 211, 167, 0.45);
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-2px);
}

.highlight__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: rgba(0, 211, 167, 0.14);
  color: var(--mint-500);
}

.highlight__name {
  display: block; /* span mặc định là inline → phải chuyển block để xuống dòng */
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 0.25rem;
}

.highlight__desc {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

/* Form card */
.form-card {
  padding: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-800);
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.55);
}

.form-card__title {
  font-size: var(--fs-h3);
  margin-bottom: 0.4rem;
}

.form-card__sub {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: var(--space-5);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
}

.field .req {
  color: var(--rose-500);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.12);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--rose-500);
  background: #fff;
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--rose-500);
  min-height: 0;
}

.form-foot {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.form-note {
  display: flex;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-faint);
}

.form-note svg {
  flex: none;
  margin-top: 2px;
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  gap: 0.6rem;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.form-status.is-visible {
  display: flex;
}

.form-status[data-state="success"] {
  background: var(--mint-100);
  color: #04725f;
}

.form-status[data-state="error"] {
  background: var(--rose-100);
  color: #a8151a;
}

.form-status svg {
  flex: none;
  margin-top: 2px;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================================================== 
   16. FOOTER
   ========================================================================== */

.footer {
  background:
    radial-gradient(70% 100% at 0% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-900) 0%, #040914 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.68);
  padding-block: clamp(3.5rem, 3rem + 2vw, 5rem) var(--space-6);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.footer__col--menu {
  grid-column: auto;
}

.footer__about {
  max-width: 40ch;
  margin-top: var(--space-4);
  line-height: 1.7;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.68);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.footer__social-link {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.footer__social-link:hover {
  color: #fff;
  border-color: rgba(0, 211, 167, 0.55);
  background: rgba(0, 211, 167, 0.08);
  transform: translateY(-2px);
}

.social-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.footer__col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: var(--space-4);
}

.footer__links {
  display: grid;
  gap: 0.45rem;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.footer__links a:hover {
  color: #fff;
  transform: translateX(3px);
}

.footer__contact {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  font-style: normal;
}

.footer__contact-link,
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.footer__contact-link {
  color: #fff;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.footer__contact-link:hover {
  color: var(--mint-500);
}

.footer__contact-link > svg,
.footer__contact-item > svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--mint-500);
}

.footer__contact-label,
.footer__contact-value {
  display: block;
}

.footer__contact-label {
  margin-bottom: 0.15rem;
  color: rgba(255, 255, 255, 0.42);
  font-size: var(--fs-xs);
}

.footer__contact-value {
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  line-height: 1.45;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.48);
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.to-top:hover {
  color: #fff;
  transform: translateY(-2px);
}

.footer a:focus-visible {
  outline: 2px solid var(--mint-500);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ========================================================================== 
   17. MOTION & UTILITIES
   ========================================================================== */

/* Reveal on scroll.
   Nguyên tắc: nội dung LUÔN hiển thị theo mặc định. Trạng thái ẩn chỉ được
   bật khi JS đã chạy và thêm class .reveal-ready vào <html>. Nhờ vậy nếu
   main.js lỗi, bị chặn hoặc tải chậm, trang vẫn đọc được bình thường. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.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;
}

/* Số đếm tăng: inline-block để min-width có tác dụng khi khoá chiều rộng,
   tabular-nums để chữ số không nhảy qua lại khi giá trị đổi. */
[data-countup] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Chấm bay lên bản chất là chuyển động → ẩn hẳn. */
  .hero__particles {
    display: none !important;
  }

  /* Vầng sáng thì giữ lại, chỉ neo về trạng thái đứng yên ở vị trí gốc.
     Không để animation dừng ở khung cuối vì khung cuối đã bị dịch đi. */
  .hero__glow {
    transform: none !important;
    opacity: 0.85 !important;
  }

  /* Marquee dừng lại. Ẩn mọi bản sao trang trí (chỉ tồn tại để lấp đầy
     chiều rộng và cuộn liền mạch), chỉ giữ đúng 1 bộ logo thật đứng yên. */
  .marquee__track {
    animation: none !important;
  }

  .marquee__set[aria-hidden="true"] {
    display: none !important;
  }
}

/* ========================================================================== 
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__about {
    max-width: 52ch;
  }
}

@media (max-width: 1180px) {
  .header__phone {
    display: none;
  }
}

@media (max-width: 960px) {
  .nav,
  .header__phone {
    display: none;
  }

  .burger {
    display: inline-flex;
  }

  .layers,
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Dịch vụ về 2 cột; thẻ thứ 3 tự tràn xuống hàng dưới và giãn hết chiều
     ngang để không bị lẻ một thẻ hẹp cạnh khoảng trống. */
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .services > :last-child:nth-child(odd) .service__visual {
    aspect-ratio: 21 / 8;
  }

  /* Dự án về 2 cột, thẻ lẻ cuối giãn hết chiều ngang như phần dịch vụ. */
  .cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cases > :last-child:nth-child(odd) .case__ph {
    aspect-ratio: 21 / 8;
  }

  .cta-grid {
    grid-template-columns: 1fr;
  }

  /* Quy trình: khung ảnh xuống dưới danh sách bước. */
  .process-split {
    grid-template-columns: 1fr;
  }

  .process-figure {
    position: static;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 66px;
  }

  .logo__img {
    max-height: 46px;
  }

  .header .btn--header {
    display: none;
  }

  /* Chạy nhanh hơn một chút trên mobile: bề rộng track ngắn hơn nên tốc độ
     cũ sẽ có cảm giác chậm rề. */
  .hero__logos {
    margin-top: var(--space-8);
  }

  .marquee__track {
    --marquee-dur: 60s;
  }

  .proof__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .proof__stat {
    border-left: 0;
    padding-block: var(--space-2);
  }

  .proof__stat:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .layers,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .services {
    grid-template-columns: 1fr;
  }

  /* Về 1 cột thì trả khung hình thứ 3 về tỉ lệ chuẩn như hai thẻ trên. */
  .services > :last-child:nth-child(odd) .service__visual {
    aspect-ratio: 16 / 11;
  }

  .cases {
    grid-template-columns: 1fr;
  }

  /* Về 1 cột thì trả khung hình thẻ lẻ cuối về tỉ lệ chuẩn. */
  .cases > :last-child:nth-child(odd) .case__ph {
    aspect-ratio: 16 / 10;
  }

  /* Quy trình trên mobile: mốc số nhỏ lại để dành chỗ cho chữ. */
  .pstep {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
  }

  .pstep__num {
    width: 2.5rem;
    height: 2.5rem;
  }

  .pstep::before {
    left: calc(clamp(1rem, 0.85rem + 0.6vw, 1.4rem) + 1.25rem - 1px);
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__col--menu {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .hero__ctas .btn {
    width: 100%;
  }

  .logo__sub {
    display: none;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .footer__about {
    max-width: 42ch;
  }

  .inline-cta {
    flex-direction: column;
  }
}

/* ========================================================================== 
   PRINT
   ========================================================================== */

@media print {
  .header,
  .drawer,
  .hero::before,
  .hero__bg,
  .to-top,
  .form-card,
  .burger {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .hero,
  .proof,
  .section--dark,
  .cta-section,
  .footer {
    background: #fff !important;
    color: #000 !important;
  }
}