/**
 * หน้าสมัครเข้าศึกษา — ฝั่งผู้เข้าชม (§8)
 *
 * ── ทุกตัวเลือกขึ้นต้นด้วย .rxsu-adm ──
 * ไฟล์นี้ถูก enqueue บนหน้าจริงที่ยังมี header, footer และสไตล์ของธีมอยู่ครบ · ตัวเลือกที่เป็น
 * ชื่อแท็กเปล่า ๆ จะไหลไปทับส่วนที่ไม่ใช่ของเรา ซึ่งเป็นอาการที่หาสาเหตุยากที่สุดชนิดหนึ่ง
 * เพราะมันไม่ได้พังตรงที่แก้ · บล็อกที่ต้องการสไตล์เฉพาะตัวถูกเลือกด้วย `[id="…"]` ไม่ใช่
 * `#…` ด้วยเหตุผลเดียวกัน — รูปแอตทริบิวต์ยังขึ้นต้นด้วยคลาสของเรา จึงตรวจได้ด้วยกฎเดียว
 *
 * ── ไม่มีสีที่สื่อ "สถานะ" เลย (§8.4) ──
 * ไม่มีป้าย "เปิดรับ"/"ปิดรับ" ที่ฝั่งผู้เข้าชม · สองสีของระดับการศึกษาเป็น **เอกลักษณ์**
 * ไม่ใช่สถานะ ความหมายจริงอยู่ที่ข้อความป้าย (ปริญญาบัณฑิต / บัณฑิตศึกษา) ซึ่งอ่านออก
 * แม้พิมพ์ขาวดำหรือมองสีไม่เห็น
 *
 * ── ชุดสีและตัวอักษรมาจากแม่แบบที่คณะส่งมา (0.75.0) ──
 * Primary #00795d · Deep #00604f · Sage #5b7f72 · Olive #4f6b4a · พื้น #f7faf6 · ตัวอักษร
 * #2d2d2d — ประกาศไว้ที่ราก `.rxsu-adm` ที่เดียว ประกาศซ้ำที่นี่แทนการอ้าง var ของธีมตรง ๆ
 * เพราะหน้านี้ต้องเรนเดอร์ถูกใน iframe ของตัวอย่างซึ่งไม่มีสไตล์ธีมอยู่ด้วย
 *
 * ── ไอคอนทุกตัวเป็น mask ของ CSS ไม่ใช่ SVG ใน HTML ──
 * ไอคอนบนหน้านี้เป็นของประดับล้วน ๆ (ข้อความข้าง ๆ บอกครบอยู่แล้ว) การไม่ให้มันอยู่ใน
 * HTML แปลว่า screen reader ไม่มีวันได้ยิน และไบต์ของ fixture ทองคำไม่บวมตามจำนวนไอคอน ·
 * ใช้ mask ไม่ใช่ background เพื่อให้สีของไอคอนตามสีของระดับที่มันอยู่ได้
 *
 * ── container query สำหรับขนาดวันที่ ──
 * ขนาดข้อความวันที่ต้องผูกกับ **ความกว้างการ์ดรอบ** ไม่ใช่ความกว้างจอ เพราะการ์ดใบเดียวกัน
 * อยู่ในเลย์เอาต์ 3 คอลัมน์บนจอกว้างและ 1 คอลัมน์บนมือถือ · ต้องมีทางถอยของตัวเองเสมอ
 */

.rxsu-adm {
    --rxsu-adm-gap: 1rem;
    --rxsu-adm-primary: #00795d;
    --rxsu-adm-primary-deep: #00604f;
    --rxsu-adm-sage: #5b7f72;
    --rxsu-adm-olive: #4f6b4a;
    --rxsu-adm-ink: #2d2d2d;
    --rxsu-adm-ink-soft: #5b6b5e;
    --rxsu-adm-rule: #dfe5da;
    --rxsu-adm-surface: #ffffff;
    --rxsu-adm-canvas: #f7faf6;
    /* ระดับการศึกษา: ป.ตรี ได้เขียวหลัก บัณฑิตศึกษาได้เขียวมะกอก — ต่างกันพอให้กวาดตา
       แยกโซนได้ ไม่ต่างกันจนอ่านเป็นคนละเว็บ */
    --rxsu-adm-accent-undergrad: var(--rxsu-adm-primary);
    --rxsu-adm-accent-graduate: var(--rxsu-adm-olive);
    --rxsu-adm-accent: var(--rxsu-adm-primary);
    /* ดำสนิทของกระดาษ: เส้นขอบสีเทาอ่อนคือเส้นที่หายไปในเครื่องพิมพ์ขาวดำ · เป็นตัวแปร
       ไม่ใช่ค่าดิบในบล็อก @media print เพราะ "ยกเว้นให้ที่เดียว" คือประตูที่สีดิบเดินกลับมา */
    --rxsu-adm-print-rule: #000000;

    /* ไอคอน: เส้น 24×24 ชุดเดียวกันทั้งหน้า · ไม่มี `#` ในไฟล์ (ใช้ black) เพราะ mask
       สนใจแค่ค่าอัลฟา และเพราะสีดิบนอกบล็อกตัวแปรเป็นสิ่งที่ §10.1 ห้ามไว้ */
    --rxsu-adm-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --rxsu-adm-icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H4z'/%3E%3Cpath d='M20 4h-6a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H20z'/%3E%3C/svg%3E");
    --rxsu-adm-icon-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M19 8v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7z'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
    --rxsu-adm-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h3l2 5-2.5 1.5a12 12 0 0 0 5 5L16 12l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --rxsu-adm-icon-megaphone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4a1 1 0 0 0 1 1h3l6 4V5L8 9H5a1 1 0 0 0-1 1z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
    --rxsu-adm-icon-steps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h10M10 12h10M10 18h10'/%3E%3Cpath d='M3 6l1.6 1.6L7.5 4.7'/%3E%3Cpath d='M3 12l1.6 1.6L7.5 10.7'/%3E%3Cpath d='M3 18l1.6 1.6L7.5 16.7'/%3E%3C/svg%3E");
    --rxsu-adm-icon-costs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
    --rxsu-adm-icon-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2 9l10 5 10-5-10-5z'/%3E%3Cpath d='M6 11.5V16c0 1.7 2.7 3 6 3s6-1.3 6-3v-4.5'/%3E%3C/svg%3E");
    --rxsu-adm-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
    --rxsu-adm-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h19M15 2l6 6-6 6'/%3E%3C/svg%3E");

    color: var(--rxsu-adm-ink);
    line-height: 1.6;

    /* ── หน้าต้องมีระยะขอบของตัวเอง ไม่ใช่ยืมของธีม (0.76.0) ──────────────────
     * บน production จริง เนื้อหาถูกวางในคอนเทนเนอร์ที่ไม่มีระยะขอบด้านข้างเลย
     * ตัวอักษรจึงชนขอบจอทั้งซ้ายขวา · เดิมออกแบบโดยสมมติว่า "ธีมจัดการความกว้างให้"
     * ซึ่งเป็นสมมติฐานที่หน้านี้ตรวจสอบเองไม่ได้และผิดจริงเมื่อไปอยู่บนหน้าที่ยึดมา
     * ประกาศเองจึงถูกต้องกว่า: ถ้าธีมมีคอนเทนเนอร์อยู่แล้ว max-inline-size ไม่ทำอะไร
     * ส่วน padding เพิ่มระยะหายใจอีกนิดเดียว แต่ถ้าธีมไม่มี หน้านี้ก็ยังอ่านได้ */
    /* border-box ไม่ใช่ค่าตั้งต้น: ถ้าไม่ประกาศ `max-inline-size` จะจำกัดแค่กล่องเนื้อหา
       แล้ว padding ไปบวกข้างนอกอีก 64px — ความกว้างจริงกลายเป็น 82rem ทั้งที่โค้ดเขียน 78
       (วัดแล้วบนจอ 1345px: ได้ 1312 ไม่ใช่ 1248) */
    max-inline-size: 78rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

/* ── box-sizing ของทั้งกิ่ง ไม่ใช่ของรากใบเดียว (0.82.0) ──────────────────────
 * ค่าตั้งต้นของ CSS คือ `content-box`: `padding` กับเส้นขอบไปบวก **นอก** ความกว้าง/ความสูง
 * ที่ประกาศไว้ · ผลที่วัดได้จริงบนหน้าตัวอย่าง: การ์ดทางลัดประกาศ `height: 100%` เพื่อให้
 * สูงเท่ากันทั้งแถว แล้วได้ความสูงจริง = แถว + padding 28px + เส้นขอบ 2px = **เกินแถวไป
 * 30px** การ์ดแถวล่างจึงถูกทับ (ผู้ใช้เห็นและรายงานมา)
 *
 * รีเซ็ตทั้งกิ่งครั้งเดียวแทนการไล่ใส่ทีละที่ เพราะทุกกล่องในไฟล์นี้มี padding และหลายกล่อง
 * อยู่ในกริดที่มีความกว้างตายตัว — อาการเดียวกันนี้รออยู่ในทุกใบ ต่างกันแค่ยังไม่มีใครเห็น ·
 * ขอบเขตหยุดที่ `.rxsu-adm` ธีมและ Elementor ที่อยู่รอบ ๆ ไม่ถูกแตะ */
.rxsu-adm,
.rxsu-adm *,
.rxsu-adm *::before,
.rxsu-adm *::after {
    box-sizing: border-box;
}

/* ── ป้ายหน้าดูตัวอย่าง (§8.7) ────────────────────────────────────────────────
 * sticky เพราะผู้ดูแลที่เลื่อนลงไปดูปฏิทินกลางหน้าต้องยังเห็นว่ากำลังดูของที่ยังไม่เผยแพร่ ·
 * การพิมพ์ป้ายซ้ำทุกบล็อกทำให้เอกสารอ่านไม่ได้ จึงแก้ที่ CSS ไม่ใช่ที่ไบต์ของ HTML */
.rxsu-adm__preview-notice {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 0.5rem;
    background: var(--rxsu-adm-canvas);
    font-weight: 700;
    text-align: center;
}

/* ══ หัวหน้า (hero) ═══════════════════════════════════════════════════════════
 * แถบเปิดหน้าแบบเดียวกับหน้าหลักสูตร: ชื่อหน้าใหญ่ คำโปรยหนึ่งบรรทัด พื้นเขียวอ่อน ·
 * โลโก้ (ถ้าผู้ดูแลเลือกไว้) อยู่ขวามือบนจอกว้าง และลงมาอยู่ใต้คำโปรยบนมือถือ */
.rxsu-adm__block[id="rxsu-adm-header"] {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 1rem;
    background: var(--rxsu-adm-canvas);
}

.rxsu-adm__block[id="rxsu-adm-header"] h1 {
    margin: 0;
    color: var(--rxsu-adm-primary-deep);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.35;
}

.rxsu-adm__block[id="rxsu-adm-header"] .rxsu-adm__intro {
    max-width: 46rem;
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
}

.rxsu-adm__logo-wrap {
    margin: 0;
}

/* ── โลโก้เป็นเครื่องหมายรอง ไม่ใช่ประธานของแถบเปิดหน้า (0.80.0) ────────────
 * ตราของคณะอยู่บนแถบหัวเว็บเหนือขึ้นไปไม่ถึงสองร้อยพิกเซลอยู่แล้ว · ใส่ซ้ำในหน้าได้
 * แต่ต้องอ่านออกว่าเป็นของประกอบ ไม่ใช่สิ่งที่แข่งความเด่นกับชื่อหน้า
 *
 * `width: 100%` + `max-width` เป็นคู่ที่ต้องมาด้วยกัน: ภาพที่มีแต่ max-width เป็น
 * เปอร์เซ็นต์ ไม่ได้บอกความกว้างที่แน่นอนให้กริดใช้คำนวณ กริดจึงถอยไปใช้ขนาดต้นฉบับ
 * ของไฟล์แทน (ของจริงคือ 2560px) แล้วคอลัมน์ของชื่อหน้าถูกบีบเหลือศูนย์ */
.rxsu-adm__logo {
    display: block;
    width: 100%;
    max-width: 12rem;
    height: auto;
    margin-inline-start: auto;
}

@media (min-width: 48rem) {
    .rxsu-adm__block[id="rxsu-adm-header"] {
        /* ── ทำไมไม่ใช่ `auto` (0.80.0) ────────────────────────────────────────
         * `auto` ให้ขนาดตาม max-content ของสิ่งที่อยู่ข้างใน · สิ่งที่อยู่ข้างในคือภาพ
         * ที่ไฟล์จริงกว้าง 2560px และ `max-width` ที่เป็นเปอร์เซ็นต์ไม่มีผลกับการ
         * คำนวณนั้น (เปอร์เซ็นต์ของช่องที่ยังไม่รู้ขนาด) · ผลที่วัดได้บนจอ 1280:
         * คอลัมน์ชื่อหน้าเหลือ **0px** ชื่อหน้าตัดเป็นสี่บรรทัดคำละบรรทัด และโลโก้
         * กินไป 1078px — ตรงกับอาการที่ผู้ใช้รายงาน
         * เพดานที่เป็นตัวเลขแน่นอนตัดวงจรนั้นทิ้ง ไม่ว่าไฟล์จะใหญ่แค่ไหน */
        grid-template-columns: minmax(0, 1fr) minmax(0, 12rem);
        align-items: center;
        column-gap: 2rem;
    }

    .rxsu-adm__block[id="rxsu-adm-header"] h1,
    .rxsu-adm__block[id="rxsu-adm-header"] .rxsu-adm__intro {
        grid-column: 1;
    }

    .rxsu-adm__logo-wrap {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* ══ สวิตช์ระดับการศึกษา ══════════════════════════════════════════════════════
 * ตัวคัดกรองที่ไม่ใช้ JavaScript · radio จริงสองใบ ป้ายของมันคือปุ่มที่เห็น
 * (`.rxsu-adm__level-input` ถูกซ่อนไว้ให้ยังโฟกัสได้ ไม่ใช่ `display: none` ซึ่งทำให้
 * คีย์บอร์ดเข้าไม่ถึงและ screen reader ไม่เห็น) */
.rxsu-adm__levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.rxsu-adm__levels-legend {
    /* ซ่อนจากสายตาแต่ยังถูกอ่าน — ป้ายของกลุ่มที่ปุ่มสองใบบอกอยู่แล้วด้วยตัวมันเอง */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── ซ่อนอย่างไรจึงยังเป็นปุ่มจริง ──────────────────────────────────────────
 * สูตรเดียวกับ legend ข้างบน (clip-path) ไม่ใช่ `opacity: 0` + `pointer-events: none`
 * ที่เขียนไว้รอบแรก · ตัวที่โปร่งใสและกดไม่ได้ถูกเบราว์เซอร์ตัดออกจาก accessibility tree
 * (วัดแล้วจริงด้วยการอ่านผังของหน้า: radio ทั้งสองใบหายไปทั้งคู่) แปลว่าผู้ใช้ screen
 * reader จะไม่มีทางรู้ว่ามีตัวเลือกอยู่ · `display: none` ก็ตัดออกเหมือนกัน — สูตรที่
 * ถูกคือ "เล็กจนมองไม่เห็นแต่ยังอยู่ในหน้า" */
.rxsu-adm__level-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rxsu-adm__level-tab {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 0.75rem;
    background: var(--rxsu-adm-surface);
    color: var(--rxsu-adm-ink-soft);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.rxsu-adm__level-tab::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    -webkit-mask: var(--rxsu-adm-icon-cap) center / contain no-repeat;
    mask: var(--rxsu-adm-icon-cap) center / contain no-repeat;
}

.rxsu-adm__level-tab[data-level="graduate"]::before {
    -webkit-mask-image: var(--rxsu-adm-icon-person);
    mask-image: var(--rxsu-adm-icon-person);
}

@media (min-width: 48rem) {
    /* บนจอกว้าง สวิตช์ไม่ควรกว้างเท่าหน้า — ปุ่มยาว 600px อ่านเหมือนแถบเมนู ไม่ใช่
       ตัวเลือกสองใบที่ต้องเทียบกัน · แม่แบบวางไว้กึ่งกลางด้วยเหตุผลเดียวกัน */
    .rxsu-adm__levels {
        max-width: 34rem;
        margin-inline: auto;
    }
}

/* ปุ่มที่เลือกอยู่: พื้นเข้ม ตัวอักษรขาว — อ่านออกว่า "เลือกอยู่" ได้จากน้ำหนักและ
   คอนทราสต์ ไม่ใช่จากเฉดสีอย่างเดียว (ผู้ที่มองสีไม่เห็นยังแยกได้) */
.rxsu-adm__level-input:checked + .rxsu-adm__level-tab {
    border-color: var(--rxsu-adm-primary-deep);
    background: var(--rxsu-adm-primary-deep);
    color: var(--rxsu-adm-surface);
}

.rxsu-adm__level-input:focus-visible + .rxsu-adm__level-tab {
    outline: 2px solid var(--rxsu-adm-primary-deep);
    outline-offset: 2px;
}

/* ── การคัดกรอง ──────────────────────────────────────────────────────────────
 * ตัวเลือกจงใจแคบไว้ที่ **บล็อก** กับ **ชุดของสารบัญ** เท่านั้น ไม่ใช่ `[data-level]`
 * ทุกตัว — ป้ายของปุ่มสวิตช์เองก็มี data-level และการเขียนกว้างกว่านี้จะซ่อนปุ่มที่
 * ผู้ใช้ต้องกดเพื่อกลับมา (ทางตันที่ออกไม่ได้ถ้าไม่ reload) */
.rxsu-adm:has(.rxsu-adm__level-input[value="graduate"]:checked) .rxsu-adm__block[data-level="undergrad"],
.rxsu-adm:has(.rxsu-adm__level-input[value="graduate"]:checked) .rxsu-adm__toc-set[data-level="undergrad"],
.rxsu-adm:has(.rxsu-adm__level-input[value="undergrad"]:checked) .rxsu-adm__block[data-level="graduate"],
.rxsu-adm:has(.rxsu-adm__level-input[value="undergrad"]:checked) .rxsu-adm__toc-set[data-level="graduate"] {
    display: none;
}

/* ── ประกาศเป็นของระดับใครระดับมัน (0.76.0) ──────────────────────────────────
 * ประกาศสอบสัมภาษณ์ ป.ตรี ที่ค้างอยู่ในหน้าของผู้สมัคร ป.โท คือเสียงรบกวนที่ผู้อ่าน
 * ต้องคัดกรองเอง · การ์ดพก `data-level` ของตัวเอง (`both` = สองค่าคั่นช่องว่าง) จึงถาม
 * ด้วย `~=` ข้อเดียวได้ทั้งสองกรณี */
.rxsu-adm:has(.rxsu-adm__level-input[value="graduate"]:checked) .rxsu-adm__notice:not([data-level~="graduate"]),
.rxsu-adm:has(.rxsu-adm__level-input[value="undergrad"]:checked) .rxsu-adm__notice:not([data-level~="undergrad"]) {
    display: none;
}

/* ไม่เหลือการ์ดของระดับนี้เลย = ทั้งบล็อกกับการ์ดทางลัดของมันต้องหายไปด้วย ·
   กล่อง "ประกาศล่าสุด" ที่ว่างเปล่าอ่านได้ว่าหน้าพัง ไม่ใช่ว่า "ยังไม่มีประกาศ" ·
   ต้องถามจาก **ราก** ไม่ใช่จากตัวบล็อก เพราะการ์ดทางลัดอยู่คนละกิ่งของต้นไม้ */
.rxsu-adm:has(.rxsu-adm__level-input[value="graduate"]:checked):not(:has(.rxsu-adm__notice[data-level~="graduate"])) .rxsu-adm__block[id="rxsu-adm-notices"],
.rxsu-adm:has(.rxsu-adm__level-input[value="graduate"]:checked):not(:has(.rxsu-adm__notice[data-level~="graduate"])) .rxsu-adm__toc-card[data-block="notices"],
.rxsu-adm:has(.rxsu-adm__level-input[value="undergrad"]:checked):not(:has(.rxsu-adm__notice[data-level~="undergrad"])) .rxsu-adm__block[id="rxsu-adm-notices"],
.rxsu-adm:has(.rxsu-adm__level-input[value="undergrad"]:checked):not(:has(.rxsu-adm__notice[data-level~="undergrad"])) .rxsu-adm__toc-card[data-block="notices"] {
    display: none;
}

/* ── ลิงก์ลึกต้องพาไปถึงสิ่งที่มันสัญญาไว้ ───────────────────────────────────
 * ใครที่เปิดลิงก์ `…#rxsu-adm-graduate-programs` จากที่อื่นขณะที่สวิตช์ยังอยู่ที่ ป.ตรี
 * ต้องเห็นหลักสูตรที่ลิงก์ชี้ ไม่ใช่หน้าที่ดูเหมือนไม่มีอะไร
 *
 * เปิดเฉพาะ **บล็อกที่ถูกลิงก์** ใบเดียว ไม่ใช่สลับทั้งหน้าไปอีกระดับ — สองเหตุผล:
 *   1. สลับทั้งหน้าแล้วปุ่มที่ไฮไลต์อยู่จะไม่ตรงกับเนื้อหาที่เห็น และ radio ที่ถูกเลือก
 *      จริง ๆ (สิ่งที่ screen reader ประกาศ) ก็ยังเป็นอีกระดับ — ผิดสองชั้น
 *   2. ผู้ใช้จะติดกับ: กดปุ่มที่ไฮไลต์อยู่แล้วไม่มีอะไรเกิดขึ้น เพราะ `:checked` ไม่เปลี่ยน
 * บล็อกที่โผล่มามีป้ายระดับของตัวเองอยู่แล้ว ผู้อ่านจึงรู้เสมอว่ากำลังอ่านของระดับไหน
 *
 * ความเฉพาะเจาะจงต้องสูงกว่ากฎซ่อนข้างบนหนึ่งขั้น จึงเขียนโครงเดียวกันแล้วเติม `:target` */
.rxsu-adm:has(.rxsu-adm__level-input[value="graduate"]:checked) .rxsu-adm__block[data-level="undergrad"]:target,
.rxsu-adm:has(.rxsu-adm__level-input[value="undergrad"]:checked) .rxsu-adm__block[data-level="graduate"]:target {
    display: block;
}

/* ══ บล็อก ════════════════════════════════════════════════════════════════════ */

.rxsu-adm__block {
    margin: 0 0 2.25rem;
    padding: 0;
}

.rxsu-adm__block h2 {
    margin: 0 0 0.75rem;
    color: var(--rxsu-adm-ink);
    font-size: clamp(1.375rem, 2.2vw, 1.65rem);
    /* 1.55 ไม่ใช่ 1.35: หัวข้อไทยที่ตัดสองบรรทัดบนมือถือ วรรณยุกต์บรรทัดล่างชนหางตัว
       บรรทัดบน - ตัวเลขเดียวกับที่ article.css ใช้กับเหตุผลเดียวกัน (0.71.0) */
    line-height: 1.55;
}

/* ── ขีดสั้นเหนือหัวข้อ - ลายเซ็นของหัวข้อทุกหน้าในเว็บนี้ (article.css ใช้กับ
   h2 ของบทความ) · หน้าที่ไม่มีมันอ่านได้ว่าเป็นคนละเว็บ */
.rxsu-adm__block h2::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    margin: 0 0 0.5rem;
    border-radius: 999px;
    background: var(--rxsu-adm-accent);
}

/* ── ป้ายระดับการศึกษา เหนือหัวข้อของบล็อก (0.74.0) ─────────────────────────
 * คำตอบของคำถาม "ส่วนนี้ของ ป.ตรี หรือบัณฑิตศึกษา" ที่หัวข้อสองปฏิทินตอบไม่ได้
 * (ต่างกันแค่คำว่า SU-TCAS) · ความหมายอยู่ที่ตัวอักษร สีแค่เสริม */
.rxsu-adm__level {
    margin: 0 0 0.2rem;
    color: var(--rxsu-adm-accent);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.rxsu-adm__block[data-level="undergrad"] {
    --rxsu-adm-accent: var(--rxsu-adm-accent-undergrad);
}

.rxsu-adm__block[data-level="graduate"] {
    --rxsu-adm-accent: var(--rxsu-adm-accent-graduate);
}

.rxsu-adm__block h3 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    line-height: 1.45;
}

.rxsu-adm__block h4 {
    margin: 1rem 0 0.5rem;
    color: var(--rxsu-adm-ink-soft);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
}

.rxsu-adm__intro,
.rxsu-adm__round-summary,
.rxsu-adm__scheme-note {
    margin: 0 0 0.75rem;
    color: var(--rxsu-adm-ink-soft);
}

.rxsu-adm__poster {
    margin: 1.25rem 0 0;
}

.rxsu-adm__poster img {
    max-width: min(100%, 44rem);
    height: auto;
    border-radius: 0.75rem;
}

/* ══ สารบัญ = การ์ดทางลัด ═════════════════════════════════════════════════════
 * แถวการ์ดใต้สวิตช์ ตอบคำถาม "หน้านี้มีอะไรบ้าง" ในสายตาเดียว · โครงเป็นลิสต์ซ้อนลิสต์
 * (กลุ่มระดับ > รายการ) แต่กริดต้องแบนราบ จึงยุบชั้นกลางด้วย `display: contents`
 * ซึ่งไม่ลบความหมายของลิสต์ในเบราว์เซอร์ปัจจุบัน */
.rxsu-adm__toc {
    display: grid;
    /* ── จำนวนคอลัมน์ตามที่ข้อความต้องการ ไม่ใช่ตามที่ผังวาดไว้ (0.82.0) ────────
     * แม่แบบวาดมือถือไว้สองคอลัมน์ ซึ่งถูกสำหรับหัวข้อสั้นอย่าง "รอบการรับสมัคร" ·
     * หัวข้อจริงของหน้านี้คือหัวข้อของ section เต็ม ๆ ("ขั้นตอนการดำเนินการเข้าศึกษา
     * ต่อในระดับบัณฑิตศึกษา") · วัดที่ 375px แบบสองคอลัมน์: ช่องข้อความเหลือ 77px
     * หัวข้อนั้นตกลงไป **แปดบรรทัด** · ให้ความกว้างขั้นต่ำเป็นคนตัดสินจำนวนคอลัมน์แทน
     * — 375px ได้คอลัมน์เดียว ราว 600px ขึ้นไปได้สองคอลัมน์เองโดยไม่ต้องเขียน breakpoint */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    /* ระยะระหว่างการ์ด (1rem) ต้องไม่น้อยกว่าระยะข้างในการ์ด (1rem) — ถ้าน้อยกว่า สายตา
       อ่านทั้งแถวเป็นแถบเดียวที่มีเส้นคั่น ไม่ใช่การ์ดหลายใบที่กดได้ทีละใบ · เดิม 0.75rem
       ซึ่งแคบกว่าระยะข้างใน */
    gap: 1rem;
    margin: 0 0 2rem;
}

.rxsu-adm__toc > ul,
.rxsu-adm__toc-set,
.rxsu-adm__toc-set > ul {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rxsu-adm__toc-label {
    grid-column: 1 / -1;
    color: var(--rxsu-adm-ink-soft);
    font-size: 0.8125rem;
    font-weight: 650;
}

.rxsu-adm__toc-card {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── การ์ดทางลัดคือป้ายบอกทาง ไม่ใช่การ์ดเนื้อหา (0.82.0) ────────────────────
 * เดิมเป็นกล่องสามแถว (ไอคอน / หัวข้อยืดได้ / ลูกศรก้นกล่อง) ซึ่งบังคับให้ทุกใบสูงเท่า
 * ใบที่หัวข้อยาวสุด · ผลคือใบที่หัวข้อบรรทัดเดียวมีที่ว่างกลางใบเกือบครึ่ง และแถวทั้งแถว
 * กินความสูงจอไปโดยไม่ได้บอกอะไรเพิ่ม
 *
 * แถวเดียว (ไอคอน · หัวข้อ · ลูกศร) ตอบคำถาม "หน้านี้มีอะไรบ้าง" ได้เท่าเดิมด้วยความสูง
 * ไม่ถึงครึ่ง · หัวข้อสองบรรทัดยังขึ้นบรรทัดที่สองได้ตามปกติ การ์ดแค่สูงขึ้นตามเนื้อของมันเอง
 * และไม่ลากใบอื่นขึ้นตาม เพราะไม่มี `height: 100%` ให้ยืดอีกแล้ว */
.rxsu-adm__toc-card a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    /* `height: 100%` ปลอดภัยแล้วเพราะทั้งกิ่งเป็น border-box — การ์ดในแถวเดียวกันจึงสูง
       เท่ากันโดยไม่ล้นแถวเหมือนก่อน · แถวสูงเท่าใบที่หัวข้อยาวสุดเท่านั้น ซึ่งตอนนี้เตี้ยกว่า
       เดิมมากเพราะไอคอนกับลูกศรไม่กินแถวของตัวเองอีกแล้ว */
    height: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 0.75rem;
    background: var(--rxsu-adm-surface);
    color: var(--rxsu-adm-ink);
    /* 0.9375rem: หัวข้อในการ์ดเป็น **ป้ายบอกทาง** ไม่ใช่เนื้อความ · ขนาดเท่าเนื้อความทำให้
       แถบนำทางแข่งน้ำหนักกับหัวข้อจริงที่อยู่ถัดลงไปไม่กี่ร้อยพิกเซล */
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.5;
    text-decoration: none;
}

.rxsu-adm__toc-card a::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--rxsu-adm-primary);
    -webkit-mask: var(--rxsu-adm-icon-document) center / contain no-repeat;
    mask: var(--rxsu-adm-icon-document) center / contain no-repeat;
}

.rxsu-adm__toc-card a::after {
    /* ลูกศรของการ์ด — บอกว่ากดแล้วไปต่อ โดยไม่เพิ่มข้อความให้ screen reader อ่านซ้ำ ·
       อยู่ท้ายบรรทัดเดียวกับหัวข้อ จึงไม่ต้องมีที่ว่างกลางใบไว้ดันมันลงไปก้นกล่อง */
    content: "";
    flex: none;
    width: 1.1rem;
    height: 0.8rem;
    background: var(--rxsu-adm-primary);
    -webkit-mask: var(--rxsu-adm-icon-arrow) center / contain no-repeat;
    mask: var(--rxsu-adm-icon-arrow) center / contain no-repeat;
}

.rxsu-adm__toc-card a:hover {
    border-color: var(--rxsu-adm-primary);
}

.rxsu-adm__toc-card[data-block="notices"] a::before {
    -webkit-mask-image: var(--rxsu-adm-icon-megaphone);
    mask-image: var(--rxsu-adm-icon-megaphone);
}

.rxsu-adm__toc-card[data-block="undergrad-calendar"] a::before,
.rxsu-adm__toc-card[data-block="graduate-calendar"] a::before {
    -webkit-mask-image: var(--rxsu-adm-icon-calendar);
    mask-image: var(--rxsu-adm-icon-calendar);
}

.rxsu-adm__toc-card[data-block="undergrad-programs"] a::before,
.rxsu-adm__toc-card[data-block="graduate-programs"] a::before {
    -webkit-mask-image: var(--rxsu-adm-icon-book);
    mask-image: var(--rxsu-adm-icon-book);
}

.rxsu-adm__toc-card[data-block="graduate-steps"] a::before {
    -webkit-mask-image: var(--rxsu-adm-icon-steps);
    mask-image: var(--rxsu-adm-icon-steps);
}

.rxsu-adm__toc-card[data-block="graduate-contact"] a::before {
    -webkit-mask-image: var(--rxsu-adm-icon-phone);
    mask-image: var(--rxsu-adm-icon-phone);
}

.rxsu-adm__toc-card[data-block="program-costs"] a::before {
    -webkit-mask-image: var(--rxsu-adm-icon-costs);
    mask-image: var(--rxsu-adm-icon-costs);
}

/* ══ กล่องนำของปฏิทิน ═════════════════════════════════════════════════════════
 * คำนำ + ปุ่มไปยังระบบรับสมัคร · พื้นเขียวอ่อนกับเส้นเน้นซ้ายทำให้อ่านออกว่าเป็น
 * "ทางเข้า" ของบล็อกนี้ ไม่ใช่ย่อหน้าธรรมดาที่มีลิงก์ */
.rxsu-adm__lead {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--rxsu-adm-accent);
    border-radius: 0 0.75rem 0.75rem 0;
    background: var(--rxsu-adm-canvas);
}

.rxsu-adm__lead .rxsu-adm__intro {
    margin: 0;
    color: var(--rxsu-adm-ink);
}

.rxsu-adm__source {
    margin: 0;
}

/* ปุ่มหลักของหน้า — ปลายทางคือระบบรับสมัครจริง จึงต้องเด่นกว่าลิงก์ในเนื้อความ */
.rxsu-adm__lead .rxsu-adm__source a {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 0.6rem;
    background: var(--rxsu-adm-primary-deep);
    color: var(--rxsu-adm-surface);
    font-weight: 700;
    text-decoration: none;
}

.rxsu-adm__lead .rxsu-adm__source a:hover {
    background: var(--rxsu-adm-primary);
}

/* ══ รอบการรับสมัคร ═══════════════════════════════════════════════════════════
 * การ์ดหนึ่งใบต่อหนึ่งรอบ เรียงเป็นคอลัมน์ที่ยุบเองตามที่ว่าง (3 → 2 → 1) ·
 * `auto-fit` แทนตัวเลขตายตัว เพราะหน้านี้อยู่ในคอลัมน์ของธีมที่กว้างไม่เท่ากันทุกหน้า */
.rxsu-adm__rounds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--rxsu-adm-gap);
    align-items: start;
}

.rxsu-adm__round {
    /* ผูกขนาดข้อความข้างในกับความกว้างของการ์ดใบนี้ ไม่ใช่ความกว้างจอ (§8.3) */
    container-type: inline-size;
    container-name: rxsu-adm-round;
    margin: 0;
    padding: 1rem 1.125rem;
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 0.75rem;
    background: var(--rxsu-adm-surface);
}

.rxsu-adm__round h3 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--rxsu-adm-rule);
    color: var(--rxsu-adm-accent);
}

.rxsu-adm__round h3::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    -webkit-mask: var(--rxsu-adm-icon-calendar) center / contain no-repeat;
    mask: var(--rxsu-adm-icon-calendar) center / contain no-repeat;
}

/* ── ตารางของรอบ: แถว ไม่ใช่การ์ดสี่ใบต่อแถว ─────────────────────────────────
 * วันที่เป็นชิปซ้าย กิจกรรมอยู่ขวา — สายตากวาดคอลัมน์วันที่ลงมาได้ตรง ๆ ซึ่งเป็นสิ่งที่
 * คนอ่านปฏิทินรับสมัครทำจริง · **ไม่มี display:none ที่ breakpoint ไหนเลย** ทุกข้อมูล
 * ปรากฏครบทั้งสามขนาด */
.rxsu-adm__cal {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rxsu-adm__cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    margin: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--rxsu-adm-rule);
}

.rxsu-adm__cal > .rxsu-adm__cell:first-child {
    border-top: 0;
    padding-top: 0;
}

.rxsu-adm__cell > * {
    grid-column: 2;
    margin: 0;
}

.rxsu-adm__cell > * + * {
    margin-top: 0.2rem;
}

/* ── วันที่ห้ามตกบรรทัดเด็ดขาด (§8.3) ────────────────────────────────────────
 * `4.6cqi` วัดจากข้อความที่ยาวที่สุดที่เป็นไปได้ (`8 ธ.ค. 68 - 7 ม.ค. 69` = 21 ตัวอักษร)
 * ที่ความกว้างการ์ดรอบแคบสุด · **ค่านี้ต้องวัดในเบราว์เซอร์จริง ไม่ใช่เชื่อว่าถูก** —
 * เทสต์ผ่านทั้งชุดไม่ใช่หลักฐานว่าหน้าจริงถูก (0.25.14 และ 0.25.16 ผ่านเทสต์แล้วยังส่ง
 * บั๊กขึ้นเว็บ) · `tabular-nums` ทำให้ตัวเลขกว้างเท่ากัน คอลัมน์จึงไม่กระตุกเวลาเลื่อน */
.rxsu-adm__date {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    padding: 0.15rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--rxsu-adm-canvas);
    color: var(--rxsu-adm-ink);
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: clamp(0.8125rem, 4.6cqi, 0.9375rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

@supports not (container-type: inline-size) {
    /* ทางถอยที่ยังอ่านได้ ไม่ใช่หน้าพัง — `cqi` ที่ไม่มี container ตีความเป็น viewport
       ซึ่งจะทำให้วันที่บนมือถือใหญ่จนล้นการ์ด */
    .rxsu-adm__date {
        font-size: 0.875rem;
    }
}

/* การ์ดแคบกว่า 23rem (มือถือ 375px ได้การ์ด ~335px) — ชิปวันที่ขึ้นบรรทัดของตัวเอง ·
   วัดจากของจริง: ที่ 335px ชิปกินไป 93px เหลือ 192px ให้ข้อความ ซึ่งกิจกรรมยาว ๆ อย่าง
   "ผู้มีสิทธิ์เข้าศึกษาขึ้นทะเบียน…" ตกลงไปห้าบรรทัด · เต็มความกว้างเหลือสามบรรทัด */
@container rxsu-adm-round (max-width: 23rem) {
    .rxsu-adm__cell {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ต้องย้าย **ลูกทุกตัว** กลับมาคอลัมน์ 1 ไม่ใช่แค่ชิปวันที่ · ลูกที่ยังถูกสั่งให้อยู่
       คอลัมน์ 2 จะสร้างคอลัมน์โดยปริยายขึ้นมาใหม่ แล้วการ์ดก็ยังเป็นสองคอลัมน์เหมือนเดิม
       ทั้งที่ `grid-template-columns` ประกาศไว้คอลัมน์เดียว — วัดในเบราว์เซอร์จริงถึงเห็น
       (คำนวณจากซอร์สอย่างเดียวจะสรุปว่าถูกแล้ว) */
    .rxsu-adm__cell > * {
        grid-column: 1;
    }

    .rxsu-adm__date {
        grid-row: auto;
        justify-self: start;
        margin-bottom: 0.25rem;
    }
}

.rxsu-adm__activity {
    line-height: 1.55;
}

/* ══ ประกาศล่าสุด ═════════════════════════════════════════════════════════════ */
.rxsu-adm__notices {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0.25rem 1.125rem;
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 0.75rem;
    background: var(--rxsu-adm-surface);
    list-style: none;
}

.rxsu-adm__notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
    margin: 0;
    padding: 0.875rem 0;
    border-top: 1px solid var(--rxsu-adm-rule);
}

.rxsu-adm__notices > .rxsu-adm__notice:first-child {
    border-top: 0;
}

.rxsu-adm__notice::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    background: var(--rxsu-adm-sage);
    -webkit-mask: var(--rxsu-adm-icon-megaphone) center / contain no-repeat;
    mask: var(--rxsu-adm-icon-megaphone) center / contain no-repeat;
}

.rxsu-adm__notice > * {
    grid-column: 2;
    margin: 0;
}

.rxsu-adm__notice > * + * {
    margin-top: 0.25rem;
}

.rxsu-adm__notice-title {
    line-height: 1.55;
}

@media (min-width: 48rem) {
    .rxsu-adm__notice {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .rxsu-adm__notice-date {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        margin: 0 0 0 1rem;
    }
}

.rxsu-adm__notice-date {
    color: var(--rxsu-adm-ink-soft);
    white-space: nowrap;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

/* ══ หลักสูตร · เอกสาร · ขั้นตอน · ค่าใช้จ่าย ══════════════════════════════════ */
.rxsu-adm__programs,
.rxsu-adm__documents,
.rxsu-adm__costs,
.rxsu-adm__steps {
    display: grid;
    gap: var(--rxsu-adm-gap);
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.rxsu-adm__programs,
.rxsu-adm__costs {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.rxsu-adm__documents,
.rxsu-adm__steps {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.rxsu-adm__program,
.rxsu-adm__document,
.rxsu-adm__cost,
.rxsu-adm__step {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    margin: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 0.75rem;
    background: var(--rxsu-adm-surface);
}

.rxsu-adm__program > *,
.rxsu-adm__document > *,
.rxsu-adm__cost > *,
.rxsu-adm__step > * {
    margin: 0;
}

/* ไอคอนของการ์ดเป็น **ชั้นเดียว** ไม่ใช่วงกลมซ้อนสัญลักษณ์: การซ้อนสองชั้นต้องใช้
   ::after ที่ position: absolute ซึ่งต้องมีบรรพบุรุษที่ positioned — ข้อผูกมัดที่มองไม่เห็น
   และพังเงียบเมื่อธีมเปลี่ยน · หนึ่ง mask หนึ่งสี ทำงานถูกทุกที่ */
.rxsu-adm__program::before,
.rxsu-adm__document::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background: var(--rxsu-adm-accent);
    -webkit-mask: var(--rxsu-adm-icon-book) center / contain no-repeat;
    mask: var(--rxsu-adm-icon-book) center / contain no-repeat;
}

.rxsu-adm__document::before {
    -webkit-mask-image: var(--rxsu-adm-icon-document);
    mask-image: var(--rxsu-adm-icon-document);
}

.rxsu-adm__program-name,
.rxsu-adm__step-text,
.rxsu-adm__cost-label {
    font-weight: 700;
    line-height: 1.55;
}

/* ขั้นตอนมีลำดับจริง ตัวเลขจึงมาจาก counter ของ `<ol>` ไม่ใช่ข้อความที่พิมพ์ไว้ —
   ผู้ดูแลที่ซ่อนขั้นตอนกลางทิ้งได้เลขที่เรียงต่อกันเสมอ ไม่ใช่ 1, 3, 4 */
.rxsu-adm__steps {
    counter-reset: rxsu-adm-step;
}

.rxsu-adm__step {
    counter-increment: rxsu-adm-step;
}

.rxsu-adm__step::before {
    content: counter(rxsu-adm-step);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--rxsu-adm-accent);
    color: var(--rxsu-adm-surface);
    font-size: 0.875rem;
    font-weight: 700;
}

.rxsu-adm__cost-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ── ข้อความประกอบทุกชนิดใช้กฎเดียวกัน ──
 * `__contact-body` ตกหล่นจากรายการนี้ตอนแรก (เจอด้วย tests/admission-page-css.js ที่ดึง
 * ชื่อคลาสจากภาพถ่ายทองคำสด ๆ) · ผลคือคำอธิบายใต้ชื่อหน่วยงานติดต่อออกมาเป็นข้อความสีเข้ม
 * ขนาดเต็มบรรทัดเดียวกับเนื้อหาหลัก แข่งความเด่นกับชื่อหน่วยงานที่มันควรอธิบาย */
.rxsu-adm__note,
.rxsu-adm__program-note,
.rxsu-adm__cost-note,
.rxsu-adm__notice-badge,
.rxsu-adm__notice-body,
.rxsu-adm__contact-body {
    color: var(--rxsu-adm-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ══ ติดต่อสอบถาม ═════════════════════════════════════════════════════════════ */
.rxsu-adm__contact,
.rxsu-adm__group,
.rxsu-adm__scheme {
    margin: 0 0 1.5rem;
}

.rxsu-adm__contact {
    padding: 1rem 1.125rem;
    border: 1px solid var(--rxsu-adm-rule);
    border-radius: 0.75rem;
    background: var(--rxsu-adm-surface);
}

.rxsu-adm__contact-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.rxsu-adm__contact-line {
    margin: 0;
}

@media (min-width: 48rem) {
    .rxsu-adm__block[id="rxsu-adm-graduate-contact"] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        gap: var(--rxsu-adm-gap);
        align-items: start;
    }

    .rxsu-adm__block[id="rxsu-adm-graduate-contact"] .rxsu-adm__level,
    .rxsu-adm__block[id="rxsu-adm-graduate-contact"] h2 {
        grid-column: 1 / -1;
    }

    .rxsu-adm__contact {
        margin: 0;
    }
}

/* ══ ลิงก์ ════════════════════════════════════════════════════════════════════ */
.rxsu-adm__link a,
.rxsu-adm__source a,
.rxsu-adm__notice-title a,
.rxsu-adm__contact-line a,
.rxsu-adm__program-name a {
    color: var(--rxsu-adm-primary);
    /* ขีดเส้นใต้ไว้เสมอ: ลิงก์ที่แยกจากข้อความธรรมดาด้วย **สีอย่างเดียว** อ่านไม่ออกสำหรับ
       คนที่มองสีไม่เห็น ซึ่งเป็นกฎเดียวกับ §8.4 แค่คนละที่ */
    text-decoration: underline;
    /* 0.22em ไม่ใช่ 0.15em: ตำแหน่งที่ต่ำพอจะพ้นสระ ุ ู ของไทย - ตัวเลขเดียวกับ
       article.css ด้วยเหตุผลเดียวกัน (ผู้อ่านที่แยก อุ/อู ไม่ออกกำลังอ่านคนละคำ) */
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: all;
}

.rxsu-adm__link {
    font-size: 0.9375rem;
}

/* ── โฟกัสต้องมองเห็นได้ทุกจุด (§8.5) ──
 * ห้ามลบ outline ทิ้งเฉย ๆ · ที่นี่แค่ทำให้มันเห็นชัดกว่าค่าตั้งต้นของธีมบางตัว */
.rxsu-adm__block a:focus-visible,
.rxsu-adm__toc a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rxsu-adm__block *,
    .rxsu-adm__toc * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ══ จอกว้าง ══════════════════════════════════════════════════════════════════
 * แม่แบบกำหนดสามช่วง: มือถือ ≤767 · แท็บเล็ต 768–1199 · เดสก์ท็อป ≥1200 ·
 * การ์ดทางลัดเป็น 2 คอลัมน์บนมือถือและแท็บเล็ต แล้วเป็น 4 บนเดสก์ท็อป ตามผังของแม่แบบ */
@media (min-width: 48rem) {
    /* `auto-fit` ไม่ใช่จำนวนคอลัมน์ตายตัว: การ์ดที่ถูกสวิตช์คัดออกไม่ทิ้งช่องว่างค้างไว้
       ทางขวา — จำนวนการ์ดที่เห็นจริงเปลี่ยนตามระดับที่เลือก ผังที่ตรึงเป็น 4 ช่องจึงว่าง
       สองช่องทุกครั้งที่ระดับหนึ่งมีบล็อกน้อยกว่าอีกระดับ */
    .rxsu-adm__toc {
        /* 15rem ไม่ใช่ 16rem: การ์ดเตี้ยลงแล้วหัวข้อยาวยังอ่านออกที่ความกว้างนี้ และที่
           คอนเทนเนอร์ 1250px มันให้ห้าคอลัมน์พอดี — แท็บบัณฑิตศึกษามีห้าการ์ด จึงลงแถว
           เดียวแทนที่จะเหลือใบเดียวห้อยอยู่แถวล่าง */
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

/* ══ การพิมพ์ (§8.6) ══════════════════════════════════════════════════════════
 * ปฏิทินรับสมัครเป็นเอกสารที่คนพิมพ์ออกมาติดบอร์ดจริง · บนกระดาษไม่มีใครกดสวิตช์ได้
 * **ทุกระดับจึงต้องกลับมาแสดงครบ** ไม่ใช่พิมพ์ออกมาได้ครึ่งหน้า · พิมพ์ที่อยู่ของลิงก์
 * ต่อท้ายข้อความ เพราะลิงก์บนกระดาษที่ไม่บอกปลายทางคือข้อความที่หายไปครึ่งหนึ่ง */
@media print {
    .rxsu-adm__toc,
    .rxsu-adm__levels,
    .rxsu-adm__preview-notice {
        display: none;
    }

    .rxsu-adm .rxsu-adm__block[data-level] {
        display: block;
    }

    /* การ์ดประกาศของทุกระดับกลับมาด้วย — เหตุผลเดียวกับบล็อก: บนกระดาษไม่มีสวิตช์ */
    .rxsu-adm .rxsu-adm__notice[data-level] {
        display: grid;
    }

    .rxsu-adm__rounds,
    .rxsu-adm__programs,
    .rxsu-adm__documents,
    .rxsu-adm__costs,
    .rxsu-adm__steps {
        grid-template-columns: 1fr;
    }

    .rxsu-adm__round,
    .rxsu-adm__notice,
    .rxsu-adm__program,
    .rxsu-adm__document,
    .rxsu-adm__cost,
    .rxsu-adm__step,
    .rxsu-adm__contact {
        break-inside: avoid;
        border: 1px solid var(--rxsu-adm-print-rule);
        background: transparent;
    }

    .rxsu-adm__block a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        overflow-wrap: anywhere;
    }
}