/*ปัจจุบันกับเว็บสารสาร Hatyai ใช้อันนี้ ปัจจุบัน + เพิ่มฟอนต์ + เปลี่ยนสีหัวข้อ+สี footer 2 กพ 69 */

/*หากต้องการใช้ฟอนต์เดิม ลบออก*/

/* 1. ดึงฟอนต์ Mitr จาก Google Fonts (วางไว้บนสุดของไฟล์ CSS) */
@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600&display=swap');

/* 2. บังคับใช้ฟอนต์ Mitr กับทุกส่วนของเว็บไซต์ */
* {
    font-family: 'Mitr', sans-serif !important;
}

/* 3. เจาะจงส่วนต่างๆ เพื่อความชัวร์ */
body, p, div, span, a, li, h1, h2, h3, h4, h5, h6, input, button, select, textarea {
    font-family: 'Mitr', sans-serif !important;
    font-weight: 300; /* ฟอนต์ Mitr หัวจะค่อนข้างหนา แนะนำให้ใช้ 300 สำหรับเนื้อหาทั่วไปจะดูสวยค่ะ */
}

/* 4. ส่วนหัวข้อให้ดูหนาขึ้นเล็กน้อย */
h1, h2, h3, h4, h5, h6, strong, b {
    font-weight: 500 !important;
}

/* 5. ปรับขนาดฟอนต์เมนูให้เหมาะสมกับฟอนต์ Mitr */
.navbar-default .navbar-nav > li > a {
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* 6. ปรับสีตัวหนาและหัวข้อเฉพาะจุดของ ThaiJO เป็นสีน้ำเงิน */
strong, b, h2, h3, h4, h5, h6,
.section_title, 
.label,
.sub_title,
h3.title {
    color: #1e4faf !important;
}

/* 7. ยกเว้นชื่อบทความให้เป็นตัวหนาแต่ใช้สีดำ/สีเดิม */
/* เพิ่มคลาส .title เพื่อดึงชื่อบทความในหน้าสารบัญและหน้าเนื้อหาออกมา */
h1, 
.article-summary .title a, 
.obj_article_details .page_title,
.entry_details .title {
    font-weight: 500 !important;
    color: #333333 !important; /* หรือใช้ inherit ถ้าต้องการสีเดิมของระบบ */
}

/* 8. ป้องกันเมนูหลักเปลี่ยนสี (ให้คงสีขาวไว้) */
.navbar-default .navbar-nav > li > a {
    color: #ffffff !important;
}

/*หากต้องการใช้ฟอนต์เดิม ลบออก*/


/*----------------------------------------------------------------*/












/* 1. ส่วนปรับขนาด Logo */
.navbar-brand-logo {
    height: 100%;
}



.navbar-brand-logo img { 
    height: 180px;  /* กำหนดความสูงขั้นต่ำให้กับขนาด Logo */
    width: auto;
}



/* 2. ส่วนปรับพื้นหลัง Header โดยใช้ลิงก์ตรงจาก GitHub https://github.com/chaloemwany-prog/thaijo-img2/blob/main/BG.jpg?raw=true*/

.navbar-default, 
.header_view {

    /* เพิ่ม ?raw=true ไว้ท้าย URL เพื่อให้ดึงรูปภาพมาแสดงผลได้ */

    background-image: url('https://github.com/chaloemwany-prog/thaijo-img2/blob/main/BG.jpg?raw=true') !important;
    
    background-size: cover !important;       /* ให้รูปภาพขยายเต็มพื้นที่ Header */
    background-position: center !important;  /* จัดวางตำแหน่งภาพให้อยู่กึ่งกลาง */
    background-repeat: no-repeat !important; /* ไม่ให้รูปภาพแสดงซ้ำ */
    background-color: transparent !important; /* ลบสีพื้นหลังเดิมของ Bootstrap */
    border: none !important;                 /* ลบเส้นขอบสีเทาของ Bootstrap ออก */
    min-height: 180px;                       /* กำหนดความสูงขั้นต่ำให้เท่ากับขนาด Logo */
}  /*ความสูง Logo ถ้ายิ่งสูง เมนูจะมาอยู่ข้างล่างโลโก้ */

/* 3. ปรับแต่งสีตัวอักษรของเมนู  Current Archives Announcements Publication Ethics Download Documents About ให้เป็นสีขาว */

.navbar-default 
.navbar-nav > li > a {
    color: #ffffff !important; 
    font-weight: 500;          
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 

    /* เพิ่ม transition เพื่อให้ตอนเมาส์ชี้แล้วสีเปลี่ยนแบบนุ่มนวล */
    transition: all 0.3s ease; 
    border-radius: 4px; /* ทำให้ขอบไฮไลท์มนเล็กน้อย */
    margin: 0 2px;      /* เพิ่มระยะห่างระหว่างเมนูเล็กน้อยเพื่อให้เห็นไฮไลท์ชัดขึ้น */

/*-------เพิ่ม----------------*/
/* แก้ไขส่วนนี้เพื่อให้ไฮไลท์ไม่สูงเกินไป */
    padding-top: 8px !important;    /* ปรับระยะห่างด้านบน */
    padding-bottom: 8px !important; /* ปรับระยะห่างด้านล่าง */
    margin-top: 10px;               /* ดันตัวเมนูลงมาให้สมดุล */
    margin-bottom: 10px;            /* ดันตัวเมนูขึ้นจากขอบล่าง */
    
    transition: all 0.3s ease; 
    border-radius: 6px;             /* ความโค้งมนของไฮไลท์ */
    display: inline-block;          /* บังคับให้ขนาดอิงตามตัวอักษร */
}

/* ปรับสีเมื่อเอาเมาส์ไปชี้ (Hover) - แก้ไขจุดนี้ */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #50faff !important; /* เดิม #4ac3ff */
    /* เปลี่ยนจาก transparent เป็นสีขาวบางๆ */
    background-color: rgba(255, 255, 255, 0.2) !important; 
}

/* ปรับส่วนเมนูขวา (Dropdown และอื่นๆ) ให้เหมือนกัน */
.navbar-default .navbar-nav.navbar-right > li > a:hover,
.navbar-default .navbar-nav.navbar-right > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_languages > li > a:hover {
    color: #50faff !important; /* เดิม #4ac3ff */

    /* เพิ่มไฮไลท์ให้เมนูขวาด้วย */
    background-color: rgba(255, 255, 255, 0.2) !important; /* แก้ไขจาก 0.1 เป็น 0.15 ค่ายิ่งมากจะยิ่งเข้ม*/
    border-radius: 4px;
}

/* 4. แก้ไขเมนู ภาษา ลงทะเบียน เข้าสู่ระบบ (Bootstrap 3 - nav-pills) */

/* ปรับสีตัวอักษรให้เป็นสีขาวทั้งหมด */
ul.nav-pills > li > a, 
ul#navigationUser > li > a,
.pkp_navigation_languages .dropdown-toggle {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    background-color: transparent !important; /* ลบสีพื้นหลังปุ่มเดิมออก */
}

/* ปรับสีไอคอนลูกศรตรงภาษาให้เป็นสีขาว */
.pkp_navigation_languages .dropdown-toggle .caret {
    border-top-color: #ffffff !important;
}

/* แก้ไขส่วน Hover (เมื่อเอาเมาส์วาง) ให้เปลี่ยนสี */
ul.nav-pills > li > a:hover, 
ul.nav-pills > li > a:focus,
ul#navigationUser > li > a:hover,
.pkp_navigation_languages .dropdown-toggle:hover {
    color: #50faff !important; /* เปลี่ยนสี */  /* เดิม #4ac3ff */
    background-color: rgba(255, 255, 255, 0.2) !important; /* เพิ่มไฮไลท์พื้นหลังบางๆ เวลาชี้ */
    text-decoration: none !important;
}

/* จัดระยะตำแหน่งของเมนูขวาบนให้สมดุล */
.pull-right {
    margin-top: 15px; /* ปรับตัวเลขนี้เพื่อให้มันลงมาอยู่ในแถบสีม่วงสวยๆ */
}

/* เปลี่ยนสี footer */

footer[role="contentinfo"] {

    background-image: url('https://github.com/chaloemwany-prog/thaijo-img2/blob/main/BG.jpg?raw=true');

}

/* 1. บังคับสีข้อความทั่วไปใน Footer */
footer[role="contentinfo"], 
footer[role="contentinfo"] p, 
footer[role="contentinfo"] span, 
footer[role="contentinfo"] div {
    color: #ffffff !important;
}




/* --- ส่วนแก้ไขสำหรับหน้าอ่านไฟล์บทความ (PDF Viewer) --- */

/* 1. ใช้ภาพพื้นหลังแทนรหัสสี และปรับให้แถบแคบลง */
.header_view {
    background-image: url('https://github.com/chaloemwany-prog/thaijo-img2/blob/main/BG.jpg?raw=true') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: auto !important;
    height: 35px !important; /* ความสูงแถบที่แคบลง */
    border-bottom: 1px solid rgba(0,0,0,0.3) !important;
}

/* 2. ซ่อน Logo ในหน้าอ่านไฟล์ */
.header_view .navbar-brand-logo {
    display: none !important;
}

/*/* 3. ปรับชื่อบทความให้เป็นสีขาวและอยู่กึ่งกลางแถบ 35px */
.header_view > a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    font-size: 13px !important; /* ขนาดฟอนต์พอดีกับแถบแคบ */
    line-height: 25px !important; /* ต้องเท่ากับความสูง height ของ header_view เพื่อให้อยู่กึ่งกลาง */
    padding-left: 15px !important;
    display: inline-block !important;
    opacity: 1 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}*/

/* 3. ปรับชื่อบทความให้เป็นสีขาวและบังคับขยับขึ้นชิดขอบบน */
.header_view > a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    font-size: 13px !important; 
    
    /* แก้ไขตรงนี้: ลด line-height และระบุ padding-top แทน */
    line-height: 1.2 !important; /* บีบให้พื้นที่ตัวอักษรแคบที่สุด */
    padding-top: 3px !important;  /* ดันจากขอบบนลงมาแค่ 5px (ปรับเลขนี้ให้ขึ้น-ลงตามชอบ) */
    
    padding-left: 15px !important;
    display: inline-block !important;
    opacity: 1 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    vertical-align: top !important; /* บังคับให้เกาะขอบบนเสมอ */
}

.header_view > a:hover {
    color: #50faff !important;
}

/* 4. ปรับปุ่ม 'กลับไปที่บทความ' ให้สูงเท่ากับแถบ */
.header_view .return {
    color: #ffffff !important;
    line-height: 35px !important;
    font-size: 13px !important;
}

/* 5. ดันเนื้อหา PDF ขึ้นไปชิดแถบใหม่ (35px) */
.obj_article_view_body {
    top: 35px !important;
}

/* 6. ซ่อนริบบิ้นสีดำ */
.header_view .black-ribbon {
    display: none !important;
}


/* ปรับแต่งชื่อบทความในหน้าอ่านไฟล์ PDF ให้เป็นสีขาวและอ่านง่ายขึ้น */

/* 1. บังคับสีตัวอักษรชื่อบทความเป็นสีขาว */
.header_view > a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    /* จัดวางตำแหน่งให้อยู่กึ่งกลางแนวดิ่ง */
    line-height: 15px !important; /*ค่าตรงนี้ ออฟเอาไว้ปรับ ยิ่งน้อย ยิ่งขึ้น*/
    padding-left: 15px !important;
    display: inline-block !important;
    opacity: 0.9; /* ความโปร่งแสงเล็กน้อยเพื่อให้ดูสบายตา */
}

/* 2. เมื่อเอาเมาส์ไปชี้ ให้ชื่อบทความสว่างขึ้นหรือเปลี่ยนสีเล็กน้อย */
.header_view > a:hover, 
.header_view > a:focus {
    color: #50faff !important; /* สีฟ้าสว่างเหมือนกับเมนูหน้าแรก */
    opacity: 1;
    text-decoration: none !important;
}







/* --- บังคับเปลี่ยนไอคอนสี่เหลี่ยมว่างให้เป็นเครื่องหมายถูก [☑] --- */

/* 1. เจาะจงไปที่คลาส glyphicon-check ที่คุณเจอใน Inspect */
.submission_checklists .glyphicon-check,
.glyphicon.glyphicon-check {
    font-family: sans-serif !important; /* สั่งให้เลิกใช้ฟอนต์ไอคอนเดิมที่เสียอยู่ */
    position: relative;
    color: #1e4faf !important; /* สีน้ำเงินตามธีมคุณ */
    font-size: 20px !important;
    vertical-align: middle;
}

/* 2. ล้างตัวสัญลักษณ์เดิมออก และใส่ ☑ ลงไปแทน */
.submission_checklists .glyphicon-check::before,
.glyphicon.glyphicon-check::before {
    content: "\2611" !important; /* รหัส Unicode ของเครื่องหมายถูกในกล่อง */
    display: inline-block;
}

/* 3. จัดระยะห่างระหว่างเครื่องหมายกับข้อความ */
.submission_checklists .item-content {
    margin-left: 10px !important;
    font-family: 'Mitr', sans-serif !important;
}

/* 4. ลบเส้นขอบ li เผื่อมีสี่เหลี่ยมซ้อน (ตามที่เห็นใน li class="list-group-item") */
.submission_checklists .list-group-item {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    /* เหลือไว้แค่เส้นล่างแบ่งรายการ */
    border-bottom: 1px solid #eeeeee !important; 
    padding: 10px 0 !important;
}