@media (max-width: 1440px) {
.right-section {
padding: 0px 0px 0px 100px;
}
}
@media (max-width: 1024px) {
.form-img {
max-width: 360px;
}
}
@media (max-width: 992px) {
.section-menu {
border-top: 0;
}
.section-title {
font-size: 24px;
}
.menu-wrapper {
transform: translateX(-100%);
transition: all .2s ease-in-out;
background-color: #00000079;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 3;
display: block !important;
}
.menu-wrapper.active {
transform: translateX(0%);
}
.btn-menu-mobile {
background: none;
border: none;
font-size: 32px;
position: relative;
z-index: 8;
padding: 0px;
}
.btn-menu-mobile .fa-times {
display: none;
color: #f14336;
}
.btn-menu-mobile.active .fa-times {
display: block;
}
.btn-menu-mobile.active .fa-bars {
display: none;
}
.menu-main-menu-container {
background-color: #fff;
width: 85%;
position: relative;
z-index: 4;
height: 100vh;
}
ul#menu-main-menu {
flex-direction: column !important;
align-items: start !important;
justify-content: start !important;
padding-top: 64.66px;
}
.logo {
position: relative;
z-index: 4;
}
ul#menu-main-menu > li {
width: 100%;
line-height: 3;
}
ul#menu-main-menu > li.active::after {
content: "";
width: 100%;
height: 48px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
background: linear-gradient(90deg, rgba(4,100,234,1) 27%, rgba(9,182,246,1) 94%);
}
ul#menu-main-menu > li.active > a {
color: #fff;
position: relative;
z-index: 2;
}
.sub-menu , .custom-menu .sub-menu{
position: relative;
top: unset;
left: unset;
width: 100%;
box-shadow: none;
min-width: unset;
}
.section-1{
transform: translateY(-2%);
}
.section-1-content-wrapper {
grid-template-columns: 1fr;
padding: 15px !important;
}
.section-1-content-wrapper .section-content {
height: 196px;
overflow: hidden;
position: relative;
z-index: 1;
}
.section-1-content-wrapper .section-content::before {
content: "";
width: 100%;
height: 170px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(241, 243, 251, 0) 0%, #fff 60%);
z-index: 2;
}
.section-1-content-wrapper .section-content.active::before {
display: none;
}
.section-1-content-wrapper .section-content.active {
height: auto;
}
.section-1-content-wrapper .section-content.active .btn-readmore-content {
position: relative;
bottom: 0;
}
.btn-readmore-content {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: none;
outline: none;
color: var(--color-main);
z-index: 3;
border: none;
}
.service-list, .list-case-study, .list-event {
grid-template-columns: 1fr;
}
.big-partner {
grid-template-columns: repeat(3, 1fr);
}
.section-7 .section-desc{
padding-left: 0px;
width: 100% !important;
}
.text-2, .text-1, .text-3 {
gap: 4px;
font-size: 14px;
}
.text-1 strong, .text-2 strong, .text-3 strong {
font-size: 18px;
}
.btn-readmore-blog {
display: flex;
position: absolute;
gap: 12px;
text-decoration: none;
color: var(--color-main);
bottom: 10px;
right: 50px;
width: auto;
}
.custom-container {
flex-direction: column;
}
.custom-container .left-section, .custom-container .right-section {
width: 100% !important;
padding: 0px !important;
}
.custom-container .right-section {
padding: 0px 15px !important;
}
.cta-btn {
width: 50%;
}
.section-10, .monopoly-section-7, .website-section-6 , .gg-ads-section-13, .fb-ads-section-7{
background-image: url(//vutruseo.com.vn/wp-content/themes/seo-theme/assets/images/background-general.png);
background-size: cover;
background-position: center;
position: relative;
}
.monopoly-section-7 .container, .section-10 .container, .website-section-6 .container, .gg-ads-section-13 .container, .fb-ads-section-7 .container{
position: relative;
}
.section-10::before, .monopoly-section-7::before, .website-section-6::before, .gg-ads-section-13::before , .fb-ads-section-7::before{
content:"";
width: 100%;
height: 100%;
background-color: #00000085;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
}
.section-10 .section-title, .section-10 .section-content, .monopoly-section-7 .section-title, .gg-ads-section-13 .section-content, .gg-ads-section-13 .section-title,
.monopoly-section-7 .section-content, .website-section-6 .section-title, .website-section-6 .section-content, .fb-ads-section-7 .section-content, .fb-ads-section-7 .section-title {
color: #fff;
}
.list-menu-footer, .list-benefit {
grid-template-columns: repeat(2, 1fr);
}
.bct-vn, .bct-vn img {
width: 100%;
}
.swiper-button-next.testimonial-next {
right: var(--swiper-navigation-sides-offset, 10px) !important;
color: var(--color-main);
}
.swiper-button-prev.testimonial-prev {
left: var(--swiper-navigation-sides-offset, 10px) ;
color: var(--color-main);
}
.text-item {
font-size: 20px;
}
.page-template-about-us .section-title {
font-size: 28px;
}
.about-section-1 .section-desc, .about-section-2 .section-desc, .about-section-6 .section-desc {
padding-left: 10px;
font-size: 15px;
}
.monopoly-section-1, .train-section-1 {
min-height: 550px;
background-position: center;
}
.section-main-content, .list-website-service {
grid-template-columns: 1fr;
}
.list-gg-ads-model, .list-gg-ads-service, .list-campaign, .goal-item.active,  .page-template-monopoly .list-case-study.active, 
.list-fb-ads-problem, .list-fb-ads-service, .train-list-problem, .list-train-reason, .list-train-features, .promotion-info,
.page-template-monopoly .list-case-study.active, .page-template-gg-ads .list-case-study, .list-value, .step-tab.active,
.list-feature-website, .list-plans, .list-package, .list-seoer, .seoer-wrapper, .list-gg-ads-feautures, .teacher-item, .list-achive-gallery{
grid-template-columns: 1fr;
}
.goal-item {
padding: 2rem 1rem;
}
.goal-title {
text-align: center;
font-size: 24px;
}
.monopoly-section-4 .section-title {
font-size: 28px;
}
.monopoly-section-6 {
background-size: cover;
background-position: center;
}
.list-achievement, .list-hiring-post {
grid-template-columns: repeat(2, 1fr);
}
.achievement-number {
font-size: 32px;
}
.list-staff {
grid-template-columns: repeat(2, 1fr);
}
.website-section-1 .title-page, .seo-section-1 .section-title, .seo-section-6 .section-title , .gg-ads-achive-title, .train-section-1 .title-page{
font-size: 32px;
}
.section-promotion {
flex-direction: column;
}
.website-section-1 .section-content, .website-section-1 .section-slogan {
font-size: 20px;
}
.website-reason {
flex-direction: column !important;
}
.reason-img, .reason-text {
width: 100%;
}
.website-reason-title,.invest-table thead tr th {
font-size: 24px;
}
.website-reason-title .count, .problem-count, .feature-number {
font-size: 48px;
}
.invest-table tr td:first-child {
width: unset;
}
.seo-section-6 .section-title, .train-section-3 .section-content {
width: 100% !important;
}
.seo-section-7 .section-desc, .value-title, .train-problem-title , .course-content-header{
font-size: 18px;
}
.seo-section-7 .section-title {
font-size: 24px;
}
.seo-section-7 .section-content {
justify-content: center;
gap: 20px;
}
.seo-section-7 .section-content::before {
top: 10px;
left: 10px;
}
.seo-section-7 .section-content::after{
bottom: 10px;
right: 10px;
}
.seo-section-15 {
background: url(//vutruseo.com.vn/wp-content/themes/seo-theme/assets/images/bakground-banner.png);
background-size: cover;
background-position: center;
}
.btn-register, .course-content-item {
width: 100% !important;
}
.list-step {
gap: 10px;
}
.gg-ads-goal-title, .problem-title  {
padding: 8px 4px;
font-size: 14px ;
text-align: center;
}
.step-title {
width: auto;
}
.list-step {
flex-wrap: wrap;
}
.btn-register-course {
width: 100%;
font-size: 16px;
}
.list-course-content {
flex-direction: column;
}
.opening-info {
width: 100%;
border-bottom: 1px solid #eee;
padding: 24px 0px;
}
.promotion-info {
gap: 24px;
border: none;
}
.achive-gallery {
aspect-ratio: 1.5 !important; 
margin: auto !important;
width: 100%;
grid-column: unset;
}
.filter-wrapper {
width: 100%;
}
.company-info {
max-width: unset;
}
.contact-info {
top: 0;
padding: 15px;
position: relative;
}
.case-study-section-5 {
height: auto;
background-size: cover;
}
.teacher-img {
max-width: 80%;
margin: 0px auto;
}
.breadcrumb ul {
flex-wrap: wrap;
}
.list-categories-container {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.list-categories-container::before {
display:none;
}
.list-client-by-author {
grid-template-columns: repeat(3, 1fr);
}
}
@media(max-width: 767px) {
.cta-btn {
width: 100%;
}
.list-other-cat, .single-wrapper  {
grid-template-columns: 1fr;
}
.list-hiring-info , .list-hiring-post, .list-archive-post{
grid-template-columns: 1fr;
}
.list-archive-post .post-thumb {
aspect-ratio: 1.7;
border-radius: 32px 32px 0px 0px;
}
.list-about-reason {
grid-template-columns: 1fr;
}
.case-study {
display: grid !important;
grid-template-columns: 1fr;
}
.case-study .post-thumb {
aspect-ratio: 2;
border-radius: 32px 32px 0px 0px;
}
.case-study a:nth-child(2) {
display: flex;
flex-wrap: wrap;
}
.case-study a:nth-child(2) img{
width: 100%;
height: 50px;
display: block;
margin: 0px auto;
}
.post-thumb {
aspect-ratio: 1;
border-radius: 32px 0px 0px 32px;
}
.related-post-slide .post-thumb {
aspect-ratio: 1.7;
border-radius: 32px;
}
.gg-ads-section-1 {
background: none;
}
.gg-ads-model-item:nth-child(2)::after{
top: -2px;
right: 20px;
bottom: unset;
left: unset;
transform: rotate(180deg);
}
.gg-ads-model-item:nth-child(4)::after {
display: none;
}
.gg-ads-model-item:nth-child(6) {
order: 6;
}
.gg-ads-model-item:nth-child(4) {
order: 4;
}
.website-service .btn-register {
width: 50% !important;
text-align: center;
}
.reason-img img {
width: 100% !important;
}
.btn-scroll-top {
display: none !important;
}
.author-section-1 {
min-height: 713px;
}
.archive-contact {
background-image: url(//vutruseo.com.vn/wp-content/themes/seo-theme/assets/images/bakground-banner.png), linear-gradient(90deg, rgba(4, 100, 234, 1) 27%, rgba(9, 182, 246, 1) 94%);
background-position: top, bottom;
background-size: 100% 50%, 100% 50%; 
}
.contact-wrapper {
padding: 1.5rem;
}
.single-main-content {
background: #fff;
}
.service-product {
width: calc(50% - .5rem);
}
.promo-img {
position: fixed;
width: 145px;
z-index: 3;
bottom: 145px;
right: 2px;
}
.bottom-sidebar {
display: flex;
align-items: center;
}
.footer {
padding-bottom: 50px;
}
.icon-contact {
bottom: 75px;
}
.btn-analysis svg {
width: 22px;
height: 22px;
}
.btn-scroll-contact {
width: 100%;
}
.list-hosting-package, .hosting-feature-item, .hosting-feature-item:nth-child(even) {
flex-direction: column;
gap: 2rem !important;
}
.hosting-image, .hosting-text {
width: 100%;
}
.hosting-feature-item:last-child{
margin-bottom: 0px !important;
}
.brand-section-1 {
height: 480px;
background-image: url(//vutruseo.com.vn/wp-content/themes/seo-theme/assets/images/banner-mobile-branding-02.png) !important;
}
.advise-btn {
width: 100% !important;
}
.hosting-feature-item:nth-child(even), .brand-feature-item:nth-child(even), .brand-basis-item:nth-child(odd) {
flex-direction: column !important;
}
.list-brand-reason, .list-brand-package, .list-parameters, .list-keyword-rule {
grid-template-columns: 1fr;
}
.list-dac-diem {
grid-template-columns: repeat(2, 1fr);
}
.brand-section-10 .section-content  {
max-width: 100%;
width: 100%;
overflow-x: scroll;
}
.compare-table .section-title {
font-size: 16px;
}
.compare-table tr td:first-child, .compare-table tr th:first-child{
width: 200px;
display: flex;
}
.compare-table {
border-collapse: collapse;
}
.brand-package-img {
height: auto;
}
.keyword-section-1 {
background: url(//vutruseo.com.vn/wp-content/themes/seo-theme/assets/images/key-sec-1-bg-mb.png);
background-size: 100% auto;
background-position: bottom;
}
.keyword-feature-item, .keyword-feature-item:nth-child(even), .keyword-process-item, .keyword-process-item:nth-child(odd) {
flex-direction: column;
gap: 24px;
}
.list-keyword-process::after, .process-title::after {
display: none;
}
.process-title {
height: auto;
padding: 6px 4px;
text-align: center;
}
.keyword-section-5 {
background: url(//vutruseo.com.vn/wp-content/themes/seo-theme/assets/images/key-sec-5-bg-mb.png);
background-size: 100% 100%;
}
.keyword-section-5 .row, .keyword-special{
flex-direction: column-reverse;
}
.keyword-section-7 {
background: linear-gradient(to bottom, #14B8F6 37.33%, #045DE9 37.33%);
}
.keyword-section-7 .section-title {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
.popup-container-form {
width: 90%;
gap: 12px;
}
.promo-form {
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.btn-promo-submit {
width: 100%;
border-radius: 0;
font-size: 14px !important;
}
}