/* ==========================================================================
   Kalasin Tourism — Design System v3 "Blush Rose" (หน้าบ้าน/เว็บไซต์สาธารณะ)
   รีดีไซน์รอบใหม่: โทนสีชมพูอ่อน (light pink) + ปรับโครงสร้างหน้าเว็บใหม่จริงๆ
   (นาวบาร์แบบแบนเต็มความกว้าง, ฟุตเตอร์หลายคอลัมน์, การ์ดแนะนำแบบไม่สมมาตร)
   ไม่ใช่แค่เปลี่ยนสีเดิมบนโครงสร้างเดิม — โหลดครั้งเดียวใน index.php (ทุกหน้า route ผ่านไฟล์นี้)
   ไม่แตะ HTML/PHP logic ที่เป็น dynamic loop / form action / session check
   ========================================================================== */

:root{
  --site-primary:      #d9698f;   /* ชมพูกุหลาบเข้ม (rose) */
  --site-primary-dark: #b8476e;
  --site-primary-rgb:  217,105,143;
  --site-gold:         #c9917a;   /* โรสโกลด์ (แทนทองเดิม) */
  --site-gold-light:   #fbe0ea;
  --site-gold-rgb:     201,145,122;
  --site-grad-start:   #f3a8c4;
  --site-grad-end:     #b8476e;
  --site-accent-start: #e895ab;
  --site-accent-end:   #a85a78;
  --site-ink:          #4a3540;   /* ม่วงเข้มอมชมพู แทนดำสนิท */
  --site-muted:        #9c8791;
  --site-border:       #f6dde6;
  --site-bg:           #fff8fa;   /* พื้นหลังชมพูอ่อนอมขาว (blush white) */
  --site-card:         #fffcfd;

  --site-r-lg: 26px;
  --site-r-md: 18px;
  --site-r-sm: 12px;

  --site-shadow-sm: 0 4px 16px rgba(184,71,110,.08);
  --site-shadow-md: 0 12px 30px rgba(184,71,110,.12);
  --site-shadow-lg: 0 22px 48px rgba(184,71,110,.18);
  --site-shadow-gold: 0 10px 26px rgba(201,145,122,.30);
  --site-shadow-brand: 0 10px 26px rgba(217,105,143,.28);
}

html{ scroll-behavior: smooth; }
body{ background: var(--site-bg) !important; color: var(--site-ink); }

::selection{ background: rgba(var(--site-gold-rgb),.28); color: var(--site-ink); }
*{ scrollbar-width: thin; scrollbar-color: #eab8cc transparent; }
*::-webkit-scrollbar{ width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb{ background: #eab8cc; border-radius: 20px; }
*::-webkit-scrollbar-thumb:hover{ background: var(--site-gold); }

/* ---------- ป้ายข้อความเล็กเหนือหัวข้อ สไตล์บูติก ---------- */
.site-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--site-gold); margin-bottom: 10px;
}
.site-eyebrow::before, .site-eyebrow::after{ content:''; width: 26px; height: 1px; background: var(--site-gold); }

/* ---------- ปุ่ม "More.." / เข้าสู่ระบบ ที่ใช้ซ้ำในหลายหน้า ใช้ !important
   เพราะแต่ละไฟล์ประกาศ .btn-knowledge ซ้ำในบล็อก <style> ของตัวเอง ซึ่งมาทีหลังไฟล์นี้ในลำดับ DOM ---------- */
.btn-knowledge{
  background: linear-gradient(135deg, var(--site-primary), var(--site-primary-dark)) !important;
  color: #fff !important;
  border: 1px solid rgba(var(--site-gold-rgb),.4) !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  box-shadow: 0 6px 16px rgba(184,71,110,.28) !important;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease !important;
}
.btn-knowledge:hover{
  transform: translateY(-2px);
  box-shadow: var(--site-shadow-gold) !important;
  color: #fff !important;
  border-color: var(--site-gold) !important;
}

/* ---------- ปุ่มทั่วไป ---------- */
.btn{ transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; border-radius: 12px; }
.btn.rounded-pill:hover, .btn-knowledge:hover{ transform: translateY(-2px); }
.btn-outline-danger{ border-width: 2px; }
.btn-outline-danger:hover{ background: var(--site-primary); border-color: var(--site-primary); }
.btn-primary{
  background: var(--site-primary) !important;
  border-color: var(--site-primary) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--site-primary-dark) !important;
  border-color: var(--site-primary-dark) !important;
}
.text-primary{ color: var(--site-primary) !important; }

/* ---------- Badge / การ์ด / ฟอร์ม ---------- */
.badge{ border-radius: 50px; font-weight: 700; letter-spacing: .2px; }
.card{
  border-radius: var(--site-r-md);
  background: var(--site-card);
  border: 1px solid var(--site-border) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ border-color: rgba(var(--site-primary-rgb),.4) !important; }
.form-control:focus, .form-select:focus{
  border-color: var(--site-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--site-primary-rgb), .14);
}
.alert{ border-radius: var(--site-r-sm); border: none; }
.alert-success{ background: #e6f2ea; color: #1e7a4c; }
.alert-danger{ background: #fbece9; color: #8a2f1f; }

/* ---------- Pagination ---------- */
.pagination{ gap: 4px; }
.page-link{ border: none; border-radius: 10px !important; color: var(--site-muted); font-weight: 600; margin: 0 2px; }
.page-link:hover{ background: var(--site-gold-light); color: var(--site-primary); }
.page-item.active .page-link{
  background: linear-gradient(135deg, var(--site-grad-start), var(--site-grad-end));
  color: #fff;
  box-shadow: var(--site-shadow-brand);
}

/* ---------- สถานะว่าง (ยังไม่มีข้อมูล/ค้นหาไม่พบ) ---------- */
.site-empty-state{ text-align: center; padding: 60px 20px; color: var(--site-muted); }
.site-empty-state i{ font-size: 2.6rem; opacity: .45; margin-bottom: 14px; display: block; color: var(--site-gold); }
.site-empty-state h5{ font-weight: 700; color: var(--site-ink); }

/* ---------- หัวข้อหมวดหมู่ ---------- */
.section-title{
  position: relative; font-weight: 800; color: var(--site-ink);
  margin-bottom: 3rem; text-align: center; font-size: 2.1rem; letter-spacing: .3px;
}
.section-title::after{
  content:''; width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--site-accent-start), var(--site-accent-end));
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); border-radius: 50px;
}

/* ---------- Hero: คลื่นโค้งคั่นด้านล่างแทนเส้นตรงเดิม + เนื้อหาลอยเหนือคลื่นเสมอ (v3.3) ---------- */
.hero-section{ position: relative; }
.hero-section > .container-fluid{ position: relative; z-index: 2; }
.hero-section::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; z-index: 1;
  background: var(--site-bg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C240,70 480,0 720,20 C960,40 1200,70 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C240,70 480,0 720,20 C960,40 1200,70 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   🆕 [v3 โครงสร้างใหม่] Flat navbar แบบเต็มความกว้าง — เดิมเป็นแคปซูลกระจกลอยมีขอบว่างรอบตัว
   เปลี่ยนเป็นแถบเรียบชิดขอบจอ มีเส้นไล่สีบางๆ คั่นด้านล่างแทนเงาลอยรอบด้าน
   ========================================================================== */
.site-navbar-flat{
    background: rgba(255, 248, 250, 0.96) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0;
    padding: 14px 25px;
    box-shadow: 0 6px 24px rgba(184,71,110,.10);
    border: none;
    border-bottom: 1px solid rgba(var(--site-primary-rgb),.18);
    position: relative;
}
.site-navbar-flat::after{
    content: '';
    position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: linear-gradient(90deg, var(--site-grad-start), var(--site-primary), var(--site-grad-start));
}

/* ==========================================================================
   🆕 [v3 โครงสร้างใหม่] ฟุตเตอร์หลายคอลัมน์ — เดิมเป็นบล็อกเดียวกึ่งกลางบรรทัดเดียว
   เปลี่ยนเป็น 3 คอลัมน์ (แบรนด์ / ลิงก์ด่วน / สถิติผู้เข้าชม) + แถบลิขสิทธิ์ด้านล่างแยกต่างหาก
   ========================================================================== */
.site-footer{
    background: linear-gradient(135deg, var(--site-primary), var(--site-primary-dark));
    color: #fbe0ea;
    padding: 60px 0 0;
    position: relative;
}
/* 🌟 [v3.3] คลื่นโค้งบางๆ คั่นด้านบนสุดของฟุตเตอร์ ให้ต่อเนื่องกับเนื้อหาด้านบนอย่างนุ่มนวล */
.site-footer::before{
    content: ''; position: absolute; left: 0; right: 0; top: -39px; height: 40px;
    background: var(--site-primary);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,5 480,35 720,18 C960,2 1200,32 1440,10 L1440,40 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,5 480,35 720,18 C960,2 1200,32 1440,10 L1440,40 Z'/%3E%3C/svg%3E");
}
.site-footer-brand{ font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.site-footer-brand i{ color: var(--site-gold-light); margin-right: 8px; }
.site-footer h6{ color: #fff; font-weight: 700; letter-spacing: .5px; margin-bottom: 16px; font-size: .95rem; text-transform: uppercase; }
.site-footer-links a{ color: #fbe0ea; opacity: .88; display: block; margin-bottom: 10px; text-decoration: none; transition: .2s; }
.site-footer-links a:hover{ opacity: 1; color: #fff; padding-left: 4px; }
.site-footer-social a{
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff; margin-right: 8px; transition: .2s;
}
.site-footer-social a:hover{ background: var(--site-gold-light); color: var(--site-primary-dark); transform: translateY(-2px); }
.site-footer-visitor{
    background: rgba(255,255,255,.10); border-radius: var(--site-r-md);
    padding: 16px 20px; display: flex; gap: 28px; align-items: center; justify-content: center;
}
.site-footer-visitor .visitor-item{ text-align: center; }
.site-footer-visitor .visitor-label{ font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #fbe0ea; opacity: .8; }
.site-footer-visitor .visitor-number{ font-size: 26px; font-weight: 800; color: #fff; }
.site-footer-bottom{
    border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding: 20px 0; text-align: center;
    font-size: .85rem; color: #fbe0ea; opacity: .85;
}
.site-footer-bottom a{ color: #fff; }

/* ==========================================================================
   🆕 [v3 โครงสร้างใหม่] แถบเมนูด่วนแบบลอยทับขอบล่างของ Hero (ใช้ใน main.php)
   ========================================================================== */
.site-quicknav{
    background: #fff; border-radius: 50px; box-shadow: var(--site-shadow-lg);
    padding: 10px; display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center;
    border: 1px solid var(--site-border);
}
.site-quicknav a{
    padding: 10px 20px; border-radius: 50px; font-weight: 600; font-size: .88rem;
    color: var(--site-ink); text-decoration: none; transition: .2s; white-space: nowrap;
}
.site-quicknav a:hover, .site-quicknav a.active{
    background: linear-gradient(135deg, var(--site-primary), var(--site-primary-dark)); color: #fff;
}
/* 🌟 ชื่อเมนูแบบย่อ (qn-text-mobile) มีไว้ใช้ตอน .site-quicknav เคยกลายเป็นแถบมือถือ — ซ่อนไว้เสมอบนจอคอมพิวเตอร์ กันซ้อนกับชื่อเต็ม (.qn-text) */
.site-quicknav a .qn-text-mobile{ display: none; }
/* 🌟 เดิมเมนูนี้กลายเป็นแถบลอยติดขอบล่างจอตอนมือถือ — ตอนนี้ย้ายหน้าที่นั้นไปให้ .global-quicknav แทน (แสดงทุกหน้าทั่วเว็บ)
   .site-quicknav บนมือถือเลยแค่ซ่อนไปเฉยๆ เหลือไว้ใช้เป็นแถบ pill ลอยทับขอบล่าง Hero เฉพาะจอคอมพิวเตอร์เหมือนเดิม (เฉพาะหน้าแรก) */
.site-quicknav-spacer{ display: none; }
@media (max-width: 767.98px){
    .site-quicknav{ display: none; }
}

/* ==========================================================================
   🦕 [ใหม่] ไดโนเสาร์ตัวน้อยเดินเล่นอยู่เหนือแถบเมนูด่วน .site-quicknav (ตกแต่งเฉยๆ ไม่กระทบลิงก์/ฟังก์ชันใดๆ)
   เดินช้าๆ ไป-กลับซ้ายขวาเหนือแถบ พร้อมขยับขาและพลิกหันหน้าตามทิศที่เดิน — โชว์เฉพาะจอคอมพิวเตอร์ (คู่กับ .site-quicknav)
   ========================================================================== */
.qn-dino-stage{ position: relative; display: inline-block; } /* ห่อ .site-quicknav แบบพอดีตัว กำหนดขอบเขตการเดินของไดโนเสาร์ให้เท่าความกว้างแถบเมนูพอดี */
.qn-dino-walker{
    position: absolute; top: -30px; left: 0; right: 0; height: 34px;
    pointer-events: none; z-index: 6;
}
.qn-dino-sprite{
    /* 🌟 [แก้บั๊ก] ตัวนี้ขยับแค่ตำแหน่ง (left) เท่านั้น ไม่มีการพลิก (scaleX) แล้ว — กันไม่ให้คำพูดในบับเบิลกลับด้านตอนเดินสวนทาง */
    position: absolute; top: 0; width: 42px; height: 34px;
    animation: qnDinoWalkPos 14s ease-in-out infinite;
}
.qn-dino-visual{
    /* 🌟 ตัวนี้แยกออกมาห่อเฉพาะรูปไดโนเสาร์+คิตตี้ ไว้พลิกหันทิศเวลาเดินกลับ โดยไม่กระทบบับเบิลคำพูดที่เป็น sibling กัน */
    position: absolute; top: 0; left: 0; width: 42px; height: 34px;
    animation: qnDinoFlip 14s ease-in-out infinite;
}
.qn-dino-visual svg{
    position: absolute; top: 0; left: 0; width: 42px; height: 34px;
    filter: drop-shadow(0 3px 3px rgba(15,25,20,.18));
}
.qn-dino-leg{ transform-box: fill-box; transform-origin: 50% 0%; animation: qnDinoStep .5s ease-in-out infinite; }
.qn-dino-leg-back{ animation-delay: .25s; }
@keyframes qnDinoStep{
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(16deg); }
}
@keyframes qnDinoWalkPos{
    0%   { left: 0%; }
    45%  { left: calc(100% - 42px); }
    50%  { left: calc(100% - 42px); }
    95%  { left: 0%; }
    100% { left: 0%; }
}
@keyframes qnDinoFlip{
    0%   { transform: scaleX(1); }
    45%  { transform: scaleX(1); }
    50%  { transform: scaleX(-1); }
    95%  { transform: scaleX(-1); }
    100% { transform: scaleX(1); }
}
/* 🗨️ คำทักทายน่ารักๆ ที่โผล่มาเป็นระยะเหนือหัวไดโนเสาร์ (คุมด้วย JS เล็กๆ ข้างมาร์กอัป สลับข้อความ ไม่กระทบโค้ดอื่น) */
.qn-dino-bubble{
    position: absolute; bottom: 100%; left: 50%; margin-bottom: 8px;
    transform: translateX(-50%) translateY(4px) scale(.75);
    background: #fff; color: #15803d; font-size: .7rem; font-weight: 700;
    white-space: nowrap; padding: 5px 12px; border-radius: 14px;
    box-shadow: 0 6px 14px rgba(15,25,20,.18);
    opacity: 0; transition: opacity .35s ease, transform .35s ease;
}
.qn-dino-bubble::after{
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #fff;
}
.qn-dino-bubble.qn-show{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
@media (max-width: 767.98px){
    .qn-dino-walker{ display: none; } /* ซ่อนคู่กับ .site-quicknav บนมือถือ (มีเมนูลัดด้านล่างจอแทนอยู่แล้ว) */
}

/* ==========================================================================
   🆕 [ใหม่] เมนูลัดไอคอนลอยติดขอบล่างจอ แสดง "ทุกหน้า" ทั่วเว็บ (ไม่ใช่แค่หน้าแรกเหมือน .site-quicknav เดิม)
   เฉพาะจอมือถือเท่านั้น ไม่กระทบการเข้าชมผ่านคอมพิวเตอร์เลย — ใช้ใน index.php (เทมเพลตกลางที่ทุกหน้า route ผ่าน)
   ========================================================================== */
.global-quicknav{ display: none; }
.global-quicknav-spacer{ display: none; }
@media (max-width: 767.98px){
    .global-quicknav{
        display: flex; flex-wrap: nowrap; justify-content: space-around;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        background: #fff; width: 100%; padding: 6px 2px; gap: 1px;
        border-radius: 18px 18px 0 0; border: none; border-top: 1px solid var(--site-border);
        box-shadow: 0 -6px 24px rgba(15,25,20,.14);
    }
    .global-quicknav a{
        flex: 1 1 0; min-width: 0; max-width: 58px; height: auto; min-height: 50px; padding: 6px 1px;
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        border-radius: 12px; color: var(--site-ink); text-decoration: none; transition: .2s;
    }
    .global-quicknav a i{ font-size: 1rem; }
    .global-quicknav a span{ font-size: .56rem; font-weight: 600; line-height: 1; white-space: nowrap; }
    .global-quicknav a:hover, .global-quicknav a.active{
        background: linear-gradient(135deg, var(--site-primary), var(--site-primary-dark)); color: #fff;
    }
    /* 🏠 ปุ่ม "โฮม" ตรงกลางแถว ให้เด่นกว่าปุ่มอื่นนิดหน่อย เพราะเป็นปุ่มสำคัญไว้กลับหน้าแรกจากทุกหน้า */
    .global-quicknav a.gq-home i{ font-size: 1.15rem; }
    .global-quicknav-spacer{ display: block; height: 74px; }
    /* 🌟 ขยับปุ่ม "กลับขึ้นบน" ให้ลอยสูงพ้นแถบเมนูลัด ไม่ให้ซ้อนทับกันบนมือถือ
       (ใช้ .back-to-top.show เพิ่ม specificity ให้ชนะกฎเดิม .back-to-top{bottom:22px} ที่อยู่ท้ายไฟล์) */
    .back-to-top.show{ bottom: 96px; }
}

/* ---------- การ์ดแนะนำแบบไม่สมมาตร (Featured grid) ---------- */
.featured-card-lg{ min-height: 100%; }
.featured-card-lg .img-zoom-wrapper img{ height: 420px !important; }
.featured-card-sm .img-zoom-wrapper img{ height: 195px !important; }

/* ==========================================================================
   🆕 [v3.1 ลูกเล่นใหม่] Scroll-reveal, navbar หดตัวตอนเลื่อน, ปุ่มกลับขึ้นบน,
   เส้นใต้หัวข้อระยิบระยับ, การ์ดมีแสงพาดตอน hover, กลีบดอกไม้ลอยทั่วเว็บ,
   เมนูด่วนเด้งเข้าทีละปุ่ม — ทั้งหมดเป็น CSS/JS เสริมล้วนๆ ไม่แตะ PHP/SQL หรือ
   JS เดิมที่ผูกกับปุ่ม/ฟอร์มใดๆ ทั้งสิ้น
   ========================================================================== */

/* ---------- Scroll reveal (fade-up เมื่อเลื่อนเข้ามาในจอ) ---------- */
.reveal-up{
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.reveal-up.in-view{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Navbar หดตัว + เงาเข้มขึ้นตอนเลื่อนหน้าจอลง ---------- */
.nav-wrapper.scrolled .glass-navbar{
  padding-top: 8px !important; padding-bottom: 8px !important;
  box-shadow: 0 10px 28px rgba(184,71,110,.16);
}
.glass-navbar{ transition: padding .25s ease, box-shadow .25s ease; }

/* ---------- หัวข้อหมวดหมู่: เรืองแสงด้านหลัง + เส้นใต้ไล่สีวิบวับ ---------- */
.section-title{ position: relative; z-index: 1; }
.section-title::before{
  content: ''; position: absolute; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--site-primary-rgb),.10), transparent 72%);
  top: -75px; left: 50%; transform: translateX(-50%); z-index: -1;
}
.section-title::after{
  background: linear-gradient(90deg, var(--site-accent-start), var(--site-gold-light), var(--site-accent-end)) !important;
  background-size: 200% 100% !important;
  animation: siteShimmerLine 3.2s ease-in-out infinite;
}
@keyframes siteShimmerLine{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

/* ---------- การ์ด: แสงพาดเฉียงวิ่งผ่านตอน hover ---------- */
.card, .modern-card, .news-card, .search-result-card{ position: relative; overflow: hidden; }
.card::before, .modern-card::before, .news-card::before, .search-result-card::before{
  content: ''; position: absolute; top: 0; left: -160%; width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .75s ease; pointer-events: none; z-index: 3;
}
.card:hover::before, .modern-card:hover::before, .news-card:hover::before, .search-result-card:hover::before{ left: 130%; }

/* ---------- เมนูด่วนลอย: เด้งเข้าทีละปุ่มตอนโหลดหน้า ---------- */
.site-quicknav a{ opacity: 0; transform: translateY(10px); animation: qnEnter .5s ease forwards; }
.site-quicknav a:nth-child(1){ animation-delay: .05s; }
.site-quicknav a:nth-child(2){ animation-delay: .12s; }
.site-quicknav a:nth-child(3){ animation-delay: .19s; }
.site-quicknav a:nth-child(4){ animation-delay: .26s; }
.site-quicknav a:nth-child(5){ animation-delay: .33s; }
.site-quicknav a:nth-child(6){ animation-delay: .40s; }
@keyframes qnEnter{ to{ opacity: 1; transform: translateY(0); } }

/* ---------- คลื่นโค้งคั่นระหว่าง Hero กับเนื้อหา (main.php) ---------- */
.site-wave-wrap{ position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; }
.site-wave-divider{ display: block; width: 100%; height: 56px; }
.site-wave-divider path{ fill: var(--site-bg); }

/* ---------- ปุ่มลอย "กลับขึ้นด้านบน" ---------- */
.back-to-top{
  position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--site-primary), var(--site-primary-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  box-shadow: var(--site-shadow-lg); border: none; cursor: pointer; z-index: 1045;
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: all .3s ease;
}
.back-to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(184,71,110,.35); }

/* ---------- กลีบดอกไม้ชมพูลอยเบาๆ ทั่วเว็บ (ตกแต่งเฉยๆ ไม่บังการคลิก) ---------- */
.petal-field{ position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.petal{
  position: absolute; top: -8%; will-change: transform; animation: petalFall linear infinite;
  filter: drop-shadow(0 2px 3px rgba(184,71,110,.15));
}
@keyframes petalFall{
  0%{ transform: translateY(-10vh) translateX(0) rotate(0deg); }
  100%{ transform: translateY(112vh) translateX(46px) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .petal-field{ display: none; }
}

/* ==========================================================================
   🆕 [v3.3 ลูกเล่นใหม่] รายละเอียดปลีกย่อยที่ทำให้เว็บดูมีชีวิตขึ้นทั่วทั้งเว็บ:
   ปุ่มกดแล้วยุบตัวนิดๆ (tactile feedback), เมนู dropdown เด้งเข้านุ่มๆ,
   ขอบการ์ดเรืองแสงไล่สีตอน hover, ลิงก์มีเส้นใต้วิ่งเข้า, badge เด้งตอน hover
   ========================================================================== */

/* ---------- ปุ่ม: กดแล้วยุบตัวเบาๆ ให้ความรู้สึกตอบสนองจริง ---------- */
.btn:active, .btn-knowledge:active, .page-link:active{ transform: scale(.96); }

/* ---------- Dropdown menu: เด้งเข้านุ่มๆ ตอนเปิด แทนการโผล่มาทันที ---------- */
.dropdown-menu{ animation: siteDropdownIn .18s cubic-bezier(.2,.8,.4,1); transform-origin: top center; }
@keyframes siteDropdownIn{
  from{ opacity: 0; transform: translateY(-8px) scale(.96); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- การ์ด: ขอบเรืองแสงไล่สีบางๆ ตอน hover (เสริมจากแสงพาดเดิม) ---------- */
.card, .modern-card, .news-card, .search-result-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover, .modern-card:hover, .news-card:hover, .search-result-card:hover{
  box-shadow: 0 18px 40px rgba(184,71,110,.16), 0 0 0 1px rgba(var(--site-primary-rgb),.14);
}

/* ---------- ลิงก์เนื้อหา: เส้นใต้ไล่สีวิ่งเข้าตอน hover ---------- */
.brand-accent-link, .btn-link, a.view-more{ position: relative; }
.brand-accent-link::after, a.view-more::after{
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--site-primary), var(--site-gold));
  transition: width .25s ease;
}
.brand-accent-link:hover::after, a.view-more:hover::after{ width: 100%; }

/* ---------- Badge: เด้งเบาๆ ตอน hover ---------- */
.badge-custom, .search-type-badge{ transition: transform .2s ease; }
.badge-custom:hover, .search-type-badge:hover{ transform: scale(1.08); }

/* ---------- Selection สีชมพูให้เข้าธีม (นอกเหนือจาก ::selection ด้านบนที่ตั้ง base ไว้แล้ว) ---------- */
img{ transition: filter .3s ease; }