/* Vozer circular frames: light orbits the rim. Photo stays still. Wrap does not grow. */

@keyframes qk-frame-spin {
    to { transform: rotate(360deg); }
}

.avatar-frame-wrap {
    --qk-frame-radius: 50%;
    --qk-frame-thick: 1.45px;
    --qk-frame-a: #c4b5fd;
    --qk-frame-b: #a78bfa;
    --qk-frame-c: #e2e8f0;
    --qk-frame-line: rgba(226, 232, 240, .42);
    --qk-frame-glow: rgba(167, 139, 250, .18);
    --qk-frame-orbit: 7.2s;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    isolation: isolate;
    overflow: visible;
    box-sizing: border-box;
    border-radius: 50%;
    line-height: 0;
}

.avatar-frame-wrap img {
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    box-shadow: none;
}

.avatar-frame-ring {
    display: none;
}

.has-frame {
    box-sizing: border-box;
    padding: 0 !important;
    overflow: visible;
    box-shadow: 0 0 0 1px var(--qk-frame-line), 0 0 5px var(--qk-frame-glow);
}

.has-frame .avatar-frame-ring {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: inherit;
    padding: var(--qk-frame-thick);
    transform-origin: center center;
    background: conic-gradient(
        from 0deg,
        var(--qk-frame-line) 0deg 268deg,
        var(--qk-frame-a) 292deg,
        #fff 314deg,
        var(--qk-frame-b) 334deg,
        var(--qk-frame-line) 352deg 360deg
    );
    -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, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: qk-frame-spin var(--qk-frame-orbit) linear infinite;
}

/* White L-caps at 4 diagonals, pulled onto the circle (not the square box). */
.has-frame.frame-monthly-1::before,
.has-frame.frame-overall-1::before,
.has-frame.frame-monthly-2::before,
.has-frame.frame-overall-2::before,
.has-frame.frame-monthly-3::before,
.has-frame.frame-overall-3::before {
    --qk-cap: 20%;
    --qk-cap-w: 1.5px;
    --qk-cap-inset: calc(14.65% - 2.75px);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border: 0;
    border-radius: 0;
    transform: none !important;
    filter: drop-shadow(0 0 3px var(--qk-frame-c));
    background:
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top var(--qk-cap-inset) left var(--qk-cap-inset) / var(--qk-cap) var(--qk-cap-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top var(--qk-cap-inset) left var(--qk-cap-inset) / var(--qk-cap-w) var(--qk-cap) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top var(--qk-cap-inset) right var(--qk-cap-inset) / var(--qk-cap) var(--qk-cap-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) top var(--qk-cap-inset) right var(--qk-cap-inset) / var(--qk-cap-w) var(--qk-cap) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom var(--qk-cap-inset) left var(--qk-cap-inset) / var(--qk-cap) var(--qk-cap-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom var(--qk-cap-inset) left var(--qk-cap-inset) / var(--qk-cap-w) var(--qk-cap) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom var(--qk-cap-inset) right var(--qk-cap-inset) / var(--qk-cap) var(--qk-cap-w) no-repeat,
        linear-gradient(var(--qk-frame-c), var(--qk-frame-c)) bottom var(--qk-cap-inset) right var(--qk-cap-inset) / var(--qk-cap-w) var(--qk-cap) no-repeat;
}

.frame-monthly-1,
.frame-overall-1 {
    --qk-frame-thick: 1.7px;
    --qk-frame-orbit: 4.8s;
}

.frame-monthly-1 {
    --qk-frame-a: #db2777;
    --qk-frame-b: #f97316;
    --qk-frame-c: #fde68a;
    --qk-frame-line: rgba(251, 146, 60, .86);
    --qk-frame-glow: rgba(244, 114, 182, .42);
}

.frame-overall-1 {
    --qk-frame-a: #fbbf24;
    --qk-frame-b: #dc2626;
    --qk-frame-c: #fef3c7;
    --qk-frame-line: rgba(251, 191, 36, .88);
    --qk-frame-glow: rgba(220, 38, 38, .4);
}

.frame-monthly-1,
.frame-overall-1 {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--qk-frame-c) 70%, transparent),
        0 0 8px var(--qk-frame-glow);
}

.has-frame.frame-monthly-1::before,
.has-frame.frame-overall-1::before {
    --qk-cap: 20%;
    --qk-cap-w: 1.75px;
    --qk-cap-inset: calc(14.65% - 3px);
    filter: drop-shadow(0 0 5px var(--qk-frame-c));
}

.frame-monthly-1 .avatar-frame-ring,
.frame-overall-1 .avatar-frame-ring {
    background: conic-gradient(
        from 0deg,
        var(--qk-frame-line) 0deg 12deg,
        var(--qk-frame-a) 24deg,
        #fff 36deg,
        var(--qk-frame-b) 48deg,
        var(--qk-frame-line) 62deg 132deg,
        var(--qk-frame-a) 144deg,
        #fff 156deg,
        var(--qk-frame-b) 168deg,
        var(--qk-frame-line) 182deg 252deg,
        var(--qk-frame-a) 264deg,
        #fff 276deg,
        var(--qk-frame-b) 288deg,
        var(--qk-frame-line) 302deg 360deg
    );
}

.frame-monthly-2,
.frame-overall-2 {
    --qk-frame-thick: 1.5px;
    --qk-frame-orbit: 5.4s;
}

.has-frame.frame-monthly-2::before,
.has-frame.frame-overall-2::before {
    --qk-cap: 16%;
    --qk-cap-w: 1.45px;
    --qk-cap-inset: calc(14.65% - 2.5px);
}

.frame-monthly-2 {
    --qk-frame-a: #4338ca;
    --qk-frame-b: #22d3ee;
    --qk-frame-c: #e0f2fe;
    --qk-frame-line: rgba(56, 189, 248, .92);
    --qk-frame-glow: rgba(34, 211, 238, .32);
}

.frame-overall-2 {
    --qk-frame-a: #f472b6;
    --qk-frame-b: #fde68a;
    --qk-frame-c: #fae8ff;
    --qk-frame-line: rgba(244, 114, 182, .92);
    --qk-frame-glow: rgba(253, 224, 138, .28);
}

.frame-monthly-2,
.frame-overall-2 {
    box-shadow:
        0 0 0 1px var(--qk-frame-line),
        0 0 6px var(--qk-frame-glow);
}

.has-frame.frame-monthly-2 .avatar-frame-ring,
.has-frame.frame-overall-2 .avatar-frame-ring {
    background: conic-gradient(
        from 0deg,
        var(--qk-frame-line) 0deg 10deg,
        var(--qk-frame-a) 16deg,
        #fff 21deg,
        var(--qk-frame-b) 28deg,
        var(--qk-frame-line) 38deg 190deg,
        var(--qk-frame-a) 196deg,
        #fff 201deg,
        var(--qk-frame-b) 208deg,
        var(--qk-frame-line) 218deg 360deg
    );
}

.frame-monthly-3,
.frame-overall-3 {
    --qk-frame-thick: 1.35px;
    --qk-frame-orbit: 6.8s;
}

.has-frame.frame-monthly-3::before,
.has-frame.frame-overall-3::before {
    --qk-cap: 14%;
    --qk-cap-w: 1.25px;
    --qk-cap-inset: calc(14.65% - 2.25px);
}

.frame-monthly-3 {
    --qk-frame-a: #a78bfa;
    --qk-frame-b: #f472b6;
    --qk-frame-c: #e9d5ff;
    --qk-frame-line: rgba(167, 139, 250, .9);
    --qk-frame-glow: rgba(244, 114, 182, .2);
}

.frame-overall-3 {
    --qk-frame-a: #22d3ee;
    --qk-frame-b: #67e8f9;
    --qk-frame-c: #a5f3fc;
    --qk-frame-line: rgba(34, 211, 238, .9);
    --qk-frame-glow: rgba(103, 232, 249, .2);
}

.has-frame.frame-monthly-3 .avatar-frame-ring,
.has-frame.frame-overall-3 .avatar-frame-ring {
    background: conic-gradient(
        from 0deg,
        var(--qk-frame-line) 0deg 10deg,
        var(--qk-frame-a) 16deg,
        #fff 21deg,
        var(--qk-frame-b) 28deg,
        var(--qk-frame-line) 38deg 360deg
    );
}

.has-frame[class*="frame-realm-"] {
    --qk-frame-thick: 1.25px;
    --qk-frame-orbit: 9s;
}

.has-frame[class*="frame-realm-"] .avatar-frame-ring {
    background: conic-gradient(
        from 0deg,
        var(--qk-frame-line) 0deg 12deg,
        var(--qk-frame-a) 20deg,
        #fff 28deg,
        var(--qk-frame-b) 38deg,
        var(--qk-frame-line) 52deg 360deg
    );
}

.frame-realm-nguyen-anh {
    --qk-frame-a: #fbbf24;
    --qk-frame-b: #fb7185;
    --qk-frame-c: #fde68a;
    --qk-frame-line: rgba(245, 158, 11, .74);
    --qk-frame-glow: rgba(251, 191, 36, .22);
}

.frame-realm-hoa-than {
    --qk-frame-a: #fb7185;
    --qk-frame-b: #7c3aed;
    --qk-frame-c: #fecdd3;
    --qk-frame-line: rgba(251, 113, 133, .72);
    --qk-frame-glow: rgba(190, 18, 60, .22);
    --qk-frame-orbit: 8.6s;
}

.frame-realm-luyen-hu {
    --qk-frame-a: #7c3aed;
    --qk-frame-b: #22d3ee;
    --qk-frame-c: #ddd6fe;
    --qk-frame-line: rgba(109, 40, 217, .72);
    --qk-frame-glow: rgba(34, 211, 238, .2);
    --qk-frame-orbit: 8.2s;
}

.frame-realm-hop-the {
    --qk-frame-a: #22d3ee;
    --qk-frame-b: #2563eb;
    --qk-frame-c: #a5f3fc;
    --qk-frame-line: rgba(14, 116, 144, .74);
    --qk-frame-glow: rgba(34, 211, 238, .22);
    --qk-frame-orbit: 7.8s;
}

.frame-realm-dai-thua {
    --qk-frame-a: #a855f7;
    --qk-frame-b: #db2777;
    --qk-frame-c: #e9d5ff;
    --qk-frame-line: rgba(168, 85, 247, .76);
    --qk-frame-glow: rgba(219, 39, 119, .22);
    --qk-frame-orbit: 7.4s;
}

.frame-realm-do-kiep,
.frame-realm-cao-thu {
    --qk-frame-a: #facc15;
    --qk-frame-b: #7c3aed;
    --qk-frame-c: #fef08a;
    --qk-frame-line: rgba(250, 204, 21, .8);
    --qk-frame-glow: rgba(124, 58, 237, .2);
    --qk-frame-orbit: 7s;
}

.frame-vip {
    --qk-frame-a: #7dd3fc;
    --qk-frame-b: #facc15;
    --qk-frame-c: #e0f2fe;
    --qk-frame-line: rgba(56, 189, 248, .82);
    --qk-frame-glow: rgba(250, 204, 21, .24);
    --qk-frame-thick: 1.25px;
    --qk-frame-orbit: 8.4s;
}

.frame-vip .avatar-frame-ring {
    background: conic-gradient(
        from 0deg,
        var(--qk-frame-line) 0deg 14deg,
        var(--qk-frame-a) 22deg,
        #fff 32deg,
        var(--qk-frame-b) 44deg,
        var(--qk-frame-line) 58deg 360deg
    );
}

.qk-frame-lite,
.gmsg-avatar-link.has-frame {
    --qk-frame-thick: 1.15px;
    --qk-frame-orbit: 7.6s;
    border-radius: 50%;
}

.qk-frame-lite.frame-monthly-1,
.qk-frame-lite.frame-overall-1,
.gmsg-avatar-link.frame-monthly-1,
.gmsg-avatar-link.frame-overall-1 {
    --qk-frame-thick: 1.3px;
}

.qk-frame-lite.frame-monthly-1::before,
.qk-frame-lite.frame-overall-1::before,
.gmsg-avatar-link.frame-monthly-1::before,
.gmsg-avatar-link.frame-overall-1::before {
    --qk-cap: 22%;
    --qk-cap-w: 1.35px;
    --qk-cap-inset: calc(14.65% - 2px);
}

.qk-frame-lite.frame-monthly-2,
.qk-frame-lite.frame-overall-2,
.gmsg-avatar-link.frame-monthly-2,
.gmsg-avatar-link.frame-overall-2 {
    --qk-frame-thick: 1.2px;
}

.qk-frame-lite.frame-monthly-3,
.qk-frame-lite.frame-overall-3,
.gmsg-avatar-link.frame-monthly-3,
.gmsg-avatar-link.frame-overall-3,
.qk-frame-lite[class*="frame-realm-"],
.qk-frame-lite.frame-vip,
.gmsg-avatar-link[class*="frame-realm-"],
.gmsg-avatar-link.frame-vip {
    --qk-frame-thick: 1.1px;
}

.qk-frame-lite img,
.gmsg-avatar-link.has-frame img {
    border-radius: 50% !important;
    box-shadow: none;
}

.qk-frame-lite .avatar-frame-ring,
.gmsg-avatar-link.has-frame .avatar-frame-ring {
    border-radius: 50%;
}

.gmsg-avatar-link.has-frame {
    overflow: visible !important;
}

.avatar-frame-wrap.user-show-avatar {
    --qk-frame-radius: 13px;
    --qk-frame-thick: 2px;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    box-sizing: border-box;
    border-radius: 13px;
    overflow: hidden;
}

.avatar-frame-wrap.user-show-avatar.has-frame {
    box-sizing: border-box;
    overflow: hidden;
}

.avatar-frame-wrap.user-show-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(13px - var(--qk-frame-thick));
}

.avatar-frame-wrap.user-show-avatar .avatar-frame-ring {
    border-radius: inherit;
    animation: none !important;
}

.user-show-avatar.has-frame.frame-monthly-1::before,
.user-show-avatar.has-frame.frame-overall-1::before,
.user-show-avatar.has-frame.frame-monthly-2::before,
.user-show-avatar.has-frame.frame-overall-2::before,
.user-show-avatar.has-frame.frame-monthly-3::before,
.user-show-avatar.has-frame.frame-overall-3::before {
    --qk-cap: 16px;
    --qk-cap-w: 2.5px;
    --qk-cap-inset: 0px;
}

.user-show-avatar.frame-monthly-1,
.user-show-avatar.frame-overall-1 {
    --qk-frame-thick: 2.2px;
}

.user-show-avatar.frame-monthly-2,
.user-show-avatar.frame-overall-2 {
    --qk-frame-thick: 1.85px;
}

.user-show-avatar.frame-monthly-3,
.user-show-avatar.frame-overall-3,
.user-show-avatar[class*="frame-realm-"],
.user-show-avatar.frame-vip {
    --qk-frame-thick: 1.7px;
}

.vz-user__media:has(.user-show-avatar) {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.vz-user__media:has(.user-show-avatar)::after {
    display: none;
}

.lb-avatar {
    overflow: visible;
}

.lb-avatar .avatar-frame-wrap {
    padding: 0 !important;
}

.lb-avatar .has-frame img,
.kim-thanh-bang-page .lb-avatar .has-frame img {
    border: 0 !important;
    box-shadow: none !important;
}

.vz-discussion-avatar > .avatar-frame-wrap.has-frame {
    padding: 0 !important;
    box-shadow: 0 0 0 1px var(--qk-frame-line), 0 0 4px var(--qk-frame-glow) !important;
}

.vz-discussion-avatar .avatar-frame-ring,
#comments-lazy .vz-discussion-avatar .avatar-frame-ring {
    z-index: 3 !important;
}

.has-frame:not(.user-show-avatar) .avatar-frame-ring {
    animation: qk-frame-spin var(--qk-frame-orbit) linear infinite !important;
}

@media (max-width: 768px) {
    .frame-monthly-1,
    .frame-overall-1 {
        --qk-frame-orbit: 5.6s;
    }

    .frame-monthly-2,
    .frame-overall-2 {
        --qk-frame-orbit: 6.2s;
    }

    .frame-monthly-3,
    .frame-overall-3 {
        --qk-frame-orbit: 7.4s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .has-frame .avatar-frame-ring {
        animation: none !important;
    }
}