/* hero.css — CHỈ chứa style riêng của Hero. Biến màu dùng chung (--forest-*, --gold,
   --green, --coral...) đã khai báo 1 lần duy nhất trong header.css — không khai báo
   lại :root ở đây để tránh đè mất giá trị đúng trên toàn site (đã từng dính lỗi này). */

.hero{
  position:relative;
  min-height:90vh;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, var(--forest-edge) 0%, transparent 55%),
    linear-gradient(200deg, var(--forest-mid) 0%, var(--forest-deep) 65%, #041a10 100%);
  color:#F3F7F1;
  display:flex;
  flex-direction:column;
}

.godray-svg{
  position:absolute;top:-8%;right:13%;width:46%;height:120%;
  pointer-events:none;mix-blend-mode:screen;
  transform-origin:55% 0%;
  animation:raySway 12s ease-in-out infinite;
}
@keyframes raySway{
  0%,100%{ transform:rotate(-15deg); opacity:.85; }
  50%{ transform:rotate(15deg); opacity:1; }
}
@media (max-width:820px){
  .godray-svg{width:70%;right:-8%;}
  .ray-core{display:none;} /* lõi tia vàng ẩn trên mobile, tránh rối mắt màn hình nhỏ */
}

.trees{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none;}
.trees svg{display:block;width:100%;height:auto;}
.trees.far{opacity:.5;transform:scale(1.05);bottom:-2%;}
.trees.near{opacity:.9;}

.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.mote{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--gold-soft);box-shadow:0 0 10px 3px rgba(255,217,160,.75);
  opacity:0;animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{transform:translate(0,0);opacity:0;}
  12%{opacity:1;}
  88%{opacity:.6;}
  100%{transform:translate(var(--dx,20px), -70vh);opacity:0;}
}

.hero-content{
  position:relative;z-index:5;max-width:1180px;margin:0 auto;width:100%;
  padding:56px 24px 70px;flex:1;display:flex;align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gold);
  background:rgba(255,217,160,.1);border:1px solid rgba(255,217,160,.25);
  padding:6px 14px;border-radius:100px;margin-bottom:22px;
}
.hero h1{font-size:clamp(28px,4.4vw,44px);line-height:1.28;font-weight:800;margin:0;max-width:680px;}
.hero h1 em{color:var(--gold);font-style:italic;}
.hero-link{
  display:inline-block;margin-top:20px;font-weight:600;font-size:15px;color:var(--gold);
  border-bottom:2px solid rgba(255,217,160,.5);padding-bottom:2px;
}
.hero-content .btn{margin-top:22px;}

.tag-rows{display:flex;flex-direction:column;gap:8px;margin-top:28px;}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;}
.tag{
  font-size:12.5px;font-weight:600;color:#F3F7F1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:6px 14px;border-radius:100px;backdrop-filter:blur(2px);
}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  font-size:11px;letter-spacing:2px;color:#B9CDBE;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue .line{width:1px;height:26px;background:linear-gradient(var(--gold),transparent);animation:cueMove 2s ease-in-out infinite;}
@keyframes cueMove{0%,100%{opacity:.3;}50%{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .mote{animation:none !important;opacity:.6;}
  .btn:hover{transform:none;}
  .scroll-cue .line{animation:none !important;opacity:.6;}
}

/* Ghi đè cứng — đảm bảo tiêu đề Hero luôn đúng màu trắng, không bị Hub làm mờ/sai màu */
.hero h1{color:#F3F7F1 !important;opacity:1 !important;}
.hero h1 em{color:#FFD97A !important;}
.hero-eyebrow{color:#FFD9A0 !important;opacity:1 !important;}
.hero-link{color:#FFD9A0 !important;}
.tag{color:#F3F7F1 !important;opacity:1 !important;}