/* Viền avatar các ngày lễ — viền thường (.qhf) và viền động (.qhf.qhf-anim). Xem inc/holiday-frames.php */
.qhf{position:relative;display:inline-block;width:var(--qhf-w,96px);aspect-ratio:var(--qhf-r,1);line-height:0;vertical-align:middle;flex:none}
.qhf-av{position:absolute;border-radius:50%;object-fit:cover;background:#E8EEF9;
  width:var(--qhf-d);aspect-ratio:1;left:calc(var(--qhf-cx) - var(--qhf-d)/2);top:calc(var(--qhf-cy) - var(--qhf-d)/2 * var(--qhf-r,1))}
.qhf-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}

/* ---------- Viền động ---------- */
.qhf-anim::after{content:"";position:absolute;inset:6%;pointer-events:none;border-radius:50%;opacity:.9;
  background:
   radial-gradient(circle,var(--qhf-spark) 0 1.6px,transparent 2.6px) 12% 20%/34px 34px,
   radial-gradient(circle,var(--qhf-spark) 0 1.2px,transparent 2.2px) 60% 70%/46px 46px,
   radial-gradient(circle,#fff 0 1px,transparent 2px) 85% 30%/58px 58px;
  animation:qhfTwinkle 2.4s ease-in-out infinite}
@keyframes qhfTwinkle{0%,100%{opacity:.15}50%{opacity:1}}

/* glow: ánh sáng đèn lồng/đèn lễ nhấp nháy */
.qhf-fx-glow .qhf-ring{animation:qhfGlow 2.8s ease-in-out infinite}
@keyframes qhfGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,90,0)) brightness(1)}50%{filter:drop-shadow(0 0 6px var(--qhf-spark)) brightness(1.12)}}

/* float: viền nhấp nhô nhẹ như đang bay */
.qhf-fx-float .qhf-ring{animation:qhfFloat 3.6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes qhfFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5%) rotate(1.2deg)}}
.qhf-fx-float .qhf-av{animation:none}

/* snow: bông tuyết rơi trên viền Giáng Sinh */
.qhf-fx-snow::after{inset:0;border-radius:0;
  background:
   radial-gradient(circle,#fff 0 1.8px,transparent 2.8px) 0 0/30px 36px,
   radial-gradient(circle,#fff 0 1.2px,transparent 2.2px) 15px 18px/44px 48px;
  animation:qhfSnow 4s linear infinite;opacity:.9;
  -webkit-mask:radial-gradient(circle at var(--qhf-cx) var(--qhf-cy),transparent calc(var(--qhf-d)/2 - 1%),#000 calc(var(--qhf-d)/2));mask:radial-gradient(circle at var(--qhf-cx) var(--qhf-cy),transparent calc(var(--qhf-d)/2 - 1%),#000 calc(var(--qhf-d)/2))}
@keyframes qhfSnow{to{background-position:6px 36px,21px 66px}}
.qhf-fx-snow .qhf-ring{animation:qhfGlow 3.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){.qhf-anim::after,.qhf-anim .qhf-ring{animation:none!important}}

/* ====================================================================================
   Viền động v2 — TOÀN BỘ chi tiết viền chuyển động + hiệu ứng riêng cho từng viền.
   Ảnh avatar đứng yên; viền (.qhf-ring) chuyển động, ::before = vệt sáng quét đúng theo hình viền (mask),
   ::after = hạt hiệu ứng (cánh hoa / tim / tuyết / đom đóm...) trôi quanh viền.
   ==================================================================================== */
.qhf-anim .qhf-ring{will-change:transform,filter;transform-origin:50% 50%}
.qhf-anim::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) -150% 0/250% 100% no-repeat;
  -webkit-mask:var(--qhf-img) center/100% 100% no-repeat;mask:var(--qhf-img) center/100% 100% no-repeat;
  animation:qhfShine 3.6s ease-in-out infinite}
@keyframes qhfShine{0%,35%{background-position:-150% 0}75%,100%{background-position:150% 0}}
.qhf-anim::after{z-index:3;inset:0;border-radius:0;opacity:1;
  -webkit-mask:radial-gradient(circle var(--qhf-w) at var(--qhf-cx) var(--qhf-cy),transparent calc(var(--qhf-d)*.5),#000 calc(var(--qhf-d)*.5 + 1%));
  mask:radial-gradient(circle var(--qhf-w) at var(--qhf-cx) var(--qhf-cy),transparent calc(var(--qhf-d)*.5),#000 calc(var(--qhf-d)*.5 + 1%))}
.qhf-fx-snow::after{-webkit-mask:inherit;mask:inherit}

/* Hạt trôi: --qhf-spark là màu hạt; mỗi viền chọn hướng + tốc độ riêng */
.qhf-anim[data-frame]::after{
  background:
   radial-gradient(circle,var(--qhf-spark) 0 2.2px,transparent 3.2px) 8% 0/38px 44px,
   radial-gradient(circle,#fff 0 1.4px,transparent 2.4px) 40% 0/52px 58px,
   radial-gradient(circle,var(--qhf-spark) 0 1.6px,transparent 2.6px) 75% 0/46px 50px;
  animation:qhfFall 5s linear infinite}
@keyframes qhfFall{to{background-position:8% 44px,40% 58px,75% 50px}}
@keyframes qhfRise{from{background-position:8% 44px,40% 58px,75% 50px}to{background-position:8% 0,40% 0,75% 0}}

/* --- Tết: đèn lồng đung đưa + lấp lánh vàng + hạt vàng rơi --- */
.qhf-anim[data-frame="tet"] .qhf-ring{transform-origin:50% 8%;animation:qhfSway 3.2s ease-in-out infinite,qhfGlow 2.8s ease-in-out infinite}
@keyframes qhfSway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}

/* --- Valentine: viền đập như nhịp tim + tim hồng bay lên --- */
.qhf-anim[data-frame="valentine"] .qhf-ring{animation:qhfBeat 1.6s ease-in-out infinite}
@keyframes qhfBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.045)}28%{transform:scale(1)}42%{transform:scale(1.03)}56%{transform:scale(1)}}
.qhf-anim[data-frame="valentine"]::after{animation:qhfRise 4.2s linear infinite}

/* --- Trung Thu: ánh trăng/đèn lồng nhấp nháy, thở nhẹ + đom đóm sáng --- */
.qhf-anim[data-frame="trungthu"] .qhf-ring{animation:qhfBreath 4s ease-in-out infinite,qhfGlow 2.4s ease-in-out infinite}
@keyframes qhfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.qhf-anim[data-frame="trungthu"]::after{animation:qhfRise 7s linear infinite}

/* --- Giáng Sinh: đèn nháy + tuyết rơi --- */
.qhf-anim[data-frame="giangsinh"] .qhf-ring{animation:qhfBlink 1.8s steps(2,end) infinite,qhfSway 5s ease-in-out infinite;transform-origin:50% 12%}
@keyframes qhfBlink{0%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.18) saturate(1.25) drop-shadow(0 0 5px var(--qhf-spark))}}

/* --- Quốc khánh 2/9: sao vàng lấp lánh, ánh sáng quét nhanh --- */
.qhf-anim[data-frame="quockhanh"]::before{animation-duration:2.4s}
.qhf-anim[data-frame="quockhanh"] .qhf-ring{animation:qhfBreath 3s ease-in-out infinite,qhfGlow 2s ease-in-out infinite}
.qhf-anim[data-frame="quockhanh"]::after{animation:qhfRise 6s linear infinite}

/* --- Vu Lan: sen nhẹ nhàng trôi, ánh sáng dịu + cánh hoa rơi chậm --- */
.qhf-anim[data-frame="vulan"] .qhf-ring{animation:qhfFloat 5s ease-in-out infinite,qhfGlow 4s ease-in-out infinite}
.qhf-anim[data-frame="vulan"]::after{animation:qhfFall 9s linear infinite}

/* --- Halloween: lửa bập bùng + tàn lửa bay lên --- */
.qhf-anim[data-frame="halloween"] .qhf-ring{animation:qhfFlicker 1.3s linear infinite}
@keyframes qhfFlicker{0%,100%{filter:brightness(1)}8%{filter:brightness(1.25) drop-shadow(0 0 6px var(--qhf-spark))}16%{filter:brightness(.92)}30%{filter:brightness(1.18) drop-shadow(0 0 8px var(--qhf-spark))}44%{filter:brightness(.95)}62%{filter:brightness(1.22) drop-shadow(0 0 6px var(--qhf-spark))}80%{filter:brightness(1)}}
.qhf-anim[data-frame="halloween"]::after{animation:qhfRise 3.2s linear infinite}

/* --- Phụ nữ: viền nhấp nhô duyên dáng + cánh hoa hồng rơi --- */
.qhf-anim[data-frame="phunu"] .qhf-ring{animation:qhfFloat 3.4s ease-in-out infinite,qhfGlow 3s ease-in-out infinite}
.qhf-anim[data-frame="phunu"]::after{animation:qhfFall 5.5s linear infinite}

/* --- Xuân: hoa đào/mai đung đưa theo gió + cánh hoa rơi --- */
.qhf-anim[data-frame="xuan"] .qhf-ring{transform-origin:50% 10%;animation:qhfSway 4s ease-in-out infinite,qhfGlow 3.2s ease-in-out infinite}
.qhf-anim[data-frame="xuan"]::after{animation:qhfFall 6s linear infinite}

@media (prefers-reduced-motion:reduce){.qhf-anim::before,.qhf-anim::after,.qhf-anim .qhf-ring{animation:none!important}}