/* ==========================================================================
   CONEK Design System

   Bộ nhận diện lấy từ logo CONEK.
   Gold  #E9B41F  |  Cyan #1991BD  |  White #FFFFFF

   Đã thử bảng màu xanh #0057FF của 6 landing page mẫu và bỏ (08/09/2026):
   vàng của logo mới là màu chính. Giữ lại từ đợt đó những phần không phải
   màu — bo góc tròn hơn, đổ bóng nhiều lớp, letter-spacing và line-height
   riêng cho từng cấp tiêu đề.
   ========================================================================== */

:root {
  /* --- Brand core --- */
  --gold-50: #FEF9E9;
  --gold-100: #FDF0C5;
  --gold-200: #FAE28C;
  --gold-300: #F5CF52;
  --gold-400: #EFC133;
  --gold-500: #E9B41F; /* PRIMARY — logo */
  --gold-600: #C99714;
  --gold-700: #A0770F;
  --gold-800: #6E520A;

  --cyan-50: #E9F6FB;
  --cyan-100: #C9EAF5;
  --cyan-200: #93D5EC;
  --cyan-300: #55BCDD;
  --cyan-400: #2BA4CD;
  --cyan-500: #1991BD; /* SECONDARY — logo */
  --cyan-600: #13749A;
  --cyan-700: #0F5A77;
  --cyan-800: #0A3C50;
  --cyan-900: #072937;

  /* --- Neutrals --- */
  --ink-900: #0B1B24;
  --ink-800: #122A36;
  --ink-700: #1D3A49;
  --ink-600: #375866;
  --ink-500: #5B7987;
  --ink-400: #8AA2AD;
  --ink-300: #B9CAD2;
  --ink-200: #DCE6EA;
  --ink-100: #EFEDE7;
  --ink-50: #F7F6F2;
  --white: #FFFFFF;

  /* --- Semantic --- */
  --bg: var(--white);
  --bg-soft: var(--ink-50);
  --bg-dark: var(--cyan-900);
  --text: var(--ink-800);
  --text-muted: var(--ink-500);
  --border: var(--ink-200);
  --success: #17A673;
  --danger: #E0523E;

  /* --- Type --- */
  --font-sans: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.42vw, 1.4rem);
  --step-2: clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem);
  --step-3: clamp(1.25rem, 1.06rem + 0.72vw, 1.625rem);
  --step-4: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem);
  --step-5: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem);

  /* --- Space / shape --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Nhiều lớp như bản mẫu: một lớp gần nét, một lớp xa và mềm */
  --shadow-sm: 0 1px 2px rgba(11, 27, 36, 0.04), 0 1px 3px rgba(11, 27, 36, 0.06);
  --shadow-md: 0 1px 16px -4px rgba(11, 27, 36, 0.08);
  --shadow-lg: 0 12px 24px -8px rgba(11, 27, 36, 0.12), 0 4px 8px -4px rgba(11, 27, 36, 0.06);
  --shadow-xl: 0 24px 48px -16px rgba(11, 27, 36, 0.16), 0 8px 16px -8px rgba(11, 27, 36, 0.10);
  --shadow-gold: none;
  --shadow-cyan: none;

  /* Viền sáng quanh thẻ — bản demo dùng 11 chỗ. Khác với border thường ở chỗ
     nó là một lớp đổ bóng mảnh, nên không chiếm chỗ trong hộp và không làm
     lệch bố cục khi bật tắt. Màu lấy từ vàng logo. */
  --ring: 0 0 0 1px rgba(233, 180, 31, 0.16);
  --ring-strong: 0 0 0 1px rgba(233, 180, 31, 0.38);
  --ring-cyan: 0 0 0 1px rgba(25, 145, 189, 0.18);

  /* Nền chuyển sắc rất nhẹ cho các dải mục. Một dải phẳng liền mạch dễ làm
     trang dài trông đơn điệu; chuyển sắc 2-3% đủ để mắt phân biệt được mục
     mà không thành hiệu ứng. */
  --grad-soft: linear-gradient(to bottom, var(--white) 0%, var(--ink-50) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-50) 0%, var(--white) 62%);

  --container: 1180px;
  --nav-h: 74px;
}

/* --------------------------------------------------------------- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-600); text-decoration: none; }
a:hover { color: var(--cyan-500); }
h1, h2, h3, h4 { margin: 0 0 var(--sp-4); font-weight: 800; color: var(--ink-900); }
/* Bản mẫu đặt line-height và letter-spacing riêng cho từng cấp: chữ càng
   lớn thì càng phải bó sát, dùng một giá trị chung cho cả h1..h4 sẽ làm
   tiêu đề lớn bị rời rạc và tiêu đề nhỏ bị chật. */
h1 { font-size: var(--step-5); line-height: 1.08; letter-spacing: -0.032em; }
h2 { font-size: var(--step-4); line-height: 1.17; letter-spacing: -0.022em; }
h3 { line-height: 1.26; letter-spacing: -0.016em; }
h4 { line-height: 1.3; letter-spacing: -0.012em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--sp-4); }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------- Utilities --- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding: var(--sp-9) 0; position: relative; }
.section--tight { padding: var(--sp-8) 0; }
/* Chuyển sắc thay cho một màu đặc: trang dài 19 mục mà mục nào cũng phẳng
   thì mắt không có mốc để nghỉ. Biên độ chỉ 3% nên vẫn đọc ra là nền trắng. */
.section--soft { background: var(--grad-soft); }
.section--dark { background: var(--bg-dark); color: var(--ink-200); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.section--dark .muted,
.cta-band .muted { color: var(--cyan-200); }
.lead { font-size: var(--step-1); color: var(--text-muted); line-height: 1.6; }
.section--dark .lead,
.cta-band .lead { color: var(--cyan-100); }
.narrow { max-width: 720px; margin-inline: auto; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--sp-6); }

/* Nhãn dạng viên thuốc, theo bản demo. Trước đây là chữ hoa gạch chân —
   gạch chân chạy hết chiều rộng chữ nên với nhãn dài trông như tiêu đề bị
   gạch, còn viên thuốc thì luôn đọc ra là nhãn. Chấm tròn phía trước lấy từ
   demo, giúp mắt bắt được điểm bắt đầu của mục. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-600);
  padding: 6px 14px; margin-bottom: var(--sp-4);
  border: 1px solid var(--gold-200); border-radius: var(--r-pill);
  background: var(--gold-50);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%; background: var(--gold-500);
}
.section--dark .eyebrow,
.cta-band .eyebrow {
  color: var(--cyan-100); background: rgba(255, 255, 255, 0.08);
  border-color: rgba(233, 180, 31, 0.45);
}
.section--dark .eyebrow::before,
.cta-band .eyebrow::before { background: var(--gold-400); }

.section-head { max-width: 760px; margin: 0 auto var(--sp-7); text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

/* Trước đây là chữ gradient gold→cyan. Đó là dấu hiệu rõ nhất của giao diện
   máy sinh: gradient trên chữ tiêu đề. Thay bằng một màu vàng đậm đặc — dứt
   khoát, đọc rõ, và vẫn là màu thương hiệu. */
.grad-text { color: var(--gold-700); }

/* ------------------------------------------------------------- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; line-height: 1;
  padding: 14px 26px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--gold-500); color: var(--ink-900); box-shadow: var(--shadow-gold); }
.btn--primary:hover { background: var(--gold-400); color: var(--ink-900); }
.btn--cyan { background: var(--cyan-500); color: var(--white); box-shadow: var(--shadow-cyan); }
.btn--cyan:hover { background: var(--cyan-400); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-200); }
.btn--ghost:hover { border-color: var(--gold-500); color: var(--ink-900); background: var(--gold-50); }
.section--dark .btn--ghost,
.cta-band .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.42); }
.section--dark .btn--ghost:hover,
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--gold-400); color: var(--white); }
.btn--sm { padding: 11px 20px; font-size: var(--step--1); }
.btn--lg { padding: 18px 34px; font-size: var(--step-1); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.center .btn-row, .btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------- Nav ---- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
/* Khi đã cuộn, menu phải ĐỤC hoàn toàn.
   Nếu để nền mờ (rgba + blur), nội dung phía dưới hiện xuyên qua trông như
   "dính một mẩu của khối trước". */
.nav.is-stuck {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav__inner { display: flex; align-items: center; gap: var(--sp-5); width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.nav__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav__logo { height: 34px; width: auto; }
.nav__brand-sep { width: 1px; height: 24px; background: var(--border); }
.nav__brand-name { font-weight: 800; font-size: 1.05rem; color: var(--ink-900); letter-spacing: -0.02em; }
.nav__links { display: flex; align-items: center; gap: var(--sp-5); }
.nav__links a { color: var(--ink-700); font-weight: 600; font-size: 0.95rem; position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--gold-500); border-radius: 2px; transform: scaleX(0); transition: transform .2s ease;
}
.nav__links a:hover { color: var(--ink-900); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: var(--sp-3); }
.nav__toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border);
  background: var(--white); border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink-800); border-radius: 2px; position: relative;
}
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; }

@media (max-width: 960px) {
  .nav__toggle { display: inline-flex; }
  .nav__links, .nav__cta { display: none; }
  .nav.is-open .nav__links, .nav.is-open .nav__cta {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4);
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--white); padding: var(--sp-5) 1.25rem; border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open .nav__cta { top: auto; position: static; padding-top: 0; box-shadow: none; border: 0; }
  .nav.is-open .nav__cta .btn { width: 100%; }
}

/* --------------------------------------------------------------- Hero ---- */
.hero { position: relative; padding: calc(var(--nav-h) + var(--sp-9)) 0 var(--sp-9); overflow: hidden; }
/* Nền hero để phẳng có chủ ý.
   Đã hai lần thử kiểu nền nhiều lớp (quầng màu radial mờ chồng nhau, nền
   lưới ô ly) và cả hai lần đều bỏ: đó là mô-típ nền quen thuộc của trang
   SaaS do máy sinh. Một dải phẳng với đường kẻ chân dứt khoát đọc giống ấn
   phẩm in hơn. Đừng thêm lại. */
.hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
}
/* Vệt vàng mảnh chạy dọc mép trái vùng hero, lấy ý từ nét nghiêng trong
   chữ K của logo. */
.hero::after {
  content: ""; position: absolute; z-index: -1;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--gold-500);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8) 3.5rem; align-items: center; }
.hero h1 { margin-bottom: var(--sp-5); }
.hero .lead { margin-bottom: var(--sp-6); max-width: 34em; }
.hero__points { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin: var(--sp-6) 0 0; }
.hero__points li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--step--1); color: var(--ink-700); }
.hero__points li::before {
  content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px;
  background: var(--gold-500); color: var(--ink-900); border-radius: 50%; font-size: 12px; font-weight: 900;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero { padding-top: calc(var(--nav-h) + var(--sp-7)); } }

/* Hero visual: mock app card */
.mock {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.mock::after {
  content: ""; position: absolute; inset: auto -30% -40% -30%; height: 60%;
  background: none;
  pointer-events: none;
}
.mock__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--ink-50); border-bottom: 1px solid var(--border); }
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-300); }
.mock__dot:nth-child(1) { background: var(--gold-500); }
.mock__dot:nth-child(2) { background: var(--cyan-400); }
.mock__title { margin-left: 8px; font-size: 0.78rem; font-weight: 700; color: var(--ink-500); letter-spacing: .04em; }
.mock__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mock__kpi { background: var(--ink-50); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
.mock__kpi b { font-variant-numeric: tabular-nums; display: block; font-size: 1.35rem; color: var(--ink-900); letter-spacing: -0.02em; }
.mock__kpi span { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.mock__rows { display: grid; gap: 10px; }
.mock__row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.mock__avatar { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--ink-800); display: grid; place-items: center; color: var(--white); font-size: .72rem; font-weight: 800; }
.mock__row p { margin: 0; font-size: .84rem; font-weight: 600; color: var(--ink-700); }
.mock__row small { color: var(--text-muted); font-weight: 500; }
.tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: var(--r-pill); }
.tag--ok { background: #E4F6EF; color: #0E7A54; }
.tag--gold { background: var(--gold-50); color: var(--gold-700); }
.tag--cyan { background: var(--cyan-50); color: var(--cyan-600); }
.mock__chart { display: flex; align-items: flex-end; gap: 7px; height: 92px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
.mock__chart i { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--cyan-200); display: block; }
.mock__chart i:nth-child(3n) { background: var(--gold-400); }
.mock__chart i:last-child { background: var(--gold-500); }

/* --------------------------------------------------------- Logos / trust - */
.trust { padding: var(--sp-6) 0; border-block: 1px solid var(--border); background: var(--white); }
.trust__label { text-align: center; font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-4); }
.trust__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-6); }
.trust__item { font-weight: 800; color: var(--ink-400); letter-spacing: -.02em; font-size: 1.05rem; padding: 6px 4px; }

/* --------------------------------------------------------------- Stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat { text-align: center; padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.stat b { font-variant-numeric: tabular-nums; display: block; font-size: var(--step-3); font-weight: 800; color: var(--gold-400); letter-spacing: -.03em; line-height: 1.1; }
.stat span { font-size: var(--step--1); color: var(--cyan-100); font-weight: 600; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- Cards --- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { border-color: var(--gold-500); box-shadow: var(--ring-strong), var(--shadow-lg); }
.card h3, .card h4 { margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--gold-50); border: 1px solid var(--gold-200);
  color: var(--gold-700); margin-bottom: var(--sp-4);
}
.card__icon svg { width: 25px; height: 25px; }
.card--cyan .card__icon { background: var(--cyan-50); border-color: var(--cyan-100); color: var(--cyan-600); }
.card--flat { box-shadow: none; }
.section--dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--cyan-100); }
.section--dark .card:hover { border-color: var(--gold-400); background: rgba(255,255,255,.08); }

/* Service card (hub page) */
.svc { display: flex; flex-direction: column; }
.svc__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.svc__mark {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; display: grid; place-items: center;
  font-weight: 900; font-size: .95rem; letter-spacing: -.03em;
  background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200);
}
.svc__name { font-size: var(--step-1); font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; line-height: 1.2; }
.svc__cat { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-600); }
.svc__list { margin: var(--sp-4) 0 var(--sp-5); display: grid; gap: 8px; }
.svc__list li { position: relative; padding-left: 24px; font-size: var(--step--1); color: var(--ink-600); }
.svc__list li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--cyan-400); }
.svc__link { margin-top: auto; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; color: var(--cyan-600); }
.svc__link:hover { gap: 12px; }

/* --------------------------------------------------------------- Steps --- */
.steps { counter-reset: s; display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { counter-increment: s; position: relative; padding-top: var(--sp-6); }
.step::before {
  content: "0" counter(s); position: absolute; top: 0; left: 0;
  font-size: var(--step-2); font-weight: 900; letter-spacing: -.04em;
  color: var(--gold-500); line-height: 1;
}
.step::after { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 2px; background: var(--border); z-index: -1; }
.step h4 { margin-bottom: 6px; margin-top: var(--sp-3); }
.step p { font-size: var(--step--1); color: var(--text-muted); margin: 0; }

/* ------------------------------------------------------------ Split row -- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.split--rev .split__media { order: -1; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } .split--rev .split__media { order: 0; } }
.checklist { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; }
.checklist li { position: relative; padding-left: 34px; color: var(--ink-600); }
.checklist li strong { color: var(--ink-900); }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cyan-50); color: var(--cyan-600); border: 1px solid var(--cyan-100);
  font-size: 12px; font-weight: 900;
}
.section--dark .checklist li,
.cta-band .checklist li { color: var(--cyan-100); }
.section--dark .checklist li strong { color: var(--white); }
.section--dark .checklist li::before { background: rgba(233,180,31,.16); color: var(--gold-300); border-color: rgba(233,180,31,.3); }

/* Pain vs gain */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 780px) { .compare { grid-template-columns: 1fr; } }
.compare__col { border-radius: var(--r-lg); padding: var(--sp-6); border: 1px solid var(--border); background: var(--white); }
.compare__col--bad { background: var(--ink-50); }
.compare__col--good { border-color: var(--gold-300); box-shadow: var(--shadow-md); }
.compare__col h4 { display: flex; align-items: center; gap: 10px; }
.compare__col ul { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.compare__col li { position: relative; padding-left: 28px; color: var(--ink-600); font-size: var(--step--1); }
.compare__col--bad li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--danger); font-weight: 900; }
.compare__col--good li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 900; }

/* ------------------------------------------------------------- Pricing --- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.plan { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.plan--featured { border: 1px solid var(--gold-500); box-shadow: var(--ring-strong), var(--shadow-lg); position: relative; }
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold-500); color: var(--ink-900); font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-pill); white-space: nowrap;
}
.plan__name { font-size: var(--step-1); font-weight: 800; color: var(--ink-900); margin-bottom: 4px; }
.plan__for { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--sp-4); }
.plan__price { font-size: var(--step-3); font-weight: 800; color: var(--ink-900); letter-spacing: -.03em; line-height: 1.1; }
.plan__price small { font-size: var(--step--1); font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.plan__list { display: grid; gap: 10px; margin: var(--sp-5) 0 var(--sp-6); }
.plan__list li { position: relative; padding-left: 26px; font-size: var(--step--1); color: var(--ink-600); }
.plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan-500); font-weight: 900; }
.plan .btn { margin-top: auto; width: 100%; }

/* --------------------------------------------------- Kiến trúc tích hợp --- */
/* Ba cột đọc như một dòng chảy: hệ thống của khách → sản phẩm → đầu ra.
   Trên màn hình hẹp chúng xếp dọc, mũi nối đổi hướng theo (xem @media). */
.arch { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.arch__col {
  position: relative; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5);
}
/* Cột giữa là sản phẩm — nhấn bằng viền xanh và đổ bóng, không bằng nền đặc
   để ba cột vẫn đọc được như một dãy ngang. */
.arch__col--core { border: 1px solid var(--gold-500); box-shadow: var(--ring-strong), var(--shadow-lg); background: var(--grad-gold); }
.arch__step {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--gold-50); color: var(--gold-700);
  font-size: .78rem; font-weight: 800; margin-bottom: var(--sp-3);
}
.arch__col--core .arch__step { background: var(--gold-500); color: var(--ink-900); }
.arch__col h4 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.arch__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.arch__col li {
  font-size: var(--step--1); color: var(--ink-600);
  padding-left: 16px; position: relative;
}
.arch__col li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-400);
}
.arch__col--core li::before { background: var(--gold-500); }
/* Mũi nối giữa các cột. Dùng ::after của cột chứ không thêm thẻ rỗng. */
.arch__col:not(:last-child)::after {
  content: "→"; position: absolute; right: calc(var(--sp-5) * -1 - 4px); top: 50%;
  transform: translateY(-50%); color: var(--ink-300); font-weight: 800; font-size: 1.1rem;
}
.arch__note {
  margin: var(--sp-5) 0 0; font-size: var(--step--1); color: var(--text-muted);
  border-left: 3px solid var(--gold-200); padding-left: var(--sp-4);
}
.section--dark .arch__col { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--dark .arch__col h4 { color: var(--white); }
.section--dark .arch__col li { color: var(--ink-300); }

@media (max-width: 860px) {
  .arch { grid-template-columns: 1fr; }
  /* Xếp dọc thì mũi nối phải chỉ xuống, và nằm giữa hai cột */
  .arch__col:not(:last-child)::after {
    content: "↓"; right: auto; left: 50%; top: auto;
    bottom: calc(var(--sp-5) * -1 - 2px); transform: translateX(-50%);
  }
}

/* ------------------------------------------- Dòng chảy: điều phối, SLA --- */
/* Danh sách có số thứ tự, mỗi bước một nhãn kênh/mốc bên trái và nội dung
   bên phải. Dùng lại cho cả mục Điều phối và mục SLA vì cấu trúc giống nhau:
   một chuỗi bước có thứ tự, mỗi bước có một mốc kèm theo. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: flow; }
.flow--tight { gap: var(--sp-3); }
.flow__item {
  counter-increment: flow;
  display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-5);
  align-items: start; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5);
}
/* Vạch nối dọc giữa các bước — cho thấy đây là một chuỗi, không phải
   danh sách rời. Bước cuối không có vạch. */
.flow__item { position: relative; }
.flow__item:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--sp-5) + 74px);
  bottom: calc(var(--sp-4) * -1 - 1px); width: 2px; height: var(--sp-4);
  background: var(--border);
}
.flow--tight .flow__item:not(:last-child)::after { height: var(--sp-3); bottom: calc(var(--sp-3) * -1 - 1px); }
.flow__badge {
  display: inline-grid; place-items: center; text-align: center;
  min-height: 34px; padding: 6px 10px;
  background: var(--gold-50); border: 1px solid var(--gold-200);
  border-radius: var(--r-md); color: var(--gold-700);
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1.25;
}
.flow__badge--plain {
  background: var(--cyan-50); border-color: var(--cyan-200); color: var(--cyan-700);
  box-shadow: var(--ring-cyan);
}
.flow__body h4 { margin: 0 0 4px; font-size: var(--step-1); }
.flow__when {
  display: block; font-size: var(--step--1); font-weight: 700;
  color: var(--cyan-600); margin-bottom: var(--sp-2);
}
.flow__body p { margin: 0; color: var(--ink-600); font-size: var(--step-0); }
.flow__gains { margin-top: var(--sp-7); }
.flow__gains-title { font-size: var(--step-2); margin-bottom: var(--sp-5); }
/* Số bước trước tiêu đề, chỉ hiện khi đủ rộng — trên màn hình hẹp nhãn kênh
   đã đủ để phân biệt, thêm số nữa thì chật. */
@media (min-width: 861px) {
  .flow__body h4::before {
    content: counter(flow) ". "; color: var(--ink-400); font-weight: 700;
  }
}
@media (max-width: 860px) {
  .flow__item { grid-template-columns: 1fr; gap: var(--sp-3); }
  .flow__badge { justify-self: start; }
  .flow__item:not(:last-child)::after { display: none; }
}

/* ------------------------------------------------- Kịch bản tự động hoá --- */
.scen {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column;
}
.scen:hover { border-color: var(--gold-500); box-shadow: var(--ring-strong), var(--shadow-lg); }
.scen__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.scen__no {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; background: var(--ink-100); color: var(--ink-600);
  font-size: .72rem; font-weight: 800;
}
.scen h4 { margin: 0 0 4px; font-size: var(--step-1); }
.scen__when {
  display: block; font-size: var(--step--1); font-weight: 700;
  color: var(--cyan-600); margin-bottom: var(--sp-2);
}
.scen p { margin: 0; color: var(--ink-600); font-size: var(--step--1); }

/* --------------------------------------------- Bảo mật, chia theo nhóm --- */
.secgrp + .secgrp { margin-top: var(--sp-6); }
.secgrp__title {
  font-size: var(--step-0); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-500); margin: 0 0 var(--sp-4);
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.card--tight { padding: var(--sp-4); }
.card--tight h4 { font-size: var(--step-0); margin-bottom: 6px; }
.card--tight p { font-size: var(--step--1); margin: 0; }
/* Danh sách tuân thủ nằm ngang cuối mục, không phải cột dọc như checklist
   thường — đây là ba dòng ngắn, xếp dọc sẽ thừa khoảng trắng. */
.checklist--inline {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.checklist--inline li { font-size: var(--step--1); }

@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Định vị: hai cột đối đầu --- */
/* Cột trái là cách làm cũ, cột phải là cách của CONEK. Cột trái để xám và
   gạch ngang từng dòng — người đọc nhận ra ngay đâu là bên bị loại, không
   cần đọc tiêu đề. */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.vs__col { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.vs__col h4 { font-size: var(--step-1); margin-bottom: var(--sp-4); }
.vs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.vs__col li { position: relative; padding-left: 24px; font-size: var(--step-0); }
.vs__col--old { background: var(--ink-50); }
.vs__col--old h4 { color: var(--ink-500); }
.vs__col--old li { color: var(--ink-500); }
.vs__col--old li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 2px; background: var(--ink-300);
}
.vs__col--new { background: var(--grad-gold); border: 1px solid var(--gold-500); box-shadow: var(--ring-strong), var(--shadow-lg); }
.vs__col--new li { color: var(--ink-700); font-weight: 500; }
.vs__col--new li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gold-600); font-weight: 900; font-size: .95em;
}
.vs__pillars { margin-top: var(--sp-6); }

/* ------------------------------------------------- Giải pháp theo ngành --- */
.ind {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column;
}
.ind:hover { border-color: var(--gold-500); box-shadow: var(--ring-strong), var(--shadow-lg); }
.ind h4 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.ind p { font-size: var(--step--1); color: var(--ink-600); margin: 0 0 var(--sp-4); flex: 1; }
.ind__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ind__tags li {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--cyan-50); color: var(--cyan-700); border: 1px solid var(--cyan-100);
}

@media (max-width: 720px) { .vs { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Vấn đề: lưới thẻ ------ */
/* Mỗi vấn đề một thẻ, có icon và một nhãn nói hậu quả. Nhãn dùng sắc đỏ chứ
   không dùng vàng thương hiệu: đây là phần duy nhất trên trang nói về rủi ro,
   nên cần đọc ra là cảnh báo ngay từ màu. */
.pain {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.pain:hover { border-color: var(--danger); box-shadow: 0 0 0 1px rgba(224, 82, 62, 0.28), var(--shadow-lg); }
.pain__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.pain__icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: var(--r-md);
  background: rgba(224, 82, 62, 0.08); border: 1px solid rgba(224, 82, 62, 0.18);
  color: var(--danger);
}
.pain__icon svg { width: 21px; height: 21px; }
.pain__tag {
  font-size: .64rem; font-weight: 700; line-height: 1.3; text-align: right;
  color: var(--danger); background: rgba(224, 82, 62, 0.07);
  border-radius: var(--r-pill); padding: 4px 9px;
}
.pain h4 { font-size: var(--step-0); margin-bottom: var(--sp-3); }
.pain p { font-size: var(--step--1); color: var(--ink-600); margin: 0; }

/* Thẻ kết: nền tối để tách khỏi tám thẻ trắng phía trên. Đây là chỗ chuyển
   từ liệt kê vấn đề sang nêu giải pháp, nên cần một ngắt thị giác rõ. */
.pain__close {
  margin-top: var(--sp-6); background: var(--bg-dark); color: var(--cyan-100);
  border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-6); text-align: center;
  border-top: 4px solid var(--gold-500);
}
.pain__close .eyebrow {
  color: var(--cyan-100); background: rgba(255, 255, 255, 0.08);
  border-color: rgba(233, 180, 31, 0.45);
}
.pain__close .eyebrow::before { background: var(--gold-400); }
.pain__close h3 { color: var(--white); font-size: var(--step-2); margin-bottom: var(--sp-3); }
.pain__close p { margin: 0 auto; max-width: 60ch; }

/* --------------------------------------- Sơ đồ trục - nan hoa (kiến trúc) --- */
/* Hộp trung tâm ở giữa, hai cột hộp vệ tinh hai bên, nối bằng đường nét đứt.
   Cách này đọc ra ngay 'sản phẩm nằm ở giữa mọi thứ' — ba cột chữ thì không.
   Trên màn hình hẹp, ba khối xếp dọc và đường nối tắt đi. */
.hub {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-6); align-items: center;
  margin-bottom: var(--sp-7); position: relative;
}
.hub__side { display: grid; gap: var(--sp-3); }
.hub__node {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.hub__node--r { text-align: right; }
.hub__node b { display: block; font-size: var(--step-0); color: var(--ink-900); }
.hub__node span { display: block; font-size: var(--step--1); color: var(--ink-500); }
.hub__node > div { flex: 1; min-width: 0; }
.hub__ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--r-sm); background: var(--cyan-50);
  border: 1px solid var(--cyan-100); color: var(--cyan-600);
}
.hub__ico svg { width: 17px; height: 17px; }
/* Hộp trung tâm: nền vàng đặc, chữ mực đậm — vàng logo đủ sáng nên chữ tối
   đọc rõ hơn chữ trắng. */
.hub__core {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  background: var(--gold-500); color: var(--ink-900);
  border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5);
  min-width: 210px; box-shadow: var(--shadow-lg);
}
.hub__core b { font-size: var(--step-1); }
.hub__core span {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .78;
}
.hub__core-ico {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--r-md); background: rgba(11, 27, 36, 0.12); color: var(--ink-900);
}
.hub__core-ico svg { width: 21px; height: 21px; }
/* Hai đường nét đứt dọc chạy giữa hộp trung tâm và mỗi cột vệ tinh */
.hub::before, .hub::after {
  content: ""; position: absolute; top: 12%; bottom: 12%; width: 0;
  border-left: 2px dashed var(--ink-300);
}
.hub::before { left: calc(50% - 118px); }
.hub::after { right: calc(50% - 118px); }

@media (max-width: 900px) {
  .hub { grid-template-columns: 1fr; }
  .hub::before, .hub::after { display: none; }
  .hub__core { order: -1; min-width: 0; }
  .hub__node--r { text-align: left; flex-direction: row-reverse; }
}

/* -------------------------------------------------------------- Quotes --- */
.quote { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--gold-500); border-radius: var(--r-md); padding: var(--sp-5); }
.quote p { font-size: 1.02rem; color: var(--ink-700); font-style: italic; }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-4); }
.quote__who .mock__avatar { width: 38px; height: 38px; font-size: .8rem; }
.quote__who b { display: block; font-size: .92rem; color: var(--ink-900); }
.quote__who span { font-size: .8rem; color: var(--text-muted); }

/* ----------------------------------------------------------------- FAQ --- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: var(--sp-3); }
.faq details { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--gold-300); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5);
  font-weight: 700; color: var(--ink-800); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 700; color: var(--gold-600); line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 var(--sp-5) var(--sp-5); margin: 0; color: var(--text-muted); font-size: var(--step--1); }

/* ------------------------------------------------------------- CTA band -- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-7); text-align: center; background: var(--cyan-900); border-top: 4px solid var(--gold-500); }
.cta-band::before { content: none; }
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--cyan-100); max-width: 620px; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-6); }

/* ---------------------------------------------------------------- Form --- */
.form { display: grid; gap: var(--sp-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-md); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--step--1); font-weight: 700; color: var(--ink-700); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; padding: 12px 14px; border: 1px solid var(--ink-200);
  border-radius: var(--r-sm); background: var(--white); color: var(--ink-800); width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan-400); outline: none; box-shadow: 0 0 0 3px rgba(25,145,189,.15); }
.form__note { font-size: .78rem; color: var(--text-muted); margin: 0; }

/* -------------------------------------------------------------- Footer --- */
.footer { background: var(--ink-900); color: var(--ink-300); padding: var(--sp-8) 0 var(--sp-5); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo { height: 36px; background: var(--white); border-radius: var(--r-sm); padding: 6px 10px; margin-bottom: var(--sp-4); width: fit-content; }
.footer h5 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); margin: 0 0 var(--sp-4); font-weight: 800; }
.footer ul { display: grid; gap: 10px; }
.footer a { color: var(--ink-300); font-size: var(--step--1); }
.footer a:hover { color: var(--gold-400); }
.footer p { font-size: var(--step--1); color: var(--ink-400); }
.footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }
.footer__bottom p { margin: 0; }

/* ------------------------------------------------------- Sticky mobile --- */
.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta {
    display: flex; position: fixed; z-index: 55; bottom: 0; left: 0; right: 0; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  }
  .mobile-cta .btn { flex: 1; padding: 13px 12px; font-size: .9rem; }
  body { padding-bottom: 76px; }
}

/* ------------------------------------------------------------- Reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover { transform: none; }
}

/* ------------------------------------------------------ Breadcrumb bar --- */
.crumb { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--sp-4); }
.crumb a { color: var(--cyan-600); font-weight: 600; }
.crumb span { margin: 0 8px; color: var(--ink-300); }

/* --- Bổ sung: icon trong thẻ dịch vụ trang hub --- */
.svc__mark svg { width: 22px; height: 22px; }
.svc__cat, .svc__name { display: block; }
.svc__top > span:last-child { min-width: 0; }
a.card { color: inherit; }
a.card:hover { color: inherit; }

/* --- Chân trang: danh sách văn phòng --- */
.footer__office { margin-bottom: var(--sp-3); }
.footer__office b { color: var(--ink-200); font-weight: 700; font-size: var(--step--1); }

/* --- Khối "Vì sao chọn CONEK" trên trang dịch vụ --- */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-7); }
@media (max-width: 820px) { .reasons { grid-template-columns: 1fr; } }
.reason { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start; }
.reason__icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md);
  background: var(--cyan-50); color: var(--cyan-600); border: 1px solid var(--cyan-100);
}
.reason__icon svg { width: 22px; height: 22px; }
.reason:nth-child(3n-1) .reason__icon { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.reason h4 { margin: 0 0 6px; font-size: var(--step-1); }
.reason p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }

/* ==========================================================================
   Thanh chấm điều hướng theo khối
   ========================================================================== */

/* KHÔNG dùng scroll-snap.
   Đã thử cả `proximity` lẫn `mandatory`, cả hai đều hỏng:
     - proximity : dừng lưng chừng, khối bị cắt ngang giữa chữ
     - mandatory : chân trang không phải điểm dừng nên bị kéo ngược về khối trước,
                   người dùng không xuống được footer
   Cuộn tự do là hành vi người dùng mong đợi. Việc nhảy giữa các khối đã có
   thanh chấm điều hướng bên phải + menu neo lo, cả hai đều dùng
   `scroll-padding-top: var(--nav-h)` nên luôn dừng đúng dưới menu. */

/* --- Thanh chấm bên phải --- */
.dots {
  position: fixed; z-index: 58; right: 22px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 14px; align-items: flex-end;
}
@media (min-width: 1100px) { .dots { display: flex; } }

.dots__item {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; color: var(--ink-500);
}
.dots__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 12px; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
/* Chấm chưa chọn: trước dùng --ink-300 trên nền trắng, tương phản ~1.6:1 nên
   gần như không nhìn thấy. Đổi sang chấm rỗng viền đậm — thấy rõ mà vẫn nhẹ,
   không tranh chấp với chấm đang chọn. */
.dots__dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px;
  background: transparent;
  border: 2px solid var(--ink-400);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.dots__item:hover .dots__label,
.dots__item:focus-visible .dots__label { opacity: 1; transform: none; }
.dots__item:hover .dots__dot { background: var(--gold-500); border-color: var(--gold-600); transform: scale(1.2); }
.dots__item.is-active .dots__dot {
  background: var(--gold-500); border-color: var(--gold-600); transform: scale(1.3);
}
.dots__item.is-active .dots__label { opacity: 1; transform: none; }

/* Trên nền section tối, chấm chưa chọn sáng lên cho dễ thấy */
.dots.on-dark .dots__dot { border-color: rgba(255,255,255,.65); }
.dots.on-dark .dots__label { background: var(--cyan-900); border-color: rgba(255,255,255,.18); color: var(--cyan-100); }

@media (prefers-reduced-motion: reduce) {
  .dots__label, .dots__dot { transition: none; }
}

/* ==========================================================================
   Khối Tuyển dụng
   ========================================================================== */
.perks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-5);
  margin: 0 0 var(--sp-7); padding: var(--sp-5) var(--sp-6);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
}
@media (max-width: 900px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } }
.perks li { position: relative; padding-left: 26px; font-size: var(--step--1); color: var(--ink-600); }
.perks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gold-600); font-weight: 900; font-size: .95em;
}

.jobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 860px) { .jobs { grid-template-columns: 1fr; } }

.job {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.job:hover { border-color: var(--gold-500); box-shadow: var(--ring-strong), var(--shadow-lg); }
.job__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.job__dept {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cyan-600); margin-bottom: 4px;
}
.job__title { font-size: var(--step-1); margin: 0; }
.job__count {
  flex: 0 0 auto; font-size: .7rem; font-weight: 800; white-space: nowrap;
  background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.job__desc { margin: var(--sp-3) 0 var(--sp-4); color: var(--text-muted); font-size: var(--step--1); }

.job__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px var(--sp-4); margin-bottom: var(--sp-4); }
@media (max-width: 460px) { .job__meta { grid-template-columns: 1fr; } }
.job__meta li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--step--1); color: var(--ink-600); font-weight: 600; min-width: 0;
}
.job__meta svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ink-400); }

.job__more { border-top: 1px solid var(--border); padding-top: var(--sp-3); margin-bottom: var(--sp-4); }
.job__more summary {
  list-style: none; cursor: pointer; font-size: var(--step--1); font-weight: 700;
  color: var(--cyan-600); display: flex; align-items: center; gap: 7px;
}
.job__more summary::-webkit-details-marker { display: none; }
.job__more summary::after { content: "▾"; font-size: .8em; transition: transform .18s ease; }
.job__more[open] summary::after { transform: rotate(180deg); }
.job__more .checklist { margin-top: var(--sp-4); }
.job__more .checklist li { font-size: var(--step--1); }

.job__apply { margin-top: auto; align-self: flex-start; }

/* 3 phần của khối Tuyển dụng ghép lại thành một dải liền mạch */
.careers-head { padding-bottom: 0; }
.careers-list { padding-block: var(--sp-6); }
.careers-foot { padding-top: 0; }

/* ==========================================================================
   Thẻ dịch vụ gọn ở trang chủ + trạng thái menu đang xem
   ========================================================================== */
.svc-mini-grid { gap: var(--sp-4); }

.svc--mini {
  display: grid; gap: 6px; align-content: start; padding: var(--sp-4) var(--sp-4) var(--sp-5);
  color: inherit; text-decoration: none;
}
.svc--mini .svc__mark { margin-bottom: var(--sp-2); }
.svc--mini .svc__cat { font-size: .68rem; }
.svc--mini .svc__name { font-size: 1.06rem; }
.svc--mini .svc__one { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.svc--mini::after {
  content: "→"; position: absolute; right: 16px; bottom: 12px;
  color: var(--gold-500); font-weight: 800; opacity: 0; transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.svc--mini:hover::after { opacity: 1; transform: none; }

/* Mục menu tương ứng trang đang xem */
.nav__links a.is-current { color: var(--ink-900); }
.nav__links a.is-current::after { transform: scaleX(1); }

/* Breadcrumb căn giữa trong hero của trang Dịch vụ / Tuyển dụng */
.hero .crumb { display: flex; justify-content: center; gap: 0; }

/* ==========================================================================
   Chặn style nút của theme cha
   hello-elementor/reset.css đặt:  button:focus, button:hover { background-color:#c36 }
   Độ ưu tiên (0,1,1) cao hơn class đơn (0,1,0) nên nó đè lên nút của bộ nhận diện,
   làm nền chuyển hồng khi rê chuột / sau khi bấm. Khai báo lại ở mức (0,2,0) để thắng.
   ========================================================================== */
.dots__item:hover,
.dots__item:focus,
.dots__item:focus-visible { background: none; color: var(--ink-500); }

.nav__toggle:hover,
.nav__toggle:focus { background: var(--white); color: inherit; }

.faq summary:hover,
.faq summary:focus,
.job__more summary:hover,
.job__more summary:focus { background: none; }

/* Nút chính: giữ đúng màu thương hiệu ở mọi trạng thái */
.btn--primary:hover, .btn--primary:focus { background: var(--gold-400); color: var(--ink-900); }
.btn--cyan:hover, .btn--cyan:focus { background: var(--cyan-400); color: var(--white); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--gold-50); color: var(--ink-900); }
.section--dark .btn--ghost:hover, .section--dark .btn--ghost:focus,
.cta-band .btn--ghost:hover, .cta-band .btn--ghost:focus { background: rgba(255,255,255,.12); color: var(--white); }

/* ==========================================================================
   Ẩn thanh cuộn dọc (vẫn cuộn được bằng chuột / bàn phím / cảm ứng)
   Chỉ ẩn ở cấp trang — các vùng cuộn ngang bên trong (bảng, khối mã)
   vẫn giữ thanh cuộn riêng để người dùng biết là kéo ngang được.
   ========================================================================== */
html {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge cũ */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ==========================================================================
   Nút chat Zalo nổi
   ========================================================================== */
.zalo-fab {
  position: fixed; z-index: 56; right: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 14px;
  background: var(--cyan-500); color: var(--white);
  border-radius: var(--r-pill); border: 1px solid var(--cyan-600);
  font-weight: 700; font-size: .92rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(11, 27, 36, .18);
  transition: background .18s ease;
}
.zalo-fab:hover { background: var(--cyan-400); color: var(--white); }
.zalo-fab__icon { display: grid; place-items: center; }
.zalo-fab__icon svg { width: 20px; height: 20px; }

/* Trên điện thoại: thu về nút tròn, nằm trên thanh CTA cố định */
@media (max-width: 700px) {
  .zalo-fab { right: 14px; bottom: 84px; padding: 13px; }
  .zalo-fab__text { display: none; }
}

/* Không đè lên thanh chấm điều hướng ở màn hình rộng */
@media (min-width: 1100px) { .zalo-fab { right: 26px; bottom: 26px; } }