/* ==========================================================================
   sections.css — bố cục từng section + responsive (1200 / 1080 / 900 / 700 / 600)
   ========================================================================== */

:root { --sp: var(--section-space-desktop); }
@media (max-width: 900px) { :root { --sp: var(--section-space-tablet); --header-height: 64px; } }
@media (max-width: 600px) { :root { --sp: var(--section-space-mobile); } }

/* --------------------------------------------------------------------------
   0. Header (dính trên cùng) + skip-link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: 16px; top: 0; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--viai-blue); color: #fff; font-weight: 700;
  transform: translateY(-150%); transition: transform var(--duration-fast);   /* -150% theo chiều cao chính nó nên không lòi ra khi chữ xuống dòng ở màn hẹp */
}
.skip-link:focus { transform: translateY(12px); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--viai-border);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.nav { display: flex; align-items: center; gap: 28px; min-height: var(--header-height); }
.brand { flex: none; display: block; }
.brand img { width: auto; height: 46px; }
.nav__menu { margin-right: auto; margin-left: clamp(8px, 2vw, 28px); }
.nav__menu ul { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.nav__menu a { position: relative; display: block; padding: 8px 2px; font-size: 14.5px; font-weight: 600; color: var(--viai-blue); }
.nav__menu a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--viai-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-normal) var(--ease-standard);
}
.nav__menu a:hover::after, .nav__menu a:focus-visible::after { transform: scaleX(1); }
.nav__cta { flex: none; }
.menu-toggle { display: none; flex: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; color: var(--viai-blue); border: 1.5px solid var(--viai-border); background: #fff; }
.menu-toggle:hover { background: var(--viai-blue-soft); }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(560px, 52vw, 720px);
  padding-block: clamp(48px, 5vw, 80px);
  background: var(--viai-surface-ice);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(1.05) brightness(1.1); transform: scale(1.25); }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.95) 32%, rgba(243, 247, 255, 0.7) 62%, rgba(243, 247, 255, 0.45) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 28%);
}
/* Nền công nghệ: nằm trên ảnh nền + lớp phủ trắng, dưới nội dung. Mạng điểm (canvas) mờ dần về phía chữ bên trái để không ảnh hưởng độ đọc */
.hero__tech { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__tech::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(21, 83, 224, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 83, 224, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 90% at 72% 42%, #000 0%, transparent 78%); mask-image: radial-gradient(70% 90% at 72% 42%, #000 0%, transparent 78%);
}
.hero__tech-glow { position: absolute; aspect-ratio: 1; border-radius: 50%; animation: tech-drift 16s ease-in-out infinite alternate; }
.hero__tech-glow--a { width: min(46vw, 640px); right: -8%; top: -18%; background: radial-gradient(circle, rgba(21, 83, 224, 0.28), transparent 68%); }
.hero__tech-glow--b { width: min(34vw, 460px); left: 30%; bottom: -24%; background: radial-gradient(circle, rgba(243, 107, 38, 0.2), transparent 68%); animation-delay: -6s; }
@keyframes tech-drift { to { transform: translate(-40px, 30px) scale(1.12); } }
.hero__tech-canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 52%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 52%); }
.reduce-motion .hero__tech-glow { animation: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: clamp(24px, 3.2vw, 44px); align-items: center; }
/* Dashboard tràn nhẹ ra lề phải như ảnh mẫu (chỉ ở desktop rộng) */
@media (min-width: 1101px) { .hero__visual { margin-right: calc(var(--container-gutter) * -0.45); } }
/* Tiêu đề dài (~85 ký tự) nên cỡ chữ nhỏ hơn bản cũ (36→58px) để vẫn gọn 4–5 dòng trong cột chữ hẹp */
.hero h1 { font-size: clamp(29px, 2.8vw, 42px); font-weight: 800; line-height: 1.18; letter-spacing: -0.028em; }
.hero__lead { margin-top: 22px; max-width: 32em; font-size: clamp(15.5px, 1.25vw, 17px); line-height: 1.7; color: var(--viai-muted-strong); }
.hero__lead strong { font-weight: 700; color: var(--viai-navy); }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; }
/* Lưới auto-fit: số cột phụ thuộc bề rộng cột chứ không phụ thuộc chiều rộng chữ → không nhảy layout khi font tải xong */
.hero__trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 28px; max-width: 540px; margin-top: 30px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--viai-muted-strong); }
.hero__trust li { display: flex; align-items: center; gap: 10px; }
.trust-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--viai-blue-soft); color: var(--viai-blue-bright); }
.trust-ico .icon { width: 18px; height: 18px; }

/* Demo Telegram (khung chat dark) nằm trong css/hero-demo.css. Cột visual là container để khung tự đổi bố cục theo bề rộng cột. */
.hero__visual { container-type: inline-size; position: relative; min-width: 0; }
.hero__note {
  position: absolute; top: 0; right: 10px; z-index: 2; display: flex; align-items: flex-start; gap: 8px;
  font-family: "Patrick Hand", "Be Vietnam Pro", cursive; font-size: 20px; line-height: 1.05; text-align: right;
  color: var(--viai-orange-strong); transform: rotate(-5deg); transform-origin: right center;
}
.hero__note-arrow { width: 52px; height: 40px; margin-top: 8px; overflow: visible; }



/* --------------------------------------------------------------------------
   3. Tin dùng
   -------------------------------------------------------------------------- */
/* Nằm giữa Dấu ấn (nền trắng) và Gói triển khai (cũng nền ice): bỏ padding dưới để hai mục liền một dải ice, khoảng cách còn lại do padding trên của Gói triển khai */
.trust { padding-block: clamp(40px, 3.6vw, 52px) 0; background: var(--viai-surface-ice); }

/* Logo chạy ngang phải → trái. Track chứa 2 bản danh sách giống nhau; dịch -50% = đúng 1 bản → vòng lặp liền mạch.
   Khoảng cách dùng margin-right trên li (không dùng gap) để -50% khớp chính xác. */
.marquee {
  margin-top: 18px; padding-block: 6px; overflow: hidden;   /* padding chừa chỗ cho logo nhấc lên khi hover (motion.css) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 42s linear infinite; }
.marquee__track li { flex: none; margin-right: clamp(14px, 1.6vw, 24px); }
.marquee__track img { width: clamp(132px, 13.5vw, 196px); height: auto; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Giảm chuyển động: đứng yên, xếp hàng căn giữa, bỏ bản sao. `animation: none` tường minh vì base.css chỉ rút ngắn duration (lặp vô hạn sẽ giật) */
.reduce-motion .marquee { -webkit-mask-image: none; mask-image: none; }
.reduce-motion .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 0; padding-inline: var(--container-gutter); }
.reduce-motion .marquee__track li[aria-hidden="true"] { display: none; }

/* --------------------------------------------------------------------------
   4. Dải số liệu
   -------------------------------------------------------------------------- */
.stats { position: relative; padding-block: clamp(40px, 4vw, 58px); color: #fff; background: var(--viai-blue-band); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 8px clamp(14px, 1.8vw, 26px); }
.stat:first-child { padding-left: 0; }
/* Đường kẻ ngăn các ô: dùng pseudo-element (không phải border) để motion.css vẽ nó "mọc" ra được */
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, 0.24); transform-origin: top; }
.stat__ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #1B5AF0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.stat__ico .icon { width: 25px; height: 25px; stroke-width: 1.7; }
/* Dòng chỉ số: số lớn màu cam + chữ đi kèm (tiền tố "Tới" hoặc đơn vị) cùng đường cơ sở; chữ dài thì tự xuống dòng */
.stat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.stat__num { font-size: clamp(32px, 3.3vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--viai-orange-on-blue); }
.stat__pre, .stat__unit { font-size: 16px; font-weight: 700; line-height: 1.25; }
.stat__note { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 1100px) {   /* 4 → 2×2: ô lẻ bỏ vạch dọc bên trái, hàng dưới có vạch ngang phía trên */
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(odd)::before { display: none; }
  .stat:nth-child(n+3) { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.24); }
}

/* --------------------------------------------------------------------------
   5. Nỗi đau — "Để nguyên quy trình, doanh nghiệp đang mất gì?"
   Nền hồng nhạt + dải sọc cảnh báo trên đầu + thẻ có huy hiệu "!" đỏ để nhấn mạnh mức nghiêm trọng (token --viai-alert* ở tokens.css)
   -------------------------------------------------------------------------- */
/* Khung ảnh giữ chỗ (dùng chung Nỗi đau + Minh họa): hiện khi chưa có file ảnh, ảnh thật (absolute) phủ lên trên */
.ph { position: absolute; inset: 0; display: grid; place-items: center; }
.ph .icon { width: 46px; height: 46px; stroke-width: 1.3; }

.pain { position: relative; background: linear-gradient(180deg, #FFF1F1 0%, #FFF8F8 45%, #fff 100%); }
.pain::before {   /* dải sọc cảnh báo đỏ/trắng; chạy chậm ở motion.css */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background: linear-gradient(115deg, var(--viai-alert) 0 52%, transparent 52% 100%) 0 0 / 24px 6px repeat-x;
}
.pain__head { max-width: 52rem; margin-inline: auto; text-align: center; }
.pain__head h2 { font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; text-wrap: balance; }
.pain__head p { margin-top: 14px; color: var(--viai-muted-strong); text-wrap: balance; }
.pain__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(26px, 3vw, 38px); }
.pain-card {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--viai-alert-border); border-radius: 18px;
  box-shadow: 0 14px 36px rgba(217, 45, 32, 0.1);
}
.pain-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 17px 17px 0 0; background: linear-gradient(135deg, #FFE7E4, #FFCFC9); }
.pain-card__media .ph { color: rgba(217, 45, 32, 0.45); }
.pain-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pain-card__media::after {   /* lớp phủ đỏ lên ảnh, đậm dần xuống dưới */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(217, 45, 32, 0.1) 0%, rgba(217, 45, 32, 0.3) 100%);
}
.pain-card__alert {
  position: absolute; z-index: 2; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--viai-alert); color: #fff; font-size: 20px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(217, 45, 32, 0.4);
}
.pain-card__body { flex: 1; padding: 16px 18px 20px; }
.pain-card h3 { font-size: 16.5px; font-weight: 800; line-height: 1.35; letter-spacing: -0.005em; color: var(--viai-alert-deep); text-wrap: balance; }
.pain-card p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--viai-muted-strong); }
@media (max-width: 1100px) { .pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pain__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pain-card__media { aspect-ratio: 16 / 8; }
}

/* --------------------------------------------------------------------------
   6. Giải pháp (slide 3 giải pháp — chi tiết slider ở components.css)
   -------------------------------------------------------------------------- */
/* Nền xanh băng nhạt + 2 vệt sáng rất nhẹ để thẻ slide trắng nổi lên */
.solution {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(21, 83, 224, 0.09), transparent 62%),
    radial-gradient(50% 80% at 0% 100%, rgba(243, 107, 38, 0.07), transparent 62%),
    var(--viai-surface-ice);
}
.solution__head { max-width: 48rem; margin-inline: auto; text-align: center; }
.solution__head .eyebrow { justify-content: center; }
.solution__head h2 { margin-top: 14px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; text-wrap: balance; }
.solution__head p:last-child { margin-top: 16px; color: var(--viai-muted-strong); }

/* --------------------------------------------------------------------------
   6b. Ứng dụng thực tế — 6 thẻ nghiệp vụ
   -------------------------------------------------------------------------- */
.apps { background: var(--viai-surface-ice); }   /* xen kẽ: OPC (trắng) · Ứng dụng (ice) · Từ giao việc (trắng) · Minh họa (ice) */
/* Title các mục: căn giữa, cùng cỡ chữ (áp cho Giải pháp, Ứng dụng, Từ giao việc, OPC, Quy trình) */
.apps__head { max-width: 60rem; margin-inline: auto; text-align: center; }
.apps__head .eyebrow { justify-content: center; }
.apps__head h2 { margin-top: 14px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; text-wrap: balance; }
.apps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.app-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--viai-border); border-radius: 20px; box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal);
}
.app-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.app-card__media { aspect-ratio: 16 / 7; overflow: hidden; border-radius: 19px 19px 0 0; background: var(--viai-surface-ice); }
.app-card__media > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); transition: transform 0.7s var(--ease-standard); }
.app-card:hover .app-card__media > img { transform: scale(1.05); }
.app-card__body { position: relative; flex: 1; padding: 34px 22px 22px; }
.app-card__ico {
  position: absolute; left: 20px; top: -26px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #f36b26, #ff8a3d); box-shadow: 0 10px 22px rgba(243, 107, 38, 0.35), 0 0 0 4px #fff;
  transition: transform var(--duration-normal) var(--ease-standard);
}
.app-card:hover .app-card__ico { transform: translateY(-3px) rotate(-4deg); }
.app-card__ico .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.app-card__body h3 { font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--viai-blue); }
.app-card__list { display: grid; gap: 6px; margin-top: 10px; }
.app-card__list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.5; color: var(--viai-muted-strong); }
.app-card__list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: var(--viai-orange);
  -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat;
}
.apps__note {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; padding: 16px 22px; border-radius: 18px;
  background: #fff; border: 1px solid #D9E6FC; color: var(--viai-blue); font-size: 16px; font-weight: 700; text-align: center;   /* trắng + viền vì mục nằm trên nền ice */
}
.apps__note .icon { width: 26px; height: 26px; color: var(--viai-blue-bright); }

/* --------------------------------------------------------------------------
   7. Từ giao việc đến kết quả
   -------------------------------------------------------------------------- */
.flow { background: #fff; }
.flow__head { max-width: 60rem; margin-inline: auto; text-align: center; }
.flow__head .eyebrow { justify-content: center; }
.flow__head .link-arrow { margin-top: 16px; }
.flow__head h2 { margin-top: 14px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; text-wrap: balance; }
.flow__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.flow-card__media { position: relative; aspect-ratio: 16 / 9.4; container-type: inline-size; }
.flow-card__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 18px; }
.flow-card__media > img.is-flipped { transform: scaleX(-1); }
.flow-card__media--soft > img { object-position: 50% 30%; filter: blur(1.5px) brightness(1.03); }
.flow-card__num {
  position: absolute; left: 16px; bottom: -18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--viai-cta-bg); color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 0 0 4px #fff;
}
.flow-card > h3 { margin-top: 30px; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.flow-card > p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--viai-muted-strong); }

/* UI overlay dựng bằng HTML trên ảnh — kích thước tính bằng em, font-size co theo bề rộng thẻ ảnh */
.ui {
  position: absolute; padding: 1em 1.15em; border-radius: 1em;
  background: rgba(255, 255, 255, 0.96); color: var(--viai-navy);
  font-size: clamp(9px, 3.25cqw, 12px); line-height: 1.4;
  box-shadow: 0 1.2em 2.8em rgba(11, 29, 71, 0.22);
}
.ui__head { display: flex; align-items: center; gap: 0.65em; font-size: 1.04em; font-weight: 700; }
.ui__dot { flex: none; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--viai-orange); }
.ui__dot--blue { background: var(--viai-blue-bright); }
.ui__dot--green { background: var(--viai-success); }
.ui__input { margin-top: 0.65em; padding: 0.65em 0.85em; border: 1px solid var(--viai-border); border-radius: 0.65em; font-size: 0.96em; color: var(--viai-muted-strong); }
.ui__send { display: grid; place-items: center; width: 2.2em; height: 2.2em; margin: 0.65em 0 0 auto; border-radius: 0.6em; background: var(--viai-blue-bright); color: #fff; }
.ui__send .icon { width: 1.2em; height: 1.2em; stroke-width: 2.4; }
.ui__rows { display: grid; gap: 0.6em; margin-top: 0.75em; }
.ui__rows li { display: flex; align-items: center; gap: 0.65em; font-size: 0.96em; color: var(--viai-muted-strong); }
.ui__rows .icon { width: 1.2em; height: 1.2em; stroke: var(--viai-success); stroke-width: 3; }
.ui__btn { display: block; margin-top: 0.85em; padding: 0.6em 0.85em; border-radius: 0.65em; background: var(--viai-blue-bright); color: #fff; font-size: 1em; font-weight: 700; text-align: center; }
.ui__spin { width: 1.35em; height: 1.35em; margin-left: auto; color: var(--viai-blue-bright); animation: spin 1.1s linear infinite; }
.ui--request { right: 6%; top: 14%; width: 60%; }
.ui--progress { left: 50%; top: 50%; width: 70%; transform: translate(-50%, -50%); }
.ui--ready { right: 6%; top: 10%; width: 62%; }

/* --------------------------------------------------------------------------
   7b. Mô hình OPC — Second Brain ở trung tâm, 6 Agent xung quanh
   Desktop: sân khấu tỉ lệ cố định 1200×600, mọi phần tử đặt theo % và dùng CHUNG toạ độ với <svg viewBox="0 0 1200 600"> (đường nối).
   Cột hẹp (<1000px): xếp dọc, bỏ đường nối.
   -------------------------------------------------------------------------- */
.opc {
  background:
    radial-gradient(55% 60% at 50% 58%, rgba(21, 83, 224, 0.11), transparent 68%),
    radial-gradient(40% 50% at 0% 0%, rgba(243, 107, 38, 0.06), transparent 65%),
    #fff;   /* trắng (không phải ice) vì nằm liền sau mục Giải pháp nền ice */
}
.opc__head { max-width: 50rem; margin-inline: auto; text-align: center; }
.opc__head .eyebrow { justify-content: center; }
.opc__head h2 { margin-top: 14px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; text-wrap: balance; }
.opc__sub { margin-top: 10px; color: var(--viai-orange-strong); font-size: 14.5px; font-weight: 600; }
.opc__lead { margin-top: 14px; color: var(--viai-muted-strong); }
.opc__wrap { container-type: inline-size; margin-top: clamp(28px, 3vw, 44px); }
.opc__stage { position: relative; aspect-ratio: 1200 / 600; }
.opc__cta { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 40px); }

.opc__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.opc__paths path { stroke: #a9bff0; stroke-width: 2; stroke-dasharray: 5 7; animation: opc-flow 1.6s linear infinite; }
.opc__dots circle { fill: var(--viai-blue-bright); filter: drop-shadow(0 0 6px rgba(21, 83, 224, 0.75)); }
@keyframes opc-flow { to { stroke-dashoffset: -24; } }

/* Bộ não tri thức */
.opc-brain { position: absolute; left: 27.5%; top: 0; width: 45%; padding: 12px 16px 14px; border-radius: 20px; text-align: center; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); border: 1px solid #dce6f8; box-shadow: 0 16px 40px rgba(21, 83, 224, 0.14); }
.opc-brain__title { display: inline-flex; align-items: center; gap: 8px; color: var(--viai-blue); font-size: 16px; font-weight: 800; }
.opc-brain__title .icon { width: 20px; height: 20px; color: var(--viai-blue-bright); }
.opc-brain__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.opc-brain__chips li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: #fff; border: 1px solid var(--viai-border); color: var(--viai-navy); font-size: 12.5px; font-weight: 600; animation: opc-chip 6s ease-in-out infinite; }
.opc-brain__chips li:nth-child(2) { animation-delay: 1.5s; }
.opc-brain__chips li:nth-child(3) { animation-delay: 3s; }
.opc-brain__chips li:nth-child(4) { animation-delay: 4.5s; }
.opc-brain__chips .icon { width: 20px; height: 20px; color: var(--viai-blue-bright); }
@keyframes opc-chip {
  0%, 30%, 100% { background: #fff; border-color: var(--viai-border); transform: none; }
  10%, 20% { background: var(--viai-blue-soft); border-color: #9db9f5; transform: translateY(-2px); }
}

/* Khung video Second Brain */
.opc-core { position: absolute; left: 33.3333%; top: calc(150 / 600 * 100%); width: 33.3333%; margin: 0; border-radius: 22px; background: #fff; border: 1px solid #cfe0fb; animation: opc-breathe 4s ease-in-out infinite; }
.opc-core__frame { position: relative; overflow: hidden; border-radius: 21px 21px 0 0; }
.opc-core__video { display: block; width: 100%; height: auto; aspect-ratio: 640 / 522; object-fit: cover; background: #fff; transform: scale(1.22); }   /* phóng nhẹ để mạng tri thức (nền trắng) lấp đầy khung */
.opc-core figcaption { display: grid; gap: 1px; padding: 10px 16px 12px; text-align: center; border-top: 1px solid #e3ecfb; }
.opc-core figcaption b { color: var(--viai-blue); font-size: 15px; font-weight: 800; }
.opc-core figcaption span { color: var(--viai-muted-strong); font-size: 12.5px; }
.opc-core__toggle { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 29, 71, 0.72); color: #fff; transition: background-color var(--duration-fast); }
.opc-core__toggle:hover { background: rgba(11, 29, 71, 0.9); }
.opc-core__toggle .icon { width: 15px; height: 15px; fill: currentColor; stroke-width: 1.6; grid-area: 1 / 1; }
.opc-core__toggle .icon--play { display: none; }
.opc-core__toggle[aria-pressed="true"] .icon--play { display: block; }
.opc-core__toggle[aria-pressed="true"] .icon--pause { display: none; }
@keyframes opc-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 83, 224, 0), 0 26px 60px rgba(21, 83, 224, 0.2); }
  50% { box-shadow: 0 0 0 10px rgba(21, 83, 224, 0.08), 0 30px 70px rgba(21, 83, 224, 0.28); }
}

/* 6 Agent: ô ảnh + vòng tròn icon */
.opc-agents, .opc-node { display: contents; }
.opc-node__card { position: absolute; top: calc(var(--y) / 600 * 100%); width: 19.1667%; aspect-ratio: 230 / 150; margin: 0; overflow: hidden; border-radius: 18px; background: #fff; border: 3px solid #fff; box-shadow: 0 16px 40px rgba(11, 29, 71, 0.14); }
.opc-node--l .opc-node__card { left: 0; }
.opc-node--r .opc-node__card { right: 0; }
.opc-node__card img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); transition: transform 0.7s var(--ease-standard); }
.opc-node__card:hover img { transform: scale(1.06); }
.opc-node__card figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.93); color: var(--viai-navy); font-size: 11.5px; font-weight: 700; }
.opc-node__ico { position: absolute; top: calc((var(--y) + 43) / 600 * 100%); width: 5.3333%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--viai-blue-bright); border: 1px solid #cfe0fb; animation: opc-ring 3.6s ease-out infinite; }
.opc-node--l .opc-node__ico { left: 21.5%; }
.opc-node--r .opc-node__ico { right: 21.5%; }
.opc-node__ico .icon { width: 42%; height: 42%; stroke-width: 1.7; }
.opc-node:nth-child(2) .opc-node__ico { animation-delay: 0.6s; }
.opc-node:nth-child(3) .opc-node__ico { animation-delay: 1.2s; }
.opc-node:nth-child(5) .opc-node__ico { animation-delay: 0.6s; }
.opc-node:nth-child(6) .opc-node__ico { animation-delay: 1.2s; }
.opc-node:nth-child(4) .opc-node__ico { animation-delay: 0.3s; }
@keyframes opc-ring {
  0% { box-shadow: 0 0 0 0 rgba(21, 83, 224, 0.28), 0 10px 26px rgba(21, 83, 224, 0.16); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(21, 83, 224, 0), 0 10px 26px rgba(21, 83, 224, 0.16); }
}

/* Cột hẹp: xếp dọc */
@container (max-width: 999px) {
  .opc__stage { aspect-ratio: auto; display: grid; gap: 22px; max-width: 640px; margin-inline: auto; }
  .opc__lines { display: none; }
  .opc-brain, .opc-core { position: static; width: auto; }
  .opc-brain { order: 1; }
  .opc-core { order: 2; }
  .opc-agents { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; margin-top: 12px; }
  .opc-node { display: block; position: relative; }
  .opc-node--l .opc-node__card, .opc-node--r .opc-node__card { position: relative; top: auto; left: auto; right: auto; width: auto; }
  .opc-node--l .opc-node__ico, .opc-node--r .opc-node__ico { top: -14px; left: 10px; right: auto; z-index: 1; width: 44px; }
}
@container (max-width: 480px) {
  .opc-brain__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.reduce-motion .opc__paths path { animation: none; stroke-dasharray: none; }
.reduce-motion .opc__dots { display: none; }
.reduce-motion .opc-brain__chips li, .reduce-motion .opc-node__ico, .reduce-motion .opc-core { animation: none; }

/* --------------------------------------------------------------------------
   7b. AI Agent trong quy trình thực tế — 7 khối, mỗi khối 2 cột: Trước đây (ảnh + thủ công + Cái giá) → Với AI Agent (các bước + KẾT QUẢ + nhân sự kiểm tra)
   Ảnh kết quả luôn NGANG 16:9 nên cột AI rộng hơn (1.42fr) để khung kết quả đủ lớn đọc được chữ.
   ≤1100px: xếp dọc (ảnh cạnh khối Trước đây → mũi tên xuống → cột AI); ≤700px: ảnh nằm trên khối Trước đây
   -------------------------------------------------------------------------- */
.cases { background: var(--viai-surface-ice); }
.cases__list { display: grid; gap: 18px; }
.case { padding: clamp(18px, 2.4vw, 30px); background: #fff; border: 1px solid #E3ECFB; border-radius: 22px; box-shadow: var(--shadow-card); }
.case__head { max-width: 56rem; margin-inline: auto; text-align: center; }
.case__head .eyebrow { justify-content: center; font-size: 11.5px; }
.case__head h2 { margin-top: 10px; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.25; text-wrap: balance; }
.case__head p:last-child { margin-top: 8px; font-size: 14.5px; color: var(--viai-muted-strong); text-wrap: balance; }
.case__body { display: grid; grid-template-columns: minmax(0, 0.78fr) 44px minmax(0, 1.42fr); gap: 14px; align-items: stretch; margin-top: clamp(18px, 2vw, 26px); }
.case__side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-width: 0; }   /* ảnh co giãn lấp phần cao còn dư, khối Trước đây giữ cao tự nhiên */

/* Ảnh (4:3, cắt theo --pos đặt trên từng <img>); không đè khung UI lên ảnh để thấy rõ nét mặt người trong ảnh */
.case__media { position: relative; min-height: 200px; margin: 0; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg, #EAF1FF, #D6E4FF); }
.case__media .ph { color: rgba(21, 83, 224, 0.3); }
.case__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 25%); }

/* Cột "Trước đây" + nhãn + danh sách bước + ô "Cái giá" nằm sát đáy */
.case__before { display: flex; flex-direction: column; padding: 16px 16px 16px; border-radius: 16px; background: #F4F6FA; border: 1px solid #E6EBF3; }
.case__cost { margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--viai-alert-soft); border: 1px solid var(--viai-alert-border); font-size: 12.5px; line-height: 1.45; color: var(--viai-text); }
.case__cost b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--viai-alert-deep); }
.case__before .case__steps { margin-bottom: 14px; }   /* khoảng cách tối thiểu tới ô Cái giá khi cột ngắn */
.case__after { padding: 16px 16px 18px; border-radius: 16px; background: #EEF4FF; border: 1px solid #D9E6FC; }
.case__label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--viai-muted-strong); }
.case__label span { font-weight: 600; letter-spacing: 0; text-transform: none; }
.case__label--ai { color: var(--viai-blue-bright); }
.case__steps { display: grid; gap: 11px; margin-top: 12px; counter-reset: step; }
.case__steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--viai-text); counter-increment: step; }
.case__steps li::before {
  content: counter(step); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #DDE3EE; color: var(--viai-muted-strong); font-size: 11.5px; font-weight: 700;
}
.case__steps--ai li::before { content: none; }
.case__ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--viai-blue-bright); color: #fff; }
.case__ico .icon { width: 13px; height: 13px; stroke-width: 2; }
.case__arrow {
  align-self: center; justify-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--viai-blue-soft); border: 1px solid #CFE0FB; color: var(--viai-blue-bright);
}
.case__arrow .icon { width: 20px; height: 20px; stroke-width: 2.2; }

/* Cột AI: các bước → khung KẾT QUẢ ngang 16:9 → thanh nhân sự kiểm tra (luôn dính đáy để hai cột kết thúc ngang nhau) */
.case__ai { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.case__review { margin-top: auto; }
/* Khung kết quả: có ảnh (case-N-result.webp) thì ảnh phủ kín + hiện nhãn; chưa có ảnh thì hiện thẻ nháp .case__out ở giữa khung. :has() tự đổi khi ảnh thêm vào / bị onerror gỡ */
.case__result {
  position: relative; isolation: isolate; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 16px; display: grid; place-items: center;
  /* Viền sáng: dải conic-gradient xoay quanh khung (--case-a chạy 0→360° trong motion.css); ảnh và nền thụt vào 2px nên chỉ lộ phần viền */
  background: conic-gradient(from var(--case-a, 0deg), #CFE0FB 0deg, #CFE0FB 205deg, #1553E0 270deg, #7CC8FF 322deg, #CFE0FB 360deg);
  box-shadow: 0 14px 34px rgba(21, 83, 224, 0.16);
}
.case__result::after { content: ""; position: absolute; inset: 2px; z-index: 0; border-radius: 14px; background: linear-gradient(145deg, #EAF1FF, #D6E4FF); }   /* nền khung khi chưa có ảnh */
.case__result::before { content: ""; position: absolute; inset: 2px; z-index: 2; border-radius: 14px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%); translate: -130% 0; }   /* vệt sáng quét qua (chạy ở motion.css) */
/* Ảnh khít khung 16:9, thụt 2px để lộ viền sáng; cover nên không để lại khoảng trống nào */
.case__result > img { position: absolute; inset: 2px; z-index: 1; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 14px; object-fit: cover; object-position: 50% 0; background: #fff; }
.case__result:has(> img) .case__out { visibility: hidden; }
/* Nhãn kết quả chỉ để đọc màn hình (ảnh đã nói rõ nội dung, nhãn nổi trên ảnh sẽ che chữ trong ảnh) */
.case__result-tag { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.case__out {
  position: relative; z-index: 1; zoom: 1.15; width: min(76%, 360px); padding: 12px 13px; border-radius: 14px; background: #fff; border: 1px solid #E3ECFB; box-shadow: 0 14px 34px rgba(21, 83, 224, 0.12);
  font-size: 12.5px; line-height: 1.45; color: var(--viai-muted-strong);
}
.case__out-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--viai-blue); }
.case__out-head .icon { flex: none; width: 15px; height: 15px; color: var(--viai-blue-bright); }
.case__doc { display: grid; gap: 6px; margin-top: 9px; padding: 9px 10px; border-radius: 9px; background: var(--viai-surface-ice); font-size: 11.5px; }
.case__src { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding: 6px 8px; border-radius: 8px; background: var(--viai-blue-soft); color: var(--viai-blue-bright); font-size: 11px; font-weight: 600; }
.case__src .icon { flex: none; width: 13px; height: 13px; }
.case__tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.case__tabs li { padding: 3px 9px; border-radius: 999px; background: var(--viai-surface-ice); border: 1px solid #E3ECFB; font-size: 11px; font-weight: 600; color: var(--viai-muted-strong); }
.case__tabs .is-on { background: var(--viai-blue-bright); border-color: transparent; color: #fff; }
.case__tabs .is-late { background: var(--viai-alert-soft); border-color: var(--viai-alert-border); color: var(--viai-alert-deep); }
.case__thumb { display: grid; place-items: center; margin-top: 9px; aspect-ratio: 16 / 7; border-radius: 9px; background: linear-gradient(135deg, #CFE0FF, #EAF1FF); color: rgba(21, 83, 224, 0.5); }
.case__thumb .icon { width: 28px; height: 28px; stroke-width: 1.5; }
.case__rows { display: grid; gap: 6px; margin-top: 9px; }
.case__rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 9px; background: var(--viai-surface-ice); font-size: 11.5px; color: var(--viai-text); }
.case__rows span { min-width: 0; }
.case__tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-style: normal; font-weight: 700; }
.case__tag--late { background: var(--viai-alert-soft); color: var(--viai-alert-deep); }
.case__tag--warn { background: #FFF4E5; color: #B54708; }
.case__tag--ok { background: var(--viai-success-soft); color: #067647; }
.case__tag--info { background: var(--viai-blue-soft); color: var(--viai-blue-bright); }
.case__kv { display: grid; margin-top: 8px; }
.case__kv div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid #EDF2FB; font-size: 11.5px; }
.case__kv dt { color: var(--viai-muted-strong); }
.case__kv dd { margin: 0; font-weight: 600; color: var(--viai-text); }
.case__status { display: inline-block; margin-top: 9px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.case__status--ok { background: var(--viai-success-soft); color: #067647; }
.case__status--warn { background: #FFF4E5; color: #B54708; }
.case__note { margin-top: 9px; font-size: 11px; color: var(--viai-muted-strong); }
/* Mô phỏng timeline dựng video: 3 track, mỗi track là 1 dải gradient (--bar đặt trên từng <span>), đường đỏ là con trỏ phát */
.case__timeline { position: relative; display: grid; gap: 4px; margin-top: 9px; padding: 8px; border-radius: 9px; background: var(--viai-surface-ice); }
.case__timeline span { height: 7px; border-radius: 3px; background: var(--bar); }
.case__timeline::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 46%; width: 2px; border-radius: 1px; background: var(--viai-alert); }
.case__review { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--viai-blue-soft); font-size: 13px; line-height: 1.45; color: var(--viai-muted-strong); }
.case__review b { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--viai-blue); }
.case__review-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--viai-blue-bright); box-shadow: 0 0 0 1px #CFE0FB; }
.case__review-ico .icon { width: 18px; height: 18px; }

@media (max-width: 1100px) {
  .case__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .case__side { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); grid-template-rows: auto; }
  .case__media { min-height: 240px; }
  .case__arrow { rotate: 90deg; }
}
@media (max-width: 700px) {
  .case__side { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; }
  .case__media { aspect-ratio: 4 / 3; min-height: 0; }
}

/* --------------------------------------------------------------------------
   8. Dấu ấn nổi bật
   -------------------------------------------------------------------------- */
.gallery { padding-block: var(--sp); background: #fff; }

/* --------------------------------------------------------------------------
   9. Gói triển khai
   -------------------------------------------------------------------------- */
.pricing { background: var(--viai-surface-ice); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin-top: 60px; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 34px 26px 28px; text-align: center;
  background: #fff; border: 1px solid var(--viai-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.plan--featured { border: 1.5px solid var(--viai-orange); box-shadow: 0 20px 56px rgba(243, 107, 38, 0.16); }
.plan__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: var(--radius-pill);
  background: var(--viai-cta-bg); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.plan__badge .icon { width: 14px; height: 14px; fill: currentColor; }
.plan__ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--viai-blue-soft); color: var(--viai-blue-bright); }
.plan__ico .icon { width: 32px; height: 32px; stroke-width: 1.7; }
.plan h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--viai-blue); }
.plan__desc { min-height: 3em; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--viai-muted-strong); }
.plan__list { flex: 1; align-content: start; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--viai-border); text-align: left; }
.plan .btn { padding: 0 14px; font-size: 14px; }
.plan__foot { display: grid; gap: 12px; margin-top: 26px; }
.plan__price { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; background: var(--viai-blue-soft); color: var(--viai-blue-bright); font-size: 15px; font-weight: 700; }
.plan__price .icon { width: 20px; height: 20px; }
.plan--featured .plan__price { background: var(--viai-orange-soft); color: var(--viai-orange-strong); }
.pricing__note { margin-top: 30px; text-align: center; font-size: 14px; color: var(--viai-muted-strong); }

/* --------------------------------------------------------------------------
   10. Quy trình
   -------------------------------------------------------------------------- */
.process { background: #fff; }
.process__head { text-align: center; }
.process__head h2 { margin: 14px auto 0; max-width: 34em; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; text-wrap: balance; }
/* 5 bước: mỗi bước xếp dọc (số → tiêu đề → mô tả) cho đủ rộng; ≤1080px chuyển về số bên trái (xem khối responsive) */
.process__card {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 40px; padding: 34px 10px;
  background: #fff; border: 1px solid var(--viai-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.step { position: relative; padding: 4px 30px 4px 20px; }
.step__num { width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--viai-blue-bright); color: #fff; font-size: 17px; font-weight: 800; }
.step h3 { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--viai-navy); text-wrap: balance; }
.step p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--viai-muted-strong); }
.step__arrow { position: absolute; right: 4px; top: 10px; width: 24px; height: 24px; stroke: var(--viai-orange); stroke-width: 2.4; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq { background: var(--viai-surface-ice); }
.faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; align-items: start; margin-top: 40px; }

/* --------------------------------------------------------------------------
   12. Form tư vấn
   -------------------------------------------------------------------------- */
.cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--viai-blue-footer); }
.cta__waves { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.cta__main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; padding-block: clamp(56px, 5vw, 72px); }
.cta h2 { margin-top: 16px; font-size: clamp(28px, 3.1vw, 42px); font-weight: 800; line-height: 1.16; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.cta h2 .accent { background: var(--viai-grad-orange-on-blue); -webkit-background-clip: text; background-clip: text; color: var(--viai-orange-on-blue); }
.eyebrow--onblue { color: var(--viai-eyebrow-on-blue); }
.cta__lead { max-width: 32em; margin-top: 20px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.cta__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 32px; }
.cta__points li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; }
.cta__points .icon { width: 20px; height: 20px; stroke: #4EE0B0; stroke-width: 2.6; }

.lead-form { padding: clamp(20px, 2.4vw, 32px); border-radius: 22px; background: #fff; color: var(--viai-text); box-shadow: 0 30px 80px rgba(3, 20, 80, 0.35); }
.lead-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field--consent { margin-top: 16px; }
.lead-form .btn--submit { margin-top: 16px; }

/* Footer theo chân trang viai.vn: nền xanh navy phẳng, cột 1 là thông tin liên hệ + 4 cột liên kết có icon, dòng bản quyền giữa trang */
.site-footer { background: #0A2278; color: #CCD8FA; }
.site-footer a { transition: color var(--duration-fast); }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 2.4vw, 36px);
  padding-block: 44px 36px;
}
.site-footer__name { font-size: 15.5px; line-height: 1.5; color: #D9E2FF; }
.site-footer__contact { display: grid; gap: 12px; margin-top: 16px; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #E6ECFF; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__contact .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--viai-orange-on-blue, #FFA24C); }
.site-footer__contact a .icon { margin-top: 0; }
.site-footer__contact .is-strong { font-weight: 700; color: #fff; }
.zalo-mark { font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: -0.02em; color: #4FA3FF; line-height: 1; }
.site-footer__contact .zalo-mark { min-width: 18px; }
.site-footer__col h3 { margin-bottom: 14px; font-size: 17px; font-weight: 700; letter-spacing: 0; color: #fff; }
.site-footer__col ul:not(.site-footer__social) { display: grid; gap: 12px; }
.site-footer__col li a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.4; color: #CCD8FA; }
.site-footer__col li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__col li .icon { width: 16px; height: 16px; color: #8FB0FF; }
.icon--fill { fill: currentColor; stroke: none; }
.site-footer__social { display: flex; gap: 12px; margin-top: 22px; }
.site-footer__col .site-footer__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; transition: background-color var(--duration-fast), transform var(--duration-fast);
}
.site-footer__col .site-footer__social a:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
.site-footer__col .site-footer__social .icon { width: 18px; height: 18px; color: #fff; }
.site-footer__social .zalo-mark { color: #fff; }
.site-footer__bottom { padding-block: 18px 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; font-size: 14.5px; color: #E6ECFF; }

/* Nút lên đầu trang: tròn cam nổi góc phải dưới như viai.vn; có JS thì chỉ hiện sau khi cuộn xuống (js/main.js) */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--viai-cta-bg); color: #fff; box-shadow: 0 8px 22px rgba(243, 107, 38, 0.4);
  transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast);
}
.to-top .icon { width: 22px; height: 22px; stroke-width: 2.6; }
.to-top:hover { transform: translateY(-2px); filter: brightness(1.06); }
.js-ready .to-top:not(.is-visible) { opacity: 0; transform: translateY(10px); pointer-events: none; }


/* ==========================================================================
   Responsive
   ========================================================================== */

/* ---- ≤1200: footer — khối liên hệ chiếm cả hàng trên, 4 cột liên kết xuống hàng dưới (5 cột ở rộng hơn thì các link bị bẻ dòng) ---- */
@media (max-width: 1200px) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
}

/* ---- ≤1080: giá 4 → 2 cột; quy trình 5 bước → 2 cột (bước 5 chiếm cả hàng), số bên trái, bỏ mũi tên ---- */
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
  .hero__note { font-size: 18px; }

  .process__card { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; padding: 30px 12px; }
  .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 4px 20px; }
  .step__num { grid-row: 1 / 3; margin-bottom: 0; }
  .step h3 { display: flex; align-items: center; min-height: 44px; }
  .step p { grid-column: 2; }
  .step__arrow { display: none; }
  .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- ≤900: tablet ---- */
@media (max-width: 900px) {
  /* Header: menu thành dropdown dưới thanh, mở bằng nút (js/main.js) */
  .nav { gap: 12px; }
  .nav__cta { margin-left: auto; }
  .js-ready .menu-toggle { display: grid; }
  .nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 4px var(--container-gutter) 14px; background: #fff; border-bottom: 1px solid var(--viai-border); box-shadow: 0 18px 30px rgba(11, 29, 71, 0.1);
  }
  .js-ready .nav__menu.is-open { display: block; }
  .nav__menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__menu li + li { border-top: 1px solid var(--viai-border); }
  .nav__menu a { padding: 14px 2px; font-size: 16px; }
  .nav__menu a::after { display: none; }

  /* Hero xếp dọc */
  .hero { min-height: 0; padding-block: 40px 56px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 50%, rgba(243, 247, 255, 0.5) 100%); }
  .hero__visual { max-width: 680px; }

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

  .flow__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }

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

/* ---- ≤760: dải số xếp dọc ---- */
@media (max-width: 760px) {
  .stats__grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .stat, .stat:first-child, .stat:nth-child(odd), .stat:nth-child(n+3) { padding: 18px 0; border-top: 0; }
  .stat + .stat::before, .stat:nth-child(odd)::before { display: block; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; transform-origin: left; }
  .stat:first-child::before { display: none; }
}

/* ---- ≤760: footer 2 cột ---- */
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; padding-block: 36px 28px; }
  .site-footer__contact { grid-template-columns: minmax(0, 1fr); }
  .site-footer__bottom { font-size: 13.5px; }
}
@media (max-width: 420px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .to-top { right: 14px; bottom: 14px; }
}

/* ---- ≤700: FAQ 1 cột ---- */
@media (max-width: 700px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- ≤600: mobile ---- */
@media (max-width: 600px) {
  .nav { gap: 8px; }
  .brand img { height: 38px; }
  .nav__cta { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .nav__cta .icon { display: none; }

  .hero { padding-block: 32px 44px; }
  .hero__actions { align-self: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .hero__note { right: 0; font-size: 18px; }

  .apps__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .opc__cta .btn { width: 100%; }

  .plans { grid-template-columns: minmax(0, 1fr); }
  .process__card { grid-template-columns: minmax(0, 1fr); padding: 26px 8px; }

  .cta__points { grid-template-columns: minmax(0, 1fr); }
  .lead-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- ≤380: logo header nhỏ thêm để vừa logo + nút CTA + nút menu */
@media (max-width: 380px) {
  .brand img { height: 34px; }
}