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

/* =====================================================================
   CÁO PHÓ
   =====================================================================
   Tờ giấy này có một hình thức mà ai cũng nhận ra từ xa: khung viền, băng tang
   chéo góc phải trên, ảnh thờ trắng đen, chữ cân giữa. Giữ nguyên bố cục ấy —
   người ta đọc quen mắt rồi, và đây không phải chỗ để sáng tạo. */

.cp-dau { position: relative; margin: 4px 0 20px; padding-bottom: 16px;
          border-bottom: 2px solid var(--muc); text-align: center; }
.cp-dau h1 { margin: 0; font-size: 26px; letter-spacing: .06em; }

/* Băng tang chéo ở góc phải trên. Không phải trang trí: nó là dấu hiệu tang
   mà người Việt nhận ra trước cả khi đọc chữ. */
.cp-bang {
  position: absolute; top: 0; right: 0; width: 62px; height: 62px;
  overflow: hidden; pointer-events: none;
}
.cp-bang::after {
  content: ''; position: absolute; top: 12px; right: -22px;
  width: 92px; height: 13px; background: var(--muc);
  transform: rotate(45deg);
}

.to-cao-pho {
  position: relative; text-align: center;
  padding: 26px 20px; margin: 0 0 16px;
  border: 3px double var(--muc); border-radius: 4px;
  background: var(--giay-nang);
}
.to-cao-pho h1 { margin: 0 0 4px; font-size: 27px; letter-spacing: .1em; }
.to-cao-pho .cp-de { margin: 0 0 18px; font-size: 13px; letter-spacing: .04em;
                     text-transform: uppercase; color: var(--muc-dam); }
.to-cao-pho .chan-dung { width: 132px; margin: 0 auto 16px; }
.to-cao-pho h2 { margin: 0 0 2px; font-size: 21px; }
.to-cao-pho .cp-chuc { margin: 0 0 12px; font-size: 15px; color: var(--muc-dam); }
.to-cao-pho p { margin: 5px 0; font-size: 14.5px; line-height: 1.6; }

.cp-lich-xem {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px;
  margin: 18px auto 6px; max-width: 34ch; text-align: left; font-size: 14px;
}
.cp-lich-xem dt { font-style: italic; white-space: nowrap; }
.cp-lich-xem dd { margin: 0; }

.cp-cuoi { margin-top: 18px !important; font-style: italic; font-size: 13.5px; }

/* Form soạn: mỗi mục lễ một khối, đừng để năm mục dính thành một khối chữ. */
.cp-le {
  padding: 12px; margin: 0 0 10px;
  border: 1px solid var(--vien); border-radius: 10px; background: var(--giay-sau);
}
.cp-le > b { display: block; margin-bottom: 6px; font-size: 14px; }

/* Nút chọn nhanh nghĩa trang. Con số đi kèm là số người trong họ đã an táng ở
   đó — nó thuyết phục hơn mọi cách đoán, và cũng là lý do gợi ý được. */
.cp-goi-y { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-goi-y .nut-nho { display: inline-flex; gap: 6px; align-items: baseline; }
.cp-goi-y .nut-nho .phu {
  font-size: 11px; padding: 0 5px; border-radius: 999px;
  border: 1px solid var(--vien); font-variant-numeric: tabular-nums;
}
.cp-goi-y .nut-nho.chon { background: var(--son); border-color: var(--son); color: #fff; }
.cp-goi-y .nut-nho.chon .phu { border-color: rgba(255,255,255,.5); }

/* 🪤 Việc GẤP đứng trên cùng trang chủ. Tang lễ chỉ có vài ngày; một cái thẻ
   nằm sâu trong menu là để lỡ mất. Đây là thứ DUY NHẤT được phép chen lên
   trước mọi thứ khác — thêm cái thứ hai là hết gấp. */
.tc-gap { margin: 0 0 20px; }
.o-cong-cu.gap { border-color: var(--son); background: var(--son-nhat); }
.o-cong-cu.gap .cc-chu b { color: var(--son); }

/* =====================================================================
   QUỸ HỌ
   =====================================================================
   🪤 Con số TO nhất trên màn hình là SỐ DƯ ĐÃ XÁC NHẬN. Khoản đang chờ đứng
   riêng thành một cái nhãn, không cộng vào — trộn hai thứ ấy làm một là bày
   một con số sai cho cả họ nhìn. */

.quy-the {
  border: 1px solid var(--vien); border-radius: 12px;
  background: var(--giay); margin: 0 0 12px; overflow: hidden;
}
.quy-the.dong { background: var(--giay-sau); }

.quy-dau {
  display: flex; width: 100%; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.quy-dau:hover { background: var(--son-nhat); }
.quy-dau:focus-visible { outline: 2px solid var(--son); outline-offset: -2px; }
.quy-ten { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quy-ten b { font-size: 15px; }
.quy-ten .phu { font-size: 12.5px; }
.quy-so { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 4px; }
.quy-so b { font-size: 17px; color: var(--son); font-variant-numeric: tabular-nums; }
.quy-so .nhan { font-size: 11px; padding: 2px 8px; border-radius: 999px;
                border: 1px solid var(--son); color: var(--son); }

.quy-than { padding: 0 14px 16px; border-top: 1px solid var(--vien); }
.quy-than h3 { margin: 18px 0 8px; font-size: 14px; letter-spacing: .04em;
               text-transform: uppercase; color: var(--muc-nhat); }

.quy-nhan-tien {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  padding: 12px; border-radius: 10px; background: var(--giay-sau);
}
.quy-qr { width: 148px; height: auto; border-radius: 8px; background: #fff; }
.quy-tk { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.quy-tk dt { color: var(--muc-nhat); }
.quy-tk dd { margin: 0; font-variant-numeric: tabular-nums; }
.nut-nho { padding: 1px 8px; font-size: 12px; margin-left: 6px; }

/* Hàng mức tiền: bấm là điền vào ô, không gửi ngay — người ta còn muốn sửa. */
.quy-muc { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.nut-muc { font-variant-numeric: tabular-nums; }
.nut-muc.chon { background: var(--son); border-color: var(--son); color: #fff; }

/* 🪤 Câu nhắc này KHÔNG được lược đi cho gọn. Nó là chỗ duy nhất nói ra sự thật
   rằng hệ thống chưa biết tiền đã vào hay chưa. */
.quy-nhac {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--son-nhat); border-left: 3px solid var(--son);
  font-size: 13px;
}

.ds-quy.cho li { background: var(--giay-sau); border-radius: 10px; padding: 10px; }

/* =====================================================================
   CMS CỦA DÒNG HỌ
   =====================================================================
   🪤 MỖI CÔNG TẮC PHẢI NÓI TẮT ĐI THÌ MẤT GÌ. Một hàng công tắc trần trụi buộc
   người ta phải thử để biết — mà thử trên dữ liệu thật của cả dòng họ thì
   không ai dám, nên rốt cuộc không ai đụng vào cái nào. */

.cms-dau { margin: 4px 0 20px; padding-bottom: 16px; border-bottom: 2px solid var(--vien-dam); }
.cms-dau h1 { margin: 0 0 4px; font-size: 22px; color: var(--son); }
.cms-dau .phu { margin: 0; }

.cms-ds { display: flex; flex-direction: column; gap: 10px; }
.cms-o {
  border: 1px solid var(--vien); border-radius: 12px;
  background: var(--giay); padding: 14px;
}
.cms-o.tat { background: var(--giay-sau); border-style: dashed; }

.cms-cong-tac { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.cms-cong-tac input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Công tắc gạt. Hình dáng quen thuộc quan trọng hơn sáng tạo ở chỗ này: người
   ta phải nhìn một cái là biết bật hay tắt, không phải suy. */
.cms-truot {
  flex: 0 0 auto; position: relative; width: 44px; height: 26px; margin-top: 2px;
  border-radius: 999px; background: var(--vien-dam);
  transition: background .15s;
}
.cms-truot::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .15s;
}
.cms-cong-tac input:checked + .cms-truot { background: var(--song); }
.cms-cong-tac input:checked + .cms-truot::after { transform: translateX(18px); }
.cms-cong-tac input:focus-visible + .cms-truot { outline: 2px solid var(--son); outline-offset: 2px; }
.cms-cong-tac input:disabled + .cms-truot { opacity: .45; }
.cms-cong-tac input:disabled ~ .cms-chu { opacity: .7; }

.cms-chu { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cms-chu b { font-size: 15px; }
.cms-chu span { font-size: 13px; color: var(--muc-nhat); }
.cms-chu .cms-hau-qua {
  margin-top: 4px; padding-left: 9px; font-size: 12.5px;
  border-left: 2px solid var(--vien-dam);
}

/* =====================================================================
   TRANG ĐỜI NGƯỜI
   =====================================================================
   David: "người sống mong có cái lý lịch tốt đẹp với nhiều thành tích để con
   cháu biết tự hào và noi theo."

   Đây là trang để ĐỌC, không phải bảng để tra. Nên nó rộng rãi hơn mọi màn
   hình khác: một cột hẹp, chữ to hơn, và mốc thời gian xếp dọc như một dòng
   đời chứ không như một bảng dữ liệu. */

.doi-dau {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 0 20px; padding-bottom: 18px;
  border-bottom: 2px solid var(--vien-dam);
}
.doi-dau .chan-dung { width: 92px; }
.doi-dau h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.2; color: var(--son); }
.doi-dau .phu { margin: 0; }

/* Câu giải thích quyền. Người dùng nhìn nút mờ mà không hiểu vì sao thì tưởng
   phần mềm hỏng; câu này biến một sự từ chối thành một lời giải thích. */
.doi-quyen {
  margin: 0 0 20px; padding: 10px 12px; border-radius: 8px;
  background: var(--giay-sau); border-left: 3px solid var(--vien-dam);
  font-size: 13.5px; color: var(--muc-nhat);
}
.doi-quyen.duoc { border-left-color: var(--song); color: var(--muc); }

.doi-muc { margin: 0 0 32px; }
.doi-muc h2 {
  margin: 0 0 12px; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muc-nhat);
}
.doi-muc h3 { margin: 20px 0 4px; font-size: 15px; }

/* Chặng đường: cột năm bên trái, việc bên phải, một sợi chỉ nối dọc.
   🪤 Cột năm CỐ ĐỊNH bề rộng và `tabular-nums`, không thì "1985–1990" và "1998"
   lệch nhau và cả cột trông như xô lệch. */
.doi-moc { list-style: none; margin: 0; padding: 0; }
.doi-moc li {
  display: flex; gap: 14px; padding: 0 0 18px;
  position: relative;
}
.doi-moc li::before {
  content: ''; position: absolute; left: 83px; top: 22px; bottom: 0;
  width: 1px; background: var(--vien);
}
.doi-moc li:last-child::before { display: none; }
/* 🪤 Cột năm phải đủ rộng cho "1885–1897" trên MỘT dòng. Đo bản 56px: chuỗi ấy
   xuống hai dòng, và cả cột đọc lên như bị vỡ. `nowrap` để nếu sau này ai thu
   hẹp lại thì nó tràn ra cho thấy ngay, chứ đừng lặng lẽ gãy dòng. */
.doi-nam {
  flex: 0 0 76px; text-align: right; padding-top: 2px; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muc-nhat);
}
/* 🪤 `.the .nhan` chỉ ăn khi nằm TRONG thẻ người. Trang đời người là màn hình
   riêng, không có tổ tiên `.the` nào, nên cái nhãn loại rơi về chữ trần — nhìn
   ra là "thiếu kiểu", mà không có lỗi nào báo. */
.doi-viec { flex: 1 1 auto; min-width: 0; padding-left: 14px; position: relative; }
.doi-viec .nhan {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--giay-sau); color: var(--muc-nhat);
}

/* Nút bỏ nằm nép ở góc, không thành một nút xám to đứng dưới MỖI chặng.
   Cùng lý do David bắt gom tám nút vào ⋮: nhiều nút ngang quyền nhau thì không
   nút nào là nút chính, và ở đây thứ chính là chuyện đời người ta chứ không
   phải cái nút xoá. */
.doi-bo {
  position: absolute; top: -2px; right: 0;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid transparent; background: none;
  color: var(--muc-mo, var(--muc-nhat)); font-size: 17px; line-height: 1;
  cursor: pointer; opacity: .45;
}
.doi-bo:hover, .doi-bo:focus-visible {
  opacity: 1; border-color: var(--son); color: var(--son); background: var(--son-nhat);
}
.doi-bo:focus-visible { outline: 2px solid var(--son); outline-offset: 1px; }
.doi-viec p { margin: 6px 0 0; }
.doi-viec .phu { font-size: 13px; }
.doi-moc li.cho .doi-viec { opacity: .75; }
.nhan.cho-duyet { border-color: var(--son); color: var(--son); }

.doi-hai-o { display: flex; gap: 10px; }
.doi-hai-o label { flex: 1 1 0; min-width: 0; }

.doi-dem { list-style: none; margin: 0 0 6px; padding: 0; }
.doi-dem li { padding: 4px 0; font-size: 15px; }
.doi-dem b { font-size: 20px; color: var(--son); font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .doi-dau .chan-dung { width: 74px; }
  .doi-dau h1 { font-size: 20px; }
  .doi-hai-o { flex-direction: column; gap: 0; }
}

/* =====================================================================
   Menu ⋮ của thẻ người
   =====================================================================
   David: "đóng nút kia nên cho vào nút 3 chấm dọc, không phơi hết ra như thế."

   Trước đây thẻ bày TÁM nút xám giống hệt nhau thành hai hàng. Nhiều nút ngang
   quyền nhau thì không nút nào là chính, và người mới mở ứng dụng phải đọc hết
   tám nhãn mới biết nên bấm gì. Nay chỉ còn MỘT việc chính — "Xem cây từ
   người này" — còn lại nằm sau ⋮.

   🪤 Menu để `position: fixed` và tính toạ độ lúc mở, KHÔNG `absolute` trong
   thẻ: thân thẻ là vùng cuộn, nên menu absolute sẽ trôi khỏi nút mẹ ngay khi
   người dùng cuộn một nhịp. Đổi lại, mở rồi thì phải đóng theo cuộn. */
.menu-noi {
  position: fixed; z-index: 60; min-width: 190px; max-width: calc(100vw - 16px);
  padding: 5px; border-radius: 12px;
  background: var(--giay); border: 1px solid var(--vien-dam);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column;
  /* 🪤 Danh sách việc dài ra theo quyền của người dùng; chủ cây thấy đủ chín
     mục. Trên iPhone SE chín mục cao hơn màn hình, và không có khối này thì
     mấy mục cuối nằm ngoài màn mà không cách nào với tới. */
  max-height: calc(100vh - 24px); overflow-y: auto;
}

/* Nút ⋮ đang mở thì tô đặc: người dùng phải thấy menu này của nút nào. */
.the-dau .dong[aria-expanded="true"] {
  background: var(--son); border-color: var(--son); color: #fff;
}
.menu-noi .muc {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--muc); font: inherit; font-size: 14px;
  cursor: pointer;
}
.menu-noi .muc:hover, .menu-noi .muc:focus-visible { background: var(--son-nhat); color: var(--son); }
.menu-noi .muc:focus-visible { outline: 2px solid var(--son); outline-offset: -2px; }
.menu-noi hr { margin: 5px 8px; border: 0; border-top: 1px solid var(--vien); }
.menu-noi .muc.hiem { color: var(--son); }

.la-toi {
  margin: 10px 0 0; font-size: 13px; color: var(--muc-nhat);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline;
}
.la-toi .lien {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--son); cursor: pointer; text-decoration: underline;
}