/* ---------------- Blog List ---------------- */

/* Home Blog */

.home_Blog .mainArticleWrapper,
.blogList .mainArticleWrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.home_Blog__Link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    font-size: 16px;
    font-weight: var(--fw-600);
    line-height: 27px;
	transition: var(--transition);
}

.home_Blog__Link:link,
.home_Blog__Link:visited {
    color: #050A25 !important;
}

.home_Blog__Link:hover,
.home_Blog__Link:active {
    color: #3FB7ED  !important;
}

.home_Blog__Link::after {
    content: "";
    transform: rotate(-90deg);
    height: 5px;
    width: 8px;
    min-width: 8px;
    min-height: 5px;
    display: inline-flex;
    vertical-align: middle;
    background: #050A25;
    mask: url(../../../../0/Images/arrow.svg) no-repeat center;
    mask-size: cover;
    -webkit-mask: url(../../../../0/Images/arrow.svg) no-repeat center;
    -webkit-mask-size: cover;
    transition: var(--transition);
}

.home_Blog__Link:hover::after {
    background: #3FB7ED;
}

@media (max-width:991px) {
    .home_Blog .mainArticleWrapper {
        display: flex;
        overflow-x: auto;
    }
	
	.blogList .mainArticleWrapper {
    	grid-template-columns: repeat(1, 1fr);
	}

    .home_Blog .blogList_Card {
        width: 270px;
        flex-shrink: 0;
    }
}

[id$="DNNArticle_lblHashtagAlt"]+br {
    display: none;
}

/* .blogList .mainArticleWrapper {
    --col-desktop: 3;
    --col-tablet: 2;
    --col-mobile: 1;

    display: grid;
    grid-template-columns: repeat(var(--col-desktop), 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
} */

.blogList_Card {
    padding: 1.25rem 1rem 1.75rem;
    box-shadow: 0px 3px 13.2px 0px #5252521F;
    background-color: #F7FCFD;
    border-radius: 1.5rem;
    overflow: hidden;
    transition: var(--transition);
	margin-bottom: .5rem;
}

.blogList_Card__ImgBox {
    margin-bottom: 1rem;
    border-radius: .75rem;
    overflow: hidden;
    position: relative;
}

.blogList_Card__ImgBox img {
    width: 100%;
}

.blogList_Card__Effect {
    position: absolute;
    bottom: -1px;
    right: -1px;
    border-radius: 0 !important;
    width: 67px !important;
    height: 67px !important;
}

.blogList_Card__Title {
    --line: 1;
    --line-height: 27px;

    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: var(--line);
    height: calc(var(--line) * var(--line-height));
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: var(--fw-500);
    color: #3D3D3D;
    margin-bottom: 0.25rem !important;
}

.blogList_Card__Desc {
    --line: 3;
    --line-height: 24px;

    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: var(--line);
    height: calc(var(--line) * var(--line-height));
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: var(--fw-300);
    margin-bottom: .5rem;
    color: #3D3D3D;
}

.blogList_Card__Btn {
    display: block;
    font-size: 12px;
    line-height: 20px;
    text-align: left;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
}

@media (max-width:991px) {
    /* .blogList .mainArticleWrapper {
        grid-template-columns: repeat(var(--col-tablet), 1fr);
    } */
}

@media (max-width:575px) {
    /* .blogList .mainArticleWrapper {
        grid-template-columns: repeat(var(--col-mobile), 1fr);
    } */
}

/* ------------------- (END) Blog List -------------------- */



/* ------------------- Blog List Slider ------------------- */

.blogList_Out {
    padding: .5rem 0;
}

.blogListSlider .blogList_Card,
.blogRelated .blogList_Card {
    margin: 0 .5rem;
}

@media (max-width:991px) {

    .blogListSlider .blogList_Card,
    .blogRelated .blogList_Card {
        min-width: 300px;
        width: 300px;
    }
}

/* ---------------- (END) Blog List Slider ---------------- */



/* --------------------- Blog Latest --------------------- */

.blogLatest_Card {
    border: 1px solid #E1E1E1;
    border-radius: var(--border-radius-sm);
    padding: 8px;
    display: flex;
    transition: var(--transition);
}

.blogLatest_Card:not(:last-child) {
    margin-bottom: 12px;
}

.blogLatest_Card:hover {
    box-shadow: 0px 4px 8px rgb(4 57 87 / 15%);
    color: var(--mc2);
}

.blogLatest_Card__ImgBox {
    display: flex;
    align-items: center;
}

.blogLatest_Card__ImgBox a {
    display: inline-block;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    width: 110px;
    margin-left: .5rem;
}

.blogLatest_Card__Content {
    padding-right: 1rem;
}

.blogLatest_Card__Title {
    height: calc(2 * 1.5rem);
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fz-sm);
    font-weight: var(--fw-700);
    color: var(--tc1);
}

/* --------------------- (END) Blog Latest --------------------- */



/* --------------------- Blog Detail ---------------------- */

/* -- Topics Box -- */
/* check to see if the blog details headers has any link */
.blogDetail__TopicsBox:not(:has(a)) {
    display: none;
}

.blogDetail__TopicsBox {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    border: solid 1px var(--mc3);
    overflow: hidden;
    width: 100%;
    margin-bottom: var(--title-space);
}

.blogDetail__TopicsBox__Ttl {
    display: block;
    padding: 1rem 0.75rem;
    font-size: var(--fz-md);
    font-weight: var(--fw-700);
    color: var(--white);
    background: var(--mc1);
}

ul#blogDetail__TopicsBox__List {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    height: 100%;
    align-items: flex-start;
    padding: 1rem 0rem 1rem 1rem;
    font-size: var(--fz-sm);
}

#blogDetail__TopicsBox__List a {
    display: block;
    cursor: pointer;
    font-size: var(--fz-md);
    transition: 0.5s;
    width: 50%;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 1.75rem;
}

#blogDetail__TopicsBox__List a:hover {
    color: var(--mc1);
}

#blogDetail__TopicsBox__List a::before {
    content: '';
    display: block;
    background: var(--mc1);
    border-radius: 50%;
    min-width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    right: 0.5rem;
    top: 0.625rem;
}

#blogDetail__TopicsBox__List a::marker {
    color: var(--mc1);
}


/* -- Blog Detail Content -- */
.blogDetail__Title {
    font-size: var(--fz-xl);
    font-weight: var(--fw-700);
    color: var(--tc1);
}

.blogDetail article>*:not(:last-child) {
    margin-bottom: 0.5rem;
}

.blogDetail article *[style$="text-align: left;"] {
    direction: ltr;
}

.blogDetail article h2 {
    padding-top: var(--title-space);
    /* add this property if there is fixed header */
    /* scroll-margin-top: 110px; */
}

.blogDetail article a {
    color: var(--mc1);
    text-decoration: underline;
}

.blogDetail article code {
    color: var(--mc1);
}

.blogDetail table {
    max-width: 100%;
    margin: auto;
    border: solid 1px var(--mc1);
}

.blogDetail table th {
    text-align: center;
    background: var(--mc1);
    padding: 0.5rem 1rem;
    color: var(--white);
}

.blogDetail table td {
    border: solid 1px var(--tc1);
    color: var(--tc1);
    padding: 0.5rem 1rem;
    text-align: center;
}

.main-comment table td,
.main-comment table {
    border: none !important;
}

.MYDNNUSERIMG img {
    display: none;
}

.blogDetail li {
    list-style-type: disc;
    list-style-position: inside;
    margin-right: 1rem;
}

.blogDetail ol li {
    list-style-type: decimal;
}

.blogDetail article img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 0.5rem;
}

@media (max-width: 991px) {
    .blogDetail {
        position: relative;
        padding-top: 3rem;
    }

    .blogDetail .col-lg-6.p-0.pl-lg-3,
	.blogDetail .col-lg-6.p-0.pr-lg-3 {
        position: static !important;
    }

    .newsDetail_Card__Ctg_Time {
        position: absolute;
        top: 0.5rem;
    }

    .newsDetail__Title {
        font-size: 16px !important;
        line-height: 27px !important;
        padding-top: 0.75rem;

    }

    .newsDetail__LikeSection {
        margin-top: 0.5rem !important;
        justify-content: center;
    }
}

/* ------------------ (END) Blog Detail ------------------ */

/* ---------------- News Ctg ---------------- */

.newsCtgBtn {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 .75rem;
    background-color: #091B66;
    font-size: 16px;
    font-weight: var(--fw-500);
    line-height: 27px;
    color: var(--white);
    cursor: pointer;
    width: max-content;
}

.newsCtgBtn::after {
    content: "";
    height: 1rem;
    width: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    display: inline-flex;
    vertical-align: middle;
    background: var(--white);
    mask: url(../../../../0/Images/arrow-down.svg) no-repeat center;
    mask-size: cover;
    -webkit-mask: url(../../../../0/Images/arrow-down.svg) no-repeat center;
    -webkit-mask-size: cover;
    transition: var(--transition);
}

@media (min-width: 992px) {
    .newsCtg_Wrapper:hover .newsCtgBtn::after {
        rotate: 180deg;
    }
}

.newsCtgList {
    position: absolute;
    background-color: var(--white);
    box-shadow: 0px 3px 25px 0px #070C2C1A;
    padding: 1rem;
    padding-inline-end: 6rem;
    transition: var(--transition);
    opacity: 0;
    pointer-events: none;
}

.newsCtg_Wrapper:hover .newsCtgList {
    opacity: 1;
    pointer-events: all;
}

.newsCtgList>.ModCategoryArticleListC {
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    grid-auto-flow: column;
    gap: .5rem 3rem;
}

.newsCtgList a {
    transition: var(--transition);
    font-size: 16px;
    font-weight: var(--fw-500);
    line-height: 27px;
}

.newsCtgList a:link,
.newsCtgList a:visited {
    color: #474747;
}

.newsCtgList a:hover,
.newsCtgList a:active {
    color: #3FB7ED;
}

@media (max-width: 991px) {
	
	    .newsSearch_Wrapper .search-wrap>input.StandardButton {
        margin-inline-end: .25rem !important;
    }

    .newsCtg_Wrapper {
        width: 100%;
        margin-top: 1rem;
		margin-bottom: 2rem;
    }
    
    .newsCtgBtn,
    .newsCtgList {
        width: 100%;
    }
	
	.newsCtgBtn {
        justify-content: space-between;
    }
	
	.newsCtg_Wrapper.open .newsCtgBtn::after {
    rotate: 180deg;
}

	.newsCtgList {
    position: static;
    opacity: 1;
    pointer-events: all;
	transition: unset;
}

}

/* ---------------- News Search ---------------- */

.newsSearch_Wrapper .search-wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 50px;
    border: 1px solid #BABABA;
    background-color: var(--white);
    padding: 1rem .75rem;
}

.newsSearch_Wrapper .search-wrap>input.StandardButton {
    all: initial;
    cursor: pointer;
    font-size: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: url(../../../../0/Images/search.svg) no-repeat center;
    background-size: cover;
    border: none !important;
    margin-inline-end: 0.75rem;
	    min-width: 1.5rem;
    min-height: 1.5rem;
}

.newsSearch_Wrapper .search-wrap>input.NormalTextBox {
    border: none;
    height: 1.5rem;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    color: #BABABA;
}

.newsSearch_Wrapper .search-wrap>input.NormalTextBox::placeholder {
    font-size: 16px;
    line-height: 24px;
    color: #BABABA;
}

/* ---------------- News List ---------------- */

.newsList {
    margin-top: 1.25rem;
}

.mainArticleWrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 991px) {
    .mainArticleWrapper {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 2.25rem;
    }
}

.newsList_Card {
    border: 2px solid #9BD9F5;
    box-shadow: 0px 3px 25.6px 0px #070C2C1A;
    background-color: var(--white);
}

.newsList_Card__ImgBox,
.blogList_Card__ImgBox {
    width: 100%;
    overflow: hidden;
}

.newsList_Card__ImgBox img,
.blogList_Card__ImgBox img {
    width: 100%;
    transition: var(--transition);
}

.newsList_Card:hover img,
.blogList_Card:hover .blogList_Card__ImgBox img:first-child  {
    scale: 1.08;
}

.newsList_Card__Content {
    padding: 0.5rem 1rem .75rem;
}

.newsList_Card__Title {
    --line: 2;
    --line-height: 27px;

    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: var(--line);
    line-height: var(--line-height);
    height: calc(var(--line) * var(--line-height));
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: var(--fw-700);
    margin-bottom: 0.5rem !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
}

.newsList_Card__Content__Ctg_Time,
.newsDetail_Card__Ctg_Time {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.newsList_Card__Content__Ctg_Time p,
.newsDetail_Card__Ctg_Time p {
    font-size: 12px;
    font-weight: var(--fw-300);
    line-height: 20px;
    color: var(--black);
}

.newsList_Card__Content__Ctg,
.newsDetail_Card__Ctg {
    font-size: 0;
    display: flex;
    gap: 0.25rem;
}

.newsList_Card__Content__Ctg a,
.newsDetail_Card__Ctg a {
    border: 1px solid #1230AE;
    border-radius: 1.25rem;
    padding: 0 10px;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
}

.newsList_Card__Content__Ctg a:link,
.newsList_Card__Content__Ctg a:visited,
.newsDetail_Card__Ctg a:link,
.newsDetail_Card__Ctg a:visited {
    background-color: #1230AE;
    color: var(--white);
}

.newsList_Card__Content__Ctg a:hover,
.newsList_Card__Content__Ctg a:active,
.newsDetail_Card__Ctg a:hover,
.newsDetail_Card__Ctg a:active {
    background-color: var(--white);
    color: #1230AE;
}

.newsList_Card__Desc {
    --line: 3;
    --line-height: 27px;

    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: var(--line);
    line-height: var(--line-height);
    height: calc(var(--line) * var(--line-height));
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #474747;
    margin-top: 10px;
}

/* ---------------- News Detail ---------------- */

.newsDetail__Title {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
    font-size: 24px;
    font-weight: var(--fw-700);
    line-height: 41px;
    padding-bottom: 0.74rem;
}

.newsDetail__LikeSection {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.newsDetail__Like,
.newsDetail__DisLike {
    width: 113px;
    height: 42px;
    position: relative;
	background-color: var(--white);
}

.newsDetail__Like .likesBtn,
.newsDetail__DisLike .likesBtn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 6px 1.25rem;
    margin: 0;
	z-index: 2;
}

.newsDetail__Like .likesBtn::after,
.newsDetail__DisLike .likesBtn::after {
	all: initial;
    content: "" !important;
    display: inline-block;
	position: absolute;
    top: 6px;
    left: 1.25rem;
    width: 30px;
    height: 30px;
	z-index: -2;
}

.newsDetail__Like .likesBtn::after {
    background: url(../../../../0/Images/like.svg) no-repeat center;
    background-size: cover;
}

.newsDetail__DisLike .likesBtn::after {
    background: url(../../../../0/Images/dislike.svg) no-repeat center;
    background-size: cover;
}


.newsDetail__Like .counter-text,
.newsDetail__DisLike .counter-text {
    font-size: 16px;
    line-height: 27px;
    width: 30px;
	position: absolute;
    top: 6px;
    right: 1.25rem;
	height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.newsDetail__Like .likesBtn {
    border: 1px solid #0EB100;
}

.newsDetail__Like .counter-text {
    color: #0EB100;
}

.newsDetail__DisLike .likesBtn {
    border: 1px solid #E80000; 
}

.newsDetail__DisLike .counter-text {
    color: #E80000;
}

.newsDetail article p {
    font-size: 16px;
    line-height: 27px;
    text-align: justify;
    color: #474747;
}

@media (max-width: 991px) {
    .newsDetail article p {
        text-align: initial;
    }
}

.newsDetail .CommentOut {
    border: none;
    padding: 0;
    margin: 0;
}

/* news latest */

.newsLatest .mainArticleWrapper {
    display: block;
	padding: 0;
}

.newsLatest .newsList_Card {
    margin: 0 10px;
}

.newsLatest .slick-arrow.slick-next,
.newsLatest .slick-arrow.slick-prev {
    width: 55px;
    height: 55px;
    background-color: var(--white) !important;
    box-shadow: 0px 3px 25px 0px #070C2C1A;
}

.newsLatest .slick-arrow.slick-next {
    left: -27px !important;
}

.newsLatest .slick-arrow.slick-prev {
    right: -27px !important;
}

.newsLatest .slick-slider .slick-arrow::before {
    mask: url(../../../../0/Images/arrow-down.svg) no-repeat center;
    -webkit-mask: url(../../../../0/Images/arrow-down.svg) no-repeat center;
    --icon: 1rem;
    rotate: 90deg;
}

.newsLatest .slick-arrow.slick-prev::before {
    rotate: -90deg;
}

.newsLatest_Top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.newsLatest_Top h5 {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(133.33deg, #3FB7ED 0%, #172B85 100%);
    font-size: 18px;
    font-weight: var(--fw-700);
    line-height: 31px;
}

.newsLatest_Top a {
    font-size: 18px;
    line-height: 31px;
    color: #474747;
}