body {
            font-family: 'Roboto', sans-serif;
            background: #f8f9fa;
            color: #222;
            padding: 0;
        }
        a{
            text-decoration:none !important;
        }

        .tag {
            background: #222;
            color: white;
            padding: 6px 12px;
            display: inline-block;
            font-size: 11px;
            text-transform: uppercase;
            margin-bottom: 12px;
            margin-top:10px; 
        }
        .tag a {
            color: white;
        }
        
        .article .tag {
            margin-top: 10px; 
            margin-bottom: 8px; 
            margin-left: 0;
        }

        .article img {
            display: block;
            margin-bottom: 10px; 
        }


        .highlight img {
            display: block; 
            margin-bottom: 10px; 
        }

        .highlight .headline {
            font-size: clamp(18px, 5vw, 22px);
            margin: 12px 0;
        }

        .highlight .summary {
            font-size: clamp(13px, 4vw, 15px);
            color: #666;
        }

        .info {
            font-size: clamp(11px, 3.5vw, 12px);
            color: #aaa;
            margin-top: 12px;
        }

        .article .headline {
            font-size: clamp(13px, 4vw, 15px);
            margin-top: 8px; 
            width: 100%;
            word-wrap: break-word;
        }

        .hot-topics {
            margin-top: 40px;
        }

        .topics {
            border-top: 1px solid #ddd;
            margin-top: 30px;
            padding-top: 20px;
            font-weight: 600;
        }

        .topics span {
            font-size: clamp(13px, 4vw, 15px);
        }

        .pagination {
            margin-top: 30px;
            justify-content: center;
        }

        .container {
            padding-left: 15px;
            padding-right: 15px;
        }

        .col-md-8, .col-md-4, .col {
            padding-left: calc(var(--bs-gutter-x) * .5);
            padding-right: calc(var(--bs-gutter-x) * .5);
        }

        .container > .tag {
            margin-left: 0;
            margin-right: auto;
        }

        .topics .col-category {
            padding: 5px;
            margin-bottom: 10px;
        }


        @media (max-width: 575.98px) {
            .highlight img {
                max-height: 200px;
                object-fit: cover;
            }
            .article img {
                max-height: 200px;
                object-fit: cover;
            }
            .highlight .headline {
                font-size: 18px;
            }
            .article .headline {
                font-size: 14px;
            }
            .hot-topics .col {
                margin-bottom: 20px;
            }
            .topics .col-category {
                width: 100%;
            }
        }

        @media (min-width: 576px) and (max-width: 767.98px) {
            .highlight img {
                max-height: 250px;
                object-fit: cover;
            }
            .article img {
                max-height: 150px;
                object-fit: cover;
            }
            .col-12.col-md-4 .row-cols-sm-2.g-3 > .col {
                padding-left: calc(var(--bs-gutter-x) * .5);
                padding-right: calc(var(--bs-gutter-x) * .5);
            }
            .topics .row-cols-sm-3 > .col-category {
                flex: 0 0 auto;
                width: 33.333333%;
            }
        }

        @media (min-width: 768px) and (max-width: 991.98px) {
            .highlight img {
                max-height: 300px;
                object-fit: cover;
            }
            .hot-topics .col {
                margin-bottom: 20px;
            }
            .topics .row-cols-md-4 > .col-category {
                flex: 0 0 auto;
                width: 25%;
            }
        }

        @media (min-width: 992px) and (max-width: 1199.98px) {
            .highlight img {
                max-height: 350px;
                object-fit: cover;
            }
            .topics .row-cols-lg-5 > .col-category {
                flex: 0 0 auto;
                width: 20%;
            }
        }

        @media (min-width: 1200px) {
            .highlight img {
                max-height: 400px;
                object-fit: cover;
            }
            .topics .row-cols-xl-5 > .col-category {
                flex: 0 0 auto;
                width: 20%;
            }
        }