/* ════════════════════════════════════════════════════════════
   VTM WEBSITE · HOME PAGE  ·  style riêng cho trang chủ
   (kế thừa hệ thống thiết kế từ vtm-core.css)
   ════════════════════════════════════════════════════════════ */

/* ── HERO · logo thay tiêu đề chữ (30/05) ── */
/* khối hero nằm DƯỚI navbar (tránh chạm/đè trên màn thấp) */
#hero{padding-top:calc(var(--nav-h) + clamp(6px,1.4vh,18px))!important;padding-bottom:clamp(36px,7vh,84px)!important;}
.home-title-logo{padding:0;margin:0 auto clamp(4px,1vh,14px);text-shadow:none;line-height:1;}
.home-logo-img{
  display:block;margin:0 auto;width:auto;height:auto;
  max-width:clamp(230px,30vw,420px);max-height:clamp(132px,22vh,260px);object-fit:contain;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.5)) drop-shadow(0 0 32px rgba(240,208,112,.26));
}
@media(max-width:560px){.home-logo-img{max-width:min(290px,66vw);max-height:32vh;}}

/* ── HERO · trang chủ ── */
.home-title{
  font-family:var(--f-disp);font-weight:900;line-height:1.02;letter-spacing:.012em;
  font-size:clamp(44px,9.4vw,138px);color:var(--ivory);
  text-shadow:0 8px 44px rgba(0,0,0,.55);
  opacity:0;animation:hUp 1.1s ease forwards .5s;
}
.home-title em{
  font-style:italic;font-weight:800;
  background:linear-gradient(118deg,var(--gold-cream),var(--gold-bright) 44%,var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:.18em .14em;margin:-.18em -.14em;
}
.home-tagline{
  display:inline-block;margin-top:clamp(6px,1.4vh,18px);
  font-family:'Dancing Script','Cormorant Garamond',cursive;font-weight:700;
  font-size:clamp(22px,5vw,62px);line-height:1.2;
  background:linear-gradient(100deg,#eaba46,#ffe08a 22%,#fff6d6 38%,#ffe890 55%,#fff6d6 70%,#ffe08a 84%,#eaba46);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 9px rgba(255,232,158,.6)) drop-shadow(0 0 26px rgba(255,200,96,.4));
  opacity:0;animation:hUp 1.1s ease forwards .75s,gxShine 5s linear infinite;
}
.home-divider{
  width:clamp(60px,12vw,150px);height:1px;margin:clamp(14px,2.4vh,26px) auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  opacity:0;animation:hUp 1s ease forwards .9s;
}

/* ── MARQUEE wording ── */
.marquee.home-mq{margin-top:0;}

/* ── GIỚI THIỆU ── */
.intro-lead{
  font-family:var(--f-sub);font-size:clamp(17px,2.2vw,27px);font-style:italic;
  color:var(--gold-cream);max-width:880px;margin:0 auto;line-height:1.74;
}
.intro-body{
  font-size:clamp(14px,1.5vw,16.5px);color:var(--ivory-dim);font-weight:300;
  max-width:760px;margin:26px auto 0;line-height:1.95;
}

/* ── KHÁM PHÁ · thẻ dẫn vào 6 trang ── */
.gw-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);margin-top:clamp(48px,8vh,90px);width:100%;
}
.gw-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;padding:clamp(30px,3.2vw,48px) clamp(24px,2.6vw,40px);
  border-radius:16px;overflow:hidden;cursor:pointer;
  background:linear-gradient(165deg,rgba(110,26,38,0.55),rgba(40,12,16,0.62));
  border:1px solid var(--glass-bd);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.gw-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  opacity:.7;transition:opacity .5s;
}
.gw-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 26px rgba(240,208,112,.06);transition:box-shadow .5s;
}
.gw-card:hover{
  transform:translateY(-12px);border-color:rgba(240,208,112,.55);
  box-shadow:0 30px 72px rgba(0,0,0,.5),0 0 52px rgba(240,208,112,.16);
}
.gw-card:hover::after{box-shadow:inset 0 0 46px rgba(240,208,112,.18);}
.gw-num{
  font-family:var(--f-disp);font-weight:900;font-size:clamp(34px,4.4vw,58px);line-height:1;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(240,208,112,.28));margin-bottom:18px;
}
.gw-h{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,2.2vw,27px);
  color:var(--ivory);line-height:1.28;margin-bottom:12px;
}
.gw-p{
  font-size:clamp(13px,1.4vw,15px);color:var(--ivory-dim);
  line-height:1.86;font-weight:300;margin-bottom:24px;flex:1;
}
.gw-go{
  font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-bright);
  display:inline-flex;align-items:center;gap:9px;transition:gap .3s,color .3s;
}
.gw-go .arr{transition:transform .35s var(--ease);font-size:15px;}
.gw-card:hover .gw-go{color:var(--gold-cream);}
.gw-card:hover .gw-go .arr{transform:translateX(7px);}

/* ── DẢI ĐIỂM NHẤN 30 NĂM ── */
.band30{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  padding:clamp(74px,13vh,150px) clamp(20px,5vw,80px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 90% 80% at 50% 38%,#9E2A2C 0%,#6E1A26 36%,#3E1417 68%,#240A0E 100%);
  border-top:1px solid var(--glass-bd);border-bottom:1px solid var(--glass-bd);
}
.band30-ghost{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;
  font-family:var(--f-disp);font-weight:900;font-size:clamp(220px,42vw,640px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(248,233,184,.12);
  user-select:none;pointer-events:none;white-space:nowrap;
}
.band30-eye{
  font-family:var(--f-ui);font-size:clamp(10px,1.2vw,13px);letter-spacing:.44em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:22px;
}
.band30-h{
  font-family:var(--f-disp);font-weight:800;line-height:1.16;
  font-size:clamp(28px,4.6vw,62px);color:var(--ivory);max-width:1000px;margin-bottom:24px;
}
.band30-h em{
  font-style:italic;font-weight:600;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.band30-p{
  font-family:var(--f-sub);font-style:italic;font-size:clamp(16px,2vw,23px);
  color:var(--gold-cream);max-width:680px;line-height:1.7;margin-bottom:38px;
}

/* ── responsive ── */
@media(max-width:900px){
  .gw-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .home-title{font-size:clamp(40px,12vw,72px);}
}