@charset "UTF-8";
/* ==========================================================================
   08. HERO
   ========================================================================== */
.nexdata-widget.nex-hero,
.nexdata-widget .nex-hero {
  position: relative;
  background: var(--nex-grad-navy);
  color: var(--nex-ink-inv-2);
  padding-block: clamp(3rem, 1.6rem + 5.4vw, 6rem) clamp(3.5rem, 2rem + 5.6vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
/* Lưới nền + quầng sáng rất nhẹ (không lạm dụng glow) */
.nexdata-widget.nex-hero::before,
.nexdata-widget .nex-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 70% at 20% 10%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 10%, #000 20%, transparent 75%);
}
.nexdata-widget.nex-hero::after,
.nexdata-widget .nex-hero::after {
  content: "";
  position: absolute; z-index: -1;
  width: 620px; height: 620px; right: -180px; top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 200, 232, .16) 0%, transparent 62%);
  pointer-events: none;
}

.nexdata-widget .nex-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem);
  align-items: center;
}
.nexdata-widget.nex-hero--content-only .nex-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Cột trái --- */
/* min-width:0 chặn nội dung dài làm vỡ cột grid */
.nexdata-widget .nex-hero__content { min-width: 0; }

.nexdata-widget .nex-hero__badge {
  display: inline-flex; align-items: center; gap: var(--nex-sp-2);
  padding: 7px 14px 7px 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--nex-r-pill);
  font-size: var(--nex-fs-xs); font-weight: 600; color: #DCEBFA;
  margin-bottom: var(--nex-sp-6);
}
.nexdata-widget .nex-hero__badge-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--nex-grad-brand); color: #fff;
}
.nexdata-widget .nex-hero__badge-dot .nex-icon { width: 13px; height: 13px; stroke-width: 2.4; }

.nexdata-widget .nex-hero__title {
  font-size: var(--nex-fs-display);
  line-height: var(--nex-lh-tight);
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: var(--nex-sp-5);
  text-wrap: balance;
}
.nexdata-widget .nex-hero__title em { font-style: normal; }

.nexdata-widget .nex-hero__desc {
  font-size: var(--nex-fs-lead);
  color: #A9C2DA;
  max-width: 52ch;
  margin-bottom: var(--nex-sp-8);
}

.nexdata-widget .nex-hero__actions { display: flex; flex-wrap: wrap; gap: var(--nex-sp-3); margin-bottom: var(--nex-sp-8); }
.nexdata-widget .nex-hero__actions:empty { display: none; margin-bottom: 0; }

/* Chỉ số tin cậy */
.nexdata-widget .nex-hero__metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nex-sp-5);
  padding-top: var(--nex-sp-6);
  border-top: 1px solid rgba(255, 255, 255, .12);
  max-width: 520px;
}
.nexdata-widget .nex-hero__metrics > div { display: flex; flex-direction: column; }
.nexdata-widget .nex-hero__metric-v {
  display: block; font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.02em;
}
.nexdata-widget .nex-hero__metric-v { order: -1; }
.nexdata-widget .nex-hero__metric-l { display: block; font-size: var(--nex-fs-xs); color: var(--nex-ink-inv-3); margin-top: 4px; }

/* Cam kết dịch vụ */
.nexdata-widget .nex-hero__pledges { display: flex; flex-wrap: wrap; gap: var(--nex-sp-4); margin-top: var(--nex-sp-6); }
.nexdata-widget .nex-hero__pledge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--nex-fs-xs); color: #9FB8D0;
}
.nexdata-widget .nex-hero__pledge .nex-icon { width: 16px; height: 16px; color: var(--nex-cyan); stroke-width: 2.2; }

/* --- Cột phải: ảnh + dashboard nổi --- */
.nexdata-widget .nex-hero__visual { position: relative; }
.nexdata-widget.nex-hero--image-left .nex-hero__visual { order: -1; }

.nexdata-widget .nex-hero__frame {
  position: relative;
  border-radius: var(--nex-r-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
  background: #0B2136;
  aspect-ratio: 4 / 3;
}
.nexdata-widget .nex-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Phủ navy nhẹ để ảnh hoà với nền, giữ độ tương phản chữ xung quanh */
.nexdata-widget .nex-hero__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 18, 31, .12) 0%, rgba(5, 18, 31, .58) 100%);
  pointer-events: none;
}

/* Card dashboard nổi */
.nexdata-widget .nex-hero__panel {
  position: absolute; left: -26px; bottom: -30px;
  width: min(310px, 78%);
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--nex-r-lg);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .34);
  padding: var(--nex-sp-5);
  color: var(--nex-ink-2);
  animation: nexdata-hero-float 7s ease-in-out infinite;
  will-change: transform;
}
.nexdata-widget .nex-hero__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nex-sp-3); margin-bottom: var(--nex-sp-4);
}
.nexdata-widget .nex-hero__panel-title { font-size: var(--nex-fs-xs); font-weight: 800; color: var(--nex-ink); }
.nexdata-widget .nex-hero__panel-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--nex-r-lg) - 1px);
}
.nexdata-widget .nex-meter { margin-bottom: var(--nex-sp-4); }
.nexdata-widget .nex-meter:last-of-type { margin-bottom: 0; }
.nexdata-widget .nex-meter__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; margin-bottom: 6px;
}
.nexdata-widget .nex-meter__label { font-weight: 700; color: var(--nex-ink-2); }
.nexdata-widget .nex-meter__val { font-weight: 800; color: var(--nex-ink); font-variant-numeric: tabular-nums; }
.nexdata-widget .nex-meter__track { height: 6px; border-radius: 4px; background: var(--nex-surface-3); overflow: hidden; }
.nexdata-widget .nex-meter__bar {
  height: 100%; border-radius: 4px; background: var(--nex-grad-brand);
  width: 0;
  transition: width 1.1s var(--nex-ease);
}
.nexdata-widget .nex-meter__bar--cyan { background: linear-gradient(90deg, var(--nex-cyan-600), var(--nex-cyan)); }
.nexdata-widget .nex-meter__bar--ok { background: linear-gradient(90deg, #0EA371, var(--nex-ok)); }

/* Chip thông số nổi góc trên */
.nexdata-widget .nex-hero__chip {
  position: absolute; right: -14px; top: 26px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10, 28, 48, .82);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  border-radius: var(--nex-r-md);
  padding: 11px 15px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  top: calc(26px + (var(--nex-float-index, 0) * 88px));
  animation: nexdata-hero-float 8.5s ease-in-out infinite reverse;
}
.nexdata-widget .nex-hero__chip .nex-icon { color: var(--nex-cyan); width: 20px; height: 20px; }
.nexdata-widget .nex-hero__chip-v { font-size: var(--nex-fs-sm); font-weight: 800; color: #fff; line-height: 1.1; }
.nexdata-widget .nex-hero__chip-l { font-size: 11px; color: var(--nex-ink-inv-3); }
.nexdata-widget .nex-hero__decoration {
  position: absolute;
  right: clamp(1rem, 4vw, 5rem);
  bottom: clamp(1rem, 4vw, 4rem);
  z-index: -1;
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
}
.nexdata-widget .nex-hero__decoration :is(svg, i) { width: clamp(80px, 14vw, 220px); height: auto; }
.nexdata-widget.nex-hero--no-decoration::before,
.nexdata-widget.nex-hero--no-decoration::after { display: none; }
.nexdata-widget.nex-hero--motion-off .nex-hero__panel,
.nexdata-widget.nex-hero--motion-off .nex-hero__chip { animation: none; }

@keyframes nexdata-hero-float{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (max-width: 1024px) {
  .nexdata-widget .nex-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  }
  .nexdata-widget .nex-hero__desc { max-width: 62ch; }
  .nexdata-widget .nex-hero__metrics { max-width: none; }
  .nexdata-widget .nex-hero__visual {
    max-width: 620px;
    margin-inline: auto;
    width: 100%;
  }
  .nexdata-widget.nex-hero--image-left:not(.nex-hero--reverse-mobile) .nex-hero__visual { order: initial; }
  .nexdata-widget.nex-hero--reverse-mobile .nex-hero__visual,
  .nexdata-widget .nex-hero--reverse-mobile .nex-hero__visual { order: -1; }
}

@media (max-width: 768px) {
  .nexdata-widget .nex-hero__panel { left: 0; bottom: -22px; width: min(280px, 88%); }
  .nexdata-widget .nex-hero__chip { right: 0; top: 16px; }
  .nexdata-widget .nex-hero__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nex-sp-3);
  }
  .nexdata-widget .nex-hero__actions .nex-btn { flex: 1 1 auto; }
}

@media (max-width: 620px) {
  .nexdata-widget .nex-hero__pledges { gap: var(--nex-sp-3) var(--nex-sp-4); }
}

@media (max-width: 480px) {
  .nexdata-widget.nex-hero,
  .nexdata-widget .nex-hero { padding-block: 2.5rem 4rem; }
  .nexdata-widget .nex-hero__frame { aspect-ratio: 3 / 2; }
  .nexdata-widget .nex-hero__panel {
    position: static;
    width: 100%;
    margin-top: var(--nex-sp-5);
    animation: none;
    box-shadow: var(--nex-sh-md);
  }
  .nexdata-widget .nex-hero__chip {
    position: static;
    margin-top: var(--nex-sp-4);
    animation: none;
    display: inline-flex;
  }
  .nexdata-widget .nex-hero__actions { flex-direction: column; }
  .nexdata-widget .nex-hero__actions .nex-btn { width: 100%; }
  .nexdata-widget .nex-hero__metrics { grid-template-columns: 1fr 1fr; row-gap: var(--nex-sp-5); }
  .nexdata-widget.nex-hero--hide-decoration-mobile::before,
  .nexdata-widget.nex-hero--hide-decoration-mobile::after,
  .nexdata-widget.nex-hero--hide-decoration-mobile .nex-hero__decoration,
  .nexdata-widget .nex-hero--hide-decoration-mobile::before,
  .nexdata-widget .nex-hero--hide-decoration-mobile::after { display: none; }
}

@media (max-width: 375px) {
  .nexdata-widget .nex-hero__metrics { grid-template-columns: 1fr; }
}

[dir="rtl"] .nexdata-widget .nex-hero__panel { left: auto; right: -30px; }
[dir="rtl"] .nexdata-widget .nex-hero__chip { right: auto; left: -18px; }

@media (max-width: 768px) {
  [dir="rtl"] .nexdata-widget .nex-hero__panel { right: 0; }
  [dir="rtl"] .nexdata-widget .nex-hero__chip { left: 0; }
}