@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
*{
	font-family: 'Quicksand', sans-serif;
}

a{
	cursor: pointer;
}
a:active, a:focus {
    color: orange;
}
h2,h3,h4,h5,h6{
	font-weight: 600;
}
.top-nav{
	z-index: 11;
}
.khuvuctimkiem{
	padding-top: 17px;
}
.container-header{	
	z-index: 20;
	padding: 0;
}
.row-header{
	padding: 0;
	border-bottom: 1px solid rgba(51,51,51,0.05);
}
#scroll-nav{
	position: fixed;
	top: 0;
	width: 100%;
	display: none;	
}
#scroll-nav .bi.bi-search{
	color: #fff;
}
.slick-slide{
	height: auto !important;
}
.content-white{
	background-color: #fff;
}

.row1{
	background-color: #fff;
	padding: 25px 0 15px 0;
}
.row1 input[type="text"]{
	border-radius: 50px;
	width: 300px;
}
.row1 button{
	position: relative;
	right: 55px;
}
.row1 span{
	color: rgba(0, 0, 0, 0.58);
}
.row1 .icon-viettel{
	width: 50%;
}
.logo-res{
	padding:0 40px 0 0 !important;
}
.bi.bi-search{
	color: #ec1b30;
}

.fa-bars,.fa-times{
	font-size: 25px;
	color: #ec1b30 !important;
}


.row-header a{
	color:  #ec1b30;
}

.row-header .search-container {
  float: right;
  position: relative;
}

.mid-header h2{
	padding-top: 100px;
	font-size: 26px;
	
}
.mid-header h3{
	font-size: 20;
}
.col-header1,.col-header2,.col-header3{
	text-align: center;
	color: white;
	padding-top: 20px;
}
.mid-header a{
	font-size: 13px;
	padding: 15px 40px 15px 40px;
	color: black;
	text-decoration: none;
	background-color: white;
	border: 1px solid white;
}

.mid-header a:hover{
	background-color: transparent;
	color: white;
	border:1px solid white ;
	transition: all 0.3s ease;
}
.res-header{
	display: none;
}
#scroll-nav{
	position: fixed;
	top: 0;
	width: 100%;
	display: none;
	background-color: #F5F5F5;
	z-index: 10;

}
.show-4-1{
	margin: 20px 0 10px 28px;
	width: 22%;
	padding: 20px 15px;
	position: relative;
	border-radius: 12px;
	border-bottom-left-radius: 0px;
	box-shadow: 0px 0px 5px 0px #bdbdbd;
	border-bottom: 5px solid #ec1b30;
}
.show-4-1:hover{
	border: 1px solid #ec1b30;
	border-bottom: 5px solid #ec1b30;
	transition: all 0.3s ease;
}

.show-4-1 .title{
	position: absolute;
	top: 7%;
	left: 10%;
	right: 10%;
	color: #fff;
	font-weight: 600;

}
.show-4-1 img{
	object-fit: cover;
	width: 100%;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
.show-2-1 img{
	width: 100%;
}
.xemtatca{
	color: #fff;	
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 20px;
  padding: 0px 14px;
  position: relative;
  text-align: center;
	border-radius: 8px;
	font-size: 17px;
	margin-top: 40px;
	background-color: #ec1b30;
}
.xemtatca:hover{
	color: #000;
}
.dangky{
	background-color: #ec1b30;
	color: #fff;	
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 20px;
  padding: 12px 20px;
  position: relative;
  text-align: center;
	border-radius: 8px;
	font-size: 16px;
	border-bottom-left-radius: 0px;
	width: 90%;
	display: inline-block;
	margin-top: 40px;
}
.dangky:hover{
	color: #fff;
}
.dangkychitiet{
	background-color: #ec1b30;
	color: #fff;	
	padding:10px 30px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	font-size: 16px;
	border-bottom-left-radius: 0px;
}
.wrapper-chitiet{
	text-align: center;
	padding-top: 5px;
}

.wrapper-chitiet a{
	padding: 8px 40px;
  font-weight: 600;
  text-decoration: none;
  color: #ec1b30;
  border: 1px solid #ec1b30;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all .35s;
  border-radius: 8px;
	font-size: 16px;
	border-bottom-left-radius: 0px;
}

.wrapper-chitiet a span{
  position: relative;
  z-index: 2;
}

.wrapper-chitiet a:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ff003b;
  transition: all .35s;
  border-radius: 8px;
	border-bottom-left-radius: 0px;
}

.wrapper-chitiet a:hover{
  color: #fff;
}

.wrapper-chitiet a:hover:after{
  width: 100%;
}
.dangkychitiet:hover{
	color: #ec1b30;
	background-color:#fff;
	border: 1px solid #ec1b30;
}
.tieude{
	text-align: center;
	color: #ec1b30;
}
.gia{
	text-align: center;
	font-size: 17px;
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
	font-weight: 600;
}
.tomtatgoi{
	height: 76px;
	overflow: hidden;	
}
.tomtatgoi p{
	min-height: 120px;
	width: 100%;
	padding-bottom: 40px;
}

.item-slider img{
	width: 100%;
		border: 1px solid rgba(51,51,51,0.2);
		border-radius: 15px;
}

.item-slider{
	padding: 0 10px 0 10px;
	position: relative;
	height: 130%;
}

.product-slider .slick-arrow{
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  border: none;
  color: black;
  border-radius: 100rem;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  z-index: 12;
}
.product-slider{
	margin-top: 30px;
}

.product-slider .slick-prev:before,.slick-next:before{
	color: black;
	font-size: 34px;

}
.item-slider{
	position: relative;
}
.blog-slider .slick-arrow{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  border: none;
  color: black;
  border-radius: 100rem;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  z-index: 12;
}

.blog-slider .slick-prev:before,.slick-next:before{
	color: black;
	font-size: 34px;

}
.blog-slider{
	position: relative;
}
.container-slider{
	margin-top: 5px;padding: 0 60px;
}
.index-container{
	padding: 0 50px;
}

.tintuc-field{
	padding: 0px;
}
.tintuc-field .h5{
	font-weight: 600;padding-top: 30px;
}
.viewtime-field{
	position:absolute;
	left: 10%;bottom: -30; 
	background:#fff;
	padding: 5px 8px 5px 10px;
	border-radius: 50px;
	width: 75%;
	display: flex;
	justify-content: space-between;
	border: 1px solid rgba(51,51,51,0.2);
}
.viewtime-field .thoigian{
	font-size: 15px;
	color: #A85D00;
}
.viewtime-field .luotxem{
	font-size: 15px;
	color: #A85D00;

}

.res-search{
	display: none;
}
.tintuc-row{
	justify-content: center;
	align-items: center;padding: 50px 0px 80px 0;
}
.form-timkiem{
	position: absolute;top: 35px;right: 0;
	
}
#form-timkiem{
	display: none;
}
#form-timkiem2{
	display: none;
}
#form-timkiem3{
	display: none;
}
.opensearch3{
	display: none;
}

.form-timkiem input{
	border: none;
    height: 40px;
    width: 230px;
    padding-left: 15px;
    border-radius: 5px;
    background: #fff;
    border: #dcdcdc 1px solid;
}
.form-timkiem button{
	background: none;
    color: #ed1a36;
    border: none;
    height: 97%;
    padding: 0 10px 10px 10px ;
    cursor: pointer;
    position: absolute;
    right: 35px;
    top: 0px;
    font-size: 18px;
}
.form-timkiem .dongtimkiem{
	background: none;
    color: #666;
    border: none;
    height: 97%;
    padding: 12px ;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 18px;
}
.opensearch{
	position: relative;
	cursor: pointer;
	float: right;
}
.tieudetintuc{
		background: #1E7B68;
		color: white;
		border-top-left-radius:5px ;
		border-top-right-radius: 5px;
		font-weight: bold;
		padding: 5px 30px;
		position: absolute;
		left: 0;
		bottom:0;
		font-size: 21px;
	}
.tieudecacgoi{
		color: #000;
		font-weight: bold;
		padding: 5px 10px;
	}
	.tieudecacgoi:hover{
		color: #ec1b30;
	}
.header-slider .slick-arrow{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  border: none;
  color: black;
  border-radius: 100rem;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  z-index: 30;
}

.header-slider{
	width: 100%;
	padding: 0;
}
.header-slider .slick-prev:before,.slick-next:before{
	color: black;
	font-size: 34px;

}
.header-slider .slick-prev{
	left: 10;
}
.header-slider .slick-next{
	right: 10;
}
.header-slider img{
	width: 100%;
}
.xemall{
	background:#ec1b30;
	padding: 5 15px !important;
	border-radius: 12px;
	color: #fff;
}
.xemall:hover{
	color: #ec1b30;
	background-color: #fff;
	border: 1px solid #ec1b30;
	font-weight: 600;
}
.menu-mobile{
	width: 85%;
	display: none;
}
.logo1{
	width: 100%;
}
.logo2{
	width: 210px !important;
}
.logo3{
	width: 120px;
}
.logo4{
	width: 140px;
}
.logo-res-mid{
	position:absolute;left: 35%;
	display: none;
}
#smsModal h4{
	font-size: 19px;
}
#dausoPlace,#smsPlace,#tieudePlace{
	font-size: 24px;
	color: #ec1b30;
	font-weight: 600;
}

.btn-dangkynew{
	margin-top: 5px;
	border: 1px solid #ec1b30;
	padding: 7px 25px;
	display: inline-block;
	border-radius: 50px;
}
.dangkynew{
	color: #000;
	font-weight: 600;
}
.chevronnew{
	color: #fff;
	background-color: #ec1b30;
	padding: 2px 4px;
	border-radius: 50px;
	margin-left: 5px;
}
.dangnhap{
	background-color: #ec1b30;
	color: #fff;	
	padding:10px 20px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	font-size: 14px;
	border-bottom-left-radius: 0px;
}
.modal-header{
	border: none !important;
	padding: 6px !important;
}
.modal-content{
	border-radius: 20px;
	border-bottom-left-radius: 0;
	padding: 10px 10px 30px 10px;	
}
.modal-body{
	border: none !important;
}
.modal {
	text-align: center;
	padding: 0!important;
	}

.modal:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -4px;
	}

	.modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	}
	.chitiet-content{
		padding: 10px 50px 25px 50px;
	}
	.modal-dangky{
		padding: 30px !important;
	}

.dangky-res{
	background-color: #ec1b30;
	color: #fff;	
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 20px;
  padding: 8px 16px;
  position: relative;
  text-align: center;
	border-radius: 8px;
	font-size: 14px;
	border-bottom-left-radius: 0px;
	width: 90%;
	display: inline-block;
	margin-top: 15px;
}
.dangky-res:hover{
	color: #fff;
}

.goi-ul{
	display: none;
}

.goi-ul li{
	display: flex;
	align-items: center;
	cursor: pointer;
	border-radius: 8px 8px 8px 0;
	background-color: #fff;
	border: 2px solid transparent;
	margin: 0 0 16px;
}
.goi-details{
	display: flex;
	flex: 1;
	overflow: hidden;
}
.goi-img{
	display: flex;
	flex: 0 0 62px;
	height: 62px;
	margin: 0 15px 0 0;
}
.goi-info{
	flex: 1;
	overflow: hidden;
}
.goi-button{
	flex: 0 0 102px;
	width: 102px;
	margin: 0 0 0 20px;
}
.goi-info h3{
	font-size: 16px;
	margin: 0;
}
.goi-info p{
	font-size: 12px;
	margin: 0;
}
.tomtat-res{
	height: 20px;
	overflow: hidden;
}
.gia-res{
	color: #ec1b30;
}
.mid-content{
	background-color: #fbfbfb;
}

.col-xemtatca{
	padding-top: 25px;
}

.nav-res-container{
	display: none;
}

.nav-res{
	display:flex;
	background: #ec1b30;	
}
.nav-res form{
	display: flex;
}
.nav-res a{
	width: 25%;
	padding: 10px 10px 0 10px;
	text-align: center;
}
.nav-res form{
	width: 75%;
	padding: 5px 10px;
	margin: 0;
}
.nav-res button{
		background-color: #fff;
    border: 0;
    border-radius: 0 10px 10px 0;
    box-sizing: border-box;
    color: #707070;
    height: 34px;
    padding: 5px;
}
.nav-res input{
		border: 0;
    border-radius: 10px 0 0 10px;
    font-size: 16px;
    height: 34px;
    outline: none;
    padding: 0.5rem 2rem 0.5rem 0.6rem;
    width: 100%;
}



/*----------------------------------- responsive 1200 -------------------------------- */
@media screen and (min-width: 1600px) {
  


}

/*----------------------------------- responsive 1200 -------------------------------- */
@media screen and (max-width: 1400px) {
.viewtime-field .thoigian{
	font-size: 13px;
}
.viewtime-field .luotxem{
	font-size: 13px;

}
.row1 input[type="text"]{
	width: 250px;
}
.row1 .icon-viettel{
	width: 70%;
}
.row1 button{
	right: 45px;
}

}


@media screen and (max-width: 1200px) {
  
 ul.main-menu li a{
	font-size: 14px;	
	padding:0 15px;
}
.top-nav ul li{
	padding: 5px;
}
.show-4-1{
	width: 22%;
	margin: 10px 0 10px 23px;
}
.container-slider{
	padding: 0;
}
.index-container{
	padding: 0;
}
.viewtime-field .thoigian{
	font-size: 12px;
}
.viewtime-field .luotxem{
	font-size: 12px;

}
}



/*----------------------------------- responsive 986 -------------------------------- */

@media screen and (max-width: 1068px) {	
	.row1{
		display: none;
	}
	.container-header-res{		
		display: block;
	}
	.container-header-slider{

		display: none;
	}
	.mid-header{
		display: none;		

	}
	.container-slider-res{
		padding-top: 60px;
	}
	.logo-res-mid{
		display: block;
	}

	.nav-res-container{
		display: block;
	}

	.res-search{
		display: block;
	}
	.hide-search{
		display: none;
	}
	.show-4-1{
		width: 44%;
		margin: 10px 0 10px 33px;
	}
	.container-slider{
		margin-top: 5px;padding: 0 40px;
	}
	.index-container{
		padding: 0 40px;
	}
	.mid-header{
		display: none;
	}
  .right-head{
		display: none;
	}
	.search-field .search-container {
    float: none;
  }
  .row-header{
		padding: 10px !important;
		background-color: #ec1b30;
		border-bottom: 1px solid #fff;
	}
	.row-header .h3{
		color: black;
	}
	.row-header p>a{
		color: black;
	}
	.row-header .col-4{
		width: 100%;
	}
	.canphaian{
		display: none;
	}
	#opensearch2{
		display: none;
	}
	.opensearch3{
		display: block;
	}
	.opensearch{
		display: none;
	}
	.logo-res{
		display: none;
	}
	.row-header a{
		color:  #ec1b30;
	}
	.bi.bi-search{
		color:  #ec1b30;
	}
	.viewtime-field{
		left: 10%;bottom: -30; 
		padding: 5px 8px 0px 10px;
		width: 60%;
	}
	.viewtime-field .thoigian{
		font-size: 13px;
	}
	.viewtime-field .luotxem{
		font-size: 13px;
	}
	.modal:before {
		display: unset;
	}
	.container-header{
		position: fixed;
		top: 0;
		left: 0;
	}
	.header-slider{
		margin-top: 60px;
	}

}

@media screen and (max-width: 991px) {

	.show-4-1{
		margin: 10px 0 10px 27px;
	}
	
	
}
/*----------------------------------- responsive 768 -------------------------------- */

@media screen and (max-width: 768px) {

	.container-slider{
		margin-top: 5px;padding: 0;
	}
	.index-container{
		padding: 0 ;
	}
	.show-4-1{
			margin: 10px 0 10px 25px;
		}
	.viewtime-field{
		width: 70%;
	}
	.modal-content{
		padding: 10px;
	}
	.modal-dangky{
		padding: 10px !important;
	}
	.chitiet-content{
		padding: 15px 30px;
	}
	.tieudecacgoi{
		padding: 5px 10px;
	}
	
}

@media screen and (max-width: 600px) {
	
}
@media screen and (max-width: 400px) {
		
}



/*----------------------------------- responsive 576 -------------------------------- */

@media screen and (max-width: 576px) {

	.container-slider{
		margin-top: 5px;
		padding: 0 15px;
	}
	.index-container{
		padding: 0 15px;
	}
	.show-4-1{
		display: none;
	}
	.goi-ul{
		display: block;
	}
	.col-xemtatca{
		padding-top: 5px;
	}
	.tintuc-row{
		padding: 40px 0 60px 0;
	}	
	.tintuc-field .h5{
		font-size: 15px;
	}
	.viewtime-field .thoigian{
		font-size: 12px;
	}
	.viewtime-field .luotxem{
		font-size: 12px;
	}
	.tintuc-field .mota{
		font-size: 12px;
	}
	.tieudecacgoi{
		font-size: 23px;
	}
	
	
	.xemall{
		font-size: 13px;
	}
	.chitiet-content{
		padding: 15px;
	}
	.xemtatca{
		padding: 0px 11px;
		font-size: 15px;
	}
	.tieudecacgoi{
		padding: 15px 10px;
	}
	
}
	

@media screen and (max-width: 500px) {
	.viewtime-field .thoigian{
		font-size: 10px;
	}
	.viewtime-field .luotxem{
		font-size: 10px;
	}
		
}
@media screen and (max-width: 440px) {
	.viewtime-field .thoigian{
		font-size: 9px;
	}
	.viewtime-field .luotxem{
		font-size: 9px;
	}
	.xemall{
	font-size: 12px;
	}
		
}
@media screen and (max-width: 400px) {
	.tintuc-field .h5{
		font-size: 12px;
	}
	.viewtime-field .thoigian{
		font-size: 8px;
	}
	.viewtime-field .luotxem{
		font-size: 8px;
	}
	.tintuc-field .mota{
		font-size: 8px;
	}

	.xemall{
	font-size: 11px;
	}
		
}
@media screen and (max-width: 370px) {
	.viewtime-field .thoigian{
		font-size: 7px;
		display: inline-block;
	}
	.viewtime-field .luotxem{
		font-size: 7px;
	}
	.viewtime-field{
		padding: 10px 8px 0 10px;
	}
		
}
@media screen and (max-width: 335px) {
	.viewtime-field .thoigian{
		font-size: 6px;
	}
	.viewtime-field .luotxem{
		font-size: 6px;
	}
		
}

@media screen and (max-width: 320px) {
	.viewtime-field .thoigian{
		font-size: 5px;
	}
	.viewtime-field .luotxem{
		font-size: 5px;
	}

		
}


/*----------------------------------- responsive 376 -------------------------------- */

@media screen and (max-width: 376px) {
	
	
}





/*//goi cuoc responsive*/

@media screen and (max-width: 515px) {
	.tieudecacgoi{
		font-size: 22px;
	}
		
}



@media screen and (max-width: 462px) {
	.tieudecacgoi{
		font-size: 20px;
	}
	.nav-res a{
		width: 35%;
	}
	.nav-res form{
		width: 65%;
	}
		
}

@media screen and (max-width: 409px) {
	.tieudecacgoi{
		font-size: 18px;
	}	
	
}
@media screen and (max-width: 356px) {
	.tieudecacgoi{
		font-size: 17px;
	}
	
}
@media screen and (max-width: 329px) {
	
}


@media screen and (max-width: 305px) {
  .tieudecacgoi{
      font-size:13px;
  }  
}

.red-container{
	background-color: #ec1b30;
}

#container {
	margin: 0 auto;
	max-width: 890px;
}
.toggle,
[id^=drop] {
	display: none;
}
/* Giving a background-color to the nav container. */
nav { 
	background-color: #ec1b30;
	margin:0;
	background-color: none;
	display: flex;
	justify-content: left;
	align-items: start;
	position: relative;
	
}
/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style-type: none;
	position: relative;
	
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	padding: 6px 0;
	
	}


nav ul>li:hover .fa-solid.fa-chevron-down{
	transform: rotate(180deg);
	transition: all 0.4s ease;
}

/* Styling the links */
nav a {
	display:block;
	padding:10px;	
	color:#fff !important;
	font-size:18px;
	text-decoration:none;
	font-weight: 600;
}

/* Background color change on Hover */
nav a:hover { 
	color: #fff;
}
/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	top: 55px; 
	background-color: white;	
	z-index: 20;
	box-shadow: 0px 0px 5px 0px #bdbdbd;
	border-radius: 5px;
}	
nav ul ul li a{
	color: #ec1b30 !important;
	font-size:14px;
	padding:5px 13px;
	border-radius: 5px;
}
nav ul ul li:hover a{
	color: #fff !important;
	transition: all 0.3s ease;
	background-color: #ec1b30;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;	
}	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:270px;
	float:none;
	display:list-item;
	position: relative;
	padding: 5px;
}
/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/


	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; }



@media all and (max-width : 1400px) {
	nav a{
		font-size: 16px;
	}

	nav ul ul li a{
		font-size:12px;
	}

}

@media all and (max-width : 1200px) {
	nav a{
		font-size: 14px;
	}

	nav ul ul li a{
		font-size:10px;
	}

}

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1068px) {

	.menu-pc{
		display: none;
	}
	.menu-mobile{
		display: block;
		background-color: #ec1b30;
		color: #fff !important;
	}

	nav {
		margin: 0;
		display: block;
    background-color: #fff;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		padding:10px 20px 2px 20px;	
		font-size:16px;  
		text-decoration:none;
		font-weight: 600;
		color: #fff;
		
	}

	.toggle:hover {
		cursor: pointer;
	}
    
    nav ul>li:hover{
        border-bottom: none;
    }
    nav ul>li:hover .ul12{
        border-top: none;
    }

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		padding:1px 0;
		background-color: #ec1b30;
		border-bottom: 1px solid #fff;
		}
	nav ul li:hover{
		background-color: #fff;
	}
	nav ul li:hover .menu-mobile{
		background-color: #fff;
		color: #ec1b30 !important;
	}
	nav ul li:hover .toggle{
		color: #ec1b30 !important;
	}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
		color: #fff;
	}
	nav a{
		font-size: 15px;
		color: #fff !important;
	}

	nav ul ul li a{
		font-size: 14px;
		padding:2px 13px 2px 30px;
		color: #fff !important;
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		box-shadow: none;
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
		border: none;
    border-top: 1px solid #fff;   
    background-color: #ed707a;
	}



}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}






/* nav scroll ------------------------------------------------------------------------*/
.nav1 { 
	margin:0;
	background-color: none;
	display: flex;
	justify-content: left;
	align-items: start;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

.nav1:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
.nav1 ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	
	}
	
/* Positioning the navigation items inline */
.nav1 ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	padding: 6px 0;
	}

.nav1 ul>li:hover{

}
.nav1 ul>li:hover .fa-solid.fa-chevron-down{
	transform: rotate(180deg);
	transition: all 0.4s ease;
}

.nav1 ul>li:hover .fa.fa-chevron-down{
	transform: rotate(180deg);
	transition: all 0.4s ease;
}

/* Styling the links */
.nav1 a {
	display:block;
	padding:10px;	
	color:#fff;
	font-weight: 600;
	font-size:15px;
	text-decoration:none;
}

/* Background color change on Hover */
.nav1 a:hover { 

}
.nav1 ul ul li a{
	color: #ec1b30 !important;
	font-size:14px;
	padding:6px 13px;
	border-radius: 5px;
}
.nav1 ul ul li:hover a{
	color: #fff !important;
	transition: all 0.3s ease;
	background-color: #ec1b30;
}
/* Hide Dropdowns by Default
 * and giving it a position of absolute */
.nav1 ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 52px; 
	background-color: white;
	box-shadow: 0px 0px 5px 0px #bdbdbd;
	border-radius: 5px;
}	
/* Display Dropdowns on Hover */
.nav1 ul li:hover > ul {
	display:inherit;	
}	
/* Fisrt Tier Dropdown */
.nav1 ul ul li {
	width:270px;
	float:none;
	display:list-item;
	position: relative;
	padding: 5px;
}

@media all and (max-width : 1400px) {

	.nav1 a {
		font-size:13px;
	}
	.nav1 ul ul li a{
		font-size:12px;
	}
}

@media all and (max-width : 1200px) {
	.nav1 a {
		font-size:11px;
	}
	.nav1 ul ul li a{
		font-size:10px;
	}
}








/*style chi tiet sp, chi tiet tin tuc*/
.noidungstyle h2,.noidungstyle h3,.noidungstyle h4{
		margin-bottom: 15px;
    line-height: normal;
	}
	.noidungstyle h3{
		background: #1E7B68;
    color: #FFF;
    padding: 5px 15px;
    border-radius: 5px;
    display: inline-block;
    margin: 10px 0px;
	}
	.noidungstyle p{
		margin-bottom: 5px;
		font-size: 15px;
		color: #252525;
	}
	.noidungstyle table a{
		background-color: #ec1b30 ;
		color: white;
		padding: 2px 7px;
		font-weight: 600;
		margin: 0 5px;
		border-radius:50px;
		width:max-content ;
		display: inline-block;
	}
	.noidungstyle table a:hover{
		background-color: #1E7B68;
		color: white;

	}
	.noidungstyle .table_sp {
    overflow-x: auto;
	}
	.noidungstyle .table_sp table{
		width: 100%;
    border-collapse: collapse;
    min-width: 600px;
	}
	
	.noidungstyle ul{		
  margin: 0;
  padding: 0;
	}
	.noidungstyle table,td,th{
		border: 1px solid rgba(51,51,51,0.2);
		font-size: 15px;
		vertical-align: middle;
		padding: 5px;
		text-align: center;
	}
	.noidungstyle td span{
		font-weight: 600;
	}
	.noidungstyle a{
		color: #428bca;
	}
	.noidungstyle tr:nth-child(even) {background-color: #f2f2f2;}
	.noidungstyle ul li{
		border-bottom: none;
		list-style-type: disc;
		margin-left: 20px;
		display: list-item;
		font-size: 15px;
	}
	.noidungstyle ul ul li{
		border-bottom: none;
		list-style-type: circle;
		margin-left: 20px;
		display: list-item;
		font-size: 15px;
	}
	.noidungstyle li a{
		font-size: 15px;
	}
	.hd_dangky {
    border-left: 5px #ef0032 solid;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px #999;
    padding: 20px 20px 10px;
    margin: 30px 0px;
    text-align: center;
    font-style: italic;
}
.hd_dangky a {
    display: inline-block;
    color: #FFF;
    padding: 5px 20px;
    border-radius: 20px;
    margin-left: 5px;
    background-image: linear-gradient(to right , #ef0032, #ef4461);
}




/*style index*//*style index*//*style index*//*style index*//*style index*/
.show-4-1 h5 a{
		color: white;
		text-decoration: none;
	}
	.show-4-1 h5 a:hover{
		color: #1E7B68;
	}
	.tomtat{
		text-align: center;
		padding-bottom: 10px;
	}
	.tomtat ul{
		display: inline-block;
		text-align: left;
	}




	header {
  overflow: hidden;
}

.hero-text h2 {
  margin-bottom: 50px;
}

.hero-text .hero {
  position: relative;
}

.hero-text .hero .hero-slide a:hover span {
  color: #033a71;
}

.btn-three {
  color: #FFF;
  transition: all 0.5s;
  position: relative;
  font-size: 21px;
}
.btn-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.btn-three:hover::before {
  opacity: 0 ;
  transform: scale(0.5,0.5);
}
.btn-three::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  transform: scale(1.2,1.2);
}
.btn-three:hover::after {
  opacity: 1;
  transform: scale(1,1);
}

.hero .hero-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  filter: brightness(70%);
}

.hero .hero-slide .header-content {
  top: 20%;
  margin-left: 8rem;
  max-width: 550px;
  width: 100%;
  padding: 2rem;
}

.slide-content {
  padding: 10px 20px 10px 0;
}

.slide-content .h1 {
  font-size: 62px;
}

.btn-primary {
  background-color: #5302FE;
  border: #111;
  border-radius: 0;
}

/** Text Animation **/

@-webkit-keyframes fadeInUpSD {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSD {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSD {
  -webkit-animation-name: fadeInUpSD;
  animation-name: fadeInUpSD;
}

.slick-active .slide-content {
  animation-name: fadeInUpSD;
  animation-duration: 1s;
  opacity: 1;
  width: 100%;
  padding: 10px 20px 30px 0;
}

/* Text Animation End **/

.slick-dots {
  position: absolute;
  bottom: 10px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-active button {
  background: #d60e96;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  border-radius: 50%;
  border: 0;
  outline: none;
}

.slick-dots li button::before {
  font-size: 18px;
  color: #fff;
  opacity: 1;
}
.header-content p{
	text-align: justify;
	padding-top: 10px;
}


/* Media Queries */

@media (max-width: 768px) {
  .hero-text .hero .hero-slide a {
    padding-top: 0.8rem;
  }

  .hero-text .hero .hero-slide a span {
    font-size: 20px;
    margin-top: 0.5rem;
  }
  .hero .hero-slide .header-content {
	  top: 15%;
	  margin-left: 1rem;
	  max-width: 500px;
	  width: 100%;
	  padding: 1rem;
	}


}

@media (max-width: 576px) {
	.hero .hero-slide .header-content {
	  top: 15%;
	  margin-left: 1rem;
	  max-width: 360px;
	  width: 100%;
	  padding: 1rem;
	}
	.header-content h1{
		font-size: 19px;
		font-weight: 600;
	}
	.header-content p{
		font-size: 15px;
	}
	.btn-three-black{
		font-size: 16px;
	}

}

@media (max-width: 430px) {
	.hero .hero-slide .header-content {
	  top: 10%;
	  margin-left: 1rem;
	  max-width: 300px;
	  width: 100%;
	  padding: 1rem;
	}
	.header-content h1{
		font-size: 17px;
		font-weight: 600;
	}
	.header-content p{
		font-size: 13px;
	}
	.btn-three-black{
		font-size: 13px;
	}

}
@media (max-width: 330px) {
	.hero .hero-slide .header-content {
	  top: 5%;
	  margin-left: 6px;
	  max-width: 250px;
	  width: 100%;
	  padding: 5px;
	}
	.header-content h1{
		font-size: 16px;
		font-weight: 600;
	}
	.header-content p{
		font-size: 12px;
	}
	.btn-three-black{
		font-size: 12px;
	}

}