/* ═══════════════════════════════════════════════════════════════════════════
   css/tb1-subnav.css — เมนูแยกทุกหน้า หน้าตาชุดเดียว และติดจอ · 3 พ.ย. 2569
   ครูหนึ่ง: "ทุกหน้าที่มีเมนูแยก ใช้ theme เหมือนภาพแนบ เป็นแบบ sticky"
   ภาพแนบ = แถบไปยังส่วนต่าง ๆ ของหน้าหลักของฉัน (.md-section-nav ใน css/tb1-mydesk.css)
     กล่องมุมโค้ง 14px เส้นขอบบาง พื้นกระจก · ลิงก์ ไอคอนสีแบรนด์ + ข้อความ · ลิงก์ที่อยู่ = พื้นไล่สีน้ำเงิน ตัวขาว
   includes/nvabar.php โหลดไฟล์นี้และ js/tb1-subnav.js ให้ทุกหน้าที่มีแถบเมนูของเว็บ

   เมนูที่ครอบ (ดูรายการเต็มใน js/tb1-subnav.js)
     ก แถบไปยังหัวข้อในหน้า: ax-nav (หน้ารายงานวิเคราะห์) bd-subnav ca-nav ct-subnav cst-jump cb-jump hi-subnav ip-subnav
        pd-nav pr-nav rs-nav sp-nav sq-nav en-nav ts-nav ax-jump (แดชบอร์ดผู้ดูแล)
     ข เมนูไปหน้าอื่น: mnav (เมนูของโมดูล ลงเวลา ลา ไปราชการ คำสั่ง ห้องบัญชาการ เช็คชื่อ สมุดคะแนน) · tp-tabs (แฟ้มบุคลากร)
        · tb1-ctx (หน้าอื่นในหมวดเดียวกัน ใต้แถบเมนู)
   ไม่ครอบ: ปุ่มกรอง/แท็บในแผง (fbq-tabs oad-tabs spa-tabs ...) เพราะเป็นตัวกรองไม่ใช่เมนู · cpl-jump (อยู่ในกล่องเลือกแผน)

   ★ เขียนทับสไตล์เดิมของแต่ละหน้าด้วย !important เฉพาะคุณสมบัติที่ทำให้หน้าตาต่างกัน (พื้น ขอบ มุม ระยะ สี ตำแหน่งติดจอ)
     ตำแหน่งและระยะห่างจากเนื้อหารอบ ๆ ของแต่ละหน้าคงเดิม
   ★ คอนทราสต์สูงไม่เขียนทับ (กฎดำ-เหลืองของทั้งเว็บทำงานตามเดิม) · ตอนพิมพ์ไม่ติดจอ
   ยกเลิก: ลบสองบรรทัดที่โหลดไฟล์นี้ใน includes/nvabar.php
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --tb1-sub-top: calc(var(--tb1-nav-h, 64px) + 8px);
}

/* ── กล่องเมนู ───────────────────────────────────────────────────────────── */
@media screen {
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump:not(.cpl-jump), nav.cb-jump,
        nav.hi-subnav, nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump,
        nav.tp-tabs, nav.mnav .mnav-scroll, nav.tb1-ctx .tb1-ctx-tabs) {
        --sub-paper: var(--tb1-surface, #ffffff);
        --sub-line: var(--tb1-border, #e2e8f0);
        --sub-ink: var(--tb1-ink-1, #0f172a);
        --sub-brand: var(--tb1-brand, #1d4ed8);
        --sub-on: #ffffff;
        --sub-tint: color-mix(in srgb, var(--sub-brand) 10%, var(--sub-paper));
        --sub-pill: linear-gradient(120deg, var(--sub-brand), color-mix(in srgb, var(--sub-brand) 62%, #7c3aed));

        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
        max-width: 100%;
        padding: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        color: var(--sub-ink) !important;
        background: color-mix(in srgb, var(--sub-paper) 86%, transparent) !important;
        border: 1px solid var(--sub-line) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        backdrop-filter: blur(14px) saturate(1.3);
        font-family: var(--tb1-font-body, "Sarabun", system-ui, sans-serif);
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav,
        nav.cst-jump:not(.cpl-jump), nav.cb-jump, nav.hi-subnav, nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav,
        nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav .mnav-scroll, nav.tb1-ctx .tb1-ctx-tabs) {
        --sub-paper: var(--tb1-surface, #0f1b33);
        --sub-line: color-mix(in srgb, #94a3b8 22%, transparent);
        --sub-ink: var(--tb1-ink-1, #e2e8f0);
        --sub-brand: #60a5fa;
        --sub-on: #0b1220;
    }

    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump:not(.cpl-jump), nav.cb-jump,
        nav.hi-subnav, nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump,
        nav.tp-tabs, nav.mnav .mnav-scroll, nav.tb1-ctx .tb1-ctx-tabs)::-webkit-scrollbar {
        display: none;
    }

    /* แถบไปยังหัวข้อในหน้า และแฟ้มบุคลากร: ติดจอใต้แถบเมนูของเว็บ (เมนูของโมดูลและแถวลิงก์ใต้เมนู: สคริปต์ดูแล ดูท้ายไฟล์) */
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump:not(.cpl-jump), nav.cb-jump,
        nav.hi-subnav, nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs) {
        position: sticky !important;
        top: var(--tb1-sub-top) !important;
        z-index: 30 !important;
        transition: box-shadow .3s ease, border-color .3s ease;
    }

    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav, nav.tb1-ctx).is-stuck
        :is(.mnav-scroll, .tb1-ctx-tabs),
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs).is-stuck {
        border-color: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 35%, var(--tb1-border, #e2e8f0)) !important;
        box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .55) !important;
    }

    /* รายการข้างใน (ul / div) เรียงเป็นแถวเดียว ไม่มีพื้น ไม่มีขอบของตัวเอง */
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.ca-nav, nav.cst-jump, nav.cb-jump, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav,
        nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav, nav.tb1-ctx) :is(ul:not(.mnav-sub), .sq-nav-in) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 0 auto;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        list-style: none !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.ca-nav, nav.cst-jump, nav.cb-jump, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav,
        nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav, nav.tb1-ctx) li:not(.mnav-sep) {
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* ป้ายหน้าแถบ (ระดับชั้น / ไปที่ตาราง) */
    html:not(.tb1-contrast-high) body :is(.cst-jump-k, .cb-jump-k) {
        flex: none;
        margin: 0 4px 0 8px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--tb1-ink-3, #5a697f) !important;
        white-space: nowrap;
    }

    /* ── ลิงก์ ─────────────────────────────────────────────────────────────── */
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump:not(.cpl-jump), nav.cb-jump,
        nav.hi-subnav, nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump,
        nav.tp-tabs, nav.mnav, nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link) {
        position: relative;
        z-index: 1;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        flex: none !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 8px 13px !important;
        color: var(--tb1-ink-1, #0f172a) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        transition: color .3s ease, background-color .2s ease !important;
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav,
        nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav, nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav,
        nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav, nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link) {
        color: #e2e8f0 !important;
    }

    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav,
        nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link) :is(i, svg) {
        color: var(--sub-brand, #1d4ed8) !important;
        transition: color .3s ease, transform .3s ease;
    }

    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav,
        nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link):hover {
        color: var(--sub-brand, #1d4ed8) !important;
        background: var(--sub-tint) !important;
    }

    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav,
        nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link):focus-visible {
        outline: 2px solid var(--sub-brand, #1d4ed8) !important;
        outline-offset: -2px !important;
    }

    /* ลิงก์ของส่วน/หน้าที่อยู่: พื้นไล่สี (มีแถบสีเลื่อนตาม .tb1-sub-ink เมื่อสคริปต์ทำงาน พื้นของลิงก์จึงใสแทน) */
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav,
        nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link):is([aria-current], .is-on, .is-active, .is-current, .active) {
        color: var(--sub-on, #ffffff) !important;
        background: var(--sub-pill) !important;
    }

    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav,
        nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link):is([aria-current], .is-on, .is-active, .is-current, .active) :is(i, svg, span, b) {
        color: inherit !important;
    }

    /* ความเจาะจงต้องสูงกว่ากฎพื้นไล่สีด้านบน (กล่องของแถวลิงก์ใต้เมนูเป็นตัวเลือกสองชั้น) จึงซ้ำชื่อคลาส */
    html:not(.tb1-contrast-high) body .has-sub-ink.has-sub-ink.has-sub-ink :is(a:not(.mnav-sublink), summary.mnav-link):is([aria-current], .is-on, .is-active, .is-current, .active) {
        background: transparent !important;
    }

    html:not(.tb1-contrast-high) body .has-sub-ink.has-sub-ink.has-sub-ink :is(a:not(.mnav-sublink), summary.mnav-link):is([aria-current], .is-on, .is-active, .is-current, .active) :is(i, svg) {
        transform: scale(1.1);
    }

    /* ตัวเลขในลิงก์ (งานค้าง จำนวน) ไม่ถูกเขียนทับรูปทรง แค่ให้อ่านได้บนพื้นสีของลิงก์ที่อยู่ */
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.ca-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.ts-nav, nav.ax-jump) :is(a:not(.mnav-sublink), summary.mnav-link):is([aria-current], .is-on) :is(.ax-nav-n, .ca-nav-n, .pr-nav-n, .rs-nav-n, .sp-nav-n, .ts-nav-n, .ax-jump-n) {
        color: var(--sub-brand, #1d4ed8) !important;
        background: #ffffff !important;
    }

    /* แถบสีของรายการที่อยู่ (js/tb1-subnav.js ตั้งความกว้างและตำแหน่ง) */
    .tb1-sub-ink {
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 0;
        z-index: 0;
        width: 0;
        background: var(--sub-pill, linear-gradient(120deg, #1d4ed8, #6d28d9));
        border-radius: 10px;
        opacity: 0;
        pointer-events: none;
        transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
    }

    .has-sub-ink > .tb1-sub-ink {
        opacity: 1;
    }

    /* แดชบอร์ดผู้ดูแล: แถบเดิมมีแถบสีของตัวเอง (.ax-jump-ink) ให้รูปทรงตรงกับชุดนี้ */
    html:not(.tb1-contrast-high) body nav.ax-jump .ax-jump-ink {
        border-radius: 10px !important;
        background: var(--sub-pill) !important;
    }

    html:not(.tb1-contrast-high) body nav.ax-jump.has-ink a[aria-current] {
        background: transparent !important;
    }

    /* เมนูของโมดูล: กล่องเมนูอยู่ที่ .mnav-scroll (กันขอบจางตอนเลื่อนข้างของเดิมไว้) · เส้นคั่นกลุ่มสีจาง */
    html:not(.tb1-contrast-high) body nav.mnav {
        position: relative;
        z-index: 30;
    }

    /* ★ ไม่ใช้พื้นกระจก (backdrop-filter) ที่กล่องนี้: backdrop-filter ทำให้กล่องเป็นที่อิงของกล่องรายการย่อย (ถูกตัดตามกล่องที่เลื่อนข้าง)
         และเป็นชั้นซ้อนที่บังแถบสีของตัวเมนู · navigator.php ปิดไว้บนจอแคบด้วยเหตุเดียวกัน · ใช้พื้นทึบเกือบเต็มแทน */
    html:not(.tb1-contrast-high) body nav.mnav .mnav-scroll {
        display: block !important;
        background: color-mix(in srgb, var(--sub-paper, #ffffff) 96%, transparent) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* สีของแถบสี (อยู่ที่ตัวเมนู ไม่ได้อยู่ใน .mnav-scroll ที่ตั้งสีไว้) */
    html:not(.tb1-contrast-high) body nav.mnav {
        --sub-brand: var(--tb1-brand, #1d4ed8);
        --sub-pill: linear-gradient(120deg, var(--sub-brand), color-mix(in srgb, var(--sub-brand) 62%, #7c3aed));
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav {
        --sub-brand: #60a5fa;
    }

    /* ★ เมนูแบบมีกลุ่ม: กล่องรายการย่อยต้องโผล่พ้นกล่องเมนูได้ (attendance/includes/navigator.php ตั้ง overflow: visible
         บนจอ ≥ 1024 px และบนจอแคบให้กล่องรายการย่อยอิงตัวเมนู ไม่ใช่กล่องที่เลื่อนข้าง) จึงไม่ตัดล้นและไม่ตั้ง position ที่ .mnav-scroll
         แถบสีของเมนูนี้อยู่ที่ nav.mnav แทน (js/tb1-subnav.js) */
    @media (min-width: 1024px) {
        html:not(.tb1-contrast-high) body nav.mnav.mnav--grouped .mnav-scroll {
            overflow: visible !important;
        }
    }

    html:not(.tb1-contrast-high) body nav.mnav .mnav-sep::before {
        background: var(--sub-line, #e2e8f0) !important;
    }

    /* แถวลิงก์ใต้เมนู: แถบเต็มจอเดิมโปร่ง เหลือกล่องเมนูตรงกลาง */
    html:not(.tb1-contrast-high) body nav.tb1-ctx {
        background: transparent !important;
        border-bottom: 0 !important;
    }

    html:not(.tb1-contrast-high) body nav.tb1-ctx .tb1-ctx-in {
        padding-top: 10px !important;
        padding-bottom: 4px !important;
    }

    /* ติดจอด้วยสคริปต์ (เมนูที่อยู่ในกล่องเตี้ย เช่น เมนูของโมดูลบนหัวน้ำเงิน): ตรึงไว้ใต้แถบเมนู ที่เดิมมีกล่องว่างแทน */
    /* ความเจาะจงสูงกว่ากฎติดจอด้านบน (0,2,3) จึงชนะทั้งคู่ที่เป็น !important */
    html body nav.tb1-sub-fixed.tb1-sub-fixed.tb1-sub-fixed {
        box-sizing: border-box !important;
        position: fixed !important;
        top: var(--tb1-sub-top) !important;
        z-index: 40 !important;
        margin: 0 !important;
    }

    .tb1-sub-hold {
        display: none;
    }

    .tb1-sub-hold.is-on {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump, nav.cb-jump, nav.hi-subnav,
        nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs, nav.mnav,
        nav.tb1-ctx .tb1-ctx-tabs) :is(a:not(.mnav-sublink), summary.mnav-link) {
        min-height: 44px !important;
        padding: 8px 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb1-sub-ink {
        transition: none;
    }
}

@media print {
    .tb1-sub-fixed {
        position: static !important;
    }

    .tb1-sub-ink,
    .tb1-sub-hold {
        display: none !important;
    }
}

/* ★ เมนูของโมดูลที่มีกลุ่ม (ลาของฉัน / ของฉัน): หน้าที่อยู่ในเมนูย่อย = ปุ่มของกลุ่มเป็นรายการที่อยู่
   (details.mnav-group.is-current ของ attendance/includes/navigator.php) แถบสีอยู่ที่ปุ่มกลุ่ม (js/tb1-subnav.js) */
@media screen {
    html:not(.tb1-contrast-high) body nav.mnav details.mnav-group.is-current > summary.mnav-link {
        color: var(--sub-on, #ffffff) !important;
        background: var(--sub-pill) !important;
    }

    html:not(.tb1-contrast-high) body nav.mnav details.mnav-group.is-current > summary.mnav-link :is(i, svg, span, b) {
        color: inherit !important;
    }

    html:not(.tb1-contrast-high) body .has-sub-ink.has-sub-ink.has-sub-ink details.mnav-group.is-current > summary.mnav-link {
        background: transparent !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ลิงก์ที่ซ้ำกับแถบเมนูของเว็บ · 3 พ.ย. 2569
   ครูหนึ่ง: "ในเมนู หน้าไหน หากมีลิงก์ หน้าหลัก หรือ แดชบอร์ด ออกจากระบบ ตัดออกได้เลยเพราะมีแล้ว
             และ ออกจากระบบ มีในหน้าแรกแล้ว"
   แถบเมนูของเว็บมีปุ่ม "แดชบอร์ด" (.tb1-dash-link ไปหน้าหลักของบทบาท) และ "ออกจากระบบ" (แถบบนสุดบนจอกว้าง
   ท้ายเมนู ☰ บนจอแคบ .tb1-nav-out) ทุกหน้าที่เข้าสู่ระบบแล้ว จึงซ่อน
     - หน้าหลัก และ ออกจากระบบ (กับเส้นคั่นหน้าออกจากระบบ) ในเมนูของโมดูล: ลงเวลา ลา ไปราชการ คำสั่ง
     - ปุ่มกลับแดชบอร์ด/หน้าหลัก และปุ่มออกจากระบบบนหัวของหน้า (แดชบอร์ดผู้ดูแล หน้าหลักของฉัน หน้าของฉัน
       เปลี่ยนรหัสผ่าน ลงข่าว ผู้ใช้งาน ทะเบียนนักเรียน ปฏิทิน O-NET ข้อความหน้าแรก แฟ้มบุคลากร ฯลฯ)
       "กลับแดชบอร์ด" บางหน้าลิงก์ไป login.php (ระบบส่งผู้ที่เข้าแล้วไปแดชบอร์ด) ซ่อนเฉพาะเมื่อมีปุ่มแดชบอร์ดบนแถบ
   ★ ในหน้าต่างแอปที่ติดตั้งไว้ แถบเมนูของเว็บถูกซ่อน (attendance/assets/css/app-return.css) ปุ่มเหล่านี้คือทางเดียว จึงแสดงตามเดิม
   ★ ซ่อนเฉพาะเมื่อแถบเมนูมีปุ่มนั้นจริง (:has) · เบราว์เซอร์ที่ไม่รู้จัก :has = แสดงตามเดิม ไม่มีทางกลับหาย
   ไม่ซ่อน: ลิงก์ไปหน้าอื่นที่ชื่อคล้าย (แดชบอร์ดครูชุมนุม ห้องบัญชาการผู้บริหาร แดชบอร์ดวิเคราะห์ O-NET) ปุ่มยกเลิกของฟอร์ม
   ═══════════════════════════════════════════════════════════════════════════ */
@media not all and (display-mode: standalone) {
    html:not(.tb1-in-app):has(.tb1-dash-link) nav.mnav .mnav-home,
    html:not(.tb1-in-app):has(.tb1-dash-link) :is(a.ad-btn, a.ax-btn, a.btn, a.ar-link, a.cp-btn, a.tf-btn):is([href$="AdminDashboard.php"], [href$="UserDashboard.php"], [href$="studentdashboard.php"], [href="login.php"], [href="/login.php"]) {
        display: none !important;
    }

    html:not(.tb1-in-app):has(.tb1-nav-out) :is(nav.mnav .mnav-out, nav.mnav .mnav-sep:has(+ .mnav-out)),
    html:not(.tb1-in-app):has(.tb1-nav-out) :is(a.ad-btn, a.ud-btn, a.cp-btn, a.sd-act, a.tf-btn):is([href$="logout.php"]) {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   เมนูของโมดูล: รายการที่อยู่อ่านไม่ออก + รายการเกินขอบกล่อง · 3 พ.ย. 2569
   ครูหนึ่ง (ภาพ student_attendance/reports_homeroom.php จอ ~1,485 px): "เมนู ในแถบขาว แสดงผลผิดพลาด"
   เหตุ: แถบสีอยู่ที่ nav.mnav (z-index 0) แต่กล่อง .mnav-scroll ตั้ง position: relative (leave.css / navigator.php)
         และมีพื้นขาว 96% ซึ่งวาดทีหลัง จึงทับแถบสี เหลือตัวอักษรขาว (--sub-on) บนพื้นขาว · เป็นทุกโมดูลที่ใช้ mnav
         · รายการท้ายเกินขอบกล่องโดยไม่มีอะไรบอก และสคริปต์ดึงรายการที่อยู่กลับกลางกล่องทุกครั้งที่เลื่อน
   แก้: js/tb1-subnav.js ย้ายแถบสีเข้าไปในกล่อง .mnav-scroll (เมนูธรรมดา) · เมนูแบบกลุ่มแถบสียังอยู่ที่ nav.mnav
        จึงยกแถบสีขึ้นเหนือพื้นกล่อง (ลิงก์ z-index 1 มาทีหลังในหน้า จึงยังอยู่เหนือแถบสี)
        + ปุ่มลูกศรที่ปลายกล่องด้านที่ยังมีรายการ (.tb1-sub-more · class tb1-sub-more-l / tb1-sub-more-r ที่ nav.mnav)
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen {
    html:not(.tb1-contrast-high) body nav.mnav > .tb1-sub-ink {
        z-index: 1;
        top: 7px;
        bottom: 7px;
    }

    /* ลูกศรแทนขอบจางของเดิม (ขอบจางกลืนพื้นและเส้นขอบของกล่องขาว) · ลิงก์ที่ได้โฟกัสไม่ไปหลบใต้ลูกศร */
    html body nav.mnav.tb1-sub-arrows .mnav-scroll {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        scroll-padding-inline: 48px;
    }

    nav.mnav > .tb1-sub-more {
        display: none;
    }

    html body nav.mnav.tb1-sub-more-l > .tb1-sub-more.is-l,
    html body nav.mnav.tb1-sub-more-r > .tb1-sub-more.is-r {
        position: absolute;
        top: 1px;
        bottom: 1px;
        z-index: 3;
        display: flex;
        align-items: center;
        width: 50px;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0 7px;
        color: var(--tb1-brand, #1d4ed8);
        border: 0;
        box-shadow: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    html body nav.mnav > .tb1-sub-more.is-l {
        left: 1px;
        justify-content: flex-start;
        background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--tb1-surface, #ffffff) 96%, transparent) 46%);
        border-radius: 13px 0 0 13px;
    }

    html body nav.mnav > .tb1-sub-more.is-r {
        right: 1px;
        justify-content: flex-end;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tb1-surface, #ffffff) 96%, transparent) 46%);
        border-radius: 0 13px 13px 0;
    }

    nav.mnav > .tb1-sub-more svg {
        flex: none;
        width: 30px;
        height: 30px;
        padding: 6px;
        color: inherit;
        background: var(--tb1-surface, #ffffff);
        border: 1px solid color-mix(in srgb, var(--tb1-brand, #1d4ed8) 28%, var(--tb1-border, #e2e8f0));
        border-radius: 50%;
        box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .55);
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

    nav.mnav > .tb1-sub-more:hover svg {
        color: #ffffff;
        background: var(--tb1-brand, #1d4ed8);
        transform: scale(1.06);
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav > .tb1-sub-more {
        color: #93c5fd;
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav > .tb1-sub-more.is-l {
        background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--tb1-surface, #0f1b33) 96%, transparent) 46%);
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav > .tb1-sub-more.is-r {
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tb1-surface, #0f1b33) 96%, transparent) 46%);
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav > .tb1-sub-more svg {
        background: var(--tb1-surface, #0f1b33);
        border-color: color-mix(in srgb, #93c5fd 35%, transparent);
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav > .tb1-sub-more:hover svg {
        color: #0b1220;
        background: #93c5fd;
    }

    /* คอนทราสต์สูง: ดำ เหลือง ขาว ตามกล่องเมนู (เส้นขอบกล่อง 2px) */
    html.tb1-contrast-high body nav.mnav > .tb1-sub-more:is(.is-l, .is-r) {
        top: 2px;
        bottom: 2px;
        color: #ffff00;
        background: #000000;
    }

    html.tb1-contrast-high body nav.mnav > .tb1-sub-more.is-l {
        left: 2px;
        border-right: 2px solid #ffffff;
        border-radius: 12px 0 0 12px;
    }

    html.tb1-contrast-high body nav.mnav > .tb1-sub-more.is-r {
        right: 2px;
        border-left: 2px solid #ffffff;
        border-radius: 0 12px 12px 0;
    }

    html.tb1-contrast-high body nav.mnav > .tb1-sub-more svg {
        background: #000000;
        border: 2px solid #ffff00;
        box-shadow: none;
    }

    html.tb1-contrast-high body nav.mnav > .tb1-sub-more:hover svg {
        color: #000000;
        background: #ffff00;
        transform: none;
    }
}

@media screen and (max-width: 600px) {
    html body nav.mnav.tb1-sub-more-l > .tb1-sub-more.is-l,
    html body nav.mnav.tb1-sub-more-r > .tb1-sub-more.is-r {
        width: 42px;
        padding: 0 5px;
    }

    nav.mnav > .tb1-sub-more svg {
        width: 28px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav.mnav > .tb1-sub-more svg {
        transition: none;
    }
}

@media print {
    nav.mnav > .tb1-sub-more {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ครูหนึ่ง 3 พ.ย. 2569: "เมนู เกิน ความกว้าง คอมพิวเตอร์ จะ ใช้งานลำบาก
             และเมนู เมื่อแสดงในมือถือ ควรให้ตำแหน่งชิดบนสุดเมื่อเลื่อน"
   ก จอคอม (≥ 1024 px): หมวดท้ายของเมนูที่ยาวเกินกล่องพับเป็นปุ่มเมนูย่อย ▾ (js/tb1-subnav.js ข้อ 6)
      แบบเดียวกับเมนู "ของฉัน ▾" ของระบบลา/ไปราชการ · ลิงก์เดิมซ่อนไว้ (li.tb1-sub-away) · nav.tb1-sub-folded
   ข จอโทรศัพท์ (< 768 px): เมนูที่ตรึงอยู่ชิดใต้แถบเมนูของเว็บ เต็มความกว้าง ไม่มีช่องให้เนื้อหาโผล่
      เลื่อนลง = แถบเมนูของเว็บหลบขึ้น (html.tb1-bar-away) เมนูนี้ชิดขอบบนสุด · เลื่อนขึ้น = แถบกลับมา (ข้อ 7)
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen {
    nav.mnav li.tb1-sub-away {
        display: none !important;
    }

    html body nav.mnav.tb1-sub-folded .mnav-scroll {
        overflow: visible !important;
    }

    nav.mnav details.tb1-sub-fold {
        position: relative;
    }

    nav.mnav details.tb1-sub-fold > summary {
        list-style: none;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    nav.mnav details.tb1-sub-fold > summary::-webkit-details-marker {
        display: none;
    }

    nav.mnav .tb1-sub-caret {
        flex: none;
        width: 14px;
        height: 14px;
        margin-left: -2px;
        transition: transform .2s ease;
    }

    nav.mnav details.tb1-sub-fold[open] > summary .tb1-sub-caret {
        transform: rotate(180deg);
    }

    html:not(.tb1-contrast-high) body nav.mnav details.tb1-sub-fold[open]:not(.is-current) > summary.mnav-link {
        color: var(--tb1-brand, #1d4ed8) !important;
        background: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 10%, var(--tb1-surface, #ffffff)) !important;
    }

    nav.mnav details.tb1-sub-fold > .mnav-sub {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        z-index: 50;
        display: grid;
        gap: 2px;
        min-width: 240px;
        max-width: calc(100vw - 24px);
        margin: 0;
        padding: 6px;
        overflow-y: auto;
        overscroll-behavior: contain;
        list-style: none;
        background: var(--tb1-surface, #ffffff);
        border: 1px solid var(--tb1-border, #e2e8f0);
        border-radius: 14px;
        box-shadow: 0 24px 48px -22px rgba(15, 23, 42, .6);
    }

    /* หมวดที่มีหลายหน้า (เกิน 6) จัดสองคอลัมน์ กล่องไม่ยาวจนล้นหัวน้ำเงิน */
    nav.mnav details.tb1-sub-fold.is-wide > .mnav-sub {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

    nav.mnav details.tb1-sub-fold.is-right > .mnav-sub {
        right: 0;
        left: auto;
    }

    nav.mnav details.tb1-sub-fold .mnav-sub > li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav.mnav details.tb1-sub-fold a.mnav-sublink {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        margin: 0;
        padding: 0 12px;
        color: var(--tb1-ink-1, #0f172a);
        background: transparent;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .2s ease, color .2s ease;
    }

    nav.mnav details.tb1-sub-fold a.mnav-sublink i {
        flex: none;
        width: 18px;
        text-align: center;
        color: var(--tb1-brand, #1d4ed8);
    }

    nav.mnav details.tb1-sub-fold a.mnav-sublink:hover {
        color: var(--tb1-brand, #1d4ed8);
        background: color-mix(in srgb, var(--tb1-brand, #1d4ed8) 10%, var(--tb1-surface, #ffffff));
    }

    nav.mnav details.tb1-sub-fold a.mnav-sublink:focus-visible {
        outline: 2px solid var(--tb1-brand, #1d4ed8);
        outline-offset: -2px;
    }

    nav.mnav details.tb1-sub-fold a.mnav-sublink[aria-current] {
        color: #ffffff;
        background: linear-gradient(120deg, var(--tb1-brand, #1d4ed8), color-mix(in srgb, var(--tb1-brand, #1d4ed8) 62%, #7c3aed));
    }

    nav.mnav details.tb1-sub-fold a.mnav-sublink[aria-current] i {
        color: inherit;
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav details.tb1-sub-fold > .mnav-sub {
        background: var(--tb1-surface, #0f1b33);
        border-color: color-mix(in srgb, #94a3b8 22%, transparent);
        box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .8);
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav details.tb1-sub-fold a.mnav-sublink {
        color: #e2e8f0;
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav details.tb1-sub-fold a.mnav-sublink i {
        color: #60a5fa;
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav details.tb1-sub-fold a.mnav-sublink:hover {
        color: #93c5fd;
        background: color-mix(in srgb, #60a5fa 14%, var(--tb1-surface, #0f1b33));
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav details.tb1-sub-fold a.mnav-sublink[aria-current] {
        color: #0b1220;
        background: linear-gradient(120deg, #60a5fa, color-mix(in srgb, #60a5fa 62%, #7c3aed));
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav details.tb1-sub-fold a.mnav-sublink[aria-current] i {
        color: inherit;
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav details.tb1-sub-fold[open]:not(.is-current) > summary.mnav-link {
        color: #93c5fd !important;
        background: color-mix(in srgb, #60a5fa 14%, var(--tb1-surface, #0f1b33)) !important;
    }

    /* คอนทราสต์สูง: ดำ ขาว เหลือง (หน้าที่อยู่ = เหลืองตัวดำ เหมือนรายการที่อยู่ในแถว) */
    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold > .mnav-sub {
        background: #000000 !important;
        border: 2px solid #ffffff !important;
        box-shadow: none !important;
    }

    /* ข้อความในลิงก์ (span) โดนกฎลิงก์เหลืองของทั้งเว็บ (a *) จึงตั้งทั้งลิงก์และของข้างใน ให้ขาวเหมือนลิงก์ในแถว */
    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold a.mnav-sublink,
    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold a.mnav-sublink * {
        color: #ffffff !important;
        background: transparent !important;
    }

    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold a.mnav-sublink:hover {
        text-decoration: underline !important;
    }

    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold a.mnav-sublink:focus-visible {
        outline: 3px solid #ffff00 !important;
    }

    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold a.mnav-sublink[aria-current],
    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold a.mnav-sublink[aria-current] *,
    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold.is-current > summary.mnav-link,
    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold.is-current > summary.mnav-link * {
        color: #000000 !important;
    }

    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold a.mnav-sublink[aria-current],
    html.tb1-contrast-high body nav.mnav details.tb1-sub-fold.is-current > summary.mnav-link {
        background: #facc15 !important;
    }
}

/* ข จอโทรศัพท์: เมนูที่ตรึงอยู่เต็มความกว้าง ชิดขอบ (js ตั้ง --tb1-sub-top = ใต้แถบพอดี หรือ 0 เมื่อแถบหลบ) */
@media screen and (max-width: 767.98px) {
    html .tb1-navbar {
        transition: background-color .3s, color .3s, border-color .3s, transform .25s ease;
    }

    html.tb1-bar-away .tb1-navbar {
        transform: translateY(calc(-100% - 24px));
    }

    html body nav.tb1-sub-fixed.tb1-sub-fixed.tb1-sub-fixed {
        transition: top .25s ease;
    }

    html body nav.mnav.tb1-sub-fixed.tb1-sub-fixed.tb1-sub-fixed {
        left: 0 !important;
        width: 100% !important;
    }

    html:not(.tb1-contrast-high) body nav.mnav.tb1-sub-fixed .mnav-scroll {
        background: var(--sub-paper, #ffffff) !important;
        border-width: 0 0 1px !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 24px -18px rgba(15, 23, 42, .65) !important;
    }

    /* เมนูแบบกลุ่ม (แถบสีอยู่ที่ nav): กล่องไม่มีเส้นขอบบนแล้ว แถบสีขยับตาม */
    html:not(.tb1-contrast-high) body nav.mnav.tb1-sub-fixed > .tb1-sub-ink {
        top: 6px;
        bottom: 7px;
    }

    /* กล่องที่ตรึงเป็นพื้นทึบ ลูกศรจึงทึบด้วย (ไม่เห็นตัวอักษรใต้ลูกศรจาง ๆ) */
    html body nav.mnav.tb1-sub-fixed > .tb1-sub-more.is-l {
        top: 0;
        bottom: 1px;
        left: 0;
        background: linear-gradient(270deg, transparent, var(--tb1-surface, #ffffff) 46%);
        border-radius: 0;
    }

    html body nav.mnav.tb1-sub-fixed > .tb1-sub-more.is-r {
        top: 0;
        bottom: 1px;
        right: 0;
        background: linear-gradient(90deg, transparent, var(--tb1-surface, #ffffff) 46%);
        border-radius: 0;
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav.tb1-sub-fixed > .tb1-sub-more.is-l {
        background: linear-gradient(270deg, transparent, var(--tb1-surface, #0f1b33) 46%);
    }

    :is(:is(html.dark, html.dark-mode, html[data-theme="dark"]) body, html body:is(.dark-mode, [data-theme="dark"])) nav.mnav.tb1-sub-fixed > .tb1-sub-more.is-r {
        background: linear-gradient(90deg, transparent, var(--tb1-surface, #0f1b33) 46%);
    }

    /* เมนูไปยังหัวข้อที่ติดจอด้วย CSS เลื่อนตามแถบที่หลบ/กลับมา */
    html:not(.tb1-contrast-high) body :is(nav.ax-nav, nav.bd-subnav, nav.ca-nav, nav.ct-subnav, nav.cst-jump:not(.cpl-jump), nav.cb-jump,
        nav.hi-subnav, nav.ip-subnav, nav.pd-nav, nav.pr-nav, nav.rs-nav, nav.sp-nav, nav.sq-nav, nav.en-nav, nav.ts-nav, nav.ax-jump, nav.tp-tabs) {
        transition: box-shadow .3s ease, border-color .3s ease, top .25s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    html .tb1-navbar,
    html body nav.tb1-sub-fixed.tb1-sub-fixed.tb1-sub-fixed,
    nav.mnav .tb1-sub-caret {
        transition: none !important;
    }
}

@media print {
    nav.mnav li.tb1-sub-foldli {
        display: none !important;
    }

    nav.mnav li.tb1-sub-away {
        display: list-item !important;
    }
}