/* ============================================================================
   THÍCH NGHI MỌI MÀN HÌNH — lớp vá nạp CUỐI CÙNG (sau mọi css khác)
   Luật Thầy chốt 12/09/2026: điện thoại · iPad · laptop · PC đều ĐỦ CHỨC NĂNG,
   chữ/hình/nút tự tăng giảm theo khổ, không tràn ngang, không hụt tai thỏ.
   Bản đầy đủ + máy soi: ~/.claude/skills/_shared/thich_nghi/
   ĐỔI CSS RIÊNG CỦA TRANG THÌ SỬA FILE KIA, file này chỉ là lưới an toàn.
   ========================================================================== */

:root{
  --tn-fs-xs:   clamp(12px, 0.35vw + 10.6px, 15px);
  --tn-fs-sm:   clamp(14px, 0.45vw + 12.3px, 17px);
  --tn-fs-body: clamp(16px, 0.60vw + 13.7px, 21px);
  --tn-fs-h1:   clamp(24px, 2.20vw + 17px,  44px);
  --tn-fs-h2:   clamp(20px, 1.50vw + 15.5px, 34px);
  --tn-fs-h3:   clamp(18px, 0.95vw + 14.5px, 26px);
  --tn-fs-math: clamp(17px, 0.70vw + 14.4px, 24px);
  --tn-tap: 44px;
}

/* --- 1. CẤM TRÀN NGANG ---------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
html, body{ max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe, picture{ max-width: 100%; }
img, video{ height: auto; }
pre, code{ white-space: pre-wrap; word-break: break-word; }

/* --- 2. TAI THỎ / THANH ĐIỀU HƯỚNG --------------------------------------- */
body{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body > footer, .thanh-duoi, .tabbar, .bottom-bar{
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}
header, .topbar, .thanh-tren{ padding-top: max(env(safe-area-inset-top), 0px); }

/* --- 3. CHIỀU CAO MÀN THẬT ----------------------------------------------- */
@supports (height: 100dvh){
  .man-full, .full-screen, .modal-full{ min-height: 100dvh; }
}

/* --- 4. CHẠM TAY & Ô NHẬP (chỉ áp khi màn hẹp, khỏi phá bố cục PC) -------- */
@media (max-width: 1024px){
  /* KHÔNG đặt display ở đây — sẽ đè mất các rule ẩn/hiện của trang */
  button, .btn, .web-btn, [role="button"], input[type="submit"], input[type="button"], .nut{
    min-height: var(--tn-tap);
    touch-action: manipulation;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea{
    font-size: max(16px, 1em);   /* <16px là iOS tự phóng trang khi gõ */
    min-height: var(--tn-tap);
    max-width: 100%;
  }
}
/* hover chỉ cho máy có chuột — điện thoại khỏi kẹt trạng thái hover */
@media (hover: none){
  *:hover{ transition: none !important; }
}

/* --- 4b. SÀN CHỮ: nhãn phụ không được bé hơn 12px ------------------------ */
small, .small, figcaption, .caption{ font-size: max(12px, 0.82em); }

/* --- 5. BẢNG & CÔNG THỨC DÀI: CUỘN TRONG KHUNG RIÊNG --------------------- */
.cuon-ngang, .table-wrap, .bang-cuon{
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.katex-display{ max-width: 100%; overflow-x: auto; overflow-y: hidden; }
@media (max-width: 767px){
  table{ max-width: 100%; }
  .katex{ font-size: 1.02em; }        /* công thức trên điện thoại vẫn to, không co nhỏ */
}

/* --- 6. LƯỚI TỰ RỤNG CỘT (dùng cho phần dựng mới) ------------------------ */
.tn-luoi{ display: grid; gap: clamp(10px, 1.2vw, 22px);
          grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.tn-hang{ display: flex; flex-wrap: wrap; gap: clamp(6px, 0.8vw, 14px); }

/* --- 7. MÀN 2K/4K: NỚI KHUNG, KHÔNG ĐỂ CHỮ DÀN HÀNG QUÁ DÀI -------------- */
@media (min-width: 1921px){
  .wrap, .container, .khung, main{ max-width: min(1440px, 82vw) !important; margin-inline: auto; }
}

/* --- 8. XOAY NGANG MÀN THẤP (iPad/điện thoại nằm) ------------------------ */
@media (orientation: landscape) and (max-height: 560px){
  header, .topbar{ position: static !important; }
}

/* --- 9. IN GIẤY ---------------------------------------------------------- */
@media print{
  html, body{ overflow: visible; }
  .khong-in, .tabbar, .thanh-duoi{ display: none !important; }
}

/* --- 10. TÔN TRỌNG NGƯỜI DÙNG ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}