/*https://storage-vnportal.vnpt.vn/gov-tnn/themes/default/uitabarticle/tablist/default.css?v=528*/

* {
        text-rendering: geometricprecision;
}
.TabList span.DateCreated {
        display: none;
}
.TabList .HeaderWrap li a {
        display: block;
        white-space: nowrap;
}
.TabList .HeaderWrap li span {
        display: block;
        white-space: nowrap;
}
.TabList .cate-link {
		/*display: none;*/
		float: right;
		font-weight: bold;
		margin-right: 10px;
		text-transform: uppercase;
}

.TabList .HeaderTitle {
        background: #fff url("Images/bar1.png") no-repeat scroll left center;
        border-bottom: 3px solid #0087d2;
        height: 35px;
}
.TabList .HeaderTitle span {
        color: #fb8109;
        font: bold 11pt/35px arial;
        padding-left: 40px;
        text-transform: uppercase;
}
.TabList ul.HeaderWrap {
        margin: 0;
        padding: 8.5px 10px;
        width: 100%;
		background-color: #1e73be;
		border-top: 2px solid #ddd;
		display: flex;
		gap: 10px;
		background-image: url(https://storage-vnportal.vnpt.vn/gov-tnn/7350/icons/title_trong-dong.png);
		background-position: right top;
		background-repeat: no-repeat;
            max-width: 100vw;
}

.TabList .HeaderWrap .NormalTab img {
		filter: brightness(0) invert(1);
}

.TabList .HeaderWrap .NormalTab:hover img {
		filter: none;
}

.TabList .HeaderWrap .ActiveTab,
.TabList .HeaderWrap .NormalTab:hover {
		background: #fff;
}

.TabList .HeaderWrap .NormalTab:hover .text {
		color: var(--color-primary);
}
.TabList .HeaderWrap .ActiveTab,
.TabList .HeaderWrap .NormalTab,
.TabList .HeaderWrap .ActiveTab,{
		transition: all 200ms;
}


.TabList .HeaderWrap .ActiveTab, .NormalTab {
        cursor: pointer;
        display: flex;
        transition: all 200ms;
		border: 1px solid #fff;
		border-radius: 50px;
		flex: 1;
		align-items: center;
		justify-content: center;
		gap: 5px;
}
.TabList .HeaderWrap img {
        max-height: 25px;
		display: inline-block;
}
.TabList .HeaderWrap .NormalTab:hover {
}
.TabList .HeaderWrap .NormalTab:hover .text {
        /* color: #ffffff; */
        /* font-weight:bolder; */
}
.TabList .HeaderWrap .ActiveTab .text {
        color: var(--color-primary);
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        white-space: nowrap;
}
.TabList .HeaderWrap .NormalTab .text {
        color: #fff;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: bold;
		display: inline-block;
}
.TabList .Wrap {
        /* border: 1px solid #ddd; */
        /* padding: 5px; */
        text-align: justify;
        /* border-radius: 5px; */
        min-height: 150px;
}
.TabList .Wrap .Container {
        display: flex;
        padding: 10px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 100vw;
        margin-bottom: 0px;
}
.TabList .Wrap .Container .Item {
        width: calc(33.333% - 13.333px);
		list-style: none;
}
.TabList .Wrap .Container a {
        position: relative;
		display: flex;
		height: 100%;
		flex-direction: column;
}
.TabList .Wrap .Container a img {
		height: 135px;
}
.TabList .Wrap .Container .Item .date{
        font-size: 12px;
}
.TabList .Wrap .Container .Item .item_title{
        color: #282828;
        display: block;
        /* font: bold 9pt arial; */
        /* margin: 5px 0; */
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.4;
        /* margin-bottom: 10px; */
        /* padding: 15px; */
        padding-bottom: 0;
        grid-area: title;
}
.TabList .Wrap .Container .Item p {
        display: none;
}
.TabList .Wrap .Container .Item h2 {
        margin: 10px 0 0 0;
        color: #444444;
        font-size: 13px;
        text-align: left;
        line-height: 1.5;
        font-weight: normal;
}
.TabList .Wrap .Container .Item:hover h2 {
        color: #cc0000;
}
.TabList .TabListPage {
        padding: 12px 0 12px;
        text-align: right;
        display: none;
}
.TabList .TabListPage .CurrentPage {
        vertical-align: top;
        height: 12px;
        color: transparent;
        margin-right: 8px;
        width: 12px;
        background: #de1b01;
        border-radius: 100px;
        display: inline-block;
}
.TabList .TabListPage a {
        height: 12px;
        color: transparent;
        margin-right: 8px;
        width: 12px;
        background: #de1b01;
        border-radius: 100px;
        display: inline-block;
        opacity: 0.3;
}
.TabList > div {
        position: relative;
}
.TabList > div > div:last-child {
        position: absolute;
        right: 0;
        bottom: 0;
}

@media (max-width: 767px) {
    .TabList .Container > .Item:nth-child(n + 4) {
        display: none;
    }
}

@media only screen and (max-width: 1023px){
		.UITabArticle_default4 .TabArticleControl .HeaderWrap {
			overflow-x: auto; /* Bật cuộn ngang */
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch; /* Cuộn mượt trên iOS */
		}
		
		.UITabArticle_default4 .TabArticleControl .HeaderWrap .ActiveTab,
		.UITabArticle_default4 .TabArticleControl .HeaderWrap .NormalTab{
			flex: none; 
			width: 150px;
			margin-right: 5px; 
		}
		
		.UITabArticle_default4 .TabArticleControl .Wrap .image {
			height: 200px;
			width: 100%;
		}
}