/* Ý 11 – Sửa giao diện cho điện thoại, máy tính bảng và khi mở như app.
   Chỉ thêm luật mới, không sửa style.css. Đo bằng máy ảo ở 7 cỡ màn hình: 320, 375, 390, 412 (điện thoại),
   820 và 1180 (iPad dọc/ngang), 1366 (máy tính). */

/* 1) Hàng thẻ con giáp vuốt ngang: lề âm lớn hơn khoảng đệm của trang 4px nên cả trang bị kéo ngang được. */
@media (max-width: 767px) {
  .zd-grid { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
}

/* 2) Các bước đăng ký: tên bước đầu ("Tài khoản") bị cắt mất chữ đầu ở bên trái, bước cuối bị cắt bên phải. */
@media (max-width: 575px) {
  .fa-steps-nav li:first-child.is-current .t { left: 0; }
  .fa-steps-nav li:last-child.is-current .t { right: 0; }
}

/* 3) iPad và laptop (768–1399px): chữ trên thanh menu bị xuống 3–4 dòng. Cho chữ nhỏ lại, nằm một dòng dưới biểu tượng.
 *    Ý 27 thêm mục "Nhật ký" nên áp dụng tới 1399px (trước là 991px). */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .fa-bell-label { display: none; }
  .fa-nav .navbar-nav { margin-left: .5rem !important; gap: 0 !important; }
  .fa-nav .nav-link { display: flex; flex-direction: column; align-items: center; gap: .1rem; white-space: nowrap;
    font-size: .74rem; line-height: 1.15; padding: .35rem .55rem !important; }
  .fa-nav .nav-link i { font-size: 1.15rem; }
  .fa-nav .fa-brand { font-size: 1.05rem; }
  .fa-user-btn > span:not(.fa-avatar) { display: none; }   /* chỉ còn chữ cái đầu, đủ chỗ cho menu */
}

/* 3b) Laptop màn rộng (từ 1400px, ví dụ 1440, 1536): chữ menu nằm cạnh biểu tượng nhưng bị xuống 2–3 dòng.
 *     Chữ nhỏ lại một chút, bớt khoảng cách, không cho xuống dòng: cả thanh menu nằm trên một hàng. */
@media (min-width: 1400px) {
  .fa-nav .navbar-nav { margin-left: 1rem !important; gap: 0 !important; }
  .fa-nav .nav-link { white-space: nowrap; font-size: .9rem; padding: .4rem .5rem !important; }
  .fa-nav .nav-link i { margin-right: .1rem; }
  .fa-bell { padding: 0 .6rem; font-size: .9rem; white-space: nowrap; }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .fa-bell-label { display: none; }   /* Lời mời, Chờ duyệt...: chỉ còn biểu tượng (rê chuột vẫn thấy chữ) để đủ chỗ */
  .fa-user-btn > span:not(.fa-avatar) { display: none; }   /* chỉ còn chữ cái đầu như ở cỡ iPad/laptop nhỏ */
}
@media (min-width: 1600px) {
  /* Khung menu không rộng hơn 1320px dù màn to: khi admin có thêm nút báo (Chờ duyệt, Quên mật khẩu) thì cũng thu gọn như trên */
  .fa-nav:has(.fa-bell-admin) .fa-bell-label, .fa-nav:has(.fa-bell-admin) .fa-user-btn > span:not(.fa-avatar) { display: none; }
  .fa-user-btn > span:not(.fa-avatar) { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 3c) Điện thoại: mở ☰ rồi mở menu tài khoản thì thanh menu (sticky-top) cao hơn màn hình, phần dưới (Đăng xuất...)
 *     bị cắt và kéo trang không tới. Cho phần menu mở tối đa bằng màn hình và cuộn được bên trong;
 *     menu tài khoản nằm ngay trong phần cuộn đó thay vì bay ra ngoài. */
@media (max-width: 767.98px) {
  .fa-nav .navbar-collapse { max-height: calc(100vh - 56px - env(safe-area-inset-top, 0px)); overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  @supports (height: 100dvh) {
    .fa-nav .navbar-collapse { max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); }
  }
  .fa-nav .navbar-collapse .dropdown-menu { position: static !important; transform: none !important; inset: auto !important;
    margin-top: .4rem; box-shadow: none; width: 100%; }
  /* menu tài khoản đang mở: chiếm trọn một hàng (không bị ép thành cột hẹp cạnh nút Lời mời, chữ dài không bị cắt) */
  .fa-nav .navbar-collapse .d-flex:has(.dropdown-menu.show) { flex-wrap: wrap; }
  .fa-nav .navbar-collapse .dropdown:has(> .dropdown-menu.show) { flex-basis: 100%; }
}

/* 4) Bảng quản trị trên điện thoại: chữ không bị bẻ thành nhiều dòng; bảng tự vuốt ngang trong khung của nó. */
@media (max-width: 767px) {
  .table-responsive .fa-table td, .table-responsive .fa-table th { white-space: nowrap; }
  .table-responsive { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
}

/* 5) Màn hình cảm ứng: nút và ô chọn đủ lớn để bấm bằng ngón tay (khoảng 44px). */
@media (pointer: coarse) {
  .fa-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding-right: .5rem; }
  .form-check-input[type="checkbox"]:not([role="switch"]), .form-check-input[type="radio"] { width: 1.3em; height: 1.3em; margin-top: .1em; }
  .form-check-label { padding-top: .1rem; padding-bottom: .1rem; }
  .form-switch .form-check-input { width: 2.6em; height: 1.45em; margin-top: .05em; }
  .form-switch .form-check-label { padding-left: .35rem; }
  /* iPhone tự phóng to cả trang khi chạm vào ô nhập có chữ nhỏ hơn 16px; giữ tối thiểu 16px để không bị phóng to. */
  input.form-control, select.form-select, textarea.form-control { font-size: max(1rem, 16px); }
}

/* 6) Khi mở như app (từ biểu tượng trên màn hình chính) */
.fa-standalone body { -webkit-tap-highlight-color: transparent; }
.fa-standalone .fa-nav { padding-top: env(safe-area-inset-top); }
.fa-standalone .fa-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }