﻿/* 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');
}


/*Fix*/
body{
    min-width: 240px !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: 600;
}
.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;
}
ul.art-vmenu>li>a
{
    font-family: 'Roboto Condensed', sans-serif, Tahoma;
    font-size:15px;
}
.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*/
 
@media only screen and (max-width: 768px) {
    .hp-logo{
        text-align: center;
    }

}
.hp-article-heading { font-family: 'Roboto', Arial, serif; font-weight: 300; color:#448943; font-size:33px; 
                      margin:0px 0px 0px 0px; margin-bottom:15px;

}
.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:#000 !important;
    margin-bottom: 15px;
    border-bottom: 1px solid #bbb;
    padding-bottom: 8px;
}
.hp-footer-text {
    padding-bottom: 10px;
   
}


header
{
    background-color:#f1f1f1;        
}
.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-cam-nang-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 150%;
}
.hp-product-image-box-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 118%;
}
.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);        */
        width:110%;
        max-width:110% !important;
    }
.hp-product-name
{
    text-align: center;    
    padding:8px 0px;
    height:30px;
    overflow: hidden;    
}
.hp-product-name a
{
    color:#133C8B !important;
}
.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:#333; 
}
.hp-post-title-link a:hover
{
    color:#448943;
}


.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;
}
.hp-ecard-right{
    position: fixed;
    right: 0px;
    bottom: 50%;
    z-index: 1001;
    text-align:center;
    padding:6px;
    background-color:#133C8B;
    border-radius:6px;
    
}
.hp-ecard-right a{
    color:#F2F2F2;
    text-decoration:none;
}
.hp-ecard-right a:hover{
    color:#ED0678;
    text-decoration:none;
}
.hp-contact-box
{
    background-color:#1179bc;
    width:320px;
    padding:15px;
    margin:15px auto;
    border-radius:15px;
    text-align:center;
    color:#FFF;
    font-size:20px;
}
.hp-contact-box > .phone-number
{
    font-size:1.8em;
}