/* 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. */

/* =====================================================================
   Băng tiêu đề GHIM của mỗi bảng
   =====================================================================
   David: "nút x luôn ghim để tắt cửa sổ bất cứ lúc nào thay vì trượt xuống
   rồi trượt lên mới tắt được."

   🪤 Trước đây nút × nằm trong dòng nội dung nên nó CUỘN THEO. Danh sách giỗ
   dài vài chục dòng, cuộn xuống giữa là mất nút đóng — muốn thoát phải cuộn
   ngược lên. Trên điện thoại, nơi cả tấm bảng che gần hết màn hình, đó là cảm
   giác bị nhốt.

   Dải màu không chỉ để đẹp: nó là ranh giới giữa "phần điều khiển" và "phần
   nội dung". Băng cùng màu nền thì khi cuộn, chữ chạy lên chui dưới tiêu đề
   trông như lỗi vẽ. */

.the-dau {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;

  /* 🪤 CHỈ kéo hai bên, KHÔNG kéo lên trên. Kéo lên bằng margin âm thì băng
     dính ở vị trí thấp hơn mép bảng đúng bằng phần đệm trên, và khi cuộn còn
     hở một vệt nền phía trên băng — chữ chạy qua vệt ấy trông như lỗi vẽ.
     Bảng bỏ hẳn đệm trên, để chính băng này lo. */
  margin: 0 -16px 12px;
  /* Chừa chỗ bên phải cho nút đóng, vì nút ấy nay đứng ngoài dòng chảy. */
  padding: 13px 52px 13px 14px;
  background: var(--son-nhat);
  border-bottom: 1px solid var(--vien);
}

/* 🔴 NÚT ĐÓNG GHIM GÓC, KHÔNG NẰM TRONG DÒNG CHẢY.
   Băng ghim có `flex-wrap: wrap` (hàng nút phải xuống dòng riêng), nên khi tên
   dài — "Em Nguyễn Thị Ngọc Ánh" chẳng hạn — cụm chữ đẩy nút ✕ rơi xuống một
   hàng của riêng nó, nằm lửng giữa thẻ. David bắt được bằng ảnh chụp 02/09;
   đọc mã thì không thấy, vì nó chỉ xảy ra ở đúng độ dài tên nhất định.
   🪤 Đừng chữa bằng cách bỏ `flex-wrap`: hàng nút việc CẦN xuống dòng riêng. */
.the-dau .dong#dong-the {
  position: absolute; top: 13px; right: 14px;
}
.the-dau h2 {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 16px; line-height: 1.3; color: var(--son);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.the-dau .dong {
  position: static; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--vien-dam); background: var(--giay-nang);
  color: var(--muc-nhat); font-size: 19px; line-height: 1;
  cursor: pointer;
}
.the-dau .dong:hover { background: var(--son); border-color: var(--son); color: #fff; }
.the-dau .dong:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }
.the-dau .chon-khoang { flex: 1 1 100%; margin: 2px 0 0; }

@media (min-width: 721px) {
  .the-dau { margin: 0 -18px 12px; padding: 13px 16px; }
}

/* Bảng bỏ đệm TRÊN — băng ghim là thứ chạm mép trên. */
.the { padding-top: 0; }

/* Trên ĐIỆN THOẠI tấm bảng cao đúng bằng chỗ còn lại của màn hình.
   🪤 Trước đây chiều cao chạy theo NỘI DUNG, nên cùng một danh sách: máy nhỏ
   thì tràn, máy to (iPhone 15 Pro Max) thì chừa một khoảng trắng to ở trên mà
   không dùng vào việc gì. Ghim cả trên lẫn dưới thì màn hình nào cũng vừa. */
@media (max-width: 720px) {
  .the {
    top: calc(var(--cao-thanh) + 6px);
    max-height: none;
    border-radius: 16px 16px 0 0;
  }
}


/* Nút bấm trong danh sách thông tin phải trông y hệt liên kết bên cạnh nó.
   Khác nhau về thẻ HTML là chuyện của mã, không phải chuyện của người dùng. */
button.o-tin {
  width: 100%; font: inherit; text-align: left;
  border: 0; border-bottom: 1px solid var(--vien);
  background: none; cursor: pointer;
}


/* Con triện của cây CÁ NHÂN dùng sắc thếp, không dùng sắc sơn.
   Sơn son là của dòng họ — nhà thờ họ, hoành phi, câu đối. Cây của một người
   thì khác hạng, và khác màu là cách nói điều đó mà không cần chữ. */
.tc-trien.rieng {
  background: linear-gradient(158deg, #C79A4B, var(--thep));
}

/* Cây khác của tôi: hàng mảnh, dưới phần chính. Không giấu đi, nhưng cũng
   không tranh chỗ với cây đang xem. */
.ds-cay-khac { display: grid; gap: 8px; }
.o-cay-khac {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--bo-vua);
  border: 1px solid var(--vien); background: var(--giay-nang);
  color: var(--muc); text-decoration: none; box-shadow: var(--bong-1);
}
.o-cay-khac:hover { border-color: var(--vien-dam); box-shadow: var(--bong-2); }
.o-cay-khac .cc-hinh { width: 38px; height: 38px; border-radius: 11px; }
.o-cay-khac .cc-hinh .bt { width: 20px; height: 20px; }
.o-cay-khac .cc-mui { width: 16px; height: 16px; color: var(--muc-mo); flex: 0 0 auto; }


/* Cây chưa có ai. Nằm ĐÈ lên khung cây chứ không thay nó — khung cây vẫn phải
   ở đó để vẽ ngay sau khi thêm người đầu tiên, không phải dựng lại. */
.cay-rong {
  position: fixed; inset: var(--cao-thanh) 0 var(--cao-duoi) 0; z-index: 5;
  display: grid; place-items: center; padding: 24px;
  background: var(--giay);
}
.cay-rong > div {
  max-width: 320px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.rong-hinh { width: 52px; height: 52px; color: var(--muc-mo); }
.cay-rong h2 { margin: 0; font-size: 19px; }
.cay-rong p { margin: 0 0 6px; font-size: 14px; color: var(--muc-nhat); line-height: 1.55; }


/* =====================================================================
   Chữ tiêu đề — Bitter
   =====================================================================
   Dùng CÓ CHỪNG MỰC: chỉ ở tên riêng và tiêu đề mục, không dùng cho nhãn
   phụ hay nút. Slab serif ở cỡ nhỏ đọc mệt, mà đặt khắp nơi thì nó thôi làm
   điểm nhấn và trở thành nền.

   Chữ số dùng `tabular-nums` ở mọi chỗ có cột số — năm sinh năm mất, số ngày
   còn lại — để chúng thẳng hàng khi xếp chồng. */

.dau-hieu-ten,
.the-cay b,
.the-dau h2,
.dau-the h2,
.cay-rong h2,
.van-ban h1,
.van-ban h2,
.toi-chu b {
  font-family: var(--chu-de);
  letter-spacing: -.015em;
}

/* Tên riêng đặt hơi nặng hơn: đây là thứ người ta tìm bằng mắt trên mỗi màn
   hình của một cuốn gia phả. */
.the-cay b, .dau-the h2 { font-weight: 700; }
.dau-hieu-ten { font-weight: 700; letter-spacing: -.02em; }

.sap-con, .o-sap .sap-chu span, .van-ban .can-dien { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Nền tảng: tôn trọng người tắt hiệu ứng
   =====================================================================
   🪤 Trước đây KHÔNG có khối này. Chưa hại vì gần như chưa có chuyển động —
   nhưng đây là loại thiếu sót chỉ lộ ra khi đã thêm hiệu ứng, và lúc ấy người
   bị chóng mặt vì chuyển động màn hình đã phải chịu trận rồi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Nhãn "Đã mất" đi cặp với "Còn sống" — nói ra cả hai phía thì người đọc không
   phải suy ra từ sự vắng mặt của nhãn kia. */
.nhan.mat { border-color: var(--vien-dam); color: var(--muc-nhat); }


/* Băng ghim của thẻ người mang TRỌN CỤM NHẬN DẠNG.
   🪤 Ảnh ở đây giữ KHUNG ĐỨNG 3:4, không cắt tròn. Hai chỗ hai vai: trong sơ
   đồ ảnh là dấu nhận người nên hình tròn; ở đây nó là ẢNH THỜ, mà ảnh thờ thì
   khung đứng — cắt tròn là mất đúng cái làm nó thành ảnh thờ. */
/* 🪤 CỤM CHỮ CÂN GIỮA CHIỀU CAO ẢNH, không cùng bám mép trên.
   Ảnh thờ khung 3:4 cao hơn ba dòng chữ, nên bám mép trên thì chữ dồn lên đầu
   còn chân ảnh thò xuống dưới nút "Chi Giáp" — David chụp lại đúng chỗ ấy.
   Cân giữa thay vì chốt tỉ lệ 2/3 vì tỉ lệ cứng gãy ngay khi tên dài xuống hai
   dòng: lúc ấy cụm chữ cao hơn ảnh, và `center` vẫn đúng còn tỉ lệ thì không. */
.dau-nguoi { align-items: center; padding-bottom: 14px; }
.dau-anh { flex: 0 0 auto; }
.dau-anh .chan-dung { width: 78px; margin: 0; }
.dau-anh .chan-dung-trong .chu-dau { font-size: 26px; }
.dau-anh .chan-dung-trong .moi { font-size: 10px; }

/* Nút × bám mép TRÊN CÙNG BÊN PHẢI: nó là chỗ thoát, không phải một phần của
   cụm nhận dạng, nên đừng để nó trôi xuống giữa theo ảnh. */
.dau-nguoi #dong-the { align-self: flex-start; }

/* Hàng việc: việc chính bên trái, ⋮ CHÂN BẰNG với nó bên phải.
   `flex: 1 1 100%` đẩy nó xuống dòng riêng của băng — băng đã `flex-wrap`. */
.hang-dau-nut {
  flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
/* 🪤 Hai nút phải CHÂN BẰNG NHAU. Đo bản đầu: nút chính cao 29px, nút ⋮ cao
   38px — lệch chân 4,5px mỗi đầu, đủ để nhìn ra là hụt. Chốt cứng 44px cho cả
   hai: đó cũng là cỡ chạm tối thiểu, mà 29px thì đã dưới ngưỡng ấy rồi. */
.hang-dau-nut .nut-chinh {
  margin: 0; min-height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center;
}
.hang-dau-nut .dong { width: 44px; height: 44px; border-radius: 12px; }
.hang-dau-nut .dong svg { width: 20px; height: 20px; display: block; margin: auto; fill: currentColor; }

/* Ba dòng chữ ôm sát nhau thành MỘT khối, để khối ấy cân được với ảnh.
   🪤 `.the .duoi-ten` có `margin-bottom: 12px` cho phần thân; ở băng ghim nó
   cộng thêm vào `gap` thành khe 18px giữa dòng đời·giới và hàng nhãn — nhìn
   như hai cụm rời chứ không phải một cụm. */
.dau-nguoi .dau-chu { padding-top: 0; gap: 5px; }
.dau-nguoi .the-dau-ten { white-space: normal; }
.dau-nguoi .duoi-ten { margin: 0; font-size: 13px; color: var(--muc-nhat); }
.dau-nguoi .hang-nhan .nhan { margin: 0; padding: 2px 8px; font-size: 11.5px; }

/* Nhãn LỚP người dùng trên hồ sơ: nói thẳng anh đang đứng ở đâu trong họ. */
.toi-chu .nhan.lop {
  display: inline-block; margin-top: 4px;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--son); color: var(--son); background: var(--son-nhat);
}

/* Việc KHÔNG LÙI LẠI ĐƯỢC thì phải trông khác việc thường — nhưng cũng đừng
   tô đỏ rực: nó nằm cạnh mấy mục hằng ngày, và một khối đỏ ở đó làm người ta
   sợ cả những mục bên cạnh. Viền và chữ đủ để dừng tay lại một nhịp. */
.o-cong-cu.hiem .cc-chu b { color: var(--son); }
.nut-hiem {
  background: var(--son); border-color: var(--son); color: #fff;
}
.nut-hiem:hover, .nut-hiem:focus-visible { filter: brightness(.92); }

/* Form chèn lên đầu màn hình "Tôi" — tách hẳn khỏi danh sách phía dưới. */
.khoi-noi {
  padding: 16px; margin: 0 0 20px;
  border: 1px solid var(--vien-dam); border-radius: 12px;
  background: var(--giay);
}
.khoi-noi.hiem { border-color: var(--son); }
.khoi-noi h3:first-child { margin-top: 0; }

/* Chuông thông báo. Số chưa đọc là con số DUY NHẤT trên thanh trên, nên nó
   được phép nổi bật — nhưng chỉ khi thật sự có gì chưa đọc. */
.nut-chuong { position: relative; padding: 6px 9px; }
.chuong-so {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: var(--son); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ds-chuong { list-style: none; margin: 0; padding: 0; }
.ds-chuong li {
  padding: 12px 0; border-bottom: 1px solid var(--vien);
  display: flex; gap: 10px; align-items: flex-start;
}
.ds-chuong li:last-child { border-bottom: 0; }
/* Chưa đọc: một chấm son bên trái. Đủ để mắt nhặt ra, không đủ để làm ồn. */
.ds-chuong .cham {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%;
  background: var(--son);
}
.ds-chuong .cham.doc-roi { background: transparent; }
.ds-chuong .tb-chu { min-width: 0; flex: 1 1 auto; }
.ds-chuong .tb-chu b { display: block; font-size: 14.5px; }
.ds-chuong .tb-chu p { margin: 3px 0 0; font-size: 13px; color: var(--muc-nhat); }
.ds-chuong .tb-meta { margin-top: 4px; font-size: 12px; color: var(--muc-nhat); }
.ds-chuong .so-lan {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--vien-dam); font-size: 11px;
}

/* Bảng số của trang quản trị nền tảng. Cố ý KHÔ KHAN: không ô nào bấm được,
   không đường nào đi tiếp. Đó là điểm của trang này. */
.qt-luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--vien); border: 1px solid var(--vien);
  border-radius: 10px; overflow: hidden;
}
.qt-o {
  background: var(--giay); padding: 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.qt-o b { font-size: 21px; color: var(--son); font-variant-numeric: tabular-nums; }
.qt-o span { font-size: 12px; color: var(--muc-nhat); }

.qt-ds { list-style: none; margin: 0 0 8px; padding: 0; }
.qt-ds li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--vien);
}
.qt-ds li:last-child { border-bottom: 0; }
.qt-ds b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-ds .lien {
  background: none; border: 0; padding: 0; font: inherit; text-align: left;
  color: var(--son); cursor: pointer; text-decoration: underline;
}

/* 🪤 Ô CHỌN TRONG `.o-cong-cu` PHẢI CHẶN CO GIÃN. Luật rộng 100% cho input
   trong khối là thứ đã một lần biến ô tích thành một dải xám dài hết hàng. */
.o-thu { cursor: pointer; }
.o-thu input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--son);
}

/* 🔴 `.nhan` KHÔNG CÓ KIỂU DÁNG NGOÀI THẺ NGƯỜI — luật gốc là `.the .nhan`.
   Một cái nhãn đặt ở màn hình khác chỉ ra CHỮ TRƠN: không lỗi nào báo, không
   phép đo nào bắt được, và nhìn ảnh chụp riêng khối thì vẫn thấy chữ nên tưởng
   xong. Đã vấp NĂM LẦN ở năm màn hình khác nhau.
   Từ đây gom một chỗ: mọi khối ngoài thẻ người kê tên vào danh sách này. */
.qt-nen .nhan,
.qt-gh .nhan,
.bv-ds .nhan,
.ti-ds .nhan {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--giay-sau);
}

.qt-nen .nhan {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--giay-sau);
}
.qt-nen .nhan.ok       { border-color: var(--song); color: var(--song); }
.qt-nen .nhan.canh-bao { border-color: var(--son);  color: var(--son); }
.qt-nen .nhan.loi      { border-color: var(--son);  color: #fff; background: var(--son); }

/* Cột trái xuống dòng thoải mái, cột phải bám mép và không co. */
.qt-nen-o { align-items: flex-start !important; }
.qt-nen-o > span { min-width: 0; line-height: 1.55; }
.qt-nen-o > b { text-align: right; flex: 0 0 auto; line-height: 1.7; }

/* Mốc cập nhật của trang pháp lý. Nhạt nhưng KHÔNG ẩn: người dùng phải biết
   mình đang đọc bản của ngày nào — điều khoản đổi mà không ai biết là đổi lén. */
.trang-moc {
  margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--vien);
  font-size: 13px; color: var(--muc-nhat);
}
.o-ma {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6;
}
/* 🪤 Ô tích phải NẰM CÙNG HÀNG với nhãn. `.hop input { width: 100% }` cho mọi
   ô nhập là đúng với ô chữ, nhưng áp lên checkbox thì nó thành một khối rộng
   cả hộp và nhãn bị đẩy xuống dòng dưới — trông như hai thứ rời nhau. */
.o-chon {
  display: flex !important; gap: 9px; align-items: center; font-size: 14px;
  color: var(--muc);
}
.o-chon input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0; padding: 0;
  accent-color: var(--son);
}