/* ซ่อน Footer เดิมของ Theme */
.site-info {
    display: none !important;
}

/* ซ่อน Footer ของ Myself Toolkit */
.mhs-site-footer {
    display: none !important;
}

/* 1. เอฟเฟกต์ Fade-in ขณะเลื่อนหน้าจอ (Scroll Reveal) */
.site-content, .hero-section, footer, section {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. เอฟเฟกต์ Hover สำหรับปุ่มและไอคอน (Pop-up) */
a, button, .icon-hover, .ai-icon-box {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

a:hover, button:hover, .icon-hover:hover {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* 3. เอฟเฟกต์ Floating สำหรับองค์ประกอบกราฟิก (ให้ดูลอยได้) */
/* ใช้กับรูปภาพตกแต่งหรือไอคอนกลมๆ ในพื้นหลัง */
.floating-element, img[src*="logo"], i.fab, i.fas {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 4. เอฟเฟกต์แสงเงาที่นุ่มนวลสำหรับ Card (เช่น Testimonials) */
.column-item, article, div[style*="background: #ffffff"] {
    transition: box-shadow 0.3s ease;
}

.column-item:hover, article:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* 5. เอฟเฟกต์ Smooth Scroll สำหรับการเลื่อนหน้าจอ */
html {
    scroll-behavior: smooth;
}

/* 6. ตกแต่งสี Scrollbar ให้เข้ากับแบรนด์ (สีส้ม Social Plus) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #fb8c00; /* สีส้มตามแบรนด์ */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e65100;
}


#masthead.site-header {
    background: linear-gradient(90deg, #0d2142 0%, #1a3a6d 100%) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

#masthead.site-header .menu-item a {
    color: #ffffff !important;
}

/* บังคับให้เมนูทุกตัวและทุกลูกเล่นเป็นสีขาว */
#primary-menu.menu li.menu-item a, 
#primary-menu.menu li.menu-item a span,
#primary-menu.menu li.menu-item.current-menu-item a,
#primary-menu.menu li.menu-item.current-menu-item a span {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 1. ปรับแต่งเมนูทั่วไปให้เป็นสีขาว */
#primary-menu.menu li.menu-item a {
    color: #ffffff !important;
    transition: all 0.3s ease;
    padding: 10px 20px; /* เพิ่มพื้นที่ให้ปุ่มดูสมดุล */
    border-radius: 8px;  /* ทำมุมโค้งมนให้ดู Smart */
}

/* 2. เมื่อเอาเมาส์ไปวาง (Hover) หรือ Focus */
#primary-menu.menu li.menu-item a:hover,
#primary-menu.menu li.menu-item a:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15); /* พื้นหลังขาวจางๆ เวลาชี้ */
    opacity: 0.9;
}

/* 3. ส่วนสำคัญ: เมื่ออยู่ในเมนูนั้น (Current Page) ให้พื้นหลังแตกต่าง */
#primary-menu.menu li.current-menu-item > a,
#primary-menu.menu li.current-page-item > a {
    background-color: #ffc107 !important; /* เปลี่ยน BG เป็นสีเหลืองทอง */
    color: #0b1d3f !important;            /* เปลี่ยนตัวอักษรเป็นน้ำเงินเข้มเพื่อให้ตัดกัน */
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* เพิ่มเงานิดๆ ให้ดูมีมิติ */
}

/* 4. กรณีมีเส้นใต้ของ Current Page (ถ้า Theme มีการใช้อยู่) */
#primary-menu.menu li.current-menu-item > a::before,
#primary-menu.menu li.current-menu-item > a::after {
    display: none !important; /* ปิดเส้นใต้เดิมเพื่อเน้นที่พื้นหลังปุ่มแทน */
}

/* 5. ปรับแต่ง Entry Title (หัวข้อหน้าเว็บ) */
.entry-title {
    margin-top: 30px !important;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    color: #0b1d3f;
    letter-spacing: -1px;
}

/* ปรับจูนสำหรับมือถือ */
@media (max-width: 768px) {
    .entry-title {
        font-size: 32px;
        margin-top: 20px;
        text-align: center;
    }
    /* บนมือถือถ้าเมนูซ้อนกัน อาจจะลด Padding ลง */
    #primary-menu.menu li.menu-item a {
        padding: 8px 15px;
    }
}