/* Định dạng tổng thể */

@font-face {
    font-family: 'UTM HelvetIns';
    src: url('../fonts/UTM-HelvetIns.woff2') format('woff2'),
         url('../fonts/UTM-HelvetIns.woff') format('woff'),
         url('../fonts/UTM-HelvetIns.otf') format('opentype'),
         url('../fonts/UTM-HelvetIns.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

		/* Áp dụng cho tất cả tiêu đề h1-h6 và menu */
		h1, h2, h3, h4, h5, h6,
		.navbar, .navbar-nav .nav-link {
			font-family: 'UTM HelvetIns', sans-serif !important;
		}
		.text-justify {
            text-align: justify;
        }
		/* Tùy chỉnh thanh cuộn */
		::-webkit-scrollbar {
			width: 8px; /* Độ rộng của thanh cuộn */
		}

		/* Màu nền của thanh cuộn */
		::-webkit-scrollbar-track {
			background: #f1f1f1; /* Màu nền */
			border-radius: 10px;
		}

		/* Màu của thanh cuộn */
		::-webkit-scrollbar-thumb {
			background: #007bff; /* Màu chính */
			border-radius: 10px;
		}

		/* Hiệu ứng khi hover vào thanh cuộn */
		::-webkit-scrollbar-thumb:hover {
			background: #0056b3;
		}
body { background-color: #f8f9fa; }
	.color_text_Red{
		color:#F11B23;
	}
	/* Header */
.navbar-brand img {
	height: 50px;
	margin-right: 10px;
}

/* Slider */
.slider {
	width: 100%;
	height: auto;
	background: url('../images/slide1.jpg') center/cover no-repeat;
	position: relative;
	padding-top: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Form đăng ký */
.form-container {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	position: relative;
	z-index: 10;
}
/* card */
.card {
	transition: transform 0.3s ease-in-out, box-shadow 0.3s;
}
.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.card-body {
	padding: 15px;
}
.btn {
	width: 40px;
	height: 40px;
}
/* Hiệu ứng thẻ a */
/* Bỏ gạch chân mặc định của link */
a {
	text-decoration: none;
	color: inherit; /* Giữ nguyên màu chữ mặc định */
	transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Hiệu ứng khi hover */
a:hover {
	color: #007bff; /* Thay đổi màu khi hover */
	transform: translateY(-2px); /* Nhẹ nhàng nhấc lên */
}
.bg-section {
	background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
				url('../images/bg_hocbong.jpg') center/cover no-repeat;
	color: white; /* Màu chữ trắng để nổi bật */
	padding: 0px 0; /* Tạo khoảng cách trên/dưới */
}
section {
	min-height: 450px; /* Tăng chiều cao của section */
}
/* Header & Navbar */
		.navbar .dropdown-menu {
			position: absolute;
			left: auto !important;
			right: auto !important;
		}
		.nav-item{
			padding-left:10px;
			padding-right:10px;
		}
        .navbar {
            font-size: 18px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-nav .nav-link {
            color: white;
            transition: 0.3s;
            padding: 10px 20px;
        }

        .navbar-nav .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            transform: scale(1.05);
        }

        .dropdown-menu {
            border-radius: 8px;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
        }

        .dropdown-item {
            font-size: 16px;
            transition: 0.3s;
        }

        .dropdown-item:hover {
            background-color: #007bff;
            color: white;
        }

        /* Logo Roboto-Bold,sans-serif*/
        .navbar-brand img {
            height: 50px;
            margin-right: 10px;
        }
		/* tin tuyen sinh */
	.text-danger {
    color: #E76F51 !important; /* Màu cam */
	}

	.card img {
		
		object-fit: cover;
	}

	.card {
		border-radius: 10px;
	}

	.bg-light {
		padding: 20px;
	}
	/* footer */
	.bg-teal {
    background-color: #001b61; /* Màu xanh giống ảnh */
	}

	.footer ul {
		padding: 0;
	}

	.footer ul li {
		list-style: none;
		margin-bottom: 8px;
	}

	.footer i {
		margin-right: 10px;
	}

	.social-icons i {
		font-size: 20px;
		margin-right: 15px;
		cursor: pointer;
	}

	.social-icons i:hover {
		color: #ffcc00;
	}
	.fb-page { width: 100% !important; }
        .custom-card {
			width: 100%;
            border-radius: 12px;
            padding: 20px;
            background: #d3d3d3; /* Màu nền sáng */
            transition: 0.3s;
        }

        .custom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
        }

        .custom-card.dark {
            background: #002892; /* Màu nền đậm */
            color: white;
        }

        .icon {
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-bottom: 10px;
        }

/* Định dạng ảnh */
	.shine-effect {
		position: relative;
		display: block;
		overflow: hidden; /* Đảm bảo không bị tràn ra ngoài */
	}

	/* Hiệu ứng ánh sáng chém xéo */
	.shine-effect::before {
		content: "";
		position: absolute;
		top: 0;
		left: -120%;
		width: 100%;
		height: 100%;
		background: linear-gradient(120deg, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0) 80%);
		transform: skewX(-25deg);
		transition: left 0.6s ease-in-out;
	}

	/* Khi hover vào ảnh, vệt sáng chạy qua từ trái sang phải */
	.card:hover .shine-effect::before {
		left: 120%;
	}
	
	/* tạo nút hotline bên trái */
	.hotline-phone-ring-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
}
.hotline-phone-ring {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 110px;
  height: 110px;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: visibility .5s;
  left: 0;
  bottom: 0;
  display: block;
}
.hotline-phone-ring-circle {
	width: 85px;
  height: 85px;
  top: 10px;
  left: 10px;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid #e60808;
  -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  transition: all .5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
	width: 55px;
  height: 55px;
  top: 25px;
  left: 25px;
  position: absolute;
  background-color: rgba(230, 8, 8, 0.7);
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  transition: all .5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
	background-color: #e60808;
	width: 33px;
  height: 33px;
  top: 37px;
  left: 37px;
  position: absolute;
  background-size: 20px;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotline-phone-ring-img-circle .pps-btn-img {
	display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
	width: 20px;
	height: 20px;
}
.hotline-bar {
  position: absolute;
  background: rgba(230, 8, 8, 0.75);
  height: 40px;
  width: 180px;
  line-height: 40px;
  border-radius: 3px;
  padding: 0 10px;
  background-size: 100%;
  cursor: pointer;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  z-index: 9;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50px !important;
  /* width: 175px !important; */
  left: 33px;
  bottom: 37px;
}
.hotline-bar > a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  text-indent: 50px;
  display: block;
  letter-spacing: 1px;
  line-height: 40px;
  font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
  color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.5) skew(1deg);
    -webkit-opacity: 0.1;
  }
  30% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    -webkit-opacity: 0.5;
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    -webkit-opacity: 0.1;
  }
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
}
@-webkit-keyframes phonering-alo-circle-img-anim {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}
@media (max-width: 768px) {
  .hotline-bar {
    display: none;
  }
}
/*zalo */
.zalo-phone-ring-wrap {
  position: fixed;
  bottom: 80px; /* Dịch lên để không đè lên nút hotline */
  left: 0;
  z-index: 999999;
}
.zalo-phone-ring {
  position: relative;
  background-color: transparent;
  width: 110px;
  height: 110px;
  cursor: pointer;
  z-index: 11;
  transition: visibility 0.5s;
  left: 0;
  bottom: 0;
  display: block;
}
.zalo-phone-ring-circle {
  width: 85px;
  height: 85px;
  top: 10px;
  left: 10px;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid #0078ff; /* Xanh dương đặc trưng của Zalo */
  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  opacity: 0.5;
}
.zalo-phone-ring-circle-fill {
  width: 55px;
  height: 55px;
  top: 25px;
  left: 25px;
  position: absolute;
  background-color: rgba(0, 120, 255, 0.7);
  border-radius: 100%;
  border: 2px solid transparent;
  animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
}
.zalo-phone-ring-img-circle {
  background-color: #0078ff;
  width: 33px;
  height: 33px;
  top: 37px;
  left: 37px;
  position: absolute;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
}
.zalo-phone-ring-img-circle .pps-btn-img img {
  width: 20px;
  height: 20px;
}

/* dinh dang mobile */
	@media (max-width: 600px) {
	.slider {
			background: url('../images/slide_mobile.jpg') center/cover no-repeat;
            position: relative;
            padding-top: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
		.form-container {
			margin-top:220px;
		}
	}
	@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
      /*  max-width: 100%!important; */
		max-width: 1140px;
		}
	}
	@media (min-width: 1400px) {
		.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 1320px!important;
	  }
	}