/* =========================================================
   index.css — หน้าแรก (NewIndex) แบบ I-1 (CSS กลาง ไฟล์เดียว)
   รวม: หน้า NewIndex + การ์ดตำแหน่ง + รายละเอียดตำแหน่ง

   กันกระทบหน้าอื่น: ทุก selector ขึ้นต้นด้วย .psu-jobs
   ต้องมี <div class="psu-jobs ui-page ..."> ใน NewIndex.razor (มีในไฟล์ที่ส่งให้แล้ว)
   ถ้าไม่มีคลาสนี้ สไตล์ทั้งหมดในไฟล์นี้จะไม่ทำงาน
   ========================================================= */


.psu-jobs {
    /* ใช้ความกว้างเต็มจอ — จำกัดไว้ที่ 1920px เพื่อไม่ให้ยืดเกินไปบนจอ ultrawide */
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 12px clamp(12px, 2vw, 32px) 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #1E2A36;
}

    /* ---------- หัวเรื่อง + ปุ่มตัวกรอง ---------- */
    .psu-jobs .ui-titlebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 22px;
        font-weight: 700;
        color: #1F4E79;
    }

    /* ---------- ปุ่มเปิด/ปิดแผงค้นหา ----------
       โทนม่วงของส่วนค้นหา (ตามแบบหน้า ReportIndex) — แก้สีทั้งชุดได้ที่ตัวแปร --sf-* ใน .ui-filter ด้านล่าง */
    .psu-jobs .ui-filter-toggle {
        font: inherit;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #D6CCF8;
        background: #FFFFFF;
        color: #1E2A36;
        cursor: pointer;
    }

        .psu-jobs .ui-filter-toggle.is-on {
            background: #F3F0FF;
            border-color: #B9A8F2;
            color: #4B2FB8;
            font-weight: 600;
        }

    /* จำนวนตัวกรองที่ใช้อยู่ บนปุ่ม */
    .psu-jobs .ui-filter-count {
        min-width: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #5B3AD6;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }

    /* ---------- แผงค้นหา (โทนม่วง) ----------
       แถวบน: 3 ช่อง [ชื่อช่อง | ช่องเลือก] • แถวล่าง: ข้อความเตือน (ถ้ามี) + ปุ่มชิดขวา */
    .psu-jobs .ui-filter {
        --sf-bg: #F7F5FF; /* พื้นแผง */
        --sf-border: #D6CCF8; /* เส้นขอบแผง */
        --sf-accent: #5B3AD6; /* ปุ่มค้นหา / สีเน้น */
        --sf-accent-hover: #4B2FB8;
        --sf-label: #3F4A56; /* ชื่อช่อง */
        --sf-label-w: 118px; /* ความกว้างชื่อช่อง — เท่ากันทุกช่อง ช่องเลือกจึงตรงแนว */
        --sf-field-h: 44px; /* ความสูงช่องเลือก */
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 24px;
        align-items: center;
        background: var(--sf-bg);
        border: 1px solid var(--sf-border);
        border-radius: 8px;
        padding: 16px 20px;
    }

    .psu-jobs .ui-filter-field {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .psu-jobs .ui-filter-label {
        flex: 0 0 var(--sf-label-w);
        text-align: right;
        font-size: 14px;
        line-height: 1.3;
        color: var(--sf-label);
        overflow-wrap: anywhere; /* ชื่อช่องยาว ("ค้นหาภายในวิทยาเขต:") ตัดเป็น 2 บรรทัดได้ ไม่ดันช่องเลือก */
    }

    /* ช่องเลือกของ AntDesign: ยืดเต็มที่เหลือ สูงเท่ากันทุกช่อง พื้นขาว */
    .psu-jobs .ui-filter-field > .ant-select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    .psu-jobs .ui-filter .ant-select-selector {
        min-height: var(--sf-field-h) !important;
        height: var(--sf-field-h) !important;
        border-radius: 6px !important;
        background: #FFFFFF !important;
        display: flex;
        align-items: center;
    }

    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-item,
    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-search-input {
        line-height: calc(var(--sf-field-h) - 2px) !important;
        height: calc(var(--sf-field-h) - 2px) !important;
    }

    /* เลือกเงื่อนไขใหม่แต่ยังไม่กดค้นหา */
    .psu-jobs .ui-filter-pending {
        grid-column: 1 / 3;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid #FFD99A;
        border-radius: 6px;
        background: #FFF6E5;
        color: #A15C00;
        font-size: 13px;
    }

    /* ปุ่ม ล้างตัวกรอง + ค้นหา — อยู่คอลัมน์ขวาสุดของแถวล่าง */
    .psu-jobs .ui-filter-actions {
        grid-column: 3;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .psu-jobs .ui-filter-btn {
        min-height: 44px;
        border-radius: 8px;
    }

    .psu-jobs .ui-filter-btn--primary {
        min-width: 140px;
        background: var(--sf-accent);
        border: 1px solid var(--sf-accent);
        color: #FFFFFF;
        font-weight: 700;
        box-shadow: 0 2px 6px rgba(91, 58, 214, .25);
    }

        .psu-jobs .ui-filter-btn--primary:hover {
            background: var(--sf-accent-hover);
        }

    .psu-jobs .ui-filter-btn--outline {
        background: #FFFFFF;
        border: 1px solid #C3B3F3;
        color: var(--sf-accent);
    }

        .psu-jobs .ui-filter-btn--outline:hover:not(:disabled) {
            background: #F1EEFF;
        }

    .psu-jobs .ui-filter-actions .ui-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    /* ---------- แท็ก "กรองโดย" (ตัวกรองที่ใช้อยู่) ---------- */
    .psu-jobs .ui-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        padding: 8px 12px;
        border: 1px dashed #D6CCF8;
        border-radius: 8px;
        background: #FBFAFF;
    }

    .psu-jobs .ui-chips-label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: #6B6F85;
        white-space: nowrap;
    }

    .psu-jobs .ui-chip {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        max-width: 100%;
        padding: 1px 4px 1px 10px;
        border: 1px solid #C3B3F3;
        border-radius: 999px;
        background: #F1EEFF;
        color: #4B2FB8;
        font-size: 13px;
        line-height: 24px;
    }

    /* ชื่อยาว (ส่วนงาน/ตำแหน่ง) ตัดด้วย … ไม่ดันแถวล้น */
    .psu-jobs .ui-chip-text {
        min-width: 0;
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .psu-jobs .ui-chip-text b {
            font-weight: 600;
        }

    .psu-jobs .ui-chip-x {
        flex: none;
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

        .psu-jobs .ui-chip-x:hover:not(:disabled) {
            background: #DDD3FF;
        }

        .psu-jobs .ui-chip-x .mud-icon-root {
            font-size: 16px;
        }

    .psu-jobs .ui-chips-clear {
        margin-left: 4px;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 13px;
        color: #5B3AD6;
        text-decoration: underline;
        cursor: pointer;
    }

        .psu-jobs .ui-chip-x:disabled,
        .psu-jobs .ui-chips-clear:disabled {
            opacity: .5;
            cursor: default;
        }

    /* ---------- ปุ่มสถานะ (pill) ---------- */
    .psu-jobs .ui-stages {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #FFFFFF;
        border: 1px solid #CDEFEA;
        border-radius: 999px;
        padding: 4px;
    }

    .psu-jobs .ui-arrow {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0;
        background: #F0FAF8;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4A5664;
    }

    .psu-jobs .ui-stage-strip {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

        .psu-jobs .ui-stage-strip::-webkit-scrollbar {
            display: none;
        }

    .psu-jobs .ui-stage-row {
        display: flex;
        gap: 4px;
        width: max-content;
        margin: 0 auto;
    }

    .psu-jobs .ui-stage {
        font: inherit;
        font-size: 14px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 2px solid transparent;
        background: transparent;
        color: #2B3440;
        cursor: pointer;
    }

        .psu-jobs .ui-stage:hover {
            background: #F0FAF8;
        }

        .psu-jobs .ui-stage.is-on {
            background: #dafbfb;
            border-color: #b9e7ed;
            color: #0B5F57;
            font-weight: 700;
        }

    .psu-jobs .ui-stage-count {
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        min-width: 20px;
        text-align: center;
        padding: 0 6px;
        border-radius: 999px;
        background: #E3EAF4;
        color: #2A4A73;
    }

    .psu-jobs .ui-stage.is-on .ui-stage-count {
        background: #2291b0;
        color: #ffffff;
    }

    /* ---------- Layout ซ้าย/ขวา ---------- */
    .psu-jobs .ui-layout {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .psu-jobs .ui-list {
        /* คอลัมน์รายการ: ประมาณ 28% ของความกว้าง (340–520px) ที่เหลือให้รายละเอียด */
        flex: 0 1 28%;
        min-width: 340px;
        max-width: 520px;
        background: #FFFFFF;
        border: 1px solid #B9DED8;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15,95,87,.08);
        padding: 14px 8px 8px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .psu-jobs .ui-list-head {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: #1F4E79;
        padding-right: 6px;
    }

    .psu-jobs .ui-list-scroll {
        position: relative;
        height: 600px; /* เท่าความสูงเดิม */
        overflow: auto;
        padding: 4px 6px 24px 0;
    }

    .psu-jobs .ui-list-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .psu-jobs .ui-detail {
        flex: 999 1 560px;
        min-width: 0;
        background: #FFFFFF;
        border: 1px solid #B9DED8;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15,95,87,.08);
        overflow: hidden;
    }

    /* ---------- หัวรายละเอียด ---------- */
    .psu-jobs .ui-back {
        display: none; /* แสดงเฉพาะมือถือ */
        padding: 4px 8px;
        border-bottom: 1px solid #EEF3F2;
    }

    .psu-jobs .ui-back-btn {
        font: inherit;
        min-height: 44px;
        padding: 0 10px;
        border: 0;
        background: transparent;
        color: #1F4E79;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }

    .psu-jobs .ui-detail-head {
        background: #cff4f4;
        border-bottom: 1px solid #BDE9E3;
        padding: 8px 24px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
    }

    .psu-jobs .ui-detail-titlewrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        flex: 1 1 360px;
    }

    /* ชื่อตำแหน่ง + ต.เลขที่ (ต่อท้ายในแถวเดียวกัน ถ้าไม่พอจะขึ้นบรรทัดใหม่) */
    .psu-jobs .ui-detail-titlerow {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-detail-title {
        margin: 0;
        font-size: 22px;
        line-height: 1.4;
        color: #0B5F57;
        outline: none;
    }

    .psu-jobs .ui-posno {
        font-size: 13px;
        font-weight: 600;
        color: #1F66B8;
        border: 1px solid #A9C7EA;
        background: #FFFFFF;
        padding: 1px 10px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .psu-jobs .ui-detail-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
    }

    .psu-jobs .ui-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 999px;
        background: #FFFFFF;
    }

        .psu-jobs .ui-status.is-open {
            color: #135E3A;
            border: 1px solid #7FD3A3;
        }

        .psu-jobs .ui-status.is-closed {
            color: #B42318;
            border: 1px solid #F3B4AE;
        }

    .psu-jobs .ui-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .psu-jobs .ui-countdown {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 999px;
        background: #EFEAFB;
        color: #4C2F91;
        border: 1px solid #C9B8F0;
    }

    .psu-jobs .ui-stage-note {
        font-size: 12px;
        color: #4A5664;
    }

    .psu-jobs .ui-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-detail-empty {
        padding: 16px 24px 0;
    }

    .psu-jobs .ui-detail-body {
        padding: 8px 12px 16px;
    }

    /* ---------- ปุ่ม ---------- */
    .psu-jobs .ui-btn {
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        white-space: nowrap;
    }

    .psu-jobs .ui-btn--primary {
        background: #3c829a;
        color: #FFFFFF;
        border: 1px solid #2197a3;
        font-weight: 700;
    }

        .psu-jobs .ui-btn--primary:hover {
            background: #0B5F57;
        }

    .psu-jobs .ui-btn--outline {
        background: #FFFFFF;
        color: #0F7F74;
        border: 1px solid #9ED9CF;
    }

    .psu-jobs .ui-btn--disabled {
        background: #E4E8EB;
        color: #5B6779;
        border: 1px solid #E4E8EB;
        cursor: not-allowed;
    }

    /* แถบปุ่มล่างจอ (มือถือ) */
    .psu-jobs .ui-mbar {
        display: none;
    }


/* =========================================================
   Responsive (รวมทุกส่วน)
   ========================================================= */

/* จอกลาง: ชื่อช่องในแผงค้นหาแคบลง ให้ช่องเลือกได้ที่มากขึ้น */
@media (max-width: 1400px) {
    .psu-jobs .ui-filter {
        --sf-label-w: 96px;
        gap: 14px 16px;
    }
}

/* แท็บเล็ต + มือถือ (≤1040px): รายการกับรายละเอียดวางซ้อนกันไม่ได้แล้ว
   จึงใช้แบบ 2 หน้า — หน้ารายการ → กดตำแหน่ง → หน้ารายละเอียด (มีปุ่ม "กลับ") */
@media (max-width: 1040px) {
    .psu-jobs .ui-list {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .psu-jobs .ui-detail {
        flex: 1 1 100%;
    }

    /* รายการไม่ต้องสกอร์ลซ้อน ให้เลื่อนไปกับหน้า */
    .psu-jobs .ui-list-scroll {
        height: auto;
        overflow: visible;
    }

    /* หน้ารายการ: ซ่อนรายละเอียด (ยัง render อยู่ เพื่อให้ @ref ใช้งานได้) */
    .psu-jobs:not(.is-detail) .ui-detail {
        display: none;
    }

    /* หน้ารายละเอียด: ซ่อนหัวเรื่อง ตัวกรอง สถานะ และรายการ */
    .psu-jobs.is-detail .ui-titlebar,
    .psu-jobs.is-detail .ui-filter,
    .psu-jobs.is-detail .ui-chips,
    .psu-jobs.is-detail .ui-stages,
    .psu-jobs.is-detail .ui-list {
        display: none;
    }

    /* ปุ่ม "กลับไปรายการ" */
    .psu-jobs .ui-back {
        display: flex;
    }

    /* แผงค้นหา: 2 คอลัมน์ ชื่อช่องขึ้นไปอยู่บนช่องเลือก ปุ่มลงบรรทัดของตัวเองชิดขวา */
    .psu-jobs .ui-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    .psu-jobs .ui-filter-field {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .psu-jobs .ui-filter-label {
        flex: 0 0 auto;
        text-align: left;
        font-size: 13px;
    }

    .psu-jobs .ui-filter-field > .ant-select {
        width: 100% !important;
    }

    .psu-jobs .ui-filter-pending,
    .psu-jobs .ui-filter-actions {
        grid-column: 1 / -1;
    }
}

/* มือถือ: 2 หน้า (รายการ → รายละเอียด) */
@media (max-width: 760px) {
    .psu-jobs {
        padding: 10px 12px 24px;
    }

        .psu-jobs .ui-title {
            font-size: 19px;
        }

        .psu-jobs .ui-filter {
            grid-template-columns: 1fr;
            padding: 12px;
        }

        .psu-jobs .ui-filter-actions .ui-btn {
            flex: 1 1 0;
            min-width: 0;
        }

        .psu-jobs .ui-chip-text {
            max-width: 220px;
        }

        .psu-jobs .ui-hide-sm {
            display: none;
        }

        .psu-jobs .ui-detail {
            margin-bottom: 110px; /* เว้นที่ให้แถบปุ่มล่างจอ */
        }

        .psu-jobs .ui-detail-head {
            padding: 14px 16px;
        }

        .psu-jobs .ui-detail-title {
            font-size: 19px;
        }

        .psu-jobs .ui-detail-body {
            padding: 8px 4px 16px;
        }

        .psu-jobs .ui-mbar {
            display: flex;
            flex-direction: column;
            gap: 6px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 900; /* ต่ำกว่า ant-modal (1000) และ MudDialog (1400) */
            background: #FFFFFF;
            border-top: 1px solid #D7ECE8;
            box-shadow: 0 -2px 8px rgba(0,0,0,.06);
            padding: 8px 16px 14px;
        }

        .psu-jobs .ui-mbar-note {
            font-size: 12px;
            text-align: center;
            color: #4C2F91;
            font-weight: 700;
        }

        .psu-jobs .ui-mbar-buttons {
            display: flex;
            gap: 8px;
        }

            .psu-jobs .ui-mbar-buttons .ui-btn {
                flex: 1 1 0;
                padding: 0 8px;
            }
}

/* =========================================================
   2) การ์ดตำแหน่ง (LeftPositionComponent)
   ========================================================= */
.psu-jobs .lp-card {
    font: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E1E9E8;
    color: #1E2A36;
}

    /* ทุกแถวในการ์ดชิดซ้าย (กันสไตล์จากธีม/app.css ที่จัดกึ่งกลาง) */
    .psu-jobs .lp-card > span {
        width: 100%;
        text-align: left !important;
    }

    .psu-jobs .lp-card .lp-unit,
    .psu-jobs .lp-card .lp-title {
        display: block;
        text-align: left !important;
    }

    .psu-jobs .lp-card .lp-chips {
        justify-content: flex-start;
    }

    .psu-jobs .lp-card:hover {
        border-color: #9ED9CF;
    }

    .psu-jobs .lp-card:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

    /* การ์ดที่เลือก: มิ้นท์ + ขอบล่างหนา */
    .psu-jobs .lp-card.is-selected {
        background: #e8ffff;
        border: 2px solid #b4cecf;
        border-bottom-width: 5px;
    }

.psu-jobs .lp-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.psu-jobs .lp-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.psu-jobs .lp-card.is-selected .lp-title {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .lp-rate {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background: #2F6FB8;
    padding: 1px 10px;
    border-radius: 999px;
    margin-top: 3px;
    white-space: nowrap;
}

.psu-jobs .lp-unit {
    font-size: 14px;
    color: #1F66B8;
}

.psu-jobs .lp-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.psu-jobs .lp-campus {
    font-size: 12px;
    color: #18804F;
    border: 1px solid #7FD3A3;
    background: #FFFFFF;
    padding: 1px 10px;
    border-radius: 999px;
}

.psu-jobs .lp-countdown {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: #FFFFFF;
}

    .psu-jobs .lp-countdown.is-open {
        color: #135E3A;
        border: 1px solid #8FD9B0;
    }

    .psu-jobs .lp-countdown.is-soon {
        color: #B42318;
        border: 1px solid #F3B4AE;
    }

    .psu-jobs .lp-countdown.is-closed {
        color: #4A5664;
        background: #EEF1F3;
        border: 1px solid #E1E6EA;
    }

.psu-jobs .lp-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #7A4100;
    background: #FFF3DC;
    border: 1px solid #F0C98A;
    padding: 0 8px;
    border-radius: 999px;
    cursor: help;
}

.psu-jobs .lp-bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #4A5664;
}

.psu-jobs .lp-dates {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.psu-jobs .lp-date {
    color: #1F66B8;
}

.psu-jobs .lp-posno {
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   3) รายละเอียดตำแหน่ง (PositionDetailComponent)
   ========================================================= */
.psu-jobs .pd {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 12px 4px;
    color: #1E2A36;
    font-size: 14px;
}

.psu-jobs .pd-h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1F4E79;
}

/* ---------- กล่องข้อมูลสรุป (aqua เรืองขอบ) ---------- */
/* ลำดับกล่อง: สถานะ (ใหญ่) | จำนวนที่รับ (เล็ก) | วันที่เปิดรับ (ใหญ่) | ประกาศล่าสุด (เล็ก)
   กล่องใหญ่กว้าง 2 ส่วน กล่องเล็กกว้าง 1 ส่วน */
.psu-jobs .pd-tiles {
    display: grid;
    /* minmax(0, …) = ยอมให้กล่องหดได้ ไม่ดันเนื้อหาจนล้นกรอบ */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 10px;
}

.psu-jobs .pd-tile {
    background: #FFFFFF;
    border: 1px solid #A9DCE8;
    box-shadow: inset 0 0 14px rgba(70,180,210,.22);
    border-radius: 12px;
    padding: 10px 14px;
}

.psu-jobs .pd-tile-label {
    font-size: 12px;
    color: #3E6470;
}

.psu-jobs .pd-tile-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- สถานะการรับสมัครในการ์ด "วันที่เปิดรับสมัคร" ----------
   เปิดรับอยู่ในขณะนี้ (เขียว) / ปิดรับสมัคร (แดง)
   จะปิดภายใน X วัน (ม่วงอ่อน, เหลือ ≤ 3 วันเป็นแดง) / เลื่อนปิดรับสมัคร (เหลืองอำพัน) */
.psu-jobs .pd-tile-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.psu-jobs .pd-open,
.psu-jobs .pd-closed,
.psu-jobs .pd-countdown,
.psu-jobs .pd-delay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.psu-jobs .pd-open {
    color: #135E3A;
    background: #E8F7EE;
    border-color: #7FD3A3;
}

.psu-jobs .pd-closed {
    color: #B42318;
    background: #FEF1F0;
    border-color: #F3B4AE;
}

.psu-jobs .pd-countdown {
    color: #4C2F91;
    background: #EFEAFB;
    border-color: #C9B8F0;
}

    .psu-jobs .pd-countdown.is-soon {
        color: #B42318;
        background: #FEF1F0;
        border-color: #F3B4AE;
    }

.psu-jobs .pd-delay {
    color: #7A4100;
    background: #FFF3DC;
    border-color: #F0C98A;
}

/* จุดวงกลมเล็กหน้าข้อความ เปิด/ปิดรับ (ใช้สีเดียวกับตัวอักษร) */
.psu-jobs .pd-dot-sm {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ไอคอน MudIcon ในป้ายให้เล็กพอดีตัวอักษร */
.psu-jobs .pd-tile-status .mud-icon-root {
    font-size: 15px;
}

/* ---------- ส่วนงาน / ติดต่อสอบถาม / รายละเอียดเพิ่มเติม ---------- */
.psu-jobs .pd-info {
    margin: 0;
    display: grid;
    /* คอลัมน์หัวข้อกว้างตามข้อความยาวสุด — "รายละเอียดเพิ่มเติม" จึงไม่ตกบรรทัด */
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 16px;
    background: #F8FAFB;
    border: 1px solid #E1E8EA;
    border-radius: 12px;
    padding: 14px 16px;
}

    .psu-jobs .pd-info dt {
        font-weight: 600;
        color: #1F4E79;
        white-space: nowrap;
    }

    .psu-jobs .pd-info dd {
        margin: 0;
    }

.psu-jobs .pd-unit {
    color: #1F66B8;
    margin-right: 6px;
}

.psu-jobs .pd-campus {
    display: inline-block;
    font-size: 12px;
    color: #18804F;
    border: 1px solid #7FD3A3;
    background: #FFFFFF;
    padding: 0 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.psu-jobs .pd-contact {
    display: flex;
    gap: 4px 24px;
    flex-wrap: wrap;
}

    .psu-jobs .pd-contact a {
        color: #1F66B8;
        word-break: break-all;
    }

/* ---------- รายละเอียดเพิ่มเติม ---------- */
.psu-jobs .pd-more p {
    margin: 0;
    line-height: 1.7;
    white-space: pre-line;
}

/* ---------- หมายเหตุ ---------- */
.psu-jobs .pd-remark {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FFF7EA;
    border: 1px solid #F5D9AE;
    border-radius: 12px;
    padding: 12px 16px;
}

    /* MudIcon เป็น component ลูก */
    .psu-jobs .pd-remark .pd-remark-icon {
        color: #B26A00;
        margin-top: 2px;
        flex: none;
    }

.psu-jobs .pd-remark-title {
    font-size: 14px;
    font-weight: 700;
    color: #5C3300;
}

.psu-jobs .pd-remark-text {
    font-size: 15px;
    line-height: 1.75;
    color: #3A2600;
    white-space: pre-line;
}

/* ---------- ขั้นตอน + ไฟล์ ---------- */
.psu-jobs .pd-status {
    font-weight: 400;
    color: #1F66B8;
}

.psu-jobs .pd-rounds-body {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* stepper แนวตั้ง (จอใหญ่) */
.psu-jobs .pd-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 240px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
}

.psu-jobs .pd-step {
    font: inherit;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 6px 4px 0;
    text-align: left;
}

.psu-jobs .pd-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.psu-jobs .pd-step-line {
    flex: 1;
    width: 2px;
    min-height: 20px;
    margin-top: 6px;
    background: #DCE6E5;
}

    .psu-jobs .pd-step-line.is-done {
        background: #47abcd;
    }

.psu-jobs .pd-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    padding-bottom: 14px;
}

.psu-jobs .pd-step-label {
    font-size: 14px;
    font-weight: 500;
    color: #2B3440;
}

.psu-jobs .pd-step.is-picked .pd-step-label {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .pd-step-count {
    font-size: 12px;
    color: #5B6779;
}

/* วงกลม */
.psu-jobs .pd-dot {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #FFFFFF;
    border: 2px solid #C9D4D3;
    color: #5B6779;
}

    .psu-jobs .pd-dot.is-done {
        background: #45adb0;
        border-color: #bee0e2;
        color: #ffffff;
    }

    .psu-jobs .pd-dot.is-now {
        border: 3px solid #78bbbd;
        color: #0B5F57;
    }

    .psu-jobs .pd-dot.is-picked {
        box-shadow: 0 0 0 5px #D5F3EE;
    }

/* stepper แนวนอน (มือถือ) — ซ่อนบนจอใหญ่ */
.psu-jobs .pd-steps-m {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.psu-jobs .pd-steps-m-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.psu-jobs .pd-step-m {
    font: inherit;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.psu-jobs .pd-step-m-line {
    flex: 1;
    height: 2px;
    min-width: 8px;
    background: #DCE6E5;
}

    .psu-jobs .pd-step-m-line.is-done {
        background: #5CD6C4;
    }

.psu-jobs .pd-step-m-info {
    background: #F0FAF8;
    border: 1px solid #D7ECE8;
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1.45;
}

.psu-jobs .pd-step-m-num,
.psu-jobs .pd-step-m-count {
    font-size: 12px;
    color: #4A5664;
}

.psu-jobs .pd-step-m-label {
    font-size: 15px;
    font-weight: 700;
    color: #0B5F57;
}

/* ไฟล์ */
.psu-jobs .pd-files {
    flex: 999 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.psu-jobs .pd-files-title {
    font-weight: 600;
    color: #1F4E79;
}

.psu-jobs .pd-files-empty {
    border: 1px dashed #C9D9D6;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: #4A5664;
}

.psu-jobs .pd-file {
    border: 1px solid #D7ECE8;
    border-radius: 12px;
    overflow: hidden;
}

.psu-jobs .pd-file-head {
    font: inherit;
    width: 100%;
    text-align: left;
    border: 0;
    background: #FFFFFF;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .psu-jobs .pd-file-head.is-open {
        background: #f2fdff;
    }

    .psu-jobs .pd-file-head .pd-chev {
        transition: transform .15s ease;
    }

    .psu-jobs .pd-file-head.is-open .pd-chev {
        transform: rotate(90deg);
    }

.psu-jobs .pd-file-name {
    font-weight: 600;
}

.psu-jobs .pd-latest {
    font-size: 12px;
    font-weight: 700;
    color: #0B5F57;
    background: #CDF1EC;
    padding: 1px 8px;
    border-radius: 999px;
}

.psu-jobs .pd-file-note {
    font-size: 13px;
    color: #4A5664;
    flex: 1 1 180px;
}

.psu-jobs .pd-file-view {
    background: #3A3F45;
    padding: 8px;
}

/* ไม่พบไฟล์: empty ธรรมดา พื้นขาว */
.psu-jobs .pd-file-empty {
    background: #FFFFFF;
    border-top: 1px solid #EEF3F2;
    padding: 24px 16px;
}

.psu-jobs .pd-pdf {
    display: block;
    width: 100%;
    height: 550px; /* เท่าความสูงเดิม */
    background: #FFFFFF;
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
    .psu-jobs .pd-steps {
        max-width: none;
    }

    /* แท็บเล็ต: 2 แถว — [สถานะ | จำนวนที่รับ] และ [วันที่เปิดรับ | ประกาศล่าสุด] */
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* มือถือ: กล่องใหญ่เต็มแถว กล่องเล็ก 2 กล่องอยู่คู่กันในแถวเดียว */
@media (max-width: 760px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense; /* ให้กล่องเล็กมาเติมช่องว่างให้อยู่คู่กัน */
    }

        .psu-jobs .pd-tiles .pd-tile.is-wide {
            grid-column: 1 / -1;
        }
}

@media (max-width: 760px) {
    .psu-jobs .pd {
        padding: 8px 4px 4px;
    }

    /* มือถือ: หัวข้ออยู่บน ข้อมูลอยู่ล่าง */
    .psu-jobs .pd-info {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

        .psu-jobs .pd-info dd {
            margin-bottom: 8px;
        }

    /* มือถือ: ใช้ stepper แนวนอนแทนแนวตั้ง */
    .psu-jobs .pd-steps {
        display: none;
    }

    .psu-jobs .pd-steps-m {
        display: flex;
    }

    .psu-jobs .pd-pdf {
        height: 420px;
    }
}

/* =========================================================
   ปรับเพิ่ม: รายละเอียดเพิ่มเติมในกรอบส่วนงาน / step ตรงแนว / ลูกศร collapse ชิดซ้าย
   ========================================================= */

/* รายละเอียดเพิ่มเติม (Note) ในกรอบ pd-info: คงการขึ้นบรรทัดใหม่ตามข้อมูล */
.psu-jobs .pd-info .pd-more-text {
    white-space: pre-line;
    line-height: 1.7;
}

/* stepper แนวตั้ง: ทุกขั้นชิดซ้าย วงกลมอยู่แนวเดียวกัน */
.psu-jobs .pd-step {
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}

.psu-jobs .pd-step-rail {
    flex: 0 0 28px; /* กว้างเท่าวงกลม ทุกขั้นจึงตรงกัน */
    width: 28px;
}

.psu-jobs .pd-step-text {
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.psu-jobs .pd-step:focus-visible,
.psu-jobs .pd-file-head:focus-visible {
    outline: 3px solid rgba(92,214,196,.45);
    outline-offset: 2px;
}

/* หัว collapse ของไฟล์: ลูกศร + ชื่อ Version ชิดซ้าย */
.psu-jobs .pd-file-head {
    box-sizing: border-box;
    justify-content: flex-start;
    text-align: left;
}

/* =========================================================
   Scrollbar กระจก "เทาใส" — รายการตำแหน่งด้านซ้าย
   แท่งเลื่อนเกือบใส มีไฮไลต์ขาว + เงาด้านใน ลอยอยู่ในรางจาง ๆ
   สีหลักเทาอมฟ้า rgb(100,116,130) — อยากเปลี่ยนสี แก้ค่า 100,116,130 ทุกจุดในบล็อกนี้
   ========================================================= */

/* สำคัญ: Chrome/Edge 121+ จะ "ไม่ใช้" ::-webkit-scrollbar ถ้า element มี scrollbar-color หรือ scrollbar-width
   (ค่านี้สืบทอดมาจาก html/body ได้ เช่น ถ้าธีมหรือ CSS อื่นตั้งไว้) จึงรีเซ็ตเป็น auto ก่อน
   Firefox ยังได้สีจากบล็อก @supports ด้านล่าง */
@supports selector(::-webkit-scrollbar) {
    .psu-jobs .ui-list-scroll {
        scrollbar-color: auto !important;
        scrollbar-width: auto !important;
    }
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar-track {
    background: rgba(100,116,130,.05);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(100,116,130,.08);
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar-thumb {
    /* ไล่จากขาว (แสงสะท้อน) ไปเทาจาง ๆ */
    background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(100,116,130,.22) 45%, rgba(100,116,130,.32) 100%);
    background-clip: padding-box; /* ขอบใส 3px ทำให้แท่งดูลอยในราง */
    border: 3px solid transparent;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), /* ไฮไลต์ขอบบน */
    inset 0 0 0 1px rgba(100,116,130,.40), /* เส้นขอบแก้ว */
    inset 0 -2px 3px rgba(100,116,130,.25); /* เงาด้านล่าง */
}

    .psu-jobs .ui-list-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(100,116,130,.18);
    }

/* Firefox (ไม่รองรับ ::-webkit-scrollbar): ใช้สีเทาโปร่งแทน */
@supports not selector(::-webkit-scrollbar) {
    .psu-jobs .ui-list-scroll {
        scrollbar-width: auto;
        scrollbar-color: rgba(100,116,130,.45) transparent;
    }
}

/* =========================================================
   หมายเหตุ / ประกาศแจ้ง : ข้อความ — อยู่บรรทัดเดียวกัน
   ========================================================= */
.psu-jobs .pd-remark-body {
    flex: 1;
    min-width: 0;
    line-height: 1.75;
}

    .psu-jobs .pd-remark-body .pd-remark-title {
        display: inline;
        margin-right: 6px;
        white-space: nowrap; /* หัวข้อไม่ถูกตัดกลางคำ */
    }

    .psu-jobs .pd-remark-body .pd-remark-text {
        display: inline;
    }

/* =========================================================
   รายละเอียดเพิ่มเติม (Note) — ยุบ/ขยาย แบบ "ดูเพิ่มเติม"
   ========================================================= */

/* ยุบไว้ 3 บรรทัด ตัดท้ายด้วย … */
.psu-jobs .pd-info .pd-more-text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ปุ่ม ดูเพิ่มเติม / ย่อ — หน้าตาเป็นลิงก์ตัวหนาแบบ Facebook */
.psu-jobs .pd-more-toggle {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #1F66B8;
    cursor: pointer;
    user-select: none;
}

    .psu-jobs .pd-more-toggle:hover {
        text-decoration: underline;
    }

    .psu-jobs .pd-more-toggle:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* =========================================================
   Responsive ตามความกว้าง "กรอบรายละเอียด" (container query)
   เดิมกล่องสรุปใช้ auto-fit จึงขึ้นแถวใหม่เองเมื่อกรอบแคบ
   พอเปลี่ยนเป็น 4 คอลัมน์ตายตัว (ใหญ่/เล็ก) จอกลาง ๆ (เช่น 1100–1400px) กรอบขวาแคบแต่ยังได้ 4 คอลัมน์ → เบียด/ล้น
   จึงให้สลับรูปแบบตามความกว้างของ .pd เอง แทนความกว้างหน้าจอ
   หมายเหตุ: ตั้ง container ที่ .pd (ไม่ใช่ .ui-detail) เพราะ container-type ทำให้ position: fixed ข้างในเพี้ยน
   และ .ui-detail มีแถบปุ่มล่างจอ (.ui-mbar) ที่เป็น fixed อยู่
   ========================================================= */
.psu-jobs .pd {
    container-type: inline-size;
    container-name: pd;
}

/* กรอบแคบกว่า 820px: 2 แถว [สถานะ | จำนวนที่รับ] [วันที่เปิดรับ | ประกาศล่าสุด] */
@container pd (max-width: 820px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* กรอบแคบกว่า 520px: กล่องใหญ่เต็มแถว กล่องเล็ก 2 กล่องคู่กัน */
@container pd (max-width: 520px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense;
    }

        .psu-jobs .pd-tiles .pd-tile.is-wide {
            grid-column: 1 / -1;
        }
    /* ส่วนงาน/ติดต่อ/รายละเอียดเพิ่มเติม: หัวข้ออยู่บน ข้อมูลอยู่ล่าง */
    .psu-jobs .pd-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

        .psu-jobs .pd-info dd {
            margin-bottom: 8px;
        }
}

/* ข้อความยาวที่ไม่มีช่องว่าง (เช่น อีเมล/ลิงก์) ไม่ดันกรอบให้ล้น */
.psu-jobs .pd-tile-value,
.psu-jobs .pd-info dd {
    overflow-wrap: anywhere;
}

/* =========================================================
   ขั้นตอนบนมือถือ (แบบ F2): แต่ละขั้นพับ/กางได้ เรียงขั้นล่าสุดไว้บนสุด
   (markup อยู่ใน PositionDetailComponent.razor ส่วน isNarrow)
   ========================================================= */
.psu-jobs .pd-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.psu-jobs .pd-acc-item {
    border: 1px solid #E1E9E8;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

    .psu-jobs .pd-acc-item.is-open {
        border-color: #9ED9CF;
    }

/* หัวขั้น: วงกลม | ชื่อขั้น | จำนวนไฟล์ | ลูกศร */
.psu-jobs .pd-acc-head {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    min-height: 48px; /* แตะง่ายบนมือถือ */
    text-align: left;
    cursor: pointer;
    background: #FFFFFF;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-head {
    background: #e8ffff;
}

.psu-jobs .pd-acc-head:focus-visible {
    outline: 3px solid rgba(92,214,196,.45);
    outline-offset: -3px;
}

.psu-jobs .pd-acc-head .pd-dot {
    width: 26px;
    height: 26px;
}

.psu-jobs .pd-acc-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #2B3440;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-title {
    color: #0B5F57;
    font-weight: 700;
}

/* ป้าย "ล่าสุด" ต่อท้ายชื่อขั้นปัจจุบัน */
.psu-jobs .pd-acc-new {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #0B5F57;
    background: #CDF1EC;
    padding: 0 7px;
    border-radius: 999px;
    vertical-align: 1px;
}

.psu-jobs .pd-acc-count {
    flex: none;
    font-size: 12px;
    color: #5B6779;
}

.psu-jobs .pd-acc-head .pd-acc-chev {
    flex: none;
    color: #5B6779;
    transition: transform .15s ease;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-chev {
    transform: rotate(180deg);
}

/* ไฟล์ของขั้นที่กาง */
.psu-jobs .pd-acc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 12px;
    border-top: 1px solid #D7ECE8;
}

/* =========================================================
   หมายเหตุของแต่ละฉบับ — อยู่เหนือตัวดู PDF (แทนที่จะอยู่ในหัวฉบับ)
   ========================================================= */
.psu-jobs .pd-file > .pd-file-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: none;
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #3A2600;
    background: #FFF7EA;
    border-top: 1px solid #F5D9AE;
    white-space: pre-line;
}

    .psu-jobs .pd-file > .pd-file-note b {
        color: #5C3300;
    }

    .psu-jobs .pd-file > .pd-file-note .pd-file-note-icon {
        flex: none;
        color: #B26A00;
        margin-top: 2px;
    }

/* =========================================================
   วงกลมขั้นตอน (ใช้ทั้งจอใหญ่และมือถือ)
   เลขขั้นแสดงเสมอ • ผ่านแล้ว = พื้นขาว + ติ้กถูกเล็กมุมบนขวา
   ขั้นล่าสุด = ขอบหนา • ขั้นที่กำลังเลือก = พื้นเขียวทึบ ตัวเลขขาว
   ========================================================= */
.psu-jobs .pd-dot {
    position: relative;
    width: 26px;
    height: 26px;
    background: #FFFFFF;
    border: 2px solid #9ED9CF;
    color: #0B5F57;
    box-shadow: none;
}

    .psu-jobs .pd-dot.is-done {
        background: #FFFFFF;
        border-color: #9ED9CF;
        color: #0B5F57;
    }

    .psu-jobs .pd-dot.is-now {
        border: 3px solid #78bbbd;
    }

    .psu-jobs .pd-dot.is-picked {
        background: #23829c;
        border-color: #2086bb;
        color: #FFFFFF;
        box-shadow: 0 0 0 4px #D5F3EE;
    }

.psu-jobs .pd-dot-tick {
    position: absolute;
    top: -6px;
    right: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #18804F;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    display: grid;
    place-items: center;
}

/* =========================================================
   รางขั้นตอนบนจอใหญ่ — หุบ/กางได้
   ปกติหุบ (52px) → ชี้เมาส์/Tab = กางลอยทับ PDF • .is-pinned (กด ☰) = กางค้างและดัน PDF
   ========================================================= */
.psu-jobs .pd-rounds-body {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
}

.psu-jobs .pd-rail-wrap {
    position: relative;
    flex: 0 0 52px; /* จองพื้นที่แค่ราง ให้ PDF กว้างสุด */
    align-self: stretch;
    transition: flex-basis .18s ease;
}

    .psu-jobs .pd-rail-wrap.is-pinned {
        flex-basis: 300px;
    }

.psu-jobs .pd-rail {
    position: absolute; /* ลอยทับ PDF ตอนชี้เมาส์ */
    top: 0;
    left: 0;
    z-index: 5;
    width: 52px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E1E9E8;
    border-radius: 14px;
    padding: 6px 0;
    transition: width .18s ease, box-shadow .18s ease;
}

    .psu-jobs .pd-rail:hover,
    .psu-jobs .pd-rail:focus-within {
        width: 300px;
        box-shadow: 0 8px 24px rgba(15,95,87,.16);
    }

/* กางค้าง: รางอยู่ในพื้นที่ของตัวเอง ไม่ลอยทับ */
.psu-jobs .pd-rail-wrap.is-pinned .pd-rail {
    position: relative;
    width: 100%;
    box-shadow: none;
}

/* ข้อความในราง: ซ่อนตอนหุบ แสดงตอนกาง */
.psu-jobs .pd-rail .pd-rail-text {
    opacity: 0;
    transition: opacity .12s;
}

.psu-jobs .pd-rail:hover .pd-rail-text,
.psu-jobs .pd-rail:focus-within .pd-rail-text,
.psu-jobs .pd-rail-wrap.is-pinned .pd-rail-text {
    opacity: 1;
}

/* ปุ่ม ☰ */
.psu-jobs .pd-rail-pin {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 34px;
    padding: 0 13px;
    margin-bottom: 4px;
    border-bottom: 1px solid #EEF3F2;
    color: #5B6779;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pd-rail-pin .pd-rail-pin-icon {
        flex: none;
        width: 24px;
    }

    .psu-jobs .pd-rail-pin[aria-pressed="true"] {
        color: #0B5F57;
        font-weight: 700;
    }

.psu-jobs .pd-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* แต่ละขั้น: [วงกลม+เส้น] [ชื่อ+จำนวนไฟล์] */
.psu-jobs .pd-rail-step {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 6px 12px 0;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pd-rail-pin:focus-visible,
    .psu-jobs .pd-rail-step:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: -3px;
        border-radius: 8px;
    }

.psu-jobs .pd-rail-col {
    flex: 0 0 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.psu-jobs .pd-rail-line {
    flex: 1;
    width: 2px;
    min-height: 16px;
    margin-top: 4px;
    background: #47abcd;
}

.psu-jobs .pd-rail-step .pd-rail-text {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
    line-height: 1.35;
}

.psu-jobs .pd-rail-label {
    font-size: 14px;
    color: #2B3440;
}

.psu-jobs .pd-rail-step.is-picked .pd-rail-label {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .pd-rail-count {
    font-size: 12px;
    color: #5B6779;
}

/* วันที่แนบไฟล์ ต่อท้าย "ฉบับที่ x [ล่าสุด]" */
.psu-jobs .pd-file-date {
    font-size: 13px;
    font-weight: 400;
    color: #5B6779;
}

    .psu-jobs .pd-file-date::before {
        content: "·";
        margin-right: 8px;
        color: #9AA5B1;
    }

/* =========================================================
   แก้รางขั้นตอน: (1) รางสูงไม่พอ/ถูกตัดเมื่อไม่มีไฟล์ (2) ชื่อขั้นยาวถูกตัด
   - รางไม่ใช้ position:absolute แล้ว → ความสูงของรางนับรวมในกรอบ ไม่ถูกตัดอีก
     ตอนชี้เมาส์ รางกว้างขึ้นและล้นออกไปทับ PDF ทางขวาแทน (กรอบ 52px เท่าเดิม PDF ไม่ขยับ)
   - ข้อความในรางกว้างคงที่ 230px และตัดบรรทัดได้ → ความสูงรางเท่ากันทั้งตอนหุบ/กาง
   ========================================================= */
.psu-jobs .pd-rail {
    position: relative;
}

    .psu-jobs .pd-rail:hover,
    .psu-jobs .pd-rail:focus-within {
        width: 300px; /* ล้นออกจากกรอบ 52px ไปทับ PDF */
    }

.psu-jobs .pd-rail-wrap.is-pinned .pd-rail {
    width: 100%;
}

.psu-jobs .pd-rail-step {
    white-space: normal;
}

    .psu-jobs .pd-rail-step .pd-rail-text {
        flex: 0 0 230px; /* กว้างคงที่ ไม่ถูกบีบตอนหุบ */
        width: 230px;
        overflow-wrap: anywhere;
    }

.psu-jobs .pd-rail-pin .pd-rail-text {
    white-space: nowrap;
}

/* =========================================================
   สลับมุมมอง การ์ด / ตาราง
   ========================================================= */
.psu-jobs .ui-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.psu-jobs .ui-view-seg {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid #CFE3E0;
    border-radius: 999px;
    padding: 3px;
}

    .psu-jobs .ui-view-seg button {
        font: inherit;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #4A5664;
        cursor: pointer;
    }

        .psu-jobs .ui-view-seg button.is-on {
            background: #dafbfb;
            color: #0B5F57;
            font-weight: 700;
            box-shadow: inset 0 0 0 1px #b9e7ed;
        }

/* โหมดตาราง: ซ่อนรายการแบบการ์ด รายละเอียดกลายเป็นแผงเลื่อนจากขวา */
.psu-jobs.is-table .ui-list {
    display: none;
}

.psu-jobs.is-table .ui-detail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 950; /* ต่ำกว่า ant-modal (1000) และ MudDialog (1400) */
    width: min(960px, 94vw);
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.14);
}

/* ปิดแผง: ซ่อนไปเลย (เดิมใช้เลื่อนออกนอกจอ ทำให้ตอนกดสลับเป็นตารางเห็นแผงวิ่งผ่านแว้บหนึ่ง) */
.psu-jobs.is-table:not(.is-detail) .ui-detail {
    display: none;
}

/* เปิดแผง: เลื่อนเข้าจากขวาด้วย animation (ไม่มี transform ค้าง → แถบปุ่มมือถือ fixed ยังติดล่างจอ) */
.psu-jobs.is-table.is-detail .ui-detail {
    display: block;
    animation: psuSlideIn .22s ease;
}

@keyframes psuSlideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: none;
    }
}

.psu-jobs.is-table .ui-back {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
}

.psu-jobs .ui-scrim {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(20,40,40,.35);
}

/* โหมดตาราง ≤1040px: ไม่ใช้กฎ 2 หน้าของโหมดการ์ด (หัวเรื่อง/ตัวกรองไม่ต้องหาย) */
@media (max-width: 1040px) {
    .psu-jobs.is-table.is-detail .ui-titlebar,
    .psu-jobs.is-table.is-detail .ui-stages {
        display: flex;
    }

    .psu-jobs.is-table.is-detail .ui-filter {
        display: grid;
    }

    .psu-jobs.is-table.is-detail .ui-chips {
        display: flex;
    }

    .psu-jobs.is-table .ui-detail {
        width: 100vw;
    }
}

/* =========================================================
   ตาราง (PositionTableComponent)
   ========================================================= */
.psu-jobs .pt {
    background: #FFFFFF;
    border: 1px solid #B9DED8;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15,95,87,.08);
    overflow: hidden;
}

.psu-jobs .pt-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid #D7ECE8;
}

.psu-jobs .pt-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1F4E79;
}

.psu-jobs .pt-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #5B6779;
}

.psu-jobs .pt-sbtn {
    font: inherit;
    font-size: 13px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #CFE3E0;
    background: #FFFFFF;
    color: #4A5664;
    cursor: pointer;
}

    .psu-jobs .pt-sbtn:hover {
        background: #F0FAF8;
    }

    .psu-jobs .pt-sbtn.is-on {
        background: #dafbfb;
        border-color: #b9e7ed;
        color: #0B5F57;
        font-weight: 700;
    }

.psu-jobs .pt-scroll {
    overflow-x: auto;
}

.psu-jobs .pt-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-size: 14px;
}

    .psu-jobs .pt-table th {
        background: #ceedf1;
        color: #1F4E79;
        font-weight: 700;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 2px solid #A9D7D0;
        white-space: nowrap;
    }
        /* เส้นแถว = เส้นคอลัมน์ สีเดียวกัน */
        .psu-jobs .pt-table th + th,
        .psu-jobs .pt-table td + td {
            border-left: 1px solid #C3D9D5;
        }

    .psu-jobs .pt-table td {
        padding: 8px 12px;
        border-bottom: 1px solid #C3D9D5;
        vertical-align: middle;
    }

    .psu-jobs .pt-table tbody tr:hover {
        background: #F6FCFB;
    }

    .psu-jobs .pt-table tbody tr.is-selected {
        background: #e8ffff;
    }

.psu-jobs .pt-no {
    width: 44px;
    text-align: right !important;
    color: #5B6779;
}

.psu-jobs .pt-round {
    width: 200px;
    text-align: center !important;
}

.psu-jobs .pt-fee {
    width: 124px;
    text-align: center !important;
}

.psu-jobs .pt-act {
    width: 140px;
    text-align: center !important;
}

.psu-jobs .pt-empty {
    padding: 24px !important;
}

/* ช่องประกาศ */
.psu-jobs .pt-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .psu-jobs .pt-line + .pt-line {
        margin-top: 3px;
    }

.psu-jobs .pt-title {
    font-size: 15px;
    font-weight: 700;
    color: #0B5F57;
}

.psu-jobs .pt-posno {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: #1F66B8;
    border: 1px solid #A9C7EA;
    padding: 0 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.psu-jobs .pt-rate {
    flex: none;
    margin-left: auto; /* จำนวนอัตราชิดขวา */
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background: #2F6FB8;
    padding: 1px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.psu-jobs .pt-meta {
    font-size: 13px;
    color: #4A5664;
}

    .psu-jobs .pt-meta b {
        color: #1F66B8;
        font-weight: 600;
    }

    .psu-jobs .pt-meta .pt-cal {
        font-size: 16px;
        color: #5B6779;
    }

.psu-jobs .pt-status {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    line-height: 20px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

    .psu-jobs .pt-status.is-open {
        color: #135E3A;
        background: #E8F7EE;
        border-color: #7FD3A3;
    }

    .psu-jobs .pt-status.is-soon {
        color: #B42318;
        background: #FEF1F0;
        border-color: #F3B4AE;
    }

    .psu-jobs .pt-status.is-closed {
        color: #4A5664;
        background: #EEF1F3;
        border-color: #E1E6EA;
    }

.psu-jobs .pt-sep {
    color: #B7C2C1;
}

.psu-jobs .pt-unit {
    color: #1F66B8;
}

.psu-jobs .pt-camp {
    color: #18804F;
}

.psu-jobs .pt-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #7A4100;
    background: #FFF3DC;
    border: 1px solid #F0C98A;
    padding: 0 8px;
    border-radius: 999px;
}

/* รอบการสอบ: ไอคอน + คำอธิบาย (ไม่มีรอบนั้น/ไม่มีข้อมูล = เทา) */
.psu-jobs .pt-exams {
    display: inline-flex;
    gap: 12px;
}

.psu-jobs .pt-exam {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #C9D1D3;
}

    .psu-jobs .pt-exam small {
        font-size: 11px;
        color: #B7C2C1;
    }

    .psu-jobs .pt-exam.is-written {
        color: #12A37A;
    }

    .psu-jobs .pt-exam.is-practical {
        color: #5B4FD6;
    }

    .psu-jobs .pt-exam.is-interview {
        color: #1F7AE0;
    }

        .psu-jobs .pt-exam.is-written small,
        .psu-jobs .pt-exam.is-practical small,
        .psu-jobs .pt-exam.is-interview small {
            color: #4A5664;
        }

/* ค่าสมัคร: ฿ ส้ม = มี, ฿ เทา = ไม่มี, — = ไม่มีข้อมูล */
.psu-jobs .pt-feebox {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    white-space: nowrap;
    color: #4A5664;
}

    .psu-jobs .pt-feebox i {
        font-style: normal;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 12px;
        color: #FFFFFF;
        background: #E0A022;
    }

    .psu-jobs .pt-feebox.is-no {
        color: #9AA5B1;
    }

        .psu-jobs .pt-feebox.is-no i {
            background: #D3DADC;
        }

    .psu-jobs .pt-feebox.is-unknown {
        color: #B7C2C1;
        font-size: 14px;
    }

/* ปุ่มดูรายละเอียด: ไม่มีสีพื้น */
.psu-jobs .pt-view {
    font: inherit;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 8px 0 12px;
    border-radius: 8px;
    border: 1px solid #9ED9CF;
    background: #FFFFFF;
    color: #0F7F74;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pt-view:hover {
        background: #F0FAF8;
        border-color: #45adb0;
    }

    .psu-jobs .pt-view:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

/* มือถือ: ตารางเรียงลงเป็นการ์ด */
@media (max-width: 760px) {
    .psu-jobs .pt-table,
    .psu-jobs .pt-table tbody,
    .psu-jobs .pt-table tr,
    .psu-jobs .pt-table td {
        display: block;
        min-width: 0;
        width: auto;
    }

        .psu-jobs .pt-table thead,
        .psu-jobs .pt-table .pt-no {
            display: none;
        }

        .psu-jobs .pt-table tr {
            padding: 10px 12px;
            border-bottom: 8px solid #F0F5F5;
        }

        .psu-jobs .pt-table td {
            border: 0 !important;
            padding: 3px 0;
            text-align: left !important;
        }
}

/* มือถือ + โหมดตาราง: เว้นที่ท้ายแผงให้แถบปุ่มสมัครล่างจอ */
@media (max-width: 760px) {
    .psu-jobs.is-table .ui-detail {
        padding-bottom: 110px;
    }
}

/* =========================================================
   รายละเอียด: รอบการสอบ + ค่าธรรมเนียม (บรรทัดเดียวกัน ในกรอบส่วนงาน)
   ========================================================= */
.psu-jobs .pd-exam-fee {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.psu-jobs .pd-exams {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.psu-jobs .pd-exam {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2B3440;
}

    .psu-jobs .pd-exam .mud-icon-root {
        font-size: 18px;
    }

    .psu-jobs .pd-exam.is-written .mud-icon-root {
        color: #12A37A;
    }

    .psu-jobs .pd-exam.is-practical .mud-icon-root {
        color: #5B4FD6;
    }

    .psu-jobs .pd-exam.is-interview .mud-icon-root {
        color: #1F7AE0;
    }

    /* ไม่มีรอบนั้น: เทาทั้งไอคอนและข้อความ (ไม่ขีดฆ่า) */
    .psu-jobs .pd-exam.is-off,
    .psu-jobs .pd-exam.is-off .mud-icon-root {
        color: #B7C2C1;
    }

/* เส้นคั่นระหว่างรอบสอบกับค่าธรรมเนียม */
.psu-jobs .pd-exam-sep {
    width: 1px;
    height: 16px;
    background: #CFDCDA;
}

.psu-jobs .pd-fee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2B3440;
}

    .psu-jobs .pd-fee i {
        font-style: normal;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 800;
        color: #FFFFFF;
        background: #E0A022;
    }

    .psu-jobs .pd-fee.is-no {
        color: #9AA5B1;
    }

        .psu-jobs .pd-fee.is-no i {
            background: #D3DADC;
        }

    .psu-jobs .pd-fee.is-unknown {
        color: #9AA5B1;
    }
/* ============================================================
   วางต่อท้าย wwwroot/css/app.css — มี 2 ส่วน

   ส่วนที่ 1: .divReport
   กล่อง "รายงานตัว" เดิมเขียนเป็น inline style ใน UserIndex.razor
   ย้ายมาเป็นคลาสกลุ่มเดียวกับ .divRegist / .divEditResume /
   .divChangePWD / .divAddResume ค่าทุกตัวยกมาจาก inline style เดิม
   (เพิ่ม :hover ตามรูปแบบเดียวกับกล่องอื่น)
   แนะนำให้วางไว้ต่อจากกฎ .divAddResume:hover
   ============================================================ */
.divReport {
    border: 1px solid #44ad4a;
    padding: 20px !important;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;
}

    .divReport:hover {
        background-color: #d8efda !important;
        box-shadow: 3px 5px #7cc481 !important;
        border: 1px solid #3a9a40;
    }

/* ============================================================
   ส่วนที่ 2: เมนูลัด (UserIndex) — การ์ดแนวนอนแบบเตี้ย [ไอคอน | ข้อความ | ลูกศร]

   สี เงา ขอบ และ hover ยังมาจากคลาสเดิม (.divRegist / .divEditResume /
   .divChangePWD / .divAddResume / .divReport) ไม่ได้แก้คลาสเดิม
   กฎในส่วนนี้ทับเฉพาะ padding กับ font-size ที่คลาสเดิมใส่ !important ไว้
   และทับเฉพาะในเมนูลัด (.shortcut-menu) หน้าอื่นที่ใช้คลาสเดิมไม่กระทบ

   การเรียงกล่องตามความกว้างจอ:
     5 กล่อง : >=1360px แถวเดียว | 960–1359px 3+2 | 600–959px 2+2+1 | <600px คอลัมน์เดียว
     4 กล่อง : >=1100px แถวเดียว | 600–1099px 2+2  | <600px คอลัมน์เดียว
   (การ์ดต้องกว้างราว 250px ขึ้นไป ข้อความจึงอยู่บรรทัดเดียว breakpoint คิดจากค่านี้)
   แถวที่ไม่เต็มจะจัดกึ่งกลางเอง (justify-content: center)
   ============================================================ */
.shortcut-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

    /* การ์ด 1 ใบ — ค่าเริ่มต้น (จอเล็ก) กว้างเต็มแถว */
    .shortcut-menu > .shortcut-card {
        flex: 0 0 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: auto 1fr auto; /* ไอคอน | ข้อความ | ลูกศร */
        align-items: center;
        column-gap: 12px;
        min-height: 72px;
        padding: 12px 16px !important; /* ทับ padding 20px !important ของคลาสเดิม */
        font-size: 18px !important; /* ทับ 20px !important ของคลาสเดิม */
        line-height: 1.3;
    }

.shortcut-card .sc-icon,
.shortcut-card .sc-arrow {
    display: flex;
}

/* ข้อความไม่ตัดบรรทัด ลูกศรจึงไม่ตกลงไปข้างล่าง */
.shortcut-card .sc-label {
    min-width: 0;
    white-space: nowrap;
}

    /* "(อาจารย์)" ขึ้นบรรทัดของตัวเอง การ์ดจะได้แคบลง */
    .shortcut-card .sc-label small {
        display: block;
        font-size: .75em;
    }

/* ขนาดไอคอน (MudIcon render เป็น svg.mud-icon-root) */
.shortcut-card .sc-icon .mud-icon-root {
    font-size: 2rem;
}

.shortcut-card .sc-arrow .mud-icon-root {
    font-size: 1.5rem;
}

/* 2 คอลัมน์ */
@media (min-width: 600px) {
    .shortcut-menu > .shortcut-card {
        flex-basis: calc((100% - 16px) / 2);
        max-width: 340px; /* จอใหญ่ การ์ดไม่ยืดยาวเกินไป */
    }
}

/* 5 กล่อง: 3 คอลัมน์ (3+2) */
@media (min-width: 960px) {
    .shortcut-menu--5 > .shortcut-card {
        flex-basis: calc((100% - 32px) / 3);
    }
}

/* 4 กล่อง: แถวเดียว */
@media (min-width: 1100px) {
    .shortcut-menu:not(.shortcut-menu--5) > .shortcut-card {
        flex: 1 1 0;
    }
}

/* 5 กล่อง: แถวเดียว */
@media (min-width: 1360px) {
    .shortcut-menu--5 > .shortcut-card {
        flex: 1 1 0;
    }
}

/* =========================================================
   โหมดตาราง: ปุ่ม "กลับไปรายการตำแหน่ง" ต้องไม่ถูกแถบเมนูด้านบนของเว็บบัง
   แผงรายละเอียดเริ่มใต้แถบเมนู — ใช้ความสูงแถบของ MudBlazor (--mud-appbar-height) ถ้าไม่มีใช้ 64px
   ถ้าแถบเมนูสูงไม่เท่านี้ ให้แก้ค่า 64px
   ========================================================= */
.psu-jobs.is-table .ui-detail {
    top: var(--mud-appbar-height, 64px);
}

/* ปุ่มกลับด้านบน: ติดขอบบนของแผงเสมอเวลาเลื่อน */
.psu-jobs.is-table .ui-back {
    border-bottom: 1px solid #D7ECE8;
}

/* ปุ่ม "กลับ" ในแถบปุ่มล่างจอ (มือถือ โหมดตาราง) — แคบกว่าปุ่มอื่น */
@media (max-width: 760px) {
    .psu-jobs .ui-mbar-buttons .ui-mbar-back {
        flex: 0 0 auto;
        padding: 0 12px;
    }
}

/* =========================================================
   แบ่งหน้า (ตาราง + การ์ด)
   ========================================================= */
.psu-jobs .ui-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid #D7ECE8;
    font-size: 13px;
    color: #4A5664;
}

    /* คอลัมน์การ์ด (แคบ): ปุ่มอยู่กลาง ไม่มีข้อความสรุป */
    .psu-jobs .ui-pager.is-compact {
        justify-content: center;
        padding: 10px 4px 2px;
    }

.psu-jobs .ui-pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.psu-jobs .ui-pg {
    font: inherit;
    font-size: 13px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid #CFE3E0;
    background: #FFFFFF;
    color: #2B3440;
    cursor: pointer;
}

    .psu-jobs .ui-pg:hover:not(:disabled) {
        background: #F0FAF8;
        border-color: #9ED9CF;
    }

    .psu-jobs .ui-pg.is-on {
        background: #3c829a;
        border-color: #2197a3;
        color: #FFFFFF;
        font-weight: 700;
    }

    .psu-jobs .ui-pg:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .psu-jobs .ui-pg:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

.psu-jobs .ui-pg-gap {
    padding: 0 2px;
    color: #9AA5B1;
}

.psu-jobs .ui-pager-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .psu-jobs .ui-pager-size select {
        font: inherit;
        height: 32px;
        padding: 0 6px;
        border-radius: 8px;
        border: 1px solid #CFE3E0;
        background: #FFFFFF;
        color: #2B3440;
    }

/* มือถือ: ข้อความสรุปอยู่บนสุด ปุ่มอยู่กลาง */
@media (max-width: 760px) {
    .psu-jobs .ui-pager {
        justify-content: center;
    }

    .psu-jobs .ui-pager-info {
        flex: 1 1 100%;
        text-align: center;
    }
}
/* ============================================================
   แท็บประวัติการสมัคร (UserIndex) — วางต่อท้าย wwwroot/css/app.css
   เพิ่มกฎใหม่เท่านั้น ไม่ได้แก้กฎเดิม
   จอเล็ก: ซ่อนคำว่า "ข้อมูลการสมัครงานที่" ในชื่อแท็บ
   เหลือ "กำลังดำเนินการ" / "เสร็จสิ้นแล้ว" ไม่ให้ชื่อแท็บตัดเป็นหลายบรรทัด
   ============================================================ */

/* ตัวเลขจำนวนรายการในชื่อแท็บ — อยู่ในบรรทัดเดียวกับชื่อ จึงไม่ถูกขอบแท็บตัด
   สีใช้ตัวแปรสีของ MudBlazor (info = ฟ้า, success = เขียว) ให้ตรงกับ badge เดิม */
.apply-tab-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}

.apply-tab-count--active {
    background-color: var(--mud-palette-info);
}

.apply-tab-count--close {
    background-color: var(--mud-palette-success);
}

@media (max-width: 600px) {
    .apply-tab-long {
        display: none;
    }
}

/* =========================================================
   หน้า "ตำแหน่งใกล้เคียง" (PositionDetailRelated)
   ใช้คลาสชุดเดียวกับหน้าแรกเกือบทั้งหมด — ด้านล่างคือส่วนที่เพิ่มเฉพาะหน้านี้
   ========================================================= */

/* จำนวนรายการต่อท้ายหัวเรื่อง */
.psu-jobs .ui-title-count {
    font-size: 14px;
    font-weight: 500;
    color: #4A5664;
}

/* ปุ่มกลับหน้าแรก — สูงเท่าปุ่มสลับมุมมอง */
.psu-jobs .ui-home-btn {
    min-height: 40px;
    border-radius: 999px;
}

/* ข้อความที่แสดงเฉพาะจอ ≤ 760px (คู่กับ .ui-hide-sm) */
.psu-jobs .ui-show-sm {
    display: none;
}

/* กล่องชื่อตำแหน่ง (สีเขียวแบบเดิม) */
.psu-jobs .ui-relpos {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F3FDF6;
    border: 1px solid #92DEB2;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #135E3A;
}

    .psu-jobs .ui-relpos > span {
        min-width: 0; /* ข้อความไทยยาวใน flex ให้ตัดบรรทัดได้ */
    }

/* จอแคบ โหมดการ์ด: เปิดรายละเอียดแล้ว ซ่อนกล่องชื่อตำแหน่ง (หัวรายละเอียดมีชื่อตำแหน่งอยู่แล้ว)
   ส่วนหัวเรื่อง (.ui-titlebar) ถูกซ่อนด้วยกฎ 2 หน้าเดิมด้านบนอยู่แล้ว */
@media (max-width: 1040px) {
    .psu-jobs.is-detail:not(.is-table) .ui-relpos {
        display: none;
    }
}

@media (max-width: 760px) {
    .psu-jobs .ui-show-sm {
        display: inline;
    }

    .psu-jobs .ui-title-count {
        flex-basis: 100%;
        font-size: 13px;
    }

    .psu-jobs .ui-title {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .psu-jobs .ui-relpos {
        font-size: 16px;
        padding: 8px 12px;
    }
}

/* =========================================================
   แถบสรุปท้ายกล่องรายการของ Select (ช่องตำแหน่งในแผงค้นหา) — "แสดง 50 จาก 1,234 รายการ"
   *** ไม่ขึ้นต้นด้วย .psu-jobs โดยตั้งใจ ***
   กล่องรายการของ AntDesign ถูกวางไว้นอกหน้า (ท้าย <body>) จึงอยู่นอก .psu-jobs
   ค่าเหมือนกับใน EducationHistoryDialog ทุกตัว — ถ้าย้ายไป app.css แล้ว ลบทั้งสองที่ให้เหลือที่เดียวได้
   ========================================================= */
.psu-dd-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 4px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b7681;
    cursor: default;
}

    .psu-dd-foot b {
        color: #2f3943;
        font-variant-numeric: tabular-nums;
    }

    .psu-dd-foot .mud-icon-root {
        flex: 0 0 auto;
        width: 15px !important;
        height: 15px !important;
        font-size: 15px !important;
        color: #9aa4af;
    }
/* =========================================================
   หน้าแรก: ป้าย "สมัครแล้ว" / "ยังไม่เปิดรับสมัคร" — ต่อท้าย index.css
   อยู่ใต้ .psu-jobs ไม่กระทบหน้าอื่น
   ========================================================= */

/* ป้ายในตาราง */
.psu-jobs .psu-applied-tag,
.psu-jobs .psu-soon-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

    .psu-jobs .psu-applied-tag .mud-icon-root {
        font-size: 14px;
    }

.psu-jobs .psu-applied-tag {
    color: #237804;
    background: #f6ffed;
    border-color: #b7eb8f;
}

.psu-jobs .psu-soon-tag {
    color: #ad6800;
    background: #fffbe6;
    border-color: #ffe58f;
}

/* ข้อความใต้ชื่อตำแหน่งในหัวรายละเอียด */
.psu-jobs .psu-apply-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
}

    .psu-jobs .psu-apply-note.is-applied {
        color: #237804;
        background: #f6ffed;
        border: 1px solid #b7eb8f;
    }

    .psu-jobs .psu-apply-note.is-soon {
        color: #ad6800;
        background: #fffbe6;
        border: 1px solid #ffe58f;
    }

/* ปุ่ม "สมัครแล้ว · ดูใบสมัคร" — สีเขียวอ่อน ไม่เด่นเท่าปุ่มสมัคร */
.psu-jobs .ui-btn--applied {
    color: #237804;
    background: #f6ffed;
    border: 1px solid #95de64;
}

    .psu-jobs .ui-btn--applied:hover {
        background: #d9f7be;
    }

/* =========================================================
   index.css — หน้าแรก (NewIndex) แบบ I-1 (CSS กลาง ไฟล์เดียว)
   รวม: หน้า NewIndex + การ์ดตำแหน่ง + รายละเอียดตำแหน่ง

   กันกระทบหน้าอื่น: ทุก selector ขึ้นต้นด้วย .psu-jobs
   ต้องมี <div class="psu-jobs ui-page ..."> ใน NewIndex.razor (มีในไฟล์ที่ส่งให้แล้ว)
   ถ้าไม่มีคลาสนี้ สไตล์ทั้งหมดในไฟล์นี้จะไม่ทำงาน
   ========================================================= */


.psu-jobs {
    /* ใช้ความกว้างเต็มจอ — จำกัดไว้ที่ 1920px เพื่อไม่ให้ยืดเกินไปบนจอ ultrawide */
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 12px clamp(12px, 2vw, 32px) 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #1E2A36;
}

    /* ---------- หัวเรื่อง + ปุ่มตัวกรอง ---------- */
    .psu-jobs .ui-titlebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 22px;
        font-weight: 700;
        color: #1F4E79;
    }

    /* ---------- ปุ่มเปิด/ปิดแผงค้นหา ----------
       โทนม่วงของส่วนค้นหา (ตามแบบหน้า ReportIndex) — แก้สีทั้งชุดได้ที่ตัวแปร --sf-* ใน .ui-filter ด้านล่าง */
    .psu-jobs .ui-filter-toggle {
        font: inherit;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #D6CCF8;
        background: #FFFFFF;
        color: #1E2A36;
        cursor: pointer;
    }

        .psu-jobs .ui-filter-toggle.is-on {
            background: #F3F0FF;
            border-color: #B9A8F2;
            color: #4B2FB8;
            font-weight: 600;
        }

    /* จำนวนตัวกรองที่ใช้อยู่ บนปุ่ม */
    .psu-jobs .ui-filter-count {
        min-width: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #5B3AD6;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }

    /* ---------- แผงค้นหา (โทนม่วง) ----------
       แถวบน: 3 ช่อง [ชื่อช่อง | ช่องเลือก] • แถวล่าง: ข้อความเตือน (ถ้ามี) + ปุ่มชิดขวา */
    .psu-jobs .ui-filter {
        --sf-bg: #F7F5FF; /* พื้นแผง */
        --sf-border: #D6CCF8; /* เส้นขอบแผง */
        --sf-accent: #5B3AD6; /* ปุ่มค้นหา / สีเน้น */
        --sf-accent-hover: #4B2FB8;
        --sf-label: #3F4A56; /* ชื่อช่อง */
        --sf-label-w: 118px; /* ความกว้างชื่อช่อง — เท่ากันทุกช่อง ช่องเลือกจึงตรงแนว */
        --sf-field-h: 44px; /* ความสูงช่องเลือก */
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 24px;
        align-items: center;
        background: var(--sf-bg);
        border: 1px solid var(--sf-border);
        border-radius: 8px;
        padding: 16px 20px;
    }

    .psu-jobs .ui-filter-field {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .psu-jobs .ui-filter-label {
        flex: 0 0 var(--sf-label-w);
        text-align: right;
        font-size: 14px;
        line-height: 1.3;
        color: var(--sf-label);
        overflow-wrap: anywhere; /* ชื่อช่องยาว ("ค้นหาภายในวิทยาเขต:") ตัดเป็น 2 บรรทัดได้ ไม่ดันช่องเลือก */
    }

    /* ช่องเลือกของ AntDesign: ยืดเต็มที่เหลือ สูงเท่ากันทุกช่อง พื้นขาว */
    .psu-jobs .ui-filter-field > .ant-select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    .psu-jobs .ui-filter .ant-select-selector {
        min-height: var(--sf-field-h) !important;
        height: var(--sf-field-h) !important;
        border-radius: 6px !important;
        background: #FFFFFF !important;
        display: flex;
        align-items: center;
    }

    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-item,
    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-search-input {
        line-height: calc(var(--sf-field-h) - 2px) !important;
        height: calc(var(--sf-field-h) - 2px) !important;
    }

    /* เลือกเงื่อนไขใหม่แต่ยังไม่กดค้นหา */
    .psu-jobs .ui-filter-pending {
        grid-column: 1 / 3;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid #FFD99A;
        border-radius: 6px;
        background: #FFF6E5;
        color: #A15C00;
        font-size: 13px;
    }

    /* ปุ่ม ล้างตัวกรอง + ค้นหา — อยู่คอลัมน์ขวาสุดของแถวล่าง */
    .psu-jobs .ui-filter-actions {
        grid-column: 3;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .psu-jobs .ui-filter-btn {
        min-height: 44px;
        border-radius: 8px;
    }

    .psu-jobs .ui-filter-btn--primary {
        min-width: 140px;
        background: var(--sf-accent);
        border: 1px solid var(--sf-accent);
        color: #FFFFFF;
        font-weight: 700;
        box-shadow: 0 2px 6px rgba(91, 58, 214, .25);
    }

        .psu-jobs .ui-filter-btn--primary:hover {
            background: var(--sf-accent-hover);
        }

    .psu-jobs .ui-filter-btn--outline {
        background: #FFFFFF;
        border: 1px solid #C3B3F3;
        color: var(--sf-accent);
    }

        .psu-jobs .ui-filter-btn--outline:hover:not(:disabled) {
            background: #F1EEFF;
        }

    .psu-jobs .ui-filter-actions .ui-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    /* ---------- แท็ก "กรองโดย" (ตัวกรองที่ใช้อยู่) ---------- */
    .psu-jobs .ui-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        padding: 8px 12px;
        border: 1px dashed #D6CCF8;
        border-radius: 8px;
        background: #FBFAFF;
    }

    .psu-jobs .ui-chips-label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: #6B6F85;
        white-space: nowrap;
    }

    .psu-jobs .ui-chip {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        max-width: 100%;
        padding: 1px 4px 1px 10px;
        border: 1px solid #C3B3F3;
        border-radius: 999px;
        background: #F1EEFF;
        color: #4B2FB8;
        font-size: 13px;
        line-height: 24px;
    }

    /* ชื่อยาว (ส่วนงาน/ตำแหน่ง) ตัดด้วย … ไม่ดันแถวล้น */
    .psu-jobs .ui-chip-text {
        min-width: 0;
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .psu-jobs .ui-chip-text b {
            font-weight: 600;
        }

    .psu-jobs .ui-chip-x {
        flex: none;
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

        .psu-jobs .ui-chip-x:hover:not(:disabled) {
            background: #DDD3FF;
        }

        .psu-jobs .ui-chip-x .mud-icon-root {
            font-size: 16px;
        }

    .psu-jobs .ui-chips-clear {
        margin-left: 4px;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 13px;
        color: #5B3AD6;
        text-decoration: underline;
        cursor: pointer;
    }

        .psu-jobs .ui-chip-x:disabled,
        .psu-jobs .ui-chips-clear:disabled {
            opacity: .5;
            cursor: default;
        }

    /* ---------- ปุ่มสถานะ (pill) ---------- */
    .psu-jobs .ui-stages {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #FFFFFF;
        border: 1px solid #CDEFEA;
        border-radius: 999px;
        padding: 4px;
    }

    .psu-jobs .ui-arrow {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0;
        background: #F0FAF8;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4A5664;
    }

    .psu-jobs .ui-stage-strip {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

        .psu-jobs .ui-stage-strip::-webkit-scrollbar {
            display: none;
        }

    .psu-jobs .ui-stage-row {
        display: flex;
        gap: 4px;
        width: max-content;
        margin: 0 auto;
    }

    .psu-jobs .ui-stage {
        font: inherit;
        font-size: 14px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 2px solid transparent;
        background: transparent;
        color: #2B3440;
        cursor: pointer;
    }

        .psu-jobs .ui-stage:hover {
            background: #F0FAF8;
        }

        .psu-jobs .ui-stage.is-on {
            background: #dafbfb;
            border-color: #b9e7ed;
            color: #0B5F57;
            font-weight: 700;
        }

    .psu-jobs .ui-stage-count {
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        min-width: 20px;
        text-align: center;
        padding: 0 6px;
        border-radius: 999px;
        background: #E3EAF4;
        color: #2A4A73;
    }

    .psu-jobs .ui-stage.is-on .ui-stage-count {
        background: #2291b0;
        color: #ffffff;
    }

    /* ---------- Layout ซ้าย/ขวา ---------- */
    .psu-jobs .ui-layout {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .psu-jobs .ui-list {
        /* คอลัมน์รายการ: ประมาณ 28% ของความกว้าง (340–520px) ที่เหลือให้รายละเอียด */
        flex: 0 1 28%;
        min-width: 340px;
        max-width: 520px;
        background: #FFFFFF;
        border: 1px solid #B9DED8;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15,95,87,.08);
        padding: 14px 8px 8px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .psu-jobs .ui-list-head {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: #1F4E79;
        padding-right: 6px;
    }

    .psu-jobs .ui-list-scroll {
        position: relative;
        height: 600px; /* เท่าความสูงเดิม */
        overflow: auto;
        padding: 4px 6px 24px 0;
    }

    .psu-jobs .ui-list-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .psu-jobs .ui-detail {
        flex: 999 1 560px;
        min-width: 0;
        background: #FFFFFF;
        border: 1px solid #B9DED8;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15,95,87,.08);
        overflow: hidden;
    }

    /* ---------- หัวรายละเอียด ---------- */
    .psu-jobs .ui-back {
        display: none; /* แสดงเฉพาะมือถือ */
        padding: 4px 8px;
        border-bottom: 1px solid #EEF3F2;
    }

    .psu-jobs .ui-back-btn {
        font: inherit;
        min-height: 44px;
        padding: 0 10px;
        border: 0;
        background: transparent;
        color: #1F4E79;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }

    .psu-jobs .ui-detail-head {
        background: #cff4f4;
        border-bottom: 1px solid #BDE9E3;
        padding: 8px 24px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
    }

    .psu-jobs .ui-detail-titlewrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        flex: 1 1 360px;
    }

    /* ชื่อตำแหน่ง + ต.เลขที่ (ต่อท้ายในแถวเดียวกัน ถ้าไม่พอจะขึ้นบรรทัดใหม่) */
    .psu-jobs .ui-detail-titlerow {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-detail-title {
        margin: 0;
        font-size: 22px;
        line-height: 1.4;
        color: #0B5F57;
        outline: none;
    }

    .psu-jobs .ui-posno {
        font-size: 13px;
        font-weight: 600;
        color: #1F66B8;
        border: 1px solid #A9C7EA;
        background: #FFFFFF;
        padding: 1px 10px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .psu-jobs .ui-detail-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
    }

    .psu-jobs .ui-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 999px;
        background: #FFFFFF;
    }

        .psu-jobs .ui-status.is-open {
            color: #135E3A;
            border: 1px solid #7FD3A3;
        }

        .psu-jobs .ui-status.is-closed {
            color: #B42318;
            border: 1px solid #F3B4AE;
        }

    .psu-jobs .ui-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .psu-jobs .ui-countdown {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 999px;
        background: #EFEAFB;
        color: #4C2F91;
        border: 1px solid #C9B8F0;
    }

    .psu-jobs .ui-stage-note {
        font-size: 12px;
        color: #4A5664;
    }

    .psu-jobs .ui-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-detail-empty {
        padding: 16px 24px 0;
    }

    .psu-jobs .ui-detail-body {
        padding: 8px 12px 16px;
    }

    /* ---------- ปุ่ม ---------- */
    .psu-jobs .ui-btn {
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        white-space: nowrap;
    }

    .psu-jobs .ui-btn--primary {
        background: #3c829a;
        color: #FFFFFF;
        border: 1px solid #2197a3;
        font-weight: 700;
    }

        .psu-jobs .ui-btn--primary:hover {
            background: #0B5F57;
        }

    .psu-jobs .ui-btn--outline {
        background: #FFFFFF;
        color: #0F7F74;
        border: 1px solid #9ED9CF;
    }

    .psu-jobs .ui-btn--disabled {
        background: #E4E8EB;
        color: #5B6779;
        border: 1px solid #E4E8EB;
        cursor: not-allowed;
    }

    /* แถบปุ่มล่างจอ (มือถือ) */
    .psu-jobs .ui-mbar {
        display: none;
    }


/* =========================================================
   Responsive (รวมทุกส่วน)
   ========================================================= */

/* จอกลาง: ชื่อช่องในแผงค้นหาแคบลง ให้ช่องเลือกได้ที่มากขึ้น */
@media (max-width: 1400px) {
    .psu-jobs .ui-filter {
        --sf-label-w: 96px;
        gap: 14px 16px;
    }
}

/* แท็บเล็ต + มือถือ (≤1040px): รายการกับรายละเอียดวางซ้อนกันไม่ได้แล้ว
   จึงใช้แบบ 2 หน้า — หน้ารายการ → กดตำแหน่ง → หน้ารายละเอียด (มีปุ่ม "กลับ") */
@media (max-width: 1040px) {
    .psu-jobs .ui-list {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .psu-jobs .ui-detail {
        flex: 1 1 100%;
    }

    /* รายการไม่ต้องสกอร์ลซ้อน ให้เลื่อนไปกับหน้า */
    .psu-jobs .ui-list-scroll {
        height: auto;
        overflow: visible;
    }

    /* หน้ารายการ: ซ่อนรายละเอียด (ยัง render อยู่ เพื่อให้ @ref ใช้งานได้) */
    .psu-jobs:not(.is-detail) .ui-detail {
        display: none;
    }

    /* หน้ารายละเอียด: ซ่อนหัวเรื่อง ตัวกรอง สถานะ และรายการ */
    .psu-jobs.is-detail .ui-titlebar,
    .psu-jobs.is-detail .ui-filter,
    .psu-jobs.is-detail .ui-chips,
    .psu-jobs.is-detail .ui-stages,
    .psu-jobs.is-detail .ui-list {
        display: none;
    }

    /* ปุ่ม "กลับไปรายการ" */
    .psu-jobs .ui-back {
        display: flex;
    }

    /* แผงค้นหา: 2 คอลัมน์ ชื่อช่องขึ้นไปอยู่บนช่องเลือก ปุ่มลงบรรทัดของตัวเองชิดขวา */
    .psu-jobs .ui-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    .psu-jobs .ui-filter-field {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .psu-jobs .ui-filter-label {
        flex: 0 0 auto;
        text-align: left;
        font-size: 13px;
    }

    .psu-jobs .ui-filter-field > .ant-select {
        width: 100% !important;
    }

    .psu-jobs .ui-filter-pending,
    .psu-jobs .ui-filter-actions {
        grid-column: 1 / -1;
    }
}

/* มือถือ: 2 หน้า (รายการ → รายละเอียด) */
@media (max-width: 760px) {
    .psu-jobs {
        padding: 10px 12px 24px;
    }

        .psu-jobs .ui-title {
            font-size: 19px;
        }

        .psu-jobs .ui-filter {
            grid-template-columns: 1fr;
            padding: 12px;
        }

        .psu-jobs .ui-filter-actions .ui-btn {
            flex: 1 1 0;
            min-width: 0;
        }

        .psu-jobs .ui-chip-text {
            max-width: 220px;
        }

        .psu-jobs .ui-hide-sm {
            display: none;
        }

        .psu-jobs .ui-detail {
            margin-bottom: 110px; /* เว้นที่ให้แถบปุ่มล่างจอ */
        }

        .psu-jobs .ui-detail-head {
            padding: 14px 16px;
        }

        .psu-jobs .ui-detail-title {
            font-size: 19px;
        }

        .psu-jobs .ui-detail-body {
            padding: 8px 4px 16px;
        }

        .psu-jobs .ui-mbar {
            display: flex;
            flex-direction: column;
            gap: 6px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 900; /* ต่ำกว่า ant-modal (1000) และ MudDialog (1400) */
            background: #FFFFFF;
            border-top: 1px solid #D7ECE8;
            box-shadow: 0 -2px 8px rgba(0,0,0,.06);
            padding: 8px 16px 14px;
        }

        .psu-jobs .ui-mbar-note {
            font-size: 12px;
            text-align: center;
            color: #4C2F91;
            font-weight: 700;
        }

        .psu-jobs .ui-mbar-buttons {
            display: flex;
            gap: 8px;
        }

            .psu-jobs .ui-mbar-buttons .ui-btn {
                flex: 1 1 0;
                padding: 0 8px;
            }
}

/* =========================================================
   2) การ์ดตำแหน่ง (LeftPositionComponent)
   ========================================================= */
.psu-jobs .lp-card {
    font: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E1E9E8;
    color: #1E2A36;
}

    /* ทุกแถวในการ์ดชิดซ้าย (กันสไตล์จากธีม/app.css ที่จัดกึ่งกลาง) */
    .psu-jobs .lp-card > span {
        width: 100%;
        text-align: left !important;
    }

    .psu-jobs .lp-card .lp-unit,
    .psu-jobs .lp-card .lp-title {
        display: block;
        text-align: left !important;
    }

    .psu-jobs .lp-card .lp-chips {
        justify-content: flex-start;
    }

    .psu-jobs .lp-card:hover {
        border-color: #9ED9CF;
    }

    .psu-jobs .lp-card:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

    /* การ์ดที่เลือก: มิ้นท์ + ขอบล่างหนา */
    .psu-jobs .lp-card.is-selected {
        background: #e8ffff;
        border: 2px solid #b4cecf;
        border-bottom-width: 5px;
    }

.psu-jobs .lp-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.psu-jobs .lp-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.psu-jobs .lp-card.is-selected .lp-title {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .lp-rate {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background: #2F6FB8;
    padding: 1px 10px;
    border-radius: 999px;
    margin-top: 3px;
    white-space: nowrap;
}

.psu-jobs .lp-unit {
    font-size: 14px;
    color: #1F66B8;
}

.psu-jobs .lp-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.psu-jobs .lp-campus {
    font-size: 12px;
    color: #18804F;
    border: 1px solid #7FD3A3;
    background: #FFFFFF;
    padding: 1px 10px;
    border-radius: 999px;
}

.psu-jobs .lp-countdown {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: #FFFFFF;
}

    .psu-jobs .lp-countdown.is-open {
        color: #135E3A;
        border: 1px solid #8FD9B0;
    }

    .psu-jobs .lp-countdown.is-soon {
        color: #B42318;
        border: 1px solid #F3B4AE;
    }

    .psu-jobs .lp-countdown.is-closed {
        color: #4A5664;
        background: #EEF1F3;
        border: 1px solid #E1E6EA;
    }

    /* ยังไม่ถึงวันเปิดรับ — "เปิดรับในอีก X วัน" สีฟ้า แยกจากเขียว (เปิดอยู่) และแดง (ใกล้ปิด) */
    .psu-jobs .lp-countdown.is-upcoming {
        color: #1D4F91;
        background: #EEF5FF;
        border: 1px solid #A9C7EE;
    }

.psu-jobs .lp-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #7A4100;
    background: #FFF3DC;
    border: 1px solid #F0C98A;
    padding: 0 8px;
    border-radius: 999px;
    cursor: help;
}

.psu-jobs .lp-bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #4A5664;
}

.psu-jobs .lp-dates {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.psu-jobs .lp-date {
    color: #1F66B8;
}

.psu-jobs .lp-posno {
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   3) รายละเอียดตำแหน่ง (PositionDetailComponent)
   ========================================================= */
.psu-jobs .pd {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 12px 4px;
    color: #1E2A36;
    font-size: 14px;
}

.psu-jobs .pd-h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1F4E79;
}

/* ---------- กล่องข้อมูลสรุป (aqua เรืองขอบ) ---------- */
/* ลำดับกล่อง: สถานะ (ใหญ่) | จำนวนที่รับ (เล็ก) | วันที่เปิดรับ (ใหญ่) | ประกาศล่าสุด (เล็ก)
   กล่องใหญ่กว้าง 2 ส่วน กล่องเล็กกว้าง 1 ส่วน */
.psu-jobs .pd-tiles {
    display: grid;
    /* minmax(0, …) = ยอมให้กล่องหดได้ ไม่ดันเนื้อหาจนล้นกรอบ */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 10px;
}

.psu-jobs .pd-tile {
    background: #FFFFFF;
    border: 1px solid #A9DCE8;
    box-shadow: inset 0 0 14px rgba(70,180,210,.22);
    border-radius: 12px;
    padding: 10px 14px;
}

.psu-jobs .pd-tile-label {
    font-size: 12px;
    color: #3E6470;
}

.psu-jobs .pd-tile-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- สถานะการรับสมัครในการ์ด "วันที่เปิดรับสมัคร" ----------
   เปิดรับอยู่ในขณะนี้ (เขียว) / ปิดรับสมัคร (แดง)
   จะปิดภายใน X วัน (ม่วงอ่อน, เหลือ ≤ 3 วันเป็นแดง) / เลื่อนปิดรับสมัคร (เหลืองอำพัน) */
.psu-jobs .pd-tile-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.psu-jobs .pd-open,
.psu-jobs .pd-closed,
.psu-jobs .pd-countdown,
.psu-jobs .pd-delay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.psu-jobs .pd-open {
    color: #135E3A;
    background: #E8F7EE;
    border-color: #7FD3A3;
}

.psu-jobs .pd-closed {
    color: #B42318;
    background: #FEF1F0;
    border-color: #F3B4AE;
}

.psu-jobs .pd-countdown {
    color: #4C2F91;
    background: #EFEAFB;
    border-color: #C9B8F0;
}

    .psu-jobs .pd-countdown.is-soon {
        color: #B42318;
        background: #FEF1F0;
        border-color: #F3B4AE;
    }

.psu-jobs .pd-delay {
    color: #7A4100;
    background: #FFF3DC;
    border-color: #F0C98A;
}

/* จุดวงกลมเล็กหน้าข้อความ เปิด/ปิดรับ (ใช้สีเดียวกับตัวอักษร) */
.psu-jobs .pd-dot-sm {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ไอคอน MudIcon ในป้ายให้เล็กพอดีตัวอักษร */
.psu-jobs .pd-tile-status .mud-icon-root {
    font-size: 15px;
}

/* ---------- ส่วนงาน / ติดต่อสอบถาม / รายละเอียดเพิ่มเติม ---------- */
.psu-jobs .pd-info {
    margin: 0;
    display: grid;
    /* คอลัมน์หัวข้อกว้างตามข้อความยาวสุด — "รายละเอียดเพิ่มเติม" จึงไม่ตกบรรทัด */
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 16px;
    background: #F8FAFB;
    border: 1px solid #E1E8EA;
    border-radius: 12px;
    padding: 14px 16px;
}

    .psu-jobs .pd-info dt {
        font-weight: 600;
        color: #1F4E79;
        white-space: nowrap;
    }

    .psu-jobs .pd-info dd {
        margin: 0;
    }

.psu-jobs .pd-unit {
    color: #1F66B8;
    margin-right: 6px;
}

.psu-jobs .pd-campus {
    display: inline-block;
    font-size: 12px;
    color: #18804F;
    border: 1px solid #7FD3A3;
    background: #FFFFFF;
    padding: 0 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.psu-jobs .pd-contact {
    display: flex;
    gap: 4px 24px;
    flex-wrap: wrap;
}

    .psu-jobs .pd-contact a {
        color: #1F66B8;
        word-break: break-all;
    }

/* ---------- รายละเอียดเพิ่มเติม ---------- */
.psu-jobs .pd-more p {
    margin: 0;
    line-height: 1.7;
    white-space: pre-line;
}

/* ---------- หมายเหตุ ---------- */
.psu-jobs .pd-remark {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FFF7EA;
    border: 1px solid #F5D9AE;
    border-radius: 12px;
    padding: 12px 16px;
}

    /* MudIcon เป็น component ลูก */
    .psu-jobs .pd-remark .pd-remark-icon {
        color: #B26A00;
        margin-top: 2px;
        flex: none;
    }

.psu-jobs .pd-remark-title {
    font-size: 14px;
    font-weight: 700;
    color: #5C3300;
}

.psu-jobs .pd-remark-text {
    font-size: 15px;
    line-height: 1.75;
    color: #3A2600;
    white-space: pre-line;
}

/* ---------- ขั้นตอน + ไฟล์ ---------- */
.psu-jobs .pd-status {
    font-weight: 400;
    color: #1F66B8;
}

.psu-jobs .pd-rounds-body {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* stepper แนวตั้ง (จอใหญ่) */
.psu-jobs .pd-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 240px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
}

.psu-jobs .pd-step {
    font: inherit;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 6px 4px 0;
    text-align: left;
}

.psu-jobs .pd-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.psu-jobs .pd-step-line {
    flex: 1;
    width: 2px;
    min-height: 20px;
    margin-top: 6px;
    background: #DCE6E5;
}

    .psu-jobs .pd-step-line.is-done {
        background: #47abcd;
    }

.psu-jobs .pd-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    padding-bottom: 14px;
}

.psu-jobs .pd-step-label {
    font-size: 14px;
    font-weight: 500;
    color: #2B3440;
}

.psu-jobs .pd-step.is-picked .pd-step-label {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .pd-step-count {
    font-size: 12px;
    color: #5B6779;
}

/* วงกลม */
.psu-jobs .pd-dot {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #FFFFFF;
    border: 2px solid #C9D4D3;
    color: #5B6779;
}

    .psu-jobs .pd-dot.is-done {
        background: #45adb0;
        border-color: #bee0e2;
        color: #ffffff;
    }

    .psu-jobs .pd-dot.is-now {
        border: 3px solid #78bbbd;
        color: #0B5F57;
    }

    .psu-jobs .pd-dot.is-picked {
        box-shadow: 0 0 0 5px #D5F3EE;
    }

/* stepper แนวนอน (มือถือ) — ซ่อนบนจอใหญ่ */
.psu-jobs .pd-steps-m {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.psu-jobs .pd-steps-m-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.psu-jobs .pd-step-m {
    font: inherit;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.psu-jobs .pd-step-m-line {
    flex: 1;
    height: 2px;
    min-width: 8px;
    background: #DCE6E5;
}

    .psu-jobs .pd-step-m-line.is-done {
        background: #5CD6C4;
    }

.psu-jobs .pd-step-m-info {
    background: #F0FAF8;
    border: 1px solid #D7ECE8;
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1.45;
}

.psu-jobs .pd-step-m-num,
.psu-jobs .pd-step-m-count {
    font-size: 12px;
    color: #4A5664;
}

.psu-jobs .pd-step-m-label {
    font-size: 15px;
    font-weight: 700;
    color: #0B5F57;
}

/* ไฟล์ */
.psu-jobs .pd-files {
    flex: 999 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.psu-jobs .pd-files-title {
    font-weight: 600;
    color: #1F4E79;
}

.psu-jobs .pd-files-empty {
    border: 1px dashed #C9D9D6;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: #4A5664;
}

.psu-jobs .pd-file {
    border: 1px solid #D7ECE8;
    border-radius: 12px;
    overflow: hidden;
}

.psu-jobs .pd-file-head {
    font: inherit;
    width: 100%;
    text-align: left;
    border: 0;
    background: #FFFFFF;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .psu-jobs .pd-file-head.is-open {
        background: #f2fdff;
    }

    .psu-jobs .pd-file-head .pd-chev {
        transition: transform .15s ease;
    }

    .psu-jobs .pd-file-head.is-open .pd-chev {
        transform: rotate(90deg);
    }

.psu-jobs .pd-file-name {
    font-weight: 600;
}

.psu-jobs .pd-latest {
    font-size: 12px;
    font-weight: 700;
    color: #0B5F57;
    background: #CDF1EC;
    padding: 1px 8px;
    border-radius: 999px;
}

.psu-jobs .pd-file-note {
    font-size: 13px;
    color: #4A5664;
    flex: 1 1 180px;
}

.psu-jobs .pd-file-view {
    background: #3A3F45;
    padding: 8px;
}

/* ไม่พบไฟล์: empty ธรรมดา พื้นขาว */
.psu-jobs .pd-file-empty {
    background: #FFFFFF;
    border-top: 1px solid #EEF3F2;
    padding: 24px 16px;
}

.psu-jobs .pd-pdf {
    display: block;
    width: 100%;
    height: 550px; /* เท่าความสูงเดิม */
    background: #FFFFFF;
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
    .psu-jobs .pd-steps {
        max-width: none;
    }

    /* แท็บเล็ต: 2 แถว — [สถานะ | จำนวนที่รับ] และ [วันที่เปิดรับ | ประกาศล่าสุด] */
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* มือถือ: กล่องใหญ่เต็มแถว กล่องเล็ก 2 กล่องอยู่คู่กันในแถวเดียว */
@media (max-width: 760px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense; /* ให้กล่องเล็กมาเติมช่องว่างให้อยู่คู่กัน */
    }

        .psu-jobs .pd-tiles .pd-tile.is-wide {
            grid-column: 1 / -1;
        }
}

@media (max-width: 760px) {
    .psu-jobs .pd {
        padding: 8px 4px 4px;
    }

    /* มือถือ: หัวข้ออยู่บน ข้อมูลอยู่ล่าง */
    .psu-jobs .pd-info {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

        .psu-jobs .pd-info dd {
            margin-bottom: 8px;
        }

    /* มือถือ: ใช้ stepper แนวนอนแทนแนวตั้ง */
    .psu-jobs .pd-steps {
        display: none;
    }

    .psu-jobs .pd-steps-m {
        display: flex;
    }

    .psu-jobs .pd-pdf {
        height: 420px;
    }
}

/* =========================================================
   ปรับเพิ่ม: รายละเอียดเพิ่มเติมในกรอบส่วนงาน / step ตรงแนว / ลูกศร collapse ชิดซ้าย
   ========================================================= */

/* รายละเอียดเพิ่มเติม (Note) ในกรอบ pd-info: คงการขึ้นบรรทัดใหม่ตามข้อมูล */
.psu-jobs .pd-info .pd-more-text {
    white-space: pre-line;
    line-height: 1.7;
}

/* stepper แนวตั้ง: ทุกขั้นชิดซ้าย วงกลมอยู่แนวเดียวกัน */
.psu-jobs .pd-step {
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}

.psu-jobs .pd-step-rail {
    flex: 0 0 28px; /* กว้างเท่าวงกลม ทุกขั้นจึงตรงกัน */
    width: 28px;
}

.psu-jobs .pd-step-text {
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.psu-jobs .pd-step:focus-visible,
.psu-jobs .pd-file-head:focus-visible {
    outline: 3px solid rgba(92,214,196,.45);
    outline-offset: 2px;
}

/* หัว collapse ของไฟล์: ลูกศร + ชื่อ Version ชิดซ้าย */
.psu-jobs .pd-file-head {
    box-sizing: border-box;
    justify-content: flex-start;
    text-align: left;
}

/* =========================================================
   Scrollbar กระจก "เทาใส" — รายการตำแหน่งด้านซ้าย
   แท่งเลื่อนเกือบใส มีไฮไลต์ขาว + เงาด้านใน ลอยอยู่ในรางจาง ๆ
   สีหลักเทาอมฟ้า rgb(100,116,130) — อยากเปลี่ยนสี แก้ค่า 100,116,130 ทุกจุดในบล็อกนี้
   ========================================================= */

/* สำคัญ: Chrome/Edge 121+ จะ "ไม่ใช้" ::-webkit-scrollbar ถ้า element มี scrollbar-color หรือ scrollbar-width
   (ค่านี้สืบทอดมาจาก html/body ได้ เช่น ถ้าธีมหรือ CSS อื่นตั้งไว้) จึงรีเซ็ตเป็น auto ก่อน
   Firefox ยังได้สีจากบล็อก @supports ด้านล่าง */
@supports selector(::-webkit-scrollbar) {
    .psu-jobs .ui-list-scroll {
        scrollbar-color: auto !important;
        scrollbar-width: auto !important;
    }
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar-track {
    background: rgba(100,116,130,.05);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(100,116,130,.08);
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar-thumb {
    /* ไล่จากขาว (แสงสะท้อน) ไปเทาจาง ๆ */
    background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(100,116,130,.22) 45%, rgba(100,116,130,.32) 100%);
    background-clip: padding-box; /* ขอบใส 3px ทำให้แท่งดูลอยในราง */
    border: 3px solid transparent;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), /* ไฮไลต์ขอบบน */
    inset 0 0 0 1px rgba(100,116,130,.40), /* เส้นขอบแก้ว */
    inset 0 -2px 3px rgba(100,116,130,.25); /* เงาด้านล่าง */
}

    .psu-jobs .ui-list-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(100,116,130,.18);
    }

/* Firefox (ไม่รองรับ ::-webkit-scrollbar): ใช้สีเทาโปร่งแทน */
@supports not selector(::-webkit-scrollbar) {
    .psu-jobs .ui-list-scroll {
        scrollbar-width: auto;
        scrollbar-color: rgba(100,116,130,.45) transparent;
    }
}

/* =========================================================
   หมายเหตุ / ประกาศแจ้ง : ข้อความ — อยู่บรรทัดเดียวกัน
   ========================================================= */
.psu-jobs .pd-remark-body {
    flex: 1;
    min-width: 0;
    line-height: 1.75;
}

    .psu-jobs .pd-remark-body .pd-remark-title {
        display: inline;
        margin-right: 6px;
        white-space: nowrap; /* หัวข้อไม่ถูกตัดกลางคำ */
    }

    .psu-jobs .pd-remark-body .pd-remark-text {
        display: inline;
    }

/* =========================================================
   รายละเอียดเพิ่มเติม (Note) — ยุบ/ขยาย แบบ "ดูเพิ่มเติม"
   ========================================================= */

/* ยุบไว้ 3 บรรทัด ตัดท้ายด้วย … */
.psu-jobs .pd-info .pd-more-text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ปุ่ม ดูเพิ่มเติม / ย่อ — หน้าตาเป็นลิงก์ตัวหนาแบบ Facebook */
.psu-jobs .pd-more-toggle {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #1F66B8;
    cursor: pointer;
    user-select: none;
}

    .psu-jobs .pd-more-toggle:hover {
        text-decoration: underline;
    }

    .psu-jobs .pd-more-toggle:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* =========================================================
   Responsive ตามความกว้าง "กรอบรายละเอียด" (container query)
   เดิมกล่องสรุปใช้ auto-fit จึงขึ้นแถวใหม่เองเมื่อกรอบแคบ
   พอเปลี่ยนเป็น 4 คอลัมน์ตายตัว (ใหญ่/เล็ก) จอกลาง ๆ (เช่น 1100–1400px) กรอบขวาแคบแต่ยังได้ 4 คอลัมน์ → เบียด/ล้น
   จึงให้สลับรูปแบบตามความกว้างของ .pd เอง แทนความกว้างหน้าจอ
   หมายเหตุ: ตั้ง container ที่ .pd (ไม่ใช่ .ui-detail) เพราะ container-type ทำให้ position: fixed ข้างในเพี้ยน
   และ .ui-detail มีแถบปุ่มล่างจอ (.ui-mbar) ที่เป็น fixed อยู่
   ========================================================= */
.psu-jobs .pd {
    container-type: inline-size;
    container-name: pd;
}

/* กรอบแคบกว่า 820px: 2 แถว [สถานะ | จำนวนที่รับ] [วันที่เปิดรับ | ประกาศล่าสุด] */
@container pd (max-width: 820px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* กรอบแคบกว่า 520px: กล่องใหญ่เต็มแถว กล่องเล็ก 2 กล่องคู่กัน */
@container pd (max-width: 520px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense;
    }

        .psu-jobs .pd-tiles .pd-tile.is-wide {
            grid-column: 1 / -1;
        }
    /* ส่วนงาน/ติดต่อ/รายละเอียดเพิ่มเติม: หัวข้ออยู่บน ข้อมูลอยู่ล่าง */
    .psu-jobs .pd-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

        .psu-jobs .pd-info dd {
            margin-bottom: 8px;
        }
}

/* ข้อความยาวที่ไม่มีช่องว่าง (เช่น อีเมล/ลิงก์) ไม่ดันกรอบให้ล้น */
.psu-jobs .pd-tile-value,
.psu-jobs .pd-info dd {
    overflow-wrap: anywhere;
}

/* =========================================================
   ขั้นตอนบนมือถือ (แบบ F2): แต่ละขั้นพับ/กางได้ เรียงขั้นล่าสุดไว้บนสุด
   (markup อยู่ใน PositionDetailComponent.razor ส่วน isNarrow)
   ========================================================= */
.psu-jobs .pd-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.psu-jobs .pd-acc-item {
    border: 1px solid #E1E9E8;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

    .psu-jobs .pd-acc-item.is-open {
        border-color: #9ED9CF;
    }

/* หัวขั้น: วงกลม | ชื่อขั้น | จำนวนไฟล์ | ลูกศร */
.psu-jobs .pd-acc-head {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    min-height: 48px; /* แตะง่ายบนมือถือ */
    text-align: left;
    cursor: pointer;
    background: #FFFFFF;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-head {
    background: #e8ffff;
}

.psu-jobs .pd-acc-head:focus-visible {
    outline: 3px solid rgba(92,214,196,.45);
    outline-offset: -3px;
}

.psu-jobs .pd-acc-head .pd-dot {
    width: 26px;
    height: 26px;
}

.psu-jobs .pd-acc-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #2B3440;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-title {
    color: #0B5F57;
    font-weight: 700;
}

/* ป้าย "ล่าสุด" ต่อท้ายชื่อขั้นปัจจุบัน */
.psu-jobs .pd-acc-new {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #0B5F57;
    background: #CDF1EC;
    padding: 0 7px;
    border-radius: 999px;
    vertical-align: 1px;
}

.psu-jobs .pd-acc-count {
    flex: none;
    font-size: 12px;
    color: #5B6779;
}

.psu-jobs .pd-acc-head .pd-acc-chev {
    flex: none;
    color: #5B6779;
    transition: transform .15s ease;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-chev {
    transform: rotate(180deg);
}

/* ไฟล์ของขั้นที่กาง */
.psu-jobs .pd-acc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 12px;
    border-top: 1px solid #D7ECE8;
}

/* =========================================================
   หมายเหตุของแต่ละฉบับ — อยู่เหนือตัวดู PDF (แทนที่จะอยู่ในหัวฉบับ)
   ========================================================= */
.psu-jobs .pd-file > .pd-file-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: none;
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #3A2600;
    background: #FFF7EA;
    border-top: 1px solid #F5D9AE;
    white-space: pre-line;
}

    .psu-jobs .pd-file > .pd-file-note b {
        color: #5C3300;
    }

    .psu-jobs .pd-file > .pd-file-note .pd-file-note-icon {
        flex: none;
        color: #B26A00;
        margin-top: 2px;
    }

/* =========================================================
   วงกลมขั้นตอน (ใช้ทั้งจอใหญ่และมือถือ)
   เลขขั้นแสดงเสมอ • ผ่านแล้ว = พื้นขาว + ติ้กถูกเล็กมุมบนขวา
   ขั้นล่าสุด = ขอบหนา • ขั้นที่กำลังเลือก = พื้นเขียวทึบ ตัวเลขขาว
   ========================================================= */
.psu-jobs .pd-dot {
    position: relative;
    width: 26px;
    height: 26px;
    background: #FFFFFF;
    border: 2px solid #9ED9CF;
    color: #0B5F57;
    box-shadow: none;
}

    .psu-jobs .pd-dot.is-done {
        background: #FFFFFF;
        border-color: #9ED9CF;
        color: #0B5F57;
    }

    .psu-jobs .pd-dot.is-now {
        border: 3px solid #78bbbd;
    }

    .psu-jobs .pd-dot.is-picked {
        background: #23829c;
        border-color: #2086bb;
        color: #FFFFFF;
        box-shadow: 0 0 0 4px #D5F3EE;
    }

.psu-jobs .pd-dot-tick {
    position: absolute;
    top: -6px;
    right: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #18804F;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    display: grid;
    place-items: center;
}

/* =========================================================
   รางขั้นตอนบนจอใหญ่ — หุบ/กางได้
   ปกติหุบ (52px) → ชี้เมาส์/Tab = กางลอยทับ PDF • .is-pinned (กด ☰) = กางค้างและดัน PDF
   ========================================================= */
.psu-jobs .pd-rounds-body {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
}

.psu-jobs .pd-rail-wrap {
    position: relative;
    flex: 0 0 52px; /* จองพื้นที่แค่ราง ให้ PDF กว้างสุด */
    align-self: stretch;
    transition: flex-basis .18s ease;
}

    .psu-jobs .pd-rail-wrap.is-pinned {
        flex-basis: 300px;
    }

.psu-jobs .pd-rail {
    position: absolute; /* ลอยทับ PDF ตอนชี้เมาส์ */
    top: 0;
    left: 0;
    z-index: 5;
    width: 52px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E1E9E8;
    border-radius: 14px;
    padding: 6px 0;
    transition: width .18s ease, box-shadow .18s ease;
}

    .psu-jobs .pd-rail:hover,
    .psu-jobs .pd-rail:focus-within {
        width: 300px;
        box-shadow: 0 8px 24px rgba(15,95,87,.16);
    }

/* กางค้าง: รางอยู่ในพื้นที่ของตัวเอง ไม่ลอยทับ */
.psu-jobs .pd-rail-wrap.is-pinned .pd-rail {
    position: relative;
    width: 100%;
    box-shadow: none;
}

/* ข้อความในราง: ซ่อนตอนหุบ แสดงตอนกาง */
.psu-jobs .pd-rail .pd-rail-text {
    opacity: 0;
    transition: opacity .12s;
}

.psu-jobs .pd-rail:hover .pd-rail-text,
.psu-jobs .pd-rail:focus-within .pd-rail-text,
.psu-jobs .pd-rail-wrap.is-pinned .pd-rail-text {
    opacity: 1;
}

/* ปุ่ม ☰ */
.psu-jobs .pd-rail-pin {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 34px;
    padding: 0 13px;
    margin-bottom: 4px;
    border-bottom: 1px solid #EEF3F2;
    color: #5B6779;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pd-rail-pin .pd-rail-pin-icon {
        flex: none;
        width: 24px;
    }

    .psu-jobs .pd-rail-pin[aria-pressed="true"] {
        color: #0B5F57;
        font-weight: 700;
    }

.psu-jobs .pd-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* แต่ละขั้น: [วงกลม+เส้น] [ชื่อ+จำนวนไฟล์] */
.psu-jobs .pd-rail-step {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 6px 12px 0;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pd-rail-pin:focus-visible,
    .psu-jobs .pd-rail-step:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: -3px;
        border-radius: 8px;
    }

.psu-jobs .pd-rail-col {
    flex: 0 0 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.psu-jobs .pd-rail-line {
    flex: 1;
    width: 2px;
    min-height: 16px;
    margin-top: 4px;
    background: #47abcd;
}

.psu-jobs .pd-rail-step .pd-rail-text {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
    line-height: 1.35;
}

.psu-jobs .pd-rail-label {
    font-size: 14px;
    color: #2B3440;
}

.psu-jobs .pd-rail-step.is-picked .pd-rail-label {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .pd-rail-count {
    font-size: 12px;
    color: #5B6779;
}

/* วันที่แนบไฟล์ ต่อท้าย "ฉบับที่ x [ล่าสุด]" */
.psu-jobs .pd-file-date {
    font-size: 13px;
    font-weight: 400;
    color: #5B6779;
}

    .psu-jobs .pd-file-date::before {
        content: "·";
        margin-right: 8px;
        color: #9AA5B1;
    }

/* =========================================================
   แก้รางขั้นตอน: (1) รางสูงไม่พอ/ถูกตัดเมื่อไม่มีไฟล์ (2) ชื่อขั้นยาวถูกตัด
   - รางไม่ใช้ position:absolute แล้ว → ความสูงของรางนับรวมในกรอบ ไม่ถูกตัดอีก
     ตอนชี้เมาส์ รางกว้างขึ้นและล้นออกไปทับ PDF ทางขวาแทน (กรอบ 52px เท่าเดิม PDF ไม่ขยับ)
   - ข้อความในรางกว้างคงที่ 230px และตัดบรรทัดได้ → ความสูงรางเท่ากันทั้งตอนหุบ/กาง
   ========================================================= */
.psu-jobs .pd-rail {
    position: relative;
}

    .psu-jobs .pd-rail:hover,
    .psu-jobs .pd-rail:focus-within {
        width: 300px; /* ล้นออกจากกรอบ 52px ไปทับ PDF */
    }

.psu-jobs .pd-rail-wrap.is-pinned .pd-rail {
    width: 100%;
}

.psu-jobs .pd-rail-step {
    white-space: normal;
}

    .psu-jobs .pd-rail-step .pd-rail-text {
        flex: 0 0 230px; /* กว้างคงที่ ไม่ถูกบีบตอนหุบ */
        width: 230px;
        overflow-wrap: anywhere;
    }

.psu-jobs .pd-rail-pin .pd-rail-text {
    white-space: nowrap;
}

/* =========================================================
   สลับมุมมอง การ์ด / ตาราง
   ========================================================= */
.psu-jobs .ui-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.psu-jobs .ui-view-seg {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid #CFE3E0;
    border-radius: 999px;
    padding: 3px;
}

    .psu-jobs .ui-view-seg button {
        font: inherit;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #4A5664;
        cursor: pointer;
    }

        .psu-jobs .ui-view-seg button.is-on {
            background: #dafbfb;
            color: #0B5F57;
            font-weight: 700;
            box-shadow: inset 0 0 0 1px #b9e7ed;
        }

/* โหมดตาราง: ซ่อนรายการแบบการ์ด รายละเอียดกลายเป็นแผงเลื่อนจากขวา */
.psu-jobs.is-table .ui-list {
    display: none;
}

.psu-jobs.is-table .ui-detail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 950; /* ต่ำกว่า ant-modal (1000) และ MudDialog (1400) */
    width: min(960px, 94vw);
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.14);
}

/* ปิดแผง: ซ่อนไปเลย (เดิมใช้เลื่อนออกนอกจอ ทำให้ตอนกดสลับเป็นตารางเห็นแผงวิ่งผ่านแว้บหนึ่ง) */
.psu-jobs.is-table:not(.is-detail) .ui-detail {
    display: none;
}

/* เปิดแผง: เลื่อนเข้าจากขวาด้วย animation (ไม่มี transform ค้าง → แถบปุ่มมือถือ fixed ยังติดล่างจอ) */
.psu-jobs.is-table.is-detail .ui-detail {
    display: block;
    animation: psuSlideIn .22s ease;
}

@keyframes psuSlideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: none;
    }
}

.psu-jobs.is-table .ui-back {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
}

.psu-jobs .ui-scrim {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(20,40,40,.35);
}

/* โหมดตาราง ≤1040px: ไม่ใช้กฎ 2 หน้าของโหมดการ์ด (หัวเรื่อง/ตัวกรองไม่ต้องหาย) */
@media (max-width: 1040px) {
    .psu-jobs.is-table.is-detail .ui-titlebar,
    .psu-jobs.is-table.is-detail .ui-stages {
        display: flex;
    }

    .psu-jobs.is-table.is-detail .ui-filter {
        display: grid;
    }

    .psu-jobs.is-table.is-detail .ui-chips {
        display: flex;
    }

    .psu-jobs.is-table .ui-detail {
        width: 100vw;
    }
}

/* =========================================================
   ตาราง (PositionTableComponent)
   ========================================================= */
.psu-jobs .pt {
    background: #FFFFFF;
    border: 1px solid #B9DED8;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15,95,87,.08);
    overflow: hidden;
}

.psu-jobs .pt-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid #D7ECE8;
}

.psu-jobs .pt-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1F4E79;
}

.psu-jobs .pt-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #5B6779;
}

.psu-jobs .pt-sbtn {
    font: inherit;
    font-size: 13px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #CFE3E0;
    background: #FFFFFF;
    color: #4A5664;
    cursor: pointer;
}

    .psu-jobs .pt-sbtn:hover {
        background: #F0FAF8;
    }

    .psu-jobs .pt-sbtn.is-on {
        background: #dafbfb;
        border-color: #b9e7ed;
        color: #0B5F57;
        font-weight: 700;
    }

.psu-jobs .pt-scroll {
    overflow-x: auto;
}

.psu-jobs .pt-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-size: 14px;
}

    .psu-jobs .pt-table th {
        background: #ceedf1;
        color: #1F4E79;
        font-weight: 700;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 2px solid #A9D7D0;
        white-space: nowrap;
    }
        /* เส้นแถว = เส้นคอลัมน์ สีเดียวกัน */
        .psu-jobs .pt-table th + th,
        .psu-jobs .pt-table td + td {
            border-left: 1px solid #C3D9D5;
        }

    .psu-jobs .pt-table td {
        padding: 8px 12px;
        border-bottom: 1px solid #C3D9D5;
        vertical-align: middle;
    }

    .psu-jobs .pt-table tbody tr:hover {
        background: #F6FCFB;
    }

    .psu-jobs .pt-table tbody tr.is-selected {
        background: #e8ffff;
    }

.psu-jobs .pt-no {
    width: 44px;
    text-align: right !important;
    color: #5B6779;
}

.psu-jobs .pt-round {
    width: 200px;
    text-align: center !important;
}

.psu-jobs .pt-fee {
    width: 124px;
    text-align: center !important;
}

.psu-jobs .pt-act {
    width: 140px;
    text-align: center !important;
}

.psu-jobs .pt-empty {
    padding: 24px !important;
}

/* ช่องประกาศ */
.psu-jobs .pt-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .psu-jobs .pt-line + .pt-line {
        margin-top: 3px;
    }

.psu-jobs .pt-title {
    font-size: 15px;
    font-weight: 700;
    color: #0B5F57;
}

.psu-jobs .pt-posno {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: #1F66B8;
    border: 1px solid #A9C7EA;
    padding: 0 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.psu-jobs .pt-rate {
    flex: none;
    margin-left: auto; /* จำนวนอัตราชิดขวา */
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background: #2F6FB8;
    padding: 1px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.psu-jobs .pt-meta {
    font-size: 13px;
    color: #4A5664;
}

    .psu-jobs .pt-meta b {
        color: #1F66B8;
        font-weight: 600;
    }

    .psu-jobs .pt-meta .pt-cal {
        font-size: 16px;
        color: #5B6779;
    }

.psu-jobs .pt-status {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    line-height: 20px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

    .psu-jobs .pt-status.is-open {
        color: #135E3A;
        background: #E8F7EE;
        border-color: #7FD3A3;
    }

    .psu-jobs .pt-status.is-soon {
        color: #B42318;
        background: #FEF1F0;
        border-color: #F3B4AE;
    }

    .psu-jobs .pt-status.is-closed {
        color: #4A5664;
        background: #EEF1F3;
        border-color: #E1E6EA;
    }

.psu-jobs .pt-sep {
    color: #B7C2C1;
}

.psu-jobs .pt-unit {
    color: #1F66B8;
}

.psu-jobs .pt-camp {
    color: #18804F;
}

.psu-jobs .pt-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #7A4100;
    background: #FFF3DC;
    border: 1px solid #F0C98A;
    padding: 0 8px;
    border-radius: 999px;
}

/* รอบการสอบ: ไอคอน + คำอธิบาย (ไม่มีรอบนั้น/ไม่มีข้อมูล = เทา) */
.psu-jobs .pt-exams {
    display: inline-flex;
    gap: 12px;
}

.psu-jobs .pt-exam {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #C9D1D3;
}

    .psu-jobs .pt-exam small {
        font-size: 11px;
        color: #B7C2C1;
    }

    .psu-jobs .pt-exam.is-written {
        color: #12A37A;
    }

    .psu-jobs .pt-exam.is-practical {
        color: #5B4FD6;
    }

    .psu-jobs .pt-exam.is-interview {
        color: #1F7AE0;
    }

        .psu-jobs .pt-exam.is-written small,
        .psu-jobs .pt-exam.is-practical small,
        .psu-jobs .pt-exam.is-interview small {
            color: #4A5664;
        }

/* ค่าสมัคร: ฿ ส้ม = มี, ฿ เทา = ไม่มี, — = ไม่มีข้อมูล */
.psu-jobs .pt-feebox {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    white-space: nowrap;
    color: #4A5664;
}

    .psu-jobs .pt-feebox i {
        font-style: normal;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 12px;
        color: #FFFFFF;
        background: #E0A022;
    }

    .psu-jobs .pt-feebox.is-no {
        color: #9AA5B1;
    }

        .psu-jobs .pt-feebox.is-no i {
            background: #D3DADC;
        }

    .psu-jobs .pt-feebox.is-unknown {
        color: #B7C2C1;
        font-size: 14px;
    }

/* ปุ่มดูรายละเอียด: ไม่มีสีพื้น */
.psu-jobs .pt-view {
    font: inherit;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 8px 0 12px;
    border-radius: 8px;
    border: 1px solid #9ED9CF;
    background: #FFFFFF;
    color: #0F7F74;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pt-view:hover {
        background: #F0FAF8;
        border-color: #45adb0;
    }

    .psu-jobs .pt-view:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

/* มือถือ: ตารางเรียงลงเป็นการ์ด */
@media (max-width: 760px) {
    .psu-jobs .pt-table,
    .psu-jobs .pt-table tbody,
    .psu-jobs .pt-table tr,
    .psu-jobs .pt-table td {
        display: block;
        min-width: 0;
        width: auto;
    }

        .psu-jobs .pt-table thead,
        .psu-jobs .pt-table .pt-no {
            display: none;
        }

        .psu-jobs .pt-table tr {
            padding: 10px 12px;
            border-bottom: 8px solid #F0F5F5;
        }

        .psu-jobs .pt-table td {
            border: 0 !important;
            padding: 3px 0;
            text-align: left !important;
        }
}

/* มือถือ + โหมดตาราง: เว้นที่ท้ายแผงให้แถบปุ่มสมัครล่างจอ */
@media (max-width: 760px) {
    .psu-jobs.is-table .ui-detail {
        padding-bottom: 110px;
    }
}

/* =========================================================
   รายละเอียด: รอบการสอบ + ค่าธรรมเนียม (บรรทัดเดียวกัน ในกรอบส่วนงาน)
   ========================================================= */
.psu-jobs .pd-exam-fee {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.psu-jobs .pd-exams {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.psu-jobs .pd-exam {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2B3440;
}

    .psu-jobs .pd-exam .mud-icon-root {
        font-size: 18px;
    }

    .psu-jobs .pd-exam.is-written .mud-icon-root {
        color: #12A37A;
    }

    .psu-jobs .pd-exam.is-practical .mud-icon-root {
        color: #5B4FD6;
    }

    .psu-jobs .pd-exam.is-interview .mud-icon-root {
        color: #1F7AE0;
    }

    /* ไม่มีรอบนั้น: เทาทั้งไอคอนและข้อความ (ไม่ขีดฆ่า) */
    .psu-jobs .pd-exam.is-off,
    .psu-jobs .pd-exam.is-off .mud-icon-root {
        color: #B7C2C1;
    }

/* เส้นคั่นระหว่างรอบสอบกับค่าธรรมเนียม */
.psu-jobs .pd-exam-sep {
    width: 1px;
    height: 16px;
    background: #CFDCDA;
}

.psu-jobs .pd-fee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2B3440;
}

    .psu-jobs .pd-fee i {
        font-style: normal;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 800;
        color: #FFFFFF;
        background: #E0A022;
    }

    .psu-jobs .pd-fee.is-no {
        color: #9AA5B1;
    }

        .psu-jobs .pd-fee.is-no i {
            background: #D3DADC;
        }

    .psu-jobs .pd-fee.is-unknown {
        color: #9AA5B1;
    }
/* ============================================================
   วางต่อท้าย wwwroot/css/app.css — มี 2 ส่วน

   ส่วนที่ 1: .divReport
   กล่อง "รายงานตัว" เดิมเขียนเป็น inline style ใน UserIndex.razor
   ย้ายมาเป็นคลาสกลุ่มเดียวกับ .divRegist / .divEditResume /
   .divChangePWD / .divAddResume ค่าทุกตัวยกมาจาก inline style เดิม
   (เพิ่ม :hover ตามรูปแบบเดียวกับกล่องอื่น)
   แนะนำให้วางไว้ต่อจากกฎ .divAddResume:hover
   ============================================================ */
.divReport {
    border: 1px solid #44ad4a;
    padding: 20px !important;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;
}

    .divReport:hover {
        background-color: #d8efda !important;
        box-shadow: 3px 5px #7cc481 !important;
        border: 1px solid #3a9a40;
    }

/* ============================================================
   ส่วนที่ 2: เมนูลัด (UserIndex) — การ์ดแนวนอนแบบเตี้ย [ไอคอน | ข้อความ | ลูกศร]

   สี เงา ขอบ และ hover ยังมาจากคลาสเดิม (.divRegist / .divEditResume /
   .divChangePWD / .divAddResume / .divReport) ไม่ได้แก้คลาสเดิม
   กฎในส่วนนี้ทับเฉพาะ padding กับ font-size ที่คลาสเดิมใส่ !important ไว้
   และทับเฉพาะในเมนูลัด (.shortcut-menu) หน้าอื่นที่ใช้คลาสเดิมไม่กระทบ

   การเรียงกล่องตามความกว้างจอ:
     5 กล่อง : >=1360px แถวเดียว | 960–1359px 3+2 | 600–959px 2+2+1 | <600px คอลัมน์เดียว
     4 กล่อง : >=1100px แถวเดียว | 600–1099px 2+2  | <600px คอลัมน์เดียว
   (การ์ดต้องกว้างราว 250px ขึ้นไป ข้อความจึงอยู่บรรทัดเดียว breakpoint คิดจากค่านี้)
   แถวที่ไม่เต็มจะจัดกึ่งกลางเอง (justify-content: center)
   ============================================================ */
.shortcut-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

    /* การ์ด 1 ใบ — ค่าเริ่มต้น (จอเล็ก) กว้างเต็มแถว */
    .shortcut-menu > .shortcut-card {
        flex: 0 0 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: auto 1fr auto; /* ไอคอน | ข้อความ | ลูกศร */
        align-items: center;
        column-gap: 12px;
        min-height: 72px;
        padding: 12px 16px !important; /* ทับ padding 20px !important ของคลาสเดิม */
        font-size: 18px !important; /* ทับ 20px !important ของคลาสเดิม */
        line-height: 1.3;
    }

.shortcut-card .sc-icon,
.shortcut-card .sc-arrow {
    display: flex;
}

/* ข้อความไม่ตัดบรรทัด ลูกศรจึงไม่ตกลงไปข้างล่าง */
.shortcut-card .sc-label {
    min-width: 0;
    white-space: nowrap;
}

    /* "(อาจารย์)" ขึ้นบรรทัดของตัวเอง การ์ดจะได้แคบลง */
    .shortcut-card .sc-label small {
        display: block;
        font-size: .75em;
    }

/* ขนาดไอคอน (MudIcon render เป็น svg.mud-icon-root) */
.shortcut-card .sc-icon .mud-icon-root {
    font-size: 2rem;
}

.shortcut-card .sc-arrow .mud-icon-root {
    font-size: 1.5rem;
}

/* 2 คอลัมน์ */
@media (min-width: 600px) {
    .shortcut-menu > .shortcut-card {
        flex-basis: calc((100% - 16px) / 2);
        max-width: 340px; /* จอใหญ่ การ์ดไม่ยืดยาวเกินไป */
    }
}

/* 5 กล่อง: 3 คอลัมน์ (3+2) */
@media (min-width: 960px) {
    .shortcut-menu--5 > .shortcut-card {
        flex-basis: calc((100% - 32px) / 3);
    }
}

/* 4 กล่อง: แถวเดียว */
@media (min-width: 1100px) {
    .shortcut-menu:not(.shortcut-menu--5) > .shortcut-card {
        flex: 1 1 0;
    }
}

/* 5 กล่อง: แถวเดียว */
@media (min-width: 1360px) {
    .shortcut-menu--5 > .shortcut-card {
        flex: 1 1 0;
    }
}

/* =========================================================
   โหมดตาราง: ปุ่ม "กลับไปรายการตำแหน่ง" ต้องไม่ถูกแถบเมนูด้านบนของเว็บบัง
   แผงรายละเอียดเริ่มใต้แถบเมนู — ใช้ความสูงแถบของ MudBlazor (--mud-appbar-height) ถ้าไม่มีใช้ 64px
   ถ้าแถบเมนูสูงไม่เท่านี้ ให้แก้ค่า 64px
   ========================================================= */
.psu-jobs.is-table .ui-detail {
    top: var(--mud-appbar-height, 64px);
}

/* ปุ่มกลับด้านบน: ติดขอบบนของแผงเสมอเวลาเลื่อน */
.psu-jobs.is-table .ui-back {
    border-bottom: 1px solid #D7ECE8;
}

/* ปุ่ม "กลับ" ในแถบปุ่มล่างจอ (มือถือ โหมดตาราง) — แคบกว่าปุ่มอื่น */
@media (max-width: 760px) {
    .psu-jobs .ui-mbar-buttons .ui-mbar-back {
        flex: 0 0 auto;
        padding: 0 12px;
    }
}

/* =========================================================
   แบ่งหน้า (ตาราง + การ์ด)
   ========================================================= */
.psu-jobs .ui-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid #D7ECE8;
    font-size: 13px;
    color: #4A5664;
}

    /* คอลัมน์การ์ด (แคบ): ปุ่มอยู่กลาง ไม่มีข้อความสรุป */
    .psu-jobs .ui-pager.is-compact {
        justify-content: center;
        padding: 10px 4px 2px;
    }

.psu-jobs .ui-pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.psu-jobs .ui-pg {
    font: inherit;
    font-size: 13px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid #CFE3E0;
    background: #FFFFFF;
    color: #2B3440;
    cursor: pointer;
}

    .psu-jobs .ui-pg:hover:not(:disabled) {
        background: #F0FAF8;
        border-color: #9ED9CF;
    }

    .psu-jobs .ui-pg.is-on {
        background: #3c829a;
        border-color: #2197a3;
        color: #FFFFFF;
        font-weight: 700;
    }

    .psu-jobs .ui-pg:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .psu-jobs .ui-pg:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

.psu-jobs .ui-pg-gap {
    padding: 0 2px;
    color: #9AA5B1;
}

.psu-jobs .ui-pager-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .psu-jobs .ui-pager-size select {
        font: inherit;
        height: 32px;
        padding: 0 6px;
        border-radius: 8px;
        border: 1px solid #CFE3E0;
        background: #FFFFFF;
        color: #2B3440;
    }

/* มือถือ: ข้อความสรุปอยู่บนสุด ปุ่มอยู่กลาง */
@media (max-width: 760px) {
    .psu-jobs .ui-pager {
        justify-content: center;
    }

    .psu-jobs .ui-pager-info {
        flex: 1 1 100%;
        text-align: center;
    }
}
/* ============================================================
   แท็บประวัติการสมัคร (UserIndex) — วางต่อท้าย wwwroot/css/app.css
   เพิ่มกฎใหม่เท่านั้น ไม่ได้แก้กฎเดิม
   จอเล็ก: ซ่อนคำว่า "ข้อมูลการสมัครงานที่" ในชื่อแท็บ
   เหลือ "กำลังดำเนินการ" / "เสร็จสิ้นแล้ว" ไม่ให้ชื่อแท็บตัดเป็นหลายบรรทัด
   ============================================================ */

/* ตัวเลขจำนวนรายการในชื่อแท็บ — อยู่ในบรรทัดเดียวกับชื่อ จึงไม่ถูกขอบแท็บตัด
   สีใช้ตัวแปรสีของ MudBlazor (info = ฟ้า, success = เขียว) ให้ตรงกับ badge เดิม */
.apply-tab-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}

.apply-tab-count--active {
    background-color: var(--mud-palette-info);
}

.apply-tab-count--close {
    background-color: var(--mud-palette-success);
}

@media (max-width: 600px) {
    .apply-tab-long {
        display: none;
    }
}

/* =========================================================
   หน้า "ตำแหน่งใกล้เคียง" (PositionDetailRelated)
   ใช้คลาสชุดเดียวกับหน้าแรกเกือบทั้งหมด — ด้านล่างคือส่วนที่เพิ่มเฉพาะหน้านี้
   ========================================================= */

/* จำนวนรายการต่อท้ายหัวเรื่อง */
.psu-jobs .ui-title-count {
    font-size: 14px;
    font-weight: 500;
    color: #4A5664;
}

/* ปุ่มกลับหน้าแรก — สูงเท่าปุ่มสลับมุมมอง */
.psu-jobs .ui-home-btn {
    min-height: 40px;
    border-radius: 999px;
}

/* ข้อความที่แสดงเฉพาะจอ ≤ 760px (คู่กับ .ui-hide-sm) */
.psu-jobs .ui-show-sm {
    display: none;
}

/* กล่องชื่อตำแหน่ง (สีเขียวแบบเดิม) */
.psu-jobs .ui-relpos {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F3FDF6;
    border: 1px solid #92DEB2;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #135E3A;
}

    .psu-jobs .ui-relpos > span {
        min-width: 0; /* ข้อความไทยยาวใน flex ให้ตัดบรรทัดได้ */
    }

/* จอแคบ โหมดการ์ด: เปิดรายละเอียดแล้ว ซ่อนกล่องชื่อตำแหน่ง (หัวรายละเอียดมีชื่อตำแหน่งอยู่แล้ว)
   ส่วนหัวเรื่อง (.ui-titlebar) ถูกซ่อนด้วยกฎ 2 หน้าเดิมด้านบนอยู่แล้ว */
@media (max-width: 1040px) {
    .psu-jobs.is-detail:not(.is-table) .ui-relpos {
        display: none;
    }
}

@media (max-width: 760px) {
    .psu-jobs .ui-show-sm {
        display: inline;
    }

    .psu-jobs .ui-title-count {
        flex-basis: 100%;
        font-size: 13px;
    }

    .psu-jobs .ui-title {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .psu-jobs .ui-relpos {
        font-size: 16px;
        padding: 8px 12px;
    }
}

/* =========================================================
   แถบสรุปท้ายกล่องรายการของ Select (ช่องตำแหน่งในแผงค้นหา) — "แสดง 50 จาก 1,234 รายการ"
   *** ไม่ขึ้นต้นด้วย .psu-jobs โดยตั้งใจ ***
   กล่องรายการของ AntDesign ถูกวางไว้นอกหน้า (ท้าย <body>) จึงอยู่นอก .psu-jobs
   ค่าเหมือนกับใน EducationHistoryDialog ทุกตัว — ถ้าย้ายไป app.css แล้ว ลบทั้งสองที่ให้เหลือที่เดียวได้
   ========================================================= */
.psu-dd-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 4px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b7681;
    cursor: default;
}

    .psu-dd-foot b {
        color: #2f3943;
        font-variant-numeric: tabular-nums;
    }

    .psu-dd-foot .mud-icon-root {
        flex: 0 0 auto;
        width: 15px !important;
        height: 15px !important;
        font-size: 15px !important;
        color: #9aa4af;
    }
/* =========================================================
   index.css — หน้าแรก (NewIndex) แบบ I-1 (CSS กลาง ไฟล์เดียว)
   รวม: หน้า NewIndex + การ์ดตำแหน่ง + รายละเอียดตำแหน่ง

   กันกระทบหน้าอื่น: ทุก selector ขึ้นต้นด้วย .psu-jobs
   ต้องมี <div class="psu-jobs ui-page ..."> ใน NewIndex.razor (มีในไฟล์ที่ส่งให้แล้ว)
   ถ้าไม่มีคลาสนี้ สไตล์ทั้งหมดในไฟล์นี้จะไม่ทำงาน
   ========================================================= */


.psu-jobs {
    /* ใช้ความกว้างเต็มจอ — จำกัดไว้ที่ 1920px เพื่อไม่ให้ยืดเกินไปบนจอ ultrawide */
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 12px clamp(12px, 2vw, 32px) 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #1E2A36;
}

    /* ---------- หัวเรื่อง + ปุ่มตัวกรอง ---------- */
    .psu-jobs .ui-titlebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 22px;
        font-weight: 700;
        color: #1F4E79;
    }

    /* ---------- ปุ่มเปิด/ปิดแผงค้นหา ----------
       โทนม่วงของส่วนค้นหา (ตามแบบหน้า ReportIndex) — แก้สีทั้งชุดได้ที่ตัวแปร --sf-* ใน .ui-filter ด้านล่าง */
    .psu-jobs .ui-filter-toggle {
        font: inherit;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #D6CCF8;
        background: #FFFFFF;
        color: #1E2A36;
        cursor: pointer;
    }

        .psu-jobs .ui-filter-toggle.is-on {
            background: #F3F0FF;
            border-color: #B9A8F2;
            color: #4B2FB8;
            font-weight: 600;
        }

    /* จำนวนตัวกรองที่ใช้อยู่ บนปุ่ม */
    .psu-jobs .ui-filter-count {
        min-width: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #5B3AD6;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }

    /* ---------- แผงค้นหา (โทนม่วง) ----------
       แถวบน: 3 ช่อง [ชื่อช่อง | ช่องเลือก] • แถวล่าง: ข้อความเตือน (ถ้ามี) + ปุ่มชิดขวา */
    .psu-jobs .ui-filter {
        --sf-bg: #F7F5FF; /* พื้นแผง */
        --sf-border: #D6CCF8; /* เส้นขอบแผง */
        --sf-accent: #5B3AD6; /* ปุ่มค้นหา / สีเน้น */
        --sf-accent-hover: #4B2FB8;
        --sf-label: #3F4A56; /* ชื่อช่อง */
        --sf-label-w: 118px; /* ความกว้างชื่อช่อง — เท่ากันทุกช่อง ช่องเลือกจึงตรงแนว */
        --sf-field-h: 44px; /* ความสูงช่องเลือก */
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 24px;
        align-items: center;
        background: var(--sf-bg);
        border: 1px solid var(--sf-border);
        border-radius: 8px;
        padding: 16px 20px;
    }

    .psu-jobs .ui-filter-field {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .psu-jobs .ui-filter-label {
        flex: 0 0 var(--sf-label-w);
        text-align: right;
        font-size: 14px;
        line-height: 1.3;
        color: var(--sf-label);
        overflow-wrap: anywhere; /* ชื่อช่องยาว ("ค้นหาภายในวิทยาเขต:") ตัดเป็น 2 บรรทัดได้ ไม่ดันช่องเลือก */
    }

    /* ช่องเลือกของ AntDesign: ยืดเต็มที่เหลือ สูงเท่ากันทุกช่อง พื้นขาว */
    .psu-jobs .ui-filter-field > .ant-select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    .psu-jobs .ui-filter .ant-select-selector {
        min-height: var(--sf-field-h) !important;
        height: var(--sf-field-h) !important;
        border-radius: 6px !important;
        background: #FFFFFF !important;
        display: flex;
        align-items: center;
    }

    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-item,
    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
    .psu-jobs .ui-filter .ant-select-single .ant-select-selector .ant-select-selection-search-input {
        line-height: calc(var(--sf-field-h) - 2px) !important;
        height: calc(var(--sf-field-h) - 2px) !important;
    }

    /* เลือกเงื่อนไขใหม่แต่ยังไม่กดค้นหา */
    .psu-jobs .ui-filter-pending {
        grid-column: 1 / 3;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid #FFD99A;
        border-radius: 6px;
        background: #FFF6E5;
        color: #A15C00;
        font-size: 13px;
    }

    /* ปุ่ม ล้างตัวกรอง + ค้นหา — อยู่คอลัมน์ขวาสุดของแถวล่าง */
    .psu-jobs .ui-filter-actions {
        grid-column: 3;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .psu-jobs .ui-filter-btn {
        min-height: 44px;
        border-radius: 8px;
    }

    .psu-jobs .ui-filter-btn--primary {
        min-width: 140px;
        background: var(--sf-accent);
        border: 1px solid var(--sf-accent);
        color: #FFFFFF;
        font-weight: 700;
        box-shadow: 0 2px 6px rgba(91, 58, 214, .25);
    }

        .psu-jobs .ui-filter-btn--primary:hover {
            background: var(--sf-accent-hover);
        }

    .psu-jobs .ui-filter-btn--outline {
        background: #FFFFFF;
        border: 1px solid #C3B3F3;
        color: var(--sf-accent);
    }

        .psu-jobs .ui-filter-btn--outline:hover:not(:disabled) {
            background: #F1EEFF;
        }

    .psu-jobs .ui-filter-actions .ui-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    /* ---------- แท็ก "กรองโดย" (ตัวกรองที่ใช้อยู่) ---------- */
    .psu-jobs .ui-chips {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        padding: 8px 12px;
        border: 1px dashed #D6CCF8;
        border-radius: 8px;
        background: #FBFAFF;
    }

    .psu-jobs .ui-chips-label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: #6B6F85;
        white-space: nowrap;
    }

    .psu-jobs .ui-chip {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        max-width: 100%;
        padding: 1px 4px 1px 10px;
        border: 1px solid #C3B3F3;
        border-radius: 999px;
        background: #F1EEFF;
        color: #4B2FB8;
        font-size: 13px;
        line-height: 24px;
    }

    /* ชื่อยาว (ส่วนงาน/ตำแหน่ง) ตัดด้วย … ไม่ดันแถวล้น */
    .psu-jobs .ui-chip-text {
        min-width: 0;
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .psu-jobs .ui-chip-text b {
            font-weight: 600;
        }

    .psu-jobs .ui-chip-x {
        flex: none;
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

        .psu-jobs .ui-chip-x:hover:not(:disabled) {
            background: #DDD3FF;
        }

        .psu-jobs .ui-chip-x .mud-icon-root {
            font-size: 16px;
        }

    .psu-jobs .ui-chips-clear {
        margin-left: 4px;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 13px;
        color: #5B3AD6;
        text-decoration: underline;
        cursor: pointer;
    }

        .psu-jobs .ui-chip-x:disabled,
        .psu-jobs .ui-chips-clear:disabled {
            opacity: .5;
            cursor: default;
        }

    /* ---------- ปุ่มสถานะ (pill) ---------- */
    .psu-jobs .ui-stages {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #FFFFFF;
        border: 1px solid #CDEFEA;
        border-radius: 999px;
        padding: 4px;
    }

    .psu-jobs .ui-arrow {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0;
        background: #F0FAF8;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4A5664;
    }

    .psu-jobs .ui-stage-strip {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

        .psu-jobs .ui-stage-strip::-webkit-scrollbar {
            display: none;
        }

    .psu-jobs .ui-stage-row {
        display: flex;
        gap: 4px;
        width: max-content;
        margin: 0 auto;
    }

    .psu-jobs .ui-stage {
        font: inherit;
        font-size: 14px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 2px solid transparent;
        background: transparent;
        color: #2B3440;
        cursor: pointer;
    }

        .psu-jobs .ui-stage:hover {
            background: #F0FAF8;
        }

        .psu-jobs .ui-stage.is-on {
            background: #dafbfb;
            border-color: #b9e7ed;
            color: #0B5F57;
            font-weight: 700;
        }

    .psu-jobs .ui-stage-count {
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        min-width: 20px;
        text-align: center;
        padding: 0 6px;
        border-radius: 999px;
        background: #E3EAF4;
        color: #2A4A73;
    }

    .psu-jobs .ui-stage.is-on .ui-stage-count {
        background: #2291b0;
        color: #ffffff;
    }

    /* ---------- Layout ซ้าย/ขวา ---------- */
    .psu-jobs .ui-layout {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .psu-jobs .ui-list {
        /* คอลัมน์รายการ: ประมาณ 28% ของความกว้าง (340–520px) ที่เหลือให้รายละเอียด */
        flex: 0 1 28%;
        min-width: 340px;
        max-width: 520px;
        background: #FFFFFF;
        border: 1px solid #B9DED8;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15,95,87,.08);
        padding: 14px 8px 8px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .psu-jobs .ui-list-head {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: #1F4E79;
        padding-right: 6px;
    }

    .psu-jobs .ui-list-scroll {
        position: relative;
        height: 600px; /* เท่าความสูงเดิม */
        overflow: auto;
        padding: 4px 6px 24px 0;
    }

    .psu-jobs .ui-list-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .psu-jobs .ui-detail {
        flex: 999 1 560px;
        min-width: 0;
        background: #FFFFFF;
        border: 1px solid #B9DED8;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(15,95,87,.08);
        overflow: hidden;
    }

    /* ---------- หัวรายละเอียด ---------- */
    .psu-jobs .ui-back {
        display: none; /* แสดงเฉพาะมือถือ */
        padding: 4px 8px;
        border-bottom: 1px solid #EEF3F2;
    }

    .psu-jobs .ui-back-btn {
        font: inherit;
        min-height: 44px;
        padding: 0 10px;
        border: 0;
        background: transparent;
        color: #1F4E79;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }

    .psu-jobs .ui-detail-head {
        background: #cff4f4;
        border-bottom: 1px solid #BDE9E3;
        padding: 8px 24px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
    }

    .psu-jobs .ui-detail-titlewrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        flex: 1 1 360px;
    }

    /* ชื่อตำแหน่ง + ต.เลขที่ (ต่อท้ายในแถวเดียวกัน ถ้าไม่พอจะขึ้นบรรทัดใหม่) */
    .psu-jobs .ui-detail-titlerow {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-detail-title {
        margin: 0;
        font-size: 22px;
        line-height: 1.4;
        color: #0B5F57;
        outline: none;
    }

    .psu-jobs .ui-posno {
        font-size: 13px;
        font-weight: 600;
        color: #1F66B8;
        border: 1px solid #A9C7EA;
        background: #FFFFFF;
        padding: 1px 10px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .psu-jobs .ui-detail-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
    }

    .psu-jobs .ui-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 999px;
        background: #FFFFFF;
    }

        .psu-jobs .ui-status.is-open {
            color: #135E3A;
            border: 1px solid #7FD3A3;
        }

        .psu-jobs .ui-status.is-closed {
            color: #B42318;
            border: 1px solid #F3B4AE;
        }

    .psu-jobs .ui-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .psu-jobs .ui-countdown {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 700;
        padding: 2px 12px;
        border-radius: 999px;
        background: #EFEAFB;
        color: #4C2F91;
        border: 1px solid #C9B8F0;
    }

    .psu-jobs .ui-stage-note {
        font-size: 12px;
        color: #4A5664;
    }

    .psu-jobs .ui-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .psu-jobs .ui-detail-empty {
        padding: 16px 24px 0;
    }

    .psu-jobs .ui-detail-body {
        padding: 8px 12px 16px;
    }

    /* ---------- ปุ่ม ---------- */
    .psu-jobs .ui-btn {
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        white-space: nowrap;
    }

    .psu-jobs .ui-btn--primary {
        background: #3c829a;
        color: #FFFFFF;
        border: 1px solid #2197a3;
        font-weight: 700;
    }

        .psu-jobs .ui-btn--primary:hover {
            background: #0B5F57;
        }

    .psu-jobs .ui-btn--outline {
        background: #FFFFFF;
        color: #0F7F74;
        border: 1px solid #9ED9CF;
    }

    .psu-jobs .ui-btn--disabled {
        background: #E4E8EB;
        color: #5B6779;
        border: 1px solid #E4E8EB;
        cursor: not-allowed;
    }

    /* แถบปุ่มล่างจอ (มือถือ) */
    .psu-jobs .ui-mbar {
        display: none;
    }


/* =========================================================
   Responsive (รวมทุกส่วน)
   ========================================================= */

/* จอกลาง: ชื่อช่องในแผงค้นหาแคบลง ให้ช่องเลือกได้ที่มากขึ้น */
@media (max-width: 1400px) {
    .psu-jobs .ui-filter {
        --sf-label-w: 96px;
        gap: 14px 16px;
    }
}

/* แท็บเล็ต + มือถือ (≤1040px): รายการกับรายละเอียดวางซ้อนกันไม่ได้แล้ว
   จึงใช้แบบ 2 หน้า — หน้ารายการ → กดตำแหน่ง → หน้ารายละเอียด (มีปุ่ม "กลับ") */
@media (max-width: 1040px) {
    .psu-jobs .ui-list {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .psu-jobs .ui-detail {
        flex: 1 1 100%;
    }

    /* รายการไม่ต้องสกอร์ลซ้อน ให้เลื่อนไปกับหน้า */
    .psu-jobs .ui-list-scroll {
        height: auto;
        overflow: visible;
    }

    /* หน้ารายการ: ซ่อนรายละเอียด (ยัง render อยู่ เพื่อให้ @ref ใช้งานได้) */
    .psu-jobs:not(.is-detail) .ui-detail {
        display: none;
    }

    /* หน้ารายละเอียด: ซ่อนหัวเรื่อง ตัวกรอง สถานะ และรายการ */
    .psu-jobs.is-detail .ui-titlebar,
    .psu-jobs.is-detail .ui-filter,
    .psu-jobs.is-detail .ui-chips,
    .psu-jobs.is-detail .ui-stages,
    .psu-jobs.is-detail .ui-list {
        display: none;
    }

    /* ปุ่ม "กลับไปรายการ" */
    .psu-jobs .ui-back {
        display: flex;
    }

    /* แผงค้นหา: 2 คอลัมน์ ชื่อช่องขึ้นไปอยู่บนช่องเลือก ปุ่มลงบรรทัดของตัวเองชิดขวา */
    .psu-jobs .ui-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    .psu-jobs .ui-filter-field {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .psu-jobs .ui-filter-label {
        flex: 0 0 auto;
        text-align: left;
        font-size: 13px;
    }

    .psu-jobs .ui-filter-field > .ant-select {
        width: 100% !important;
    }

    .psu-jobs .ui-filter-pending,
    .psu-jobs .ui-filter-actions {
        grid-column: 1 / -1;
    }
}

/* มือถือ: 2 หน้า (รายการ → รายละเอียด) */
@media (max-width: 760px) {
    .psu-jobs {
        padding: 10px 12px 24px;
    }

        .psu-jobs .ui-title {
            font-size: 19px;
        }

        .psu-jobs .ui-filter {
            grid-template-columns: 1fr;
            padding: 12px;
        }

        .psu-jobs .ui-filter-actions .ui-btn {
            flex: 1 1 0;
            min-width: 0;
        }

        .psu-jobs .ui-chip-text {
            max-width: 220px;
        }

        .psu-jobs .ui-hide-sm {
            display: none;
        }

        .psu-jobs .ui-detail {
            margin-bottom: 110px; /* เว้นที่ให้แถบปุ่มล่างจอ */
        }

        .psu-jobs .ui-detail-head {
            padding: 14px 16px;
        }

        .psu-jobs .ui-detail-title {
            font-size: 19px;
        }

        .psu-jobs .ui-detail-body {
            padding: 8px 4px 16px;
        }

        .psu-jobs .ui-mbar {
            display: flex;
            flex-direction: column;
            gap: 6px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 900; /* ต่ำกว่า ant-modal (1000) และ MudDialog (1400) */
            background: #FFFFFF;
            border-top: 1px solid #D7ECE8;
            box-shadow: 0 -2px 8px rgba(0,0,0,.06);
            padding: 8px 16px 14px;
        }

        .psu-jobs .ui-mbar-note {
            font-size: 12px;
            text-align: center;
            color: #4C2F91;
            font-weight: 700;
        }

        .psu-jobs .ui-mbar-buttons {
            display: flex;
            gap: 8px;
        }

            .psu-jobs .ui-mbar-buttons .ui-btn {
                flex: 1 1 0;
                padding: 0 8px;
            }
}

/* =========================================================
   2) การ์ดตำแหน่ง (LeftPositionComponent)
   ========================================================= */
.psu-jobs .lp-card {
    font: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E1E9E8;
    color: #1E2A36;
}

    /* ทุกแถวในการ์ดชิดซ้าย (กันสไตล์จากธีม/app.css ที่จัดกึ่งกลาง) */
    .psu-jobs .lp-card > span {
        width: 100%;
        text-align: left !important;
    }

    .psu-jobs .lp-card .lp-unit,
    .psu-jobs .lp-card .lp-title {
        display: block;
        text-align: left !important;
    }

    .psu-jobs .lp-card .lp-chips {
        justify-content: flex-start;
    }

    .psu-jobs .lp-card:hover {
        border-color: #9ED9CF;
    }

    .psu-jobs .lp-card:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

    /* การ์ดที่เลือก: มิ้นท์ + ขอบล่างหนา */
    .psu-jobs .lp-card.is-selected {
        background: #e8ffff;
        border: 2px solid #b4cecf;
        border-bottom-width: 5px;
    }

.psu-jobs .lp-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.psu-jobs .lp-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.psu-jobs .lp-card.is-selected .lp-title {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .lp-rate {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background: #2F6FB8;
    padding: 1px 10px;
    border-radius: 999px;
    margin-top: 3px;
    white-space: nowrap;
}

.psu-jobs .lp-unit {
    font-size: 14px;
    color: #1F66B8;
}

.psu-jobs .lp-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.psu-jobs .lp-campus {
    font-size: 12px;
    color: #18804F;
    border: 1px solid #7FD3A3;
    background: #FFFFFF;
    padding: 1px 10px;
    border-radius: 999px;
}

.psu-jobs .lp-countdown {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: #FFFFFF;
}

    .psu-jobs .lp-countdown.is-open {
        color: #135E3A;
        border: 1px solid #8FD9B0;
    }

    .psu-jobs .lp-countdown.is-soon {
        color: #B42318;
        border: 1px solid #F3B4AE;
    }

    .psu-jobs .lp-countdown.is-closed {
        color: #4A5664;
        background: #EEF1F3;
        border: 1px solid #E1E6EA;
    }

    /* ยังไม่ถึงวันเปิดรับ — "เปิดรับในอีก X วัน" สีฟ้า แยกจากเขียว (เปิดอยู่) และแดง (ใกล้ปิด) */
    .psu-jobs .lp-countdown.is-upcoming {
        color: #1D4F91;
        background: #EEF5FF;
        border: 1px solid #A9C7EE;
    }

.psu-jobs .lp-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #7A4100;
    background: #FFF3DC;
    border: 1px solid #F0C98A;
    padding: 0 8px;
    border-radius: 999px;
    cursor: help;
}

.psu-jobs .lp-bottom {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #4A5664;
}

.psu-jobs .lp-dates {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.psu-jobs .lp-date {
    color: #1F66B8;
}

.psu-jobs .lp-posno {
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   3) รายละเอียดตำแหน่ง (PositionDetailComponent)
   ========================================================= */
.psu-jobs .pd {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 12px 4px;
    color: #1E2A36;
    font-size: 14px;
}

.psu-jobs .pd-h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1F4E79;
}

/* ---------- กล่องข้อมูลสรุป (aqua เรืองขอบ) ---------- */
/* ลำดับกล่อง: สถานะ (ใหญ่) | จำนวนที่รับ (เล็ก) | วันที่เปิดรับ (ใหญ่) | ประกาศล่าสุด (เล็ก)
   กล่องใหญ่กว้าง 2 ส่วน กล่องเล็กกว้าง 1 ส่วน */
.psu-jobs .pd-tiles {
    display: grid;
    /* minmax(0, …) = ยอมให้กล่องหดได้ ไม่ดันเนื้อหาจนล้นกรอบ */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 10px;
}

.psu-jobs .pd-tile {
    background: #FFFFFF;
    border: 1px solid #A9DCE8;
    box-shadow: inset 0 0 14px rgba(70,180,210,.22);
    border-radius: 12px;
    padding: 10px 14px;
}

.psu-jobs .pd-tile-label {
    font-size: 12px;
    color: #3E6470;
}

.psu-jobs .pd-tile-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- สถานะการรับสมัครในการ์ด "วันที่เปิดรับสมัคร" ----------
   เปิดรับอยู่ในขณะนี้ (เขียว) / ปิดรับสมัคร (แดง)
   จะปิดภายใน X วัน (ม่วงอ่อน, เหลือ ≤ 3 วันเป็นแดง) / เลื่อนปิดรับสมัคร (เหลืองอำพัน) */
.psu-jobs .pd-tile-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.psu-jobs .pd-open,
.psu-jobs .pd-upcoming,
.psu-jobs .pd-closed,
.psu-jobs .pd-countdown,
.psu-jobs .pd-delay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.psu-jobs .pd-open {
    color: #135E3A;
    background: #E8F7EE;
    border-color: #7FD3A3;
}

.psu-jobs .pd-closed {
    color: #B42318;
    background: #FEF1F0;
    border-color: #F3B4AE;
}

.psu-jobs .pd-countdown {
    color: #4C2F91;
    background: #EFEAFB;
    border-color: #C9B8F0;
}

    .psu-jobs .pd-countdown.is-soon {
        color: #B42318;
        background: #FEF1F0;
        border-color: #F3B4AE;
    }

/* ยังไม่ถึงวันเปิดรับ — โทนฟ้าเดียวกับป้าย is-upcoming บนการ์ดและในตาราง */
.psu-jobs .pd-upcoming {
    color: #1D4F91;
    background: #EEF5FF;
    border-color: #A9C7EE;
}

.psu-jobs .pd-countdown.is-upcoming {
    color: #1D4F91;
    background: #FFFFFF;
    border-color: #A9C7EE;
}

.psu-jobs .pd-delay {
    color: #7A4100;
    background: #FFF3DC;
    border-color: #F0C98A;
}

/* จุดวงกลมเล็กหน้าข้อความ เปิด/ปิดรับ (ใช้สีเดียวกับตัวอักษร) */
.psu-jobs .pd-dot-sm {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ไอคอน MudIcon ในป้ายให้เล็กพอดีตัวอักษร */
.psu-jobs .pd-tile-status .mud-icon-root {
    font-size: 15px;
}

/* ---------- ส่วนงาน / ติดต่อสอบถาม / รายละเอียดเพิ่มเติม ---------- */
.psu-jobs .pd-info {
    margin: 0;
    display: grid;
    /* คอลัมน์หัวข้อกว้างตามข้อความยาวสุด — "รายละเอียดเพิ่มเติม" จึงไม่ตกบรรทัด */
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 16px;
    background: #F8FAFB;
    border: 1px solid #E1E8EA;
    border-radius: 12px;
    padding: 14px 16px;
}

    .psu-jobs .pd-info dt {
        font-weight: 600;
        color: #1F4E79;
        white-space: nowrap;
    }

    .psu-jobs .pd-info dd {
        margin: 0;
    }

.psu-jobs .pd-unit {
    color: #1F66B8;
    margin-right: 6px;
}

.psu-jobs .pd-campus {
    display: inline-block;
    font-size: 12px;
    color: #18804F;
    border: 1px solid #7FD3A3;
    background: #FFFFFF;
    padding: 0 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.psu-jobs .pd-contact {
    display: flex;
    gap: 4px 24px;
    flex-wrap: wrap;
}

    .psu-jobs .pd-contact a {
        color: #1F66B8;
        word-break: break-all;
    }

/* ---------- รายละเอียดเพิ่มเติม ---------- */
.psu-jobs .pd-more p {
    margin: 0;
    line-height: 1.7;
    white-space: pre-line;
}

/* ---------- หมายเหตุ ---------- */
.psu-jobs .pd-remark {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FFF7EA;
    border: 1px solid #F5D9AE;
    border-radius: 12px;
    padding: 12px 16px;
}

    /* MudIcon เป็น component ลูก */
    .psu-jobs .pd-remark .pd-remark-icon {
        color: #B26A00;
        margin-top: 2px;
        flex: none;
    }

.psu-jobs .pd-remark-title {
    font-size: 14px;
    font-weight: 700;
    color: #5C3300;
}

.psu-jobs .pd-remark-text {
    font-size: 15px;
    line-height: 1.75;
    color: #3A2600;
    white-space: pre-line;
}

/* ---------- ขั้นตอน + ไฟล์ ---------- */
.psu-jobs .pd-status {
    font-weight: 400;
    color: #1F66B8;
}

.psu-jobs .pd-rounds-body {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* stepper แนวตั้ง (จอใหญ่) */
.psu-jobs .pd-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 240px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
}

.psu-jobs .pd-step {
    font: inherit;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 6px 4px 0;
    text-align: left;
}

.psu-jobs .pd-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.psu-jobs .pd-step-line {
    flex: 1;
    width: 2px;
    min-height: 20px;
    margin-top: 6px;
    background: #DCE6E5;
}

    .psu-jobs .pd-step-line.is-done {
        background: #47abcd;
    }

.psu-jobs .pd-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    padding-bottom: 14px;
}

.psu-jobs .pd-step-label {
    font-size: 14px;
    font-weight: 500;
    color: #2B3440;
}

.psu-jobs .pd-step.is-picked .pd-step-label {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .pd-step-count {
    font-size: 12px;
    color: #5B6779;
}

/* วงกลม */
.psu-jobs .pd-dot {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #FFFFFF;
    border: 2px solid #C9D4D3;
    color: #5B6779;
}

    .psu-jobs .pd-dot.is-done {
        background: #45adb0;
        border-color: #bee0e2;
        color: #ffffff;
    }

    .psu-jobs .pd-dot.is-now {
        border: 3px solid #78bbbd;
        color: #0B5F57;
    }

    .psu-jobs .pd-dot.is-picked {
        box-shadow: 0 0 0 5px #D5F3EE;
    }

/* stepper แนวนอน (มือถือ) — ซ่อนบนจอใหญ่ */
.psu-jobs .pd-steps-m {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.psu-jobs .pd-steps-m-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.psu-jobs .pd-step-m {
    font: inherit;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.psu-jobs .pd-step-m-line {
    flex: 1;
    height: 2px;
    min-width: 8px;
    background: #DCE6E5;
}

    .psu-jobs .pd-step-m-line.is-done {
        background: #5CD6C4;
    }

.psu-jobs .pd-step-m-info {
    background: #F0FAF8;
    border: 1px solid #D7ECE8;
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1.45;
}

.psu-jobs .pd-step-m-num,
.psu-jobs .pd-step-m-count {
    font-size: 12px;
    color: #4A5664;
}

.psu-jobs .pd-step-m-label {
    font-size: 15px;
    font-weight: 700;
    color: #0B5F57;
}

/* ไฟล์ */
.psu-jobs .pd-files {
    flex: 999 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.psu-jobs .pd-files-title {
    font-weight: 600;
    color: #1F4E79;
}

.psu-jobs .pd-files-empty {
    border: 1px dashed #C9D9D6;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: #4A5664;
}

.psu-jobs .pd-file {
    border: 1px solid #D7ECE8;
    border-radius: 12px;
    overflow: hidden;
}

.psu-jobs .pd-file-head {
    font: inherit;
    width: 100%;
    text-align: left;
    border: 0;
    background: #FFFFFF;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .psu-jobs .pd-file-head.is-open {
        background: #f2fdff;
    }

    .psu-jobs .pd-file-head .pd-chev {
        transition: transform .15s ease;
    }

    .psu-jobs .pd-file-head.is-open .pd-chev {
        transform: rotate(90deg);
    }

.psu-jobs .pd-file-name {
    font-weight: 600;
}

.psu-jobs .pd-latest {
    font-size: 12px;
    font-weight: 700;
    color: #0B5F57;
    background: #CDF1EC;
    padding: 1px 8px;
    border-radius: 999px;
}

.psu-jobs .pd-file-note {
    font-size: 13px;
    color: #4A5664;
    flex: 1 1 180px;
}

.psu-jobs .pd-file-view {
    background: #3A3F45;
    padding: 8px;
}

/* ไม่พบไฟล์: empty ธรรมดา พื้นขาว */
.psu-jobs .pd-file-empty {
    background: #FFFFFF;
    border-top: 1px solid #EEF3F2;
    padding: 24px 16px;
}

.psu-jobs .pd-pdf {
    display: block;
    width: 100%;
    height: 550px; /* เท่าความสูงเดิม */
    background: #FFFFFF;
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
    .psu-jobs .pd-steps {
        max-width: none;
    }

    /* แท็บเล็ต: 2 แถว — [สถานะ | จำนวนที่รับ] และ [วันที่เปิดรับ | ประกาศล่าสุด] */
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* มือถือ: กล่องใหญ่เต็มแถว กล่องเล็ก 2 กล่องอยู่คู่กันในแถวเดียว */
@media (max-width: 760px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense; /* ให้กล่องเล็กมาเติมช่องว่างให้อยู่คู่กัน */
    }

        .psu-jobs .pd-tiles .pd-tile.is-wide {
            grid-column: 1 / -1;
        }
}

@media (max-width: 760px) {
    .psu-jobs .pd {
        padding: 8px 4px 4px;
    }

    /* มือถือ: หัวข้ออยู่บน ข้อมูลอยู่ล่าง */
    .psu-jobs .pd-info {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

        .psu-jobs .pd-info dd {
            margin-bottom: 8px;
        }

    /* มือถือ: ใช้ stepper แนวนอนแทนแนวตั้ง */
    .psu-jobs .pd-steps {
        display: none;
    }

    .psu-jobs .pd-steps-m {
        display: flex;
    }

    .psu-jobs .pd-pdf {
        height: 420px;
    }
}

/* =========================================================
   ปรับเพิ่ม: รายละเอียดเพิ่มเติมในกรอบส่วนงาน / step ตรงแนว / ลูกศร collapse ชิดซ้าย
   ========================================================= */

/* รายละเอียดเพิ่มเติม (Note) ในกรอบ pd-info: คงการขึ้นบรรทัดใหม่ตามข้อมูล */
.psu-jobs .pd-info .pd-more-text {
    white-space: pre-line;
    line-height: 1.7;
}

/* stepper แนวตั้ง: ทุกขั้นชิดซ้าย วงกลมอยู่แนวเดียวกัน */
.psu-jobs .pd-step {
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}

.psu-jobs .pd-step-rail {
    flex: 0 0 28px; /* กว้างเท่าวงกลม ทุกขั้นจึงตรงกัน */
    width: 28px;
}

.psu-jobs .pd-step-text {
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.psu-jobs .pd-step:focus-visible,
.psu-jobs .pd-file-head:focus-visible {
    outline: 3px solid rgba(92,214,196,.45);
    outline-offset: 2px;
}

/* หัว collapse ของไฟล์: ลูกศร + ชื่อ Version ชิดซ้าย */
.psu-jobs .pd-file-head {
    box-sizing: border-box;
    justify-content: flex-start;
    text-align: left;
}

/* =========================================================
   Scrollbar กระจก "เทาใส" — รายการตำแหน่งด้านซ้าย
   แท่งเลื่อนเกือบใส มีไฮไลต์ขาว + เงาด้านใน ลอยอยู่ในรางจาง ๆ
   สีหลักเทาอมฟ้า rgb(100,116,130) — อยากเปลี่ยนสี แก้ค่า 100,116,130 ทุกจุดในบล็อกนี้
   ========================================================= */

/* สำคัญ: Chrome/Edge 121+ จะ "ไม่ใช้" ::-webkit-scrollbar ถ้า element มี scrollbar-color หรือ scrollbar-width
   (ค่านี้สืบทอดมาจาก html/body ได้ เช่น ถ้าธีมหรือ CSS อื่นตั้งไว้) จึงรีเซ็ตเป็น auto ก่อน
   Firefox ยังได้สีจากบล็อก @supports ด้านล่าง */
@supports selector(::-webkit-scrollbar) {
    .psu-jobs .ui-list-scroll {
        scrollbar-color: auto !important;
        scrollbar-width: auto !important;
    }
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar-track {
    background: rgba(100,116,130,.05);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(100,116,130,.08);
}

.psu-jobs .ui-list-scroll::-webkit-scrollbar-thumb {
    /* ไล่จากขาว (แสงสะท้อน) ไปเทาจาง ๆ */
    background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(100,116,130,.22) 45%, rgba(100,116,130,.32) 100%);
    background-clip: padding-box; /* ขอบใส 3px ทำให้แท่งดูลอยในราง */
    border: 3px solid transparent;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), /* ไฮไลต์ขอบบน */
    inset 0 0 0 1px rgba(100,116,130,.40), /* เส้นขอบแก้ว */
    inset 0 -2px 3px rgba(100,116,130,.25); /* เงาด้านล่าง */
}

    .psu-jobs .ui-list-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(100,116,130,.18);
    }

/* Firefox (ไม่รองรับ ::-webkit-scrollbar): ใช้สีเทาโปร่งแทน */
@supports not selector(::-webkit-scrollbar) {
    .psu-jobs .ui-list-scroll {
        scrollbar-width: auto;
        scrollbar-color: rgba(100,116,130,.45) transparent;
    }
}

/* =========================================================
   หมายเหตุ / ประกาศแจ้ง : ข้อความ — อยู่บรรทัดเดียวกัน
   ========================================================= */
.psu-jobs .pd-remark-body {
    flex: 1;
    min-width: 0;
    line-height: 1.75;
}

    .psu-jobs .pd-remark-body .pd-remark-title {
        display: inline;
        margin-right: 6px;
        white-space: nowrap; /* หัวข้อไม่ถูกตัดกลางคำ */
    }

    .psu-jobs .pd-remark-body .pd-remark-text {
        display: inline;
    }

/* =========================================================
   รายละเอียดเพิ่มเติม (Note) — ยุบ/ขยาย แบบ "ดูเพิ่มเติม"
   ========================================================= */

/* ยุบไว้ 3 บรรทัด ตัดท้ายด้วย … */
.psu-jobs .pd-info .pd-more-text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ปุ่ม ดูเพิ่มเติม / ย่อ — หน้าตาเป็นลิงก์ตัวหนาแบบ Facebook */
.psu-jobs .pd-more-toggle {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #1F66B8;
    cursor: pointer;
    user-select: none;
}

    .psu-jobs .pd-more-toggle:hover {
        text-decoration: underline;
    }

    .psu-jobs .pd-more-toggle:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* =========================================================
   Responsive ตามความกว้าง "กรอบรายละเอียด" (container query)
   เดิมกล่องสรุปใช้ auto-fit จึงขึ้นแถวใหม่เองเมื่อกรอบแคบ
   พอเปลี่ยนเป็น 4 คอลัมน์ตายตัว (ใหญ่/เล็ก) จอกลาง ๆ (เช่น 1100–1400px) กรอบขวาแคบแต่ยังได้ 4 คอลัมน์ → เบียด/ล้น
   จึงให้สลับรูปแบบตามความกว้างของ .pd เอง แทนความกว้างหน้าจอ
   หมายเหตุ: ตั้ง container ที่ .pd (ไม่ใช่ .ui-detail) เพราะ container-type ทำให้ position: fixed ข้างในเพี้ยน
   และ .ui-detail มีแถบปุ่มล่างจอ (.ui-mbar) ที่เป็น fixed อยู่
   ========================================================= */
.psu-jobs .pd {
    container-type: inline-size;
    container-name: pd;
}

/* กรอบแคบกว่า 820px: 2 แถว [สถานะ | จำนวนที่รับ] [วันที่เปิดรับ | ประกาศล่าสุด] */
@container pd (max-width: 820px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* กรอบแคบกว่า 520px: กล่องใหญ่เต็มแถว กล่องเล็ก 2 กล่องคู่กัน */
@container pd (max-width: 520px) {
    .psu-jobs .pd-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense;
    }

        .psu-jobs .pd-tiles .pd-tile.is-wide {
            grid-column: 1 / -1;
        }
    /* ส่วนงาน/ติดต่อ/รายละเอียดเพิ่มเติม: หัวข้ออยู่บน ข้อมูลอยู่ล่าง */
    .psu-jobs .pd-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

        .psu-jobs .pd-info dd {
            margin-bottom: 8px;
        }
}

/* ข้อความยาวที่ไม่มีช่องว่าง (เช่น อีเมล/ลิงก์) ไม่ดันกรอบให้ล้น */
.psu-jobs .pd-tile-value,
.psu-jobs .pd-info dd {
    overflow-wrap: anywhere;
}

/* =========================================================
   ขั้นตอนบนมือถือ (แบบ F2): แต่ละขั้นพับ/กางได้ เรียงขั้นล่าสุดไว้บนสุด
   (markup อยู่ใน PositionDetailComponent.razor ส่วน isNarrow)
   ========================================================= */
.psu-jobs .pd-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.psu-jobs .pd-acc-item {
    border: 1px solid #E1E9E8;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

    .psu-jobs .pd-acc-item.is-open {
        border-color: #9ED9CF;
    }

/* หัวขั้น: วงกลม | ชื่อขั้น | จำนวนไฟล์ | ลูกศร */
.psu-jobs .pd-acc-head {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    min-height: 48px; /* แตะง่ายบนมือถือ */
    text-align: left;
    cursor: pointer;
    background: #FFFFFF;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-head {
    background: #e8ffff;
}

.psu-jobs .pd-acc-head:focus-visible {
    outline: 3px solid rgba(92,214,196,.45);
    outline-offset: -3px;
}

.psu-jobs .pd-acc-head .pd-dot {
    width: 26px;
    height: 26px;
}

.psu-jobs .pd-acc-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #2B3440;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-title {
    color: #0B5F57;
    font-weight: 700;
}

/* ป้าย "ล่าสุด" ต่อท้ายชื่อขั้นปัจจุบัน */
.psu-jobs .pd-acc-new {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #0B5F57;
    background: #CDF1EC;
    padding: 0 7px;
    border-radius: 999px;
    vertical-align: 1px;
}

.psu-jobs .pd-acc-count {
    flex: none;
    font-size: 12px;
    color: #5B6779;
}

.psu-jobs .pd-acc-head .pd-acc-chev {
    flex: none;
    color: #5B6779;
    transition: transform .15s ease;
}

.psu-jobs .pd-acc-item.is-open .pd-acc-chev {
    transform: rotate(180deg);
}

/* ไฟล์ของขั้นที่กาง */
.psu-jobs .pd-acc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 12px;
    border-top: 1px solid #D7ECE8;
}

/* =========================================================
   หมายเหตุของแต่ละฉบับ — อยู่เหนือตัวดู PDF (แทนที่จะอยู่ในหัวฉบับ)
   ========================================================= */
.psu-jobs .pd-file > .pd-file-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: none;
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #3A2600;
    background: #FFF7EA;
    border-top: 1px solid #F5D9AE;
    white-space: pre-line;
}

    .psu-jobs .pd-file > .pd-file-note b {
        color: #5C3300;
    }

    .psu-jobs .pd-file > .pd-file-note .pd-file-note-icon {
        flex: none;
        color: #B26A00;
        margin-top: 2px;
    }

/* =========================================================
   วงกลมขั้นตอน (ใช้ทั้งจอใหญ่และมือถือ)
   เลขขั้นแสดงเสมอ • ผ่านแล้ว = พื้นขาว + ติ้กถูกเล็กมุมบนขวา
   ขั้นล่าสุด = ขอบหนา • ขั้นที่กำลังเลือก = พื้นเขียวทึบ ตัวเลขขาว
   ========================================================= */
.psu-jobs .pd-dot {
    position: relative;
    width: 26px;
    height: 26px;
    background: #FFFFFF;
    border: 2px solid #9ED9CF;
    color: #0B5F57;
    box-shadow: none;
}

    .psu-jobs .pd-dot.is-done {
        background: #FFFFFF;
        border-color: #9ED9CF;
        color: #0B5F57;
    }

    .psu-jobs .pd-dot.is-now {
        border: 3px solid #78bbbd;
    }

    .psu-jobs .pd-dot.is-picked {
        background: #23829c;
        border-color: #2086bb;
        color: #FFFFFF;
        box-shadow: 0 0 0 4px #D5F3EE;
    }

.psu-jobs .pd-dot-tick {
    position: absolute;
    top: -6px;
    right: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #18804F;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    display: grid;
    place-items: center;
}

/* =========================================================
   รางขั้นตอนบนจอใหญ่ — หุบ/กางได้
   ปกติหุบ (52px) → ชี้เมาส์/Tab = กางลอยทับ PDF • .is-pinned (กด ☰) = กางค้างและดัน PDF
   ========================================================= */
.psu-jobs .pd-rounds-body {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
}

.psu-jobs .pd-rail-wrap {
    position: relative;
    flex: 0 0 52px; /* จองพื้นที่แค่ราง ให้ PDF กว้างสุด */
    align-self: stretch;
    transition: flex-basis .18s ease;
}

    .psu-jobs .pd-rail-wrap.is-pinned {
        flex-basis: 300px;
    }

.psu-jobs .pd-rail {
    position: absolute; /* ลอยทับ PDF ตอนชี้เมาส์ */
    top: 0;
    left: 0;
    z-index: 5;
    width: 52px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E1E9E8;
    border-radius: 14px;
    padding: 6px 0;
    transition: width .18s ease, box-shadow .18s ease;
}

    .psu-jobs .pd-rail:hover,
    .psu-jobs .pd-rail:focus-within {
        width: 300px;
        box-shadow: 0 8px 24px rgba(15,95,87,.16);
    }

/* กางค้าง: รางอยู่ในพื้นที่ของตัวเอง ไม่ลอยทับ */
.psu-jobs .pd-rail-wrap.is-pinned .pd-rail {
    position: relative;
    width: 100%;
    box-shadow: none;
}

/* ข้อความในราง: ซ่อนตอนหุบ แสดงตอนกาง */
.psu-jobs .pd-rail .pd-rail-text {
    opacity: 0;
    transition: opacity .12s;
}

.psu-jobs .pd-rail:hover .pd-rail-text,
.psu-jobs .pd-rail:focus-within .pd-rail-text,
.psu-jobs .pd-rail-wrap.is-pinned .pd-rail-text {
    opacity: 1;
}

/* ปุ่ม ☰ */
.psu-jobs .pd-rail-pin {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 34px;
    padding: 0 13px;
    margin-bottom: 4px;
    border-bottom: 1px solid #EEF3F2;
    color: #5B6779;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pd-rail-pin .pd-rail-pin-icon {
        flex: none;
        width: 24px;
    }

    .psu-jobs .pd-rail-pin[aria-pressed="true"] {
        color: #0B5F57;
        font-weight: 700;
    }

.psu-jobs .pd-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* แต่ละขั้น: [วงกลม+เส้น] [ชื่อ+จำนวนไฟล์] */
.psu-jobs .pd-rail-step {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 6px 12px 0;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pd-rail-pin:focus-visible,
    .psu-jobs .pd-rail-step:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: -3px;
        border-radius: 8px;
    }

.psu-jobs .pd-rail-col {
    flex: 0 0 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.psu-jobs .pd-rail-line {
    flex: 1;
    width: 2px;
    min-height: 16px;
    margin-top: 4px;
    background: #47abcd;
}

.psu-jobs .pd-rail-step .pd-rail-text {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
    line-height: 1.35;
}

.psu-jobs .pd-rail-label {
    font-size: 14px;
    color: #2B3440;
}

.psu-jobs .pd-rail-step.is-picked .pd-rail-label {
    color: #0B5F57;
    font-weight: 700;
}

.psu-jobs .pd-rail-count {
    font-size: 12px;
    color: #5B6779;
}

/* วันที่แนบไฟล์ ต่อท้าย "ฉบับที่ x [ล่าสุด]" */
.psu-jobs .pd-file-date {
    font-size: 13px;
    font-weight: 400;
    color: #5B6779;
}

    .psu-jobs .pd-file-date::before {
        content: "·";
        margin-right: 8px;
        color: #9AA5B1;
    }

/* =========================================================
   แก้รางขั้นตอน: (1) รางสูงไม่พอ/ถูกตัดเมื่อไม่มีไฟล์ (2) ชื่อขั้นยาวถูกตัด
   - รางไม่ใช้ position:absolute แล้ว → ความสูงของรางนับรวมในกรอบ ไม่ถูกตัดอีก
     ตอนชี้เมาส์ รางกว้างขึ้นและล้นออกไปทับ PDF ทางขวาแทน (กรอบ 52px เท่าเดิม PDF ไม่ขยับ)
   - ข้อความในรางกว้างคงที่ 230px และตัดบรรทัดได้ → ความสูงรางเท่ากันทั้งตอนหุบ/กาง
   ========================================================= */
.psu-jobs .pd-rail {
    position: relative;
}

    .psu-jobs .pd-rail:hover,
    .psu-jobs .pd-rail:focus-within {
        width: 300px; /* ล้นออกจากกรอบ 52px ไปทับ PDF */
    }

.psu-jobs .pd-rail-wrap.is-pinned .pd-rail {
    width: 100%;
}

.psu-jobs .pd-rail-step {
    white-space: normal;
}

    .psu-jobs .pd-rail-step .pd-rail-text {
        flex: 0 0 230px; /* กว้างคงที่ ไม่ถูกบีบตอนหุบ */
        width: 230px;
        overflow-wrap: anywhere;
    }

.psu-jobs .pd-rail-pin .pd-rail-text {
    white-space: nowrap;
}

/* =========================================================
   สลับมุมมอง การ์ด / ตาราง
   ========================================================= */
.psu-jobs .ui-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.psu-jobs .ui-view-seg {
    display: inline-flex;
    background: #FFFFFF;
    border: 1px solid #CFE3E0;
    border-radius: 999px;
    padding: 3px;
}

    .psu-jobs .ui-view-seg button {
        font: inherit;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #4A5664;
        cursor: pointer;
    }

        .psu-jobs .ui-view-seg button.is-on {
            background: #dafbfb;
            color: #0B5F57;
            font-weight: 700;
            box-shadow: inset 0 0 0 1px #b9e7ed;
        }

/* โหมดตาราง: ซ่อนรายการแบบการ์ด รายละเอียดกลายเป็นแผงเลื่อนจากขวา */
.psu-jobs.is-table .ui-list {
    display: none;
}

.psu-jobs.is-table .ui-detail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 950; /* ต่ำกว่า ant-modal (1000) และ MudDialog (1400) */
    width: min(960px, 94vw);
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.14);
}

/* ปิดแผง: ซ่อนไปเลย (เดิมใช้เลื่อนออกนอกจอ ทำให้ตอนกดสลับเป็นตารางเห็นแผงวิ่งผ่านแว้บหนึ่ง) */
.psu-jobs.is-table:not(.is-detail) .ui-detail {
    display: none;
}

/* เปิดแผง: เลื่อนเข้าจากขวาด้วย animation (ไม่มี transform ค้าง → แถบปุ่มมือถือ fixed ยังติดล่างจอ) */
.psu-jobs.is-table.is-detail .ui-detail {
    display: block;
    animation: psuSlideIn .22s ease;
}

@keyframes psuSlideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: none;
    }
}

.psu-jobs.is-table .ui-back {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
}

.psu-jobs .ui-scrim {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(20,40,40,.35);
}

/* โหมดตาราง ≤1040px: ไม่ใช้กฎ 2 หน้าของโหมดการ์ด (หัวเรื่อง/ตัวกรองไม่ต้องหาย) */
@media (max-width: 1040px) {
    .psu-jobs.is-table.is-detail .ui-titlebar,
    .psu-jobs.is-table.is-detail .ui-stages {
        display: flex;
    }

    .psu-jobs.is-table.is-detail .ui-filter {
        display: grid;
    }

    .psu-jobs.is-table.is-detail .ui-chips {
        display: flex;
    }

    .psu-jobs.is-table .ui-detail {
        width: 100vw;
    }
}

/* =========================================================
   ตาราง (PositionTableComponent)
   ========================================================= */
.psu-jobs .pt {
    background: #FFFFFF;
    border: 1px solid #B9DED8;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15,95,87,.08);
    overflow: hidden;
}

.psu-jobs .pt-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid #D7ECE8;
}

.psu-jobs .pt-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1F4E79;
}

.psu-jobs .pt-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #5B6779;
}

.psu-jobs .pt-sbtn {
    font: inherit;
    font-size: 13px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #CFE3E0;
    background: #FFFFFF;
    color: #4A5664;
    cursor: pointer;
}

    .psu-jobs .pt-sbtn:hover {
        background: #F0FAF8;
    }

    .psu-jobs .pt-sbtn.is-on {
        background: #dafbfb;
        border-color: #b9e7ed;
        color: #0B5F57;
        font-weight: 700;
    }

.psu-jobs .pt-scroll {
    overflow-x: auto;
}

.psu-jobs .pt-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-size: 14px;
}

    .psu-jobs .pt-table th {
        background: #ceedf1;
        color: #1F4E79;
        font-weight: 700;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 2px solid #A9D7D0;
        white-space: nowrap;
    }
        /* เส้นแถว = เส้นคอลัมน์ สีเดียวกัน */
        .psu-jobs .pt-table th + th,
        .psu-jobs .pt-table td + td {
            border-left: 1px solid #C3D9D5;
        }

    .psu-jobs .pt-table td {
        padding: 8px 12px;
        border-bottom: 1px solid #C3D9D5;
        vertical-align: middle;
    }

    .psu-jobs .pt-table tbody tr:hover {
        background: #F6FCFB;
    }

    .psu-jobs .pt-table tbody tr.is-selected {
        background: #e8ffff;
    }

.psu-jobs .pt-no {
    width: 44px;
    text-align: right !important;
    color: #5B6779;
}

.psu-jobs .pt-round {
    width: 200px;
    text-align: center !important;
}

.psu-jobs .pt-fee {
    width: 124px;
    text-align: center !important;
}

.psu-jobs .pt-act {
    width: 140px;
    text-align: center !important;
}

.psu-jobs .pt-empty {
    padding: 24px !important;
}

/* ช่องประกาศ */
.psu-jobs .pt-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .psu-jobs .pt-line + .pt-line {
        margin-top: 3px;
    }

.psu-jobs .pt-title {
    font-size: 15px;
    font-weight: 700;
    color: #0B5F57;
}

.psu-jobs .pt-posno {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: #1F66B8;
    border: 1px solid #A9C7EA;
    padding: 0 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.psu-jobs .pt-rate {
    flex: none;
    margin-left: auto; /* จำนวนอัตราชิดขวา */
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background: #2F6FB8;
    padding: 1px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.psu-jobs .pt-meta {
    font-size: 13px;
    color: #4A5664;
}

    .psu-jobs .pt-meta b {
        color: #1F66B8;
        font-weight: 600;
    }

    .psu-jobs .pt-meta .pt-cal {
        font-size: 16px;
        color: #5B6779;
    }

.psu-jobs .pt-status {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    line-height: 20px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

    .psu-jobs .pt-status.is-open {
        color: #135E3A;
        background: #E8F7EE;
        border-color: #7FD3A3;
    }

    .psu-jobs .pt-status.is-soon {
        color: #B42318;
        background: #FEF1F0;
        border-color: #F3B4AE;
    }

    .psu-jobs .pt-status.is-closed {
        color: #4A5664;
        background: #EEF1F3;
        border-color: #E1E6EA;
    }

    /* ยังไม่ถึงวันเปิดรับ — "เปิดรับในอีก X วัน" */
    .psu-jobs .pt-status.is-upcoming {
        color: #1D4F91;
        background: #EEF5FF;
        border-color: #A9C7EE;
    }

.psu-jobs .pt-sep {
    color: #B7C2C1;
}

.psu-jobs .pt-unit {
    color: #1F66B8;
}

.psu-jobs .pt-camp {
    color: #18804F;
}

.psu-jobs .pt-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #7A4100;
    background: #FFF3DC;
    border: 1px solid #F0C98A;
    padding: 0 8px;
    border-radius: 999px;
}

/* รอบการสอบ: ไอคอน + คำอธิบาย (ไม่มีรอบนั้น/ไม่มีข้อมูล = เทา) */
.psu-jobs .pt-exams {
    display: inline-flex;
    gap: 12px;
}

.psu-jobs .pt-exam {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: #C9D1D3;
}

    .psu-jobs .pt-exam small {
        font-size: 11px;
        color: #B7C2C1;
    }

    .psu-jobs .pt-exam.is-written {
        color: #12A37A;
    }

    .psu-jobs .pt-exam.is-practical {
        color: #5B4FD6;
    }

    .psu-jobs .pt-exam.is-interview {
        color: #1F7AE0;
    }

        .psu-jobs .pt-exam.is-written small,
        .psu-jobs .pt-exam.is-practical small,
        .psu-jobs .pt-exam.is-interview small {
            color: #4A5664;
        }

/* ค่าสมัคร: ฿ ส้ม = มี, ฿ เทา = ไม่มี, — = ไม่มีข้อมูล */
.psu-jobs .pt-feebox {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    white-space: nowrap;
    color: #4A5664;
}

    .psu-jobs .pt-feebox i {
        font-style: normal;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 12px;
        color: #FFFFFF;
        background: #E0A022;
    }

    .psu-jobs .pt-feebox.is-no {
        color: #9AA5B1;
    }

        .psu-jobs .pt-feebox.is-no i {
            background: #D3DADC;
        }

    .psu-jobs .pt-feebox.is-unknown {
        color: #B7C2C1;
        font-size: 14px;
    }

/* ปุ่มดูรายละเอียด: ไม่มีสีพื้น */
.psu-jobs .pt-view {
    font: inherit;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 8px 0 12px;
    border-radius: 8px;
    border: 1px solid #9ED9CF;
    background: #FFFFFF;
    color: #0F7F74;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .psu-jobs .pt-view:hover {
        background: #F0FAF8;
        border-color: #45adb0;
    }

    .psu-jobs .pt-view:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

/* มือถือ: ตารางเรียงลงเป็นการ์ด */
@media (max-width: 760px) {
    .psu-jobs .pt-table,
    .psu-jobs .pt-table tbody,
    .psu-jobs .pt-table tr,
    .psu-jobs .pt-table td {
        display: block;
        min-width: 0;
        width: auto;
    }

        .psu-jobs .pt-table thead,
        .psu-jobs .pt-table .pt-no {
            display: none;
        }

        .psu-jobs .pt-table tr {
            padding: 10px 12px;
            border-bottom: 8px solid #F0F5F5;
        }

        .psu-jobs .pt-table td {
            border: 0 !important;
            padding: 3px 0;
            text-align: left !important;
        }
}

/* มือถือ + โหมดตาราง: เว้นที่ท้ายแผงให้แถบปุ่มสมัครล่างจอ */
@media (max-width: 760px) {
    .psu-jobs.is-table .ui-detail {
        padding-bottom: 110px;
    }
}

/* =========================================================
   รายละเอียด: รอบการสอบ + ค่าธรรมเนียม (บรรทัดเดียวกัน ในกรอบส่วนงาน)
   ========================================================= */
.psu-jobs .pd-exam-fee {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.psu-jobs .pd-exams {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.psu-jobs .pd-exam {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2B3440;
}

    .psu-jobs .pd-exam .mud-icon-root {
        font-size: 18px;
    }

    .psu-jobs .pd-exam.is-written .mud-icon-root {
        color: #12A37A;
    }

    .psu-jobs .pd-exam.is-practical .mud-icon-root {
        color: #5B4FD6;
    }

    .psu-jobs .pd-exam.is-interview .mud-icon-root {
        color: #1F7AE0;
    }

    /* ไม่มีรอบนั้น: เทาทั้งไอคอนและข้อความ (ไม่ขีดฆ่า) */
    .psu-jobs .pd-exam.is-off,
    .psu-jobs .pd-exam.is-off .mud-icon-root {
        color: #B7C2C1;
    }

/* เส้นคั่นระหว่างรอบสอบกับค่าธรรมเนียม */
.psu-jobs .pd-exam-sep {
    width: 1px;
    height: 16px;
    background: #CFDCDA;
}

.psu-jobs .pd-fee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2B3440;
}

    .psu-jobs .pd-fee i {
        font-style: normal;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 800;
        color: #FFFFFF;
        background: #E0A022;
    }

    .psu-jobs .pd-fee.is-no {
        color: #9AA5B1;
    }

        .psu-jobs .pd-fee.is-no i {
            background: #D3DADC;
        }

    .psu-jobs .pd-fee.is-unknown {
        color: #9AA5B1;
    }
/* ============================================================
   วางต่อท้าย wwwroot/css/app.css — มี 2 ส่วน

   ส่วนที่ 1: .divReport
   กล่อง "รายงานตัว" เดิมเขียนเป็น inline style ใน UserIndex.razor
   ย้ายมาเป็นคลาสกลุ่มเดียวกับ .divRegist / .divEditResume /
   .divChangePWD / .divAddResume ค่าทุกตัวยกมาจาก inline style เดิม
   (เพิ่ม :hover ตามรูปแบบเดียวกับกล่องอื่น)
   แนะนำให้วางไว้ต่อจากกฎ .divAddResume:hover
   ============================================================ */
.divReport {
    border: 1px solid #44ad4a;
    padding: 20px !important;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-weight: bold;
    font-size: 20px !important;
    border-radius: 10px;
    box-shadow: 3px 5px #f1f1f1;
    cursor: pointer;
}

    .divReport:hover {
        background-color: #d8efda !important;
        box-shadow: 3px 5px #7cc481 !important;
        border: 1px solid #3a9a40;
    }

/* ============================================================
   ส่วนที่ 2: เมนูลัด (UserIndex) — การ์ดแนวนอนแบบเตี้ย [ไอคอน | ข้อความ | ลูกศร]

   สี เงา ขอบ และ hover ยังมาจากคลาสเดิม (.divRegist / .divEditResume /
   .divChangePWD / .divAddResume / .divReport) ไม่ได้แก้คลาสเดิม
   กฎในส่วนนี้ทับเฉพาะ padding กับ font-size ที่คลาสเดิมใส่ !important ไว้
   และทับเฉพาะในเมนูลัด (.shortcut-menu) หน้าอื่นที่ใช้คลาสเดิมไม่กระทบ

   การเรียงกล่องตามความกว้างจอ:
     5 กล่อง : >=1360px แถวเดียว | 960–1359px 3+2 | 600–959px 2+2+1 | <600px คอลัมน์เดียว
     4 กล่อง : >=1100px แถวเดียว | 600–1099px 2+2  | <600px คอลัมน์เดียว
   (การ์ดต้องกว้างราว 250px ขึ้นไป ข้อความจึงอยู่บรรทัดเดียว breakpoint คิดจากค่านี้)
   แถวที่ไม่เต็มจะจัดกึ่งกลางเอง (justify-content: center)
   ============================================================ */
.shortcut-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

    /* การ์ด 1 ใบ — ค่าเริ่มต้น (จอเล็ก) กว้างเต็มแถว */
    .shortcut-menu > .shortcut-card {
        flex: 0 0 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: auto 1fr auto; /* ไอคอน | ข้อความ | ลูกศร */
        align-items: center;
        column-gap: 12px;
        min-height: 72px;
        padding: 12px 16px !important; /* ทับ padding 20px !important ของคลาสเดิม */
        font-size: 18px !important; /* ทับ 20px !important ของคลาสเดิม */
        line-height: 1.3;
    }

.shortcut-card .sc-icon,
.shortcut-card .sc-arrow {
    display: flex;
}

/* ข้อความไม่ตัดบรรทัด ลูกศรจึงไม่ตกลงไปข้างล่าง */
.shortcut-card .sc-label {
    min-width: 0;
    white-space: nowrap;
}

    /* "(อาจารย์)" ขึ้นบรรทัดของตัวเอง การ์ดจะได้แคบลง */
    .shortcut-card .sc-label small {
        display: block;
        font-size: .75em;
    }

/* ขนาดไอคอน (MudIcon render เป็น svg.mud-icon-root) */
.shortcut-card .sc-icon .mud-icon-root {
    font-size: 2rem;
}

.shortcut-card .sc-arrow .mud-icon-root {
    font-size: 1.5rem;
}

/* 2 คอลัมน์ */
@media (min-width: 600px) {
    .shortcut-menu > .shortcut-card {
        flex-basis: calc((100% - 16px) / 2);
        max-width: 340px; /* จอใหญ่ การ์ดไม่ยืดยาวเกินไป */
    }
}

/* 5 กล่อง: 3 คอลัมน์ (3+2) */
@media (min-width: 960px) {
    .shortcut-menu--5 > .shortcut-card {
        flex-basis: calc((100% - 32px) / 3);
    }
}

/* 4 กล่อง: แถวเดียว */
@media (min-width: 1100px) {
    .shortcut-menu:not(.shortcut-menu--5) > .shortcut-card {
        flex: 1 1 0;
    }
}

/* 5 กล่อง: แถวเดียว */
@media (min-width: 1360px) {
    .shortcut-menu--5 > .shortcut-card {
        flex: 1 1 0;
    }
}

/* =========================================================
   โหมดตาราง: ปุ่ม "กลับไปรายการตำแหน่ง" ต้องไม่ถูกแถบเมนูด้านบนของเว็บบัง
   แผงรายละเอียดเริ่มใต้แถบเมนู — ใช้ความสูงแถบของ MudBlazor (--mud-appbar-height) ถ้าไม่มีใช้ 64px
   ถ้าแถบเมนูสูงไม่เท่านี้ ให้แก้ค่า 64px
   ========================================================= */
.psu-jobs.is-table .ui-detail {
    top: var(--mud-appbar-height, 64px);
}

/* ปุ่มกลับด้านบน: ติดขอบบนของแผงเสมอเวลาเลื่อน */
.psu-jobs.is-table .ui-back {
    border-bottom: 1px solid #D7ECE8;
}

/* ปุ่ม "กลับ" ในแถบปุ่มล่างจอ (มือถือ โหมดตาราง) — แคบกว่าปุ่มอื่น */
@media (max-width: 760px) {
    .psu-jobs .ui-mbar-buttons .ui-mbar-back {
        flex: 0 0 auto;
        padding: 0 12px;
    }
}

/* =========================================================
   แบ่งหน้า (ตาราง + การ์ด)
   ========================================================= */
.psu-jobs .ui-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid #D7ECE8;
    font-size: 13px;
    color: #4A5664;
}

    /* คอลัมน์การ์ด (แคบ): ปุ่มอยู่กลาง ไม่มีข้อความสรุป */
    .psu-jobs .ui-pager.is-compact {
        justify-content: center;
        padding: 10px 4px 2px;
    }

.psu-jobs .ui-pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.psu-jobs .ui-pg {
    font: inherit;
    font-size: 13px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid #CFE3E0;
    background: #FFFFFF;
    color: #2B3440;
    cursor: pointer;
}

    .psu-jobs .ui-pg:hover:not(:disabled) {
        background: #F0FAF8;
        border-color: #9ED9CF;
    }

    .psu-jobs .ui-pg.is-on {
        background: #3c829a;
        border-color: #2197a3;
        color: #FFFFFF;
        font-weight: 700;
    }

    .psu-jobs .ui-pg:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .psu-jobs .ui-pg:focus-visible {
        outline: 3px solid rgba(92,214,196,.45);
        outline-offset: 2px;
    }

.psu-jobs .ui-pg-gap {
    padding: 0 2px;
    color: #9AA5B1;
}

.psu-jobs .ui-pager-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .psu-jobs .ui-pager-size select {
        font: inherit;
        height: 32px;
        padding: 0 6px;
        border-radius: 8px;
        border: 1px solid #CFE3E0;
        background: #FFFFFF;
        color: #2B3440;
    }

/* มือถือ: ข้อความสรุปอยู่บนสุด ปุ่มอยู่กลาง */
@media (max-width: 760px) {
    .psu-jobs .ui-pager {
        justify-content: center;
    }

    .psu-jobs .ui-pager-info {
        flex: 1 1 100%;
        text-align: center;
    }
}
/* ============================================================
   แท็บประวัติการสมัคร (UserIndex) — วางต่อท้าย wwwroot/css/app.css
   เพิ่มกฎใหม่เท่านั้น ไม่ได้แก้กฎเดิม
   จอเล็ก: ซ่อนคำว่า "ข้อมูลการสมัครงานที่" ในชื่อแท็บ
   เหลือ "กำลังดำเนินการ" / "เสร็จสิ้นแล้ว" ไม่ให้ชื่อแท็บตัดเป็นหลายบรรทัด
   ============================================================ */

/* ตัวเลขจำนวนรายการในชื่อแท็บ — อยู่ในบรรทัดเดียวกับชื่อ จึงไม่ถูกขอบแท็บตัด
   สีใช้ตัวแปรสีของ MudBlazor (info = ฟ้า, success = เขียว) ให้ตรงกับ badge เดิม */
.apply-tab-count {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}

.apply-tab-count--active {
    background-color: var(--mud-palette-info);
}

.apply-tab-count--close {
    background-color: var(--mud-palette-success);
}

@media (max-width: 600px) {
    .apply-tab-long {
        display: none;
    }
}

/* =========================================================
   หน้า "ตำแหน่งใกล้เคียง" (PositionDetailRelated)
   ใช้คลาสชุดเดียวกับหน้าแรกเกือบทั้งหมด — ด้านล่างคือส่วนที่เพิ่มเฉพาะหน้านี้
   ========================================================= */

/* จำนวนรายการต่อท้ายหัวเรื่อง */
.psu-jobs .ui-title-count {
    font-size: 14px;
    font-weight: 500;
    color: #4A5664;
}

/* ปุ่มกลับหน้าแรก — สูงเท่าปุ่มสลับมุมมอง */
.psu-jobs .ui-home-btn {
    min-height: 40px;
    border-radius: 999px;
}

/* ข้อความที่แสดงเฉพาะจอ ≤ 760px (คู่กับ .ui-hide-sm) */
.psu-jobs .ui-show-sm {
    display: none;
}

/* กล่องชื่อตำแหน่ง (สีเขียวแบบเดิม) */
.psu-jobs .ui-relpos {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F3FDF6;
    border: 1px solid #92DEB2;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #135E3A;
}

    .psu-jobs .ui-relpos > span {
        min-width: 0; /* ข้อความไทยยาวใน flex ให้ตัดบรรทัดได้ */
    }

/* จอแคบ โหมดการ์ด: เปิดรายละเอียดแล้ว ซ่อนกล่องชื่อตำแหน่ง (หัวรายละเอียดมีชื่อตำแหน่งอยู่แล้ว)
   ส่วนหัวเรื่อง (.ui-titlebar) ถูกซ่อนด้วยกฎ 2 หน้าเดิมด้านบนอยู่แล้ว */
@media (max-width: 1040px) {
    .psu-jobs.is-detail:not(.is-table) .ui-relpos {
        display: none;
    }
}

@media (max-width: 760px) {
    .psu-jobs .ui-show-sm {
        display: inline;
    }

    .psu-jobs .ui-title-count {
        flex-basis: 100%;
        font-size: 13px;
    }

    .psu-jobs .ui-title {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .psu-jobs .ui-relpos {
        font-size: 16px;
        padding: 8px 12px;
    }
}

/* =========================================================
   แถบสรุปท้ายกล่องรายการของ Select (ช่องตำแหน่งในแผงค้นหา) — "แสดง 50 จาก 1,234 รายการ"
   *** ไม่ขึ้นต้นด้วย .psu-jobs โดยตั้งใจ ***
   กล่องรายการของ AntDesign ถูกวางไว้นอกหน้า (ท้าย <body>) จึงอยู่นอก .psu-jobs
   ค่าเหมือนกับใน EducationHistoryDialog ทุกตัว — ถ้าย้ายไป app.css แล้ว ลบทั้งสองที่ให้เหลือที่เดียวได้
   ========================================================= */
.psu-dd-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 4px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b7681;
    cursor: default;
}

    .psu-dd-foot b {
        color: #2f3943;
        font-variant-numeric: tabular-nums;
    }

    .psu-dd-foot .mud-icon-root {
        flex: 0 0 auto;
        width: 15px !important;
        height: 15px !important;
        font-size: 15px !important;
        color: #9aa4af;
    }