/* ═══════════════════════════════════════════════════════════════════════
   ครูที่ปรึกษาประจำชั้นเรียน — ClassAdvisors.php
   โรงเรียนเทศบาล ๑ กิตติขจร

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

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

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

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

}

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

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

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

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

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

main.ca:focus {
    outline: none;
}

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

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

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

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

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

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

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

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

/* ★ ลิงก์ข้ามไปเนื้อหาซ่อนด้วย clip ไม่ใช่ left:-9999px ซึ่งไปโดนตัวตรวจล้นแนวนอน */
.ca-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.ca-page a.ca-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.ca-page a.ca-skip:focus {
    color: #facc15;
    background: #000000;
    outline: 3px solid #facc15;
}

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

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

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

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

.ca-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%);
}

.ca-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);
}

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

.ca-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);
}

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

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

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

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

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

.ca-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);
}

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

.ca .ca-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(--ca-muted);
    text-decoration: none;
    background: var(--ca-paper);
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-shadow-float);
    transition: border-color .25s var(--ca-ease), box-shadow .25s var(--ca-ease);
}

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

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

/* แถบสีบนขอบการ์ด เปลี่ยนสีตามสถานะ */
.ca-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ca-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(--ca-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 35%, var(--ca-paper));
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

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

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

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

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

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

.ca-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(--ca-ink-2);
    background: color-mix(in srgb, #7c3aed 6%, var(--ca-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 28%, var(--ca-line));
    border-radius: var(--ca-rs);
}

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

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

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

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

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

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

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

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

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

.ca-tools {
    position: sticky;
    top: var(--ca-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(--ca-paper) 90%, transparent);
    border: 1px solid var(--ca-line);
    border-radius: 999px;
    box-shadow: var(--ca-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

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

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

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

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

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

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

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

.ca-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(--ca-ink-2);
    background: var(--ca-paper);
    border: 1px solid var(--ca-line-bold);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ca-tip {
    position: absolute;
    z-index: 30;
    max-width: 16rem;
    padding: 7px 11px;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--ca-tip-ink);
    background: var(--ca-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));
}

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

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

.ca-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(--ca-paper);
    border: 1px dashed var(--ca-line-bold);
    border-radius: var(--ca-r);
}

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

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

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

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

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

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

.ca .ca-empty-card .ca-btn {
    text-decoration: none;
}
/* ═══════════════════════════════════════════════════════════════════════
   หัวหน้า: ปีการศึกษา ภาคเรียน
   ═══════════════════════════════════════════════════════════════════════ */

.ca-terms {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
}

.ca-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    font-size: .92rem;
    color: #e0e7ff;
}

.ca-pick ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ca .ca-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 36px;
    padding: 4px 14px;
    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(--ca-ease), border-color .2s var(--ca-ease);
}

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

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

/* ═══════════════════════════════════════════════════════════════════════
   การ์ดตัวเลข สี่หรือห้าใบ
   ═══════════════════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

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

.ca .ca-btn.is-primary {
    color: #ffffff;
    background: var(--ca-brand);
    border-color: var(--ca-brand);
}

.ca .ca-btn.is-primary:hover {
    color: #ffffff;
    background: color-mix(in srgb, var(--ca-brand) 86%, #000000);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .ca .ca-btn.is-primary {
    color: #0b1324;
}

/* ═══════════════════════════════════════════════════════════════════════
   ผังห้องเรียน ชั้น × ห้อง
   ═══════════════════════════════════════════════════════════════════════ */

.ca-cover-scroll {
    overflow-x: auto;
    border-radius: var(--ca-rs);
}

.ca-cover {
    width: 100%;
    min-width: 40rem;
    border-collapse: separate;
    border-spacing: 6px;
    table-layout: fixed;
}

.ca-cover thead th {
    padding: 2px 4px 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ca-muted);
    text-align: center;
}

.ca-rowhead {
    width: 4.2rem;
    text-align: left;
}

.ca-cover tbody .ca-rowhead b {
    font-family: var(--ca-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ca-ink);
}

.ca-cover td {
    padding: 0;
    vertical-align: top;
}

.ca-cover td.is-none {
    background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ca-line) 70%, transparent) 6px 7px);
    border-radius: 12px;
}

.ca .ca-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 92px;
    padding: 9px 6px 8px;
    color: var(--ca-ink-2);
    text-align: center;
    text-decoration: none;
    background: var(--ca-brand-soft);
    border: 1px solid var(--ca-brand-line);
    border-radius: 12px;
    transition: border-color .2s var(--ca-ease), box-shadow .2s var(--ca-ease), translate .2s var(--ca-ease);
}

.ca .ca-cell:hover {
    border-color: var(--ca-brand);
    box-shadow: 0 10px 22px -16px rgba(15, 23, 42, .6);
    translate: 0 -2px;
}

.ca-cover td.is-two .ca-cell {
    background: color-mix(in srgb, var(--ca-brand) 16%, var(--ca-paper));
}

.ca-cover td.is-gap .ca-cell {
    color: var(--ca-muted);
    background: var(--ca-paper);
    border: 1px dashed var(--ca-line-bold);
}

.ca-cell-rm {
    font-family: var(--ca-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ca-ink);
    white-space: nowrap;
}

.ca-cell-faces {
    display: flex;
    justify-content: center;
}

.ca-mini {
    width: 30px;
    height: 30px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ca-paper);
}

.ca-mini + .ca-mini {
    margin-left: -8px;
}

.ca-mini .ca-face-img,
.ca-mini .ca-face-ini {
    width: 100%;
    height: 100%;
}

.ca-mini .ca-face-ini b {
    font-size: .8rem;
}

.ca-cell-n {
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
}

/* บุคลากร: ห้องที่ยังไม่มีครูเป็นสีเตือน (หน้าสาธารณะเป็นเส้นประเงียบ ๆ) */
.ca-staff .ca-cover td.is-gap .ca-cell {
    color: var(--ca-warn-fg);
    background: var(--ca-warn-bg);
    border: 1px dashed var(--ca-warn);
}

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

.ca-key {
    display: inline-block;
    width: 18px;
    height: 12px;
    background: var(--ca-brand-soft);
    border: 1px solid var(--ca-brand-line);
    border-radius: 3px;
}

.ca-key.is-two {
    background: color-mix(in srgb, var(--ca-brand) 16%, var(--ca-paper));
}

.ca-key.is-gap {
    background: var(--ca-paper);
    border: 1px dashed var(--ca-line-bold);
}

.ca-staff .ca-key.is-gap {
    background: var(--ca-warn-bg);
    border-color: var(--ca-warn);
}

/* ความครอบคลุม (บุคลากร) */
.ca-gap {
    margin-top: 16px;
    padding: 16px 20px 18px;
    background: var(--ca-paper);
    border: 1px solid var(--ca-line);
    border-left: 5px solid var(--ca-ok);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-shadow);
}

.ca-gap.is-warn {
    border-left-color: var(--ca-warn);
}

.ca-gap-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.ca-gap-h {
    font-family: var(--ca-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ca-ink);
}

.ca-gap-head .ca-lock {
    margin-left: auto;
}

.ca-cov {
    position: relative;
    height: 12px;
    margin-top: 12px;
    overflow: hidden;
    background: var(--ca-paper-alt);
    border-radius: 999px;
}

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

.ca-cov-k,
.ca-gap-t {
    margin-top: 8px;
    font-size: .9rem;
    color: var(--ca-ink-2);
}

.ca-cov-k b,
.ca-gap-t b {
    color: var(--ca-ink);
    font-variant-numeric: tabular-nums;
}

.ca-gap-list {
    margin: 10px 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ca .ca-gap-a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 32px;
    padding: 5px 12px;
    color: var(--ca-warn-fg);
    text-decoration: none;
    background: var(--ca-warn-bg);
    border: 1px solid color-mix(in srgb, var(--ca-warn) 50%, transparent);
    border-radius: 999px;
}

.ca .ca-gap-a:hover {
    border-color: var(--ca-warn-fg);
}

.ca-gap-a b {
    font-weight: 700;
}

.ca-gap-a small {
    font-size: .8rem;
}

.ca-gap-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-weight: 600;
    color: var(--ca-ok-fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   ค้นหาและกรอง
   ═══════════════════════════════════════════════════════════════════════ */

.ca-find {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--ca-paper);
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-shadow);
}

.ca-filter {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.ca-staff .ca-filter {
    grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)) auto;
}

.ca-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ca-field label {
    display: inline-flex;
    align-items: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ca-ink-2);
}

.ca .ca-field select,
.ca .ca-field input {
    width: 100%;
    min-height: 42px;
    padding: 6px 12px;
    font: inherit;
    font-size: .94rem;
    color: var(--ca-ink);
    background: var(--ca-paper);
    border: 1px solid var(--ca-line-bold);
    border-radius: 10px;
}

.ca-q-in {
    position: relative;
    display: block;
}

.ca-q-in .ca-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--ca-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.ca .ca-field input {
    padding-left: 38px;
}

.ca .ca-field :is(select, input):focus-visible {
    border-color: var(--ca-brand);
}

.ca-acts {
    display: flex;
    gap: 8px;
}

.ca-acts .ca-btn {
    min-height: 42px;
    white-space: nowrap;
}

.ca-meta {
    margin-top: 14px;
    font-size: .88rem;
    color: var(--ca-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   ระดับชั้นและการ์ดห้อง
   ═══════════════════════════════════════════════════════════════════════ */

.ca-level {
    margin-top: 24px;
}

.ca-level-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ca-line);
}

.ca-level-badge {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent-strong, #0284c7));
    border-radius: 12px;
}

.ca-level-badge b {
    font-family: var(--ca-serif);
    font-size: .98rem;
    font-weight: 700;
    color: #ffffff;
}

.ca-level-t {
    font-family: var(--ca-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ca-ink);
}

.ca-level-m {
    margin-left: auto;
    font-size: .86rem;
    color: var(--ca-muted);
}

.ca-rooms {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 16px);
}

.ca-room {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 14px 22px;
    overflow: hidden;
    background: var(--ca-paper);
    border: 1px solid var(--ca-line);
    border-radius: var(--ca-r);
    box-shadow: var(--ca-shadow);
    scroll-margin-top: var(--ca-stick, 8.5rem);
}

.ca-room::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;
}

.ca-room.is-gap::before {
    background: var(--ca-line-bold);
}

.ca-staff .ca-room.is-gap::before {
    background: var(--ca-warn);
}

/* กดช่องในผังแล้วการ์ดของห้องนั้นมีกรอบ (ทำงานได้โดยไม่มีสคริปต์) */
.ca-room:target,
.ca-room.is-target {
    border-color: var(--ca-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-brand) 30%, transparent), var(--ca-shadow);
}

.ca-room-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ca-room-t b {
    font-family: var(--ca-serif);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ca-ink);
}

.ca-room-n {
    font-size: .86rem;
    color: var(--ca-muted);
    white-space: nowrap;
}

.ca-room-n b {
    color: var(--ca-ink);
    font-variant-numeric: tabular-nums;
}

.ca-advs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ca-adv {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ca-face {
    flex: none;
    width: 48px;
    height: 48px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ca-paper), 0 0 0 3px var(--ca-line);
}

.ca-face-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background: var(--ca-paper-alt);
}

.ca-face-ini {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e7ff, #bfdbfe);
}

.ca-face-ini b {
    font-family: var(--ca-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e3a8a;
}

.ca-adv-tx {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ca .ca-adv-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 26px;
    color: var(--ca-ink);
    text-decoration: none;
}

.ca .ca-adv-link:hover .ca-adv-name {
    color: var(--ca-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ca-adv-name {
    font-weight: 700;
    line-height: 1.4;
    color: var(--ca-ink);
    overflow-wrap: anywhere;
}

.ca-adv-dept {
    font-size: .82rem;
    color: var(--ca-muted);
}

.ca-adv-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.ca-flag {
    padding: 0 8px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.7;
    color: #6d28d9;
    background: color-mix(in srgb, #7c3aed 9%, var(--ca-paper));
    border: 1px solid color-mix(in srgb, #7c3aed 32%, var(--ca-paper));
    border-radius: 999px;
}

.ca-flag.is-off {
    color: var(--ca-crit-fg);
    background: var(--ca-crit-bg);
    border-color: color-mix(in srgb, var(--ca-crit) 40%, transparent);
}

.ca-flag.is-code {
    color: var(--ca-ink-2);
    background: var(--ca-paper-alt);
    border-color: var(--ca-line-bold);
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .ca .ca-flag:not(.is-off):not(.is-code) {
    color: #c4b5fd;
}

.ca-adv-note {
    margin-top: 2px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ca-muted);
}

.ca-adv.is-off .ca-face {
    filter: grayscale(1);
}

.ca-room-none {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ca-muted);
    background: var(--ca-paper-alt);
    border-radius: 10px;
}

.ca-room-none .ca-icon {
    flex: none;
    margin-top: 1px;
    width: 18px;
    height: 18px;
}

.ca-staff .ca-room.is-gap .ca-room-none {
    font-weight: 600;
    color: var(--ca-warn-fg);
    background: var(--ca-warn-bg);
}

.ca-room-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ca-line);
}

.ca .ca-room-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ca-brand);
    text-decoration: none;
}

.ca .ca-room-link:hover span:first-of-type {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ca-room-link .ca-icon {
    width: 16px;
    height: 16px;
}

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

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

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

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

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

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

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

    .ca-filter,
    .ca-staff .ca-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ca-field.is-q {
        grid-column: 1 / -1;
    }
}

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

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

@media (max-width: 760px) {
    .ca-panel-note {
        margin-left: 0;
        flex-basis: 100%;
    }

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

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

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

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

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

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

    .ca-acts {
        grid-column: 1 / -1;
    }

    .ca-level-m {
        margin-left: 0;
        flex-basis: 100%;
    }

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

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

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

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

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

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

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

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

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

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

    .ca-find {
        padding: 14px;
    }

    .ca-cover {
        min-width: 34rem;
        border-spacing: 4px;
    }

    .ca .ca-cell {
        min-height: 84px;
    }
}

@media (max-width: 340px) {
    .ca-filter,
    .ca-staff .ca-filter {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* ช่องในผังยกขึ้นทีละช่องตามลำดับชั้นและห้อง */
    .ca-cover td:not(.is-none) {
        transition: translate .6s var(--ca-ease) calc(.1s + var(--i, 0) * .02s);
    }

    .ca.ca-motion .ca-map-panel:not(.is-in) .ca-cover td:not(.is-none) {
        translate: 0 18px;
    }

    .ca-cov-fill {
        transition: transform 1.1s var(--ca-ease) .3s;
    }

    .ca.ca-motion [data-ca-reveal]:not(.is-in) .ca-cov-fill {
        transform: scaleX(0);
    }

    .ca-room.is-target {
        animation: ca-target 1.4s var(--ca-ease) 1;
    }
}

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

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

    to {
        transform: none;
    }
}

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

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

@keyframes ca-target {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ca-brand) 55%, transparent), var(--ca-shadow);
    }

    100% {
        box-shadow: 0 0 0 14px color-mix(in srgb, var(--ca-brand) 0%, transparent), var(--ca-shadow);
    }
}

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

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

html.tb1-contrast-high .ca {
    --ca-neutral: #ffffff;
    --ca-warn: #facc15;
    --ca-ok: #ffffff;
    --ca-brand: #ffffff;
    --ca-paper: #000000;
}

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

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

html.tb1-contrast-high .ca-hero-eyebrow,
html.tb1-contrast-high .ca .ca-pill {
    background: #000000;
    border-color: #facc15;
}

html.tb1-contrast-high .ca .ca-fig,
html.tb1-contrast-high .ca-panel,
html.tb1-contrast-high .ca-tools,
html.tb1-contrast-high .ca-about,
html.tb1-contrast-high .ca-callout,
html.tb1-contrast-high .ca-find,
html.tb1-contrast-high .ca-gap,
html.tb1-contrast-high .ca-room,
html.tb1-contrast-high .ca .ca-cell,
html.tb1-contrast-high .ca-cover td.is-two .ca-cell,
html.tb1-contrast-high .ca-staff .ca-cover td.is-gap .ca-cell,
html.tb1-contrast-high .ca-room-none,
html.tb1-contrast-high .ca-staff .ca-room.is-gap .ca-room-none,
html.tb1-contrast-high .ca-flag,
html.tb1-contrast-high .ca .ca-gap-a,
html.tb1-contrast-high .ca-fig-ic,
html.tb1-contrast-high .ca .ca-fig .ca-fig-ic,
html.tb1-contrast-high .ca-panel-ic,
html.tb1-contrast-high .ca-level-badge,
html.tb1-contrast-high .ca .ca-btn,
html.tb1-contrast-high .ca .ca-field :is(select, input),
html.tb1-contrast-high .ca-sec-count,
html.tb1-contrast-high .ca-lock,
html.tb1-contrast-high .ca-audience,
html.tb1-contrast-high .ca-audience-ic,
html.tb1-contrast-high .ca-empty-card,
html.tb1-contrast-high .ca-key {
    background: #000000;
    border-color: #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .ca-fig-ic,
html.tb1-contrast-high .ca-panel-ic,
html.tb1-contrast-high .ca-level-badge,
html.tb1-contrast-high .ca-audience-ic,
html.tb1-contrast-high .ca-sec-count,
html.tb1-contrast-high .ca-lock,
html.tb1-contrast-high .ca-flag {
    color: #ffffff;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .ca .ca-cover td.is-gap .ca-cell,
html.tb1-contrast-high .ca .ca-key.is-gap,
html.tb1-contrast-high .ca .ca-flag.is-off {
    background: #000000;
    border: 2px dashed #facc15;
}

html.tb1-contrast-high .ca-cover td.is-two .ca-cell {
    border-width: 2px;
}

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

html.tb1-contrast-high .ca-panel-head,
html.tb1-contrast-high .ca-sec-head,
html.tb1-contrast-high .ca-level-head,
html.tb1-contrast-high .ca-legend,
html.tb1-contrast-high .ca-room-links {
    border-color: #ffffff;
}

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

html.tb1-contrast-high .ca-staff .ca-room.is-gap::before,
html.tb1-contrast-high .ca-fig.is-warn::before {
    background: #facc15;
}

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

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

html.tb1-contrast-high .ca-mini,
html.tb1-contrast-high .ca-face {
    box-shadow: 0 0 0 2px #000000, 0 0 0 3px #ffffff;
}

html.tb1-contrast-high .ca-face-ini {
    background: #000000;
}

html.tb1-contrast-high .ca .ca-pill[aria-current="page"],
html.tb1-contrast-high .ca .ca-nav-a[aria-current="location"] {
    background: #facc15;
    border-color: #facc15;
}

html.tb1-contrast-high .ca .ca-pill[aria-current="page"],
html.tb1-contrast-high .ca .ca-nav-a[aria-current="location"],
html.tb1-contrast-high .ca .ca-nav-a[aria-current="location"] * {
    color: #000000 !important;
}

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

html.tb1-contrast-high .ca .ca-btn.is-primary {
    background: #000000;
    border: 2px solid #facc15;
}

html.tb1-contrast-high .ca-room:target,
html.tb1-contrast-high .ca-room.is-target {
    border-color: #facc15;
    box-shadow: 0 0 0 3px #facc15;
}

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

/* ═══════════════════════════════════════════════════════════════════════
   พิมพ์ลงกระดาษ / บันทึก PDF — รายชื่อครูที่ปรึกษาทุกห้อง (A4 แนวตั้ง)
   ═══════════════════════════════════════════════════════════════════════ */

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

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

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

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

    .ca-tools,
    .ca-audience,
    .ca-find,
    .ca-terms,
    .ca-fig-ic,
    .ca-panel-ic,
    .ca-lock,
    .ca-lockdot,
    .ca-hero::before,
    .ca-hero::after,
    .ca-hero-sub,
    .ca-panel-note,
    .ca-legend-end,
    .ca-room-links,
    .ca-gap .ca-btn,
    .ca-about,
    .ca-meta,
    body.ca-page .tb1-footer,
    body.ca-page footer {
        display: none !important;
    }

    main.ca {
        padding: 0;
    }

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

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

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

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

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

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

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

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

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

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

    .ca .ca-fig,
    .ca-panel,
    .ca-room,
    .ca-gap,
    .ca-callout {
        box-shadow: none !important;
        border-color: #999999;
    }

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

    .ca .ca-fig::before,
    .ca .ca-sec-title::before,
    .ca .ca-room::before,
    .ca .ca-cov-fill {
        transform: none !important;
    }

    .ca-fig::before,
    .ca-sec-title::before,
    .ca-room::before,
    .ca .ca-cell,
    .ca-key,
    .ca-cov,
    .ca-cov-fill,
    .ca-level-badge,
    .ca-face-ini,
    .ca-room-none,
    .ca-flag {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

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

    /* ★ วรรณยุกต์ไทยล้นขึ้นเหนือกล่องบรรทัด ถ้าไม่มีที่ว่างด้านบน ตัดหน้าแล้วจะเหลือเศษวรรณยุกต์ค้างท้ายหน้าก่อน */
    .ca-sec-head,
    .ca-level-head {
        padding-top: 8px;
        break-after: avoid;
    }

    .ca-panel,
    .ca .ca-fig,
    .ca-room,
    .ca-gap {
        break-inside: avoid;
    }

    .ca-cover-scroll {
        overflow: visible;
    }

    .ca-cover {
        min-width: 0;
        border-spacing: 3px;
    }

    .ca .ca-cell {
        min-height: 0;
        padding: 4px 2px;
    }

    .ca-cell-faces {
        display: none;
    }

    .ca-rooms {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .ca-room {
        padding: 8px 10px 8px 14px;
        gap: 6px;
    }

    .ca-room-t b {
        font-size: 1.1rem;
    }

    .ca-face {
        width: 32px;
        height: 32px;
    }

    .ca-adv {
        gap: 8px;
    }

    .ca-adv-name {
        font-size: .82rem;
    }

    .ca-level {
        margin-top: 12px;
    }
}

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

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

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

/* ครูที่ปรึกษา: ระยะกระชับและช่องค้นหาที่ใช้งานสะดวก */
@media screen {
    .ca .ca-hero,
    .ca .ca-hero.is-plain { padding: 24px var(--ca-gutter); }
    .ca .ca-hero-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 10px; }
    .ca .ca-figs { margin-top: 16px; gap: 10px; }
    .ca .ca-fig { padding: 12px; }
    .ca .ca-fig-ic { width: 30px; height: 30px; }
    .ca .ca-fig-v b { font-size: 1.7rem; }
    .ca .ca-sec { margin-top: 24px; }
    .ca .ca-panel-head { padding: 10px 14px; }
    .ca .ca-panel-body { padding: 14px; }
    .ca .ca-filter { gap: 10px; padding: 14px; }
    .ca .ca-rooms { gap: 14px; align-items: stretch; }
    .ca .ca-room { padding: 14px; }
    .ca .ca-room-links { margin-top: auto; padding-top: 10px; }
    .ca .ca-btn { min-height: 40px; }
    .ca .ca-clear-search { margin-top: 6px; }
    .ca .ca-clear-search[hidden] { display: none; }
    .ca #ca-search-help { display: block; margin-top: 4px; color: var(--ca-muted); }
    .ca .ca-retry { margin-top: 12px; }
}
@media screen and (max-width: 640px) {
    .ca .ca-hero,
    .ca .ca-hero.is-plain { padding: 18px var(--ca-gutter); }
    .ca .ca-filter input,
    .ca .ca-filter select { font-size: 16px; }
    .ca .ca-btn { min-height: 44px; }
}

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

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

    .ca-hero.is-split .ca-hero-main {
        align-items: flex-start;
    }

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

    /* ปีการศึกษาอยู่บน ภาคเรียนอยู่ล่าง ชิดขวาทั้งคู่ */
    .ca-hero.is-split .ca-terms {
        margin: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .ca-hero.is-split .ca-pick {
        justify-content: flex-end;
    }
}