/* ──────────────────────────────────────────────────────────────────────────
   report_onet.php — ผลคะแนน O-NET
   โรงเรียนเทศบาล ๑ กิตติขจร

   รอบ 25 ก.ย. 2569: ภาษาภาพเดียวกับ /zerodropout/ (หน้าแรก โครงสร้างหลักสูตร ตารางเรียน ครูที่ปรึกษา)
       หัวหน้าน้ำเงินไล่เฉดเต็มจอ ปีการศึกษาจาง ๆ เป็นลายน้ำ การ์ดกระจก "เฉลี่ยทุกวิชา" (คำตอบของปี
       + ส่วนต่างเฉลี่ยรายปี + วิชาที่ต้องดู) แถบตัวเลขหกช่อง แล้วแผงลอยทับขอบล่าง:
       ห่างจากระดับประเทศ · แนวโน้มรายวิชา · เรดาร์คู่กับเทียบปีก่อน · ตารางคะแนนแยกตามระดับ

   ★ กราฟทุกตัววาดฝั่งเซิร์ฟเวอร์ (HTML/CSS + inline SVG) สีที่เป็นข้อมูลต้องติดกระดาษตอนพิมพ์
   ★ ค่าที่ไม่มีคือขีดกลางหรือช่องว่าง ไม่ใช่แท่งศูนย์ · ส่วนต่างเป็นคะแนน ไม่ใช่เปอร์เซ็นต์
   ★ ห้าสีประจำวิชาชุดเดียวกับ css/tb1-onet-priority.css (แดชบอร์ดวิเคราะห์) ทุกสีผ่าน 4.5:1 บนกระดาษทั้งสองโหมด
   ★ สีบอกวิชา ทิศทางบอกด้วยข้างของเส้นกลาง เครื่องหมาย + − ลูกศรสามเหลี่ยม และคำ (เขียว/แดงเป็นของเสริม)
   ★ โทเคนของหน้าทุกตัวเป็น alias ที่ชี้ไป --tb1-* โหมดมืดจึงพลิกให้เอง
   ★ ธีมกลางบังคับ font-family บน span div li p a ด้วย !important ตัวเซริฟจึงอยู่ที่ h1–h3 และ b
   ★ ไม่มี opacity:0 เป็นสถานะพัก ที่ขยับได้มีแค่ตำแหน่ง ความยาวแถบ และการลากเส้น (สคริปต์ติด onr-motion ก่อนเท่านั้น)
   ★ ห้ามตั้ง display บน <caption> · ห้ามใช้ <footer> ในหน้า (ไฟล์กลางทาพื้นดำให้ footer ทุกตัว)
   ★ ทุก selector ขึ้นต้นด้วย onr- (css/tb1-onet.css ของรอบ 14 ก.ย. ใช้ on- ไม่มีหน้าไหนโหลดแล้ว)
   ────────────────────────────────────────────────────────────────────────── */

body.onr-page {
    margin: 0;
    background: var(--tb1-page, #f8fafc);
    color: var(--tb1-ink-2, #334155);
}

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

/* ★ ลิงก์ข้ามไปเนื้อหาซ่อนด้วย clip ไม่ใช่ left:-9999px ซึ่งไปโดนตัวตรวจล้นแนวนอน */
body.onr-page a.onr-skip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.onr-page a.onr-skip:focus {
    width: auto;
    height: auto;
    padding: 10px 18px;
    clip-path: none;
    color: #ffffff;
    background: var(--tb1-banner-1, #1d4ed8);
    border-radius: 0 0 10px 0;
    font-weight: 600;
    text-decoration: none;
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

main.onr {
    display: block;
}

main.onr:focus {
    outline: none;
}

/* ── โทเคนของหน้า ─────────────────────────────────────────────────────── */
.onr {
    --onr-paper: var(--tb1-surface, #ffffff);
    --onr-paper-alt: var(--tb1-surface-alt, #f1f5f9);
    --onr-ink: var(--tb1-ink-1, #0f172a);
    --onr-ink-2: var(--tb1-ink-2, #334155);
    --onr-muted: var(--tb1-ink-3, #5a697f);
    --onr-line: var(--tb1-border, #e2e8f0);
    --onr-line-bold: var(--tb1-border-bold, #cbd5e1);
    --onr-brand: var(--tb1-brand, #1d4ed8);
    --onr-brand-soft: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 10%, var(--tb1-surface, #ffffff));
    --onr-brand-line: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 35%, var(--tb1-border, #e2e8f0));
    /* ★ text-danger ของโหมดสว่าง (#dc2626) บนพื้นแดงอ่อนได้ 4.2:1 ไม่ผ่าน AA จึงใช้เฉดเข้มกว่า */
    --onr-up: #047857;
    --onr-down: #b91c1c;
    --onr-up-soft: color-mix(in srgb, #10b981 11%, var(--tb1-surface, #ffffff));
    --onr-down-soft: color-mix(in srgb, #dc2626 8%, var(--tb1-surface, #ffffff));
    --onr-warn: #92400e;
    --onr-warn-soft: color-mix(in srgb, #f59e0b 13%, var(--tb1-surface, #ffffff));
    --onr-warn-line: color-mix(in srgb, #f59e0b 45%, var(--tb1-border, #e2e8f0));
    --onr-nation: #64748b;
    --onr-on-hero-2: #e0e7ff;
    --onr-gold-text: #fde68a;
    --onr-serif: var(--tb1-font-display, "Noto Sans Thai Looped", sans-serif);
    --onr-sans: var(--tb1-font-body, "Sarabun", system-ui, sans-serif);
    --onr-ease: cubic-bezier(.4, 0, .2, 1);
    --onr-spring: cubic-bezier(.22, 1, .36, 1);
    --onr-gap: clamp(16px, 2vw, 24px);
    --onr-gutter: var(--tb1-shell-gutter, 20px);
    --onr-shadow: 0 14px 32px -24px rgba(15, 23, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
    --onr-shadow-float: 0 30px 60px -34px rgba(15, 23, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
    --onr-hero-a: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 60%, var(--tb1-ink-surface, #0f172a));
    --onr-hero-b: var(--tb1-banner-1, #1d4ed8);
    --onr-hero-c: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 78%, var(--tb1-accent-strong, #0284c7));
    --onr-primary: var(--tb1-banner-1, #1d4ed8);

    /* ห้าสีประจำวิชา: หมวดจริงในข้อมูล ไม่ใช่สีที่วนตามลำดับ (ชุดเดียวกับแดชบอร์ดวิเคราะห์) */
    --onr-s-thai: var(--tb1-brand, #1d4ed8);
    --onr-s-math: #b45309;
    --onr-s-sci: #0e7490;
    --onr-s-eng: #6d28d9;
    --onr-s-social: #047857;
    --onr-s-other: var(--tb1-ink-3, #5a697f);

    color: var(--onr-ink-2);
    font-family: var(--onr-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"]) .onr {
    --onr-up: var(--tb1-text-success, #6ee7b7);
    --onr-down: var(--tb1-text-danger, #fda4af);
    --onr-up-soft: color-mix(in srgb, #34d399 12%, var(--tb1-surface, #111c31));
    --onr-down-soft: color-mix(in srgb, #f87171 12%, var(--tb1-surface, #111c31));
    --onr-warn: var(--tb1-text-warning, #fcd34d);
    --onr-warn-soft: color-mix(in srgb, #f59e0b 13%, var(--tb1-surface, #111c31));
    --onr-warn-line: color-mix(in srgb, #f59e0b 42%, var(--tb1-border, #243049));
    --onr-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 16%, var(--tb1-surface, #111c31));
    --onr-nation: #94a3b8;
    --onr-shadow: 0 14px 32px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .055);
    --onr-shadow-float: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
    /* โหมดมืด: banner เป็นกรมท่าเข้ม เติมน้ำเงินสดที่ปลายไล่เฉดให้หัวหน้ามีมิติ แบบเดียวกับหน้าแรก */
    --onr-hero-a: #050d22;
    --onr-hero-c: color-mix(in srgb, #1d4ed8 42%, var(--tb1-banner-1, #0e1f45));
    --onr-primary: #2563eb;
    --onr-s-thai: #93c5fd;
    --onr-s-math: #fcd34d;
    --onr-s-sci: #67e8f9;
    --onr-s-eng: #c4b5fd;
    --onr-s-social: #6ee7b7;
    color-scheme: dark;
}

.onr .is-thai {
    --onr-tone: var(--onr-s-thai);
}

.onr .is-math {
    --onr-tone: var(--onr-s-math);
}

.onr .is-sci {
    --onr-tone: var(--onr-s-sci);
}

.onr .is-eng {
    --onr-tone: var(--onr-s-eng);
}

.onr .is-social {
    --onr-tone: var(--onr-s-social);
}

.onr .is-other {
    --onr-tone: var(--onr-s-other);
}

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

.onr :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, figcaption, fieldset, legend) {
    margin: 0;
}

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

/* ธีมรวมตั้ง display ให้ element หลายชนิด [hidden] ต้องชนะเสมอ */
.onr [hidden] {
    display: none !important;
}

.onr .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;
}

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

.onr-icon {
    display: block;
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

.onr-icon.is-flip {
    transform: scaleX(-1);
}

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

/* จุดสีประจำวิชา */
.onr-dot {
    display: inline-block;
    flex: none;
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
    background: var(--onr-tone, var(--onr-muted));
}

/* ลูกศรสามเหลี่ยมทำจากกรอบ ไม่ใช่ตัวอักษร โปรแกรมอ่านหน้าจอจึงไม่อ่าน และรูปทรงยังอยู่เมื่อสีถูกถอด */
.onr-mark {
    display: inline-block;
    flex: none;
    width: 0;
    height: 0;
    vertical-align: .12em;
    border-left: .36rem solid transparent;
    border-right: .36rem solid transparent;
}

.onr-mark.is-up {
    border-bottom: .46rem solid currentColor;
}

.onr-mark.is-down {
    border-top: .46rem solid currentColor;
}

.onr-mark.is-flat {
    width: .7rem;
    border: 0;
    border-top: 3px solid currentColor;
    vertical-align: .28em;
}

.onr-mark.is-none {
    display: none;
}

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

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

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

.onr .onr-btn-light {
    color: var(--tb1-banner-1, #1d4ed8);
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 12px 26px -16px rgba(2, 6, 23, .7);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode) .onr .onr-btn-light {
    color: #1e3a8a;
}

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

/* ★ พื้นขาว .12 บนน้ำเงิน ตัวขาวยังเกิน 4.5:1 ชี้แล้วพื้นเข้มขึ้น (ถ้าสว่างขึ้นจะต่ำกว่า 4.5:1) */
.onr .onr-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);
}

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

.onr .onr-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--onr-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้า: น้ำเงินไล่เฉดเต็มจอ ปีการศึกษาเป็นลายน้ำ
   ═══════════════════════════════════════════════════════════════════════ */

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

.onr-hero.is-plain {
    padding-bottom: clamp(80px, 7vw, 100px);
}

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

.onr-hero::before {
    background-image:
        radial-gradient(circle at 14% 22%, rgba(255, 255, 255, .09) 0%, transparent 42%),
        radial-gradient(circle at 58% 118%, rgba(56, 189, 248, .12) 0%, transparent 46%);
}

/* เส้นกริดบางแบบกระดาษกราฟ (ตกแต่ง) */
.onr-hero::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(180deg, #000000 30%, transparent);
    mask-image: linear-gradient(180deg, #000000 30%, transparent);
}

.onr-hero-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

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

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

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

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

/* ปีการศึกษาเป็นลายน้ำ: ตัวกลวง (ขอบขาวจาง) ไม่ใช่ข้อความที่ต้องอ่าน จึงอยู่ใน aria-hidden */
/* ★ จอกว้าง: วางที่ว่างใต้ปุ่มทางลัด ชิดขอบซ้ายของการ์ดกระจก เหนือแถบตัวเลข */
.onr-watermark {
    position: absolute;
    right: calc(var(--onr-gutter) + clamp(22rem, 30vw, 28rem) + 1.5rem);
    bottom: calc(clamp(92px, 8vw, 118px) + 12.5rem);
    font-family: var(--onr-serif);
    font-size: clamp(7rem, 4rem + 11vw, 15rem);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .12);
    white-space: nowrap;
    user-select: none;
}

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

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

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

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

.onr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.onr-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 3px 14px;
    font-size: .86rem;
    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);
}

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

.onr-title {
    font-family: var(--onr-serif);
    font-size: clamp(2.2rem, 1.2rem + 3.2vw, 3.7rem);
    font-weight: 600;
    line-height: 1.12;
    color: #ffffff;
    text-wrap: balance;
    text-shadow: 0 2px 20px rgba(2, 6, 23, .3);
}

.onr-title-y {
    display: block;
    margin-top: 8px;
    font-size: .46em;
    font-weight: 500;
    line-height: 1.35;
    color: #dbeafe;
}

.onr-lead {
    max-width: 44rem;
    margin-top: 12px;
    font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
    line-height: 1.75;
    color: var(--onr-on-hero-2);
}

/* ── เลือกระดับชั้นและปีการศึกษา: ชิปกระจก ลิงก์ธรรมดา ───────────────────── */
.onr-pick {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.onr-pick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.onr-pick-k {
    min-width: 5.6rem;
    font-size: .86rem;
    color: var(--onr-on-hero-2);
}

.onr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.onr .onr-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.5rem;
    padding: 0 14px;
    color: #ffffff;
    text-decoration: none;
    background: rgba(2, 6, 23, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    transition: background-color .2s var(--onr-ease), border-color .2s var(--onr-ease), color .2s var(--onr-ease);
}

.onr .onr-chip:has(.onr-chip-n) {
    padding-right: 6px;
}

.onr .onr-chip b {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.onr .onr-chip.is-year b {
    font-weight: 600;
}

.onr-chip-n {
    padding: 1px 9px;
    font-size: .8rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.onr .onr-chip:hover {
    background: rgba(2, 6, 23, .32);
    border-color: #ffffff;
}

/* ชิปของหน้าปัจจุบัน: แผ่นขาว ตัวน้ำเงิน */
.onr .onr-chip[aria-current="page"] {
    color: #1e3a8a;
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 12px 24px -16px rgba(2, 6, 23, .8);
}

.onr .onr-chip[aria-current="page"] .onr-chip-n {
    color: #1e3a8a;
    background: #dbeafe;
}

.onr-hero-main .onr-acts {
    margin-top: 22px;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ดกระจกขวา: เฉลี่ยทุกวิชา · ส่วนต่างรายปี · วิชาที่ต้องดู
   ═══════════════════════════════════════════════════════════════════════ */

.onr-glance {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    color: #ffffff;
    background: rgba(2, 6, 23, .3);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    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);
}

.onr-glance-sec + .onr-glance-sec {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.onr-glance-k {
    margin-bottom: 10px;
    font-family: var(--onr-serif);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
}

.onr-glance-more,
.onr-glance-note {
    margin-top: 8px;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--onr-on-hero-2);
}

.onr-glance-note {
    margin-top: 6px;
    font-size: .78rem;
}

.onr-glance-more b {
    font-family: var(--onr-serif);
    font-size: 1.1rem;
    color: #ffffff;
}

.onr .onr-glance-more a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: 4px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── คำตอบของปี: แผ่นขาวตัวเลขใหญ่ + ประโยค ─────────────────────────────── */
.onr-verdict {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

/* แผ่นขาวตัวเลขใหญ่ (แบบเดียวกับนับถอยหลังของปฏิทินและความครบถ้วนของหลักสูตร) */
.onr-count,
.onr-tile {
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 6.4rem;
    padding: 9px 12px;
    color: #064e3b;
    text-align: center;
    background: linear-gradient(160deg, #ffffff 0%, #d1fae5 100%);
    border-radius: 16px;
    box-shadow: 0 16px 30px -18px rgba(2, 6, 23, .9);
}

.onr-verdict.is-down .onr-count,
.onr-watch-a.is-below .onr-tile {
    color: #7f1d1d;
    background: linear-gradient(160deg, #ffffff 0%, #fee2e2 100%);
}

.onr-verdict.is-flat .onr-count,
.onr-watch-a:not(.is-below) .onr-tile {
    color: #1e3a8a;
    background: linear-gradient(160deg, #ffffff 0%, #dbeafe 100%);
}

.onr-count b,
.onr-tile b {
    font-family: var(--onr-serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.onr-count-k,
.onr-tile-k {
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
}

.onr-verdict-t {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.onr-verdict-t b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--onr-serif);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
}

.onr-verdict-t span {
    font-size: .86rem;
    line-height: 1.55;
    color: var(--onr-on-hero-2);
}

/* สองแถบบนสเกลเต็ม 100: โรงเรียน (ทึบ) กับประเทศ (ขอบประ) */
.onr-duo {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.onr-duo li {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) 3.6rem;
    align-items: center;
    gap: 10px;
}

.onr-duo-k {
    font-size: .8rem;
    color: var(--onr-on-hero-2);
}

.onr-duo-bar {
    position: relative;
    height: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    border-radius: 999px;
}

.onr-duo-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: #ffffff;
    border-radius: 999px;
    transform-origin: left center;
}

.onr-duo .is-nation .onr-duo-bar i {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .78) 0 6px, rgba(255, 255, 255, .28) 6px 9px);
}

.onr-duo b {
    font-family: var(--onr-serif);
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* ── ส่วนต่างเฉลี่ยรายปี: แท่งเหนือ/ใต้เส้นกลาง แต่ละแท่งเป็นลิงก์ไปปีนั้น ── */
.onr-years {
    display: grid;
    grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
    gap: 4px;
}

.onr .onr-yr {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 24px;
    padding: 4px 2px 5px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background-color .2s var(--onr-ease), border-color .2s var(--onr-ease);
}

.onr .onr-yr:hover {
    background: rgba(2, 6, 23, .24);
    border-color: rgba(255, 255, 255, .4);
}

.onr .is-current .onr-yr {
    background: rgba(253, 230, 138, .12);
    border-color: var(--onr-gold-text);
}

.onr-yr-plot {
    position: relative;
    display: block;
    width: 100%;
    height: 64px;
}

/* เส้นกลาง = เท่ากับระดับประเทศ */
.onr-yr-plot::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, .45);
}

.onr-yr-bar {
    position: absolute;
    left: 50%;
    width: min(22px, 58%);
    min-height: 2px;
    margin-left: calc(min(22px, 58%) / -2);
    border-radius: 5px;
}

.is-up .onr-yr-bar {
    bottom: 50%;
    background: #4ade80;
    transform-origin: center bottom;
}

/* ต่ำกว่า: ลายทแยง ไม่ใช่สีอย่างเดียว */
.is-down .onr-yr-bar {
    top: 50%;
    background: repeating-linear-gradient(135deg, #fca5a5 0 3px, #f87171 3px 6px);
    transform-origin: center top;
}

.is-flat .onr-yr-bar {
    top: calc(50% - 1px);
    height: 3px !important;
    background: #ffffff;
}

.onr-yr-none {
    position: absolute;
    left: 50%;
    top: 22%;
    width: min(22px, 58%);
    height: 56%;
    margin-left: calc(min(22px, 58%) / -2);
    border: 1.5px dashed rgba(255, 255, 255, .5);
    border-radius: 5px;
}

.onr-yr-v {
    font-family: var(--onr-serif);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.onr-yr-y {
    font-size: .74rem;
    line-height: 1.2;
    color: var(--onr-on-hero-2);
    font-variant-numeric: tabular-nums;
}

.is-current .onr-yr-y {
    font-weight: 700;
    color: var(--onr-gold-text);
}

/* ── วิชาที่ต้องดู ──────────────────────────────────────────────────────── */
.onr .onr-watch-a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 12px;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    transition: background-color .2s var(--onr-ease), border-color .2s var(--onr-ease);
}

.onr .onr-watch-a:hover {
    background: rgba(2, 6, 23, .22);
    border-color: rgba(255, 255, 255, .5);
}

.onr-watch-a .onr-tile {
    min-width: 5.6rem;
}

.onr-watch-a .onr-tile b {
    font-size: 1.7rem;
}

.onr-watch-t {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}

.onr-watch-t > b {
    font-family: var(--onr-serif);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.45;
}

.onr-watch-t > span {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--onr-on-hero-2);
}

.onr-watch-t > span:first-of-type {
    font-weight: 600;
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   แถบตัวเลข: กระจกเข้มแถวเดียว (แบบเดียวกับแดชบอร์ดและโครงสร้างหลักสูตร)
   ═══════════════════════════════════════════════════════════════════════ */

.onr-band {
    margin-top: clamp(24px, 2.6vw, 34px);
}

.onr-stats {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    overflow: hidden;
    background: rgba(2, 6, 23, .28);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    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);
}

/* เส้นคั่นเป็นเงานอกด้านซ้ายและบนของทุกช่อง ขอบแถบตัดส่วนที่ล้นทิ้ง เหลือเฉพาะเส้นระหว่างช่อง */
.onr-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 16px clamp(14px, 1.4vw, 22px) 18px;
    box-shadow: -1px 0 0 0 rgba(255, 255, 255, .16), 0 -1px 0 0 rgba(255, 255, 255, .16);
}

.onr-stat-ic {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 4px;
    color: #1d4ed8;
    background: linear-gradient(150deg, #ffffff 0%, #dbeafe 100%);
    border-radius: 13px;
    box-shadow: 0 14px 26px -16px rgba(2, 6, 23, .9);
}

.onr-stat.is-warn .onr-stat-ic {
    color: #92400e;
    background: linear-gradient(150deg, #ffffff 0%, #fef3c7 100%);
}

.onr-stat-k {
    font-size: .86rem;
    line-height: 1.4;
    color: var(--onr-on-hero-2);
}

.onr-stat-v {
    font-size: .92rem;
    line-height: 1.25;
    color: var(--onr-on-hero-2);
}

.onr-stat-v b {
    font-family: var(--onr-serif);
    font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.15rem);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* ตัวเลขที่ต้องจัดการ: ทองบนกระจกเข้ม (ตัวทองอยู่บนพื้นเข้มเท่านั้น) */
.onr-stat.is-warn .onr-stat-v b {
    color: var(--onr-gold-text);
}

.onr-stat-s {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--onr-on-hero-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   ส่วนเนื้อหา: แผงแรกลอยทับขอบล่างของหัวหน้า
   ═══════════════════════════════════════════════════════════════════════ */

.onr-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--onr-gap);
    margin-top: -68px;
    padding-bottom: clamp(40px, 5vw, 72px);
}

.onr-panel {
    min-width: 0;
    background: var(--onr-paper);
    border: 1px solid var(--onr-line);
    border-radius: 22px;
    box-shadow: var(--onr-shadow-float);
    scroll-margin-top: 5.5rem;
}

.onr-panel:focus {
    outline: none;
}

.onr-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--onr-line);
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, var(--onr-brand-soft) 0%, var(--onr-paper) 100%);
}

.onr-panel-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    color: #ffffff;
    background: linear-gradient(145deg, var(--onr-hero-c) 0%, var(--onr-hero-b) 100%);
    border-radius: 14px;
    box-shadow: 0 12px 22px -14px rgba(15, 23, 42, .8);
}

.onr-panel-title {
    flex: 1 1 16rem;
    min-width: 0;
    font-family: var(--onr-serif);
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--onr-ink);
}

.onr-panel-sub {
    display: block;
    margin-top: 1px;
    font-family: var(--onr-sans);
    font-size: .84rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--onr-muted);
}

.onr-panel-body {
    padding: 18px 20px 22px;
}

.onr-panel-body > :last-child {
    margin-bottom: 0;
}

.onr-lede {
    max-width: 62rem;
    margin-bottom: 16px;
    font-size: .92rem;
    line-height: 1.75;
    color: var(--onr-ink-2);
}

.onr-lede b {
    color: var(--onr-ink);
}

.onr-small {
    margin-top: 14px;
    font-size: .84rem;
    line-height: 1.65;
    color: var(--onr-muted);
}

.onr-small b {
    color: var(--onr-ink-2);
}

.onr-muted {
    font-size: .88rem;
    color: var(--onr-muted);
}

/* ── ประกาศและธงเตือน ─────────────────────────────────────────────────── */
.onr-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    color: var(--onr-ink-2);
    background: var(--onr-paper);
    border: 1px solid var(--onr-line);
    border-radius: 18px;
    box-shadow: var(--onr-shadow-float), inset 5px 0 0 var(--onr-note-bar, var(--onr-brand));
}

.onr-note.is-warn {
    --onr-note-bar: #d97706;
    background: var(--onr-warn-soft);
    border-color: var(--onr-warn-line);
}

.onr-note-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    color: #ffffff;
    background: var(--onr-primary);
    border-radius: 50%;
}

.onr-note.is-warn .onr-note-ic {
    color: #422006;
    background: #fbbf24;
}

.onr-note p {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.onr-note b {
    font-family: var(--onr-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--onr-ink);
}

.onr-note span {
    font-size: .93rem;
    line-height: 1.65;
}

.onr-flag {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--onr-ink-2);
    background: var(--onr-warn-soft);
    border: 1px solid var(--onr-warn-line);
    border-radius: 12px;
}

.onr-flag .onr-icon {
    margin-top: .2em;
    color: var(--onr-warn);
}

.onr-flag b {
    color: var(--onr-ink);
}

.onr-flag.is-info {
    background: var(--onr-brand-soft);
    border-color: var(--onr-brand-line);
}

.onr-flag.is-info .onr-icon {
    color: var(--onr-brand);
}

/* ป้ายสีประจำวิชา */
.onr-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.onr-keys li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    color: var(--onr-ink-2);
}

/* คำอธิบายรูปทรงเส้น */
.onr-shape-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 14px;
}

.onr-shape-key li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--onr-ink-2);
}

.onr-shape {
    display: inline-block;
    flex: none;
    width: 1.9rem;
    height: 0;
    border-top: 3px solid var(--onr-ink-2);
    border-radius: 2px;
}

.onr-shape.is-nation {
    border-top: 2px dashed var(--onr-nation);
}

.onr-shape.is-sel {
    width: 1.2rem;
    height: .95rem;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--onr-brand) 14%, transparent);
}

.onr-shape.is-area {
    width: 1.2rem;
    height: .95rem;
    border: 2px solid var(--onr-brand);
    border-radius: 3px;
    background: color-mix(in srgb, var(--onr-brand) 22%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   ห่างจากระดับประเทศเท่าไร: แถบยื่นออกจากเส้นกลาง
   ═══════════════════════════════════════════════════════════════════════ */

.onr-gap-axis,
.onr-gap {
    display: grid;
    grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr) 7.2rem;
    align-items: center;
    column-gap: clamp(12px, 1.6vw, 22px);
}

.onr-gap-axis {
    padding: 0 12px 8px 16px;
    font-size: .78rem;
    color: var(--onr-muted);
}

.onr-gap-axis-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.onr-gap-side {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--onr-ink-2);
}

.onr-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
}

.onr-tick {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-size: .74rem;
    line-height: 1.4;
    color: var(--onr-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.onr-tick.is-zero {
    font-weight: 700;
    color: var(--onr-ink);
}

.onr-gap-axis-num {
    text-align: right;
}

.onr-gaps {
    display: grid;
    gap: 8px;
}

.onr-gap {
    position: relative;
    grid-template-areas:
        "id track num"
        "sub track num";
    row-gap: 2px;
    padding: 12px 12px 12px 16px;
    background: var(--onr-paper);
    border: 1px solid var(--onr-line);
    border-radius: 16px;
    box-shadow: inset 4px 0 0 var(--onr-tone, var(--onr-muted));
    scroll-margin-top: 6rem;
    transition: border-color .2s var(--onr-ease), box-shadow .2s var(--onr-ease);
}

.onr-gap:hover {
    border-color: var(--onr-line-bold);
    box-shadow: inset 4px 0 0 var(--onr-tone, var(--onr-muted)), 0 12px 26px -20px rgba(15, 23, 42, .5);
}

.onr-gap:target,
.onr-gap:focus {
    outline: none;
    border-color: var(--onr-tone);
    box-shadow: inset 4px 0 0 var(--onr-tone), 0 0 0 3px color-mix(in srgb, var(--onr-tone) 30%, transparent);
}

.onr-gap-id {
    grid-area: id;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

.onr-gap-name {
    font-family: var(--onr-serif);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--onr-tone, var(--onr-ink));
}

.onr-band-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 1px 9px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--onr-ink-2);
    background: var(--onr-paper-alt);
    border: 1px solid var(--onr-line);
    border-radius: 999px;
}

.onr-band-pill:is(.is-far-above, .is-above) {
    color: var(--onr-up);
    background: var(--onr-up-soft);
    border-color: color-mix(in srgb, var(--onr-up) 35%, var(--onr-line));
}

.onr-band-pill:is(.is-far-below, .is-below) {
    color: var(--onr-down);
    background: var(--onr-down-soft);
    border-color: color-mix(in srgb, var(--onr-down) 35%, var(--onr-line));
}

.onr-gap-sub {
    grid-area: sub;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--onr-muted);
    font-variant-numeric: tabular-nums;
}

.onr-gap-track {
    grid-area: track;
    position: relative;
    display: block;
    height: 30px;
    overflow: hidden;
    background: var(--onr-paper-alt);
    border-radius: 8px;
}

.onr-gline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--onr-line-bold) 70%, transparent);
}

.onr-gap-zero {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: calc(50% - 1px);
    width: 2px;
    background: var(--onr-ink);
    z-index: 2;
}

.onr-gap-bar {
    position: absolute;
    top: 6px;
    bottom: 6px;
    background: var(--onr-tone, var(--onr-muted));
    z-index: 1;
}

.onr-gap-bar.is-up {
    left: 50%;
    border-radius: 0 6px 6px 0;
    transform-origin: left center;
}

/* ต่ำกว่า: ลายทแยงทับสีวิชา ทิศทางจึงไม่พึ่งสีแม้ในภาพขาวดำ */
.onr-gap-bar.is-down {
    right: 50%;
    border-radius: 6px 0 0 6px;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 3px, transparent 3px 7px);
    transform-origin: right center;
}

.onr-gap-n {
    grid-area: num;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    color: var(--onr-ink);
    white-space: nowrap;
}

.onr-gap-n b {
    font-family: var(--onr-serif);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.onr-gap-n span:not(.onr-mark) {
    font-size: .78rem;
    color: var(--onr-muted);
}

.onr-gap-n.is-up {
    color: var(--onr-up);
}

.onr-gap-n.is-down {
    color: var(--onr-down);
}

.onr-gap-n.is-none b {
    color: var(--onr-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   แนวโน้มรายวิชา: small multiples สเกลเดียวกันทุกวิชา
   ═══════════════════════════════════════════════════════════════════════ */

.onr-trends {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 14px;
}

@media (min-width: 1280px) {
    .onr-trends[data-n="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .onr-trends[data-n="5"],
    .onr-trends[data-n="6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.onr-trend {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px 12px 10px;
    background: var(--onr-paper);
    border: 1px solid var(--onr-line);
    border-top: 4px solid var(--onr-tone, var(--onr-muted));
    border-radius: 16px;
    scroll-margin-top: 6rem;
    transition: border-color .2s var(--onr-ease), box-shadow .2s var(--onr-ease), transform .2s var(--onr-ease);
}

.onr-trend:hover {
    border-color: var(--onr-line-bold);
    border-top-color: var(--onr-tone);
    box-shadow: 0 18px 34px -26px rgba(15, 23, 42, .6);
}

.onr-trend-cap {
    display: grid;
    gap: 2px;
    padding: 0 4px 6px;
}

.onr-trend-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.onr-trend-name b {
    font-family: var(--onr-serif);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--onr-tone, var(--onr-ink));
}

.onr-trend-d {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--onr-ink-2);
}

.onr-trend-d.is-up .onr-mark {
    color: var(--onr-up);
}

.onr-trend-d.is-down .onr-mark {
    color: var(--onr-down);
}

.onr-trend-d.is-none {
    color: var(--onr-muted);
}

.onr-t-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.onr-t-svg text {
    font-family: var(--onr-sans);
}

.onr-t-sel {
    fill: color-mix(in srgb, var(--onr-tone, var(--onr-brand)) 9%, transparent);
}

.onr-t-grid {
    stroke: var(--onr-line);
    stroke-width: 1;
}

.onr-t-axis {
    font-size: 11px;
    fill: var(--onr-muted);
    font-variant-numeric: tabular-nums;
}

.onr-t-axis.is-sel {
    font-weight: 700;
    fill: var(--onr-ink);
}

.onr-t-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.onr-t-line.is-school {
    stroke: var(--onr-tone, var(--onr-brand));
    stroke-width: 2.8;
}

.onr-t-line.is-nation {
    stroke: var(--onr-nation);
    stroke-width: 1.8;
    stroke-dasharray: 5 4;
}

.onr-t-dot.is-school {
    fill: var(--onr-paper);
    stroke: var(--onr-tone, var(--onr-brand));
    stroke-width: 2.4;
}

.onr-t-dot.is-school.is-sel {
    fill: var(--onr-tone, var(--onr-brand));
    stroke: var(--onr-paper);
    stroke-width: 2;
}

.onr-t-dot.is-nation {
    fill: var(--onr-nation);
}

.onr-t-valbg {
    fill: var(--onr-paper);
    stroke: color-mix(in srgb, var(--onr-tone, var(--onr-brand)) 45%, transparent);
    stroke-width: 1;
}

.onr-t-val {
    font-family: var(--onr-serif) !important;
    font-size: 13px;
    font-weight: 700;
    fill: var(--onr-tone, var(--onr-ink));
    font-variant-numeric: tabular-nums;
}

.onr-trend-now {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    padding: 7px 10px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--onr-muted);
    background: var(--onr-paper-alt);
    border-radius: 10px;
}

.onr-trend-now span:first-child {
    font-weight: 600;
    color: var(--onr-ink-2);
}

.onr-trend-now b {
    color: var(--onr-ink);
    font-variant-numeric: tabular-nums;
}

/* การ์ดสรุปท้ายชุด: จำนวนวิชาที่มีกราฟเป็นคี่ (5) การ์ดนี้เติมช่องสุดท้าย จำนวนคู่ให้เป็นแถบเต็มแถว */
.onr-trend-sum {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    background: linear-gradient(160deg, var(--onr-brand-soft) 0%, var(--onr-paper) 100%);
    border: 1px dashed var(--onr-brand-line);
    border-radius: 16px;
}

.onr-trends:not([data-n="5"]) .onr-trend-sum {
    grid-column: 1 / -1;
}

.onr-ts-k {
    font-family: var(--onr-serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--onr-ink);
}

.onr-ts-big {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: .9rem;
    color: var(--onr-ink-2);
}

.onr-ts-big b {
    margin-right: 4px;
    font-family: var(--onr-serif);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--onr-ink);
}

.onr-ts-list {
    display: grid;
    gap: 6px;
}

.onr-trends:not([data-n="5"]) .onr-ts-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    column-gap: 18px;
}

.onr-ts-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "dot name d"
        ". v d";
    align-items: center;
    gap: 0 10px;
    padding: 6px 10px;
    font-size: .86rem;
    background: var(--onr-paper);
    border-radius: 10px;
    box-shadow: inset 3px 0 0 var(--onr-tone);
}

.onr-ts-list .onr-dot {
    grid-area: dot;
}

.onr-ts-name {
    grid-area: name;
    font-weight: 600;
    color: var(--onr-ink);
}

.onr-ts-v {
    grid-area: v;
    font-size: .8rem;
    color: var(--onr-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.onr-ts-d {
    grid-area: d;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 4.4rem;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.onr-ts-d.is-up {
    color: var(--onr-up);
}

.onr-ts-d.is-down {
    color: var(--onr-down);
}

.onr-ts-note {
    margin-top: auto;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--onr-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   แถวคู่: เรดาร์ | เทียบปีก่อน
   ═══════════════════════════════════════════════════════════════════════ */

.onr-duet {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--onr-gap);
    align-items: start;
}

@media (min-width: 1100px) {
    .onr-duet:has(> .onr-radar-panel) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    }
}

.onr-radar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

@media (min-width: 640px) and (max-width: 1099.98px) {
    .onr-radar {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
}

/* ปีแรกที่มีข้อมูล (ไม่มีแผงเทียบปีก่อนมาคู่) เรดาร์ได้ทั้งแถว: รูปซ้าย คำอธิบายขวา */
@media (min-width: 1100px) {
    .onr-radar-panel.is-wide .onr-radar {
        grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
        gap: 28px;
    }
}

.onr-radar-fig {
    max-width: 26rem;
    width: 100%;
    margin-inline: auto;
}

.onr-r-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.onr-r-svg text {
    font-family: var(--onr-sans);
}

.onr-r-ring {
    fill: none;
    stroke: var(--onr-line);
    stroke-width: 1;
}

.onr-r-ring.is-outer {
    stroke: var(--onr-line-bold);
}

.onr-r-spoke {
    stroke: var(--onr-line);
    stroke-width: 1;
}

/* ตัวเลขวงสเกลอยู่บนแผ่นสีกระดาษ วาดทับรูปทรงจึงอ่านได้เสมอ */
.onr-r-chip {
    fill: var(--onr-paper);
    stroke: var(--onr-line);
    stroke-width: 1;
}

.onr-r-scale {
    font-size: 12px;
    font-weight: 600;
    fill: var(--onr-muted);
    font-variant-numeric: tabular-nums;
}

.onr-r-area.is-school {
    fill: color-mix(in srgb, var(--onr-brand) 20%, transparent);
    stroke: var(--onr-brand);
    stroke-width: 2.4;
    stroke-linejoin: round;
}

.onr-r-area.is-nation {
    fill: none;
    stroke: var(--onr-nation);
    stroke-width: 1.8;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
}

.onr-r-dot.is-school {
    fill: var(--onr-tone, var(--onr-brand));
    stroke: var(--onr-paper);
    stroke-width: 2;
}

.onr-r-dot.is-nation {
    fill: var(--onr-nation);
}

.onr-r-label {
    fill: var(--onr-tone, var(--onr-ink));
}

.onr-r-name {
    font-size: 15px;
    font-weight: 600;
}

.onr-r-v {
    font-family: var(--onr-serif) !important;
    font-size: 14px;
    font-weight: 700;
    fill: var(--onr-ink);
    font-variant-numeric: tabular-nums;
}

.onr-radar-side .onr-shape-key {
    margin-bottom: 10px;
}

.onr-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 6px;
}

.onr-legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "dot name v"
        "dot sub sub";
    align-items: center;
    column-gap: 10px;
    padding: 8px 12px;
    background: var(--onr-paper-alt);
    border-radius: 12px;
    box-shadow: inset 3px 0 0 var(--onr-tone);
}

.onr-legend .onr-dot {
    grid-area: dot;
}

.onr-leg-name {
    grid-area: name;
    font-size: .92rem;
    font-weight: 600;
    color: var(--onr-ink);
}

.onr-leg-v {
    grid-area: v;
    font-family: var(--onr-serif);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--onr-tone, var(--onr-ink));
    font-variant-numeric: tabular-nums;
}

.onr-leg-sub {
    grid-area: sub;
    font-size: .8rem;
    color: var(--onr-muted);
    font-variant-numeric: tabular-nums;
}

.onr-leg-gap {
    margin-left: 4px;
    font-weight: 700;
}

.onr-leg-gap.is-up {
    color: var(--onr-up);
}

.onr-leg-gap.is-down {
    color: var(--onr-down);
}

/* ═══════════════════════════════════════════════════════════════════════
   ตาราง (เทียบปีก่อน + คะแนนแยกตามระดับ)
   ═══════════════════════════════════════════════════════════════════════ */

/* ★ position: relative ให้ .sr-only ในช่องตาราง (position: absolute) ถูกตัดโดยกล่องเลื่อนนี้
     ไม่งั้นข้อความซ่อนของคอลัมน์ขวาสุดดันทั้งหน้าให้กว้างเกินจอบนมือถือ */
.onr-scroll {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--onr-line);
    border-radius: 16px;
}

.onr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.onr-table th,
.onr-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--onr-line);
}

.onr-table thead th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--onr-muted);
    background: var(--onr-paper-alt);
    white-space: nowrap;
}

.onr-table tbody tr:last-child > * {
    border-bottom: 0;
}

.onr-table tbody tr:hover > * {
    background: color-mix(in srgb, var(--onr-brand) 4%, var(--onr-paper));
}

.onr-table .onr-num {
    text-align: right;
    white-space: nowrap;
}

.onr-table tbody th {
    font-weight: 600;
    color: var(--onr-ink);
}

.onr-steps tbody th {
    display: table-cell;
    white-space: nowrap;
}

.onr-steps tbody th .onr-dot {
    margin-right: 8px;
    vertical-align: -.05em;
}

.onr-steps tfoot > * > * {
    padding: 11px 14px;
    font-weight: 700;
    color: var(--onr-ink);
    background: var(--onr-paper-alt);
    border-top: 2px solid var(--onr-line-bold);
}

.onr-steps tfoot th {
    text-align: left;
}

.onr-step-c {
    min-width: 12rem;
}

.onr-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    white-space: nowrap;
}

.onr-step.is-up {
    color: var(--onr-up);
}

.onr-step.is-down {
    color: var(--onr-down);
}

.onr-step.is-flat {
    color: var(--onr-ink-2);
}

/* ดัมเบล: จุดกลวงคือปีก่อน จุดทึบคือปีนี้ เส้นเชื่อมยืดตามส่วนต่าง */
.onr-db {
    position: relative;
    display: block;
    height: 14px;
    margin-top: 6px;
    background: linear-gradient(var(--onr-line), var(--onr-line)) center / 100% 2px no-repeat;
}

.onr-db-line {
    position: absolute;
    top: 5px;
    height: 4px;
    border-radius: 2px;
    background: var(--onr-tone, var(--onr-brand));
    opacity: .45;
}

.onr-db.is-up .onr-db-line {
    transform-origin: left center;
}

.onr-db.is-down .onr-db-line {
    transform-origin: right center;
}

.onr-db-dot {
    position: absolute;
    top: 1px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
}

.onr-db-dot.is-prev {
    background: var(--onr-paper);
    border: 2px solid var(--onr-muted);
}

.onr-db-dot.is-now {
    background: var(--onr-tone, var(--onr-brand));
    border: 2px solid var(--onr-paper);
    box-shadow: 0 0 0 1px var(--onr-tone, var(--onr-brand));
}

.onr-steps tfoot .onr-db-line,
.onr-steps tfoot .onr-db-dot.is-now {
    --onr-tone: var(--onr-ink-2);
}

/* ── ตารางคะแนนแยกตามระดับ ─────────────────────────────────────────────── */
.onr-levels thead th:not(:first-child) {
    color: var(--onr-tone, var(--onr-muted));
}

.onr-levels thead th .onr-dot {
    margin-right: 6px;
    vertical-align: -.05em;
}

.onr-levels tbody th {
    min-width: 9.5rem;
    white-space: nowrap;
}

.onr-levels td {
    min-width: 7.6rem;
}

.onr-levels tr.is-school > * {
    background: color-mix(in srgb, var(--onr-brand) 7%, var(--onr-paper));
}

.onr-levels tr.is-school th {
    box-shadow: inset 4px 0 0 var(--onr-brand);
    font-family: var(--onr-serif);
    font-size: 1rem;
}

.onr-levels tr.is-school .onr-cell-n {
    font-size: 1.12rem;
}

.onr-levels tr.is-empty th {
    color: var(--onr-muted);
}

.onr-none {
    display: block;
    font-family: var(--onr-sans);
    font-size: .74rem;
    font-weight: 500;
    color: var(--onr-muted);
}

.onr-cell-n {
    display: block;
    font-family: var(--onr-serif);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--onr-ink);
}

.onr-cell-bar {
    position: relative;
    display: block;
    width: 100%;
    max-width: 8rem;
    height: 5px;
    margin-top: 5px;
    overflow: hidden;
    background: var(--onr-paper-alt);
    border-radius: 999px;
}

.onr-cell-fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: var(--onr-tone, var(--onr-brand));
    border-radius: 999px;
    transform-origin: left center;
}

.onr-cell-d {
    display: block;
    margin-top: 4px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--onr-muted);
    white-space: nowrap;
}

.onr-cell-d.is-up {
    color: var(--onr-up);
}

.onr-cell-d.is-down {
    color: var(--onr-down);
}

.onr-cell-dash {
    color: var(--onr-muted);
}

/* ── ท้ายหน้า ─────────────────────────────────────────────────────────── */
.onr-foot {
    padding: 18px 22px;
    background: var(--onr-paper);
    border: 1px solid var(--onr-line);
    border-radius: 18px;
    box-shadow: var(--onr-shadow);
}

.onr-foot-t {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--onr-serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--onr-ink);
}

.onr-foot-t .onr-icon {
    color: var(--onr-brand);
}

.onr-foot ul {
    display: grid;
    gap: 6px;
}

.onr-foot li {
    position: relative;
    padding-left: 18px;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--onr-ink-2);
}

.onr-foot li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--onr-brand);
}

/* ═══════════════════════════════════════════════════════════════════════
   ช่วงจอ
   ═══════════════════════════════════════════════════════════════════════ */

/* แถบตัวเลขหกช่อง: สามต่อแถวบนแท็บเล็ต สองต่อแถวบนมือถือ */
@media (max-width: 1099.98px) {
    .onr-stats[data-n="6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023.98px) {
    .onr-watermark {
        left: auto;
        right: -1rem;
        bottom: auto;
        top: 1rem;
        font-size: clamp(6rem, 3rem + 14vw, 10rem);
    }
}

/* การ์ดกระจกบนแท็บเล็ต: สองคอลัมน์ (คำตอบของปี | แท่งรายปี) วิชาที่ต้องดูเต็มแถวล่าง */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .onr-glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 22px;
    }

    .onr-glance-sec + .onr-glance-sec {
        padding-top: 0;
        border-top: 0;
    }

    .onr-glance-sec:nth-child(2) {
        padding-left: 22px;
        border-left: 1px solid rgba(255, 255, 255, .16);
    }

    .onr-glance-sec:nth-child(3) {
        grid-column: 1 / -1;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }
}

/* ผังส่วนต่างบนจอแคบ: ชื่อ+ตัวเลขแถวบน แถบเต็มแถวกลาง ตัวเลขประกอบแถวล่าง */
@media (max-width: 759.98px) {
    .onr-hero {
        padding-bottom: 84px;
    }

    .onr-body {
        margin-top: -60px;
    }

    .onr-panel-head {
        padding: 14px 16px;
    }

    .onr-panel-body {
        padding: 14px 14px 18px;
    }

    .onr-glance {
        padding: 14px;
        border-radius: 20px;
    }

    .onr-note {
        padding: 14px 16px;
    }

    .onr-gap-axis {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 4px 8px;
    }

    .onr-gap-axis-name,
    .onr-gap-axis-num {
        display: none;
    }

    .onr-gap {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "id num"
            "track track"
            "sub sub";
        row-gap: 8px;
        padding: 12px 12px 12px 14px;
    }

    .onr-table th,
    .onr-table td {
        padding: 9px 10px;
    }

    .onr-step-c {
        min-width: 9rem;
    }
}

@media (max-width: 639.98px) {
    .onr-stats,
    .onr-stats[data-n] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onr-stat {
        padding: 14px 14px 16px;
    }

    .onr-pick-k {
        min-width: 0;
        flex-basis: 100%;
    }
}

@media (max-width: 479.98px) {
    .onr-title {
        font-size: 2.1rem;
    }

    .onr-hero-main .onr-acts {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .onr-verdict {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ปีการศึกษาหกปีขึ้นไป: ตารางชิปเท่ากัน ไม่ให้ปีสุดท้ายตกแถวเดียว */
    .onr-chips.is-years {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
        width: 100%;
    }

    .onr .onr-chips.is-years .onr-chip {
        justify-content: center;
        padding: 0 8px;
    }

    .onr-count {
        grid-auto-flow: column;
        justify-content: start;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
        padding: 12px 16px;
    }

    .onr .onr-watch-a {
        grid-template-columns: minmax(0, 1fr);
    }

    .onr-watch-a .onr-tile {
        grid-auto-flow: column;
        justify-content: start;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
        padding: 12px 16px;
    }

    .onr-yr-v {
        font-size: .7rem;
    }

    .onr-yr-y {
        font-size: .68rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   การเคลื่อนไหว
   ★ ทุกอย่างมองเห็นได้ตั้งแต่แรก ที่ขยับมีแค่ตำแหน่ง ความยาวแถบ และการลากเส้น (ไม่มี opacity 0 เป็นสถานะพัก)
   ★ มีผลเฉพาะเมื่อสคริปต์ติดคลาส onr-motion ที่ .onr-shell แล้วเท่านั้น
   ★ ทุกแอนิเมชันเล่นครั้งเดียวแล้วจบ
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes onr-up {
    from {
        transform: translate3d(0, 18px, 0);
    }

    to {
        transform: none;
    }
}

@keyframes onr-drift {
    from {
        transform: translate3d(60px, -40px, 0) scale(.9);
    }

    to {
        transform: none;
    }
}

@keyframes onr-drift-b {
    from {
        transform: translate3d(-50px, 40px, 0) scale(.9);
    }

    to {
        transform: none;
    }
}

@keyframes onr-watermark {
    from {
        transform: translate3d(0, 40px, 0);
    }

    to {
        transform: none;
    }
}

.onr-motion .onr-hero-main > * {
    animation: onr-up .7s var(--onr-spring) backwards;
}

.onr-motion .onr-hero-main > :nth-child(2) {
    animation-delay: .06s;
}

.onr-motion .onr-hero-main > :nth-child(3) {
    animation-delay: .12s;
}

.onr-motion .onr-hero-main > :nth-child(4) {
    animation-delay: .18s;
}

.onr-motion .onr-hero-main > :nth-child(5) {
    animation-delay: .24s;
}

.onr-motion .onr-orb.is-a {
    animation: onr-drift 1.8s var(--onr-spring) backwards;
}

.onr-motion .onr-orb.is-b {
    animation: onr-drift-b 2.2s var(--onr-spring) .1s backwards;
}

.onr-motion .onr-watermark {
    animation: onr-watermark 1.6s var(--onr-spring) .1s backwards;
}

/* ส่วนที่เลื่อนเข้ามาในจอ: ยกขึ้นจากด้านล่าง ลูกในส่วนนั้นตามมาทีละตัว */
.onr-motion [data-onr-reveal] {
    transition: transform .75s var(--onr-spring), border-color .2s var(--onr-ease), box-shadow .2s var(--onr-ease);
}

.onr-motion [data-onr-reveal]:not(.is-in) {
    transform: translate3d(0, 28px, 0);
}

.onr-motion [data-onr-reveal] .onr-stat {
    transition: transform .6s var(--onr-spring);
    transition-delay: calc(var(--k, 0) * 45ms + 100ms);
}

.onr-motion [data-onr-reveal]:not(.is-in) .onr-stat {
    transform: translate3d(0, 16px, 0);
}

/* แถบ: ยืดออกจากเส้นกลาง (ส่วนต่าง) หรือจากซ้าย (คะแนน) เมื่อเข้ามาในจอ */
.onr-motion [data-onr-reveal] :is(.onr-gap-bar, .onr-cell-fill, .onr-duo-bar i, .onr-db-line) {
    transition: transform 1s var(--onr-spring) .25s;
}

.onr-motion [data-onr-reveal] .onr-gap:nth-child(2) .onr-gap-bar {
    transition-delay: .32s;
}

.onr-motion [data-onr-reveal] .onr-gap:nth-child(3) .onr-gap-bar {
    transition-delay: .39s;
}

.onr-motion [data-onr-reveal] .onr-gap:nth-child(4) .onr-gap-bar {
    transition-delay: .46s;
}

.onr-motion [data-onr-reveal] .onr-gap:nth-child(5) .onr-gap-bar {
    transition-delay: .53s;
}

.onr-motion [data-onr-reveal]:not(.is-in) :is(.onr-gap-bar, .onr-cell-fill, .onr-duo-bar i, .onr-db-line) {
    transform: scaleX(0);
}

/* แท่งรายปี: งอกออกจากเส้นกลางทีละแท่ง */
.onr-motion [data-onr-reveal] .onr-yr-bar {
    transition: transform .8s var(--onr-spring);
}

.onr-motion [data-onr-reveal] .onr-years li:nth-child(2) .onr-yr-bar { transition-delay: .06s; }
.onr-motion [data-onr-reveal] .onr-years li:nth-child(3) .onr-yr-bar { transition-delay: .12s; }
.onr-motion [data-onr-reveal] .onr-years li:nth-child(4) .onr-yr-bar { transition-delay: .18s; }
.onr-motion [data-onr-reveal] .onr-years li:nth-child(5) .onr-yr-bar { transition-delay: .24s; }
.onr-motion [data-onr-reveal] .onr-years li:nth-child(6) .onr-yr-bar { transition-delay: .3s; }
.onr-motion [data-onr-reveal] .onr-years li:nth-child(n+7) .onr-yr-bar { transition-delay: .36s; }

.onr-motion [data-onr-reveal]:not(.is-in) .onr-yr-bar {
    transform: scaleY(0);
}

/* เส้นแนวโน้มของโรงเรียนลากตัวเองหนึ่งครั้ง (pathLength = 1) */
.onr-motion [data-onr-reveal] .onr-t-line.is-school {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.3s var(--onr-ease) .2s;
}

.onr-motion [data-onr-reveal]:not(.is-in) .onr-t-line.is-school {
    stroke-dashoffset: 1;
}

/* รูปเรดาร์บานออกจากจุดศูนย์กลาง */
.onr-motion [data-onr-reveal] .onr-r-shapes {
    transition: transform .9s var(--onr-spring) .2s;
}

.onr-motion [data-onr-reveal]:not(.is-in) .onr-r-shapes {
    transform: scale(.2);
}

/* เฟรมแรกหลังติดคลาส: กระโดดไปตำแหน่งเริ่มโดยไม่เล่นทรานสิชันย้อนกลับ */
.onr-motion.onr-arming [data-onr-reveal],
.onr-motion.onr-arming [data-onr-reveal] * {
    transition: none !important;
}

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

    .onr [data-onr-reveal],
    .onr [data-onr-reveal] :is(.onr-stat, .onr-gap-bar, .onr-cell-fill, .onr-duo-bar i, .onr-db-line, .onr-yr-bar, .onr-r-shapes) {
        transform: none !important;
    }

    .onr .onr-t-line.is-school {
        stroke-dashoffset: 0 !important;
    }
}

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

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

html.tb1-contrast-high .onr {
    /* ตัวอักษรใน SVG ไม่โดนกฎ !important ของไฟล์กลาง จึงต้องพลิกโทเคนที่ SVG ใช้เอง */
    --onr-paper: #000000;
    --onr-paper-alt: #000000;
    --onr-ink: #ffffff;
    --onr-ink-2: #ffffff;
    --onr-muted: #ffffff;
    --onr-line: #ffffff;
    --onr-line-bold: #ffffff;
    --onr-brand: #ffffff;
    --onr-brand-soft: #000000;
    --onr-brand-line: #ffffff;
    --onr-shadow: none;
    --onr-shadow-float: none;
    --onr-on-hero-2: #ffffff;
    --onr-gold-text: #facc15;
    --onr-up: #ffffff;
    --onr-down: #facc15;
    --onr-warn: #facc15;
    --onr-nation: #ffffff;
    --onr-s-thai: #ffffff;
    --onr-s-math: #ffffff;
    --onr-s-sci: #ffffff;
    --onr-s-eng: #ffffff;
    --onr-s-social: #ffffff;
    --onr-s-other: #ffffff;
}

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

html.tb1-contrast-high .onr .onr-hero {
    padding-bottom: 36px;
}

html.tb1-contrast-high .onr .onr-body {
    margin-top: 28px;
}

html.tb1-contrast-high .onr-hero::before,
html.tb1-contrast-high .onr-hero::after,
html.tb1-contrast-high .onr-hero-fx {
    display: none;
}

html.tb1-contrast-high .onr :where(.onr-tag, .onr-glance, .onr-count, .onr-tile, .onr-stats, .onr-stat-ic, .onr-panel, .onr-panel-head,
    .onr-panel-ic, .onr-note, .onr-note-ic, .onr-scroll, .onr-table th, .onr-table td, .onr-flag, .onr-gap, .onr-gap-track,
    .onr-band-pill, .onr-trend, .onr-trend-now, .onr-legend li, .onr-foot, .onr-chip-n, .onr-duo-bar, .onr-cell-bar, .onr-yr,
    .onr-trend-sum, .onr-ts-list li) {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html.tb1-contrast-high .onr :where(.onr-glance, .onr-panel, .onr-note, .onr-flag, .onr-foot, .onr-scroll, .onr-gap, .onr-trend,
    .onr-legend li, .onr-count, .onr-tile, .onr-stat-ic, .onr-panel-ic, .onr-note-ic, .onr-band-pill, .onr-duo-bar, .onr-cell-bar,
    .onr-trend-sum, .onr-ts-list li) {
    border: 1px solid #ffffff !important;
}

html.tb1-contrast-high .onr .onr-tag.is-warn,
html.tb1-contrast-high .onr .onr-tag.is-warn * {
    color: #facc15 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .onr :where(.onr-count, .onr-tile) * {
    color: #ffffff !important;
}

html.tb1-contrast-high .onr .onr-verdict.is-down .onr-count *,
html.tb1-contrast-high .onr .onr-watch-a.is-below .onr-tile * {
    color: #facc15 !important;
}

/* สิ่งที่ต้องจัดการ: กรอบเหลืองหนา */
html.tb1-contrast-high .onr .onr-note.is-warn,
html.tb1-contrast-high .onr .onr-flag:not(.is-info),
html.tb1-contrast-high .onr .onr-gap.is-down,
html.tb1-contrast-high .onr .onr-band-pill:is(.is-below, .is-far-below) {
    border: 3px solid #facc15 !important;
}

html.tb1-contrast-high .onr .onr-stat.is-warn .onr-stat-v b {
    color: #facc15 !important;
}

/* ลิงก์ที่มีกรอบของตัวเอง: พื้นดำ ขอบเหลือง ชี้แล้วกลับสี */
html.tb1-contrast-high .onr :where(a.onr-btn, button.onr-btn, a.onr-chip, a.onr-watch-a, a.onr-yr) {
    color: #facc15 !important;
    background: #000000 !important;
    border: 2px solid #facc15 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html.tb1-contrast-high .onr :where(a.onr-btn, button.onr-btn, a.onr-chip, a.onr-watch-a, a.onr-yr) * {
    color: #facc15 !important;
}

html.tb1-contrast-high .onr a.onr-chip[aria-current="page"],
html.tb1-contrast-high .onr .is-current a.onr-yr {
    border-width: 4px !important;
}

html.tb1-contrast-high .onr :where(a.onr-btn, button.onr-btn, a.onr-chip, a.onr-watch-a, a.onr-yr):hover,
html.tb1-contrast-high .onr :where(a.onr-btn, button.onr-btn, a.onr-chip, a.onr-watch-a, a.onr-yr):hover * {
    color: #000000 !important;
    background: #facc15 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .onr a.onr-watch-a:hover .onr-tile,
html.tb1-contrast-high .onr a.onr-watch-a:hover .onr-tile * {
    color: #000000 !important;
    background: #facc15 !important;
}

html.tb1-contrast-high .onr :focus-visible,
html.tb1-contrast-high .onr-hero :focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 3px;
}

html.tb1-contrast-high .onr :where(.onr-gap-bar, .onr-cell-fill, .onr-duo-bar i, .onr-db-line, .onr-dot) {
    background-color: #ffffff !important;
}

html.tb1-contrast-high .onr .onr-gap-bar.is-down,
html.tb1-contrast-high .onr .is-down .onr-yr-bar {
    background: repeating-linear-gradient(135deg, #facc15 0 3px, #000000 3px 6px) !important;
}

html.tb1-contrast-high .onr .is-up .onr-yr-bar {
    background: #ffffff !important;
}

html.tb1-contrast-high .onr .onr-gap-zero {
    background: #facc15;
}

html.tb1-contrast-high .onr .onr-t-sel {
    fill: #333333;
}

html.tb1-contrast-high .onr .onr-t-val {
    stroke: #000000;
}

html.tb1-contrast-high .onr .onr-r-area.is-school {
    fill: rgba(255, 255, 255, .25);
    stroke: #ffffff;
}

html.tb1-contrast-high .onr .onr-title,
html.tb1-contrast-high .onr .onr-lead {
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ฉบับพิมพ์: หน้านี้คือเอกสารที่โรงเรียนพิมพ์ส่งเทศบาลทุกปี กราฟต้องติดกระดาษ
   หัวใบ → การ์ดสรุป + แถบตัวเลข → ส่วนต่าง → แนวโน้ม → เรดาร์คู่เทียบปีก่อน → ตาราง
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body.onr-page {
        background: #ffffff;
    }

    /* ส่วนท้ายเว็บ (เมนู ที่อยู่ แผนที่) ไม่ใช่ส่วนของรายงานที่ส่งต้นสังกัด เฉพาะตอนพิมพ์หน้านี้ */
    body.onr-page .premium-footer,
    body.onr-page a.onr-skip,
    .onr-hero-fx,
    .onr-hero::before,
    .onr-hero::after,
    .onr-acts,
    .onr-pick,
    .onr-glance-note,
    .onr-glance-more a,
    .onr-panel-ic,
    .onr-foot li:last-child {
        display: none !important;
    }

    .onr {
        --onr-paper: #ffffff;
        --onr-paper-alt: #f3f4f6;
        --onr-ink: #000000;
        --onr-ink-2: #1f2937;
        --onr-muted: #374151;
        --onr-line: #9ca3af;
        --onr-line-bold: #6b7280;
        --onr-brand: #1e3a8a;
        --onr-brand-soft: #ffffff;
        --onr-brand-line: #9ca3af;
        --onr-on-hero-2: #1f2937;
        --onr-shadow: none;
        --onr-shadow-float: none;
        --onr-gold-text: #000000;
        color: #000000;
    }

    .onr-wrap {
        max-width: none;
        padding-inline: 0;
    }

    .onr-hero {
        padding: 0 0 8px;
        color: #000000;
        background: none !important;
        border-bottom: 2px solid #000000;
    }

    .onr-hero-top {
        display: block;
    }

    .onr-tags {
        margin-bottom: 6px;
    }

    .onr-tag,
    .onr-tag.is-warn {
        color: #000000;
        background: none;
        border-color: #6b7280;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .onr-title,
    .onr-title-y {
        color: #000000;
        text-shadow: none;
    }

    .onr-title {
        font-size: 1.7rem;
    }

    .onr-lead {
        margin-top: 4px;
        font-size: .86rem;
    }

    /* การ์ดสรุปเป็นกล่องขอบเทาสามคอลัมน์ */
    .onr-glance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 10px;
        padding: 10px 12px;
        color: #000000;
        background: none;
        border: 1px solid #6b7280;
        border-radius: 10px;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        break-inside: avoid;
    }

    .onr-glance-sec + .onr-glance-sec {
        padding-top: 0;
        padding-left: 12px;
        border-top: 0;
        border-left: 1px solid #9ca3af;
    }

    .onr-glance-k,
    .onr-verdict-t b,
    .onr-duo b,
    .onr-yr-v,
    .onr-watch-t > b,
    .onr-watch-t > span:first-of-type,
    .onr-glance-more b {
        color: #000000;
    }

    .onr-glance-k {
        font-size: .9rem;
        margin-bottom: 6px;
    }

    .onr-verdict {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .onr-count,
    .onr-tile {
        justify-content: start;
        grid-auto-flow: column;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        padding: 0;
        color: #000000 !important;
        background: none !important;
        box-shadow: none;
    }

    .onr-count b,
    .onr-tile b {
        font-size: 1.5rem;
    }

    .onr-duo-bar {
        background: #e5e7eb;
    }

    .onr-duo-bar i {
        background: #1f2937;
    }

    .onr-duo .is-nation .onr-duo-bar i {
        background: repeating-linear-gradient(90deg, #6b7280 0 6px, #d1d5db 6px 9px);
    }

    .onr-yr-plot {
        height: 46px;
    }

    .onr-yr-plot::before {
        background: #000000;
    }

    .is-up .onr-yr-bar {
        background: #1f2937;
    }

    .is-down .onr-yr-bar {
        background: repeating-linear-gradient(135deg, #1f2937 0 2px, #ffffff 2px 4px);
        outline: 1px solid #1f2937;
    }

    .onr-yr-none {
        border-color: #6b7280;
    }

    .onr .is-current .onr-yr {
        background: none;
        border: 1.5px solid #000000;
    }

    .onr-yr-y,
    .is-current .onr-yr-y {
        color: #000000;
    }

    .onr .onr-watch-a {
        display: block;
        padding: 0;
        color: #000000;
        background: none;
        border: 0;
    }

    .onr-watch-t {
        margin-top: 4px;
    }

    .onr-band {
        margin-top: 10px;
    }

    .onr-stats,
    .onr-stats[data-n] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        background: none;
        border: 1px solid #6b7280;
        border-radius: 10px;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        break-inside: avoid;
    }

    .onr-stat {
        gap: 2px;
        padding: 6px 8px;
        box-shadow: -1px 0 0 0 #9ca3af;
    }

    .onr-stat-ic {
        display: none;
    }

    .onr-stat-k,
    .onr-stat-v,
    .onr-stat-s {
        font-size: .7rem;
        color: #1f2937;
    }

    .onr-stat-v b,
    .onr-stat.is-warn .onr-stat-v b {
        font-size: 1.15rem;
        color: #000000;
    }

    .onr-body {
        display: block;
        margin-top: 12px;
        padding-bottom: 0;
    }

    .onr-body > * + *,
    .onr-duet > * + * {
        margin-top: 12px;
    }

    .onr-duet {
        display: block;
    }

    .onr-panel,
    .onr-note,
    .onr-foot {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .onr-panel-head {
        padding: 4px 0;
        background: none;
        border: 0;
        border-bottom: 1.5px solid #000000;
        border-radius: 0;
    }

    .onr-panel-title {
        font-size: 1.02rem;
    }

    .onr-panel-body {
        padding: 8px 0 0;
    }

    .onr-lede {
        margin-bottom: 8px;
        font-size: .8rem;
    }

    /* ★ หน้า A4 กว้างไม่ถึง 760px กฎจอแคบจึงทำงานตอนพิมพ์ ต้องคืนผังส่วนต่างเป็นแถวเดียว */
    .onr-gap-axis,
    .onr-gap {
        grid-template-columns: 10.5rem minmax(0, 1fr) 5.8rem;
    }

    .onr-gap {
        grid-template-areas:
            "id track num"
            "sub track num";
        row-gap: 0;
    }

    .onr-gap-axis {
        padding: 0 8px 4px 10px;
    }

    .onr-gap-axis-name,
    .onr-gap-axis-num {
        display: block !important;
    }

    .onr-glance-sec:nth-child(2),
    .onr-glance-sec:nth-child(3) {
        grid-column: auto;
        padding-top: 0;
        padding-left: 12px;
        border-top: 0;
        border-left: 1px solid #9ca3af;
    }

    .onr-gap {
        padding: 6px 8px 6px 10px;
        border-color: #9ca3af;
        break-inside: avoid;
    }

    .onr-gap-track {
        height: 22px;
    }

    .onr-gap-bar {
        top: 4px;
        bottom: 4px;
    }

    .onr-trends,
    .onr-trends[data-n] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .onr-trends[data-n="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onr-trend {
        padding: 6px 6px 4px;
        border-color: #9ca3af;
        break-inside: avoid;
    }

    .onr-trend-now {
        padding: 3px 6px;
        font-size: .7rem;
    }

    .onr-radar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .onr-radar-fig {
        max-width: 18rem;
    }

    .onr-radar-panel,
    .onr-step-panel {
        break-inside: avoid;
    }

    .onr-legend li {
        padding: 3px 8px;
    }

    .onr-scroll {
        overflow: visible;
        border-color: #9ca3af;
    }

    .onr-table {
        font-size: .76rem;
    }

    .onr-table th,
    .onr-table td {
        padding: 4px 8px;
    }

    .onr-levels td {
        min-width: 0;
    }

    .onr-table tbody tr,
    .onr-foot {
        break-inside: avoid;
    }

    .onr-foot {
        padding: 8px 0 0;
        border-top: 1px solid #9ca3af;
    }

    .onr-foot li {
        font-size: .74rem;
    }

    /* สีที่เป็นข้อมูลต้องติดกระดาษ */
    .onr-gap-track,
    .onr-gap-bar,
    .onr-gap-zero,
    .onr-gap,
    .onr-dot,
    .onr-trend,
    .onr-cell-bar,
    .onr-cell-fill,
    .onr-duo-bar,
    .onr-duo-bar i,
    .onr-yr-bar,
    .onr-db,
    .onr-db-line,
    .onr-db-dot,
    .onr-legend li,
    .onr-levels tr.is-school > *,
    .onr-band-pill {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .onr [data-onr-reveal],
    .onr [data-onr-reveal] *,
    .onr .onr-hero-main > * {
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .onr .onr-t-line.is-school {
        stroke-dashoffset: 0 !important;
    }
}