/**
 * ═══════════════════════════════════════════════════════════════════════════
 * 🎨 CUSTOM CSS — แก้ไขการแสดงผลเองที่นี่
 *
 * ไฟล์นี้สำหรับปรับแต่ง CSS เพิ่มเติมหรือ override Tailwind
 *
 * วิธีใช้:
 * 1. แก้ไขไฟล์นี้ได้ตามสบาย (VS Code format ได้ปกติ)
 * 2. อัพโหลดขึ้น host ที่ dist/custom.css
 * 3. index.php โหลดไฟล์นี้หลัง tailwind.min.css แล้ว → override ได้อัตโนมัติ
 *
 * หลักการ:
 * - ใช้ !important เมื่อต้อง override Tailwind
 * - หรือใช้ specificity สูงกว่า (เช่น body .class)
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════
   🔗 LINK UNDERLINE REMOVAL — ลบเส้นใต้ของลิ้งค์ทั้งหมด
   ═══════════════════════════════════════════════════════════════════════════ */

/* ลบเส้นใต้ลิ้งค์ทุกสถานะ (default, hover, focus, visited, active) */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}

/* ถ้าต้องการให้เส้นใต้กลับมาตอน hover เฉพาะลิ้งค์ในเนื้อหา บทความ
   (uncomment ด้านล่างนี้ถ้าต้องการ) */
/*
article a:hover,
.prose a:hover,
main p a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   🔵 1. ตัวอย่าง: ปรับสี Pastel Blue Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Example: เปลี่ยนโทนสี pastel-navy ให้เข้มขึ้น */
/*
.bg-pastel-navy {
  background-color: #164a63 !important;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   📱 2. ตัวอย่าง: ปรับ Hero Section
   ═══════════════════════════════════════════════════════════════════════════ */

/* ปรับความสูง Hero บนมือถือ */
/*
@media (max-width: 640px) {
  section[aria-label="ส่วนหลัก"] {
    min-height: 70vh !important;
  }
}
*/

/* ปรับขนาดฟอนต์ Hero title */
/*
.font-display.text-xl {
  letter-spacing: -0.02em;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   🃏 3. ตัวอย่าง: ปรับ Quick Access Cards
   ═══════════════════════════════════════════════════════════════════════════ */

/* ทำให้ card มีเงาเด้งกว่าเดิมเมื่อ hover */
/*
.group:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(46, 125, 155, 0.3) !important;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   📰 4. ตัวอย่าง: ปรับ News Section
   ═══════════════════════════════════════════════════════════════════════════ */

/* ปรับระยะห่างระหว่าง news cards */
/*
.grid.sm\:grid-cols-2.lg\:grid-cols-3 {
  gap: 1.5rem !important;
}

@media (min-width: 1024px) {
  .grid.sm\:grid-cols-2.lg\:grid-cols-3 {
    gap: 2.5rem !important;
  }
}
*/

/* เพิ่ม border-radius ของ news card */
/*
.rounded-2xl {
  border-radius: 1.5rem !important;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   📊 5. ตัวอย่าง: ปรับ Stats Section
   ═══════════════════════════════════════════════════════════════════════════ */

/* เพิ่มขนาดตัวเลข counter */
/*
.counter {
  font-size: clamp(3rem, 8vw, 6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   🎨 6. ตัวอย่าง: Animation Customization
   ═══════════════════════════════════════════════════════════════════════════ */

/* ลดความเร็ว marquee (จาก 40s เป็น 60s) */
/*
.animate-marquee {
  animation-duration: 60s !important;
}
*/

/* เพิ่ม fade animation ให้ hero slider */
/*
.hero-slide {
  transition: opacity 1.2s ease-in-out !important;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   📝 7. ตัวอย่าง: Typography
   ═══════════════════════════════════════════════════════════════════════════ */

/* ปรับ line-height ของ body text */
/*
body {
  line-height: 1.75 !important;
}

p {
  text-wrap: pretty;
}

h1, h2, h3 {
  text-wrap: balance;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   🌙 8. ตัวอย่าง: Dark Mode Custom
   ═══════════════════════════════════════════════════════════════════════════ */

/*
body.dark-mode .bg-pastel-frost {
  background-color: #0f172a !important;
}

body.dark-mode .text-gray-700 {
  color: #cbd5e1 !important;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   🔧 9. ตัวอย่าง: แก้ Footer / Navbar
   ═══════════════════════════════════════════════════════════════════════════ */

/* เพิ่ม padding ให้ footer */
/*
footer {
  padding-top: 4rem !important;
  padding-bottom: 2rem !important;
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   💡 10. ตัวอย่าง: เพิ่ม Component ใหม่
   ═══════════════════════════════════════════════════════════════════════════ */

/* สร้าง class ใหม่ใช้เอง */
/*
.my-custom-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #7EC8E3, #22D3EE);
  color: white;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.my-custom-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
}
*/


/* ═══════════════════════════════════════════════════════════════════════════
   📱 11. Responsive Fine-tuning
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile (< 640px) */
@media (max-width: 639px) {
  /* แก้ปัญหาการแสดงผลเฉพาะมือถือที่นี่ */
}

/* Tablet (640px - 1024px) */
@media (min-width: 640px) and (max-width: 1023px) {
  /* แก้ปัญหาการแสดงผลเฉพาะ tablet ที่นี่ */
}

/* Desktop (> 1024px) */
@media (min-width: 1024px) {
  /* แก้ปัญหาการแสดงผลเฉพาะ desktop ที่นี่ */
}


/* ═══════════════════════════════════════════════════════════════════════════
   🎯 เขียน CSS ของคุณด้านล่างนี้ได้เลย
   ═══════════════════════════════════════════════════════════════════════════ */

/* ----- เริ่มเขียนที่นี่ ----- */