/* ============================================================
 * card.css — thẻ hồ sơ chính (tên, badge, bio, hobbies, stat,
 * avatar, danh sách mạng xã hội) + responsive dưới 760px.
 * ============================================================ */
.card{position:relative;z-index:1;width:min(1080px,100%);margin:clamp(8px,4vh,40px) auto 12px;
  background:linear-gradient(150deg,rgba(13,18,32,.86),rgba(6,9,17,.78));
  border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 110px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.02);
  display:grid;grid-template-columns:1.9fr .65fr;overflow:hidden;isolation:isolate;
  opacity:0;transform:translateY(18px);animation:cardIn .8s var(--ease) .05s forwards}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}

/* The entire profile + contact area is one interactive surface.  The ambient
   glow keeps using :before, so the moving border is deliberately placed on
   :after to avoid competing pseudo-elements. */
.card-tilt:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--ring-angle),
    transparent 0 74%,
    rgba(122,168,255,.7) 83%,
    rgba(143,227,234,.95) 90%,
    rgba(231,201,138,.6) 96%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.34;transition:opacity .45s var(--ease);animation:ringSpin 6.5s linear infinite}
.card-tilt:hover:after,.card-tilt.is-tilting:after{opacity:.9}
.card-tilt.is-tilting{transition:transform .16s ease-out}

.card-main{position:relative;padding:clamp(1.5rem,3.6vw,2.8rem);display:flex;flex-direction:column;gap:clamp(.9rem,2.2vh,1.5rem)}
.card-side{position:relative;padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;align-items:stretch;gap:.28rem;
  background:linear-gradient(180deg,rgba(122,168,255,.05),rgba(15,23,42,.2) 55%,rgba(231,201,138,.02))}
.card-main>*,.card-side>*{position:relative;z-index:1}

/* ambient drifting glow — slow, subtle breathing light instead of a cursor-tracked spotlight */
.card:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px circle at 50% 50%,rgba(122,168,255,.09),transparent 60%),
    linear-gradient(120deg,rgba(122,168,255,.05),transparent 35%,rgba(231,201,138,.02));
  background-size:170% 170%,100% 100%;
  background-position:18% 12%,0 0;
  animation:ambientDrift 17s ease-in-out infinite alternate}
@keyframes ambientDrift{
  0%{background-position:18% 12%,0 0}
  100%{background-position:72% 68%,0 0}
}

/* staggered entrance for every direct child marked [data-in] */
[data-in]{opacity:0;transform:translateY(10px);animation:itemIn .6s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms + .15s)}
@keyframes itemIn{to{opacity:1;transform:translateY(0)}}

.name{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.15;margin:0;letter-spacing:-.05em;
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.32em;row-gap:.15em;
  background:linear-gradient(100deg,#fff 15%,#bcd4ff 55%,#8fe3ea 80%,#fff 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.name .alias{display:inline-block;font-size:.42em;font-weight:600;letter-spacing:0;line-height:1.3;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#9fe3ea;-webkit-text-fill-color:#9fe3ea;opacity:.88;
  animation:aliasDrift 4.5s ease-in-out infinite}
@keyframes aliasDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.subline{margin:.35rem 0 0;color:var(--muted);font-size:.92rem}.subline b{color:#e4ecff;font-weight:600}

.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.1rem}
.badge{position:relative;overflow:hidden;font-size:.68rem;padding:.42rem .68rem;border-radius:999px;border:1px solid rgba(122,168,255,.18);color:#c6d8ff;
  background:linear-gradient(135deg,rgba(122,168,255,.08),rgba(143,227,234,.03));font-family:var(--mono);white-space:nowrap;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.badge:hover{transform:translateY(-3px);border-color:rgba(122,168,255,.5);box-shadow:0 10px 22px rgba(59,95,217,.16)}
.badge:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);
  transition:left .55s var(--ease)}
.badge:hover:after{left:130%}

.section-label{font-family:var(--mono);font-size:.66rem;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase;margin:.4rem 0 -.1rem}
.bio{max-width:600px;color:#c3cce0;font-size:.92rem;line-height:1.65;margin:0}

.hobby-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:-.15rem}
.hobby-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;color:#c3cce0;padding:.32rem .6rem;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.hobby-chip:hover{transform:translateY(-2px);border-color:var(--line-bright)}
.hobby-chip .ic{font-size:.82rem;line-height:1}

.stat-table{margin-top:auto;padding-top:.4rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.015);flex-shrink:0}
.stat-row{display:grid;grid-template-columns:1fr 1fr}
.stat-row+.stat-row{border-top:1px solid var(--line)}
.stat-cell{padding:clamp(.85rem,2vh,1.3rem) 1rem;transition:background .25s var(--ease),transform .25s var(--ease)}
.stat-cell:hover{background:rgba(122,168,255,.04);transform:translateY(-1px)}
.stat-cell+.stat-cell{border-left:1px solid var(--line)}
.stat-k{display:block;font-family:var(--mono);font-size:.62rem;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.35rem}
.stat-v{font-size:.92rem;color:#e9effb;font-weight:600}

.connect-banner{position:relative;z-index:0;min-height:132px;overflow:hidden;border:1px solid rgba(148,196,255,.2);border-radius:14px;
  background-color:#0b1325;
  background-image:radial-gradient(130% 120% at 5% 8%,rgba(122,168,255,.54),transparent 48%),radial-gradient(80% 100% at 100% 100%,rgba(143,227,234,.19),transparent 58%),linear-gradient(135deg,#142b54 0%,#0c1830 50%,#090f1e 100%);
  background-position:center;background-size:cover;box-shadow:inset 0 -38px 40px rgba(4,7,14,.52)}
.connect-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 25%,transparent 65%,rgba(143,227,234,.08));opacity:.55}
.avatar-wrap{position:relative;z-index:2;width:88px;height:88px;align-self:flex-start;margin:-22px 0 0 .7rem}
.avatar-wrap:before{content:"";position:absolute;inset:-11px;border-radius:24px;pointer-events:none;
  background:radial-gradient(circle,rgba(122,168,255,.42) 0%,rgba(86,157,255,.17) 42%,rgba(86,157,255,0) 72%);
  filter:blur(3px);animation:connectAvatarGlow 5.8s ease-in-out infinite}
.avatar-wrap:after{display:none}
@keyframes connectAvatarGlow{0%,100%{opacity:.34;transform:scale(.9)}50%{opacity:.88;transform:scale(1.08)}}
canvas#avatar-particles{display:none}
.avatar{position:relative;z-index:1;width:88px;height:88px;border-radius:20px;
  background:radial-gradient(circle at 30% 25%,#c8dfff 0%,#5f8ce0 28%,#233a72 58%,#0a1225 100%);
  border:1px solid rgba(191,219,254,.55);box-shadow:0 0 0 4px rgba(122,168,255,.05),0 14px 28px rgba(0,0,0,.35);
  transform:none;animation:none;transition:box-shadow .5s var(--ease);
  background-size:cover;background-position:center}
.avatar-wrap:hover .avatar{transform:none}
.side-label{font-family:var(--display);font-size:.84rem;font-weight:600;color:#e0e9fb;margin:.02rem 0 0;padding-left:.08rem}

.social-row{width:100%;display:grid;grid-template-columns:1fr;gap:.32rem;margin-top:0}
.social-pill{position:relative;width:100%;height:36px;padding:0 10px 0 14px;border-radius:11px;display:flex;align-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.02);color:#c9d3e7;text-decoration:none;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);font-size:.74rem}
.social-pill:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(var(--blue),var(--cyan));transform:scaleY(0);transition:transform .3s var(--ease)}
.social-pill:hover:before{transform:scaleY(1)}
.social-pill:after{content:"↗";margin-left:auto;color:var(--dim);font-size:.85rem;transition:color .25s var(--ease),transform .25s var(--ease)}
.social-pill:hover{transform:translateX(5px);border-color:var(--line-bright);
  background:linear-gradient(90deg,rgba(122,168,255,.09),rgba(255,255,255,.02));box-shadow:0 12px 24px rgba(0,0,0,.16);color:#fff}
.social-pill:hover:after{color:var(--cyan);transform:translate(2px,-2px)}
.social-pill svg{width:14px;height:14px;margin-right:8px;color:var(--blue);transition:color .25s var(--ease),transform .25s var(--ease)}
.social-pill:hover svg{color:var(--cyan);transform:scale(1.12)}

.side-foot{margin-top:auto;font-size:.62rem;color:var(--dim);text-align:center;line-height:1.45;padding-top:.4rem;
  border-top:1px solid rgba(148,163,184,.08);width:100%}

@media(max-width:760px){
  body{padding:14px}
  .card{margin:8px auto;grid-template-columns:1fr;border-radius:20px}
  .card-main{padding:1.6rem 1.3rem}
  .card-side{padding:1rem 1.3rem 1.5rem}
  .connect-banner{min-height:136px}
  .avatar-wrap{width:92px;height:92px;margin-top:-23px}
  .avatar{width:92px;height:92px}
  .name{font-size:2.1rem}
  .stat-row{grid-template-columns:1fr}
  .stat-cell+.stat-cell{border-left:none;border-top:1px solid var(--line)}
}