/* หน้ารวมบทความ (ข่าวสาร / บทความ)
   ย้ายมาจาก <style> ที่เคยฝังอยู่ใน resources/views/th/page/news.blade.php */

/* หน้า "ข่าวสาร" - การ์ดข่าวสไตล์โมเดิร์น
               Scoped to .news-modern; palette #062452 / #0a4091 / #17396c */
            .blog-one.news-modern {
                background: #f5f8fc;
                padding: 64px 0 80px;
            }

            .blog-one.news-modern .news-page-head {
                margin: 0 0 34px;
                text-align: center;
            }

            .blog-one.news-modern .news-page-head h1 {
                color: #17396c;
                font-family: 'promptsemibold';
                font-size: 32px;
                line-height: 1.4;
                margin: 0 0 10px;
            }

            .blog-one.news-modern .news-page-head p {
                color: #6b7c96;
                font-family: 'promptregular';
                font-size: 17px;
                line-height: 1.7;
                margin: 0 auto;
                max-width: 640px;
            }

            /* เว้นช่องไฟระหว่างแถว ไม่ให้การ์ดชนกัน */
            .blog-one.news-modern .row > [class*="col-"] {
                padding-bottom: 30px;
            }

            /* ---- การ์ด ---- */
            .blog-one.news-modern .blog-one__single {
                background: #ffffff;
                border: 1px solid rgba(23, 57, 108, .10);
                border-radius: 18px;
                box-shadow: 0 12px 30px -20px rgba(6, 36, 82, .40);
                display: flex;
                flex-direction: column;
                height: 100%;
                margin-bottom: 30px;
                overflow: hidden;
                transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
            }

            /* ---- ภาพ ---- */
            .blog-one.news-modern .blog-one__single-img {
                aspect-ratio: 970 / 680;
                border-radius: 0;
                overflow: hidden;
                position: relative;
            }

            .blog-one.news-modern .blog-one__single-img a {
                display: block;
                height: 100%;
            }

            /* ธีมเดิมซูม 1.2 เท่าพร้อมหมุน 1 องศา แรงเกินไป */
            .blog-one.news-modern .blog-one__single:hover .blog-one__single-img img {
                transform: scale(1.06);
            }

            /* ทับม่านสีเขียวของธีมเดิม ด้วยไล่เฉดน้ำเงินบางๆ ที่ขอบล่าง */
            .blog-one.news-modern .blog-one__single-img::before {
                background: linear-gradient(180deg, rgba(6, 36, 82, 0) 45%, rgba(6, 36, 82, .55) 100%);
                opacity: 1;
                transform: none;
                transition: none;
                z-index: 1;
            }

            .blog-one.news-modern .blog-one__single:hover .blog-one__single-img::before {
                transform: none;
            }

            /* ปุ่มบวกกลางภาพ: จากพลิกขึ้นมาทั้งแผ่น เป็นวงกลมค่อยๆ ปรากฏ */
            .blog-one.news-modern .blog-one__single-img .overlay-icon {
                opacity: 0;
                transform: none;
                transition: opacity .35s ease;
            }

            .blog-one.news-modern .blog-one__single:hover .blog-one__single-img .overlay-icon {
                opacity: 1;
                transform: none;
            }

            .blog-one.news-modern .blog-one__single-img .overlay-icon span {
                align-items: center;
                background: rgba(255, 255, 255, .94);
                border-radius: 50%;
                color: #0a4091;
                display: flex;
                font-size: 22px;
                height: 48px;
                justify-content: center;
                line-height: 1;
                width: 48px;
            }

            /* ---- เนื้อหา ---- */
            .blog-one.news-modern .blog-one__single-content {
                background: transparent;
                border-radius: 0;
                box-shadow: none;
                flex-grow: 1;
                padding: 20px 22px 24px;
                transition: background-color .35s ease;
            }

            .blog-one.news-modern .blog-one__single-content:hover {
                box-shadow: none;
            }

            /* หัวข้อเป็นสีขาวตอน hover จึงต้องเปลี่ยนพื้นหลังการ์ดเป็นน้ำเงินเข้มด้วย
               ไม่งั้นตัวหนังสือขาวจะจมหายไปกับพื้นขาว */
            .blog-one.news-modern .blog-one__single:hover .blog-one__single-content {
                background: #062452;
            }

            .blog-one.news-modern .blog-one__single-content h2 {
                font-family: 'promptsemibold';
                font-size: 17px;
                line-height: 1.65;
                margin: 0;
            }

            .blog-one.news-modern .blog-one__single-content h2 a {
                color: #17396c;
                transition: color .3s ease;
            }

            .blog-one.news-modern .blog-one__single:hover .blog-one__single-content h2 a,
            .blog-one.news-modern .blog-one__single-content h2 a:hover {
                color: #ffffff;
            }

            @media (max-width: 767px) {
                .blog-one.news-modern {
                    padding: 44px 0 24px;
                }

                .blog-one.news-modern .news-page-head {
                    margin-bottom: 26px;
                }

                .blog-one.news-modern .news-page-head h1 {
                    font-size: 26px;
                }

                .blog-one.news-modern .blog-one__single {
                    margin-bottom: 22px;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .blog-one.news-modern .blog-one__single,
                .blog-one.news-modern .blog-one__single-img img,
                .blog-one.news-modern .blog-one__single-img .overlay-icon {
                    transition: none;
                }

                .blog-one.news-modern .blog-one__single:hover {
                    transform: none;
                }

                .blog-one.news-modern .blog-one__single:hover .blog-one__single-img img {
                    transform: none;
                }
            }
