/* Trang chủ Dino Kids (năm thứ tiếng) — lớp giao diện nhiều màu theo phong cách
   của app cho bé. Chỉ năm trang chủ nạp file này, sau style.css; mọi luật nằm
   dưới `.home` (thuộc tính của `<main class="home">`), nên không đụng trang
   blog, truyện, Kanji hay thẻ học từ dùng chung style.css.

   Bảng màu chép đúng từ `KidWorld` của app (mobile/lib/core/theme/
   kid_world.dart; cùng bảng ở assets/guide-app.css) — sửa ở đó thì đối chiếu
   lại. `--sky`/`--ground` là nền, `--acc` chỉ cho viền, vòng, chấm, số thứ tự
   (≥ 3:1 trên nền); chữ mang màu thế giới dùng `--wink` (≥ 4,5:1), đúng luật
   của app. Chữ thân bài vẫn là `--ink`/`--ink-soft` của style.css trên nền
   pastel: tương phản ≥ 8:1.

   Bố cục: mỗi khối là một «đồi» bo tròn góc trên, chồng nhẹ lên khối trước, nền
   đổi thế giới màu theo thứ tự — hai khối liền nhau không bao giờ cùng màu,
   như các màn danh sách trong app. Màu chỉ nằm ở nền, thẻ và chấm; không có
   hình nào nằm ngoài luồng nên không khối nào tràn ngang. */

.home {
  --w-forest-sky: #e8f8e4; --w-forest-ground: #cdefc2; --w-forest-acc: #00838f; --w-forest-wink: #00636c;
  --w-ocean-sky:  #e3f4fd; --w-ocean-ground:  #c3e6fa; --w-ocean-acc:  #1e88e5; --w-ocean-wink:  #135ea8;
  --w-flower-sky: #fdebf3; --w-flower-ground: #f9d2e4; --w-flower-acc: #d81b78; --w-flower-wink: #a3155a;
  --w-sun-sky:    #fff5dc; --w-sun-ground:    #ffe6a8; --w-sun-acc:    #ad5a00; --w-sun-wink:    #874600;
  --w-space-sky:  #ede9fc; --w-space-ground:  #d9d0f8; --w-space-acc:  #6a4fd8; --w-space-wink:  #5038b8;
  --w-night-sky:  #e8eeff; --w-night-ground:  #ccd8fb; --w-night-acc:  #3949ab; --w-night-wink:  #2c3a93;

  --hill: 36px;
  --pop: 0 5px 0;
}

/* Chữ tiêu đề tròn trịa như app: Safari có `ui-rounded`; nơi khác rơi về phông
   hệ thống của trang. Tiếng Nhật dùng Hiragino Maru Gothic (có sẵn trên Apple). */
.home h1, .home h2, .home h3, .home .btn, .home .badges li, .home .kicker, .home .proof b {
  font-family: ui-rounded, "SF Pro Rounded", var(--font);
}
.home:lang(ja) h1, .home:lang(ja) h2, .home:lang(ja) h3, .home:lang(ja) .btn { font-family: "Hiragino Maru Gothic ProN", var(--font); }

/* ---------- Gán thế giới màu cho từng thứ ---------- */

/* Vòng sáu màu cho các thẻ môn học: thẻ thứ n lấy màu thứ n % 6 — đúng thứ tự `KidWorld.cycle`. */
.home .subjects > :nth-child(6n+1) { --sky: var(--w-forest-sky); --ground: var(--w-forest-ground); --acc: var(--w-forest-acc); --wink: var(--w-forest-wink); }
.home .subjects > :nth-child(6n+2) { --sky: var(--w-ocean-sky);  --ground: var(--w-ocean-ground);  --acc: var(--w-ocean-acc);  --wink: var(--w-ocean-wink); }
.home .subjects > :nth-child(6n+3) { --sky: var(--w-flower-sky); --ground: var(--w-flower-ground); --acc: var(--w-flower-acc); --wink: var(--w-flower-wink); }
.home .subjects > :nth-child(6n+4) { --sky: var(--w-sun-sky);    --ground: var(--w-sun-ground);    --acc: var(--w-sun-acc);    --wink: var(--w-sun-wink); }
.home .subjects > :nth-child(6n+5) { --sky: var(--w-space-sky);  --ground: var(--w-space-ground);  --acc: var(--w-space-acc);  --wink: var(--w-space-wink); }
.home .subjects > :nth-child(6n)   { --sky: var(--w-night-sky);  --ground: var(--w-night-ground);  --acc: var(--w-night-acc);  --wink: var(--w-night-wink); }

/* ---------- Nền các khối: «đồi» chồng nhau ---------- */

.home > section {
  position: relative;
  /* Đáy dày thêm 68 px: chừa chỗ cho chú Dino của khối kế tiếp ló lên mép đồi
     mà không đè lên thẻ cuối của khối này. */
  padding: 64px 0 calc(var(--hill) + 68px);
  margin-top: calc(var(--hill) * -1);
  border: 0;
  border-radius: var(--hill) var(--hill) 0 0;
  background: linear-gradient(180deg, var(--sky, #fff) 0%, var(--ground, #fff) 100%);
}
.home > section.tint { background: linear-gradient(180deg, var(--sky, #fff) 0%, var(--ground, #fff) 100%); border: 0; }

/* Khối đầu sau hero là dải số liệu: trắng, kéo lên đè mép hero. */
.home > section:nth-of-type(1)  { --sky: #fff; --ground: #fff; padding: 48px 0 calc(var(--hill) + 68px); }
.home > section:nth-of-type(2)  { --sky: var(--w-sun-sky);    --ground: var(--w-sun-ground);    --acc: var(--w-sun-acc);    --wink: var(--w-sun-wink); }
.home > section:nth-of-type(3)  { --sky: var(--w-space-sky);  --ground: var(--w-space-ground);  --acc: var(--w-space-acc);  --wink: var(--w-space-wink); }
.home > section:nth-of-type(4)  { --sky: var(--w-forest-sky); --ground: var(--w-forest-ground); --acc: var(--w-forest-acc); --wink: var(--w-forest-wink); }
.home > section:nth-of-type(5)  { --sky: var(--w-ocean-sky);  --ground: var(--w-ocean-ground);  --acc: var(--w-ocean-acc);  --wink: var(--w-ocean-wink); }
.home > section:nth-of-type(6)  { --sky: #fffaf0; --ground: #fff1d6; --acc: var(--w-flower-acc); --wink: var(--w-flower-wink); }
.home > section:nth-of-type(7)  { --sky: var(--w-flower-sky); --ground: var(--w-flower-ground); --acc: var(--w-flower-acc); --wink: var(--w-flower-wink); }
.home > section:nth-of-type(8)  { --sky: var(--w-forest-sky); --ground: var(--w-forest-ground); --acc: var(--w-forest-acc); --wink: var(--w-forest-wink); }
.home > section:nth-of-type(9)  { --sky: var(--w-sun-sky);    --ground: var(--w-sun-ground);    --acc: var(--w-sun-acc);    --wink: var(--w-sun-wink); }
.home > section:nth-of-type(10) { --sky: var(--w-night-sky);  --ground: var(--w-night-ground);  --acc: var(--w-night-acc);  --wink: var(--w-night-wink); }
.home > section:nth-of-type(11) { --sky: #fffaf0; --ground: #fff1d6; --acc: var(--w-ocean-acc); --wink: var(--w-ocean-wink); }
.home > section:nth-of-type(12) { --sky: var(--w-space-sky);  --ground: var(--w-space-ground);  --acc: var(--w-space-acc);  --wink: var(--w-space-wink); }

.home h2 { font-weight: 800; color: var(--ink); }
.home h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--acc, var(--brand-500));
}
.home .final h2::after { margin-inline: auto; }
.home .section-lede, .home .mission-lead { color: var(--ink-soft); }

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

.home .hero {
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 52px 0 84px;
  background:
    radial-gradient(circle at 88% 12%, #ffe6a8 0 90px, transparent 91px),
    radial-gradient(circle at -1% 96%, #f9d2e4 0 80px, transparent 81px),
    radial-gradient(circle at 52% 104%, #cdefc2 0 110px, transparent 111px),
    linear-gradient(168deg, #d3ebff 0%, #eaf6ff 55%, #fff8ec 100%);
}

.home .kicker {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--w-flower-wink);
  border: 2px solid var(--w-flower-ground);
  font-weight: 700;
}

.home .hero h1 { font-weight: 800; color: #13203b; }

.home .hero .lede { color: #34425c; }
/* Đoạn thứ hai của hero («miễn phí theo nghĩa đủ») lùi một bậc: ý chính đã nằm
   ở các viên huy hiệu ngay dưới, đoạn này chỉ giải thích thêm. */
.home .hero .lede + .lede { font-size: 16px; color: var(--ink-soft); }

/* Huy hiệu mỗi viên một màu. */
.home .badges { gap: 10px; }
.home .badges li {
  font-size: 14px;
  font-weight: 700;
  border: 0;
  padding: 7px 15px;
  color: var(--wink);
  background: var(--sky);
  box-shadow: inset 0 0 0 2px var(--ground);
}
.home .badges li:nth-child(6n+1) { --sky: var(--w-forest-sky); --ground: var(--w-forest-ground); --wink: var(--w-forest-wink); }
.home .badges li:nth-child(6n+2) { --sky: var(--w-ocean-sky);  --ground: var(--w-ocean-ground);  --wink: var(--w-ocean-wink); }
.home .badges li:nth-child(6n+3) { --sky: var(--w-flower-sky); --ground: var(--w-flower-ground); --wink: var(--w-flower-wink); }
.home .badges li:nth-child(6n+4) { --sky: var(--w-sun-sky);    --ground: var(--w-sun-ground);    --wink: var(--w-sun-wink); }
.home .badges li:nth-child(6n+5) { --sky: var(--w-space-sky);  --ground: var(--w-space-ground);  --wink: var(--w-space-wink); }

.home .trustline { color: var(--ink-soft); }

/* Ảnh hero: khung trắng dày bo tròn, nghiêng nhẹ trên màn rộng, bóng màu. */
.home .hero-shot img {
  border: 8px solid #fff;
  border-radius: 30px;
  box-shadow: 0 6px 0 #b9d8f7, 0 26px 50px rgba(44, 107, 216, 0.22);
}
@media (min-width: 861px) {
  .home .hero > .wrap > .hero-shot, .home .hero-grid > .hero-shot { transform: rotate(2deg); }
}

/* ---------- Nút: nổi khối, bấm lún xuống ---------- */

.home .btn {
  min-height: 56px;
  font-weight: 800;
  border: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.home .btn-primary { background: #2c6bd8; box-shadow: var(--pop) #1b4aa6; }
.home .btn-primary:hover { background: #3d8bfd; }
.home .btn-play { background: #17233a; box-shadow: var(--pop) #05080f; }
.home .btn-play:hover { background: #24334f; }
.home .btn-ghost { background: #fff; color: var(--brand-600); box-shadow: var(--pop) #c9dcf6, inset 0 0 0 2px #c9dcf6; }
.home .btn-ghost:hover { background: #fff; color: var(--brand-500); }
.home .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

/* ---------- Dải số liệu ---------- */

.home .proof { gap: 16px; }
.home .proof li {
  border: 0;
  border-radius: 24px;
  padding: 20px 16px;
  background: linear-gradient(160deg, var(--sky), var(--ground));
  box-shadow: 0 5px 0 var(--ground);
}
.home .proof b { color: var(--wink); font-size: 32px; font-weight: 800; }
.home .proof span { color: var(--ink-soft); font-size: 14.5px; }
.home .proof li:nth-child(1) { --sky: var(--w-forest-sky); --ground: var(--w-forest-ground); --wink: var(--w-forest-wink); }
.home .proof li:nth-child(2) { --sky: var(--w-flower-sky); --ground: var(--w-flower-ground); --wink: var(--w-flower-wink); }
.home .proof li:nth-child(3) { --sky: var(--w-sun-sky);    --ground: var(--w-sun-ground);    --wink: var(--w-sun-wink); }
.home .proof li:nth-child(4) { --sky: var(--w-space-sky);  --ground: var(--w-space-ground);  --wink: var(--w-space-wink); }

/* ---------- Thẻ: ba trụ cột, các bước, ô «không có gì» ---------- */

.home .pillars,
.home .how,
.home .nolist { gap: 18px; }

.home .pillars > div,
.home .how > div,
.home .nolist > div {
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 var(--ground), 0 14px 30px rgba(23, 35, 58, 0.06);
}

.home .pillars > div { padding: 26px 24px; border-top: 8px solid var(--acc); }
.home .pillars > div:nth-child(1) { --acc: var(--w-flower-acc); --ground: var(--w-flower-ground); }
.home .pillars > div:nth-child(2) { --acc: var(--w-ocean-acc);  --ground: var(--w-ocean-ground); }
.home .pillars > div:nth-child(3) { --acc: var(--w-forest-acc); --ground: var(--w-forest-ground); }

.home .how > div { padding: 24px; }
.home .how > div::before { background: var(--acc); width: 38px; height: 38px; font-size: 18px; font-weight: 800; box-shadow: 0 3px 0 var(--ground); }
.home .how > div:nth-child(1) { --acc: var(--w-ocean-acc);  --ground: var(--w-ocean-ground); }
.home .how > div:nth-child(2) { --acc: var(--w-flower-acc); --ground: var(--w-flower-ground); }
.home .how > div:nth-child(3) { --acc: var(--w-space-acc);  --ground: var(--w-space-ground); }
.home .how > div:nth-child(4) { --acc: var(--w-forest-acc); --ground: var(--w-forest-ground); }

.home .nolist { grid-template-columns: repeat(4, 1fr); }
.home .nolist > div { padding: 20px 20px 18px; border-left: 0; position: relative; padding-top: 34px; }
.home .nolist > div::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 20px;
  width: 36px;
  height: 8px;
  border-radius: 999px;
  background: var(--acc);
}
.home .nolist > div:nth-child(6n+1) { --acc: var(--w-forest-acc); --ground: var(--w-forest-ground); }
.home .nolist > div:nth-child(6n+2) { --acc: var(--w-ocean-acc);  --ground: var(--w-ocean-ground); }
.home .nolist > div:nth-child(6n+3) { --acc: var(--w-flower-acc); --ground: var(--w-flower-ground); }
.home .nolist > div:nth-child(6n+4) { --acc: var(--w-sun-acc);    --ground: var(--w-sun-ground); }
.home .nolist > div:nth-child(6n+5) { --acc: var(--w-space-acc);  --ground: var(--w-space-ground); }
.home .nolist > div:nth-child(6n)   { --acc: var(--w-night-acc);  --ground: var(--w-night-ground); }

@media (max-width: 1000px) { .home .nolist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .home .nolist { grid-template-columns: 1fr; } }

/* ---------- Khối nổi bật (Bố mẹ kể chuyện, Giọng nhà mình) ---------- */

.home .steps li { margin-bottom: 12px; }
.home .steps li::before {
  background: var(--acc);
  width: 30px;
  height: 30px;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--ground);
}
.home .steps li:nth-child(2n)::before { background: var(--w-flower-acc); }
.home .steps li:nth-child(3n)::before { background: var(--w-sun-acc); }
.home .steps li:nth-child(5n)::before { background: var(--w-space-acc); }

/* ---------- Bé học được những gì: mỗi môn một thẻ màu ---------- */

.home .subjects { gap: 22px; }

.home .subject,
.home .subject:nth-child(even) {
  padding: 30px;
  border: 0;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--sky), var(--ground));
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.06);
}
.home .subject:first-child { padding-top: 30px; }

.home .subject .tag {
  background: #fff;
  color: var(--wink);
  box-shadow: inset 0 0 0 2px var(--ground);
}
.home .subject h3 { color: var(--ink); font-weight: 800; }
.home .subject .lead { color: var(--ink-soft); }
.home .points li::before { background: var(--acc); }
.home .chip {
  background: #fff;
  color: var(--wink);
  border: 0;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--ground);
}

.home .subject-shot img,
.home .shots img,
.home .trio img,
.home .feature .hero-shot img {
  border: 6px solid #fff;
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--ground, #d6e4f7), 0 16px 32px rgba(23, 35, 58, 0.12);
}

/* Nút liên kết dạng ghost trong thẻ môn: cùng chất với nút chính nhưng nhẹ. */
.home .subject .btn-ghost,
.home .feature .btn-ghost,
.home .section-more .btn-ghost { min-height: 48px; font-size: 16px; }

@media (max-width: 860px) {
  .home .subject,
  .home .subject:nth-child(even) { padding: 22px 18px; }
}

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

.home .shots { gap: 28px 24px; }
.home .shots figcaption,
.home .trio figcaption { color: var(--ink-soft); font-weight: 600; }
.home .shots figure:nth-child(6n+1) { --ground: var(--w-forest-ground); }
.home .shots figure:nth-child(6n+2) { --ground: var(--w-ocean-ground); }
.home .shots figure:nth-child(6n+3) { --ground: var(--w-flower-ground); }
.home .shots figure:nth-child(6n+4) { --ground: var(--w-sun-ground); }
.home .shots figure:nth-child(6n+5) { --ground: var(--w-space-ground); }
.home .shots figure:nth-child(6n)   { --ground: var(--w-night-ground); }

/* ---------- Câu hỏi thường gặp ---------- */

.home .faq { gap: 12px; }
.home .faq details {
  border: 0;
  border-radius: 20px;
  padding: 2px 22px;
  background: #fff;
  box-shadow: 0 4px 0 var(--ground), 0 10px 22px rgba(23, 35, 58, 0.05);
}
.home .faq details:nth-child(6n+1) { --acc: var(--w-forest-acc); --ground: var(--w-forest-ground); }
.home .faq details:nth-child(6n+2) { --acc: var(--w-ocean-acc);  --ground: var(--w-ocean-ground); }
.home .faq details:nth-child(6n+3) { --acc: var(--w-flower-acc); --ground: var(--w-flower-ground); }
.home .faq details:nth-child(6n+4) { --acc: var(--w-sun-acc);    --ground: var(--w-sun-ground); }
.home .faq details:nth-child(6n+5) { --acc: var(--w-space-acc);  --ground: var(--w-space-ground); }
.home .faq details:nth-child(6n)   { --acc: var(--w-night-acc);  --ground: var(--w-night-ground); }
.home .faq summary { font-weight: 700; }
.home .faq summary::after {
  right: -4px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
}

/* ---------- Khối «bài viết mới» do bộ dựng bài viết chèn vào ---------- */

.home .story-list { gap: 14px; }

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

.home .final {
  padding: 72px 0 80px;
  background:
    radial-gradient(circle at 10% 20%, #ffe6a8 0 60px, transparent 61px),
    radial-gradient(circle at 92% 78%, #f9d2e4 0 80px, transparent 81px),
    radial-gradient(circle at 80% 8%, #cdefc2 0 44px, transparent 45px),
    linear-gradient(160deg, #cfe8ff 0%, #eaf6ff 60%, #fff4e0 100%);
}
.home .final p { color: #34425c; }

/* ---------- Chú Dino và chuyển động ---------- */
/* Hình Dino là icon thương hiệu đã duyệt (`mascot.*`, nạp bằng
   builder/build_site_icons.py từ thẻ `<span class="dino">mascot.xxx</span>`),
   không vẽ thêm. Mỗi khối lớn có một chú ló lên mép «đồi» ở góc phải; tư thế
   chọn theo nội dung khối: kể chuyện trước giờ ngủ → buồn ngủ, bố mẹ thu giọng →
   cầm mic, Mỹ thuật → cầm cọ, «Ba phút để bắt đầu» → quả trứng sắp nở… Trang
   trí thuần tuý: aria-hidden, không nhận chạm (không chắn nút), không chiếm chỗ
   trong luồng nên không đẩy chữ và không gây cuộn ngang (mọi chuyển động nằm
   trong bề ngang màn hình). */

.home .dino {
  position: absolute;
  z-index: 2;
  top: -66px;
  right: max(16px, calc((100% - var(--wrap)) / 2 + 20px));
  width: 112px;
  pointer-events: none;
}
.home .dino img.ic {
  display: block;
  width: 100%;
  height: auto;
  /* Không thừa kế khung trắng bo tròn của ảnh chụp màn hình (`.hero-shot img`). */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  filter: drop-shadow(0 8px 8px rgba(23, 35, 58, 0.16));
}

/* Hero: Dino vẫy tay cạnh góc dưới ảnh iPad. */
.home .hero-shot { position: relative; }
.home .hero-shot .dino {
  top: auto;
  right: auto;
  left: -46px;
  bottom: -30px;
  width: 132px;
  transform: rotate(-2deg);
}

@media (max-width: 860px) {
  .home .dino { width: 88px; top: -52px; }
  .home .hero-shot .dino { left: -8px; bottom: -22px; width: 104px; }
}
@media (max-width: 520px) {
  .home .dino { width: 76px; top: -46px; right: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes dino-bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes dino-wave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
  @keyframes dino-wobble { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
  @keyframes dino-hop {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    12%      { transform: translateY(0) scale(1.06, 0.92); }
    40%      { transform: translateY(-22px) scale(0.96, 1.05); }
    62%      { transform: translateY(0) scale(1.05, 0.94); }
  }
  /* Dino đi dọc mép đồi từ trái sang phải rồi mờ đi và xuất hiện lại ở đầu;
     `--run` là quãng đường, không vượt bề ngang màn hình nên không gây cuộn
     ngang. Đi một chiều để Dino luôn quay mặt về phía đi. */
  @keyframes dino-walk {
    0%   { transform: translateX(0); opacity: 0; }
    6%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(var(--run)); opacity: 0; }
  }
  @keyframes dino-step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

  .home .dino img.ic { animation: dino-bob 3.4s ease-in-out infinite; }
  .home .dino img.ic { transform-origin: 50% 100%; }
  .home > section:nth-of-type(3) > .dino img.ic { animation-duration: 4.4s; animation-delay: -1.2s; }
  .home > section:nth-of-type(4) > .dino img.ic { animation-duration: 3s; animation-delay: -0.6s; }
  .home > section:nth-of-type(6) > .dino img.ic { animation-duration: 3.8s; animation-delay: -2s; }
  .home > section:nth-of-type(9) > .dino img.ic { animation-duration: 4.2s; animation-delay: -1.6s; }
  .home > section:nth-of-type(10) > .dino img.ic { animation-duration: 3.6s; animation-delay: -0.9s; }

  .home .hero-shot .dino img.ic { animation: dino-wave 2.2s ease-in-out infinite; }
  .home > section:nth-of-type(7) > .dino img.ic { animation: dino-wobble 1.6s ease-in-out infinite; }
  .home > section:nth-of-type(11) > .dino img.ic { animation: dino-wobble 4s ease-in-out infinite; }
  .home .final > .dino img.ic { animation: dino-hop 2.6s ease-in-out infinite; }

  .home > section:nth-of-type(8) > .dino { --run: min(calc(100vw - 150px), 900px); right: auto; left: 16px; animation: dino-walk 22s linear infinite; }
  .home > section:nth-of-type(8) > .dino img.ic { animation: dino-step 0.5s ease-in-out infinite; }

  /* Nút tải về chính nhún nhẹ một lần mỗi vài giây để mắt tìm thấy. */
  @keyframes btn-nudge {
    0%, 86%, 100% { transform: none; }
    90% { transform: translateY(-5px); }
    94% { transform: translateY(0); }
    97% { transform: translateY(-2px); }
  }
  .home .hero .btn-primary { animation: btn-nudge 5.5s ease-in-out 2.5s infinite; }
  .home .hero .btn-primary:active { animation: none; }

  /* Huy hiệu ở hero nổi lên lần lượt khi mở trang. */
  @keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }
  .home .badges li { animation: pop-in 0.5s ease-out backwards; }
  .home .badges li:nth-child(2) { animation-delay: 0.08s; }
  .home .badges li:nth-child(3) { animation-delay: 0.16s; }
  .home .badges li:nth-child(4) { animation-delay: 0.24s; }
  .home .badges li:nth-child(5) { animation-delay: 0.32s; }
  .home .badges li:hover { transform: translateY(-2px) rotate(-1.5deg); }
  .home .badges li { transition: transform 0.15s ease; }

}

/* Thẻ nổi lên khi cuộn tới: trình duyệt có `animation-timeline: view()`
   (Chrome, Safari 26) mới có, nơi khác thẻ đứng yên — không hỏng gì. `backwards`
   chứ không `both`: chạy xong trả quyền `transform` lại cho hiệu ứng hover. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: none; } }
    .home .proof li,
    .home .pillars > div,
    .home .how > div,
    .home .nolist > div,
    .home .subject,
    .home .faq details,
    .home .shots figure {
      animation: rise linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

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

footer { position: relative; }

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

@media (max-width: 860px) {
  .home { --hill: 28px; }
  .home > section { padding: 52px 0 calc(var(--hill) + 56px); }
  .home .hero { padding: 40px 0 68px; }
  .home .hero .hero-grid > .hero-shot { transform: none; }
  .home .proof { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .home { --hill: 22px; }
  .home .hero-shot img { border-width: 6px; border-radius: 24px; }
  .home .proof b { font-size: 28px; }
}

/* Chạm lên thẻ: chỉ ở thiết bị có con trỏ, và tôn trọng «giảm chuyển động». */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home .pillars > div, .home .how > div, .home .nolist > div, .home .proof li {
    transition: transform 0.15s ease;
  }
  .home .pillars > div:hover, .home .how > div:hover, .home .nolist > div:hover, .home .proof li:hover {
    transform: translateY(-3px);
  }
}