/* mobile-khoi2.css — phần sau của mobile-khoi.css.
   Tách vì tệp gốc 163 dòng, vượt trần 150 dòng của hệ. */
/* ── Khối 4 & 5 — Thẻ dọc thay bảng ────────────────────── */
.the-doc {
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 16px;
  margin-bottom: 12px;
}
.the-doc__hoi { font-size: 14px; font-weight: 600; color: var(--chu); margin-bottom: 8px; }
.the-doc__hoi--chinh { color: var(--vang-sang); }
.the-doc__tra { font-size: var(--co-van-m); color: var(--chu); line-height: 1.6; }
.the-doc__tra em { color: var(--chu-phu); font-style: normal; }

/* ── Khối 8 — Form ───────────────────────────────────────── */
.form-m { display: flex; flex-direction: column; gap: 14px; }
.form-m label { font-size: 14px; color: var(--chu-phu); display: block; margin-bottom: 6px; }
.form-m input, .form-m select {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); color: var(--chu);
  font-size: 16px; font-family: var(--phong);
  transition: border-color var(--nhanh);
}
.form-m input:focus, .form-m select:focus {
  outline: 2px solid var(--vang); outline-offset: 2px; border-color: var(--vang-sang);
}

/* ── Nút dính đáy ────────────────────────────────────────── */
/* Mặc định HIỆN. JavaScript mới thêm lớp `an-o-dau` để ẩn lúc còn ở khối mở đầu.
   Vì sao đảo chiều thay vì mặc định ẩn: JavaScript tắt hoặc trình duyệt cũ thì lớp
   kia không bao giờ được thêm — mặc định ẩn nghĩa là MẤT HẲN đường đặt tư vấn.
   Thà thấy hai nút vàng ở khung đầu, còn hơn mất nút.
   Lý do cần ẩn: khối mở đầu đã có nút nền vàng đặc cùng chữ; hai nút vàng đặc giống
   nhau trên một khung nhìn làm người xem không biết bấm cái nào (đo được ở khung đầu
   bản điện thoại). */
.cta-dinh {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--nen-phu); border-top: 1px solid var(--vien);
  padding: 12px var(--le-m);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.cta-dinh.an-o-dau {
  opacity: 0; visibility: hidden; transform: translateY(100%);
}

/* ── Chân trang ──────────────────────────────────────────── */
.footer-m {
  text-align: center; padding: 32px var(--le-m) 24px;
  font-size: 13px; color: var(--chu-phu);
  border-top: 1px solid var(--vien);
}
.footer-m a { color: var(--vang); min-height: 44px; display: inline-flex; align-items: center; }

/* ── Hiệu ứng vào màn ────────────────────────────────────── */
.js-hien-khoi { opacity: 0; transform: translateY(16px); transition: opacity var(--vao-man), transform var(--vao-man); }
.js-hien-khoi.da-hien { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-hien-khoi { opacity: 1; transform: none; }
}

/* ── Khối kết quả — bản điện thoại ─────────────────────── */
.kq-so-m { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.kq-so-m__item { background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 20px; text-align: center; }
.kq-so-m__con { display: block; font-family: var(--phong-tieu-de); font-size: 2.4rem;
  font-weight: 700; color: var(--vang-sang); margin-bottom: 8px; }
.kq-so-m__mau { display: block; font-size: 13px; color: var(--chu-phu); line-height: 1.5; }
.kq-phu-m { font-size: var(--co-the-m); font-weight: 600; color: var(--chu); margin: 24px 0 16px; }
.kq-tieu-chi-m { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.kq-tc-m__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kq-tc-m__ten { font-size: 14px; color: var(--chu); }
.kq-tc-m__pt { font-size: 14px; font-weight: 700; color: var(--vang-sang); }
.kq-thanh-m { height: 8px; background: var(--vien); border-radius: 4px; overflow: hidden; }
.kq-thanh-m__day { height: 100%; background: var(--vang); border-radius: 4px; }
.kq-gop-y-m { display: flex; flex-direction: column; gap: 12px; }
.kq-gy-m { display: flex; align-items: flex-start; gap: 16px;
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 14px 16px; }
.kq-gy-m__so { font-size: 1.8rem; font-weight: 700; color: var(--vang-sang);
  font-family: var(--phong-tieu-de); min-width: 36px; flex-shrink: 0; }
.kq-gy-m__nhan { display: block; font-size: 14px; font-weight: 600; color: var(--chu); }
.kq-gy-m__tren { display: block; font-size: 12px; color: var(--chu-phu); margin-top: 2px; }
/* liên kết chính sách bảo mật thật (P1 fix) */
.lien-ket-chinh-sach { color: var(--vang); text-decoration: underline; cursor: pointer; }
/* ── Khối người đứng lớp — bản điện thoại ──────────────── */
.chan-dung-luoi-m { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.chan-dung-m { text-align: center; }
.chan-dung-m__anh {
  width: 220px; height: 275px; aspect-ratio: 4/5; object-fit: cover; margin: 0 auto 12px;
  border-radius: var(--bo-goc); border: 1px solid var(--vien); display: block;
}
.chan-dung-m__ten { font-size: var(--co-the-m); font-weight: 600; color: var(--chu); margin-bottom: 4px; }
.chan-dung-m__vai { font-size: 13px; line-height: 1.5; color: var(--chu-phu); margin: 0 auto; max-width: 30ch; }