/*
Theme Name: SKP Coop Theme
Theme URI: 
Author: Powersite Innovation Group
Description: Custom Fixed Layout Theme for SKP Coop (982px)
Version: 1.0
Text Domain: skpcoop
*/

body {
  background: #7b8c92 url("assets/images/bg.jpg") top center no-repeat;
  /* เปลี่ยนจาก fixed เป็น scroll เพื่อให้พื้นหลังเลื่อนไปพร้อมกับเนื้อหาครับ */
  background-attachment: scroll;
  margin: 0;
  font-family: Tahoma, sans-serif;
  font-size: 13px;
  color: #333;
}

/* ล็อกความกว้าง 982px */
.wrapper {
  width: 982px;
  margin: 0 auto;
  /* เปลี่ยนจากพื้นขาวเป็นโปร่งใส เพื่อให้เห็นพื้นหลังของ body ทะลุเข้ามาในส่วน Header */
  background: transparent;
}

/* ริบบิ้นไว้อาลัย มุมซ้ายบนสุด */
.ribbon-img {
  position: fixed; /* หรือ absolute ถ้าอยากให้อยู่แค่บนสุด */
  top: 0;
  left: 0;
  z-index: 9999;
}

/* ส่วนหัว Header (ความสูงโดยประมาณตามเว็บเดิม) */
#header {
  height: 180px;
  position: relative;
  padding-top: 50px; /* เพิ่ม padding ซ้ายขวาเพื่อให้เนื้อหาห่างจากขอบ */
}

/* โลโก้และชื่อสหกรณ์ */
.logo-area {
  padding-top: 30px; /* ระยะห่างจากขอบบน */
  text-align: right; /* จัดชื่อสหกรณ์ไปด้านขวาตามต้นฉบับ */
}

/* เมนูแนวนอน (ปรับสีให้เหมือนเว็บเดิม) */
#horiz-menu {
  background: #f4f4f4; /* สีเทาอ่อน */
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #e5e5e5 100%
  ); /* ไล่สีเทาแบบมีมิติ */
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0;
  margin-bottom: 10px;
}

#horiz-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#horiz-menu ul li {
  border-right: 1px solid #ccc; /* เส้นคั่นเมนู */
}

#horiz-menu ul li a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  padding: 12px 20px;
}

#horiz-menu ul li a:hover {
  color: #005aa7; /* สีตอนเอาเมาส์ชี้ */
}

/* พื้นหลังสีขาวสำหรับส่วนเนื้อหาด้านล่างเมนู */
#main-wrapper-bg {
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* =========================================
   ตกแต่งเมนูด้านซ้าย (Sidebar Menu)
========================================= */

/* ลบจุดไข่ปลาและระยะห่างออก */
.sidebar-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ใส่เส้นประคั่นแต่ละแถว */
.sidebar-nav-list li {
  border-bottom: 1px dotted #8a97a5;
  margin: 0 !important;
  padding: 0 !important;
}

/* ซ่อนเส้นประที่แถวสุดท้าย */
.sidebar-nav-list li:last-child {
  border-bottom: none;
}

/* ตกแต่งตัวหนังสือลิงก์ให้เป็นสีขาว และลบเส้นใต้ */
.sidebar-nav-list li a {
  display: block;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 8px 15px 8px 25px;
  font-size: 13px;
  position: relative;
  transition: background-color 0.3s;
}

/* สร้างลูกศร (›) นำหน้าข้อความ */
.sidebar-nav-list li a::before {
  content: "\203A";
  position: absolute;
  left: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (เปลี่ยนพื้นหลังและให้ตัวหนังสือเป็นสีส้มทอง) */
.sidebar-nav-list li a:hover {
  background-color: #4b5a6a;
  color: #e88300 !important;
}

/* จัดการซับเมนู (ถ้ามีการสร้างเมนูย่อยซ้อนกัน) */
.sidebar-nav-list ul.sub-menu {
  list-style: none !important;
  padding-left: 15px !important;
  background-color: #4b5a6a;
}

/* =========================================
   ตกแต่งส่วนท้ายเว็บ (Footer)
========================================= */

/* สร้างช่องว่างให้กล่องเนื้อหาด้านบน เพื่อเผยให้เห็นพื้นหลัง Body */
#main-wrapper-bg {
  margin-bottom: 0px; /* ปรับตัวเลขนี้เพิ่ม/ลดได้ เพื่อให้เห็นลายแผนที่โลกกว้างตามต้องการ */
}

/* กล่อง Footer หลัก */
.site-footer {
  /* background: #768d95 url("assets/images/footer-bg.jpg") top center no-repeat; */
  background-color: #ffffff;
  text-align: center;
  font-size: 12px;
  color: #555555;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* พื้นที่ใส่ข้อมูลติดต่อ */
.footer-info {
  padding: 20px;
  line-height: 1.6;
}

.footer-info .th-title {
  font-size: 14px;
  font-weight: bold;
  color: #002244; /* สีกรมท่า */
  margin-bottom: 2px;
}

.footer-info .en-title {
  color: #8c7b70; /* สีน้ำตาลอมเทาแบบต้นฉบับ */
  font-weight: bold;
  margin-bottom: 5px;
}

.footer-info p {
  margin: 0;
}

/* แถบสีเทาด้านล่างสุด */
.footer-bottom-bar {
  background-color: #5d676c; /* สีเทาเข้ม */
  color: #ffffff;
  padding: 8px 10px;
  font-size: 11px;
}
/* =========================================
   ตกแต่ง Block Latest Posts (ภาพกิจกรรม)
========================================= */
/* จัดโครงสร้างให้รูปอยู่ซ้าย ข้อความอยู่ขวา */
.custom-gallery-style.wp-block-latest-posts li {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px dotted #ccc; /* เส้นประใต้ข่าว */
  padding-bottom: 15px;
  margin-bottom: 15px;
}

/* จัดการกล่องรูปภาพ */
/* .custom-gallery-style .wp-block-latest-posts__featured-image {
  width: 100px; /* ขนาดความกว้างรูปภาพ (ปรับได้ตามต้องการ) */
  flex-shrink: 0;
  margin-right: 2px; ระยะห่างระหว่างรูปกับตัวหนังสือ
  margin-bottom: 0;
  /* border: 1px solid #ccc; */
  /* padding: 7px; */
} */

.custom-gallery-style .wp-block-latest-posts__featured-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* จัดการหัวข้อข่าว */
.custom-gallery-style li > a {
  font-size: 13px;
  color: #333;
  text-decoration: none;
  display: block;
  line-height: 1.4;
  margin-bottom: 5px;
}

.custom-gallery-style li > a:hover {
  color: #005aa7;
  text-decoration: underline;
}

/* จัดการวันที่ */
.custom-gallery-style .wp-block-latest-posts__post-date {
  font-size: 11px;
  color: #666;
}
/* จัดการหัวข้อข่าว (พร้อมฟังก์ชันจำกัดความยาว) */
.custom-gallery-style li > a {
    font-size: 13px;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 5px;
    
    /* คำสั่งจำกัดบรรทัดและใส่จุดไข่ปลา (...) */
    display: -webkit-box;
    -webkit-line-clamp: 5; /* กำหนดจำนวนบรรทัดที่ต้องการแสดง (แก้เป็น 3 หรือ 4 ได้ครับ) */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-gallery-style li > a:hover {
    color: #005aa7;
    text-decoration: underline;
}
/* =========================================
   ตกแต่งรายการข่าวแบบข้อความ (ข่าวประชาสัมพันธ์ & กระดานข่าว)
========================================= */

/* ลบระยะห่างและจุดไข่ปลาค่าเริ่มต้น */
.custom-text-news-style {
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 20px 0 !important;
}

/* ใส่เส้นประคั่นแต่ละรายการ และจัดระยะห่าง */
.custom-text-news-style li {
    border-bottom: 1px dotted #cccccc;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

/* ลบเส้นประที่แถวสุดท้ายออก */
.custom-text-news-style li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ตกแต่งหัวข้อข่าว (เปลี่ยนสี ลบเส้นใต้) */
.custom-text-news-style li > a {
    font-size: 13px;
    color: #333333; /* สีเทาเข้ม */
    text-decoration: none !important;
    display: block;
    line-height: 1.5;
    transition: color 0.2s ease;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (เปลี่ยนเป็นสีส้มทองตามธีมเว็บ) */
.custom-text-news-style li > a:hover {
    color: #E88300 !important; 
}

/* ตกแต่งวันที่ให้ตัวเล็กลงและสีอ่อนลง */
.custom-text-news-style .wp-block-latest-posts__post-date {
    display: block;
    font-size: 11px;
    color: #888888;
    margin-top: 3px;
}
/* =========================================
   สไตล์สำหรับ Popup หน้าแรก
========================================= */

/* หน้ากากสีดำโปร่งแสง */
.skp-popup-overlay {
    display: none; /* ซ่อนไว้ก่อน JS จะสั่งเปิด */
    position: fixed;
    z-index: 99999; /* ต้องสูงกว่าริบบิ้นที่เคยทำไว้ */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* สีดำโปร่งแสง 70% */
    justify-content: center;
    align-items: center;
}

/* กล่องเนื้อหา Popup */
.skp-popup-content {
    position: relative;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    max-width: 600px; /* จำกัดความกว้างไม่ให้ล้นจอ */
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    animation: popupFadeIn 0.4s ease; /* เอฟเฟกต์เด้งโชว์ */
}

/* รูปภาพใน Popup */
.skp-popup-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ปุ่มกากบาทปิด (X) */
.skp-popup-close {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #E88300; /* สีส้มทองตามธีม */
    color: white;
    font-size: 24px;
    font-weight: bold;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
}

.skp-popup-close:hover {
    background-color: #002244; /* สีกรมท่าตอนเอาเมาส์ชี้ */
}

/* เอฟเฟกต์ตอนเปิด Popup */
@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}