.grid-container { display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 20px; margin: 0 auto;}

.grid-item {position: relative;}
	.grid-item .anima-img{border-radius: 5px;}
	.grid-item .anima-img a{display: block; position: relative;}
	.grid-item .anima-img a:after{position: absolute; opacity: 0.5;border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; content: ''; left: 0px; bottom: 0px; width: 100%; height: 92px; background: linear-gradient(180deg, rgba(6, 81, 153, 0) 0%, #065199 100%);}

.grid-item img {max-width: 100%;height: auto;}
.grid-item.vertical img, .grid-item.large img {object-fit: cover; width: 100%; height:482px;}
.grid-item.small img, .grid-item.horizontal img {object-fit: cover; width: 100%; height:231px;}
.grid-item h3 { position: absolute; left: 0px; bottom: 30px; padding-left: 30px; padding-right: 20px;
  font-size: var(--fz-16); text-transform: uppercase; color: var(--colorFFF);z-index: 2; margin-bottom: 0px;
}
.grid-item.small  h3{bottom: 20px; padding-left: 20px;}
.grid-item.large {grid-column: span 2;grid-row: span 2;}

.grid-item.horizontal { grid-column: span 2;grid-row: span 1;}
.grid-item.small { grid-column: span 1; grid-row: span 1;}

.grid-item.vertical {
  grid-column: 1; /* Cột bên trái */
  grid-row: 4 / 6; /* Kéo dài từ hàng 4 đến hàng 6 (2 dòng) */
}


.hot-video .anima-img,.video-small .anima-img{border-radius: 7px;}

.hot-video img{object-fit: cover; width: 100%; height:552px;}
.hot-video h2{text-transform: uppercase; margin-top: 20px; color: var(--colorD93); font-weight: 700; font-size: var(--fz-20); margin-bottom: 40px;}

.video-small {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.video-small img{object-fit: cover; width: 100%; height:250px;}
.video-small h3{font-weight: 400;text-transform: uppercase; margin-top:15px; color: var(--colorD93); font-size: var(--fz-20);}

.hot-video .anima-img a,.video-small .anima-img a{position: relative;}
.hot-video .anima-img a:after,.video-small .anima-img a:after{content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 85px; height: 85px; background: url(../images/ico-video.svg) center center no-repeat; background-size: contain;
}

.video-small .anima-img a:after{background-image: url(../images/ico-video-2.svg); width: 45px; height: 45px;}

.search-container {display: flex ; margin: 40px auto 50px; width: 30rem; overflow: visible;    z-index: 3;
	transition: var(--d-transition); align-items: center; position: relative;}

.search-container:hover {
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.2);
    transform: translateY(-2px);
}

.search-container input {
    flex: 1;   padding: 10px 12px;    border: none;
    outline: none;   font-size: var(--fz-16);    background-color: #F5F5F5;
    transition: background-color 0.3s ease;border: 1px solid #D9D9D9;
    border-radius: 6px;
}
.btn-search{background-color: #0097DB; background-image: url(../images/ico-search.svg); width: 45px; height: 45px; background-size: 22px;  
	background-repeat: no-repeat !important; background-position: center  !important; border: 0px;position: absolute; height: 100%; right: 0px; box-shadow: none;transition: var(--d-transition);
	border-top-right-radius: 6px;border-bottom-right-radius: 6px;
}
.btn-search:hover,.btn-search:focus{outline: 0px !important; border:0px !important}
.dowloadn-pro{display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.w-downl{position: relative;}
.w-downl .anima-img{border-radius: 4px;}
.w-downl h3{color: var(--color55); font-size: var(--fz-20); font-weight: 700; margin-top: 15px;}

.dowloadn-pro img { object-fit: cover; width: 100%; height: 360px; }

.box-download{background: #0097DB; border-radius: 5px;  position: absolute; right: 0px; bottom: 0px; display: flex ; gap: 30px; padding: 20px 25px;}
	.box-download .ico-view-profile{background: url(../images/ico-download-1.svg) center center no-repeat;}
	.box-download .ico-downl-profile{background: url(../images/ico-download-2.svg) center center no-repeat; }
	.box-download a{padding: 20px 10px; transition: var(--d-transition);background-size: 35px !important;
		width: 35px; height: 35px;    display: inline-block;}
	.box-download .ico-view-profile:hover{background-image: url(../images/ico-download-1-hover.svg);}	
	.box-download .ico-downl-profile:hover{background-image: url(../images/ico-download-2-hover.svg);}	
	.box-download:after{content: ''; position: absolute; opacity: 0.5; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 40px; width: 1px; background: #fff;}

.h-document{position: relative; }
.h-document h2{color: #0097DB; font-size: var(--fz-22);border-bottom: 4px solid #0097DB; padding-bottom: 10px;}
	.h-document h2:after{width: 0; height: 0; content: ''; position: absolute; left: 20px; bottom: -15px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 13px solid #0097DB;}

.fadeinupBy:nth-child(1) {-webkit-animation-delay: 0.20s; -moz-animation-delay: 0.20s; -o-animation-delay: 0.20s; animation-delay: 0.20s;}
.fadeinupBy:nth-child(2) {-webkit-animation-delay: 0.40s; -moz-animation-delay: 0.40s; -o-animation-delay: 0.40s; animation-delay: 0.40s;}
.fadeinupBy:nth-child(3) {-webkit-animation-delay: 0.60s; -moz-animation-delay: 0.60s; -o-animation-delay: 0.60s; animation-delay: 0.60s;}
.fadeinupBy:nth-child(4) {-webkit-animation-delay: 0.80s; -moz-animation-delay: 0.80s; -o-animation-delay: 0.80s; animation-delay: 0.80s;}
.fadeinupBy:nth-child(5) {-webkit-animation-delay: 1.0s; -moz-animation-delay: 1.0s; -o-animation-delay: 1.0s; animation-delay: 1.0s;}
.fadeinupBy:nth-child(6) {-webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s;}
.fadeinupBy:nth-child(7) {-webkit-animation-delay:1.4s; -moz-animation-delay:1.4s; -o-animation-delay: 1.4s; animation-delay: 1.4s;}
.fadeinupBy:nth-child(8) {-webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; -o-animation-delay: 1.6s; animation-delay: 1.6s;}
.fadeinupBy:nth-child(9) {-webkit-animation-delay: 1.80s; -moz-animation-delay: 1.80s; -o-animation-delay: 1.80s; animation-delay: 1.80s;}
.fadeinupBy:nth-child(10) {-webkit-animation-delay: 2.0s; -moz-animation-delay: 2.0s; -o-animation-delay: 2.0s; animation-delay: 2.0s;}
.fadeinupBy:nth-child(11) {-webkit-animation-delay: 2.20s; -moz-animation-delay: 2.20s; -o-animation-delay: 2.20s; animation-delay: 2.20s;}
.fadeinupBy:nth-child(12) {-webkit-animation-delay: 2.40s; -moz-animation-delay: 2.40s; -o-animation-delay: 2.40s; animation-delay: 2.40s;}
.fadeinupBy:nth-child(13) {-webkit-animation-delay: 2.60s; -moz-animation-delay: 2.60s; -o-animation-delay: 2.60s; animation-delay: 2.60s;}
.fadeinupBy:nth-child(14) {-webkit-animation-delay: 2.80s; -moz-animation-delay: 2.80s; -o-animation-delay: 2.80s; animation-delay: 2.80s;}

.wdocument{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 0px 15px;    width: 100%;}
.item-documt{padding-left: 90px; position: relative; margin-bottom: 20px; border-bottom: 1px solid #DDE0E3;padding-bottom: 7px; margin-bottom: 7px;}
.item-documt:before{width: 64px; height: 86px; background: url(../images/ico-img-download.svg) center center no-repeat; background-size: contain; 
	content: ''; position: absolute; left: 0px; top: 0px;}

.item-documt h4{color: #444; font-size: var(--fz-16); min-height: 61px; line-height: 23px;}
.link-document { color: #00AEEF; display: grid ; grid-template-columns: 26% 45% 29%; padding-bottom:20px; }	
.link-document a{font-weight: 700;    color: #00AEEF;}


	.d-document span{display: inline-block;transition: var(--d-transition); position: relative;padding-right:35px;}
	.d-document span:after{width: 23px; height: 23px; background: url(../images/ico-download.svg) center center no-repeat; background-size: contain; 
		content: ''; position: absolute; right: 0px; top: -3px;transition: var(--d-transition); }
	.d-document:hover span:after{background-image: url(../images/ico-download-h.svg)}

.s-box-document.s-phaply .search-container{position: absolute;    width: 35.6rem; top:-0.2rem; right: 1rem;align-items: center; justify-content: space-between;box-shadow: none !important; transform: none !important;    margin-top: 0;    padding-right: 1rem; margin-bottom: 0;    background-color: #F5F5F5;border: 1px solid rgba(217, 217, 217, 1); border-radius: 5px;}
.s-box-document.s-phaply #searchInput{border: 0; background: transparent; border-radius: 0;    padding:0.3rem 1rem;}
.s-phaply #filterSelect { background: transparent; border: 0; color: rgba(0, 151, 219, 1); outline: 0; box-shadow: none;padding: 0 0.5rem 0 0.5rem; }
.s-box-document.s-phaply .input-wrapper:after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -1rem; width: 1px; height: 1rem; background: rgba(154, 154, 154, 1);}

.s-box-document.s-phaply #searchBtn {width: 1.1rem; height: 1.1rem; background: url(../images/ico-search-2.svg) center center no-repeat; background-size: contain; border: 0px;
text-indent: -9999px; overflow: hidden; white-space: nowrap; outline: 0; box-shadow: none;color: transparent; }
.s-box-document.s-phaply .search-container .input-wrapper {
  flex: 1;                   /* chiếm hết phần còn lại */
  min-width: 0;              /* chống tràn nội dung */
}

.s-box-document.s-phaply .search-container #filterSelect {width: 13rem; margin-left: 1.5rem;}
.s-box-document.s-phaply .search-container #searchBtn {width: 1.1rem;  margin-left: 1.5rem;}
.clear-btn{box-shadow: none; outline: 0 !important}
.s-box-document.s-phaply .custom-search-dropdown{width: 100%;}







@media screen and (min-width:1200px){
	.link-document a:hover,.link-document a:hover span{color: transparent !important; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(105.28deg, #FFCD1E -14.57%, #C98A10 65.35%);}
	

}
@media screen and (min-width:1400px){
	
}
@media screen and (min-width:1440px){
	.hot-video img { height: 572px; }
	.dowloadn-pro img {height: 370px; }
	.item-documt h4 {font-size: var(--fz-17);}
	.link-document{font-size: var(--fz-17);}
	.h-document h2{margin-bottom: 35px;}
	.s-box-document.s-phaply .search-container {width: 37rem;}
}	
@media screen and (min-width:1600px){
	.grid-item.vertical img, .grid-item.large img {height: 542px; }
	.grid-item.small img, .grid-item.horizontal img { height: 261px; }
	.hot-video img {height: 632px; }
	.video-small img {height: 270px; }
	.dowloadn-pro img { height: 417px; }
	.w-downl h3{font-size: 22px;}
	.item-documt:before { width: 66px; height: 89px;}
	.h-document h2 {font-size: var(--fz-25); }
	.s-box-document.s-phaply .search-container { width: 41.1rem; }
}	
@media screen and (min-width:1680px){
	.item-documt h4,.link-document { font-size: 18px; }


}
@media screen and (min-width:1900px){
	.grid-item.vertical img, .grid-item.large img { height: 652px; }
	.grid-item.small img, .grid-item.horizontal img { height: 316px; }
	.hot-video img { height: 765px; }
	.hot-video h2 {font-size: var(--fz-25); margin-bottom: 50px;}
	.video-small img { height: 300px; }
	.dowloadn-pro img { height: 500px; }
	.s-box-document.s-phaply .search-container { width: 49.5rem; }
	.s-box-document.s-phaply .search-container #filterSelect { width: 18rem;}
}
@media screen and (min-width:992px) and (max-width:1199px)
{
	.grid-item.vertical img, .grid-item.large img {height: 392px; }
	.grid-item.small img, .grid-item.horizontal img {height: 186px; }
	.video-small img {height: 220px; }
	.dowloadn-pro img { height: 290px; }
	.box-download {padding: 7px 14px; }
	.link-document { grid-template-columns: 28% 33% 39%; }	
}

@media screen and (min-width:768px) and (max-width:979px){
	.grid-item.large { grid-column: span 3; grid-row: span 1; }
	.grid-item.vertical img, .grid-item.large img {height: 422px; }
	.grid-item.small img, .grid-item.horizontal img {height: 201px; }
	.hot-video img {height: 352px; }
	.hot-video .anima-img a:after, .video-small .anima-img a:after{width: 75px; height: 75px;}
	.video-small {grid-template-columns: repeat(2, 1fr);}

	.main-document br{display: none;}
	.dowloadn-pro {gap: 20px; }
	.dowloadn-pro img { height: 210px; }
	.box-download {padding: 10px 23px; position: relative; display: flex ; gap: 30px; text-align: center; justify-content: center;}

	.section.s-box-document	{padding-top: 20px;}
	.link-document { color: #00AEEF;gap: 10px 0px; display: flex ; display: -webkit-box; display: -ms-flexbox; display: flex ; -ms-flex-wrap: wrap; flex-wrap: wrap;}
	.link-document a{-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.link-document span{-webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}

}

@media screen and (max-width: 767px) {	
	
	.grid-item.large { grid-column: span 3; grid-row: span 1; }
	.grid-item.vertical img, .grid-item.large img {height: 422px; }
	.grid-item.small img, .grid-item.horizontal img {height: 201px; }
	.hot-video img {height: 352px; }
	.hot-video .anima-img a:after, .video-small .anima-img a:after{width: 75px; height: 75px;}
	.video-small {grid-template-columns: repeat(2, 1fr);}

	.main-document br{display: none;}
	.dowloadn-pro {gap: 20px; }
	.dowloadn-pro img { height: 210px; }
	.box-download {padding: 10px 23px; position: relative; display: flex ; gap: 30px; text-align: center; justify-content: center;}

	.section.s-box-document	{padding-top: 20px;}
	.link-document { color: #00AEEF;gap: 10px 0px; display: flex ; display: -webkit-box; display: -ms-flexbox; display: flex ; -ms-flex-wrap: wrap; flex-wrap: wrap;}
	.link-document a{-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.link-document span{-webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}

}


/*Mobile Đứng*/
@media screen and (max-width: 480px) and (orientation : portrait) {
	.grid-container {grid-template-columns: repeat(2, 1fr);  }
	.grid-item.large { grid-column: span 2;}

	.grid-item.large img { height: 262px; }
	.grid-item.vertical {grid-row: 4 / 3; }
	.grid-item.vertical img{ height: 201px; }

	.grid-item h3 { position: absolute; left: 0px; bottom: 20px; padding-left: 20px; padding-right: 20px;}
	.grid-item.large.horizontal img { height: 132px; }
	.grid-item.small h3,.grid-item.vertical h3 { font-size: 15px; position: relative; margin-top: 15px; padding: 0px; bottom: 0px; color: #555555; }

	.grid-item .anima-img a:after{display: none;}

	.hot-video img { height: 192px; }
	.hot-video .anima-img a:after { width: 45px; height: 45px; }
	.video-small .anima-img a:after { width: 35px; height: 35px; }
	.hot-video h2{font-size: 18px;}
	.video-small h3{font-size: 17px;}
	.video-small img {height: 140px; }

	.dowloadn-pro { gap: 40px; grid-template-columns: repeat(1, 1fr); }
	.dowloadn-pro img { height: 390px; }
	.box-download{position: absolute;}
	.wdocument { grid-template-columns: repeat(1, 1fr);     gap: 20px; }
	.item-documt h4{min-height: auto}
	a.d-document { text-align: right; }
	.w-downl h3{max-width: 60%;}
	.s-box-document.s-phaply .search-container{position: relative; margin-bottom: 1rem; width: 100%; right: 0;}
	.s-box-document.s-phaply .search-container #filterSelect { width: 10rem;}

}
@media screen and (max-width:420px) {
	.grid-item.vertical img,.grid-item.small img, .grid-item.horizontal img { height: 151px; }
	.grid-item.small h3 {font-size: 15px; }
	.dowloadn-pro img { height: 370px; }
}	
@media screen and (max-width:380px) {
	.dowloadn-pro img { height: 330px; }
	.w-downl h3 { max-width: 50%; }
	.s-box-document.s-phaply .search-container #filterSelect { width: 8rem; }
}

@media screen and (max-width: 365px) {
	.video-small { grid-template-columns: repeat(1, 1fr); }
	.video-small img { height: 170px; }
}
@media screen and (max-width: 330px) {


}