/* ═══════════════════════════════════════════════════════════════════════
   บัญชีสำรวจจำนวนนักเรียน — report_student.php
   โรงเรียนเทศบาล ๑ กิตติขจร

   รอบ 24 ก.ย. 2569: ภาษาภาพเดียวกับ /zerodropout/ ชุดเดียวกับ css/tb1-personal-detail.css
   css/tb1-teacher-schedules.css และ css/tb1-personal-report.css
   หัวหน้าน้ำเงินไล่เฉด การ์ดตัวเลขลอยทับขอบล่าง แถบเครื่องมือติดหัวจอ แผนภูมิแท่งรายห้องพร้อมเส้นเกณฑ์

   ★ โทเคนของหน้าทุกตัวเป็น alias ที่ชี้ไป --tb1-* โหมดมืดจึงพลิกให้เอง
   ★ สีไม่ใช่ตัวบอกเดียว: ห้องเกินเกณฑ์มีกรอบและลูกศรขึ้น ห้องต่ำกว่าเกณฑ์มีกรอบเส้นประและลูกศรลง
     ตัวเลขชาย หญิง เขียนกำกับทุกที่ ตารางรายห้องมีป้ายสถานะเป็นคำ
   ★ ไม่มี opacity:0 เป็นสถานะพัก ที่ขยับได้มีแค่ตำแหน่ง ความสูงแท่ง ความยาวแถบ และเส้นเกณฑ์
   ★ ธีมกลางบังคับ font-family ของ span div li p a ด้วย !important
     ตัวเลขที่ต้องเป็นตัวเซริฟจึงใช้ <b>
   ★ ทุก selector ขึ้นต้นด้วย rs- ไม่ชนกับหน้าอื่นหรือไฟล์กลาง
     (css/student-report-suite.css ของหน้าวิเคราะห์ไม่ได้โหลดในหน้านี้แล้ว)
   ═══════════════════════════════════════════════════════════════════════ */

.rs {
    --rs-ink: var(--tb1-ink-1, #0f172a);
    --rs-ink-2: var(--tb1-ink-2, #334155);
    --rs-muted: var(--tb1-ink-3, #5a697f);
    --rs-page: var(--tb1-page, #f8fafc);
    --rs-paper: var(--tb1-surface, #ffffff);
    --rs-paper-alt: var(--tb1-surface-alt, #f1f5f9);
    --rs-line: var(--tb1-border, #e2e8f0);
    --rs-line-bold: var(--tb1-border-bold, #cbd5e1);
    --rs-brand: var(--tb1-brand, #1d4ed8);
    --rs-brand-soft: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 10%, var(--tb1-surface, #ffffff));
    --rs-brand-line: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 35%, var(--tb1-border, #e2e8f0));
    --rs-page-max: var(--tb1-page-max-width, 1440px);
    --rs-gutter: var(--tb1-shell-gutter, 20px);
    --rs-ease: cubic-bezier(.4, 0, .2, 1);
    --rs-r: 16px;
    --rs-rs: 12px;
    --rs-serif: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    --rs-sans: var(--tb1-font-body, 'Sarabun', sans-serif);
    --rs-shadow: 0 14px 32px -24px rgba(15, 23, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
    --rs-shadow-float: 0 22px 44px -26px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
    --rs-hero-a: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 60%, var(--tb1-ink-surface, #0f172a));
    --rs-hero-b: var(--tb1-banner-1, #1d4ed8);
    --rs-hero-c: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 78%, var(--tb1-accent-strong, #0284c7));

    /* ความหมายของสี */
    --rs-neutral: color-mix(in srgb, var(--tb1-ink-3, #5a697f) 80%, var(--tb1-surface, #ffffff));
    --rs-warn: var(--tb1-warning, #f59e0b);
    --rs-warn-fg: #9a4508;
    --rs-warn-bg: color-mix(in srgb, var(--tb1-warning, #f59e0b) 14%, var(--tb1-surface, #ffffff));
    --rs-crit: var(--tb1-danger, #ef4444);
    /* ★ โทเคน text-danger ของโหมดสว่าง (#dc2626) บนพื้นแดงอ่อนได้ 4.2:1 ไม่ผ่าน AA หน้านี้จึงใช้เฉดเข้มกว่า */
    --rs-crit-fg: #b91c1c;
    --rs-crit-bg: color-mix(in srgb, var(--tb1-danger, #ef4444) 11%, var(--tb1-surface, #ffffff));
    --rs-ok: var(--tb1-success, #10b981);
    --rs-ok-fg: var(--tb1-text-success, #047857);
    --rs-ok-bg: color-mix(in srgb, var(--tb1-success, #10b981) 13%, var(--tb1-surface, #ffffff));
    --rs-info: var(--tb1-info, #0ea5e9);
    --rs-info-fg: var(--tb1-text-info, #0e7490);
    --rs-info-bg: color-mix(in srgb, var(--tb1-info, #0ea5e9) 12%, var(--tb1-surface, #ffffff));
    --rs-tip-bg: var(--tb1-ink-surface, #0f172a);
    --rs-tip-ink: #f8fafc;

    /* ชาย หญิง ไม่ระบุ — โทเคนกลางชุดเดียวกับทุกหน้า (--tb1-male / --tb1-female)
       ★ สีไม่ใช่ตัวบอกเดียว: ตัวเลขชาย หญิง เขียนกำกับไว้ทุกที่ แถบในแผนภูมิมีทูลทิปและตารางรายห้องรองรับ */
    --rs-male: var(--tb1-male, #2563eb);
    --rs-female: var(--tb1-female, #14b8a6);
    --rs-unknown: color-mix(in srgb, var(--tb1-ink-3, #5a697f) 34%, var(--tb1-surface, #ffffff));
    /* ม.ต้น ม.ปลาย — สีแบรนด์เข้มกับอ่อน (ไม่ใช่สถานะ จึงไม่ใช้สีเตือน) */
    --rs-lower: var(--tb1-brand, #1d4ed8);
    --rs-upper: color-mix(in srgb, var(--tb1-accent, #0ea5e9) 70%, var(--tb1-surface, #ffffff));
    /* เกณฑ์ห้อง: เกิน = สีเตือน · ต่ำกว่า = สีข้อมูล (ห้องเล็กไม่ใช่ความผิด อาจเป็นห้องเฉพาะทาง) */
    --rs-over: var(--tb1-warning, #f59e0b);
    --rs-over-fg: #9a4508;
    --rs-over-bg: color-mix(in srgb, var(--tb1-warning, #f59e0b) 14%, var(--tb1-surface, #ffffff));
    --rs-low: var(--tb1-info, #0ea5e9);
    --rs-low-fg: #0b5f7a;
    --rs-low-bg: color-mix(in srgb, var(--tb1-info, #0ea5e9) 12%, var(--tb1-surface, #ffffff));
    --rs-plot-h: 260px;
    --rs-pad: 26px;
    --rs-foot: 62px;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .rs {
    --rs-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 16%, var(--tb1-surface, #111c31));
    --rs-shadow: 0 14px 32px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .055);
    --rs-shadow-float: 0 22px 44px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .055);
    --rs-neutral: color-mix(in srgb, var(--tb1-ink-3, #94a3b8) 72%, var(--tb1-surface, #111c31));
    --rs-crit-fg: var(--tb1-text-danger, #fda4af);
    --rs-warn-fg: var(--tb1-text-warning, #fbbf24);
    --rs-unknown: color-mix(in srgb, var(--tb1-ink-3, #94a3b8) 40%, var(--tb1-surface, #111c31));
    --rs-upper: color-mix(in srgb, var(--tb1-accent, #38bdf8) 55%, var(--tb1-surface, #111c31));
    --rs-over-fg: var(--tb1-text-warning, #fbbf24);
    --rs-over-bg: color-mix(in srgb, var(--tb1-warning, #f59e0b) 16%, var(--tb1-surface, #111c31));
    --rs-low-fg: var(--tb1-text-info, #67e8f9);
    --rs-low-bg: color-mix(in srgb, var(--tb1-info, #0ea5e9) 16%, var(--tb1-surface, #111c31));
    --rs-tip-bg: #1b2a47;
    color-scheme: dark;
}

/* โหมดมืดสีแบรนด์เป็นฟ้าอ่อน ตัวอักษรบนพื้นแบรนด์จึงต้องเป็นสีเข้ม */
:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .rs :is(.rs-chip[aria-current="true"], .rs-nav-a[aria-current="location"], .rs-suite-a[aria-current="page"]) {
    color: #0b1324;
}

/* ── เปลือกหน้า ────────────────────────────────────────────────────────
   ★ หน้านี้ไม่ได้โหลด Bootstrap แล้ว จึงต้องล้าง margin 8px ของ body เอง
   ★ หน้าที่ไม่ทาพื้น body เอง จะได้ตัวอักษรสว่างบนพื้นขาวในโหมดมืด */
body.rs-page {
    margin: 0;
    background: var(--tb1-page, #f8fafc);
    color: var(--tb1-ink-2, #334155);
}

/* ★ แถบเมนู (57px) กับแถบเครื่องมือของหน้า (sticky ทั้งคู่) ต้องไม่บังหัวข้อที่กระโดดไปถึง
   สคริปต์วัดความสูงจริงแล้วเขียน --rs-stick ให้ ไม่มีสคริปต์ใช้ค่าประมาณ */
html:has(body.rs-page) {
    scroll-padding-top: var(--rs-stick, 8.5rem);
}

main.rs {
    padding: 0 var(--rs-gutter) clamp(40px, 5vw, 72px);
    color: var(--rs-ink-2);
}

main.rs:focus {
    outline: none;
}

/* ★ ขอบเนื้อหาต้องตรงแนวกับแถบเมนู สูตรเดียวกับ .tb1-navbar-container */
.rs-wrap {
    max-width: calc(var(--rs-page-max) - 2 * var(--rs-gutter));
    margin-inline: auto;
}

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

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

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

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

.rs-icon {
    display: block;
    flex: 0 0 auto;
}

.rs .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

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

body.rs-page a.rs-skip:focus {
    width: auto;
    height: auto;
    clip: auto;
    padding: 12px 18px;
    color: #ffffff;
    background: var(--tb1-banner-1, #1d4ed8);
    border-radius: 0 0 10px 0;
    text-decoration: underline;
}

html.tb1-contrast-high body.rs-page a.rs-skip:focus {
    color: #facc15;
    background: #000000;
    outline: 3px solid #facc15;
}

/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้า
   ═══════════════════════════════════════════════════════════════════════ */

.rs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-inline: calc(-1 * var(--rs-gutter));
    padding: clamp(34px, 5vw, 58px) var(--rs-gutter) clamp(92px, 9vw, 120px);
    color: #ffffff;
    text-align: center;
    /* ★ สีพื้นทึบอยู่ใต้ไล่เฉด ตัวตรวจคอนทราสต์อ่านค่านี้ และเป็นสีที่เห็นจริงตรงกลางหัวหน้า */
    background-color: var(--rs-hero-b);
    background-image: linear-gradient(135deg, var(--rs-hero-a) 0%, var(--rs-hero-b) 52%, var(--rs-hero-c) 100%);
}

.rs-hero.is-plain {
    padding-bottom: clamp(34px, 5vw, 58px);
}

/* แสงนวลสองดวงกับตารางเส้นบาง ตกแต่งล้วน อยู่หลังตัวอักษร */
.rs-hero::before,
.rs-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.rs-hero::before {
    background-image:
        radial-gradient(circle at 18% 40%, rgba(255, 255, 255, .09) 0%, transparent 48%),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .07) 0%, transparent 40%);
}

.rs-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 35%, transparent);
    mask-image: linear-gradient(180deg, #000000 35%, transparent);
}

.rs-hero-in {
    max-width: 60rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rs-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: .88rem;
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.rs-hero-eyebrow .rs-icon {
    width: 17px;
    height: 17px;
}

.rs-hero-title {
    margin-top: 16px;
    font-family: var(--rs-serif);
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    text-wrap: balance;
}

.rs-hero-sub {
    margin-top: 10px;
    max-width: 46rem;
    text-wrap: balance;
    font-size: clamp(.98rem, 1.5vw, 1.08rem);
    line-height: 1.75;
    color: #e0e7ff;
}

.rs-hero-date {
    margin-top: 4px;
    font-size: .92rem;
    color: #e0e7ff;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ดตัวเลข ลอยทับขอบล่างของหัวหน้า (ทั้งใบเป็นลิงก์ไปหมวดของมัน)
   ═══════════════════════════════════════════════════════════════════════ */

.rs-figs {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(66px, 7vw, 86px));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

.rs-figs > li {
    min-width: 0;
    display: flex;
}

.rs .rs-fig {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 16px 16px;
    color: var(--rs-muted);
    text-decoration: none;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r);
    box-shadow: var(--rs-shadow-float);
    transition: border-color .25s var(--rs-ease), box-shadow .25s var(--rs-ease);
}

.rs .rs-fig:hover {
    border-color: var(--rs-brand-line);
    box-shadow: 0 26px 48px -26px rgba(15, 23, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.rs .rs-fig:focus-visible {
    outline-offset: 3px;
}

/* แถบสีบนขอบการ์ด เปลี่ยนสีตามสถานะ */
.rs-fig::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
    transform-origin: left center;
}

.rs-fig.is-warn::before {
    background: var(--rs-warn);
}

.rs-fig.is-crit::before {
    background: var(--rs-crit);
}

.rs-fig-k {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--rs-muted);
}

.rs-fig-ic {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent-strong, #0284c7));
    border-radius: 11px;
}

.rs-fig.is-warn .rs-fig-ic {
    background: linear-gradient(135deg, #b45309, #d97706);
}

.rs-fig.is-crit .rs-fig-ic {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
}

.rs-fig-v {
    margin-top: 2px;
    color: var(--rs-muted);
    font-size: .95rem;
}

.rs-fig-v b {
    font-family: var(--rs-serif);
    font-size: clamp(1.6rem, 2.3vw, 2.05rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rs-fig.is-warn .rs-fig-v b {
    color: var(--rs-warn-fg);
}

.rs-fig.is-crit .rs-fig-v b {
    color: var(--rs-crit-fg);
}

.rs-fig-s {
    font-size: .86rem;
    line-height: 1.5;
    color: var(--rs-muted);
    overflow-wrap: anywhere;
}

.rs-fig.is-warn .rs-fig-s {
    color: var(--rs-warn-fg);
    font-weight: 600;
}

.rs-fig.is-crit .rs-fig-s {
    color: var(--rs-crit-fg);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   กล่องแจ้ง (ดึงข้อมูลไม่สำเร็จ · เปิดหน้าไม่ได้)
   ═══════════════════════════════════════════════════════════════════════ */

.rs-callout {
    margin-top: clamp(22px, 3vw, 32px);
    padding: 18px 22px;
    color: var(--rs-ink-2);
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-left: 5px solid var(--rs-brand);
    border-radius: var(--rs-rs);
    box-shadow: var(--rs-shadow);
    line-height: 1.7;
}

.rs-callout.is-warn {
    background: var(--rs-warn-bg);
    border-color: var(--rs-warn);
}

.rs-callout-title {
    font-family: var(--rs-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rs-ink);
}

.rs-callout p {
    margin-top: 4px;
}

.rs-callout ul {
    margin-top: 8px;
    padding-left: 1.3rem;
    list-style: disc;
}

/* ═══════════════════════════════════════════════════════════════════════
   บุคคลทั่วไป / บุคลากร
   ป้าย "เฉพาะบุคลากร" ขึ้นในมุมมองบุคลากรเท่านั้น (หน้าสาธารณะไม่มีส่วนเหล่านั้นอยู่ใน HTML เลย)
   ═══════════════════════════════════════════════════════════════════════ */

.rs-lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px 2px 8px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    color: #6d28d9;
    background: color-mix(in srgb, #7c3aed 9%, var(--rs-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--rs-paper));
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.rs-lock .rs-icon {
    width: 13px;
    height: 13px;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .rs .rs-lock {
    color: #c4b5fd;
}

.rs-fig-lock {
    display: inline-flex;
    vertical-align: -2px;
    margin-left: 6px;
    color: #6d28d9;
}

.rs-fig-lock .rs-icon {
    width: 14px;
    height: 14px;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .rs .rs-fig-lock {
    color: #c4b5fd;
}

.rs-audience {
    margin-top: clamp(18px, 2.4vw, 26px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--rs-ink-2);
    background: color-mix(in srgb, #7c3aed 6%, var(--rs-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 28%, var(--rs-line));
    border-radius: var(--rs-rs);
}

.rs-audience.is-preview {
    background: var(--rs-brand-soft);
    border-color: var(--rs-brand-line);
}

.rs-audience p {
    flex: 1 1 18rem;
    min-width: 0;
}

.rs-audience b {
    color: var(--rs-ink);
}

.rs-audience-ic {
    width: 34px;
    height: 34px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #6d28d9;
    background: var(--rs-paper);
    border-radius: 10px;
}

.rs-audience.is-preview .rs-audience-ic {
    color: var(--rs-brand);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .rs .rs-audience-ic {
    color: #c4b5fd;
}

.rs .rs-audience .rs-btn {
    text-decoration: none;
}

.rs .rs-link {
    color: var(--rs-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   แถบเครื่องมือ ติดใต้แถบเมนูตอนเลื่อน
   ═══════════════════════════════════════════════════════════════════════ */

.rs-tools {
    position: sticky;
    top: var(--rs-nav-h, 57px);
    z-index: 20;
    margin-top: clamp(22px, 3vw, 34px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--rs-paper) 90%, transparent);
    border: 1px solid var(--rs-line);
    border-radius: 999px;
    box-shadow: var(--rs-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.rs-nav {
    min-width: 0;
    flex: 1 1 auto;
}

.rs-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rs .rs-nav-a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--rs-ink-2);
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .2s var(--rs-ease), color .2s var(--rs-ease);
}

.rs .rs-nav-a:hover {
    color: var(--rs-brand);
    background: var(--rs-brand-soft);
}

.rs .rs-nav-a[aria-current="location"] {
    color: #ffffff;
    background: var(--rs-brand);
}

.rs-nav-n {
    min-width: 22px;
    padding: 0 7px;
    font-size: .8rem;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    background: #b45309;
    border-radius: 999px;
}

.rs-tools-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-left: auto;
}

.rs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 16px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--rs-ink-2);
    background: var(--rs-paper);
    border: 1px solid var(--rs-line-bold);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}

.rs-btn:hover {
    color: var(--rs-brand);
    border-color: var(--rs-brand);
}

.rs-btn .rs-icon {
    width: 18px;
    height: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   หมวดและแผง
   ═══════════════════════════════════════════════════════════════════════ */

.rs-sec {
    margin-top: clamp(34px, 4.4vw, 56px);
}

.rs-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rs-line);
}

/* หัวเรื่องมีขีดสีนำ แบบหัวเรื่องย่อยของ zerodropout */
.rs-sec-title {
    position: relative;
    padding-left: 16px;
    font-family: var(--rs-serif);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--rs-ink);
    text-wrap: balance;
}

.rs-sec-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
    transform-origin: center top;
}

.rs-sec-count {
    padding: 3px 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--rs-brand);
    background: var(--rs-brand-soft);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.rs-sec-note {
    margin-top: 12px;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--rs-muted);
}

.rs-grid-2 {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
    align-items: start;
}

.rs-panel {
    min-width: 0;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r);
    box-shadow: var(--rs-shadow);
    overflow: hidden;
}

.rs-sec > .rs-panel {
    margin-top: 18px;
}

.rs-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rs-line);
    background: linear-gradient(180deg, var(--rs-paper-alt), var(--rs-paper));
}

.rs-panel-ic {
    width: 34px;
    height: 34px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--rs-brand);
    background: var(--rs-brand-soft);
    border-radius: 10px;
}

.rs-panel-ic .rs-icon {
    width: 18px;
    height: 18px;
}

.rs-panel-title {
    font-family: var(--rs-serif);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rs-ink);
}

.rs-panel-note {
    margin-left: auto;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--rs-muted);
}

.rs-panel-body {
    position: relative;
    padding: 16px 20px 18px;
}

.rs-note {
    margin-bottom: 14px;
    max-width: 72ch;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--rs-muted);
}

.rs-empty {
    padding: 18px 0;
    font-size: .92rem;
    color: var(--rs-muted);
}

.rs-foot-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--rs-line-bold);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--rs-muted);
}

.rs-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rs-line);
    font-size: .84rem;
    color: var(--rs-muted);
}

.rs-legend b {
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.rs-legend-end {
    margin-left: auto;
}

.rs-about {
    margin-top: clamp(28px, 3.4vw, 40px);
    padding: 18px 22px;
    background: var(--rs-paper-alt);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r);
}

.rs-about-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rs-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rs-ink);
}

.rs-about-title .rs-icon {
    color: var(--rs-brand);
}

.rs-about-list {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
}

.rs-about-list li {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--rs-muted);
}

.rs-about-list b {
    color: var(--rs-ink);
}

.rs-about-meta {
    margin-top: 12px;
    font-size: .82rem;
    color: var(--rs-muted);
}

.rs-tip {
    position: absolute;
    z-index: 30;
    max-width: 16rem;
    padding: 7px 11px;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--rs-tip-ink);
    background: var(--rs-tip-bg);
    border-radius: 7px;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 10px));
}

.rs-tip b {
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.rs-fig-v small {
    font-size: .9rem;
}

.rs-empty-card {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: clamp(24px, 4vw, 40px) 20px;
    text-align: center;
    background: var(--rs-paper);
    border: 1px dashed var(--rs-line-bold);
    border-radius: var(--rs-r);
}

.rs-empty-card.is-warn {
    background: var(--rs-warn-bg);
    border-color: var(--rs-warn);
}

.rs-empty-ic {
    color: var(--rs-brand);
}

.rs-empty-card.is-warn .rs-empty-ic {
    color: var(--rs-warn-fg);
}

.rs-empty-ic .rs-icon {
    width: 32px;
    height: 32px;
}

.rs-empty-t {
    font-family: var(--rs-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rs-ink);
}

.rs-empty-s {
    max-width: 40rem;
    font-size: .92rem;
    color: var(--rs-muted);
}

.rs .rs-empty-card .rs-btn {
    text-decoration: none;
}
/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้า: ชุดรายงาน ปีการศึกษา
   ═══════════════════════════════════════════════════════════════════════ */

.rs-suite {
    margin-bottom: 18px;
}

.rs-suite ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 5px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.rs .rs-suite-a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 16px 6px 12px;
    color: #ffffff;
    text-align: left;
    text-decoration: none;
    border-radius: 12px;
    transition: background-color .2s var(--rs-ease), color .2s var(--rs-ease);
}

.rs .rs-suite-a:hover {
    background: rgba(255, 255, 255, .16);
}

.rs-suite-a .rs-icon {
    width: 20px;
    height: 20px;
}

.rs-suite-a b {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.rs-suite-a small {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
    color: #f8fafc; /* 7 ต.ค. 2569: #dbeafe ได้ 4.37:1 บนหัวสีธีมปัจจุบัน */
}

.rs .rs-suite-a[aria-current="page"] {
    color: #1e3a8a;
    background: #ffffff;
}

.rs .rs-suite-a[aria-current="page"] small {
    color: #475569;
}

.rs-years {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    font-size: .92rem;
    color: #ffffff; /* 7 ต.ค. 2569: #e0e7ff ได้ 4.25:1 บนหัวสีธีมปัจจุบัน */
}

.rs-years ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.rs .rs-year {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 16px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s var(--rs-ease);
}

/* ★ พื้นขาว .16 บนน้ำเงินหัวหน้า ตัวอักษรขาวยังได้ 4.8:1 (.22 ตกไปที่ 4.2:1) */
.rs .rs-year:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
}

.rs .rs-year[aria-current="page"] {
    color: #1e3a8a;
    background: #ffffff;
    border-color: #ffffff;
}

.rs-years.is-one {
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
}

.rs-years.is-one b {
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.rs-years.is-one .rs-icon {
    width: 17px;
    height: 17px;
}

.rs-years.is-form label {
    color: #e0e7ff;
}

.rs .rs-years.is-form select {
    min-height: 38px;
    padding: 4px 12px;
    font: inherit;
    font-weight: 600;
    color: #0f172a;
    background: #ffffff;
    border: 0;
    border-radius: 10px;
}

.rs .rs-year-go {
    min-height: 38px;
    padding: 4px 16px;
    font: inherit;
    font-weight: 700;
    color: #1e3a8a;
    background: #ffffff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.rs-nw {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   การ์ดตัวเลข: ห้าใบ · โทนข้อมูลและโทนปกติ
   ═══════════════════════════════════════════════════════════════════════ */

.rs-figs.is-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rs-fig.is-info::before {
    background: var(--rs-low);
}

.rs-fig.is-info .rs-fig-ic {
    background: linear-gradient(135deg, #0b5f7a, #0e7490);
}

.rs-fig.is-info .rs-fig-v b,
.rs-fig.is-info .rs-fig-s {
    color: var(--rs-low-fg);
}

.rs-fig.is-info .rs-fig-s {
    font-weight: 600;
}

.rs-fig.is-ok::before {
    background: var(--rs-ok);
}

.rs-fig.is-ok .rs-fig-ic {
    background: linear-gradient(135deg, #047857, #059669);
}

/* ═══════════════════════════════════════════════════════════════════════
   ชิ้นร่วม: สวอตช์ แถบซ้อน ป้ายสถานะ ลิงก์เล็ก
   ═══════════════════════════════════════════════════════════════════════ */

.rs-sw {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 10px;
    margin-right: 7px;
    vertical-align: 0;
    background: var(--rs-neutral);
    border-radius: 3px;
}

.rs-sw.is-m,
.rs-seg.is-m { background: var(--rs-male); }
.rs-sw.is-f,
.rs-seg.is-f { background: var(--rs-female); }
.rs-sw.is-u,
.rs-seg.is-u { background: var(--rs-unknown); }
.rs-sw.is-lo,
.rs-seg.is-lo { background: var(--rs-lower); }
.rs-sw.is-up,
.rs-seg.is-up { background: var(--rs-upper); }

.rs-ln {
    display: inline-block;
    width: 24px;
    height: 0;
    margin-right: 7px;
    vertical-align: middle;
    border-top: 2px dashed var(--rs-over);
}

.rs-ln.is-low {
    border-top-color: var(--rs-low);
}

.rs-split {
    display: flex;
    gap: 2px;
    height: 12px;
    overflow: hidden;
    background: var(--rs-paper-alt);
    border-radius: 999px;
}

.rs-split.is-lg {
    height: 22px;
    border-radius: 8px;
}

.rs-seg {
    flex: 0 1 var(--p);
    min-width: 3px;
    background: var(--rs-neutral);
    transform-origin: left center;
}

.rs-small {
    margin-top: 10px;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--rs-muted);
}

.rs-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 10px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 999px;
}

.rs-tag .rs-icon {
    width: 14px;
    height: 14px;
}

.rs-tag.is-over {
    color: var(--rs-over-fg);
    background: var(--rs-over-bg);
    border-color: color-mix(in srgb, var(--rs-over) 50%, transparent);
}

.rs-tag.is-low {
    color: var(--rs-low-fg);
    background: var(--rs-low-bg);
    border-color: color-mix(in srgb, var(--rs-low) 45%, transparent);
}

.rs-tag.is-ok {
    color: var(--rs-ok-fg);
    background: var(--rs-ok-bg);
}

.rs-lockdot {
    position: relative;
    display: inline-flex;
    vertical-align: -2px;
    margin-left: 5px;
    color: #6d28d9;
}

.rs-lockdot .rs-icon {
    width: 14px;
    height: 14px;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .rs .rs-lockdot {
    color: #c4b5fd;
}

.rs-sec-head .rs-lock {
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   ภาพรวม: ตัวเลขคู่ แถบชาย–หญิงรายชั้น ตารางเทียบช่วงชั้น
   ═══════════════════════════════════════════════════════════════════════ */

.rs-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.rs-duo-i {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--rs-paper-alt);
    border-left: 4px solid var(--rs-c, var(--rs-neutral));
    border-radius: var(--rs-rs);
}

.rs-duo-i.is-m { --rs-c: var(--rs-male); }
.rs-duo-i.is-f { --rs-c: var(--rs-female); }
.rs-duo-i.is-lo { --rs-c: var(--rs-lower); }
.rs-duo-i.is-up { --rs-c: var(--rs-upper); }

.rs-duo-k {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--rs-ink-2);
}

.rs-duo-k .rs-sw {
    margin-right: 2px;
}

.rs-duo-k small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--rs-muted);
}

.rs-duo-v {
    color: var(--rs-muted);
    font-size: .9rem;
}

.rs-duo-v small,
.rs-lv-v small {
    font-size: .9rem;
}

.rs-duo-v b {
    font-family: var(--rs-serif);
    font-size: clamp(1.55rem, 2.3vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.rs-duo-p {
    font-size: .9rem;
    font-weight: 700;
    color: var(--rs-ink-2);
    font-variant-numeric: tabular-nums;
}

.rs-sub {
    margin: 20px 0 10px;
    font-family: var(--rs-serif);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--rs-ink);
}

.rs-sub small {
    font-family: var(--rs-sans);
    font-size: .8rem;
    font-weight: 400;
    color: var(--rs-muted);
}

.rs-bal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rs-bal-r {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 4.4rem;
    align-items: center;
    gap: 10px;
}

.rs-bal-n {
    font-size: .88rem;
    font-weight: 600;
    color: var(--rs-ink);
}

.rs-bal-bar {
    position: relative;
    display: flex;
    gap: 2px;
    height: 12px;
    overflow: hidden;
    background: var(--rs-paper-alt);
    border-radius: 999px;
}

/* เส้นกลาง = ครึ่งต่อครึ่ง ใช้สีพื้นกระดาษเป็นรอยตัด เห็นได้ทั้งบนสีชายและสีหญิง */
.rs-bal-mid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--rs-paper);
}

.rs-bal-v {
    font-size: .84rem;
    color: var(--rs-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rs-cmp {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    font-size: .9rem;
}

.rs-cmp th,
.rs-cmp td {
    padding: 8px 10px;
    text-align: right;
    border-top: 1px solid var(--rs-line);
    font-variant-numeric: tabular-nums;
}

.rs-cmp thead th,
.rs-cmp thead td {
    border-top: 0;
    font-size: .84rem;
    font-weight: 600;
    color: var(--rs-muted);
}

.rs-cmp tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--rs-ink-2);
}

.rs-cmp tbody td {
    font-weight: 700;
    color: var(--rs-ink);
}

.rs-cmp td.is-over {
    color: var(--rs-over-fg);
}

.rs-cmp td.is-low {
    color: var(--rs-low-fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   ตัวกรองห้อง
   ═══════════════════════════════════════════════════════════════════════ */

.rs-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 16px;
}

.rs-chips-k {
    font-size: .86rem;
    color: var(--rs-muted);
}

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

.rs .rs-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 7px 4px 14px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--rs-ink-2);
    text-decoration: none;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line-bold);
    border-radius: 999px;
    transition: border-color .2s, color .2s, background-color .2s;
}

.rs-chip b {
    min-width: 24px;
    padding: 0 7px;
    font-size: .8rem;
    line-height: 20px;
    text-align: center;
    color: var(--rs-ink);
    background: var(--rs-paper-alt);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.rs-chip.is-over::before,
.rs-chip.is-low::before {
    content: "";
    width: 12px;
    height: 0;
    border-top: 2px dashed var(--rs-over);
}

.rs-chip.is-low::before {
    border-top-color: var(--rs-low);
}

.rs .rs-chip:hover {
    color: var(--rs-brand);
    border-color: var(--rs-brand);
}

.rs .rs-chip[aria-current="true"] {
    color: #ffffff;
    background: var(--rs-brand);
    border-color: var(--rs-brand);
}

.rs .rs-chip[aria-current="true"] b {
    color: inherit;
    background: rgba(0, 0, 0, .22);
}

.rs .rs-chip[aria-current="true"]::before {
    border-top-color: currentColor;
}

.rs .rs-chip.is-off {
    color: var(--rs-muted);
    border-style: dashed;
    cursor: default;
}

.rs .rs-chip.is-off:hover {
    color: var(--rs-muted);
    border-color: var(--rs-line-bold);
}

/* ═══════════════════════════════════════════════════════════════════════
   แผนภูมิความหนาแน่นรายห้อง
   ความสูงทุกอย่างคิดจาก --rs-plot-h ชุดเดียว: แท่ง เส้นตาราง เส้นเกณฑ์ และตัวเลขแกนตั้ง
   ═══════════════════════════════════════════════════════════════════════ */

.rs-dn {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 6px;
}

.rs-dn-y,
.rs-dn-plot {
    position: relative;
    height: calc(var(--rs-pad) + var(--rs-plot-h) + var(--rs-foot));
}

.rs-dn-yl {
    position: absolute;
    right: 4px;
    bottom: calc(var(--rs-foot) + var(--v) / var(--rs-max) * var(--rs-plot-h));
    transform: translateY(50%);
    font-size: .76rem;
    line-height: 1;
    color: var(--rs-muted);
    font-variant-numeric: tabular-nums;
}

/* ตัวเลขเกณฑ์บนแกนตั้ง: พื้นสีของเกณฑ์ ตัวอักษรเข้ม (ผ่าน AA ทั้งโหมดสว่างและมืด) */
.rs-dn-yl.is-over,
.rs-dn-yl.is-low {
    right: 0;
    padding: 3px 6px;
    font-weight: 700;
    color: #111827;
    background: var(--rs-over);
    border-radius: 6px;
}

.rs-dn-yl.is-low {
    background: var(--rs-low);
}

.rs-dn-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 8px;
    scrollbar-width: thin;
}

.rs-dn-plot {
    min-width: calc(var(--rs-cols) * 26px + 80px);
}

.rs-dn-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rs-dn-tick,
.rs-dn-th {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--rs-foot) + var(--v) / var(--rs-max) * var(--rs-plot-h));
    height: 0;
    border-top: 1px solid var(--rs-line);
}

.rs-dn-tick:first-child {
    border-top: 2px solid var(--rs-line-bold);
}

.rs-dn-th {
    z-index: 2;
    border-top: 2px dashed var(--rs-over);
    transform-origin: left center;
}

.rs-dn-th.is-low {
    border-top-color: var(--rs-low);
}

.rs-dn-groups {
    position: absolute;
    top: 0;
    bottom: var(--rs-foot);
    left: 6px;
    right: 6px;
    display: flex;
    gap: 16px;
}

.rs-dn-g {
    position: relative;
    flex: var(--n) 1 0;
    min-width: 58px;
    display: flex;
}

/* เส้นแบ่งระดับชั้น ลากลงถึงชื่อชั้น */
.rs-dn-g + .rs-dn-g::before {
    content: "";
    position: absolute;
    left: -9px;
    top: var(--rs-pad);
    bottom: calc(-1 * var(--rs-foot) + 4px);
    border-left: 1px dashed var(--rs-line-bold);
}

.rs-dn-rooms {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 4px;
}

.rs-col {
    position: relative;
    flex: 1 1 0;
    min-width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 7px 7px 0 0;
    transition: background-color .2s;
}

.rs-col:hover,
.rs-col.is-tipped {
    background: var(--rs-brand-soft);
}

.rs .rs-col-n {
    position: relative;
    z-index: 3;
    margin-bottom: 3px;
    padding: 0 2px;
    background: color-mix(in srgb, var(--rs-paper) 88%, transparent);
    border-radius: 4px;
    font-family: var(--rs-sans);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    color: var(--rs-ink-2);
    font-variant-numeric: tabular-nums;
}

.rs-col.is-over .rs-col-n {
    color: var(--rs-over-fg);
}

.rs-col.is-low .rs-col-n {
    color: var(--rs-low-fg);
}

.rs-col.is-over .rs-col-n::before,
.rs-col.is-low .rs-col-n::before {
    content: "▲";
    display: block;
    font-size: .56rem;
    line-height: 1.1;
}

.rs-col.is-low .rs-col-n::before {
    content: "▼";
}

.rs-col-bar {
    display: flex;
    flex-direction: column-reverse;
    gap: 1px;
    width: min(78%, 34px);
    height: calc(var(--v) / var(--rs-max) * var(--rs-plot-h));
    min-height: 3px;
    overflow: hidden;
    border-radius: 5px 5px 1px 1px;
    transform-origin: center bottom;
}

.rs-col-bar .rs-seg {
    min-width: 0;
    min-height: 2px;
    transform-origin: center bottom;
}

.rs-col.is-over .rs-col-bar {
    box-shadow: 0 0 0 2px var(--rs-paper), 0 0 0 4px var(--rs-over);
}

.rs-col.is-low .rs-col-bar {
    outline: 2px dashed var(--rs-low);
    outline-offset: 2px;
}

.rs-col-x {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    font-size: .78rem;
    line-height: 1.2;
    text-align: center;
    color: var(--rs-muted);
    font-variant-numeric: tabular-nums;
}

.rs-dn-gn {
    position: absolute;
    top: calc(100% + 26px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
    line-height: 1.25;
    border-top: 2px solid var(--rs-line-bold);
}

.rs-dn-gn b {
    font-family: var(--rs-serif);
    font-size: .92rem;
    font-weight: 600;
    color: var(--rs-ink);
}

.rs-dn-gn small {
    font-size: .74rem;
    color: var(--rs-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rs-dn-hint {
    display: none;
    margin-top: 8px;
    font-size: .82rem;
    color: var(--rs-muted);
}

.rs-dn-empty {
    margin-top: 10px;
    padding: 14px 16px;
    font-size: .92rem;
    color: var(--rs-muted);
    text-align: center;
    background: var(--rs-paper-alt);
    border-radius: var(--rs-rs);
}

.rs-dn-panel .rs-legend {
    gap: 8px 20px;
}

.rs-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rs-legend .rs-sw {
    margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   รายระดับชั้น
   ═══════════════════════════════════════════════════════════════════════ */

.rs-lvs {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}

.rs-lv {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px 18px 16px 22px;
    overflow: hidden;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r);
    box-shadow: var(--rs-shadow);
}

.rs-lv::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
    transform-origin: center top;
}

.rs-lv.has-over::before {
    background: var(--rs-over);
}

.rs-lv-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.rs-lv-badge {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent-strong, #0284c7));
    border-radius: 14px;
}

.rs-lv-badge b {
    font-family: var(--rs-serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
}

.rs-lv-t {
    font-family: var(--rs-serif);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rs-ink);
}

.rs-lv-s {
    margin-top: 2px;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--rs-muted);
}

.rs-lv-v {
    text-align: right;
    white-space: nowrap;
    color: var(--rs-muted);
    font-size: .88rem;
}

.rs-lv-v b {
    font-family: var(--rs-serif);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.rs-lv-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
    gap: 8px;
}

.rs-lv-facts > div {
    min-width: 0;
    padding: 6px 10px;
    background: var(--rs-paper-alt);
    border-radius: 9px;
}

.rs-lv-facts dt {
    font-size: .76rem;
    line-height: 1.4;
    color: var(--rs-muted);
}

.rs-lv-facts dd {
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rs-lv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.rs-total {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--rs-ink-2);
    background: var(--rs-brand-soft);
    border: 1px solid var(--rs-brand-line);
    border-radius: var(--rs-rs);
}

.rs-total .rs-icon {
    flex: none;
    margin-top: 3px;
    color: var(--rs-brand);
}

.rs-total b {
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   ตารางรายห้อง
   ═══════════════════════════════════════════════════════════════════════ */

.rs-meta {
    margin-bottom: 8px;
    font-size: .86rem;
    color: var(--rs-muted);
}

.rs-tw {
    overflow-x: auto;
    border: 1px solid var(--rs-line);
    border-radius: 12px;
}

.rs-tbl {
    width: 100%;
    min-width: 40rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
}

.rs-tbl th,
.rs-tbl td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--rs-line);
}

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

.rs-tbl .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rs-tbl tbody th {
    font-weight: 600;
    color: var(--rs-ink);
    white-space: nowrap;
}

.rs-tbl tbody td {
    color: var(--rs-ink-2);
}

.rs-tbl tbody td b {
    color: var(--rs-ink);
}

.rs-tbl tbody tr:hover > * {
    background: color-mix(in srgb, var(--rs-brand) 5%, var(--rs-paper));
}

.rs-tr.is-lvstart > * {
    border-top: 2px solid var(--rs-line-bold);
}

.rs-tr.is-over > th {
    box-shadow: inset 4px 0 0 var(--rs-over);
}

.rs-tr.is-low > th {
    box-shadow: inset 4px 0 0 var(--rs-low);
}

.rs-tbl tfoot th {
    white-space: nowrap;
}

.rs-tbl tfoot th,
.rs-tbl tfoot td {
    font-weight: 700;
    color: var(--rs-ink);
    background: var(--rs-paper-alt);
    border-bottom: 0;
}

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

.rs-th-meter,
.rs-td-meter {
    width: 22%;
    min-width: 8rem;
}

.rs-meter {
    position: relative;
    display: block;
    height: 10px;
    background: var(--rs-paper-alt);
    border-radius: 999px;
}

.rs-meter-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--p);
    background: var(--rs-ok);
    border-radius: 999px;
    transform-origin: left center;
}

.rs-tr.is-over .rs-meter-bar {
    background: var(--rs-over);
}

.rs-tr.is-low .rs-meter-bar {
    background: var(--rs-low);
}

.rs-meter-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--p);
    width: 2px;
    margin-left: -1px;
    background: var(--rs-over-fg);
    border-radius: 1px;
}

.rs-meter-tick.is-low {
    background: var(--rs-low-fg);
}

.rs a.rs-btn {
    text-decoration: none;
}

.rs .rs-roster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 3px 12px 3px 9px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--rs-brand);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--rs-brand-line);
    border-radius: 999px;
    transition: background-color .2s;
}

.rs .rs-roster:hover {
    background: var(--rs-brand-soft);
}

.rs-roster .rs-icon {
    width: 15px;
    height: 15px;
}

.rs-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--rs-paper-alt);
    border-radius: var(--rs-rs);
}

/* ═══════════════════════════════════════════════════════════════════════
   ตรวจทะเบียน (บุคลากร)
   ═══════════════════════════════════════════════════════════════════════ */

.rs-checks {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rs-check {
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-left: 5px solid var(--rs-c, var(--rs-ok));
    border-radius: var(--rs-rs);
    box-shadow: var(--rs-shadow);
}

.rs-check.is-warn {
    --rs-c: var(--rs-over);
    background: var(--rs-over-bg);
}

.rs-check.is-info {
    --rs-c: var(--rs-low);
}

.rs-check.is-fail {
    --rs-c: var(--rs-crit);
}

.rs-check-ic {
    flex: none;
    color: var(--rs-ok-fg);
}

.rs-check.is-warn .rs-check-ic {
    color: var(--rs-over-fg);
}

.rs-check.is-info .rs-check-ic {
    color: var(--rs-low-fg);
}

.rs-check.is-fail .rs-check-ic {
    color: var(--rs-crit-fg);
}

.rs-check-ic .rs-icon {
    width: 22px;
    height: 22px;
}

.rs-check-tx {
    min-width: 0;
}

.rs-check-t {
    font-weight: 700;
    line-height: 1.5;
    color: var(--rs-ink);
}

.rs-check-d {
    margin-top: 2px;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--rs-ink-2);
    overflow-wrap: anywhere;
}

.rs-check-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: .88rem;
}

.rs .rs-check-links a,
.rs .rs-about-meta a,
.rs .rs-callout .rs-link {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ที่มาของตัวเลข
   ═══════════════════════════════════════════════════════════════════════ */

.rs-about-list {
    list-style: disc;
    padding-left: 1.2rem;
}

.rs-about-list li::marker {
    color: var(--rs-brand);
}

/* ═══════════════════════════════════════════════════════════════════════
   จอกลางและจอแคบ
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199.98px) {
    .rs-figs.is-5 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .rs-figs.is-5 > li {
        grid-column: span 2;
    }

    .rs-figs.is-5 > li:nth-child(4),
    .rs-figs.is-5 > li:nth-child(5) {
        grid-column: span 3;
    }
}

@media (max-width: 979.98px) {
    .rs-grid-2,
    .rs-checks {
        grid-template-columns: minmax(0, 1fr);
    }

    .rs-lvs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .rs {
        --rs-plot-h: 210px;
    }

    .rs-panel-note {
        margin-left: 0;
        flex-basis: 100%;
    }

    .rs-tools {
        position: static;
        border-radius: var(--rs-r);
        padding: 8px;
    }

    .rs-nav {
        flex-basis: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .rs-nav::-webkit-scrollbar {
        display: none;
    }

    .rs-nav-list {
        flex-wrap: nowrap;
    }

    .rs-tools-act {
        margin-left: 0;
        padding: 0 6px;
    }

    .rs-dn-hint {
        display: block;
    }

    .rs-legend-end {
        margin-left: 0;
    }
}

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

    .rs .rs-suite-a {
        padding: 6px 12px 6px 10px;
    }

    .rs-suite-a small {
        display: none;
    }

    .rs-figs.is-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rs-figs.is-5 > li,
    .rs-figs.is-5 > li:nth-child(4) {
        grid-column: auto;
    }

    .rs-figs.is-5 > li:last-child {
        grid-column: 1 / -1;
    }

    .rs .rs-fig {
        padding: 16px 14px 14px;
    }

    .rs-fig-ic {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .rs-panel-head,
    .rs-panel-body {
        padding-inline: 14px;
    }

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

    .rs-lv {
        padding: 16px 14px 14px 18px;
    }

    .rs-duo {
        gap: 8px;
    }

    .rs-duo-i {
        padding: 10px 12px;
    }

    .rs-dn {
        grid-template-columns: 2.2rem minmax(0, 1fr);
        column-gap: 4px;
    }

    .rs-about-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* มิเตอร์เป็นภาพประกอบ (ตัวเลขกับป้ายสถานะบอกครบแล้ว) จอแคบจึงซ่อน ให้ตารางแคบลงจนเห็นสถานะ */
    .rs-th-meter,
    .rs-td-meter {
        display: none;
    }

    .rs-tbl {
        min-width: 0;
        font-size: .88rem;
    }

    .rs-tbl th,
    .rs-tbl td {
        padding: 8px 8px;
    }
}

@media (max-width: 380px) {
    .rs-lv-top {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rs-lv-v {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   การเคลื่อนไหว

   ★ ทุกอย่างอยู่ใน prefers-reduced-motion: no-preference
   ★ สถานะ "รอเล่น" มีเฉพาะเมื่อสคริปต์ติดคลาส rs-motion ที่ <main> แล้วเท่านั้น
   ★ ที่รอเล่นได้: แผงเลื่อนลงจากที่เดิม 26px (ยังมองเห็นเต็มตา) แท่งและแถบที่ยังไม่ยืด เส้นเกณฑ์ที่ยังไม่ลาก
     ตัวเลขบนแท่งเห็นตลอด แค่ขี่แท่งขึ้นไปพร้อมกัน
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

    .rs-hero-in > * {
        animation: rs-hero-rise .7s var(--rs-ease) both;
    }

    .rs-hero-in > :nth-child(2) { animation-delay: .05s; }
    .rs-hero-in > :nth-child(3) { animation-delay: .1s; }
    .rs-hero-in > :nth-child(4) { animation-delay: .15s; }
    .rs-hero-in > :nth-child(5) { animation-delay: .2s; }
    .rs-hero-in > :nth-child(6) { animation-delay: .25s; }

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

    .rs-rise {
        transition-property: translate;
        transition-duration: .75s;
        transition-timing-function: var(--rs-ease);
        transition-delay: var(--rs-d, 0s);
    }

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

    .rs-figs > :nth-child(2) { --rs-d: .06s; }
    .rs-figs > :nth-child(3) { --rs-d: .12s; }
    .rs-figs > :nth-child(4) { --rs-d: .18s; }
    .rs-figs > :nth-child(5) { --rs-d: .24s; }
    .rs-grid-2 > :nth-child(2) { --rs-d: .08s; }
    .rs-lv { --rs-d: calc(var(--k, 0) * .07s); }

    .rs-fig::before,
    .rs-lv::before {
        transition: transform .9s var(--rs-ease) calc(var(--rs-d, 0s) + .15s);
    }

    .rs.rs-motion .rs-figs:not(.is-in) .rs-fig::before {
        transform: scaleX(0);
    }

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

    .rs-sec-title::before {
        transition: transform .5s var(--rs-ease) .1s;
    }

    .rs.rs-motion .rs-sec:not(.is-in) .rs-sec-title::before {
        transform: scaleY(0);
    }

    /* แถบแนวนอน: ชาย–หญิง ช่วงชั้น รายชั้น และมิเตอร์ในตาราง */
    .rs-split .rs-seg,
    .rs-bal-bar .rs-seg,
    .rs-meter-bar {
        transition: transform .9s var(--rs-ease) calc(var(--rs-d, 0s) + .2s);
    }

    .rs.rs-motion [data-rs-reveal]:not(.is-in) :is(.rs-split .rs-seg, .rs-bal-bar .rs-seg, .rs-meter-bar) {
        transform: scaleX(0);
    }

    /* แท่งรายห้องยืดขึ้นทีละแท่งจากซ้ายไปขวา ตัวเลขขี่แท่งขึ้นไปด้วย */
    .rs-col-bar {
        transition: transform .8s var(--rs-ease) calc(.12s + var(--i, 0) * .022s);
    }

    .rs-col-n {
        transition: translate .8s var(--rs-ease) calc(.12s + var(--i, 0) * .022s);
    }

    .rs.rs-motion .rs-dn-panel:not(.is-in) .rs-col-bar,
    .rs.rs-motion .rs-dn-panel.is-regrow .rs-col-bar {
        transform: scaleY(0);
    }

    .rs.rs-motion .rs-dn-panel:not(.is-in) .rs-col-n,
    .rs.rs-motion .rs-dn-panel.is-regrow .rs-col-n {
        translate: 0 calc(var(--v) / var(--rs-max) * var(--rs-plot-h));
    }

    /* เส้นเกณฑ์ลากตามมาหลังแท่งขึ้นครบ */
    .rs-dn-th {
        transition: transform 1s var(--rs-ease) .75s;
    }

    .rs.rs-motion .rs-dn-panel:not(.is-in) .rs-dn-th {
        transform: scaleX(0);
    }

    .rs.rs-motion .rs-dn-panel.is-in .rs-col.is-over .rs-col-bar {
        animation: rs-ring 1.2s var(--rs-ease) calc(1.2s + var(--i, 0) * .022s) 1;
    }
}

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

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

    to {
        transform: none;
    }
}

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

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

@keyframes rs-ring {
    0% {
        box-shadow: 0 0 0 2px var(--rs-paper), 0 0 0 4px var(--rs-over);
    }

    40% {
        box-shadow: 0 0 0 2px var(--rs-paper), 0 0 0 9px color-mix(in srgb, var(--rs-over) 45%, transparent);
    }

    100% {
        box-shadow: 0 0 0 2px var(--rs-paper), 0 0 0 4px var(--rs-over);
    }
}

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

/* ═══════════════════════════════════════════════════════════════════════
   โหมดคอนทราสต์สูง
   ไฟล์กลางบังคับ h1-h6 p li span div b small เป็นสีขาว ลิงก์เป็น #facc15 ปุ่มพื้นดำตัวขาวขอบเหลือง
   ที่นี่เขียนเฉพาะการ์ด เส้นขอบ แถบ และความหมายของสี (ห้ามตั้งสีตัวอักษรของ <button> เอง)
   ชาย = ขาวทึบ · หญิง = ลายเฉียง · ไม่ระบุ = ลายจุด · เกินเกณฑ์ = เหลือง · ต่ำกว่าเกณฑ์ = ขาวเส้นประ
   ═══════════════════════════════════════════════════════════════════════ */

html.tb1-contrast-high .rs {
    --rs-neutral: #ffffff;
    --rs-ok: #ffffff;
    --rs-brand: #ffffff;
    --rs-male: #ffffff;
    --rs-lower: #ffffff;
    --rs-over: #facc15;
    --rs-low: #ffffff;
    --rs-over-fg: #facc15;
    --rs-low-fg: #ffffff;
    --rs-ok-fg: #ffffff;
    --rs-paper: #000000;
}

html.tb1-contrast-high .rs-hero {
    background: #000000;
}

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

html.tb1-contrast-high .rs-hero-eyebrow,
html.tb1-contrast-high .rs-suite ul,
html.tb1-contrast-high .rs .rs-year,
html.tb1-contrast-high .rs-years.is-one {
    background: #000000;
    border-color: #facc15;
}

html.tb1-contrast-high .rs .rs-fig,
html.tb1-contrast-high .rs-panel,
html.tb1-contrast-high .rs-tools,
html.tb1-contrast-high .rs-about,
html.tb1-contrast-high .rs-callout,
html.tb1-contrast-high .rs-lv,
html.tb1-contrast-high .rs-lv-facts > div,
html.tb1-contrast-high .rs-duo-i,
html.tb1-contrast-high .rs-total,
html.tb1-contrast-high .rs-check,
html.tb1-contrast-high .rs-empty,
html.tb1-contrast-high .rs-empty-card,
html.tb1-contrast-high .rs-dn-empty,
html.tb1-contrast-high .rs-tag,
html.tb1-contrast-high .rs-fig-ic,
html.tb1-contrast-high .rs-panel-ic,
html.tb1-contrast-high .rs-lv-badge,
html.tb1-contrast-high .rs .rs-btn,
html.tb1-contrast-high .rs .rs-chip,
html.tb1-contrast-high .rs .rs-chip b,
html.tb1-contrast-high .rs .rs-roster,
html.tb1-contrast-high .rs-sec-count,
html.tb1-contrast-high .rs-lock,
html.tb1-contrast-high .rs-audience,
html.tb1-contrast-high .rs-audience-ic,
html.tb1-contrast-high .rs-tw,
html.tb1-contrast-high .rs-tbl th,
html.tb1-contrast-high .rs-tbl td,
html.tb1-contrast-high .rs-tbl tbody tr:hover > *,
html.tb1-contrast-high .rs-col:hover,
html.tb1-contrast-high .rs-col.is-tipped {
    background: #000000;
    border-color: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .rs-fig-ic,
html.tb1-contrast-high .rs-panel-ic,
html.tb1-contrast-high .rs-audience-ic,
html.tb1-contrast-high .rs-lv-badge,
html.tb1-contrast-high .rs-sec-count,
html.tb1-contrast-high .rs-lock,
html.tb1-contrast-high .rs-tag,
html.tb1-contrast-high .rs .rs-chip b {
    color: #ffffff;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .rs-tag.is-over,
html.tb1-contrast-high .rs-check.is-warn {
    border-color: #facc15;
}

html.tb1-contrast-high .rs-panel-head,
html.tb1-contrast-high .rs-sec-head,
html.tb1-contrast-high .rs-legend,
html.tb1-contrast-high .rs-cmp th,
html.tb1-contrast-high .rs-cmp td,
html.tb1-contrast-high .rs-dn-tick,
html.tb1-contrast-high .rs-dn-gn,
html.tb1-contrast-high .rs-dn-g + .rs-dn-g::before {
    border-color: #ffffff;
}

html.tb1-contrast-high .rs-panel-head {
    background: #000000;
}

html.tb1-contrast-high .rs-fig::before,
html.tb1-contrast-high .rs-sec-title::before,
html.tb1-contrast-high .rs-lv::before {
    background: #ffffff;
}

html.tb1-contrast-high .rs-fig.is-warn::before,
html.tb1-contrast-high .rs-lv.has-over::before {
    background: #facc15;
}

/* ไฟล์กลางไม่รู้จัก th td dt dd label จึงต้องบังคับสีเอง */
html.tb1-contrast-high .rs :is(th, td, dt, dd, label, caption),
html.tb1-contrast-high .rs .rs-col-n {
    color: #ffffff;
}

html.tb1-contrast-high .rs .rs-cmp td.is-over,
html.tb1-contrast-high .rs .rs-col.is-over .rs-col-n {
    color: #facc15;
}

html.tb1-contrast-high .rs-split,
html.tb1-contrast-high .rs-bal-bar,
html.tb1-contrast-high .rs-meter {
    background: #000000;
    box-shadow: inset 0 0 0 1px #ffffff;
}

html.tb1-contrast-high .rs-bal-mid {
    background: #facc15;
}

html.tb1-contrast-high .rs-seg.is-f,
html.tb1-contrast-high .rs-sw.is-f,
html.tb1-contrast-high .rs-seg.is-up,
html.tb1-contrast-high .rs-sw.is-up {
    background: repeating-linear-gradient(135deg, #ffffff 0 3px, #000000 3px 6px);
}

html.tb1-contrast-high .rs-seg.is-u,
html.tb1-contrast-high .rs-sw.is-u {
    background: radial-gradient(circle, #ffffff 1.2px, #000000 1.6px) 0 0 / 5px 5px;
}

html.tb1-contrast-high .rs-col-bar {
    box-shadow: inset 0 0 0 1px #ffffff;
}

/* ไฟล์กลางบังคับ span เป็นสีขาว ป้ายเกณฑ์บนแกนตั้งพื้นสว่างจึงต้องชนะด้วย !important */
html.tb1-contrast-high .rs .rs-dn-yl.is-over {
    color: #000000 !important;
    background: #facc15;
}

html.tb1-contrast-high .rs .rs-dn-yl.is-low {
    color: #000000 !important;
    background: #ffffff;
}

html.tb1-contrast-high .rs .rs-fig .rs-fig-ic {
    background: #000000;
}

html.tb1-contrast-high .rs .rs-nav-a[aria-current="location"],
html.tb1-contrast-high .rs .rs-chip[aria-current="true"],
html.tb1-contrast-high .rs .rs-year[aria-current="page"],
html.tb1-contrast-high .rs .rs-suite-a[aria-current="page"] {
    background: #facc15;
    border-color: #facc15;
}

html.tb1-contrast-high .rs .rs-nav-a[aria-current="location"],
html.tb1-contrast-high .rs .rs-nav-a[aria-current="location"] *,
html.tb1-contrast-high .rs .rs-chip[aria-current="true"],
html.tb1-contrast-high .rs .rs-chip[aria-current="true"] *,
html.tb1-contrast-high .rs .rs-year[aria-current="page"],
html.tb1-contrast-high .rs .rs-suite-a[aria-current="page"],
html.tb1-contrast-high .rs .rs-suite-a[aria-current="page"] * {
    color: #000000 !important;
}

html.tb1-contrast-high .rs .rs-chip[aria-current="true"] b {
    background: #facc15;
    border-color: #000000;
}

html.tb1-contrast-high .rs .rs-nav-a:hover,
html.tb1-contrast-high .rs .rs-roster:hover,
html.tb1-contrast-high .rs .rs-suite-a:not([aria-current]):hover,
html.tb1-contrast-high .rs .rs-year:not([aria-current]):hover {
    background: #000000;
    box-shadow: inset 0 0 0 2px #facc15;
}

html.tb1-contrast-high .rs-tip {
    color: #ffffff;
    background: #000000;
    border: 1px solid #facc15;
}

html.tb1-contrast-high .rs :focus-visible {
    outline-color: #facc15;
}

/* ═══════════════════════════════════════════════════════════════════════
   พิมพ์ลงกระดาษ / บันทึก PDF (A4 แนวตั้ง)
   ตัวกรองที่เลือกไว้มีผลกับกระดาษด้วย บรรทัด "แสดง … จาก … ห้อง" พิมพ์ติดไปจึงอ่านรู้เรื่อง
   ═══════════════════════════════════════════════════════════════════════ */

@page {
    size: A4 portrait;
    margin: 12mm 11mm;
}

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

    .rs {
        --rs-ink: #0f172a;
        --rs-ink-2: #334155;
        --rs-muted: #475569;
        --rs-paper: #ffffff;
        --rs-paper-alt: #f1f5f9;
        --rs-line: #cbd5e1;
        --rs-line-bold: #94a3b8;
        --rs-brand: #1d4ed8;
        --rs-plot-h: 190px;
        color-scheme: light;
    }

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

    .rs-tools,
    .rs-audience,
    .rs-chips,
    .rs-suite,
    .rs-years,
    .rs-fig-ic,
    .rs-panel-ic,
    .rs-lock,
    .rs-lockdot,
    .rs-hero::before,
    .rs-hero::after,
    .rs-hero-sub,
    .rs-sec-note,
    .rs-panel-note,
    .rs-dn-hint,
    .rs-tip,
    .rs-about,
    .rs-th-roster,
    .rs-td-roster,
    body.rs-page .tb1-footer,
    body.rs-page footer {
        display: none !important;
    }

    main.rs {
        padding: 0;
    }

    .rs-hero {
        margin: 0;
        padding: 0 0 8px;
        color: #000000;
        text-align: left;
        background: #ffffff;
        border-bottom: 2px solid #000000;
    }

    .rs-hero-in {
        max-width: none;
        align-items: flex-start;
    }

    .rs-hero-eyebrow {
        padding: 0;
        color: #000000;
        background: none;
        border: 0;
    }

    .rs-hero-eyebrow .rs-icon {
        display: none;
    }

    .rs-hero .rs-hero-title {
        margin-top: 2px;
        font-size: 1.55rem;
        color: #000000;
    }

    .rs-hero-date {
        color: #000000;
    }

    .rs-figs,
    .rs-figs.is-5 {
        margin-top: 10px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .rs-figs.is-5 > li,
    .rs-figs.is-5 > li:nth-child(4),
    .rs-figs.is-5 > li:nth-child(5) {
        grid-column: auto;
    }

    .rs .rs-fig {
        padding: 8px 10px;
    }

    .rs-fig-v b {
        font-size: 1.35rem;
    }

    .rs .rs-fig,
    .rs-panel,
    .rs-lv,
    .rs-check,
    .rs-callout {
        box-shadow: none !important;
        border-color: #999999;
    }

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

    .rs .rs-fig::before,
    .rs .rs-sec-title::before,
    .rs .rs-lv::before,
    .rs .rs-seg,
    .rs .rs-col-bar,
    .rs .rs-meter-bar,
    .rs .rs-dn-th {
        transform: none !important;
    }

    .rs .rs-col-n {
        translate: none !important;
    }

    .rs-fig::before,
    .rs-sec-title::before,
    .rs-lv::before,
    .rs-lv-badge,
    .rs-seg,
    .rs-sw,
    .rs-ln,
    .rs-split,
    .rs-bal-bar,
    .rs-col-bar,
    .rs-dn-th,
    .rs-dn-yl,
    .rs-meter,
    .rs-meter-bar,
    .rs-meter-tick,
    .rs-tag,
    .rs-duo-i,
    .rs-lv-facts > div,
    .rs-tbl thead th,
    .rs-tbl tfoot > tr > *,
    .rs-total {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .rs-sec {
        margin-top: 14px;
    }

    .rs-sec-head {
        break-after: avoid;
    }

    .rs-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rs-panel,
    .rs .rs-fig,
    .rs-lv,
    .rs-check,
    .rs-tbl tr {
        break-inside: avoid;
    }

    /* ตารางรายห้องยาวเกินหนึ่งหน้า ปล่อยให้ขึ้นหน้าใหม่ได้ (หัวตารางพิมพ์ซ้ำทุกหน้าเอง) */
    .rs #rs-p-rooms {
        break-inside: auto;
    }

    /* แผนภูมิกว้างเต็มกระดาษ ไม่มีแถบเลื่อน */
    .rs-dn-scroll {
        overflow: visible;
    }

    .rs-dn-plot {
        min-width: 0;
    }

    .rs-dn-groups {
        gap: 10px;
    }

    .rs-dn-rooms {
        gap: 2px;
    }

    .rs-col {
        min-width: 0;
    }

    .rs-dn-g {
        min-width: 44px;
    }

    .rs-lvs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .rs-lv {
        padding: 10px 10px 10px 14px;
        gap: 8px;
    }

    .rs-lv-badge {
        display: none;
    }

    .rs-lv-top {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .rs-lv-t {
        font-size: .92rem;
    }

    .rs-lv-v b {
        font-size: 1.3rem;
    }

    .rs-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rs-tw {
        overflow: visible;
    }

    .rs-tbl {
        min-width: 0;
        font-size: .8rem;
    }

    /* Chrome พิมพ์ tfoot ซ้ำท้ายทุกหน้า แถว "รวมทั้งหมด" จึงโผล่กลางตาราง ให้พิมพ์ครั้งเดียวท้ายสุด */
    .rs-tbl tfoot {
        display: table-row-group;
    }

    .rs-tbl th,
    .rs-tbl td {
        padding: 4px 8px;
    }

    .rs-tbl tbody tr:hover > * {
        background: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้าเต็มความกว้างจอ (ผอ. ขอ 24 ก.ย. 2569 ให้เหมือนหน้าทำเนียบบุคลากร)
   main.rs กว้างเต็มจออยู่แล้ว แต่หัวหน้าอยู่ใน .rs-wrap ที่กว้างสุด 1400px จอเกิน 1440px จึงเห็นพื้นเทาสองข้าง
   ใช้หน่วย cqw (ความกว้างเนื้อหาของ main) ดึงขอบหัวหน้าออกไปชนขอบ main ทั้งสองข้าง
   ★ ไม่ใช้ 100vw เพราะรวมความกว้างแถบเลื่อน หน้าจะเลื่อนข้างได้บน Windows
   ★ จอไม่เกิน 1440px ค่านี้เท่ากับ -gutter เดิมพอดี · เบราว์เซอร์ที่ไม่รู้จัก cqw เห็นหัวหน้าแบบเดิม
   ★ เฉพาะจอภาพ ฉบับพิมพ์ใช้กฎของตัวเอง
   ═══════════════════════════════════════════════════════════════════════ */

@media screen {
    main.rs {
        container-type: inline-size;
    }

    @supports (width: 1cqw) {
        .rs-wrap > .rs-hero {
            margin-inline: calc((100% - 100cqw) / 2 - var(--rs-gutter));
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ประเภทนักเรียน ห้องนอกระบบ แผนการเรียน (7 ต.ค. 2569)
   ★ ห้องนอกระบบ = ม่วงบานเย็น + เครื่องหมายข้าวหลามตัด (◆) สีไม่ใช่ตัวบอกเดียว มีคำ "ห้องนอกระบบ" กำกับทุกที่
   ★ ในระบบ = สีแบรนด์ · ตามอัธยาศัย = บานเย็น · นอกระบบ = ม่วง · ยังไม่ระบุ = เทาอ่อน (สีเดียวกับไม่ระบุเพศ)
   ═══════════════════════════════════════════════════════════════════════ */

.rs {
    --rs-nf: #c026d3;
    --rs-nf-fg: #a21caf;
    --rs-nf-bg: color-mix(in srgb, #c026d3 11%, var(--tb1-surface, #ffffff));
    --rs-t1: var(--tb1-brand, #1d4ed8);
    --rs-t2: #c026d3;
    --rs-t3: #7c3aed;
    --rs-t0: var(--rs-unknown);
    --rs-pl: var(--tb1-success, #10b981);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .rs {
    --rs-nf: #e879f9;
    --rs-nf-fg: #f0abfc;
    --rs-nf-bg: color-mix(in srgb, #d946ef 18%, var(--tb1-surface, #111c31));
    --rs-t2: #e879f9;
    --rs-t3: #a78bfa;
}

/* การ์ดตัวเลขหกใบ */
.rs-figs.is-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rs-fig.is-nf::before {
    background: var(--rs-nf);
}

.rs-fig.is-nf .rs-fig-ic {
    background: linear-gradient(135deg, #86198f, #a21caf);
}

.rs-fig.is-nf .rs-fig-v b {
    color: var(--rs-nf-fg);
}

@media (max-width: 1199.98px) {
    .rs-figs.is-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .rs-figs.is-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ป้าย สวอตช์ แถบซ้อน */
.rs-tag.is-nf {
    color: var(--rs-nf-fg);
    background: var(--rs-nf-bg);
    border-color: color-mix(in srgb, var(--rs-nf) 45%, transparent);
}

.rs-sw.is-t1,
.rs-seg.is-t1 { background: var(--rs-t1); }
.rs-sw.is-t2,
.rs-seg.is-t2 { background: var(--rs-t2); }
.rs-sw.is-t3,
.rs-seg.is-t3 { background: var(--rs-t3); }
.rs-sw.is-t0,
.rs-seg.is-t0 { background: var(--rs-t0); }
.rs-sw.is-pl,
.rs-seg.is-pl { background: var(--rs-pl); }

.rs-duo-i.is-t1 { --rs-c: var(--rs-t1); }
.rs-duo-i.is-t2 { --rs-c: var(--rs-t2); }
.rs-duo-i.is-t3 { --rs-c: var(--rs-t3); }
.rs-duo-i.is-t0 { --rs-c: var(--rs-t0); }
.rs-duo-i.is-pl { --rs-c: var(--rs-pl); }

/* หมวดประเภทนักเรียนและแผนการเรียน */
.rs-grid-1 {
    margin-top: 18px;
    display: grid;
    gap: clamp(12px, 1.4vw, 18px);
}

.rs-trio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.rs-trio.is-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rs-small .rs-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    color: var(--rs-nf-fg);
}

.rs-tw.is-compact .rs-tbl {
    min-width: 26rem;
}

.rs-tbl tfoot td {
    font-variant-numeric: tabular-nums;
}

.rs-tbl-type tfoot td.is-num,
.rs-tbl-plan tfoot td.is-num {
    text-align: right;
}

.rs-warnum {
    font-weight: 700;
    color: var(--rs-nf-fg);
}

.rs-pl-name {
    display: block;
    white-space: normal;
}

.rs-pl-bar {
    display: block;
    height: 6px;
    margin-top: 4px;
    max-width: 14rem;
    overflow: hidden;
    background: var(--rs-paper-alt);
    border-radius: 999px;
}

.rs-pl-bar i {
    display: block;
    width: var(--p);
    height: 100%;
    background: var(--rs-pl);
    border-radius: 999px;
}

.rs-tbl-plan tr.is-unspec > * {
    color: var(--rs-muted);
    font-weight: 500;
}

/* แผนภูมิรายห้อง: ห้องนอกระบบ */
.rs-col.is-nonformal .rs-col-n {
    color: var(--rs-nf-fg);
}

.rs-col.is-nonformal .rs-col-n::before {
    content: "◆";
    display: block;
    font-size: .56rem;
    line-height: 1.1;
}

.rs-col.is-nonformal .rs-col-bar {
    box-shadow: 0 0 0 2px var(--rs-paper), 0 0 0 4px var(--rs-nf);
}

.rs-nfk {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px 0 2px;
    vertical-align: 0;
    border: 2px solid var(--rs-nf);
    transform: rotate(45deg);
}

/* ตารางรายห้อง */
.rs-tr.is-nonformal > th {
    box-shadow: inset 4px 0 0 var(--rs-nf);
}

.rs-tr.is-nonformal .rs-meter-bar {
    background: var(--rs-nf);
}

.rs-types {
    display: block;
    margin-top: 3px;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--rs-muted);
    white-space: normal;
}

/* การ์ดระดับชั้น */
.rs-lv-facts > div.is-nf {
    grid-column: 1 / -1;
    box-shadow: inset 3px 0 0 var(--rs-nf);
}

.rs-lv-facts > div.is-nf small {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    white-space: normal;
    color: var(--rs-muted);
}

/* โหมดคอนทราสต์สูง: ห้องนอกระบบ = ขาวเส้นคู่ · ตามอัธยาศัย = ลายเฉียง · นอกระบบ = ลายจุด · ยังไม่ระบุ = ลายเฉียงกลับ */
html.tb1-contrast-high .rs {
    --rs-nf: #ffffff;
    --rs-nf-fg: #ffffff;
    --rs-nf-bg: #000000;
    --rs-t1: #ffffff;
    --rs-pl: #ffffff;
}

html.tb1-contrast-high .rs-seg.is-t2,
html.tb1-contrast-high .rs-sw.is-t2 {
    background: repeating-linear-gradient(135deg, #ffffff 0 3px, #000000 3px 6px);
}

html.tb1-contrast-high .rs-seg.is-t3,
html.tb1-contrast-high .rs-sw.is-t3 {
    background: radial-gradient(circle, #ffffff 1.2px, #000000 1.6px) 0 0 / 5px 5px;
}

html.tb1-contrast-high .rs-seg.is-t0,
html.tb1-contrast-high .rs-sw.is-t0 {
    background: repeating-linear-gradient(45deg, #ffffff 0 1px, #000000 1px 5px);
}

html.tb1-contrast-high .rs-tag.is-nf,
html.tb1-contrast-high .rs-lv-facts > div.is-nf {
    border: 3px double #ffffff;
}

html.tb1-contrast-high .rs .rs-col.is-nonformal .rs-col-bar {
    box-shadow: 0 0 0 2px #000000, 0 0 0 5px #ffffff;
}

html.tb1-contrast-high .rs-pl-bar {
    background: #000000;
    box-shadow: inset 0 0 0 1px #ffffff;
}

html.tb1-contrast-high .rs .rs-warnum {
    color: #facc15 !important;
    text-decoration: underline;
}

@media print {
    .rs-figs.is-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .rs-col.is-nonformal .rs-col-bar,
    .rs-tr.is-nonformal > th {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ลดที่ว่าง (7 ต.ค. 2569 รอบสอง)
   ═══════════════════════════════════════════════════════════════════════ */

/* ★ ภาพรวม: เดิมแผงชาย–หญิงสั้นกว่าแผงช่วงชั้นราว 115px แล้วเหลือที่ว่างใต้แผง
   ตอนนี้สองแผงสูงเท่ากัน และส่วนที่เหลือกระจายลงในรายการของแผงที่สั้นกว่า
   (แถบชาย–หญิงรายชั้นห่างกันขึ้น หรือแถวตารางสูงขึ้น) ไม่กองเป็นช่องโล่ง */
.rs-grid-2.is-even {
    align-items: stretch;
}

.rs-grid-2.is-even > .rs-panel {
    display: flex;
    flex-direction: column;
}

.rs-grid-2.is-even > .rs-panel > .rs-panel-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.rs-grid-2.is-even .rs-bal {
    flex: 1 1 auto;
    justify-content: space-evenly;
}

.rs-grid-2.is-even .rs-cmp {
    flex: 1 1 auto;
}

.rs-cmp th,
.rs-cmp td {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* ★ ประเภทนักเรียนและแผนการเรียน: สองแผงวางเต็มกว้างซ้อนกัน แล้วแบ่งสองคอลัมน์ภายในแผง
   ดูความกว้างของแผงเอง (container query) ไม่ใช่ความกว้างจอ แผงแคบหรือมือถือจึงเรียงลงล่างแบบเดิม */
#rs-p-type > .rs-panel-body,
#rs-p-plan > .rs-panel-body {
    container: rs-body / inline-size;
}

@container rs-body (min-width: 44rem) {
    .rs-cols {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 16px 28px;
        align-items: start;
    }

    .rs-cols-b > .rs-sub:first-child {
        margin-top: 0;
    }

    .rs-cols.is-plan .rs-duo {
        margin-bottom: 0;
    }

    .rs-cols-b > .rs-small:first-child {
        margin-top: 0;
    }
}

.rs-cols.is-plan + .rs-tw {
    margin-top: 16px;
}

/* ตัวเลขประเภทเรียงลงเป็นแถว ป้ายซ้าย ตัวเลขขวา
   แผงกว้าง: คอลัมน์ซ้ายจึงสูงใกล้กับตารางด้านขวา
   แผงแคบ (มือถือ): ไม่เหลือช่องว่างข้างการ์ดใบที่สามแบบตารางสองคอลัมน์ */
@container rs-body (min-width: 44rem) or (max-width: 29.99rem) {
    .rs-cols-a > .rs-trio,
    .rs-cols-a > .rs-trio.is-4 {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .rs-cols-a > .rs-trio > .rs-duo-i {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "k v" "p v";
        align-items: center;
        column-gap: 12px;
        padding: 9px 14px;
    }

    .rs-cols-a > .rs-trio .rs-duo-k {
        grid-area: k;
    }

    .rs-cols-a > .rs-trio .rs-duo-v {
        grid-area: v;
        text-align: right;
        white-space: nowrap;
    }

    .rs-cols-a > .rs-trio .rs-duo-p {
        grid-area: p;
    }
}

/* รายชื่อแผนที่เลือกได้ (ขึ้นเมื่อยังไม่มีใครระบุแผน) */
.rs-pchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.rs-pchips li {
    padding: 2px 10px;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--rs-ink-2);
    background: var(--rs-paper-alt);
    border: 1px solid var(--rs-line);
    border-radius: 999px;
}

html.tb1-contrast-high .rs-pchips li {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
}

/* รายงานทะเบียนและวิเคราะห์ห้องเรียน: ใช้พื้นที่อ่านให้กระชับ */
@media screen {
    .rs-student-report .rs-hero,
    .rs-student-report .rs-hero.is-plain { padding: 24px var(--rs-gutter); }
    .rs-student-report .rs-hero-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
    .rs-student-report .rs-hero-sub { max-width: 76ch; }
    .rs-student-report .rs-figs { margin-top: 16px; gap: 10px; }
    .rs-student-report .rs-fig { padding: 12px; box-shadow: var(--rs-shadow); }
    .rs-student-report .rs-fig-k { flex-direction: row; align-items: center; gap: 8px; }
    .rs-student-report .rs-fig-ic { width: 30px; height: 30px; flex: none; }
    .rs-student-report .rs-fig-v b { font-size: 1.7rem; }
    .rs-student-report .rs-sec { margin-top: 24px; }
    .rs-student-report .rs-grid-2 { gap: 14px; align-items: stretch; }
    .rs-student-report .rs-panel-head { padding: 10px 14px; }
    .rs-student-report .rs-panel-body { padding: 14px; }
    .rs-student-report .rs-tools { margin-top: 16px; }
    .rs-student-report .rs-btn { min-height: 40px; }
    .rs-student-report .rs-retry { margin-top: 12px; }
    .rs-student-report .rs-tw { overscroll-behavior-inline: contain; }
}
@media screen and (min-width: 980px) {
    .rs-student-report .rs-grid-2 > .rs-panel { display: flex; flex-direction: column; }
    .rs-student-report .rs-grid-2 > .rs-panel > .rs-panel-head { min-height: 54px; }
    .rs-student-report .rs-grid-2 > .rs-panel > .rs-panel-body { flex: 1; }
}
@media screen and (max-width: 640px) {
    .rs-student-report .rs-hero,
    .rs-student-report .rs-hero.is-plain { padding: 18px var(--rs-gutter); }
    .rs-student-report .rs-btn,
    .rs-student-report .rs-chip,
    .rs-student-report .rs-year { min-height: 44px; }
    .rs-student-report select { font-size: 16px; }
}
@media screen and (min-width: 641px) and (max-width: 1199.98px) {
    .rs-student-report .rs-figs.is-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .rs-student-report .rs-figs.is-5 > li { grid-column: span 2; }
    .rs-student-report .rs-figs.is-5 > li:nth-child(n+4) { grid-column: span 3; }
}
@media screen {
    .rs-student-report .rs-suite { margin-bottom: 10px; }
    .rs-student-report .rs-hero-title { margin-top: 10px; }
    .rs-student-report .rs-hero-sub { margin-top: 8px; }
    .rs-student-report .rs-years { margin-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ชื่อแผนการเรียนเต็ม (29 ต.ค. 2569)
   ชื่อทางการชุดเดียวกับระบบรับสมัคร ยาวสุดราว 55 ตัวอักษร เช่น "เตรียมธุรกิจอุตสาหกรรมการบริการ (การโรงแรม และการบิน)"
   คอลัมน์ชื่อตัดบรรทัดเอง คอลัมน์ตัวเลขไม่ถูกบีบ · มือถือไม่ต้องเลื่อนตารางข้าง · ฉบับพิมพ์ใช้กฎเดียวกัน
   ═══════════════════════════════════════════════════════════════════════ */
.rs-tw.is-compact .rs-tbl-plan {
    min-width: 0;
}

.rs-tbl-plan tbody th {
    min-width: 9rem;
    white-space: normal;
}

.rs-tbl-plan .is-num {
    white-space: nowrap;
}

.rs-pl-name {
    line-height: 1.45;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.rs-pchips li {
    max-width: 100%;
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    .rs-tbl-plan th,
    .rs-tbl-plan td {
        padding-inline: 6px;
    }

    .rs-tbl-plan tbody th {
        min-width: 8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   อายุนักเรียนเทียบเกณฑ์ชั้น (report_student.php · บุคลากร · 29 ต.ค. 2569)
   สีไม่ใช่ตัวบอกเดียว: ช่องอายุตามเกณฑ์มีกรอบหนาและตัวหนา ตัวเลขที่เกินชั้น 2 ปีขึ้นไปเป็นตัวหนา
   และทุกสีมีคำอธิบายในแถบสรุปกับคำอธิบายสัญลักษณ์ใต้ตาราง
   ═══════════════════════════════════════════════════════════════════════ */

.rs-age-figs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.rs-age-fig {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-rs);
    background: var(--rs-paper);
}

.rs-age-fig.is-over2 {
    border-color: color-mix(in srgb, var(--rs-crit) 40%, var(--rs-line));
    background: var(--rs-crit-bg);
}

.rs-age-fig-k {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--rs-muted);
}

.rs-age-fig-v b {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.rs-age-fig-v small,
.rs-age-fig-s {
    color: var(--rs-muted);
}

.rs-age-fig-s {
    font-size: .875rem;
}

.rs-age-fig.is-over2 .rs-age-fig-v b {
    color: var(--rs-crit-fg);
}

.rs-age-key {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--rs-line-bold);
    border-radius: 4px;
    background: var(--rs-paper);
    vertical-align: -2px;
}

.rs-age-key.is-on {
    border: 2px solid var(--rs-ok);
    background: var(--rs-ok-bg);
}

.rs-age-key.is-over1 {
    border-color: color-mix(in srgb, var(--rs-warn) 45%, var(--rs-line));
    background: var(--rs-warn-bg);
}

.rs-age-key.is-over2 {
    border-color: color-mix(in srgb, var(--rs-crit) 55%, var(--rs-line));
    background: color-mix(in srgb, var(--rs-crit) 22%, var(--rs-paper));
}

.rs-age-key.is-under {
    border-color: color-mix(in srgb, var(--rs-info) 45%, var(--rs-line));
    background: var(--rs-info-bg);
}

.rs-age-tbl {
    min-width: 46rem;
}

.rs-age-tbl thead th small {
    font-size: inherit;
    font-weight: 500;
}

.rs-age-exp {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--rs-muted);
}

.rs-age-c.is-on {
    background: var(--rs-ok-bg);
    box-shadow: inset 0 0 0 2px var(--rs-ok);
    font-weight: 700;
    color: var(--rs-ink);
}

.rs-age-c.is-over1 {
    background: var(--rs-warn-bg);
}

.rs-age-c.is-over2 {
    background: color-mix(in srgb, var(--rs-crit) 14%, var(--rs-paper));
    font-weight: 700;
    color: var(--rs-crit-fg);
}

.rs-age-c.is-under {
    background: var(--rs-info-bg);
}

/* ช่องที่ไม่มีนักเรียนไม่แรเงา แต่ช่องตามเกณฑ์ยังมีกรอบจาง ๆ ให้เห็นแนวทแยงเสมอ */
.rs-age-c.is-zero {
    background: transparent;
    box-shadow: none;
}

.rs-age-c.is-on.is-zero {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rs-ok) 40%, transparent);
}

.rs-age-warn {
    color: var(--rs-crit-fg);
}

.rs-age-tbl tfoot th,
.rs-age-tbl tfoot td {
    font-weight: 600;
    background: var(--rs-paper-alt);
    border-bottom: 0;
}

.rs-age-legend {
    margin-top: 12px;
}

.rs-age-notes {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--rs-ink-2);
}

.rs-age-notes li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rs-age-notes .rs-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--rs-brand);
}

@media (max-width: 900px) {
    .rs-age-figs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ★ 29 ต.ค. 2569: ตารางแจกแจงนอกระบบ ตามอัธยาศัย และอายุ 18 ปีขึ้นไป */
.rs-age-lead {
    margin: 0 0 12px;
    font-size: .95rem;
    color: var(--rs-ink-2);
}

.rs-age-lead b {
    color: var(--rs-ink);
}

.rs-age-grp {
    min-width: 48rem;
}

/* หัวคอลัมน์และชื่อกลุ่มตัดบรรทัดได้ ตารางจึงพอดีจอทั่วไปโดยไม่ต้องเลื่อนไปหาคอลัมน์ 18 ปีขึ้นไป */
.rs-age-grp th,
.rs-age-grp td {
    padding-inline: 10px;
}

.rs-age-grp thead th {
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.35;
}

.rs-age-grp tbody th {
    white-space: normal;
    min-width: 10rem;
}

.rs-age-grp td,
.rs-age-grp thead th.is-age {
    white-space: nowrap;
}

.rs-age-grp thead th small {
    font-size: inherit;
    font-weight: 500;
}

.rs-age-grp tbody td small {
    font-size: .875rem;
    font-weight: 500;
    color: var(--rs-muted);
}

.rs-age-grp tr.is-ref > * {
    background: var(--rs-paper-alt);
}

.rs-age-grp tfoot th,
.rs-age-grp tfoot td {
    font-weight: 600;
    background: var(--rs-paper-alt);
    border-bottom: 0;
}

html.tb1-contrast-high .rs-age-fig,
html.tb1-contrast-high .rs-age-c:is(.is-over1, .is-over2, .is-under, .is-on) {
    background: #000000 !important;
}

html.tb1-contrast-high .rs-age-c.is-on {
    box-shadow: inset 0 0 0 3px #facc15;
}

@media print {
    .rs-age-c.is-on {
        box-shadow: inset 0 0 0 2px #000000;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ★ 29 ต.ค. 2569: อายุรายห้อง (report_student.php) และหน้ารายชื่อรายห้อง (report_student_room.php)
   ═══════════════════════════════════════════════════════════════════════ */

.rs-age-room {
    min-width: 58rem;
}

.rs-age-room thead th {
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.35;
}

.rs-age-room tbody th .rs-roster {
    font-size: .9rem;
}

.rs-age-room td {
    white-space: nowrap;
}

.rs-age-dim {
    color: var(--rs-muted);
    font-weight: 400;
}

.rr-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 18px;
}

.rr-pick {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.rr-pick label {
    font-size: .9rem;
    color: var(--rs-muted);
}

.rr-pick select,
.rr-input {
    min-height: 40px;
    padding: 6px 12px;
    font: inherit;
    font-size: 1rem;
    color: var(--rs-ink);
    background: var(--rs-paper);
    border: 1px solid var(--rs-line-bold);
    border-radius: var(--rs-rs);
}

.rr-pick select:focus-visible,
.rr-input:focus-visible {
    outline: 3px solid var(--rs-brand-line);
    outline-offset: 1px;
    border-color: var(--rs-brand);
}

.rs-callout.rr-flash.is-ok {
    background: var(--rs-ok-bg);
    border-color: var(--rs-ok);
}

.rr-sum {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.rr-sum-i {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    font-size: .9rem;
    color: var(--rs-ink-2);
    background: var(--rs-paper-alt);
    border: 1px solid var(--rs-line);
    border-radius: 999px;
}

.rr-sum-i b {
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.rr-sum-i.is-on { background: var(--rs-ok-bg); border-color: color-mix(in srgb, var(--rs-ok) 45%, transparent); }
.rr-sum-i.is-over1 { background: var(--rs-warn-bg); }
.rr-sum-i.is-over2 { background: var(--rs-crit-bg); }
.rr-sum-i.is-over2 b { color: var(--rs-crit-fg); }
.rr-sum-i.is-under { background: var(--rs-info-bg); }
.rr-sum-i.is-miss b { color: var(--rs-crit-fg); }

.rr-tbl {
    min-width: 66rem;
}

.rr-tbl td,
.rr-tbl thead th {
    white-space: nowrap;
}

.rr-tbl tbody th {
    white-space: normal;
    min-width: 11rem;
}

.rr-code {
    font-variant-numeric: tabular-nums;
    color: var(--rs-muted);
}

.rr-bad {
    color: var(--rs-crit-fg);
}

.rr-now {
    color: var(--rs-muted);
}

.rr-adult {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--rs-crit-fg);
    background: var(--rs-crit-bg);
    border-radius: 999px;
}

.rr-tone {
    display: inline-block;
    padding: 2px 10px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--rs-ink-2);
    background: var(--rs-paper-alt);
    border-radius: 999px;
}

.rr-tone.is-on { color: var(--rs-ok-fg); background: var(--rs-ok-bg); }
.rr-tone.is-over1 { color: var(--rs-warn-fg); background: var(--rs-warn-bg); }
.rr-tone.is-over2 { color: var(--rs-crit-fg); background: var(--rs-crit-bg); }
.rr-tone.is-under { color: var(--rs-info-fg); background: var(--rs-info-bg); }
.rr-tone.is-miss { color: var(--rs-crit-fg); background: transparent; border: 1px dashed currentColor; }
.rr-tone.is-skip { color: var(--rs-muted); }

.rr-last,
.rr-trail th,
.rr-trail td {
    font-size: .875rem;
}

.rr-last small,
.rr-trail small {
    display: block;
    font-size: .875rem;
    font-weight: 400;
    color: var(--rs-muted);
}

.rr-tbl tr.is-editing > * {
    background: var(--rs-brand-soft);
}

.rr-edit > td {
    padding: 16px 18px 18px;
    background: var(--rs-brand-soft);
    border-bottom: 2px solid var(--rs-brand-line);
}

.rr-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    white-space: normal;
    /* ตารางกว้างกว่าจอโทรศัพท์และเลื่อนซ้ายขวา ฟอร์มจึงติดขอบซ้ายของส่วนที่มองเห็น กว้างไม่เกินจอ */
    position: sticky;
    left: 18px;
    max-width: min(56rem, calc(100vw - 2 * var(--rs-gutter) - 60px));
}

.rr-field {
    flex: 1 1 16rem;
}

.rr-input {
    width: 100%;
}

.rr-field {
    display: grid;
    gap: 6px;
}

.rr-field label {
    font-weight: 600;
    color: var(--rs-ink);
}

.rr-help,
.rr-who {
    font-size: .875rem;
    color: var(--rs-muted);
    max-width: 40rem;
}

.rr-err {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--rs-crit-fg);
}

.rr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rs .rr-save {
    color: #ffffff;
    background: var(--rs-brand);
    border-color: var(--rs-brand);
}

.rs .rr-save:hover {
    color: #ffffff;
    background: color-mix(in srgb, var(--rs-brand) 85%, #000000);
}

.rr-who {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-basis: 100%;
}

.rr-who .rs-icon,
.rr-err .rs-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.rr-trail {
    min-width: 46rem;
}

.rr-when {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rr-page :target {
    scroll-margin-top: 90px;
}

@media (max-width: 720px) {
    .rr-pick {
        margin-left: 0;
    }
}

html.tb1-contrast-high .rr-tone,
html.tb1-contrast-high .rr-sum-i,
html.tb1-contrast-high .rr-adult {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff;
}

@media print {
    .rr-nav,
    .rr-edit,
    .rr-act {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ★ 30 ต.ค. 2569: หัวหน้าแบ่งสองฝั่ง (report_student.php และ report_student2.php · .rs-hero.is-split)
   ซ้าย: ป้าย หัวเรื่อง คำอธิบาย วันที่ (ชิดซ้าย ขอบตรงกับเนื้อหาด้านล่าง)
   ขวา: ตัวสลับภาพรวม/วิเคราะห์ และปีการศึกษา อยู่ด้วยกันกลางแนวตั้ง
   เดิมทุกอย่างเรียงกลางเป็นแนวตั้ง หัวหน้าสูง 321 px สองข้างว่าง · จอแคบยังเรียงกลางเหมือนเดิม
   ═══════════════════════════════════════════════════════════════════════ */
@media screen {
    .rs-hero.is-split .rs-hero-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (min-width: 1080px) {
    .rs-student-report .rs-hero.is-split .rs-hero-in {
        /* หัวหน้ากว้างเต็มจอ ตัวในกว้างเท่าเนื้อหาด้านล่าง ขอบซ้ายขวาจึงตรงกัน */
        max-width: calc(var(--rs-page-max) - 2 * var(--rs-gutter));
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "main suite" "main years";
        align-items: center;
        column-gap: clamp(24px, 3vw, 48px);
        row-gap: 12px;
        text-align: left;
    }

    .rs-hero.is-split .rs-hero-main {
        grid-area: main;
        align-items: flex-start;
    }

    .rs-hero.is-split .rs-hero-sub {
        max-width: 86ch;
    }

    .rs-hero.is-split .rs-suite {
        grid-area: suite;
        margin: 0;
        align-self: end;
        justify-self: end;
    }

    .rs-hero.is-split .rs-years {
        grid-area: years;
        margin: 0;
        align-self: start;
        justify-self: end;
        justify-content: flex-end;
    }
}