body {
  font-family: "Roboto", sans-serif;
}

.card {
  padding: 10px 20px;
  width: 300px;
  background: linear-gradient(141deg, #4b6a81 0%, #254159 30%, #0b1d2d 90%);
  border-radius: 5px;
}
/* ส่วนที่ 1 */
.content {
  display: flex; /* กำหนด display เป็น flex */
  align-items: flex-end; /* สั่งให้ item รูปภาพและค่าเงินลงมาอยู่ด้านล่าง */
  justify-content: space-between; /* สั่งให้ item กระจายตัวออกไปให้ชิดซ้ายและขวา */
}
.content .image {
  display: flex;
  flex-direction: column; /* กำหนดให้ item เรียงตัวลงมา */
  align-items: center; /* กำหนดให้รูปอยู่ตรงกลางเส้นแกน */
}
.content .image .visa {
  width: 60px; /* กำหนดขนาดรูปภาพ */
}
.content .image .chip {
  width: 40px; /* กำหนดขนาดรูปภาพ */
  height: 30px;
}
.detail-amount {
  color: #fff;
  text-align: right; /* สั่งให้ข้อความ จำนวนเงิน และ สถานะ ชิดขวา */
}
.detail-amount .status {
  color: rgb(13, 156, 13);
  font-size: 12px;
  padding-right: 20px;
}
.detail-amount .amount {
  font-size: 30px;
}
/* ส่วนที่ 2 */
.content-digit {
  margin: 15px 0;
  display: flex; /* กำหนด display เป็น flex */
  justify-content: space-between; /* สั่งให้ item กระจายตัวออกไปให้ชิดซ้ายและขวา */
  color: rgba(255, 255, 255, 0.801);
  font-size: 20px;
}
/* ส่วนที่ 3 */
.expire {
  margin: 10px 0;
  display: flex; /* กำหนด display เป็น flex */
  justify-content: space-between; /* สั่งให้ item กระจายตัวออกไปให้ชิดซ้ายและขวา */
  color: #fff;
  font-size: 16px;
}
.expire-centent {
  display: flex;
  align-items: center; /* กำหนดให้รูปอยู่ตรงกลางเส้นแกน */
}
.expire span.title {
  padding-top: 2px;
  font-size: 10px;
}
.expire span.title::after {
  content: " * ";
  padding: 0 3px;
}