/*
 * PHÔNG CHỮ — tự chứa, không gọi CDN.
 *
 * Bitter cho tiêu đề, Be Vietnam Pro cho thân bài. Lý do chọn và giấy phép:
 * xem public/gd/phong/GIAY-PHEP.md.
 *
 * 🪤 `unicode-range` phải khai ĐÚNG, không được bỏ. Thiếu khối `vietnamese`
 * thì trình duyệt vẫn hiện chữ — bằng phông dự phòng của hệ điều hành — nên
 * nhìn qua tưởng chạy tốt, chỉ có điều mỗi chữ có dấu lại nhảy sang một phông
 * khác. Lỗi ấy lộ rõ nhất ở đúng thứ sản phẩm này đầy: tên người Việt.
 *
 * `font-display: swap` để chữ hiện ngay bằng phông dự phòng rồi đổi — thà
 * nhấp nháy một cái còn hơn trang trắng trên mạng 3G ở quê.
 */

@font-face {
  font-family: 'Bitter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('phong/bitter-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bitter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('phong/bitter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('phong/bitter-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('phong/bitter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('phong/bvp-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('phong/bvp-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('phong/bvp-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('phong/bvp-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Giao diện phả đồ. Mobile-first: viết cho màn hình hẹp trước, máy tính là
 * phần mở rộng — không phải web desktop rồi co lại.
 *
 * Bảng màu lấy tinh thần giấy phả cũ: nền ngà, mực nâu đen, son đỏ cho dấu
 * nhấn. Tránh xanh dương mặc định của trình duyệt vì nó làm bản in trông như
 * ảnh chụp màn hình phần mềm, mà cuối cùng dòng họ nào cũng in ra treo.
 */

/*
 * BẢNG MÀU — sơn son thếp vàng trên giấy dó.
 *
 * Một màu nhấn duy nhất trên nền kem là thứ làm trang trông như bản nháp: mọi
 * thứ cùng một sắc độ thì không gì nổi lên, và mắt không biết nhìn đâu trước.
 * Nên có BA tầng:
 *
 *   · SƠN  — đỏ sơn son, dành cho hành động chính và chỗ đang mở. Dùng ít.
 *   · THẾP — vàng thếp, dành cho thứ đáng chú ý mà KHÔNG phải hành động:
 *            giỗ sắp tới, việc chờ duyệt. Tách hẳn khỏi "bấm được".
 *   · MỰC  — thang trung tính ấm, năm bậc, cho toàn bộ phần còn lại.
 *
 * Sắc trung tính đều ngả ấm (hue ~35°), không phải xám máy tính. Xám thuần
 * cạnh đỏ son thì trông bẩn.
 */
:root {
  --giay:      #FAF7F0;   /* nền chính */
  --giay-sau:  #F2EDE2;   /* nền lún, ô nhập */
  --giay-nang: #FFFFFF;   /* thẻ nổi lên trên nền */

  /* Thang mực: mỗi bậc ĐỀU ĐẠT ngưỡng đọc được trên nền giấy, đo bằng
     App\Theme\Theme::doTuongPhan chứ không ướm bằng mắt.
     🪤 Bản trước `--muc-mo` chỉ đạt 2,93 mà vẫn dùng cho nhãn "CÔNG CỤ",
     "SẮP TỚI" và chữ trong khung ảnh trống — dưới ngưỡng 4,5 của WCAG. */
  --muc:       #211C16;   /* 15,80 */
  --muc-dam:   #4A4136;   /*  9,34 */
  --muc-nhat:  #6E6455;   /*  5,43 */
  --muc-mo:    #797065;   /*  4,54 */

  /* 🪤 Viền cũ chỉ 1,29 — gần như vô hình trên nền kem, và đó chính là thứ
     làm cả trang trông nhạt: thẻ không có mép, mắt không thấy ranh giới nào.
     WCAG 1.4.11 đòi 3,0 cho ranh giới của phần tử BẤM ĐƯỢC. */
  --vien:      #A5A095;   /*  2,43 — đường phân cách, mép thẻ */
  --vien-dam:  #8F887B;   /*  3,28 — mép nút, ô nhập */

  --son:       #9E2B18;
  --son-toi:   #7E2011;
  --son-sang:  #C4462C;
  --son-nhat:  #FAEDE8;

  --thep:      #976920;   /*  4,50 */
  --thep-nhat: #FBF2DE;

  --nam:       #2F5D74;
  --nam-nen:   #E7EFF3;
  --nu:        #8A4A6B;
  --nu-nen:    #F5E9F0;
  --song:      #2C7361;
  --an:        #B8B0A3;

  /* Bóng nhiều tầng: một tầng sát để tách khỏi nền, một tầng xa để tạo độ
     nổi. Một tầng duy nhất thì hoặc cứng như viền, hoặc mờ như vết bẩn. */
  --bong-1: 0 1px 2px rgba(33,28,22,.06);
  --bong-2: 0 1px 2px rgba(33,28,22,.05), 0 4px 12px -6px rgba(33,28,22,.18);
  --bong-3: 0 2px 4px rgba(33,28,22,.06), 0 14px 32px -18px rgba(33,28,22,.42);
  --bong:   var(--bong-2);

  --chu-than: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, sans-serif;
  --chu-de:   'Bitter', Georgia, 'Times New Roman', serif;

  --cao-thanh: 60px;
  --cao-hang2: 52px;
  --bo-nho: 8px;
  --bo-vua: 12px;
  --bo-lon: 16px;
}

/* Tông tối do HỌ chọn, đặt bằng `data-tong` trên <html>.
   Phải là một khối riêng chứ không gộp với media query: người dùng có thể
   đang ở máy tông sáng mà dòng họ chọn tông tối, và ngược lại. */
:root[data-tong="toi"] {
  --giay-sau: #1C1813; --giay-nang: #221D17;
  --muc-dam: #CFC5B5; --muc-mo: #7C7263;
  --vien: #322B22; --vien-dam: #463D31;
  --son-toi: #C4553C; --son-sang: #F09076; --son-nhat: #331C16;
  --thep: #D6A85A; --thep-nhat: #2A2113;
  --bong-1: 0 1px 2px rgba(0,0,0,.5);
  --bong-2: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px -6px rgba(0,0,0,.7);
  --bong-3: 0 2px 6px rgba(0,0,0,.5), 0 16px 34px -18px rgba(0,0,0,.9);
}

/* Họ chọn tông SÁNG thì giữ sáng, dù máy đang ở chế độ tối. */
:root[data-tong="sang"] {
  --giay-sau: #F2EDE2; --giay-nang: #FFFFFF;
  --muc-dam: #4A4136; --muc-mo: #9B9081;
  --vien: #E2DBCC; --vien-dam: #CFC5B2;
  --son-toi: #7E2011; --son-sang: #C4462C; --son-nhat: #FAEDE8;
  --thep: #A87524; --thep-nhat: #FBF2DE;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tong="sang"]) {
    --giay: #15120E; --giay-sau: #1C1813; --giay-nang: #221D17;
    --muc: #EFE8DC; --muc-dam: #CFC5B5; --muc-nhat: #A99E8E; --muc-mo: #7C7263;
    --vien: #322B22; --vien-dam: #463D31;

    /* Đỏ son nguyên bản trên nền tối thì tối quá, gần như đen. Kéo sáng lên
       cho đủ tương phản — cùng luật đã viết cho bản in ở App\Theme\Theme. */
    --son: #E27358; --son-toi: #C4553C; --son-sang: #F09076; --son-nhat: #331C16;
    --thep: #D6A85A; --thep-nhat: #2A2113;

    --nam: #8FC0D8; --nam-nen: #16242C; --nu: #D69CBC; --nu-nen: #2A1A24;
    --song: #6CBFA3; --an: #4A4237;
    --bong-1: 0 1px 2px rgba(0,0,0,.5);
    --bong-2: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px -6px rgba(0,0,0,.7);
    --bong-3: 0 2px 6px rgba(0,0,0,.5), 0 16px 34px -18px rgba(0,0,0,.9);
    --bong: var(--bong-2);
  }
}

* { box-sizing: border-box; }

/*
 * BẮT BUỘC PHẢI CÓ, ĐỪNG XOÁ.
 *
 * Thuộc tính `hidden` của HTML chỉ là `display: none` trong bảng kiểu mặc định
 * của trình duyệt, mà bảng kiểu của TÁC GIẢ luôn thắng bảng kiểu mặc định —
 * bất kể độ đặc hiệu. Nên chỉ cần một dòng `display: grid` ở `.lop-mo` là hộp
 * đăng nhập hiện đè lên cả trang ngay từ lúc mở, dù JavaScript đã đặt
 * `hidden = true`.
 *
 * Đúng loại lỗi jsdom không bắt được: jsdom trả về `display: none` nên bộ kiểm
 * thử vẫn xanh, chỉ trình duyệt thật mới lộ.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--giay); color: var(--muc);
  font: 15px/1.55 var(--chu-than);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------- Thanh trên ---------- */

.thanh {
  position: fixed; inset: 0 0 auto 0; height: var(--cao-thanh); z-index: 20;
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: color-mix(in srgb, var(--giay) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vien);
  padding-top: env(safe-area-inset-top);
}
.thanh-trai { min-width: 0; flex: 0 1 auto; }
.thanh h1 {
  margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.phu { margin: 0; font-size: 11.5px; color: var(--muc-nhat); }
.thanh-trai .phu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.thanh-giua { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.thanh-phai { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

/*
 * NÚT — ba bậc, và mỗi bậc có đủ bốn trạng thái.
 *
 * Nút cũ chỉ khác nhau ở màu nền và đổi đúng một thứ khi rê chuột. Thiếu
 * trạng thái là thứ khiến giao diện "trông như bản nháp" mà khó gọi tên: mắt
 * người đọc độ nổi và độ lún để biết cái gì bấm được, và một mặt phẳng không
 * đổi thì đọc ra là hình vẽ, không phải nút.
 */
.nut {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  padding: 8px 12px; border-radius: var(--bo-nho);
  border: 1px solid var(--vien-dam);
  background: var(--giay-nang); color: var(--muc-dam);
  box-shadow: var(--bong-1);
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.nut:hover { background: var(--giay-sau); border-color: var(--muc-mo); color: var(--muc); }
.nut:active { transform: translateY(1px); box-shadow: none; }
.nut:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }
.nut .bt { width: 16px; height: 16px; }

/* Bậc CHÍNH: một hành động mỗi màn hình. Nhiều nút chính là không nút nào
   chính. Dốc màu rất nhẹ để mặt nút không phẳng lì. */
.nut-chinh {
  background: linear-gradient(180deg, var(--son-sang), var(--son));
  border-color: var(--son-toi); color: #fff;
  box-shadow: var(--bong-2);
}
.nut-chinh:hover {
  background: linear-gradient(180deg, var(--son), var(--son-toi));
  border-color: var(--son-toi); color: #fff;
}

/* Bậc NHẸ: hành động phụ, hoặc thứ có thể lùi lại được. */
.nut-nhe {
  background: transparent; border-color: transparent;
  box-shadow: none; color: var(--muc-nhat);
}
.nut-nhe:hover { background: var(--giay-sau); border-color: var(--vien); }

/* ---------- Ô tìm ---------- */

.o-tim { position: relative; width: min(420px, 100%); }
.o-tim input {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--giay-sau); color: var(--muc);
}
.o-tim input:focus { outline: 2px solid var(--son); outline-offset: 1px; }

.kq-tim {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  max-height: 60vh; overflow-y: auto;
  background: var(--giay); border: 1px solid var(--vien);
  border-radius: 12px; box-shadow: var(--bong); padding: 4px;
}
.kq-tim button {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muc); cursor: pointer;
}
.kq-tim button:hover { background: var(--giay-sau); }
.kq-tim .nho { font-size: 11.5px; color: var(--muc-nhat); }
.kq-tim .trong { padding: 10px; color: var(--muc-nhat); font-size: 13px; }

/* ---------- Khung vẽ ---------- */

.khung { position: fixed; inset: var(--cao-thanh) 0 var(--cao-duoi) 0; }
#phado {
  width: 100%; height: 100%; display: block;
  touch-action: none;                 /* tự xử lý chạm–kéo–chụm */
  cursor: grab;
  /* 🪤 Nền chấm đã bỏ. Lưới chấm là ngôn ngữ của Figma và Miro — bảng vẽ vô
     tận, chưa có gì trên đó. Một cuốn gia phả thì ngược lại: nó là tờ giấy đã
     có chữ. Nền giấy phẳng, và cấu trúc do DẢI ĐỜI nói ra. */
  background: var(--giay);
}

/* Dải đời: xen kẽ hai sắc giấy rất nhạt. Đủ để mắt tách được hàng, không đủ
   để tranh chú ý với tên người. */
.dai-doi { fill: none; }
.dai-doi.le { fill: var(--giay-sau); }

.nhan-doi {
  font-family: var(--chu-de);
  font-size: 12.5px; font-weight: 700;
  fill: var(--son);
  letter-spacing: .06em;
  paint-order: stroke;
  stroke: var(--giay); stroke-width: 4; stroke-linejoin: round;
}
#phado.dang-keo { cursor: grabbing; }

/* Cạnh */
.canh { fill: none; stroke: var(--muc-mo); stroke-width: 1.4; }
.canh-vo-chong { stroke: var(--muc-nhat); stroke-width: 1.8; }
.canh-nuoi { stroke-dasharray: 4 3; }
.canh-phu { stroke: var(--son); stroke-dasharray: 2 4; marker-end: url(#mui-ten); }
.mui-ten { fill: var(--son); }

/* Thẻ người */
/* Ô người: nền GIẤY cho mọi người, không tô màu theo giới.
 *
 * 🪤 Xanh-trai / hồng-gái vừa sáo vừa KHÔNG phải quy ước của phả Việt — phả đồ
 * chép tay không tô màu theo giới bao giờ. Tệ hơn, tô nền màu làm tương phản
 * của chữ tụt xuống: chữ đen trên nền hồng nhạt đọc mệt hơn hẳn trên nền giấy.
 *
 * Giới tính chuyển thành VỆT MÉP TRÁI — đọc ra ngay, không đụng vào nền chữ. */
.the-nen { fill: var(--giay-nang); stroke: var(--vien-dam); stroke-width: 1.2; }
/* Ảnh nhỏ trong ô. Chữ đầu tên nằm DƯỚI ảnh chứ không thay ảnh: đường tải ảnh
   tự canh điều 7 nên có thể trả 404, và khi ấy ô vẫn phải có gì đó để đọc. */
.o-anh-nen { fill: var(--giay-sau); stroke: var(--vien-dam); stroke-width: 1; }
.o-anh-chu { font-size: 15px; font-weight: 700; fill: var(--muc-mo); text-anchor: middle; }
/* Dải băng tang vắt chéo góc trên phải ô người đã mất. Đen thật, không phải
   xám — dải băng tang không có sắc độ trung gian. */
.bang-tang { fill: #1A1613; stroke: none; }
.nguoi.an   .the-nen { fill: var(--giay-sau); stroke-dasharray: 5 3; stroke: var(--an); }
.nguoi.tam  .the-nen { stroke: var(--son); stroke-width: 2.4; }
.nguoi.chon .the-nen { stroke: var(--son); stroke-width: 2.4; }

.nguoi { cursor: pointer; }
.nguoi text { pointer-events: none; }
.ten  { font-size: 13px; font-weight: 700; fill: var(--muc); }
.ho   { font-size: 10.5px; fill: var(--muc-nhat); }
.nam-thang { font-size: 10px; fill: var(--muc-nhat); font-variant-numeric: tabular-nums; }

/* Giới tính bằng CHỮ, nghiêng và nhỏ. Một vệt màu bắt người ta học bảng chú
   dẫn rồi nhớ; chữ "(nam)" thì đọc là hiểu. */
.gioi { font-size: 9.5px; font-style: italic; fill: var(--muc-mo); }
/* Chấm "còn sống": viền giấy quanh chấm để nó tách khỏi mép ô, không lẫn vào
   đường bao. Không dùng viền chạy quanh cả ô nữa — xem lý do ở veNguoi(). */
.cham-song { fill: var(--song); stroke: var(--giay-nang); stroke-width: 1.6; }

.dai-chi { }
.cham-hon { fill: var(--muc-nhat); stroke: var(--giay); stroke-width: 1.5; }
.cham-hon.hai { fill: var(--son); }

.nut-bung {
  fill: var(--giay); stroke: var(--muc-mo); stroke-width: 1.2; cursor: pointer;
}
.nut-bung:hover { fill: var(--son-nhat); stroke: var(--son); }
.dau-bung { font-size: 12px; font-weight: 700; fill: var(--muc-nhat); pointer-events: none; }
.so-an { font-size: 10.5px; fill: var(--son); }

.dang-tai {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--muc); color: var(--giay); font-size: 12.5px;
  padding: 6px 14px; border-radius: 999px; z-index: 10;
}

/* ---------- Bảng chỉ dẫn ---------- */
/* Mở cây ra mà không biết bấm gì thì tấm phả đồ đẹp cũng vô dụng. Bảng này
   hiện ở lần mở đầu, tắt đi thì nhớ (localStorage), bấm "?" là mở lại. */
.chi-dan {
  position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(370px, calc(100vw - 24px)); max-height: 62vh; overflow-y: auto;
  background: var(--giay); border: 1px solid var(--vien);
  border-radius: 12px; box-shadow: var(--bong); padding: 14px 16px; z-index: 15;
}
.chi-dan .dong {
  position: absolute; top: 6px; right: 9px;
  font-size: 20px; line-height: 1; background: none; border: 0;
  color: var(--muc-nhat); cursor: pointer;
}
.chi-dan h2 {
  margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muc-nhat); font-weight: 600;
}
.chi-dan h2 + * { margin-top: 0; }
.chi-dan .cach-dung {
  margin: 0 0 14px; padding-left: 17px; font-size: 13px; line-height: 1.55;
}
.chi-dan .cach-dung li { margin-bottom: 4px; }
.chi-dan .vd-nut {
  display: inline-block; min-width: 16px; text-align: center;
  border: 1px solid var(--muc-mo); border-radius: 50%; background: var(--giay-sau);
}
.chi-dan .phu { margin-top: 8px; font-style: italic; }

.chu-dan {
  display: flex; gap: 6px 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muc-nhat);
}

/* Thanh vai vế: nổi trên đầu khung vẽ, không đẩy cây dịch đi. */
.thanh-vai-ve {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 16; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 24px));
  background: var(--giay); border: 1px solid var(--son);
  border-radius: 10px; box-shadow: var(--bong); padding: 9px 10px 9px 14px;
  font-size: 14px;
}
.thanh-vai-ve b { color: var(--son) }
.thanh-vai-ve .chua-chac {
  display: block; font-size: 11.5px; color: var(--muc-nhat); margin-top: 2px;
}
.chu-dan .oo {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 4px; vertical-align: -1px; border: 1px solid var(--vien);
}
/* Chú dẫn phải nói ĐÚNG thứ đang vẽ trên cây: giới tính là vệt mép trái,
   không phải nền tô màu. Chú dẫn lệch với bản vẽ còn tệ hơn không có. */
.oo.nam { background: var(--giay-nang); border-color: var(--vien-dam);
          border-left: 4px solid var(--nam); }
.oo.nu  { background: var(--giay-nang); border-color: var(--vien-dam);
          border-left: 4px solid var(--nu); }
.oo.song { background: var(--song); border-color: var(--song); border-radius: 50%;
           width: 10px; height: 10px; }
.oo.tang {
  background: var(--giay-nang); border-color: var(--vien-dam);
  background-image: linear-gradient(225deg, #1A1613 0 34%, transparent 34%);
}
.oo.an  { background: var(--giay-sau); border-style: dashed; border-color: var(--an); }
.oo.cham  { background: var(--muc-nhat); border-color: var(--muc-nhat); border-radius: 50%; }
.oo.cham2 { background: var(--son); border-color: var(--son); border-radius: 50%; }

/* Đang xem quanh ai — không có dòng này thì kéo vài cái là mất phương hướng. */
.dang-o { color: var(--son); font-weight: 600; }

/* ---------- Thẻ chi tiết ---------- */

.the {
  position: fixed; z-index: 25; background: var(--giay);
  border: 1px solid var(--vien); box-shadow: var(--bong);
  overflow-y: auto;
}
/* Điện thoại: bottom-sheet */
@media (max-width: 720px) {
  .the {
    left: 0; right: 0; bottom: 0;

    /* Cao gần hết màn hình, không dừng ở 62%.
       🪤 62% là con số của thời chưa có nút đóng: phải chừa khoảng trống phía
       trên để người ta bấm ra ngoài mà thoát. Nay đã có dấu × rõ ràng, nên
       khoảng trống ấy chỉ còn là giấy trắng — mà trên màn hình 844px thì đó
       là gần một phần ba chiều cao bỏ không, trong khi danh sách bên dưới
       phải cuộn. Chừa lại đúng một dải hẹp để còn thấy mình đang ở đâu. */
    max-height: calc(100vh - var(--cao-thanh) - 52px);
    border-radius: 16px 16px 0 0; padding: 14px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}
/* Máy tính: cột bên phải */
@media (min-width: 721px) {
  .the {
    top: calc(var(--cao-thanh) + 12px); right: 12px; bottom: 12px;
    width: 340px; border-radius: 14px; padding: 16px 18px;
  }
}
/* Lịch giỗ dùng chung khung thẻ nhưng rộng hơn: nó là một danh sách, không
   phải một hồ sơ. */
@media (min-width: 721px) {
  .the-rong { width: 420px; }
}
.chon-khoang { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; }
.chon-khoang .nut { font-size: 12px; padding: 6px 9px; }
.chon-khoang .nut[aria-pressed="true"] {
  background: var(--son); border-color: var(--son); color: #fff;
}

.ngay-gio { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; }
.mot-gio {
  display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--vien); align-items: baseline;
}
.mot-gio .o-ngay {
  text-align: center; line-height: 1.15;
}
.mot-gio .o-ngay b { display: block; font-size: 18px; font-weight: 700; }
.mot-gio .o-ngay span { font-size: 10.5px; color: var(--muc-nhat); }
.mot-gio .ten-gio { font-size: 14.5px; font-weight: 600; }
.mot-gio button.ten-gio {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--muc); cursor: pointer; text-align: left;
}
.mot-gio button.ten-gio:hover { color: var(--son); }
.mot-gio .phu-gio { font-size: 12px; color: var(--muc-nhat); }
.mot-gio.sap-toi .o-ngay b { color: var(--son); }
.canh-bao-nhuan {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--son-nhat); color: var(--son); margin-left: 6px;
}

.the .dong {
  position: absolute; top: 8px; right: 10px;
  font-size: 22px; line-height: 1; background: none; border: 0;
  color: var(--muc-nhat); cursor: pointer;
}
.the h2 { margin: 0 28px 2px 0; font-size: 18px; letter-spacing: -.01em; }
.the .duoi-ten { margin: 0 0 12px; font-size: 12.5px; color: var(--muc-nhat); }

.the .nhan {
  display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--giay-sau); margin: 0 4px 4px 0;
}
.nhan.song { border-color: var(--song); color: var(--song); }
.nhan.chi  { border-color: var(--son); color: var(--son); }

.the dl { display: grid; grid-template-columns: 92px 1fr; gap: 5px 10px; margin: 12px 0; font-size: 13.5px; }
.the dt { color: var(--muc-nhat); }
.the dd { margin: 0; }

/* Chỉ đường bằng lời — thứ dùng được thật với mộ không có địa chỉ. */
.the .chi-duong {
  margin: 8px 0 0; padding: 9px 11px; font-size: 13.5px;
  background: var(--giay-sau); border-left: 3px solid var(--muc-mo);
  border-radius: 0 8px 8px 0; color: var(--muc);
}
.the .dia-chi { margin: 0; font-size: 14.5px; }
.the .phu { font-size: 12px; }

.canh-bao-rieng-tu {
  margin: 10px 0; padding: 9px 11px; font-size: 12.5px;
  background: var(--son-nhat); border-left: 3px solid var(--son); border-radius: 0 8px 8px 0;
  color: var(--muc);
}
@media (prefers-color-scheme: dark) { /* Chỉ đường bằng lời — thứ dùng được thật với mộ không có địa chỉ. */
.the .chi-duong {
  margin: 8px 0 0; padding: 9px 11px; font-size: 13.5px;
  background: var(--giay-sau); border-left: 3px solid var(--muc-mo);
  border-radius: 0 8px 8px 0; color: var(--muc);
}
.the .dia-chi { margin: 0; font-size: 14.5px; }
.the .phu { font-size: 12px; }

.canh-bao-rieng-tu { color: var(--muc); } }

.the .hang-nut { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.the .hang-sua {
  padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--vien);
}

/* Form sửa: nhãn nhỏ nằm trên ô nhập, ô nhập rộng hết cột — đọc nhanh trên
   điện thoại, và không phải căn hai cột. */
.form-sua { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.form-sua label { display: block; }
.form-sua .nhan-o {
  display: block; font-size: 11.5px; color: var(--muc-nhat); margin-bottom: 3px;
}
.form-sua input[type="text"],
.form-sua input[type="number"],
.form-sua select,
.form-sua textarea {
  width: 100%; font: inherit; font-size: 14.5px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--vien); background: var(--giay-sau); color: var(--muc);
}
.form-sua textarea { resize: vertical; }
.form-sua input:focus, .form-sua select:focus, .form-sua textarea:focus {
  outline: 2px solid var(--son); outline-offset: 1px;
}
.form-sua .o-co {
  display: flex; align-items: center; gap: 7px; font-size: 14.5px;
}
.form-sua .o-co input { width: auto; }

/* Danh sách thành viên và lời mời */
.ds-tv { list-style: none; margin: 8px 0 0; padding: 0; }
.ds-tv li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--vien);
}
.ds-tv .phu { font-size: 11.5px; }
.ds-tv .nhan { flex: 0 0 auto; }
.ds-tv .nho { color: var(--muc-nhat); font-size: 12px; }

/* Hồ sơ họ */
.di-tich {
  border: 1px solid var(--son); background: var(--son-nhat);
  border-radius: 8px; padding: 10px 12px; margin: 12px 0;
}
.di-tich a { font-size: 14px; font-weight: 600; }

/* Sự kiện của họ */
.mot-sk {
  padding: 12px 0; border-bottom: 1px solid var(--vien);
}
.mot-sk.da-qua { opacity: .6; }
.sk-dau { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sk-dau b { font-size: 15px; }
.mot-sk .phu { font-size: 12px; margin: 3px 0 0; }
.mot-sk .hang-nut { margin-top: 8px; }
.mot-sk .nut { font-size: 12px; padding: 6px 9px; }
.ds-dule { margin-top: 8px; }

/* Sổ quỹ */
.tong-quy {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--vien); border: 1px solid var(--vien);
  border-radius: 10px; overflow: hidden; margin: 10px 0 14px;
}
/* 🪤 Ô số phải là CỘT. Bản đầu để mặc định nên nhãn và số dính liền thành
   "Đã thu0đ" — mắt đọc lướt qua thành một chữ vô nghĩa, mà không có lỗi nào
   báo vì cả hai phần tử đều đúng chỗ. */
.tong-quy > div {
  background: var(--giay); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.tong-quy .nhan-o { font-size: 11.5px; color: var(--muc-nhat); }
.tong-quy b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tong-quy .thu { color: var(--song); }
.tong-quy .chi { color: var(--son); }

.mo-ghi { margin-bottom: 12px; }
.mo-ghi summary { cursor: pointer; font-size: 13.5px; color: var(--son); }

.ds-quy { list-style: none; margin: 0; padding: 0; }
.ds-quy li {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: 10px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--vien);
}
.o-quy-tien {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
  white-space: nowrap;
}
.o-quy-tien.thu { color: var(--song); }
.o-quy-tien.chi { color: var(--son); }
.o-quy-mo-ta .phu { font-size: 11.5px; }
/* Khoản đã bị đảo: gạch ngang số tiền, nhưng KHÔNG xoá khỏi sổ. */
.ds-quy li.da-dao .o-quy-tien { text-decoration: line-through; opacity: .55; }
.ds-quy li.but-dao { background: var(--giay-sau); }

/* Đường dẫn mời chỉ hiện MỘT LẦN nên phải bày thật rõ. */
.link-moi {
  border: 1px solid var(--son); background: var(--son-nhat);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.link-moi h3 { margin-top: 0; color: var(--son); }
.link-moi input {
  width: 100%; font: inherit; font-size: 13px; margin: 4px 0;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--vien); background: var(--giay); color: var(--muc);
}
.the h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--muc-nhat); margin: 14px 0 6px; font-weight: 600; }
.ds-nguoi { list-style: none; margin: 0; padding: 0; }
.ds-nguoi li { margin-bottom: 3px; }
.ds-nguoi button {
  font: inherit; font-size: 13.5px; background: none; border: 0; padding: 2px 0;
  color: var(--muc); cursor: pointer; text-align: left; border-bottom: 1px dotted var(--vien);
}
.ds-nguoi button:hover { color: var(--son); border-color: var(--son); }
.ds-nguoi .nho { color: var(--muc-nhat); font-size: 11.5px; }

/* ---------- Lớp mờ + đăng nhập ---------- */

.lop-mo {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(38,32,26,.42); backdrop-filter: blur(2px); padding: 16px;
}
.hop {
  width: min(380px, 100%); background: var(--giay); border-radius: 14px;
  border: 1px solid var(--vien); box-shadow: var(--bong); padding: 20px;
}
.hop h2 { margin: 0 0 4px; font-size: 19px; }
.hop label { display: block; margin: 12px 0 0; font-size: 12.5px; color: var(--muc-nhat); }
.hop input {
  width: 100%; font: inherit; font-size: 15px; margin-top: 4px;
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--vien);
  background: var(--giay-sau); color: var(--muc);
}
.hop .hang-nut { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.loi { color: var(--son); font-size: 13px; margin: 10px 0 0; }

.bao {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  background: var(--muc); color: var(--giay); font-size: 13px;
  padding: 9px 16px; border-radius: 10px; max-width: 90vw;
}

@media (max-width: 720px) {
  /* Chiều cao do JS đo và ghi vào `--cao-thanh` — xem doThanhTren().
     Không đặt con số cứng ở đây: thanh cao bao nhiêu là tuỳ số nút và độ dài
     tên dòng họ. */
  .thanh { flex-wrap: wrap; height: auto; padding: 8px 10px; gap: 8px; }
  .thanh-trai { order: 1; flex: 1 1 auto; }

  /* 🪤 LUẬT CHẾT SAU KHI DỜI CHỖ. Trước đây ô tìm nằm TRONG thanh trên và
     `order: 3` đẩy nó xuống hàng dưới cùng — đúng lúc ấy. Dời ô tìm sang
     hàng 2 mà để nguyên luật cũ thì `order: 3` áp vào chỗ mới và đẩy ô tìm
     ra SAU mấy nút điều khiển: trên điện thoại hiện ra "⌂ − + ⛶  Tìm người",
     nút trước ô tìm sau. Không lỗi nào báo, và ở màn rộng thì không thấy.
     Đổi chỗ một phần tử thì phải soi lại mọi luật đang trỏ vào nó. */
  .thanh-hai .thanh-giua { order: 0; flex: 1 1 auto; }

  /* Hàng nút TRƯỢT NGANG thay vì xuống dòng hay bị cắt.
     🪤 Bản trước để `flex: 0 0 auto` nên nút cuối bị mép màn hình cắt cụt —
     ảnh chụp của David cho thấy "Cây củ…". Cho xuống dòng thì thanh trên cao
     ba hàng, ăn hết màn hình điện thoại. Trượt ngang giữ đúng một hàng và
     không nút nào biến mất. */
  .thanh-phai {
    order: 2;
    /* 🪤 Từng để `1 1 100%` để hàng nút xuống dòng riêng — hồi ấy có tám nút.
       Nay điều hướng đã chuyển xuống thanh dưới nên chỉ còn hai nút, mà luật
       cũ vẫn ép chúng chiếm trọn một hàng: mất một hàng của màn hình 844px
       cho hai cái nút. Co lại theo nội dung, vẫn trượt được nếu về sau dài ra. */
    flex: 0 1 auto;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .thanh-phai::-webkit-scrollbar { display: none; }
  .thanh-phai > * { flex: 0 0 auto; }
  .thanh h1, .thanh-trai .phu { max-width: 100%; }
  .nut { padding: 7px 9px; }
  #nut-vua, #nut-goc { font-size: 12px; padding: 7px 8px; }
  /* Chỉ dẫn KHÔNG ẩn trên điện thoại: người cần nó nhất là người mở bằng
     điện thoại lần đầu. Chỉ thu gọn lại cho vừa. */
  .chi-dan { width: calc(100vw - 24px); max-height: 46vh; font-size: 13px; }
}


/* Đầu thẻ: ảnh bên trái, tên và nhãn bên phải.
   `align-items: start` để tên bám mép trên ảnh; căn giữa thì tên trôi xuống
   giữa khung và mất liên hệ với dòng đầu. */
.dau-the {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.dau-the { align-items: center; }
.dau-chu { min-width: 0; flex: 1 1 auto; display: flex;
           flex-direction: column; gap: 8px; align-items: flex-start; }
.dau-the .duoi-ten { margin: 0; font-size: 14px; }
.hang-nhan { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ảnh chân dung trong thẻ người.
   Khung 3:4 cố định và `object-fit: cover` để ảnh nào cũng vừa: người ta tải
   lên đủ kiểu tỉ lệ, và ảnh méo trong gia phả trông rất tệ. */
.chan-dung {
  display: block;
  width: 84px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--vien);
  margin: 0;
  flex: 0 0 auto;
  background: var(--giay-sau);
}

/* Ảnh thờ của người đã mất là ảnh trắng đen — đúng lệ, không phải hiệu ứng. */
img.chan-dung.da-mat { filter: grayscale(1); }

/* Khung CHỜ SẴN khi chưa có ảnh.
   Không để trống: khung rỗng lặp ở mọi thẻ trông như lỗi in. Nó mang chữ đầu
   tên người ấy — đúng lối ảnh đại diện quen thuộc — nên đọc ra là "chưa có
   ảnh", không phải "hỏng". */
.chan-dung-trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-style: dashed;
  color: var(--muc-mo);
  user-select: none;
}

.chan-dung-trong .chu-dau {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--muc-mo);
}

/* Lời mời chỉ hiện khi người xem THẬT SỰ thêm được ảnh. Mời người không có
   quyền là mời họ bấm vào một nút máy chủ sẽ từ chối. */
.chan-dung-trong .moi {
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--son);
}

.chan-dung-trong.moi-them {
  cursor: pointer;
  border-color: var(--son);
  background: var(--son-nhat);
}

.chan-dung-trong.moi-them:hover,
.chan-dung-trong.moi-them:focus-visible {
  border-style: solid;
}


/* Danh sách cạnh ghép cây. Mỗi mục là một quyết định của con người, không phải
   một dòng dữ liệu — nên để rộng và tách bạch, đừng nén thành bảng. */
.ds-ghep { list-style: none; padding: 0; margin: 0; }
.ds-ghep > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--vien, #e6e1d9);
}
.ds-ghep > li:last-child { border-bottom: 0; }
.ds-gon { list-style: none; padding: 0; margin: 0 0 8px; }
.ds-gon > li { padding: 4px 0; }


/* Ô đồng ý cho chép nhánh. Để rộng và rõ: đây là người ta đang cho phép chép
   dữ liệu vợ con mình sang cây khác, không phải một tuỳ chọn hiển thị. */
.dong-chon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 14px;
  color: var(--muc-nhat);
}


/* =====================================================================
   Màn hình và thanh dưới
   =====================================================================
   Ứng dụng có bốn chỗ đến. Thanh dưới ở MỌI cỡ màn hình, không chỉ điện
   thoại: đây là kiến trúc điều hướng app native sẽ dùng lại, mà hai kiểu điều
   hướng cho hai cỡ màn hình là hai thứ phải giữ đồng bộ về sau. */

:root { --cao-duoi: 58px; }

/* MỌI màn hình đều cuộn được.
 *
 * 🪤 Đã mắc: chỉ `#trang-chu` có luật cuộn, nên màn hình "Tôi" và trang thông
 * tin bị cắt cụt ở mép dưới — nội dung dài hơn màn hình là mất hẳn phần còn
 * lại, không có thanh cuộn, không có gì báo. `html, body` đã `overflow: hidden`
 * để cây không kéo cả trang theo, nên KHÔNG có lớp nào cuộn thay được.
 *
 * Đặt luật ở `.man` chứ đừng liệt kê từng màn hình: thêm màn hình thứ năm mà
 * quên thêm tên vào danh sách thì lại đúng lỗi này.
 */
.man {
  position: fixed; inset: var(--cao-thanh) 0 var(--cao-duoi) 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Trừ khung cây: nó là mặt phẳng kéo–chụm, tự lo việc di chuyển. Để nó cuộn
   thì kéo cây một cái là cả khung trôi theo. */
#man-cay { overflow: hidden; }

.thanh-duoi {
  position: fixed; inset: auto 0 0 0; z-index: 25;
  box-shadow: 0 -1px 0 var(--vien), 0 -6px 20px -14px rgba(33,28,22,.3);
  height: calc(var(--cao-duoi) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--giay);
  border-top: 1px solid var(--vien);
}

.mucd {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--muc-nhat);
  font: inherit; font-size: 11px;
  padding: 6px 2px;
}
.mucd-hinh { width: 21px; height: 21px; }
.mucd-chu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mucd.dang { color: var(--son); font-weight: 600; }
/* Vạch chỉ mục đang mở — ở TRÊN, như thanh điều hướng của app.
   Chỉ đổi màu chữ thì trên màn hình nhỏ khó thấy, nhất là ngoài nắng. */
.mucd::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 26px; height: 2.5px; border-radius: 0 0 3px 3px;
  background: var(--son); transform: translateX(-50%) scaleX(0);
  transition: transform .16s;
}
.mucd { position: relative; }
.mucd.dang::before { transform: translateX(-50%) scaleX(1); }
.mucd:focus-visible { outline: 2px solid var(--son); outline-offset: -2px; }

/* Thẻ nổi phải nằm TRÊN thanh dưới, không bị nó che mất hàng nút cuối. */
@media (max-width: 720px) {
  .the { bottom: calc(var(--cao-duoi) + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) {
  .the { bottom: calc(var(--cao-duoi) + 12px); }
}

/* ---- trang chủ ---- */

.tc-noi-dung { max-width: 760px; margin: 0 auto; padding: 22px 16px 32px; }

/* Thẻ dòng họ: con triện đỏ bên trái, tóm tắt ở giữa, hành động bên phải.
   Con triện là mỏ neo thị giác của cả trang — một khối đặc, đậm màu, có sức
   nặng. Không có nó thì đầu trang chỉ là chữ trên nền, và không gì giữ mắt. */
.the-cay {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; border-radius: var(--bo-lon);
  border: 1px solid var(--vien);
  background: var(--giay-nang);
  box-shadow: var(--bong-3);
}

.tc-trien {
  flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(158deg, var(--son-sang), var(--son-toi));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), var(--bong-2);
  color: #fff;
}
.tc-trien span {
  font-size: 25px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em;
}

.tc-than { min-width: 0; flex: 1 1 auto; }
.tc-nhan {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--son);
  margin-bottom: 3px;
}
/* 🪤 Phải là `>` chứ không phải hậu duệ. `.tc-than b` bắt luôn thẻ <b> nằm
   trong `.tc-dong` bên dưới, nên tên thuỷ tổ bị phóng lên 19px và xuống dòng
   riêng — nhìn thành ba dòng rời rạc thay vì một câu tóm tắt. Đúng loại lỗi
   không có gì báo: CSS vẫn hợp lệ, chỉ là chọn nhầm phần tử. */
.tc-than > b { display: block; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.tc-dong { margin: 4px 0 0; font-size: 13.5px; color: var(--muc-nhat); }
.tc-dong b { font-weight: 600; color: var(--muc-dam); }
.tc-mo { flex: 0 0 auto; }

@media (max-width: 560px) {
  .the-cay { flex-wrap: wrap; }
  .tc-mo { width: 100%; justify-content: center; padding: 11px; }
}

/* ---- sắp tới: phần SỐNG của trang ---- */

.tc-sap { margin-top: 24px; }
.tc-sap-ds { display: grid; gap: 8px; }

.o-sap {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; cursor: pointer; font: inherit;
  padding: 12px 14px; border-radius: var(--bo-vua);
  border: 1px solid var(--vien); background: var(--giay-nang);
  color: var(--muc); box-shadow: var(--bong-1);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.o-sap:hover { border-color: var(--vien-dam); box-shadow: var(--bong-2); }
.o-sap:active { transform: translateY(1px); }
.o-sap:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }

.sap-hinh {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--son-nhat); color: var(--son);
}
.o-sap.sk .sap-hinh { background: var(--thep-nhat); color: var(--thep); }

.sap-chu { min-width: 0; flex: 1 1 auto; display: block; }
.sap-chu b { display: block; font-size: 15px; line-height: 1.3;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-chu span { display: block; font-size: 12.5px; color: var(--muc-nhat); margin-top: 1px; }

/* Số ngày còn lại là thứ người ta liếc tìm — cho nó chữ số đều và một viên
   nhãn riêng, đừng để lẫn vào dòng mô tả. */
.sap-con {
  flex: 0 0 auto; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 5px 9px; border-radius: 999px;
  background: var(--giay-sau); color: var(--muc-nhat);
  white-space: nowrap;
}
.sap-con.gan { background: var(--son); color: #fff; }

/* ---- công cụ: lưới ô vuông, không phải danh sách ---- */

.tc-de {
  margin: 26px 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muc-mo);
}

/* Hai cột trên điện thoại, ba cột khi đủ rộng.
   🪤 Đừng quay lại một cột kèm mô tả: sáu hàng giống hệt nhau ăn hết màn hình
   mà không hàng nào nổi hơn hàng nào — mắt phải ĐỌC mới biết đâu là đâu, trong
   khi biểu tượng thì nhận ra bằng hình dạng. */
.tc-luoi { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .tc-luoi { grid-template-columns: repeat(3, 1fr); } }

.o-cong-cu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; min-height: 112px;
  text-align: center; cursor: pointer; font: inherit;
  padding: 16px 10px; border-radius: var(--bo-vua);
  border: 1px solid var(--vien); background: var(--giay-nang);
  color: var(--muc); box-shadow: var(--bong-1);
  transition: border-color .12s, box-shadow .12s, transform .06s, background .12s;
}
.o-cong-cu:hover {
  border-color: var(--son); box-shadow: var(--bong-2);
  background: var(--son-nhat);
}
.o-cong-cu:active { transform: translateY(1px); }
.o-cong-cu:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }

.cc-hinh {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--son-nhat); color: var(--son);
}
.o-cong-cu:hover .cc-hinh { background: var(--giay-nang); }
.cc-hinh .bt { width: 25px; height: 25px; }

.o-cong-cu b { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* Lưới MỘT cột dùng ở mục "Tôi", nơi mỗi mục là một dòng có chữ phụ. */
.tc-luoi.mot { grid-template-columns: 1fr; }
.tc-luoi.mot .o-cong-cu {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 0; text-align: left; gap: 12px; padding: 12px 12px 12px 14px;
}
.tc-luoi.mot .cc-hinh { width: 40px; height: 40px; border-radius: 11px; }
.tc-luoi.mot .cc-hinh .bt { width: 21px; height: 21px; }
.cc-chu { min-width: 0; flex: 1 1 auto; display: block; }
.cc-chu b { display: block; font-size: 14.5px; line-height: 1.3; }
.cc-chu span { display: block; font-size: 12.5px; color: var(--muc-nhat); margin-top: 1px; }

/* ---- chưa thuộc dòng họ nào ---- */

.tc-mo h2 { margin: 6px 0 6px; }
.tc-mo > p { color: var(--muc-nhat); margin: 0 0 14px; }
.tc-lon { display: grid; gap: 10px; }

.the-lon {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  text-align: left; cursor: pointer;
  padding: 16px; border-radius: 12px; font: inherit;
  border: 1px solid var(--son); background: var(--son); color: #fff;
}
.the-lon b { font-size: 16px; }
.the-lon span { font-size: 13px; line-height: 1.4; opacity: .92; }
.the-lon.nhat { background: var(--giay); color: var(--muc); border-color: var(--vien); }
.the-lon.nhat span { color: var(--muc-nhat); opacity: 1; }

.tc-doi { margin-top: 14px; font-size: 14px; color: var(--muc-nhat); }
.tc-doi select { margin-left: 6px; font: inherit; padding: 5px 8px;
                 border: 1px solid var(--vien); border-radius: 8px;
                 background: var(--giay); color: var(--muc); }
.tc-nhac { margin-top: 18px; font-size: 13px; color: var(--muc-nhat); }


/* Mọi biểu tượng dùng chung một hình học Lucide: nét 2, không tô, đầu và góc
   bo tròn. Đặt ở MỘT chỗ để cả bộ không bao giờ lệch nhau. */
.bt { width: 22px; height: 22px; flex: 0 0 auto; }
.bt, svg[class*="-hinh"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Ô tìm người chỉ thuộc về màn hình CÂY. Để nó chình ình trên trang chủ là
   chiếm nguyên một hàng của màn hình điện thoại cho thứ chưa dùng tới. */
.thanh-giua[hidden] { display: none !important; }

@media (max-width: 720px) {
  /* Số người và số đời đã có trong thẻ dòng họ ngay dưới — nhắc lại trên
     thanh là ăn thêm một hàng nữa của màn hình 844px. */
  .thanh-trai .phu { display: none; }

  /* Tên dòng họ CẮT BỚT chứ không xuống dòng. Tên họ Việt kèm quê quán thì
     hay dài, và dài là nó chiếm trọn hàng rồi đẩy hàng nút xuống dòng riêng.
     🪤 `max-width: 100%` KHÔNG cắt được: phần trăm tính theo ô cha, mà ô cha
     lại nở theo chính nội dung. Phải cho ô cha CO LẠI ĐƯỢC —
     `flex: 1 1 0` cộng `min-width: 0` — rồi phép cắt mới có chỗ bám. */
  .thanh-trai { flex: 1 1 0; min-width: 0; }
  .thanh h1 { max-width: 100%; }
}


/* Vạch "hoặc" giữa hai lối đăng nhập. Hai lối NGANG HÀNG — người cần đường
   thứ hai nhất là bác lớn tuổi không nhớ mật khẩu, mà đó cũng là người ít chịu
   đi tìm chữ nhỏ nhất. */
.hoac {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px; color: var(--muc-nhat); font-size: 12.5px;
}
.hoac::before, .hoac::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--vien);
}

/* Ô nhập mã: to, thưa chữ, dễ đọc lại từ thư trên một cái điện thoại khác. */
.o-ma-so {
  font-size: 26px; letter-spacing: .34em; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- CHÂN TRANG: dấu hiệu, bản quyền, pháp nhân vận hành ----
   Đặt cuối mỗi màn hình dài. Cố ý NHẠT và NHỎ: nó là thứ người ta tìm khi cần,
   không phải thứ chen vào giữa việc đang làm. Nhưng cũng không quá nhạt —
   dòng "đang chạy thử nghiệm" là một lời cam kết, phải đọc được. */
.chan-trang {
  margin: 30px 0 8px; padding: 16px 0 8px;
  border-top: 1px solid var(--vien);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
}
.chan-logo { width: 148px; height: auto; opacity: .85; }

/* 🪤 CHÂN TRANG KHÔNG ĐƯỢC TO BẰNG NỘI DUNG. David gạt 30/08: "cho dòng tên
   công ty và vận hành bé xiu xíu thôi". Đúng — mấy dòng pháp lý là thứ phải
   CÓ chứ không phải thứ để đọc; chiếm chỗ ngang với việc của dòng họ là sai
   thứ bậc, mà đây lại là khối đóng lại mọi màn hình nên nó lặp đi lặp lại. */
.chan-cau {
  margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--muc-mo);
  max-width: 44ch;
}
/* 🪤 Dòng "đang chạy thử nghiệm" đậm hơn hai dòng kia. Nó nói với người dùng
   rằng dữ liệu còn có thể thay đổi — chìm nghỉm giữa hai dòng pháp lý thì
   không ai đọc, mà đó lại là dòng duy nhất ảnh hưởng tới quyết định của họ. */
.chan-cau b { color: var(--muc-nhat); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  /* Logo ngang là hình đỏ trên nền trong suốt — trên nền tối vẫn đọc được,
     nhưng nhạt đi một chút cho khỏi chói. */
  .chan-logo { opacity: .85; }
}

/* ---- dấu hiệu sản phẩm trên thanh trên ---- */

.dau-hieu {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--muc); flex: 0 0 auto;
}
.dau-hieu-hinh { width: 30px; height: 30px; flex: 0 0 auto; color: #fff; }
.dh-nen { fill: var(--son); }
.dau-hieu-ten {
  font-size: 15px; font-weight: 700; letter-spacing: -.015em;
  white-space: nowrap;
}

/* Tên ứng dụng hiện ở MỌI cỡ màn hình.
   🪤 Bản trước giấu nó trên điện thoại để nhường chỗ cho tên dòng họ. Sai:
   thanh tiêu đề là chỗ duy nhất mang dấu hiệu sản phẩm, và giấu nó đi trên
   đúng thiết bị mà phần lớn người dùng dùng thì coi như không có. Tên dòng họ
   đã đứng to ở thẻ đầu trang chủ và ở dòng "đang xem quanh" của màn hình cây. */
@media (max-width: 720px) {
  .dau-hieu-hinh { width: 26px; height: 26px; }
  .dau-hieu-ten { font-size: 14px; }

  /* Tên dòng họ nhường chỗ khi hẹp — nó có chỗ đứng khác. */
  .thanh-trai { display: none; }
}

/* ---- màn hình Tôi ---- */

.toi-dau {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; border-radius: var(--bo-lon);
  border: 1px solid var(--vien); background: var(--giay-nang);
  box-shadow: var(--bong-2);
}
.toi-anh {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--son-nhat); color: var(--son);
  font-size: 19px; font-weight: 700;
}
.toi-chu { min-width: 0; flex: 1 1 auto; }
.toi-chu b { display: block; font-size: 16px; }
.toi-chu span {
  display: block; font-size: 13px; color: var(--muc-nhat);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tc-luoi.mot { grid-template-columns: 1fr; }
a.o-cong-cu { text-decoration: none; }

/* Danh sách trang thông tin: một cột, hàng mảnh. Chúng là thứ tìm đúng một
   lần rồi thôi, nên không cạnh tranh chú ý với phần trên. */
.ds-tin {
  border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang); overflow: hidden;
}
.o-tin {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; font-size: 14.5px;
  color: var(--muc); text-decoration: none;
  border-bottom: 1px solid var(--vien);
}
.o-tin:last-child { border-bottom: 0; }
.o-tin:hover { background: var(--giay-sau); }
.o-tin .cc-mui { color: var(--muc-mo); }

.toi-chan {
  margin: 26px 0 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--muc-nhat);
}
.toi-chan .phu { font-weight: 400; font-size: 12.5px; }

/* ---- trang thông tin ---- */

.van-ban { max-width: 62ch; margin: 14px auto 0; }
.van-ban h1 { font-size: 24px; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.015em; }
.van-ban h2 {
  font-size: 16px; margin: 26px 0 8px; letter-spacing: -.005em;
  color: var(--muc);
}
.van-ban p, .van-ban li { font-size: 14.5px; line-height: 1.62; color: var(--muc-dam); }
.van-ban ul { padding-left: 20px; }
.van-ban li { margin-bottom: 5px; }
.van-ban a { color: var(--son); }

/* 🪤 KHÔNG CÓ LUẬT NÀO CHO THẺ `a` TRONG CẢ TỆP — chỉ có hai luật cục bộ cho
   `.di-tich` và `.van-ban`. Mọi đường dẫn ở chỗ khác rơi về **xanh gạch chân
   mặc định của trình duyệt**, lạc hẳn khỏi bảng màu giấy–mực. Lộ ra ở form
   đăng ký: hai dòng "Điều khoản sử dụng" và "Chính sách riêng tư" xanh lè
   giữa một hộp toàn màu son.

   Đặt luật chung ở đây, và giữ gạch chân: bỏ gạch chân thì đường dẫn nằm giữa
   câu văn không còn dấu hiệu nào nói nó bấm được, ngoài màu — mà người mù màu
   thì không thấy màu. */
a {
  color: var(--son);
  text-decoration-color: color-mix(in srgb, var(--son) 45%, transparent);
  text-underline-offset: 2px;
}
a:hover { color: var(--son-toi); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; border-radius: 2px; }

/* Trừ những chỗ CỐ Ý không giống đường dẫn: thẻ người, ô công cụ, mục dịch vụ
   — chúng là khối bấm được, không phải chữ trong câu. */
.o-cong-cu, .o-tin, .dv-bang, .o-cay-khac, .mucd, .the-lon { text-decoration: none; }
.van-ban .dan {
  font-size: 16px; line-height: 1.55; color: var(--muc);
  padding-left: 13px; border-left: 3px solid var(--son);
}

/* Chỗ cần chủ sản phẩm hoặc luật sư duyệt — cố tình CHÓI, để không ai lỡ phát
   hành kèm chữ tạm. */
.van-ban .can-duyet {
  margin-top: 28px; padding: 12px 14px; border-radius: var(--bo-nho);
  background: var(--thep-nhat); border: 1px solid var(--thep);
  color: var(--muc); font-size: 13.5px;
}
.van-ban .can-dien {
  background: var(--thep-nhat); border-bottom: 1px dashed var(--thep);
  padding: 1px 5px; border-radius: 3px;
}


/* =====================================================================
   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;
  padding: 13px 14px;
  background: var(--son-nhat);
  border-bottom: 1px solid var(--vien);
}
.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);
}

/* =====================================================================
   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;
}

/* ===========================================================================
   DỊCH VỤ QUANH VIỆC HỌ — chỉ ở trang chủ
   ===========================================================================

   Bố cục mượn của app đa dịch vụ (lưới ô · băng ngang · băng quảng cáo) nhưng
   KHÔNG mượn màu. Mấy app ấy sống bằng vàng chói và nhãn "GIẢM 50%"; đặt thứ
   ấy cạnh cây gia phả thì cả trang biến thành tờ rơi. Ở đây vẫn là giấy và
   mực, ô dịch vụ nhạt hơn ô công cụ một bậc — có mặt nhưng không tranh chỗ
   với việc của dòng họ. */

/* Khối này giờ ở TRANG RIÊNG, không còn nằm trên trang chủ. */
.dv-khoi { margin-top: 26px; }

/* Bốn cột như app đa dịch vụ: hai hàng bốn ô đọc được bằng hình dạng, nhanh
   hơn đọc chữ. Ô công cụ ở trên là hai cột vì mỗi ô một việc lớn; ô dịch vụ
   nhỏ hơn vì nó là danh mục, không phải hành động. */
.dv-luoi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 4px;
}

.dv-o {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px 10px; min-height: 84px;
  border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang); cursor: pointer; font: inherit;
  color: var(--muc); text-align: center;
}
.dv-o span:last-child {
  font-size: 11.5px; line-height: 1.25; color: var(--muc-nhat);
  overflow-wrap: anywhere;
}
.dv-o:hover { border-color: var(--vien-dam); }
.dv-o:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }
.dv-o.chon { border-color: var(--son); background: var(--son-nhat); }
.dv-o.chon span:last-child { color: var(--son); }

.dv-hinh {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--giay-sau); color: var(--muc-dam);
}
.dv-hinh .bt { width: 20px; height: 20px; }
.dv-o.chon .dv-hinh { background: #fff; color: var(--son); }

.dv-dau {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 20px 0 10px;
}
.dv-dau h4 { margin: 0; font-size: 14.5px; font-weight: 600; min-width: 0; }
/* 🪤 Nút đổi địa bàn BỊ CẮT MẤT ở mép phải khi tên tỉnh dài. Tiêu đề phải
   được phép co (`min-width: 0`), còn nút thì không co và không xuống dòng. */
.dv-dau .lien {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--son); cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}

.dv-chon-noi { margin: 18px 0 4px; }
.dv-chon-noi p { margin: 0 0 8px; font-size: 13px; color: var(--muc-nhat); }
.dv-chon-noi select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--vien-dam); border-radius: var(--bo-vua);
  background: var(--giay-nang); color: var(--muc);
}

/* Băng cuộn ngang. Thẻ đủ hẹp để thấy MỘT PHẦN thẻ kế bên — đó là thứ duy
   nhất nói cho người ta biết là cuộn được. Thẻ vừa khít mép màn hình thì
   không ai biết bên phải còn gì. */
.dv-truot {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.dv-truot::-webkit-scrollbar { height: 0; }

.dv-the {
  flex: 0 0 68%; max-width: 240px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang);
}
.dv-the-hinh {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--giay-sau); color: var(--muc-dam);
  margin-bottom: 4px;
}
.dv-the-hinh .bt { width: 18px; height: 18px; }
.dv-the b { font-size: 15px; line-height: 1.3; }
.dv-nganh { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muc-mo); }
.dv-noi { font-size: 12.5px; color: var(--muc-nhat); }
.dv-mo {
  font-size: 12.5px; color: var(--muc-nhat); line-height: 1.5; margin-top: 2px;
  /* Kẹp hai dòng: mô tả dài ngắn khác nhau làm mỗi thẻ một chiều cao, và một
     băng ngang so le thì trông như hỏng. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dv-the { min-height: 0; }
.dv-the .nut { margin-top: auto; }
.dv-the .nut { margin-top: 10px; text-align: center; text-decoration: none; }

.dv-trong {
  margin: 0; padding: 16px; font-size: 13px; line-height: 1.6;
  color: var(--muc-nhat); background: var(--giay-sau);
  border-radius: var(--bo-vua);
}

/* Băng quảng cáo — chỗ bán được tiền. Vẫn phải trông như một mục của trang,
   không như một tờ rơi dán đè lên. */
.dv-bang {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 14px; border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-sau); text-decoration: none; color: inherit;
}
.dv-bang-hinh {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; background: var(--giay-nang); color: var(--muc-dam);
}
.dv-bang-chu { display: block; min-width: 0; flex: 1 1 auto; }
.dv-bang-chu b { display: block; font-size: 14.5px; line-height: 1.35; }
.dv-bang-chu span { display: block; font-size: 12.5px; color: var(--muc-nhat);
  line-height: 1.45; }
.dv-bang-ben { margin-top: 3px; font-size: 11px !important;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muc-mo) !important; }

/* 🪤 `.nhan` chỉ có kiểu dáng trong `.the` — lần thứ tư vấp. Chép luật ra. */
.dv-bang .nhan {
  flex: 0 0 auto; font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--son); color: var(--son); background: var(--giay-nang);
  white-space: nowrap;
}

/* 🪤 CÂU MIỄN TRỪ KHÔNG ĐƯỢC ẨN ĐI CHO GỌN. Tang lễ là ngành có nhiều bên
   chặt chém đúng lúc tang gia bối rối; nói nhỏ nhưng phải nói. */
.dv-nhac {
  margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--muc-mo);
}

/* Lịch vạn niên — mục đầu tiên của Tiện ích. */
.lvn-ra { display: grid; gap: 8px; margin-top: 12px; }
.lvn-o {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang);
}
.lvn-o span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muc-nhat); }
.lvn-o b { font-size: 15.5px; text-align: right; }

/* Ô chọn địa bàn giờ nằm TRONG trang dịch vụ, và luôn có mặt — người ta vào
   đây là để tìm đơn vị ở gần, nên đổi nơi phải nằm ngay trong tầm tay. */
.dv-chon-noi label {
  display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muc-nhat);
}

/* Danh sách mục trong một nhóm Tiện ích. */
.ti-ds { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.ti-ds button {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang); color: var(--muc);
}
.ti-ds b { display: block; font-size: 14.5px; line-height: 1.35; }
.ti-ds span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muc-nhat); }
.ti-dem { flex: 0 0 auto; font-size: 12px; color: var(--muc-mo); }

.ti-chuong { margin: -6px 0 14px; }

/* Thân bài văn khấn: giữ nguyên xuống dòng của bản gốc, chữ to dễ đọc khi
   đứng trước ban thờ cầm điện thoại. */
.ti-bai {
  font-size: 16px; line-height: 1.85; color: var(--muc);
  padding: 16px; border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang);
}
.ti-dien { margin-bottom: 14px; }

.le-tiet li.qua { opacity: .5; }
.le-tiet b, .ky-huy b { text-align: right; }

/* Quản trị nội dung Tiện ích, gom theo nhóm. */
.qt-nhom {
  margin-bottom: 8px; border: 1px solid var(--vien);
  border-radius: var(--bo-vua); background: var(--giay-nang); padding: 0 12px;
}
.qt-nhom > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0; cursor: pointer; list-style: none;
}
.qt-nhom > summary::-webkit-details-marker { display: none; }
.qt-nhom > summary b { font-size: 14.5px; }
.qt-nhom > summary::after {
  content: '▸'; margin-left: auto; color: var(--muc-mo); font-size: 12px;
}
.qt-nhom[open] > summary::after { content: '▾'; }
.qt-nhom[open] > summary { border-bottom: 1px solid var(--vien); }
.qt-nhom > ul, .qt-nhom > p { margin-bottom: 10px; }

.qt-nhom-dau {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
  padding-top: 8px;
}
.qt-nhom-dau .lien {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--son); cursor: pointer; white-space: nowrap;
}

/* Bảng vàng khoa bảng. */
.bv-tom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
@media (min-width: 520px) { .bv-tom { grid-template-columns: repeat(4, 1fr); } }
.bv-o {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang); text-align: center;
}
.bv-o b { font-size: 19px; font-variant-numeric: tabular-nums; }
.bv-o span { font-size: 11.5px; color: var(--muc-nhat); line-height: 1.3; }
.bv-ds li { align-items: flex-start; }
.bv-ds > li > b { text-align: right; flex: 0 0 auto; }
.bv-ds .lien {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  color: var(--son); cursor: pointer;
}

/* Cổng đăng ký gian hàng, đặt cuối trang Dịch vụ. */
.dv-dang-ky {
  margin-top: 22px; padding: 16px; border: 1px dashed var(--vien-dam);
  border-radius: var(--bo-vua); background: var(--giay-sau);
}
.dv-dang-ky h3 { margin: 0 0 4px; font-size: 14.5px; }
.dv-dang-ky p { margin: 0 0 12px; }
.dv-bao {
  align-self: flex-start; margin-top: 8px;
  background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px;
  color: var(--muc-mo); cursor: pointer; text-decoration: underline;
}
.qt-gh li { align-items: flex-start; }
.qt-gh > li > b { text-align: right; flex: 0 0 auto; line-height: 2; }
.qt-gh .lien {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--son); cursor: pointer;
}

/* ===========================================================================
   QUẠT TRÒN — phả đồ hình quạt
   =========================================================================== */

.quat-chon { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }

/* Đệm mỏng: quạt là hình tròn nên mỗi milimét lề ăn thẳng vào bán kính, mà
   bán kính nhỏ thì ô vành ngoài hẹp và chữ phải co lại. */
.quat-khung {
  background: var(--giay-nang); border: 1px solid var(--vien);
  border-radius: var(--bo-vua); padding: 6px 2px 2px;
}
.quat-khung svg { width: 100%; height: auto; display: block; }

/* 🪤 NÉT VIỀN PHẢI KHÔNG CO THEO SVG. `vector-effect` giữ nét đúng một pixel
   dù khung phóng to cỡ nào — không có nó thì quạt vẽ trong hệ toạ độ đơn vị
   nhỏ sẽ có nét dày bằng cả một ô. */
.q-o {
  stroke: var(--vien); stroke-width: 1; vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.q-noi   { fill: var(--nam-nen); }
.q-ngoai { fill: var(--nu-nen); }
.q-trong { fill: var(--giay-sau); cursor: default; }
.q-o:hover:not(.q-trong) { stroke: var(--son); stroke-width: 2; }

.q-tam { fill: var(--son); stroke: var(--son-toi); stroke-width: 1;
  vector-effect: non-scaling-stroke; }

/* Chữ trong quạt KHÔNG bắt chuột — bấm vào chữ vẫn phải trúng ô bên dưới. */
.q-chu, .q-ten-tam { pointer-events: none; }
.q-chu text, .q-ten-tam {
  text-anchor: middle; fill: var(--muc); font-weight: 600;
  font-family: inherit;
}
.q-ten-tam { fill: #fff; }
.q-chu .q-nam { fill: var(--muc-nhat); font-weight: 400; }
.q-ten-tam.q-nam { fill: rgba(255,255,255,.8); font-weight: 400; }

.quat-chu-them { margin-top: 10px; }

@media (prefers-color-scheme: dark) {
  .q-ten-tam { fill: #fff; }
}

/* ===========================================================================
   BỐ CỤC MÀN RỘNG — từ 1000px trở lên
   ===========================================================================

   🔴 TRƯỚC ĐÂY APP KHÔNG CÓ BỐ CỤC PC. Cả tệp chỉ có sáu điểm ngắt màn hình,
   đều là chỉnh vặt: trên máy tính vẫn là một cột hẹp giữa màn hình rộng, và
   thanh tab vẫn nằm dưới ĐÁY như điện thoại — đúng chỗ không ai nhìn khi ngồi
   trước màn hình 27 inch, mà lại bỏ trống hai phần ba chiều ngang.

   Ba việc, đúng ba việc:
     ① thanh tab dưới đáy  →  thanh ngang trên đầu
     ② khung nội dung rộng ra
     ③ màn nào có cột phải thì chia hai cột

   🪤 KHÔNG dựng thanh ngang bằng JS và KHÔNG chép danh sách mục sang chỗ thứ
   hai — hai bản luật ở hai nơi thì sớm muộn lệch nhau. Cả hai thanh cùng
   `data-man`, cùng một bộ bắt sự kiện, trình duyệt lo chuyện ẩn hiện. */

.thanh-ngang { display: none; }

/* 🪤 CỘT PHẢI RƠI XUỐNG CUỐI TRANG TRÊN ĐIỆN THOẠI. Nó vẫn nằm trong dòng
   chảy, chỉ là không còn cột — nên khối nào LẶP LẠI thứ đã có ở trên thì phải
   ẩn hẳn ở màn hẹp. Khối số liệu nói đúng cái thẻ dòng họ đã nói ("8 đời · 331
   người"); khối giải thích thì giữ, vì người mới trên điện thoại cũng cần. */
@media (max-width: 1119px) {
  .cot-phai .chi-rong { display: none; }
  .cot-phai { gap: 0; }
  .cot-phai section { margin-top: 18px; }
}

@media (min-width: 880px) {
  .thanh-duoi { display: none; }

  /* Không còn thanh dưới thì màn hình lấy lại phần đáy. */
  .man   { inset: var(--cao-thanh) 0 0 0; }
  .khung { inset: var(--cao-thanh) 0 0 0; }
  .the   { bottom: 16px; }

  .thanh-ngang {
    display: flex; gap: 2px; margin-left: 18px; align-items: stretch;
    height: var(--cao-thanh); flex: 0 0 auto;
  }

  .nut-hinh-thay { display: none; }
}

/* 🪤 THANH TRÊN CHẬT THÌ CHỮ BỊ BÓP THÀNH MẢNH VỤN, KHÔNG PHẢI BIẾN MẤT.
   Đo ở 1000px: tên dòng họ còn đúng 5px và ô tìm người còn 3px — hai vệt xám
   vô nghĩa nằm cạnh nhau, vì flex co tới 0 chứ không tự ẩn.
   🪤 VÀ ĐẶT `min-width` LÀ SAI HƯỚNG — thử rồi: nó không ẩn gì cả mà đẩy cả
   thanh TRÀN ra ngoài ở cả 1000, 1100 lẫn 1280px. Phải BỚT THỨ KHÁC đi cho
   đủ chỗ, chứ không phải ép thứ này giữ chỗ. */
/* ---------- HÀNG 2 — ô tìm người + điều khiển cây ----------
 *
 * David chốt 31/08: gộp ô tìm và cụm điều khiển cây thành một hàng riêng.
 *
 * 🔴 VÌ SAO KHÔNG NHÉT VÀO THANH 1. Thanh 1 phải gánh sáu thứ cùng lúc — dấu
 * hiệu · tên dòng họ · ô tìm · điều hướng · chuông · BỐN nút cây. Đo ở 1000px:
 * tên dòng họ còn 5px, ô tìm còn 3px, hai vệt xám vô nghĩa cạnh nhau. Tách ra
 * hàng riêng thì thanh 1 sạch cho MỌI bề ngang và không phải giấu thứ gì.
 *
 * 🪤 ĐÃ THỬ LÀM CỤM NỔI ĐÈ LÊN CÂY và bỏ: nó che đúng góc phải dưới, là chỗ
 * cây hay mọc dài ra. Hàng riêng không lấy mất một điểm ảnh nào của cây.
 */
.thanh-hai {
  position: fixed; inset: var(--cao-thanh) 0 auto 0; z-index: 19;
  height: var(--cao-hang2);
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--giay-sau);
  border-bottom: 1px solid var(--vien);
}
.thanh-hai[hidden] { display: none; }
.thanh-hai .thanh-giua { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
.thanh-hai .dang-o {
  flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 34vw; margin: 0;
}
.dieu-khien-cay { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

/* Khi có hàng 2 thì khung cây bắt đầu THẤP XUỐNG đúng bằng chiều cao của nó.
   Quên chỗ này thì hàng 2 nằm đè lên mép trên của cây, che mất đời đầu. */
#man-cay, #man-cay.khung, .khung {
  top: calc(var(--cao-thanh) + var(--cao-hang2));
}

@media (max-width: 620px) {
  /* Điện thoại hẹp: nút cây bỏ chữ, giữ biểu tượng — ô tìm cần chỗ hơn. */
  .thanh-hai .nut-chu { display: none; }
  .thanh-hai #nut-vua .nut-hinh-thay { display: block; }
  .thanh-hai .dang-o { display: none; }
}

@media (min-width: 880px) and (max-width: 1119px) {
  .thanh-trai .phu { display: none; }
  .thanh-ngang { margin-left: 10px; }
  .thanh-ngang .mucd { padding: 0 10px; font-size: 13.5px; }
}

@media (min-width: 880px) {
  .thanh-ngang .mucd {
    flex: 0 0 auto; flex-direction: row; gap: 8px;
    padding: 0 14px; font-size: 14px; border-radius: 0;
  }
  .thanh-ngang .mucd-hinh { width: 18px; height: 18px; }
  .thanh-ngang .mucd:hover { color: var(--muc); background: var(--giay-sau); }

  /* 🪤 VẠCH CHỈ MỤC ĐANG MỞ PHẢI CHUYỂN XUỐNG ĐÁY. Luật gốc đặt nó ở `top: 0`
     — đúng cho thanh nằm dưới đáy màn hình (vạch ở mép trên, giáp nội dung),
     nhưng ở thanh trên đầu thì vạch chạy dọc mép trên cùng trang, trông như
     một lỗi kẻ chứ không như chỉ dấu. */
  .thanh-ngang .mucd::before {
    top: auto; bottom: 0; width: 100%; border-radius: 3px 3px 0 0;
  }

  /* ---- Khung nội dung ---- */
  .tc-noi-dung { max-width: 1080px; padding: 28px 32px 48px; }

  /* 🪤 HAI NGƯỠNG KHÁC NHAU, KHÔNG PHẢI MỘT.
     Thanh ngang chỉ cần chỗ cho bốn mục — 880px là đủ. Nhưng HAI CỘT thì cần
     880 − 64 lề − 320 cột phải − 28 khe = 468px cho cột chính, quá hẹp cho
     lưới công cụ ba ô. Gộp hai thứ vào một ngưỡng thì hoặc thanh ngang bật
     muộn, hoặc hai cột bật sớm và cột chính bị bóp.
     🔴 Và đặt ngưỡng ở 1000px là SAI: cửa sổ trình duyệt rộng 999px — rất
     thường gặp khi không mở toàn màn hình — thấy y hệt bản cũ, một cột 760px
     giữa màn hình 999px với hai bên trống hoác. */
}

@media (min-width: 1120px) {
  .tc-noi-dung:has(> .cot-phai) {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px; align-items: start;
  }
  /* Cột chính là MỘT ô lưới, không phải một đống ô. Không bọc lại thì mỗi
     khối con thành một ô và cả trang so le như bàn cờ. */
  .cot-chinh { min-width: 0; }

  /* Khối chạy hết bề ngang thì kê tên vào đây. */
  .tc-noi-dung:has(> .cot-phai) > .cms-dau,
  .tc-noi-dung:has(> .cot-phai) > .tc-suot { grid-column: 1 / -1; }

  .cot-phai {
    position: sticky; top: 0;
    display: flex; flex-direction: column; gap: 14px;
  }
  .cot-phai section {
    padding: 16px; border: 1px solid var(--vien);
    border-radius: var(--bo-vua); background: var(--giay-nang);
  }
  .cot-phai h3 {
    margin: 0 0 8px; font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muc-nhat); font-weight: 600;
  }
  .cot-phai p { margin: 0 0 8px; font-size: 13px; line-height: 1.65; }
  .cot-phai p:last-child { margin-bottom: 0; }
  .cot-phai .qt-ds li { padding: 7px 0; }

  /* Lưới công cụ và dịch vụ thoáng ra khi có chỗ. */
  .tc-luoi:not(.mot) { grid-template-columns: repeat(3, 1fr); }
  .dv-truot .dv-the  { flex-basis: 300px; }
}

/* Màn rất rộng: đừng để chữ chạy dài hết cỡ — dòng quá dài thì mắt lạc hàng. */
@media (min-width: 1400px) {
  .tc-noi-dung { max-width: 1180px; }
}