/* Bạn bè / Hồ sơ / chọn bạn (NTYDAY 27–28.10.2026) – CSS riêng của Claude, không đụng app.css.
   Lớp riêng bb-* / nut-ten*: KHÔNG đổi các ô .chon / .chon-o / radio khác trong #hop (Xoá tài khoản, lý do báo cáo, Ai xem trạng thái…) */

/* Vùng chạm44px; hình ô chọn vẫn24px, bo8px. Label và phím Space giữ nguyên. */
#hop input.bb-chk {
  appearance: none; -webkit-appearance: none; flex: none;
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
#hop input.bb-chk::before {
  content: ""; width: 24px; height: 24px; border-radius: 8px; pointer-events: none;
  border: 1.5px solid var(--chu-nhat, #5b6472); background: var(--mat, #fff); cursor: pointer;
}
#hop input.bb-chk:checked::before {
  border-color: var(--chinh, #0b3d6e); background-color: var(--chinh, #0b3d6e);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
  background-size: 16px 16px; background-position: center; background-repeat: no-repeat;
}
#hop input.bb-chk:focus-visible { outline: 3px solid var(--chinh-2, #155a9e); outline-offset: 2px; } /* như vòng chung app.css (--chinh-2 đủ tương phản cả ở Tối) */
@media (forced-colors: active) {
  #hop input.bb-chk { appearance: auto; -webkit-appearance: auto; }
  #hop input.bb-chk::before { content: none; }
} /* chế độ tương phản cao: ô chọn của hệ thống */

/* Hàng chọn bạn: ô chọn (vùng chạm 44 px) tách khỏi nút tên (bấm tên mở hồ sơ, không đổi lựa chọn) */
#hop .bb-dong { display: flex; align-items: center; gap: 4px; min-height: 44px; }
#hop .bb-dong[hidden] { display: none; }
#hop .bb-o { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; cursor: pointer; }
#hop .bb-ten {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 6px; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; overflow-wrap: anywhere; cursor: pointer;
}

/* Tên và ảnh bấm được (mở hồ sơ) */
#hop .nut-ten, #hop .nut-ten-anh { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#hop .nut-ten { min-height: 44px; display: flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
#hop .bb-ten:focus-visible, #hop .nut-ten:focus-visible, #hop .nut-ten-anh:focus-visible { outline: 3px solid var(--chinh-2, #155a9e); outline-offset: 2px; border-radius: 8px; }
/* Ảnh bấm được giữ cỡ ảnh: luật hàng nhiều nút trong hộp Thông tin (app.css ".dong:has(> button:nth-of-type(2)) > button { flex: 1 1 50% }") không kéo rộng */
#hop .dong > .nut-ten-anh { flex: none; min-width: 0; padding: 0; line-height: normal; }
/* Thành viên nhóm: dấu "·" trước trạng thái (tinh-nang-moi.css) chỉ khi có chữ "Quản trị nhóm" đứng trước */
#hop .muc-giua .nhat > .tt-ban:first-child::before { content: none; }

/* Nút Nhắn gọn: cùng kiểu nút Gửi của ô soạn (tròn 44 px, nền xanh, biểu tượng gửi 20 px) */
#hop .dong .nut-nhan { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; flex: none; background: var(--nen-tron-xanh, var(--chinh)); color: #fff; }
#hop .dong .nut-nhan .ico { width: 20px; height: 20px; }

/* Hàng "Lời mời kết bạn" (4 nút, chỉ hàng này có .nut-chan): nút xuống dòng dưới tên, tên không bị ép về 0 px ở màn 320 px */
#hop .dong:has(> .nut-chan) { flex-wrap: wrap; row-gap: 6px; }
#hop .dong:has(> .nut-chan) > .muc-giua { flex: 1 1 calc(100% - 56px); }

/* Hồ sơ người: tên dài hiện đủ (không cắt "…"), để phân biệt người trùng tên */
#hop .ho-so-dau { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
#hop .ho-so-dau .muc-giua { min-width: 0; }
#hop .ho-so-dau .muc-ten { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }