/*
Theme Name: Marketing
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
:root {
    --service-google-color: #e9f1ff;
    --service-youtube-color: #ffeeef;
    --service-facebook-color: #fbf6e8;
    --service-setup-color: #deefe2;
    --service-website-color: #efebf5;
    --service-tiktok-color: #edf3ef;
    /* global scope */
}

/*************** ADD CUSTOM CSS HERE.   ***************/
.text-primary {color: var(--primary-color) !important;}

.font-light {font-weight: 300;}
.font-regular {font-weight: 400;}
.font-medium{  font-weight: 500;}
.font-semibold{font-weight: 600;}
.font-bold{font-weight: 700;}
.font-extrabold{font-weight: 800;}
.section-title-normal {
    span{
        border-color: var(--primary-color);
    }
}
.button,
button,
input[type=button],
input[type=reset],
input[type=submit]{
    font-weight: 600;
}
.button{
    .white{
        color: #4c4c4c !important;
    }
}

/*************** ADD MOBILE ONLY CSS HERE  ***************/
@media only screen and (min-width: 48em) {
    .row-5-col {
        display: flex;
        flex-wrap: wrap;
    }
    .row-5-col>.col {
        flex: 0 0 20%;
        max-width: 20%;
    }

}


/*************** ADD CUSTOM CSS HERE.   ***************/
.button-aboutus {
    background-color: white;
    margin: 0;
    padding: 10px 20px 10px 44px;
    background-image: url("/wp-content/uploads/2025/12/ico-nova.svg");
    background-position: 12px center;
    background-repeat: no-repeat;
    border-radius: 35px;
    box-shadow: 0px 0px 30px 0px rgb(177 89 105 / 20%);
    text-transform: uppercase;
    color: var(--primary-color);
    background-size: 25px;
    font-weight: 600;
        display: inline-block;
}
.section-doitac , .section-hethong , .dich-vu-section ,
.section-web , .section-donghanh , .tin-tuc-section ,
.gioithieu-section {
    h2 {
    font-weight: 700;
    font-size:2em;
    margin-bottom: 0.3em;
    }
}
/*************** SECTION HERO AND MAINMENU  ***************/
.slider-wrapper{
    .button.white{
        color:var(--fs-color-base);
    }
}
ul.header-nav-main li.current-dropdown>.nav-dropdown {
    margin-top:19px;
}
ul.header-nav-main .nav-dropdown>li>a:hover{
    color:var(--primary-color);
}
ul.header-nav-main li.menu-item-has-children{
    
}
.home,
.page-id-1099{
    ul.header-nav-main .menu-item-16 > a {
        color: inherit !important;
        background: transparent !important;
        box-shadow: none !important;
        &:before{
        display:none;
        }
    }
}
.header-button .button{
        font-size: 1.1em;
        
}
/*************** SECTION DICH VU  ***************/
/* animation quay */
@keyframes rotateProgress {
    100% {
            transform: rotate(-360deg);
        }
}
.dich-vu-section{
    background: url(/wp-content/uploads/2025/12/bg-dichvu.png) -20px -30px;
    background-repeat: no-repeat;
    .plain{

        .icon-box {
            position: relative;
                overflow: hidden;
            .icon-box-img,
            .icon-box-text{
                position: relative;
                z-index: 3;
            }
           
            &::before {
                content: "";
                visibility: hidden;
                background-image: conic-gradient(#729ffd 20deg,
                        transparent 120deg);
                height: 150%;
                width: 150%;
                position: absolute;
                left: -25%;
                top: -25%;
                    
            }
            &::after{
                content: "";
                 transform: scale(0.98);
                height: 100%;
                width: 100%;
                position: absolute;
                background-color: white;
                top: 0;
                left: 0;
                display: grid;
            }
            
        }
        &:hover {
            .icon-box {
                &::before {
                    visibility: visible;
                    animation: rotateProgress 2s infinite linear;
                }
            }
            h3 {
                color: var(--primary-color);
            }
        }
        .icon-box-text p{
            color: #626262;
        }
    }
}

.dich-vu-section .col1 .icon-box, 
.dich-vu-section .col4 .icon-box {
    background-color: var(--service-google-color);
    border-radius: 40px 0;
    color:var(--fs-color-base);
    padding: 55px 20px 50px 20px;
    &::after {
        border-radius: 40px 0;
        background-color: var(--service-google-color);
    }
    
}
.dich-vu-section .col2 .icon-box,
.dich-vu-section .col5 .icon-box {
    background-color: var(--service-youtube-color);
    border-radius: 40px;
    color:var(--fs-color-base);
            padding: 55px 20px 50px 20px;
    &::after {
        border-radius: 40px;
        background-color: var(--service-youtube-color);
    }
}
.dich-vu-section .col3 .icon-box,
.dich-vu-section .col6 .icon-box {
    background-color: var(--service-facebook-color);
    border-radius: 0 40px;
    color:var(--fs-color-base);
            padding: 55px 20px 50px 20px;
    &::after {
        border-radius: 0 40px;
        background-color: var(--service-facebook-color);
    }
}
.dich-vu-section .col4 .icon-box {
    background-color: var(--service-setup-color);
    border-radius: 0 40px;
    &::after {
        border-radius: 0 40px;
        background-color: var(--service-setup-color);
    }
}
.dich-vu-section .col5 .icon-box {
    background-color: var(--service-website-color);
        &::after {
            background-color: var(--service-website-color);
        }
}
.dich-vu-section .col6 .icon-box {
    background-color: var(--service-tiktok-color);
    border-radius: 40px 0;
    &::after {
        border-radius: 40px 0;
            background-color: var(--service-tiktok-color);
        }
}


/*************** SECTION LIEN HE  ***************/
.section-donghanh{
    .col{padding-bottom:0;}
    .button.is-link{
        font-size: 18px;
        i{    
            font-size: 22px;
        margin-right: 2px;
        
        }
    }
}

.section-lienhe .col-inner{
     
    padding: 30px;
    border-radius: 10px;
    
}


.wpcf7-form{
    margin:0;
    .col{
       padding-bottom: 8px;
    }
    input[type=text],input[type=tel]{min-height:45px;}
    input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea{
        
    	background: #f1f1f1;
    	border-radius: 5px;
    	box-shadow: none;
    	font-size: 14px;
    	border: none;
        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15);
    }
    .wpcf7-submit{
        margin:0;
        border-radius:30px;
        font-size: 15px;
        text-transform:capitalize;
    }
}
.wpcf7 form.sent .wpcf7-response-output{
        border-color: #46b450;
    color: #128f1d;
    border: none;
    background: #e3fbe6;
    font-weight: normal;
    font-size: 15px;
    padding: 15px;
    margin: 10px 0 0;
}     

/*************** SECTION THIET KE WEB***************/
.section-web{
  .box {
	  border-radius:10px; 
	  background: white;
	  overflow: hidden;
  	.box-image{
  	  padding: 15px;
  	  padding-top:20px;
  	  
  	}
  }
}

/*************** SECTION FOOTER  ***************/
.footer-wrapper{
    .col{padding-bottom:0;}
    .section-title-normal{
        border:none;
        span{
            border:none;
            text-transform:capitalize;
        }
    }
    p{
    	margin-bottom:10px;
    	font-size:95%;
    	color:#cfcfcf;
    }
    .social-icons{ margin-top:10px;
    	.icon {margin-right:5px;}
    }
    
}
.absolute-footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-top: 15px;
    backdrop-filter: blur(5px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
ul.menus-footer,
   .absolute-footer{
	a{
		color:#cfcfcf;
		&:hover{
			color: var(--primary-color);
		}
	}
}
/*************** PAGE GIOI THIEU ***************/
.flatsomeaz-timeline-vertical .my-timeline {
    padding-bottom: 2rem;
    border-left: 2px solid #d4d9df;
    position: relative;
    padding-bottom: 0;
}


.flatsomeaz-timeline-vertical .my-timeline:before {
    content: " ";
    width: 20px;
    height: 20px;
    background: white;
    position: absolute;
    left: -11px;
    top: 0px;
    padding: 0 7px;
    border: 3px solid #22c0e8;
    border-radius: 99px;
}
.flatsomeaz-timeline-vertical .my-timeline:last-child {
    
    padding-bottom: 0;
}
.my-timeline .my-time {
    line-height: 32px;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 4px 10px;
    background: var(--primary-color);
    color: #ffffff;
}

.time-section {
    margin-left: 20px;
    margin-top: -13px;
}
.my-timeline-vertical {
    padding: 16px 5px 0 25px !important;
}
.my-time p {
    margin-bottom: 0
}
/*************** PAGE GOOGLE ADS ***************/
.line-before-title{
        min-height: 65px;
        margin:  0 0 15px;
        position: relative;
        display: flex;
        justify-content: center;
        &:before {
            content: "";
            width: 69px;
            height: 5px;
            position: absolute;
            left: 0;
            bottom: 0;
            background: var(--primary-color);
        }
        &:after {
            content: "01";
            font-size: 53px;
            width: 12%;
            line-height: 65px;
            position: absolute;
            left: 0;
            top: 0;
            background-repeat: no-repeat;
            background-size: 100%;
            color:var(--fs-experimental-link-color);
        }
        .section-title-main{
            border:none;
            margin: 0;
            padding: 0;
            text-transform: capitalize;
        }
        .section-title{
                margin-left: 10px;
                margin-bottom:0;
                vertical-align: middle;
                padding-left: 14%;
                border:none; 
        }
        &.n1b:after {content: "01";}
        &.n2b:after {content: "02";}
        &.n3b:after {content: "03";}
        &.n4b:after {content: "04";}
}
.section-quytrinh{
    .lead{
            font-size: 14px;
            color: gainsboro;
            margin:0;
    }
}

/*************** PAGE THIET KE WEBSITE  ***************/
.pricing-table {
    .price{
        font-weight:700;
        color: var(--primary-color);
    }
    .description{
            padding: 0 15px 15px;
            color: var(--primary-color);
    }
    .items{
        padding: 10px 10%;
    }
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}