/* ============================================================
   css/thich-ung-moi-may.css — TỰ CÂN CHỈNH GIAO DIỆN MỌI DÒNG MÁY
   Sàn AIAUTO.COM.VN
   ------------------------------------------------------------
   VÌ SAO CÓ FILE NÀY (đã đo trên mã nguồn trước khi viết):

   1) Không file nào dùng safe-area-inset → trên iPhone có "tai thỏ"
      và máy Android có thanh điều hướng ảo, nội dung bị che mất.
   2) adm.html, adm_secure, style.css KHÔNG có điểm ngắt <=400px →
      máy nhỏ (iPhone SE 375px, Galaxy A 360px) bị tràn, chữ dồn cục.
   3) Bảng .ai-tbl (7 cột) và bảng biểu phí trong adm_secure dùng
      width:100% nhưng KHÔNG có khung cuộn → tràn ngang, người dùng
      không xem hết cột.
   4) 78 chỗ đặt font nhỏ hơn 12px → iOS tự phóng to trang khi bấm
      vào ô nhập, làm layout nhảy.
   5) 81 chỗ có vùng bấm cao 20–39px, nhỏ hơn mức 44px mà Apple và
      Google khuyến nghị → bấm trượt trên điện thoại.

   NGUYÊN TẮC: file này nạp CUỐI CÙNG, chỉ bổ sung phần còn thiếu,
   KHÔNG đổi màu sắc / phông chữ / bố cục đã thiết kế.
   ============================================================ */

/* ---------- 1. KHÔNG BAO GIỜ TRÀN NGANG ----------
   Đây là lỗi khó chịu nhất trên điện thoại: người dùng phải kéo
   ngang mới đọc được, hoặc chữ bị cắt mất. */
html {
  -webkit-text-size-adjust: 100%;   /* iOS không tự phóng chữ lệch layout */
  text-size-adjust: 100%;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;               /* chặn kéo ngang ngoài ý muốn */
}

/* Ảnh, video, khung nhúng không được rộng hơn khung cha */
img, video, iframe, canvas, svg, object, embed {
  max-width: 100%;
  height: auto;
}

/* Chuỗi dài không khoảng trắng (mã đơn, email, URL, token) tự ngắt
   thay vì đẩy cả trang giãn ra */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6,
.legal-body, .doc-table td, .ai-tbl td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- 2. AN TOÀN VÙNG TAI THỎ / THANH ĐIỀU HƯỚNG ----------
   iPhone X trở lên, Android cử chỉ: phần trên/dưới bị phần cứng che.
   Cả 3 file HTML đều đã có viewport-fit=cover hoặc tương đương,
   nhưng chưa file nào dùng safe-area-inset để bù lại. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Thanh cố định trên/dưới phải chừa đúng vùng phần cứng */
header, .header, .topbar, .navbar, .nav-top {
  padding-top: env(safe-area-inset-top);
}
footer, .footer, .bottom-bar, .tabbar, .nav-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- 3. BẢNG LUÔN CUỘN ĐƯỢC, KHÔNG CẮT CỘT ----------
   .ai-tbl có 7 cột (Khách thuê / Prefix khóa / Trạng thái / RPM /
   Hạn mức / Đã dùng / …) mà không có khung cuộn → chắc chắn tràn
   trên mọi điện thoại. Bọc bằng cách cho chính bảng cuộn. */
@media (max-width: 860px) {
  .ai-tbl,
  table[style*="width:100%"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* cuộn mượt trên iOS */
    max-width: 100%;
  }
  /* Giữ nguyên cấu trúc hàng/cột khi bảng chuyển sang display:block */
  .ai-tbl thead, .ai-tbl tbody, .ai-tbl tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .ai-tbl th, .ai-tbl td {
    white-space: nowrap;
  }
}

/* Khung cuộn có sẵn: thêm cuộn mượt cho iOS */
.cuon, .doc-table-wrap, .supply-wrap, .table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ---------- 4. Ô NHẬP KHÔNG LÀM iOS PHÓNG TO TRANG ----------
   Safari trên iPhone tự phóng to khi ô nhập có chữ nhỏ hơn 16px,
   khiến layout nhảy và người dùng phải thu lại bằng tay.
   Đây là lý do duy nhất phải ép 16px — không phải thẩm mỹ. */
input, select, textarea {
  font-size: 16px;
  max-width: 100%;
}

/* ---------- 5. VÙNG BẤM ĐỦ TO ĐỂ KHÔNG BẤM TRƯỢT ----------
   Apple HIG và Google Material đều khuyến nghị tối thiểu 44px.
   Đo được 81 chỗ đang nhỏ hơn. Chỉ nâng trên thiết bị cảm ứng,
   màn hình lớn dùng chuột giữ nguyên thiết kế gọn. */
@media (hover: none) and (pointer: coarse) {
  button, .btn, a.btn, [role="button"],
  input[type="button"], input[type="submit"], input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Liên kết trong menu cần khoảng bấm thoáng hơn */
  nav a, .menu a, .nav a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ---------- 6. MÁY NHỎ 360–400px (iPhone SE, Galaxy A dòng thấp) ----------
   3 trong 4 file không có điểm ngắt nào dưới 400px. Đây là nhóm máy
   phổ biến ở Việt Nam, bỏ qua là mất khách thật. */
@media (max-width: 400px) {
  /* Lưới nhiều cột dồn về 1 cột cho dễ đọc */
  .grid, .cards, .ai-cards, .gc-grid, .row-2, .row-3, .row-4 {
    grid-template-columns: 1fr !important;
  }
  /* Thu đệm để tận dụng chiều ngang ít ỏi */
  .container, .wrap, .wrapper, main, section {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Tiêu đề lớn tự co theo chiều ngang máy, không tràn dòng */
  h1 { font-size: clamp(20px, 6vw, 28px); }
  h2 { font-size: clamp(18px, 5vw, 24px); }
  h3 { font-size: clamp(16px, 4.5vw, 20px); }
  /* Nút trong nhóm xuống hàng thay vì bị bóp méo */
  .actions, .gc-actions, .btn-group, .toolbar {
    flex-wrap: wrap;
  }
}

/* ---------- 7. MÁY RẤT NHỎ (<=320px, iPhone SE đời 1) ---------- */
@media (max-width: 320px) {
  .container, .wrap, .wrapper, main, section {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ---------- 8. MÁY TÍNH BẢNG NGANG & MÀN HÌNH RỘNG ----------
   Trên màn 1920px trở lên, chữ chạy hết chiều ngang rất khó đọc.
   Giới hạn bề rộng vùng đọc, vẫn giữ nền tràn viền. */
@media (min-width: 1600px) {
  .container, .wrap, .wrapper {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- 9. MÀN HÌNH NGANG THẤP (điện thoại quay ngang) ----------
   Khi quay ngang, chiều cao chỉ còn ~400px. Thanh cố định chiếm hết
   màn hình nếu không giảm đệm. */
@media (max-height: 480px) and (orientation: landscape) {
  header, .header, .topbar {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .hero, .banner {
    min-height: auto;
  }
}

/* ---------- 10. IN RA GIẤY (hồ sơ pháp lý nộp Bộ) ----------
   Hồ sơ BCT phải in được. Bỏ nền tối tốn mực, bỏ nút bấm vô nghĩa
   trên giấy, hiện rõ địa chỉ liên kết để người đọc bản in tra được. */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  header, footer, nav, .btn, button, .no-print,
  .chat-widget, .floating, .back-to-top {
    display: none !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #444;
  }
  table, .doc-table {
    page-break-inside: avoid;
  }
}

/* ---------- 11. TÔN TRỌNG NGƯỜI DÙNG CẦN GIẢM HIỆU ỨNG ----------
   Người say xe, rối loạn tiền đình, hoặc máy yếu: hiệu ứng động
   gây khó chịu và làm máy giật. Hệ điều hành có sẵn tuỳ chọn này. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 12. MÀN HÌNH ĐỘ PHÂN GIẢI CAO ----------
   Viền 1px trên máy Retina bị dày gấp đôi, trông thô. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hairline, .divider {
    border-width: 0.5px;
  }
}