/* ==========================================================================
   inner-page.css — Standard Inner Page Pattern (v1.1.0)
   ใช้คู่กับ pages/page_prototype.php · โหลดต่อจาก premium-upgrade.css ผ่าน $page_css
   - ใช้ token (--p, --gold, --border ...) จาก premium-upgrade.css (มี fallback)
   - ใช้ซ้ำ .page-hero และ .breadcrumb-premium ที่มีอยู่แล้ว (ไม่นิยามใหม่)
   - class ใหม่ทั้งหมดขึ้นต้นด้วย .t2-ip- เพื่อไม่ชนกับ .card / .section-title ของไฟล์อื่น
   ========================================================================== */

/* padding-bottom: เว้นที่ให้ภาพแลนด์มาร์กของ Footer (includes/footer.php → .t2-ft-lm) ที่ยื่นขึ้นมาทับเหนือ Footer สูง ≈ 23.03vw
   padding-bottom = 0.85 × 23.03vw (ส่วนทึบของภาพ ≈ 85% ของความสูง) + 24px → พ้นยอดศาล/เจดีย์กลางภาพทั้งหมด
   (สูตร #faq ของหน้าแรกหักความสูงคลื่นออก จึงยังเหลื่อมลงมาทับเนื้อหา ~44px ที่ 1100px — ตรวจแล้วไม่พอ) */
.t2-ip-body {
  background: var(--bg, #f7f9fc);
  padding: 3rem 0 max(6rem, calc(19.6vw + 24px));
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — Premium Royal Blue (mesh gradient · orbs · waves · sparkles · mascot 3D)
   ชั้น: .t2-ip-hero-bg (z1, ตัดขอบ) → .t2-ip-hero-inner (z4) → .t2-ip-mascot (z4, อยู่ในกรอบ Hero ชิดบนเส้นทอง)
   แอนิเมชันใช้ transform/opacity เท่านั้น (GPU) · ปิดทั้งหมดเมื่อ prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════ */
.page-hero.t2-ip-hero {
  position: relative;
  z-index: 2;
  overflow: hidden;                 /* ทุกชั้น (รวมตัวละคร) อยู่ในกรอบ Hero · ไม่ล้นลงขอบทอง */
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 56px 0 64px;
  /* Royal Blue mesh: เส้นฐาน + แสงเรืองหลายจุด */
  background:
    radial-gradient(55% 90% at 88% 15%, rgba(96, 165, 255, .55), transparent 62%),
    radial-gradient(45% 80% at 8% 105%, rgba(245, 200, 66, .20), transparent 62%),
    radial-gradient(40% 70% at 48% -10%, rgba(130, 190, 255, .30), transparent 70%),
    linear-gradient(135deg, var(--p-deeper, #00153a) 0%, var(--p, #003380) 48%, var(--p-light, #0052cc) 100%);
}
.page-hero.t2-ip-hero::after { z-index: 5; }   /* เส้นทองล่าง: อยู่เหนือพื้นหลัง · ใต้ตัวละคร (z6) */

/* ── 1) พื้นหลังตกแต่ง ─────────────────────────────────────────────── */
.t2-ip-hero-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; contain: paint; }

.t2-ip-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: t2IpFloat 14s ease-in-out infinite alternate;
}
.t2-ip-orb--1 { width: 380px; height: 380px; top: -150px; left: -90px;  background: radial-gradient(circle, rgba(96, 165, 255, .50), transparent 68%); }
.t2-ip-orb--2 { width: 280px; height: 280px; bottom: -110px; right: 22%; background: radial-gradient(circle, rgba(245, 200, 66, .30), transparent 68%); animation-duration: 11s; animation-delay: -4s; }
.t2-ip-orb--3 { width: 220px; height: 220px; top: 14%; left: 40%;       background: radial-gradient(circle, rgba(150, 210, 255, .32), transparent 68%); animation-duration: 17s; animation-delay: -7s; }
.t2-ip-orb--4 { width: 140px; height: 140px; top: 8%; right: 6%;         background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 70%); animation-duration: 9s; animation-delay: -2s; }

/* คลื่น: SVG กว้าง 200% เลื่อน -50% วนต่อเนื่อง (เส้นคลื่นซ้ำทุก 1440 หน่วย) */
.t2-ip-waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 84px;
  will-change: transform;
  animation: t2IpWaveSlide 28s linear infinite;
}
.t2-ip-waves path { fill: rgba(255, 255, 255, .09); }
.t2-ip-waves--b { height: 64px; animation-duration: 40s; }
.t2-ip-waves--b path { fill: rgba(255, 255, 255, .07); }

/* ประกายดาวเรืองแสง (สีทอง) */
.t2-ip-sparkle {
  position: absolute;
  color: var(--gold-light, #f5c842);
  filter: drop-shadow(0 0 6px rgba(245, 200, 66, .85));
  animation: t2IpTwinkle 3.6s ease-in-out infinite;
}
.t2-ip-sparkle--1 { width: 22px; height: 22px; left: 5%;   top: 16%; }
.t2-ip-sparkle--2 { width: 14px; height: 14px; left: 42%;  top: 11%; animation-delay: -1.2s; color: #fff; }
.t2-ip-sparkle--3 { width: 18px; height: 18px; left: 52%;  bottom: 26%; animation-delay: -2.1s; }
.t2-ip-sparkle--4 { width: 16px; height: 16px; right: 38%; top: 18%; animation-delay: -.6s; color: #fff; }
.t2-ip-sparkle--5 { width: 24px; height: 24px; right: 3%;  top: 24%; animation-delay: -1.8s; }
.t2-ip-sparkle--6 { width: 12px; height: 12px; left: 28%;  bottom: 18%; animation-delay: -2.8s; color: #fff; }

@keyframes t2IpFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(26px, 18px, 0) scale(1.08); }
}
@keyframes t2IpWaveSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes t2IpTwinkle {
  0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(18deg); }
}
@keyframes t2IpMascotFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -7px, 0); }
}

/* ── 2) ข้อความ: Glass panel (ขาวบนน้ำเงินเข้ม → contrast สูง) ─────── */
.t2-ip-hero-inner { position: relative; z-index: 4; }
.t2-ip-hero-copy {
  width: fit-content;
  max-width: 52%;
  padding: 1.25rem 1.6rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-xl, 28px);
  /* แผงกระจก + ฟิล์มน้ำเงินเข้ม .34 → ตัวอักษรขาวมี contrast ≥ 4.5:1 แม้ orb สว่างลอยมาด้านหลัง */
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), rgba(0, 24, 70, .34);
  box-shadow: 0 14px 40px -14px rgba(0, 12, 50, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
}
.page-hero.t2-ip-hero h1 {
  margin: 0 0 .35rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 20, 70, .45);
}
.page-hero.t2-ip-hero p {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-weight: 500;
}
.t2-ip-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  padding: .25rem .9rem;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-full, 9999px);
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: var(--font-sm, .875rem);
  font-weight: 600;
}
.t2-ip-hero-eyebrow i { color: var(--gold-light, #f5c842); }

/* ── 3) ตัวละคร: เงานุ่ม + แสงเรืองด้านหลัง + โผล่เหลื่อมทับขอบทอง ──── */
.t2-ip-mascot {
  position: absolute;
  z-index: 4;                                 /* ใต้เส้นทอง (::after z5) · ไม่ทะลุขอบ Hero */
  right: max(1rem, calc((100% - 1320px) / 2));
  bottom: 4px;                                /* วางบนเส้นทองพอดี (เส้นทองสูง 4px) ไม่เหลื่อมลงมา */
  height: calc(100% - 24px);                  /* ภาพอยู่ในกรอบ Hero ทั้งหมด */
}
/* คลื่นด้านหน้า: ทับขอบล่างตัวละคร (ภาพถูกตัดที่ช่วงต้นขา) · เหนือตัวละคร z4 · ใต้/เหนือเส้นทองที่ bottom 4px */
.t2-ip-fgwave {
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: 5;
  width: 100%;
  height: 34px;
  pointer-events: none;
}
.t2-ip-fgwave-line { stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.t2-ip-mascot-img {
  display: block;
  height: 100%;
  width: auto;                                /* ไม่มีเงา/แสงเรืองรอบตัวละคร */
  will-change: transform;
  animation: t2IpMascotFloat 6s ease-in-out infinite alternate;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-hero.t2-ip-hero { min-height: 270px; padding: 44px 0 56px; }
  .t2-ip-hero-copy { max-width: 46%; }
}
@media (max-width: 767.98px) {
  /* ข้อความอยู่บนเต็มความกว้าง · ตัวละครย่อขนาดชิดขวาล่างในโซนว่างใต้ข้อความ ไม่บังข้อความ */
  .page-hero.t2-ip-hero { min-height: 0; padding: 28px 0 118px; }
  .t2-ip-hero-copy { max-width: none; width: auto; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-lg, 20px); }
  .page-hero.t2-ip-hero h1 { font-size: 1.5rem; }
  .t2-ip-fgwave { height: 24px; }
  .t2-ip-mascot { right: .75rem; bottom: 4px; height: 108px; }   /* 108+4 < padding-bottom 118 → ไม่ชนแผงกระจกข้อความ */
  .t2-ip-orb--3, .t2-ip-orb--4,
  .t2-ip-sparkle--3, .t2-ip-sparkle--4, .t2-ip-sparkle--6 { display: none; }
  .t2-ip-waves { animation: none; }            /* ประหยัดแบต/CPU บนมือถือ */
}
@media (prefers-reduced-motion: reduce) {
  .t2-ip-orb, .t2-ip-waves, .t2-ip-sparkle, .t2-ip-mascot-img { animation: none; }
  .t2-ip-sparkle { opacity: .8; }
}

/* ── Main content ─────────────────────────────────────────────────── */
.t2-ip-main > * + * { margin-top: 1.5rem; }

.t2-ip-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
  padding: 1.75rem;
}

.t2-ip-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  color: var(--p, #003380);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
}
.t2-ip-title::before {
  content: "";
  flex: 0 0 5px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--gold, #c8960c);
}

.t2-ip-prose { color: var(--text-2, #334155); font-size: 1.0625rem; line-height: 1.85; }
.t2-ip-prose p { margin-bottom: 1rem; }
.t2-ip-prose p:last-child { margin-bottom: 0; }

.t2-ip-figure { margin: 0; }
/* .row ดึงตัวเองขึ้น (margin-top: -gutter) แล้วให้ลูกดันลงคืนด้วย margin-top: gutter — margin:0 ด้านบนทำให้หัวข้อชิด/ทับภาพ และภาพที่ซ้อนกันบนมือถือติดกัน */
.row > .t2-ip-figure { margin-top: var(--bs-gutter-y); }
.t2-ip-figure img { width: 100%; height: auto; border-radius: var(--r-md, 14px); }
.t2-ip-figure figcaption {
  margin-top: .5rem;
  color: var(--text-muted, #64748b);
  font-size: var(--font-sm, .875rem);
  text-align: center;
}

/* กล่องไฮไลต์ (ปี พ.ศ. · วิสัยทัศน์ · ข้อความสำคัญ) */
.t2-ip-highlight {
  border-left: 5px solid var(--gold, #c8960c);
  border-radius: var(--r-md, 14px);
  background: var(--gold-pale, #fdf3db);
  padding: 1.1rem 1.4rem;
  color: var(--text, #0f172a);
}

/* การ์ดข้อมูลหลายใบ (เช่น หลักสูตร / ตัวชี้วัด) */
.t2-ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.t2-ip-tile {
  height: 100%;
  background: var(--p-50, #e6eeff);
  border-radius: var(--r-md, 14px);
  padding: 1.25rem;
  transition: transform var(--t, .3s) var(--ease, ease), box-shadow var(--t, .3s) var(--ease, ease);
}
.t2-ip-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1)); }
.t2-ip-tile i { color: var(--p, #003380); font-size: 1.5rem; margin-bottom: .6rem; }
.t2-ip-tile h3 { margin: 0 0 .35rem; font-family: 'Prompt', sans-serif; font-size: 1.05rem; font-weight: 600; }
.t2-ip-tile p { margin: 0; color: var(--text-2, #334155); font-size: .95rem; }

/* ตาราง (โครงสร้างหลักสูตร · ทำเนียบ) */
.t2-ip-table-wrap { border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-md, 14px); overflow: hidden; }
.t2-ip-table-wrap .table { margin: 0; }
.t2-ip-table-wrap thead th {
  background: var(--p, #003380);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  border: 0;
}
.t2-ip-table-wrap tbody tr:nth-child(even) { background: var(--surface-2, #f0f4fc); }

/* แถบตัวเลขเด่น (ปีก่อตั้ง · จำนวน) — ใช้ 2–4 ช่อง */
.t2-ip-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.t2-ip-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  padding: 1.25rem 1rem;
  border-radius: var(--r-lg, 20px);
  background: linear-gradient(135deg, var(--p-deeper, #002060), var(--p, #003380));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
  text-align: center;
}
.t2-ip-stat strong {
  color: var(--gold-light, #f5c842);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
}
.t2-ip-stat span { color: #fff; font-size: .95rem; line-height: 1.4; }

/* ไทม์ไลน์แนวตั้ง: มือถือ = เส้นซ้าย · ≥768px = สลับซ้าย/ขวา (<ol class="t2-ip-timeline"> → <li class="t2-ip-tl-item">) */
.t2-ip-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.t2-ip-timeline::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: 15px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--gold, #c8960c), var(--p-light, #1a56c4));
}
.t2-ip-tl-item { position: relative; padding: 0 0 1.5rem 3rem; }
.t2-ip-tl-item:last-child { padding-bottom: 0; }
.t2-ip-tl-item::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 6px;
  width: 21px;
  height: 21px;
  border: 4px solid var(--surface, #fff);
  border-radius: 50%;
  background: var(--gold-light, #f5c842);
  box-shadow: 0 0 0 2px var(--gold, #c8960c);
}
.t2-ip-tl-body {
  background: var(--p-50, #e6eeff);
  border-radius: var(--r-md, 14px);
  padding: 1rem 1.25rem 1.1rem;
}
.t2-ip-tl-date {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
  padding: .2rem .75rem;
  border-radius: 999px;
  background: var(--gold-pale, #fdf3db);
  color: var(--p-dark, #002a6b);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: .875rem;
  font-weight: 600;
}
.t2-ip-tl-body h3 {
  margin: 0 0 .35rem;
  color: var(--p, #003380);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
}
.t2-ip-tl-body p { margin: 0; color: var(--text-2, #334155); line-height: 1.8; }
@media (min-width: 768px) {
  .t2-ip-timeline::before { left: 50%; margin-left: -1.5px; }
  .t2-ip-tl-item { width: 50%; padding: 0 2.25rem 1.75rem 0; }
  .t2-ip-tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 1.75rem 2.25rem; }
  .t2-ip-tl-item::before { left: auto; right: -10.5px; }
  .t2-ip-tl-item:nth-child(even)::before { right: auto; left: -10.5px; }
}

/* ภาพพร้อมป้ายกำกับ (เช่น "ภาพประกอบ") — ครอบ <img> ด้วย .t2-ip-figure-frame */
.t2-ip-figure-frame { position: relative; }
.t2-ip-tag {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgba(0, 32, 96, .82);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
}

/* ป้ายตำแหน่งในตาราง (.t2-ip-role--head | --acting | --senior) + แถวปัจจุบัน (tr.is-current) */
.t2-ip-role {
  display: inline-block;
  padding: .15rem .7rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}
.t2-ip-role--head   { background: var(--p-50, #e6eeff);      color: var(--p-dark, #002a6b); }
.t2-ip-role--acting { background: var(--gold-pale, #fdf3db); color: #7a5600; }
.t2-ip-role--senior { background: var(--surface-2, #f0f4fc); color: var(--text-2, #334155); border: 1px solid var(--border, #e2e8f0); }
.t2-ip-table-wrap tbody tr.is-current { background: var(--gold-pale, #fdf3db); font-weight: 600; }
.t2-ip-now {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .55rem;
  border-radius: 999px;
  background: var(--gold, #c8960c);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

/* กล่องวิสัยทัศน์ (พื้นน้ำเงินเข้ม ตัวอักษรขาว/ทอง) — <section class="t2-ip-vision"> */
.t2-ip-vision {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--r-lg, 20px);
  background: linear-gradient(135deg, var(--p-deeper, #002060), var(--p, #003380));
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1));
  color: #fff;
}
.t2-ip-vision-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(245, 200, 66, .55);
  border-radius: 50%;
  background: rgba(245, 200, 66, .14);
  color: var(--gold-light, #f5c842);
  font-size: 1.5rem;
}
.t2-ip-vision h2 {
  margin: 0 0 .6rem;
  color: var(--gold-light, #f5c842);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
}
.t2-ip-vision p { margin: 0; font-size: 1.125rem; line-height: 1.9; }

/* รายการเลขลำดับ (พันธกิจ · เป้าประสงค์) — <ol class="t2-ip-numlist"> ; --gold = เลขสีทอง */
.t2-ip-numlist { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: ip-n; }
.t2-ip-numlist li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  color: var(--text-2, #334155);
  font-size: 1.0625rem;
  line-height: 1.75;
  counter-increment: ip-n;
}
.t2-ip-numlist li::before {
  content: counter(ip-n);
  flex: 0 0 2rem;
  display: grid;
  place-items: center;
  height: 2rem;
  border-radius: 50%;
  background: var(--p, #003380);
  color: var(--gold-light, #f5c842);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: .95rem;
  font-weight: 600;
}
.t2-ip-numlist--gold li::before { background: var(--gold-pale, #fdf3db); box-shadow: inset 0 0 0 2px var(--gold, #c8960c); color: var(--p-dark, #001f52); }

/* การ์ดลิงก์ไปหน้าที่เกี่ยวข้อง — <a class="t2-ip-tile t2-ip-tile--link"> ใน .t2-ip-grid */
.t2-ip-tile--link { display: block; color: inherit; text-decoration: none; }
.t2-ip-tile--link h3 { margin: 0; color: var(--p, #003380); }
.t2-ip-tile--link:focus-visible { outline: 3px solid var(--gold, #c8960c); outline-offset: 2px; }

/* การ์ดลิงก์แนวนอน 2 คอลัมน์ (ข้อมูลที่เกี่ยวข้อง) — จำนวนคี่ → ใบสุดท้ายกว้างเต็มแถว ไม่เหลือช่องว่างโดด */
.t2-ip-linkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.t2-ip-linkgrid .t2-ip-linkcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
.t2-ip-linkcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--border, #e2e8f0);
  border-left: 4px solid var(--gold, #c8960c);
  border-radius: var(--r-md, 14px);
  background: linear-gradient(90deg, var(--p-50, #e6eeff), var(--surface, #fff) 70%);
  color: var(--p, #003380);
  text-decoration: none;
  transition: transform var(--t, .3s) var(--ease, ease), box-shadow var(--t, .3s) var(--ease, ease), border-color var(--t, .3s) var(--ease, ease);
}
.t2-ip-linkcard:hover { transform: translateY(-3px); border-color: var(--gold, #c8960c); box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1)); color: var(--p, #003380); }
.t2-ip-linkcard:focus-visible { outline: 3px solid var(--gold, #c8960c); outline-offset: 2px; }
.t2-ip-linkcard-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--p, #003380), var(--p-deeper, #002060));
  color: var(--gold-light, #f5c842);
  font-size: 1.1rem;
}
.t2-ip-linkcard-label { flex: 1 1 auto; min-width: 0; font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.t2-ip-linkcard-arrow { flex: 0 0 auto; color: var(--gold, #c8960c); font-size: .85rem; transition: transform var(--t, .3s) var(--ease, ease); }
.t2-ip-linkcard:hover .t2-ip-linkcard-arrow { transform: translateX(4px); }
@media (max-width: 575.98px) {
  .t2-ip-linkgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .t2-ip-linkcard, .t2-ip-linkcard-arrow { transition: none; }
  .t2-ip-linkcard:hover, .t2-ip-linkcard:hover .t2-ip-linkcard-arrow { transform: none; }
}

/* ความหมายองค์ประกอบ 2 คอลัมน์ — <ol class="t2-ip-meanings"><li class="t2-ip-meaning"> icon + h3 + p ; เลขลำดับเป็นลายน้ำ (CSS counter) */
.t2-ip-meanings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: ip-m; }
.t2-ip-meaning {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  overflow: hidden;
  padding: 1.35rem 1.25rem 1.35rem 1.25rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, var(--p-50, #e6eeff) 0%, var(--surface, #fff) 62%);
  counter-increment: ip-m;
  transition: transform var(--t, .3s) var(--ease, ease), box-shadow var(--t, .3s) var(--ease, ease), border-color var(--t, .3s) var(--ease, ease);
}
.t2-ip-meaning::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--gold, #c8960c), var(--gold-light, #f5c842) 45%, var(--p-light, #1a56c4));
}
.t2-ip-meaning::after {
  content: "0" counter(ip-m);
  position: absolute;
  right: 1rem;
  bottom: -.35rem;
  color: var(--p, #003380);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: .07;
  pointer-events: none;
}
.t2-ip-meaning:hover { transform: translateY(-3px); border-color: rgba(200, 150, 12, .6); box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1)); }
.t2-ip-meaning-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p, #003380), var(--p-deeper, #002060));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(200, 150, 12, .6);
  color: var(--gold-light, #f5c842);
  font-size: 1.3rem;
}
.t2-ip-meaning h3 { margin: .1rem 0 .35rem; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.15rem; font-weight: 600; }
.t2-ip-meaning p { position: relative; z-index: 1; margin: 0; color: var(--text-2, #334155); line-height: 1.75; }
@media (max-width: 767.98px) {
  .t2-ip-meanings { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .t2-ip-meaning { transition: none; }
  .t2-ip-meaning:hover { transform: none; }
}

/* ตราสัญลักษณ์ใหญ่ในกรอบ */
.t2-ip-logo-panel {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 1.75rem;
  border: 1px solid rgba(200, 150, 12, .35);
  border-radius: var(--r-lg, 20px);
  background:
    radial-gradient(circle at 50% 46%, #fff 0, #fff 34%, var(--gold-pale, #fdf3db) 72%, #f3e3b3 100%);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1)), inset 0 0 0 5px rgba(255, 255, 255, .7);
}
/* วงแหวนทองบางๆ ล้อมตรา (ตกแต่งล้วน ไม่มีเนื้อหา) */
.t2-ip-logo-panel::before,
.t2-ip-logo-panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.t2-ip-logo-panel::before { width: 92%; aspect-ratio: 1; border: 1px solid rgba(200, 150, 12, .45); }
.t2-ip-logo-panel::after  { width: 104%; aspect-ratio: 1; border: 1px dashed rgba(200, 150, 12, .35); }
.t2-ip-logo-panel img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 300px);
  height: auto;
  filter: drop-shadow(0 14px 16px rgba(0, 32, 96, .22));
}

/* ข้อความนำของตรา + ปุ่มลิงก์เด่น */
.t2-ip-brand-lead { margin: 0 0 1.5rem; color: var(--text-2, #334155); font-size: 1.125rem; line-height: 1.9; }
.t2-ip-brand-lead strong { color: var(--p, #003380); }
.t2-ip-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, var(--p-deeper, #002060), var(--p, #003380));
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1));
  color: #fff;
  text-decoration: none;
  transition: transform var(--t, .3s) var(--ease, ease), box-shadow var(--t, .3s) var(--ease, ease);
}
.t2-ip-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 14px 32px rgba(15, 23, 42, .18)); color: #fff; }
.t2-ip-cta:focus-visible { outline: 3px solid var(--gold, #c8960c); outline-offset: 3px; }
.t2-ip-cta-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(245, 200, 66, .55);
  border-radius: 50%;
  background: rgba(245, 200, 66, .14);
  color: var(--gold-light, #f5c842);
  font-size: 1.15rem;
}
.t2-ip-cta-text { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.t2-ip-cta-text strong { display: block; font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.05rem; font-weight: 600; }
.t2-ip-cta-text small { display: block; color: rgba(255, 255, 255, .85); font-size: .9rem; }
.t2-ip-cta-arrow { flex: 0 0 auto; color: var(--gold-light, #f5c842); transition: transform var(--t, .3s) var(--ease, ease); }
.t2-ip-cta:hover .t2-ip-cta-arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .t2-ip-cta, .t2-ip-cta-arrow { transition: none; }
  .t2-ip-cta:hover, .t2-ip-cta:hover .t2-ip-cta-arrow { transform: none; }
}

/* สีประจำโรงเรียน (2 ช่อง) — .t2-ip-colorcard > .t2-ip-colordot--white|blue + h3 + p */
.t2-ip-colors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.t2-ip-colorcard { padding: 1.5rem 1rem; border-radius: var(--r-md, 14px); background: var(--surface-2, #f0f4fc); text-align: center; }
.t2-ip-colordot {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  font-size: 2rem;
}
.t2-ip-colordot--white { background: #fff; border: 2px solid var(--border, #e2e8f0); box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06)); color: var(--p, #003380); }
.t2-ip-colordot--blue  { background: linear-gradient(145deg, var(--p-light, #1a56c4), var(--p-deeper, #002060)); color: #fff; }
.t2-ip-colorcard h3 { margin: 0 0 .35rem; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.15rem; font-weight: 600; }
.t2-ip-colorcard p { margin: 0; color: var(--text-2, #334155); }

/* หัวข้อย่อยในการ์ด (h3) */
.t2-ip-subtitle { margin: 0 0 .75rem; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.1rem; font-weight: 600; }

/* ชิปสี — <div class="t2-ip-palette"><div class="t2-ip-swatch" style="--sw:#0B2D63"> … */
.t2-ip-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .75rem; }
.t2-ip-swatch { padding: .6rem; border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-md, 14px); background: var(--surface, #fff); }
.t2-ip-swatch::before { content: ""; display: block; height: 3.25rem; margin-bottom: .5rem; border: 1px solid rgba(15, 23, 42, .12); border-radius: 8px; background: var(--sw, #fff); }
.t2-ip-swatch span { display: block; color: var(--text-muted, #64748b); font-size: .8125rem; font-weight: 700; }

/* รายการติ๊กถูก (แนวทางการใช้งาน) */
.t2-ip-checklist { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.t2-ip-checklist li { display: flex; align-items: flex-start; gap: .65rem; color: var(--text-2, #334155); line-height: 1.75; }
.t2-ip-checklist i { margin-top: .4rem; color: var(--gold, #c8960c); }

/* การ์ดดาวน์โหลด — .t2-ip-dl (icon · h3 · p · .t2-ip-pill · a.t2-ip-btn) */
.t2-ip-dl {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-md, 14px);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
}
.t2-ip-dl-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--p, #003380), var(--p-deeper, #002060));
  color: var(--gold-light, #f5c842);
  font-size: 1.25rem;
}
.t2-ip-dl h3 { margin: 1rem 0 .4rem; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.1rem; font-weight: 600; }
.t2-ip-dl p { margin: 0; color: var(--text-2, #334155); line-height: 1.7; }
.t2-ip-dl-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.1rem; }
.t2-ip-pill { padding: .15rem .65rem; border-radius: 999px; background: var(--p-50, #e6eeff); color: var(--p-dark, #001f52); font-size: .8125rem; font-weight: 700; }
.t2-ip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: auto;
  padding: .6rem 1.1rem;
  border-radius: 10px;
  background: var(--p, #003380);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.t2-ip-btn:hover { background: var(--p-dark, #001f52); color: #fff; }
.t2-ip-btn:focus-visible { outline: 3px solid var(--gold, #c8960c); outline-offset: 2px; }

@media (max-width: 575.98px) {
  .t2-ip-vision { flex-direction: column; gap: 1rem; padding: 1.4rem; }
  .t2-ip-vision p { font-size: 1.0625rem; }
  .t2-ip-colors { gap: .5rem; }
  .t2-ip-colordot { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.5.0 — คอมโพเนนต์ชุดหน้า MEP / ผู้บริหาร / โครงสร้างบริหารงาน / ครูและบุคลากร / เพลงโรงเรียน / อาคารสถานที่
   ═══════════════════════════════════════════════════════════════════ */

/* ป้ายเล็กโทนทอง (กลุ่มสาระ · จำนวนชั่วโมง) — ใช้คู่กับ .t2-ip-pill */
.t2-ip-pill--gold { background: var(--gold-pale, #fdf3db); color: #6b4a00; }

/* .t2-ip-meanings เพิ่มเติม: ใช้ใต้หัวข้อโดยตรง · จำนวนคี่ → ใบสุดท้ายเต็มแถว · ป้ายชั่วโมงใต้ข้อความ */
.t2-ip-title + .t2-ip-meanings { margin-top: 0; }
.t2-ip-meanings--fill > .t2-ip-meaning:last-child:nth-child(odd) { grid-column: 1 / -1; }
.t2-ip-meaning .t2-ip-pill { position: relative; z-index: 1; display: inline-block; margin-top: .6rem; }

/* แถบตัวเลข 2 ช่อง · การ์ดที่เป็นเป้าหมายลิงก์ข้าม (#id) ไม่ให้ใต้ header */
.t2-ip-stats--2 { grid-template-columns: repeat(2, 1fr); }
.t2-ip-main > section[id] { scroll-margin-top: 6rem; }

/* ลิงก์ข้ามไปแต่ละกลุ่ม (ปุ่มเม็ดยา) */
.t2-ip-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.t2-ip-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(0, 51, 128, .18);
  border-radius: 999px;
  background: var(--p-50, #e6eeff);
  color: var(--p-dark, #001f52);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t, .3s) var(--ease, ease), color var(--t, .3s) var(--ease, ease), border-color var(--t, .3s) var(--ease, ease);
}
.t2-ip-chip b { display: inline-grid; place-items: center; min-width: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: var(--p, #003380); color: var(--gold-light, #f5c842); font-size: .8125rem; line-height: 1.5rem; }
.t2-ip-chip:hover { background: var(--p, #003380); border-color: var(--p, #003380); color: #fff; }
.t2-ip-chip:focus-visible { outline: 3px solid var(--gold, #c8960c); outline-offset: 2px; }

/* บัตรบุคคล — <ul class="t2-ip-persons"> → <li class="t2-ip-person"> (ภาพวงกลมกรอบทอง · ชื่อ · ตำแหน่ง) */
.t2-ip-persons { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.t2-ip-persons--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.t2-ip-person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 1.6rem 1rem 1.3rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-md, 14px);
  background: linear-gradient(180deg, var(--p-50, #e6eeff) 0, var(--surface, #fff) 58%);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
  text-align: center;
  transition: transform var(--t, .3s) var(--ease, ease), box-shadow var(--t, .3s) var(--ease, ease), border-color var(--t, .3s) var(--ease, ease);
}
.t2-ip-person::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--gold, #c8960c), var(--gold-light, #f5c842) 45%, var(--p-light, #1a56c4));
}
.t2-ip-person:hover { transform: translateY(-3px); border-color: rgba(200, 150, 12, .6); box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1)); }
.t2-ip-person-photo {
  width: 7rem;
  aspect-ratio: 1;
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--p-50, #e6eeff);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(200, 150, 12, .65), var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1));
}
.t2-ip-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.t2-ip-person h3 { margin: 0; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
.t2-ip-person-role { margin: .25rem 0 0; color: var(--text-2, #334155); font-size: .95rem; line-height: 1.6; }
.t2-ip-person .t2-ip-pill { margin-top: .65rem; }
.t2-ip-person-mail { margin-top: .75rem; color: var(--p, #003380); font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.t2-ip-person-mail:hover { color: var(--p-light, #1a56c4); text-decoration: underline; }
.t2-ip-person-mail:focus-visible { outline: 3px solid var(--gold, #c8960c); outline-offset: 2px; }
/* ขนาดใหญ่ (ผู้บริหาร · หัวหน้าฝ่าย) */
.t2-ip-persons--lg .t2-ip-person { padding: 2rem 1.25rem 1.6rem; }
.t2-ip-persons--lg .t2-ip-person-photo { width: 10rem; margin-bottom: 1.25rem; }
.t2-ip-persons--lg .t2-ip-person h3 { font-size: 1.2rem; }
/* แถบหัวบัตร (หัวหน้าฝ่าย: ไอคอน + ชื่อฝ่าย) */
.t2-ip-person-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  align-self: stretch;
  margin: 0 -1.25rem 1.5rem;
  padding: 1.05rem 1.25rem .95rem;
  background: linear-gradient(135deg, var(--p-deeper, #002060), var(--p, #003380));
  color: #fff;
  text-align: left;
}
.t2-ip-person-head i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(245, 200, 66, .55);
  border-radius: 50%;
  background: rgba(245, 200, 66, .14);
  color: var(--gold-light, #f5c842);
}
.t2-ip-person-head span { font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.t2-ip-person-head small { display: block; color: rgba(255, 255, 255, .85); font-family: 'Sarabun', sans-serif; font-size: .875rem; font-weight: 400; }
.t2-ip-persons--lg .t2-ip-person--head { padding: 0 1.25rem 1.6rem; }
.t2-ip-person--head::before { display: none; }

/* วิดีโอฝัง 16:9 · เครื่องเล่นเสียง */
.t2-ip-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md, 14px);
  background: #0b1530;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1));
}
.t2-ip-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.t2-ip-audio { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--r-md, 14px); background: var(--p-50, #e6eeff); }
.t2-ip-audio audio { flex: 1 1 auto; min-width: 0; width: 100%; }

/* เนื้อเพลง — .t2-ip-lyrics > .t2-ip-verse (.t2-ip-verse--chorus) */
.t2-ip-lyrics { display: grid; gap: 1rem; }
.t2-ip-verse {
  position: relative;
  padding: 1.15rem 1.4rem 1.2rem;
  border: 1px solid var(--border, #e2e8f0);
  border-left: 5px solid var(--p, #003380);
  border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, var(--p-50, #e6eeff) 0%, var(--surface, #fff) 70%);
}
.t2-ip-verse-label { display: block; margin-bottom: .45rem; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: .875rem; font-weight: 700; letter-spacing: .02em; }
.t2-ip-verse p { margin: 0; color: var(--text, #0f172a); font-size: 1.125rem; line-height: 2; }
.t2-ip-verse--chorus { border-left-color: var(--gold, #c8960c); background: linear-gradient(135deg, var(--gold-pale, #fdf3db) 0%, var(--surface, #fff) 78%); }
.t2-ip-verse--chorus .t2-ip-verse-label { color: #6b4a00; }
.t2-ip-verse--chorus p { font-weight: 600; }
.t2-ip-verse-note { margin-top: .35rem; color: var(--text-muted, #64748b); font-size: .95rem; }

/* อาคารเรียน — .t2-ip-bldg (ภาพ + ชื่อ + คำอธิบาย + รายชั้น) */
.t2-ip-bldgs { display: grid; gap: 1.75rem; }
.t2-ip-bldg {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem;
  align-items: start;
  padding-top: 1.75rem;
  border-top: 1px dashed rgba(200, 150, 12, .55);
}
.t2-ip-bldg:first-child { padding-top: 0; border-top: 0; }
.t2-ip-bldg-photo { margin: 0; overflow: hidden; border-radius: var(--r-md, 14px); box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1)); }
.t2-ip-bldg-photo img { display: block; width: 100%; height: auto; }
.t2-ip-bldg h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .5rem; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.3rem; font-weight: 700; }
.t2-ip-bldg > div > p { margin: 0 0 1rem; color: var(--text-2, #334155); line-height: 1.8; }
.t2-ip-floors { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.t2-ip-floor { display: flex; align-items: flex-start; gap: .75rem; }
.t2-ip-floor-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 3.4rem;
  padding: .3rem .4rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--p, #003380), var(--p-deeper, #002060));
  color: var(--gold-light, #f5c842);
  font-family: 'Prompt', 'Sarabun', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.t2-ip-floor-rooms { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .1rem 0 0; list-style: none; }
.t2-ip-floor-rooms li { padding: .15rem .7rem; border: 1px solid var(--border, #e2e8f0); border-radius: 999px; background: var(--surface, #fff); color: var(--text-2, #334155); font-size: .9375rem; line-height: 1.7; }

/* ห้องปฏิบัติการและแหล่งเรียนรู้ — .t2-ip-rooms > .t2-ip-room (ภาพ 3:2 + ชื่อ + คำอธิบาย) */
.t2-ip-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.t2-ip-room {
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-md, 14px);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
  transition: transform var(--t, .3s) var(--ease, ease), box-shadow var(--t, .3s) var(--ease, ease), border-color var(--t, .3s) var(--ease, ease);
}
.t2-ip-room:hover { transform: translateY(-3px); border-color: rgba(200, 150, 12, .6); box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .1)); }
.t2-ip-room img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.t2-ip-room-body { position: relative; padding: 1rem 1.15rem 1.2rem; border-top: 3px solid var(--gold, #c8960c); }
.t2-ip-room h3 { margin: 0 0 .3rem; color: var(--p, #003380); font-family: 'Prompt', 'Sarabun', sans-serif; font-size: 1.1rem; font-weight: 600; }
.t2-ip-room p { margin: 0; color: var(--text-2, #334155); line-height: 1.7; }

/* แถวสรุปในตาราง (รวมหมวด / รวมทั้งหมด) */
.t2-ip-table-wrap .table tbody tr.is-sub > * { --bs-table-bg: var(--p-50, #e6eeff); background-color: var(--p-50, #e6eeff); color: var(--p-dark, #001f52); font-weight: 700; }
.t2-ip-table-wrap .table tbody tr.is-total > * { --bs-table-bg: var(--p-deeper, #002060); background-color: var(--p-deeper, #002060); color: var(--gold-light, #f5c842); font-weight: 700; }
.t2-ip-table-wrap .table tbody td.is-indent { padding-left: 1.75rem; }
.t2-ip-table-wrap .table tbody td.is-num, .t2-ip-table-wrap .table thead th.is-num { text-align: center; font-variant-numeric: tabular-nums; }
.t2-ip-table-note { margin: .85rem 0 0; padding: 0 0 0 1.1rem; color: var(--text-muted, #64748b); font-size: .9375rem; line-height: 1.8; }

@media (max-width: 767.98px) {
  .t2-ip-bldg { grid-template-columns: 1fr; gap: 1rem; }
  .t2-ip-rooms { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .t2-ip-persons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .t2-ip-persons--lg { grid-template-columns: 1fr; }
  .t2-ip-person { padding: 1.35rem .75rem 1.1rem; }
  .t2-ip-person-photo { width: 6rem; }
  .t2-ip-persons--lg .t2-ip-person-photo { width: 9rem; }
  .t2-ip-verse { padding: 1rem 1.1rem 1.05rem; }
  .t2-ip-verse p { font-size: 1.0625rem; }
  .t2-ip-audio { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .t2-ip-chip, .t2-ip-person, .t2-ip-room { transition: none; }
  .t2-ip-person:hover, .t2-ip-room:hover { transform: none; }
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.t2-ip-sidebar-sticky { display: flex; flex-direction: column; gap: 1.5rem; }

@media (min-width: 992px) {
  /* header เป็น sticky สูง ~76px — เว้นระยะให้ sidebar ไม่ชนใต้ header */
  .t2-ip-sidebar-sticky { position: sticky; top: 96px; }
}

.t2-ip-sidenav {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
  overflow: hidden;
}
.t2-ip-sidenav-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  padding: .9rem 1.25rem;
  background: linear-gradient(135deg, var(--p-dark, #001f52), var(--p, #003380));
  color: #fff;
  font-family: 'Prompt', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}
/* ไอคอนทองหน้าหัวกรอบ: วงกลมโปร่งขอบทอง + เรืองเบา ๆ ให้โดดเด่นบนพื้นน้ำเงิน */
.t2-ip-sidenav-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(245, 200, 66, .55);
  border-radius: 50%;
  background: rgba(245, 200, 66, .14);
  color: var(--gold-light, #f5c842);
  font-size: .95rem;
  filter: drop-shadow(0 0 5px rgba(245, 200, 66, .55));
}
.t2-ip-sidenav-list { list-style: none; margin: 0; padding: .5rem; }
.t2-ip-sidenav-list a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .85rem;
  border-radius: var(--r-sm, 8px);
  color: var(--text-2, #334155);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast, .18s), color var(--t-fast, .18s);
}
.t2-ip-sidenav-list a i { width: 1.25rem; text-align: center; color: var(--p-light, #0052cc); }
.t2-ip-sidenav-list a:hover { background: var(--p-50, #e6eeff); color: var(--p, #003380); }
.t2-ip-sidenav-list a.is-active {
  background: var(--p, #003380);
  color: #fff;
  box-shadow: var(--shadow-navy, 0 4px 24px rgba(0, 51, 128, .28));
}
.t2-ip-sidenav-list a.is-active i { color: var(--gold-light, #f5c842); }
.t2-ip-sidenav-list a:focus-visible { outline: 3px solid var(--gold, #c8960c); outline-offset: 2px; }

/* ── Mobile / Tablet ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .t2-ip-body { padding-top: 2.25rem; }      /* padding-bottom ใช้ค่าหลักด้านบน (เว้นที่ให้ภาพแลนด์มาร์ก Footer) */
}
@media (max-width: 575.98px) {
  .t2-ip-card { padding: 1.25rem; border-radius: var(--r-md, 14px); }
  .t2-ip-grid { grid-template-columns: 1fr; }
  .t2-ip-stats { gap: .5rem; }
  .t2-ip-stat { padding: 1rem .5rem; }
  .t2-ip-stat span { font-size: .8125rem; }
  .t2-ip-tl-body { padding: .9rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .t2-ip-tile, .t2-ip-sidenav-list a { transition: none; }
  .t2-ip-tile:hover { transform: none; }
}