/* =====================================================
   Shared Home Section Tokens
   This block is safe to repeat because values are identical.
   ===================================================== */
.hs-section{
    --hs-primary:var(--theme-color,#0f3d5e);
    --hs-secondary:var(--theme-color2,#0b7285);
    --hs-dark:#172033;
    --hs-text:#1f2937;
    --hs-muted:#667085;
    --hs-light:#f6f9fc;
    --hs-white:#ffffff;
    position:relative;
    padding:70px 0;
    overflow:hidden;
}
.hs-section-inner{position:relative;z-index:2;}
.hs-bg-overlay{position:absolute;inset:0;z-index:1;}
.hs-heading{margin-bottom:34px;}
.hs-heading .site-title{font-weight:800;}
.hs-kicker{display:inline-flex;padding:5px 14px;border-radius:50px;background:rgba(15,61,94,.08);color:var(--hs-primary);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;margin-bottom:9px;}
.hs-heading-text{max-width:720px;margin:10px auto 0;color:var(--hs-muted);}
.hs-heading-light .hs-heading-text{color:rgba(255,255,255,.86);}
.hs-divider-wrap{margin-top:7px;}
.hs-section a{text-decoration:none;}
.hs-section img{max-width:100%;}
@media(max-width:991.98px){.hs-section{padding:55px 0;}.hs-heading{margin-bottom:26px;}}
@media(max-width:575.98px){.hs-section{padding:44px 0;}.hs-heading{margin-bottom:22px;}}

/* =====================================================
   Announcement Section - 6 Layouts
   ===================================================== */
.hs-announcement-section{background-size:cover;background-position:center;}
.hs-announcement-card{height:100%;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 16px 42px rgba(23,32,51,.09);}
.hs-announcement-card-header{background:var(--hs-primary)!important;border-radius:0!important;padding:16px 20px;}
.hs-announcement-board{height:390px;}.hs-announcement-item{background:#f3f6fa;border-radius:12px;margin:12px;padding:10px;}
.hs-announcement-date{background:var(--hs-secondary)!important;}.hs-notice-title-link{color:#111;}.hs-notice-click{display:inline-block;margin-top:6px;color:var(--hs-primary);font-weight:700;}
.hs-announcement-l1{background:#fff;}.hs-announcement-l1 .hs-announcement-card{border-top:5px solid var(--hs-primary);}
.hs-announcement-l2{background:linear-gradient(135deg,var(--hs-primary),var(--hs-dark));}.hs-announcement-l2 .site-title,.hs-announcement-l2 .hs-heading-text{color:#fff;}
.hs-announcement-l3{background:var(--hs-light);}.hs-announcement-l3 .hs-announcement-card{border-radius:0 28px 28px 28px;}
.hs-announcement-l4{background:radial-gradient(circle at top right,rgba(11,114,133,.15),transparent 35%),#fff;}.hs-announcement-l4 .hs-announcement-card-header{background:var(--hs-secondary)!important;}
.hs-announcement-l5{background:#fff;}.hs-announcement-l5 .hs-announcement-card{border-radius:34px;box-shadow:none;border:1px solid rgba(15,61,94,.14);}.hs-announcement-l5 .hs-announcement-card-header{background:linear-gradient(90deg,var(--hs-primary),var(--hs-secondary))!important;}
@media(max-width:991.98px){.hs-announcement-board{height:330px;}}
/* =====================================================
   EVENT ACTIVITIES TAB SCROLLER FINAL FIX
   This avoids global .notice-board .marquee JS conflict.
   ===================================================== */

.hs-event-card {
    display: flex;
    flex-direction: column;
}

.hs-event-tabs {
    border-bottom: 0 !important;
    gap: 8px;
    padding: 8px 10px 0;
    flex-wrap: nowrap;
}

.hs-event-tabs .nav-link {
    border: 1px solid rgba(15, 61, 94, 0.14) !important;
    border-radius: 50px !important;
    color: var(--hs-primary) !important;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 14px;
    background: #f6f9fc !important;
    line-height: 1.2;
}

.hs-event-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--hs-primary), var(--hs-secondary)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.hs-event-tab-content {
    padding-top: 8px;
}

.hs-event-card .tab-pane {
    width: 100%;
}

/* Event board must NOT use .notice-board .marquee */
.hs-event-scroll-board {
    height: 330px;
    overflow: hidden;
    position: relative;
    margin: 0;
    background: transparent;
}

.hs-event-marquee {
    display: block;
    width: 100%;
    animation: hsEventScrollUp 26s linear infinite;
    will-change: transform;
}

.hs-event-scroll-board:hover .hs-event-marquee {
    animation-play-state: paused;
}

.hs-event-marquee-track {
    display: block;
    width: 100%;
    padding-bottom: 8px;
}

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

    100% {
        transform: translateY(-50%);
    }
}

/* Keep event items same as notices */
.hs-event-scroll-board .hs-announcement-item {
    width: calc(100% - 24px);
    margin: 12px;
    padding: 10px;
    background: #f3f6fa;
    border-radius: 12px;
}

/* Remove conflict from earlier inline/global heights */
.hs-event-scroll-board .marquee,
.hs-event-scroll-board .nbx-marquee,
.hs-event-scroll-board .nbx-marquee__strip,
.hs-event-scroll-board .nbx-marquee__track {
    animation: none !important;
    transform: none !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    .hs-event-scroll-board {
        height: 300px;
    }

    .hs-event-marquee {
        animation-duration: 28s;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .hs-event-tabs {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .hs-event-tabs .nav-link {
        font-size: 12px;
        padding: 6px 10px;
    }

    .hs-event-scroll-board {
        height: 270px;
    }

    .hs-event-marquee {
        animation-duration: 30s;
    }

    .hs-event-scroll-board .hs-announcement-item {
        width: calc(100% - 20px);
        margin: 10px;
        padding: 10px;
    }
}
/* =====================================================
   EVENT ACTIVITIES SCROLL SPEED SAME AS NOTICE
   Paste at END of announcement.css
   ===================================================== */

.hs-event-marquee {
    animation: hsEventScrollUp 12s linear infinite !important;
}

@media (max-width: 991.98px) {
    .hs-event-marquee {
        animation-duration: 12s !important;
    }
}

@media (max-width: 575.98px) {
    .hs-event-marquee {
        animation-duration: 12s !important;
    }
}