.history_text {
  /* 1. สั่งย่อหน้าบรรทัดแรก (ปรับตัวเลขได้ เช่น 40px, 50px) */
  text-indent: 50px;

  /* 2. (แนะนำ) จัดขอบซ้าย-ขวาให้เท่ากันเหมือนหนังสือ */
  text-align: justify;
  text-justify: inter-word;
  /* ช่วยให้การกระจายคำภาษาไทยสวยขึ้นในบางเบราว์เซอร์ */

  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
  /* ระยะห่างบรรทัด */
}

body {
  font-family: "Sarabun", sans-serif;
  background-color: #f8f9fa;
}

.oar_km_section {
  padding: 50px 0;
}

.heading_container h2 {
  font-weight: bold;
  color: #333;
}

.history_img_box {
  width: 100%;
  /* กำหนดความสูงคงที่ หรือใช้ max-height ก็ได้ */
  height: 400px; /* ปรับความสูงตามต้องการ */
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0; /* สีพื้นหลังกรณีโหลดรูปไม่ทัน */
  display: flex;
  align-items: center;
  justify-content: center;
}

.history_img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* สำคัญ: ตัดส่วนเกินออกเพื่อให้รูปเต็มกรอบ */
  /* object-position: center; จัดกึ่งกลางรูป */
}

.history_img_box img:hover {
  transform: scale(1.02);
}

.meta-data-box {
  border-left: 5px solid #ffc107;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filters-content p {
  font-size: 1.1rem;
  color: #555;
  text-align: justify;
}

/* --- สไตล์สำหรับดาวโหวต --- */
.star-rating {
  cursor: pointer;
  display: inline-block;
}

.star-rating .fa {
  font-size: 1.2rem;
  color: #ddd;
  transition: color 0.2s;
}

.star-rating .fa.checked {
  color: #ffc107;
}

/* สีเหลือง */
.star-rating:hover .fa {
  color: #ffc107;
}

/* Hover แล้วเหลืองหมด */
.star-rating .fa:hover ~ .fa {
  color: #ddd;
}

/* เทคนิค CSS: ตัวหลังเมาส์กลับเป็นสีเทา */



.spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3em;
}

.navbar-custom {
  /* เปลี่ยนเป็นสีม่วงเข้มและปรับให้โปร่งใสเล็กน้อย */
  background-color: rgba(80, 50, 160, 0.9);

  /* คุณอาจต้องลองปรับเปลี่ยนตัวเลขเพื่อให้ได้สีและความโปร่งใสที่ตรงใจที่สุด */
}

/* --- สไตล์สำหรับแถบแจ้งเตือน (Notification Bar) --- */
#customNotification {
  position: fixed;
  top: 30px; /* ระยะห่างจากขอบบน */
  right: 30px; /* ระยะห่างจากขอบขวา */
  /* ถ้าอยากให้อยู่ตรงกลางด้านบน ให้ใช้ 3 บรรทัดนี้แทน right: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    */

  background-color: #fffbe6; /* สีพื้นหลังเหลืองอ่อน */
  color: #856404; /* สีตัวอักษรน้ำตาลเข้ม */
  border: 2px solid #ffc107; /* สีขอบเหลืองเข้ม */

  padding: 15px 25px;
  border-radius: 50px; /* ขอบมนแบบแคปซูล */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* เงาฟุ้งๆ */
  z-index: 99999; /* ให้อยู่บนสุดเสมอ */

  display: none; /* ซ่อนไว้ก่อน */
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
}

#customNotification i {
  margin-right: 10px;
  font-size: 1.3rem;
  color: #ffc107; /* สีไอคอนหัวใจ */
}