/*
Theme Name: Thiết kế web 
Theme URI: http://underscores.me/
Author: Thanh Doan
Author URI: https://www.facebook.com/thanh250896
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tkw
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Thiết kế web Hoàng Long media is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
.pum-content.popmake-content:focus-visible, 
.pum-content *:focus, 
.pum-overlay .pum-content {
    outline: none !important;
}
.wpcf7 br {
    display: none;
}
@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}
body {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #111;
}
figure {
    max-width: 100%;
}
a {
	text-decoration: none;
	color: inherit;
	transition: all .3s;
}
a:hover {
	text-decoration: none;
    color: #cb8f3a;
}
button,input {
	outline: none !important;
	box-shadow: none !important;
}
.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary,.btn-primary:focus {
	background-color: unset;
	border-color: unset;
	border: 0 !important;
}
a:focus {
  outline: 0 !important;
}
@media screen and (max-width: 782px){
	html {
	    margin-top: 0 !important;
	}
}
h2.screen-reader-text {
    display: none;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.showbar .icon-bar {
    display: block;
    width: 33px;
    height: 3px;
    border-radius: 1px;
}
.showbar .icon-bar {
    background-color: #fff;
}
.showbar .icon-bar+.icon-bar {
    margin-top: 7px;
}
.overbg-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #111;
    opacity: .5;
    z-index: 9999;
    display: none;
}
.close-menu {
    background: #fff;
    color: #0003AB;
    text-align: center;
    padding: 10px;
    font-size: 18px;
}
#mobile-menu .sub-menu img {
    display: none;
}
.stick-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    animation-name: effect;
    animation-duration: .3s;
    background: #fff;
    box-shadow: 2px 2px 2px #1113;
}
@keyframes effect {
  from {top: -50px}
  to {top: 0}
}
.alert-warning {
    background: transparent;
    border: 0;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: #111;
}
.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    border-bottom: 1px solid #cccccc;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:after,
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs:after,
.woocommerce div.product .woocommerce-tabs ul.tabs:before {
    display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 14px;
    font-weight: bold;
    position: relative;
    padding: 5px 15px;
    border-bottom: 2px solid transparent;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
@media (min-width: 1200px){
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 16px;
}
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #333333;
    border-bottom: 2px solid #ff9900;
}
.form-control:focus {
    box-shadow: unset !important;
    border-color: #ced4da;
}
.wpcf7-select, .wpcf7-text, .wpcf7-textarea,.wpcf7-number {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    outline: none !important;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.wpcf7-textarea {
    height: auto;
}
.wpcf7-submit {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    cursor: pointer;
}
div.quantity {
    display: flex;
}
.qty_button {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #111;
  outline: 0;
}
.qty.text {
  padding: 5px 10px;
  border: 1px solid #111;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.quantity__remove {
  border-right: 0;
  margin-right: -5px !important;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.quantity__add {
  border-left: 0;
  margin-left: -5px !important;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.single_add_to_cart_button {
    border-radius: 5px !important;
    display: inline-block !important;
    background-color: #ff9900!important;
    box-shadow: none !important;
    margin: 0px !important;
    margin-left: 10px !important;
    float: none !important;
    border: none !important;
    color: #ffffff!important;
    font-size: 14px !important;
    height: 35px;
    font-weight: 500 !important;
}
.woocommerce-pagination ul {
    list-style: none;
    border-radius: 0.25rem;
    border: 0 !important;
}
.woocommerce-pagination ul li {
    border-right: 0 !important;
}
.woocommerce-pagination ul li a {
    color: #111 !important;
}
.woocommerce-pagination ul li .current, .woocommerce-pagination ul li .page-numbers {
    position: relative;
    display: block;
    padding: 5px 10px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 3px !important;
    transition: unset !important;
}
.woocommerce-pagination ul li .page-numbers {
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 5px !important;
}
.woocommerce-pagination ul li .page-numbers.current {
    background: #109cd9 !important;
    border-color: #109cd9 !important;
    color: #fff !important;
}
#logo {
    background: url(images/bg-top.jpg) no-repeat -380px;
    height: 115px;
}
.header-top {
    background: #6e0106;
}
.header-main {
    background: #cb8f3a;
}

nav#primary-menu ul.menu {
    display: flex;
    justify-content: space-around;
}

#primary-menu .menu > li:hover > a {
    background: #daae45;
}

#primary-menu .sub-menu li a:hover {
    background: #daae45;
    color: #fff;
}
section.home-search {
    padding: 50px 0;
}

.search-input-box {
    align-items: center;
    width: 940px;
    display: flex;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    border-radius: 5px;
    margin: auto;
}

.search-input-box select {
    height: 40px;
    border: 1px solid #ccc !important;!i;!;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 6px 12px;
    box-shadow: unset !important;!i;!;
    outline: none !important;!i;!;
    width: 25%;
}

.search-input-box input {
    height: 40px;
    border-radius: 0;
    font-size: 14px;
    width: 90%;
}

.search-input-box button {
    width: 10%;
    background: #04334f !important;!i;!;
    color: #fff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    height: 40px;
    border: 0;
    font-size: 14px;
}
h1.section-header {
    font-weight: 700;
    color: #6e0106;
    margin: 0;
    padding: 0;
    font-size: 36px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}

h1.section-header:after,h1.section-header:before {
    position: absolute;
    content: "";
    width: 300px;
    height: 1px;
    background: #c4c4c4;
    transform: translateX(-50%);
    left: 50%;
    bottom: 0;
}
h1.section-header:after {
    bottom: -2px;
    height: 5px;
    background: #cb8f3a;
    width: 100px;
}

section.home-duan ul.nav {
    justify-content: center;
    display: flex;
    border: 0;
    margin-bottom: 40px;
    flex-wrap: nowrap;
}

section.home-duan ul.nav>li {
    padding: 0 20px;
}

section.home-duan ul.nav>li:first-child {
    padding-left: 0;
}

section.home-duan ul.nav>li a {
    font-weight: 700;
    font-size: 22px;
    color: #000;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: -5px;
    border-bottom: 5px transparent solid;
}

section.home-duan ul.nav a.active {
    color: #6e0106;
    border-color: #cb8f3a;
    display: block;
}

.project-item {
    background: #f7f7f7;
    transition: all .3s;
    border-radius: 5px;
    overflow: hidden;
}

.project-item:hover {
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
.project-item a {
    color: #04334f;
}

a.project-img {
    display: block;
    overflow: hidden;
}

a.project-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: all .3s;
}
.project-item a:hover {
    color: #6e0106;
}
a.project-img:hover img {
    transform: scale(1.1);
}

.project-text {
    padding: 25px;
    transition: all .3s;
}

.project-item:hover .project-text {
    background: #cb8f3a;
}

.project-text h3 {
    margin: 0;
}

.project-item:hover a {
    color: #fff;
}
section.home-duan {
    padding-bottom: 50px;
}

a.btn-readmore {
    margin-top: 20px;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    background: #cb8f3a;
    color: #fff;!;
}

a.btn-readmore:hover {
    background: #6e0106;
}
.category-name {
    border-bottom: 1px #c4c4c4 solid;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}
.category-name h2, .category-name h3 {
    font-size: 24px;
    font-weight: 700;
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 10px;
}
.category-name h2:before, .category-name h3:before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0;
    height: 3px;
    width: 100%;
    background: #cb8f3a;
}
.category-name a {
    color: #cb8f3a;
    font-size: 14px;
}

.big-post {
    margin-bottom: 15px;
}

.small-post:not(:last-child) {
    margin-bottom: 15px;
}

.big-post img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

.big-post h4 {
    margin: 10px 0;
}

.big-post h4 a {
    font-size: 16px;
    font-weight: 700;
    height: 35px;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.big-post h4 a:hover {
    color: #cb8f3a;
}

.big-post p {
    margin: 0;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.small-post {
    display: flex;
}

.small-post-text {
    flex: 1;
    padding-left: 20px;
}

.small-post img {
    border-radius: 5px;
    height: 80px;
    object-fit: cover;
    width: 120px;
}

.small-post-text h4 {
    margin-bottom: 10px;
}

.small-post-text h4 a {
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
}

.small-date-post {
    color: #666;
}

.small-date-post i {
    color: #cb8f3a;
}

.video-post p {
    margin: 0;
}

.video-post {
    margin-bottom: 20px;
}

.video-post h4 {
    font-size: 14px;
    padding: 10px;
}

.office-all {
    position: relative;
    overflow: hidden;
    height: 300px;
    margin-top: 20px;
}

@keyframes marquee {
  0% { top: 0; }
  100% { top: -200%; }
}

.office-all h3,.office-all strong {
    font-weight: 400;
}
footer#footer {
    border-top: 10px #6e0106 solid;
    margin-top: 30px;
    padding: 20px 0;
    background: #efefef;
}

div#logo-footer {
    margin-top: -20px;
    display: block;
}

div#logo-footer img {
    display: block;
    margin: 0 auto;
    height: 100px;
}

.footer-form h3 {
    font-size: 14px;
    text-align: center;
}

.footer-form .wpcf7-text {
    margin-bottom: 15px;
    font-size: 14px;
    border-radius: 0;
}

.footer-form .wpcf7-submit {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    background: #cb8f3a;
    color: #fff;!;
    border: 0;
}

.footer-form .wpcf7-submit:hover {
    background: #6e0106;
}

.footer-doitac {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.doitac-item {
    width: 32%;
    background: #fff;
    margin-bottom: 10px;
}
.brc {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.widget-title {
    border-bottom: 1px #b22222 solid;
    height: 10px;
    margin: 20px 0 40px;
}

.widget-title h4 {
    display: inline;
    padding: 10px;
    background: #b22222;
    color: #fff;
}
.widget:not(:last-child) {
    margin-bottom: 30px;
}
section.widget_nav_menu h2.widget-title {
    height: auto;
    border: 0;
    margin: 0;
    padding: 10px;
    display: block;
    font-weight: 700;
    background: #e67817;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

section.widget_nav_menu ul a {
    font-weight: 400;
    background: none;
    color: #e67817;
    padding: 10px;
    display: block;
}
section.widget_nav_menu  ul a:hover {
    padding-left: 25px !important;
    background: #ddd;
    color: #333;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
}
.post-item h3 a {
    font-size: 20px;
    font-weight: 500;
}

.post-date {
    color: #777;
    margin-bottom: 10px;
}
a.post-readmore {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    background: #cb8f3a;
    color: #fff;!;
}

a.post-readmore:hover {
    background: #6e0106;
}
.sub-heading  {
    border-bottom: 1px #b22222 solid;
    height: 10px;
    margin: 20px 0 40px;
}

.sub-heading  span {
    display: inline;
    padding: 10px;
    background: #b22222;
    color: #fff;
}
.banner-duan img {
    height: 450px;
    object-fit: cover;
    width: 100%;
}

.banner-duan .container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

.banner-duan .caption .name {
    color: #6e0106;
    font-size: 52px;
    font-weight: 700;
    background: rgba(255, 255, 255, .8);
    padding: 0 10px;
}

.banner-duan .director {
    background: rgba(255, 255, 255, .8);
    padding: 20px 40px;
    display: flex;
    font-size: 20px;
    border-radius: 5px;
    color: #000;
}

.banner-duan .director .job {
    padding-right: 20px;
}

.banner-duan .director .name {
    font-size: 26px;
}

.banner-duan .director a {
    display: block;
}
.call-mobile-bottom {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 50px;
    background: #fff;
    padding: 10px 0;
    display: flex;
    flex-flow: column;
    z-index: 999;
    border: 1px #ccc solid;
}
.call-mobile-bottom img {
    height: 25px;
}
.call-mobile-bottom a {
    display: block;
    text-align: center;
    padding: 10px 0;
    color: #6e0106;
    text-transform: uppercase;
    border-bottom: 1px #ccc solid;
}
.call-mobile-bottom a:last-child {
    line-height: 50px;
    transform: rotate(-90deg);
    white-space: nowrap;
    margin-top: 20px;
    border-bottom: 0;
}
.popup-info {
    position: fixed;
    top: 0;
    right: -999px;
    height: 100%;
    background: #fff;
    transition: all .6s;
    max-width: 400px;
    z-index: 9999;
}

.popup-info-wrap {
    padding: 15px;
    height: 90vh;
    overflow-y: scroll;
}

.popup-form .wpcf7-text,.popup-form .wpcf7-textarea {
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 0;
}
.popup-form .wpcf7-textarea {
    height: 80px;
}
.popup-form .wpcf7-submit {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    background: #cb8f3a;
    color: #fff;!;
    border: 0;
}

.popup-form .wpcf7-submit:hover {
    background: #6e0106;
}
/* width */
.popup-info-wrap::-webkit-scrollbar {
  width:5px;
}

/* Track */
.popup-info-wrap::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.popup-info-wrap::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
}

/* Handle on hover */
.popup-info-wrap::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
.close-popup {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: #666;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity = 20);
    opacity: .2;
    text-align: right;
    margin-bottom: 15px;
    cursor: pointer;
}

.close-popup:hover {
    opacity: 1;
}
.banner-duan {
    position: relative;
}
#logo img {
    height: 100px;
}
@media(max-width: 1600px) {
    section.home-duan ul.nav {
        flex-wrap: wrap;
    }

    section.home-duan ul.nav>li a {
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: 500;
    }
}
@media(max-width: 991px) {
    .header-main {
    padding: 7px 0;
}

.showbar h4 {
    color: #fff;
    margin: 0 5px 0;
}

#home-slide img {
    height: 35vh;
    width: 100%;
}


section.home-search {
    padding: 30px 0;
}

.search-input-box {
    width: 100%;
}

.search-input-box select {
    max-width: 120px;
    width: auto;
}

.search-input-box input {
    width: auto;
    flex: 1;
}

.search-input-box button {
    width: auto;
}

h1.section-header {
    font-size: 26px;
}

a.project-img img {
    height: auto;
}

.project-text {
    padding: 10px;
}

a.btn-readmore {
    margin-top: 0;
}

.big-post img {
    height: auto;
}
.header-top .container {
    display: flex;
}

div#logo {
    width: 150px;
    background: unset;
}

.slogan-mobile {
    padding-left: 20px;
    color: #cb8f3a;
    font-weight: 700;
    font-size: 16px;
    padding-top: 10px;
}

.slogan-mobile span {
    display: block;
}
.page-heading {
    font-size: 26px;
}
.banner-duan .caption .name {
    font-size: 26px;
}

.banner-duan .caption .name {
    margin-bottom: 15px;
    text-align: center;
}

.banner-duan {
    position: relative;
}

.banner-duan .director {
    padding: 10px;
    font-size: 16px;
    width: max-content;
    margin: 0 auto;
}

.banner-duan .director .name {
    font-size: 16px;
}

.banner-duan img {
    height: 250px;
}
	header#header {
    margin-bottom: 10px;
}
}   
@media(max-width: 767px) {
    
}
@media(max-width: 576px) {
    
}
.media {
    padding: 100px 0;
    margin-bottom: 10px;
}
.media-text {
    max-width: 350px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
.media-text .item {
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
}
.media .title {
    color: #4d8a7b;
    background: #fff;
}
.media-text .gia {
    font-size: 17px;
    padding: 0px 10px;
    line-height: 20px;
}
.media-text .gia span {
    font-size: 20px;
    color: #f5d045;
    font-weight: bold;
    line-height: 20px;
}