/* ═══════════════════════════════════════════════════════════════════════
   css/tb1-school-pride.css — หน้า "ผลงานและความภาคภูมิใจ" (achievements2.php ฉบับอ่านจากฐานข้อมูล) · 3 ต.ค. 2569
   ใช้คู่กับธีมกลาง css/tb1-info-page.css (ส่วนหัว การ์ดตัวเลข เมนูหัวข้อ การ์ด ปุ่ม โหมดมืด ความคมชัดสูง)
   ไฟล์นี้มีเฉพาะส่วนของหน้าผลงาน (คำนำหน้า spx-) · หน้าเดิมสำรอง includes/school_pride_legacy_page.php ไม่ใช้ไฟล์นี้
   สีระดับรางวัล (ชุดที่ตรวจตาบอดสีแล้วของหน้างบประมาณ): นานาชาติ ม่วง · ประเทศ น้ำเงิน · ภาค เขียวอมฟ้า · จังหวัด ส้ม · อื่น ๆ เทา · พระราชทาน ทอง
   สีอยู่ที่แถบ จุด และไอคอนเท่านั้น ตัวอักษรใช้สีหมึกเสมอ
   ═══════════════════════════════════════════════════════════════════════ */

.spx-page {
    --spx-intl: var(--ip-purple);
    --spx-nat: var(--ip-blue);
    --spx-reg: var(--ip-green);
    --spx-prov: var(--ip-orange);
    --spx-local: var(--ip-slate);
    --spx-royal: #D97706;
}

/* ═══ แถบเครื่องมือใต้การ์ดตัวเลข ═══ */
.spx-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .9rem;
}

.spx-tools:not(:has(> :not([hidden]))) {
    display: none;
}

/* ═══ สีตามระดับรางวัล ═══ */
.spx-t-intl {
    --t: var(--spx-intl);
}

.spx-t-nat {
    --t: var(--spx-nat);
}

.spx-t-reg {
    --t: var(--spx-reg);
}

.spx-t-prov {
    --t: var(--spx-prov);
}

.spx-t-local,
.spx-t-none {
    --t: var(--spx-local);
}

.spx-t-royal {
    --t: var(--spx-royal);
}

.spx-sw {
    display: inline-block;
    flex: none;
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
    background: var(--spx-local);
}

.spx-sw.is-intl,
.spx-bar i.is-intl {
    background: var(--spx-intl);
}

.spx-sw.is-nat,
.spx-bar i.is-nat {
    background: var(--spx-nat);
}

.spx-sw.is-reg,
.spx-bar i.is-reg {
    background: var(--spx-reg);
}

.spx-sw.is-prov,
.spx-bar i.is-prov {
    background: var(--spx-prov);
}

.spx-sw.is-local,
.spx-bar i.is-local {
    background: var(--spx-local);
}

/* ═══ การ์ดไฮไลต์และการ์ดในทะเบียน ═══ */
.spx-hl,
.spx-card {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    overflow: hidden;
    border-top: 4px solid var(--t, var(--ip-blue));
}

.spx-hl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.spx-ic {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--t, var(--ip-blue)) 14%, transparent);
    color: var(--ip-ink1);
}

.spx-ic i {
    color: var(--t, var(--ip-blue));
}

.spx-lv {
    padding: .1rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--t, var(--ip-blue)) 12%, var(--ip-card));
    border: 1px solid color-mix(in srgb, var(--t, var(--ip-blue)) 45%, var(--ip-line));
    color: var(--ip-ink1);
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    text-align: right;
}

.spx-hl h3,
.spx-card h3 {
    font-family: var(--ip-fb);
    font-size: var(--tb1-fs-md, 1.125rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--tb1-heading, var(--ip-ink1));
}

.spx-card-h {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.spx-result {
    margin-top: .1rem !important;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 600;
    color: var(--ip-ink2);
}

.spx-line {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--ip-ink2);
    line-height: 1.5;
}

.spx-line > i {
    flex: none;
    width: 1rem;
    margin-top: .25rem;
    text-align: center;
    color: var(--ip-ink3);
    font-size: .82rem;
}

.spx-line.is-who {
    color: var(--ip-ink1);
    font-weight: 600;
}

.spx-desc {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--ip-ink3);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.spx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: auto !important;
    padding-top: .35rem;
}

.spx-medal.is-gold i,
.spx-medal-ic.is-gold {
    color: #CA8A04;
}

.spx-medal.is-silver i,
.spx-medal-ic.is-silver {
    color: #64748B;
}

.spx-medal.is-bronze i,
.spx-medal-ic.is-bronze {
    color: #B45309;
}

.spx-medal.is-royal i,
.spx-medal-ic.is-royal {
    color: #D97706;
}

.spx-medal.is-honor i,
.spx-medal-ic.is-honor,
.spx-medal-ic.is-none {
    color: var(--ip-blue);
}

[data-theme="dark"] .spx-medal.is-gold i,
html.dark-mode .spx-medal.is-gold i,
[data-theme="dark"] .spx-medal-ic.is-gold,
html.dark-mode .spx-medal-ic.is-gold {
    color: #FACC15;
}

[data-theme="dark"] .spx-medal.is-silver i,
html.dark-mode .spx-medal.is-silver i,
[data-theme="dark"] .spx-medal-ic.is-silver,
html.dark-mode .spx-medal-ic.is-silver {
    color: #CBD5E1;
}

.spx-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    font-size: var(--tb1-fs-xs, .875rem);
}

.spx-img {
    display: block;
    width: calc(100% + 2.2rem);
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: -1.1rem -1.1rem .35rem;
    object-fit: cover;
    background: var(--ip-alt);
}

/* ═══ สรุปรายปี ═══ */
.spx-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem !important;
}

@media (min-width: 980px) {
    .spx-types {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ip .spx-types a {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    height: 100%;
    padding: .95rem 1rem;
    border-radius: var(--ip-r);
    background: var(--ip-card);
    border: 1px solid var(--ip-line);
    box-shadow: var(--ip-sh);
    color: var(--ip-ink1);
    text-decoration: none;
    transition: border-color .2s, box-shadow .25s;
}

.ip .spx-types a:hover {
    border-color: var(--ip-brand);
    box-shadow: var(--ip-sh2);
}

.spx-types-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.spx-types-t b {
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--ip-ink1);
}

.spx-types-t span {
    font-weight: 600;
    color: var(--ip-ink2);
}

.spx-types-t small {
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--ip-ink3);
}

.ip .spx-types a:hover .spx-types-t small {
    color: var(--ip-link);
    text-decoration: underline;
}

.spx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin-bottom: .8rem !important;
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--ip-ink2);
}

.spx-legend li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.spx-bars li {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) 3rem;
    gap: .7rem;
    align-items: center;
    padding: .35rem 0;
}

.spx-bar-y {
    font-weight: 700;
    color: var(--ip-ink1);
    font-variant-numeric: tabular-nums;
}

.spx-bar-track {
    display: block;
    height: 22px;
    border-radius: 7px;
    background: var(--ip-alt);
    overflow: hidden;
}

.spx-bar {
    display: flex;
    width: var(--w, 0%);
    height: 100%;
    gap: 2px;
    transform-origin: left center;
}

.spx-bar i {
    display: block;
    flex: none;
    width: var(--w, 0%);
    height: 100%;
}

.spx-bar i:first-child {
    border-radius: 7px 0 0 7px;
}

.spx-bar i:last-child {
    border-radius: 0 7px 7px 0;
}

.spx-bar i:only-child {
    border-radius: 7px;
}

.spx-bar-n {
    text-align: right;
    font-weight: 700;
    color: var(--ip-ink1);
}

.spx-tbl-card {
    margin-top: 1rem;
    padding: 0;
    overflow: hidden;
}

.spx-scroll {
    overflow-x: auto;
}

.spx-tbl {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.spx-tbl caption {
    padding: .9rem 1.1rem .4rem;
    text-align: left;
    font-weight: 700;
    color: var(--ip-ink1);
}

.spx-tbl th,
.spx-tbl td {
    padding: .6rem .8rem;
    border-top: 1px solid var(--ip-line);
    text-align: right;
    color: var(--ip-ink2);
    font-size: var(--tb1-fs-sm, 1rem);
}

.spx-tbl thead th {
    background: var(--ip-alt);
    color: var(--ip-ink1);
    font-weight: 700;
    font-size: var(--tb1-fs-xs, .875rem);
}

.spx-tbl th:first-child {
    text-align: left;
    padding-left: 1.1rem;
}

.spx-tbl tbody th {
    color: var(--ip-ink1);
    font-weight: 700;
}

.spx-tbl .is-total {
    color: var(--ip-ink1);
    font-weight: 700;
}

.spx-tbl tfoot th,
.spx-tbl tfoot td {
    background: var(--ip-alt);
    color: var(--ip-ink1);
    font-weight: 700;
    border-top: 2px solid var(--ip-line2);
}

.spx-tbl sup a {
    margin-left: .15rem;
    color: var(--ip-link);
    font-size: var(--tb1-fs-xs, .875rem);
}

.spx-notes {
    padding: .75rem 1.1rem 1rem;
    border-top: 1px solid var(--ip-line);
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--ip-ink3);
}

.spx-notes p + p {
    margin-top: .25rem !important;
}

/* ═══ นักเรียนดาวเด่น ═══ */
.spx-av {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ip-navy);
    color: #fff;
    font-family: var(--ip-fd);
    font-size: var(--tb1-fs-lg, 1.25rem);
    font-weight: 800;
}

[data-theme="dark"] .spx-av,
html.dark-mode .spx-av {
    background: #93C5FD;
    color: #0A1322;
}

.spx-ath-list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .5rem 0;
    border-top: 1px dashed var(--ip-line2);
    font-size: var(--tb1-fs-xs, .875rem);
    color: var(--ip-ink2);
}

.spx-ath-list li:first-child {
    border-top: 0;
}

.spx-ath-list li > i {
    flex: none;
    margin-top: .3rem;
}

.spx-ath-list strong {
    color: var(--ip-ink1);
}

.spx-ath-list small {
    display: block;
    color: var(--ip-ink3);
    font-size: var(--tb1-fs-xs, .875rem);
}

/* ═══ ทะเบียน: แท็บ ตัวกรอง สถานะ ═══ */
.spx-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    margin-bottom: 1rem;
}

.ip .spx-tabs a.is-on {
    color: #fff;
    background: var(--ip-navy);
    border-color: var(--ip-navy);
}

[data-theme="dark"] .ip .spx-tabs a.is-on,
html.dark-mode .ip .spx-tabs a.is-on {
    color: #0A1322;
    background: #93C5FD;
    border-color: #93C5FD;
}

.spx-cnt {
    padding: 0 .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: var(--tb1-fs-xs, .875rem);
    font-variant-numeric: tabular-nums;
}

.spx-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    align-items: end;
}

@media (min-width: 700px) {
    .spx-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .spx-filter {
        grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto;
    }
}

.spx-field label {
    display: block;
    margin-bottom: .25rem;
    font-size: var(--tb1-fs-xs, .875rem);
    font-weight: 700;
    color: var(--ip-ink2);
}

.spx-field input,
.spx-field select {
    width: 100%;
    min-height: 44px;
    padding: .45rem .75rem;
    border: 1px solid var(--ip-line2);
    border-radius: var(--tb1-radius-sm, 10px);
    background: var(--ip-card);
    color: var(--ip-ink1);
    font: inherit;
    font-size: var(--tb1-fs-sm, 1rem);
}

.spx-field input::placeholder {
    color: var(--ip-ink3);
    opacity: 1;
}

.spx-go {
    min-height: 44px;
}

.spx-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 1rem 0;
    color: var(--ip-ink2);
    font-size: var(--tb1-fs-sm, 1rem);
}

.spx-status strong {
    color: var(--ip-ink1);
}

.ip .spx-chip {
    min-height: 34px;
    padding: .15rem .8rem;
    font-size: var(--tb1-fs-xs, .875rem);
}

.spx-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ip-ink2);
}

.spx-empty > i {
    font-size: 2rem;
    color: var(--ip-ink3);
}

.spx-empty p + p {
    margin-top: .35rem !important;
}

/* ═══ แบ่งหน้า ═══ */
.spx-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: 1.4rem;
}

.ip .spx-pg {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 0 .8rem;
    border-radius: var(--tb1-radius-sm, 10px);
    border: 1px solid var(--ip-line2);
    background: var(--ip-card);
    color: var(--ip-link);
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.ip a.spx-pg:hover {
    border-color: var(--ip-brand);
}

.ip .spx-pg.is-on {
    color: #fff;
    background: var(--ip-navy);
    border-color: var(--ip-navy);
}

[data-theme="dark"] .ip .spx-pg.is-on,
html.dark-mode .ip .spx-pg.is-on {
    color: #0A1322;
    background: #93C5FD;
    border-color: #93C5FD;
}

.ip .spx-pg.is-gap {
    border-color: transparent;
    background: none;
    color: var(--ip-ink3);
    min-width: 1.5rem;
    padding: 0;
}

@media (max-width: 520px) {
    .ip .spx-pg.is-nav span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
}

/* ═══ แอนิเมชัน ═══ */
@media (prefers-reduced-motion: no-preference) {
    .ip-js .spx-chart.ip-rv .spx-bar {
        transform: scaleX(0);
        transition: transform 1s var(--ip-ease) .2s;
    }

    .ip-js .spx-chart.ip-rv.is-in .spx-bar,
    .ip-js.ip-ready .spx-chart.ip-rv .spx-bar {
        transform: none;
    }

    .spx-card,
    .spx-hl {
        transition: box-shadow .25s ease, border-color .2s ease;
    }

    .spx-card:hover,
    .spx-hl:hover {
        box-shadow: var(--ip-sh2);
    }

    .spx-card:target {
        animation: ipFlash 1.1s ease-out .3s 2;
    }
}

/* ═══ ความคมชัดสูง ═══ */
html.tb1-contrast-high .ip :is(.spx-types a, .spx-lv, .spx-ic, .spx-av, .spx-pg, .spx-cnt, .spx-field input, .spx-field select, .spx-bar-track, .spx-tbl thead th, .spx-tbl tfoot th, .spx-tbl tfoot td) {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #fff;
    box-shadow: none !important;
}

html.tb1-contrast-high .ip :is(.spx-types a, .spx-pg) {
    border: 2px solid #facc15 !important;
}

html.tb1-contrast-high .ip :is(.spx-hl, .spx-card) {
    border-top: 4px solid #facc15;
}

html.tb1-contrast-high .ip :is(.spx-ic i, .spx-medal i, .spx-medal-ic) {
    color: #fff !important;
}

html.tb1-contrast-high .ip :is(.spx-tabs a.is-on, .spx-pg.is-on) {
    background: #facc15 !important;
    color: #000 !important;
}

html.tb1-contrast-high .ip :is(.spx-tabs a.is-on *, .spx-pg.is-on *) {
    color: #000 !important;
}

html.tb1-contrast-high .ip .spx-tabs a.is-on .spx-cnt {
    background: transparent !important;
    border-color: #000;
}

html.tb1-contrast-high .ip .spx-bar i {
    border-right: 2px solid #000;
}

/* ═══ พิมพ์ ═══ */
@media print {

    .spx-tools,
    .spx-tabs,
    .spx-filter,
    .spx-pager,
    .spx-img {
        display: none !important;
    }

    .spx-desc {
        -webkit-line-clamp: unset;
        display: block;
    }

    .spx-bar {
        transform: none !important;
    }

    .spx-tbl {
        min-width: 0;
    }
}