.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* WooCommerce ép "img { height:auto }" trên mọi trang .woocommerce-page,
   specificity cao hơn .h-10 nên logo header bị vỡ về kích thước gốc, gây
   tràn ngang trên mobile ở các trang shop/category/sản phẩm/giỏ hàng. */
.woocommerce-page header img.h-10 {
    height: 2.5rem;
    width: auto;
}

/* Form đánh giá sản phẩm (comment_form của WordPress tự bọc <p> quanh mỗi
   phần — bỏ margin mặc định vì khoảng cách đã được kiểm soát bằng Tailwind) */
.nt-review-form p { margin: 0; }
.nt-star-btn { line-height: 0; }

/* ---------- Trang Thanh toán ---------- */
.nt-checkout .form-row { margin: 0 0 16px; }
.nt-checkout .form-row-first,
.nt-checkout .form-row-last { width: 100%; float: none; }
@media (min-width: 640px) {
    .nt-checkout .form-row-first { width: calc(50% - 8px); float: left; }
    .nt-checkout .form-row-last { width: calc(50% - 8px); float: right; }
}
.nt-checkout label {
    display: block;
    font-size: 14px;
    color: #5b6472;
    margin-bottom: 6px;
}
.nt-checkout label .required {
    color: #fb363d;
    text-decoration: none;
}
.nt-checkout .input-text,
.nt-checkout select,
.nt-checkout textarea {
    width: 100%;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nt-checkout .input-text:focus,
.nt-checkout select:focus,
.nt-checkout textarea:focus {
    outline: none;
    border-color: #0f62c7;
    box-shadow: 0 0 0 3px rgba(15, 98, 199, .15);
}
.nt-checkout .woocommerce-billing-fields h3,
.nt-checkout .woocommerce-additional-fields h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1f27;
    margin-bottom: 16px;
}
.nt-checkout .woocommerce-additional-fields { margin-top: 24px; }
.nt-checkout .woocommerce-checkout-review-order-table { width: 100%; font-size: 14px; }
.nt-checkout .woocommerce-checkout-review-order-table th,
.nt-checkout .woocommerce-checkout-review-order-table td {
    padding: 10px 0;
    border-bottom: 1px solid #e2e6ec;
    text-align: left;
}
.nt-checkout .woocommerce-checkout-review-order-table .product-name { color: #1a1f27; }
.nt-checkout .woocommerce-checkout-review-order-table tfoot th,
.nt-checkout .woocommerce-checkout-review-order-table tfoot td { border-bottom: none; }
.nt-checkout .woocommerce-checkout-review-order-table .order-total th,
.nt-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-size: 16px;
    font-weight: 700;
    color: #0f62c7;
}
.nt-checkout #payment { background: #f5f7fa; border-radius: 10px; padding: 16px; margin-top: 16px; }
.nt-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
.nt-checkout #payment li { padding: 8px 0; font-size: 14px; }
.nt-checkout #place_order {
    width: 100%;
    background: #0f62c7;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    padding: 14px;
    border-radius: 10px;
    border: none;
    margin-top: 16px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.nt-checkout #place_order:hover { background: #084298; }
.nt-checkout .woocommerce-form-coupon-toggle,
.nt-checkout .woocommerce-form-coupon { margin-bottom: 16px; }
.nt-checkout .woocommerce-form-coupon .form-row { display: inline-block; width: auto; margin-right: 8px; }

/* ---------- Trang chi tiết sản phẩm: tabs (Mô tả / Thông tin bổ sung / Đánh giá) ---------- */
.nt-product-tabs-wrap .woocommerce-tabs { background: #fff; border: 1px solid #e2e6ec; border-radius: 12px; overflow: hidden; }
.nt-product-tabs-wrap ul.tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0 8px;
    border-bottom: 1px solid #e2e6ec;
    background: #fff;
}
.nt-product-tabs-wrap ul.tabs li { margin: 0; }
.nt-product-tabs-wrap ul.tabs li a {
    display: block;
    padding: 16px 18px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #5b6472;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nt-product-tabs-wrap ul.tabs li a:hover { color: #0f62c7; }
.nt-product-tabs-wrap ul.tabs li.active a { color: #0f62c7; border-bottom-color: #0f62c7; }
.nt-product-tabs-wrap .woocommerce-Tabs-panel { padding: 24px; }
.nt-product-tabs-wrap .woocommerce-Tabs-panel h2 { font-size: 16px; font-weight: 700; color: #1a1f27; margin-bottom: 12px; }
.nt-product-tabs-wrap table.shop_attributes { width: 100%; border-collapse: collapse; }
.nt-product-tabs-wrap table.shop_attributes th,
.nt-product-tabs-wrap table.shop_attributes td {
    padding: 10px 12px;
    border: 1px solid #e2e6ec;
    font-size: 14px;
    text-align: left;
}
.nt-product-tabs-wrap table.shop_attributes th { background: #f5f7fa; font-weight: 600; width: 30%; }

/* ---------- Trang chi tiết sản phẩm: bộ đếm số lượng (- 1 +) ---------- */
.nt-qty-stepper .qty {
    width: 52px !important;
    height: 36px;
    border: none !important;
    border-left: 1px solid #e2e6ec !important;
    border-right: 1px solid #e2e6ec !important;
    border-radius: 0 !important;
    text-align: center;
    font-size: 14px;
    -moz-appearance: textfield;
}
.nt-qty-stepper .qty::-webkit-outer-spin-button,
.nt-qty-stepper .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Nút "Thêm vào giỏ hàng" lớn trên trang chi tiết sản phẩm — đổi từ màu tím
   mặc định của WooCommerce sang màu xám trung tính, bo góc gọn hơn */
.single_add_to_cart_button.button.alt {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}
.single_add_to_cart_button.button.alt:hover {
    background-color: #374151 !important;
    border-color: #374151 !important;
}

/* Phân trang (danh mục sản phẩm tự dựng .nt-pagination + trang Shop/blog mặc
   định của WooCommerce/WordPress .woocommerce-pagination / .pagination) */
.nt-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers,
.pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nt-pagination .page-numbers li,
.woocommerce-pagination .page-numbers li { display: flex; }
.nt-pagination .page-numbers a,
.nt-pagination .page-numbers span,
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span,
.pagination .nav-links a,
.pagination .nav-links span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #1a1f27 !important;
    background: #fff !important;
    border: 1px solid #e2e6ec !important;
    text-decoration: none;
    transition: all .15s ease;
}
.nt-pagination .page-numbers a:hover,
.woocommerce-pagination .page-numbers a:hover,
.pagination .nav-links a:hover {
    border-color: #0f62c7 !important;
    color: #0f62c7 !important;
}
.nt-pagination .page-numbers .current,
.woocommerce-pagination .page-numbers .current,
.pagination .nav-links .current {
    background: #0f62c7 !important;
    border-color: #0f62c7 !important;
    color: #fff !important;
}
.nt-pagination .page-numbers .dots,
.woocommerce-pagination .page-numbers .dots,
.pagination .nav-links .dots {
    border: none;
    background: transparent;
}
.woocommerce-pagination { margin-top: 2.5rem; display: flex; justify-content: center; }

/* Trang Shop mặc định của WooCommerce (không có template riêng): style lại
   tiêu đề + dropdown sắp xếp cho đồng bộ, ẩn dòng đếm kết quả mặc định để
   gọn gàng (giống chủ trương bỏ dòng "Tìm thấy X sản phẩm" ở trang danh mục) */
h1.woocommerce-products-header__title.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1f27;
    margin-bottom: 1.5rem;
}
.woocommerce-result-count { display: none; }
.woocommerce-ordering {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}
select.orderby,
.woocommerce-ordering select {
    font-size: 13px;
    padding: 6px 26px 6px 10px;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    background-color: #fff;
    color: #1a1f27;
    height: auto;
    min-height: unset;
    line-height: 1.3;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* Breadcrumb Rank Math — đồng bộ màu chữ/kích thước với thiết kế theme */
.nt-breadcrumb .rank-math-breadcrumb,
.nt-breadcrumb .rank-math-breadcrumb p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
}
.nt-breadcrumb .rank-math-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.nt-breadcrumb .rank-math-breadcrumb a:hover { color: #0f62c7; }
.nt-breadcrumb .rank-math-breadcrumb .separator { margin: 0 2px; opacity: .6; }
.nt-breadcrumb .rank-math-breadcrumb .last { color: #1a1f27; font-weight: 500; }

/* Nút nổi (Chat Zalo, Gọi ngay, Nhận báo giá, Lên đầu trang): viền mờ + box-shadow
   rõ ràng để không bị lẫn màu khi đè lên nền tối (vd. footer bg-secondary) hoặc nền sáng */
.nt-fab {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.18);
    outline: 1px solid rgba(255, 255, 255, 0.18);
    outline-offset: -1px;
}

button, a { transition: transform .12s ease, background-color .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease, border-color .2s ease; }
button:active { transform: scale(0.97); }
/* #nt-hero-prev/#nt-hero-next dùng transform để canh giữa theo chiều dọc
   (top:50% + translateY(-50%)); vì "transform" chỉ nhận 1 giá trị, rule
   "button:active" ở trên (độ ưu tiên cao hơn class .-translate-y-1/2) sẽ
   XÓA MẤT translateY(-50%) khi bấm, khiến nút bị thụt lệch xuống dưới. */
#nt-hero-prev:active,
#nt-hero-next:active {
    transform: translateY(-50%) scale(0.97);
}

/* ---------- Hero slider: chuyển slide mượt bằng crossfade thay vì ẩn/hiện đột ngột ---------- */
.nt-hero-slide {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
.nt-hero-slide.nt-fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Mobile nav */
#nt-mobile-nav.nt-open { display: flex; }

/* Category dropdown */
#nt-cat-dropdown.nt-open { display: block; }

/* Line clamp fallback */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- WooCommerce product grid ----------
   WooCommerce tự thêm class "columns-4" vào <ul class="products"> để đánh dấu
   số cột. Tailwind (CDN, JIT) lại nhận diện "columns-4" là utility CSS Columns
   của chính nó (columns: 4 — bố cục kiểu báo in) và ghi đè lên, phá vỡ hoàn
   toàn hệ thống float-grid mặc định của WooCommerce (card bị dồn cột, đè chữ).
   Vô hiệu hóa toàn bộ float/columns mặc định và thay bằng CSS Grid riêng. */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    columns: unset !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
@media (min-width: 640px) {
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
/* WooCommerce chèn clearfix (content:" "; display:table) qua ::before/::after
   trên chính <ul class="products"> — box này KHÔNG display:none nên nghiễm
   nhiên trở thành 1 "ô lưới ẩn" chiếm mất ô đầu tiên (hàng 1 cột 1) của CSS
   Grid, đẩy toàn bộ sản phẩm lệch 1 ô và item cuối rớt xuống hàng mới thừa.
   Bỏ hẳn clearfix này vì Grid không cần đến nó. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}

/* ---------- Giá sản phẩm trong product-card: đen + font-weight 500;
   giá khuyến mãi (ins) màu đỏ không gạch chân; giá gốc (del) gạch ngang xám ---------- */
.nt-product-price,
.nt-product-price bdi {
    color: #1a1f27;
    font-weight: 500;
    font-size: 15px;
}
.nt-product-price del,
.nt-product-price del bdi {
    color: #9aa1ab;
    font-weight: 400;
    text-decoration: line-through;
    opacity: 1;
    font-size: 13px;
}
.nt-product-price ins,
.nt-product-price ins bdi {
    color: #ef4444;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Giá sản phẩm ở trang chi tiết (cỡ chữ lớn): đen + giá khuyến
   mãi màu đỏ, bỏ gạch chân mặc định của thẻ <ins> ---------- */
.nt-product-price-lg,
.nt-product-price-lg bdi {
    color: #1a1f27;
}
.nt-product-price-lg del,
.nt-product-price-lg del bdi {
    color: #9aa1ab;
    font-weight: 400;
    font-size: 0.55em;
    text-decoration: line-through;
    opacity: 1;
}
.nt-product-price-lg ins,
.nt-product-price-lg ins bdi {
    color: #ef4444;
    text-decoration: none;
}

/* ---------- WooCommerce add-to-cart button (dùng chung template-parts/product-card.php)
   Bỏ nền đặc, dùng viền mờ nhẹ nhàng thay vì mảng màu.
   !important vì trang Shop/Danh mục có body.woocommerce khiến selector mặc
   định ".woocommerce a.button" (2 lớp + 1 thẻ) có độ ưu tiên CAO HƠN selector
   2 lớp thường của theme, ghi đè mất màu/viền đã tùy biến. ---------- */
.nt-add-to-cart-wrap .add_to_cart_button,
.nt-add-to-cart-wrap .button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    max-width: 100%;
    text-align: center;
    background: transparent !important;
    border: 1px solid rgba(15, 98, 199, 0.25) !important;
    color: #0f62c7 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.nt-add-to-cart-wrap .add_to_cart_button span,
.nt-add-to-cart-wrap .button {
    text-overflow: ellipsis;
    overflow: hidden;
}
@media (max-width: 480px) {
    .nt-add-to-cart-wrap .add_to_cart_button,
    .nt-add-to-cart-wrap .button {
        font-size: 12px !important;
        padding: 7px 4px !important;
        gap: 4px;
    }
    .nt-add-to-cart-wrap .add_to_cart_button::before {
        font-size: 15px !important;
    }
}
.nt-product-card:hover .nt-add-to-cart-wrap .add_to_cart_button,
.nt-product-card:hover .nt-add-to-cart-wrap .button {
    background: #0f62c7 !important;
    border-color: #0f62c7 !important;
    color: #fff !important;
}
.nt-add-to-cart-wrap .add_to_cart_button::before {
    font-family: 'Material Symbols Outlined';
    content: 'shopping_cart';
    font-size: 18px;
    line-height: 1;
}
.nt-add-to-cart-wrap .added_to_cart {
    display: block;
    text-align: center;
    font-size: 12px;
    margin-top: 6px;
    color: #16a34a;
}
.nt-add-to-cart-wrap .add_to_cart_button.loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nt-spin .6s linear infinite;
}
@keyframes nt-spin { to { transform: rotate(360deg); } }

/* Hero slider */
.nt-hero-slide { transition: opacity .4s ease; }

/* Back to top visibility toggled via JS */
#nt-back-to-top.nt-visible { display: flex; }

@media (max-width: 767px) {
    #hero .max-w-lg { max-width: 100%; }
}