/* 5/10 — KHUNG & HÀO QUANG (js/cosmetics.js). Khung vẽ bằng ::before (vòng màu nằm SAU ảnh, nên không che mặt, không phá vòng XP của HUD)
   và ::after (huy hiệu nhỏ ở góc). Dùng được cho mọi ô ảnh tròn / bo góc: thêm class `cf cf-<id>`. */
.cf{position:relative;isolation:isolate}
.cf::before{content:"";position:absolute;inset:calc(-1 * var(--cf-t,5px));padding:var(--cf-t,5px);border-radius:inherit;z-index:-1;background:var(--cf-bg,#d9a441);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;animation:var(--cf-an,none)}
.cf{filter:drop-shadow(0 0 var(--cf-gl,0) var(--cf-gc,transparent))}   /* quầng sáng quanh khung (box-shadow bị mặt nạ vòng cắt mất, nên dùng drop-shadow trên cả ô) */
.cf::after{content:var(--cf-ic,"");position:absolute;right:calc(-1 * var(--cf-o,6px));top:calc(-1 * var(--cf-o,6px));font-size:var(--cf-fs,15px);line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));pointer-events:none;z-index:2}
@keyframes cfSpin{to{transform:rotate(360deg)}}
@keyframes cfPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35) saturate(1.2)}}
@keyframes cfFlame{0%,100%{filter:hue-rotate(0) brightness(1)}50%{filter:hue-rotate(-18deg) brightness(1.4)}}
@keyframes cfShine{0%{filter:brightness(1)}45%{filter:brightness(1.5)}100%{filter:brightness(1)}}
/* ── khung theo cấp (miễn phí) ── */
.cf-f_wood{--cf-bg:linear-gradient(135deg,#a8743d,#6b4423 55%,#b8844a);--cf-t:4px;--cf-ic:"🪵"}
.cf-f_bronze{--cf-bg:linear-gradient(135deg,#f0b27a,#a8602a 50%,#e3a06a);--cf-t:5px;--cf-gl:6px;--cf-gc:rgba(205,127,50,.55);--cf-ic:"🥉"}
.cf-f_silver{--cf-bg:linear-gradient(135deg,#f4f7fb,#9aa6b4 50%,#e4ebf3);--cf-t:5px;--cf-gl:8px;--cf-gc:rgba(190,205,225,.7);--cf-ic:"🥈"}
.cf-f_gold{--cf-bg:linear-gradient(135deg,#fff1a8,#e0a31b 45%,#ffe27a 70%,#c98a0b);--cf-t:6px;--cf-gl:10px;--cf-gc:rgba(255,200,60,.75);--cf-an:cfShine 2.6s ease-in-out infinite;--cf-ic:"🥇"}
.cf-f_diamond{--cf-bg:conic-gradient(#7ff3ff,#d9fbff,#5ab8ff,#e8f9ff,#7ff3ff);--cf-t:6px;--cf-gl:12px;--cf-gc:rgba(100,220,255,.8);--cf-an:cfSpin 5s linear infinite;--cf-ic:"💎"}
.cf-f_legend{--cf-bg:conic-gradient(#ff5e62,#ffb347,#fff176,#6be585,#4fc3ff,#b388ff,#ff5e62);--cf-t:7px;--cf-gl:16px;--cf-gc:rgba(255,200,120,.85);--cf-an:cfSpin 3.5s linear infinite;--cf-ic:"👑";--cf-fs:18px}
/* ── khung mua bằng xu + kim cương ── */
.cf-f_sakura{--cf-bg:conic-gradient(#ffd1e3,#ff8fb8,#fff0f6,#ff9ec4,#ffd1e3);--cf-t:6px;--cf-gl:12px;--cf-gc:rgba(255,150,190,.75);--cf-an:cfSpin 7s linear infinite;--cf-ic:"🌸";--cf-fs:17px}
.cf-f_dragon{--cf-bg:conic-gradient(#ff3b1d,#ffb300,#ff6a00,#d40000,#ffb300,#ff3b1d);--cf-t:7px;--cf-gl:16px;--cf-gc:rgba(255,90,20,.85);--cf-an:cfSpin 4s linear infinite,cfFlame 1.6s ease-in-out infinite;--cf-ic:"🐉";--cf-fs:18px}
.cf-f_ice{--cf-bg:conic-gradient(#e6fbff,#7fd7ff,#ffffff,#9ee6ff,#e6fbff);--cf-t:6px;--cf-gl:14px;--cf-gc:rgba(140,220,255,.85);--cf-an:cfSpin 6s linear infinite,cfPulse 2.4s ease-in-out infinite;--cf-ic:"❄️";--cf-fs:17px}
.cf-f_royal{--cf-bg:conic-gradient(#ffe27a,#7b2ff7,#ffd24a,#4a148c,#ffe27a);--cf-t:7px;--cf-gl:16px;--cf-gc:rgba(190,120,255,.85);--cf-an:cfSpin 5s linear infinite,cfShine 2.8s ease-in-out infinite;--cf-ic:"👑";--cf-fs:19px}
/* ── 7/10 KHUNG VINH DANH (bảng xếp hạng ngày — "làm bxh với lại khung đi"): vòng NGUYỆT QUẾ = lá xen 4 sắc (repeating-conic) + tia sáng chạy vòng (@property --cfa,
   trình duyệt cũ thì đứng yên) + quầng sáng mạnh + huy hiệu cúp / huy chương. Khác hẳn Khung Vàng / Bạc / Đồng (dải chéo trơn, mảnh). ── */
@property --cfa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cfGlint{to{--cfa:360deg}}
.cf-f_champ1,.cf-f_champ2,.cf-f_champ3{--cf-t:8px;--cf-fs:19px;--cf-an:cfGlint 3.2s linear infinite}
.cf-f_champ1{--cf-gl:18px;--cf-gc:rgba(255,190,30,.95);--cf-ic:"🏆";--l1:#fff1a0;--l2:#e8a20c;--l3:#6e4200;--l4:#ffcc33}
.cf-f_champ2{--cf-gl:15px;--cf-gc:rgba(150,190,240,.95);--cf-ic:"🥈";--l1:#ffffff;--l2:#9fb0c6;--l3:#3e4b5c;--l4:#d3dfee}
.cf-f_champ3{--cf-gl:15px;--cf-gc:rgba(235,125,50,.9);--cf-ic:"🥉";--l1:#ffd2a6;--l2:#c46a2a;--l3:#4e2208;--l4:#ee9850}
.cf.cf-f_champ1::before,.cf.cf-f_champ2::before,.cf.cf-f_champ3::before{background:conic-gradient(from var(--cfa),transparent 0 290deg,rgba(255,255,255,.95) 325deg,transparent 360deg),radial-gradient(closest-side,rgba(0,0,0,.18) 80%,rgba(255,255,255,.22) 90%,rgba(0,0,0,.28) 100%),repeating-conic-gradient(from 0deg,var(--l3) 0deg 1.5deg,var(--l1) 3deg,var(--l2) 9deg,var(--l4) 13deg,var(--l3) 15deg)}   /* tia sáng · gờ nổi · lá nguyệt quế xếp vảy */
.cf-f_champ1::after,.cf-f_champ2::after,.cf-f_champ3::after{animation:cfBob 2.4s ease-in-out infinite}
@keyframes cfBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-2px) rotate(6deg)}}
/* ── PHẦN 3 · ĐỢT 3 KHUNG DANH HIỆU (Danh hiệu nông gia — không bán, js/cosmetics.js kind 'rank'): Bông Lúa Vàng = hạt lúa xếp vòng (repeating-conic) quay chậm;
   Thần Nông = lá ngọc + vàng có tia nắng chạy vòng (--cfa / cfGlint của khung vinh danh), mặt trời lắc nhẹ ── */
.cf-f_lua{--cf-t:7px;--cf-gl:12px;--cf-gc:rgba(240,190,40,.8);--cf-ic:"🌾";--cf-fs:18px;--cf-an:cfSpin 18s linear infinite}
.cf.cf-f_lua::before{background:radial-gradient(closest-side,rgba(0,0,0,.12) 78%,rgba(255,255,255,.35) 88%,rgba(0,0,0,.18) 100%),repeating-conic-gradient(from 0deg,#5f8a1c 0deg 1deg,#fff0a6 2.5deg,#f2b51d 6deg,#c98a0b 8.5deg,#5f8a1c 10deg)}
.cf-f_thannong{--cf-t:8px;--cf-gl:20px;--cf-gc:rgba(255,200,40,.95);--cf-ic:"🌞";--cf-fs:20px;--cf-an:cfGlint 2.8s linear infinite}
.cf.cf-f_thannong::before{background:conic-gradient(from var(--cfa),transparent 0 300deg,rgba(255,255,255,.95) 330deg,transparent 360deg),radial-gradient(closest-side,rgba(0,0,0,.15) 78%,rgba(255,255,230,.4) 88%,rgba(0,0,0,.25) 100%),repeating-conic-gradient(from 0deg,#0d6e43 0deg 4deg,#fff3a0 6deg,#f0b20c 12deg,#3fbf6a 16deg,#0d6e43 20deg)}
.cf-f_thannong::after{animation:cfBob 2.4s ease-in-out infinite}
.cos-card.rank{background:linear-gradient(180deg,#f6fff0,#fff6d6);border-color:#b9d98a}
.cos-card.rank .cos-pv{margin-top:14px}
.cos-card .cos-tag.rank{background:linear-gradient(180deg,#d9f5b0,#9fd35a);color:#2f5a07}
.cos-sec .cos-book{float:right;margin:-3px 0 0 8px;font-size:.74em;padding:.25em .7em}
/* ── 7/10 ảnh tròn trong dòng bảng xếp hạng (js/lb.js, js/mp.js — COS.ava bọc .mp-ava) — vòng mảnh hơn cho ảnh 38 px ── */
.cf-ava{width:38px;height:38px;border-radius:50%;flex:none;margin:0 4px;--cf-fs:13px;--cf-o:7px}
.cf-ava.cf{--cf-t:4px}
.cf-ava.cf-f_champ1,.cf-ava.cf-f_champ2,.cf-ava.cf-f_champ3{--cf-t:5px;--cf-fs:14px}
.cf-ava.cf-f_lua,.cf-ava.cf-f_thannong{--cf-t:5px;--cf-fs:14px}
.cf-ava>.mp-ava{width:100%!important;height:100%!important;margin:0!important}
.lb-mini{display:inline-block;width:15px;height:15px;border-radius:50%;background:radial-gradient(#fff,#fde7a6);vertical-align:-3px;margin:0 5px 0 6px}
.lb-mini.cf{--cf-t:3px;--cf-ic:"";--cf-gl:4px}
.cos-au{margin:0 2px 0 0}
/* ── huy hiệu nhỏ cạnh tên (biển tên người chơi khác) ── */
.cos-chip{display:inline-block;font-style:normal;font-size:.95em;line-height:1;margin-right:3px;vertical-align:-1px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
/* ── HUD: vòng XP vẫn là nền; khung bao ngoài ── */
#hud .avatar-ring.cf{overflow:visible}
#hud .avatar-ring.cf::after{right:-9px;top:-9px}
/* ── hồ sơ nhân vật ── */
.prof-face.cf{border-radius:26px}
.prof-face.cf::before{inset:0;padding:7px;z-index:1;animation:none}   /* .prof-face cắt phần tràn (overflow:hidden) → vòng khung vẽ BÊN TRONG mép ảnh, tĩnh */
.prof-face.cf::after{right:8px;top:8px;z-index:3}
/* ── bảng Khung & Hào quang ── */
.cos-wrap{display:flex;flex-direction:column;gap:12px}
.cos-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:18px;background:rgba(255,248,226,.8);border:2px solid #f0d9a4}
.cos-head .cos-me{width:64px;height:64px;border-radius:50%;background:radial-gradient(#fff,#bfe4ff);flex:0 0 auto}
.cos-head .cos-me img,.cos-card .cos-pv img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.cos-head b{font-size:1.05em}.cos-head small{display:block;opacity:.75;font-weight:700}
.cos-tabs{display:flex;gap:8px}
.cos-tabs button{flex:1;border:0;border-radius:999px;padding:9px 12px;font-weight:900;font-family:inherit;background:#f4e5c8;color:#6b4423;cursor:pointer}
.cos-tabs button.on{background:linear-gradient(180deg,#ffe07a,#f0a70b);color:#5a3a00;box-shadow:0 2px 0 #c98a0b}
.cos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cos-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 10px 10px;border-radius:18px;background:#fffdf5;border:2px solid #efdcb0;position:relative}
.cos-card.on{border-color:#4caf50;box-shadow:0 0 0 2px rgba(76,175,80,.35)}
.cos-card.lock{opacity:.78}
.cos-card .cos-pv{width:72px;height:72px;border-radius:50%;margin:8px 0 6px;background:radial-gradient(#fff,#bfe4ff)}
.cos-card .cos-pv.au{border-radius:18px;background:linear-gradient(180deg,#1d1840,#3a2a6a);overflow:hidden;width:92px;height:72px}
.cos-card b{font-size:.98em;line-height:1.15}.cos-card .cos-d{font-size:.78em;opacity:.78;font-weight:700;min-height:2.4em}
.cos-card .cos-tag{position:absolute;left:8px;top:8px;font-size:.7em;font-weight:900;padding:2px 8px;border-radius:999px;background:#eaf3ff;color:#2a5a99}
.cos-card .cos-tag.buy{background:#ffe9b0;color:#7a4a00}.cos-card .cos-tag.lv{background:#e8f5e9;color:#2e7d32}
.cos-card .btn{width:100%}
.cos-note{font-size:.82em;opacity:.78;font-weight:700;text-align:center}
/* 7/10: thẻ khung vinh danh */
.cos-sec{font-weight:900;font-size:1.02em;color:#7a4a00;padding:8px 4px 0;border-top:2px dashed #efdcb0}
.cos-sec small{display:block;font-weight:700;font-size:.78em;opacity:.75;margin-top:2px}
.cos-card.champ{background:linear-gradient(180deg,#fffbe8,#fff1c4);border-color:#f0c24a}
.cos-card.champ .cos-pv{width:76px;height:76px;margin-top:16px}
.cos-card .cos-tag{z-index:4}   /* nhãn góc luôn nằm trên vòng khung dày */
.cos-card .cos-tag.champ{background:linear-gradient(180deg,#ffe07a,#f0a70b);color:#5a3a00}
.cos-card .btn.cos-champ-lock{white-space:normal;line-height:1.2;font-size:.78em}
/* xem trước hào quang bằng emoji bay (không tốn WebGL) */
.cos-fx{position:relative;width:100%;height:100%}
.cos-fx i{position:absolute;bottom:-10px;font-style:normal;font-size:18px;animation:cosUp 2.6s linear infinite;opacity:0}
.cos-fx.fall i{top:-10px;bottom:auto;animation-name:cosDown}
@keyframes cosUp{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-84px) scale(1.1);opacity:0}}
@keyframes cosDown{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(84px) rotate(180deg);opacity:0}}