/* ============================================================
   Lớp giao diện cho điện thoại.
   Bản gốc chỉ có breakpoint 900px và 1000px — tức là cho máy tính bảng.
   Trên màn hình 390px, thanh điều hướng đẩy tràn cả trang sang ngang
   làm tiêu đề và thẻ số liệu bị cắt cụt.

   Để riêng một file, không trộn vào style.css, để lần sinh lại theme từ
   HTML gốc không xoá mất.
   ============================================================ */

/* Chốt chặn: không trang nào được phép cuộn ngang. */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

@media (max-width: 720px) {

  /* ---------- Thanh điều hướng ---------- */
  /* Các mục xuống hàng thay vì đẩy nhau ra khỏi màn hình. */
  #topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 14px;
    row-gap: 8px;
  }
  #topbar nav {
    order: 3;
    width: 100%;
    overflow-x: auto;              /* nhiều mục thì vuốt ngang trong chính thanh này */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
  }
  #topbar nav::-webkit-scrollbar { display: none; }
  #topbar nav button,
  #topbar nav .tb-link,
  .tb-link {
    flex: none;
    white-space: nowrap;
    font-size: 13px;
    padding: 6px 10px;
  }
  #logo { font-size: 15px; gap: 8px; }
  #logo .mark { width: 24px; height: 24px; }
  .tb-cart { margin-left: auto; font-size: 12.5px; padding: 6px 10px; }
  #topbar .cta { margin-left: 0; font-size: 12.5px; padding: 7px 12px; }

  /* ---------- Trang giới thiệu ---------- */
  .page { padding: 0 16px 48px; }
  .hero { padding: 28px 0 32px; gap: 28px; }
  h1 { font-size: 30px; line-height: 1.22; }
  .sub { font-size: 14.5px; }
  .sec { font-size: 21px; }

  /* Ba thẻ số liệu: flex:1 khiến chúng không co dưới min-content nên tràn.
     Trên điện thoại xếp dọc, mỗi thẻ một hàng. */
  .stats { flex-direction: column; margin-top: 24px; }
  .stat { padding: 13px 16px; border-bottom: 1px solid var(--hair2); }
  .stat:last-child { border-bottom: none; }

  .kits, .school-grid, .how, .levels, .circ { grid-template-columns: 1fr; }

  /* ---------- Giỏ hàng và thanh toán ---------- */
  #cart { width: 100%; }
  .ck-body { padding: 16px 16px 20px; }
  .ck-steps { padding: 12px 16px 0; gap: 4px; }
  .ck-steps span { font-size: 11px; padding: 5px 9px; }

  /* Mã QR và bảng thông tin cạnh nhau không đủ chỗ — xếp dọc. */
  #qrbox { flex-direction: column; align-items: center; gap: 14px; }
  .qrmeta { width: 100%; }
  .ordcode { font-size: 18px; }

  /* ---------- Các Studio ---------- */
  /* Cột đã xếp dọc từ breakpoint 1000px, nhưng chiều cao tự động làm
     khung mô phỏng và ô soạn thảo xẹp gần như mất hẳn. */
  #ide-wrap { gap: 12px; margin-top: 12px; }
  .col { min-height: 300px; }
  #simbox { min-height: 240px; margin: 10px; }
  #console { height: 110px; }
  #code { min-height: 220px; font-size: 13px; }

  /* ---------- Lắp ráp 3D ---------- */
  /* Bảng điều khiển vốn nổi đè lên khung 3D, chiếm gần hết màn hình điện thoại. */
  body.adman-lap-rap { height: auto; overflow: auto; }
  #panel {
    position: static;
    width: auto;
    margin: 12px;
    padding: 14px;
  }
}

/* Màn hình rất hẹp (iPhone SE và tương đương) */
@media (max-width: 380px) {
  h1 { font-size: 26px; }
  #topbar { padding: 8px 10px; }
  .page { padding: 0 12px 40px; }
}