html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* == Globals == */
@font-face {
    font-family: 'VNF-Narziss';
    src: url('fonts/VNF-Narziss.eot?#iefix') format('embedded-opentype'),  
         url('fonts/VNF-Narziss.woff') format('woff'), 
         url('fonts/VNF-Narziss.ttf')  format('truetype'), 
         url('fonts/VNF-Narziss.svg#VNF-Narziss') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    /*overflow: hidden; khong cho hien thi thanh scoll*/
    font-family: Cambria,Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.3;
}














.container{
    width: 90%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.container:before,
.container:after{
    display: table;
    content: "";
    clear: both;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}
img{
    max-width: 100%;    
    height: auto;
}
ul.number-list{}
ul.number-list li{
    list-style-type: none;
    margin-bottom: 5px;
}
ul.number-list li:before{
    content: "1";        
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #FFF;
    color: #000;
    border-radius: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 13px;
    margin-right: 5px;
}
ul.number-list li:nth-child(1):before{ content: "1";   }
ul.number-list li:nth-child(2):before{ content: "2";   }
ul.number-list li:nth-child(3):before{ content: "3";   }
ul.number-list li:nth-child(4):before{ content: "4";   }
ul.number-list li:nth-child(5):before{ content: "5";   }
ul.number-list li:nth-child(6):before{ content: "6";   }
ul.number-list li:nth-child(7):before{ content: "7";   }
ul.number-list li:nth-child(8):before{ content: "8";   }
ul.number-list li:nth-child(9):before{ content: "9";   }
ul.number-list li:nth-child(10):before{ content: "10";   }
.pull-left{ float: left; }
.pull-right{ float: right; }
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: hidden;
}
.animated.visible {
    visibility: visible;
}

blockquote{
    background-image: url(images/quote.png);
    background-repeat: no-repeat;
    background-size: 25px;
    padding-left: 35px;
    padding-top: 5px;
    font-family: 'VNF-Narziss';
    font-style: italic;
}
.theme-light blockquote{
    background-image: url(images/quote-light.png);
}
.carousel-control {
    position: absolute;
    z-index: 90;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: .5;
}
.carousel-control.left {
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
    background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}
.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}
/* == Header == */
#header{
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
}
    #logo{
        float: left;
        width: 140px;
        margin-top: 5px;
    }
    .theme-light #logo img.logo-light{ display: block; }
    .theme-light #logo img.logo-dark{ display: none; }
    .theme-dark #logo img.logo-light{ display: none; }
    .theme-dark #logo img.logo-dark{ display: block; }

    .btn-menu-mobile{ display: none; }
    #navigation{}
    #navigation ul.menu{
        float: right;
    }
    #navigation ul.menu li{
        display: block;
        float: left;
        padding: 19px 15px;
    }
    #navigation ul.menu li:hover{
        background: #00dcc5;
    }
    #navigation ul.menu li:first-child{
    	margin-left: 0;
    }
    #navigation ul.menu li a{
        color: #fff;
        font-family: Arial;
        text-decoration: none;
        font-size: 15px;
        font-weight: 400;
        line-height: 30px;
        display: block;
        filter: alpha(opacity=80);
    }

    .menu-dark #navigation ul.menu li a{}
    #navigation ul.menu li.active{
        background: #00dcc5;
    }
    #navigation ul.menu li.active a{
        position: relative;
    }
    #navigation ul.menu li.active a:before{
        content: "";
        position: absolute;
        height: 1px;
        width: 80%;
        left: 10%;
        bottom: 0;
    }
    .menu-light #navigation ul.menu li a{ color: #FFF; }
    .menu-light #navigation ul.menu li.active a:before{
        /*background: #FFF;*/
    }
/* == Content == */
#main{
    height: 100vh;
}
.section-panel{    
    display: none;    
}
.section-panel.active{
    display: block;
}
.section-panel .section-text{          
    padding-top: 60px;
    padding-bottom: 90px;
    height: calc(100vh - 150px);
    position: relative;
    z-index: 10;
}
.section-panel .section-text.via-table{ 
    display: table;
    table-layout: fixed;
    width: 100%;
}
.section-panel .section-text.via-table.container{
    width: 90%;
}
.section-panel .section-text.via-table .text-content{        
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}
.section-panel .section-background{
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
.section-panel .section-background img{ display: none; }
.full-content.section-panel .section-text{      
    position: static;
}
.full-content.section-panel .section-background{      
    display: none;
}

#introduction video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -o-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);    
    transition: 1s opacity;
}
.story-teaser {
    width: 60%;
    margin-top: 30px;
}
.story-teaser .headline{
    width: 30%;
}
.story-teaser .headline:after{
    content: "";    
    width: 65%;
    height: 1px;
    display: block;
    margin-top: 10px;
    background-color: #000;
}
.story-teaser .quote{
    width: 55%;
    margin-top: 30px;
    width: 45%;
    margin-top: 15px;
    margin-left: 10%;
    float: left;
    font-weight: bold;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.story-teaser .quote blockquote{
    padding-right: 10px;
}
.stories-block{
    position: absolute;
    bottom: 90px;    
    width: 100%;
}
.stories-block .story-row{
    float: left;
    position: absolute;
    bottom: 0;
    width: 20%;    
    -moz-transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    transition: all 0.75s ease;
}
.stories-block .story-row>div{
    bottom: 0;    
    font-size: 13px;
    font-style: italic;
}
.stories-block .story-row.story-2{ left: 20%; bottom: 40px; }
.stories-block .story-row.story-3{ left: 40%; bottom: 120px; }
.stories-block .story-row.story-4{ left: 60%; bottom: 120px; }
.stories-block .story-row.story-5{ left: 80%; bottom: 250px; }
.stories-block .story-row p{
    font-family: 'VNF-Narziss';
    padding: 0 40px 0 15px;
    margin: 0 auto;
}
.stories-block .story-row.left p{
    padding-left: 0;
}
.stories-block .story-row.center p{
    font-family: 'VNF-Narziss';
    padding-left: 35px;
    padding-right: 35px;
}
.products-mobile-block,
.products-block {
    cursor: ew-resize;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.products-mobile-block .owl-carousel,
.products-block .owl-carousel {
	overflow: hidden;
	height: 100vh;
	position: relative;
}
.products-mobile-block .owl-carousel .owl-stage-outer,
.products-mobile-block .owl-carousel .owl-stage-outer .owl-stage,
.products-mobile-block .owl-carousel .owl-stage-outer .owl-stage .owl-item,
.products-mobile-block .owl-carousel .owl-stage-outer .owl-stage .owl-item .item,
.products-block .owl-carousel .owl-stage-outer,
.products-block .owl-carousel .owl-stage-outer .owl-stage,
.products-block .owl-carousel .owl-stage-outer .owl-stage .owl-item,
.products-block .owl-carousel .owl-stage-outer .owl-stage .owl-item .item
{
	height: 100%;
}
.products-block-mobile .owl-carousel .item,
.products-block .owl-carousel .item {
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.products-block-mobile .owl-carousel .item img,
.products-block .owl-carousel .item img {
    width: 100%;
    visibility: hidden;
}

#login{}
#login .section-text .text-content {
    margin-top: 100px;
    overflow: hidden;
}
#login .headline-wrap{
    width: 70%;
    background: url(images/p-new.jpg) no-repeat right bottom;
    background-size: contain;
}
#login .headline-wrap .product{
    position: relative;
    text-align: right;
    width: 80%;
    float: right;    
}
#login .headline-wrap .product img{
    float: left;
    margin-left: 10%;    
    width: 60%;
}
#login .headline-wrap .product blockquote{
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    width: 23%;
    color: #FFF;
    font-style: italic;
}
#login .webform-client-wrap{}
#webform-client-1{
    width: 23%;
    border: 1px solid #FFF;
    padding: 30px;
    color: #FFF;
    margin: 0 auto;
}
.webform-client{}
.webform-client>div{ position: relative; }
.webform-client .form-item{
    clear: both;
    margin: 15px 0;
}
.webform-client .form-item>div{
    margin-top: 10px;
}
.webform-client .form-item .form-description{
    text-align: center;
}
.webform-client .form-item .form-description:after{
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    border-bottom: 1px solid #FFF;
    margin-left: 20%;    
    margin-top: 10px;
}
.webform-client .form-item .form-description,
.webform-client .form-item label{
    display: block;
    filter: alpha(opacity=50);
    font-style: italic;
}
.webform-client .form-item .form-text{
    display: block;
    width: 100%;
    padding: 5px 0;
    max-width: 100%;
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #FFF;
    color: #FFF;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.webform-client .form-item .form-radio{

}
.webform-client .form-item .inline label{
    display: inline-block;
    font-size: 13px;
}
.webform-client .form-item .inline label{}
.webform-client .form-actions {
    text-align: center;
}
.webform-client .form-actions .webform-submit{
    background-color: #a62627;
    border: none;
    color: #FFF;
    padding: 0;
    line-height: 30px;
    width: 140px;
    text-transform: uppercase;
}

#historychangepoint{}
#historychangepoint .text-content{
    overflow: hidden;
}
#historychangepoint .text-content .headline{
    width: 25%;
    min-height: 1px;
    float: left;
}
#historychangepoint .text-content .reviews-block{
    width: 75%;
    float: left;
    position: relative;
}
#historychangepoint .text-content .reviews-block .owl-nav div{
    position: absolute;
    top: 30%;    
    width: 40px;
    height: 40px;
    cursor: pointer;
    text-indent: -9999px;
    margin: 0;
    padding: 0;
}
#historychangepoint .text-content .reviews-block .owl-nav .owl-prev{
    left: -50px;
    background: url(images/left-icon.png) no-repeat center;
    background-size: contain;
}
#historychangepoint .text-content .reviews-block .owl-nav .owl-next{
    right: -50px;
    background: url(images/right-icon.png) no-repeat center;
    background-size: contain;
}

#historychangepoint .text-content .reviews-block>div{
    padding-left: 50px;
    padding-right: 50px;
}
#historychangepoint .text-content .reviews-block .item{
    padding: 0 25px;
}
#historychangepoint .text-content .reviews-block .item img{}
#historychangepoint .text-content .reviews-block .item blockquote{
    font-style: italic;
    font-weight: bold;
    margin-top: 10px;
    padding-right: 25px;
}
#historychangepoint .text-content .reviews-block .item blockquote h3{
    text-transform: uppercase;
    margin-bottom: 3px;
}
#historychangepoint .text-content .reviews-block .item blockquote p{
    filter: alpha(opacity=50);
    opacity: .5;
}

.stores-block{
    width: 65%;
    min-width: 800px;
    margin: 0 auto;    
    border: 3px solid #FFF;
    color: #FFF;
}
.stores-block .stores-block-content{
    padding: 30px 100px;
}
.stores-block a{
    color: #FFF;
}
.stores-block hr{
    border-color: #FFF;
    margin-bottom: 30px;
}

/* == Footer == */
#footer{
    position: relative;
    z-index: 100;
}
#footer .join-experience{
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #FFF;
    text-transform: uppercase;    
    font-family: Arial;    
}
#footer .join-experience>div{
    width: 50%;
    float: left;
}
#footer .join-experience p{
    padding: 0 50px;
    line-height: 40px;    
    color: #00af9d;
    font-size: 16px;
}
#footer .join-experience p.text-right{
    text-align: right;    
}
#footer .join-experience p.text-left{

}
#footer .join-experience span.btn-join{
    position: fixed;
    display: block;
    width: 70px;
    height: 40px;
    padding: 15px 0;
    border-radius: 70px;
    border: 10px solid #FFF;
    line-height: 20px;
    background: #00af9d;
    color: #FFF;
    bottom: 0;
    left: 50%;
    margin-left: -45px;
    text-align: center;
    cursor: pointer;
    -moz-transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

#footer .join-experience span.btn-join::before {
    content: " ";
    background-image: url(images/ExpandMore.png);
    background-size: 30px 30px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: -35px;    
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 30px ;
    /*animation: bounce 1s infinite;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;*/    

    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    -webkit-animation: bunnyHop 2s ease-out infinite;
    animation: bunnyHop 2s ease-out infinite;
}
#footer .join-experience span.btn-join:hover{
    color: #00af9d;
    background: #FFF;
    border-color: #00af9d;
}
.theme-dark #footer .join-experience span.btn-join::before {
    background-image: url(images/ExpandMore-dark.png);
} 
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-20px);}
    60% {-webkit-transform: translateY(-10px);}
}
 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-20px);}
    60% {-moz-transform: translateY(-10px);}
}
 
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-20px);}
    60% {-o-transform: translateY(-10px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}
@-webkit-keyframes bunnyHop {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bunnyHop {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.show-for-mobile{
    display: none;
}
@media screen and (max-width: 1400px) {
	.story-teaser{
		margin-top: 15px;
	}
	.stories-block{
		bottom: 70px;
	}
    .stories-block .story-row.story-1{ bottom: -20px; }
	.stories-block .story-row.story-2{ bottom: 30px; }
	.stories-block .story-row.story-3{ bottom: 65px; }
	.stories-block .story-row.story-4{ bottom: 70px; }
	.stories-block .story-row.story-5{ bottom: 165px; }
	.stories-block .story-row>div img{
		width: 85%;
	}
}
@media screen and (max-width: 1365px) {
	.container{
		width: 94%;
	}	
	#navigation ul.menu li{
		margin-left: 15px;
	}
	#navigation ul.menu li a{
		font-size: 13px;
	}
	#historychangepoint .text-content .reviews-block .item blockquote{
		padding-right: 0;
	}
}

@media screen and (max-width: 1023px) {
    #header{
        /*top: 30px;*/
    }
    #header>.container{
        width: 97%;
        margin-left: 0;
    }
    .section-panel{
        overflow: hidden;
    }
    .section-panel .section-text{
        padding-top: 90px;        
        height: calc(100vh - 180px);
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
	.show-for-mobile{
		display: block;
	}
	.btn-menu-mobile{ 
		display: block;
		width: 40px;
		height: 24px;
		background: url(images/btn-menu-dark.png);
		background-size: contain;
		background-repeat: no-repeat;
		padding: 0;
		margin: 0;
		margin-top: 15px;
		border: none;
		float: right;
		text-indent: -999px;
		overflow: hidden;
		cursor: pointer;
		outline: none;
	}
    .theme-light .btn-menu-mobile{ 
        background-image: url(images/btn-menu.png);
    }
    #logo{
        width: 100px;        
    }
	#navigation {
		width: 80%;
		float: right;
		position: fixed;
		right: -80%;
		top: 0;
		background: #FFF;
		height: 100%;
	}
	
	#navigation ul.menu{
		
	}
	#navigation ul.menu li{
		width: 100%;
		text-align: right;
		background: #FFF;
		margin: 0;
		border-bottom: 1px solid #000;
	}
	#navigation ul.menu li a{		
    	padding: 3px 15px;
        color: #000 !important;
	}
	#navigation ul.menu li.active a:before{
		display: none;
	}
	#introduction .headline img{ width: 40%; }
	.stories-block{
		display: none;
	}
	.story-teaser,
	.story-teaser .headline,
	.story-teaser .quote{
		width: 100%;
		margin: 0;
		overflow: hidden;
	}
	.story-teaser .headline{
		text-align: center;
	}
	.story-teaser .headline:after{
	    margin-left: calc(10% + 35px);
	    width: 50%;
	}
	.story-teaser .headline img{
		width: 30%;
		min-width: 200px;
	}
	.story-teaser .quote{
		width: 90%;
		margin-left: 10%;
		position: relative;
		top: -10px;
	}
	.story-teaser .quote blockquote{
		padding-top: 15px;
	}
	.stories-block-mobile .item{}
    .stories-block-mobile .item .text,
    .stories-block-mobile .item img{
        width: 55%;
        float: left;
    }	
    .stories-block-mobile .item .text{
        width: 45%;
        position: relative;
        z-index: 10;
    }
	.stories-block-mobile .item .text p{
		width: 100%;
        padding: 0;
	}
    .stories-block-mobile .item .text .title-tag{
        width: 100%;
        position: static;
        margin-bottom: 10px;
    }
	.stories-block-mobile .owl-dots{
		display: block !important;
	}

	#login .headline-wrap{
		overflow: hidden;
   		margin-bottom: 15px;
		width: 100%;
        background: none;
	}
	#login .section-text .text-content{ 
        margin-top: 10px; 
        margin-bottom: 70px;
    }
	#login .headline-wrap .product{ height: auto !important;  }
    #login .headline-wrap .product img{ max-width: 60%; }
	#login .headline-wrap .product blockquote{
		position: static;
		width: auto;
		margin-top: -50px;
        clear: both;
	}
	#login .webform-client-wrap {
	    width: 80%;
	    margin: 17px auto;
	    clear: both;
	}
	#webform-client-1 {
	    float: none;
	    width: auto;
	    padding: 10px 15px;
	}
	#webform-client-1 .form-item{
		margin: 8px 0;
		overflow: hidden;
	}
    #webform-client-1 .form-item.field-fullname{}
    #webform-client-1 .form-item.field-fullname label{ width: 45px; }
    #webform-client-1 .form-item.field-fullname .form-text{ width: calc(100% - 55px); }
    #webform-client-1 .form-item.field-email{}
    #webform-client-1 .form-item.field-email label{ width: 40px; }
    #webform-client-1 .form-item.field-email .form-text{ width: calc(100% - 50px); }
    #webform-client-1 .form-item.field-phone{}
    #webform-client-1 .form-item.field-phone label{ width: 85px;}
    #webform-client-1 .form-item.field-phone .form-text{  width: calc(100% - 95px); }
	#webform-client-1 .form-item>div {
	    margin-top: 0;
	    clear: both;
	    padding-top: 5px;
	}
    #webform-client-1 .form-item>div.inline{
        width: calc(100% - 100px);
    }
	#webform-client-1 .form-item label {
	    display: inline-block;
	    float: left;
	    margin-right: 10px;
	}
	#webform-client-1 .form-item .inline label{
		float: none;
        display: block;
	}
	#webform-client-1 .form-item .form-description{
		text-align: center;
	}
	#webform-client-1 .form-item .form-text {
	    display: inline-block;
	    width: auto;
	    float: left;
	}
	#webform-client-1 .form-actions {
	    text-align: center;
	    position: absolute;
	    right: -30px;
	    bottom: 0;
	}
    #webform-client-1 .form-actions .webform-submit{
        width: auto;        
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }
	#historychangepoint .text-content .headline{
		width: 100%;
		margin-bottom: 10px;
		float: none;
		text-align: center;
	}
	#historychangepoint .text-content .headline img{ max-width: 50%; }
	#historychangepoint .text-content .reviews-block {
	    width: 100%;
	    float: none;
	}
	#historychangepoint .text-content .reviews-block .item>img{
		max-width: 250px;
		margin: 0 auto;
	}
	#historychangepoint .text-content .reviews-block .owl-nav div{
		display: block !important;
	}
	.stores-block{
	    width: 100%;
    	min-width: 10px;
	}
	.stores-block .stores-block-content {
	    padding: 30px;
	}
	.stores-block .stores-block-content .headline img{
		width: 60%;
	}
	.stores-block .stores-block-content hr,
	.stores-block a{ display: none; }
	.stores-list{
		margin-top: 20px;
	}
	.stores-block ul.number-list li{
		margin-bottom: 15px;
		border-top: 1px solid #FFF;
		position: relative;
		padding: 15px 0;
	}
	.stores-block ul.number-list li:before{
		display: block;
		position: absolute;
		margin: 0;
		left: 50%;
		margin-left: -10px;
		top: -10px;
	}
	#footer .join-experience{ padding: 5px 0; }
    #footer .join-experience span.btn-join::before{
        top: -20px;
        width: 20px;
        height: 20px;
        margin-left: -10px;
    }
	#footer .join-experience>div {
	    width: 100%;
	    float: left;
	    padding: 0;
	}
	#footer .join-experience p {
	    padding: 0 10px;
	    line-height: 16px;
	    text-align: left !important;
	    font-size: 12px;
        letter-spacing: 1px;
	}
	#footer .join-experience span.btn-join{
		border-width: 3px;
		left: auto;
		right: 3%;
		bottom: 10px;
	}
    .theme-dark #footer .join-experience{
        background: #000;    
        color: #FFF;
    }
    .theme-dark #footer .join-experience span.btn-join{
        background: #FFF;
        color: #000;
        border: 3px solid #000;
    }
}
@media screen and (max-width: 768px) {
    .stories-block-mobile .item>div>img{
        position: absolute;
        right: 0;
        width: 60%;
    }
    .stories-block-mobile .item .text{
        width: 60%;        
    }
    .stories-block-mobile .item .text p{
        width: 65%;
    }
    .stories-block-mobile .item.story-1 .text{}
    .stories-block-mobile .item.story-1 .text p{}
    .stories-block-mobile .item.story-2 .text{}
    .stories-block-mobile .item.story-2 .text p{ width: 75%; }
    .stories-block-mobile .item.story-3 .text{}
    .stories-block-mobile .item.story-3 .text p{
        width: 75%;
    }
    .stories-block-mobile .item.story-4 .text{}
    .stories-block-mobile .item.story-4 .text p{ width: 72%; }
    .stories-block-mobile .item.story-5 .text{}
    .stories-block-mobile .item.story-5 .text p{ width: 75%; }
}

/*EDIT BY MR.TOAN*/
@font-face {
    font-family: 'fonts/UTM Edwardian';
    src: url('fonts/UTMEdwardian.eot');
    src: url('fonts/UTMEdwardian.eot?#iefix') format('embedded-opentype'),
        url('fonts/UTMEdwardian.woff2') format('woff2'),
        url('fonts/UTMEdwardian.woff') format('woff'),
        url('fonts/UTMEdwardian.ttf') format('truetype'),
        url('fonts/UTMEdwardian.svg#fonts/UTMEdwardian') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'fonts/Vf-Coronet';
    src: url('fonts/Vf-Coronet.eot');
    src: url('fonts/Vf-Coronet.eot?#iefix') format('embedded-opentype'),
        url('fonts/Vf-Coronet.woff2') format('woff2'),
        url('fonts/Vf-Coronet.woff') format('woff'),
        url('fonts/Vf-Coronet.ttf') format('truetype'),
        url('fonts/Vf-Coronet.svg#fonts/Vf-Coronet') format('svg');
    font-weight: normal;
    font-style: normal;
}
#header{
    background: #00af9d;
}
.contact{
    font-size: 40px;
    color: #fff;
    font-family: arial;
}
/*SUB MENU*/
#navigation ul.menu li{
    position: relative;
}
#navigation ul.menu li ul.submenu{
    position: absolute;
    width: 15em;
    background: #00c6b2;
    left: 0;
    top: 60px;
}
#navigation ul.menu li ul.submenu li{
    float: none;
    display: none;
    padding: 3px 10px;
    border-top: 1px solid #fff;
}
#navigation ul.menu li:hover ul.submenu li{
    display: block;
}
body{
	background-image: url("images/bg-vonco.png");
	background-repeat: repeat;
	background-size: 150px 107px;
	font-family: Arial;
	font-size: 15px;
	font-weight: 400;
	color: #343434;
}
.panel-info{
	margin-top: 30px;
}
#footer .join-experience{
	border-top: 1px solid #00af9d;
}
#login .webform-client-wrap{
    border: 2px solid #00af9d;
    padding: 15px;
}
.lienhe ul li{
    list-style: none;
    line-height: 25px;
}
/*Begin: Giai doan 1 khong co chuc nang nay*/
#footer .btn-join{
    display: none !important; 
}
#footer .join-experience p{
    padding: 5px;
    font-family: 'fonts/Vf-Coronet', Arial;
    text-transform: none;
    font-size: 30px;
	text-align: center;
	line-height: 35px;
}
/*End: Giai doan 1 khong co chuc nang nay*/
.tt-khachhang{
    padding-bottom: 46px;
}

#loginfail .section-text .text-content {
    margin-top: 100px;
    overflow: hidden;
}
#loginfail .headline-wrap{
    width: 70%;
    background: url(images/p-new.jpg) no-repeat right bottom;
    background-size: contain;
}
#loginfail .headline-wrap .product{
    position: relative;
    text-align: right;
    width: 80%;
    float: right;    
}
#loginfail .headline-wrap .product img{
    float: left;
    margin-left: 10%;    
    width: 60%;
}
#loginfail .headline-wrap .product blockquote{
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    width: 23%;
    color: #FFF;
    font-style: italic;
}

#loginfail .webform-client-wrap {
    border: 2px solid #00af9d;
    padding: 15px;
}