/* ──────────────────────────────────────────────────────────────────────────
   curriculum_elective.php — ใบเลือกรายวิชาเลือกเสรี (หลักสูตรเพิ่มพูนศักยภาพ)
   โรงเรียนเทศบาล ๑ กิตติขจร

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

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

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

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

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

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

main.cel {
    display: block;
}

main.cel:focus {
    outline: none;
}

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



    color: var(--cel-ink-2);
    font-family: var(--cel-sans);
    font-size: 1rem;
    line-height: 1.6;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"],
    body.dark-mode, body[data-theme="dark"]) .cel {
    --cel-up: var(--tb1-text-success, #6ee7b7);
    --cel-down: var(--tb1-text-danger, #fda4af);
    --cel-up-soft: color-mix(in srgb, #34d399 12%, var(--tb1-surface, #111c31));
    --cel-down-soft: color-mix(in srgb, #f87171 12%, var(--tb1-surface, #111c31));
    --cel-down-ink: var(--tb1-text-danger, #fda4af);
    --cel-warn: var(--tb1-text-warning, #fcd34d);
    --cel-warn-soft: color-mix(in srgb, #f59e0b 13%, var(--tb1-surface, #111c31));
    --cel-warn-line: color-mix(in srgb, #f59e0b 42%, var(--tb1-border, #243049));
    --cel-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 16%, var(--tb1-surface, #111c31));
    --cel-shadow: 0 14px 32px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .055);
    --cel-shadow-float: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
    /* โหมดมืด: banner เป็นกรมท่าเข้ม เติมน้ำเงินสดที่ปลายไล่เฉดให้หัวหน้ามีมิติ แบบเดียวกับหน้าแรก */
    --cel-hero-a: #050d22;
    --cel-hero-c: color-mix(in srgb, #1d4ed8 42%, var(--tb1-banner-1, #0e1f45));
    --cel-primary: #2563eb;
    --cel-open: color-mix(in srgb, var(--tb1-brand, #60a5fa) 26%, var(--tb1-surface, #111c31));
    --cel-open-dim: color-mix(in srgb, var(--tb1-brand, #60a5fa) 10%, var(--tb1-surface, #111c31));
    color-scheme: dark;
}

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

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

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

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

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

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

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

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

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

/* จุดสีประจำวิชา */

/* ลูกศรสามเหลี่ยมทำจากกรอบ ไม่ใช่ตัวอักษร โปรแกรมอ่านหน้าจอจึงไม่อ่าน และรูปทรงยังอยู่เมื่อสีถูกถอด */

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


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

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

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

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

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

/* ★ พื้นขาว .12 บนน้ำเงิน ตัวขาวยังเกิน 4.5:1 ชี้แล้วพื้นเข้มขึ้น (ถ้าสว่างขึ้นจะต่ำกว่า 4.5:1) */
.cel .cel-btn-glass {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

.cel-glance {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    color: #ffffff;
    background: rgba(2, 6, 23, .3);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    box-shadow: 0 30px 60px -32px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

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

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

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

/* ตัวเลขที่ต้องจัดการ: ทองบนกระจกเข้ม (ตัวทองอยู่บนพื้นเข้มเท่านั้น) */

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

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

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

.cel-stats {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    overflow: hidden;
    background: rgba(2, 6, 23, .28);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    box-shadow: 0 30px 60px -34px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── ประกาศและธงเตือน ─────────────────────────────────────────────────── */

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

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

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

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

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

/* ═══════════════════════════════════════════════════════════════════════
   กล่องเลื่อนของตาราง
   ═══════════════════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════════════════════════════
   ส่วนประกอบของหน้าใบเลือกรายวิชาเลือกเสรี
   ═══════════════════════════════════════════════════════════════════════ */

.cel-notices {
    display: grid;
    gap: 10px;
}

.cel-notices .cel-flag {
    margin: 0;
    box-shadow: var(--cel-shadow);
}

.cel-sub-h {
    margin: 26px 0 8px;
    font-family: var(--cel-serif);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cel-ink);
}

.cel-k {
    margin: 14px 0 8px;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cel-ink);
}

.cel-k-s {
    display: block;
    font-weight: 400;
    color: var(--cel-muted);
}

.cel-empty {
    margin-top: 14px;
    padding: 16px 18px;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--cel-ink-2);
    background: var(--cel-paper-alt);
    border: 1px dashed var(--cel-line-bold);
    border-radius: 14px;
}

/* ── การ์ดกระจก: แต่ละชั้นเลือกได้กี่หลักสูตร ────────────────────────────── */

.cel-lvbars {
    display: grid;
    gap: 7px;
}

.cel-lvbars li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 1.8rem;
    align-items: center;
    gap: 10px;
}

.cel-lvbar-k {
    font-size: .86rem;
    color: var(--cel-on-hero-2);
}

.cel-lvbar-t {
    position: relative;
    display: block;
    height: .62rem;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
}

.cel-lvbar-f {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: linear-gradient(90deg, #93c5fd 0%, #ffffff 100%);
    border-radius: inherit;
    transform-origin: left center;
}

.cel-lvbars b {
    font-family: var(--cel-serif);
    font-size: 1.02rem;
    font-weight: 600;
    text-align: right;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.cel-lvbars li.is-current .cel-lvbar-k {
    font-weight: 700;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cel-reg-big {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.cel-reg-big b {
    font-family: var(--cel-serif);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.cel-reg-big span {
    font-size: .86rem;
    line-height: 1.5;
    color: var(--cel-on-hero-2);
}

.cel-meter {
    position: relative;
    display: block;
    height: .62rem;
    margin-top: 10px;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
}

.cel-meter-f {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: linear-gradient(90deg, #93c5fd 0%, #ffffff 100%);
    border-radius: inherit;
    transform-origin: left center;
}

.cel-glance-list {
    display: grid;
    gap: 4px;
}

.cel .cel-glance-list a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: .92rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── ตัวเลือกชั้นที่กำลังเรียน: ลิงก์ธรรมดาบนกระดาษ ─────────────────────── */

.cel-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--cel-paper-alt);
    border: 1px solid var(--cel-line);
    border-radius: 16px;
}

.cel-pick-k {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cel-ink);
}

.cel-pick-s {
    display: block;
    font-size: .76rem;
    font-weight: 400;
    color: var(--cel-muted);
}

.cel-lvs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cel .cel-lv {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.5rem;
    padding: 0 8px 0 14px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cel-ink);
    text-decoration: none;
    background: var(--cel-paper);
    border: 1px solid var(--cel-line-bold);
    border-radius: 999px;
    transition: border-color .16s var(--cel-ease), background-color .16s var(--cel-ease), color .16s var(--cel-ease);
}

.cel .cel-lv:hover {
    border-color: var(--cel-brand);
}

.cel .cel-lv:active {
    transform: translateY(1px);
}

.cel-lv-n {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 6px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--cel-ink-2);
    background: var(--cel-paper-alt);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* ชั้นที่เลือกอยู่: พื้นแบรนด์เข้มทั้งสองโหมด ตัวขาว (--cel-primary เข้มพอทั้งสองโหมด) */
.cel .cel-lv[aria-current="true"] {
    color: #ffffff;
    background: var(--cel-primary);
    border-color: var(--cel-primary);
}

.cel .cel-lv[aria-current="true"] .cel-lv-n {
    color: var(--cel-primary);
    background: #ffffff;
}

/* ── ตาราง ───────────────────────────────────────────────────────────────── */

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

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

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

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

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

/* ── ผังรายวิชาตามชั้นเรียน ─────────────────────────────────────────────── */

.cel-plan {
    min-width: 40rem;
}

.cel-plan th,
.cel-plan td {
    border-right: 1px solid var(--cel-line);
}

.cel-plan tr > :last-child {
    border-right: 0;
}

/* คอลัมน์ชื่อหลักสูตรตรึงไว้ทางซ้าย เลื่อนไปดู ม.4-6 แล้วยังรู้ว่าแถวไหน (พื้นทึบ) */
.cel-plan th[scope="row"],
.cel-plan thead th.cel-plan-name {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 15rem;
    background: var(--cel-paper);
}

.cel-plan thead th.cel-plan-name,
.cel-plan tfoot th[scope="row"] {
    z-index: 2;
    background: var(--cel-paper-alt);
}

.cel-plan .cel-plan-g {
    width: 5.2rem;
    text-align: center;
}

.cel-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

/* ช่องไอคอนกว้างคงที่ แถวที่ไม่มีไอคอนจึงยังเรียงตรงกับแถวอื่น */
.cel-row-emoji {
    flex: none;
    width: 1.3rem;
    font-size: 1.05rem;
    line-height: 1.5;
    text-align: center;
}

.cel-row-t {
    min-width: 0;
}

.cel .cel-row-link {
    display: inline-block;
    min-height: 24px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--cel-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .16s var(--cel-ease), color .16s var(--cel-ease);
}

.cel .cel-row-link:hover {
    color: var(--cel-brand);
    border-bottom-color: var(--cel-brand);
}

.cel-row-cat {
    display: block;
    font-size: .76rem;
    font-weight: 400;
    color: var(--cel-muted);
}

/* ช่องในผัง: ทึบพร้อมจุด = เปิดสอน · จาง = ไม่เปิด · สีเตือนพร้อม ? = ยังไม่ระบุ */
/* ★ ต้องชนะ .cel-table td (text-align: left) จุดและเครื่องหมายจึงอยู่กลางช่อง */
.cel-plan .cel-cell {
    position: relative;
    text-align: center;
}

.cel-cell.is-open {
    background: var(--cel-open);
}

.cel-cell.is-shut {
    background: var(--cel-paper-alt);
}

.cel-cell.is-unknown {
    background: var(--cel-down-soft);
}

.cel-mark {
    display: inline-block;
    width: .62rem;
    height: .62rem;
    vertical-align: middle;
    background: var(--cel-brand);
    border-radius: 50%;
}

.cel-cell.is-unknown .cel-mark {
    width: auto;
    height: auto;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cel-down-ink);
    background: none;
    border-radius: 0;
}

/* แถวที่ชั้นที่เลือกเรียนไม่ได้: หรี่ด้วยสีพื้น ไม่ใช้ opacity (ตัวอักษรต้องยังอ่านได้ 4.5:1) */
.cel-plan tbody tr.is-dim th[scope="row"] {
    background: var(--cel-paper-alt);
}

.cel-plan tbody tr.is-dim .cel-row-link {
    font-weight: 400;
    color: var(--cel-muted);
}

.cel-plan tbody tr.is-dim .cel-cell.is-open {
    background: var(--cel-open-dim);
}

.cel-plan tbody tr.is-dim .cel-cell.is-open .cel-mark {
    background: var(--cel-line-bold);
}

.cel-plan tbody tr.is-dim .cel-row-emoji {
    filter: grayscale(1);
}

/* คอลัมน์ชั้นที่เลือก: เส้นขอบแบรนด์สองข้าง */
.cel-plan .is-pick {
    box-shadow: inset 2px 0 0 var(--cel-brand), inset -2px 0 0 var(--cel-brand);
}

.cel-plan thead th.is-pick,
.cel-plan tfoot td.is-pick {
    color: var(--cel-brand);
}

.cel-plan tfoot th,
.cel-plan tfoot td {
    font-weight: 600;
    color: var(--cel-ink);
    background: var(--cel-paper-alt);
    border-top: 1px solid var(--cel-line-bold);
    border-bottom: 0;
}

.cel-plan tfoot td {
    text-align: center;
    font-family: var(--cel-serif);
    font-size: 1.02rem;
}

/* ── คำอธิบายสัญลักษณ์ ───────────────────────────────────────────────── */

.cel-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 12px;
    font-size: .84rem;
    color: var(--cel-ink-2);
}

.cel-keys li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cel-key {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    font-size: .74rem;
    font-weight: 700;
    border: 1px solid var(--cel-line-bold);
    border-radius: 4px;
}

.cel-key.is-open {
    background: var(--cel-open);
}

.cel-key.is-shut {
    background: var(--cel-paper-alt);
}

.cel-key.is-unknown {
    color: var(--cel-down);
    background: var(--cel-down-soft);
}

.cel-key.is-rc-ok {
    background: var(--cel-paper);
    border-color: var(--cel-brand-line);
}

.cel-key.is-rc-miss {
    background: var(--cel-paper);
    border: 2px dashed var(--cel-warn);
}

.cel-key.is-rc-extra {
    background: var(--cel-paper);
    border: 2px dotted var(--cel-brand);
}

/* ── จำนวนที่แสดงและลิงก์ล้างตัวกรอง ───────────────────────────────────── */

.cel-countbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.cel-count {
    font-size: .92rem;
    font-weight: 600;
    color: var(--cel-ink);
    font-variant-numeric: tabular-nums;
}

/* ── บัตรรายวิชา ─────────────────────────────────────────────────────────── */

.cel-cards,
.cel-progs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

@media (min-width: 1100px) {
    .cel-cards,
    .cel-progs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cel-card,
.cel-prog {
    min-width: 0;
    padding: 16px 18px 18px;
    background: var(--cel-paper);
    border: 1px solid var(--cel-line);
    border-radius: 18px;
    box-shadow: var(--cel-shadow);
    scroll-margin-top: 5.5rem;
    transition: border-color .2s var(--cel-ease), box-shadow .2s var(--cel-ease);
}

.cel-card:hover,
.cel-prog:hover {
    border-color: var(--cel-brand-line);
}

.cel-card:focus,
.cel-prog:focus {
    outline: none;
}

.cel-card:target,
.cel-prog:target,
.cel-card:focus-visible,
.cel-prog:focus-visible {
    border-color: var(--cel-brand);
    box-shadow: 0 0 0 3px var(--cel-brand-line), var(--cel-shadow);
}

/* หลักสูตรที่ยังไม่มีคำอธิบาย: สันซ้ายสีเตือน (รอยแดงชุดเดียวของบัตร) */
.cel-card.is-missing {
    border-left: 5px solid var(--cel-down);
}

.cel-card-h {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

.cel-emoji {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.55rem;
    line-height: 1;
    background: var(--cel-brand-soft);
    border: 1px solid var(--cel-brand-line);
    border-radius: 14px;
}

.cel-emoji.is-blank {
    color: var(--cel-muted);
    background: var(--cel-paper-alt);
    border-style: dashed;
    border-color: var(--cel-line-bold);
}

.cel-card-t {
    min-width: 0;
}

.cel-card-no {
    font-size: .76rem;
    color: var(--cel-muted);
}

.cel-card-t h3 {
    font-family: var(--cel-serif);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cel-ink);
}

.cel-card-cat {
    margin-top: 2px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--cel-muted);
}

.cel-lvl {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0 12px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--cel-brand);
    white-space: nowrap;
    background: var(--cel-paper);
    border: 1.5px solid var(--cel-brand-line);
    border-radius: 999px;
}

.cel-lvl.is-none {
    color: var(--cel-down);
    border-color: var(--cel-down);
    border-style: dashed;
}

/* บรรทัดตัวเลขของบัตร: grid ที่มีสันซ้ายรายช่อง (ไม่มีเส้นคั่นห้อยเมื่อตัดบรรทัด) */
.cel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin-top: 12px;
    font-size: .86rem;
    color: var(--cel-ink-2);
}

.cel-meta span {
    margin-right: 14px;
    padding-left: 10px;
    border-left: 2px solid var(--cel-brand-line);
}

.cel-meta b {
    font-family: var(--cel-serif);
    font-weight: 600;
    color: var(--cel-ink);
}

.cel-track + .cel-track {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--cel-line-bold);
}

.cel-track-k {
    display: inline-block;
    margin-top: 12px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cel-ink);
    background: var(--cel-paper-alt);
    border: 1px solid var(--cel-line-bold);
    border-radius: 8px;
}

.cel-desc {
    margin-top: 10px;
    font-size: .94rem;
    line-height: 1.75;
    color: var(--cel-ink-2);
}

/* เนื้อหาการเรียนรู้แสดงครบตั้งแต่โหลด ไม่พับไว้ (ค้นด้วย Ctrl+F และพิมพ์ได้) */
.cel-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
    gap: 6px;
}

.cel-topics li {
    position: relative;
    padding: 6px 10px 6px 24px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--cel-ink-2);
    background: var(--cel-paper-alt);
    border-radius: 10px;
}

.cel-topics li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: .95em;
    width: 6px;
    height: 6px;
    background: var(--cel-brand);
    border-radius: 2px;
}

.cel-jobtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cel-jobtags li {
    padding: 3px 11px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--cel-ink-2);
    background: var(--cel-paper);
    border: 1px solid var(--cel-line-bold);
    border-radius: 999px;
}

.cel-gap {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--cel-ink-2);
    background: var(--cel-paper-alt);
    border-left: 3px solid var(--cel-down);
    border-radius: 0 10px 10px 0;
}

.cel-alias {
    margin-top: 12px;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--cel-muted);
}

.cel-alias b {
    font-weight: 600;
    color: var(--cel-ink-2);
}

/* ── รหัสวิชาในทะเบียนของแต่ละบัตร ──────────────────────────────────────── */

.cel-codes {
    margin-top: 14px;
    padding-top: 2px;
    border-top: 1px solid var(--cel-line);
}

.cel-code-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.6rem), 1fr));
    gap: 6px;
}

.cel-code-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 2.5rem;
    padding: 5px 8px;
    border: 1px solid var(--cel-line);
    border-radius: 10px;
}

.cel-code-list li.is-miss {
    border: 1.5px dashed var(--cel-warn);
}

.cel-code-list li.is-extra {
    border: 1.5px dotted var(--cel-brand);
}

.cel-code-g {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cel-muted);
}

.cel .cel-code {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-height: 24px;
    min-width: 24px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cel-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cel .cel-code:hover {
    text-decoration-thickness: 2px;
}

.cel .cel-code small {
    font-size: .68rem;
    font-weight: 500;
    color: var(--cel-muted);
    text-decoration: none;
}

.cel-code-none {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cel-warn);
}

.cel-code-x {
    flex-basis: 100%;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--cel-muted);
}

/* ── โครงการพิเศษ ──────────────────────────────────────────────────────── */

.cel-prog-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.cel-prog-list li {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    background: var(--cel-paper-alt);
    border-left: 3px solid var(--cel-brand-line);
    border-radius: 0 10px 10px 0;
}

.cel-prog-list b {
    font-size: .92rem;
    color: var(--cel-ink);
}

.cel-prog-list span {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--cel-ink-2);
}

.cel-prog-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--cel-up);
}

/* ── เลือกจากอาชีพ ─────────────────────────────────────────────────────── */

.cel-find {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    max-width: 40rem;
    margin-bottom: 16px;
}

.cel-find-k {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--cel-ink);
}

.cel-find-k .cel-icon {
    color: var(--cel-brand);
}

.cel .cel-find-q {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--cel-ink);
    background: var(--cel-paper);
    border: 1.5px solid var(--cel-line-bold);
    border-radius: 12px;
}

.cel .cel-find-q::placeholder {
    color: var(--cel-muted);
    opacity: 1;
}

.cel .cel-find-q:focus-visible {
    border-color: var(--cel-brand);
}

.cel-find-n {
    grid-column: 1 / -1;
    min-height: 1.4em;
    font-size: .84rem;
    color: var(--cel-muted);
}

.cel-jobs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

/* จอกว้าง: สองคอลัมน์แบบหนังสือพิมพ์ กลุ่มไม่ถูกตัดกลาง (กลุ่มใหญ่ที่สุดมีเกือบครึ่งของอาชีพทั้งหมด) */
@media (min-width: 900px) {
    .cel-jobs {
        display: block;
        column-count: 2;
        column-gap: 36px;
    }

    .cel-job-g {
        break-inside: avoid;
        margin-bottom: 18px;
    }
}

.cel-job-g {
    min-width: 0;
}

.cel-job-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-family: var(--cel-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cel-ink);
    border-bottom: 2px solid var(--cel-brand-line);
}

.cel-job-h span {
    font-family: var(--cel-sans);
    font-size: .8rem;
    font-weight: 400;
    color: var(--cel-muted);
}

.cel-job-list {
    display: grid;
}

.cel-job {
    display: grid;
    grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cel-line);
}

.cel-job-n {
    font-size: .92rem;
    font-weight: 600;
    color: var(--cel-ink);
}

.cel-job-p {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.cel .cel-job-a {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 6px;
    min-height: 24px;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--cel-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cel .cel-job-a small {
    font-size: .74rem;
    color: var(--cel-muted);
    text-decoration: none;
}

/* ── ทะเบียนรายวิชา ────────────────────────────────────────────────────── */

.cel-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin-bottom: 14px;
    font-size: .9rem;
    color: var(--cel-ink-2);
}

.cel-facts span {
    margin-right: 18px;
    padding-left: 10px;
    border-left: 2px solid var(--cel-brand-line);
}

.cel-facts b {
    font-family: var(--cel-serif);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--cel-ink);
}

.cel-regt {
    min-width: 50rem;
}

.cel-regt th,
.cel-regt td {
    border-right: 1px solid var(--cel-line);
}

.cel-regt tr > :last-child {
    border-right: 0;
}

.cel-regt th[scope="row"],
.cel-regt thead th.cel-reg-name {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 14rem;
    background: var(--cel-paper);
}

.cel-regt thead th.cel-reg-name {
    z-index: 2;
    background: var(--cel-paper-alt);
}

/* แถวที่มีเรื่องต้องแก้: สันซ้ายสีเตือนที่ช่องแรก พื้นแถวคงเดิม */
.cel-regt tbody tr.has-issue th[scope="row"] {
    box-shadow: inset 3px 0 0 var(--cel-warn);
}

.cel-regt .cel-reg-g,
.cel-regt .cel-rc,
.cel-regt .cel-reg-sum {
    text-align: center;
}

.cel-rc {
    min-width: 5.6rem;
}

.cel-rc .cel-code {
    align-items: center;
}

.cel-rc .cel-code + .cel-code {
    margin-top: 4px;
}

.cel-rc.is-off {
    background: var(--cel-paper-alt);
}

.cel-rc.is-miss {
    box-shadow: inset 0 0 0 2px var(--cel-paper), inset 0 0 0 4px var(--cel-warn-line);
}

.cel-rc.is-extra {
    box-shadow: inset 0 0 0 2px var(--cel-paper), inset 0 0 0 3.5px var(--cel-brand-line);
}

.cel-rc-none {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cel-warn);
    white-space: nowrap;
}

.cel-rc-flag {
    display: block;
    margin-top: 2px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--cel-warn);
}

.cel-reg-sum {
    font-weight: 700;
    white-space: nowrap;
}

.cel-reg-sum.is-full {
    color: var(--cel-up);
}

.cel-reg-sum.is-part {
    color: var(--cel-warn);
}

/* กฎตรวจทะเบียน: รายการมีเส้นแบ่ง สันซ้ายสีเตือนเมื่อพบ (อ่านได้ทุกความกว้าง ไม่ต้องเลื่อนข้าง) */
.cel-rules {
    display: grid;
    border: 1px solid var(--cel-line);
    border-radius: 16px;
}

.cel-rule {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--cel-line);
}

.cel-rule:first-child {
    border-top: 0;
}

.cel-rule.has-issue {
    box-shadow: inset 3px 0 0 var(--cel-warn);
}

.cel-rule-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 16px;
}

.cel-rule-k {
    font-weight: 600;
    color: var(--cel-ink);
}

.cel-rule-n {
    font-size: .84rem;
    color: var(--cel-muted);
    white-space: nowrap;
}

.cel-rule-n b {
    font-family: var(--cel-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cel-ink);
}

.cel-rule-n.is-bad b {
    color: var(--cel-warn);
}

.cel-rule-s {
    margin-top: 2px;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--cel-muted);
}

.cel-rule-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--cel-up);
}

.cel-hits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 6px 24px;
    margin-top: 10px;
}

.cel-hits li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--cel-ink-2);
}

.cel-hits li > span {
    padding-left: 10px;
    border-left: 2px solid var(--cel-line);
}

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

@media (max-width: 1099.98px) {
    .cel-stats[data-n="6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

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

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

    .cel-glance-sec:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 759.98px) {
    .cel-hero {
        padding-bottom: 84px;
    }

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

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

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

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

    .cel-card,
    .cel-prog {
        padding: 14px 14px 16px;
    }

    .cel-card-h {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cel-card-h .cel-lvl {
        grid-column: 2;
        justify-self: start;
    }

    .cel-table th,
    .cel-table td {
        padding: 8px 10px;
    }

    /* ผังรายชั้นบนจอแคบ: ย่อคอลัมน์ชื่อและซ่อนบรรทัดกลุ่มสาระ ให้ครบหกชั้นในจอเดียวที่ 390px */
    .cel-plan {
        min-width: 19rem;
        font-size: .86rem;
    }

    .cel-plan th[scope="row"],
    .cel-plan thead th.cel-plan-name {
        min-width: 0;
        width: 44%;
        padding-left: 8px;
        padding-right: 6px;
    }

    .cel-plan .cel-plan-g,
    .cel-plan .cel-cell {
        width: auto;
        padding-left: 2px;
        padding-right: 2px;
    }

    .cel-plan .cel-row-cat {
        display: none;
    }

    .cel-row {
        gap: 6px;
    }

    .cel-row-emoji {
        width: 1.1rem;
        font-size: .92rem;
    }

    .cel-plan tfoot td {
        font-size: .92rem;
    }

    .cel-regt th[scope="row"],
    .cel-regt thead th.cel-reg-name {
        min-width: 11rem;
    }

    .cel-job {
        grid-template-columns: minmax(0, 1fr);
        padding: 5px 0;
    }
}

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

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

    .cel-pick-k {
        flex-basis: 100%;
    }

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

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

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

    .cel-lvs {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
        width: 100%;
    }

    .cel .cel-lv {
        justify-content: space-between;
    }
}

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

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

    to {
        transform: none;
    }
}

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

    to {
        transform: none;
    }
}

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

    to {
        transform: none;
    }
}

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

    to {
        transform: none;
    }
}

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

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

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

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

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

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

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

.cel-motion [data-cel-reveal] {
    transition: transform .75s var(--cel-spring), border-color .2s var(--cel-ease), box-shadow .2s var(--cel-ease);
}

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

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

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

/* แถบในการ์ดกระจก: ยืดออกจากซ้ายเมื่อเข้ามาในจอ */
.cel-motion [data-cel-reveal] :is(.cel-lvbar-f, .cel-meter-f) {
    transition: transform 1s var(--cel-spring) .25s;
}

.cel-motion [data-cel-reveal]:not(.is-in) :is(.cel-lvbar-f, .cel-meter-f) {
    transform: scaleX(0);
}

.cel-motion.cel-arming [data-cel-reveal],
.cel-motion.cel-arming [data-cel-reveal] * {
    transition: none !important;
}

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

    .cel [data-cel-reveal],
    .cel [data-cel-reveal] :is(.cel-stat, .cel-lvbar-f, .cel-meter-f) {
        transform: none !important;
    }
}

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

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

html.tb1-contrast-high .cel {
    --cel-paper: #000000;
    --cel-paper-alt: #000000;
    --cel-ink: #ffffff;
    --cel-ink-2: #ffffff;
    --cel-muted: #ffffff;
    --cel-line: #ffffff;
    --cel-line-bold: #ffffff;
    --cel-brand: #ffffff;
    --cel-brand-soft: #000000;
    --cel-brand-line: #ffffff;
    --cel-primary: #000000;
    --cel-shadow: none;
    --cel-shadow-float: none;
    --cel-on-hero-2: #ffffff;
    --cel-gold-text: #facc15;
    --cel-up: #ffffff;
    --cel-down: #facc15;
    --cel-down-ink: #facc15;
    --cel-down-soft: #000000;
    --cel-warn: #facc15;
    --cel-warn-line: #facc15;
    --cel-open: #facc15;
    --cel-open-dim: #000000;
}

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

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

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

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

html.tb1-contrast-high .cel :where(.cel-tag, .cel-glance, .cel-stats, .cel-stat-ic, .cel-panel, .cel-panel-head,
    .cel-panel-ic, .cel-scroll, .cel-table th, .cel-flag, .cel-card, .cel-prog, .cel-foot, .cel-pick, .cel-emoji,
    .cel-topics li, .cel-jobtags li, .cel-prog-list li, .cel-gap, .cel-empty, .cel-code-list li, .cel-lv-n,
    .cel-track-k, .cel-lvl, .cel-find-q, .cel-rules) {
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html.tb1-contrast-high .cel :where(.cel-glance, .cel-panel, .cel-flag, .cel-foot, .cel-scroll, .cel-card, .cel-prog,
    .cel-stat-ic, .cel-panel-ic, .cel-pick, .cel-emoji) {
    border: 1px solid #ffffff !important;
}

/* สิ่งที่ต้องจัดการ: กรอบเหลือง */
html.tb1-contrast-high .cel .cel-flag:not(.is-info),
html.tb1-contrast-high .cel .cel-card.is-missing {
    border: 3px solid #facc15 !important;
}

html.tb1-contrast-high .cel .cel-code-list li.is-miss,
html.tb1-contrast-high .cel .cel-lvl.is-none {
    border: 2px dashed #facc15 !important;
}

html.tb1-contrast-high .cel .cel-code-list li.is-extra {
    border: 2px dotted #ffffff !important;
}

html.tb1-contrast-high .cel .cel-tag.is-warn,
html.tb1-contrast-high .cel .cel-tag.is-warn *,
html.tb1-contrast-high .cel .cel-stat.is-warn .cel-stat-v b,
html.tb1-contrast-high .cel .cel-lvl.is-none,
html.tb1-contrast-high .cel .cel-code-none,
html.tb1-contrast-high .cel .cel-rc-none,
html.tb1-contrast-high .cel .cel-rc-flag,
html.tb1-contrast-high .cel .cel-rule-n.is-bad b,
html.tb1-contrast-high .cel .cel-reg-sum.is-part,
html.tb1-contrast-high .cel .cel-cell.is-unknown .cel-mark {
    color: #facc15 !important;
    border-color: #facc15 !important;
}

/* ช่องผัง: เปิดสอน = พื้นเหลืองจุดดำ · แถวที่หรี่ = พื้นดำจุดเหลือง */
html.tb1-contrast-high .cel .cel-cell.is-open {
    background: #facc15 !important;
}

html.tb1-contrast-high .cel .cel-cell.is-open .cel-mark {
    background: #000000 !important;
}

html.tb1-contrast-high .cel .cel-plan tbody tr.is-dim .cel-cell.is-open {
    background: #000000 !important;
    box-shadow: inset 0 0 0 2px #facc15;
}

html.tb1-contrast-high .cel .cel-plan tbody tr.is-dim .cel-cell.is-open .cel-mark {
    background: #facc15 !important;
}

html.tb1-contrast-high .cel .cel-cell.is-unknown {
    box-shadow: inset 0 0 0 2px #facc15;
}

html.tb1-contrast-high .cel .cel-rc.is-miss {
    box-shadow: inset 0 0 0 3px #facc15 !important;
}

html.tb1-contrast-high .cel .cel-rc.is-extra {
    box-shadow: inset 0 0 0 2px #ffffff !important;
}

html.tb1-contrast-high .cel .cel-key.is-open {
    background: #facc15 !important;
}

html.tb1-contrast-high .cel .cel-key.is-rc-miss {
    border: 2px dashed #facc15 !important;
}

html.tb1-contrast-high .cel .cel-key.is-rc-extra {
    border: 2px dotted #ffffff !important;
}

html.tb1-contrast-high .cel .cel-lvbar-t,
html.tb1-contrast-high .cel .cel-meter {
    background: #000000 !important;
    outline: 1px solid #ffffff;
}

html.tb1-contrast-high .cel .cel-lvbar-f,
html.tb1-contrast-high .cel .cel-meter-f {
    background: #ffffff !important;
}

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

html.tb1-contrast-high .cel :where(a.cel-btn, button.cel-btn, a.cel-lv) * {
    color: #facc15 !important;
}

html.tb1-contrast-high .cel a.cel-lv .cel-lv-n {
    border: 1px solid #facc15 !important;
}

/* ชั้นที่เลือกอยู่: กรอบหนากว่าและขีดเส้นใต้ (ไฟล์กลางทำทุกปุ่มเหมือนกันหมด) */
html.tb1-contrast-high .cel a.cel-lv[aria-current="true"] {
    border-width: 4px !important;
    text-decoration: underline;
}

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

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

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

html.tb1-contrast-high .cel .cel-plan tbody tr.is-dim .cel-row-emoji {
    filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ฉบับพิมพ์: หัวใบ ผังรายวิชาตามชั้นเรียน บัตรรายวิชา โครงการพิเศษ ผังทะเบียนและกฎ
   ★ ตัวกรองชั้นยังมีผลตอนพิมพ์: เลือก ม.4 แล้วพิมพ์ ได้ใบเลือกของ ม.4
   ★ ดัชนีอาชีพไม่พิมพ์ เพราะอาชีพทุกตัวอยู่ในบัตรรายวิชาแล้ว
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

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

    /* เลือกชั้นแล้วพิมพ์ = ใบเลือกของนักเรียนชั้นนั้น ผังทะเบียนสำหรับฝ่ายวิชาการจึงไม่พิมพ์ */
    .cel-shell:not([data-lv="0"]) .cel-reg-panel {
        display: none !important;
    }

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

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

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

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

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

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

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

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

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

    .cel-lead {
        margin-top: 4px;
        font-size: .84rem;
    }

    .cel-glance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 10px;
        padding: 10px 12px;
        color: #000000;
        background: none;
        border: 1px solid #6b7280;
        border-radius: 10px;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        break-inside: avoid;
    }

    .cel-glance-sec:nth-child(n) {
        grid-column: auto;
        padding: 0;
        border: 0;
    }

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

    .cel-glance-k,
    .cel-lvbars b,
    .cel-lvbar-k,
    .cel-lvbars li.is-current .cel-lvbar-k,
    .cel-reg-big b,
    .cel-reg-big span,
    .cel .cel-glance-list a {
        color: #000000;
    }

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

    .cel-lvbar-t,
    .cel-meter {
        background: #e5e7eb;
    }

    .cel-lvbar-f,
    .cel-meter-f {
        background: #1f2937;
    }

    .cel-reg-big b {
        font-size: 1.5rem;
    }

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

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

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

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

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

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

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

    .cel-body > * + * {
        margin-top: 12px;
    }

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

    .cel-panel-head {
        padding: 4px 0;
        background: none;
        border: 0;
        border-bottom: 1.5px solid #000000;
        border-radius: 0;
        /* หัวข้อไม่ค้างท้ายหน้าโดยไม่มีเนื้อหาตาม */
        break-after: avoid;
        page-break-after: avoid;
    }

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

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

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

    .cel-pick {
        padding: 0;
        background: none;
        border: 0;
    }

    .cel-lvs li:not(:has([aria-current="true"])) {
        display: none;
    }

    .cel .cel-lv[aria-current="true"] {
        color: #000000;
        background: none;
        border: 1.5px solid #000000;
    }

    .cel .cel-lv[aria-current="true"] .cel-lv-n {
        color: #000000;
        background: #e5e7eb;
    }

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

    .cel-table {
        font-size: .72rem;
    }

    .cel-plan,
    .cel-regt {
        min-width: 0;
    }

    .cel-rule {
        padding: 6px 8px;
        break-inside: avoid;
    }

    .cel-hits li,
    .cel-rule-s {
        font-size: .68rem;
    }

    .cel-table th,
    .cel-table td {
        padding: 3px 6px;
    }

    .cel-plan th[scope="row"],
    .cel-plan thead th.cel-plan-name,
    .cel-regt th[scope="row"],
    .cel-regt thead th.cel-reg-name {
        position: static;
        min-width: 0;
    }

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

    /* ★ หน้า A4 กว้างไม่ถึง 1100px กฎจอกว้างไม่ทำงานตอนพิมพ์ ต้องยืนยันบัตรสองคอลัมน์เอง */
    .cel-cards,
    .cel-progs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cel-card,
    .cel-prog {
        padding: 8px 10px;
        border-color: #9ca3af;
        break-inside: avoid;
    }

    .cel-card-h {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }

    .cel-card-h .cel-lvl {
        grid-column: auto;
    }

    .cel-emoji {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.1rem;
        border-radius: 8px;
    }

    .cel-card-t h3 {
        font-size: .95rem;
    }

    .cel-desc,
    .cel-meta,
    .cel-topics li,
    .cel-jobtags li,
    .cel-prog-list span,
    .cel-gap,
    .cel-alias {
        font-size: .68rem;
    }

    .cel-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
    }

    .cel-topics li {
        padding: 2px 6px 2px 16px;
    }

    .cel-topics li::before {
        left: 6px;
    }

    .cel-k {
        margin: 6px 0 4px;
        font-size: .7rem;
    }

    .cel-code-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
    }

    .cel-code-list li {
        min-height: 0;
        padding: 2px 5px;
    }

    .cel .cel-code {
        font-size: .72rem;
    }

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

    .cel-foot li {
        font-size: .72rem;
    }

    /* สีที่เป็นข้อมูลต้องติดกระดาษ */
    .cel-cell,
    .cel-mark,
    .cel-key,
    .cel-lvbar-t,
    .cel-lvbar-f,
    .cel-meter,
    .cel-meter-f,
    .cel-rc,
    .cel-card.is-missing,
    .cel-topics li::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

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

/* ═══════════════════════════════════════════════════════════════════════
   ลดที่ว่าง (8 ต.ค. 2569)
   ═══════════════════════════════════════════════════════════════════════ */

/* ★ บัตรรายวิชาจอกว้าง: เดิมแถวสูงเท่าบัตรที่ยาวกว่า เหลือช่องโล่งใต้บัตรที่สั้นรวมราว 780px
   - บัตรคู่กันสูงเท่ากัน รหัสวิชาในทะเบียนชิดล่างของบัตร แถวรหัสของบัตรคู่กันจึงตรงแนวกัน
   - บัตรที่มีสองสาย (เช่น เตรียมนักกีฬา) กินเต็มแถว แล้ววางสองสายข้างกัน แทนบัตรยาวเกือบสองเท่าที่ดันคู่ของมันให้มีช่องโล่ง
   ลำดับบัตรในหน้าเหมือนเดิม (อ่านซ้ายไปขวา) ตัวกรองชั้นยังซ่อนบัตรได้ตามเดิม */
@media screen and (min-width: 1100px) {
    .cel-cards {
        align-items: stretch;
    }

    .cel-cards > .cel-card {
        display: flex;
        flex-direction: column;
    }

    /* ระยะเหนือเส้นแบ่งรหัสวิชาย้ายจาก margin ของรหัสมาไว้ใต้เนื้อหา เพราะรหัสใช้ margin-top:auto ชิดล่าง */
    .cel-cards > .cel-card > .cel-tracks,
    .cel-cards > .cel-card > .cel-gap {
        margin-bottom: 14px;
    }

    .cel-cards > .cel-card > .cel-codes {
        margin-top: auto;
    }

    .cel-cards > .cel-card.is-multi {
        grid-column: 1 / -1;
    }

    .cel-card.is-multi .cel-tracks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
    }

    .cel-card.is-multi .cel-track + .cel-track {
        margin-top: 0;
        padding-top: 0;
        padding-left: 28px;
        margin-left: -14px;
        border-top: 0;
        border-left: 1px dashed var(--cel-line-bold);
    }
}

/* ★ ผังรายวิชาตามชั้นเรียน: กลุ่มสาระอยู่บรรทัดเดียวกับชื่อหลักสูตร แถวเตี้ยลง
   (จอแคบซ่อนบรรทัดกลุ่มสาระอยู่แล้วตามกฎเดิม) */
@media (min-width: 760px) {
    .cel-plan .cel-row-cat {
        display: inline;
        margin-left: 10px;
    }

    .cel-plan th,
    .cel-plan td {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (max-width: 759.98px) {
    /* ป้ายชั้นที่เปิดซ้ำกับบรรทัด "ชั้น ม.1-6" ใต้หัวบัตร และกินแถวของตัวเองบนจอแคบ
       ซ่อนเฉพาะบัตรที่มีบรรทัดนั้น (บัตรที่ยังไม่มีคำอธิบายยังมีป้าย) */
    .cel-card:not(.is-missing) .cel-card-h .cel-lvl {
        display: none;
    }

    /* รหัสวิชาในทะเบียน: สามช่องต่อแถวบนมือถือ (เดิมสอง) จอแคบมากกลับเป็นสองช่องเอง */
    .cel-code-list {
        grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
    }

    /* เลือกจากอาชีพ: ชื่ออาชีพกับหลักสูตรอยู่บรรทัดเดียวกัน (เดิมชื่ออาชีพอยู่บรรทัดหนึ่ง หลักสูตรอีกบรรทัด) */
    .cel-job {
        display: block;
        padding: 6px 0;
    }

    .cel-job-n {
        margin-right: 8px;
    }

    .cel-job-p {
        display: inline;
    }

    .cel .cel-job-a {
        margin-right: 10px;
    }
}

@media (max-width: 639.98px) {
    /* ตัวเลขหกช่อง: ไอคอนอยู่ข้างป้าย ไม่ซ้อนบนป้าย การ์ดเตี้ยลง */
    .cel-stat {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 4px 8px;
    }

    .cel-stat-ic {
        width: 2rem;
        height: 2rem;
        margin-bottom: 0;
        border-radius: 10px;
    }

    .cel-stat-v,
    .cel-stat-s {
        grid-column: 1 / -1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   เนื้อหาตามหลักสูตรสถานศึกษา 2569 (8 ต.ค. 2569)
   ═══════════════════════════════════════════════════════════════════════ */

/* ชื่อรายวิชาของสายที่ใช้ชื่อต่างจากชื่อหลัก (เตรียมทัศนศิลป์นักแสดงและนักดนตรี ม.4-6) */
.cel-track-name {
    margin-top: 8px;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--cel-ink-2);
}

.cel-track-name b {
    font-weight: 700;
    color: var(--cel-ink);
}

/* บรรทัดชื่อในรายชื่อโรงเรียนย้ายมาอยู่ก่อนรหัสวิชา (รหัสวิชาอยู่ล่างสุดของบัตรทุกใบ)
   จอกว้างรหัสวิชาใช้ margin-top:auto จึงเว้นระยะใต้บรรทัดนี้แทน */
@media screen and (min-width: 1100px) {
    .cel-cards > .cel-card > .cel-alias {
        margin-bottom: 14px;
    }
}