/* ──────────────────────────────────────────────────────────────────────────
   หน้าแรก tb1.ac.th (index.php)

   รอบ 24 ก.ย. 2569: ภาษาภาพเดียวกับ /zerodropout/ ชุดเดียวกับหน้าข่าว ทำเนียบ และครูที่ปรึกษา
       หัวหน้าน้ำเงินไล่เฉดเต็มจอ ซ้ายเป็นตรา ป้าย ชื่อโรงเรียน ปุ่ม และช่องค้นหาแบบแคปซูล
       ขวาเป็นกระจกฝ้า "โรงเรียนในตัวเลข" (ตัวเลขนับขึ้น แท่งนักเรียนรายชั้น วันนี้ที่โรงเรียน)
       เวทีข่าวเด่นเป็นการ์ดลอยทับขอบล่างของหัวหน้า หัวข้อแต่ละส่วนมีขีดสีนำ
       กำหนดการ สารบัญ และติดต่อเป็นแผงที่มีแถบหัว แถบพระราชทานใช้ไล่เฉดเดียวกับหัวหน้า
       (รอบก่อน 23 ก.ย. เป็น "หน้าหนึ่งหนังสือพิมพ์" ในการ์ดกว้างสุด 1440px)

   สี: alias ที่ชี้ไป --tb1-* ของธีมเท่านั้น พื้นเข้มใช้ --tb1-banner-1 ซึ่งเข้มทั้งสองโหมด

   ความเฉพาะของเว็บนี้
       - ธีมบังคับ font-family บน p/span/div/li/a/strong ด้วย !important
         ตัวเซริฟจึงอยู่ที่ h1–h3, b และคลาส tb1-font-display
       - กฎสีของ <a> ต้องมีคลาสสองชั้น เพื่อชนะสีลิงก์โหมดมืดของ tb1-display-scale.css (0,1,1)
       - ขนาดตัวอักษรเป็น rem ปุ่มปรับขนาดตัวอักษรของเว็บจึงมีผล
   ★ ไม่มี opacity:0 เป็นสถานะพัก ที่ขยับได้มีแค่ตำแหน่ง (สคริปต์ติด hp-motion ก่อนเท่านั้น)
     ข้อยกเว้นเดียวคือภาพข่าวเด่นที่ยังไม่ถึงคิว ซึ่งซ้อนอยู่ใต้ภาพที่กำลังแสดง
   ────────────────────────────────────────────────────────────────────────── */

/* ── นอกเปลือกหน้า ─────────────────────────────────────────────────────── */
body.hp-page {
    margin: 0;
    background: var(--tb1-page, #f8fafc);
    color: var(--tb1-ink-1, #0f172a);
}

html:has(body.hp-page) {
    scroll-padding-top: 4.5rem;
}

body.hp-page a.hp-skip {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 10px 18px;
    color: #ffffff;
    background: var(--tb1-banner-1, #1d4ed8);
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    text-decoration: none;
    transition: top .16s ease;
}

body.hp-page a.hp-skip:focus {
    top: 0;
    outline: 3px solid var(--tb1-warning-soft, #fbbf24);
    outline-offset: 2px;
}

body.hp-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── โทเคนของหน้า ─────────────────────────────────────────────────────── */
.hp {
    --hp-paper: var(--tb1-surface, #ffffff);
    --hp-paper-alt: var(--tb1-surface-alt, #f1f5f9);
    --hp-ink: var(--tb1-ink-1, #0f172a);
    --hp-ink-2: var(--tb1-ink-2, #334155);
    /* ★ 28 ต.ค. 2569 (แนวทาง peoplesolar): หัวเรื่องบนพื้นอ่อนเป็นน้ำเงินเข้ม แยกจากน้ำเงินสดของสิ่งที่กดได้
       โหมดมืดเป็นขาวอมเทา (ตั้งที่ includes/tb1_theme.php) */
    --hp-heading: var(--tb1-heading, var(--tb1-brand-strong, #1e3a8a));
    --hp-muted: var(--tb1-ink-3, #5a697f);
    --hp-line: var(--tb1-border, #e2e8f0);
    --hp-line-bold: var(--tb1-border-bold, #cbd5e1);
    --hp-brand: var(--tb1-brand, #1d4ed8);
    --hp-brand-soft: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 10%, var(--tb1-surface, #ffffff));
    --hp-brand-line: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 35%, var(--tb1-border, #e2e8f0));
    --hp-on-brand: var(--tb1-on-brand, #ffffff);
    /* พื้นเข้มทั้งสองโหมด ตัวอักษรบนนี้เป็นสีขาวเสมอ */
    --hp-navy: var(--tb1-banner-1, #1d4ed8);
    --hp-gold: var(--tb1-warning-soft, #fbbf24);
    /* ตัวอักษรทองบนพื้นน้ำเงิน: #FBBF24 ได้แค่ 4.0:1 บนน้ำเงินโหมดสว่าง
       ไม่มีโทเคนทองอ่อนที่คงที่ทั้งสองโหมด (warning-pale โหมดมืดเป็นน้ำตาลเข้ม) จึงกำหนดเอง */
    --hp-gold-text: #fde68a;
    --hp-gold-ink: var(--tb1-text-warning, #b45309);
    --hp-ok: var(--tb1-text-success, #047857);
    --hp-ok-mark: var(--tb1-success, #10b981);
    /* text-danger โหมดสว่าง (#DC2626) ได้ 4.41:1 บนพื้นรอง ไม่ผ่าน AA */
    --hp-alert: #b91c1c;
    /* ตัวอักษรรองบนพื้นน้ำเงิน (ขาวอมม่วงอ่อน) เกิน 7:1 ทุกตำแหน่งของไล่เฉด */
    --hp-on-hero-2: #e0e7ff;
    --hp-serif: var(--tb1-font-display, "Noto Sans Thai Looped", sans-serif);
    --hp-sans: var(--tb1-font-body, "Sarabun", system-ui, sans-serif);
    --hp-ease: cubic-bezier(.4, 0, .2, 1);
    /* ★ 28 ต.ค. 2569: มุมสามขนาด เงาจางชุดเดียว ตามโทเคนกลาง (ตัวอักษรใช้ --tb1-fs-* ตรง ๆ ในแต่ละกฎ) */
    --hp-r-sm: var(--tb1-radius-sm, 10px);
    --hp-r: var(--tb1-radius-md, 16px);
    --hp-r-lg: var(--tb1-radius-lg, 22px);
    --hp-gap: clamp(16px, 2vw, 24px);
    --hp-shadow: var(--tb1-shadow-card, 0 0 16px rgba(15, 23, 42, .05));
    --hp-shadow-float: 0 24px 48px -30px rgba(15, 23, 42, .45);
    --hp-shadow-hover: var(--tb1-shadow-raise, 0 14px 28px -14px rgba(15, 23, 42, .22));
    --hp-hero-a: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 60%, var(--tb1-ink-surface, #0f172a));
    --hp-hero-b: var(--tb1-banner-1, #1d4ed8);
    --hp-hero-c: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 78%, var(--tb1-accent-strong, #0284c7));
    --hp-dur: 7s;

    display: block;
    color: var(--hp-ink);
    font-family: var(--hp-sans);
    font-size: 1rem;
    line-height: 1.6;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .hp {
    --hp-alert: var(--tb1-text-danger, #fda4af);
    --hp-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 16%, var(--tb1-surface, #111c31));
    --hp-shadow: var(--tb1-shadow-card, none);
    --hp-shadow-float: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
    --hp-shadow-hover: var(--tb1-shadow-raise, 0 14px 28px -14px rgba(0, 0, 0, .6));
    color-scheme: dark;
}

.hp *,
.hp *::before,
.hp *::after {
    box-sizing: border-box;
}

.hp :where(h1, h2, h3, p, ol, ul, dl, dd, figure) {
    margin: 0;
}

.hp :where(ol, ul) {
    list-style: none;
    padding: 0;
}

.hp [hidden] {
    display: none !important;
}

.hp :focus-visible {
    outline: 3px solid var(--hp-brand);
    outline-offset: 2px;
}

.hp-wrap {
    width: 100%;
    max-width: var(--tb1-page-max-width, 1440px);
    margin-inline: auto;
    padding-inline: var(--tb1-shell-gutter, 20px);
}

/* ★ 5 ต.ค. 2569: ความกว้างหน้าตั้งได้ที่ includes/tb1_theme.php (page_max_width) เช่น 1280 px
   ผังที่เคยดูความกว้าง "จอ" (จอใหญ่แต่หน้าแคบ ส่วนต่าง ๆ บีบจนซ้อนกัน) จึงดูความกว้าง "เนื้อหาจริง" แทน
   ด้วย container query ของกล่องเหล่านี้ ค่าเกณฑ์ = เกณฑ์จอเดิมลบขอบสองข้าง (ราว 40 px)
   เบราว์เซอร์ที่ไม่รู้จัก container query (ก่อนปี 2566) ได้ผังแบบเรียบที่ไม่ซ้อนกัน
   ไม่ใส่ที่กล่องที่มีของ position: fixed ข้างใน (ป๊อปอัปปฏิทินติดอยู่ที่ main ไม่ได้อยู่ในกล่องเหล่านี้) */
.hp-hero > .hp-wrap {
    container: hp-hero / inline-size;
}

.hp-hero-main {
    container: hp-main / inline-size;
}

.hp-stage-sec > .hp-wrap {
    container: hp-stage / inline-size;
}

/* ── ปุ่ม ───────────────────────────────────────────────────────────────── */
.hp-acts {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.hp .hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: 0 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--hp-ease), border-color .2s var(--hp-ease), box-shadow .2s var(--hp-ease);
}

.hp .hp-btn:active {
    transform: translateY(1px);
}

.hp .hp-btn-brand {
    color: #ffffff;
    background: var(--hp-navy);
    border-color: var(--hp-navy);
}

.hp .hp-btn-brand:hover {
    background: color-mix(in srgb, var(--hp-navy) 84%, #000000);
    box-shadow: 0 10px 22px -14px var(--hp-navy);
}

.hp .hp-btn-line {
    color: var(--hp-brand);
    background: var(--hp-paper);
    border-color: var(--hp-line-bold);
}

.hp .hp-btn-line:hover {
    border-color: var(--hp-brand);
    background: var(--hp-brand-soft);
}

/* ปุ่มบนพื้นน้ำเงิน: สีคงที่ทั้งสองโหมดเพราะพื้นเข้มทั้งสองโหมด */
.hp .hp-btn-light {
    color: var(--tb1-banner-1, #1d4ed8);
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 12px 26px -16px rgba(2, 6, 23, .7);
}

.hp .hp-btn-light:hover {
    background: #eef2ff;
    border-color: #eef2ff;
}

/* ★ พื้นขาว .12 บนน้ำเงินหัวหน้า ตัวอักษรขาวยังเกิน 4.5:1 */
.hp .hp-btn-glass {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hp .hp-btn-glass:hover {
    background: rgba(2, 6, 23, .2);
    border-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   ๑ หัวหน้า (ออกแบบใหม่ 24 ก.ย. 2569 รอบบ่าย ตามที่ ผอ. สั่ง "ส่วนอื่นดีแล้ว ปรับแค่ส่วนนี้")
   บน: ตัวตนของโรงเรียนกับช่องค้นหา | การ์ด "วันนี้ที่โรงเรียน" มีป้ายวันที่
   ล่าง: แถบ "โรงเรียนในตัวเลข" เต็มความกว้าง
   ★ รอบก่อนจัดกลางแนวตั้ง เหลือที่ว่างบนล่างของคอลัมน์ซ้ายมาก และการ์ดขวาแน่นเหมือนหน้าผู้ดูแล
   ═══════════════════════════════════════════════════════════════════════ */

.hp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(22px, 2.8vw, 40px) clamp(28px, 3vw, 40px);
    color: #ffffff;
    /* ★ สีพื้นทึบอยู่ใต้ไล่เฉด ตัวตรวจคอนทราสต์อ่านค่านี้ และเป็นสีที่เห็นจริงตรงกลางหัวหน้า */
    background-color: var(--hp-hero-b);
    background-image: linear-gradient(135deg, var(--hp-hero-a) 0%, var(--hp-hero-b) 52%, var(--hp-hero-c) 100%);
}

/* เวทีข่าวเด่นลอยทับขอบล่างของหัวหน้า หัวหน้าจึงเว้นที่ด้านล่างไว้ให้
   (5 ต.ค. 2569 ส่วนพระราชทานย้ายลงไปก่อนกำหนดการ เวทีกลับมาอยู่ใต้หัวหน้าเหมือนเดิม) */
.hp-hero.has-stage {
    padding-bottom: clamp(100px, 8.8vw, 132px);
}

/* โหมดมืด: ธีมให้ banner เป็นกรมท่าเข้ม ไล่เฉดจึงแบนเป็นสีเดียว เติมน้ำเงินสดที่ปลายไล่เฉดให้มีมิติ */
:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .hp {
    --hp-hero-a: #050d22;
    --hp-hero-c: color-mix(in srgb, #1d4ed8 42%, var(--tb1-banner-1, #0e1f45));
}

.hp-hero::before,
.hp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hp-hero::before {
    background-image:
        radial-gradient(circle at 12% 24%, rgba(255, 255, 255, .09) 0%, transparent 42%),
        radial-gradient(circle at 60% 115%, rgba(56, 189, 248, .12) 0%, transparent 46%);
}

.hp-hero::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000000 30%, transparent);
    mask-image: linear-gradient(180deg, #000000 30%, transparent);
}

/* ดวงแสงฟุ้งสามดวง (ตกแต่ง) ใช้ไล่เฉดวงกลม ไม่ใช้ filter blur ที่กินเครื่อง */
.hp-hero-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.hp-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.hp-orb.is-a {
    top: -14rem;
    right: -10rem;
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle, rgba(96, 165, 250, .26) 0%, rgba(96, 165, 250, 0) 68%);
}

.hp-orb.is-b {
    bottom: -12rem;
    left: -10rem;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(56, 189, 248, .16) 0%, rgba(56, 189, 248, 0) 68%);
}

.hp-orb.is-c {
    top: 30%;
    right: 30%;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(253, 230, 138, .09) 0%, rgba(253, 230, 138, 0) 70%);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .hp-orb.is-a {
    background: radial-gradient(circle, rgba(59, 130, 246, .34) 0%, rgba(59, 130, 246, 0) 68%);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .hp-orb.is-b {
    background: radial-gradient(circle, rgba(14, 165, 233, .2) 0%, rgba(14, 165, 233, 0) 68%);
}

.hp-hero :focus-visible {
    outline-color: #ffffff;
}

.hp-hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 26px clamp(28px, 3.6vw, 64px);
}

@media (min-width: 1024px) {
    .hp-hero-top.has-today {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
    }
}

.hp-hero-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ── ป้าย ตรา และชื่อโรงเรียน ─────────────────────────────────────────── */
.hp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.hp-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 3px 14px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ★ ตัวทองบนกระจกขาว .12 ได้แค่ 4.3:1 ในโหมดสว่าง ป้ายทองจึงเป็นกระจกเข้ม (เกิน 6:1) */
.hp-tag.is-gold {
    font-weight: 600;
    color: var(--hp-gold-text);
    background: rgba(2, 6, 23, .26);
    border-color: rgba(253, 230, 138, .45);
}

.hp-brand {
    display: flex;
    align-items: center;
    gap: 14px clamp(18px, 2vw, 28px);
    max-width: 100%;
}

/* ตราในวงแหวนทอง: วงแหวนเป็น ::before จึงหมุนได้โดยตราไม่หมุนตาม */
.hp-crest-ring {
    position: relative;
    isolation: isolate;
    display: block;
    flex: none;
    width: clamp(4.6rem, 3.3rem + 3.2vw, 6.75rem);
    aspect-ratio: 1;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .06), 0 20px 40px -18px rgba(2, 6, 23, .9);
}

.hp-crest-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 200deg, #fde68a, rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, .08) 52%, rgba(253, 230, 138, .55) 78%, #fde68a);
}

.hp-crest {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(2, 6, 23, .28);
}

.hp-title {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-hero, clamp(2rem, 1.05rem + 3.1vw, 3.75rem));
    font-weight: 600;
    line-height: 1.18;
    color: #ffffff;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-shadow: 0 2px 22px rgba(2, 6, 23, .3);
}

/* บรรทัดที่สองของชื่อ (ผู้ดูแลแยกชื่อโรงเรียนเป็นสองท่อน) ต่อในบรรทัดเดียวกัน ขนาดเท่ากัน สีฟ้าอ่อน
   ★ #dbeafe บนส่วนที่สว่างที่สุดของไล่เฉด (ใต้ดวงแสง) ยังเกิน 4.5:1 (#bfdbfe ได้ 4.1:1 บนมือถือ) */
.hp-title-2 {
    color: #dbeafe;
}

.hp-sub {
    max-width: 46rem;
    margin-top: 14px;
    font-size: var(--tb1-fs-md, 1.125rem);
    line-height: 1.75;
    color: var(--hp-on-hero-2);
    text-wrap: pretty;
}

.hp-hero-acts {
    margin-top: 20px;
}

/* ── ค้นหาแบบแคปซูล: ช่องพิมพ์กับปุ่มอยู่ในแคปซูลเดียว วงโฟกัสอยู่ที่แคปซูลทั้งอัน ── */
.hp-find {
    width: 100%;
    max-width: 46rem;
    margin-top: 22px;
}

.hp-search-label {
    display: block;
    margin: 0 0 6px 18px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-on-hero-2);
}

.hp-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--hp-paper);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    box-shadow: 0 22px 44px -24px rgba(2, 6, 23, .75);
}

.hp-search-row:focus-within {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.hp-search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.hp-search-field > i {
    position: absolute;
    left: 15px;
    color: var(--hp-muted);
    pointer-events: none;
}

.hp .hp-search-input {
    width: 100%;
    min-width: 0;
    min-height: 2.9rem;
    padding: .4rem .8rem .4rem 2.7rem;
    color: var(--hp-ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: var(--tb1-fs-sm, 1rem);
}

.hp .hp-search-input::placeholder {
    color: var(--hp-muted);
    opacity: 1;
}

/* วงโฟกัสอยู่ที่แคปซูลแล้ว ช่องพิมพ์ไม่ต้องมีวงซ้อน */
.hp .hp-search-input:focus-visible {
    outline: none;
}

.hp .hp-search-btn {
    min-height: 2.9rem;
    padding: 0 1.5rem;
    color: #ffffff;
    background: var(--hp-navy);
    border-color: var(--hp-navy);
}

.hp .hp-search-btn:hover {
    background: color-mix(in srgb, var(--hp-navy) 84%, #000000);
}

/* โหมดมืด: แคปซูลสีพื้นผิวของธีมกลืนกับหัวหน้ากรมท่า จึงยกให้สว่างกว่าหนึ่งขั้น ขอบชัดขึ้น
   ปุ่มเป็นน้ำเงินสด (ตัวขาวบน #2563eb ได้ 5.2:1) */
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .hp-search-row {
    background: #1b2842;
    border-color: rgba(255, 255, 255, .4);
    box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .hp .hp-search-btn {
    background: #2563eb;
    border-color: #2563eb;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .hp .hp-search-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.hp-search-note {
    margin: 8px 0 0 18px;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.6;
    color: var(--hp-on-hero-2);
}

.hp-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0 12px;
}

.hp-chips-k {
    margin-right: 4px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-on-hero-2);
}

.hp .hp-chip {
    min-height: 2rem;
    padding: 0 .95rem;
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font: inherit;
    font-size: var(--tb1-fs-xs, .875rem);
    cursor: pointer;
    transition: background-color .2s var(--hp-ease), border-color .2s var(--hp-ease);
}

/* ★ ชี้แล้วพื้นเข้มขึ้น ไม่สว่างขึ้น พื้นขาว .2 ทำให้ตัวขาวเหลือ 3.9:1 บนส่วนสว่างของไล่เฉด */
.hp .hp-chip:hover {
    background: rgba(2, 6, 23, .22);
    border-color: #ffffff;
}

.hp .hp-chip:active {
    transform: scale(.97);
}

/* ผลแนะนำระหว่างพิมพ์: การ์ดขาวใต้แคปซูล */
.hp-res {
    margin-top: 12px;
    padding: .6rem;
    color: var(--hp-ink);
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    box-shadow: 0 26px 50px -26px rgba(2, 6, 23, .8);
}

.hp-res :focus-visible {
    outline-color: var(--hp-brand);
}

.hp-res-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .2rem .5rem .5rem;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-muted);
}

.hp .hp-res-clear {
    min-height: 1.9rem;
    padding: 0 .8rem;
    color: var(--hp-brand);
    background: transparent;
    border: 1px solid var(--hp-line-bold);
    border-radius: 999px;
    font: inherit;
    font-size: var(--tb1-fs-xs, .875rem);
    cursor: pointer;
}

.hp .hp-hit {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: .55rem .6rem;
    color: var(--hp-ink);
    text-decoration: none;
    border-radius: var(--hp-r-sm);
}

.hp .hp-hit:hover,
.hp .hp-hit:focus-visible {
    background: var(--hp-brand-soft);
}

.hp-hit-i {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border-radius: 11px;
}

.hp-hit-t {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .5rem;
    font-weight: 600;
}

.hp-hit-k {
    padding: 0 .5rem;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    color: var(--hp-muted);
    border: 1px solid var(--hp-line-bold);
    border-radius: 999px;
}

.hp-hit-d {
    display: block;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
}

.hp-res-none {
    padding: .4rem .6rem;
    color: var(--hp-muted);
}

.hp .hp-res-google {
    display: inline-block;
    min-height: 24px;
    margin: .4rem .6rem .2rem;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ด "วันนี้ที่โรงเรียน": กระจกสีเข้ม ป้ายวันที่แบบแผ่นปฏิทิน และสามแถวที่กดไปยังคำตอบได้
   ═══════════════════════════════════════════════════════════════════════ */

.hp-today-card {
    min-width: 0;
    padding: 18px;
    color: #ffffff;
    background: rgba(2, 6, 23, .3);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--hp-r-lg);
    box-shadow: 0 30px 60px -32px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.hp-today-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 2px 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.hp-today-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--hp-sans);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--hp-on-hero-2);
}

/* จุดเขียวกระพริบครั้งเดียวตอนโหลด บอกว่าเป็นข้อมูลของวันนี้ */
.hp-today-title::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .28);
}

.hp-day {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "n m"
        "n w";
    align-items: center;
    column-gap: 14px;
}

/* แผ่นปฏิทิน: พื้นขาว ตัวเลขน้ำเงินเข้ม แถบทองด้านบน สีคงที่ทั้งสองโหมด */
.hp-day-n {
    grid-area: n;
    position: relative;
    display: grid;
    place-items: center;
    width: 4.1rem;
    height: 4.1rem;
    padding-top: 6px;
    overflow: hidden;
    font-family: var(--hp-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: #172554;
    background: #ffffff;
    border-radius: var(--hp-r);
    box-shadow: 0 14px 28px -16px rgba(2, 6, 23, .9);
    font-variant-numeric: tabular-nums;
}

.hp-day-n::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 7px;
    background: #fbbf24;
}

.hp-day-m {
    grid-area: m;
    align-self: end;
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
}

.hp-day-w {
    grid-area: w;
    align-self: start;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.4;
    color: var(--hp-on-hero-2);
}

.hp-today {
    display: grid;
    gap: 8px;
}

.hp .hp-today-link {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 9px 9px;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--hp-r);
    transition: background-color .2s var(--hp-ease), border-color .2s var(--hp-ease);
}

.hp .hp-today-link:hover {
    background: rgba(2, 6, 23, .2);
    border-color: rgba(255, 255, 255, .5);
}

.hp-today-ic {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-radius: 11px;
}

.hp-today-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hp-today-k {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--hp-on-hero-2);
}

.hp-today-v {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    line-height: 1.45;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.hp-today-sub {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--hp-on-hero-2);
}

.hp-today-go {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-on-hero-2);
    transition: translate .2s var(--hp-ease);
}

.hp .hp-today-link:hover .hp-today-go {
    color: #ffffff;
    translate: 3px 0;
}

/* สถานะรับสมัคร: จุดสีหน้าคำ (เขียว เปิด · ทอง รอประกาศ · เทา ปิดแล้ว) คำบอกสถานะเป็นตัวอักษรอยู่แล้ว */
.hp-today-row:is(.is-open, .is-wait, .is-closed) .hp-today-v::before {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    vertical-align: .12em;
    border-radius: 50%;
    background: #cbd5e1;
}

.hp-today-row.is-open .hp-today-v::before {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .3);
}

.hp-today-row.is-wait .hp-today-v::before {
    background: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════════════
   แถบ "โรงเรียนในตัวเลข": กระจกเข้มแถวเดียวเต็มความกว้าง สี่ช่อง ไอคอนบนแผ่นขาว ตัวเลขนับขึ้น
   ช่องนักเรียนมีแท่งเล็กหกแท่งตามจำนวนนักเรียนแต่ละชั้น
   ═══════════════════════════════════════════════════════════════════════ */

.hp-band {
    margin-top: clamp(24px, 2.4vw, 32px);
}

.hp-band-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 18px;
    margin-bottom: 10px;
    padding-inline: 4px;
}

.hp-band-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
}

.hp-band-title::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--hp-gold);
}

.hp-band-note {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.6;
    color: var(--hp-on-hero-2);
}

.hp .hp-band-more {
    display: inline-block;
    min-height: 24px;
    margin-left: 12px;
    padding-block: .1rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .5);
    text-underline-offset: 3px;
}

.hp .hp-band-more:hover {
    text-decoration-color: #ffffff;
    text-decoration-thickness: 2px;
}

/* แถวเดียวแบบ flex: ช่องนักเรียนที่มีแท่งรายชั้นได้ส่วนแบ่งกว้างกว่าช่องอื่น ข้อความใต้ตัวเลขจึงไม่ตัดบรรทัด */
.hp-facts {
    display: flex;
    overflow: hidden;
    background: rgba(2, 6, 23, .28);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--hp-r-lg);
    box-shadow: 0 30px 60px -34px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* เส้นคั่นเป็นเงาใน ไม่ใช่ขอบ ช่องจึงกว้างเท่ากันทุกช่อง */
.hp-fact {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px clamp(14px, 1.6vw, 22px);
}

.hp-fact + .hp-fact {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14);
}

.hp-fact-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    font-size: 1.15rem;
    color: #1d4ed8;
    background: linear-gradient(150deg, #ffffff 0%, #dbeafe 100%);
    border-radius: 15px;
    box-shadow: 0 14px 26px -16px rgba(2, 6, 23, .9);
}

.hp-fact-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hp-fact-k {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.4;
    color: var(--hp-on-hero-2);
}

.hp-fact-v {
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.25;
    color: var(--hp-on-hero-2);
}

.hp-fact-v b {
    font-family: var(--hp-serif);
    font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.35rem);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hp-fact-s {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--hp-on-hero-2);
    overflow-wrap: anywhere;
}

.hp-fact.has-chart {
    flex-grow: 1.45;
}

/* แท่งนักเรียนรายชั้น: หกคอลัมน์แคบ แท่งทองสูงตามจำนวน ชื่อชั้นใต้แท่ง */
.hp-spark {
    display: grid;
    grid-auto-columns: 1.3rem;
    grid-auto-flow: column;
    align-items: end;
    gap: 3px;
    margin-left: auto;
}

.hp-spark-i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.hp-spark-bar {
    position: relative;
    display: block;
    width: .7rem;
    height: 2.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
}

.hp-spark-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--h, 0%);
    background: linear-gradient(180deg, #fde68a, #fbbf24);
    border-radius: 4px 4px 2px 2px;
    transform-origin: center bottom;
}

.hp-spark-m {
    /* ป้ายแกนของกราฟแท่งเล็ก ยกเว้นขนาดขั้นต่ำ --tb1-fs-xs: ช่องแคบ 6 ช่อง ขนาด 12.6 px ชนกันบนโทรศัพท์ */
    font-size: .68rem;
    line-height: 1.2;
    color: var(--hp-on-hero-2);
    white-space: nowrap;
}

/* ช่องแคบกว่าที่แท่งจะวางข้างตัวเลขได้: แท่งลงไปอยู่ใต้ตัวเลข แนวเดียวกับข้อความ
   (5 ต.ค. 2569 ดูความกว้างหัวหน้าจริง เดิมดูจอ 1280 px) */
@container hp-hero (max-width: 1239.98px) {
    .hp-fact.has-chart {
        flex-wrap: wrap;
    }

    .hp-fact.has-chart .hp-spark {
        margin-left: calc(3rem + 14px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ๒ ข่าวเด่น: การ์ดเวทีลอยทับขอบล่างของหัวหน้า
   ภาพซ้าย รายการหัวข่าวขวา รายการคือคำบรรยายของภาพ จึงไม่พิมพ์หัวข่าวซ้ำบนภาพ
   ═══════════════════════════════════════════════════════════════════════ */

.hp-stage-sec {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(66px, 6.2vw, 92px));
}

.hp-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr);
    gap: clamp(16px, 2vw, 26px);
    padding: clamp(12px, 1.4vw, 18px);
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    box-shadow: var(--hp-shadow-float);
}

.hp-shots {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--hp-r);
    background: var(--hp-paper-alt);
    isolation: isolate;
}

.hp-shot {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity .8s ease;
}

.hp-shot.is-on {
    z-index: 1;
    opacity: 1;
}

.hp-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
}

.hp-shot:nth-child(2) img {
    transform-origin: 20% 40%;
}

.hp-shot:nth-child(3) img {
    transform-origin: 80% 60%;
}

/* ขอบแสงบาง ๆ ในภาพ และเงาไล่จากล่าง ภาพสว่างจึงไม่กลืนกับการ์ด */
.hp-shots::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(2, 6, 23, .22) 0%, transparent 26%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
    pointer-events: none;
}

.hp-shots-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    color: #ffffff;
    background: var(--hp-navy);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    box-shadow: 0 8px 18px -8px rgba(2, 6, 23, .7);
    pointer-events: none;
}

.hp-shots-badge i {
    color: var(--hp-gold-text);
}

.hp-stories {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 4px 4px 2px 0;
}

.hp-stories-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--hp-line);
}

.hp-stories-title {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--hp-heading);
}

.hp .hp-play {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    padding: 0 .8rem;
    color: var(--hp-ink-2);
    background: var(--hp-paper);
    border: 1px solid var(--hp-line-bold);
    border-radius: 999px;
    font: inherit;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    cursor: pointer;
}

.hp .hp-play:hover {
    color: var(--hp-brand);
    border-color: var(--hp-brand);
}

.hp-story-list {
    display: grid;
    grid-auto-rows: 1fr;
    gap: .35rem;
    flex: 1 1 auto;
}

.hp-story {
    position: relative;
    border-radius: var(--hp-r);
    transition: background-color .25s ease, box-shadow .25s ease;
}

.hp .hp-story-link {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .9rem;
    align-items: center;
    height: 100%;
    padding: .7rem .7rem .95rem;
    color: var(--hp-ink);
    text-decoration: none;
    border-radius: inherit;
}

.hp-story-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hp-r-sm);
    background: var(--hp-paper-alt);
    transition: filter .25s ease;
}

.hp-story-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.hp-story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .7rem;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
}

.hp-story-cat {
    font-weight: 700;
    color: var(--hp-brand);
}

.hp-story-title {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--hp-heading);
    overflow-wrap: anywhere;
}

/* เรื่องที่อยู่บนเวทีตอนนี้: พื้นอ่อนกับสันซ้าย เรื่องอื่นภาพหรี่ลงเล็กน้อย */
.hp-story.is-on {
    background: var(--hp-brand-soft);
    box-shadow: inset 4px 0 0 var(--hp-brand);
}

.hp-stage.is-live .hp-story:not(.is-on) .hp-story-thumb {
    filter: saturate(.55) brightness(.96);
}

.hp .hp-story-link:hover .hp-story-title {
    color: var(--hp-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* แถบนับเวลา มีเฉพาะตอนสคริปต์เลื่อนเรื่องเอง (ซ่อนด้วย visibility ไม่ใช่ความโปร่ง) */
.hp-story-bar {
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: .35rem;
    height: 3px;
    border-radius: 3px;
    background: var(--hp-line);
    visibility: hidden;
}

.hp-story-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--hp-brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.hp-stage.is-playing .hp-story.is-on .hp-story-bar {
    visibility: visible;
}

.hp-stage.is-playing .hp-story.is-on .hp-story-bar i {
    animation: hp-progress var(--hp-dur) linear forwards;
}

.hp-stage.is-held .hp-story.is-on .hp-story-bar i,
.hp-stage.is-held .hp-shot.is-on img {
    animation-play-state: paused;
}

.hp-stage.is-playing .hp-shot.is-on img {
    animation: hp-drift calc(var(--hp-dur) + 1.5s) ease-out forwards;
}

/* ★ 4 ต.ค. 2569: ข่าวเด่น 4 เรื่อง รายการข้างภาพหลักต้องสูงไม่เกินภาพ
   หัวข่าวตัดที่ 2 บรรทัด (ข้อความเต็มยังอยู่ในหน้า โปรแกรมอ่านหน้าจออ่านครบ) ภาพย่อเล็กลงตามความกว้างคอลัมน์
   ถ้าหัวข่าวยาวจนรายการสูงกว่าภาพ ภาพหลักยืดเต็มความสูงของแถว (ครอปเพิ่ม) ไม่เหลือที่ว่างใต้ภาพ */
.hp-story-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

@media (min-width: 1024px) {
    /* ★ 5 ต.ค. 2569: เดิมยืดสูงตามรายการข่าวพร้อมคงสัดส่วน 16:10 ความกว้างจึงคำนวณจากความสูง
       หน้าแคบ (เช่น 1280 px) ภาพกว้างเกินคอลัมน์ไปทับรายการหัวข่าว ตอนนี้กว้างเท่าคอลัมน์เสมอ
       สูงตามรายการข่าว และไม่เตี้ยกว่าราว 16:10 ของคอลัมน์ (36cqi ของกล่องเวที) */
    .hp-shots {
        align-self: stretch;
        width: 100%;
        aspect-ratio: auto;
        min-height: 20rem;
        min-height: 36cqi;
    }

    .hp-story-list {
        gap: .25rem;
    }

    .hp .hp-story-link {
        grid-template-columns: 5.75rem minmax(0, 1fr);
        gap: .8rem;
        padding: .5rem .6rem .8rem;
    }

    .hp-story-title {
        font-size: var(--tb1-fs-sm, 1rem);
    }
}

@container hp-stage (min-width: 1240px) {
    .hp .hp-story-link {
        grid-template-columns: 7.25rem minmax(0, 1fr);
        gap: .95rem;
        padding: .55rem .7rem .85rem;
    }

    .hp-story-title {
        font-size: var(--tb1-fs-sm, 1rem);
    }
}

/* เวทีกว้างตั้งแต่ราว 1320 px แต่ละเรื่องสูงพอ ภาพย่อใหญ่ขึ้นให้เต็มช่อง (เดิมดูจอ 1360 px) */
@container hp-stage (min-width: 1320px) {
    .hp .hp-story-link {
        grid-template-columns: 8.25rem minmax(0, 1fr);
    }
}

@keyframes hp-progress {
    to {
        transform: scaleX(1);
    }
}

@keyframes hp-drift {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ส่วนทั่วไป: หัวข้อมีขีดสีนำ แบบหัวเรื่องย่อยของ zerodropout
   ═══════════════════════════════════════════════════════════════════════ */

/* ★ 3 ต.ค. 2569: ระยะห่างแคบลงราวหนึ่งในสาม (เดิม 2.25–3.5rem) หน้ารวมสั้นลง ส่วนต่าง ๆ ชิดกันพอดีขึ้น */
.hp-sec {
    padding-block: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

.hp-stage-sec + .hp-sec {
    padding-top: clamp(1.4rem, 1rem + 1.4vw, 2rem);
}

.hp-sec-alt {
    background: var(--hp-paper-alt);
    border-block: 1px solid var(--hp-line);
}

.hp-h {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: clamp(.9rem, .8rem + .5vw, 1.2rem);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hp-line);
}

.hp-h-text {
    min-width: 0;
}

.hp-h h2 {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-2xl, clamp(1.5rem, 1.2rem + 1vw, 1.875rem));
    font-weight: 600;
    line-height: 1.35;
    color: var(--hp-heading);
}

.hp-h p {
    margin-top: .2rem;
    padding-left: 16px;
    color: var(--hp-muted);
}

.hp-lead {
    position: relative;
    padding-left: 16px;
}

.hp-lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--hp-brand), var(--tb1-accent, #0ea5e9));
    transform-origin: center top;
}

.hp .hp-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.4rem;
    padding: 0 .95rem 0 1.15rem;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s var(--hp-ease);
}

.hp .hp-more i {
    font-size: .85em;
    transition: translate .2s var(--hp-ease);
}

.hp .hp-more:hover {
    border-color: var(--hp-brand);
}

.hp .hp-more:hover i {
    translate: 3px 0;
}

.hp-empty,
.hp-note {
    color: var(--hp-muted);
}

.hp-note {
    margin-top: .75rem;
    font-size: var(--tb1-fs-xs, .875rem);
}

/* ── แผงที่มีแถบหัว ใช้กับกำหนดการ สารบัญ และติดต่อ ──────────────────────── */
.hp-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    box-shadow: var(--hp-shadow);
}

.hp-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--hp-paper-alt), var(--hp-paper));
    border-bottom: 1px solid var(--hp-line);
    border-radius: var(--hp-r) var(--hp-r) 0 0;
}

.hp-panel-ic {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border-radius: 12px;
    font-size: 1rem;
}

.hp-panel-title {
    flex: 1 1 10rem;
    min-width: 0;
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--hp-heading);
}

.hp-panel-sub {
    display: block;
    font-family: var(--hp-sans);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--hp-muted);
}

.hp-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 14px 18px 18px;
}

.hp-pill {
    padding: 2px 11px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ๓ ข่าวล่าสุด: การ์ดยกลอย ภาพซูมเมื่อชี้ ทั้งการ์ดกดได้ด้วยลิงก์หัวข้อเดียว
   ═══════════════════════════════════════════════════════════════════════ */

.hp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
    gap: var(--hp-gap);
}

.hp-card {
    min-width: 0;
    display: flex;
}

.hp-card-in {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    box-shadow: var(--hp-shadow);
    transition: border-color .25s var(--hp-ease), box-shadow .25s var(--hp-ease), translate .25s var(--hp-ease);
}

.hp .hp-card-in:hover {
    border-color: var(--hp-brand-line);
    box-shadow: var(--hp-shadow-hover);
    translate: 0 -3px;
}

.hp-card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--hp-paper-alt);
}

.hp-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--hp-ease);
}

.hp .hp-card-in:hover .hp-card-media img {
    transform: scale(1.05);
}

.hp-card-noimg {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 2rem;
    color: var(--hp-line-bold);
}

.hp-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 14px 16px 16px;
}

.hp-card-kicker {
    align-self: flex-start;
    padding: 1px 10px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border-radius: 999px;
}

.hp-card-title {
    font-size: var(--tb1-fs-md, 1.125rem);
    line-height: 1.5;
}

.hp .hp-card-link {
    color: var(--hp-heading);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* ทั้งการ์ดกดได้ด้วยลิงก์เดียว ไม่มีลิงก์ซ้ำสองอันต่อข่าว */
.hp .hp-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--hp-r);
}

.hp .hp-card-link:focus-visible {
    outline: none;
}

.hp .hp-card-link:focus-visible::after {
    outline: 3px solid var(--hp-brand);
    outline-offset: -3px;
}

.hp .hp-card-in:hover .hp-card-link {
    color: var(--hp-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.hp-card-text {
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.7;
    color: var(--hp-ink-2);
    overflow-wrap: anywhere;
}

.hp-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: .3rem;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-ink-2);
}

.hp-card-meta i {
    color: var(--hp-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   ๔ กำหนดการ: ปฏิทิน กิจกรรม และรับสมัคร
   ═══════════════════════════════════════════════════════════════════════ */

.hp-plan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--hp-gap);
}

@media (min-width: 1024px) {
    .hp-plan.has-cal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-plan.has-cal .hp-cal {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1280px) {
    .hp-plan.has-cal:not(.is-3m) {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .hp-plan.has-cal:not(.is-3m) .hp-cal {
        grid-column: auto;
    }

    /* ปฏิทินสามเดือนเต็มแถวบน เดือนละคอลัมน์ ไม่มีเดือนเดียวค้างแถวล่าง */
    .hp-plan.is-3m .hp-cals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hp-cals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 1rem;
}

/* ปฏิทินเป็น <table> จริง หัวคอลัมน์เป็น <th scope="col"> พิมพ์ได้ตรงตามที่เห็น */
/* ★ 4 ต.ค. 2569: ปฏิทินใหญ่ขึ้นและมีสี สีทุกจุดผูกกับข้อมูล
   สี่สีตามประเภทกิจกรรม (ถังเดียวกับป๊อปอัปและหน้าปฏิทินการศึกษา) วันหยุดและวันสอบย้อมช่องด้วย
   เส้นใต้หัววันเป็นสีประจำวันแบบไทย (อาทิตย์แดง จันทร์เหลือง อังคารชมพู พุธเขียว พฤหัสส้ม ศุกร์ฟ้า เสาร์ม่วง) */
.hp-plan {
    --hp-k-off: var(--hp-alert);
    --hp-k-exam: var(--hp-gold-ink);
    --hp-k-aca: var(--hp-brand);
    --hp-k-act: var(--hp-ok);
}

.hp-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    overflow: hidden;
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    box-shadow: 0 12px 26px -22px rgba(15, 23, 42, .5);
}

.hp-cal-name {
    caption-side: top;
    padding: 0 2px .55rem;
    text-align: left;
}

.hp-cal-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .45rem;
}

.hp-cal-m {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--hp-ink);
}

.hp-cal-y {
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 500;
    color: var(--hp-muted);
}

.hp-cal-n {
    align-self: center;
    margin-left: auto;
    padding: .12rem .6rem;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border: 1px solid var(--hp-brand-line);
    border-radius: 999px;
}

.hp .hp-wd {
    --wd: var(--hp-line-bold);
    padding: .45rem 0 .5rem;
    text-align: center;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    color: var(--hp-ink-2);
    background: var(--hp-brand-soft);
    border-left: 1px solid var(--hp-line);
    box-shadow: inset 0 -3px 0 var(--wd);
}

.hp .hp-wd-0 { --wd: #ef4444; }
.hp .hp-wd-1 { --wd: #eab308; }
.hp .hp-wd-2 { --wd: #ec4899; }
.hp .hp-wd-3 { --wd: #22c55e; }
.hp .hp-wd-4 { --wd: #f97316; }
.hp .hp-wd-5 { --wd: #0ea5e9; }
.hp .hp-wd-6 { --wd: #8b5cf6; }

.hp-wd:first-child {
    border-left: 0;
}

.hp .hp-d {
    position: relative;
    height: 2.95rem;
    padding: .45rem 0 1rem;
    text-align: center;
    vertical-align: top;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 500;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: var(--hp-ink-2);
    background: var(--hp-paper);
    border-left: 1px solid var(--hp-line);
    border-top: 1px solid var(--hp-line);
}

.hp-d:first-child {
    border-left: 0;
}

.hp .hp-d.is-blank {
    color: transparent;
    background: color-mix(in srgb, var(--hp-paper-alt) 55%, var(--hp-paper));
}

.hp .hp-d.is-weekend {
    color: var(--hp-muted);
    background: color-mix(in srgb, var(--hp-paper-alt) 55%, var(--hp-paper));
}

.hp .hp-d.in-adm {
    /* วันเสาร์อาทิตย์บนพื้นช่วงรับสมัครใช้สีรอง สีจางได้แค่ 4.48:1 บนพื้นย้อมนี้ */
    color: var(--hp-ink-2);
    background: color-mix(in srgb, var(--hp-brand) 14%, var(--hp-paper));
}

/* วันหยุด: ตัวเลขแดงบนพื้นแดงอ่อน วันสอบ: พื้นอำพันอ่อน (วันที่มีทั้งสองอย่างแสดงเป็นวันหยุด) */
.hp .hp-d.is-off {
    font-weight: 700;
    color: var(--hp-k-off);
    background: color-mix(in srgb, var(--hp-k-off) 11%, var(--hp-paper));
}

.hp .hp-d.is-exam {
    color: var(--hp-ink);
    background: color-mix(in srgb, var(--hp-k-exam) 14%, var(--hp-paper));
}

.hp .hp-d.is-today {
    font-weight: 700;
    color: var(--hp-on-brand);
    background: var(--hp-brand);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hp-on-brand) 30%, transparent);
}

/* จุดหนึ่งจุดต่อหนึ่งประเภทที่มีในวันนั้น ขอบสีพื้นการ์ดกันจุดจมในช่องที่ย้อมสีและช่องวันนี้ */
.hp-pips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .36rem;
    display: flex;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
}

.hp .hp-pip {
    display: block;
    width: .46rem;
    height: .46rem;
    border-radius: 50%;
    background: var(--hp-gold-ink);
    box-shadow: 0 0 0 1.5px var(--hp-paper);
}

.hp .hp-pip.is-off  { background: var(--hp-k-off); }
.hp .hp-pip.is-exam { background: var(--hp-k-exam); }
.hp .hp-pip.is-aca  { background: var(--hp-k-aca); }
.hp .hp-pip.is-act  { background: var(--hp-k-act); }

.hp .hp-d.is-today .hp-pip {
    background: var(--hp-on-brand);
    box-shadow: none;
}

/* ── ป๊อปอัปของวันในปฏิทิน (4 ต.ค. 2569) ───────────────────────────────────
   วันที่มีกิจกรรมเป็นลิงก์เต็มช่อง (ขยายเข้าไปในช่องว่างบนล่างของช่องด้วย margin ติดลบ ขนาดแถวไม่เปลี่ยน)
   ป๊อปอัปสร้างโดย js/tb1-home.js ต่อท้าย <main class="hp"> จึงใช้โทเคนสีของหน้าแรกได้ครบทุกโหมด
   และไม่โดน translate ของการเคลื่อนไหวเมื่อเลื่อนถึง (position: fixed จะเพี้ยนถ้าอยู่ในกล่องที่มี translate) */
.hp-d-a {
    position: relative;
    display: block;
    margin: -.45rem 0 -1rem;
    padding: .45rem 0 1rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s var(--hp-ease), box-shadow .15s var(--hp-ease);
}

/* สีตัวเลขตามช่อง (วันหยุด วันนี้ ช่วงรับสมัคร) ไม่ใช่สีลิงก์ของธีมมืดทั้งเว็บ */
.hp .hp-d .hp-d-a {
    color: inherit;
}

.hp .hp-d-a:hover,
.hp .hp-d-a[aria-expanded="true"] {
    color: var(--hp-ink);
    background: color-mix(in srgb, var(--hp-gold-ink) 14%, var(--hp-paper));
}

.hp .hp-d-a[aria-expanded="true"] {
    box-shadow: inset 0 0 0 2px var(--hp-gold-ink);
}

.hp .hp-d.is-today .hp-d-a:hover,
.hp .hp-d.is-today .hp-d-a[aria-expanded="true"] {
    color: var(--hp-on-brand);
    background: color-mix(in srgb, #000000 18%, var(--hp-brand));
}

.hp .hp-d.is-today .hp-d-a[aria-expanded="true"] {
    box-shadow: inset 0 0 0 2px var(--hp-on-brand);
}

.hp .hp-d-a:focus-visible {
    outline: 2px solid var(--hp-brand);
    outline-offset: -3px;
}

.hp .hp-d.is-today .hp-d-a:focus-visible {
    outline-color: var(--hp-on-brand);
}

.hp-legend-tip {
    flex-basis: 100%;
    font-size: var(--tb1-fs-xs, .875rem);
}

.hp-pop {
    --hp-pop-x: 50%;
    position: fixed;
    z-index: 990;                      /* ใต้แถบเมนู (1000) เมนูย่อยจึงทับป๊อปอัปได้ */
    top: 0;
    left: 0;
    width: min(24rem, calc(100vw - 24px));
    max-height: min(72vh, 34rem);
    display: flex;
    flex-direction: column;
    color: var(--hp-ink);
    font-family: var(--hp-sans);
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.55;
    text-align: left;
    background: var(--hp-paper);
    border: 1px solid var(--hp-line-bold);
    border-radius: var(--hp-r);
    box-shadow: 0 26px 50px -22px rgba(15, 23, 42, .5), 0 2px 8px rgba(15, 23, 42, .08);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .14s var(--hp-ease), transform .14s var(--hp-ease);
}

.hp-pop.is-above {
    transform: translateY(-6px);
}

.hp-pop.is-right {
    transform: translateX(-6px);
}

.hp-pop.is-left {
    transform: translateX(6px);
}

.hp-pop.is-on {
    opacity: 1;
    transform: none;
}

.hp-pop[hidden] {
    display: none;
}

.hp-pop-arrow {
    position: absolute;
    top: -7px;
    left: var(--hp-pop-x);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--hp-paper);
    border-top: 1px solid var(--hp-line-bold);
    border-left: 1px solid var(--hp-line-bold);
    transform: rotate(45deg);
    pointer-events: none;
}

.hp-pop.is-above .hp-pop-arrow {
    top: auto;
    bottom: -7px;
    transform: rotate(225deg);
}

.hp-pop.is-right .hp-pop-arrow,
.hp-pop.is-left .hp-pop-arrow {
    top: var(--hp-pop-y, 50%);
    margin: -6px 0 0;
}

.hp-pop.is-right .hp-pop-arrow {
    left: -7px;
    transform: rotate(-45deg);
}

.hp-pop.is-left .hp-pop-arrow {
    left: auto;
    right: -7px;
    transform: rotate(135deg);
}

.hp-pop-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 10px 10px 16px;
    border-bottom: 1px solid var(--hp-line);
}

.hp-pop-hd {
    flex: 1 1 auto;
    min-width: 0;
}

.hp .hp-pop-date {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--hp-ink);
}

.hp .hp-pop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 4px 0 0;
}

.hp-pop-chip {
    padding: 0 8px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.6;
    color: var(--hp-ink-2);
    background: var(--hp-paper-alt);
    border: 1px solid var(--hp-line);
    border-radius: 999px;
}

.hp-pop-chip.is-today {
    color: var(--hp-on-brand);
    background: var(--hp-brand);
    border-color: var(--hp-brand);
}

.hp-pop-chip.is-adm {
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border-color: var(--hp-brand-line);
}

.hp .hp-pop-x {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: -4px 0 0;
    padding: 0;
    color: var(--hp-muted);
    font-size: var(--tb1-fs-sm, 1rem);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--hp-r-sm);
    cursor: pointer;
}

.hp .hp-pop-x:hover {
    color: var(--hp-ink);
    background: var(--hp-paper-alt);
}

.hp .hp-pop-x:focus-visible {
    outline: 2px solid var(--hp-brand);
    outline-offset: 1px;
}

.hp .hp-pop-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.hp-pop-list li + li {
    margin-top: 2px;
}

/* ประเภท: สี่ถังเหมือนรายการของหน้าปฏิทินการศึกษา สีช่วยกวาดตา ชื่อประเภทเขียนกำกับเสมอ */
.hp-pop-ev {
    --k: var(--hp-ok);
    display: block;
    padding: 9px 10px 10px 12px;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid var(--k);
    border-radius: 4px 10px 10px 4px;
    transition: background-color .15s var(--hp-ease);
}

.hp-pop-ev.is-off  { --k: var(--hp-alert); }
.hp-pop-ev.is-exam { --k: var(--hp-gold-ink); }
.hp-pop-ev.is-aca  { --k: var(--hp-brand); }

.hp .hp-pop-ev:hover {
    background: var(--hp-paper-alt);
}

.hp .hp-pop-ev:focus-visible {
    outline: 2px solid var(--hp-brand);
    outline-offset: -2px;
    background: var(--hp-paper-alt);
}

.hp-pop-tag {
    display: inline-block;
    margin-bottom: 3px;
    padding: 0 8px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--k);
    background: color-mix(in srgb, var(--k) 9%, var(--hp-paper));
    border-radius: 999px;
}

.hp-pop-title {
    display: block;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hp-ink);
}

.hp-pop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 3px;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
}

.hp-pop-meta > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.hp-pop-meta i {
    flex: none;
    width: 1em;
    font-size: .8em;
    text-align: center;
}

.hp-pop-text {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.55;
    color: var(--hp-ink-2);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hp-pop-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-brand);
}

.hp-pop-go i {
    font-size: .8em;
    transition: transform .15s var(--hp-ease);
}

.hp-pop-ev:hover .hp-pop-go i,
.hp-pop-ev:focus-visible .hp-pop-go i {
    transform: translateX(3px);
}

.hp-pop-foot {
    padding: 8px 16px 12px;
    border-top: 1px solid var(--hp-line);
}

.hp .hp-pop-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-brand);
    text-decoration: none;
}

.hp .hp-pop-all:hover {
    text-decoration: underline;
}

.hp .hp-pop-all:focus-visible {
    outline: 2px solid var(--hp-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* จอแคบ: แผ่นล่างจอเต็มความกว้าง อ่านและแตะง่ายกว่าป๊อปอัปเล็กข้างนิ้ว */
.hp-pop.is-sheet {
    top: auto !important;
    left: 8px !important;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 72vh;
    border-radius: var(--hp-r);
    box-shadow: 0 -10px 40px -12px rgba(15, 23, 42, .45);
    transform: translateY(16px);
}

.hp-pop.is-sheet.is-on {
    transform: none;
}

.hp-pop.is-sheet .hp-pop-arrow {
    display: none;
}

.hp-pop.is-sheet .hp-pop-ev {
    padding-top: 11px;
    padding-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .hp-pop,
    .hp-pop.is-above,
    .hp-pop.is-right,
    .hp-pop.is-left,
    .hp-pop.is-sheet {
        transform: none;
        transition: none;
    }

    .hp-d-a,
    .hp-pop-ev,
    .hp-pop-go i {
        transition: none;
    }
}

.hp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    margin-top: .9rem;
    padding-top: .75rem;
    border-top: 1px solid var(--hp-line);
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
}

.hp-legend span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.hp-key {
    flex: none;
    width: .9rem;
    height: .9rem;
    border: 1px solid var(--hp-line-bold);
    border-radius: 4px;
}

.hp .hp-key-today {
    background: var(--hp-brand);
    border-color: var(--hp-brand);
}

.hp-key-adm {
    background: color-mix(in srgb, var(--hp-brand) 14%, var(--hp-paper));
}

.hp-key-ev,
.hp-key-k {
    width: .62rem;
    height: .62rem;
    border: 0;
    border-radius: 50%;
    background: var(--hp-gold-ink);
}

.hp .hp-key-k.is-off  { background: var(--hp-k-off); }
.hp .hp-key-k.is-exam { background: var(--hp-k-exam); }
.hp .hp-key-k.is-aca  { background: var(--hp-k-aca); }
.hp .hp-key-k.is-act  { background: var(--hp-k-act); }

/* ── กิจกรรมใกล้ถึง: ป้ายวันที่ไล่เฉดแบบหัวหน้า ──────────────────────────── */
.hp-ev {
    display: grid;
    gap: 2px;
}

.hp .hp-ev-link {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px;
    color: var(--hp-ink);
    text-decoration: none;
    border-radius: var(--hp-r-sm);
    transition: background-color .2s var(--hp-ease);
}

.hp .hp-ev-link:hover {
    background: var(--hp-brand-soft);
}

.hp-ev-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    color: #ffffff;
    background-color: var(--hp-hero-b);
    background-image: linear-gradient(160deg, var(--hp-hero-a), var(--hp-hero-b) 70%, var(--hp-hero-c));
    border-radius: var(--hp-r-sm);
    box-shadow: 0 10px 20px -14px rgba(2, 6, 23, .8);
}

.hp-ev-tile b {
    font-family: var(--hp-serif);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    color: #ffffff;
}

.hp-ev-tile span {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.2;
    color: var(--hp-on-hero-2);
}

.hp-ev-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hp-ev-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hp-ev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .9rem;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
}

.hp-ev-meta i {
    margin-right: .3rem;
}

.hp-ev-when {
    font-weight: 600;
    color: var(--hp-brand);
}

/* ประเภทในรายการใช้จุดสีเดียวกับปฏิทิน กวาดตาจับคู่รายการกับวันได้ */
.hp-ev-type {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.hp-ev-type::before {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--hp-k, var(--hp-gold-ink));
}

.hp-ev-type.is-off  { --hp-k: var(--hp-k-off); }
.hp-ev-type.is-exam { --hp-k: var(--hp-k-exam); }
.hp-ev-type.is-aca  { --hp-k: var(--hp-k-aca); }
.hp-ev-type.is-act  { --hp-k: var(--hp-k-act); }

.hp .hp-ev-link:hover .hp-ev-title {
    color: var(--hp-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ยังไม่มีกิจกรรม: บอกตรง ๆ แล้วพาไปหน้าที่มีคำตอบ ไม่วาดกรอบเปล่า */
.hp-quiet {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .8rem;
    padding: 1.1rem 1.2rem;
    background: var(--hp-paper-alt);
    border: 1px dashed var(--hp-line-bold);
    border-radius: var(--hp-r);
}

.hp-quiet-ic {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border-radius: 12px;
    font-size: 1.1rem;
}

.hp-quiet p {
    color: var(--hp-ink-2);
}

/* ── รับสมัคร ─────────────────────────────────────────────────────────── */
.hp-state {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .15rem .75rem;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    color: var(--hp-muted);
    background: var(--hp-paper);
    border: 1px solid var(--hp-line-bold);
    border-radius: 999px;
}

.hp-state::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
}

.hp-adm.is-open .hp-state {
    color: var(--hp-ok);
    border-color: currentColor;
}

.hp-adm.is-wait .hp-state {
    color: var(--hp-gold-ink);
    border-color: currentColor;
}

.hp-adm-when {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: 0 0 .8rem;
    font-size: var(--tb1-fs-sm, 1rem);
    color: var(--hp-muted);
    border-bottom: 1px solid var(--hp-line);
}

.hp-adm-when b {
    color: var(--hp-ink);
}

.hp-adm-note {
    margin: .9rem 0;
    font-size: var(--tb1-fs-sm, 1rem);
    color: var(--hp-muted);
}

.hp-quota {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
    gap: .6rem;
    margin: .9rem 0;
}

.hp-quota > div {
    padding: .55rem .75rem;
    background: var(--hp-paper-alt);
    border-radius: var(--hp-r-sm);
    box-shadow: inset 3px 0 0 var(--hp-brand-line);
}

.hp-quota dt {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
}

.hp-quota dd {
    color: var(--hp-ink-2);
}

.hp-quota dd b {
    font-family: var(--hp-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-track {
    height: .6rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--hp-paper-alt);
    box-shadow: inset 0 0 0 1px var(--hp-line);
}

.hp-fill {
    display: block;
    height: 100%;
    min-width: .6rem;
    border-radius: inherit;
    background: var(--hp-ok-mark);
    transform-origin: left center;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.hp-adm .hp-acts {
    margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   ๕ สารบัญเว็บไซต์: แผงตามกลุ่มผู้ใช้
   ═══════════════════════════════════════════════════════════════════════ */

.hp-dir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--hp-gap);
}

.hp-dir-g .hp-panel-head {
    align-items: flex-start;
}

.hp-dir-list {
    padding: 8px 10px 12px;
}

.hp .hp-dir-link {
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 2.5rem;
    padding: .35rem .6rem;
    color: var(--hp-ink);
    text-decoration: none;
    border-radius: var(--hp-r-sm);
    transition: background-color .2s var(--hp-ease);
}

.hp .hp-dir-link > i:first-child {
    text-align: center;
    color: var(--hp-brand);
}

.hp-dir-go {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
    transition: translate .2s var(--hp-ease), color .2s var(--hp-ease);
}

.hp .hp-dir-link:hover {
    background: var(--hp-brand-soft);
}

.hp .hp-dir-link:hover span {
    color: var(--hp-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hp .hp-dir-link:hover .hp-dir-go {
    color: var(--hp-brand);
    translate: 3px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   องค์ประกอบของรางวัล (แถบสีและรายการแยกประเภท) บนพื้นน้ำเงิน
   30 ต.ค. 2569: ส่วนพระราชทานเดิมย้ายเข้าไปเป็นแผงในหัวหน้า (.hp-honor ท้ายไฟล์) แถบและรายการนี้ใช้ในการ์ดจำนวนรางวัลของแผง
   ═══════════════════════════════════════════════════════════════════════ */

.hp-bar {
    display: flex;
    gap: 3px;
    height: .8rem;
    margin: 1.2rem 0 1rem;
    transform-origin: left center;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.hp-bar span:first-child {
    border-radius: 999px 0 0 999px;
}

.hp-bar span:last-child {
    border-radius: 0 999px 999px 0;
}

.hp-bar span:only-child {
    border-radius: 999px;
}

.hp-bar .is-a,
.hp-sw.is-a {
    background: var(--tb1-warning-soft, #fbbf24);
}

.hp-bar .is-b,
.hp-sw.is-b {
    background: var(--tb1-brand-300, #93c5fd);
}

.hp-bar .is-c,
.hp-sw.is-c {
    background: var(--tb1-success-soft, #34d399);
}

/* ผู้บริหาร (3 ต.ค. 2569) */
.hp-bar .is-d,
.hp-sw.is-d {
    background: #f9a8d4;
}

.hp-parts li {
    display: grid;
    grid-template-columns: .9rem minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    padding: .5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.hp-sw {
    width: .9rem;
    height: .9rem;
    border-radius: 3px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.hp .hp-parts-link {
    display: inline-block;
    min-height: 24px;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-underline-offset: 4px;
}

.hp .hp-parts-link:hover {
    text-decoration-color: #ffffff;
}

.hp-parts b {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 600;
    color: #ffffff;
}

.hp-royal-note {
    margin-top: .75rem;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-on-hero-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   ๕ AIA Healthiest Schools (5 ต.ค. 2569) ต่อจากแถบพระราชทาน
   ★ 30 ต.ค. 2569 ออกแบบใหม่ตามภาพตัวอย่างที่ครูหนึ่งส่ง มาร์กอัปอยู่ includes/home_aia_card.php
   การ์ดพื้นฟ้าอ่อน แถบสีบนสุดน้ำเงิน เขียว ทอง หัวข้อใหญ่ "โรงเรียนสุขภาพดี" ไล่สีน้ำเงินพร้อมเส้นพู่กันเขียวทอง
   บน: ป้าย หัวข้อ ตัวเลข 3 ใบ ปุ่ม | ภาพในกรอบทอง   ล่าง: เส้นทางรางวัล 4 ใบบนแถบคลื่นน้ำเงิน มีลูกศรคั่น
   ผังดูความกว้างจริงของส่วน (container query hp-aia) 900 px ขึ้นไปสองคอลัมน์และเส้นทางแถวเดียว
   ตัวอักษรใช้สีหมึกของธีม เขียวและทองเป็นเส้น ไอคอน และพื้นอ่อน
   ★ 30 ต.ค. 2569 ครูหนึ่งขอให้กระชับ: หัวข้อ ตัวเลข ไอคอน ระยะ และคลื่นเล็กลง เส้นทางรางวัลบนโทรศัพท์เป็น 2 x 2
   ═══════════════════════════════════════════════════════════════════════ */

.hp-aia {
    --hp-aia-green: var(--tb1-success, #10b981);
    --hp-aia-green-deep: var(--tb1-success-deep, #059669);
    --hp-aia-green-ink: var(--tb1-text-success, #047857);
    --hp-aia-gold-ic: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    --hp-aia-t2-a: var(--tb1-brand-strong, #1e3a8a);
    --hp-aia-t2-b: var(--tb1-accent-strong, #0284c7);
    --hp-aia-sea-a: var(--tb1-banner-1, #1d4ed8);
    --hp-aia-sea-b: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 45%, var(--tb1-accent-strong, #0284c7));
    padding-block: 0 16px;   /* 30 ต.ค. 2569 ระยะเท่าการ์ด E-PLC ก่อนหน้าและการ์ดกล้าแผ่นดินถัดไป */
}
.hp-aia > .hp-wrap { container: hp-aia / inline-size; }

/* ═══ ๕.๓ ชมรมต้นกล้าสี่มหาราช (includes/home_kla_card.php) ใต้ส่วน AIA ═══════════════════════
   ★ 30 ต.ค. 2569 ออกแบบใหม่ตามภาพตัวอย่างของครูหนึ่ง ชุดเดียวกับการ์ด E-PLC และ AIA (พื้นฟ้าอ่อน หัวข้อสองสี เส้นพู่กัน ลายมือ)
   บน: ภาพในกรอบขาว (จอกว้างเอียงเล็กน้อย) ลายมือมุมล่างซ้าย | ป้าย จำนวนภาพ หัวข้อ คำนำ การ์ดรางวัล
   กลาง: กิจกรรม 3 ใบ (640 px ขึ้นไปเรียงแถวเดียว)   ล่าง: แถบสถานที่ วันที่ของภาพ ปุ่ม บนลายภูเขาจาง ๆ
   ภาพค่ายกว้างมาก (1158 x 542) คนอยู่ชิดขอบทั้งสองข้าง จึงตัดแค่ 2:1 ไม่ตัดเป็นภาพสูงแบบภาพตัวอย่าง
   ผังดูความกว้างจริงของส่วน (container query hp-kla) · ธีมบังคับฟอนต์บน p/span/strong ฟอนต์หัวเรื่องและลายมือจึงใช้ !important */
.hp-kla {
    --hp-kla-green: var(--tb1-success, #10b981);
    --hp-kla-green-deep: var(--tb1-success-deep, #059669);
    --hp-kla-green-ink: var(--tb1-text-success, #047857);
    --hp-kla-blue: #1d4ed8;
    --hp-kla-gold: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    padding-block: 0 16px;
}
.hp-kla > .hp-wrap { container: hp-kla / inline-size; }

.hp-kla-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 12px;
    padding: clamp(14px, .5rem + 1vw, 24px);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    background:
        radial-gradient(50% 45% at 0% 0%, color-mix(in srgb, var(--hp-kla-green) 9%, transparent) 0%, transparent 70%),
        radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--tb1-accent, #0ea5e9) 11%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--hp-brand) 3%, var(--hp-paper)) 0%, color-mix(in srgb, var(--tb1-accent, #0ea5e9) 9%, var(--hp-paper)) 100%);
    box-shadow: var(--hp-shadow);
}

.hp-kla-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px clamp(1.25rem, 2.4vw, 2.25rem);
    align-items: center;
}

@container hp-kla (min-width: 900px) {
    .hp-kla-body.has-pic { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ภาพในกรอบขาว ลายมือ "เยาวชนจิตอาสา สร้างสังคมที่ดีกว่า" แปะมุมล่างซ้าย */
.hp-kla-frame {
    position: relative;
    min-width: 0;
    padding: 6px;
    border-radius: calc(var(--hp-r) + 6px);
    background: var(--hp-paper);
    box-shadow: 0 18px 36px -24px rgba(2, 6, 23, .55);
}

/* ลายมือล้นขอบล่างของกรอบ: เว้นที่ใต้ภาพไม่ให้ชนป้ายถัดไป */
.hp-kla-frame { margin-bottom: 10px; }

@container hp-kla (min-width: 900px) {
    .hp-kla-frame { margin: 4px 4px 14px; transform: rotate(-1.5deg); }
}

.hp-kla-photo { margin: 0; overflow: hidden; border-radius: var(--hp-r); background: var(--hp-paper-alt); }
.hp-kla-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 40%; }

.hp .hp-kla-note {
    position: absolute;
    left: -2px;
    bottom: -14px;
    margin: 0;
    padding: .3em .9em .35em;
    border-radius: 14px 26px 16px 28px / 20px 12px 22px 14px;
    background: var(--hp-paper);
    color: var(--hp-heading);
    font-family: 'Sriracha', var(--hp-serif) !important;
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    transform: rotate(-6deg);
    box-shadow: 0 10px 20px -14px rgba(2, 6, 23, .6);
}

.hp .hp-kla-note > i { display: inline; margin-inline-start: .3em; color: var(--hp-kla-green); font-size: .8em; }

/* ป้ายเล็ก จำนวนภาพ หัวข้อ */
.hp-kla-story { display: grid; gap: 8px; min-width: 0; }
.hp-kla-tags { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }

.hp-kla-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: .25em .95em .25em .7em;
    border: 1px solid color-mix(in srgb, var(--hp-kla-green) 38%, var(--hp-line));
    border-radius: 999px;
    background: var(--hp-paper);
    color: var(--hp-heading);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    line-height: 1.4;
}

.hp-kla-eyebrow > i { color: var(--hp-kla-green); }

.hp .hp-kla-album {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.25rem;
    padding: 0 .95em;
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    background: var(--hp-paper);
    color: var(--hp-heading);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    text-decoration: none;
}

.hp-kla-album > i { color: var(--hp-brand); font-size: 1.1em; }

@media (pointer: coarse) {
    .hp .hp-kla-album { min-height: 44px; }
}

.hp-kla-title {
    margin: 0;
    font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem));
    font-weight: 800;
    line-height: 1.2;
    color: var(--hp-heading);
}

.hp-kla-t1,
.hp-kla-t2 { font-weight: inherit; }
.hp-kla-t1 { position: relative; display: inline-block; padding-bottom: .14em; }

.hp-kla-t1::after {
    content: "";
    position: absolute;
    left: 0;
    right: -.1em;
    bottom: 0;
    height: .22em;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%2310b981' stop-opacity='0'/%3E%3Cstop offset='.2' stop-color='%2310b981'/%3E%3Cstop offset='1' stop-color='%23059669'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 21C90 8 196 2 298 6L296 13C198 10 100 15 4 24Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.hp-kla-t2 { color: var(--hp-kla-green-ink); }
.hp-kla-title > i { display: inline-block; margin-inline-start: .1em; font-size: .48em; vertical-align: .9em; color: var(--hp-kla-green); transform: rotate(-10deg); }

.hp .hp-kla-message {
    margin: 0;
    color: var(--hp-brand);
    font-family: var(--hp-serif) !important;
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
}

.hp-kla-intro { margin: 0; color: var(--hp-ink-2); font-size: var(--tb1-fs-sm, 1rem); line-height: 1.6; }

/* การ์ดรางวัล: เหรียญน้ำเงิน ถ้วยจางมุมขวา */
.hp .hp-kla-award {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    margin-top: 2px;
    padding: 10px 14px;
    overflow: hidden;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: var(--hp-paper);
    color: var(--hp-ink);
    text-decoration: none;
    box-shadow: 0 12px 26px -22px rgba(15, 23, 42, .45);
}

.hp-kla-award-icon {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: var(--hp-kla-blue);
    color: #ffffff;
    font-size: 1.3rem;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hp-kla-blue) 15%, transparent);
}

.hp-kla-award-body { position: relative; z-index: 1; display: grid; gap: 1px; min-width: 0; }
.hp-kla-award-body small,
.hp-kla-award-body > span { font-size: var(--tb1-fs-xs, .875rem); line-height: 1.45; color: var(--hp-ink-2); }

.hp .hp-kla-award-body strong {
    font-family: var(--hp-serif) !important;
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--hp-heading);
}

.hp-kla-award-mark {
    position: absolute;
    right: 14px;
    top: 50%;
    font-size: 3.2rem;
    color: color-mix(in srgb, var(--hp-brand) 12%, transparent);
    transform: translateY(-50%);
    pointer-events: none;
}

/* กิจกรรม 3 ใบ: ไอคอนวงกลมสีตามใบ พื้นอ่อนสีเดียวกัน */
.hp-kla-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }

@container hp-kla (min-width: 640px) {
    .hp-kla-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hp-kla-links li {
    --hp-kla-tone: var(--hp-kla-green);
    --hp-kla-ic: var(--hp-kla-green-deep);
    --hp-kla-soft: color-mix(in srgb, var(--hp-kla-green) 11%, var(--hp-paper));
    min-width: 0;
}

.hp-kla-links li.is-blue {
    --hp-kla-tone: var(--hp-brand);
    --hp-kla-ic: var(--hp-kla-blue);
    --hp-kla-soft: color-mix(in srgb, var(--hp-brand) 9%, var(--hp-paper));
}

.hp-kla-links li.is-gold {
    --hp-kla-tone: var(--hp-gold);
    --hp-kla-ic: var(--hp-kla-gold);
    --hp-kla-soft: color-mix(in srgb, var(--hp-gold) 15%, var(--hp-paper));
}

.hp .hp-kla-activity {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--hp-kla-tone) 24%, var(--hp-line));
    border-radius: var(--hp-r);
    background: var(--hp-kla-soft);
    color: var(--hp-ink);
    text-decoration: none;
}

.hp-kla-act-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--hp-kla-ic);
    color: #ffffff;
    font-size: 1.05rem;
}

.hp-kla-act-body { display: grid; gap: 1px; min-width: 0; }
.hp .hp-kla-act-body strong { font-size: var(--tb1-fs-sm, 1rem); font-weight: 700; line-height: 1.4; color: var(--hp-heading); }
.hp-kla-act-body > span { font-size: var(--tb1-fs-xs, .875rem); line-height: 1.45; color: var(--hp-ink-2); }

/* แถบล่าง: สถานที่และวันที่ของภาพ ปุ่มไปหน้าชมรม */
.hp-kla-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: color-mix(in srgb, var(--hp-paper) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hp-kla-place { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; color: var(--hp-heading); font-size: var(--tb1-fs-sm, 1rem); font-weight: 600; }
.hp-kla-place > span { display: inline-flex; align-items: center; gap: 8px; }
.hp-kla-place i { color: var(--hp-brand); font-size: 1.1em; }

.hp .hp-kla-btn {
    min-height: max(44px, 2.9rem);
    padding: 0 .6rem 0 1.2rem;
    gap: .6rem;
    font-size: var(--tb1-fs-sm, 1rem);
}

.hp-kla-btn > i { font-size: 1.2em; }

@container hp-kla (max-width: 519px) {
    .hp-kla-bar { padding: 10px; }
    .hp .hp-kla-btn { width: 100%; justify-content: space-between; }
}

/* โหมดมืด: ปุ่มกรมท่าของธีมกลืนกับแถบล่าง ใช้น้ำเงินสดแบบการ์ด AIA (ตัวอักษรขาวยังเกิน 4.5:1) */
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-kla .hp-btn-brand {
    background: #1d4ed8;
    border-color: #3b82f6;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-kla .hp-btn-brand:hover {
    background: #1e40af;
}

/* ลายภูเขาจาง ๆ ใต้แถบล่าง */
.hp-kla-hills { position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: clamp(60px, 3rem + 3vw, 96px); pointer-events: none; }
.hp-kla-hills .is-far { fill: color-mix(in srgb, var(--hp-brand) 9%, var(--hp-paper)); }
.hp-kla-hills .is-near { fill: color-mix(in srgb, var(--tb1-accent, #0ea5e9) 15%, var(--hp-paper)); }

@media (hover: hover) {
    .hp .hp-kla-activity:hover { border-color: var(--hp-kla-tone); }
    .hp .hp-kla-award:hover { border-color: var(--hp-brand-line); }
    .hp .hp-kla-album:hover { border-color: var(--hp-brand); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hp .hp-kla-activity, .hp .hp-kla-award { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
    .hp .hp-kla-activity:hover, .hp .hp-kla-award:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow-hover); }
}

.hp-aia-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(14px, .5rem + 1vw, 24px);
    border-radius: var(--hp-r-lg);
    background:
        radial-gradient(55% 45% at 6% 0%, color-mix(in srgb, var(--hp-paper) 80%, transparent) 0%, transparent 70%),
        radial-gradient(70% 60% at 100% 8%, color-mix(in srgb, var(--tb1-accent, #0ea5e9) 13%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--hp-brand) 4%, var(--hp-paper)) 0%, color-mix(in srgb, var(--tb1-accent, #0ea5e9) 10%, var(--hp-paper)) 100%);
    border: 1px solid var(--hp-line);
    box-shadow: var(--hp-shadow);
}

/* แถบสีบนสุดของการ์ด (ส่วนการเคลื่อนไหวทำให้ลากจากซ้ายและมีแสงวาบ) */
.hp-aia-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--hp-brand) 0%, var(--hp-aia-green) 55%, var(--hp-gold) 100%);
}

.hp-aia-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem clamp(1.25rem, 2.4vw, 2.25rem);
    align-items: center;
}

@container hp-aia (min-width: 900px) {
    .hp-aia-in.has-pic {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    }
}

.hp-aia-say {
    min-width: 0;
    container: hp-aia-say / inline-size;
}

/* ป้าย: หัวใจในวงกลมเขียว พื้นไล่เขียวอ่อน */
.hp-aia-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
    padding: .2rem .95rem .2rem .2rem;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--hp-heading);
    background: linear-gradient(90deg, color-mix(in srgb, var(--hp-aia-green) 20%, var(--hp-paper)) 0%, color-mix(in srgb, var(--hp-aia-green) 7%, var(--hp-paper)) 100%);
    border: 1px solid color-mix(in srgb, var(--hp-aia-green) 45%, var(--hp-line));
    border-radius: 999px;
}

.hp-aia-kicker-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--hp-aia-green-deep);
    color: #ffffff;
    font-size: .85rem;
}

/* หัวข้อ: "3" ใหญ่กว่า บรรทัดสองไล่สีน้ำเงิน มีเส้นพู่กันเขียวทองใต้และต้นกล้าท้ายคำ
   ธีมบังคับฟอนต์บน span ด้วย !important ชิ้นส่วนในหัวข้อจึงเป็น <b> */
.hp-aia-title {
    display: grid;
    justify-items: start;
    gap: .05em;
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--hp-heading);
}

.hp-aia-t1,
.hp-aia-t2,
.hp-aia-big {
    font-weight: inherit;
}

.hp-aia-t1 {
    display: block;
}

.hp-aia-big {
    font-size: 1.3em;
    line-height: 1;
}

.hp-aia-t2 {
    position: relative;
    display: block;
    padding-bottom: .24em;
    color: var(--hp-brand);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hp-aia-t2 {
        background: linear-gradient(90deg, var(--hp-aia-t2-a) 0%, var(--hp-aia-t2-b) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.hp-aia-t2::after {
    content: "";
    position: absolute;
    left: .05em;
    right: -.2em;
    bottom: 0;
    height: .26em;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%2310b981' stop-opacity='0'/%3E%3Cstop offset='.22' stop-color='%2310b981'/%3E%3Cstop offset='.7' stop-color='%2384cc16'/%3E%3Cstop offset='1' stop-color='%23fbbf24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 21C90 8 196 2 298 6L296 13C198 10 100 15 4 24Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.hp-aia-t2 > i {
    display: inline-block;
    margin-inline-start: .12em;
    font-size: .48em;
    vertical-align: .9em;
    color: var(--hp-aia-green);
    -webkit-text-fill-color: var(--hp-aia-green);
    transform: rotate(-10deg);
}

.hp-aia-text {
    max-width: 44rem;
    margin-top: .55rem;
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.65;
    color: var(--hp-ink-2);
}

/* ตัวเลข 3 ใบ: ไอคอนวงกลมซ้าย ตัวเลข คำอธิบาย ขอบบนสีตามใบ (น้ำเงิน เขียว ทอง) */
.hp-aia-stats {
    display: grid;
    gap: .5rem;
    margin: .8rem 0 .9rem;
    padding: 0;
    list-style: none;
}

.hp-aia-stats li {
    --hp-aia-tone: var(--hp-brand);
    --hp-aia-ic: var(--hp-aia-gold-ic);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic num" "ic k";
    align-items: center;
    gap: 0 .7rem;
    min-width: 0;
    padding: .55rem .75rem;
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    border-top: 3px solid var(--hp-aia-tone);
    border-radius: var(--hp-r);
    box-shadow: 0 12px 26px -22px rgba(15, 23, 42, .4);
}

.hp-aia-stats li:nth-child(2) {
    --hp-aia-tone: var(--hp-aia-green);
    --hp-aia-ic: var(--hp-aia-green-deep);
}

.hp-aia-stats li:nth-child(3) {
    --hp-aia-tone: var(--hp-gold);
}

.hp-aia-stat-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--hp-aia-ic);
    color: #ffffff;
    font-size: 1rem;
}

.hp-aia-num {
    grid-area: num;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .35rem;
    min-width: 0;
}

.hp-aia-num b {
    font-size: var(--tb1-fs-xl, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--hp-heading);
    font-variant-numeric: tabular-nums;
}

.hp-aia-num small {
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    color: var(--hp-heading);
}

.hp-aia-k {
    grid-area: k;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--hp-muted);
}

/* คอลัมน์ข้อความกว้างพอ: สามใบเรียงกัน คำอธิบายเต็มความกว้างใบ (ตัวเลข 1,547,000 ไม่ล้น) */
@container hp-aia-say (min-width: 36rem) {
    /* ใบกลาง (1,547,000 บาท) กว้างกว่า ตัวเลขกับหน่วยอยู่บรรทัดเดียวกัน */
    .hp-aia-stats {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .85fr);
    }

    .hp-aia-stats li {
        grid-template-areas: "ic num" "k k";
        align-content: start;
        row-gap: .3rem;
        padding: .6rem .7rem .65rem;
    }

    .hp-aia-stat-ic {
        width: 2.1rem;
        height: 2.1rem;
        font-size: .9rem;
    }

    .hp-aia-num b {
        font-size: var(--tb1-fs-lg, 1.25rem);
    }
}

/* ปุ่ม: สูงอย่างน้อย 44 px แม้ผู้ใช้ย่อตัวอักษร ลูกศรท้ายปุ่ม */
.hp-aia-acts {
    gap: .6rem .75rem;
}

.hp .hp-aia-btn {
    min-height: max(44px, 2.9rem);
    padding: 0 .95rem 0 1.05rem;
    gap: .55rem;
    border-width: 2px;
    font-size: var(--tb1-fs-sm, 1rem);
}

.hp .hp-aia-btn.hp-btn-line {
    border-color: var(--hp-brand);
    background: var(--hp-paper);
}

.hp .hp-aia-btn.hp-btn-line:hover {
    background: var(--hp-brand-soft);
}

.hp-aia-go {
    margin-inline-start: .15rem;
    font-size: .8em;
}

@container hp-aia (max-width: 519px) {
    .hp .hp-aia-btn {
        width: 100%;
    }

    .hp-aia-btn > span {
        flex: 1 1 auto;
        text-align: start;
    }
}

/* ภาพ: กรอบทองรอบภาพ จอกว้างเอียงเล็กน้อยแบบจอบนเวที ใบไม้สองใบล้นขอบกรอบ */
.hp-aia-frame {
    position: relative;
    min-width: 0;
    padding: 5px;
    border-radius: calc(var(--hp-r-lg) + 5px);
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 30%, #fef3c7 55%, #fbbf24 80%, #fde68a 100%);
    box-shadow: 0 26px 50px -30px rgba(2, 6, 23, .55);
}

@container hp-aia (min-width: 900px) {
    .hp-aia-frame {
        margin-inline-end: 6px;
        transform: perspective(1600px) rotateY(-6deg);
        transform-origin: left center;
    }
}

.hp-aia-pic {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--hp-r-lg);
    background: var(--hp-paper-alt);
}

.hp-aia-pic picture,
.hp-aia-pic img {
    display: block;
    width: 100%;
    height: auto;
}

.hp-aia-pic img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center 30%;
}

/* แท็บเล็ต: ภาพเต็มความกว้างการ์ด ตัดเป็น 2:1 ไม่ให้ภาพสูงเกินส่วนอื่น */
@container hp-aia (min-width: 520px) and (max-width: 899px) {
    .hp-aia-pic img {
        aspect-ratio: 2 / 1;
        object-position: center 42%;
    }
}

.hp-aia-cap {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: calc(100% - 20px);
    padding: 3px 11px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
    background: rgba(2, 6, 23, .74);
    border-radius: 999px;
}

.hp-aia-cap i {
    color: var(--hp-gold-text);
}

.hp-aia-leaf {
    position: absolute;
    z-index: 1;
    color: var(--hp-aia-green);
    font-size: 1.6rem;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(4, 120, 87, .25));
}

.hp-aia-leaf.is-a {
    left: -.9rem;
    bottom: 16%;
    transform: rotate(-35deg);
}

.hp-aia-leaf.is-b {
    top: -.85rem;
    right: 12%;
    font-size: 1.3rem;
    transform: rotate(40deg);
}

/* แถบคลื่นน้ำเงินใต้เส้นทางรางวัล เส้นสันคลื่นสีทอง */
.hp-aia-wave {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: clamp(80px, 4rem + 3vw, 120px);
    pointer-events: none;
}

.hp-aia-wave .is-a { stop-color: var(--hp-aia-sea-a); }
.hp-aia-wave .is-b { stop-color: var(--hp-aia-sea-b); }
.hp-aia-wave .is-sea { fill: url(#hp-aia-sea); }

.hp-aia-wave .is-crest {
    fill: none;
    stroke: var(--hp-gold);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

/* โหมดมืด: ปุ่มกรมท่ากลืนกับพื้นการ์ด ใช้น้ำเงินสดแทน (ตัวอักษรขาวยังเกิน 4.5:1) หัวข้อไล่ฟ้าอ่อน */
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-aia {
    --hp-aia-t2-a: #93c5fd;
    --hp-aia-t2-b: #38bdf8;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-aia .hp-btn-brand {
    background: #1d4ed8;
    border-color: #3b82f6;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-aia .hp-btn-brand:hover {
    background: #1e40af;
}

/* เส้นทางรางวัล: 4 ใบ เรียงตามเวลา 2 x 2 (900 px ขึ้นไปเรียงแถวเดียวมีลูกศรคั่น) */
.hp-aia-path {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: clamp(.8rem, .6rem + .8vw, 1.1rem) 0 0;
    padding: 0;
    list-style: none;
}

@container hp-aia (min-width: 900px) {
    .hp-aia-path {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.3rem;
    }

    .hp-aia-step:not(:last-child)::after {
        content: "\f054";
        position: absolute;
        top: 50%;
        right: -.65rem;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .65rem;
        line-height: 1;
        color: var(--hp-brand);
        background: var(--hp-paper);
        box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .35);
        transform: translate(50%, -50%);
        pointer-events: none;
    }
}

.hp-aia-step {
    --hp-aia-tone: var(--hp-brand);
    --hp-aia-tone-soft: color-mix(in srgb, var(--hp-brand) 11%, var(--hp-paper));
    --hp-aia-ic: var(--hp-brand);
    position: relative;
    min-width: 0;
}

.hp-aia-step.is-green {
    --hp-aia-tone: var(--hp-aia-green);
    --hp-aia-tone-soft: color-mix(in srgb, var(--hp-aia-green) 14%, var(--hp-paper));
    --hp-aia-ic: var(--hp-aia-green-deep);
}

.hp-aia-step.is-apac {
    --hp-aia-tone: var(--hp-gold);
    --hp-aia-tone-soft: color-mix(in srgb, var(--hp-gold) 20%, var(--hp-paper));
    --hp-aia-ic: var(--hp-aia-gold-ic);
}

.hp .hp-aia-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic yr" "ic k" "t t";
    align-items: center;
    gap: 0 .7rem;
    height: 100%;
    padding: .65rem .75rem .7rem;
    color: inherit;
    text-decoration: none;
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    border-top: 4px solid var(--hp-aia-tone);
    border-radius: var(--hp-r);
    box-shadow: 0 16px 30px -22px rgba(15, 23, 42, .5);
    transition: border-color .2s var(--hp-ease), box-shadow .2s var(--hp-ease), translate .2s var(--hp-ease);
}

.hp .hp-aia-link:hover {
    border-color: var(--hp-brand-line);
    border-top-color: var(--hp-aia-tone);
    box-shadow: var(--hp-shadow-hover);
}

.hp-aia-step-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--hp-aia-ic);
    color: #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hp-aia-tone) 14%, transparent);
}

.hp-aia-yr {
    grid-area: yr;
    align-self: end;
    font-size: var(--tb1-fs-xl, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--hp-heading);
    font-variant-numeric: tabular-nums;
}

.is-apac .hp-aia-yr {
    color: var(--hp-gold-ink);
}

/* "ปีที่ 1" ไม่ถูกตัดกลางคำเมื่อผู้ใช้ขยายตัวอักษร */
.hp-aia-nw {
    white-space: nowrap;
}

.hp-aia-step-k {
    grid-area: k;
    align-self: start;
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--hp-ink-2);
}

.hp-aia-step-t {
    grid-area: t;
    margin-top: .45rem;
    padding: .3rem .6rem;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--hp-heading);
    background: var(--hp-aia-tone-soft);
    border-radius: var(--hp-r-sm);
    overflow-wrap: anywhere;
}

/* จอแคบ (2 x 2): ไอคอนเล็กข้างปี คำอธิบายและชื่อโครงการเต็มความกว้างใบ */
@container hp-aia (max-width: 519px) {
    .hp .hp-aia-link {
        grid-template-areas: "ic yr" "k k" "t t";
        column-gap: .5rem;
        padding: .6rem .6rem .65rem;
    }

    .hp-aia-step-ic {
        width: 2.1rem;
        height: 2.1rem;
        font-size: .9rem;
        box-shadow: none;
    }

    .hp-aia-yr {
        align-self: center;
        font-size: var(--tb1-fs-lg, 1.25rem);
    }

    .hp-aia-step-k {
        margin-top: .25rem;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hp .hp-aia-link:hover {
        translate: 0 -2px;
    }
}

/* คอนทราสต์สูง: ดำ ขาว เหลือง ไม่มีพื้นไล่สี คลื่น ใบไม้ และเส้นพู่กัน กรอบภาพเป็นขาว */
html.tb1-contrast-high .hp .hp-aia-card {
    background: #000000 !important;
    border: 2px solid #ffffff;
    box-shadow: none;
}

/* :is() รับ ::before/::after ไม่ได้ (ทั้งกฎจะถูกทิ้ง) จึงเขียนแยกตัวเลือก */
html.tb1-contrast-high .hp .hp-aia-card::before,
html.tb1-contrast-high .hp .hp-aia-t2::after,
html.tb1-contrast-high .hp .hp-aia-wave,
html.tb1-contrast-high .hp .hp-aia-leaf {
    display: none;
}

html.tb1-contrast-high .hp :is(.hp-aia-stats li, .hp-aia-link, .hp-aia-cap, .hp-aia-step-t, .hp-aia-kicker-ic, .hp-aia-stat-ic, .hp-aia-step-ic) {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .hp :is(.hp-aia-kicker-ic, .hp-aia-stat-ic, .hp-aia-step-ic, .hp-aia-step-t) {
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .hp :is(.hp-aia-stats li, .hp-aia-link) {
    border-top: 4px solid #facc15 !important;
}

html.tb1-contrast-high .hp .hp-aia-t2 {
    background: none !important;
}

html.tb1-contrast-high .hp :is(.hp-aia-title, .hp-aia-t1, .hp-aia-t2, .hp-aia-big, .hp-aia-text, .hp-aia-num b, .hp-aia-num small, .hp-aia-k,
    .hp-aia-step-k, .hp-aia-step-t, .hp-aia-cap) {
    color: #ffffff !important;
}

html.tb1-contrast-high .hp :is(.hp-aia-kicker, .hp-aia-kicker > span, .hp-aia-yr, .is-apac .hp-aia-yr, .hp-aia-cap i, .hp-aia-t2 > i,
    .hp-aia-kicker-ic i, .hp-aia-stat-ic i, .hp-aia-step-ic i) {
    color: #facc15 !important;
}

html.tb1-contrast-high .hp .hp-aia-kicker {
    background: #000000 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .hp .hp-aia-frame {
    padding: 2px;
    background: #ffffff;
    box-shadow: none;
    transform: none;
}

html.tb1-contrast-high .hp .hp-aia-step:not(:last-child)::after {
    color: #facc15;
    background: #000000;
    border: 1px solid #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-aia-link:hover {
    outline: 3px solid #facc15;
    outline-offset: -3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ๗ ติดต่อ
   ═══════════════════════════════════════════════════════════════════════ */

.hp-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--hp-gap);
    align-items: stretch;
}

.hp-addr {
    display: flex;
    gap: .6rem;
    margin-bottom: .75rem;
    color: var(--hp-ink-2);
}

.hp-addr i {
    margin-top: .35rem;
    color: var(--hp-brand);
}

.hp-cl li + li {
    border-top: 1px solid var(--hp-line);
}

.hp .hp-cl-link {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .65rem .5rem;
    color: var(--hp-ink);
    text-decoration: none;
    border-radius: var(--hp-r-sm);
    transition: background-color .2s var(--hp-ease);
}

.hp .hp-cl-link:hover {
    background: var(--hp-brand-soft);
}

.hp-cl-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border-radius: 12px;
}

.hp-cl-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hp-cl-k {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
}

.hp-cl-v {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hp-cl-go {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-muted);
    transition: translate .2s var(--hp-ease), color .2s var(--hp-ease);
}

.hp .hp-cl-link:hover .hp-cl-go {
    color: var(--hp-brand);
    translate: 3px 0;
}

.hp-map {
    position: relative;
    min-height: 20rem;
    overflow: hidden;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    box-shadow: var(--hp-shadow);
    /* ลายเส้นตารางของแผนที่ บอกว่าช่องนี้คือแผนที่ก่อนจะโหลดจริง */
    background-color: var(--hp-brand-soft);
    background-image:
        linear-gradient(color-mix(in srgb, var(--hp-brand) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--hp-brand) 14%, transparent) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
}

.hp-map-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 100%;
    min-height: 20rem;
    padding: 1.5rem;
    text-align: center;
}

.hp-map-pin {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: .25rem;
    color: #ffffff;
    background-color: var(--hp-hero-b);
    background-image: linear-gradient(160deg, var(--hp-hero-a), var(--hp-hero-c));
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--hp-brand) 18%, transparent), 0 14px 28px -14px rgba(2, 6, 23, .8);
}

.hp-map-name {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 600;
}

.hp-map-note {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-ink-2);
}

.hp-map .hp-acts {
    justify-content: center;
    margin-top: .5rem;
}

.hp-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── ปุ่มกลับขึ้นบน ───────────────────────────────────────────────────── */
.hp-top {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    color: #ffffff;
    background: var(--tb1-banner-1, #1d4ed8);
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .7);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.hp-top.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.hp-top:focus-visible {
    outline: 3px solid var(--tb1-warning-soft, #fbbf24);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   จอขนาดต่าง ๆ
   ═══════════════════════════════════════════════════════════════════════ */

/* จอกลาง: การ์ดวันนี้เต็มแถวใต้ช่องค้นหา ป้ายวันที่อยู่ซ้าย สามแถวอยู่ขวา
   แถบตัวเลขเป็นสองคูณสอง */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .hp-today-card {
        display: grid;
        grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
        align-items: start;
        column-gap: 20px;
    }

    .hp-today-head {
        align-self: center;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

@media (max-width: 1099.98px) {
    .hp-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-fact + .hp-fact {
        box-shadow: none;
    }

    .hp-fact:nth-child(even) {
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14);
    }

    .hp-fact:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
}

/* ข่าวสี่ใบบนจอกลางเป็นสองคูณสอง ไม่เหลือการ์ดเดียวค้างแถวล่าง */
@media (min-width: 641px) and (max-width: 1099.98px) {
    .hp-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023.98px) {
    .hp-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-stories {
        padding: 0;
    }

    /* รายการหัวข่าวใต้ภาพ: จอ 641 ถึง 1023 px สองคอลัมน์ (4 เรื่องเป็น 2 x 2) จอเล็กกว่านั้นคอลัมน์เดียว */
    .hp-story-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: .3rem;
    }

    .hp-story-title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .hp-royal-in,
    .hp-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .hp-hero {
        padding-top: 18px;
    }

    .hp-hero.has-stage {
        padding-bottom: 84px;
    }

    .hp-stage-sec {
        margin-top: -60px;
    }

    .hp-tags {
        margin-bottom: 12px;
    }

    /* ดวงแสงมุมขวาบนเล็กลงและเลื่อนออกไป ไม่ให้สว่างอยู่หลังชื่อโรงเรียน */
    .hp-orb.is-a {
        top: -16rem;
        right: -14rem;
        width: 28rem;
        height: 28rem;
    }

    .hp-crest-ring {
        width: 3.9rem;
        padding: 4px;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 12px 24px -12px rgba(2, 6, 23, .85);
    }

    .hp-tag {
        padding-inline: 11px;
        font-size: var(--tb1-fs-xs, .875rem);
    }

    .hp-sub {
        margin-top: 12px;
    }

    .hp-hero-acts .hp-btn {
        flex: 1 1 auto;
    }

    .hp .hp-search-btn {
        padding: 0 1.1rem;
    }

    .hp-search-label,
    .hp-search-note {
        margin-left: 12px;
    }

    .hp-chips {
        margin-left: 4px;
    }

    .hp-today-card {
        padding: 14px 12px 12px;
        border-radius: var(--hp-r-lg);
    }

    .hp-day-n {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.75rem;
    }

    .hp-band {
        margin-top: 22px;
    }

    .hp .hp-band-more {
        margin-left: 0;
    }

    .hp-facts {
        border-radius: var(--hp-r);
    }

    /* มือถือ: ไอคอนเล็กอยู่ข้างชื่อตัวเลข ตัวเลขเต็มความกว้างช่องด้านล่าง ช่องจึงไม่สูงเกิน */
    .hp-fact {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        align-content: start;
        gap: 6px 8px;
        padding: 12px;
    }

    .hp-fact-body {
        display: contents;
    }

    .hp-fact-ic {
        width: 1.9rem;
        height: 1.9rem;
        font-size: .8rem;
        border-radius: 9px;
    }

    .hp-fact-v,
    .hp-fact-s,
    .hp-fact.has-chart .hp-spark {
        grid-column: 1 / -1;
    }

    .hp-fact.has-chart .hp-spark {
        justify-self: start;
        margin: 4px 0 0;
    }

    .hp-today-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-stage {
        gap: .9rem;
        padding: 10px;
        border-radius: var(--hp-r);
    }

    .hp-shots {
        border-radius: var(--hp-r-sm);
    }

    .hp-story-list {
        grid-template-columns: minmax(0, 1fr);
        gap: .2rem;
    }

    .hp .hp-story-link {
        grid-template-columns: 4.75rem minmax(0, 1fr);
        gap: .7rem;
        padding: .55rem .55rem .8rem;
    }

    .hp-story-title {
        font-size: var(--tb1-fs-sm, 1rem);
    }

    .hp-panel-head {
        padding: 12px 14px;
    }

    .hp-panel-body {
        padding: 12px 14px 16px;
    }

    /* ข่าวล่าสุดบนมือถือเป็นแถว ภาพสี่เหลี่ยมจัตุรัสทางซ้าย หน้าจึงไม่ยาวเกินจำเป็น */
    .hp-cards {
        gap: 10px;
    }

    .hp-card-in {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 10px;
    }

    .hp-card-media {
        aspect-ratio: 1;
        border-radius: var(--hp-r-sm);
    }

    .hp-card-body {
        padding: 0;
        gap: .25rem;
    }

    .hp-card-title {
        font-size: var(--tb1-fs-sm, 1rem);
    }

    .hp-card-text {
        display: none;
    }

    .hp .hp-ev-link {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 10px;
        padding: 8px 4px;
    }

    .hp-ev-tile {
        width: 3rem;
        height: 3rem;
    }

    .hp-ev-tile b {
        font-size: var(--tb1-fs-lg, 1.25rem);
    }

    .hp-royal::before {
        font-size: 10rem;
    }

    .hp-awards {
        padding: 1.25rem;
    }

    .hp-h p {
        padding-left: 0;
    }
}

@media (max-width: 380px) {
    .hp-spark {
        grid-auto-columns: 1.15rem;
        gap: 2px;
    }

    .hp .hp-today-link {
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        gap: 8px;
        padding-right: 8px;
    }

    .hp-today-ic {
        width: 2rem;
        height: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   การเคลื่อนไหว
   ★ ทุกอย่างอยู่ใน prefers-reduced-motion: no-preference
   ★ สถานะ "รอเล่น" มีเฉพาะเมื่อสคริปต์ติดคลาส hp-motion ที่ .hp แล้วเท่านั้น
     ไม่มีสคริปต์ หรือสคริปต์โหลดไม่ขึ้น ทุกอย่างอยู่ในที่ของมันตั้งแต่แรก
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (prefers-reduced-motion: no-preference) {
    /* หัวหน้า: ของในหัวหน้าเลื่อนขึ้นทีละชิ้นตอนโหลด (ตำแหน่งอย่างเดียว ไม่จางหาย) */
    .hp-hero-main > *,
    .hp-today-card,
    .hp-band {
        animation: hp-hero-rise .75s var(--hp-ease) both;
    }

    .hp-hero-main > :nth-child(2) { animation-delay: .05s; }
    .hp-hero-main > :nth-child(3) { animation-delay: .1s; }
    .hp-hero-main > :nth-child(4) { animation-delay: .15s; }
    .hp-hero-main > :nth-child(5) { animation-delay: .2s; }
    .hp-today-card { animation-delay: .14s; }
    .hp-band { animation-delay: .24s; }

    .hp-hero::before {
        animation: hp-glow 1.8s var(--hp-ease) both;
    }

    /* ดวงแสงลอยเข้าที่ครั้งเดียว (ไม่วนซ้ำ จึงไม่ต้องมีปุ่มหยุด) */
    .hp-orb {
        animation: hp-orb-in 2.6s var(--hp-ease) both;
    }

    .hp-orb.is-b { animation-delay: .2s; }
    .hp-orb.is-c { animation-delay: .4s; }

    /* วงแหวนทองรอบตราหมุนหนึ่งรอบตอนโหลด ตราไม่หมุนตาม */
    .hp-crest-ring::before {
        animation: hp-ring 2.2s var(--hp-ease) .2s both;
    }

    /* จุดเขียวของ "วันนี้ที่โรงเรียน" ส่งคลื่นออกสองครั้ง แล้วหยุด */
    .hp-today-title::before {
        animation: hp-ping 1.4s ease-out .6s 2 both;
    }

    /* แท่งนักเรียนรายชั้นยืดขึ้นทีละแท่งจากซ้ายไปขวาเมื่อแถบตัวเลขเข้าที่ */
    .hp-spark-fill {
        transition: transform .8s var(--hp-ease) calc(.45s + var(--b, 0) * .07s);
    }

    .hp.hp-motion .hp-band:not(.is-in) .hp-spark-fill {
        transform: scaleY(0);
    }

    /* ส่วนต่าง ๆ เลื่อนขึ้นเข้าที่เมื่อเลื่อนหน้ามาถึง */
    .hp-rise {
        transition: translate .75s var(--hp-ease) var(--hp-d, 0s);
    }

    .hp.hp-motion [data-hp-reveal].hp-rise:not(.is-in),
    .hp.hp-motion [data-hp-reveal]:not(.is-in) .hp-rise {
        translate: 0 28px;
    }

    .hp-card,
    .hp-dir-g,
    .hp-aia-step {
        --hp-d: calc(var(--k, 0) * .06s);
    }

    .hp-events { --hp-d: .05s; }
    .hp-adm { --hp-d: .1s; }
    .hp-awards { --hp-d: .08s; }
    .hp-map { --hp-d: .08s; }

    /* ขีดสีนำของหัวข้อยืดลงจากบน */
    .hp-lead::before {
        transition: transform .5s var(--hp-ease) .12s;
    }

    .hp.hp-motion [data-hp-reveal]:not(.is-in) .hp-lead::before {
        transform: scaleY(0);
    }

    /* แถบองค์ประกอบรางวัลและแถบผู้สมัครยืดจากซ้าย */
    .hp-bar {
        transition: transform 1.1s var(--hp-ease) .3s;
    }

    .hp.hp-motion .hp-awards:not(.is-in) .hp-bar {
        transform: scaleX(0);
    }

    .hp-fill {
        transition: transform 1s var(--hp-ease) .35s;
    }

    .hp.hp-motion .hp-adm:not(.is-in) .hp-fill {
        transform: scaleX(0);
    }

    /* วงแสงบีบเข้าหาช่อง "วันนี้" ครั้งเดียว ใช้เงาจึงไม่ดันผังให้ขยับ */
    .hp.hp-motion .hp-cal.is-in .hp-d.is-today {
        animation: hp-today 1.6s ease-out .5s both;
    }
}

/* ── 5 ต.ค. 2569: พระราชทานและ AIA ขึ้นทีละชั้น ตัวเลขนับขึ้น ภาพเข้าที่ และประกายทอง (ผอ. เลือก) ──────────
   ทำงานเฉพาะเมื่อไม่ได้ตั้งลดการเคลื่อนไหว และสคริปต์ติด hp-motion แล้ว (ไม่มีสคริปต์ = ทุกอย่างอยู่ในที่ตั้งแต่แรก)
   ขยับแค่ตำแหน่งและขนาด ไม่มีสถานะจางหาย ตัวอักษรอ่านได้ตลอด
   ประกายทองเล่นเมื่อเลื่อนถึง (สคริปต์ติด is-shine ทุกครั้งที่ส่วนนั้นเข้ากลางจอ) และเมื่อชี้ ครั้งละไม่ถึง 4 วินาที
   ไม่วนไม่รู้จบ จึงไม่ต้องมีปุ่มหยุด (WCAG 2.2.2) */
@media screen and (prefers-reduced-motion: no-preference) {
    /* กล่องที่ลูกขึ้นทีละชั้น: ตัวกล่องขยับน้อย ลูกแต่ละชิ้นขยับเองตามลำดับ --st */
    .hp.hp-motion .hp-stagger[data-hp-reveal].hp-rise:not(.is-in) {
        translate: 0 12px;
    }

    .hp-st {
        transition: translate .7s var(--hp-ease) calc(.06s + var(--st, 0) * .07s);
    }

    .hp.hp-motion [data-hp-reveal]:not(.is-in) .hp-st {
        translate: 0 22px;
    }

    /* ภาพวันรับรางวัลพระราชทานขยายเข้าที่ */
    .hp-royal-pics.hp-rise {
        transition: translate .75s var(--hp-ease) var(--hp-d, 0s), scale 1s var(--hp-ease) .05s;
    }

    .hp.hp-motion .hp-royal-pics[data-hp-reveal]:not(.is-in) {
        scale: .93;
    }

    /* ภาพ AIA ซูมออกในกรอบ (กรอบตัดขอบภาพอยู่แล้ว) */
    .hp-aia-pic img {
        transition: scale 1.5s var(--hp-ease) .1s;
    }

    .hp.hp-motion [data-hp-reveal]:not(.is-in) .hp-aia-pic img {
        scale: 1.14;
    }

    /* แถบสีบนการ์ด AIA ลากจากซ้ายไปขวา ชั้นบนเป็นแสงวาบที่รอนอกแถบ */
    .hp-aia-card::before {
        background:
            linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .9) 50%, transparent 100%) -200% 0 / 40% 100% no-repeat,
            linear-gradient(90deg, var(--hp-brand) 0%, var(--hp-aia-green) 55%, var(--hp-gold) 100%);
        transform-origin: left center;
        transition: transform 1.2s var(--hp-ease) .15s;
    }

    .hp.hp-motion .hp-aia-card[data-hp-reveal]:not(.is-in)::before {
        transform: scaleX(0);
    }

    /* รายการรางวัลแต่ละประเภทเลื่อนเข้าจากขวาทีละแถว ตามแถบสีที่ยืดออก */
    .hp-parts li {
        transition: translate .6s var(--hp-ease) .45s;
    }

    .hp-parts li:nth-child(2) { transition-delay: .53s; }
    .hp-parts li:nth-child(3) { transition-delay: .61s; }
    .hp-parts li:nth-child(4) { transition-delay: .69s; }
    .hp-parts li:nth-child(5) { transition-delay: .77s; }
    .hp-parts li:nth-child(6) { transition-delay: .85s; }

    .hp.hp-motion .hp-awards[data-hp-reveal]:not(.is-in) .hp-parts li {
        translate: 18px 0;
    }

    /* ประกายทอง: แสงวาบวิ่งผ่านใต้ตัวอักษร (::after เมื่อเลื่อนถึง ::before เมื่อชี้) */
    .hp-shine {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .hp-shine::after,
    .hp-shine::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 55%;
        pointer-events: none;
        background: linear-gradient(100deg, transparent 0%, rgba(253, 230, 138, .6) 50%, transparent 100%);
        transform: translateX(-140%) skewX(-18deg);
    }

    .hp-aia-kicker.hp-shine::after,
    .hp-aia-kicker.hp-shine::before {
        background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .95) 50%, transparent 100%);
    }

    /* ป้ายทองบนพื้นน้ำเงินและการ์ดเอเชียแปซิฟิก: แสงอ่อนลง ตัวอักษรสีทองยังเกิน 4.5:1 ตอนแสงผ่าน */
    .hp-royal-kicker.hp-shine::after,
    .hp-royal-kicker.hp-shine::before {
        background: linear-gradient(100deg, transparent 0%, rgba(253, 230, 138, .3) 50%, transparent 100%);
    }

    .hp .is-apac .hp-aia-link.hp-shine::after,
    .hp .is-apac .hp-aia-link.hp-shine::before {
        background: linear-gradient(100deg, transparent 0%, rgba(251, 191, 36, .32) 50%, transparent 100%);
    }

    [data-hp-shine].is-shine .hp-shine::after {
        animation: hp-sheen 1.25s var(--hp-ease) .9s 2;
    }

    [data-hp-shine].is-shine .hp-aia-link.hp-shine::after {
        animation-delay: 1.5s;
    }

    .hp-shine:hover::before,
    .hp-shine:focus-visible::before {
        animation: hp-sheen 1s var(--hp-ease);
    }

    .hp-aia.is-shine .hp-aia-card::before {
        animation: hp-bar-sheen 1.6s ease-in-out 1.2s 1;
    }

    /* ลายน้ำ: มงกุฎลอยขึ้นแล้วกลับที่ (หัวใจของ AIA เอาออก 30 ต.ค. 2569) */
    .hp-royal.is-shine::before {
        animation: hp-crown 2.4s var(--hp-ease) .3s 1;
    }

}

@keyframes hp-sheen {
    from {
        transform: translateX(-140%) skewX(-18deg);
    }

    to {
        transform: translateX(240%) skewX(-18deg);
    }
}

@keyframes hp-bar-sheen {
    from {
        background-position: -200% 0, 0 0;
    }

    to {
        background-position: 300% 0, 0 0;
    }
}

@keyframes hp-crown {
    0%,
    100% {
        transform: none;
    }

    45% {
        transform: translateY(-12px) rotate(-4deg);
    }
}

html.tb1-contrast-high .hp .hp-shine::after,
html.tb1-contrast-high .hp .hp-shine::before {
    display: none;
}

.hp.hp-arming *,
.hp.hp-arming *::before {
    transition: none !important;
}

@keyframes hp-hero-rise {
    from {
        transform: translateY(16px);
    }

    to {
        transform: none;
    }
}

@keyframes hp-glow {
    from {
        transform: scale(.9);
        opacity: .2;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes hp-orb-in {
    from {
        transform: translate(0, 40px) scale(.85);
    }

    to {
        transform: none;
    }
}

@keyframes hp-ring {
    from {
        transform: rotate(-200deg);
    }

    to {
        transform: none;
    }
}

@keyframes hp-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
    }

    100% {
        box-shadow: 0 0 0 9px rgba(52, 211, 153, 0);
    }
}

@keyframes hp-today {
    from {
        box-shadow: 0 0 0 14px color-mix(in srgb, var(--hp-brand) 0%, transparent);
    }

    40% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--hp-brand) 35%, transparent);
    }

    to {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--hp-brand) 0%, transparent);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   รอบ 3 ต.ค. 2569: สมดุลหน้า (ภาพมากขึ้น ตัวอักษรและที่ว่างน้อยลง)
   ภาพทั้งหมดตั้งที่ includes/home_images.php ถ้าไม่มีไฟล์ภาพ ส่วนนั้นเป็นแบบเดิม (ไม่มีคลาส has-photo)
   ═══════════════════════════════════════════════════════════════════════ */

/* ๑ หัวหน้า: ภาพโรงเรียนใต้แผ่นสีน้ำเงิน
   ★ แผ่นสีทึบพอให้ตัวอักษรขาวเกิน 4.5:1 ทุกจุด (ตรวจจากพิกเซลจริงด้านหลังตัวอักษร ไม่ใช่สีเฉลี่ย)
     ซ้ายซึ่งมีชื่อโรงเรียนและช่องค้นหาทึบที่สุด ขวาบนมีการ์ดกระจกเข้มอยู่แล้วจึงเปิดภาพให้เห็นมากกว่า
     ล่างสุดเข้มขึ้นอีกชั้นรองแถบ "โรงเรียนในตัวเลข"
   ★ เบราว์เซอร์ที่ไม่รู้จัก color-mix ทิ้งบรรทัดนี้ทั้งบรรทัด แล้วใช้ไล่เฉดเดิมไม่มีภาพ (ตัวอักษรยังอ่านได้) */
.hp-hero.has-photo {
    background-image:
        linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--hp-hero-a) 60%, transparent) 100%),
        linear-gradient(100deg,
            color-mix(in srgb, var(--hp-hero-a) 94%, transparent) 0%,
            color-mix(in srgb, var(--hp-hero-b) 88%, transparent) 46%,
            color-mix(in srgb, var(--hp-hero-c) 74%, transparent) 100%),
        var(--hp-hero-photo);
    background-size: auto, auto, cover;
    background-position: 0 0, 0 0, center 38%;
    background-repeat: no-repeat;
}

/* จอกลาง (แท็บเล็ต โน้ตบุ๊กเล็ก): คำบรรยายใต้ชื่อยาวไปถึงฝั่งขวาที่ภาพสว่างกว่า แผ่นสีฝั่งขวาจึงทึบขึ้น */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hp-hero.has-photo {
        background-image:
            linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--hp-hero-a) 60%, transparent) 100%),
            linear-gradient(100deg,
                color-mix(in srgb, var(--hp-hero-a) 95%, transparent) 0%,
                color-mix(in srgb, var(--hp-hero-b) 92%, transparent) 46%,
                color-mix(in srgb, var(--hp-hero-c) 86%, transparent) 100%),
            var(--hp-hero-photo);
    }
}

/* จอแคบ: หัวหน้าสูงกว่าจอกว้างหลายเท่า ภาพถูกขยายจนท้องฟ้าสว่างอยู่หลังปุ่มและคำค้น แผ่นสีจึงทึบเท่ากันทั้งแผ่น */
@media (max-width: 767.98px) {
    .hp-hero.has-photo {
        background-image:
            linear-gradient(180deg,
                color-mix(in srgb, var(--hp-hero-a) 94%, transparent) 0%,
                color-mix(in srgb, var(--hp-hero-b) 93%, transparent) 45%,
                color-mix(in srgb, var(--hp-hero-a) 90%, transparent) 100%),
            var(--hp-hero-photo);
        background-size: auto, cover;
        background-position: 0 0, 30% 0;
    }
}

/* ลายตารางและดวงแสงตกแต่งไม่ต้องใช้แล้วเมื่อมีภาพจริง */
.hp-hero.has-photo::after,
.hp-hero.has-photo .hp-hero-fx {
    display: none;
}

/* ๔ กำหนดการ: ปฏิทิน | กิจกรรม สูงเท่ากัน รับสมัคร (ยังไม่เปิดรับ) เป็นแถบบางเต็มความกว้าง
   เดิมการ์ดทั้งสามยืดตามการ์ดกิจกรรม การ์ดปฏิทินและรับสมัครจึงเหลือที่ว่างด้านล่างราว 190 px */
.hp-ev-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.hp .hp-ev-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    align-self: flex-start;
    min-height: 2rem;            /* เป้ากดอย่างน้อย 24 px (WCAG 2.5.8) */
    margin: .35rem 0 0;
    padding: .2rem 8px;
    border-radius: 8px;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-brand);
    text-decoration: none;
}

.hp .hp-ev-more:hover span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hp .hp-ev-more i {
    font-size: .75rem;
}

/* รับสมัครอยู่แถวล่างเต็มความกว้างทุกขนาดจอ (จอ 768 ถึง 1023 px ที่ปฏิทินกับกิจกรรมเคียงกัน ไม่เหลือช่องว่างข้างการ์ด) */
.hp .hp-plan.has-cal.adm-strip .hp-adm {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-cal {
        grid-column: 1;
    }

    .hp .hp-plan.has-cal .hp-cal .hp-panel-body {
        justify-content: space-between;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: stretch;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm .hp-panel-head {
        flex: 0 0 15rem;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-content: center;
        padding: 10px 12px;
        gap: 6px 10px;
        border-bottom: 0;
        border-right: 1px solid var(--hp-line);
        border-radius: var(--hp-r) 0 0 var(--hp-r);
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm .hp-panel-body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        padding: 10px 12px;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm .hp-panel-title {
        grid-column: 2;
        grid-row: 1;
        white-space: nowrap;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm .hp-panel-ic {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm-when {
        justify-content: flex-start;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm-note {
        margin: 0;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-quota {
        display: flex;
        gap: 6px;
        margin: 0;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-quota > div {
        padding: 4px 8px;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm .hp-acts {
        margin: 0 0 0 auto;
        gap: 6px;
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm .hp-btn {
        padding: 7px 10px;
        gap: 6px;
        font-size: var(--tb1-fs-xs, .875rem);
    }

    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-adm .hp-state {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        white-space: nowrap;
        padding: 2px 8px;
        font-size: var(--tb1-fs-xs, .875rem);
    }

    /* ช่วงเปิดรับสมัคร: แถบความคืบหน้าเต็มแถวของแถบรับสมัคร */
    .hp .hp-plan.has-cal.adm-strip:not(.is-3m) .hp-track {
        flex: 1 1 100%;
        order: 9;
    }
}

/* ๕ สารบัญ: แถบภาพบนหัวการ์ดแต่ละกลุ่ม เฉพาะจอตั้งแต่ 768 px
   จอเล็กซ่อนภาพ (display none + loading lazy เบราว์เซอร์จึงไม่โหลด) หน้ามือถือไม่ยาวขึ้น */
.hp-dir-ph {
    display: none;
}

@media (min-width: 768px) {
    .hp-dir-ph {
        display: block;
        width: 100%;
        height: 96px;
        object-fit: cover;
        border-radius: calc(var(--hp-r) - 1px) calc(var(--hp-r) - 1px) 0 0;
        background: var(--hp-paper-alt);
    }

    .hp-dir-g.has-photo .hp-panel-head {
        border-radius: 0;
    }
}

/* ๗ แผนที่: ภาพโรงเรียนด้านบนของช่อง ค่อย ๆ จางเป็นพื้นการ์ดตรงที่มีตัวอักษร (ตัวอักษรอยู่บนพื้นทึบเสมอ) */
.hp-map-cover.has-photo {
    justify-content: flex-end;
    background-image:
        linear-gradient(180deg,
            color-mix(in srgb, var(--hp-paper) 8%, transparent) 0%,
            color-mix(in srgb, var(--hp-paper) 35%, transparent) 30%,
            color-mix(in srgb, var(--hp-paper) 90%, transparent) 55%,
            var(--hp-paper) 70%),
        var(--hp-map-photo);
    background-size: auto, cover;
    background-position: 0 0, center 40%;
    background-repeat: no-repeat;
}

html.tb1-contrast-high .hp .hp-map-cover.has-photo {
    background-image: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ฝุ่น PM2.5 ของโรงเรียนในหัวหน้า (3 ต.ค. 2569) ข้อมูลจาก includes/home_aqm.php
   is-big  แผ่นกระจกมีวงแหวนวัดค่า มุมขวาล่างของคอลัมน์ซ้าย ข้างช่องค้นหา จอ 1440 px ขึ้นไป
           (ความกว้างหน้าเต็ม 1440 แล้ว ข้างช่องค้นหาเหลือที่ราว 240 px คงที่)
   is-pill เม็ดยาต่อท้ายแถวปุ่ม จอเล็กกว่านั้น (ไม่เพิ่มความสูงหัวหน้าที่จอ 1366)
   สีของระดับ (--air) ใช้เฉพาะวงแหวน จุด และขอบ ตัวอักษรเป็นสีขาวบนพื้นกระจกเข้มเสมอ
   ═══════════════════════════════════════════════════════════════════════ */
.hp-hero-main {
    position: relative;
}

.hp .hp-air {
    color: #ffffff;
    text-decoration: none;
}

.hp .hp-air.is-big {
    display: none;
}

/* เม็ดยาในแถวปุ่ม ทรงเดียวกับปุ่มกระจก */
.hp .hp-air.is-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.6rem;
    padding: 0 1rem 0 .3rem;
    background: rgba(2, 6, 23, .28);
    border: 1px solid color-mix(in srgb, var(--air) 70%, #ffffff);
    border-radius: 999px;
    transition: background-color .2s var(--hp-ease), border-color .2s var(--hp-ease);
}

.hp .hp-air.is-pill:hover {
    background: rgba(2, 6, 23, .42);
    border-color: #ffffff;
}

.hp-air-dot {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    color: #0b1220;
    background: var(--air);
    border-radius: 50%;
    font-size: var(--tb1-fs-sm, 1rem);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--air) 35%, transparent);
}

/* ระดับเข้ม (มีผลต่อสุขภาพ อันตราย) ไอคอนขาวบนวงสีเข้ม */
.hp-air.is-lv4 .hp-air-dot,
.hp-air.is-lv5 .hp-air-dot {
    color: #ffffff;
}

.hp-air-line {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    line-height: 1.2;
    white-space: nowrap;
}

.hp-air.is-pill .hp-air-k {
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--hp-on-hero-2);
}

.hp-air.is-pill .hp-air-num {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hp-air.is-pill .hp-air-v {
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
}

/* แผ่นกระจกมีวงแหวน
   ★ 5 ต.ค. 2569: แสดงเมื่อคอลัมน์ซ้ายของหัวหน้ากว้างจริงตั้งแต่ 56rem (เดิมดูจอ 1440 px ซึ่งหน้าแคบ 1280 แล้วทับช่องค้นหา)
   และช่องค้นหา คำค้น คำบรรยาย ถูกจำกัดความกว้างให้เหลือที่ข้างขวาพอสำหรับแผ่นนี้เสมอ ไม่ทับกันทุกความกว้าง */
@container hp-main (min-width: 56rem) {
    .hp-hero-main > .hp-find,
    .hp-hero-main > .hp-sub {
        max-width: min(46rem, calc(100% - 15.5rem));
    }

    .hp .hp-air.is-pill {
        display: none;
    }

    .hp .hp-air.is-big {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .55rem;
        width: 14rem;
        padding: 16px 14px 14px;
        text-align: center;
        background: rgba(2, 6, 23, .3);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: var(--hp-r-lg);
        box-shadow: 0 30px 60px -32px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .14);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        transition: border-color .2s var(--hp-ease), transform .2s var(--hp-ease);
    }

    .hp .hp-air.is-big:hover {
        border-color: rgba(255, 255, 255, .55);
        transform: translateY(-2px);
    }
}

.hp-air-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 7.75rem;
    height: 7.75rem;
    border-radius: 50%;
    /* แสงเรืองจาง ๆ สีของระดับ หลังวงแหวน */
    background: radial-gradient(circle, color-mix(in srgb, var(--air) 26%, transparent) 0%, transparent 68%);
}

.hp-air-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hp-air-track {
    fill: rgba(2, 6, 23, .25);
    stroke: rgba(255, 255, 255, .18);
    stroke-width: 9;
}

.hp-air-arc {
    fill: none;
    stroke: var(--air);
    stroke-width: 9;
    stroke-linecap: round;
    animation: hp-air-fill 1.1s var(--hp-ease) both;
}

@keyframes hp-air-fill {
    from {
        stroke-dasharray: 0 400;
    }
}

.hp-air-in {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.hp-air.is-big .hp-air-num {
    font-family: var(--hp-serif);
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.hp-air-unit {
    font-size: .7rem;
    font-weight: 600;
    color: var(--hp-on-hero-2);
}

.hp-air-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 0;
}

.hp-air.is-big .hp-air-k {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--hp-on-hero-2);
}

.hp-air.is-big .hp-air-v {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 2px 12px 2px 4px;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    background: color-mix(in srgb, var(--air) 22%, rgba(2, 6, 23, .35));
    border: 1px solid color-mix(in srgb, var(--air) 75%, #ffffff);
    border-radius: 999px;
}

.hp-air.is-big .hp-air-v i {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    color: #0b1220;
    background: var(--air);
    border-radius: 50%;
    font-size: .9rem;
}

.hp-air.is-lv4.is-big .hp-air-v i,
.hp-air.is-lv5.is-big .hp-air-v i {
    color: #ffffff;
}

.hp-air.is-big .hp-air-s {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.45;
    color: var(--hp-on-hero-2);
}

/* คอนทราสต์สูง: พื้นดำ ขอบขาว วงแหวนยังเป็นสีของระดับ (ไม่ใช่ตัวอักษร) */
html.tb1-contrast-high .hp .hp-air,
html.tb1-contrast-high .hp .hp-air.is-big .hp-air-v {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.tb1-contrast-high .hp-air-ring {
    background: none;
}

@media (prefers-reduced-motion: reduce) {
    .hp *,
    .hp *::before,
    .hp *::after,
    .hp-top {
        animation: none !important;
        transition: none !important;
    }

    /* ข่าวเด่นยังเปลี่ยนเรื่องเอง (ช้าลง) แต่ไม่มีแถบวิ่ง แถบว่างจึงไม่ต้องแสดง */
    .hp-stage.is-playing .hp-story.is-on .hp-story-bar {
        visibility: hidden;
    }

    .hp .hp-card-in:hover,
    .hp .hp-more:hover i,
    .hp .hp-today-link:hover .hp-today-go,
    .hp .hp-dir-link:hover .hp-dir-go,
    .hp .hp-cl-link:hover .hp-cl-go {
        translate: none;
    }

    .hp .hp-card-in:hover .hp-card-media img,
    .hp .hp-btn:active,
    .hp .hp-chip:active {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   โหมดคอนทราสต์สูง
   ไฟล์กลางบังคับพื้นดำ ตัวอักษรขาว ลิงก์และปุ่มเหลือง ที่นี่เขียนเฉพาะสิ่งที่ไฟล์กลางไม่รู้จัก
   และให้สิ่งที่แยกกันด้วยสีมีรูปทรงรองรับ
   ═══════════════════════════════════════════════════════════════════════ */

html.tb1-contrast-high body.hp-page {
    background: #000000;
}

html.tb1-contrast-high .hp {
    --hp-shadow: none;
    --hp-shadow-float: none;
    --hp-shadow-hover: none;
    --hp-paper: #000000;
    --hp-on-hero-2: #ffffff;
}

html.tb1-contrast-high .hp-hero,
html.tb1-contrast-high .hp-royal {
    background: #000000 !important;
    border-bottom: 3px solid #ffffff;
}

html.tb1-contrast-high .hp-royal {
    border-top-color: #facc15;
}

html.tb1-contrast-high .hp-hero::before,
html.tb1-contrast-high .hp-hero::after,
html.tb1-contrast-high .hp-royal::before,
html.tb1-contrast-high .hp-royal::after,
html.tb1-contrast-high .hp-shots::after {
    display: none;
}

html.tb1-contrast-high .hp :where(.hp-tag, .hp-search-row, .hp-res, .hp-today-card, .hp-facts, .hp-today-link, .hp-today-ic,
    .hp-stage, .hp-story.is-on, .hp-panel, .hp-panel-head, .hp-panel-ic, .hp-pill, .hp-card-in, .hp-card-media,
    .hp-card-kicker, .hp-sec-alt, .hp-quiet, .hp-quiet-ic, .hp-quota > div, .hp-state, .hp-ev-tile, .hp-crit li,
    .hp-awards, .hp-map, .hp-map-pin, .hp-cl-icon, .hp-hit-i, .hp-shots-badge, .hp-royal-kicker, .hp-spark-bar, .hp-fact-ic) {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.tb1-contrast-high .hp :where(.hp-panel-ic, .hp-pill, .hp-card-kicker, .hp-quiet-ic, .hp-ev-tile, .hp-map-pin,
    .hp-cl-icon, .hp-hit-i, .hp-today-ic, .hp-shots-badge, .hp-fact-ic) {
    color: #ffffff !important;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .hp :where(b, dt, dd, time, caption, label, .hp-tag, .hp-fact-k, .hp-fact-v, .hp-fact-s, .hp-band-note,
    .hp-spark-m, .hp-day-m, .hp-day-w, .hp-today-title, .hp-today-k, .hp-today-sub, .hp-story-meta, .hp-card-meta, .hp-panel-sub, .hp-ev-meta, .hp-legend,
    .hp-royal-note, .hp-search-note, .hp-search-label, .hp-chips-k) {
    color: #ffffff !important;
}

html.tb1-contrast-high .hp .hp-tag.is-gold,
html.tb1-contrast-high .hp .hp-royal-kicker {
    color: #facc15 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .hp .hp-search-row {
    border: 2px solid #facc15;
}

html.tb1-contrast-high .hp .hp-search-input {
    color: #ffffff !important;
}

/* ปุ่ม ชิป และลิงก์ที่มีพื้นของตัวเอง: ไฟล์กลางบังคับตัวอักษรเหลือง พื้นจึงต้องดำด้วย
   <button> ตอนชี้ปล่อยให้ไฟล์กลางกลับสีเป็นดำบนเหลืองตามปกติของทั้งเว็บ */
html.tb1-contrast-high .hp :is(.hp-btn, .hp-more, .hp-chip, .hp-play, .hp-res-clear):not(:hover),
html.tb1-contrast-high .hp :is(a.hp-btn, a.hp-more):hover {
    color: #facc15 !important;
    background: #000000 !important;
    border-color: #facc15 !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .hp :is(.hp-today-link, .hp-dir-link, .hp-cl-link, .hp-hit, .hp-story-link, .hp-ev-link):hover {
    background: #000000 !important;
}

html.tb1-contrast-high .hp .hp-today-link:hover,
html.tb1-contrast-high .hp .hp-card-in:hover {
    border-color: #facc15 !important;
    box-shadow: inset 0 0 0 1px #facc15 !important;
}

html.tb1-contrast-high .hp :is(.hp-band-more, .hp-parts-link, .hp-res-google) {
    color: #facc15 !important;
    text-decoration-color: #facc15;
}

/* เรื่องที่อยู่บนเวทีตอนนี้: กรอบเหลืองหนา แทนพื้นอ่อนซึ่งหายไปในโหมดนี้ */
html.tb1-contrast-high .hp .hp-story.is-on {
    outline: 3px solid #facc15;
    outline-offset: -3px;
}

html.tb1-contrast-high .hp .hp-story-bar i {
    background: #facc15;
}

html.tb1-contrast-high .hp .hp-shots {
    outline: 2px solid #ffffff;
}

html.tb1-contrast-high .hp :where(.hp-today-head, .hp-fact, .hp-h, .hp-stories-head,
    .hp-adm-when, .hp-legend, .hp-parts li, .hp-cl li + li) {
    border-color: #ffffff !important;
}

html.tb1-contrast-high .hp .hp-fact + .hp-fact,
html.tb1-contrast-high .hp .hp-fact:nth-child(even) {
    box-shadow: inset 1px 0 0 #ffffff;
}

/* แผ่นปฏิทินกลับเป็นดำบนเหลือง ตัวเลขของวันนี้ยังเด่นที่สุดในการ์ด */
html.tb1-contrast-high .hp .hp-day-n {
    color: #000000 !important;
    background: #facc15;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-day-n::before,
html.tb1-contrast-high .hp-hero-fx {
    display: none;
}

html.tb1-contrast-high .hp .hp-crest-ring {
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-crest-ring::before {
    background: #ffffff;
}

html.tb1-contrast-high .hp .hp-band-title::before,
html.tb1-contrast-high .hp .hp-today-title::before {
    background: #facc15;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-spark-fill,
html.tb1-contrast-high .hp .hp-lead::before {
    background: #ffffff;
}

html.tb1-contrast-high .hp .hp-today-row.is-open .hp-today-v::before {
    background: #facc15;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-today-row.is-wait .hp-today-v::before {
    background: #000000;
    border: 2px solid #facc15;
}

html.tb1-contrast-high .hp .hp-quota > div {
    box-shadow: inset 3px 0 0 #facc15 !important;
}

html.tb1-contrast-high .hp .hp-wd {
    color: #ffffff !important;
    background: #000000 !important;
    border-color: #ffffff;
}

html.tb1-contrast-high .hp .hp-grid {
    border-color: #ffffff;
}

html.tb1-contrast-high .hp .hp-d {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff;
}

html.tb1-contrast-high .hp .hp-d.in-adm {
    background: repeating-linear-gradient(135deg, #000000 0 4px, #3f3f00 4px 6px) !important;
}

html.tb1-contrast-high .hp .hp-d.is-today {
    color: #000000 !important;
    background: #facc15 !important;
}

html.tb1-contrast-high .hp :where(.hp-pip, .hp-key-ev, .hp-key-k, .hp-key-today, .hp-fill) {
    background: #facc15 !important;
}

html.tb1-contrast-high .hp .hp-ev-type::before {
    background: #facc15 !important;
}

/* คอนทราสต์สูง: ไม่มีสีประจำวันและสีประเภท (ประเภทเขียนเป็นคำในคำอธิบายสัญลักษณ์และป๊อปอัป) */
html.tb1-contrast-high .hp .hp-wd {
    box-shadow: inset 0 -3px 0 #ffffff;
}

html.tb1-contrast-high .hp .hp-grid {
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-cal-n {
    color: #ffffff !important;
    background: #000000 !important;
    border-color: #ffffff;
}

html.tb1-contrast-high .hp .hp-d.is-off .hp-d-n,
html.tb1-contrast-high .hp .hp-d.is-off:not(:has(.hp-d-a)) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.tb1-contrast-high .hp .hp-d.is-today .hp-pip {
    background: #000000 !important;
}

html.tb1-contrast-high .hp .hp-d-a:hover,
html.tb1-contrast-high .hp .hp-d-a[aria-expanded="true"] {
    color: #000000 !important;
    background: #ffffff !important;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-d-a:hover .hp-pip,
html.tb1-contrast-high .hp .hp-d-a[aria-expanded="true"] .hp-pip {
    background: #000000 !important;
}

html.tb1-contrast-high .hp .hp-d.is-today .hp-d-a:not(:hover):not([aria-expanded="true"]) {
    background: #facc15 !important;
}

/* กฎคอนทราสต์สูงทั้งเว็บให้ทุกอย่างในลิงก์เป็นสีเหลือง (!important) ตัวเลขบนพื้นเหลืองหรือขาวจึงต้องระบุเอง */
html.tb1-contrast-high .hp .hp-d.is-today .hp-d-a .hp-d-n,
html.tb1-contrast-high .hp .hp-d-a:hover .hp-d-n,
html.tb1-contrast-high .hp .hp-d-a[aria-expanded="true"] .hp-d-n {
    color: #000000 !important;
}

html.tb1-contrast-high .hp .hp-d-a:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: -3px;
}

html.tb1-contrast-high .hp .hp-pop,
html.tb1-contrast-high .hp .hp-pop-arrow {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-pop {
    border-width: 2px;
}

html.tb1-contrast-high .hp :is(.hp-pop-head, .hp-pop-foot) {
    border-color: #ffffff;
}

html.tb1-contrast-high .hp :is(.hp-pop-date, .hp-pop-title, .hp-pop-text, .hp-pop-meta, .hp-pop-x) {
    color: #ffffff;
}

html.tb1-contrast-high .hp :is(.hp-pop-chip, .hp-pop-tag) {
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .hp .hp-pop-chip.is-today {
    color: #000000 !important;
    background: #facc15;
    border-color: #facc15;
}

html.tb1-contrast-high .hp .hp-pop-ev {
    border-left-color: #facc15;
}

html.tb1-contrast-high .hp :is(.hp-pop-go, .hp-pop-all) {
    color: #facc15;
}

html.tb1-contrast-high .hp :is(.hp-pop-ev:hover, .hp-pop-ev:focus-visible, .hp-pop-x:hover) {
    background: #000000;
    outline: 2px solid #facc15;
    outline-offset: -2px;
}

html.tb1-contrast-high .hp .hp-key-adm {
    background: repeating-linear-gradient(135deg, #000000 0 3px, #facc15 3px 4px) !important;
}

html.tb1-contrast-high .hp .hp-bar .is-a,
html.tb1-contrast-high .hp .hp-sw.is-a {
    background: #facc15 !important;
}

html.tb1-contrast-high .hp .hp-bar .is-b,
html.tb1-contrast-high .hp .hp-sw.is-b {
    background: #ffffff !important;
}

html.tb1-contrast-high .hp .hp-bar .is-c,
html.tb1-contrast-high .hp .hp-sw.is-c {
    background: repeating-linear-gradient(135deg, #facc15 0 3px, #000000 3px 6px) !important;
    outline: 1px solid #facc15;
}

html.tb1-contrast-high .hp .hp-bar .is-d,
html.tb1-contrast-high .hp .hp-sw.is-d {
    background: repeating-linear-gradient(45deg, #ffffff 0 3px, #000000 3px 6px) !important;
    outline: 1px solid #ffffff;
}

html.tb1-contrast-high .hp .hp-map {
    background-image: none;
}

html.tb1-contrast-high .hp :focus-visible,
html.tb1-contrast-high .hp .hp-card-link:focus-visible::after,
html.tb1-contrast-high .hp .hp-search-row:focus-within {
    outline-color: #ffffff;
}

html.tb1-contrast-high .hp-top {
    color: #000000;
    background: #facc15;
    border-color: #000000;
}

html.tb1-contrast-high body.hp-page a.hp-skip {
    color: #000000;
    background: #facc15;
}

/* ═══════════════════════════════════════════════════════════════════════
   ฉบับพิมพ์: ชื่อโรงเรียน ตัวเลข ข่าว กำหนดการ สารบัญ รางวัล และที่อยู่ บนพื้นขาว
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    body.hp-page {
        background: #ffffff;
    }

    .hp-pop,
    .hp-legend-tip {
        display: none !important;
    }

    .hp {
        --hp-ink: #000000;
        --hp-ink-2: #1f2937;
        --hp-muted: #374151;
        --hp-paper: #ffffff;
        --hp-paper-alt: #ffffff;
        --hp-line: #cbd5e1;
        --hp-on-hero-2: #1f2937;
        color-scheme: light;
    }

    .hp *,
    .hp *::before,
    .hp *::after {
        animation: none !important;
        transition: none !important;
    }

    .hp .hp-rise,
    .hp [data-hp-reveal] {
        translate: none !important;
    }

    .hp .hp-lead::before,
    .hp .hp-spark-fill,
    .hp .hp-crest-ring::before,
    .hp .hp-bar,
    .hp .hp-fill {
        transform: none !important;
    }

    .hp-air,
    .hp-dir-ph,
    .hp-royal-pics,
    .hp-top,
    .hp-skip,
    .hp-play,
    .hp-story-bar,
    .hp-find,
    .hp-map,
    .hp-hero-acts,
    .hp-more,
    .hp-hero-fx,
    .hp-spark,
    .hp-fact-ic,
    .hp-shots-badge,
    .hp-today-go,
    .hp-dir-go,
    .hp-cl-go,
    .hp-hero::before,
    .hp-hero::after,
    .hp-royal::before,
    .hp-royal::after,
    .tb1-welcome-overlay {
        display: none !important;
    }

    .hp-hero,
    .hp-royal {
        padding-block: 0 12px;
        color: #000000;
        background: #ffffff !important;
        border-color: #000000;
    }

    .hp-hero {
        border-bottom: 2px solid #000000;
    }

    .hp-hero-in {
        display: block;
    }

    .hp-crest-ring {
        width: 3.5rem;
        box-shadow: none;
    }

    .hp-tag,
    .hp-crit li,
    .hp-royal-kicker {
        color: #000000;
        background: #ffffff;
        border-color: #999999;
    }

    .hp-title,
    .hp-title-2,
    .hp-sub,
    .hp-band-title,
    .hp-band-note,
    .hp .hp-band-more,
    .hp-fact-k,
    .hp-fact-v,
    .hp-fact-v b,
    .hp-fact-s,
    .hp-day-m,
    .hp-day-w,
    .hp-today-title,
    .hp-today-k,
    .hp-today-v,
    .hp-today-sub,
    .hp .hp-today-link,
    .hp-royal h2,
    .hp-royal-text,
    .hp-crit i,
    .hp-awards-n b,
    .hp-awards-n span,
    .hp-parts b,
    .hp .hp-parts-link,
    .hp-royal-note {
        color: #000000;
        text-shadow: none;
    }

    .hp-tag.is-gold,
    .hp-royal-kicker {
        color: #000000;
        background: #ffffff;
    }

    /* หน้า A4 กว้างราว 794px ตรงกับกฎจอกลาง การ์ดวันนี้และแถบตัวเลขจึงกำหนดใหม่สำหรับกระดาษ */
    .hp-today-card,
    .hp-facts {
        display: block;
        margin-top: 10px;
        padding: 6px 8px;
        background: #ffffff;
        border-color: #999999;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hp-today-head {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        border-color: #999999;
    }

    .hp-day-n {
        width: auto;
        height: auto;
        padding: 0;
        font-size: 1.3rem;
        color: #000000;
        background: #ffffff;
        box-shadow: none;
    }

    .hp-day-n::before {
        display: none;
    }

    .hp-band {
        margin-top: 12px;
    }

    .hp-facts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hp-fact,
    .hp-fact:nth-child(n + 3) {
        padding: 2px 10px;
        border-top: 0;
        box-shadow: none;
    }

    .hp-fact-v b {
        font-size: 1.4rem;
    }

    .hp-today {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hp .hp-today-link {
        grid-template-columns: minmax(0, 1fr);
        background: #ffffff;
        border-color: #999999;
    }

    .hp-today-ic {
        display: none;
    }

    .hp-stage-sec {
        margin-top: 12px;
    }

    .hp-stage {
        grid-template-columns: 1fr 1fr;
        box-shadow: none;
    }

    .hp-shot:not(.is-on) {
        display: none;
    }

    .hp-sec {
        padding-block: 1rem;
    }

    .hp-sec-alt {
        background: #ffffff;
    }

    .hp-panel,
    .hp-card-in,
    .hp-stage {
        box-shadow: none !important;
        border-color: #999999;
    }

    .hp-panel-head {
        background: #ffffff;
    }

    .hp-awards {
        background: #ffffff;
        border-color: #999999;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* AIA: การ์ดขาวขอบเทา ตัวเลขและเส้นทางรางวัลเป็นตัวดำ */
    .hp-aia-card,
    .hp-aia-stats li,
    .hp .hp-aia-link {
        background: #ffffff !important;
        border-color: #999999 !important;
        box-shadow: none !important;
    }

    .hp-aia-card::before,
    .hp-aia-wave,
    .hp-aia-leaf,
    .hp-aia-t2::after {
        display: none;
    }

    .hp-aia-frame {
        padding: 0;
        background: none;
        box-shadow: none;
        transform: none;
    }

    .hp-aia-in.has-pic {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .hp-aia-path {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hp-aia-title,
    .hp-aia-title span,
    .hp-aia-num b,
    .hp-aia-yr,
    .hp-aia-step-t {
        color: #000000 !important;
    }

    .hp-ev-tile,
    .hp-lead::before,
    .hp-card-media {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .hp-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hp-card,
    .hp-panel,
    .hp-story,
    .hp-aia-step {
        break-inside: avoid;
    }

    .hp-h,
    .hp-h h2 {
        break-after: avoid;
    }

    /* ทั้งส่วนอยู่หน้าเดียวกันเมื่อพอ หัวข้อจึงไม่ค้างท้ายหน้าแยกจากเนื้อหา */
    .hp-sec,
    .hp-royal,
    .hp-stage-sec {
        break-inside: avoid-page;
    }

    .hp-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* หน้าแรก: ระยะกระชับสอดคล้องกับหน้ารายงานของโรงเรียน
   ★ 28 ต.ค. 2569: ระยะส่วนใช้ --tb1-space-section (20 px ที่จอแคบ ถึง 28 px ที่จอกว้าง) ให้ส่วนต่าง ๆ หายใจได้ขึ้นเล็กน้อย
   โทรศัพท์ยังเป็น 16 px ตามกฎข้างล่าง */
@media screen {
    .hp .hp-hero { padding-block: 24px; }
    .hp .hp-sec:not(.hp-aia):not(.hp-kla) { padding-block: var(--tb1-space-section, 20px); }
    .hp .hp-stage-sec + .hp-sec { padding-top: var(--tb1-space-section, 20px); }
    .hp .hp-card { border-radius: var(--hp-r); }
    .hp .hp-unavailable { padding-block: 32px; }
}
.hp-unavailable-card {
    max-width: 48rem;
    margin-inline: auto;
    padding: 20px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: var(--hp-paper);
    color: var(--hp-ink);
}
.hp-unavailable-card h1 { font-size: var(--tb1-fs-2xl, clamp(1.5rem, 1.2rem + 1vw, 1.875rem)); margin-bottom: 10px; }
.hp-unavailable-card p { color: var(--hp-muted); margin-bottom: 14px; }
@media screen and (max-width: 640px) {
    .hp .hp-hero { padding-block: 18px; }
    .hp .hp-sec:not(.hp-aia):not(.hp-kla) { padding-block: 16px; }
}
/* คงพื้นที่สำหรับเวทีข่าวเด่นที่ลอยทับขอบหัวหน้า */
@media screen {
    .hp .hp-hero.has-stage { padding-bottom: clamp(100px, 8.8vw, 132px); }
}
@media screen and (max-width: 640px) {
    .hp .hp-hero.has-stage { padding-bottom: 84px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ๕.๕ คุณภาพการศึกษา (includes/home_quality_card.php)
   14 ต.ค. 2569 ผอ. สั่ง: การ์ดลิงก์ไปหน้า SAR และแนวโน้ม ก่อนกำหนดการ
   ★ 30 ต.ค. 2569 ออกแบบใหม่ตามภาพตัวอย่างของครูหนึ่ง ชุดเดียวกับการ์ด E-PLC AIA ต้นกล้า
   หัวส่วน: ไอคอนหมวกบัณฑิต หัวข้อ คำอธิบาย ปุ่มรายงานทุกปี (ส่วนนี้ไม่มีขีดสีนำแบบหัวส่วนอื่น)
   การ์ดสองใบ แถบสีบนสุด (รายงาน น้ำเงิน · แนวโน้ม เขียว) ลายน้ำไอคอนจาง ๆ กดได้ทั้งใบ (ลิงก์ที่หัวข้อยืดเต็มการ์ด)
   รายงาน: ปกเอียง | แผงภาพรวมพร้อมเหรียญ + 3 มาตรฐานมีไอคอน · กล่องคำอธิบาย · ปุ่มอ่านรายงาน + ปุ่ม PDF
   แนวโน้ม: แท่งรายปี ปกเล็กใต้แท่ง ปีล่าสุดสีเต็ม · แถบเทียบปีก่อน · กล่องคำอธิบาย · ดูแนวโน้ม
   สีของระดับ: ยอดเยี่ยม เขียว · ดีเลิศ น้ำเงินของเว็บ · ดี ฟ้า · ปานกลาง/กำลังพัฒนา ทอง
   ตัวอักษรใช้สีหมึกหรือสีข้อความของธีม สีสดเป็นแท่ง ขีด จุด และไอคอน
   ═══════════════════════════════════════════════════════════════════════ */

.hp-qa {
    padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.hp-qa .lv-5 { --qc: var(--hp-ok-mark); --qt: var(--hp-ok); }
.hp-qa .lv-4 { --qc: var(--hp-brand); --qt: var(--hp-brand); }
.hp-qa .lv-3 { --qc: var(--tb1-accent, #0ea5e9); --qt: var(--hp-ink-2); }
.hp-qa :is(.lv-1, .lv-2) { --qc: var(--hp-gold); --qt: var(--hp-gold-ink); }
.hp-qa .lv-0 { --qc: var(--hp-line-bold); --qt: var(--hp-muted); }

/* หัวส่วน */
.hp-qa-h {
    align-items: center;
    padding-bottom: 0;
    border-bottom: 0;
}

.hp-qa-h-in {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.hp-qa-h-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
    font-size: 1.2rem;
    box-shadow: 0 10px 20px -12px rgba(30, 58, 138, .8);
}

.hp-qa .hp-qa-h h2 {
    font-size: var(--tb1-fs-2xl, clamp(1.5rem, 1.2rem + 1vw, 1.875rem));
    font-weight: 800;
    line-height: 1.2;
}

.hp-qa .hp-qa-h p {
    margin-top: .1rem;
    padding-left: 0;
}

.hp .hp-qa-all {
    min-height: max(44px, 2.9rem);
    padding: 0 1rem;
    background: var(--hp-paper);
    border-color: var(--hp-brand-line);
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, .45);
}

.hp .hp-qa-all > i:first-child {
    font-size: 1.05em;
}

.hp-qa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-gap);
}

.hp-qa-grid:not(.has-trend) {
    max-width: 44rem;
}

@media (min-width: 860px) {
    .hp-qa-grid.has-trend {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.hp-qa-card {
    --qa-tint: var(--hp-brand);
    --qa-pad: clamp(12px, .5rem + .7vw, 18px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
    padding: calc(var(--qa-pad) + 5px) var(--qa-pad) var(--qa-pad);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    background:
        radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--qa-tint) 10%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--qa-tint) 4%, var(--hp-paper)) 0%, var(--hp-paper) 45%);
    box-shadow: var(--hp-shadow);
    transition: border-color .2s var(--hp-ease), box-shadow .2s var(--hp-ease);
    container: hp-qa / inline-size;
}

.hp-qa-card.is-trend {
    --qa-tint: var(--hp-ok-mark);
}

/* แถบสีบนสุดของการ์ด */
.hp-qa-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--hp-brand), var(--tb1-accent, #0ea5e9));
}

.hp-qa-card.is-trend::before {
    background: linear-gradient(90deg, var(--hp-ok-mark), color-mix(in srgb, var(--hp-ok-mark) 50%, var(--tb1-accent, #0ea5e9)));
}

/* ลายน้ำมุมขวาบน (เอกสาร / กราฟเส้น) ไม่ใช่ภาพที่ต้องอ่าน */
.hp-qa-card::after {
    content: "\f15c";
    position: absolute;
    right: -.5rem;
    top: -1.25rem;
    z-index: -1;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 8rem;
    line-height: 1;
    color: color-mix(in srgb, var(--qa-tint) 7%, transparent);
    pointer-events: none;
}

.hp-qa-card.is-trend::after {
    content: "\f201";
}

.hp-qa-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hp-qa-ic {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 12px;
    font-size: 1rem;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    border: 1px solid var(--hp-brand-line);
}

.is-trend .hp-qa-ic {
    color: var(--hp-ok);
    background: color-mix(in srgb, var(--hp-ok-mark) 12%, var(--hp-paper));
    border-color: color-mix(in srgb, var(--hp-ok-mark) 35%, var(--hp-line));
}

.hp-qa-head {
    min-width: 0;
}

.hp-qa-kicker {
    margin: 0 0 1px;
    color: var(--hp-muted);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.4;
}

.hp-qa-title {
    margin: 0;
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 800;
    line-height: 1.3;
}

.hp .hp-qa-link {
    color: var(--hp-heading);
    text-decoration: none;
}

.hp .hp-qa-link span {
    display: inline-block;
    color: var(--hp-brand);
}

/* ทั้งการ์ดเป็นพื้นที่กดของลิงก์หัวข้อ */
.hp-qa-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

@supports selector(:has(a)) {
    .hp .hp-qa-card:has(.hp-qa-link:focus-visible) {
        outline: 3px solid var(--hp-brand);
        outline-offset: 3px;
    }

    .hp .hp-qa-link:focus-visible {
        outline: none;
    }
}

/* ปกเล่ม SAR ของปีล่าสุด วางข้างระดับคุณภาพ เอียงแบบหนังสือวางโชว์ */
.hp-qa-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
}

.hp-qa-body.has-cover {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas: "cover overall" "stds stds";
    align-items: start;
    gap: .6rem .9rem;
}

/* 31 ต.ค. 2569 กระชับ: ปกเล็กลง (เดิม 8–12rem) ความสูงของปกเท่ากับระดับภาพรวมกับมาตรฐาน 3 ด้าน */
@container hp-qa (min-width: 30rem) {
    .hp-qa-body.has-cover {
        grid-template-columns: clamp(6.5rem, 24%, 8.5rem) minmax(0, 1fr);
        grid-template-areas: "cover overall" "cover stds";
        gap: .4rem 1.1rem;
    }
}

.hp-qa-body.has-cover .hp-qa-overall { grid-area: overall; }
.hp-qa-body.has-cover .hp-qa-stds { grid-area: stds; }

.hp-qa-cover {
    grid-area: cover;
    position: relative;
    margin: 6px 0 0 6px;
    rotate: -3deg;
    transform-origin: left bottom;
}

.hp-qa-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px 7px 7px 3px;
    box-shadow: 0 18px 28px -16px rgba(15, 23, 42, .6), 0 3px 8px -2px rgba(15, 23, 42, .2);
}

/* ปีที่ยังไม่มีไฟล์ปก: ปกตัวอักษรสีของเว็บ (พื้นเข้มทั้งสองโหมด ตัวอักษรขาว) */
.hp-qa-blank {
    display: grid;
    place-content: center;
    gap: .2rem;
    aspect-ratio: 360 / 509;
    padding: .6rem;
    border-radius: 3px 7px 7px 3px;
    color: #ffffff;
    text-align: center;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(255, 255, 255, .18) 0%, transparent 60%),
        linear-gradient(165deg, var(--hp-hero-a), var(--hp-hero-b) 55%, var(--hp-hero-c));
    box-shadow: 0 16px 26px -16px rgba(15, 23, 42, .6), 0 3px 8px -2px rgba(15, 23, 42, .2);
}

.hp-qa .hp-qa-blank b {
    font-family: var(--hp-serif);
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: .04em;
    color: #ffffff;
}

.hp-qa-blank small {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.35;
    color: #e0e7ff;
}

/* สันปก: แถบเงาบาง ๆ ด้านซ้าย */
.hp-qa-cover::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg, rgba(15, 23, 42, .28), rgba(15, 23, 42, 0));
    pointer-events: none;
}

/* ระดับภาพรวม: แผงสีตามระดับ เหรียญทางขวา */
.hp-qa-overall {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "k medal" "v medal";
    align-items: center;
    gap: 0 .75rem;
    padding: .4rem .75rem;
    border-radius: var(--hp-r);
    background: linear-gradient(135deg, color-mix(in srgb, var(--qc) 13%, var(--hp-paper)) 0%, color-mix(in srgb, var(--qc) 4%, var(--hp-paper)) 100%);
    border: 1px solid color-mix(in srgb, var(--qc) 30%, var(--hp-line));
}

.hp-qa-k {
    grid-area: k;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--hp-ink-2);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.4;
}

.hp-qa-k i {
    color: var(--hp-brand);
}

.hp-qa .hp-qa-v {
    grid-area: v;
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-2xl, clamp(1.5rem, 1.2rem + 1vw, 1.875rem));
    font-weight: 800;
    line-height: 1.15;
    color: var(--qt);
}

.hp-qa-medal {
    grid-area: medal;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fde68a 0%, #f59e0b 72%);
    color: #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .2), 0 8px 16px -10px rgba(180, 83, 9, .8);
}

.hp-qa-overall:not(.lv-5) .hp-qa-medal {
    background: radial-gradient(circle at 35% 30%, #bfdbfe 0%, #2563eb 75%);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 8px 16px -10px rgba(30, 58, 138, .8);
}

/* มาตรฐาน 3 ด้าน: ไอคอนวงกลม ชื่อมาตรฐาน ระดับพร้อมจุดสีทางขวา */
.hp-qa-stds {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-qa-stds li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .1rem .6rem;
    padding: .3rem 0;
    border-top: 1px solid var(--hp-line);
}

.hp-qa-stds li:first-child {
    border-top: 0;
}

.hp-qa-std-ic {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    color: var(--hp-brand);
    background: var(--hp-brand-soft);
    font-size: .8rem;
}

/* เลขมาตรฐานกับชื่อบรรทัดเดียวกันถ้าพอ ชื่อยาวขึ้นบรรทัดใหม่เอง */
.hp-qa-std-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .45rem;
    min-width: 0;
}

.hp-qa-no {
    color: var(--hp-heading);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    line-height: 1.35;
}

.hp-qa-std {
    color: var(--hp-ink-2);
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.4;
}

.hp-qa .hp-qa-stds b {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    color: var(--qt);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
}

.hp-qa-stds b::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--qc);
}

/* กล่องคำอธิบายพร้อมไอคอน */
.hp-qa-desc {
    display: flex;
    align-items: flex-start;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .4rem .7rem .4rem .45rem;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: color-mix(in srgb, var(--qa-tint) 5%, var(--hp-paper-alt));
    color: var(--hp-ink-2);
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.55;
}

.hp-qa-desc > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 9px;
    background: var(--hp-paper);
    color: var(--hp-brand);
    font-size: .95rem;
}

/* ท้ายการ์ด: ปุ่มอ่านรายงาน (ส่วนหนึ่งของลิงก์ทั้งการ์ด) ปุ่ม PDF แยกกดได้ */
.hp-qa-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
}

.hp-qa-go {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--hp-brand);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
}

.hp-qa-go.is-btn {
    min-height: max(44px, 2.9rem);
    padding: 0 1.2rem;
    border-radius: 999px;
    color: #ffffff;
    background: var(--hp-navy);
    box-shadow: 0 10px 22px -14px var(--hp-navy);
}

.hp .hp-qa-pdf {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: max(44px, 2.9rem);
    padding: 0 1.1rem;
    border: 1px solid var(--hp-line-bold);
    border-radius: 999px;
    background: var(--hp-paper);
    color: var(--hp-heading);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    text-decoration: none;
}

.hp-qa-pdf i {
    color: #dc2626;
    font-size: 1.15em;
}

.hp-qa-pdf small {
    color: var(--hp-muted);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 500;
}

.hp .hp-qa-pdf:hover {
    border-color: var(--hp-brand);
}

/* แท่งระดับภาพรวมรายปี: เส้นจาง 5 เส้น = 5 ระดับ แท่งปีล่าสุดสีเต็ม */
.hp-qa-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: clamp(6px, 1.2vw, 14px);
    margin: 0;
    padding: 8px 10px 4px;
    list-style: none;
    border-radius: var(--hp-r);
    background: var(--hp-paper);
    border: 1px solid var(--hp-line);
    box-shadow: 0 12px 26px -24px rgba(15, 23, 42, .5);
}

.hp-qa-chart li {
    min-width: 0;
    text-align: center;
}

/* แต่ละปีเป็นลิงก์ไปรายงานของปีนั้น อยู่เหนือพื้นที่กดของการ์ด */
.hp .hp-qa-yr {
    position: relative;
    z-index: 2;
    display: block;
    padding: 4px 2px;
    border-radius: var(--hp-r-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color .2s var(--hp-ease);
}

.hp .hp-qa-yr:hover {
    background: var(--hp-brand-soft);
}

.hp .hp-qa-yr:focus-visible {
    outline: 3px solid var(--hp-brand);
    outline-offset: 1px;
}

/* ปกเล็กของแต่ละปี ยืนอยู่ใต้เส้นฐานของแท่ง */
.hp-qa-thumb {
    display: grid;
    place-items: center;
    width: min(2.5rem, 70%);
    aspect-ratio: 120 / 170;
    margin: 6px auto 0;
    overflow: hidden;
    border-radius: 2px 5px 5px 2px;
    border: 1px solid var(--hp-line);
    background: var(--hp-paper);
    box-shadow: 0 8px 14px -10px rgba(15, 23, 42, .55);
}

.hp-qa-thumb picture,
.hp-qa-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-qa-thumb.is-empty {
    color: var(--hp-muted);
    font-size: 1.1rem;
    background: var(--hp-paper-alt);
    border-style: dashed;
    box-shadow: none;
}

.hp-qa-chart .is-last .hp-qa-thumb {
    border-color: var(--qc);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--qc) 35%, transparent), 0 8px 14px -10px rgba(15, 23, 42, .55);
}

.hp-qa-col {
    position: relative;
    display: block;
    height: clamp(52px, 3vw + 26px, 68px);   /* 31 ต.ค. 2569 กระชับ (เดิม 80–104 px) */
    border-bottom: 1px solid var(--hp-line-bold);
    background: repeating-linear-gradient(to top, transparent 0 calc(20% - 1px), color-mix(in srgb, var(--hp-line) 80%, transparent) calc(20% - 1px) 20%);
}

.hp-qa-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: min(34px, 66%);
    height: calc(var(--lv, 0) * 20%);
    margin-inline: auto;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--qc) 50%, var(--hp-paper)), color-mix(in srgb, var(--qc) 34%, var(--hp-paper)));
    transform-origin: center bottom;
}

.hp-qa-chart .is-last .hp-qa-bar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--qc) 80%, #ffffff), var(--qc));
    box-shadow: 0 10px 20px -12px var(--qc);
}

.hp-qa .hp-qa-chart b {
    display: block;
    margin-top: 4px;
    color: var(--hp-heading);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 800;
    line-height: 1.3;
}

.hp-qa-chart small {
    display: block;
    color: var(--hp-muted);
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.3;
}

.hp-qa-chart .is-last small {
    color: var(--qt);
    font-weight: 700;
}

/* แถบเทียบปีก่อน: สีตามทิศทาง ไอคอนในวงกลม */
.hp-qa-note {
    --qn: var(--hp-brand);
    --qn-ink: var(--hp-heading);
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .3rem .8rem .3rem .35rem;
    border-radius: var(--hp-r);
    color: var(--qn-ink);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    line-height: 1.45;
    background: color-mix(in srgb, var(--qn) 11%, var(--hp-paper));
    border: 1px solid color-mix(in srgb, var(--qn) 32%, var(--hp-line));
}

.hp-qa-note.is-up {
    --qn: var(--hp-ok-mark);
    --qn-ink: var(--hp-ok);
}

.hp-qa-note.is-down {
    --qn: var(--hp-gold);
    --qn-ink: var(--hp-gold-ink);
}

.hp-qa-note-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--qn);
    color: #ffffff;
    font-size: .95rem;
}

/* โหมดมืด: ปุ่มกรมท่าของธีมกลืนกับการ์ด ใช้น้ำเงินสดแบบการ์ดอื่น ไอคอน PDF แดงอ่อนลง */
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-qa-go.is-btn {
    background: #1d4ed8;
    box-shadow: none;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-qa-pdf i {
    color: #f87171;
}

@media (hover: hover) {
    .hp .hp-qa-card:hover {
        border-color: var(--hp-brand-line);
        box-shadow: var(--hp-shadow-hover);
    }

    .hp .hp-qa-card:hover .hp-qa-link {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .hp .hp-qa-card:hover .hp-qa-go.is-btn {
        background: color-mix(in srgb, var(--hp-navy) 84%, #000000);
    }
}

@media (max-width: 420px) {
    .hp-qa-card::after {
        font-size: 6.5rem;
    }
}

/* การเคลื่อนไหว: การ์ดเลื่อนขึ้น (hp-rise เดิม) แท่งรายปียืดขึ้นทีละแท่ง ลูกศรขยับเมื่อชี้
   เฉพาะเมื่อไม่ได้ตั้งลดการเคลื่อนไหวและสคริปต์ติด hp-motion แล้ว ไม่มีสถานะจางหาย */
@media screen and (prefers-reduced-motion: no-preference) {
    .hp-qa-card {
        transition: translate .75s var(--hp-ease) var(--hp-d, 0s), border-color .2s var(--hp-ease), box-shadow .2s var(--hp-ease);
    }

    .hp-qa-card.is-trend {
        --hp-d: .08s;
    }

    .hp-qa-bar {
        transition: transform .8s var(--hp-ease) calc(.3s + var(--k, 0) * .09s);
    }

    .hp.hp-motion [data-hp-reveal]:not(.is-in) .hp-qa-bar {
        transform: scaleY(0);
    }

    .hp-qa-go i {
        transition: transform .18s var(--hp-ease);
    }

    /* ปกเล่มตั้งตรงและขยายเล็กน้อยเมื่อชี้การ์ด (translate ยังเป็นของการเลื่อนขึ้นทีละชั้น) */
    .hp-qa-cover {
        transition: translate .7s var(--hp-ease) calc(.06s + var(--st, 0) * .07s), rotate .35s var(--hp-ease), scale .35s var(--hp-ease);
    }

    .hp-qa-thumb {
        transition: scale .25s var(--hp-ease);
    }

    .hp .hp-qa-card:hover .hp-qa-go i:last-child {
        transform: translateX(3px);
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hp .hp-qa-card.is-sar:hover .hp-qa-cover {
        rotate: 0deg;
        scale: 1.03;
    }

    .hp .hp-qa-yr:hover .hp-qa-thumb {
        scale: 1.08;
    }
}

/* คอนทราสต์สูง: ดำ ขาว เหลือง ไม่มีพื้นไล่สีและลายน้ำ ระดับยังอ่านได้จากตัวอักษรและความสูงแท่ง */
html.tb1-contrast-high .hp .hp-qa-card {
    background: #000000 !important;
    border: 2px solid #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-qa-card::before,
html.tb1-contrast-high .hp .hp-qa-card::after {
    display: none;
}

html.tb1-contrast-high .hp :is(.hp-qa-h-ic, .hp-qa-ic, .hp-qa-overall, .hp-qa-medal, .hp-qa-std-ic, .hp-qa-desc, .hp-qa-desc > i,
    .hp-qa-chart, .hp-qa-note, .hp-qa-note-ic, .hp-qa-pdf, .hp-qa-go.is-btn) {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .hp :is(.hp-qa-h-ic, .hp-qa-ic, .hp-qa-ic i, .hp-qa-kicker, .hp-qa-k, .hp-qa-v, .hp-qa-no, .hp-qa-std, .hp-qa-stds b,
    .hp-qa-std-ic i, .hp-qa-note, .hp-qa-note-ic i, .hp-qa-desc, .hp-qa-desc > i, .hp-qa-k i) {
    color: #ffffff !important;
}

html.tb1-contrast-high .hp .hp-qa-medal i {
    color: #facc15 !important;
}

/* ปีในแท่งเป็นลิงก์: ตัวอักษรเหลืองแบบลิงก์ของทั้งเว็บ */
html.tb1-contrast-high .hp :is(.hp-qa-yr b, .hp-qa-yr small, .hp-qa-thumb.is-empty i) {
    color: #facc15 !important;
}

html.tb1-contrast-high .hp :is(.hp-qa-go, .hp-qa-go i) {
    color: #facc15 !important;
}

html.tb1-contrast-high .hp .hp-qa-stds b::before {
    background: #ffffff !important;
}

html.tb1-contrast-high .hp .hp-qa-col {
    background: none;
    border-bottom-color: #ffffff;
}

html.tb1-contrast-high .hp .hp-qa-bar {
    background: #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .hp .hp-qa-chart .is-last .hp-qa-bar {
    background: #facc15 !important;
}

html.tb1-contrast-high .hp :is(.hp-qa-cover img, .hp-qa-thumb) {
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .hp .hp-qa-chart .is-last .hp-qa-thumb {
    border-color: #facc15 !important;
}

html.tb1-contrast-high .hp .hp-qa-cover::after {
    display: none;
}

html.tb1-contrast-high .hp .hp-qa-blank {
    background: #000000 !important;
    border: 2px solid #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .hp :is(.hp-qa-blank b, .hp-qa-blank small) {
    color: #ffffff !important;
}

html.tb1-contrast-high .hp .hp-qa-thumb.is-empty {
    background: #000000 !important;
}

html.tb1-contrast-high .hp .hp-qa-yr:hover {
    background: #000000 !important;
    outline: 2px solid #facc15;
}

@media print {
    .hp-qa-cover {
        rotate: none;
    }

    .hp-qa-card {
        break-inside: avoid;
        background: #ffffff !important;
        border-color: #999999;
        box-shadow: none;
    }

    .hp-qa-card::before,
    .hp-qa-card::after,
    .hp-qa-go,
    .hp-qa-pdf i,
    .hp-qa-medal {
        display: none !important;
    }

    .hp .hp-qa-bar {
        transform: none !important;
    }

    .hp-qa-chart .hp-qa-bar {
        background: #9ca3af;
    }

    .hp-qa-chart .is-last .hp-qa-bar {
        background: #374151;
    }

    .hp-qa-blank {
        color: #000000;
        background: #ffffff !important;
        border: 1px solid #999999;
        box-shadow: none;
    }

    .hp-qa .hp-qa-blank b,
    .hp-qa-blank small {
        color: #000000;
    }
}

/* ชมรมต้นกล้าสี่มหาราช (30 ต.ค. 2569 ออกแบบใหม่): ดำ ขาว เหลือง ไม่มีพื้นไล่สี เส้นพู่กัน และลายภูเขา */
html.tb1-contrast-high .hp :is(.hp-kla-card, .hp-kla-frame, .hp-kla-photo, .hp-kla-eyebrow, .hp-kla-album, .hp-kla-award, .hp-kla-activity,
    .hp-kla-bar, .hp-kla-note, .hp-kla-award-icon, .hp-kla-act-ic) {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.tb1-contrast-high .hp :is(.hp-kla-frame, .hp-kla-award, .hp-kla-activity, .hp-kla-bar, .hp-kla-note, .hp-kla-award-icon, .hp-kla-act-ic) {
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .hp .hp-kla-card { border: 2px solid #ffffff; }
html.tb1-contrast-high .hp .hp-kla-frame { transform: none; }

html.tb1-contrast-high .hp .hp-kla-t1::after,
html.tb1-contrast-high .hp .hp-kla-hills,
html.tb1-contrast-high .hp .hp-kla-award-mark {
    display: none;
}

html.tb1-contrast-high .hp :is(.hp-kla-title, .hp-kla-t1, .hp-kla-t2, .hp-kla-message, .hp-kla-intro, .hp-kla-note, .hp-kla-eyebrow,
    .hp-kla-place, .hp-kla-award-body small, .hp-kla-award-body strong, .hp-kla-award-body > span, .hp-kla-act-body strong, .hp-kla-act-body > span) {
    color: #ffffff !important;
}

html.tb1-contrast-high .hp :is(.hp-kla-eyebrow > i, .hp-kla-title > i, .hp-kla-note > i, .hp-kla-place i, .hp-kla-award-icon i, .hp-kla-act-ic i, .hp-kla-t2) {
    color: #facc15 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้าบนโทรศัพท์ (28 ต.ค. 2569 ครูหนึ่งเลือกข้อ ก ข ค)
   เดิมข่าวเด่นเริ่มที่ราว 1,400 px (1.7 จอ) ก่อนถึงข่าวมีแผงวันนี้ที่โรงเรียน 400 px และแถบตัวเลข 370 px
   ก  แถบ "โรงเรียนในตัวเลข" ฉบับโทรศัพท์อยู่ใต้ข่าวเด่น (.hp-band-sec) ฉบับในหัวหน้า (.has-copy) ซ่อน
   ข  "วันนี้ที่โรงเรียน" แสดงรายการแรก ที่เหลือพับใน <details class="hp-today-more"> (includes/home_view.php)
   ค  คำค้นที่ใช้บ่อยเรียงแถวเดียว ปัดซ้ายขวา
   จอที่กว้างกว่า 640 px เหมือนเดิมทุกอย่าง
   ═══════════════════════════════════════════════════════════════════════ */
.hp-band-sec {
    display: none;
}

.hp-today-more {
    margin-top: 8px;
}

/* จอกว้างแสดงครบไม่มีปุ่ม · ถ้าหมุนโทรศัพท์เป็นแนวนอนขณะพับอยู่ ปุ่มยังอยู่ให้กดเปิด */
.hp-today-more > summary {
    display: none;
}

.hp-today-more:not([open]) > summary {
    display: flex;
}

.hp-today-more > summary::-webkit-details-marker {
    display: none;
}

.hp .hp-today-toggle {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tb1-tap, 44px);
    padding: 0 16px;
    list-style: none;
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--tb1-radius-pill, 999px);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    cursor: pointer;
}

.hp .hp-today-toggle:hover {
    background: rgba(255, 255, 255, .18);
}

.hp-today-more[open] .hp-today-toggle-open,
.hp-today-more:not([open]) .hp-today-toggle-close {
    display: none;
}

.hp-today-toggle i {
    transition: transform var(--tb1-dur, .2s) var(--tb1-ease, ease);
}

.hp-today-more[open] .hp-today-toggle i {
    transform: rotate(180deg);
}

.hp-today-more[open] > summary + .hp-today {
    margin-top: 8px;
}

@media (max-width: 640px) {
    .hp .hp-band.has-copy {
        display: none;
    }

    /* พื้นน้ำเงินชุดเดียวกับหัวหน้า ตัวอักษรขาวของแถบตัวเลขจึงเกิน 4.5:1 เหมือนเดิม */
    .hp-band-sec {
        display: block;
        position: relative;
        padding-block: 20px 22px;
        color: #ffffff;
        background-color: var(--hp-hero-b);
        background-image: linear-gradient(135deg, var(--hp-hero-a) 0%, var(--hp-hero-b) 52%, var(--hp-hero-c) 100%);
    }

    .hp-band-sec .hp-band {
        margin-top: 0;
    }

    /* เปิดแล้วกดซ่อนกลับได้ */
    .hp-today-more > summary {
        display: flex;
    }

    .hp-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 10px 0 0;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
        mask-image: linear-gradient(90deg, #000 86%, transparent);
    }

    .hp-chips::-webkit-scrollbar {
        display: none;
    }

    .hp-chips > * {
        flex: none;
    }
}

html.tb1-contrast-high .hp-band-sec {
    background: #000000 !important;
    border-block: 3px solid #ffffff;
}

html.tb1-contrast-high .hp .hp-today-toggle {
    background: #000000 !important;
    border-color: #ffffff !important;
}

/* ═══ ๔.๕ ๑ โรงเรียน ๓ รูปแบบ (includes/home_eplc_card.php · 29 ต.ค. 2569 · ออกแบบใหม่ตามภาพตัวอย่าง 30 ต.ค. 2569) ═══
   ลูกทุกชิ้นของ .hp-eplc-card อยู่ในกริดเดียว ผังดูความกว้างจริงของส่วน (container query hp-eplc) ไม่ใช่ความกว้างจอ
     ต่ำกว่า 640 px  ภาพเป็นแถบบน ลายมือ ก กับ ค ทับบนภาพ การ์ดเรียงแถวเดียว ปุ่มเต็มแถว ปิดท้ายด้วยลายมือ ข ข้างลายเส้นเมือง
     ★ 30 ต.ค. 2569 ครูหนึ่งขอให้กระชับ: หัวข้อ ไอคอน ระยะ และแถบภาพเล็กลง ความสูงลดราวหนึ่งในสาม
     640–979 px     ภาพแถบกว้าง การ์ดสามคอลัมน์ ตัวเลขสองคอลัมน์ ลายมือ ข อยู่ข้างลายเส้นเมือง
     980 px ขึ้นไป   ข้อความซ้ายราว 70% ภาพผู้เรียนจางเข้าทางขวาเต็มความสูง ลายมือลอยบนภาพ ลายเส้นเมืองมุมล่างขวา
   เบราว์เซอร์ที่ไม่รู้จัก container query ได้ผังจอแคบ (เรียงลงทีละชิ้น ไม่ซ้อนกัน)
   ★ ลูกที่ position: absolute ในกริดต้องคืน grid-area เป็น auto ไม่งั้นกรอบอ้างอิงเป็นช่องกริดแทนตัวการ์ด
   ลายมือ: --hp-eplc-hand ถ้าเครื่องไม่มีฟอนต์ลายมือได้ฟอนต์หัวเรื่องแทน (ยังเอียงและมีสีแบบเดิม)
   ธีมบังคับฟอนต์บน p/span/strong ด้วย !important ฟอนต์ของลายมือ ป้ายชื่อ และตัวเลขที่นี่จึงต้องใช้ !important
   สี: น้ำเงิน = สีแบรนด์ เขียว = สีสำเร็จของธีม ป้ายชื่อสีทึบใช้สีคงที่ที่ตัวอักษรขาวเกิน 4.5:1 ทั้งสองโหมด */
/* ฟอนต์ลายมือ Sriracha (30 ต.ค. 2569) เฉพาะชุดอักษรไทย 14 KB ไฟล์อยู่ที่ fonts/ สัญญาอนุญาต OFL ดู fonts/OFL.txt
   ใช้ที่ข้อความลายมือของส่วนนี้ที่เดียว ประกาศที่นี่ไม่ใช่ fonts/tb1-fonts.css เพราะไม่ใช่ฟอนต์ของทั้งเว็บ
   เบราว์เซอร์โหลดเมื่อหน้ามีตัวอักษรไทยในฟอนต์นี้เท่านั้น สัญลักษณ์ … ได้ฟอนต์หัวเรื่องแทน */
@font-face {
    font-family: 'Sriracha';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/sriracha-thai-400.woff2') format('woff2');
    unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
.hp-eplc {
    --hp-eplc-green: var(--tb1-success, #10b981);
    --hp-eplc-green-deep: var(--tb1-success-deep, #059669);
    --hp-eplc-green-ink: var(--tb1-text-success, #047857);
    --hp-eplc-green-soft: color-mix(in srgb, var(--hp-eplc-green) 13%, var(--hp-paper));
    --hp-eplc-blue-soft: color-mix(in srgb, var(--hp-brand) 11%, var(--hp-paper));
    --hp-eplc-pill-green: #047857;
    --hp-eplc-pill-blue: #1d4ed8;
    --hp-eplc-mark: color-mix(in srgb, var(--tb1-accent, #0ea5e9) 20%, var(--hp-paper));
    --hp-eplc-brush: color-mix(in srgb, var(--hp-eplc-green) 18%, var(--hp-paper));   /* 24% ตัวอักษรเขียวเหลือ 4.4:1 */
    --hp-eplc-hand: 'Sriracha', var(--hp-serif);
    --hp-eplc-pad: clamp(14px, 1.8vw, 24px);
    padding-block: 0 16px;
}
.hp-eplc > .hp-wrap { container: hp-eplc / inline-size; }

.hp-eplc-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pic" "kick" "title" "text" "mods" "stats" "acts" "outro";
    gap: 10px;
    padding: var(--hp-eplc-pad);
    overflow: hidden;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    background:
        radial-gradient(80% 42% at 0% 100%, color-mix(in srgb, var(--hp-eplc-green) 11%, transparent), transparent 72%),
        radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--hp-brand) 6%, transparent), transparent 72%),
        var(--hp-paper);
    box-shadow: var(--hp-shadow);
}

/* ป้ายเล็กและหัวข้อ */
.hp-eplc-kicker {
    grid-area: kick;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
}
.hp-eplc-kicker > i { color: var(--hp-eplc-green); font-size: var(--tb1-fs-lg, 1.25rem); transform: rotate(-8deg); }
.hp-eplc-kicker > span {
    padding: .25em .9em;
    border-radius: 999px;
    background: var(--hp-eplc-green-soft);
    color: var(--hp-heading);
    line-height: 1.4;
}
.hp-eplc-title { grid-area: title; display: grid; gap: .3rem; justify-items: start; margin: 0; color: var(--hp-heading); }
.hp-eplc-t1 {
    display: block;
    font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem));
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.hp-eplc-t1 .is-one { color: var(--hp-brand); font-weight: inherit; }
.hp-eplc-t1 .is-three { color: var(--hp-eplc-green-ink); font-weight: inherit; }
.hp-eplc-t2 {
    display: block;
    font-size: var(--tb1-fs-xl, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
}
/* แถบปากกาเน้น: มุมไม่เท่ากันให้ขอบดูเหมือนลากด้วยมือ */
.hp-eplc-mark {
    padding: .04em .45em .14em;
    margin-inline-start: -.2em;
    border-radius: 6px 18px 8px 22px / 18px 8px 18px 6px;
    background: var(--hp-eplc-mark);
    font-weight: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.hp-eplc-nw { font-weight: inherit; white-space: nowrap; }   /* ตัวอักษรใหญ่ขึ้นบรรทัดหลัง "คนไหน" ไม่ตัดกลาง "ข้างหลัง" */
/* หัวใจเป็น inline ไม่มีช่องว่างคั่น จึงขึ้นบรรทัดใหม่พร้อมคำสุดท้ายเสมอ ไม่หลุดไปอยู่บรรทัดเดียว */
.hp .hp-eplc-t2 > i { display: inline; margin-inline-start: .4em; color: var(--hp-eplc-green); font-size: .9em; }
.hp-eplc-text { grid-area: text; max-width: 74ch; margin: 0; color: var(--hp-ink-2); font-size: var(--tb1-fs-sm, 1rem); line-height: 1.6; text-wrap: pretty; }

/* การ์ด ๓ รูปแบบ: ไอคอนวงกลมซ้าย ชื่อรูปแบบ ป้ายชื่อสีทึบ คำอธิบาย (การ์ดแคบกว่า 250 px ไอคอนขึ้นบน) */
.hp-eplc-models { grid-area: mods; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-eplc-m {
    --hp-eplc-tone: var(--hp-eplc-green-deep);
    --hp-eplc-tone-soft: var(--hp-eplc-green-soft);
    --hp-eplc-pill: var(--hp-eplc-pill-green);
    min-width: 0;
    container: hp-eplc-m / inline-size;
}
.hp-eplc-m.is-blue {
    --hp-eplc-tone: var(--hp-brand);
    --hp-eplc-tone-soft: var(--hp-eplc-blue-soft);
    --hp-eplc-pill: var(--hp-eplc-pill-blue);
}
.hp .hp-eplc-model {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ic type" "ic name" "ic for";
    align-content: start;
    gap: 3px 10px;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--hp-eplc-tone) 22%, var(--hp-line));
    border-radius: var(--hp-r);
    background: color-mix(in srgb, var(--hp-eplc-tone-soft) 86%, transparent);
    color: var(--hp-ink);
    text-decoration: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hp-eplc-ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--hp-eplc-tone);
    color: #ffffff;
    font-size: var(--tb1-fs-md, 1.125rem);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hp-eplc-tone) 16%, transparent);
}
.is-blue .hp-eplc-ic { background: color-mix(in srgb, var(--hp-brand) 18%, var(--hp-paper)); color: var(--hp-brand); }
.hp-eplc-type { grid-area: type; color: var(--hp-heading); font-size: var(--tb1-fs-xs, .875rem); font-weight: 700; line-height: 1.45; }
.hp .hp-eplc-name {
    grid-area: name;
    justify-self: start;
    padding: .2em .75em .26em;
    border-radius: 10px 18px 12px 20px / 16px 10px 18px 10px;
    background: var(--hp-eplc-pill);
    color: #ffffff;
    font-family: var(--hp-serif) !important;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    line-height: 1.4;
    transform: rotate(-1.5deg);
}
.hp-eplc-for { grid-area: for; color: var(--hp-ink-2); font-size: var(--tb1-fs-xs, .875rem); line-height: 1.5; }
@container hp-eplc-m (max-width: 250px) {
    .hp .hp-eplc-model { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "type" "name" "for"; }
    .hp-eplc-ic { width: 2.3rem; height: 2.3rem; font-size: var(--tb1-fs-sm, 1rem); }
}

/* แถบตัวเลข */
.hp-eplc-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 2px 14px;
    list-style: none;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: color-mix(in srgb, var(--hp-paper) 84%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hp-eplc-stats li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 0; }
.hp-eplc-stats li + li { border-top: 1px solid var(--hp-line); }
.hp-eplc-stat-ic { flex: none; width: 2.4rem; color: var(--hp-brand); font-size: 1.8rem; line-height: 1; text-align: center; }
.hp-eplc-stats .is-blue .hp-eplc-stat-ic { color: var(--hp-heading); }
.hp-eplc-stat-body { display: grid; gap: 2px; min-width: 0; }
.hp-eplc-num {
    color: var(--hp-eplc-green-ink);
    font-size: var(--tb1-fs-2xl, clamp(1.5rem, 1.2rem + 1vw, 1.875rem));
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}
.hp-eplc-num > b { font-weight: inherit; }
.hp-eplc-stats .is-blue .hp-eplc-num { color: var(--hp-heading); }
.hp-eplc-stat-body > span { color: var(--hp-ink-2); font-size: var(--tb1-fs-xs, .875rem); line-height: 1.45; }

/* ปุ่ม: สูงอย่างน้อย 44 px แม้ผู้ใช้ย่อตัวอักษร */
.hp-eplc-acts { grid-area: acts; gap: 10px 12px; }
.hp .hp-eplc-btn {
    min-height: max(44px, 2.9rem);
    padding: 0 .6rem 0 1rem;
    gap: .55rem;
    border-width: 2px;
    font-size: var(--tb1-fs-sm, 1rem);
}
.hp .hp-eplc-btn.hp-btn-line { border-color: var(--hp-brand); background: color-mix(in srgb, var(--hp-paper) 88%, transparent); }
.hp .hp-eplc-btn.hp-btn-line:hover { background: var(--hp-brand-soft); }
.hp-eplc-go { margin-inline-start: .15rem; font-size: 1.2em; }

/* ภาพผู้เรียน: จอแคบเป็นแถบบนเต็มขอบการ์ด ฝั่งซ้ายและล่างจางเข้าพื้นการ์ดให้ลายมืออ่านได้
   จางด้วย mask ที่ตัวภาพ (ไม่ใช่ม่านสีขาวทับ) พื้นการ์ดที่มีเฉดอ่อนจึงต่อเนื่อง ไม่เห็นรอยขอบภาพ
   กรอบภาพจึงต้องไม่มีพื้นของตัวเอง */
.hp-eplc-pic {
    grid-area: pic;
    position: relative;
    aspect-ratio: 2 / 1;
    margin: calc(-1 * var(--hp-eplc-pad)) calc(-1 * var(--hp-eplc-pad)) 0;
    overflow: hidden;
}
/* ขอบขวาสุดของภาพต้นฉบับเป็นขาตั้งป้ายสีเทา จุดโฟกัสจึงไม่ชิดขวาสุด */
.hp-eplc-pic img {
    --hp-eplc-fade-x: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .35) 26%, #000 62%);
    --hp-eplc-fade-y: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .45) 14%, #000 34%);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 76% 30%;
    -webkit-mask-image: var(--hp-eplc-fade-x), var(--hp-eplc-fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--hp-eplc-fade-x), var(--hp-eplc-fade-y);
    mask-composite: intersect;
}

/* ข้อความลายมือ: ตัวอักษรจริง เอียงเล็กน้อย มีขอบสีพื้นการ์ดรอบตัวอักษรเพื่อให้อ่านได้บนภาพ */
.hp .hp-eplc-note {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--hp-heading);
    font-family: var(--hp-eplc-hand) !important;
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 400;   /* Sriracha มีน้ำหนักเดียว น้ำหนักอื่นเบราว์เซอร์ทำตัวหนาเทียม */
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;   /* ขึ้นบรรทัดตาม <br> ในไฟล์การ์ดเท่านั้น ไม่ตัดกลางคำ */
    text-shadow: 0 0 2px var(--hp-paper), 0 0 6px var(--hp-paper), 0 0 14px var(--hp-paper);
    transform: rotate(-6deg);
}
.hp .hp-eplc-note > i { display: inline; margin-inline-start: .3em; color: var(--hp-eplc-green); font-size: .8em; }   /* inline: หัวใจติดคำสุดท้ายเสมอ */
.hp-eplc-note.is-a::after,
.hp-eplc-note.is-b::after {
    content: "";
    display: block;
    width: 78%;
    height: .45em;
    margin: .05em auto 0;
    border-bottom: 2px solid var(--hp-eplc-green-ink);
    border-radius: 0 0 60% 40% / 0 0 100% 100%;
}
.hp .hp-eplc-note.is-a { grid-area: pic; align-self: start; justify-self: start; margin-top: 1.7rem; }
/* ลายมือ ข อยู่ซ้ายของลายเส้นเมืองในแถวสุดท้าย (ทุกความกว้างที่ยังไม่ใช่จอกว้าง) */
.hp .hp-eplc-note.is-b { grid-area: outro; align-self: center; justify-self: start; margin: 0; color: var(--hp-eplc-green-ink); transform: rotate(-4deg); }
/* แถบพู่กันสีเขียว */
.hp .hp-eplc-note.is-c {
    grid-area: pic;
    align-self: end;
    justify-self: start;
    margin-bottom: 10px;
    padding: .3em .9em .4em;
    border-radius: 18px 42px 22px 46px / 30px 14px 34px 12px;
    background: var(--hp-eplc-brush);
    color: var(--hp-eplc-green-ink);
    text-shadow: none;
    transform: rotate(-5deg);
}
.hp-eplc-plane {
    position: absolute;
    bottom: calc(100% - .5rem);
    left: 58%;
    width: 3.4rem;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: var(--hp-brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hp-eplc-plane .is-trail { stroke-dasharray: 3 5; }

/* ลายเส้นเมืองตาก: วาดในไฟล์การ์ด ชิดขวาล่างของการ์ด */
.hp-eplc-city {
    grid-area: outro;
    justify-self: end;
    display: block;
    width: calc(64% + var(--hp-eplc-pad));
    max-width: none;
    height: auto;
    margin: 0 calc(-1 * var(--hp-eplc-pad)) calc(-1 * var(--hp-eplc-pad)) 0;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.hp-eplc-city .is-hill { fill: color-mix(in srgb, var(--hp-eplc-green) 20%, var(--hp-paper)); }
.hp-eplc-city .is-far { stroke: color-mix(in srgb, var(--hp-brand) 38%, var(--hp-paper)); stroke-width: 1.6; }
.hp-eplc-city .is-water { stroke: color-mix(in srgb, var(--tb1-accent, #0ea5e9) 55%, var(--hp-paper)); stroke-width: 2; }
.hp-eplc-city .is-line { stroke: color-mix(in srgb, var(--hp-brand) 78%, var(--hp-paper)); stroke-width: 2; }
.hp-eplc-city .is-tree { stroke: var(--hp-eplc-green-ink); stroke-width: 2; }
.hp-eplc-city .is-fill { fill: var(--hp-paper); }
.hp-eplc-city .is-tree.is-fill { fill: color-mix(in srgb, var(--hp-eplc-green) 32%, var(--hp-paper)); }

@media (hover: hover) {
    .hp .hp-eplc-model:hover { border-color: var(--hp-eplc-tone); background: var(--hp-eplc-tone-soft); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hp .hp-eplc-model { transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
    .hp .hp-eplc-model:hover { transform: translateY(var(--tb1-lift, -3px)); }
}

/* จอแคบมาก: ปุ่มเต็มแถว ลูกศรชิดขวา */
@container hp-eplc (max-width: 639px) {
    /* แถบภาพเตี้ย: ลายมือ ก เหลือสองบรรทัด "โอกาสทางการศึกษา / คือสิทธิของทุกคน" ไม่ชนลายมือ ค */
    .hp-eplc-note.is-a br:first-of-type { display: none; }
    .hp .hp-eplc-btn { width: 100%; }
    .hp-eplc-btn > span { flex: 1 1 auto; text-align: start; }
}

/* 640 px ขึ้นไป: ภาพแถบกว้าง การ์ดสามคอลัมน์ ตัวเลขสองคอลัมน์ ลายมือ ข อยู่ข้างลายเส้นเมือง */
@container hp-eplc (min-width: 640px) {
    .hp-eplc-card { gap: 12px; }
    .hp-eplc-pic { aspect-ratio: 5 / 2; }
    .hp-eplc-pic img { object-position: 32% 30%; }
    .hp .hp-eplc-note.is-a { margin: 2.3rem 0 0 4%; font-size: var(--tb1-fs-lg, 1.25rem); }
    .hp .hp-eplc-note.is-c { margin: 0 0 14px 4%; font-size: var(--tb1-fs-lg, 1.25rem); }
    .hp-eplc-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp-eplc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 8px; }
    .hp-eplc-stats li { padding: 8px 12px; }
    .hp-eplc-stats li + li { border-top: 0; border-inline-start: 1px solid var(--hp-line); }
    .hp .hp-eplc-note.is-b { grid-area: outro; align-self: center; justify-self: start; margin: 0 0 0 4%; }
    .hp-eplc-city { width: calc(48% + var(--hp-eplc-pad)); }
}

/* 980 px ขึ้นไป: ข้อความซ้าย ภาพผู้เรียนจางเข้าทางขวาเต็มความสูง (แบบภาพตัวอย่าง) */
@container hp-eplc (min-width: 980px) {
    .hp-eplc-card {
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
        grid-template-areas:
            "kick  kick  notea ."
            "title title notea ."
            "text  text  text  ."
            "mods  mods  mods  ."
            "stats stats stats ."
            "acts  acts  acts  .";
        gap: 10px 14px;
    }
    .hp-eplc-card > :is(.hp-eplc-kicker, .hp-eplc-title, .hp-eplc-text, .hp-eplc-models, .hp-eplc-stats, .hp-eplc-acts) { position: relative; z-index: 1; }
    .hp-eplc-t2 { font-size: var(--tb1-fs-2xl, clamp(1.5rem, 1.2rem + 1vw, 1.875rem)); }
    .hp-eplc-pic {
        grid-area: auto;
        position: absolute;
        z-index: -1;
        inset: 0 0 auto auto;
        width: 52%;
        height: 78%;
        aspect-ratio: auto;
        margin: 0;
    }
    .hp-eplc-pic img {
        --hp-eplc-fade-x: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 16%, #000 48%);
        --hp-eplc-fade-y: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .28) 16%, #000 40%);
        object-position: 78% 50%;
    }
    .hp .hp-eplc-note.is-a { grid-area: notea; align-self: center; justify-self: center; margin: 1.8rem 0 0; font-size: var(--tb1-fs-xl, 1.5rem); }
    /* ลายมือ ข อยู่บนส่วนที่ภาพไม่จาง จึงมีแผ่นกระดาษฝ้ารองให้อ่านได้ทุกส่วนของภาพ */
    .hp .hp-eplc-note.is-b {
        grid-area: auto;
        position: absolute;
        top: 4%;
        right: 1.5%;
        margin: 0;
        padding: .35em .8em .2em;
        border-radius: 14px 22px 16px 26px / 20px 12px 22px 14px;
        background: color-mix(in srgb, var(--hp-paper) 80%, transparent);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        font-size: var(--tb1-fs-lg, 1.25rem);
        transform: rotate(-6deg);
    }
    .hp .hp-eplc-note.is-c { grid-area: auto; position: absolute; right: 4%; bottom: 19%; margin: 0; font-size: var(--tb1-fs-xl, 1.5rem); }
    .hp-eplc-city { grid-area: auto; position: absolute; right: 0; bottom: 0; width: 30%; margin: 0; }
}

/* โหมดมืด: ป้ายและปุ่มน้ำเงินทึบใช้น้ำเงินสด (กรมท่าของธีมกลืนกับพื้นการ์ด) ตัวอักษรขาวยังเกิน 4.5:1 */
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-eplc {
    --hp-eplc-pill-blue: #2563eb;
    --hp-eplc-mark: color-mix(in srgb, var(--tb1-accent, #38bdf8) 24%, var(--hp-paper));
}
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-eplc .hp-btn-brand {
    background: #1d4ed8;
    border-color: #3b82f6;
}
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .hp .hp-eplc .hp-btn-brand:hover {
    background: #1e40af;
}

/* คอนทราสต์สูง: ดำ ขาว เหลือง ไม่มีพื้นไล่สีและพื้นโปร่ง ลายมือมีกรอบ ภาพไม่มีม่านจาง */
html.tb1-contrast-high .hp .hp-eplc-card { background: #000000 !important; border: 2px solid #ffffff; box-shadow: none; }
html.tb1-contrast-high .hp .hp-eplc-pic img { -webkit-mask-image: none; mask-image: none; }
/* ไม่มีภาพจางแล้ว ภาพจึงหดให้อยู่ขวาของข้อความทั้งหมด ตัวอักษรไม่ทับภาพ */
@container hp-eplc (min-width: 980px) {
    html.tb1-contrast-high .hp .hp-eplc-pic { width: 29%; }
}
html.tb1-contrast-high .hp :is(.hp-eplc-model, .hp-eplc-stats, .hp-eplc-kicker > span, .hp-eplc-name, .hp-eplc-mark, .hp-eplc-ic) {
    background: #000000 !important;
    border: 1px solid #ffffff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.tb1-contrast-high .hp .hp-eplc-stats li + li { border-color: #ffffff; }
html.tb1-contrast-high .hp .hp-eplc-note {
    padding: .3em .7em;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background: #000000 !important;
    color: #ffffff !important;
    text-shadow: none;
}
html.tb1-contrast-high .hp .hp-eplc-note::after { border-color: #ffffff; }
html.tb1-contrast-high .hp :is(.hp-eplc-kicker > i, .hp-eplc-t1 .is-one, .hp-eplc-t1 .is-three, .hp-eplc-t2 > i, .hp-eplc-num,
    .hp-eplc-num > b, .hp-eplc-stat-ic, .hp-eplc-note > i) { color: #facc15 !important; }
html.tb1-contrast-high .hp .hp-eplc-plane { display: none; }
/* ลายมือมีกรอบแล้วสูงขึ้น จอแคบเลื่อน ก ขึ้นชิดบนไม่ให้ชน ค */
@container hp-eplc (max-width: 639px) {
    html.tb1-contrast-high .hp .hp-eplc-note.is-a { margin-top: 0; }
}
html.tb1-contrast-high .hp .hp-eplc-city :is(.is-line, .is-tree, .is-far, .is-water) { stroke: #ffffff; }
html.tb1-contrast-high .hp .hp-eplc-city :is(.is-fill, .is-hill) { fill: #000000; }

/* ═══════════════════════════════════════════════════════════════════════
   ๑.๕ แผงโรงเรียนพระราชทานในหัวหน้า (includes/home_royal_panel.php · 30 ต.ค. 2569 ครูหนึ่งสั่งย้ายเข้าหัวหน้า)
   ออกแบบตามภาพตัวอย่าง: แผงกระจกบนน้ำเงินของหัวหน้า เส้นทองบนสุด มงกุฎจางเป็นลายน้ำ
   ซ้าย: ป้ายมงกุฎ หัวข้อพร้อมเส้นทองและเพชร คำอธิบาย เกณฑ์ 5 ด้าน ปุ่มสองปุ่ม | กลาง: ภาพในกรอบทอง | ขวา: ถ้วย จำนวนรางวัลสีทอง
   ผังดูความกว้างของแผงเอง (container hp-honor): 1000 px ขึ้นไปสามคอลัมน์ · 600 px ขึ้นไปข้อความบน ภาพกับตัวเลขคู่กัน · แคบกว่านั้นเรียงลง
   31 ต.ค. 2569 ครูหนึ่งสั่ง: โทรศัพท์แสดงแผงในหัวหน้าก่อนข่าวเด่น ทุกจอใช้ฉบับเดียว (เลิกวาดฉบับใต้ข่าวเด่น)
   สีทองและขาวคงที่ทั้งสองโหมดเพราะพื้นหัวหน้าเข้มทั้งสองโหมด
   ═══════════════════════════════════════════════════════════════════════ */
.hp-honor {
    --hp-honor-line: rgba(253, 230, 138, .45);
    position: relative;
    isolation: isolate;
    margin-top: clamp(20px, 2.4vw, 30px);
    padding: clamp(16px, 1.6vw, 24px);
    overflow: hidden;
    color: #ffffff;
    border: 1px solid var(--hp-honor-line);
    border-radius: var(--hp-r-lg);
    background:
        radial-gradient(55% 80% at 100% 0%, rgba(253, 230, 138, .13) 0%, transparent 60%),
        radial-gradient(45% 70% at 0% 100%, rgba(56, 189, 248, .12) 0%, transparent 60%),
        rgba(2, 6, 23, .24);
    box-shadow: 0 26px 52px -32px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    container: hp-honor / inline-size;
}

/* เส้นทองบนสุด */
.hp-honor::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #fde68a 18%, #f59e0b 50%, #fde68a 82%, transparent 100%);
}

/* มงกุฎจาง ๆ เป็นลายน้ำ ไม่ใช่ภาพที่ต้องอ่าน */
.hp-honor::after {
    content: "\f521";
    position: absolute;
    left: -1.5rem;
    bottom: -3.5rem;
    z-index: -1;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12rem;
    line-height: 1;
    color: rgba(255, 255, 255, .045);
    pointer-events: none;
}

.hp-honor :focus-visible {
    outline-color: #ffffff;
}

/* 31 ต.ค. 2569 แถวบนของหัวหน้าเอาออก (ครูหนึ่งสั่ง) แล้วนำช่องค้นหากลับมาไว้บนสุด
   ช่องค้นหาเป็นสิ่งแรกต่อจาก h1 ที่ซ่อนไว้ (ถ้าไม่มีช่องค้นหา แผงหรือแถบตัวเลขขึ้นแทน) ไม่ต้องเว้นระยะบน
   แถบตัวเลขไม่มีแถวหัวแล้วจึงชิดแผงขึ้น */
.hp-hero-in > .sr-only:first-child + .hp-find,
.hp-hero-in > .sr-only:first-child + .hp-honor,
.hp-hero-in > .sr-only:first-child + .hp-band {
    margin-top: 0;
}

/* ช่องค้นหาบนสุด (31 ต.ค. 2569 ครูหนึ่งสั่งรอบสอง): แถวเดียว ชิดขวา เล็กลง
   คำค้นที่ใช้บ่อยอยู่ซ้าย แคปซูลค้นหากว้างสุด 25rem อยู่ปลายขวา ปุ่มค้นหายังสูง 44 px
   ป้าย "ค้นหาข่าวและหน้าในเว็บไซต์" ซ่อนจากจอ (โปรแกรมอ่านหน้าจอยังอ่าน คำแนะนำอยู่ใน placeholder)
   ผลค้นหาเปิดเป็นแผงลอยใต้แคปซูล ชิดขวา ไม่ดันแผงพระราชทานลง
   โทรศัพท์: แคปซูลเต็มความกว้าง คำค้นที่ใช้บ่อยเป็นแถวปัดซ้ายขวาใต้แคปซูล */
.hp-hero-in > .hp-find.is-top {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
    max-width: none;
}

.hp-find.is-top .hp-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.hp-find.is-top .hp-search {
    order: 2;
    flex: 1 1 17rem;   /* แท็บเล็ตหดก่อนขึ้นบรรทัดใหม่ จอกว้างขยายถึง 25rem */
    max-width: 25rem;
    min-width: 0;
}

.hp-find.is-top .hp-search-row {
    padding: 3px;
    box-shadow: 0 14px 28px -20px rgba(2, 6, 23, .7);
}

.hp .hp-find.is-top .hp-search-input {
    min-height: 2.6rem;
    padding-left: 2.5rem;
}

.hp-find.is-top .hp-search-field > i {
    left: 14px;
}

.hp .hp-find.is-top .hp-search-btn {
    min-height: 44px;
    padding: 0 1.1rem;
}

.hp-find.is-top .hp-chips {
    order: 1;
    justify-content: flex-end;
    margin: 0;
}

.hp-find.is-top .hp-res {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(100%, 34rem);
    margin: 0;
    /* หัวหน้าตัดส่วนที่ล้นขอบ (overflow: hidden) และข่าวเด่นลอยทับขอบล่าง ผลยาวจึงเลื่อนในแผงแทนการล้นลงไป */
    max-height: min(26rem, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hp-find.is-top + .hp-honor {
    margin-top: clamp(16px, 1.8vw, 22px);
}

/* โทรศัพท์: แคปซูลเต็มความกว้างก่อน คำค้นที่ใช้บ่อยชิดซ้ายใต้แคปซูล (แถวปัดได้ จัดกึ่งกลางหรือชิดขวาแล้วคำแรกถูกตัด) */
@media (max-width: 640px) {
    .hp-hero-in > .hp-find.is-top {
        gap: 10px;
    }

    .hp-find.is-top .hp-search {
        order: 1;
        flex: 1 1 100%;
        max-width: none;
    }

    .hp-find.is-top .hp-chips {
        order: 2;
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    /* 31 ต.ค. 2569 (ครูหนึ่ง: "คลิกที่ค้นหาแล้ว แสดงรายละเอียดแต่โดนบัง"): แผงลอยถูกหัวหน้าตัดขอบและข่าวเด่นบัง
       โทรศัพท์จึงให้ผลค้นหาอยู่ในลำดับปกติใต้คำค้นที่ใช้บ่อย ดันแผงพระราชทานและข่าวลง เห็นครบทุกรายการ */
    .hp-find.is-top .hp-res {
        position: static;
        order: 3;
        flex: 1 1 100%;
        width: auto;
        max-height: none;
        overflow: visible;
    }
}

.hp-honor + .hp-band {
    margin-top: clamp(14px, 1.6vw, 20px);
}

.hp-honor-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "say" "pic" "count";
    gap: 18px;
    align-items: center;
}

.hp-honor-say { grid-area: say; min-width: 0; }
.hp-honor-pic { grid-area: pic; }
.hp-honor-count { grid-area: count; }

@container hp-honor (min-width: 600px) {
    .hp-honor-in.has-pic {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas: "say say" "pic count";
        align-items: stretch;
    }

    .hp-honor-in:not(.has-pic) {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-areas: "say count";
    }
}

/* แท็บเล็ต: ภาพกับการ์ดตัวเลขคู่กัน ภาพตัดกว้างขึ้นเล็กน้อย แผงไม่สูงเกิน */
@container hp-honor (min-width: 600px) and (max-width: 999px) {
    .hp-honor-pic img.is-main { aspect-ratio: 3 / 2; }
}

@container hp-honor (min-width: 1000px) {
    .hp-honor-in.has-pic {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .66fr);
        grid-template-areas: "say pic count";
        gap: 26px;
        align-items: center;
    }
}

/* ป้ายมงกุฎ */
.hp-honor-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
    padding: .3rem 1rem;
    border: 1px solid var(--hp-honor-line);
    border-radius: 999px;
    background: rgba(2, 6, 23, .3);
    color: var(--hp-gold-text);
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 700;
    line-height: 1.4;
}

.hp-honor-kicker > i {
    color: #fcd34d;
}

/* หัวข้อ: เส้นทองจางออกทางขวา มีเพชรเล็กบนเส้น */
.hp-honor-title {
    position: relative;
    margin: 0;
    padding-bottom: .6rem;
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-3xl, clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem));
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(2, 6, 23, .35);
}

.hp-honor-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(20rem, 85%);
    height: 2px;
    background: linear-gradient(90deg, #fbbf24 0%, rgba(251, 191, 36, .6) 55%, rgba(251, 191, 36, 0) 100%);
}

.hp-honor-title::before {
    content: "";
    position: absolute;
    left: min(7rem, 30%);
    bottom: -4px;
    width: 9px;
    height: 9px;
    background: #fde68a;
    box-shadow: 0 0 10px rgba(253, 230, 138, .8);
    transform: rotate(45deg);
}

.hp-honor-text {
    max-width: 40rem;
    margin: .7rem 0 0;
    color: var(--hp-on-hero-2);
    font-size: var(--tb1-fs-sm, 1rem);
    line-height: 1.65;
}

/* เกณฑ์ 5 ด้าน: เม็ดยามีไอคอนในวงทอง */
.hp-honor-crit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: .85rem 0 1rem;
    padding: 0;
    list-style: none;
}

.hp-honor-crit li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem .9rem .2rem .2rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(2, 6, 23, .24);
    color: #ffffff;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.4;
}

.hp-honor-crit-ic {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(253, 230, 138, .6);
    border-radius: 50%;
    background: rgba(253, 230, 138, .12);
    color: var(--hp-gold-text);
    font-size: .75rem;
}

/* ปุ่ม: สูงอย่างน้อย 44 px ปุ่มหลักขาวขอบทอง */
.hp-honor-acts {
    gap: 10px;
}

.hp .hp-honor-btn {
    min-height: max(44px, 2.9rem);
    padding: 0 .9rem 0 1.1rem;
    gap: .55rem;
    font-size: var(--tb1-fs-sm, 1rem);
}

.hp .hp-honor-btn.hp-btn-light {
    border: 2px solid #fbbf24;
}

.hp-honor-go {
    margin-inline-start: .15rem;
    font-size: .8em;
}

/* ภาพวันรับรางวัล: กรอบทอง คำบรรยายมุมล่างซ้าย ภาพที่สอง (ถ้ามี) ซ้อนมุมขวาล่าง */
.hp-honor-pic {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--hp-r) + 4px);
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 35%, #fef3c7 60%, #fbbf24 100%);
    box-shadow: 0 22px 40px -26px rgba(2, 6, 23, .9);
}

.hp-honor-pic img.is-main {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 30%;
    border-radius: var(--hp-r);
}

.hp-honor-pic img.is-inset {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 32%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 3px solid #fde68a;
    border-radius: 12px;
    box-shadow: 0 12px 24px -12px rgba(2, 6, 23, .9);
}

.hp-honor-pic figcaption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: calc(100% - 28px);
    padding: 4px 12px;
    border: 1px solid rgba(253, 230, 138, .45);
    border-radius: 999px;
    background: rgba(2, 6, 23, .78);
    color: #ffffff;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    line-height: 1.5;
}

.hp-honor-pic figcaption i {
    color: var(--hp-gold-text);
}

/* การ์ดจำนวนรางวัล: ขอบทองไล่เฉด ถ้วยทอง ตัวเลขทอง เส้นทองพร้อมเพชรคั่นคำอธิบาย */
.hp-honor-count {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .35rem;
    min-width: 0;
    height: 100%;
    padding: 18px 16px;
    text-align: center;
    border: 1.5px solid transparent;
    border-radius: var(--hp-r-lg);
    background:
        linear-gradient(rgba(2, 6, 23, .34), rgba(2, 6, 23, .34)) padding-box,
        linear-gradient(160deg, #fde68a 0%, rgba(245, 158, 11, .55) 40%, rgba(253, 230, 138, .2) 70%, #fbbf24 100%) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.hp-honor-trophy {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(253, 230, 138, .3) 0%, rgba(253, 230, 138, 0) 70%);
    color: #fbbf24;
    font-size: 2.2rem;
    filter: drop-shadow(0 6px 12px rgba(245, 158, 11, .45));
}

.hp-honor-n {
    display: grid;
    gap: .3rem;
    justify-items: center;
    margin: 0;
}

.hp-honor-n b {
    font-family: var(--hp-serif);
    font-size: clamp(2.6rem, 1.6rem + 2.6vw, 3.8rem);
    font-weight: 800;
    line-height: 1;
    color: #fcd34d;
    font-variant-numeric: tabular-nums;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hp-honor-n b {
        background: linear-gradient(180deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.hp-honor-n > span {
    position: relative;
    padding-top: .75rem;
    color: #ffffff;
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    line-height: 1.5;
}

.hp-honor-nw {
    white-space: nowrap;
}

.hp-honor-n > span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(9rem, 90%);
    height: 1px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
    transform: translateX(-50%);
}

.hp-honor-n > span::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    background: #fde68a;
    transform: translateX(-50%) rotate(45deg);
}

.hp-honor-count :is(.hp-bar, .hp-parts, .hp-royal-note) {
    width: 100%;
    text-align: start;
}

/* แผงแคบ (โทรศัพท์): การ์ดจำนวนเป็นแถว ถ้วยซ้าย ตัวเลขกับคำอธิบายขวา */
@container hp-honor (max-width: 599px) {
    .hp-honor-count {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        column-gap: 12px;
        text-align: start;
    }

    .hp-honor-n {
        justify-items: start;
    }

    .hp-honor-n > span {
        padding-top: 0;
    }

    .hp-honor-n > span::before,
    .hp-honor-n > span::after {
        display: none;
    }

    .hp-honor-count :is(.hp-bar, .hp-parts, .hp-royal-note) {
        grid-column: 1 / -1;
    }

    .hp .hp-honor-btn {
        width: 100%;
    }

    .hp-honor-btn > span {
        flex: 1 1 auto;
        text-align: start;
    }
}

/* ประกายทองที่ป้ายเมื่อแผงเข้ากลางจอ (ส่วนการเคลื่อนไหวของ .hp-shine) แสงอ่อนพอให้ตัวอักษรทองยังอ่านได้ */
@media screen and (prefers-reduced-motion: no-preference) {
    .hp-honor-kicker.hp-shine::after,
    .hp-honor-kicker.hp-shine::before {
        background: linear-gradient(100deg, transparent 0%, rgba(253, 230, 138, .3) 50%, transparent 100%);
    }
}

/* คอนทราสต์สูง: ดำ ขาว เหลือง ไม่มีพื้นไล่สี เส้นทอง และลายน้ำ */
html.tb1-contrast-high .hp .hp-honor {
    background: #000000 !important;
    border: 2px solid #ffffff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.tb1-contrast-high .hp .hp-honor::before,
html.tb1-contrast-high .hp .hp-honor::after,
html.tb1-contrast-high .hp .hp-honor-title::before,
html.tb1-contrast-high .hp .hp-honor-title::after,
html.tb1-contrast-high .hp .hp-honor-n > span::before,
html.tb1-contrast-high .hp .hp-honor-n > span::after {
    display: none;
}

html.tb1-contrast-high .hp :is(.hp-honor-kicker, .hp-honor-crit li, .hp-honor-crit-ic, .hp-honor-count, .hp-honor-pic figcaption) {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .hp .hp-honor-pic {
    padding: 2px;
    background: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .hp .hp-honor-trophy {
    background: none;
    filter: none;
}

html.tb1-contrast-high .hp .hp-honor-n b {
    background: none !important;
}

html.tb1-contrast-high .hp :is(.hp-honor-kicker, .hp-honor-kicker span, .hp-honor-kicker i, .hp-honor-crit-ic i, .hp-honor-trophy i,
    .hp-honor-pic figcaption i, .hp-honor-n b) {
    color: #facc15 !important;
}

@media print {
    .hp-honor {
        color: #000000;
        background: #ffffff !important;
        border: 1px solid #999999;
        box-shadow: none;
    }

    .hp-honor::before,
    .hp-honor::after,
    .hp-honor-acts,
    .hp-honor-trophy {
        display: none;
    }

    .hp-honor :is(.hp-honor-title, .hp-honor-text, .hp-honor-crit li, .hp-honor-n > span, .hp-honor-kicker) {
        color: #000000 !important;
    }

    .hp-honor-n b {
        color: #000000;
        background: none;
        -webkit-text-fill-color: currentColor;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   โทรศัพท์: แถบตัวเลขและข่าวล่าสุด จัดผังใหม่ (31 ต.ค. 2569 ครูหนึ่งสั่ง "จัดเลย์เอาท์ตรงนี้ใหม่")
   เดิม  ตัวเลขสองคูณสอง ช่องอายุโรงเรียนว่างครึ่งช่องเพราะช่องนักเรียนสูงตามแท่งรายชั้น
         ข่าวล่าสุดเป็นสองคอลัมน์ที่จอราว 430–640 px (การ์ดกว้างขั้นต่ำ 15.5rem ตัวอักษรเล็กลงจึงวางได้สองใบ)
         หัวข่าวแคบจนยาว 7–9 บรรทัด
   ใหม่  นักเรียนเต็มแถวบน ตัวเลขซ้าย แท่งรายชั้นใหญ่ขึ้นทางขวา ตัวเลขอื่นเป็นช่องเล็กแถวละสาม จัดกึ่งกลาง
         (เหลือสองช่องก็แบ่งครึ่ง ไม่มีช่องว่างค้าง ไม่มีข้อมูลรายชั้นก็เป็นช่องเล็กทั้งหมด)
         ข่าวล่าสุดคอลัมน์เดียว ภาพซ้าย 4:3 ป้ายหมวดกับวันที่บรรทัดเดียวกัน หัวข่าวไม่เกิน 3 บรรทัด
   จอกว้างกว่า 640 px ไม่เปลี่ยน
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .hp .hp-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .hp .hp-fact {
        flex: 1 1 28%;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "ic" "v" "k" "s";
        justify-items: center;
        align-content: start;
        gap: 4px;
        padding: 12px 8px;
        text-align: center;
        background: rgba(255, 255, 255, .07);
        border-radius: var(--hp-r-sm);
    }

    .hp .hp-fact-ic { grid-area: ic; margin-bottom: 2px; }
    .hp .hp-fact-k { grid-area: k; line-height: 1.35; }
    .hp .hp-fact-v { grid-area: v; }
    .hp .hp-fact-s { grid-area: s; }

    /* นักเรียน: แถวบนเต็มความกว้าง ไอคอนกับชื่อ ตัวเลข ห้องเรียน ทางซ้าย แท่งรายชั้นทางขวา */
    .hp .hp-fact.has-chart {
        order: -1;
        flex-basis: 100%;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "ic k spark" "v v spark" "s s spark";
        justify-items: start;
        align-items: center;
        column-gap: 8px;
        padding: 12px 14px;
        text-align: start;
    }

    .hp .hp-fact.has-chart .hp-fact-ic {
        margin-bottom: 0;
    }

    .hp .hp-fact.has-chart .hp-spark {
        grid-area: spark;
        align-self: end;
        justify-self: end;
        grid-auto-columns: 1.55rem;
        gap: 3px;
        margin: 0;
    }

    .hp-fact.has-chart .hp-spark-bar {
        width: .8rem;
        height: 3.4rem;
    }

    /* ช่องแท่งกว้างขึ้น ป้ายชั้นจึงใหญ่ขึ้นได้โดยไม่ชนกัน (เดิม .68rem) */
    .hp-fact.has-chart .hp-spark-m {
        font-size: .78rem;
    }

    .hp .hp-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ภาพไม่เกินราวหนึ่งในสามของการ์ด จอ 320 px ที่ตัวอักษรใหญ่ หัวข่าวจึงยังมีที่ */
    .hp .hp-card-in {
        grid-template-columns: min(7.25rem, 32%) minmax(0, 1fr);
        align-items: center;
    }

    .hp .hp-card-media {
        aspect-ratio: 4 / 3;
    }

    .hp .hp-card-body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: .3rem .6rem;
    }

    .hp .hp-card-kicker {
        align-self: center;
    }

    .hp .hp-card-meta {
        order: 1;
        margin-top: 0;
        padding-top: 0;
    }

    /* ลิงก์ยืดเต็มการ์ดอ้างอิง .hp-card-in การตัดบรรทัดที่หัวข้อจึงไม่ตัดพื้นที่กด */
    .hp .hp-card-title {
        order: 2;
        flex: 1 1 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    html.tb1-contrast-high .hp .hp-fact {
        background: #000000;
        border: 1px solid #ffffff !important;
        box-shadow: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   หน้าแรกไม่มีขอบและเงา (31 ต.ค. 2569 ครูหนึ่งเลือกจากภาพเปรียบเทียบ "ใช้แบบไม่มีขอบเงา")
   ทุกชิ้นในเนื้อหาหน้าแรก (.hp) ไม่มีเงา (box-shadow และเงาแบบ drop-shadow) เส้นขอบโปร่งใส (ความหนาเท่าเดิม ผังไม่ขยับ)
   คงไว้:
   - ขอบของสิ่งที่กดได้ ซึ่งต้องเห็นว่ากดได้: ปุ่มแบบเส้นขอบ ปุ่มคำค้น ช่องค้นหา ปุ่ม PDF ปุ่มอัลบั้ม ปุ่มหยุดเลื่อน ฯลฯ
   - เครื่องหมายสถานะที่ทำด้วยเงา: สันซ้ายของข่าวเด่นที่กำลังแสดง และวงทองของวันในปฏิทินที่เปิดรายการอยู่
   - กรอบที่ทำจากพื้นไล่สี (กรอบทองของภาพ การ์ดจำนวนรางวัล) และขอบตัวอักษรเรืองแสงของลายมือ
   - วงโฟกัสของแป้นพิมพ์ (ใช้ outline ไม่ใช่เงา)
   คอนทราสต์สูงไม่ใช้กฎนี้ เพราะต้องมีเส้นขาวแบ่งกล่องบนพื้นดำ · แถบเมนูและส่วนท้ายของเว็บไม่เปลี่ยน
   ยกเลิก: ลบบล็อกนี้ทั้งบล็อก (สำรองก่อนเพิ่มอยู่ที่ _local/backup/home-flat-20261031/)
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.tb1-contrast-high) .hp *:not(.hp-story.is-on):not(.hp-d-a[aria-expanded="true"]),
html:not(.tb1-contrast-high) .hp *::before,
html:not(.tb1-contrast-high) .hp *::after {
    box-shadow: none !important;
}

html:not(.tb1-contrast-high) .hp :is(.hp-aia-leaf, .hp-honor-trophy) {
    filter: none;
}

html:not(.tb1-contrast-high) .hp *:not(.hp-btn):not(.hp-chip):not(.hp-more):not(.hp-qa-pdf):not(.hp-kla-album):not(.hp-search-row):not(.hp-today-toggle):not(.hp-play):not(.hp-res-clear) {
    border-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ๕ ผลงานเด่นของโรงเรียน (2 พ.ย. 2569 · includes/home_feature_cards.php)
   ใช้การ์ดชุดเดียวกับข่าวล่าสุด (.hp-card) เพิ่มแค่:
   - จำนวนคอลัมน์ที่แน่นอน: จอกว้างทุกใบในแถวเดียว (--n = จำนวนใบ) แท็บเล็ต 2×2 จึงไม่มีใบเดียวค้างแถว
     (กริด auto-fit แบบข่าววางได้ 3 คอลัมน์ที่ 768 px เมื่อตัวอักษรเริ่มที่เล็กสุด)
   - ปกรายงาน SAR เป็นแนวตั้ง วางทั้งปกบนพื้นอ่อน ไม่ตัดขอบ
   - บรรทัดตัวเลขเด่นท้ายการ์ด ชิดล่างทุกใบให้ตรงกัน
   โทรศัพท์ใช้แถวภาพซ้ายข้อความขวาของการ์ดข่าว (คำอธิบายซ่อนตามการ์ดข่าว)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
    .hp .hp-feat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .hp .hp-feat-cards {
        grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    }
}

.hp-feat .hp-card-media > picture {
    display: block;
    height: 100%;
}

/* กรอบภาพสูงตามสัดส่วน 16:10 ของการ์ด ปกวางแบบ absolute จึงไม่ดันกรอบให้สูงตามปก */
.hp-feat .hp-card-media.is-cover {
    position: relative;
    --cover-pad: 12px;
    background: var(--hp-brand-soft);
}

.hp-feat .hp-card-media.is-cover > picture {
    position: absolute;
    inset: var(--cover-pad);
    height: auto;
}

.hp-feat .hp-card-media.is-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hp-feat-fig {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: .45rem;
}

.hp-feat-num {
    font-family: var(--hp-serif);
    font-size: var(--tb1-fs-xl, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--hp-heading);
}

.hp-feat-num small {
    font-size: var(--tb1-fs-sm, 1rem);
    font-weight: 600;
    color: var(--hp-ink-2);
}

.hp-feat-note {
    font-size: var(--tb1-fs-xs, .875rem);
    line-height: 1.5;
    color: var(--hp-muted);
}

@media (max-width: 640px) {
    .hp .hp-feat-fig {
        order: 3;
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .5rem;
        margin-top: 0;
        padding-top: 0;
    }

    .hp .hp-feat-num {
        font-size: var(--tb1-fs-lg, 1.25rem);
    }

    .hp .hp-feat .hp-card-media.is-cover {
        --cover-pad: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ขอบล่างหัวหน้าเป็นคลื่น (2 พ.ย. 2569 ครูหนึ่งขอ "แถบน้ำเงิน-ขาวให้โค้ง" แทนขอบตรง · แถบเมนูไม่ต้องมี)
   ใช้ mask ตัดขอบล่างของหัวหน้าเอง ใต้คลื่นจึงเป็นพื้นหน้าจริงทุกโหมด
   (โหมดมืดพื้นหน้าเป็นไล่เฉดทั้งหน้า ถ้าวาดคลื่นสีทึบทับจะเห็นรอยต่อ)
   mask สองชั้น: ส่วนบนทึบเต็ม (ไล่เฉดสีดำ) | แถบล่างสูง --hp-wave-h เป็น SVG คลื่นสองระดับ
     เหนือเส้นโค้งแรก ทึบ · ระหว่างสองเส้น โปร่ง 62% (เห็นเป็นแถบฟ้าอ่อนแบบภาพตัวอย่าง) · ใต้เส้นที่สอง โปร่งใส
   รูปเส้นโค้งชุดเดียวกับขอบบนของส่วนท้าย (css/tb1-footer.css) หัวและท้ายหน้าจึงเป็นชุดเดียวกัน
   ความสูงไม่เกินระยะจากแถบตัวเลขถึงขอบล่างหัวหน้า (โทรศัพท์ 72 px คอม 116 px) ตัวเลขจึงไม่ถูกตัด
   ส่วนกลางของคลื่นอยู่หลังเวทีข่าวเด่น (คนละส่วน ไม่ถูก mask) เห็นชัดที่ขอบซ้ายขวา
   คอนทราสต์สูงและตอนพิมพ์ไม่ใช้ · ยกเลิก: ลบบล็อกนี้
   ═══════════════════════════════════════════════════════════════════════ */
@media screen {
    html:not(.tb1-contrast-high) .hp-hero {
        --hp-wave-h: clamp(40px, 6vw, 88px);
        -webkit-mask:
            linear-gradient(#000000, #000000) top / 100% calc(100% - var(--hp-wave-h) + 1px) no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V6C1260 34 1000 90 700 84C420 78 240 22 0 10Z'/%3E%3Cpath fill-opacity='.62' d='M0 10C240 22 420 78 700 84C1000 90 1260 34 1440 6V14C1280 44 1060 100 760 100C470 100 260 60 0 42Z'/%3E%3C/svg%3E") bottom / 100% var(--hp-wave-h) no-repeat;
        mask:
            linear-gradient(#000000, #000000) top / 100% calc(100% - var(--hp-wave-h) + 1px) no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V6C1260 34 1000 90 700 84C420 78 240 22 0 10Z'/%3E%3Cpath fill-opacity='.62' d='M0 10C240 22 420 78 700 84C1000 90 1260 34 1440 6V14C1280 44 1060 100 760 100C470 100 260 60 0 42Z'/%3E%3C/svg%3E") bottom / 100% var(--hp-wave-h) no-repeat;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ภาพวันรับรางวัลพระราชทานแบบไดคัท (2 พ.ย. 2569 ครูหนึ่งสั่ง "ไม่ต้องใส่กรอบ ทำไดคัทรูป
   ทำการ์เดียนให้กลมกลืนกับพื้นหลัง แต่เด่นสวยงาม") · มาร์กอัป includes/home_royal_panel.php
   - ไม่มีกรอบทอง ภาพพื้นใส (img/home/royal-1-cut.webp) ยืนบนขอบล่างของแผง
   - แสงทองไล่เฉดวงรีหลังศีรษะและลำตัว (::before) กับแสงพื้นจาง ๆ ใต้เท้า (::after) ให้คนเด่นจากพื้นน้ำเงิน
   - ช่วงล่างของภาพจางลงด้วย mask ภาพถูกตัดที่ขาจึงกลืนเข้ากับพื้นแผง ไม่เห็นขอบตัด
   - ไม่ใช้เงา (หน้าแรกไม่มีขอบและเงา 31 ต.ค.) ความเด่นมาจากแสงด้านหลังเท่านั้น
   ═══════════════════════════════════════════════════════════════════════ */
.hp-honor-pic.is-cut {
    align-self: end;
    display: grid;
    justify-items: center;
    align-items: end;
    padding: 0;
    isolation: isolate;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* แถวล่างของแผง (แผงกว้าง 600 px ขึ้นไป): ยืนชิดขอบล่างของแผง แสงพื้นต่อกับขอบแผงพอดี */
@container hp-honor (min-width: 600px) {
    .hp-honor-pic.is-cut {
        margin-bottom: calc(-1 * clamp(16px, 1.6vw, 24px));
    }
}

/* แสงทองหลังคน: วงรีอุ่นตรงกลาง จางเป็นฟ้าแล้วหายไปในพื้นแผง */
.hp-honor-pic.is-cut::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -34% -10% 6%;   /* ยื่นขึ้นเหนือศีรษะและออกข้าง แสงจึงเห็นเป็นรัศมีรอบคน ไม่ซ่อนอยู่หลังตัวทั้งหมด */
    border-radius: 50%;
    background: radial-gradient(closest-side at 50% 50%,
        rgba(255, 251, 235, .62) 0%,
        rgba(253, 230, 138, .38) 34%,
        rgba(251, 191, 36, .14) 58%,
        rgba(96, 165, 250, .08) 78%,
        transparent 100%);
    pointer-events: none;
}

/* แสงพื้นใต้เท้า */
.hp-honor-pic.is-cut::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: radial-gradient(ellipse 58% 75% at 50% 100%, rgba(255, 255, 255, .2) 0%, rgba(253, 230, 138, .08) 45%, transparent 75%);
    pointer-events: none;
}

.hp-honor-pic.is-cut picture {
    display: block;
    width: 100%;
}

.hp-honor-pic.is-cut img.is-main {
    width: 100%;
    height: auto;
    aspect-ratio: 914 / 598;   /* สัดส่วนของไฟล์ไดคัท (กฎพื้นฐานตั้ง 4:3 ไว้ให้ภาพในกรอบ) */
    object-fit: contain;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, #000000 58%, rgba(0, 0, 0, .6) 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000000 58%, rgba(0, 0, 0, .6) 80%, transparent 100%);
}

/* คำบรรยายกึ่งกลางล่าง บนช่วงที่ภาพจางแล้ว */
.hp-honor-pic.is-cut figcaption {
    left: 50%;
    bottom: clamp(14px, 1.8vw, 22px);
    translate: -50% 0;
    white-space: nowrap;
}

html.tb1-contrast-high .hp .hp-honor-pic.is-cut {
    padding: 0;
    background: none;
}

html.tb1-contrast-high .hp .hp-honor-pic.is-cut::before,
html.tb1-contrast-high .hp .hp-honor-pic.is-cut::after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ดข่าวเด่นเป็นกระจกโปร่งเล็กน้อย (2 พ.ย. 2569 ครูหนึ่งขอ "ให้มองเห็นส่วนโค้ง เกิดมิติ")
   พื้นการ์ดทึบ 58% + เบลอฉากหลัง: น้ำเงินของหัวหน้าและเส้นคลื่นขอบล่าง (.hp-hero mask) เห็นผ่านการ์ด
   (รอบแรก 78% ครูหนึ่งขอ "โปร่งกว่านี้อีก 20%")
   ภาพข่าวเด่นยังทึบเหมือนเดิม · เรื่องที่กำลังแสดงโปร่งตามการ์ด
   วันที่ของหัวข่าวเข้มขึ้น (--hp-ink-2 แทน --hp-muted) และหมวดข่าวเป็นน้ำเงินเข้ม (โหมดสว่าง)
   ตัวอักษรเล็กยังผ่าน AA ตรงขอบบนของการ์ดที่ซ้อนอยู่บนน้ำเงินของหัวหน้า
   คอนทราสต์สูงใช้พื้นดำทึบตามกฎคอนทราสต์สูงเดิม (ไม่เข้าบล็อกนี้)
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.tb1-contrast-high) .hp .hp-stage {
    background: color-mix(in srgb, var(--hp-paper) 58%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

html:not(.tb1-contrast-high) .hp .hp-story.is-on {
    background: color-mix(in srgb, var(--hp-brand-soft) 62%, transparent);
}

html:not(.tb1-contrast-high) .hp .hp-stage .hp-story-meta {
    color: var(--hp-ink-2);
}

html:not(.tb1-contrast-high) .hp .hp-stage .hp-story-cat {
    color: color-mix(in srgb, var(--hp-brand) 72%, #0b1220);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .hp .hp-stage .hp-story-cat {
    color: var(--hp-brand);
}


/* ═══════════════════════════════════════════════════════════════════════
   ขอบนีออนเมื่อชี้การ์ดข่าว (2 พ.ย. 2569 ครูหนึ่งขอ "ชี้เมาส์บนการ์ดข่าวที่มีลิงก์ ให้ขอบเรืองแสงนีออน เข้ากับธีม")
   ใช้กับ: การ์ดข่าวล่าสุดและการ์ดผลงานเด่น (.hp-card) และรายการหัวข่าวในการ์ดข่าวเด่น (.hp-story)
   ::before = เส้นขอบนีออนคม 2 px (mask ให้เหลือแค่ขอบ) · ::after = แสงฟุ้งรอบการ์ด (ขอบเดียวกันเบลอ) อยู่หลังการ์ด
   สีไล่ น้ำเงินแบรนด์ → ฟ้า accent → ม่วงคราม ไหลวนช้า ๆ ระหว่างชี้ (ผู้ที่ตั้งค่าลดการเคลื่อนไหว: นิ่ง)
   ไม่ใช้ box-shadow เพราะหน้าแรกตั้งไว้ "ไม่มีขอบและเงา" (กฎท้ายไฟล์ลบ box-shadow ทุกชิ้น)
   ชี้ด้วยเมาส์ (อุปกรณ์ที่ชี้ได้) หรือโฟกัสด้วยแป้นพิมพ์ · จอสัมผัสไม่ค้างแสง · คอนทราสต์สูงและตอนพิมพ์ไม่มี
   ═══════════════════════════════════════════════════════════════════════ */
.hp {
    --hp-neon: linear-gradient(115deg,
        var(--hp-brand) 0%, var(--tb1-accent, #0ea5e9) 22%, #818cf8 44%,
        var(--tb1-accent, #0ea5e9) 66%, var(--hp-brand) 88%, var(--tb1-accent, #0ea5e9) 100%);
}

.hp .hp-card,
.hp .hp-story {
    position: relative;
    isolation: isolate;
}

.hp .hp-card::before,
.hp .hp-card::after,
.hp .hp-story::before,
.hp .hp-story::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--hp-r);
    background: var(--hp-neon);
    background-size: 300% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--hp-ease), translate .25s var(--hp-ease);
}

/* เส้นขอบคม อยู่บนการ์ด */
.hp .hp-card::before,
.hp .hp-story::before {
    z-index: 3;
    padding: 2px;
    -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
    mask-composite: exclude;
}

/* แสงฟุ้ง อยู่หลังการ์ด */
.hp .hp-card::after,
.hp .hp-story::after {
    z-index: -1;
    inset: -1px;
    filter: blur(14px);
}

.hp .hp-card:focus-within::before,
.hp .hp-story:focus-within::before {
    opacity: 1;
}

.hp .hp-card:focus-within::after,
.hp .hp-story:focus-within::after {
    opacity: .85;
}

@media (hover: hover) {
    .hp .hp-card:hover::before,
    .hp .hp-story:hover::before {
        opacity: 1;
    }

    .hp .hp-card:hover::after,
    .hp .hp-story:hover::after {
        opacity: .85;
    }

    /* การ์ดข่าวลอยขึ้น 3 px ตอนชี้ (กฎเดิม .hp-card-in:hover) ขอบนีออนลอยตามให้ตรงขอบการ์ด */
    .hp .hp-card:hover .hp-card-in {
        translate: 0 -3px;
    }

    .hp .hp-card:hover::before,
    .hp .hp-card:hover::after {
        translate: 0 -3px;
    }
}

/* ★ 2 พ.ย. 2569 ครูหนึ่ง "ลดความเข้มลงให้สีจางๆ": แสงจางลง
   รายการหัวข่าวในการ์ดข่าวเด่นพื้นใส แสงฟุ้งจึงทะลุเป็นพื้นน้ำเงินเข้มทั้งแถว → เหลือแค่สีจาง ๆ ขอบบางลง
   การ์ดข่าว (พื้นทึบ บังแสงไว้ เห็นแค่รอบนอก) จางลงเล็กน้อยให้เป็นชุดเดียวกัน
   ★ ครูหนึ่งต่อ "เส้นขอบหนาเกินไป" → เส้นคม 1 px ทั้งการ์ดข่าวและรายการหัวข่าว (เดิม 2 px / 1.5 px) */
.hp .hp-card::before,
.hp .hp-story::before {
    padding: 1px;
}

.hp .hp-card:focus-within::before { opacity: .8; }
.hp .hp-card:focus-within::after { opacity: .45; }
.hp .hp-story:focus-within::before { opacity: .55; }
.hp .hp-story:focus-within::after { opacity: .14; }

@media (hover: hover) {
    .hp .hp-card:hover::before { opacity: .8; }
    .hp .hp-card:hover::after { opacity: .45; }
    .hp .hp-story:hover::before { opacity: .55; }
    .hp .hp-story:hover::after { opacity: .14; }
}

@media (prefers-reduced-motion: no-preference) {
    .hp .hp-card:is(:hover, :focus-within)::before,
    .hp .hp-card:is(:hover, :focus-within)::after,
    .hp .hp-story:is(:hover, :focus-within)::before,
    .hp .hp-story:is(:hover, :focus-within)::after {
        animation: hp-neon-flow 4s linear infinite;
    }
}

@keyframes hp-neon-flow {
    from { background-position: 0% 50%; }
    to { background-position: 150% 50%; }
}

html.tb1-contrast-high .hp :is(.hp-card, .hp-story)::before,
html.tb1-contrast-high .hp :is(.hp-card, .hp-story)::after {
    content: none;
}

@media print {
    .hp :is(.hp-card, .hp-story)::before,
    .hp :is(.hp-card, .hp-story)::after {
        content: none;
    }
}