/* Giao diện trang bài viết theo Tag */
.tag-page {
    padding: 15px 0 38px !important;
    background: url(/Design/img/TieuHocDucThang/dt-back.png) no-repeat;
    background-size: cover;
    background-position: right;
}

    .tag-page > .container > h1,
    .tag-page > .container > h2 {
        position: relative;
        z-index: 1;
        width: fit-content;
        margin: 0 !important;
        text-transform: none !important;
    }

    .tag-page > .container > h1 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #178497 !important;
        font-family: 'Inter_24pt-SemiBold' !important;
        font-size: 13px !important;
        letter-spacing: .08em;
        text-transform: uppercase !important;
    }

        .tag-page > .container > h1::before {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            color: #fff;
            content: "#";
            font-family: 'Montserrat-ExtraBold';
            font-size: 18px;
            letter-spacing: 0;
            border-radius: 12px 12px 12px 4px;
            background: linear-gradient(145deg, #20b7ad, #278bc1);
            box-shadow: 0 6px 13px rgba(34, 153, 172, .22);
        }

    .tag-page > .container > h2 {
        max-width: 800px;
        margin-top: 12px !important;
        color: #173f70 !important;
        font-family: 'Montserrat-ExtraBold' !important;
        font-size: clamp(24px, 3vw, 26px) !important;
        line-height: 1.2 !important;
    }

    .tag-page .my-news-bottom {
        display: block;
        margin-top: 25px;
    }

    .tag-page .bottom-left,
    .tag-page .bottom-right {
        min-width: 0;
    }

    .tag-page .bottom-left {
        padding: 22px;
        border: 1px solid #e0edf3;
        border-radius: 23px;
        background: rgba(255,255,255,.9);
        box-shadow: 0 14px 36px rgba(31, 86, 132, .09);
    }

    .tag-page .p-news-list__type2 {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px !important;
        margin: 0 !important;
    }

    .tag-page .p-news-item__type2 {
        min-width: 0;
        padding: 0 !important;
    }

    .tag-page .p-news-link__type2 {
        display: flex !important;
        height: 100%;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #e1edf3;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(48, 102, 138, .06);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

        .tag-page .p-news-link__type2:hover {
            border-color: #8ed9dc;
            box-shadow: 0 14px 28px rgba(31, 117, 143, .13);
            transform: translateY(-5px);
        }

    .tag-page .p-news-img__type2 {
        height: 176px !important;
        flex: 0 0 176px;
        background: #eaf7fb;
    }

        .tag-page .p-news-img__type2::before {
            position: absolute;
            z-index: 2;
            top: 13px;
            left: 13px;
            padding: 6px 10px;
            color: #fff;
            content: "Bài viết";
            font-family: 'Inter_24pt-SemiBold';
            font-size: 10px;
            border-radius: 999px;
            background: rgba(23, 132, 151, .9);
        }

        .tag-page .p-news-img__type2 .cate {
            display: none;
        }

    .tag-page .p-news-content__type2 {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 15px 16px 16px !important;
    }

    .tag-page .p-news-date__type2 {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        color: #8aa0ae;
        font-family: 'Inter_24pt-Regular';
        font-size: 13px;
    }

        .tag-page .p-news-date__type2::before {
            color: #ef9556;
            content: "\f073";
            font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
            font-size: 11px;
            font-weight: 900;
        }

    .tag-page .p-news-content__type2 .title {
        display: -webkit-box;
        min-height: 51px;
        margin: 0 0 7px !important;
        overflow: hidden;
        color: #173f70 !important;
        font-family: 'Montserrat-Bold' !important;
        font-size: 17px !important;
        line-height: 1.5 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tag-page .p-news-content__type2 .descript {
        display: -webkit-box;
        min-height: 44px;
        margin: 0;
        overflow: hidden;
        color: #728b9b;
        font-family: 'Inter_24pt-Regular';
        font-size: 13px;
        line-height: 1.65;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tag-page .home-news-btn {
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding-top: 13px;
    }

        .tag-page .home-news-btn span {
            color: #ef8650 !important;
            font-family: 'Inter_24pt-SemiBold' !important;
            font-size: 14px !important;
            text-transform: none !important;
        }

        .tag-page .home-news-btn svg {
            width: 17px;
            transition: transform .2s ease;
        }

            .tag-page .home-news-btn svg path {
                fill: #ef8650;
            }

    .tag-page .p-news-link__type2:hover .home-news-btn svg {
        transform: translateX(5px);
    }

    .tag-page .bottom-right {
        position: sticky;
        top: 18px;
        align-self: start;
    }

        .tag-page .bottom-right .side-news-item {
            overflow: hidden;
            border: 1px solid #e0edf3;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 28px rgba(31, 86, 132, .08);
        }

            .tag-page .bottom-right .side-news-item .title {
                padding: 16px 18px !important;
                color: #173f70 !important;
                font-family: 'Montserrat-Bold' !important;
                font-size: 17px !important;
                text-transform: none !important;
                border-bottom: 1px solid #e4eff3;
                background: linear-gradient(90deg, #ecfbfc, #fff);
            }

                .tag-page .bottom-right .side-news-item .title::before {
                    content: "✦";
                    margin-right: 8px;
                    color: #f3a24e;
                }

        .tag-page .bottom-right .content-new-list-side a.item {
            display: flex;
            gap: 10px;
            padding: 12px 14px;
            border-bottom: 1px solid #edf3f5;
        }

            .tag-page .bottom-right .content-new-list-side a.item:last-child {
                border-bottom: 0;
            }

        .tag-page .bottom-right .content-new-list-side .img {
            width: 74px;
            height: 60px;
            flex: 0 0 74px;
            border-radius: 10px;
        }

        .tag-page .bottom-right .content-new-list-side .content {
            min-width: 0;
            margin: 0;
        }

        .tag-page .bottom-right .content-new-list-side h6 {
            color: #ef8650 !important;
            font-size: 10px !important;
        }

        .tag-page .bottom-right .content-new-list-side h3 {
            height: auto !important;
            margin: 3px 0 5px !important;
            color: #385b6d !important;
            font-family: 'Inter_24pt-SemiBold' !important;
            font-size: 13px !important;
            line-height: 1.35 !important;
            -webkit-line-clamp: 2;
        }

    .tag-page .WDateViewNewHome {
        color: #91a6b2;
        font-size: 10px;
    }

    .tag-page .pager {
        margin-top: 21px;
        text-align: center;
    }

        .tag-page .pager a,
        .tag-page .pager span {
            min-width: 32px;
            height: 32px;
            margin: 0 3px;
            padding: 0 8px;
            border-radius: 10px;
            line-height: 32px;
            text-align: center;
        }

        .tag-page .pager span {
            color: #fff;
            background: #168d9d;
        }

        .tag-page .pager a {
            color: #557786;
            background: #edf6f8;
        }

            .tag-page .pager a:hover {
                color: #fff;
                background: #ef8650;
            }

@media (max-width: 1023px) {
    .tag-page .my-news-bottom {
        grid-template-columns: 1fr;
    }

    .tag-page .bottom-right {
        position: static;
    }
}

@media (max-width: 739px) {
    .tag-page {
        padding: 17px 0 34px !important;
    }

        .tag-page > .container > h1 {
            font-size: 11px !important;
        }

            .tag-page > .container > h1::before {
                width: 30px;
                height: 30px;
            }

        .tag-page > .container > h2 {
            margin-top: 10px !important;
            font-size: 23px !important;
            line-height: 1.3 !important;
        }

        .tag-page .my-news-bottom {
            margin-top: 20px !important;
        }

        .tag-page .bottom-left {
            padding: 13px;
            border-radius: 18px;
        }

        .tag-page .p-news-list__type2 {
            grid-template-columns: 1fr;
            gap: 13px !important;
        }

        .tag-page .p-news-link__type2 {
            min-height: 145px;
            flex-direction: row;
        }

        .tag-page .p-news-img__type2 {
            width: 112px;
            height: auto !important;
            min-height: 145px;
            flex: 0 0 112px;
        }

            .tag-page .p-news-img__type2::before {
                top: 9px;
                left: 8px;
                padding: 5px 7px;
                font-size: 0;
            }

            .tag-page .p-news-img__type2::after {
                content: "✦";
                position: absolute;
                z-index: 3;
                top: 10px;
                left: 12px;
                color: #fff;
                font-size: 12px;
            }

        .tag-page .p-news-content__type2 {
            padding: 12px 13px !important;
        }

        .tag-page .p-news-date__type2 {
            margin-bottom: 5px;
            font-size: 10px;
        }

        .tag-page .p-news-content__type2 .title {
            min-height: 0;
            font-size: 15px !important;
            line-height: 1.4 !important;
        }

        .tag-page .p-news-content__type2 .descript {
            min-height: 0;
            font-size: 12px;
            line-height: 1.45;
        }

        .tag-page .home-news-btn {
            padding-top: 8px;
        }

            .tag-page .home-news-btn span {
                font-size: 11px !important;
            }
}