:root{--navy:#073b4c;--deep:#032c3a;--teal:#10a6a0;--mint:#59d0c8;--cream:#fff4c7;--header:88px;--nav:58px;--shadow:0 16px 42px rgba(2,31,43,.3)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:"Segoe UI",Arial,sans-serif;background:var(--deep);color:var(--navy)}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.museum-app{height:100%;display:grid;grid-template-rows:var(--header) var(--nav) 1fr}
.museum-header{z-index:20;display:grid;grid-template-columns:120px 1fr 120px;align-items:center;padding:0 clamp(24px,4vw,72px);background:linear-gradient(100deg,#fff,#f5fffd 55%,#fff9df);border-bottom:1px solid rgba(7,59,76,.12)}
.museum-brand{display:flex;width:66px;height:66px}.museum-logo{position:relative;width:66px;height:66px;border-radius:20px;background:var(--navy);box-shadow:0 8px 22px #073b4c33}.museum-logo:after{content:"";position:absolute;inset:8px;border:1px solid #ffffff38;border-radius:14px}.museum-logo i{position:absolute;z-index:1;top:16px;left:14px;width:38px;height:12px;background:var(--cream);clip-path:polygon(50% 0,100% 100%,0 100%)}.museum-logo b{position:absolute;z-index:1;left:16px;bottom:14px;width:34px;height:23px;border:solid var(--mint);border-width:5px 0;background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 10px)}
.museum-title{text-align:center;text-transform:uppercase;line-height:1.1}.museum-title span{color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.22em}.museum-title h1{margin:6px 0 0;font:700 clamp(20px,2.1vw,32px) Georgia,serif;letter-spacing:.035em}.header-menu{justify-self:end;display:grid;grid-template-columns:28px auto;align-items:center;gap:0 12px;min-width:104px;min-height:52px;padding:10px 16px;color:#fff;background:var(--navy);border:0;border-radius:16px;cursor:pointer}.header-menu i{grid-column:1;width:26px;height:2px;margin:2px 0;background:var(--cream)}.header-menu strong{grid-column:2;grid-row:1/span 3}
.museum-nav{z-index:19;display:flex;align-items:stretch;justify-content:center;gap:clamp(6px,1.3vw,24px);padding:0 clamp(16px,3vw,50px);background:var(--navy);box-shadow:0 5px 18px #0003}.museum-nav a{position:relative;display:flex;align-items:center;padding:0 14px;color:#ffffffd1;text-decoration:none;font-size:clamp(13px,1vw,16px);font-weight:600;white-space:nowrap}.museum-nav a:after{content:"";position:absolute;right:14px;bottom:0;left:14px;height:4px;border-radius:4px 4px 0 0}.museum-nav a:hover,.museum-nav a.active{color:#fff}.museum-nav a.active:after{background:var(--cream)}
.panorama-stage{position:relative;min-height:0;overflow:hidden;background:#051f28}.panorama-stage:fullscreen,.panorama-stage:-webkit-full-screen{width:100vw;height:100vh}.panorama-stage:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 25px 45px #02202b1f,inset 0 -90px 100px #02202b55}.vr360-frame{width:100%;height:100%;border:0;display:block}.tour-status{position:absolute;z-index:3;top:22px;left:28px;display:flex;align-items:center;gap:9px;min-height:38px;padding:0 15px;color:#fff;background:#032c3ac7;border:1px solid #ffffff38;border-radius:50px;backdrop-filter:blur(12px);font-size:13px;font-weight:600}.tour-status i{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px #59d0c82e}
.floor-selector{position:absolute;z-index:6;top:50%;right:28px;transform:translateY(-50%);display:flex;align-items:center}.floor-toggle{position:relative;z-index:2;display:grid;place-items:center;width:62px;height:62px;padding:0;color:#fff;background:linear-gradient(145deg,#0c5365,#032c3a);border:1px solid #ffffff45;border-radius:20px;box-shadow:0 14px 35px #021c28aa,inset 0 1px #ffffff25;cursor:pointer;transition:transform .2s,background .2s,color .2s}.floor-toggle:hover,.floor-toggle:focus-visible,.floor-selector.open .floor-toggle{color:var(--navy);background:var(--cream);outline:0;transform:translateY(-2px)}.floor-toggle svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.floor-current{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:24px;height:24px;color:var(--navy);background:var(--mint);border:3px solid var(--deep);border-radius:50%;font-size:11px;font-weight:800}.floor-panel{position:absolute;right:48px;width:250px;padding:18px 28px 18px 18px;opacity:0;visibility:hidden;transform:translateX(18px) scale(.97);transform-origin:right center;color:#fff;background:#032c3af2;border:1px solid #ffffff33;border-radius:24px 0 0 24px;box-shadow:var(--shadow);backdrop-filter:blur(18px);transition:.24s}.floor-selector.open .floor-panel{opacity:1;visibility:visible;transform:none}.floor-panel p{margin:0 0 12px;color:var(--mint);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.floor-option{display:grid;grid-template-columns:46px 1fr;align-items:center;width:100%;min-height:58px;margin-top:8px;color:#fff;text-align:left;background:#ffffff12;border:1px solid transparent;border-radius:14px;cursor:pointer}.floor-option span{text-align:center;color:var(--mint);font-size:13px}.floor-option b{font-size:17px}.floor-option:hover,.floor-option.active{color:var(--navy);background:var(--cream)}.floor-option.active span{color:var(--navy)}
.tour-controls{position:absolute;z-index:5;bottom:24px;left:50%;display:flex;gap:7px;padding:7px;transform:translateX(-50%);background:#032c3ad9;border:1px solid #ffffff38;border-radius:22px;box-shadow:var(--shadow),inset 0 1px #ffffff18;backdrop-filter:blur(18px)}.tour-controls button{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;color:#fff;background:transparent;border:0;border-radius:16px;cursor:pointer;transition:transform .18s,background .18s,color .18s}.tour-controls button:hover,.tour-controls button:focus-visible,.tour-controls button.active{color:var(--navy);background:var(--cream);outline:0;transform:translateY(-2px)}.tour-controls svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.tour-controls button:before,.floor-toggle:before{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 12px);padding:7px 10px;opacity:0;visibility:hidden;transform:translate(-50%,5px);color:#fff;background:#021f2a;border:1px solid #ffffff2e;border-radius:8px;box-shadow:0 8px 20px #0005;pointer-events:none;white-space:nowrap;font-size:12px;font-weight:600;transition:.18s}.tour-controls button:hover:before,.tour-controls button:focus-visible:before,.floor-toggle:hover:before,.floor-toggle:focus-visible:before{opacity:1;visibility:visible;transform:translate(-50%,0)}.sound-off,.collapse-icon{display:none}.tour-controls [data-action="sound"][aria-pressed="false"] .sound-on,.panorama-stage:fullscreen .expand-icon,.panorama-stage:-webkit-full-screen .expand-icon{display:none}.tour-controls [data-action="sound"][aria-pressed="false"] .sound-off,.panorama-stage:fullscreen .collapse-icon,.panorama-stage:-webkit-full-screen .collapse-icon{display:block}
.info-card{position:absolute;z-index:7;left:28px;bottom:112px;width:min(390px,calc(100% - 56px));padding:26px;opacity:0;visibility:hidden;transform:translateY(15px);color:#fff;background:#032c3af2;border:1px solid #ffffff33;border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(18px);transition:.25s}.info-card.open{opacity:1;visibility:visible;transform:none}.info-card small{color:var(--mint);font-weight:700;letter-spacing:.12em;text-transform:uppercase}.info-card h2{margin:9px 30px 10px 0;color:var(--cream);font:700 23px/1.25 Georgia,serif}.info-card p{margin:0;color:#ffffffc7;line-height:1.6}.info-card>button{position:absolute;top:13px;right:13px;width:42px;height:42px;color:#fff;background:#ffffff1a;border:0;border-radius:50%;cursor:pointer;font-size:26px}.tour-toast{position:absolute;z-index:8;top:22px;left:50%;padding:13px 20px;opacity:0;transform:translate(-50%,-12px);color:var(--navy);background:var(--cream);border-radius:50px;box-shadow:var(--shadow);pointer-events:none;font-weight:700;transition:.25s}.tour-toast.show{opacity:1;transform:translate(-50%,0)}
.virtual-guide{position:absolute;z-index:5;right:22px;bottom:18px;width:clamp(105px,8.5vw,154px);height:clamp(220px,30vh,390px);pointer-events:none;filter:drop-shadow(0 15px 20px #00182188)}.virtual-guide img{position:absolute;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:auto}.guide-bubble{position:absolute;right:calc(100% - 15px);top:8%;width:244px;padding:16px 42px 16px 17px;opacity:0;transform:translateX(8px);color:#fff;background:#032c3af2;border:1px solid #ffffff42;border-radius:16px 16px 4px 16px;box-shadow:var(--shadow);backdrop-filter:blur(12px);font-size:13px;line-height:1.5;transition:.25s;pointer-events:auto}.guide-bubble-close{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:28px;height:28px;padding:0;color:#fff;background:#ffffff14;border:1px solid #ffffff30;border-radius:9px;cursor:pointer;font-size:20px;line-height:1;transition:.18s}.guide-bubble-close:hover,.guide-bubble-close:focus-visible{color:var(--navy);background:var(--cream);outline:0;transform:scale(1.05)}.virtual-guide.speaking:not(.bubble-dismissed) .guide-bubble{opacity:1;transform:none}.virtual-guide.bubble-dismissed .guide-bubble{opacity:0;visibility:hidden;transform:translateX(8px)}
@media(max-width:1100px){:root{--header:76px;--nav:54px}.museum-header{grid-template-columns:90px 1fr 90px;padding:0 24px}.museum-brand,.museum-logo{width:56px;height:56px}.header-menu{min-width:58px;grid-template-columns:28px;padding:10px 14px}.header-menu strong{display:none}.museum-nav{gap:2px;justify-content:flex-start;overflow-x:auto}}
@media(max-height:720px){:root{--header:70px;--nav:50px}.museum-brand,.museum-logo{width:52px;height:52px}.tour-controls{bottom:14px}.tour-controls button{min-height:52px}}
@media(max-width:760px){.museum-app{grid-template-rows:var(--header) 1fr}.museum-header{grid-template-columns:62px 1fr 62px;padding:0 12px}.museum-title span{display:none}.museum-title h1{font-size:16px}.museum-nav{position:fixed;z-index:30;top:var(--header);right:10px;left:10px;height:auto;padding:12px;display:none;flex-direction:column;border-radius:0 0 18px 18px}.museum-nav.open{display:flex}.museum-nav a{min-height:48px}.floor-selector{top:18px;right:14px;transform:none}.floor-toggle{width:54px;height:54px;border-radius:17px}.floor-panel{right:42px;width:220px;padding-right:24px}.tour-controls{right:auto;bottom:10px;left:50%;gap:3px;padding:5px;transform:translateX(-50%);border-radius:18px}.tour-controls button{width:46px;height:46px;border-radius:14px}.tour-controls button:before,.floor-toggle:before{display:none}.tour-status{display:none}.info-card{left:14px;bottom:82px;width:calc(100% - 28px)}.virtual-guide{right:4px;bottom:66px;width:92px;height:190px}.guide-bubble{right:calc(100% - 10px);top:8%;width:min(210px,calc(100vw - 120px));font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
/* Thẻ hiện vật lấy trực tiếp từ cơ sở dữ liệu Kiosk. */
.artifact-360-card{position:absolute;z-index:30;left:50%;top:50%;width:min(430px,calc(100% - 32px));max-height:min(620px,calc(100% - 40px));overflow:auto;transform:translate(-50%,-46%) scale(.96);visibility:hidden;opacity:0;border:1px solid rgba(89,208,200,.65);border-radius:22px;background:rgba(3,35,48,.96);color:#fff;box-shadow:0 22px 70px rgba(0,0,0,.55);transition:.2s ease}.artifact-360-card.open{visibility:visible;opacity:1;transform:translate(-50%,-50%) scale(1)}.artifact-360-close{position:absolute;z-index:2;right:12px;top:12px;width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(0,0,0,.46);color:#fff;font-size:23px;cursor:pointer}.artifact-360-loading{padding:42px 28px;text-align:center;color:rgba(255,255,255,.75)}.artifact-360-content img{display:block;width:100%;height:250px;padding:10px;object-fit:contain;background:linear-gradient(135deg,#ecf4ed,#dce9df)}.artifact-360-body{padding:22px}.artifact-360-body small{display:block;margin-bottom:7px;color:#59d0c8;font-weight:700;letter-spacing:.08em}.artifact-360-body h2{margin:0 38px 10px 0;color:#fff4c7;font:700 25px Georgia,serif;letter-spacing:0;word-spacing:0;text-align:left}.artifact-360-body p{margin:0;color:rgba(255,255,255,.82);line-height:1.65}.artifact-360-body a{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:12px 15px;border-radius:12px;background:#0b8793;color:#fff;font-weight:700;text-decoration:none}.artifact-360-body a:hover{background:#11a4af}.artifact-360-body a span{font-size:20px}