/* =========================================================
   NetZero Economic – Intro page
   ========================================================= */

:root{
  --green-900:#0b3d2a;
  --green-700:#0f5132;
  --green-500:#2e9e4f;
  --green-300:#7ed957;
  --lime:#b6f36b;
  --white:#ffffff;
  --shadow:0 18px 45px rgba(6, 40, 24, .35);
  --radius:22px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  font-family:var(--font);
  color:var(--white);
  background:var(--green-900);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:clamp(16px, 4vw, 40px) clamp(14px, 4vw, 40px) clamp(18px, 3vw, 32px);
  padding-top:max(clamp(16px, 4vw, 40px), env(safe-area-inset-top));
  padding-bottom:max(clamp(18px, 3vw, 32px), env(safe-area-inset-bottom));
  overflow-x:hidden;
}

/* ---------- Nền full màn hình, tự co giãn ---------- */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url("../img/nen.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:var(--green-900);
}

/* Lớp phủ nhẹ giúp chữ luôn đọc được trên mọi kích thước ảnh */
.bg-veil{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(4,30,18,.42) 0%, rgba(4,30,18,.06) 32%, rgba(4,30,18,.10) 62%, rgba(4,30,18,.62) 100%);
  pointer-events:none;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ---------- Header + logo ---------- */
.site-header{
  width:100%;
  display:flex;
  justify-content:center;
}

.logo-stage{
  position:relative;
  isolation:isolate;
  width:clamp(260px, 62vw, 560px);
}

/* ---------- Viền + dải sáng chạy dọc theo đường viền ---------- */
.beam{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  overflow:visible;
  pointer-events:none;
}
.beam rect{
  fill:none;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* Đường viền tĩnh */
.beam__track{
  stroke:rgba(255,255,255,.55);
  stroke-width:2;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}

/* Vệt sáng chạy: bản nhoè (quầng) + bản lõi sắc nét, cùng chạy trên chu vi */
.beam__halo,
.beam__run{
  stroke-dasharray:16 84;      /* 16% chu vi sáng, 84% tối */
  stroke-dashoffset:100;
  animation:beam-run 4.5s linear infinite;
}
.beam__halo{
  stroke:var(--green-300);
  stroke-width:10;
  opacity:.45;
}
.beam__run{
  stroke:#ffffff;
  stroke-width:3;
  filter:drop-shadow(0 0 5px var(--lime));
}

@keyframes beam-run{
  from{ stroke-dashoffset:100; }
  to  { stroke-dashoffset:0; }
}

/* Không dùng card nền cho logo: chỉ có viền sáng + vầng sáng ôm theo hình logo */

/* ---------- Thẻ lật ---------- */
.flip{
  position:relative;
  z-index:1;
  perspective:1200px;
  outline:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.flip__inner{
  position:relative;
  width:100%;
  aspect-ratio:1000 / 290;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.8,.25,1);
}

/* Trình duyệt cũ không hỗ trợ aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .flip__inner{ height:0; padding-bottom:29%; }
}

.flip:hover .flip__inner,
.flip:focus-visible .flip__inner,
.flip.is-flipped .flip__inner{ transform:rotateY(180deg); }

.flip__face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:clamp(8px, 1.6vw, 14px);
  padding:clamp(10px, 2.4vw, 22px) clamp(14px, 3vw, 28px);
  border-radius:var(--radius);
  background:transparent;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}

/* Mặt trước: chỉ có logo trong suốt, không có card nền */
.flip__front{ padding:clamp(8px, 1.8vw, 16px) clamp(12px, 2.6vw, 24px); }
.flip__front .brand{ margin:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.flip__front img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  /* Viền sáng mảnh ôm theo hình logo + quầng sáng giúp nổi trên ảnh nền */
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 14px rgba(255,255,255,.65));
}

/* Mặt sau: ô text nền xanh */
.flip__back{
  transform:rotateY(180deg);
  background:linear-gradient(135deg, rgba(15,81,50,.94) 0%, rgba(46,158,79,.94) 55%, rgba(126,217,87,.94) 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:var(--shadow);
  color:var(--white);
  overflow:hidden;
}

.loading-text{
  margin:0;
  font-size:clamp(15px, 3.4vw, 26px);
  font-weight:700;
  letter-spacing:.4px;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.dots i{
  font-style:normal;
  animation:blink 1.2s infinite;
}
.dots i:nth-child(2){ animation-delay:.2s; }
.dots i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,20%{opacity:0} 50%{opacity:1} 100%{opacity:0} }

.loading-bar{
  display:block;
  width:min(70%, 320px);
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.28);
  overflow:hidden;
}
.loading-bar i{
  display:block;
  width:40%;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg, rgba(255,255,255,.35), #fff, rgba(255,255,255,.35));
  animation:slide 1.6s ease-in-out infinite;
}
@keyframes slide{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(260%); }
}

/* ---------- Nội dung giữa/dưới ---------- */
.site-main{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  flex:1 1 auto;
}

.intro{
  max-width:760px;
  text-align:center;
  padding:clamp(14px, 2.5vw, 24px) clamp(16px, 3vw, 30px);
  border-radius:18px;
  background:rgba(6, 38, 23, .34);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  animation:rise .9s ease both .15s;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }

.intro__title{
  margin:0 0 8px;
  font-size:clamp(20px, 4.6vw, 34px);
  font-weight:800;
  letter-spacing:.3px;
  text-shadow:0 3px 14px rgba(0,0,0,.45);
}
.intro__desc{
  margin:0 0 10px;
  font-size:clamp(14px, 2.6vw, 18px);
  line-height:1.65;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.intro__note{
  margin:0;
  font-size:clamp(12px, 2.2vw, 14px);
  color:var(--lime);
  font-weight:600;
}

.site-footer{
  width:100%;
  text-align:center;
  font-size:clamp(11px, 2.2vw, 13.5px);
  color:rgba(255,255,255,.85);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.site-footer p{ margin:14px 0 0; }
.site-footer a{
  color:var(--lime);
  text-decoration:none;
  border-bottom:1px dotted rgba(182,243,107,.6);
  transition:color .25s ease, border-color .25s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible{ color:#fff; border-color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .logo-stage{ width:min(88vw, 520px); }
}

@media (max-width: 600px){
  .logo-stage{ width:92vw; }
  .flip__face{ border-radius:16px; }
  .bg{ background-position:60% center; }
  .intro{ margin-bottom:4px; }
}

/* Màn hình ngang, chiều cao thấp */
@media (max-height: 520px) and (orientation: landscape){
  .logo-stage{ width:min(58vw, 420px); }
  .intro__desc{ display:none; }
}

/* Màn hình rất lớn */
@media (min-width: 1600px){
  .logo-stage{ width:600px; }
}

/* Tôn trọng thiết lập giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .beam__halo,
  .beam__run,
  .loading-bar i,
  .dots i,
  .intro{ animation:none !important; }
  .flip__inner{ transition:none; }
}

@media print{
  .bg,.bg-veil,.beam{ display:none; }
  body{ color:#000; }
}