.elementor-17265 .elementor-element.elementor-element-bb2e9ec{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17265 .elementor-element.elementor-element-bb2e9ec:not(.elementor-motion-effects-element-type-background), .elementor-17265 .elementor-element.elementor-element-bb2e9ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://siamsmartsolutions.com/wp-content/uploads/2026/05/ChatGPT-Image-Jun-2-2026-01_10_25-PM.png");background-repeat:no-repeat;background-size:cover;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-0fe13b1 */<style>
/* --- โค้ดกล่องหลัก (ลบสี/รูปพื้นหลังออกหมดแล้ว โปร่งใส 100%) --- */
.sss-custom-footer {
    color: #ffffff;
    font-family: 'Sarabun', Arial, sans-serif;
    padding-top: 60px; /* ระยะห่างด้านบน */
    box-sizing: border-box;
    width: 100%;
}

.sss-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 40px 20px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: 40px;
}

/* --- คอลัมน์ที่ 1: แบรนด์ --- */
.sss-footer-logo img {
    filter: 
        drop-shadow(1px 1px 0 #ffffff)
        drop-shadow(-1px -1px 0 #ffffff)
        drop-shadow(1px -1px 0 #ffffff)
        drop-shadow(-1px 1px 0 #ffffff);
    
    max-height: 200px; 
    width: auto;
    display: block;
    margin: 0px 0px 0px -15px; 
    padding: 0px 0px 0px 0px;
}

.sss-logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sss-logo-main {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.sss-logo-sub {
    color: #ffb703; 
    font-weight: 700;
    font-size: 15px;
}

.sss-footer-desc {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #ffffff;
}

/* ─── โซนจัดสไตล์ปุ่ม Social Icons ─── */
.sss-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sss-footer-socials .social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    min-width: 34px;
    padding: 0 10px; 
    border: 1px solid #3d415e;
    border-radius: 17px; 
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
  .sss-footer-socials .social-icon svg {
    fill: #ffffff;
  }

.sss-footer-socials .social-icon.facebook:hover {
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.sss-footer-socials .social-icon.linkedin:hover {
    background-color: #0077b5 !important;
    border-color: #0077b5 !important;
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
}

.sss-footer-socials .social-icon.twitter:hover {
    background-color: #000000 !important;
    border-color: #333333 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sss-footer-socials .social-icon.tiktok:hover {
    background-color: #000000 !important;
    border-color: #FE2C55 !important;
    box-shadow: 0 4px 12px rgba(254, 44, 85, 0.4);
}

.sss-footer-socials .social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border-color: #dc2743 !important;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3);
}

.sss-footer-socials .social-icon.youtube:hover {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.sss-footer-socials .social-icon.line:hover {
    background-color: #06c755 !important;
    border-color: #06c755 !important;
    box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3);
}

.sss-footer-socials .social-icon:hover {
    transform: translateY(-3px);
}

/* --- คอลัมน์ 2 & 3: ลิงก์เมนู --- */
.sss-footer-heading {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 25px 0;
    letter-spacing: 0.5px;
    
    position: relative;
    padding-bottom: 12px;
}

.sss-footer-heading::after {
    content: ""; /* เสกกล่องเปล่าๆ ขึ้นมา */
    position: absolute;
    left: 0; /* ชิดซ้ายสุดของคำ */
    bottom: 0;
    
    width: 40px;
    height: 3px;
    background-color: #007bff; 
    border-radius: 2px;
}

.sss-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sss-footer-links li {
    margin-bottom: 12px;
}

.sss-footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

.sss-footer-links a:hover {
    color: #ffffff;
}

/* --- คอลัมน์ 4: ข้อมูลติดต่อ --- */
.sss-footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sss-footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}

.sss-footer-contact-list .contact-icon {
    color: #ffb703; 
    font-size: 16px;
}

.sss-footer-contact-list .contact-text {
    color: #ffffff;
}

/* --- แถบลิขสิทธิ์ด้านล่างสุด --- */
.sss-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* ปรับเส้นขอบให้ดูนุ่มนวลขึ้นเมื่ออยู่บนรูปภาพ */
    padding: 20px 0;
    font-size: 12px;
}

.sss-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sss-copyright {
    margin: 0;
    color: #ffffff;
}

.sss-bottom-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sss-bottom-links a {
    color: #ffffff;
    text-decoration: none;
}

.sss-bottom-links a:hover {
    color: #ffffff;
}

.sss-bottom-links .divider {
    color: #ffffff;
}

/* Responsive สำหรับจอมือถือ */
@media (max-width: 992px) {
    .sss-footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .sss-footer-container {
        grid-template-columns: 1fr;
    }
    .sss-bottom-container {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}
</style>/* End custom CSS */