﻿/*
 * Extracted from css/widget.css, lines 47463-47555
 * Region label: CI-030
 */
    /* #region CI-030 */
    .ci-030 .card {
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, .1);
        border: 0;
        padding: 12px 12px 20px 12px;
        border: 4px solid #fff !important;
        transition: all .6s ease-in-out;
    }

    @media (max-width: 768px) {
        .ci-030 .card {
            padding: 16px;
        }

        .ci-030 .moblie-line {
            border-bottom: 1px solid #e8e8e8;
            margin-bottom: 16px;
            width: 100%;
        }
    }

    .ci-030 .card .text-title {
        font-family: Krungsri-Condensed-Medium;
        color: #222;
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 0px;
    }

    .ci-030 .card h3 {
        margin-bottom: 16px;
    }

    .ci-030 .card .text-detail {
        color: #5A5A5A;
        font-family: Thongterm-Roman;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 30px;
    }

        .ci-030 .card .text-detail a {
            color: #5A5A5A;
        }

    @media only screen and (max-width: 767px) {
        .container--content .ci-030 .news-item {
            display: none; /* ซ่อนทั้งหมด */
        }

            .container--content .ci-030 .news-item:nth-of-type(1) {
                display: block; /* แสดงเฉพาะอันแรก */
            }
    }

    @media(max-width: 767px) {
        .ci-030 .card .text-title {
            font-family: Krungsri-Condensed-Medium;
            color: #222222;
            font-size: 16px;
            line-height: 26px;
        }

        .ci-030 .card .text-detail {
            color: #5A5A5A;
            font-family: Thongterm-Roman;
            font-size: 16px;
            letter-spacing: 0;
            line-height: 30px;
        }

            .ci-030 .card .text-detail a {
                color: #5A5A5A;
            }

        .ci-030 .card .text-ellipsis-m {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .ci-030 .card .text-ellipsis-2line {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
        }
    }

