@charset "UTF-8";
/* ==========================================================================
   10. PLATFORM — bố cục bento, không phải 6 card giống nhau
   ========================================================================== */
.nexdata-widget .nex-platform__bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--nex-sp-5);
}
.nexdata-widget .nex-bento {
  background: #fff;
  border: 1px solid var(--nex-line);
  border-radius: var(--nex-r-lg);
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition: transform var(--nex-dur) var(--nex-ease), box-shadow var(--nex-dur) var(--nex-ease), border-color var(--nex-dur) var(--nex-ease);
}
.nexdata-widget .nex-bento:hover { transform: translateY(-4px); box-shadow: var(--nex-sh-md); border-color: var(--nex-blue-200); }

/* A — card ảnh lớn (server rack) */
.nexdata-widget .nex-bento--photo { grid-column: span 7; display: flex; flex-direction: column; }
.nexdata-widget .nex-bento__media { position: relative; aspect-ratio: 16 / 10; background: var(--nex-surface-3); }
.nexdata-widget .nex-bento__media img { width: 100%; height: 100%; object-fit: cover; }
.nexdata-widget .nex-bento__media-cap {
  position: absolute; left: var(--nex-sp-5); bottom: var(--nex-sp-5); right: var(--nex-sp-5);
  color: #fff; z-index: 1;
}
.nexdata-widget .nex-bento__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 18, 31, 0) 38%, rgba(5, 18, 31, .82) 100%);
}
.nexdata-widget .nex-bento__media-cap { z-index: 2; }
.nexdata-widget .nex-bento__media-cap .nex-bento__title { color: #fff; font-size: var(--nex-fs-h3); margin-bottom: 6px; }
.nexdata-widget .nex-bento__media-cap p { font-size: var(--nex-fs-sm); color: #C3D6E8; }
.nexdata-widget .nex-bento__body { padding: var(--nex-sp-6); }
.nexdata-widget .nex-bento__body h3 { font-size: var(--nex-fs-h3); margin-bottom: var(--nex-sp-3); }
.nexdata-widget .nex-bento__body p { font-size: var(--nex-fs-sm); color: var(--nex-ink-3); }
.nexdata-widget .nex-bento__title--spaced { margin-top: var(--nex-sp-5); }
.nexdata-widget .nex-bento__description--compact {
  margin-top: var(--nex-sp-2);
  color: var(--nex-ink-3);
  font-size: var(--nex-fs-sm);
}
.nexdata-widget .nex-bento__description--management {
  max-width: 52ch;
  margin-top: var(--nex-sp-3);
}

/* B — card thông số kỹ thuật */
.nexdata-widget .nex-bento--specs { grid-column: span 5; padding: var(--nex-sp-7); }
.nexdata-widget .nex-spec-list { display: grid; gap: var(--nex-sp-4); margin-top: var(--nex-sp-6); }
.nexdata-widget .nex-spec {
  display: flex; align-items: center; gap: var(--nex-sp-4);
  padding-bottom: var(--nex-sp-4);
  border-bottom: 1px solid var(--nex-line-soft);
}
.nexdata-widget .nex-spec:last-child { padding-bottom: 0; border-bottom: 0; }
.nexdata-widget .nex-spec__txt { min-width: 0; }
.nexdata-widget .nex-spec__t { display: block; font-size: var(--nex-fs-sm); font-weight: 700; color: var(--nex-ink); }
.nexdata-widget .nex-spec__d { display: block; font-size: var(--nex-fs-xs); color: var(--nex-ink-3); line-height: 1.55; }

/* C — card dashboard giám sát */
.nexdata-widget .nex-bento--monitor { grid-column: span 5; padding: var(--nex-sp-7); }
.nexdata-widget .nex-monitor { margin-top: var(--nex-sp-5); }
.nexdata-widget .nex-monitor__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--nex-sp-4); margin-bottom: var(--nex-sp-4);
  border-bottom: 1px solid var(--nex-line-soft);
}
.nexdata-widget .nex-monitor__title { font-size: var(--nex-fs-xs); font-weight: 800; color: var(--nex-ink); letter-spacing: .02em; }
.nexdata-widget .nex-monitor__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nex-sp-4); }
.nexdata-widget .nex-stat-tile {
  background: var(--nex-surface-2);
  border: 1px solid var(--nex-line-soft);
  border-radius: var(--nex-r-sm);
  padding: var(--nex-sp-4);
}
.nexdata-widget .nex-stat-tile__l {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--nex-ink-3);
  text-transform: uppercase; letter-spacing: .05em;
}
.nexdata-widget .nex-stat-tile__l .nex-icon { width: 14px; height: 14px; color: var(--nex-blue); }
.nexdata-widget .nex-stat-tile__v {
  font-size: 1.375rem; font-weight: 900; color: var(--nex-ink);
  margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums;
}
.nexdata-widget .nex-stat-tile__v small { font-size: .75rem; font-weight: 700; color: var(--nex-ink-3); margin-left: 2px; }

/* Biểu đồ sparkline SVG */
.nexdata-widget .nex-spark { width: 100%; height: 56px; margin-top: var(--nex-sp-4); display: block; }

/* D — card highlight navy */
.nexdata-widget .nex-bento--dark {
  grid-column: span 7;
  background: var(--nex-grad-navy);
  border-color: rgba(255, 255, 255, .1);
  color: var(--nex-ink-inv-2);
  padding: var(--nex-sp-7);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--nex-sp-6);
}
.nexdata-widget .nex-bento--dark .nex-bento__title { color: #fff; font-size: var(--nex-fs-h3); }
.nexdata-widget .nex-bento--dark p { font-size: var(--nex-fs-sm); color: var(--nex-ink-inv-2); }
.nexdata-widget .nex-bento__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nex-sp-5); }
.nexdata-widget .nex-kpi__v { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 900; color: #fff; line-height: 1.1; }
.nexdata-widget .nex-kpi__l { font-size: var(--nex-fs-xs); color: var(--nex-ink-inv-3); margin-top: 4px; display: block; }

/* E — dải ảnh bảng điều khiển trong khung trình duyệt */
.nexdata-widget .nex-browser {
  margin: var(--nex-sp-5) 0 0;
  border: 1px solid var(--nex-line);
  border-radius: var(--nex-r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--nex-sh-md);
}
.nexdata-widget .nex-browser__bar {
  display: flex; align-items: center; gap: var(--nex-sp-4);
  padding: 11px var(--nex-sp-5);
  background: var(--nex-surface-2);
  border-bottom: 1px solid var(--nex-line);
}
.nexdata-widget .nex-browser__dots { display: inline-flex; gap: 6px; flex: none; }
.nexdata-widget .nex-browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--nex-line); }
.nexdata-widget .nex-browser__dots i:first-child { background: #FF9C8A; }
.nexdata-widget .nex-browser__dots i:nth-child(2) { background: #FFD37E; }
.nexdata-widget .nex-browser__dots i:last-child { background: #8DDCA9; }
.nexdata-widget .nex-browser__url {
  font-size: 11.5px; color: var(--nex-ink-3); font-weight: 600;
  background: #fff; border: 1px solid var(--nex-line-soft);
  padding: 4px 14px; border-radius: var(--nex-r-pill);
}
.nexdata-widget .nex-browser img { width: 100%; height: auto; display: block; }
.nexdata-widget .nex-browser__cap {
  padding: var(--nex-sp-4) var(--nex-sp-5);
  font-size: var(--nex-fs-xs); color: var(--nex-ink-3);
  border-top: 1px solid var(--nex-line-soft);
  text-align: center;
}

@media (max-width: 1024px) {
  .nexdata-widget .nex-bento--photo,
  .nexdata-widget .nex-bento--specs,
  .nexdata-widget .nex-bento--monitor,
  .nexdata-widget .nex-bento--dark { grid-column: span 12; }
}

@media (max-width: 768px) {
  .nexdata-widget .nex-monitor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .nexdata-widget .nex-bento--specs,
  .nexdata-widget .nex-bento--monitor,
  .nexdata-widget .nex-bento--dark { padding: var(--nex-sp-6) var(--nex-sp-5); }
  .nexdata-widget .nex-bento__kpis { grid-template-columns: 1fr; gap: var(--nex-sp-4); }
  .nexdata-widget .nex-monitor__grid { grid-template-columns: 1fr; }
}