/**
 * @version		$Id: style.css 3 2012-08-14 11:59 Phu $
 * @package		vFramework.theme
 * @copyright	(C) 2012 Vipcom. All rights reserved.
 * @license		Commercial
 */
@charset "UTF-8";

@import url("reset.css");

@import url("content.css");

body { background:url(../img/bg_body.png) repeat; margin:0 auto; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333}
a { text-decoration:none; color:#333}
a:visited { color:#333}
input, select , textarea { outline:none}
.clr { clear:both}
/********************************* LAYOUT *****************************/
#container { width:1013px;background:url(../img/bg_content.png) repeat-y top left; margin:0 auto; position:relative;}
#wr { width:1013px; margin:0 auto;background:url(../img/bg_top_content.jpg) no-repeat; min-height:500px}
#left { width:235px; float:left;}
#right { width:235px; float:right;}
#content {}
#main { padding:30px 35px 30px 40px}
#left + #right + #content, #left + #content {margin-left: 275px}
#right + #content {margin-right: 275px}
/********************************* HEADER *****************************/
#header { width:1000px; height:180px; padding-left:6px}
#logo,#logof { float:left;}
#logof object { position:relative; z-index:0}
#slogan { float:left; margin:45px 0 0 20px; line-height:20px}
#slogan span { font-size:22px; font-weight:bold; font-style:italic; color:#333;}
#slogan p { font-size:16px; color:#666666; font-weight:bold;}
#menu {background:url(../img/bgmenu.jpg) repeat-x left top; float:left; height:50px; width:100%; margin-top:6px;
-webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 1px 3px rgba(50, 50, 50, 0.75);
box-shadow:         0px 1px 3px rgba(50, 50, 50, 0.75);}
#menu > ul { float:left;}
#menu > ul > li { float:left; position:relative; text-align:center; height:50px; border-left:1px solid #f5afb1}
#menu > ul > li:first-child { border:none}
#menu > ul > li.active, #menu > ul > li:hover { background:url(../img/bgmenu_a.jpg) repeat-x left top;-moz-transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.5s;
	-ms-transition:all ease-in-out 0.5s;
	transition:all ease-in-out 0.5s;}
#menu > ul > li > a.active, #menu > ul > li:hover > a { border:none; color:#ffcc00;-moz-transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.5s;
	-ms-transition:all ease-in-out 0.5s;
	transition:all ease-in-out 0.5s;}
#menu > ul > li > a { font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:18px; color:#fff; text-transform:uppercase; font-weight:bold; display:block; height:50px; line-height:50px;}
#menu ul ul{position:absolute; top:50px; left:0; width:200px; padding:10px 15px; background:#B80A0A; display:none; z-index:9999}
#menu li:hover > ul{display:block;}
#menu ul ul li{padding:6px 0; border-top:1px solid #fa3f48; text-align:left}
#menu ul ul li:first-child{border:none;}
#menu ul ul li a{color:#fff;}
#menu ul ul li a:hover {color:#ffcc00}
.vn #language { float:right; margin-right:30px; width:73px; height:65px; background:#cdcdcd; position:relative}
.en #language { float:right; margin-right:30px; width:80px; height:65px; background:#cdcdcd; position:relative}
#language a { text-transform:uppercase; color:#282828; font-weight:bold; padding:40px 0 0 10px; display:block;}
#language a#english { background:url(../img/en.png) 25px 15px no-repeat}
#language a#vietnamese { background:url(../img/vn.png) 28px 15px no-repeat; padding-left:5px; font-size:11px}
#language a:hover {color:#999}
/*************************************** LEFT ****************************************/
.mnl { background:#666; padding:10px 15px 40px 15px}
.mnl > ul > li { list-style:url(../img/icon_menu_left.png) outside; margin:0 0 10px 10px; border-top:1px solid #999; padding-top:10px; position:relative;}
.mnl > ul > li:first-child { border:none}
.mnl > ul > li > a {font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:14px; color:#fefdf9; text-transform:uppercase;}
.mnl > ul > li > a:hover, .mnl > ul > li > a.active { color:#ffcc00;}
.mnl > ul > li > ul { display:none; margin-left:20px}
.mnl > ul > li:hover > ul { display:block; position:absolute; top:10px; left:175px; background:#444444; width:200px; padding:5px 0; z-index:999}
.mnl > ul > li > ul > li { padding:5px 15px; color:#fefdf9; font-size:10px;}
.mnl > ul > li > ul > li:hover { background:#333;}
.mnl > ul > li > ul > li:hover a,.mnl > ul > li > ul > li > a.active  {color:#ffcc00;}
.mnl > ul > li > ul > li > a { font-family:"Myriad Pro",Arial, Helvetica, sans-serif; color:#fefdf9; font-size:16px}
.bnl img { max-width:235px; max-height:155px}
/*************************************** ARTICLE ****************************************/
.vf_article, .blk-product{ width:100%; float:left;}
.vf_article .vf_tit { padding-bottom:5px; margin-bottom:15px;font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:24px; text-transform:uppercase; border-bottom:3px solid #cccccc; font-weight:bold}
.vf_article .vf_tit:hover, .blk-product .vf_tit:hover,.vf_article .vf_tit:hover a { color:#FE0000;-moz-transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.5s;
	-ms-transition:all ease-in-out 0.5s;
	transition:all ease-in-out 0.5s;}
.vf_article .vf_list ul li {padding: 10px 0px}
.vf_article .vf_list ul li a {display: block;font-weight: bold;font-size: 14px;}
.vf_article .vf_list ul li a:hover {color: #0000FE}
.vf_article .vf_view .vf_ctn {min-height: 100px;}
.vf_article .vf_next ul li {padding: 10px 0px}
.vf_article .vf_next ul li a {display: block;font-weight: bold;font-size: 14px;}
.vf_article .vf_next ul li a:hover {color: #0000FE}
/*************************************** CONTENT ****************************************/
.nav { margin-bottom:10px}
.nav li{font-size:12px; color:#666; display:inline}
.nav li a{color:#666;}
.nav li span{padding:0 5px;}
.nav li:last-child a{color:#999;}
.nav a:hover, .nav li:last-child a:hover {color:#FE4444}
.blk-product .vf_tit { padding-bottom:5px; margin-bottom:15px;font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:24px; text-transform:uppercase; border-bottom:3px solid #cccccc; font-weight:bold}
.blk-product ul li { width:200px; float:left; margin:0 0 30px 31px; line-height:20px}
.blk-product ul li.fix { margin-left:0; clear:both}
.blk-product .tech, .vf_product .tech { color:#ed1d24}
.blk-product ul li .tit { font-weight:bold}
.blk-product ul li .img { width:196px; height:196px; border:2px solid #cecece; position:relative; display:block;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;} 
.blk-product ul li .img img { position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; max-width:196px; max-height:196px;}

.vf_product { float:left; width:100%;}
.vf_product .vf_list .vf_tit, .vf_product .vf_next .vf_tit { padding-bottom:5px; margin-bottom:15px;font-family:"Myriad Pro",Arial, Helvetica, sans-serif; font-size:24px; text-transform:uppercase; border-bottom:3px solid #cccccc; font-weight:bold}
.vf_product .vf_list ul li, .vf_product .vf_next ul li { width:210px; float:left; margin:0 0 30px 16px; line-height:20px}
.vf_product .vf_list ul li.fix, .vf_product .vf_next ul li.fix { margin-left:0; clear:both;}
.vf_product .vf_list ul li .tit, .vf_product .vf_next ul li .tit { font-weight:bold}
.vf_product .vf_list ul li .tit:hover, .vf_product .vf_next ul li .tit:hover, .blk-product ul li .tit:hover {color:#0000FE}
.vf_product .vf_list ul li .img, .vf_product .vf_next ul li .img { width:196px; height:146px;border:2px solid #cecece; position:relative; display:block;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
padding:5px}
.vf_product .vf_list ul li .img:hover, .vf_product .vf_next ul li .img:hover, .blk-product ul li .img:hover { border-color:#ED1D24}
.vf_product .vf_list ul li .img img, .vf_product .vf_next ul li .img img { position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; max-width:196px; max-height:146px;}
.vf_product .vf_next { margin-top:40px}

.vf_product .vf_view { line-height:20px}
.vf_product .vf_view .vf_tit { color:#E11A21; font-size:18px; margin-bottom:15px;}
.vf_product .vf_view .proleft { width:270px; float:right; margin:0 0 20px 30px;}
.vf_product .vf_view .proleft .full { display:block; width:260px; height:255px; border:1px solid #ccc; position:relative; margin-bottom:15px}
.vf_product .vf_view .proleft .full img { max-width:100%; max-height:100%;position:absolute; left:0; top:0; bottom:0; right:0; margin:auto}
.vf_product .vf_view .proleft .slidepic { display:block; width:80px; height:80px; border:1px solid #ccc; position:relative; margin:0 8px 10px 0; float:left}
.vf_product .vf_view .proleft .slidepic img { width:100%; height:100%;position:absolute; left:0; top:0; bottom:0; right:0; margin:auto}
.vf_product .vf_view .proleft .slidepic.fix { margin-left:0;}

.vf_pag { text-align:center; margin:10px 0;}
.vf_pag a { background:#727375; padding:2px 5px; color:#fff; }
.vf_pag a.active { background:#B41318;font-weight:bold;}
.vf_pag a.next, .vf_pag a.prev { display:none;}
/*************************************** CONTACT ****************************************/
.tabbed{margin-bottom:20px;}
.tabnav li{float:left; margin-right:5px;}
.tabnav li a{display:block; text-align:center; height:26px; line-height:26px;color:#333; padding:0 10px; background:#ccc;-moz-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}
.tabnav li.active a{background:#c41019; font-weight:bold; color:#fff;}
.tabbed,
.tabcont{overflow:hidden;position:relative; width:100%;}
.ctab{ position: absolute; top:-99999px; left:0; padding:15px; border:1px solid #ccc; overflow:hidden;}
.ctab.active{display:block; top:0; position:relative;}
#ctin.vf_contact {
    float: right;
    line-height: 22px;
    width: 435px;
}
.vf_contact {
    float: left;
    width: 435px;
}

#map p, #map iframe {
    height: 100%;
    min-height: 350px;
    width: 100%;
}
textarea,input[type=text], input[type=password], input[type=email], input[type=url],input[type=phone] {
	border:1px solid #ddd; padding:5px; width:300px;
}
textarea{height:150px;}
select{padding:3px;border:1px solid #ddd; width:312px;}
.vreg a.btn,input[type=submit],input[type=button],input[type=reset]{background:#43a741; color:#fff; font-weight:bold; font-size:12px; font-family:Arial, Helvetica, sans-serif; border:none; padding:5px 10px; margin-right:10px; cursor:pointer;-moz-border-radius:2px;-o-border-radius:2px;-webkit-border-radius: 2px;border-radius:2px;}
.service2 input[type=submit],.service2 input[type=button],.service2 input[type=reset]{background:#F27F00;}
.form-standard table td,.form-standard table th{padding:5px; text-align:left;}
.form fieldset {
	padding-top: 5px;
	padding-left: 5px;
	border: 1px solid #ccc;
}
.form fieldset legend {
	font-size: 1.4em;
	padding: 0 5px;
}
.form input[type=text], .form input[type=email], .form input[type=url] {
	margin-bottom: 10px;
	border: 1px solid #ccc;
	padding:0px 3px;
	height:22px;
	line-height:22px;
	width:318px;
}
.vf_contact.consultation .form input[type=text], .vf_contact.consultation .form input[type=email], .vf_contact.consultation .form input[type=url]{width:300px;}
.form label {
	display: block;
	height: 20px;
	color:#666;
	padding:0 15px;
}
.form textarea{width:96%; padding:4px 3px; border:1px solid #ccc; height:150px; margin-bottom:5px;}
.vf_contact.consultation textarea{width:500px; height:130px;}
input[type=submit], input[type=reset]{color:#fff; margin-right:5px; background: #C41019; border:none; height:24px; line-height:24px;  cursor:pointer; text-align:center; -moz-border-radius:2px;-o-border-radius:2px;-o-border-radius:2px;border-radius:2px; padding:0 10px;}
input[type=submit]:hover, input[type=reset]:hover{background:#840B10; color:#FFCC00;-moz-transition:all ease-in-out 0.5s;
	-webkit-transition:all ease-in-out 0.5s;
	-o-transition:all ease-in-out 0.5s;
	-ms-transition:all ease-in-out 0.5s;
	transition:all ease-in-out 0.5s;}
.report{margin-bottom:15px !important; margin-left:15px !important; color:#666;}

table.form{width:100%;}
table.form th{text-align:left; width:105px; vertical-align: top;}

.contact-info{width:565px; float:left;}
.contact-info table{width:100%;}
.contact-info table td{vertical-align:middle; line-height:18px; font-size:13px;}
.contact-info table td:first-child{width:140px; padding-right:15px;}
.contact-info table td:first-child img{max-width:140px;}
.contact-info table img{ vertical-align:top;}

#contactform{width:830px; margin:0 auto;}
#contactform tr{display:block; float:left; width:50%;}
#contactform tr.message{width:100%;}
/*************************************** FOOTER ****************************************/
#footer { width:1000px; background:url(../img/bg_bot_content.png) repeat-y; position:relative; padding:0 7px 0 6px}
.cpr { margin:0 30px 0 36px; border-top:1px solid #cdcdcd; padding:15px 0 15px 0; line-height:20px}
.gotop { position:absolute; right:35px; top:10px}
.gotop img { opacity:.4}
.gotop img:hover { opacity:1}
#bg-footer { width:1013px; background:url(../img/bg_bot_content_2.png) no-repeat; height:31px}