/* =========================================================
   CUSTOM CSS
   โรงเรียนกันทรลักษ์วิทยา
   Joomla 5 + Helix Ultimate

   DESIGN SYSTEM
   ---------------------------------------------------------
   Desktop  : Sidebar 320px + Content
   Tablet   : Sidebar ซ่อน + Mobile Menu
   Mobile   : Content เต็มจอ + Mobile Menu

   Theme    : Light Blue + Purple + Gold
   Purple   : #5E2B91
   Gold     : #FFC700
   BG       : #DBEAFE
   ========================================================= */


/* =========================================================
   01. GLOBAL RESET
   ========================================================= */

html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #DBEAFE !important;
    color: #1e293b !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

img {
    max-width: 100% !important;
}

iframe,
video,
embed,
object {
    max-width: 100% !important;
}


/* =========================================================
   02. BACKGROUND
   ========================================================= */

body,
.site,
.body-innerwrapper,
.sp-page-builder-page {
    background: #DBEAFE !important;
}


/* =========================================================
   03. HELIX HEADER
   ========================================================= */

#sp-header,
#sp-header .container,
#sp-header .row,
#sp-header .sp-column,
.header-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#sp-header {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sp-header .container,
#sp-header .row {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   04. ซ่อน MOTTO / ELEMENT ที่ไม่ใช้
   ========================================================= */

.school-motto-container,
.motto-box-content,
.motto-box-contents,
div[class*="motto"] {
    display: none !important;
}


/* =========================================================
   05. HELIX MENU เดิม
   ========================================================= */

#sp-menu,
.sp-megamenu-wrapper,
ul.sp-megamenu,
#sp-top-bar .sp-megamenu-wrapper {
    display: none !important;
}


/* =========================================================
   06. TOP AREA
   ========================================================= */

#sp-menu-top,
#sp-menu-top .container,
#sp-menu-top .row,
#sp-menu-top .col-sm-12,
#sp-menu-top .sp-column,
#sp-menu-top .sp-module,
#sp-menu-top .sp-module-content,
.sp-menu-top-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sp-top1 .sp-module ul.menu,
#sp-top1 .sp-module ul.nav,
#sp-top-bar .sp-module ul.menu,
#sp-top-bar .sp-module ul.nav,
#sp-top-bar .sp-module-content ul {
    display: none !important;
}


/* =========================================================
   07. MAIN BODY
   ========================================================= */

#sp-main-body {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 45px !important;
    padding-bottom: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 1 !important;
}

#sp-main-body .container,
#sp-main-body .row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================================
   08. CONTENT AREA
   ========================================================= */

#sp-component,
#sp-component .sp-column,
#sp-component .sp-column > *,
.com-content-category,
.category-list,
.blog,
.item-page,
.article-details {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#sp-component {
    min-width: 0 !important;
}


/* =========================================================
   09. DESKTOP LAYOUT
   ========================================================= */

@media (min-width: 1200px) {

    #sp-left,
    #sp-sidebar-left {
        width: 320px !important;
        max-width: 320px !important;
        flex: 0 0 320px !important;
        position: relative !important;
        min-width: 0 !important;
    }

    #sp-component {
        width: calc(100% - 320px) !important;
        max-width: calc(100% - 320px) !important;
        flex: 0 0 calc(100% - 320px) !important;
        min-width: 0 !important;
    }

}


/* =========================================================
   10. TABLET LAYOUT
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    #sp-left,
    #sp-sidebar-left {
        display: none !important;
    }

    #sp-component {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #sp-main-body {
        padding-top: 30px !important;
    }

}


/* =========================================================
   11. MOBILE LAYOUT
   ========================================================= */

@media (max-width: 767px) {

    #sp-left,
    #sp-sidebar-left {
        display: none !important;
    }

    #sp-component {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
    }

    #sp-main-body {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 10px 25px !important;
        margin: 0 !important;
    }

    #sp-main-body .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #sp-main-body .row {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


/* =========================================================
   12. SIDEBAR MODULE
   ========================================================= */

@media (min-width: 1200px) {

    #sp-left .sp-module,
    #sp-left .moduletable,
    #sp-sidebar-left .sp-module,
    #sp-sidebar-left .moduletable {
        width: 100% !important;
        background: rgba(255, 255, 255, 0.7) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.8) !important;
        border-radius: 14px !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.06) !important;
        padding: 0 !important;
        margin-bottom: 25px !important;
        overflow: hidden !important;
    }

}


/* =========================================================
   13. SIDEBAR TITLE
   ========================================================= */

@media (min-width: 1200px) {

    #sp-left .sp-module-title,
    #sp-left h3.mod-title,
    #sp-left .module-title,
    #sp-left .moduletable h3,
    #sp-sidebar-left .sp-module-title,
    #sp-sidebar-left h3.mod-title,
    #sp-sidebar-left .module-title,
    #sp-sidebar-left .moduletable h3 {
        background: #5E2B91 !important;
        color: #ffffff !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        font-size: 19px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        border: none !important;
        border-bottom: 3px solid #FFC700 !important;
    }

}


/* =========================================================
   14. SIDEBAR MENU
   ========================================================= */

@media (min-width: 1200px) {

    #sp-left ul.menu,
    #sp-left ul.nav.menu,
    #sp-sidebar-left ul.menu,
    #sp-sidebar-left ul.nav.menu {
        list-style: none !important;
        padding: 10px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    #sp-left ul.menu li,
    #sp-left ul.nav.menu li,
    #sp-sidebar-left ul.menu li,
    #sp-sidebar-left ul.nav.menu li {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #sp-left ul.menu li a,
    #sp-left ul.nav.menu li a,
    #sp-sidebar-left ul.menu li a,
    #sp-sidebar-left ul.nav.menu li a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 12px 15px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        color: #334155 !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
    }

    #sp-left ul.menu li a:hover,
    #sp-left ul.nav.menu li a:hover,
    #sp-sidebar-left ul.menu li a:hover,
    #sp-sidebar-left ul.nav.menu li a:hover {
        background: #5E2B91 !important;
        color: #FFC700 !important;
        border-color: #5E2B91 !important;
        transform: translateX(5px) !important;
        box-shadow: 0 5px 15px rgba(94,43,145,.20) !important;
    }

    #sp-left ul.menu li a i,
    #sp-left ul.menu li a span.fa,
    #sp-left ul.nav.menu li a i,
    #sp-left ul.nav.menu li a span.fa,
    #sp-sidebar-left ul.menu li a i,
    #sp-sidebar-left ul.menu li a span.fa {
        color: #5E2B91 !important;
        margin-right: 11px !important;
        font-size: 1.05rem !important;
    }

    #sp-left ul.menu li a:hover i,
    #sp-left ul.menu li a:hover span.fa,
    #sp-left ul.nav.menu li a:hover i,
    #sp-left ul.nav.menu li a:hover span.fa,
    #sp-sidebar-left ul.menu li a:hover i,
    #sp-sidebar-left ul.menu li a:hover span.fa {
        color: #FFC700 !important;
    }

    #sp-left ul.menu li.active > a,
    #sp-left ul.menu li.current > a,
    #sp-left ul.nav.menu li.active > a,
    #sp-sidebar-left ul.menu li.active > a,
    #sp-sidebar-left ul.menu li.current > a {
        background: #5E2B91 !important;
        color: #FFC700 !important;
        border-color: #5E2B91 !important;
        font-weight: 700 !important;
    }

}


/* =========================================================
   15. SUB MENU
   ========================================================= */

@media (min-width: 1200px) {

    #sp-left ul.menu ul,
    #sp-sidebar-left ul.menu ul {
        list-style: none !important;
        padding: 5px 0 0 10px !important;
        margin: 0 !important;
    }

    #sp-left ul.menu li li a,
    #sp-sidebar-left ul.menu li li a {
        background: #F8FAFC !important;
        padding-left: 25px !important;
        font-size: 15px !important;
    }

}


/* =========================================================
   16. ICON MENU
   ========================================================= */

.icon-menu {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 35px !important;
    margin-top: -140px !important;
    margin-bottom: 35px !important;
    padding: 0 15px !important;
    position: relative !important;
    z-index: 100 !important;
}


/* =========================================================
   17. ICON ITEM
   ========================================================= */

.icon-item {
    position: relative !important;
    width: 170px !important;
    min-width: 170px !important;
    height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    z-index: 101 !important;
}


/* =========================================================
   18. ICON IMAGE
   ========================================================= */

.icon-item img {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.25)) !important;
    transition: transform .35s cubic-bezier(.175,.885,.32,1.275), filter .35s ease !important;
}


/* =========================================================
   19. ICON HOVER
   ========================================================= */

.icon-item:hover img {
    transform: translateY(-10px) scale(1.06) !important;
    filter: drop-shadow(0 18px 30px rgba(94,43,145,.35)) drop-shadow(0 0 12px rgba(255,199,0,.45)) !important;
}


/* =========================================================
   20. ICON TOOLTIP
   ========================================================= */

.tooltip {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: rgba(94,43,145,.96) !important;
    color: #FFC700 !important;
    padding: 9px 18px !important;
    border-radius: 10px !important;
    border: 1px solid #FFC700 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
    z-index: 9999 !important;
}

.icon-item:hover .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}


/* =========================================================
   21. TABLET ICON
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .icon-menu {
        gap: 25px !important;
        margin-top: -90px !important;
        padding: 0 10px !important;
    }

    .icon-item {
        width: 135px !important;
        min-width: 135px !important;
        height: 165px !important;
    }

    .icon-item img {
        width: 125px !important;
        height: 125px !important;
        max-width: 125px !important;
        max-height: 125px !important;
    }

    .tooltip {
        font-size: 16px !important;
        padding: 7px 12px !important;
    }

}


/* =========================================================
   22. MOBILE ICON
   ========================================================= */

@media (max-width: 767px) {

    .icon-menu {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 10px !important;
        margin-top: -45px !important;
        margin-bottom: 25px !important;
        padding: 0 5px !important;
    }

    .icon-item {
        width: 100% !important;
        min-width: 0 !important;
        height: 125px !important;
        justify-content: flex-start !important;
    }

    .icon-item img {
        width: 85px !important;
        height: 85px !important;
        max-width: 85px !important;
        max-height: 85px !important;
    }

    .icon-item:hover img {
        transform: translateY(-5px) scale(1.04) !important;
    }

    .tooltip {
        position: static !important;
        transform: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        color: #5E2B91 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 5px 2px 0 !important;
        width: 100% !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.35 !important;
    }

}


/* =========================================================
   23. BUDGET GRID
   ========================================================= */

.budget-grid {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    padding: 0 15px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 25px !important;
}

.budget-card {
    width: 100% !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 280px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.05) !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}

.budget-card:hover {
    transform: translateY(-7px) !important;
    border-color: #5E2B91 !important;
    box-shadow: 0 18px 30px rgba(94,43,145,.15) !important;
}

.budget-card .icon,
.budget-card img {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: contain !important;
    margin-bottom: 18px !important;
    border-radius: 14px !important;
    transition: transform .3s ease !important;
}

.budget-card:hover .icon,
.budget-card:hover img {
    transform: scale(1.05) !important;
}

.budget-card h3 {
    margin: 0 0 8px !important;
    color: #0F172A !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.budget-card p {
    margin: 0 !important;
    color: #64748B !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   24. BUDGET TABLET
   ========================================================= */

@media (max-width: 992px) {

    .budget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }

}


/* =========================================================
   25. BUDGET MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .budget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 10px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 20px auto !important;
    }

    .budget-card {
        min-height: 190px !important;
        padding: 18px 8px !important;
        border-radius: 12px !important;
    }

    .budget-card .icon,
    .budget-card img {
        width: 75px !important;
        height: 75px !important;
        max-width: 75px !important;
        max-height: 75px !important;
        margin-bottom: 10px !important;
    }

    .budget-card h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
    }

    .budget-card p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

}


/* =========================================================
   26. NEWS MODULE
   ========================================================= */

.news-custom-list {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.news-custom-list ul {
    list-style: none !important;
    width: 100% !important;
    padding: 10px 5px !important;
    margin: 0 !important;
}

.news-custom-list ul li {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 13px 15px 13px 38px !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border-left: 4px solid #5E2B91 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.05) !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.news-custom-list ul li::before {
    content: "📢" !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
}

.news-custom-list ul li:hover {
    background: #ffffff !important;
    transform: translateX(5px) !important;
    box-shadow: 0 5px 14px rgba(90,24,154,.12) !important;
}

.news-custom-list ul li a {
    display: block !important;
    width: 100% !important;
    color: #333333 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
}

.news-custom-list ul li a:hover {
    color: #5E2B91 !important;
}


/* =========================================================
   27. MODULE TITLE
   ========================================================= */

.sp-module-title,
h3.mod-title,
.moduletable h3,
.sppb-title-heading,
.sppb-addon-title,
.sp-simpleportfolio-head .sp-simpleportfolio-title,
#sp-component .sp-module .sp-module-title {
    background: #5E2B91 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    border-left: 6px solid #FFC700 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   28. FORCE RESET SP SIMPLE PORTFOLIO ITEM TEXT
   ========================================================= */

.sp-simpleportfolio-item .sp-simpleportfolio-title,
.sp-simpleportfolio-item .sp-simpleportfolio-title a,
.sp-simpleportfolio-item .sp-simpleportfolio-tags,
.sp-simpleportfolio-item h3,
.sp-simpleportfolio-item h3 a {
    background: transparent !important;
    background-color: transparent !important;
    color: #1E293B !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    display: block !important;
}

.sp-simpleportfolio-item .sp-simpleportfolio-title a:hover {
    color: #5E2B91 !important;
}


/* =========================================================
   29. HIDE ARTICLE INFORMATION
   ========================================================= */

.article-info,
.article-info-wrap,
.published-info,
.publishedinfo,
.created-by,
.createdby,
.badge.bg-info,
.helix-social-share,
.article-social-share,
.social-share-links,
ul.social-share {
    display: none !important;
}


/* =========================================================
   30. HIDE PAGE HEADING
   ========================================================= */

.view-article .page-header,
.page-header,
h1.page-title {
    display: none !important;
}


/* =========================================================
   31. ARTICLE TEXT
   ========================================================= */

#sp-main-body .article-details p,
#sp-main-body .article-details span {
    line-height: 1.7 !important;
}


/* =========================================================
   32. SP SIMPLE PORTFOLIO MODULE TITLE
   ========================================================= */

.sp-simpleportfolio-head .sp-simpleportfolio-title,
.sp-simpleportfolio .sp-module-title,
div.sp-simpleportfolio > h2,
div.sp-simpleportfolio > h3 {
    background: #5E2B91 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    border-left: 6px solid #FFC700 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 20px 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}


/* =========================================================
   33. SIMPLE PORTFOLIO OVERLAY & BUTTONS
   ========================================================= */

.sp-simpleportfolio-item .sp-simpleportfolio-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(94, 43, 145, 0.6) !important;
    backdrop-filter: blur(3px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 10 !important;
    border-radius: 12px !important;
}

.sp-simpleportfolio-item:hover .sp-simpleportfolio-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

.sp-simpleportfolio-item .sp-simpleportfolio-overlay a,
.sp-simpleportfolio-item .sp-simpleportfolio-overlay .btn-zoom,
.sp-simpleportfolio-item .sp-simpleportfolio-overlay .btn-view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFC700 !important;
    color: #5E2B91 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.sp-simpleportfolio-item .sp-simpleportfolio-overlay a:hover {
    background: #ffffff !important;
    color: #5E2B91 !important;
    transform: scale(1.08) !important;
}


/* =========================================================
   34. SIMPLE PORTFOLIO TABLET
   ========================================================= */

@media (max-width: 991px) {

    .sp-simpleportfolio-items .sp-simpleportfolio-item {
        width: 33.333333% !important;
        max-width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
    }

}


/* =========================================================
   35. SIMPLE PORTFOLIO MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sp-simpleportfolio-items .sp-simpleportfolio-item {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding: 5px !important;
    }

    .sp-simpleportfolio-overlay {
        display: none !important;
    }

}


/* =========================================================
   36. BUTTON - ดูข่าวทั้งหมด
   ========================================================= */

.com-content-blog__link a,
.com-content-blog__links a,
.items-more a,
a.readmore {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #C59200 !important;
    color: #ffffff !important;
    padding: 9px 20px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 3px 8px rgba(197,146,0,.30) !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.com-content-blog__link a:hover,
.com-content-blog__links a:hover,
.items-more a:hover,
a.readmore:hover {
    background: #A37800 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(197,146,0,.40) !important;
}


/* =========================================================
   37. REMOVE WHITE AREA AROUND BUTTON
   ========================================================= */

.items-more,
.com-content-category__navigation,
.pagination-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================================
   38. MOBILE BUTTON
   ========================================================= */

@media (max-width: 767px) {

    .com-content-blog__link a,
    .com-content-blog__links a,
    .items-more a,
    a.readmore {
        font-size: 14px !important;
        padding: 8px 15px !important;
        max-width: 100% !important;
    }

}


/* =========================================================
   39. MOBILE CONTENT
   ========================================================= */

@media (max-width: 767px) {

    #sp-component *,
    .article-details *,
    .com-content-category * {
        max-width: 100%;
    }

    .article-details img {
        height: auto !important;
    }

    .article-details table {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

}


/* =========================================================
   40. MOBILE MENU / DRAWER
   ========================================================= */

@media (max-width: 1199px) {

    .offcanvas-menu,
    .sp-offcanvas-menu,
    .offcanvas-overlay {
        z-index: 999999 !important;
    }

    .offcanvas-menu {
        max-height: 100vh !important;
    }

    .offcanvas-menu .offcanvas-inner {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    .offcanvas-menu .offcanvas-inner > * {
        max-width: 100% !important;
    }

    .offcanvas-menu ul {
        max-width: 100% !important;
    }

    .offcanvas-menu li {
        max-width: 100% !important;
    }

    .offcanvas-menu a {
        overflow-wrap: anywhere !important;
    }

}


/* =========================================================
   41. MOBILE MENU LIST
   ========================================================= */

@media (max-width: 767px) {

    .offcanvas-menu .sp-module,
    .offcanvas-menu .moduletable {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .offcanvas-menu ul.menu,
    .offcanvas-menu ul.nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    .offcanvas-menu ul.menu li,
    .offcanvas-menu ul.nav li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .offcanvas-menu ul.menu li a,
    .offcanvas-menu ul.nav li a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 11px 14px !important;
        background: #ffffff !important;
        color: #334155 !important;
        border-radius: 8px !important;
        border: 1px solid #E2E8F0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
    }

    .offcanvas-menu ul.menu li a:hover,
    .offcanvas-menu ul.nav li a:hover {
        background: #5E2B91 !important;
        color: #FFC700 !important;
    }

    .offcanvas-menu ul.menu li.active > a,
    .offcanvas-menu ul.nav li.active > a {
        background: #5E2B91 !important;
        color: #FFC700 !important;
        border-color: #5E2B91 !important;
    }

}


/* =========================================================
   42. MOBILE MENU SUBMENU
   ========================================================= */

@media (max-width: 767px) {

    .offcanvas-menu ul.menu ul,
    .offcanvas-menu ul.nav ul {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 0 5px 12px !important;
        margin: 0 !important;
        display: block !important;
    }

    .offcanvas-menu ul.menu ul li a,
    .offcanvas-menu ul.nav ul li a {
        font-size: 14px !important;
        min-height: 42px !important;
        background: #F8FAFC !important;
    }

}


/* =========================================================
   43. ป้องกัน MENU ถูกตัดด้วย overflow:hidden
   ========================================================= */

@media (max-width: 1199px) {

    .offcanvas-menu,
    .offcanvas-menu .offcanvas-inner,
    .offcanvas-menu .sp-module,
    .offcanvas-menu .sp-module-content {
        overflow-x: hidden !important;
    }

    .offcanvas-menu .offcanvas-inner {
        overflow-y: auto !important;
    }

}


/* =========================================================
   44. ป้องกัน ELEMENT ใหญ่เกินจอ
   ========================================================= */

@media (max-width: 767px) {

    .sppb-row,
    .sppb-container,
    .sppb-section,
    .sppb-column,
    .sppb-addon-wrapper {
        max-width: 100% !important;
    }

    .sppb-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sppb-column {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

}


/* =========================================================
   45. TEXT RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    h1 {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }

    h2 {
        font-size: 21px !important;
        line-height: 1.4 !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.45 !important;
    }

    p {
        line-height: 1.7 !important;
    }

}


/* =========================================================
   46. MOBILE NEWS
   ========================================================= */

@media (max-width: 767px) {

    .sp-module.news-box {
        padding: 10px !important;
        border-radius: 10px !important;
        margin-bottom: 15px !important;
    }

    .sp-module.news-box .sp-module-title,
    .news-box h3 {
        font-size: 18px !important;
        padding: 11px 13px !important;
        margin-bottom: 12px !important;
    }

    .news-custom-list ul {
        padding: 5px 0 !important;
    }

    .news-custom-list ul li {
        padding: 11px 10px 11px 35px !important;
    }

    .news-custom-list ul li a {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

}


/* =========================================================
   47. REMOVE UNWANTED WHITE BOXES
   ========================================================= */

#sp-component .card,
#sp-component .well,
#sp-component .panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================================
   48. REMOVE FEATURED ARTICLES
   ========================================================= */

.blog-featured,
#sp-component .blog-featured,
.com-content-featured,
.com-content-featured__items {
    display: none !important;
}


/* =========================================================
   49. FINAL MOBILE SAFETY
   ========================================================= */

@media (max-width: 767px) {

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

    #sp-main-body,
    #sp-component,
    .sp-column,
    .sppb-container,
    .sppb-row {
        max-width: 100% !important;
    }

    .icon-menu,
    .budget-grid,
    .news-custom-list {
        overflow-x: hidden !important;
    }

    a,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: anywhere !important;
    }

}


/* =========================================================
   50. DESKTOP ICON MENU
   ========================================================= */

@media (min-width: 1200px) {

    .icon-menu {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}


/* =========================================================
   FIX MOBILE BUTTON & DRAWER DESIGN
   ========================================================= */

button.custom-mobile-toggler {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 999999 !important;
    background: #5E2B91 !important;
    color: #FFC700 !important;
    border: 2px solid #FFC700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
    outline: none !important;
}

button.custom-mobile-toggler:active {
    transform: scale(0.95) !important;
}

#customSidebarDrawer {
    position: fixed !important;
    top: 0 !important;
    left: -320px !important;
    width: 300px !important;
    max-width: 80vw !important;
    height: 100vh !important;
    background: #DBEAFE !important;
    z-index: 1000000 !important;
    transition: left 0.3s ease-in-out !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
}

#customSidebarDrawer.show {
    left: 0 !important;
}

#customSidebarDrawer .offcanvas-header {
    background: #5E2B91 !important;
    color: #ffffff !important;
    border-bottom: 3px solid #FFC700 !important;
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#customSidebarDrawer .offcanvas-title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

#customSidebarDrawer .btn-close {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 20px !important;
    cursor: pointer !important;
}

#customSidebarDrawer .btn-close::before {
    content: "✕" !important;
    color: #FFC700 !important;
    font-weight: bold !important;
}

#customSidebarDrawer .offcanvas-body {
    flex: 1 !important;
    max-height: calc(100vh - 55px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
    -webkit-overflow-scrolling: touch !important;
}

.offcanvas-overlay.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 999999 !important;
    display: block !important;
}


/* =========================================================
   51. RESPONSIVE 2-COLUMN CARDS (FIX OVERLAP & HEIGHT)
   ========================================================= */

.sp-simpleportfolio-items,
.sp-simpleportfolio .sp-simpleportfolio-items {
    padding: 4px !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.sp-simpleportfolio-items .sp-simpleportfolio-item,
.sp-simpleportfolio .sp-simpleportfolio-item {
    width: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    padding: 4px !important;
    height: auto !important;
}

.sp-simpleportfolio-item .sp-simpleportfolio-container,
.sp-simpleportfolio-item > div {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 4px 12px rgba(94, 43, 145, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.sp-simpleportfolio-img,
.sp-simpleportfolio-thumb,
.sp-simpleportfolio-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 8px !important;
    max-height: 220px !important;
}

.sp-simpleportfolio-title,
.sp-simpleportfolio-title a {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #5E2B91 !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
}

.sp-simpleportfolio-tags,
.sp-simpleportfolio-item p {
    font-size: 10px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* =========================================================
   52. POPUP OVERLAY & BUTTONS
   ========================================================= */

/* ฉากหลังมืดโปร่งใสเต็มจอ */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
}

/* จัดกล่องเนื้อหาให้อยู่ตรงกลาง ไม่ขยายเป็นแถบกว้าง */
.modal-content {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* บังคับขนาดรูปภาพให้สมส่วน */
.modal-content img {
    max-height: 70vh !important;
    width: auto !important;
    display: block !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}

/* ปุ่มกากบาท [X] สีแดง ขวาบน */
.btn-close-x {
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    background-color: #ff0000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* ปุ่มเข้าสู่เว็บไซต์ สีน้ำเงิน */
.btn-enter {
    display: inline-block !important;
    margin-top: 15px !important;
    background-color: #007bff !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 8px 28px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.btn-enter:hover {
    background-color: #0056b3 !important;
    color: #ffffff !important;
}