/* =====================================================================
   GIAN THỜ
   =====================================================================
   🔴 CHIỀU SÂU DỰNG BẰNG CSS THUẦN, KHÔNG WEBGL. David muốn "giả lập 3D nhất
   có thể" — nhưng ba lý do không cho dùng cảnh 3D thật: dự án cấm framework và
   bước dựng; skill `giapha-giao-dien-cay` đã ghi WebGL xử lý chữ tiếng Việt có
   dấu rất tệ (mà gian thờ toàn tên người); và máy người dùng chính là điện
   thoại cũ — cảnh 3D chạy giật ở chỗ trang nghiêm thì tệ hơn không có.

   Chiều sâu đến từ bốn thủ pháp, đúng cách bảo tàng dựng trang trưng bày:
     · mặt bàn ngả nhẹ ra sau (perspective + rotateX 3°)
     · bóng đổ HAI LỚP — một gần và đậm, một xa và tán rộng
     · hàng sau nhỏ dần, mờ dần, bão hoà thấp dần (phối cảnh khí quyển — cách
       hội hoạ tả xa gần từ thời Phục hưng)
     · một vệt sáng ấm từ trên xuống, như ánh nến hắt lên tường
   ===================================================================== */

#gian-tho .tc-noi-dung { max-width: 1180px; }

.gt-ban {
  perspective: 1400px;
  perspective-origin: 50% 0%;
  padding: var(--k5) 0 var(--k7);
  position: relative;
}

/* Vệt sáng ấm từ trên — nến trên ban thờ hắt lên tường. Đặt SAU nội dung theo
   thứ tự vẽ nhưng `z-index` âm, để nó không ăn cú bấm nào. */
.gt-ban::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 60% at 50% -10%,
    rgba(255, 214, 158, .28) 0%, rgba(255, 214, 158, .10) 38%, transparent 72%);
  pointer-events: none;
}

/* Mỗi ĐỜI là một hàng. `--sau` là số thứ tự hàng, dùng để tính độ lùi. */
/* 🪤 Khoảng cách giữa các đời vừa đủ để mắt tách hàng, KHÔNG hơn: đời 0 có khi
   chỉ hai cụ, mà chừa cả một khoảng lớn thì hàng ấy trôi lơ lửng giữa màn. */
.gt-doi {
  transform-style: preserve-3d;
  margin-bottom: var(--k4);
}
.gt-doi-nhan {
  display: block; margin-bottom: var(--k2);
  font-size: var(--c1); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--son);
}
/* 🔴 KHOẢNG CÁCH LÀ MỘT LỜI PHÁT BIỂU, không phải chỉnh cho đẹp.
   David 03/09: *"chồng bên trái, vợ bên phải, và không phải vợ chồng thì phải
   xếp cách nhau xa ra không gây hiểu nhầm."*

   Bày một hàng ảnh cách đều thì hai người tình cờ đứng cạnh nhau trông y như
   một cặp — trên bàn thờ thì đó là hiểu nhầm không được phép có. Nên:
     · trong một CẶP vợ chồng   → sát nhau (4px), có một vệt nối bên dưới
     · giữa hai CỤM khác nhau   → cách gấp SÁU lần (48px)
   Chính khoảng cách ấy nói ra ai với ai là một nhà, không cần chú thích. */
.gt-hang {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--k5) var(--k7);
  /* 🪤 Ngả RẤT NHẸ. Quá 5° là chữ bắt đầu nhoè ở mép trên và người đọc thấy
     chóng mặt; đây là màn hình người ta nhìn lâu. */
  transform: rotateX(3deg);
  transform-origin: 50% 0%;
}

/* Hàng càng sau càng nhỏ, mờ và nhạt màu — phối cảnh khí quyển.
   🪤 Chặn ở 5 bậc: sâu hơn nữa thì các cụ đời dưới mờ tới mức không đọc nổi
   tên, mà đời dưới lại chính là những người con cháu còn nhớ mặt. */
.gt-doi { --lui: min(var(--sau, 0), 5); }
.gt-doi .gt-khung {
  transform: scale(calc(1 - var(--lui) * .045));
  filter: saturate(calc(1 - var(--lui) * .10));
  opacity: calc(1 - var(--lui) * .05);
}

/* ---------- một khung trên ban thờ ---------- */

.gt-khung {
  position: relative; margin: 0;
  width: 148px; padding: var(--k3) var(--k3) var(--k4);
  display: flex; flex-direction: column; align-items: center; gap: var(--k2);
  background: var(--giay-nang);
  border: 1px solid var(--vien);
  border-radius: var(--bo-nho);
  cursor: pointer;
  /* Bóng HAI LỚP: lớp gần cho cạnh, lớp xa cho khối. Một lớp thì khung trông
     như dán phẳng lên nền. */
  box-shadow: 0 1px 2px rgba(33, 28, 22, .16),
              0 14px 28px -14px rgba(33, 28, 22, .42);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gt-khung:hover,
.gt-khung:focus-within {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 2px 4px rgba(33, 28, 22, .18),
              0 22px 40px -16px rgba(33, 28, 22, .5);
}

.gt-anh, .gt-bai-vi {
  width: 96px; height: 128px;          /* 3:4 — tỉ lệ ảnh thờ */
  border-radius: 4px; overflow: hidden; flex: 0 0 auto;
  display: block;
}
.gt-anh img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* 🔴 BÀI VỊ cho người chưa có ảnh — và họ là SỐ ĐÔNG (cây demo 331 người có
   đúng 0 ảnh). Ô trống lặp lại khắp màn thì người dùng đọc ra "thiếu dữ liệu",
   không đọc ra "ban thờ". Bài vị là thứ CÓ THẬT trên bàn thờ Việt, và với các
   cụ đời xa thì nó còn đúng hơn ảnh. */
.gt-bai-vi {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #F6EFE0, #EADFC9);
  border: 1px solid #C9B896;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5);
}
/* 🔴 Ô ẢNH CHỈ ĐỂ HIỆN ẢNH — tên đã có ở dưới.
   Tôi viết cả tên lên tấm bài vị rồi viết lại dưới chú thích: cùng một cái tên
   hai lần, cách nhau 8px. David bắt được ngay từ ảnh chụp đầu tiên.
   Chưa có ảnh thì để CHỮ CÁI ĐẦU TÊN — đúng lệ mà thẻ người và ô trên cây vẫn
   dùng, một lối cho cả app chứ không phải mỗi màn một kiểu. */
.gt-bai-chu {
  /* 🪤 `line-height: 1` với phông có chân thì phần trên và dưới của chữ tràn
     ra ngoài hộp — đo được chữ "T" cao 45px trong hộp 40px. Không thấy bằng
     mắt vì không có `overflow: hidden`, nhưng phép đo bắt được, và ở phông
     khác thì nó thành cắt thật. */
  font-family: var(--chu-de); font-size: 40px; line-height: 1.2;
  color: #A8875C;
}

.gt-khung figcaption {
  text-align: center; display: flex; flex-direction: column; gap: 2px;
  font-size: var(--c2); line-height: 1.4;
}
.gt-khung figcaption b { font-size: var(--c3); }
.gt-nam { color: var(--muc-nhat); font-variant-numeric: tabular-nums; }
.gt-gio { color: var(--son); font-weight: 600; }

/* Sắp tới ngày giỗ: khung sáng lên. Đây là chỗ Gian thờ gặp Lịch giỗ, và là
   lý do người ta quay lại mở nó. */
.gt-khung.sap-gio {
  border-color: var(--son);
  box-shadow: 0 1px 2px rgba(158, 43, 24, .2),
              0 14px 30px -12px rgba(158, 43, 24, .45);
}

/* ---------- nén tâm hương ---------- */

/* 🔴 KHÔNG khói, KHÔNG nhạc, KHÔNG đếm điểm. Chúng biến chỗ trang nghiêm thành
   trò chơi, và người trên bảy mươi — đúng nhóm dùng nó nhiều nhất — sẽ thấy
   khó chịu. Một nét sáng nhẹ trên khung là đủ. */
.gt-huong {
  /* 🪤 "Thắp nén tâm hương" xuống hai dòng trong khung 148px — nút hai dòng
     trông như lỗi dựng. Chữ ngắn lại, câu đầy đủ chuyển sang `title`. */
  font: inherit; font-size: var(--c2); cursor: pointer; white-space: nowrap;
  min-height: 36px; padding: 0 var(--k3);
  border: 1px solid var(--vien-dam); border-radius: 999px;
  background: var(--giay); color: var(--muc-dam);
}
.gt-huong:hover:not(:disabled) { border-color: var(--son); color: var(--son); }
.gt-huong:disabled { opacity: .55; cursor: default; }
.gt-dem { font-size: var(--c1); color: var(--muc-nhat); min-height: 1em; }
.gt-dem.trong { visibility: hidden; }

.gt-khung.co-huong .gt-anh,
.gt-khung.co-huong .gt-bai-vi {
  box-shadow: 0 0 0 2px rgba(255, 190, 120, .55), inset 0 0 0 3px rgba(255, 255, 255, .5);
}

/* ---------- giỗ hôm nay ---------- */

.gt-hom-nay {
  margin-bottom: var(--k5); padding: var(--k4);
  background: var(--son-nhat); border: 1px solid var(--son);
  border-radius: var(--bo-vua);
}
.gt-hom-nay-de {
  margin: 0 0 var(--k3); text-align: center;
  font-size: var(--c1); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--son);
}
.gt-hang-0 { transform: none; }

/* ---------- điện thoại ---------- */

@media (max-width: 560px) {
  .gt-khung { width: 132px; padding: var(--k2); }
  .gt-anh, .gt-bai-vi { width: 84px; height: 112px; }
  .gt-hang { gap: var(--k3); transform: none; }   /* màn hẹp thì bỏ ngả */
}

/* 🪤 NGƯỜI TẮT HIỆU ỨNG THÌ TẮT HẾT. Người say chuyển động mà mở đúng cái
   trang này thì không hay chút nào — và đây là màn hình của việc tang. */
@media (prefers-reduced-motion: reduce) {
  .gt-hang { transform: none; }
  .gt-khung, .gt-khung:hover, .gt-khung:focus-within { transition: none; transform: none; }
  .gt-doi .gt-khung { transform: none; }
}


/* ---------- cụm: cặp vợ chồng, hoặc một người lẻ ---------- */

.gt-cum { display: flex; gap: var(--k1); position: relative; }

/* Chỗ để trống dành cho bạn đời chưa về: ĐÚNG CỠ một khung, và không gì khác.
   🪤 Không viền, không nền, không chữ — xem `veCum()` trong `man/gian-tho.js`.
   Chỉ giữ đúng bề ngang, để ngày người ấy hiện lên thì hàng không xê một li. */
.gt-cho { width: 148px; flex: 0 0 auto; }

/* Cặp đang thiếu một nửa thì vệt nối chỉ chạy tới giữa — nối tới chỗ trống là
   vẽ một mối quan hệ với người chưa có ở đây. */
.gt-doi-cho::after { left: 34%; right: 34%; opacity: .45; }

/* Vệt nối dưới chân một cặp — cùng lối với chấm hôn nhân trên phả đồ, để hai
   nơi nói cùng một điều bằng cùng một dấu hiệu.
   🪤 Vẽ ở `::after` của CỤM, không phải viền của từng khung: viền từng khung
   thì hai người trông như hai ô bị khoanh chung, còn vệt dưới chân thì đọc ra
   "nối với nhau". */
.gt-cap::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: -10px;
  height: 2px; border-radius: 2px;
  background: var(--vien-dam);
}

@media (max-width: 560px) {
  /* Màn hẹp: giữ tỉ lệ gần–xa, chỉ thu nhỏ cả hai. Bỏ tỉ lệ ấy đi là mất luôn
     điều mà khoảng cách đang nói. */
  .gt-hang { gap: var(--k4) var(--k5); }
  .gt-cho { width: 132px; }
}