/* ════════════════════════════════════════════════════════════════════
   thanh-hep.css · Thanh đầu trang trên màn hẹp
   ngày 30 tháng 8 năm 2026

   VÌ SAO CÓ TỆP NÀY. Phần lớn trang của HUB nạp js/nav-mobile.js, và
   tệp ấy tự chèn quy tắc thu gọn thanh đầu trang theo phép đo thật.
   Nhưng mười một trang không nạp nó, vì chúng không có thanh điều
   hướng nav.main nên cái nút ba gạch của tệp kia sẽ mở ra một ngăn
   kéo rỗng.

   Hậu quả đo được trên Chromium ở bề ngang 380 điểm ảnh: thanh đầu
   trang của phan-mem-solatic.html tràn 189 điểm ảnh và nút "Mở
   Solatic" nằm ngoài màn hình. Thanh không cuộn ngang, nên nút ấy
   KHÔNG có cách nào chạm tới. Trên chính trang giới thiệu phần mềm,
   lời mời dùng phần mềm là thứ biến mất đầu tiên. tang-mun.html tràn
   169 điểm ảnh theo đúng kiểu ấy.

   CÁCH SỬA. Không giấu nút nào. Dưới 860 điểm ảnh thì bỏ phần chữ
   của khối nhận diện sản phẩm (giữ biểu tượng, đúng bậc một của
   nav-mobile.js), rồi cho thanh xuống dòng thay vì ép một dòng. Mất
   một dòng chiều cao, đổi lại mọi nút đều bấm được.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* Bậc một: bỏ chữ, giữ biểu tượng nhận diện sản phẩm. */
  .bar-in .sl-prod-tx { display: none !important; }
  .bar-in .sl-div     { display: none !important; }

  /* Bậc hai: cho xuống dòng. height cố định 68px phải nhả ra, nếu
     không thì dòng thứ hai chồng lên phần nội dung phía dưới. */
  .bar-in {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    row-gap: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
    align-items: center;
  }

  /* margin-left:auto gắn thẳng trong thẻ đẩy nút đầu tiên sang phải,
     nên khi xuống dòng nó tự tách hàng. Giữ nguyên hành vi ấy nhưng
     hạ cỡ nút cho hai nút nằm vừa một dòng. */
  .bar-in .btn {
    font-size: 13px;
    padding: 8px 13px;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  /* Rất hẹp thì bỏ nốt biểu tượng sản phẩm; thương hiệu SocialLife ở
     bên trái đã đủ nói người dùng đang ở đâu. */
  .bar-in .sl-prod { display: none !important; }
  .bar-in .btn { font-size: 12.5px; padding: 7px 11px; }
}