/* ============================================================================
   AVATAR-AN-CU.CSS — ẢNH ĐẠI DIỆN NGƯỜI DÙNG TRONG APP
   Dựng 02/08/2026 · phiên Não Tập Đoàn · món 4
   Nguồn màu: 04-BO-MA-THIET-KE.md mục 2 · nguồn tên vai: 03-TAM-NHIN-DINH-VI.md mục 3b

   HIỆN TRẠNG ĐANG THAY (đo app v98, 02/08/2026):
     app.js:1779 vẽ ô tròn chứa 2 CHỮ CÁI viết tắt, màu lấy từ class .avatar cũ.
     Không phân biệt vai, không theo bộ mã, người dùng nhìn như bảng tính.

   BA NHÓM MÀU — KHÔNG PHẢI TÁM
     Tám vai mà tám màu thì không ai nhớ nổi. Gom theo QUAN HỆ với toà nhà:
       · nhóm NHÀ     — người sở hữu/điều hành  → xanh chính
       · nhóm LÀM VIỆC— người được giao việc     → xanh phụ
       · nhóm KHÁCH   — người ở                  → xám ấm
     Cam KHÔNG dùng cho avatar: trong app cam là màu "đụng tiền" (nút trả tiền,
     nút duyệt chi). Lấy cam làm màu người là phá mất tín hiệu đó.

   MỌI CẶP MÀU DƯỚI ĐÂY ĐỀU ĐÃ ĐO — không cặp nào dưới 4,5:1.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. KHUNG CHUNG
   ------------------------------------------------------------------------- */
.avatar-ac {
  --ac-co: 44px;                       /* cỡ mặc định */
  width: var(--ac-co);
  height: var(--ac-co);
  flex: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;                     /* sàn chữ app là 16px — xem cỡ nhỏ bên dưới */
  font-weight: 700;
  letter-spacing: .02em;               /* chữ IN HOA ngắn mới được giãn */
  line-height: 1;
  user-select: none;

  /* mặc định = nhóm khách, để quên gán nhóm cũng không vỡ giao diện */
  background: var(--av-khach-nen);                 /* --xam-100 */
  color: var(--av-khach-chu);                      /* --xam-900 · 12,85:1 */
}

/* ---------------------------------------------------------------------------
   2. BA CỠ
   Cỡ nhỏ nhất 36px vì chữ trong avatar vẫn phải ≥16px (thang chữ, mục 4.2).
   ------------------------------------------------------------------------- */
.avatar-ac.nho  { --ac-co: 36px; font-size: 16px; }   /* dòng trong danh sách */
.avatar-ac.vua  { --ac-co: 44px; font-size: 18px; }   /* thẻ người, hộp thư */
.avatar-ac.to   { --ac-co: 64px; font-size: 24px; }   /* màn hồ sơ */

/* ---------------------------------------------------------------------------
   3. BA NHÓM VAI
   ------------------------------------------------------------------------- */
/* nhóm NHÀ — Quản trị An Cư · Chủ nhà */
.avatar-ac.nhom-nha {
  background: var(--av-nha-nen);                 /* --chinh-100 */
  color: var(--av-nha-chu);                      /* --chinh-800 · 5,47:1 */
}

/* nhóm LÀM VIỆC — Quản lý toà · Nhân viên · Cộng tác viên · Thợ · Đối tác dịch vụ */
.avatar-ac.nhom-lam-viec {
  background: var(--av-viec-nen);                 /* --phu-100 */
  color: var(--av-viec-chu);                      /* --phu-800 · 7,24:1 */
}

/* nhóm KHÁCH — Khách thuê */
.avatar-ac.nhom-khach {
  background: var(--av-khach-nen);                 /* --xam-100 */
  color: var(--av-khach-chu);                      /* --xam-900 · 12,85:1 */
}

/* ---------------------------------------------------------------------------
   4. TÀI KHOẢN CHÍNH THỨC CỦA AN CƯ
   Tin do hệ thống gửi (nhắc tiền, thông báo bảo trì) đứng tên "An Cư",
   KHÔNG đứng tên một nhân viên. Chỗ đó dùng logo, không dùng chữ cái.
   ------------------------------------------------------------------------- */
.avatar-ac.an-cu {
  background: var(--blue-800);
  color: var(--chu-tren-chinh);
  padding: 0;
}
.avatar-ac.an-cu img,
.avatar-ac.an-cu svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------------------
   5. KHI CÓ ẢNH THẬT
   Ảnh phủ kín ô tròn, cắt giữa. Không bóp méo mặt người.
   ------------------------------------------------------------------------- */
.avatar-ac > img.anh-nguoi {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------------
   6. TÀI KHOẢN ĐÃ KHOÁ
   Mờ đi nhưng KHÔNG mờ dưới mức đọc được — mờ .4 như app đang làm thì
   chữ trên nền sáng tụt xuống dưới 3:1, người 55 tuổi không đọc ra.
   ------------------------------------------------------------------------- */
.avatar-ac.da-khoa {
  opacity: .72;
  filter: grayscale(1);
}

/* ---------------------------------------------------------------------------
   7. XẾP CHỒNG (nhóm người trong một dòng)
   ------------------------------------------------------------------------- */
.avatar-chong { display: inline-flex; }
.avatar-chong .avatar-ac + .avatar-ac { margin-left: -10px; box-shadow: 0 0 0 2px var(--bg); }