/* ===== Cổng vào chia đôi: hai cảnh dựng cùng kiểu với thế giới ===== */
.gate>*:not(.g-head):not(.g-doors):not(.g-skip):not(.g-flash){display:none!important}
.gate .g-doors{position:fixed!important;inset:0!important;top:0!important;left:0!important;width:100vw!important;height:100%!important;grid-row:auto!important;grid-column:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;margin:0!important;max-width:none!important;padding:0!important;align-items:stretch!important}
.gate .g-doors::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:3;background:linear-gradient(transparent,rgba(242,208,138,.9) 20%,rgba(242,208,138,.9) 80%,transparent);box-shadow:0 0 18px rgba(242,208,138,.7);pointer-events:none}
.gate .g-door{pointer-events:auto!important;animation:none!important;position:relative!important;display:block!important;overflow:hidden!important;width:100%!important;min-width:0!important;height:100%!important;justify-self:stretch!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#24160F!important;cursor:pointer;transform:none!important;opacity:1!important}
.gate .g-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .6s;animation:gBg 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes gBg{from{transform:scale(1.12);filter:brightness(.6)}to{transform:none;filter:none}}
.gate .g-door:hover .g-bg,.gate .g-door:focus-visible .g-bg{transform:scale(1.05)}
.gate[data-hover="phat"] .g-door.cg .g-bg,.gate[data-hover="cg"] .g-door.phat .g-bg{filter:brightness(.62) saturate(.75)}
.gate .g-door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,8,.45),rgba(20,12,8,0) 30%,rgba(20,12,8,0) 62%,rgba(20,12,8,.7));pointer-events:none}
.gate .g-frame{position:absolute;left:40%;top:52%;width:20%;height:16%;pointer-events:none}
.gate .g-cap{position:absolute!important;z-index:2;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:4px;justify-items:center;width:max-content;max-width:92%;padding:12px 22px;border-radius:18px;
  background:rgba(32,20,13,.78);border:1px solid rgba(212,162,76,.45);color:#FBF1DC;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .3s}
.gate .g-cap b{font-size:clamp(15px,2.2vw,20px);font-weight:600;color:#F2D08A}
.gate .g-cap small{font-size:clamp(11.5px,1.4vw,14px);opacity:.85}
.gate .g-door:hover .g-cap{transform:translateX(-50%) translateY(-4px)}
.gate .g-head{position:absolute!important;z-index:4;left:50%;top:calc(22px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(640px,92%);text-align:center;color:#FFF6E4;pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.gate .g-head h2{color:#FFF6E4!important}.gate .g-head p{color:rgba(255,246,228,.9)!important}
.gate .g-skip{position:absolute!important;z-index:4;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(32,20,13,.7)!important;color:#F2D08A!important;border:1px solid rgba(212,162,76,.4)!important;border-radius:999px;padding:10px 18px}
@media (max-width:640px){.gate .g-head p{display:none}.gate .g-cap{padding:10px 12px;bottom:calc(70px + env(safe-area-inset-bottom,0px))}.gate .g-cap small{display:none}}
@media (prefers-reduced-motion:reduce){.gate .g-bg{animation:none}}
.hall.world-on .hall-scene{display:none}
.gate .g-frame,.gate .g-frame::after,.gate .g-frame::before{background:none!important;border:0!important;box-shadow:none!important;animation:none!important;display:block!important;aspect-ratio:auto!important;position:absolute!important}
.gate .g-frame::after{display:none!important}
.gate .g-head{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important}
.gate .g-cap,.gate .g-cap *{opacity:1!important;visibility:visible!important;animation:none!important}
.gate .g-cap b{color:#F2D08A!important;text-decoration:none!important}.gate .g-cap small{color:rgba(251,241,220,.85)!important}
.hall[data-ws="tho"] .w-up,.hall[data-ws="tho"] .w-venui{display:none!important}
.hall[data-ws="tho"] [data-w="chap"],.hall[data-ws="tho"] [data-w="lay"],.hall[data-ws="tho"] [data-w="ngoi"]{display:inline-flex!important}

/* Sảnh chọn lối */
html.sanh-on #mainNav,html.sanh-on .hall .hall-act,html.sanh-on .hall .w-bar,html.sanh-on .hall .hall-emo,html.sanh-on .hall .rit-cta{display:none!important}
.hall[data-ws="sanh"] .hall-ttl .t-phat,.hall[data-ws="sanh"] .hall-ttl .t-cg{display:none!important}
.hall[data-ws="sanh"] .hall-ttl::before{content:"Sảnh chọn lối";display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.hall[data-ws="sanh"] .hall-splash{display:none!important}
.hall .wh.zn[data-w="g-logo"] .wh-lb b{font-family:var(--f-display);font-size:18px}
.sanh-tip{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;width:min(560px,calc(100% - 24px));padding:14px 14px 14px;border-radius:24px;
 background:linear-gradient(180deg,rgba(46,30,18,.86),rgba(26,17,10,.92));color:#FBF1DC;border:1px solid rgba(226,176,74,.45);box-shadow:0 18px 50px rgba(20,10,4,.45),inset 0 1px rgba(255,230,180,.18);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:stVao .8s cubic-bezier(.2,.8,.2,1) both;display:flex;flex-direction:column;gap:12px;overflow:hidden}
/* vệt sáng lướt qua khung */
.sanh-tip::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,226,160,.16) 50%,transparent 65%);transform:translateX(-100%);animation:stLuot 4.5s ease-in-out 1s infinite;pointer-events:none}
@keyframes stVao{from{opacity:0;transform:translate(-50%,30px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes stLuot{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.st-dau{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E9D3A6}
.st-lg{width:26px;height:26px;color:#FBF1DC;filter:drop-shadow(0 0 6px rgba(226,176,74,.8));animation:stLg 2.4s ease-in-out infinite}
@keyframes stLg{50%{filter:drop-shadow(0 0 14px rgba(255,210,120,1))}}
.st-hai{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-the{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 14px;border-radius:16px;border:1px solid;cursor:pointer;font:inherit;color:#fff;
 transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;animation:stNhip 2.6s ease-in-out infinite}
.st-the:hover,.st-the:focus-visible{transform:translateY(-3px)}
.st-the:active{transform:scale(.97)}
.st-phat{background:radial-gradient(120% 140% at 0% 0%,#F4C56A,#B6711E 60%,#7E4710);border-color:rgba(255,214,140,.7);--hq:255,196,90}
.st-cg{background:radial-gradient(120% 140% at 0% 0%,#B9CBF2,#5F7BB8 60%,#34497E);border-color:rgba(214,226,255,.7);--hq:170,195,255;animation-delay:1.3s}
@keyframes stNhip{0%,100%{box-shadow:0 0 0 1px rgba(var(--hq),.25),0 0 14px rgba(var(--hq),.35)}50%{box-shadow:0 0 0 1px rgba(var(--hq),.55),0 0 30px rgba(var(--hq),.75)}}
.st-ic{grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,.06) 70%);box-shadow:0 0 18px rgba(var(--hq),.9)}
.st-ic svg{width:26px;height:26px;fill:#fff;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.st-the b{font-family:var(--f-display);font-weight:500;font-size:19px;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.st-the small{font-size:11.5px;opacity:.9;line-height:1.3}
@media (max-width:480px){.st-the{grid-template-columns:1fr;justify-items:center;text-align:center;padding:12px 8px;row-gap:4px}.st-ic{grid-row:auto;width:40px;height:40px}.st-the b{font-size:17px}.st-the small{font-size:10.5px}.st-dau{font-size:10.5px;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.sanh-tip,.sanh-tip::before,.st-the,.st-lg{animation:none}}
html:not(.sanh-on) .sanh-tip{display:none}

/* ===== HUD: biểu tượng · chuyển động ===== */
@keyframes hudIn{from{opacity:0;transform:translate(-50%,-80%) scale(.85)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
@keyframes hudBob{0%,100%{margin-top:0}50%{margin-top:-4px}}
@keyframes hudRing{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.1);opacity:0}}
@keyframes hudPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.hall .wh .wh-lb{display:inline-grid!important;grid-template-columns:auto auto;align-items:center;column-gap:7px;padding:4px 12px 4px 4px!important;border-radius:999px!important;
  background:rgba(32,20,13,.82)!important;border:1px solid rgba(212,162,76,.45)!important;color:#FBF1DC!important;box-shadow:0 6px 18px rgba(0,0,0,.3)!important;animation:hudBob 3.4s ease-in-out infinite;animation-delay:var(--d,0ms)}
.hall .wh .wh-lb b{font-size:13.5px!important;font-weight:600!important;color:#FFF1D6!important;white-space:nowrap;grid-column:2}
.hall .wh .wh-lb small{grid-column:1/-1;display:none!important;font-size:11.5px;opacity:.8;padding:2px 6px 2px 4px;white-space:nowrap}
@media (hover:hover){.hall .wh:hover .wh-lb small,.hall .wh:focus-visible .wh-lb small{display:block!important}}
.hall .wh-ic{grid-column:1;grid-row:1;position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;color:#3A2518;background:linear-gradient(180deg,#F6DA9A,#C98A2E);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.hall .wh-ic svg{width:17px;height:17px}
.hall .wh-ic.av{color:#fff;background:var(--c);font-family:var(--f-display);font-size:15px;box-shadow:0 0 0 2px rgba(242,208,138,.7)}
.hall .wh.main .wh-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #F2D08A;animation:hudRing 1.8s ease-out infinite}
.hall .wh.main .wh-lb{background:linear-gradient(180deg,rgba(168,102,26,.95),rgba(110,62,14,.95))!important}
.hall .wh:hover .wh-lb,.hall .wh:focus-visible .wh-lb{transform:translateY(-3px) scale(1.04);border-color:#F2D08A!important}
.hall .wh .wh-lb{transition:transform .25s cubic-bezier(.3,1.6,.5,1),border-color .25s}
.hall .wh:active .wh-lb{transform:scale(.94)}
.hall .wh.pn .wh-lb{padding:3px 10px 3px 3px!important}
.hall .wh.pn .wh-ic{width:24px;height:24px;font-size:12.5px}
.hall .wh.pn .wh-lb b{font-size:12px!important}
.hall .wh.zn .wh-lb{background:rgba(255,246,228,.9)!important}.hall .wh.zn .wh-lb b{color:#3A2518!important}
/* thanh hành động: nút tròn biểu tượng */
.hall .w-bar{gap:8px!important}
.hall .w-bar [data-w]{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:48px;min-height:48px;padding:0 12px!important;border-radius:999px!important;
  background:rgba(32,20,13,.82)!important;border:1px solid rgba(212,162,76,.4)!important;color:#FBF1DC!important;font-size:14px;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .2s;animation:hudPop .5s cubic-bezier(.3,1.6,.5,1) both}
.hall .w-bar [data-w] svg{width:20px;height:20px;flex:none}
.hall .w-bar [data-w]:hover{transform:translateY(-3px)}
.hall .w-bar [data-w]:active{transform:scale(.9)}
.hall .w-bar [data-w] span{font-weight:500}
.hall .w-bar [data-w="chap"] span,.hall .w-bar [data-w="lay"] span,.hall .w-bar [data-w="ngoi"] span,.hall .w-bar [data-w="doi"] span{display:none}
.hall .w-bar [data-w="chap"],.hall .w-bar [data-w="lay"],.hall .w-bar [data-w="ngoi"],.hall .w-bar [data-w="doi"]{width:48px;padding:0!important}
.hall .w-bar .w-up,.hall .w-bar .w-down{background:linear-gradient(180deg,#E2A548,#A8661A)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 20px rgba(168,102,26,.4)}
@media (hover:hover){.hall .w-bar [data-w]{position:relative}.hall .w-bar [data-w]:hover::after{content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:8px;background:rgba(20,12,8,.9);color:#FBF1DC;font-size:12px;white-space:nowrap;pointer-events:none}}
/* hiện/ẩn nút theo cảnh (đặt sau để thắng kiểu nút tròn) */
.hall:not([data-ws="dien"]) .w-bar .w-down{display:none!important}
.hall[data-ws="dien"] .w-bar .w-up,.hall[data-ws="lang"] .w-bar .w-up,.hall[data-ws="nha"] .w-bar .w-up,.hall[data-ws="tho"] .w-bar .w-up,.hall[data-ws="sanh"] .w-bar .w-up{display:none!important}
.hall:not([data-ws="lang"]) .w-bar .w-venui{display:none!important}
.hall:not([data-ws="nha"]) .w-bar .w-ralang{display:none!important}
.hall:not([data-ws="dien"]):not([data-ws="nha"]):not([data-ws="tho"]) .w-bar [data-w="chap"],.hall:not([data-ws="dien"]):not([data-ws="nha"]):not([data-ws="tho"]) .w-bar [data-w="lay"],.hall:not([data-ws="dien"]):not([data-ws="nha"]):not([data-ws="tho"]) .w-bar [data-w="ngoi"]{display:none!important}
/* thanh trên: biểu tượng */
.hall .hall-act .hnav span{display:none}
.hall .hall-act .hnav,.hall .hall-act .hud-ic{display:inline-grid!important;place-items:center;width:42px;height:42px;padding:0!important;border-radius:50%!important;background:rgba(32,20,13,.72)!important;border:1px solid rgba(212,162,76,.35)!important;color:#F2D08A!important;transition:transform .2s}
.hall .hall-act .hnav:hover,.hall .hall-act .hud-ic:hover{transform:translateY(-2px) scale(1.06)}
.hall .hall-act .hud-ic svg{width:19px;height:19px}
.hall .hall-online span:not(.hud-on-ic){display:none}
.hall .hall-online{display:inline-flex!important;align-items:center;gap:6px}
.hall .hall-online .hud-on-ic svg{width:16px;height:16px;display:block}
.hall .hall-online i{animation:hudRing2 2s ease-in-out infinite}
@keyframes hudRing2{0%,100%{box-shadow:0 0 0 0 rgba(80,200,120,.6)}50%{box-shadow:0 0 0 5px rgba(80,200,120,0)}}
/* nút bày tỏ */
.hall .hall-emo button{transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.hall .hall-emo button:hover{transform:scale(1.18) rotate(-6deg)}
.hall .hall-emo button:active{transform:scale(.88)}
@media (prefers-reduced-motion:reduce){.hall .wh .wh-lb,.hall .wh.main .wh-ic::after,.hall .w-bar [data-w],.hall .hall-online i{animation:none!important}}
