/* ============================================================
   NTXV - PREMIUM ENHANCEMENT LAYER  (loaded last, overrides)
   Triết lý: chuyển một thiết kế "quá nhiều hiệu ứng / rất AI"
   thành thứ tĩnh tại, cao cấp & có chủ đích.
   - Tiết chế glow/shimmer thừa
   - Thêm chiều sâu điện ảnh (film grain + spotlight)
   - Tinh chỉnh typography (đòn bẩy "premium" lớn nhất)
   - Nâng cấp chuyển động: vật lý hơn, mượt hơn, ít "bounce"
   ============================================================ */

:root{
  --nx-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --nx-ease-io:cubic-bezier(0.65, 0, 0.35, 1);
  --nx-spring: cubic-bezier(0.34, 1.32, 0.5, 1);
  --nx-violet: #8b5cf6;
  --nx-grape:  #7c3aed;
  --nx-fuchsia:#d946ef;
}

/* ---------- 1. Render polish ---------- */
html{ scroll-behavior:smooth; }
body, body *:not(svg):not(path){ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{ text-rendering:optimizeLegibility; }

::selection{ background:rgba(168,85,247,.30); color:#fff; }

/* refined, slimmer scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--nx-grape), var(--nx-fuchsia));
  border-radius:20px; border:3px solid rgba(6,5,15,.9);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#8b5cf6,#ec4899); }

/* ---------- 2. Typography rhythm ---------- */
/* Tightening tracking on display type is the single biggest "premium" lever */
h1, h2, h3, .section-title, #hero-title, .gradient-text{
  letter-spacing:-.022em !important;
  line-height:1.1 !important;
}
#hero-title{ letter-spacing:-.038em !important; line-height:1.04 !important; }
.section-title{ letter-spacing:-.025em !important; }
p, li{ letter-spacing:.004em; }

/* ---------- 3. Tiết chế glow (làm ánh sáng có chủ đích) ---------- */
.text-glow.active, .light-reactive.active{
  text-shadow:0 0 14px rgba(168,85,247,.16) !important;
}
/* shimmer chậm & nhẹ -> đọc như "sheen" cao cấp, không chớp liên tục */
.section-title::after{ animation-duration:6s !important; height:2px !important; }
.gradient-text{ animation-duration:9s !important; }

/* ---------- 4. Motion: bớt bounce, mượt & vật lý hơn ---------- */
a, button{ transition-timing-function:var(--nx-ease); }

.btn-primary{
  background:linear-gradient(135deg,#7c3aed 0%, #a855f7 52%, #d946ef 100%) !important;
  letter-spacing:.01em !important;
  transition:transform .5s var(--nx-ease), box-shadow .5s var(--nx-ease), filter .4s ease !important;
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.015) !important;
  box-shadow:0 12px 34px rgba(124,58,237,.42), 0 2px 10px rgba(217,70,239,.28) !important;
  filter:saturate(1.05);
}
.btn-outline{
  transition:transform .5s var(--nx-ease), border-color .4s ease, background .4s ease, color .4s ease !important;
}
.btn-outline:hover{
  transform:translateY(-2px) scale(1.01) !important;
  box-shadow:0 8px 22px rgba(124,58,237,.20) !important;
}

/* cards: nâng nhẹ thay vì phóng to giật -> sang hơn */
.card-glow{ transition:transform .55s var(--nx-ease), box-shadow .55s var(--nx-ease), border-color .4s ease !important; }
.card-glow:hover{ transform:translateY(-5px) scale(1.018) !important; }
.dl-card, .project-card, .stat-card{
  transition:transform .5s var(--nx-ease), box-shadow .5s var(--nx-ease), border-color .4s ease !important;
}
.dl-card:hover, .stat-card:hover{ transform:translateY(-6px) !important; }
.project-card:hover{ transform:translateY(-6px) scale(1.01) !important; }
.dl-card:hover, .project-card:hover, .stat-card:hover{
  box-shadow:0 22px 50px rgba(17,8,46,.55), 0 0 0 1px rgba(168,85,247,.18) !important;
}

/* ---------- 5. Film grain (chiều sâu điện ảnh, xoá cảm giác "phẳng AI") ---------- */
#nx-grain{
  position:fixed; inset:-50%; z-index:99999990; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:nxGrain 8s steps(8) infinite;
}
@keyframes nxGrain{
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)} 20%{transform:translate(-8%,3%)}
  30%{transform:translate(3%,-8%)} 40%{transform:translate(-3%,7%)} 50%{transform:translate(-8%,4%)}
  60%{transform:translate(6%,0)} 70%{transform:translate(0,6%)} 80%{transform:translate(4%,-3%)}
  90%{transform:translate(-4%,3%)} 100%{transform:translate(0,0)}
}

/* ---------- 6. Hero spotlight theo con trỏ (điểm nhấn sáng tạo) ---------- */
#home{ position:relative; }
#nx-hero-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(360px circle at var(--nx-x,50%) var(--nx-y,35%),
            rgba(168,85,247,.16), rgba(124,58,237,.06) 40%, transparent 68%);
}
#home:hover #nx-hero-spot{ opacity:1; }
#home > *{ position:relative; z-index:1; }

/* ---------- 7. Scroll-reveal (tiêu đề lướt vào mượt) ---------- */
.nx-reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--nx-ease), transform .9s var(--nx-ease);
}
.nx-reveal.nx-in{ opacity:1; transform:none; }

/* ---------- 8. Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  #nx-grain{ animation:none !important; }
  .nx-reveal{ transition:opacity .4s ease !important; transform:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}



/* ============================================================
   AD BANNER - quảng cáo nhỏ hiện định kỳ (mỗi ~1-2 phút, 15s)
   Nhẹ: chỉ transition CSS + setTimeout. Không vòng lặp.
   ============================================================ */
#ntxvAd{
  position:fixed; left:22px; bottom:22px; z-index:99980;
  width:min(330px, calc(100vw - 32px));
  display:flex; gap:12px; align-items:center;
  padding:12px 34px 12px 12px;
  border-radius:18px;
  background:linear-gradient(150deg, rgba(32,21,64,.96), rgba(15,11,34,.97));
  border:1px solid rgba(168,139,250,.30);
  box-shadow:0 22px 54px rgba(5,3,20,.55), 0 0 0 1px rgba(168,85,247,.10), 0 0 46px rgba(124,58,237,.20);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  transform:translateY(150%) scale(.96); opacity:0; pointer-events:none;
  transition:transform .7s var(--nx-ease), opacity .55s ease;
  overflow:hidden;
}
#ntxvAd.is-show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }

#ntxvAd .nx-ad-thumb{
  flex:0 0 auto; width:58px; height:58px; border-radius:13px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.42); background:rgba(124,58,237,.2);
}
#ntxvAd .nx-ad-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
#ntxvAd .nx-ad-body{ min-width:0; flex:1 1 auto; }
#ntxvAd .nx-ad-tag{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#d8b4fe; font-weight:800;
}
#ntxvAd .nx-ad-title{
  font-size:13.5px; font-weight:800; color:#fff; line-height:1.22; margin:2px 0 7px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#ntxvAd .nx-ad-cta{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:800; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#7c3aed,#d946ef);
  padding:6px 13px; border-radius:999px;
  box-shadow:0 6px 16px rgba(124,58,237,.4);
  transition:transform .35s var(--nx-ease), box-shadow .35s var(--nx-ease);
}
#ntxvAd .nx-ad-cta:hover{ transform:translateY(-1px) scale(1.04); box-shadow:0 10px 22px rgba(217,70,239,.5); }
#ntxvAd .nx-ad-cta svg{ width:13px; height:13px; }
#ntxvAd .nx-ad-close{
  position:absolute; top:9px; right:9px; width:22px; height:22px;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.75);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
#ntxvAd .nx-ad-close:hover{ background:rgba(255,255,255,.20); color:#fff; transform:rotate(90deg); }
#ntxvAd .nx-ad-progress{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg,#7c3aed,#a855f7,#d946ef);
}
#ntxvAd.is-show .nx-ad-progress{ animation:nxAdProg 15s linear forwards; }
@keyframes nxAdProg{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

@media (max-width:520px){
  #ntxvAd{ left:12px; right:12px; bottom:14px; width:auto; }
}
@media (prefers-reduced-motion: reduce){
  #ntxvAd{ transition:opacity .3s ease !important; transform:none !important; }
  #ntxvAd:not(.is-show){ opacity:0 !important; pointer-events:none !important; }
  #ntxvAd .nx-ad-cta:hover, #ntxvAd .nx-ad-close:hover{ transform:none !important; }
}

/* --- FIX: man hinh "Dang khoi dong" chi hien loading, an het thu khac --- */
#loadingScreen{ z-index:2147483647 !important; }
body.intro-loading{ overflow:hidden !important; }
body.intro-loading > *:not(#loadingScreen){
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  animation:none !important;
}
/* an cac widget co dinh du chung nam long trong vung khac */
body.intro-loading #nx-grain,
body.intro-loading .cursor-glow,
body.intro-loading .cursor-dot,
body.intro-loading #vipCursorOuter,
body.intro-loading #vipMusicPlayer,
body.intro-loading #ntxvAd,
body.intro-loading #payNowContainer,
body.intro-loading .pnBox,
body.intro-loading .cmbBox{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ============================================================
   NTXV - PERFORMANCE LAYER (sieu muot / chong drop FPS)
   Nap sau cung, co the go bo an toan. KHONG doi giao dien tinh.
   ============================================================ */

/* 1) Bo qua viec dung hinh cac section ngoai man hinh -> moi khung hinh chi ve
   vung dang xem, giam manh chi phi blur / backdrop-filter / box-shadow / animation. */
#about, #skills, #projects, #boost, #freefire, #contact, .decor-showcase{
  content-visibility:auto;
  contain-intrinsic-size:auto 1200px;
}

/* 2) Khi dang cuon: tam dung animation trang tri (chay lai ngay khi ngung cuon). */
body.nx-scrolling .animate-float,
body.nx-scrolling .marquee-track,
body.nx-scrolling .gradient-text,
body.nx-scrolling .section-title::after,
body.nx-scrolling .vip-orb,
body.nx-scrolling .hero-badge,
body.nx-scrolling .hero-badge-dot,
body.nx-scrolling [class*="glow"],
body.nx-scrolling [class*="shimmer"],
body.nx-scrolling [class*="pulse"],
body.nx-scrolling #nx-grain{
  animation-play-state:paused !important;
}

/* 3) Goi y hop thanh GPU cho vai lop nen lon */
#nx-grain, .hero-bg-vip, .decor-carousel-track{ will-change:transform; }


/* ============================================================
   NTXV - CHU TRANG 100% (doi het chu xam -> trang)
   ============================================================ */
.text-gray-300,
.text-gray-400,
.text-gray-300.text-glow,
.text-gray-400.text-glow{
  color:#ffffff !important;
}
/* giu trang ke ca khi hover */
.hover\:text-white:hover,
.text-gray-300:hover,
.text-gray-400:hover{
  color:#ffffff !important;
}


/* ============================================================
   NTXV - THE LIEN HE: doi chu mo (rgba) -> trang dac 100%
   ============================================================ */
.contact-card-name,
.contact-card-val,
.contact-card-note{
  color:#ffffff !important;
}
#contact .contact-card-val,
#contact .contact-card-note{
  color:#ffffff !important;
}