/* V35.0.2 FINAL - synchronized logo + readability */
/* === Phúc Ngọc Lân V35 - Loading centered / user background === */
#pn-loading{position:fixed;inset:0;z-index:2147483647;overflow:hidden;background:#120000;color:#fff7dc;opacity:1;visibility:visible;transition:opacity .8s ease,visibility .8s ease}
#pn-loading.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
#pn-loading .loading-scene{position:absolute;inset:-5%;background:url('/images/loading-v35.jpg') center/cover no-repeat;animation:pnScene 11s ease-in-out infinite alternate;transform-origin:center center;filter:saturate(1.12) contrast(1.06) brightness(.9)}
#pn-loading .loading-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(255,88,0,.08),transparent 38%),linear-gradient(180deg,rgba(0,0,0,.16),rgba(28,0,0,.48) 58%,rgba(7,0,0,.82));pointer-events:none}
#pn-loading .loading-vignette{position:absolute;inset:0;box-shadow:inset 0 0 140px 35px rgba(0,0,0,.68);pointer-events:none}

/* Fire glow + flames */
#pn-loading .loading-fire{position:absolute;left:-5%;right:-5%;bottom:-9%;height:34%;pointer-events:none;opacity:.9;filter:blur(1px);background:
 radial-gradient(ellipse at 10% 100%,rgba(255,80,0,.95) 0 5%,transparent 22%),
 radial-gradient(ellipse at 28% 100%,rgba(255,175,25,.9) 0 6%,transparent 23%),
 radial-gradient(ellipse at 48% 100%,rgba(255,54,0,.92) 0 7%,transparent 24%),
 radial-gradient(ellipse at 69% 100%,rgba(255,166,18,.9) 0 6%,transparent 23%),
 radial-gradient(ellipse at 88% 100%,rgba(255,64,0,.95) 0 6%,transparent 23%);
 animation:pnFire 2.1s ease-in-out infinite alternate}
#pn-loading .loading-fire:before,#pn-loading .loading-fire:after{content:"";position:absolute;left:0;right:0;bottom:0;height:80%;background:radial-gradient(ellipse at 18% 100%,rgba(255,207,75,.65),transparent 25%),radial-gradient(ellipse at 42% 100%,rgba(255,95,0,.72),transparent 24%),radial-gradient(ellipse at 63% 100%,rgba(255,220,78,.55),transparent 26%),radial-gradient(ellipse at 82% 100%,rgba(255,80,0,.72),transparent 24%);mix-blend-mode:screen;animation:pnFire2 1.5s ease-in-out infinite alternate}
#pn-loading .loading-fire:after{filter:blur(7px);opacity:.7;animation-delay:-.7s}

#pn-loading .loading-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#pn-loading .loading-particles i{position:absolute;width:4px;height:7px;border-radius:50%;background:#ffd66a;box-shadow:0 0 12px 3px #ff7b00;opacity:0;animation:pnSpark 3.2s linear infinite}
#pn-loading .loading-particles i:nth-child(1){left:10%;top:75%;animation-delay:.1s}.loading-particles i:nth-child(2){left:21%;top:64%;animation-delay:1s}.loading-particles i:nth-child(3){left:33%;top:82%;animation-delay:1.7s}.loading-particles i:nth-child(4){left:48%;top:70%;animation-delay:.5s}.loading-particles i:nth-child(5){left:63%;top:78%;animation-delay:2s}.loading-particles i:nth-child(6){left:78%;top:65%;animation-delay:1.2s}.loading-particles i:nth-child(7){left:91%;top:76%;animation-delay:2.4s}

@keyframes pnLogo{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.025)}}
@keyframes pnSpark{0%{opacity:0;transform:translateY(20px) translateX(0) rotate(0) scale(.5)}20%{opacity:.95}80%{opacity:.35}100%{opacity:0;transform:translateY(-150px) translateX(24px) rotate(35deg) scale(1.15)}}
@keyframes pnFire{0%{transform:scaleX(.98) translateY(2%);opacity:.78}100%{transform:scaleX(1.03) translateY(-4%);opacity:1}}
@keyframes pnFire2{0%{transform:translateY(2%) scaleY(.92)}100%{transform:translateY(-5%) scaleY(1.08)}}

@media(max-width:700px){
 #pn-loading .loading-scene{inset:-8%;background-position:center center}
 #pn-loading .loading-content{padding:0 5vw}
 #pn-loading .loading-logo{width:clamp(105px,28vw,155px);height:clamp(105px,28vw,155px)}
 #pn-loading .loading-status{font-size:10px;margin-top:10px}
 #pn-loading .loading-bar{width:92vw;height:18px;margin-top:10px}
 #pn-loading .loading-percent{font-size:16px;margin-top:6px}
 #pn-loading .loading-fire{height:29%;bottom:-5%}
}
@media(prefers-reduced-motion:reduce){#pn-loading .loading-scene,#pn-loading .loading-logo,#pn-loading .loading-particles i,#pn-loading .loading-fire,#pn-loading .loading-fire:before,#pn-loading .loading-fire:after{animation:none!important}}

/* V35 FINAL LOADING LAYER FIX */
#pn-loading .loading-content{
  position:absolute;
  z-index:20;
  left:50%;
  top:50%;
  width:min(760px,88vw);
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  pointer-events:none;
}
#pn-loading .loading-logo{
  display:block;
  width:clamp(150px,17vw,235px);
  height:clamp(150px,17vw,235px);
  object-fit:contain;
  margin:0 auto 16px;
  filter:drop-shadow(0 0 18px rgba(255,170,40,.55));
  animation:pnLogo 2.8s ease-in-out infinite;
}
#pn-loading .loading-status{
  min-height:22px;
  margin:0 0 12px;
  color:#fff8e4;
  font-size:clamp(13px,1.2vw,16px);
  font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,1);
  background:rgba(30,0,0,.28);
  border:1px solid rgba(255,214,110,.28);
  border-radius:999px;
  padding:4px 14px;
}
#pn-loading .loading-bar{
  position:relative;
  width:min(720px,82vw);
  height:26px;
  margin:0 auto;
  overflow:hidden;
  border:2px solid #ffd35a;
  border-radius:999px;
  background:rgba(15,3,0,.78);
  box-shadow:0 0 0 1px rgba(120,35,0,.8),0 0 22px rgba(255,116,0,.65),inset 0 2px 7px rgba(0,0,0,.7);
}
#pn-loading .loading-progress{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#b90000 0%,#ff3a00 38%,#ff9d19 72%,#ffe68a 100%);
  box-shadow:0 0 18px rgba(255,116,0,.9),inset 0 1px 3px rgba(255,255,255,.55);
  transition:width .18s linear;
}
#pn-loading .loading-progress::after{
  content:"";
  position:absolute;
  top:3px;
  bottom:3px;
  width:90px;
  margin-left:-45px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:pnProgressShine 1.4s linear infinite;
}
#pn-loading .loading-percent{
  margin-top:10px;
  color:#ffd75b;
  font-size:clamp(22px,2.3vw,34px);
  line-height:1;
  font-weight:900;
  letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 16px rgba(255,120,0,.7);
}
#pn-loading .loading-hint{
  margin-top:8px;
  color:rgba(255,240,200,.82);
  font-size:clamp(10px,1vw,13px);
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}
#pn-loading .loading-fire{
  z-index:8;
  height:42%;
  bottom:-7%;
  opacity:1;
  filter:blur(.4px) saturate(1.35);
  mix-blend-mode:screen;
}
#pn-loading .loading-particles{z-index:10}
#pn-loading .loading-shade{z-index:4;background:radial-gradient(circle at 50% 48%,rgba(0,0,0,.18),transparent 42%),linear-gradient(180deg,rgba(0,0,0,.14),rgba(18,0,0,.34) 58%,rgba(7,0,0,.62));}
#pn-loading .loading-vignette{z-index:6;box-shadow:inset 0 0 120px 24px rgba(0,0,0,.52)}
#pn-loading .loading-scene{z-index:1;filter:saturate(1.14) contrast(1.04) brightness(.92)}
@keyframes pnProgressShine{0%{transform:translateX(-180px);opacity:0}20%{opacity:.9}100%{transform:translateX(760px);opacity:0}}
@media(max-width:700px){
 #pn-loading .loading-content{width:94vw;padding:12px;top:50%;}
 #pn-loading .loading-logo{width:clamp(108px,26vw,150px);height:clamp(108px,26vw,150px);margin-bottom:12px}
 #pn-loading .loading-status{font-size:11px;margin-bottom:9px}
 #pn-loading .loading-bar{width:min(78vw,420px);height:18px;border-width:2px}
 #pn-loading .loading-percent{font-size:22px;margin-top:8px}
 #pn-loading .loading-hint{font-size:9px;margin-top:6px}
 #pn-loading .loading-fire{height:38%;bottom:-3%;opacity:1;}
 #pn-loading .loading-particles i{width:3px;height:6px;box-shadow:0 0 10px 2px #ff7b00}
}