/* Trang giới thiệu Dino Kids.
   Viết tay, không framework: cả trang chỉ có ba file (HTML + CSS này + ảnh),
   nên thời gian tải không phụ thuộc vào CDN nào — cùng lý do app không gọi
   dịch vụ ngoài. Bảng màu lấy đúng từ design/icon/app_icon.svg. */

:root {
  --brand-600: #2c6bd8;
  --brand-500: #3d8bfd;
  --brand-300: #6fc3ff;
  --accent: #ff7a1a;
  --pink: #ff9bb0;

  --ink: #17233a;
  --ink-soft: #47546b;
  --ink-faint: #6b7789;
  --line: #dfe5ee;
  --bg: #ffffff;
  --bg-tint: #f4f7fc;
  --bg-card: #ffffff;

  --radius: 18px;
  --wrap: 1080px;

  /* M PLUS Rounded 1c là font trong app, nhưng trang này KHÔNG tải font từ
     Google Fonts: một trang nói "không gọi dịch vụ bên thứ ba" mà lại nạp
     font từ máy chủ Google thì tự mâu thuẫn. Dùng font hệ thống. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Noto Sans JP", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-600); }
a:hover { color: var(--brand-500); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- Thanh đầu trang ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.brand img { width: 32px; height: 32px; border-radius: 8px; }

.langs { display: flex; gap: 4px; }

.langs a {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
}

.langs a:hover { background: var(--bg-tint); }

.langs a[aria-current="true"] {
  background: var(--brand-600);
  color: #fff;
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(168deg, #eaf4ff 0%, #f7fbff 58%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 48px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.hero .lede {
  margin: 0 0 20px;
  font-size: clamp(17px, 2vw, 19px);
  color: var(--ink-soft);
}

.hero-icon {
  width: 74px;
  height: 74px;
  border-radius: 17px;
  margin-bottom: 20px;
  box-shadow: 0 8px 22px rgba(16, 48, 92, 0.18);
}

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.badges li {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-600);
  background: #fff;
  border: 1px solid #cfe0f8;
  border-radius: 999px;
  padding: 5px 13px;
}

.hero-shot img {
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(16, 48, 92, 0.14);
}

/* ---------- Khối chung ---------- */

section { padding: 60px 0; }
section.tint { background: var(--bg-tint); border-block: 1px solid var(--line); }

h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.section-lede {
  margin: 0 0 30px;
  max-width: 62ch;
  color: var(--ink-soft);
}

h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.35; }

/* ---------- Tính năng nổi bật (giọng bố mẹ) ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 44px;
  align-items: center;
}

.feature-body p { color: var(--ink-soft); }
.feature-body p:first-of-type { color: var(--ink); font-size: 18px; }

.steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: s; }

.steps li {
  position: relative;
  padding-left: 42px;
  margin-bottom: 14px;
  counter-increment: s;
  color: var(--ink-soft);
}

.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.steps b { color: var(--ink); }

/* ---------- Lưới thẻ ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.card .ico { font-size: 26px; line-height: 1; margin-bottom: 12px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 16px; }

.card .num {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-600);
}

/* ---------- Danh sách "không có gì" ---------- */

.nolist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.nolist div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  font-weight: 600;
}

.nolist span { display: block; font-weight: 400; font-size: 15px; color: var(--ink-faint); margin-top: 3px; }

/* ---------- Ảnh chụp màn hình ---------- */

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }

.shots figure { margin: 0; }

.shots img {
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(16, 48, 92, 0.1);
}

.shots figcaption { margin-top: 9px; font-size: 14px; color: var(--ink-faint); text-align: center; }

/* ---------- Khối liên hệ / phát hành ---------- */

.note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-500);
  background: #fff;
  border-radius: 0 14px 14px 0;
  padding: 18px 20px;
  color: var(--ink-soft);
}

.note strong { color: var(--ink); }

/* ---------- Chân trang ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  font-size: 15px;
  color: var(--ink-faint);
  background: var(--bg-tint);
}

footer .wrap { display: flex; gap: 16px 28px; flex-wrap: wrap; align-items: baseline; }
footer .legal { margin-right: auto; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ---------- Trang văn bản (điều khoản, quyền riêng tư) ---------- */

.doc { padding: 44px 0 64px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(27px, 4vw, 36px); line-height: 1.25; margin: 0 0 8px; }
.doc .meta { color: var(--ink-faint); font-size: 15px; margin: 0 0 34px; }
.doc h2 { font-size: 21px; margin: 38px 0 10px; }
.doc h3 { font-size: 17px; margin: 24px 0 6px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc li { margin-bottom: 6px; }
.doc ul, .doc ol { padding-left: 22px; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}

.doc th, .doc td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--bg-tint); font-weight: 600; color: var(--ink); }

.doc .scroller { overflow-x: auto; }

.transnote {
  background: #fff7ed;
  border: 1px solid #f7d9b5;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  color: #7a4a12;
  margin: 0 0 30px;
}

.back { display: inline-block; margin-top: 40px; font-weight: 600; text-decoration: none; }

/* ---------- Màn hẹp ---------- */

@media (max-width: 860px) {
  .hero-grid, .feature { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding: 40px 0 36px; }
  section { padding: 46px 0; }

  /* `margin-inline: auto` KHÔNG thừa. Dưới 860 px thì lưới đổ về một cột,
     nhưng ảnh vẫn bị chặn ở 460 px — thiếu dòng căn giữa thì nó dính mép
     trái và chừa một khoảng trắng câm bên phải. Đo trên iPad dựng đứng:
     264 px trống ở 744, 288 px ở 768, 354 px ở 834. Chiều rộng tablet đủ lớn
     để chỗ trống đó đọc ra như trang vỡ chứ không như khoảng thở. */
  .hero-shot { max-width: 460px; margin-inline: auto; }
}

/* Vùng chạm trên máy cảm ứng.
   Bố mẹ mở trang này bằng một tay trong lúc tay kia bế con, nên cỡ chạm ở đây
   cũng đáng giá như trong app. Đo được: nút đổi ngôn ngữ cao 34 px và liên kết
   chân trang cao 26 px — qua ngưỡng 24 px của WCAG 2.5.8 mức AA, nhưng dưới
   khuyến nghị 44 px của Apple. Thanh đổi ngôn ngữ là điều hướng chính của một
   trang ba thứ tiếng, nên nó phải chạm trúng ngay lần đầu.
   Chỉ nới ở màn cảm ứng: trên desktop, viên 44 px làm thanh đầu trang nặng nề. */
@media (max-width: 860px) {
  .langs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  footer .wrap { gap: 4px 28px; }
  footer a { padding: 9px 0; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .topbar .wrap { min-height: 56px; }
  .brand { font-size: 17px; }
}

/* Người dùng chọn giảm chuyển động thì bỏ cuộn mượt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Nút gọi hành động ---------- */
/* Trang này bán một app miễn phí cho phụ huynh đang lướt điện thoại: nút phải
   to, đứng ngay dưới câu mở đầu, và lặp lại ở cuối trang. 88 pt là cỡ chạm tối
   thiểu của chính app — dùng lại ở đây cho nhất quán và cho ngón tay người lớn
   đang bế con. */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 10px 24px rgba(44, 107, 216, 0.28);
}

.btn-primary:hover { background: var(--brand-500); color: #fff; }

/* Nút Google Play. Cùng cỡ, cùng độ nổi với nút App Store — hai store đứng
   ngang hàng nhau, không cái nào là "cái phụ".

   Cố ý KHÔNG dựng lại huy hiệu chính thức của hai store: cả Apple lẫn Google
   đều có bộ artwork riêng kèm quy định dùng, mà vẽ tay gần giống thì vừa sai
   quy định vừa hỏng ở màn hình chữ to. Nút chữ thì luôn đọc được, dịch được
   sang ba thứ tiếng, và không kéo thêm một file ảnh nào. */
.btn-play {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 24px rgba(23, 35, 58, 0.24);
}

.btn-play:hover { background: #24334f; color: #fff; }

.btn-ghost {
  background: #fff;
  color: var(--brand-600);
  border-color: #cfe0f8;
}

.btn-ghost:hover { background: var(--bg-tint); }

.btn .sub {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.82;
  letter-spacing: 0.02em;
}

.trustline {
  margin: 0;
  font-size: 15px;
  color: var(--ink-faint);
}

/* ---------- Dải số liệu dưới hero ---------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
}

.proof b {
  display: block;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brand-600);
}

.proof span { font-size: 14px; color: var(--ink-faint); }

/* ---------- Sứ mệnh: vì sao app miễn phí ---------- */
/* Khối này nằm ngay dưới dải số liệu, không phải ở cuối trang, vì nó trả lời
   đúng thắc mắc đầu tiên của người vừa thấy một app học miễn phí không quảng
   cáo: "vậy họ thu tiền ở chỗ nào?". Câu trả lời để tới cuối trang thì phần
   lớn người đọc không bao giờ đọc tới — mà đó lại là lý do tồn tại của app.

   Dùng `.pillars` chứ không dùng lại `.cards`: `.cards` xếp theo minmax 255 px
   cho mười hai thẻ tính năng, còn ở đây chỉ có ba cột và mỗi cột là một đoạn
   văn, nên cần ô rộng hơn để không vỡ thành ba cột hẹp trên tablet. */

.mission-lead {
  margin: 0 0 28px;
  max-width: 54ch;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.5;
  color: var(--ink);
}

.mission-lead b { color: var(--brand-600); }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.pillars div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.pillars .ico { display: block; font-size: 26px; line-height: 1; margin-bottom: 12px; }
.pillars h3 { margin: 0 0 8px; }
.pillars p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* Viên chữ trên tiêu đề hero — chỗ duy nhất nêu tên công ty ở nửa trên trang.
   `inline-block` để nền chỉ bám quanh chữ; để `block` là dải màu kéo hết chiều
   rộng cột và trông như một thanh thông báo lỗi. */
.kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #e4efff;
  border: 1px solid #cfe0f8;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-600);
}

/* ---------- Ba bước bắt đầu ---------- */

.how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  counter-reset: h;
}

.how div {
  position: relative;
  padding: 22px 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  counter-increment: h;
}

.how h3 { margin: 0 0 6px; }
.how p { margin: 0; color: var(--ink-soft); font-size: 16px; }

.how div::before {
  content: counter(h);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

/* ---------- Câu hỏi thường gặp ---------- */
/* <details> thay vì JavaScript: nội dung vẫn nằm trong HTML nên máy tìm kiếm
   đọc được đủ câu trả lời dù người dùng chưa mở ra. */

.faq { display: grid; gap: 10px; }

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2px 20px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 28px 15px 0;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--brand-600);
  line-height: 1;
}

.faq details[open] summary::after { content: "–"; }

.faq p { margin: 0 0 16px; color: var(--ink-soft); font-size: 16px; }

/* ---------- Khối kết ---------- */

.final {
  background: linear-gradient(160deg, #eaf4ff 0%, #f7fbff 100%);
  text-align: center;
}

.final .wrap { max-width: 720px; }
.final .cta-row { justify-content: center; }
.final p { color: var(--ink-soft); }

/* ---------- Hộp tóm tắt đầu trang văn bản ---------- */

.tldr {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 32px;
}

.tldr h2 { font-size: 18px; margin: 0 0 10px; }
.tldr ul { margin: 0; padding-left: 20px; }
.tldr li { margin-bottom: 5px; }

@media (max-width: 520px) {
  .btn { width: 100%; }
  .cta-row { gap: 10px; }
}

/* ---------- Form liên hệ ---------- */
/* Trang không có JavaScript (CSP đặt `script-src 'none'`), nên toàn bộ việc
   kiểm dữ liệu tại chỗ dựa vào thuộc tính HTML5: `required`, `type=email`,
   `minlength`. Trình duyệt tự chặn và tự chỉ vào ô sai — không cần một dòng
   script nào, và cũng không có gì để chặn. */

.form {
  display: grid;
  gap: 18px;
  max-width: 620px;
}

.field { display: grid; gap: 6px; }

.field label { font-weight: 600; font-size: 15px; }

.field .hint { font-size: 14px; color: var(--ink-faint); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 16px;               /* < 16px làm Safari trên iPhone tự phóng to trang khi bấm vào ô */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
}

.field textarea { min-height: 170px; resize: vertical; line-height: 1.6; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 1px;
  border-color: var(--brand-500);
}

/* Ô bẫy mật: ẩn khỏi người thật, nhưng vẫn nằm trong HTML để bot điền vào.
   `display: none` là cách nhiều bot nhận ra và bỏ qua, nên đẩy ra ngoài khung
   nhìn thay vì ẩn hẳn. `aria-hidden` + `tabindex=-1` giữ cho người dùng bàn
   phím và trình đọc màn hình không bao giờ chạm tới nó. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 15px;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- Bảng thông tin liên hệ ---------- */

.infolist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.infolist li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.infolist b { display: block; font-size: 15px; margin-bottom: 3px; }
.infolist span { font-size: 15px; color: var(--ink-faint); }

/* ---------- Trang kết quả gửi ---------- */

.result { text-align: center; padding: 70px 0 80px; }
.result .wrap { max-width: 620px; }
.result .ico { font-size: 54px; line-height: 1; margin-bottom: 18px; }
.result h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 14px; }
.result p { color: var(--ink-soft); }
.result .cta-row { justify-content: center; margin-top: 26px; }