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

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

/* ---------- MÀN RỘNG: THANH ĐIỀU HƯỚNG DỌC BÊN TRÁI ----------
 *
 * David 02/09: *"sao mày không làm giao diện có menu bên trái luôn với pc thì
 * có phải nhiều tiện ích hơn là menu ở trên không nhỉ?"* — và đây đúng là
 * "thay đổi 01" mà bản vẽ khung đã chốt: thanh dọc thay thanh ngang.
 *
 * Vì sao dọc hơn ngang trên máy tính:
 *   · Màn hình rộng thì THỪA chiều ngang và THIẾU chiều cao. Một hàng ngang
 *     ăn 56px chiều cao của mọi màn; một cột dọc ăn 208px chiều ngang mà chiều
 *     ngang thì đang bỏ không.
 *   · Thêm mục vào cột dọc là thêm một hàng, không ai phải cắt chữ. Thêm vào
 *     hàng ngang là bắt đầu bóp — đúng cái đã xảy ra ở 1000px, nơi tên dòng họ
 *     còn 5px.
 *   · Mục có cả hình lẫn CHỮ ĐẦY ĐỦ, không phải đoán theo biểu tượng.
 *
 * 🪤 Dùng được `position: fixed` cho thanh này vì `.thanh` đã bỏ
 * `backdrop-filter` — thuộc tính ấy biến phần tử cha thành khung neo và con
 * `fixed` sẽ tính toạ độ theo cha thay vì theo màn hình.
 */
@media (min-width: 880px) {
  :root { --rong-ben: 208px; }

  .thanh-duoi { display: none; }

  /* Nội dung nhường chỗ cho cột bên trái — ĐẶT MỘT BIẾN, không đi sửa từng
     luật. Ba luật riêng lẻ là ba chỗ có thể bị đè, và đã bị đè thật. */
  /* 🪤 ĐẶT CẢ HAI BIẾN. Thanh dưới bị ẩn ở đây, nên `--cao-duoi` phải về 0 —
     không thì mọi thứ neo theo nó chừa lại một dải trống ở đáy màn hình cho
     một thanh không tồn tại. Trước đây từng luật tự đặt `bottom: 0`, tức ba
     chỗ phải nhớ; giờ một chỗ. */
  :root { --le-trai: var(--rong-ben); --cao-duoi: 0px; }
  .the   { bottom: 16px; }

  /* 🔴 CỘT TRÁI LÀ MỘT CỘT RIÊNG, CHẠY TỪ TRÊN CÙNG.
     Bản trước để thanh đỏ trải hết bề ngang rồi mới đặt cột trái xuống dưới
     nó, nên nhìn ra là một thanh dài vắt ngang cả hai vùng — David 02/09 chụp
     ảnh và bảo *"tách ra là cột menu dọc riêng biệt và bên phải riêng biệt với
     pc chứ"*. Nay: cột trái ôm trọn chiều cao và giữ dấu hiệu sản phẩm ở đỉnh;
     thanh đỏ chỉ còn nằm trên phần nội dung.

     🪤 KHÔNG DỜI DẤU HIỆU BẰNG JS. Dời trong DOM là phải dời NGƯỢC LẠI khi
     người dùng kéo hẹp cửa sổ, mà chỗ ấy thì không ai nhớ — bố cục kẹt ở
     trạng thái cũ. Ở đây chỉ ghim nó bằng CSS, để trình duyệt lo lúc đổi bề
     ngang. */
  .thanh { left: var(--rong-ben); }

  .thanh .dau-hieu,
  .thanh .mu-nut {
    position: fixed; top: 0; height: var(--cao-thanh);
    z-index: 21; margin: 0;
  }
  .thanh .mu-nut { left: 10px; width: 40px; }
  .thanh .dau-hieu { left: 56px; }

  /* Dấu hiệu nay đứng trên nền GIẤY của cột trái, không còn trên nền son —
     nên đổi màu nét, nếu không là hình trắng trên nền kem, tức không thấy gì.
     🪤 VẪN KHÔNG CÓ KHỐI NỀN BO TRÒN. David đã chốt một lần rồi: *"sao không
     dùng logo trắng luôn, cần gì bo làm gì"*. Khối nền sinh ra để tách hình
     trắng khỏi nền son; đổi nền thì đổi MÀU NÉT, đừng dựng lại cái khối. */
  .thanh .dau-hieu .dau-hieu-ten { color: var(--muc); }
  .thanh .dau-hieu .dh-net { color: var(--son); }
  .thanh .mu-nut { color: var(--muc-dam); }

  /* Dải nền cho đúng ô góc trên trái, để dấu hiệu không nằm trên khoảng trống
     và để có vạch ngăn thẳng hàng với vạch dưới thanh đỏ. */
  .thanh-ngang::before {
    content: ''; position: fixed; left: 0; top: 0;
    width: var(--rong-ben); height: var(--cao-thanh);
    background: var(--giay-nang); border-right: 1px solid var(--vien);
    z-index: 20;
  }

  .thanh-ngang {
    position: fixed; left: 0; top: var(--cao-thanh); bottom: 0;
    width: var(--rong-ben); z-index: 18;
    display: flex; flex-direction: column; gap: 2px; align-items: stretch;
    margin: 0; padding: 10px 8px; height: auto; flex: 0 0 auto;
    background: var(--giay-nang); border-right: 1px solid var(--vien);
    overflow-y: auto;
  }
  .thanh-ngang .mucd {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 11px 14px; border-radius: var(--bo-nho);
    font-size: 14.5px; color: var(--muc-dam);
  }
  .thanh-ngang .mucd .mucd-hinh { width: 20px; height: 20px; }
  /* 🪤 CHO XUỐNG DÒNG. Cột rộng 208px mà "Cáo phó chờ duyệt" thì dài hơn thế —
     một dòng là bị cắt thành "Cáo phó chờ duy…", nhìn như lỗi dựng. Ảnh chụp
     1440px bắt được. Mục cao lên một chút không sao; đọc được mới quan trọng. */
  .thanh-ngang .mucd .mucd-chu {
    max-width: none; white-space: normal; text-align: left; line-height: 1.3;
  }
  .thanh-ngang .mucd { align-items: flex-start; }

  /* Nhóm công cụ của dòng họ, dưới cụm điều hướng. Vạch ngăn và một dòng nhãn
     nhỏ để mắt biết đây là loại khác — không phải chỗ đến, mà là việc.
     🪤 `display: contents` để các nút CON vẫn là con trực tiếp của cột flex,
     nhờ thế chúng giãn đều y như các mục điều hướng. Bọc bằng một khối thường
     thì nhóm này thành MỘT ô flex, và mọi nút bên trong co lại theo nội dung. */
  .ben-cong-cu { display: contents; }
  .ben-cong-cu[hidden] { display: none; }
  .ben-de {
    margin: 14px 6px 4px; padding-top: 12px;
    border-top: 1px solid var(--vien);
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muc-nhat);
  }
  /* 🔴 KHÔNG dùng cặp `--son` trên `--son-nhat` cho mục đang mở. Hai biến ấy
     đổi theo bộ áo của DÒNG HỌ: ở tông tối, `--son-nhat` thành #331C16 còn
     `--son` vẫn #B55241 — đo được tương phản 3,22, dưới ngưỡng 4,5 của WCAG.
     Cặp `--muc` trên `--giay-sau` là cặp chuẩn của bộ áo, luôn đạt ở cả hai
     tông; dấu son giữ ở VẠCH bên trái, nơi nó chỉ cần nổi chứ không cần đọc. */
  .thanh-ngang .mucd.dang {
    background: var(--giay-sau); color: var(--muc); font-weight: 600;
  }
  /* Vạch chỉ mục đang mở chạy DỌC ở mép trái, không phải ngang trên đầu. */
  .thanh-ngang .mucd::before {
    top: 8px; bottom: 8px; left: 0; width: 3px; height: auto;
    border-radius: 0 3px 3px 0; transform: none; transition: opacity .16s;
    opacity: 0; background: var(--son);
  }
  .thanh-ngang .mucd.dang::before { transform: none; opacity: 1; }

  .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 var(--le-trai); 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; }
}

@media (min-width: 880px) {
  /* 🪤 KHỐI NÀY ĐỨNG SAU khối dựng thanh dọc, nên mọi luật ở đây ĐÈ lên nó dù
     đặc hiệu bằng nhau. Ba luật cũ của thời thanh-ngang-trong-header đã gỡ:
     `padding: 0 14px` (mục cao bằng thanh — nay ăn mất đệm dọc, mục còn 22px),
     `mucd-hinh: 18px`, và vạch chỉ mục kéo xuống đáy. Cột dọc cần vạch chạy
     DỌC mép trái, và luật ấy nằm ở khối trên. */
  .thanh-ngang .mucd:hover { background: var(--giay-sau); }

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

/* ---------- Giao diện của dòng họ ---------- */
.gd-hang { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-chon.dang { background: var(--son); color: var(--tren-son, #fff); border-color: var(--son); }
.gd-mau { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gd-mau input[type=color] {
  width: 56px; height: 40px; padding: 0; border: 1px solid var(--vien);
  border-radius: var(--bo-nho); background: none; cursor: pointer;
}
.gd-mau-that {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vien);
  flex: 0 0 auto;
}
.gd-mau .phu { flex: 1 1 200px; margin: 0; }
.gd-tai { cursor: pointer; }

/* ---------- Báo lỗi · kiến nghị trong trang quản trị ---------- */
.gy-ds { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.gy-o {
  background: var(--giay-nang); border: 1px solid var(--vien);
  border-radius: var(--bo-nho); padding: 14px 16px;
}
.gy-o.gy-moi { border-left: 3px solid var(--son); }
.gy-o.gy-xong, .gy-o.gy-bo_qua { opacity: .62; }
.gy-dinh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gy-dinh b { flex: 1 1 auto; min-width: 0; }
.gy-tt { font-size: 12px; color: var(--muc-nhat); }
.nhan-loi { background: var(--son-nhat); color: var(--son-toi); }
.gy-nd { margin: 8px 0 0; white-space: pre-wrap; }
.gy-meta { margin: 6px 0 0; font-size: 12.5px; }
.gy-tra {
  margin: 8px 0 0; padding: 8px 12px; background: var(--giay-sau);
  border-radius: var(--bo-nho); font-size: 14.5px;
}

/* ---------- Lịch giỗ · trang, học bố cục bản B ---------- */
.man-trang .tc-noi-dung { padding-bottom: 24px; }

.lg-cong-cu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.lg-cong-cu .doan-nut { display: flex; gap: 0; border: 1px solid var(--vien-dam); border-radius: 999px; overflow: hidden; }
.lg-cong-cu .doan-nut button {
  border: 0; background: none; padding: 9px 16px; font: inherit; font-size: 14px;
  color: var(--muc-dam); cursor: pointer; min-height: 40px;
}
.lg-cong-cu .doan-nut button.dang { background: var(--muc); color: var(--giay); font-weight: 600; }
.lg-cong-cu .nut { margin: 0; }

/* 🔴 HÀNG THÁNG GHIM LẠI. Đây là thứ DUY NHẤT đáng ghim ở trang này: nó là
   chỗ nhảy tới, và người ta cần nó đúng lúc đang cuộn giữa danh sách dài.
   Ghim thêm tiêu đề hay hàng nút nữa là ăn mất chiều cao — trên điện thoại
   mũ và thanh dưới đã lấy khoảng 110px rồi. */
.lg-thang {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 0;
  background: var(--giay); border-bottom: 1px solid var(--vien);
  scrollbar-width: none;
}
.lg-thang::-webkit-scrollbar { display: none; }
.lg-thang button {
  flex: 0 0 auto; border: 1px solid var(--vien-dam); background: var(--giay-nang);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13.5px;
  color: var(--muc-dam); cursor: pointer; white-space: nowrap; min-height: 34px;
}
.lg-tom { margin: 10px 0 14px; }

.lg-khoi {
  background: var(--giay-nang); border: 1px solid var(--vien);
  border-radius: var(--bo-nho); padding: 14px 14px 6px; margin-bottom: 14px;
  scroll-margin-top: 56px;
}
.lg-de { margin-bottom: 10px; }
.lg-de h2 { margin: 0 0 2px; font-size: 17px; }
.lg-de .phu { margin: 0; }

.lg-hang {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 4px; border: 0; border-top: 1px solid var(--vien);
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.lg-khoi .lg-de + .lg-hang { border-top: 0; }
.lg-ngay {
  flex: 0 0 auto; width: 46px; text-align: center;
  background: var(--giay-sau); border-radius: 9px; padding: 5px 0;
}
.lg-ngay b { display: block; font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lg-ngay i { display: block; font-style: normal; font-size: 11px; color: var(--muc-nhat); }
.lg-chu { flex: 1 1 auto; min-width: 0; }
.lg-chu b { display: block; font-weight: 600; }
.lg-chu span { display: block; font-size: 13px; color: var(--muc-nhat); }
.lg-con { flex: 0 0 auto; font-size: 12.5px; color: var(--muc-nhat); white-space: nowrap; }

/* Đúng MỘT dòng được tô nhấn: giỗ gần nhất còn chưa tới. */
.lg-hang.gap { background: var(--son-nhat); border-radius: 10px; }
.lg-hang.gap .lg-ngay { background: var(--son); color: var(--tren-son, #fff); }
.lg-hang.gap .lg-ngay i { color: rgba(255, 255, 255, .85); }
.lg-hang.gap .lg-con.nhan {
  background: var(--son); color: #fff; border-radius: 999px;
  padding: 4px 10px; font-weight: 600;
}
.lg-hang.qua { opacity: .55; }
.lg-lan { color: var(--son); font-weight: 700; }
.lg-khong-roi .lg-ngay b { color: var(--muc-nhat); }

/* ---------- Nhắc cả họ · cáo phó chờ duyệt ---------- */
.nhac-form { display: grid; gap: 2px; margin-bottom: 8px; }
.nhac-form label { display: block; margin: 16px 0 0; font-size: 12.5px; color: var(--muc-nhat); }
.nhac-form input, .nhac-form select, .nhac-form textarea {
  width: 100%; font: inherit; font-size: 16px; margin-top: 6px;
  padding: 12px 14px; border-radius: var(--bo-nho); border: 1px solid var(--vien);
  background: var(--giay-sau); color: var(--muc);
}
.nhac-ds, .cp-ds { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.nhac-o, .cp-o {
  background: var(--giay-nang); border: 1px solid var(--vien);
  border-radius: var(--bo-nho); padding: 14px 16px;
}
.nhac-o.thu-hoi { opacity: .6; }
.nhac-dinh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nhac-dinh b { flex: 1 1 auto; min-width: 0; }
.nhac-o .phu { margin: 6px 0 0; }
.nhac-o .nut { margin-top: 10px; }
.cp-o { padding: 0; }
.cp-o button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; padding: 14px 16px; cursor: pointer; color: inherit;
}
.cp-o b { display: block; }
.cp-o .phu { margin: 4px 0 0; }

/* ---------- Sự kiện · bố cục học từ bản B ---------- */
.sk-nam { margin-bottom: 12px; }
.sk-nam button.dang { background: var(--muc); color: var(--giay); border-color: var(--muc); }

.sk-lon {
  background: var(--son-nhat); border: 1px solid var(--son-nhat);
  border-radius: var(--bo-nho); padding: 16px; margin-bottom: 16px;
}
.sk-dinh { display: flex; gap: 14px; align-items: flex-start; }
.sk-dinh-chu { flex: 1 1 auto; min-width: 0; }
.sk-dinh-chu h2 { margin: 6px 0 4px; font-size: 19px; }
.sk-dinh-chu .phu { margin: 0; }
.sk-ngay {
  flex: 0 0 auto; width: 58px; text-align: center; background: var(--giay-nang);
  border-radius: 12px; padding: 8px 0;
}
.sk-ngay b { display: block; font-size: 24px; line-height: 1.05; color: var(--son); }
.sk-ngay i { display: block; font-style: normal; font-size: 11px; color: var(--muc-nhat); }
.sk-nhan { display: flex; gap: 6px; flex-wrap: wrap; }

.sk-hoi {
  background: var(--giay-nang); border-radius: var(--bo-nho);
  padding: 14px 16px; margin-top: 14px;
}
.sk-hoi > b { display: block; }
.sk-hoi .phu { margin: 4px 0 0; }
.sk-chon { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sk-chon .nut { flex: 1 1 auto; min-width: 92px; }
.sk-dem { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.sk-dem span { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--muc-nhat); }
.sk-dem button {
  width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--vien-dam);
  border-radius: 20px; background: var(--giay); font-size: 20px; cursor: pointer;
  color: var(--muc); line-height: 1;
}
.sk-dem b { font-size: 19px; min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }

.sk-so-lieu { display: flex; gap: 8px; margin-top: 14px; }
.sk-so-lieu > div {
  flex: 1 1 0; background: var(--giay-nang); border-radius: var(--bo-nho);
  padding: 11px 12px; text-align: center;
}
.sk-so-lieu b { display: block; font-size: 20px; line-height: 1.1; }
.sk-so-lieu span { font-size: 12px; color: var(--muc-nhat); }

.sk-hang { border-top: 1px solid var(--vien); }
.doi-muc > .sk-hang:first-of-type { border-top: 0; }
.sk-canh-bao { display: block; color: var(--son); font-size: 12.5px; margin-top: 2px; }

/* ---------- Lịch vạn niên ---------- */
.lvn-doi { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.lvn-doi input[type=date] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px;
  padding: 11px 12px; border-radius: var(--bo-nho);
  border: 1px solid var(--vien); background: var(--giay-sau); color: var(--muc);
}
.lvn-doi .nut { flex: 0 0 auto; min-width: 48px; min-height: 46px; justify-content: center; }
.lvn-hom-nay { margin-bottom: 14px; }

.lvn-to {
  background: var(--giay-nang); border: 1px solid var(--vien);
  border-radius: var(--bo-nho); padding: 20px 16px; text-align: center;
}
.lvn-to.nay { border-color: var(--son); background: var(--son-nhat); }
.lvn-thang { display: block; font-size: 13.5px; color: var(--muc-nhat); }
.lvn-ngay-to {
  display: block; font-size: 64px; line-height: 1.05; color: var(--son);
  font-variant-numeric: tabular-nums; margin: 2px 0;
}
.lvn-thu { display: block; font-size: 17px; font-weight: 600; }
.lvn-to .nhan { margin-top: 8px; display: inline-block; }

.lvn-am {
  margin-top: 10px; padding: 14px 16px; text-align: center;
  background: var(--giay-nang); border: 1px solid var(--vien); border-radius: var(--bo-nho);
}
.lvn-am b { display: block; font-size: 18px; }
.lvn-am .phu { margin: 4px 0 0; }

.lvn-bang { display: flex; gap: 8px; margin-top: 10px; }
.lvn-bang > div {
  flex: 1 1 0; text-align: center; padding: 12px 8px;
  background: var(--giay-nang); border: 1px solid var(--vien); border-radius: var(--bo-nho);
}
.lvn-bang span { display: block; font-size: 12px; color: var(--muc-nhat); }
.lvn-bang b { display: block; margin-top: 4px; font-size: 15px; }

.lvn-tiet {
  margin-top: 10px; padding: 14px 16px;
  background: var(--la-nhat, var(--giay-sau)); border-radius: var(--bo-nho);
}
.lvn-tiet b { display: block; }
.lvn-tiet .phu { margin: 4px 0 0; }

/* ---------- Cụm phóng to · thu nhỏ, xếp DỌC trên khung cây ----------
   Học đúng lối bản đồ (ảnh David gửi 02/09): hai nút chồng lên nhau, sát mép,
   luôn thấy — thay vì nằm ngang trong hàng công cụ và trôi mất khi cuộn. */
@media (max-width: 720px) {
  .dieu-khien-cay {
    position: fixed; left: 12px; z-index: 22;
    bottom: calc(var(--cao-duoi) + 16px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 0;
    background: var(--giay-nang); border: 1px solid var(--vien-dam);
    border-radius: 10px; overflow: hidden; box-shadow: var(--bong-2);
  }
  .dieu-khien-cay .nut {
    width: 44px; height: 44px; min-height: 44px; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    justify-content: center; font-size: 20px;
  }
  .dieu-khien-cay .nut + .nut { border-top: 1px solid var(--vien); }
  /* Nút mang chữ ("Thuỷ tổ", "Vừa khung") không thuộc cụm này — chúng là việc
     khác, để nguyên trong hàng công cụ. */
  .dieu-khien-cay .nut:has(.nut-chu) { display: none; }
}