/* ================= MEDIA SCREEN ================= */
/* ================= XX-Large (Huge Desktop) ================= */
@media (min-width: 1400px){
	
}

/* ================= Large Devices (Desktop) ================= */
@media (min-width: 992px){
	.infor-modal-team{
		padding-left:20px;
	}

    .connect-us{
        padding-left:40px;
    }

	aside {
		padding-left:40px;
	}

	#menu .nav-item .dropdown-menu {
        display: none;
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        width: 200px;
        background-color: var(--white);
        transition: .3s;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    #menu .nav-item:hover .dropdown-menu {
        display: block;
        visibility: visible;
    }
    
    /* Tạo khoảng cách giữa menu item và dropdown */
    #menu .nav-item .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
        background: transparent;
    }
}

/* ================= Devices (Portrait Phones + Tablets) ================= */
@media (max-width: 767.98px) {
    #team .modal-body h4{
        font-size:25px;
        margin:25px 0 10px;
    }

    #team .modal-body h4, #team .modal-body h6{
        text-align:center;
    }

    #team .modal-body h6, .modal-desc{
        font-size:16px;
    }

    .modal-body .rounded{
        max-width:75%;
        display: block;
        margin:0 auto;
    }

    .page-title h1 span,
    .page-title h2 span{
        font-size:35px;
    }

    footer .address{
        display:block;
        margin-bottom:30px;
    }
    
	#highlight article h1 strong{
		font-size:35px;
	}

    #highlight article h1 span{
        font-size:42px;
    }

	.fade-char {
        animation-duration: 0.3s;
    }
	
	/* Mobile dropdown menu styles */
	#menu .dropdown-menu {
		display: block;
		position: static;
		width: 100%;
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin-top: 10px !important;
		transform: none !important;
	}
	
	#menu .dropdown-menu.show {
		display: block !important;
	}
	
	#menu .dropdown-item {
		padding: 8px 15px !important;
		border-bottom: 1px solid #eee !important;
		font-size: 14px !important;
		color: #333 !important;
	}
	
	#menu .dropdown-item:last-child {
		border-bottom: none !important;
	}
	
	#menu .dropdown-item:hover {
		background-color: #f8f9fa !important;
	}
	
	/* Ensure dropdown toggle works on mobile */
	#menu .dropdown-toggle::after {
		display: inline-block !important;
		margin-left: 0.255em !important;
		vertical-align: 0.255em !important;
		content: "" !important;
		border-top: 0.3em solid !important;
		border-right: 0.3em solid transparent !important;
		border-bottom: 0 !important;
		border-left: 0.3em solid transparent !important;
	}
	
	#menu .dropdown-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg) !important;
	}

	.page-title h1{
		font-size:50px !important;
	}

	.bg-technology p{
		font-size:25px;
	}

	#intro-tech .title-section{
		margin-top:15px;
	}

	#intro-tech .row.space_section{
		padding:0;
	}

	.title-section h2{
		font-size:34px;
	}

	.title-section p{
		font-size:18px;
	}

	.bg-overview article {
		padding: 30px 20px;
	}

	.bg-overview article h3{
		font-size:32px;
	}

	.bg-overview article ul li{
		font-size:20px;
	}

	.bg-overview article .special li{
		width:100%;
	}

	.box-progress{
		padding:30px 0;
	}

	.box-progress p{
		margin-bottom:100px;
	}

	.nth-p:last-child p{
		margin-bottom:20px;
	}

	#process-tech figure figcaption{
		margin-bottom:30px;
	}

	#faq{
		padding-top:20px;
	}

	.accordion-button{
		font-size:18x;
	}

	.copyright{
        margin-top:20px;
		text-align:center;
	}

	footer .social{
		margin-top:20px;
		float:none;
		text-align:center;
	}

	footer ul li a{
		font-size:16px;
	}

	footer h5{
		font-size:18px;
        margin-top:25px;
	}

	footer .text-a{
		margin-bottom:50px;
		text-align:center;
	}
	
	#highlight article h1{
		font-size:46px;
	}

	#highlight article p{
		font-size:21px;
	}

	.address li{
		font-size:14px;
	}

	.logo-footer img{
        width:230px;
		display: block;
		margin:0 auto;
	}

	.order-a{
		order:2;
	}

	.order-b{
		order:1;
	}

	#original{
		max-width:55%;
        margin: -50px auto 0;
        display: block;
	}

	#introduction .text-a a{
		font-size:16px;
		padding:10px 20px;
	}

	.sub-intro{
		margin-top:30px;
	}

	.sub-intro h3{
		font-size:40px;
	}

	.sub-intro h6{
		font-size:18px;
		line-height:1.6;
	}

	.group-article article{
		width:100%;
		margin-bottom:35px;
	}

	.group-article{
		display: block;
	}

	.sub-intro article p,
	.carousel-item p{
		font-size:18px;
	}

	.content-slide{
		margin-top:20px;
		padding-left:0;
	}

	.carousel-control{
		margin-top:20px;
		position:static;
		transform:none;
		justify-content: center;
	}
	
	.carousel-indicators{
		top:10px;
		bottom:auto;
	}

	.carousel-indicators [data-bs-target]{
		opacity: 0.8;
	}

	.carousel-item h5{
		font-size:28px;
	}

	#team{
		padding:0;
	}

	#team article .frame-img img{
		width:150px;
	}

	#team article .desc h5{
		font-size:26px;
	}

	#team article .desc p{
		font-size:17px;
		color:rgba(255, 255, 255, 0.7);
	}

	#team article{
		margin-bottom:20px;
	}

	.group-title p{
		font-size:18px;
		line-height:1.5;
	}
}

/* ================= X-Small Devices (Portrait Phones) ================= */
@media (max-width: 575.98px){
	
}

/* ================= NEWS GRID RESPONSIVE ================= */
/* Tablet and smaller devices */
@media (max-width: 991.98px) {
    header{
        padding:10px 0;
    }
    
	#menu{
		position:absolute;
		top:40px;
		left:0;
		width:100%;
		background:var(--white);
		margin-top:15px;
		padding-top:5px;
		border-top:1px solid #d0d0d0;
		border-bottom:1px solid #d0d0d0;

	}

	.navbar-toggler:focus{
		outline:none;
		box-shadow:none;
	}

	header.sticky .navbar-brand img {
		height: 35px;
	}
	
	header.sticky .navbar-toggler {
		padding: 0.25rem 0.5rem;
	}

	.list-group {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px !important;
	}
	
	/* Tablet dropdown menu styles */
	#menu .dropdown-menu {
		display: none !important;
		position: static !important;
		width: 100% !important;
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin-top: 10px !important;
		transform: none !important;
	}
	
	#menu .dropdown-menu.show {
		display: block !important;
	}
	
	#menu .dropdown-item {
		padding: 8px 15px !important;
		border-bottom: 1px solid #eee !important;
		font-size: 14px !important;
		color: #333 !important;
	}
	
	#menu .dropdown-item:last-child {
		border-bottom: none !important;
	}
	
	#menu .dropdown-item:hover {
		background-color: #f8f9fa !important;
	}
	
	/* Ensure dropdown toggle works on tablet */
	#menu .dropdown-toggle::after {
		display: inline-block !important;
		margin-left: 0.255em !important;
		vertical-align: 0.255em !important;
		content: "" !important;
		border-top: 0.3em solid !important;
		border-right: 0.3em solid transparent !important;
		border-bottom: 0 !important;
		border-left: 0.3em solid transparent !important;
	}
	
	#menu .dropdown-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg) !important;
	}
}

/* Mobile devices */
@media (max-width: 767.98px) {
    .connect-us li span{
        font-size:13px;
    }

    .connect-us ul li img{
        width:36px;
        height:36px;
        margin-top:10px;
        margin-right:13px;
    }

    .connect-us{
        margin-top:40px;
        margin-bottom:0;
    }
    
	.img-spec{
		margin-top:-50px;
		width:100%;
	}

	.list-group {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	
	.item-group .card-body {
		padding: 20px !important;
	}
	
	.item-group .card-title {
		font-size: 18px !important;
	}

	.group-title h2{
		margin-bottom:10px;
	}

	.form-group, .form-select{
		margin-bottom:30px;
	}

	.page-title h1, .page-title h2{
		font-size:40px;
	}

	.page-title p{
		font-size:16px;
        line-height:1.6;
	}

    .content-body h5 a{
        font-size:18px;
    }

    .item-group .excerpt{
        font-size:16px;
    }

	.abs-link{
		top:5px;
	}

	.abs-link a{
		padding:3px 15px;
	}

	.bg-title-page .bg-overlay{
		padding:50px 0 40px;
	}

	.space_section{
		padding:50px 0;
	}

	.item-group{
		margin-bottom:35px;
	}

	.category-group .group-title h2{
		font-size:30px;
	}

	.detail-content h1{
		font-size:32px;
	}

	.summary p{
		font-size:18px;
	}

	.description, .description p{
		font-size:18px;
	}

	aside{
		margin-top:40px;
	}

	.box-avatar img{
		width:100%;
	}

	.box-avatar{
		margin-bottom:20px;
	}

	.box-content{
		float:none;
		margin-top:20px;
		width:100%;
	}

	.box-content h4 a{
		font-size:20px;
	}
}

/* Small mobile devices */
@media (max-width: 575.98px) {
	.list-group {
		gap: 15px !important;
		margin-top: 30px !important;
	}
	
	.item-group .card-body {
		padding: 15px !important;
	}
	
	.item-group .card-title {
		font-size: 16px !important;
	}
	
	.item-group p {
		font-size: 16px !important;
	}
}