/* =========================================================
   PSCT DESIGN SYSTEM
   ========================================================= */
:root {
    --psct-blue: #7EA6E0;
    --psct-blue-dark: #527BB8;
    --psct-blue-soft: #EDF4FF;
    --psct-red: #E78E9A;
    --psct-red-dark: #C86D79;
    --psct-red-soft: #FFF0F3;
    --psct-navy: #30445F;
    --psct-bg: #F7F9FC;
    --psct-card: rgba(255, 255, 255, .72);
    --psct-card-solid: #fff;
    --psct-text: #475569;
    --psct-muted: #94a3b8;
    --psct-border: rgba(255, 255, 255, .75);
    --psct-shadow: rgba(48, 68, 95, .12);
    color-scheme: light
}

html.dark {
    --psct-bg: #0B111B;
    --psct-card: rgba(20, 29, 44, .72);
    --psct-card-solid: #121b2a;
    --psct-text: #cbd5e1;
    --psct-muted: #7f8da3;
    --psct-border: rgba(255, 255, 255, .08);
    --psct-shadow: rgba(0, 0, 0, .3);
    color-scheme: dark
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Kanit', sans-serif;
    color: var(--psct-text);
    background: radial-gradient(circle at 10% 10%, rgba(126, 166, 224, .16), transparent 30%), radial-gradient(circle at 90% 15%, rgba(231, 142, 154, .14), transparent 28%), var(--psct-bg);
    transition: background-color .35s ease, color .35s ease
}

html.dark body {
    background: radial-gradient(circle at 10% 8%, rgba(82, 123, 184, .14), transparent 31%), radial-gradient(circle at 90% 12%, rgba(200, 109, 121, .1), transparent 29%), linear-gradient(180deg, #0b111b 0%, #0d1521 50%, #0a1019 100%);
    color: #cbd5e1
}

body.modal-open {
    overflow: hidden
}

::selection {
    background: rgba(126, 166, 224, .28);
    color: #30445f
}

html.dark ::selection {
    background: rgba(126, 166, 224, .3);
    color: #fff
}

/* =========================================================
   SWEETALERT2 - PSCT THEME
   ========================================================= */

.swal2-container {
    padding: 1rem !important;
    font-family: "Kanit", sans-serif !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.swal2-container.swal2-backdrop-show {
    background: rgba(15, 23, 42, .34) !important;
}

.swal2-popup {
    width: min(92vw, 420px) !important;
    padding: 1.5rem !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #30445F !important;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, .18),
        0 8px 24px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

.swal2-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #30445F !important;
    font-family: "Kanit", sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: -.01em !important;
}

.swal2-html-container {
    margin: .65rem 0 0 !important;
    padding: 0 !important;
    color: #64748B !important;
    font-family: "Kanit", sans-serif !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}

.swal2-actions {
    width: 100% !important;
    margin: 1.35rem 0 0 !important;
    gap: .65rem !important;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
    min-height: 44px !important;
    margin: 0 !important;
    padding: .65rem 1.15rem !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    font-family: "Kanit", sans-serif !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease,
        background .18s ease !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, #527BB8, #7EA6E0) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(82, 123, 184, .22) !important;
}

.swal2-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(82, 123, 184, .28) !important;
}

.swal2-confirm:active {
    transform: translateY(0) scale(.98);
}

.swal2-cancel {
    background: #F1F5F9 !important;
    color: #475569 !important;
}

.swal2-cancel:hover {
    background: #E2E8F0 !important;
}

.swal2-deny {
    background: #FFF0F3 !important;
    color: #C86D79 !important;
}

.swal2-deny:hover {
    background: #FFE4E9 !important;
}

.swal2-confirm:focus,
.swal2-cancel:focus,
.swal2-deny:focus {
    outline: none !important;
    box-shadow:
        0 0 0 4px rgba(126, 166, 224, .18) !important;
}

.swal2-icon {
    width: 64px !important;
    height: 64px !important;
    margin: .1rem auto 1.1rem !important;
    border-width: 2px !important;
    transform: scale(.9);
}

.swal2-icon.swal2-success {
    border-color: #86D3B3 !important;
    background: rgba(134, 211, 179, .10) !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #34A97B !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(52, 169, 123, .22) !important;
}

.swal2-icon.swal2-error {
    border-color: #E78E9A !important;
    background: rgba(231, 142, 154, .10) !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #C86D79 !important;
}

.swal2-icon.swal2-warning {
    border-color: #F0BC66 !important;
    background: rgba(240, 188, 102, .10) !important;
    color: #D8962C !important;
}

.swal2-icon.swal2-info {
    border-color: #7EA6E0 !important;
    background: rgba(126, 166, 224, .10) !important;
    color: #527BB8 !important;
}

.swal2-icon.swal2-question {
    border-color: #A5B4FC !important;
    background: rgba(165, 180, 252, .10) !important;
    color: #6366F1 !important;
}

.swal2-close {
    top: .85rem !important;
    right: .85rem !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    color: #94A3B8 !important;
    font-size: 1.5rem !important;
    transition: .18s ease !important;
}

.swal2-close:hover {
    background: #F1F5F9 !important;
    color: #475569 !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    width: 100% !important;
    margin: 1rem 0 0 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #334155 !important;
    font-family: "Kanit", sans-serif !important;
    font-size: .85rem !important;
    box-shadow: none !important;
}

.swal2-input {
    height: 46px !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #7EA6E0 !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(126, 166, 224, .14) !important;
}

.swal2-validation-message {
    margin: .9rem 0 0 !important;
    border-radius: 12px !important;
    background: #FFF0F3 !important;
    color: #C86D79 !important;
    font-family: "Kanit", sans-serif !important;
    font-size: .75rem !important;
}

.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #527BB8, #7EA6E0) !important;
}

/* =========================================================
   DARK MODE
   ========================================================= */

html.dark .swal2-container.swal2-backdrop-show {
    background: rgba(2, 6, 23, .68) !important;
}

html.dark .swal2-popup {
    border-color: rgba(255, 255, 255, .08) !important;
    background: rgba(15, 23, 42, .94) !important;
    color: #F8FAFC !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .swal2-title {
    color: #F8FAFC !important;
}

html.dark .swal2-html-container {
    color: #94A3B8 !important;
}

html.dark .swal2-cancel {
    background: rgba(255, 255, 255, .07) !important;
    color: #CBD5E1 !important;
}

html.dark .swal2-cancel:hover {
    background: rgba(255, 255, 255, .11) !important;
}

html.dark .swal2-deny {
    background: rgba(231, 142, 154, .10) !important;
    color: #F4AAB4 !important;
}

html.dark .swal2-deny:hover {
    background: rgba(231, 142, 154, .16) !important;
}

html.dark .swal2-close {
    color: #64748B !important;
}

html.dark .swal2-close:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #CBD5E1 !important;
}

html.dark .swal2-input,
html.dark .swal2-textarea,
html.dark .swal2-select {
    border-color: rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .045) !important;
    color: #F8FAFC !important;
}

html.dark .swal2-input::placeholder,
html.dark .swal2-textarea::placeholder {
    color: #64748B !important;
}

html.dark .swal2-validation-message {
    background: rgba(231, 142, 154, .08) !important;
    color: #F4AAB4 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px) {
    .swal2-container {
        padding: .75rem !important;
    }

    .swal2-popup {
        width: 100% !important;
        padding: 1.25rem !important;
        border-radius: 24px !important;
    }

    .swal2-title {
        font-size: 1.05rem !important;
    }

    .swal2-html-container {
        font-size: .8rem !important;
    }

    .swal2-actions {
        flex-direction: column !important;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        width: 100% !important;
    }
}

/* =========================================================
   ANIMATION
   ========================================================= */

.swal2-show {
    animation: psctSwalIn .24s cubic-bezier(.16, 1, .3, 1) !important;
}

.swal2-hide {
    animation: psctSwalOut .18s ease-in forwards !important;
}

@keyframes psctSwalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.965);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes psctSwalOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
}

/* =========================================================
   GLOBAL BACKGROUND / GLASS
   ========================================================= */
.page-bg {
    min-height: 100vh;
    background: radial-gradient(circle at top left, rgba(219, 234, 254, .75), transparent 35%), radial-gradient(circle at bottom right, rgba(255, 228, 230, .7), transparent 35%), #f8fafc;
    transition: background .35s ease
}

html.dark .page-bg {
    background: radial-gradient(circle at top left, rgba(82, 123, 184, .12), transparent 35%), radial-gradient(circle at bottom right, rgba(200, 109, 121, .08), transparent 35%), #0b111b
}

.glass {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .78);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 30px 80px rgba(48, 68, 95, .08);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease
}

html.dark .glass {
    background: rgba(17, 25, 39, .68);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.soft-card {
    box-shadow: 0 30px 80px rgba(70, 95, 130, .12), inset 0 1px 0 rgba(255, 255, 255, .9)
}

html.dark .soft-card {
    box-shadow: 0 30px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E")
}

html.dark .noise {
    opacity: .025
}

/* =========================================================
   TYPOGRAPHY / GRADIENT
   ========================================================= */
.gradient-text {
    background: linear-gradient(90deg, #527BB8, #C86D79);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

html.dark .gradient-text {
    background: linear-gradient(90deg, #9ec5f8, #f0a9b3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary {
    padding: 14px 28px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #527BB8, #C86D79);
    box-shadow: 0 20px 40px rgba(82, 123, 184, .3);
    transition: transform .3s ease, box-shadow .3s ease
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(82, 123, 184, .34)
}

.btn-glass {
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 18px;
    color: #475569;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(48, 68, 95, .09);
    transition: all .3s ease
}

.btn-glass:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 16px 35px rgba(48, 68, 95, .13)
}

html.dark .btn-glass {
    border-color: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22)
}

html.dark .btn-glass:hover {
    background: rgba(255, 255, 255, .1)
}

/* =========================================================
   HERO / 3D
   ========================================================= */
.hero-orb {
    background: linear-gradient(145deg, rgba(126, 166, 224, .95), rgba(231, 142, 154, .82));
    box-shadow: 0 40px 100px rgba(91, 124, 170, .25), inset 0 10px 30px rgba(255, 255, 255, .3)
}

html.dark .hero-orb {
    background: linear-gradient(145deg, rgba(82, 123, 184, .8), rgba(200, 109, 121, .58));
    box-shadow: 0 40px 110px rgba(0, 0, 0, .28), 0 0 80px rgba(82, 123, 184, .11), inset 0 10px 30px rgba(255, 255, 255, .08)
}

.orb {
    border-radius: 50%;
    background: linear-gradient(135deg, #7EA6E0, #E78E9A);
    transform: translateZ(-50px)
}

html.dark .orb {
    background: linear-gradient(135deg, #527BB8, #9f6570)
}

.apple-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 40px;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 60px 120px rgba(0, 0, 0, .15);
    transform: translate(-50%, -50%) rotateY(-12deg) rotateX(8deg);
    transition: transform .5s ease, background .35s ease, border-color .35s ease
}

.apple-card:hover {
    transform: translate(-50%, -50%) rotateY(0) rotateX(0) scale(1.05)
}

html.dark .apple-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(18, 27, 42, .76);
    box-shadow: 0 60px 120px rgba(0, 0, 0, .38)
}

.tilt-card {
    transform-style: preserve-3d;
    transition: transform .2s ease, background .35s ease, border-color .35s ease
}

.floating {
    position: absolute;
    padding: 15px 25px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 50px rgba(0, 0, 0, .12);
    animation: float 5s ease-in-out infinite
}

.floating-one {
    top: 100px;
    left: 0
}

.floating-two {
    right: 0;
    bottom: 100px
}

html.dark .floating {
    border-color: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    background: #121b2a;
    box-shadow: 0 30px 55px rgba(0, 0, 0, .3)
}

.floating-card {
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease
}

.floating-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 80px rgba(67, 91, 126, .16)
}

html.dark .floating-card:hover {
    box-shadow: 0 35px 80px rgba(0, 0, 0, .32)
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}


/* =========================================================
   NAVBAR
   ========================================================= */
.navbar-glass {
    background: rgba(255, 255, 255, .94);
    border-color: rgba(255, 255, 255, .72);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    box-shadow: 0 18px 50px rgba(48, 68, 95, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease
}

html.dark .navbar-glass {
    background: rgba(14, 22, 35, .94);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05)
}

#siteHeader {
    transition: top .35s ease, transform .35s ease
}

#siteHeader #mainNavbar {
    max-width: 80rem;
    border-radius: 26px !important;
    transition: max-width .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease
}

#siteHeader.navbar-scrolled {
    position: fixed;
    top: 12px
}

#siteHeader.navbar-scrolled #mainNavbar {
    max-width: 80rem;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .94);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 50px rgba(48, 68, 95, .13), inset 0 1px 0 rgba(255, 255, 255, .92)
}

html.dark #siteHeader.navbar-scrolled #mainNavbar {
    background: rgba(14, 22, 35, .94);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.logo-spatial {
    background: linear-gradient(145deg, #7ea6e0 0%, #6f96cf 45%, #e78e9a 100%);
    box-shadow: 0 10px 25px rgba(82, 123, 184, .24), inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -8px 16px rgba(48, 68, 95, .1);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease
}

.group:hover .logo-spatial {
    transform: translateY(-2px) rotate(-3deg) scale(1.04);
    box-shadow: 0 16px 32px rgba(82, 123, 184, .3), inset 0 1px 1px rgba(255, 255, 255, .6)
}

.logo-shine {
    position: absolute;
    top: -60%;
    left: -90%;
    width: 80%;
    height: 220%;
    transform: rotate(25deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    transition: left .7s ease
}

.group:hover .logo-shine {
    left: 130%
}

.nav-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    border: 0;
    border-radius: 14px;
    padding: .68rem .8rem;
    color: #64748b;
    background: transparent;
    font-family: inherit;
    font-size: .96rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .25s ease, transform .25s ease, text-shadow .25s ease
}

.nav-pill:hover {
    color: #30445f;
    transform: translateY(-1px)
}

.nav-pill>i:not(.nav-dropdown-arrow) {
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #8294aa;
    font-size: 12px;
    line-height: 1;
    transition: color .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s ease
}

.nav-pill:hover>i:not(.nav-dropdown-arrow) {
    color: #527BB8;
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 4px 6px rgba(82, 123, 184, .15))
}

.nav-pill>span {
    position: relative;
    display: inline-block
}

.nav-pill>span:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #527BB8, #7EA6E0, #E78E9A);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease
}

.nav-pill:hover>span:after {
    opacity: .4;
    transform: scaleX(1)
}

.nav-pill.is-active {
    font-weight: 600;
    color: #527BB8;
    background: transparent;
    text-shadow: 0 5px 18px rgba(82, 123, 184, .1)
}

.nav-pill.is-active>span {
    background: linear-gradient(90deg, #527BB8 0%, #7188B2 45%, #C86D79 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.nav-pill.is-active>span:after {
    height: 2.5px;
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 2px 8px rgba(82, 123, 184, .18)
}

.nav-pill.is-active>i:not(.nav-dropdown-arrow) {
    color: #527BB8;
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 7px rgba(82, 123, 184, .18))
}

.nav-dropdown-arrow {
    width: auto !important;
    height: auto !important;
    margin-left: .05rem;
    color: #94a3b8 !important;
    font-size: 9px !important;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .25s ease !important
}

.nav-dropdown:hover>.nav-dropdown-toggle>.nav-dropdown-arrow,
.nav-dropdown.is-open>.nav-dropdown-toggle>.nav-dropdown-arrow {
    color: #527BB8 !important;
    transform: rotate(180deg)
}

html.dark .nav-pill {
    color: #a1adbd
}

html.dark .nav-pill:hover {
    color: #f1f5f9
}

html.dark .nav-pill>i:not(.nav-dropdown-arrow) {
    color: #8190a5
}

html.dark .nav-pill:hover>i:not(.nav-dropdown-arrow) {
    color: #AFCBF5;
    filter: drop-shadow(0 4px 8px rgba(126, 166, 224, .16))
}

html.dark .nav-pill.is-active {
    color: #AFCBF5
}

html.dark .nav-pill.is-active>span {
    background: linear-gradient(90deg, #AFCBF5, #9CB8E2 45%, #F6B8C2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

html.dark .nav-pill.is-active>span:after {
    background: linear-gradient(90deg, #AFCBF5, #9CB8E2, #F6B8C2);
    box-shadow: 0 3px 12px rgba(126, 166, 224, .22)
}

html.dark .nav-pill.is-active>i:not(.nav-dropdown-arrow) {
    color: #AFCBF5
}

html.dark .nav-dropdown-arrow {
    color: #718096 !important
}

html.dark .nav-dropdown:hover>.nav-dropdown-toggle>.nav-dropdown-arrow,
html.dark .nav-dropdown.is-open>.nav-dropdown-toggle>.nav-dropdown-arrow {
    color: #AFCBF5 !important
}

/* =========================================================
   NAVIGATION DROPDOWN
   ========================================================= */
.nav-dropdown {
    position: relative
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit
}

.nav-dropdown-arrow {
    margin-left: 1px;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1)
}

.nav-dropdown:hover>.nav-dropdown-toggle .nav-dropdown-arrow,
.nav-dropdown.is-open>.nav-dropdown-toggle .nav-dropdown-arrow {
    transform: rotate(180deg)
}

/* สำคัญ: top 100% + padding-top ทำหน้าที่เป็น hover bridge จึงไม่มีช่องว่างให้ hover หลุด */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: -12px;
    z-index: 100;
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transform-origin: top left;
    transition: opacity .2s ease, visibility .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1)
}

.nav-dropdown:hover>.nav-dropdown-menu,
.nav-dropdown.is-open>.nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}

.nav-conference-menu {
    left: 50%;
    transform: translate(-50%, -5px);
    transform-origin: top center
}

.nav-dropdown:hover>.nav-conference-menu,
.nav-dropdown.is-open>.nav-conference-menu {
    transform: translate(-50%, 0)
}

.nav-dropdown-panel {
    width: max-content;
    min-width: 270px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(28px) saturate(175%);
    -webkit-backdrop-filter: blur(28px) saturate(175%);
    box-shadow: 0 25px 65px rgba(48, 68, 95, .17), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html.dark .nav-dropdown-panel {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(17, 25, 39, .97);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem .65rem
}

.dropdown-header-icon {
    display: flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px
}

.dropdown-header strong {
    display: block;
    color: #30445f;
    font-size: .82rem;
    font-weight: 600
}

.dropdown-header small {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: .65rem;
    font-weight: 300
}

html.dark .dropdown-header strong {
    color: #f1f5f9
}

.dropdown-divider {
    height: 1px;
    margin: 5px 7px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .25), transparent)
}

html.dark .dropdown-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent)
}

.dropdown-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    gap: .65rem;
    border: 0;
    border-radius: 13px;
    padding: .62rem .75rem;
    color: #64748b;
    background: transparent;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: 4px;
    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.dropdown-link:hover {
    color: #24456f;
    background: linear-gradient(
        90deg,
        rgba(225, 237, 255, .98),
        rgba(255, 232, 237, .78)
    );
    box-shadow: inset 3px 0 0 rgba(82, 123, 184, .38);
    transform: translateX(3px);
}

.dropdown-link.is-active {
    color: #3f6fae;
    font-weight: 500;
    background: linear-gradient(
        90deg,
        rgba(222, 235, 255, .96),
        rgba(255, 231, 237, .68)
    );
    box-shadow: inset 3px 0 0 rgba(82, 123, 184, .55);
}

.dropdown-icon {
    display: flex;
    width: 27px;
    height: 27px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #7b91ae;
    background: rgba(237, 244, 255, .85);
    font-size: 11px;
    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.dropdown-link:hover .dropdown-icon {
    color: #416fae;
    background: #fff;
    box-shadow: 0 5px 14px rgba(82, 123, 184, .16);
    transform: scale(1.06);
}

.dropdown-link.is-active .dropdown-icon {
    color: #fff;
    background: #527BB8;
    box-shadow: 0 5px 14px rgba(82, 123, 184, .22);
}

html.dark .dropdown-link {
    color: #9aa8bb
}

html.dark .dropdown-link:hover {
    color: #fff;
    background: linear-gradient(90deg, rgba(82, 123, 184, .14), rgba(200, 109, 121, .08))
}

html.dark .dropdown-link.is-active {
    color: #AFCBF5;
    background: linear-gradient(90deg, rgba(82, 123, 184, .16), rgba(200, 109, 121, .08))
}

html.dark .dropdown-icon {
    color: #9CB8E2;
    background: rgba(255, 255, 255, .055)
}

html.dark .dropdown-link:hover .dropdown-icon {
    color: #AFCBF5;
    background: rgba(255, 255, 255, .08)
}

/* =========================================================
   SIDE / FLYOUT SUBMENU
   ========================================================= */
.nav-submenu {
    position: relative
}

/* padding-left 10px เป็น hover bridge ระหว่างเมนูหลักและ submenu */
.nav-submenu-panel {
    position: absolute;
    top: -9px;
    left: 100%;
    z-index: 110;
    padding-left: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1)
}

.nav-submenu:hover>.nav-submenu-panel,
.nav-submenu.is-open>.nav-submenu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0)
}

.dropdown-side-arrow {
    margin-left: .75rem;
    color: #94a3b8;
    transition: transform .2s ease
}

.nav-submenu:hover>.dropdown-submenu-toggle .dropdown-side-arrow,
.nav-submenu.is-open>.dropdown-submenu-toggle .dropdown-side-arrow {
    transform: translateX(2px);
    color: #527BB8
}

.nav-submenu-card {
    width: max-content;
    min-width: 270px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(28px) saturate(175%);
    -webkit-backdrop-filter: blur(28px) saturate(175%);
    box-shadow: 0 24px 60px rgba(48, 68, 95, .17), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html.dark .nav-submenu-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(17, 25, 39, .98);
    box-shadow: 0 26px 65px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.submenu-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .65rem .7rem;
    color: #30445f;
    font-size: .77rem;
    font-weight: 600
}

.submenu-title i {
    color: #527BB8
}

html.dark .submenu-title {
    color: #f1f5f9
}

html.dark .submenu-title i {
    color: #AFCBF5
}

.submenu-link {
    display: flex;
    min-height: 41px;
    align-items: center;
    gap: .7rem;
    border-radius: 12px;
    padding: .62rem .75rem;
    color: #64748b;
    font-size: .8rem;
    white-space: nowrap;
    transition: all .2s ease
}

.submenu-link i {
    width: 17px;
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
    transition: color .2s ease
}

.submenu-link:hover {
    color: #30445f;
    background: linear-gradient(90deg, rgba(237, 244, 255, .95), rgba(255, 240, 243, .6));
    transform: translateX(2px)
}

.submenu-link:hover i,
.submenu-link.is-active i {
    color: #527BB8
}

.submenu-link.is-active {
    color: #527BB8;
    font-weight: 500;
    background: rgba(237, 244, 255, .8)
}

html.dark .submenu-link {
    color: #94a3b8
}

html.dark .submenu-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .055)
}

html.dark .submenu-link.is-active {
    color: #AFCBF5;
    background: rgba(82, 123, 184, .12)
}

/* =========================================================
   MOBILE
   ========================================================= */
.mobile-main-link,
.mobile-dropdown-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 16px;
    padding: .8rem .9rem;
    color: #64748b;
    background: transparent;
    font-family: inherit;
    font-size: .86rem;
    text-align: left;
    transition: all .2s ease
}

.mobile-main-link {
    justify-content: flex-start;
    gap: .75rem
}

.mobile-menu-icon {
    display: flex;
    width: 30px;
    height: 30px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #7189a8;
    background: rgba(237, 244, 255, .8);
    font-size: 11px
}

.mobile-main-link:hover,
.mobile-dropdown-toggle:hover {
    color: #30445f;
    background: rgba(255, 255, 255, .75)
}

.mobile-main-link.is-active,
.mobile-dropdown.is-open>.mobile-dropdown-toggle {
    color: #527BB8;
    font-weight: 500;
    background: linear-gradient(90deg, rgba(237, 244, 255, .9), rgba(255, 240, 243, .55))
}

.mobile-dropdown-arrow {
    transition: transform .25s ease
}

.mobile-dropdown.is-open>.mobile-dropdown-toggle .mobile-dropdown-arrow {
    transform: rotate(180deg)
}

.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 .35rem;
    transition: max-height .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, padding .25s ease
}

.mobile-dropdown.is-open>.mobile-dropdown-content {
    max-height: 650px;
    opacity: 1;
    padding-top: .3rem;
    padding-bottom: .3rem
}

.mobile-dropdown-content a {
    display: flex;
    align-items: center;
    gap: .7rem;
    border-radius: 13px;
    padding: .68rem .85rem .68rem 1.15rem;
    color: #7c8a9e;
    font-size: .8rem;
    transition: all .2s ease
}

.mobile-dropdown-content a i {
    width: 17px;
    text-align: center;
    color: #94a3b8;
    font-size: 11px
}

.mobile-dropdown-content a:hover {
    color: #30445f;
    background: rgba(255, 255, 255, .75);
    transform: translateX(2px)
}

.mobile-dropdown-content a.is-active {
    color: #527BB8;
    font-weight: 500;
    background: rgba(237, 244, 255, .8)
}

html.dark .mobile-main-link,
html.dark .mobile-dropdown-toggle {
    color: #94a3b8
}

html.dark .mobile-menu-icon {
    color: #AFCBF5;
    background: rgba(255, 255, 255, .055)
}

html.dark .mobile-main-link:hover,
html.dark .mobile-dropdown-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05)
}

html.dark .mobile-main-link.is-active,
html.dark .mobile-dropdown.is-open>.mobile-dropdown-toggle {
    color: #AFCBF5;
    background: linear-gradient(90deg, rgba(82, 123, 184, .13), rgba(200, 109, 121, .07))
}

html.dark .mobile-dropdown-content a {
    color: #8290a4
}

html.dark .mobile-dropdown-content a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05)
}

html.dark .mobile-dropdown-content a.is-active {
    color: #AFCBF5;
    background: rgba(82, 123, 184, .12)
}

html.dark .nav-dropdown-menu {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(17, 25, 39, .96);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05)
}

html.dark .dropdown-link {
    color: #a8b4c5
}

html.dark .dropdown-link:hover {
    color: #fff;
    background: linear-gradient(90deg, rgba(82, 123, 184, .14), rgba(200, 109, 121, .1))
}

html.dark .dropdown-link:not(:last-child):after {
    background: rgba(255, 255, 255, .07)
}

button.login-nav-btn,
[data-open-login].login-nav-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: linear-gradient(135deg,
            #243B5A 0%,
            #315C87 42%,
            #596A9F 72%,
            #E94E75 100%) !important;
    color: #fff !important;
    box-shadow:
        0 10px 28px rgba(36, 59, 90, .25),
        0 4px 14px rgba(245, 59, 105, .12),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    transition:
        transform .28s cubic-bezier(.2, .8, .2, 1),
        box-shadow .28s ease,
        filter .28s ease !important;
}

button.login-nav-btn::before,
[data-open-login].login-nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 20%,
            rgba(255, 255, 255, .18) 48%,
            transparent 72%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}

button.login-nav-btn:hover,
[data-open-login].login-nav-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 14px 34px rgba(36, 59, 90, .34),
        0 6px 14px rgba(91, 142, 214, .22),
        inset 0 1px 0 rgba(255, 255, 255, .26) !important;
}

button.login-nav-btn:hover::before,
[data-open-login].login-nav-btn:hover::before {
    transform: translateX(120%);
}

button.login-nav-btn:active,
[data-open-login].login-nav-btn:active {
    transform: translateY(0) scale(.98);
}

button.login-nav-btn svg,
button.login-nav-btn span,
[data-open-login].login-nav-btn svg,
[data-open-login].login-nav-btn span {
    position: relative;
    z-index: 1;
    color: #fff !important
}

html.dark button.login-nav-btn,
html.dark [data-open-login].login-nav-btn {
    border-color: rgba(175, 203, 245, .15) !important;
    background: linear-gradient(135deg, #426892 0%, #527BB8 52%, #9A6472 120%) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3), 0 0 24px rgba(82, 123, 184, .08), inset 0 1px 0 rgba(255, 255, 255, .16) !important
}

html.dark button.login-nav-btn:hover,
html.dark [data-open-login].login-nav-btn:hover {
    background: linear-gradient(135deg, #4C74A0 0%, #6088C0 50%, #A86E7B 120%) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .36), 0 0 28px rgba(126, 166, 224, .11), inset 0 1px 0 rgba(255, 255, 255, .2) !important
}

html.dark .login-nav-btn {
    border-color: rgba(175, 203, 245, .15);
    background: linear-gradient(135deg, #426892 0%, #527BB8 48%, #9A6472 120%);
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3), 0 0 24px rgba(82, 123, 184, .08), inset 0 1px 0 rgba(255, 255, 255, .16)
}

html.dark .login-nav-btn:hover {
    background: linear-gradient(135deg, #4C74A0 0%, #6088C0 50%, #A86E7B 120%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .36), 0 0 28px rgba(126, 166, 224, .11), inset 0 1px 0 rgba(255, 255, 255, .2)
}

.login-nav-btn {
    background: transparent
}

.login-nav-btn:hover {
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 8px 20px rgba(48, 68, 95, .07);
    transform: translateY(-1px)
}

html.dark .login-nav-btn {
    color: #e2e8f0
}

html.dark .login-nav-btn:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: none
}

.conference-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #30445f, #476786);
    box-shadow: 0 12px 28px rgba(48, 68, 95, .22), inset 0 1px 1px rgba(255, 255, 255, .18);
    transition: all .3s cubic-bezier(.2, .8, .2, 1)
}

.conference-btn:before {
    content: "";
    position: absolute;
    top: -100%;
    left: -35%;
    width: 40%;
    height: 300%;
    transform: rotate(25deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transition: left .65s ease
}

.conference-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 34px rgba(48, 68, 95, .28)
}

.conference-btn:hover:before {
    left: 120%
}

html.dark .conference-btn {
    background: linear-gradient(135deg, #26384f, #385775);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28), inset 0 1px 1px rgba(255, 255, 255, .1)
}

/* =========================================================
   TOP UTILITIES
   ========================================================= */
.top-utilities {
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .72);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    box-shadow: 0 18px 50px rgba(48, 68, 95, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease
}

html.dark .top-utilities {
    background: rgba(14, 22, 35, .94);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.top-utility-btn {
    display: inline-flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 999px;
    padding: 0 .7rem;
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
    transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease
}

.top-utility-btn:hover {
    background: rgba(237, 244, 255, .9);
    color: #30445f;
    box-shadow: 0 5px 14px rgba(48, 68, 95, .08);
    transform: translateY(-1px)
}

html.dark .top-utility-btn {
    color: #cbd5e1
}

html.dark .top-utility-btn:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    box-shadow: none
}

/* =========================================================
   MOBILE NAV
   ========================================================= */
.hamburger-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 20px;
    background: #30445f;
    transition: all .3s ease
}

html.dark .hamburger-icon span {
    background: #e2e8f0
}

.hamburger-icon span:nth-child(1) {
    top: 1px
}

.hamburger-icon span:nth-child(2) {
    top: 7px;
    right: 0;
    left: auto;
    width: 72%
}

.hamburger-icon span:nth-child(3) {
    top: 13px
}

.mobile-menu-button.is-open .hamburger-icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg)
}

.mobile-menu-button.is-open .hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: translateX(6px)
}

.mobile-menu-button.is-open .hamburger-icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg)
}

.mobile-menu-panel.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1)
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: .85rem 1rem;
    color: #64748b;
    font-size: .875rem;
    transition: all .2s ease
}

.mobile-nav-link:hover {
    background: rgba(255, 255, 255, .9);
    color: #30445f
}

.mobile-nav-link.is-active {
    color: #fff;
    font-weight: 500;
    background: linear-gradient(135deg, #527BB8, #C86D79);
    box-shadow: 0 6px 17px rgba(82, 123, 184, .18)
}

html.dark .mobile-nav-link {
    color: #94a3b8
}

html.dark .mobile-nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff
}

html.dark .mobile-nav-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, #527BB8, #A96673)
}

.nav-logo-wrap {
    background: rgba(255, 255, 255, .64);
    border: 1px solid rgba(255, 255, 255, .82);
    box-shadow: 0 8px 20px rgba(48, 68, 95, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: transform .3s ease, box-shadow .3s ease
}

.group:hover .nav-logo-wrap {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 26px rgba(48, 68, 95, .13)
}

html.dark .nav-logo-wrap {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22)
}

.nav-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    border: 0;
    border-radius: 14px;
    padding: .68rem .8rem;
    color: #64748b;
    background: transparent;
    font-family: inherit;
    font-size: .96rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .25s ease, transform .25s ease, text-shadow .25s ease
}

.nav-pill:hover {
    color: #30445f;
    transform: translateY(-1px)
}

.nav-main-icon {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: #8294aa;
    font-size: 11px;
    transition: color .25s ease, transform .25s ease
}

.nav-pill:hover .nav-main-icon {
    color: #527BB8;
    transform: translateY(-1px)
}

.nav-pill>span:not(.nav-main-icon) {
    position: relative;
    display: inline-block
}

.nav-pill>span:not(.nav-main-icon):after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #527BB8, #7EA6E0, #E78E9A);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease
}

.nav-pill:hover>span:not(.nav-main-icon):after {
    opacity: .4;
    transform: scaleX(1)
}

.nav-pill.is-active {
    font-weight: 600;
    background: transparent
}

.nav-pill.is-active>span:not(.nav-main-icon) {
    background: linear-gradient(90deg, #527BB8, #7188B2 45%, #C86D79);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.nav-pill.is-active>span:not(.nav-main-icon):after {
    height: 2.5px;
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 2px 8px rgba(82, 123, 184, .18)
}

.nav-pill.is-active .nav-main-icon {
    color: #527BB8
}

.nav-dropdown-arrow {
    margin-left: .05rem;
    color: #94a3b8;
    font-size: 9px;
    transition: transform .25s ease, color .25s ease
}

.nav-dropdown:hover>.nav-dropdown-toggle .nav-dropdown-arrow,
.nav-dropdown.is-open>.nav-dropdown-toggle .nav-dropdown-arrow {
    color: #527BB8;
    transform: rotate(180deg)
}

html.dark .nav-pill {
    color: #a1adbd
}

html.dark .nav-pill:hover {
    color: #f1f5f9
}

html.dark .nav-pill .nav-main-icon {
    color: #8190a5
}

html.dark .nav-pill:hover .nav-main-icon {
    color: #AFCBF5
}

html.dark .nav-pill.is-active>span:not(.nav-main-icon) {
    background: linear-gradient(90deg, #AFCBF5, #9CB8E2 45%, #F6B8C2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

html.dark .nav-pill.is-active .nav-main-icon {
    color: #AFCBF5
}

html.dark .nav-pill>span:not(.nav-main-icon):after {
    background: linear-gradient(90deg, #AFCBF5, #9CB8E2, #F6B8C2)
}

.dropdown-header strong {
    font-size: .88rem
}

.dropdown-header small {
    font-size: .69rem
}

.dropdown-link {
    font-size: .86rem
}

.submenu-title {
    font-size: .82rem
}

.submenu-link {
    font-size: .84rem
}

.dropdown-side-arrow {
    font-size: 9px
}

.mobile-main-link,
.mobile-dropdown-toggle {
    font-size: .91rem
}

.mobile-dropdown-content a {
    font-size: .84rem
}

.mobile-dropdown-arrow {
    font-size: 10px
}

/* =========================================================
   LOGIN / AUTH MODAL
   ========================================================= */
.login-modal {
    overflow-x: hidden;
    visibility: hidden;
    pointer-events: none !important;
    opacity: 0;
    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.login-modal.is-open {
    visibility: visible;
    pointer-events: auto !important;
    opacity: 1;
}

/* =========================================================
   LOGIN DIALOG
   ========================================================= */
.login-dialog {
    width: calc(100vw - 24px);
    max-width: 470px;
    max-height: calc(100dvh - 24px);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    /* ซ่อน scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */

    pointer-events: none;
    opacity: 0;
    transform: translateY(28px) scale(.96);

    transition:
        opacity .3s ease,
        transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* Chrome / Safari */
.login-dialog::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.login-dialog-scroll {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.login-dialog-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.login-modal.is-open .login-dialog {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================
   PREVENT HIDDEN MODAL INTERACTION
   ========================================================= */
.login-modal:not(.is-open) .login-dialog,
.login-modal:not(.is-open) .login-dialog *,
.login-modal:not(.is-open) button,
.login-modal:not(.is-open) a,
.login-modal:not(.is-open) input,
.login-modal:not(.is-open) select,
.login-modal:not(.is-open) textarea,
.login-modal:not(.is-open) [role="button"] {
    pointer-events: none !important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
.login-dialog::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.login-dialog * {
    box-sizing: border-box;
}

.login-dialog p,
.login-dialog label {
    letter-spacing: .005em;
}

/* =========================================================
   DARK MODE
   ========================================================= */
html.dark .login-dialog {
    border-color: rgba(255, 255, 255, .08) !important;
    background: linear-gradient(145deg,
            rgba(17, 25, 39, .98),
            rgba(13, 21, 34, .97)) !important;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, .52),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:479px) {
    .login-dialog {
        width: calc(100vw - 20px);
        max-width: none;
        transform: translateY(22px) scale(.97);
    }

    .login-modal.is-open .login-dialog {
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce) {

    .login-modal,
    .login-dialog {
        transition: none !important;
    }
}

/* =========================================================
   MODAL DECORATION
   ========================================================= */
.login-modal-shine {
    background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 35%, transparent 65%, rgba(255, 255, 255, .18))
}

html.dark .login-modal-shine {
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), transparent 35%, transparent 65%, rgba(126, 166, 224, .035))
}

/* =========================================================
   LOGO
   ========================================================= */
.login-logo-card {
    border: 1px solid rgba(255, 255, 255, .9);
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(237, 244, 255, .8));
    box-shadow: 0 10px 25px rgba(82, 123, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .95)
}

html.dark .login-logo-card {
    border-color: rgba(255, 255, 255, .09);
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(126, 166, 224, .045));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .055)
}

/* =========================================================
   LOGIN INPUT
   ========================================================= */
.login-input {
    min-width: 0;
    box-shadow: inset 0 1px 2px rgba(48, 68, 95, .025)
}

.login-input:hover {
    border-color: rgba(126, 166, 224, .45)
}

.login-input:focus {
    border-color: rgba(126, 166, 224, .7);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(126, 166, 224, .1), inset 0 1px 2px rgba(48, 68, 95, .025)
}

.login-input::placeholder {
    color: #a9b3c2
}

html.dark .login-input {
    border-color: rgba(255, 255, 255, .09) !important;
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2)
}

html.dark .login-input::placeholder {
    color: #64748b
}

html.dark .login-input:hover {
    border-color: rgba(126, 166, 224, .32) !important
}

html.dark .login-input:focus {
    border-color: rgba(126, 166, 224, .58) !important;
    background: rgba(255, 255, 255, .065) !important;
    box-shadow: 0 0 0 4px rgba(126, 166, 224, .08)
}

/* =========================================================
   LOGIN SUBMIT
   ========================================================= */
.login-submit-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #527BB8 0%, #6F8FC1 45%, #C86D79 100%);
    box-shadow: 0 16px 32px rgba(82, 123, 184, .25), inset 0 1px 1px rgba(255, 255, 255, .25);
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease
}

.login-submit-btn:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .24), transparent);
    transform: translateX(-110%);
    transition: transform .65s ease
}

.login-submit-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.05);
    box-shadow: 0 20px 38px rgba(82, 123, 184, .32)
}

.login-submit-btn:hover:before {
    transform: translateX(110%)
}

.login-submit-btn>i,
.login-submit-btn>svg,
.login-submit-btn>span {
    position: relative;
    z-index: 1
}

html.dark .login-submit-btn {
    background: linear-gradient(135deg, #496F9F 0%, #527BB8 48%, #9C6472 115%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .34), 0 0 25px rgba(82, 123, 184, .08), inset 0 1px 1px rgba(255, 255, 255, .13)
}

/* =========================================================
   SOCIAL LOGIN
   ========================================================= */
.social-login-btn {
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8)
}

.social-login-btn:hover {
    border-color: rgba(148, 163, 184, .45);
    box-shadow: 0 10px 24px rgba(48, 68, 95, .09), inset 0 1px 0 rgba(255, 255, 255, .9)
}

html.dark .social-login-btn {
    border-color: rgba(255, 255, 255, .08) !important;
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, .05) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)
}

html.dark .social-login-btn:hover {
    border-color: rgba(255, 255, 255, .13) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .06)
}

/* =========================================================
   AUTH SLIDER
   ========================================================= */
.auth-slider {
    width: 100%;
    overflow: hidden
}

.auth-slider-track {
    display: flex;
    width: 200%;
    align-items: flex-start;
    transform: translateX(0);
    transition: transform .48s cubic-bezier(.22, 1, .36, 1)
}

.auth-slider.is-forgot .auth-slider-track {
    transform: translateX(-50%)
}

.auth-slide {
    width: 50%;
    min-width: 50%;
    padding: 1px
}

/* =========================================================
   CAPTCHA
   ========================================================= */
.captcha-card {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(126, 166, 224, .16);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(237, 244, 255, .68), rgba(255, 255, 255, .88), rgba(255, 240, 243, .5));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 28px rgba(48, 68, 95, .055)
}

.captcha-image-wrap {
    position: relative;
    display: flex;
    height: 78px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    background: linear-gradient(135deg, #f8fbff, #fff, #fff7f8);
    box-shadow: inset 0 1px 2px rgba(48, 68, 95, .035)
}

.captcha-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none
}

.captcha-refresh {
    position: absolute;
    top: 50%;
    right: 9px;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 11px;
    color: #527BB8;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(48, 68, 95, .09);
    transform: translateY(-50%);
    transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease
}

.captcha-refresh:hover {
    color: #C86D79;
    background: #fff;
    transform: translateY(-50%) rotate(90deg) scale(1.05);
    box-shadow: 0 7px 18px rgba(48, 68, 95, .12)
}

.captcha-refresh.is-loading i {
    animation: captcha-spin .65s linear infinite
}

.captcha-input-wrap {
    position: relative;
    margin-top: 9px
}

.captcha-input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: #8491a4;
    font-size: 12px;
    transform: translateY(-50%);
    transition: color .2s ease
}

.captcha-input {
    display: block;
    width: 100%;
    height: 46px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 14px;
    padding: 0 14px 0 41px;
    color: #30445F;
    background: rgba(255, 255, 255, .9);
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    outline: none;
    text-transform: uppercase;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease
}

.captcha-input:focus {
    border-color: rgba(126, 166, 224, .75);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(126, 166, 224, .1)
}

.captcha-input:focus~.captcha-input-icon {
    color: #527BB8
}

.captcha-input::placeholder {
    color: #94a3b8;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none
}

.captcha-security-label {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    border: 1px solid rgba(126, 166, 224, .08);
    border-radius: 999px;
    padding: .28rem .52rem;
    color: #527BB8;
    background: rgba(237, 244, 255, .9);
    font-size: 10px;
    font-weight: 500
}

.captcha-security-label i {
    font-size: 9px
}

.captcha-help {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .6rem .25rem .1rem;
    color: #6f7d91;
    font-size: 11px;
    font-weight: 300;
    line-height: 1.55
}

.captcha-help i {
    margin-top: 3px;
    color: #7EA6E0;
    font-size: 9px
}

html.dark .captcha-card {
    border-color: rgba(126, 166, 224, .12);
    background: linear-gradient(145deg, rgba(82, 123, 184, .085), rgba(255, 255, 255, .028), rgba(200, 109, 121, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .12)
}

html.dark .captcha-image-wrap {
    border-color: rgba(255, 255, 255, .07);
    background: #0e1724
}

html.dark .captcha-refresh {
    border-color: rgba(255, 255, 255, .08);
    color: #AFCBF5;
    background: rgba(18, 27, 42, .88);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2)
}

html.dark .captcha-refresh:hover {
    color: #F6B8C2;
    background: #192438
}

html.dark .captcha-input-icon {
    color: #718096
}

html.dark .captcha-input {
    border-color: rgba(255, 255, 255, .09);
    color: #f1f5f9;
    background: rgba(255, 255, 255, .045)
}

html.dark .captcha-input::placeholder {
    color: #64748b
}

html.dark .captcha-input:focus {
    border-color: rgba(126, 166, 224, .58);
    background: rgba(255, 255, 255, .065);
    box-shadow: 0 0 0 4px rgba(126, 166, 224, .08)
}

html.dark .captcha-security-label {
    border-color: rgba(175, 203, 245, .08);
    color: #AFCBF5;
    background: rgba(82, 123, 184, .13)
}

html.dark .captcha-help {
    color: #8997aa
}

html.dark .captcha-help i {
    color: #9CB8E2
}

@keyframes captcha-spin {
    to {
        transform: rotate(360deg)
    }
}

/* =========================================================
   FORGOT PASSWORD
   ========================================================= */
.forgot-header {
    display: flex;
    align-items: flex-start;
    gap: .8rem
}

.forgot-header-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(126, 166, 224, .1);
    border-radius: 14px;
    color: #527BB8;
    background: linear-gradient(145deg, #EDF4FF, #FFF0F3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 7px 18px rgba(48, 68, 95, .06)
}

html.dark .forgot-header-icon {
    border-color: rgba(255, 255, 255, .07);
    color: #AFCBF5;
    background: linear-gradient(145deg, rgba(82, 123, 184, .16), rgba(200, 109, 121, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 20px rgba(0, 0, 0, .16)
}

.forgot-submit-btn {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .8rem;
    border: 1px solid rgba(82, 123, 184, .1);
    border-radius: 17px;
    padding: .8rem .95rem;
    color: #fff;
    text-align: left;
    background: linear-gradient(135deg, #527BB8, #6F8FC1 48%, #C86D79);
    box-shadow: 0 14px 30px rgba(82, 123, 184, .22);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease
}

.forgot-submit-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.05);
    box-shadow: 0 18px 36px rgba(82, 123, 184, .29)
}

.forgot-submit-btn:disabled {
    cursor: not-allowed;
    transform: none;
    filter: saturate(.75)
}

.forgot-submit-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18)
}

.forgot-submit-btn strong {
    display: block;
    font-size: 13px;
    font-weight: 500
}

.forgot-submit-btn small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 300
}

html.dark .forgot-submit-btn {
    background: linear-gradient(135deg, #496F9F, #527BB8 50%, #986573);
    box-shadow: 0 15px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1)
}

.forgot-security-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 14px;
    border: 1px solid rgba(126, 166, 224, .08);
    border-radius: 14px;
    padding: .72rem .82rem;
    color: #67758a;
    background: rgba(237, 244, 255, .55);
    font-size: 10px;
    line-height: 1.6
}

.forgot-security-note i {
    margin-top: 2px;
    color: #527BB8;
    font-size: 10px
}

html.dark .forgot-security-note {
    border-color: rgba(255, 255, 255, .055);
    color: #8e9caf;
    background: rgba(82, 123, 184, .075)
}

html.dark .forgot-security-note i {
    color: #AFCBF5
}

/* =========================================================
   AUTH TYPOGRAPHY DARK MODE
   ========================================================= */
html.dark #loginDialog .text-slate-600 {
    color: #a9b6c7 !important
}

html.dark #loginDialog .text-slate-500 {
    color: #94a3b8 !important
}

html.dark #loginDialog .text-slate-400 {
    color: #7f8da3 !important
}

html.dark #loginDialog label {
    color: #cbd5e1
}

html.dark #loginDialog [data-show-forgot] {
    color: #AFCBF5
}

html.dark #loginDialog [data-show-forgot]:hover {
    color: #F6B8C2
}

html.dark #loginDialog [data-show-login] {
    color: #94a3b8
}

html.dark #loginDialog [data-show-login]:hover {
    color: #AFCBF5
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:479px) {
    .login-dialog {
        width: calc(100vw - 20px);
        max-width: none
    }

    .login-logo-card {
        width: 50px;
        height: 50px
    }

    .captcha-image-wrap {
        height: 72px
    }

    .forgot-header-icon {
        display: none
    }

    .captcha-help {
        font-size: 10px
    }

    .captcha-security-label {
        font-size: 9px
    }
}

@media(prefers-reduced-motion:reduce) {
    .auth-slider-track {
        transition: none
    }

    .captcha-refresh {
        transition: none
    }
}

/* =========================================================
   TAILWIND LIGHT CLASSES DARK OVERRIDES
   ช่วยกรณี element เดิมใช้ bg-white / text-slate...
   ========================================================= */
html.dark .bg-white {
    background-color: #121b2a !important
}

html.dark .bg-white\/80 {
    background-color: rgba(18, 27, 42, .8) !important
}

html.dark .bg-white\/70 {
    background-color: rgba(18, 27, 42, .7) !important
}

html.dark .bg-white\/65 {
    background-color: rgba(18, 27, 42, .65) !important
}

html.dark .bg-white\/50 {
    background-color: rgba(18, 27, 42, .5) !important
}

html.dark .bg-slate-50 {
    background-color: #101927 !important
}

html.dark .bg-slate-100 {
    background-color: #162131 !important
}

html.dark .text-psct-navy {
    color: #f1f5f9 !important
}

html.dark .text-slate-700 {
    color: #cbd5e1 !important
}

html.dark .text-slate-600 {
    color: #b4c0d0 !important
}

html.dark .text-slate-500 {
    color: #94a3b8 !important
}

html.dark .text-slate-400 {
    color: #7f8da3 !important
}

html.dark .border-white\/80,
html.dark .border-white\/70,
html.dark .border-white {
    border-color: rgba(255, 255, 255, .08) !important
}

html.dark .border-slate-200,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/80 {
    border-color: rgba(255, 255, 255, .08) !important
}

html.dark .shadow-slate-200\/40,
html.dark .shadow-slate-300,
html.dark .shadow-slate-300\/70 {
    --tw-shadow-color: rgba(0, 0, 0, .22) !important
}

.psct-footer {
    position: relative;
    width: 100%;
    max-width: none;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: linear-gradient(180deg, #070b12 0%, #09111c 48%, #0b111b 100%);
}

.psct-footer .footer-light {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: min(1400px, 96%);
    height: 1px;
    pointer-events: none;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(126, 166, 224, .38), rgba(255, 255, 255, .9), rgba(231, 142, 154, .4), transparent);
    box-shadow: 0 0 14px rgba(255, 255, 255, .24), 0 0 38px rgba(126, 166, 224, .18);
}

.psct-footer::before {
    content: "";
    position: absolute;
    inset: -20% -8%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 100%, rgba(126, 166, 224, .58) 0%, rgba(126, 166, 224, .22) 20%, transparent 45%),
        radial-gradient(circle at 92% 100%, rgba(231, 142, 154, .58) 0%, rgba(231, 142, 154, .21) 21%, transparent 46%),
        radial-gradient(circle at 50% 115%, rgba(255, 255, 255, .11) 0%, transparent 42%);
    filter: blur(90px);
    opacity: .95;
}

.psct-footer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -220px;
    z-index: 0;
    width: min(1600px, 110vw);
    height: 430px;
    pointer-events: none;
    border-radius: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(126, 166, 224, .46) 0%, rgba(175, 203, 245, .18) 27%, rgba(255, 255, 255, .08) 50%, rgba(246, 184, 194, .18) 72%, rgba(231, 142, 154, .48) 100%);
    filter: blur(115px);
    opacity: .86;
}

.psct-footer>.footer-bottom-glow {
    z-index: 0;
}

.psct-footer>.footer-grid-pattern {
    z-index: 1;
}

.psct-footer>div.relative {
    position: relative;
    z-index: 3;
}

.footer-bottom-glow {
    height: 160px;
    background: radial-gradient(ellipse at 50% 120%, rgba(255, 255, 255, .055), transparent 65%);
    filter: blur(24px);
    opacity: .8;
}

.footer-grid-pattern {
    opacity: .018;
    background-image:
        linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 78%);
}

.footer-logo-card {
    display: flex;
    width: 66px;
    height: 66px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .03);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease
}

.footer-brand:hover .footer-logo-card {
    transform: translateY(-3px) scale(1.035);
    box-shadow: 0 20px 42px rgba(0, 0, 0, .3), 0 0 26px rgba(126, 166, 224, .09)
}

.footer-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 500
}

.footer-title i {
    width: 18px;
    color: #AFCBF5;
    font-size: 11px;
    text-align: center
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    margin-top: 1rem
}

.footer-links a {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: 11px;
    padding: .5rem .55rem;
    color: #8492a6;
    font-size: 11.5px;
    font-weight: 300;
    transition: color .2s ease, background .2s ease, transform .2s ease
}

.footer-links a i {
    width: 15px;
    color: #60738c;
    font-size: 9.5px;
    text-align: center;
    transition: color .2s ease, transform .2s ease
}

.footer-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .045);
    transform: translateX(3px)
}

.footer-links a:hover i {
    color: #AFCBF5;
    transform: scale(1.08)
}

.footer-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 999px;
    padding: .52rem .75rem;
    color: #a9b6c7;
    background: rgba(255, 255, 255, .035);
    font-size: 10.5px;
    backdrop-filter: blur(14px);
    transition: all .22s ease
}

.footer-action i {
    color: #AFCBF5;
    font-size: 9px
}

.footer-action:hover {
    border-color: rgba(175, 203, 245, .15);
    color: #fff;
    background: rgba(255, 255, 255, .065);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14)
}

.footer-bottom-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    color: #718096;
    background: none;
    font-family: inherit;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease
}

.footer-bottom-link i {
    font-size: 9px
}

.footer-bottom-link:hover {
    color: #e2e8f0;
    transform: translateY(-1px)
}

.footer-contact-card {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 26px;
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 18px 50px rgba(0, 0, 0, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.footer-contact-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500
}

.footer-contact-title i {
    width: 17px;
    color: #7EA6E0;
    font-size: 11px;
    text-align: center
}

.footer-contact-item {
    display: flex;
    gap: .8rem;
    color: #94a3b8;
    transition: color .25s ease, transform .25s ease
}

a.footer-contact-item:hover {
    color: #fff;
    transform: translateX(2px)
}

.footer-contact-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: #AFCBF5;
    font-size: 11px
}

.footer-contact-label {
    font-size: 9px;
    font-weight: 500;
    color: #64748b
}

.footer-contact-value {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 300;
    color: #aeb9c8;
    transition: color .25s ease
}

a.footer-contact-item:hover .footer-contact-value {
    color: #fff
}

.footer-social-btn {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: #94a3b8;
    font-size: 14px;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease
}

.footer-social-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .15);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16)
}

.footer-social-btn .fa-facebook-f {
    color: #AFCBF5
}

.footer-social-btn .fa-line {
    color: #9ED5B0
}

.footer-social-btn .fa-youtube {
    color: #F6B8C2
}

.footer-social-btn .fa-link {
    color: #cbd5e1
}

.footer-action-facebook:hover {
    border-color: #1877F2;
    background: #1877F2;
    color: #fff;
    box-shadow: 0 10px 24px rgba(24, 119, 242, .22)
}

.footer-action-line:hover {
    border-color: #06C755;
    background: #06C755;
    color: #fff;
    box-shadow: 0 10px 24px rgba(6, 199, 85, .22)
}

.footer-action-youtube:hover {
    border-color: #FF0000;
    background: #FF0000;
    color: #fff;
    box-shadow: 0 10px 24px rgba(255, 0, 0, .22)
}

.footer-action-facebook:hover i,
.footer-action-line:hover i,
.footer-action-youtube:hover i {
    color: #fff
}

@media(max-width:639px) {
    .psct-footer {
        margin-top: 0rem
    }

    .psct-footer:before {
        bottom: -150px;
        height: 270px;
        opacity: .68
    }

    .psct-footer:after {
        bottom: -90px;
        height: 150px;
        opacity: .58
    }

    .footer-logo-card {
        width: 58px;
        height: 58px;
        border-radius: 18px
    }

    .footer-logo-card img {
        width: 50px;
        height: 50px
    }
}

.university-logo-section {
    width: 100%;
    margin: 0 !important;
    padding: 14px 0 !important
}

.university-logo-section+footer,
.university-logo-section+.psct-footer {
    margin-top: 0 !important
}

.psct-footer {
    width: 100%;
    margin: 0 !important
}

@media(max-width:639px) {
    .university-logo-section {
        margin: 0 !important;
        padding: 10px 0 !important
    }

    .psct-footer {
        margin-top: 0 !important
    }
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top {
    border: 1px solid rgba(255, 255, 255, .78);
    color: #fff;
    background: linear-gradient(145deg, #527BB8, #6587B8 55%, #C86D79);
    box-shadow: 0 14px 30px rgba(48, 68, 95, .23), inset 0 1px 0 rgba(255, 255, 255, .25);
    backdrop-filter: blur(15px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease
}

.back-to-top.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0)
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 19px 38px rgba(48, 68, 95, .3), inset 0 1px 0 rgba(255, 255, 255, .3)
}

html.dark .back-to-top {
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 15px 32px rgba(0, 0, 0, .34)
}

/* =========================================================
   COOKIE CONSENT
   ========================================================= */
.cookie-consent.is-visible {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0)
}

.cookie-consent-card {
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 25px;
    padding: 1rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 25px 70px rgba(48, 68, 95, .18), inset 0 1px 0 rgba(255, 255, 255, .96);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%)
}

html.dark .cookie-consent-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(17, 25, 39, .94);
    box-shadow: 0 28px 75px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .045)
}

.cookie-icon {
    display: flex;
    width: 44px;
    height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #527BB8;
    background: linear-gradient(145deg, #EDF4FF, #FFF0F3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9)
}

html.dark .cookie-icon {
    color: #AFCBF5;
    background: linear-gradient(145deg, rgba(82, 123, 184, .16), rgba(200, 109, 121, .08))
}

.cookie-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    padding: .25rem .48rem;
    color: #527BB8;
    background: #EDF4FF;
    font-size: 8.5px;
    font-weight: 500
}

html.dark .cookie-badge {
    color: #AFCBF5;
    background: rgba(82, 123, 184, .12)
}

.cookie-btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 13px;
    padding: .58rem .85rem;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease
}

.cookie-btn:hover {
    transform: translateY(-1px)
}

.cookie-btn-primary {
    border: 1px solid rgba(82, 123, 184, .1);
    color: #fff;
    background: linear-gradient(135deg, #527BB8, #6F8FC1 48%, #C86D79);
    box-shadow: 0 9px 20px rgba(82, 123, 184, .2)
}

.cookie-btn-primary:hover {
    box-shadow: 0 13px 25px rgba(82, 123, 184, .28)
}

.cookie-btn-secondary {
    border: 1px solid rgba(148, 163, 184, .18);
    color: #64748b;
    background: rgba(255, 255, 255, .7)
}

.cookie-btn-secondary:hover {
    color: #30445f;
    background: #fff
}

html.dark .cookie-btn-secondary {
    border-color: rgba(255, 255, 255, .08);
    color: #a8b4c5;
    background: rgba(255, 255, 255, .045)
}

html.dark .cookie-btn-secondary:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08)
}

/* =========================================================
   COOKIE SETTINGS
   ========================================================= */
.cookie-settings-modal {
    transition: opacity .3s ease
}

.cookie-settings-modal.is-open {
    pointer-events: auto;
    opacity: 1
}

.cookie-settings-modal.is-open .cookie-settings-dialog {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.cookie-settings-icon {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #527BB8;
    background: linear-gradient(145deg, #EDF4FF, #FFF0F3)
}

html.dark .cookie-settings-icon {
    color: #AFCBF5;
    background: linear-gradient(145deg, rgba(82, 123, 184, .15), rgba(200, 109, 121, .08))
}

.cookie-setting-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 17px;
    padding: .85rem;
    background: rgba(248, 250, 252, .7);
    transition: border-color .2s ease, background .2s ease
}

.cookie-setting-row:hover {
    border-color: rgba(126, 166, 224, .22);
    background: #fff
}

html.dark .cookie-setting-row {
    border-color: rgba(255, 255, 255, .065);
    background: rgba(255, 255, 255, .025)
}

html.dark .cookie-setting-row:hover {
    border-color: rgba(126, 166, 224, .15);
    background: rgba(255, 255, 255, .045)
}

.cookie-setting-icon {
    display: flex;
    width: 35px;
    height: 35px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #7189a8;
    background: #EDF4FF;
    font-size: 10px
}

html.dark .cookie-setting-icon {
    color: #AFCBF5;
    background: rgba(82, 123, 184, .11)
}

.cookie-required {
    border-radius: 999px;
    padding: .28rem .55rem;
    color: #527BB8;
    background: #EDF4FF;
    font-size: 9px;
    font-weight: 500
}

html.dark .cookie-required {
    color: #AFCBF5;
    background: rgba(82, 123, 184, .11)
}

.cookie-switch {
    position: relative;
    width: 41px;
    height: 23px;
    flex: none;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .22s ease
}

.cookie-switch span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1)
}

.peer:checked+.cookie-switch {
    background: linear-gradient(135deg, #527BB8, #7EA6E0)
}

.peer:checked+.cookie-switch span {
    transform: translateX(18px)
}

html.dark .cookie-switch {
    background: #3a4759
}

/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */
@media(max-width:639px) {
    .psct-footer {
        margin-top: 4rem
    }

    .footer-logo-card {
        width: 58px;
        height: 58px;
        border-radius: 18px
    }

    .footer-logo-card img {
        width: 52px;
        height: 52px
    }

    .cookie-consent-card {
        border-radius: 21px;
        padding: .9rem
    }

    .cookie-btn {
        flex: 1
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:639px) {
    .top-utilities {
        transform: scale(.94);
        transform-origin: right center
    }

    .top-utility-btn {
        height: 30px;
        padding: 0 .6rem;
        font-size: 9px
    }

    #loginDialog {
        border-radius: 28px
    }
}

@media(max-width:480px) {
    .apple-card {
        width: min(88vw, 350px);
        padding: 30px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

/* =========================================================
   HOME PAGE
   ========================================================= */
/* =========================================================
   HERO VIDEO
   ========================================================= */
#home video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.hero-scroll-dot {
    animation: heroScrollDot 1.8s ease-in-out infinite
}

@keyframes heroScrollDot {
    0% {
        opacity: 0;
        transform: translateY(0)
    }

    25% {
        opacity: 1
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(15px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-scroll-dot {
        animation: none
    }

    .hero-slide {
        transition: none;
        transform: none
    }
}

/* =========================================================
   HERO MEDIA SLIDER
   ========================================================= */
.hero-slider {
    background: #08111b
}

.hero-slides {
    position: absolute;
    inset: 0
}

.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.01);
    transition: opacity .8s ease, visibility .8s ease, transform 1.2s ease
}

.hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1)
}

.hero-video,
.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.hero-video {
    pointer-events: none
}

.hero-video::-webkit-media-controls {
    display: none !important
}

.hero-video::-webkit-media-controls-enclosure {
    display: none !important
}

.hero-video::-webkit-media-controls-panel {
    display: none !important
}

.hero-video::-webkit-media-controls-play-button {
    display: none !important
}

.hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none
}

.hero-youtube-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #08111b
}

.hero-youtube-player,
.hero-youtube-player iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: max(100vw, 177.7777778vh) !important;
    height: max(56.25vw, 100vh) !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none
}

.hero-overlay-main {
    background: linear-gradient(90deg, rgba(6, 15, 25, .18), rgba(8, 20, 33, .04) 48%, rgba(8, 20, 33, .08))
}

.hero-overlay-bottom {
    background: linear-gradient(180deg, rgba(6, 14, 23, .08) 0%, transparent 35%, transparent 70%, rgba(6, 14, 23, .42) 100%)
}

.hero-pagination {
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12)
}

.hero-dot {
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer
}

.hero-dot span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    transition: width .3s ease, background .3s ease, box-shadow .3s ease
}

.hero-dot:hover span {
    background: rgba(255, 255, 255, .8)
}

.hero-dot.is-active {
    width: 32px
}

.hero-dot.is-active span {
    width: 24px;
    background: linear-gradient(90deg, #AFCBF5, #F6B8C2);
    box-shadow: 0 0 14px rgba(175, 203, 245, .3)
}

@media(prefers-reduced-motion:reduce) {
    .hero-slide {
        transition: none;
        transform: none
    }
}

/* =========================================================
   ACTIVITY / NEWS IMAGE MARQUEE
   ========================================================= */
.media-marquee {
    position: relative;
    width: 100%;
    overflow: hidden
}

.media-marquee-track {
    display: flex;
    width: max-content;
    gap: 14px;
    padding: 3px 7px;
    animation: mediaMarquee 42s linear infinite;
    will-change: transform
}

.media-marquee-reverse .media-marquee-track {
    animation-direction: reverse
}

.media-marquee:hover .media-marquee-track {
    animation-play-state: paused
}

@keyframes mediaMarquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.media-card {
    position: relative;
    width: clamp(260px, 30vw, 430px);
    height: 165px;
    flex: none;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 20px;
    background: #e8eef6;
    box-shadow: 0 8px 28px rgba(48, 68, 95, .08);
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease
}

.media-card:hover {
    z-index: 2;
    border-color: rgba(175, 203, 245, .8);
    box-shadow: 0 18px 45px rgba(48, 68, 95, .16);
    transform: translateY(-3px)
}

html.dark .media-card {
    border-color: rgba(255, 255, 255, .07);
    background: #152131;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18)
}

html.dark .media-card:hover {
    border-color: rgba(175, 203, 245, .24);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .3)
}

.media-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .45s ease, transform .65s cubic-bezier(.2, .8, .2, 1), filter .45s ease
}

.media-card-image.is-loaded {
    opacity: 1
}

.media-card:hover .media-card-image {
    transform: scale(1.035);
    filter: saturate(1.04)
}

.media-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 14, 24, .08) 58%, rgba(6, 14, 24, .72) 100%);
    opacity: .72;
    transition: opacity .35s ease
}

.media-card:hover .media-card-overlay {
    opacity: .92
}

.media-card-caption {
    position: absolute;
    right: 14px;
    bottom: 12px;
    left: 14px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease
}

.media-card:hover .media-card-caption {
    opacity: 1;
    transform: translateY(0)
}

.media-card-arrow {
    display: flex;
    width: 29px;
    height: 29px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    font-size: 9px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.media-skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(110deg, #e9eef5 8%, #f5f7fa 18%, #e9eef5 33%);
    background-size: 200% 100%;
    animation: mediaSkeleton 1.35s linear infinite;
    transition: opacity .35s ease
}

html.dark .media-skeleton {
    background: linear-gradient(110deg, #172231 8%, #202d3e 18%, #172231 33%);
    background-size: 200% 100%
}

.media-skeleton.is-hidden {
    pointer-events: none;
    opacity: 0
}

@keyframes mediaSkeleton {
    to {
        background-position-x: -200%
    }
}

.media-marquee-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 70px;
    pointer-events: none
}

.media-marquee-fade-left {
    left: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .78) 24%, transparent 100%)
}

.media-marquee-fade-right {
    right: 0;
    background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, .78) 24%, transparent 100%)
}

html.dark .media-marquee-fade-left {
    background: linear-gradient(90deg, #0f1722 0%, rgba(15, 23, 34, .82) 24%, transparent 100%)
}

html.dark .media-marquee-fade-right {
    background: linear-gradient(270deg, #0f1722 0%, rgba(15, 23, 34, .82) 24%, transparent 100%)
}

@media(max-width:767px) {
    .media-marquee-track {
        gap: 10px;
        animation-duration: 34s
    }

    .media-card {
        width: 285px;
        height: 135px;
        border-radius: 17px
    }

    .media-marquee-fade {
        width: 28px
    }

    .media-card-caption {
        opacity: 1;
        transform: none
    }
}

@media(min-width:1280px) {
    .media-card {
        height: 170px
    }
}

@media(prefers-reduced-motion:reduce) {
    .media-marquee-track {
        animation-play-state: paused
    }
}

/* =========================================================
   FEATURED EVENT
   ========================================================= */
.event-feature-card {
    isolation: isolate
}

.event-feature-bg {
    z-index: 0;
    opacity: .24;
    filter: saturate(.85) contrast(.95);
    transform: scale(1.04);
    animation: eventBgFloat 14s ease-in-out infinite alternate
}

.event-feature-overlay {
    z-index: 1;
    background: linear-gradient(105deg, rgba(48, 68, 95, .97) 0%, rgba(48, 68, 95, .93) 42%, rgba(22, 35, 52, .82) 70%, rgba(18, 29, 44, .72) 100%)
}

.event-feature-glow {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(70px);
    opacity: .28
}

.event-feature-glow-blue {
    top: -90px;
    right: 15%;
    width: 300px;
    height: 300px;
    background: #7EA6E0;
    animation: eventGlowBlue 8s ease-in-out infinite alternate
}

.event-feature-glow-red {
    bottom: -130px;
    left: 32%;
    width: 280px;
    height: 280px;
    background: #E78E9A;
    animation: eventGlowRed 10s ease-in-out infinite alternate
}

.event-register-btn[aria-disabled="true"] {
    cursor: not-allowed;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .5);
    box-shadow: none;
    filter: none;
    transform: none
}

.event-register-btn[aria-disabled="true"]:before {
    display: none
}

.event-register-btn[aria-disabled="true"] .event-register-icon {
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .45)
}

@keyframes eventBgFloat {
    0% {
        transform: scale(1.04) translate3d(0, 0, 0)
    }

    100% {
        transform: scale(1.08) translate3d(-8px, -4px, 0)
    }
}

@keyframes eventGlowBlue {
    0% {
        transform: translate3d(0, 0, 0) scale(1)
    }

    100% {
        transform: translate3d(30px, 20px, 0) scale(1.15)
    }
}

@keyframes eventGlowRed {
    0% {
        transform: translate3d(0, 0, 0) scale(1)
    }

    100% {
        transform: translate3d(-25px, -20px, 0) scale(1.12)
    }
}

.event-countdown-box {
    display: flex;
    min-height: 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease
}

.event-countdown-box:hover {
    transform: translateY(-2px);
    border-color: rgba(175, 203, 245, .24);
    background: rgba(255, 255, 255, .11)
}

.event-countdown-number {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums
}

.event-countdown-label {
    margin-top: 7px;
    font-size: 9px;
    font-weight: 300;
    color: rgba(255, 255, 255, .52)
}

.event-ended {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(246, 184, 194, .18);
    border-radius: 999px;
    background: rgba(231, 142, 154, .13);
    padding: .55rem .85rem;
    color: #F6B8C2;
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.event-ended.hidden {
    display: none
}

.event-register-btn {
    position: relative;
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 17px;
    background: linear-gradient(135deg, #E78E9A 0%, #C86D79 100%);
    padding: .8rem 1.35rem;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 14px 35px rgba(200, 109, 121, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, filter .3s ease
}

.event-register-btn:before {
    content: "";
    position: absolute;
    top: -80%;
    left: -55%;
    width: 45%;
    height: 260%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: rotate(18deg);
    animation: eventCtaShine 4.5s ease-in-out infinite
}

.event-register-btn:hover {
    transform: translateY(-3px) scale(1.015);
    filter: saturate(1.06);
    box-shadow: 0 20px 45px rgba(200, 109, 121, .38), 0 0 0 5px rgba(231, 142, 154, .08)
}

.event-register-icon {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    font-size: 11px
}

@keyframes eventCtaShine {

    0%,
    65% {
        left: -60%
    }

    100% {
        left: 135%
    }
}

.event-detail-btn {
    position: relative;
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 17px;
    background: linear-gradient(135deg, #7EA6E0 0%, #527BB8 100%);
    padding: .8rem 1.35rem;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 14px 35px rgba(82, 123, 184, .25), inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, filter .3s ease
}

.event-detail-btn:before {
    content: "";
    position: absolute;
    top: -80%;
    left: -55%;
    width: 45%;
    height: 260%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: rotate(18deg);
    animation: eventDetailShine 5s ease-in-out infinite
}

.event-detail-btn:hover {
    transform: translateY(-3px) scale(1.015);
    filter: saturate(1.08);
    box-shadow: 0 20px 45px rgba(82, 123, 184, .34), 0 0 0 5px rgba(126, 166, 224, .08)
}

.event-detail-icon {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    font-size: 11px
}

@keyframes eventDetailShine {

    0%,
    68% {
        left: -60%
    }

    100% {
        left: 135%
    }
}

.event-video-card {
    transform: translateZ(0);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease
}

.event-video-card:hover {
    border-color: rgba(175, 203, 245, .22);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .28);
    transform: translateY(-4px)
}

@media(max-width:639px) {
    .event-countdown-box {
        min-height: 68px;
        border-radius: 15px
    }

    .event-countdown-number {
        font-size: 18px
    }

    .event-register-btn {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {

    .event-feature-bg,
    .event-feature-glow-blue,
    .event-feature-glow-red,
    .event-register-btn:before {
        animation: none
    }
}

/* =========================================================
   EVENT SCHEDULE
   ========================================================= */
.event-schedule-trigger {
    color: rgba(255, 255, 255, .78);
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease
}

.event-schedule-trigger:hover {
    border-color: rgba(175, 203, 245, .25);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    transform: translateY(-1px)
}

.event-schedule-trigger.is-open {
    border-color: rgba(175, 203, 245, .28);
    background: rgba(126, 166, 224, .15);
    color: #fff
}

.event-schedule-trigger.is-open .event-schedule-chevron {
    transform: rotate(180deg)
}

.event-schedule-panel {
    display: block;
    position: relative;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: max-height .65s cubic-bezier(.22, 1, .36, 1), opacity .32s ease, transform .4s ease, visibility .32s ease
}

.event-schedule-panel.is-open {
    max-height: 7000px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}

.event-schedule-day-panel {
    display: none;
    opacity: 0;
    visibility: hidden
}

.event-schedule-day-panel.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
    animation: eventScheduleIn .4s cubic-bezier(.2, .8, .2, 1) forwards
}

.event-schedule-tabs {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.event-schedule-tab {
    position: relative;
    display: flex;
    min-height: 62px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .5);
    transition: background .28s ease, border-color .28s ease, color .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease
}

.event-schedule-tab:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(126, 166, 224, .16), rgba(246, 184, 194, .08));
    opacity: 0;
    transition: opacity .28s ease
}

.event-schedule-tab>* {
    position: relative;
    z-index: 1
}

.event-schedule-tab:hover {
    border-color: rgba(175, 203, 245, .28);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12)
}

.event-schedule-tab:hover:before {
    opacity: 1
}

.event-schedule-tab.is-active {
    border-color: rgba(175, 203, 245, .45);
    background: linear-gradient(135deg, rgba(82, 123, 184, .78) 0%, rgba(126, 166, 224, .62) 55%, rgba(231, 142, 154, .34) 100%);
    color: #fff;
    box-shadow: 0 14px 34px rgba(82, 123, 184, .28), 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translateY(-2px)
}

.event-schedule-tab.is-active:before {
    opacity: 0
}

.event-schedule-tab.is-active .event-schedule-day {
    font-weight: 700
}

.event-schedule-tab.is-active .event-schedule-date {
    opacity: .9
}

.event-schedule-day {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em
}

.event-schedule-date {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 300;
    opacity: .62
}

.event-schedule-day-panel {
    display: none;
    opacity: 0;
    transform: translateY(8px)
}

.event-schedule-day-panel.is-active {
    display: block;
    animation: eventScheduleIn .45s cubic-bezier(.2, .8, .2, 1) forwards
}

@keyframes eventScheduleIn {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.event-schedule-location {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background: rgba(255, 255, 255, .045);
    padding: 17px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.event-schedule-subtitle {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    padding: 7px 11px;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap
}

.event-schedule-subtitle i {
    color: #F6B8C2;
    font-size: 12px
}

.event-schedule-location-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(126, 166, 224, .2), rgba(175, 203, 245, .08));
    color: #AFCBF5;
    font-size: 12px
}

.event-timeline {
    position: relative
}

.event-timeline-item {
    display: grid;
    grid-template-columns: 125px 42px minmax(0, 1fr);
    align-items: stretch
}

.event-timeline-time {
    padding: 20px 12px 20px 0;
    text-align: right;
    color: #AFCBF5;
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums
}

.event-timeline-rail {
    position: relative;
    display: flex;
    justify-content: center
}

.event-timeline-dot {
    position: relative;
    z-index: 2;
    display: flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    background: #253b57;
    color: #AFCBF5;
    font-size: 9px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .18)
}

.event-timeline-line {
    position: absolute;
    top: 46px;
    bottom: -15px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, rgba(175, 203, 245, .34), rgba(175, 203, 245, .06));
    transform: translateX(-50%)
}

.event-timeline-content {
    padding: 8px 0 8px 8px
}

.event-timeline-card {
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
    padding: 15px 17px;
    transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease
}

.event-timeline-item:hover .event-timeline-card {
    border-color: rgba(175, 203, 245, .16);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    transform: translateX(3px)
}

.event-timeline-card-title {
    font-size: 13px;
    font-weight: 500;
    color: #fff
}

.event-timeline-dot-registration {
    background: rgba(126, 166, 224, .18);
    color: #AFCBF5
}

.event-timeline-dot-ceremony {
    background: rgba(246, 184, 194, .17);
    color: #F6B8C2
}

.event-timeline-dot-lecture {
    background: rgba(126, 166, 224, .18);
    color: #AFCBF5
}

.event-timeline-dot-break,
.event-timeline-dot-meal {
    background: rgba(255, 197, 113, .13);
    color: #ffd59a
}

.event-timeline-dot-presentation {
    background: rgba(139, 202, 161, .14);
    color: #aee2be
}

.event-timeline-dot-party {
    background: rgba(246, 184, 194, .17);
    color: #F6B8C2
}

.event-timeline-dot-travel {
    background: rgba(175, 203, 245, .15);
    color: #AFCBF5
}

.event-timeline-dot-workshop {
    background: rgba(139, 202, 161, .14);
    color: #aee2be
}

.event-schedule-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
    border: 1px solid rgba(246, 184, 194, .1);
    border-radius: 14px;
    background: rgba(231, 142, 154, .07);
    padding: 11px 13px;
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
    font-weight: 300
}

.event-schedule-note i {
    margin-top: 2px;
    color: #F6B8C2;
    font-size: 9px
}

html.dark .event-schedule-location {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025)
}

html.dark .event-timeline-card {
    border-color: rgba(255, 255, 255, .055);
    background: rgba(255, 255, 255, .025)
}

html.dark .event-timeline-item:hover .event-timeline-card {
    border-color: rgba(175, 203, 245, .12);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18)
}

html.dark .event-schedule-subtitle {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .035)
}

html.dark .event-schedule-note {
    border-color: rgba(246, 184, 194, .08);
    background: rgba(231, 142, 154, .055)
}

html.dark .event-schedule-tabs {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .18)
}

html.dark .event-schedule-tab {
    border-color: rgba(255, 255, 255, .05);
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .42)
}

html.dark .event-schedule-tab:hover {
    border-color: rgba(175, 203, 245, .2);
    background: rgba(255, 255, 255, .06);
    color: #fff
}

html.dark .event-schedule-tab.is-active {
    border-color: rgba(175, 203, 245, .38);
    background: linear-gradient(135deg, rgba(82, 123, 184, .72) 0%, rgba(126, 166, 224, .54) 58%, rgba(200, 109, 121, .30) 100%);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28), 0 0 26px rgba(82, 123, 184, .14), inset 0 1px 0 rgba(255, 255, 255, .12)
}

@media(max-width:639px) {
    .event-schedule-tab {
        min-height: 55px
    }

    .event-schedule-day {
        font-size: 10px
    }

    .event-schedule-date {
        font-size: 8px
    }

    .event-timeline-item {
        grid-template-columns: 34px minmax(0, 1fr)
    }

    .event-timeline-time {
        grid-column: 2;
        padding: 13px 0 0;
        text-align: left;
        font-size: 10px
    }

    .event-timeline-rail {
        grid-column: 1;
        grid-row: 1/3
    }

    .event-timeline-content {
        grid-column: 2;
        padding: 5px 0 10px 7px
    }

    .event-timeline-dot {
        width: 28px;
        height: 28px;
        margin-top: 12px;
        border-radius: 10px
    }

    .event-timeline-line {
        top: 40px;
        bottom: -10px
    }

    .event-timeline-card {
        padding: 13px 14px
    }

    .event-schedule-location {
        flex-direction: column
    }

    .event-schedule-subtitle {
        margin-left: 52px;
        white-space: normal
    }
}

@media(prefers-reduced-motion:reduce) {

    .event-schedule-panel,
    .event-schedule-day-panel,
    .event-schedule-tab,
    .event-timeline-card {
        animation: none;
        transition: none
    }
}

.news-slider-track {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    will-change: transform
}

.news-slider-nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #64748b;
    font-size: 11px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(-50%);
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, opacity .25s ease
}

.news-slider-nav-left {
    left: -22px
}

.news-slider-nav-right {
    right: -22px
}

.news-slider-nav:hover {
    transform: translateY(-50%) scale(1.08);
    background: #fff;
    color: #30445F;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .16)
}

.news-slider-nav-primary {
    border-color: #527BB8;
    background: #527BB8;
    color: #fff
}

.news-slider-nav-primary:hover {
    background: #7EA6E0;
    color: #fff
}

.news-slider-nav:disabled {
    pointer-events: none;
    opacity: .28
}

html.dark .news-slider-nav {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(15, 23, 34, .92);
    color: #cbd5e1;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28)
}

html.dark .news-slider-nav-primary {
    border-color: #527BB8;
    background: #527BB8;
    color: #fff
}

html.dark .news-slider-nav-primary:hover {
    background: #7EA6E0;
    color: #fff
}

/* =========================================================
   NEWS HOVER PREVIEW
   ========================================================= */
.news-hover-preview {
    position: fixed;
    z-index: 9998;
    width: 390px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.97);
    transition: opacity .22s ease, visibility .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1)
}

.news-hover-preview.is-visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1)
}

.news-hover-preview-card {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 26px;
    background: rgba(255, 255, 255, .97);
    padding: 20px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22), 0 8px 24px rgba(15, 23, 42, .1);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%)
}

.news-hover-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #7EA6E0, #527BB8);
    padding: 6px 11px;
    color: #fff;
    font-size: 9px;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(82, 123, 184, .22)
}

.news-hover-arrow {
    display: flex;
    width: 34px;
    height: 34px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #EDF4FF;
    color: #527BB8;
    font-size: 9px
}

/* Scrollable description */
.news-hover-content-wrap {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 8px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(82, 123, 184, .45) transparent
}

.news-hover-content-wrap::-webkit-scrollbar {
    width: 5px
}

.news-hover-content-wrap::-webkit-scrollbar-track {
    background: transparent
}

.news-hover-content-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(82, 123, 184, .35)
}

.news-hover-content-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(82, 123, 184, .6)
}

html.dark .news-hover-preview-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(15, 23, 34, .97);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .45)
}

html.dark .news-hover-arrow {
    background: rgba(255, 255, 255, .08);
    color: #AFCBF5
}

html.dark .news-hover-content-wrap {
    scrollbar-color: rgba(175, 203, 245, .4) transparent
}

html.dark .news-hover-content-wrap::-webkit-scrollbar-thumb {
    background: rgba(175, 203, 245, .3)
}

html.dark .news-hover-content-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(175, 203, 245, .55)
}

.news-hover-close {
    display: flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 999px;
    background: #EDF4FF;
    color: #527BB8;
    font-size: 12px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .2s ease, color .2s ease, transform .2s ease
}

.news-hover-close:hover {
    background: #527BB8;
    color: #fff;
    transform: rotate(90deg)
}

html.dark .news-hover-close {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .08);
    color: #AFCBF5
}

html.dark .news-hover-close:hover {
    background: #527BB8;
    color: #fff
}

@media(hover:none), (pointer:coarse) {
    .news-hover-close:hover {
        transform: none
    }
}

@media(max-width:767px) {
    .news-hover-preview {
        display: block !important;
        position: fixed !important;
        top: auto !important;
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important
    }

    .news-hover-preview-card {
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain
    }
}

@media(prefers-reduced-motion:reduce) {

    .news-slider-track,
    .news-slider-nav,
    .news-hover-preview {
        transition: none
    }
}

/* =========================================================
   GLOBAL INTERACTION
   ========================================================= */
button,
[role="button"],
a {
    touch-action: manipulation
}

button {
    -webkit-tap-highlight-color: transparent
}

/* ป้องกัน media หรือ decoration บังปุ่ม */
.event-feature-bg,
.event-feature-overlay,
.event-feature-glow,
.noise {
    pointer-events: none
}

/* =========================================================
   EVENT FEATURE CARD
   ========================================================= */
.event-feature-card {
    position: relative;
    isolation: isolate
}

.event-feature-card>* {
    min-width: 0
}

.event-schedule-trigger {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.event-schedule-trigger:focus-visible {
    outline: 2px solid rgba(175, 203, 245, .9);
    outline-offset: 3px;
}

/* =========================================================
   EVENT SCHEDULE COLLAPSE
   ========================================================= */
/*
   ใช้ max-height แทน grid-template-rows
   เสถียรกว่าบน Safari / iOS / Android
*/
.event-schedule-panel {
    display: block !important;
    position: relative;
    z-index: 10;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
        max-height .65s cubic-bezier(.22, 1, .36, 1),
        opacity .32s ease,
        transform .4s cubic-bezier(.22, 1, .36, 1),
        visibility .32s ease;
}

.event-schedule-panel.is-open {
    max-height: 5000px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* =========================================================
   SCHEDULE DAY PANELS
   ========================================================= */
.event-schedule-day-panel {
    display: none !important;
    width: 100%;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

.event-schedule-day-panel.is-active {
    display: block !important;
    visibility: visible;
    animation: eventScheduleResponsiveIn .38s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes eventScheduleResponsiveIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* aria เป็น fallback */
.event-schedule-day-panel[aria-hidden="true"] {
    display: none !important;
}

.event-schedule-day-panel[aria-hidden="false"].is-active {
    display: block !important;
}

/* =========================================================
   SCHEDULE TABS
   ========================================================= */
.event-schedule-tabs {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.event-schedule-tab {
    min-width: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.event-schedule-tab:focus-visible {
    outline: 2px solid rgba(175, 203, 245, .8);
    outline-offset: 2px;
}

/* =========================================================
   SCHEDULE LOCATION
   ========================================================= */
.event-schedule-location {
    width: 100%;
    min-width: 0;
}

.event-schedule-location>div {
    min-width: 0;
}

.event-schedule-subtitle {
    max-width: 100%;
}

/* =========================================================
   TIMELINE RESPONSIVE
   ========================================================= */
.event-timeline {
    width: 100%;
    min-width: 0;
}

.event-timeline-item {
    width: 100%;
    min-width: 0;
}

.event-timeline-content {
    min-width: 0;
}

.event-timeline-card {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* =========================================================
   NEWS SLIDER
   ========================================================= */
.news-slider {
    position: relative;
    width: 100%;
    min-width: 0;
}

.news-slider-track {
    align-items: stretch;
}

.news-slider-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.news-slider-nav {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   NEWS HOVER / MOBILE PREVIEW
   ========================================================= */
.news-hover-preview {
    position: fixed;
    z-index: 9998;
    width: min(390px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.97);
    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .28s cubic-bezier(.2, .8, .2, 1);
}

.news-hover-preview.is-visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.news-hover-preview-card {
    box-sizing: border-box;
    width: 100%;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.news-hover-content-wrap {
    max-height: min(180px, 30dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */
@media(min-width:1440px) {
    .event-schedule-panel.is-open {
        max-height: 5200px
    }

    .event-timeline-item {
        grid-template-columns: 135px 44px minmax(0, 1fr)
    }

    .event-timeline-card {
        padding: 17px 19px
    }

    .event-schedule-day {
        font-size: 15px
    }

    .event-schedule-date {
        font-size: 12px
    }
}

/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */
@media(min-width:1024px) and (max-width:1439px) {
    .event-timeline-item {
        grid-template-columns: 115px 40px minmax(0, 1fr)
    }

    .event-timeline-time {
        padding-right: 10px
    }

    .event-schedule-panel.is-open {
        max-height: 5000px
    }
}

/* =========================================================
   TABLET
   ========================================================= */
@media(min-width:768px) and (max-width:1023px) {
    .event-schedule-tabs {
        gap: 7px
    }

    .event-schedule-tab {
        min-height: 58px;
        padding: 8px 6px;
    }

    .event-schedule-day {
        font-size: 13px
    }

    .event-schedule-date {
        font-size: 10px
    }

    .event-timeline-item {
        grid-template-columns: 100px 38px minmax(0, 1fr);
    }

    .event-timeline-time {
        padding: 18px 8px 18px 0;
        font-size: 10px;
    }

    .event-timeline-content {
        padding-left: 6px;
    }

    .event-schedule-location {
        gap: 12px;
    }

    .news-slider-nav-left {
        left: 4px
    }

    .news-slider-nav-right {
        right: 4px
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:767px) {

    /* ----- Featured event ----- */
    .event-feature-card {
        border-radius: 24px !important;
    }

    .event-register-btn,
    .event-detail-btn {
        width: 100%;
        min-height: 48px;
        padding: .7rem .9rem;
        border-radius: 15px;
        font-size: 11px;
    }

    /* ----- Schedule ----- */
    .event-schedule-panel {
        transform: translateY(-5px);
    }

    .event-schedule-panel.is-open {
        max-height: 7000px;
    }

    .event-schedule-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .event-schedule-tab {
        min-height: 54px;
        padding: 7px 3px;
        border-radius: 13px;
    }

    .event-schedule-tab:hover {
        transform: none;
    }

    .event-schedule-tab.is-active {
        transform: none;
    }

    .event-schedule-day {
        font-size: 10px;
        line-height: 1.3;
    }

    .event-schedule-date {
        margin-top: 2px;
        font-size: 8px;
        line-height: 1.3;
    }

    .event-schedule-location {
        flex-direction: column;
        gap: 10px;
        border-radius: 16px;
        padding: 13px;
    }

    .event-schedule-subtitle {
        width: auto;
        max-width: 100%;
        margin-left: 0 !important;
        padding: 6px 9px;
        white-space: normal;
        line-height: 1.45;
    }

    .event-schedule-location-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    /* ----- Timeline ----- */
    .event-timeline-item {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        width: 100%;
    }

    .event-timeline-time {
        grid-column: 2;
        grid-row: 1;
        padding: 12px 0 3px;
        text-align: left;
        font-size: 9px;
        line-height: 1.3;
    }

    .event-timeline-rail {
        grid-column: 1;
        grid-row: 1/3;
    }

    .event-timeline-content {
        grid-column: 2;
        grid-row: 2;
        padding: 3px 0 10px 6px;
    }

    .event-timeline-dot {
        width: 26px;
        height: 26px;
        margin-top: 11px;
        border-radius: 9px;
        font-size: 8px;
    }

    .event-timeline-line {
        top: 38px;
        bottom: -10px;
    }

    .event-timeline-card {
        border-radius: 15px;
        padding: 12px;
    }

    .event-timeline-card-title {
        font-size: 11px;
        line-height: 1.55;
    }

    .event-schedule-note {
        margin-top: 14px;
        border-radius: 12px;
        padding: 9px 10px;
        font-size: 9px;
        line-height: 1.6;
    }

    /* ----- News slider ----- */
    .news-slider {
        padding-right: 0;
        padding-left: 0;
    }

    .news-slider-card {
        width: min(78vw, 300px) !important;
    }

    .news-slider-nav {
        width: 38px;
        height: 38px;
    }

    .news-slider-nav-left {
        left: 6px
    }

    .news-slider-nav-right {
        right: 6px
    }

    /*
       สำคัญมาก:
       เดิมของคุณมี display:none!important
       ต้อง override ออก
    */
    .news-hover-preview {
        display: block !important;
        position: fixed !important;
        top: auto !important;
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(28px) scale(.985);
    }

    .news-hover-preview.is-visible {
        transform: translateY(0) scale(1);
    }

    .news-hover-preview-card {
        width: 100%;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: 22px;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .news-hover-preview-card img {
        max-height: 210px;
        object-fit: cover;
    }

    .news-hover-content-wrap {
        max-height: 24dvh;
        padding-right: 5px;
        touch-action: pan-y;
    }

    .news-hover-arrow {
        width: 31px;
        height: 31px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media(max-width:479px) {
    .event-schedule-tabs {
        gap: 4px
    }

    .event-schedule-tab {
        min-height: 50px;
        padding: 5px 2px;
        border-radius: 11px;
    }

    .event-schedule-day {
        font-size: 9px
    }

    .event-schedule-date {
        font-size: 7px
    }

    .event-timeline-item {
        grid-template-columns: 29px minmax(0, 1fr);
    }

    .event-timeline-dot {
        width: 24px;
        height: 24px;
        font-size: 7px;
    }

    .event-timeline-content {
        padding-left: 5px;
    }

    .event-timeline-card {
        padding: 11px;
    }

    .event-timeline-card-title {
        font-size: 10.5px;
    }

    .news-slider-card {
        width: 82vw !important;
    }

    .news-hover-preview {
        right: 7px !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        left: 7px !important;
    }

    .news-hover-preview-card {
        border-radius: 20px;
        padding: 14px;
    }
}

/* =========================================================
   VERY SMALL DEVICES
   iPhone SE etc.
   ========================================================= */
@media(max-width:374px) {
    .event-schedule-day {
        font-size: 8px
    }

    .event-schedule-date {
        font-size: 6.5px
    }

    .event-schedule-location {
        padding: 11px;
    }

    .event-timeline-card {
        padding: 10px;
    }

    .news-slider-card {
        width: 84vw !important;
    }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */
@media(hover:none) and (pointer:coarse) {

    .event-schedule-trigger:hover,
    .event-schedule-tab:hover,
    .event-timeline-item:hover .event-timeline-card,
    .news-slider-nav:hover {
        transform: none;
    }

    .event-schedule-trigger,
    .event-schedule-tab,
    .news-slider-card,
    .news-slider-nav {
        touch-action: manipulation;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce) {

    .event-schedule-panel,
    .event-schedule-day-panel,
    .event-schedule-tab,
    .event-timeline-card,
    .news-hover-preview,
    .news-slider-track,
    .news-slider-nav {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   EVENT TOUCH / POINTER FIX
   ========================================================= */
.event-feature-card {
    position: relative;
    isolation: isolate
}

.event-feature-bg,
.event-feature-overlay,
.event-feature-glow {
    pointer-events: none !important
}

.event-feature-card>.relative {
    position: relative;
    z-index: 10;
    pointer-events: auto
}

.event-feature-card a,
.event-feature-card button,
.event-feature-card [role="button"] {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

.event-schedule-trigger {
    position: relative !important;
    z-index: 40 !important;
    pointer-events: auto !important;
    touch-action: manipulation
}

.event-register-btn,
.event-detail-btn {
    position: relative !important;
    z-index: 30 !important;
    pointer-events: auto;
    touch-action: manipulation
}

.event-register-btn[aria-disabled="true"] {
    pointer-events: none !important
}

.event-schedule-panel {
    position: relative;
    z-index: 20
}

.event-schedule-panel:not(.is-open) {
    pointer-events: none !important
}

.event-schedule-panel.is-open {
    pointer-events: auto !important
}

.event-schedule-tab {
    position: relative;
    z-index: 25;
    pointer-events: auto !important;
    touch-action: manipulation
}

/* YouTube ต้องรับ touch เฉพาะพื้นที่วิดีโอเท่านั้น */
.event-video-card {
    position: relative;
    z-index: 5;
    isolation: isolate
}

.event-video-card iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: auto
}

/* ป้องกัน video layer ล้นออกนอกพื้นที่ */
.event-video-card>div:first-child {
    position: relative;
    overflow: hidden;
    isolation: isolate
}

@media(max-width:1023px) {
    .event-feature-card>.relative {
        z-index: 20
    }

    .event-video-card {
        z-index: 1
    }

    .event-schedule-trigger,
    .event-register-btn,
    .event-detail-btn {
        z-index: 50
    }
}

/* =====================================================================
   PSCT FINAL RESPONSIVE + INTERACTION OVERRIDE
   IMPORTANT: PLACE THIS BLOCK AT THE VERY END OF THE CSS FILE
   ===================================================================== */

/* =====================================================================
   1. GLOBAL RESET / SAFETY
   ===================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

img,
video {
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

button {
    touch-action: manipulation;
}

a {
    -webkit-touch-callout: none;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid rgba(126, 166, 224, .9);
    outline-offset: 3px;
}

/* Safari/iOS prevent accidental selection */
.event-schedule-trigger,
.event-schedule-tab,
.news-slider-nav,
.hero-dot,
.mobile-menu-button {
    -webkit-user-select: none;
    user-select: none;
}

/* =====================================================================
   2. DECORATIVE LAYERS MUST NEVER BLOCK TOUCH
   ===================================================================== */
.noise,
.hero-overlay,
.event-feature-bg,
.event-feature-overlay,
.event-feature-glow,
.media-card-overlay,
.media-marquee-fade,
.logo-shine,
.footer-grid-pattern,
.footer-bottom-glow {
    pointer-events: none !important;
}

/* =====================================================================
   3. PAGE SECTIONS
   ===================================================================== */
#home,
#highlights,
#events,
#news,
#network {
    position: relative;
    width: 100%;
    min-width: 0;
}

#events,
#news {
    isolation: isolate;
}

/* =====================================================================
   4. NAVBAR
   ===================================================================== */
#siteHeader {
    width: 100%;
    pointer-events: none;
}

#siteHeader #mainNavbar,
#siteHeader .top-utilities,
#siteHeader button,
#siteHeader a,
#siteHeader [role="button"] {
    pointer-events: auto;
}

#mainNavbar {
    width: calc(100% - 24px);
    margin-inline: auto;
}

.nav-pill,
.nav-dropdown-toggle,
.mobile-main-link,
.mobile-dropdown-toggle,
.mobile-nav-link,
.login-nav-btn {
    min-height: 42px;
    touch-action: manipulation;
}

.nav-dropdown-menu,
.nav-submenu-panel {
    isolation: isolate;
}

/* Touch devices should never depend on hover state */
@media(hover:none), (pointer:coarse) {

    .nav-dropdown:hover>.nav-dropdown-menu,
    .nav-submenu:hover>.nav-submenu-panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .nav-dropdown.is-open>.nav-dropdown-menu,
    .nav-submenu.is-open>.nav-submenu-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* =====================================================================
   5. HERO - FULLSCREEN ALL DEVICES
   ===================================================================== */
.hero-slider {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 100vh;

    overflow: hidden;

    background: #08111b;

    isolation: isolate;
}

/* Modern mobile viewport */
@supports(height:100svh) {
    .hero-slider {
        height: 100svh;
        min-height: 100svh;
    }
}

@supports(height:100dvh) {
    .hero-slider {
        height: 100dvh;
        min-height: 100dvh;
    }
}

/* ---------------------------------------------------------------------
   SLIDE CONTAINER
   --------------------------------------------------------------------- */
.hero-slides {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: scale(1.01);

    transition:
        opacity .8s ease,
        visibility .8s ease,
        transform 1.2s ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: scale(1);
}

.hero-slide:not(.is-active) {
    pointer-events: none !important;
}

/* ---------------------------------------------------------------------
   LOCAL VIDEO + IMAGE
   --------------------------------------------------------------------- */
.hero-video,
.hero-image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;
}

.hero-video {
    pointer-events: none !important;
}

/* Hide native controls */
.hero-video::-webkit-media-controls {
    display: none !important;
}

.hero-video::-webkit-media-controls-enclosure {
    display: none !important;
}

.hero-video::-webkit-media-controls-panel {
    display: none !important;
}

.hero-video::-webkit-media-controls-play-button {
    display: none !important;
}

.hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* ---------------------------------------------------------------------
   YOUTUBE COVER
   --------------------------------------------------------------------- */
.hero-youtube-media {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #08111b;

    pointer-events: none !important;
}

/*
   16:9 video cover algorithm

   Portrait:
   video becomes wider than viewport

   Landscape:
   video becomes taller than viewport
*/
.hero-youtube-player,
.hero-youtube-player iframe {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: max(100vw, 177.7777778vh) !important;
    height: max(56.25vw, 100vh) !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    border: 0 !important;

    pointer-events: none !important;

    transform:
        translate(-50%, -50%) !important;

    transform-origin: center center !important;
}

/* ---------------------------------------------------------------------
   YOUTUBE - SVH
   --------------------------------------------------------------------- */
@supports(height:100svh) {

    .hero-youtube-player,
    .hero-youtube-player iframe {
        width: max(100vw, 177.7777778svh) !important;
        height: max(56.25vw, 100svh) !important;
    }
}

/* ---------------------------------------------------------------------
   YOUTUBE - DVH
   --------------------------------------------------------------------- */
@supports(height:100dvh) {

    .hero-youtube-player,
    .hero-youtube-player iframe {
        width: max(100vw, 177.7777778dvh) !important;
        height: max(56.25vw, 100dvh) !important;
    }
}

/* ---------------------------------------------------------------------
   OVERLAY
   --------------------------------------------------------------------- */
.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 3;

    width: 100%;
    height: 100%;

    pointer-events: none !important;
}

/* ---------------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------------- */
.hero-pagination {
    position: absolute;

    z-index: 50 !important;

    pointer-events: auto !important;
}

.hero-dot {
    min-width: 32px;
    min-height: 32px;

    cursor: pointer;

    pointer-events: auto !important;

    touch-action: manipulation;
}

/* =====================================================================
   HERO TABLET
   ===================================================================== */
@media(min-width:768px) and (max-width:1023px) {

    .hero-slider {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
    }

    .hero-slides,
    .hero-slide {
        width: 100%;
        height: 100%;
    }

    .hero-video,
    .hero-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }

    .hero-youtube-player,
    .hero-youtube-player iframe {
        width: max(100vw,
                calc(100dvh * 1.777777778)) !important;

        height: max(100dvh,
                calc(100vw / 1.777777778)) !important;

        min-width: 100% !important;
        min-height: 100% !important;
    }
}

/* =====================================================================
   HERO MOBILE
   ===================================================================== */
@media(max-width:767px) {

    .hero-slider {
        width: 100%;

        height: 100dvh;
        min-height: 100dvh;

        max-height: none !important;
    }

    .hero-slides {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;
    }

    .hero-slide {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;
    }

    /*
       MP4 / Image
       Cover full portrait screen
    */
    .hero-video,
    .hero-image {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100% !important;
        height: 100% !important;

        min-width: 100% !important;
        min-height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

    /*
       YouTube 16:9 -> Portrait cover
    */
    .hero-youtube-player,
    .hero-youtube-player iframe {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: max(100vw,
                calc(100dvh * 1.777777778)) !important;

        height: max(100dvh,
                calc(100vw / 1.777777778)) !important;

        min-width: 100% !important;
        min-height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        transform:
            translate(-50%, -50%) !important;
    }

    .hero-pagination {
        bottom:
            max(18px,
                env(safe-area-inset-bottom)) !important;
    }
}

/* =====================================================================
   PHONE LANDSCAPE
   ===================================================================== */
@media(max-height:500px) and (orientation:landscape) {

    .hero-slider {
        height: 100dvh;
        min-height: 100dvh;
    }

    .hero-video,
    .hero-image {
        object-fit: cover !important;
    }

    .hero-youtube-player,
    .hero-youtube-player iframe {
        width: max(100vw,
                calc(100dvh * 1.777777778)) !important;

        height: max(100dvh,
                calc(100vw / 1.777777778)) !important;
    }
}

/* =====================================================================
   6. MARQUEE
   ===================================================================== */
.media-marquee {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
}

.media-marquee-track {
    display: flex;
    width: max-content;
    min-width: max-content;
}

.media-card {
    position: relative;
    display: block;
    min-width: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.media-card-caption {
    pointer-events: none;
}

.media-card-arrow {
    pointer-events: none;
}


/* =====================================================================
   7. FEATURED EVENT
   ===================================================================== */
.event-feature-card {
    position: relative;
    width: 100%;
    min-width: 0;
    isolation: isolate;
}

.event-feature-card>* {
    min-width: 0;
}

/*
   Main content
*/
.event-feature-card>.relative {
    position: relative;
    z-index: 10;
    min-width: 0;
    pointer-events: auto;
}

.event-feature-card a,
.event-feature-card button {
    pointer-events: auto;
}

.event-register-btn,
.event-detail-btn,
.event-schedule-trigger {
    position: relative !important;
    z-index: 30 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
}

.event-schedule-trigger {
    min-height: 44px;
    cursor: pointer;
}

/*
   Registration disabled
*/
.event-register-btn[aria-disabled="true"] {
    pointer-events: none !important;
}

/* =====================================================================
   8. EVENT VIDEO
   ===================================================================== */
.event-video-card {
    position: relative;
    z-index: 5;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
}

.event-video-card>div:first-child {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.event-video-card iframe {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    pointer-events: auto !important;
}

/* =====================================================================
   9. COUNTDOWN
   ===================================================================== */
#countdown {
    width: 100%;
    min-width: 0;
}

.event-countdown-box {
    min-width: 0;
}

.event-countdown-number {
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   10. EVENT SCHEDULE COLLAPSE
   ===================================================================== */
/*
   One collapse model only.
   Do not use grid-template-rows anymore.
*/
.event-schedule-panel {
    position: relative !important;
    z-index: 20 !important;

    display: block !important;

    width: 100%;
    min-width: 0;

    max-height: 0;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;

    transform: translateY(-6px);

    transition:
        max-height .6s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease,
        visibility .3s ease,
        transform .35s cubic-bezier(.22, 1, .36, 1);
}

.event-schedule-panel.is-open {
    max-height: 10000px;

    opacity: 1;
    visibility: visible;
    pointer-events: auto !important;

    transform: translateY(0);
}

/* Any old grid setting */
.event-schedule-panel,
.event-schedule-panel.is-open {
    grid-template-rows: unset !important;
}

/* =====================================================================
   11. SCHEDULE TABS
   ===================================================================== */
.event-schedule-tabs {
    position: relative;
    z-index: 5;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    gap: 8px;
}

.event-schedule-tab {
    position: relative;
    z-index: 6;

    width: 100%;
    min-width: 0;
    min-height: 58px;

    cursor: pointer;

    pointer-events: auto !important;
    touch-action: manipulation;
}

.event-schedule-tab>* {
    pointer-events: none;
}

/* =====================================================================
   12. SCHEDULE DAY PANELS
   ===================================================================== */
.event-schedule-day-panel {
    display: none !important;

    width: 100%;
    min-width: 0;

    opacity: 0;
    visibility: hidden;

    transform: translateY(7px);
}

.event-schedule-day-panel.is-active {
    display: block !important;

    opacity: 1;
    visibility: visible;

    animation: psctScheduleEnter .35s cubic-bezier(.22, 1, .36, 1) both;
}

.event-schedule-day-panel[aria-hidden="true"] {
    display: none !important;
}

.event-schedule-day-panel[aria-hidden="false"].is-active {
    display: block !important;
}

@keyframes psctScheduleEnter {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================================
   13. SCHEDULE LOCATION
   ===================================================================== */
.event-schedule-location {
    width: 100%;
    min-width: 0;
}

.event-schedule-location>* {
    min-width: 0;
}

.event-schedule-subtitle {
    max-width: 100%;
}

/* =====================================================================
   14. TIMELINE
   ===================================================================== */
.event-timeline {
    position: relative;
    width: 100%;
    min-width: 0;
}

.event-timeline-item {
    width: 100%;
    min-width: 0;
}

.event-timeline-time,
.event-timeline-rail,
.event-timeline-content {
    min-width: 0;
}

.event-timeline-card {
    width: 100%;
    min-width: 0;

    overflow-wrap: anywhere;
    word-break: normal;
}

.event-timeline-card-title {
    overflow-wrap: anywhere;
}

/* =====================================================================
   15. NEWS SECTION
   ===================================================================== */
.news-section {
    position: relative;
    width: 100%;
    min-width: 0;
}

[data-news-open] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.news-featured-card,
.news-side-card,
.news-slider-card {
    min-width: 0;
}

/* =====================================================================
   16. NEWS SLIDER DESKTOP
   ===================================================================== */
.news-slider {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;
}

.news-slider-track {
    display: flex;
    align-items: stretch;

    min-width: max-content;

    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.news-slider-card {
    flex: none;
}

.news-slider-nav {
    position: absolute;
    z-index: 40;

    pointer-events: auto !important;
    touch-action: manipulation;
}

/* =====================================================================
   17. NEWS PREVIEW DESKTOP
   ===================================================================== */
.news-hover-preview {
    position: fixed;

    z-index: 10000 !important;

    width: min(390px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px) scale(.97);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .28s cubic-bezier(.2, .8, .2, 1);
}

.news-hover-preview.is-visible {
    pointer-events: auto;

    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}

.news-hover-preview-card {
    box-sizing: border-box;

    width: 100%;

    max-height: calc(100dvh - 32px);

    overflow: hidden;
}

.news-hover-content-wrap {
    max-height: min(180px, 30dvh);

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    touch-action: pan-y;
}

/* =====================================================================
   18. TABLET
   ===================================================================== */
@media(min-width:768px) and (max-width:1023px) {

    /* navbar */
    #mainNavbar {
        width: calc(100% - 20px);
    }

    /* event */
    .event-feature-card {
        border-radius: 30px !important;
    }

    .event-feature-card>.relative {
        padding-inline: 28px;
    }

    .event-register-btn,
    .event-detail-btn {
        min-height: 50px;
    }

    /* schedule */
    .event-schedule-tabs {
        gap: 6px;
    }

    .event-schedule-tab {
        min-height: 56px;
        padding: 7px 5px;
    }

    .event-schedule-day {
        font-size: 12px;
    }

    .event-schedule-date {
        font-size: 10px;
    }

    .event-timeline-item {
        grid-template-columns: 100px 38px minmax(0, 1fr) !important;
    }

    .event-timeline-time {
        padding-right: 8px;
        font-size: 10px;
    }

    .event-timeline-content {
        padding-left: 6px;
    }

    .event-schedule-location {
        gap: 12px;
    }

    /* news */
    .news-slider-nav-left {
        left: 4px !important;
    }

    .news-slider-nav-right {
        right: 4px !important;
    }
}

/* =====================================================================
   19. MOBILE + TOUCH NEWS SLIDER
   ===================================================================== */
@media(max-width:767px) {

    /* -----------------------------------------------------
       PAGE SPACING
       ----------------------------------------------------- */
    #events,
    #news,
    #network {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */
    .hero-pagination {
        bottom:
            max(20px,
                env(safe-area-inset-bottom)) !important;
    }

    /* -----------------------------------------------------
       MARQUEE
       ----------------------------------------------------- */
    .media-marquee-track {
        gap: 10px;
    }

    .media-card {
        width: min(78vw, 300px);
        height: 138px;
        border-radius: 17px;
    }

    /* -----------------------------------------------------
       EVENT
       ----------------------------------------------------- */
    .event-feature-card {
        overflow: hidden;
        border-radius: 24px !important;
    }

    .event-feature-card>.relative {
        z-index: 20;

        gap: 24px !important;

        padding: 22px !important;
    }

    .event-feature-card h3 {
        font-size: clamp(23px, 7vw, 30px) !important;
        line-height: 1.45 !important;
    }

    .event-feature-card p {
        line-height: 1.75 !important;
    }

    /*
       Buttons
    */
    .event-register-btn,
    .event-detail-btn {
        width: 100%;

        min-height: 50px;

        padding: .7rem .9rem;

        border-radius: 15px;

        font-size: 12px;
    }

    .event-schedule-trigger {
        min-height: 44px;

        padding: .6rem .8rem;

        font-size: 11px;
    }

    /* countdown */
    #countdown {
        gap: 6px !important;
    }

    .event-countdown-box {
        min-height: 64px;

        padding: 5px 2px;

        border-radius: 14px;
    }

    .event-countdown-number {
        font-size: 17px;
    }

    .event-countdown-label {
        margin-top: 5px;
        font-size: 8px;
    }

    /* video */
    .event-video-card {
        z-index: 1;
        border-radius: 20px !important;
    }

    /* -----------------------------------------------------
       SCHEDULE PANEL
       ----------------------------------------------------- */
    .event-schedule-panel.is-open {
        max-height: 12000px;
    }

    .event-schedule-panel>div>div {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    /* tabs */
    .event-schedule-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 4px;

        padding: 4px !important;
    }

    .event-schedule-tab {
        min-height: 52px;

        padding: 5px 2px;

        border-radius: 11px;
    }

    .event-schedule-day {
        font-size: 9.5px;
        line-height: 1.25;
    }

    .event-schedule-date {
        margin-top: 2px;

        font-size: 7.5px;
        line-height: 1.25;
    }

    .event-schedule-tab:hover,
    .event-schedule-tab.is-active {
        transform: none !important;
    }

    /* location */
    .event-schedule-location {
        flex-direction: column;

        gap: 10px;

        padding: 13px;

        border-radius: 16px;
    }

    .event-schedule-location-icon {
        width: 34px;
        height: 34px;

        border-radius: 11px;
    }

    .event-schedule-subtitle {
        width: auto;
        max-width: 100%;

        margin-left: 0 !important;

        padding: 6px 9px;

        white-space: normal;

        line-height: 1.45;
    }

    /* -----------------------------------------------------
       TIMELINE MOBILE
       ----------------------------------------------------- */
    .event-timeline-item {
        display: grid !important;

        grid-template-columns: 30px minmax(0, 1fr) !important;

        width: 100%;
    }

    .event-timeline-time {
        grid-column: 2;
        grid-row: 1;

        padding: 11px 0 3px !important;

        text-align: left !important;

        font-size: 9px;
        line-height: 1.35;
    }

    .event-timeline-rail {
        grid-column: 1;
        grid-row: 1/3;
    }

    .event-timeline-content {
        grid-column: 2;
        grid-row: 2;

        padding: 3px 0 10px 5px !important;
    }

    .event-timeline-dot {
        width: 25px !important;
        height: 25px !important;

        margin-top: 10px !important;

        border-radius: 9px !important;

        font-size: 7.5px !important;
    }

    .event-timeline-line {
        top: 36px !important;
        bottom: -9px !important;
    }

    .event-timeline-card {
        padding: 11px !important;

        border-radius: 14px !important;
    }

    .event-timeline-card-title {
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    .event-timeline-card li {
        font-size: 10.5px !important;
        line-height: 1.65 !important;
    }

    .event-schedule-note {
        margin-top: 14px;

        padding: 9px 10px;

        border-radius: 12px;

        font-size: 9px;
        line-height: 1.6;
    }

    /* -----------------------------------------------------
       NEWS CARDS
       ----------------------------------------------------- */
    .news-featured-card {
        min-height: 330px !important;

        border-radius: 22px !important;
    }

    .news-featured-card>div.relative {
        min-height: 330px !important;

        padding: 22px !important;
    }

    .news-featured-card h3 {
        font-size: 21px !important;
        line-height: 1.5 !important;
    }

    .news-side-card {
        min-height: 155px !important;

        grid-template-columns: 105px minmax(0, 1fr) !important;

        border-radius: 20px !important;
    }

    .news-side-card>div:last-child {
        padding: 15px !important;
    }

    /* -----------------------------------------------------
       NEWS SLIDER MOBILE:
       Use native horizontal scrolling.
       This is much more reliable than translate3d on phones.
       ----------------------------------------------------- */
    .news-slider {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 2px !important;

        scroll-snap-type: x proximity;
        scroll-behavior: smooth;

        scrollbar-width: none;

        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;

        touch-action: pan-x;
    }

    .news-slider::-webkit-scrollbar {
        display: none;
    }

    .news-slider-track {
        width: max-content !important;

        transform: none !important;

        transition: none !important;

        will-change: auto !important;
    }

    .news-slider-card {
        width: min(82vw, 300px) !important;

        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    /*
       Hide arrows on mobile because native swipe is better.
       This also eliminates overlapping tap layers.
    */
    .news-slider-nav {
        display: none !important;
    }

    /* -----------------------------------------------------
       NEWS PREVIEW MOBILE = BOTTOM SHEET
       ----------------------------------------------------- */
    .news-hover-preview {
        display: block !important;

        position: fixed !important;

        top: auto !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: 8px !important;

        width: auto !important;
        max-width: none !important;

        transform: translateY(24px) scale(.985);
    }

    .news-hover-preview.is-visible {
        transform: translateY(0) scale(1);
    }

    .news-hover-preview-card {
        width: 100%;

        max-height:
            calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

        overflow-x: hidden;
        overflow-y: auto;

        padding: 16px;

        border-radius: 22px;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        touch-action: pan-y;
    }

    #newsHoverImage {
        width: 100%;
        height: 170px !important;

        object-fit: cover;
    }

    #newsHoverTitle {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    .news-hover-content-wrap {
        max-height: none !important;

        overflow: visible !important;

        padding-right: 0 !important;
    }

    .news-hover-arrow {
        width: 31px;
        height: 31px;
    }

    /* -----------------------------------------------------
       NETWORK
       ----------------------------------------------------- */
    #network {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    #network>div>div {
        padding: 24px !important;
        border-radius: 28px !important;
    }

    #network h2 {
        font-size: 26px !important;
        line-height: 1.45 !important;
    }
}

/* =====================================================================
   20. SMALL PHONE
   ===================================================================== */
@media(max-width:479px) {

    #mainNavbar {
        width: calc(100% - 12px);
    }

    .event-feature-card>.relative {
        padding: 18px !important;
    }

    .event-feature-card h3 {
        font-size: 23px !important;
    }

    .event-schedule-tab {
        min-height: 49px;
    }

    .event-schedule-day {
        font-size: 9px;
    }

    .event-schedule-date {
        font-size: 7px;
    }

    .event-timeline-item {
        grid-template-columns: 28px minmax(0, 1fr) !important;
    }

    .event-timeline-dot {
        width: 23px !important;
        height: 23px !important;

        font-size: 7px !important;
    }

    .event-timeline-card {
        padding: 10px !important;
    }

    .news-featured-card {
        min-height: 305px !important;
    }

    .news-featured-card>div.relative {
        min-height: 305px !important;
    }

    .news-side-card {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }

    .news-slider-card {
        width: 84vw !important;
    }

    .news-hover-preview {
        right: 5px !important;
        left: 5px !important;

        bottom:
            max(5px,
                env(safe-area-inset-bottom)) !important;
    }

    .news-hover-preview-card {
        padding: 14px;
        border-radius: 19px;
    }

    #newsHoverImage {
        height: 145px !important;
    }
}

/* =====================================================================
   21. VERY SMALL PHONE
   ===================================================================== */
@media(max-width:374px) {

    #events,
    #news,
    #network {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .event-feature-card>.relative {
        padding: 15px !important;
    }

    .event-feature-card h3 {
        font-size: 21px !important;
    }

    .event-schedule-day {
        font-size: 8px;
    }

    .event-schedule-date {
        font-size: 6.5px;
    }

    .event-schedule-location {
        padding: 11px;
    }

    .event-timeline-card {
        padding: 9px !important;
    }

    .news-slider-card {
        width: 86vw !important;
    }
}

/* =====================================================================
   22. TOUCH DEVICE INTERACTION
   ===================================================================== */
@media(hover:none), (pointer:coarse) {

    /*
       Remove decorative hover movement.
       Hover emulation on iOS often causes "first tap = hover".
    */
    .btn-primary:hover,
    .btn-glass:hover,
    .floating-card:hover,
    .media-card:hover,
    .event-countdown-box:hover,
    .event-register-btn:hover,
    .event-detail-btn:hover,
    .event-video-card:hover,
    .event-schedule-trigger:hover,
    .event-schedule-tab:hover,
    .event-timeline-item:hover .event-timeline-card,
    .news-featured-card:hover,
    .news-side-card:hover,
    .news-slider-card:hover,
    .footer-links a:hover,
    .footer-action:hover {
        transform: none !important;
    }

    /*
       Important clickable components
    */
    .event-schedule-trigger,
    .event-register-btn,
    .event-detail-btn,
    .event-schedule-tab,
    [data-news-open],
    .hero-dot,
    .mobile-main-link,
    .mobile-dropdown-toggle,
    .mobile-nav-link {
        touch-action: manipulation;
    }
}

/* =====================================================================
   23. LANDSCAPE PHONE
   ===================================================================== */
@media(max-height:500px) and (orientation:landscape) {

    .hero-slider {
        min-height: 100dvh;
    }

    .news-hover-preview-card {
        max-height: calc(100dvh - 10px);
    }

    #newsHoverImage {
        height: 120px !important;
    }
}

/* =====================================================================
   24. SAFE AREA
   ===================================================================== */
@supports(padding:max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* =====================================================================
   25. REDUCED MOTION
   ===================================================================== */
@media(prefers-reduced-motion:reduce) {

    html {
        scroll-behavior: auto !important;
    }

    .hero-slide,
    .media-marquee-track,
    .event-feature-bg,
    .event-feature-glow,
    .event-register-btn::before,
    .event-detail-btn::before,
    .event-schedule-panel,
    .event-schedule-day-panel,
    .event-schedule-tab,
    .event-timeline-card,
    .news-slider-track,
    .news-slider-nav,
    .news-hover-preview {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   PSCT FINAL TABLET / MOBILE INTERACTION FIX
   PLACE AT VERY END OF CSS
   ===================================================================== */

/* =========================================================
   1. GLOBAL TOUCH SAFETY
   ========================================================= */
a,
button,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

a,
button,
[data-news-open],
.media-card,
.event-schedule-trigger,
.event-schedule-tab {
    pointer-events: auto;
}

.noise,
.hero-overlay,
.event-feature-bg,
.event-feature-overlay,
.event-feature-glow,
.media-card-overlay,
.media-marquee-fade,
.logo-shine,
.footer-grid-pattern,
.footer-bottom-glow {
    pointer-events: none !important;
}

/* =========================================================
   2. MARQUEE
   ต้องเลื่อนทุก Device
   ========================================================= */
.media-marquee {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
}

.media-marquee-track {
    display: flex;
    width: max-content;
    min-width: max-content;
    gap: 14px;
    padding: 3px 7px;
    animation: mediaMarquee 42s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
}

.media-marquee-reverse .media-marquee-track {
    animation-direction: reverse !important;
}

@keyframes mediaMarquee {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(-50%, 0, 0)
    }
}

.media-card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: clamp(260px, 30vw, 430px);
    height: 165px;
    overflow: hidden;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
}

.media-card>* {
    pointer-events: none;
}

/*
   ตัว <a class="media-card"> เป็น element ที่รับ click
   ลูกทั้งหมดไม่ต้องรับ pointer
*/
a.media-card {
    pointer-events: auto !important;
}

/* Desktop ใช้ hover เพื่อ pause ได้ */
@media(hover:hover) and (pointer:fine) {
    .media-marquee:hover .media-marquee-track {
        animation-play-state: paused !important;
    }
}

/*
   Mobile / Tablet ห้าม pause animation
   และห้ามจำลอง hover
*/
@media(hover:none), (pointer:coarse) {
    .media-marquee-track {
        animation-play-state: running !important;
        will-change: transform !important;
    }

    .media-marquee:hover .media-marquee-track {
        animation-play-state: running !important;
    }

    .media-card:hover {
        transform: translateZ(0) !important;
    }

    .media-card:hover .media-card-image {
        transform: none !important;
        filter: none !important;
    }

    .media-card-caption {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Tablet */
@media(min-width:768px) and (max-width:1023px) {
    .media-marquee-track {
        gap: 12px;
        animation-duration: 38s !important;
    }

    .media-card {
        width: 340px;
        height: 150px;
        border-radius: 18px;
    }

    .media-marquee-fade {
        width: 45px;
    }
}

/* Mobile */
@media(max-width:767px) {
    .media-marquee-track {
        gap: 10px;
        animation-duration: 34s !important;
    }

    .media-card {
        width: min(78vw, 300px);
        height: 138px;
        border-radius: 17px;
    }

    .media-marquee-fade {
        width: 28px;
    }
}

/* =========================================================
   3. EVENT CARD POINTER FIX
   ========================================================= */
.event-feature-card {
    position: relative;
    isolation: isolate;
}

.event-feature-card>.relative {
    position: relative;
    z-index: 20;
    pointer-events: auto !important;
}

.event-feature-card a,
.event-feature-card button {
    position: relative;
    pointer-events: auto !important;
    touch-action: manipulation;
}

.event-schedule-trigger {
    z-index: 50 !important;
    pointer-events: auto !important;
}

.event-register-btn,
.event-detail-btn {
    z-index: 50 !important;
    pointer-events: auto !important;
}

.event-register-btn[aria-disabled="true"] {
    pointer-events: none !important;
}

.event-video-card {
    position: relative;
    z-index: 5;
    isolation: isolate;
}

.event-video-card iframe {
    pointer-events: auto !important;
}

/* =========================================================
   4. EVENT SCHEDULE
   ========================================================= */
.event-schedule-panel {
    position: relative !important;
    z-index: 20 !important;
    display: block !important;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transform: translateY(-6px);
    transition: max-height .6s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility .3s ease, transform .35s ease;
}

.event-schedule-panel.is-open {
    max-height: 12000px !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important;
    transform: translateY(0);
}

.event-schedule-tabs {
    position: relative;
    z-index: 30;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

.event-schedule-tab {
    position: relative;
    z-index: 31;
    min-width: 0;
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;
}

.event-schedule-tab>* {
    pointer-events: none !important;
}

.event-schedule-day-panel {
    display: none !important;
}

.event-schedule-day-panel.is-active[aria-hidden="false"] {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   5. NEWS CLICKABLE CARDS
   ========================================================= */
[data-news-open] {
    position: relative;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

[data-news-open]>* {
    pointer-events: none;
}

.news-featured-card,
.news-side-card,
.news-slider-card {
    cursor: pointer;
}

/* =========================================================
   6. NEWS SLIDER DESKTOP
   ========================================================= */
@media(min-width:1024px) {
    .news-slider {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .news-slider-track {
        display: flex;
        width: max-content;
        min-width: max-content;
        transform: translate3d(0, 0, 0);
        transition: transform .45s cubic-bezier(.2, .8, .2, 1);
        will-change: transform;
    }

    .news-slider-nav {
        display: flex !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   7. NEWS SLIDER TABLET + MOBILE
   Native Swipe สำหรับ <= 1023px
   ========================================================= */
@media(max-width:1023px) {
    .news-slider {
        position: relative;
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px !important;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .news-slider::-webkit-scrollbar {
        display: none;
    }

    .news-slider-track {
        display: flex;
        width: max-content !important;
        min-width: max-content !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .news-slider-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        pointer-events: auto !important;
    }

    .news-slider-nav {
        display: none !important;
        pointer-events: none !important;
    }
}

/* Tablet card width */
@media(min-width:768px) and (max-width:1023px) {
    .news-slider-card {
        width: min(44vw, 340px) !important;
    }
}

/* Mobile card width */
@media(max-width:767px) {
    .news-slider-card {
        width: min(82vw, 300px) !important;
    }
}

/* =========================================================
   8. NEWS MODAL DESKTOP
   ========================================================= */
@media(min-width:1024px) {
    .news-hover-preview {
        position: fixed;
        z-index: 10000 !important;
        width: min(390px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px) scale(.97);
        transition: opacity .22s ease, visibility .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    .news-hover-preview.is-visible {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   9. NEWS MODAL TABLET + MOBILE
   Bottom Sheet ตั้งแต่ <=1023px
   ========================================================= */
@media(max-width:1023px) {
    .news-hover-preview {
        display: block !important;
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        left: 12px !important;
        z-index: 10000 !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 110%, 0) !important;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility .25s ease !important;
    }

    .news-hover-preview.is-visible {
        pointer-events: auto !important;
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0) !important;
    }

    .news-hover-preview-card {
        width: 100%;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 24px;
        padding: 18px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .news-hover-content-wrap {
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    #newsHoverImage {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .news-hover-close {
        position: relative;
        z-index: 5;
        pointer-events: auto !important;
        touch-action: manipulation;
    }
}

/* Mobile */
@media(max-width:767px) {
    .news-hover-preview {
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: 8px !important;
    }

    .news-hover-preview-card {
        padding: 16px;
        border-radius: 22px;
    }

    #newsHoverImage {
        height: 170px;
    }
}

/* Small mobile */
@media(max-width:479px) {
    .news-hover-preview {
        right: 5px !important;
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        left: 5px !important;
    }

    .news-hover-preview-card {
        padding: 14px;
        border-radius: 19px;
    }

    #newsHoverImage {
        height: 145px;
    }
}

/* =========================================================
   10. TOUCH DEVICE - REMOVE FAKE HOVER
   แต่ห้ามหยุด Marquee
   ========================================================= */
@media(hover:none), (pointer:coarse) {

    .event-schedule-trigger:hover,
    .event-schedule-tab:hover,
    .event-timeline-item:hover .event-timeline-card,
    .event-register-btn:hover,
    .event-detail-btn:hover,
    .news-featured-card:hover,
    .news-side-card:hover,
    .news-slider-card:hover {
        transform: none !important;
    }

    .media-marquee-track {
        animation-play-state: running !important;
    }
}

/* =========================================================
   JOURNAL SHOWCASE
   ========================================================= */
.journal-showcase {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 48px 20px;
    background: radial-gradient(circle at 15% 10%, rgba(75, 109, 255, .95) 0%, transparent 30%), radial-gradient(circle at 88% 5%, rgba(255, 49, 137, .95) 0%, transparent 32%), radial-gradient(circle at 52% 55%, rgba(138, 39, 174, .48) 0%, transparent 43%), linear-gradient(120deg, #183bc6 0%, #4530be 33%, #9f268f 66%, #ff337f 100%)
}

html.dark .journal-showcase {
    background: radial-gradient(circle at 15% 10%, rgba(82, 108, 220, .34) 0%, transparent 34%), radial-gradient(circle at 88% 5%, rgba(220, 64, 142, .28) 0%, transparent 36%), radial-gradient(circle at 52% 55%, rgba(118, 55, 150, .28) 0%, transparent 46%), linear-gradient(120deg, #0b1333 0%, #17163d 32%, #34183e 66%, #4b1835 100%)
}

.journal-showcase-container {
    position: relative;
    z-index: 10;

    margin: 0 auto;
}

.journal-showcase-bg,
.journal-showcase-bg>* {
    pointer-events: none;
}

.journal-showcase-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(1px);
    opacity: .26;
}

.journal-showcase-orb-1 {
    top: -150px;
    left: -80px;
    width: 450px;
    height: 450px;
    background: linear-gradient(135deg, #ad78ff, #ee76d6);
}

.journal-showcase-orb-2 {
    top: -160px;
    right: -110px;
    width: 430px;
    height: 430px;
    background: linear-gradient(135deg, #ff57a4, #ff94c2);
}

.journal-showcase-orb-3 {
    top: 170px;
    left: 14%;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(96, 157, 255, .25));
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
    animation: journalOrbFloat 5s ease-in-out infinite;
}

@keyframes journalOrbFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-16px)
    }
}

.journal-showcase-dots {
    position: absolute;
    width: 130px;
    height: 110px;
    opacity: .22;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .85) 2px, transparent 2.5px);
    background-size: 16px 16px;
}

.journal-showcase-dots-left {
    top: 95px;
    left: 28px;
}

.journal-showcase-dots-right {
    top: 280px;
    right: 15px;
}

.journal-showcase-wave {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 260px;
    border-radius: 50%;
}

.journal-showcase-wave-1 {
    bottom: 175px;
    background: rgba(255, 255, 255, .11);
    transform: rotate(3deg);
}

.journal-showcase-wave-2 {
    bottom: 105px;
    background: #fff;
    transform: rotate(-2.5deg);
}

.journal-showcase-heading {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto 48px;
    text-align: center;
    color: #fff;
}

.journal-showcase-eyebrow {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 28px 8px 10px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(90deg, rgba(21, 129, 255, .9), rgba(172, 60, 197, .85), rgba(242, 48, 119, .9));
    box-shadow:
        0 12px 35px rgba(20, 44, 156, .25),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    font-size: 18px;
    font-weight: 500;
}

.journal-showcase-eyebrow-icon {
    display: flex;
    width: 40px;
    height: 40px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.journal-showcase-heading h2 {
    margin: 26px 0 0;
    color: #fff;
    font-size: clamp(36px, 4vw, 58px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
    text-shadow: 0 10px 32px rgba(27, 19, 91, .2);
}

.journal-showcase-heading p {
    max-width: 760px;
    margin: 20px auto 0;
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
}

.journal-showcase-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.journal-showcase-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 28px;
    color: #30445f;
    background: rgba(255, 255, 255, .96);
    box-shadow:
        0 26px 65px rgba(20, 28, 75, .22),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    text-decoration: none;
    transform: translateY(0);
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        box-shadow .38s ease;
    animation: journalCardEnter .7s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--journal-index) * 110ms);
}

@keyframes journalCardEnter {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.journal-showcase-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 38px 80px rgba(18, 28, 82, .28),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.journal-showcase-card-media {
    position: relative;
    display: flex;
    height: 250px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.journal-showcase-card-blue .journal-showcase-card-media {
    background:
        radial-gradient(circle at 70% 10%, rgba(158, 220, 255, .85), transparent 35%),
        linear-gradient(145deg, #65c9f4 0%, #3789d7 50%, #1947be 100%);
}

.journal-showcase-card-pink .journal-showcase-card-media {
    background:
        radial-gradient(circle at 72% 8%, rgba(255, 228, 247, .85), transparent 37%),
        linear-gradient(145deg, #f5b8e4 0%, #f071c0 52%, #ef2998 100%);
}

.journal-showcase-card-orange .journal-showcase-card-media {
    background:
        radial-gradient(circle at 72% 10%, rgba(255, 239, 213, .92), transparent 38%),
        linear-gradient(145deg, #ffd0aa 0%, #ff9d5c 54%, #ff6419 100%);
}

.journal-showcase-card-number {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    width: 58px;
    height: 58px;
    font-size: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 26px 0;
    color: #fff;
    font-weight: 700;
    box-shadow: 8px 9px 20px rgba(0, 0, 0, .11);
}

.journal-showcase-card-blue .journal-showcase-card-number {
    background: linear-gradient(135deg, #27a7ff, #1a53d7);
}

.journal-showcase-card-pink .journal-showcase-card-number {
    background: linear-gradient(135deg, #ff36af, #ed1375);
}

.journal-showcase-card-orange .journal-showcase-card-number {
    background: linear-gradient(135deg, #ff9a37, #ff5d0e);
}

.journal-showcase-card-light {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    filter: blur(2px);
}

.journal-showcase-card-curve {
    position: absolute;
    right: -10%;
    bottom: -72px;
    left: -10%;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
}

.journal-showcase-card-curve-1 {
    bottom: -55px;
    background: rgba(255, 255, 255, .2);
    transform: rotate(7deg);
}

.journal-showcase-card-curve-2 {
    bottom: -88px;
    background: rgba(255, 255, 255, .2);
    transform: rotate(-5deg);
}

.journal-showcase-logo {
    position: relative;
    z-index: 4;
    display: flex;
    width: 82%;
    height: 75%;
    align-items: center;
    justify-content: center;
    padding: 22px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.journal-showcase-card:hover .journal-showcase-logo {
    transform: scale(1.06);
}

.journal-showcase-logo img {
    display: block;
    width: auto;
    max-width: 70%;
    height: auto;
    max-height: 125px;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(28, 35, 77, .13));
}

.journal-showcase-card-body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 0 18px 18px;
    text-align: center;
    background: #fff;
}

.journal-showcase-index {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -24px;
    padding: 7px 14px;
    border: 1px solid rgba(82, 123, 184, .12);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    box-shadow:
        0 8px 20px rgba(43, 63, 100, .08),
        inset 0 1px 0 rgba(255, 255, 255, .85);
}

.journal-showcase-card-blue .journal-showcase-index {
    color: #2357c6;
    background: #edf4ff;
}

.journal-showcase-card-pink .journal-showcase-index {
    color: #df287d;
    background: #fff0f7;
}

.journal-showcase-card-orange .journal-showcase-index {
    color: #ff651c;
    background: #fff2e8;
}

.journal-showcase-index-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.journal-showcase-card-body h3 {
    margin: 22px 0 0;
    color: #203b77;
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 700;
    line-height: 1.42;
}

.journal-showcase-card-body p {
    min-height: 54px;
    margin: 12px 0 0;
    color: #697386;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
}

.journal-showcase-action {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 25px;
    padding: 10px 12px 10px 20px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 500;
    transition: transform .25s ease;
}

.journal-showcase-card-blue .journal-showcase-action {
    color: #255ed3;
    background: linear-gradient(90deg, #edf4ff, #f8fbff);
}

.journal-showcase-card-pink .journal-showcase-action {
    color: #e2257c;
    background: linear-gradient(90deg, #fff0f6, #fff8fb);
}

.journal-showcase-card-orange .journal-showcase-action {
    color: #f56825;
    background: linear-gradient(90deg, #fff2e9, #fff9f5);
}

.journal-showcase-action-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    transition: transform .3s ease;
}

.journal-showcase-card-blue .journal-showcase-action-icon {
    background: linear-gradient(135deg, #4e8ef6, #2456d5);
}

.journal-showcase-card-pink .journal-showcase-action-icon {
    background: linear-gradient(135deg, #ff5fb0, #ed247d);
}

.journal-showcase-card-orange .journal-showcase-action-icon {
    background: linear-gradient(135deg, #ff973d, #ff5a0b);
}

.journal-showcase-card:hover .journal-showcase-action-icon {
    transform: rotate(8deg) scale(1.08);
}

.journal-showcase-note {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 28px;
    padding: 19px 30px;
    border: 1px solid rgba(207, 216, 231, .85);
    border-radius: 25px;
    color: #30445f;
    background: rgba(255, 255, 255, .93);
    box-shadow:
        0 16px 45px rgba(32, 48, 91, .09),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.journal-showcase-note-icon {
    display: flex;
    width: 68px;
    height: 68px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffb321;
    background: linear-gradient(145deg, #edf3ff, #fff3e2);
    font-size: 30px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.journal-showcase-note-content {
    min-width: 0;
}

.journal-showcase-note strong {
    display: block;
    color: #203b77;
    font-size: 22px;
    font-weight: 700;
}

.journal-showcase-note p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
}

/* =========================================================
   DARK MODE
   ========================================================= */
html.dark .journal-showcase-card-body {
    background: #111b2a;
}

html.dark .journal-showcase-card-body h3 {
    color: #f5f7fb;
}

html.dark .journal-showcase-card-body p {
    color: #9ca9bb;
}

html.dark .journal-showcase-note {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(16, 25, 40, .95);
}

html.dark .journal-showcase-note strong {
    color: #fff;
}

html.dark .journal-showcase-note p {
    color: #9eabbd;
}

/* =========================================================
   JOURNAL RESPONSIVE - REFINED
   ========================================================= */

/* =========================================================
   TABLET
   ========================================================= */
@media(min-width:768px) and (max-width:1023px) {
    .journal-showcase {
        padding: 46px 18px 44px;
    }

    .journal-showcase-container {
        width: min(920px, 100%);
    }

    .journal-showcase-heading {
        max-width: 720px;
        margin-bottom: 32px;
    }

    .journal-showcase-eyebrow {
        min-height: 42px;
        gap: 9px;
        padding: 6px 17px 6px 7px;
        font-size: 13px;
    }

    .journal-showcase-eyebrow-icon {
        width: 31px;
        height: 31px;
        font-size: 11px;
    }

    .journal-showcase-heading h2 {
        margin-top: 17px;
        font-size: clamp(30px, 4.5vw, 38px);
        line-height: 1.2;
        letter-spacing: -.025em;
    }

    .journal-showcase-heading p {
        max-width: 650px;
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.7;
    }

    .journal-showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .journal-showcase-card,
    .journal-showcase-card:last-child {
        width: 100%;
        grid-column: auto;
        border-radius: 22px;
    }

    .journal-showcase-card-media {
        height: 165px;
    }

    .journal-showcase-card-number {
        width: 46px;
        height: 46px;
        border-radius: 0 0 18px 0;
        font-size: 16px;
    }

    .journal-showcase-logo {
        width: 82%;
        height: 75%;
        padding: 14px;
    }

    .journal-showcase-logo img {
        max-width: 76%;
        max-height: 105px;
    }

    .journal-showcase-card-body {
        padding: 0 14px 14px;
    }

    .journal-showcase-index {
        min-height: 34px;
        margin-top: -17px;
        padding: 5px 11px;
        gap: 6px;
        font-size: 10px;
    }

    .journal-showcase-index-icon {
        font-size: 12px;
    }

    .journal-showcase-card-body h3 {
        margin-top: 14px;
        font-size: 16px;
        line-height: 1.45;
    }

    .journal-showcase-card-body p {
        min-height: 42px;
        margin-top: 7px;
        font-size: 11px;
        line-height: 1.6;
    }

    .journal-showcase-action {
        min-height: 42px;
        margin-top: 14px;
        padding: 7px 7px 7px 12px;
        border-radius: 13px;
        font-size: 11px;
    }

    .journal-showcase-action-icon {
        width: 29px;
        height: 29px;
        font-size: 9px;
    }

    .journal-showcase-note {
        gap: 13px;
        margin-top: 20px;
        padding: 14px 18px;
        border-radius: 18px;
    }

    .journal-showcase-note-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .journal-showcase-note strong {
        font-size: 15px;
    }

    .journal-showcase-note p {
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.6;
    }

    .journal-showcase-orb-1 {
        width: 320px;
        height: 320px;
    }

    .journal-showcase-orb-2 {
        width: 300px;
        height: 300px;
    }

    .journal-showcase-dots {
        transform: scale(.8);
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:767px) {
    .journal-showcase {
        padding: 40px 12px 38px;
    }

    .journal-showcase-container {
        width: 100%;
    }

    .journal-showcase-heading {
        max-width: 520px;
        margin-bottom: 27px;
    }

    .journal-showcase-eyebrow {
        min-height: 38px;
        gap: 7px;
        padding: 5px 14px 5px 6px;
        font-size: 11px;
    }

    .journal-showcase-eyebrow-icon {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .journal-showcase-heading h2 {
        margin-top: 14px;
        font-size: 28px;
        line-height: 1.25;
        letter-spacing: -.02em;
    }

    .journal-showcase-heading p {
        max-width: 500px;
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.65;
    }

    .journal-showcase-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .journal-showcase-card,
    .journal-showcase-card:last-child {
        width: 100%;
        grid-column: auto;
        border-radius: 20px;
    }

    .journal-showcase-card-media {
        height: 155px;
    }

    .journal-showcase-card-number {
        width: 44px;
        height: 44px;
        border-radius: 0 0 17px 0;
        font-size: 15px;
    }

    .journal-showcase-card-light {
        width: 180px;
        height: 180px;
    }

    .journal-showcase-logo {
        width: 82%;
        height: 76%;
        padding: 12px;
    }

    .journal-showcase-logo img {
        max-width: 72%;
        max-height: 100px;
    }

    .journal-showcase-card-body {
        padding: 0 14px 14px;
    }

    .journal-showcase-index {
        min-height: 32px;
        margin-top: -16px;
        padding: 4px 10px;
        gap: 5px;
        font-size: 10px;
    }

    .journal-showcase-index-icon {
        font-size: 11px;
    }

    .journal-showcase-card-body h3 {
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.45;
    }

    .journal-showcase-card-body p {
        min-height: 0;
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.6;
    }

    .journal-showcase-action {
        min-height: 40px;
        margin-top: 12px;
        padding: 6px 6px 6px 12px;
        gap: 10px;
        border-radius: 12px;
        font-size: 10px;
    }

    .journal-showcase-action-icon {
        width: 28px;
        height: 28px;
        font-size: 8px;
    }

    .journal-showcase-note {
        align-items: flex-start;
        gap: 11px;
        margin-top: 16px;
        padding: 13px 14px;
        border-radius: 17px;
    }

    .journal-showcase-note-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .journal-showcase-note strong {
        font-size: 14px;
    }

    .journal-showcase-note p {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.55;
    }

    .journal-showcase-wave {
        height: 180px;
    }

    .journal-showcase-wave-1 {
        bottom: 65px;
    }

    .journal-showcase-wave-2 {
        bottom: 10px;
    }

    .journal-showcase-orb-1 {
        top: -100px;
        left: -120px;
        width: 270px;
        height: 270px;
    }

    .journal-showcase-orb-2 {
        top: -100px;
        right: -130px;
        width: 260px;
        height: 260px;
    }

    .journal-showcase-orb-3 {
        display: none;
    }

    .journal-showcase-dots {
        opacity: .13;
        transform: scale(.65);
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media(max-width:479px) {
    .journal-showcase {
        padding: 36px 8px 34px;
    }

    .journal-showcase-heading {
        margin-bottom: 24px;
    }

    .journal-showcase-heading h2 {
        font-size: 26px;
    }

    .journal-showcase-heading p {
        font-size: 11px;
    }

    .journal-showcase-card-media {
        height: 145px;
    }

    .journal-showcase-logo img {
        max-width: 70%;
        max-height: 92px;
    }

    .journal-showcase-card-body h3 {
        font-size: 15px;
    }

    .journal-showcase-card-body p {
        font-size: 10.5px;
    }

    .journal-showcase-note {
        margin-top: 14px;
    }

    .journal-showcase-note-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media(max-width:374px) {
    .journal-showcase {
        padding: 32px 7px;
    }

    .journal-showcase-heading h2 {
        font-size: 24px;
    }

    .journal-showcase-eyebrow {
        font-size: 10px;
    }

    .journal-showcase-card-media {
        height: 135px;
    }

    .journal-showcase-logo img {
        max-height: 84px;
    }

    .journal-showcase-card-number {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }

    .journal-showcase-card-body {
        padding: 0 12px 12px;
    }

    .journal-showcase-card-body h3 {
        font-size: 14px;
    }

    .journal-showcase-action {
        min-height: 38px;
        font-size: 9.5px;
    }
}

/* =========================================================
   TOUCH DEVICES
   ========================================================= */
@media(hover:none), (pointer:coarse) {
    .journal-showcase-card:hover {
        transform: none;
    }

    .journal-showcase-card:hover .journal-showcase-logo,
    .journal-showcase-card:hover .journal-showcase-action-icon {
        transform: none;
    }
}

/* =========================================================
   JOURNAL DESKTOP COMPACT OVERRIDE
   วางท้ายสุดของ CSS Journal
   ========================================================= */
@media(min-width:1024px) {

    .journal-showcase {
        padding: 36px 20px 34px;
    }

    .journal-showcase-container {
        width: min(1080px, 100%);
    }

    /* -----------------------------------------------------
       HEADING
       ----------------------------------------------------- */
    .journal-showcase-heading {
        max-width: 720px;
        margin: 0 auto 28px;
    }

    .journal-showcase-eyebrow {
        min-height: 38px;
        gap: 8px;
        padding: 5px 16px 5px 6px;
        font-size: 11px;
    }

    .journal-showcase-eyebrow-icon {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .journal-showcase-heading h2 {
        margin-top: 13px;
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -.02em;
    }

    .journal-showcase-heading p {
        max-width: 620px;
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.65;
    }

    /* -----------------------------------------------------
       GRID
       ----------------------------------------------------- */
    .journal-showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    /* -----------------------------------------------------
       CARD
       ----------------------------------------------------- */
    .journal-showcase-card {
        border-radius: 21px;
        box-shadow:
            0 16px 38px rgba(20, 28, 75, .16),
            inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .journal-showcase-card:hover {
        transform: translateY(-5px);
        box-shadow:
            0 23px 48px rgba(18, 28, 82, .20),
            inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    /* -----------------------------------------------------
       IMAGE AREA
       ----------------------------------------------------- */
    .journal-showcase-card-media {
        height: 170px;
    }

    .journal-showcase-card-number {
        width: 44px;
        height: 44px;
        border-radius: 0 0 17px 0;
        font-size: 15px;
    }

    .journal-showcase-card-light {
        top: -70px;
        right: -55px;
        width: 185px;
        height: 185px;
    }

    .journal-showcase-card-curve {
        height: 115px;
    }

    .journal-showcase-card-curve-1 {
        bottom: -44px;
    }

    .journal-showcase-card-curve-2 {
        bottom: -67px;
    }

    .journal-showcase-logo {
        width: 78%;
        height: 72%;
        padding: 12px;
    }

    .journal-showcase-logo img {
        max-width: 68%;
        max-height: 95px;
    }

    .journal-showcase-card:hover .journal-showcase-logo {
        transform: scale(1.035);
    }

    /* -----------------------------------------------------
       CARD BODY
       ----------------------------------------------------- */
    .journal-showcase-card-body {
        padding: 0 14px 14px;
    }

    .journal-showcase-index {
        min-height: 32px;
        gap: 5px;
        margin-top: -16px;
        padding: 4px 10px;
        font-size: 9px;
    }

    .journal-showcase-index-icon {
        font-size: 11px;
    }

    .journal-showcase-card-body h3 {
        margin-top: 13px;
        font-size: 16px;
        line-height: 1.4;
    }

    .journal-showcase-card-body p {
        min-height: 38px;
        margin-top: 6px;
        font-size: 10.5px;
        line-height: 1.55;
    }

    /* -----------------------------------------------------
       ACTION BUTTON
       ----------------------------------------------------- */
    .journal-showcase-action {
        min-height: 39px;
        gap: 8px;
        margin-top: 12px;
        padding: 6px 6px 6px 12px;
        border-radius: 12px;
        font-size: 10px;
    }

    .journal-showcase-action-icon {
        width: 27px;
        height: 27px;
        font-size: 8px;
    }

    /* -----------------------------------------------------
       NOTE
       ----------------------------------------------------- */
    .journal-showcase-note {
        gap: 12px;
        margin-top: 16px;
        padding: 12px 17px;
        border-radius: 17px;
    }

    .journal-showcase-note-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .journal-showcase-note strong {
        font-size: 14px;
    }

    .journal-showcase-note p {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.55;
    }

    /* -----------------------------------------------------
       BACKGROUND DECORATION
       ----------------------------------------------------- */
    .journal-showcase-orb-1 {
        top: -170px;
        left: -100px;
        width: 340px;
        height: 340px;
    }

    .journal-showcase-orb-2 {
        top: -170px;
        right: -100px;
        width: 330px;
        height: 330px;
    }

    .journal-showcase-orb-3 {
        top: 125px;
        width: 36px;
        height: 36px;
    }

    .journal-showcase-dots {
        width: 100px;
        height: 85px;
        background-size: 13px 13px;
        opacity: .16;
    }

    .journal-showcase-dots-left {
        top: 58px;
        left: 18px;
    }

    .journal-showcase-dots-right {
        top: 200px;
        right: 14px;
    }

    .journal-showcase-wave {
        height: 180px;
    }

    .journal-showcase-wave-1 {
        bottom: 110px;
    }

    .journal-showcase-wave-2 {
        bottom: 50px;
    }
}

/* =========================================================
   UNIVERSITY LOGO MARQUEE
   ========================================================= */
.university-logo-section {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(97, 126, 255, .36) 0%, transparent 30%),
        radial-gradient(circle at 88% 5%, rgba(255, 91, 161, .32) 0%, transparent 32%),
        linear-gradient(120deg, rgba(237, 244, 255, .96) 0%, rgba(245, 241, 255, .96) 48%, rgba(255, 240, 247, .96) 100%);
}

.university-logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.university-logo-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 18px;
    padding: 5px 9px;
    animation: universityLogoMarquee 55s linear infinite;
    will-change: transform;
}

@keyframes universityLogoMarquee {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(-50%, 0, 0)
    }
}

.university-logo-item {
    position: relative;
    display: flex;
    width: 86px;
    height: 72px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    box-shadow:
        0 8px 24px rgba(48, 68, 95, .08),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateZ(0);
    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1),
        background .3s ease,
        box-shadow .3s ease;
}

.university-logo-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 60px;
    max-height: 54px;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 5px 8px rgba(48, 68, 95, .08));
}

.university-logo-item:hover {
    z-index: 3;
    background: #fff;
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 14px 32px rgba(48, 68, 95, .14),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.university-logo-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 70px;
    pointer-events: none;
}

.university-logo-fade-left {
    left: 0;
    background: linear-gradient(90deg, rgba(241, 246, 255, .98) 0%, rgba(241, 246, 255, .72) 35%, transparent 100%);
}

.university-logo-fade-right {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 242, 248, .98) 0%, rgba(255, 242, 248, .72) 35%, transparent 100%);
}

/* =========================================================
   DARK MODE
   ========================================================= */
html.dark .university-logo-section {
    background:
        radial-gradient(circle at 15% 10%, rgba(82, 123, 184, .22) 0%, transparent 30%),
        radial-gradient(circle at 88% 5%, rgba(200, 109, 121, .18) 0%, transparent 32%),
        linear-gradient(120deg, #101927 0%, #17182b 48%, #231522 100%);
}

html.dark .university-logo-item {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .055);
    box-shadow:
        0 9px 26px rgba(0, 0, 0, .2),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

html.dark .university-logo-item:hover {
    background: rgba(255, 255, 255, .09);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

html.dark .university-logo-fade-left {
    background: linear-gradient(90deg, #101927 0%, rgba(16, 25, 39, .8) 35%, transparent 100%);
}

html.dark .university-logo-fade-right {
    background: linear-gradient(270deg, #231522 0%, rgba(35, 21, 34, .8) 35%, transparent 100%);
}

/* =========================================================
   TABLET
   ========================================================= */
@media(min-width:768px) and (max-width:1023px) {
    .university-logo-section {
        padding: 8px 0;
    }

    .university-logo-track {
        gap: 14px;
        padding: 4px 7px;
        animation-duration: 48s;
    }

    .university-logo-item {
        width: 76px;
        height: 64px;
        border-radius: 15px;
    }

    .university-logo-item img {
        max-width: 52px;
        max-height: 47px;
    }

    .university-logo-fade {
        width: 42px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:767px) {
    .university-logo-section {
        padding: 7px 0;
        margin-bottom: 0px;
    }

    .university-logo-track {
        gap: 10px;
        padding: 3px 5px;
        animation-duration: 42s;
    }

    .university-logo-item {
        width: 65px;
        height: 56px;
        border-radius: 13px;
    }

    .university-logo-item img {
        max-width: 44px;
        max-height: 40px;
    }

    .university-logo-fade {
        width: 24px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media(max-width:479px) {
    .university-logo-track {
        gap: 8px;
        animation-duration: 38s;
    }

    .university-logo-item {
        width: 60px;
        height: 52px;
        border-radius: 12px;
    }

    .university-logo-item img {
        max-width: 40px;
        max-height: 37px;
    }
}

/* =========================================================
   TOUCH DEVICE
   ========================================================= */
@media(hover:none), (pointer:coarse) {
    .university-logo-item:hover {
        transform: none;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce) {
    .university-logo-track {
        animation: none;
    }

    .university-logo-marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .university-logo-marquee::-webkit-scrollbar {
        display: none;
    }
}

/* =========================================================
   STATISTICS + FAQ
   ========================================================= */
.psct-stats-section,
.psct-faq-section {
    position: relative;
    overflow: hidden;
    padding: 28px 16px
}

.psct-stats-section {
    isolation: isolate;

}

.psct-stats-orb {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(80px);
    opacity: .4
}

.psct-stats-orb-1 {
    top: -120px;
    left: -100px;
    width: 320px;
    height: 320px;
    background: #7EA6E0
}

.psct-stats-orb-2 {
    right: -110px;
    bottom: -140px;
    width: 330px;
    height: 330px;
    background: #E78E9A
}

.psct-section-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center
}

.psct-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(82, 123, 184, .12);
    border-radius: 999px;
    padding: 7px 13px;
    color: #527BB8;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 24px rgba(48, 68, 95, .06);
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(16px)
}

.psct-section-eyebrow i {
    font-size: 10px
}

.psct-section-heading h2 {
    margin: 13px 0 0;
    color: #30445F;
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 700;
    line-height: 1.25
}

.psct-section-heading p {
    max-width: 650px;
    margin: 10px auto 0;
    color: #8793a6;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8
}

.psct-stats-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px
}

.psct-stat-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 23px;
    padding: 22px 18px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 17px 45px rgba(48, 68, 95, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease
}

.psct-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(48, 68, 95, .14)
}

.psct-stat-card-glow {
    position: absolute;
    top: -70px;
    right: -60px;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    opacity: .13;
    pointer-events: none
}

.psct-stat-card-blue .psct-stat-card-glow {
    background: #3488ff
}

.psct-stat-card-pink .psct-stat-card-glow {
    background: #f23f99
}

.psct-stat-card-purple .psct-stat-card-glow {
    background: #8d4fd8
}

.psct-stat-card-orange .psct-stat-card-glow {
    background: #ff8f46
}

.psct-stat-icon {
    position: relative;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 14px
}

.psct-stat-card-blue .psct-stat-icon {
    color: #316dcc;
    background: #edf4ff
}

.psct-stat-card-pink .psct-stat-icon {
    color: #db347f;
    background: #fff0f6
}

.psct-stat-card-purple .psct-stat-icon {
    color: #7c51bb;
    background: #f5efff
}

.psct-stat-card-orange .psct-stat-icon {
    color: #eb7530;
    background: #fff3ea
}

.psct-stat-number-wrap {
    display: flex;
    align-items: baseline;
    margin-top: 20px;
    color: #30445F
}

.psct-stat-number {
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums
}

.psct-stat-suffix {
    margin-left: 2px;
    font-size: 19px;
    font-weight: 600
}

.psct-stat-card h3 {
    margin: 11px 0 0;
    color: #30445F;
    font-size: 14px;
    font-weight: 600
}

.psct-stat-card p {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 300;
    line-height: 1.6
}

.psct-faq-section {
    background: var(--psct-bg)
}

.psct-section-eyebrow-faq {
    color: #C86D79
}

.psct-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.psct-faq-item {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: 19px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 30px rgba(48, 68, 95, .045);
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease
}

.psct-faq-item.is-open {
    border-color: rgba(126, 166, 224, .28);
    background: #fff;
    box-shadow: 0 16px 38px rgba(48, 68, 95, .08)
}

.psct-faq-question {
    display: grid;
    width: 100%;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 15px 16px;
    color: #30445F;
    background: transparent;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation
}

.psct-faq-number {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #527BB8;
    background: #EDF4FF;
    font-size: 12px;
    font-weight: 600
}

.psct-faq-question-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55
}

.psct-faq-icon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #527BB8;
    background: #EDF4FF;
    font-size: 12px;
    transition: transform .3s ease, background .3s ease, color .3s ease
}

.psct-faq-item.is-open .psct-faq-icon {
    color: #fff;
    background: linear-gradient(135deg, #527BB8, #C86D79);
    transform: rotate(45deg)
}

.psct-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1), opacity .25s ease
}

.psct-faq-item.is-open .psct-faq-answer {
    grid-template-rows: 1fr;
    opacity: 1
}

.psct-faq-answer-inner {
    overflow: hidden
}

.psct-faq-answer p {
    margin: 0;
    padding: 0 62px 17px;
    color: #7d899b;
    font-size: 13.5px;
    font-weight: 300;
    line-height: .8;
}

html.dark .psct-stats-section {
    background: linear-gradient(180deg, #0c1420, #101a29 48%, #0b121d)
}

html.dark .psct-section-eyebrow {
    border-color: rgba(255, 255, 255, .08);
    color: #AFCBF5;
    background: rgba(255, 255, 255, .05)
}

html.dark .psct-section-heading h2,
html.dark .psct-stat-number-wrap,
html.dark .psct-stat-card h3 {
    color: #f1f5f9
}

html.dark .psct-section-heading p,
html.dark .psct-stat-card p {
    color: #8795aa
}

html.dark .psct-stat-card {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(17, 27, 42, .78);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22)
}

html.dark .psct-faq-section {
    background: #0b111b
}

html.dark .psct-faq-item {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(17, 27, 42, .7)
}

html.dark .psct-faq-item.is-open {
    border-color: rgba(175, 203, 245, .16);
    background: #111b2a
}

html.dark .psct-faq-question {
    color: #f1f5f9
}

html.dark .psct-faq-number,
html.dark .psct-faq-icon {
    color: #AFCBF5;
    background: rgba(126, 166, 224, .1)
}

html.dark .psct-faq-answer p {
    color: #94a3b8
}

@media(max-width:1023px) {

    .psct-stats-section,
    .psct-faq-section {
        padding: 48px 16px
    }

    .psct-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:767px) {

    .psct-stats-section,
    .psct-faq-section {
        padding: 40px 12px
    }

    .psct-section-heading {
        margin-bottom: 25px
    }

    .psct-section-heading h2 {
        font-size: 26px
    }

    .psct-section-heading p {
        font-size: 11.5px
    }

    .psct-stats-grid {
        gap: 9px
    }

    .psct-stat-card {
        border-radius: 18px;
        padding: 17px 13px
    }

    .psct-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 12px
    }

    .psct-stat-number-wrap {
        margin-top: 14px
    }

    .psct-stat-number {
        font-size: 30px
    }

    .psct-stat-suffix {
        font-size: 15px
    }

    .psct-stat-card h3 {
        margin-top: 8px;
        font-size: 12px
    }

    .psct-stat-card p {
        font-size: 9px
    }

    .psct-faq-question {
        grid-template-columns: 31px minmax(0, 1fr) 31px;
        gap: 9px;
        padding: 13px 12px
    }

    .psct-faq-number,
    .psct-faq-icon {
        width: 29px;
        height: 29px
    }

    .psct-faq-question-text {
        font-size: 16px
    }

    .psct-faq-answer p {
        padding: 0 51px 14px;
        font-size: 10.5px;
        line-height: 1.7
    }
}

@media(max-width:479px) {
    .psct-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .psct-stat-card {
        padding: 15px 11px
    }

    .psct-stat-number {
        font-size: 27px
    }

    .psct-stat-card p {
        display: none
    }

    .psct-faq-answer p {
        padding-right: 14px;
        padding-left: 52px
    }
}

@media(hover:none), (pointer:coarse) {
    .psct-stat-card:hover {
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {

    .psct-stat-card,
    .psct-faq-answer,
    .psct-faq-icon {
        animation: none !important;
        transition: none !important
    }
}

/* =========================================================
   SELECT2 — PSCT THEME
   ========================================================= */

.select2-container {
    width: 100% !important;
    font-family: 'Kanit', sans-serif;
}

/* ---------- CONTROL ---------- */
.select2-container .select2-selection--single {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    background: rgba(255, 255, 255, .8) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
    outline: none !important;
}

.select2-container .select2-selection--single:hover {
    border-color: rgba(126, 166, 224, .7) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(126, 166, 224, .9) !important;
    box-shadow: 0 0 0 4px rgba(126, 166, 224, .10) !important;
}

/* ---------- SELECTED VALUE ---------- */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0 44px 0 16px !important;
    line-height: 48px !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- PLACEHOLDER ---------- */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #cbd5e1 !important;
    font-weight: 300 !important;
}

/* ---------- ARROW ---------- */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 42px !important;
    height: 48px !important;
    top: 0 !important;
    right: 3px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    position: static !important;
    border: 0 !important;
    border-right: 1.5px solid #94a3b8 !important;
    border-bottom: 1.5px solid #94a3b8 !important;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease, border-color .2s ease;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: #527BB8 !important;
    transform: rotate(225deg) translate(-2px, -2px);
}

/* ---------- CLEAR BUTTON ---------- */
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 38px !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    color: #94a3b8 !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    z-index: 2;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #C86D79 !important;
}

/* =========================================================
   DROPDOWN
   ========================================================= */

.select2-dropdown {
    margin-top: 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .13) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.select2-container--open .select2-dropdown--above {
    margin-top: -7px !important;
    margin-bottom: 7px !important;
}

/* ---------- SEARCH AREA ---------- */
.select2-search--dropdown {
    padding: 10px !important;
    border-bottom: 1px solid #f1f5f9;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 42px !important;
    width: 100% !important;
    padding: 0 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    outline: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #7EA6E0 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(126, 166, 224, .10) !important;
}

/* ---------- RESULTS ---------- */
.select2-results {
    padding: 6px !important;
}

.select2-results__options {
    max-height: 300px !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.select2-results__options::-webkit-scrollbar {
    width: 5px;
}

.select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}

.select2-results__options::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

/* ---------- OPTION ---------- */
.select2-container--default .select2-results__option {
    min-height: 42px;
    display: flex;
    align-items: center;
    margin: 2px 0 !important;
    padding: 9px 11px !important;
    border-radius: 11px !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    transition: background-color .15s ease, color .15s ease !important;
}

/* keyboard / mouse hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #EDF4FF !important;
    color: #30445F !important;
}

/* selected */
.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(126, 166, 224, .12) !important;
    color: #527BB8 !important;
    font-weight: 500 !important;
}

/* selected + hover */
.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background: rgba(126, 166, 224, .18) !important;
    color: #527BB8 !important;
}

/* no results / loading */
.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #94a3b8 !important;
}

/* =========================================================
   UNIVERSITY LOGO
   ใช้กับ templateResult / templateSelection
   ========================================================= */

.select2-university-option {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.select2-university-option img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    border-radius: 7px;
    background: #fff;
}

.select2-university-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   DISABLED
   ========================================================= */

.select2-container--default.select2-container--disabled .select2-selection--single {
    cursor: not-allowed !important;
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    opacity: .65;
}

.select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: #94a3b8 !important;
}

/* =========================================================
   DARK MODE
   ========================================================= */

.dark .select2-container .select2-selection--single {
    border-color: rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .05) !important;
}

.dark .select2-container .select2-selection--single:hover {
    border-color: rgba(126, 166, 224, .5) !important;
}

.dark .select2-container--default.select2-container--focus .select2-selection--single,
.dark .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(126, 166, 224, .75) !important;
    box-shadow: 0 0 0 4px rgba(126, 166, 224, .10) !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #475569 !important;
}

.dark .select2-dropdown {
    border-color: rgba(255, 255, 255, .10) !important;
    background: rgba(17, 25, 39, .98) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .35) !important;
}

.dark .select2-search--dropdown {
    border-bottom-color: rgba(255, 255, 255, .07);
}

.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
}

.dark .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #7EA6E0 !important;
    background: rgba(255, 255, 255, .07) !important;
}

.dark .select2-container--default .select2-results__option {
    color: #cbd5e1 !important;
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(126, 166, 224, .12) !important;
    color: #fff !important;
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(126, 166, 224, .16) !important;
    color: #7EA6E0 !important;
}

.dark .select2-container--default.select2-container--disabled .select2-selection--single {
    border-color: rgba(255, 255, 255, .07) !important;
    background: rgba(255, 255, 255, .025) !important;
}

.dark .select2-university-option img {
    background: rgba(255, 255, 255, .92);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px) {
    .select2-container .select2-selection--single {
        height: 50px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 48px !important;
        font-size: 13px !important;
    }

    .select2-dropdown {
        border-radius: 16px !important;
    }

    .select2-results__options {
        max-height: 260px !important;
    }
}

.profile-input {
    width: 100%;
    border-radius: .9rem;
    border: 1px solid rgb(226 232 240);
    background: rgba(255, 255, 255, .8);
    padding: .72rem .9rem;
    font-size: .875rem;
    color: rgb(30 41 59);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s, color .2s;
}

.profile-role-badge {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 42%, #3b82f6 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 6px 18px rgba(236, 72, 153, .18);
}

.profile-input::placeholder {
    color: rgb(148 163 184);
}

.profile-input:focus {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    background: #fff;
}

.profile-input:disabled,
.profile-input[readonly] {
    cursor: not-allowed;
}

html.dark .profile-input {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: rgb(226 232 240);
}

html.dark .profile-input::placeholder {
    color: rgb(100 116 139);
}

html.dark .profile-input:focus {
    border-color: rgba(96, 165, 250, .75);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
    background: rgba(255, 255, 255, .055);
}

/* =========================================================
   PROFILE NAVIGATION
   ========================================================= */

.profile-nav-item {
    position: relative;
}

.profile-nav-active {
    background: linear-gradient(135deg,
            rgba(239, 246, 255, .95),
            rgba(248, 250, 252, .9));
    color: #16345f;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .08);
}

.profile-nav-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 22px;
    border-radius: 999px;
    background: #315f9f;
    transform: translateY(-50%);
}

html.dark .profile-nav-active {
    background: rgba(59, 130, 246, .1);
    color: rgb(147 197 253);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .08);
}

html.dark .profile-nav-active::before {
    background: rgb(96 165 250);
}

/* =========================================================
   SELECT
   ========================================================= */

.profile-select {
    width: 100%;
}

#profilePage .select2-container {
    width: 100% !important;
}

#profilePage .select2-container .select2-selection--single {
    height: 46px;
    border: 1px solid rgb(226 232 240);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

#profilePage .select2-container .select2-selection--single .select2-selection__rendered {
    width: 100%;
    line-height: 44px;
    padding-left: .9rem;
    padding-right: 2.5rem;
    color: rgb(30 41 59);
    font-size: .875rem;
}

#profilePage .select2-container .select2-selection--single .select2-selection__placeholder {
    color: rgb(148 163 184);
}

#profilePage .select2-container .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: .5rem;
}

#profilePage .select2-container--default.select2-container--focus .select2-selection--single,
#profilePage .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    background: #fff;
}

#profileSidebar {
    align-self: start;
}

@media (min-width:1024px) {
    #profileSidebar {
        position: sticky;
        top: 110px;
        z-index: 20;
    }
}

html.dark #profilePage .select2-container .select2-selection--single {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}

html.dark #profilePage .select2-container .select2-selection--single .select2-selection__rendered {
    color: rgb(226 232 240);
}

html.dark #profilePage .select2-container .select2-selection--single .select2-selection__placeholder {
    color: rgb(100 116 139);
}

html.dark #profilePage .select2-container--default.select2-container--focus .select2-selection--single,
html.dark #profilePage .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(96, 165, 250, .75);
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

/* Select2 dropdown */
.select2-dropdown {
    border: 1px solid rgb(226 232 240) !important;
    border-radius: .9rem !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.select2-results__option {
    padding: .65rem .85rem !important;
    font-size: .8rem;
    color: rgb(51 65 85);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

html.dark .select2-dropdown {
    border-color: rgba(255, 255, 255, .1) !important;
    background: rgb(15 23 42) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

html.dark .select2-results__option {
    color: rgb(203 213 225);
}

html.dark .select2-container--default .select2-results__option--selected {
    background: rgba(255, 255, 255, .06) !important;
}

html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(59, 130, 246, .16) !important;
    color: rgb(147 197 253) !important;
}

/* =========================================================
   DYNAMIC PROFILE THEME
   ========================================================= */

.profile-dynamic-gradient {
    background: linear-gradient(135deg,
            var(--profile-color-1, #17375f) 0%,
            var(--profile-color-2, #244e82) 52%,
            var(--profile-color-3, #527bb8) 100%);
}

/* =========================================================
   ACCOUNT STATUS ANIMATIONS
   ========================================================= */

@keyframes psctAccountBreath {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, .06);
        opacity: .72;
    }

    50% {
        box-shadow: 0 0 0 5px rgba(239, 68, 68, .10);
        opacity: 1;
    }
}

@keyframes psctAccountGlow {

    0%,
    100% {
        opacity: .35;
        transform: scale(.96);
    }

    50% {
        opacity: .8;
        transform: scale(1.05);
    }
}

@keyframes psctAvatarBreath {

    0%,
    100% {
        opacity: .35;
        transform: scale(.96);
    }

    50% {
        opacity: .8;
        transform: scale(1.08);
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .nav-user-button,
    .nav-user-button *,
    .profile-nav-item,
    [class*="psctAccountBreath"],
    [class*="psctAccountGlow"],
    [class*="psctAvatarBreath"] {
        animation: none !important;
        transition: none !important;
    }
}

#receiptProfileForm .field-valid {
    border-color: rgb(16 185 129) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .08);
}

#receiptProfileForm .field-invalid {
    border-color: rgb(239 68 68) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .08);
}

html.dark #receiptProfileForm .field-valid {
    border-color: rgba(52, 211, 153, .65) !important;
}

html.dark #receiptProfileForm .field-invalid {
    border-color: rgba(248, 113, 113, .7) !important;
}

.receipt-type-option:has(input:checked) {
    border-color: rgba(59, 130, 246, .5);
    background: rgba(239, 246, 255, .65);
}

html.dark .receipt-type-option:has(input:checked) {
    border-color: rgba(96, 165, 250, .35);
    background: rgba(59, 130, 246, .07);
}

#receiptSaveBar {
    position: sticky;
    bottom: 0;
    z-index: 40;
}

.receipt-default-track {
    position: relative;
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 9999px;
    background: #e2e8f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
    transition: .25s ease;
}

.receipt-default-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transition: .25s cubic-bezier(.4, 0, .2, 1);
}

.receipt-default-knob i {
    font-size: 7px;
    color: #d97706;
    opacity: 0;
    transform: scale(.5);
    transition: .2s ease;
}

#receiptIsDefault:checked+.receipt-default-track {
    background: #f59e0b;
}

#receiptIsDefault:checked+.receipt-default-track .receipt-default-knob {
    transform: translateX(20px);
}

#receiptIsDefault:checked+.receipt-default-track .receipt-default-knob i {
    opacity: 1;
    transform: scale(1);
}

.dark .receipt-default-track {
    background: #334155;
}

.dark #receiptIsDefault:checked+.receipt-default-track {
    background: #f59e0b;
}
.timeline-row{
    opacity:.62;
    transition:opacity .45s ease,transform .45s ease;
}

.timeline-row.is-active{
    opacity:1;
}

.timeline-row.is-active .timeline-node{
    box-shadow:
        0 0 0 8px rgba(49,95,145,.08),
        0 12px 35px rgba(23,59,99,.26);
}

.timeline-card img{
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.timeline-card:hover img{
    transform:scale(1.08);
}

@media (min-width:1024px){
    .timeline-row[data-side="left"] .timeline-card::before,
    .timeline-row[data-side="right"] .timeline-card::before{
        content:"";
        position:absolute;
        top:50%;
        width:32px;
        height:1px;
        background:linear-gradient(
            90deg,
            rgba(49,95,145,.28),
            rgba(49,95,145,.05)
        );
    }

    .timeline-row[data-side="left"] .timeline-card::before{
        right:-32px;
    }

    .timeline-row[data-side="right"] .timeline-card::before{
        left:-32px;
        transform:rotate(180deg);
    }
}
@keyframes latestRing{
    0%{transform:scale(.72);opacity:0}
    35%{opacity:1}
    100%{transform:scale(1.45);opacity:0}
}

.timeline-latest-ring{
    animation:latestRing 1.8s ease-out .4s 2;
}