/* ============================================================
   AVATAR EFFECT PACK v1.3
   - Dùng chung cho profile công khai + preview trong admin
   - Mỗi profile chọn hiệu ứng riêng bằng class avatar-fx--{effect}
   ============================================================ */

.avatar-fx {
    --fx-a: #19c9ff;
    --fx-b: #1fd8c8;
    --fx-c: #efe21d;
    --fx-d: #ff4ecd;
    position: relative;
    isolation: isolate;
    border-radius: 50%;
}

.avatar-fx .avatar-fx__layer,
.avatar-fx::before,
.avatar-fx::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.avatar-fx .avatar-fx__layer { z-index: 1; }
.avatar-fx .avatar-fx__layer--1 { inset: -11%; }
.avatar-fx .avatar-fx__layer--2 { inset: -7%; }
.avatar-fx .avatar-fx__layer--3 { inset: -2%; }
.avatar-fx .avatar-fx__layer--4 { inset: -18%; }

.avatar-fx .profile-avatar {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #102966;
    transform: translateZ(0);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    animation: avatarFxFloat 3.2s ease-in-out infinite !important;
}

.avatar-fx .profile-avatar img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50%;
}

.avatar-fx .avatar-shine {
    position: absolute;
    inset: 0 auto 0 -90%;
    width: 45%;
    height: 100%;
    z-index: 6;
    opacity: .48;
    border-radius: 50%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    animation: avatarFxShine 2.8s ease-in-out infinite !important;
}

@keyframes avatarFxFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.015); }
}
@keyframes avatarFxShine {
    0%,25% { left: -90%; opacity: 0; }
    45% { opacity: .55; }
    70%,100% { left: 160%; opacity: 0; }
}
@keyframes avatarFxSpin { to { transform: rotate(360deg); } }
@keyframes avatarFxSpinReverse { to { transform: rotate(-360deg); } }
@keyframes avatarFxPulse {
    0%,100% { transform: scale(.94); opacity: .45; }
    50% { transform: scale(1.08); opacity: .9; }
}
@keyframes avatarFxBlink {
    0%,100% { opacity: .3; filter: brightness(1); }
    18% { opacity: 1; filter: brightness(1.8); }
    22% { opacity: .25; }
    48% { opacity: .9; }
    52% { opacity: .35; }
}
@keyframes avatarFxSlash {
    0% { transform: rotate(-34deg) translateX(-130%); opacity: 0; }
    22% { opacity: 1; }
    50% { opacity: .95; }
    82%,100% { transform: rotate(-34deg) translateX(130%); opacity: 0; }
}
@keyframes avatarFxCloud {
    0%,100% { transform: translateX(-4%) translateY(1%) scale(1); }
    50% { transform: translateX(5%) translateY(-3%) scale(1.04); }
}
@keyframes avatarFxStars {
    0%,100% { transform: rotate(0deg) scale(.96); opacity: .55; }
    50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
}

/* 01 - Rainbow Neon: gần hiệu ứng cũ nhưng đẹp và gọn hơn */
.avatar-fx--rainbow .avatar-fx__layer--1 {
    background: conic-gradient(from 0deg,#19c9ff,#3af2c3,#ffe85c,#ff4ecd,#ff5f6d,#19c9ff);
    filter: blur(9px);
    opacity: .76;
    animation: avatarFxSpin 3s linear infinite;
}
.avatar-fx--rainbow .avatar-fx__layer--2 {
    background: conic-gradient(from 40deg,#19c9ff,#50ffb1,#fff45f,#ff56dc,#19c9ff);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: avatarFxSpin 2.6s linear infinite;
}
.avatar-fx--rainbow .avatar-fx__layer--4 {
    opacity: .75;
    background:
        radial-gradient(circle at 50% 0%,#fff 0 2px,transparent 3px),
        radial-gradient(circle at 92% 32%,#6ff 0 2px,transparent 3px),
        radial-gradient(circle at 12% 70%,#fff36d 0 2px,transparent 3px),
        radial-gradient(circle at 72% 94%,#ff7be5 0 2px,transparent 3px);
    animation: avatarFxSpinReverse 7s linear infinite;
}

/* 02 - Cyan Orbit */
.avatar-fx--cyan_orbit .avatar-fx__layer--1 {
    border: 2px solid rgba(76,238,255,.9);
    box-shadow: 0 0 9px #00d9ff,0 0 24px rgba(0,217,255,.75),inset 0 0 12px rgba(0,217,255,.55);
    animation: avatarFxPulse 2s ease-in-out infinite;
}
.avatar-fx--cyan_orbit .avatar-fx__layer--2 {
    border: 3px dashed rgba(180,253,255,.9);
    box-shadow: 0 0 12px #2ff4ff;
    animation: avatarFxSpin 3.5s linear infinite;
}
.avatar-fx--cyan_orbit .avatar-fx__layer--3::before,
.avatar-fx--cyan_orbit .avatar-fx__layer--3::after {
    content:""; position:absolute; width:9%; height:9%; border-radius:50%;
    background:#fff; box-shadow:0 0 5px #fff,0 0 14px #00e5ff,0 0 24px #00e5ff;
}
.avatar-fx--cyan_orbit .avatar-fx__layer--3::before { left:2%; top:18%; }
.avatar-fx--cyan_orbit .avatar-fx__layer--3::after { right:0; bottom:17%; }
.avatar-fx--cyan_orbit .avatar-fx__layer--3 { animation: avatarFxSpin 2.2s linear infinite; }

/* 03 - Red Slash */
.avatar-fx--red_slash .avatar-fx__layer--1 {
    border: 3px solid #ff2b40;
    box-shadow: 0 0 8px #ff132f,0 0 28px rgba(255,0,38,.88),inset 0 0 22px rgba(255,0,38,.55);
    animation: avatarFxPulse 1.65s ease-in-out infinite;
}
.avatar-fx--red_slash .avatar-fx__layer--2 {
    background: conic-gradient(from 20deg,transparent 0 22%,#ff3650 27%,transparent 31% 62%,#ff001f 68%,transparent 74%);
    filter: blur(2px);
    animation: avatarFxSpin 2s linear infinite;
}
.avatar-fx--red_slash .avatar-fx__layer--4 {
    inset:-28%; overflow:hidden; border-radius:38%;
}
.avatar-fx--red_slash .avatar-fx__layer--4::after {
    content:""; position:absolute; left:0; top:44%; width:150%; height:5%;
    background:linear-gradient(90deg,transparent,#fff 30%,#ff1236 43% 58%,#fff 68%,transparent);
    box-shadow:0 0 8px #fff,0 0 16px #ff1738,0 0 28px #ff1738;
    animation:avatarFxSlash 2.4s ease-in-out infinite;
}

/* 04 - Fire */
.avatar-fx--fire .avatar-fx__layer--1 {
    background: conic-gradient(#ffdf62,#ff7a00,#ff1e00,#ffaf16,#fff27d,#ff4b00,#ffdf62);
    filter: blur(8px) saturate(1.3);
    animation:avatarFxSpin 2.7s linear infinite;
}
.avatar-fx--fire .avatar-fx__layer--2 {
    border:3px solid rgba(255,172,33,.95);
    box-shadow:0 0 8px #ffd45e,0 0 20px #ff6000,0 0 34px rgba(255,45,0,.72);
    animation:avatarFxPulse 1.25s ease-in-out infinite;
}
.avatar-fx--fire .avatar-fx__layer--4 {
    background:
      radial-gradient(ellipse at 25% 80%,rgba(255,91,0,.95) 0 5%,transparent 7%),
      radial-gradient(ellipse at 70% 18%,rgba(255,220,77,.92) 0 4%,transparent 7%),
      radial-gradient(ellipse at 92% 65%,rgba(255,48,0,.9) 0 5%,transparent 8%);
    filter:blur(3px);
    animation:avatarFxBlink 1.1s linear infinite;
}

/* 05 - Electric */
.avatar-fx--electric .avatar-fx__layer--1 {
    border:2px solid #65c9ff;
    box-shadow:0 0 7px #fff,0 0 18px #0095ff,0 0 36px #0057ff;
    animation:avatarFxBlink 1.2s steps(2,end) infinite;
}
.avatar-fx--electric .avatar-fx__layer--2 {
    background:conic-gradient(transparent 0 7%,#d9f6ff 8% 9%,#168dff 10% 14%,transparent 15% 38%,#fff 39% 40%,#0bd5ff 41% 46%,transparent 47% 72%,#73a9ff 73% 77%,transparent 78%);
    filter:drop-shadow(0 0 5px #10adff);
    animation:avatarFxSpin 1.45s linear infinite;
}
.avatar-fx--electric .avatar-fx__layer--4 {
    border:1px dashed rgba(140,223,255,.8);
    animation:avatarFxSpinReverse 4.5s linear infinite;
}

/* 06 - Pink Pulse */
.avatar-fx--pink_pulse .avatar-fx__layer--1 {
    background:conic-gradient(#ff9de2,#ff3caa,#a54cff,#ff78ca,#ff9de2);
    filter:blur(10px);
    opacity:.7;
    animation:avatarFxPulse 1.8s ease-in-out infinite;
}
.avatar-fx--pink_pulse .avatar-fx__layer--2 {
    border:3px solid rgba(255,107,207,.92);
    box-shadow:0 0 12px #ff4cbd,0 0 26px rgba(177,70,255,.78);
    animation:avatarFxPulse 1.8s ease-in-out .4s infinite;
}
.avatar-fx--pink_pulse .avatar-fx__layer--4 {
    background:
      radial-gradient(circle at 12% 40%,#fff 0 2%,transparent 3%),
      radial-gradient(circle at 84% 18%,#ffdaef 0 2%,transparent 3%),
      radial-gradient(circle at 88% 77%,#fff 0 1.5%,transparent 2.5%),
      radial-gradient(circle at 28% 88%,#ff7bcf 0 2%,transparent 3%);
    animation:avatarFxStars 5.2s linear infinite;
}

/* 07 - Gold */
.avatar-fx--gold .avatar-fx__layer--1 {
    background:conic-gradient(#7a4f00,#ffd35a,#fff4b5,#d99b14,#fff0a2,#8d5a00,#ffd35a);
    filter:blur(6px);
    opacity:.72;
    animation:avatarFxSpin 4s linear infinite;
}
.avatar-fx--gold .avatar-fx__layer--2 {
    border:3px solid #ffd96d;
    box-shadow:0 0 7px #fff3be,0 0 22px rgba(255,187,30,.8),inset 0 0 10px rgba(255,207,80,.5);
}
.avatar-fx--gold .avatar-fx__layer--4 {
    background:
        radial-gradient(circle at 50% 0,#fff 0 2px,transparent 3px),
        radial-gradient(circle at 2% 48%,#fff2a6 0 3px,transparent 4px),
        radial-gradient(circle at 98% 55%,#fff 0 2px,transparent 3px),
        radial-gradient(circle at 53% 100%,#ffe17a 0 3px,transparent 4px);
    filter:drop-shadow(0 0 5px #ffc83d);
    animation:avatarFxSpin 6s linear infinite;
}

/* 08 - Galaxy */
.avatar-fx--galaxy .avatar-fx__layer--1 {
    background:conic-gradient(#24115f,#7a35ff,#0ecbff,#ee42ff,#35137d,#24115f);
    filter:blur(10px);
    opacity:.8;
    animation:avatarFxSpin 4.8s linear infinite;
}
.avatar-fx--galaxy .avatar-fx__layer--2 {
    border:2px solid rgba(186,137,255,.85);
    box-shadow:0 0 12px #8c52ff,0 0 30px rgba(16,183,255,.6),inset 0 0 12px rgba(236,93,255,.5);
}
.avatar-fx--galaxy .avatar-fx__layer--4 {
    background:
      radial-gradient(circle at 7% 30%,#fff 0 1.5%,transparent 2.4%),
      radial-gradient(circle at 28% 3%,#b6dcff 0 1.8%,transparent 2.6%),
      radial-gradient(circle at 88% 20%,#fff 0 1.4%,transparent 2.2%),
      radial-gradient(circle at 99% 70%,#f4c5ff 0 1.8%,transparent 2.8%),
      radial-gradient(circle at 15% 85%,#fff 0 1.6%,transparent 2.5%),
      radial-gradient(circle at 63% 98%,#85eaff 0 1.8%,transparent 2.6%);
    filter:drop-shadow(0 0 5px #b6a0ff);
    animation:avatarFxStars 7s linear infinite;
}

/* 09 - Ice */
.avatar-fx--ice .avatar-fx__layer--1 {
    border:3px solid #b9f5ff;
    box-shadow:0 0 8px #fff,0 0 20px #71dfff,0 0 34px rgba(49,129,255,.62);
}
.avatar-fx--ice .avatar-fx__layer--2 {
    background:conic-gradient(transparent 0 9%,#fff 10% 12%,#9aeaff 13% 18%,transparent 19% 44%,#ddfbff 45% 47%,#5dbbff 48% 52%,transparent 53% 76%,#fff 77% 79%,#77d9ff 80% 84%,transparent 85%);
    clip-path:polygon(50% 0,58% 33%,85% 15%,67% 42%,100% 50%,67% 58%,85% 85%,58% 67%,50% 100%,42% 67%,15% 85%,33% 58%,0 50%,33% 42%,15% 15%,42% 33%);
    filter:drop-shadow(0 0 7px #8be9ff);
    animation:avatarFxSpin 5s linear infinite;
}
.avatar-fx--ice .avatar-fx__layer--4 {
    border:1px dotted rgba(214,249,255,.9);
    animation:avatarFxSpinReverse 8s linear infinite;
}

/* 10 - Emerald */
.avatar-fx--emerald .avatar-fx__layer--1 {
    background:conic-gradient(#043b30,#10e9a6,#a7ffe0,#00bd7b,#24ffd1,#043b30);
    filter:blur(8px);
    opacity:.75;
    animation:avatarFxSpin 3.8s linear infinite;
}
.avatar-fx--emerald .avatar-fx__layer--2 {
    border:3px solid #5cffc5;
    box-shadow:0 0 9px #51ffc0,0 0 26px rgba(0,221,143,.75),inset 0 0 16px rgba(56,255,189,.35);
    animation:avatarFxPulse 2.4s ease-in-out infinite;
}
.avatar-fx--emerald .avatar-fx__layer--4 {
    background:radial-gradient(circle at 15% 50%,#b8ffe8 0 2%,transparent 3%),radial-gradient(circle at 85% 42%,#76ffc7 0 2%,transparent 3%);
    animation:avatarFxSpin 4s linear infinite;
}

/* 11 - Sunset */
.avatar-fx--sunset .avatar-fx__layer--1 {
    background:conic-gradient(#ff6a3d,#ffcc70,#ff4e9e,#a44cff,#ff6a3d);
    filter:blur(10px);
    opacity:.8;
    animation:avatarFxSpinReverse 5s linear infinite;
}
.avatar-fx--sunset .avatar-fx__layer--2 {
    border:3px solid rgba(255,175,94,.95);
    box-shadow:0 0 10px #ff8c60,0 0 25px rgba(255,62,151,.72),0 0 40px rgba(136,63,255,.48);
    animation:avatarFxPulse 2.3s ease-in-out infinite;
}
.avatar-fx--sunset .avatar-fx__layer--4 {
    background:linear-gradient(90deg,transparent,rgba(255,229,164,.55),transparent);
    transform:rotate(-15deg);
    filter:blur(4px);
    animation:avatarFxBlink 2s ease-in-out infinite;
}

/* 12 - Moon Cloud: lấy cảm hứng video mây/trăng */
.avatar-fx--moon_cloud .avatar-fx__layer--1 {
    background:conic-gradient(#b6eaff,#ffffff,#75c7ff,#a993ff,#dff7ff,#b6eaff);
    filter:blur(9px);
    opacity:.6;
    animation:avatarFxSpin 8s linear infinite;
}
.avatar-fx--moon_cloud .avatar-fx__layer--2 {
    border:2px solid rgba(210,243,255,.92);
    box-shadow:0 0 11px #a6e7ff,0 0 28px rgba(102,151,255,.62);
}
.avatar-fx--moon_cloud .avatar-fx__layer--4 {
    inset:-25%; border-radius:38%;
    background:
      radial-gradient(circle at 20% 63%,rgba(240,250,255,.95) 0 9%,transparent 10%),
      radial-gradient(circle at 31% 68%,rgba(209,238,255,.96) 0 13%,transparent 14%),
      radial-gradient(circle at 74% 24%,rgba(235,248,255,.95) 0 10%,transparent 11%),
      radial-gradient(circle at 84% 31%,rgba(195,226,255,.93) 0 14%,transparent 15%),
      radial-gradient(circle at 50% 102%,rgba(227,246,255,.96) 0 18%,transparent 19%);
    filter:drop-shadow(0 0 7px rgba(134,203,255,.9));
    animation:avatarFxCloud 3.7s ease-in-out infinite;
}
.avatar-fx--moon_cloud::after {
    z-index:7;
    width:24%; height:24%;
    left:-8%; bottom:0;
    background:#ecfbff;
    box-shadow:0 0 8px #fff,0 0 22px #78cfff;
    -webkit-mask:radial-gradient(circle at 64% 42%,transparent 0 55%,#000 57%);
    mask:radial-gradient(circle at 64% 42%,transparent 0 55%,#000 57%);
    animation:avatarFxPulse 2.8s ease-in-out infinite;
}
.avatar-fx--moon_cloud::before {
    z-index:8;
    inset:-20%;
    background:
      radial-gradient(circle at 7% 22%,#fff 0 1.2%,transparent 2%),
      radial-gradient(circle at 93% 56%,#fff 0 1.4%,transparent 2.1%),
      radial-gradient(circle at 23% 5%,#dff8ff 0 1.3%,transparent 2%),
      radial-gradient(circle at 70% 92%,#fff 0 1.2%,transparent 2%);
    animation:avatarFxStars 6s linear infinite;
}


/* 13 - Moon Meteor: bám sát video mẫu hơn
   - mây xanh trắng ôm quanh avatar
   - trăng lưỡi liềm phía dưới-trái
   - sao lấp lánh + sao băng quét ngang định kỳ
*/
@keyframes avatarFxMoonMeteorCloudFront {
    0%,100% { transform: translate3d(-2%,1%,0) scale(1); }
    50% { transform: translate3d(3%,-2%,0) scale(1.025); }
}
@keyframes avatarFxMoonMeteorCloudBack {
    0%,100% { transform: translate3d(2%,-1%,0) scale(.985); opacity:.78; }
    50% { transform: translate3d(-3%,2%,0) scale(1.035); opacity:1; }
}
@keyframes avatarFxMoonMeteorTwinkle {
    0%,100% { opacity:.35; filter:drop-shadow(0 0 1px #fff); transform:scale(.98); }
    22% { opacity:1; filter:drop-shadow(0 0 6px #dff7ff); transform:scale(1.04); }
    48% { opacity:.5; }
    73% { opacity:.95; filter:drop-shadow(0 0 4px #9cdcff); }
}
@keyframes avatarFxMoonMeteorShoot {
    0%,54% { left:128%; top:17%; opacity:0; transform:rotate(-13deg) scaleX(.65); }
    57% { opacity:0; }
    60% { left:105%; top:22%; opacity:1; transform:rotate(-13deg) scaleX(1); }
    72% { left:-62%; top:56%; opacity:1; transform:rotate(-13deg) scaleX(1.06); }
    76%,100% { left:-75%; top:59%; opacity:0; transform:rotate(-13deg) scaleX(.75); }
}
@keyframes avatarFxMoonMeteorGlow {
    0%,100% { transform:scale(.96) rotate(-8deg); filter:brightness(.96); }
    50% { transform:scale(1.04) rotate(-3deg); filter:brightness(1.18); }
}

.avatar-fx--moon_meteor {
    overflow:visible !important;
}
.avatar-fx--moon_meteor .profile-avatar {
    animation:avatarFxFloat 3.8s ease-in-out infinite !important;
    box-shadow:
        0 8px 24px rgba(0,0,0,.28),
        0 0 10px rgba(198,235,255,.34),
        0 0 26px rgba(97,161,255,.22) !important;
}
.avatar-fx--moon_meteor .avatar-shine {
    opacity:.22;
    animation-duration:4.6s !important;
}

/* halo mỏng phía sau, không lấn át mây/trăng */
.avatar-fx--moon_meteor .avatar-fx__layer--1 {
    inset:-13%;
    z-index:0;
    background:radial-gradient(circle,rgba(198,236,255,.16) 42%,rgba(116,182,255,.16) 56%,transparent 72%);
    box-shadow:0 0 24px rgba(118,188,255,.36);
    animation:avatarFxPulse 3.6s ease-in-out infinite;
}

/* mây phía sau ở góc trên trái/phải */
.avatar-fx--moon_meteor .avatar-fx__layer--2 {
    inset:-27%;
    z-index:2;
    border-radius:34%;
    background:
        radial-gradient(ellipse at 15% 30%,rgba(231,246,255,.98) 0 7%,transparent 8%),
        radial-gradient(ellipse at 23% 23%,rgba(202,231,255,.98) 0 10%,transparent 11%),
        radial-gradient(ellipse at 32% 28%,rgba(225,244,255,.96) 0 8%,transparent 9%),
        radial-gradient(ellipse at 71% 19%,rgba(221,240,255,.98) 0 8%,transparent 9%),
        radial-gradient(ellipse at 82% 24%,rgba(189,222,255,.98) 0 12%,transparent 13%),
        radial-gradient(ellipse at 91% 33%,rgba(226,244,255,.96) 0 7%,transparent 8%),
        radial-gradient(ellipse at 96% 45%,rgba(166,210,255,.93) 0 6%,transparent 7%);
    filter:drop-shadow(0 2px 4px rgba(113,176,255,.78)) drop-shadow(0 0 8px rgba(208,240,255,.62));
    animation:avatarFxMoonMeteorCloudBack 5.2s ease-in-out infinite;
}

/* lớp mây trước, ôm đáy avatar như video */
.avatar-fx--moon_meteor .avatar-fx__layer--4 {
    inset:-30%;
    z-index:7;
    border-radius:35%;
    background:
        radial-gradient(ellipse at 4% 68%,rgba(207,235,255,.98) 0 8%,transparent 9%),
        radial-gradient(ellipse at 12% 74%,rgba(235,248,255,.99) 0 11%,transparent 12%),
        radial-gradient(ellipse at 24% 78%,rgba(194,225,255,.99) 0 15%,transparent 16%),
        radial-gradient(ellipse at 38% 83%,rgba(226,244,255,.98) 0 14%,transparent 15%),
        radial-gradient(ellipse at 53% 88%,rgba(184,220,255,.97) 0 13%,transparent 14%),
        radial-gradient(ellipse at 69% 82%,rgba(229,246,255,.97) 0 12%,transparent 13%),
        radial-gradient(ellipse at 82% 72%,rgba(193,226,255,.96) 0 10%,transparent 11%),
        radial-gradient(ellipse at 94% 63%,rgba(224,244,255,.95) 0 7%,transparent 8%);
    filter:drop-shadow(0 2px 5px rgba(86,152,255,.88)) drop-shadow(0 0 10px rgba(208,242,255,.74));
    animation:avatarFxMoonMeteorCloudFront 4.1s ease-in-out infinite;
}

/* trăng + sao băng dùng pseudo của layer 3 để có thể nằm trên avatar */
.avatar-fx--moon_meteor .avatar-fx__layer--3 {
    inset:-15%;
    z-index:9;
    overflow:visible;
}
.avatar-fx--moon_meteor .avatar-fx__layer--3::before {
    content:"";
    position:absolute;
    width:29%;
    height:29%;
    left:-5%;
    bottom:-2%;
    border-radius:50%;
    background:linear-gradient(145deg,#ffffff 0%,#edfaff 38%,#b8ddff 100%);
    box-shadow:0 0 7px #fff,0 0 17px rgba(176,224,255,.95),0 0 30px rgba(91,149,255,.72);
    -webkit-mask:radial-gradient(circle at 69% 35%,transparent 0 51%,#000 53%);
    mask:radial-gradient(circle at 69% 35%,transparent 0 51%,#000 53%);
    animation:avatarFxMoonMeteorGlow 3.2s ease-in-out infinite;
}
.avatar-fx--moon_meteor .avatar-fx__layer--3::after {
    content:"";
    position:absolute;
    left:128%;
    top:17%;
    width:70%;
    height:2.3%;
    min-height:2px;
    border-radius:999px;
    transform-origin:left center;
    background:linear-gradient(90deg,#fff 0 3%,rgba(226,247,255,.98) 8%,rgba(142,205,255,.78) 26%,rgba(102,174,255,.34) 58%,transparent 100%);
    box-shadow:-2px 0 6px #fff,-5px 0 14px rgba(169,221,255,.95),0 0 14px rgba(94,160,255,.62);
    animation:avatarFxMoonMeteorShoot 5.7s cubic-bezier(.2,.65,.35,1) infinite;
}

/* sao nhỏ quanh vòng ngoài */
.avatar-fx--moon_meteor::before {
    z-index:10;
    inset:-25%;
    border-radius:50%;
    background:
        radial-gradient(circle at 8% 19%,#fff 0 1.2%,transparent 2.1%),
        radial-gradient(circle at 23% 5%,#eaf9ff 0 1.0%,transparent 1.9%),
        radial-gradient(circle at 48% 1%,#fff 0 1.5%,transparent 2.4%),
        radial-gradient(circle at 73% 8%,#fff 0 1.0%,transparent 1.9%),
        radial-gradient(circle at 94% 27%,#e6f8ff 0 1.3%,transparent 2.2%),
        radial-gradient(circle at 97% 62%,#fff 0 1.2%,transparent 2.1%),
        radial-gradient(circle at 86% 88%,#d7f2ff 0 1.0%,transparent 1.9%),
        radial-gradient(circle at 60% 98%,#fff 0 1.4%,transparent 2.3%),
        radial-gradient(circle at 30% 94%,#fff 0 1.0%,transparent 1.9%),
        radial-gradient(circle at 5% 74%,#dff6ff 0 1.3%,transparent 2.2%),
        radial-gradient(circle at 14% 50%,#fff 0 1.0%,transparent 1.9%),
        radial-gradient(circle at 68% 31%,#fff 0 .8%,transparent 1.6%);
    animation:avatarFxMoonMeteorTwinkle 2.8s ease-in-out infinite;
}

/* một ngôi sao 4 cánh nổi bật, nhấp nháy ở góc trên-phải */
.avatar-fx--moon_meteor::after {
    z-index:11;
    width:9%;
    height:9%;
    right:-12%;
    top:7%;
    left:auto;
    bottom:auto;
    border-radius:0;
    background:
        linear-gradient(90deg,transparent 43%,#fff 46% 54%,transparent 57%),
        linear-gradient(0deg,transparent 43%,#fff 46% 54%,transparent 57%);
    filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #8fd6ff);
    animation:avatarFxMoonMeteorTwinkle 2.2s ease-in-out .45s infinite;
}

/* 14 - Cerberus: lửa xoáy hồng-cam giống video */
@keyframes avatarFxCerberusBreath {
    0%,100% { transform: rotate(0deg) scale(.98); filter: blur(8px) saturate(1.06); }
    50% { transform: rotate(180deg) scale(1.05); filter: blur(10px) saturate(1.3); }
}
@keyframes avatarFxCerberusTongue {
    0%,100% { transform: translateY(0) scale(1); opacity:.75; }
    50% { transform: translateY(-4%) scale(1.08); opacity:1; }
}
.avatar-fx--cerberus {
    overflow: visible !important;
}
.avatar-fx--cerberus .avatar-fx__layer--1 {
    inset:-15%;
    background: conic-gradient(from -18deg,#ffde7d 0 6%,#ff7c32 12%,#ff2b9b 28%,#8e1aff 44%,#ff5f7e 61%,#ffad4d 78%,#ffe28f 93%,#ffde7d 100%);
    filter: blur(9px) saturate(1.15);
    opacity:.88;
    animation: avatarFxSpinReverse 4.2s linear infinite;
}
.avatar-fx--cerberus .avatar-fx__layer--2 {
    inset:-24%;
    border-radius:40%;
    background:
        radial-gradient(ellipse at 30% 13%,rgba(255,240,177,.96) 0 7%,transparent 8%),
        radial-gradient(ellipse at 44% 5%,rgba(255,176,72,.98) 0 10%,transparent 11%),
        radial-gradient(ellipse at 62% 8%,rgba(255,74,166,.94) 0 8%,transparent 9%),
        radial-gradient(ellipse at 75% 20%,rgba(255,135,64,.95) 0 7%,transparent 8%),
        radial-gradient(ellipse at 90% 42%,rgba(255,94,104,.92) 0 6%,transparent 7%),
        radial-gradient(ellipse at 82% 75%,rgba(255,112,48,.95) 0 8%,transparent 9%),
        radial-gradient(ellipse at 58% 93%,rgba(255,233,153,.95) 0 8%,transparent 9%),
        radial-gradient(ellipse at 29% 90%,rgba(255,73,145,.93) 0 9%,transparent 10%),
        radial-gradient(ellipse at 8% 66%,rgba(255,165,78,.93) 0 8%,transparent 9%),
        radial-gradient(ellipse at 12% 34%,rgba(255,70,147,.94) 0 7%,transparent 8%);
    filter: drop-shadow(0 0 8px rgba(255,84,154,.65)) drop-shadow(0 0 14px rgba(255,172,60,.5));
    animation: avatarFxCerberusBreath 3.6s ease-in-out infinite;
}
.avatar-fx--cerberus .avatar-fx__layer--4 {
    inset:-8%;
    border:3px solid rgba(255,196,88,.96);
    box-shadow:0 0 9px rgba(255,233,178,.95),0 0 28px rgba(255,105,175,.75),inset 0 0 14px rgba(255,123,56,.55);
    animation: avatarFxPulse 1.7s ease-in-out infinite;
}
.avatar-fx--cerberus::before {
    z-index:10;
    inset:-22%;
    background:
        radial-gradient(circle at 17% 20%,rgba(255,255,255,.95) 0 1.5%,transparent 2.6%),
        radial-gradient(circle at 87% 28%,rgba(255,242,201,.95) 0 1.6%,transparent 2.7%),
        radial-gradient(circle at 70% 84%,rgba(255,123,190,.92) 0 1.5%,transparent 2.4%),
        radial-gradient(circle at 27% 92%,rgba(255,221,126,.92) 0 1.4%,transparent 2.3%);
    animation: avatarFxStars 5.3s linear infinite;
}
.avatar-fx--cerberus::after {
    z-index:11;
    inset:-28%;
    border-radius:38%;
    background:
        radial-gradient(ellipse at 15% 33%,rgba(255,181,71,.9) 0 3.8%,transparent 4.2%),
        radial-gradient(ellipse at 10% 40%,rgba(255,71,138,.85) 0 2.4%,transparent 2.8%),
        radial-gradient(ellipse at 87% 22%,rgba(255,162,77,.92) 0 3.2%,transparent 3.8%),
        radial-gradient(ellipse at 91% 31%,rgba(255,71,161,.86) 0 2%,transparent 2.5%),
        radial-gradient(ellipse at 80% 86%,rgba(255,168,69,.9) 0 3.3%,transparent 3.8%),
        radial-gradient(ellipse at 25% 87%,rgba(255,77,152,.84) 0 2.6%,transparent 3%);
    filter: blur(2px);
    animation: avatarFxCerberusTongue 2.2s ease-in-out infinite;
}

/* 15 - Bo Peep: nơ hồng + bèo trắng xanh */
@keyframes avatarFxCharmFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
}
.avatar-fx--bo_peep {
    overflow: visible !important;
}
.avatar-fx--bo_peep .avatar-fx__layer--1 {
    inset:-11%;
    border:6px solid #f7fbff;
    box-shadow:0 0 0 3px rgba(167,217,255,.92),0 8px 18px rgba(92,159,255,.24),inset 0 0 10px rgba(255,255,255,.95);
}
.avatar-fx--bo_peep .avatar-fx__layer--2 {
    inset:-18%;
    background: repeating-conic-gradient(from 0deg,#ffffff 0 11deg,#d7edff 11deg 20deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
    filter: drop-shadow(0 0 8px rgba(159,217,255,.62));
    animation: avatarFxSpin 10s linear infinite;
}
.avatar-fx--bo_peep .avatar-fx__layer--4 {
    inset:-24%;
    border-radius:36%;
    background:
        radial-gradient(circle at 13% 70%,rgba(255,248,233,.95) 0 4.5%,transparent 5%),
        radial-gradient(circle at 18% 74%,rgba(255,227,180,.95) 0 4.2%,transparent 4.8%),
        radial-gradient(circle at 22% 68%,rgba(255,255,255,.96) 0 4.4%,transparent 5%),
        radial-gradient(circle at 16% 79%,rgba(247,207,142,.95) 0 2.8%,transparent 3.3%);
    animation: avatarFxCharmFloat 2.8s ease-in-out infinite;
}
.avatar-fx--bo_peep::before {
    z-index:12;
    left:50%;
    top:-26%;
    width:55%;
    height:28%;
    transform:translateX(-50%);
    border-radius:0;
    background:
        radial-gradient(ellipse at 23% 50%,#ffb8d8 0 34%,transparent 35%),
        radial-gradient(ellipse at 77% 50%,#ffb8d8 0 34%,transparent 35%),
        radial-gradient(circle at 50% 50%,#ff83b7 0 16%,transparent 17%),
        linear-gradient(135deg,transparent 0 41%,#ff8dbd 42% 58%,transparent 59%),
        linear-gradient(225deg,transparent 0 41%,#ff8dbd 42% 58%,transparent 59%);
    filter: drop-shadow(0 3px 4px rgba(255,118,178,.48));
    animation: avatarFxCharmFloat 2.4s ease-in-out infinite;
}
.avatar-fx--bo_peep::after {
    z-index:11;
    inset:-20%;
    background:
        radial-gradient(circle at 9% 64%,#ffffff 0 2.2%,transparent 3%),
        radial-gradient(circle at 5% 71%,#fff5d1 0 2%,transparent 2.8%),
        radial-gradient(circle at 17% 80%,#ffd4e7 0 1.6%,transparent 2.4%),
        radial-gradient(circle at 86% 17%,#ffffff 0 1.4%,transparent 2.2%),
        radial-gradient(circle at 81% 22%,#c4e7ff 0 1.4%,transparent 2.2%);
    animation: avatarFxStars 4.6s linear infinite;
}

/* 16 - Bonsai: khung hoa anh đào */
@keyframes avatarFxBlossomSway {
    0%,100% { transform: rotate(-1.5deg) translateY(0); }
    50% { transform: rotate(1.5deg) translateY(-2px); }
}
.avatar-fx--bonsai {
    overflow: visible !important;
}
.avatar-fx--bonsai .avatar-fx__layer--1 {
    inset:-9%;
    border:3px solid rgba(255,183,224,.96);
    box-shadow:0 0 8px rgba(255,255,255,.75),0 0 24px rgba(255,83,178,.42),inset 0 0 12px rgba(255,183,224,.32);
}
.avatar-fx--bonsai .avatar-fx__layer--2 {
    inset:-27%;
    border-radius:36%;
    background:
        radial-gradient(circle at 17% 12%,#ffd4ec 0 4.4%,transparent 5%),
        radial-gradient(circle at 25% 8%,#ff84c4 0 3.4%,transparent 4%),
        radial-gradient(circle at 31% 14%,#ffe8f5 0 4.1%,transparent 4.7%),
        radial-gradient(circle at 39% 10%,#ffb7dd 0 4.6%,transparent 5.2%),
        radial-gradient(circle at 49% 15%,#fff0f8 0 4.4%,transparent 5%),
        radial-gradient(circle at 59% 8%,#ff86c6 0 3.4%,transparent 4%),
        radial-gradient(circle at 67% 14%,#ffd0e8 0 4.5%,transparent 5.1%),
        radial-gradient(circle at 76% 10%,#ffe3f2 0 4%,transparent 4.6%),
        radial-gradient(circle at 83% 15%,#ff9bcf 0 3.8%,transparent 4.4%),
        linear-gradient(180deg,transparent 0 7%,rgba(130,52,94,.66) 7.6% 8.4%,transparent 9%),
        linear-gradient(160deg,transparent 0 15%,rgba(126,45,96,.54) 15.5% 16.2%,transparent 17%);
    filter: drop-shadow(0 2px 4px rgba(255,130,188,.56));
    animation: avatarFxBlossomSway 3.8s ease-in-out infinite;
}
.avatar-fx--bonsai .avatar-fx__layer--4 {
    inset:-27%;
    border-radius:36%;
    background:
        radial-gradient(circle at 18% 78%,#ffb2da 0 4.8%,transparent 5.4%),
        radial-gradient(circle at 24% 83%,#fff0f8 0 4.2%,transparent 4.8%),
        radial-gradient(circle at 31% 88%,#ff89c4 0 4%,transparent 4.6%),
        radial-gradient(circle at 76% 85%,#ffd8ec 0 4.1%,transparent 4.7%),
        radial-gradient(circle at 84% 79%,#ff8dc6 0 4%,transparent 4.6%),
        linear-gradient(17deg,transparent 0 22%,rgba(143,48,92,.62) 22.5% 23.2%,transparent 24%),
        linear-gradient(-17deg,transparent 0 74%,rgba(143,48,92,.62) 74.5% 75.2%,transparent 76%);
    filter: drop-shadow(0 0 4px rgba(255,112,184,.44));
    animation: avatarFxCharmFloat 3.2s ease-in-out infinite;
}
.avatar-fx--bonsai::before {
    z-index:11;
    inset:-22%;
    background:
        radial-gradient(circle at 21% 29%,rgba(255,255,255,.94) 0 1.2%,transparent 2%),
        radial-gradient(circle at 77% 26%,rgba(255,255,255,.94) 0 1.1%,transparent 1.9%),
        radial-gradient(circle at 64% 93%,rgba(255,214,236,.94) 0 1.3%,transparent 2.1%),
        radial-gradient(circle at 14% 88%,rgba(255,214,236,.94) 0 1.2%,transparent 2%);
    animation: avatarFxStars 6s linear infinite;
}

/* 17 - Ink Petal: nét mực + hoa anh đào */
@keyframes avatarFxInkFlow {
    0%,100% { transform: rotate(0deg) scale(.98); }
    50% { transform: rotate(180deg) scale(1.03); }
}
.avatar-fx--ink_petal {
    overflow: visible !important;
}
.avatar-fx--ink_petal .avatar-fx__layer--1 {
    inset:-12%;
    background: conic-gradient(from 0deg,#120d16,#221220,#ff8fbe,#1b161f,#08070d,#3a223a,#120d16);
    filter: blur(7px);
    opacity:.92;
    animation: avatarFxSpinReverse 5.8s linear infinite;
}
.avatar-fx--ink_petal .avatar-fx__layer--2 {
    inset:-18%;
    border-radius:42%;
    background:
        radial-gradient(ellipse at 20% 24%,rgba(18,16,20,.96) 0 11%,transparent 12%),
        radial-gradient(ellipse at 80% 18%,rgba(24,20,29,.96) 0 12%,transparent 13%),
        radial-gradient(ellipse at 87% 61%,rgba(14,12,16,.95) 0 10%,transparent 11%),
        radial-gradient(ellipse at 32% 86%,rgba(22,18,24,.95) 0 10%,transparent 11%),
        radial-gradient(ellipse at 56% 7%,rgba(255,149,196,.74) 0 4%,transparent 5%),
        radial-gradient(ellipse at 10% 61%,rgba(255,149,196,.74) 0 4.5%,transparent 5.5%);
    filter: drop-shadow(0 0 10px rgba(255,125,187,.46));
    animation: avatarFxInkFlow 4.8s ease-in-out infinite;
}
.avatar-fx--ink_petal .avatar-fx__layer--4 {
    inset:-25%;
    border-radius:38%;
    background:
        radial-gradient(circle at 11% 17%,rgba(255,207,230,.98) 0 2.7%,transparent 3.4%),
        radial-gradient(circle at 17% 21%,rgba(255,140,196,.95) 0 1.9%,transparent 2.6%),
        radial-gradient(circle at 82% 20%,rgba(255,214,236,.98) 0 2.8%,transparent 3.5%),
        radial-gradient(circle at 89% 26%,rgba(255,144,199,.95) 0 2%,transparent 2.7%),
        radial-gradient(circle at 73% 87%,rgba(255,214,236,.98) 0 2.6%,transparent 3.3%),
        radial-gradient(circle at 26% 91%,rgba(255,214,236,.98) 0 2.3%,transparent 3%),
        radial-gradient(circle at 45% 6%,rgba(255,214,236,.92) 0 1.6%,transparent 2.3%);
    animation: avatarFxStars 5.4s linear infinite;
}
.avatar-fx--ink_petal::before {
    z-index:11;
    inset:-24%;
    border-radius:38%;
    background:
        linear-gradient(135deg,transparent 0 18%,rgba(255,128,190,.68) 18.6% 19.2%,transparent 20%),
        linear-gradient(305deg,transparent 0 74%,rgba(255,164,207,.48) 74.8% 75.4%,transparent 76%);
    filter: blur(1px);
    animation: avatarFxCerberusTongue 3.1s ease-in-out infinite;
}

/* 18 - Fallen Wing: đôi cánh tím */
@keyframes avatarFxWingBeat {
    0%,100% { transform: scaleY(1) translateY(0); }
    50% { transform: scaleY(1.03) translateY(-2px); }
}
.avatar-fx--fallen_wing {
    overflow: visible !important;
}
.avatar-fx--fallen_wing .avatar-fx__layer--1 {
    inset:-10%;
    border:2px solid rgba(209,228,255,.95);
    box-shadow:0 0 10px rgba(255,255,255,.92),0 0 28px rgba(159,123,255,.66),inset 0 0 16px rgba(154,215,255,.25);
    animation: avatarFxPulse 2.3s ease-in-out infinite;
}
.avatar-fx--fallen_wing .avatar-fx__layer--2,
.avatar-fx--fallen_wing .avatar-fx__layer--4 {
    inset:-32%;
    border-radius:0;
    background:transparent;
}
.avatar-fx--fallen_wing .avatar-fx__layer--2::before,
.avatar-fx--fallen_wing .avatar-fx__layer--4::before {
    content:"";
    position:absolute;
    top:6%;
    width:48%;
    height:88%;
    background:
        linear-gradient(180deg,#ffffff 0,#d8ddff 12%,#b59cff 34%,#8e72ff 56%,#4d2d78 100%),
        repeating-linear-gradient(180deg,rgba(255,255,255,.7) 0 5%,rgba(255,255,255,0) 5.8% 11%);
    background-blend-mode:screen;
    clip-path: polygon(50% 0,68% 6%,86% 18%,96% 32%,98% 46%,93% 58%,88% 69%,84% 80%,81% 92%,74% 100%,63% 88%,58% 75%,52% 61%,44% 50%,31% 39%,20% 27%,10% 13%,0 0);
    filter: drop-shadow(0 0 10px rgba(219,231,255,.95)) drop-shadow(0 0 16px rgba(138,112,255,.7));
    animation: avatarFxWingBeat 2.7s ease-in-out infinite;
}
.avatar-fx--fallen_wing .avatar-fx__layer--2::before {
    left:-6%;
    transform: scaleX(-1) rotate(-3deg);
    transform-origin:right center;
}
.avatar-fx--fallen_wing .avatar-fx__layer--4::before {
    right:-6%;
    transform: rotate(3deg);
    transform-origin:left center;
}
.avatar-fx--fallen_wing::before {
    z-index:11;
    left:50%;
    top:-20%;
    width:32%;
    height:10%;
    transform:translateX(-50%);
    border-radius:999px;
    background:linear-gradient(90deg,rgba(210,241,255,.2),rgba(255,255,255,.98),rgba(164,208,255,.2));
    box-shadow:0 0 12px rgba(255,255,255,.9),0 0 22px rgba(170,209,255,.55);
    animation: avatarFxPulse 2.4s ease-in-out infinite;
}
.avatar-fx--fallen_wing::after {
    z-index:12;
    inset:-24%;
    background:
        radial-gradient(circle at 17% 14%,rgba(255,255,255,.92) 0 1.5%,transparent 2.4%),
        radial-gradient(circle at 83% 15%,rgba(255,255,255,.92) 0 1.5%,transparent 2.4%),
        radial-gradient(circle at 51% 6%,rgba(224,237,255,.94) 0 1.8%,transparent 2.6%),
        radial-gradient(circle at 8% 56%,rgba(198,219,255,.78) 0 1.4%,transparent 2.2%),
        radial-gradient(circle at 94% 61%,rgba(198,219,255,.78) 0 1.4%,transparent 2.2%);
    animation: avatarFxMoonMeteorTwinkle 3s ease-in-out infinite;
}

/* 19 - Sea Pandora: vòng sóng nước xanh */
@keyframes avatarFxWaveRoll {
    0%,100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.03); }
}
.avatar-fx--sea_pandora {
    overflow: visible !important;
}
.avatar-fx--sea_pandora .avatar-fx__layer--1 {
    inset:-12%;
    background: conic-gradient(from 0deg,#b3f7ff,#2ce4ff,#2e8fff,#0fd6ff,#b7fbff,#2ce4ff);
    filter: blur(8px);
    opacity:.76;
    animation: avatarFxSpin 5s linear infinite;
}
.avatar-fx--sea_pandora .avatar-fx__layer--2 {
    inset:-24%;
    border-radius:38%;
    background:
        radial-gradient(ellipse at 11% 34%,rgba(26,216,255,.96) 0 11%,transparent 12%),
        radial-gradient(ellipse at 18% 27%,rgba(170,245,255,.98) 0 6%,transparent 7%),
        radial-gradient(ellipse at 86% 25%,rgba(37,189,255,.96) 0 12%,transparent 13%),
        radial-gradient(ellipse at 78% 19%,rgba(193,248,255,.98) 0 6%,transparent 7%),
        radial-gradient(ellipse at 84% 73%,rgba(32,170,255,.94) 0 10%,transparent 11%),
        radial-gradient(ellipse at 77% 79%,rgba(197,249,255,.98) 0 5%,transparent 6%),
        radial-gradient(ellipse at 18% 84%,rgba(46,208,255,.95) 0 11%,transparent 12%),
        radial-gradient(ellipse at 26% 90%,rgba(218,253,255,.98) 0 5%,transparent 6%),
        radial-gradient(ellipse at 50% 6%,rgba(34,215,255,.9) 0 8%,transparent 9%);
    filter: drop-shadow(0 0 10px rgba(52,204,255,.68));
    animation: avatarFxWaveRoll 5.8s ease-in-out infinite;
}
.avatar-fx--sea_pandora .avatar-fx__layer--4 {
    inset:-16%;
    border:3px solid rgba(202,248,255,.94);
    box-shadow:0 0 10px rgba(255,255,255,.88),0 0 24px rgba(42,168,255,.72),inset 0 0 12px rgba(122,236,255,.5);
}
.avatar-fx--sea_pandora::before {
    z-index:11;
    inset:-27%;
    border-radius:40%;
    background:
        radial-gradient(circle at 10% 32%,rgba(255,255,255,.95) 0 1.8%,transparent 2.7%),
        radial-gradient(circle at 90% 24%,rgba(255,255,255,.95) 0 1.8%,transparent 2.7%),
        radial-gradient(circle at 82% 76%,rgba(255,255,255,.95) 0 1.8%,transparent 2.7%),
        radial-gradient(circle at 26% 87%,rgba(255,255,255,.95) 0 1.8%,transparent 2.7%),
        radial-gradient(circle at 48% 4%,rgba(255,245,173,.95) 0 1.9%,transparent 2.8%);
    animation: avatarFxStars 5.2s linear infinite;
}
.avatar-fx--sea_pandora::after {
    z-index:12;
    width:14%;
    height:14%;
    right:-4%;
    top:-6%;
    left:auto;
    bottom:auto;
    border-radius:48% 52% 46% 54%;
    background:radial-gradient(circle at 48% 48%,#fff9bc 0 30%,#ffe970 31% 60%,transparent 61%);
    box-shadow:0 0 8px rgba(255,234,112,.75);
    animation: avatarFxMoonMeteorTwinkle 2.6s ease-in-out infinite;
}


/* None */
.avatar-fx--none .avatar-fx__layer,
.avatar-fx--none::before,
.avatar-fx--none::after,
.avatar-fx--none .avatar-shine { display:none !important; }
.avatar-fx--none .profile-avatar {
    animation:none !important;
    box-shadow:0 6px 18px rgba(0,0,0,.25) !important;
}

/* Preview trong admin */
.avatar-effect-preview {
    width:86px;
    height:86px;
    margin:12px auto 10px;
}
.avatar-effect-card {
    position:relative;
    height:100%;
    min-height:170px;
    padding:12px 8px 10px;
    border:2px solid #e5e8ec;
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    text-align:center;
    user-select:none;
}
.avatar-effect-card:hover {
    transform:translateY(-3px);
    border-color:#8abfff;
    box-shadow:0 8px 20px rgba(29,100,190,.14);
}
.avatar-effect-card.is-selected {
    border-color:#0d8bff;
    box-shadow:0 0 0 3px rgba(13,139,255,.13),0 10px 24px rgba(20,91,170,.16);
}
.avatar-effect-card .effect-check {
    position:absolute;
    right:8px;
    top:8px;
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef3f7;
    color:#9aa7b1;
    font-size:12px;
}
.avatar-effect-card.is-selected .effect-check {
    background:#0d8bff;
    color:#fff;
}
.avatar-effect-card .effect-name {
    font-weight:800;
    font-size:13px;
    color:#25344a;
    line-height:1.25;
}
.avatar-effect-card .effect-desc {
    margin-top:4px;
    font-size:11px;
    line-height:1.25;
    color:#7b8793;
}

@media (prefers-reduced-motion: reduce) {
    .avatar-fx *, .avatar-fx::before, .avatar-fx::after {
        animation-duration: 12s !important;
    }
}

/* ============================================================
   v1.2 - FIX TÊN PROFILE BỊ HIỆU ỨNG AVATAR CHE
   - Tên luôn nằm trên toàn bộ hiệu ứng (z-index cao hơn avatar FX)
   - Khi có hiệu ứng, tự chừa khoảng cách bên dưới avatar
   - Hai hiệu ứng mây/trăng chừa rộng hơn vì layer tràn xuống dưới
   ============================================================ */
.profile-head > .avatar-wrapper.avatar-fx {
    position: relative;
    z-index: 1;
}

.profile-head > .avatar-wrapper.avatar-fx:not(.avatar-fx--none) {
    margin-bottom: 42px !important;
}

.profile-head > .avatar-wrapper.avatar-fx--moon_cloud,
.profile-head > .avatar-wrapper.avatar-fx--moon_meteor {
    margin-bottom: 60px !important;
}

.profile-head > .avatar-wrapper.avatar-fx--bo_peep,
.profile-head > .avatar-wrapper.avatar-fx--bonsai {
    margin-bottom: 50px !important;
}

.profile-head > .avatar-wrapper.avatar-fx--none {
    margin-bottom: 18px !important;
}

.profile-head > .profile-name-wrap {
    position: relative !important;
    z-index: 1000 !important;
    isolation: isolate;
    transform: translateZ(0);
}

.profile-head > .profile-name-wrap .profile-name,
.profile-head > .profile-name-wrap .verified-badge {
    position: relative;
    z-index: 1001;
}

/* Làm chữ nổi rõ trên các hiệu ứng sáng/mây mà không tạo nền hộp */
.profile-head > .profile-name-wrap .profile-name {
    text-shadow:
        0 2px 3px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.9),
        0 0 12px rgba(25,201,255,.55) !important;
}

@media (max-width: 480px) {
    .profile-head > .avatar-wrapper.avatar-fx:not(.avatar-fx--none) {
        margin-bottom: 36px !important;
    }
    .profile-head > .avatar-wrapper.avatar-fx--moon_cloud,
    .profile-head > .avatar-wrapper.avatar-fx--moon_meteor {
        margin-bottom: 48px !important;
    }
    .profile-head > .avatar-wrapper.avatar-fx--bo_peep,
    .profile-head > .avatar-wrapper.avatar-fx--bonsai {
        margin-bottom: 42px !important;
    }
}

/* ============================================================
   v1.4 - VIDEO MATCH PACK
   6 hiệu ứng dựng lại theo video mẫu người dùng gửi.
   Dùng SVG riêng nên hiển thị ổn định cả preview admin và profile.
   ============================================================ */
@keyframes fxVideoHover {0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.5%) scale(1.025)}}
@keyframes fxVideoSpinSlow {to{transform:rotate(360deg)}}
@keyframes fxVideoSpinRev {to{transform:rotate(-360deg)}}
@keyframes fxVideoPulse {0%,100%{transform:scale(.98);opacity:.86}50%{transform:scale(1.035);opacity:1}}
@keyframes fxVideoSway {0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-2px)}}
@keyframes fxVideoWing {0%,100%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(1.025) scaleY(.985)}}
@keyframes fxVideoPetal {0%{transform:rotate(0deg) translateY(-2px);opacity:.7}50%{opacity:1}100%{transform:rotate(8deg) translateY(4px);opacity:.75}}
@keyframes fxVideoSea {0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}

/* Reset lớp của 6 mẫu để không phụ thuộc gradient cũ */
.avatar-fx--cerberus .avatar-fx__layer,
.avatar-fx--bo_peep .avatar-fx__layer,
.avatar-fx--bonsai .avatar-fx__layer,
.avatar-fx--ink_petal .avatar-fx__layer,
.avatar-fx--fallen_wing .avatar-fx__layer,
.avatar-fx--sea_pandora .avatar-fx__layer {
    border:0 !important;
    box-shadow:none !important;
    filter:none;
    opacity:1;
    border-radius:0 !important;
    -webkit-mask:none !important;
    mask:none !important;
    background-color:transparent !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
}

.avatar-fx--cerberus::before,.avatar-fx--cerberus::after,
.avatar-fx--bo_peep::before,.avatar-fx--bo_peep::after,
.avatar-fx--bonsai::before,.avatar-fx--bonsai::after,
.avatar-fx--ink_petal::before,.avatar-fx--ink_petal::after,
.avatar-fx--fallen_wing::before,.avatar-fx--fallen_wing::after,
.avatar-fx--sea_pandora::before,.avatar-fx--sea_pandora::after {display:none !important;}

/* Cerberus - vòng lửa hồng/cam quét quanh như video */
.avatar-fx--cerberus .avatar-fx__layer--1{
    inset:-31% !important; z-index:2 !important;
    background-image:url('../imgs/avatar-fx/cerberus_back.svg') !important;
    animation:fxVideoSpinSlow 4.8s linear infinite !important;
}
.avatar-fx--cerberus .avatar-fx__layer--2{
    inset:-19% !important; z-index:3 !important; border-radius:50% !important;
    background:conic-gradient(from 40deg,transparent 0 11%,rgba(255,219,90,.95) 14% 20%,rgba(255,57,136,.95) 22% 35%,transparent 38% 48%,rgba(162,24,207,.92) 51% 63%,rgba(255,103,116,.95) 66% 78%,transparent 81%) !important;
    filter:blur(2px) drop-shadow(0 0 6px #ff3d9c) !important;
    animation:fxVideoSpinRev 2.8s linear infinite !important;
}
.avatar-fx--cerberus .avatar-fx__layer--4{
    inset:-32% !important; z-index:8 !important;
    background-image:url('../imgs/avatar-fx/cerberus_front.svg') !important;
    animation:fxVideoPulse 2.1s ease-in-out infinite !important;
}
.avatar-fx--cerberus .profile-avatar{box-shadow:0 0 0 3px rgba(255,56,141,.85),0 0 18px rgba(255,75,138,.8),0 8px 24px rgba(0,0,0,.35)!important;}

/* Bo Peep - viền ren, nơ hồng và cụm cừu phía trước */
.avatar-fx--bo_peep .avatar-fx__layer--1{
    inset:-30% !important;z-index:2 !important;
    background-image:url('../imgs/avatar-fx/bo_peep_back.svg') !important;
    animation:fxVideoPulse 3.2s ease-in-out infinite !important;
}
.avatar-fx--bo_peep .avatar-fx__layer--4{
    inset:-37% !important;z-index:9 !important;
    background-image:url('../imgs/avatar-fx/bo_peep_front.svg') !important;
    animation:fxVideoHover 2.8s ease-in-out infinite !important;
}
.avatar-fx--bo_peep .profile-avatar{box-shadow:0 0 0 3px #b7eaff,0 0 0 6px #fff,0 8px 22px rgba(68,172,225,.35)!important;}

/* Bonsai - tán hoa anh đào trên đầu, rễ/hoa ôm phần dưới */
.avatar-fx--bonsai .avatar-fx__layer--1{
    inset:-35% !important;z-index:2 !important;
    background-image:url('../imgs/avatar-fx/bonsai_back.svg') !important;
    animation:fxVideoSway 3.4s ease-in-out infinite !important;
}
.avatar-fx--bonsai .avatar-fx__layer--4{
    inset:-35% !important;z-index:8 !important;
    background-image:url('../imgs/avatar-fx/bonsai_front.svg') !important;
    animation:fxVideoPetal 2.8s ease-in-out infinite alternate !important;
}
.avatar-fx--bonsai .profile-avatar{box-shadow:0 0 0 3px #d73693,0 0 16px rgba(255,60,166,.8),0 8px 22px rgba(0,0,0,.34)!important;}

/* Nét Mực Anh Đào - vòng bút mực đen + nét hồng + cánh hoa */
.avatar-fx--ink_petal .avatar-fx__layer--1{
    inset:-27% !important;z-index:2 !important;
    background-image:url('../imgs/avatar-fx/ink_petal_back.svg') !important;
    animation:fxVideoSpinRev 13s linear infinite !important;
}
.avatar-fx--ink_petal .avatar-fx__layer--4{
    inset:-31% !important;z-index:8 !important;
    background-image:url('../imgs/avatar-fx/ink_petal_front.svg') !important;
    animation:fxVideoPetal 2.4s ease-in-out infinite alternate !important;
}
.avatar-fx--ink_petal .profile-avatar{box-shadow:0 0 0 3px rgba(22,17,22,.95),0 0 14px rgba(255,140,180,.52),0 8px 22px rgba(0,0,0,.38)!important;}

/* Thiên Thần Sa Ngã - cánh tím trắng bung hai bên như video */
.avatar-fx--fallen_wing .avatar-fx__layer--1{
    left:-66% !important;right:-66% !important;top:-35% !important;bottom:-43% !important;
    z-index:2 !important;
    background-image:url('../imgs/avatar-fx/fallen_wing_back.svg') !important;
    animation:fxVideoWing 2.2s ease-in-out infinite !important;
    transform-origin:center 55% !important;
}
.avatar-fx--fallen_wing .avatar-fx__layer--4{
    left:-66% !important;right:-66% !important;top:-35% !important;bottom:-43% !important;
    z-index:8 !important;
    background-image:url('../imgs/avatar-fx/fallen_wing_front.svg') !important;
    animation:fxVideoPulse 2.4s ease-in-out infinite !important;
}
.avatar-fx--fallen_wing .profile-avatar{box-shadow:0 0 0 2px rgba(218,211,255,.92),0 0 18px rgba(130,94,235,.7),0 8px 24px rgba(0,0,0,.38)!important;}

/* Biển Pandora - san hô xanh, vòng biển, cá/ánh vàng chuyển động */
.avatar-fx--sea_pandora .avatar-fx__layer--1{
    inset:-40% !important;z-index:2 !important;
    background-image:url('../imgs/avatar-fx/sea_pandora_back.svg') !important;
    animation:fxVideoSea 3.5s ease-in-out infinite !important;
}
.avatar-fx--sea_pandora .avatar-fx__layer--4{
    inset:-40% !important;z-index:8 !important;
    background-image:url('../imgs/avatar-fx/sea_pandora_front.svg') !important;
    animation:fxVideoHover 2.6s ease-in-out infinite !important;
}
.avatar-fx--sea_pandora .profile-avatar{box-shadow:0 0 0 3px rgba(70,224,255,.86),0 0 18px rgba(30,181,255,.82),0 8px 22px rgba(0,0,0,.36)!important;}

/* Preview admin: cho ornament tràn ra nhưng không đè chữ/tên card */
.avatar-effect-card{overflow:visible !important;}
.avatar-effect-card .avatar-effect-preview{position:relative;z-index:1;}
.avatar-effect-card .effect-name,.avatar-effect-card .effect-desc,.avatar-effect-card .effect-check{position:relative;z-index:20;}
.avatar-effect-card .avatar-fx--fallen_wing{margin-top:16px;margin-bottom:15px;}
.avatar-effect-card .avatar-fx--bo_peep,.avatar-effect-card .avatar-fx--bonsai,.avatar-effect-card .avatar-fx--sea_pandora{margin-top:15px;margin-bottom:15px;}

/* Profile thật: các mẫu lớn chừa đúng khoảng để tên luôn rõ và nằm trên FX */
.profile-head > .avatar-wrapper.avatar-fx--cerberus{margin-bottom:50px !important;}
.profile-head > .avatar-wrapper.avatar-fx--ink_petal{margin-bottom:48px !important;}
.profile-head > .avatar-wrapper.avatar-fx--bo_peep{margin-bottom:72px !important;}
.profile-head > .avatar-wrapper.avatar-fx--bonsai{margin-bottom:64px !important;}
.profile-head > .avatar-wrapper.avatar-fx--fallen_wing{margin-bottom:58px !important;}
.profile-head > .avatar-wrapper.avatar-fx--sea_pandora{margin-bottom:64px !important;}
.profile-head > .profile-name-wrap{z-index:2000 !important;}

@media(max-width:480px){
 .profile-head > .avatar-wrapper.avatar-fx--bo_peep{margin-bottom:62px !important;}
 .profile-head > .avatar-wrapper.avatar-fx--bonsai,.profile-head > .avatar-wrapper.avatar-fx--sea_pandora{margin-bottom:56px !important;}
 .profile-head > .avatar-wrapper.avatar-fx--fallen_wing{margin-bottom:50px !important;}
}

/* ============================================================
   v1.6.0 - CSS/SVG STABLE MATCH
   Không dùng ảnh chụp/video frame. 6 mẫu dưới đây chỉ dùng CSS + SVG trong suốt.
   ============================================================ */
@keyframes fxCssSoftPulse {0%,100%{transform:scale(.985);opacity:.88}50%{transform:scale(1.025);opacity:1}}
@keyframes fxCssBowFloat {0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-3px) rotate(.6deg)}}
@keyframes fxCssPetalSway {0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(3px) rotate(2deg)}}
@keyframes fxCssWingBeat {0%,100%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(1.035) scaleY(.985)}}
@keyframes fxCssSeaFloat {0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-3px) rotate(.7deg)}}

/* Giữ avatar đứng yên trong ornament, không bị frame và ảnh lệch nhau. */
.avatar-fx--cerberus .profile-avatar,
.avatar-fx--bo_peep .profile-avatar,
.avatar-fx--bonsai .profile-avatar,
.avatar-fx--ink_petal .profile-avatar,
.avatar-fx--fallen_wing .profile-avatar,
.avatar-fx--sea_pandora .profile-avatar {
    animation: none !important;
    transform: none !important;
    z-index: 5 !important;
}
.avatar-fx--cerberus .avatar-shine,
.avatar-fx--bo_peep .avatar-shine,
.avatar-fx--bonsai .avatar-shine,
.avatar-fx--ink_petal .avatar-shine,
.avatar-fx--fallen_wing .avatar-shine,
.avatar-fx--sea_pandora .avatar-shine { display:none !important; }

/* CERBERUS */
.avatar-fx--cerberus .avatar-fx__layer--1{
    inset:-37% !important;
    background-image:url('../imgs/avatar-fx/cerberus_back.svg') !important;
    animation:fxVideoSpinSlow 5.2s linear infinite !important;
    filter:drop-shadow(0 0 6px rgba(255,57,139,.72)) drop-shadow(0 0 11px rgba(255,142,58,.5)) !important;
}
.avatar-fx--cerberus .avatar-fx__layer--2{
    inset:-13% !important;border-radius:50% !important;
    background:conic-gradient(from 30deg,transparent 0 8%,rgba(255,230,105,.95) 10% 15%,rgba(255,81,144,.9) 18% 27%,transparent 30% 43%,rgba(139,41,219,.9) 46% 58%,rgba(255,80,125,.92) 62% 74%,transparent 77% 100%) !important;
    filter:blur(2px) drop-shadow(0 0 5px #ff3d9c) !important;
    animation:fxVideoSpinRev 3s linear infinite !important;
}
.avatar-fx--cerberus .avatar-fx__layer--4{
    inset:-37% !important;
    background-image:url('../imgs/avatar-fx/cerberus_front.svg') !important;
    animation:fxCssSoftPulse 2.2s ease-in-out infinite !important;
}
.avatar-fx--cerberus .profile-avatar{box-shadow:0 0 0 3px #ff4a9d,0 0 16px rgba(255,73,145,.72),0 7px 20px rgba(0,0,0,.32)!important;}

/* BO PEEP */
.avatar-fx--bo_peep .avatar-fx__layer--1{
    inset:-30% !important;
    background-image:url('../imgs/avatar-fx/bo_peep_back.svg') !important;
    animation:fxCssSoftPulse 3.1s ease-in-out infinite !important;
    filter:drop-shadow(0 0 4px rgba(118,211,255,.48)) !important;
}
.avatar-fx--bo_peep .avatar-fx__layer--4{
    inset:-40% !important;
    background-image:url('../imgs/avatar-fx/bo_peep_front.svg') !important;
    animation:fxCssBowFloat 2.8s ease-in-out infinite !important;
}
.avatar-fx--bo_peep .profile-avatar{box-shadow:0 0 0 3px #74caef,0 0 0 6px #fff,0 7px 20px rgba(0,0,0,.25)!important;}

/* BONSAI */
.avatar-fx--bonsai .avatar-fx__layer--1{
    inset:-40% !important;
    background-image:url('../imgs/avatar-fx/bonsai_back.svg') !important;
    animation:fxCssBowFloat 3.5s ease-in-out infinite !important;
    filter:drop-shadow(0 0 5px rgba(255,84,174,.52)) !important;
}
.avatar-fx--bonsai .avatar-fx__layer--4{
    inset:-40% !important;
    background-image:url('../imgs/avatar-fx/bonsai_front.svg') !important;
    animation:fxCssPetalSway 2.7s ease-in-out infinite !important;
}
.avatar-fx--bonsai .profile-avatar{box-shadow:0 0 0 3px #8b275f,0 0 13px rgba(255,66,165,.58),0 7px 20px rgba(0,0,0,.30)!important;}

/* NÉT MỰC ANH ĐÀO */
.avatar-fx--ink_petal .avatar-fx__layer--1{
    inset:-31% !important;
    background-image:url('../imgs/avatar-fx/ink_petal_back.svg') !important;
    animation:fxVideoSpinRev 18s linear infinite !important;
    filter:drop-shadow(0 0 5px rgba(255,139,180,.35)) !important;
}
.avatar-fx--ink_petal .avatar-fx__layer--4{
    inset:-34% !important;
    background-image:url('../imgs/avatar-fx/ink_petal_front.svg') !important;
    animation:fxCssPetalSway 2.5s ease-in-out infinite !important;
}
.avatar-fx--ink_petal .profile-avatar{box-shadow:0 0 0 3px #171118,0 0 12px rgba(255,134,179,.38),0 7px 20px rgba(0,0,0,.34)!important;}

/* THIÊN THẦN SA NGÃ */
.avatar-fx--fallen_wing .avatar-fx__layer--1{
    left:-88% !important;right:-88% !important;top:-54% !important;bottom:-58% !important;
    background-image:url('../imgs/avatar-fx/fallen_wing_back.svg') !important;
    animation:fxCssWingBeat 2.5s ease-in-out infinite !important;
    transform-origin:center 58% !important;
    filter:drop-shadow(0 0 7px rgba(208,204,255,.65)) !important;
}
.avatar-fx--fallen_wing .avatar-fx__layer--4{
    left:-88% !important;right:-88% !important;top:-54% !important;bottom:-58% !important;
    background-image:url('../imgs/avatar-fx/fallen_wing_front.svg') !important;
    animation:fxCssSoftPulse 2.4s ease-in-out infinite !important;
}
.avatar-fx--fallen_wing .profile-avatar{box-shadow:0 0 0 2px #dcd9ff,0 0 16px rgba(122,93,224,.6),0 7px 20px rgba(0,0,0,.34)!important;}

/* BIỂN PANDORA */
.avatar-fx--sea_pandora .avatar-fx__layer--1{
    inset:-46% !important;
    background-image:url('../imgs/avatar-fx/sea_pandora_back.svg') !important;
    animation:fxCssSeaFloat 3.3s ease-in-out infinite !important;
    filter:drop-shadow(0 0 6px rgba(42,205,255,.62)) !important;
}
.avatar-fx--sea_pandora .avatar-fx__layer--4{
    inset:-46% !important;
    background-image:url('../imgs/avatar-fx/sea_pandora_front.svg') !important;
    animation:fxVideoHover 2.7s ease-in-out infinite !important;
}
.avatar-fx--sea_pandora .profile-avatar{box-shadow:0 0 0 3px #42dcf7,0 0 15px rgba(31,177,255,.64),0 7px 20px rgba(0,0,0,.32)!important;}

/* Preview admin: không lấy ảnh/video làm nền, chỉ avatar + ornament SVG. */
.avatar-effect-card .avatar-fx--cerberus,
.avatar-effect-card .avatar-fx--bo_peep,
.avatar-effect-card .avatar-fx--bonsai,
.avatar-effect-card .avatar-fx--ink_petal,
.avatar-effect-card .avatar-fx--fallen_wing,
.avatar-effect-card .avatar-fx--sea_pandora {
    width:78px !important;height:78px !important;margin:14px auto 18px !important;
}
.avatar-effect-card .avatar-fx--fallen_wing { margin-bottom:22px !important; }
.avatar-effect-card .effect-name,.avatar-effect-card .effect-desc,.avatar-effect-card .effect-check{z-index:50!important;position:relative!important;}

/* Trang profile: chừa khoảng vừa đủ cho ornament và tên luôn nằm rõ phía dưới. */
.profile-head > .avatar-wrapper.avatar-fx--cerberus{margin-bottom:48px !important;}
.profile-head > .avatar-wrapper.avatar-fx--bo_peep{margin-bottom:66px !important;}
.profile-head > .avatar-wrapper.avatar-fx--bonsai{margin-bottom:58px !important;}
.profile-head > .avatar-wrapper.avatar-fx--ink_petal{margin-bottom:46px !important;}
.profile-head > .avatar-wrapper.avatar-fx--fallen_wing{margin-bottom:56px !important;}
.profile-head > .avatar-wrapper.avatar-fx--sea_pandora{margin-bottom:58px !important;}
.profile-head > .profile-name-wrap{position:relative!important;z-index:5000!important;}

@media(max-width:480px){
  .avatar-effect-card .avatar-fx--cerberus,.avatar-effect-card .avatar-fx--bo_peep,.avatar-effect-card .avatar-fx--bonsai,.avatar-effect-card .avatar-fx--ink_petal,.avatar-effect-card .avatar-fx--fallen_wing,.avatar-effect-card .avatar-fx--sea_pandora{width:72px!important;height:72px!important;}
  .profile-head > .avatar-wrapper.avatar-fx--bo_peep{margin-bottom:58px!important;}
  .profile-head > .avatar-wrapper.avatar-fx--bonsai,.profile-head > .avatar-wrapper.avatar-fx--sea_pandora{margin-bottom:52px!important;}
  .profile-head > .avatar-wrapper.avatar-fx--fallen_wing{margin-bottom:50px!important;}
}