/* Màn Hạng VIP (①), Vừa lên hạng (②), thẻ menu, viền avatar — chép từ design/previews/mobile/vip.css (chủ sở hữu duyệt 2026-10-01), BACKLOG-396. */
.vt0{--mat:linear-gradient(135deg,#4a505a 0%,#262a31 45%,#3b4049 70%,#1b1e23 100%);--cink:#e9ecf0;--glow:rgba(160,170,185,.45);--col:#aab3bf}
.vt1{--mat:linear-gradient(135deg,#6b3519 0%,#c47a4b 30%,#f0b48a 48%,#a65a2e 66%,#4e2410 100%);--cink:#2a1206;--glow:rgba(214,132,82,.6);--col:#e39a6a}
.vt2{--mat:linear-gradient(135deg,#7a838f 0%,#c9d0d9 28%,#f7f9fb 46%,#9aa3ae 64%,#5d6570 100%);--cink:#1d232b;--glow:rgba(214,222,232,.55);--col:#dfe5ec}
.vt3{--mat:linear-gradient(135deg,#7a4d0c 0%,#d7a43c 28%,#fbe39a 46%,#c38c22 64%,#6b430a 100%);--cink:#2b1a02;--glow:rgba(240,190,70,.65);--col:#f4c55a}
.vt4{--mat:radial-gradient(120% 90% at 88% -5%,rgba(165,243,252,.38),transparent 46%),radial-gradient(90% 80% at -5% 105%,rgba(196,181,253,.34),transparent 52%),linear-gradient(135deg,#04060b 0%,#0f1830 34%,#22325a 50%,#0b1224 68%,#020309 100%);--cink:#eef6ff;--glow:rgba(125,211,252,.6);--col:#a5d8ff;--holo:.16}

.vipx,.lvx{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#07080b;z-index:32;overflow-y:auto;overflow-x:hidden;display:none;scrollbar-width:none}
.vipx.on,.lvx.on{display:block}
.vipx::-webkit-scrollbar{display:none}
.vx-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;position:relative;z-index:3}
.vx-h .t{font-size:calc(17px * var(--fs));font-weight:700}
.amb{position:absolute;left:-20%;right:-20%;top:-80px;height:520px;background:radial-gradient(50% 50% at 50% 45%,var(--glow) 0%,transparent 70%);opacity:.55;filter:blur(10px);pointer-events:none}

.stage{perspective:1100px;padding:10px 22px 0;position:relative;z-index:2}
.stage.dim{filter:saturate(.55) brightness(.75)}
.vcard{position:relative;height:208px;border-radius:22px;overflow:hidden;transform:rotateX(9deg) rotateY(-7deg);box-shadow:0 30px 60px -18px var(--glow),0 0 0 1px rgba(255,255,255,.14) inset,0 1px 0 rgba(255,255,255,.35) inset;animation:vfloat 6s ease-in-out infinite}
@keyframes vfloat{50%{transform:rotateX(6deg) rotateY(-3deg) translateY(-4px)}}
.vcard .mat,.mini .m{position:absolute;inset:0;background:var(--mat)}
.brush{position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.sheen{position:absolute;top:-50%;left:-60%;width:45%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(18deg);animation:vsheen 4.2s ease-in-out infinite;mix-blend-mode:soft-light}
@keyframes vsheen{0%,55%{left:-60%}100%{left:130%}}
.holo{position:absolute;inset:0;background:conic-gradient(from 210deg at 70% 30%,#5eead4,#a78bfa,#f472b6,#fbbf24,#5eead4);opacity:var(--holo,0);mix-blend-mode:color-dodge;animation:vspin 9s linear infinite}
@keyframes vspin{to{filter:hue-rotate(360deg)}}
.cin{position:absolute;inset:0;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;color:var(--cink)}
.ctop,.cfoot{display:flex;justify-content:space-between}
.ctop{align-items:flex-start}.cfoot{align-items:flex-end}
.brandv{font-size:12.5px;font-weight:800;letter-spacing:3px;opacity:.85}
.cchip{width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#f6e3a1,#b8913a 55%,#f1d27a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);position:relative;margin-top:14px}
.cchip::before,.cchip::after{content:"";position:absolute;inset:7px 0;border-top:1px solid rgba(0,0,0,.3);border-bottom:1px solid rgba(0,0,0,.3)}
.cchip::after{inset:0 13px;border:0;border-left:1px solid rgba(0,0,0,.3);border-right:1px solid rgba(0,0,0,.3)}
.emb{font-size:54px;font-weight:900;letter-spacing:-1px;line-height:.9;text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25)}
.emb small{font-size:15px;font-weight:800;letter-spacing:4px;display:block;opacity:.75;margin-bottom:4px;text-shadow:none}
.cbot{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-weight:600}
.cbot span{font-size:10.5px;letter-spacing:1.5px;opacity:.75}.cbot b{font-size:14px;font-weight:800}

.gauge{position:relative;height:172px;margin:22px 22px 0;z-index:2}
.gauge svg{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.gauge .g-bg{stroke:rgba(255,255,255,.07)}.gauge .g-fg{stroke:var(--col)}
.gtxt{position:absolute;left:0;right:0;top:62px;text-align:center}
.gtxt .k{font-size:12px;color:var(--muted);letter-spacing:.4px}
.gtxt .v{font-size:30px;font-weight:800;margin-top:2px;color:var(--ink)}
.gtxt .s{font-size:12.5px;color:var(--muted)}
.gnext{margin:6px 22px 0;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.gnext .tx{flex:1;font-size:calc(13.5px * var(--fs));color:#c8ccd3}
.gnext .tx b{color:var(--ink)}.gnext .tx .hi{color:var(--col);font-weight:800}
.vgo{height:44px;padding:0 18px;border-radius:14px;font-weight:700;font-size:calc(14.5px * var(--fs));color:#04120c;background:linear-gradient(135deg,#34d399,#10b981 50%,#14b8a6);box-shadow:0 8px 24px -6px rgba(16,185,129,.7);white-space:nowrap}

.vsec{margin:26px 0 0;position:relative;z-index:2}
.vsec h3{font-size:calc(15px * var(--fs));font-weight:800;padding:0 22px;display:flex;justify-content:space-between;align-items:baseline}
.vsec h3 span{font-size:12.5px;color:var(--muted);font-weight:500}
.track{margin:14px 22px 0;position:relative;display:flex;justify-content:space-between}
.track::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.08)}
.track .fill{position:absolute;left:22px;top:22px;width:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#34d399,var(--col));box-shadow:0 0 12px var(--col)}
.node{position:relative;z-index:1;width:46px;display:flex;flex-direction:column;align-items:center;gap:6px}
.dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13.5px;white-space:nowrap;letter-spacing:-.3px;background:#15171c;border:1.5px solid rgba(255,255,255,.1);color:#5f6570}
.dot .ico{width:16px;height:16px}
.node.on .dot,.dot.on{background:radial-gradient(circle at 35% 30%,#3ef0b4,#0d9b6c);border-color:#5ef5c3;color:#03150e;box-shadow:0 0 0 4px rgba(16,185,129,.15),0 6px 18px -4px rgba(16,185,129,.8)}
.node .p{font-size:11.5px;font-weight:700;color:#5f6570;white-space:nowrap}.node.on .p{color:#5ef5c3}
.car{display:flex;gap:12px;overflow-x:auto;padding:14px 22px 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.mc{flex:none;width:150px;scroll-snap-align:center;text-align:left}
.mini{height:92px;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 12px 24px -12px var(--glow)}
.mc.cur .mini{transform:translateY(-3px);box-shadow:0 0 0 2px #fff inset,0 16px 30px -10px var(--glow)}
.mini .l{position:absolute;left:12px;bottom:8px;font-weight:900;font-size:24px;color:var(--cink)}
.mini .lk{position:absolute;inset:0;background:rgba(5,6,8,.55);display:grid;place-items:center}
.mini .lk span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2)}
.mini .lk .ico{width:14px;height:14px}
.mc .a{font-size:12px;color:var(--muted);margin-top:8px}.mc .b{font-size:13px;font-weight:700;margin-top:1px}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:2px 7px;border-radius:99px;margin-top:5px}
.tag.y{color:#04120c;background:#5ef5c3}.tag.n{color:var(--muted);background:rgba(255,255,255,.06)}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 22px 0}
.pk{border-radius:18px;padding:14px 10px 12px;text-align:center;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07)}
.pk .v{font-size:17px;font-weight:800;color:var(--col)}.pk .k{font-size:11.5px;color:var(--muted)}
.rules{margin:22px 22px 26px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.rules div{display:flex;gap:10px;font-size:calc(13px * var(--fs));color:#c3c8cf;padding:6px 0}
.rules div::before{content:"✓";color:#5ef5c3;font-weight:800}
.vipc.vm{display:block;width:calc(100% - 32px);margin:4px 16px 12px;text-align:left}

.lvx{background:radial-gradient(70% 50% at 50% 38%,rgba(195,204,216,.28),transparent 70%),#08090c;text-align:center}
.lvx.on{display:flex;flex-direction:column;align-items:center;overflow:hidden}
.rays{position:absolute;left:50%;top:300px;width:900px;height:900px;margin:-450px 0 0 -450px;background:repeating-conic-gradient(rgba(255,255,255,.07) 0 6deg,transparent 6deg 18deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 0%,transparent 55%);mask:radial-gradient(circle,#000 0%,transparent 55%);animation:vrot 30s linear infinite}
@keyframes vrot{to{transform:rotate(360deg)}}
.conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.conf i{position:absolute;top:-20px;width:7px;height:12px;border-radius:2px;animation:vfall linear infinite}
@keyframes vfall{to{transform:translateY(860px) rotate(720deg)}}
.lvx .stage{margin-top:90px;width:100%}
.lvx .vcard{animation:vpop 1.2s cubic-bezier(.2,1.4,.4,1) both,vfloat 6s 1.2s ease-in-out infinite}
@keyframes vpop{0%{transform:scale(.6) rotateX(30deg);opacity:0}100%{transform:rotateX(9deg) rotateY(-7deg);opacity:1}}
.lvx h4{font-size:13px;letter-spacing:3px;color:#c3ccd8;margin-top:40px;font-weight:800}
.lvx .big{font-size:30px;font-weight:900;margin-top:6px;color:var(--ink)}
.unl{margin-top:22px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-align:left;position:relative}
.unl .dot{width:50px;height:50px}
.unl b{font-size:15px}.unl span{font-size:12.5px;color:var(--muted)}
.lvx .acts{position:absolute;left:22px;right:22px;bottom:36px;display:flex;flex-direction:column;gap:10px}
.lvx .acts .vgo{height:52px;font-size:16px}
.ghost{height:46px;border-radius:14px;color:#c8ccd3;font-weight:600}

/* Thẻ VIP thu nhỏ trong menu — cùng chất liệu và biểu tượng với thẻ ở màn Hạng VIP. */
.vipc.vm{position:relative;overflow:hidden;border-radius:16px;padding:0;background:none;color:var(--cink);box-shadow:0 14px 30px -14px var(--glow),0 0 0 1px rgba(255,255,255,.14) inset,0 1px 0 rgba(255,255,255,.3) inset}
.vm .m{position:absolute;inset:0;background:var(--mat)}
.vm .vin{position:relative;padding:12px 14px}
.vm .vh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.vm .vt{display:flex;gap:10px;align-items:center}
.vm small{display:block;font-size:10.5px;letter-spacing:2.5px;font-weight:800;opacity:.75}
.vipc.vm b{color:var(--cink);font-size:22px;font-weight:900;line-height:1}
.vm .vd{display:flex;flex-direction:column;align-items:flex-end;font-size:10.5px;letter-spacing:1.5px;font-weight:600;opacity:.8}
.vipc.vm .vd b{font-size:14px;font-weight:800;letter-spacing:0}
.vm .vbar{background:rgba(0,0,0,.25)}.vm .vbar i{background:var(--cink);opacity:.85}
.vm .vn{font-size:calc(13px * var(--fs));font-weight:600;opacity:.85}
.vipb.vm{position:relative;overflow:hidden;background:none;padding:2px 9px;border-radius:8px;box-shadow:0 6px 14px -8px var(--glow),0 0 0 1px rgba(255,255,255,.18) inset;vertical-align:middle;margin-top:-3px}
.vipb.vm .m{position:absolute;inset:0;background:var(--mat)}
.vipb.vm b{position:relative;color:var(--cink);font-weight:900;letter-spacing:.3px}
/* Nền menu nhuộm màu hạng của khách. */
.drawer.tier{border-right-color:color-mix(in srgb,var(--col) 35%,transparent)}
.drawer.tier{background:var(--bg)}
.drawer.tier::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(380px 320px at 20% -40px,var(--glow),transparent 70%),radial-gradient(300px 260px at 110% 105%,var(--glow),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--col) 16%,transparent),transparent 60%);opacity:1}
.drawer.tier .mi .duo{--cut:var(--bg)}

/* DIAMOND: vân giác cắt, ánh lấp lánh, chữ bạch kim. */
.vcard.vt4 .brush,.mc.vt4 .brush,.vipc.vt4 .brush{background:repeating-linear-gradient(60deg,rgba(255,255,255,.055) 0 1px,transparent 1px 26px),repeating-linear-gradient(-60deg,rgba(255,255,255,.055) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 26px);mix-blend-mode:screen}
.vcard.vt4 .mat::after,.mc.vt4 .m::after,.vipc.vt4 .m::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 16%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 16px),radial-gradient(circle at 70% 64%,#fff 0 1px,transparent 2.4px),radial-gradient(circle at 34% 26%,#fff 0 .9px,transparent 2.2px),radial-gradient(circle at 92% 72%,#e0f2fe 0 1.1px,transparent 2.6px),radial-gradient(circle at 52% 12%,#fff 0 .8px,transparent 2px),radial-gradient(circle at 18% 78%,#ede9fe 0 1px,transparent 2.4px);animation:vtw 2.8s ease-in-out infinite}
@keyframes vtw{50%{opacity:.45}}
.vcard.vt4{box-shadow:0 30px 60px -18px var(--glow),0 0 0 1px rgba(226,240,255,.38) inset,0 1px 0 rgba(255,255,255,.55) inset,0 0 0 4px rgba(165,216,255,.06)}
.vcard.vt4 .emb,.mc.vt4 .mini .l,.vipc.vm.vt4 b,.vipb.vm.vt4 b{background:linear-gradient(180deg,#ffffff 0%,#dbe7f5 45%,#93c5fd 75%,#e9d5ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.vcard.vt4 .emb small{color:#cfe3ff;-webkit-text-fill-color:#cfe3ff}
.vcard.vt4 .ctop svg,.vipc.vm.vt4 .vt svg{color:#dff1ff;filter:drop-shadow(0 0 6px rgba(125,211,252,.9))}
.vcard.vt4 .brandv{letter-spacing:4px;color:#dbe7f5}

/* Viền avatar tài khoản theo hạng, kèm nhãn VIP. */
.av{position:relative;display:grid;place-items:center;border-radius:50%;padding:2.5px;background:var(--mat);box-shadow:0 0 14px -3px var(--glow)}
.av .duo{border-radius:50%;background:var(--bg);--cut:var(--bg)}
.top .ib .av .duo{width:28px;height:28px}
.av i{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-style:normal;font-size:9px;line-height:1.25;font-weight:900;letter-spacing:.3px;padding:0 5px;border-radius:6px;background:var(--mat);color:var(--cink);white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.av.vt4 i{background:linear-gradient(135deg,#0f1830,#22325a);-webkit-text-fill-color:#e6f1ff;color:#e6f1ff}
.me .av{margin-bottom:6px}
.vt0,.vt1,.vt2,.vt3{--holo:0}