/* ==========================================================================
   EMR CHECK 2026 — Sections
   M0: Header + Hero + thanh CTA dính đáy (mobile)
   ========================================================================== */

/* ==========================================================================
   HEADER — tối giản, đúng spec §4: không có menu website đầy đủ
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
}

.header__right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.header__link {
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-500);
  border-radius: var(--r-sm);
}
.header__link:hover { color: var(--brand-blue); background: var(--blue-50); }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  border-radius: var(--r-sm);
}
.header__phone:hover { color: var(--brand-blue); background: var(--blue-50); }
.header__phone svg { color: var(--brand-blue); }

/* Nút Zalo — CHƯA CÓ LINK, chờ MiO cung cấp Zalo OA (xem data-todo) */
.header__zalo {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  color: var(--brand-blue);
  background: var(--surface);
  transition: all var(--t-fast) var(--ease-out);
}
.header__zalo:hover { border-color: var(--brand-blue); background: var(--blue-50); }

@media (min-width: 1024px) { .header__inner { min-height: 72px; } }

@media (max-width: 1023px) {
  .header__link, .header__phone span { display: none; }
}
@media (max-width: 479px) {
  .header__cta { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 90px) clamp(48px, 6vw, 80px);
}

/* --- Nền trang trí: quầng sáng xanh + lưới mảnh, cả hai đều mờ dần --- */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 82% 8%,  rgba(1, 86, 138, .10), transparent 68%),
    radial-gradient(560px 420px at 6% 92%,  rgba(1, 86, 138, .06), transparent 70%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(1, 86, 138, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1, 86, 138, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(680px 480px at 78% 12%, #000 0%, transparent 72%);
          mask-image: radial-gradient(680px 480px at 78% 12%, #000 0%, transparent 72%);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .88fr);
    gap: 72px;
  }
}

/* --- Cột chữ --- */
.hero__eyebrow { margin-bottom: var(--s-5); }

.hero__title {
  font-size: var(--fs-display);
  margin-bottom: var(--s-5);
  max-width: 16ch;
}
@media (max-width: 1023px) { .hero__title { max-width: 22ch; } }

.hero__sub {
  max-width: 52ch;
  margin-bottom: var(--s-6);
}

/* Vế phụ của subtitle — ẩn trên mobile để hero ngắn đúng spec §39 */
@media (max-width: 767px) {
  .hero__subMore { display: none; }
}

.hero__trust { margin-bottom: var(--s-8); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-4);
}

.hero__microcopy { font-size: var(--fs-xs); color: var(--ink-400); }

/* --- Cột hình: report card --- */
.hero__visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 460px;
}

/* Khối màu mềm phía sau card, tạo chiều sâu */
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 18% -9% -11% 12%;
  border-radius: 40px;
  background: var(--brand-gradient);
  opacity: .10;
  filter: blur(6px);
}

/* ==========================================================================
   REPORT CARD (hero) — cũng là khung dùng lại cho Result page ở M3
   ========================================================================== */

.report {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-quiz);
  box-shadow: var(--sh-xl);
  padding: var(--s-6);
}

.report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.report__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: .01em;
}
.report__tag {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-400);
}

.report__score {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-6);
}
.report__scoreMeta { display: grid; gap: var(--s-2); min-width: 0; }
.report__scoreLabel {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
}
.report__scoreNote {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-500);
}

.report__lines { border-top: 1px solid var(--line); padding-top: var(--s-2); }

.report__foot {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-400);
}

/* Chip nổi: minh hoạ Province Pressure Engine ngay ở hero */
.hero__float {
  position: absolute;
  left: -12px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-xs);
  animation: floatY 5s var(--ease-out) infinite;
}
.hero__float b { color: var(--ink-900); font-weight: 700; }
.hero__float span { color: var(--ink-500); }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (max-width: 479px) {
  .hero__float { left: 0; bottom: -14px; }
  .report { padding: var(--s-5); }
  .report__score { gap: var(--s-4); }
}

/* ==========================================================================
   THANH CTA DÍNH ĐÁY (chỉ mobile) — hiện khi CTA hero đã cuộn qua
   ========================================================================== */

.stickybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  /* visibility (không phải aria-hidden) để nút bên trong không lọt vào thứ tự
     Tab khi thanh đang ẩn — aria-hidden mà vẫn focus được là lỗi truy cập. */
  visibility: hidden;
  transition: transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
}
.stickybar.is-visible {
  transform: none;
  visibility: visible;
  transition: transform var(--t-base) var(--ease-out), visibility 0s;
}
.stickybar__meta { flex: 1; min-width: 0; }
.stickybar__title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-900); }
.stickybar__note  { font-size: var(--fs-micro); color: var(--ink-400); }

@media (min-width: 768px) { .stickybar { display: none; } }

/* ==========================================================================
   THANH SỐ LIỆU CHẠY NGANG (kiểu bảng điện)
   Nằm trên header, KHÔNG dính — cuộn qua là mất, nhường chỗ cho header.
   ========================================================================== */

.ticker {
  position: relative;
  background: var(--brand-blue-deep);
  color: #fff;
  overflow: hidden;
}

/* Vạch sáng mảnh phía dưới, gợi cảm giác màn hình điện tử */
.ticker::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

.ticker__inner { display: flex; align-items: stretch; height: 38px; }

.ticker__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding-inline: var(--gutter) var(--s-4);
  background: rgba(255, 255, 255, .09);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__labelDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--score-high-bar);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .7);
  animation: tickerBlink 2.2s var(--ease-out) infinite;
}
@keyframes tickerBlink {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.ticker__labelText { opacity: .75; font-weight: 600; letter-spacing: .04em; text-transform: none; }

.ticker__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 40px), transparent);
}

.ticker__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation-name: tickerScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 60s;   /* JS ghi đè theo độ dài thật để tốc độ luôn bằng nhau */
  /* Tách thành lớp riêng để trình duyệt chỉ dịch chuyển lớp đó thay vì tính
     lại bố cục cả dải mỗi khung hình. */
  will-change: transform;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

/* Người dùng bật giảm chuyển động: đứng yên, cho vuốt ngang bằng tay */
.ticker.is-static .ticker__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.ticker.is-static .ticker__track { animation: none; }

.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-inline: var(--s-5);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.ticker__item + .ticker__item { border-left: 1px solid rgba(255, 255, 255, .14); }

.ticker__name  { color: rgba(255, 255, 255, .55); }
.ticker__val   { font-weight: 700; color: #fff; }
.ticker__delta { font-size: var(--fs-micro); color: rgba(255, 255, 255, .42); }

.ticker__val--up   { color: #4ADE80; }
.ticker__val--down { color: #FF9AA0; }   /* 5.15:1 trên nền navy — #FF7A80 cũ chỉ đạt 4.27 */
.ticker__val--warn { color: #FBBF3C; }

@media (max-width: 639px) {
  .ticker__inner { height: 34px; }
  .ticker__label { padding-inline: var(--gutter) var(--s-3); font-size: 10px; }
  .ticker__labelText { display: none; }
  .ticker__item { padding-inline: var(--s-4); }
}


/* ==========================================================================
   VĂN BẢN THAM KHẢO
   ========================================================================== */

.docs__head { max-width: 62ch; margin-bottom: var(--s-8); }
.docs__head .eyebrow { margin-bottom: var(--s-4); }
.docs__head h2 { margin-bottom: var(--s-4); }

/* Cảnh báo nội bộ — tự ẩn khi DOCS_VERIFIED = true */
.docs__reviewNotice {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--score-mid-soft);
  border: 1px dashed var(--score-mid-bar);
  border-radius: var(--r-card);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--score-mid-ink);
}
.docs__reviewNotice svg { flex: none; margin-top: 2px; }

.docs__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.docs__filter {
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-500);
  transition: all var(--t-fast) var(--ease-out);
}
.docs__filter:hover { border-color: var(--blue-300); color: var(--brand-blue); }
.docs__filter.is-active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  font-weight: 600;
}

.docs__list { display: grid; gap: var(--s-3); }

/* --- Một dòng văn bản --- */
.doc {
  display: grid;
  gap: var(--s-2) var(--s-5);
  grid-template-columns: 1fr;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: inherit;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.doc:hover {
  border-color: var(--blue-300);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  color: inherit;
}

/* Văn bản trọng tâm — viền trái đậm màu brand */
.doc--highlight {
  border-color: var(--blue-200);
  background: linear-gradient(90deg, var(--blue-50) 0 4px, var(--surface) 4px);
}

.doc__id { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.doc__type {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-blue);
  color: var(--brand-blue);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.doc__code {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.doc__main { display: grid; gap: 6px; min-width: 0; }
.doc__title { font-size: var(--fs-body); font-weight: 600; color: var(--ink-900); line-height: 1.4; }

/* Văn bản đã hết hiệu lực: làm nhạt cả thẻ và gắn nhãn đỏ cạnh tiêu đề, để
   không ai đọc lướt rồi tưởng đang còn áp dụng. */
.doc--expired { opacity: .72; }
.doc--expired:hover { opacity: 1; }
.doc__expired {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--score-low-soft);
  color: var(--score-low-ink);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.doc__note  { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.55; }
.doc__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--fs-micro); color: var(--ink-400);
}
.doc__pillar { color: var(--brand-blue); font-weight: 600; }

.doc__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-blue);
  white-space: nowrap;
}
.doc__go { transition: transform var(--t-base) var(--ease-out); }
.doc:hover .doc__go { transform: translate(2px, -2px); }

@media (min-width: 900px) {
  .doc {
    grid-template-columns: 190px minmax(0, 1fr) auto;
    align-items: start;
  }
  .doc__id { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .doc__action { align-self: center; }
}

.docs__foot { margin-top: var(--s-6); }

/* ==========================================================================
   URGENCY BAR — dòng thông tin về mốc lộ trình.
   Cố ý KHÔNG dùng nền đỏ hay giọng hù dọa (spec §3, §57):
   nền xanh nhạt, số ngày là thông tin, không phải lời đe.
   ========================================================================== */

.urgency { background: var(--surface-blue); border-block: 1px solid var(--blue-100); }

.urgency__inner {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-8);
  align-items: center;
}

@media (min-width: 900px) {
  .urgency__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-8);
  }
}

/* --- Khối đếm ngược --- */
.urgency__count {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}
.urgency__countNum {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
}

/* Sau 31/12/2026: chữ "ĐÃ QUA" thay cho con số, nên phải nhỏ lại cho vừa ô
   và bớt nổi — lúc đó nó là thông tin, không còn là bộ đếm hối thúc. */
.urgency--passed .urgency__countNum {
  font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  color: var(--ink-500);
  letter-spacing: .02em;
}
.urgency__countLabel {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-500);
  max-width: 12ch;
}
.urgency__countLabel b { display: block; color: var(--ink-900); font-weight: 700; }

/* --- Nội dung --- */
.urgency__body { min-width: 0; }
.urgency__lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.45;
  margin-bottom: 6px;
}
.urgency__note { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.6; }
.urgency__note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.urgency__cta { justify-self: start; }
@media (min-width: 900px) { .urgency__cta { justify-self: end; } }


/* ==========================================================================
   TÌNH HUỐNG — bảng bento: một ô nổi bật + lưới thẻ nhỏ
   Trước đây là danh sách gạch mảnh với ô vuông chưa tick. Nâng lên thành bố
   cục bento (một ô lớn dẫn đầu, năm ô nhỏ theo sau) để có phân cấp thị giác
   rõ ràng và cảm giác "báo cáo khảo sát" chuyên nghiệp hơn — khác hẳn khối
   Giải pháp MiO (nền tối, không viền, không đổ bóng) ở ngay bên dưới.
   ========================================================================== */

.pain__head { max-width: 60ch; margin-bottom: var(--s-8); }
.pain__head .eyebrow { margin-bottom: var(--s-4); }

.painboard { display: grid; gap: var(--s-4); }

.painboard__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .painboard__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .painboard__grid { grid-template-columns: repeat(3, 1fr); } }

.paincard {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.paincard:hover {
  border-color: var(--blue-200);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.paincard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface-blue);
  color: var(--brand-blue);
}

.paincard__body { min-width: 0; }
.paincard__title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.4;
  margin-bottom: 4px;
}
.paincard__desc { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-500); }

/* Ô dẫn đầu — pain phổ biến nhất, chiếm trọn chiều rộng, đặt trước lưới nhỏ */
.paincard--feature {
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-8);
  background: linear-gradient(120deg, var(--surface-blue) 0%, var(--surface) 62%);
  border-color: var(--blue-100);
}
.paincard--feature .paincard__icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.paincard--feature .paincard__title { font-size: var(--fs-h3); margin-bottom: 6px; }
.paincard--feature .paincard__desc { max-width: 58ch; }

@media (max-width: 559px) {
  .paincard--feature { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

/* Khối chốt — vạch nhấn bên trái thay cho việc tô nền đậm, tránh trùng tông
   nền tối của khối Giải pháp MiO ngay bên dưới. */
.pain__closing {
  position: relative;
  margin-top: clamp(40px, 4vw, 64px);
  padding: var(--s-8);
  padding-left: calc(var(--s-8) + var(--s-2));
  background: var(--surface-soft);
  border-radius: var(--r-quiz);
  display: grid;
  gap: var(--s-6);
  align-items: center;
  overflow: hidden;
}
.pain__closing::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--brand-gradient);
}
@media (min-width: 900px) {
  .pain__closing { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-10); }
}
.pain__closingText { min-width: 0; }
.pain__closingLead {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  max-width: 46ch;
}
.pain__closingNote { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--ink-500); }
.pain__closingNote strong { color: var(--ink-900); font-weight: 600; }

/* ==========================================================================
   EDUCATION — 5 nhóm, cũng chính là 5 nhóm điểm của kết quả.
   Bố cục 2 cột kiểu tài liệu: cột trái dính, cột phải là danh sách có gạch chia.
   ========================================================================== */

.edu__grid { display: grid; gap: var(--s-10); }

@media (min-width: 1000px) {
  .edu__grid { grid-template-columns: 360px minmax(0, 1fr); gap: var(--s-16); }
  .edu__aside { position: sticky; top: 104px; align-self: start; }
}

.edu__aside .eyebrow { margin-bottom: var(--s-4); }
.edu__aside h2 { margin-bottom: var(--s-4); }
.edu__aside .lead { margin-bottom: var(--s-6); }

.edu__list { display: grid; }

.edu__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  transition: background var(--t-base) var(--ease-out);
}
.edu__item:last-child { border-bottom: 1px solid var(--line); }

.edu__num {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--blue-200);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-base) var(--ease-out);
}
.edu__item:hover .edu__num { color: var(--brand-blue); }

.edu__body { min-width: 0; }
.edu__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.edu__title { font-size: var(--fs-h3); }
.edu__weight {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-blue);
  color: var(--brand-blue);
  font-size: var(--fs-micro);
  font-weight: 700;
  white-space: nowrap;
}
.edu__desc { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.6; }

/* Đoạn nối EMR với HIS. Lùi vào bằng vạch trái để đọc ra là một nhận định,
   không phải câu mô tả tiếp theo. */
.edu__insight {
  margin: var(--s-5) 0 var(--s-6);
  padding-left: var(--s-4);
  border-left: 2px solid var(--line-strong);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 54ch;
}
.edu__insight strong { color: var(--ink-900); }

.edu__foot {
  margin-top: var(--s-6);
  font-size: var(--fs-xs);
  color: var(--ink-400);
}


/* ==========================================================================
   CHỖ DÀNH SẴN CHO QUIZ — sẽ bị thay ở M2
   ========================================================================== */

.placeholder {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-16) var(--s-6);
  margin-block: var(--section-y);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-quiz);
  background: var(--surface-soft);
  text-align: center;
}
.placeholder__title { font-size: var(--fs-h3); color: var(--ink-400); }
.placeholder__note { font-size: var(--fs-sm); color: var(--ink-300); }

/* ==========================================================================
   FOOTER
   Thông tin doanh nghiệp lấy từ footer miohealth.vn (đọc ngày 08/09/2026).
   ========================================================================== */

.site-footer {
  background: var(--brand-gradient);
  color: rgba(255, 255, 255, .72);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  gap: var(--s-10);
  padding-block: clamp(48px, 5vw, 72px) var(--s-10);
}
@media (min-width: 760px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.55fr 1fr 1fr; gap: var(--s-16); } }

/* --- Cột thương hiệu --- */
.footer__logo {
  height: 32px; width: auto;
  margin-bottom: var(--s-5);
  /* Logo gốc là bản màu; brightness(0) invert(1) cho ra đúng bản trắng
     một màu như trong MIO.pdf, nên không cần file logo thứ hai. */
  filter: brightness(0) invert(1);
}

.footer__tagline {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: #fff;
  line-height: 1.45;
  margin-bottom: var(--s-5);
  max-width: 30ch;
}

.footer__company { display: grid; gap: 6px; font-size: var(--fs-xs); line-height: 1.6; }
.footer__company dt { color: rgba(255, 255, 255, .5); }
.footer__company dd { margin: 0; color: rgba(255, 255, 255, .82); }
.footer__company .footer__legalName { color: #fff; font-weight: 700; letter-spacing: .01em; }

.footer__site {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-btn);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: all var(--t-fast) var(--ease-out);
}
.footer__site:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255,255,255,.55); color: #fff; }

/* --- Các cột liên kết --- */
.footer__colTitle {
  margin-bottom: var(--s-4);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.footer__links { display: grid; gap: var(--s-3); }
.footer__links a,
.footer__links button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: rgba(255, 255, 255, .72);
  transition: color var(--t-fast) var(--ease-out);
}
.footer__links a:hover,
.footer__links button:hover { color: #fff; }
.footer__links svg { flex: none; opacity: .65; }

/* --- Mạng xã hội --- */
.footer__social { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-btn);
  color: rgba(255, 255, 255, .82);
  transition: all var(--t-fast) var(--ease-out);
}
.footer__social a:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

/* --- Dải dưới cùng --- */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-block: var(--s-6) var(--s-8);
}

.footer__disclaimer {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  background: rgba(255, 255, 255, .07);
  border-radius: var(--r-card);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}
.footer__disclaimer svg { flex: none; margin-top: 2px; opacity: .7; }
.footer__disclaimer strong { color: #fff; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
}
.footer__legal a { color: rgba(255, 255, 255, .72); }
.footer__legal a:hover { color: #fff; }

/* ==========================================================================
   CÁCH CÔNG CỤ HOẠT ĐỘNG
   Section này tồn tại vì một lý do: khách mua phần mềm y tế rất ngại rủi ro.
   Cho họ thấy điểm đến từ đâu và giải thích được từng phần thì đáng tin hơn
   nhiều so với chỉ đưa ra một con số.
   ========================================================================== */

.how__head { max-width: 62ch; margin-bottom: var(--s-8); }
.how__head .eyebrow { margin-bottom: var(--s-4); }
.how__head h2 { margin-bottom: var(--s-4); }

.how__grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .how__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }

.how__card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-8) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-quiz);
}
.how__step {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
}

.how__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--surface-blue);
  color: var(--brand-blue);
}

.how__title { font-size: var(--fs-h3); }
.how__desc { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.65; }
.how__desc strong { color: var(--ink-900); font-weight: 600; }

.how__note {
  margin-top: var(--s-6);
}

/* ==========================================================================
   THAM KHẢO BẢNG GIÁ
   Đặt sát cuối trang, sau khi khách đã đi qua toàn bộ phần đánh giá.
   Cố ý làm nhẹ: một dòng chữ và một nút viền, không phải khối bán hàng —
   landing page này bán sự rõ ràng trước, phần mềm sau (spec §3, §60).
   Dùng lại hoàn toàn token và component sẵn có, không thêm ngôn ngữ thị giác mới.
   ========================================================================== */

.priceref__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  padding-block: var(--s-10);
}
.priceref__text {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-500);
  max-width: 56ch;
}
.priceref__text b { color: var(--ink-900); font-weight: 600; }

@media (max-width: 639px) {
  .priceref__inner { padding-block: var(--s-8); }
  .priceref__inner .btn { width: 100%; }
}

/* Hai nút ngoài trong cột thương hiệu ở footer */
.footer__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.footer__actions .footer__site { margin-top: 0; }

/* ==========================================================================
   GIẢI PHÁP MiO — bảng bento nền tối, có chiều sâu
   Đảo màu so với phần còn lại của trang để tách hẳn khỏi mạch nội dung tư
   vấn phía trên — đây là khối duy nhất nói về sản phẩm. Khác với section
   Tình huống (nền sáng, từng thẻ có viền + bóng đổ riêng), ở đây sáu tính
   năng nằm liền khối trong MỘT tấm nền, chỉ ngăn nhau bằng đường kẻ mảnh —
   đọc ra như một bảng điều khiển, không phải một dãy card rời rạc.
   ========================================================================== */

.solution__head { max-width: 62ch; margin-bottom: var(--s-8); }
.solution__head .eyebrow { margin-bottom: var(--s-4); }
.solution__head h2 { margin-bottom: var(--s-4); }

.solution__panel {
  position: relative;
  overflow: hidden;
  background: var(--brand-gradient);
  border-radius: 28px;
  padding: clamp(20px, 2.5vw, 32px);
  box-shadow: 0 30px 64px -24px rgba(10, 65, 101, .45);
}
/* Quầng sáng trang trí — thuần CSS, không ảnh hưởng hiệu năng */
.solution__panel::before {
  content: "";
  position: absolute;
  top: -35%; right: -15%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
  pointer-events: none;
}

.solution__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, .12);   /* chính là các đường kẻ giữa ô */
  border-radius: 18px;
  overflow: hidden;
}
@media (min-width: 640px)  { .solution__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .solution__list { grid-template-columns: repeat(3, 1fr); } }

.feat {
  position: relative;
  background: rgba(10, 65, 101, .55);
  padding: var(--s-6) var(--s-5) var(--s-8);
  transition: background var(--t-base) var(--ease-out);
}
.feat:hover { background: rgba(255, 255, 255, .06); }

.feat__index {
  position: absolute;
  top: var(--s-4);
  right: var(--s-5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .28);
  font-variant-numeric: tabular-nums;
}

.feat__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--s-4);
  border-radius: 13px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #BFE0F5;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.feat:hover .feat__icon { background: rgba(255, 255, 255, .18); color: #fff; }

.feat__name {
  font-size: var(--fs-body);
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: .005em;
}
.feat__desc { font-size: var(--fs-sm); line-height: 1.6; color: rgba(255, 255, 255, .66); }

/* ==========================================================================
   CLOUD USP — spec §29
   ========================================================================== */

.cloud__inner {
  display: grid;
  gap: var(--s-8);
  padding: clamp(32px, 4vw, 56px);
  background: var(--surface-blue);
  border-radius: var(--r-quiz);
}
@media (min-width: 900px) {
  .cloud__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-12); }
}
.cloud__title { margin-bottom: var(--s-4); max-width: 22ch; }
.cloud__body { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-500); max-width: 56ch; }
.cloud__body p + p { margin-top: var(--s-3); }

/* ==========================================================================
   CỤM LOGO KHÁCH HÀNG — avatar tròn xếp chồng
   Đặt ngay dưới thẻ kết quả mẫu ở hero. Nhỏ và nhẹ: một tín hiệu tin cậy
   xuất hiện sớm, không chiếm một section riêng ở giữa trang.
   ========================================================================== */

.customers {
  /* Nổi lên trên khối gradient trang trí của hero, nếu không sẽ bị phủ mờ */
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  text-align: center;
}

/* Xuống dòng được: 17 logo trên một hàng sẽ tràn khỏi cột hero.
   Lề trái âm đặt cho MỌI avatar (không chỉ từ cái thứ hai) để hàng nào cũng
   bắt đầu ở cùng vị trí; phần dôi ra bù lại bằng padding-left của khung. */
.avatars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 11px;
  row-gap: var(--s-2);
  /* Bó lại để 17 logo chia đều 9 + 8 thay vì 14 + 3 nhìn lệch.
     Mỗi avatar chiếm 31px (42px trừ 11px chồng lên nhau). */
  max-width: 306px;
  margin-inline: auto;
}

.avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-left: -11px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(10, 65, 101, .12);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out);
}

.avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* Vòng cuối: số cơ sở còn lại */
.avatar--more {
  background: var(--surface-blue);
  color: var(--brand-blue);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Rê chuột vào cụm thì các logo tách ra cho dễ nhìn */
.customers:hover .avatar { margin-left: -5px; }

.customers__caption {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 34ch;
}

/* ==========================================================================
   FAQ — spec §31. Dùng <details> của trình duyệt: đóng mở được mà không
   cần JavaScript, và trình đọc màn hình hiểu sẵn.
   ========================================================================== */

.faq__grid { display: grid; gap: var(--s-10); }
@media (min-width: 1000px) {
  .faq__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-16); }
  .faq__aside { position: sticky; top: 104px; align-self: start; }
}
.faq__aside .eyebrow { margin-bottom: var(--s-4); }
.faq__aside h2 { margin-bottom: var(--s-4); }

.faq__list { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-5);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand-blue); }

.faq__sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--surface-blue);
  color: var(--brand-blue);
  transition: transform var(--t-base) var(--ease-out);
}
.faq__item[open] .faq__sign { transform: rotate(45deg); }

.faq__a {
  padding: 0 0 var(--s-6) calc(22px + var(--s-4));
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-500);
  max-width: 68ch;
}
.faq__a p + p { margin-top: var(--s-3); }
.faq__a strong { color: var(--ink-900); font-weight: 600; }

/* ==========================================================================
   FINAL CTA — spec §32
   ========================================================================== */

.finalcta {
  background: var(--brand-gradient);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}
.finalcta__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  padding-block: clamp(56px, 6vw, 96px);
}
.finalcta h2 { color: #fff; max-width: 20ch; }
.finalcta__sub { font-size: var(--fs-lead); max-width: 46ch; }
.finalcta__note { font-size: var(--fs-xs); color: rgba(255, 255, 255, .6); }

/* Hai dải tối liền nhau — vạch mảnh này giữ chúng tách bạch */
.site-footer { border-top: 1px solid rgba(255, 255, 255, .14); }

/* Nút mở rộng danh sách văn bản */
.docs__more { margin-top: var(--s-5); }
.docs__more button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-blue);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.docs__more button:hover { border-color: var(--brand-blue); background: var(--blue-50); }
.docs__chevron { transition: transform var(--t-base) var(--ease-out); }
.docs__more button[aria-expanded="true"] .docs__chevron { transform: rotate(180deg); }

/* ==========================================================================
   BÀI VIẾT MỚI
   Dùng lại khuôn của mục văn bản: cùng .docs__head, cùng cách bày thẻ, nên
   hai mục cạnh nhau đọc ra là một hệ thống chứ không phải hai khối rời.
   ========================================================================== */

.posts__list {
  display: grid;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .posts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Một bài lẻ mà để lưới 2 cột thì hở hẳn nửa bên phải, nhìn như thiếu nội
     dung. Có đúng một bài thì cho nó trải hết chiều ngang. */
  .posts__list:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
}

.post {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.post:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-md);
}

.post__main { display: grid; gap: var(--s-2); min-width: 0; }
.post__title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
}
.post__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-500);
}
.post__date {
  font-size: var(--fs-micro);
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.post__action { margin-left: auto; }
.post__go { flex: none; color: var(--ink-300); }
.post:hover .post__go { color: var(--brand-blue); }

.posts__foot { display: flex; }
.posts__more { gap: var(--s-2); }

/* Nhãn video — báo trước để khách không bấm nhầm khi đang cần đọc nhanh */
.post__kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: var(--s-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-blue);
  color: var(--brand-blue);
  font-size: var(--fs-micro);
  font-weight: 700;
  vertical-align: middle;
}