/* Sayfully trang chủ trên điện thoại: hero gọn để thấy Long ngay màn đầu, dải số liệu dễ đọc,
   công cụ hai cột, bước học nằm ngang, khoảng cách khối ngắn hơn. Nạp sau home.css và home-motion.css. */
@media (max-width: 760px) {
  :root { --header-h: 60px; }
  .site-header .wrap { height: var(--header-h); }
  .brand { font-size: 19px; }
  .brand img { width: 32px; height: 32px; border-radius: 10px; }
  .rider { display: none; }

  /* hero: chữ gọn lại, hai nút cùng bề rộng, Long to hơn và hiện ngay dưới nút */
  .hero .wrap { padding-top: calc(var(--header-h) + 18px); }
  .status { font-size: 13px; padding: 6px 12px 6px 9px; }
  .hero h1 { margin: 14px 0 26px; font-size: clamp(38px, 11.2vw, 48px); }
  .hero .lead { font-size: 16px; line-height: 1.55; max-width: 24em; }
  .ctas { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 330px; margin: 22px auto 0; }
  .ctas .glow-wrap, .ctas .btn { width: 100%; }
  .btn-play, .btn-glass { min-height: 56px; }
  .hero .access-note { display: none; }
  .hero-bg { height: 470px; margin-top: 0; }
  .long { left: 57%; width: 25%; top: 12%; }
  .fc-score { display: none !important; }
  /* Khung tranh rộng 470×16/9 ≈ 836px, lệch trái 50vw − 551px; hai thẻ neo cách mép màn hình 14px ở mọi khổ. */
  .fc-chat { left: calc(565px - 50vw); top: 4%; width: 160px; }
  .fc-streak { left: auto; right: calc(298px - 50vw); top: 77%; }
  .bubble { padding: 10px 12px; }
  .bubble p { font-size: 14px; min-height: 2.7em; }
  .chip { font-size: 14px; padding: 8px 13px 8px 10px; }
  .chip .flame { font-size: 19px; }

  /* dải số liệu */
  .ribbon { margin-top: -40px; }
  .ribbon div { padding: 14px 16px; }
  .ribbon b { font-size: 24px; }
  .ribbon span { display: block; font-size: 13px; line-height: 1.35; }

  /* khoảng cách và cỡ tiêu đề các khối */
  section.block { padding: 64px 0; }
  .section-head { margin-bottom: 34px; }
  .section-head h2 { font-size: clamp(30px, 8.8vw, 38px); }
  .section-head p { font-size: 16px; }
  .show-item h3 { font-size: 28px; }
  .show-item > p { font-size: 16px; }
  .show-pic { height: 400px; border-radius: 24px; }
  .show-pic .phone { width: 176px; }

  /* công cụ: hai cột, biểu tượng ở trên */
  .tools { margin-top: 8px; gap: 22px; }
  .tool-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .tool { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: 15px; border-radius: 18px; }
  .tool .ic { width: 40px; height: 40px; border-radius: 12px; }
  .tool small { margin-top: 2px; font-size: 12.5px; line-height: 1.4; }

  /* bước học: số bên trái, chữ bên phải */
  .steps { gap: 12px; }
  .step { padding: 20px 18px 20px 82px; border-radius: 22px; }
  .step .num { position: absolute; left: 18px; top: 18px; margin: 0; font-size: 44px; }
  .step .min { position: static; display: inline-block; margin-bottom: 6px; padding: 3px 9px; font-size: 12px; }
  .step h3 { font-size: 18px; }
  .step p { margin-top: 4px; font-size: 15px; }

  /* trò chơi và lời mời cuối */
  .game-row { grid-auto-columns: 70%; gap: 14px; }
  .final .copy { padding-top: 56px; }
  .final .scene-box { height: 300px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 36px; }
  .tool { padding: 12px; font-size: 14px; }
  .fc-chat { width: 148px; }
}