* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
--awb-box-shadow: 0px 5px 0px 0px var(--awb-color4) inset;
--awb-submenu-space: 33px;
--awb-transition-time: 300;
}
html {
  scroll-behavior: smooth;
}
body{font-family: "Arial",Helvetica,sans-serif; font-size:16px;    line-height: 1.6;overflow-x:hidden}
p{margin-bottom:15px}
header {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
}
img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.top-bar {
    background-color: #175691; 
    color: white;
    padding: 5px 0;
}
.contact-info span{    color: #d2d0ce;}
.header_menu.active .nutmo{display:none}
.nutdong{transform: rotate(0deg);transition: transform 0.5s ease; }
.header_menu.active .nutdong{display:block;transform: rotate(360deg);transition: all 3s cubic-bezier(.42,.01,.58,1);transition: all 3s;
    transition-timing: ease-in-out;
}
.bar2{background: #57585a;
    height: 3px;--awb-transition-time: 300;
    margin-bottom: 6px;
    width: 30px;transform: rotate(90deg);margin-top: -8px;
}
.top-bar a {
    color: #fff;
    text-decoration: none;
}

.top-bar .contaner {
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

.contaner {
    max-width: 1280px;
    margin: 0 auto; 
    box-sizing: border-box;
}

.contact-info {
    overflow-x: auto;
    white-space: nowrap; 
}

.contact-info .padding10lr {
    display: inline-flex; 
    gap: 15px; 
}

.contact-info span {
    display: inline-block;
    margin-right: 20px; 
}

.contact-info span a {
    text-decoration: none;
    color: #d2d0ce;
}

.contact-info span a:hover {
    color: #ffffff;
}
.nutmenu_mobile svg{width:40px;}
.contact-info img {
    width: 14px; 
    margin-right: 5px;
}

.social-icons a {
    color: white;
    text-decoration: none;
    margin-left: 10px;
    font-size: 18px;
}

.main-header {
    background-color:#d6d7d8; 
    padding: 15px 0;
}

.main-header .contaner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    max-height: 70px;
}

.iconphone img {
    width: 14px;
    margin-right: 5px;
}

.social-icon.facebook img {
    width: 10px;
}

.social-icon {
    background: #2f2f2f; 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    align-content: center; 
}

.social-icon img {
    width: 14px;
}

.list-menu {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menu li {
    margin: 0 10px;
}

.menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.menu a:hover {
    color: #175691;
}

.nutmenu_mobile {
    display: none;
}
.nutdong{display:none}
.nutmenu_mobile.active .nutdong{display:block}
.nutmenu_mobile.active .nutmo{display:block}
.bar1{background: #57585a;height:3px;margin-bottom:6px;width:30px}

.navbar{
	width: 100%;
	height: 50px;
	font-size: 15px;
	
}
.navbar li {
	float: left;
	position: relative;
	list-style: none;
	text-align: left;
	width: auto;
}
.navbar li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: bold;
    display: flex;
    color: #333;
    align-items: center;
    justify-content: space-between;
}
.list-menu .navbar li ul{
	display: none; min-width:250px;
	background: #fff;
	box-shadow: var(--awb-box-shadow);
    transition: opacity calc(var(--awb-transition-time) * 1ms) cubic-bezier(.42, .01, .58, 1);z-index:9999999
    
}
.wid6{flex-basis: 60%;
    max-width: 60%;}
.wid6{flex-basis: 40%;
    max-width: 40%;}		
.flex2{}
.list-menu .navbar li ul a{font-family: "Open Sans", Arial, Helvetica, sans-serif!important;font-weight:normal}
.navbar > li > a{line-height:33px;text-transform:uppercase}
.navbar li:hover li{
	float: none;
}

.navbar li:hover > ul {
  display: block;
  position: absolute;
}

.navbar li ul li{
	border-top: 0;
}
.navbar ul ul{
  left: -100%;
  top: 0;
}
.navbar ul li:hover{
background-color: #d1d3d4;
}
.banner {
 min-height: calc( 100vh - 190px );
 background-size: cover;
 background-attachment: fixed;
 background-image: url(../images/home-baner.png);
 display: flex;
    align-items: flex-end;
    align-content: flex-end;

}
.banner .contaner {
     display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-end;
}
.banner .motangan {
    font-size: 30px;
    font-family: "Arial",Helvetica,sans-serif;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.banner .contaner .bentrai{flex-basis: 60%;
    max-width: 60%;}
.banner .contaner .benphai{flex-basis: 40%;
    max-width: 40%;}
.banner h1 {
    font-size: 70px;
    font-family: "Arial",Helvetica,sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    text-align: center;
}
.banner .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.banner .buttons a.btn-primary{background: #57585a;
    color: #ffffff;}
.banner .buttons a.btn-secondary{background: #1e4b80;
    color: #ffffff;}	
.banner .buttons a{padding:13px 23px;text-decoration:none;font-family: "Arial",Helvetica,sans-serif;font-weight: bold;font-size:16px}	
.z-index1{z-index:1}
.flex2{display:flex}
.home2 {
    position: relative;
    width: 100%;
}
.background-triangle {
    position: absolute;
width:100%;height:100%;bottom:0px;left:0px;
}
.home2 .left-column{padding-top:50px;flex-basis: 60%;
    max-width: 60%;padding-right:20px}
.home2 .right-column{padding-top:135px;flex-basis: 40%;
    max-width: 40%;padding-left:20px}
.home2 .contaner{display:flex;flex-wrap: wrap;}	
.home2 ul{list-style:none;margin:0px;padding:0px}
.home2 ul li:before{content:"\f058";font-weight: 900;font-family: "Font Awesome 6 Free";-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;color:#5296d5
	}
.home2 .mota{margin-bottom:20px}
.home2 ul li {
    display: flex;
    gap: 16px;
    margin-bottom: 15px;
}

.home2 h2 {
    font-size: 32px;
    margin-bottom: 30px;
}
.home3 .contaner{display: grid;
    grid-template-columns: repeat(4,1fr);
grid-gap: 10px;}

.hinhtext {
    position: relative;
}
.text-hom3{position:absolute;z-index:1;height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    top: 0;}
.text-hom3 .tect-hh {
    display: flex;
     font-family: "Roboto Slab", serif;
    color: #fff;
    font-size: 28px;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
}
.noidunghover {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.flip-box {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;overflow:hidden;border-radius:6px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #ffffff;
  color: #fff;
}

.flip-box-back {
  background-color: #293869;
  color: #fc0;
  transform: rotateY(180deg);text-align:left;
}
.flip-box-back  ul{margin-left:20px}
.flip-box-back a{  color: #fc0;}
.xemthem{display:block;text-align:center}
.xemthem a{text-decoration:none;font-weight:bold;margin-top:30px}
.home3{background:#d0d3d4;padding-top:80px;padding-bottom:80px}
.footer{background:#316294;padding-top:50px;padding-bottom:50px}
.footer .contaner{display: grid;
    grid-template-columns: repeat(4,1fr);
grid-gap: 30px;}
.footer h3{color: #fff;
    font-size: 20px;
    margin-bottom: 20px;}
.footer ul{list-style:none;margin:0px;padding:0;color:#fff}
.footer ul li {
    margin-bottom: 15px;
    border-bottom: 1px dashed #fff;
    padding-bottom: 10px;display:flex;
}
.footer ul li:before{content:"\f105";display:inline-flex;font-family: "Font Awesome 6 Free";font-weight:900;margin-right:10px}
.footer .kkk ul li:before{display:none}
.footer .kkk ul li{border-bottom:none}
.footer .kkk ul li i{margin-right:10px;font-size:14px;padding-top:10px}
.footer ul a{text-decoration:none;color:#fff}
.copright .contaner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.textcoo{font-weight:bold}
.tieudepage{min-height:200px;background-color:#bbc0c9;background-image:url(../images/logo.png);background-repeat:no-repeat;background-position:right 20% center;background-size:250px}

.tieudepage h1 {
    font-size: 50px;
    font-weight: bold;color:#293869;
    text-transform: uppercase;
	display: flex;
    justify-content: flex-start;
    align-items: center;height: 200px; font-family: "Roboto Slab", serif;
}
.thongtinlienhe .contaner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.thongtinlienhe{padding-bottom:50px;padding-top:50px}
.map-section iframe{height:100%!important}
.map-section{height:700px}
.thongtinlienhe .contaner .benphai{flex-basis: 50%;
    max-width: 50%;}
.thongtinlienhe .contaner .bentrai{flex-basis: 50%;
    max-width: 50%;}
.contact-section{padding-left:40px}
.contact-section h2 {
    margin-bottom: 15px;
    color: #111;
    font-size: 50px;
}

.contact-section p {
  margin-bottom: 10px;
}

.contact-section a {
  color: #007bff;
  text-decoration: none;
}

.contact-section a:hover {
  text-decoration: underline;
}

.contact-form {
  margin-top: 20px;
}
.icon-money:before {
    content: "\f0d6";
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.contact-form button {
  width: fit-content;
    padding: 10px;
    border: none;
    background-color: #316294;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    padding-left: 20px;
    padding-right: 20px;
}

.contact-form button:hover {
  background-color: #0056b3;
}
.vungpract .contaner{    display: flex;
    flex-wrap: wrap;}
.vungpract .contaner .bentrai{    flex-basis: 30%;
    max-width: 30%;}
.vungpract p{margin-bottom:15px}	
.vungpract .contaner .bentrai .noidung{ position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;padding-right:40px;
    top: 10px;
	padding-bottom:100px;
}	
ul.fancy-list {
    list-style-type: none;
    list-style-position: outside;
}
ul.fancy-list li {
    display: block;
    position: relative;
    padding-left: 20px;
    line-height: 22px;
	padding-bottom: 10px;list-style-type: none;
    list-style-position: outside;
}
ul.fancy-list.blue li:before {
    color: #3498db;
}
ul.fancy-list.rounded-tick li:before {
    content: "\f058";
}
ul.fancy-list li:before {
    font-family: FontAwesome;
    font-style: normal;
    color: #333334;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 14px;
    position: absolute;
    top: 1px;
    left: 0px;
}
.border-title {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 10px;
    color: #333334;
    font-weight: bold;
    text-align: center;
}

.vungpract{padding-top:50px;padding-bottom:50px}
.vungpract .contaner .bentrai .noidung ul {
    border-right: 1px solid #d9d9d9;
    float: left;
    width: 100%;
    margin: 0px 0px 0px -1px;
    padding: 0px;    list-style: none;
    position: relative;
	}
.vungpract .contaner .bentrai .noidung ul li {
    display: block;
    margin: 0px;
    padding: 0px 0px 2px;
    background: url(../images/sidenav-splitter.png) right bottom no-repeat;
}
.vungpract .contaner .bentrai .noidung ul li a{display: block;
    line-height: 52px;
    font-weight: bold;
    color: #333334;
    border-right: 4px solid #ececec;
    background: url(../images/sidenav-bg.png) right repeat-y;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 500ms linear;text-decoration: none;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;}


.vungpract .contaner .bentrai .noidung ul li a span {
    background: #333334;
    border: 3px solid #e2e2e2;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
    margin: 10px 10px 0px 0px;
    float: left;
    border-radius: 25px;    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.vungpract .contaner .bentrai .noidung ul li:hover span{
    -moz-transform: scale(1) rotate(360deg) translate(0px);
    -webkit-transform: scale(1) rotate(360deg) translate(0px);
    -o-transform: scale(1) rotate(360deg) translate(0px);
    transform: scale(1) rotate(360deg) translate(0px);
}
.icon-bar-chart:before {
    content: "\f080";
}
.icon-group:before {
    content: "\f0c0";
}
.icon-user:before {
    content: "\f007";
}
.icon-comments:before {
    content: "\f086";
}
.icon-file:before {
    content: "\f016";
}
.icon-home:before {
    content: "\f015";
}

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    margin-top: 0;display: inline-block;
}	
.vungpract .contaner .benphai{    flex-basis: 70%;
    max-width: 70%;}	
	
.resouce-nguyenlan .contaner{ display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px;}
.resouce-nguyenlan {padding-bottom:50px;padding-top:50px}	
.resouce-nguyenlan a{color:#316294;text-decoration:none}
.resouce-nguyenlan ul{list-style:none;margin:0px;padding:0px}	
.resouce-nguyenlan ul li{margin-bottom:10px}
.suvite{font-size:18px;font-weight:bold}
.resource-section h3{font-weight:bold;font-size:30px}
.location-section{padding-bottom:50px;padding-top:50px}
.location-section h2{font-size: 30px;
    margin-bottom: 30px;}
	
.location-content{ display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px;padding-top:30px}
.request .bentrai{ flex-basis: 65%;
    max-width: 65%;}
.form-container{padding-right:30px}	
.request .contaner{display: flex;
    flex-wrap: wrap;}	
.request{padding-bottom:50px;padding-top:50px}	
.request h1{font-size:32px;margin-bottom:30px}
.request .benphai{ flex-basis: 35%;
    max-width: 35%;}

.request form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.request form input, form textarea, form button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.request form textarea {
    resize: none;
    height: 100px;
}

.request form h3 {
    margin-top: 20px;
    color: #003366;
}

.request form button {
    background: #003366;
    color: white;
    border: none;
    margin-top: 20px;
    cursor: pointer;    width: fit-content;
    padding-left: 20px;
    padding-right: 20px;
}

.request form button:hover {
    background: #00509e;
}

.contact-details {
    padding-left: 20px;

}
.profile-text{padding-left:20px;}
.thongtinprofile{margin-bottom:30px;margin-top:30px}
.thankss{font-size:16px;font-weight:bold;padding-top:20px;padding-bottom:20px}
.profile-image{font-size:18px;font-weight:bold;margin-bottom:20px}
.profile-image img{margin-bottom:30px}
.location-content iframe{width:100%;min-height:424px}
.thongtinprofile .contaner{display: flex;
    flex-wrap: wrap;}
.thongtinprofile .contaner .bentrai{    flex-basis: 20%;
    max-width: 20%;}	
.thongtinprofile .contaner .benphai{    flex-basis: 80%;
    max-width: 80%;}	
.can2hang{display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;}
.adobe-logo{margin-bottom:10px}	
.thongtinclinetfomr{padding-bottom:50px;padding-top:50px}
@media (max-width: 768px) {
.banner .contaner .benphai {
    display:none;
}	
.banner .contaner .bentrai {
    flex-basis: 100%;
    max-width: 100%;
}	
.tieudepage h1 {
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 200px;
}	
.banner h1{font-size:32px}
.banner .motangan {
    font-size: 18px;
}
.banner .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
	padding-bottom:30px;
}
.home2 .left-column {
    padding-top: 50px;
    flex-basis: 100%;
    max-width: 100%;
    padding-right: 0px;
}
.home2 .right-column {
    padding-top: 15px;
    flex-basis: 100%;
    max-width: 100%;
    padding-left: 0px;
}

.home3 .contaner {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 10px;
}
.banner {
    min-height: 50vh;

}
.can2hang{
    grid-gap: 10px;}	
.profile-text{padding-left:0px;}	
.thongtinprofile .contaner .bentrai{    flex-basis: 100%;
    max-width: 100%;}	
.thongtinprofile .contaner .benphai{    flex-basis: 100%;
    max-width: 100%;}
.request .bentrai{ flex-basis: 100%;
    max-width: 100%;}	
.request .benphahi{ flex-basis: 100%;
    max-width: 100%;}	
.form-container{padding-right:0px}		
.resouce-nguyenlan .contaner{ display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 30px;}	
.location-content{ display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 30px;}
.vungpract .contaner .bentrai .noidung {
    position: relative;
    padding-right: 0;
    top: 10px;
    padding-bottom:30px;
}	
	
	.contaner{padding-left:10px;padding-right:10px}
    .hide_mobi {
        display: none; 
    }

    .list-menu {
        display: none; 
    }

    .nutmenu_mobile {
        display: block; 
        cursor: pointer;
    }

    .contact-info {
        padding: 10px; 
    }
	
.thongtinlienhe .contaner .bentrai {
    flex-basis: 100%;
    max-width: 100%;
}	
.thongtinlienhe .contaner .benphai {
    flex-basis: 100%;
    max-width: 100%;
}	
.vungpract .contaner .bentrai{    flex-basis: 100%;
    max-width: 100%;}
.vungpract .contaner .benphai{    flex-basis: 100%;
    max-width: 100%;}	
.contact-section h2 {
    margin-bottom: 15px;
    color: #111;
    font-size: 25px;
}
.contact-section {
    padding-left: 0px;padding-top:30px
}
.footer .contaner {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 30px;
}
.tieudepage{background-image:none!important}	
header.active{position: absolute;top:0;width: 100%;}
header.active .list-menu {
    display: block;
    position: absolute;
    top: 132px;
    background: #fff;
    width: 100%;
    left: 0;
    height: 80vh;z-index: 9999999;
    overflow-y: scroll;
}
header.active .list-menu .navbar {
    display: flex;
    flex-direction: column;

}
header.active .list-menu .navbar li{ height: 40px;}
.logo img {
    max-height: 50px;
}
header.active .nutmo{display:none}
header.active .nutdong{display:block;transform: rotate(405deg);
    transition: transform 0.3s ease; }
.nutdong{transform: rotate(0deg);
    transition: transform 0.3s ease;}
.request .benphai {
    flex-basis: 100%;
    max-width: 100%;
}
.contact-details h2{margin-top:30px}
.contact-details{margin-top:30px}


}