/* ===== Sửa hiển thị trên điện thoại (áp dụng cho mọi người xem) ===== */

/* Không cho trang trượt ngang */
html, body { max-width: 100%; overflow-x: hidden; }
img, .thumb img { max-width: 100%; }

@media (max-width: 760px) {

  /* Đầu trang: cho phép xuống dòng, ô tìm kiếm nằm hàng riêng */
  .site-header .wrap {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand b { font-size: 17px; line-height: 1.15; }
  .brand .logo { font-size: 24px; }

  .header-cta { margin-left: auto; gap: 6px; flex: 0 0 auto; }
  .header-cta a { padding: 7px 11px; font-size: 12.5px; }

  .search { flex: 1 1 100%; margin-left: 0; }
  .search input { flex: 1 1 auto; width: auto; min-width: 0; }
  .search button { flex: 0 0 auto; }

  /* Bỏ dính đầu trang để màn hình điện thoại thoáng hơn */
  .site-header { position: static; }
  .topics { position: static; }

  /* Chip "Đã lưu": trên điện thoại chỉ còn icon + số cho gọn */
  .saved-link .lbl { display: none; }
  .saved-link { padding: 7px 10px; gap: .3rem; }

  /* Hai thẻ + ô thêm báo trên điện thoại */
  .saved-head { flex-wrap: wrap; row-gap: .5rem; }
  .tabs { width: 100%; }
  .tab { flex: 1 1 auto; justify-content: center; font-size: .88rem; padding: .5rem .7rem; }
  .add-site input[name="url"], .add-site input[name="name"] { flex: 1 1 100%; }
  .add-site button { flex: 1 1 100%; }

  /* Nút bấm to hơn cho vừa ngón tay */
  .btn-save, .btn-del { padding: .55rem .85rem; font-size: .82rem; }
  .card .card-actions { margin-top: .5rem; }
}

/* Máy nhỏ hơn nữa */
@media (max-width: 400px) {
  .brand b { font-size: 16px; }
  .header-cta a { padding: 6px 9px; font-size: 12px; }
  .saved-head { flex-wrap: wrap; }
  .unlock-box { margin: 1.5rem auto; padding: 1.2rem; }
  .unlock-box form { flex-direction: column; }
}