/* ═══════════════════════════════════════════════════════════════════════
   รายงานคุณภาพการศึกษาออนไลน์ (SAR) — school_quality.php + school_quality_admin.php
   โรงเรียนเทศบาล ๑ กิตติขจร · 13 ต.ค. 2569

   ภาษาภาพชุดเดียวกับ css/tb1-school-profile.css: หัวหน้าน้ำเงินไล่เฉด การ์ดลอยทับขอบล่าง แผงมีแถบหัว
   ★ โทเคนของหน้าเป็น alias ที่ชี้ไป --tb1-* โหมดมืดจึงพลิกให้เอง
   ★ น้ำหนักตัวอักษร: เนื้อความ 400 ป้าย 500 หัวข้อ 600 · ชั้น v3 ใช้ 700 กับหัวเรื่องใหญ่และตัวเลขเด่น (ฟอนต์มีถึง 700)
   ★ สีบอกความหมายมีข้อความหรือรูปทรงบอกซ้ำเสมอ (ระดับคุณภาพมีชื่อ + มาตรวัด 5 ช่อง)
   ★ ธีมกลางบังคับ font-family ของ span div li p a — ตัวเลขเด่นจึงอยู่ใน <b>
   ★ ทุก selector ขึ้นต้นด้วย sq-
   ═══════════════════════════════════════════════════════════════════════ */

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

    /* ความหมาย */
    --sq-good: #0f766e;
    --sq-good-bar: #14b8a6;
    --sq-good-bg: color-mix(in srgb, #14b8a6 12%, var(--tb1-surface, #ffffff));
    --sq-warn: #b45309;
    --sq-warn-bar: #f59e0b;
    --sq-warn-bg: color-mix(in srgb, #f59e0b 13%, var(--tb1-surface, #ffffff));
    --sq-plan: #1d4ed8;
    --sq-plan-bg: color-mix(in srgb, #3b82f6 10%, var(--tb1-surface, #ffffff));
    --sq-crit: #b91c1c;
    --sq-crit-bg: color-mix(in srgb, #ef4444 10%, var(--tb1-surface, #ffffff));
    --sq-bar: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 70%, var(--tb1-surface, #ffffff));
    --sq-track: color-mix(in srgb, var(--tb1-ink-3, #5a697f) 13%, var(--tb1-surface, #ffffff));

    /* ระดับคุณภาพ 1–5 (สีไล่จากส้มไปเขียว + ชื่อระดับ + จำนวนช่องที่เต็ม) */
    --sq-l1: #c2410c;
    --sq-l2: #b45309;
    --sq-l3: #1d4ed8;
    --sq-l4: #0f766e;
    --sq-l5: #15803d;

    /* เกรด 0 → 4: สีเดียวไล่ความเข้ม */
    --sq-g0: #fecaca;
    --sq-g1: #fed7aa;
    --sq-g2: #fde68a;
    --sq-g3: #d9f99d;
    --sq-g4: #a7f3d0;
    --sq-g5: #5eead4;
    --sq-g6: #2dd4bf;
    --sq-g7: #0d9488;

    /* คุณลักษณะ ดีเยี่ยม ดี ผ่าน ไม่ผ่าน */
    --sq-t3: #0d9488;
    --sq-t2: #5eead4;
    --sq-t1: #fde68a;
    --sq-t0: #f87171;
}

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) :is(.sq, .sqa) {
    --sq-brand-ink: #0b1324;
    --sq-brand-soft: color-mix(in srgb, var(--tb1-brand, #60a5fa) 15%, var(--tb1-surface, #111c31));
    --sq-shadow: 0 14px 32px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
    --sq-shadow-float: 0 22px 44px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
    --sq-good: #5eead4;
    --sq-good-bg: color-mix(in srgb, #14b8a6 16%, var(--tb1-surface, #111c31));
    --sq-warn: #fbbf24;
    --sq-warn-bg: color-mix(in srgb, #f59e0b 15%, var(--tb1-surface, #111c31));
    --sq-plan: #93c5fd;
    --sq-plan-bg: color-mix(in srgb, #3b82f6 16%, var(--tb1-surface, #111c31));
    --sq-crit: #fca5a5;
    --sq-crit-bg: color-mix(in srgb, #ef4444 15%, var(--tb1-surface, #111c31));
    --sq-bar: color-mix(in srgb, var(--tb1-brand, #60a5fa) 78%, var(--tb1-surface, #111c31));
    --sq-track: color-mix(in srgb, #94a3b8 18%, var(--tb1-surface, #111c31));
    --sq-l1: #fdba74;
    --sq-l2: #fcd34d;
    --sq-l3: #93c5fd;
    --sq-l4: #5eead4;
    --sq-l5: #86efac;
    color-scheme: dark;
}

/* ── เปลือกหน้า ──────────────────────────────────────────────────────── */

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

html:has(body.sq-page) {
    scroll-padding-top: var(--sq-stick, 8rem);
}

main.sq,
main.sqa {
    padding: 0 var(--sq-gutter) clamp(40px, 5vw, 72px);
    color: var(--sq-ink-2);
    font-family: var(--sq-body);
    line-height: 1.65;
}

main.sq:focus,
main.sqa:focus {
    outline: none;
}

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

:is(.sq, .sqa) :where(h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, table) {
    margin: 0;
}

:is(.sq, .sqa) *,
:is(.sq, .sqa) *::before,
:is(.sq, .sqa) *::after {
    box-sizing: border-box;
}

:is(.sq, .sqa) [hidden] {
    display: none !important;
}

:is(.sq, .sqa) :where(b, strong) {
    font-weight: 600;
}

:is(.sq, .sqa) a {
    color: var(--sq-brand);
    text-underline-offset: 3px;
}

:is(.sq, .sqa) :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sq-brand) 70%, #ffffff);
    outline-offset: 2px;
    border-radius: 6px;
}

.sq-ic {
    flex: none;
}

.sq-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.sq-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 :is(a.sq-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;
}

.sq-muted {
    color: var(--sq-muted);
}

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

.sq-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-inline: calc(-1 * var(--sq-gutter));
    padding: clamp(34px, 5vw, 56px) var(--sq-gutter) clamp(104px, 10vw, 128px);
    color: #ffffff;
    text-align: center;
    background-color: var(--sq-hero-b);
    background-image: linear-gradient(135deg, var(--sq-hero-a) 0%, var(--sq-hero-b) 52%, var(--sq-hero-c) 100%);
}

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

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

.sq-hero-fx {
    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, .08) 0%, transparent 40%);
}

.sq-hero::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000000 30%, transparent);
    mask-image: linear-gradient(180deg, #000000 30%, transparent);
}

.sq-hero-in {
    max-width: 62rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 16px;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.5;
    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);
}

.sq-title {
    margin-top: 16px;
    font-family: var(--sq-display);
    font-size: clamp(1.85rem, 4.6vw, 2.85rem);
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
    text-wrap: balance;
}

.sq-title-y {
    display: block;
    margin-top: 4px;
    font-size: .62em;
    font-weight: 500;
    color: #dbeafe;
}

.sq-lead {
    margin-top: 12px;
    max-width: 50rem;
    font-size: clamp(.98rem, 1.5vw, 1.06rem);
    line-height: 1.8;
    color: #e0e7ff;
    text-wrap: pretty;
}

.sq-years {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.sq-years-l {
    margin-right: 4px;
    font-size: .88rem;
    color: #dbeafe;
}

.sq .sq-chip {
    min-width: 64px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    font-size: .95rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s var(--sq-ease);
}

.sq .sq-chip:hover {
    background: rgba(255, 255, 255, .2);
}

.sq .sq-chip[aria-current="page"] {
    color: #1e3a8a;
    background: #ffffff;
    border-color: #ffffff;
    font-weight: 600;
}

.sq-stamp {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    font-size: .9rem;
    color: #e0e7ff;
}

.sq-stamp > span:first-of-type {
    margin-left: -4px;
}

.sq-stamp-live {
    padding: 2px 10px;
    color: #fef3c7;
    background: rgba(245, 158, 11, .18);
    border: 1px solid rgba(253, 230, 138, .45);
    border-radius: 999px;
}

/* รายงาน SAR ฉบับเต็ม (PDF) ที่โรงเรียนอัปโหลด */
.sq .sq-pdf {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    min-height: 46px;
    padding: 8px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a8a;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .55);
    transition: transform .2s var(--sq-ease), box-shadow .2s var(--sq-ease);
}

.sq .sq-pdf:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -12px rgba(15, 23, 42, .6);
}

.sq .sq-pdf:focus-visible {
    outline: 3px solid #fde68a;
    outline-offset: 3px;
}

.sq-pdf-m {
    padding: 1px 10px;
    font-size: .82rem;
    font-weight: 500;
    color: #1e40af;
    background: #dbeafe;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   ระดับคุณภาพ: การ์ดลอยทับขอบล่างของหัวหน้า
   ═══════════════════════════════════════════════════════════════════════ */

.sq-body {
    position: relative;
    z-index: 1;
}

.sq-levels {
    margin-top: calc(-1 * clamp(76px, 8vw, 96px));
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

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

.sq .sq-lvcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
}

.sq .sq-lvcard:hover {
    border-color: var(--sq-brand-line);
    transform: translateY(-2px);
}

.sq-lvcard-k {
    font-size: .84rem;
    font-weight: 500;
    color: var(--sq-brand);
    letter-spacing: .01em;
}

.sq-lvcard-t {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--sq-muted);
    min-height: 2.9em;
}

.sq-lvcard.is-overall .sq-lvcard-t {
    min-height: 0;
}

.sq-lvcard .sq-lv {
    margin-top: auto;
}

/* ป้ายระดับ: ชื่อ + มาตรวัด 5 ช่อง */
.sq-lv {
    --lv: var(--sq-muted);
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sq-lv-name {
    font-family: var(--sq-display);
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--lv);
}

.sq-lv.is-lg .sq-lv-name {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.sq-lv.is-none .sq-lv-name {
    font-family: var(--sq-body);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--sq-muted);
}

.sq-meter {
    display: inline-grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: min(100%, 168px);
}

.sq-meter i {
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sq-muted) 24%, var(--sq-paper));
}

.sq-sec-lv .sq-meter {
    width: 120px;
}

.sq-meter i.on {
    background: var(--lv);
}

.sq-lv.is-l1 { --lv: var(--sq-l1); }
.sq-lv.is-l2 { --lv: var(--sq-l2); }
.sq-lv.is-l3 { --lv: var(--sq-l3); }
.sq-lv.is-l4 { --lv: var(--sq-l4); }
.sq-lv.is-l5 { --lv: var(--sq-l5); }

/* ── แถบผู้บริหาร ── */

.sq-editbar {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    color: var(--sq-ink-2);
    background: var(--sq-brand-soft);
    border: 1px dashed var(--sq-brand-line);
    border-radius: var(--sq-rs);
}

.sq-editbar > .sq-ic {
    color: var(--sq-brand);
}

.sq-editbar p {
    flex: 1 1 18rem;
    font-size: .93rem;
}

:is(.sq, .sqa) .sq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 16px;
    font: inherit;
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sq-brand);
    text-decoration: none;
    background: var(--sq-paper);
    border: 1px solid var(--sq-brand-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s var(--sq-ease), border-color .2s var(--sq-ease);
}

:is(.sq, .sqa) .sq-btn:hover {
    background: var(--sq-brand-soft);
}

:is(.sq, .sqa) .sq-btn.is-primary {
    color: var(--sq-brand-ink);
    background: var(--sq-brand);
    border-color: var(--sq-brand);
}

:is(.sq, .sqa) .sq-btn.is-primary:hover {
    background: color-mix(in srgb, var(--sq-brand) 88%, #000000);
}

.sq-notice {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: .95rem;
    color: var(--sq-warn);
    background: var(--sq-warn-bg);
    border: 1px solid color-mix(in srgb, var(--sq-warn-bar) 40%, transparent);
    border-radius: var(--sq-rs);
}

/* ── ข้อมูลพื้นฐาน ── */

.sq-facts {
    margin-top: 18px;
}

.sq-facts-l {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.sq-fact {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--sq-paper);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-rs);
}

.sq-fact .sq-ic {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    padding: 9px;
    color: var(--sq-brand);
    background: var(--sq-brand-soft);
    border-radius: 11px;
}

.sq-fact b {
    font-family: var(--sq-display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sq-ink);
    font-variant-numeric: tabular-nums;
}

.sq-fact b small {
    font-size: .7em;
    font-weight: 500;
    color: var(--sq-muted);
}

.sq-fact span {
    font-size: .88rem;
    color: var(--sq-muted);
}

.sq-facts-src {
    margin-top: 6px;
    font-size: .84rem;
    color: var(--sq-muted);
    text-align: right;
}

/* ── แถบส่วนของรายงาน (ติดใต้แถบเมนู) ── */

.sq-nav {
    position: sticky;
    top: calc(var(--sq-nav-h, 57px) + 8px);
    z-index: 20;
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: color-mix(in srgb, var(--sq-paper) 88%, transparent);
    border: 1px solid var(--sq-line);
    border-radius: 999px;
    box-shadow: var(--sq-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.sq-nav-in {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sq-nav-in::-webkit-scrollbar {
    display: none;
}

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

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

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

.sq-print {
    flex: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ส่วนของรายงาน
   ═══════════════════════════════════════════════════════════════════════ */

.sq-sec {
    margin-top: clamp(28px, 4vw, 44px);
    padding: clamp(18px, 2.6vw, 30px);
    background: var(--sq-paper);
    border: 1px solid var(--sq-line);
    border-radius: calc(var(--sq-r) + 4px);
    box-shadow: var(--sq-shadow);
}

.sq-sec-h {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sq-line);
}

.sq-sec-no {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sq-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent-strong, #0284c7));
    border-radius: 16px;
    box-shadow: 0 12px 24px -16px rgba(29, 78, 216, .9);
}

.sq-sec-k {
    font-size: .86rem;
    font-weight: 500;
    color: var(--sq-brand);
}

.sq-sec-t {
    margin-top: 2px;
    font-family: var(--sq-display);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--sq-ink);
    text-wrap: balance;
}

.sq-sec-stamp {
    margin-top: 4px;
    font-size: .84rem;
    color: var(--sq-muted);
}

.sq-sec-lv {
    justify-self: end;
    padding: 10px 14px;
    background: var(--sq-paper-alt);
    border-radius: var(--sq-rs);
}

.sq-block + .sq-block {
    margin-top: 26px;
}

.sq-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 12px;
    font-family: var(--sq-display);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sq-ink);
}

.sq-block > .sq-sub:first-child,
.sq-block > .sq-sub:first-child + .sq-sub {
    margin-top: 0;
}

.sq-sub .sq-ic {
    color: var(--sq-brand);
}

.sq-sub.is-sys {
    padding: 8px 12px;
    font-size: 1rem;
    color: var(--sq-brand);
    background: var(--sq-brand-soft);
    border-radius: 10px;
}

/* ── ข้อความ ── */

.sq-prose {
    color: var(--sq-ink-2);
    font-size: 1rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.sq-prose > * + * {
    margin-top: .8em;
}

.sq-prose.is-lead {
    max-width: 52rem;
    font-size: 1.04rem;
}

.sq-list {
    padding-left: 1.3rem;
}

.sq-list li + li {
    margin-top: .35em;
}

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

.sq .sq-ext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    word-break: break-all;
}

.sq-notext {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 14px;
    font-size: .93rem;
    color: var(--sq-muted);
    background: var(--sq-paper-alt);
    border-radius: 10px;
}

.sq-small {
    font-size: .92rem;
    line-height: 1.75;
    color: var(--sq-ink-2);
}

/* ── การ์ดข้อความ (จุดเด่น จุดควรพัฒนา แผนพัฒนา) ── */

.sq-cards {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 14px;
}

.sq-cards.is-two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

/* แผนยาว: จุดเด่น + จุดควรพัฒนาเคียงกันแถวบน แผนเต็มแถวล่าง */
.sq-cards.has-wide {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
    .sq-cards.has-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sq-card.is-wide {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .sq-card.is-wide .sq-list {
        columns: 2;
        column-gap: 40px;
    }

    .sq-card.is-wide .sq-list li,
    .sq-card.is-wide .sq-list li + li {
        margin: 0 0 .35em;
        break-inside: avoid;
    }
}

.sq-card {
    --c: var(--sq-brand);
    --cbg: var(--sq-paper-alt);
    min-width: 0;
    padding: 16px 18px 18px;
    background: var(--cbg);
    border: 1px solid color-mix(in srgb, var(--c) 22%, var(--sq-line));
    border-top: 4px solid var(--c);
    border-radius: var(--sq-rs);
}

.sq-card.is-good { --c: var(--sq-good); --cbg: var(--sq-good-bg); }
.sq-card.is-warn { --c: var(--sq-warn); --cbg: var(--sq-warn-bg); }
.sq-card.is-plan { --c: var(--sq-plan); --cbg: var(--sq-plan-bg); }
.sq-card.is-spark { --c: #7c3aed; --cbg: color-mix(in srgb, #8b5cf6 9%, var(--sq-paper)); }
.sq-card.is-need { --c: #be185d; --cbg: color-mix(in srgb, #ec4899 8%, var(--sq-paper)); }

:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .sq-card.is-spark { --c: #c4b5fd; }
:is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .sq-card.is-need { --c: #f9a8d4; }

.sq-card-t {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--sq-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c);
}

.sq-card .sq-prose {
    font-size: .97rem;
    line-height: 1.8;
}

.sq-card .sq-foot {
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   แผงตัวชี้วัด
   ═══════════════════════════════════════════════════════════════════════ */

.sq-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 14px;
}

.sq-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--sq-paper);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-r);
    overflow: hidden;
}

.sq-panel.is-wide {
    grid-column: 1 / -1;
}

.sq-panel-h {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--sq-paper-alt);
    border-bottom: 1px solid var(--sq-line);
}

.sq-panel-ic {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sq-brand);
    background: var(--sq-paper);
    border: 1px solid var(--sq-brand-line);
    border-radius: 10px;
}

.sq-panel-t {
    font-family: var(--sq-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sq-ink);
}

.sq-panel-s {
    margin-top: 2px;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--sq-muted);
}

.sq-panel-b {
    flex: 1 1 auto;
    padding: 14px 16px 16px;
}

.sq-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 14px 20px;
}

.sq-panel:not(.is-wide) .sq-terms {
    grid-template-columns: 1fr;
}

.sq-term {
    min-width: 0;
}

.sq-panel:not(.is-wide) .sq-term + .sq-term {
    padding-top: 14px;
    border-top: 1px dashed var(--sq-line);
}

.sq-panel.is-wide .sq-term + .sq-term {
    padding-left: 20px;
    border-left: 1px dashed var(--sq-line);
}

.sq-term-t {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 10px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--sq-ink);
}

.sq-tag {
    padding: 1px 10px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--sq-muted);
    background: var(--sq-paper-alt);
    border: 1px solid var(--sq-line);
    border-radius: 999px;
}

.sq-tag.is-live {
    color: var(--sq-warn);
    background: var(--sq-warn-bg);
    border-color: color-mix(in srgb, var(--sq-warn-bar) 40%, transparent);
}

/* ตัวเลขเด่น */
.sq-bigs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-bottom: 12px;
}

.sq-big {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.sq-big-v {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.sq-big b {
    font-family: var(--sq-display);
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--sq-ink);
    font-variant-numeric: tabular-nums;
}

.sq-big small {
    font-size: .95rem;
    font-weight: 500;
    color: var(--sq-muted);
}

.sq-big-l {
    font-size: .84rem;
    line-height: 1.45;
    color: var(--sq-muted);
}

.sq-lead2 {
    margin-bottom: 10px;
    font-size: .93rem;
    color: var(--sq-ink-2);
}

/* ตารางและแถบ */
.sq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.sq-table caption {
    text-align: left;
}

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

.sq-table thead th {
    padding-top: 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sq-muted);
    border-bottom-color: var(--sq-line-bold);
}

.sq-table tbody th {
    font-weight: 500;
    color: var(--sq-ink-2);
    width: 40%;
    line-height: 1.45;
}

.sq-table.is-compact tbody th {
    width: 22%;
}

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

.sq-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sq-td-bar {
    display: grid;
    grid-template-columns: minmax(40px, 1fr) 4.4em;
    align-items: center;
    gap: 8px;
}

.sq-track {
    position: relative;
    display: block;
    height: 10px;
    background: var(--sq-track);
    border-radius: 999px;
    overflow: hidden;
}

.sq-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    background: var(--sq-bar);
    border-radius: inherit;
    transition: width .6s var(--sq-ease);
}

.sq-bar.is-good {
    background: var(--sq-good-bar);
}

.sq-v {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 500;
    color: var(--sq-ink);
    white-space: nowrap;
}

/* O-NET: แท่งโรงเรียน + ขีดระดับประเทศ */
.sq-track.is-onet {
    overflow: visible;
}

.sq-bar.is-school {
    background: var(--sq-bar);
}

.sq-nat {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--at, 0%);
    width: 3px;
    margin-left: -1.5px;
    background: var(--sq-ink);
    border-radius: 2px;
}

.sq-gap.is-up {
    color: var(--sq-good);
}

.sq-gap.is-down {
    color: var(--sq-warn);
}

.sq-gapline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: .9rem;
}

.sq-gapline.is-up {
    color: var(--sq-good);
}

.sq-gapline.is-down {
    color: var(--sq-warn);
}

/* แถวป้าย + แถบ */
.sq-row {
    display: grid;
    grid-template-columns: minmax(7rem, 40%) minmax(40px, 1fr) 4.4em;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: .92rem;
}

.sq-row-l {
    color: var(--sq-ink-2);
    line-height: 1.45;
}

.sq-row-n {
    grid-column: 2 / -1;
    font-size: .88rem;
    color: var(--sq-muted);
}

.sq-foot {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--sq-muted);
}

.sq-foot a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sq-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sq-sw {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.sq-sw.is-school {
    background: var(--sq-bar);
}

.sq-sw.is-nat {
    width: 3px;
    height: 14px;
    background: var(--sq-ink);
}

/* แถบซ้อน */
.sq-stack {
    display: flex;
    height: 14px;
    overflow: hidden;
    background: var(--sq-track);
    border-radius: 999px;
}

.sq-stack.is-tall {
    height: 18px;
}

.sq-seg {
    flex: 0 0 var(--w, 0%);
    min-width: 2px;
}

.sq-seg + .sq-seg {
    box-shadow: inset 1px 0 0 var(--sq-paper);
}

.sq-seg.g0 { background: var(--sq-g0); }
.sq-seg.g1 { background: var(--sq-g1); }
.sq-seg.g2 { background: var(--sq-g2); }
.sq-seg.g3 { background: var(--sq-g3); }
.sq-seg.g4 { background: var(--sq-g4); }
.sq-seg.g5 { background: var(--sq-g5); }
.sq-seg.g6 { background: var(--sq-g6); }
.sq-seg.g7 { background: var(--sq-g7); }
.sq-seg.t3, .sq-sw.t3 { background: var(--sq-t3); }
.sq-seg.t2, .sq-sw.t2 { background: var(--sq-t2); }
.sq-seg.t1, .sq-sw.t1 { background: var(--sq-t1); }
.sq-seg.t0, .sq-sw.t0 { background: var(--sq-t0); }

.sq-dist {
    margin-top: 14px;
}

.sq-dist-t {
    margin-bottom: 6px;
    font-size: .84rem;
    color: var(--sq-muted);
}

.sq-dist-ax {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-size: .76rem;
    color: var(--sq-muted);
}

.sq-legend {
    list-style: none;
    padding: 0;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: .86rem;
    color: var(--sq-ink-2);
}

.sq-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sq-legend b {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.sq-more {
    margin-top: 6px;
    font-size: .86rem;
}

.sq-more summary {
    width: max-content;
    max-width: 100%;
    padding: 2px 0;
    color: var(--sq-brand);
    cursor: pointer;
}

.sq-mini {
    margin-top: 6px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.sq-mini th,
.sq-mini td {
    padding: 3px 14px 3px 0;
    text-align: right;
    border-bottom: 1px solid var(--sq-line);
}

.sq-mini thead th {
    font-weight: 500;
    color: var(--sq-muted);
}

.sq-mini tbody th {
    font-weight: 500;
    text-align: left;
}

/* สถานะ: รอข้อมูลครบ / ยังไม่มีข้อมูล / อ่านไม่สำเร็จ */
.sq-state {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--sq-paper-alt);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-rs);
}

.sq-state > .sq-ic {
    margin-top: 2px;
    color: var(--sq-muted);
}

.sq-state > div {
    min-width: 0;
    flex: 1 1 auto;
}

.sq-state-t {
    font-size: .95rem;
    font-weight: 600;
    color: var(--sq-ink);
}

.sq-state-d {
    margin-top: 2px;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--sq-ink-2);
}

.sq-state.is-pending {
    background: var(--sq-warn-bg);
    border-color: color-mix(in srgb, var(--sq-warn-bar) 35%, transparent);
}

.sq-state.is-pending > .sq-ic,
.sq-state.is-pending .sq-state-t {
    color: var(--sq-warn);
}

.sq-state.is-error {
    background: var(--sq-crit-bg);
    border-color: color-mix(in srgb, #ef4444 35%, transparent);
}

.sq-state.is-error > .sq-ic,
.sq-state.is-error .sq-state-t {
    color: var(--sq-crit);
}

.sq-prog {
    position: relative;
    display: block;
    margin-top: 10px;
    height: 8px;
    background: color-mix(in srgb, var(--sq-warn-bar) 18%, var(--sq-paper));
    border-radius: 999px;
}

.sq-prog-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    background: var(--sq-warn-bar);
    border-radius: inherit;
}

.sq-prog-mark {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--at, 90%);
    width: 2px;
    background: var(--sq-ink);
    border-radius: 2px;
}

.sq-problem {
    margin: 24px 0;
    display: flex;
    gap: 12px;
    padding: 18px 20px;
    color: var(--sq-ink);
    background: var(--sq-paper);
    border: 2px solid var(--sq-crit);
    border-radius: var(--sq-r);
}

.sq-problem > .sq-ic {
    color: var(--sq-crit);
}

/* ── เกี่ยวกับรายงาน ── */

.sq-lvlist {
    list-style: none;
    padding: 0;
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.sq-lvlist .sq-lv {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
}

.sq-lvlist .sq-lv-name {
    font-size: 1rem;
}

.sq-lvlist .sq-meter {
    width: 120px;
}

.sq-about .sq-card {
    --c: var(--sq-brand);
}

.sq-about .sq-card-t {
    color: var(--sq-ink);
}

.sq-about .sq-card-t .sq-ic {
    color: var(--sq-brand);
}

/* ═══════════════════════════════════════════════════════════════════════
   จอเล็ก
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .sq-levels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sq .sq-lvcard.is-overall {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 16px;
    }

    .sq-lvcard.is-overall .sq-lvcard-t {
        display: none;
    }

    .sq-lvcard.is-overall .sq-lv {
        margin: 0 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
}

@media (max-width: 760px) {
    .sq-levels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sq-levels .sq-lvcard:last-child {
        grid-column: 1 / -1;
    }

    .sq .sq-lvcard {
        padding: 14px;
    }

    .sq-lvcard-t {
        min-height: 0;
        font-size: .86rem;
    }

    .sq-lv-name {
        font-size: 1.12rem;
    }

    .sq-lvcard.is-overall .sq-lv {
        margin: 4px 0 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

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

    .sq-sec-lv {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .sq-sec-no {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
        border-radius: 13px;
    }

    .sq-panel.is-wide .sq-term + .sq-term {
        padding-left: 0;
        border-left: 0;
        padding-top: 14px;
        border-top: 1px dashed var(--sq-line);
    }

    .sq-nav {
        border-radius: 14px;
    }

    .sq-print span {
        display: none;
    }

    .sq-print {
        min-width: 40px;
        padding: 6px 10px;
    }

    .sq-facts-src {
        text-align: left;
    }

    .sq-row {
        grid-template-columns: minmax(0, 1fr) 4.4em;
        row-gap: 4px;
    }

    .sq-row-l {
        grid-column: 1 / -1;
    }

    .sq-row-n {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .sq-years-l {
        flex-basis: 100%;
        margin: 0;
    }

    .sq .sq-chip {
        min-width: 58px;
        padding: 4px 10px;
    }

    .sq-sec {
        padding: 16px 14px;
        border-radius: var(--sq-r);
    }

    .sq-panel-b {
        padding: 12px;
    }

    .sq-table tbody th {
        width: 36%;
    }

    .sq-td-bar {
        grid-template-columns: minmax(28px, 1fr) 3.9em;
        gap: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3 · หน้าตาระดับเดียวกับ budget.php · 14 ต.ค. 2569
   ───────────────────────────────────────────────────────────────────────
   (แทนชุดปรับระยะ .sq-commercial เดิม — ค่าระยะเดิมรวมไว้ในชุดนี้แล้ว)

   ★ ชิ้นส่วนใหม่ใช้ได้ทั้งจอและตอนพิมพ์
       .sq-kpi     แถวตัวชี้วัด "ร้อยละ X (เป้าหมาย Y)" + แถบ + ขีดเป้าหมาย + สถานะ
       .sq-delta   รายการ "เพิ่มจากร้อยละ A เป็นร้อยละ B" + แถบก่อน–หลัง
       .sq-orb / .sq-hero-steps   ลวดลายหัวหน้า (5 ขั้นของระดับคุณภาพ ขั้นที่ถึงแล้วสีทึบ)
   ★ ระยะ เงา ลูกเล่นตอนชี้ อยู่ใน @media screen
   ★ การเคลื่อนไหวอยู่ใน prefers-reduced-motion: no-preference เท่านั้น
       html.sq-js   ตั้งโดยสคริปต์บรรทัดเดียวในหัวหน้า (ไม่มี JS = เห็นทุกอย่างทันที)
       html.sq-ready ตั้งเมื่อไฟล์ js โหลดไม่ได้ภายใน 3 วินาที = เผยทุกอย่าง
       .is-in       js ใส่เมื่อเลื่อนถึง
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ตัวชี้วัดเทียบค่าเป้าหมาย ── */

.sq-prose .sq-kpis {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 8px;
}

.sq-prose .sq-kpis + p {
    margin-top: 1.4em;
}

.sq-list li.sq-kpi,
.sq-list li.sq-kpi + li.sq-kpi {
    margin: 0;
}

.sq-kpi {
    --k: var(--sq-good);
    --kb: var(--sq-good-bar);
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "l v"
        "bar bar"
        "m m";
    align-items: start;
    gap: 4px 14px;
    padding: 9px 14px 8px 16px;
    background: var(--sq-paper);
    border: 1px solid var(--sq-line);
    border-radius: 14px;
    overflow: hidden;
}

.sq-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--k);
}

.sq-kpi.is-miss {
    --k: var(--sq-warn);
    --kb: var(--sq-warn-bar);
    background: color-mix(in srgb, var(--sq-warn-bg) 55%, var(--sq-paper));
    border-color: color-mix(in srgb, var(--sq-warn-bar) 35%, var(--sq-line));
}

.sq-kpi.is-plain {
    --k: var(--sq-brand);
    --kb: var(--sq-bar);
}

.sq-kpi-l {
    grid-area: l;
    min-width: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--sq-ink-2);
}

.sq-kpi-v {
    grid-area: v;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    line-height: 1.1;
}

.sq-kpi-v b {
    font-family: var(--sq-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--k);
    font-variant-numeric: tabular-nums;
}

.sq-kpi-v small {
    font-size: .88rem;
    font-weight: 500;
    color: var(--sq-muted);
}

.sq-kpi-bar {
    grid-area: bar;
    position: relative;
    display: block;
    height: 10px;
    margin: 2px 0;
    background: var(--sq-track);
    border-radius: 999px;
}

.sq-kpi-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--kb) 55%, var(--sq-paper)), var(--kb));
    border-radius: inherit;
    transform-origin: left center;
}

.sq-kpi-goal {
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: var(--at, 0%);
    width: 3px;
    margin-left: -1.5px;
    background: var(--sq-ink);
    border-radius: 2px;
    box-shadow: 0 0 0 2px var(--sq-paper);
}

.sq-kpi-m {
    grid-area: m;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--sq-muted);
}

.sq-kpi-t b {
    font-weight: 600;
    color: var(--sq-ink-2);
}

.sq-kpi-s {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 2px 10px 2px 8px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--k);
    background: color-mix(in srgb, var(--k) 10%, var(--sq-paper));
    border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
    border-radius: 999px;
    white-space: nowrap;
}

/* บนพื้นส้มอ่อนของตัวชี้วัดที่ยังไม่ถึงเป้า ป้ายใช้พื้นขาวให้ตัวอักษรส้มเข้มอ่านชัด (≥ 4.5:1) */
.sq-kpi.is-miss .sq-kpi-s {
    background: var(--sq-paper);
}

/* ตัวชี้วัดที่มีแต่ผล (ไม่มีค่าเป้าหมาย) ไม่มีแถวล่าง */
.sq-kpi-m:empty {
    display: none;
}

/* บรรทัดสั้นที่นำหน้ากลุ่มตัวชี้วัด ("ผลการดำเนินงาน: …", "ผลสัมฤทธิ์ทางวิชาการ") เป็นหัวกลุ่ม */
.sq-prose p:has(+ .sq-kpis) {
    margin-top: 1.6em;
    font-family: var(--sq-display);
    font-weight: 600;
    line-height: 1.7;
    color: var(--sq-ink);
}

.sq-prose p:has(+ .sq-kpis) + .sq-kpis {
    margin-top: .8em;
}

/* สรุปในหัวข้อ: ถึงค่าเป้าหมาย X จาก Y ตัวชี้วัด */
.sq-kpi-sum {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 6px;
    font-family: var(--sq-body);
    font-size: .86rem;
    font-weight: 500;
    color: var(--sq-warn);
    background: var(--sq-warn-bg);
    border: 1px solid color-mix(in srgb, var(--sq-warn-bar) 35%, transparent);
    border-radius: 999px;
}

.sq-kpi-sum.is-all {
    color: var(--sq-good);
    background: var(--sq-good-bg);
    border-color: color-mix(in srgb, var(--sq-good-bar) 35%, transparent);
}

.sq-kpi-sum b {
    font-weight: 700;
}

.sq-kpi-ring {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: conic-gradient(currentColor var(--p, 0%), color-mix(in srgb, currentColor 18%, transparent) 0);
    -webkit-mask: radial-gradient(circle, transparent 6px, #000000 6.5px);
    mask: radial-gradient(circle, transparent 6px, #000000 6.5px);
}

/* ── แถบก่อน–หลัง ── */

.sq-list li.sq-delta {
    --dc: var(--sq-good);
    list-style: none;
    margin: 8px 0 0 -1.3rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "l l"
        "bars v";
    align-items: center;
    gap: 6px 14px;
    padding: 9px 12px;
    background: var(--sq-paper);
    border: 1px solid color-mix(in srgb, var(--c, var(--sq-brand)) 18%, var(--sq-line));
    border-radius: 12px;
}

.sq-list li.sq-delta.is-down {
    --dc: var(--sq-brand);
}

.sq-delta-l {
    grid-area: l;
    min-width: 0;
    line-height: 1.65;
}

.sq-delta-v {
    grid-area: v;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: .84rem;
    color: var(--sq-muted);
}

.sq-delta-v .sq-ic {
    color: var(--sq-muted);
}

.sq-delta-v b {
    font-family: var(--sq-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sq-ink-2);
    font-variant-numeric: tabular-nums;
}

.sq-delta-b b {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dc);
}

.sq-delta-d {
    padding: 1px 8px;
    font-weight: 600;
    color: var(--dc);
    background: color-mix(in srgb, var(--dc) 11%, var(--sq-paper));
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.sq-delta-bars {
    grid-area: bars;
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sq-delta-bar {
    position: relative;
    display: block;
    height: 7px;
    background: var(--sq-track);
    border-radius: 999px;
    overflow: hidden;
}

.sq-delta-bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    background: color-mix(in srgb, var(--sq-muted) 45%, var(--sq-paper));
    border-radius: inherit;
    transform-origin: left center;
}

.sq-delta-bar.is-b::before {
    background: var(--dc);
}

/* ── ลวดลายหัวหน้า ── */

.sq-orb {
    position: absolute;
    border-radius: 50%;
    opacity: .5;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 70%);
}

.sq-orb.o1 { width: 360px; height: 360px; left: -110px; top: -140px; }
.sq-orb.o2 { width: 230px; height: 230px; right: 11%; top: -70px; }
.sq-orb.o3 { width: 170px; height: 170px; left: 36%; bottom: -80px; }

.sq-hero-steps {
    position: absolute;
    right: 3%;
    bottom: 84px;
    width: min(200px, 24vw);
    height: auto;
    overflow: visible;
}

.sq-hero-steps rect {
    fill: rgba(255, 255, 255, .07);
    stroke: rgba(255, 255, 255, .26);
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.sq-hero-steps rect.on {
    fill: rgba(255, 255, 255, .24);
    stroke: rgba(255, 255, 255, .4);
}

/* ═══ จอ ═══════════════════════════════════════════════════════════════ */
@media screen {
    .sq-commercial {
        /* กระชับ (14 ต.ค. 2569 รอบ 2): ระยะในการ์ดและระหว่างส่วนเล็กลงราว 30% */
        --sq-space: clamp(12px, 1.1vw, 18px);
        --sq-inset: clamp(16px, 1.6vw, 24px);
        --sq-r: 18px;
        --sq-rs: 12px;
        --sq-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(30, 58, 138, .07);
        --sq-shadow-float: 0 4px 12px rgba(30, 58, 138, .08), 0 18px 44px rgba(30, 58, 138, .13);
        --sq-shadow-hover: 0 6px 16px rgba(30, 58, 138, .1), 0 24px 52px rgba(30, 58, 138, .16);
        /* ขอบซ้ายขวาของรายงานตรงกับเนื้อหาในแถบเมนูหลัก (.tb1-navbar-container) */
        --sq-gutter: var(--tb1-shell-gutter, 20px);
        --sq-gold: #fde68a;
    }

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

    .sq-commercial .sq-hero {
        padding-top: 22px;
        padding-bottom: 84px;
        background-image:
            radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sq-hero-b) 80%, #60a5fa) 0%, transparent 55%),
            radial-gradient(90% 90% at 100% 20%, color-mix(in srgb, var(--sq-hero-c) 85%, #38bdf8) 0%, transparent 50%),
            linear-gradient(135deg, var(--sq-hero-a) 0%, var(--sq-hero-b) 52%, var(--sq-hero-c) 100%);
    }

    .sq-commercial .sq-hero.is-plain {
        padding-bottom: 28px;
    }

    .sq-commercial .sq-hero-in {
        max-width: 72rem;
    }

    .sq-commercial .sq-hero-fx {
        background-image: none;
        overflow: hidden;
    }

    .sq-commercial .sq-eyebrow {
        padding: 4px 14px;
        font-size: .84rem;
        font-weight: 500;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .sq-commercial .sq-title {
        margin-top: 10px;
        font-size: clamp(1.75rem, 3.6vw, 2.55rem);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.005em;
        text-shadow: 0 2px 18px rgba(15, 23, 42, .32);
    }

    .sq-commercial .sq-title-y {
        margin-top: 2px;
        font-size: .58em;
        font-weight: 500;
        color: rgba(255, 255, 255, .92);
        text-shadow: none;
    }

    .sq-commercial .sq-title-y strong {
        font-weight: 700;
        color: var(--sq-gold);
    }

    .sq-commercial .sq-lead {
        margin-top: 8px;
        max-width: 50rem;
        font-size: .98rem;
        line-height: 1.7;
        color: rgba(255, 255, 255, .9);
    }

    .sq-hero-meta {
        list-style: none;
        margin-top: 12px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 8px;
    }

    .sq-hero-meta li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 12px 3px 10px;
        font-size: .82rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, .95);
        background: rgba(15, 23, 42, .26);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 999px;
    }

    .sq-hero-meta .sq-ic {
        color: var(--sq-gold);
    }

    /* ปีการศึกษา: แถบเลือกแบบเดียวกับ budget.php */
    .sq-commercial .sq-years {
        margin-top: 14px;
        flex-direction: row;
        gap: 6px 12px;
    }

    .sq-commercial .sq-years-l {
        margin: 0;
        font-size: .84rem;
        letter-spacing: .02em;
        color: rgba(255, 255, 255, .78);
    }

    .sq-years-seg {
        max-width: 100%;
        display: inline-flex;
        gap: 4px;
        padding: 4px;
        overflow-x: auto;
        scrollbar-width: none;
        background: rgba(15, 23, 42, .32);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 999px;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, .25);
    }

    .sq-years-seg::-webkit-scrollbar {
        display: none;
    }

    .sq-commercial .sq-chip {
        flex: none;
        min-width: 60px;
        min-height: 36px;
        padding: 4px 14px;
        font-weight: 600;
        background: transparent;
        border: 0;
        transition: background-color .2s var(--sq-ease), color .2s var(--sq-ease), box-shadow .2s var(--sq-ease);
    }

    .sq-commercial .sq-chip:hover {
        background: rgba(255, 255, 255, .16);
    }

    .sq-commercial .sq-chip[aria-current="page"] {
        color: #1e3a8a;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .28);
    }

    .sq-commercial .sq-stamp {
        margin-top: 8px;
        gap: 6px 12px;
        font-size: .86rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, .86);
    }

    .sq-commercial .sq-stamp-live {
        padding: 2px 10px;
    }

    .sq-commercial .sq-pdf {
        margin-top: 12px;
        min-height: 46px;
        padding: 6px 8px 6px 8px;
        gap: 8px 12px;
        box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .55), 0 0 0 6px rgba(255, 255, 255, .1);
    }

    .sq-commercial .sq-pdf > .sq-ic {
        width: 32px;
        height: 32px;
        padding: 7px;
        color: #ffffff;
        background: linear-gradient(135deg, #1d4ed8, #0284c7);
        border-radius: 50%;
    }

    .sq-commercial .sq-pdf-m {
        margin-right: 8px;
    }

    .sq-commercial .sq-pdf:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px -10px rgba(15, 23, 42, .6), 0 0 0 8px rgba(255, 255, 255, .14);
    }

    /* ── ระดับคุณภาพ ── */

    .sq-commercial .sq-levels {
        margin-top: -62px;
        gap: 12px;
    }

    .sq-commercial .sq-lvcard {
        --lvc: var(--sq-brand);
        padding: 14px 16px 12px;
        gap: 6px;
        border-color: var(--sq-line);
        box-shadow: var(--sq-shadow-float);
        transition: transform .3s var(--sq-ease), box-shadow .3s var(--sq-ease), border-color .3s var(--sq-ease);
    }

    .sq-commercial .sq-lvcard.is-l1 { --lvc: var(--sq-l1); }
    .sq-commercial .sq-lvcard.is-l2 { --lvc: var(--sq-l2); }
    .sq-commercial .sq-lvcard.is-l3 { --lvc: var(--sq-l3); }
    .sq-commercial .sq-lvcard.is-l4 { --lvc: var(--sq-l4); }
    .sq-commercial .sq-lvcard.is-l5 { --lvc: var(--sq-l5); }

    .sq-commercial .sq-lvcard::before {
        height: 5px;
        background: linear-gradient(90deg, var(--lvc), color-mix(in srgb, var(--lvc) 45%, #38bdf8));
    }

    .sq-commercial .sq-lvcard.is-overall {
        background:
            radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--lvc) 9%, transparent) 0%, transparent 60%),
            var(--sq-paper);
    }

    .sq-commercial .sq-lvcard:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--lvc) 35%, var(--sq-line));
        box-shadow: var(--sq-shadow-hover);
    }

    .sq-lvcard-top {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .sq-lvcard-ic {
        flex: none;
        width: 30px;
        height: 30px;
        display: inline-grid;
        place-items: center;
        color: var(--lvc);
        background: color-mix(in srgb, var(--lvc) 12%, var(--sq-paper));
        border-radius: 11px;
    }

    .sq-commercial .sq-lvcard-k {
        font-size: .86rem;
        font-weight: 600;
        line-height: 1.45;
    }

    .sq-commercial .sq-lvcard-t {
        line-height: 1.55;
        min-height: 3.1em;
    }

    .sq-commercial .sq-lvcard.is-overall .sq-lvcard-t {
        min-height: 0;
    }

    .sq-commercial .sq-lvcard .sq-lv {
        padding-top: 4px;
    }

    .sq-commercial .sq-lv-name {
        font-weight: 700;
    }

    .sq-lvcard-go {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 0;
        padding-top: 7px;
        font-size: .8rem;
        font-weight: 500;
        color: var(--sq-muted);
        border-top: 1px dashed var(--sq-line);
        transition: color .25s var(--sq-ease);
    }

    .sq-lvcard-go .sq-ic {
        transition: transform .25s var(--sq-ease);
    }

    .sq-commercial .sq-lvcard:hover .sq-lvcard-go,
    .sq-commercial .sq-lvcard:focus-visible .sq-lvcard-go {
        color: var(--sq-brand);
    }

    .sq-commercial .sq-lvcard:hover .sq-lvcard-go .sq-ic {
        transform: translateX(4px);
    }

    /* ── ข้อมูลพื้นฐาน (แบบการ์ดตัวเลขของ budget.php) ── */

    .sq-commercial .sq-facts {
        margin-top: var(--sq-space);
    }

    .sq-commercial .sq-facts-l {
        gap: 12px;
    }

    .sq-commercial .sq-fact {
        --k: #2563eb;
        position: relative;
        overflow: hidden;
        min-width: 0;
        padding: 12px 16px;
        row-gap: 2px;
        column-gap: 12px;
        border-radius: 16px;
        box-shadow: var(--sq-shadow);
        transition: transform .3s var(--sq-ease), box-shadow .3s var(--sq-ease);
    }

    .sq-commercial .sq-fact:nth-child(2) { --k: #0d9488; }
    .sq-commercial .sq-fact:nth-child(3) { --k: #7c3aed; }
    .sq-commercial .sq-fact:nth-child(4) { --k: #ea580c; }

    .sq-commercial .sq-fact::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: var(--k);
    }

    .sq-commercial .sq-fact:hover {
        transform: translateY(-2px);
        box-shadow: var(--sq-shadow-float);
    }

    .sq-commercial .sq-fact .sq-ic {
        width: 38px;
        height: 38px;
        padding: 8px;
        color: #ffffff;
        background: var(--k);
        border-radius: 13px;
        box-shadow: 0 8px 18px -10px var(--k);
    }

    .sq-commercial .sq-fact b {
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .sq-commercial .sq-facts-src {
        margin-top: 6px;
        line-height: 1.6;
    }

    /* ── แถบหัวข้อของรายงาน: ติดใต้แถบเมนูเต็มความกว้างจอ + เส้นความคืบหน้าการอ่าน ── */

    .sq-commercial .sq-nav {
        top: var(--sq-nav-h, 0px);
        margin-top: 16px;
        padding: 6px 0;
        gap: 10px;
        background: color-mix(in srgb, var(--sq-page) 94%, transparent);
        border: 0;
        border-radius: 0;
        /* full-bleed background + bottom rule without leaving the content column
           (box-shadow never widens the page; an absolutely placed wide line would) */
        box-shadow:
            0 0 0 100vmax color-mix(in srgb, var(--sq-page) 94%, transparent),
            0 1px 0 100vmax var(--sq-line);
        clip-path: inset(0 -100vmax -1px);
    }

    .sq-commercial .sq-nav::before {
        content: "";
        position: absolute;
        z-index: 1;
        left: 0;
        bottom: 0;
        height: 3px;
        width: var(--sq-read, 0%);
        background: linear-gradient(90deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent, #0ea5e9));
        border-radius: 0 3px 3px 0;
        transition: width .15s linear;
    }

    .sq-commercial .sq-nav-in {
        gap: 6px;
        scroll-padding-inline: 8px;
    }

    .sq-commercial .sq-nav-a {
        min-height: 38px;
        padding: 6px 16px;
        font-weight: 600;
        background: var(--sq-paper);
        border: 1px solid var(--sq-line-bold);
        transition: background-color .25s var(--sq-ease), color .25s var(--sq-ease), border-color .25s var(--sq-ease), box-shadow .25s var(--sq-ease);
    }

    .sq-commercial .sq-nav-a:hover {
        border-color: var(--sq-brand);
    }

    .sq-commercial .sq-nav-a[aria-current="location"] {
        color: #ffffff;
        background: #1e3a8a;
        border-color: #1e3a8a;
        box-shadow: 0 6px 16px -8px rgba(30, 58, 138, .8);
    }

    .sq-commercial .sq-btn {
        min-height: 38px;
        padding: 6px 16px;
    }

    /* ── ส่วนของรายงาน: หัวเป็นแถบไล่เฉดเต็มความกว้างการ์ด ── */

    .sq-commercial .sq-sec {
        position: relative;
        margin-top: 22px;
        padding: var(--sq-inset);
        border-radius: 22px;
        overflow: hidden;
    }

    .sq-commercial .sq-sec-h {
        position: relative;
        gap: 12px 18px;
        margin: calc(-1 * var(--sq-inset)) calc(-1 * var(--sq-inset)) 18px;
        padding: 14px var(--sq-inset);
        background:
            radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--tb1-accent, #0ea5e9) 10%, transparent) 0%, transparent 60%),
            linear-gradient(180deg, var(--sq-brand-soft) 0%, color-mix(in srgb, var(--sq-brand-soft) 35%, var(--sq-paper)) 100%);
        border-bottom: 1px solid var(--sq-brand-line);
    }

    .sq-commercial .sq-sec-no {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        font-weight: 700;
        border-radius: 18px;
        box-shadow: 0 14px 28px -14px rgba(29, 78, 216, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    .sq-commercial .sq-sec-k {
        display: inline-block;
        padding: 0 10px;
        font-size: .78rem;
        font-weight: 600;
        background: var(--sq-paper);
        border: 1px solid var(--sq-brand-line);
        border-radius: 999px;
    }

    .sq-commercial .sq-sec-t {
        margin-top: 2px;
        font-size: clamp(1.25rem, 2vw, 1.6rem);
        font-weight: 700;
        line-height: 1.35;
        text-wrap: pretty;
    }

    .sq-commercial .sq-sec-stamp {
        margin-top: 0;
        line-height: 1.6;
    }

    .sq-commercial .sq-sec-lv {
        gap: 6px;
        padding: 8px 14px;
        background: var(--sq-paper);
        border: 1px solid var(--sq-line);
        border-radius: 16px;
        box-shadow: var(--sq-shadow);
    }

    .sq-commercial .sq-block + .sq-block {
        margin-top: 22px;
    }

    /* หัวข้อย่อย: ไอคอนในกล่อง + เส้นยาวถึงขอบ */
    .sq-commercial .sq-sub {
        flex-wrap: wrap;
        gap: 8px 10px;
        margin: 20px 0 10px;
        font-size: 1.08rem;
        font-weight: 600;
    }

    .sq-commercial .sq-sub > .sq-ic {
        width: 30px;
        height: 30px;
        padding: 6px;
        background: var(--sq-brand-soft);
        border-radius: 10px;
    }

    .sq-commercial .sq-sub::after {
        content: "";
        flex: 1 1 40px;
        height: 1px;
        background: linear-gradient(90deg, var(--sq-line-bold), transparent);
    }

    .sq-commercial .sq-sub.is-sys {
        margin-top: 0;
        padding: 6px 12px;
        border: 1px solid var(--sq-brand-line);
        border-radius: 14px;
    }

    .sq-commercial .sq-sub.is-sys > .sq-ic {
        background: var(--sq-paper);
    }

    .sq-commercial .sq-sub.is-sys::after {
        content: none;
    }

    .sq-commercial .sq-prose {
        line-height: 1.8;
    }

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

    /* ย่อหน้ากว้างพออ่านสบาย ส่วนแถบตัวชี้วัดใช้เต็มความกว้าง */
    .sq-commercial .sq-prose.is-lead {
        max-width: none;
    }

    .sq-commercial .sq-sec:not(#sq-summary) .sq-prose.is-lead > p {
        max-width: 60rem;
    }

    .sq-commercial #sq-summary > .sq-prose.is-lead {
        font-size: 1.02rem;
    }

    .sq-commercial #sq-summary > .sq-prose.is-lead > p:first-child::first-letter {
        font-weight: 600;
        color: var(--sq-brand);
    }

    .sq-commercial .sq-list li + li {
        margin-top: .35em;
    }

    /* ── การ์ดข้อความ ── */

    .sq-commercial .sq-cards {
        margin-top: 16px;
        gap: var(--sq-space);
    }

    .sq-commercial .sq-card {
        padding: var(--sq-space);
        border-top-width: 5px;
        border-radius: 16px;
        transition: transform .3s var(--sq-ease), box-shadow .3s var(--sq-ease);
    }

    .sq-commercial .sq-card:hover {
        box-shadow: var(--sq-shadow);
    }

    .sq-commercial .sq-card-t {
        margin-bottom: 8px;
        gap: 8px;
        font-size: 1.02rem;
        line-height: 1.5;
    }

    .sq-commercial .sq-card-t > .sq-ic {
        width: 28px;
        height: 28px;
        padding: 5px;
        color: var(--c);
        background: var(--sq-paper);
        border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
        border-radius: 10px;
    }

    .sq-commercial .sq-card .sq-prose {
        line-height: 1.75;
    }

    /* หัวรายการในการ์ด: จุดเด่น = เครื่องหมายถูก · แผน = เลขในวงกลม · อื่น ๆ = จุดสีของการ์ด */
    .sq-commercial .sq-card .sq-list {
        padding-left: 0;
        list-style: none;
    }

    .sq-commercial .sq-card .sq-list > li:not(.sq-delta) {
        position: relative;
        padding-left: 30px;
    }

    .sq-commercial .sq-card ul.sq-list > li:not(.sq-delta)::before {
        content: "";
        position: absolute;
        left: 6px;
        top: .72em;
        width: 9px;
        height: 9px;
        background: var(--c);
        border-radius: 3px;
        transform: rotate(45deg);
    }

    .sq-commercial .sq-card.is-good ul.sq-list > li:not(.sq-delta)::before {
        left: 0;
        top: .38em;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transform: none;
        background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.4 2.9 2.9 6-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
    }

    .sq-commercial .sq-card ol.sq-list {
        counter-reset: sq-n;
    }

    .sq-commercial .sq-card ol.sq-list > li {
        counter-increment: sq-n;
        padding-left: 36px;
    }

    .sq-commercial .sq-card ol.sq-list > li::before {
        content: counter(sq-n);
        position: absolute;
        left: 0;
        top: .3em;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        font-family: var(--sq-display);
        font-size: .8rem;
        font-weight: 600;
        line-height: 1;
        color: #ffffff;
        background: var(--c);
        border-radius: 50%;
    }

    .sq-commercial .sq-card .sq-list li.sq-delta {
        margin-left: 0;
        padding-left: 14px;
    }

    .sq-commercial .sq-card .sq-list .sq-list {
        margin-top: .4em;
    }

    .sq-commercial .sq-card .sq-foot {
        margin-top: 10px;
    }

    /* ── หลักฐานอ้างอิง: รายการเอกสาร ── */

    .sq-commercial .sq-evidence .sq-list {
        list-style: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
        gap: 8px;
    }

    .sq-commercial .sq-evidence .sq-list li,
    .sq-commercial .sq-evidence .sq-list li + li {
        position: relative;
        margin: 0;
        padding: 7px 12px 7px 40px;
        font-size: .93rem;
        line-height: 1.6;
        background: var(--sq-paper-alt);
        border: 1px solid var(--sq-line);
        border-radius: 12px;
    }

    .sq-commercial .sq-evidence .sq-list li::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 12px;
        width: 22px;
        height: 22px;
        background: var(--sq-brand);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8Z'/%3E%3Cpath d='M14 3.5V8h4.5M9 13h6M9 16.5h4'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8Z'/%3E%3Cpath d='M14 3.5V8h4.5M9 13h6M9 16.5h4'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* ── แผงตัวชี้วัดจากระบบ ── */

    .sq-commercial .sq-panels {
        gap: var(--sq-space);
    }

    .sq-commercial .sq-panel {
        border-radius: 18px;
        box-shadow: var(--sq-shadow);
        transition: box-shadow .3s var(--sq-ease), border-color .3s var(--sq-ease);
    }

    .sq-commercial .sq-panel:hover {
        border-color: var(--sq-brand-line);
        box-shadow: var(--sq-shadow-float);
    }

    .sq-commercial .sq-panel-h {
        padding: 12px var(--sq-space);
        gap: 12px;
        background: linear-gradient(180deg, var(--sq-paper-alt), color-mix(in srgb, var(--sq-paper-alt) 40%, var(--sq-paper)));
    }

    .sq-commercial .sq-panel-ic {
        width: 36px;
        height: 36px;
        color: #ffffff;
        background: linear-gradient(135deg, var(--tb1-banner-1, #1d4ed8), var(--tb1-accent-strong, #0284c7));
        border: 0;
        border-radius: 12px;
        box-shadow: 0 8px 18px -10px rgba(29, 78, 216, .9);
    }

    .sq-commercial .sq-panel-t {
        font-size: 1.02rem;
        line-height: 1.45;
    }

    .sq-commercial .sq-panel-s {
        margin-top: 0;
        line-height: 1.55;
    }

    .sq-commercial .sq-panel-b {
        padding: var(--sq-space);
    }

    .sq-commercial .sq-terms {
        gap: 16px;
    }

    .sq-commercial .sq-panel:not(.is-wide) .sq-term + .sq-term {
        padding-top: 16px;
    }

    .sq-commercial .sq-panel.is-wide .sq-term + .sq-term {
        padding-left: 18px;
    }

    .sq-commercial .sq-term-t {
        margin-bottom: 8px;
        line-height: 1.55;
    }

    .sq-commercial .sq-bigs {
        gap: 10px 24px;
        margin-bottom: 12px;
    }

    .sq-commercial .sq-big b {
        font-weight: 700;
    }

    .sq-commercial .sq-big-l {
        margin-top: 2px;
        line-height: 1.5;
    }

    .sq-commercial .sq-table :is(th, td) {
        padding: 8px 8px;
    }

    .sq-commercial .sq-table thead th {
        padding-top: 0;
        padding-bottom: 8px;
        line-height: 1.5;
    }

    .sq-commercial .sq-table tbody tr {
        transition: background-color .2s var(--sq-ease);
    }

    .sq-commercial .sq-table tbody tr:hover {
        background: var(--sq-paper-alt);
    }

    .sq-commercial .sq-table tbody th {
        line-height: 1.55;
    }

    .sq-commercial .sq-track {
        height: 10px;
    }

    .sq-commercial .sq-bar {
        background: linear-gradient(90deg, color-mix(in srgb, var(--sq-bar) 60%, var(--sq-paper)), var(--sq-bar));
    }

    .sq-commercial .sq-bar.is-good {
        background: linear-gradient(90deg, color-mix(in srgb, var(--sq-good-bar) 55%, var(--sq-paper)), var(--sq-good-bar));
    }

    .sq-commercial .sq-foot {
        margin-top: 12px;
        padding-top: 8px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .sq-commercial .sq-state {
        padding: 12px 14px;
        gap: 10px;
        border-radius: 14px;
    }

    .sq-commercial .sq-notext {
        align-items: flex-start;
        padding: 10px 14px;
        gap: 10px;
        line-height: 1.7;
    }

    .sq-commercial .sq-notext .sq-ic {
        margin-top: 4px;
    }

    .sq-commercial .sq-more {
        margin-top: 12px;
    }

    .sq-commercial .sq-more summary {
        min-height: 36px;
        padding-block: 6px;
        line-height: 1.6;
    }

    .sq-commercial .sq-mini :is(th, td) {
        padding: 7px 8px;
    }

    .sq-commercial .sq-editbar {
        margin-top: 16px;
        padding: 10px 14px;
        gap: 10px;
        border-radius: 16px;
    }

    .sq-commercial .sq-problem {
        padding: var(--sq-inset);
    }

    /* ข้อความแจ้งต้องไม่กินพื้นที่ของการ์ดที่ลอยทับหัวหน้า */
    .sq-commercial .sq-body > .sq-notice {
        margin-top: 16px;
        padding: 10px 14px;
    }

    .sq-commercial .sq-body > .sq-notice + .sq-levels {
        margin-top: 16px;
    }

    /* ── ปุ่มกลับขึ้นด้านบน (สร้างโดย js) ── */

    .sq-top {
        position: fixed;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        z-index: 40;
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #ffffff;
        background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
        border: 0;
        border-radius: 50%;
        box-shadow: 0 12px 26px -10px rgba(30, 58, 138, .7);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity .3s var(--sq-ease), transform .3s var(--sq-ease), visibility .3s;
    }

    .sq-top.is-on {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .sq-top:hover {
        transform: translateY(-2px);
    }

    .sq-top:focus-visible {
        outline: 3px solid #fde68a;
        outline-offset: 3px;
    }

    .sq-top .sq-ic {
        transform: rotate(0deg);
    }
}

/* ── โหมดมืด ── */
@media screen {
    :is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .sq-commercial {
        --sq-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .28);
        --sq-shadow-float: 0 6px 18px rgba(0, 0, 0, .35), 0 24px 50px rgba(0, 0, 0, .4);
        --sq-shadow-hover: 0 8px 22px rgba(0, 0, 0, .4), 0 28px 60px rgba(0, 0, 0, .45);
    }

    :is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .sq-commercial .sq-nav-a[aria-current="location"] {
        color: #0a1322;
        background: #93c5fd;
        border-color: #93c5fd;
    }

    :is(html.dark, html.dark-mode, html[data-theme="dark"], body.dark-mode, body[data-theme="dark"]) .sq-commercial .sq-fact .sq-ic {
        color: #0a1322;
        background: color-mix(in srgb, var(--k) 55%, #ffffff);
    }
}

/* ═══ จอเล็ก ══════════════════════════════════════════════════════════ */
@media screen and (max-width: 1080px) {
    .sq-hero-steps {
        width: min(190px, 24vw);
        opacity: .7;
    }

    /* แท็บเล็ต: การ์ดภาพรวมเต็มแถว ป้าย · ระดับ · ลิงก์ เรียงในบรรทัดเดียว */
    .sq-commercial .sq-lvcard.is-overall {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px 28px;
    }

    .sq-commercial .sq-lvcard.is-overall .sq-lv {
        margin: 0;
        padding: 0;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .sq-commercial .sq-lvcard.is-overall .sq-lvcard-go {
        margin: 0;
        padding: 0;
        border-top: 0;
    }

    /* min(100%, …) of an auto-sized row would be 0: give the meter its own width */
    .sq-commercial .sq-lvcard.is-overall .sq-meter {
        flex: none;
        width: 150px;
    }
}

.sq-lv-name {
    white-space: nowrap;
}

@media screen and (max-width: 760px) {
    .sq-commercial { --sq-gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }

    .sq-hero-steps,
    .sq-orb.o3 {
        display: none;
    }

    .sq-eyebrow-s {
        display: none;
    }

    .sq-commercial .sq-hero {
        padding-top: 16px;
        padding-bottom: 72px;
    }

    .sq-commercial .sq-eyebrow {
        padding: 5px 12px;
        align-items: flex-start;
        line-height: 1.7;
        text-align: left;
    }

    .sq-commercial .sq-eyebrow .sq-ic {
        margin-top: 3px;
    }

    .sq-commercial .sq-title {
        font-size: clamp(1.6rem, 6.4vw, 2.1rem);
    }

    .sq-commercial .sq-lead {
        font-size: .94rem;
        line-height: 1.65;
    }

    .sq-hero-meta li {
        font-size: .78rem;
        padding: 2px 10px 2px 9px;
    }

    .sq-commercial .sq-chip {
        min-width: 52px;
        min-height: 36px;
        padding: 3px 10px;
    }

    .sq-commercial .sq-pdf {
        width: 100%;
        max-width: 26rem;
        justify-content: flex-start;
    }

    .sq-commercial .sq-pdf-m {
        margin-left: auto;
    }

    /* ระดับคุณภาพ: ภาพรวมเต็มแถว มาตรฐานเป็นแถวรายการ ชื่อเต็ม อ่านได้โดยไม่ต้องเดา */
    .sq-commercial .sq-levels {
        margin-top: -52px;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .sq-commercial .sq-levels .sq-lvcard:last-child {
        grid-column: auto;
    }

    .sq-commercial .sq-lvcard,
    .sq-commercial .sq-lvcard.is-overall {
        grid-column: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "top lv"
            "t lv";
        align-items: center;
        gap: 0 12px;
        padding: 11px 14px;
    }

    .sq-commercial .sq-lvcard .sq-lvcard-top { grid-area: top; }

    .sq-commercial .sq-lvcard .sq-lvcard-t,
    .sq-commercial .sq-lvcard.is-overall .sq-lvcard-t {
        grid-area: t;
        display: block;
        min-height: 0;
        padding-left: 40px;
        font-size: .84rem;
        line-height: 1.5;
    }

    .sq-commercial .sq-lvcard .sq-lv,
    .sq-commercial .sq-lvcard.is-overall .sq-lv {
        grid-area: lv;
        margin: 0;
        padding: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .sq-commercial .sq-lvcard .sq-meter {
        width: 92px;
    }

    .sq-commercial .sq-lvcard .sq-lv-name {
        font-size: 1.08rem;
    }

    .sq-commercial .sq-lvcard.is-overall .sq-lv-name {
        font-size: 1.45rem;
    }

    .sq-commercial .sq-lvcard.is-overall .sq-meter {
        width: 120px;
    }

    .sq-lvcard-go {
        display: none;
    }

    .sq-commercial .sq-facts-l {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sq-commercial .sq-fact {
        padding: 11px 12px;
        column-gap: 10px;
    }

    .sq-commercial .sq-fact .sq-ic {
        width: 36px;
        height: 36px;
        padding: 8px;
    }

    .sq-commercial .sq-fact b {
        font-size: 1.35rem;
    }

    .sq-commercial .sq-nav {
        gap: 8px;
    }

    .sq-commercial .sq-nav-a {
        padding-inline: 14px;
    }

    .sq-commercial .sq-print {
        min-width: 44px;
        padding-inline: 12px;
    }

    .sq-commercial .sq-sec {
        margin-top: 18px;
        border-radius: 18px;
    }

    .sq-commercial .sq-sec-h {
        gap: 10px 12px;
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 14px;
    }

    .sq-commercial .sq-sec-no {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
        border-radius: 13px;
    }

    .sq-commercial .sq-sec-lv {
        padding: 6px 12px;
    }

    .sq-commercial .sq-sub {
        margin-top: 18px;
        font-size: 1.02rem;
    }

    .sq-commercial .sq-sub::after {
        display: none;
    }

    .sq-kpi {
        padding: 8px 12px 8px 14px;
    }

    .sq-kpi-v b {
        font-size: 1.3rem;
    }

    .sq-kpi-s {
        margin-left: 0;
    }

    .sq-list li.sq-delta {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "l"
            "v"
            "bars";
    }

    .sq-commercial .sq-terms {
        grid-template-columns: 1fr;
    }

    .sq-commercial .sq-panel.is-wide .sq-term + .sq-term {
        padding: 14px 0 0;
        border-left: 0;
    }

    .sq-commercial .sq-panel-h {
        padding: 10px 12px;
        gap: 10px;
    }

    .sq-commercial .sq-table :is(th, td) {
        padding-inline: 4px;
    }

    .sq-commercial .sq-table.is-compact tbody th {
        width: auto;
    }

    .sq-commercial .sq-mini {
        width: 100%;
        table-layout: fixed;
    }

    .sq-commercial .sq-mini :is(th, td) {
        padding: 7px 4px;
        overflow-wrap: anywhere;
    }

    .sq-top {
        width: 44px;
        height: 44px;
    }
}

@media screen and (max-width: 420px) {
    .sq-commercial { --sq-inset: 16px; }

    /* icon stays beside the number: a stacked tile was twice as tall */
    .sq-commercial .sq-fact {
        padding: 10px;
        column-gap: 8px;
    }

    .sq-commercial .sq-fact .sq-ic {
        width: 32px;
        height: 32px;
        padding: 7px;
        border-radius: 10px;
    }

    .sq-commercial .sq-fact b {
        font-size: 1.22rem;
    }

    .sq-commercial .sq-fact span {
        font-size: .8rem;
    }

    .sq-commercial .sq-panel-b {
        padding: 12px;
    }

    .sq-commercial .sq-state {
        padding: 10px 12px;
    }

    .sq-commercial .sq-sec-t {
        font-size: 1.24rem;
    }

    .sq-commercial .sq-chip {
        min-width: 48px;
        padding: 4px 8px;
    }

    .sq-commercial .sq-meter {
        max-width: 100%;
    }

    .sq-commercial .sq-sec-h {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

/* ═══ การเคลื่อนไหว (ผู้ใช้ไม่ได้ตั้งลดการเคลื่อนไหว) ═══════════════════ */
@keyframes sqUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes sqFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(26px, 18px, 0) scale(1.06); }
}

@keyframes sqRise {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes sqPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(253, 230, 138, .45); }
    50% { box-shadow: 0 0 0 6px rgba(253, 230, 138, 0); }
}

@media screen and (prefers-reduced-motion: no-preference) {
    html:has(body.sq-page) {
        scroll-behavior: smooth;
    }

    .sq-orb.o1 { animation: sqFloat 16s ease-in-out infinite alternate; }
    .sq-orb.o2 { animation: sqFloat 20s ease-in-out -6s infinite alternate-reverse; }
    .sq-orb.o3 { animation: sqFloat 24s ease-in-out -3s infinite alternate; }

    .sq-stamp-live {
        animation: sqPulse 2.4s ease-in-out infinite;
    }

    .sq-js .sq-hero-steps rect {
        animation: sqRise 1s var(--sq-ease) backwards;
        animation-delay: calc(var(--i, 0) * 110ms + .25s);
    }

    .sq-js .sq-hero-in > * {
        /* backwards, not both: after the entrance the element's own :hover transform must work again */
        animation: sqUp .8s var(--sq-ease) backwards;
    }

    .sq-js .sq-hero-in > :nth-child(2) { animation-delay: .07s; }
    .sq-js .sq-hero-in > :nth-child(3) { animation-delay: .14s; }
    .sq-js .sq-hero-in > :nth-child(4) { animation-delay: .21s; }
    .sq-js .sq-hero-in > :nth-child(5) { animation-delay: .28s; }
    .sq-js .sq-hero-in > :nth-child(6) { animation-delay: .35s; }
    .sq-js .sq-hero-in > :nth-child(7) { animation-delay: .42s; }

    /* เผยเมื่อเลื่อนถึง: js ใส่ .is-in · sq-ready = เผยทั้งหมด */
    .sq-js :is(.sq-lvcard, .sq-fact, .sq-editbar, .sq-sec-h, .sq-sub, .sq-sec .sq-prose.is-lead > p, .sq-kpi, .sq-card, .sq-panel, .sq-evidence, .sq-notext) {
        transition-property: opacity, transform, box-shadow, border-color, background-color;
        transition-duration: .7s, .7s, .3s, .3s, .3s;
        transition-timing-function: var(--sq-ease);
        transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s, 0s;
    }

    .sq-js:not(.sq-ready) :is(.sq-lvcard, .sq-fact, .sq-editbar, .sq-sec-h, .sq-sub, .sq-sec .sq-prose.is-lead > p, .sq-kpi, .sq-card, .sq-panel, .sq-evidence, .sq-notext):not(.is-in) {
        opacity: 0;
        transform: translateY(20px);
    }

    /* แถบทุกชนิดค่อย ๆ ยืดเมื่อกล่องของมันเผย (pseudo-element ใส่ใน :is() ไม่ได้ จึงแยกกฎ) */
    .sq-js .sq-kpi-fill,
    .sq-js .sq-panel .sq-bar,
    .sq-js .sq-panel .sq-prog-bar {
        transform-origin: left center;
        transition: transform 1.1s var(--sq-ease);
        transition-delay: calc(var(--i, 0) * 80ms + .2s);
    }

    .sq-js:not(.sq-ready) .sq-kpi:not(.is-in) .sq-kpi-fill,
    .sq-js:not(.sq-ready) .sq-panel:not(.is-in) .sq-bar,
    .sq-js:not(.sq-ready) .sq-panel:not(.is-in) .sq-prog-bar {
        transform: scaleX(0);
    }

    .sq-js .sq-delta-bar::before {
        transition: transform 1.1s var(--sq-ease) .25s;
    }

    .sq-js .sq-delta-bar.is-b::before {
        transition-delay: .55s;
    }

    .sq-js:not(.sq-ready) .sq-card:not(.is-in) .sq-delta-bar::before {
        transform: scaleX(0);
    }

    /* มาตรวัด 5 ช่องของการ์ดระดับเติมทีละช่อง */
    .sq-js .sq-lvcard .sq-meter i.on {
        transition: transform .5s var(--sq-ease);
        transform-origin: left center;
    }

    .sq-js .sq-lvcard .sq-meter i.on:nth-child(2) { transition-delay: .08s; }
    .sq-js .sq-lvcard .sq-meter i.on:nth-child(3) { transition-delay: .16s; }
    .sq-js .sq-lvcard .sq-meter i.on:nth-child(4) { transition-delay: .24s; }
    .sq-js .sq-lvcard .sq-meter i.on:nth-child(5) { transition-delay: .32s; }

    .sq-js:not(.sq-ready) .sq-lvcard:not(.is-in) .sq-meter i.on {
        transform: scaleX(0);
    }
}

/* ── คอนทราสต์สูง: ชิ้นส่วนใหม่ ── */
html.tb1-contrast-high :is(.sq-orb, .sq-hero-steps) {
    display: none;
}

html.tb1-contrast-high :is(.sq-hero-meta li, .sq-years-seg, .sq-lvcard-ic, .sq-kpi-s, .sq-kpi-sum, .sq-delta-d, .sq-sec-k) {
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .sq-hero-meta .sq-ic,
html.tb1-contrast-high .sq-title-y strong {
    color: #facc15;
}

html.tb1-contrast-high :is(.sq-kpi, .sq-list li.sq-delta, .sq-panel-ic, .sq-sub > .sq-ic, .sq-card-t > .sq-ic) {
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
    box-shadow: none;
}

html.tb1-contrast-high .sq-kpi::before {
    background: #ffffff;
}

html.tb1-contrast-high .sq-kpi.is-miss::before {
    background: #facc15;
}

html.tb1-contrast-high .sq-kpi-fill,
html.tb1-contrast-high .sq-delta-bar.is-b::before {
    background: #ffffff;
}

html.tb1-contrast-high .sq-kpi-goal {
    background: #facc15;
    box-shadow: 0 0 0 2px #000000;
}

html.tb1-contrast-high .sq-sec-h {
    background: #000000;
}

html.tb1-contrast-high .sq-nav::before {
    background: #facc15;
}

html.tb1-contrast-high .sq-commercial .sq-nav {
    box-shadow: 0 0 0 100vmax #000000, 0 1px 0 100vmax #ffffff;
}

html.tb1-contrast-high .sq-commercial .sq-card.is-good ul.sq-list > li::before {
    background-color: #000000;
    box-shadow: inset 0 0 0 1.5px #ffffff;
}

html.tb1-contrast-high .sq-commercial .sq-card ol.sq-list > li::before {
    color: #000000;
}

html.tb1-contrast-high .sq-top {
    color: #facc15;
    background: #000000;
    border: 2px solid #facc15;
    box-shadow: none;
}

/* ── พิมพ์: ชิ้นส่วนใหม่ ── */
@media print {
    .sq-hero-meta {
        list-style: none;
        margin-top: 6px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 2px 16px;
        font-size: 9pt;
    }

    .sq-hero-meta li {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .sq-title-y strong {
        color: inherit;
    }

    .sq-lvcard-top {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .sq-lvcard-ic,
    .sq-lvcard-go,
    .sq-top {
        display: none !important;
    }

    .sq-kpi,
    .sq-list li.sq-delta {
        break-inside: avoid;
    }

    .sq-prose .sq-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .sq-kpi {
        padding: 6px 8px 6px 10px;
    }

    .sq-kpi-v b {
        font-size: 12pt;
    }
}

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

/* ═══════════════════════════════════════════════════════════════════════
   คอนทราสต์สูง (html.tb1-contrast-high จากแถบเครื่องมือการแสดงผล)
   ═══════════════════════════════════════════════════════════════════════ */

html.tb1-contrast-high :is(.sq, .sqa) {
    --sq-ink: #ffffff;
    --sq-ink-2: #ffffff;
    --sq-muted: #ffffff;
    --sq-paper: #000000;
    --sq-paper-alt: #000000;
    --sq-line: #ffffff;
    --sq-line-bold: #ffffff;
    --sq-brand: #facc15;
    --sq-brand-ink: #000000;
    --sq-brand-soft: #000000;
    --sq-brand-line: #facc15;
    --sq-good: #ffffff;
    --sq-good-bar: #ffffff;
    --sq-good-bg: #000000;
    --sq-warn: #facc15;
    --sq-warn-bar: #facc15;
    --sq-warn-bg: #000000;
    --sq-plan: #ffffff;
    --sq-plan-bg: #000000;
    --sq-crit: #facc15;
    --sq-crit-bg: #000000;
    --sq-bar: #ffffff;
    --sq-track: #333333;
    --sq-l1: #facc15;
    --sq-l2: #facc15;
    --sq-l3: #ffffff;
    --sq-l4: #ffffff;
    --sq-l5: #ffffff;
    --sq-shadow: none;
    --sq-shadow-float: none;
}

html.tb1-contrast-high .sq-hero {
    background: #000000;
    border-bottom: 2px solid #facc15;
}

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

html.tb1-contrast-high :is(.sq-eyebrow, .sq .sq-chip, .sq-stamp-live) {
    background: #000000;
    border-color: #facc15;
}

/* ธีมกลางบังคับสีลิงก์เป็นเหลือง: ชิปและแถบที่เลือกอยู่จึงบอกด้วยกรอบหนาและขีดเส้นใต้ ไม่ใช่พื้นเหลือง */
html.tb1-contrast-high .sq .sq-chip[aria-current="page"],
html.tb1-contrast-high .sq .sq-nav-a[aria-current="location"] {
    color: #facc15;
    background: #000000;
    box-shadow: inset 0 0 0 3px #facc15;
    text-decoration: underline;
    text-underline-offset: 4px;
}

html.tb1-contrast-high :is(.sq-card, .sq-sec-no, .sq-fact .sq-ic) {
    background: #000000;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high .sq-card {
    --c: #ffffff;
}

html.tb1-contrast-high :is(.sq-seg, .sq-sw.t3, .sq-sw.t2, .sq-sw.t1, .sq-sw.t0) {
    background: #ffffff !important;
    box-shadow: inset 2px 0 0 #000000 !important;
}

html.tb1-contrast-high .sq-nav {
    background: #000000;
}

html.tb1-contrast-high .sq .sq-pdf {
    color: #facc15;
    background: #000000;
    border: 2px solid #facc15;
    box-shadow: none;
}

html.tb1-contrast-high .sq-pdf-m {
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
}

html.tb1-contrast-high :is(.sqa-file, .sqa-upload, .sqa-fileinput) {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
}

/* ธีมกลางบังคับสีลิงก์เป็นเหลืองในโหมดนี้ ปุ่มทุกแบบจึงเป็นพื้นดำ ตัวเหลือง ขอบเหลือง */
html.tb1-contrast-high :is(.sq, .sqa) .sq-btn,
html.tb1-contrast-high :is(.sq, .sqa) .sq-btn.is-primary,
html.tb1-contrast-high .sqa .sq-hero .sq-btn,
html.tb1-contrast-high .sqa .sq-hero .sq-btn.is-primary {
    color: #facc15;
    background: #000000;
    border: 2px solid #facc15;
}

html.tb1-contrast-high .sqa-yearform select,
html.tb1-contrast-high .sqa textarea {
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
}

/* ธีมกลางบังคับตัวอักษรใน span เป็นขาว: ตัวเลือกที่เลือกจึงบอกด้วยกรอบเหลืองหนา ไม่ใช่พื้นเหลือง */
html.tb1-contrast-high .sqa-lvopt span {
    background: #000000;
    border-color: #ffffff;
}

html.tb1-contrast-high .sqa-lvopt input:checked + span {
    background: #000000;
    border-color: #facc15;
    box-shadow: inset 0 0 0 3px #facc15;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   พิมพ์ / บันทึกเป็น PDF (A4)
   ═══════════════════════════════════════════════════════════════════════ */

@page {
    size: A4;
    margin: 14mm 12mm 16mm;
}

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

    .sq {
        --sq-ink: #0f172a;
        --sq-ink-2: #1e293b;
        --sq-muted: #475569;
        --sq-paper: #ffffff;
        --sq-paper-alt: #f8fafc;
        --sq-line: #cbd5e1;
        --sq-line-bold: #94a3b8;
        --sq-brand: #1e3a8a;
        --sq-shadow: none;
        --sq-shadow-float: none;
        color-scheme: light;
        font-size: 10.5pt;
    }

    body.sq-page > :not(main),
    .sq-skip,
    .sq-pdf,
    .sq-nav,
    .sq-editbar,
    .sq-years,
    .sq-more,
    .sq-hero-fx,
    .sq-hero::after,
    .sq .sq-lvcard::before {
        display: none !important;
    }

    main.sq {
        padding: 0;
    }

    .sq * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

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

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

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

    .sq-title,
    .sq-title-y,
    .sq-lead,
    .sq-stamp {
        color: #000000;
    }

    .sq-title {
        margin-top: 4px;
        font-size: 20pt;
    }

    .sq-stamp {
        justify-content: flex-start;
    }

    .sq-stamp-live {
        color: #000000;
        background: none;
        border-color: #94a3b8;
    }

    .sq-levels {
        margin-top: 10px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sq .sq-lvcard {
        padding: 10px;
        border-color: #94a3b8;
    }

    .sq .sq-lvcard.is-overall {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .sq-lvcard.is-overall .sq-lvcard-t {
        display: block;
    }

    .sq-lvcard.is-overall .sq-lv {
        margin: auto 0 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .sq-sec {
        margin-top: 14px;
        padding: 0;
        border: 0;
        border-radius: 0;
        break-before: page;
    }

    #sq-summary {
        break-before: auto;
    }

    .sq-sec-no {
        color: #000000;
        background: #e2e8f0;
        box-shadow: none;
    }

    /* a tall panel may continue on the next page; its parts do not split */
    .sq-card,
    .sq-bigs,
    .sq-fact,
    .sq-state,
    .sq-lvcard,
    .sq-table tr,
    .sq-dist {
        break-inside: avoid;
    }

    .sq-sec-h,
    .sq-sub,
    .sq-panel-h,
    .sq-term-t {
        break-after: avoid;
    }

    .sq-panels,
    .sq-cards,
    .sq-cards.is-two {
        grid-template-columns: 1fr 1fr;
    }

    .sq-panel.is-wide .sq-terms {
        grid-template-columns: 1fr 1fr;
    }

    .sq .sq-ext::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #475569;
        word-break: break-all;
    }

    .sq-bar,
    .sq-prog-bar {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   หน้าผู้บริหาร school_quality_admin.php
   ═══════════════════════════════════════════════════════════════════════ */

.sqa .sq-hero {
    padding-bottom: clamp(30px, 4vw, 44px);
}

.sqa .sq-hero-in {
    max-width: 70rem;
}

.sqa-top {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sqa .sq-hero .sq-btn {
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .32);
}

.sqa .sq-hero .sq-btn:hover {
    background: rgba(255, 255, 255, .2);
}

.sqa .sq-hero .sq-btn.is-primary {
    color: #1e3a8a;
    background: #ffffff;
    border-color: #ffffff;
}

.sqa-yearform {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sqa-yearform label {
    font-size: .92rem;
    color: #dbeafe;
}

.sqa-yearform select {
    min-height: 40px;
    padding: 4px 12px;
    font: inherit;
    font-size: .95rem;
    color: #0f172a;
    background: #ffffff;
    border: 0;
    border-radius: 999px;
}

.sqa-flash {
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    font-size: .95rem;
    border-radius: var(--sq-rs);
    color: var(--sq-good);
    background: var(--sq-good-bg);
    border: 1px solid color-mix(in srgb, var(--sq-good-bar) 40%, transparent);
}

.sqa-flash.is-bad {
    color: var(--sq-crit);
    background: var(--sq-crit-bg);
    border-color: color-mix(in srgb, #ef4444 40%, transparent);
}

.sqa-flash p {
    margin: 0;
}

.sqa-live {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: .95rem;
    color: var(--sq-warn);
    background: var(--sq-warn-bg);
    border: 1px solid color-mix(in srgb, var(--sq-warn-bar) 40%, transparent);
    border-radius: var(--sq-rs);
}

.sqa-tabs {
    position: sticky;
    top: calc(var(--sq-nav-h, 57px) + 8px);
    z-index: 20;
    margin-top: 18px;
    display: flex;
    gap: 2px;
    padding: 6px;
    overflow-x: auto;
    background: color-mix(in srgb, var(--sq-paper) 90%, transparent);
    border: 1px solid var(--sq-line);
    border-radius: 999px;
    box-shadow: var(--sq-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
}

.sqa .sqa-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 14px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--sq-ink-2);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
}

.sqa .sqa-tab:hover {
    color: var(--sq-brand);
    background: var(--sq-brand-soft);
}

.sqa-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sq-line-bold);
}

.sqa-dot.is-done {
    background: var(--sq-good-bar);
}

.sqa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 20px;
    align-items: start;
}

.sqa-form {
    min-width: 0;
}

.sqa-field + .sqa-field {
    margin-top: 18px;
}

.sqa-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--sq-ink);
}

.sqa-count {
    font-size: .8rem;
    font-weight: 400;
    color: var(--sq-muted);
    font-variant-numeric: tabular-nums;
}

.sqa-count.is-over {
    color: var(--sq-crit);
    font-weight: 600;
}

.sqa-hint {
    margin-top: 2px;
    font-size: .86rem;
    color: var(--sq-muted);
}

.sqa textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    min-height: 7.5em;
    padding: 12px 14px;
    font: inherit;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--sq-ink);
    background: var(--sq-paper);
    border: 1px solid var(--sq-line-bold);
    border-radius: var(--sq-rs);
    resize: vertical;
}

.sqa textarea.is-long {
    min-height: 12em;
}

.sqa textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--sq-brand) 35%, transparent);
    border-color: var(--sq-brand);
}

.sqa [aria-invalid="true"] {
    border-color: var(--sq-crit);
}

.sqa-err {
    margin-top: 6px;
    font-size: .88rem;
    color: var(--sq-crit);
}

.sqa-levels {
    margin-top: 8px;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.sqa-levels legend {
    padding: 0;
}

.sqa-lvopt {
    position: relative;
}

.sqa-lvopt input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.sqa-lvopt span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    font-size: .88rem;
    line-height: 1.3;
    text-align: center;
    color: var(--sq-ink-2);
    background: var(--sq-paper);
    border: 1px solid var(--sq-line-bold);
    border-radius: 10px;
}

.sqa-lvopt span b {
    font-family: var(--sq-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.sqa-lvopt input:checked + span {
    color: var(--sq-brand-ink);
    background: var(--sq-brand);
    border-color: var(--sq-brand);
}

.sqa-lvopt input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--sq-brand) 50%, transparent);
    outline-offset: 2px;
}

.sqa-actions {
    position: sticky;
    bottom: 10px;
    z-index: 5;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--sq-paper) 92%, transparent);
    border: 1px solid var(--sq-line);
    border-radius: 14px;
    box-shadow: var(--sq-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.sqa-actions p {
    flex: 1 1 14rem;
    font-size: .86rem;
    color: var(--sq-muted);
}

.sqa-side {
    position: sticky;
    top: calc(var(--sq-nav-h, 57px) + 72px);
    padding: 14px 16px;
    background: var(--sq-paper-alt);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-r);
}

.sqa-side-t {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--sq-ink);
}

.sqa-facts {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 8px;
}

.sqa-facts li {
    padding: 8px 10px;
    font-size: .88rem;
    line-height: 1.55;
    background: var(--sq-paper);
    border: 1px solid var(--sq-line);
    border-radius: 10px;
}

.sqa-facts li span {
    display: block;
    color: var(--sq-muted);
    font-size: .8rem;
}

.sqa-facts li b {
    color: var(--sq-ink);
    font-weight: 600;
}

.sqa-facts li.is-wait b {
    color: var(--sq-warn);
    font-weight: 500;
}

.sqa-side-n {
    margin-top: 8px;
    font-size: .8rem;
    color: var(--sq-muted);
}

.sqa-hist {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 8px;
}

.sqa-hist li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: start;
    padding: 10px 12px;
    background: var(--sq-paper-alt);
    border: 1px solid var(--sq-line);
    border-radius: 10px;
    font-size: .9rem;
}

.sqa-hist-w {
    color: var(--sq-muted);
    font-size: .84rem;
}

.sqa-hist details {
    grid-column: 1 / -1;
}

.sqa-hist pre,
.sqa-pre {
    margin: 6px 0 0;
    padding: 10px 12px;
    max-height: 16em;
    overflow: auto;
    font: inherit;
    font-size: .88rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--sq-ink-2);
    background: var(--sq-paper);
    border: 1px solid var(--sq-line);
    border-radius: 8px;
}

.sqa-inline {
    display: inline;
}

/* ── ไฟล์ PDF ของรายงานฉบับเต็ม ── */
.sqa-file {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    color: var(--sq-brand);
    background: var(--sq-paper-alt);
    border: 1px solid var(--sq-line);
    border-radius: var(--sq-rs);
}

.sqa-file-b {
    flex: 1 1 14rem;
    min-width: 0;
}

.sqa-file-n {
    font-weight: 600;
    color: var(--sq-ink);
    overflow-wrap: anywhere;
}

.sqa-file-a {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

:is(.sq, .sqa) .sq-btn.is-danger {
    color: var(--sq-crit);
    border-color: color-mix(in srgb, #ef4444 45%, transparent);
}

:is(.sq, .sqa) .sq-btn.is-danger:hover {
    background: var(--sq-crit-bg);
}

.sqa-upload {
    margin-top: 16px;
    display: grid;
    gap: 8px;
    padding: 16px;
    background: var(--sq-paper);
    border: 1px dashed var(--sq-line-bold);
    border-radius: var(--sq-rs);
}

.sqa-fileinput {
    max-width: 100%;
    padding: 8px;
    font: inherit;
    font-size: .93rem;
    color: var(--sq-ink-2);
    background: var(--sq-paper-alt);
    border: 1px solid var(--sq-line);
    border-radius: 10px;
}

.sqa-fileinput::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    font: inherit;
    color: var(--sq-brand);
    background: var(--sq-paper);
    border: 1px solid var(--sq-brand-line);
    border-radius: 999px;
    cursor: pointer;
}

.sqa-file.is-prev {
    margin-top: 8px;
    color: var(--sq-muted);
    background: var(--sq-paper);
    border-style: dashed;
}

.sqa-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .93rem;
    color: var(--sq-ink-2);
    cursor: pointer;
}

.sqa-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--sq-brand);
}

.sqa-upload-msg:empty {
    display: none;
}

.sqa-upload-msg {
    font-size: .9rem;
    color: var(--sq-ink-2);
}

.sqa-upload-msg.is-bad {
    color: var(--sq-crit);
    font-weight: 600;
}

@media (max-width: 960px) {
    .sqa-grid {
        grid-template-columns: 1fr;
    }

    .sqa-side {
        position: static;
    }
}

@media (max-width: 560px) {
    /* a floating bar over a phone keyboard hides what is being typed */
    .sqa-actions {
        position: static;
        box-shadow: none;
    }

    .sqa-actions p {
        flex-basis: 100%;
        order: 3;
    }

    .sqa-levels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sqa-tabs {
        border-radius: 14px;
    }

    .sqa-hist li {
        grid-template-columns: 1fr;
    }
}