/* Nông Trại Khoai — hero điện thoại gọn, thanh thoát (07/10/2026)
   Chỉ có tác dụng ≤800px, nạp SAU mọi file css khác trong index.html.
   Gốc rễ "ngộp": trên điện thoại cùng lúc có 3 nút "Giữ bàn" (header · trong hero · thanh đáy), hero bị ép thấp
   nên chữ tràn khung (đầu slide bị header che, nút bị sóng cắt), chấm trang đè cạnh nút.
   Cách xử lý: mỗi màn hình chỉ giữ MỘT nút đặt bàn (thanh đáy cố định), nút trong hero chỉ còn liên kết chữ,
   đoạn mô tả gọn 3 dòng, chấm trang nằm giữa đáy, thanh đáy và chip cơ sở nhẹ lại. Không đổi HTML/JS. */
@media (max-width: 800px){

  /* 1. Bỏ hai nút đặt bàn lặp: thanh đáy luôn thấy trên điện thoại. (Muốn trả header về: xoá dòng thứ hai.) */
  .hero-cta .btn-dat-ban{ display: none; }
  header.site .btn-dat-ban{ display: none; }

  /* 2. Chữ hero: gọn, cân giữa, không tràn */
  .hero-slide{ padding-bottom: 50px; }
  /* Củ khoai nổi (#nutMan) dán mép màn hình, rộng ~46px: chừa lề ĐỐI XỨNG 52px hai bên để chữ hero không bao giờ
     chạy xuống dưới nút, dù nút đang ở mép phải (mặc định) hay khách kéo sang mép trái. Chữ vẫn cân giữa. */
  .hero-slide .noi-dung{ padding: 0 52px; }
  .hero-slide .nhan-mono{ font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
  .hero-slide h1, .hero-slide h2{ font-size: clamp(1.4rem, 6.4vw, 1.85rem); line-height: 1.18; margin-bottom: .35em; text-wrap: balance; }
  .hero-slide p.mo-ta{
    font-size: .92rem; line-height: 1.55; margin: 0 auto 6px; max-width: 32em;
    color: #E4D6C3;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }

  /* 3. Nút trong hero: liên kết chữ có mũi tên, không viền, không nền */
  .hero-cta{ gap: 0; }
  .hero-cta .btn-outline{
    display: inline-block; padding: 12px 4px; border: 0; border-radius: 0; background: none;
    color: var(--den-ho-phach-nhat); font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
    text-decoration-color: rgba(var(--rgb-nhan), .6);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .65);
  }
  .hero-cta .btn-outline::after{ content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s ease; }
  .hero-cta .btn-outline:hover, .hero-cta .btn-outline:active{ background: none; color: var(--chu-nhat); }
  .hero-cta .btn-outline:active::after{ transform: translateX(3px); }

  /* 4. Chấm trang: nằm ngang giữa đáy, chấm đang chọn dài ra thành viên thuốc */
  .hero-dots{ left: 0; right: 0; bottom: 18px; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
  .hero-dots button{
    width: 7px; height: 7px; border: 0; background: rgba(246, 235, 217, .38);
    transition: width .25s ease, background .25s ease;
  }
  .hero-dots button.active{ width: 22px; border-radius: 4px; background: var(--den-ho-phach); }

  /* 5. Hai chip cơ sở dưới hero: nhẹ hơn, thấp hơn */
  .lk-hero{ padding: 2px 16px 2px; }
  .lk-hero-nhan{ margin-bottom: 8px; font-size: .68rem; letter-spacing: .12em; }
  .lk-hero-luoi{ gap: 8px; }
  .lk-chip{ min-height: 0; gap: 2px; padding: 10px 12px; border-radius: 12px; background: transparent; }
  .lk-chip-ten{ font-size: .9rem; }
  .lk-chip-gio{ font-size: .74rem; }

  /* 6. Thanh đáy: hai nút phụ thành viên thuốc mờ, nút Giữ bàn nổi duy nhất. Giữ nguyên chiều cao 48px → offset 66px của hero/body không đổi. */
  .thanh-hanh-dong{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 2fr); gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top-color: rgba(232, 194, 90, .12); }
  .thanh-hanh-dong a{ border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: .86rem; font-weight: 600; white-space: nowrap; }
  .thanh-hanh-dong .tha-datban{ background: var(--nhan); color: #fff; font-size: .95rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
}