/*
Theme Name: TM Solutions
Description: Thiết kế website bởi TM Solutions
Author: Minh Web
Author URI: https://minhweb.com/
Template: flatsome
Version: 3.0
*/

/*** POPUP ***/
.phoneshowallcall:hover {
	color: #fff;
}
.phoneshowallcall {
    width: 210px;
    display: block;
    background: #c00;
    color: #fff;
    height: 50px;
    border-radius: 25px;
    margin: 0 auto;
}
.phoneshowallcall strong {
    line-height: 40px;
    display: block;
    float: left;
    width: 40px;
    text-align: center;
    margin: 5px;
    border-radius: 50%;
    background: #fff;
    color: #c00;
    font-size: 30px;
}
.phoneshowallcall span {
    display: block;
    float: left;
    font-size: 15px;
    line-height: 14px;
    margin: 5px 10px 2px 5px;
    margin-left: 5px;
}
.phoneshowallcall b span {
    font-size: 20px;
}
.phoneshowallcall b {
    display: block;
    font-size: 20px;
    float: left;
}
.popup-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.popup-info ul li {
    color: #5a5a5a;
    padding-left: 0;
    text-align: left;
    margin: 3px 0;
    position: relative;
    font-size: 16px;
    display: flex;
    align-items: center;
}
.popup-banner {
    padding: 5px 20px;
}
.gradient-heading-pop {
    font-weight: 600;
    line-height: auto;
    text-align: center;
    background: linear-gradient(45deg,#ff8a00,#e52e71,#044bea,#7a00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: gradient-text 8s ease infinite;
    border: dashed 1px #908787;
    padding: 10px;
    font-size: 15px;
}
.gradient-heading-pop p {
    margin: 0;
}
/*** END POPUP ***/
/*** THANK YOU ***/
.rmLine b {
    background: transparent;
}
.shadow-solution > .col-inner {
	position: relative;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 4px #00000040;
	border-radius: 20px;
	background-color: #ffffff;
}
.shadow-solution > .col-inner .img {
    border-radius: 9999px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 4px #00000040;
    width: 120px !important;
    height: 120px;
    padding: 20px;
    margin-top: -60px;
    background: #ffffff;
}
.shadow-solution input[type=text], .shadow-solution input[type="email"], .shadow-solution textarea {
    border-radius: 5px;
	margin-bottom: 0;
}
.bongmo .col-inner:before {
    content: "";
    opacity: .1;
    background-color: rgb(68 73 77 / 1);
    border-radius: 20px;
    width: calc(100% - 100px);
    height: 110%;
    display: block;
    z-index: -10;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
/*** END THANK YOU ***/
.scroll-top > a{
  cursor: pointer;
}

.ss-banner .pat {
    top: 80px;
}

.slider-pc img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.blog-left .is-divider, .blog-center .is-divider, .blog-right .is-divider {
	display: none;
}

.blog-left .box-text, .blog-center .box-text, .blog-right .box-text {   
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

.blog-left .post-item .col-inner, .blog-center .post-item .col-inner, .blog-right .post-item .col-inner {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	border-radius: 10px;
	overflow: hidden;
}

.ss-product-image{
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:all .35s ease;
}

.ss-product:hover .ss-product-image{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.ss-product .section-content > .img:first-child{
    position:relative;
    overflow:hidden;
}

.ss-product .section-content > .img:first-child::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    transition:background .35s ease;
    pointer-events:none;
}

.ss-product:hover .section-content > .img:first-child::after{
    background:rgba(0,0,0,0.85);
}

.ss-product .section-content > .img:first-child img{
    transition:transform .7s ease;
}

.ss-product:hover .section-content > .img:first-child img{
    transform:scale(1.05);
}


/*************** START BẢNG GIÁ PHIÊN BẢN.   ***************/
.bang-gia-phien-ban{
    width:100%;
    border-collapse:collapse;
    font-size:15px;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,0.06);
}

/* Header */

.bang-gia-phien-ban th{
    background:#111827;
    color:#fff;
    font-weight:600;
    padding:16px;
    text-align:center;
}

/* Cell */

.bang-gia-phien-ban td{
    padding:16px;
    border-bottom:1px solid #eee;
    text-align:center;
}

/* Cột phiên bản */

.bang-gia-phien-ban td:first-child{
    text-align:left;
    font-weight:600;
    color:#111;
}

/* Giá niêm yết */

.bang-gia-phien-ban td:nth-child(2){
    color:#666;
}

/* Giá ưu đãi */

.bang-gia-phien-ban td:nth-child(3){
    color:#e60023;
    font-weight:700;
    font-size:16px;
}

/* Zebra rows */

.bang-gia-phien-ban tbody tr:nth-child(even){
    background:#fafafa;
}

/* Hover */

.bang-gia-phien-ban tbody tr:hover{
    background:#f3f4f6;
    transition:0.2s;
}

/* Liên hệ */

.gia-lien-he{
    color:#ff9800;
    font-weight:600;
}

/* Mobile */

@media(max-width:768px){

    .bang-gia-phien-ban{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}
/*************** END BẢNG GIÁ PHIÊN BẢN.   ***************/

/*************** ADD CUSTOM CSS HERE.   ***************/
.ct-title .section-title-normal {
    border-bottom: none;
    margin-bottom: 0;
}

.ct-title {
    margin-bottom: 5px;
}

.ct-title .section-title-normal span {
    margin-right: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-color: #ffffff;
    border-width: 1px;
}

.rmLine .section-title b {
    background-color: transparent;
}

.rmLine .section-title-normal {
    border: none !important;
    margin-bottom: 0 !important;
}

.titleLeftLine {
    margin-bottom: 0;
}

.titleLeftLine .section-title-normal {
    border-bottom: none;
    margin-bottom: 0;
}

.titleLeftLine .section-title-normal span {
    border-bottom: none;
    margin-right: 0;
    padding-bottom: 0;
    border-left: 2px solid #ffffff;
    border-color: #ffffff !important;
    padding-left: 5px;
}

.rmLine .section-title-normal span {
    border: none !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
}

.txt-red {
    color: #ff0000 !important;
}

.button.txt-red {
    margin: 0;
    border: none;
}

.pat {
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
}

.pa {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.rmp > p {
    margin-bottom: 0;
	display: flex;
}
/*************** START BTN STYLE 2  ***************/
.btn-style-2 {
	background: #252728cc !important;
	color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden;
    transition: all ease 1s;
	
	&:before {
		position: absolute;
		width: 100%;
		height: 100%;
		content: "";
		top: 0;
		left: 0;
		background: #ffffff;
		transition: all ease 1s;
		transform: translate(-120%, -50px) rotateY(270deg);
	};

	&:hover:before {
		transform: translateY(0);
	};
	
	&:hover span {
		color: #000000 !important;
		position: relative;
	};

	&:hover {
		color: #000000 !important;
	};

	&:hover i {
		color: #000000 !important;
	};

	& i {
		transition: all ease 1s;
	}

}
/*************** START BTN STYLE 1  ***************/
.buttonSlider {
	transition: all ease 1s;
}

.btn-style-1:hover {
	background: #ffffff !important;
	color: #000000 !important;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.btn-style-1:hover > a {
	color: #000000 !important;
}

.btn-style-1 {
    border-radius: 5px !important;
    background: #00000078 !important;
    color: #ffffff !important;
    border: 1px solid !important;
    overflow: hidden;
    position: relative;
    transition: all ease 1s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.btn-style-1:before {
	content: "";
	background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(0, 0, 0, 0) 0%, rgba(6, 49, 110, 1) 0%, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.6026785714285714) 100%);
	width: 100%;
	height: 100%;
	position: absolute;
	left: -110%;
	top: 0;
	animation: buttonAnimation 2s linear infinite;
}

@keyframes buttonAnimation {
	0% {
		left: -100%;
	}

	50%,
	100% {
		left: 100%;
	}
}
/*************** END BTN STYLE 1  ***************/	
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.slider-mobile img {
		object-fit: cover !important;
		height: 369px;
		max-height: 369px !important;
	}
	
	.slider-mobile .flickity-prev-next-button {
        display: block !important;
    }
	
	.slider-mobile .slider-nav-circle .flickity-prev-next-button:hover .arrow, .slider-mobile .slider-nav-circle .flickity-prev-next-button:hover svg {
		background-color: #00000078 !important;
		border-color: #00000078 !important;
	}
	
	.slider-mobile .flickity-page-dots .dot {
		border: 1px solid #111;
		height: 10px;
		width: 10px;
		margin: 0 2px;
	}
	
	.ss-fdcr .pat {
		position: relative;
	}
	
	.ss-fdcr .section-content {
		display: flex;
		flex-direction: column-reverse;
	}
	
	.blog-left .box-text {
		min-height: 68.45px;
	}

	.blog-right .box-text {
		min-height: 68.45px;
	}
	
	.blog-left a.plain, .blog-right a.plain, .blog-center .from_the_blog_excerpt  {
	  display: -webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	}
	
	.mpb-0 {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.ux-menu-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 20px;
	}
	
	.ss-product .section-content > .img .img-inner {
		min-height: 369px !important;
	}
	
	.ss-product .section-content > .img img {
		min-height: 369px !important;
	}
	
	#footer .section-title {
		border-left: 2px solid #ffffff !important;
		padding-left: 5px;
	}

}