.hx-section{background:linear-gradient(180deg,#141c33,#0b1020);color:#fff;padding:56px 0 64px}.hx-section>.container>h2{font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:1.3}.hx-section>.container>.hx-sub{margin-top:6px;font-size:clamp(16px,1.6vw,20px);color:#c9d3ea}.hx-mount{margin-top:28px;min-height:420px}.hx{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);grid-gap:22px;gap:22px;align-items:stretch;outline:0;font-family:Kanit,Noto Sans Thai,system-ui,sans-serif}.hx-stage{position:relative;height:100%;min-height:clamp(340px,41vw,560px);border-radius:20px;overflow:hidden;border:1px solid rgba(127,176,255,.22);background:radial-gradient(110% 90% at 70% 10%,#1b3f9e 0,#0e1a3d 48%,#0b1020 100%)}.hx-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .22s ease}.hx-stage.is-fading canvas{opacity:0}.hx-illus{position:absolute;left:14px;bottom:14px;margin:0;padding:4px 12px;border-radius:20px;background:rgba(11,16,32,.6);font-size:12.5px;color:#c9d3ea;pointer-events:none}.hx-progress{position:absolute;left:0;right:0;top:0;height:3px;background:hsla(0,0%,100%,.08)}.hx-progress i{display:block;height:100%;background:#7fb0ff;transform-origin:0 50%;transform:scaleX(0)}.hx-panel{display:flex;flex-direction:column;padding:24px 24px 20px;border-radius:20px;background:hsla(0,0%,100%,.05);border:1px solid rgba(127,176,255,.18)}.hx-live{flex:1 1}.hx-count{margin:0;font-size:14px;font-weight:500;letter-spacing:.08em;color:#7fb0ff}.hx-title{margin:8px 0 0;font-weight:600;font-size:clamp(22px,2.1vw,29px);line-height:1.35;color:#fff;text-wrap:balance}.hx-caption{margin:12px 0 0;font-size:clamp(16px,1.35vw,18.5px);line-height:1.7;font-weight:300;color:#dce5f7}.hx-events{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-gap:10px;gap:10px}.hx-events li{padding:10px 14px;border-radius:12px;background:rgba(22,93,250,.16);font-size:15px;line-height:1.55;font-weight:300;color:#dce5f7}.hx-events strong{display:block;font-weight:500;color:#fff;font-size:15.5px}.hx-note{margin:14px 0 0;padding-left:12px;border-left:2px solid #7fb0ff;font-size:14.5px;line-height:1.6;font-weight:300;color:#a9b6d6}.hx-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:20px}.hx-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;border:1.5px solid rgba(127,176,255,.4);background:hsla(0,0%,100%,.06);color:#fff;cursor:pointer}.hx-btn:hover{background:#165dfa;border-color:#165dfa}.hx-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.hx-dots{display:flex;gap:2px;margin:0 0 0 auto;padding:0;list-style:none}.hx-dot{width:26px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}.hx-dot i{display:block;width:10px;height:10px;border-radius:50%;background:hsla(0,0%,100%,.22);transition:all .2s}.hx-dot.is-done i{background:rgba(127,176,255,.6)}.hx-dot.is-on i{width:22px;border-radius:6px;background:#7fb0ff}.hx-btn:focus-visible,.hx-dot:focus-visible{outline:3px solid #fff;outline-offset:2px}.hx-footer{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(127,176,255,.16);font-size:12.5px;line-height:1.6;font-weight:300;color:#8e9bbb}.hx-stage--text{aspect-ratio:auto;min-height:0;padding:24px}.hx-nowebgl{margin:0 0 12px;color:#ffb020;font-size:15px}.hx-textlist{margin:0;padding-left:22px;display:grid;grid-gap:8px;gap:8px;font-size:17px;font-weight:300;color:#dce5f7}.hx-loading{display:grid;place-items:center;min-height:420px;border-radius:20px;border:1px solid rgba(127,176,255,.22);color:#a9b6d6;font-size:15px}.hx [hidden]{display:none!important}@media (max-width:980px){.hx-section{padding:40px 0 48px}.hx{grid-template-columns:1fr;gap:14px}.hx-stage{height:auto;min-height:0;aspect-ratio:4/3.5}.hx-panel{padding:18px 16px 16px}.hx-live{min-height:190px}}@media (prefers-reduced-motion:reduce){.hx-dot i,.hx-stage canvas{transition:none}}