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

/*************** ADD CUSTOM CSS HERE.   ***************/
.section-title b {
    opacity: 0;
}
.section-title-main {
    color: var(--fs-color-primary);
    font-size: 30px;
}

.top1 .img-inner {
    border-radius: 10px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}
.top2 {
    border-radius: 10px;
    overflow: hidden;
}
.mb0 {
    margin-bottom: 0;
}

.product h4 {
    color: white;
    background: url(../../uploads/bgInternet.e97f9def4fe9552ac783.png);
	background-size: cover;
    font-size: 24px;
    padding: 10px 20px;
    letter-spacing: 1px;
    margin: 0;
	
}
.product .col-inner {
    background: white;
    height: 100%;
    box-shadow: 0 0 0 1px rgb(209, 209, 209) inset;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 130px;
}
.product .speed {
    color: rgb(44, 47, 49);
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    background: url(../../uploads/icon-speed.e99c2c4d6e636fc97d85e258bf4eea8f.svg)
        left no-repeat;
    padding-left: 50px;
    margin: 15px 20px;
}
.product .speed p {
    margin: 0;
}
.product .des {
    padding: 0 20px 20px 20px;
}
.product .des ul {
    display: block;
    margin: 0;
}
.product .des ul li {
    display: block;
    margin: 0;
}
.product .price {
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1px;
    font-size: 24px;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 70px;
}
.product .price:before {
    content: "Giá/tháng";
    display: block;
    font-weight: normal;
    font-size: 14px;
    color: #727272;
    margin-bottom: 5px;
}
.product .price p {
    margin-bottom: 0;
}
.product .button {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 10px;
    border-bottom-left-radius: 0;
}

.product2 .col-inner {
    height: auto;
    padding: 1px;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: white;
	border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;
	margin: 0;
}
.product2 table td {
    text-align: center;
}
tbody tr:nth-child(even) {
    background: rgb(238 0 51 / 6%);
}

tbody tr:hover {
    background: #eef3ff;
    transition: 0.25s;
}

td,
th {
    padding: 14px 18px;
    border-bottom: 1px solid rgb(209, 209, 209);
    text-align: center;
	width: 100%;
	color: rgb(44, 47, 49);
}

td[rowspan],
td[colspan] {
    background: #f0f4ff;
    font-weight: 600;
}

tbody tr:last-child td {
    border-bottom: none;
}

thead{
	background: url(../../uploads/bgInternet.e97f9def4fe9552ac783.png);
	background-size: cover;
}
th{
	color: white;
}
td:first-child{
	font-weight: bold;
}

.cta1 .row{
	background: linear-gradient( to right, #ee0033, #ee0033 50%, transparent 0 );
	border-radius: 15px;
	overflow: hidden;
}
.cta1 .row .col{
	background: url(../../uploads/backgroundHTOnline.ddcc87d39a98a34827f0.png) top center no-repeat;
	background-size: contain;
}
.cta1 .text{
	text-shadow: 1px 1px 1px black;
}
.cta2 .zalo{
	background: #2196f3;
}
.cta2 .zalo i{
	background: url(../../uploads/Icon_of_Zalo.svg.webp) center no-repeat;
    background-size: contain;
    font-size: 0;
    width: 18px;
    height: 18px;
	margin-right: 5px;
}

#footer{
	background: #f7f8fa;
	border-top: 1px solid rgb(221, 221, 221);
}

#content .submain{
	background: url(../../uploads/bg-it.17570301e409d5e7fcb5-1-scaled.png) bottom no-repeat;
}
.submain h2{
	text-align: center;
    color: white;
    text-transform: uppercase;
    margin: 50px 0;
    font-size: 40px;
	text-shadow: 2px 2px 2px black;
}

.contact-mobile{
	display: none;
}








@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
	.submain h2{
		font-size: 20px;
	}
	.cta1{
		padding-left: 10px;
		padding-right: 10px;
	}
	.cta1 .row{
		background: #ee0033;
		padding: 10px;
	}
	.cta1 .row .col{
		background: none;
	}
	.wacu-widget.wacu-br{
		display: none;
	}
	.contact-mobile{
		display: flex;
		gap: 5px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		padding: 10px 5px;
		background: rgba(0, 0, 0, 0.6);
	}
	.contact-mobile a{
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		flex: 1;
		box-sizing: border-box;
		padding: 10px;
		font-weight: bold;
		background: #00BCFA;
		color: white;
		border-radius :5px;
	}
	.contact-mobile a:last-child{
		background: #ee0033;
	}
	.contact-mobile a:last-child img{
		filter: brightness(0) invert(1);
		-webkit-animation: phone-anim 1s infinite ease-in-out;
    	animation: phone-anim 1s infinite ease-in-out;
		-webkit-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	.contact-mobile img{
		width: 20px;
		height: 20px;
		margin: 0 10px 0 0;
	}
	@-webkit-keyframes phone-anim {
		0% {
			-webkit-transform: rotate(0) scale(1) skew(1deg)
		}

		10% {
			-webkit-transform: rotate(-25deg) scale(1) skew(1deg)
		}

		20% {
			-webkit-transform: rotate(25deg) scale(1) skew(1deg)
		}

		30% {
			-webkit-transform: rotate(-25deg) scale(1) skew(1deg)
		}

		40% {
			-webkit-transform: rotate(25deg) scale(1) skew(1deg)
		}

		50% {
			-webkit-transform: rotate(0) scale(1) skew(1deg)
		}

		100% {
			-webkit-transform: rotate(0) scale(1) skew(1deg)
		}
	}
}