/* ========================================================
   PCRU SATIT SCHOOL: ROYAL ELEGANCE & MODERN ASTRA SUITE
   Demonstration School of Phetchabun Rajabhat University
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --satit-primary: #51189b;
    --satit-primary-dark: #3b0764;
    --satit-primary-light: #7c3aed;
    --satit-primary-soft: #f5f3ff;
    --satit-green: #059669;
    --satit-green-dark: #047857;
    --satit-green-light: #10b981;
    --satit-green-soft: #ecfdf5;
    --satit-gold: #f59e0b;
    --satit-gold-dark: #d97706;
    --satit-gold-light: #fbbf24;
    --satit-gold-soft: #fef3c7;
    --satit-ink: #0f172a;
    --satit-slate: #334155;
    --satit-muted: #64748b;
    --satit-card-bg: #ffffff;
    --satit-border: #ede9fe;
    --satit-shadow-sm: 0 4px 14px rgba(81, 24, 155, 0.06);
    --satit-shadow: 0 10px 28px rgba(81, 24, 155, 0.08);
    --satit-shadow-lg: 0 18px 42px rgba(81, 24, 155, 0.14);
    --satit-radius: 18px;
    --satit-radius-sm: 12px;
    --satit-radius-pill: 999px;
}

/* Base Typography & Smooth Anti-Aliasing */
body, button, input, select, textarea,
.ast-container, .main-header-menu, h1, h2, h3, h4, h5, h6 {
    font-family: 'Prompt', 'Noto Sans Thai', 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #faf8fd !important;
    color: var(--satit-ink) !important;
}

/* ========================================================
   1. STICKY GLASSMORPHISM HEADER (LOGO ON LEFT, MENU ON RIGHT)
   ======================================================== */
.site-header,
.main-header-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    border-bottom: 1.5px solid rgba(233, 213, 255, 0.7) !important;
    box-shadow: 0 4px 20px rgba(81, 24, 155, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.site-header .ast-container,
.main-header-bar .ast-container {
    max-width: 1400px !important;
    padding: 0 20px !important;
}

/* Responsive Desktop vs Mobile Header Switch (Pure CSS) */
@media (min-width: 992px) {
    #ast-desktop-header {
        display: block !important;
    }
    #ast-mobile-header {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    #ast-desktop-header {
        display: none !important;
    }
    #ast-mobile-header {
        display: block !important;
    }
}

/* Force Flexbox on Astra Header Builder row to eliminate grid column squeeze */
.main-header-bar .ast-builder-grid-row,
.site-header .ast-builder-grid-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-wrap: normal !important;
}

/* Branding Column Base Styles */
.site-branding .site-logo-img {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.site-branding img,
.site-branding .custom-logo {
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.25s ease !important;
    border-radius: 8px !important;
}

.site-branding img:hover,
.site-branding .custom-logo:hover {
    transform: scale(1.03) !important;
}

.site-branding .site-title a:hover {
    color: #7c3aed !important;
}

/* Desktop Branding Protection (>= 992px): Absolute protection against shrinking / squishing */
@media (min-width: 992px) {
    .site-header-primary-section-left,
    .site-header-section-left {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        overflow-wrap: normal !important;
    }

    .site-branding {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .site-branding .ast-site-title-wrap {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
        min-width: max-content !important;
    }

    .site-branding .site-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    .site-branding .site-title a {
        font-family: 'Prompt', sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #3b0764 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        display: block !important;
        line-height: 1.25 !important;
        transition: color 0.2s ease !important;
    }

    .site-branding .site-description {
        font-family: 'Prompt', 'Sarabun', sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: #64748b !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        display: block !important;
    }

    .site-header-primary-section-right,
    .site-header-section-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* Hide redundant above-header if still present */
.ast-above-header-wrap,
.ast-above-header-bar {
    display: none !important;
}

/* ========================================================
   2. DESKTOP NAVIGATION PILL STYLE (>= 992px)
   ======================================================== */
@media (min-width: 992px) {
    .main-header-menu {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-header-menu > .menu-item {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-header-menu > .menu-item > a {
        font-family: 'Prompt', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        background: transparent !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }

    .main-header-menu > .menu-item > a:hover {
        color: var(--satit-primary) !important;
        background: var(--satit-primary-soft) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(81, 24, 155, 0.12) !important;
    }

    .main-header-menu > .menu-item.current-menu-item > a,
    .main-header-menu > .menu-item.current_page_item > a,
    .main-header-menu > .menu-item.current-menu-ancestor > a {
        color: var(--satit-primary) !important;
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 10px rgba(81, 24, 155, 0.15) !important;
    }

    /* Font Awesome 5 Icons on desktop navigation */
    .main-header-menu .menu-item > a::before {
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        font-size: 12.5px !important;
        color: var(--satit-primary) !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
        margin-right: 5px !important;
    }

    .main-header-menu .menu-item:hover > a::before {
        transform: scale(1.15) !important;
    }

    /* Top-level Menu Items */
    .main-header-menu #menu-item-2858 > a::before { content: '\f549' !important; color: #51189b !important; } /* เกี่ยวกับโรงเรียน */
    .main-header-menu #menu-item-2798 > a::before { content: '\f1da' !important; color: #d97706 !important; } /* ประวัติโรงเรียน */
    .main-header-menu #menu-item-2797 > a::before { content: '\f03e' !important; color: #0d9488 !important; } /* ภาพกิจกรรม */
    .main-header-menu #menu-item-2853 > a::before { content: '\f02d' !important; color: #e11d48 !important; } /* ประกาศ/ระเบียบ */
    .main-header-menu #menu-item-2851 > a::before { content: '\f15c' !important; color: #2563eb !important; } /* แบบฟอร์ม */
    .main-header-menu #menu-item-2801 > a::before { content: '\f2b9' !important; color: #7c3aed !important; } /* ติดต่อเรา */

    /* Sub-menu Items */
    .main-header-menu #menu-item-2799 > a::before { content: '\f0c0' !important; color: #0284c7 !important; } /* บุคลากร */
    .main-header-menu #menu-item-2795 > a::before { content: '\f500' !important; color: #059669 !important; } /* คณะกรรมการ */
    .main-header-menu #menu-item-2802 > a::before { content: '\f51c' !important; color: #ea580c !important; } /* อาจารย์ผู้สอน */
    .main-header-menu #menu-item-2794 > a::before { content: '\f559' !important; color: #b45309 !important; } /* ครูประจำโรงเรียน */
    .main-header-menu #menu-item-2793 > a::before { content: '\f4fe' !important; color: #4f46e5 !important; } /* เจ้าหน้าที่ */
    .main-header-menu #menu-item-2862 > a::before { content: '\f2c2' !important; color: #7c3aed !important; } /* เลขประจำตัว */
    .main-header-menu #menu-item-2800 > a::before { content: '\f0e8' !important; color: #7c3aed !important; } /* โครงสร้าง */
    .main-header-menu #menu-item-2792 > a::before { content: '\f53f' !important; color: #d97706 !important; } /* ปรัชญา */

    /* Top-level Dropdown Chevron Arrow on Desktop */
    .main-header-menu > .menu-item-has-children > a .dropdown-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 4px !important;
        color: #64748b !important;
        transition: transform 0.25s ease, color 0.2s ease !important;
    }

    .main-header-menu > .menu-item-has-children:hover > a .dropdown-menu-toggle {
        transform: rotate(180deg) !important;
        color: var(--satit-primary) !important;
    }

    /* Prevent duplicate icons: Hide stray direct .ast-icon in menu links */
    .main-header-menu a > .ast-icon,
    .main-header-menu .menu-link > .ast-icon {
        display: none !important;
    }

    .main-header-menu .dropdown-menu-toggle .ast-icon {
        display: inline-flex !important;
    }

    /* Sub-menu Floating Card (Comfortable Card: 240px - 320px) */
    .main-header-menu ul.sub-menu,
    .ast-desktop .main-header-menu ul.sub-menu,
    .ast-desktop-header .main-header-menu ul.sub-menu,
    .ast-desktop-header .main-header-menu .sub-menu {
        background: #ffffff !important;
        border-radius: 16px !important;
        border: 1.5px solid var(--satit-border) !important;
        box-shadow: 0 20px 48px -8px rgba(81, 24, 155, 0.18), 0 0 0 1px rgba(81, 24, 155, 0.04) !important;
        padding: 8px !important;
        margin: 6px 0 0 0 !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: 340px !important;
        list-style: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 999999 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(8px) !important;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease !important;
        transition-delay: 0.18s !important;
        box-sizing: border-box !important;
    }

    /* Invisible Top Hover Bridge */
    .main-header-menu ul.sub-menu::after {
        content: '' !important;
        position: absolute !important;
        top: -16px !important;
        left: 0 !important;
        right: 0 !important;
        height: 16px !important;
        background: transparent !important;
        display: block !important;
        pointer-events: auto !important;
    }

    /* Arrow Pointer on Top */
    .main-header-menu ul.sub-menu::before {
        content: '' !important;
        position: absolute !important;
        top: -6px !important;
        left: 20px !important;
        width: 12px !important;
        height: 12px !important;
        background: #ffffff !important;
        border-top: 1.5px solid var(--satit-border) !important;
        border-left: 1.5px solid var(--satit-border) !important;
        transform: rotate(45deg) !important;
        z-index: 1 !important;
    }

    .main-header-menu > .menu-item:hover > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        transition-delay: 0s !important;
    }

    .main-header-menu ul.sub-menu li {
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        background: transparent !important;
        list-style: none !important;
        width: 100% !important;
    }

    .main-header-menu ul.sub-menu li a {
        font-family: 'Prompt', sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #334155 !important;
        background: #ffffff !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        line-height: 1.4 !important;
        border: 1px solid transparent !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .main-header-menu ul.sub-menu li a:hover {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
        color: var(--satit-primary) !important;
        border-color: #ddd6fe !important;
        transform: translateX(3px) !important;
        font-weight: 600 !important;
    }

    /* Medium Desktop Scaling (992px - 1240px) to prevent wrapping */
    @media (max-width: 1240px) {
        .main-header-menu {
            gap: 2px !important;
        }
        .main-header-menu > .menu-item > a {
            font-size: 11.5px !important;
            padding: 6px 8px !important;
            gap: 4px !important;
        }
        .main-header-menu .menu-item > a::before {
            font-size: 11px !important;
            margin-right: 4px !important;
        }
        .site-branding {
            gap: 8px !important;
        }
        .site-branding img,
        .site-branding .custom-logo {
            max-height: 44px !important;
        }
        .site-branding .site-title a {
            font-size: 14px !important;
        }
        .site-branding .site-description {
            font-size: 10px !important;
        }
    }
}

/* ========================================================
   3. MOBILE NAVIGATION (<= 991px)
   ======================================================== */
@media (max-width: 991px) {
    .menu-toggle,
    .ast-mobile-menu-trigger-minimal,
    .ast-button-wrap .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
        border: 1.5px solid #ddd6fe !important;
        color: var(--satit-primary) !important;
        box-shadow: 0 4px 12px rgba(81, 24, 155, 0.14) !important;
        transition: all 0.25s ease !important;
        cursor: pointer !important;
    }

    .menu-toggle:hover, .menu-toggle:active {
        background: var(--satit-primary) !important;
        color: #ffffff !important;
        border-color: var(--satit-primary) !important;
    }

    .menu-toggle svg {
        fill: currentColor !important;
        width: 22px !important;
        height: 22px !important;
    }

    .main-header-menu {
        background: #ffffff !important;
        padding: 14px !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 30px rgba(81, 24, 155, 0.1) !important;
        border: 1.5px solid var(--satit-border) !important;
    }

    .main-header-menu .menu-item a {
        padding: 10px 14px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
    }

    .main-header-menu .menu-item a:hover {
        background: #f5f3ff !important;
        color: var(--satit-primary) !important;
    }
}

/* ========================================================
   4. FRONT PAGE HERO BANNER (Container 7df2ac2 / Image f78dbcd)
   ======================================================== */
.elementor-element-7df2ac2 {
    max-width: 1200px !important;
    margin: 18px auto 24px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.elementor-element-f78dbcd {
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 40px rgba(81, 24, 155, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    border: 2px solid #ffffff !important;
    position: relative !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.elementor-element-f78dbcd:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 50px rgba(81, 24, 155, 0.25) !important;
}

.elementor-element-f78dbcd img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 22px !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.elementor-element-f78dbcd:hover img {
    transform: scale(1.02) !important;
}

/* Elegant Royal Gold & Purple Bottom Border Ribbon */
.elementor-element-f78dbcd::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #51189b 0%, #059669 35%, #f59e0b 70%, #7c3aed 100%) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
    z-index: 10 !important;
    display: block !important;
    pointer-events: none !important;
}

/* ========================================================
   5. SECTION HEADING (Container 1415826 / Heading 917c20e)
   ======================================================== */
.elementor-element-1415826 {
    max-width: 1200px !important;
    margin: 20px auto 14px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.elementor-element-917c20e h3,
.elementor-element-917c20e .elementor-heading-title {
    font-family: 'Prompt', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--satit-primary) !important;
    text-align: center !important;
    letter-spacing: -0.3px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
}

.elementor-element-917c20e .elementor-heading-title::before {
    content: '\f19d' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #51189b 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(81, 24, 155, 0.25), inset 0 0 0 1.5px rgba(251, 191, 36, 0.6) !important;
}

.elementor-element-917c20e .elementor-heading-title::after {
    content: 'School Activities' !important;
    font-family: 'Prompt', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6d28d9 !important;
    background: #ede9fe !important;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    border: 1px solid #ddd6fe !important;
}

/* ========================================================
   6. ACTIVITIES POST GRID (Container dc5ce2a / Grid 677fa06)
   ======================================================== */
.elementor-element-dc5ce2a {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto 36px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.elementor-element-677fa06 {
    width: 100% !important;
    margin: 0 !important;
}

/* The Post Grid Card Overhaul - 4 Columns on Desktop */
.elementor-element-677fa06 .rt-row,
.tpg-el-main-wrapper .rt-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
}

.elementor-element-677fa06 .rt-col-md-3,
.elementor-element-677fa06 .rt-col-md-4,
.elementor-element-677fa06 .rt-col-sm-6,
.elementor-element-677fa06 .rt-col-xs-12,
.elementor-element-677fa06 .rt-grid-item,
.tpg-el-main-wrapper .rt-col-md-3,
.tpg-el-main-wrapper .rt-col-md-4,
.tpg-el-main-wrapper .rt-col-sm-6,
.tpg-el-main-wrapper .rt-col-xs-12,
.tpg-el-main-wrapper .rt-grid-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

.elementor-element-677fa06 .rt-holder,
.tpg-el-main-wrapper .rt-holder {
    background: #ffffff !important;
    border: 1.5px solid var(--satit-border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(81, 24, 155, 0.06) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
}

.elementor-element-677fa06 .rt-holder:hover,
.tpg-el-main-wrapper .rt-holder:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 44px rgba(81, 24, 155, 0.16) !important;
    border-color: #c4b5fd !important;
}

.elementor-element-677fa06 .rt-img-holder,
.tpg-el-main-wrapper .rt-img-holder {
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
}

.elementor-element-677fa06 .rt-img-holder img,
.tpg-el-main-wrapper .rt-img-holder img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform 0.45s ease !important;
    display: block !important;
}

.elementor-element-677fa06 .rt-holder:hover .rt-img-holder img {
    transform: scale(1.08) !important;
}

.elementor-element-677fa06 .rt-detail {
    padding: 16px 18px 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.elementor-element-677fa06 .entry-title,
.elementor-element-677fa06 .entry-title a {
    font-family: 'Prompt', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: var(--satit-ink) !important;
    margin: 0 0 8px 0 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.elementor-element-677fa06 .rt-holder:hover .entry-title a {
    color: var(--satit-primary) !important;
}

/* Post Meta Date / Author Badge */
.elementor-element-677fa06 .post-meta-user,
.elementor-element-677fa06 .post-meta-tags,
.elementor-element-677fa06 .date-meta {
    font-family: 'Prompt', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.elementor-element-677fa06 .date-meta span,
.elementor-element-677fa06 .post-meta-user span {
    background: #f5f3ff !important;
    color: var(--satit-primary) !important;
    padding: 2px 10px !important;
    border-radius: 999px !important;
    border: 1px solid #ddd6fe !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Pagination / Load More Button */
.elementor-element-677fa06 .tpg-load-more-btn,
.elementor-element-677fa06 .tpg-pagination-area a {
    background: linear-gradient(135deg, #51189b 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: 'Prompt', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 26px !important;
    box-shadow: 0 4px 16px rgba(81, 24, 155, 0.25) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.elementor-element-677fa06 .tpg-load-more-btn:hover,
.elementor-element-677fa06 .tpg-pagination-area a:hover {
    background: linear-gradient(135deg, #3b0764 0%, #6d28d9 100%) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 22px rgba(81, 24, 155, 0.4) !important;
}

@media (max-width: 991px) {
    .elementor-element-677fa06 .rt-row,
    .tpg-el-main-wrapper .rt-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 600px) {
    .elementor-element-677fa06 .rt-row,
    .tpg-el-main-wrapper .rt-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .elementor-element-677fa06 .rt-img-holder,
    .elementor-element-677fa06 .rt-img-holder img,
    .tpg-el-main-wrapper .rt-img-holder,
    .tpg-el-main-wrapper .rt-img-holder img {
        height: 200px !important;
    }
}

/* ========================================================
   7. INNER PAGES, TABLES, DOWNLOAD MANAGER, CARDS
   ======================================================== */
.entry-content {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #334155 !important;
}

.entry-content h1, .entry-content h2, .entry-content h3 {
    color: var(--satit-primary) !important;
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

/* Modern Tables */
table, .wp-block-table table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1.5px solid var(--satit-border) !important;
    box-shadow: 0 4px 14px rgba(81, 24, 155, 0.04) !important;
    margin-bottom: 24px !important;
}

table th, .wp-block-table th {
    background: linear-gradient(135deg, #51189b 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border: none !important;
}

table td, .wp-block-table td {
    padding: 10px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
}

table tr:nth-child(even) td {
    background: #faf8fd !important;
}

/* Download Manager Packages */
.w3eden .package-title {
    font-family: 'Prompt', sans-serif !important;
    font-weight: 600 !important;
    color: var(--satit-primary) !important;
}

.w3eden .btn-primary, .w3eden .btn-success {
    background: linear-gradient(135deg, #51189b 0%, #7c3aed 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    box-shadow: 0 2px 8px rgba(81, 24, 155, 0.2) !important;
}

/* ========================================================
   8. PCRU MOBILE BOTTOM NAVIGATION BAR
   ======================================================== */
@media (max-width: 991px) {
    .pcru-mobile-bottom-nav {
        position: fixed !important;
        bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        height: 48px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(16px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, 0.9) !important;
        border-radius: 999px !important;
        box-shadow: 0 6px 20px -2px rgba(81, 24, 155, 0.16), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        z-index: 999999 !important;
        padding: 2px 6px !important;
    }

    body.has-pcru-bottom-nav {
        padding-bottom: 60px !important;
    }

    .pcru-mobile-bottom-nav a.pcru-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        flex: 1 !important;
        height: 100% !important;
        color: #64748b !important;
        text-decoration: none !important;
        transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        position: relative !important;
        border-radius: 999px !important;
        padding: 2px 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .pcru-mobile-bottom-nav .pcru-icon-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 25px !important;
        height: 25px !important;
        border-radius: 8px !important;
        background: transparent !important;
        transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        position: relative !important;
    }

    .pcru-mobile-bottom-nav .pcru-icon-wrap svg {
        stroke: #64748b !important;
        width: 15px !important;
        height: 15px !important;
        transition: all 0.2s ease !important;
    }

    .pcru-mobile-bottom-nav span.pcru-nav-label {
        font-size: 9.5px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        letter-spacing: -0.2px !important;
        color: #64748b !important;
        transition: all 0.2s ease !important;
    }

    /* Micro tap bounce */
    .pcru-mobile-bottom-nav a.pcru-nav-item:active .pcru-icon-wrap {
        transform: scale(0.88) !important;
    }

    /* Active Base */
    .pcru-mobile-bottom-nav a.pcru-nav-item.active .pcru-icon-wrap {
        transform: translateY(-1px) scale(1.05) !important;
    }

    .pcru-mobile-bottom-nav a.pcru-nav-item.active .pcru-icon-wrap svg {
        stroke: #ffffff !important;
    }

    .pcru-mobile-bottom-nav a.pcru-nav-item.active span.pcru-nav-label {
        font-weight: 700 !important;
    }

    /* 1. หน้าแรก (Purple PCRU Gradient) */
    .pcru-mobile-bottom-nav a.nav-home.active .pcru-icon-wrap {
        background: linear-gradient(135deg, #51189b 0%, #7c3aed 100%) !important;
        box-shadow: 0 3px 10px rgba(81, 24, 155, 0.38) !important;
    }
    .pcru-mobile-bottom-nav a.nav-home.active span.pcru-nav-label {
        color: #51189b !important;
    }

    /* 2. ภาพกิจกรรม (Golden Amber Vibrant Gradient) */
    .pcru-mobile-bottom-nav a.nav-activities.active .pcru-icon-wrap {
        background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
        box-shadow: 0 3px 10px rgba(234, 88, 12, 0.38) !important;
    }
    .pcru-mobile-bottom-nav a.nav-activities.active span.pcru-nav-label {
        color: #ea580c !important;
    }

    /* 3. ติดต่อเรา (Emerald University Green Gradient) */
    .pcru-mobile-bottom-nav a.nav-contact.active .pcru-icon-wrap {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
        box-shadow: 0 3px 10px rgba(5, 150, 105, 0.38) !important;
    }
    .pcru-mobile-bottom-nav a.nav-contact.active span.pcru-nav-label {
        color: #059669 !important;
    }

    /* 4. เมนูหลัก (Royal Indigo / Blue Gradient) */
    .pcru-mobile-bottom-nav a.nav-menu.active .pcru-icon-wrap {
        background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.38) !important;
    }
    .pcru-mobile-bottom-nav a.nav-menu.active span.pcru-nav-label {
        color: #2563eb !important;
    }
}

/* ========================================================
   GLOBAL DEFAULT: HIDE MOBILE DRAWER & BOTTOM BAR ON DESKTOP
   ======================================================== */
.pcru-satit-mobile-drawer,
.pcru-mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (min-width: 992px) {
    .pcru-satit-mobile-drawer,
    .pcru-mobile-bottom-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* ========================================================
   DESKTOP MULTI-LEVEL DROPDOWN FLYOUT (>= 992px)
   ======================================================== */
@media (min-width: 992px) {
    .main-header-menu > .menu-item > ul.sub-menu {
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
    }

    .main-header-menu > .menu-item:hover > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        transition-delay: 0s !important;
    }

    /* Level 3+ Sub-menu (Flyout to the right of parent sub-menu item) */
    .main-header-menu ul.sub-menu ul.sub-menu {
        top: -8px !important;
        left: 100% !important;
        right: auto !important;
        margin: 0 0 0 6px !important;
        min-width: 290px !important;
        max-width: 380px !important;
        border-radius: 16px !important;
        border: 1px solid var(--satit-border, #ede9fe) !important;
        box-shadow: 0 20px 48px -6px rgba(81, 24, 155, 0.22), 0 0 0 1px rgba(81, 24, 155, 0.06) !important;
        transform: translateX(-8px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
        transition-delay: 0.15s !important;
    }

    .main-header-menu ul.sub-menu li:hover > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        transition-delay: 0s !important;
    }

    /* Hover Bridge between Level 2 and Level 3 */
    .main-header-menu ul.sub-menu ul.sub-menu::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -12px !important;
        width: 12px !important;
        height: 100% !important;
        background: transparent !important;
        display: block !important;
        pointer-events: auto !important;
    }

    /* Submenu Item with children: Chevron indicator */
    .main-header-menu ul.sub-menu li.menu-item-has-children {
        position: relative !important;
    }

    .main-header-menu ul.sub-menu li.menu-item-has-children > a {
        padding-right: 36px !important;
    }

    .main-header-menu ul.sub-menu li.menu-item-has-children > a .dropdown-menu-toggle {
        display: inline-flex !important;
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) rotate(-90deg) !important;
        color: #94a3b8 !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
        margin: 0 !important;
    }

    .main-header-menu ul.sub-menu li.menu-item-has-children:hover > a .dropdown-menu-toggle {
        transform: translateY(-50%) rotate(-90deg) translateX(3px) !important;
        color: var(--satit-primary, #51189b) !important;
    }

    /* Hide redundant Astra arrow icons on desktop */
    .main-header-menu a > .ast-icon,
    .main-header-menu .menu-link > .ast-icon {
        display: none !important;
    }
}

/* ========================================================
   FULL MOBILE FIRST OFF-CANVAS DRAWER (100vw x 100vh)
   ======================================================== */
.pcru-satit-mobile-drawer {
    display: none;
}

@media (max-width: 991px) {
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body.pcru-drawer-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    .pcru-mobile-bottom-nav {
        height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* Hide redundant default mobile menu */
    .main-header-bar-navigation {
        display: none !important;
    }

    .pcru-satit-mobile-drawer {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 99999999 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition: visibility 0.3s ease !important;
    }

    .pcru-satit-mobile-drawer.pcru-drawer-active {
        pointer-events: auto !important;
        visibility: visible !important;
    }

    .pcru-drawer-backdrop {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .pcru-satit-mobile-drawer.pcru-drawer-active .pcru-drawer-backdrop {
        opacity: 1 !important;
    }

    .pcru-drawer-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        background: #ffffff !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow: hidden !important;
        z-index: 100000000 !important;
    }

    .pcru-satit-mobile-drawer.pcru-drawer-active .pcru-drawer-panel {
        transform: translateX(0) !important;
    }

    .pcru-drawer-header {
        padding: 16px 20px !important;
        background: linear-gradient(135deg, #3b0764 0%, #51189b 100%) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 2px solid #f59e0b !important;
    }

    .pcru-drawer-brand {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .pcru-drawer-badge {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        color: #fbbf24 !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .pcru-drawer-titles strong {
        display: block !important;
        font-family: 'Prompt', sans-serif !important;
        font-size: 16px !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
    }

    .pcru-drawer-titles small {
        display: block !important;
        font-family: 'Prompt', sans-serif !important;
        font-size: 11px !important;
        color: #e9d5ff !important;
        font-weight: 400 !important;
    }

    .pcru-drawer-close {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: none !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background 0.2s ease, transform 0.2s ease !important;
    }

    .pcru-drawer-close:active {
        transform: scale(0.92) !important;
        background: rgba(255, 255, 255, 0.25) !important;
    }

    .pcru-drawer-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 14px 40px 14px !important;
    }

    .pcru-mobile-drawer-menu {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .pcru-mobile-drawer-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pcru-mobile-drawer-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        border: 1.5px solid #ede9fe !important;
        font-family: 'Prompt', sans-serif !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .pcru-mobile-drawer-menu > li > a:active {
        background: #f5f3ff !important;
        border-color: #c084fc !important;
        transform: scale(0.98) !important;
    }

    .pcru-mobile-drawer-menu > li:first-child > a {
        background: linear-gradient(135deg, #51189b 0%, #7c3aed 100%) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(81, 24, 155, 0.3) !important;
    }

    .pcru-drawer-contact-card {
        margin-top: 24px !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%) !important;
        border: 1px solid #ddd6fe !important;
        font-family: 'Prompt', sans-serif !important;
        font-size: 12.5px !important;
        color: #475569 !important;
        line-height: 1.5 !important;
    }

    .pcru-drawer-contact-card .card-head {
        font-weight: 700 !important;
        color: #3b0764 !important;
        font-size: 13.5px !important;
        margin-bottom: 6px !important;
    }

    .pcru-drawer-contact-card p {
        margin: 3px 0 !important;
    }

    .pcru-drawer-contact-card a {
        color: #7c3aed !important;
        font-weight: 600 !important;
    }
}

/* ========================================================
   BULLETPROOF MOBILE SUBMENU DISPLAY SUITE (< 992px)
   ======================================================== */
@media (max-width: 991px) {
    .pcru-mobile-drawer-menu ul.sub-menu,
    .main-header-menu ul.sub-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: static !important;
        box-shadow: none !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        transition: opacity 0.25s ease !important;
    }

    .pcru-mobile-drawer-menu .pcru-sub-open > ul.sub-menu,
    .pcru-mobile-drawer-menu li.pcru-sub-open > ul.sub-menu,
    .main-header-menu .pcru-sub-open > ul.sub-menu,
    .main-header-menu li.pcru-sub-open > ul.sub-menu,
    .main-header-menu .ast-submenu-expanded > ul.sub-menu,
    .main-header-menu li.ast-submenu-expanded > ul.sub-menu {
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: 2500px !important;
        overflow: visible !important;
        pointer-events: auto !important;
        position: static !important;
        padding: 8px 6px 8px 14px !important;
        margin: 6px 0 8px 8px !important;
        border-left: 3.5px solid #c084fc !important;
        background: #f8fafc !important;
        border-radius: 10px !important;
        gap: 6px !important;
    }

    .pcru-mobile-drawer-menu ul.sub-menu li.pcru-sub-open > ul.sub-menu,
    .main-header-menu ul.sub-menu li.pcru-sub-open > ul.sub-menu,
    .main-header-menu ul.sub-menu li.ast-submenu-expanded > ul.sub-menu {
        border-left-color: #f59e0b !important;
        background: #ffffff !important;
        padding-left: 12px !important;
    }

    /* Parent item with children: Keep link and arrow on SAME row without wrapping */
    .pcru-mobile-drawer-menu li.menu-item-has-children,
    #pcru-cloned-mobile-menu li.menu-item-has-children,
    .pcru-mobile-drawer-menu ul.sub-menu li.menu-item-has-children,
    #pcru-cloned-mobile-menu ul.sub-menu li.menu-item-has-children {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pcru-mobile-drawer-menu li.menu-item-has-children > a,
    #pcru-cloned-mobile-menu li.menu-item-has-children > a,
    .pcru-mobile-drawer-menu ul.sub-menu li.menu-item-has-children > a,
    #pcru-cloned-mobile-menu ul.sub-menu li.menu-item-has-children > a {
        flex: 1 1 calc(100% - 46px) !important;
        width: calc(100% - 46px) !important;
        max-width: calc(100% - 46px) !important;
        min-width: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .pcru-accordion-toggle-btn,
    .pcru-mobile-drawer-menu .pcru-accordion-toggle-btn,
    #pcru-cloned-mobile-menu .pcru-accordion-toggle-btn {
        flex: 0 0 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        min-height: 48px !important;
        height: auto !important;
        box-sizing: border-box !important;
        background: #f1f5f9 !important;
        border: 1.5px solid #ede9fe !important;
        border-left: none !important;
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #64748b !important;
        transition: all 0.22s ease !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pcru-accordion-toggle-btn svg {
        transition: transform 0.25s ease !important;
    }

    .pcru-sub-open > .pcru-accordion-toggle-btn {
        background: #f5f3ff !important;
        color: #51189b !important;
    }

    .pcru-sub-open > .pcru-accordion-toggle-btn svg {
        transform: rotate(180deg) !important;
    }

    .pcru-mobile-drawer-menu li.menu-item-has-children > ul.sub-menu {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .pcru-mobile-drawer-menu ul.sub-menu li a {
        padding: 10px 14px !important;
        font-size: 13.5px !important;
        color: #334155 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        display: block !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
    }

    .pcru-mobile-drawer-menu ul.sub-menu li a:active {
        background: #ede9fe !important;
        color: #51189b !important;
    }
}

/* ========================================================
   TOTAL BULLET SUPPRESSION FOR MOBILE DRAWER & ALL MENUS
   ======================================================== */
.pcru-satit-mobile-drawer,
.pcru-satit-mobile-drawer nav,
.pcru-satit-mobile-drawer ul,
.pcru-satit-mobile-drawer ol,
.pcru-satit-mobile-drawer li,
.pcru-drawer-nav,
.pcru-drawer-nav ul,
.pcru-drawer-nav li,
.pcru-mobile-drawer-menu,
.pcru-mobile-drawer-menu li,
.pcru-mobile-drawer-menu ul,
.pcru-mobile-drawer-menu ul.sub-menu,
.pcru-mobile-drawer-menu ul.sub-menu li,
#pcru-cloned-mobile-menu,
#pcru-cloned-mobile-menu li,
#pcru-cloned-mobile-menu ul,
#pcru-cloned-mobile-menu ul li,
.main-header-menu,
.main-header-menu ul,
.main-header-menu li,
.main-header-menu .sub-menu,
.main-header-menu .sub-menu li,
#ast-hf-mobile-menu,
#ast-hf-mobile-menu ul,
#ast-hf-mobile-menu li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.pcru-satit-mobile-drawer li::marker,
.pcru-satit-mobile-drawer ul::marker,
.pcru-drawer-nav li::marker,
.pcru-mobile-drawer-menu li::marker,
.pcru-mobile-drawer-menu ul.sub-menu li::marker,
#pcru-cloned-mobile-menu li::marker,
#pcru-cloned-mobile-menu ul li::marker,
.ast-mobile-header-content li::marker,
#ast-hf-mobile-menu li::marker {
    display: none !important;
    content: "" !important;
    font-size: 0 !important;
    color: transparent !important;
}

.pcru-satit-mobile-drawer li::before,
.pcru-satit-mobile-drawer li::after,
.pcru-drawer-nav li::before,
.pcru-mobile-drawer-menu li::before,
.pcru-mobile-drawer-menu li::after,
.pcru-mobile-drawer-menu ul.sub-menu li::before,
.pcru-mobile-drawer-menu ul.sub-menu li::after,
#pcru-cloned-mobile-menu li::before,
#pcru-cloned-mobile-menu ul li::before,
#pcru-cloned-mobile-menu a::before,
.ast-mobile-header-content li::before,
#ast-hf-mobile-menu li::before,
.main-header-menu .sub-menu li::before,
.main-header-menu .sub-menu li::after {
    display: none !important;
    content: none !important;
}

/* Remove Astra inline SVG arrow icons inside menu links on mobile & drawer */
.pcru-mobile-drawer-menu .ast-icon,
.pcru-mobile-drawer-menu .ast-arrow-svg,
.pcru-mobile-drawer-menu .icon-arrow,
.pcru-mobile-drawer-menu .dropdown-menu-toggle,
.pcru-mobile-drawer-menu .ast-header-navigation-arrow,
#pcru-cloned-mobile-menu .ast-icon,
#pcru-cloned-mobile-menu .ast-arrow-svg,
#pcru-cloned-mobile-menu .icon-arrow,
#pcru-cloned-mobile-menu .dropdown-menu-toggle,
#pcru-cloned-mobile-menu .ast-header-navigation-arrow,
.pcru-satit-mobile-drawer .ast-icon,
.pcru-satit-mobile-drawer .ast-arrow-svg,
.pcru-satit-mobile-drawer .icon-arrow,
.pcru-satit-mobile-drawer .dropdown-menu-toggle,
.pcru-satit-mobile-drawer .ast-header-navigation-arrow,
.main-header-menu .ast-icon,
.main-header-menu .ast-arrow-svg,
.main-header-menu .icon-arrow {
    display: none !important;
}


/* ========================================================
   TOP MOBILE HEADER HAMBURGER TOGGLE FIX
   ======================================================== */
@media (max-width: 991px) {
    /* Style the main hamburger toggle button */
    .site-header .main-header-menu-toggle,
    .site-header .menu-toggle,
    .ast-mobile-menu-trigger-fill,
    .ast-mobile-menu-trigger-minimal,
    .ast-button-wrap .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
        border: 1.5px solid #ddd6fe !important;
        color: #51189b !important;
        box-shadow: 0 4px 12px rgba(81, 24, 155, 0.14) !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }

    .site-header .main-header-menu-toggle:hover,
    .site-header .main-header-menu-toggle:active {
        background: #51189b !important;
        color: #ffffff !important;
        border-color: #51189b !important;
    }

    /* Target the SVG icon wrapper */
    .mobile-menu-toggle-icon,
    .ahfb-svg-iconset {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Force hamburger bars SVG to display crisply */
    .menu-toggle svg.ast-menu-svg,
    .main-header-menu-toggle svg.ast-menu-svg,
    .mobile-menu-toggle-icon svg.ast-menu-svg,
    .menu-toggle .ast-mobile-svg.ast-menu-svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        fill: currentColor !important;
        color: inherit !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide the close X svg by default on the header button */
    .menu-toggle svg.ast-close-svg,
    .main-header-menu-toggle svg.ast-close-svg,
    .mobile-menu-toggle-icon svg.ast-close-svg {
        display: none !important;
    }

    /* When drawer is open, show X icon if toggled */
    body.pcru-drawer-open .menu-toggle svg.ast-menu-svg {
        display: none !important;
    }

    body.pcru-drawer-open .menu-toggle svg.ast-close-svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        fill: currentColor !important;
    }
}


/* ========================================================
   DRAWER CLOSE BUTTON FIX (2026-10-12)
   Reason: Astra global button padding (12px 24px) squashed the X svg to 0px.
   ======================================================== */
@media (max-width: 991px) {
    .pcru-drawer-header .pcru-drawer-close,
    button#pcru-drawer-close-btn {
        width: auto !important;
        min-width: 44px !important;
        height: 40px !important;
        padding: 0 14px 0 10px !important;
        margin: 0 !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }
    button#pcru-drawer-close-btn svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        stroke: #ffffff !important;
        fill: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .pcru-drawer-close-label {
        font-family: 'Prompt', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }
    button#pcru-drawer-close-btn:hover,
    button#pcru-drawer-close-btn:active {
        background: #f59e0b !important;
        border-color: #f59e0b !important;
    }
}


/* ========================================================
   FULL MOBILE FIRST SUITE (< 992px & < 768px)
   Engineered for PCRU Satit: Zero horizontal overflow,
   ergonomic touch targets, responsive typography, and cards.
   ======================================================== */

@media (max-width: 991px) {
    /* 1. Global Viewport & Zero-Overflow Safety */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: manipulation;
    }

    #page, .site, .site-content, .ast-container, #content, .entry-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-widget-wrap {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    img, svg, iframe, video {
        max-width: 100% !important;
        height: auto;
    }

    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

@media (max-width: 991.98px) {
    /* 2. Mobile & Tablet Header & Branding Ergonomics */
    .site-header .ast-builder-grid-row,
    .main-header-bar .ast-builder-grid-row {
        padding: 6px 12px !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .site-header-primary-section-left,
    .site-header-section-left {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 56px) !important;
    }

    .site-branding {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .site-branding .site-logo-img {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .site-branding .site-logo-img img,
    .site-branding .custom-logo {
        max-height: 42px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .site-branding .ast-site-title-wrap {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .site-branding .site-title {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .site-branding .site-title a {
        font-family: 'Prompt', 'Noto Sans Thai', sans-serif !important;
        font-size: clamp(12.5px, 3.6vw, 15px) !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        line-height: 1.25 !important;
        color: var(--satit-primary, #51189b) !important;
    }

    .site-branding .site-description {
        font-family: 'Prompt', 'Noto Sans Thai', sans-serif !important;
        font-size: clamp(9px, 2.4vw, 10.5px) !important;
        line-height: 1.2 !important;
        color: #64748b !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .site-header-primary-section-right,
    .site-header-section-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 48px !important;
        min-width: 48px !important;
        width: 48px !important;
        margin-left: auto !important;
    }

    @media (max-width: 480px) {
        .site-header .ast-builder-grid-row,
        .main-header-bar .ast-builder-grid-row {
            padding: 4px 8px !important;
        }
        .site-branding {
            gap: 6px !important;
        }
        .site-branding .site-logo-img img,
        .site-branding .custom-logo {
            max-height: 36px !important;
        }
        .site-branding .site-title a {
            font-size: 13px !important;
        }
        .site-branding .site-description {
            font-size: 8.5px !important;
        }
        .site-header-primary-section-right,
        .site-header-section-right {
            flex: 0 0 40px !important;
            width: 40px !important;
            min-width: 40px !important;
        }
        .site-header .main-header-menu-toggle,
        .site-header .menu-toggle,
        .ast-mobile-menu-trigger-fill,
        .ast-mobile-menu-trigger-minimal,
        .ast-button-wrap .menu-toggle {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px !important;
            min-height: 38px !important;
            border-radius: 10px !important;
        }
    }

/* Complianz GDPR Banner Mobile Ergonomics */
#cmplz-cookiebanner-container,
.cmplz-cookiebanner {
    max-width: calc(100vw - 16px) !important;
    width: auto !important;
    box-sizing: border-box !important;
}
.cmplz-cookiebanner .cmplz-header,
.cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner .cmplz-buttons,
.cmplz-cookiebanner .cmplz-links,
.cmplz-cookiebanner .cmplz-divider {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}

    /* 3. Front Page Hero Banner */
    .elementor-element-7df2ac2 {
        margin: 8px auto 14px auto !important;
        padding: 0 10px !important;
    }

    .elementor-element-f78dbcd {
        border-radius: 16px !important;
        border-width: 1.5px !important;
        box-shadow: 0 8px 24px rgba(81, 24, 155, 0.12) !important;
    }

    .elementor-element-f78dbcd img {
        border-radius: 14px !important;
    }

    .elementor-element-f78dbcd::after {
        height: 4px !important;
    }

    /* 4. Section Headings */
    .elementor-element-1415826 {
        margin: 12px auto 10px auto !important;
        padding: 0 12px !important;
    }

    .elementor-element-917c20e h3,
    .elementor-element-917c20e .elementor-heading-title {
        font-size: 18px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .elementor-element-917c20e .elementor-heading-title::before {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    .elementor-element-917c20e .elementor-heading-title::after {
        font-size: 11px !important;
        padding: 2px 10px !important;
        margin-left: 2px !important;
    }

    /* 5. Universal Post Grids (Homepage & Inner Pages) */
    .elementor-element-dc5ce2a,
    .rt-container-fluid,
    .rt-tpg-container,
    .tpg-el-main-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .list-layout-wrapper.rt-row,
    .rt-row.list-layout1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin: 0 !important;
    }

    .list-layout-wrapper .rt-list-item,
    .rt-row.list-layout1 .rt-list-item,
    .rt-list-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .list-layout-wrapper .rt-holder,
    .rt-row.list-layout1 .rt-holder {
        background: #ffffff !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .list-layout-wrapper .rt-img-holder,
    .rt-row.list-layout1 .rt-img-holder {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        overflow: hidden !important;
        position: relative !important;
        border-radius: 15px 15px 0 0 !important;
        background: #f8fafc !important;
    }

    .tpg-post-holder .tpg-post-link,
    .rt-img-holder a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .list-layout-wrapper .rt-img-holder img,
    .rt-row.list-layout1 .rt-img-holder img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        object-fit: contain !important;
        display: block !important;
        aspect-ratio: auto !important;
        border-radius: 15px 15px 0 0 !important;
    }

    .list-layout1 .rt-holder {
        display: flex !important;
        flex-direction: column !important;
    }

    .list-layout1 .rt-img-holder {
        width: 100% !important;
        float: none !important;
    }

    .list-layout1 .rt-detail {
        width: 100% !important;
        float: none !important;
        padding: 14px 16px 18px 16px !important;
    }

    .rt-detail,
    .rt-el-content-wrapper {
        padding: 14px 16px 18px 16px !important;
    }

    .entry-title,
    .entry-title a,
    .tpg-el-main-wrapper .entry-title a {
        font-family: 'Prompt', sans-serif !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin-bottom: 6px !important;
    }

    .tpg-load-more-btn,
    .tpg-pagination-area {
        width: 100% !important;
        text-align: center !important;
        margin-top: 16px !important;
    }

    .tpg-load-more-btn {
        width: calc(100% - 20px) !important;
        display: block !important;
        margin: 16px auto !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* 6. Responsive Tables */
    .entry-content table,
    .wp-block-table table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        border-radius: 12px !important;
        font-size: 13.5px !important;
    }

    .entry-content table th,
    .entry-content table td {
        padding: 8px 12px !important;
    }

    /* 7. WPDM Download Manager Mobile Cards */
    .w3eden .media {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
        gap: 10px !important;
    }

    .w3eden .media .pull-left {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .w3eden .media .pull-left img.wpdm_icon {
        width: 32px !important;
        height: 32px !important;
    }

    .w3eden .media-body {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .w3eden .media-body strong.ptitle {
        font-size: 14px !important;
        line-height: 1.35 !important;
        color: #1e293b !important;
    }

    .w3eden .media-body .wpdm-download-link,
    .w3eden .btn-primary,
    .w3eden .btn-success {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 16px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 8. Footer Mobile First Stack & Spacing */
    .pcru-footer-builder__grid,
    .pw-footer-builder__grid,
    .pcru-footer-builder__grid.cols-3,
    .pw-footer-builder__grid.cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 24px 16px !important;
    }

    .pcru-footer-builder__card,
    .pw-footer-builder__card {
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-bottom: 16px !important;
    }

    .pcru-footer-builder__card:last-child {
        border-bottom: none !important;
    }

    .pcru-footer-builder a,
    .pw-footer-builder a {
        padding: 4px 0 !important;
        display: inline-block !important;
        word-break: break-all !important;
    }

    .pcru-footer-builder,
    .pw-footer-builder,
    .site-footer,
    .ast-footer-copyright {
        padding-bottom: 64px !important;
    }
}