/* หน้าลูกค้าของเรา
   ย้ายมาจาก <style> ที่เคยฝังอยู่ใน resources/views/th/page/customer.blade.php */

/* "ลูกค้าของเรา" (หน้ารวม) - สไตล์โมเดิร์น
       Scoped to .clients-page-modern; palette #F1F5F9 / #0a4091 / #17396c
       กรอบการ์ดโลโก้ใช้รูปแบบเดียวกับ section ลูกค้าของเราในหน้า index.html */
    .company-logos-one.clients-page-modern {
        background: #f1f5f97a;
        padding: 56px 0 72px;
    }

    /* ---- หัวเรื่องของหน้า ---- */
    .company-logos-one.clients-page-modern .clients-page-head {
        margin: 0 auto 12px;
        max-width: 1200px;
        padding: 0 20px;
        text-align: center;
    }

    /* ธีมเดิมตั้ง .carousel ไว้ที่ width: 1150px ตายตัว จอเล็กกว่านั้นจะล้นออกนอกจอ */
    .company-logos-one.clients-page-modern .carousel {
        margin: 0 auto;
        max-width: 1200px;
        padding: 0 20px;
        width: 100%;
    }

    /* ---- หัวข้อหมวดหมู่ ---- */
    .company-logos-one.clients-page-modern .carousel h2 {
        color: #17396c;
        font-family: 'promptsemibold';
        font-size: 21px;
        line-height: 1.5;
        margin: 44px 0 22px;
        padding-bottom: 12px;
        position: relative;
    }

    /* ---- การ์ดโลโก้ ---- */
    .company-logos-one.clients-page-modern .carousel .box {
        float: none;
        margin: 9px 0;
        padding: 0 8px;
        width: auto;
    }

    /* กลุ่ม "ระบบตรวจจับความเร็ว" ตั้ง rows: 1 slick จึงใส่คลาส .slick-slide ลงบน .box เอง
       การสั่ง float: none ด้านบนเลยไปล้าง float ที่ slick ต้องใช้ ทำให้ภาพหลุดแถว */
    .company-logos-one.clients-page-modern .carousel .box.slick-slide {
        float: left;
    }

    .company-logos-one.clients-page-modern .carousel .box p {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 14px;
        box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .22);
        display: flex;
        justify-content: center;
        height: 100%;
        min-height: 104px;
        padding: 16px 18px;
        transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    }

    /* เดิมเงาและมุมมนติดอยู่ที่ตัวรูป ย้ายมาไว้ที่การ์ดแทน */
    .company-logos-one.clients-page-modern .carousel .box p img {
        border-radius: 0;
        box-shadow: none;
        filter: grayscale(0);
        margin: 0;
        max-height: 104px;
        max-width: 100%;
        object-fit: contain;
        opacity: 1;
        transition: filter .35s ease, opacity .35s ease;
        width: auto;
    }

    .company-logos-one.clients-page-modern .carousel .box p:hover img {
        filter: grayscale(1);
        opacity: .65;
    }

    /* ---- ปุ่มเลื่อน ---- */
    .company-logos-one.clients-page-modern .slick-prev,
    .company-logos-one.clients-page-modern .slick-next {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(23, 57, 108, .12);
        border-radius: 50%;
        box-shadow: 0 8px 18px -10px rgba(6, 36, 82, .45);
        display: flex;
        height: 40px;
        justify-content: center;
        transition: background-color .3s ease, border-color .3s ease;
        width: 40px;
        z-index: 2;
    }

    .company-logos-one.clients-page-modern .slick-prev {
        left: -12px;
    }

    .company-logos-one.clients-page-modern .slick-next {
        right: -12px;
    }

    .company-logos-one.clients-page-modern .slick-prev::before,
    .company-logos-one.clients-page-modern .slick-next::before {
        color: #0a4091 !important;
        font-family: inherit;
        font-size: 18px;
        line-height: 1;
        opacity: 1;
    }

    .company-logos-one.clients-page-modern .slick-prev:hover,
    .company-logos-one.clients-page-modern .slick-next:hover {
        background: #0a4091;
        border-color: #0a4091;
    }

    .company-logos-one.clients-page-modern .slick-prev:hover::before,
    .company-logos-one.clients-page-modern .slick-next:hover::before {
        color: #ffffff !important;
    }

    @media (max-width: 767px) {
        .company-logos-one.clients-page-modern {
            padding: 40px 0 52px;
        }

        .company-logos-one.clients-page-modern .clients-page-head h1 {
            font-size: 26px;
        }

        .company-logos-one.clients-page-modern .carousel h2 {
            font-size: 19px;
            margin: 32px 0 18px;
        }

        .company-logos-one.clients-page-modern .carousel .box p {
            min-height: 88px;
        }

        .company-logos-one.clients-page-modern .carousel .box p img {
            max-height: 52px;
        }

        .company-logos-one.clients-page-modern .slick-prev {
            left: -6px;
        }

        .company-logos-one.clients-page-modern .slick-next {
            right: -6px;
        }
    }

    /* จอสัมผัสไม่มี hover จริง แสดงโลโก้เป็นสีเต็มไว้เสมอ */
    @media (hover: none) {
        .company-logos-one.clients-page-modern .carousel .box p:hover img {
            filter: grayscale(0);
            opacity: 1;
        }

        .company-logos-one.clients-page-modern .carousel .box p:hover {
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .company-logos-one.clients-page-modern .carousel .box p,
        .company-logos-one.clients-page-modern .carousel .box p img {
            transition: none;
        }

        .company-logos-one.clients-page-modern .carousel .box p:hover {
            transform: none;
        }
    }