@media screen {
* { margin: 0; padding: 0; }    
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/*font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;*/
}

ul, ol {list-style: none;}

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

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
.clear {clear: both;}
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */

body {font: 12px/2 "Helvetica Neue",Helvetica,Arial,sans-serif!important; background: #f0f0f0; color: #000;}

/*
	TYPOGRAPHY
*/
h1, h2, h3, h4, h5 {}
a img { border: 0; }
a {color: #ce9702; text-decoration: none;}
.zoomer:active { top: 0; }



/**** HEADER ****/

#page-wrap {margin: 0 auto; width: 100%;}
.container {width: 1152px; margin: 0 auto;}
.container-2 {width: 1200px; margin: 0 auto;}

#header {width: 100%; border-top: 2px solid #0975A6;background:url(../images/main_storyBGa.jpg) repeat-y scroll top left transparent}

#topHeader {width: 100%; height: 100px;background: url(../images/main_storyBGa.jpg) repeat-y scroll top left transparent;}
#topHeader h1 { float: left; width: 650px; padding: 0px 50px;}
/* #topHeader h1 a {display: block; height: 100px; background: url(../images/LOGO3.png) no-repeat scroll top left transparent; text-indent: -9999px; } */

#topHeader #headerBox {float: right; position: relative; width: 300px; margin-top: 0px; background: #0975A6; height: 30px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-family: Arial,Sans-Serif;
font-size: 11px;
font-weight: bold;
overflow: hidden;
top: 0;
right: 20px;
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}

#headerBox #lang {float: left; padding-left: 9px;}
#headerBox #lang li {
float: left;
padding: 0 0 0 7px;
display: block;
width: 26px;
height: 26px;
text-indent: -9999px;}
#headerBox #lang li.vn {background: url(../images/vn.png) no-repeat scroll 50% 0% transparent;}
#headerBox #lang li.en {background: url(../images/en.png) no-repeat scroll 50% 0% transparent;}
#headerBox #lang li:hover {cursor: pointer;}

#headerBox form {float: right;padding: 3px;}
#headerBox input[type="text"] {
border-color: #315B6C;
background: none repeat scroll 0 0 #FFFFFF;
font-size: 11px;
height: 16px;
margin: -5px 0 0;
padding: 4px 0 0px 3px;
border-radius: 3px 3px 3px 3px;
border: 1px solid;
resize: none;
width: 180px;
font-style: italic;
}

#headerBox input[type="submit"] {
background: url(../images/1406473979_search.png) no-repeat top left transparent;
border: medium none;
clear: both;
cursor: pointer;
height: 20px;
margin: -20px 2px;
padding: 0;
text-indent: -9000px;
text-transform: capitalize;
width: 20px;
}
 
 #headerBox input[type="submit"]:hover {cursor: pointer;}

/**** NAVIGATION ****/

#mainNav {background: -webkit-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);background: -o-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);background: linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

#navigation {width: 100%; margin: 0 auto;}
#navigation li {float: left; position: relative;}
#navigation li a {display: block; float: left; border-right: 1px solid #0975A6; color: #fff; font-family: "Adelle SemiBold",Cambria,Georgia,serif; text-transform: uppercase; padding: 5px 14px; font-size: 13px;}
#navigation li a:hover {background: -webkit-linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);background: -o-linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);background: linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);}
#navigation li ul {position: absolute; top: 100%; width: 18em; display: none; z-index: 10000;}
#navigation li:hover ul {display: block;}
#navigation li ul li a {float: none; border: none; font-size: 12px;}
#navigation li ul li {width: 100%; background: -webkit-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); background: -o-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); background: linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);}
#navigation li.last a {border-right: none!important;}
#navigation li a:last-child {border-right: none;}


/**** BANNER ****/ 



#banner {width: 100%; height: 371px; background: url(../images/main_storyBGa.jpg) repeat-y scroll top left transparent; box-shadow: 0 0 8px rgba(0,0,0,0.25); padding-top: 2px;}

/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

/* Invisible left hotspot */

div.scrollingHotSpotLeft
{
    /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
    min-width: 75px;
    width: 10%;
    height: 100%;
    /* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
    
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    left: 0;
    /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
    
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
    background-image: url(../images/arrow_left.gif);               
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35; /* Standard CSS3 opacity setting */
    -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
    filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
    zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
    min-width: 75px;
    width: 10%;
    height: 100%;
    
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    right: 0;
    
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
    background-image: url(../images/arrow_right.gif);
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35;
    filter: alpha(opacity = 35);
    -moz-opacity: 0.35;
    zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

div.scrollableArea
{
    position: relative;
    width: auto;
    height: 100%;
}

/**** SINGLE & PAGE ****/

#single, #page {width: 100%; overflow: hidden; height: auto; padding-bottom: 50px;}
.sidebar{overflow: hidden; float: left; margin-top: 30px; }
#singleCont, #pageCont {float: right; width: 880px;}

.navigation{
    width:250px;
    margin:0;
    list-style:none;    
    font-family: "Adelle SemiBold",Cambria,Georgia,serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #ccc;
}
 
.navigation a{
    display:block;
    padding: 5px;
    color:#555;
}
 
.navigation > li > a{
    position:relative;
}
 
.navigation ul a{
    padding-left:30px;
}

.navigation ul {
    display: none;
}

.navigation a{
    /*--code trước--*/
    position:relative;
    -moz-transition:background-color 0.2s ease,color 0.2s ease;
    -webkit-transition:background-color 0.2s ease,color 0.2s ease;
    -o-transition:background-color 0.2s ease,color 0.2s ease;
    -ms-transition:background-color 0.2s ease,color 0.2s ease;
    transition:background-color 0.2s ease,color 0.2s ease;
}
 
.navigation > li > a:hover,.navigation .on{
    background: -webkit-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color:#fff;
    border-top-color:#fff;
}
 
.navigation ul a:hover{
    background: -webkit-linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color:#fff;
}

.lv2 > a:before, .lv2 > a:after{
    position:Absolute;
    content:"";
    background-color:#d9d9d9;
}
 
.lv2 > a:before{
    width:10px;
    height:2px;
    right:8px;
    top:14px;
}
 
.lv2 > a:after{
    width:2px;
    height:10px;
    right:12px;
    top:10px;
}
.lv2 > .on:after{
    display:none;
}
.lv2:hover a:after,.lv2:hover a:before,.lv2 .on:after,.lv2 .on:before{
    background-color:#fff;
}


#singleCont h2, #singleSidebar h2, #singleCont h4, #pageCont h2 { margin-bottom: 20px;font-family: "Adelle SemiBold",Cambria,Georgia,serif; font-size: 16px; text-transform: uppercase; color: #0b2a50; font-weight: bold; border-bottom: 1px solid #ccc;}
#singleCont h2 a, #pageCont h2 a {font-family: "Adelle SemiBold",Cambria,Georgia,serif; font-size: 16px; text-transform: uppercase; color: #00aeff;}
#singleSidebar h2 {border-bottom: none; margin-bottom: 1px;}

#singleCont h4 {margin-top: 50px; width: 180px; font-size: 13px;font-weight: bold;}
#singleCont h3, #pageCont h4 a {font-weight: bold; font-size: 15px; color: #134679; padding: 0 0 10px 0;}
#singleCont p, #pageCont p {text-align: justify;}
#singleCont img.imgtitle {float: right; margin: 7px 0 7px 15px; width: 400px; height: auto; padding: 1px; border: 1px solid #ccc;}
#singleCont ul.more  li {background: url(../images/basics-21.png) no-repeat scroll 0 50% transparent; padding-left: 20px;}
#singleCont ul.more  li a {color: #444;}
#singleCont ul.more  li a:hover {text-decoration: underline;}

#pageCont .list li {padding: 15px 0; position: relative; overflow: hidden;}
#pageCont .list li img {width: 100px; height: auto; float: left; margin-right: 10px; padding: 1px; border: 1px solid #ccc;}
#pageCont h4 a:hover {text-decoration: underline;}

#canvasContent {width: 880px; padding: 0 10px; }
#canvasContent h7 {font-family: "Adelle SemiBold",Cambria,Georgia,serif; font-size: 16px; text-transform: uppercase; color: #0b2a50; font-weight: bold; border-top: 1px solid #ccc; width: 880px ; display: block; margin-top: 63px;}


/**** ALBUM ****/

#album-1, #album-2, #album-3, #album-4 {position: relative;}
.album {float: left; width: 250px; padding: 10px 20px 35px 20px;}
.album img {width: 250px; height: 200px; padding: 1px; border: 1px solid #ccc;}
.album p {font-style: italic;}

#singleCont .content p {margin-top: 10px; font-style: italic;}

/**** BOX ****/

.box {width: 250px; border: 1px solid #ccc; margin: 20px 0; font-family: "Adelle SemiBold",Cambria,Georgia,serif;}
.form-style-6{
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #f2f2f2;
    
}
.form-style-6 h1, .box h1{
    background: -webkit-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    padding: 3px 0;
    font-size: 140%;
    text-align: center;
    color: #fff;
    margin: -16px -16px 16px -16px;
    text-transform: uppercase;
}
.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select 
{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 3%;
    color: #555;
    font: 110% Arial, Helvetica, sans-serif;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus
{
    box-shadow: 0 0 5px #43D1AF;
    padding: 3%;
    border: 1px solid #43D1AF;
}

.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 3%;
    background: -webkit-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(#0975A6 0%, #005384 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 2px solid #fff;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;    
    color: #fff;
}
.form-style-6 input[type="submit"] {margin-bottom: 2px;}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
    background: -webkit-linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -o-linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(#0EB9F7 0%, #0C82AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.box-2 h1 a {color: #fff;}
.box-2 img {width: 150px; height: 150px; padding:0 50px;}
.box-2 {background: #fff;}
.box-2 h1 {margin: 0 0 16px 0;}
/**** MAIN CONTENT ****/

 {width: 100%; margin-top: 30px;}

 .content-2 {border-bottom: 1px dotted #ccc; margin-bottom: 15px;}

#rowContent-1, #rowContent-2, #rowContent-3, #rowContent-4 {position: relative; width: 100%; overflow: hidden;}

 .column {float: left; width: 369px; padding: 15px 15px 15px 0;}
 .column h3 {border-bottom:  1px dotted #ccc; font-family: "Adelle SemiBold",Cambria,Georgia,serif; letter-spacing: 3 !important;
	font-size: 17px; line-height: 22px; text-transform: uppercase; padding: 20px 0px 20px 55px; color: #00245D; font-weight: bold;}
 .column li a:hover{text-decoration: underline;}


#column10 h3 {background: url(../images/icon-1.png) no-repeat 0 50% scroll transparent;}
#column10 ul li,  #column60 ul li {background: url(../images/basics-06.png) no-repeat 0 50% scroll transparent; padding-left: 23px;}

#column20 li, #column30 li, #column40 li, #column50 li, #column10 li {height: 80px;}
#column10 li {text-align: middle;}

#column20 h3{ background: url(../images/icon-5.png) no-repeat 0 50% scroll transparent;}
#column30 h3 {background: url(../images/icon-4.png) no-repeat 0 50% scroll transparent;}
#column40 h3 {background: url(../images/icon-6.png) no-repeat 0 50% scroll transparent;}
#column50 h3 {background: url(../images/icon-3.png) no-repeat 0 50% scroll transparent;}
#column60 h3 {background: url(../images/icon-2.png) no-repeat 0 50% scroll transparent;}
#column7 h3,  #column8 h3,  #column9 h3 {
    background: url(../images/icon-12.png) no-repeat 0 50% scroll transparent;
}

 .column li {border-bottom: 1px solid #dcdcdc; padding: 10px 0 ;}
 .column li a {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 16px; color: #333;}

 .column li .feature {float: left; overflow: hidden; width: 35%;}
 .column li .feature img {padding: 2px; border: 1px solid #ccc; width: 100px; height: 75px;}
 .column .title a:hover {text-decoration: underline;}


 p.view {margin: 5px 0;}  
 p.view a {color: #00245D; font-family: "Adelle SemiBold",Cambria,Georgia,serif; font-style: italic; font-size: 14px;}
 p.view a:hover {text-decoration: underline;}

 #rowContent-4 {border-bottom: none; padding: 15px 0;}
 #rowContent-4 ul li {float: left; padding: 0 0;}
 #rowContent-4 ul li img {border: 1px solid #ccc; width: 140px; height: 80px; padding: 1px;}

/**** SLIDE FOOTER ****/

@charset "utf-8";
.conpart {width: 1174px; margin: 25px auto; margin-bottom: 20px;}
.clearfix {
    clear: both;
}
.prev,.next,.prevtop,.nexttop {width:38px; height:38px; float:left; display:block; background:url(../../../images/arcarousel.png); line-height:38px; text-align:center; text-indent:-9999px; cursor:pointer; margin-right:10px; margin-top:30px;}
.next,.nexttop {background-position:-38px 0; margin:30px 0 0 10px !important;}
.prev:hover,.prevtop:hover {background-position:0 -38px;}
.next:hover,.nexttop:hover {background-position:-38px -38px;}
.topproduct {padding:15px 0 15px 0; float:left;}
.topproduct {padding:0 !important; width:850px; overflow:hidden;}
.topproduct ul {list-style:none; margin:0; padding:0;}
.topproduct ul li {margin:0 5px 0 5px !important; float:left;}
.topproduct ul li img {border:1px solid #ccc; width: 140px; height: 80px;}

/**** FOOTER ****/

.container2 {width: 1263px; margin: 0 auto;}
#footer {background: #14213d;
width: auto;
min-height: 200px;
max-height: 300px;
position: relative;
overflow: hidden;
font-family: Cambria,'Hoefler Text',Utopia,'Palatino Linotype',Palatino,Times,'Times New Roman',Georgia,serif;
font-size: 13px;}



#footer .columnFooter {float: left; padding: 0 19px; height: 170px; width: 142px; margin: 20px 0 10px 0;
position: relative;
text-shadow: 0 -2px 0 #000;
background: url(../images/black-blue-vrt.png) repeat-y scroll top left transparent; }


#footer .columnFooter h4 {padding: 5px 0 3px 0; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid #fff; margin-bottom: 10px;}
#footer .columnFooter h4 a {color: #fff; font-weight: bold;}
#footer .columnFooter h4 a:hover{color: #9ba5c2;}
#footer .columnFooter a.view {float: right; font-style: italic;color: #D1C000;}

#footer .columnFooter ul li a {color: #9ba5c2; margin-top: 2px;}
#footer .columnFooter ul li a:hover {color: #fff;}
#footer .columnlast {background: url(../images/black-blue-vrt.png) repeat-y scroll top left transparent;}
#footer .columnFooter:first-child {background: none;}

#footer .address {margin: 20px 0 0 20px; color: #fff; line-height: 20px; float: left;}
#footer .address h4 {text-transform: uppercase; font-size: 12px;}
#footer .address p {font-size: 12px;}
#footer .address a {color: #D1C000;}
#footer .address a:hover {text-decoration: underline;}


#footer .footer-left {float: left; margin-top: 30px}
.footer-left li a {color: #9ba5c2; font-size: 13px;}
.footer-left li a:hover {color: #fff; ;}

#footer .footer-right {margin-top: 30px; color: #fff; float: right;}
#footer .footer-right h4 {text-transform: uppercase; font-size: 12px;}
#footer .footer-right p {font-size: 12px;}
#footer .footer-right a {color: #D1C000;}
#footer .footer-right a:hover {text-decoration: underline;}

#footer #luotruycap {float: right; margin-right: 50px;}
#footer #luotruycap h4 {color: #D1C000; text-transform: uppercase; margin-bottom: 5px; }