/* start: articleListST1  */
.articleListST1{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
    .articleListST1 .articleListST1__item{
        width: calc(50% - 10px);
        cursor: pointer;    
        position: relative;
        margin-bottom: 10px;
    } 
        .articleListST1 .articleListST1__item .articleListST1__item-left{
            width: 40%;
            float: left;
        }
        .articleListST1 .articleListST1__item .articleListST1__item-right{
            width: calc(60%);
            float: right;
            padding: 8px 16px; 
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
            .articleListST1 .articleListST1__item .articleListST1__item-right .articleListST1__item-right-title{
                margin-bottom: 10px;
                font-size: var(--size-title-2);
                font-weight: 700;
                -webkit-line-clamp: 2;
            }
            .articleListST1 .articleListST1__item .articleListST1__item-right .articleListST1__item-right-description{
                -webkit-line-clamp: 2;   
            }
            .articleListST1 .articleListST1__item .articleListST1__item-right .articleListST1__item-right-bot{
                display: flex;
                margin-top: auto;
                justify-content: space-between;
            }
        
        .articleListST1 .articleListST1__item .line-horizontal{ 
            position: absolute;
            bottom: -25px;
        }
/* end: articleListST1  */

/* start: articleDetail  */
.articleDetail{}
    .articleDetail .articleDetail__action{
    }
    .articleDetail .articleDetail__body{
        display: flex;
    }
        .articleDetail .articleDetail__body .articleDetail__body-left{ 
            margin-right: 64px;
            height: 100%;
        }
        .articleDetail .articleDetail__body .articleDetail__body-right{ width: 100%;}

    .articleDetail .articleDetail__title{
        font-size: var(--size-title-1);
        margin: 10px 0;
    }

    .articleDetail .articleDetail__barAtrr{
        display: flex;
        justify-content: space-between;
        float: left;
        width: 100%;
        margin-bottom: 15px;
    }
        .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-left{
            display: flex;
            gap: 20px;
            float: left;
            padding-left: 20px;
            border-left: 3px solid var(--color-primary-1);
        }
            .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-left .articleDetail__barAtrr-left-item{
                display: flex;
                gap: 5px;
                align-items: center;
                float: left;
                color: #4f5052;
                font-size: 15px;
                cursor: pointer;
            }
            .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-left .articleDetail__barAtrr-left-item:hover{
                color: var(--color-primary-1);
            }
                .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-left .articleDetail__barAtrr-left-item .articleDetail__left-item-ico{
                    float: left;
                    font-size: 20px;
                }
                .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-left .articleDetail__barAtrr-left-item .articleDetail__left-item-txt{
                    float: left;
                }

        .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-right{
            display: flex;
            align-items: center;
            gap: 20px;
            float: left;
            color: #4f5052;
        }
            .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-right .articleDetail__barAtrr-right-item{
                display: flex;
                gap: 5px;
                align-items: center;
                float: left;
                padding: 2px;
                cursor: pointer;
            }
            .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-right .articleDetail__barAtrr-right-item:hover{
                background-color: var(--color-primary-1);
                border-radius: 50%;
            }
                .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-right .articleDetail__barAtrr-right-item .articleDetail__right-item-ico{
                    float: left;
                    font-size: 20px;
                }
                .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-right .articleDetail__barAtrr-right-item .articleDetail__right-item-txt{
                    float: left;
                }
            
                .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-right .articleDetail__barAtrr-right-item .articleDetail__right-item-img{
                    width: 35px;
                    height: 35px;
                    object-fit: cover;
                    filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.4));
                }   
        
        

    .articleDetail .articleDetail__description{
        float: left;
        width: 100%;
        color: #000;
        font-size: 16px;
        font-style: italic; 
        font-weight: 700;
        line-height: normal;
        margin-bottom: 30px; 
        line-height: 165%;
        text-align: justify;
    }
    .articleDetail .articleDetail__avt{
        float: left;
        width: 100%;
    }
        .articleDetail .articleDetail__avt .articleDetail__avt-description{
            float: left;
            width: 100%;
        }
    .articleDetail .articleDetail__content{
        float: left;
        width: 100%;
        font-size: 16px;
        text-align: justify;
        font-family: var(--font-family), sans-serif !important;
    }
    .articleDetail .articleDetail__content :is(p, span, div, li, h1, h2, h3, h4, h5, h6) {
        /* font-size: 16px; */
        text-align: justify;
        font-family: var(--font-family), sans-serif !important;
    }
/* end: articleDetail  */
/* start: articleSection - tin moi nhat  */
.articleSection{
    width: 100%;
}
    .articleSection .articleSection__top{
        width: 100%;
        color: #000; 
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.15px;
        text-transform: uppercase;
        position: relative; 
        margin-bottom: 16px;
        box-sizing: border-box;
    }
    .articleSection .articleSection__body{ 
        padding-left: 0;
    }
    .articleSection ul.articleSection__body{ 
        padding-left: 15px;
    }
        /* dang item co img, title, seemore  */
        .articleSection .articleSection__body .articleSection__body-item{
            cursor: pointer;
            margin-bottom: 20px;
        }
            .articleSection .articleSection__body .articleSection__body-item .articleSection__body-item-img{ }
            .articleSection .articleSection__body .articleSection__body-item .articleSection__body-item-content{
                padding: 12px;
                display: flex;
                gap: 20px;
                transition: background 0.35s ease;
            }
            /* hover  */
            .articleSection .articleSection__body .articleSection__body-item:hover .articleSection__body-item-content{
                background-color: var(--color-primary-1);
                color: white;
            }
                /* hover  */
                .articleSection .articleSection__body .articleSection__body-item:hover .articleSection__body-item-content .dateCreateST2 .dateCreateST2__month{ 
                    color: var(--color-primary-1);
                    background-color: var(--color-primary-4);
                }  
                .articleSection .articleSection__body .articleSection__body-item .articleSection__body-item-content .articleSection__body-item-content-title{ 
                     width: calc(100% - 60px); 
                }  
                    .articleSection .articleSection__body .articleSection__body-item .articleSection__body-item-content .articleSection__body-item-content-title .articleSection__body-item-content-title-title{  
                        color: var(--color-primary-1);
                        font-size: var(--size-title-2);
                        font-weight: 700;
                        transition: color 0.35s ease; 
                        -webkit-line-clamp: 2; 
                    }  
                    /* hover  */
                    .articleSection .articleSection__body .articleSection__body-item:hover .articleSection__body-item-content .articleSection__body-item-content-title .articleSection__body-item-content-title-title{  
                        color: white;
                    }  
                    .articleSection .articleSection__body .articleSection__body-item .articleSection__body-item-content .articleSection__body-item-content-title .articleSection__item-content-title-seeMore{ 
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }  
        /* dang item chi co text  */
        .articleSection .articleSection__body .articleSection__body-text{
            cursor: pointer;
            margin-bottom: 10px;
        }
        .articleSection .articleSection__body .articleSection__body-text:hover{
            color: var(--color-primary-1);
        }
            .articleSection .articleSection__body .articleSection__body-text span{
                -webkit-line-clamp: 2;
                font-size: 14px;
            }
            
    .articleSection .articleSection__bodyST2{   
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 0px 30px;
    } 
        .articleSection .articleSection__bodyST2 .articleSection__body-item .articleSection__body-item-content{
            padding: 8px;
        }
            .articleSection .articleSection__body .articleSection__body-item .articleSection__body-item-content .articleSection__body-item-content-title .articleSection__body-item-content-title-title{
                color: initial;
            }
/* end: articleSection - tin moi nhat  */

/* start: articleRelated - tin lien quan  */
.articleRelated{
    padding: 15px;
    background-color: #FAFAFA;
    border:1px solid #C7C7C7;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}
    .articleRelated .articleRelated__top{
        font-weight: 700;
        font-size: var(--size-title-1);
        margin-top: 7px;
        margin-bottom: 10px;
    }
    .articleRelated .articleRelated__first{
        border:1px solid #C7C7C7;
        display: flex;
        border-radius: 4px; 
        margin-bottom: 20px; 
        cursor: pointer;
        transition: color 0.35s ease, background 0.35s ease;
    }
        .articleRelated .articleRelated__first .articleRelated__first-left{
            aspect-ratio: 1.5;
            width: 300px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        } 
        .articleRelated .articleRelated__first .articleRelated__first-right{
            width: calc(100% - 300px);
            padding: 0 15px; 
            box-sizing: border-box;
            text-align: justify;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            align-content: center;
            padding-left: 32px;
            padding-right: 12px;
            transition: color 0.35s ease, background 0.35s ease;
        }
        /* hover  */
        .articleRelated .articleRelated__first:hover .articleRelated__first-right{
            background: var(--color-primary-1);
        }
            .articleRelated .articleRelated__first .articleRelated__first-right .articleRelated__first-right-title{
                font-size: var(--size-title-2);
                font-weight: 700;
                margin-bottom: 8px;
            }
            .articleRelated .articleRelated__first:hover .articleRelated__first-right .articleRelated__first-right-title{
                color: white;
            }
            .articleRelated .articleRelated__first .articleRelated__first-right .articleRelated__first-right-description{
                color: gray;
            }
            /* hover  */
            .articleRelated .articleRelated__first:hover .articleRelated__first-right .articleRelated__first-right-description{
                color: white;
            }
            .articleRelated .articleRelated__first .articleRelated__first-right .articleRelated__first-right-seeMore{
                color: var(--color-primary-1);
                font-size: 14px;
            }
            /* hover  */
            .articleRelated .articleRelated__first:hover .articleRelated__first-right .articleRelated__first-right-seeMore{
                color: white;
            }
    .articleRelated .articleRelated__list{
        padding-left: 0;
        border-top:1px solid #C7C7C7;
    }
        .articleRelated .articleRelated__list > div{
            transition: color 0.35s ease, background
        }
        .articleRelated .articleRelated__list > div:hover{
            background-color: #f2f6ff;
            color: var(--color-primary-1);
            cursor: pointer;
            border-radius: 5px;
        }
        .articleRelated .articleRelated__list li{ 
            cursor: pointer;
        }
        .articleRelated .articleRelated__list li span{
         }
        .articleRelated .articleRelated__list li:hover span{
            color: var(--color-primary-1);
         }

/* end: articleRelated - tin lien quan  */


/* start: catalogListST2 */
.catalogListST2{
    display: flex;
    flex-wrap: wrap;

}
    .catalogListST2 .catalogListST2__item{
        display: flex;
        width: 50%;
    }
    .catalogListST2 .catalogListST2__item.reverse{
        flex-direction: row-reverse;
    }
        .catalogListST2 .catalogListST2__item .catalogListST2__item-col{
            width: 50%;
            color: var(--color-primary-1);
            text-align: center;
            align-content: center;
            background: #f1f1f1;
            cursor: pointer;
            transition: all 0.35s ease;
        }
        /* hover */
        .catalogListST2 .catalogListST2__item .catalogListST2__item-col:hover{
            background: var(--color-primary-1);
            color: white; 
        }
            .catalogListST2 .catalogListST2__item .catalogListST2__item-col .buttonST3{ 
                display: none;
            }
            /* hover  */
            .catalogListST2 .catalogListST2__item .catalogListST2__item-col:hover .buttonST3{ 
                display: inline-block;
            } 
/* end: catalogListST2 */

/* start: blockCommentST1 */
.blockCommentST1{}
    .blockCommentST1 .blockCommentST1__top{
        float: left;
        display: flex;
        align-items: center;
        font-size: var(--size-title-1);
        font-weight: 700;
        gap: 10px;
    }
    .blockCommentST1 .blockCommentST1__mid{}
    .blockCommentST1 .blockCommentST1__bot{
        display: flex;
        flex-direction: column;
    }
        .blockCommentST1 .blockCommentST1__bot .blockCommentST1__bot-content{ 
        }
/* end: blockCommentST1 */

/* start: blockRating */
.blockRating{
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}
    .blockRating .blockRating__stars{
        display: flex;
    }
        .blockRating .blockRating__stars .blockRating__stars-star{
            color:#d0d0d0;
        }
        .blockRating .blockRating__stars .blockRating__stars-star.active{
            color:#FDE16D; 
            cursor: pointer;
        }
        .blockRating .blockRating__stars .blockRating__stars-star.activeTmp{
            color:#ffc107; 
            cursor: pointer;
        }
        .blockRating .blockRating__stars .blockRating__stars-star::before{
            content: '\2605';
            width: 30px;
            height: 30px;
            font-size: 30px;
        }
/* end: blockRating */

.articleAction{ 
    padding: 8px 8px 8px 8px;
    border: 1px solid #ebebeb;
    border-radius: 8px;

    position: sticky;
    top: 50px;
    width: 32px;
    gap: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    .articleAction .articleAction__item{  
        border: none;
        position: relative; 
        cursor: pointer;
        background: white;
    }
        .articleAction .articleAction__item > img{
            width: 28px;
        }
        .articleAction .articleAction__item .articleAction__item-ico{
            padding: 4px;
            font-size: 18px;
            border: 1px solid #939598;
            border-radius: 50%;
            color: #939598;
        }
        .articleAction .articleAction__item .articleAction__item-ico:hover{
            color: #000;
        }

/* start: docList */
.docList{}
    .docList .docList__top{
        margin-bottom: 20px;
    }
    .docList .docList__mid{
        margin-bottom: 20px;
    }
    .docList .docList__bot{
        display: flex;
        justify-content: space-between;
    }
/* end: docList */
/* start: blockDocDetail */
.blockDocDetail{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
    .blockDocDetail .blockDocDetail__top{
        color: var(--lightdefaulthoverffffff, #FFF);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -0.2px;
        width: 100%;
        margin: 12px 0px;
        text-transform: uppercase;
        background-color: var(--color-primary-1);
        padding: 12px 0;
        text-align: center !important;
    }
    .blockDocDetail .blockDocDetail__mid{ 
        padding-bottom: 16px;
    }
        .blockDocDetail .blockDocDetail__mid .blockDocDetail__mid-content{
            display: flex;
            padding: 10px;
        }
            .blockDocDetail .blockDocDetail__mid .blockDocDetail__mid-content .blockDocDetail__mid-content-left{
                width: calc(30%);
                box-sizing: border-box;
                font-weight: 700;
            }
            .blockDocDetail .blockDocDetail__mid .blockDocDetail__mid-content .blockDocDetail__mid-content-right{
                width: calc(70%);
            }
                .blockDocDetail .blockDocDetail__mid .blockDocDetail__mid-content .blockDocDetail__mid-content-right .blockDocDetail__content-right-attachFile{
                    display: flex;
                    align-items: center; 
                    gap: 10px;
                    margin-bottom: 10px;
                }
/* end: blockDocDetail */

/* start: imageGallery  */
.imageGallery{ 
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    margin-bottom: 20px;
}
    .imageGallery .imageGallery__item{
        cursor: pointer;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; 
    } 
        .imageGallery .imageGallery__item .bg-img{
            position:relative; 
        }
    .imageGallery .imageGallery__item:hover{
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
    .imageGallery .imageGallery__item:hover{
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
/* end: imageGallery  */

/* start: lightBox  */
.lightBox{
    position: fixed;
    left: 0;right: 0;top: 0;bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
    .lightBox .lightBox__shadow{
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        left: 0;right: 0;top: 0;bottom: 0;
        z-index: 2; 
    }
    .lightBox .lightBox__btn-cancel{ 
        position: absolute; 
        top: 10px;right: 10px;
        z-index: 2; 
    }
        .lightBox .lightBox__btn-cancel span{
            font-size: 40px;
            cursor: pointer;
            color: white;
        }
        .lightBox .lightBox__btn-cancel span:hover{ 
            opacity: 0.6;
        }
    .lightBox .lightBox__content{ 
        z-index: 3;
        width: 50%;
        aspect-ratio: 1.5;
    }
        .lightBox .lightBox__content .lightBox__content-item{
            text-align: center;
        }
            .lightBox .lightBox__content .lightBox__content-item .lightBox__content-item-img{
                width: 100%;
                height: auto;
                aspect-ratio: 1.5;
            }
            .lightBox .lightBox__content .lightBox__content-item .lightBox__content-item-description{
                color: white;
                margin-top: 20px;
                font-size: 18px; 
            }
/* end: lightBox  */

/* start: imageGalleryList */
.imageGalleryList{  
    display: grid;
    gap: 15px;
    grid-template-columns: calc(100% / 3 - 10px) calc(100% / 3 - 10px) calc(100% / 3 - 10px);
} 
        .imageGalleryList .imageGalleryList__col-item{
            width: 100%;
            cursor: pointer;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
            aspect-ratio: 1.5;
        } 
            .imageGalleryList .imageGalleryList__col-item .imageGalleryList__col-item-shadow{
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.5);
                color: white;
                z-index: 2; 
                display: flex; 
                justify-content: end;
                flex-direction: column;
            }
            /* hover  */
            .imageGalleryList .imageGalleryList__col-item:hover .imageGalleryList__col-item-shadow{
                display: flex;
            } 
                .imageGalleryList .imageGalleryList__col-item .imageGalleryList__col-item-shadow .imageGalleryList__col-item-shadow-title{ 
                    font-size: var(--size-title-1);
                    font-weight: 600;
                    padding: 0px 16px;
                }
                .imageGalleryList .imageGalleryList__col-item .imageGalleryList__col-item-shadow .imageGalleryList__col-item-shadow-bot{ 
                    display: flex;
                    justify-content: space-between;
                    padding: 0 16px;
                }
            .imageGalleryList .imageGalleryList__col-item .imageGalleryList__col-item-img{
            }
/* end: imageGalleryList  */



/* start: articleListST2 - giao dien dan sach video */
.articleListST2{
    display: grid;
    grid-template-columns: calc(25% - 15px) calc(25% - 15px) calc(25% - 15px) calc(25% - 15px);
    gap: 15px;
}
    .articleListST2 .articleListST2__item{
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }  
    /* hover  */
    .articleListST2 .articleListST2__item:hover{
        background: var(--color-primary-1);
        color: white !important;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }  
        .articleListST2 .articleListST2__item .articleListST2__item-img{
            position:relative;
        }
            .articleListST2 .articleListST2__item .articleListST2__item-img .articleListST2__item-ico-play{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 48px;
                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                color: var(--color-primary-1);
            }
        .articleListST2 .articleListST2__item .articleListST2__item-content{
            box-sizing: border-box;
            padding: 10px;
        } 
            .articleListST2 .articleListST2__item .articleListST2__item-content .articleListST2__item-content-title{
                font-weight: 700;
                font-size: var(--size-title-2);
                -webkit-line-clamp: 2; 
            }
            .articleListST2 .articleListST2__item .articleListST2__item-content .articleListST2__item-content-bot{
                display: flex;
                justify-content: space-between;
            }
/* end: articleListST2 */


/* start: articleListST3 - giao dien danh sach Audio  */

.articleListST3{
}
    .articleListST3 .articleListST3__item{
        display: flex; 
        justify-content: space-between;
        padding-right: 20px;
        align-items: center;
        gap: 20px;
        cursor: pointer;
    } 
    /* hover  */
    .articleListST3 .articleListST3__item:hover{ 
        color: var(--color-primary-1) !important;
    } 
        .articleListST3 .articleListST3__item .articleListST3__item-title{
            font-weight: 700;
            -webkit-line-clamp: 1;
            font-size: var(--size-title-1);    
        } 
        .articleListST3 .articleListST3__item .articleListST3__item-datecreate{ 
            margin-left: auto;
            display: flex;
            min-width: 162px;
        } 
        .articleListST3 .articleListST3__item .articleListST3__item-duration{ 
            min-width: 162px;
            display: flex;
        } 
        .articleListST3 .articleListST3__item .articleListST3__item-play{     
            width: 0;
            height: 0;
            display: block;
            border-left: 24px solid var(--color-primary-1);    /* màu + hình tam giác */
            border-top: 15px solid transparent; /* cạnh trên trong suốt */
            border-bottom: 15px solid transparent; /* cạnh dưới trong suốt */ 
        }


/* end: articleListST3 - giao dien danh sach Audio  */

/* start: articleSame */
.articleSame{
    width: 100%;
} 
    .articleSame .articleSame__top{ 
        width: 100%;
        color: #000;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.15px;
        text-transform: uppercase;
        position: relative;
        margin-bottom: 16px;
        box-sizing: border-box;
    }
    .articleSame .articleSame__pnl{
        display: grid;
        grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px);
        gap: 15px;
    }
        .articleSame .articleSame__pnl .articleSame__pnl-item{
            cursor: pointer;
            transition: all 0.35s ease;
            padding-bottom: 10px;
        }
        /* hover  */
        .articleSame .articleSame__pnl .articleSame__pnl-item:hover{ 
            background: var(--color-primary-1);
            color: white !important;
        }
            .articleSame .articleSame__pnl .articleSame__pnl-item .articleSame__pnl-item-img{
                
            }
            .articleSame .articleSame__pnl .articleSame__pnl-item .articleSame__pnl-item-title{
                -webkit-line-clamp: 2;  
                text-align: justify; 
                font-weight: 600;
                margin-bottom: 10px;
                padding: 0px 10px;
            }
            .articleSame .articleSame__pnl .articleSame__pnl-item .articleSame__pnl-item-bot{ 
                display: flex;
                justify-content: space-between;
                padding: 0px 10px;
            }
/* end: articleSame */

/* start: articleSameST2 */
.articleSameST2{
    margin-bottom: 30px;
}
    .articleSameST2 .articleSameST2__top{
        width: 100%;
        color: #000;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.15px;
        text-transform: uppercase;
        position: relative;
        margin-bottom: 16px;
        box-sizing: border-box;
    }
    .articleSameST2 .articleSameST2__pnl{ }
        .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item-hight-light{
            cursor: pointer; 
            transition: all 0.35s ease;
            padding-bottom: 8px;
            margin-bottom: 10px;
         }
        .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item-hight-light:hover{
            background-color: var(--color-primary-1);
            color: white;
         }
            .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item-hight-light .articleSameST2__pnl-item-title{
                -webkit-line-clamp: 2;
                text-align: justify;
                font-weight: 600;
                margin-bottom: 10px;
                padding: 0px 10px;
             }
        .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item{
            display: flex;
            margin-bottom: 15px;
            cursor: pointer;
         }
        .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item:hover{
            color: var(--color-primary-1); 
         }
            .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item .articleSameST2__pnl-item-left{ 
                height: 80px;
                width: 120px;
             } 
                .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item .articleSameST2__pnl-item-left img{ 
                    height: 80px;
                    width: 120px;
                } 
            .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item .articleSameST2__pnl-item-right{  
                width: calc(100% - 120px);
                box-sizing: border-box;
                height: fit-content;
                padding: 0 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
             } 
                .articleSameST2 .articleSameST2__pnl .articleSameST2__pnl-item .articleSameST2__pnl-item-right .articleSameST2__pnl-item-title{  
                    box-sizing: border-box;
                    -webkit-line-clamp: 2;
                    text-align: justify;
                    font-weight: 600;
                } 
/* end: articleSameST2 */


/* start: home_doc_new.php  */
.blockDocNew {
    border: 1px solid gray;
}

.blockDocNew .blockDocNew-header {
    font-weight: bold;
    width: 100%;
    display: flex;
    padding: 10px;
    background: #F6F6F6;
    box-sizing: border-box;
}

.blockDocNew .blockDocNew-header .blockDocNew-header-item {}

.blockDocNew .blockDocNew-row {
    width: 100%;
    display: flex; 
    align-items: center;
    padding: 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid;
    cursor: pointer;
}

.blockDocNew .blockDocNew-row:hover {
    background-color: rgb(238, 237, 237);
}

.blockDocNew .blockDocNew-row:last-child {
    border-bottom: 1px solid transparent;
}

.blockDocNew .blockDocNew-row .blockDocNew-row-item {
    font-size: 14px;
    height: 100%;
    align-content: center;
}
.blockDocNew .blockDocNew-row .blockDocNew-row-item > div, 
.blockDocNew .blockDocNew-row .blockDocNew-row-item > span{ 
    height: 100%;
    align-content: center;
}

/* end: home_doc_new.php  */



/* start: articleTop  */

.articleTop{
    display: flex;
    width: 100%;
    flex-direction: column;
}
    .articleTop .articleTop__title{
        font-size: var(--size-title-1);
        margin: 10px 0;
    }
    .articleTop .articleTop__row{
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
        .articleTop .articleTop__row .articleTop__row-viewer{
            display: flex;
            align-items: center; 
            gap: 5px;
        }
    .articleTop .articleTop__description{
        float: left;
        width: 100%;
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-style: italic;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 30px;
        text-align: justify;
    }
/* end: articleTop  */

/* start: listST1 */
.listST1{ width: 100%;}
    .listST1 .listST1__item{
        width: 100%;
        padding: 16px 10px;
        border-bottom: 1px solid lightgray;
        cursor: pointer; 
        box-sizing: border-box;
    }
    .listST1 .listST1__item:hover{ color: var(--color-primary-1); }
    .listST1 .listST1__item:hover .datecreate{ color: var(--color-primary-1); }
        .listST1 .listST1__item .listST1__item-title{
            font-size: var(--size-title-2);
            font-weight: 700;
            margin-bottom: 10px;
        }
        .listST1 .listST1__item .listST1__item-description{
            font-size: 14px;
            padding-left: 10px;
            border-left: 1px solid #000;
            margin-bottom: 10px;
            font-style: italic;
        }
        .listST1 .listST1__item .listST1__item-bot{}
/* end: listST1 */

/* start: listFileUploaded */
.listFileUploaded{ margin: 10px 0px; }

/* end: listFileUploaded */

/* start: blockAnswer */
.blockAnswer{
    padding: 10px;
    box-sizing: border;
    border: 1px solid lightgray;
    border-radius: 4px;
}
    .blockAnswer .blockAnswer__title{}
    .blockAnswer .blockAnswer__content{}
/* end: blockAnswer */


.blockFeedbackST2{
    background: #F9F9F9;
    padding: 39px 45px;
    margin-bottom: 36px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid gray;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
    .blockFeedbackST2 table{
        border-collapse: collapse;
        width: 100%;
    }
    .blockFeedbackST2 table,.blockFeedbackST2 td,.blockFeedbackST2 th{
        border:none;
    }
    .blockFeedbackST2 td{
        padding: 10px 0px;

    }
    .blockFeedbackST2 input,
    .blockFeedbackST2 textarea
    { 
        width: 100%;
        border-radius: 6px;
        border: 1px solid #cccaca;
        padding: 0 12px;
        box-sizing: border-box;
        height: 38px;
    } 
    .blockFeedbackST2 textarea{
        height: 120px;
    }
    .blockFeedbackST2 .blockFeedbackST2__lb{
        text-transform: uppercase;
        align-content:baseline;
        font-size: 14px; 
    }
    .blockFeedbackST2 .blockFeedbackST2__center{  
        text-align: center;
    }
    .blockFeedbackST2 .frmLabel{
        display: block;
        width: fit-content;
        float: left;
        margin-top: 7px;
    }
.file-note{
    font-style: italic;    
}
/* Mobile/Tablet doc */
@media (max-width: 768px) {    
    .articleAction{
        flex-direction: row;
        width: fit-content;
        background-color: #fff;
    }
    .articleDetail .articleDetail__body{
        flex-direction: column;
    }
    .articleDetail .articleDetail__barAtrr{
        flex-direction: column;
        gap: 10px;
    }
    .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-left{
        flex-wrap: wrap;
        gap: 10px;
    }
    .articleDetail .articleDetail__barAtrr .articleDetail__barAtrr-right{
        justify-content: flex-end;
    }
    /* Comment */
    .blockCommentST1{
        margin-bottom: 20px;
    }
    .blockCommentST1 .blockCommentST1__bot{
        gap: 20px;
        align-items: center;
    }
    /* Related */
    .articleRelated .articleRelated__first{
        flex-direction: column;
        gap: 10px;
    }
    .articleRelated .articleRelated__first .articleRelated__first-left{
        width: 100%;
    }
    .articleRelated .articleRelated__first .articleRelated__first-right{
        width: 100%;
        padding: 10px;
    }
    /*  */
    .articleListST1 .articleListST1__item{
        width: 100%;
    }
    .articleListST1 .articleListST1__item .articleListST1__item-right{
        padding: 0 0 0 10px;
        width: 50%;
    }
    .articleListST1 .articleListST1__item .articleListST1__item-left{
        width: 50%;
    }
    .articleListST1 .articleListST1__item .articleListST1__item-right .articleListST1__item-right-title{
        margin-bottom: 0px;
    }
    /* Catalog layout */
    .catalogList .catalogList-item{
        width: 100%;
    }
    .catalogList .catalogList-item-mid .catalogList-item-mid-artc{
        margin: 5px 0px;
        padding: 0px;
    }
    .blockArticleST7 .blockArticleST7__top{
        flex-direction: column;
        padding-right: 0px;
        margin-bottom: 15px;
    }
    .blockArticleST7 .blockArticleST7__top-left{
        width: 100%;
    }
    .blockArticleST7 .blockArticleST7__top-right{
        width: 100%;
    }
     /* Feedback */
    .blockFeedbackST2{
        padding: 10px;
    }
    .blockFeedbackST2 > table > tbody > tr{
        display: flex;
        flex-direction: column;
    }
    .blockFeedbackST2 tr{
        padding: 10px;
    }
    .blockFeedbackST2 td{
        padding: 0;
    }
    /* Video List */
    .articleListST2{
        grid-template-columns: calc(50% - 8px) calc(50% - 8px);
    }
    .articleListST2 .articleListST2__item .articleListST2__item-content .articleListST2__item-content-title{
        text-align: left;
    }
    /* Thu vien anh */
    .imageGalleryList{
        grid-template-columns: calc(50% - 8px) calc(50% - 8px);
    }
    .imageGalleryList .imageGalleryList__col-item .imageGalleryList__col-item-shadow{
        position: unset;
        background-color: var(--color-primary-1);
    }
    .imageGalleryList .imageGalleryList__col-item .imageGalleryList__col-item-shadow .imageGalleryList__col-item-shadow-title{
        font-size: 14px;
        text-align: left;
        margin: 10px;
        padding: 0;
    }
    /* Thu vien anh Detail */
    .imageGallery{
        grid-template-columns: auto auto;
    }
    
    
}
 

/* Mobile/Tablet doc */
@media (max-width: 1024px) { 
    
    .articleListST1 .articleListST1__item{ 
    }    
}
 
/* Từ 1024px den 1299px */
@media screen and (min-width: 1024px) and (max-width: 1299px) {
}

/* Toi da 1300px */
@media (max-width: 1300px) { 
}

/* Toi thieu 1301px */
@media (min-width: 1301px) and (max-width: 1400px) {  
}

/* Từ 1400px trở lên */
@media (min-width: 1400px) and (max-width: 1499px) { 
}

@media (min-width: 1500px)  { 
}