:root {
  --nix-bg: #f8f9fa;
  --nix-blue: #003f87;
  --nix-cta: #0056b3;
  --nix-text: #191c1d;
  --nix-heading: #003f87;        /* Design System: --color-hero-dark-blue — heading H1/H2/H3 */
  --nix-muted: #424752;
  --nix-border: #e5e7eb;
  --nix-soft: #f5faff;
  --nix-shadow: 0 16px 40px rgba(15, 23, 42, .08);

  /* ── Typography scale ─────────────────────────────── */
  /* Tiêu chuẩn: H1=48px, H2=36px, H3=24px, H4=18px, body=16px, xs=14px, btn=16px */
  --nix-font-xs:         14px;   /* Small/Caption desktop */
  --nix-font-sm:         16px;   /* Button/CTA & small text desktop */
  --nix-font-body:       16px;   /* Body/paragraph desktop */
  --nix-font-lead:       20px;   /* Lead text (giữ nguyên) */
  --nix-font-card-title: 22px;   /* Card title (giữ nguyên để không phá layout card) */
  --nix-font-h4:         18px;   /* H4 desktop */
  --nix-font-h3:         24px;   /* H3 desktop */
  --nix-font-h2:         36px;   /* H2 desktop */
  --nix-font-h1:         48px;   /* H1 desktop */
  /* Mobile — dùng trong @media (max-width:767px) */
  --nix-font-xs-m:       13px;
  --nix-font-sm-m:       15px;
  --nix-font-body-m:     16px;
  --nix-font-h4-m:       16px;
  --nix-font-h3-m:       20px;
  --nix-font-h2-m:       28px;
  --nix-font-h1-m:       32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--nix-bg); color: var(--nix-text); font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* =========================================
   Global Header — override đã ở functions.php (wp_add_inline_style)
   và build/site-header/style-index.css đã được fix.
   Chỉ giữ z-index context cho hero ở đây.
========================================= */

/* Hero carousel: luôn dưới header */
.nix-hero-carousel {
  position: relative;
  z-index: 1;
}

/* Overlay không được chặn click vào arrow/dots */
.nix-hero-slide::before,
.nix-hero-slide::after,
.nix-core-carousel-slide::before,
.nix-core-carousel-slide::after {
  pointer-events: none;
}

/* Arrow/dots/scroll phải nằm trên overlay và nhận click */
.nix-hero-arrow,
.nix-hero-prev,
.nix-hero-next,
.nix-hero-dots,
.nix-scroll-down,
.nix-core-carousel-arrow,
.nix-core-carousel-dots,
.nix-roadmap-controls,
.nix-home-cases__controls {
  z-index: 20;
  pointer-events: auto;
}

/* Đảm bảo buttons bên trong dots cũng nhận click */
.nix-hero-dots button,
.nix-core-carousel-dots button {
  pointer-events: auto;
  position: relative;
  z-index: 21;
}

.nix-section { padding: 92px clamp(22px, 5vw, 80px); background: var(--nix-bg); }
.nix-container { width: min(1280px, 100%); margin: 0 auto; }
.nix-container-narrow,
.nix-container--narrow {
  width: min(900px, 100%);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
.nix-section-title { margin: 0 auto 54px; text-align: center; font-size: var(--nix-font-h2); font-weight: 700; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; color: var(--nix-heading, #003f87); }
.nix-section-title::after { content: ""; display: block; width: 80px; height: 4px; margin: 20px auto 0; border-radius: 999px; background: var(--nix-blue); }
.nix-section-lead { max-width: 720px; margin: -28px auto 48px; color: #4a5565; text-align: center; font-size: var(--nix-font-body); line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
.nix-kicker { display: none; margin: 0 auto 18px; padding: 8px 18px; border-radius: 999px; background: #EAF2FB; color: var(--nix-cta, #0056B3); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.nix-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 8px 10px 0 0; padding: 14px 28px; border-radius: 12px; border: 1px solid var(--nix-blue); font-weight: 600; font-size: var(--nix-font-sm); }
.nix-button-primary { background: var(--nix-cta); color: #fff; box-shadow: 0 14px 26px rgba(0, 63, 135, .18); }
.nix-button-secondary { background: #fff; color: #111827; }

/* ── Hero: full viewport width ─────────────────────────────── */
.nix-hero-carousel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: calc(100vh - 72px);
  min-height: 680px;
  overflow: hidden;
  background: #191c1d;
  z-index: 1;
}
@media (max-width: 768px) {
  .nix-hero-carousel { height: 70vh; min-height: 560px; }
}

.nix-hero-slides, .nix-hero-slide { position: absolute; inset: 0; }
.nix-hero-slide { opacity: 0; transition: opacity 1s ease; }
.nix-hero-slide::after { content: ""; position: absolute; inset: 0; background: rgba(25, 28, 29, .45); }
.nix-hero-slide.nix-is-active { opacity: 1; animation: nixKenBurns 7s ease forwards; }
.nix-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.nix-hero-dots { position: absolute; left: 50%; bottom: 34px; display: flex; gap: 10px; transform: translateX(-50%); z-index: 2; }
.nix-hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .25s ease; }
.nix-hero-dots button.nix-is-active { width: 32px; background: #fff; }
.nix-scroll-down { position: absolute; left: 50%; bottom: 70px; z-index: 2; display: grid; gap: 8px; place-items: center; color: rgba(255,255,255,.82); font-size: 12px; letter-spacing: 1.2px; font-weight: 700; transform: translateX(-50%); animation: nixBounce 1.5s ease-in-out infinite; }

.nix-core-message-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .92fr); gap: 72px; align-items: center; }
.nix-core-message h1 { margin: 0 0 24px; font-size: var(--nix-font-h1); line-height: 1.3; font-weight: 700; white-space: pre-line; word-break: keep-all; overflow-wrap: break-word; color: var(--nix-heading, #003f87); }
.nix-core-message p { color: #21272a; font-size: var(--nix-font-body); line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
.nix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.nix-actions .nix-button { margin: 0; }
.nix-core-message-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--nix-shadow); }

.nix-core-carousel {
  position: relative;
  width: 100%;
  height: 432px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,0.16);
}

.nix-core-carousel-slides,
.nix-core-carousel-slide {
  position: absolute;
  inset: 0;
}

.nix-core-carousel-slide {
  opacity: 0;
  transition: opacity .7s ease;
}

.nix-core-carousel-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.nix-core-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nix-core-carousel-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.nix-core-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}

.nix-core-carousel-dots button.is-active {
  width: 24px;
  background: #fff;
}

/* ── Problem Cards ─────────────────────────────────────────── */
.nix-problem-cards { background: var(--nix-bg); }
.nix-card-grid { display: grid; gap: 24px; }
.nix-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nix-card-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Scoped to problem-cards only — does not affect other blocks */
.nix-problem-cards .nix-card {
  position: relative;
  min-height: 220px;
  padding: 24px 28px 28px;
  border: 1px solid rgba(194,198,212,.35);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
}

/* Top row: icon left, number right */
.nix-problem-cards .nix-card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 8px;
}
.nix-problem-cards .nix-card-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.nix-problem-cards .nix-card-icon-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #dbeafe;
  flex-shrink: 0;
}
.nix-problem-cards .nix-card-number {
  font-size: 48px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  margin: 0;
}
.nix-problem-cards .nix-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nix-heading, #003f87);
}
.nix-problem-cards .nix-card p {
  margin: 0;
  color: var(--nix-muted);
  line-height: 1.75;
  font-size: 16px;
  flex-grow: 1;
}

/* ── LaaS Process — grid flow (giống ảnh mẫu) ───────────────── */
.nix-laas-process { background: var(--nix-soft); }

/* Lead paragraph spacing — tái sử dụng .nix-section-lead typography,
   chỉ thêm margin-bottom để tạo khoảng cách trước process flow */
.nix-laas-process .nix-section-lead {
  margin-bottom: 48px;
}

.nix-laas-process .nix-process-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 48px !important;
  align-items: start !important;
}

.nix-laas-process .nix-process-step {
  position: relative !important;
  text-align: center !important;
}

/* Icon wrapper — bo tròn cả wrapper lẫn ảnh bên trong */
.nix-laas-process .nix-process-step-icon-wrap {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 18px !important;
  border-radius: 999px !important;
  background: #dbe7ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Ảnh upload: contain — không crop icon, giữ toàn bộ hình */
.nix-laas-process .nix-process-step-icon-wrap img {
  width: 52% !important;
  height: 52% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
}

/* SVG icon: giữ aspect-ratio, không crop */
.nix-laas-process .nix-process-step-icon-wrap svg {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.nix-laas-process .nix-process-step-icon-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #93b4e8;
}

.nix-laas-process .nix-process-step h3 {
  margin: 0 0 12px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--nix-heading, #003f87) !important;
  text-align: center !important;
}

.nix-laas-process .nix-process-step p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #374151 !important;
  text-align: center !important;
}

/* Arrow between process steps — round icon button style */
.nix-laas-process .nix-process-arrow {
  position: absolute !important;
  top: 28px !important;
  right: -28px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1.5px solid #dbeafe !important;
  box-shadow: 0 2px 8px rgba(0,86,179,0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0056b3 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.nix-laas-process .nix-process-step:last-child .nix-process-arrow { display: none !important; }


/* ── Core Pillars — icon, no number on frontend ────────────── */
.nix-pillars { background: var(--nix-bg); }
.nix-pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.nix-pillars .nix-pillar-card {
  height: 100%;
  min-height: 240px;
  padding: 28px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
}
/* Pillar icon: circle wrapper — icon nằm gọn bên trong, không crop */
.nix-pillar-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #e8f0ff;
  border: 2px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 20px;
  box-sizing: border-box;
}
/* Img bên trong wrapper: contain — không crop, nằm gọn trong circle */
.nix-pillar-icon-wrap .nix-pillar-icon {
  width: 34px;
  height: 34px;
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  display: block;
  margin-bottom: 0;
}
/* Fallback: img không có wrapper (markup cũ) — contain để không crop */
.nix-pillar-card > .nix-pillar-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  display: block;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.nix-pillar-icon-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dbeafe;
  margin-bottom: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nix-blue);
  font-size: 18px;
}
/* Pillar card */
.nix-pillars .nix-pillar-card h3 {
  margin: 0 0 12px;
  font-size: var(--nix-pillars-title-size, 24px);
  font-weight: 700;
  color: var(--nix-heading, #003f87);
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.nix-pillars .nix-pillar-card p {
  margin: 0;
  font-size:  16px;
  line-height: 1.75;
  color: #374151;
  flex-grow: 1;
}

/* Keep generic .nix-card for other blocks (services etc) */
.nix-card { position: relative; min-height: 244px; padding: 30px; border: 1px solid rgba(194,198,212,.35); border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.06); }
.nix-card-number { display: block; margin-bottom: 18px; color: var(--nix-blue); font-size: 28px; font-weight: 800; }
.nix-card h3 { margin: 0 0 12px; font-size: 24px; color: var(--nix-heading, #003f87); font-weight: 700; }
.nix-card p { margin: 0; color: var(--nix-muted); line-height: 1.65; font-size: 16px; }

/* ── Strength Accordion — bigger chevron button ─────────────── */
.nix-process-row::-webkit-scrollbar, .nix-benefit-scroll::-webkit-scrollbar, .nix-roadmap-viewport::-webkit-scrollbar { display: none; }

.nix-strength-accordion {
  background: #f4f9ff;
}
.nix-accordion { display: grid; gap: 18px; margin-left: auto; margin-right: auto; width: 100%; }
.nix-accordion-item,
.nix-accordion__item { border: 1px solid #d1d5db; border-radius: 30px; background: #fff; box-shadow: 0 14px 40px rgba(0,63,135,.08); }
.nix-accordion-header,
.nix-accordion__button { width: 100%; display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; align-items: center; padding: 18px 24px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.nix-accordion-number { display: none; } /* ẩn số badge cũ — thay bằng icon circle */

/* ── Icon circle (nix/strength-accordion) ───────────────────── */
/* Desktop + Mobile: scoped hoàn toàn trong .nix-strength-accordion */
.nix-strength-accordion .nix-accordion-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #e8f0ff;
  border: 2px solid #bfdbfe;
  box-shadow: 0 2px 8px rgba(0, 63, 135, 0.10);
}

.nix-strength-accordion .nix-accordion-icon-circle img {
  width: 36px;
  height: 36px;
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  display: block;
}
.nix-accordion-header strong, .nix-accordion-header em,
.nix-accordion__button strong, .nix-accordion__button em { display: block; }
.nix-accordion-header strong,
.nix-accordion__button strong { color: var(--nix-heading, #003f87); font-weight: 700; }
.nix-accordion-header em,
.nix-accordion__button em { margin-top: 4px; color: var(--nix-muted); font-style: normal; }

/* Strength accordion — desktop typography (scoped) */
.nix-strength-accordion .nix-accordion-header strong {
  font-size: 18px;
  line-height: 1.4;
}
.nix-strength-accordion .nix-accordion-header em {
  font-size: 16px;
  line-height: 1.5;
}
.nix-strength-accordion .nix-accordion-panel p {
  font-size: 16px;
  line-height: 1.75;
}

/* Chevron — 46px circle, CSS chevron replaces the ⌄ text character */
.nix-accordion-chevron {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 999px;
  background: #eef4ff;
  border: 1.5px solid #dbeafe;
  font-size: 0;
  line-height: 0;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  vertical-align: middle;
}
/* CSS chevron — centred with absolute positioning */
.nix-accordion-chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid #003f87;
  border-bottom: 2.5px solid #003f87;
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform .25s ease;
}
.nix-accordion-chevron:hover {
  background: #dbeafe;
  border-color: #bfdbfe;
  box-shadow: 0 6px 18px rgba(0, 86, 179, 0.14);
}
.nix-accordion-item.nix-is-open .nix-accordion-chevron {
  background: #dbeafe;
  border-color: #93c5fd;
}
.nix-accordion-item.nix-is-open .nix-accordion-chevron::after {
  transform: translate(-50%, -35%) rotate(225deg);
}

.nix-accordion-panel,
.nix-accordion__panel {
  max-height: 0;
  overflow: hidden;
  padding: 0 28px;
  transition: max-height .4s cubic-bezier(0.4,0,0.2,1), padding .3s ease;
}
.nix-accordion-item.nix-is-open .nix-accordion-panel,
.nix-accordion__item.nix-is-open .nix-accordion__panel {
  max-height: 9999px;
  padding: 0 28px 28px 102px;
  overflow: visible;   /* allow horizontal scroll inside benefit-comparison */
}
.nix-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nix-chip-row span { padding: 6px 10px; border-radius: 999px; background: #EAF2FB; color: var(--nix-cta, #0056B3); font-size: var(--nix-font-xs); font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nix-pillars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .nix-laas-process .nix-process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .nix-laas-process .nix-process-arrow { display: none !important; }
}
@media (max-width: 768px) {
  .nix-card-grid-4 { grid-template-columns: 1fr; }
  .nix-card-grid-5 { grid-template-columns: 1fr; }
  .nix-pillars-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .nix-pillar-card { min-height: auto; }
  .nix-laas-process .nix-process-flow { grid-template-columns: 1fr !important; gap: 36px !important; }
  .nix-section-title { font-size: 28px; line-height: 1.3; }
  .nix-section-lead { font-size: 15px; line-height: 1.75; }
  .nix-button { width: 100%; justify-content: center; margin-right: 0; }
  .nix-actions { flex-direction: column; }
  .nix-core-message-grid { grid-template-columns: 1fr; gap: 32px; }
  .nix-accordion-header { grid-template-columns: 52px 1fr auto; padding: 16px 18px; }
  .nix-accordion-chevron { width: 42px; height: 42px; min-width: 42px; }
  /* Case study home header spacing reduced on mobile */
  .nix-home-cases__header { margin-bottom: 32px; }
  /* Process icon slightly smaller on mobile */
  .nix-laas-process .nix-process-step-icon-wrap { width: 68px !important; height: 68px !important; }
}
@media (max-width: 480px) {
  .nix-pillars-grid { grid-template-columns: 1fr; }
}


/* ── Benefit scroll: overflow visible để shadow card không bị cắt ── */
.nix-benefit-scroll {
  display: grid;
  gap: 32px;               /* tăng row gap cho thoáng */
  overflow-x: visible;     /* bỏ auto → shadow không bị clip */
  scrollbar-width: none;
  padding: 8px 4px;        /* padding nhỏ để shadow có không gian */
}
.nix-benefit-row {
  min-width: 840px;
  display: grid;
  grid-template-columns: 1fr 128px 1fr;  /* tăng từ 80px → 128px để label không tràn */
  gap: 28px;
  align-items: center;
}
/* ── Benefit row: ảnh infographic — không crop chữ ── */
.nix-benefit-row > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
  border-radius: 24px;
  clip-path: inset(0 round 24px);
  filter: drop-shadow(0 8px 24px rgba(15,23,42,.13)) drop-shadow(0 2px 6px rgba(15,23,42,.07));
  display: block;
  background: transparent;
  padding: 0;
  min-height: 0;
  box-sizing: border-box;
}

/*
 * Card trắng (Mô hình truyền thống = img:first-of-type):
 * Bỏ drop-shadow, bỏ clip-path, thêm border xanh nhạt bo góc.
 * clip-path bị xóa vì nó sẽ clip outline/border ngoài element box.
 * Dùng overflow: hidden + border-radius để vẫn bo góc ảnh bên trong.
 */
.nix-benefit-row > img:first-of-type {
  clip-path: none;
  filter: none;
  border: 1.5px solid #BFD7F2;
  overflow: hidden;
  background: #ffffff;
}
.nix-benefit-axis {
  display: flex;           /* đổi sang flex column để icon + label căn giữa trục dọc */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9ca3af;
}
.nix-benefit-axis span, .nix-benefit-center-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--nix-cta);
  border-radius: 12px;
  background: #fff;
  color: var(--nix-cta);
  font-weight: 800;
  flex-shrink: 0;          /* icon không bị co */
}
.nix-benefit-center-icon-img { width: 28px; height: 28px; object-fit: contain; display: block; }
.nix-benefit-axis em {
  font-style: normal;
  color: #334155;          /* đậm hơn, dễ đọc */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  width: 112px;            /* đủ rộng, nằm trong cột 128px */
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: 0;
}

/* Benefits comparison — column header text */
.nix-benefits-comparison .nix-benefits-headers {
  font-size: 18px;
  font-weight: 700;
}

/* ── Services Section ─────────────────────────────────────────── */
.nix-services-section { background: #f0f6ff; }

.nix-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;        /* all cards fill the same row height */
}

/* ── Card base ───────────────────────────────────────────────── */
.nix-service-card {
  display: flex;
  flex-direction: column;
  padding: 36px 34px 32px;
  border-radius: 22px;
  background: #fff;
  border: 1.5px solid rgba(0, 86, 179, 0.22);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.nix-service-card:hover {
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}

/* ── Featured card ───────────────────────────────────────────── */
.nix-service-card.is-featured {
  background: linear-gradient(145deg, #0056b3 0%, #003f87 100%);
  color: #fff;
  border-color: transparent;
  margin-top: -20px;           /* lift upward without breaking stretch height */
  margin-bottom: -20px;        /* extend downward equally so it looks taller  */
  box-shadow: 0 28px 64px rgba(0, 63, 135, 0.30);
}

.nix-service-card.is-featured:hover {
  box-shadow: 0 34px 72px rgba(0, 63, 135, 0.36);
}

/* ── Top row: number + badge ─────────────────────────────────── */
.nix-service-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.nix-service-card__num {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0056b3;
  opacity: 0.45;
  line-height: 1;
  flex-shrink: 0;
}

.nix-service-card.is-featured .nix-service-card__num {
  color: #fff;
  opacity: 0.55;
}

.nix-service-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #dbeafe;
  color: #0056b3;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}

.nix-service-card.is-featured .nix-service-card__badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ── Title ───────────────────────────────────────────────────── */
.nix-service-card__title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nix-heading, #003f87);
}

.nix-service-card.is-featured .nix-service-card__title { color: #fff; }

/* ── Description ─────────────────────────────────────────────── */
.nix-service-card__desc {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.8;
  color: #4a5568;
}

.nix-service-card.is-featured .nix-service-card__desc { color: rgba(255,255,255,0.82); }

/* ── Features list ───────────────────────────────────────────── */
.nix-service-card__features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid rgba(0, 86, 179, 0.12);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;                /* push CTA to bottom regardless of bullet count */
}

.nix-service-card.is-featured .nix-service-card__features {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.nix-service-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: #374151;
}

.nix-service-card.is-featured .nix-service-card__feature { color: rgba(255,255,255,0.88); }

.nix-service-card__feature::before {
  content: '✓';
  flex-shrink: 0;
  color: #0056b3;
  font-size: 13px;
  font-weight: 800;
  margin-top: 1px;
}

.nix-service-card.is-featured .nix-service-card__feature::before { color: rgba(255,255,255,0.9); }

/* ── CTA button ──────────────────────────────────────────────── */
.nix-service-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
  white-space: normal;       /* allow wrap rather than overflow */
  word-break: break-word;
  transition: opacity 0.2s ease, transform 0.18s ease;
  letter-spacing: 0em;
  margin-top: auto;
}

.nix-service-card__cta:hover { opacity: 0.86; transform: translateY(-1px); }

.nix-service-card__cta--outline {
  background: transparent;
  border: 2px solid #0056b3;
  color: #0056b3;
}

.nix-service-card__cta--inverted {
  background: #fff;
  color: #0056b3;
  border: 2px solid transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════════════════════════════
   Home Case Studies block — scoped to .nix-home-case-study
   Does NOT touch /case-study/ page or any .nix-case-* class.
══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.nix-home-case-study {
  overflow: visible !important;
}
.nix-home-case-study .nix-container {
  overflow: visible !important;
}

/* ── Header: title centred, proper gap to cards ──────────────── */
.nix-home-case-study__header {
  text-align: center;
  margin-bottom: 52px;
}

/* Fix: underline decoration on section-title must not overlap subtitle */
.nix-home-case-study .nix-section-title {
  margin-bottom: 28px;   /* push subtitle well below the ::after underline */
}
.nix-home-case-study .nix-section-lead,
.nix-home-case-study__subtitle {
  margin-top: 0;
  margin-bottom: 0;
}

/* Controls row (only shown when > 3 cards) */
.nix-home-case-study__controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.nix-home-case-study__prev,
.nix-home-case-study__next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid #dbeafe;
  background: #fff;
  color: #003f87;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s;
}
.nix-home-case-study__prev:hover,
.nix-home-case-study__next:hover {
  background: #eef4ff;
  border-color: #93c5fd;
}

/* ── Viewport: horizontal scroll container ───────────────────── */
.nix-home-case-study__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 4px 48px;
}
.nix-home-case-study__viewport::-webkit-scrollbar { display: none; }
.nix-home-case-study__viewport.is-dragging { cursor: grabbing; }

/* ── Track: flex row, never wraps ───────────────────────────── */
.nix-home-case-study__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  align-items: stretch;
}

/* Static variant (≤ 3 cards): equal-width columns */
.nix-home-case-study__track--static .nix-home-case-study__card {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Card ────────────────────────────────────────────────────── */
.nix-home-case-study__card {
  flex: 0 0 calc((100% - 56px) / 3);
  display: flex;
  flex-direction: column;
  min-height: 430px;
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff !important;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  color: var(--nix-heading, #003f87) !important;
}
.nix-home-case-study__card:hover {
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.13);
  transform: translateY(-3px);
}
.nix-home-case-study__card::before,
.nix-home-case-study__card::after,
.nix-home-case-study__card *::before,
.nix-home-case-study__card *::after {
  pointer-events: none;
}

/* ── Media (image area) ──────────────────────────────────────── */
.nix-home-case-study__media {
  flex-shrink: 0;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background: #f0f5fb;
}
/* Photo: fill the area */
.nix-home-case-study__media img,
.nix-home-case-study__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none !important;
  opacity: 1 !important;
}
/* Logo image: contain with padding so it isn't cropped */
.nix-home-case-study__media--logo img,
.nix-home-case-study__media--logo .nix-home-case-study__image {
  object-fit: contain;
  padding: 32px 40px;
  background: #fff;
}

/* Placeholder when no image at all */
.nix-home-case-study__placeholder {
  flex-shrink: 0;
  width: 100%;
  height: 210px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dbe7f5 0%, #bfd4f0 100%);
  color: #003f87;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ── Content area ───────────────────────────────────────────── */
.nix-home-case-study__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 28px;
  background: #ffffff !important;
}

.nix-home-case-study__label {
  display: inline-block;
  margin-bottom: 12px;
  color: #0056b3 !important;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  background: transparent !important;
}

.nix-home-case-study__title {
  margin: 0 0 14px;
  color: var(--nix-heading, #003f87) !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  background: transparent !important;
}

.nix-home-case-study__desc {
  flex-grow: 1;
  margin: 0 0 24px;
  color: #374151 !important;
  font-size: 16px;
  line-height: 1.75;
  background: transparent !important;
}

.nix-home-case-study__cta {
  margin-top: auto;
  display: inline-block;
  color: #0056b3 !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  background: transparent !important;
}
.nix-home-case-study__cta:hover { text-decoration: underline; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nix-home-case-study__card { flex-basis: calc((100% - 28px) / 2); }
  .nix-home-case-study__track--static .nix-home-case-study__card { flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 768px) {
  .nix-home-case-study__card { flex-basis: 88%; min-height: 380px; }
  .nix-home-case-study__track--static .nix-home-case-study__card { flex-basis: 100%; }
  .nix-home-case-study__header { margin-bottom: 36px; }
  .nix-home-case-study .nix-section-title { margin-bottom: 20px; }
  .nix-home-case-study__media,
  .nix-home-case-study__placeholder { height: 185px; }
}

.nix-roadmap-timeline { min-height: 600px; }

/* ── Roadmap controls: layout ── */
.nix-roadmap-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ── Button base ── */
.nix-roadmap-controls button,
.nix-roadmap-control {
  position: relative;

  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  margin: 0;

  display: inline-grid;
  place-items: center;

  border: 1.5px solid var(--nix-border, #e5e7eb);
  border-radius: 50%;
  background: #fff;
  color: var(--nix-blue, #003f87);

  font-size: 0;
  line-height: 0;
  box-sizing: border-box;
  cursor: pointer;
  flex-shrink: 0;

  box-shadow: 0 2px 8px rgba(0, 63, 135, 0.07);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.nix-roadmap-controls button:hover,
.nix-roadmap-control:hover {
  border-color: var(--nix-blue, #003f87);
  box-shadow: 0 4px 16px rgba(0, 63, 135, 0.15);
}

/* ── Chevron via ::before — works regardless of button inner markup ── */
.nix-roadmap-prev::before,
.nix-roadmap-next::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 10px;

  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;

  box-sizing: border-box;
  pointer-events: none;
}

/* Chevron pointing left */
.nix-roadmap-prev::before {
  transform: translate(-40%, -50%) rotate(135deg);
}

/* Chevron pointing right */
.nix-roadmap-next::before {
  transform: translate(-60%, -50%) rotate(-45deg);
}

/* SVG fallback — shown only when SVG is actually in the markup */
.nix-roadmap-controls button svg,
.nix-roadmap-control svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  /* Hide SVG when ::before chevron is active to avoid duplication */
  display: none;
}

.nix-roadmap-scroll,
.nix-roadmap-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.nix-roadmap-scroll::-webkit-scrollbar,
.nix-roadmap-viewport::-webkit-scrollbar {
  display: none;
}

.nix-roadmap-scroll.nix-is-dragging,
.nix-roadmap-viewport.nix-is-dragging {
  cursor: grabbing !important;
}

.nix-roadmap-scroll.nix-is-dragging *,
.nix-roadmap-viewport.nix-is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.nix-roadmap-track { 
  display: flex;
  align-items: center;
  position: relative; 
  min-width: 100%;
  width: max-content;
  height: 400px;
  padding: 0 80px;
}

.nix-roadmap-item { 
  position: relative; 
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 260px; 
  height: 400px;
  flex-shrink: 0;
  text-align: center;
  margin: 0 20px;
}

.nix-roadmap-card { 
  position: absolute; 
  left: 50%; 
  width: 240px; 
  padding: 18px; 
  border: 1px solid #e5e7eb; 
  border-radius: 14px; 
  background: #fff; 
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06); 
  transform: translateX(-50%); 
  z-index: 3;
  text-align: left;
}
.nix-roadmap-card strong { display: block; margin-bottom: 8px; color: var(--nix-heading, #003f87); font-size: 18px; font-weight: 700; }
.nix-roadmap-card p { margin: 0; color: var(--nix-muted); font-size: 16px; line-height: 1.6; }

.nix-roadmap-item.nix-is-top .nix-roadmap-card,
.nix-roadmap-item.is-top .nix-roadmap-card {
  top: 10px;
  bottom: auto;
}

.nix-roadmap-item.nix-is-bottom .nix-roadmap-card,
.nix-roadmap-item.is-bottom .nix-roadmap-card {
  top: 295px;
  bottom: auto;
}

.nix-roadmap-dot { 
  display: block; 
  width: 16px; 
  height: 16px; 
  border: 4px solid #fff; 
  border-radius: 999px; 
  background: var(--nix-cta); 
  box-shadow: 0 0 0 4px rgba(0, 86, 179, .16); 
  z-index: 3;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nix-roadmap-item.nix-is-top .nix-roadmap-dot,
.nix-roadmap-item.is-top .nix-roadmap-dot {
  top: 130px;
}

.nix-roadmap-item.nix-is-bottom .nix-roadmap-dot,
.nix-roadmap-item.is-bottom .nix-roadmap-dot {
  top: 270px;
}

.nix-roadmap-item em {
  color: var(--nix-heading, #003f87);
  font-style: normal;
  font-size: 18px;
  font-weight: 800;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin-top: 0;
  display: block;
  white-space: nowrap;
}

.nix-roadmap-item.nix-is-top em,
.nix-roadmap-item.is-top em {
  top: 155px;
}

.nix-roadmap-item.nix-is-bottom em,
.nix-roadmap-item.is-bottom em {
  top: 235px;
}

.nix-footer { padding: 54px clamp(22px, 5vw, 80px) 34px; border-top: 1px solid var(--nix-border); background: #fff; }
.nix-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.nix-footer h2, .nix-footer h3 { color: var(--nix-blue); }
.nix-footer p { color: var(--nix-muted); line-height: 1.7; }
.nix-footer a { display: block; margin: 10px 0; color: var(--nix-muted); font-size: 14px; }

.nix-scroll-ready .nix-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.nix-scroll-ready .nix-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Reveal delay variants */
.nix-scroll-ready .nix-reveal-delay-1 { transition-delay: 0.12s; }
.nix-scroll-ready .nix-reveal-delay-2 { transition-delay: 0.24s; }
.nix-scroll-ready .nix-reveal-delay-3 { transition-delay: 0.38s; }
.nix-scroll-ready .nix-reveal-delay-4 { transition-delay: 0.52s; }

/* Left/right slide variants */
.nix-scroll-ready .nix-reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .7s ease, transform .7s ease; }
.nix-scroll-ready .nix-reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.nix-scroll-ready .nix-reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .7s ease, transform .7s ease; }
.nix-scroll-ready .nix-reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Menu Summary Cards — fade-up staggered */
.nix-scroll-ready .nix-menu-card.nix-scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.nix-scroll-ready .nix-menu-card.nix-scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
.nix-scroll-ready .nix-menu-card:nth-child(2).nix-scroll-reveal { transition-delay: 0.14s; }
.nix-scroll-ready .nix-menu-card:nth-child(3).nix-scroll-reveal { transition-delay: 0.28s; }

/* Service Accordion Panels — fade-up staggered */
.nix-scroll-ready .nix-service-accordion-panel.nix-scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.nix-scroll-ready .nix-service-accordion-panel.nix-scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
.nix-scroll-ready .nix-service-accordion-panel:nth-child(2).nix-scroll-reveal { transition-delay: 0.12s; }
.nix-scroll-ready .nix-service-accordion-panel:nth-child(3).nix-scroll-reveal { transition-delay: 0.24s; }

/* CTA Section — staggered fade-up */
.nix-scroll-ready .nix-cta-small-text.nix-scroll-reveal,
.nix-scroll-ready .nix-cta-heading.nix-scroll-reveal,
.nix-scroll-ready .nix-cta-description.nix-scroll-reveal,
.nix-scroll-ready .nix-cta-buttons.nix-scroll-reveal,
.nix-scroll-ready .nix-cta-promise.nix-scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.nix-scroll-ready .nix-cta-small-text.nix-scroll-reveal.is-visible,
.nix-scroll-ready .nix-cta-heading.nix-scroll-reveal.is-visible,
.nix-scroll-ready .nix-cta-description.nix-scroll-reveal.is-visible,
.nix-scroll-ready .nix-cta-buttons.nix-scroll-reveal.is-visible,
.nix-scroll-ready .nix-cta-promise.nix-scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.nix-scroll-ready .nix-cta-heading.nix-scroll-reveal    { transition-delay: 0.10s; }
.nix-scroll-ready .nix-cta-description.nix-scroll-reveal { transition-delay: 0.20s; }
.nix-scroll-ready .nix-cta-buttons.nix-scroll-reveal     { transition-delay: 0.30s; }
.nix-scroll-ready .nix-cta-promise.nix-scroll-reveal     { transition-delay: 0.42s; }

@keyframes nixKenBurns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes nixBounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } }

@media (max-width: 980px) {
  .nix-core-message-grid, .nix-card-grid-4, .nix-card-grid-5, .nix-footer-grid { grid-template-columns: 1fr; }
  /* Services: 1 col on tablet/mobile, cancel featured lift margins */
  .nix-services-grid { grid-template-columns: 1fr; gap: 16px; }
  .nix-service-card.is-featured { margin-top: 0; margin-bottom: 0; }
  .nix-service-card.is-featured:hover { box-shadow: 0 28px 64px rgba(0, 63, 135, 0.30); }
}

@media (max-width: 640px) {
  .nix-section { padding-block: 68px; }
  /* Hero: aspect-ratio đã được set ở max-width:767px — không override lại height cứng */
  .nix-button { width: 100%; }
}

/* Premium Carousel Prev/Next Arrows & Grab/Grabbing Styles */
.nix-hero-carousel,
.nix-core-carousel {
  cursor: grab;
}

.nix-hero-carousel.is-dragging,
.nix-core-carousel.is-dragging {
  cursor: grabbing !important;
}

.nix-hero-carousel.is-dragging *,
.nix-core-carousel.is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.nix-hero-carousel.is-dragging img,
.nix-core-carousel.is-dragging img {
  pointer-events: none !important;
}

/* Hero Carousel Arrow Controls */
.nix-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.nix-hero-arrow:hover {
  background: #fff;
  color: var(--nix-blue, #003f87);
  border-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.nix-hero-prev { left: 24px; }
.nix-hero-next { right: 24px; }

/* Core Message Carousel Arrow Controls
   JS đã move arrows + dots ra ngoài carousel vào .nix-core-carousel-controls
   Reset position: absolute cũ (không còn cần vì không nằm trong carousel nữa) */
.nix-core-carousel-arrow {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 91, 172, 0.22);
  color: #005BAC;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.nix-core-carousel-arrow:hover {
  background: #005BAC;
  color: #fff;
  border-color: #005BAC;
}

/* Khi đã move ra ngoài, prev/next không còn left/right absolute */
.nix-core-carousel-arrow.prev { left: auto; }
.nix-core-carousel-arrow.next { right: auto; }

/* ── Controls wrapper: flex row, căn giữa, dưới carousel ── */
/* JS insert controls vào ngay sau .nix-core-carousel trong .nix-core-message-grid (2-col grid).
   Controls trở thành grid item thứ 3 → cần grid-column: 2 để nằm đúng cột carousel (cột phải).
   justify-self: center căn giữa trong cột đó. */
.nix-core-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Kéo lên sát carousel: bù cho row-gap 72px của grid + padding cột trái.
     margin-top âm để controls nằm ngay dưới ảnh thay vì sau gap lớn. */
  margin-top: -56px;
  /* Giữ đúng cột carousel trong 2-col grid */
  grid-column: 2;
  justify-self: center;
  align-self: start;
  width: 100%;
  position: relative;
  z-index: 5;
}

/* ── Dots bên trong controls wrapper ── */
.nix-core-carousel-controls .nix-core-carousel-dots {
  position: static;
  transform: none;
  bottom: auto;
  left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: auto;
}

.nix-core-carousel-controls .nix-core-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 86, 179, 0.25);   /* blue nhạt — NiX brand */
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.nix-core-carousel-controls .nix-core-carousel-dots button.is-active {
  width: 20px;
  background: var(--nix-cta, #0056B3);   /* NiX primary blue */
}

/* =========================================
   Roadmap Timeline – frontend = editor style
========================================= */

.nix-roadmap-timeline {
  overflow: visible !important;
}

.nix-roadmap-timeline .nix-container {
  width: min(94vw, 1600px);
  max-width: 1600px;
  overflow: visible !important;
}

/* Viewport: nền xanh nhạt, border bo góc, scroll ngang */
.nix-roadmap-timeline .nix-roadmap-scroll,
.nix-roadmap-timeline .nix-roadmap-viewport {
  width: 100%;
  max-width: none;
  background: #f4f9ff;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 56px 96px 72px !important;
  margin: 0 auto !important;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.nix-roadmap-timeline .nix-roadmap-scroll::-webkit-scrollbar,
.nix-roadmap-timeline .nix-roadmap-viewport::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .nix-roadmap-timeline .nix-container {
    width: 100%;
  }

  .nix-roadmap-timeline .nix-roadmap-scroll,
  .nix-roadmap-timeline .nix-roadmap-viewport {
    padding: 40px 32px 56px !important;
  }
}

.nix-roadmap-scroll::-webkit-scrollbar,
.nix-roadmap-viewport::-webkit-scrollbar {
  display: none;
}

.nix-roadmap-scroll.nix-is-dragging,
.nix-roadmap-viewport.nix-is-dragging {
  cursor: grabbing !important;
}

.nix-roadmap-scroll.nix-is-dragging *,
.nix-roadmap-viewport.nix-is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Track: đủ chiều cao, khoảng thở hai bên */
.nix-roadmap-track {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 520px !important;
  height: auto !important;
  min-width: max-content !important;
  width: max-content !important;
  padding: 0 80px !important;
}

/* SVG wave: absolute trong track, kích thước do JS điều khiển.
   Không dùng inset/width/height CSS vì track có overflow ngang —
   JS set scrollWidth để SVG phủ toàn bộ nội dung track, không chỉ visible area. */
.nix-roadmap-wave-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  display: block;
  /* width và height được set bởi JS = track.scrollWidth × track.offsetHeight */
}

/* Path: nét LIỀN, không dashed */
.nix-roadmap-wave-svg path {
  stroke: #b9d6f7;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: none;
  fill: none;
}

/* Z-index stack: wave(1) < item(2) < card(3) < dot(4) */
.nix-roadmap-item {
  position: relative;
  z-index: 2;
}

.nix-roadmap-card {
  z-index: 3;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}

.nix-roadmap-dot {
  z-index: 4 !important;
}

/* ================================================================
   ROADMAP DESKTOP FIXES (≥769px) — chỉ áp dụng desktop/laptop
   Lỗi 1: Card đè lên dot
   Lỗi 3: Button arrow lệch dọc
   Mobile (<769px) KHÔNG bị ảnh hưởng.
================================================================ */
@media (min-width: 769px) {

  /* ── Lỗi 1: Card is-top đang đè lên dot ─────────────────────
     dot is-top: top=130px (tâm). half-dot=8px → mép dưới dot=138px.
     Card cũ: top=10px, cao ~130–150px → mép dưới ≈140–160px → đè dot.
     Fix: dùng `bottom` anchor. Item height=400px, dot center=130px.
     Muốn card mép dưới ≤ 130 - 8(half) - 10(gap) = 112px từ top item.
     bottom = 400 - 112 = 288px.                                       */
  .nix-roadmap-item.nix-is-top .nix-roadmap-card,
  .nix-roadmap-item.is-top .nix-roadmap-card {
    top: auto !important;
    bottom: 288px;
  }

  /* ── Lỗi 1: Card is-bottom — đảm bảo không che dot ────────
     dot is-bottom: top=270px (tâm). half-dot=8px.
     Mép trên card phải ≥ 270 + 8 + 10(gap) = 288px.
     top cũ = 295px ≈ OK, nhưng chuẩn hóa về 288px.               */
  .nix-roadmap-item.nix-is-bottom .nix-roadmap-card,
  .nix-roadmap-item.is-bottom .nix-roadmap-card {
    top: 288px !important;
    bottom: auto;
  }

  /* Dot luôn render trên card */
  .nix-roadmap-dot {
    z-index: 5 !important;
  }

  /* ── Button arrow: layout only (icon is inline SVG) ── */
  .nix-roadmap-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nix-roadmap-controls button {
    width: 44px;
    height: 44px;
  }
}
/* ── END ROADMAP DESKTOP FIXES ── */

/* ================================================================
   HOME PAGE — MOBILE RESPONSIVE
   Tất cả selector đều scoped theo block wrapper.
   Không ảnh hưởng bất kỳ block nào của teammate.
   Breakpoints: max-width 767px (mobile) / max-width 1024px (tablet)
================================================================ */

/* ── Home mobile: global section spacing ────────────────────── */
@media (max-width: 767px) {
  .nix-section {
    padding-block: 56px;
    padding-inline: 20px;
  }

  /* Section title: H2 mobile = 28px */
  .nix-section-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 36px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .nix-section-lead {
    font-size: 15px;
    line-height: 1.75;
    margin-top: -18px;
    margin-bottom: 32px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ================================================================
   Home mobile: hero
================================================================ */
@media (max-width: 767px) {
  /* Dùng aspect-ratio thay cho height cứng — ảnh không bị méo */
  .nix-hero-carousel {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
  }

  /* Slide fill toàn bộ container */
  .nix-hero-slides,
  .nix-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Ảnh cover, không méo */
  .nix-hero-carousel .nix-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Arrow nhỏ gọn hơn */
  .nix-hero-carousel .nix-hero-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .nix-hero-carousel .nix-hero-prev { left: 12px; }
  .nix-hero-carousel .nix-hero-next { right: 12px; }

  /* Dots nhỏ gọn, dịch lên */
  .nix-hero-carousel .nix-hero-dots {
    bottom: 20px;
    gap: 7px;
  }

  .nix-hero-carousel .nix-hero-dots button {
    width: 6px;
    height: 6px;
  }

  .nix-hero-carousel .nix-hero-dots button.nix-is-active {
    width: 22px;
  }

  /* Scroll indicator gọn, đẩy lên khỏi dots */
  .nix-hero-carousel .nix-scroll-down {
    bottom: 52px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }
}

/* ================================================================
   Home mobile: core message (section 2 col → 1 col)
================================================================ */
@media (max-width: 767px) {
  .nix-core-message .nix-core-message-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .nix-core-message h1 {
    font-size: 32px;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .nix-core-message p {
    font-size: 17px;
    line-height: 1.75;
  }

  /* Carousel ảnh thu nhỏ về aspect-ratio */
  .nix-core-message .nix-core-carousel {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* ── Mobile: reset toàn bộ grid positioning + margin âm của controls ── */
  .nix-core-message-grid .nix-core-carousel-controls,
  .nix-core-carousel-controls {
    /* Reset desktop grid placement */
    grid-column: 1;
    grid-row: auto;
    justify-self: auto;
    align-self: auto;

    /* Reset margin âm dùng để bù gap desktop */
    margin-top: 14px;

    /* Flex row: prev — dots — next trên cùng một hàng */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;

    /* Không relative/absolute can thiệp vào ảnh */
    position: static;
    z-index: auto;
  }

  /* Arrows: static, không absolute */
  .nix-core-carousel-controls .nix-core-carousel-arrow {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
  }

  /* Dots: static, flex row */
  .nix-core-carousel-controls .nix-core-carousel-dots {
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 1 auto;
  }

  /* Dots buttons kích thước OK cho mobile */
  .nix-core-carousel-controls .nix-core-carousel-dots button {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
  }

  .nix-core-carousel-controls .nix-core-carousel-dots button.is-active {
    width: 20px;
  }
}

/* ================================================================
   Home mobile: LaaS process — card ngang gọn, arrow tách ngoài card
   Scope: .nix-laas-process
   Desktop: không thay đổi (toàn bộ trong @media max-width 767px)

   HTML structure (từ save() trong block-editor.js):
     .nix-process-flow
       .nix-process-step           ← mỗi step (position:relative)
         .nix-process-step-icon-wrap
         h3
         p
         span.nix-process-arrow    ← NẰM TRONG step, sẽ dùng absolute

   Giải pháp:
   - flow: flex column, gap: 40px (khoảng cho arrow)
   - step: grid 2-col [icon 56px | text 1fr], min-width:0 trên cột text
   - h3 + p nằm đúng cột 2, wrap bình thường
   - arrow: position absolute, bottom:-40px, giữa gap
================================================================ */
@media (max-width: 767px) {

  /* 1. Flow: gap lớn hơn để arrow có khoảng thở */
  .nix-laas-process .nix-process-flow {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 52px !important;
    grid-template-columns: none !important;
  }

  /* 2. Step: card trắng, grid 2-col [icon | text] */
  .nix-laas-process .nix-process-step {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    /* Hàng 1: icon + title | Hàng 2: icon (span) + desc | Hàng 3: arrow (0px, thoát ra ngoài) */
    grid-template-rows: auto auto 0 !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: start !important;
    text-align: left !important;
    padding: 18px 20px !important;
    background: #ffffff !important;
    border: 1px solid #e5edf7 !important;
    border-radius: 24px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07) !important;
    overflow: visible !important;
    /* Reset desktop */
    top: auto !important; right: auto !important; left: auto !important;
    width: 100% !important;
  }

  /* 3. Icon: cột 1, span 2 hàng nội dung */
  .nix-laas-process .nix-process-step .nix-process-step-icon-wrap {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 999px !important;
    background: #dbe7ff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .nix-laas-process .nix-process-step .nix-process-step-icon-wrap img {
    width: 52% !important; height: 52% !important;
    object-fit: contain !important; border-radius: 0 !important;
  }

  .nix-laas-process .nix-process-step .nix-process-step-icon-placeholder {
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important; background: #93b4e8 !important;
  }

  /* 4. Title: cột 2 hàng 1 — min-width:0 quan trọng để text wrap */
  .nix-laas-process .nix-process-step h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 5px !important;
    color: var(--nix-heading, #003f87) !important;
    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* 5. Description: cột 2 hàng 2 — min-width:0 để text wrap */
  .nix-laas-process .nix-process-step p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #374151 !important;
    margin: 0 !important;
    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* 6. Arrow: absolute, nằm CHÍNH GIỮA gap 40px bên dưới card
     - grid-row 3 có height 0 → arrow không chiếm chỗ trong card
     - position:absolute, dùng left:0 right:0 margin:auto thay vì left:50%+translate
       → đảm bảo canh giữa tuyệt đối theo chiều ngang của card (= 100% container)
       → không bị lệch theo nội dung 2-col bên trong card
     - bottom: -(gap/2 + height/2) = -(40px/2 + 28px/2) = -34px
       → arrow nằm chính giữa khoảng gap 40px
  */
  .nix-laas-process .nix-process-arrow {
    /* Thoát khỏi flow grid, không chiếm chỗ */
    position: absolute !important;
    grid-row: 3 !important;
    /* Canh giữa ngang: left:0 + right:0 + margin:auto → không bị lệch theo padding/column */
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Canh giữa dọc trong gap 40px: gap=40px, arrow height=28px → offset = 40/2 + 28/2 = 34px */
    bottom: -34px !important;
    top: auto !important;
    /* Vẽ arrow bằng flex */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 20px !important;
    height: 28px !important;
    /* Reset desktop styles */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 0 !important;         /* ẩn ký tự "→" */
    color: transparent !important;
    pointer-events: none !important;
    overflow: visible !important;
    padding: 0 !important;
    transform: none !important;      /* bỏ translateX(-50%) cũ */
  }

  /* Thân line dọc — gradient xanh nhạt */
  .nix-laas-process .nix-process-arrow::before {
    content: '' !important;
    display: block !important;
    width: 2px !important;
    height: 20px !important;
    background: linear-gradient(to bottom, #93c5fd 0%, #3b82f6 100%) !important;
    border-radius: 2px 2px 0 0 !important;
    flex-shrink: 0 !important;
  }

  /* Đầu tam giác — sát ngay dưới thân, không gap */
  .nix-laas-process .nix-process-arrow::after {
    content: '' !important;
    display: block !important;
    width: 0 !important; height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 7px solid #3b82f6 !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }

  /* Arrow của step cuối: ẩn */
  .nix-laas-process .nix-process-step:last-child .nix-process-arrow {
    display: none !important;
  }
}

/* ================================================================
   Home mobile: benefit comparison (導入がもたらす変革)
   Scope: .nix-benefits-comparison, .nix-benefit-scroll, .nix-benefit-row
   Desktop: giữ nguyên (min-width 840px + 3-col grid)

   HTML structure (từ render.php / save):
     .nix-benefit-scroll
       .nix-benefit-row              ← 1 cặp compare
         img (before)
         .nix-benefit-axis           ← icon + label ở giữa
           span / .nix-benefit-center-icon
           em (label text)
         img (after)

   Mobile: mỗi .nix-benefit-row thành 1 card wrapper riêng
================================================================ */
@media (max-width: 767px) {

  /* ── Container: flex column, gap giữa các pair ── */
  .nix-benefits-comparison .nix-benefit-scroll,
  .nix-strength-accordion .nix-benefit-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* ── Mỗi row = card wrapper ── */
  .nix-benefit-row {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5edf7 !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
    overflow: visible !important;   /* visible: không clip chữ mép trên */
    padding: 12px !important;
    grid-template-columns: none !important;
    margin-bottom: 0 !important;
  }

  /* ── Ảnh Before (card trắng): border xanh nhạt, bỏ shadow/clip ── */
  .nix-benefit-row > img:first-of-type {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 190px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important;
    border-radius: 22px !important;
    border: 1.5px solid #BFD7F2 !important;
    clip-path: none !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  /* ── Axis: divider hàng giữa — line trái + icon + label + line phải ── */
  /* DOM order: ::before(line) | span.icon | em.label | ::after(line)    */
  /* Dùng flex row + ::before/::after làm đường kẻ hai bên               */
  .nix-benefit-row .nix-benefit-axis {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    /* Reset desktop grid */
    place-items: unset !important;
  }

  /* Line trái của divider */
  .nix-benefit-row .nix-benefit-axis::before {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent 0%, #bfdbfe 100%) !important;
    display: block !important;
    /* Không có order → nằm đầu tiên theo DOM (::before) → bên trái */
  }

  /* Line phải của divider */
  .nix-benefit-row .nix-benefit-axis::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to left, transparent 0%, #bfdbfe 100%) !important;
    display: block !important;
    /* Không có order → nằm cuối cùng (::after) → bên phải */
  }

  /* Icon ở giữa divider — bỏ order, giữ nguyên vị trí theo DOM */
  .nix-benefit-row .nix-benefit-axis > span,
  .nix-benefit-row .nix-benefit-center-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    /* Căn giữa theo chiều dọc — đã được align-items: center ở flex parent */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nix-benefit-row .nix-benefit-center-icon-img {
    width: 18px !important;
    height: 18px !important;
  }

  /* Label text — cùng hàng với icon, căn giữa dọc */
  .nix-benefit-row .nix-benefit-axis em {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #334155 !important;
    font-style: normal !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 120px !important;
    flex-shrink: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Ảnh After: dưới divider ── */
  /* ── Ảnh After: cùng quy tắc ── */
  .nix-benefit-row > img:last-of-type {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;   /* đồng nhất với before */
    min-height: 190px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border-radius: 22px !important;
    clip-path: inset(0 round 22px) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 18px rgba(15,23,42,.12)) drop-shadow(0 2px 5px rgba(15,23,42,.07)) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  /* ── Reset accordion panel padding khi benefit nằm trong accordion ── */
  .nix-strength-accordion .nix-accordion-item.nix-is-open .nix-accordion-panel {
    padding: 12px 18px 22px 18px !important;
  }
}

/* ================================================================
   Home mobile: services — featured card lên đầu, 1 cột
================================================================ */
@media (max-width: 767px) {
  .nix-services-section .nix-services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    /* Featured card lên đầu bằng order */
    display: flex;
    flex-direction: column;
  }

  /* Featured card: order -1 → lên đầu */
  .nix-services-section .nix-service-card.is-featured {
    order: -1;
    margin-top: 0;
    margin-bottom: 0;
    /* Vẫn nổi bật hơn qua shadow & background */
    box-shadow: 0 20px 48px rgba(0, 63, 135, 0.28);
  }

  /* Card thường */
  .nix-services-section .nix-service-card {
    padding: 24px 22px 22px;
    order: 0;
  }

  /* CTA full width */
  .nix-services-section .nix-service-card__cta {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* Tiêu đề card */
  .nix-services-section .nix-service-card__title {
    font-size: 18px;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Desc */
  .nix-services-section .nix-service-card__desc {
    font-size: 13px;
    line-height: 1.75;
  }

  /* Bullet items */
  .nix-services-section .nix-service-card__feature {
    font-size: 13px;
    line-height: 1.65;
  }

  /* Badge num nhỏ */
  .nix-services-section .nix-service-card__num {
    font-size: 11px;
  }
}

/* ================================================================
   Home mobile: home case study — snap scroll ngang đẹp
================================================================ */
@media (max-width: 767px) {
  /* Header gọn */
  .nix-home-case-study__header {
    margin-bottom: 28px;
  }

  .nix-home-case-study .nix-section-title {
    font-size: 28px;
    margin-bottom: 16px;
    word-break: keep-all;
  }

  .nix-home-case-study .nix-section-lead,
  .nix-home-case-study__subtitle {
    font-size: 15px;
    line-height: 1.75;
  }

  /* Viewport: snap scroll ngang */
  .nix-home-case-study__viewport {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 20px 32px;
    /* Kéo viewport tràn ra edge màn hình */
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }

  .nix-home-case-study__viewport::-webkit-scrollbar {
    display: none;
  }

  /* Track: no-wrap, khoảng cách gọn */
  .nix-home-case-study__track {
    flex-wrap: nowrap;
    gap: 16px;
    /* Padding đầu/cuối để card đầu/cuối không bị cắt */
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Mỗi card snap vào giữa, ~85% viewport */
  .nix-home-case-study__card,
  .nix-home-case-study__track--static .nix-home-case-study__card {
    flex: 0 0 82vw;
    min-width: 0;
    max-width: 340px;
    min-height: 0;
    scroll-snap-align: start;
  }

  /* Media ảnh thu nhỏ nhẹ */
  .nix-home-case-study__media,
  .nix-home-case-study__placeholder {
    height: 180px;
  }

  /* Content padding gọn */
  .nix-home-case-study__content {
    padding: 18px 20px 22px;
  }

  .nix-home-case-study__label {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .nix-home-case-study__title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .nix-home-case-study__desc {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
    /* Giới hạn 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .nix-home-case-study__cta {
    font-size: 16px;
  }

  /* Controls (prev/next) ẩn đi — dùng swipe thay thế */
  .nix-home-case-study__controls {
    display: none;
  }
}

/* Tablet: 2 card */
@media (min-width: 768px) and (max-width: 1024px) {
  .nix-home-case-study__card,
  .nix-home-case-study__track--static .nix-home-case-study__card {
    flex: 0 0 calc((100% - 28px) / 2);
    min-width: 0;
  }
}

/* ================================================================
   Home mobile: roadmap — LAYOUT DỌC ở mobile
   Thay thế hoàn toàn layout ngang (absolute positioning + wave SVG)
   bằng danh sách dọc đơn giản, dễ đọc.
================================================================ */
@media (max-width: 767px) {
  .nix-roadmap-timeline {
    min-height: 0;
  }

  .nix-roadmap-timeline .nix-container {
    width: 100%;
    padding-inline: 0;
  }

  /* Viewport: reset scroll ngang, cho phép height tự nhiên */
  .nix-roadmap-timeline .nix-roadmap-scroll,
  .nix-roadmap-timeline .nix-roadmap-viewport {
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    cursor: default !important;
    touch-action: auto !important;
    padding: 24px 20px 32px !important;
    border-radius: 16px;
    scroll-snap-type: none !important;
  }

  /* Track: flex dọc thay vì flex ngang */
  .nix-roadmap-timeline .nix-roadmap-track,
  .nix-roadmap-track {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
    /* Đường kẻ dọc trái */
    border-left: 3px solid #b9d6f7;
    margin-left: 12px;
  }

  /* Wave SVG: ẩn hoàn toàn ở mobile */
  .nix-roadmap-wave-svg {
    display: none !important;
  }

  /* Item: reset absolute positioning */
  .nix-roadmap-item,
  .nix-roadmap-item.nix-is-top,
  .nix-roadmap-item.nix-is-bottom,
  .nix-roadmap-item.is-top,
  .nix-roadmap-item.is-bottom {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 28px 24px !important;
    inset: auto !important;
    transform: none !important;
    scroll-snap-align: none !important;
  }

  /* Dot: absolute bên trái, gắn vào đường kẻ */
  .nix-roadmap-dot {
    position: absolute !important;
    left: -12px !important;
    top: 22px !important;
    transform: translateX(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    z-index: 3 !important;
  }

  /* Year (em không có class trong save()) */
  .nix-roadmap-item em,
  .nix-roadmap-item.nix-is-top em,
  .nix-roadmap-item.nix-is-bottom em,
  .nix-roadmap-item.is-top em,
  .nix-roadmap-item.is-bottom em {
    position: static !important;
    display: block !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: #0056b3 !important;
    margin-bottom: 8px !important;
    white-space: normal !important;
  }

  /* Card: reset absolute, full width */
  .nix-roadmap-card,
  .nix-roadmap-item.nix-is-top .nix-roadmap-card,
  .nix-roadmap-item.nix-is-bottom .nix-roadmap-card,
  .nix-roadmap-item.is-top .nix-roadmap-card,
  .nix-roadmap-item.is-bottom .nix-roadmap-card {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .nix-roadmap-card strong {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .nix-roadmap-card p {
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    margin: 0;
  }

  /* Controls — ẩn ở mobile vì không còn scroll ngang */
  .nix-roadmap-timeline .nix-roadmap-controls {
    display: none !important;
  }
}

/* ================================================================
   Home mobile: navbar — spacing & sticky fix
================================================================ */
@media (max-width: 767px) {
  /* Header inner height nhỏ hơn desktop (72px → 60px) */
  .nix-site-header .nix-header__inner,
  .nix-global-header .nix-global-header__inner {
    height: 60px !important;
    min-height: 60px !important;
  }

  /* Logo text nhỏ hơn nếu dùng text fallback */
  .nix-header__logo-text {
    font-size: 18px;
  }

/* ── Logo: img + text nằm ngang ── */
.nix-header__logo a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none;
}
.nix-header__logo-img,
.nix-header__logo img {
  height: 36px !important;
  width: auto !important;
  display: block !important;
  flex-shrink: 0 !important;
  max-width: none !important;
}

  /* Actions: chỉ hiện hamburger, ẩn CTA text trên mobile rất nhỏ */
  .nix-header__actions .nix-btn-primary {
    font-size: 13px;
    padding: 8px 14px;
    min-height: 36px;
  }
}

/* ================================================================
   Home mobile: problem cards — 1 col stack
================================================================ */
@media (max-width: 767px) {
  .nix-problem-cards .nix-card-grid-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .nix-problem-cards .nix-card {
    min-height: 0;
    padding: 20px 20px 22px;
  }

  .nix-problem-cards .nix-card-number {
    font-size: 40px;
  }

  .nix-problem-cards .nix-card h3 {
    font-size: 20px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .nix-problem-cards .nix-card p {
    font-size: 16px;
    line-height: 1.75;
  }
}

/* ================================================================
   Home mobile: core pillars — 2 cột đều, icon constrained, text dễ đọc
   Scope: .nix-pillars — không ảnh hưởng block khác.
================================================================ */
@media (max-width: 767px) {
  .nix-pillars .nix-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .nix-pillars .nix-pillar-card {
    height: 100% !important;
    min-height: 160px !important;
    padding: 18px 16px 20px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Icon wrap: circle giữ nguyên tròn trên mobile */
  .nix-pillars .nix-pillar-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin-bottom: 14px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  /* Img bên trong wrapper: contain trên mobile */
  .nix-pillars .nix-pillar-icon-wrap .nix-pillar-icon {
    width: 26px !important;
    height: 26px !important;
    max-width: 60% !important;
    max-height: 60% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Fallback: img không wrapper (markup cũ) */
  .nix-pillars .nix-pillar-card > .nix-pillar-icon {
    width: 26px !important;
    height: 26px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin-bottom: 14px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }

  .nix-pillars .nix-pillar-icon-placeholder {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    margin-bottom: 14px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }

  /* Title */
  .nix-pillars .nix-pillar-card h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    color: var(--nix-heading, #003f87) !important;
  }

  /* Description */
  .nix-pillars .nix-pillar-card p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
    margin: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    flex-grow: 1 !important;
  }
}

/* Card 5 lẻ: span 2 cột → căn giữa trên 380–767px */
@media (min-width: 381px) and (max-width: 767px) {
  .nix-pillars .nix-pillars-grid .nix-pillar-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: calc(50% - 6px) !important;
    margin: 0 auto !important;
  }
}

/* Rất nhỏ: 1 cột */
@media (max-width: 380px) {
  .nix-pillars .nix-pillars-grid {
    grid-template-columns: 1fr !important;
  }

  .nix-pillars .nix-pillar-card {
    min-height: auto !important;
  }

  .nix-pillars .nix-pillars-grid .nix-pillar-card:last-child:nth-child(odd) {
    grid-column: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ================================================================
   Home mobile: strength accordion (独自のエコシステム)
   Scope: .nix-strength-accordion
================================================================ */
@media (max-width: 767px) {

  /* Container */
  .nix-strength-accordion .nix-accordion {
    gap: 12px !important;
  }

  .nix-strength-accordion .nix-accordion-item {
    border-radius: 20px !important;
  }

  /* Header: 3-col grid — [số] [title+sub] [chevron] */
  .nix-strength-accordion .nix-accordion-header {
    grid-template-columns: 48px 1fr 44px !important;
    gap: 12px !important;
    padding: 16px 16px 16px 18px !important;
    align-items: center !important;
  }

  /* Số thứ tự (cũ) — đã ẩn toàn cục, giữ rule này để an toàn khi block chưa resave */
  .nix-strength-accordion .nix-accordion-number {
    display: none !important;
  }

  /* Icon circle — mobile: nhỏ hơn desktop một chút */
  .nix-strength-accordion .nix-accordion-icon-circle {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
  }

  /* Title text */
  .nix-strength-accordion .nix-accordion-header strong {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    display: block !important;
  }

  /* Subtitle */
  .nix-strength-accordion .nix-accordion-header em {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--nix-muted) !important;
    word-break: keep-all !important;
    display: block !important;
    margin-top: 3px !important;
  }

  /* Chevron: cột cuối, canh giữa chiều dọc, đủ padding tap target */
  .nix-strength-accordion .nix-accordion-chevron {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  /* Panel mở: bỏ padding-left lớn desktop (102px) */
  .nix-strength-accordion .nix-accordion-item.nix-is-open .nix-accordion-panel {
    padding: 12px 18px 22px 18px !important;
  }

  /* Chips: wrap đẹp, gap nhỏ */
  .nix-strength-accordion .nix-chip-row {
    gap: 6px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
  }

  .nix-strength-accordion .nix-chip-row span {
    font-size: 14px !important;
    padding: 4px 9px !important;
    line-height: 1.5 !important;
  }

  /* Nội dung text trong panel */
  .nix-strength-accordion .nix-accordion-panel p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
}

/* ================================================================
   Home mobile: footer — 1 col
================================================================ */
@media (max-width: 767px) {
  .nix-footer.nix-site-footer .nix-footer-grid,
  .nix-footer .nix-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .nix-footer {
    padding-block: 40px;
    padding-inline: 20px;
  }
}

/* ================================================================
   Tablet tweaks (768–1024px)
================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Hero: aspect-ratio thoáng hơn mobile */
  .nix-hero-carousel {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  /* Service: 1 col */
  .nix-services-section .nix-services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    display: flex;
    flex-direction: column;
  }

  .nix-services-section .nix-service-card.is-featured {
    order: -1;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Controls: dưới timeline, căn giữa, không absolute */
.nix-roadmap-controls {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  pointer-events: auto;
  z-index: 10;
}

.nix-roadmap-controls button {
  width: 44px;
  height: 44px;
  pointer-events: auto;
}

/* ================================================================
   Home mobile: typography scoped — chỉ 3 section process/pillars/benefit
   Không ảnh hưởng các section khác.
================================================================ */
@media (max-width: 767px) {
  /* Section title */
  .nix-laas-process .nix-section-title,
  .nix-pillars .nix-section-title,
  .nix-benefits-comparison .nix-section-title,
  .nix-strength-accordion .nix-section-title {
    font-size: clamp(28px, 7vw, 34px);
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Section lead */
  .nix-laas-process .nix-section-lead,
  .nix-pillars .nix-section-lead,
  .nix-benefits-comparison .nix-section-lead,
  .nix-strength-accordion .nix-section-lead {
    font-size: 17px;
    line-height: 1.75;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* Paragraph fallback */
  .nix-laas-process p,
  .nix-pillars p,
  .nix-benefits-comparison p,
  .nix-strength-accordion p {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ================================================================
   MOBILE RESTORE — Khôi phục giao diện mobile theo main_old.css
   Tất cả rules nằm trong max-width: 767px / 768px.
   KHÔNG thay đổi bất kỳ rule nào bên ngoài media query.
   Desktop (≥769px) giữ nguyên main.css mới.
================================================================ */

/* ── 1. Global: section spacing + section-title + section-lead ── */
@media (max-width: 767px) {
  /* Section title: H2 mobile = 28px */
  .nix-section-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 36px;
  }

  /* Section lead: body mobile = 15px */
  .nix-section-lead {
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-top: -18px;
    margin-bottom: 32px;
  }

  /* Button: btn mobile = 15px / font-weight 600 */
  .nix-button {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

/* ── 2. Core Message mobile ── */
@media (max-width: 767px) {
  /* h1: H1 mobile = 32px */
  .nix-core-message h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  /* p: body mobile = 15px */
  .nix-core-message p {
    font-size: 15px !important;
  }
}

/* ── 3. LaaS Process mobile — H3 mobile = 20px, body mobile = 15px ── */
@media (max-width: 767px) {
  /* step h3: H3 mobile = 20px */
  .nix-laas-process .nix-process-step h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  /* step p: body mobile = 15px */
  .nix-laas-process .nix-process-step p {
    font-size: 15px !important;
  }
}

/* ── 4. Core Pillars mobile — H3 mobile = 20px, body mobile = 15px ── */
@media (max-width: 767px) {
  /* pillar h3: H3 mobile = 20px */
  .nix-pillars .nix-pillar-card h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
  }

  /* pillar p: body mobile = 15px */
  .nix-pillars .nix-pillar-card p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
}

/* ── 5. Strength Accordion mobile — H4 mobile=16px, body mobile=15px ── */
@media (max-width: 767px) {
  /* header strong: H4 mobile = 16px (label role) */
  .nix-strength-accordion .nix-accordion-header strong {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* header em: small/caption mobile = 13px */
  .nix-strength-accordion .nix-accordion-header em {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 3px !important;
  }

  /* chip span: xs mobile = 13px */
  .nix-strength-accordion .nix-chip-row span {
    font-size: 13px !important;
    padding: 4px 9px !important;
    line-height: 1.5 !important;
  }

  /* panel p: body mobile = 15px */
  .nix-strength-accordion .nix-accordion-panel p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
}

/* ── 6. Benefits Comparison mobile — khôi phục font-size cũ ── */
@media (max-width: 767px) {
  /* benefit axis em: bản cũ 12px; bản mới set 16px */
  .nix-benefit-row .nix-benefit-axis em {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #334155 !important;
    max-width: 120px !important;
  }
}

/* ── 7. Problem Cards mobile — H3 mobile=20px, body mobile=15px ── */
@media (max-width: 767px) {
  /* card-number: decorative large number */
  .nix-problem-cards .nix-card-number {
    font-size: 40px !important;
  }

  /* card h3: H3 mobile = 20px */
  .nix-problem-cards .nix-card h3 {
    font-size: 20px !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* card p: body mobile = 15px */
  .nix-problem-cards .nix-card p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
}

/* ── 8. Home Case Study mobile — H2 mobile=28px, H3 mobile=20px, body=15px ── */
@media (max-width: 767px) {
  /* section-title scoped: H2 mobile = 28px */
  .nix-home-case-study .nix-section-title {
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }

  /* section-lead scoped: body mobile = 15px */
  .nix-home-case-study .nix-section-lead,
  .nix-home-case-study__subtitle {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  /* label: caption mobile = 13px */
  .nix-home-case-study__label {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  /* card title: H3 mobile = 20px */
  .nix-home-case-study__title {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  /* desc: body mobile = 15px */
  .nix-home-case-study__desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }

  /* cta: btn mobile = 15px */
  .nix-home-case-study__cta {
    font-size: 15px !important;
  }
}

/* ── 9. Scoped section titles (process/pillars/benefit/accordion) ── */
@media (max-width: 767px) {
  /* H2 mobile = 28px */
  .nix-laas-process .nix-section-title,
  .nix-pillars .nix-section-title,
  .nix-benefits-comparison .nix-section-title,
  .nix-strength-accordion .nix-section-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* Section lead scoped: body mobile = 15px */
  .nix-laas-process .nix-section-lead,
  .nix-pillars .nix-section-lead,
  .nix-benefits-comparison .nix-section-lead,
  .nix-strength-accordion .nix-section-lead {
    font-size: 15px !important;
    line-height: 1.75 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
}

/* ── 10. Service cards + misc mobile overrides ── */
@media (max-width: 767px) {

  /* Service card badge: caption mobile = 13px */
  .nix-service-card__badge {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* Service card desc: body mobile = 15px */
  .nix-service-card__desc {
    font-size: 15px !important;
  }

  /* Service card feature: body mobile = 15px */
  .nix-service-card__feature {
    font-size: 15px !important;
  }

  /* Service card cta: btn mobile = 15px / weight 600 */
  .nix-service-card__cta {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* Service card num: small */
  .nix-service-card__num {
    font-size: 13px !important;
  }

  /* Benefit axis em: xs mobile = 13px */
  .nix-benefit-axis em {
    font-size: 13px;
    width: 112px;
  }

  /* Chip row span: xs mobile = 13px */
  .nix-chip-row span {
    font-size: 13px !important;
  }

  /* Benefits headers: body mobile = 15px */
  .nix-benefits-comparison .nix-benefits-headers {
    font-size: 15px;
    font-weight: 600;
  }

  /* Roadmap card text mobile: H4 mobile=16px, body mobile=15px */
  .nix-roadmap-card strong {
    font-size: 16px;
  }
  .nix-roadmap-card p {
    font-size: 15px;
  }
}

/* ── 11. ROADMAP MOBILE — khôi phục layout scroll ngang của bản cũ ── */
/* Bản mới đã đổi roadmap mobile sang layout DỌC (flex column + border-left).
   Override lại về layout NGANG (scroll-snap) của main_old.css.              */
@media (max-width: 767px) {
  .nix-roadmap-timeline {
    min-height: 0;
  }

  .nix-roadmap-timeline .nix-container {
    width: 100%;
    padding-inline: 0;
  }

  /* Viewport: khôi phục scroll ngang + snap */
  .nix-roadmap-timeline .nix-roadmap-scroll,
  .nix-roadmap-timeline .nix-roadmap-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    min-width: unset !important;
    height: auto !important;
    min-height: unset !important;
    cursor: grab !important;
    touch-action: pan-y !important;
    padding: 32px 16px 48px !important;
    border-radius: 16px;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Track: khôi phục flex ngang (thay thế flex column của bản mới) */
  .nix-roadmap-timeline .nix-roadmap-track,
  .nix-roadmap-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: unset !important;
    width: max-content !important;
    min-width: max-content !important;
    height: auto !important;
    min-height: 380px !important;
    padding: 0 24px !important;
    position: relative !important;
    /* Xóa border-left dọc của bản mới */
    border-left: none !important;
    margin-left: 0 !important;
  }

  /* Wave SVG: hiển thị lại (bản mới ẩn) */
  .nix-roadmap-wave-svg {
    display: block !important;
  }

  /* Item: khôi phục kích thước và vị trí absolute */
  .nix-roadmap-item,
  .nix-roadmap-item.nix-is-top,
  .nix-roadmap-item.nix-is-bottom,
  .nix-roadmap-item.is-top,
  .nix-roadmap-item.is-bottom {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 200px !important;
    height: 380px !important;
    margin: 0 12px !important;
    padding: 0 !important;
    inset: auto !important;
    transform: none !important;
    scroll-snap-align: center;
  }

  /* Dot: khôi phục vị trí absolute */
  .nix-roadmap-dot {
    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 14px !important;
    height: 14px !important;
    z-index: 3 !important;
  }

  .nix-roadmap-item.nix-is-top .nix-roadmap-dot,
  .nix-roadmap-item.is-top .nix-roadmap-dot {
    top: 110px !important;
  }

  .nix-roadmap-item.nix-is-bottom .nix-roadmap-dot,
  .nix-roadmap-item.is-bottom .nix-roadmap-dot {
    top: 220px !important;
  }

  /* Year em: khôi phục vị trí absolute */
  .nix-roadmap-item em,
  .nix-roadmap-item.nix-is-top em,
  .nix-roadmap-item.nix-is-bottom em,
  .nix-roadmap-item.is-top em,
  .nix-roadmap-item.is-bottom em {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--nix-heading, #003f87) !important;
    white-space: nowrap !important;
    margin-bottom: 0 !important;
  }

  .nix-roadmap-item.nix-is-top em,
  .nix-roadmap-item.is-top em {
    top: 130px !important;
  }

  .nix-roadmap-item.nix-is-bottom em,
  .nix-roadmap-item.is-bottom em {
    top: 198px !important;
  }

  /* Card: khôi phục absolute positioning */
  .nix-roadmap-card,
  .nix-roadmap-item.nix-is-top .nix-roadmap-card,
  .nix-roadmap-item.nix-is-bottom .nix-roadmap-card,
  .nix-roadmap-item.is-top .nix-roadmap-card,
  .nix-roadmap-item.is-bottom .nix-roadmap-card {
    position: absolute !important;
    left: 50% !important;
    width: 180px !important;
    max-width: 180px !important;
    transform: translateX(-50%) !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    top: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
  }

  .nix-roadmap-item.nix-is-top .nix-roadmap-card,
  .nix-roadmap-item.is-top .nix-roadmap-card {
    top: 8px !important;
  }

  .nix-roadmap-item.nix-is-bottom .nix-roadmap-card,
  .nix-roadmap-item.is-bottom .nix-roadmap-card {
    top: 230px !important;
  }

  /* Card text: bản cũ 14px/12px */
  .nix-roadmap-card strong {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .nix-roadmap-card p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Controls: hiển thị (bản mới ẩn) */
  .nix-roadmap-timeline .nix-roadmap-controls {
    display: flex !important;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
  }

  .nix-roadmap-timeline .nix-roadmap-controls button {
    width: 36px !important;
    height: 36px !important;
  }

  .nix-roadmap-timeline .nix-roadmap-controls button svg,
  .nix-roadmap-timeline .nix-roadmap-control svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* =========================================================
   Fix iPhone Safari responsive
   Đặt ở CUỐI CÙNG của main.css
========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .nix-core-message,
  .nix-core-message .nix-container,
  .nix-core-message-grid,
  .nix-core-message-grid > *,
  .nix-actions,
  .nix-core-carousel,
  .nix-core-carousel-controls {
    min-width: 0;
    max-width: 100%;
  }

  .nix-core-message .nix-core-message-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Tiêu đề vẫn giữ xuống dòng thủ công */
  .nix-core-message h1 {
    white-space: pre-line !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Cho phép tiếng Nhật tự xuống dòng */
  .nix-core-message p {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .nix-actions {
    width: 100%;
  }

  .nix-actions .nix-button {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .nix-core-message .nix-core-carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
}
/* Fix LaaS Process icons wrapped by Imagify picture */
.nix-laas-process .nix-process-step-icon-wrap picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  line-height: 0 !important;
}

.nix-laas-process .nix-process-step-icon-wrap picture img,
.nix-laas-process .nix-process-step-icon-wrap > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
/* ── END MOBILE RESTORE ── */

/* ── Core Message: ẩn nút secondary, primary 80% width ──────── */
/* Chỉ áp dụng trong .nix-core-message, không ảnh hưởng nút khác */
.nix-core-message .nix-actions .nix-button-secondary {
  display: none;
}

.nix-core-message .nix-actions .nix-button-primary {
  width: 80%;
  max-width: 480px;
}

/* Mobile: vẫn full-width */
@media (max-width: 767px) {
  .nix-core-message .nix-actions .nix-button-primary {
    width: 100%;
    max-width: 100%;
  }
}