<style type="text/css">
.red {
	color:red;
}
.product h1 {
	font-size:26px;
	margin-bottom:25px;
}
.a-left {
    margin-bottom: 15px;
}
.page_contact {}
.page_contact label {}
.page_contact input[type=text], .page_contact input[type=tel], .page_contact input[type=email] {
    display: block;
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
    margin-top: 3px;
	border:1px solid #36885d;
}
.page_contact textarea {
	display: block;
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
    margin-top: 3px;
	border:1px solid #36885d;
}
.strcha {
	font-weight:bolder;
	font-size:24px
}
.btnContactSubmit {
    display: inline-block;
    height: 40px;
    line-height: 39px;
    padding: 0 20px;
    text-align: center;
    white-space: nowrap;
    outline: none !important;
    cursor: pointer;
    border: none;
    background: #36885d;
    margin-top: 15px;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0;
    -webkit-transition: background-color 0.1s ease-in;
    -moz-transition: background-color 0.1s ease-in;
    -ms-transition: background-color 0.1s ease-in;
    -o-transition: background-color 0.1s ease-in;
    transition: background-color 0.1s ease-in;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.contact {
	margin-bottom:15px;
}
.a-right {
    margin-bottom: 15px;
}
.a-right > div {}
.a-right >div h2 {
    color: #F00;
}
.a-right > div > div {
    font-size: 15px;
    padding: 3px;
}
</style>
<div class="banner-page-list">
	<div class="container bg">
    	<div class="row">
        	<h2>Contact Us</h2>
        </div>
    </div>
</div>
<!--<section class="bread-crumb margin-bottom-10">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
                    <li class="home" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="<?=site?>" title="<?=lang('home')?>"> <span itemprop="name"><?=lang('home')?></span></a> 
                        <meta itemprop="position" content="1" />
                        </li>
                    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <strong> <span itemprop="name"><?=lang('contact_us')?></span></strong>
                        <meta itemprop="position" content="2" /></li>
                </ul>
            </div>
        </div>
    </div>
</section>-->
<section class="product page_contact session">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 form-vertical a-left clearfix">
                <h1><?=lang('contact_us')?></h1>
                <form accept-charset="UTF-8" action="<?=site?>contact-us.html" name="frmcontact" id="frmcontact" class="contact-form" method="post">
                    <input name="csrf" type="hidden" value="<?=$csrf?>">
                    <label for="cusname" class="hidden-label"><?=lang('your_name')?></label>
                    <input type="text" id="cusname" class="input-full" name="cusname" placeholder="" autocapitalize="words" value="<?=set_value('cusname')?>">
                    <label for="address" class="hidden-label"><?=lang('address')?></label>
                    <input type="text" id="address" class="input-full" name="address" placeholder="" autocapitalize="words" value="<?=set_value('address')?>">
                    <label for="nb_phone" class="hidden-label"><?=lang('phone')?></label>
                    <input type="tel" id="phone" class="input-full" name="phone" placeholder="" pattern="[0-9\-]*" value="<?=set_value('phone')?>">
                    <label for="cusmail" class="hidden-label"><?=lang('email')?></label>
                    <input type="email" id="cusmail" class="input-full" name="cusmail" placeholder="" autocorrect="off" autocapitalize="off" value="<?=set_value('cusmail')?>">
                    <label for="content" class="hidden-label"><?=lang('your_message')?></label>
                    <textarea rows="8" id="content" class="input-full" name="content" placeholder="<?=lang('your_message')?>"><?=set_value('content')?></textarea>
                    <div class="">
                    	<span style="width:50%; float:left;">Captcha: <span class="strcha"><!--<img id="siimage" height="30" width="80" src="<?//=$link_catpcha.rand(0,100); ?>">--><?=$ses_captcha?></span><span>
                        <input type="text" id="captcha" class="input" name="captcha" value=""></span></span>
                        <input type="submit" class="btn right btnContactSubmit" name="bt_submit" id="bt_submit" value="<?=lang('send_message')?>">
                    </div>
                </form>
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6 a-right">
                <div class="contact heading text-left time_work">
                    <h2> <?=$cfg->site_name?> </h2>
                    <div class="contact-info"> <?=lang('address')?>: <?=$cfg->site_address?> </div>
                    <div class="contact-info"> <?=lang('phone')?>: <a href="tel:<?=$cfg->site_phone?>"><?=fm_phone($cfg->site_phone)?></a> </div>
                    <div class="contact-info"> <?=lang('email')?>: <a href="mailto:<?=$cfg->site_email?>" rel="nofollow"><?=$cfg->site_email?></a> </div>
                </div>
                <div id="largeMap" style="height: 450px; position: relative; overflow: hidden;">
					<script type="text/javascript">
                    function initMap(){
                        var latitude = parseFloat(<?=$cfg->latitude?>) ;
                        var longitude = parseFloat(<?=$cfg->longitude?>) ;
                        if((latitude ==null) || (longitude == null)) 
                            $('.hotel-detail-map').css('display','none');
                        else{
                            var position = {lat: latitude, lng: longitude};
                            var map = new google.maps.Map(document.getElementById('largeMap'), {
                                center: position,
                                zoom: 16
                            });
                            var marker = new google.maps.Marker({position: position, map: map});
                            $('.hotel-detail-map').css('display','blolk');
                        }
                    }
                    </script>
                    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4CP_fZlh1Rm-FKbfQ_vLY49-5PlM-zKY&callback=initMap" type="text/javascript"></script>
                 </div>
            </div>
        </div>
    </div>
</section>
<script language="javascript">
$(document).ready(function(e) {
    $('#frmcontact').validate({
		rules: {
			cusname:{required:true},
			phone:{required:true},
			cusmail: {
				   required: true,
				   email: true
			   },
			/*cfpass: {
				required: true,
				equalTo: "#password" //So sánh với trường cpassword với thành trường có id là password
			},*/
			captcha:{required:true}
		},
		messages: {
			 cusname: "Vui lòng nhập tên đăng nhập",
			 phone: "Vui lòng nhập số điện thoại",
			 cusmail: {
				required: "Vui lòng cập nhật email",
				email: "Vui lòng nhập đúng định dạng sau name@domain.com"
			 },
			 /*cfpass: {
				 required:"Vui lòng xác nhận lại mật khẩu",
				 equalTo : "Mật khẩu không trùng khớp"
			 },*/
			 captcha: "Vui lòng nhập captcha."
	   },
	});
});
</script>