/* Chép từ design/previews/mobile/index.html (chủ sở hữu duyệt 2026-09-29, lớp vỏ VIP 2026-10-01) — BACKLOG-382, BACKLOG-396. */
:root{--fs:1.2;--page:#050608;--bg:#08090c;--panel:#15171c;--panel-2:#1d2026;--line:rgba(255,255,255,.07);--glass:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));--gbd:1px solid rgba(255,255,255,.08);--go:linear-gradient(135deg,#34d399,#10b981 50%,#14b8a6);--go-ink:#04120c;--go-glow:0 8px 24px -6px rgba(16,185,129,.7),inset 0 1px 0 rgba(255,255,255,.4);--mint:#5ef5c3;--ink:#f1f2f4;--muted:#8b919b;--accent:#10b981;--acc-btn:#0f9d6c;--up:#22c55e;--down:#f43f5e;--up-btn:#12a35f;--dn-btn:#e11d48;--up-soft:rgba(34,197,94,.14);--down-soft:rgba(244,63,94,.15);--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--page);color:var(--ink);font:calc(15px * var(--fs))/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--muted)}.up{color:var(--up)}.dn{color:var(--down)}
.app{max-width:430px;margin:0 auto;min-height:100vh;background:radial-gradient(520px 340px at 50% -90px,rgba(16,185,129,.16),transparent 70%),var(--bg);padding-bottom:70px}
.scr{display:none}.scr.on{display:block}
#s-trade{padding-bottom:84px}
.ico{display:block}
.duo{display:block;flex:none;width:28px;height:28px;--i1:#4a8cff;--i2:#19c38b;--cut:var(--bg)}
.duo .f1{fill:var(--i1)}.duo .f2{fill:var(--i2)}.duo .fc{fill:var(--cut)}.duo .s1{fill:none;stroke:var(--i1)}.duo .s2{fill:none;stroke:var(--i2)}.duo .sc{fill:none;stroke:var(--cut)}
.top .ib .duo{width:30px;height:30px}.sic .duo{width:30px;height:30px;--cut:var(--panel)}.nav .duo{width:30px;height:30px}.mi .duo{width:28px;height:28px}.me .duo{width:36px;height:36px}.notice .duo{width:20px;height:20px;--cut:var(--panel)}.empty .duo{width:52px;height:52px}
.nav button:not(.on) .duo{--i1:#5b616b;--i2:#8b919b}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 16px 24px}.itile{background:var(--glass);border:var(--gbd);border-radius:18px;padding:16px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:calc(12px * var(--fs))}.itile .duo{width:48px;height:48px;--cut:var(--panel)}
.ai{display:block;flex:none}
.coin{display:block;flex:none;width:34px;height:34px;border-radius:50%}
.coin-au{display:grid;place-items:center;background:#e0a526;color:#fff;font-weight:700;font-size:calc(13px * var(--fs));letter-spacing:-.3px}
.ai-d{fill:var(--panel-2);stroke:var(--line);stroke-width:1}.ai-g{fill:var(--ink);font-family:var(--sans)}
.ai-f{fill:currentColor;opacity:.9}.ai-f2{fill:currentColor;opacity:.55}.ai-s{stroke:var(--muted);stroke-width:1.1;opacity:.7}
.ai-s2{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ai-au .ai-d{fill:rgba(217,164,65,.22);stroke:#d9a441}.ai-au .ai-g{fill:#d9a441}
.ai-btc .ai-d{fill:rgba(247,147,26,.18);stroke:#f7931a}.ai-btc .ai-g{fill:#f7931a}
.ai-eth,.ai-sol,.ai-xrp{color:var(--accent)}
.ai-eth .ai-d,.ai-sol .ai-d,.ai-xrp .ai-d,.ai-fx .ai-d{fill:rgba(16,185,129,.13);stroke:var(--accent)}
.ib{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;flex:none}
.ib .ico{width:24px;height:24px}
.top .ib .ico{width:27px;height:27px}
.top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.brand{font-weight:700;font-size:calc(18px * var(--fs));letter-spacing:.2px}.brand b{color:var(--accent);font-weight:700}
.ttl{font-size:calc(22px * var(--fs));font-weight:700;padding:4px 4px}
/* Ảnh banner do chủ sở hữu thay: ghi đè src/web/assets/mobile/hero.png, giữ tên và định dạng PNG. */
.hero{display:block;margin:2px 16px 0;height:162px;border-radius:22px;background:#0a1411 url(/assets/mobile/hero.png) center/cover no-repeat;border:1px solid rgba(94,245,195,.18);box-shadow:0 24px 44px -24px rgba(16,185,129,.7);overflow:hidden}
.tick3{margin:-16px 26px 0;position:relative;background:linear-gradient(160deg,rgba(32,35,42,.96),rgba(16,18,22,.96));border:var(--gbd);backdrop-filter:blur(16px);border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);padding:10px 2px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.t3{display:flex;flex-direction:column;align-items:center;gap:2px}
.t3 .s{font-weight:600;font-size:calc(14px * var(--fs))}.t3 .c{font-size:calc(13.5px * var(--fs));font-weight:600}.t3 .p{font-size:calc(16.5px * var(--fs));font-weight:700}
.short{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 8px 4px}
.short button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:calc(14px * var(--fs))}
.sic .ico{width:24px;height:24px}
.sic{width:50px;height:50px;border-radius:16px;background:var(--glass);border:var(--gbd);display:grid;place-items:center;color:var(--accent)}
.notice{margin:12px 16px 6px;background:var(--glass);border:var(--gbd);border-radius:18px;height:36px;display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--muted);font-size:calc(14px * var(--fs))}
.notice .ico{flex:none;width:17px;height:17px}
.mqw{overflow:hidden;flex:1}.mq{display:flex;width:max-content;white-space:nowrap;animation:mq 14s linear infinite}
.mq span{padding-right:56px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tabs{display:flex;gap:24px;padding:0 16px;border-bottom:1px solid var(--line)}
.tabs button{color:var(--muted);font-size:calc(16px * var(--fs));padding:12px 0 10px;position:relative}
.tabs button.on{color:var(--ink);font-weight:600}
.tabs button.on::after{content:"";position:absolute;left:50%;bottom:-1px;width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,#34d399,var(--mint));box-shadow:0 0 10px rgba(94,245,195,.7);transform:translateX(-50%)}
.mh,.mr{display:grid;grid-template-columns:1.2fr 1fr 96px;align-items:center;padding:0 16px}
.mh{white-space:nowrap;font-size:calc(11.5px * var(--fs));color:var(--muted);padding-top:10px;padding-bottom:2px}
.mh span:not(:first-child){text-align:right}
.mr{width:100%;text-align:left;padding-top:10px;padding-bottom:10px}
.mr:active{background:rgba(255,255,255,.03)}
.nm{display:flex;align-items:center;gap:10px}
.sy{font-weight:600;font-size:calc(16.5px * var(--fs))}.sy small{color:var(--muted);font-weight:400;font-size:calc(13px * var(--fs))}
.px{text-align:right;font-weight:600;font-size:calc(16.5px * var(--fs));border-radius:4px;padding:2px 0}
.pill{justify-self:end;width:80px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:600;font-size:calc(14.5px * var(--fs))}
.pill.u{background:var(--up-soft);color:var(--up)}.pill.d{background:var(--down-soft);color:var(--down)}
.fu{animation:fu .7s}.fd{animation:fd .7s}
@keyframes fu{from{background:rgba(34,197,94,.10)}to{background:transparent}}
@keyframes fd{from{background:rgba(244,63,94,.10)}to{background:transparent}}
.srch{margin:4px 16px 6px;height:46px;border-radius:16px;background:var(--glass);border:var(--gbd);display:flex;align-items:center;gap:8px;padding:0 16px;color:var(--muted)}
.srch input{flex:1;color:var(--ink);font-size:calc(16px * var(--fs));outline:none}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:66px;background:rgba(8,9,12,.82);backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(4,1fr);z-index:5}
.nav .ico{width:30px;height:30px}
.nav button{color:var(--muted);font-size:calc(13px * var(--fs));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.nav button.on{color:var(--mint)}