/*
Theme Name: K-Tech Flatsome Child
Theme URI: 
Description: Flatsome Child Theme for K-Tech (Optimized for Flatsome 3.20.7)
Author: Master WP
Author URI: 
Template: flatsome
Version: 1.0.0
Text Domain: k-tech
*/

#main,
#wrapper {
    background-color: var(--fs-color-primary) !important;
}

#main>#content {
    max-width: 1280px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: 0 auto;
}

/* GHI ĐÈ FLATSOME */
[data-icon-label]:after {
    background-color: var(--fs-color-alert) !important;
}

a.icon-circle:hover,
a.remove:hover,
a:hover,
.stars a.active::after,
.stars a:hover::after,
.star-rating span:before,
.primary.is-link,
.primary.is-outline,
.primary.is-underline {
    color: var(--fs-color-alert) !important;
}


.button,
input[type=button].button,
input[type=reset].button,
input[type=submit],
input[type=submit].button,
.button.alt,
.button.checkout,
.checkout-button,
.secondary {
    background-color: var(--fs-color-alert) !important;
}

.quantity input[type=button].is-form {
    background-color: var(--fs-color-primary) !important;
}


/* #fanpage-vr .phone-vr-circle-fill,
#zalo-vr .phone-vr-circle-fill,
.phone-vr-circle-fill {
    background-color: var(--fs-color-alert) !important;
}

#fanpage-vr .phone-vr-img-circle,
#zalo-vr .phone-vr-img-circle,
.phone-vr-img-circle {
    background-color: var(--fs-color-primary) !important;
} */

/* BODY */
#content,
#masthead {
    background-color: var(--fs-color-primary);
}

/* HEADER */
.header-top {
    background-color: var(--fs-color-alert) !important;
}

#top-bar {
    padding: .5rem 0 !important;
}

#top-bar .flex-col:not(.flex-center),
#top-bar .flex-row>.flex-col:not(.flex-center),
#top-bar .nav-row>.flex-col:not(.flex-center) {
    flex: none !important;
}

#top-bar .flex-col.flex-center {
    min-width: 15rem !important;
}

#top-bar .header-search-form-wrapper form {
    color: var(--fs-color-success) !important;
}

#top-bar .header-search-form-wrapper form>.flex-row>.flex-col:not(.flex-center):first-child {
    flex: 1 !important;
}

#top-bar .searchform .search-field {
    height: 30px;
    background-color: #fff3f3 !important;
    color: var(--fs-color-success) !important;
    border: 0 none rgb(255, 255, 255);
    border-radius: 5px;
    min-width: 400px;
}

#top-bar .searchform .search-field::placeholder {
    color: var(--fs-color-success) !important;
    opacity: 1 !important;
}

#top-bar .searchform .search-field::-webkit-input-placeholder {
    color: var(--fs-color-success) !important;
    opacity: 1 !important;
}

.header:not(.transparent) .header-nav-main.nav>li {
    margin: 0 .75rem !important;
}

.header:not(.transparent) .header-nav-main.nav>li>a {
    color: var(--fs-color-success);
    font-size: .9em !important;
    text-transform: capitalize !important;
    font-weight: 600 !important;
    font-style: normal;
}

.header:not(.transparent) .header-nav-main.nav>li>a:hover,
.header:not(.transparent) .header-nav-main.nav>li.active>a,
.header:not(.transparent) .header-nav-main.nav>li.current>a,
.header:not(.transparent) .header-nav-main.nav>li>a.active,
.header:not(.transparent) .header-nav-main.nav>li>a.current {
    color: var(--fs-color-alert);
}

/*  */
#content {
    background-color: var();
}

/* ==========================================================================
   Product Brands Grid Component
   ========================================================================== */
.k-tech-brands-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.k-tech-brands-grid .brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 2;
    border: 1px solid #efefef;
    border-radius: 4px;
    background-color: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    border: 1px solid var(--fs-color-alert);

}



.k-tech-brands-grid .brand-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.k-tech-brands-grid .brand-item img {
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.k-tech-brands-grid .brand-item .brand-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-color-success);
    text-align: center;
    line-height: 1.2;
}

/* Responsive Grid Breakpoints */
@media (max-width: 820px) {
    .k-tech-brands-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }

}

@media (max-width: 768px) {
    .k-tech-brands-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .k-tech-brands-grid .brand-item {
        padding: 6px 8px;
    }
}

@media (max-width: 430px) {
    .k-tech-brands-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .k-tech-brands-grid .brand-item {
        padding: 4px 6px;
    }


}

/* ==========================================================================
   Product Loop SMALL
   ========================================================================== */

.badge.badge-circle {
    width: auto !important;
    height: auto !important;
}

.badge.badge-circle .badge-inner.on-sale {
    padding: .375rem .75rem !important;
    background-color: var(--fs-color-alert) !important;
}

.product-small .box-text .price {
    line-height: 1.2;
}

/* Add - Buy now */
.k-tech-loop-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
}

.k-tech-loop-actions a.button,
.k-tech-loop-actions a.k-tech-btn-detail,
.k-tech-loop-actions a.k-tech-btn-buynow {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    line-height: 1.2;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Nút Chi tiết (Màu Đen) */
.k-tech-loop-actions a.k-tech-btn-detail {
    background-color: transparent !important;
    color: var(--fs-color-success) !important;
    border: 1px solid var(--fs-color-alert) !important;
}

/* Nút Mua ngay (Màu Đỏ) */
.k-tech-loop-actions a.k-tech-btn-buynow {
    background-color: var(--fs-color-success) !important;
    color: var(--fs-color-alert) !important;
}

/* ==========================================================================
   Product Details
   ========================================================================== */
.price-wrapper .price bdi,
bdi {
    color: var(--fs-color-alert);
}

del bdi {
    color: var(--price-original-color);
}


.product-summary .ux-product-brands a {
    min-height: auto !important;
}

/* ==========================================================================
   Equal Height Product Cards & Bottom Aligned Buttons
   ========================================================================== */
.products .col,
.products .product-small,
.product-small.col {
    display: flex;
}

.product-small .box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--fs-color-secondary);
    border-radius: 0.5rem;
    box-shadow: 0 0px 4px var(--fs-color-alert);
}

.product-small .box-image {
    border-radius: .5rem .5rem 0 0;
    width: 100%;
}

.product-small .box-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    padding: .5rem;
}

/* Đẩy khoảng trống dư nằm ở DƯỚI TITLE và TRÊN GIÁ */
.product-small .box-text .title-wrapper,
.product-small .box-text .name,
.product-small .box-text p.name {
    margin-bottom: auto !important;
    padding-bottom: 8px;
}

.product-small .box-text .price-wrapper,
.product-small .box-text .price {
    margin-top: 0;
    margin-bottom: 4px;
}

.product-small .box-text .k-tech-loop-actions {
    margin-top: 0;
}

/* SHOPPING */
.ux-cart-coupon a.primary.is-outline,
.ux-cart-coupon .ux-cart-coupon .is-form,
.ux-cart-coupon button.is-form,
.ux-cart-coupon button[type=submit].is-form {
    color: #fff !important;
}

/* FOOTER */
#footer,
.absolute-footer {
    background-color: #333 !important;
}

#footer h2,
#footer strong,
#footer p,
#footer span {
    color: #f1f1f1 !important;
}

#footer strong,
#footer p,
#footer span {
    font-size: 13px !important;
}

#footer .icon-box {
    align-items: center !important;
}

#footer .icon-box .icon-box-img img,
#footer .icon-box .icon-box-img svg {
    padding-top: 0;
}

#footer .icon-box .icon-box-text {
    padding-left: .5rem;
}

#footer .social-icons.follow-icons>a {
    background-color: #f1f1f1 !important;
    border-color: #f1f1f1 !important;
    margin-right: .5rem !important;
}

#footer .social-icons.follow-icons>a>i {
    color: #333 !important;
}

.custom-topbar {
    align-items: center;
}

.custom-topbar img {
    padding-top: 0 !important;
}

.custom-topbar .icon-box-text {
    padding-left: 0.5rem !important;
}

.absolute-footer {
    border-top: 1px solid #f1f1f1;
}

.absolute-footer>.container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.absolute-footer>.container::after {
    display: none !important;
}

img.absolute-image {
    width: 125px;
}

@media (max-width: 431px) {
    .product-small .box-text .price {
        line-height: 1.5;
    }
}