/* === Google Font Import - Poppins === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- 🎨 1. กำหนดตัวแปรสี (ปรับโทนหม่นแล้ว) --- */
:root {
  /* โหมดปกติ (Light Mode) - ปรับสีให้หม่นลง (Muted) */
  --page-bg: #E4E9F7;                     /* (สีเดิม - หม่นอยู่แล้ว) */
  --card-bg: #fff;                       
  
  /* --- 🎨 นี่คือสีที่ปรับใหม่ --- */
  --card-accent-bg: #9b8abf;              /* ปรับจาก #7d2ae8 (สีม่วงหม่น) */
  --card-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

  --image-frame-bg: #fff;                
  --image-border-color: 3px solid #fff;

  --accent-text-icon: #fff;              
  --main-text-color: #333;               
  --rating-star-color: #9b8abf;           /* ปรับจาก #7d2ae8 (สีม่วงหม่น) */

  --btn-bg: #5a7a9c;                     /* ปรับจาก #015fc9 (สีน้ำเงินหม่น) */
  --btn-text: #fff;                      
  --btn-hover-bg: #425f7c;               /* ปรับจาก #104480 (เข้มขึ้น) */

  --swiper-color: #9b8abf;                /* ปรับจาก #7d2ae8 (สีม่วงหม่น) */
}

/* --- 🌙 2. กำหนดสีโหมดหม่น (Dark Mode) --- */
/* (ส่วนนี้เรายังเก็บไว้ แต่เว็บจะไม่เริ่มที่โหมดนี้) */
html[data-theme="dark"] {
  --page-bg: #121212;           /* พื้นหลังเว็บ (ดำ) */
  --card-bg: #1E1E1E;           /* พื้นหลังการ์ด (เทาเข้ม) */
  --card-accent-bg: #7d2ae8;    /* สีแถบด้านบน (คงเดิม) */
  --card-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); /* เข้มขึ้น */
  
  --image-frame-bg: #1E1E1E;    /* สีขอบกรอบรูป (เข้ากับพื้นหลังการ์ด) */
  --image-border-color: 3px solid #1E1E1E;

  --accent-text-icon: #fff;     /* (คงเดิม) */
  --main-text-color: #E0E0E0;   /* สีข้อความหลัก (ขาวเทา) */
  --rating-star-color: #7d2ae8; /* (คงเดิม) */
  --swiper-color: #7d2ae8;
}

/* --- 3. ใช้ตัวแปรกับ CSS เดิมของคุณ --- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /* เพิ่ม transition เพื่อความนุ่มนวล */
  transition: background-color 0.3s, color 0.3s;
}

/* เพิ่ม body style */
body {
  background-color: var(--page-bg);
}

section {
  position: relative;
  height: 450px;
  /* padding: 15px; */ 
  padding: 0 70px;
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
}

.card {
  position: relative;
  background: var(--card-bg); /* << ใช้ตัวแปร */
  border-radius: 20px;
  margin: 20px 0;
  box-shadow: var(--card-shadow); /* << ใช้ตัวแปร */
}

.card::before {
  content: "";
  position: absolute;
  height: 40%;
  width: 100%;
  background: var(--card-accent-bg); /* << แก้ไข: ใช้สี accent */
  border-radius: 20px 20px 0 0;
}

.card .card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  position: relative;
  z-index: 100;
}

section .card .image {
  height: 140px;
  width: 140px;
  border-radius: 50%;
  padding: 3px;
  background: var(--image-frame-bg); /* << ใช้ตัวแปร */
}

section .card .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: var(--image-border-color); /* << ใช้ตัวแปร */
  
  /* เพิ่ม transition สำหรับ filter */
  transition: filter 0.3s ease-in-out;
}

/* --- 🖼️ 4. ทำให้รูปภาพหม่นลงใน Dark Mode --- */
/* (ส่วนนี้จะทำงาน "ถ้า" มีการสลับไป Dark Mode เท่านั้น) */
html[data-theme="dark"] section .card .image img {
  filter: saturate(70%) brightness(85%);
}
html[data-theme="dark"] section .card .image img:hover {
  filter: none; /* เอาฟิลเตอร์ออกเมื่อ hover */
}


.card .media-icons {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card .media-icons i {
  color: var(--accent-text-icon); /* << แก้ไข: ใช้สี accent text */
  opacity: 0.6;
  margin-top: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card .media-icons i:hover {
  opacity: 1;
}

.card .name-profession {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  color: var(--main-text-color); /* << แก้ไข: ใช้สีข้อความหลัก */
}

.name-profession .name {
  font-size: 20px;
  font-weight: 600;
}

.name-profession .profession {
  font-size: 15px;
  font-weight: 500;
}

.card .rating {
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.card .rating i {
  font-size: 18px;
  margin: 0 2px;
  color: var(--rating-star-color); /* << แก้ไข: ใช้สีดาว */
}

.card .button {
  width: 100%;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
}

.card .button button {
  background: var(--btn-bg); /* << ใช้ตัวแปร */
  outline: none;
  border: none;
  color: var(--btn-text); /* << ใช้ตัวแปร */
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.button button:hover {
  background: var(--btn-hover-bg); /* << ใช้ตัวแปร */
}

.swiper-pagination {
  position: absolute;
}

.swiper-pagination-bullet {
  height: 7px;
  width: 26px;
  border-radius: 25px;
  background: var(--swiper-color); /* << ใช้ตัวแปร */
}

.swiper-button-next,
.swiper-button-prev {
  opacity: 0.7;
  color: var(--swiper-color); /* << ใช้ตัวแปร */
  transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
  color: var(--swiper-color); /* << ใช้ตัวแปร */
}

/* Responsive media query code for small screens */
@media (max-width: 768px) {
  section {
    padding: 15px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

/* === โค้ดบังคับสีหม่น (วางไว้ล่างสุด) === */
.bg-primary {
    background-color: var(--bs-primary) !important; 
}