﻿/* Font */
@font-face {
    font-family:menuFont;
    src: url('/fonts/uvf-museo500-regular.ttf');
}
@font-face {
    font-family:bodyFont;
    src: url('/fonts/uvf-museo300-regular.otf');
}
/* Thay đổi giao diện*/
.art-nav {
    background-color: transparent; /*#064356;*/
}

ul.art-hmenu > li > a:hover, .desktop ul.art-hmenu > li:hover > a {
    color: #fff;
}

ul.art-hmenu > li > a.active {
    color: #bf936c;
}

.art-sheet {
    background: #9f0100;
}
.art-postmetadataheader {
    background: #c30203;
    border-left: 6px solid #bf936c;
}
.art-vmenublockheader {
    position: relative !important;
    background-color: #8a0203;
}
    .art-vmenublockheader h3 {
        position: relative !important;
        z-index: 1;
    }
    .art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover {
        color: #eee;
    }

.art-vmenublockcontent {
    background: #b00203;
}
ul.art-vmenu > li:after, ul.art-vmenu > li > ul:after {
    border-bottom: 1px solid #c30203;
}
ul.art-vmenu > li > a {
    color: #ddd;
}
    ul .art-vmenu > li:after, ul.art-vmenu > li > ul:after {
    border-bottom: 1px solid #15657e;
}
/*ul.art-vmenu > li > a:before, ul.art-vmenu > li > a.active:before, ul.art-vmenu > li > a:hover::before, ul.art-vmenu > li > a.active:hover::before, ul.art-vmenu > li:hover > a::before, ul.art-vmenu > li:hover > a.active::before {
    content: ''
}*/
ul.art-vmenu > li > a:hover, ul.art-vmenu > li > a.active:hover, ul.art-vmenu > li > a.active {
    background: #c30203;
}
.art-footer {
    background-color: #8a0203;
}
    .art-footer, .art-footer a, .art-footer a:link, .art-footer a:visited, .art-footer td, .art-footer th, .art-footer caption {
        color: #bf936c
    }
.footer-line2 {
    background-color: #730201;
}
.RadDataPager_Default {
    border-color: #15647c !important;
    color: #fff;
    background-color: #0b4b5f !important;
}
.art-postcontent h3 {
    color: #e5f4f9;
}
.art-postcontent a, .art-postcontent a:link, .art-postcontent a:visited {
    color: #bf936c;
}
    .art-postcontent a:hover{
        color: #fff
    }
.col-sm-3
{
    overflow:auto;
}
.hp-logo img{
    max-width: 100%;
}
/* End*/
body {
    min-width: 240px !important;
    color: #E0E0E0 !important;
    /*background-color:#000000 !important;*/
}

.art-sheet{
     min-width: 240px !important;     
     /*color:#DEDEDE !important;*/
}
.responsive .art-sheet
{
    margin-left:0px !important;
    margin-right:0px !important;
}
.art-postheader
{
    font-family: 'Roboto', Arial, serif; 
    font-size:33px;
    font-weight:100;
    display:inline-block;
}
.art-hmenu>li>a, .art-hmenu>li>a:link, .art-hmenu>li>a:visited, .art-hmenu>li>a.active, .art-hmenu>li>a:hover
{   
    font-family: 'Roboto Condensed', sans-serif, Tahoma;
    font-weight:300;
}
.art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover
{
    font-family: 'Roboto Condensed', sans-serif, Tahoma;
    font-size:16px;
    font-weight:600;
}
.art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover
{
    font-family: 'Roboto Condensed', sans-serif, Tahoma;
    font-size:16px;
    font-weight:600;
}
.art-nav
{
    z-index:1010 !important;
}
.art-hmenu
{
    float:none;
}
.art-hmenu a{
    white-space: nowrap;
 }
.art-postmetadataheader
{
    z-index:auto !important;
}
.art-menu-btn
{
    background-image:url('/UserFiles/images/layout/MenuButton.png') !important;
    border:none !important;
    box-shadow:none !important;
    height:35px;
    width:106px !important;    
}
.art-nav .art-menu-btn span
{
    display:none;
}
.art-block, .art-vmenublock
{
    padding-top:10px;
    padding-bottom:5px;
    width:100% !important;
    margin-left:0px !important;
}
.art-post img
{
    max-width:100%;
}
/*.art-postheader{
    font-family:menuFont, Tahoma,Verdana;
}
.art-postcontent{
    font-family:bodyFont, Tahoma,Verdana;
    margin-left:15px;
    margin-right:15px;
}
.art-post{
    margin-top:10px;
}*/
input[type="text"]
{
    padding:4px 10px;
}
.container-fluid
{
    max-width:1170px;    
}
/*End Fix*/
 .art-nav-inner
 {
     text-align:right;
 }
@media only screen and (max-width: 768px) {
    .hp-logo{
        text-align: center;
    }

}
.hp-article-heading { font-family: 'Roboto', Arial, serif; font-weight: 300; color:#0072BC; font-size:33px; 
                      margin:0px 0px 0px 0px; display:inline-block;}
.hp-article-heading-more {float:right; line-height:36px; color:#333; padding:4px }
.hp-article-heading-more a{
    color:#333;line-height:36px; 
}

.hp-footer-heading {
    font-family: 'Roboto Condensed', Tahoma, Arial, serif !important;
    font-weight: 400;
    color: #e5f4f9 !important;
    margin-bottom: 15px;
    border-bottom: 1px solid #bbb;
    padding-bottom: 8px;
}
.hp-footer-text {
    padding-bottom: 10px;
   
}


header {
    background-image: url('/UserFiles/Images/Layout/header-bg.jpg');
    background-position: center;
    background-color: #9f0100;
    padding: 20px 0px;
}
.hp-body
{
    background-color:#f3f2f0;
    background-image:url('/Userfiles/Images/Banners/bg.jpg');
    background-position:center top;
    background-repeat:repeat-y;
}
@media screen and (min-width: 768px)
{
    .hp-menu-box
    {
        margin-right:-28px !important;
        margin-top:30px;
    }
}

/* For Product*/
.hp-product-box
{
    padding:5px; 
    text-align:center; 
    border:1px solid #DDDDDD; 
    margin:0px 0px 15px 0px;    
}
    .hp-product-box:hover {
        border:1px solid #0072BC; 
    }
.hp-product-image-box-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 133%;
}
.hp-product-image-box{
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;        
     overflow:hidden;
    text-align:center;    
}

.hp-product-image-box img{
    width:100%;    
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
    .hp-product-image-box img:hover {        
        -ms-transform: scale(1.2, 1.2); 
        -webkit-transform: scale(1.2, 1.2); 
        transform: scale(1.2, 1.2);        
        max-width:120% !important;
    }
.hp-product-name
{
    text-align: center;    
    padding:8px 0px;
    height:66px;
    overflow: hidden;    
}
.hp-product-old-price
{
    text-decoration:line-through;
    font-size:10pt;
}
.hp-product-price
{
    color:#EC3237;    
    font-size:1.3em;
}
.hp-product-tooltip-box
{
    border: 1px solid #CCC;
    border-radius: 8px !important;
    background-color: #FFFFFF;
    color: #000;
    width: 400px;
    box-shadow: 3px 3px 3px #666666; 
    padding:8px;
    z-index:1000;
}
.hp-product-tooltip-name
{
    background-color:#F2F2F2;
    height:30px;
    line-height:30px;
    padding:0px 0px 0px 8px;
    margin-bottom:8px;
    font-weight:bold;
    color:#0072BC;
    font-size:1.2em;
}
.hp-product-tooltip-promotion-box
{
    background-color:#fbf6bf;
}
.hp-product-tooltip-heading
{
    height:26px;
    line-height:26px;
    font-weight:bold;
    font-size:1.2em;
    border-bottom:1px dashed #CCC;
}
.hp-product-tooltip ul, hero-product-tooltip li
{
    margin: 0px 0px 0px 20px;
    list-style-type: square;
}

/* Product Detail*/
.hp-product-image-small-box
{
    width:60px;
    float:right; padding-left:2%; 
}

.hp-product-image-big-box
{
    float:none; height:300px; padding:1px; border:solid 1px #CCCCCC; text-align:center; overflow:hidden;
}
.hp-product-image-big
{
    max-width:100% !important;
    max-height:300px !important;
    background-color:#fef9e4;
}
.hp-image-box-small
{
    margin: 2px !important;
    float: left;
    border: 1px solid #C0C0C0 !important;
    width: 50px;    
    
}
.hp-product-tab-border
{
    border-bottom: solid 1px #808080;
    border-left: solid 1px #808080;
    border-right: solid 1px #808080;
    padding: 8px 8px 8px 8px;
   
}
.hp-product-tab-bg
{
    background-color: #DADADA; /*
    border-right:solid 1px #828282;
    border-top:solid 1px #828282;
    border-left:solid 1px #828282; */
}
/* End For Product*/

/* For Post*/
.hp-post-title
{
    margin:15px 0px;
    font-family: 'Roboto', sans-serif, Tahoma !important;
    font-weight:400 !important;
    font-size:20px;
   
}
.hp-post-title-link
{
    height:40px;
    overflow:hidden;
}
.hp-post-title-link a
{ 
    font-family: 'Roboto Condensed', sans-serif, Tahoma !important;
    font-weight:400 !important;
    font-size:20px;   
    color:#CCC; 
}
.hp-post-title-link a:hover
{
    color:#FFF;
}


.hp-image-box-tranform
{    
    overflow:hidden;
}
.hp-image-box-tranform img
{
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;   } 
}
.hp-image-box-tranform img:hover
{
    /*width:120%;*/
     -ms-transform: scale(1.2, 1.2); /* IE 9 */
     -webkit-transform: scale(1.2, 1.2); /* Safari */
     transform: scale(1.2, 1.2); 
     /*max-width:120% !important;*/
}
.hp-post-hot-img-box
{
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    overflow:hidden;  
}
.hp-post-hot-img-box img
{
    width:100%;
    height:auto;
    position:absolute;
}
.hp-tap-chi-img-box img
{
    width:100%;
    height:auto;
}

.hp-post-title-link-box
{
    background-image:url('/userFiles/images/Bullets/arrow.png');
    padding-left:10px;
    margin-bottom:10px;
    background-position:0px 6px;
    background-repeat:no-repeat;
    
}
.hp-hot-post-title-link-box
{
    background-image:url('/userFiles/images/Bullets/arrow.gif');
    padding-left:20px;
    margin-bottom:10px;
    background-position:0px 3px;
    background-repeat:no-repeat;
    
}
.hp-post-datetime
{
    color:#999999;
    font-size:0.9em;
}


/* ========== Contact Form ================*/
.hp-contact-form
{
    border: 4px solid #CCC;
    background-color: #FFFFFF;
    margin:6px auto !important;
    padding: 8px;
    display:inline-block;
}
.hp-contact-form th
{
    background-color: #EBEBEB;
    color: #808080;
    font-weight: bold;
    padding-left: 10px;    
    text-align:left;   
    height:30px;
}
.hp-contact-form td
{
    padding-left: 10px !important;
    color: #808080;
    height:30px;
}

.hp-maparea
{
    margin:6px 0px 0px 0px;
    border: solid 5px #CCC !important;
   /* border-radius:5px !important;*/
    height:400px !important;
}
/* Image */
.hp-img-responsive
{
    width:100%;
    height:auto;
    position:absolute;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;   
}
    .hp-img-responsive:hover {
        width:120%;
        max-width:120%;
        /*
        -ms-transform: scale(1.2, 1.2);
         -webkit-transform: scale(1.2, 1.2);
         transform: scale(1.2, 1.2); 
        */
    }
/* Counter*/
.hp-counter-table {
    width: 100%;
}

.hp-counter-value {
    text-align: right;
}
.hp-counter-date {
    color:#BBBBBB;
    font-size:0.89em;
}
/* Banner */
.hp-banner-container{
    margin:0px 0px 0px 0px;
}
/* Poroduct Image Popup */
.hp-product-image-popup {
    margin-bottom: 15px;
}
.hp-product-image-popup img {
    width: 100%;
    margin-bottom: 6px;
}

