/* 1. Headings */
h2.section-title{
    color: #0270BA;
}

/* 2. Body Text */

/* 3. Links */
a.text-white:hover{
    color: #F0F0F0!important;
}
.cursor-pointer{
    cursor: pointer;
}

/* 4. Font size & Transformation */
.font-size-40{
    font-size: 40px;
}
.font-size-50{
    font-size: 50px;
}

/* 5. Aligment: padding, margin, width, height */
.line-height-1{
    line-height: 1.0!important;
}
.line-height-auto{
    line-height: normal!important;
}
.mb-30 {
    margin-bottom: 30px !important;
}

/* 6. Lists */

/* 7. Tables */

/* 8. Forms */

/* 9. Buttons */

/* 10. Images */
.boximagecover{
    position: relative;
    width: 100%;
    padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
.boximagecover img{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.boximagesquare{
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Square - Aspect Ratio */
}
.boximagesquare img{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;    
    height: 100%;
}

.boximage3p2{
    position: relative;
    width: 100%;
    padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
.boximage3p2 img{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;    
    height: 100%;
}
.boximage16p9{
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 3:2 Aspect Ratio */
}
.boximage16p9 img{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;    
    height: 100%;
}

.icon-play:hover{
    background: #b50000;
    width: 60px;
    height: 60px;
}
.icon-play:hover i{
    font-size: 1.5em;
}

.product-images .box-image {
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 0.5rem;
}
.product-images .images-small .box-image {
margin-bottom: 0.75rem;
}

.product-images .imagecover {
    background-position: 50% 50%;
    background-size: cover;
    height: auto;
    overflow: hidden;
    padding-top: 70%;
    position: relative;
    border-radius: 0.5rem;
}

.product-images .imagecover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    transition: transform .5s ease;
}
.product-images .imagecover:hover img {
transform: scale(1.5);
}

.product-images .images-large .imagecover {
    padding-top: 68.5%;
}

.product-images .images-small .box-image {
    margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
.product-images .images-large {
    padding-right: 0;
}
}

/* 11. Background */
.section-one, .bg-ngoinha{
    background: url("../images/bg-22.webp") center center no-repeat;    
}
.worker-bg-overlay{    
    background: url("../images/bg-4.jpg") center center no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: .07;
    mix-blend-mode: multiply;
    transition: background .3s, border-radius .3s, opacity .3s;

    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
.bg-grey {
    background: #EDEDED;
}
.main-account {
    background: #e3eaff;
}
.main-account .wrap-breadcrumbs, .main-account .breadcrumb {
    background: none;
}
.bg-readonly{
    background: #e9ecef;
    color: rgb(73, 80, 87);
    opacity: 1;
}

/* 12. Others */
.hover-spin{
    transition: all  .7s ease-in-out;
}
    .hover-spin:hover{
        transform: rotate(360deg);
    }
.progressbar{
    color: #000;
    background-color: #f1f1f1;
    border-radius: 16px;
    box-shadow: #0000003d 0 3px 8px;
}
    .progresspercent{
        color: #fff !important;
        background-color: #ff84a2;
        border-radius: 16px;
        white-space: nowrap;
    }
/* Shine */
.hover14 span {
	position: relative;
}
.hover14 span::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14 span:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
/* Common */
.page-title-overlay {
    position: relative;
}
.page-title-area{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    padding: 100px 0px;
}
.page-title-area::after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 35, 40, 0.7);    
}
.page-title-wrapper{
    position: relative;
    z-index: 1;
}

.worker-image{
    height: 120px;    
}

.square-box{
    position: relative;
    width: 100%;
    overflow: hidden;    
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}

.post-box-list .post-image{
    width: 30%;
    max-height: 150px;
    overflow: hidden;
}
.post-box-list .post-text{
    width: 65%;
}

.circle-icon-tool{
    display: block;
    color: #9B9B9B;
    font-size: 64px;
    width: 160px;
    height: 160px;
    position: relative;
    margin: 0 auto 20px;
    line-height: 160px;    
}
.circle-icon-tool:hover{
    color: #F3901A;
}
.circle-icon-tool:hover .hexagon {
    background-color: #0270BA;
    border-color: #0270BA;
}
.circle-icon-tool:hover .hexagon::after, .circle-icon-tool:hover .hexagon::before {
    border-color: #0270BA;
}
.circle-icon-tool .hexagon {
    position: absolute;
    top: 0;
    left: 0;
}
.circle-icon-tool i {
    position: relative;
    z-index: 2;
}
.hexagon {
    position: relative;
    width: 140px;
    height: 80.83px;
    background-color: #ffffff;
    margin: 40.41px 0;
        margin-left: 0px;
    border-left: solid 2px #f2f2f2;
    border-right: solid 2px #f2f2f2;
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    display: block;
    margin-left: 10px;
}
.hexagon::after, .hexagon::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 98.99px;
    height: 98.99px;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 18.5025px;
}
.hexagon::before {
    top: -49.4975px;
    border-top: solid 2.8284px #f2f2f2;
    border-right: solid 2.8284px #f2f2f2;
}
.hexagon::after {
    bottom: -49.4975px;
    border-bottom: solid 2.8284px #f2f2f2;
    border-left: solid 2.8284px #f2f2f2;
}

.item-yeucaubaogia.cancelled{
    opacity: 0.7;
}
.item-yeucaubaogia span:first-child{
    font-weight: 600;
    float: left;
}

#dvsCanvasPainterArea {
    width: 100%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    
}
.dvsCanvasArea_overlay, .dvsCanvasArea_example, #dvsCanvasArea_holder{
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;			
    z-index: 1001;
}
.dvsCanvasArea_overlay{
    opacity: 0.3;
}
.dvsCanvasArea_example{
    background: #FFF;
}
#dvsCanvasArea_colortables .colorbox{    
    height: 500px;
    overflow-y: auto;    
}
#dvsCanvasArea_colortables .itemcolor:hover{
    cursor: pointer;
    transform: scale(1.1);
}

/* search overlay box */
#search-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	text-align: center;
	background: rgba(0, 0, 0, 0.9);	
	margin: 0;
	z-index: 10000;
}
	#search-overlay:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: 0;		
	}
	#search-overlay .search-centered {
		display: inline-block;
		vertical-align: middle;
		min-width: 50%;
		padding: 20px 20px;
		color: #FFF;
		border: none;
		background: #FFFFFF;
		border-radius: 10px;
	}	
	.search-overlay-close-btn {
		position: fixed;
		top: 1em;
		right: 1em;
	}
	.search-overlay-close-btn:hover {
		color: #777;
		cursor: pointer;
	}
.keyword-highlight{
	background: yellow;
}	

/* Accordion */
#accordionExample .btn:focus{
	box-shadow: none!important;
}

.accordion .accordion-button{
	color: #0270BA;
	font-weight: bold;
}
.accordion .accordion-button.collapsed{
	font-weight: 500;
	color: #000;
}
.accordion .accordion-button:after {
    background: transparent;    
    content: "+";
    font-weight: 300;
    width: auto;
    height: auto;
    font-size: 22px;
}
.accordion .accordion-button:not(.collapsed):after {
    content: "-";
    background: transparent;
}

.parallax {
	/* Set a specific height */
	height: 100%; 
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
    .parallax img{
        opacity: 0;
    }
    @media (max-width: 767px) {
        .parallax img{
            opacity: 1;
        }   
    }
.max1line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.max2line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.max3line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.max4line {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.max5line {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.aboutPage{
	cursor: pointer;
	color: #000;
	padding-top: 20px;
	padding-bottom: 30px;
}
	.aboutPage span.fa {
		display: block;
		width: 100px;
		height: 100px;
		line-height: 100px;
		margin:auto;
		border-radius:50%;  
		font-size: 40px;
		color: #FFFFFF;
		opacity: 0.9;
		background-color: #F3901A;
		border: 2px solid #F3901A;

		webkit-transition:all .5s ease;
		moz-transition:all .5s ease;
		os-transition:all .5s ease;
		transition:all .5s ease;

	}
	.about-item:hover span.fa{
		opacity: 1;	
		border: 2px solid #F3901A;
		font-size: 42px;
		-webkit-transform: scale(1.1,1.1) rotate(360deg) ;
		-moz-transform: scale(1.1,1.1) rotate(360deg) ;
		-o-transform: scale(1.1,1.1) rotate(360deg) ;
		transform: scale(1.1,1.1) rotate(360deg) ;
	}
	.about-item h3{
		color: #333;
	}
	.about-item:hover h3{
		color: #F3901A;
	}
.blockquote {
	position: relative;
	padding-left: 40px;
	font-family: 'Times New Roman', Times, serif;
	font-size: 24px;
    line-height: 150%;
	font-weight: 500;
	color: #333;
	quotes: "“" "”" "‘" "’";
}
	.blockquote::before, .blockquote::after {
		color: #c6c6c6;
		font-size: 2em;
		font-weight: 600;
		line-height: 0.1em;
	}
	.blockquote::before {
		position: absolute;
		left: 0;
		content: open-quote;
		margin-right: 0.15em;
		vertical-align: -0.15em;
	}
	.blockquote::after {
		content: close-quote;
		vertical-align: -0.7em;
	}

/* Begin Back-to-top */
a.back-to-top {
    display: none;
    position: fixed;
	z-index:9000;
    bottom: 18px;
    right: 15px;
    text-decoration: none;
}
	a.back-to-top i {
	    display: block;
	    font-size: 18px;
	    width: 30px;
	    height: 30px;
	    line-height: 30px;
	    color: #fff;
	    background: #0270BA;
	    /*border-radius: 50% 50%;*/
		border-radius: 6px;
	    text-align: center;
	    transition: all 0.2s ease-in-out;
	    -moz-transition: all 0.2s ease-in-out;
	    -webkit-transition: all 0.2s ease-in-out;
	    -o-transition: all 0.2s ease-in-out;
	    /*box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);*/
		box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
	}
	a.back-to-top:hover,
	a.back-to-top:focus {
	    text-decoration: none;
	}
/* End Back-top-top*/

/*BEGIN CONTENT PAGE CSS*/ 
.post-menu__content ul{
    list-style-type: none;
}
#dvsArticleContent, .dvsArticleContent{
    font-size: 16px;
    line-height: 150%;
}
#dvsArticleContent .tplCaption, #dvsPageContent .tplCaption, .dvsArticleContent .tplCaption{
    background: #F1F1F1;
}
    #dvsArticleContent .tplCaption p.Image, #dvsPageContent .tplCaption p.Image, .dvsArticleContent .tplCaption p.Image{
        padding: 3px 5px;
        font-style: italic;
        /* font-size: 90%; */
    }
#dvsArticleContent figcaption, .dvsArticleContent figcaption{
    background: #F1F1F1;
    color: #222;
    /* font-size: 90%; */
}
#dvsArticleContent a, .dvsArticleContent a{
    color: #0270BA;
}
#dvsArticleContent a:hover, .dvsArticleContent a:hover{
    text-decoration: underline;
}
#dvsArticleContent p, #dvsPageContent p, .dvsArticleContent p{
    margin: 0px 0px 1em;
}
#dvsArticleContent h2, #dvsArticleContent  h2, #dvsArticleContent  h3,  #dvsArticleContent h4, #dvsArticleContent h5, #dvsArticleContent h6{
    margin: 1rem 0px 1rem;
    line-height: 1.5;
}
.dvsArticleContent h2, .dvsArticleContent  h2, .dvsArticleContent  h3,  .dvsArticleContent h4, .dvsArticleContent h5, .dvsArticleContent h6{
    margin: 1rem 0px 1rem;
    line-height: 1.5;
}
#dvsArticleContent h2, .dvsArticleContent h2{    
	color: #0270BA;
    padding-left: 16px;
    position: relative;
}
#dvsArticleContent h2::before, .dvsArticleContent h2::before  {
    content: '';		
    position: absolute;
    width: 4px;
    height: 40px;
    background: #0270BA;		
    left: -0px;
}
#dvsArticleContent h2{
    font-size: 26px;		
}
#dvsArticleContent h3, .dvsArticleContent h3{
    font-size: 24px;
    line-height: 1.5;
}
#dvsArticleContent h3, .dvsArticleContent h3{
    font-size: 22px;
    line-height: 1.5;
}
#dvsArticleContent h4, .dvsArticleContent h4{
    font-size: 20px;
    line-height: 1.5;
}
#dvsArticleContent h5, .dvsArticleContent h5{
    font-size: 18px;
    line-height: 1.5;
}
#dvsArticleContent h6, .dvsArticleContent h6{
    font-size: 16px;
    line-height: 1.5;
}
#dvsArticleContent ul, .dvsArticleContent ul, #dvsArticleContent ol, .dvsArticleContent ol{
    margin-left: 1rem;
    margin-bottom: 1rem;
}
#dvsArticleContent ul li, .dvsArticleContent ul li, #dvsArticleContent ol li, .dvsArticleContent ol li{
    line-height: 1.5;
    margin-bottom: 10px;
}
#dvsArticleContent blockquote, .dvsArticleContent blockquote {		
    position: relative;
    border-left: none;
    margin: 30px 2% 28px;
    padding: 0px 0px 0px 20px;
    line-height: 130%;
    word-wrap: break-word;
    border-left: 1px solid #0270BA;
}
#dvsArticleContent blockquote::before, .dvsArticleContent blockquote::before {
    content: '';		
    position: absolute;
    width: 4px;
    height: 100%;
    background: #0270BA;		
    left: -6px;
}
#dvsArticleContent blockquote p, .dvsArticleContent blockquote p {
    font-family: PT Serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.5px !important;
    color: #ec3535;
    line-height: 130%;
}
#dvsArticleSapo, .dvsArticleSapo{
	font-weight: 500;
    text-align: justify;
}
@media (max-width: 768px) {
    #dvsArticleContent img, .dvsArticleContent img{        
        height: auto!important;
    }
}


.gift-item {
    box-shadow: 0px 5px 24.25px 0.75px rgb(0 0 0 / 10%);
    border-radius: 3px;
    overflow: hidden;
}
.gift-thumb img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.gift-content {
    background-color: #fff;
    padding: 20px;
    line-height: 180%;
}
.gift-content h3{
    font-size: 18px;
}

.mycard-wrap {
    height: 324px;
    padding: 0;
    width: auto;
    position: relative;
}
.mycard{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
    .mycard-img{
        width: 100%;
        height: 100%;
    }
    .mycard-img img {
        -webkit-filter: blur(5px);
        filter: blur(5px);
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .mycard .btn-float {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
    }
    .mycard-overlay{
        background-color: #000;
        opacity: 0.7;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        -ms-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    .mycard .content-wrap {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 50px;
        color: #fff;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    .mycard-icon {
        pointer-events: none;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    .mycard-text {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 20px 50px 50px;
        bottom: -100px;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
    .mycard-title {
        min-height: auto;
        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
        font-size: 28px;
        line-height: 32px;
        font-weight: bold;
        margin-bottom: 20px;
        height: 64px;
        -ms-transition: color 0.3s ease;
        -o-transition: color 0.3s ease;
        -moz-transition: color 0.3s ease;
        -webkit-transition: color 0.3s ease;
        transition: color 0.3s ease;
    }
    .mycard:hover .content-wrap {
        top: -120px;
        color: #005BA2;
    }
/*END CONTENT PAGE CSS*/

/******************************************* Login form *****************************************************/
.login-google span::before {
    content: "";
    background: url('../images/icon-google.png');
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.login-form .login-google {
    border: 1px solid #CACEDA;
    padding-top: 12px;
    padding-bottom: 12px;
}

.login-form .login-facebook,
.btn-login {
    padding-top: 12px;
    padding-bottom: 12px;
}

.login-form .login-facebook i {
    font-size: 24px;
}

.login-form .login-google span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form {
    max-width: 600px;
    padding: 30px;
}

.login-form .form-group input {
    height: 50px;
}

.login-form .form-group input::placeholder {
    font-size: 14px;
}

.dashboard-menu .nav-dropdown li a {
    color: #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dashboard-menu .nav-dropdown li a.active, .dashboard-menu .nav-dropdown li a.active i {
    color: #0873BB;
    background: #e3eaff;
    border-radius: 10px !important;
    font-weight: bold;
}

.dashboard-menu .nav-dropdown li:hover a, .dashboard-menu .nav-dropdown li:hover i {
    color: #0873BB;
    background: #e3eaff;
    border-radius: 10px !important;
}

.dashboard-update {
    padding: 20px 30px;
}

.myAccount-navigation .nav-dropdown li a {
    padding: 6px 20px;
    display: block;    
}
.myAccount-navigation .nav-dropdown li a i {
    color: #999999;
}
.myAccount-navigation .avatar {
    width: 50px;
    height: 50px;
}
.myAccount-navigation .my-account {
    padding: 20px 20px 10px 20px;
}
.myAccount-navigation .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.myAccount-navigation .avatar2 {
    width: 120px;
    height: 120px;
}
.myAccount-navigation .avatar2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-button{
    display: inline-block;
}
.header-button .myAccount-navigation {
    position: absolute;
    min-width: 240px;
    display: none;
    transform-origin: 0 top;
    right: -100px;
}
.header-button .myAccount-navigation::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    left: 110px;
    border-top: 1px solid #ccc;
    transform: rotate(45deg);
    top: 3px;
    border-left: 1px solid #ccc;
    background: #fff;
}
.header-button .myAccount-navigation-wrap {
    border: 1px solid #CCCCCC;
    margin-top: 10px;
}
.header-button .login-wrapper:hover .myAccount-navigation {
    display: block;
    animation: menu-float-show .2s ease-out;
    z-index: 2;
}
.header-button .login-wrapper {
    position: relative;
    margin-left: 40px;
}
.myAccount-navigation .nav-dropdown li a {
    padding: 6px 20px;
    display: block
}
.header-button .myAccount-navigation .nav-dropdown li:hover a {
    color: #333;
    background: #F3F3F3;
}
.myAccount-navigation .nav-dropdown li a i {
    color: #999999;
}
.myAccount-navigation .my-account {
    padding: 20px 20px 10px 20px;
}
.myAccount-navigation .avatar {
    width: 50px;
    height: 50px;
}
.myAccount-navigation .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.change-avatar {
    position: relative;
    height: 100%;
}

.change-avatar .btn-upload {
    padding: 8px 32px;
    font-size: 14px;
    border-radius: 10px !important;
}

.change-avatar .btn-upload:hover {
    background: #4BA354;
}

.change-avatar::before {
    content: '';
    width: 1px;
    height: 96%;
    display: block;
    border-left: 1px solid #D9D9D9;
    position: absolute;
    top: 0;
    left: 16px;
}

.dashboard-info {
    padding: 20px 30px;
}


.md-form {
    padding-top: 80px;
    background: #807e7bba;
}

.md-form__title {
    font-size: 28px;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}

.md-form .modal-content {
    background: 0;
    border: 0;
}

.md-form .modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-clip: padding-box;
    border-radius: 0.3rem;
    outline: 0;
}

.md-form .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

.md-form input.form-control {
    font-size: 16px;
    height: 40px;
    border-radius: 20px;
    border: 0;
    padding-left: 24px;
    padding-right: 24px;
}

.md-form .md-form__btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    opacity: 1;
    float: unset;
    margin-left: 20px;
    background: #fff;
    font-size: 30px;
    line-height: 1;
    border-radius: 50%;
    -webkit-transition: .3s;
    transition: .3s;
    color: #333;
}

.md-form .modal-dialog {
    transform: scale(0.3) !important;
    transition: all 0.3s !important;
    transform-origin: 50% 50%;
    opacity: 0.1;
}

.md-form.modal.show .modal-dialog {
    transform: scale(1) !important;
    opacity: 1;
}
/******************************************* Ribbon CSS *****************************************************/
.blink{ animation: blink 1s linear infinite; }
@keyframes blink{
	0%{opacity: 0;}
	50%{opacity: .5;}
	100%{opacity: 1;}
}

.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #FF0000;/* #dc3545; #2980b9;*/
}

.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background: #FF0000c7;/* #dc3545c7; #3498dbc7;*/
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    font: 700 14px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center;
}
.ribbon span u, .ribbon span i{
    text-decoration: none;
    font-style: normal;
}
/* top left*/
.ribbon-top-left {
    top: -10px;
    left: -10px;
}

.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}

.ribbon-top-left::before {
    top: 0;
    right: 0;
}

.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}

.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}

.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}

.ribbon-top-right::before {
    top: 0;
    left: 0;
}

.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}

.ribbon-top-right span {
    left: -17px;
    top: 40px;
    transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
    bottom: -10px;
    left: -10px;
}

.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.ribbon-bottom-left::before {
    bottom: 0;
    right: 0;
}

.ribbon-bottom-left::after {
    top: 0;
    left: 0;
}

.ribbon-bottom-left span {
    right: -25px;
    bottom: 30px;
    transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
    bottom: -10px;
    right: -10px;
}

.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.ribbon-bottom-right::before {
    bottom: 0;
    left: 0;
}

.ribbon-bottom-right::after {
    top: 0;
    right: 0;
}

.ribbon-bottom-right span {
    left: -25px;
    bottom: 30px;
    transform: rotate(-225deg);
}
/******************************************* Ratings CSS *****************************************************/
/* Ratings widget */
.ratingInput {
    display: inline-block;
    border: 0;
    color: #0873BB;
}
/* Hide radio */
.ratingInput>input {
    display: none;
}
/* Order correctly by floating highest to the right */
.ratingInput>label {
    float: right;
    margin-bottom: 0px;
}
/* The star of the show */
.ratingInput>label:before {
    display: inline-block;
    font-size: 2rem;
    padding: 0.0rem 0.2rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
    content: "\f005 ";
    line-height: 100%;
    /* full star */
}
/* Half star trick */
.ratingInput .half:before {
    content: "\f089 ";
    /* half star no outline */
    position: absolute;
    padding-right: 0;
}
/* Click + hover color */
.ratingInput input:checked~label,
/* color current and previous stars on checked */
.ratingInput label:hover,
.ratingInput label:hover~label {
    color: #FFC60A;
}
/* color previous stars on hover */
/* Hover highlights */
.ratingInput input:checked+label:hover,
.ratingInput input:checked~label:hover,
/* highlight current and previous stars */
.ratingInput input:checked~label:hover~label,
/* highlight previous selected stars for new rating */
.ratingInput label:hover~input:checked~label

/* highlight previous selected stars */
    {
    color: #eccb5e;
}
.ratingInput.is-invalid {
    border: 1px solid #FF0000;
}
/******************************************* Absolute Center Spinner *****************************************************/
.dvs_loading {
    position: fixed;
    z-index: 99999;
    height: 2em;
    width: 2em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
      /* Transparent Overlay */
      .dvs_loading:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
      }
      /* :not(:required) hides these rules from IE9 and below */
      .dvs_loading:not(:required) {
        /* hide "loading..." text */
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
      }
      .dvs_loading:not(:required):after {
        content: '';
        display: block;
        font-size: 10px;
        width: 1em;
        height: 1em;
        margin-top: -0.5em;
        -webkit-animation: rotation 1500ms infinite linear;
        -moz-animation: rotation 1500ms infinite linear;
        -ms-animation: rotation 1500ms infinite linear;
        -o-animation: rotation 1500ms infinite linear;
        animation: rotation 1500ms infinite linear;
        border-radius: 0.5em;
        /*-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;*/
        
        -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.5) -1.5em 0 0 0, rgba(255,255,255, 0.5) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
        box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;	  
      }
  
  .dvs_spinner {
     position: absolute;
     left: 50%;
     top: 50%;
     height:60px;
     width:60px;
     margin:0px auto;
     -webkit-animation: rotation .6s infinite linear;
     -moz-animation: rotation .6s infinite linear;
     -o-animation: rotation .6s infinite linear;
     animation: rotation .6s infinite linear;
     border-left:6px solid rgba(0,174,239,.15);
     border-right:6px solid rgba(0,174,239,.15);
     border-bottom:6px solid rgba(0,174,239,.15);
     border-top:6px solid rgba(0,174,239,.8);
     border-radius:100%;
     z-index: 100000;
  }
  @-webkit-keyframes rotation {
     from {-webkit-transform: rotate(0deg);}
     to {-webkit-transform: rotate(359deg);}
  }
  @-moz-keyframes rotation {
     from {-moz-transform: rotate(0deg);}
     to {-moz-transform: rotate(359deg);}
  }
  @-o-keyframes rotation {
     from {-o-transform: rotate(0deg);}
     to {-o-transform: rotate(359deg);}
  }
  @keyframes rotation {
     from {transform: rotate(0deg);}
     to {transform: rotate(359deg);}
  }
/******************************************* FB Button *****************************************************/
.fb-like-btn {
    -webkit-font-smoothing: antialiased;
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 11px;
    line-height: 1;

    text-decoration: none;
    text-shadow: 0 -1px 0 #1877f2;
    vertical-align: top;
    white-space: nowrap;

    color: #fff;
    background: #1877f2;

    box-sizing: border-box;
    display: inline-block;
    height: 20px;
    padding: 5px 6px 0 6px;

    border: 0;
    border-radius: 3px;
}

.fb-like-btn span{
    padding-left: 4px;
    padding-right: 4px;
    vertical-align: inherit;
    white-space: nowrap;
    color: #FFF;
}
.fb-like-btn:hover, .fb-like-btn span:hover, .fb-like-btn .liked{
    color: #CCC;
}
.fb-like-btn .ico {
    background-image: url("https://static.xx.fbcdn.net/rsrc.php/v3/yD/r/FEppCFCt76d.png");    
    background-repeat: no-repeat;    
    display: inline-block;
    vertical-align: inherit;
    height: 14px;
    width: 16px;
    margin-top: -3px;
}
/******************************************* Float Contact Button *****************************************************/
#button-contact-vr {
    position: fixed;
    bottom: 150px;
    z-index: 99999;
	right: 0.1%;
}
/*phone*/
#button-contact-vr .button-contact {
    position: relative;
    margin-top: -5px;
}
#button-contact-vr .button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}
.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}
.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}
.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
@-webkit-keyframes phone-vr-circle-fill {
  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);}
}
@-webkit-keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}
.phone-bar a {
    position: absolute;
    margin-top: -65px;
    left: 30px;
    z-index: -1;
    color: #fff;
    font-size: 16px;
    padding: 7px 15px 7px 50px;
    border-radius: 100px;
    white-space: nowrap;
}
.phone-bar a:hover {
    opacity: 0.8;color: #fff;
}
@media(max-width: 736px){
    .phone-bar{display: none;}
}

#zalo-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196F3;
    background-color: rgba(33, 150, 243, 0.7);
}
#zalo-vr .phone-vr-img-circle {
    background-color: #2196F3;
}
#viber-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #714497;
    background-color: rgba(113, 68, 151, 0.8);
}
#viber-vr .phone-vr-img-circle {
    background-color: #714497;
}
#contact-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196F3;
    background-color: rgba(33, 150, 243, 0.7);
}
#contact-vr .phone-vr-img-circle {
    background-color: #2196F3;
}
div#whatsapp-vr .phone-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #1fd744;
    background-color: rgb(35 217 72 / 70%);
}
div#whatsapp-vr .phone-vr .phone-vr-img-circle {
    background: #1cd741;
}
div#whatsapp-vr .phone-vr .phone-vr-img-circle img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
}
#fanpage-vr img {
    max-width: 35px;
    max-height: 35px;
}
#fanpage-vr .phone-vr-img-circle {
    background-color: #1877f2;
}
#fanpage-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 rgb(24 119 242 / 65%);
    background-color: rgb(24 119 242 / 70%);
}
/*css all in one*/
#gom-all-in-one .button-contact {
    transition: 1.6s all;
    -moz-transition: 1.6s all;
  -webkit-transition: 1.6s all;
}
#button-contact-vr.active #gom-all-in-one .button-contact {
    margin-left: -100%;
}
#all-in-one-vr .phone-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
    color: #fff;
    padding: 5px 15px 5px 48px;
    border-radius: 50px;
    margin-left: -64px;
    width: max-content;
    cursor: pointer;
}
#popup-showroom-vr,
div#popup-form-contact-vr {
    display: none;
}
#popup-showroom-vr.active,
div#popup-form-contact-vr.active {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 99999;
}
.bg-popup-vr {
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(51 51 51 / 50%);
    width: 100%;
    height: 100vh;
}
.content-popup-vr {
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 95%;
    border-radius: 5px;
    box-shadow: 0 0 14px 5px rgb(0 0 0 / 49%);
    max-width: 600px;
    display: flex;
}
.content-popup-vr input, .content-popup-vr textarea {
    width: 100%;
    max-height: 100px;
    min-height: 38px;
    border: 1px solid #b1b1b1;
    margin-bottom: 10px;
    padding: 0 7px;
    background: #fff;
}
.content-popup-vr label {
    width: 100%;
}
.content-popup-vr input.wpcf7-form-control.wpcf7-submit {
    max-width: fit-content;
    padding: 5px 32px 2px;
    background: #2196f3;
    border: 0;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    margin: 10px auto 0;
    display: block;
    box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 29%);
font-weight: 400;min-height: auto;line-height: 30px;}
.content-popup-vr input.wpcf7-form-control.wpcf7-submit:hover {
    opacity: 0.7;
}
.content-popup-vr .close-popup-vr {
    font-family: sans-serif;
    width: 23px;
    height: 23px;
    background: black;
    position: absolute;
    top: -10px;
    right: -10px;
    color: #fff;
    text-align: center;
    line-height: 23px;
    font-size: 17px;
    border-radius: 50%;
    cursor: pointer;
}
.content-popup-vr .close-popup-vr:hover {
    background: #b50000;
}
.content-popup-vr .content-popup-div-vr {
    width: 100%;
    padding: 25px;
}
.content-popup-vr .content-popup-img-vr {
    width: 100%;
    max-width: 45%;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
#loco-top, #loco-bottom {
    display: block;
}
#loco-top .content-popup-img-vr, div#popup-form-contact-vr #loco-bottom .content-popup-img-vr {
    max-width: 100%;
    text-align: center;
}
#contact-showroom.no-event a {
    pointer-events: none;
}
.content-popup-vr .content-popup-div-vr ul {color: #333;list-style: none;font-size: 15px;}
@media(max-width: 673px){
    div#popup-form-contact-vr .content-popup-vr {
        display: block;
    }
    div#popup-form-contact-vr .content-popup-vr .content-popup-img-vr {
        max-width: 100%;
        display: none;
    }
}


/******************************************* CART **********************************************************/
.cart-form table .quatily {
    text-align: center;
    max-width: 16%;    
}

.cart-form .input-qty {
    background-color: #fff;
    height: 40px;
    width: 70px;
    text-align: center;
    font-size: 1rem;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    padding: 0;
}

.cart-form .is-form {
    overflow: hidden;
    position: relative;
    background-color: #f9f9f9;
    height: 40px;
    width: 38px;
    padding: 0;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #ddd;
}

.cart-form table {
    width: 100%;
}

.cart-form table tr th {
    background: #005BA2;
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    font-weight: normal;
    padding: 10px 20px;
}

.cart-form table tr td {
    padding: 10px;
    border: 1px solid #E0E0E0;
    text-align: center;
}

.cart-form table tr th:first-child,
.cart-form table tr td:first-child {
    text-align: left;
}

.cart-wrapper {
    padding: 30px;    
}

.cart-wrapper,
.cart-form {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: auto;
}

.cart-title {
    text-transform: capitalize;
}

.cart-form .product-wrap .product-image {
    width: 100%;
    max-width: 100px;
    height: 100px;
}

.cart-form .product-wrap .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-form .product-price,
.cart-form .price-total,
.cart-form .btn-delete {
    color: #FF0000;
    font-size: 16px;
    font-weight: 500;
}

.btn-continue-viewing {
    padding-top: 9px;
    padding-bottom: 9px;
    font-weight: 500;
    border: 1px solid #FF9800;
}

.cart-wrapper .btn-continue-viewing:hover {
    color: #fff !important;
    background: #FF9800;
}

.cart-totals .temporary-price,
.total-amount.price,
.order-total span.price-amount.amount {
    color: #FF0000;
}

.cart-totals .shipping-note {
    font-size: 14px;
    max-width: 450px;
    width: 100%;
}

.btn-payment {
    padding-top: 12px;
    padding-bottom: 12px;
}

.checkout-review-order {
}

.customer-info input,
.customer-info textarea {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.customer-info input::placeholder,
.customer-info textarea::placeholder {
    font-size: 14px;
}

.checkout-review-order-table th,
.checkout-review-order-table td {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ececec;
}

.checkout-page .btn-order {
    color: #fff;
    display: inline-block;
}

.checkout-payment label {
    cursor: pointer;
}

.payment-methods li {
    margin-bottom: 10px;
    border-bottom: 1px solid #ececec;
}

.payment-methods .form-check-input {
    margin-top: 3px;
}

.payment-methods .payment-box {
    display: none;
}

.payment-methods .show .payment-box {
    display: block;
}

/* Button quanity with 2 btn minus & plus */
.quantity__btn {
    width: 35px;
    border: 1px solid #ced4da;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff
}
.quantity__btn::after {
    content: "\f068";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: fontawesome;
    font-size: 8px
}
.quantity__btn:first-child {
    border-radius: 14px 0 0 14px;
    border-right: 0
}
.quantity__btn:not(:first-child) {
    border-radius: 0 14px 14px 0;
    border-left: 0
}
.quantity__btn:not(:first-child)::after {
    content: "\f067"
}
.quantity__input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 28px;
    min-width: 20px;
    max-width: 44px;
    border: 1px solid #ced4da;
    border-left: 0;
    border-right: 0;
    text-align: center
}

@media (max-width: 767px) {
    .cart-form .product-wrap .product-image {
        margin: 0px auto;
    }
    
    .quantity__input{
        max-width: 40px;
    }
    
}
/******************************************* DARK MODE *****************************************************/
.darkmode{
	background: #333;
}
/******************************************* OVERRIDE *****************************************************/
.border-primary{
    border-color: #0270BA!important;
}
.btn-primary{
    background-color: #0270BA;
    border-color: #0270BA;
}
.btn-outline-primary{
    border-color: #0270BA !important;
    /*color:#0270BA !important;*/
}
.btn-outline-orange{
    border-color: #F3901A !important;
    color:#F3901A !important;
}
.text-orange{
    color: #F3901A;
}

h2.nobeforeafter, h2.resetstyle{
    padding-left: 0px!important;
}
h2.nobeforeafter::before, h2.resetstyle::before{
    display: none;
    padding: inherit;
    left: inherit;
    margin: inherit;
}
h2.nobeforeafter::after, h2.resetstyle::after{
    display: none;
    padding: inherit;
    left: inherit;
    margin: inherit;
}

.swiper-button-next1,
.swiper-button-prev1 {
    background: unset;
    width: 36px;
    height: 36px;
    background: #ffffff8f;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 100px;
    display: flex;
}

.swiper-button-next1 i,
.swiper-button-prev1 i {
    color: #333;
    font-size: 18px;
    margin: auto;
}
/******************************************* RESPONSIVE *****************************************************/
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
.navbar_sticky{
    display: block!important;
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    /*padding-top: 5px;
    padding-bottom: 5px;*/
    background: #F1F1F1f7;
    transition: all .3s ease-out;
    z-index: 1001;
}

@media (min-width: 1281px) {
	.desktop_hidden{
		display: none!important;
	}
    .h-100-md{
        height: 100%!important;
    }
    
    .img-chutich{
        position: relative;
    }
    .img-chutich .anhchutich{
        position: absolute;
        /*bottom: 0;*/
    }
    .arcontactus-widget.right.arcontactus-message{
        bottom: 20px!important;
    }
    .testimonials-wraper .testi-next, .project-slide-wrapper .project-next1, .congtrinh-slide-wrapper .congtrinh-next{
        right: -40px;        
    }
    .testimonials-wraper .testi-prev, .project-slide-wrapper .project-prev1, .congtrinh-slide-wrapper .congtrinh-prev{
        left: -40px;       
    }
    .swiper-button-next.thanhtuu-next, .swiper-button-prev.thanhtuu-prev{
        display: none;
    }
    .achievement .icon{
        padding: 20px;
    }
}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
	.desktop_hidden{
		display: none!important;
	}
    .h-100-md{
        height: 100%!important;
    }
}

/* 
##Device = Tablets, Ipads (portrait & landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
	.tablet_hidden{
		display: none!important;
	}
}
@media (max-width: 1024px) {
    #dvsCanvasArea_examples {
        display: flex
    }
    #dvsCanvasArea_examples .div_anhvidu{
        margin: 5px;
    }
}
/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (max-width: 767px) {
    .header-main{
        background: #3f5fffec;
    }
    h1.page-title{
        font-size: 26px;
    }
	.mobile_hidden{
		display: none!important;
	}
	#dvsPageContent img, #dvsArticleContent img{
    	width: auto!important;
    	height: auto!important;
    }
    .page-title-area{
        padding: 50px 0px;
    }
    .btn-m-block{
        width: 100%;
    }
    .imgh100 .h-100{
        height: auto!important;
    }
    #navbarSupportedContent{
        overflow-y: auto;
        padding-bottom: 100px;
    }
    .testimonials-wraper .testi-next{
        display: none!important;
    }
    .testimonials-wraper .testi-prev{
        display: none!important;
    }
    .header-main .main-nav .navbar-nav .nav-item:hover > a.nav-link {
        color: #333;
    }
    .header-main .main-nav .navbar-nav .nav-item > .nav-link.active {
        color: #333;
    }
    .header-main .main-nav .navbar-nav .nav-item a.nav-link:hover{
        color: #0270BA!important;
    }
    .dt-tuong .size30, .dt-tran-nha .size30, .dt-khong-son .size30{
        font-size: 22px!important;
    }
    .quote-wrapper .area-input {
        width: 100%!important;
    }
    .dashboard-update, .dashboard-info {
        padding: 20px 10px;
    }
}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (max-width: 480px) {

}