/* V7.6 — chuẩn giao diện điện thoại (≤800px; một số mục ≤520px).
   Nạp SAU CÙNG (sau wide-layout.css và type-scale/*.css) — chỉ đổi bố cục điện thoại, máy tính không đổi.
   Nguyên tắc:
   - vùng bấm cao tối thiểu 40–44px (chuẩn Apple 44px / Google 48px), không chỉ phần chữ;
   - ô nhập chữ 16px để iPhone không tự phóng to trang khi gõ;
   - không chữ đè chữ, không hình đè nhãn, không nút bị cắt mép. */

@media (max-width:800px){

  /* ── Hero: dãy 4 nút chọn hình xếp 2×2, nút cao 40px; chú thích hình đặt phía trên, không đè ── */
  .math-stage{height:500px}
  .shape-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;left:13px;right:13px;bottom:13px}
  .shape-switch button{min-height:40px;padding:0 6px;text-align:left;white-space:nowrap}
  .stage-bottom{bottom:124px}
  .round-btn{width:40px;height:40px}
  .stage-bottom .round-btn{flex:none}
  /* công thức "T² = S¹ × S¹": cùng hàng với tên hình, sát trái nút tạm dừng (trước nằm đè dưới chú thích) */
  .math-axis.axis-two{left:auto;right:74px;bottom:152px}
  /* chữ dọc "TOPOLOGY / CONTINUITY / FORM": đặt trên cụm chú thích, không chạm nút tạm dừng */
  .stage-coordinate{bottom:192px;right:14px;letter-spacing:.6px}

  /* ── Dải dưới hero: khẩu hiệu một khối, mỗi cụm không bị bẻ giữa chừng; "Cuộn để khám phá" xuống dòng riêng ── */
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:6px}
  .hero-bottom>span{max-width:none}
  .hero-bottom .hb-phrase{white-space:nowrap}
  .hero-bottom a{max-width:none;text-align:left;white-space:nowrap;display:inline-flex;align-items:center;min-height:40px}
  .hero-actions .text-link{display:inline-flex;align-items:center;min-height:44px}

  /* ── Bản đồ khám phá: nút "Tạm dừng hình khối" không còn bị ép hẹp làm chữ tràn ra ngoài khung ── */
  .explore-footer{flex-wrap:wrap;align-items:center;row-gap:12px}
  .explore-footer>p{max-width:none;flex:1 1 220px}
  .explore-footer .sculpture-toggle,.explore-motion.sculpture-toggle{flex:none;width:auto;max-width:none;white-space:nowrap}

  /* ── Tiêu đề mục (01 / …  ·  chữ phụ bên phải): mỗi cụm một dòng, thiếu chỗ thì xuống dòng gọn ── */
  .section-index{flex-wrap:wrap;row-gap:8px}
  .section-index>span:first-child{flex:1 1 auto;min-width:0}
  /* chữ phụ bên phải (không phải biểu tượng): xuống dòng riêng, thẳng lề trái */
  .section-index>span:last-child:not(:first-child):not(:has(svg)){flex:1 1 100%;max-width:none;text-align:left}

  /* Nút "Tạm dừng hình khối" ở đầu các mục */
  .sculpture-toggle{min-height:40px;padding-left:12px;padding-right:12px}

  /* ── Thẻ tư liệu: khung hình thấp hơn, hình nằm trên nhãn (không đè "MẶT CẦU", "PHÂN BỐ GÓC VÀNG") ── */
  .math-document .card-sculpture{height:206px}
  .math-document .card-sculpture canvas{bottom:auto;height:calc(100% - 28px)}
  .math-document .card-sculpture .sculpture-fallback{height:calc(100% - 28px)}

  /* ── Bản đồ khám phá: nhãn dưới hình (vd "MÖBIUS · LIÊN TỤC KHÁM PHÁ") không bị khung hình chồng lên ── */
  .explore-art-caption{margin-top:6px}

  /* ── Phòng khám phá toán học ── */
  #golden-reset{min-height:40px}
  #phyllo-toggle{min-height:40px}
  /* Thanh trượt góc quay: trước cao 4px (khó chạm). Vùng chạm 36px, rãnh vẫn 4px, nút kéo 22px. */
  .lab-panel input[type=range]{height:36px;background:transparent;margin:4px 0}
  .lab-panel input[type=range]::-webkit-slider-runnable-track{height:4px;background:#334844}
  .lab-panel input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px}
  .lab-panel input[type=range]::-moz-range-track{height:4px;background:#334844}
  .lab-panel input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#e3ba71;border:2px solid #08212c;border-radius:50%}

  /* ── Hộp xem ảnh: nút Toàn màn hình và nút đóng đủ lớn để chạm ── */
  .media-toolbar button{min-height:40px;min-width:40px}

  /* ── Trang phụ (đối chiếu, phương án): liên kết đầu trang ── */
  .brief-header a{display:inline-flex;align-items:center;min-height:44px}

  /* ── Liên kết "Về bản đồ khám phá", "Mở video", thông tin liên hệ: vùng bấm 40–44px ── */
  .back-to-map{display:flex;align-items:center;min-height:44px;margin-top:22px}
  .video-caption{align-items:center}
  .video-caption a{display:inline-flex;align-items:center;min-height:40px;flex:none}
  .contact-details dd a{display:inline-flex;align-items:center;min-height:40px}
  .contact-details dd{margin-top:0;margin-bottom:0}
  .contact-details dl{align-items:center;row-gap:2px}

  /* ── Tọa đàm: "Xem nội dung gốc" thẳng lề với chữ của thẻ (trước bị thụt vào 24px) ── */
  .blog-card>.visual-story-link{margin-left:0;margin-right:0}

  /* ── Form liên hệ: chữ 16px (iPhone không tự phóng to khi chạm vào ô) ── */
  input:not([type=range]):not([type=checkbox]):not([type=radio]),.contact-complete textarea,textarea,select{font-size:16px}

  /* ── Chân trang: mỗi liên kết là một vùng bấm 40px ── */
  .footer-columns>div>a,.footer-columns>div>button{display:flex;align-items:center;min-height:40px;margin-top:4px;margin-bottom:4px;line-height:1.45;text-align:left}
  .social-links a,.social-links button{display:inline-flex;align-items:center;min-height:40px;margin-top:0;margin-bottom:0}
  .legal-links{row-gap:0}
  .legal-links a,.legal-links button{display:inline-flex;align-items:center;min-height:40px}
  .prototype-note a{display:inline-flex;align-items:center;min-height:40px}
  .source-download-link{display:inline-flex;align-items:center;min-height:44px}
}

@media (max-width:360px){
  /* Điện thoại nhỏ (320–360px): dải chữ trên cùng giữ một dòng, tiêu đề lớn không để chữ lẻ một dòng */
  .concept-bar{padding-left:12px;padding-right:12px;letter-spacing:.2px;white-space:nowrap;overflow:hidden}
  .hero h1{font-size:36px}
  .explore-sidebar-heading{gap:10px}
  .explore-sidebar-heading>span{letter-spacing:.04em;white-space:nowrap}
}

@media (max-width:520px){
  /* ── Đối tác: một cột, ký hiệu bên trái — thẻ đều nhau, tên đối tác đọc trọn trên 1–2 dòng ── */
  .partner-logos{grid-template-columns:1fr;gap:12px}
  .partner-logos .partner-figure:last-child{grid-column:auto}
  .partner-logos .media-open.partner-node,
  .partner-logos .partner-figure:last-child .partner-node{display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:10px;min-height:0;padding:18px 18px 16px;align-items:center}
  .partner-node .node-number{grid-column:1/-1}
  .partner-node .partner-symbol{grid-row:span 2;align-self:center;margin:0}
  .partner-node strong,.partner-logos .partner-figure:last-child strong{min-height:0;align-self:center;margin:0}
  .partner-node .node-action,.partner-logos .partner-figure:last-child .node-action{grid-column:2;margin:0;padding-top:0}
}