/* =====================================================================
   PSU Theme — ธีมกลางสำหรับ Master_All / Master_NextU / Master_Transfer
   โหลดหลัง StyleSheet.css / Bootstrap เพื่อทับสไตล์เดิม
   ไม่ต้องแก้ไฟล์ .aspx ของหน้าเนื้อหา: ปรับหน้าตาผ่าน selector กลาง
   และ attribute selector ที่จับ inline style ที่ ASP.NET สร้างจาก
   Font-Names / ForeColor / Width ของ control
   ===================================================================== */

:root {
    --psu-blue: #003C71;
    --psu-blue-700: #002B52;
    --psu-blue-500: #1F5A94;
    --psu-blue-100: #E6EEF6;
    --psu-blue-50: #F3F7FB;
    --psu-gold: #C9A227;
    --psu-gold-100: #FBF4DE;
    --psu-text: #1E2A38;
    --psu-muted: #5B6B7D;
    --psu-border: #D7E0EA;
    --psu-bg: #F2F5F9;
    --psu-surface: #FFFFFF;
    --psu-danger: #C62828;
    --psu-success: #2E7D32;
    --psu-radius: 12px;
    --psu-radius-sm: 8px;
    --psu-shadow: 0 1px 2px rgba(16, 38, 66, .06), 0 4px 16px rgba(16, 38, 66, .06);
    --psu-font: 'Sarabun', 'Tahoma', sans-serif;
    --psu-font-head: 'Prompt', 'Sarabun', 'Tahoma', sans-serif;
}

/* ---------- พื้นฐาน ---------- */
html, body.psu-body {
    background: var(--psu-bg);
}

body.psu-body {
    margin: 0;
    color: var(--psu-text);
    font-family: var(--psu-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.psu-body form {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.psu-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ---------- Header ---------- */
.psu-header {
    background: var(--psu-blue);
    color: #fff;
}

.psu-header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.psu-header .psu-brand-logo {
    height: 52px !important;
    width: auto !important;
    flex: none;
    background: #fff;
    border-radius: 10px;
    padding: 4px 6px;
}

.psu-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.psu-brand-title {
    font-family: var(--psu-font-head);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.3;
    color: #fff;
}

.psu-brand-sub {
    font-size: .85rem;
    color: rgba(255, 255, 255, .78);
    line-height: 1.4;
}

.psu-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--psu-gold) 0%, #E4C766 100%);
}

/* แถบชื่อบริการ (NextU) */
.psu-subhead {
    background: var(--psu-surface);
    border-bottom: 1px solid var(--psu-border);
}

.psu-subhead-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.psu-subhead .psu-subhead-title {
    font-family: var(--psu-font-head) !important;
    font-size: 1.35rem !important;
    color: var(--psu-blue) !important;
    font-weight: 500;
}

.psu-subhead .psu-subhead-sub {
    font-size: 1rem !important;
    color: var(--psu-muted) !important;
}

/* ---------- พื้นที่เนื้อหา ---------- */
.psu-main {
    flex: 1 0 auto;
    padding: 24px 0 32px;
}

.psu-card {
    background: var(--psu-surface);
    border: 1px solid var(--psu-border);
    border-radius: var(--psu-radius);
    box-shadow: var(--psu-shadow);
    padding: 24px;
    overflow-x: auto;
}

.psu-card + .psu-card {
    margin-top: 16px;
}

.psu-card-head:empty {
    display: none;
}

/* ---------- Footer ---------- */
.psu-footer {
    background: var(--psu-blue-700);
    color: rgba(255, 255, 255, .85);
    padding: 20px 0;
    font-size: .9rem;
}

.psu-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.psu-footer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.psu-footer-info span,
.psu-footer-info .psu-footer-strong {
    font-family: var(--psu-font) !important;
    font-size: .9rem !important;
    color: rgba(255, 255, 255, .85) !important;
}

.psu-footer-info .psu-footer-strong {
    color: #fff !important;
    font-weight: 600;
}

.psu-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.psu-footer-divider {
    display: none !important;
}

.psu-footer .psu-admin-btn {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover;
    border-radius: 50%;
    opacity: .55;
    transition: opacity .15s;
    background: #fff;
}

.psu-footer .psu-admin-btn:hover,
.psu-footer .psu-admin-btn:focus-visible {
    opacity: 1;
}

/* =====================================================================
   ทับสไตล์เดิมของหน้าเนื้อหา (ภายใน .psu-main เท่านั้น)
   ยกเว้น Crystal Report Viewer ซึ่งต้องคงรูปแบบรายงานไว้
   ===================================================================== */

/* ฟอนต์: แทน Tahoma / Angsana New ที่มาจาก Font-Names */
.psu-main :where(*):not([id*="CrystalReportViewer"], [id*="CrystalReportViewer"] *, [class*="ti-"]) {
    font-family: var(--psu-font) !important;
}

/* ขนาดตัวอักษรที่เล็ก/ใหญ่เกินจากหน่วย pt ให้อยู่ในช่วงอ่านง่าย */
.psu-main [style*="font-size:8pt"],
.psu-main [style*="font-size:9pt"],
.psu-main [style*="font-size:10pt"],
.psu-main [style*="font-size:11pt"] {
    font-size: .9rem !important;
}

.psu-main [style*="font-size:12pt"],
.psu-main [style*="font-size:13pt"],
.psu-main [style*="font-size: 15px"],
.psu-main [style*="font-size:15px"] {
    font-size: 1rem !important;
}

.psu-main [style*="font-size:14pt"],
.psu-main [style*="font-size:16pt"] {
    font-size: 1.15rem !important;
}

.psu-main [style*="font-size:18pt"],
.psu-main [style*="font-size:20pt"],
.psu-main [style*="font-size:22pt"],
.psu-main [style*="font-size:24pt"] {
    font-size: 1.35rem !important;
    font-family: var(--psu-font-head) !important;
}

/* สีหัวข้อเดิม (teal / ฟ้าอมเขียว / น้ำเงินเข้ม) -> น้ำเงิน PSU
   สีแดง (ข้อความผิดพลาด) และสีอื่นที่มีความหมายคงไว้ตามเดิม */
.psu-main [style*="color:#006666"],
.psu-main [style*="color:#006699"],
.psu-main [style*="color:#003366"],
.psu-main [style*="color:#0066CC"],
.psu-main [style*="color:#000099"],
.psu-main [style*="color:#336699"],
.psu-main [style*="color:Teal"],
.psu-main [style*="color:Navy"] {
    color: var(--psu-blue) !important;
}

.psu-main [style*="color:Red"],
.psu-main [style*="color:#FF0000"],
.psu-main [style*="color:#CC0000"],
.psu-main .error-label {
    color: var(--psu-danger) !important;
}

.psu-main [style*="color:Green"],
.psu-main [style*="color:#009900"],
.psu-main [style*="color:#008000"] {
    color: var(--psu-success) !important;
}

/* แถบคั่นสีเหลืองเดิม -> เส้นทอง PSU */
.psu-main td[style*="#FFCC00"]:not([id*="CrystalReportViewer"] *),
.psu-main td[style*="#ffcc00"]:not([id*="CrystalReportViewer"] *),
.psu-main div[style*="#FFCC00"] {
    background-color: transparent !important;
    border-top: 2px solid var(--psu-gold);
    height: 2px !important;
    padding: 0 !important;
}

/* พื้นหลังสีเดิมของแถว/เซลล์ -> โทนอ่อนของ PSU */
.psu-main td[style*="background-color:#FFFFCC"]:not([id*="CrystalReportViewer"] *),
.psu-main td[style*="background-color: #FFFFCC"]:not([id*="CrystalReportViewer"] *),
.psu-main td[style*="background-color:#FFFF99"]:not([id*="CrystalReportViewer"] *),
.psu-main td[style*="background-color: #FFFF99"]:not([id*="CrystalReportViewer"] *) {
    background-color: var(--psu-gold-100) !important;
}

.psu-main td[style*="background-color: #006699"]:not([id*="CrystalReportViewer"] *),
.psu-main td[style*="background-color:#006699"]:not([id*="CrystalReportViewer"] *),
.psu-main td[style*="background-color: #003366"]:not([id*="CrystalReportViewer"] *),
.psu-main td[style*="background-color:#003366"]:not([id*="CrystalReportViewer"] *) {
    background-color: var(--psu-blue) !important;
}

/* ---------- ตาราง layout (table ที่ใช้จัดหน้า ไม่ใช่ GridView) ---------- */
.psu-main table:not([id*="CrystalReportViewer"] *) {
    max-width: 100%;
    border-color: var(--psu-border);
}

.psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) {
    border: 0;
    margin-left: auto;
    margin-right: auto;
}

.psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody > tr > td {
    padding: 4px 8px;
    vertical-align: middle;
}

/* เซลล์ที่ถูกตั้งความกว้างตายตัวจาก class auto-style* ของแต่ละหน้า */
.psu-main td[class*="auto-style"]:not([id*="CrystalReportViewer"] *) {
    max-width: 100%;
}

/* ---------- GridView (ตารางข้อมูล) ---------- */
.psu-main table[rules]:not([id*="CrystalReportViewer"] *),
.psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) {
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--psu-border) !important;
    border-radius: var(--psu-radius-sm);
    overflow: hidden;
    background: var(--psu-surface);
    margin: 8px auto;
    font-size: .95rem;
}

.psu-main table[rules]:not([id*="CrystalReportViewer"] *) th,
.psu-main table[rules]:not([id*="CrystalReportViewer"] *) > tbody > tr:first-child > th,
.psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) th {
    background: var(--psu-blue) !important;
    color: #fff !important;
    font-weight: 500;
    padding: 10px 12px !important;
    border: 0 !important;
    text-align: center;
    white-space: nowrap;
}

.psu-main table[rules]:not([id*="CrystalReportViewer"] *) th a,
.psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) th a {
    color: #fff !important;
}

.psu-main table[rules]:not([id*="CrystalReportViewer"] *) td,
.psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) td {
    padding: 8px 12px !important;
    border: 0 !important;
    border-top: 1px solid var(--psu-border) !important;
}

.psu-main table[rules]:not([id*="CrystalReportViewer"] *) > tbody > tr:nth-child(even) > td,
.psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) > tbody > tr:nth-child(even) > td {
    background-color: var(--psu-blue-50);
}

.psu-main table[rules]:not([id*="CrystalReportViewer"] *) > tbody > tr:hover > td,
.psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) > tbody > tr:hover > td {
    background-color: var(--psu-blue-100);
}

/* ---------- ลิงก์ ---------- */
.psu-main a {
    color: var(--psu-blue-500);
    text-decoration: none;
}

.psu-main a:hover {
    color: var(--psu-blue);
    text-decoration: underline;
}

/* ---------- เมนูบนของหน้าเนื้อหา (LinkButton ที่ใช้ซ้ำทุกหน้า) ---------- */
.psu-main a[id$="Lbtn_Detail"],
.psu-main a[id$="Lbtn_requestDoculment"],
.psu-main a[id$="Lbtn_HistoryRequestDoc"],
.psu-main a[id$="Lbtn_LogOut"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 2px;
    border-radius: 999px;
    border: 1px solid var(--psu-border);
    background: var(--psu-surface);
    color: var(--psu-blue) !important;
    font-size: .95rem !important;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.psu-main a[id$="Lbtn_Detail"]:hover,
.psu-main a[id$="Lbtn_requestDoculment"]:hover,
.psu-main a[id$="Lbtn_HistoryRequestDoc"]:hover {
    background: var(--psu-blue-50);
    border-color: var(--psu-blue-500);
    text-decoration: none;
}

.psu-main a[id$="Lbtn_LogOut"] {
    color: var(--psu-danger) !important;
}

.psu-main input[type="image"][id$="ImageButton_LogOut"]:not([id*="CrystalReportViewer"] *) {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid var(--psu-border);
    background: #fff;
    padding: 3px;
}

/* ---------- ปุ่ม ---------- */
.psu-main input[type="submit"]:not([id*="CrystalReportViewer"] *),
.psu-main input[type="button"]:not([id*="CrystalReportViewer"] *),
.psu-main button:not([id*="CrystalReportViewer"] *),
.psu-main .btn,
.psu-main .button,
.psu-main .buttonCss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    height: auto !important;
    max-width: 100%;
    padding: 10px 22px !important;
    margin: 4px 2px;
    border-radius: var(--psu-radius-sm) !important;
    border: 1px solid var(--psu-blue) !important;
    background: var(--psu-blue) !important;
    color: #fff !important;
    font-family: var(--psu-font) !important;
    font-size: 1rem !important;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .15s, border-color .15s, transform .05s;
}

.psu-main input[type="submit"]:hover:not([id*="CrystalReportViewer"] *),
.psu-main input[type="button"]:hover:not([id*="CrystalReportViewer"] *),
.psu-main button:hover:not([id*="CrystalReportViewer"] *),
.psu-main .btn:hover,
.psu-main .button:hover,
.psu-main .buttonCss:hover {
    background: var(--psu-blue-700) !important;
    border-color: var(--psu-blue-700) !important;
    color: #fff !important;
}

.psu-main input[type="submit"]:active:not([id*="CrystalReportViewer"] *),
.psu-main .btn:active {
    transform: translateY(1px);
}

.psu-main input[type="submit"]:focus-visible:not([id*="CrystalReportViewer"] *),
.psu-main .btn:focus-visible,
.psu-main a:focus-visible,
.psu-main input:focus-visible:not([id*="CrystalReportViewer"] *),
.psu-main select:focus-visible:not([id*="CrystalReportViewer"] *),
.psu-main textarea:focus-visible:not([id*="CrystalReportViewer"] *) {
    outline: 3px solid rgba(201, 162, 39, .55);
    outline-offset: 2px;
}

.psu-main input[type="submit"][disabled]:not([id*="CrystalReportViewer"] *),
.psu-main .btn[disabled],
.psu-main .aspNetDisabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ปุ่มรอง: btn-outline-* ของเดิม -> ปุ่มขอบ */
.psu-body .psu-main .btn-outline-warning,
.psu-body .psu-main .btn-outline-primary,
.psu-body .psu-main .buttonNo {
    background: var(--psu-surface) !important;
    color: var(--psu-blue) !important;
}

.psu-body .psu-main .btn-outline-warning:hover,
.psu-body .psu-main .btn-outline-primary:hover,
.psu-body .psu-main .buttonNo:hover {
    background: var(--psu-blue-50) !important;
    color: var(--psu-blue) !important;
}

.psu-main .buttonCss::before,
.psu-main .buttonCss::after {
    display: none;
}

/* ---------- ช่องกรอกข้อมูล ---------- */
.psu-main input[type="text"]:not([id*="CrystalReportViewer"] *),
.psu-main input[type="email"]:not([id*="CrystalReportViewer"] *),
.psu-main input[type="tel"]:not([id*="CrystalReportViewer"] *),
.psu-main input[type="number"]:not([id*="CrystalReportViewer"] *),
.psu-main input[type="password"]:not([id*="CrystalReportViewer"] *),
.psu-main input:not([type]):not([id*="CrystalReportViewer"] *),
.psu-main textarea:not([id*="CrystalReportViewer"] *),
.psu-main select:not([id*="CrystalReportViewer"] *) {
    max-width: 100%;
    min-height: 40px;
    padding: 6px 12px !important;
    border: 1px solid var(--psu-border) !important;
    border-radius: var(--psu-radius-sm) !important;
    background-color: var(--psu-surface) !important;
    color: var(--psu-text);
    font-size: 1rem !important;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.psu-main input[type="text"]:focus:not([id*="CrystalReportViewer"] *),
.psu-main input[type="email"]:focus:not([id*="CrystalReportViewer"] *),
.psu-main input[type="tel"]:focus:not([id*="CrystalReportViewer"] *),
.psu-main input[type="number"]:focus:not([id*="CrystalReportViewer"] *),
.psu-main input[type="password"]:focus:not([id*="CrystalReportViewer"] *),
.psu-main textarea:focus:not([id*="CrystalReportViewer"] *),
.psu-main select:focus:not([id*="CrystalReportViewer"] *) {
    border-color: var(--psu-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(31, 90, 148, .15);
    outline: none;
}

.psu-main .ttbox,
.psu-main .ttbox-1-green,
.psu-main .ttbox_Gray {
    text-align: center;
    font-weight: 600;
}

.psu-main .ttbox_Gray,
.psu-main input[readonly]:not([id*="CrystalReportViewer"] *),
.psu-main input[disabled]:not([id*="CrystalReportViewer"] *) {
    background-color: var(--psu-blue-50) !important;
}

.psu-main input[type="radio"]:not([id*="CrystalReportViewer"] *),
.psu-main input[type="checkbox"]:not([id*="CrystalReportViewer"] *) {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 2px;
    vertical-align: middle;
    accent-color: var(--psu-blue);
}

.psu-main input[type="radio"]:not([id*="CrystalReportViewer"] *) + label,
.psu-main input[type="checkbox"]:not([id*="CrystalReportViewer"] *) + label {
    vertical-align: middle;
    cursor: pointer;
}

/* ---------- รูปภาพ ---------- */
.psu-main img {
    max-width: 100%;
    height: auto;
}

/* ---------- Panel ---------- */
.psu-main div[id$="Panel1"],
.psu-main div[id$="Panel2"],
.psu-main div[id$="Panel3"] {
    border-radius: var(--psu-radius-sm);
}

/* =====================================================================
   มือถือ: ให้ตาราง layout เรียงลงเป็นแนวตั้ง และตารางข้อมูลเลื่อนแนวนอนได้
   ===================================================================== */
@media (max-width: 720px) {
    .psu-header-inner {
        min-height: 60px;
    }

    .psu-header .psu-brand-logo {
        height: 42px !important;
    }

    .psu-brand-title {
        font-size: 1rem;
    }

    .psu-brand-sub {
        font-size: .78rem;
    }

    .psu-main {
        padding: 12px 0 20px;
    }

    .psu-card {
        padding: 16px 12px;
        border-radius: var(--psu-radius-sm);
    }

    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *),
    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody,
    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody > tr,
    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody > tr > td {
        display: block;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody > tr > td {
        text-align: left !important;
        padding: 3px 4px;
    }

    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody > tr > td[align="center"],
    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody > tr > td[colspan] {
        text-align: center !important;
    }

    .psu-main table:not([rules]):not([style*="border-collapse"]):not([id*="CrystalReportViewer"] *) > tbody > tr > td:empty {
        display: none;
    }

    .psu-main table[rules]:not([id*="CrystalReportViewer"] *),
    .psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .psu-main input[type="submit"]:not([id*="CrystalReportViewer"] *),
    .psu-main .btn {
        width: 100% !important;
    }

    .psu-main input[type="text"]:not([id*="CrystalReportViewer"] *),
    .psu-main input[type="email"]:not([id*="CrystalReportViewer"] *),
    .psu-main input[type="tel"]:not([id*="CrystalReportViewer"] *),
    .psu-main input[type="password"]:not([id*="CrystalReportViewer"] *),
    .psu-main textarea:not([id*="CrystalReportViewer"] *),
    .psu-main select:not([id*="CrystalReportViewer"] *) {
        width: 100% !important;
    }

    .psu-main input.ttbox:not([id*="CrystalReportViewer"] *),
    .psu-main input.ttbox-1-green:not([id*="CrystalReportViewer"] *),
    .psu-main input.ttbox_Gray:not([id*="CrystalReportViewer"] *) {
        width: 96px !important;
    }

    /* แถวเมนูบน (ข้อมูลส่วนตัว / ยื่นคำร้อง / ประวัติ / ออกจากระบบ) เรียงแนวนอนแล้วตัดบรรทัด */
    /* ใส่ .psu-body และ table:not([rules]) เพื่อให้ specificity สูงกว่ากฎ td width:100% ด้านบน */
    .psu-body .psu-main table:not([rules]):not([id*="CrystalReportViewer"] *) tr:has(> td > a[id$="Lbtn_Detail"]),
    .psu-body .psu-main table:not([rules]):not([id*="CrystalReportViewer"] *) tr:has(> td > a[id$="Lbtn_HistoryRequestDoc"]) {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .psu-body .psu-main table:not([rules]):not([id*="CrystalReportViewer"] *) tr:has(> td > a[id$="Lbtn_Detail"]) > td,
    .psu-body .psu-main table:not([rules]):not([id*="CrystalReportViewer"] *) tr:has(> td > a[id$="Lbtn_HistoryRequestDoc"]) > td {
        width: auto !important;
        padding: 0 !important;
    }

    .psu-main table[rules]:not([id*="CrystalReportViewer"] *) td,
    .psu-main table[style*="border-collapse"]:not([id*="CrystalReportViewer"] *) td {
        white-space: nowrap;
    }

    .psu-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- พิมพ์ ---------- */
@media print {
    .psu-header,
    .psu-accent,
    .psu-subhead,
    .psu-footer {
        display: none !important;
    }

    body.psu-body,
    .psu-main {
        background: #fff !important;
        padding: 0 !important;
    }

    .psu-card {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}

/* ตารางหลักของหน้า NextU / หน้าเดิม ที่เคยได้ width:100% จาก Master เก่า */
.psu-main table.auto-style3:not([id*="CrystalReportViewer"] *) {
    width: 100%;
}

/* =====================================================================
   Components — ใช้ใน markup ที่ออกแบบใหม่ของแต่ละหน้า
   (หน้าเดิมที่ยังเป็นตาราง layout ยังได้หน้าตาจากกฎด้านบน)
   ===================================================================== */

.psu-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* แถบเมนูบนของหน้า: แท็บ + ปุ่มออกจากระบบ */
.psu-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--psu-border);
}

.psu-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.psu-main .psu-tabs a {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--psu-border);
    background: var(--psu-surface);
    color: var(--psu-blue) !important;
    font-size: .95rem !important;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
}

.psu-main .psu-tabs a:hover {
    background: var(--psu-blue-50);
    border-color: var(--psu-blue-500);
}

.psu-main .psu-tabs a.is-active {
    background: var(--psu-blue);
    border-color: var(--psu-blue);
    color: #fff !important;
}

.psu-topbar-end {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* หัวข้อหน้า */
.psu-heading {
    margin: 0;
    font-family: var(--psu-font-head) !important;
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--psu-blue);
    line-height: 1.35;
}

.psu-heading-sub {
    margin: 4px 0 0;
    color: var(--psu-muted);
}

/* กล่องเนื้อหาย่อย */
.psu-section {
    border: 1px solid var(--psu-border);
    border-radius: var(--psu-radius);
    background: var(--psu-surface);
    padding: 20px;
}

.psu-section-muted {
    background: var(--psu-blue-50);
}

.psu-section-title {
    display: block;
    margin: 0 0 14px;
    font-family: var(--psu-font-head) !important;
    font-size: 1.1rem !important;
    font-weight: 500;
    color: var(--psu-blue) !important;
}

/* ข้อมูลแบบ ป้ายกำกับ : ค่า */
.psu-info {
    display: grid;
    grid-template-columns: minmax(130px, 220px) 1fr;
    gap: 10px 20px;
    margin: 0;
}

.psu-info-label {
    color: var(--psu-muted);
}

.psu-info-value {
    font-weight: 500;
    color: var(--psu-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ฟอร์ม */
.psu-form {
    display: grid;
    gap: 16px;
}

.psu-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 20px;
}

.psu-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.psu-field-label {
    font-weight: 500;
    color: var(--psu-text);
}

.psu-field-help {
    font-size: .9rem;
    color: var(--psu-muted);
}

.psu-field-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/* รายการเอกสาร + จำนวน + ราคา */
.psu-doc-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--psu-border);
    border-radius: var(--psu-radius-sm);
    overflow: hidden;
}

.psu-doc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    background: var(--psu-surface);
}

.psu-doc-row + .psu-doc-row {
    border-top: 1px solid var(--psu-border);
}

.psu-doc-row:nth-child(even) {
    background: var(--psu-blue-50);
}

.psu-doc-name {
    font-weight: 500;
}

.psu-doc-meta {
    display: block;
    font-size: .9rem;
    color: var(--psu-muted);
}

.psu-doc-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* ปุ่มเรียงกัน */
.psu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.psu-actions-start {
    justify-content: flex-start;
}

.psu-actions-stack {
    flex-direction: column;
    align-items: stretch;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}

/* ปุ่มแบบรอง / สีอื่น (ใส่ผ่าน CssClass) */
.psu-body .psu-main .psu-btn-outline:not([id*="CrystalReportViewer"] *) {
    background: var(--psu-surface) !important;
    color: var(--psu-blue) !important;
}

.psu-body .psu-main .psu-btn-outline:not([id*="CrystalReportViewer"] *):hover {
    background: var(--psu-blue-50) !important;
    color: var(--psu-blue) !important;
}

.psu-body .psu-main .psu-btn-success:not([id*="CrystalReportViewer"] *) {
    background: var(--psu-success) !important;
    border-color: var(--psu-success) !important;
}

.psu-body .psu-main .psu-btn-success:not([id*="CrystalReportViewer"] *):hover {
    background: #1B5E20 !important;
    border-color: #1B5E20 !important;
}

.psu-body .psu-main .psu-btn-gold:not([id*="CrystalReportViewer"] *) {
    background: var(--psu-gold) !important;
    border-color: var(--psu-gold) !important;
    color: #1E2A38 !important;
}

.psu-body .psu-main .psu-btn-gold:not([id*="CrystalReportViewer"] *):hover {
    background: #B08C1C !important;
    border-color: #B08C1C !important;
    color: #fff !important;
}

.psu-body .psu-main .psu-btn-danger:not([id*="CrystalReportViewer"] *) {
    background: var(--psu-surface) !important;
    border-color: var(--psu-danger) !important;
    color: var(--psu-danger) !important;
}

.psu-body .psu-main .psu-btn-danger:not([id*="CrystalReportViewer"] *):hover {
    background: #FDECEC !important;
    color: var(--psu-danger) !important;
}

.psu-body .psu-main .psu-btn-block {
    width: 100% !important;
}

.psu-body .psu-main .psu-btn-lg {
    min-height: 52px !important;
    font-size: 1.05rem !important;
}

/* ตัวเลือก RadioButton / CheckBox แบบการ์ด (CssClass ห่อ input + label) */
.psu-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.psu-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--psu-border);
    border-radius: var(--psu-radius-sm);
    background: var(--psu-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.psu-choice:hover {
    border-color: var(--psu-blue-500);
}

.psu-choice:has(input:checked) {
    border-color: var(--psu-blue);
    background: var(--psu-blue-50);
    box-shadow: inset 0 0 0 1px var(--psu-blue);
}

.psu-choice label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.psu-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}

.psu-check input {
    margin-top: 4px !important;
}

/* กล่องข้อความแจ้ง — ใส่ CssClass บน Label ได้เลย ถ้าข้อความว่างจะถูกซ่อน */
.psu-alert {
    display: block;
    padding: 12px 16px;
    border-radius: var(--psu-radius-sm);
    border: 1px solid transparent;
    border-left-width: 4px;
    line-height: 1.55;
}

.psu-alert:empty {
    display: none;
}

.psu-alert-info {
    background: var(--psu-blue-50);
    border-color: var(--psu-blue-100);
    border-left-color: var(--psu-blue-500);
    color: var(--psu-blue-700) !important;
}

.psu-alert-warning {
    background: var(--psu-gold-100);
    border-color: #F1E3B3;
    border-left-color: var(--psu-gold);
    color: #5C4708 !important;
}

.psu-alert-danger {
    background: #FDECEC;
    border-color: #F7CFCF;
    border-left-color: var(--psu-danger);
    color: var(--psu-danger) !important;
}

.psu-alert-success {
    background: #EAF5EB;
    border-color: #CDE6CF;
    border-left-color: var(--psu-success);
    color: var(--psu-success) !important;
}

/* ข้อความสั้นสีต่างๆ */
.psu-text-danger { color: var(--psu-danger) !important; }
.psu-text-success { color: var(--psu-success) !important; }
.psu-text-muted { color: var(--psu-muted) !important; }
.psu-text-blue { color: var(--psu-blue) !important; }
.psu-strong { font-weight: 600; }
.psu-center { text-align: center; }
.psu-nowrap { white-space: nowrap; }

/* ตัวเลขเด่น เช่น ยอดเงิน */
.psu-amount {
    font-family: var(--psu-font-head) !important;
    font-size: 1.6rem !important;
    font-weight: 600;
    color: var(--psu-blue) !important;
}

/* เส้นคั่นสีทอง (ใช้กับ Label ที่เดิมเป็นขีดเส้นใต้ ______) */
.psu-divider,
.psu-main .psu-divider-label {
    display: block;
    height: 0;
    margin: 4px 0;
    border: 0;
    border-top: 2px solid var(--psu-gold);
    font-size: 0 !important;
    line-height: 0;
    color: transparent !important;
    overflow: hidden;
}

/* ตารางข้อมูลเลื่อนแนวนอนได้ */
.psu-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.psu-table-wrap > table,
.psu-table-wrap > div > table {
    width: 100% !important;
    margin: 0 !important;
}

/* QR / รูปประกอบ */
.psu-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.psu-main .psu-qr-code,
.psu-qr .psu-qr-code img {
    width: 260px !important;
    max-width: 100%;
    height: auto !important;
    border: 1px solid var(--psu-border);
    border-radius: var(--psu-radius-sm);
    background: #fff;
    padding: 8px;
}

.psu-main .psu-qr-logo {
    width: 180px !important;
    height: auto !important;
}

/* ขั้นตอน (ลำดับเลข) */
.psu-steps {
    counter-reset: psu-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.psu-steps > li {
    counter-increment: psu-step;
    position: relative;
    padding-left: 48px;
    min-height: 34px;
}

.psu-steps > li::before {
    content: counter(psu-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--psu-blue);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.psu-steps img {
    display: block;
    margin-top: 8px;
    border-radius: var(--psu-radius-sm);
    border: 1px solid var(--psu-border);
}

/* แถวข้อมูลอ้างอิงการชำระเงิน */
.psu-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.psu-ref {
    border: 1px solid var(--psu-border);
    border-radius: var(--psu-radius-sm);
    padding: 12px 14px;
    background: var(--psu-blue-50);
}

.psu-ref-label {
    display: block;
    font-size: .85rem;
    color: var(--psu-muted);
}

.psu-ref-value {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--psu-blue);
    overflow-wrap: anywhere;
}

/* กลุ่ม control ที่ใช้เก็บค่าภายใน — ซ่อนเสมอ */
.psu-hidden {
    display: none !important;
}

@media (max-width: 720px) {
    .psu-page {
        gap: 16px;
    }

    .psu-topbar {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .psu-tabs {
        flex: 1;
        gap: 6px;
    }

    .psu-main .psu-tabs a {
        padding: 6px 12px;
        font-size: .9rem !important;
    }

    .psu-heading {
        font-size: 1.25rem;
    }

    .psu-section {
        padding: 16px 14px;
    }

    .psu-info {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .psu-info-value {
        margin-bottom: 10px;
    }

    .psu-doc-row {
        grid-template-columns: 1fr;
    }
}

/* กล่องที่ซ่อนตัวเองจนกว่าโค้ดจะแสดงตาราง/ช่องข้อมูลข้างใน (เช่น รายละเอียดเมื่อกดเลือกรายการ) */
.psu-section-auto:not(:has(table, textarea, input, select)) {
    display: none;
}

/* ช่องกรอกในฟอร์มใหม่ให้เต็มความกว้างของคอลัมน์ */
.psu-main .psu-field > input[type="text"],
.psu-main .psu-field > input[type="password"],
.psu-main .psu-field > input:not([type]),
.psu-main .psu-field > select,
.psu-main .psu-field > textarea {
    width: 100%;
}

.psu-main .psu-field-inline > input[type="text"],
.psu-main .psu-field-inline > input[type="password"] {
    flex: 1 1 200px;
    width: auto;
}

/* การ์ดใน master ที่ไม่มีเนื้อหา (หน้าใส่แค่ช่องว่าง) ให้ซ่อน */
.psu-card-auto:not(:has(*)) {
    display: none;
}

/* กล่องแจ้งที่ข้างในเป็น Label ซึ่งโค้ดเปิด/ปิด — ซ่อนกล่องเมื่อไม่มี Label แสดงอยู่เลย */
.psu-alert-auto:not(:has(*)) {
    display: none;
}

.psu-alert-auto > span {
    display: block;
}