/* CSS riêng của core.js. CSS dùng chung vẫn nằm trong index.html */

/* Khung avatar: vòng nền vẽ sau avatar, dày --k, theo style vật phẩm */
.avf{position:relative;display:inline-block;flex:none;line-height:0;border-radius:50%;isolation:isolate}
.avf::before{content:"";position:absolute;inset:calc(var(--k) * -1);border-radius:50%;z-index:-1}
.avf::after{content:"";position:absolute;pointer-events:none}
.fr-gold::before{background:conic-gradient(#FFE9A3,#E5A520,#FFF4C8,#C8860E,#FFE9A3);box-shadow:0 0 calc(var(--k) * 1.4) rgba(229,165,32,.55)}
.fr-rose::before{background:conic-gradient(#FF9EC4,#FF4F8B,#FFD1E2,#E0306E,#FF9EC4)}
.fr-rose::after{width:calc(var(--s) * .26);height:calc(var(--s) * .26);right:-6%;bottom:-6%;border-radius:50% 50% 50% 0;background:radial-gradient(circle at 40% 40%,#FF8FB5,#E0306E);transform:rotate(-45deg);box-shadow:0 0 0 2px #fff}
.fr-vine::before{background:repeating-conic-gradient(#36BD8C 0 14deg,#8EE6C4 14deg 26deg,#1E8F63 26deg 36deg)}
.fr-vine::after{width:calc(var(--s) * .22);height:calc(var(--s) * .14);left:-4%;top:6%;border-radius:0 100% 0 100%;background:#36BD8C;transform:rotate(-30deg);box-shadow:0 0 0 2px #fff}
.fr-mask::before{background:repeating-conic-gradient(#3B6BFF 0 12deg,#9CC8FF 12deg 24deg)}
.fr-mask::after{width:calc(var(--s) * .5);height:calc(var(--s) * .16);left:25%;top:-10%;border-radius:40% 40% 60% 60%;background:linear-gradient(90deg,#3B6BFF,#7FD6FF,#3B6BFF);box-shadow:0 0 0 2px #fff}
.fr-candy::before{background:repeating-conic-gradient(#FF8FB5 0 15deg,#fff 15deg 30deg,#B98BFF 30deg 45deg,#fff 45deg 60deg)}
.fr-candy::after{width:calc(var(--s) * .24);height:calc(var(--s) * .24);right:-8%;top:-8%;border-radius:50%;background:repeating-conic-gradient(#FF4F8B 0 30deg,#FFE08A 30deg 60deg);box-shadow:0 0 0 2px #fff}
.fr-star::before{background:conic-gradient(#8A5CFA,#B6F3FF,#C9A7FF,#5B2FD9,#8A5CFA)}
.fr-star::after{width:calc(var(--s) * .3);height:calc(var(--s) * .3);left:35%;top:-18%;background:#FFC23C;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.fr-newbie::before{background:conic-gradient(#5BE3A4,#7FD6FF,#C4A6FF,#5BE3A4)}
.fr-newbie::after{content:"Bạn mới";left:50%;bottom:-12%;transform:translateX(-50%);font-size:max(8px,calc(var(--s) * .13));line-height:1.5;font-weight:800;color:#fff;background:#16B46C;padding:0 .5em;border-radius:1em;white-space:nowrap;box-shadow:0 0 0 2px #fff}
.fr-vip::before{background:conic-gradient(#FFE08A,#8A5CFA,#FFC23C,#5B2FD9,#FFE08A);box-shadow:0 0 calc(var(--k) * 1.6) rgba(255,194,60,.6)}
.fr-vip::after{width:calc(var(--s) * .34);height:calc(var(--s) * .2);left:33%;top:-17%;background:linear-gradient(#FFE08A,#E59A2F);clip-path:polygon(0 100%,0 20%,25% 60%,50% 0,75% 60%,100% 20%,100% 100%)}

/* Tên VIP, huy hiệu, ruy băng người mới */
.vipname{background:linear-gradient(90deg,#E59A2F,#FF4F8B,#8A5CFA);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.vbadge{display:inline-flex;align-items:center;height:15px;padding:0 5px;margin-left:4px;border-radius:8px;background:linear-gradient(90deg,#FFE08A,#FFC23C);color:#6A4300;font-size:9.5px;font-weight:800;vertical-align:middle;-webkit-text-fill-color:#6A4300}
.newr{position:absolute;left:-4px;top:-2px;z-index:2;background:linear-gradient(90deg,#FF6F91,#FF4F8B);color:#fff;font-size:9px;font-weight:800;line-height:1;padding:3px 6px;border-radius:8px 8px 8px 2px;box-shadow:0 2px 6px rgba(255,79,139,.4)}
.verified{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#2BB6E3;color:#fff}
.verified .ic{width:11px;height:11px}
.tab .bdg.dot{min-width:8px;width:8px;height:8px;padding:0;top:6px;left:calc(50% + 10px)}

/* Banner thả từ trên, bóng đèn độ nổi bật, coachmark */
.dropb{position:absolute;left:10px;right:10px;top:10px;z-index:45;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--white);color:var(--ink);box-shadow:0 10px 30px rgba(30,20,70,.22);animation:dropin .35s ease;transition:transform .4s,opacity .4s;text-align:left}
.dropb span{display:flex;flex-direction:column;min-width:0}
.dropb b{font-size:13.5px}
.dropb small{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropb.out{transform:translateY(-130%);opacity:0}
@keyframes dropin{from{transform:translateY(-130%)}}
.bulb{position:absolute;left:50%;top:38%;transform:translateX(-50%);z-index:46;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;animation:bulb 1.5s ease forwards}
.bulb .bl{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#FFF4C8,#FFC23C);color:#8A5A00;display:grid;place-items:center;box-shadow:0 0 30px rgba(255,194,60,.8)}
.bulb b{background:rgba(20,16,40,.88);color:#FFE08A;padding:5px 12px;border-radius:12px;font-size:14px}
@keyframes bulb{0%{opacity:0;transform:translate(-50%,20px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.08)}30%{transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px)}}
.coach{position:absolute;inset:0;z-index:44;background:rgba(15,10,35,.55);cursor:pointer}
.coach .ring{position:absolute;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 9999px rgba(15,10,35,.25);animation:spk 1.2s infinite}
.coach .ctext{position:absolute;left:20px;right:20px;text-align:center;color:#fff;font-weight:700;font-size:15px}
.shake{animation:shake .5s}
@keyframes shake{20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}

/* Thanh trượt 2 đầu, công tắc, nhóm nút */
.r2lab{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);margin-bottom:12px}
.r2lab b{color:var(--ink)}
.r2t{position:relative;height:28px}
.r2t::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--line)}
.r2t i{position:absolute;top:12px;height:4px;border-radius:2px;background:var(--pri)}
.r2t input{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.r2t input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--pri);box-shadow:0 2px 6px rgba(40,20,90,.2);cursor:pointer}
.r2t input::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--pri);cursor:pointer}
.r2t input::-moz-range-track{background:none}
.tgl{width:46px;height:28px;border-radius:14px;background:#DCD8E8;position:relative;flex:none;transition:background .2s}
.tgl i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.tgl.on{background:var(--pri)}
.tgl.on i{transform:translateX(18px)}
.seg{display:flex;gap:6px;background:#F2F1F7;border-radius:14px;padding:4px}
.seg button{flex:1;height:36px;border-radius:11px;font-size:13px;font-weight:600;color:var(--mute)}
.seg button.on{background:var(--white);color:var(--pri);box-shadow:0 1px 4px rgba(40,20,90,.08)}
.row2{display:flex;gap:10px;width:100%}
.row2 .btn{flex:1}
.pico{width:64px;height:64px;border-radius:20px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center;flex:none}
.card.rules{text-align:left;align-items:stretch}
.card.rules .pico,.card.rules h3{align-self:center}
.card ol{margin:0;padding-left:20px;font-size:13px;line-height:1.55;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.stars{display:flex;gap:4px;color:var(--gold)}
.savep{background:var(--pri);color:#fff;height:32px;padding:0 14px}
.ta{width:100%;border:1.5px solid var(--line);background:var(--white);border-radius:16px;padding:12px;outline:none;resize:none;line-height:1.5}
.ta:focus,.field:focus-within{border-color:var(--pri)}
.field.locked{color:var(--mute);gap:8px}
.field.locked span{flex:1;color:var(--ink);font-size:15px}
.field.locked small{font-size:11px}
.field button{color:var(--pri)}
.lnk{color:var(--pri);font-weight:700}

/* Chuỗi tạo hồ sơ */
.obhd .t{display:flex;justify-content:center}
.obdots{display:flex;gap:5px}
.obdots i{width:18px;height:4px;border-radius:2px;background:#DCD8E8}
.obdots i.on{background:var(--pri)}
.skip{font-size:13px;font-weight:600;color:var(--mute);width:56px;text-align:right}
.obd{padding:0 20px 28px}
.obt{font-size:22px;margin:6px 0 6px;line-height:1.25}
.obs{margin:0 0 10px;font-size:13px;color:var(--mute);line-height:1.5}
.obwarn{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12.5px;font-weight:600;color:#E0384F}
.agree{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;margin:16px 0 4px}
.agree input{margin-top:3px}
.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 8px}
.wcards button{height:110px;border-radius:18px;background:#F7F6FB;border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-weight:700;color:var(--mute)}
.wcards button span{width:52px;height:52px;border-radius:50%;background:var(--white);display:grid;place-items:center}
.wcards button.on{border-color:var(--pri);background:var(--pri-soft);color:var(--pri)}
.obhdr{padding:0 20px;flex:none}
.infl{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:var(--gold-soft);color:#A06A00;font-size:12px;font-weight:700;margin-bottom:10px}
.seltags{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.seltags button{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;background:var(--pri);color:#fff;font-size:12.5px;font-weight:600}
.tgtabs{display:flex;gap:16px;overflow-x:auto;padding:10px 0 0;scrollbar-width:none}
.tgtabs::-webkit-scrollbar{display:none}
.tgtabs button{white-space:nowrap;font-size:13.5px;color:var(--mute);padding-bottom:6px;border-bottom:2px solid transparent}
.tgtabs button.on{color:var(--ink);font-weight:700;border-color:var(--pri)}
.tagpick{display:flex;flex-wrap:wrap;gap:8px}
.tagpick button{height:32px;padding:0 13px;border-radius:16px;font-size:13px;border:1px solid #DCD8E8;background:var(--white);color:#55506A}
.tagpick button.on{border-color:var(--pri);background:var(--pri-soft);color:var(--pri);font-weight:600}
.obfoot{padding:10px 20px 16px;flex:none;background:var(--white);border-top:1px solid var(--line)}
.avgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.avgrid button{aspect-ratio:1;border-radius:18px;background:#F7F6FB;display:grid;place-items:center;border:2px solid transparent}
.avgrid button.on{border-color:var(--pri);background:var(--pri-soft)}
.avgrid.sm button{aspect-ratio:auto;padding:6px 0}
.bellart{position:relative;width:100%;height:220px;display:flex;align-items:center;justify-content:center;margin:20px 0 10px}
.bellart>span{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#C4A6FF,#7B5CFA);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 18px var(--pri-soft)}
.fakeno{position:absolute;left:8px;right:8px;bottom:0;display:flex;align-items:center;gap:10px;background:var(--white);border-radius:16px;padding:10px 12px;box-shadow:0 8px 24px rgba(40,20,90,.14);text-align:left}
.fakeno div{flex:1;display:flex;flex-direction:column}
.fakeno small{color:var(--mute);font-size:12px}
.fakeno em{font-style:normal;font-size:11px;color:var(--mute)}
.erow{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:8px 14px;border-radius:16px;border:1.5px solid var(--line);background:var(--white);text-align:left}
.erow>span{flex:1}

/* Giao diện tối cho các màn sáng: đổi biến màu, phủ các màu sáng viết cứng */
:root[data-theme="dark"]{--bg:#120E24;--white:#1D1838;--ink:#ECEAF6;--mute:#9A93BE;--line:#2C2550;--pri-soft:#2C2550;--pink-soft:#3A1E36;--green-soft:#163A2E;--blue-soft:#1C2A4A;--gold-soft:#3A3020;color-scheme:dark}
:root[data-theme="dark"] body{background:#0B0818}
:root[data-theme="dark"] .ob{background:radial-gradient(120% 60% at 50% 0,#2A2160,var(--white) 60%)}
:root[data-theme="dark"] .mprof{background:linear-gradient(180deg,#2A2160 0,var(--bg) 140px)}
:root[data-theme="dark"] .mehd{background:linear-gradient(180deg,#2A2160,var(--white))}
:root[data-theme="dark"] .m.them,:root[data-theme="dark"] .quick button,:root[data-theme="dark"] .comp input,:root[data-theme="dark"] .gsel button,:root[data-theme="dark"] .addc,:root[data-theme="dark"] .reg div,:root[data-theme="dark"] .follow.on,:root[data-theme="dark"] .seg,:root[data-theme="dark"] .wcards button,:root[data-theme="dark"] .avgrid button,:root[data-theme="dark"] .stlist button{background:#2C2550}
:root[data-theme="dark"] .tags span,:root[data-theme="dark"] .tagpick button{border-color:#3A3360;color:var(--dtext);background:transparent}
:root[data-theme="dark"] .tagpick button.on{background:var(--pri-soft);color:#C9B6FF}
:root[data-theme="dark"] .best{background:linear-gradient(90deg,#1C2A4A,#2C2550)}
:root[data-theme="dark"] .recharge{background:#163A4A;color:#9EE6FF}
:root[data-theme="dark"] .tab.on{color:#fff}
:root[data-theme="dark"] .ety{background:linear-gradient(180deg,#5B3BD8 0%,#3A2690 38%,var(--bg) 38%)}
:root[data-theme="dark"] .task .ck,:root[data-theme="dark"] .tgl:not(.on){background:#3A3360}
:root[data-theme="dark"] .m.warn{background:#3A1E2A}
:root[data-theme="dark"] .sheet::before{background:#3A3360}
:root[data-theme="dark"] .tab .me,:root[data-theme="dark"] .frame .av{border-color:var(--white)}
:root[data-theme="dark"] .dropb{box-shadow:0 10px 30px rgba(0,0,0,.5)}
:root[data-theme="dark"] .fr-rose::after,:root[data-theme="dark"] .fr-vine::after,:root[data-theme="dark"] .fr-mask::after,:root[data-theme="dark"] .fr-candy::after,:root[data-theme="dark"] .fr-newbie::after{box-shadow:0 0 0 2px var(--white)}
:root[data-theme="dark"] .etxt,:root[data-theme="dark"] .side{color:var(--dtext)}