/*
Theme Name: VMG Theme
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

.sec-sr ul.nav.nav-outline.nav-normal li a {
    border: none;
}

.row-slide-logo {
    margin-top: 0px !important;
}

.row-slide-logo .col {
    padding-bottom: 0px;
}
.slide-thuong-hieu {
    margin-bottom: 0px !important;
}
/* .slide-thuong-hieu .banner.has-hover {
    max-width: calc(60% - 72px) !important;
    width: calc(50% - 48px) !important;
    border-radius: 12px !important;
    overflow: hidden;
} */
.slide-thuong-hieu .fill.banner-link {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}


.slide-logo-header .img-inner.image-color.dark {
    width: 100%;
    height: 100%;
}
/* .col-left .col-inner {
    min-height: 100vh !important;
} */
/* .col-left .col-inner .img {height: 100% !important;}

.col-left .col-inner img.attachment-large.size-large {
    height: 100% !important;
} */
.col-right {
  flex: 1;
  position: relative;
  /* tùy chỉnh chiều cao: có thể auto hoặc min-height để có scroll */
}

.col-right > .col-inner {
    position: relative;
/*     min-height: 100vh; */
    display: flex;
    height: 100%;
    flex-direction: column;
}
/* .col-right > .col-inner > .row-ctla {
  position: relative;
  z-index: 5;
  transition: top 0.1s ease-out;
  flex: 1 0 auto;
} */
.row-ctla {
  will-change: transform;
  transition: transform 0.15s ease-out;
}
.row-ctla {
    padding-top: 60px !important;
}
.col-right > .col-inner > .row-su-menh {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.col-right > .col-inner > .row-su-menh .col {
    padding-bottom: 0px;
}
.col-right > .col-inner > .row-su-menh p {margin-bottom: 0px;}

.col-right > .col-inner > .row-su-menh img {
    border-radius: 12px;
}
.col-left {padding-left: 0px !important;padding-bottom: 0px !important;}

.col-right {
    padding-left: 80px !important;
    padding-bottom: 20px !important;
}


.col-right .col.small-12.large-12 h3 {
    font-size: 24px;
    margin-bottom: 20px;
}
.sec-lh img {
    border-radius: 12px;
}
.sec-lh .col-icon-box .col-inner {
    background: white;
    padding: 20px;
    border-radius: 12px;
    height: 100%;
}
.sec-lh .col-icon-box .col-inner .icon {
    padding: 12px;
    background: #F0FAFF;
    border-radius: 12px;
    width: 56px;
    height: 56px;
}

.bg-lg-tb {
    background: linear-gradient(180deg, #F0FAFF, rgba(240, 250, 255, 0));
}
.bg-lg-bt {
    background: linear-gradient(0deg, #F0FAFF, rgba(240, 250, 255, 0));
}

.lnx {
    background: white;
    padding: 80px 60px 60px 120px;
    border-radius: 12px;
    box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.05);
    position: relative;
}

.lnx img.icon {
    position: absolute;
    left: 20px;
    width: 96px;
    top: 20px;
}
p.noidung {/* padding-top: 20px; */font-size: 24px;}

p.ten-tg {position: relative;margin-bottom: 0px;padding-left: 35px;font-size: 18px;}

p.ten-tg:before {content: "";position: absolute;left: 0;top: calc( 50% - 1px);width: 30px;border: 1px solid #18181B;}


.showroom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
span.showroom-region {
    position: absolute;
    background: #046388;
    color: #F0FAFF;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    right: 5px;
    top: 5px;
}

.showroom-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
	background: #F4F4F5;
}

.showroom-item:hover {
    border: 1px solid #4863ff;
}

.showroom-img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px 12px 0px 0px;
  margin-bottom: 10px;
  aspect-ratio: 16/9;
}

.showroom-title {
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0 5px;
}
.showroom-content {
    text-align: left;
    padding: 20px;
    padding-top: 0px;
}

p.showroom-phone {margin-bottom: 0px;}


p.showroom-address {margin-bottom: 0.5em;}

.sec-sr ul.nav.nav-outline.nav-normal {
    background: #F4F4F5;
    width: fit-content;
    margin: 32px auto;
    border-radius: 30px;
}

.sec-sr ul.nav.nav-outline.nav-normal li.active a {
    background: linear-gradient(
90deg, #1C26E6, #33CCFD);
    color: white;
}

.sec-sr ul.nav.nav-outline.nav-normal li:hover a {
    background: linear-gradient(90deg, #1C26E6, #33CCFD);
    color: white;
    border: none;
}
.showroom-item.hidden {
  display: none;
}

button.showroom-loadmore {
    background: white;
    color: #333;
    font-size: 16px;
    border-radius: 40px;
    border: 1px solid;
    padding: 1px 20px;
    margin: auto;
    text-transform: math-auto;
    display: block;
    margin-top: 20px;
}

.showroom-loadmore:hover {
    background: linear-gradient(90deg, #1C26E6, #33CCFD);
	color: white;

}
.sec-tintuc .col.post-item {/* height: 100%; */}

.sec-tintuc .col.post-item .col-inner {height: 100%;background: #FFFFFF;border-radius: 12px;overflow: hidden;}

.sec-tintuc .col.post-item .col-inner .box-text.text-left {
    padding: 20px;
}

.sec-tintuc .col.post-item .col-inner .is-divider {
    display: none;
}

.post-meta.is-small.op-8 {
    display: block;
    order: -1;
}

.sec-tintuc .col.post-item .col-inner .box-text.text-left .box-text-inner.blog-post-inner {
    display: flex;
    flex-direction: column;
}

.sec-tintuc .col.post-item .col-inner .box-text.text-left h5.post-title.is-large {margin-bottom: 1em;}

.text.title-sec h3 {
    font-size: 52px !important;
    font-weight: bold;
}

.row-bdht .col-inner.text-center {
    padding: 120px;
    background: #DFF4FF;
    border-radius: 12px;
}

.text-lg h3 {
    font-size: 55px;
    background: linear-gradient(90deg, #1C26E6, #33CCFD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    display: inline-block;
    width: fit-content;
    line-height: 65px;
    margin-bottom: 24px;
}

.btn-lg {
    background: linear-gradient(90deg, #1C26E6, #33CCFD);
    border: none;
    position: relative;
    padding: 8px 16px;
}
a.button.primary.lowercase.btn-lg.gui-email span:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: -24px;
    background: url(/wp-content/uploads/2025/11/sms.svg) no-repeat;
    color: white;
    bottom: 6px;
}
a.button.primary.lowercase.btn-lg.gui-email span {
    position: relative;
}
a.button.primary.lowercase span {
    font-size: 18px;
}
a.button.primary.lowercase.btn-lg.gui-email {
    padding-left: 40px;
}

.row-bdht a.button.white.lowercase.btn-w {
    font-size: 18px;
    padding: 8px 16px;
    padding-left: 40px;
    color: #18181B !important;
    position: relative;
}
.row-bdht a.button.white.lowercase.btn-w span {
    position: relative;
}
.row-bdht a.button.white.lowercase.btn-w span:before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    left: -25px;
    background: url(/wp-content/uploads/2025/11/call-d.svg);
    bottom: 8px;
}
.icon-footer .icon-box-img {
    padding: 14px;
    background: #F0FAFF;
    border-radius: 12px;
    height: 56px;
}
.sec-footer p {margin-bottom: 8px;}

.img-footer img.attachment-large.size-large {
    width: 212px !important;
}
/* body.lock-scroll {
  overflow: hidden;
  height: 100%;
}
 */
.col-right {
    max-width: 970px;
}
.copyright-footer {
    color: white;
    font-size: 18px;
    font-weight: 700;
}
.row-img .text.title-sec {
    position: absolute;
    top: 60px;
    width: 100%;
    left: 0;
    z-index: 2;
}
.img-lhvmg:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    border-radius: 12px;
}
.icon-box-img svg {
    padding-top: 0px !important;
}
.icon-box-img svg path {
    stroke: #6bdbff;
    fill: transparent;
}

.sec-sr ul.nav.nav-outline.nav-normal span {
    font-size: 18px;
    color: #333;
}

.sec-sr ul.nav.nav-outline.nav-normal li a {
    padding: 8px 16px;
}
.sec-sr ul.nav.nav-outline.nav-normal li.active a span {
    color: white;
}

.sec-sr ul.nav.nav-outline.nav-normal li:hover a span {
    color: white;
}
.col.post-item:hover .col-inner {
    border: 1px solid #4863ff;
}

.text.text-thuong-hieu h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 0px;
}

.text.text-thuong-hieu p {
    font-weight: 700;
    color: #2b7dee;
    background: #ebf2fe;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 99px;
}

.text.ccdt {
    padding: 20px;
    background: #ebf2fe;
    border: 1px solid #cfe0fd;
    border-radius: 12px;
    margin-bottom: 24px;
}

.text.ccdt h3 {
    color: #2a7eee;
}

.text.ccdt p {margin-bottom: 0px;}
.icon-pp-th path {
    stroke: white !important;
}
.icon-pp-th .icon-box-img {
    background: #2b7dee;
    padding: 6px 10px;
    border-radius: 12px;
    height: 60px;
}
.pum-container.popmake {
    border-radius: 12px;
}

.sb-form span.wpcf7-spinner {
    display: none;
}

.sb-form input.wpcf7-form-control.wpcf7-submit.has-spinner {
    border-radius: 12px;
    background-color: #2b7dee;
    font-weight: 600;
    margin-bottom: 0px;
}

.form-lien-he textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required {
    border-radius: 12px;
}

.form-lien-he input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    border-radius: 12px;
}
.row-ctla p {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 20px;
}
.col-img-box .col-inner {
    height: 100%;
    border-radius: 12px;
    background: white;
    overflow: hidden;
    border: 1px solid transparent;
}

.col-img-box .col-inner:hover {
    border: 1px solid #4863ff;
}

.col-img-box .col-inner:hover img.attachment-.size- {
    transform: scale(1.1);
}
.col-img-box .col-inner .box-text.text-center {
    padding: 16px;
}
.col-img-box .col-inner .box-text.text-center p.date {
    color: #71717B;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 6px;
}
.col-img-box .col-inner .box-text.text-center h4 {
    font-size: 16px;
    margin-bottom: 20px;
}
.slide-thuong-hieu .banner.has-hover .text-box {
    width: 100% !important;
    bottom: 0;
    padding: 32px;
    background: linear-gradient(#0000 0%, #00000080 100%);
}
.slide-thuong-hieu .banner.has-hover {
    background: transparent;
}

.slide-thuong-hieu .banner.has-hover  .banner-inner.fill {
    max-width: calc(100% - 24px);
    border-radius: 12px;
    overflow: hidden;
}

.col-img-box .col-inner .box-text.text-center p {
    font-size: 18px !important;
}

.slide-logo-header img {
    height:80px !important;
    width: auto !important;
}
.sec-pptt .banner.has-hover .text-box h3{
	font-size: 54px;
}
.sec-pptt .banner.has-hover .text-box p {
	font-size: 18px;
}
/* .col-sl-pc .col-inner {
    padding-left: 60px !important;
} */
.text.text-slide {
    text-align: left;
}

.text.text-slide h3 {
    font-size: 72px;
    background: linear-gradient(90deg, #212ce6, #2b8ff3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    display: inline-block;
    width: fit-content;
    margin-bottom: 0px;
}

.text.text-slide p {
    font-size: 44px;
    color: #1a237e;
    font-weight: bold;
    margin-top: 0px;
}
/* ----------------------------------------- MEDIA SCREEN MOBILE ----------------------------------------- */


@media only screen and (max-width: 490px) {
	.img-lhvmg .img-inner.image-cover.dark {
		padding: 50% !important;
	}
	.sec-sr ul.nav.nav-outline.nav-normal {
		display: flex;
		overflow-x: scroll !important;
		white-space: nowrap !important;
		flex-wrap: nowrap;
		justify-content: flex-start;
		scrollbar-width: none;
		/* Firefox */
	}
	.col-left {
		padding: 0 9.8px 19.6px !important;
	}
	.col-left img.attachment-large.size-large {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: center 80%;
	}
	.sec-sr ul.nav.nav-outline.nav-normal li {
		display: inline-block;
	}
	.row-bdht .col-inner.text-center {
		padding: 60px 16px;
	}

	.row-bdht a.button {
		width: 100%;
	}
	.sec-slide {
		padding-top: 80px !important;
	}

	.lnx {
		padding: 20px;
		padding-left: 40px;
	}

	.lnx img.icon {z-index: 0;}

	p.noidung {
		position: relative;z-index: 1;
	}
	.showroom-grid {
	  grid-template-columns: 1fr;
	  gap: 20px;
	}
	.row-slide-logo .col img.ux-logo-image.block {
    	width: 100% !important;align-content	
	}

	.row-slide-logo .col .ux-logo.has-hover.align-middle.ux_logo.inline-block {
    	width: 100% !important;		
	}

	.row-slide-logo .col .ux-logo.has-hover.align-middle.ux_logo.inline-block .ux-logo-link.block.image-color {
		width: 100% !important;	
	}
	.slide-logo-header img {
		width: 100% !important;		
		height: 80px;
	}
	.row-ctla {
		padding: 0px;
		position: relative;
	}

	.col-right > .col-inner > .row-su-menh {
		position: relative;
	}

	.col-right {
		order: -1;
		position: relative;
		padding: 16px !important;
	}
	.text.title-sec h3 {
		font-size: 42px !important;
		line-height: 64px;
	}
	.col-right > .col-inner > .row-su-menh .col.medium-8.small-12.large-8 {margin-bottom: 32px;}


	.col-right > .col-inner > .row-su-menh .col.medium-4.small-12.large-4 p {margin-bottom: 16px;}
		img.header_logo.header-logo {
		width: 80px !important;
	}

	.header-inner.flex-row.container.logo-center.medium-logo-center {height: 80px !important;}
	.sec-pptt .banner.has-hover .text-box {
		width: 100% !important;
		bottom: 0;
		padding: 14px;
		background: linear-gradient(#0000 0%, #00000080 100%);
	}

	.sec-pptt .banner.has-hover {
		border-radius: 12px;
		overflow: hidden;
	}

	.sec-pptt .banner.has-hover .text-box h3.uppercase {
		font-size: 30px;
	}

	.sec-pptt .banner.has-hover .text-box p {
		font-size: 16px;
		margin: 5px;
	}

	.sec-pptt a.button.primary.lowercase span {
		font-size: 14px;
		line-height: 1.6 !important;
	}

	.sec-pptt .btn-lg {
		padding: 4px 12px;
		margin: 0px !important;
	}
	.text-lg h3 {
		font-size: 48px !important;
	}
	.text.text-slide p {
		font-size: 18px;
	}

	.text.text-slide h3 {
		font-size: 24px;
	}
}
@media only screen and (min-width: 1366px){

	.col-icon-box {
		padding: 0px 6px 24px 18px;
	}
	.col-left .col-inner {
		min-height: 1000px !important;
	}
	.col-left .col-inner img.attachment-large.size-large {
		min-height: 1000px !important;
	}

}
@media only screen and (min-width: 1366px) and (max-width: 1440px){
	.row-ctla {
		padding-top: 40px !important;
	}
	.col-right {
		padding-left: 40px !important;
	}
	.text.title-sec h3 {
		font-size: 46px !important;
		font-weight: bold;
	}

	
}

@media only screen and (min-width: 1440px) and (max-width: 1536px){
	.text.title-sec h3 {
		font-size: 48px !important;
		font-weight: bold;
	}
	.col-right {
	    padding-left: 40px !important;
		padding-bottom: 20px !important;
	}
	.row-ctla {
		padding-top: 40px !important;
	}
	.text.title-sec h3 font {
		font-size: 42px !important;
	}

	
}

@media only screen and (min-width: 1366px) and (max-width: 2000px){
	.row-80 {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
	.col-right {
		padding-right: 60px !important;
	}


}

@media only screen and (max-width: 390px) {
		.row-ctla p {
			font-size: 20px!important ;
			line-height: 1.6 !important;
		}

	.text.title-sec h3 {
		font-size: 36px !important;
		line-height: 52px !important;
	}
}