/* Lớp chuyển động cho trang chủ và Cộng đồng, lấy cảm hứng từ ảnh tham khảo (kính mờ, vệt sáng, thẻ trôi, hàng pill chạy ngược chiều, tiêu đề có đường kẻ).
   Chỉ dùng màu và font của LANHMAR: tím #2D2FEF/#6A5CFF, cam #FF7A45, mực #241F45, lavender. */
:root{--mo-ease:cubic-bezier(.2,.8,.2,1)}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.55}
body::before{width:460px;height:460px;left:-140px;top:20vh;background:rgba(255,122,69,.22);animation:moOrb 24s ease-in-out infinite alternate}
body::after{width:520px;height:520px;right:-160px;top:55vh;background:rgba(106,92,255,.22);animation:moOrb 28s ease-in-out -9s infinite alternate-reverse}
@keyframes moOrb{0%{transform:translate(0,0) scale(1)}100%{transform:translate(70px,-90px) scale(1.18)}}
#moProg{position:fixed;left:0;top:0;height:5px;width:100%;z-index:80;background:rgba(178,164,239,.3);pointer-events:none}
#moProg i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--orange),var(--purple-mid));transform:scaleX(0);transform-origin:left;border-radius:0 999px 999px 0;box-shadow:0 0 10px rgba(255,122,69,.6)}
.pill-nav{transition:box-shadow .3s,background .3s}
.pill-nav.mo-scrolled{box-shadow:0 14px 40px rgba(10,8,34,.5);background:rgba(18,14,46,.92)}

/* tiêu đề hero: hai dòng trồi lên lần lượt, có vệt sáng lấp lánh */
.hero h1>span,.hero h1>em{display:inline-block;animation:moRise .8s var(--mo-ease) both}
.hero h1>em{animation-delay:.18s}
@keyframes moRise{0%{opacity:0;transform:translateY(26px) skewY(2deg)}100%{opacity:1;transform:none}}
.hero-copy{position:relative}
.mo-flare{position:absolute;width:34px;height:34px;pointer-events:none;color:var(--orange);animation:moFlare 3.4s ease-in-out infinite}
.mo-flare svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 8px rgba(255,122,69,.8))}
.mo-flare.a{left:-14px;top:92px}.mo-flare.b{right:6%;top:-6px;width:22px;height:22px;color:var(--purple-mid);animation-delay:-1.4s}
.mo-flare.b svg{filter:drop-shadow(0 0 8px rgba(106,92,255,.8))}
@keyframes moFlare{0%,100%{transform:scale(.3) rotate(0);opacity:.1}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

/* pill kính trôi quanh ảnh chân dung */
.mo-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(255,253,249,.78);backdrop-filter:blur(10px);border:2px solid var(--lav-400);border-radius:999px;padding:6px 14px;font:800 11.5px Montserrat;letter-spacing:.1em;color:var(--ink);box-shadow:0 10px 26px rgba(45,47,239,.2);white-space:nowrap;animation:moFloat 6s ease-in-out infinite;transition:translate .25s ease-out}
.mo-chip b{color:var(--orange)}
.mo-chip.c1{left:-34px;top:14%}.mo-chip.c2{right:-30px;top:40%;animation-delay:-2s}.mo-chip.c3{right:-6px;bottom:8%;animation-delay:-4s}.mo-chip.c4{left:-44px;top:58%;animation-delay:-3s}
@keyframes moFloat{0%,100%{margin-top:0}50%{margin-top:-12px}}
@media(max-width:820px){.mo-chip{display:none}.mo-flare.a{display:none}}

/* nút: vòng sáng cam và con trỏ chạy vào khi rê chuột */
.cta-row .btn.dark{position:relative;animation:moRing 3s infinite}
@keyframes moRing{0%,100%{box-shadow:0 0 0 0 rgba(255,122,69,.0)}50%{box-shadow:0 0 0 7px rgba(255,122,69,.28)}}
.cta-row .btn.dark::after{content:"";position:absolute;right:-12px;bottom:-14px;width:24px;height:24px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%23FFFDF9' stroke='%23241F45' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 4px 6px rgba(36,31,69,.35));transition:transform .35s var(--mo-ease)}
@media (hover:hover){.cta-row .btn.dark:hover::after{transform:translate(-6px,-6px) rotate(-8deg) scale(1.15)}}
.btn{translate:var(--mx2,0) var(--my2,0)}

/* tiêu đề mục có đường kẻ và chấm cam */
.kicker.mo-line{display:flex;align-items:center;gap:14px}
.kicker.mo-line::after{content:"";flex:1;max-width:280px;height:10px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--mo-ease) .15s;background:radial-gradient(circle at 5px 50%,var(--orange) 4.5px,transparent 5.5px),linear-gradient(var(--lav-400),var(--lav-400)) 5px 50%/calc(100% - 5px) 2px no-repeat}
.kicker.mo-line.in::after{transform:scaleX(1)}
.kicker.light.mo-line::after{background:radial-gradient(circle at 5px 50%,var(--orange) 4.5px,transparent 5.5px),linear-gradient(var(--purple-soft),var(--purple-soft)) 5px 50%/calc(100% - 5px) 2px no-repeat}

/* thẻ nghiêng 3D và vệt sáng theo chuột */
.mo-tilt{position:relative;transition:transform .2s ease-out,box-shadow .3s}
.mo-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,122,69,.28),rgba(106,92,255,.12) 45%,transparent 70%);mix-blend-mode:normal;z-index:2}
.mo-tilt.hot .mo-glare{opacity:1}
.mo-tilt.hot{box-shadow:0 22px 50px rgba(45,47,239,.3)}

/* dải pill chạy ngược chiều */
.mo-band{position:relative;overflow:hidden;padding:56px 0 52px;background:radial-gradient(500px 240px at 12% 0,rgba(255,122,69,.28),transparent),radial-gradient(560px 280px at 92% 100%,rgba(106,92,255,.5),transparent),var(--ink)}
.mo-band .kicker{color:var(--orange-soft)}
.mo-band h2{color:#fff;margin-bottom:26px}
.mo-row{display:flex;overflow:hidden;scrollbar-width:none;margin:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mo-track{display:flex;gap:12px;padding-right:12px;flex:none;animation:moRun 38s linear infinite}
.mo-row.r2 .mo-track{animation-direction:reverse;animation-duration:46s}
.mo-row.r3 .mo-track{animation-duration:54s}
.mo-row:hover .mo-track{animation-play-state:paused}
@keyframes moRun{to{transform:translateX(-100%)}}
.mo-pill{flex:none;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.28);color:#fff;font:700 15px Montserrat;padding:11px 26px;border-radius:999px;transition:transform .3s var(--mo-ease),background .25s,border-color .25s,color .25s}
.mo-pill:hover{transform:translateY(-4px) scale(1.06);background:var(--orange);border-color:var(--orange);color:var(--ink)}
.mo-pill::before{content:"★";color:var(--orange);margin-right:8px;font-size:12px}
.mo-pill:hover::before{color:var(--ink)}

/* hộp công cụ: sáng lần lượt như thanh công cụ */
.swl.mo-on{background:var(--orange-soft);border-color:var(--orange);transform:translateY(-4px) scale(1.1);box-shadow:0 10px 22px rgba(255,122,69,.4)}

/* băng ca-rô chạy trước chân trang */
.mo-check{height:28px;background-image:conic-gradient(var(--ink) 25%,var(--lav-300) 0 50%,var(--ink) 0 75%,var(--lav-300) 0);background-size:28px 28px;animation:moCheck 2.6s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
@keyframes moCheck{to{background-position:56px 0}}

/* băng chuyền: thẻ giữa to hơn, hai bên mờ dần */
#certList .ccard{transition:translate .2s,scale .3s var(--mo-ease),opacity .3s,box-shadow .2s,transform .2s}
.rail-btn{transition:transform .25s var(--mo-ease),box-shadow .25s}
.rail-btn:not([disabled]):hover{box-shadow:0 0 0 6px rgba(255,122,69,.35),var(--shadow)}
.rail-btn:not([disabled]):active{transform:scale(.92)}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,.hero h1>span,.hero h1>em,.mo-flare,.mo-chip,.cta-row .btn.dark,.mo-track,.mo-check{animation:none!important}
  .kicker.mo-line::after{transform:none;transition:none}
  .mo-row{overflow:visible;-webkit-mask-image:none;mask-image:none;flex-wrap:wrap;justify-content:center;margin:8px 0}
  .mo-track{flex:1 1 auto;flex-wrap:wrap;justify-content:center;padding:0 24px;transform:none}
  .mo-track[aria-hidden],.mo-dup{display:none}
  .mo-tilt,.mo-pill,.mo-chip,.btn{transition:none}
}
.mo-tilt.reveal.in{transition:transform .2s ease-out,box-shadow .3s,opacity .6s}

.mo-row::-webkit-scrollbar{display:none}
.mo-pill{user-select:none;cursor:default}

/* dải logo brand đã cộng tác: thẻ trắng để logo giữ đúng màu gốc */
.mo-logo{flex:none;display:grid;place-items:center;width:156px;height:76px;padding:8px 18px;background:#fff;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.22);transition:transform .3s var(--mo-ease),box-shadow .3s;user-select:none}
.mo-logo img{max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain;display:block}
.mo-logo.txt{font:800 15px/1.2 Montserrat;color:var(--ink);text-align:center;letter-spacing:.01em}
.mo-logo:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 30px rgba(255,122,69,.35)}
@media (max-width:640px){.mo-logo{width:128px;height:64px;padding:7px 14px}.mo-logo img{max-height:48px}.mo-logo.txt{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.mo-logo{transition:none}}
.mo-logo.fill{padding:4px 12px}.mo-logo.fill img{max-height:68px}
@media (max-width:640px){.mo-logo.fill img{max-height:56px}}

/* dải logo brand: chạy từ trái sang phải, hàng 2 chậm hơn; rê chuột vào thì dừng.
   Dải này vẫn chạy (chậm hơn) khi máy bật giảm chuyển động, vì đây là phần trình bày chính chủ trang yêu cầu. */
.mo-band.mo-brands .mo-track{animation:moRunR 46s linear infinite}
.mo-band.mo-brands .mo-row.r2 .mo-track{animation-duration:60s}
@keyframes moRunR{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .mo-band.mo-brands .mo-row{overflow:hidden;flex-wrap:nowrap;justify-content:flex-start;margin:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .mo-band.mo-brands .mo-track{flex:none;flex-wrap:nowrap;justify-content:flex-start;padding:0 12px 0 0;animation:moRunR 90s linear infinite!important}
  .mo-band.mo-brands .mo-row.r2 .mo-track{animation-duration:110s!important}
  .mo-band.mo-brands .mo-track[aria-hidden]{display:flex}
  .mo-band.mo-brands .mo-dup{display:grid}
}