/* ==========================================================================
   [2151] CORE-05_Footer-Compact
   ==========================================================================
   ประเภทไฟล์ : CSS
   Location   : Site Wide Header
   ==========================================================================

   --- ไฟล์นี้ทำอะไร ------------------------------------------------------
   จัดส่วนท้ายเว็บให้เป็นกรอบการ์ดเดียว รวมลิงก์หน้ากฎหมาย 4 อันไว้ข้างใน
   แสดงทุกหน้าของเว็บ

   ลิงก์ 4 อัน: แนวทางเว็บไซต์ · กฎและข้อตกลง · นโยบายความเป็นส่วนตัว ·
   ศูนย์ช่วยเหลือ

   ==========================================================================
   ⭐ แนวคิดการออกแบบ
   ==========================================================================
   ใช้โทนไม้อุ่นๆ ให้เข้ากับชื่อเว็บ (ชุมชนแกะดำ / Black Sheep Barn)
   และใช้รูปทรงเดียวกับสารบัญในหน้ากฎและข้อตกลง (สนิปเป็ต 1299)
   เพื่อให้ผู้ใช้จำได้ว่า "กรอบแบบนี้คือทางไปหน้ากฎ"

   ⚠️ ตั้งใจไม่ใช้สีชมพูของแถบนำทางล่างจอ เพราะสองอย่างนี้อยู่ใกล้กันมาก
   ถ้าใช้สีเดียวกันจะแย่งสายตากันเอง และผู้ใช้จะแยกไม่ออกว่าอันไหนคือปุ่มหลัก

   📌 หลักที่ยึด: ส่วนท้ายต้อง "หาเจอเมื่อมองหา" แต่ "ไม่สะดุดตาเมื่อไม่ได้หา"
   จึงทำให้ตัวหนังสือเล็กและสีจาง แล้วไปเน้นตอนเอาเมาส์ชี้แทน

   ⚠️ อย่าเพิ่มสีสันมากกว่านี้ ส่วนท้ายที่สวยเกินจะดึงสายตาออกจากเนื้อหา
   ซึ่งตรงข้ามกับหน้าที่ของมัน

   ==========================================================================
   📌 ประวัติ
   ==========================================================================
   2026-09-13 สร้าง — ลดขนาดตัวหนังสือ · ซ่อนข้อความลิขสิทธิ์ ·
                      จัดกึ่งกลาง · เว้นที่ให้แถบนำทาง · ทำเป็นกรอบการ์ด
   2026-09-24 เพิ่มข้อ 8 — ลิงก์หน้าสถานะเว็บกินเต็มแถว และสีต่างจากอีกสี่อัน
   ========================================================================== */


/* ==========================================================================
   1. พื้นหลังส่วนท้าย
   ==========================================================================
   ⚠️ เว็บนี้มีแถบนำทางลอยอยู่ล่างจอตลอดเวลา (สนิปเป็ต 788)
   ซึ่งลอยทับทุกอย่างที่อยู่ใต้มัน รวมถึงแถบนี้ด้วย

   ถ้าไม่เว้นที่ไว้ ลิงก์จะถูกบังจนกดไม่ได้ โดยเฉพาะบนมือถือที่จอเตี้ยกว่า
   และจะดูเหมือนลิงก์เสีย ทั้งที่ลิงก์ถูกต้องทุกอย่าง

   🔴 ลิงก์ที่กดไม่ได้ ไม่ต่างจากไม่มีลิงก์

   ⚠️ ตัวเลขระยะห่างต้องมากกว่าความสูงของแถบนำทางเล็กน้อย
   ถ้าวันหนึ่งแถบนำทางสูงขึ้น ต้องกลับมาเพิ่มตัวเลขนี้ด้วย
   ========================================================================== */
.site-footer {
    background: transparent !important;
    border-top: none !important;
    padding: 26px 16px 0 !important;
    margin-bottom: 96px !important;
}

@media ( min-width: 769px ) {
    .site-footer {
        margin-bottom: 76px !important;
    }
}


/* ==========================================================================
   2. กรอบการ์ด
   ==========================================================================
   📌 ทำกรอบครอบลิงก์ทั้งชุด แทนการปล่อยลิงก์ลอยอยู่บนพื้นหน้าเว็บ

   เหตุผลไม่ใช่แค่ความสวย — การมีกรอบบอกผู้ใช้ว่า "ของสี่อันนี้เป็นชุดเดียวกัน
   และเป็นคนละเรื่องกับเนื้อหาด้านบน" ซึ่งพื้นที่ว่างเปล่าสื่อไม่ได้ชัดเท่า

   ⚠️ กว้างสุด 560px ตั้งใจ ไม่ให้ยืดเต็มจอบนคอม
   เพราะกรอบที่ยาวเกินไปจะกลายเป็นเส้นขวางหน้าเว็บ แทนที่จะเป็นการ์ด
   ========================================================================== */
.site-footer .site-navigation,
.site-footer nav {
    display: block !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    background: linear-gradient(180deg, #fffdf9 0%, #fdf6ec 100%) !important;
    border: 1px solid #f0e4d2 !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 10px rgba(141, 123, 104, .06) !important;
}


/* ==========================================================================
   3. จัดลิงก์ให้อยู่กึ่งกลาง
   ==========================================================================
   ⚠️ ทำไมต้องสั่ง ทั้งที่ตอนแรกมันก็ดูปกติ

   เดิมส่วนท้ายวางของสองชิ้นไว้คนละฝั่ง คือลิงก์อยู่ซ้าย ลิขสิทธิ์อยู่ขวา
   ด้วยการสั่งให้ดันออกจากกันให้สุดขอบทั้งสองข้าง

   พอซ่อนข้อความลิขสิทธิ์ในข้อ 5 เหลือของชิ้นเดียว แต่คำสั่งดันออกยังอยู่
   ลิงก์จึงไปกองอยู่ตำแหน่งเดิมที่เคยแบ่งกับอีกชิ้น ดูเหมือนเยื้องไปข้างหนึ่ง

   📌 ถ้าวันหนึ่งเอาข้อความลิขสิทธิ์กลับมา ต้องกลับมาลบบล็อกนี้ด้วย
   ========================================================================== */
.site-footer .footer-inner,
.site-footer > .container {
    justify-content: center !important;
    text-align: center !important;
}

.site-footer .site-navigation ul,
.site-footer .menu {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.site-footer .site-navigation li,
.site-footer .menu li {
    margin: 0 !important;
    list-style: none !important;
}


/* ==========================================================================
   4. ลิงก์ — เม็ดกลม
   ==========================================================================
   📌 ทำเป็นเม็ดแทนตัวหนังสือเปล่า เพราะเพิ่มพื้นที่กดบนมือถือ
   ตัวหนังสือ 12px เปล่าๆ กดยากมากด้วยนิ้ว ต้องเล็งให้พอดีเป๊ะ
   การมีขอบเม็ดทำให้กดพลาดได้นิดหน่อยแต่ยังโดนอยู่
   ========================================================================== */
.site-footer .site-navigation a,
.site-footer .menu a,
.site-footer nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #8d7b68 !important;
    background: #ffffff !important;
    border: 1px solid #f0e4d2 !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    text-decoration: none !important;
    transition: all .18s ease !important;
}

.site-footer .site-navigation a:hover,
.site-footer .menu a:hover,
.site-footer nav a:hover {
    color: #5a4634 !important;
    background: #fff8ee !important;
    border-color: #e0cdb2 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(141, 123, 104, .13) !important;
}


/* ==========================================================================
   5. ซ่อนข้อความ All rights reserved
   ==========================================================================
   โครงจริงที่ธีมสร้างออกมาคือ
       <div class="copyright show"><p>All rights reserved</p></div>

   📌 คำว่า show ต่อท้ายเป็นตัวที่ธีมใช้สลับเปิด/ปิดข้อความนี้
   ถ้าตั้ง Footer Credit เป็น Hide ในหน้าปรับแต่งแล้วบันทึกจริง
   คลาสนั้นจะเปลี่ยนไปเอง และบล็อกนี้จะไม่จำเป็นอีก

   ⭐ ถ้าปิดที่หน้าปรับแต่งได้สำเร็จ ให้ลบบล็อกนี้ทิ้ง
   แก้ที่ต้นทางดีกว่าซ่อนด้วย CSS เสมอ เพราะการซ่อนคือของยังอยู่ในหน้าเว็บ
   ยังถูกส่งไปหาเบราว์เซอร์ และโปรแกรมอ่านหน้าจอบางตัวยังอ่านออกเสียงอยู่

   ⚠️ ถ้าวันหนึ่งอยากใส่ข้อความลิขสิทธิ์กลับมา อย่าลืมว่ามีบรรทัดนี้ซ่อนไว้อยู่
   ไม่งั้นจะใส่แล้วไม่ขึ้น แล้วหาสาเหตุไม่เจอ
   ========================================================================== */
.site-footer .copyright,
.copyright.show {
    display: none !important;
}


/* ==========================================================================
   6. บนมือถือ — ตาราง 2 ช่อง
   ==========================================================================
   ⚠️ ปัญหาเดียวกับสารบัญในหน้ากฎ: ชื่อลิงก์ยาวไม่เท่ากันเลย
   ตั้งแต่ "ศูนย์ช่วยเหลือ" ไปจนถึง "นโยบายความเป็นส่วนตัว"
   พอจอแคบ เม็ดจึงตัดบรรทัดไม่เท่ากัน เกิดช่องว่างไม่สม่ำเสมอ ดูรก

   ✅ ใช้ตารางสองช่อง ทุกเม็ดกว้างเท่ากันและขอบตรงกันทุกแถว
   ได้เป็นตารางสองคูณสองพอดีสำหรับลิงก์สี่อัน ซึ่งลงตัวที่สุด

   📌 ใช้รูปแบบเดียวกับสารบัญในหน้ากฎ เพื่อให้สองที่นี้ดูเป็นระบบเดียวกัน
   ========================================================================== */
@media ( max-width: 600px ) {

    .site-footer .site-navigation ul,
    .site-footer .menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .site-footer .site-navigation a,
    .site-footer .menu a,
    .site-footer nav a {
        font-size: 11.5px !important;
        padding: 10px 8px !important;
        text-align: center !important;
    }

    .site-footer .site-navigation,
    .site-footer nav {
        padding: 12px 12px !important;
        border-radius: 14px !important;
    }
}


/* ==========================================================================
   7. เส้นคั่นสั้นๆ เหนือกรอบ (ทางเลือก)
   ==========================================================================
   ⭐ ถ้าไม่ชอบ ลบบล็อกนี้ทิ้งได้เลย ไม่กระทบอย่างอื่น

   ทำเป็นเส้นสั้นกลางจอ แทนเส้นยาวเต็มความกว้าง เพราะเส้นเต็มความกว้าง
   จะตัดหน้าเว็บออกเป็นสองส่วนชัดเจนเกินไป จนส่วนท้ายดูเหมือนคนละหน้า
   ========================================================================== */
.site-footer::before {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: #e8d7bf;
}

/* ==========================================================================
   8. ลิงก์หน้าสถานะเว็บ — กินเต็มแถว (เพิ่ม 24 ก.ย. 2569)
   ==========================================================================
   ลิงก์นี้ไม่ได้อยู่ในไฟล์นี้ — เพิ่มเป็นรายการในเมนูท้ายเว็บ
   ไฟล์นี้แค่จับมันจากที่อยู่ปลายทาง แล้วจัดหน้าตาให้

   🔴 ทำไมต้องกินเต็มแถว
   บนมือถือลิงก์สี่อันเดิมเรียงเป็นตาราง 2×2 พอดี (ดูข้อ 6)
   เพิ่มอันที่ห้าเข้าไปเฉยๆ จะเหลือเม็ดเดี่ยวค้างแถวล่าง ดูเหมือนตกหล่น

   ⭐ ทำไมต้องสีต่างจากอีกสี่อัน
   สี่อันบนพาไปหน้าในเว็บเรา อันนี้พาออกไปเว็บข้างนอก
   คนกดควรรู้ตัวก่อนกด ไม่ใช่กดแล้วงงว่าทำไมหน้าตาเปลี่ยนไปหมด

   📌 จับจากที่อยู่ปลายทาง ไม่ได้จับจากลำดับ
   ถ้าวันหนึ่งสลับลำดับเมนู หรือเพิ่มลิงก์อื่นต่อท้าย บล็อกนี้ยังจับถูกตัวเสมอ

   📌 ใช้ทั้งสองคำสั่งคู่กันโดยตั้งใจ
   ช่องกว้างตาราง ใช้ได้บนมือถือซึ่งเป็นตาราง · ช่องกว้างเต็ม ใช้ได้บนคอมซึ่งเรียงแถว
   คำสั่งที่ไม่ตรงกับแบบของจอนั้น เบราว์เซอร์จะข้ามไปเอง ไม่มีผลข้างเคียง

   ⚠️ ถ้าวันหนึ่งย้ายหน้าสถานะไปใช้โดเมนตัวเอง (แผนเสียเงินของ UptimeRobot)
   ต้องกลับมาแก้คำว่า stats.uptimerobot.com ทั้งสองจุดในบล็อกนี้ด้วย
   ไม่งั้นลิงก์จะกลับไปเป็นเม็ดเดี่ยวค้างแถวล่างแบบเงียบๆ
   ========================================================================== */
.site-footer .site-navigation li:has(> a[href*="stats.uptimerobot.com"]),
.site-footer .menu li:has(> a[href*="stats.uptimerobot.com"]) {
    grid-column: 1 / -1 !important;
    flex-basis: 100% !important;
}

.site-footer .site-navigation a[href*="stats.uptimerobot.com"],
.site-footer .menu a[href*="stats.uptimerobot.com"],
.site-footer nav a[href*="stats.uptimerobot.com"] {
    color: #5a4634 !important;
    background: #fff8ee !important;
    border-color: #e0cdb2 !important;
    font-weight: 600 !important;
}