/* ═══════════════════════════════════════════════════════════════════════
   iOS Soft UI — Opaque Pastel (DESIGN.md §3.9–3.10, §3.16 ตัวอักษร)
   โหลดท้ายสุดใน template_base.php (หลัง $page_css) เพื่อทับสีเดิมของคอมโพเนนต์
   ใช้ได้กับหน้าสาธารณะเท่านั้น (admin/ ใช้ AdminLTE ของตัวเอง ไม่โหลดไฟล์นี้)
   ชื่อไฟล์/ชื่อคลาส "glass" คงไว้เพื่อไม่ต้องแก้ markup ทุกหน้า — เนื้อหาเป็นพื้นสีพาสเทลทึบ ไม่มี backdrop-filter

   คลาสกลาง
     .btn-glass-ios            ปุ่ม Pill พื้นพาสเทลทึบ + โทน: --blue(ค่าเริ่มต้น) --violet --green --orange --pink --purple --on-dark --gold
     .badge-glass-ios          ป้ายหัวข้อ/หมวด       + โทนเดียวกัน + --strong (ม่วงเข้มทึบ ตัวอักษรขาว สำหรับวางบนภาพ)
   คอมโพเนนต์เดิมที่ใช้สไตล์เดียวกัน (ไม่ต้องแก้ markup): .t2-ip-btn .t2-ip-back .t2-ip-chip .t2-ip-cta .t2-ip-person-more .tr-btn .t2-ip-hero-eyebrow
   ตัวแปรต่อองค์ประกอบ: --gl-bg พื้น · --gl-bg-hover พื้นตอน Hover · --gl-ink ตัวอักษร/ไอคอน · --gl-border ขอบโปร่งแสง · --gl-shadow สีเงา
   (--gl-tint = --gl-bg-hover, --gl-ring = --gl-border เก็บไว้ให้โค้ดเดิมที่อ้างชื่อเก่า)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Token: ตัวอักษร (DESIGN.md §3.16) · ระยะบรรทัดไทยต้อง ≥ 1.3 กันสระ/วรรณยุกต์ถูกตัด ── */
:root {
  --t2-font-head: 'Prompt', 'Kanit', 'Noto Sans Thai', sans-serif;
  --t2-font-body: 'Sarabun', 'Noto Sans Thai', sans-serif;
  --t2-fs-h1: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);   /* 28 → 40px */
  --t2-fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);      /* 24 → 32px */
  --t2-fs-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);    /* 20 → 24px */
  --t2-fs-h4: 1.125rem;                                   /* 18px */
  --t2-fs-lead: 1.125rem;                                 /* 18px */
  --t2-fs-body: 1rem;                                     /* 16px */
  --t2-fs-small: .875rem;                                 /* 14px */
  --t2-fs-caption: .8125rem;                              /* 13px — ขนาดต่ำสุดของข้อความ */
  --t2-fs-menu: .9rem;                                    /* 14.4px — แถบเมนูบน: .95rem ทำให้ชื่อโรงเรียนถูกตัดที่ 1280px */
  --t2-fs-menu-dd: .95rem;                                /* 15.2px — Dropdown */
  --t2-fs-btn: .9375rem;  --t2-fs-btn-sm: .875rem;  --t2-fs-btn-lg: 1rem;
  --t2-lh-h1: 1.3;  --t2-lh-h2: 1.35;  --t2-lh-h3: 1.4;  --t2-lh-h4: 1.45;
  --t2-lh-body: 1.7;  --t2-lh-small: 1.6;  --t2-lh-ui: 1.4;
  --t2-fw-h1: 700;  --t2-fw-h2: 700;  --t2-fw-h3: 600;  --t2-fw-h4: 600;
  --t2-fw-body: 400;  --t2-fw-menu: 600;  --t2-fw-btn: 500;  --t2-fw-badge: 600;

  /* Soft UI: มุมมน · เวลา · easing */
  --t2-r-sm: 12px;  --t2-r-md: 20px;  --t2-r-lg: 28px;  --t2-r-pill: 999px;
  --t2-dur: .22s;
  --t2-ease: cubic-bezier(.22, .61, .36, 1);
  --t2-spring: cubic-bezier(.34, 1.56, .64, 1);   /* เด้งเกินนิดแล้วนิ่ง — ใช้กับ transform ของปุ่มเท่านั้น */
  --t2-dur-spring: .38s;
}

/* ตัวอักษรพื้นฐาน — ความจำเพาะต่ำ: คลาสของคอมโพเนนต์ (.t2-ip-*, tw-text-*) ยังชนะตามเดิม */
body { font-family: var(--t2-font-body); font-size: var(--t2-fs-body); font-weight: var(--t2-fw-body); line-height: var(--t2-lh-body); }
h1, h2, h3, h4 { font-family: var(--t2-font-head); }
h1 { font-size: var(--t2-fs-h1); font-weight: var(--t2-fw-h1); line-height: var(--t2-lh-h1); }
h2 { font-size: var(--t2-fs-h2); font-weight: var(--t2-fw-h2); line-height: var(--t2-lh-h2); }
h3 { font-size: var(--t2-fs-h3); font-weight: var(--t2-fw-h3); line-height: var(--t2-lh-h3); }
h4 { font-size: var(--t2-fs-h4); font-weight: var(--t2-fw-h4); line-height: var(--t2-lh-h4); }
small, .small { font-size: var(--t2-fs-small); line-height: var(--t2-lh-small); }

/* เมนูหลัก / Dropdown / Drawer (คลาสจาก t2-header.css) */
.t2-nav-i { font-size: var(--t2-fs-menu); font-weight: var(--t2-fw-menu); line-height: var(--t2-lh-ui); }
.t2-dd-link { font-size: var(--t2-fs-menu-dd); line-height: 1.45; }
.t2-m-i { font-size: 1rem; font-weight: var(--t2-fw-menu); line-height: var(--t2-lh-ui); }

/* ── โทนสี (ตาม DESIGN.md §2 หมวดสีเมนู) ──
   ปุ่ม "อ่อนใส แต่ไม่ใช่แก้ว": พื้นพาสเทลอ่อนมาก (ทึบ ไม่เห็นด้านหลังทะลุ) + ขอบโปร่งแสงโทนเดียวกัน → Hover พื้นเข้มขึ้นเป็นสีพาสเทลชัด
   --gl-bg พื้นปกติ · --gl-bg-hover พื้นตอน Hover/Focus · --gl-ink ตัวอักษร/ไอคอน · --gl-border ขอบโปร่งแสง · --gl-shadow สีเงา */
.btn-glass-ios, .badge-glass-ios, .t2-ip-btn, .t2-ip-back, .t2-ip-chip, .t2-ip-cta, .t2-ip-person-more, .tr-btn, .tr-filter-reset, .print-button {
  --gl-bg: #F3F8FF; --gl-bg-hover: #DDEAFF; --gl-ink: #002B7F;
  --gl-border: rgba(0, 86, 210, .22); --gl-shadow: rgba(0, 43, 127, .3);
}
.btn-glass-ios--blue,   .badge-glass-ios--blue   { --gl-bg: #F3F8FF; --gl-bg-hover: #DDEAFF; --gl-ink: #002B7F; --gl-border: rgba(0, 86, 210, .22);  --gl-shadow: rgba(0, 43, 127, .3); }
.btn-glass-ios--violet, .badge-glass-ios--violet, .tr-btn--royal, .tr-filter-reset { --gl-bg: #F7F4FF; --gl-bg-hover: #E6DEFD; --gl-ink: #4C1D95; --gl-border: rgba(124, 58, 237, .24); --gl-shadow: rgba(76, 29, 149, .32); }
.btn-glass-ios--green,  .badge-glass-ios--green, .print-button { --gl-bg: #F0FDF4; --gl-bg-hover: #D6F7E3; --gl-ink: #14532D; --gl-border: rgba(22, 163, 74, .28);  --gl-shadow: rgba(20, 83, 45, .3); }
.btn-glass-ios--orange, .badge-glass-ios--orange { --gl-bg: #FFF7ED; --gl-bg-hover: #FFE8CF; --gl-ink: #7C2D12; --gl-border: rgba(234, 88, 12, .28);  --gl-shadow: rgba(124, 45, 18, .3); }
.btn-glass-ios--pink,   .badge-glass-ios--pink,   .tr-btn--general { --gl-bg: #FFF1F8; --gl-bg-hover: #FBDDED; --gl-ink: #831843; --gl-border: rgba(219, 39, 119, .26); --gl-shadow: rgba(131, 24, 67, .3); }
.btn-glass-ios--purple, .badge-glass-ios--purple { --gl-bg: #FAF5FF; --gl-bg-hover: #EEDDFD; --gl-ink: #581C87; --gl-border: rgba(147, 51, 234, .26); --gl-shadow: rgba(88, 28, 135, .3); }
/* วางบนภาพถ่าย/พื้นเข้ม (Hero): พื้นขาวทึบ ตัวอักษรน้ำเงินเข้ม — ไม่พึ่งการโปร่งแสงของพื้นหลัง */
.btn-glass-ios--on-dark, .badge-glass-ios--on-dark, .t2-ip-hero-eyebrow { --gl-bg: #FFFFFF; --gl-bg-hover: #E4EEFF; --gl-ink: #002B7F; --gl-border: rgba(255, 255, 255, .75); --gl-shadow: rgba(0, 12, 50, .45); }
.t2-ip-hero-eyebrow { --gl-bg: #EAF3FF; }
/* โทนทอง (ปุ่มหลักบน Hero) */
.btn-glass-ios--gold { --gl-bg: #FFF0B8; --gl-bg-hover: #FFD370; --gl-ink: #4A2F00; --gl-border: rgba(255, 255, 255, .7); --gl-shadow: rgba(120, 80, 0, .4); }
/* ชื่อเก่า (โค้ดอื่นอ้างอยู่) */
.btn-glass-ios, .badge-glass-ios, .t2-ip-btn, .t2-ip-back, .t2-ip-chip, .t2-ip-cta, .t2-ip-person-more, .tr-btn,
.btn-glass-ios--on-dark, .btn-glass-ios--gold { --gl-tint: var(--gl-bg-hover); --gl-ring: var(--gl-border); }

/* ── ปุ่ม: พื้นอ่อนทึบ + ขอบโปร่งแสง + ไฮไลต์ขอบบน + เงาเบา · ประกายแสง (shine) ซ่อนอยู่นอกปุ่ม รอพาดผ่านตอน Hover ── */
.btn-glass-ios, .t2-ip-btn, .t2-ip-back, .t2-ip-chip, .t2-ip-cta, .t2-ip-person-more, .tr-btn, .tr-filter-reset, .print-button {
  background-color: var(--gl-bg);
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%; background-position: 100% 0; background-repeat: no-repeat;
  border: 1px solid var(--gl-border);
  color: var(--gl-ink);
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px -6px var(--gl-shadow);
  text-decoration: none;
  transition: transform var(--t2-dur-spring) var(--t2-spring), background-color var(--t2-dur) var(--t2-ease), border-color var(--t2-dur) var(--t2-ease),
              box-shadow var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease);
}
.btn-glass-ios {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 38px; padding: .3rem 1.1rem; border-radius: var(--t2-r-pill);
  font-size: var(--t2-fs-btn); font-weight: var(--t2-fw-btn); line-height: var(--t2-lh-ui); cursor: pointer;
}
/* ปุ่มเดิมที่ไม่ใช่ pill → ทำให้เป็น pill ตามมาตรฐาน (.t2-ip-cta เป็นแถบ/การ์ด คงรัศมีเดิม) */
.t2-ip-btn, .t2-ip-person-more, .tr-btn, .tr-filter-reset, .print-button { border-radius: var(--t2-r-pill); font-weight: var(--t2-fw-btn); line-height: var(--t2-lh-ui); }
.tr-filter-reset, .print-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 38px; padding: .3rem 1.05rem; font-family: var(--t2-font-body); font-size: var(--t2-fs-btn); }
.t2-ip-btn, .t2-ip-person-more, .tr-btn { min-height: 38px; padding: .3rem 1.05rem; gap: .4rem; font-size: var(--t2-fs-btn); }

/* Hover / Focus คีย์บอร์ด: พื้นเข้มขึ้นเป็นสีพาสเทลชัด · เด้งขึ้น 3px แบบสปริง · เงาฟุ้งชัดขึ้น · ประกายพาดผ่านครั้งเดียว */
.btn-glass-ios:hover, .btn-glass-ios:focus-visible,
.t2-ip-btn:hover, .t2-ip-back:hover, .t2-ip-chip:hover, .t2-ip-cta:hover, .t2-ip-person-more:hover, .tr-btn:hover, .tr-filter-reset:hover, .print-button:hover,
.t2-ip-btn:focus-visible, .t2-ip-chip:focus-visible, .t2-ip-cta:focus-visible, .tr-btn:focus-visible, .tr-filter-reset:focus-visible, .print-button:focus-visible {
  background-color: var(--gl-bg-hover);
  background-position: 0 0;
  color: var(--gl-ink);
  filter: none;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #fff, 0 12px 22px -8px var(--gl-shadow);
  transition: transform var(--t2-dur-spring) var(--t2-spring), background-color var(--t2-dur) var(--t2-ease), border-color var(--t2-dur) var(--t2-ease),
              box-shadow var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease), background-position .7s var(--t2-ease);
}
.t2-ip-back:hover { transform: translate(-3px, -3px); }
/* Press: บีบลงนิด ๆ แล้วเด้งคืนแบบสปริงเมื่อปล่อย */
.btn-glass-ios:active, .t2-ip-btn:active, .t2-ip-back:active, .t2-ip-chip:active, .t2-ip-cta:active, .t2-ip-person-more:active, .tr-btn:active, .tr-filter-reset:active, .print-button:active {
  transform: translateY(0) scale(.96); box-shadow: inset 0 1px 0 #fff, 0 2px 6px -4px var(--gl-shadow); transition-duration: .1s;
}
/* Focus คีย์บอร์ดที่เห็นชัด */
.btn-glass-ios:focus-visible, .t2-ip-btn:focus-visible, .t2-ip-back:focus-visible, .t2-ip-chip:focus-visible, .tr-filter-reset:focus-visible, .print-button:focus-visible,
.t2-ip-cta:focus-visible, .t2-ip-person-more:focus-visible, .tr-btn:focus-visible { outline: 3px solid var(--gl-ink); outline-offset: 3px; }
.btn-glass-ios--on-dark:focus-visible, .btn-glass-ios--gold:focus-visible { outline-color: #FFD166; }

/* on-dark/gold: เงาเข้มกว่าเพราะวางบนภาพ */
.btn-glass-ios--on-dark, .btn-glass-ios--gold { box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px var(--gl-shadow); }
.btn-glass-ios--on-dark:hover, .btn-glass-ios--gold:hover { box-shadow: inset 0 1px 0 #fff, 0 14px 24px -8px var(--gl-shadow); }

/* ไอคอนในปุ่ม: ลูกศรพุ่งไปขวา 4px แบบสปริง · ไอคอนอื่นโยกทักทายหนึ่งครั้ง (ไม่วนซ้ำ) */
.btn-glass-ios .fa-arrow-right, .tr-btn .fa-arrow-right { transition: transform var(--t2-dur-spring) var(--t2-spring); }
.btn-glass-ios:hover .fa-arrow-right, .btn-glass-ios:focus-visible .fa-arrow-right,
.tr-btn:hover .fa-arrow-right, .tr-btn:focus-visible .fa-arrow-right { transform: translateX(4px); }
.btn-glass-ios:hover i:not([class*="arrow"]):not([class*="chevron"]):not(.fa-star),
.btn-glass-ios:focus-visible i:not([class*="arrow"]):not([class*="chevron"]):not(.fa-star),
.t2-ip-btn:hover i, .t2-ip-cta:hover .t2-ip-cta-icon i, .t2-ip-chip:hover i, .tr-filter-reset:hover i, .print-button:hover i { animation: t2-wiggle .55s ease-out 1; }
@keyframes t2-wiggle {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(-14deg) scale(1.15); }
  55%  { transform: rotate(10deg) scale(1.15); }
  80%  { transform: rotate(-4deg) scale(1.05); }
  100% { transform: rotate(0) scale(1); }
}

/* ปุ่มแถบ CTA (หน้า special-rooms ฯลฯ): ไอคอน/ลูกศรทอง → สีหมวด, ข้อความรองเป็นสีเข้ม */
.t2-ip-cta-text small { color: var(--gl-ink); opacity: .85; }
.t2-ip-cta-arrow { color: var(--gl-ink); transition: transform var(--t2-dur-spring) var(--t2-spring); }
.t2-ip-cta:hover .t2-ip-cta-arrow { transform: translateX(4px); }
.t2-ip-cta-icon { background: #fff; border-color: var(--gl-border); color: var(--gl-ink); }

/* ชิปกลุ่ม: ตัวเลขในชิป */
.t2-ip-chip b { background: #fff; color: var(--gl-ink); }
.t2-ip-chip:hover b { background: #fff; }

/* ── ป้าย: พื้นอ่อนทึบ + ขอบโปร่งแสง ── */
.badge-glass-ios, .t2-ip-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .9rem; border-radius: var(--t2-r-pill);
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  color: var(--gl-ink);
  font-size: var(--t2-fs-small); font-weight: var(--t2-fw-badge); line-height: var(--t2-lh-ui);
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px -4px var(--gl-shadow);
}
.badge-glass-ios i { color: inherit; }
/* ม่วงเข้มทึบ: ป้ายหัวข้อบนภาพ (เช่น การ์ดถ้วยพระราชทาน) */
.badge-glass-ios--strong {
  --gl-bg: #5B21B6; --gl-ink: #fff; --gl-border: rgba(255, 255, 255, .45); --gl-shadow: rgba(46, 16, 101, .6);
  background: var(--gl-bg); color: #fff;
}
.badge-glass-ios--on-dark { box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px var(--gl-shadow); }

/* ── Touch friendly: จอสัมผัส/มือถือ พื้นที่กดกลับเป็น ≥ 44px (เดสก์ท็อปเมาส์ ปุ่มเล็กลง 34–38px) ── */
@media (pointer: coarse), (max-width: 767.98px) {
  .btn-glass-ios, .t2-ip-btn, .t2-ip-back, .t2-ip-person-more, .tr-btn, .tr-filter-reset, .print-button, .search-hint-tag { min-height: 44px; }
  .t2-ip-chip { min-height: 40px; }
}

/* ปุ่ม "ดูโปรไฟล์" ในบัตรบุคคล: ทับกฎ hover ที่ผูกกับการ์ด (inner-page.css) ที่ความจำเพาะสูงกว่า */
.t2-ip-person:has(.t2-ip-person-more:hover) .t2-ip-person-more,
.t2-ip-person:hover .t2-ip-person-more {
  background-color: var(--gl-bg-hover); background-position: 0 0; color: var(--gl-ink); transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #fff, 0 12px 22px -8px var(--gl-shadow);
}

/* ── ขนาด/รูปแบบเสริมของ .btn-glass-ios ── */
.btn-glass-ios--sm { min-height: 34px; padding: .2rem .9rem; font-size: var(--t2-fs-btn-sm); }
.btn-glass-ios--lg { min-height: 44px; padding: .45rem 1.5rem; font-size: var(--t2-fs-btn-lg); }
.btn-glass-ios--icon { padding: 0; flex: none; box-sizing: border-box; width: 2.75rem; height: 2.75rem; min-height: 0; line-height: 1; }
@media (pointer: coarse), (max-width: 767.98px) { .btn-glass-ios--sm { min-height: 44px; } }
/* ปุ่มที่อยู่ในการ์ดลิงก์ (Quick Links): Hover ทั้งการ์ด = ปุ่มเปลี่ยนสีเข้ม + ประกายพาด + ลูกศรพุ่ง + ไอคอนในการ์ดโยก */
.t2-ql-card:hover .btn-glass-ios { background-color: var(--gl-bg-hover); background-position: 0 0; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 10px 18px -8px var(--gl-shadow); transition: transform var(--t2-dur-spring) var(--t2-spring), background-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease), background-position .7s var(--t2-ease); }
.t2-ql-card:hover .btn-glass-ios .fa-arrow-right { transform: translateX(4px); }
.t2-ql-card:hover .btn-glass-ios i:not([class*="arrow"]) { animation: t2-wiggle .55s ease-out 1; }
.t2-ql-card:active .btn-glass-ios { transform: scale(.96); }
.t2-ql-card:hover > div:first-child > span:first-child > i { animation: t2-wiggle .6s ease-out 1; } /* ไอคอนในชิปสีของการ์ด */

/* ── การ์ด Quick Links: พื้นขาวทึบ ขอบฟ้าโปร่งแสง (เดิม bg-white/70 + blur) · เด้งขึ้นแบบสปริง ── */
.t2-ql-card {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(0, 86, 210, .14);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(11, 59, 188, .3);
  transition: transform var(--t2-dur-spring) var(--t2-spring), box-shadow var(--t2-dur) var(--t2-ease), background-color var(--t2-dur) var(--t2-ease);
}
.t2-ql-card:hover { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 18px 32px -14px rgba(11, 59, 188, .38); }
.t2-ql-card:focus-visible { outline: 3px solid #0056D2; outline-offset: 3px; }
.t2-ql-card .tw-text-xs { font-size: var(--t2-fs-caption); line-height: var(--t2-lh-small); } /* คำอธิบายใต้ชื่อ: ไม่เล็กกว่า 13px */

/* ── Header: ปุ่มเข้าสู่ระบบ + ค้นหา (พาสเทลฟ้าอ่อน) — ทางลัดสีพาสเทลของเมนู (.t2-util) คงเดิม ── */
.t2-site-header .t2-login,
.t2-site-header .t2-icon-btn:not(.t2-util) {
  --gl-ink: #0B3BBC;
  background-color: #F1F6FF;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%; background-position: 100% 0; background-repeat: no-repeat;
  border: 1px solid rgba(47, 128, 237, .26);
  color: var(--gl-ink);
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px -6px rgba(11, 59, 188, .4);
  transition: transform var(--t2-dur-spring) var(--t2-spring), background-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease);
}
.t2-site-header .t2-login:hover,
.t2-site-header .t2-icon-btn:not(.t2-util):hover {
  background-color: #D6E6FF; background-position: 0 0;
  color: var(--gl-ink);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #fff, 0 12px 22px -8px rgba(11, 59, 188, .45);
  transition: transform var(--t2-dur-spring) var(--t2-spring), background-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease), background-position .7s var(--t2-ease);
}
.t2-site-header .t2-login:hover i, .t2-site-header .t2-icon-btn:not(.t2-util):hover i { animation: t2-wiggle .55s ease-out 1; }
.t2-site-header .t2-login:active,
.t2-site-header .t2-icon-btn:not(.t2-util):active { transform: translateY(0) scale(.96); transition-duration: .1s; }
/* พื้นที่กด ≥ 44px บนจอสัมผัส/แท็บเล็ต/มือถือ · เดสก์ท็อป ≥1280px (เมาส์) คงเดิม 40px เพราะแถบเมนูแน่น — 44px ทำให้ชื่อโรงเรียนถูกตัดที่ 1280px */
@media (pointer: coarse), (max-width: 1279.98px) {
  .t2-site-header .t2-login, .t2-site-header .t2-icon-btn:not(.t2-util) { min-width: 2.75rem; min-height: 2.75rem; }
}

/* ═══ Link & Interactive Element Rules (DESIGN.md §3.14) — ไฟล์นี้โหลดท้ายสุด จึงใช้เป็นที่รวมกฎ global ═══ */
/* ล้างกรอบ outline เพี้ยนจากการคลิก/แตะ (mouse focus) · คีย์บอร์ด (:focus-visible) ยังคงเห็นกรอบตามสไตล์แต่ละคอมโพเนนต์ */
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
a:active, button:active { outline: none; }

/* Social Footer: วงกลมสีแบรนด์ทึบ ไอคอนขาว · พื้นกำหนดผ่าน --gl-bg/--gl-bg-hover ใน markup (footer.php) · พื้นสีแบรนด์ไม่ใช้ประกายขาว */
a.t2-ft-social.btn-glass-ios {
  width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; color: #fff;
  background-image: none;
  border: 2px solid rgba(255, 255, 255, .55); outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(0, 0, 0, .5);
}
a.t2-ft-social.btn-glass-ios:hover,
a.t2-ft-social.btn-glass-ios:focus-visible {
  color: #fff; transform: translateY(-4px) scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 20px -6px rgba(0, 0, 0, .55);
}
a.t2-ft-social.btn-glass-ios:active { transform: translateY(0) scale(.94); }
/* คีย์บอร์ดเท่านั้น: วงแหวนทองกลม */
a.t2-ft-social.btn-glass-ios:focus-visible { outline: 3px solid #FFD166; outline-offset: 3px; }

/* ── Reduced Motion: ไม่เคลื่อนที่/ย่อขยาย/โยก/ประกาย เหลือเฉพาะการเปลี่ยนสี ── */
@media (prefers-reduced-motion: reduce) {
  .btn-glass-ios, .t2-ip-btn, .t2-ip-back, .t2-ip-chip, .t2-ip-cta, .t2-ip-person-more, .tr-btn, .tr-filter-reset, .print-button,
  .t2-site-header .t2-login, .t2-site-header .t2-icon-btn:not(.t2-util), a.t2-ft-social.btn-glass-ios, .t2-ql-card {
    transition: background-color .15s linear, color .15s linear, border-color .15s linear !important;
  }
  .btn-glass-ios:hover, .btn-glass-ios:active, .btn-glass-ios:focus-visible, .t2-ip-btn:hover, .t2-ip-btn:active, .t2-ip-back:hover, .t2-ip-back:active,
  .t2-ip-chip:hover, .t2-ip-chip:active, .t2-ip-cta:hover, .t2-ip-cta:active, .t2-ip-person-more:hover, .t2-ip-person-more:active,
  .tr-btn:hover, .tr-btn:active, .tr-filter-reset:hover, .tr-filter-reset:active, .print-button:hover, .print-button:active,
  .t2-site-header .t2-login:hover, .t2-site-header .t2-login:active,
  .t2-site-header .t2-icon-btn:not(.t2-util):hover, .t2-site-header .t2-icon-btn:not(.t2-util):active,
  .t2-ip-person:hover .t2-ip-person-more, .t2-ip-person:has(.t2-ip-person-more:hover) .t2-ip-person-more,
  a.t2-ft-social.btn-glass-ios:hover, a.t2-ft-social.btn-glass-ios:active, a.t2-ft-social.btn-glass-ios:focus-visible,
  .t2-ql-card:hover, .t2-ql-card:hover .btn-glass-ios, .t2-ql-card:active .btn-glass-ios { transform: none !important; }
  /* ไม่มีประกายพาด */
  .btn-glass-ios:hover, .btn-glass-ios:focus-visible, .t2-ip-btn:hover, .t2-ip-back:hover, .t2-ip-chip:hover, .t2-ip-cta:hover, .t2-ip-person-more:hover,
  .tr-btn:hover, .tr-filter-reset:hover, .print-button:hover, .t2-site-header .t2-login:hover, .t2-site-header .t2-icon-btn:not(.t2-util):hover,
  .t2-ql-card:hover .btn-glass-ios { background-position: 100% 0; }
  /* ไม่โยกไอคอน / ไม่พุ่งลูกศร */
  .btn-glass-ios i, .t2-ip-btn i, .t2-ip-cta i, .t2-ip-chip i, .tr-filter-reset i, .print-button i, .t2-site-header .t2-login i, .t2-site-header .t2-icon-btn i,
  .t2-ql-card i { animation: none !important; }
  .btn-glass-ios .fa-arrow-right, .tr-btn .fa-arrow-right, .t2-ip-cta-arrow { transition: none; }
  .btn-glass-ios:hover .fa-arrow-right, .tr-btn:hover .fa-arrow-right, .t2-ql-card:hover .btn-glass-ios .fa-arrow-right, .t2-ip-cta:hover .t2-ip-cta-arrow { transform: none; }
}

/* ═══ Tooltip (DESIGN.md §3.14) — ปุ่มโซเชียล Footer + ปุ่มไอคอน Header (.t2-tip) ═══
   แสดงเมื่อ Hover หรือ Focus คีย์บอร์ด · ป้ายเป็นลูกของลิงก์ จึงเลื่อนเมาส์เข้าไปอ่านได้โดยไม่หาย · กด Esc ปิด (main.js เติมคลาส .t2-tip-hide)
   ข้อความเดียวกับ aria-label จึงไม่อ่านซ้ำสองแบบ (ป้ายไม่ใช่ข้อมูลเดียวที่ผู้ใช้อ่านหน้าจอได้) */
a.t2-ft-social { position: relative; }
a.t2-ft-social[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 80;
  padding: .3rem .7rem; border-radius: var(--t2-r-sm);
  background: #fff; color: #002B7F; border: 1px solid rgba(0, 86, 210, .24);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(0, 12, 50, .6);
  font-family: var(--t2-font-body); font-size: var(--t2-fs-caption); font-weight: 600; line-height: var(--t2-lh-ui);
  white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
  transition: opacity var(--t2-dur) var(--t2-ease), transform var(--t2-dur) var(--t2-ease), visibility 0s linear var(--t2-dur);
}
a.t2-ft-social[data-tip]:hover::after,
a.t2-ft-social[data-tip]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition-delay: 0s;
}
.t2-tip::after { font-size: var(--t2-fs-caption); } /* เดิม 12px → ไม่ต่ำกว่า 13px */
.t2-tip.t2-tip-hide::after, a.t2-ft-social[data-tip].t2-tip-hide::after { opacity: 0 !important; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  a.t2-ft-social[data-tip]::after, a.t2-ft-social[data-tip]:hover::after, a.t2-ft-social[data-tip]:focus-visible::after { transform: translateX(-50%); transition: opacity .15s linear, visibility 0s; }
}

/* ═══ Hero Carousel หน้าแรก (includes/hero-carousel.php) — ป้าย + ปุ่มหยุด/เลื่อน เป็นพื้นพาสเทลทึบ (DESIGN.md §3.10) ═══ */
.school-hero__badge {
  background: #EAF3FF; color: #002B7F;
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 10px -4px rgba(0, 12, 50, .45);
  font-size: var(--t2-fs-small); line-height: var(--t2-lh-ui);
}
.school-hero__badge i { color: #A16207; } /* ดาวทองเข้ม: เดิม #FFD166 จางบนพื้นฟ้าอ่อน (วัด #D99100 ได้ 2.35:1 จึงเข้มขึ้น) */
.school-hero__pause {
  width: 44px; height: 44px; font-size: .8rem;
  background: #EAF3FF; color: #0B3BBC;
  border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -8px rgba(0, 12, 50, .6);
  transition: transform var(--t2-dur) var(--t2-ease), background-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease);
}
.school-hero__pause:hover, .school-hero__pause:focus-visible {
  background: #D9E8FF; color: #0B3BBC; transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 22px -8px rgba(0, 12, 50, .65);
}
.school-hero__pause:active { transform: translateY(0) scale(.97); }
@media (max-width: 767.98px) { .school-hero .school-hero__control { width: 44px; height: 44px; } } /* เดิม 42px */
@media (prefers-reduced-motion: reduce) {
  .school-hero__pause { transition: background-color .15s linear; }
  .school-hero__pause:hover, .school-hero__pause:focus-visible, .school-hero__pause:active { transform: none; }
}

/* ═══ ขนาดข้อความต่ำสุด 13px (DESIGN.md §3.16) — Tailwind `tw-text-xs` เดิม 12px ═══ */
.tw-text-xs { font-size: var(--t2-fs-caption); line-height: var(--t2-lh-small); }
.btn-glass-ios.tw-text-xs { font-size: var(--t2-fs-btn-sm); line-height: var(--t2-lh-ui); } /* ปุ่ม "ดูรายละเอียด" ในการ์ดรางวัลเป็นปุ่ม ไม่ใช่ caption */

/* ── หัวข้อที่ใช้คลาสของ Bootstrap (.h1–.h6) / h5–h6: ระยะบรรทัดไทย ≥ 1.3 (Bootstrap ตั้ง 1.2 ตัดสระ/วรรณยุกต์) ── */
.h1 { line-height: var(--t2-lh-h1); } .h2 { line-height: var(--t2-lh-h2); } .h3 { line-height: var(--t2-lh-h3); }
.h4 { line-height: var(--t2-lh-h4); } h5, .h5, h6, .h6 { line-height: var(--t2-lh-h4); }
h5, h6 { font-family: var(--t2-font-head); }

/* ── ชิปคำแนะนำในกล่องค้นหา (template_base.php → .search-hint-tag): พื้นพาสเทลทึบ ตัวเข้ม 13px สูง 44px
   (เดิม ขาวโปร่ง .08 + ตัวอักษร .6 บนพื้นเข้ม จางและเล็ก 12px) ── */
.search-hint-tag {
  display: inline-flex; align-items: center; min-height: 36px; padding: .2rem .95rem;
  background: #EAF3FF; color: #002B7F; border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px -8px rgba(0, 12, 50, .6);
  font-size: var(--t2-fs-small); font-weight: var(--t2-fw-btn); line-height: var(--t2-lh-ui);
  transition: transform var(--t2-dur) var(--t2-ease), background-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease);
}
.search-hint-tag:hover, .search-hint-tag:focus-visible {
  background: #D9E8FF; border-color: rgba(255, 255, 255, .75); color: #002B7F; transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 20px -8px rgba(0, 12, 50, .65);
}
.search-hint-tag:focus-visible { outline: 3px solid #FFD166; outline-offset: 3px; }
.search-hint-tag:active { transform: translateY(0) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .search-hint-tag { transition: background-color .15s linear; }
  .search-hint-tag:hover, .search-hint-tag:focus-visible, .search-hint-tag:active { transform: none; }
}

/* ═══ การ์ดหน้าแรกที่ยังเป็น Tailwind พื้นโปร่ง + blur → พื้นพาสเทลทึบ (DESIGN.md §3.10) · ใช้ attribute selector เพราะคลาสเป็น Tailwind ที่คอมไพล์ล่วงหน้า ═══ */
/* การ์ดสถิติ "รู้จักโรงเรียน" (about-section.php): โทนชมพู/ฟ้า/เหลืองเดิม แต่ทึบ */
article[class*="tw-backdrop-blur-[2px]"] { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(11, 59, 188, .3); }
article[class*="tw-bg-pink-100/55"]  { background-color: #FCE7F3; }
article[class*="tw-bg-sky-100/55"]   { background-color: #E0F2FE; }
article[class*="tw-bg-amber-100/55"] { background-color: #FEF3C7; }
/* กล่อง "รางวัลประเภทอื่น ๆ" (awards-section.php): ขาวทึบ ขอบม่วงอ่อนเดิม */
div[class*="tw-backdrop-blur-sm"] { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* คำถามที่พบบ่อย (faq-section.php) */
.faq-item { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(0, 86, 210, .14); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(11, 59, 188, .3); }
/* ข้อความ 11px ในป้ายวันที่ (news-section.php / calendar-events.php) → 13px */
[class*="tw-text-[11px]"] { font-size: var(--t2-fs-caption); line-height: var(--t2-lh-ui); }

/* Tailwind `leading-tight` = 1.25 → ไทย ≥ 1.3 (หัวข้อหน้าแรก/ชื่อโรงเรียนใน Header ที่ truncate ตัดวรรณยุกต์ได้) · หัวข้อ Dropdown ≥ 13px */
.tw-leading-tight { line-height: var(--t2-lh-h1); }
.t2-dd-title { font-size: var(--t2-fs-caption); }

/* ═══ แบ่งหน้า (news, video-gallery-full): ปุ่มตัวเลขอ่อนทึบ · Hover เข้มขึ้น + เด้งสปริง · หน้าปัจจุบันน้ำเงินเข้มตัวขาว ═══
   `ul.pagination` ทำให้ความจำเพาะสูงกว่า CSS ใน news.php และ Bootstrap */
ul.pagination { gap: 6px; flex-wrap: wrap; }
ul.pagination .page-item .page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: .25rem .7rem;
  border: 1px solid rgba(0, 86, 210, .22); border-radius: 12px !important;
  background-color: #F3F8FF;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%; background-position: 100% 0; background-repeat: no-repeat;
  color: #002B7F; font-family: var(--t2-font-body); font-size: var(--t2-fs-btn); font-weight: var(--t2-fw-btn); line-height: var(--t2-lh-ui);
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px -6px rgba(0, 43, 127, .3);
  transition: transform var(--t2-dur-spring) var(--t2-spring), background-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease);
}
ul.pagination .page-item .page-link:hover, ul.pagination .page-item .page-link:focus-visible {
  background-color: #DDEAFF; background-position: 0 0; color: #002B7F; transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #fff, 0 12px 22px -8px rgba(0, 43, 127, .3);
  transition: transform var(--t2-dur-spring) var(--t2-spring), background-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease), background-position .7s var(--t2-ease);
}
@media (pointer: coarse), (max-width: 767.98px) { ul.pagination .page-item .page-link { min-width: 44px; min-height: 44px; } } /* จอสัมผัส/มือถือ กลับเป็น 44px */
ul.pagination .page-item .page-link:active { transform: translateY(0) scale(.96); transition-duration: .1s; }
ul.pagination .page-item .page-link:focus-visible { outline: 3px solid #002B7F; outline-offset: 3px; }
ul.pagination .page-item.active .page-link, ul.pagination .page-item.active .page-link:hover {
  background-color: #002B7F; background-image: none; border-color: #002B7F; color: #fff;
  box-shadow: 0 8px 18px -8px rgba(0, 43, 127, .6);
}
ul.pagination .page-item.disabled .page-link { background-color: #F1F5F9; background-image: none; border-color: rgba(100, 116, 139, .2); color: #64748B; box-shadow: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  ul.pagination .page-item .page-link { transition: background-color .15s linear, color .15s linear !important; }
  ul.pagination .page-item .page-link:hover, ul.pagination .page-item .page-link:active, ul.pagination .page-item .page-link:focus-visible { transform: none !important; background-position: 100% 0; }
}

/* ── การ์ดลิงก์ "ข้อมูลที่เกี่ยวข้อง" (.t2-ip-linkcard): เด้งสปริง + ไอคอนโยกหนึ่งครั้ง + ลูกศรพุ่ง (CSS เดิมใน inner-page.css มียก 3px/ลูกศร 4px อยู่แล้ว) ── */
.t2-ip-linkcard { transition: transform var(--t2-dur-spring) var(--t2-spring), border-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease); }
.t2-ip-linkcard-arrow { transition: transform var(--t2-dur-spring) var(--t2-spring); }
.t2-ip-linkcard:hover .t2-ip-linkcard-icon { animation: t2-wiggle .55s ease-out 1; }
.t2-ip-linkcard:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) {
  .t2-ip-linkcard:hover .t2-ip-linkcard-icon { animation: none; }
  .t2-ip-linkcard, .t2-ip-linkcard-arrow { transition: border-color .15s linear, box-shadow .15s linear !important; }
  .t2-ip-linkcard:hover, .t2-ip-linkcard:active { transform: none !important; }
}

/* ปุ่มในการ์ด Quick Links: กว้างพอดีข้อความ (เดิมกว้างคงที่ 160px ดูใหญ่/ตัน) · มือถือยังเต็มความกว้างการ์ดเพราะการ์ดเล็ก */
@media (min-width: 640px) { .t2-ql-card .btn-glass-ios { width: auto; align-self: flex-start; } }