/* Một mảnh của bộ áo. Tách 02/09/2026 từ `cay.css` (3.103 dòng).
   🪤 THỨ TỰ CÁC THẺ <link> LÀ THẬT: CSS quyết bằng thứ tự khi độ đặc hiệu
   bằng nhau. Đảo hai mảnh là đảo luôn luật nào thắng. */

/* =====================================================================
   Nhãn "dữ liệu mẫu"
   =====================================================================
   David 02/09: *"tài khoản demo mày có thể để cho người dùng trải nghiệm
   nhưng phải có chủ đích là trải nghiệm mẫu."*

   🪤 Nhãn nằm trên nền son của thanh trên, nên KHÔNG dùng `--son` làm chữ:
   son trên son là 1,0. Chip trắng đặc, chữ son sẫm cố định. */
/* 🪤 ĐỪNG ĐẶT `display: flex` LÊN `.thanh-trai .phu` ĐỂ CĂN CHIP. Luật ấy nằm
   cuối tệp nên đè lên BA luật `display: none` cố tình giấu dòng phụ ở ≤720px và
   ở 880–1119px — tức là bật lại đúng thứ đã bỏ đi để thanh trên khỏi tràn. Chip
   chạy nội tuyến thì không đụng gì tới chúng.

   🔴 Ở ≤720px cả `.thanh-trai` bị ẩn, nên chip này là thứ CHỈ CÓ TRÊN MÁY TÍNH.
   Chỗ báo cho điện thoại là khối `.mau-nhac` ở đầu trang chủ, cộng với chữ
   "(dữ liệu demo)" nằm ngay trong tên cây mẫu. */
.nhan-mau {
  display: inline-block; margin-right: var(--k2); vertical-align: 1px;
  /* 🪤 Chip nền TRẮNG ĐẶC nên chữ phải là màu ĐẶC, không lấy `--son`: ở nền
     tối `--son` đổi thành #E27358, đo trên trắng chỉ được 3,1 — dưới ngưỡng
     4,5 của chữ nhỏ. Son sẫm cố định cho 9,6 ở cả hai nền. */
  background: #fff; color: #7E2011;
  font-size: var(--c1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: var(--k1) var(--k2); border-radius: 999px; line-height: 1.5;
}

/* Lời nhắc đủ dài thì đặt ở trang chủ, nơi có chỗ để nói cả câu. Nhãn trên
   thanh chỉ để người dùng không quên giữa chừng. */
/* 🪤 KHÔNG đặt biểu tượng cảnh báo ở đây: bộ biểu tượng của dự án không có
   cái nào mang nghĩa ấy, và mượn tạm một cái khác (mầm cây, khung ảnh) thì
   người đọc hiểu sang nghĩa khác. Viền son đã đủ tách khối này khỏi trang. */
.mau-nhac {
  background: var(--son-nhat); border: 1px solid var(--son);
  border-radius: var(--bo-vua); padding: var(--k4); margin: 0 0 16px;
}
.mau-nhac b { display: block; margin-bottom: var(--k1); }
/* Không nút thì đoạn cuối không cần đệm dưới — thừa 10px trong một khối nhỏ
   nhìn ra ngay là lệch so với các khối khác của trang. */
.mau-nhac p { margin: 0; font-size: var(--c3); color: var(--muc-nhat); line-height: 1.55; }
.mau-nhac p:not(:last-child) { margin-bottom: 12px; }
.mau-nhac .nut { min-height: 40px; }

/* =====================================================================
   Đang mở ứng dụng
   =====================================================================
   🔴 KHÔNG DÙNG CHUNG HÌNH VỚI CHẤM "CÒN SỐNG" TRÊN THẺ NGƯỜI. Trong một phần
   mềm gia phả, chấm trên một con người đã có nghĩa rồi: còn sống hay đã mất.
   Mượn đúng hình ấy để nói "đang trực tuyến" là chồng hai nghĩa lên một dấu
   hiệu, ngay cạnh tên những người đã khuất. Chấm này chỉ xuất hiện ở màn
   THÀNH VIÊN — nơi mỗi dòng là một TÀI KHOẢN, không phải một người trong cây.

   🪤 KHÔNG NHÁY. Thứ nhất, nháy là rào cản tiếp cận (WCAG 2.3.1). Thứ hai,
   không có gì gấp ở đây: biết ai đang mở ứng dụng là thông tin nền, không phải
   báo động. */
.cham-online {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2E7D32; margin-right: var(--k2); vertical-align: 1px;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, .16);
}
.cham-online.tat { background: var(--vien-dam); box-shadow: none; }
.tv-online {
  display: flex; align-items: center; gap: var(--k1); flex-wrap: wrap;
  margin: 0 0 var(--k3); font-size: var(--c3); color: var(--muc-nhat);
}
.tv-online b { color: var(--muc); }

/* =====================================================================
   Form dài chia NHÓM
   =====================================================================
   Hồ sơ một con người có bốn cụm: thông tin · ngày tháng · nơi ở · mộ phần.
   Không chia thì là hai chục ô xếp dọc, người nhập không biết mình đang ở đâu. */
.form-nhom { margin: var(--k5) 0 var(--k1); }
.form-nhom:first-child { margin-top: 0; }
.form-nhom h3 {
  margin: 0 0 4px; font-size: var(--c2); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--son);
  padding-top: var(--k3); border-top: 1px solid var(--vien);
}
.form-nhom p { margin: 0; font-size: var(--c2); line-height: 1.5; color: var(--muc-nhat); }

/* 🔴 HAI CỘT ĐO THEO BỀ NGANG CỦA THẺ, KHÔNG PHẢI CỦA MÀN HÌNH.
   Bản trước dùng `@media (min-width: 880px)` — nhưng form này nằm trong TẤM
   THẺ bên phải, và tấm ấy chỉ rộng khoảng 330px dù màn hình 1440px. Kết quả:
   mỗi ô còn ~140px, "vd: Số 12 ngõ 5" cụt thành "vd: Số 12 ngõ !", ô chọn cụt
   thành "Chỉ người tr…". David 02/09: *"tao không hiểu mày nghĩ gì cho 2 hàng
   vào cái popup bé như cái kẹo."*

   🪤 VÀ TÔI ĐÃ CHỤP ẢNH RỒI VẪN KHÔNG THẤY. Ảnh 1440px có sẵn hai cột chật
   trong tấm thẻ; tôi nhìn thấy "hai cột" và nghĩ là đúng ý, không đo lại bề
   ngang thật của từng ô. Đo mới là phép kiểm, nhìn thì không.

   `@container` hỏi đúng câu cần hỏi: "chỗ chứa tôi rộng bao nhiêu". Thẻ hẹp
   thì một cột; ngày nào form mở ở chỗ rộng thật thì tự chia hai. */
.the-noi-dung { container-type: inline-size; container-name: khung-form; }

@container khung-form (min-width: 620px) {
  .form-sua.form-rong {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--k3) var(--k4); align-items: end;
  }
  /* Tiêu đề nhóm, ô nhiều dòng, lý do sửa và hàng nút chiếm TRỌN hàng.
     🪤 Quên "lý do sửa" thì nó nằm cạnh ô cuối của nhóm trên — hai thứ chẳng
     liên quan đứng chung một hàng, đúng lỗi đã lộ ra trong ảnh David gửi. */
  .form-sua.form-rong .form-nhom,
  .form-sua.form-rong .hang-nut,
  .form-sua.form-rong .loi,
  .form-sua.form-rong > label:last-of-type,
  .form-sua.form-rong label:has(textarea) { grid-column: 1 / -1; }
}

/* =====================================================================
   Hàng nút của form
   =====================================================================
   🔴 NÚT LƯU CAO 29px LÀ DƯỚI NGƯỠNG CHẠM. `.nut` để `padding: 8px 12px` với
   chữ 13px, ra đúng 29px — hợp cho nút phụ nằm rải trong nội dung, nhưng đây
   là nút KẾT THÚC một form dài hai chục ô, bấm trượt là gõ lại từ đầu. WCAG
   2.2 AA đòi tối thiểu 24px; 44px là mức bấm trúng ngay lần đầu bằng ngón cái.
   Đo 02/09 mới thấy: nhìn ảnh thì nút trông vẫn bình thường. */
.hang-nut { display: flex; gap: var(--k3); margin-top: var(--k4); }
.hang-nut .nut { min-height: 44px; padding: 0 var(--k5); font-size: var(--c4); }
/* Nút chính đứng SAU và giãn rộng: mắt người Việt đọc trái→phải, việc chính
   nằm cuối hàng là chỗ ngón cái nghỉ. */
.hang-nut .nut-chinh { flex: 1 1 auto; justify-content: center; }