#home-section-1.page-banner {
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/AAA.png);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
height: 900px;
display: flex;
align-items: center;
padding-top: 8em;
} .big-title {
color: var(--text-color, #00295D);
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 56px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
}
.big-title span {
color: var(--color-2, #F45E2B);
}
.big-desc {
color: var(--color-1);
text-transform: uppercase;
font-weight: 800;
line-height: 28px;
text-align: center;
}
#home-section-1.page-banner .box-text {
display: flex;
flex-direction: column;
gap: 20px;
}
.box-btn {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 50px;
}
.btn-style {
padding: 15px 32px;
border-radius: 45px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.btn-style-1 {
background: var(--color-2, #F45E2B);
}
.btn-style-2 {
border: 1px solid var(--color-2, #F45E2B);
color: var(--color-2);
}
.btn-style-2:hover {
border: 1px solid var(--color-2, #F45E2B);
color: var(--color-2);
} #home-section-2 {
margin-bottom: 40px;
}
.title-style-1 {
color: var(--text-color);
font-weight: 900;
}
.title.has-divine {
position: relative;
}
.title.has-divine::before {
content: "";
top: 0;
left: 0;
position: relative;
width: 90px;
height: 6px;
background-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/divine.svg);
display: block;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px;
}
#home-section-2.page_ve-chung-toi .box-right {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#home-section-2.page_ve-chung-toi .box-right .box-text {
margin-bottom: 20px;
}
#home-section-2.page_ve-chung-toi .box-right .title {
margin-bottom: 32px;
} #home-section-3 {
background-color: var(--text-color);
padding: 16px 0;
box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.20);
}
#home-section-3 .swiper-slide {
width: fit-content !important;
}
#home-section-3 .text-item {
position: relative;
display: flex;
gap: 20px;
}
#home-section-3 .text-item::before {
content: "";
background-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/favicon.svg);
width: 24px;
height: 20px;
display: block;
position: relative;
left: 0;
} #home-section-4.page_linh-vuc {
padding: 40px 0;
background-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/section-4-bg-2.png);
}
#home-section-4.page_linh-vuc .title.has-divine::before {
left: 50%;
transform: translateX(-50%);
}
#home-section-4.page_linh-vuc .bg-image-2 {
right: 1%;
bottom: 1%;
}
#home-section-4.page_linh-vuc .bg-image-3 {
right: 0;
top: 7%;
}
#home-section-4.page_linh-vuc .bg-image-4 {
left: 1%;
bottom: 1%;
}
.list-lv {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 50px;
}
.list-lv .lv-item {
display: flex;
}
.list-lv .lv-item .box-image {
position: relative;
}
.list-lv .lv-item .box-image .box-icon {
border-radius: 12px;
border: 1px solid #F45E2B;
background: #FFF;
box-shadow: 0 4px 20px 0 rgba(0, 41, 93, 0.16);
width: 80px;
height: 80px;
transform: translate(-36%, -50%) rotate(45deg);
flex-shrink: 0;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 0;
}
.list-lv .lv-item .box-image .box-icon img {
transform: rotate(-45deg);
}
.list-lv .lv-item .box-text {
max-width: 700px;
background: #FFF;
box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.20);
min-height: 362px;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 60px;
align-items: flex-start;
}
.list-lv .lv-item:nth-child(even) .box-text {
left: 0;
background-color: var(--color-2);
}
.list-lv .lv-item .box-text .title {
font-weight: 800;
margin-bottom: 24px;
}
.list-lv .lv-item:nth-child(even) .box-text .title {
color: #fff;
}
.list-lv .lv-item .btn-style {
width: fit-content;
}
.list-lv .lv-item .btn-style:hover {
background-color: var(--color-2);
color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}
.list-lv .lv-item .btn-style:hover svg path {
fill: #fff;
}
.list-lv .lv-item .box-desc {
margin-left: 60px;
}
.list-lv .lv-item:nth-child(even) .box-text .box-desc p {
color: #fff;
}
.list-lv .lv-item:nth-child(even) .box-text .btn-style {
border-color: #fff;
color: #fff;
}
.list-lv .lv-item:nth-child(even) .box-text .btn-style svg path {
fill: #fff;
}
.list-lv .lv-item:nth-child(even) .btn-style:hover {
background-color: #fff;
color: var(--color-2);
}
.list-lv .lv-item:nth-child(even) .btn-style:hover svg path {
fill: var(--color-2);
} #home-section-5.page_mang-luoi {
padding: 60px 0;
}
.list-doi-tac {
margin: 60px 0 48px 0;
}
.list-doi-tac .swiper-slide {
width: fit-content;
}
.list-doi-tac .doi-tac-item {
text-align: center;
}
.list-doi-tac .doi-tac-item img {
object-fit: contain;
height: 90px; max-width: 180px;
}
.slide-box-1 {
padding-bottom: 8em
}
.slide-box-2 {
padding-top: 3em;
}
.slide-box .swiper-slide img {
max-height: 466px;
}
.slide-box .box-text-slide {
border-radius: 0px;
background-color: #F45E2B;
color: #fff;
padding: 28px;
position: relative;
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.16);
}
.slide-box.slide-box-2 .box-text-slide {
background-color: #FFF9F7;
}
.slide-box.slide-box-1 .box-text-slide h4,
.slide-box.slide-box-1 .box-text-slide ul li {
color: #fff;
}
.box-text-slide ul {
margin: 0;
padding-left: 18px;
}
.box-text-slide .title {
position: relative;
}
.box-text-slide .divine {
margin-bottom: 16px;
}
.slide-box-1 .box-text-slide .divine svg path {
stroke: #fff;
}
.slide-box .box-text-slide .title.has-divine-2 {
position: relative;
}
.slide-box-2 .box-text-slide .desc p {
margin-bottom: 0;
}
.box-swiper-btn {
max-width: 447px;
position: absolute;
bottom: 20px;
right: 0;
width: 100%;
}
.slide-box-2 .box-swiper-btn {
left: 20px;
}
.swiper-current {
position: relative;
z-index: 2;
color: #fff;
font-weight: 700;
font-size: 24px;
text-align: end;
top: 5px;
left: 48px;
}
.box-swiper-btn .swiper-button-prev,
.box-swiper-btn .swiper-button-next {
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
margin-top: 0;
}
.box-pagination {
width: 50%;
}
.box-navigation {
gap: 10px;
}
.box-pagination .swiper-pagination-progressbar {
left: 10px !important;
top: 50% !important;
transform: translateY(-50%);
overflow: hidden;
border-radius: 50px;
}
.box-pagination .swiper-pagination-progressbar {
background-color: #9D9D9D;
}
.box-pagination .swiper-pagination-progressbar-fill {
background-color: #fff !important;
}
.box-swiper-btn .swiper-button-prev,
.box-swiper-btn .swiper-button-next {
width: 48px;
height: 48px;
border-radius: 50px;
border: solid 1px #FFF;
background-color: rgba(255, 255, 255, 0.28);
}
.box-swiper-btn .swiper-button-prev::after,
.box-swiper-btn .swiper-button-next::after {
font-size: 16px;
color: #fff;
font-weight: 700;
} #home-section-6 {
background-repeat: no-repeat;
background-size: cover;
background-position: top 17% center;
padding: 60px 0;
height: 900px;
}
#home-section-6 .title.has-divine::before {
left: 50%;
transform: translateX(-50%);
}
#home-section-6 .icon-plane {
z-index: 1;
top: 30%;
}
@media screen and (min-width:1200px) {
.item-why {
position: absolute;
}
.item-why-1 {
top: 22%;
left: 0;
}
.item-why-2 {
bottom: 20%;
left: 0;
}
.item-why-3 {
right: 10%;
bottom: 30%;
}
.item-why-4 {
right: 0;
bottom: 0;
}
}
@media screen and (max-width:990px) {
#home-section-6 .icon-plane {
display: none;
}
}
.item-why {
border-radius: 20px;
border: 1px solid rgba(244, 94, 43, 0.00);
background: #FFF;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
padding: 26px 28px;
max-width: 525px;
width: 100%;
z-index: 2;
}
.updown-element {
animation: updown-vertical 3s ease-in-out infinite;
}
@keyframes updown-vertical {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(-20px);
}
} #home-section-7.page_tu-van {
padding: 60px 0;
background-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/section-7-bg.png);
background-repeat: no-repeat;
background-size: cover;
}
.form-tu-van {
background-color: #fff;
border-radius: 40px;
padding: 40px;
}
.form-tu-van .title {
font-weight: 900;
}
.form-tu-van input,.form-tu-van select {
width: 100%;
height: 56px;
border-radius: 16px;
padding: 0 20px;
background-color: #F6F6F6;
border: none;
box-shadow: none;
}
.form-tu-van button.btn-submit { display: flex;
align-items: center;
border-radius: 48px;
padding: 0 60px 0 36px;
height: 48px;
justify-content: center;
position: relative;
background-color: #F45E2B;
color: #fff;
font-weight: 700;
font-size: 14px;
border: none;
margin-left: auto;
}
#home-section-7 .form-tu-van button.btn-submit::after {
content: "";
background-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/btn-submit-icon.png);
width: 40px;
height: 40px;
position: absolute;
right: 3px;
display: block;
border-radius: 50px;
}
.list-he-thong {
display: flex;
height: 100%;
align-items: center;
}
.location-item { }
.location-icon {
z-index: 10;
}
.location-content {
display: none;
border-radius: 20px;
border: 1px solid rgba(244, 94, 43, 0.00);
background: #FFF;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
padding: 20.5px;
max-width: 491px;
width: 100%;
position: absolute;
left: 53px;
top: -170px;
z-index: 1;
}
.location-item-1 .location-icon {
top: 28%;
left: 25%;
}
.location-item-2 .location-icon {
top: 55%;
left: 40%;
}
.location-item-3 .location-icon {
bottom: 18%;
right: 24%;
}
.location-content .box-image {
border-radius: 20px;
}
.location-item:hover {
width: 100%;
}
.location-item:hover .location-content {
display: block;
z-index: 99;
}
.location-item-1.location-item:hover .location-content {
left: 34%;
top: -12%;
}
.location-item-2.location-item:hover .location-content {
left: 50%;
top: 20%;
}
.location-item-3.location-item:hover .location-content {
left: 80%;
top: 35%;
}
.shake-element {
animation: shake-horizontal 1s ease-in-out infinite; }
@keyframes shake-horizontal {
0% {
transform: rotate(0);
}
25% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
@media screen and (min-width:990px) {
.list-lv .lv-item:nth-child(even) {
flex-direction: row-reverse;
}
.list-lv .lv-item .box-image {
width: 58.33%;
}
.list-lv .lv-item .box-image .wrapper {
border-radius: 240px 0 0 240px;
border-left: 12px solid var(--Orange, #F45E2B);
overflow: hidden;
}
.list-lv .lv-item:nth-child(even) .box-image .wrapper {
border-radius: 0 240px 240px 0;
border-right: 12px solid var(--Orange, #F45E2B);
border-left: 0;
}
.list-lv .lv-item:nth-child(even) .box-image .box-icon {
right: 0;
left: auto;
transform: translate(36%, -50%) rotate(45deg);
}
.list-lv .lv-item .box-text {
width: 58.33%;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
} .slide-box .box-text-slide {
border-radius: 48px;
}
}
@media screen and (min-width:1200px) {
.slide-box-2 {
padding-top: 8em;
}
.slide-wrapper-1,
.slide-wrapper-2 {
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
}
.slide-wrapper-1 {
mask-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/bg-slide-style-1.png);
-webkit-mask-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/bg-slide-style-1.png);
}
.slide-wrapper-2 {
mask-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/bg-slide-style-2.png);
-webkit-mask-image: url(https://speegologistic.com/wp-content/themes/hvg-theme/css/images/bg-slide-style-2.png);
}
.slide-box.slide-box-1 .box-text-slide {
max-width: 413px;
position: absolute;
bottom: -56px;
left: 63px;
}
.slide-box.slide-box-2 .box-text-slide {
max-width: 413px;
position: absolute;
top: -35px;
right: 63px;
}
}
@media screen and (min-width:1400px) {
.slide-box-2 {
padding-top: 3em;
}
.slide-box.slide-box-1 .box-text-slide {
bottom: 22px;
left: 78px;
max-width: 472px;
}
.slide-box.slide-box-2 .box-text-slide {
top: -68px;
right: 78px;
max-width: 472px;
}
}
@media screen and (min-width:768px) {
#home-section-2.page_ve-chung-toi .box-right {
padding-left: 30px;
}
#home-section-2.page_ve-chung-toi .box-right .box-text {
max-width: 532px;
width: 100%;
}
}
@media screen and (max-width:1399px) {}
@media screen and (max-width:1199px) {}
@media screen and (max-width:990px) {
.list-lv .lv-item {
flex-direction: column;
}
.list-lv .lv-item .box-image .box-icon {
transform: translateX(-50%) rotate(45deg);
top: -40px;
left: 50%;
}
.list-lv .lv-item .box-text {
position: relative;
max-width: 90%;
top: -100px;
margin: auto;
padding: 0 20px;
}
.list-lv .lv-item .box-desc {
margin-left: 0;
}
#home-section-6{
height: 100%;
}
.item-why{
margin-bottom: 20px;
}
}
@media screen and (max-width:990px) {
.list-lv .lv-item {
flex-direction: column;
}
.list-lv .lv-item .box-image .box-icon {
transform: translateX(-50%) rotate(45deg);
top: -40px;
left: 50%;
}
.list-lv .lv-item .box-text {
position: relative;
max-width: 90%;
top: -100px;
margin: auto;
padding: 0 20px;
}
.list-lv .lv-item .box-desc {
margin-left: 0;
}
.box-pagination .swiper-pagination-progressbar,
.box-swiper-btn .swiper-button-prev,
.box-swiper-btn .swiper-button-next {
display: none;
}
.box-pagination {
width: 100%;
}
.swiper-current {
right: 5%;
left: auto;
}
.location-item-1.location-item:hover .location-content,
.location-item-2.location-item:hover .location-content,
.location-item-3.location-item:hover .location-content {
left: 0;
top: 0;
}
.list-he-thong {
margin-bottom: 40px
}
}
@media screen and (max-width:768px) {
#home-section-1.page-banner {
padding-top: 14em;
height: 1050px;
}
.big-title {
font-size: 48px;
}
.box-btn {
flex-direction: column;
justify-content: center;
align-items: center
}
.box-btn .btn-style {
font-size: 13px;
}
}
@media screen and (max-width:425px) {
.big-title {
font-size: 42px;
}
}