.roi-card{

  background:
  linear-gradient(
  135deg,
  #08142d,
  #091a39,
  #06122a
  );

  border-radius:24px;

  padding:36px;

  color:#fff;

  max-width:100%;
  font-family: sarabun;

}



/* header */

.roi-header{

  display:flex;

  justify-content:space-between;

  gap:20px;

  margin-bottom:24px;

}



.roi-title h2{

  margin:0;

  font-size:42px;

}



.roi-title p{

  color:#e9eef6;

}



.roi-badge{

  background:#0056d6;

  padding:12px 18px;

  border-radius:999px;

}



/* สำคัญ */

.roi-table-wrap{

  width:100%;

  overflow-x:auto;

  overflow-y:hidden;

  display:block;

}



/* สำคัญ */

.roi-table{

  border-collapse:collapse;

  min-width:900px;

  width:max-content;

}



.roi-table th,
.roi-table td{

  white-space:nowrap;

  padding:22px;

  border-bottom:
  1px solid rgba(255,255,255,.08);

}



.roi-table th{

  color:#c6d3e7;

}



.highlight{

  color:#00ffb0;

  font-weight:700;

}



/* mobile */

@media (max-width:768px){

  .roi-card{

    padding:20px;

  }

  .roi-header{

    flex-direction:column;

  }

  .roi-title h2{

    font-size:26px;

  }

}