/* Quản Lý Vựa extends the shared product design without altering its sibling.
   DESIGN_VARIANCE 6 / MOTION_INTENSITY 4 / VISUAL_DENSITY 4.
   The shared color, shape, icon and layer scales remain unchanged. */
.vua-report {
  background: var(--surface);
}
.vua-report-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.vua-report-copy > p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  margin-top: 20px;
  max-width: 450px;
}
.vua-report-copy > .eyebrow {
  display: block;
}
.vua-report-points {
  display: grid;
  gap: 26px;
  margin-top: 32px;
}
.vua-report-points article {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.vua-report-points .icon {
  color: var(--accent);
  margin-top: 2px;
}
.vua-report-points h3 {
  font-size: 15px;
  line-height: 1.5;
}
.vua-report-points p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin-top: 7px;
  max-width: 350px;
}
.vua-report-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}
.vua-report-images img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 28px var(--shadow);
}
.vua-report-images img:last-child {
  margin-top: 48px;
}
.vua-page .footer-bottom > div {
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .vua-report-layout {
    gap: 36px;
  }
  .vua-report-images {
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .vua-report-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .vua-report-copy > p {
    font-size: 14px;
  }
  .vua-report-points {
    gap: 22px;
  }
  .vua-report-images {
    width: min(100%, 450px);
    margin-inline: auto;
  }
  .vua-report-images img:last-child {
    margin-top: 30px;
  }
}