body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.inner {
  text-align: left;
}

span {
  font-size: 18px;
}

.container {
  display: flex;
  align-items: center;
  /* จัดวางให้อยู่ตรงกลาง */
}

.user-info {
  margin-left: 10px;
  /* เพิ่ม margin ระหว่างรูปภาพกับข้อความ */
}

.content-container {
  max-width: 1300px;
  /* ตั้งค่าขนาดสูงสุดของ container */
  margin: 0 auto;
  /* ทำให้ container อยู่กึ่งกลาง */
}

.img-circle.elevation-21 {
  width: 30px;
  /* ปรับขนาดตามที่ต้องการ */
  height: 30px;
  /* ปรับขนาดตามที่ต้องการ */
  border-radius: 10%;
  /* ทำให้มีรูปร่างวงกลม */
  object-fit: cover;
  /* ปรับขนาดรูปภาพให้พอดีในวงกลม */
}

.card {
  border-radius: 1px;
  /* Adds rounded corners to the card */
  overflow: hidden;
  /* Ensures the image and other content stay within the card */
}

.text-center-align {
  display: flex;
  justify-content: center;
  /* จัดข้อความให้อยู่กึ่งกลางในแนวนอน */
  align-items: center;
  /* จัดข้อความให้อยู่กึ่งกลางในแนวตั้ง */
  text-align: center;
  /* จัดข้อความให้อยู่กึ่งกลางภายในบล็อคข้อความ */
  height: 100%;
  /* ทำให้ div ครอบคลุมความสูงทั้งหมด */
}

.center {
  text-align: center;
  /* จัดให้ภาพอยู่ตรงกลาง */
}
.red {
  color: red;
}