/* Phần còn lại đa số đã chuyển sang Tailwind utility trong index.php.
   File này chỉ giữ những thứ phức tạp / không tiện viết bằng utility class. */

html { background: #07070b; color-scheme: dark; }
body { background: transparent !important; }
body::before {
    content: ""; position: fixed; inset: 0; z-index: -3;
    background:
        radial-gradient(ellipse 60% 50% at 20% 0%,  rgba(124,58,237,.18), transparent 70%),
        radial-gradient(ellipse 50% 50% at 80% 100%, rgba(6,182,212,.14), transparent 70%),
        #07070b;
}

/* Hai blob nhỏ animate transform để GPU lo, blur radius vừa phải.
   Không dùng position animation, không dùng filter blur lớn. */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
    content: ""; position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    will-change: transform;
    transform: translate3d(0,0,0);
}
.aurora::before {
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(124,58,237,.35) 0%, transparent 65%);
    animation: floatA 24s ease-in-out infinite;
}
.aurora::after {
    bottom: -180px; right: -140px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(6,182,212,.28) 0%, transparent 65%);
    animation: floatB 30s ease-in-out infinite;
}
@keyframes floatA {
    0%,100% { transform: translate3d(0,0,0); }
    50%     { transform: translate3d(40px,60px,0); }
}
@keyframes floatB {
    0%,100% { transform: translate3d(0,0,0); }
    50%     { transform: translate3d(-50px,-40px,0); }
}

/* Grid overlay tĩnh, mask radial — không animate */
.grid-overlay {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
}

/* Particles nhẹ, ít, animation transform-only */
.particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.particles i {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    will-change: transform, opacity;
    animation: drift linear infinite;
}
.particles i:nth-child(1) { left: 12%; bottom: -10px; animation-duration: 28s; animation-delay: 0s;  }
.particles i:nth-child(2) { left: 32%; bottom: -10px; animation-duration: 34s; animation-delay: 6s;  background: #a78bfa; }
.particles i:nth-child(3) { left: 50%; bottom: -10px; animation-duration: 30s; animation-delay: 12s; background: #22d3ee; }
.particles i:nth-child(4) { left: 68%; bottom: -10px; animation-duration: 26s; animation-delay: 4s;  }
.particles i:nth-child(5) { left: 82%; bottom: -10px; animation-duration: 32s; animation-delay: 9s;  background: #ec4899; }
.particles i:nth-child(6) { left: 92%; bottom: -10px; animation-duration: 36s; animation-delay: 15s; }

@keyframes drift {
    0%   { opacity: 0;  transform: translate3d(0, 0, 0); }
    10%  { opacity: .7; }
    90%  { opacity: .7; }
    100% { opacity: 0;  transform: translate3d(0, -110vh, 0); }
}

/* Hairline gradient border bằng kỹ thuật mask */
.gradient-border { position: relative; }
.gradient-border::before {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(167,139,250,.35), transparent 40%, transparent 60%, rgba(34,211,238,.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .55;
}

/* Gradient text */
.text-grad {
    background: linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Custom select arrow */
.select-arrow { -webkit-appearance: none; appearance: none; }
.select-wrap { position: relative; }
.select-wrap::after {
    content: ""; position: absolute;
    top: 50%; right: 16px;
    width: 9px; height: 9px;
    border-right: 1.5px solid #a1a1aa;
    border-bottom: 1.5px solid #a1a1aa;
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}
select option { background: #15151d; color: #e5e5e5; }

/* Email item: thanh accent bên trái khi hover */
.email-item { position: relative; }
.email-item::before {
    content: ""; position: absolute;
    left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, #a78bfa, #22d3ee);
    opacity: 0;
    transition: opacity .15s;
}
.email-item:hover::before { opacity: 1; }

/* Loading spin */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.is-loading svg { animation: spin-slow 1s linear infinite; }

/* Live dot */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.live-dot::before {
    content: ""; display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px #22d3ee;
    margin-right: 6px;
    animation: blink 1.5s ease-in-out infinite;
}

/* Bob */
@keyframes bob {
    0%,100% { transform: translate3d(0,0,0); }
    50%     { transform: translate3d(0,-6px,0); }
}
.animate-bob { animation: bob 4s ease-in-out infinite; will-change: transform; }

/* Iframe email body */
.mail-frame {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 30px -10px rgba(0,0,0,.5);
    min-height: 500px;
}

/* Empty icon glow tĩnh */
.empty-glow { position: relative; }
.empty-glow::after {
    content: ""; position: absolute; inset: -8px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(34,211,238,.18));
    filter: blur(16px);
    opacity: .35;
    z-index: -1;
}

/* Tôn trọng người không thích motion */
@media (prefers-reduced-motion: reduce) {
    .aurora::before, .aurora::after,
    .particles i,
    .animate-bob,
    .live-dot::before { animation: none !important; }
}