﻿#error-container
{
    width: 100%;
    margin-right:10px;
    background: #fbf7f7;
    border: 1px solid #d4d4d4;
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    padding:5px;
    color:red;
    font-weight:bold;
}

#success-container
{
    background: #fbf7f7;
    border: 1px solid #d4d4d4;
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    padding:60px 5px;
    color:green;
    font-weight:bold;
    font-size:13px;
    text-align:center;
}

#contact-container
{
    background: #fbf7f7;
    border: 1px solid #d4d4d4;
    margin-left: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
}


#contact-container .field-validation-error{
    color:red;
    margin-top:2px;
}

#contact-container .input-validation-error{
    border:1px solid red;
}

#contact-container .img img
{
    width:160px;
    position:absolute;
    left:420px;
    bottom: 220px;
    opacity:0.8;
}

    #contact-container .info-chinhanh {
        padding:5px 20px;
        line-height:18px;
    }

        #contact-container .info-chinhanh img.bandochinh {
            padding:2px;
            border:1px solid #ccc;
            height:295px;
            width:586px;
        }

    #contact-container ul.cumchinhanh li {
        border-bottom:1px dotted #ccc;
        padding:5px;
    }

#contact-container h2 {
    margin-top: 20px;
    background: #0094ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#0094ff), to(#0788e6));
    background: -webkit-linear-gradient(#0094ff, #0788e6);
    background: -moz-linear-gradient(top, #0094ff, #0788e6);
    background: -ms-linear-gradient(#0094ff, #0788e6);
    background: -o-linear-gradient(#0094ff, #0788e6);
    background: linear-gradient(#0094ff, #0788e6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0094ff', endColorstr='#0788e6');
    zoom: 1;
    padding: 10px 20px;
    margin-left: -20px;
    width: 70%;
    color: #fff;
    font-size: 15px;
    font-weight:bold;
    position: relative;
    box-shadow: 1px 1px 1px #292929;
    -moz-box-shadow: 1px 1px 1px #292929;
    -webkit-box-shadow: 1px 1px 1px #292929;
    text-shadow: 0px 1px 0px #333;
}

#contact-container .arrow {
    width: 0;
    height: 0;
    line-height: 0;
    border-left: 20px solid transparent;
    border-top: 10px solid #097acc;
    position: absolute;
    top: 100%;
    left: 0px;
}

#contact-container div#loading {
position: absolute;
top: 130px;
right: 40px;
}


#contact-container form {
margin: 20px 20px 0px 20px;
}

#contact-container form div#success {
border: 1px solid green;
color: green;
padding: 5px;
width: 170px;
margin-bottom: 10px;
display: none;
}

#contact-container form div#error {
border: 1px solid red;
color: #333;
padding: 5px;
width: 200px;
margin-bottom: 10px;
display: none;
}

#contact-container form input, 
#contact-container form select {
vertical-align: middle;
}

#contact-container form input {
width: 300px;
height: 30px;
padding: 0px 10px;
}

#contact-container form input#captcha {
        width: 120px;
        float: left; 
}
 
#contact-container form img {
        margin: 0px 10px;
        border: 1px solid #A7A6AA;  
}
 
#contact-container form img#img_captcha {
        float: left;  
}
 
#contact-container form img#load_captcha {
        background: #fff;
        padding: 4px;  
    margin: 0px;
    cursor: pointer;
}
 

#contact-container form textarea {
	resize: none;
	width: 100%;
	height: 120px; 
  	padding: 10px;
  	font-family: Arial;
    font-size: 12px;
}

#contact-container form input[type="submit"] {
  	width: 120px;
  	font-weight: bold;
  	font-family: Arial;
    font-size: 12px;
 	border: 1px solid #A7A6AA;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d4d4d4));
    background: -webkit-linear-gradient(#fff, #d4d4d4);
    background: -moz-linear-gradient(top, #fff, #d4d4d4);
    background: -ms-linear-gradient(#fff, #d4d4d4);
    background: -o-linear-gradient(#fff, #d4d4d4);
    background: linear-gradient(#fff, #d4d4d4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#d4d4d4');
    cursor:pointer;
}




/* Styles for dialog window */
.small-dialog {
	background: white;
	padding: 5px 5px;
	text-align: left;
	max-width: 605px;
	margin: 40px auto;
	position: relative;
}

    .small-dialog img.bandochinhanh {
        width:600px;
        height:305px;
        padding:2px;
        border:1px solid #ccc;
    }

/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;

	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 



	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}



/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;

	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;

	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}