/* Progress bar trên đầu trang */
#progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2));width:0%;z-index:9999;transition:width .1s linear}


/* AVATAR */
.avatar-wrap{
  position:relative;display:flex;justify-content:center;align-items:center;
  width:420px;height:420px;margin:0 auto;
}
.avatar-img{
  width:340px;height:340px;
  object-fit:cover;object-position:top center;
  border-radius:50%;
  position:relative;z-index:2;
  border:3px solid rgba(201,168,76,.5);
  filter:brightness(1.05) contrast(1.02);
  animation:float 6s ease-in-out infinite;
  transition:filter .4s;
}
.avatar-wrap:hover .avatar-img{filter:brightness(1.12) contrast(1.05)}
.avatar-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(201,168,76,.25);
  animation:ringPulse 3.5s ease-in-out infinite;
}
.avatar-ring-2{
  inset:-20px;border-color:rgba(201,168,76,.12);
  animation:ringPulse 3.5s ease-in-out infinite .8s;
}
@keyframes ringPulse{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.04);opacity:1}
}
.avatar-badge{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  background:rgba(10,22,40,.88);
  backdrop-filter:blur(12px);
  border:1px solid rgba(201,168,76,.3);
  color:var(--gold-2);
  font-size:.8rem;letter-spacing:.08em;
  padding:.55rem 1.2rem;border-radius:2rem;
  display:flex;align-items:center;gap:.5rem;
  white-space:nowrap;z-index:3;
  animation:float 6s ease-in-out infinite .5s;
}
.avatar-badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:#4caf7d;
  box-shadow:0 0 6px #4caf7d;
  animation:blink 2s infinite;
}


/* CURSOR SPOTLIGHT METALLIC */
#spotlight{position:fixed;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen}


/* METALLIC HOVER RESPONSE */
.metal-lit{
  background-image: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(201,168,76, calc(var(--mi,0) * 0.13)) 0%,
    rgba(201,168,76, calc(var(--mi,0) * 0.06)) 40%,
    transparent 70%
  );
  border-color: rgba(201,168,76, calc(0.1 + var(--mi,0) * 0.5));
  transition: border-color .15s, background-image .15s;
}
.svc-card.metal-lit, .skill-chip.metal-lit{
  background-image: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(201,168,76, calc(var(--mi,0) * 0.11)) 0%,
    rgba(14,30,55,1) 60%
  );
}


/* ===== SCALE ON HOVER (subtle, không gây overflow grid) ===== */
.btn-gold,
.btn-outline,
.skill-chip,
.svc-card,
.cert-card {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              background .3s, border-color .3s;
}
.btn-gold:hover,
.btn-outline:hover { transform: scale(1.05); }
.skill-chip:hover,
.svc-card:hover,
.cert-card:hover  { transform: scale(1.05); z-index: 2; }


/* LOADING SCREEN */
#loader{
  position:fixed;inset:0;z-index:99999;
  background:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.5rem;
  transition:opacity .6s var(--ease),visibility .6s;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-logo{
  font-family:'Lora',Georgia,serif;
  font-size:4rem;font-weight:400;color:var(--gold);
  letter-spacing:.08em;
  animation:loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse{0%,100%{opacity:.4;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}
.loader-bar{
  width:160px;height:1px;background:rgba(201,168,76,.2);
  position:relative;overflow:hidden;
}
.loader-bar::after{
  content:'';position:absolute;left:-100%;top:0;height:100%;width:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:loaderSlide 1.2s ease-in-out infinite;
}
@keyframes loaderSlide{to{left:200%}}
.loader-text{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}

/* THEME TOGGLE */
#theme-toggle{
  position:fixed;top:50%;right:1.5rem;transform:translateY(-50%);
  z-index:600;
  width:36px;height:36px;border-radius:50%;
  background:rgba(10,22,40,.8);
  border:1px solid rgba(201,168,76,.3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;
  backdrop-filter:blur(8px);
  transition:all .3s var(--ease);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
#theme-toggle:hover{border-color:var(--gold);transform:translateY(-50%) scale(1.15)}


/* BACK TO TOP */
#back-top{
  position:fixed;bottom:7rem;right:1.5rem;z-index:9000;
  width:44px;height:44px;
  background:var(--gold);color:var(--navy);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:all .35s var(--ease);
  box-shadow:0 4px 15px rgba(201,168,76,.35);
}
#back-top:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 20px rgba(201,168,76,.5)}
#back-top.show{opacity:1;visibility:visible;transform:translateY(0)}

/* ZALO WIDGET */
#zalo-widget{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:9001;
  display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;
}
.zalo-btn{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,#0068ff,#0044cc);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;
  box-shadow:0 4px 16px rgba(0,104,255,.4);
  transition:transform .3s var(--ease),box-shadow .3s;
  animation:zaloFloat 3s ease-in-out infinite;
}
@keyframes zaloFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.zalo-btn:hover{transform:scale(1.15);box-shadow:0 8px 24px rgba(0,104,255,.55)}
.zalo-btn svg{width:28px;height:28px;fill:white}
.zalo-tooltip{
  background:rgba(10,22,40,.95);backdrop-filter:blur(8px);
  border:1px solid rgba(201,168,76,.2);
  padding:.5rem 1rem;
  font-size:.78rem;color:var(--text-1);
  white-space:nowrap;
  opacity:0;transform:translateX(8px);
  transition:all .3s var(--ease);
  pointer-events:none;
}
#zalo-widget:hover .zalo-tooltip{opacity:1;transform:translateX(0)}

/* ===== DARK MODE HOVER ===== */
.skill-chip:hover{
  background:var(--navy-4);
  border-color:var(--gold);
}
.skill-chip:hover .sc-name{ color:var(--white) }
.skill-chip:hover .sc-desc{ color:var(--text-1) }
.skill-chip:hover .sc-icon{ filter:brightness(1.3) }

/* ===== LIGHT MODE - tất cả card ===== */
body.light .skill-chip{
  background:#dfd9cc;
  border-color:rgba(168,115,42,.25);
}
body.light .skill-chip:hover{
  background:#c9a35a;
  border-color:var(--gold);
}
body.light .skill-chip:hover .sc-name{ color:#fff }
body.light .skill-chip:hover .sc-desc{ color:rgba(255,255,255,.85) }

body.light .svc-card{
  background:#e2ddd2;
  border-color:rgba(168,115,42,.2);
}
body.light .svc-card:hover{
  background:#b8872e;
  border-color:var(--gold);
}
body.light .svc-card:hover .svc-title{ color:#fff }
body.light .svc-card:hover .svc-desc{ color:rgba(255,255,255,.85) }
body.light .svc-card:hover .proj-bullets li{ color:rgba(255,255,255,.85) }
body.light .svc-card:hover .stag{ color:#fff; border-color:rgba(255,255,255,.4) }

body.light .cert-card{
  background:#e2ddd2;
  border-color:rgba(168,115,42,.2);
}
body.light .cert-card:hover{
  background:#b8872e;
  border-color:var(--gold);
}
body.light .cert-card:hover .cert-name{ color:#fff }
body.light .cert-card:hover .cert-org{ color:rgba(255,255,255,.8) }

body.light .proj-card:hover{
  background:#b8872e;
  border-color:var(--gold);
}
body.light .proj-card:hover .proj-title{ color:#fff }
body.light .proj-card:hover .proj-bullets li{ color:rgba(255,255,255,.85) }
body.light .proj-card:hover .proj-tag{ color:#fff; border-color:rgba(255,255,255,.35) }
body.light .proj-card:hover .proj-result-num{ color:#fff }
body.light .proj-card:hover .proj-result-label{ color:rgba(255,255,255,.8) }

body.light .testi-card:hover{
  background:#b8872e;
}
body.light .testi-card:hover .testi-text{ color:#fff }
body.light .testi-card:hover .testi-name{ color:#fff }
body.light .testi-card:hover .testi-role{ color:rgba(255,255,255,.8) }

body.light .blog-card:hover{
  background:#b8872e;
}
body.light .blog-card:hover .blog-title{ color:#fff }
body.light .blog-card:hover .blog-excerpt{ color:rgba(255,255,255,.8) }
body.light .blog-card:hover .blog-cat{ color:#fff; opacity:.8 }

/* metal-lit override cho light mode */
body.light .metal-lit{
  background-image: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(168,115,42, calc(var(--mi,0) * 0.18)) 0%,
    transparent 70%
  );
  border-color: rgba(168,115,42, calc(0.2 + var(--mi,0) * 0.6));
}
body.light .svc-card.metal-lit, body.light .skill-chip.metal-lit{
  background-image: radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    rgba(168,115,42, calc(var(--mi,0) * 0.15)) 0%,
    rgba(220,214,204,1) 65%
  );
}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:rgba(201,168,76,.3);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}