/* ============================================================
   content-kit.css — ชุดคลาสสำเร็จรูปสำหรับเนื้อหา (พอแล้วดี)
   ใช้ได้ทั้งในเว็บนี้และนำไปใช้ที่อื่น (ไม่พึ่ง framework)
   โทนสี: เหลือง #fcd400 / ดำ #111
   ------------------------------------------------------------
   1) หัวข้อ & ข้อความ  2) ป้าย & แท็ก  3) กล่องเน้น  4) ปุ่ม
   5) รูปภาพ  6) เลย์เอาต์  7) รายการ & ตาราง  8) อื่น ๆ
   ============================================================ */
:root{ --pld-y:#fcd400; --pld-dark:#111; }

/* ===== 1) หัวข้อ & ข้อความ ===== */
.pld-head{ font-weight:700; font-size:1.7rem; line-height:1.3; margin:.2em 0 .7em; position:relative; padding-bottom:.55em; color:#1a1a1a; }
.pld-head::after{ content:''; position:absolute; left:0; bottom:0; width:120px; height:3px; background:var(--pld-dark); border-radius:2px; }
.pld-head.pld-center::after{ left:50%; transform:translateX(-50%); }
.pld-head.pld-right::after{ left:auto; right:0; transform:none; }
.pld-head.pld-line-y::after{ background:var(--pld-y); }
/* เส้นคั่น hr จัดชิด: ใส่คลาสที่ hr */
.pld-richtext hr.hr-right{ width:180px; margin-left:auto; margin-right:0; }
.pld-richtext hr.hr-center{ width:180px; margin-left:auto; margin-right:auto; }
.pld-richtext hr.hr-left{ width:180px; margin-left:0; margin-right:auto; }
.pld-xl{ font-size:2.1rem; font-weight:700; line-height:1.2; margin:.2em 0 .5em; }
.pld-lead{ font-size:1.2rem; color:#444; line-height:1.7; font-weight:500; margin:0 0 1em; }
.pld-small{ font-size:.85rem; color:#777; }
.pld-mark{ background:#fff3a8; padding:.05em .35em; border-radius:4px; }
.pld-accent{ color:#c99700; font-weight:700; }
.pld-center{ text-align:center; }
.pld-dropcap::first-letter{ float:left; font-size:3.3em; line-height:.78; font-weight:700; margin:.02em .14em 0 0; color:var(--pld-dark); }

/* ===== 2) ป้าย & แท็ก ===== */
.pld-badge{ display:inline-block; background:var(--pld-y); color:#111; font-weight:700; padding:8px 22px; border-radius:8px; line-height:1.2; }
.pld-badge.pld-badge-dark{ background:var(--pld-dark); color:#fff; }
.pld-badge.pld-badge-outline{ background:transparent; color:#111; border:2px solid #111; }
.pld-tag{ display:inline-block; background:#f1f1f1; color:#555; font-size:.78rem; font-weight:500; padding:3px 12px; border-radius:20px; }
.pld-tag.pld-tag-y{ background:#fff3a8; color:#7a5c00; }

/* ===== 3) กล่องเน้น ===== */
.pld-note{ background:#fff8e1; border-left:5px solid var(--pld-y); padding:14px 18px; border-radius:8px; margin:1em 0; }
.pld-note.pld-note-info{ background:#e8f4ff; border-left-color:#2f80ed; }
.pld-note.pld-note-warn{ background:#ffecec; border-left-color:#e53935; }
.pld-note.pld-note-ok{ background:#e9f9ee; border-left-color:#22a447; }
.pld-box{ border:1px solid #e5e5e5; border-radius:12px; padding:18px 20px; margin:1em 0; }
.pld-box-y{ background:#fff7cc; border-radius:12px; padding:18px 22px; margin:1em 0; }
.pld-quote{ border-left:4px solid var(--pld-y); padding:.4em 1.2em; font-size:1.15em; font-style:italic; color:#444; margin:1em 0; }

/* ===== 4) ปุ่ม ===== */
.pld-btn{ display:inline-block; background:var(--pld-dark); color:#fff !important; font-weight:600; padding:.7em 1.7em; border-radius:30px; text-decoration:none; transition:opacity .15s; }
.pld-btn:hover{ opacity:.9; }
.pld-btn.pld-btn-y{ background:var(--pld-y); color:#111 !important; }
.pld-btn.pld-btn-outline{ background:transparent; color:#111 !important; border:2px solid #111; }
.pld-btn.pld-btn-sm{ padding:.45em 1.15em; font-size:.85rem; }
.pld-btns{ display:flex; flex-wrap:wrap; gap:10px; margin:1em 0; }

/* ===== 5) รูปภาพ ===== */
.pld-img-full{ display:block; width:100%; height:auto; border-radius:10px; margin:1em 0; }
.pld-img-round{ border-radius:16px !important; }
.pld-img-circle{ width:160px; height:160px; object-fit:cover; border-radius:50%; }
.pld-img-shadow{ box-shadow:0 12px 30px rgba(0,0,0,.18); border-radius:10px; }
.pld-img-left{ float:left; max-width:46%; height:auto; margin:.3em 1.3em .8em 0; border-radius:10px; }
.pld-img-right{ float:right; max-width:46%; height:auto; margin:.3em 0 .8em 1.3em; border-radius:10px; }
.pld-clear{ clear:both; }
.pld-figure{ margin:1em 0; }
.pld-figure img{ display:block; width:100%; height:auto; border-radius:10px; }
.pld-figure figcaption{ font-size:.85rem; color:#888; text-align:center; margin-top:8px; }
.pld-only-mobile{ display:none; }
@media(max-width:768px){
  .pld-only-mobile{ display:block; }
  .pld-only-desktop{ display:none !important; }
  .pld-img-left, .pld-img-right{ float:none; max-width:100%; margin:1em 0; }
}

/* ===== 6) เลย์เอาต์ ===== */
.pld-cols{ display:flex; flex-wrap:wrap; gap:22px; margin:1em 0; }
/* จัดแนวตั้งของคอลัมน์ (เวลาคอลัมน์สูงไม่เท่ากัน เช่น ฝั่งหนึ่งมีรูป) */
.pld-cols.pld-cols-middle{ align-items:center; }
.pld-cols.pld-cols-top{ align-items:flex-start; }
.pld-cols.pld-cols-bottom{ align-items:flex-end; }
.pld-cols > *{ flex:1 1 240px; min-width:0; }
.pld-cols.pld-cols-3 > *{ flex:1 1 200px; }
.pld-cols.pld-cols-sidebar > *:first-child{ flex:1 1 220px; }
.pld-cols.pld-cols-sidebar > *:last-child{ flex:2 1 320px; }
/* สัดส่วน 2 คอลัมน์ (รวม = 12) — desktop ตามสัดส่วน · มือถือเรียงเดี่ยว */
.pld-cols.pld-cols-1-11 > *:first-child{ flex:1 1 0; }  .pld-cols.pld-cols-1-11 > *:last-child{ flex:11 1 0; }
.pld-cols.pld-cols-2-10 > *:first-child{ flex:2 1 0; }  .pld-cols.pld-cols-2-10 > *:last-child{ flex:10 1 0; }
.pld-cols.pld-cols-3-9  > *:first-child{ flex:3 1 0; }  .pld-cols.pld-cols-3-9  > *:last-child{ flex:9 1 0; }
.pld-cols.pld-cols-4-8  > *:first-child{ flex:4 1 0; }  .pld-cols.pld-cols-4-8  > *:last-child{ flex:8 1 0; }
.pld-cols.pld-cols-5-7  > *:first-child{ flex:5 1 0; }  .pld-cols.pld-cols-5-7  > *:last-child{ flex:7 1 0; }
.pld-cols.pld-cols-6-6  > *{ flex:1 1 0; }
.pld-cols.pld-cols-7-5  > *:first-child{ flex:7 1 0; }  .pld-cols.pld-cols-7-5  > *:last-child{ flex:5 1 0; }
.pld-cols.pld-cols-8-4  > *:first-child{ flex:8 1 0; }  .pld-cols.pld-cols-8-4  > *:last-child{ flex:4 1 0; }
.pld-cols.pld-cols-9-3  > *:first-child{ flex:9 1 0; }  .pld-cols.pld-cols-9-3  > *:last-child{ flex:3 1 0; }
.pld-cols.pld-cols-10-2 > *:first-child{ flex:10 1 0; } .pld-cols.pld-cols-10-2 > *:last-child{ flex:2 1 0; }
.pld-cols.pld-cols-11-1 > *:first-child{ flex:11 1 0; } .pld-cols.pld-cols-11-1 > *:last-child{ flex:1 1 0; }
@media (max-width:640px){
  .pld-cols[class*="pld-cols-"]{ flex-direction:column; }
  .pld-cols[class*="pld-cols-"] > *{ flex:1 1 auto; }
}
.pld-hr{ border:0; border-top:2px solid #eaeaea; margin:1.6em 0; }
.pld-space{ height:32px; }
.pld-band{ background:var(--pld-y); padding:28px 26px; border-radius:14px; margin:1em 0; }

/* ===== 7) รายการ & ตาราง ===== */
.pld-list-check{ list-style:none; padding-left:0; margin:1em 0; }
.pld-list-check li{ position:relative; padding-left:1.9em; margin-bottom:.5em; }
.pld-list-check li::before{ content:'\2713'; position:absolute; left:0; top:0; color:#22a447; font-weight:700; }
.pld-list-plain{ list-style:none; padding-left:0; }
.pld-steps{ counter-reset:pldstep; list-style:none; padding-left:0; margin:1em 0; }
.pld-steps li{ counter-increment:pldstep; position:relative; padding-left:2.8em; margin-bottom:.9em; min-height:2em; }
.pld-steps li::before{ content:counter(pldstep); position:absolute; left:0; top:0; width:1.9em; height:1.9em; background:var(--pld-dark); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85em; }
.pld-table{ width:100%; border-collapse:collapse; margin:1em 0; }
.pld-table th, .pld-table td{ border:1px solid #e5e5e5; padding:10px 12px; text-align:left; }
.pld-table thead th{ background:var(--pld-y); color:#111; }
.pld-table tbody tr:nth-child(even){ background:#fafafa; }

/* ===== 8) อื่น ๆ ===== */
.pld-video{ position:relative; padding-top:56.25%; margin:1em 0; border-radius:10px; overflow:hidden; }
.pld-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ===== การ์ดกรอบแนวคิด (มีเลข + ไอคอน) ===== */
.pld-fcards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:1.2em 0; }
.pld-fcard{ display:flex; gap:18px; background:#fff; border:1px solid #eee; border-radius:16px; padding:24px 26px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.pld-fcard-ic{ flex:0 0 auto; font-size:2.4rem; color:#111; line-height:1; }
.pld-fcard-bd{ min-width:0; }
.pld-fcard-num{ font-size:1.8rem; font-weight:800; color:#111; line-height:1; }
.pld-fcard-title{ font-size:1.1rem; font-weight:700; margin:4px 0 8px; color:#1a1a1a; }
.pld-fcard-text{ font-size:.88rem; color:#777; line-height:1.6; margin:0; }
@media(max-width:700px){ .pld-fcards{ grid-template-columns:1fr; } }

/* ===== การ์ดเงา (ใช้ประกอบคอมโบ) ===== */
.pld-card{ background:#fff; border:1px solid #eee; border-radius:14px; padding:22px 24px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.pld-card > :first-child{ margin-top:0; }
.pld-card > :last-child{ margin-bottom:0; }
.pld-card img{ border-radius:10px; }
.pld-card-title{ font-weight:700; font-size:1.1rem; margin:0 0 8px; color:#1a1a1a; }

/* ===== รูป + เนื้อหา (เรียงซ้าย-ขวา) ===== */
.pld-media{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin:1em 0; }
.pld-media > img{ flex:0 0 auto; width:40%; min-width:220px; max-width:100%; height:auto; border-radius:12px; }
.pld-media-bd{ flex:1 1 260px; min-width:0; }
.pld-media-bd > :first-child{ margin-top:0; }
.pld-media-bd > :last-child{ margin-bottom:0; }

/* ============================================================
   9) ชุดบล็อกเซคชัน (2026) — สำหรับหน้า Bootcamp/ศาสตร์พระราชา/สัญจร/ก้าวพอดี/xp/ปริญญาโท
   ทั้งหมด responsive (มือถือเรียงเดี่ยวเอง) · ใช้ Font Awesome สำหรับไอคอน
   ตั้งชื่อ prefix แยก ไม่ทับคลาสเดิม
   ============================================================ */

/* --- 9.1 การ์ดไอคอน (icon + หัวข้อ + คำอธิบาย) : กรอบมน / เส้นแบ่ง --- */
.pld-icards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:1.2em 0; }
.pld-icards.pld-icards-1{ grid-template-columns:1fr; }
.pld-icards.pld-icards-2{ grid-template-columns:repeat(2,1fr); }
.pld-icards.pld-icards-4{ grid-template-columns:repeat(4,1fr); }
.pld-icard{ background:#fff; border:1px solid #ececec; border-radius:16px; padding:22px 20px; }
.pld-icard-ic{ font-size:2rem; color:#111; margin-bottom:12px; line-height:1; }
.pld-icard-title{ font-weight:700; font-size:1.05rem; margin:0 0 6px; color:#1a1a1a; }
.pld-icard-text{ color:#666; font-size:.92rem; line-height:1.6; margin:0; }
/* variant: เส้นแบ่งแทนกรอบการ์ด (แบบหน้าปริญญาโท) */
.pld-icards.pld-icards-line{ gap:0; }
.pld-icards.pld-icards-line > .pld-icard{ background:transparent; border:0; border-radius:0; padding:18px 20px; }
.pld-icards.pld-icards-line > .pld-icard:not(:nth-child(3n+1)){ border-left:1px solid rgba(0,0,0,.14); }
.pld-icards.pld-icards-line > .pld-icard:nth-child(n+4){ border-top:1px solid rgba(0,0,0,.14); }
/* responsive: icards ทั่วไปยุบเป็น 2 แล้ว 1 คอลัมน์ + จัดเส้นแบ่งตาม */
@media(max-width:760px){
  .pld-icards{ grid-template-columns:repeat(2,1fr); }
  .pld-icards.pld-icards-4{ grid-template-columns:repeat(2,1fr); }
  .pld-icards.pld-icards-line > .pld-icard:nth-child(n){ border-left:0; border-top:0; }
  .pld-icards.pld-icards-line > .pld-icard:not(:nth-child(2n+1)){ border-left:1px solid rgba(0,0,0,.14); }
  .pld-icards.pld-icards-line > .pld-icard:nth-child(n+3){ border-top:1px solid rgba(0,0,0,.14); }
}
@media(max-width:480px){
  .pld-icards, .pld-icards.pld-icards-2, .pld-icards.pld-icards-4{ grid-template-columns:1fr; }
  .pld-icards.pld-icards-line > .pld-icard:nth-child(n){ border-left:0; border-top:0; }
  .pld-icards.pld-icards-line > .pld-icard:not(:first-child){ border-top:1px solid rgba(0,0,0,.14); }
}

/* --- 9.2 ไอคอนโฟลว์ (วงกลมไอคอน + ลูกศรอัตโนมัติ + label/sub) --- */
.pld-flow{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:12px 24px; margin:1.4em 0; }
.pld-flow-item{ flex:1 1 0; min-width:170px; text-align:center; position:relative; padding:0 8px; }
.pld-flow-item + .pld-flow-item::before{ content:'\f061'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:-16px; top:48px; color:#bbb; font-size:1.1rem; }
.pld-flow-ic{ width:116px; height:116px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#111; }
.pld-flow.pld-flow-bordered .pld-flow-ic{ border:2px solid #e3c94d; border-radius:50%; background:#fffdf3; }
.pld-flow-title{ font-weight:700; font-size:1.05rem; margin:0 0 4px; }
.pld-flow-text{ color:#666; font-size:.86rem; line-height:1.55; margin:0; }
@media(max-width:640px){
  .pld-flow{ flex-direction:column; align-items:center; gap:26px; }
  .pld-flow-item{ max-width:320px; }
  .pld-flow-item + .pld-flow-item::before{ content:'\f063'; left:50%; top:-20px; transform:translateX(-50%); }
}

/* --- 9.3 ไทม์ไลน์เลข (เลขวงกลมบนเส้น + ไอคอน + หัวข้อ + คำอธิบาย) --- */
.pld-timeline{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; margin:1.4em 0; position:relative; }
.pld-tl-item{ flex:1 1 0; min-width:150px; text-align:center; position:relative; }
.pld-tl-num{ width:52px; height:52px; margin:0 auto; border-radius:50%; background:var(--pld-y); color:#111; font-weight:700; font-size:1.4rem; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
/* เส้นแนวนอนเชื่อมเลข */
.pld-timeline::before{ content:''; position:absolute; top:26px; left:8%; right:8%; height:2px; background:#111; z-index:0; }
.pld-tl-ic{ font-size:1.8rem; color:#333; margin:18px 0 10px; }
.pld-tl-ic img{ width:52px; height:52px; object-fit:contain; display:block; margin:18px auto 0; }
.pld-tl-title{ font-weight:700; font-size:1rem; margin:0 0 6px; }
.pld-tl-text{ color:#666; font-size:.86rem; line-height:1.55; margin:0; }
@media(max-width:720px){
  .pld-timeline{ flex-direction:column; }
  .pld-timeline::before{ top:0; bottom:0; left:26px; right:auto; width:2px; height:auto; }
  .pld-tl-item{ display:grid; grid-template-columns:52px 1fr; gap:0 16px; text-align:left; min-width:0; }
  .pld-tl-num{ margin:0; grid-row:1 / span 3; }
  .pld-tl-ic{ margin:0 0 6px; } .pld-tl-ic img{ margin:0 0 6px; } .pld-tl-title{ margin-top:2px; }
}

/* --- 9.4 การ์ดรูป-ลิงก์ (รูป + ชื่อ + คำโปรย + ลูกศร) / การ์ดรูป-ป้าย --- */
.pld-linktiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin:1.2em 0; }
.pld-linktile{ display:flex; flex-direction:column; background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s; }
.pld-linktile:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.pld-linktile > img{ width:100%; aspect-ratio:16/10; object-fit:cover; margin:0; }
.pld-linktile-bd{ padding:14px 16px; flex:1; display:flex; flex-direction:column; }
.pld-linktile-title{ font-weight:700; font-size:1rem; margin:0 0 4px; }
.pld-linktile-text{ color:#777; font-size:.85rem; line-height:1.5; margin:0 0 10px; }
.pld-linktile-go{ margin-top:auto; align-self:flex-end; color:#c99700; }
/* ป้าย EN ใหญ่ + sub (แบบหน้า xp: LEARN/EXPLORE/…) */
.pld-linktile-label{ font-weight:800; font-size:1.15rem; letter-spacing:.02em; margin:0 0 2px; }
.pld-linktile-sub{ color:#777; font-size:.9rem; margin:0; }

/* --- 9.5 สถิติตัวเลขใหญ่ (เลขไทย/อารบิกตัวโต + คำบรรยาย) --- */
.pld-stats{ display:flex; flex-wrap:wrap; gap:32px 48px; align-items:flex-start; margin:1.2em 0; }
.pld-stats-xl{ flex-direction:row; flex-wrap:wrap; gap:0; align-items:flex-start; }
.pld-stats-xl .pld-stat{ flex:1 1 0; min-width:0; padding:0 28px; }
.pld-stats-xl .pld-stat + .pld-stat{ border-left:2px solid currentColor; }
.pld-stats-xl .pld-stat:first-child{ padding-left:0; }
.pld-stats-note{ flex:0 0 100%; width:100%; text-align:center; font-size:.92rem; line-height:1.6; opacity:.8; margin:26px 0 0; }
@media(max-width:560px){ .pld-stats-xl{ flex-wrap:wrap; } .pld-stats-xl .pld-stat{ flex:1 1 100%; padding:0; } .pld-stats-xl .pld-stat + .pld-stat{ border-left:0; border-top:2px solid currentColor; padding-top:20px; margin-top:20px; } }
.pld-stat{ flex:1 1 160px; }
.pld-stats-light{ color:#fff; }
.pld-stat-pre{ font-size:.95rem; color:inherit; opacity:.8; margin:0; line-height:1.1; }
.pld-stat-num{ font-weight:800; font-size:clamp(3rem,8vw,5rem); line-height:1; margin:-.05em 0 0; color:#111; }
.pld-stat.pld-stat-y .pld-stat-num{ color:var(--pld-y); }
.pld-stats-xl .pld-stat-num{ white-space:nowrap; }
.pld-stat-unit{ font-weight:700; font-size:1.3rem; }
.pld-stat-text{ font-size:.95rem; line-height:1.6; margin:.1em 0 0; opacity:.9; }

/* --- 9.6 การ์ดรูปวงกลม + เส้นประเชื่อม (แบบ "ได้อะไร") --- */
.pld-circlecards{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin:1.4em 0; position:relative; }
.pld-ccard{ flex:1 1 0; min-width:180px; max-width:280px; text-align:center; }
.pld-circlecards .pld-ccard-img{ width:100%; max-width:260px; aspect-ratio:1/1; border-radius:12px; object-fit:cover; margin:0 auto 16px; display:block; box-shadow:0 6px 18px rgba(0,0,0,.10); }
.pld-ccard-title{ font-weight:700; font-size:1.05rem; margin:0 0 6px; }
.pld-ccard-text{ color:#666; font-size:.9rem; line-height:1.6; margin:0; }
.pld-circlecards.pld-dotted::before{ display:none; }
@media(max-width:640px){ .pld-circlecards.pld-dotted::before{ display:none; } }

/* --- 9.7 กริดรูป / คอลลาจ --- */
.pld-photogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:1.2em 0; }
.pld-photogrid.pld-photogrid-2{ grid-template-columns:repeat(2,1fr); }
.pld-photogrid > img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin:0; }
/* (กฎมือถือของ .pld-collab ย้ายไปท้ายไฟล์ — ต้องอยู่หลังกฎหลัก ไม่งั้นโดนทับ) */
}
}
}

/* --- 9.8 จับคู่พาร์ตเนอร์ (2 โลโก้วงกลม + X + พิลผลลัพธ์) --- */
.pld-collab{ display:flex; flex-direction:column; align-items:center; gap:18px; margin:1.4em 0; padding:0 12px; }
.pld-collab-row{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:nowrap; width:100%; }
.pld-collab-logo{ box-sizing:border-box; flex:0 1 200px; width:200px; height:200px; max-width:200px; border-radius:50%; border:2.5px solid #111; background:#fcd400; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; aspect-ratio:1/1; }
.pld-collab-logo img{ max-width:72%; max-height:58px; margin:0 0 6px; }
.pld-collab-logo .pld-collab-cap{ font-size:.82rem; color:#111; line-height:1.35; }
.pld-collab-x{ font-weight:800; font-size:1.9rem; color:#111; flex:0 0 auto; }
.pld-collab-pill{ background:#fff8e1; border-radius:40px; padding:15px 30px; font-weight:700; text-align:center; line-height:1.4; margin-top:26px; }

/* --- 9.9 เส้นทาง/ค่าย (เลขใหญ่ + รูปวงรี + หัวข้อ + คำอธิบาย, สลับซ้าย-ขวา) --- */
.pld-journey{ display:flex; flex-direction:column; gap:30px; margin:1.4em 0; }
.pld-journey-item{ display:flex; align-items:center; gap:10px 26px; }
.pld-journey-item:nth-child(even){ flex-direction:row-reverse; }
/* journey num order handled by flex */
.pld-journey-item:nth-child(even) .pld-journey-bd{ text-align:right; }
/* journey img order handled by flex */
.pld-journey-num{ flex:0 0 auto; align-self:center; min-width:1.1em; font-weight:800; font-size:clamp(4rem,7vw,6.5rem); color:var(--pld-y); line-height:1; text-align:center; -webkit-text-stroke:2px #d9b400; }
.pld-journey-bd{ flex:1 1 auto; min-width:0; }
.pld-journey-img{ flex:0 0 48%; width:48%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.pld-journey-title{ font-weight:700; font-size:1.15rem; margin:0 0 6px; }
.pld-journey-text{ color:#666; font-size:.92rem; line-height:1.6; margin:0; }
@media(max-width:640px){
  .pld-journey-item, .pld-journey-item:nth-child(even){ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 18px; }
  .pld-journey-item .pld-journey-num{ font-size:clamp(3rem,14vw,4.6rem); }
  .pld-journey-item .pld-journey-bd, .pld-journey-item:nth-child(even) .pld-journey-bd{ flex:1 1 0; min-width:0; text-align:left; }
  .pld-journey-item .pld-journey-img, .pld-journey-item:nth-child(even) .pld-journey-img{ order:2; flex:0 0 100%; width:100%; margin-top:12px; }
}

/* ============================================================
   10) บล็อกสไลด์/แกลเลอรีใช้ซ้ำ (section_key='slider' หรือ 'gallery')
   prefix .pls- แยกจากสไลด์หน้า market (.mks-) และ lightbox กิจกรรม (.ev-lb-)
   ============================================================ */
.pls-wrap{ max-width:1000px; margin:0 auto; }
/* --- carousel (slider) --- */
.pls{ width:100%; }
.pls-frame{ position:relative; display:grid; border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.14); background:#111; }
.pls-slide{ grid-area:1/1; opacity:0; transition:opacity .6s ease; cursor:zoom-in; position:relative; }
.pls-slide.active{ opacity:1; z-index:1; }
.pls-img{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; background-repeat:no-repeat; }
.pls-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 22px; color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0)); font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.pls-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border:none; border-radius:50%;
  background:rgba(255,255,255,.9); color:#111; font-size:1.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.pls-arrow:hover{ background:#fff; } .pls-prev{ left:14px; } .pls-next{ right:14px; }
.pls-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.pls-dots button{ width:26px; height:5px; border:none; border-radius:3px; background:rgba(0,0,0,.22); cursor:pointer; padding:0; }
.pls-dots button.on{ background:#111; }
/* --- gallery (grid) --- */
.pls-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.pls-grid .pls-cell{ cursor:zoom-in; border-radius:10px; overflow:hidden; aspect-ratio:1/1; }
.pls-grid .pls-cell img{ width:100%; height:100%; object-fit:cover; margin:0; display:block; transition:transform .25s; }
.pls-grid .pls-cell:hover img{ transform:scale(1.05); }
/* --- lightbox (ใช้ร่วมทุก slider/gallery ในหน้า) --- */
.pls-lb{ position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; }
.pls-lb-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; max-width:96vw; max-height:92vh; }
.pls-lb-inner img{ max-width:96vw; max-height:82vh; object-fit:contain; border-radius:8px; }
.pls-lb-cap{ color:#fff; font-weight:500; text-align:center; max-width:900px; padding:0 16px; }
.pls-lb-close{ position:absolute; top:18px; right:26px; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; }
.pls-lb-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; border-radius:50%;
  background:rgba(255,255,255,.85); color:#111; font-size:1.9rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pls-lb-arrow:hover{ background:#fff; } .pls-lb-prev{ left:3vw; } .pls-lb-next{ right:3vw; }
@media(max-width:560px){ .pls-arrow{ width:36px; height:36px; font-size:1.3rem; } .pls-lb-arrow{ width:40px; height:40px; } .pls-lb-prev{ left:8px; } .pls-lb-next{ right:8px; } }

/* ============================================================
   11) แผนที่ไทย + หมุด (.pld-thmap) — ใช้ assets/th-regions.svg เป็นรูปทรง
   หมุดวางด้วย inline style top/left เป็น % (โดยประมาณ) · responsive เอง
   ============================================================ */
.pld-thmap{ position:relative; max-width:420px; margin:0 auto; }
.pld-thmap-img{ width:100%; height:auto; display:block; margin:0; }
/* โทนสีแผนที่: ghost=ขาวโปร่ง (เหมาะบนพื้นเหลือง/เข้ม) · gold=โทนทอง (เหมาะบนพื้นขาว) */
.pld-thmap.pld-thmap-ghost .pld-thmap-img{ filter:brightness(0) invert(1); opacity:.45; }
.pld-thmap.pld-thmap-gold  .pld-thmap-img{ filter:sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.96); opacity:.9; }
.pld-thmap-pin{ position:absolute; transform:translate(-50%,-100%); color:#111; font-size:1.5rem; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.pld-thmap-pin.pin-y{ color:var(--pld-y); }
.pld-thmap-pin.pin-w{ color:#fff; }
.pld-thmap-pin > .pld-thmap-label{ position:absolute; left:50%; top:105%; transform:translateX(-50%); white-space:nowrap; font-size:.7rem; font-weight:600; color:#333; filter:none; }

/* ============================================================
   12) ไดอะแกรม 3 ตอน (ศาสตร์พระราชา -> เศรษฐกิจพอเพียง -> พอแล้วดี)
   ใช้ในเซคชัน sp_philosophy · กลางเป็น [[venn]] ของเดิม
   ============================================================ */
.pld-suffdiagram{ display:flex; align-items:center; justify-content:center; gap:6px 10px; flex-wrap:wrap; margin:1em 0; }
.pld-suffdiagram .sd-col{ flex:1 1 220px; max-width:300px; text-align:center; }
.pld-suffdiagram .sd-col.sd-mid{ flex:1 1 300px; max-width:380px; }
.pld-suffdiagram .sd-arrow{ flex:0 0 auto; color:#444; font-size:1.5rem; align-self:center; }
.pld-suffdiagram .sd-title{ font-weight:700; font-size:1.2rem; margin:0 0 4px; }
.pld-suffdiagram .sd-sub{ font-size:.86rem; color:#555; line-height:1.5; margin:0 0 14px; }
.pld-suffdiagram .sd-logo{ max-width:200px; margin:6px auto 0; display:block; }
.pld-suffdiagram .venn-wrap{ max-width:340px; margin:0 auto; }
/* venn เล็ก 3 วง (CSS) สำหรับตอนซ้าย */
.pld-venn3{ position:relative; width:190px; height:160px; margin:6px auto 0; }
.pld-venn3 i{ position:absolute; width:104px; height:104px; border:1.6px solid #333; border-radius:50%; }
.pld-venn3 .c1{ top:0; left:43px; } .pld-venn3 .c2{ top:54px; left:0; } .pld-venn3 .c3{ top:54px; left:86px; }
.pld-venn3 b{ position:absolute; font-size:.78rem; font-weight:600; color:#222; white-space:nowrap; text-align:center; }
.pld-venn3 .t1{ top:28px; left:50%; transform:translateX(-50%); }
.pld-venn3 .t2{ top:96px; left:14px; } .pld-venn3 .t3{ top:96px; left:118px; }
/* มือถือ: ลูกศรเป็นแถวของตัวเอง กึ่งกลาง ระหว่างตอนบน-ล่าง (ไม่ไปแอบข้าง ๆ) */
@media(max-width:720px){ .pld-suffdiagram .sd-col{ flex:1 1 100%; max-width:100%; } .pld-suffdiagram .sd-arrow{ flex:0 0 100%; text-align:center; line-height:1; padding:4px 0; } .pld-suffdiagram .sd-arrow > *{ display:inline-block; transform:rotate(90deg); } .pld-suffdiagram .sd-arrow:not(:has(*)){ transform:rotate(90deg); } }

/* ============================================================
   13) ปริญญาโท (master) — ไอคอน PNG, สถิติตัวใหญ่, บล็อกหลักสูตร, ปุ่มดำ
   ============================================================ */
/* ไอคอนเป็นรูป PNG (อัปเอง) แทน Font Awesome */
.pld-icard-ic img{ height:52px; width:auto; max-width:100%; margin:0; display:inline-block; }
.pld-icard-ic.pld-ic-sm img{ height:40px; }

/* สถิติตัวเลขใหญ่พิเศษ (responsive) */
.pld-stats-xl .pld-stat-num{ font-size:clamp(4rem,7vw,6.5rem); font-weight:500; margin-top:-28px; }
.pld-stats-xl .pld-stat-unit{ font-size:1em; font-weight:500; }
.pld-stats-xl .pld-stat-pre{ font-size:1.05rem; }
.pld-stats-xl .pld-stat-text{ font-size:1.02rem; }

/* บล็อกหลักสูตรศิลปศาสตร์ (หัว: ข้อความซ้าย + โลโก้ขวา / ล่าง: การ์ด + ปุ่มดำ) */
.pld-prog-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.pld-prog-head .pld-prog-text{ flex:1 1 340px; min-width:0; }
.pld-prog-head .pld-prog-text > :first-child{ margin-top:0; }
.pld-prog-logo{ flex:0 0 auto; max-width:240px; height:auto; margin:0; }
.pld-prog-cards{ display:flex; align-items:stretch; gap:20px; flex-wrap:wrap; }
.pld-prog-cards .pld-icards{ flex:1 1 640px; margin:0; }
.pld-btn-dark{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:12px;
  background:#111; color:#fff !important; text-decoration:none; font-weight:600; font-size:1.05rem;
  padding:20px 30px; border-radius:40px; white-space:nowrap; transition:background .15s; }
.pld-btn-dark:hover{ background:#000; }
@media(max-width:900px){ .pld-prog-cards .pld-icards{ flex-basis:100%; } .pld-btn-dark{ align-self:stretch; justify-content:center; } }

/* ============================================================
   14) ก้าวพอดี (kaopodee) — flow icon PNG, media รูปขวา, แถบช่วงเช้า/บ่าย
   ============================================================ */
.pld-flow-ic img{ height:64px; width:auto; max-width:72%; margin:0; }
/* media object แบบรูปอยู่ขวา (ข้อความซ้าย) */
.pld-media.pld-media-rev{ flex-direction:row-reverse; }
/* pld-media mobile stack: รูปเต็มความกว้างอยู่บน + ข้อความล่าง */
@media(max-width:600px){
  .pld-media, .pld-media.pld-media-rev{ flex-direction:column; align-items:stretch; gap:14px; }
  .pld-media > img{ width:100%; min-width:0; max-width:100%; order:-1; }
  .pld-media-bd{ flex:1 1 auto; }
}
/* แถบ ช่วงเช้า → ช่วงบ่าย (จัดตรงเหนือ 2 คอลัมน์) */
.kp-daybar{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px 32px; margin:0 0 20px; }
.kp-daylbl{ display:flex; align-items:center; gap:12px; }
.kp-day-ic{ height:42px; width:auto; margin:0; flex:0 0 auto; }
.kp-daylbl b{ display:block; font-size:1.15rem; font-weight:700; line-height:1.2; }
.kp-daylbl span{ color:#666; font-size:.9rem; }
.kp-dayarrow{ display:none; }
@media(max-width:600px){ .kp-daybar{ grid-template-columns:1fr; gap:14px; } .kp-dayarrow{ display:none; } .kp-day-ic{ width:96px !important; height:96px !important; } /* kp mobile ic */ }
/* kp-grid: PC = label แถวบน(2) + media แถวล่าง(2) · มือถือ = จับคู่ เช้า+media เช้า / บ่าย+media บ่าย */
.kp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 40px; align-items:start; margin:0 0 8px; }
.kp-grid > .kp-daylbl{ align-self:center; margin:0 0 6px; }
@media(max-width:767px){
  .kp-grid{ grid-template-columns:1fr; gap:0; }
  .kp-grid > .kp-g-a1{ order:1; }
  .kp-grid > .kp-g-a2{ order:2; margin:6px 0 26px; }
  .kp-grid > .kp-g-b1{ order:3; }
  .kp-grid > .kp-g-b2{ order:4; margin-top:6px; }
}

/* icards-1 (list แนวตั้ง) แบบเส้นแบ่ง = เส้นแนวนอนระหว่างแถว (ไม่ใช่แนวตั้ง) */
.pld-icards.pld-icards-1.pld-icards-line > .pld-icard{ border-left:0; }
.pld-icards.pld-icards-1.pld-icards-line > .pld-icard:not(:first-child){ border-top:1px solid rgba(0,0,0,.14); }

/* ============================================================
   15) รายการไอคอน+ข้อความ แนวนอน (icon PNG เปล่าซ้าย + ข้อความขวา, เส้นประคั่น)
   ============================================================ */
.pld-iconrow{ display:flex; flex-direction:column; }
.pld-iconrow-item{ display:flex; align-items:center; gap:22px; padding:24px 0; }
.pld-iconrow-item + .pld-iconrow-item{ border-top:1.5px dashed rgba(0,0,0,.28); }
.pld-iconrow-ic{ flex:0 0 auto; }
.pld-iconrow-ic img{ height:66px; width:auto; margin:0; display:block; }
.pld-iconrow-title{ font-weight:700; font-size:1.3rem; line-height:1.35; margin:0; color:#1a1a1a; }
@media(max-width:560px){ .pld-iconrow-ic img{ height:52px; } .pld-iconrow-title{ font-size:1.1rem; } }

/* ============================================================
   16) การ์ดไอคอนแนวนอน (icon PNG ซ้าย + หัวข้อ/ข้อความ ขวา) — .pld-icards-h
   ============================================================ */
.pld-icards.pld-icards-h > .pld-icard{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; gap:2px 16px; align-items:start; }
.pld-icards.pld-icards-h .pld-icard-ic{ margin:0; grid-column:1; grid-row:1 / span 2; align-self:start; }
.pld-icards.pld-icards-h .pld-icard-ic img{ height:46px; }
.pld-icards.pld-icards-h .pld-icard-title{ grid-column:2; grid-row:1; margin:0 0 4px; }
.pld-icards.pld-icards-h .pld-icard-text{ grid-column:2; grid-row:2; }

/* ============================================================
   17) HERO reusable (รูปพื้นหลัง + gradient มืดล่าง + ข้อความอ่านชัด)
       ใช้: <section class="pld-hero" style="background-image:url('...')">
              <div class="pld-hero-in"><p class="pld-hero-label">..</p><h1>..</h1><p class="pld-hero-sub">..</p></div>
            </section>
   ============================================================ */
.pld-hero{ position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--pld-y); }
.pld-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.6)); }
.pld-hero .pld-hero-in{ position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; padding:0 24px 60px; color:#fff; }
.pld-hero .pld-hero-label{ display:inline-block; font-weight:600; color:var(--pld-y); margin:0 0 12px; font-size:1.05rem; border-bottom:3px solid var(--pld-y); padding-bottom:8px; }
.pld-hero h1{ font-size:clamp(1.8rem,4.6vw,3rem); font-weight:700; line-height:1.2; margin:0 0 14px; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.pld-hero .pld-hero-sub{ font-weight:300; font-size:clamp(.95rem,2vw,1.1rem); line-height:1.7; max-width:640px; margin:0; text-shadow:0 1px 8px rgba(0,0,0,.5); }

/* คำโปรยใต้หัวข้อ Hero (page.php) */
.page-hero .page-hero-sub{ font-weight:300; font-size:clamp(.95rem,2vw,1.15rem); line-height:1.6; margin-top:10px; opacity:.95; max-width:640px; }

/* ป้ายเล็ก + คำโปรย Hero (แบบสัญจร) — ใช้กับ page.php และ hero สไลด์ */
.page-hero .page-hero-label{ display:inline-block; font-weight:600; color:#fcd400; margin:0 0 12px; font-size:1.05rem; border-bottom:3px solid #fcd400; padding-bottom:8px; }
.home-hero .home-hero-label, .home-hero-slider .home-hero-label{ display:inline-block; font-weight:600; color:#fcd400; margin:0 0 12px; font-size:1.05rem; border-bottom:3px solid #fcd400; padding-bottom:8px; }
.home-hero .home-hero-sub, .home-hero-slider .home-hero-sub{ font-weight:300; font-size:clamp(.95rem,2vw,1.15rem); line-height:1.6; margin:12px 0 0; max-width:640px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.5); }

/* XP: ลดช่องว่างระหว่าง 3 รูป (xp_past) กับสไลด์ที่ตามมา */
.sec-band[data-key="xp_past"]{ padding-bottom:6px !important; }
.sec-band[data-key="xp_past"] .pld-photogrid{ margin-bottom:0; }
.sec-band[data-key="xp_past"] + .home-extra-slider{ padding-top:6px !important; }
.sec-band[data-key="xp_past"] + .home-extra-slider .es-text-top{ margin-top:0; }
.sec-band[data-key="xp_past"] + .sec-band{ padding-top:6px !important; }

/* ===== รูปที่ลากใส่ editor แล้ว fix ทั้ง width+height: ปล่อย height เป็น auto (กันยืดตอน responsive) ===== */
/* จับเฉพาะรูปที่มี width ตั้งไว้ — ไอคอน/รูปที่ตั้งแค่ height (เช่น .pld-icard-ic img) ไม่โดน */
.pld-richtext img[width], .pld-richtext img[style*="width"],
.rich img[width], .rich img[style*="width"],
.wn-body img[width], .wn-body img[style*="width"], .qs-body img[width], .qs-body img[style*="width"],
.nr-text img[width], .nr-text img[style*="width"], .fc-text img[width], .fc-text img[style*="width"],
.tc-card-text img[width], .tc-card-text img[style*="width"], .article-body img[width], .article-body img[style*="width"]{
  max-width:100% !important; height:auto !important;
}
.pld-richtext img.pld-img-circle, .rich img.pld-img-circle{ height:160px !important; }
/* ไอคอนใน icards: คุมด้วย width — เต็มความกว้างการ์ดแต่ไม่เกิน 200px, height ตามสัดส่วนไฟล์ (ไฟล์ใหญ่/เล็กแค่ไหนก็ได้ขนาดเท่ากัน) */
.pld-richtext .pld-icard-ic{ text-align:center; }
.pld-richtext .pld-icard-ic img{ width:50%; max-width:175px; height:auto; display:inline-block; }
.pld-richtext .pld-icard-ic.pld-ic-sm img{ width:auto; max-width:100%; height:40px; }

/* ===== มือถือ: .pld-collab (ต้องอยู่หลัง .pld-collab-logo หลัก เพราะ specificity เท่ากัน ตัวหลังชนะ) ===== */
@media(max-width:560px){
  .pld-collab{ padding:0; }
  /* จอแคบ: สองวงเรียงข้างกันเหมือน desktop — กำหนดกว้าง=สูงจากความกว้างจอ (หัก X+gap) ให้กลมแน่นอน แล้วย่อตัวหนังสือแทน */
  .pld-collab-row{ flex-wrap:nowrap; gap:4px; max-width:100%; }
  .pld-collab-logo{ flex:none; min-width:0; width:calc((100vw - 56px) / 2); height:calc((100vw - 56px) / 2); max-width:170px; max-height:170px; padding:8px 6px; overflow:hidden; }
  .pld-collab-logo img{ max-width:60%; max-height:38px; margin-bottom:3px; }
  .pld-collab-logo .pld-collab-cap{ font-size:.66rem; line-height:1.25; }
  .pld-collab-logo .pld-collab-cap *{ font-size:inherit !important; }
  .pld-collab-x{ font-size:1.2rem; }
  .pld-collab-pill{ padding:12px 22px; font-size:.95rem; margin-top:18px; }
  .pld-photogrid{ grid-template-columns:repeat(2,1fr); }

/* มือถือ (1 คอลัมน์): ไอคอน icards 50% ของจอมันใหญ่ไป จำกัดไว้ 110px */
@media(max-width:480px){ .pld-richtext .pld-icard-ic img{ max-width:110px; } }

/* ===== ปุ่ม .pld-btn: ล็อกสีตรง ๆ (ไม่พึ่ง var()) ให้ทุกหน้าที่ใช้ rich text แสดงเหมือนกัน ===== */
/* เหตุผล: หลังบ้านต้องใส่สีตรง + !important ถึงจะขึ้น จึงใส่แบบเดียวกันฝั่งหน้าเว็บ (event / page / บทความ ใช้ไฟล์นี้ร่วมกัน) */
a.pld-btn{ display:inline-block; background:#111 !important; color:#fff !important; font-weight:600; padding:.7em 1.7em; border-radius:30px; text-decoration:none !important; line-height:1.4; }
a.pld-btn.pld-btn-y{ background:#fcd400 !important; color:#111 !important; }
a.pld-btn.pld-btn-outline{ background:transparent !important; color:#111 !important; border:2px solid #111; }
a.pld-btn.pld-btn-sm{ padding:.45em 1.15em; font-size:.85rem; }