@font-face {
    font-family: 'Dune Rise';
    src: url('../font/Dune_Rise.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
 * Fixed full-viewport backgrounds inside <main> (e.g. agenda page) paint after the
 * header in DOM order and can cover the nav. Keep the bar above those layers.
 */
.nav-bar-cus {
    position: relative;
    z-index: 100;
    background-color: #000000 !important;
    background-image: none !important;
    border-bottom: 2px solid #1a5a9e;
    box-shadow: inset 0 -1px 0 rgba(94, 200, 242, 0.15);
}

/* Web layout: main nav (desktop + mobile drawer) */
.nav-bar-cus .nav-bar-menu ul li a,
.nav-bar-cus .nav-bar-menu .nav-link,
.nav-bar-cus .rdu-nav-link,
.nav-bar-cus .nav-bar-menu-mobile .nav-link,
.nav-bar-cus .nav-bar-menu-mobile .lang a {
    font-family: 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    background-image: linear-gradient(90deg, #5D26FF 0%, #0099FF 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0099FF;
    text-shadow: none;
    border-radius: 0;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.nav-bar-cus .nav-bar-menu ul li a:hover,
.nav-bar-cus .nav-bar-menu .nav-link:hover,
.nav-bar-cus .rdu-nav-link:hover,
.nav-bar-cus .nav-bar-menu ul li a.active,
.nav-bar-cus .nav-bar-menu .nav-link.active,
.nav-bar-cus .rdu-nav-link.active,
.nav-bar-cus .nav-bar-menu-mobile .nav-link:hover,
.nav-bar-cus .nav-bar-menu-mobile .nav-link.active,
.nav-bar-cus .nav-bar-menu-mobile .lang a:hover,
.nav-bar-cus .nav-bar-menu-mobile .lang a.active {
    background-image: none !important;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff !important;
}

.nav-bar-cus .logo-left {
    position: relative;
    width: auto;
    height: auto;
    top: auto;
    transform: none;
}

.nav-bar-cus .logo-left .layout-left-text {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.nav-bar-cus .logo-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-bar-cus .logo-right .layout-right-text {
    height: auto;
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

.nav-bar-cus .rdu-nav-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/*
 * Nav typography: fluid scale with viewport (clamp min / preferred / max).
 * TH: ข้อความเมนูย่อ-ขยายตามความกว้างหน้าจอ แทนขนาดคงที่ที่ใหญ่เกินบนมือถือ
 * EN: Menu text scales with screen width instead of oversized fixed rem/pt.
 */
@media (min-width: 1200px) {

    .nav-bar-cus .nav-bar-menu ul li a,
    .nav-bar-cus .nav-bar-menu .nav-link {
        font-size: clamp(0.78rem, 0.52rem + 0.55vw, 1.125rem);
    }
}

/*
 * Notebook / tight xl (≈1200–1650px): ลดฟอนต์+ระยะห่าง + ขยายคอลัมน์เมนู
 * กัน TH/EN (absolute) และโลโก้ขวาทับ LOG OUT กดไม่ได้
 * EN: Rebalance grid so nav has more room; make .lang flow inline; stack correctly.
 */
@media (min-width: 1200px) and (max-width: 1649.98px) {

    header.nav-bar-cus .row > .col-xl-4 {
        flex: 0 0 auto;
        width: 34%;
        min-width: 0;
    }

    header.nav-bar-cus .row > .col-xl-5 {
        flex: 0 0 auto;
        width: 48%;
        min-width: 0;
    }

    header.nav-bar-cus .row > .col-xl-3 {
        flex: 0 0 auto;
        width: 18%;
        position: relative;
        z-index: 1;
    }

    header.nav-bar-cus .nav-bar-menu {
        position: relative;
        z-index: 5;
        margin-left: clamp(0.25rem, 0.8vw, 1rem) !important;
        flex-wrap: nowrap;
    }

    .nav-bar-cus .nav-bar-menu ul {
        min-width: 0;
        column-gap: 0;
        flex-wrap: nowrap;
    }

    .nav-bar-cus .nav-bar-menu ul li {
        white-space: nowrap;
    }

    .nav-bar-cus .nav-bar-menu ul li a,
    .nav-bar-cus .nav-bar-menu .nav-link {
        font-size: clamp(0.86rem, 0.58rem + 0.35vw, 1.05rem) !important;
        margin-right: 0 !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
        letter-spacing: 0.01em;
    }

    header.nav-bar-cus .logo-right {
        position: relative;
        z-index: 1;
    }

    .nav-bar-cus .logo-right .layout-right-text {
        max-height: 32px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* Desktop nav: ให้เมนูกินเต็มคอลัมน์กลาง และแบ่งความกว้างแต่ละเมนูเท่ากัน */
@media (min-width: 1200px) {

    header.nav-bar-cus .nav-bar-menu {
        width: 100%;
        margin-left: 0 !important;
        justify-content: center !important;
    }

    header.nav-bar-cus .nav-bar-menu > .nav {
        flex: 1 1 0;
        width: auto;
        max-width: 100%;
        min-width: 0;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        flex-wrap: nowrap;
        justify-content: stretch !important;
    }

    header.nav-bar-cus .nav-bar-menu > .nav > li {
        flex: 1 1 0;
        min-width: 0;
    }

    header.nav-bar-cus .nav-bar-menu > .nav > li.nav-item--wide {
        flex-grow: 1.45;
    }

    header.nav-bar-cus .nav-bar-menu > .nav > li > .nav-link {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0 !important;
        text-align: center;
        white-space: nowrap;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch {
        position: static !important;
        right: auto !important;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        margin: 0 0 0 clamp(0.35rem, 0.7vw, 0.75rem) !important;
        padding: 0;
        background: transparent;
        box-shadow: none;
        white-space: nowrap;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 1.55rem;
        padding: 0.12rem 0.2rem !important;
        margin: 0 !important;
        background-color: transparent !important;
        border-radius: 0;
        font-size: clamp(0.72rem, 0.42rem + 0.28vw, 0.9rem) !important;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch .nav-link.active {
        background-image: none !important;
        -webkit-background-clip: unset;
        background-clip: unset;
        -webkit-text-fill-color: #ffffff;
        color: #ffffff !important;
    }

    header.nav-bar-cus .nav-bar-menu > .nav-language-switch__separator,
    header.nav-bar-cus .nav-bar-menu > .nav-language-switch .nav-language-switch__separator {
        color: rgba(0, 153, 255, 0.65);
        font-size: 0.72rem;
        line-height: 1;
    }
}

@media (max-width: 1199.98px) {

    .nav-bar-cus .nav-bar-menu-mobile .nav-link {
        font-size: clamp(0.8rem, 0.48rem + 2.2vw, 1.15rem);
    }

    .nav-bar-cus .nav-bar-menu-mobile .lang a {
        font-size: clamp(0.72rem, 0.42rem + 1.6vw, 0.9rem);
    }

    /* Logo ในแถบบนมือถือ/แท็บเล็ต */
    .nav-bar-cus img.layout-left-text {
        width: auto;
        height: auto;
        max-height: clamp(28px, 8.5vw, 46px);
        object-fit: contain;
    }

    /* ปุ่ม hamburger */
    .nav-bar-cus #toggleMobileMenu .fas {
        font-size: clamp(1.1rem, 0.85rem + 1.4vw, 1.65rem);
        line-height: 1;
    }
}

/* ── RDU SweetAlert2 theme ── */
.rdu-swal-popup {
    background: #0a0a12 !important;
    border: 1px solid rgba(0, 153, 255, 0.35) !important;
    border-radius: 16px !important;
    padding: 1.75rem 1.5rem 1.5rem !important;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.55),
        0 0 32px rgba(93, 38, 255, 0.12) !important;
    font-family: 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif !important;
    color: #ffffff !important;
}

.rdu-swal-popup--narrow {
    width: min(90vw, 28rem) !important;
}

.rdu-swal-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem) !important;
    line-height: 1.35 !important;
}

.rdu-swal-html,
.rdu-swal-popup .swal2-html-container {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.rdu-swal-subtitle {
    color: #0099FF !important;
    font-size: 0.9rem;
    line-height: 1.45;
}

.rdu-swal-actions {
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
}

.rdu-swal-btn {
    font-family: 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    padding: 0.65rem 2rem !important;
    min-width: 120px;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.rdu-swal-btn--confirm {
    background: linear-gradient(90deg, #5D26FF 0%, #0099FF 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 153, 255, 0.35);
}

.rdu-swal-btn--confirm:hover,
.rdu-swal-btn--confirm:focus {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.rdu-swal-btn--cancel {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
}

.rdu-swal-popup .swal2-icon {
    margin: 0.5rem auto 1rem !important;
    border-width: 3px !important;
}

.rdu-swal-popup .swal2-icon.swal2-warning {
    border-color: #0099FF !important;
    color: #0099FF !important;
}

.rdu-swal-popup .swal2-icon.swal2-error {
    border-color: #ff6b8a !important;
}

.rdu-swal-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #ff6b8a !important;
}

.rdu-swal-popup .swal2-icon.swal2-success {
    border-color: #0099FF !important;
}

.rdu-swal-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #0099FF !important;
}

.rdu-swal-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(0, 153, 255, 0.35) !important;
}

.rdu-swal-popup .swal2-icon.swal2-info {
    border-color: #0099FF !important;
    color: #0099FF !important;
}

.rdu-swal-popup .swal2-timer-progress-bar {
    background: linear-gradient(90deg, #5D26FF 0%, #0099FF 100%) !important;
}