/* ═══════════════════════════════════════════════════════════════════════
   หลักสูตรสถานศึกษา พ.ศ. 2569 — school_curriculum.php · 15 ต.ค. 2569
   โรงเรียนเทศบาล ๑ กิตติขจร

   ★ ภาษาภาพเดียวกับหน้ารายงานของโรงเรียน (หัวไล่สีน้ำเงิน แผง การ์ด ปุ่มแคปซูล) แต่จัดหน้าแบบ "หนังสือ"
     สารบัญมีเส้นจุดนำสายตาและเลขหน้า · อ่านทีละส่วนมีแถบสารบัญข้าง · การ์ดรายวิชาแบบใบคำอธิบายรายวิชา
   ★ โทเคนทุกตัวชี้ไป --tb1-* โหมดมืดพลิกเอง · โหมดคมชัดสูง (html.tb1-contrast-high) ดำ/ขาว/เหลือง
   ★ ไม่ใช้สีแยกกลุ่มสาระ (ไอคอนต่างกันแทน) จึงไม่มีปัญหาตาบอดสี
   ★ ทุก selector ขึ้นต้นด้วย cb- ไม่ชนกับหน้าอื่นหรือไฟล์กลาง
   ═══════════════════════════════════════════════════════════════════════ */

.cb {
    --cb-ink: var(--tb1-ink-1, #0f172a);
    --cb-ink-2: var(--tb1-ink-2, #334155);
    --cb-muted: var(--tb1-ink-3, #5a697f);
    --cb-page: var(--tb1-page, #f8fafc);
    --cb-paper: var(--tb1-surface, #ffffff);
    --cb-paper-alt: var(--tb1-surface-alt, #f1f5f9);
    --cb-line: var(--tb1-border, #e2e8f0);
    --cb-line-bold: var(--tb1-border-bold, #cbd5e1);
    --cb-brand: var(--tb1-brand, #1d4ed8);
    --cb-brand-ink: var(--tb1-brand, #1d4ed8);
    --cb-brand-soft: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 9%, var(--tb1-surface, #ffffff));
    --cb-brand-line: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 32%, var(--tb1-border, #e2e8f0));
    --cb-accent: var(--tb1-accent, #0ea5e9);
    /* พื้นสีทึบที่วางตัวอักษรขาว: ใช้สีแถบหัวหน้า (โหมดมืดไม่สว่างขึ้นเหมือน --tb1-brand จึงยังอ่านตัวขาวได้) */
    --cb-solid: var(--tb1-banner-1, #1d4ed8);
    --cb-ok: var(--tb1-text-success, #047857);
    --cb-ok-bg: color-mix(in srgb, var(--tb1-success, #10b981) 12%, var(--tb1-surface, #ffffff));
    --cb-warn: var(--tb1-text-warning, #b45309);
    --cb-warn-bg: color-mix(in srgb, var(--tb1-warning, #f59e0b) 14%, var(--tb1-surface, #ffffff));
    --cb-crit: #b91c1c;
    --cb-page-max: var(--tb1-page-max-width, 1440px);
    --cb-gutter: var(--tb1-shell-gutter, 20px);
    --cb-ease: cubic-bezier(.4, 0, .2, 1);
    --cb-r: 16px;
    --cb-rs: 12px;
    --cb-serif: var(--tb1-font-display, 'Noto Sans Thai Looped', sans-serif);
    --cb-sans: var(--tb1-font-body, 'Sarabun', sans-serif);
    --cb-shadow: 0 14px 32px -24px rgba(15, 23, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
    --cb-shadow-float: 0 22px 44px -26px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
    --cb-hero-a: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 60%, var(--tb1-ink-surface, #0f172a));
    --cb-hero-b: var(--tb1-banner-1, #1d4ed8);
    --cb-hero-c: color-mix(in srgb, var(--tb1-banner-1, #1d4ed8) 78%, var(--tb1-accent-strong, #0284c7));
    --cb-stick: 72px;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .cb {
    --cb-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 15%, var(--tb1-surface, #111c31));
    --cb-shadow: 0 14px 32px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .055);
    --cb-shadow-float: 0 22px 44px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .055);
    --cb-crit: var(--tb1-text-danger, #fda4af);
    color-scheme: dark;
}

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

html:has(body.cb-page) {
    scroll-padding-top: 96px;
}

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

main.cb:focus {
    outline: none;
}

.cb-wrap {
    max-width: calc(var(--cb-page-max) - 2 * var(--cb-gutter));
    margin-inline: auto;
}

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

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

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

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

.cb-icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.cb-icon.is-sm {
    width: 16px;
    height: 16px;
}

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

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

.cb-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.cb-page a.cb-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;
}

.cb a {
    color: var(--cb-brand-ink);
}

.cb-link {
    color: var(--cb-brand-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cb-link:hover {
    text-decoration-thickness: 2px;
}

/* ── หัวหน้า ─────────────────────────────────────────────────────────── */
.cb-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-inline: calc(-1 * var(--cb-gutter));
    padding: clamp(36px, 5.5vw, 70px) var(--cb-gutter) clamp(84px, 9vw, 116px);
    color: #ffffff;
    text-align: center;
    background-color: var(--cb-hero-b);
    background-image: linear-gradient(135deg, var(--cb-hero-a) 0%, var(--cb-hero-b) 52%, var(--cb-hero-c) 100%);
}

.cb-hero.is-section {
    padding: clamp(22px, 3.4vw, 40px) var(--cb-gutter) clamp(30px, 4vw, 46px);
    text-align: left;
}

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

.cb-hero::before {
    background-image:
        radial-gradient(circle at 16% 38%, rgba(255, 255, 255, .1) 0%, transparent 46%),
        radial-gradient(circle at 86% 16%, rgba(255, 255, 255, .07) 0%, transparent 40%);
}

/* เส้นบรรทัดสมุดจาง ๆ — สื่อว่าเป็นเอกสารหลักสูตร */
.cb-hero::after {
    background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 255, 255, .05) 31px 32px);
    -webkit-mask-image: linear-gradient(180deg, #000000 30%, transparent);
    mask-image: linear-gradient(180deg, #000000 30%, transparent);
}

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

.cb-hero.is-section .cb-hero-in {
    max-width: calc(var(--cb-page-max) - 2 * var(--cb-gutter));
    align-items: flex-start;
}

.cb-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, .22);
    border-radius: 999px;
}

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

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

.cb-hero-title > span:not(.cb-hero-ic) {
    display: block;
    margin-top: 4px;
    font-size: .58em;
    font-weight: 500;
    color: #e0e7ff;
}

.cb-hero.is-section .cb-hero-title {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
}

.cb-hero-ic {
    width: 52px;
    height: 52px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
}

.cb-hero-ic .cb-icon {
    width: 28px;
    height: 28px;
}

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

.cb-hero.is-section .cb-hero-sub {
    margin-top: 6px;
}

.cb-hero-agency {
    margin-top: 2px;
    font-size: .94rem;
    color: #c7d2fe;
}

.cb-hero-act {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.cb-hero.is-section .cb-hero-act {
    margin-top: 16px;
    justify-content: flex-start;
}

.cb-crumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: .88rem;
    color: #c7d2fe;
}

.cb-crumb li + li::before {
    content: "›";
    margin-right: 8px;
    color: #a5b4fc;
}

.cb-crumb a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-underline-offset: 3px;
}

.cb-crumb [aria-current] {
    color: #e0e7ff;
}

/* ── ปุ่ม ─────────────────────────────────────────────────────────────── */
.cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 7px 18px;
    font: inherit;
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cb-ink-2);
    text-decoration: none;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line-bold);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s var(--cb-ease), color .2s var(--cb-ease), background-color .2s var(--cb-ease), transform .2s var(--cb-ease);
}

.cb .cb-btn {
    color: var(--cb-ink-2);
}

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

.cb-btn > span {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.cb-btn small {
    font-size: .78rem;
    font-weight: 500;
    opacity: .85;
}

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

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

.cb .cb-btn.is-light {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
}

.cb .cb-btn.is-light:hover {
    background: rgba(255, 255, 255, .22);
    border-color: #ffffff;
}

.cb .cb-btn.is-solid {
    color: #102a6b;
    background: #ffffff;
    border-color: #ffffff;
}

.cb .cb-btn.is-solid:hover {
    background: #e0e7ff;
}

.cb-hero .cb-btn.is-primary {
    color: #102a6b;
    background: #ffffff;
    border-color: #ffffff;
}

.cb-hero .cb-btn.is-primary:hover {
    background: #e0e7ff;
}

.cb-btn.is-small {
    min-height: 34px;
    padding: 4px 12px;
    font-size: .86rem;
}

.cb-btn.is-small .cb-icon {
    width: 16px;
    height: 16px;
}

/* ── ตัวเลขสรุป ─────────────────────────────────────────────────────── */
.cb-stats {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(56px, 6.6vw, 80px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

.cb-stat {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic v" "ic k" "n n";
    align-items: center;
    gap: 0 12px;
    padding: 16px 18px;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow-float);
}

.cb-stat-ic {
    grid-area: ic;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
    border-radius: 12px;
}

.cb-stat-v {
    grid-area: v;
    font-family: var(--cb-serif);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--cb-ink);
    font-variant-numeric: tabular-nums;
}

.cb-stat-k {
    grid-area: k;
    font-size: .92rem;
    font-weight: 600;
    color: var(--cb-ink-2);
}

.cb-stat-n {
    grid-area: n;
    margin-top: 10px;
    padding-top: 10px;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--cb-muted);
    border-top: 1px dashed var(--cb-line);
}

/* ── ค้นหา ───────────────────────────────────────────────────────────── */
.cb-search {
    margin-top: clamp(22px, 3vw, 32px);
    padding: clamp(16px, 2vw, 22px);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-search-l {
    display: block;
    font-family: var(--cb-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-search-row {
    position: relative;
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.cb-search-ic {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cb-muted);
    pointer-events: none;
}

.cb-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    padding: 8px 14px 8px 44px;
    font: inherit;
    font-size: 1rem;
    color: var(--cb-ink);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line-bold);
    border-radius: 999px;
}

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

.cb-search input:focus-visible {
    outline: 2px solid var(--cb-brand);
    outline-offset: 1px;
    border-color: var(--cb-brand);
}

.cb-search .cb-btn {
    min-height: 46px;
    padding-inline: 22px;
}

.cb-search-hint {
    margin-top: 8px;
    font-size: .84rem;
    color: var(--cb-muted);
}

.cb-search.is-compact {
    margin-top: 16px;
    padding: 12px;
    box-shadow: none;
}

.cb-search.is-compact .cb-search-l {
    font-size: .9rem;
}

.cb-search.is-compact .cb-search-row {
    flex-direction: column;
}

.cb-search.is-compact input {
    min-height: 40px;
    font-size: .92rem;
}

.cb-search.is-compact .cb-btn {
    min-height: 38px;
}

.cb-search.is-compact .cb-search-ic {
    top: 20px;
}

.cb-search.is-compact .cb-search-hint {
    display: none;
}

.cb-hits {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 8px;
}

.cb .cb-hit {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 12px 14px;
    color: var(--cb-ink-2);
    text-decoration: none;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-rs);
    transition: border-color .2s, box-shadow .2s;
}

.cb .cb-hit:hover {
    border-color: var(--cb-brand);
    box-shadow: var(--cb-shadow);
}

.cb-hit .cb-code {
    grid-row: span 2;
    align-self: start;
}

.cb-hit-n {
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-hit-m {
    font-size: .84rem;
    color: var(--cb-muted);
}

.cb-empty {
    margin-top: 14px;
    padding: 18px;
    color: var(--cb-muted);
    text-align: center;
    background: var(--cb-paper-alt);
    border: 1px dashed var(--cb-line-bold);
    border-radius: var(--cb-rs);
}

.cb-foot {
    margin-top: 12px;
    font-size: .92rem;
}

.cb-results:focus {
    outline: none;
}

/* ── รหัสวิชา ────────────────────────────────────────────────────────── */
.cb-code {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cb-brand-ink);
    white-space: nowrap;
    background: var(--cb-brand-soft);
    border: 1px solid var(--cb-brand-line);
    border-radius: 7px;
    font-variant-numeric: tabular-nums;
}

.cb a.cb-code.is-link {
    text-decoration: none;
}

.cb a.cb-code.is-link:hover {
    color: #ffffff;
    background: var(--cb-solid);
    border-color: var(--cb-solid);
}

/* ── ประกาศ ──────────────────────────────────────────────────────────── */
.cb .cb-announce {
    margin-top: clamp(16px, 2vw, 22px);
    display: flex;
    align-items: center;
    gap: 14px 18px;
    padding: 16px 20px;
    color: var(--cb-ink-2);
    text-decoration: none;
    background: linear-gradient(90deg, var(--cb-brand-soft), var(--cb-paper) 60%);
    border: 1px solid var(--cb-brand-line);
    border-radius: var(--cb-r);
    transition: box-shadow .2s, border-color .2s;
}

.cb .cb-announce:hover {
    border-color: var(--cb-brand);
    box-shadow: var(--cb-shadow);
}

.cb-announce-ic {
    width: 46px;
    height: 46px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--cb-solid);
    border-radius: 12px;
}

.cb-announce-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.5;
}

.cb-announce-txt b {
    font-family: var(--cb-serif);
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-announce-txt small {
    font-size: .84rem;
    color: var(--cb-muted);
}

.cb-announce-go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font-size: .9rem;
    font-weight: 600;
    color: var(--cb-brand-ink);
}

/* ── หัวหมวด ─────────────────────────────────────────────────────────── */
.cb-sec {
    margin-top: clamp(30px, 4vw, 50px);
}

.cb-part {
    margin-top: clamp(26px, 3.4vw, 40px);
}

.cb-part:first-child {
    margin-top: 0;
}

.cb-part:focus {
    outline: none;
}

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

.cb-sec-title {
    position: relative;
    padding-left: 16px;
    font-family: var(--cb-serif);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--cb-ink);
    text-wrap: balance;
}

.cb-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(--cb-accent));
}

.cb-sec-count,
.cb-page-tag {
    padding: 3px 12px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--cb-brand-ink);
    white-space: nowrap;
    background: var(--cb-brand-soft);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.cb-sec-note {
    flex-basis: 100%;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--cb-muted);
}

/* ★ 15 ต.ค. 2569: เนื้อความเต็มความกว้างของคอลัมน์ (ขอบขวาตรงกับแถบเมนูด้านบน) ตามที่ ผอ. ขอ — ไม่จำกัดความยาวบรรทัด */
.cb-lead {
    margin-bottom: 18px;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--cb-ink-2);
}

.cb-lead.is-sm {
    font-size: .96rem;
    margin-bottom: 14px;
}

.cb-note {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--cb-muted);
}

.cb-h3 {
    margin: 28px 0 10px;
    font-family: var(--cb-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cb-ink);
}

/* ── สารบัญแบบหนังสือ ─────────────────────────────────────────────── */
.cb-toc-book {
    padding: clamp(16px, 2.6vw, 30px) clamp(16px, 3vw, 40px);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-toc-headrow {
    display: flex;
    justify-content: space-between;
    padding: 0 48px 8px 0;
    font-weight: 700;
    color: var(--cb-ink);
    border-bottom: 2px solid var(--cb-ink);
}

.cb-toc-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    border-bottom: 1px solid var(--cb-line);
}

.cb .cb-toc-a {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 46px;
    padding: 11px 6px;
    color: var(--cb-ink);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .15s, color .15s;
}

.cb .cb-toc-a:hover {
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
}

.cb-toc-row.is-sub .cb-toc-a {
    padding-left: 34px;
    color: var(--cb-ink-2);
    font-size: .96rem;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.cb-toc-t {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    line-height: 1.5;
}

.cb-toc-dots {
    flex: 1 1 24px;
    min-width: 24px;
    border-bottom: 2px dotted var(--cb-line-bold);
    transform: translateY(-4px);
}

.cb-toc-p {
    min-width: 2.6em;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cb-toc-x {
    display: flex;
    align-items: center;
    width: 42px;
    flex: none;
}

.cb .cb-toc-pdf {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cb-muted);
    border-radius: 10px;
    transition: color .15s, background-color .15s;
}

.cb .cb-toc-pdf:hover {
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
}

.cb-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--cb-warn);
    white-space: nowrap;
    background: var(--cb-warn-bg);
    border-radius: 999px;
}

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

/* ── การ์ดกลุ่มสาระ ─────────────────────────────────────────────────── */
.cb-areas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

.cb .cb-area {
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic k" "ic t" "n n" "p p";
    align-content: start;
    gap: 2px 12px;
    padding: 16px 18px;
    color: var(--cb-ink-2);
    text-decoration: none;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
    transition: border-color .2s var(--cb-ease), transform .2s var(--cb-ease), box-shadow .2s var(--cb-ease);
}

.cb .cb-area:hover {
    border-color: var(--cb-brand);
    transform: translateY(-2px);
    box-shadow: var(--cb-shadow-float);
}

.cb-area-ic {
    grid-area: ic;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
    border-radius: 12px;
}

.cb-area-ic .cb-icon {
    width: 24px;
    height: 24px;
}

.cb-area-k {
    grid-area: k;
    font-size: .8rem;
    color: var(--cb-muted);
}

.cb-area-t {
    grid-area: t;
    font-family: var(--cb-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cb-ink);
}

.cb-area-n {
    grid-area: n;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    font-size: .9rem;
}

.cb-area-n b {
    font-family: var(--cb-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cb-ink);
    font-variant-numeric: tabular-nums;
}

.cb-area-n small {
    flex-basis: 100%;
    font-size: .82rem;
    color: var(--cb-muted);
}

.cb-area-p {
    grid-area: p;
    margin-top: 8px;
    padding-top: 8px;
    font-size: .82rem;
    color: var(--cb-muted);
    border-top: 1px dashed var(--cb-line);
    font-variant-numeric: tabular-nums;
}

/* ── ตาราง ───────────────────────────────────────────────────────────── */
.cb-scroll {
    position: relative;
    overflow-x: auto;
    border-radius: var(--cb-rs);
    -webkit-overflow-scrolling: touch;
}

.cb-scroll:focus-visible {
    outline-offset: -2px;
}

.cb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .94rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.cb-table caption {
    padding: 0 0 8px;
    font-weight: 700;
    text-align: left;
    color: var(--cb-ink);
}

.cb-table th,
.cb-table td {
    padding: 8px 12px;
    vertical-align: top;
    text-align: left;
    border: 1px solid var(--cb-line);
}

.cb-table thead th {
    font-weight: 700;
    color: var(--cb-ink);
    background: var(--cb-paper-alt);
    vertical-align: bottom;
}

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

.cb-table .is-n {
    text-align: right;
    white-space: nowrap;
}

.cb-table tfoot th,
.cb-table tfoot td {
    font-weight: 700;
    color: var(--cb-ink);
    background: var(--cb-brand-soft);
}

.cb-table th a.cb-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}

.cb-files {
    min-width: 560px;
    background: var(--cb-paper);
}

.cb-files td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* โครงสร้างเวลาเรียน */
.cb-tt {
    min-width: 560px;
    background: var(--cb-paper);
}

.cb-tt thead th {
    text-align: center;
}

.cb-tt thead th small {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: var(--cb-muted);
}

.cb-tt thead th.is-n {
    text-align: center;
}

.cb-tt .cb-tt-lab {
    text-align: left;
    vertical-align: middle;
}

.cb-tt td.is-n {
    text-align: center;
    vertical-align: middle;
}

.cb-tt-group th {
    font-style: italic;
    color: var(--cb-brand-ink) !important;
    background: var(--cb-brand-soft);
}

.cb-tt-parent th {
    font-weight: 700;
}

.cb-tt-sub th {
    padding-left: 30px;
    font-weight: 500 !important;
    color: var(--cb-ink-2) !important;
}

.cb-tt-sub th::before {
    content: "–";
    margin-right: 6px;
    color: var(--cb-muted);
}

.cb-tt-total th,
.cb-tt-total td {
    background: var(--cb-paper-alt);
    font-weight: 700;
}

.cb-tt-v {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

.cb-tt-v b {
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-tt-v small {
    font-size: .8rem;
    color: var(--cb-muted);
}

.cb-tt-v + .cb-tt-v {
    margin-top: 6px;
}

.cb-tt-notes {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--cb-ink-2);
    background: var(--cb-paper-alt);
    border-left: 4px solid var(--cb-brand-line);
    border-radius: 0 10px 10px 0;
}

.cb-tt-notes p:first-child {
    font-weight: 700;
}

/* โครงสร้างหลักสูตร */
.cb-matrix {
    min-width: 640px;
    background: var(--cb-paper);
}

.cb-matrix td.is-n {
    text-align: center;
    padding: 0;
}

.cb .cb-cell-a {
    display: block;
    padding: 8px 10px;
    font-weight: 600;
    color: var(--cb-ink);
    text-decoration: none;
}

.cb .cb-cell-a:hover {
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
    text-decoration: underline;
}

.cb-matrix .is-na {
    color: var(--cb-muted);
    padding: 8px 10px;
}

.cb-matrix tr.is-sel th,
.cb-matrix tr.is-sel td {
    background: var(--cb-brand-soft);
}

.cb-st-grade {
    margin-top: 16px;
}

.cb-st-terms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cb-st {
    min-width: 400px;
    background: var(--cb-paper);
    font-size: .9rem;
}

.cb-st caption {
    font-family: var(--cb-serif);
    font-weight: 600;
}

.cb-st td:first-child {
    width: 1%;
    white-space: nowrap;
}

.cb-st-sec th,
.cb-st-sec td {
    font-weight: 700;
    color: var(--cb-ink);
    background: var(--cb-paper-alt);
}

.cb-st-sec.is-sub th {
    padding-left: 26px;
    font-weight: 600;
    font-style: italic;
}

.cb-st-note {
    display: block;
    font-size: .8rem;
    color: var(--cb-muted);
}

.cb-st-opts td {
    background: var(--cb-paper-alt);
}

.cb-st-opt-k {
    font-size: .82rem;
    font-weight: 700;
    color: var(--cb-muted);
}

.cb-st-opts ul {
    margin-top: 4px;
    display: grid;
    gap: 4px;
}

/* ตารางในเนื้อหาของเล่ม (กิจกรรม เกณฑ์การจบ) */
.cb-doc-table {
    min-width: 480px;
    margin-block: 4px 18px;
    background: var(--cb-paper);
}

.cb-doc-table p {
    margin: 0;
}

.cb-doc-table .cb-blank {
    display: none;
}

/* ── แผง ─────────────────────────────────────────────────────────────── */
.cb-panel {
    min-width: 0;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

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

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

.cb-panel-head .cb-page-tag {
    margin-left: auto;
}

.cb-panel-body {
    padding: 16px 20px 18px;
}

/* ── ชิปและตัวกรอง ──────────────────────────────────────────────────── */
.cb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cb .cb-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 5px 14px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--cb-ink-2);
    text-decoration: none;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line-bold);
    border-radius: 999px;
    transition: border-color .15s, color .15s, background-color .15s;
}

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

.cb .cb-chip.is-on {
    color: #ffffff;
    background: var(--cb-solid);
    border-color: var(--cb-solid);
}

.cb-chips.is-plans {
    margin-bottom: 6px;
}

.cb-jump {
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
}

.cb-jump-k {
    margin-bottom: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--cb-muted);
}

.cb-filters {
    position: sticky;
    top: 8px;
    z-index: 15;
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--cb-paper) 94%, transparent);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.cb-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.cb-filter-k {
    min-width: 5.5rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--cb-muted);
}

.cb-find {
    flex: 1 1 14rem;
    min-width: 0;
    min-height: 38px;
    padding: 6px 14px;
    font: inherit;
    font-size: .94rem;
    color: var(--cb-ink);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line-bold);
    border-radius: 999px;
}

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

.cb-filter-out {
    font-size: .86rem;
    color: var(--cb-muted);
}

.cb-filter-out b {
    color: var(--cb-ink);
}

/* ── รายชื่อรายวิชา ─────────────────────────────────────────────────── */
.cb-index {
    margin-bottom: 22px;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-index > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 18px;
    font-family: var(--cb-serif);
    font-weight: 600;
    color: var(--cb-ink);
    cursor: pointer;
    list-style: none;
}

.cb-index > summary small {
    font-family: var(--cb-sans);
    font-size: .82rem;
    font-weight: 500;
    color: var(--cb-muted);
}

.cb-index > summary::-webkit-details-marker {
    display: none;
}

.cb-index > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}

.cb-index[open] > summary::after {
    transform: rotate(-135deg);
}

.cb-ix-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
    padding: 4px 18px 16px;
    border-top: 1px solid var(--cb-line);
}

.cb-ix-h {
    margin: 12px 0 6px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--cb-muted);
}

.cb .cb-ix a {
    display: grid;
    grid-template-columns: 5.6rem 1fr auto;
    align-items: baseline;
    gap: 8px;
    min-height: 34px;
    padding: 5px 6px;
    color: var(--cb-ink-2);
    text-decoration: none;
    border-radius: 8px;
}

.cb .cb-ix a:hover {
    background: var(--cb-brand-soft);
}

.cb-ix .cb-code {
    justify-self: start;
    font-size: .8rem;
}

.cb-ix-n {
    min-width: 0;
    color: var(--cb-ink);
}

.cb-ix-m {
    font-size: .82rem;
    color: var(--cb-muted);
    white-space: nowrap;
}

/* ── การ์ดรายวิชา (ใบคำอธิบายรายวิชา) ─────────────────────────────── */
.cb-courses {
    display: grid;
    gap: 16px;
}

.cb-kind-h {
    margin-top: 10px;
    font-family: var(--cb-serif);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-kind-h:first-child {
    margin-top: 0;
}

.cb-course {
    position: relative;
    min-width: 0;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
    scroll-margin-top: 150px;
}

.cb-course::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--cb-brand);
}

.cb-course[data-k="a"]::before {
    background: var(--cb-accent);
}

.cb-course:target {
    border-color: var(--cb-brand);
    box-shadow: 0 0 0 3px var(--cb-brand-line), var(--cb-shadow-float);
}

.cb-course-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "code name page" "meta meta meta" "raw raw raw";
    align-items: center;
    gap: 8px 14px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-course-code {
    grid-area: code;
    padding: 4px 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #ffffff;
    background: var(--cb-solid);
    border-radius: 9px;
    font-variant-numeric: tabular-nums;
}

.cb-course-name {
    grid-area: name;
    min-width: 0;
    font-family: var(--cb-serif);
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cb-ink);
}

.cb .cb-course-page {
    grid-area: page;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 3px 10px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--cb-muted);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--cb-line);
    border-radius: 999px;
}

.cb a.cb-course-page:hover {
    color: var(--cb-brand-ink);
    border-color: var(--cb-brand);
}

.cb-course-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cb-course-meta li {
    padding: 2px 10px;
    font-size: .86rem;
    color: var(--cb-ink-2);
    background: var(--cb-paper-alt);
    border-radius: 999px;
}

.cb-course-meta li b {
    font-weight: 700;
    color: var(--cb-ink);
}

.cb-course-meta .cb-kind {
    font-weight: 700;
}

.cb-course-meta .cb-kind.is-b {
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
}

.cb-course-meta .cb-kind.is-a {
    color: var(--cb-ok);
    background: var(--cb-ok-bg);
}

.cb-course-raw {
    grid-area: raw;
    font-size: .84rem;
    color: var(--cb-muted);
}

.cb-course-body {
    padding: 14px 20px 18px;
}

/* ── เนื้อความ ───────────────────────────────────────────────────────── */
.cb-prose {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--cb-ink-2);
}

.cb-prose > * + * {
    margin-top: .7em;
}

.cb-prose p {
    text-indent: 0;
}

.cb-prose h3 {
    margin-top: 1.6em;
    font-family: var(--cb-serif);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cb-ink);
    scroll-margin-top: 96px;
}

.cb-prose h4 {
    margin-top: 1.1em;
    font-size: .96rem;
    font-weight: 700;
    color: var(--cb-ink);
}

.cb-prose ol:not(.cb-lo),
.cb-prose ul:not(.cb-codes) {
    padding-left: 1.5rem;
}

.cb-prose ol:not(.cb-lo) {
    list-style: decimal;
}

.cb-prose ul:not(.cb-codes) {
    list-style: disc;
}

.cb-prose li + li {
    margin-top: .25em;
}

.cb-prose :is(.cb-codes, .cb-lo) li + li {
    margin-top: 0;
}

.cb-prose li > p {
    margin: 0;
}

.cb-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: .4em;
}

.cb-codes li {
    padding: 2px 10px;
    font-size: .88rem;
    color: var(--cb-ink);
    background: var(--cb-paper-alt);
    border: 1px solid var(--cb-line);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.cb-lo {
    display: grid;
    gap: 6px;
    counter-reset: none;
}

.cb-lo li {
    position: relative;
    padding-left: 2.4rem;
}

.cb-lo li::before {
    content: attr(value);
    position: absolute;
    left: 0;
    top: .2em;
    width: 1.8rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
    border-radius: 6px;
}

.cb-lo li:not([value])::before {
    content: "•";
}

.cb-total {
    display: inline-block;
    padding: 2px 12px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--cb-ink);
    background: var(--cb-paper-alt);
    border-radius: 999px;
}

.cb-none {
    color: var(--cb-muted);
}

.cb-doc-flow h3 {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cb-line);
}

/* ── ส่วนนำ ──────────────────────────────────────────────────────────── */
.cb-vision {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}

.cb-quote {
    position: relative;
    padding: clamp(18px, 2.4vw, 28px);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-quote.is-vision {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cb-hero-a), var(--cb-hero-b) 60%, var(--cb-hero-c));
    border-color: transparent;
}

.cb-quote-k {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--cb-brand-ink);
}

.cb-quote.is-vision .cb-quote-k {
    color: #e0e7ff;
}

.cb-quote blockquote p {
    margin-top: 12px;
    font-family: var(--cb-serif);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.55;
    color: var(--cb-ink);
    text-wrap: balance;
}

.cb-quote.is-vision blockquote p {
    color: #ffffff;
}

.cb-quote figcaption {
    margin-top: 8px;
    font-size: .96rem;
    color: var(--cb-ink-2);
}

.cb-mission {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb-mission-i {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-mission-n {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    font-family: var(--cb-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--cb-solid);
    border-radius: 50%;
}

.cb-mission-i p {
    line-height: 1.7;
    color: var(--cb-ink);
}

.cb-comps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 12px;
}

.cb-comp {
    padding: 16px 18px;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-comp-ic {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
    border-radius: 12px;
}

.cb-comp-t {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--cb-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-comp-n {
    font-size: .86rem;
    color: var(--cb-muted);
}

.cb-comp p {
    margin-top: 6px;
    font-size: .94rem;
    line-height: 1.75;
}

.cb-traits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cb-traits li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--cb-ink);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-rs);
}

.cb-trait-n {
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
    border-radius: 50%;
}

/* ── ประกาศ (หน้าเอกสาร) ────────────────────────────────────────────── */
.cb-doc {
    padding: clamp(22px, 4vw, 52px) clamp(18px, 4.6vw, 64px);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: 6px;
    box-shadow: var(--cb-shadow-float);
}

.cb-doc-issuer {
    text-align: center;
    font-family: var(--cb-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-doc-title {
    margin-top: 6px;
    text-align: center;
    font-family: var(--cb-serif);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--cb-ink);
    text-wrap: balance;
}

.cb-doc-sub {
    text-align: center;
    font-weight: 600;
    color: var(--cb-ink-2);
}

.cb-doc-rule {
    width: 40%;
    margin: 18px auto;
    border: 0;
    border-top: 1px solid var(--cb-line-bold);
}

.cb-doc-body p {
    text-indent: 2.5em;
    line-height: 1.95;
    color: var(--cb-ink);
}

.cb-doc-body p + p {
    margin-top: .6em;
}

.cb-doc-date {
    margin-top: 22px;
    text-align: center;
    font-weight: 600;
    color: var(--cb-ink);
}

.cb-signs {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.cb-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.7;
    color: var(--cb-ink-2);
}

.cb-sign-name {
    padding-top: 38px;
    font-weight: 600;
    color: var(--cb-ink);
    background: linear-gradient(var(--cb-line-bold), var(--cb-line-bold)) center 28px / 70% 1px no-repeat;
}

/* ── บัตรล็อก/คำสั่ง ─────────────────────────────────────────────────── */
.cb-lockcard {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: clamp(18px, 3vw, 30px);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-lockcard-ic {
    width: 52px;
    height: 52px;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--cb-warn);
    background: var(--cb-warn-bg);
    border-radius: 14px;
}

.cb-lockcard.is-open .cb-lockcard-ic {
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
}

.cb-lockcard-t {
    font-family: var(--cb-serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cb-ink);
}

.cb-lockcard p {
    margin-top: 8px;
    line-height: 1.7;
}

.cb-lockcard .cb-btn {
    margin-top: 6px;
}

/* ── ข้อสังเกต (บุคลากร) ────────────────────────────────────────────── */
.cb-notes {
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
}

.cb-notes.is-inline {
    margin-bottom: 18px;
}

.cb-notes > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 48px;
    padding: 10px 18px;
    font-weight: 600;
    color: var(--cb-ink);
    cursor: pointer;
}

.cb-notes > .cb-note {
    padding: 0 18px;
}

.cb-notes-list {
    display: grid;
    gap: 6px;
    padding: 10px 18px 16px 2.4rem !important;
    list-style: disc !important;
    font-size: .9rem;
    line-height: 1.6;
}

/* ── แถบสารบัญข้างและเปลือกบทความ ──────────────────────────────────── */
.cb-shell {
    margin-top: clamp(18px, 2.6vw, 28px);
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 36px);
    align-items: start;
}

.cb-side {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.cb-side-m {
    display: none;
}

.cb-side-d,
.cb-side-m {
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    box-shadow: var(--cb-shadow);
}

.cb-side-d {
    padding: 10px;
}

.cb-side-h a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 12px;
    font-family: var(--cb-serif);
    font-weight: 600;
    color: var(--cb-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--cb-line);
    margin-bottom: 6px;
}

.cb-side-list {
    display: grid;
    gap: 1px;
}

.cb .cb-side-a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 10px;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--cb-ink-2);
    text-decoration: none;
    border-radius: 9px;
    transition: background-color .15s, color .15s;
}

.cb .cb-side-a:hover {
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
}

.cb .cb-side-a[aria-current="page"] {
    color: #ffffff;
    background: var(--cb-solid);
}

.cb .cb-side-a[aria-current="page"] small {
    opacity: 1;
}

.cb .cb-side-a small {
    font-size: .76rem;
    opacity: .8;
    font-variant-numeric: tabular-nums;
}

.cb .cb-side-a.is-locked {
    color: var(--cb-muted);
}

.cb-side-list .is-area .cb-side-a {
    padding-left: 18px;
}

.cb-side-m > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 16px;
    font-weight: 600;
    color: var(--cb-ink);
    cursor: pointer;
}

.cb-side-m nav {
    padding: 0 8px 10px;
}

.cb-article {
    min-width: 0;
}

.cb-pager {
    margin-top: clamp(30px, 4vw, 48px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cb .cb-pager-a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    color: var(--cb-ink);
    text-decoration: none;
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
    transition: border-color .2s, box-shadow .2s;
}

.cb .cb-pager-a:hover {
    border-color: var(--cb-brand);
    box-shadow: var(--cb-shadow);
}

.cb-pager-a span {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    line-height: 1.4;
}

.cb-pager-a small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--cb-muted);
}

.cb-pager-a.is-next {
    grid-column: 2;
    justify-content: flex-end;
    text-align: right;
}

/* ── แผนภาพ ──────────────────────────────────────────────────────────── */
.cb-fig {
    margin: 18px 0 22px;
    padding: 18px;
    background: var(--cb-paper-alt);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r);
}

.cb-fig figcaption {
    margin-top: 12px;
    font-size: .84rem;
    text-align: center;
    color: var(--cb-muted);
}

.cb-cycle-in {
    position: relative;
    max-width: 640px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "core core" "c c";
    gap: 14px;
    align-items: center;
}

.cb-cycle-ring {
    display: none;
}

.cb-cycle-node,
.cb-cycle-core {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    line-height: 1.5;
    text-align: center;
    background: var(--cb-paper);
    border: 1px solid var(--cb-brand-line);
    border-radius: var(--cb-rs);
}

.cb-cycle-node b {
    color: var(--cb-ink);
}

.cb-cycle-node span {
    font-size: .84rem;
    color: var(--cb-ink-2);
}

.cb-cycle-node.is-a {
    grid-area: a;
}

.cb-cycle-node.is-b {
    grid-area: b;
}

.cb-cycle-node.is-c {
    grid-area: c;
    justify-self: center;
    min-width: 60%;
}

.cb-cycle-core {
    grid-area: core;
    justify-self: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 9.5rem;
    height: 9.5rem;
    border-radius: 50%;
    color: #ffffff;
    background: var(--cb-solid);
    border-color: var(--cb-solid);
    box-shadow: 0 0 0 10px var(--cb-brand-soft);
}

.cb-cycle-core b {
    font-family: var(--cb-serif);
    font-size: 1.2rem;
    color: #ffffff;
}

.cb-flow-steps {
    max-width: 640px;
    margin-inline: auto;
    display: grid;
    gap: 22px;
}

.cb-flow-steps > li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.cb-flow-steps > li + li::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 2px;
    height: 18px;
    background: var(--cb-brand-line);
}

.cb-flow-start b,
.cb-flow-end b {
    padding: 10px 26px;
    font-family: var(--cb-serif);
    color: #ffffff;
    background: var(--cb-solid);
    border-radius: 999px;
}

.cb-flow-three span,
.cb-flow-split > span {
    flex: 1 1 10rem;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--cb-ink);
    background: var(--cb-paper);
    border: 1px solid var(--cb-brand-line);
    border-radius: var(--cb-rs);
}

.cb-flow-eval {
    align-items: stretch;
}

.cb-flow-eval > b {
    align-self: center;
    padding: 12px 22px;
    font-family: var(--cb-serif);
    color: var(--cb-brand-ink);
    background: var(--cb-brand-soft);
    border: 2px solid var(--cb-brand);
    border-radius: 12px;
    transform: none;
}

.cb-flow-crit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    text-align: left;
    font-size: .9rem;
    color: var(--cb-ink-2);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line-bold);
    border-radius: var(--cb-rs);
}

.cb-flow-crit b {
    color: var(--cb-ink);
}

.cb-flow-split > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.cb-flow-split b {
    font-size: .82rem;
    color: var(--cb-muted);
}

.cb-flow-ok {
    color: var(--cb-ok) !important;
    background: var(--cb-ok-bg) !important;
}

.cb-flow-no {
    color: var(--cb-warn) !important;
    background: var(--cb-warn-bg) !important;
}

.cb-flow-ok .cb-icon {
    display: inline-block;
}

/* ── แจ้งเตือน ───────────────────────────────────────────────────────── */
.cb-alert {
    margin: 24px 0;
    padding: 16px 20px;
    line-height: 1.7;
    color: var(--cb-ink);
    background: var(--cb-paper);
    border: 1px solid var(--cb-line);
    border-left: 5px solid var(--cb-crit);
    border-radius: var(--cb-rs);
}

/* ── ภาพเคลื่อนไหว ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .cb [data-cb-reveal].cb-pre {
        opacity: 0;
        transform: translateY(12px);
    }

    .cb [data-cb-reveal].cb-pre.is-in {
        opacity: 1;
        transform: none;
        transition: opacity .5s var(--cb-ease), transform .5s var(--cb-ease);
    }
}

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

/* ── จอขนาดต่าง ๆ ───────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .cb-areas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cb-st-terms {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .cb-side {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .cb-side-d,
    .cb-side .cb-search {
        display: none;
    }

    .cb-side-m {
        display: block;
    }

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

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

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

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

@media (max-width: 640px) {
    .cb {
        --cb-gutter: 16px;
    }

    .cb-hero {
        text-align: left;
    }

    .cb-hero-in {
        align-items: flex-start;
    }

    .cb-hero-act {
        justify-content: flex-start;
        width: 100%;
    }

    .cb-hero-act .cb-btn {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .cb-stat {
        padding: 12px 14px;
    }

    .cb-stat-n {
        display: none;
    }

    .cb-search-row {
        flex-direction: column;
    }

    .cb-search-ic {
        top: 23px;
    }

    .cb .cb-announce {
        flex-wrap: wrap;
    }

    .cb-announce-go {
        margin-left: 60px;
    }

    .cb-toc-headrow {
        padding-right: 0;
    }

    .cb-toc-x {
        width: 40px;
    }

    .cb-toc-dots {
        display: none;
    }

    .cb .cb-toc-a {
        justify-content: space-between;
    }

    .cb-areas,
    .cb-mission,
    .cb-ix-grid,
    .cb-pager {
        grid-template-columns: minmax(0, 1fr);
    }

    .cb-pager-a.is-next {
        grid-column: auto;
    }

    .cb-course-head {
        grid-template-columns: auto 1fr;
        grid-template-areas: "code page" "name name" "meta meta" "raw raw";
        padding: 14px 16px 12px;
    }

    .cb .cb-course-page {
        justify-self: end;
    }

    .cb-course-body {
        padding: 12px 16px 16px;
    }

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

    .cb-filter-k {
        min-width: 0;
        flex-basis: 100%;
    }

    .cb-filters {
        position: static;
    }

    .cb-cycle-in {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "core" "a" "b" "c";
    }

    .cb-cycle-node.is-c {
        min-width: 0;
        justify-self: stretch;
    }

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

    .cb-lockcard {
        flex-direction: column;
    }
}

/* ── โหมดคมชัดสูง ────────────────────────────────────────────────────── */
html.tb1-contrast-high .cb {
    --cb-brand: #ffffff;
    --cb-brand-ink: #facc15;
    --cb-brand-soft: #000000;
    --cb-brand-line: #ffffff;
    --cb-accent: #facc15;
    --cb-ok: #ffffff;
    --cb-ok-bg: #000000;
    --cb-warn: #facc15;
    --cb-warn-bg: #000000;
    --cb-crit: #facc15;
}

html.tb1-contrast-high .cb-hero,
html.tb1-contrast-high .cb-quote.is-vision {
    background: #000000;
    border: 1px solid #ffffff;
}

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

html.tb1-contrast-high .cb :is(.cb-stat, .cb-search, .cb-announce, .cb-toc-book, .cb-area, .cb-panel, .cb-panel-head, .cb-jump, .cb-filters, .cb-index,
    .cb-course, .cb-quote, .cb-mission-i, .cb-comp, .cb-traits li, .cb-doc, .cb-lockcard, .cb-notes, .cb-side-d, .cb-side-m, .cb-pager-a, .cb-hit,
    .cb-fig, .cb-cycle-node, .cb-flow-crit, .cb-flow-three span, .cb-flow-split > span, .cb-chip, .cb-btn, .cb-table, .cb-table th, .cb-table td,
    .cb-codes li, .cb-course-meta li, .cb-total, .cb-tt-notes, .cb-alert, .cb-find, .cb-search input, .cb-empty) {
    color: #ffffff;
    background: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

html.tb1-contrast-high .cb :is(.cb-code, .cb-course-code, .cb-mission-n, .cb-trait-n, .cb-stat-ic, .cb-area-ic, .cb-comp-ic,
    .cb-announce-ic, .cb-lockcard-ic, .cb-page-tag, .cb-sec-count, .cb-lock) {
    color: #facc15 !important;
    background: #000000 !important;
    border: 1px solid #facc15 !important;
}

html.tb1-contrast-high .cb :is(.cb-chip.is-on, .cb-side-a[aria-current="page"], .cb-btn.is-primary, .cb-cycle-core, .cb-flow-start b, .cb-flow-end b) {
    color: #000000 !important;
    background: #facc15 !important;
    border-color: #facc15 !important;
}

html.tb1-contrast-high .cb :is(.cb-chip.is-on, .cb-side-a[aria-current="page"], .cb-btn.is-primary, .cb-cycle-core, .cb-flow-start, .cb-flow-end) * {
    color: #000000 !important;
}

html.tb1-contrast-high .cb :is(figcaption, .cb-note, .cb-sec-note, .cb-lead, .cb-hit-m, .cb-ix-m, .cb-area-k, .cb-area-n small, .cb-area-p,
    .cb-stat-n, .cb-search-hint, .cb-filter-k, .cb-filter-out, .cb-course-raw, .cb-st-note, .cb-tt-v small, .cb-pager-a small, .cb-jump-k, .cb-ix-h) {
    color: #ffffff !important;
}

html.tb1-contrast-high .cb .cb-hero-ic {
    background: #000000;
    border-color: #ffffff;
}

html.tb1-contrast-high .cb .cb-lo li::before {
    color: #facc15;
    background: #000000;
    border: 1px solid #facc15;
}

html.tb1-contrast-high .cb .cb-sec-title::before,
html.tb1-contrast-high .cb .cb-course::before {
    background: #facc15;
}

html.tb1-contrast-high .cb :is(.cb-toc-dots) {
    border-color: #ffffff;
}

html.tb1-contrast-high .cb :is(.cb-toc-a, .cb-side-a, .cb-ix a, .cb-cell-a):hover {
    background: #000000;
    box-shadow: inset 0 0 0 2px #facc15;
}

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

/* ── พิมพ์ ───────────────────────────────────────────────────────────── */
@media print {
    body.cb-page {
        background: #ffffff;
    }

    .cb-hero {
        margin: 0;
        padding: 0 0 12px;
        color: #000000;
        text-align: left;
        background: none !important;
        border-bottom: 2px solid #000000;
    }

    .cb-hero::before,
    .cb-hero::after,
    .cb-hero-act,
    .cb-crumb,
    .cb-side,
    .cb-pager,
    .cb-filters,
    .cb-search,
    .cb-toc-x,
    .cb-index,
    .cb-skip,
    .cb-course-page {
        display: none !important;
    }

    .cb-hero-title,
    .cb-hero-title span,
    .cb-hero-sub,
    .cb-hero-agency,
    .cb-hero-eyebrow {
        color: #000000;
        background: none;
        border: 0;
    }

    .cb-shell {
        display: block;
    }

    .cb-course,
    .cb-panel,
    .cb-comp,
    .cb-quote,
    .cb-mission-i {
        break-inside: avoid;
        box-shadow: none;
    }

    .cb-course[hidden] {
        display: none !important;
    }

    .cb-scroll {
        overflow: visible;
    }

    .cb-table {
        min-width: 0 !important;
    }

    .cb-quote.is-vision {
        color: #000000;
        background: none;
        border: 1px solid #000000;
    }

    .cb-quote.is-vision blockquote p,
    .cb-quote.is-vision .cb-quote-k {
        color: #000000;
    }
}