/* ---------- Đại sảnh: nơi bước vào sau cánh cổng ---------- */
.hall{position:fixed;inset:0;z-index:180;overflow:hidden;background:#140D08;color:#FFF6E6;font-family:var(--f-body);container-type:size}
.hall[hidden]{display:none}
html.hall-on,html.hall-on body{overflow:hidden}
.hall .t-cg,body.faith-cg .hall .t-phat{display:none}body.faith-cg .hall .t-cg{display:inline}
body.faith-cg .hall{color:#2B241C;background:#F4EEE2}
.hall-ttl,.hall-act>*{white-space:nowrap}
.hall-scene{position:absolute;--sw:max(100cqw,177.78cqh);--sh:max(100cqh,56.25cqw);width:var(--sw);height:var(--sh);left:calc(50% - var(--sw) / 2);top:calc((100cqh - var(--sh)) * .55);background:none center/100% 100% no-repeat;animation:hallIn 2.4s cubic-bezier(.2,.7,.2,1) both}
body.faith-cg .hall-scene{background-image:none}
.hall-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 55%,rgba(0,0,0,0) 45%,rgba(20,10,4,.45));pointer-events:none}
body.faith-cg .hall-scene::after{background:radial-gradient(120% 90% at 50% 55%,rgba(0,0,0,0) 50%,rgba(40,50,80,.22))}
@keyframes hallIn{from{transform:scale(1.22);filter:brightness(1.9) blur(8px)}to{transform:none;filter:none}}
.hall-glow{position:absolute;left:50%;top:44%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,140,.32),rgba(255,214,140,0));animation:hallBreath 5s ease-in-out infinite;pointer-events:none}
body.faith-cg .hall-glow{top:36%;background:radial-gradient(closest-side,rgba(255,250,235,.38),rgba(255,250,235,0))}
@keyframes hallBreath{50%{opacity:.55;transform:translate(-50%,-50%) scale(1.08)}}
/* điểm bấm */
.hs{position:absolute;z-index:2;left:var(--px);top:var(--py);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;color:inherit;text-decoration:none;animation:hsIn .9s var(--ease) both;animation-delay:calc(1.2s + var(--d,0s))}
body.faith-cg .hs{left:var(--cx);top:var(--cy)}
.hs-l{left:max(var(--px), calc((var(--sw) - 100cqw) / 2 + 74px))}.hs-r{left:min(var(--px), calc((var(--sw) + 100cqw) / 2 - 74px))}
body.faith-cg .hs-l{left:max(var(--cx), calc((var(--sw) - 100cqw) / 2 + 74px))}body.faith-cg .hs-r{left:min(var(--cx), calc((var(--sw) + 100cqw) / 2 - 74px))}
.hs:nth-of-type(2){--d:.1s}.hs:nth-of-type(3){--d:.2s}.hs:nth-of-type(4){--d:.3s}.hs:nth-of-type(5){--d:.15s}.hs:nth-of-type(6){--d:.25s}.hs:nth-of-type(7){--d:.35s}
@keyframes hsIn{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}
.hs-dot{position:relative;width:16px;height:16px;border-radius:50%;background:#FFE7A8;box-shadow:0 0 0 4px rgba(255,231,168,.28),0 0 22px 6px rgba(255,200,110,.7)}
.hs-dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(255,231,168,.8);animation:hsPing 2.4s ease-out infinite}
@keyframes hsPing{from{transform:scale(.5);opacity:1}to{transform:scale(1.9);opacity:0}}
.hs-lb{display:grid;gap:2px;text-align:center;padding:8px 14px;border-radius:14px;background:rgba(32,18,8,.58);border:1px solid rgba(255,220,150,.35);backdrop-filter:blur(8px);white-space:nowrap;transition:transform .35s var(--ease),background .35s,border-color .35s}
body.faith-cg .hs-lb{background:rgba(255,255,255,.62);border-color:rgba(190,160,90,.45);color:#2B241C}
.hs-lb b{font-weight:500;font-size:15px}.hs-lb small{font-size:12px;opacity:.75}
.hs:hover .hs-lb,.hs:focus-visible .hs-lb{transform:translateY(-4px) scale(1.06);background:rgba(120,60,10,.78);border-color:#FFD98A}
body.faith-cg .hs:hover .hs-lb,body.faith-cg .hs:focus-visible .hs-lb{background:#fff;border-color:#C9A24A}
.hs:hover .hs-dot,.hs:focus-visible .hs-dot{background:#fff;box-shadow:0 0 0 6px rgba(255,231,168,.4),0 0 36px 12px rgba(255,210,130,.9)}
.hs:focus-visible{outline:none}.hs:focus-visible .hs-lb{outline:2px solid #FFD98A;outline-offset:3px}
.hs-main .hs-dot{width:22px;height:22px}.hs-main .hs-lb{padding:10px 20px;background:linear-gradient(180deg,rgba(150,70,10,.82),rgba(80,30,6,.82));border-color:#FFD98A}.hs-main .hs-lb b{font-size:18px}
body.faith-cg .hs-main .hs-lb{background:rgba(255,255,255,.85);border-color:#C9A24A}
/* bụi sáng */
.hall-motes{position:absolute;inset:0;pointer-events:none;z-index:1}
.hall-motes i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:rgba(255,226,160,.85);box-shadow:0 0 8px rgba(255,210,130,.9);animation:mote linear infinite}
@keyframes mote{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(-95vh) translateX(30px);opacity:0}}
/* thanh trên và dưới */
.hall-top{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;background:linear-gradient(rgba(14,8,4,.6),rgba(14,8,4,0));animation:hsIn .8s .6s both;transform:none}
body.faith-cg .hall-top{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));color:#2B241C}
.hall-ttl{display:grid;line-height:1.1}.hall-ttl span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}.hall-ttl b{font-family:var(--f-display,inherit);font-size:24px;font-weight:500}
.hall-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hall-act>*,.hall-dock>*{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid rgba(255,220,150,.4);background:rgba(32,18,8,.5);backdrop-filter:blur(8px);color:inherit;font:inherit;font-size:15px;text-decoration:none;cursor:pointer;transition:background .25s}
body.faith-cg .hall-act>*,body.faith-cg .hall-dock>*{background:rgba(255,255,255,.7);border-color:rgba(190,160,90,.45)}
.hall-act>*:hover,.hall-dock>*:hover{background:rgba(120,60,10,.75)}body.faith-cg .hall-act>*:hover,body.faith-cg .hall-dock>*:hover{background:#fff}
.hall-list{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 20px calc(18px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;gap:10px;pointer-events:none}
.hall-list>*{pointer-events:auto}
.hall-hint,.hall-grid{display:none}
.hall-dock{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;animation:hsIn .8s 1.6s both;transform:none}
@keyframes hsIn2{from{opacity:0}to{opacity:1}}
.hall-top,.hall-dock{animation-name:hsIn2}
/* điện thoại và màn hình dọc: danh sách nút to thay cho điểm bấm hai bên */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .hs-l,.hs-r{display:none}
  .hs-main{top:38%!important}
  .hall-top{padding-inline:12px}.hall-ttl span{font-size:10px}.hall-ttl b{font-size:17px}.hall-act{flex-wrap:nowrap;gap:5px}.hall-act>*{padding:0 9px;font-size:13px;min-height:40px}
  .hall-list{max-height:52%;overflow:auto;padding-top:28px;background:linear-gradient(rgba(14,8,4,0),rgba(14,8,4,.78) 22%);justify-items:stretch}
  body.faith-cg .hall-list{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.85) 22%);color:#2B241C}
  .hall-hint{display:block;margin:0;text-align:center;font-size:14px;opacity:.8}
  .hall-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;animation:hsIn2 .8s 1.2s both}
  .hall-grid a{display:grid;gap:2px;padding:12px 14px;min-height:60px;border-radius:16px;background:rgba(40,22,10,.62);border:1px solid rgba(255,220,150,.32);color:inherit;text-decoration:none}
  body.faith-cg .hall-grid a{background:rgba(255,255,255,.8);border-color:rgba(190,160,90,.45)}
  .hall-grid a b{font-weight:500;font-size:16px}.hall-grid a small{font-size:13px;opacity:.75}
  .hall-grid .hl-main{grid-column:1/-1;background:linear-gradient(180deg,rgba(150,70,10,.85),rgba(80,30,6,.85));border-color:#FFD98A;color:#FFF6E6}
  body.faith-cg .hall-grid .hl-main{background:linear-gradient(180deg,#fff,#F6EBD2);color:#2B241C;border-color:#C9A24A}
  .hall-dock{justify-content:flex-start}.hall-dock>*{font-size:14px;padding:0 14px}
}
@media (max-width:760px){.hs-main{display:none}}
@media (prefers-reduced-motion:reduce){.hall *, .hall-scene{animation:none!important}}

/* Đại sảnh: biểu tượng, logo và hiệu ứng */
.hall .ic{width:20px;height:20px;flex:none}
.hs-dot{width:46px;height:46px;display:grid;place-items:center;color:#5A2E0A;background:radial-gradient(circle at 35% 30%,#FFF7DD,#F2C66B 60%,#C98A2E);border:1.5px solid #FFE7A8;box-shadow:0 0 0 4px rgba(255,231,168,.22),0 0 26px 6px rgba(255,200,110,.6);animation:hsBob 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.hs-dot .ic{width:24px;height:24px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
body.faith-cg .hs-dot{color:#7A5A18;background:radial-gradient(circle at 35% 30%,#fff,#F7EFD8 60%,#DCC48A);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.4),0 0 26px 6px rgba(255,236,190,.8)}
.hs-dot::after{inset:-8px}
.hs-dot::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.95) 85%,transparent 100%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:hsSpin 3.2s linear infinite;opacity:.8}
@keyframes hsSpin{to{transform:rotate(1turn)}}
@keyframes hsBob{50%{transform:translateY(-5px)}}
.hs:hover .hs-dot,.hs:focus-visible .hs-dot{color:#5A2E0A;background:radial-gradient(circle at 35% 30%,#fff,#FFE29A 55%,#E7A33E)}
.hs:hover .hs-dot .ic,.hs:focus-visible .hs-dot .ic{transform:scale(1.18) rotate(-8deg)}
.hs-main .hs-dot{width:62px;height:62px}.hs-main .hs-dot .ic{width:32px;height:32px}
.hall .smk{animation:smk 2.6s ease-in-out infinite;stroke-dasharray:8;opacity:.85}.hall .smk.s2{animation-delay:-.9s}.hall .smk.s3{animation-delay:-1.7s}
@keyframes smk{0%{transform:translateY(2px);opacity:0}40%{opacity:.9}100%{transform:translateY(-3px);opacity:0}}
.hall .flm{transform-origin:12px 9px;animation:flm 1.2s ease-in-out infinite alternate;fill:rgba(255,190,80,.55)}
@keyframes flm{to{transform:scale(.9,1.08) skewX(4deg)}}
.hs-lb{animation:none}
/* logo trên thanh */
.hall-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.hall-brand .hl-logo{width:40px;height:40px;overflow:visible;color:#FFE7A8;filter:drop-shadow(0 0 10px rgba(255,210,130,.6))}
body.faith-cg .hall-brand .hl-logo{color:#8A6A28;filter:drop-shadow(0 0 8px rgba(255,236,190,.9))}
.hl-logo circle,.hl-logo path{transform-box:fill-box;transform-origin:center}
.hall-top .hl-logo circle:nth-of-type(1){animation:hlL 1.4s .4s cubic-bezier(.3,1.4,.5,1) both}
.hall-top .hl-logo circle:nth-of-type(2){animation:hlR 1.4s .4s cubic-bezier(.3,1.4,.5,1) both}
.hall-top .hl-logo path{animation:hlLens .8s 1.4s ease-out both,lgGlow2 3s 2.2s ease-in-out infinite}
@keyframes hlL{from{transform:translateX(-5px);opacity:0}to{transform:none;opacity:1}}
@keyframes hlR{from{transform:translateX(5px);opacity:0}to{transform:none;opacity:1}}
@keyframes hlLens{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes lgGlow2{50%{opacity:.55}}
.hall-brand:hover .hl-logo{animation:hlSpin 1.2s cubic-bezier(.3,1.2,.4,1)}
@keyframes hlSpin{to{transform:rotate(1turn)}}
.hall-ttl b{background:linear-gradient(100deg,currentColor 0 40%,#FFD98A 50%,currentColor 60% 100%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hlShine 4s 1.6s ease-in-out infinite}
body.faith-cg .hall-ttl b{background-image:linear-gradient(100deg,#2B241C 0 40%,#C9963A 50%,#2B241C 60% 100%)}
@keyframes hlShine{0%,60%{background-position:100% 0}100%{background-position:0 0}}
.hall-act>*,.hall-dock>*{gap:7px}
.hall-act>*:hover .ic,.hall-dock>*:hover .ic{animation:icPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes icPop{40%{transform:scale(1.25) rotate(-10deg)}}
/* màn chào: logo lớn ở giữa khi vừa vào sảnh */
.hall-splash{position:absolute;z-index:4;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;pointer-events:none;text-align:center;animation:splOut .9s 2.1s ease-in both}
.hall-splash .hl-logo{width:96px;height:96px;color:#FFE7A8;overflow:visible;filter:drop-shadow(0 0 24px rgba(255,210,130,.9))}
body.faith-cg .hall-splash .hl-logo{color:#8A6A28;filter:drop-shadow(0 0 20px rgba(255,255,255,1))}
.hall-splash .hl-logo circle:nth-of-type(1){animation:hlL2 1.3s .2s cubic-bezier(.3,1.3,.5,1) both}
.hall-splash .hl-logo circle:nth-of-type(2){animation:hlR2 1.3s .2s cubic-bezier(.3,1.3,.5,1) both}
.hall-splash .hl-logo path{animation:hlLens .7s 1.2s ease-out both}
@keyframes hlL2{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes hlR2{from{transform:translateX(14px);opacity:0}to{transform:none;opacity:1}}
.hall-splash b{font-family:var(--f-display,inherit);font-size:clamp(34px,5vw,54px);font-weight:500;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.45);animation:splUp .9s .7s cubic-bezier(.2,.8,.2,1) both}
.hall-splash>span{font-size:16px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 12px rgba(0,0,0,.5);animation:splUp .9s 1s cubic-bezier(.2,.8,.2,1) both}
body.faith-cg .hall-splash b,body.faith-cg .hall-splash>span{text-shadow:0 1px 18px rgba(255,255,255,1)}
@keyframes splUp{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes splOut{to{opacity:0;transform:scale(1.08);visibility:hidden}}
.hs{animation-delay:calc(2.6s + var(--d,0s))}.hall-top,.hall-dock,.hall-grid{animation-delay:2.4s}
/* bấm vào một nơi: cảnh tiến về phía đó */
.hall.go .hall-scene{transition:transform .8s cubic-bezier(.6,0,.3,1),filter .8s;transform:scale(2.2);filter:brightness(1.6) blur(3px)}
.hall.go .hs,.hall.go .hall-top,.hall.go .hall-list{opacity:0;transition:opacity .3s}
.hall-grid a,.hall-dock>*{transition:transform .25s,background .25s}
.hall-grid a:active,.hall-dock>*:active{transform:scale(.96)}
.hall-grid a{grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.hall-grid a .ic{grid-row:span 2;width:28px;height:28px;color:#FFD98A}
body.faith-cg .hall-grid a .ic{color:#A07A2A}
.hall-grid .hl-main .ic{width:34px;height:34px}
@media (max-width:760px){.hall-brand .hl-logo{width:32px;height:32px}.hall-act span{display:none}.hall-act>*{padding:0;width:42px;justify-content:center}.hall-act .ic{width:20px;height:20px}.hall-splash .hl-logo{width:76px;height:76px}}
@media (prefers-reduced-motion:reduce){.hall-splash{display:none}.hs{animation-delay:0s}}

/* Đại sảnh: các mục bấm xếp thành 2 cột gọn ở hai bên, chữ to, dễ bấm */
.hs-col{position:absolute;z-index:2;top:52%;transform:translateY(-50%);display:grid;gap:12px;width:clamp(230px,23vw,290px)}
.hs-col.l{left:clamp(16px,3vw,52px)}.hs-col.r{right:clamp(16px,3vw,52px)}
.hs-cap{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;padding-left:6px;text-shadow:0 1px 8px rgba(0,0,0,.6);animation:hsIn2 .8s 2.5s both}
.hs-col.r .hs-cap{text-align:right;padding:0 6px 0 0}
body.faith-cg .hs-cap{text-shadow:0 1px 8px rgba(255,255,255,1)}
.hc{display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 16px 10px 10px;border-radius:20px;color:inherit;text-decoration:none;background:linear-gradient(100deg,rgba(40,20,8,.72),rgba(40,20,8,.5));border:1px solid rgba(255,220,150,.38);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .3s,border-color .3s,box-shadow .3s;animation:hcInL .9s cubic-bezier(.2,.8,.2,1) both}
.hs-col.r .hc{flex-direction:row-reverse;text-align:right;padding:10px 10px 10px 16px;background:linear-gradient(260deg,rgba(40,20,8,.72),rgba(40,20,8,.5));animation-name:hcInR}
.hc:nth-of-type(1){animation-delay:2.6s}.hc:nth-of-type(2){animation-delay:2.75s}.hc:nth-of-type(3){animation-delay:2.9s}
@keyframes hcInL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes hcInR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
body.faith-cg .hc{background:linear-gradient(100deg,rgba(255,255,255,.86),rgba(255,255,255,.62));border-color:rgba(190,160,90,.5);box-shadow:0 10px 30px rgba(120,100,60,.15)}
body.faith-cg .hs-col.r .hc{background:linear-gradient(260deg,rgba(255,255,255,.86),rgba(255,255,255,.62))}
.hc .hs-dot{flex:none;width:48px;height:48px;animation:none}
.hc-lb{display:grid;gap:3px;min-width:0}
.hc-lb b{font-weight:500;font-size:17px;line-height:1.2}
.hc-lb small{font-size:13.5px;opacity:.78}
.hc:hover,.hc:focus-visible{transform:translateX(8px);border-color:#FFD98A;background:linear-gradient(100deg,rgba(130,62,10,.85),rgba(70,30,8,.7));box-shadow:0 0 0 1px rgba(255,217,138,.5),0 12px 36px rgba(255,190,90,.25)}
.hs-col.r .hc:hover,.hs-col.r .hc:focus-visible{transform:translateX(-8px);background:linear-gradient(260deg,rgba(130,62,10,.85),rgba(70,30,8,.7))}
body.faith-cg .hc:hover,body.faith-cg .hc:focus-visible{background:#fff;border-color:#C9A24A;box-shadow:0 0 0 1px rgba(201,162,74,.5),0 12px 36px rgba(201,162,74,.25)}
.hc:hover .hs-dot,.hc:focus-visible .hs-dot{background:radial-gradient(circle at 35% 30%,#fff,#FFE29A 55%,#E7A33E)}
.hc:hover .hs-dot .ic,.hc:focus-visible .hs-dot .ic{transform:scale(1.18) rotate(-8deg)}
.hc:focus-visible{outline:2px solid #FFD98A;outline-offset:3px}
.hc::after{content:"›";margin-left:auto;font-size:26px;line-height:1;opacity:.5;transition:transform .3s,opacity .3s}
.hs-col.r .hc::after{content:"‹";margin:0 auto 0 0}
.hc:hover::after{opacity:1;transform:translateX(4px)}.hs-col.r .hc:hover::after{transform:translateX(-4px)}
.hall.go .hs-col{opacity:0;transition:opacity .3s}
/* bàn thờ: nút chính to, rõ, ở giữa */
.hs-main{top:auto!important;bottom:calc(var(--sh) - 100cqh - (100cqh - var(--sh)) * .55 + 96px);transform:translateX(-50%)!important;flex-direction:row;display:flex;gap:14px;align-items:center;animation:hsMainIn 1s 2.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes hsMainIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.hs-main .hs-lb{padding:12px 24px;text-align:left;border-radius:999px;box-shadow:0 0 0 6px rgba(255,217,138,.12),0 0 40px rgba(255,190,90,.35);animation:mainGlow 2.8s ease-in-out infinite}
.hs-main .hs-lb b{font-size:20px}.hs-main .hs-lb small{font-size:14px}
@keyframes mainGlow{50%{box-shadow:0 0 0 10px rgba(255,217,138,.06),0 0 60px rgba(255,190,90,.55)}}
.hs-main:hover .hs-lb{transform:scale(1.05)}
@media (max-width:1100px) and (min-width:761px){.hs-col{width:220px}.hc{min-height:60px}.hc-lb b{font-size:15.5px}.hc-lb small{display:none}.hc .hs-dot{width:40px;height:40px}}
@media (max-width:760px),(max-aspect-ratio:1/1){.hs-col,.hs-main{display:none!important}}
@media (prefers-reduced-motion:reduce){.hc,.hs-cap,.hs-main{animation:none!important}}

@media (max-width:760px),(max-aspect-ratio:1/1){
  .hall-grid a{grid-template-columns:1fr;align-content:start;row-gap:4px;padding:12px 14px}
  .hall-grid a .ic{grid-row:auto;width:26px;height:26px;margin-bottom:2px}
  .hall-grid .hl-main{grid-template-columns:auto 1fr}.hall-grid .hl-main .ic{grid-row:span 2;width:32px;height:32px}
}

/* ===== Đại sảnh: nút gọn hơn ===== */
.hs-col{width:auto;gap:8px;top:46%}
.hs-cap{font-size:11px}
.hc{min-height:50px;padding:5px 16px 5px 5px;gap:10px;border-radius:999px}
.hs-col.r .hc{padding:5px 5px 5px 16px}
.hc .hs-dot{width:40px;height:40px}.hc .hs-dot .ic{width:20px;height:20px}
.hc-lb small{display:none}.hc-lb b{font-size:15.5px;white-space:nowrap}
.hc::after{display:none}
.hs-main{top:var(--py)!important;bottom:auto;transform:translate(-50%,-50%)!important}
body.faith-cg .hs-main{top:var(--cy)!important}
@keyframes hsMainIn{from{opacity:0;margin-top:16px}to{opacity:1;margin-top:0}}
.hs-main .hs-dot{width:46px;height:46px}.hs-main .hs-dot .ic{width:24px;height:24px}
.hs-main .hs-lb{padding:8px 18px}.hs-main .hs-lb b{font-size:17px}.hs-main .hs-lb small{display:none}
.hall-act>*,.hall-dock>*{min-height:38px;padding:0 13px;font-size:14px}
.hall-act .ic,.hall-dock .ic{width:18px;height:18px}
.hall-dock{gap:6px}
/* người trực tuyến */
.hall-online{display:inline-flex;align-items:center;gap:6px;cursor:default}
.hall-online i{width:9px;height:9px;border-radius:50%;background:#5BD47A;box-shadow:0 0 0 0 rgba(91,212,122,.7);animation:onPulse 2s infinite}
@keyframes onPulse{70%{box-shadow:0 0 0 8px rgba(91,212,122,0)}100%{box-shadow:0 0 0 0 rgba(91,212,122,0)}}
.hall-online b{font-weight:600}
/* sàn: nơi mọi người xuất hiện */
.hall-floor{position:absolute;z-index:2;left:4%;right:4%;top:72%;height:17%;cursor:pointer}
.av{position:absolute;left:0;top:0;width:0;height:0;transition:transform var(--dur,1.2s) linear;will-change:transform;pointer-events:none}
.av-in{position:absolute;left:-24px;bottom:0;width:48px;display:grid;justify-items:center;transform-origin:50% 100%;transform:scale(calc(var(--sc,1) * var(--avz,1.3)))}
.av svg.body{width:48px;height:62px;overflow:visible;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.av.left svg.body{transform:scaleX(-1)}
.av.walk svg.body{animation:avWalk .38s ease-in-out infinite}
@keyframes avWalk{50%{translate:0 -3px;rotate:2deg}}
.av .shadow{position:absolute;bottom:-4px;width:36px;height:9px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(2px)}
.av.me .shadow{background:radial-gradient(closest-side,rgba(255,217,138,.9),rgba(255,217,138,0));width:54px;height:16px;bottom:-8px;filter:none;animation:meRing 2s ease-in-out infinite}
@keyframes meRing{50%{opacity:.5;transform:scale(1.15)}}
.av .tag{position:absolute;bottom:66px;white-space:nowrap;font-size:12px;line-height:1;padding:4px 8px;border-radius:999px;background:rgba(20,10,4,.7);color:#FFF6E6;border:1px solid rgba(255,220,150,.35)}
body.faith-cg .av .tag{background:rgba(255,255,255,.85);color:#2B241C;border-color:rgba(190,160,90,.5)}
.av.me .tag{background:linear-gradient(180deg,#B8701A,#7A3E0A);border-color:#FFD98A;color:#fff}
.av .bub{position:absolute;bottom:88px;font-size:24px;line-height:1;animation:bubIn .5s cubic-bezier(.3,1.6,.5,1) both,bubFloat 2s .5s ease-in-out infinite}
@keyframes bubIn{from{transform:scale(0) translateY(10px);opacity:0}}
@keyframes bubFloat{50%{transform:translateY(-4px)}}
.av.arrive .av-in{animation:avArrive .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes avArrive{from{opacity:0;filter:brightness(3) blur(4px);transform:scale(calc(var(--sc,1) * 1.4)) translateY(-20px)}}
.floor-ping{position:absolute;width:40px;height:14px;margin:-7px 0 0 -20px;border-radius:50%;border:2px solid rgba(255,217,138,.9);animation:fPing .7s ease-out forwards;pointer-events:none}
@keyframes fPing{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
/* bày tỏ */
.hall-emo{position:absolute;z-index:3;left:clamp(16px,3vw,52px);bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;animation:hsIn2 .8s 2.6s both}
.hall-emo button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,220,150,.4);background:rgba(32,18,8,.5);backdrop-filter:blur(8px);font-size:19px;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
body.faith-cg .hall-emo button{background:rgba(255,255,255,.7);border-color:rgba(190,160,90,.45)}
.hall-emo button:hover{transform:translateY(-3px) scale(1.12)}.hall-emo button:active{transform:scale(.9)}
.hall-dock{padding-left:0}
@media (min-width:761px){.hall-list{left:auto;right:clamp(16px,3vw,52px);justify-items:end;padding-inline:0}}
/* nút nhạc */
.ss-mus-btn .w1,.ss-mus-btn .w2{transition:opacity .3s}
.ss-mus-btn[aria-pressed="false"] .w1,.ss-mus-btn[aria-pressed="false"] .w2{opacity:0}
.ss-mus-btn[aria-pressed="true"] .w1{animation:mw 1.4s ease-in-out infinite}.ss-mus-btn[aria-pressed="true"] .w2{animation:mw 1.4s .2s ease-in-out infinite}
@keyframes mw{50%{opacity:.3}}
.ss-mus-fab{position:fixed;z-index:60;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(43,36,28,.15);background:rgba(251,246,236,.9);backdrop-filter:blur(10px);color:#2B241C;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.ss-mus-fab .ic{width:20px;height:20px}
html.hall-on .ss-mus-fab,html.gate-on .ss-mus-fab,html.pre-enter .ss-mus-fab{display:none}
@media (max-width:760px){.ss-mus-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
/* điện thoại: sàn nằm ngay trên danh sách */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .hall-floor{top:41%;height:8%;left:6%;right:6%}
  .hall{--avz:.8}
  .hall-online span,.ss-mus-btn span{display:none}
  .hall-online{padding:0 10px!important;width:auto!important;gap:5px}
  .hall-emo{left:auto;right:12px;bottom:auto;top:calc(64px + env(safe-area-inset-top,0px));flex-direction:column}
  .hall-emo button{width:38px;height:38px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){.av{transition:none}.av.walk svg.body,.hall-online i{animation:none}}