/* ==========================================================================
   Điện thoại: thanh điều hướng dưới cùng và chỉnh các màn hình có sẵn cho màn hình hẹp.
   Nạp trên mọi trang (templates/partials/pwa_head.html). MỌI quy tắc nằm trong truy vấn @media theo bề ngang,
   nên giao diện máy tính giữ nguyên. Kiểu riêng của các màn hình điện thoại: static/didong/trang.css.
   ========================================================================== */

/* Máy tính, máy tính bảng ngang: không có thanh dưới cùng */
@media (min-width: 601px) {
  .dd-thanh-duoi { display: none; }
}

@media (max-width: 600px) {
  /* ---------- Khung ---------- */
  .khung { grid-template-columns: minmax(0, 1fr); }
  .noi-dung { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }

  /* Thanh trên cùng gọn lại: chỉ logo, chọn công ty, năm, ảnh đại diện, nút đăng xuất dạng biểu tượng */
  .thanh-tren { gap: 6px; padding: 0 8px; }
  .thanh-tren .nut-menu { padding: 0 8px; }
  .thuong-hieu > span:not(.logo) { display: none; }
  .chon-nhanh { flex: 1 1 auto; min-width: 0; gap: 5px; }
  .chon-nhanh form { min-width: 0; flex: none; }
  .chon-nhanh form:first-child { flex: 1 1 auto; }
  .chon-nhanh select { width: 100%; max-width: 100%; height: 34px; padding: 0 2px 0 6px; font-size: 16px; text-overflow: ellipsis; }
  .chon-nhanh form + form select { width: 112px; }
  .nguoi-dung { gap: 6px; flex: none; }
  .nguoi-dung > .mo { display: none; }
  .nguoi-dung .avatar { width: 30px; height: 30px; }
  .nguoi-dung form .nut { width: 34px; height: 34px; padding: 0; font-size: 0; color: transparent; overflow: hidden;
    background: var(--giay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355666C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14'/%3E%3Cpath d='M10 16l-4-4 4-4M6 12h9'/%3E%3C/svg%3E") center / 18px no-repeat; }

  /* Menu bên trượt ra: cao vừa màn hình, không bị thanh dưới che */
  .thanh-ben { width: min(300px, 86vw); padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

  /* ---------- Ô nhập: chữ 16px để iPhone không phóng to khi chạm vào ô ---------- */
  input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], input[type=search],
  input[type=tel], input:not([type]), select, textarea { font-size: 16px; }
  .nut { min-height: 36px; }
  .nut-nho { min-height: 32px; }

  /* ---------- Tiêu đề trang, thanh lọc ---------- */
  h1 { font-size: 19px; }
  .tieu-de-trang { gap: 10px; align-items: flex-start; }
  .tieu-de-trang > div:first-child { min-width: 0; }
  .tieu-de-trang .hanh-dong, .hanh-dong.nut-nhanh { justify-content: flex-start; }
  .thanh-loc { gap: 8px; }
  .thanh-loc .truong { min-width: 0; flex: 1 1 140px; }
  .thanh-loc .truong.rong { min-width: 0; flex-basis: 100%; }

  /* ---------- Thẻ số liệu: hai cột ---------- */
  .luoi-the:has(> .chi-so) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chi-so { padding: 10px 12px; min-width: 0; }
  .chi-so .gia-tri { font-size: 17px; overflow-wrap: anywhere; }
  .the { padding: 14px 12px; }

  /* ---------- Bảng: cuộn ngang trong khung, không đẩy cả trang ---------- */
  .vung-bang { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  table.bang th, table.bang td { padding: 7px 8px; }
  table.bang-bao-cao { min-width: 680px; }
  /* Ô chữ (diễn giải, tên) không bị ép còn một từ mỗi dòng: bảng rộng ra, cuộn ngang trong khung */
  table.bang td:not(.so):not(.ma):not(.giua):not(.nho):not([colspan]) { min-width: 10em; }

  /* ---------- Thanh điều hướng dưới cùng ---------- */
  .dd-thanh-duoi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; background: var(--giay);
    border-top: 1px solid var(--vien); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(19, 32, 38, .07); }
  .dd-thanh-duoi > a, .dd-thanh-duoi > button { position: relative; flex: 1 1 0; min-width: 0; height: 58px; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mo); font: inherit;
    font-size: 11px; font-weight: 500; background: none; border: 0; cursor: pointer; text-decoration: none !important;
    -webkit-tap-highlight-color: transparent; }
  .dd-thanh-duoi svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .dd-thanh-duoi .dang-mo { color: var(--chinh); font-weight: 600; }
  .dd-thanh-duoi .dang-mo svg { stroke-width: 2.2; }
  .dd-thanh-duoi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
  .dd-dem { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--loi); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
  .dd-dang-go .dd-thanh-duoi { display: none; }
}

@media print {
  .dd-thanh-duoi { display: none !important; }
}