/*!
Theme Name: hpk
Theme URI: http://underscores.me/
Author: quynv.freelancer@gmail.com
Author URI: 
Description: Theme Develope by QUYNV
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hpk
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
.primary-nav .active .nav-link {
    color: #e31c13 !important;
}
.about-news .h-title a,
.about-news .h-title a:hover,
.about-news .h-title a:active {
    color: #212529;
}
.maps-view iframe {
    width: 100% !important;
}
@media (max-width: 1575px) {
    .hero-image {
        min-height:auto;
        padding-bottom:30px;
        padding-top:30px;
    }
    .hero-image .title{
        font-size:2rem;
    }
}
.entry iframe{
    width:100%;
    height:auto;
}

.call-button {
    position: fixed;
    z-index: 3;
    right: 15px;
    bottom: 90px
}

.call-button i {
    width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    background-color: #f33a3a;
    color: #fff;
    line-height: 40px;
    margin: 0 auto;
    border-radius: 35px;
    animation: e 2s ease infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all .3s
}

@keyframes e {
    0% {
        transform: scale(1)
    }

    15% {
        box-shadow: 0 0 0 3px rgba(243,58,58,.4)
    }

    25% {
        box-shadow: 0 0 0 6px rgba(243,58,58,.4),0 0 0 12px rgba(243,58,58,.2)
    }

    25% {
        box-shadow: 0 0 0 9px rgba(243,58,58,.4),0 0 0 18px rgba(243,58,58,.2)
    }
}
.zalo-chat{
    border: none;
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 3;
    right: 15px;
    bottom: 30px;
    box-shadow: -8px 8.9px 27px 0 rgba(36,36,36,.26);
    border-radius: 40px;
    overflow: hidden;
    transition: all .3s
}
@media(max-width:575px){
    .content-nav.fixed{
        top:60px;
    }
    .content-nav .nav-content{
        flex-wrap:nowrap;
        overflow:scroll;
        white-space: nowrap;
    }
}
/*Customize Hungphat*/
.primary-nav .navbar-brand{
    background-image: url(images/logo.png);
    background-size: 70px auto;
    height: 95px;
    width:70px;
    border-radius: 0;
    font-size: 12px;
    text-transform: uppercase;
    color: #e31c13;
    font-weight: 700;
    position: relative;
}
.primary-nav.fixed .navbar-brand{
    background-size: 55px auto;
    height: 80px;
    width:70px;
    border-radius: 0;
    font-size: 12px;
    background-image: url(images/logo.png);
    background-position: top center;
}
.primary-nav .brand-name{
    position: absolute;
    bottom: 0px;
    color: #e31c13;
}
.primary-nav .navbar-brand:hover .brand-name{
    color:#008349;
}
.primary-nav.fixed{
    background-color: #fff !important;
}
.primary-nav.fixed .brand-name,
.primary-nav.fixed .navbar-brand:hover .brand-name{
    color: #fff;
}
.primary-nav.fixed  .brand-name,
.primary-nav.fixed  .navbar-brand:hover .brand-name,
.primary-nav.fixed  .navbar-brand:hover .brand-name:hover{
    color: #e31c13;
}
.primary-nav.fixed .navbar-nav .nav-link,
.primary-nav.fixed .navbar-nav .active .nav-link,
 .primary-nav.fixed .navbar-nav .nav-link:hover{
      color: #e31c13 !important;
}
.primary-nav  .form-control{
    background-color: #f5f5f5;
}
.primary-nav .dropdown-menu .dropdown-menu{
    display:none;
    top:0;
    left:100%;
    border:none;
    border-radius:0;
    margin-top:0;
    box-shadow:none;
    border-left:1px solid #e1e8ee;
    margin-left: -10px;
}
.primary-nav .dropdown-menu .dropdown-menu:before{
    content: "";
    border-top: 6px solid transparent;
    border-right: 5px solid #e1e8ee;
    border-bottom: 6px solid transparent;
    border-left: 5px solid transparent;
    top: 10px;
    left: -11px;
    position: absolute;
}
.primary-nav .dropdown-menu .dropdown-item:hover + .dropdown-menu{
    display:block;
}
/* Basic table styling */
/* Wrapper for the table with overflow */
.entry {
  width: 100%;
  overflow-x: auto; /* Enable horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
}

/* Basic table styling */
.entry table {
  width: 100%;
  border-collapse: collapse;
  font-size:13px;
}

.entry table th, .entry table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
  white-space: nowrap; /* Prevent text from wrapping to the next line */
}

/* Make the table scrollable on small screens */
@media screen and (max-width: 768px) {
  .entry table th, .entry table td {
    padding: 8px;
  }
}
@media(max-width:575px){
    .primary-nav.fixed .navbar-toggler span {
      
        background-color: #737373;
      
    }
    .primary-nav.fixed .navbar-toggler span:after,
    .primary-nav.fixed .navbar-toggler span:before{
         background-color: #737373;
    
    }
}

.primary-nav .navbar-nav>li.menu-item-has-children:after {
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 0;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent
}

.primary-nav .navbar-nav .nav-link,.primary-nav .navbar-nav>li>a {
    font-weight: 700;
    font-size: 14px;
    position: relative;
    color: #000;
    padding: .5rem 15px
}

.primary-nav .navbar-nav .nav-link:hover,.primary-nav .navbar-nav>li>a:hover {
    color: #e31c13;
}

@media (max-width: 575px) {
    .primary-nav .navbar-nav .nav-link,.primary-nav .navbar-nav>li>a {
        font-size:14px;
        display: block
    }

    .primary-nav .navbar-nav .nav-link .active:before,.primary-nav .navbar-nav>li>a .active:before {
        width: 100%;
        left: 0
    }
}

.primary-nav .navbar-nav .active>a:before {
    width: calc(100% - 30px);
    left: 15px
}

@media (max-width: 575px) {
    .primary-nav .navbar-nav .active>a:before {
        width:100%;
        left: 0
    }
}

.primary-nav .navbar-nav>li {
    position: relative
}

.primary-nav .navbar-nav>li>a {
    padding-left: 15px;
    padding-right: 15px
}

.primary-nav .navbar-nav>li>ul {
    border-top: 1px solid #e1e8ee;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: none;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #e31c13;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box
}

.primary-nav .navbar-nav>li>ul a {
    display: block;
    width: 100%;
    padding: 8px 1.5rem;
    clear: both;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0
}

.primary-nav .navbar-nav>li>ul a:hover {
    background-color: #e9ecef
}

.primary-nav .navbar-nav>li:hover>ul {
    display: block
}

.primary-nav .navbar-nav>li>ul>li {
    position: relative
}

.primary-nav .navbar-nav>li>ul>li.menu-item-has-children:before {
    content: "\f105";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 10px;
    top: 12px;
    color: #e1e8ee
}

.primary-nav .navbar-nav>li>ul>li.menu-item-has-children:hover:before {
    color: #e31c13
}

.primary-nav .navbar-nav>li>ul ul {
    border-left: 1px solid #e1e8ee;
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #fff;
    padding-left: 0;
    list-style: none;
    min-width: 200px;
    font-size: 14px
}

.primary-nav .navbar-nav>li>ul ul a {
    font-size: 13px
}

.primary-nav .navbar-nav>li>ul>li:hover ul {
    display: block
}
.widget-menu .list-cat-side > li{
    position:relative;
    z-index:1;
}
.widget-menu .list-cat-side .sub-menu{
    display:none;
    padding-left:20px;
    position: absolute;
    top:0;
    left:100%;
    margin-left:-25px;
    min-width:200px;
    background:#fff;
    z-index:1;
    list-style:none;
}
.widget-menu .list-cat-side > li:hover .sub-menu{
     display:block;
     
}
.widget-menu .list-cat-side .sub-menu li{
    font-weight:400;
    border:none;
}
.widget-menu .list-cat-side .menu-item-has-children:before {
    content: "\f105";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 10px;
    top: 12px;
    color: #e1e8ee;
    z-index:-1;
}
.home-product .sidebar{
    z-index:2;
}

@media (max-width: 575px) {
    .primary-nav .navbar-nav.mt-2 {
        margin-top:0!important
    }

    .primary-nav .navbar-nav .btn-contact,.primary-nav .navbar-nav .btn-contact>a {
        padding-left: 0
    }

    .primary-nav .navbar-nav>li.menu-item-has-children:after {
        top: 15px;
        border-top: .3em solid #000;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent
    }

    .primary-nav .navbar-nav>li.menu-item-has-children>ul {
        position: relative
    }

    .primary-nav .navbar-nav>li.menu-item-has-children>ul>li:last-child,.primary-nav .navbar-nav>li.menu-item-has-children>ul>li:last-child>a {
        border: none
    }

    .primary-nav .navbar-nav>.active>a:before,.primary-nav .navbar-nav>.active>a:focus:before,.primary-nav .navbar-nav>.active>a:hover:before,.primary-nav .navbar-nav>li.menu-item-has-children>:focus:before,.primary-nav .navbar-nav>li.menu-item-has-children>a:hover:before {
        left: 0
    }

    .primary-nav .navbar-nav .menu-item-has-children>ul {
        position: relative;
        left: auto;
        top: auto
    }

    .primary-nav .navbar-nav .menu-item-has-children>ul>li:last-child {
        border: none
    }

    .primary-nav .navbar-nav>li>ul>li a:focus,.primary-nav .navbar-nav>li>ul>li a:hover {
        background-color: transparent
    }

    .primary-nav .navbar-nav>li>ul>li>ul {
        padding-left: 10px
    }

    .primary-nav .navbar-nav>li>ul>li>ul:hover,.primary-nav .navbar-nav>li>ul>li>ul a:focus {
        background-color: none
    }
}