/* ============================================================
   KHI Wellness — LỚP MÀN HÌNH NHỎ  (Dang yêu cầu 2026-07-31)
   Bản gốc dựng cho desktop 1280. File này CHỈ thêm luật cho khung hẹp,
   không sửa gì ở 1280 → bản đã duyệt giữ nguyên từng pixel.

   Ba mốc: 1024 (bảng ngang) · 900 (đổi sang menu bấm) · 640 (điện thoại)

   ⚠ Nạp SAU style-v5.css / graphics.css / motion-v1.css / hero-options.css.
   ⚠ Menu bấm gọn được gài sau chốt `html.anim`: nếu motion-v1.js chết,
     lưới an toàn gỡ `.anim` → nav quay về dạng xuống dòng, KHÔNG bao giờ mất mục.
   ============================================================ */

/* nút mở menu do JS chèn — mặc định ẨN ở mọi khổ, chỉ bật lại ở mốc 900px.
   (Không có dòng này thì nút hiện lù lù giữa thanh điều hướng ở 1280.) */
.nav-toggle { display: none; }

/* ---------- 1024px · bảng ngang ---------- */
@media (max-width: 1024px) {
  :root { --sec: 72px; --gap: 20px; }
  .shell { max-width: calc(100% - 40px); }

  /* 🐛 Ô lưới mặc định rộng tối thiểu = min-content. Thẻ <select> lấy độ rộng theo
     LỰA CHỌN DÀI NHẤT ("Chiều tối, sau khi tan làm") → đẩy cả cột phình ra ngoài
     màn, trang bị kéo ngang. Ép min-width:0 để ô lưới chịu co lại. */
  .g2 > *, .g3 > *, .stats > *, .steps > *, .offer > *, .doc > *, .person > * { min-width: 0; }
  .form, .field { min-width: 0; }
  .field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; }

  .g3, .stats, .steps,
  .steps[style] { grid-template-columns: repeat(2, 1fr) !important; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .bento .w3 { grid-column: span 2; }

  .offer { padding: 36px; grid-template-columns: 1fr; gap: 28px; }
  .dark-block { padding: 36px; }
  .card.pad-lg { padding: 28px; }

  .doc { grid-template-columns: 1fr; gap: 28px; }
  .doc nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content;
             overflow-x: auto; gap: 18px; padding-bottom: 8px; }

  .pbanner .bg { aspect-ratio: 21/9; }
  .hero-panel { width: auto; margin: -72px 16px 0; padding: 28px; }
  .person { grid-template-columns: 150px 1fr; gap: 20px; }
  .rail > * { flex: 0 0 300px; }
  .ft-in { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---------- 900px · đổi sang menu bấm ---------- */
@media (max-width: 900px) {
  /* nút mở menu do motion-v1.js chèn — desktop luôn ẩn */
  /* Ba vạch đặt TUYỆT ĐỐI quanh cùng một tâm — xếp bằng lưới thì hai vạch xoay
     không chụm đúng một điểm, dấu X ra thành dấu ">". */
  .nav-toggle {
    position: relative; display: block; flex: none;
    width: 44px; height: 44px; margin-left: auto;      /* hit-area 44px theo KryUI */
    padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
    color: var(--ink); cursor: pointer; transition: border-color var(--t);
  }
  .nav-toggle:hover { border-color: var(--sage); }
  .nav-toggle .bar {
    position: absolute; left: 11px; width: 20px; height: 1.5px; background: currentColor;
    transition: top .26s var(--ease), transform .26s var(--ease), opacity .18s var(--ease);
  }
  .nav-toggle .bar:nth-child(1) { top: 15px; }
  .nav-toggle .bar:nth-child(2) { top: 21px; }
  .nav-toggle .bar:nth-child(3) { top: 27px; }

  /* chỉ thu gọn khi lớp chuyển động ĐÃ chạy (tức là nút bấm có thật) */
  .anim .nav .item,
  .anim .nav > .btn { display: none; }
  .anim .nav { gap: 12px; padding-right: 10px; }
  .anim .nav .brand { margin-right: 0; }

  .anim .nav-wrap.open .nav { flex-wrap: wrap; height: auto; padding-bottom: 14px; row-gap: 0; }
  .anim .nav-wrap.open .nav .item,
  .anim .nav-wrap.open .nav > .btn { display: flex; }
  .anim .nav-wrap.open .nav .item { flex: 0 0 100%; padding: 13px 2px; border-top: 1px solid var(--line); }
  .anim .nav-wrap.open .nav .item::after { content: none; }
  .anim .nav-wrap.open .nav > .btn { flex: 0 0 100%; margin-top: 12px; }
  .anim .nav-wrap.open .nav-toggle .bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .anim .nav-wrap.open .nav-toggle .bar:nth-child(2) { opacity: 0; }
  .anim .nav-wrap.open .nav-toggle .bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  /* đang mở thì đừng co nav lại khi cuộn — sẽ nhảy layout */
  .anim .nav-wrap.open .nav.compact { height: auto; }

  /* JS chết → không có nút bấm: cho nav xuống dòng, vẫn bấm được mọi mục */
  html:not(.anim) .nav { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 14px 18px; }
  html:not(.anim) .nav .brand { flex: 0 0 100%; margin-right: 0; }
}

/* ---------- 640px · điện thoại ---------- */
@media (max-width: 640px) {
  :root { --sec: 56px; --gap: 16px; --r-xl: 16px; }
  body { font-size: 16px; }
  .shell { max-width: calc(100% - 32px); }
  .sec-sm { padding-block: 44px; }

  h3 { font-size: 1.18rem; }

  .g2, .g3, .stats, .steps, .bento,
  .steps[style] { grid-template-columns: 1fr !important; }
  .bento { grid-auto-rows: 200px; }
  .bento .w2, .bento .w3, .bento .h2 { grid-column: auto; grid-row: auto; }

  /* các khối vốn xếp 2 cột bằng style gắn thẳng trên thẻ */
  .shell.g2 { gap: 28px !important; }

  .hd, .hd-row { margin-bottom: 28px; }
  .hd-row { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* mở đầu D — chữ khổng lồ phải vừa màn, dấu tiếng Việt không bị cắt */
  .hero .hero-d { padding: 24px 0 4px; }
  .hero-d .big { font-size: clamp(2.6rem, 13.5vw, 4.4rem); letter-spacing: -.035em; line-height: 1.1; }
  /* headline dài (01/08): trên khổ hẹp chữ đã xuống 2 dòng/câu — ảnh lồng chữ
     wrap thành dòng lẻ trông rời rạc → ẩn ảnh, giữ 4 dòng chữ cân giữa. */
  .hero .hero-d .word-pic { display: none; }
  .hero-d .sub { margin-top: 20px; font-size: .98rem; }
  .hero-d .acts { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-d .acts .btn { width: 100%; }
  .hero-d .acts .lnk { justify-content: center; }
  .hero-d .strip { grid-template-columns: repeat(2, 1fr); }

  /* banner trang phụ — ảnh 32/9 quá dẹt trên điện thoại */
  .pbanner .bg { aspect-ratio: 4/3; }
  .pbanner .veil { background: linear-gradient(180deg, rgba(30,34,26,.30) 0%, rgba(30,34,26,.78) 62%, rgba(30,34,26,.88) 100%); }
  .pbanner .pb-in { justify-content: flex-end; padding: 24px 20px 26px; }
  .pbanner p { font-size: .95rem; }
  .pbanner.dark .pb-in { min-height: 0; padding-block: 32px; }

  .hero-act { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-act .btn { width: 100%; }
  .hero-act .lnk { justify-content: center; }

  /* bảng gói — 5 cột đổi thành thẻ xếp dọc */
  .pk { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 18px; align-items: start; }
  .pk .name { grid-column: 1; }
  .pk .num { grid-column: 2; text-align: right; font-size: .92rem; }
  .pk .money { grid-column: 1 / -1; margin-top: 6px; display: flex; align-items: baseline; gap: 10px; }
  .pk .money s { display: inline; }
  .pk .gift { grid-column: 1 / -1; }
  .pk .btn { grid-column: 1 / -1; width: 100%; margin-top: 12px; }
  .pk:hover { transform: none; }

  .seg { display: flex; width: 100%; overflow-x: auto; }
  .seg button { flex: 1 0 auto; white-space: nowrap; padding: 9px 14px; }

  .offer { padding: 28px 22px; }
  .offer .price b { font-size: 2.4rem; }
  .dark-block { padding: 28px 22px; }
  .card { padding: 20px; }
  .card.pad-lg { padding: 22px; }
  .slot { min-height: 148px; padding: 20px; }
  .slot.tall { min-height: 210px; }

  .person { grid-template-columns: 1fr; gap: 16px; }
  .person .ph { max-width: 200px; }

  .rail > * { flex: 0 0 76vw; }
  .marquee .track { gap: 28px; }
  .marquee span { gap: 28px; font-size: .88rem; }

  .stat .n { font-size: 2rem; }
  .video .play { width: 58px; height: 58px; }

  .ft { padding-top: 44px; }
  .ft-in { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
  .ft-bot { flex-direction: column; gap: 6px; padding-bottom: 24px; }

  /* ngón tay không có "rê chuột" — bỏ hiệu ứng nhấc thẻ cho đỡ giật */
  .card.hover:hover, .fmt:hover, .quote:hover { transform: none; }
}

/* thiết bị cảm ứng: đừng để trạng thái hover dính lại sau khi chạm */
@media (hover: none) {
  .card:hover, .chip:hover, .stat:hover, .step:hover, .slot:hover { border-color: transparent; }
  .btn:hover { transform: none; }
}

/* khối lời khách: màn hẹp chỉ cần 3 thẻ, khỏi cuộn dài (Dang góp ý 31/07) */
@media (max-width: 640px) {
  .g3.only-3 > *:nth-child(n + 4) { display: none; }
}

/* bài viết trên màn hẹp: bảng phải cuộn ngang trong khung của nó, không kéo cả trang */
@media (max-width: 640px) {
  .doc-article h2 { font-size: 1.32rem; margin-top: 34px; }
  .doc-article p { font-size: 1rem; }
  .doc-article table { display: block; overflow-x: auto; white-space: nowrap; }
}