/* Mascot LANHMAR 3D (mascot.js) */
.lm-mascot{position:relative;display:inline-block;width:var(--size,140px);aspect-ratio:1;line-height:0;flex:none;vertical-align:bottom;-webkit-tap-highlight-color:transparent}
.lm-mascot .lm-bob{position:absolute;inset:0;z-index:1;animation:lmBob 3.2s ease-in-out infinite}
.lm-mascot .lm-tilt{position:absolute;inset:0;transform-origin:50% 90%;transform:rotate(calc(var(--rx,0) * 8deg)) translate(calc(var(--rx,0) * 3%),calc(var(--ry,0) * 2%));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lm-mascot img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 14px rgba(45,47,239,.18))}
.lm-mascot .lm-shadow{position:absolute;left:24%;right:24%;bottom:0;height:7%;border-radius:50%;background:rgba(36,31,69,.16);filter:blur(3px);animation:lmShadow 3.2s ease-in-out infinite}
.lm-sp{position:absolute;z-index:2;display:none;font-style:normal;color:#FF7A45;line-height:1;animation:lmSpark 1.6s ease-in-out infinite;text-shadow:0 2px 6px rgba(255,122,69,.35);pointer-events:none}
.lm-mascot.is-yeah .lm-sp{display:block}
.lm-sp.s1{left:2%;top:26%;font-size:calc(var(--size,140px)*.12)}
.lm-sp.s2{right:4%;top:18%;font-size:calc(var(--size,140px)*.09);animation-delay:-.5s}
.lm-sp.s3{right:14%;top:2%;font-size:calc(var(--size,140px)*.07);animation-delay:-1s}

/* tương tác */
.lm-mascot.lm-live{cursor:pointer;pointer-events:auto}
.lm-mascot.lm-live:focus-visible{outline:3px solid #6A5CFF;outline-offset:4px;border-radius:24px}
.lm-mascot.lm-live:hover .lm-tilt{filter:brightness(1.05)}
.lm-mascot .lm-fx{position:absolute;inset:0;transform-origin:50% 92%}
/* kiểu chuyển động riêng cho từng biểu cảm */
.lm-fx.fx-hop{animation:lmHop .6s cubic-bezier(.3,1.5,.5,1)}
.lm-fx.fx-jump{animation:lmJump .75s cubic-bezier(.3,1.4,.5,1)}
.lm-fx.fx-pop{animation:lmPop .5s cubic-bezier(.3,1.8,.5,1)}
.lm-fx.fx-tilt{animation:lmTiltIn .6s ease-out}
.lm-fx.fx-sway{animation:lmSway 1.4s ease-in-out}
.lm-fx.fx-shake{animation:lmShake .7s ease-in-out}
.lm-fx.fx-type{animation:lmType .9s steps(2) 2}
.lm-fx.fx-beat{animation:lmBeat .9s ease-in-out}
.lm-fx.fx-shout{animation:lmShout .7s ease-out}
.lm-fx.fx-dance{animation:lmDance 1.2s ease-in-out}
@keyframes lmHop{0%{transform:none}30%{transform:scale(1.08,.9)}60%{transform:translateY(-12%)}100%{transform:none}}
@keyframes lmJump{0%{transform:none}20%{transform:scale(1.15,.82)}50%{transform:translateY(-22%) scale(.94,1.08)}80%{transform:scale(1.06,.94)}100%{transform:none}}
@keyframes lmPop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:none}}
@keyframes lmTiltIn{0%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}100%{transform:none}}
@keyframes lmSway{0%,100%{transform:none}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes lmShake{0%,100%{transform:none}20%,60%{transform:rotate(-5deg) scale(1.03)}40%,80%{transform:rotate(5deg) scale(1.03)}}
@keyframes lmType{0%{transform:translateY(0)}50%{transform:translateY(-3%)}}
@keyframes lmBeat{0%,100%{transform:none}25%{transform:scale(1.1)}45%{transform:scale(.97)}65%{transform:scale(1.07)}}
@keyframes lmShout{0%{transform:none}30%{transform:scale(1.1) rotate(-4deg)}60%{transform:scale(.98) rotate(2deg)}100%{transform:none}}
@keyframes lmDance{0%,100%{transform:none}20%{transform:rotate(-12deg) translateX(-4%)}40%{transform:rotate(10deg) translateY(-8%)}60%{transform:rotate(-8deg) translateX(4%)}80%{transform:rotate(6deg) translateY(-4%)}}
.lm-say{position:absolute;z-index:5;left:50%;bottom:calc(100% - 6px);width:max-content;max-width:min(230px,70vw);padding:9px 14px;border-radius:16px;background:#fff;color:#241F45;border:2px solid #241F45;box-shadow:0 8px 20px rgba(45,47,239,.2);font:700 13px/1.35 Montserrat,system-ui,sans-serif;text-align:center;white-space:normal;pointer-events:none;opacity:0;transform:translate(calc(-50% + var(--sx,0px)),8px) scale(.9);transition:opacity .2s,transform .25s cubic-bezier(.2,1.4,.4,1)}
.lm-say::after{content:"";position:absolute;left:calc(50% - var(--sx,0px));top:100%;width:12px;height:12px;background:#fff;border-right:2px solid #241F45;border-bottom:2px solid #241F45;transform:translate(-50%,-6px) rotate(45deg)}
.lm-say.on{opacity:1;transform:translate(calc(-50% + var(--sx,0px)),0) scale(1)}

@keyframes lmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes lmShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.85);opacity:.7}}
@keyframes lmSpark{0%,100%{opacity:.5;transform:scale(.85) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(15deg)}}
@keyframes lmPoke{0%{transform:scale(1)}25%{transform:scale(1.12,.86) translateY(4%)}55%{transform:scale(.92,1.1) translateY(-10%)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.lm-mascot *{animation:none!important;transition:none!important}}