/* Trang Phần mềm (phan-mem.html): giao diện trang chủ A2 cũ (WEB-TRANG-CHU-A2, duyệt 03/11/2026) chuyển sang đây theo WEB-PHAN-MEM-03
   (chủ dự án 06/11/2026). Chỉ phan-mem.html nạp tệp này, sau style.css.
   Bảng chỉ số vẽ (HUD), khối xen kẽ ảnh app, hình vẽ dữ liệu một chiều, hai cách làm việc, thẻ liên hệ. Chỉ dùng token của style.css. */
/* ---------- K1. Màn đầu: bảng chỉ số vẽ (HUD) trên nền tím đậm ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--purple-deep); color: var(--c-on-accent);
  padding: clamp(24px, 2vw, 28px) 0 clamp(56px, 7vw, 96px); }
.hero-glow { position: absolute; z-index: -1; width: 820px; height: 820px; right: -260px; top: -320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-orange) 34%, transparent), transparent); }
.hero-glow--2 { right: auto; left: -360px; top: auto; bottom: -520px; width: 900px; height: 900px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--chart-6) 22%, transparent), transparent); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: clamp(24px, 1.8vw, 26px); }
.hero-kicker { margin: 0 0 10px; font-weight: 600; font-size: var(--fs-lead); color: rgba(255, 255, 255, .8); }
.hero h1 { font-size: clamp(2.35rem, 1.1rem + 2.7vw, 3.45rem); line-height: 1.04; letter-spacing: -0.045em; max-width: 12em; }
.hero-lead { margin: 0 0 22px; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
@media (max-width: 960px) { .hero { padding-top: 40px; } .hero-top { grid-template-columns: 1fr; } }

/* Khung HUD: một "màn bảng điều khiển" vẽ bằng HTML/SVG, dữ liệu mẫu */
.hud { position: relative; display: grid; grid-template-columns: minmax(0, 284px) minmax(0, 1fr); gap: 0;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--shape-d-lg); background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow-deep); overflow: hidden; }
.hud-rail { position: relative; padding: 20px 32px 20px 24px; border-right: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 4, 20, .18); }
.hud-h { margin: 0 0 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.src { display: grid; gap: 8px; }
.src li { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 1px 10px; align-items: center;
  padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--shape-d-sm); background: rgba(255, 255, 255, .06); }
.src li::after { content: ''; position: absolute; top: 50%; right: -33px; width: 32px; height: 1px; background: rgba(255, 255, 255, .28); }
.src i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-good-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-good-fill) 25%, transparent); }
.src b { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.src span { grid-column: 2; font-size: .8125rem; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.src-soon { margin: 12px 0 0; padding: 9px 12px; border: 1px dashed rgba(255, 255, 255, .3); border-radius: var(--shape-d-sm); font-size: .8125rem; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.src-soon b { display: block; font-weight: 700; color: var(--c-on-accent); }
/* đường gom: một vạch dọc mép phải rail, mũi tên vào bảng chỉ số */
.hud-rail::after { content: ''; position: absolute; right: -1px; top: 60px; bottom: 96px; width: 2px; background: var(--ribbon-v); opacity: .9; }
.hud-arrow { position: absolute; right: -9px; top: 50%; z-index: 2; width: 16px; height: 16px; color: var(--c-orange); }

.hud-main { padding: 20px 24px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.hud-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hud-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--rad-pill);
  font-size: .8125rem; font-weight: 600; color: var(--c-on-accent); background: rgba(255, 255, 255, .06); }
.hud-chip svg { width: 14px; height: 14px; }
.tag-mh { margin-left: auto; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--shape-d-xs);
  font-size: .75rem; font-weight: 700; letter-spacing: .01em; background: var(--c-surface); color: var(--purple-deep); white-space: nowrap; }
.hud-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tc-kpi { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 18px 12px; min-width: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--shape-d-md); background: rgba(255, 255, 255, .07); }
.kpi-k { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
.kpi-k i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sw-1 { background: var(--chart-1); } .sw-6 { background: var(--chart-6); } .sw-r { background: linear-gradient(90deg, var(--chart-6), var(--chart-1)); }
#lien-he { padding-top: clamp(56px, 6vw, 88px); }
.kpi-n { font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2.125rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-n small { font-size: .62em; font-weight: 700; opacity: .7; }
.kpi-d { font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .72); }
.kpi-d b { font-weight: 700; }
.up-good { color: color-mix(in srgb, var(--c-good-fill) 55%, white); }
.up-bad { color: color-mix(in srgb, var(--c-bad-fill) 50%, white); }
.tc-kpi svg.spark { width: 100%; height: 32px; margin-top: 4px; }
.meter { position: relative; height: 10px; margin: 16px 0 8px; border-radius: var(--rad-pill); background: rgba(255, 255, 255, .12); }
.meter span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--rad-pill); background: linear-gradient(90deg, var(--chart-6), var(--chart-1)); }
.meter em { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--c-on-accent); }

.hud-panels { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.panel { padding: 16px 18px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--shape-d-md); background: rgba(255, 255, 255, .05); min-width: 0; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: .9375rem; font-weight: 700; }
.panel-h span { font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.brand-t { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.brand-t th { padding: 0 0 8px; font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .7); text-align: right; white-space: nowrap; }
.brand-t th:first-child, .brand-t td:first-child { text-align: left; }
.brand-t td { padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .1); text-align: right; white-space: nowrap; }
.brand-t td:first-child { font-weight: 700; }
.brand-t th + th, .brand-t td + td { padding-left: 14px; }
.brand-t .ratio { width: 34%; }
.rbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.rbar s { position: relative; display: block; height: 8px; border-radius: var(--rad-pill); background: rgba(255, 255, 255, .12); text-decoration: none; }
.rbar s span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--rad-pill); background: var(--chart-6); }
.rbar s em { position: absolute; top: -4px; bottom: -4px; left: 53.4%; width: 2px; background: rgba(255, 255, 255, .85); }
.rbar b { min-width: 3.4em; font-weight: 700; }
.rbar--hi b { color: color-mix(in srgb, var(--c-orange) 55%, white); }
.panel-foot { margin: 8px 0 0; font-size: .75rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.panel-foot i { display: inline-block; width: 2px; height: 10px; margin: 0 6px -1px 0; background: rgba(255, 255, 255, .85); }
.tc-ch { display: grid; gap: 9px; }
.tc-ch li { display: grid; grid-template-columns: 134px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tc-ch li > span:first-child { color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-ch s { display: block; height: 12px; border-radius: 3px 6px 6px 3px; background: var(--chart-1); text-decoration: none; }
.tc-ch b { font-weight: 700; min-width: 4.4em; text-align: right; }
.hud-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 14px 0 0; font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.hud-foot .live { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 600; color: var(--c-on-accent); }
.hud-foot .live::before { content: ''; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--c-good-fill); flex-shrink: 0; }
.hud-foot .soon { display: inline-flex; align-items: flex-start; gap: 8px; }
.hud-foot .soon::before { content: ''; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .6); flex-shrink: 0; }

/* Màn hẹp: bảng chỉ số lên trước (thứ người xem cần thấy ngay), cột nguồn xuống dưới làm chú thích "đọc từ đâu" */
@media (max-width: 1100px) {
  .hud { grid-template-columns: 1fr; }
  .hud-main { order: 1; }
  .hud-rail { order: 2; padding: 20px; border-right: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .hud-rail::after, .src li::after, .hud-arrow { display: none; }
  .src { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 860px) {
  .hud-kpis { grid-template-columns: 1fr; }
  .tc-kpi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .tc-kpi > :not(svg):not(.meter) { grid-column: 1; }
  .tc-kpi svg.spark, .tc-kpi .meter { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .hud-panels { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hud-main { padding: 16px; gap: 12px; }
  .hud-rail { padding: 16px; }
  /* điện thoại: nguồn chỉ còn tên (phần "đọc gì" đã có ở ảnh màn Kết nối bên dưới) */
  .src { grid-template-columns: 1fr 1fr; gap: 6px; }
  .src li { padding: 8px 10px; }
  .src li span { display: none; }
  .src b { font-size: .875rem; }
  .tc-kpi { grid-template-columns: 1fr; padding: 12px 14px 10px; }
  .tc-kpi svg.spark, .tc-kpi .meter { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .tc-kpi svg.spark { height: 26px; }
  .tc-kpi .meter { margin: 12px 0 6px; }
  .panel { padding: 14px; }
  .brand-t { font-size: .8125rem; }
  .brand-t th + th, .brand-t td + td { padding-left: 8px; }
  .brand-t .col-cp { display: none; }
  .brand-t .ratio { width: 46%; }
  .tc-ch li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .tc-ch li > span:first-child { grid-column: 1; grid-row: 1; }
  .tc-ch b { grid-column: 2; grid-row: 1; }
  .tc-ch s { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .hud-chip--opt { display: none; }
  .tag-mh { margin-left: 0; }
}

/* ---------- Khối xen kẽ: ảnh app một bên, 1-2 câu một bên ---------- */
.sec { position: relative; padding: clamp(72px, 8vw, 120px) 0; }
.sec--soft { background: var(--paper-2); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 5.4vw, 80px); align-items: center; }
.row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row--flip > .row-copy { order: 2; }
.row--copy-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.row + .row { margin-top: clamp(72px, 8vw, 112px); }
.row-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 700; font-size: .9375rem; color: var(--orange-ink); }
.row-k::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--ribbon); }
.row-copy h2 { font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.4rem); line-height: 1.12; letter-spacing: -0.032em; margin: 0 0 18px; max-width: 14em; }
/* tiêu đề hai câu: mỗi câu một dòng, không cắt giữa "rải rác" */
.row-copy h2 .ln { display: block; text-wrap: balance; }
.row-copy h3 { font-size: clamp(1.45rem, 1.05rem + 1.05vw, 2rem); line-height: 1.18; letter-spacing: -0.028em; margin: 0 0 16px; max-width: 15em; }
.row-copy > p { font-size: 1.0625rem; color: var(--ink-2); max-width: 31em; }
.row-copy > p:last-child { margin-bottom: 0; }
.note, .row-copy > p.note { font-size: .9375rem; color: var(--muted); }
.row-copy > p.note--soon { margin-top: 18px; }
@media (max-width: 960px) {
  .row, .row--flip, .row--copy-wide { grid-template-columns: 1fr; }
  .row--flip > .row-copy { order: 0; }
}
.sec-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 64px; align-items: end; margin-bottom: clamp(48px, 5vw, 72px); }
.sec-intro h2 { font-size: var(--fs-h2); max-width: 11em; }
.sec-intro p { margin: 0; color: var(--muted); font-size: 1.0625rem; max-width: 30em; }
@media (max-width: 860px) { .sec-intro { grid-template-columns: 1fr; } }

/* Chuỗi 5 tầng (chữ đã duyệt), một dòng chip có mũi tên */
.tc-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 4px 0 0; }
.tc-chain li { display: inline-flex; align-items: center; gap: 6px; }
.tc-chain li span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--shape-d-sm); font-size: .875rem; font-weight: 600; background: var(--c-surface); }
.tc-chain li:nth-child(2) span { border-color: var(--purple); color: var(--purple); background: var(--purple-soft); }
.tc-chain li:last-child span { border-color: var(--orange-ink); color: var(--orange-ink); background: var(--orange-soft); }
.tc-chain li + li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0;
  background: var(--c-faint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Khung ảnh app (.shot của site, nhãn "Dữ liệu mẫu") */
.shot { position: relative; margin: 0; background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--shape-d); box-shadow: var(--shadow); overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); font-size: .8125rem; color: var(--muted); }
.shot-bar img { width: 18px; height: 18px; }
.shot-bar .url { font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shot-bar .sample { margin-left: auto; padding: 3px 10px; background: var(--c-surface); border: 1px solid var(--line-2); border-radius: var(--shape-d-xs); color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.shot-img { overflow: hidden; }
.shot-img img { width: 100%; height: auto; }
.media { position: relative; margin: 0; min-width: 0; }
/* Ảnh điện thoại nổi mép phải ảnh Tổng quan (chỉ máy tính). Đỉnh máy nằm dưới thanh địa chỉ để không che nhãn "Dữ liệu mẫu";
   phần máy thò xuống dưới ảnh được giữ chỗ bằng padding của figure, không đè hàng sau */
.media--phone { padding-bottom: clamp(48px, 6vw, 88px); }
.phone { position: absolute; right: -24px; top: 58px; width: clamp(140px, 12vw, 172px); padding: 7px; border-radius: 30px; background: var(--c-text);
  box-shadow: 0 32px 64px -28px rgba(15, 23, 42, .5), 0 2px 6px rgba(15, 23, 42, .08); }
.phone img { width: 100%; height: auto; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; border-radius: 23px; }
@media (max-width: 1100px) { .phone { display: none; } .media--phone { padding-bottom: 0; } }
/* Điện thoại: ảnh cận rộng 2336px thu còn ~340px thì chữ trong ảnh quá nhỏ, nên phóng phần trái (thẻ chính) cho đọc được */
@media (max-width: 599px) {
  .shot-img--zoom img { width: 150%; max-width: none; height: auto; }
  .shot-img--phone img { aspect-ratio: 390 / 640; object-fit: cover; object-position: top; }
  .shot-bar { padding: 9px 12px; gap: 10px; }
}

/* ---------- K7. Hình vẽ dữ liệu đi một chiều (HUD nhỏ) ---------- */
.vault { position: relative; overflow: hidden; isolation: isolate; padding: clamp(24px, 3vw, 36px); border-radius: var(--shape-d-lg); background: var(--purple-deep); color: var(--c-on-accent); box-shadow: var(--shadow-deep); }
.vault-glow { position: absolute; z-index: -1; width: 520px; height: 520px; right: -220px; top: -240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-orange) 30%, transparent), transparent); }
.vault-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.vault-h { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.vault-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vault-src span { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--shape-d-sm); background: rgba(255, 255, 255, .07); font-size: .875rem; font-weight: 600; }
.vault-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 14px 0; }
.flow-a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--shape-d-sm); font-size: .875rem; font-weight: 600; line-height: 1.35; }
.flow-a svg { width: 22px; height: 22px; flex-shrink: 0; }
.flow-a--in { background: color-mix(in srgb, var(--c-good-fill) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c-good-fill) 45%, transparent); }
.flow-a--in svg { color: color-mix(in srgb, var(--c-good-fill) 60%, white); }
.flow-a--no { border: 1px dashed rgba(255, 255, 255, .32); color: rgba(255, 255, 255, .82); }
.flow-a--no svg { color: color-mix(in srgb, var(--c-bad-fill) 55%, white); }
.vault-core { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--shape-d-md);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); }
.vault-core .lock { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--shape-d-sm); background: var(--c-surface); color: var(--purple-deep); }
.vault-core .lock svg { width: 24px; height: 24px; }
.vault-core b { display: block; font-size: 1.0625rem; }
.vault-core span { font-size: .875rem; color: rgba(255, 255, 255, .78); }
.vault-down { display: grid; place-items: center; height: 36px; color: rgba(255, 255, 255, .6); }
.vault-down svg { width: 20px; height: 20px; }
.vault-ws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vault-ws li { display: grid; gap: 6px; justify-items: start; padding: 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--shape-d-sm); background: rgba(255, 255, 255, .05); font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.vault-ws li svg { width: 16px; height: 16px; color: rgba(255, 255, 255, .7); }
.vault-ws li:first-child { border-color: color-mix(in srgb, var(--c-orange) 70%, transparent); background: color-mix(in srgb, var(--c-orange) 14%, transparent); }
@media (max-width: 520px) {
  .vault-flow { grid-template-columns: 1fr; }
  .vault-ws { grid-template-columns: 1fr 1fr; }
}
.facts-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-top: 8px; }
.facts-2 li { display: grid; gap: 4px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line-2); }
.facts-2 b { font-size: 1rem; }
.facts-2 span { font-size: .9375rem; color: var(--ink-2); }
.proof-k { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 700; color: var(--good); }
.proof-k::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
@media (max-width: 480px) { .facts-2 { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Khối Chatbot Fanpage (WEB-TRANG-CHU-CHATBOT, chủ dự án duyệt 04/11/2026): hình hội thoại vẽ bằng HTML, nhãn "Sắp có" ---------- */
.row-k-soon { margin-left: 2px; padding: 2px 10px; border: 1px dashed var(--line-2); border-radius: var(--rad-pill); font-size: .8125rem; font-weight: 600; color: var(--muted); }

/* Khung hội thoại vẽ bằng HTML trong khung ảnh app .shot (giống màn Hội thoại của app, dữ liệu mẫu) */
.cb { display: grid; gap: 0; background: var(--c-surface); }
.cb-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.cb-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--purple-soft); color: var(--purple); font-size: .8125rem; font-weight: 700; }
.cb-ten { display: grid; line-height: 1.25; min-width: 0; }
.cb-ten b { font-size: .9375rem; }
.cb-ten small { font-size: .8125rem; color: var(--muted); }
.cb-bot { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--rad-pill); background: var(--good-soft);
  color: var(--good); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.cb-bot i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cb-ds { display: grid; gap: 12px; padding: 24px 20px 28px; background: var(--paper-2); }
.cb-msg { margin: 0; max-width: 78%; padding: 10px 14px; font-size: .9375rem; line-height: 1.45; border-radius: var(--rad-xl); }
.cb-msg--khach { justify-self: start; background: var(--c-surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: var(--rad-sm); }
.cb-msg--bot { justify-self: end; background: var(--purple); color: var(--c-on-accent); border-bottom-right-radius: var(--rad-sm); }
.cb-lead { justify-self: center; display: grid; grid-template-columns: 10px auto; gap: 2px 10px; align-items: center; margin: 6px 0 0; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--shape-d-sm); background: var(--c-surface); font-size: .875rem; }
.cb-lead i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-good-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-good-fill) 25%, transparent); }
.cb-lead b { color: var(--ink); }
.cb-lead span { grid-column: 2; color: var(--muted); font-size: .8125rem; }
@media (max-width: 520px) { .cb-msg { max-width: 88%; } .cb-head { padding: 12px 16px; } .cb-ds { padding: 20px 14px 24px; } }

/* ---------- Kêu gọi cuối ---------- */
.cta-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--purple-deep); color: var(--c-on-accent); border-radius: var(--shape-d-lg); }
.cta-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(32px, 4.5vw, 64px); align-content: center; }
.cta-card h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.04em; max-width: 9.5em; color: var(--c-on-accent); }
.cta-card .cta-p { color: rgba(255, 255, 255, .8); font-size: var(--fs-lead); margin: 14px 0 0; max-width: 30em; }
/* WEB-PHAN-MEM-04: khối kêu gọi đăng nhập (thay thẻ liên hệ): nhãn nhỏ, 2 nút đăng nhập / tạo tài khoản, dòng nhỏ */
.cta-card .cta-k { margin: 0 0 14px; font-size: .9375rem; max-width: none; color: color-mix(in srgb, var(--c-orange) 55%, white); }
.dn-list { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 440px; }
.dn-btn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 18px; border-radius: var(--shape-d-sm);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: var(--c-on-accent); min-width: 0;
  transition: background-color var(--m-fast) var(--ease-out), border-color var(--m-fast) var(--ease-out), color var(--m-fast) var(--ease-out), border-radius var(--m-standard) var(--ease-out); }
.dn-btn b { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.dn-btn svg { width: 20px; height: 20px; transition: transform var(--m-standard) var(--ease-out); }
.dn-btn:hover { background: var(--c-surface); border-color: var(--c-surface); color: var(--purple-deep); border-radius: var(--shape-p-sm); }
.dn-btn:hover svg { transform: translateX(3px); }
.dn-btn--main { background: var(--orange-ink); border-color: var(--orange-ink); }
.cta-card .dn-note { margin: 4px 0 0; font-size: .875rem; max-width: none; color: rgba(255, 255, 255, .72); }
@media (prefers-reduced-motion: reduce) { .dn-btn, .dn-btn svg { transition: none; } .dn-btn:hover svg { transform: none; } }
@media (max-width: 900px) {
  .cta-card { grid-template-columns: 1fr; }
  }

/* Màn đầu không nút: chỉ dòng dẫn + tiêu đề */
.hero-top--a2 { grid-template-columns: 1fr; }
.hero-top--a2 h1 { max-width: 15ch; }
.facts-2 li { align-content: start; }
/* Thẻ kêu gọi cuối không ảnh (WEB-PHAN-MEM-04: khối đăng nhập): chữ một bên, nút một bên. Đệm nằm ở .cta-body như bản vẽ: bỏ đệm của .cta-card chung (style.css) để khỏi đệm đôi */
.cta-card--chu { grid-template-columns: 1fr; padding: 0; }
@media (min-width: 901px) { .cta-card--chu .cta-body { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; } }