/*
 * DTA Premium V30 - stable 3D scene
 * Các thẻ 3D dùng vùng grid riêng, không chồng lên logo hoặc nhau.
 */
body.dta-premium-v30 .dta-premium-hero{
  overflow:hidden !important;
  padding:78px 0 58px !important;
}
body.dta-premium-v30 .hero-grid-real{
  grid-template-columns:minmax(0,1.03fr) minmax(470px,.97fr) !important;
  column-gap:52px !important;
  row-gap:38px !important;
  align-items:center !important;
}
body.dta-premium-v30 .hero-copy{
  max-width:700px !important;
}
body.dta-premium-v30 .hero-copy h1{
  font-size:clamp(46px,4.6vw,72px) !important;
  line-height:1.15 !important;
  letter-spacing:-.04em !important;
  margin-bottom:25px !important;
}
body.dta-premium-v30 .hero-line{
  margin-bottom:.09em !important;
}
body.dta-premium-v30 .hero-copy .lead{
  max-width:680px !important;
  font-size:17px !important;
  line-height:1.9 !important;
}

/* Stable desktop grid: decorative orbit in center, content cards in dedicated cells. */
body.dta-premium-v30 .dta-3d-stage{
  position:relative !important;
  display:grid !important;
  grid-template-columns:180px minmax(190px,1fr) 180px !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  width:min(100%,590px) !important;
  height:560px !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin-inline:auto !important;
  overflow:visible !important;
  isolation:isolate !important;
  transform:none !important;
}
body.dta-premium-v30 .dta-stage-halo{
  inset:12% 17% 13% !important;
  z-index:1 !important;
}
body.dta-premium-v30 .dta-stage-grid{
  inset:7% 12% 8% !important;
  z-index:0 !important;
  opacity:.62 !important;
}
body.dta-premium-v30 .dta-orbit{
  left:50% !important;
  top:47% !important;
  z-index:2 !important;
}
body.dta-premium-v30 .dta-orbit-a{
  width:68% !important;
  height:38% !important;
}
body.dta-premium-v30 .dta-orbit-b{
  width:49% !important;
  height:68% !important;
}
body.dta-premium-v30 .dta-platform{
  left:50% !important;
  bottom:7% !important;
  width:58% !important;
  height:23% !important;
  z-index:3 !important;
}
body.dta-premium-v30 .dta-logo-showcase{
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
}
body.dta-premium-v30 .dta-logo-backplate{
  display:none !important;
}
body.dta-premium-v30 .dta-glass-core{
  left:50% !important;
  top:45% !important;
  width:176px !important;
  height:176px !important;
  transform:translate(-50%,-50%) !important;
  z-index:5 !important;
}
body.dta-premium-v30 .dta-glass-core img{
  width:106px !important;
}

body.dta-premium-v30 .floating-card{
  position:relative !important;
  inset:auto !important;
  min-width:0 !important;
  width:176px !important;
  max-width:176px !important;
  min-height:86px !important;
  padding:14px 15px !important;
  gap:10px !important;
  align-self:center !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 18px 44px rgba(17,73,143,.12) !important;
  animation:dtaCardFloat 6s ease-in-out infinite !important;
  transform:none;
  z-index:9 !important;
}
body.dta-premium-v30 .floating-card > div{
  min-width:0;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
body.dta-premium-v30 .floating-card strong{
  font-size:13px !important;
  line-height:1.3 !important;
  white-space:normal !important;
}
body.dta-premium-v30 .floating-card span:last-child{
  display:block !important;
  font-size:10.5px !important;
  line-height:1.45 !important;
  white-space:normal !important;
}
body.dta-premium-v30 .floating-card-icon{
  flex:0 0 29px !important;
  width:29px !important;
  height:29px !important;
}
body.dta-premium-v30 .floating-card.card-1{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  align-self:end !important;
  animation-delay:-1.1s !important;
}
body.dta-premium-v30 .floating-card.card-2{
  grid-column:1 !important;
  grid-row:3 !important;
  justify-self:start !important;
  align-self:start !important;
  animation-delay:-2.2s !important;
}
body.dta-premium-v30 .floating-card.card-3{
  grid-column:3 !important;
  grid-row:3 !important;
  justify-self:end !important;
  align-self:start !important;
  animation-delay:-3.3s !important;
}
body.dta-premium-v30 .dta-mini-pill,
body.dta-premium-v30 .dta-data-panel{
  display:none !important;
}

body.dta-premium-v30 .hero-insight-panel{
  position:relative !important;
  z-index:11 !important;
  margin-top:0 !important;
}

@media (max-width:1220px){
  body.dta-premium-v30 .hero-grid-real{
    grid-template-columns:minmax(0,1fr) minmax(430px,.92fr) !important;
    column-gap:30px !important;
  }
  body.dta-premium-v30 .dta-3d-stage{
    grid-template-columns:160px minmax(170px,1fr) 160px !important;
    width:min(100%,530px) !important;
    height:520px !important;
  }
  body.dta-premium-v30 .floating-card{
    width:158px !important;
    max-width:158px !important;
    padding:12px 13px !important;
  }
  body.dta-premium-v30 .floating-card strong{font-size:12px !important}
  body.dta-premium-v30 .floating-card span:last-child{font-size:9.7px !important}
}

@media (max-width:1100px){
  body.dta-premium-v30 .hero-grid-real{
    grid-template-columns:1fr !important;
  }
  body.dta-premium-v30 .hero-copy{
    max-width:760px !important;
    margin-inline:auto !important;
  }
  body.dta-premium-v30 .dta-3d-stage{
    grid-template-columns:170px minmax(190px,1fr) 170px !important;
    width:min(100%,570px) !important;
    height:540px !important;
  }
  body.dta-premium-v30 .floating-card{
    width:168px !important;
    max-width:168px !important;
  }
}

/* Mobile: visual occupies the top area, cards become a non-overlapping list below. */
@media (max-width:767px){
  body.dta-premium-v30 .dta-premium-hero{
    padding:56px 0 40px !important;
  }
  body.dta-premium-v30 .hero-copy h1{
    font-size:clamp(37px,10.5vw,52px) !important;
    line-height:1.18 !important;
  }
  body.dta-premium-v30 .hero-line{
    margin-bottom:.11em !important;
  }
  body.dta-premium-v30 .hero-copy .lead{
    font-size:15px !important;
    line-height:1.84 !important;
  }
  body.dta-premium-v30 .dta-3d-stage{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:300px auto auto !important;
    gap:10px !important;
    width:min(100%,430px) !important;
    height:auto !important;
    min-height:0 !important;
    padding-top:0 !important;
    overflow:hidden !important;
  }
  body.dta-premium-v30 .dta-stage-halo{
    inset:8% 14% auto !important;
    height:245px !important;
  }
  body.dta-premium-v30 .dta-stage-grid{
    inset:3% 7% auto !important;
    height:270px !important;
  }
  body.dta-premium-v30 .dta-orbit{
    top:145px !important;
  }
  body.dta-premium-v30 .dta-orbit-a{
    width:70% !important;
    height:135px !important;
  }
  body.dta-premium-v30 .dta-orbit-b{
    width:48% !important;
    height:220px !important;
  }
  body.dta-premium-v30 .dta-platform{
    bottom:auto !important;
    top:220px !important;
    width:62% !important;
    height:76px !important;
  }
  body.dta-premium-v30 .dta-glass-core{
    top:143px !important;
    width:132px !important;
    height:132px !important;
  }
  body.dta-premium-v30 .dta-glass-core img{
    width:79px !important;
  }
  body.dta-premium-v30 .floating-card{
    width:100% !important;
    max-width:none !important;
    min-height:72px !important;
    margin:0 !important;
    animation:none !important;
  }
  body.dta-premium-v30 .floating-card.card-1{
    grid-column:1 !important;
    grid-row:2 !important;
    justify-self:stretch !important;
    align-self:stretch !important;
  }
  body.dta-premium-v30 .floating-card.card-2{
    grid-column:2 !important;
    grid-row:2 !important;
    justify-self:stretch !important;
    align-self:stretch !important;
  }
  body.dta-premium-v30 .floating-card.card-3{
    grid-column:1 / 3 !important;
    grid-row:3 !important;
    justify-self:stretch !important;
    align-self:stretch !important;
  }
}

@media (max-width:480px){
  body.dta-premium-v30 .dta-3d-stage{
    grid-template-columns:1fr !important;
    grid-template-rows:270px repeat(3,auto) !important;
    width:100% !important;
  }
  body.dta-premium-v30 .dta-stage-halo{height:220px !important}
  body.dta-premium-v30 .dta-stage-grid{height:240px !important}
  body.dta-premium-v30 .dta-orbit{top:130px !important}
  body.dta-premium-v30 .dta-platform{top:198px !important}
  body.dta-premium-v30 .dta-glass-core{top:128px !important;width:122px !important;height:122px !important}
  body.dta-premium-v30 .floating-card.card-1{grid-column:1 !important;grid-row:2 !important}
  body.dta-premium-v30 .floating-card.card-2{grid-column:1 !important;grid-row:3 !important}
  body.dta-premium-v30 .floating-card.card-3{grid-column:1 !important;grid-row:4 !important}
}