/* ============================================================
   หน้ารายงาน (report.php) — เลเอ้าต์ใหม่ โทนสีเดิม (ทอง #D6B172 / ครีม / ขาว)
   ทุกคลาสอยู่ใต้ .rp จึงไม่กระทบหน้าอื่นที่ใช้ report.css
   ============================================================ */

.rp {
    --gold: #D6B172;
    --gold-dark: #a8844a;
    --gold-soft: rgba(214, 177, 114, 0.14);
    --cream: #faf4eb;
    --ink: #1f1f1f;
    --muted: #8d8d8d;
    --line: #eee4d3;
    --red: #e05b5b;
    --green: #1f9d55;
    --radius: 22px;

    color: var(--ink);
    text-align: left;
    padding-top: 65px;
    background: linear-gradient(180deg, var(--cream) 0, #fff 520px);
    min-height: 100vh;
}

.rp * {
    box-sizing: border-box;
}

.rp .wrap {
    width: min(1200px, 100% - 32px);
    margin: 0 auto;
}

.rp a {
    color: inherit;
}

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

.rp-head {
    padding: 32px 0 28px;
}

.rp .crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--muted);
}

.rp .crumbs a {
    color: var(--gold-dark);
}

.rp .crumbs a:hover {
    text-decoration: underline;
}

.rp .crumbs i {
    font-size: 10px;
    color: #c9b89a;
}

.rp .chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rp .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--gold);
    color: var(--gold-dark);
    font-size: 14px;
    font-weight: 500;
}

.rp .chip.solid {
    background: var(--gold);
    color: var(--ink);
}

.rp .chip.red {
    border-color: var(--red);
    color: var(--red);
}

.rp .chip.grey {
    border-color: #ccc;
    color: #777;
}

.rp-head h1 {
    margin: 14px 0 2px;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.3;
}

.rp-head h1 .star {
    color: var(--gold);
}

/* คำอธิบายหัวหน้า แสดงบรรทัดเดียว ยาวเกินตัดเป็น … (เอาเมาส์ชี้ดูข้อความเต็ม) */
.rp-head .sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 300;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-head .updated {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 300;
    color: var(--muted);
}

/* ---------- การ์ดสถิติ ---------- */

.rp .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.rp .stat {
    position: relative;
    display: block;
    padding: 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.rp a.stat:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 10px 24px rgba(214, 177, 114, 0.25);
}

.rp .stat .label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
}

.rp .stat .ic {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 15px;
}

.rp .stat .go {
    margin-left: auto;
    font-size: 13px;
    color: var(--gold);
    transition: transform .2s;
}

.rp a.stat:hover .go {
    transform: translateX(3px);
}

.rp .stat .value {
    margin-top: 12px;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.rp .stat .value small {
    margin-left: 6px;
    font-size: 15px;
    font-weight: 300;
}

.rp .stat .sub {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 300;
    color: var(--muted);
}

.rp .stat .bar {
    margin-top: 12px;
    height: 6px;
    border-radius: 999px;
    background: var(--gold-soft);
    overflow: hidden;
}

.rp .stat .bar > span {
    display: block;
    height: 100%;
    background: var(--gold);
    border-radius: 999px;
}

/* ---------- การ์ดแนะนำ i-TEST PRO (ใต้การ์ดสถิติ  report.php rp_itest) ----------
   หน้าตาเดียวกับการ์ดสถิติ (พื้นขาว ขอบครีม มุมมน) ไม่แย่งความเด่นของตัวเลข  ทั้งการ์ดกดได้ */

.rp .itest {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding: 14px 20px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--cream) 0, #fff 40%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

/* อยู่ชิดแถวการ์ดสถิติเท่าช่องไฟระหว่างการ์ด (16px) ให้ดูเป็นชุดเดียวกัน */
.rp .stats + .itest {
    margin-top: -12px;
}

.rp .itest:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 10px 24px rgba(214, 177, 114, 0.25);
    color: var(--ink);
}

.rp .itest-av {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--gold-soft);
    overflow: hidden;
}

.rp .itest-av img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
}

.rp .itest-tx {
    flex: 1;
    min-width: 0;
}

.rp .itest-t {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.rp .itest-pro {
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.rp .itest-d {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--muted);
}

.rp .itest-go {
    flex: none;
}

.rp .itest:hover .itest-go {
    background: var(--gold);
    color: var(--ink);
}

/* การ์ดสังกัดหน้าสาขาวิชารายสาขา (ใช้เป็นแท็บ) : เตี้ยลง ตัวเลขเด่น */
.rp .stats.tabs .stat {
    padding: 14px 20px 16px;
}

.rp .stats.tabs .stat .value {
    margin-top: 6px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--gold-dark);
}

.rp .stats.tabs .stat .value small {
    letter-spacing: 0;
    color: var(--ink);
}

.rp .stats.tabs .stat .sub {
    margin-top: 4px;
}

.rp .stats.tabs .stat.main .value,
.rp .stats.tabs .stat.main .value small {
    color: #fff;
}

/* ยอดเป็น 0 ไม่ต้องเด่น */
.rp .stats.tabs .stat.is-zero:not(.main) .value {
    color: #c8c8c8;
}

/* เทียบย้อนหลัง 2 ปี (ตัวเล็กในการ์ดเดียวกัน)
   สองปีอยู่บรรทัดเดียวกัน  การ์ดแคบจนไม่พอ ปีที่สองตกลงบรรทัดใหม่เอง */
.rp .stat .cmp {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ดันแถวเทียบย้อนหลังลงล่างสุดของการ์ด ทุกใบจะได้อยู่แนวเดียวกัน */
.rp .stat.has-cmp {
    display: flex;
    flex-direction: column;
}

.rp .stat.has-cmp > .cmp {
    margin-top: auto;
}

.rp .stat.has-cmp > :nth-last-child(2) {
    margin-bottom: 10px;
}

.rp .stat .cmp div {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.rp .stat .cmp .y {
    font-weight: 300;
    color: var(--muted);
}

.rp .stat .cmp .v {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.rp .stat .cmp .v.note {
    font-weight: 400;
    font-size: 12px;
}

.rp .stat .cmp .d {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rp .stat .cmp .d.good { color: var(--green); }
.rp .stat .cmp .d.bad  { color: var(--red); }
.rp .stat .cmp .d.neu  { color: var(--gold-dark); }
.rp .stat .cmp .d.flat { color: var(--muted); font-weight: 400; }

.rp .stat.main .cmp {
    border-top-color: rgba(255, 255, 255, 0.45);
}

.rp .stat.main .cmp .y {
    color: rgba(255, 255, 255, 0.85);
}

.rp .stat.main .cmp .d {
    color: #fff;
}

/* การ์ดหลัก / การ์ดที่เลือกอยู่ พื้นทอง */
.rp .stat.main {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 10px 26px rgba(214, 177, 114, 0.45);
}

.rp .stat.main .ic {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.rp .stat.main .go {
    color: #fff;
}

.rp .stat.main .sub {
    color: rgba(255, 255, 255, 0.92);
}

.rp .stat.main .bar {
    background: rgba(255, 255, 255, 0.3);
}

.rp .stat.main .bar > span {
    background: #fff;
}

/* ---------- กล่อง / ตาราง ---------- */

.rp .panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 28px;
}

.rp .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 16px 20px 8px;
}

.rp .panel-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}

.rp .panel-head .note {
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

.rp .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 0 20px 12px;
}

.rp .filter {
    flex: 1 1 280px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 38px;
    border: 2px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-dark);
    background: #fff;
}

.rp .filter input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
}

.rp .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rp .chip-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: #555;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
}

.rp .chip-btn:hover {
    border-color: var(--gold);
}

.rp .chip-btn.on {
    background: var(--gold-soft);
    border-color: var(--gold);
    color: var(--gold-dark);
    font-weight: 500;
}

.rp .toolbar .count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

.rp .table-scroll {
    overflow-x: auto;
    border-top: 1px solid var(--line);
}

.rp .rtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}

.rp .rtable th {
    padding: 12px 14px;
    background: var(--cream);
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.rp .rtable td {
    padding: 13px 14px;
    border-bottom: 1px solid #f4efe6;
    vertical-align: middle;
}

.rp .rtable tbody tr:last-child td {
    border-bottom: 0;
}

.rp .rtable tbody tr:hover td {
    background: #fffaf2;
}

.rp .rtable .num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rp .rtable td.num {
    font-weight: 500;
}

.rp .rtable .c-rank {
    width: 56px;
    text-align: center;
}

.rp .rtable .c-act {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.rp .rank-no {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #f5f1ea;
    color: var(--gold-dark);
    font-size: 14px;
    font-weight: 600;
}

.rp .rtable tr.top .rank-no {
    background: var(--gold);
    color: #fff;
}

.rp .c-name .n {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

.rp .c-name .n .star {
    color: var(--gold);
}

.rp .c-name .d {
    max-width: 520px;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp .meter {
    max-width: 320px;
    margin-top: 6px;
    height: 4px;
    border-radius: 999px;
    background: #f3ede2;
    overflow: hidden;
}

.rp .meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gold);
}

.rp .rtable tr.muted td {
    color: #aaa;
}

.rp .rtable tr.muted .c-name .n {
    font-weight: 400;
}

.rp .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.rp .badge.wait {
    background: #f3f3f3;
    color: #888;
}

.rp .badge.closed {
    background: rgba(255, 105, 105, 0.12);
    color: var(--red);
}

.rp .btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 2px solid var(--gold);
    color: var(--gold-dark);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: all .2s;
}

.rp .btn-line:hover {
    background: var(--gold);
    color: var(--ink);
}

.rp .btn-line i {
    font-size: 12px;
}

/* มาตรฐานวิชาเอก : มี − ควรมี  (ขาด = แดง  เกิน = เขียว) */
.rp .std {
    font-weight: 600;
}

.rp .std.neg {
    color: var(--red);
}

.rp .std.pos {
    color: var(--green);
}

.rp .std.zero,
.rp .std-na {
    color: #aaa;
}

.rp .std-sub,
.rp .th-sub {
    display: block;
    font-size: 11px;
    font-weight: 300;
    color: var(--muted);
}

/* จอกลาง (แท็บเล็ต) : การ์ด 4 ใบเรียง 2 x 2 แทน 3 + 1 */
@media screen and (min-width: 481px) and (max-width: 1000px) {
    .rp .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- การ์ดสรุปใบเดียวบนมือถือ (หน้าเขตพื้นที่ทั้งหมด) ----------
   จอใหญ่ใช้การ์ด 4 ใบตามเดิม  จอไม่เกิน 600px ซ่อนการ์ด 4 ใบแล้วใช้ใบนี้แทน */
.rp .m-sum {
    display: none;
}

@media screen and (max-width: 600px) {
    .rp .stats.has-msum {
        display: none;
    }
    /* การ์ด i-TEST : หน้าที่ซ่อนการ์ด 4 ใบ ต่อจากการ์ดสรุปใบเดียว  ปุ่มลงไปอยู่แถวล่างเต็มความกว้าง */
    .rp .stats.has-msum + .itest {
        margin-top: 0;
    }
    .rp .itest {
        flex-wrap: wrap;
        gap: 10px 12px;
        margin-bottom: 22px;
        padding: 14px;
        border-radius: 20px;
    }
    .rp .itest-av {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
    .rp .itest-av img {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .rp .itest-d {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .rp .itest-go {
        width: 100%;
    }
    .rp .m-sum {
        display: block;
        margin-bottom: 22px;
        border: 1px solid var(--line);
        border-radius: 20px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 8px 22px rgba(214, 177, 114, 0.2);
    }
    /* หัวการ์ดพื้นเข้ม ตัวเลขทองไล่สี : ตัดกันชัด ตัวเลขเด่นกว่าตัวขาวบนพื้นทอง */
    .rp .m-sum-top {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 12px;
        padding: 16px 18px 14px;
        background: radial-gradient(130% 150% at 0% 0%, #3d3222 0%, #262019 55%, #1c1812 100%);
        color: #f3e3c4;
    }
    /* ไอคอนจาง ๆ มุมขวา */
    .rp .m-sum-top::after {
        content: "\f508";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: -8px;
        bottom: -18px;
        font-size: 96px;
        line-height: 1;
        color: rgba(214, 177, 114, 0.1);
        pointer-events: none;
    }
    .rp .m-sum-top > div {
        position: relative;
        z-index: 1;
    }
    .rp .m-sum-top .k {
        display: block;
        font-size: 13px;
        font-weight: 400;
        color: #e8cf9f;
    }
    .rp .m-sum-top .v {
        display: block;
        font-size: 13px;
        font-weight: 300;
        line-height: 1.1;
    }
    .rp .m-sum-top .v {
        margin-top: 4px;
        font-size: 15px;
        font-weight: 400;
        color: #e8cf9f;
        white-space: nowrap;
    }
    .rp .m-sum-top .r {
        flex: none;
    }
    .rp .m-sum-top .app {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        font-weight: 300;
        color: #d9c198;
    }
    /* ยอด 3 ปีย้อนหลัง ด้านขวา */
    .rp .m-sum-top .hist {
        flex: none;
        align-self: center;
        display: grid;
        gap: 4px;
        padding-left: 14px;
        border-left: 1px solid rgba(214, 177, 114, 0.3);
    }
    .rp .m-sum-top .hist div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        line-height: 1.2;
    }
    .rp .m-sum-top .hist .y {
        font-size: 12px;
        font-weight: 300;
        color: #bfa77c;
    }
    .rp .m-sum-top .hist b {
        font-size: 16px;
        font-weight: 600;
        color: #f3e3c4;
        font-variant-numeric: tabular-nums;
    }
    .rp .m-sum-top .v b {
        display: inline-block;
        margin-right: 6px;
        padding-bottom: 2px;
        font-size: clamp(46px, 14.5vw, 64px);   /* เลข 4 หลักยังอยู่บรรทัดเดียวกับคำว่าตำแหน่ง */
        font-weight: 800;
        line-height: 1;
        letter-spacing: -2px;
        font-variant-numeric: tabular-nums;
        background: linear-gradient(180deg, #fff3d6 0%, #f0d49c 45%, var(--gold) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 4px 14px rgba(214, 177, 114, 0.45));
    }
    .rp .m-sum-top .r {
        text-align: right;
    }
    @media (max-width: 374px) {
        .rp .m-sum-top .v b {
            font-size: 46px;
        }
    }
    .rp .m-sum-top .r .v b {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0;
        background: none;
        color: #fff;
        filter: none;
    }
    .rp .m-sum-body {
        padding: 12px 16px 14px;
    }
    .rp .m-sum-bar {
        display: flex;
        height: 10px;
        border-radius: 999px;
        overflow: hidden;
        background: #efe9de;
    }
    .rp .m-sum .s-open   { background: var(--gold); }
    .rp .m-sum .s-closed { background: var(--red); }
    .rp .m-sum .s-wait   { background: #e3ddd1; }
    .rp .m-sum .s-ratio  { background: var(--gold-dark); }
    .rp .m-sum-lg {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-top: 12px;
    }
    .rp .m-sum-lg .lg {
        display: block;
        padding: 6px 8px;
        border-radius: 12px;
        color: var(--ink);
        text-decoration: none;
    }
    .rp .m-sum-lg a.lg {
        background: #faf7f1;
    }
    .rp .m-sum-lg a.lg:active {
        background: var(--gold-soft);
    }
    .rp .m-sum-lg .t {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #666;
        white-space: nowrap;
    }
    .rp .m-sum-lg .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex: none;
    }
    .rp .m-sum-lg .go {
        margin-left: auto;
        font-size: 9px;
        color: var(--gold-dark);
    }
    .rp .m-sum-lg .n {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }
    .rp .m-sum-lg .n b {
        font-size: 18px;
        font-weight: 700;
        color: var(--ink);
        margin-right: 2px;
    }
}

/* ---------- หัวหน้า ---------- */
.rp .rp-head .eyebrow {
    display: block;   /* จอใหญ่ : สองบรรทัดขนาดเท่ากันตามเดิม */
}

@media screen and (max-width: 600px) {
    .rp .rp-head {
        padding: 14px 0 20px;
    }
    /* แถวบน : breadcrumb ซ้าย  ป้ายปีขวา */
    .rp .rp-head .rp-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 10px;
        margin-bottom: 14px;
    }
    .rp .rp-head .crumbs {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        margin-bottom: 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 13px;
    }
    .rp .rp-head .crumbs span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rp .rp-head .chips-row {
        flex: none;
        gap: 6px;
    }
    .rp .rp-head .chip {
        gap: 5px;
        padding: 3px 10px;
        font-size: 12px;
    }
    /* ชื่อหน้า : หัวรองสีทองตัวเล็ก + ชื่อหลักตัวใหญ่ + ขีดทองสั้นใต้ชื่อ */
    .rp .rp-head h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.2px;
    }
    .rp .rp-head h1 .eyebrow {
        margin-bottom: 2px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
        color: var(--gold-dark);
    }
    .rp .rp-head h1::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin: 10px 0 10px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--gold), #e8cf9f);
    }
    /* วันที่อัปเดตเป็นป้ายเล็ก */
    .rp .rp-head .updated {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 3px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        color: #777;
    }
    .rp .rp-head .updated i {
        color: var(--gold-dark);
    }
}

/* ---------- หัวรายการบนมือถือแบบประหยัดพื้นที่ ----------
   จอใหญ่ : ปุ่มสังกัด + บรรทัด "แสดง x จาก y รายการ" ตามเดิม
   มือถือ : ปุ่มสังกัดย่อเป็นช่องเลือกในกล่องค้นหา  จำนวนรายการเป็นป้ายเล็กข้างชื่อหัวข้อ */
.rp .chip-sel,
.rp .hc,
.rp .m-only {
    display: none;
}

@media screen and (max-width: 720px) {
    .rp .panel.table-panel .panel-head {
        align-items: center;
        padding-top: 0;
        padding-bottom: 8px;
    }
    .rp .panel.table-panel .panel-head h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
    }
    .rp .panel.table-panel .panel-head div.note {
        display: none;
    }
    .rp .hc {
        display: inline-grid;
        place-items: center;
        min-width: 28px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--gold-soft);
        color: var(--gold-dark);
        font-size: 12px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    .rp .hc:empty {
        display: none;
    }
    .rp .m-only {
        display: inline;
    }
    .rp .toolbar {
        padding-bottom: 10px;
    }
    .rp .toolbar .chips,
    .rp .toolbar .count {
        display: none;
    }
    .rp .filter {
        max-width: none;
        height: 42px;
        padding: 0 4px 0 14px;
    }
    .rp .chip-sel {
        display: block;
        flex: none;
        height: 30px;
        padding: 0 24px 0 12px;
        border: 0;
        border-left: 1px solid var(--line);
        border-radius: 0;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8844a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 6px;
        -webkit-appearance: none;
        appearance: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--gold-dark);
        cursor: pointer;
        outline: none;
    }
}

/* ตัวเลขเปิดสอบบนการ์ดที่พับได้ : แสดงเฉพาะมือถือ (บนจอใหญ่มีคอลัมน์เปิดสอบอยู่แล้ว) */
.rp .m-num {
    display: none;
}

.rp .no-match {
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
    font-weight: 300;
    border-top: 1px solid #f4efe6;
}

/* ---------- กราฟเทียบย้อนหลัง 3 ปีของวิชาเอก (report.php rp_trend) ----------
   การ์ดเล็กสเกลของใครของมัน (ตัวเลขต่างหลักกันมาก ไม่รวมแกนเดียว)  แท่งบางปลายมน 4px ฐานเรียบ
   สีทองไล่ตามปี : เก่า #d6b172 → #b8894a → ปีที่กำลังดู #8a5f25  ตัวเลขใช้สีตัวอักษร ไม่ใช้สีแท่ง */

/* หัวข้อ : "· เทียบย้อนหลัง 3 ปี" ขึ้นบรรทัดใหม่ทั้งก้อน ไม่ถูกตัดกลางคำ (ชื่อวิชาเอกยาว ๆ บนมือถือ) */
.rp .trend-panel h2 .nw {
    white-space: nowrap;
}

.rp .trend-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 8px 20px 16px;
}

.rp .tcard {
    min-width: 0;
    padding: 14px 16px 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.rp .trend-panel .tc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.rp .trend-panel .tc-head .ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 14px;
}

.rp .trend-panel .tc-head small {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
}

.rp .tc-plot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    height: 150px;
    margin-top: 10px;
    border-bottom: 1px solid #e6dccb;
}

.rp .tc-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    cursor: default;
}

/* ตัวเลขอยู่เหนือเส้นเชื่อม (z-index) มีขอบขาวรอบตัวอักษร เส้นชันที่ผ่านข้างหลังจึงไม่บังตัวเลข
   เว้น 8px จากหัวแท่ง ไม่ชนจุดบนเส้น */
.rp .tc-col .v {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--ink);
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 7px #fff;
}

/* สูง 84% ของกรอบ × สัดส่วนค่า (rp_trend ใช้ตัวเลขเดียวกันวางปลายเส้นที่หัวแท่ง) */
.rp .tc-col i {
    display: block;
    flex: none;   /* ห้ามหด : แท่งสูงสุด + ตัวเลขเกินกรอบนิดหน่อย ให้ตัวเลขล้นขึ้นไปแทน หัวแท่งจะตรงกับปลายเส้น */
    width: 24px;
    height: calc(84% * var(--p));
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    transition: filter .15s;
}

.rp .tc-col.k0 i { background: #d6b172; }
.rp .tc-col.k1 i { background: #b8894a; }
.rp .tc-col.k2 i { background: #8a5f25; }
.rp .tc-col:hover i { filter: brightness(1.12); }

/* เส้นเชื่อมหัวแท่ง + จุด + ป้าย +/− % (ไม่รับเมาส์ ชี้แท่งข้างใต้ได้ตามเดิม) */
.rp .tc-line,
.rp .tc-dot,
.rp .tc-pc {
    position: absolute;
    pointer-events: none;
}

.rp .tc-line {
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rp .tc-dot {
    z-index: 1;
}

.rp .tc-line line {
    stroke: #4a3a22;
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* ปีที่กำลังดูยังประกาศไม่ครบ */
.rp .tc-line line.dash {
    stroke-dasharray: 4 4;
    opacity: .7;
}

.rp .tc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a3a22;
    box-shadow: 0 0 0 2px #fff;
    transform: translate(-50%, -50%);
}

.rp .tc-pc {
    z-index: 1;
    padding: 1px 7px;
    border: 1px solid #e2d6c2;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* กึ่งกลางระหว่างแท่ง ขอบบนต่ำกว่าหัวแท่งที่เตี้ยกว่าเล็กน้อย (rp_trend คำนวณตำแหน่ง) */
.rp .tc-pc {
    transform: translate(-50%, 4px);
}

/* แถว % ใต้ปี (จอแคบ) : ตัวเลขอยู่กึ่งกลางระหว่างปีที่เทียบกัน */
.rp .tc-chg {
    display: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.rp .tc-chg span:nth-child(1) { grid-column: 2 / 4; }
.rp .tc-chg span:nth-child(2) { grid-column: 4 / 6; }

.rp .tc-yrs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 6px;
    font-size: 12px;
    text-align: center;
    color: var(--muted);
}

.rp .tc-yrs .cur {
    color: var(--ink);
    font-weight: 600;
}

.rp .tc-delta {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f4efe6;
    font-size: 12px;
    color: #777;
}

.rp .tc-delta i {
    margin-right: 5px;
    color: #777;
}

/* บัญชีผู้สอบผ่าน : แถบแบ่งส่วน เรียกบรรจุแล้ว (ทอง) + คงเหลือ (ทองอ่อน) เว้นช่อง 2px */
.rp .tlist {
    margin: 0 20px 18px;
    padding: 14px 16px 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.rp .tl-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 8px;
}

.rp .tl-lg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: #555;
}

.rp .tl-lg i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: -1px;
}

.rp .tl-lg i.c,
.rp .tl-bar .c { background: #b8894a; }
.rp .tl-lg i.r,
.rp .tl-bar .r { background: #efe3cc; }

.rp .tl-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 330px);
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.rp .tl-row + .tl-row {
    border-top: 1px solid #f4efe6;
}

.rp .tl-row .yr {
    font-size: 14px;
    color: var(--muted);
}

.rp .tl-row .yr.cur {
    color: var(--ink);
    font-weight: 600;
}

.rp .tl-bar {
    display: flex;
    gap: 2px;
    height: 18px;
}

.rp .tl-bar span {
    display: block;
    min-width: 3px;
    height: 100%;
    transition: filter .15s;
}

.rp .tl-bar span:last-child,
.rp .tl-bar .end {
    border-radius: 0 4px 4px 0;
}

.rp .tl-bar span:hover {
    filter: brightness(1.08);
}

.rp .tl-num {
    font-size: 13px;
    color: #666;
}

.rp .tl-num b {
    font-weight: 600;
    color: var(--ink);
}

.rp .tl-none {
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

/* กล่องตัวเลขตอนชี้แท่ง (ตัวเลขทุกค่าแสดงบนกราฟอยู่แล้ว กล่องนี้เป็นตัวช่วยเสริม) */
.tr-tip {
    position: fixed;
    z-index: 130;
    display: none;
    max-width: 280px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #1f1f1f;
    color: #fff;
    font-family: 'Noto Sans Thai', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

@media screen and (max-width: 1000px) {
    .rp .trend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 600px) {
    .rp .trend-grid {
        gap: 10px;
        padding: 6px 12px 12px;
    }
    .rp .tcard {
        padding: 12px 12px 10px;
        border-radius: 16px;
    }
    .rp .trend-panel .tc-head {
        gap: 8px;
        font-size: 14px;
    }
    .rp .trend-panel .tc-head .ic {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .rp .tc-plot {
        height: 130px;
    }
    .rp .tc-col .v {
        font-size: 12px;
    }
    .rp .tc-col i {
        width: 20px;
    }
    /* ช่องระหว่างแท่งแคบเกินป้าย : ย้าย % ไปเป็นแถวใต้ปี */
    .rp .tc-pc {
        display: none;
    }
    .rp .tc-chg {
        display: grid;
    }
    .rp .tlist {
        margin: 0 12px 14px;
        padding: 12px 12px 8px;
    }
    /* ตัวเลขลงไปอยู่ใต้แถบ */
    .rp .tl-row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 4px 10px;
    }
    .rp .tl-num {
        grid-column: 2;
        font-size: 12px;
    }
}

/* ตารางยาว : แสดงบางแถว + ปุ่มดูทั้งหมด (rp_toolbar $limit / สคริปต์กรองรายการ) */
.rp .more-rows {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 14px 20px 18px;
    border-top: 1px solid #f4efe6;
    background: #fff;
}

.rp .more-rows[hidden] {
    display: none;
}

/* ตอนยังย่ออยู่ : แถวสุดท้ายจางลง บอกว่ายังมีต่อ */
.rp .more-rows:not(.open)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 56px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.rp .more-rows .btn-line {
    min-width: 220px;
    padding: 9px 22px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
}

.rp .more-rows .btn-line:hover {
    background: var(--gold);
    color: var(--ink);
}

.rp .panel-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 20px;
    padding: 16px 20px;
    background: var(--cream);
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 300;
    color: #777;
}

.rp .panel-foot .total {
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
}

.rp .panel-foot .total b {
    font-size: 22px;
    font-weight: 600;
    color: var(--gold-dark);
    margin: 0 4px;
}

/* ตารางเทียบย้อนหลัง (สาขาวิชารายสาขา) */
.rp .rtable.compare {
    min-width: 1040px;
}

.rp .rtable.compare th.grp {
    text-align: center;
    border-left: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink);
}

.rp .rtable.compare .gs {
    border-left: 1px solid var(--line);
}

.rp .rtable.compare .cur {
    background: #fdf6ea;
}

.rp .rtable.compare th.cur {
    background: #f6e9d2;
}

.rp .rtable .accent {
    color: var(--red);
}

/* ปีย้อนหลังที่ไม่เปิดสาขานี้ (รวม 3 ช่องเป็นช่องเดียว) */
.rp .rtable td.none-yr {
    text-align: center;
}

.rp .rtable .none {
    font-size: 13px;
    font-weight: 300;
    color: #c4c4c4;
}

/* ---------- หน้าเขตรายเขต : ตาราง + ข้อมูลเขต ---------- */

.rp .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.rp .info {
    padding: 22px;
}

.rp .info h2 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 500;
}

.rp .info-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f4efe6;
    font-size: 14px;
}

.rp .info-row i {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 13px;
}

.rp .info-row .k {
    font-size: 12px;
    color: var(--muted);
    font-weight: 300;
}

.rp .info-row .v {
    font-weight: 400;
    word-break: break-word;
}

.rp .info-row .v a {
    color: var(--gold-dark);
}

.rp .info-row .v .src {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
}

.rp .info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* ---------- การ์ดเล็กคอลัมน์ขวา : ขนาดโรงเรียน / อัตราว่างจากการเกษียณ ---------- */

.rp .side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rp .side .panel {
    margin-bottom: 0;
}

.rp .side-card {
    padding: 18px 22px 16px;
}

.rp .side-card h2 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
}

.rp .side-card h2 small {
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

.rp .side-card .kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid #f4efe6;
    font-size: 14px;
}

.rp .side-card .kv span {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.rp .side-card .kv span i.fa-solid {
    width: 10px;
    font-size: 12px;
    color: var(--gold-dark);
}

.rp .side-card .kv small {
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
}

.rp .side-card .kv b {
    flex: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rp .side-card .dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    align-self: center;
}

.rp .size-bar {
    display: flex;
    height: 10px;
    margin: 4px 0 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #f3ede2;
}

.rp .side-card .kv + .size-bar {
    margin: 10px 0 4px;
}

/* สีไล่จากเล็กไปใหญ่ ในโทนทอง */
.rp .sz0 { background: #dcdcdc; }
.rp .sz1 { background: #efe3cc; }
.rp .sz2 { background: #e3c48e; }
.rp .sz3 { background: var(--gold); }
.rp .sz4 { background: var(--gold-dark); }

.rp .side-note {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.5;
}

/* ---------- รายชื่อเขต (ไม่เปิดสอบ / รอประกาศ) ---------- */

.rp .esa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--line);
}

.rp .esa-card {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.rp .esa-card .n {
    font-weight: 500;
}

.rp .esa-card .d {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

/* ---------- ค้นหา ---------- */

.rp .search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin-top: 18px;
    padding: 6px 6px 6px 20px;
    border: 2px solid var(--gold);
    border-radius: 999px;
    background: #fff;
}

.rp .search-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
}

.rp .search-form button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
}

.rp .search-form button:hover {
    background: var(--gold-dark);
}

.rp .empty {
    padding: 56px 20px;
    text-align: center;
    color: var(--muted);
}

.rp .empty i {
    font-size: 40px;
    color: var(--gold);
    margin-bottom: 12px;
}

.rp .empty .t {
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 4px;
}

.rp .empty .btn-line {
    margin-top: 16px;
}

.rp .rp-foot {
    height: 80px;
}

/* ---------- แจ้งคุกกี้ ---------- */

.rp .consent {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 98;
    width: min(620px, 100% - 32px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 18px;
    border-left: 5px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.rp .consent img {
    width: 44px;
    height: auto;
    flex: none;
}

.rp .consent .t {
    font-weight: 500;
}

.rp .consent .s {
    font-size: 13px;
    font-weight: 300;
    color: #555;
}

.rp .consent .btn-line {
    flex: none;
    margin-left: auto;
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 1000px) {
    .rp .split {
        grid-template-columns: 1fr;
    }
}

/* จอเล็ก : ตารางเปลี่ยนเป็นการ์ดทีละแถว */
@media screen and (max-width: 720px) {
    .rp-head h1 {
        font-size: 28px;
    }
    .rp .panel.table-panel {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }
    .rp .panel.table-panel .panel-head,
    .rp .panel.table-panel .toolbar {
        padding-left: 0;
        padding-right: 0;
    }
    .rp .panel.table-panel .panel-foot {
        border: 1px solid var(--line);
        border-radius: 16px;
    }
    .rp .table-scroll {
        overflow: visible;
        border-top: 0;
    }
    .rp .rtable,
    .rp .rtable.compare {
        display: block;
        min-width: 0;
    }
    .rp .rtable thead {
        display: none;
    }
    .rp .rtable tbody {
        display: block;
    }
    .rp .rtable tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }
    .rp .rtable tbody tr:hover td {
        background: transparent;
    }
    .rp .rtable td,
    .rp .rtable.compare .cur {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
    }
    .rp .rtable td.num {
        text-align: left;
        font-size: 17px;
        font-weight: 600;
    }
    .rp .rtable td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 300;
        color: var(--muted);
    }
    .rp .rtable td.c-rank {
        display: none;
    }
    .rp .rtable td.c-name {
        grid-column: 1 / -1;
        padding-bottom: 10px;
        border-bottom: 1px solid #f4efe6;
    }
    .rp .rtable td.c-name::before {
        content: "อันดับ " attr(data-rank);
        display: block;
        font-size: 12px;
        color: var(--gold-dark);
    }
    .rp .c-name .d {
        white-space: normal;
    }
    .rp .rtable td.wide {
        grid-column: 1 / -1;
    }
    /* ตารางเทียบย้อนหลัง : 1 บรรทัดต่อ 1 ปี  คอลัมน์ = เปิดรับ / ขึ้นบัญชี / บรรจุ / สมัคร */
    .rp .rtable.compare tr {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px 8px;
    }
    .rp .rtable.compare td.gs {
        grid-column-start: 1;
        border-left: 0;
    }
    .rp .rtable.compare td.num.cur:not(.gs):not(.oc) {
        grid-column-start: 4;
    }
    .rp .rtable.compare td[data-label]::before {
        font-size: 11px;
    }
    .rp .rtable.compare td.none-yr {
        grid-column: 1 / -1;
        text-align: left;
    }
    .rp .rtable td.c-act {
        grid-column: 1 / -1;
        width: auto;
        text-align: left;
    }
    .rp .rtable td.c-act:empty {
        display: none;
    }
    .rp .rtable td.c-act .btn-line {
        width: 100%;
    }
    /* การ์ดแบบพับได้ (.acc) : แสดงแค่ชื่อก่อน แตะแล้วรายละเอียดและปุ่มค่อยแสดง */
    .rp .rtable.acc tr {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .rp .rtable.acc tr:not(.open) > td:not(.c-name) {
        display: none;
    }
    .rp .rtable.acc tr.open > td:not(.c-name):not(.c-rank) {
        animation: acc-in .22s ease-out;
    }
    .rp .rtable.acc td.c-name {
        position: relative;
        padding-right: 116px;
    }
    .rp .rtable.acc .m-num {
        position: absolute;
        right: 38px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.1;
        text-align: right;
    }
    .rp .rtable.acc .m-num b {
        font-size: 24px;
        font-weight: 700;
        color: var(--gold-dark);
        font-variant-numeric: tabular-nums;
    }
    .rp .rtable.acc .m-num small {
        font-size: 11px;
        font-weight: 300;
        color: var(--muted);
    }
    .rp .rtable.acc .m-num small.st {
        font-size: 12px;
        font-weight: 400;
        color: #aaa;
    }
    .rp .rtable.acc .m-num small.st.closed {
        color: var(--red);
    }
    .rp .rtable.acc tr:not(.open) td.c-name {
        padding-bottom: 0;
        border-bottom: 0;
    }
    .rp .rtable.acc td.c-name::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: 0;
        top: 50%;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--gold-soft);
        color: var(--gold-dark);
        font-size: 11px;
        transition: transform .2s;
    }
    .rp .rtable.acc tr.open td.c-name::after {
        transform: rotate(180deg);
    }
    .rp .rtable.acc tr.open {
        border-color: var(--gold);
        box-shadow: 0 6px 18px rgba(214, 177, 114, 0.22);
    }
    @keyframes acc-in {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: none; }
    }
    .rp .esa-grid {
        padding: 12px 0 0;
        border-top: 0;
    }
    .rp .panel-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 480px) {
    .rp {
        padding-top: 50px;
    }
    .rp-head {
        padding-top: 22px;
    }
    .rp-head h1 {
        font-size: 24px;
    }
    .rp .stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .rp .stat {
        padding: 14px;
    }
    .rp .stat .label {
        font-size: 14px;
        gap: 8px;
    }
    .rp .stat .ic {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .rp .stat .value {
        font-size: 28px;
    }
    .rp .stat .value small {
        font-size: 12px;
        margin-left: 3px;
    }
    .rp .stat .sub {
        font-size: 12px;
    }
    .rp .stats.tabs .stat {
        padding: 12px 14px;
    }
    .rp .stats.tabs .stat .value {
        font-size: 32px;
    }
    /* การ์ด i-TEST ใต้การ์ดที่ยังแสดงบนมือถือ (แท็บสังกัด) : ห่างเท่าช่องไฟระหว่างการ์ด 10px */
    .rp .stats:not(.has-msum) + .itest {
        margin-top: -18px;
    }
    .rp-head .sub {
        font-size: 12px;
    }
    .rp-head .updated {
        font-size: 11.5px;
    }
    .rp .toolbar .count {
        margin-left: 0;
        width: 100%;
    }
    .rp .filter {
        max-width: none;
    }
    .rp .search-form button span {
        display: none;
    }
    /* เว้นที่ให้เมนูล่างของมือถือ */
    .rp .rp-foot {
        height: 140px;
    }
    .rp .consent {
        bottom: calc(112px + env(safe-area-inset-bottom, 0px));
        flex-wrap: wrap;
    }
    .rp .consent .btn-line {
        width: 100%;
    }
}

/* ============================================================
   หน้าวิชาเอก (r=4) : เลือกจำนวนปีที่เทียบ · คอลัมน์อีกรอบ · ข้อมูลการย้าย  (เพิ่ม 2026-09-29)
   ============================================================ */

/* ปุ่ม "รายละเอียด" ในตาราง : กะทัดรัด (ตารางเทียบหลายปีกว้างขึ้นมาก) */
.rp .rtable .c-act .btn-line {
    gap: 5px;
    padding: 4px 11px;
    border-width: 1.5px;
    font-size: 13px;
}

.rp .rtable .c-act .btn-line i {
    font-size: 11px;
}

/* หัวตาราง : ปุ่มเลือกจำนวนปี + คำอธิบาย ชิดขวา */
.rp .ph-r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.rp .yr-pick {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: #f5efe4;
    font-size: 13px;
    white-space: nowrap;
}

.rp .yr-pick span {
    padding: 0 6px 0 10px;
    color: var(--muted);
}

.rp .yr-pick a {
    padding: 4px 12px;
    border-radius: 999px;
    color: #6b604f;
    text-decoration: none;
    transition: background .15s;
}

.rp .yr-pick a:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
}

.rp .yr-pick a.on {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ตารางเทียบ 4–5 ปี กว้างขึ้น (เลื่อนซ้ายขวาในกรอบตาราง) */
.rp .rtable.compare.wide {
    min-width: 1320px;
}

/* คอลัมน์อีกรอบ (ตำแหน่งรอบกรณีพิเศษ / รอบทั่วไป ของแต่ละปี) : ป้ายสีส้มแบบเดียวกับแถบสลับรอบ พื้นช่องอุ่นอ่อน ๆ */
.rp .rtable.compare th .sp-h {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(240, 149, 74, 0.14);
    color: #b8621c;
    font-size: 12px;
    font-weight: 500;
}

.rp .rtable.compare td.oc {
    background: #fffaf4;
    border-left: 1px dashed #efd9c2;
}

.rp .rtable.compare th.oc {
    border-left: 1px dashed #efd9c2;
}

.rp .rtable.compare td.oc.cur {
    background: #fbf1e4;
}

/* การ์ดกราฟเทียบย้อนหลัง : 3–5 ใบต่อแถวตามจำนวนการ์ด */
.rp .trend-grid.g3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rp .trend-grid.g5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 5 ปี : ตัวเลขเล็กลง แท่งแคบลง ไม่ให้ตัวเลขข้างกันชนกัน */
.rp .tcard.n5 .tc-col .v {
    font-size: 12px;
}

.rp .tcard.n5 .tc-col i {
    width: 18px;
}

/* ---------- ข้อมูลการย้ายครูของวิชาเอก (rp_rotation) ---------- */
.rp .rot-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 8px 20px 4px;
}

.rp .rk {
    min-width: 0;
    padding: 14px 16px 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.rp .rk-l {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.rp .rk-l .ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 14px;
}

.rp .rk-v {
    margin-top: 8px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.rp .rk-v small {
    margin-left: 5px;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
}

.rp .rk-s {
    margin-top: 4px;
    font-size: 12.5px;
    color: #777;
}

.rp .rot-hist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 10px 20px 0;
    font-size: 13px;
    color: #666;
}

.rp .rot-hist span {
    color: var(--muted);
}

.rp .rot-hist i {
    font-style: normal;
    color: #cdbfa6;
}

.rp .rot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 14px 20px 4px;
}

.rp .rcard {
    min-width: 0;
    padding: 14px 16px 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.rp .rrow {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid #f4efe6;
}

.rp .tl-top + .rrow {
    border-top: 0;
}

.rp .rrow .nm {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp .rrow .nm a {
    color: var(--ink);
    text-decoration: none;
}

.rp .rrow .nm a:hover {
    color: var(--gold-dark);
}

.rp .rbar {
    display: flex;
    gap: 2px;
    height: 14px;
}

.rp .rbar span {
    display: block;
    min-width: 3px;
    height: 100%;
    transition: filter .15s;
}

.rp .rbar span:last-child {
    border-radius: 0 4px 4px 0;
}

.rp .rbar span:hover {
    filter: brightness(1.08);
}

.rp .rbar .x { background: #b8894a; }
.rp .rbar .i { background: #efe3cc; }

.rp .rrow .n {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rp .rot-flow {
    margin: 14px 20px 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.rp .fl-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.rp .fl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f7f1e6;
    font-size: 13px;
    color: #444;
}

.rp .fl i {
    font-size: 11px;
    color: var(--gold-dark);
}

.rp .fl b {
    margin-left: 2px;
    font-weight: 600;
    color: var(--ink);
}

@media screen and (max-width: 1200px) {
    .rp .trend-grid.g5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1000px) {
    .rp .trend-grid.g3,
    .rp .trend-grid.g5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rp .rot-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rp .rot-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 720px) {
    /* ตารางเป็นการ์ด : 1 บรรทัดต่อ 1 ปี  คอลัมน์ที่ 5 = อีกรอบ */
    .rp .rtable.compare.has-o tr {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .rp .rtable.compare td.oc {
        grid-column-start: 5;
        border-left: 0;
        background: transparent;
    }
    .rp .rtable.compare.has-o td.none-yr {
        grid-column: 1 / 5;
    }
    .rp .yr-pick {
        font-size: 12px;
    }
    .rp .yr-pick a {
        padding: 3px 9px;
    }
}

@media screen and (max-width: 600px) {
    .rp .rot-kpis {
        gap: 10px;
        padding: 6px 12px 4px;
    }
    .rp .rk {
        padding: 12px 12px 10px;
        border-radius: 16px;
    }
    .rp .rk-l {
        gap: 8px;
        font-size: 14px;
    }
    .rp .rk-l .ic {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .rp .rk-v {
        font-size: 22px;
    }
    .rp .rot-grid {
        padding: 12px 12px 4px;
    }
    .rp .rcard {
        padding: 12px 12px 8px;
    }
    .rp .rrow {
        grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 34px;
        gap: 8px;
    }
    .rp .rot-flow,
    .rp .rot-hist {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* ตารางที่มีคอลัมน์อีกรอบ : ช่องแคบลงให้พอดีกรอบบนจอคอม (ปุ่มรายละเอียดไม่ล้นขอบ) */
.rp .rtable.compare.has-o th,
.rp .rtable.compare.has-o td {
    padding-left: 9px;
    padding-right: 9px;
}

.rp .rtable.compare.has-o .c-rank {
    width: 46px;
}

.rp .rtable.compare.has-o th .sp-h {
    padding: 1px 7px;
    font-size: 11px;
}

@media screen and (max-width: 720px) {
    .rp .rtable.compare td.oc,
    .rp .rtable.compare td.oc.cur {
        background: transparent;
    }
}

/* ============================================================
   ตารางเทียบย้อนหลัง (r=4) : พอดีกรอบ ไม่ต้องเลื่อนซ้ายขวา (2026-09-29)
   ช่องแคบลง ตัวเลขเล็กลงเล็กน้อย ชื่อเขตขึ้นบรรทัดใหม่ได้ ปุ่มรายละเอียดเป็นไอคอนวงกลม
   ============================================================ */
.rp .rtable.compare,
.rp .rtable.compare.wide {
    min-width: 0;
}

.rp .rtable.compare th,
.rp .rtable.compare td,
.rp .rtable.compare.has-o th,
.rp .rtable.compare.has-o td {
    padding-left: 6px;
    padding-right: 6px;
}

.rp .rtable.compare th {
    font-size: 12px;
}

.rp .rtable.compare td.num {
    font-size: 14px;
}

.rp .rtable.compare .c-rank {
    width: 40px;
}

.rp .rtable.compare .rank-no {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.rp .rtable.compare .c-name .n {
    font-size: 15px;
}

.rp .rtable.compare th .sp-h,
.rp .rtable.compare.has-o th .sp-h {
    padding: 1px 6px;
    font-size: 11px;
}

/* ปุ่มรายละเอียด : ไอคอนลูกศรในวงกลม (คำอธิบายอยู่ใน title / aria-label) */
.rp .rtable .c-act .act-ic {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
}

.rp .rtable .c-act .act-ic .t {
    display: none;
}

.rp .rtable .c-act .act-ic i {
    font-size: 12px;
}

@media screen and (max-width: 720px) {
    /* การ์ดมือถือ : ปุ่มเต็มแถวมีคำว่า "รายละเอียด" เหมือนเดิม */
    .rp .rtable .c-act .act-ic {
        width: 100%;
        height: auto;
        padding: 7px 16px;
        border-radius: 999px;
    }
    .rp .rtable .c-act .act-ic .t {
        display: inline;
    }
}

/* ============================================================
   การ์ดมือถือของตารางเทียบย้อนหลัง (r=4) : แบบตารางเล็ก อ่านง่าย (2026-09-29)
   หัวคอลัมน์ครั้งเดียว (td.m-hd) + ป้ายปีต้นแถว (td.m-yr)  ไม่ซ้ำป้ายทุกช่อง
   ============================================================ */
.rp .rtable.compare td.m-hd,
.rp .rtable.compare td.m-yr {
    display: none;
}

@media screen and (max-width: 720px) {
    .rp .rtable.compare tr {
        grid-template-columns: 42px repeat(4, minmax(0, 1fr));
        gap: 0 6px;
    }
    .rp .rtable.compare.has-o tr {
        grid-template-columns: 42px repeat(5, minmax(0, 1fr));
    }
    .rp .rtable.compare td[data-label]::before {
        display: none;
    }
    .rp .rtable.compare td.c-name {
        margin-bottom: 4px;
    }
    /* หัวคอลัมน์ : ลูกของ td วางเป็นช่องของ grid แถวเดียวกันตรง ๆ */
    .rp .rtable.compare td.m-hd {
        display: contents;
    }
    .rp .rtable.compare td.m-hd span {
        padding: 6px 0 4px;
        font-size: 11px;
        color: var(--muted);
        border-bottom: 1px solid #f1e9da;
    }
    .rp .rtable.compare td.m-hd span.o {
        color: #b8621c;
    }
    .rp .rtable.compare td.m-yr {
        display: block;
        grid-column-start: 1;
        padding: 7px 0;
        font-size: 13px;
        color: var(--muted);
        border-bottom: 1px solid #f7f2e9;
    }
    .rp .rtable.compare td.m-yr.cur {
        color: var(--gold-dark);
        font-weight: 600;
    }
    .rp .rtable.compare td.num,
    .rp .rtable.compare td.none-yr {
        padding: 7px 0;
        font-size: 16px;
        border-bottom: 1px solid #f7f2e9;
    }
    .rp .rtable.compare td.gs {
        grid-column-start: 2;
    }
    .rp .rtable.compare td.num.cur:not(.gs):not(.oc) {
        grid-column-start: 5;
    }
    .rp .rtable.compare td.oc {
        grid-column-start: 6;
        color: #8a4a12;
    }
    .rp .rtable.compare td.none-yr,
    .rp .rtable.compare.has-o td.none-yr {
        grid-column: 2 / 6;
        font-size: 13px;
    }
    .rp .rtable.compare td.c-act {
        margin-top: 10px;
    }
}

/* หัวแผงภาพรวมวิชาเอก / การย้าย บนมือถือ : ชื่อเล็กลง ส่วน "เทียบย้อนหลัง N ปี" เป็นบรรทัดรองสีทอง (2026-09-29) */
@media screen and (max-width: 720px) {
    .rp .trend-panel .panel-head h2 {
        font-size: 18px;
        line-height: 1.4;
    }
    .rp .trend-panel h2 .nw {
        display: block;
        margin-top: 2px;
        font-size: 14px;
        font-weight: 500;
        color: var(--gold-dark);
    }
    .rp .trend-panel h2 .nw .dt {
        display: none;
    }
    .rp .trend-panel .panel-head .note {
        font-size: 12px;
    }
}

.rp .nwp {
    white-space: nowrap;
}

/* ท้ายตารางเทียบย้อนหลัง (r=4) : ยอดรวม + ยอดอีกรอบเป็นบรรทัดเล็กใต้ยอด (2026-09-29) */
.rp .cmp-foot .total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.rp .cmp-foot .total .ot {
    font-size: 13px;
    font-weight: 400;
    color: #b8621c;
}

@media screen and (max-width: 720px) {
    /* มือถือ : ยอดขึ้นก่อน (แถวเดียว) หมายเหตุตัวเล็ก ระยะแคบ */
    .rp .cmp-foot {
        gap: 6px;
        padding: 10px 14px;
    }
    .rp .cmp-foot .total {
        order: -1;
        width: 100%;
        align-items: flex-start;
        font-size: 14px;
    }
    .rp .cmp-foot .total b {
        font-size: 19px;
    }
    .rp .cmp-foot .total .ot {
        font-size: 12px;
    }
    .rp .cmp-foot .fn {
        font-size: 11px;
        line-height: 1.5;
    }
}

/* แท็บสังกัดหน้าวิชาเอก (r=4) บนมือถือ : แถบแท็บแถวเดียว 4 ช่อง แทนการ์ด 2 x 2 (2026-09-29) */
.rp .stats.tabs .ls {
    display: none;
}

@media screen and (max-width: 600px) {
    .rp .stats.tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        margin-bottom: 18px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    }
    .rp .stats.tabs .stat {
        padding: 8px 4px 9px;
        border: 0;
        border-radius: 14px;
        box-shadow: none;
        background: transparent;
        text-align: center;
    }
    .rp .stats.tabs a.stat:hover {
        transform: none;
        box-shadow: none;
    }
    .rp .stats.tabs .stat.main {
        background: var(--gold);
        box-shadow: 0 4px 12px rgba(214, 177, 114, 0.4);
    }
    .rp .stats.tabs .stat .label {
        justify-content: center;
        font-size: 12.5px;
        white-space: nowrap;
    }
    .rp .stats.tabs .stat .ic,
    .rp .stats.tabs .stat .go,
    .rp .stats.tabs .lf,
    .rp .stats.tabs .stat .value small {
        display: none;
    }
    .rp .stats.tabs .ls {
        display: inline;
    }
    .rp .stats.tabs .stat .value {
        margin-top: 2px;
        font-size: 24px;
        letter-spacing: 0;
    }
    .rp .stats.tabs .stat .sub {
        margin-top: 1px;
        font-size: 11px;
    }
    .rp .stats.tabs + .itest {
        margin-top: 0;
    }
}

/* ============================================================
   หัวหน้าวิชาเอก (r=4) บนมือถือ : ให้เด่น (2026-09-29)
   ชื่อ : ป้าย "วิชาเอก" สีทองเหนือชื่อ
   แท็บสังกัด : แท็บที่เลือกเป็นการ์ดใหญ่ไล่ทองเต็มแถว (ตัวเลขใหญ่ + เขต)  อีก 3 แท็บเป็นปุ่มเล็กแถวล่าง
   ============================================================ */
.rp .rp-head h1 .ey-m {
    display: inline;
}

@media screen and (max-width: 600px) {
    .rp .rp-head h1 .ey-m {
        display: block;
        margin-bottom: 2px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
        color: var(--gold-dark);
    }
    .rp .rp-head h1 .h1-sub {
        font-size: 18px;
        color: #666;
    }

    .rp .stats.tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    /* ปุ่มสังกัดอื่น : การ์ดเล็ก ชื่อ + ตัวเลข */
    .rp .stats.tabs .stat {
        padding: 9px 6px 10px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }
    .rp .stats.tabs .stat .value {
        font-size: 22px;
    }
    /* แท็บที่เลือก : การ์ดใหญ่เต็มแถว อยู่บนสุด */
    .rp .stats.tabs .stat.main {
        order: -1;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2px 12px;
        padding: 16px 18px;
        border: 0;
        border-radius: 20px;
        text-align: left;
        background: linear-gradient(135deg, #dcbb80 0%, #c29a58 55%, #a8844a 100%);
        box-shadow: 0 10px 24px rgba(168, 132, 74, 0.35);
    }
    .rp .stats.tabs .stat.main .label {
        grid-column: 1;
        justify-content: flex-start;
        font-size: 14px;
        opacity: .95;
    }
    .rp .stats.tabs .stat.main .lf {
        display: inline;
    }
    .rp .stats.tabs .stat.main .ls {
        display: none;
    }
    .rp .stats.tabs .stat.main .ic {
        display: grid;
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    .rp .stats.tabs .stat.main .value {
        grid-column: 1;
        margin-top: 4px;
        font-size: 42px;
        line-height: 1;
    }
    .rp .stats.tabs .stat.main .value small {
        display: inline;
        font-size: 15px;
        font-weight: 400;
    }
    .rp .stats.tabs .stat.main .sub {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        padding: 8px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.22);
        font-size: 13px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
    }
    .rp .stats.tabs .stat.main .sub .lf {
        display: block;
        font-size: 11px;
        opacity: .9;
    }
}

/* ============================================================
   การ์ดหัวหน้าวิชาเอกบนมือถือ (r=4 .m-hero) : เด่นกว่าเดิม (2026-09-29)
   พื้นเข้มไล่ทอง ยอดตำแหน่งตัวใหญ่สีทอง แท็บสังกัดเป็นปุ่มในการ์ด
   จอไม่เกิน 600px ใช้การ์ดนี้แทน ชื่อหน้า + คำอธิบาย + การ์ดสังกัด 4 ใบ  จอใหญ่ซ่อน
   ============================================================ */
.rp .m-hero {
    display: none;
}

@media screen and (max-width: 600px) {
    .rp.mj-page .rp-head h1,
    .rp.mj-page .rp-head .sub,
    .rp.mj-page .rp-head .updated,
    .rp.mj-page .stats.tabs {
        display: none;
    }
    .rp.mj-page .rp-head {
        padding-bottom: 6px;
    }
    .rp.mj-page .rp-head .rp-top {
        margin-bottom: 4px;
    }
    .rp .m-hero {
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0 0 16px;
        padding: 18px 18px 14px;
        border-radius: 24px;
        color: #fff;
        background:
            radial-gradient(circle at 100% 0%, rgba(233, 201, 143, 0.38), transparent 46%),
            linear-gradient(150deg, #2b2419 0%, #4a3a22 58%, #6e5430 100%);
        box-shadow: 0 14px 30px rgba(74, 58, 34, 0.35);
    }
    /* วงแหวนทองจาง ๆ มุมขวา (ตกแต่ง) */
    .rp .m-hero::after {
        content: "";
        position: absolute;
        right: -46px;
        top: 34px;
        width: 150px;
        height: 150px;
        border: 18px solid rgba(233, 201, 143, 0.10);
        border-radius: 50%;
        pointer-events: none;
    }
    .rp .mh-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .rp .mh-ey {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 11px;
        border-radius: 999px;
        background: rgba(214, 177, 114, 0.22);
        color: #f0d6a6;
        font-size: 13px;
        font-weight: 500;
    }
    .rp .mh-ey i {
        font-size: 11px;
    }
    .rp .mh-upd {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.62);
        white-space: nowrap;
    }
    .rp .mh-upd i {
        margin-right: 4px;
    }
    .rp .mh-name {
        position: relative;
        z-index: 1;
        margin: 12px 0 8px;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
    }
    .rp .mh-num {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-end;
        gap: 10px;
    }
    .rp .mh-num b {
        font-size: 62px;
        font-weight: 700;
        line-height: 0.95;
        letter-spacing: -1px;
        color: #eccb8e;
        font-variant-numeric: tabular-nums;
        text-shadow: 0 4px 18px rgba(233, 201, 143, 0.25);
    }
    .rp .mh-num span {
        padding-bottom: 4px;
        font-size: 17px;
        font-weight: 500;
    }
    .rp .mh-num small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.72);
    }
    .rp .mh-tabs {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        margin-top: 16px;
        padding: 4px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.08);
    }
    .rp .mh-tabs a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 7px 2px 6px;
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        line-height: 1.25;
    }
    .rp .mh-tabs a b {
        font-size: 18px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    .rp .mh-tabs a span {
        font-size: 11px;
        white-space: nowrap;
    }
    .rp .mh-tabs a.zero {
        opacity: 0.45;
    }
    .rp .mh-tabs a.on {
        background: linear-gradient(180deg, #f0d6a6, #d6b172);
        color: #2b2419;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .rp .m-hero + .itest {
        margin-top: 0;
    }
}

/* การ์ดหัวหน้าวิชาเอกบนมือถือ : เต็มความกว้างจอ ชิดใต้แถบเมนู  ไม่แสดง breadcrumb / ป้ายปี (2026-09-29) */
@media screen and (max-width: 600px) {
    .rp.mj-page .rp-head {
        display: none;
    }
    .rp.mj-page .m-hero {
        margin: 0 -16px 16px;
        padding: 22px 20px 16px;
        border-radius: 0 0 28px 28px;
    }
}

/* การ์ด i-TEST บนมือถือ : แถวเดียวเตี้ย ๆ (รูปเล็ก · ชื่อ + คำโปรย 1 บรรทัด · ปุ่มเล็กขวา) ประหยัดพื้นที่ (2026-09-29) */
@media screen and (max-width: 600px) {
    .rp .itest {
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 18px;
        padding: 8px 10px 8px 8px;
        border-radius: 16px;
    }
    .rp .itest-av {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }
    .rp .itest-av img {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }
    .rp .itest-t {
        gap: 6px;
        font-size: 14px;
        line-height: 1.3;
        white-space: nowrap;
    }
    .rp .itest-pro {
        padding: 0 7px;
        font-size: 10px;
    }
    .rp .itest-d {
        display: block;
        margin-top: 1px;
        font-size: 12px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rp .itest-go,
    .rp .itest .btn-line.itest-go {
        width: auto;
        gap: 4px;
        padding: 5px 11px;
        border-width: 1.5px;
        font-size: 12px;
    }
    .rp .itest-go i {
        font-size: 10px;
    }
}

/* การ์ด i-TEST บนมือถือ : คำโปรยแสดงครบทุกคำ (ตัวเล็กลง ขึ้นบรรทัดใหม่ได้) */
@media screen and (max-width: 600px) {
    .rp .itest {
        align-items: center;
    }
    .rp .itest-d {
        font-size: 11px;
        line-height: 1.4;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* การ์ด i-TEST บนมือถือ : ตัวอักษรคำโปรยเล็กลงอีก */
@media screen and (max-width: 600px) {
    .rp .itest-d {
        font-size: 9.5px;
        line-height: 1.35;
    }
}

/* การ์ด i-TEST บนมือถือ : คำโปรยเล็กลงอีก · ปุ่มสมัครสมาชิกแคบลง (ไม่มีลูกศร) */
@media screen and (max-width: 600px) {
    .rp .itest-d {
        font-size: 8.5px;
    }
    .rp .itest-go,
    .rp .itest .btn-line.itest-go {
        padding: 4px 8px;
        font-size: 11px;
        border-width: 1px;
    }
    .rp .itest-go i {
        display: none;
    }
}

/* ตารางเทียบย้อนหลัง (r=4) บนมือถือ : ไม่แสดงหัวข้อ ใช้ปุ่มเลือกจำนวนปี (ขนาดเล็ก) แทน */
@media screen and (max-width: 720px) {
    .rp #cmp .panel-head h2 {
        display: none;
    }
    .rp #cmp .panel-head {
        padding-bottom: 6px;
    }
    .rp #cmp .ph-r {
        align-items: flex-start;
    }
    .rp #cmp .yr-pick {
        padding: 2px;
        font-size: 11px;
    }
    .rp #cmp .yr-pick span {
        padding: 0 4px 0 8px;
    }
    .rp #cmp .yr-pick a {
        padding: 2px 9px;
    }
}

/* หัวตารางเทียบย้อนหลังบนมือถือ : "รายชื่อเขตที่เปิดสอบ  N เขต" ซ้าย · ปุ่มเลือกจำนวนปีขวา */
.rp .m-ttl {
    display: none;
}

@media screen and (max-width: 720px) {
    .rp #cmp .panel-head {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .rp #cmp .m-ttl {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
    }
    .rp #cmp .m-ttl span {
        padding: 1px 8px;
        border-radius: 999px;
        background: var(--gold-soft);
        color: var(--gold-dark);
        font-size: 11px;
        font-weight: 500;
    }
    .rp #cmp .ph-r {
        align-items: flex-end;
    }
}

/* ช่องค้นหาของตารางเทียบย้อนหลังบนมือถือ : เตี้ย เส้นบาง ประหยัดพื้นที่ */
@media screen and (max-width: 720px) {
    .rp #cmp .toolbar {
        padding-bottom: 8px;
    }
    .rp #cmp .filter {
        height: 34px;
        gap: 8px;
        padding: 0 12px;
        border-width: 1.5px;
        background: #fffdf9;
    }
    .rp #cmp .filter i {
        font-size: 13px;
    }
    .rp #cmp .filter input {
        font-size: 14px;
    }
    .rp #cmp .filter input::placeholder {
        font-size: 13px;
    }
}

/* การ์ดเขตของตารางเทียบย้อนหลัง (r=4) บนมือถือ : เตี้ยลง (แถวเดียว : เลขอันดับในวงกลม · ชื่อเขต · N ตำแหน่ง · ปุ่มเปิด) */
@media screen and (max-width: 720px) {
    .rp .rtable.compare tr {
        margin-bottom: 8px;
        padding: 9px 12px;
        border-radius: 14px;
    }
    .rp .rtable.compare td.c-name {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 26px;
        padding-right: 112px;
    }
    .rp .rtable.compare td.c-name::before {
        content: attr(data-rank);
        flex: none;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--gold-soft);
        color: var(--gold-dark);
        font-size: 11px;
        font-weight: 600;
    }
    .rp .rtable.compare tr.top td.c-name::before {
        background: var(--gold);
        color: #fff;
    }
    .rp .rtable.compare .c-name .n {
        min-width: 0;
        font-size: 15px;
        line-height: 1.3;
    }
    .rp .rtable.compare .m-num {
        right: 34px;
        flex-direction: row;
        align-items: baseline;
        gap: 3px;
    }
    .rp .rtable.compare .m-num b {
        font-size: 19px;
    }
    .rp .rtable.compare td.c-name::after {
        width: 24px;
        height: 24px;
        margin-top: -12px;
        font-size: 10px;
    }
    .rp .rtable.compare tr.open td.c-name {
        padding-bottom: 8px;
    }
}

/* ท้ายตารางเทียบย้อนหลังบนมือถือ : เล็กลงอีก (ยอดรวม + ยอดกรณีพิเศษอยู่แถวเดียวกัน หมายเหตุตัวเล็ก) */
@media screen and (max-width: 720px) {
    .rp .cmp-foot {
        gap: 4px;
        padding: 8px 12px;
        border-radius: 14px;
    }
    .rp .cmp-foot .total {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 10px;
        font-size: 13px;
    }
    .rp .cmp-foot .total b {
        margin: 0 3px;
        font-size: 17px;
    }
    .rp .cmp-foot .total .ot {
        font-size: 11px;
    }
    .rp .cmp-foot .fn {
        font-size: 10px;
        line-height: 1.4;
    }
}

/* การ์ดกราฟเทียบย้อนหลังบนมือถือ : 1 คอลัมน์ เตี้ยลง (การ์ดกว้างเต็มแถว ป้าย % กลับมาอยู่บนกราฟได้) (2026-09-29) */
@media screen and (max-width: 600px) {
    .rp .trend-grid,
    .rp .trend-grid.g3,
    .rp .trend-grid.g5 {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .rp .tcard {
        padding: 10px 14px 8px;
    }
    .rp .trend-panel .tc-head small {
        display: inline;
        margin-left: 6px;
    }
    .rp .tc-plot {
        height: 96px;
        margin-top: 4px;
    }
    .rp .tc-col .v {
        margin-bottom: 4px;
        font-size: 12px;
    }
    .rp .tc-col i {
        width: 22px;
    }
    .rp .tc-pc {
        display: block;
        font-size: 10px;
        padding: 0 6px;
    }
    .rp .tc-chg {
        display: none;
    }
    .rp .tc-yrs {
        padding-top: 3px;
        font-size: 11px;
    }
    .rp .tc-delta {
        margin-top: 4px;
        padding-top: 4px;
        font-size: 11px;
    }
}

/* แผงภาพรวมวิชาเอก / การย้าย บนมือถือ : ไม่มีกรอบนอก การ์ดข้างในวางบนพื้นหน้าได้เลย (2026-09-29) */
@media screen and (max-width: 600px) {
    .rp .panel.trend-panel {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .rp .trend-panel .panel-head {
        padding: 0 0 10px;
    }
    .rp .trend-panel .trend-grid,
    .rp .trend-panel .rot-kpis,
    .rp .trend-panel .rot-grid {
        padding-left: 0;
        padding-right: 0;
    }
    .rp .trend-panel .tlist,
    .rp .trend-panel .rot-flow,
    .rp .trend-panel .rot-hist {
        margin-left: 0;
        margin-right: 0;
    }
    .rp .trend-panel .panel-foot {
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* หัวแผงภาพรวม : มือถือใช้หัวข้อสั้น "ภาพรวมเปรียบเทียบ N ปี" แทนชื่อวิชาเอกยาว ๆ (ชื่ออยู่ในการ์ดหัวหน้าแล้ว) */
.rp .trend-panel h2 .m-t {
    display: none;
}

@media screen and (max-width: 720px) {
    .rp .trend-panel h2 .m-t {
        display: inline;
    }
    .rp .trend-panel h2 .d-t {
        display: none;
    }
}

/* การ์ดกราฟบนมือถือ : เตี้ยลงอีก — ข้อความเทียบปีก่อนย้ายขึ้นไปอยู่มุมขวาของหัวการ์ด กราฟสูง 72px */
@media screen and (max-width: 600px) {
    .rp .tcard {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
        padding: 8px 12px 6px;
        border-radius: 14px;
    }
    .rp .tcard > .tc-plot,
    .rp .tcard > .tc-yrs,
    .rp .tcard > .tc-chg {
        grid-column: 1 / -1;
    }
    .rp .trend-panel .tc-head {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        gap: 6px;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
    }
    .rp .trend-panel .tc-head > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rp .trend-panel .tc-head .ic {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        font-size: 10px;
    }
    .rp .trend-panel .tc-head small {
        font-size: 11px;
    }
    .rp .tcard > .tc-delta {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 10.5px;
        white-space: nowrap;
    }
    .rp .tc-plot {
        height: 72px;
        margin-top: 2px;
    }
    .rp .tc-col .v {
        margin-bottom: 3px;
        font-size: 11px;
    }
    .rp .tc-col i {
        width: 18px;
    }
    .rp .tc-dot {
        width: 6px;
        height: 6px;
    }
    .rp .tc-pc {
        font-size: 9px;
        line-height: 1.35;
    }
    .rp .tc-yrs {
        padding-top: 2px;
        font-size: 10.5px;
    }
}

/* แผงการย้ายบนมือถือ : ตัวเลข 4 ช่องรวมในการ์ดเดียว แถวเดียว (เลข · หน่วย · ชื่อ · คำอธิบายสั้น) (2026-09-29) */
@media screen and (max-width: 600px) {
    .rp .rot-panel .panel-head .note {
        display: block;
        width: 100%;
        font-size: 11px;
    }
    .rp .rot-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
    }
    .rp .rk {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px 7px;
        border: 0;
        border-left: 1px solid #f4efe6;
        border-radius: 0;
        text-align: center;
    }
    .rp .rk:first-child {
        border-left: 0;
    }
    .rp .rk-l {
        order: 2;
        display: block;
        margin-top: 2px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.25;
    }
    .rp .rk-l .ic {
        display: none;
    }
    .rp .rk-v {
        order: 1;
        margin-top: 0;
        font-size: 21px;
        color: var(--gold-dark);
    }
    .rp .rk-v small {
        margin-left: 2px;
        font-size: 10px;
        color: var(--muted);
    }
    .rp .rk-s {
        order: 3;
        margin-top: 2px;
        font-size: 9.5px;
        line-height: 1.3;
        color: var(--muted);
    }
    .rp .rot-grid {
        gap: 8px;
        padding-top: 10px;
    }
    .rp .rcard {
        padding: 10px 12px 6px;
        border-radius: 14px;
    }
    .rp .rcard .tc-head {
        font-size: 13px;
    }
    .rp .rrow {
        padding: 4px 0;
    }
    .rp .rrow .nm,
    .rp .rrow .n {
        font-size: 12.5px;
    }
    .rp .rbar {
        height: 10px;
    }
    .rp .rot-flow {
        padding: 10px 12px;
        border-radius: 14px;
    }
    .rp .fl {
        padding: 3px 9px;
        font-size: 11px;
    }
}

/* ย้ายข้ามภาค + หมายเหตุ บนมือถือ : รายการ 2 คอลัมน์ ชื่อภาคย่อ (ไม่มีคำว่า "ภาค") ตัวเลขชิดขวา  หมายเหตุตัวเล็ก */
@media screen and (max-width: 600px) {
    .rp .rot-flow .tc-head small {
        display: none;
    }
    .rp .fl-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        margin-top: 6px;
    }
    .rp .fl {
        justify-content: space-between;
        gap: 4px;
        min-width: 0;
        padding: 3px 8px;
        border-radius: 8px;
        font-size: 10.5px;
    }
    .rp .fl .fr {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .rp .fl .pf {
        display: none;
    }
    .rp .fl i {
        font-size: 8px;
    }
    .rp .trend-panel .panel-foot,
    .rp .trend-panel .panel-foot span {
        font-size: 10px;
        line-height: 1.45;
    }
}

/* ตารางเทียบย้อนหลัง (r=4) จอคอม : ตัวเลขและหัวคอลัมน์อยู่กึ่งกลางคอลัมน์ */
@media screen and (min-width: 721px) {
    .rp .rtable.compare th.num,
    .rp .rtable.compare td.num {
        text-align: center;
    }
}

/* หมายเหตุท้ายตารางเทียบย้อนหลังบนมือถือ : เล็กลงอีก */
@media screen and (max-width: 720px) {
    .rp .cmp-foot .fn {
        font-size: 8.5px;
        line-height: 1.4;
    }
}

/* การ์ดท้ายตารางเทียบย้อนหลังบนมือถือ : เตี้ยลงอีก */
@media screen and (max-width: 720px) {
    .rp .cmp-foot {
        gap: 2px;
        padding: 6px 10px;
        border-radius: 12px;
    }
    .rp .cmp-foot .total {
        gap: 0 8px;
        font-size: 12px;
        line-height: 1.3;
    }
    .rp .cmp-foot .total b {
        font-size: 15px;
    }
    .rp .cmp-foot .total .ot {
        font-size: 10px;
    }
    .rp .cmp-foot .fn {
        line-height: 1.3;
    }
}

/* การ์ดหัวมือถือ : มุมขวาของแถวตัวเลข "เปรียบเทียบ N ปี" + ตำแหน่งปีก่อน ๆ ตัวเล็ก */
@media screen and (max-width: 600px) {
    .rp .mh-num .mh-hist {
        margin-left: auto;
        align-self: flex-end;
        padding: 6px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 11px;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.75);
    }
    .rp .mh-hist .hh {
        margin-bottom: 1px;
        font-size: 10px;
        font-weight: 500;
        color: #f0d6a6;
        white-space: nowrap;
    }
    .rp .mh-hist div:not(.hh) {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
    .rp .mh-hist b {
        font-weight: 600;
        color: #fff;
        font-variant-numeric: tabular-nums;
    }
}

@media screen and (max-width: 600px) {
    /* ตัวเลขใน "เปรียบเทียบ N ปี" ไม่ใช้สไตล์ตัวเลขใหญ่ของ .mh-num */
    .rp .mh-num .mh-hist b {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: 0;
        color: #fff;
        text-shadow: none;
    }
    .rp .mh-num .mh-hist span {
        padding: 0;
        font-size: 11px;
        font-weight: 400;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.72);
    }
    .rp .mh-num > span {
        min-width: 0;
    }
}

/* "ข้อมูลเปิดสอบ N ปี ย้อนหลัง" บนการ์ดหัวมือถือ : ไม่มีกรอบ / พื้น */
@media screen and (max-width: 600px) {
    .rp .mh-num .mh-hist {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
}

/* การ์ดเขตบนมือถือ (ตารางเทียบย้อนหลัง) : ตัวเลข + หัวคอลัมน์กึ่งกลางช่อง ตัวเลขน้ำหนักบาง · ปี พ.ศ. ต้นแถวตัวหนา */
@media screen and (max-width: 720px) {
    .rp .rtable.compare td.num,
    .rp .rtable.compare td.m-hd span {
        text-align: center;
    }
    .rp .rtable.compare td.num {
        font-weight: 400;
    }
    .rp .rtable.compare td.none-yr {
        text-align: center;
    }
    .rp .rtable.compare td.m-yr {
        font-weight: 700;
        color: var(--ink);
    }
    .rp .rtable.compare td.m-yr.cur {
        color: var(--gold-dark);
    }
}

/* ป้าย "ยังไม่เป็นทางการ" ต่อท้ายชื่อเขต (แทนเครื่องหมาย *) */
.rp .unof {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(240, 149, 74, 0.14);
    color: #b8621c;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    vertical-align: 2px;
    white-space: nowrap;
}

.rp-head h1 .unof {
    font-size: 13px;
    vertical-align: 8px;
}

@media screen and (max-width: 720px) {
    .rp .unof {
        margin-left: 4px;
        padding: 0 6px;
        font-size: 9.5px;
        vertical-align: 1px;
    }
}

/* ป้าย "ยังไม่เป็นทางการ" : เล็กลง */
.rp .unof {
    margin-left: 5px;
    padding: 0 6px;
    font-size: 9.5px;
    line-height: 1.55;
    vertical-align: 2px;
}

.rp-head h1 .unof {
    font-size: 11px;
}

@media screen and (max-width: 720px) {
    .rp .unof {
        margin-left: 3px;
        padding: 0 5px;
        font-size: 8px;
    }
}

/* ============================================================
   หน้าเขตพื้นที่รายเขตบนมือถือ (r=2 .es-page) : การ์ดหัวพื้นเข้มชุดเดียวกับหน้าวิชาเอก (2026-09-29)
   จอไม่เกิน 600px ใช้การ์ดหัว (.m-hero) แทน breadcrumb + ป้าย + ชื่อหน้า + การ์ดสถิติ 4 ใบ
   ช่องล่าง 3 ช่อง : สาขาวิชา (ทอง) / ผู้สมัคร / อัตราแข่งขัน · ตัวเล็กใต้ช่อง = ค่าของปีก่อน · กดแล้วเลื่อนไปตารางสาขาวิชา
   จอใหญ่เหมือนเดิม (ไม่แสดงการ์ดหัว และการ์ด i-TEST ที่เพิ่มในหน้านี้)
   ============================================================ */
@media screen and (min-width: 601px) {
    .rp.es-page .itest {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .rp.es-page .rp-head,
    .rp.es-page .es-stats {
        display: none;
    }
    .rp.es-page .m-hero {
        margin: 0 -16px 16px;
        padding: 22px 20px 16px;
        border-radius: 0 0 28px 28px;
    }
    .rp .mh-tabs.c3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .rp .mh-tabs a small {
        margin-top: 1px;
        font-size: 10px;
        opacity: .7;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    /* ป้าย "ยังไม่เป็นทางการ" บนพื้นเข้ม */
    .rp .m-hero .unof {
        background: rgba(240, 149, 74, 0.25);
        color: #ffc58f;
        vertical-align: 5px;
    }
    /* กดช่องในการ์ดหัวแล้วเลื่อนมาที่ตารางสาขา : เว้นที่ให้แถบเมนูบน */
    .rp #majors {
        scroll-margin-top: 70px;
    }
}

/* ============================================================
   ตารางสาขาวิชาในหน้าเขตพื้นที่รายเขต (r=2 .rtable.acc.slim) (2026-09-29)
   มือถือ : การ์ดพับไว้แถวเดียว แบบการ์ดเขตของหน้าวิชาเอก (เลขอันดับในวงกลม · ชื่อสาขา · N ตำแหน่ง · ปุ่มเปิด)
            แตะแล้วแสดง มาตรฐานวิชาเอก / เปิดสอบ / สมัคร / อัตราแข่งขัน + ปุ่ม "ดูทุกเขตที่เปิดสาขานี้"
   จอคอม : เหมือนเดิม (ไม่มีคอลัมน์ปุ่ม กดชื่อสาขาได้)
   ============================================================ */
@media screen and (min-width: 721px) {
    .rp .rtable.slim.mact .c-act {
        display: none;
    }
}

@media screen and (max-width: 720px) {
    .rp .rtable.slim tr {
        margin-bottom: 8px;
        padding: 9px 12px;
        border-radius: 14px;
    }
    .rp .rtable.slim td.c-name {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 26px;
        padding-right: 112px;
    }
    .rp .rtable.slim td.c-name::before {
        content: attr(data-rank);
        flex: none;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--gold-soft);
        color: var(--gold-dark);
        font-size: 11px;
        font-weight: 600;
    }
    .rp .rtable.slim tr.top td.c-name::before {
        background: var(--gold);
        color: #fff;
    }
    /* ชื่อสาขาเป็นลิงก์บนจอคอม : บนมือถือแตะแล้วเปิดการ์ดแทน (ลิงก์อยู่ที่ปุ่มในการ์ด) */
    .rp .rtable.slim .c-name .n {
        min-width: 0;
        font-size: 15px;
        line-height: 1.3;
        color: inherit;
        text-decoration: none;
        pointer-events: none;
    }
    .rp .rtable.slim .c-name .meter {
        display: none;
    }
    .rp .rtable.slim .m-num {
        right: 34px;
        flex-direction: row;
        align-items: baseline;
        gap: 3px;
    }
    .rp .rtable.slim .m-num b {
        font-size: 19px;
    }
    .rp .rtable.slim td.c-name::after {
        width: 24px;
        height: 24px;
        margin-top: -12px;
        font-size: 10px;
    }
    .rp .rtable.slim tr.open td.c-name {
        padding-bottom: 8px;
    }
}

/* ============================================================
   หน้าเขตพื้นที่ทั้งหมดบนมือถือ (r=1 .el-page) : การ์ดหัวพื้นเข้มชุดเดียวกับหน้าวิชาเอก / หน้ารายเขต (2026-09-29)
   จอไม่เกิน 600px ใช้การ์ดหัว (.m-hero) แทน breadcrumb + ป้ายปี + ชื่อหน้า + คำอธิบาย + การ์ดสรุป (.m-sum)
   ในการ์ด : ยอดตำแหน่ง + ยอด 3 ปีก่อน · แถบสถานะเขต (ทอง เปิดสอบ / แดง ไม่เปิดสอบ) · ช่องสถานะ 4 ช่อง
   ============================================================ */
@media screen and (max-width: 600px) {
    .rp.el-page .rp-head,
    .rp.el-page .m-sum {
        display: none;
    }
    .rp.el-page .m-hero {
        margin: 0 -16px 16px;
        padding: 22px 20px 16px;
        border-radius: 0 0 28px 28px;
    }
    /* แถบสถานะเขต (report.css มี .bar ทั่วไป : ล้างความกว้าง / ระยะ / พื้น) */
    .rp .mh-prog {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
    }
    .rp .mh-prog .bar {
        flex: 1;
        display: flex;
        gap: 2px;
        width: auto;
        height: 6px;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        overflow: hidden;
    }
    .rp .mh-prog .bar span {
        display: block;
        min-width: 6px;
        height: 100%;
        border-radius: 999px;
    }
    .rp .mh-prog .s-open   { background: #eccb8e; }
    .rp .mh-prog .s-closed { background: #e0795b; }
    .rp .mh-prog .t {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.72);
        white-space: nowrap;
    }
    .rp .mh-prog .t b {
        font-weight: 600;
        color: #eccb8e;
    }
    /* จุดสีหน้าชื่อช่องสถานะ (สีเดียวกับแถบ) */
    .rp .mh-tabs .dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 4px;
        border-radius: 50%;
        vertical-align: 1px;
    }
    .rp .mh-tabs .dot.s-open   { background: #eccb8e; }
    .rp .mh-tabs .dot.s-closed { background: #e0795b; }
    .rp .mh-tabs .dot.s-wait   { background: rgba(255, 255, 255, 0.5); }
    .rp #esa_list,
    .rp #mj_list {
        scroll-margin-top: 70px;
    }
}

/* รายการเขต (rp_esa_table) บนมือถือ : ไม่แสดงเขตที่ยังไม่ประกาศ (ดูได้ที่หน้ารอประกาศ r=6) (2026-09-29) */
@media screen and (max-width: 720px) {
    .rp .rtable.slim tr.wait {
        display: none !important;
    }
}
@media screen and (max-width: 720px) {
    /* เลขอันดับ 3 หลัก (เช่น เขตไม่เปิดสอบท้ายรายการ) : วงกลมยืดเป็นแคปซูล */
    .rp .rtable.slim td.c-name::before {
        width: auto;
        min-width: 22px;
        padding: 0 5px;
        border-radius: 999px;
    }
}

/* ท้ายตาราง (panel-foot) บนมือถือ : กะทัดรัด ยอดรวมขึ้นบรรทัดแรก หมายเหตุตัวเล็กข้างล่าง (2026-09-29) */
@media screen and (max-width: 720px) {
    .rp .panel.table-panel .panel-foot {
        gap: 2px;
        padding: 8px 12px;
        border-radius: 14px;
        font-size: 11px;
        line-height: 1.35;
    }
    .rp .panel.table-panel .panel-foot .total {
        order: -1;
        font-size: 13px;
    }
    .rp .panel.table-panel .panel-foot .total b {
        margin: 0 3px;
        font-size: 17px;
    }
}
@media screen and (max-width: 720px) {
    .rp .rtable.slim td.c-name::before {
        box-sizing: border-box;
    }
}

/* ============================================================
   แจ้งการใช้คุกกี้ (.consent) : หน้าตาชุดเดียวกับการ์ดโฆษณา i-Test (promo.css) (2026-09-29)
   กรอบทองไล่สี + เงาทองฟุ้ง · รูปครูบนพื้นทอง · หัวข้อตัวหนามีไอคอนคุกกี้ · ปุ่มทองไล่สีมีแสงวิ่ง
   ============================================================ */
.rp .consent {
    width: min(760px, 100% - 32px);
    gap: 16px;
    padding: 12px 14px;
    border: 2px solid transparent;
    border-radius: 22px;
    background:
        linear-gradient(90deg, #fbf2df 0, #fff 32%) padding-box,
        linear-gradient(115deg, #f1dcae, #D6B172 35%, #a8844a 62%, #ecd29c) border-box;
    box-shadow: 0 18px 40px rgba(110, 78, 26, 0.26), 0 0 0 6px rgba(214, 177, 114, 0.14);
    color: #1f1f1f;
}
.rp .consent .c-av {
    flex: none;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f5e3bd, #D6B172);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 16px rgba(168, 132, 74, 0.35);
}
.rp .consent .c-av img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
}
.rp .consent .c-tx {
    min-width: 0;
}
.rp .consent .t {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}
.rp .consent .t i {
    color: #c49a55;
    font-size: 16px;
}
.rp .consent .s {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #5b5446;
}
.rp .consent .btn-line {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(135deg, #e3c48e, #D6B172 45%, #c49a55);
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(214, 177, 114, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform .2s, box-shadow .2s;
}
.rp .consent .btn-line:hover {
    transform: translateY(-2px);
    color: #1f1f1f;
    background: linear-gradient(135deg, #e3c48e, #D6B172 45%, #c49a55);
    box-shadow: 0 14px 28px rgba(214, 177, 114, 0.6);
}
.rp .consent .btn-line::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: ad-shine 3.6s ease-in-out 1.8s infinite;
}
@keyframes ad-shine {
    0% { left: -60%; }
    40%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .rp .consent .btn-line::after { animation: none; display: none; }
}
/* จอแคบ : รูปเล็กลง ข้อความ 3 บรรทัด ปุ่มเต็มความกว้าง (ตำแหน่งเหนือเมนูล่างใช้ของเดิม) */
@media screen and (max-width: 1000px) {
    .rp .consent {
        gap: 10px 12px;
        padding: 10px 12px;
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(110, 78, 26, 0.26), 0 0 0 4px rgba(214, 177, 114, 0.14);
    }
    .rp .consent .c-av {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }
    .rp .consent .c-av img {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .rp .consent .c-tx {
        flex: 1;
    }
    .rp .consent .t {
        font-size: 15px;
    }
    .rp .consent .s {
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .rp .consent .btn-line {
        height: 38px;
        font-size: 14px;
    }
}

/* แจ้งคุกกี้บนจอแคบ : จัดแบบการ์ดโฆษณามือถือ (รูป | หัวข้อ · รายละเอียด · ปุ่มเล็ก) ปุ่มไม่เต็มความกว้าง (2026-09-29) */
@media screen and (max-width: 1000px) {
    .rp .consent {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-areas: "av tx" "av go";
        align-items: start;
        gap: 4px 12px;
    }
    .rp .consent .c-av { grid-area: av; }
    .rp .consent .c-tx { grid-area: tx; }
    .rp .consent .t { font-size: 14.5px; }
    .rp .consent .s { font-size: 11.5px; line-height: 1.45; }
    .rp .consent .btn-line {
        grid-area: go;
        justify-self: start;
        width: auto;
        height: 32px;
        margin: 3px 0 0;
        padding: 0 16px;
        font-size: 13px;
        box-shadow: 0 6px 14px rgba(214, 177, 114, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }
}
/* แจ้งคุกกี้บนจอแคบ : ปุ่มยอมรับชิดขวา */
@media screen and (max-width: 1000px) {
    .rp .consent .btn-line {
        justify-self: end;
    }
}