:root {
--main-color: #005291;
--yellow-color: #ffc102;
}
body {
font-family: "Montserrat", sans-serif;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none;
color: var(--main-color);
}
img {
height: auto;
max-width: 100%;
}
.main-header {
border-bottom: 2px solid var(--yellow-color);
margin-bottom: 9px;
position: sticky;
top: 0;
z-index: 11;
background: #fff;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 96px;
}
.header .header--btn-menu {
display: none;
}
.header .logo img {
max-height: 70px;
width: auto;
}
.header .main-menu {
font-size: 14px;
font-weight: 600;
gap: 20px;
}
.header .main-menu a {
color: var(--main-color);
}
.header .main-menu a.has-children {
padding-right: 15px;
position: relative;
}
.header .main-menu a.has-children:after {
content: "";
border: solid var(--main-color);
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
position: absolute;
right: 2px;
top: 3px;
}
.header .main-menu > li {
position: relative;
}
.header .main-menu > li > a {
text-transform: uppercase;
}
.header .main-menu > li:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: perspective(400px) rotate3d(0, 0, 0, 0);
}
.header .main-menu .sub-menu {
position: absolute;
z-index: 3;
background: #fff;
min-width: 190px;
list-style: none;
padding: 0;
left: 0;
top: 100%;
opacity: 0;
visibility: hidden;
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform-origin: 50% 0;
transition: 350ms;
text-align: center;
box-shadow: 0 0 5px #ccc;
}
.header .main-menu .sub-menu li {
padding: 9px;
}
.header .main-menu .sub-menu li ~ li {
border-top: 2px solid var(--yellow-color);
}
.menu-language {
list-style: none;
padding: 0;
margin: 0;
}
.menu-language a[data-lang] {
width: 40px;
display: block;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.menu-language a[data-lang=vi] {
background-image: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/vi.png);
}
.menu-language a[data-lang=en] {
background-image: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/en_US.png);
}
.menu-language > li {
position: relative;
}
.menu-language > li:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: perspective(400px) rotate3d(0, 0, 0, 0);
}
.menu-language ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-language .sub-menu {
position: absolute;
z-index: 3;
min-width: 100%;
list-style: none;
padding: 0;
left: 0;
top: 100%;
opacity: 0;
visibility: hidden;
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform-origin: 50% 0;
transition: 350ms;
}
footer {
background: var(--main-color);
border-bottom: 10px solid #f07132;
}
.company {
padding-top: 50px;
padding-bottom: 30px;
color: #fff;
}
.company a {
color: #fff;
}
.company-name {
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: #fff;
text-align: center;
margin-bottom: 1rem;
}
.company-items {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.company-item {
display: flex;
gap: 5px;
}
.company-item:before {
content: "";
display: block;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.company-item-address:before {
background-image: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/icon-map.png);
height: 21px;
width: 15px;
}
.company-item-phone:before {
background-image: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/icon-phone.png);
height: 21px;
width: 21px;
}
.company-item-email:before {
background-image: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/icon-mail.png);
width: 22px;
height: 21px;
}
.company-item-website:before {
background-image: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/icon-web.png);
width: 21px;
height: 21px;
}
.section-title {
--title-size: 30px;
--title-radius: 10px;
text-align: center;
}
.section-title span {
background: rgb(0, 82, 145);
background: linear-gradient(93deg, rgb(0, 82, 145) 0%, rgb(0, 119, 192) 50%, rgb(0, 82, 145) 100%);
color: #fff;
text-transform: uppercase;
font-size: var(--title-size);
font-weight: bold;
padding: 5px 10px;
border-radius: var(--title-radius);
}
@media (max-width: 768px) {
.section-title {
--title-size: 26px;
}
}
.section-title-bg {
font-weight: bold;
font-size: 32px;
text-transform: uppercase;
text-align: center;
color: var(--main-color);
}
.section-title-bg span {
background: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/title-event.png) no-repeat top center;
background-size: 100% 125px;
height: 122px;
display: inline-block;
padding-top: 24px;
padding-left: 50px;
padding-right: 50px;
position: relative;
}
@media (max-width: 500px) {
.section-title-bg {
font-size: 16px;
}
.section-title-bg span {
background-size: 100% 80px;
height: 90px;
padding-top: 18px;
padding-left: 25px;
padding-right: 25px;
}
}
.section-title-bg-yellow {
font-weight: bold;
font-size: 32px;
text-transform: uppercase;
text-align: center;
color: var(--main-color);
}
.section-title-bg-yellow span {
background: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/title-event.png) no-repeat top center;
background-size: 100% 125px;
height: 122px;
display: inline-block;
padding-top: 24px;
padding-left: 50px;
padding-right: 50px;
position: relative;
}
.section-title-bg-yellow span:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 22px 37px 0 37px;
border-color: var(--yellow-color) transparent transparent transparent;
border-style: solid;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 500px) {
.section-title-bg-yellow {
font-size: 16px;
}
.section-title-bg-yellow span {
background-size: 100% 80px;
height: 90px;
padding-top: 18px;
padding-left: 25px;
padding-right: 25px;
}
}
#vc-phone, #vc-email, #vc-zalo, #vc-messenger, #vc-andi, #vc-anhien {
right: 10px;
left: auto;
}
@media (max-width: 1366px) {
.header .main-menu {
font-size: 13px;
gap: 12px;
}
}
@media (max-width: 1024px) {
.header {
gap: 1rem;
}
.company-items {
flex-wrap: wrap;
gap: 1rem;
}
}
@media (max-width: 820px) {
.header .menu-language {
margin-left: auto;
}
.header .main-menu {
position: fixed;
width: 80vw;
height: 100vh;
background-color: #F5F6FA;
-webkit-font-smoothing: antialiased;
transform-origin: 0 0;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
top: 0;
right: 0;
z-index: 2;
padding: 100px 2rem 2rem;
flex-direction: column;
align-items: center;
}
.header .main-menu.active {
transform: none;
}
.header .main-menu li > a {
font-size: 20px;
}
.header .main-menu li > a.has-children:after {
top: 6px;
}
.header .main-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
width: auto;
transform: none;
background: none;
box-shadow: none;
}
.header .main-menu .sub-menu a {
font-size: 18px;
}
.header .main-menu .sub-menu li ~ li {
border-top: 0;
}
.header .header--btn-menu {
display: block;
border: 0;
padding: 0;
box-shadow: none;
background: transparent;
z-index: 3;
}
.header .header--btn-menu svg {
width: 60px;
}
.header .header--btn-menu svg:hover #top-line {
animation: down-rotate 0.6s ease-out both;
}
.header .header--btn-menu svg:hover #bottom-line {
animation: up-rotate 0.6s ease-out both;
}
.header .header--btn-menu svg:hover #middle-line {
animation: hide 0.6s ease-out forwards;
}
.header .header--btn-menu #top-line,
.header .header--btn-menu #bottom-line,
.header .header--btn-menu #middle-line {
transform-box: fill-box;
transform-origin: center;
}
}
@keyframes up-rotate {
0% {
animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
transform: translateY(0px);
}
30% {
transform-origin: center;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
transform: translateY(-10px);
}
100% {
transform-origin: center;
transform: translateY(-10px) rotate(45deg) scale(0.9);
}
}
@keyframes down-rotate {
0% {
animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53);
transform: translateY(0px);
}
30% {
transform-origin: center;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
transform: translateY(10px);
}
100% {
transform-origin: center;
transform: translateY(10px) rotate(-45deg) scale(0.9);
}
}
@keyframes hide {
29% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@media (max-width: 500px) {
.header .main-menu {
width: 100vw;
}
.header .main-menu li > a {
font-size: 16px;
}
.header .main-menu .sub-menu a {
font-size: 15px;
}
}
.banner-video {
--video-height: calc(max(100vw, 1920) / (1920 / 800));
position: relative;
overflow: hidden;
}
.banner-video video {
width: 1920px;
max-width: 100%;
height: var(--video-height);
margin: 0 auto;
display: block;
}
.banner-actions {
display: flex;
gap: 2rem;
justify-content: center;
margin-top: -150px;
position: relative;
font-family: arial, sans-serif;
}
.banner-action-item {
flex: 0 0 calc((100% - 4rem) / 3);
text-align: center;
padding: 0 30px 15px 30px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 3px #ccc;
max-width: 350px;
}
.banner-action-item:hover {
background: rgb(245, 147, 36);
background: linear-gradient(93deg, rgb(245, 147, 36) 0%, rgb(241, 111, 39) 100%);
}
.banner-action-item:hover .banner-action-item--icon img.img-hover {
opacity: 1;
z-index: 1;
}
.banner-action-item:hover .banner-action-item--icon img.img {
opacity: 0;
z-index: -1;
}
.banner-action-item:hover .banner-action-item--desc,
.banner-action-item:hover .banner-action-item--title {
color: #fff;
}
.banner-action-item--icon {
--height: 100px;
position: relative;
height: var(--height);
}
.banner-action-item--icon img {
height: var(--height);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: 0.5s;
}
.banner-action-item--icon img.img-hover {
z-index: -1;
opacity: 0;
}
.banner-action-item--title {
font-weight: bold;
color: var(--main-color);
font-size: 18px;
}
.banner-action-item--desc {
color: #959799;
font-size: 14px;
}
@media (max-width: 1024px) {
.banner-actions {
margin-top: -75px;
}
}
@media (max-width: 768px) {
.banner-actions {
margin-top: -50px;
gap: 1rem;
}
.banner-action-item {
padding: 0 15px 15px 15px;
}
.banner-action-item--icon {
--height: 85px;
}
}
@media (max-width: 500px) {
.banner-actions {
margin-top: 1rem;
flex-direction: column;
align-items: center;
}
}
body.home .section-event--sub-title {
margin-top: -30px;
}
.section-event {
padding-top: 2rem;
}
.section-event--title {
font-weight: bold;
font-size: 32px;
text-transform: uppercase;
text-align: center;
color: var(--main-color);
}
.section-event--title span {
background: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/title-event.png) no-repeat top center;
height: 122px;
width: 493px;
display: inline-block;
padding-top: 24px;
}
.section-event--sub-title {
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
color: var(--main-color);
}
.section-event--sub-title span {
background: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/sub-title-event.png) no-repeat top left;
background-size: 100% 80px;
display: inline-block;
height: 80px;
padding-left: 86px;
width: 400px;
padding-top: 24px;
}
.home-event {
display: grid;
gap: 2rem;
grid-template-columns: 1fr 1fr;
}
.home-event-item {
--item-background: #f2f4f6;
--icon-background: var(--main-color);
position: relative;
font-size: 14px;
color: var(--main-color);
padding: 30px;
border-radius: 10px;
background: var(--item-background);
transition: transform 0.5s ease;
}
.home-event-item:nth-child(3), .home-event-item:nth-child(2) {
--item-background: #fef8f5;
--icon-background: var(--yellow-color);
}
.home-event-item:nth-child(3) .icon:before, .home-event-item:nth-child(2) .icon:before {
background-image: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/icon-date-1.png);
}
.home-event-item--date {
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
gap: 1.5rem;
}
.home-event-item--date .icon {
height: 60px;
width: 60px;
background-color: var(--icon-background);
border-radius: 10px;
padding: 10px;
}
.home-event-item--date .icon:before {
content: "";
background: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/icon-date-2.png) no-repeat 0 0;
background-size: contain;
height: 40px;
width: 40px;
display: block;
}
.home-event-item--name {
font-size: 15px;
font-weight: bold;
padding: 10px 0;
}
.home-event-item--desc, .home-event-item--address {
padding-left: 15px;
}
.home-event-item--desc {
font-style: italic;
padding-top: 5px;
}
.home-event-item-hover {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background: var(--item-background);
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
transition: all 0.4s ease-out;
opacity: 0;
z-index: -1;
}
.home-event-item-hover img {
height: 70px;
object-fit: cover;
}
.home-event-item-hover a {
background: var(--yellow-color);
color: var(--main-color);
font-weight: bold;
padding: 7px 20px;
border-radius: 10px;
}
.home-event-item:hover .home-event-item-hover {
opacity: 1;
z-index: 1;
}
.home-event--all {
text-align: right;
margin-top: 10px;
}
.home-event--all a {
color: var(--main-color);
font-weight: bold;
font-size: 15px;
}
.home-event-image {
display: block;
margin-top: 1rem;
position: relative;
}
.home-event-image .swiper-wrapper {
padding-bottom: 2rem;
}
.home-event-image .home-event-item {
padding: 0;
border: 2px solid var(--main-color);
border-radius: 18px;
--item-background: #f2f4f6;
transition: border-radius 0.5s ease;
}
.home-event-image .home-event-item:hover {
border-radius: 0;
}
.home-event-image .home-event-item-image {
overflow: hidden;
}
.home-event-image .home-event-item-image img {
border-radius: 16px;
transition: transform 0.5s ease;
}
.home-event-image .home-event-item-image img:hover {
transform: scale(1.1);
border-radius: 0;
}
.home-event-image-all {
text-align: center;
margin-top: 1rem;
}
.home-event-image-all a {
font-weight: 500;
padding: 8px 15px;
border-radius: 10px;
margin-left: 10px;
color: var(--main-color);
display: inline-block;
position: relative;
font-size: 18px;
}
.home-event-image-all a span {
z-index: 1;
position: relative;
}
.home-event-image-all a:before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 0;
right: 2px;
border: 1px solid #000;
border-radius: 10px;
}
.home-event-image-all a:after {
content: "";
position: absolute;
background: var(--yellow-color);
left: 3px;
top: 0;
bottom: 3px;
right: 0;
border-radius: 10px;
}
@media (max-width: 768px) {
.home-event {
grid-template-columns: 1fr;
}
}
@media (max-width: 500px) {
body.home .section-event--sub-title {
margin-top: 0;
}
.section-event--sub-title {
font-size: 16px;
}
.section-event--sub-title span {
width: 100%;
background-size: contain;
padding-left: 66px;
padding-top: 20px;
height: 65px;
}
}
.section-qc {
background-color: var(--main-color);
padding: 2rem 0;
margin-top: 1.5rem;
}
.section-qc .qc-block-title {
color: #fff;
font-size: 33px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
margin-bottom: 2rem;
}
.section-qc .qc-block-title span {
display: inline-block;
}
.section-qc .qc-block-title span:after {
content: "";
display: block;
height: 3px;
background: rgb(0, 82, 145);
background: linear-gradient(93deg, rgb(0, 51, 116) 0%, rgb(0, 119, 192) 50%, rgb(0, 51, 116) 100%);
}
.section-qc .qc-content {
display: flex;
align-items: center;
gap: 2rem;
}
.section-qc .qc-content .qc--image {
flex: 0 0 50%;
}
.section-qc .qc-content .qc-title {
font-size: 33px;
line-height: 1.3;
color: #fff;
font-weight: bold;
}
.section-qc .qc-content .qc-desc {
color: var(--yellow-color);
font-size: 14px;
font-style: italic;
margin: 1.5rem 0;
}
.section-qc .qc-content .qc-links {
text-align: right;
}
.section-qc .qc-content .qc-links a {
font-weight: 500;
padding: 8px 15px;
border-radius: 10px;
margin-left: 10px;
color: var(--main-color);
display: inline-block;
position: relative;
}
.section-qc .qc-content .qc-links a span {
z-index: 1;
position: relative;
}
.section-qc .qc-content .qc-links a:before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 0;
right: 2px;
border: 1px solid #000;
border-radius: 10px;
}
.section-qc .qc-content .qc-links a:after {
content: "";
position: absolute;
background: var(--yellow-color);
left: 3px;
top: 0;
bottom: 3px;
right: 0;
border-radius: 10px;
}
.section-qc .qc-content .qc-links a:nth-child(2) {
color: #fff;
}
.section-qc .qc-content .qc-links a:nth-child(2):after {
background: #189b53;
}
@media (max-width: 768px) {
.section-qc .qc-content .qc-title {
font-size: 26px;
}
}
@media (max-width: 500px) {
.section-qc .qc-content {
flex-direction: column;
}
}
.section-design {
margin-top: 2rem;
}
.section-design .section-title span {
display: block;
border-radius: 0;
}
.section-design .design-content {
display: flex;
gap: 80px;
background: #f2f6f9;
padding: 25px;
}
.section-design .design-desc {
font-size: 14px;
color: var(--main-color);
}
.section-design .design-image {
flex: 0 0 40%;
}
.section-design .design-links--item {
display: block;
margin-top: 0.6rem;
padding-left: 30px;
position: relative;
}
.section-design .design-links--item:before {
position: absolute;
content: "";
background: url(//vinexad.com.vn/wp-content/themes/vinexad2/assets/images/icon-check.png) no-repeat 0 0;
background-size: contain;
width: 20px;
height: 20px;
left: 0;
top: 12px;
}
.section-design .design-links--item span {
display: block;
}
.section-design .design-links--text {
font-size: 28px;
color: var(--main-color);
font-weight: bold;
}
.section-design .design-links--desc {
font-style: italic;
}
.section-design .design-detail {
text-align: right;
}
.section-design .design-detail a {
font-weight: 500;
padding: 8px 15px;
border-radius: 10px;
margin-left: 10px;
color: var(--main-color);
display: inline-block;
position: relative;
}
.section-design .design-detail a span {
z-index: 1;
position: relative;
}
.section-design .design-detail a:before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 0;
right: 2px;
border: 1px solid #000;
border-radius: 10px;
}
.section-design .design-detail a:after {
content: "";
position: absolute;
background: var(--yellow-color);
left: 3px;
top: 0;
bottom: 3px;
right: 0;
border-radius: 10px;
}
@media (max-width: 768px) {
.section-design .design-links--text {
font-size: 20px;
}
}
@media (max-width: 500px) {
.section-design .design-content {
flex-direction: column-reverse;
gap: 1rem;
}
}
.section-news {
margin-top: 2rem;
}
.section-news .news-items {
margin-top: 2rem;
display: flex;
gap: 2rem;
}
.section-news .news-items-col3, .section-news .news-items-col1 {
flex: 0 0 350px;
}
.section-news .news-items-col3 .news-items-item-image, .section-news .news-items-col1 .news-items-item-image {
margin-top: 10px;
}
.section-news .news-items-col3 .news-items-item-image img, .section-news .news-items-col1 .news-items-item-image img {
border-radius: 20px;
}
.section-news .news-items-col1 {
background: var(--main-color);
color: #fff;
}
.section-news .news-items-col1 a {
color: #fff;
}
.section-news .news-items-col2 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.section-news .news-items-col2 .news-items-item-image {
flex: 0 0 140px;
}
.section-news .news-items-col2 .news-items-item-image img {
height: 175px;
object-fit: cover;
border-radius: 10px;
}
.section-news .news-items-col2 .news-items-item {
display: flex;
gap: 1rem;
}
.section-news .news-items-col2 .news-items-item:nth-child(2) {
flex-direction: row-reverse;
}
.section-news .news-items-col3 {
background: var(--yellow-color);
color: var(--main-color);
}
.section-news .news-items-col3 a {
color: var(--main-color);
}
.section-news .news-items-col3, .section-news .news-items-col1, .section-news .news-items-col2 .news-items-item {
border: 1px solid var(--main-color);
border-radius: 20px;
padding: 1rem;
}
.section-news .news-items-col1 .news-items-item--title:before {
background: #fff;
}
.section-news .news-items-item--desc {
font-size: 13px;
margin-top: 8px;
margin-bottom: 5px;
}
.section-news .news-items-item--link {
font-style: italic;
font-size: 13px;
text-align: right;
}
.section-news .news-items-item--title {
font-weight: bold;
}
.section-news .news-items-item--title:before {
content: "";
display: block;
height: 3px;
background: var(--main-color);
width: 50px;
margin-bottom: 3px;
}
@media (max-width: 1024px) {
.section-news .news-items-col3, .section-news .news-items-col1 {
flex-basis: 30%;
}
.section-news .news-items-col2 {
gap: 1rem;
}
}
@media (max-width: 768px) {
.section-news .news-items {
overflow: auto;
}
.section-news .news-items-col3, .section-news .news-items-col1 {
flex-basis: 350px;
}
.section-news .news-items-col2 {
flex: 0 0 350px;
}
}
@media (max-width: 500px) {
.section-news .news-items {
flex-wrap: wrap;
}
.section-news .news-items-col3, .section-news .news-items-col1, .section-news .news-items-col2 {
flex-basis: 100%;
}
}
.section-partner {
padding-top: 2rem;
}
.partner-swiper {
border-top: 2px solid var(--main-color);
margin-top: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.partner-swiper .swiper-slide {
text-align: center;
}
.partner-swiper img {
height: 110px;
width: auto;
object-fit: contain;
}
.home-event-image {
height: 425px;
}
@media (max-width: 1024px) {
.home-event-image {
height: 330px;
}
}
@media (max-width: 500px) {
.home-event-image {
height: auto;
}
}