/* ═══════════════════════════════════════════════════════════════
   หน้า "เรื่องราว/องค์ความรู้" (/spa_knowledge)
   ต้องโหลดหลัง onzon.css และ blocks.css
   ═══════════════════════════════════════════════════════════════ */

/* ── 2 · แถบกรองหมวดหมู่ + ค้นหา ── */
.kn-filter {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  padding: 12px clamp(12px, 1.4vw, 18px);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.kn-chips {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.kn-chip {
  padding: 7px 16px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.kn-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.kn-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.kn-search {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: clamp(200px, 20vw, 280px);
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-faint);
}
.kn-search input {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink);
  outline: none;
}
.kn-search input::placeholder {
  color: var(--ink-faint);
}

/* ── 3 · บทความแนะนำ — แถวเลื่อนแนวนอน ── */
.kn-picks-wrap {
  position: relative;
}
/* เลื่อนด้วยการ scroll แนวนอน ไม่ใช่ transform — ปัดนิ้วบนมือถือได้เองโดยไม่ต้องเขียน JS เพิ่ม
   scroll-snap ทำให้หยุดตรงขอบการ์ดพอดีทุกครั้ง */
.kn-picks-row {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* ⚠️ overflow-x:auto บังคับให้แกนตั้งถูกครอบตัดไปด้วย — การ์ดที่ยกขึ้นตอน hover
     (translateY -3px) กับเงาที่ใหญ่ขึ้นเลยโดนตัดขาด
     แก้ด้วยการเผื่อ padding ไว้ในกล่องเลื่อน แล้วหักคืนด้วย margin ติดลบ ตำแหน่งจึงไม่ขยับ */
  padding: 10px 0 14px;
  margin: -10px 0 -10px;
  scrollbar-width: none;
}
.kn-picks-row::-webkit-scrollbar {
  display: none;
}
.kn-card {
  flex: 0 0 clamp(172px, 13vw, 216px);   /* 🎛️ ความกว้างการ์ด */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* ให้รูปโดนตัดตามมุมมนของการ์ด */
  background: var(--bg);   /* 🎛️ สีพื้นการ์ด — ใช้สีเดียวกับพื้นหน้าเว็บ ไม่ใช่ --panel ที่ขาวกว่า */
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  /* ยกการ์ดขึ้นเป็นเลเยอร์ของตัวเอง — กัน "คราบ" เส้นจางที่ค้างบนการ์ดข้างเคียง
     เวลา transform ตอน hover ไปสั่งวาดใหม่ทับกล่องที่กำลังเลื่อนแนวนอนอยู่ */
  will-change: transform;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.kn-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.kn-card-media {
  position: relative;
}
.kn-card-media img {
  width: 100%;
  aspect-ratio: 16 / 10;   /* 🎛️ สัดส่วนรูปการ์ด */
  object-fit: cover;
  display: block;
}
/* ส่วนข้อความ — padding อยู่ที่นี่ที่เดียว รูปด้านบนจึงชนขอบการ์ดพอดี */
.kn-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px 12px;
}
.kn-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.58rem;
  line-height: 1;
}
/* ป้ายหมวดแบบไม่ทับรูป (ใช้ในการ์ดเรื่องเด่น) */
.kn-badge.is-plain {
  position: static;
  align-self: flex-start;
  background: var(--accent-wash);
  color: var(--accent);
}
.kn-card h3 {
  font-size: 0.79rem;   /* 🎛️ ขนาดหัวข้อการ์ด */
  font-weight: 700;
  color: var(--accent);
  line-height: 1.45;
  /* ตัดที่ 2 บรรทัดแล้วต่อด้วย … */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.kn-card p {
  font-size: 0.67rem;
  line-height: 1.65;
  color: var(--ink-soft);
  flex: 1 1 auto;
  /* ตัดที่ 3 บรรทัดแล้วต่อด้วย … */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.kn-read {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
  font-size: 0.62rem;
  color: var(--ink-faint);
}
/* ปุ่มเลื่อน — ลอยคร่อมขอบขวาของแถว */
.kn-nav {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.kn-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.kn-empty {
  padding: 26px 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ── 4 · เรื่องเด่น + บทความยอดนิยม ── */
.kn-main {
  display: grid;
  grid-template-columns: 2.3fr 1fr;   /* 🎛️ (เรื่องเด่น + ข่าวสาร) | ยอดนิยม — ฝั่งขวากิน ~30% ตามแบบ */
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
}
/* คอลัมน์ซ้าย — เรื่องเด่นซ้อนบน สมัครรับข่าวสารซ้อนล่าง */
.kn-col {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 26px);
}
/* ยืดกินที่ว่างที่เหลือในคอลัมน์ซ้าย เพื่อให้ก้นการ์ดตรงกับกล่องยอดนิยมฝั่งขวา
   ปลอดภัยแล้วเพราะรูปเป็น absolute ไม่ได้เป็นตัวกำหนดความสูงการ์ดอีก
   ผลพลอยได้: สไลด์ทุกเรื่องสูงเท่ากัน การ์ดไม่กระตุกตอนสลับแม้ข้อความยาวไม่เท่ากัน */
.kn-feat-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.kn-feat-wrap .kn-feat {
  flex: 1 1 auto;
}
.kn-feat {
  display: flex;
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.kn-feat-media {
  position: relative;
  flex: 0 0 42%;   /* 🎛️ สัดส่วนรูป | ข้อความ */
}
/* ⚠️ ต้อง absolute — ถ้าปล่อยเป็น block ที่ height:100% ในกล่องที่ยังไม่รู้ความสูง
   เบราว์เซอร์จะเอา "ความสูงจริงของไฟล์รูป" ไปคิดความสูงการ์ดก่อน
   รูปแนวตั้งใบเดียวก็ดันการ์ดสูงพรวดจนเหลือที่ว่างกลางกล่องข้อความ
   พอ absolute แล้วรูปไม่มีส่วนกำหนดความสูง — ข้อความเป็นตัวคุมแทน */
.kn-feat-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kn-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.64rem;
  line-height: 1;
}
.kn-feat-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(14px, 1.6vw, 22px);
}
.kn-feat-body h2 {
  display: flex;
  flex-direction: column;
  font-size: clamp(0.98rem, 1.3vw, 1.24rem);   /* 🎛️ ขนาดหัวข้อเรื่องเด่น */
  font-weight: 700;
  color: var(--accent);
  line-height: 1.45;
}
.kn-feat-body p {
  font-size: 0.74rem;
  line-height: 1.8;
  color: var(--ink-soft);
  /* ตัดที่ 4 บรรทัดแล้วต่อด้วย … */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.kn-feat-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem !important;
  color: var(--ink-faint) !important;
}
.kn-dot {
  padding: 0 6px;
}
.kn-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.74rem;
}
.kn-btn.is-ghost {
  align-self: center;
  justify-content: center;
  margin-top: auto;   /* กล่องถูกยืดให้เท่าคอลัมน์ซ้าย ปุ่มจึงลงไปเกาะก้นกล่อง */
  padding: 11px 30px;   /* 🎛️ ขนาดปุ่ม */
  font-size: 0.76rem;
  border: 1px solid var(--hair);
  background: var(--panel);
  color: var(--ink-soft);
}
/* จุดบอกลำดับสไลด์ — ตอนนี้ยังเป็นภาพนิ่ง รอผูกกับบทความเด่นหลายเรื่องตอนต่อ DB */
.kn-dots {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.kn-dots button {
  display: block;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--hair);
  cursor: pointer;
  transition:
    width 0.25s,
    background 0.25s;
}
.kn-dots button.is-on {
  width: 18px;
  background: var(--accent);
}

/* บทความยอดนิยม */
.kn-pop {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
/* หัวข้อกล่องยอดนิยม — ใบไม้ซ้ายข้างเดียว ไม่มีเส้นคั่นใต้หัวข้อ */
.kn-pop-h::after {
  display: none;
}
.kn-pop-h {
  margin-bottom: 6px;
}
.kn-pop-list {
  list-style: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;   /* 🎛️ ระยะระหว่างเส้นคั่นเส้นสุดท้ายกับปุ่ม */
}
.kn-pop-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}
.kn-pop-list li:first-child {
  padding-top: 0;
}
/* เส้นของรายการสุดท้ายเก็บไว้ — ทำหน้าที่คั่นระหว่างรายการกับปุ่มด้านล่าง */
.kn-pop-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;   /* 🎛️ ขนาดวงกลมเลขลำดับ */
  height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
}
.kn-pop-list img {
  flex: 0 0 auto;
  width: 112px;   /* 🎛️ ขนาดรูปย่อ */
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.kn-pop-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kn-pop-title {
  font-size: 0.78rem;   /* 🎛️ ขนาดหัวข้อยอดนิยม */
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  /* ตัดที่ 2 บรรทัดแล้วต่อด้วย … */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.kn-pop-views {
  margin-top: 3px;
  font-size: 0.66rem;
  color: var(--ink-faint);
}

/* ── 5 · สมัครรับข่าวสาร ── */
.kn-news {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 14px clamp(14px, 1.6vw, 20px);
  padding-right: clamp(70px, 8vw, 120px);   /* เว้นที่ให้รูปมุมขวา */
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.kn-news-text {
  flex: 1 1 auto;
  min-width: 0;
}
.kn-news-text h2 {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 5px;
}
.kn-news-text p {
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.kn-news-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}
.kn-news-form input {
  width: clamp(110px, 11vw, 165px);
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  font: inherit;
  font-size: 0.74rem;
  color: var(--ink);
  outline: none;
}
.kn-news-form input::placeholder {
  color: var(--ink-faint);
}
.kn-news-form button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}
/* รูปประกอบมุมขวา — ไล่จางจากซ้ายให้กลืนกับพื้นการ์ด (เทคนิคเดียวกับการ์ดสูตรหน้าองค์ประกอบสปา) */
.kn-news-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(80px, 9vw, 130px);
  object-fit: cover;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  pointer-events: none;
}

/* ── จอกลาง/เล็ก ── */
@media (max-width: 1080px) {
  .kn-main {
    grid-template-columns: 1fr;
  }
  .kn-news {
    padding-right: clamp(16px, 2vw, 28px);
  }
  .kn-news-img {
    display: none;
  }
}
@media (max-width: 820px) {
  .kn-filter {
    flex-direction: column;
    align-items: stretch;
  }
  .kn-search {
    width: 100%;
  }
  .kn-feat {
    flex-direction: column;
  }
  .kn-feat-media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
  }
  .kn-news {
    flex-direction: column;
    align-items: stretch;
  }
  .kn-news-form {
    flex-wrap: wrap;
  }
  .kn-news-form input {
    flex: 1 1 160px;
    width: auto;
  }
}

/* หัวข้อหมวด — ดาวซ้าย แล้วลากเส้นบางไปจนสุดขอบขวา (ต่างจาก .blk-h ที่เป็นใบไม้สองข้าง) */
.kn-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}
.kn-h::before {
  content: "";
  flex: 0 0 auto;
  width: 1.3em;
  height: 1.3em;
  background: #b08d4f;   /* 🎛️ สีดาว */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6l2.9%205.9%206.5.95-4.7%204.6%201.1%206.45L12%2017.45%206.2%2020.5l1.1-6.45-4.7-4.6%206.5-.95z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6l2.9%205.9%206.5.95-4.7%204.6%201.1%206.45L12%2017.45%206.2%2020.5l1.1-6.45-4.7-4.6%206.5-.95z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.kn-h::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hair);
}

/* ⚠️ -webkit-line-clamp ทำงานได้เฉพาะกับ display:-webkit-box เท่านั้น
   ถ้าวันหลังมีใครเปลี่ยน display ของกล่องพวกนี้เป็น flex/block จุดไข่ปลาจะหายไปเงียบ ๆ */

/* ── สถานะข้อมูลไม่ครบ ──
   .is-few : การ์ดน้อยจนไม่ล้นแถว → จัดกึ่งกลาง ช่องว่างจะได้เท่ากันสองข้าง
   ⚠️ ห้ามใส่ justify-content:center ถาวร — พอการ์ดล้นแถว การ์ดใบแรกจะถูกดัน
      ออกนอกขอบซ้ายแล้วเลื่อนกลับไปดูไม่ได้ (ข้อจำกัดของ flex + overflow)
      JS จึงเป็นคนใส่/ถอดคลาสนี้ตามสถานการณ์เท่านั้น */
.kn-picks-row.is-few {
  justify-content: center;
}
/* .is-solo : แถวเรื่องเด่น|ยอดนิยม เหลือฝั่งเดียว → กางเต็มแถว ไม่จองที่ให้ฝั่งที่หายไป */
.kn-main.is-solo {
  grid-template-columns: 1fr;
}

/* ⚠️ display ในกฎคลาสชนะ [hidden]{display:none} ของเบราว์เซอร์
   ถ้าไม่ประกาศเอง JS สั่ง .hidden = true แล้วของยังโผล่อยู่ — ตัวกรองหมวดหมู่จะไม่ทำงานเลย
   (บทเรียนเดียวกับ .ii-prov-media img ในหน้าอัตลักษณ์อีสาน) */
.kn-card[hidden],
.kn-nav[hidden],
.kn-feat[hidden] {
  display: none;
}

/* ── สไลด์เรื่องเด่น — จางตอนสลับ ──
   ไม่ซ้อนสไลด์แบบ absolute เพราะแต่ละเรื่องหัวข้อ/คำโปรยยาวไม่เท่ากัน
   ถ้าซ้อนกันการ์ดจะสูงตามใบที่ยาวที่สุดตลอดเวลา → จางออกแล้วค่อยสลับแทน */
.kn-feat-wrap {
  transition: opacity 0.22s;
}
.kn-feat-wrap.is-fading {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .kn-feat-wrap {
    transition: none;
  }
}

/* ── การ์ด/รายการกดเข้าไปอ่านได้ ──
   ตอนต่อ DB เปลี่ยนจาก <article>/<span> เป็น <a> ไปที่ /menu/{path ของบทความ}
   ⚠️ ต้อง color: inherit ไม่งั้นสีลิงก์ของเบราว์เซอร์จะทับหัวข้อกับคำโปรยทั้งใบ */
/* ⚠️ .kn-btn ห้ามใส่ color: inherit — ปุ่มพื้นเขียวมีสีตัวอักษรของตัวเองอยู่แล้ว
   ถ้าใส่ ตัวหนังสือจะกลายเป็นสีเดียวกับพื้นจนหายไปทั้งปุ่ม */
.kn-card,
.kn-pop-list a {
  color: inherit;
}
.kn-card,
.kn-btn,
.kn-pop-list a {
  text-decoration: none;
}
/* เส้นกรอบ/ระยะห่างยังอยู่ที่ <li> ตัว <a> ทำหน้าที่แค่จัดแถวให้กดได้ทั้งแถว */
.kn-pop-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.kn-pop-list a:hover .kn-pop-title {
  color: var(--accent);
}
.kn-card:focus-visible,
.kn-pop-list a:focus-visible,
.kn-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}