/* ===== Thế giới 3D (js/26-the-gioi-3d.js): cảnh three.js thay ảnh tĩnh, nút và tên người vẽ theo vị trí 3D ===== */
.w3d,.w3d-hot,.w3d-tags{position:absolute;inset:0;display:none}
.hall.w3d-on .w3d,.hall.w3d-on .w3d-hot,.hall.w3d-on .w3d-tags{display:block}
.w3d canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.w3d-hot,.w3d-tags{pointer-events:none}
.w3d-hot .wh{pointer-events:auto}
/* ảnh tĩnh, người dạng hình và nút cũ ẩn đi; lớp ánh sáng theo giờ trong wStage vẫn giữ */
.hall.w3d-on .w-bg,.hall.w3d-on .w-floor,.hall.w3d-on .w-hot{visibility:hidden}
.hall.w3d-on .w-stage{pointer-events:none}
.w3d-tag{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.w3d-tag .t{font-size:12px;line-height:1;padding:3px 7px;border-radius:999px;background:rgba(20,10,4,.66);color:#FFF6E6;border:1px solid rgba(255,220,150,.35)}
.w3d-tag.me .t{background:linear-gradient(180deg,#B8701A,#7A3E0A);border-color:#FFD98A}
.w3d-tag .b{order:-1;font-size:22px;line-height:1}
.w3d-tag .b:empty{display:none}
/* màn chờ khi vào chân núi lúc cảnh 3D chưa nạp xong: phủ cả thanh điều hướng (240), dưới phi thăng (400) và màn tải (500) */
.w3d-cho{position:fixed;inset:0;z-index:250;display:grid;place-content:center;justify-items:center;gap:10px;background:var(--paper,#FBF6EC);color:#2B241C;text-align:center}
.w3d-cho[hidden]{display:none}
.w3d-cho b{font-family:var(--f-display);font-weight:300;font-size:clamp(30px,6vw,48px)}
.w3d-cho small{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#6E6253}
.w3d-cho i{display:block;width:min(220px,60vw);height:2px;margin-top:8px;background:rgba(43,36,28,.12);overflow:hidden}
.w3d-cho s{display:block;height:100%;background:#B8862F;transform:scaleX(0);transform-origin:left;transition:transform .4s}
/* tranh 2D (nhà dựng từ gia phả, js/20) đặt lại theo camera 3D */
.w3d-tranh{position:absolute;inset:0;display:none;pointer-events:none;overflow:hidden}
.hall.w3d-on .w3d-tranh{display:block}
.w3d-tranh .ho-h,.w3d-tranh .ho-d{position:absolute}
/* đoạn phim chuyển cảnh (js/26 ss3dPhim): màn ngà có logo Song Song vẽ dần, tên nơi đến hiện từng chữ, tia sáng quay, đốm vàng bay;
   rồi mở tròn (viền vàng) ra đoạn phim, hai dải nâu trầm viền vàng, dải dưới có logo nhỏ quay, tên và vệt sáng chạy; hết phim khép tròn về logo */
.w-trans.phim{background:#1a120b!important;padding-bottom:0;align-items:flex-end;animation:wIn .3s ease both!important;--nga:#F4EAD6;--vang:#C9973F}
.w-trans.phim.out{animation:wOut .9s ease both!important}
.w-trans>canvas{position:absolute;inset:0;transition:opacity .4s ease}
.w-trans.phim>span{display:none}
.w-trans.phim::before,.w-trans.phim::after{content:'';position:absolute;left:0;right:0;height:max(48px,8.5vh);z-index:1;background:linear-gradient(180deg,#2a1c10,#1a120b);transform:scaleY(0);animation:puDai .7s cubic-bezier(.2,.7,.1,1) 1.5s forwards}
.w-trans.phim::before{top:0;transform-origin:top;box-shadow:inset 0 -1px rgba(201,151,63,.55)}
.w-trans.phim::after{bottom:0;transform-origin:bottom;background:linear-gradient(0deg,#2a1c10,#1a120b);box-shadow:inset 0 1px rgba(201,151,63,.55)}
@keyframes puDai{to{transform:none}}
.pu{display:none}
.w-trans.phim .pu{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
/* lỗ tròn mở ra đoạn phim: vòng tròn rỗng, phần ngoài là bóng ngà rất rộng */
.pu-iris{position:absolute;left:50%;top:46%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 300vmax var(--nga),0 0 0 2px var(--vang),0 0 40px 6px rgba(201,151,63,.6);opacity:1}
.pu-chay .pu-iris{animation:puMo 1s cubic-bezier(.7,0,.2,1) 1.15s forwards}
.pu-chay.pu-dong .pu-iris{animation:puKhep .6s cubic-bezier(.6,0,.4,1) forwards}
@keyframes puMo{0%{width:0;height:0}100%{width:270vmax;height:270vmax;box-shadow:0 0 0 300vmax var(--nga),0 0 0 2px rgba(201,151,63,0),0 0 40px 6px rgba(201,151,63,0)}}
@keyframes puKhep{0%{width:270vmax;height:270vmax}100%{width:0;height:0;box-shadow:0 0 0 300vmax var(--nga)}}
/* logo đứng đúng tâm lỗ tròn: mở ra từ logo, khép về logo */
.pu-giua{--lg:clamp(88px,16vw,124px);--ty:calc(var(--lg) / -2);position:absolute;left:50%;top:46%;transform:translate(-50%,var(--ty));display:flex;flex-direction:column;align-items:center;gap:14px;color:#2B241C;text-align:center;width:min(90vw,560px)}
.pu-chay .pu-giua{animation:puGiuaDi .5s ease-in 1.1s forwards}
.pu-chay.pu-dong .pu-giua{animation:puGiuaVe .5s ease-out .3s both}
@keyframes puGiuaDi{to{opacity:0;transform:translate(-50%,var(--ty)) scale(1.25)}}
@keyframes puGiuaVe{from{opacity:0;transform:translate(-50%,var(--ty)) scale(.85)}to{opacity:1;transform:translate(-50%,var(--ty))}}
/* tia sáng quay sau logo */
.pu-tia{position:absolute;left:50%;top:calc(var(--lg) / 2);width:min(70vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
 background:repeating-conic-gradient(from 0deg,rgba(201,151,63,.22) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 20%,transparent 100%);mask:radial-gradient(closest-side,#000 20%,transparent 100%);animation:puQuay 14s linear infinite,puHien .9s ease .2s both}
@keyframes puQuay{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes puHien{from{opacity:0}}
.pu-logo{position:relative;width:var(--lg);height:auto;overflow:visible;filter:drop-shadow(0 0 0 rgba(201,151,63,0));animation:puSang 1.6s ease-in-out .9s infinite}
.pu-c{stroke:#2B241C;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:puVe .9s cubic-bezier(.6,0,.2,1) forwards}
.pu-c1{transform-origin:12px 16px;transform:rotate(-90deg)}.pu-c2{transform-origin:20px 16px;transform:rotate(90deg);animation-delay:.15s}
.pu-l{fill:#E2B04A;transform-origin:16px 16px;opacity:0;animation:puNhan .5s cubic-bezier(.3,1.6,.5,1) .7s forwards}
@keyframes puVe{to{stroke-dashoffset:0}}
@keyframes puNhan{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes puSang{50%{filter:drop-shadow(0 0 16px rgba(201,151,63,.75))}}
.pu-ten{position:relative;display:flex;flex-wrap:wrap;justify-content:center;font-family:var(--f-display);font-weight:300;font-size:clamp(30px,5.4vw,56px);letter-spacing:-.03em;line-height:1.05;overflow:hidden;padding-bottom:.08em}
.pu-ten i{font-style:normal;display:inline-block;white-space:pre;transform:translateY(105%);opacity:0;animation:puChu .6s cubic-bezier(.2,.7,.1,1) calc(.35s + var(--i)*.04s) forwards}
@keyframes puChu{to{transform:none;opacity:1}}
.pu-giua small{position:relative;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#7A6A52;opacity:0;animation:puHien2 .6s ease .75s forwards}
@keyframes puHien2{to{opacity:1}}
/* đốm vàng bay lên trên màn ngà */
.pu-dom{position:fixed;inset:0;pointer-events:none}
.pu-dom i{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#FFE2A0,rgba(226,176,74,0) 70%);opacity:0;animation:puBay 2.6s ease-in infinite}
.pu-dom i:nth-child(1){left:8%;animation-delay:.1s}.pu-dom i:nth-child(2){left:16%;animation-delay:.9s;width:9px;height:9px}.pu-dom i:nth-child(3){left:24%;animation-delay:.4s}
.pu-dom i:nth-child(4){left:31%;animation-delay:1.3s}.pu-dom i:nth-child(5){left:39%;animation-delay:.2s;width:10px;height:10px}.pu-dom i:nth-child(6){left:46%;animation-delay:1.1s}
.pu-dom i:nth-child(7){left:53%;animation-delay:.6s}.pu-dom i:nth-child(8){left:60%;animation-delay:1.5s;width:8px;height:8px}.pu-dom i:nth-child(9){left:67%;animation-delay:.3s}
.pu-dom i:nth-child(10){left:74%;animation-delay:1s}.pu-dom i:nth-child(11){left:81%;animation-delay:.5s;width:9px;height:9px}.pu-dom i:nth-child(12){left:88%;animation-delay:1.4s}
.pu-dom i:nth-child(13){left:94%;animation-delay:.8s}.pu-dom i:nth-child(14){left:4%;animation-delay:1.7s}
@keyframes puBay{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-70vh) translateX(14px)}}
/* dải dưới khi chiếu phim: logo nhỏ quay, tên nơi đến, vệt sáng chạy dọc mép */
.pu-day{position:absolute;left:0;right:0;bottom:0;height:max(48px,8.5vh);display:flex;align-items:center;justify-content:center;gap:12px;color:#F4EAD6;opacity:0;z-index:2}
.pu-chay .pu-day{animation:puHien2 .6s ease 1.9s forwards}
.pu-chay.pu-dong .pu-day{animation:none;opacity:0;transition:opacity .2s}
.pu-mini{width:26px;height:26px;animation:puQuay2 6s linear infinite}
.pu-mini .pu-c{stroke:#F4EAD6;stroke-dashoffset:0;animation:none}.pu-mini .pu-l{opacity:1;animation:none}
@keyframes puQuay2{to{transform:rotate(360deg)}}
.pu-nho{font-family:var(--f-display);font-weight:300;font-size:clamp(16px,2vw,21px);letter-spacing:.04em}
.pu-tien{position:absolute;left:0;right:0;top:0;height:1px;overflow:hidden}
.pu-tien::after{content:'';position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(90deg,transparent,#FFE2A0,transparent);box-shadow:0 0 10px #E2B04A;animation:puChay 1.8s ease-in-out infinite}
@keyframes puChay{to{left:100%}}
/* đang chuyển cảnh (phim hoặc màn ảnh cũ): ẩn mọi HUD, thanh điều hướng, nút nổi; lúc màn chuyển mờ dần (.out) thì hiện lại cùng cảnh mới */
html:has(.hall>.w-trans.on:not(.out)) header.nav,html:has(.hall>.w-trans.on:not(.out)) #mainNav,
.hall:has(>.w-trans.on:not(.out))>:not(.w-trans){visibility:hidden!important}
/* không khí tưởng niệm: sáng, ấm, hơi ngả vàng nhẹ, bớt rực một chút (ảnh nướng giữ nguyên) */
.w3d canvas,.w-trans>canvas{filter:saturate(.86) sepia(.12) contrast(1.02) brightness(1.04)}
/* nắng vàng nhẹ xiên từ góc trên trái; viền tối rất nhẹ bốn góc (chủ dự án: sáng, thanh thản, không u ám như nghĩa trang thật) */
.hall.w3d-on .w3d::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:soft-light;background:linear-gradient(150deg,rgba(255,214,150,.6) 0%,rgba(255,226,180,.18) 50%,rgba(150,120,110,.18) 100%)}
.hall.w3d-on .w3d::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 95% at 50% 42%,transparent 60%,rgba(60,40,20,.22) 100%)}
/* trời 3D tự đổi theo giờ và thời tiết (js/26): tắt lớp màu trời, mưa vẽ phẳng của 2D (js/18) cho khỏi chồng hai lần;
   nắng vàng chỉ có ban ngày, đêm và mưa thì tắt */
.hall.w3d-on .wx-sky,.hall.w3d-on .wx-cv,.hall.w3d-on .wx-flash{display:none}
.hall.w3d-on .w3d::before{transition:opacity 3s}
.hall[data-troi^="dem"] .w3d::before,.hall[data-troi*="mua"] .w3d::before{opacity:0}
.hall[data-troi^="chieu"] .w3d::before,.hall[data-troi^="sang"] .w3d::before{opacity:.6}
/* phi thăng 3D khi chọn lối (js/26 ss3dPhiThang): loé sáng màu lối rồi phủ màu ngà, nối liền màn chuyển cảnh */
.asc3{position:fixed;inset:0;z-index:300;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(var(--m),.9),rgba(244,234,214,.95) 60%);opacity:0;animation:asc3 2.9s ease forwards}
@keyframes asc3{0%,30%{opacity:0}50%{opacity:1}75%{opacity:1}100%{opacity:0}}