/*input your custom css code *//*Header Contact*/   

#header .location { float:left}
#header .location a{ float:left}
#header .location a.LoControl{border: 0 none; 
  color: #2770a1;
  display: block;
  float: left;
  font-size: 13px;
  font-weight: bold;
  height: 25px;
  line-height: 30px;
  outline: 0 none;
  padding: 5px 10px 10px;
  text-align: center;
  text-shadow: none;}
#header-contact #dropdown_address .dt{float:left}
#header-contact #dropdown_address .dt::after {
  content: '.';
  display: block;
  float: left;
  width: 20px;
  height: 0;
  padding-top: 20px;
  overflow: hidden;
  background: url("https://www.awood.vn/wp-content/uploads/icon_po_khosango11.png") no-repeat;
  margin-right: 2px;
  margin-top: 5px;
}
#container-header-contact{margin-bottom: 5px;}
.header-contact{clear: both;position: relative; z-index: 10; float: left; width: 100%; height: auto;}
  
    .address{ position:relative;margin:2px 0 5px 18px; font-size:11px; color:#000; width:100%;float:left}
    .addr{ float:left; line-height:18px;width:645px}
    .chatting{width:auto; float: right;  top: 0px;  display: inline;  position: absolute;  right: 0;}
    .chatting a{margin: 2px 0 0 10px;float: left;}
    .SkypeButton{ float:right;position:absolute; top:-15px; right:-38px}
    .SkypeButton p{ margin:0; padding:0;}
    .SkypeButton p img{ margin:0; padding:0; }
    
    .provinces{ float:left; position:relative; display: inline-block; margin-right:8px}
    .provinces a.title_kho {color: #2770a1;padding: 0.2em 0.5em 0.2em 0em;  display: block;  float: left;  font-size: 12.7px;  font-weight: bold;  height: 30px;  line-height: 30px;  outline: 0 none;  text-align: center;  text-shadow: none;}
    .provinces>span{background: #FF6223;color: #FFFFFF;    border: none;    margin: 0;    padding: 0.4em 0.8em;    font-size: 1em;}
    .provinces ul.cont_add{/*max-height: 500px;*/overflow: auto;}
    .provinces ul{
        
        position: absolute;
        top: 100%;
        left:15px;
        display: none;
        margin: 0;
            /****************
         ** NEW STYLES **
         ****************/
    
        list-style: none; /** Remove list bullets */
        width: auto; /** Set the width to 100% of it's parent */
        padding: 0;
        background: #fff;
        border: 1px solid #c7c7c7;
        border-top:5px solid #ea3b21;
        -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 5px;
        z-index:9999;
    }
    .header-contact #dropdown_address .provinces:hover .cont_add{display: block; padding:10px 0}
    .header-contact #dropdown_address .provinces ul li{ padding:8px 10px 8px 10px; width: 470px;cursor: pointer;}
    .header-contact #dropdown_address .provinces ul li:hover{ background-color:#EEEEEE}
    .header-contact #dropdown_address .provinces ul li>a{ color:#2770a1; display:block; margin-bottom:5px; font-weight:bold; font-size:13px; padding:0px !important}
    .header-contact #dropdown_address .provinces ul li span{padding:0px !important}
    .header-contact #dropdown_address .provinces ul li>a:hover{ color:#060; text-decoration:none}
    .header-contact #dropdown_address .provinces ul li>span a{ color:#060}
    .header-contact #dropdown_address .provinces ul li>span.des_cont{ display:block; font-size:12px; }
    .header-contact #dropdown_address .provinces ul li>.des_cont{font-size:13px; }

    .hotline{color: #F00;padding: .4em 1.7em;font-size: 13px;font-weight: bold;height: 50px;line-height: 30px;
    outline: 0 none;text-align: center;text-shadow: none;float:left; position:relative; display: inline-block;}
    .hotline .hll{float:left;color:#000; margin-right:5px}
    .hotline .hl{float:left;color:#F00; margin-right:5px}
    .hotline .hl::after {
      content: '.';
      display: block;
      float: left;
      width: 20px;
      height:0;
      padding-top: 20px;
      overflow: hidden;
      background: url(../image/call-02.png) no-repeat;
      margin-right: 5px;
      margin-top: 3px;
    }
@media only screen and (min-width: 980px)
{
  #provinces_hcm{
    
        flex-wrap: wrap;
        flex-direction: column;
        height: calc(71px * 10 );
        align-content: flex-start;
        width:1140px !important;
    }
    #provinces_hcm li {
        width: 31%;
        height: 75px;
    }
    .header-contact #dropdown_address .provinces ul#provinces_hcm li{
        
        float:left;
        padding: 8px 10px 8px 10px;
        height:75px;
        width:33% !important;   

    }
    #provinces_hcm li .des_cont{
         line-height:18px;
    }
    .provinces:hover .cont_add#provinces_hcm{display: flex; padding:10px 0; left:30px}

    /*hn */
    #provinces_hn{
    
        flex-wrap: wrap;
        flex-direction: column;
        height: calc(71px * 8 );
        align-content: flex-start;
        width:773px !important;
    }
    #provinces_hn li {
        width: 31%;
        height: 75px;
    }
    .header-contact #dropdown_address .provinces ul#provinces_hn li{
        
        float:left;
        padding: 8px 10px 8px 10px;
        height:75px;
        width:50% !important;   

    }
    #provinces_hn li .des_cont{
        line-height:18px;
    }
    .provinces:hover .cont_add#provinces_hn{display: flex; padding:10px 0}

}
@media only screen and (min-width: 1180px)
{
    #provinces_hcm{    
        width:1140px !important;
 
    } 
    #provinces_hn{  
        width:772px !important;
    }
}
@media only screen and (min-width: 768px)
{
    .hidden-desktop{
        display: none !important;;
    }
}

#static-header-top .quick-select .sub-inside > ul > li:nth-of-type(even),.header-contact #dropdown_address .provinces ul#provinces_hcm li:nth-of-type(even),#locations li:nth-of-type(even) {
  background: #f9f9f9;
}

.dropdown_btn {

  color: black;
  padding: 16px;
  font: bold 16px/56px arial;
  text-transform: uppercase;
width:100%;
  height: 52px;
    margin: 0;
    padding: 0 15px 0 20px;
border: none;
    background: #ccc;
    position: relative;
}
.dropdown_btn>b {
    background: url(../../../view/theme/khosango/image/Arrow-trang.png) no-repeat;
    width: 25px;
    height: 25px;
    float: right;
    margin-top: 15px
}

.dropdown_btn:hover, .dropdown_btn:focus {
  background-color: #ccc;
}

.box_dropdown_header {
  position: relative;
 
}

.box_dropdown a:hover {background-color: #ddd;}


@media screen and (max-width: 768px) {

 .dropdown-content {
     display: none;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .d-md-none
    {
        display: block;
    }
    .title_kho {
       cursor: default;
    } 
    .provinces
    {
        width: 100%;
        margin-left:5px; 
    
    }
    .provinces ul
    {
        left: 0px;
     
    }
    .header-contact #dropdown_address .provinces ul li
    {
        width: auto;
        padding: 8px 5px 8px 5px;
        margin-left: 15px;
    }

    .dropdown-content.show .cont_add.cont_add_open{
      width: 100%;
    }
    .address{
        margin: 2px 0 0 0px;
    }
}
@media screen and (min-width: 769px) {
  .d-md-none
    {
        display: none;
    }
    .header-contact #dropdown_address .provinces ul li
    {
        width: 100% !important;
       
        white-space:nowrap;
    }
    .cus-responsive-mobile-menu{
        display: none !important;
    }

}
@media screen and (max-width: 980px) {
     .d-lg-none
    {
        display: block !important;
    }
}
@media screen and (min-width: 981px) {
  .d-lg-none
    {
        display: none;
    }
}
.show {display: block;}
.cont_add_open
{
    display: block !important;
    visibility: visible;;
}



.header-contact #dropdown_address .provinces ul.cont_add {overflow-x: hidden;}
.header-contact #dropdown_address .provinces a:hover {color:#e2391b;}

 /* Overlay */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Grey semi-transparent */
    z-index: 999;
    display: none; /* Hidden by default */
}

#overlay.active {
    display: block; /* Show when menu is open */
}

#header-contact .header-contact-header {
    display: none;
}


@media only screen and (max-width: 767px)
{
    #header-contact {
        width: 250px;
        position: fixed;
        top: 0;
        left: -250px; /* Hidden by default */
        height: 100vh;
        background-color: #343a40;
        color: white;
        transition: left 0.3s ease-in-out;
        z-index: 1000;
    }

    #header-contact.active {
        left:15px; /* Slide in */
        display:block;
        width:80%;
    }
    #header-contact.active #dropdown_address
    {
        display:block;
        overflow-y:auto;
        max-height: 85%;
        width: 100%;
    }

    #header-contact .header-contact-header {
        padding: 1px 10px;
        background-color: #ccc;
        font: bold 16px arial;
        text-transform: uppercase;
        color: black;
        text-align: center;
        display: block;
    }
     #header-contact .header-contact-header h3 {
        font: bold 16px arial;
        font-weight: bold;
     }

    #header-contact ul {
        padding: 0;
        list-style: none;
        width: 100%;
    }

    #header-contact ul li {
       // padding: 15px 20px;
    }

    #header-contact ul li a {
      
        text-decoration: none;
    }

    #header-contact ul li a:hover {
        color: #adb5bd;
    }
    .header-contact #dropdown_address div.provinces ul.cont_add{
        display: none !important ;
    }
    .header-contact #dropdown_address div.provinces ul.cont_add.cont_add_open{
        display: block !important ;
    }

    .header-contact #dropdown_address .provinces a:hover {color:#2770a1;}

}
 .header-contact #dropdown_address .provinces ul li:hover{
    background:none;
}
 .header-contact #dropdown_address .provinces >a, .header-contact #dropdown_address .provinces>a>span{
    padding:0px;
}
@media only screen and (max-width: 479px) {
     .header-contact #dropdown_address .provinces a.title_kho {
        padding: 0.2em 0.6em;
    }
}
.header-contact #dropdown_address .provinces ul li:nth-of-type(even),#locations li:nth-of-type(even) {
    background: #f9f9f9; 
}