/*
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;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('libraries/fonts/SF-Pro-Display-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display';
  src: url('libraries/fonts/SF-Pro-Display-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Display';
  src: url('libraries/fonts/SF-Pro-Display-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@media (min-width: 1500px) {
    .container {
        max-width: 1500px;
    }
}
body {
    font-family: 'SF Pro Display';
    font-size: 14px;
    line-height: 1.5;
    color: #111;
    font-weight: 500;
    background-image: url(images/bg2.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: 50%;
}
figure {
    max-width: 100%;
}
a {
    text-decoration: none;
    color: inherit;
    transition: all .3s;
}
a:hover {
    text-decoration: none;
}
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;
}
div#site-outer-wrap {
    background-color: #0003;
}


div#logo  {
    margin-right: 30px;
    width: max-content;
}
#logo h1 {
    margin: 0;
}
#logo h1 a{
 font-family: 'Orbitron', sans-serif;
 font-size: 28px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1.5px;
 color: #fff;
 text-shadow: 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 30px #ff9933, 0 0 40px #ffcc00, 0 0 60px #ffcc33;
 transition: all 0.3s 
 ease;
}

.header-main {
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    padding: 16px;
    background-color: #343a408f;
}

nav#primary-menu {
    flex: 1;
}

nav#primary-menu ul.menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

nav#primary-menu ul a:hover {
    color: #ff6467;
}

.header-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.header-right li {
    background: #f5f4f4;
    padding: 8px 16px;
}

.header-right li svg:nth-child(2) {
    display: none;
}

.header-right li a {
    color: #111;
}

.header-right li:nth-child(1) {
    margin-right: 15px;
}

.header-right li:nth-child(2) {
    background: #ffffff80;
    font-size: 16px;
    color: #111;
    font-weight: 700;
}

.header-right img {
    width: 24px;
    margin-right: 10px;
}

.header-right svg {
    width: 16px;
    height: 16px;
}

header#header {
    padding-top: 20px;
}

.header-bottom {
    margin-top: 12px;
    background: #cd8900e6;
    text-align: center;
    padding: 12px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 12px;
}
.header-bottom a {
    color: #fff;
}
section.home-top {
    margin: 32px 0;
}


.ht-wrap {
    background: #fff3;
    height: 100%;
    padding: 15px;
    color: #fff;
    font-weight: 500;
}

.ht-wrap h3 img {
    width: 60px;
}

.ht-wrap h3 {
    color: #fff;
    font-size: 16px;
}
section.home-cat {
    background: #0009;
    padding: 20px;
}

section.home-cat .heading {
    margin-bottom: 30px;
}

section.home-cat .heading h2 {
    color: #fff;
    font-size: 24px;
}

section.home-cat .heading p {
    color: #fff;
}

.homecat-item {
    background: #fff;
    border: 1px solid #ebe6e7;
    overflow: hidden;
    transition: all .3s;
}

.homecat-item:hover {
    transform: scale(1.02);
}

.homcat-text {
    padding: 16px;
}

.homcat-text h3 {
    margin-bottom: 5px;
    
}
.homcat-text h3 a {
    font-size: 16px;
    color: #111;
    display: block;
}
.homcat-text p {
    color: #99a1af;
    margin: 0;
    font-size: 14px;
}

.homcat-text p span {
    color: #fb2c36;
    font-weight: 700;
}
section.home-content {
    margin-top: 30px;
    background: #0009;
    padding: 12px;
}

section.home-content h2 {
    color: #fff;
    font-size: 32px;
    text-align: center;
    margin-bottom: 30px;
}

section.home-content .item {
    border: 1px solid #364153;
    padding: 24px;
    text-align: center;
    height: 100%;
}

.hc-image {
    font-size: 36px;
    text-align: center;
}

.hc-text h3 {
    color: #fff;
    font-size: 20px;
    margin-top: 15px;
}

.hc-text p {
    color: #d1d5dc;
    margin: 0;
}
section.home-content {
    margin-top: 30px;
    background: #0009;
    padding: 12px;
}

section.home-content h2 {
    color: #fff;
    font-size: 32px;
    text-align: center;
    margin-bottom: 30px;
}

section.home-content .item {
    border: 1px solid #364153;
    padding: 24px;
    text-align: center;
    height: 100%;
}

.hc-image {
    font-size: 36px;
    text-align: center;
}

.hc-text h3 {
    color: #fff;
    font-size: 20px;
    margin-top: 15px;
}

.hc-text p {
    color: #d1d5dc;
    margin: 0;
}

footer#footer {
    padding: 48px 0;
    background: #000c;
    color: #d1d5dc;
    font-size: 16px;
    margin-top: 30px;
}

footer#footer .title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

footer#footer a {
    color: #d1d5dc;
}

.footer-block-menu a {
    display: block;
    margin-bottom: 12px;
}
.brc {
    border-bottom: 1px solid #364153;
    padding: 12px 0;
    background: #0006;
    color: #ebe6e7;
    font-size: 16px;
    margin-bottom: 30px;
    margin-top: 15px;
}

.brc a {
    color: #fff;
}

.archive-main {
    background: #0009;
    padding: 30px 16px;
}

.product-item {
    border: 2px solid #364153;
    transition: all .3s;
    background: #1e293980;
}

.product-item:hover {
    transform: scale(1.02);
}

.product-text {
    padding: 8px;
    color: #fff;
}

.product-text h3 img {
    width: 24px;
}
.product-info {
    background: #1f2228;
    border: 1px solid #193cb8;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.product-info h3 {
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    z-index: 999;
}

.product-info h3 span {
    color: #f00;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #fff;
}

.product-info:before {
    content: "";
    position: absolute;
    inset: -3px; /* vượt ra ngoài một chút để viền sáng không bị cắt */
    background: conic-gradient(
        from 0deg,
        #ff0000,
        #ff9900,
        #00ff00,
        #00ffff,
        #0000ff,
        #ff00ff,
        #ff0000
    );
    animation: rotate 3s linear infinite;
    z-index: 1;
}

.product-info:after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #0d0d0d;
    z-index: 2;
}

.product-meta {
    position: relative;
    z-index: 999;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.product-meta ul {
    padding: 0;
    margin: 0;
}

.product-meta>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.vipin {
    color: #84ed10;
    font-weight: bold;
    border: dotted 1px;
    padding-left: 5px;
    padding-right: 5px;
}

.product-btn {
    display: flex;
    justify-content: space-between;
}

.product-btn>a {
    width: 49% !important;
}
a.btn-add {
    display: flex;
    text-align: center;
    padding: 7px 8px;
    background: #e7000b;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    align-items: center;
    justify-content: center;
}

a.btn-add svg {
    width: 16px;
}
.single-main {
    border: 1px solid #364153;
    overflow: hidden;
    background: #000c;
}

.single-row {
    padding: 24px;
    border-bottom: 1px solid #364153;
    color: #fff;
}

.summary-single h3 {
    color: #fff;
    font-size: 24px;
}

.summary-single .price {
    color: #ff6467;
    font-size: 30px;
    font-weight: 800;
    margin-top: 15px;
}
a.btn-thue {
    display: inline-flex;
    text-align: center;
    padding: 7px 20px;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #FF6B6B, #E53935);
}

a.btn-thue svg {
    width: 16px;
}

.single-row ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.single-row li {
    width: 30%;
    background: #1e293980;
    padding: 10px 12px;
    color: #99a1af;
}

.single-row li b {
    color: #ebe6e7;
    font-size: 16px;
}

.single-row li:nth-child(2) {
   margin: 15px 0;
}

.single-row .heading {
    text-align: center;
}

.single-row .heading h2 {
    font-size: 24px;
    margin-bottom: 50px;
    padding-bottom: 15px;
    border-bottom: 3px solid #00d3f3;
    display: inline-block;
}
.single-bottom {
    background: linear-gradient(180deg, #1a0000 0%, #2b0000 100%);
    border: 1px solid #ff0033;
    padding: 20px;
    text-align: center;
    color: #fff;
    margin: 15px;
}

a.btn-thue.btn-thue2 {
    background: #ff3399;
}
.header-right li a.active svg:nth-child(1) {
    display: none;
}

.header-right li a.active svg:nth-child(2) {
    display: block;
}

body.light {
    background: #fff;
}

body.light div#site-outer-wrap {
    background: #fff;
}

body.light #primary-menu .menu > li > a {
    color: #111;
}


body.light .header-bottom {
    background: #ffdf20;
    color: #111;
}
body.light .header-right ul li {
    box-shadow: 3px 3px 6px rgba(0,0,0,0.1),
    -3px -3px 6px rgba(255,255,255,0.9);
}

body.light .ht-wrap {
    box-shadow: 0 2px 10px rgb(0 0 0 / 27%);
    background: #fff;
    color: #111;
}

body.light .ht-wrap h3 {
    color: #111;
}

body.light section.home-cat {background: #fff;padding: 0;}

body.light .homecat-item {
    box-shadow: 0 2px 10px rgb(0 0 0 / 27%);
}

body.light section.home-content {
    background: #fff;
}

body.light section.home-content h2 {
    color: #111;
}

body.light .hc-text h3 {
    color: #111;
}

body.light .hc-text p {
    color: #111;
}

body.light section.home-content .item {
    box-shadow: 0 2px 10px rgb(0 0 0 / 27%);
    border: 0;
}

body.light #footer {
    background: #101828f2;
}
body.light .brc {
    background: #fff;
    color: #111;
}

body.light .brc a {
    color: #111;
}

body.light .page-heading {
    color: #fb2c36;
}

body.light .archive-main {
    background: #fff;
    padding: 0;
}

body.light .product-item {
    border: 0;
    box-shadow: 0 2px 10px rgb(0 0 0 / 27%);
    background: #fff;
}
body.light .single-main {
    border: 0;
    box-shadow: 0 2px 10px rgb(0 0 0 / 27%);
    background: #fff;
}

body.light .single-row {
    border-bottom: 1px solid #ebe6e7;
    color: #111;
}

body.light .single-row li {
    background: #fff;
    color: #111;
}

body.light .single-row li b {
    color: #111;
}

body.light .single-bottom {
    background: #fff;
    color: #111;
}
body.light .summary-single h3 {
    color: #111;
}
/* Nút nổi */
.support-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #ff0;
  color: #111;
  border-radius: 30px;
  padding: 12px 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: 0.3s;
  z-index: 1000;
}

.support-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Cấu trúc chung cho thanh công cụ */
.toolbar {
    display: none;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
}

/* Các icon */
.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: #333;
  flex-direction: column;
}

.icon img {
  width: 30px;
  height: 30px;
}

/* Nút gọi nổi bật */
.call-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 11px;
    font-weight: bold;
    text-decoration: none;
    flex-direction: column;
}
a.call-button svg {
    height: 24px;
}
.call-button img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

/* Hiệu ứng hover */
.icon:hover {
  background-color: #e0e0e0;
  border-radius: 50%;
}

.call-button:hover {
  background-color: #ff0000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
footer#footer {
    padding-bottom: 120px;
}

.toolbar span {
    display: block;
    white-space: nowrap;
}
div#supportBtn img {
    width: 20px;
}
.home-slogan {
    margin-top: 12px;
    background: #cd8900e6;
    text-align: center;
    padding: 12px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 12px;
}
@media(max-width: 991px) {
    .support-button {
        display: none;
    }
    .toolbar  {
        display: flex;
    }
    div#logo {
        flex: 1;
        width: 100%;
        margin-right: 10px;
    }

    #logo h1 a {
        font-size: 21px;
    }

    .header-right li:nth-child(2) {
        display: none;
    }

    .header-bottom {
        padding: 5px;
        font-size: 12px;
    }

    .ht-wrap {
        background: #0009;
    }
    .support-button {
        display: none;
    }
    .header-bottom {
        font-size: 16px;
    }
}
@media(max-width: 767px) {

}
@media(max-width: 576px) {

}
div#popmake-461 {
    border: 0;
}
div#popmake-461 h3 {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 20px;
}

div#popmake-461 h3 a {
    background-color: #2ecc71;
    color: #111;
}