/* =====================================================================
   frames.css — Kiểu khung thẻ (cs-*), khung avatar (af-*), kiểu nút link (ls-*),
   avatar lục giác và gradient cho tên.
   Dùng chung cho index.html và settings.html (ảnh xem trước nhỏ),
   nên mọi bộ chọn đều có tiền tố riêng, không đụng giao diện khác.
   ===================================================================== */

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes cs-spin {
  to {
    --angle: 360deg;
  }
}

/* ---------- Lớp trang trí phủ lên thẻ ---------- */
.card-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
}
.card-frame > span {
  position: absolute;
  display: block;
}
.card-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Viền vẽ bằng mask: chỉ phần viền hiện màu */
.cf-border {
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  -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);
}

/* 1. Neon phát sáng */
.cs-neon {
  border: 2px solid var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.9), 0 0 22px rgba(var(--accent-rgb), 0.55),
    0 0 60px rgba(var(--accent-rgb), 0.25), inset 0 0 22px rgba(var(--accent-rgb), 0.22);
  animation: cs-neon 5s linear infinite;
}
@keyframes cs-neon {
  0%,
  45%,
  51%,
  100% {
    border-color: var(--accent);
  }
  47%,
  49% {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.35);
  }
}

/* 2. Viền cầu vồng chạy */
.cs-rainbow {
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 26px rgba(255, 120, 200, 0.2);
}
.cs-rainbow .cf-border {
  inset: -3px;
  padding: 3px;
  background: linear-gradient(90deg, #ff5f6d, #ffc371, #fff86b, #6bff9e, #5ee7ff, #8a7dff, #ff7ad9, #ff5f6d);
  background-size: 200% 100%;
  animation: cs-run 3s linear infinite;
}
@keyframes cs-run {
  to {
    background-position: 200% 0;
  }
}

/* 3. Viền gradient xoay */
.cs-gradient-spin {
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(var(--accent-rgb), 0.25);
}
.cs-gradient-spin .cf-border {
  inset: -3px;
  padding: 3px;
  background: conic-gradient(from var(--angle), var(--accent), var(--accent2), transparent 38%, var(--accent), var(--accent2) 78%, var(--accent));
  animation: cs-spin 3.5s linear infinite;
}

/* 4. Viền nét đứt anime */
.cs-anime-dashed {
  border: 2px dashed rgba(var(--accent-rgb), 0.9);
  outline: 2px dashed var(--accent2);
  outline-offset: 6px;
}
.cf-spark {
  width: 26px;
  height: 26px;
  color: var(--accent2);
  filter: drop-shadow(0 0 6px currentColor);
  animation: cs-twinkle 2.4s ease-in-out infinite;
}
.cf-spark.s1 {
  top: -18px;
  left: -16px;
}
.cf-spark.s2 {
  top: 22%;
  right: -18px;
  width: 18px;
  height: 18px;
  color: var(--accent);
  animation-delay: 0.8s;
}
.cf-spark.s3 {
  bottom: -18px;
  left: 30%;
  width: 20px;
  height: 20px;
  animation-delay: 1.6s;
}
@keyframes cs-twinkle {
  0%,
  100% {
    transform: scale(0.7) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1) rotate(45deg);
    opacity: 1;
  }
}

/* 5. Khung pixel / retro (góc khuyết kiểu 8-bit) */
.cs-pixel {
  border: 0;
  border-radius: 0 !important;
  box-shadow: 0 -4px 0 0 var(--accent), 0 4px 0 0 var(--accent), -4px 0 0 0 var(--accent), 4px 0 0 0 var(--accent),
    10px 10px 0 2px rgba(0, 0, 0, 0.55);
}

/* 6. Khung góc cyber */
.cs-cyber {
  border-radius: 4px;
  border-color: rgba(var(--accent-rgb), 0.25);
  background-image: linear-gradient(rgba(var(--accent-rgb), 0.05) 1px, transparent 1px);
  background-size: 100% 4px;
}
.cf-corner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--accent);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.8));
}
.cf-corner.tl {
  top: -6px;
  left: -6px;
  border-right: 0;
  border-bottom: 0;
}
.cf-corner.tr {
  top: -6px;
  right: -6px;
  border-left: 0;
  border-bottom: 0;
  border-color: var(--accent2);
}
.cf-corner.bl {
  bottom: -6px;
  left: -6px;
  border-right: 0;
  border-top: 0;
  border-color: var(--accent2);
}
.cf-corner.br {
  bottom: -6px;
  right: -6px;
  border-left: 0;
  border-top: 0;
}
.cf-scan {
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  opacity: 0.55;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: cs-scan 4s linear infinite;
}
@keyframes cs-scan {
  to {
    top: 100%;
  }
}

/* 7. Viền lửa */
.cs-fire {
  border-color: transparent;
  animation: cs-fire-glow 1.6s ease-in-out infinite alternate;
}
@keyframes cs-fire-glow {
  from {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 90, 0, 0.45), 0 -6px 26px rgba(255, 170, 0, 0.22);
  }
  to {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 32px rgba(255, 60, 0, 0.65), 0 -12px 40px rgba(255, 200, 0, 0.32);
  }
}
.cs-fire .cf-border {
  inset: -3px;
  padding: 3px;
  background: linear-gradient(0deg, #ff2d00, #ff8a00, #ffd000, #ff8a00, #ff2d00);
  background-size: 100% 300%;
  animation: cs-fire-run 1.4s linear infinite;
}
@keyframes cs-fire-run {
  to {
    background-position: 0 150%;
  }
}
.cf-ember {
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb300;
  box-shadow: 0 0 8px #ff6a00, 0 0 14px #ff3d00;
  opacity: 0;
  animation: cs-ember 2.6s ease-in infinite;
}
.cf-ember.e1 {
  left: 10%;
}
.cf-ember.e2 {
  left: 26%;
  animation-delay: 0.7s;
}
.cf-ember.e3 {
  left: 44%;
  width: 4px;
  height: 4px;
  animation-delay: 1.3s;
}
.cf-ember.e4 {
  left: 60%;
  animation-delay: 0.4s;
}
.cf-ember.e5 {
  left: 78%;
  width: 5px;
  height: 5px;
  animation-delay: 1.8s;
}
.cf-ember.e6 {
  left: 92%;
  animation-delay: 1.1s;
}
@keyframes cs-ember {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate(10px, -120px) scale(0.3);
    opacity: 0;
  }
}

/* 8. Viền tuyết / băng */
.cs-ice {
  border-color: transparent;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.09), transparent 42%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 26px rgba(160, 230, 255, 0.35), inset 0 0 30px rgba(200, 240, 255, 0.12);
}
.cs-ice .cf-border {
  background: linear-gradient(120deg, #e6fbff, #8fd8ff, #ffffff, #7cc7ff, #e6fbff);
  background-size: 300% 100%;
  animation: cs-ice-run 6s linear infinite;
}
@keyframes cs-ice-run {
  to {
    background-position: 150% 0;
  }
}
.cf-flake {
  width: 24px;
  height: 24px;
  color: #e6fbff;
  filter: drop-shadow(0 0 6px #9fe8ff);
  animation: cs-rotate 7s linear infinite;
}
.cf-flake.f1 {
  top: -12px;
  left: 12%;
}
.cf-flake.f2 {
  top: -9px;
  right: 16%;
  width: 16px;
  height: 16px;
  animation-duration: 9s;
}
.cf-flake.f3 {
  bottom: -11px;
  right: 8%;
  width: 20px;
  height: 20px;
  animation-direction: reverse;
}
@keyframes cs-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* 9. Khung hoa / dễ thương */
.cs-cute {
  border: 3px solid rgba(var(--accent-rgb), 0.75);
  border-radius: max(var(--card-radius, 20px), 28px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(var(--accent-rgb), 0.12);
}
.cf-flower {
  width: 34px;
  height: 34px;
  color: var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.cf-flower.tl {
  top: -14px;
  left: -12px;
  transform: rotate(-15deg);
}
.cf-flower.tr {
  top: -12px;
  right: -12px;
  width: 26px;
  height: 26px;
  color: var(--accent2);
}
.cf-flower.bl {
  bottom: -12px;
  left: -10px;
  width: 24px;
  height: 24px;
  color: var(--accent2);
}
.cf-flower.br {
  bottom: -14px;
  right: -12px;
  transform: rotate(20deg);
}
.cf-bow {
  top: -18px;
  left: 50%;
  width: 56px;
  height: 32px;
  margin-left: -28px;
  color: var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* 10. Viền vẽ tay */
.cs-sketch {
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35);
}
.cf-sketch {
  inset: -6px -3px -4px -5px;
  border: 1.5px solid var(--accent);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  transform: rotate(-0.8deg);
  opacity: 0.85;
}

/* 11. Trong suốt tối giản */
.cs-minimal {
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* 12. Bóng đổ 3D */
.cs-shadow-3d {
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: min(var(--card-radius, 20px), 14px);
  box-shadow: 8px 8px 0 var(--accent), 16px 16px 0 rgba(var(--accent-rgb), 0.35);
}

/* 13. Giấy dán (có băng dính 2 góc) */
.cs-paper {
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.12);
  transform: rotate(-0.6deg);
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 28px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cf-tape {
  top: -12px;
  width: 110px;
  height: 30px;
  background: rgba(255, 238, 196, 0.42);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 0, 4% 15%, 0 30%, 4% 45%, 0 60%, 4% 75%, 0 90%, 3% 100%, 100% 100%, 96% 85%, 100% 70%, 96% 55%, 100% 40%, 96% 25%, 100% 10%, 97% 0);
}
.cf-tape.t1 {
  left: -24px;
  transform: rotate(-32deg);
}
.cf-tape.t2 {
  right: -24px;
  transform: rotate(32deg);
}

/* ---------- Avatar lục giác ---------- */
.avatar-wrap.shape-hexagon {
  border-radius: 0;
}
.shape-hexagon .avatar-frame,
.shape-hexagon .avatar {
  border-radius: 0;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.shape-hexagon.has-border .avatar-frame {
  padding: 3px;
  background: var(--accent);
  box-shadow: none;
}

/* ---------- Khung avatar (avatar.frame) ---------- */
.af-ear,
.af-crown,
.af-wing,
.af-halo {
  position: absolute;
  display: block;
  pointer-events: none;
}
.af-ear svg,
.af-crown svg,
.af-wing svg {
  display: block;
  width: 100%;
  height: 100%;
}
.avf-glow .avatar-frame {
  box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent), 0 0 42px rgba(var(--accent-rgb), 0.6) !important;
}
.avf-glow.shape-hexagon {
  filter: drop-shadow(0 0 12px var(--accent));
}
/* Viền xoay: một lớp gradient nằm SAU avatar, lớn hơn 6px => thành vòng theo đúng hình dạng */
.avf-spin {
  isolation: isolate;
}
.avf-spin::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--angle), var(--accent), var(--accent2), transparent 55%, var(--accent));
  animation: cs-spin 2.2s linear infinite;
}
.avf-spin.shape-hexagon::after {
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.af-ear {
  top: -13%;
  width: 40%;
  height: 40%;
  color: var(--accent);
}
.af-ear.l {
  left: 2%;
  transform: rotate(-16deg);
}
.af-ear.r {
  right: 2%;
  transform: scaleX(-1) rotate(-16deg);
}
.af-crown {
  top: -30%;
  left: -6%;
  width: 56%;
  height: 40%;
  color: var(--accent);
  transform: rotate(-22deg);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
  z-index: 3;
}
.af-wing {
  top: 6%;
  width: 72%;
  height: 72%;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.5));
}
.af-wing.l {
  left: -58%;
  transform-origin: 100% 55%;
  animation: af-flap-l 2.6s ease-in-out infinite;
}
.af-wing.r {
  right: -58%;
  transform-origin: 0 55%;
  animation: af-flap-r 2.6s ease-in-out infinite;
}
@keyframes af-flap-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-9deg);
  }
}
@keyframes af-flap-r {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(9deg);
  }
}
.af-halo {
  top: -17%;
  left: 20%;
  width: 60%;
  height: 17%;
  border: 4px solid #ffe27a;
  border-radius: 50%;
  box-shadow: 0 0 12px #ffe27a, inset 0 0 8px #ffe27a;
  z-index: 3;
  animation: af-halo 3s ease-in-out infinite;
}
@keyframes af-halo {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ---------- Kiểu nút link (socials.buttonStyle) ---------- */
.social-label {
  display: none;
}
.ls-icon-circle .social,
.ls-icon-square .social {
  width: calc(var(--social-size, 36px) * 1.55);
  height: calc(var(--social-size, 36px) * 1.55);
  padding: calc(var(--social-size, 36px) * 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  transition: background 0.2s, border-color 0.2s;
}
.ls-icon-square .social {
  border-radius: 12px;
}
.ls-pill .social,
.ls-long .social {
  width: auto;
  height: auto;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  transition: background 0.2s, border-color 0.2s;
}
.ls-pill .social svg,
.ls-pill .social .social-img,
.ls-long .social svg,
.ls-long .social .social-img {
  width: calc(var(--social-size, 36px) * 0.62);
  height: calc(var(--social-size, 36px) * 0.62);
  flex: none;
}
.ls-pill .social-label,
.ls-long .social-label {
  display: inline;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.socials.ls-long {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 10px;
}
.ls-long .social {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
}
.ls-long .social-label {
  flex: 1;
  text-align: center;
  margin-right: calc(var(--social-size, 36px) * 0.62);
}
.ls-icon-circle .social:hover,
.ls-icon-square .social:hover,
.ls-pill .social:hover,
.ls-long .social:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.16);
}

/* ---------- Gradient cho tên (username.gradient) ----------
   :where() => độ ưu tiên 0, các hiệu ứng chữ (cầu vồng, neon...) vẫn đè được */
:where(.u-text.has-gradient) {
  background-image: var(--u-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Hiệu ứng wave: mỗi ký tự lấy đúng đoạn gradient của mình */
.has-gradient .fx-wave-ch {
  background-image: var(--u-fill);
  background-size: calc(var(--n, 1) * 100%) 100%;
  background-position: calc(var(--i, 0) / max(1, var(--n, 1) - 1) * 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .card-frame *,
  .af-wing,
  .af-halo,
  .avf-spin::after {
    animation: none !important;
  }
}