/* ==========================================================================
   frame.css — các section của KHUNG MỚI (đợt 10–12): hero (ảnh + thẻ Agent kính mờ) · 5 nỗi đau (thẻ ảnh cảnh báo đỏ) · Second Brain ·
   ba cách làm · dải chuyển · mô phỏng yêu cầu→kết quả (thanh kéo + tab) · sau khóa học · nội dung 4 giai đoạn · ai nên học ·
   lộ trình 5 cấp độ + quy trình học (thẻ mở rộng) · kiểu tiêu đề section (nhãn chấm cam + tiêu đề navy có cụm nhấn cam).
   Học phí / FAQ / chân trang KHÔNG nằm ở đây (giữ nguyên trong css/sections.css).
   Dùng lại token ở css/tokens.css. Mỗi khối có media query ngay sau nó (mobile ghi đè sau desktop).
   ========================================================================== */

/* ---------- Kiểu tiêu đề section (ảnh "MÔ HÌNH OPC", gốc: viai-landing css/base.css .eyebrow + sections.css .opc__head) ----------
   Nhãn in hoa cam đậm có chấm tròn cam · tiêu đề navy căn giữa với MỘT cụm nhấn cam (.accent) · mô tả xám xanh */
.sec-head { max-width: 50rem; margin: 0 auto 34px; text-align: center; }
.eyebrow {
  --eyebrow-dot: var(--color-brand-orange);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; line-height: 1.3; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-orange-strong);
}
.eyebrow::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 3.6px, var(--eyebrow-dot) 4.2px);
}
.h-title {
  margin-top: 14px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em;
  color: var(--color-brand-navy); text-wrap: balance;
}
.h-title--sm { font-size: clamp(22px, 1rem + 1vw, 30px); }
.sec-head .section-sub { max-width: 720px; margin: 14px auto 0; text-wrap: pretty; }

/* ---------- Màu theo Agent (dùng chung hero, thanh kéo, sau khóa học). --agc = màu đặc cho chữ trắng đặt trên nó (≥4,5:1) ---------- */
.ag--sales { --ag: var(--color-brand-blue); --ag-tint: var(--tint-blue); --agc: #0861F8; }
.ag--care  { --ag: #17A35F; --ag-tint: var(--tint-green); --agc: #0B7F45; }
.ag--mkt   { --ag: var(--color-brand-violet); --ag-tint: var(--tint-violet); --agc: #8747E8; }
.ag--ops   { --ag: var(--color-brand-orange); --ag-tint: var(--tint-orange); --agc: #B84508; }
.ag-ico {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--ag, var(--color-brand-blue)); color: #fff;
}
.ag-ico .icon { width: 19px; height: 19px; stroke-width: 2; }

/* ============================== 1. HERO — 3 dấu ✓ + ảnh cutout + thẻ Agent kính mờ ============================== */
.hero__checks { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.hero__checks li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 1.3; font-weight: 600; color: var(--color-text); }
.hero__checks .icon { width: 20px; height: 20px; color: var(--color-brand-blue); stroke-width: 2; }

.hero__media { min-width: 0; }
.hero__stage { position: relative; isolation: isolate; width: 100%; max-width: 680px; margin-inline: auto; }
/* Nền: văn phòng mờ dần ra mép + quầng sáng xanh sau nhân vật */
.hero__scene {
  position: absolute; inset: -6% -10% -4%; z-index: -1; pointer-events: none;
  background: url("../assets/photos/hero-founder.webp") 0% 42% / 260% auto no-repeat; filter: blur(8px) saturate(1.08); opacity: .55;   /* chỉ lấy vùng cửa sổ/cây của ảnh (không có người) */
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent 100%); mask-image: radial-gradient(closest-side, #000 38%, transparent 100%);
}
.hero__stage::before {
  content: ""; position: absolute; z-index: -1; left: 14%; right: -6%; top: 14%; bottom: 4%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 97, 248, .22), transparent 72%);
}
.hero__photo { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(16, 52, 124, .16)); }

/* Mặc định (<1280px): lưới 2×2 dưới ảnh */
.agent-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.agent-card {
  position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 92px; padding: 14px 44px 14px 14px; border-radius: 20px;
  background: rgba(255, 255, 255, .76); border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: 0 16px 36px rgba(16, 52, 124, .16), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.agent-card .ag-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--ag-tint); color: var(--ag); }
.agent-card .ag-ico .icon { width: 20px; height: 20px; }
.agent-card__txt { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.agent-card strong { font-size: 13.5px; line-height: 1.25; font-weight: 800; color: var(--color-text-strong); }
.agent-card__st { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--color-muted); }
.agent-card__go { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ag); color: var(--ag); }
.agent-card__go .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.dots { display: inline-flex; gap: 2px; margin-left: 2px; }
.dots i { display: block; width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--ag, var(--color-brand-blue)); opacity: .55; }

@media (min-width: 1100px) { .hero h1 { font-size: clamp(34px, 3.05vw, 46px); } }
@media (min-width: 1280px) {
  /* Thẻ nổi trên ảnh, đặt tránh mặt: hàng trên nằm phía trên đầu người/robot, hàng dưới nằm dưới mặt (xem css/motion.css cho hiệu ứng nổi) */
  .hero__stage { aspect-ratio: 1.2 / 1; max-width: none; }
  .hero__photo { position: absolute; left: 0; bottom: 0; }
  .agent-cards { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .agent-card { position: absolute; width: 41%; max-width: 256px; }
  .agent-card:nth-child(1) { left: 1%; top: 1%; rotate: -2.5deg; }
  .agent-card:nth-child(2) { left: 57%; top: 5%; rotate: 2.5deg; }
  .agent-card:nth-child(3) { left: -3%; top: 59%; rotate: 2deg; }
  .agent-card:nth-child(4) { left: 59%; top: 68%; rotate: -2deg; }
}
@media (max-width: 559px) {
  .agent-card { min-height: 78px; padding: 11px 10px; gap: 8px; }
  .agent-card .ag-ico { width: 32px; height: 32px; border-radius: 9px; }
  .agent-card strong { font-size: 12.5px; }
  .agent-card__st { font-size: 11.5px; }
  .agent-card__go { display: none; }
  .hero__checks { gap: 8px 16px; }
}

/* ============================== 2. 5 NỖI ĐAU — thẻ ảnh cảnh báo đỏ ==============================
   Nền ửng đỏ + vạch cảnh báo + ảnh phủ sắc đỏ + huy hiệu "!" để người xem nhận ra đây là vấn đề đang gặp.
   Chữ nhấn của tiêu đề đổi sang gradient đỏ qua biến --color-accent-* (xem .accent trong base.css). */
.section--problem {
  --color-accent-from: #E5392F; --color-accent-to: #B3151C; --sheen: rgba(255, 196, 186, .95); --eyebrow-dot: #E5392F;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #FFF1F0 0%, #FFF8F7 55%, #FFFFFF 100%);
}
.section--problem .eyebrow { color: #B42318; }
.section--problem::before {            /* quầng đỏ mờ ở đỉnh */
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: -10%; height: 70%; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(229, 57, 47, .17), transparent 70%);
}
.section--problem::after {             /* vạch cảnh báo (băng chéo đỏ/hồng) ở mép trên */
  content: ""; position: absolute; z-index: -1; top: 0; left: -40px; right: -40px; height: 5px; pointer-events: none;
  background: repeating-linear-gradient(135deg, #E5392F 0 12px, #FBD0CB 12px 24px);
}
.pain-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }   /* 3 thẻ hàng trên, 2 thẻ hàng dưới căn giữa */
.pain-card { grid-column: span 2; }
.pain-card:nth-child(4) { grid-column: 2 / span 2; }
.pain-card:nth-child(5) { grid-column: 4 / span 2; }
.pain-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF3F2 100%); border: 1px solid #F5C6C2; border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(190, 35, 40, .10); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pain-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(190, 35, 40, .20); border-color: #EBA19B; }
.pain-card__media { position: relative; overflow: hidden; }
.pain-card__media::after {             /* lớp phủ sắc đỏ (multiply giữ lại chi tiết ảnh) */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(120% 90% at 50% 40%, rgba(220, 40, 45, .42) 0%, rgba(150, 12, 30, .72) 100%);
}
.pain-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.8) contrast(1.08) brightness(1.05); transition: scale .7s var(--ease-standard); }
.pain-card:hover img { scale: 1.05; }
.pain-card__alert {                    /* huy hiệu cảnh báo "!" (chỉ trang trí) */
  position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff;
  background: linear-gradient(180deg, #F04438, #D92D20); color: #fff;
  font-size: 17px; font-weight: 800; line-height: 1; box-shadow: 0 6px 14px rgba(217, 45, 32, .55);
}
.pain-card__body { padding: 18px 20px 24px; }
.pain-card h3 { font-size: 19px; line-height: 1.3; font-weight: 800; color: #B42318; }
.pain-card p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: #6B4747; }
.pain-card p.pain-card__lead { margin-top: 6px; font-size: 15.5px; line-height: 1.45; font-weight: 700; color: #8A1F17; }
@media (max-width: 1099px) { .pain-grid { gap: 16px; } .pain-card__body { padding: 16px 16px 20px; } }
@media (max-width: 899px) {   /* 2 cột; thẻ 5 nằm giữa hàng cuối */
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pain-card, .pain-card:nth-child(4) { grid-column: auto; }
  .pain-card:nth-child(5) { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }
}
@media (max-width: 639px) {
  .pain-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 480px; margin-inline: auto; }
  .pain-card:nth-child(5) { grid-column: auto; width: auto; }
  .pain-card img { aspect-ratio: 2 / 1; }
}

/* ============================== 3. GIẢI PHÁP — SECOND BRAIN (sơ đồ, đợt 13) ==============================
   ≥1100px: "sân khấu" tỉ lệ 1200×410; mọi phần tử đặt bằng --x --y --w --h (đơn vị của hệ 1200×410) nên khớp với các đường nối SVG cùng hệ toạ độ.
   <1100px: bỏ đường nối, xếp dọc (nguồn → Second Brain → 2 thẻ → vòng cập nhật). */
.sb { position: relative; max-width: 1200px; margin-inline: auto; aspect-ratio: 1200 / 410; }
.sb__svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.sb__tube { stroke-width: 13; opacity: .16; }
.sb__core { stroke-width: 5; }
.sb__pulse { stroke-dasharray: 9 190; }
.sb__loop { stroke: #F26A12; stroke-width: 3; stroke-dasharray: 7 7; }
.sb__in, .sb__out { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sb-chip, .sb__hub, .sb-card, .sb__loop-pill {
  position: absolute; margin: 0;
  left: calc(var(--x) / 12 * 1%); top: calc(var(--y) / 4.1 * 1%); width: calc(var(--w) / 12 * 1%); height: calc(var(--h) / 4.1 * 1%);
}

/* Ba thẻ nguồn tri thức */
.sb-chip {
  --sc: var(--color-brand-blue); --st: #EEF5FF; --sb: #CFE0FB;
  z-index: 3; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-radius: 22px; pointer-events: auto;
  background: linear-gradient(180deg, #fff, var(--st)); border: 1.5px solid var(--sb);
  box-shadow: 0 12px 28px rgba(16, 52, 124, .12), inset 0 1px 0 #fff;
}
.sb-chip--violet { --sc: var(--color-brand-violet); --st: #F5EFFE; --sb: #DFCFF9; }
.sb-chip--green  { --sc: #0B7F45; --st: #EDF9F2; --sb: #BFE7D2; }
.sb-chip__ico {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px;
  background: #fff; color: var(--sc); box-shadow: 0 4px 12px rgba(16, 52, 124, .10);
}
.sb-chip__ico .icon { width: 24px; height: 24px; stroke-width: 1.9; }
.sb-chip__txt { font-size: 16px; line-height: 1.25; font-weight: 800; color: var(--color-text-strong); text-wrap: balance; }

/* Second Brain ở giữa: ảnh hub mờ dần ra mép + nhãn kính phía dưới */
.sb__hub { z-index: 1; }
.sb__hub img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.sb__label {
  position: absolute; z-index: 1; left: 23.25%; right: 23.25%; top: 62%; padding: 10px 8px 11px; text-align: center;
  background: rgba(255, 255, 255, .94); border: 1px solid #fff; border-radius: 16px; box-shadow: 0 14px 30px rgba(16, 52, 124, .22);
}
.sb__label strong { display: block; font-size: 17px; line-height: 1.2; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--color-text-strong); }
.sb__label span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.3; font-weight: 600; color: #46587C; }

/* Hai thẻ ảnh bên phải */
.sb-card {
  z-index: 3; overflow: hidden; border-radius: 26px; border: 3px solid #fff; background: #DCE8FA; pointer-events: auto;
  box-shadow: 0 18px 40px rgba(16, 52, 124, .20);
}
.sb-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.sb-card__badge {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--color-brand-blue); box-shadow: 0 8px 18px rgba(16, 52, 124, .25);
}
.sb-card--human .sb-card__badge { color: var(--color-brand-orange-dark); }
.sb-card__badge .icon { width: 28px; height: 28px; stroke-width: 2.2; }
.sb-card__label {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 24px rgba(16, 52, 124, .22);
  font-size: 14.5px; line-height: 1.25; font-weight: 800; color: var(--color-text-strong);
}
.sb-card__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tint-blue); color: var(--color-brand-blue); }
.sb-card--human .sb-card__ico { background: var(--tint-orange); color: var(--color-brand-orange-dark); }
.sb-card__ico .icon { width: 19px; height: 19px; }

/* Nhãn vòng phản hồi */
.sb__loop-pill {
  z-index: 3; display: flex; align-items: center; justify-content: center; padding: 0 12px; text-align: center;
  border-radius: 999px; background: #FFF6EC; border: 1.5px solid #F7C99C; box-shadow: 0 8px 18px rgba(242, 106, 18, .14);
  font-size: 13px; line-height: 1.2; font-weight: 700; color: #8F3604; text-wrap: balance;
}
@media (min-width: 1100px) and (max-width: 1249px) {
  .sb-chip { gap: 10px; padding: 0 10px; }
  .sb-chip__txt { font-size: 15px; }
  .sb-card__label { font-size: 13.5px; }
  .sb__loop-pill { font-size: 12.5px; padding: 0 8px; }
}

/* <1100px: xếp dọc, mũi tên chảy xuống giữa các tầng */
@media (max-width: 1099px) {
  .sb { display: grid; justify-items: center; gap: 46px; max-width: 900px; aspect-ratio: auto; }
  .sb__svg { display: none; }
  .sb__in, .sb__out { position: relative; inset: auto; display: grid; width: 100%; gap: 14px; pointer-events: auto; }
  .sb__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb__out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-chip, .sb-card, .sb__hub, .sb__loop-pill { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .sb-chip { min-height: 78px; }
  .sb__hub { width: min(100%, 480px); }
  .sb-card { aspect-ratio: 2 / 1.1; }
  .sb__in::after, .sb__hub::after {
    content: ""; position: absolute; left: 50%; bottom: -38px; width: 28px; height: 28px; translate: -50% 0; border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230861F8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 15px no-repeat;
    border: 1.5px solid var(--color-border-strong);
  }
  .sb__loop-pill { gap: 8px; min-height: 42px; padding: 8px 20px; border-style: dashed; }
  .sb__loop-pill::before {
    content: ""; flex: none; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26A12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5m-6 6 6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (max-width: 699px) {
  .sb__in, .sb__out { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .sb-card { aspect-ratio: 16 / 10; }
}

/* ============================== 4. BA CÁCH TIẾP CẬN (ảnh kho nguyên khung, tràn mép đáy thẻ) ============================== */
.ways__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.way {
  --wc: var(--color-danger); --wt: #FFF6F5; --wb: #F7D2CE; --wp: 22px;
  display: flex; flex-direction: column; padding: var(--wp) var(--wp) 0; overflow: hidden; background: var(--wt); border: 1.5px solid var(--wb); border-radius: 20px; box-shadow: var(--shadow-card);
}
.way--ai    { --wc: var(--color-brand-orange-dark); --wt: #FFF8F1; --wb: #F9DBBF; }
.way--agent { --wc: var(--color-brand-blue); --wt: #F2F8FF; --wb: #AFCDF6; box-shadow: 0 20px 48px rgba(8, 97, 248, .18); }
.way__head { display: flex; align-items: center; gap: 14px; }
.way__ico {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--wc); border: 2px solid var(--wb); box-shadow: 0 6px 16px rgba(16, 52, 124, .10);
}
.way__ico .icon { width: 26px; height: 26px; }
.way__head h3 { font-size: 20px; line-height: 1.25; font-weight: 800; color: var(--wc); }
.way__head p { margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--color-muted); }
.way__list { display: grid; gap: 11px; margin: 20px 0 14px; }
.way__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--color-text); }
.way__list .icon { width: 19px; height: 19px; margin-top: 1px; color: var(--wc); stroke-width: 2.2; }
.way__fig { position: relative; flex: 1 1 auto; margin: 0 calc(var(--wp) * -1); aspect-ratio: 3 / 2; overflow: hidden; }
.way__fig img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  /* mép trên mờ dần vào nền thẻ + hai bên mờ nhẹ (hai lớp mặt nạ giao nhau) → không còn đường cắt gắt giữa chữ và ảnh */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .45) 16%, #000 46%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .45) 16%, #000 46%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.way--agent .way__fig img { object-position: 42% 40%; }
.way__tags { position: absolute; inset: 0; pointer-events: none; }
.way__tags span {
  position: absolute; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .95); box-shadow: 0 6px 16px rgba(8, 30, 90, .22);
  font-size: 12px; line-height: 1.2; font-weight: 700; color: var(--color-text-strong); white-space: nowrap;
}
/* Vị trí chip theo từng thẻ (đặt hai bên nhân vật, như ảnh mẫu) */
.way--manual .way__tags span:nth-child(1) { left: 5%; top: 30%; }
.way--manual .way__tags span:nth-child(2) { left: 3%; top: 56%; }
.way--manual .way__tags span:nth-child(3) { right: 12%; top: 8%; }
.way--manual .way__tags span:nth-child(4) { right: 3%; top: 30%; }
.way--manual .way__tags span:nth-child(5) { right: 8%; top: 54%; }
.way--manual .way__tags span:nth-child(6) { right: 3%; top: 76%; }
.way--ai .way__tags span:nth-child(1) { left: 4%; top: 26%; }
.way--ai .way__tags span:nth-child(2) { right: 4%; top: 10%; }
.way--ai .way__tags span:nth-child(3) { right: 5%; top: 62%; }
.way--agent .way__tags span:nth-child(1) { left: 4%; top: 24%; }
.way--agent .way__tags span:nth-child(2) { right: 4%; top: 10%; }
.way--agent .way__tags span:nth-child(3) { right: 3%; top: 58%; }
.way--agent .way__tags span:nth-child(4) { left: 3%; top: 72%; }
@media (max-width: 1023px) { .ways__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
@media (max-width: 559px) { .way { --wp: 18px; } }

/* ============================== 5. DẢI CHUYỂN — ảnh human-team-vs-agent-team (đội quá tải | đội làm cùng Agent) ============================== */
.bridge { padding-block: 0 var(--section-space); }
.bridge__card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; min-height: 290px;
  border: 1px solid #D3E3FA; border-radius: 24px; box-shadow: var(--shadow-card);
  background: linear-gradient(110deg, #EAF2FF 0%, #F4F8FF 60%, #FFF4EA 100%);
}
.bridge__copy { align-self: center; position: relative; z-index: 1; padding: 34px 16px 34px 40px; }
.bridge__copy h2 { font-size: clamp(22px, 1rem + 1.1vw, 30px); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--color-brand-navy); text-wrap: balance; }
.bridge__copy p { max-width: 460px; margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--color-text); }
.bridge__fig { position: relative; margin: 0; min-width: 0; }
.bridge__fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}
.bridge__tag { position: absolute; top: 16px; padding: 7px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.2; font-weight: 800; color: #fff; box-shadow: 0 8px 18px rgba(0, 20, 80, .28); }
.bridge__tag--manual { left: 26%; background: #0E2552; }
.bridge__tag--agent { right: 16px; background: var(--color-brand-blue); }
@media (max-width: 1023px) {
  .bridge__card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bridge__copy { padding: 28px 28px 8px; }
  .bridge__fig { height: 240px; }
  .bridge__fig img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .bridge__tag--manual { left: 16px; }
}
@media (max-width: 559px) {
  .bridge__copy { padding: 22px 20px 6px; }
  .bridge__fig { height: 200px; }
  .bridge__tag { font-size: 12.5px; padding: 6px 10px; }
}

/* ============================== 6. TỪ YÊU CẦU → KẾT QUẢ — mở đầu (luồng 4 bước + lối tắt) + 4 section riêng, mỗi section một thanh kéo Trước/Sau ============================== */
/* Mở đầu (đợt 17, giao diện mới): hero xanh navy — ảnh nền + tiêu đề trắng/cam + 4 thẻ bước kính mờ + lối tắt tới từng Agent.
   ≥1100px: sân khấu tỉ lệ 1672×941 (cùng tỉ lệ ảnh) nên vật nổi / mũi tên đặt bằng toạ độ của ảnh. <1100px: tiêu đề → ảnh → thẻ bước → lối tắt. */
.msim {
  position: relative; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 50% 30%, #103F9D 0%, #0A2869 45%, #061746 100%);
  --color-accent-from: #FFA24D; --color-accent-to: #FF6A1A;     /* cụm nhấn cam sáng hơn để đủ tương phản trên nền navy */
}
.msim__stage { position: relative; isolation: isolate; display: flex; flex-direction: column; max-width: 1672px; margin: 0 auto; }
.msim__photo { margin: 0; }
.msim__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msim__head { position: relative; z-index: 2; order: 1; margin: 0 auto; }
.msim .eyebrow {
  padding: 8px 18px 8px 10px; border-radius: 999px; color: #FFB066; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.msim .h-title { color: #fff; font-size: clamp(30px, 3.5vw, 60px); text-shadow: 0 4px 24px rgba(2, 12, 48, .55); }
.msim .h-title .accent { text-shadow: none; filter: drop-shadow(0 4px 14px rgba(2, 12, 48, .5)); }
.msim .sec-head .section-sub { max-width: none; margin-top: clamp(6px, .8vw, 14px); font-size: clamp(15px, 1.35vw, 22px); line-height: 1.4; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 14px rgba(2, 12, 48, .6); }
.msim__bottom { position: relative; z-index: 2; order: 3; display: flex; flex-direction: column; gap: clamp(10px, 1.3vw, 22px); }

/* 4 thẻ bước */
.msim__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 28px); }
.msim__steps li {
  display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); padding: clamp(10px, 1.2vw, 20px) clamp(12px, 1.3vw, 22px); border-radius: clamp(16px, 1.5vw, 24px);
  background: linear-gradient(180deg, rgba(16, 76, 205, .58), rgba(7, 38, 126, .66)); border: 1.5px solid rgba(86, 176, 255, .8);
  box-shadow: 0 0 28px rgba(35, 125, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.msim__num {
  flex: none; display: grid; place-items: center; width: clamp(38px, 3.2vw, 56px); aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(15px, 1.4vw, 24px); line-height: 1; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 35% 28%, #5AB2FF, #0A5FEA 72%); box-shadow: 0 0 18px rgba(40, 140, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.msim__steps li:nth-child(even) .msim__num { background: radial-gradient(circle at 35% 28%, #FFB36B, #E85F0C 72%); box-shadow: 0 0 18px rgba(255, 130, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.msim__steps h3 { font-size: clamp(15px, 1.5vw, 25px); line-height: 1.2; font-weight: 700; color: #fff; }
.msim__steps p { margin-top: 3px; font-size: clamp(12.5px, 1.15vw, 19px); line-height: 1.35; color: rgba(255, 255, 255, .88); }

/* Lối tắt tới từng Agent (kính mờ trên nền tối) */
.sim-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.sim-nav__label { margin-right: 4px; font-size: 12.5px; line-height: 1.2; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.sim-tab {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 999px;
  background: rgba(255, 255, 255, .10); color: #fff; font: inherit; text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--duration-normal) var(--ease-standard), background-color .2s ease, border-color .2s ease;
}
.sim-tab:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .22); border-color: #fff; }
.sim-tab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sim-tab .ag-ico { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; }
.sim-tab:hover .ag-ico { background: var(--agc); }
.sim-tab__txt { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.sim-tab__txt strong { font-size: 14px; font-weight: 800; color: #fff; }
.sim-tab__txt span { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .82); }

/* Vật nổi + mũi tên (chỉ ≥1100px, toạ độ theo ảnh 1672×941) */
.msim__scene, .msim__shade { display: none; }
.msim__scene { container-type: inline-size; }
.msim-obj {
  position: absolute; left: calc(var(--x) / 16.72 * 1%); top: calc(var(--y) / 9.41 * 1%); width: calc(var(--w) / 16.72 * 1%); aspect-ratio: 1.12 / 1;
  display: flex; flex-direction: column; justify-content: center; gap: .85cqw; padding: 1.3cqw 1.5cqw; border-radius: 1.2cqw;
  background: linear-gradient(145deg, rgba(135, 200, 255, .62), rgba(44, 112, 232, .42)); border: 1.5px solid rgba(196, 228, 255, .8);
  box-shadow: 0 0 32px rgba(70, 150, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.msim-obj i { display: block; height: max(3px, .5cqw); border-radius: 99px; background: rgba(255, 255, 255, .85); }
.msim-obj i.s { width: 62%; }
.msim-obj--msg { rotate: -5deg; }
.msim-obj--msg .msim-obj__ico { width: 34%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
.msim-obj--mail { aspect-ratio: 1.06 / 1; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.msim-obj__env, .msim-obj__doc {
  position: absolute; border-radius: 1cqw; border: 1.5px solid rgba(196, 228, 255, .8);
  background: linear-gradient(145deg, rgba(150, 210, 255, .72), rgba(44, 112, 232, .5)); box-shadow: 0 0 28px rgba(70, 150, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.msim-obj__env { left: 0; top: 0; width: 62%; height: 52%; display: grid; place-items: center; z-index: 1; rotate: -4deg; }
.msim-obj__env svg { width: 52%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.msim-obj__doc { right: 0; bottom: 0; width: 70%; height: 66%; display: flex; flex-direction: column; justify-content: center; gap: .7cqw; padding: .9cqw 1cqw; rotate: 3deg; }
.msim-obj__doc b { display: block; height: 2cqw; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0 18%, transparent 18% 30%, rgba(255, 255, 255, .9) 30% 48%, transparent 48% 60%, rgba(255, 255, 255, .9) 60% 78%, transparent 78%); opacity: .75; }
.msim-obj--ok { rotate: 4deg; }
.msim-obj__check {
  position: absolute; top: -17%; right: -14%; display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFC184, #F26A12 72%); border: 2.5px solid #fff; box-shadow: 0 0 22px rgba(255, 140, 50, .85);
}
.msim-obj__check svg { width: 58%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.msim__arrows { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(0 0 7px rgba(255, 140, 40, .9)); }

@media (min-width: 1100px) {
  .msim { background: #051848; }
  .msim__stage { aspect-ratio: 1672 / 941; justify-content: space-between; padding: 3.4% 5% 2.4%; }
  .msim__photo { position: absolute; inset: 0; z-index: -2; }
  .msim__shade {
    display: block; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(4, 22, 67, .84) 0%, rgba(5, 30, 92, .56) 26%, rgba(6, 36, 110, .40) 52%, rgba(4, 22, 67, .74) 72%, rgba(4, 22, 67, .95) 100%);
  }
  .msim__scene { display: block; position: absolute; inset: 0; pointer-events: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .sim-tab__txt span { display: none; } .sim-nav { flex-wrap: nowrap; gap: 8px; } .sim-tab { padding-right: 12px; } }
@media (min-width: 1700px) {   /* khung rộng hơn ảnh: hai mép ảnh mờ vào nền navy */
  .msim__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
}
@media (max-width: 1099px) {
  .msim__stage { padding: 52px 24px 44px; max-width: 1000px; }
  .msim__photo { order: 2; margin: 26px 0 22px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; border: 1.5px solid rgba(120, 190, 255, .55); box-shadow: 0 0 44px rgba(30, 120, 255, .35); }
  .msim__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .msim__steps li { padding: 14px 16px; }
  .msim__num { width: 46px; font-size: 18px; } .msim__steps h3 { font-size: 18px; } .msim__steps p { font-size: 14.5px; }
  .msim .h-title { font-size: clamp(28px, 5vw, 40px); }
  .msim .sec-head .section-sub { font-size: 16px; }
  .sim-nav { gap: 8px; }
  .sim-nav__label { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
  .sim-tab__txt span { display: none; }
}
@media (max-width: 639px) {
  .msim__stage { padding: 44px 16px 36px; }
  .msim__photo { border-radius: 18px; margin: 22px 0 18px; }
  .msim__steps { grid-template-columns: minmax(0, 1fr); }
  .sim-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-nav__label { grid-column: 1 / -1; }
  .sim-tab { padding: 6px 10px 6px 6px; gap: 8px; border-radius: 16px; }
  .sim-tab .ag-ico { width: 30px; height: 30px; }
  .sim-tab__txt strong { font-size: 12.5px; line-height: 1.25; } .sim-tab__txt span { display: none; }
}

/* Section riêng của từng Agent: dùng lại .compare, chip "Kết quả" và icon lấy màu --agc của Agent đó */
.agent-sec .compare { margin-top: 4px; }

.compare {
  --pos: 50%;
  position: relative; overflow: hidden; aspect-ratio: 2.3 / 1;
  border-radius: 20px; background: #DDE7F5; box-shadow: var(--shadow-float);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.compare__layer { position: absolute; inset: 0; }
.compare__layer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; pointer-events: none; }
.compare__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__chip {
  position: absolute; top: 18px; z-index: 2; padding: 8px 16px; border-radius: 10px;
  font-size: 15px; line-height: 1.2; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff;
  box-shadow: 0 8px 18px rgba(0, 20, 80, .25);
}
.compare__chip--before { left: 18px; background: #0E2552; }
.compare__chip--after { right: 18px; background: var(--agc, var(--color-brand-blue)); }

/* Khung chữ phủ trên ảnh (desktop): trái = yêu cầu, phải = Agent xử lý → sản phẩm → kiểm duyệt */
.sim-panel { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 12px 28px rgba(8, 30, 90, .18); }
.compare__layer .sim-panel { position: absolute; top: 70px; }
.compare__list--before { left: 18px; width: min(300px, 36%); }
.compare__list--after { right: 18px; width: min(350px, 40%); }
.sim-row { display: flex; align-items: center; gap: 10px; }
.sim-row > div { min-width: 0; flex: 1; }
.sim-row--agent { align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--ag-tint); }
.sim-row--out, .sim-row--ok { padding: 6px 4px 0; }
.sim-row--ok { padding: 8px 10px; border-radius: 10px; background: #F1FAF5; border: 1px solid #CBEBD9; }
.sim-tag { display: block; margin-bottom: 3px; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #46587C; }
.sim-row p, .sim-row strong { font-size: 13.5px; line-height: 1.4; color: var(--color-text-strong); }
.sim-row strong { display: block; font-weight: 800; }
.sim-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #EEF2F9; color: var(--color-muted); }
.sim-av .icon { width: 18px; height: 18px; }
.sim-av--kh { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #46587C; }
.sim-av--out { border-radius: 10px; background: var(--ag-tint); color: var(--ag); }
.sim-mascot { flex: none; width: 42px; }
.sim-mascot img { display: block; width: 100%; height: auto; }
.sim-checks { display: grid; gap: 5px; }
.sim-checks li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.4; color: var(--color-text); }
.sim-checks .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--color-success-dark); stroke-width: 2.4; }
.sim-ok { flex: none; width: 22px; height: 22px; margin-left: auto; color: var(--color-success); stroke-width: 2.4; }

.compare__handle {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos);
  width: 48px; margin-left: -24px; display: grid; place-items: center;
  cursor: ew-resize; touch-action: pan-y; outline: none;
}
.compare__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 12px rgba(0, 20, 80, .35);
}
.compare__knob {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--color-brand-blue); box-shadow: 0 8px 22px rgba(0, 20, 80, .35);
  transition: transform .15s ease;
}
.compare__knob .icon { width: 24px; height: 24px; stroke-width: 2.4; }
.compare__handle:hover .compare__knob, .compare.is-dragging .compare__knob { transform: scale(1.08); }
.compare__handle:focus-visible .compare__knob { outline: 3px solid var(--color-brand-blue); outline-offset: 3px; }
.compare__hint {
  position: absolute; z-index: 4; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 9px 20px; border-radius: 999px; background: rgba(14, 37, 82, .88); color: #fff;
  font-size: 15px; line-height: 1.2; font-weight: 700; white-space: nowrap; pointer-events: none;
}
.sim-note { margin-top: 18px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--color-muted); }

/* Mobile: hai khung chữ tách khỏi ảnh (mỗi khung một thẻ) */
.sim-mobile { display: none; }
.sim-panel--card { padding: 16px; background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.sim-panel__title { font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-strong); }
@media (max-width: 899px) {
  .compare { aspect-ratio: 16 / 9; }
  .compare__layer .sim-panel { display: none; }
  .compare__chip { top: 12px; font-size: 13px; padding: 6px 12px; }
  .compare__chip--before { left: 12px; } .compare__chip--after { right: 12px; }
  .sim-mobile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
}
@media (max-width: 699px) {
  .sim-mobile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .compare__hint { font-size: 13px; padding: 7px 14px; bottom: 10px; }
  .compare__knob { width: 42px; height: 42px; }
}

/* ============================== 7. SAU KHÓA HỌC — chủ doanh nghiệp + đội 4 Agent, chip quanh nhân vật ============================== */
.after { position: relative; isolation: isolate; overflow: hidden; }
.after__bg {
  position: absolute; inset: -24px; z-index: -1; pointer-events: none; filter: blur(10px) saturate(1.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(240, 246, 255, .74) 55%, rgba(255, 255, 255, .94) 100%),
    url("../assets/photos/hero-founder.webp") 2% 40% / 240% auto no-repeat;
}
.after__stage { position: relative; margin: 0 auto; }
.after__img { display: block; width: 100%; height: auto; border-radius: 26px; border: 4px solid #fff; box-shadow: 0 26px 60px rgba(16, 52, 124, .22); }
.after__arrows { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.ag-chip {
  position: absolute; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 25%; padding: 9px 16px 9px 9px;
  border-radius: 14px; background: var(--agc, var(--color-brand-blue)); color: #fff; box-shadow: 0 14px 30px rgba(8, 30, 90, .28);
}
.ag-chip .ag-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.ag-chip__txt { display: flex; flex-direction: column; min-width: 0; }
.ag-chip strong { font-size: 14px; line-height: 1.25; font-weight: 800; color: #fff; }
.ag-chip__txt > span { margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: #fff; }
.ag-chip--ceo { --agc: #0861F8; left: 45%; top: 2%; }
.ag-chip--sales { left: 1%; top: 2%; }
.ag-chip--care { left: 20%; top: 2%; }
.ag-chip--mkt { right: 1%; top: 2%; }
.ag-chip--ops { right: 1%; top: 33%; }
@media (min-width: 900px) and (max-width: 1279px) {   /* ảnh hẹp hơn 1100px: chip nhỏ lại để không chạm nhau / mặt nhân vật */
  .ag-chip { gap: 8px; padding: 7px 12px 7px 7px; }
  .ag-chip .ag-ico { width: 32px; height: 32px; border-radius: 9px; }
  .ag-chip strong { font-size: 13px; }
  .ag-chip__txt > span { font-size: 11.5px; }
}
@media (max-width: 899px) {
  /* Chip rời khỏi ảnh, xếp lưới bên dưới */
  .after__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
  .after__img { grid-column: 1 / -1; }
  .after__arrows { display: none; }
  .ag-chip, .ag-chip--ceo { position: static; width: auto; max-width: none; }
  .ag-chip--ceo { grid-column: 1 / -1; }
}
@media (max-width: 559px) {   /* chip 2 cột, gọn hơn */
  .after__stage { gap: 10px; }
  .ag-chip { padding: 8px 10px 8px 8px; gap: 8px; }
  .ag-chip .ag-ico { width: 32px; height: 32px; border-radius: 9px; }
  .ag-chip strong { font-size: 13px; }
  .ag-chip__txt > span { font-size: 11.5px; }
}

/* ============================== 8. NỘI DUNG KHÓA HỌC — 4 GIAI ĐOẠN ==============================
   Mỗi giai đoạn là một thẻ: nhãn + tiêu đề + số bài · ảnh vuông (module__media) | đoạn dẫn + 4 ý ✓ + câu chốt cuối giai đoạn.
   Màu theo giai đoạn qua --mc (đậm) / --mc2 / --mt (nền nhạt) / --mb (viền nhạt). Thẻ chẵn đảo ảnh sang phải. */
.modules { display: grid; gap: 28px; }
.module {
  --mc: var(--color-brand-blue); --mc2: var(--color-brand-blue-deep); --mt: #EEF4FF; --mb: #D3E3FA; --mx: var(--mc);   /* --mx: màu chữ đặt trên nền nhạt --mt (đủ 4,5:1) */
  padding: 28px 30px 32px; background: #fff; border: 1px solid var(--color-border); border-radius: 22px; box-shadow: var(--shadow-card);
}
.module--2 { --mc: var(--color-brand-violet); --mc2: #5B2DB8; --mt: #F4EEFE; --mb: #E2D3FA; }
.module--3 { --mc: var(--color-brand-orange-dark); --mc2: #8F3604; --mt: #FFF3E8; --mb: #F9DBBF; --mx: #B24106; }
.module--4 { --mc: var(--color-brand-navy); --mc2: #00206F; --mt: #EAF0FB; --mb: #C5D3F0; }

.module__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 24px; }
.module__tag {
  padding: 7px 14px; border-radius: 8px; background: var(--mc); color: #fff;
  font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.module__title { flex: 1 1 320px; font-size: clamp(19px, 1rem + .6vw, 24px); line-height: 1.3; font-weight: 800; color: var(--color-text-strong); text-wrap: balance; }
.module__count {
  padding: 5px 12px; border-radius: 999px; background: var(--mt); border: 1px solid var(--mb); color: var(--mx);
  font-size: 13.5px; line-height: 1.2; font-weight: 800; white-space: nowrap;
}

.module__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 34px; align-items: start; }
.module:nth-child(even) .module__media { order: 2; }

/* Ảnh giai đoạn (vuông, nền đã mang màu từng giai đoạn: xanh · tím · cam · xanh navy): khung trắng bo góc + bóng tông theo --mc */
.module__media {
  margin: 0; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 22px; border: 4px solid #fff; background: var(--mt);
  box-shadow: 0 22px 50px rgba(16, 52, 124, .20), 0 0 0 1px var(--mb);
}
.module__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.module__body p { font-size: 16px; line-height: 1.65; color: var(--color-text); }
.module__body p + p { margin-top: 12px; }
.module__list { display: grid; gap: 11px; margin: 20px 0; }
.module__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--color-text-strong); }
.module__list .icon { width: 21px; height: 21px; margin-top: 1px; color: var(--mc); stroke-width: 2.3; }
.module__body .module__note { margin-bottom: 4px; padding: 12px 14px; border-radius: 12px; background: var(--tint-orange-soft); border: 1px solid #F9DBBF; font-size: 15px; line-height: 1.55; }
.module__note strong { color: #B24106; }
.module__body .module__goal {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--mt); border: 1px solid var(--mb); border-left: 4px solid var(--mc);
  font-size: 15.5px; line-height: 1.55; font-weight: 600; color: var(--color-text-strong);
}
.module__goal strong { color: var(--mx); }

.modules__outro {
  margin-top: 28px; padding: 22px 28px; border: 1px solid #D3E3FA; border-radius: 20px; text-align: center; text-wrap: balance;
  font-size: clamp(17px, 1rem + .4vw, 20px); line-height: 1.55; font-weight: 700; color: var(--color-brand-navy);
  background: linear-gradient(110deg, #EAF2FF 0%, #F4F8FF 55%, #FFF4EA 100%);
}
@media (min-width: 1024px) {
  .module__media { position: sticky; top: calc(var(--header-h) + 20px); }   /* ảnh đi theo khi đọc phần chữ dài */
}
@media (max-width: 1023px) {
  .module__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .module:nth-child(even) .module__media { order: 0; }
  .module__media { aspect-ratio: 4 / 3; max-width: 620px; width: 100%; margin-inline: auto; }
}
@media (max-width: 767px) {
  .modules { gap: 20px; }
  .module { padding: 22px 18px 24px; border-radius: 20px; }
  .module__head { margin-bottom: 18px; }
  .module__media { border-radius: 18px; border-width: 3px; }
  .modules__outro { padding: 18px 18px; }
}

/* ============================== 9. AI NÊN HỌC (đợt 17, theo giao diện mới) ==============================
   Ảnh founder portrait bên trái mờ dần vào nền sáng · tiêu đề giữa · đường sáng xanh → tím → cam nối 3 thẻ kính (mỗi thẻ có đĩa icon nổi trên mép) · nút cam CTA. */
.who { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff 0, #F3F8FF 38%, #fff 100%); }
.who__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(48% 58% at 78% 46%, rgba(110, 185, 255, .24), transparent 72%), radial-gradient(40% 50% at 18% 14%, rgba(255, 255, 255, .95), transparent 70%);
}
.who__photo {
  position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; margin: 0; width: max(300px, calc((100% - 1200px) / 2 + 380px));
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 56%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 56%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.who__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 26% 42%; }
.who .h-title { font-size: clamp(28px, 3.3vw, 54px); font-weight: 800; }
.who .sec-head { max-width: 62rem; }
.who .sec-head .section-sub { font-size: clamp(16px, 1.35vw, 21px); color: #33415C; }
.eyebrow--pill { padding: 8px 18px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid #FFDFC7; box-shadow: 0 8px 22px rgba(244, 119, 33, .12); }

.who__stage { position: relative; padding-left: 300px; }
.who__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-top: 66px; }
.who__grid::before {          /* đường sáng nối 3 nút */
  content: ""; position: absolute; left: -3%; right: -3%; top: 9px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(8, 97, 248, 0), #0861F8 13%, #8747E8 50%, #F26A12 87%, rgba(242, 106, 18, 0));
  filter: drop-shadow(0 0 8px rgba(90, 150, 255, .75));
}
.who-card {
  --wc: #0861F8; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 98px 22px 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .76)); border: 1px solid #fff; border-radius: 26px;
  box-shadow: 0 18px 46px rgba(22, 69, 132, .12), 0 0 0 1px rgba(160, 200, 245, .35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal);
}
.who-card--violet { --wc: #8747E8; }
.who-card--orange { --wc: #E8620A; }
.who-card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(22, 69, 132, .18), 0 0 0 1px rgba(160, 200, 245, .5); }
.who-card::before {            /* nút trên đường sáng */
  content: ""; position: absolute; top: -63px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: #fff; border: 4px solid var(--wc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--wc) 20%, transparent), 0 0 16px var(--wc);
}
.who-card__ico {
  position: absolute; top: -6px; left: 50%; display: grid; place-items: center; width: 78px; height: 78px; margin-left: -39px; border-radius: 50%;
  background: #fff; color: var(--wc); border: 1.5px solid color-mix(in srgb, var(--wc) 28%, #fff); box-shadow: 0 10px 26px color-mix(in srgb, var(--wc) 30%, transparent);
}
.who-card__ico::before {       /* quầng sáng quanh đĩa icon */
  content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .96) 38%, color-mix(in srgb, var(--wc) 14%, transparent) 68%, transparent 72%);
}
.who-card__ico .icon { width: 36px; height: 36px; stroke-width: 1.7; }
.who-card h3 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; font-weight: 800; color: var(--color-brand-navy); }
.who-card p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: #4B5B77; text-wrap: balance; }
.who__cta { margin-top: 40px; padding-left: 300px; text-align: center; }
.who__cta .btn { min-height: 62px; padding-inline: 38px; border-radius: 999px; box-shadow: 0 14px 34px rgba(244, 119, 33, .45), 0 0 0 6px rgba(244, 119, 33, .12); }
@media (max-width: 1099px) {
  .who { padding-top: 0; }
  .who__photo { position: relative; inset: auto; width: 100%; height: clamp(220px, 40vw, 340px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); }
  .who__photo img { object-position: 30% 34%; }
  .who__inner { margin-top: -20px; }
  .who__stage, .who__cta { padding-left: 0; }
}
@media (max-width: 899px) {
  .who__grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; gap: 56px; padding-top: 24px; }
  .who__grid::before, .who-card::before { display: none; }
}
@media (max-width: 559px) { .who__cta .btn { width: 100%; padding-inline: 20px; } }

/* ============================== 10. LỘ TRÌNH 5 CẤP ĐỘ ============================== */
.road-panel { padding: 34px 32px 38px; background: #fff; border: 1px solid var(--color-border); border-radius: 24px; box-shadow: var(--shadow-card); }
.road-panel .sec-head { margin-bottom: 30px; }
.road { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 38px; }
.road__step { --c: var(--color-brand-blue); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.road__step:nth-child(2) { --c: var(--color-brand-violet); }
.road__step:nth-child(3) { --c: var(--color-brand-orange-dark); }
.road__step:nth-child(4) { --c: var(--color-success-dark); }
.road__step:nth-child(5) { --c: var(--color-brand-navy); }
.road__num {
  position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--c); color: #fff; font-size: 20px; line-height: 1; font-weight: 800;
  box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(16, 52, 124, .22);
}
.road__step h3 { font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--color-text-strong); }
.road__step p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--color-muted); }
.road__step:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; right: -30px; width: 22px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230861F8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 1279px) {
  .road { gap: 0 30px; }
  .road__step:not(:last-child)::after { right: -26px; }
  .road-panel { padding-inline: 24px; }
}
@media (max-width: 1099px) {
  .road { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .road__step:nth-child(3)::after { display: none; }
}
@media (max-width: 899px) {   /* dòng thời gian dọc */
  .road { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .road::before {
    content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #0861F8, #8747E8 40%, #C94E08 62%, #0E8F4F 82%, #002EA0); opacity: .35;
  }
  .road__step { flex-direction: row; align-items: flex-start; gap: 16px; }
  .road__step:not(:last-child)::after { display: none; }
}
@media (max-width: 767px) { .road-panel { padding: 24px 18px 26px; border-radius: 20px; } }

/* ============================== QUY TRÌNH HỌC — thẻ mở rộng (navy thương hiệu + nhấn cam) ==============================
   Thẻ đang mở rộng, nền navy; các thẻ còn lại thu hẹp, tiêu đề dọc. Luôn có một thẻ mở (js/main.js). */
.learn { margin-top: 28px; }
.learn .sec-head { margin-bottom: 26px; }
.proc { display: flex; gap: 16px; min-height: 580px; }
.proc-card {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 26px; background: #EAF2FF; border: 1px solid #D3E3FA;
  transition: flex-grow .6s var(--ease-out-expo), background-color .3s ease, box-shadow .3s ease;
}
.proc-card:not(.is-open):hover { background: #DDEBFF; }
.proc-card.is-open {
  flex: 3.4 1 0; border-color: transparent; color: #fff; box-shadow: 0 26px 56px rgba(8, 30, 110, .28);
  background: linear-gradient(160deg, #0B2A6B 0%, #14357F 55%, #0B2A6B 100%);
}
.proc-card__h { margin: 0; height: 100%; font: inherit; }
.proc-card.is-open .proc-card__h { height: auto; }
.proc-card__btn {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: center; width: 100%; height: 100%; padding: 22px 20px;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.proc-card__btn:focus-visible { outline-offset: -4px; }
.proc-card__num { grid-area: 1 / 1; font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #5B6F91; font-variant-numeric: tabular-nums; }
.proc-card__ico { grid-area: 1 / 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--color-brand-blue); }
.proc-card__ico .icon { width: 22px; height: 22px; }
.proc-card__name {
  grid-area: 2 / 1 / 3 / 3; align-self: center; justify-self: start; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 20px; line-height: 1.2; font-weight: 800; color: var(--color-text-strong);
}
.proc-card__hint { grid-area: 3 / 1 / 4 / 3; font-size: 12.5px; font-weight: 700; color: #46587C; }
.proc-card__chev { display: none; }

.proc-card.is-open .proc-card__btn { height: auto; grid-template-rows: auto; padding: 26px 28px 0; }
.proc-card.is-open .proc-card__num { font-size: 36px; color: #FFB27E; }
.proc-card.is-open .proc-card__ico { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.proc-card.is-open .proc-card__name, .proc-card.is-open .proc-card__hint {   /* ẩn khỏi mắt, vẫn là tên của nút cho trình đọc màn hình */
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.proc-card__panel { padding: 8px 28px 26px; }
.proc-card__inner { display: flex; flex-direction: column; min-width: 480px; }
.proc-card__label { margin-top: 14px; font-size: 12.5px; line-height: 1.3; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFB27E; }
.proc-card__title { margin-top: 8px; font-size: clamp(26px, 1.4rem + .8vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.proc-card__sub { margin-top: 6px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
.proc-card__desc { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .9); }
.proc-card__box { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.proc-card__boxt { font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFB27E; }
.proc-card__box ul { display: grid; gap: 9px; margin-top: 12px; }
.proc-card__box li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .95); }
.proc-card__box .icon { width: 18px; height: 18px; margin-top: 1px; color: #FFB27E; stroke-width: 2.3; }
.proc-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.proc-card__foot > span { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.proc-card__foot .btn { min-height: 48px; padding-inline: 22px; font-size: 16px; }
@media (max-width: 1279px) { .proc { min-height: 620px; } .proc-card.is-open { flex-grow: 3; } .proc-card__inner { min-width: 420px; } }
@media (max-width: 899px) {   /* accordion dọc */
  .proc { flex-direction: column; gap: 12px; min-height: 0; }
  .proc-card, .proc-card.is-open { flex: none; transition: background-color .3s ease, box-shadow .3s ease; }
  .proc-card__h, .proc-card.is-open .proc-card__h { height: auto; }
  .proc-card__btn, .proc-card.is-open .proc-card__btn { display: flex; align-items: center; gap: 14px; height: auto; padding: 16px 18px; }
  .proc-card__num, .proc-card.is-open .proc-card__num { font-size: 26px; }
  .proc-card__name {
    position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; flex: 1; writing-mode: horizontal-tb; transform: none; font-size: 17px;
  }
  .proc-card.is-open .proc-card__name, .proc-card.is-open .proc-card__hint { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
  .proc-card.is-open .proc-card__name { color: #fff; }
  .proc-card__hint { display: none; }
  .proc-card__ico { order: 3; width: 38px; height: 38px; }
  .proc-card__chev { display: block; order: 4; flex: none; width: 22px; height: 22px; transition: rotate .3s ease; }
  .proc-card.is-open .proc-card__chev { rotate: 180deg; color: #fff; }
  .proc-card__panel { padding: 0 18px 20px; }
  .proc-card__inner { min-width: 0; }
  .proc-card__label { margin-top: 4px; }
  .proc-card__title { display: none; }
  .proc-card__sub { margin-top: 8px; font-size: 17px; font-weight: 700; color: #fff; }
}

/* ============================== Form cuối: cột chữ trái (3 gạch đầu dòng xếp dọc) ============================== */
.cta__points { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

/* ============================== Responsive chung ============================== */
@media (max-width: 767px) {
  .sec-head { margin-bottom: 28px; }
  .learn { margin-top: 20px; }
}


/* ============================== NHỊP KHOẢNG CÁCH + NỀN CHUYỂN MỜ GIỮA CÁC SECTION (đợt 15) ==============================
   Chỉ áp cho các section của khung mới. Học phí / FAQ / chân trang KHÔNG đổi (không dùng .section--soft, không nằm trong danh sách dưới); #mo-phong là hero navy riêng (.msim).
   - Khoảng đệm trên/dưới giảm từ 72px xuống --frame-space (các section Agent còn gọn hơn vì cùng một khối "Từ yêu cầu → kết quả").
   - Nền xanh nhạt (.section--soft) mờ dần vào nền trắng ở mép trên và dưới thay vì cắt thẳng; 4 section Agent dùng chung một nền liền (đầu khối là hero navy #mo-phong, cuối khối mờ vào trắng). */
:root { --frame-space: 56px; --frame-fade: 88px; }
@media (max-width: 1023px) { :root { --frame-space: 44px; --frame-fade: 64px; } }
@media (max-width: 767px) { :root { --frame-space: 36px; --frame-fade: 44px; } }
.section:is(.pains, .ways, .after, #giai-phap, #nhan-duoc-gi, #ai-nen-hoc, #cap-do) { padding-block: var(--frame-space); }
.section.bridge { padding-block: 0 var(--frame-space); }
.section.agent-sec { padding-block: calc(var(--frame-space) * .62); }
.section--soft {
  background: linear-gradient(180deg, #fff 0, var(--color-surface-soft) var(--frame-fade), var(--color-surface-soft) calc(100% - var(--frame-fade)), #fff 100%);
}
.agent-sec { background: var(--color-surface-soft); }
#mo-phong-ops { background: linear-gradient(180deg, var(--color-surface-soft) 0, var(--color-surface-soft) calc(100% - var(--frame-fade)), #fff 100%); }