/* Màn chào linh vật — web/man-chao.js (27/09/2026). Tệp riêng vì app.css sau mốc LÀN-FIX không được mang mã màu hex (test-ui);
   màn chào hiện TRƯỚC khi app có biến màu theo chế độ sáng/tối nên dùng màu thương hiệu cố định. */
/* ===== MÀN CHÀO LINH VẬT (27/09/2026 — web/man-chao.js, chủ dự án duyệt bản thử v3.1) ===== */
.mc{position:fixed;inset:0;z-index:100000;overflow:hidden;background:#FBFAFE;user-select:none;-webkit-user-select:none;touch-action:none;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:#2A2140}
html.co-man-chao,html.co-man-chao body{overflow:hidden}
.mc.ra{animation:mc-ra .5s ease forwards}
@keyframes mc-ra{to{opacity:0;transform:scale(1.02)}}
.mc-nen{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease}
.mc.chay .mc-nen{opacity:1}
.mc-dt.chay .mc-nen{animation:mc-ken 6s ease-out forwards}
@keyframes mc-ken{from{transform:scale(1.08)}to{transform:scale(1)}}
.mc-san{position:absolute;inset:0;pointer-events:none}
.mc-san>*{position:absolute}
.mc-dien{position:absolute;z-index:2;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:var(--co);height:calc(var(--co) * 1.18);
  margin-left:calc(var(--co) / -2);margin-top:calc(var(--co) * -0.59);pointer-events:none}
.mc-dien>*{position:absolute}
.mc-lv{inset:0;pointer-events:auto;cursor:grab;touch-action:none;z-index:3}
.mc-dien.keo .mc-lv{cursor:grabbing}
.mc-lv canvas{display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity .35s}
.mc-lv.song canvas{opacity:1}
.mc-po{position:absolute;left:50%;top:52%;height:66%;transform:translate(-50%,-50%);transition:opacity .35s}
.mc-lv.song .mc-po{opacity:0}
.mc-thoai{left:62%;bottom:var(--tb,73%);min-width:120px;max-width:min(260px,70vw);width:max-content;background:rgba(255,255,255,.94);color:#2A2140;
  font-size:14.5px;font-weight:600;line-height:1.38;padding:9px 14px 10px;border-radius:16px;box-shadow:0 12px 32px -14px rgba(76,58,120,.42);
  opacity:0;transform:scale(.6) translateY(8px);transform-origin:var(--duoi,24px) 100%;transition:opacity .3s,transform .45s cubic-bezier(.2,1.4,.4,1),left .25s;
  z-index:5;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mc-thoai::after{content:'';position:absolute;left:var(--duoi,24px);bottom:-7px;width:14px;height:14px;margin-left:-7px;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}
.mc-thoai.hien{opacity:1;transform:none}
.mc-ten{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8B5CF6;margin-bottom:2px}
.mc-ch{opacity:0;transition:opacity .12s}
.mc-ch.co{opacity:1}
.mc-dt .mc-thoai{font-size:14px;max-width:210px}
.mc-chan{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:11.5px;color:#A69DBB;letter-spacing:.02em;pointer-events:none}
.mc-dt .mc-chan{bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.mc-chan b{color:#9C8FC4;font-weight:600}
.mc-chan i{width:3px;height:3px;border-radius:50%;background:#A69DBB}
.mc-tai{position:absolute;left:0;bottom:0;height:2px;background:#C9B6FB;width:0}
.mc.chay .mc-tai{animation:mc-tai 5.4s linear forwards}
@keyframes mc-tai{to{width:100%}}
.mc-bo{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;font:inherit;font-size:12px;color:#8E84A6;background:rgba(255,255,255,.55);
  border:0;border-radius:999px;padding:6px 12px;cursor:pointer;z-index:9}
.mc-goi-y{position:absolute;left:50%;bottom:calc(44px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:11px;color:#A69DBB;opacity:0;
  transition:opacity .6s;pointer-events:none;white-space:nowrap}
.mc-dt .mc-goi-y{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
.mc-goi-y.hien{opacity:.9}
/* hiệu ứng chung */
.mc-tia4{width:18px;height:18px;margin:-9px 0 0 -9px;opacity:0}
.mc-tia4 svg{width:100%;height:100%;display:block;overflow:visible}
.mc-sao.vang{fill:#FDE68A} .mc-sao.hong{fill:#F9A8D4} .mc-sao.tim{fill:#C4B5FD} .mc-sao.trang{fill:#FFFFFF} .mc-sao.dao{fill:#FFE3C4} .mc-sao.la{fill:#A7F3D0}
.mc-vong{border-radius:50%;border:2px solid rgba(139,92,246,.45);opacity:0}
.mc-vong.mc-vong-to{border-color:rgba(167,139,250,.5)}
/* Molaro */
.mc-nang{inset:-10% auto auto -8%;width:70%;height:120%;background:repeating-linear-gradient(115deg,rgba(255,236,205,0) 0 7%,rgba(255,236,205,.55) 9% 13%,rgba(255,236,205,0) 16% 24%);
  filter:blur(10px);opacity:0;mix-blend-mode:screen}
.mc.chay .mc-nang{animation:mc-nang-vao 2.4s ease forwards,mc-nang-lay 7s ease-in-out 2.4s infinite alternate}
@keyframes mc-nang-vao{to{opacity:.9}}
@keyframes mc-nang-lay{from{transform:translateX(0)}to{transform:translateX(4%)}}
.mc-bui{width:4px;height:4px;border-radius:50%;background:#FFF3DF;box-shadow:0 0 6px #FFE3C4;opacity:0}
.mc.chay .mc-bui{animation:mc-bui 5s ease-in-out var(--tre) infinite}
@keyframes mc-bui{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-60px)}}
.mc-hao{left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,190,.75) 0%,rgba(255,226,190,.25) 38%,transparent 66%);opacity:0;z-index:1;transition:opacity 1.2s,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.mc-hao.bat{opacity:.7;transform:translate(-50%,-50%) scale(.9)}
.mc-hao.dam{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
/* Enamo */
.mc-khien{left:50%;top:48%;width:136%;height:118%;transform:translate(-50%,-50%) scale(.5);border-radius:50%;
  background:radial-gradient(ellipse at 35% 28%,rgba(255,255,255,.75) 0 6%,transparent 18%),radial-gradient(ellipse at 50% 50%,rgba(196,181,253,0) 55%,rgba(167,139,250,.28) 76%,rgba(139,92,246,.5) 88%,rgba(139,92,246,0) 90%);
  opacity:0;z-index:4;transition:opacity .5s,transform .6s cubic-bezier(.2,1.5,.4,1)}
.mc-khien.bat{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mc-khien.do{animation:mc-khien-do .45s ease}
@keyframes mc-khien-do{30%{filter:brightness(1.35) saturate(1.6);transform:translate(-50%,-50%) scale(1.05)}}
.mc-vk{width:42%;aspect-ratio:1;margin:-21% 0 0 -21%;filter:drop-shadow(0 6px 6px rgba(76,58,120,.25));z-index:4;opacity:0}
.mc-vk svg{width:100%;height:100%;display:block;overflow:visible}
.mc-st-trang{stop-color:#FFFFFF}
.mc-vk0-1{stop-color:#A7F3D0} .mc-vk0-2{stop-color:#34D399} .mc-vk0-dau{fill:#A7F3D0} .mc-vk0-gai{stroke:#34D399;stroke-width:3.2;stroke-linecap:round}
.mc-vk1-1{stop-color:#FED7AA} .mc-vk1-2{stop-color:#FB923C} .mc-vk1-dau{fill:#FED7AA} .mc-vk1-gai{stroke:#FB923C;stroke-width:3.2;stroke-linecap:round}
.mc-vk2-1{stop-color:#BFDBFE} .mc-vk2-2{stop-color:#60A5FA} .mc-vk2-dau{fill:#BFDBFE} .mc-vk2-gai{stroke:#60A5FA;stroke-width:3.2;stroke-linecap:round}
.mc-vk-mat{fill:#1F2937}
.mc-vk-mieng{stroke:#1F2937;stroke-width:1.6;fill:none;stroke-linecap:round}
.mc-gon{width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;border-radius:50%;border:3px solid rgba(139,92,246,.55);opacity:0;z-index:4}
.mc-song-dat{left:50%;top:86%;width:90%;height:16%;margin-left:-45%;border-radius:50%;border:3px solid rgba(139,92,246,.35);opacity:0;z-index:0}
/* Cuspo */
.mc-vai{width:var(--vo,60px);height:var(--vo,60px);margin:calc(var(--vo,60px) / -2) 0 0 calc(var(--vo,60px) / -2);z-index:4;opacity:0}
.mc-vai-0{--m1:#C4B5FD;--m2:#8B5CF6;--m3:rgba(109,40,217,.55)}
.mc-vai-1{--m1:#A7F3D0;--m2:#10B981;--m3:rgba(5,150,105,.5)}
.mc-vai-2{--m1:#BAE6FD;--m2:#0EA5E9;--m3:rgba(2,132,199,.5)}
.mc-vai-3{--m1:#FED7AA;--m2:#F97316;--m3:rgba(234,88,12,.5)}
.mc-cau{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 30%),radial-gradient(circle at 50% 60%,var(--m1),var(--m2));
  box-shadow:0 10px 18px -8px var(--m3),inset 0 -5px 10px rgba(0,0,0,.08),inset 0 3px 6px rgba(255,255,255,.7)}
.mc-cau svg{width:48%;height:48%;fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.mc-vai b{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:#2A2140;
  background:rgba(255,255,255,.9);padding:2px 8px;border-radius:99px;box-shadow:0 4px 10px -6px rgba(76,58,120,.4)}
.mc-quang-vai{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,var(--m1) 0%,transparent 65%);opacity:0;z-index:-1}
.mc-vai.sang .mc-quang-vai{animation:mc-quang-vai 1.2s ease-out}
@keyframes mc-quang-vai{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
.mc-vai.troi .mc-cau{animation:mc-troi 2.6s ease-in-out infinite alternate}
@keyframes mc-troi{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
svg.mc-noi{left:0;top:0;width:100%;height:100%;overflow:visible;z-index:2}
.mc-noi-1{stop-color:#C4B5FD} .mc-noi-2{stop-color:#8B5CF6}
.mc-noi line{stroke:url(#mc-gd-noi);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 7;opacity:0}
.mc-noi line.chay-dong{opacity:1;animation:mc-dong-chay .8s linear infinite}
@keyframes mc-dong-chay{to{stroke-dashoffset:-18}}
/* Flossa */
svg.mc-chi{inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.mc-soi{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(236,72,153,.55)) drop-shadow(0 2px 3px rgba(76,58,120,.25))}
.mc-lan{fill:none;stroke:#F9A8D4;stroke-width:3;stroke-linecap:round;stroke-dasharray:40 400;stroke-dashoffset:40;opacity:0}
.mc-toc{width:60%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(249,168,212,.9));opacity:0;z-index:2;transform-origin:100% 50%}
/* Gingi */
.mc-hoi{left:12%;top:2%;font-size:calc(var(--co) * .26);font-weight:800;line-height:1;background:linear-gradient(160deg,#C4B5FD,#7C3AED);-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 6px 8px rgba(109,40,217,.28));opacity:0;z-index:4;transform-origin:50% 90%}
.mc-dien.tl .mc-hoi{left:74%}
.mc-den{left:4%;top:-6%;width:32%;aspect-ratio:1;opacity:0;z-index:4}
.mc-dien.tl .mc-den{left:68%}
.mc-den svg{width:100%;height:100%;overflow:visible}
.mc-tia-den{transform-origin:50% 42%;animation:mc-quay 6s linear infinite;fill:#FCD34D}
@keyframes mc-quay{to{transform:rotate(360deg)}}
.mc-bd-1{stop-color:#FFFBEB} .mc-bd-2{stop-color:#FDE68A} .mc-bd-3{stop-color:#F59E0B}
.mc-den-quang{fill:#FDE68A;opacity:.35} .mc-den-de1{fill:#A78BFA} .mc-den-de2{fill:#8B5CF6}
.mc-den-loa{stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;fill:none}
.mc-rang{left:6%;top:70%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;opacity:0;z-index:3}
.mc-rang svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 6px rgba(76,58,120,.25))}
.mc-rg-2{stop-color:#E9E3FB}
.mc-rang-vien{stroke:#D8CCF8;stroke-width:2}
.mc-kinh{left:84%;top:66%;width:44%;aspect-ratio:1;margin:-22% 0 0 -22%;z-index:4;opacity:0}
.mc-mat-kinh{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 50%,#F5F0FF,#E4DAFE);
  box-shadow:inset 0 0 0 calc(var(--co) * .026) #8B5CF6,inset 0 0 0 calc(var(--co) * .036) #C4B5FD,0 10px 22px -8px rgba(76,58,120,.45);transition:box-shadow .4s}
.mc-kinh.thay .mc-mat-kinh{box-shadow:inset 0 0 0 calc(var(--co) * .026) #8B5CF6,inset 0 0 0 calc(var(--co) * .036) #C4B5FD,0 10px 22px -8px rgba(76,58,120,.45),0 0 26px 8px rgba(167,139,250,.55)}
.mc-trong{position:absolute;inset:0;transform:scale(1.7);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.mc-kinh.thay .mc-trong{transform:scale(2.3)}
.mc-trong svg{width:100%;height:100%}
.mc-luc-a{fill:#EDE7FE;stroke:#FFFFFF;stroke-width:1.6} .mc-luc-b{fill:#DDD2FC;stroke:#FFFFFF;stroke-width:1.6}
.mc-loa{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 32% 26%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 26%),linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%)}
.mc-can{position:absolute;left:78%;top:78%;width:44%;height:16%;border-radius:99px;background:linear-gradient(180deg,#A78BFA,#6D28D9);transform:rotate(45deg);transform-origin:0 50%;
  box-shadow:0 6px 10px -4px rgba(76,58,120,.5),inset 0 2px 2px rgba(255,255,255,.45)}