/* ===== Prompt Font (self-hosted) ===== */
/* ใช้ system font Thai ที่มีในเครื่อง + fallback */
@font-face {
    font-family: 'Prompt';
    src: local('Prompt'), local('Prompt-Regular');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: local('Prompt Bold'), local('Prompt-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== Base ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Prompt', 'Sarabun', 'Noto Sans Thai', sans-serif;
    font-size: 16px;
    background-color: #f9fafb;
    margin: 0;
    padding: 0;
}

/* ===== Marquee ===== */
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
    white-space: nowrap;
    display: inline-block;
}

/* ===== Language Switcher ===== */
div.mod-languages ul {
    background-color: ivory;
    padding: 3px 6px;
    border-radius: 50px;
    list-style: none;
    display: inline-flex;
    gap: 2px;
    font-size: 14px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    margin: 0;
}

div.mod-languages ul:hover {
    opacity: 1;
}

div.mod-languages ul>li {
    margin: 0;
    padding: 3px 4px;
    border-radius: 50px;
}

div.mod-languages ul li.lang-active {
    background-color: #FFCE00;
}

/* ===== Article content ===== */
article ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
}

article ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
}

article img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* ===== Prose overrides ===== */
.prose img {
    border-radius: 0.5rem;
}

.prose a {
    color: #d97706;
}

.prose a:hover {
    color: #b45309;
}

/* ===== Sidebar menu ===== */
#sideMenu nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sideMenu nav ul li a {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    transition: background 0.2s;
}

#sideMenu nav ul li a:hover,
#sideMenu nav ul li a.active {
    background: #f3f4f6;
    color: #d97706;
}

/* ===== Smooth scroll ===== */
html {
    scroll-behavior: smooth;
}

/* Search animation */
#searchBox {
    overflow: hidden;
    max-width: 0;
    transition: max-width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

#searchBox.open {
    max-width: 250px;
    opacity: 1;
    display: block !important;
}

/* Search box ยืดสวย */
#searchBox {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
}

#searchBox.open {
    width: 220px;
    opacity: 1;
}

#searchInput {
    width: 100%;
    padding: 6px 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    background: #fff;
    font-family: inherit;
}

#searchInput:focus {
    border-color: #1a2744;
}

/* ชื่อโรงเรียน gap */
.logo-area {
    gap: 12px !important;
}

div.mod-languages ul li {
    border-radius: 50px;
}

div.mod-languages ul li.lang-active {
    background-color: #FFCE00 !important;
}

div.mod-languages ul li a {
    color: #1a2744 !important;
    font-weight: 600;
    font-size: 13px;
    padding: 3px 10px;
}

/* โลโก้ header */
header a img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
}

/* ===== Language switcher ===== */
.lang-wrap p,
.lang-wrap label {
    display: none !important;
}

div.mod-languages ul {
    background: transparent !important;
    padding: 2px 4px;
    border-radius: 50px;
    list-style: none;
    display: inline-flex;
    gap: 2px;
    margin: 0;
    opacity: 1;
}

div.mod-languages ul li {
    margin: 0;
    padding: 0;
    border-radius: 50px;
}

div.mod-languages ul li a {
    display: block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #1a2744;
    text-decoration: none;
    border-radius: 50px;
}

div.mod-languages ul li.lang-active {
    background-color: #1a2744 !important;
}

div.mod-languages ul li.lang-active a {
    color: #FFCE00 !important;
}

/* Marquee bar lang */














/* ไม่มี overflow แนวนอน */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ซ่อนปุ่มภาษาที่ลอยบนวิดีโอบนมือถือ */
@media (max-width: 767px) {

    /* ซ่อนเฉพาะบนวิดีโอ hero (homepage) เท่านั้น */
    .absolute .lang-wrap {
        display: none !important;
    }

    /* แสดงปุ่มภาษาใน marquee bar สีน้ำเงิน (หน้าอื่น) */
    div[style*="background:#1a2744"] .lang-wrap {
        display: block !important;
    }
}





/* ===== Mobile header fix ===== */
@media (max-width: 767px) {
    header a[href="index.php"] {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        gap: 6px !important;
    }

    header a[href="index.php"] img {
        height: 36px !important;
        width: 36px !important;
        flex-shrink: 0 !important;
    }

    header a[href="index.php"]>div {
        padding-left: 6px !important;
        min-width: 0;
        overflow: hidden;
        flex: 1;
    }

    header a[href="index.php"] span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    header a[href="index.php"] span:first-child {
        font-size: 12px !important;
    }

    header a[href="index.php"] span:nth-child(2) {
        font-size: 10px !important;
    }

    header a[href="index.php"] span:nth-child(3) {
        font-size: 9px !important;
    }

    /* ซ่อนปุ่มภาษาใน header แต่แสดงใน marquee */
    header>div:first-child .lang-wrap {
        display: none !important;
    }

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* ปุ่มภาษาใน marquee แสดงทุกขนาดจอ */
.absolute .lang-wrap,
.z-20 .lang-wrap,
div[style*="background:#1a2744"] .lang-wrap {
    display: block !important;
}

/* มือถือ: บังคับแสดงปุ่มภาษาใน marquee bar สีน้ำเงิน (หน้าอื่น) */
@media (max-width: 767px) {
    div[style*="background:#1a2744"] .lang-wrap {
        display: block !important;
    }
}

/* สีปุ่มภาษาใน marquee (พื้นมืด) */
.absolute div.mod-languages ul li a,
.z-20 div.mod-languages ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.absolute div.mod-languages ul li.lang-active,
.z-20 div.mod-languages ul li.lang-active {
    background-color: #FFCE00 !important;
}

.absolute div.mod-languages ul li.lang-active a,
.z-20 div.mod-languages ul li.lang-active a {
    color: #1a2744 !important;
}

/* ===== Timeline ประวัติโรงเรียน ===== */
.pbu-tl {
    font-family: 'Prompt', 'Sarabun', 'Noto Sans Thai', sans-serif;
    max-width: 100%;
    margin: 0;
    padding: 1.5rem 0;
}

.pbu-tl h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a2744;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #FFCE00;
}

.pbu-tl-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0 1rem;
    margin-bottom: 2.5rem;
    position: relative;
}

.pbu-tl-item::before {
    content: '';
    position: absolute;
    left: 155px;
    top: 8px;
    bottom: -2.5rem;
    width: 1px;
    background: #e5e7eb;
}

.pbu-tl-item:last-child::before {
    display: none;
}

.pbu-year {
    text-align: right;
    padding-top: 2px;
}

.pbu-year .era {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.pbu-year .date {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.pbu-dot {
    position: absolute;
    left: 149px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFCE00;
    border: 2px solid #fff;
    z-index: 1;
}

.pbu-dot.current {
    background: #1a2744;
}

.pbu-content {
    padding-left: 1.5rem;
}

.pbu-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    background: #FFCE00;
    color: #1a2744;
    padding: 2px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.pbu-tag.current {
    background: #1a2744;
    color: #FFCE00;
}

.pbu-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2744;
    line-height: 1.4;
    margin-bottom: 8px;
}

.pbu-body {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 8px;
}

.pbu-list {
    list-style: none !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
}

.pbu-list li {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    padding-left: 14px !important;
    position: relative;
}

.pbu-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: #d1d5db;
}

}







/* ===== Menu Mobile/Tablet ===== */

/* ซ่อน hamburger บน desktop */
/* แสดง hamburger บน tablet/mobile */
@media (max-width: 1024px) {}

/* mobileMenu toggle */



/* เมนูหลัก */
#mobileMenu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#mobileMenu ul li {
    border-bottom: 1px dotted rgba(26, 39, 68, 0.2);
    width: 100%;
}

#mobileMenu ul li:last-child {
    border-bottom: none;
}

#mobileMenu ul li>a,
#mobileMenu ul li>span {
    display: block !important;
    padding: 10px 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a2744 !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* submenu ซ่อนก่อน */



/* submenu style */
#mobileMenu ul ul li {
    border-bottom: none;
}

#mobileMenu ul ul li a {
    padding: 6px 8px 6px 28px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1a2744 !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 2px !important;
    background: transparent !important;
}

/* mobileMenu show/hide */
#mobileMenu {
    display: none !important;
}

#mobileMenu:not(.hidden) {
    display: block !important;
}

/* submenu */
#mobileMenu ul ul {
    display: none !important;
}

#mobileMenu ul ul:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
}





/* ===== Hamburger ===== */
@media (min-width: 1181px) {
    #menuToggle {
        display: none !important;
    }

    #mobileMenu {
        display: none !important;
    }
}

@media (max-width: 1180px) {
    #menuToggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    header nav {
        display: none !important;
    }
}

/* ===== Submenu mobile/tablet override ===== */
@media (max-width: 1180px) {
    #mobileMenu ul.submenu {
        display: none !important;
        position: static !important;
        box-shadow: none !important;
        width: 100% !important;
        background: transparent !important;
    }

    #mobileMenu ul.submenu:not(.hidden) {
        display: block !important;
    }

    #mobileMenu .submenu-toggle {
        pointer-events: auto !important;
    }
}

/* ===== Mobile menu หลัก ===== */
@media (max-width: 1180px) {

    #mobileMenu ul>li>a,
    #mobileMenu ul>li>button,
    #mobileMenu ul>li>span {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1a2744 !important;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        text-align: left !important;
        background: transparent !important;
        border: none !important;
    }

    #mobileMenu ul>li {
        border-bottom: 1px solid rgba(26, 39, 68, 0.15) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mobileMenu ul>li:last-child {
        border-bottom: none !important;
    }

    /* submenu items */
    #mobileMenu ul.submenu li a {
        font-size: 14px !important;
        font-weight: 400 !important;
        padding: 8px 12px 8px 28px !important;
        color: #1a2744 !important;
        text-decoration: underline !important;
        text-decoration-style: dotted !important;
        text-underline-offset: 2px !important;
    }
}

@media (max-width: 1024px) {
    .pbu-tl-item {
        grid-template-columns: 70px 1fr;
        gap: 0 0;
    }

    .pbu-tl-item::before {
        left: 76px;
    }

    .pbu-dot {
        left: 70px;
    }

    .pbu-year {
        padding-right: 6px;
    }

    .pbu-year .era {
        font-size: 10px;
    }

    .pbu-year .date {
        font-size: 11px;
    }

    .pbu-content {
        padding-left: 1.2rem;
    }

    .pbu-title {
        font-size: 14px;
    }

    .pbu-body {
        font-size: 13px;
    }
}

/* ===== คณะผู้บริหาร ===== */
.mgmt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.mgmt-card {
    text-align: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.2rem 0.8rem;
}

.mgmt-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFCE00;
    display: block;
    margin: 0 auto 0.8rem;
}

.mgmt-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2744;
    margin-bottom: 4px;
}

.mgmt-pos {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .mgmt-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* ===== คณะผู้บริหาร ===== */
.mgmt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}

.mgmt-table td {
    width: 25%;
    text-align: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.2rem 0.8rem;
    vertical-align: top;
}

.mgmt-table img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFCE00;
    display: block;
    margin: 0 auto 0.8rem;
}

.mgmt-table .mgmt-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a2744;
    margin-bottom: 4px;
}

.mgmt-table .mgmt-pos {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
}

@media (max-width: 767px) {

    .mgmt-table thead,
    .mgmt-table tbody,
    .mgmt-table tr,
    .mgmt-table td {
        display: block !important;
        width: 100% !important;
    }

    .mgmt-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .mgmt-table td {
        width: auto !important;
    }
}

/* ===== Contact ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== mod-custom เต็มกรอบ ===== */
.mod-custom {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== ปุ่มภาษาใน marquee สีน้ำเงิน ===== */
.animate-marquee~.lang-wrap div.mod-languages ul li a,
#mobileMenu~div .lang-wrap div.mod-languages ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ปุ่มภาษาที่ไม่ active ใน marquee bar ===== */
div[style*="background:#1a2744"] .lang-wrap div.mod-languages ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

div[style*="background:#1a2744"] .lang-wrap div.mod-languages ul li.lang-active {
    background-color: #FFCE00 !important;
}

div[style*="background:#1a2744"] .lang-wrap div.mod-languages ul li.lang-active a {
    color: #1a2744 !important;
}

div[style*="background:#1a2744"] .lang-wrap div.mod-languages ul li:not(.lang-active) a {
    color: rgba(255, 255, 255, 0.85) !important;
}





/* ===== Sidebar Menu ===== */
#sideMenu nav ul {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

#sideMenu nav ul li {
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#sideMenu nav ul li:last-child {
    border-bottom: none !important;
}

#sideMenu nav ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a2744 !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    width: 100% !important;
}

#sideMenu nav ul li a::before {
    content: '›' !important;
    color: #FFCE00 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

#sideMenu nav ul li a:hover {
    background: #f3f4f6 !important;
}

/* ===== Hero Video module fix ===== */
#heroVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

/* Hero video ไม่ซ้อนใต้ header */
#heroVideo {
    top: 0 !important;
}

/* ===== News scroll dots: mobile only ===== */
@media (min-width: 768px) {
    #newsDots {
        display: none !important;
    }
}

/* ===== Flat Design Overrides ===== */

/* การ์ดข่าว: ตัด shadow และ rounded */
article.bg-white {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
}

article.bg-white:hover {
    box-shadow: none !important;
    transform: none !important;
    border-color: #1a2744 !important;
}

/* การ์ดกิจกรรม: ตัด rounded และ shadow */
section a.relative.block {
    border-radius: 0 !important;
    box-shadow: none !important;
}

section a.relative.block:hover {
    box-shadow: none !important;
}

/* กิจกรรม: gradient เปลี่ยนเป็น solid */
section a.relative.block .absolute {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%) !important;
}

/* ปุ่ม rounded-full → rectangle */
a.rounded-full,
button.rounded-full,
span.rounded-full {
    border-radius: 4px !important;
}

/* Hero video overlay: ตัด gradient */
.bg-black.bg-opacity-30 {
    background: rgba(0, 0, 0, 0.25) !important;
}

/* Footer: ตัด rounded */
footer img {
    border-radius: 0 !important;
}

/* Sidebar: ตัด rounded */
#sideMenu>div {
    border-radius: 0 !important;
}

#sideMenu nav ul li a {
    border-radius: 0 !important;
}

/* Sound button: ตัด rounded */
#soundToggle {
    border-radius: 4px !important;
}

/* Tag / badge: ตัด rounded */
.pbu-tag {
    border-radius: 0 !important;
}

/* Lang switcher: ตัด rounded */
div.mod-languages ul {
    border-radius: 0 !important;
}

div.mod-languages ul li {
    border-radius: 0 !important;
}

div.mod-languages ul li a {
    border-radius: 0 !important;
}

/* Header logo border-left */
header a>div {
    border-left: 1px solid rgba(26, 39, 68, 0.25) !important;
}

/* ปุ่ม mobile menu toggle */
#menuToggle {
    border-radius: 0 !important;
}

/* Image: ตัด rounded */
.prose img {
    border-radius: 0 !important;
}

article img {
    border-radius: 0 !important;
}

/* ===== Directlink: 2x2 on mobile ===== */
@media (max-width: 767px) {}

/* ===== Directlink images: contain ===== */

/* ===== Directlink: fix card size 650x180 ===== */

/* ===== Directlink grid ===== */
.directlink-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding: 8px 0 !important;
}

.directlink-grid a {
    display: block !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
}

.directlink-grid a img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@media (max-width: 767px) {
    .directlink-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: -8px 0 !important;
    }

    .directlink-grid a img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ===== Footer responsive ===== */
@media (max-width: 767px) {
    footer>div:first-child {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 480px) {
    footer>div:first-child {
        grid-template-columns: 1fr !important;
    }
}

.footer-col a {
    color: #d1d5db !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 2 !important;
    display: block !important;
    transition: color 0.2s !important;
}

.footer-col a:hover {
    color: #FFCE00 !important;
}

.footer-col h3 {
    color: #FFCE00 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-col p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #d1d5db !important;
}

/* ===== News filter grid: 2x2 on mobile ===== */
@media (max-width: 767px) {

    #mod_news_filter_grid,
    .mod-news-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #mod_news_filter_grid>*,
    .mod-news-filter-grid>* {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ===== All News Grid ===== */

/* Desktop = 4 คอลัมน์ */
#mod_news_filter_grid,
.mod-news-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

/* Tablet = 3 คอลัมน์ */
@media (max-width: 1024px) {

    #mod_news_filter_grid,
    .mod-news-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Mobile = 2 คอลัมน์ */
@media (max-width: 767px) {

    #mod_news_filter_grid,
    .mod-news-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #mod_news_filter_grid>*,
    .mod-news-filter-grid>* {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ===== Reveal Card Animation ===== */
.news-reveal-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .45s ease-out,
        transform .45s ease-out;
}

.news-reveal-card.show {
    opacity: 1;
    transform: translateY(0);
}

.news-reveal-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: #1a2744 !important;
}

/* ===== Activity Section ===== */

.activity-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease-out, transform .45s ease-out, border-color .25s ease;
}

.activity-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.activity-magazine-grid {
    display: grid;
    grid-template-columns: 1.25fr 1.75fr;
    gap: 20px;
}

.activity-feature-card {
    position: relative;
    display: block;
    min-height: 330px;
    overflow: hidden;
    background: #111827;
    border: 1px solid #e5e7eb;
}

.activity-side-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.activity-side-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.activity-side-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f3f4f6;
}

.activity-feature-card img,
.activity-side-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.activity-feature-card:hover img,
.activity-side-card:hover img {
    transform: scale(1.05);
}

.activity-feature-card:hover,
.activity-side-card:hover {
    border-color: #1a2744;
}

.activity-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #FFCE00;
    color: #1a2744;
    font-size: 12px;
    font-weight: 700;
    transition: .25s;
}

.activity-side-card:hover .activity-btn {
    background: #1a2744;
    color: #FFCE00;
}

.activity-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Mobile Activity: 2x2 ===== */
@media (max-width:767px) {

    .activity-magazine-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .activity-side-grid {
        display: contents !important;
    }

    .activity-feature-card {
        min-height: auto !important;
        background: #fff !important;
    }

    .activity-feature-card img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
        display: block !important;
    }

    .activity-feature-card>div {
        position: static !important;
        inset: auto !important;
        background: none !important;
        color: #111827 !important;
        padding: 10px !important;
    }

    .activity-feature-card>div:first-of-type {
        display: none !important;
    }

    .activity-feature-card h3,
    .activity-side-card h3 {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 0 8px 0 !important;
        color: #111827 !important;
    }

    .activity-side-card>div:last-child {
        min-height: auto !important;
        padding: 10px !important;
    }

    .activity-excerpt {
        display: none !important;
    }

    .activity-side-card span,
    .activity-side-card p {
        font-size: 11px !important;
    }

    .activity-feature-card {
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        min-height: auto !important;
    }

    .activity-feature-card img {
        width: 100% !important;
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ซ่อน overlay */
    .activity-feature-card>div:first-of-type {
        display: none !important;
    }

    /* ซ่อน badge ข่าวเด่น */
    .activity-feature-card span[style*="background:#FFCE00"] {
        display: none !important;
    }

    /* ทำกล่องข้อความเหมือนการ์ดอื่น */
    .activity-feature-card>div:last-child {
        position: static !important;
        background: none !important;
        color: #111827 !important;
        padding: 10px 12px !important;
    }

    .activity-feature-card h3 {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 0 10px 0 !important;
        color: #111827 !important;
    }

    .activity-feature-card .text-yellow-300 {
        color: #1a2744 !important;
    }

    .activity-feature-card>div:last-child>div {
        display: block !important;
        font-size: 11px !important;
    }

    .activity-feature-card>div:last-child>div span:first-child {
        display: block !important;
        color: #6b7280 !important;
        margin: 0 0 12px 0 !important;
        font-size: 11px !important;
    }

    .activity-feature-card>div:last-child>div span:last-child {
        display: inline-flex !important;
        align-items: center !important;
        padding: 7px 13px !important;
        background: #FFCE00 !important;
        color: #1a2744 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .activity-feature-card>div:last-child>div span:last-child::after {
        content: " →";
        font-size: 12px;
    }
}

/* ===== Scroll Fade Animation ===== */
.scroll-fade-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .45s ease-out, transform .45s ease-out;
}

.scroll-fade-card.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Directlink Reveal ===== */
.directlink-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .45s ease-out, transform .45s ease-out;
}

.directlink-item.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width:767px) {
    .directlink-item {
        transform: translateY(12px);
    }
}