/* SI Skin – hiệu ứng (port từ thiết kế Mini SI): khung chat động, nút âm thanh, nút Start, khối hiện dần, thanh tiến trình. */
.si-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--wp--preset--color--action,#2760E9);transform-origin:left;transform:scaleX(0);z-index:60;pointer-events:none}
.js-anim .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js-anim .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .rv{opacity:1;transform:none;transition:none}}

/* ---- Mở màn hero (từ city.css của thiết kế) ---- */
.wp-block-miniai-hero.has-city .wp-block-miniai-hero__title{text-shadow:0 2px 22px rgba(4,7,15,.95),0 1px 3px rgba(4,7,15,.8)}
.wp-block-miniai-hero.has-city .wp-block-miniai-hero__subhead{color:#EEF3FD;text-shadow:0 1px 14px rgba(4,7,15,.95)}
.wp-block-miniai-hero.has-city .wp-block-miniai-hero__eyebrow{color:#B5CCFF}
.wp-block-miniai-hero.has-city .wp-block-miniai-hero__body,.wp-block-miniai-hero.has-city .wp-block-miniai-hero__aside{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.wp-block-miniai-hero.has-city .wp-block-miniai-hero__aside{transition-delay:.25s}
html.intro .wp-block-miniai-hero.has-city .wp-block-miniai-hero__body,html.intro .wp-block-miniai-hero.has-city .wp-block-miniai-hero__aside{opacity:0;transform:translateY(18px);pointer-events:none}
.wp-block-miniai-hero.has-city .si-eco-aside{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;align-self:center}
.city-skip{position:fixed;right:14px;top:calc(80px + env(safe-area-inset-top,0px));z-index:36;display:none;align-items:center;gap:8px;
  min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(8,12,24,.62);color:#E6ECF8;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 14px/1 "Inter Tight",system-ui,-apple-system,sans-serif;cursor:pointer}
.city-skip:focus-visible{outline:2px solid #8FB3FF;outline-offset:3px}
html.intro .city-skip{display:inline-flex}
/* Start button: appears while the particles orbit the core */
.city-start{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;
  transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:opacity .6s,transform .6s;font-family:"Inter Tight",system-ui,-apple-system,sans-serif}
.city-start.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.city-start .b{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px 0 18px;border-radius:999px;
  background:linear-gradient(135deg,#2760E9,#36C3F2);color:#fff;font:600 16px/1 "Inter Tight",system-ui,-apple-system,sans-serif;letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 12px 40px rgba(39,96,233,.55),0 0 60px rgba(54,195,242,.35);transition:background .3s,color .3s}
.city-start .b svg{width:22px;height:22px;flex:none}
.city-start small{font-size:12.5px;color:rgba(229,236,250,.8);text-shadow:0 1px 8px rgba(4,7,15,.9)}
.city-start.go .b{background:#fff;color:#2760E9}
.city-start:focus-visible{outline:none}.city-start:focus-visible .b{outline:2px solid #B5CCFF;outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .city-start .b::before,.city-start .b::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:1.5px solid rgba(120,190,255,.6);animation:startRing 2.2s ease-out infinite}
  .city-start .b::after{animation-delay:1.1s}
}
@keyframes startRing{from{transform:scale(.94);opacity:.9}to{transform:scale(1.22,1.55);opacity:0}}


/* ---- Nút âm thanh (sfx.css) ---- */
/* Sound toggle, just above the Tấm bubble */
.sfx-btn{position:fixed;right:28px;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:37;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#E8435A;box-shadow:0 6px 18px rgba(27,26,25,.14);cursor:pointer}
.sfx-btn svg{width:22px;height:22px}
.sfx-btn .ic-off{display:none}
.sfx-btn[data-s="off"] .ic-on{display:none}.sfx-btn[data-s="off"] .ic-off{display:block}
.sfx-btn[data-s="off"]{color:#8A857F}
.sfx-btn:focus-visible{outline:2px solid #2760E9;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .sfx-btn[data-s="armed"]::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(232,67,90,.45);animation:sfxRing 1.6s ease-out infinite}
}
@keyframes sfxRing{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}


/* ---- Khung chat động (eco.css) ---- */
.mi9-eco{--acc:#2760E9;--ink:#1b1a19;--mute:#6b6865;--line:#e8e3e1;--card:#fff;--soft:#f5f3f1;--out:cubic-bezier(.17,.17,.23,1);--io:cubic-bezier(.72,0,.25,1);--sh:0 1px 2px rgba(27,26,25,.04),0 8px 24px rgba(27,26,25,.06);position:relative;width:100%;aspect-ratio:560/640;color:var(--ink);font-family:inherit;user-select:none;-webkit-user-select:none}
.mi9-eco *{box-sizing:border-box}
.mi9-eco .st{position:absolute;left:0;top:0;width:560px;height:640px;transform-origin:0 0}
.mi9-eco .in{opacity:0;transform:translateY(12px);filter:blur(4px);transition:opacity .6s var(--out),transform .7s var(--out),filter .6s var(--out)}
.mi9-eco .in.show{opacity:1;transform:none;filter:none}
.mi9-eco .gone{display:none}
.mi9-eco .chat{position:absolute;left:36px;top:78px;width:488px;height:484px;transform-origin:244px 230px;transition:transform 1s var(--io),opacity .7s var(--io),filter .7s}
.mi9-eco .chat.out{transform:scale(.2);opacity:0;filter:blur(6px)}
.mi9-eco .wh{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 8px 7px 12px;margin-bottom:14px;box-shadow:var(--sh)}
.mi9-eco .wh .cd{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.mi9-eco .wh b{font-weight:500;color:var(--ink)}
.mi9-eco .asg{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:3px 9px 3px 3px;color:var(--ink)}
.mi9-eco .asg em{font-style:normal;font-size:11px;color:var(--mute)}
.mi9-eco .ava{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;font-style:normal;background:#dfe8fd;color:#1d47b0;flex:none}
.mi9-eco .ava.o{background:var(--ink);color:#fff}
.mi9-eco .ava.k{background:#e9e4df;color:#5a524b}
.mi9-eco .ava.s{background:#e3f1e8;color:#1f6a40}
.mi9-eco .msg{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.mi9-eco .msg.bot{flex-direction:column;align-items:flex-start;gap:5px;margin-left:52px}
.mi9-eco .av{width:40px;height:40px;border-radius:50%;background:#e4e1dd;flex:none;border:1px solid var(--line)}
.mi9-eco .bb{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);border-radius:16px;padding:10px 15px;font-size:14.5px;line-height:1.45;max-width:436px;min-height:42px}
.mi9-eco .staff .bb{background:#f4f7ff;border-color:#dbe4fb}
.mi9-eco .who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.mi9-eco .who em{font-style:normal;font-weight:400;color:var(--mute)}
.mi9-eco .who .x{width:18px;height:18px;border-radius:50%;background:var(--acc);color:#fff;font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center}
.mi9-eco .tagsp{font-size:10.5px;font-weight:500;color:var(--acc);background:rgba(39,96,233,.09);border-radius:99px;padding:2px 7px}
.mi9-eco .typ{display:inline-flex;gap:4px;padding:6px 0}
.mi9-eco .typ i{width:6px;height:6px;border-radius:50%;background:#a9a5a1;animation:mi9t 1s infinite}
.mi9-eco .typ i:nth-child(2){animation-delay:.15s}.mi9-eco .typ i:nth-child(3){animation-delay:.3s}
.mi9-eco .dock{position:absolute;left:52px;right:0;bottom:0}
.mi9-eco .dock>*{position:absolute;left:0;right:0;bottom:0}
.mi9-eco .dock>.inp{left:-52px;height:46px;border-radius:23px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);display:flex;align-items:center;padding:0 20px;font-size:14px;color:var(--mute);transition:opacity .4s,transform .5s var(--out)}
.mi9-eco .inp.hide{opacity:0;transform:translateY(10px)}
.mi9-eco .pnl{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.mi9-eco .ph{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12px;font-weight:500}
.mi9-eco .ph .x{width:18px;height:18px;border-radius:5px;background:var(--acc);color:#fff;font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center}
.mi9-eco .ph .r{margin-left:auto;font-weight:400;color:var(--mute);font-size:11px;display:flex;align-items:center;gap:5px}
.mi9-eco .ph .r.live:before{content:"";width:6px;height:6px;border-radius:50%;background:#22a565}
.mi9-eco .spt{padding:10px 12px 4px;font-size:13.5px;line-height:1.45;min-height:48px}
.mi9-eco .spt:after{content:"";display:inline-block;width:1.5px;height:14px;background:var(--acc);margin-left:2px;vertical-align:-2px;animation:mi9c .8s steps(1) infinite}
.mi9-eco .spt.done:after{display:none}
.mi9-eco .spb{display:flex;justify-content:flex-end;gap:6px;padding:6px 10px 10px}
.mi9-eco .btn{font-size:12px;font-weight:500;padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);transition:transform .15s}
.mi9-eco .btn.p{background:var(--acc);border-color:var(--acc);color:#fff}
.mi9-eco .btn.press{transform:scale(.92)}
.mi9-eco .flow{display:flex;align-items:flex-start;padding:12px}
.mi9-eco .fs{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}
.mi9-eco .fs b{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:var(--soft);white-space:nowrap;transition:border-color .3s,background .3s,color .3s}
.mi9-eco .fs b:before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid #cfc9c5;box-sizing:border-box;transition:all .3s}
.mi9-eco .fs.on b{border-color:var(--acc);background:#f4f7ff;color:var(--acc)}
.mi9-eco .fs.on b:before{border:none;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2l1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E")}
.mi9-eco .fs span{font-size:11px;color:var(--mute)}
.mi9-eco .fa{width:12px;height:1.5px;background:#d9d4d0;margin-top:13px;flex:none;transition:background .3s}
.mi9-eco .fa.on{background:var(--acc)}
.mi9-eco .cur{position:absolute;left:520px;top:520px;width:18px;height:22px;z-index:5;opacity:0;transition:left .9s var(--io),top .9s var(--io),opacity .3s,transform .15s}
.mi9-eco .cur.show{opacity:1}
.mi9-eco .cur.press{transform:scale(.85)}
.mi9-eco .hub{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--out)}
.mi9-eco .hub.on{opacity:1}
.mi9-eco .glow{position:absolute;left:280px;top:300px;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(39,96,233,.16),rgba(39,96,233,.06) 55%,rgba(39,96,233,0));pointer-events:none}
.mi9-eco .ln{position:absolute;left:0;top:0;width:560px;height:640px;overflow:visible}
.mi9-eco .ln path{fill:none;stroke:#cfc9c5;stroke-width:1.2;stroke-dasharray:3 5}
.mi9-eco .ln line{stroke:#d9d4d0;stroke-width:1;stroke-dasharray:2 5;transition:stroke .4s}
.mi9-eco .ln line.on{stroke:var(--acc);stroke-dasharray:none}
.mi9-eco .ln .orb{fill:none;stroke:#cfc9c5;stroke-width:1;stroke-dasharray:3 6;transform-box:fill-box;transform-origin:center;animation:mi9o 40s linear infinite}
.mi9-eco .ln .orb.r2{animation-duration:60s;animation-direction:reverse;stroke-dasharray:2 8}
.mi9-eco .team{position:absolute;left:280px;top:300px;width:0;height:0;animation:mi9o 40s linear infinite;z-index:2}
.mi9-eco .tm{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transition:opacity .5s .3s}
.mi9-eco .hub.on .tm{opacity:1}
.mi9-eco .tm .ava{width:26px;height:26px;font-size:11px;border:2px solid #fff;box-shadow:var(--sh);animation:mi9o 40s linear infinite reverse;transition:box-shadow .3s}
.mi9-eco .tm.hit .ava{box-shadow:0 0 0 4px rgba(39,96,233,.25),var(--sh)}
.mi9-eco .node{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transform:translate(-50%,-50%) scale(.8);opacity:0;filter:blur(4px);transition:transform .9s var(--out),opacity .6s var(--out),filter .6s,border-color .3s,box-shadow .3s}
.mi9-eco .hub.on .node{transform:translate(-50%,-50%) scale(1);opacity:1;filter:none}
.mi9-eco .core{left:280px;top:300px;width:132px;height:132px;background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 10px 30px rgba(39,96,233,.28)}
.mi9-eco .side{top:466px;width:108px;height:108px}
.mi9-eco .side.c{left:110px;transition-delay:.12s}.mi9-eco .side.g{left:450px;transition-delay:.18s}
.mi9-eco .side.hit{border-color:var(--acc);box-shadow:0 0 0 6px rgba(39,96,233,.12),var(--sh)}
.mi9-eco .node .t{font-size:15px;font-weight:600;line-height:1.2}
.mi9-eco .node .s{font-size:11px;color:var(--mute);margin-top:3px;max-width:96px;line-height:1.3}
.mi9-eco .core .s,.mi9-eco .core .k{color:rgba(255,255,255,.85)}
.mi9-eco .core .k{font-size:11px;margin-top:6px}
.mi9-eco .core .k b{color:#fff;font-weight:600}
.mi9-eco .ring{position:absolute;left:280px;top:300px;width:132px;height:132px;border-radius:50%;border:2px solid var(--acc);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.mi9-eco .ring.p{animation:mi9r 1.2s var(--out)}
.mi9-eco .chip{position:absolute;transform:translate(-50%,-50%) scale(.85);translate:0 0;opacity:0;filter:blur(3px);transition:opacity .6s var(--out),transform .8s var(--out),filter .6s,translate .7s var(--io)}
.mi9-eco .hub.on .chip{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}
.mi9-eco .chip.pull{translate:var(--dx) var(--dy)}
.mi9-eco .ci{display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px 6px 9px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);white-space:nowrap;animation:mi9f 5s ease-in-out infinite;transition:border-color .3s,color .3s}
.mi9-eco .ci:before{content:"";width:6px;height:6px;border-radius:50%;background:#cfc9c5;transition:background .3s}
.mi9-eco .chip.act .ci{border-color:var(--acc);color:var(--acc)}
.mi9-eco .chip.act .ci:before,.mi9-eco .chip.pull .ci:before{background:var(--acc)}
.mi9-eco .cnt{position:absolute;top:544px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--mute);opacity:0;transition:opacity .6s .3s}
.mi9-eco .hub.on .cnt{opacity:1}
.mi9-eco .cnt b{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .3s}
.mi9-eco .cnt b.up{color:var(--acc)}
.mi9-eco .row{position:absolute;left:280px;top:594px;transform:translate(-50%,-50%);display:flex;gap:6px;align-items:center;white-space:nowrap;opacity:0;transition:opacity .4s}
.mi9-eco .row.on{opacity:1}
.mi9-eco .row b{font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line)}
.mi9-eco .row span{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 9px 3px 3px;border-radius:99px;background:var(--card);border:1px solid var(--line);animation:mi9i .5s var(--out) both}
.mi9-eco .row span .ava{width:18px;height:18px;font-size:9px}
.mi9-eco .row span.tg{padding:4px 9px;background:rgba(39,96,233,.1);border-color:transparent;color:var(--acc)}
.mi9-eco .cap{position:absolute;left:280px;top:628px;transform:translate(-50%,-50%);font-size:13px;color:var(--mute);white-space:nowrap}
.mi9-eco .fly{position:absolute;transform:translate(-50%,-50%);padding:6px 12px;border-radius:99px;background:var(--acc);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;z-index:3;box-shadow:0 6px 16px rgba(39,96,233,.3);transition:left 1s var(--io),top 1s var(--io),opacity .4s,transform .4s var(--out)}
.mi9-eco .fly.bye{opacity:0;transform:translate(-50%,-50%) scale(.5)}
.mi9-eco .dot{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(39,96,233,.18);z-index:3}
@keyframes mi9t{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes mi9c{50%{opacity:0}}
@keyframes mi9o{to{transform:rotate(360deg)}}
@keyframes mi9f{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes mi9r{0%{opacity:.5;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes mi9i{from{opacity:0;transform:translateY(5px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}