/* =============================================================
   IDATA Elementor Widgets – SOLUTIONS
   Phụ thuộc: idata-core
============================================================= */

/* =========================================================
   2. GIẢI PHÁP THEO NHU CẦU – TABS
========================================================= */
.idata-solutions__tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--idata-space-2);
  margin-bottom: var(--idata-space-6);
}
.idata-solutions__tab {
  padding: 11px 20px;
  border: 1px solid var(--idata-border);
  border-radius: var(--idata-radius-pill);
  background: var(--idata-surface);
  font-size: var(--idata-fs-sm);
  font-weight: var(--idata-font-weight-semibold);
  color: var(--idata-muted);
  transition: color var(--idata-transition-fast), border-color var(--idata-transition-fast),
              background-color var(--idata-transition-fast), box-shadow var(--idata-transition-fast);
}
.idata-solutions__tab:hover { color: var(--idata-primary); border-color: var(--idata-primary); }
.idata-solutions__tab.is-active {
  background: var(--idata-primary);
  border-color: var(--idata-primary);
  color: #fff;
  box-shadow: var(--idata-shadow-primary);
}

.idata-solutions__panel {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: var(--idata-space-7);
  padding: var(--idata-space-8);
  background: var(--idata-surface);
  border: 1px solid var(--idata-border);
  border-radius: var(--idata-radius-lg);
  box-shadow: var(--idata-shadow-sm);
  animation: idata-fade-in var(--idata-transition) both;
}
@keyframes idata-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.idata-solutions__panel-title {
  font-size: var(--idata-fs-h3);
  font-weight: var(--idata-font-weight-bold);
  color: var(--idata-heading);
  margin-bottom: var(--idata-space-3);
}
.idata-solutions__panel-desc { color: var(--idata-muted); margin-bottom: var(--idata-space-5); }

.idata-solutions__list { display: grid; gap: 10px; }
.idata-solutions__list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--idata-fs-sm);
  color: var(--idata-text);
}
/* Dấu tick dựng bằng CSS thuần (không dùng content chứa chữ) */
.idata-solutions__list li::before,
.idata-solutions__list li::after {
  content: "";
  position: absolute;
  background: var(--idata-primary);
  border-radius: 2px;
}
.idata-solutions__list li::before { left: 4px; top: 12px; width: 6px; height: 2px; transform: rotate(45deg); }
.idata-solutions__list li::after { left: 7px; top: 10px; width: 11px; height: 2px; transform: rotate(-50deg); }

.idata-solutions__panel-side {
  align-self: start;
  padding: var(--idata-space-5);
  background: var(--idata-bg-alt);
  border-radius: var(--idata-radius-md);
  border: 1px solid var(--idata-border);
}
.idata-solutions__side-label {
  font-size: var(--idata-fs-xs);
  font-weight: var(--idata-font-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--idata-muted);
  margin-bottom: var(--idata-space-4);
}
.idata-solutions__stack { display: grid; gap: 8px; margin-bottom: var(--idata-space-5); }
.idata-solutions__stack li {
  padding: 9px 14px;
  background: var(--idata-surface);
  border: 1px solid var(--idata-border);
  border-radius: var(--idata-radius-sm);
  font-size: var(--idata-fs-sm);
  font-weight: var(--idata-font-weight-semibold);
  color: var(--idata-heading);
}


/* ============ RESPONSIVE ============ */

@media (max-width: 1024px) {
  .idata-solutions__panel { grid-template-columns: 1fr; gap: var(--idata-space-5); padding: var(--idata-space-6); }
}

@media (max-width: 480px) {
  .idata-solutions__tablist { justify-content: flex-start; }
  .idata-solutions__tab { font-size: var(--idata-fs-xs); padding: 9px 15px; }
}

@media (max-width: 375px) {
  .idata-solutions__panel { padding: var(--idata-space-4); }
}