```css
/* =========================================================
   NCCE32 OJS CUSTOM CSS — LATEST
   Theme: Default Manuscript
   Primary Font: Prompt
   ========================================================= */


/* =========================================================
   1. GOOGLE FONT
   ========================================================= */

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


/* =========================================================
   2. GLOBAL
   ========================================================= */

html,
body {
    font-family: "Prompt", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Helvetica Neue",
                 Arial, sans-serif;

    font-size: 14px;
    line-height: 1.6;

    color: rgba(0, 0, 0, 0.87);

    background: #DDDDDD !important;

    margin: 0;
}


/* =========================================================
   3. DESKTOP OUTER PAGE
   ========================================================= */

@media (min-width: 992px) {

    body {
        padding-top: 32px;
    }

    .pkp_structure_page {
        margin-top: 0 !important;
        margin-bottom: 32px;
        background: #FFFFFF;
    }
}


/* =========================================================
   4. HEADER BASE
   ========================================================= */

.pkp_structure_head,
.pkp_head_wrapper {
    background: transparent !important;
}


/* =========================================================
   5. USER NAVIGATION
   สีดำตลอด
   ========================================================= */

.pkp_navigation_user_wrapper > ul > li > a,
.pkp_navigation_user > li > a {
    font-family: "Prompt", sans-serif;
    font-size: 16px;
    font-weight: 600;

    color: #000000 !important;

    text-decoration: none !important;
}


.pkp_navigation_user_wrapper > ul > li > a:hover,
.pkp_navigation_user_wrapper > ul > li > a:focus,
.pkp_navigation_user_wrapper > ul > li > a:active,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_user > li > a:active {
    color: #000000 !important;
    background: transparent !important;
    text-decoration: none !important;
}


/* =========================================================
   6. HEADER BACKGROUND
   ========================================================= */

.pkp_site_name_wrapper {
    background-image:
        url("https://raw.githubusercontent.com/ochakaew/image-ojs/refs/heads/main/Serene%20Sunrise%20Bridge%20and%20Digital%20Lotus%20Waves.png") !important;

    background-size: cover !important;

    background-position: center 42% !important;

    background-repeat: no-repeat !important;
}


/* =========================================================
   7. DESKTOP SITE LOGO
   ========================================================= */

@media (min-width: 992px) {

    .pkp_site_name {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;

        overflow: visible !important;
        white-space: normal !important;
    }


    .pkp_site_name .is_img {
        display: block !important;

        width: auto !important;
        max-width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    .pkp_site_name .is_img img {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: 120px !important;

        margin: 0 auto 0 0 !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   8. PRIMARY NAVIGATION BAR
   ========================================================= */

.pkp_navigation_primary_row {
    background: #0866FF !important;
}


/* =========================================================
   9. PRIMARY NAVIGATION — TOP LEVEL
   ปกติ = ขาว
   Hover/Focus = ปล่อย Theme Setting ควบคุม
   ========================================================= */

#navigationPrimary > li > a {
    font-family: "Prompt", sans-serif;

    font-size: 16px;
    font-weight: 600;

    color: #FFFFFF;

    text-decoration: none;
}


/*
 * สำคัญ:
 * ไม่กำหนด color/background สำหรับ
 * #navigationPrimary > li > a:hover
 * หรือ :focus
 *
 * เพื่อให้ Default Manuscript Theme ใช้ Theme Colour
 */


/* =========================================================
   10. DROPDOWN MENU
   ปล่อยสีพื้นและสีข้อความให้ Theme Setting ควบคุม
   ========================================================= */

@media (min-width: 992px) {

    #navigationPrimary > li > ul,
    #navigationPrimary > li > ul > li > a {
        font-family: "Prompt", sans-serif;
    }

    #navigationPrimary > li > ul > li > a {
        font-size: 15px;
        font-weight: 600;

        text-decoration: none;
    }

}


/* =========================================================
   11. MAIN TYPOGRAPHY
   ========================================================= */

.pkp_structure_main,
.pkp_structure_main p,
.pkp_structure_main li,
.pkp_structure_main td,
.pkp_structure_main th,
.pkp_structure_main label,
.pkp_structure_main input,
.pkp_structure_main textarea,
.pkp_structure_main select,
.obj_article_details,
.obj_issue_toc {
    font-family: "Prompt", sans-serif;
}


/* =========================================================
   12. HEADINGS
   ========================================================= */

.pkp_structure_main h1 {
    font-family: "Prompt", sans-serif;
    font-size: 1.714rem;
    line-height: 2.143rem;
    font-weight: 700;
}

.pkp_structure_main h2 {
    font-family: "Prompt", sans-serif;
    font-size: 1.285rem;
    line-height: 2.143rem;
    font-weight: 700;
}

.pkp_structure_main h3 {
    font-family: "Prompt", sans-serif;
    font-size: 1.143rem;
    line-height: 1.6rem;
    font-weight: 600;
}

.pkp_structure_main h4 {
    font-family: "Prompt", sans-serif;
    font-size: 1rem;
    line-height: 1.6rem;
    font-weight: 600;
}

.pkp_structure_main h5 {
    font-family: "Prompt", sans-serif;
    font-size: 1rem;
    line-height: 1.6rem;
    font-weight: 500;
}

.pkp_structure_main h6 {
    font-family: "Prompt", sans-serif;
    font-size: 0.93rem;
    line-height: 1.6rem;
    font-weight: 600;
}


/* =========================================================
   13. CURRENT ISSUE
   ========================================================= */

.pkp_page_index .current_issue .current_issue_title {
    font-family: "Prompt", sans-serif;
    font-size: 1.143rem;
    font-weight: 600;
}


/* =========================================================
   14. FORM / BUTTON / UI
   ========================================================= */

button,
input,
select,
textarea,
.pkp_button,
.cmp_button {
    font-family: "Prompt", sans-serif;
}


/* =========================================================
   15. SIDEBAR / BREADCRUMB
   ========================================================= */

.cmp_breadcrumbs,
.cmp_breadcrumbs a,
.pkp_structure_sidebar,
.pkp_structure_sidebar a {
    font-family: "Prompt", sans-serif;
}


/* =========================================================
   16. CONTENT IMAGES
   ========================================================= */

.pkp_structure_main img,
.pkp_page_index img,
.pkp_structure_content img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   17. FOOTER
   ========================================================= */

.pkp_structure_footer,
.pkp_structure_footer p,
.pkp_structure_footer a {
    font-family: "Prompt", sans-serif;
}


/* =========================================================
   18. REMOVE OJS BRAND
   ========================================================= */

.pkp_brand_footer {
    display: none;
}

#ojsBrand {
    float: right;
    margin-top: -1em;
}

#ojsBrand img {
    width: 30%;
    float: right;
}


/* =========================================================
   19. TABLET / MOBILE
   ========================================================= */

@media (max-width: 991px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden;

        background: #FFFFFF !important;
    }


    .pkp_structure_page {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-shadow: none !important;

        background: #FFFFFF;
    }


    .pkp_structure_head,
    .pkp_head_wrapper {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
    }


    /* -----------------------------------------------------
       MOBILE HEADER BACKGROUND
       ----------------------------------------------------- */

    .pkp_site_name_wrapper {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding: 64px 0 0 0 !important;

        background-image:
            url("https://raw.githubusercontent.com/ochakaew/image-ojs/refs/heads/main/Serene%20Sunrise%20Bridge%20and%20Digital%20Lotus%20Waves.png") !important;

        background-size: cover !important;

        background-position: center 42% !important;

        background-repeat: no-repeat !important;
    }


    /* -----------------------------------------------------
       MOBILE TOP BAR
       ----------------------------------------------------- */

    .pkp_site_name_wrapper::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;
        right: 0;

        width: 100%;
        height: 64px;

        background: #0866FF;

        z-index: 1;
    }


    /* -----------------------------------------------------
       MOBILE SITE LOGO
       ----------------------------------------------------- */

    .pkp_site_name {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;

        white-space: normal !important;
        overflow: visible !important;

        z-index: 2;
    }


    .pkp_site_name > a,
    .pkp_site_name .is_img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    .pkp_site_name .is_img img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;

        object-fit: contain !important;
    }


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

    .pkp_site_nav_toggle {
        display: block !important;

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 64px !important;
        height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: #0866FF !important;

        box-shadow: none !important;

        z-index: 10002 !important;

        cursor: pointer;
    }


    .pkp_site_nav_toggle > span {
        display: block !important;

        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: 32px !important;
        height: 4px !important;

        background: #FFFFFF !important;

        color: transparent !important;

        font-size: 0 !important;
        line-height: 0 !important;

        opacity: 1 !important;

        overflow: visible !important;

        transform: translate(-50%, -50%) !important;
    }


    .pkp_site_nav_toggle > span::before {
        content: "";

        position: absolute;

        left: 0;
        top: -9px;

        width: 32px;
        height: 4px;

        background: #FFFFFF;
    }


    .pkp_site_nav_toggle > span::after {
        content: "";

        position: absolute;

        left: 0;
        top: 9px;

        width: 32px;
        height: 4px;

        background: #FFFFFF;
    }


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

    .pkp_site_nav_menu {
        width: 100% !important;

        left: 0 !important;

        z-index: 10001 !important;
    }


    .pkp_site_nav_menu a {
        font-family: "Prompt", sans-serif;
        text-decoration: none;
    }


    /* -----------------------------------------------------
       CONTENT
       ----------------------------------------------------- */

    .pkp_structure_content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }


    .pkp_structure_main {
        float: none !important;

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


    .pkp_structure_sidebar {
        float: none !important;

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


    .pkp_structure_main img,
    .pkp_page_index img,
    .pkp_structure_content img {
        display: block;

        max-width: 100% !important;

        height: auto !important;
    }

}


/* =========================================================
   20. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .pkp_site_name .is_img img {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;
    }

    .pkp_site_nav_menu a {
        font-size: 15px !important;
    }
}
```