/**
 * Custom CSS for Journal of Graduate Studies Review MCU Phrae Campus
 * Optimized for: OJS v3.3 Native Default Theme (ไม่ใช่ Bootstrap)
 * Version: 7.2.0 (อัปเดตล่าสุด: ปรับปรุงโครงสร้างแถบเมนูหลักและการแสดงผลส่วนหัวร่วมกัน)
 * Description: ปรับส่วนหัวเป็นสีม่วงพรีเมียม, ปรับแถบเมนูหลักให้เรียบหรูแนบเนียนเข้ากับส่วนหัว,
 * ปรับหน้าปก 3D, หน้ารวมคลังวารสารแบบ Grid และคงหัวข้อกล่องข้อมูลข้างเป็นสีขาวสว่างเด่นชัด
 */

/* นำเข้าฟอนต์ Noto Sans Thai และ Noto Serif Thai จาก Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   0. กำหนดฟอนต์หลักและฟอนต์สำหรับเนื้อหา พร้อมภาพพื้นหลังเว็บไซต์
   ========================================================================== */
body, input, button, select, textarea, span, a, h1, h2, h3, h4, h5, h6, 
.pkp_block .title, .pkp_navigation_primary a, .pkp_navigation_user a {
    font-family: 'Noto Sans Thai', sans-serif !important;
}

p, ul, ol, li, .obj_article_summary .abstract, .obj_article_details .abstract {
    font-family: 'Noto Serif Thai', serif !important;
    line-height: 1.7;
}

/* ป้องกันฟอนต์ไอคอนระบบเพี้ยน */
.fa, .fas, .far, .fab, .glyphicon, .pkp_icon, [class^="glyphicon-"], [class*=" icon-"] {
    font-family: 'FontAwesome', 'Glyphicons Halflings', sans-serif !important;
}

/* ภาพพื้นหลังพุทธศิลป์แบบคงที่ตรึงหน้าจอ */
body {
    background-image: url('https://e-testing.mcupr.ac.th/pluginfile.php/1/theme_moove/loginbgimg/1772872840/bg-e-testing.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
}

/* ----------------------------------------------------------------------
   ควบคุมขนาดหน้าจอแบบ Boxed Layout (หน้าจอกว้างตั้งแต่ 768px ขึ้นไป)
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
    .pkp_structure_page {
        max-width: 1200px !important;
        margin: 40px auto !important; 
        background-color: #ffffff !important; 
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important; 
        border-radius: 30px !important;
        overflow: visible !important; 
        position: relative !important;
    }
    
    .pkp_structure_head {
        border-top-left-radius: 30px !important;
        border-top-right-radius: 30px !important;
        overflow: hidden !important;
    }

    .pkp_structure_footer {
        border-bottom-left-radius: 30px !important;
        border-bottom-right-radius: 30px !important;
        overflow: hidden !important;
    }
    
    /* คุมระยะภายในโครงสร้างของ OJS 3.3 Default Theme */
    .pkp_structure_head .pkp_helpers_container,
    .pkp_structure_content .pkp_helpers_container,
    .pkp_structure_footer .pkp_helpers_container {
        max-width: 1160px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 767px) {
    .pkp_structure_page {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important; 
        border-radius: 0 !important;
    }
}

/* ==========================================================================
   1. ส่วนหัว (Header) โทนสีม่วงพรีเมียม ให้กลืนกับแบนเนอร์โลโก้
   ========================================================================== */
.pkp_structure_head {
    background-color: #b33989 !important; 
    background-image: linear-gradient(135deg, #b33989 0%, #7a1d5c 100%) !important; 
    border-bottom: 4px solid #f1c40f; /* เส้นตัดสีทองอร่ามเพิ่มความหรูหรา */
    padding: 20px 20px 5px 20px !important; /* ปรับ padding ล่างให้รับกับแถบเมนู */
}

/* สีลิงก์เมนูผู้ใช้งานด้านบนสุด (User Navigation เช่น Login/Register) */
.pkp_navigation_user a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    font-weight: 500 !important;
}
.pkp_navigation_user a:hover {
    color: #ffd700 !important; 
    text-decoration: none !important;
}

.pkp_site_name_wrapper {
    display: flex !important;
    justify-content: flex-start !important; 
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
}

.pkp_site_name {
    display: block !important;
    text-align: left !important;
}

.pkp_site_name img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: 0 !important;       
    margin-right: auto !important;
    border-radius: 4px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.pkp_site_name:hover img {
    transform: translateY(-2px) scale(1.01) !important;
    filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.5)) brightness(1.02) !important; 
}

/* ==========================================================================
   2. [ปรับปรุงใหม่] แถบเมนูหลักของ OJS 3.3 Native ปรับดีไซน์ให้เรียบหรูเข้ากับหัวเว็บสีม่วง
   ========================================================================== */
.pkp_navigation_primary_wrapper {
    background: transparent !important; /* เปลี่ยนเป็นโปร่งใสเพื่อให้กลืนเข้ากับพื้นหลังส่วนหัว */
    border: none !important;
    box-shadow: none !important;
    margin: 10px 0 0 0 !important; /* จัดระยะให้อยู่ชิดขอบล่างของโลโก้ */
    padding: 0 !important;
}

/* จัดแนวเมนูหลักลิสต์ในสไตล์ Flexbox */
ul.pkp_navigation_primary {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.pkp_navigation_primary > li {
    position: relative !important;
}

ul.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 18px !important;
    display: block !important;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important; /* เผื่อพื้นที่สำหรับเส้นขอบเวลามีการ Active/Hover */
}

ul.pkp_navigation_primary > li > a:hover {
    color: #7a1d5c !important; /* อักษรเปลี่ยนเป็นสีม่วงเข้ม */     
    background: #f1c40f !important; /* พื้นหลังเปลี่ยนเป็นสีทอง */
    border-radius: 4px !important;
    text-shadow: none !important;
}

/* ระบบเมนูย่อย Dropdown สำหรับ OJS 3.3 Default Theme */
ul.pkp_navigation_primary ul {
    background-color: #ffffff !important; 
    border: 1px solid #b33989 !important; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important; 
    padding: 6px 0 !important;
    border-radius: 6px !important; 
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999999 !important; 
    min-width: 230px !important;
    display: none !important;
    list-style: none !important;
}

/* สั่งให้แสดงผลเมนูย่อยเมื่อเมาส์ชี้ (Hover) */
ul.pkp_navigation_primary li:hover > ul {
    display: block !important;
}

ul.pkp_navigation_primary ul a {
    color: #7a1d5c !important; 
    padding: 10px 20px !important;
    display: block !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out;
}

ul.pkp_navigation_primary ul a:hover {
    background-color: #b33989 !important; 
    color: #ffffff !important; /* เปลี่ยนเป็นตัวอักษรสีขาวเมื่อชี้เมนูย่อย */           
}

/* ==========================================================================
   3. หน้าแรกวารสารและหน้ารวมบทความ (เเยกสีหัวข้อชัดเจน + 3D Book Flip)
   ========================================================================== */
/* หัวข้อบทความ/วารสาร (Title) - สีม่วงเข้ม */
.obj_article_summary .title,
.obj_article_details .title,
.obj_issue_toc .title,
.page_index_journal .section h2 {
    color: #b33989 !important;       
    font-weight: 700 !important;    
    text-shadow: none !important;
    margin-bottom: 8px !important;
}

/* ส่วนรายละเอียดคำโปรย (Meta/Authors) */
.obj_article_summary .authors,
.obj_article_details .authors,
.obj_article_summary .meta,
.obj_issue_summary .description {
    color: #555555 !important;
    font-size: 14px !important;
    text-shadow: none !important;
}

/* โครงสร้างหน้าปกจำลองเล่มหนังสือเอฟเฟกต์ 3D ระดับพรีเมียม */
.obj_issue_summary .cover,
.obj_article_summary .cover,
.obj_issue_toc .cover,
.page_issue .cover {
    perspective: 1500px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

.obj_issue_summary .cover img,
.obj_article_summary .cover img,
.obj_issue_toc .cover img,
.page_issue .cover img,
.thumb img {
    max-width: 180px !important;
    height: auto !important;
    border-radius: 2px 8px 8px 2px !important; 
    transform-origin: left center !important; 
    box-shadow: 
        1px 1px 0px #f4f4f4,
        2px 2px 0px #eaeaea,
        3px 3px 0px #e0e0e0,
        4px 4px 1px rgba(0, 0, 0, 0.08),
        0px 4px 12px rgba(0, 0, 0, 0.15),
        inset 12px 0 15px -8px rgba(0, 0, 0, 0.4) !important; 
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.5s ease !important;
}

/* จังหวะเลื่อนเมาส์ผ่านหน้าปกให้กางออก 3D */
.obj_issue_summary:hover .cover img,
.obj_article_summary:hover .cover img,
.obj_issue_toc .cover:hover img,
.page_issue .cover:hover img {
    transform: rotateY(-24deg) rotateZ(-1deg) translateZ(8px) !important; 
    z-index: 99 !important;
    box-shadow: 
        1px 1px 0px #f4f4f4,
        2px 2px 0px #eaeaea,
        3px 3px 0px #e0e0e0,
        -2px 4px 6px rgba(0, 0, 0, 0.08),     
        20px 24px 35px rgba(0, 0, 0, 0.26),   
        inset 15px 0 18px -7px rgba(0, 0, 0, 0.5) !important; 
    filter: brightness(1.04) contrast(1.02) !important;
}

/* ==========================================================================
   4. หน้าคลังวารสารย้อนหลัง (Archives) ปรับเป็น Grid 3 คอลัมน์สวยงาม
   ========================================================================== */
ul.issues_list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    gap: 25px !important; 
    padding: 20px 0 !important;
    list-style: none !important;
    border-top: 2px solid #e1e1e1 !important; 
}

ul.issues_list li {
    display: flex !important;
    flex-direction: column !important; 
    background: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 0 !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

ul.issues_list li:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(179, 57, 137, 0.15) !important; 
    border-color: #b33989 !important;
}

/* ยุบเป็น 1 คอลัมน์บนมือถืออัตโนมัติ */
@media (max-width: 767px) {
    ul.issues_list {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }
}

/* ==========================================================================
   5. กล่องข้อมูลด้านข้าง (Sidebar Blocks) และโครงสร้างกล่องข้อความ Panel เดิม
   ========================================================================== */
.pkp_block, .panel-default {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e1e1e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 25px !important;
    overflow: visible !important; 
    position: relative !important;
}

/* ส่วนหัวข้อแถบด้านบน (Block Title / Panel Heading) ไล่เฉดสีม่วง */
.pkp_block > .title, .panel-default > .panel-heading {
    background-color: #b33989 !important;
    background-image: linear-gradient(135deg, #b33989 0%, #8e2a6b 100%) !important; 
    padding: 14px 18px !important;
    border-top-left-radius: 11px !important;  
    border-top-right-radius: 11px !important; 
    border-bottom: none !important;
    margin: 0 !important;
}

/* บังคับข้อความด้านในหัวข้อทุกชนิดให้เป็น สีขาวสว่าง ชัดเจน คอนทราสต์สูง */
.pkp_block > .title,
.pkp_block > .title *,
.panel-default > .panel-heading,
.panel-default > .panel-heading * {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    margin: 0 !important;
}

/* เนื้อหาในบล็อกข้าง */
.pkp_block .content, .panel-body {
    padding: 15px !important;
    color: #444444 !important;
}

/* ==========================================================================
   6. ปุ่มดาวน์โหลด PDF ปุ่มระบบ (Buttons) และลิงก์เชื่อมโยง
   ========================================================================== */
.obj_galley_link, .btn, .button {
    background-color: #b33989 !important;
    border-color: #b33989 !important;
    color: #ffffff !important; 
    font-weight: 700 !important; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease-in-out;
}

.obj_galley_link:hover, .btn:hover, .button:hover {
    background-color: #f1c40f !important; 
    border-color: #f1c40f !important;
    color: #222222 !important; 
    text-shadow: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   7. ส่วนท้ายของเว็บไซต์ (Footer) สีม่วงเข้มไล่เฉดสีทองอร่าม
   ========================================================================== */
.pkp_structure_footer {
    background: linear-gradient(135deg, #4a0e36 0%, #2a051e 100%) !important;
    border-top: 5px solid #f1c40f !important; 
    padding: 45px 25px !important;
}

.pkp_structure_footer .container-fluid,
.pkp_structure_footer p,
.pkp_structure_footer span,
.pkp_structure_footer div,
.pkp_structure_footer li {
    color: #ffffff !important; 
    font-size: 14px !important; 
    line-height: 1.7 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; 
}

.pkp_structure_footer a {
    color: #ffd700 !important; 
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted rgba(255, 215, 0, 0.4); 
    transition: all 0.2s ease;
}

.pkp_structure_footer a:hover {
    color: #ffffff !important; 
    border-bottom: 1px solid #ffffff !important; 
}

/* ==========================================================================
   8. ปรับแต่งตารางเนื้อหา (Tables) สไตล์โฮเวอร์ม่วงพาสเทล
   ========================================================================== */
table, .table {
    width: 100% !important;
    margin-bottom: 25px;
    border-collapse: collapse !important;
}

table th, .table th {
    background-color: #b33989 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 10px !important;
    border-bottom: 2px solid #92256e !important;
}

table td, .table td {
    padding: 12px 10px !important;
    border-bottom: 1px solid #e1e1e1 !important;
    color: #444444 !important;
}

table tr:hover td, .table tr:hover td {
    background-color: #f9f0f6 !important;
    color: #b33989 !important;
}