/* =====================================================================
   PHẢ HỆ — "Đêm giỗ tổ": 5.554 ngọn đèn, gõ tên là sợi vàng nối về thuỷ tổ.
   Trang tối toàn phần (thế giới riêng của bề mặt này), chữ vẫn ≥19px,
   tương phản giấy-trên-đêm ≈ 16:1. Không WebGL / reduced-motion: tìm kiếm và
   thẻ người vẫn chạy đủ, phần 3D thay bằng nền tĩnh.
   ===================================================================== */
:root{
  --dem-900:#0E0C08; --dem-800:#181209; --dem-700:#241A0E; --dem-600:#33281A;
  --son-500:#C1533A; --son-600:#A8322A;
  --vang-200:#F3DCA4; --vang-300:#E9C56A; --vang-400:#CBB07A; --vang-600:#95753C;
  --giay-100:#F1EADA; --giay-50:#F8F3E7; --tro:#B3A98F; --tro-2:#8E856F;
  --reu-400:#9AA88F;
  --ease:cubic-bezier(.16,.84,.44,1);
}
body.td-dark{background:var(--dem-900); color:var(--giay-100)}
body.td-dark::before{display:none}                   /* vân giấy không dùng trên đêm */
body.td-dark ::selection{background:var(--vang-300); color:var(--dem-900)}
body.td-dark .td-header{background:var(--dem-900); border-bottom-color:rgba(203,176,122,.18); backdrop-filter:none}
body.td-dark .wp-block-template-part:has(> .td-header){z-index:30}
body.td-dark .td-header .wp-block-site-title a,body.td-dark .td-header .wp-block-navigation a,
body.td-dark .td-header .wp-block-navigation__responsive-container-open{color:var(--giay-50)}
body.td-dark .td-header .wp-block-site-tagline{color:var(--vang-300)}
body.td-dark .td-header .wp-block-site-logo img{box-shadow:0 0 0 2px var(--dem-900),0 0 0 3px var(--vang-400)}
body.td-dark .td-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a{color:var(--td-nau)}
body.td-dark .td-footer{margin-top:0}
body.td-dark a{color:var(--vang-300)}

.ph{position:relative; min-height:100svh; isolation:isolate}
.ph__stage{position:fixed; inset:0; z-index:0}
.ph__stage canvas{display:block; width:100%; height:100%}
.ph__veil{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 40%, transparent 55%, rgba(14,12,8,.55) 100%)}
/* nền tĩnh khi không có 3D */
.ph[data-3d="off"] .ph__stage{background:
  radial-gradient(60% 45% at 50% 35%, rgba(233,197,106,.16), transparent 70%),
  radial-gradient(90% 60% at 50% 80%, rgba(193,83,58,.10), transparent 70%)}

/* ---------- thanh tìm kiếm: luôn ở trên, là cửa chính ---------- */
.ph__top{position:sticky; top:var(--td-header-h,72px); z-index:6; padding:1rem var(--wp--style--root--padding-left,1.5rem) .6rem;
  background:linear-gradient(to bottom, rgba(14,12,8,.97) 82%, transparent)}
.ph__search{max-width:640px; margin:0 auto; position:relative}
.ph__label{display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.2rem; color:var(--vang-300); margin:0 0 .35rem}
.ph__field{position:relative; display:flex; align-items:center; background:rgba(24,18,9,.92); border:1px solid rgba(203,176,122,.45); border-radius:3px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.8); transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.ph__field:focus-within{border-color:var(--vang-300); box-shadow:0 0 0 3px rgba(233,197,106,.18), 0 18px 44px -20px rgba(0,0,0,.8)}
.ph__field svg{width:22px; height:22px; margin-left:.9rem; color:var(--vang-400); flex:none}
.ph__field input{flex:1; min-width:0; background:transparent; border:0; color:var(--giay-50); font:400 1.1875rem/1.4 'Be Vietnam Pro',sans-serif; padding:.85rem .8rem; min-height:54px; outline:0; caret-color:var(--vang-300)}
.ph__field input::placeholder{color:var(--tro-2)}
.ph__field input::-webkit-search-cancel-button{display:none}
.ph__clear{background:transparent; border:0; color:var(--tro); min-width:44px; min-height:44px; cursor:pointer; font-size:1rem}
.ph__clear:hover{color:var(--giay-50)}
.ph__hint{margin:.4rem 0 0; font-size:.85rem; color:var(--tro-2)}
.ph__hint span{color:var(--tro)}
.ph__results{position:absolute; left:0; right:0; top:100%; margin:.4rem 0 0; padding:.3rem; list-style:none; z-index:7;
  background:rgba(24,18,9,.97); border:1px solid rgba(203,176,122,.35); border-radius:3px; box-shadow:0 30px 60px -24px rgba(0,0,0,.9); max-height:min(56vh,420px); overflow:auto}
.ph__results li{display:flex; align-items:center; gap:.8rem; padding:.55rem .7rem; min-height:48px; border-radius:2px; cursor:pointer; font-size:1.05rem}
.ph__results li[aria-selected="true"],.ph__results li:hover{background:rgba(233,197,106,.12)}
.ph__results b{font-weight:500; color:var(--giay-50)}
.ph__results small{color:var(--tro); font-size:.85rem; margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums}
.ph__results .more{color:var(--tro-2); font-size:.85rem; justify-content:center; cursor:default}
.ph__results .more:hover{background:transparent}

/* ---------- hành trình (chữ) ---------- */
.ph__acts{position:relative; z-index:2}
.ph[data-state="focus"] .ph__acts{visibility:hidden; pointer-events:none}
.ph__act{min-height:100svh; display:flex; align-items:center; padding:5rem var(--wp--style--root--padding-left,1.5rem)}
.ph__act--right{justify-content:flex-end}
.ph__act--center{justify-content:center; text-align:center}
.ph__box{max-width:30rem}
.ph__act--center .ph__box{max-width:40rem; padding:clamp(1.4rem,4vw,3rem) clamp(1rem,3vw,2.4rem); background:rgba(14,12,8,.58); border:1px solid rgba(203,176,122,.16); border-radius:4px; backdrop-filter:blur(2px)}
.ph__act--right .ph__box{padding:1.4rem 1.6rem; background:linear-gradient(90deg, rgba(14,12,8,0), rgba(14,12,8,.72) 30%)}
.ph__kicker{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem; color:var(--reu-400); margin:0 0 .35rem}
.ph__act h1,.ph__act h2{font-family:'Cormorant Garamond',serif; font-weight:400; color:var(--giay-50); line-height:1.15; margin:0 0 1rem; text-wrap:balance}
.ph__act h1{font-size:clamp(2.4rem,7vw,4.6rem); text-transform:uppercase; letter-spacing:.1em}
.ph__act h2{font-size:clamp(1.9rem,5vw,3.2rem)}
.ph__act p{color:#D6CDBA; font-size:1.1875rem; line-height:1.75; margin:0 0 .8rem}
.ph__act p b{color:var(--vang-200); font-weight:500}
.ph__cue{font-size:1rem!important; color:var(--tro)!important}
.ph__big{font-family:'Cormorant Garamond',serif; font-size:clamp(3.2rem,10vw,6.4rem); line-height:1; color:var(--vang-300); margin:.4rem 0 0!important; font-variant-numeric:lining-nums tabular-nums}
.ph__big span{display:block; font-family:'Be Vietnam Pro',sans-serif; font-size:.9375rem; letter-spacing:.19em; text-transform:uppercase; color:var(--tro); margin-top:.4rem}
.ph__note{font-size:.95rem!important; color:var(--tro)!important}
.js-anim .ph__box{opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js-anim .ph__act.on .ph__box{opacity:1; transform:none}

/* ---------- thẻ người ---------- */
.ph__panel{position:fixed; z-index:8; right:1rem; top:calc(var(--td-header-h,72px) + 7.4rem); width:min(400px, calc(100vw - 2rem)); max-height:calc(100svh - var(--td-header-h,72px) - 8.4rem); overflow:auto;
  background:linear-gradient(180deg, rgba(36,26,14,.97), rgba(24,18,9,.98)); border:1px solid rgba(203,176,122,.35); border-radius:4px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(243,220,164,.12); padding:1.4rem 1.4rem 1.2rem; color:var(--giay-100)}
.ph__panel[hidden]{display:none}
.js-anim .ph__panel{animation:ph-in .5s var(--ease)}
@keyframes ph-in{from{opacity:0; transform:translateY(14px)}}
.ph__close{position:absolute; top:.5rem; right:.5rem; min-width:44px; min-height:44px; background:transparent; border:0; color:var(--tro); font-size:1.05rem; cursor:pointer; border-radius:2px}
.ph__close:hover{color:var(--giay-50); background:rgba(233,197,106,.1)}
.ph__photo{width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; margin:0 0 .9rem; box-shadow:0 0 0 2px var(--dem-900),0 0 0 3px var(--vang-400), 0 14px 30px -14px rgba(0,0,0,.9); background:var(--dem-600)}
.ph__doi{font-family:'Be Vietnam Pro',sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vang-300); margin:0 0 .3rem}
.ph__card h2{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.9rem; line-height:1.15; color:var(--giay-50); margin:0 0 .3rem; padding-right:2rem}
.ph__meta{font-size:.95rem; color:var(--tro); margin:0 0 1rem}
.ph__rel{margin:0; padding:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem .8rem; font-size:1rem}
.ph__rel dt{color:var(--tro-2); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding-top:.45rem}
.ph__rel dd{margin:0; display:flex; flex-wrap:wrap; gap:.3rem}
.ph__rel dd i{color:var(--tro-2); font-style:italic; padding:.35rem 0}
.ph__chip{display:inline-flex; align-items:center; min-height:36px; padding:.2rem .6rem; border:1px solid rgba(203,176,122,.35); border-radius:2px; background:rgba(243,220,164,.06); color:var(--giay-100); font:400 .95rem/1.3 'Be Vietnam Pro',sans-serif; cursor:pointer; text-align:left;
  transition:background .25s var(--ease), border-color .25s var(--ease)}
.ph__chip:hover{background:rgba(243,220,164,.16); border-color:var(--vang-300)}
.ph__chip:focus-visible{outline:2px solid var(--vang-300); outline-offset:2px}
.ph__chip.f{color:var(--vang-200)}
.ph__line{margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid rgba(203,176,122,.22)}
.ph__line h3{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:1.2rem; color:var(--vang-300); margin:0 0 .5rem}
.ph__line ol{list-style:none; margin:0; padding:0; position:relative}
.ph__line ol::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:linear-gradient(to bottom, var(--vang-300), rgba(203,176,122,.25))}
.ph__line li{position:relative; padding:.25rem 0 .25rem 1.4rem}
.ph__line li::before{content:""; position:absolute; left:4px; top:.95rem; width:7px; height:7px; border-radius:50%; background:var(--vang-300); box-shadow:0 0 10px 2px rgba(233,197,106,.45)}
.ph__line li.me::before{background:var(--giay-50); box-shadow:0 0 14px 3px rgba(243,220,164,.7)}
.ph__line button{background:none; border:0; color:var(--giay-100); font:400 1rem/1.4 'Be Vietnam Pro',sans-serif; padding:.35rem 0; cursor:pointer; text-align:left; min-height:36px}
.ph__line button small{color:var(--tro-2); margin-left:.4rem}
.ph__line button:hover{color:var(--vang-200)}
.ph__actions{display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap}
.ph__btn{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.5rem .9rem; border:1px solid rgba(203,176,122,.45); border-radius:2px; background:transparent; color:var(--giay-100); font:500 .82rem/1 'Be Vietnam Pro',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-decoration:none}
.ph__btn:hover{background:rgba(243,220,164,.12); border-color:var(--vang-300)}

/* ---------- đi dọc sợi vàng: lên đời trên / xuống đời dưới ---------- */
.ph__climb{position:fixed; z-index:7; left:1rem; bottom:1.2rem; display:flex; flex-direction:column; gap:.4rem; max-width:min(360px, calc(100vw - 2rem))}
.ph__climb[hidden]{display:none}
.ph__climb button{display:flex; align-items:center; gap:.6rem; min-height:48px; padding:.4rem .9rem .4rem .7rem; border:1px solid rgba(233,197,106,.55); border-radius:3px;
  background:rgba(24,18,9,.92); color:var(--giay-50); font:400 1rem/1.25 'Be Vietnam Pro',sans-serif; text-align:left; cursor:pointer; box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease)}
.ph__climb button:hover{background:rgba(233,197,106,.16); border-color:var(--vang-300); transform:translateY(-1px)}
.ph__climb button:focus-visible{outline:2px solid var(--vang-300); outline-offset:2px}
.ph__climb button b{font-weight:500; color:var(--vang-200)}
.ph__climb button small{display:block; color:var(--tro); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.ph__climb button svg{width:20px; height:20px; flex:none; color:var(--vang-300)}
.ph__climb .end{color:var(--tro); font-size:.85rem; padding:.2rem .3rem}
@media (max-width:781px){
  .ph__climb{left:.6rem; right:.6rem; max-width:none; bottom:calc(50svh + .5rem); flex-direction:row}
  .ph__climb button{flex:1 1 0; min-width:0; padding:.35rem .6rem}
  .ph__climb button b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%}
  .ph__climb .end{display:none}
}
/* ---------- thước đời + tooltip + thông báo ---------- */
.ph__scale{position:fixed; right:.7rem; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:3px; pointer-events:none}
.ph__scale i{display:block; width:22px; height:2px; background:rgba(203,176,122,.22); transform:scaleX(.64); transform-origin:right; transition:background .3s, transform .3s}
.ph__scale i.lit{background:var(--vang-400)}
.ph__scale i.now{background:var(--vang-200); transform:scaleX(1)}
.ph__scale i.zero{height:3px; background:var(--son-500)}
.ph[data-state="focus"] .ph__scale{display:none}
.ph__tip{position:fixed; z-index:9; pointer-events:none; transform:translate(-50%, calc(-100% - 14px)); background:rgba(24,18,9,.95); border:1px solid rgba(203,176,122,.4); border-radius:3px; padding:.45rem .7rem; color:var(--giay-50); font-size:.95rem; white-space:nowrap; opacity:0; transition:opacity .2s}
.ph__tip.on{opacity:1}
.ph__tip span{display:block; color:var(--tro); font-size:.8rem}
.ph__msg{position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:9; margin:0; padding:.6rem 1rem; background:rgba(24,18,9,.95); border:1px solid rgba(203,176,122,.4); border-radius:3px; color:var(--giay-100); font-size:.95rem; max-width:min(92vw,560px); text-align:center}
.ph__msg[hidden]{display:none}

@media (max-width:781px){
  .ph__top{padding:.7rem var(--wp--style--root--padding-left,1rem) .4rem}
  .ph__label{font-size:1.05rem}
  .ph__act{padding:4rem var(--wp--style--root--padding-left,1rem)}
  .ph__act--right{justify-content:flex-start}
  .ph__act--right .ph__box{background:linear-gradient(180deg, rgba(14,12,8,0), rgba(14,12,8,.78) 20%); padding:1rem .2rem}
  .ph__act p{font-size:1.1rem; line-height:1.65}
  /* nửa dưới = thẻ người; nửa trên để trống cho ngôi sao và sợi vàng */
  .ph__panel{left:0; right:0; top:auto; bottom:0; width:auto; max-height:50svh; border-radius:12px 12px 0 0; padding:1rem 1rem 1.2rem; border-bottom:0}
  /* đang xem một người: ẩn ô tìm để nửa trên trọn vẹn cho sợi vàng; nút "Tìm người khác" nằm trong thẻ */
  .ph[data-state="focus"] .ph__top{display:none}
  .ph[data-state="focus"] .ph__veil{background:radial-gradient(90% 55% at 50% 30%, transparent 60%, rgba(14,12,8,.5) 100%)}
  .ph__panel::before{content:""; display:block; width:44px; height:4px; border-radius:2px; background:rgba(203,176,122,.4); margin:-.2rem auto .8rem}
  .js-anim .ph__panel{animation:ph-up .45s var(--ease)}
  @keyframes ph-up{from{transform:translateY(24px); opacity:0}}
  .ph__photo{width:72px; height:72px; float:left; margin:0 .9rem .5rem 0}
  .ph__scale{right:.35rem; gap:2px}
  .ph__scale i{width:10px}
}
@media (prefers-reduced-motion:reduce){
  .js-anim .ph__box{opacity:1; transform:none; transition:none}
  .js-anim .ph__panel{animation:none}
}