/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.nma-footer .list-icon-social .soc-shopee    { background: #ee4d2d; }
.nma-social .list-icon-social .soc-shopee    { background: #ee4d2d; }
/* ===== Google Fonts: Google Sans (chữ thường) + Quicksand (tiêu đề) ===== */
:root {
	--nma-font-body: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--nma-font-heading: 'Quicksand', 'Google Sans', system-ui, sans-serif;
}
body .nav>li.html {
    font-size: 16px;
}
/* Chữ nội dung / UI toàn site */
body,
button, input, select, optgroup, textarea,
.button, .nav, .menu, .ux-menu-link,
p, a, li, td, th, label, blockquote {
	font-family: var(--nma-font-body) !important;
}

/* Tiêu đề */
h1, h2, h3, h4, h5, h6,
.heading-font,
.entry-title, .product-title, .widget-title,
.is-xxlarge, .is-xlarge, .is-large {
	font-family: var(--nma-font-heading) !important;
}

.item.hotline {
    line-height: 1.35;
    display: none;
  }
  .item.hotline i {
    font-size: 30px;
    margin-right: 7px;
  }
  .item.hotline .text-muted {
    font-size: 12px;
    text-decoration: underline;
    font-weight: 500;
  }
  .item.hotline a {
    letter-spacing: -0.25px;
  }
  .header-right .item {
    margin-left: 20px;
  }
  .header a {
    text-decoration: none !important;
  }
  @media screen and (min-width: 768px) {
    .item.hotline {
      display: block;
    }
  }
  @media screen and (min-width: 992px) {
    .header-right .item {
      margin-left: 40px;
    }
  }
  .fa-mobile:before {
    content: "\f3ce";
  }


input#woocommerce-product-search-field-0 {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #444a57;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    border-color: var(--primary-color);
    background-color: #eeeeee26;
}

ul.header-nav.header-nav-main.nav.nav-left.nav-uppercase {
    justify-content: center;
}
.text-muted {
    color: #000;
    margin-bottom: 5px;
}
i.icon-search {
    color: #000 !important;
}
input#woocommerce-product-search-field-0::placeholder {
    color: #000 !important;
}
button.ux-search-submit.submit-button.secondary.button.icon.mb-0 {
    background: transparent !important;
    box-shadow: none !important;
}

.header-vertical-menu__fly-out .nav-vertical-fly-out>li.menu-item>a {
    font-weight: bold;
    color: var(--primary-color);
}

/* Mở menu dọc "Danh mục sản phẩm" khi hover (không cần click) */
@media (hover: hover) and (min-width: 850px) {
    .header-vertical-menu:hover .header-vertical-menu__fly-out {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
    }
}

/* Marker (dấu đầu dòng) của các thẻ li về màu đen */
li::marker {
    color: #000;
}

/* Nền #main/#wrapper màu #f0f0f0 (trừ trang chủ) */
body:not(.home) #main,
body:not(.home) #wrapper {
    background-color: #f0f0f0;
}

/* Breadcrumbs Rank Math chèn ở đầu Trang */
.nma-breadcrumbs {
    margin-bottom: 15px;
    font-size: 14px;
}

/* ===== CUSTOM ELEMENT: Tiêu đề khu vực (nma_section_title) ===== */
.nma-section-title {
    position: relative;
    margin: 0 0 28px;
    font-family: var(--nma-font-heading); /* đồng bộ font tiêu đề toàn web */
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #353849;
}
.nma-section-title:after {
    content: "";
    display: block;
    width: 26px;
    margin: 4px 0 0;
    border-bottom: 3px solid var(--primary-color); /* màu chính của theme */
    opacity: 0.8;
}
.nma-section-title.is-center {
    text-align: center;
}
.nma-section-title.is-center:after {
    margin-left: auto;
    margin-right: auto;
}
.nma-section-title.is-right {
    text-align: right;
}
.nma-section-title.is-right:after {
    margin-left: auto;
}


.danh-muc-san-pham .product-category .col-inner:hover {
    border-color: rgba(193, 33, 135, .6);
    -webkit-box-shadow: 0 5px 20px -5px rgba(193, 33, 135, .15);
    box-shadow: 0 5px 20px -5px rgba(193, 33, 135, .15);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}
.danh-muc-san-pham p.is-xsmall.uppercase.count {
    display: none;
}
.danh-muc-san-pham .product-category .col-inner {
    border: 1px solid rgba(193, 33, 135, .15);
    padding: 5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: block;
    border-color: transparent;
    padding: 10px;
}

.banner-phu img{
      -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.banner-phu img:hover{
  -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .25);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .25);
}

/* ===== CUSTOM: Box sản phẩm (override woocommerce/content-product.php) ===== */
/* Reset wrapper .col của Flatsome để dùng layout card riêng */
.products .product-small.col > .nma-product { margin: 0; }

a.nma-product,
.nma-product {
    position: relative;
    display: block;
    height: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #fff;
    color: #353849;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Ảnh vuông */
.nma-product .thumb-res {
    overflow: hidden;
    display: block;
    position: relative;
    margin-bottom: 14px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.nma-product .thumb-res.square { padding-bottom: 100%; }
.nma-product .thumb-res:before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100;
    pointer-events: none;
    transition: all 0.4s ease;
}
.nma-product .thumb-res img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    transition: all 0.4s ease;
}
.nma-product:hover .thumb-res:before { background-color: rgba(255, 255, 255, .25); }

/* Ribbon "Hot" */
.nma-product .ribbon {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 50;
    pointer-events: none;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: -.5px;
    font-weight: 700;
    --w: 34px;
}
.nma-product .ribbon span {
    margin-left: 1px;
    width: var(--w);
    flex: 0 0 var(--w);
    min-height: 18px;
    padding: 5px 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    position: relative;
}
.nma-product .ribbon span:after {
    content: "";
    width: 0;
    height: 0;
    border: calc(var(--w) / 2) solid #ccc;
    border-bottom: 7px solid transparent !important;
    position: absolute;
    right: 0; bottom: -7px; left: 0;
    z-index: -1;
}
.nma-product .ribbon .hot { background: #dd0b33; }
.nma-product .ribbon .hot:after { border-color: #dd0b33; }

/* Thông tin */
.nma-product .info { padding-bottom: 8px; }
.nma-product .name {
    font-size: 15px;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 40px;
    letter-spacing: -.25px;
    margin-bottom: 15px;
    color: #353849;
}
.nma-product .price {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e30613; /* giá hiện tại: đỏ nổi bật */
}
/* Giá hiện tại (cả khi giảm giá lẫn khi chỉ có 1 giá): đỏ, đậm, to */
.nma-product .price ins,
.nma-product .price .woocommerce-Price-amount {
    text-decoration: none;
    color: #e30613;
}
.nma-product .price ins { font-weight: 800; }
/* Giá gốc: nhỏ, xám, gạch ngang để tương phản (specificity cao hơn nên thắng) */
.nma-product .price del {
    color: #9aa0ad;
    font-weight: 400;
    margin-left: 6px;
    font-size: 72%;
}
.nma-product .price del .woocommerce-Price-amount { color: #9aa0ad; }
.nma-product .price .woocommerce-Price-currencySymbol { margin-left: 2px; }

/* % tiết kiệm — dùng màu chính của theme */
.nma-product .text-success { color: var(--primary-color); }
.nma-product .fw-bold { font-weight: 700; }
.nma-product .font-15 { font-size: 15px; }
.nma-product .letter-spacing-n075 { letter-spacing: -.075px; }

/* Nhãn hết hàng */
.nma-product .out-of-stock-label {
    position: absolute;
    left: 0; bottom: 0;
    z-index: 60;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Hover card */
.nma-product:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 20px -5px color-mix(in srgb, var(--primary-color) 15%, transparent);
    transform: translateY(-1.5px);
}


@media screen and (min-width: 1200px) {
    .nma-product .name { font-size: 16px; max-height: 42px; }
    .nma-product .price { font-size: 19px; }
}

.nma-product .name {
    font-weight: bold;
    color: #000;
}

.nma-product .price {
    margin-bottom: 10px;
}

.nma-product .price del {
    margin-left: 0px;
}

/* ===== CUSTOM ELEMENT: Quy trình các bước (nma_steps) ===== */
.nma-steps {
    --font-size: 15px;
    --line-color: var(--primary-color);
    position: relative;
    margin-bottom: 1.5rem;
    counter-reset: item; /* khởi tạo bộ đếm số thứ tự */
}
/* Đường nối ngang giữa các bước (chỉ màn ≥768px) */
@media (min-width: 768px) {
    .nma-steps:before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        height: 2px;
        margin: auto;
        background: var(--line-color);
    }
}
/* Lưới: 3 cột mobile, 6 cột desktop */
.nma-steps .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -.5rem;
    margin-left: -.5rem;
}
.nma-steps .col {
    flex: 0 0 auto;
    width: 33.3333%;
    padding: 15px .5rem 0;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .nma-steps .col { width: 16.6667%; }
}
@media (min-width: 1200px) {
    .nma-steps .row { margin-right: -.75rem; margin-left: -.75rem; }
    .nma-steps .col { padding-right: .75rem; padding-left: .75rem; }
}
/* Khối nội dung mỗi bước */
.nma-steps .block {
    position: relative;
    z-index: 1; /* nổi trên đường nối */
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    line-height: 1.5;
    font-size: var(--font-size);
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    padding: 18px 10px 10px;
}
/* Huy hiệu số thứ tự (tự tăng) */
.nma-steps .counter-item {
    position: absolute;
    top: -20px; right: 0; left: 0;
    margin: auto;
    width: 36px;
    height: 36px;
    line-height: 32px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}
.nma-steps .counter-item:before {
    counter-increment: item;
    content: counter(item);
}
@media (min-width: 992px) {
    .nma-steps { --font-size: 16px; }
    .nma-steps .block { padding: 18px 14px 14px; }
}

/* ===== CUSTOM ELEMENT: Khối giá trị nổi bật (nma_features) ===== */
.nma-features {
    position: relative;
    margin-bottom: 1.5rem;
    counter-reset: item; /* khởi tạo bộ đếm cho số watermark */
}
/* Lưới: 1 cột mobile, 2 cột desktop */
.nma-features .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -.5rem;
    margin-left: -.5rem;
}
.nma-features .col {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 .5rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .nma-features .row { margin-right: -.75rem; margin-left: -.75rem; }
    .nma-features .col { width: 50%; padding: 0 .75rem; margin-bottom: 1.5rem; }
}
/* Khối nội dung */
.nma-features .block {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 3%, #fff);
}
.product-category.col {
    padding-bottom: 0px;
}
@media (min-width: 992px) {
    .nma-features .block { padding: 25px; }
}
.san-pham .product-small {
    padding-bottom: 0px;
}
body.home .is-divider {
    display: none;
}
.tin-tuc .col-inner .box:hover .box-image:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    content: "";
    pointer-events: none;
    z-index: 100;
    background-color: rgba(255, 255, 255, .25);
}
/* Số thứ tự mờ làm watermark (tự tăng) */
.nma-features .counter-item {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    z-index: -1;
    line-height: 1.15;
    font-size: 145px;
    font-weight: 700;
    color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    pointer-events: none;
}
.nma-features .counter-item:before {
    counter-increment: item;
    content: counter(item);
}
@media (min-width: 992px) {
    .nma-features .counter-item { line-height: 1; }
}
/* Tiêu đề */
.nma-features .tt-xs {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.3px;
    text-transform: uppercase;
    color: var(--primary-color);
}
@media (min-width: 1200px) {
    .nma-features .tt-xs { font-size: 1.5rem; }
}
/* Nội dung */
.nma-features .desc { line-height: 1.5; }
.nma-features .desc > :last-child { margin-bottom: 0; }

/* ===== CUSTOM ELEMENT: Lưới danh mục (nma_cate_grid) ===== */
/* Số cột do người dùng chỉnh trong builder qua các biến --cols / --cols-md / --cols-lg */
.nma-cate-grid {
    --cols: 2;     /* mobile */
    --cols-md: 4;  /* tablet ≥768px */
    --cols-lg: 6;  /* PC ≥992px */
    --thumb-w: 60px;
    --thumb-h: 50px;
    --tt: 14px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.25rem;
}
.nma-cate-grid .col {
    flex: 0 0 auto;
    width: calc(100% / var(--cols));
    padding: .25rem;
}
@media (min-width: 768px) {
    .nma-cate-grid .col { width: calc(100% / var(--cols-md)); }
}
@media (min-width: 992px) {
    .nma-cate-grid {
        --thumb-w: 100px;
        --thumb-h: 100px;
        --tt: 15px;
        margin: 0 -.5rem;
    }
    .nma-cate-grid .col { width: calc(100% / var(--cols-lg)); padding: .5rem; }
}
@media (min-width: 1400px) {
    .nma-cate-grid {
        --thumb-w: 120px;
        --thumb-h: 110px;
        --tt: 16px;
    }
}
/* Khối danh mục */
.nma-cate-grid .block {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
    transition: all .4s ease;
}
/* Ảnh */
.nma-cate-grid .thumb-res {
    overflow: hidden;
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: var(--thumb-w);
    height: var(--thumb-h);
    margin: 0 10px 0 0;
    background-position: center center;
    background-size: cover;
}
.nma-cate-grid .thumb-res:before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100;
    pointer-events: none;
    transition: all .4s ease;
}
.nma-cate-grid .thumb-res img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    transition: all .4s ease;
}
.nma-cate-grid .block:hover .thumb-res:before { background-color: rgba(255, 255, 255, .25); }
/* Tên danh mục */
.nma-cate-grid .info {
    font-size: var(--tt);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.25px;
}
.nma-cate-grid .info a { color: inherit; text-decoration: none; }
/* Link phủ toàn khối */
.nma-cate-grid .stretched-link:after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
}
/* Hover */
.nma-cate-grid .block:hover {
    border-color: color-mix(in srgb, var(--primary-color) 60%, transparent);
    box-shadow: 0 5px 20px -5px color-mix(in srgb, var(--primary-color) 15%, transparent);
    transform: translateY(-2px);
}
.nma-cate-grid .block:hover .info { color: var(--primary-color); }
/* Desktop: ảnh trên, chữ dưới căn giữa */
@media (min-width: 992px) {
    .nma-cate-grid .block {
        display: block;
        border-color: transparent;
        padding: 10px;
    }
    .nma-cate-grid .thumb-res { margin: 0 auto 10px; }
    .nma-cate-grid .info {
        text-align: center;
        padding-bottom: 5px;
    }
    .nma-cate-grid .info .stretched-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.footer-top .icon-box-img {
    height: 46px;
}

.footer-top .icon-box.featured-box.icon-box-left.text-left {
    display: flex;
    align-items: center;
}

.footer-top .icon-box-text.last-reset p {
    margin-bottom: 0px;
}

/* ===== CUSTOM ELEMENT: Footer (nma_footer) ===== */
/* --- Thanh đăng ký --- */
.nma-footer .footer-fm {
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}
@media (min-width: 768px) {
    .nma-footer .footer-fm-flex {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}
.nma-footer .form-subs { padding: .5rem 0; }
@media (min-width: 768px) {
    .nma-footer .form-subs { margin-right: auto; }
    .nma-footer .form-subs .wpcf7 { min-width: 380px; }
}
/* Tiêu đề */
.nma-footer .tt {
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -.25px;
    text-transform: uppercase;
    color: #353849;
}
.nma-footer .form-subs .tt { color: var(--primary-color); }

/* Form CF7 kiểu gạch chân */
.nma-footer .form-subs .wpcf7-form p { position: relative; margin: 0; }
.nma-footer .form-subs .wpcf7-form { position: relative; }
.nma-footer .form-subs input.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: .5rem 110px .5rem 0;
    font-size: 16px;
    line-height: 1.4;
    color: #444a57;
    background: transparent;
    border: none;
    border-bottom: 2px solid #444a57;
    border-radius: 0;
}
.nma-footer .form-subs input.wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color);
}
.nma-footer .form-subs .wpcf7-submit {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 4px;
    border: none;
    background: transparent;
    color: #444a57;
    font-weight: 600;
    cursor: pointer;
}
.nma-footer .form-subs .wpcf7-submit:hover { color: var(--primary-color); }
.nma-footer .form-subs .wpcf7-spinner { display: none !important; }
.nma-footer .form-subs small { display: block; line-height: 1.5; margin-top: .5rem; color: #6c757d; }

/* --- Social --- */
.nma-footer .list-icon-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
@media (min-width: 768px) {
    .nma-footer .list-icon-social { margin-top: 0; }
}
.nma-footer .list-icon-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff !important;
    background: #d1d8ea;
    text-decoration: none !important;
    transition: transform .25s ease;
}
.nma-footer .list-icon-social a:hover { transform: translateY(-2px); }
.nma-footer .list-icon-social svg { width: 18px; height: 18px; fill: currentColor; }
/* Màu chính thức theo thương hiệu từng mạng xã hội.
   Thêm .list-icon-social để specificity cao hơn rule nền mặc định .list-icon-social a */
.nma-footer .list-icon-social .soc-facebook  { background: #1877f2; }
.nma-footer .list-icon-social .soc-zalo      { background: #0068ff; }
.nma-footer .list-icon-social .soc-email     { background: #ea4335; }
.nma-footer .list-icon-social .soc-youtube   { background: #ff0000; }
.nma-footer .list-icon-social .soc-instagram { background: #d82d7e; overflow: hidden; }
.nma-footer .list-icon-social .soc-instagram svg { width: 100%; height: 100%; }
.nma-footer .list-icon-social .soc-tiktok    { background: #010101; }
.nma-footer .list-icon-social .soc-shopee    { background: #ee4d2d; }

/* --- 4 cột --- */
.nma-footer .footer-ms { padding: 1rem 0; }
.nma-footer .footer-ms .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.75rem;
}
.nma-footer .col-ft {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 .75rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .nma-footer .col-ft { width: 50%; } }
@media (min-width: 992px) { .nma-footer .col-ft { width: 25%; } }
.nma-footer .tt-collaps {
    font-size: 17px;
    color: #232535;
    margin-bottom: 1rem;
}
/* Nội dung cột */
.nma-footer .ft-widget { line-height: 1.5; }
.nma-footer .ft-widget ul { list-style: none; margin: 0; padding: 0; }
.nma-footer .ft-widget li { margin-bottom: 10px; }
.nma-footer .ft-widget li a {
    position: relative;
    color: inherit;
    text-decoration: none;
}
.nma-footer .ft-widget li a::before {
    content: "\203A"; /* › */
    margin-right: 6px;
    color: var(--primary-color);
}
.nma-footer .ft-widget li a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--primary-color);
    transition: width .4s ease;
}
.nma-footer .ft-widget li a:hover::after { width: 100%; left: 0; }
.nma-footer .ft-widget iframe { max-width: 100%; border: 0; }

/* Tương thích element Menu (ux_menu) của Flatsome đặt trong cột footer */
.nma-footer .ft-widget .ux-menu { display: block; }
.nma-footer .ft-widget .ux-menu-link { display: block; }
.nma-footer .ft-widget .ux-menu-link a {
    position: relative;
    display: inline-block;
    padding: 4px 0;
    color: inherit;
}
.nma-footer .ft-widget .ux-menu-link a::before {
    content: "\203A"; /* › */
    margin-right: 6px;
    color: var(--primary-color);
}
.nma-footer .ft-widget .ux-menu-link a:hover { color: var(--primary-color); }
/* Tiện ích hay dùng trong nội dung cột */
.nma-footer .ft-widget .text-underline { text-decoration: underline; }
.nma-footer .ft-widget .fw-medium { font-weight: 500; }
.nma-footer .ft-widget .text-muted { color: #6c757d; }
.nma-footer .ft-widget .picon { position: relative; padding-left: 26px; margin-bottom: 7px; line-height: 1.4; }
.nma-footer .ft-widget .picon i { position: absolute; left: 0; top: 3px; opacity: .7; }

/* Placeholder form CF7 trong builder */
.nma-footer .nma-cf7-ph {
    padding: 10px 14px;
    border: 1px dashed #b9c0d4;
    border-radius: 6px;
    color: #6c757d;
    font-size: 13px;
}
nav.rank-math-breadcrumb p {
    margin-bottom: 0px;
}
.absolute-footer {
    display: none;
}
body:not(.home) #main .col-inner {
    padding: 15px;
    background: #fff;
}
/* ===== CUSTOM ELEMENT: Hộp Chat Zalo (nma_chat_support) ===== */
.nma-chat-support {
    display: block;
    overflow: hidden;
    margin: 10px 0 5px;
    padding: 10px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
    color: var(--primary-color);
    font-family: var(--nma-font-body);
}
.nma-chat-support span {
    float: left;
    margin-right: 10px;
    padding-top: 1px;
    font-weight: 700;
}
.nma-chat-support .chat-zalo {
    float: left;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: var(--zalo-icon) no-repeat center / 100% 100%;
}
/* Trạng thái chưa cấu hình (chỉ hiện trong builder) */
.nma-chat-support--empty {
    color: #8a6d3b;
    background: #fcf8e3;
    border-color: #faebcc;
    font-weight: 500;
    font-size: 13px;
}

/* ===== CUSTOM ELEMENT: Ghi chú đặt hàng (nma_order_notes) ===== */
.product-meta-ordernotes {
    clear: both;
    margin-top: 10px;
}
.product-meta-ordernotes p {
    margin: 0 0 10px !important;
}
.product-meta-ordernotes .call {
    padding-bottom: 6px;
    margin-bottom: 6px !important;
    border-bottom: 1px solid #ddd;
}
.product-meta-ordernotes .call a {
    font-weight: 500;
    color: var(--primary-color);
}

/* ===== CUSTOM ELEMENT: Giá bán sản phẩm (nma_product_price) ===== */
.product-meta-price {
    padding: 15px 0 0;
}
.product-meta-price .label {
    color: var(--primary-color);
    font-size: 100%;
    padding: 0;
    margin-bottom: 10px;
    margin-right: 5px;
    background: none;
    border-radius: 0;
    text-align: left;
    font-weight: 700;
}
.product-meta-price .price {
    color: #ed1c24;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    letter-spacing: -0.5px;
}
.product-meta-price .price .woocommerce-Price-amount { color: #ed1c24; }
.product-meta-price .old-price {
    text-decoration: line-through;
    margin-left: 5px;
    font-size: 15px;
    color: #777;
}
.product-meta-price p,
.product-meta-price .clred {
    margin: 10px 0 10px !important;
}
.product-meta-price .clred { color: #f00; }

/* ===== CUSTOM ELEMENT: Hộp cam kết + liên hệ (nma_support) ===== */
.nma-support-box { font-family: var(--nma-font-body); }

/* Hộp cam kết */
.nma-support-box .like-a-boss { margin-bottom: 10px; }
.nma-support-box .like-a-boss .title {
    line-height: 49px;
    padding-left: 15px;
    background: var(--primary-color);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
}
.nma-support-box .like-a-boss .title.has-logo {
    padding-left: 64px;
    background: var(--primary-color) var(--logo) no-repeat left center;
    background-size: 55px;
}
.nma-support-box .like-a-boss .content {
    padding: 15px;
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
}
.nma-support-box .like-a-boss ul { margin: 0; padding: 0; list-style: none; }
.nma-support-box .like-a-boss li {
    position: relative;
    padding-left: 25px;
    padding-bottom: 5px;
    line-height: 1.4;
    list-style: none;
}
.nma-support-box .like-a-boss li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nma-support-box .clweb { color: var(--primary-color); }

/* Hộp liên hệ */
.nma-support-box .product-contact {
    padding: 15px;
    background: #f5f5f5;
    color: var(--primary-color);
}
.nma-support-box .product-contact .title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 10px;
    color: #333;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}
.nma-support-box .product-contact .title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 2px;
    background: var(--primary-color);
}
.nma-support-box .product-contact p {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 10px;
    line-height: 1.45;
}
.nma-support-box .product-contact a { color: var(--primary-color); }
.nma-support-box .product-contact .ic {
    flex: 0 0 15px;
    width: 15px;
    height: 16px;
    margin-top: 2px;
}
.nma-support-box .product-contact .ic-red,
.nma-support-box .product-contact .clred { color: #f00; }
.nma-support-box .product-contact .fwb { font-weight: 700; }

.nma-support-box .like-a-boss ul li {

    margin-left: 0px !important;
}
/* ===== Tab sản phẩm WooCommerce (giống noithatductam) ===== */
.woocommerce-tabs.wc-tabs-wrapper { --tab-red: #ef1d2e; }
.woocommerce-tabs.wc-tabs-wrapper ul.tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li {
    display: inline-block;
    margin: 0 0 0 -3px;
    padding: 0;
    background: none;
    border: 0;
    position: relative;
}
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li:first-child { margin-left: 0; }
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li a {
    display: block;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 0;
    color: #fff !important;
    background: var(--tab-red) !important;
    border-top: 2px solid var(--tab-red);
    border-bottom: 2px solid var(--primary-color);
}
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li a i { margin-right: 6px; }
/* bỏ gạch chân/indicator mặc định của Flatsome */
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:before,
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:after { display: none !important; }
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li.active a,
.woocommerce-tabs.wc-tabs-wrapper ul.tabs li a:hover {
    color: #fff !important;
    background: var(--primary-color) !important;
    border-top-color: var(--primary-color);
}
/* Bỏ viền/nền wrapper .tab-panels của Flatsome — đưa viền lên từng panel như reference */
.woocommerce-tabs.wc-tabs-wrapper .tab-panels {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
/* Viền/đệm CHỈ áp cho panel đang mở → panel ẩn giữ height:0 của Flatsome,
   không sinh khoảng trắng tích lũy khi chuyển tab */
.woocommerce-tabs.wc-tabs-wrapper .tab-panels .panel.active {
    border: 1px solid #ddd;
    border-top-color: var(--primary-color);
    padding: 15px;
    margin-top: 0;
    border-radius: 0;
}
/* Nội dung tab "Chi tiết sản phẩm" */
.woocommerce-tabs #tab-description > h2:first-child { display: none !important; }
.woocommerce-tabs #tab-description h2 span,
.woocommerce-tabs #tab-description h3 span { color: var(--primary-color) !important; }
.woocommerce-tabs #tab-description figure { max-width: 100% !important; text-align: center; margin: 0 auto 1rem; }
.woocommerce-tabs #tab-description img { height: auto !important; margin: 0 auto 15px; display: block; }

@media (max-width: 767px) {
    /* Mobile: mỗi hàng 2 tab, rộng bằng nhau (50/50) */
    .woocommerce-tabs.wc-tabs-wrapper ul.tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;              /* khoảng cách đều giữa các tab */
    }
    .woocommerce-tabs.wc-tabs-wrapper ul.tabs li {
        display: block;
        flex: 1 1 calc(50% - 3px);  /* 2 cột đều nhau, trừ 1 nửa gap */
        max-width: calc(50% - 3px);
        margin: 0;
    }
    /* Nếu tổng số tab lẻ: tab cuối đứng một mình sẽ chiếm trọn hàng cho cân */
    .woocommerce-tabs.wc-tabs-wrapper ul.tabs li:last-child:nth-child(odd) {
        flex-basis: 100%;
        max-width: 100%;
    }
    .woocommerce-tabs.wc-tabs-wrapper ul.tabs li a {
        margin: 0;
        padding: 0 10px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ===== Đồng đều chiều cao ô sản phẩm (nền trắng bằng nhau trong slider/grid) ===== */
/* Card lấp đầy chiều cao ô, đẩy phần info xuống đáy để mọi card cân nhau */
a.nma-product,
.nma-product {
    display: flex;
    flex-direction: column;
}
.nma-product .thumb-res { flex: 0 0 auto; }
.nma-product .info { margin-top: auto; }
/* Luôn chừa đủ 2 dòng cho tên (dù tên chỉ 1 dòng) */
.nma-product .name {
    min-height: 40px; /* = 2 dòng */
}
/* Luôn chừa 1 dòng cho "Tiết kiệm %", kể cả sản phẩm không giảm giá (div rỗng) */
.nma-product .text-success {
    min-height: 21px;
}
@media screen and (min-width: 1200px) {
    .nma-product .name { min-height: 42px; }
}

.product-short-description {
    border: 1px solid #ddd;
    padding: 10px;
}
.product-short-description ul {
    padding-left: 0px !important;
  }


  i.icon-shopping-basket {
    color: #771711;
}

/* ============================================================
   SOCIAL ICONS
   ============================================================ */

/* --- 1. Màu icon social trong FOOTER (đúng thương hiệu) ---
   Thêm .list-icon-social để specificity cao hơn rule nền mặc định .list-icon-social a */
.nma-footer .list-icon-social .soc-facebook  { background: #1877f2; }
.nma-footer .list-icon-social .soc-zalo      { background: #0068ff; }
.nma-footer .list-icon-social .soc-email     { background: #ea4335; }
.nma-footer .list-icon-social .soc-youtube   { background: #ff0000; }
.nma-footer .list-icon-social .soc-instagram { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949, #d6249f, #285aeb); }
.nma-footer .list-icon-social .soc-tiktok    { background: #010101; }

/* --- 2. Khối [nma_social] dùng ngoài footer (vd Header/masthead) --- */
.nma-social .list-icon-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.nma-social .list-icon-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff !important;
    background: #d1d8ea;
    text-decoration: none !important;
    transition: transform .25s ease;
}
.list-icon-social {
    transform: translateX(170px);
}
.nma-social .list-icon-social a:hover { transform: translateY(-2px); }
.nma-social .list-icon-social svg { width: 16px; height: 16px; fill: currentColor; }
/* Màu chính thức từng nền tảng (specificity cao hơn rule nền mặc định) */
.nma-social .list-icon-social .soc-facebook  { background: #1877f2; }
.nma-social .list-icon-social .soc-zalo      { background: #0068ff; }
.nma-social .list-icon-social .soc-email     { background: #ea4335; }
.nma-social .list-icon-social .soc-youtube   { background: #ff0000; }
.nma-social .list-icon-social .soc-instagram { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949, #d6249f, #285aeb); }
.nma-social .list-icon-social .soc-tiktok    { background: #010101; }

/* --- 3. Đưa [nma_social] trong HEADER xuống dòng riêng, dưới Email + Điện thoại ---
   Dùng order để social thành mục CUỐI → nằm riêng 1 hàng, KHÔNG kéo giỏ hàng
   (cart-item) và header-divider xuống theo. */
#masthead ul.header-nav:has(> li.html_top_right_text) {
    flex-wrap: wrap;
    align-items: center;
}
#masthead li.html_top_right_text {
    order: 10;
    flex: 0 0 100%;
    margin-top: 6px;
}
/* Canh phải cho thẳng cột với 2 mục liên hệ ở trên (đổi flex-end → center / flex-start nếu muốn) */
#masthead li.html_top_right_text .list-icon-social { justify-content: center; }