/*
 * WooCommerce: hộp sản phẩm, lưới, trang sản phẩm, giỏ hàng, thanh toán.
 *
 * Viết theo đúng bộ tên class mà 92 template của site đang sinh ra.
 */

/* ==========================================================================
   Lưới sản phẩm
   ========================================================================== */

.products,
ul.products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.row-small {
	--xmn-gutter: 20px;
	--xmn-gutter-half: 10px;
}

.row-small > .col {
	margin-bottom: 0;
	padding: 0 9.8px 19.6px;
}

/* Số cột do template quyết định qua class large-columns-N */
.large-columns-1 > .col { flex-basis: 100%;     max-width: 100%;     }
.large-columns-2 > .col { flex-basis: 50%;      max-width: 50%;      }
.large-columns-3 > .col { flex-basis: 33.3333%; max-width: 33.3333%; }
.large-columns-4 > .col { flex-basis: 25%;      max-width: 25%;      }
.large-columns-5 > .col { flex-basis: 20%;      max-width: 20%;      }
.large-columns-6 > .col { flex-basis: 16.6667%; max-width: 16.6667%; }
.large-columns-7 > .col { flex-basis: 14.2857%; max-width: 14.2857%; }
.large-columns-8 > .col { flex-basis: 12.5%;    max-width: 12.5%;    }

@media screen and (max-width: 849px) {
	.medium-columns-1 > .col { flex-basis: 100%;     max-width: 100%;     }
	.medium-columns-2 > .col { flex-basis: 50%;      max-width: 50%;      }
	.medium-columns-3 > .col { flex-basis: 33.3333%; max-width: 33.3333%; }
	.medium-columns-4 > .col { flex-basis: 25%;      max-width: 25%;      }
}

@media screen and (max-width: 549px) {
	.small-columns-1 > .col { flex-basis: 100%; max-width: 100%; }
	.small-columns-2 > .col { flex-basis: 50%;  max-width: 50%;  }
}

/* ==========================================================================
   Hộp sản phẩm
   ========================================================================== */

.product-small.box,
.box {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
}

.box-image {
	position: relative;
	overflow: hidden;
}

.box-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s;
}

/* Kiểu rê chuột: ảnh phóng lên khi rê vào bất kỳ đâu trong hộp sản phẩm
   (cột có class has-hover), không chỉ riêng vùng ảnh. */
@media (hover: hover) {
	.has-hover:hover .image-zoom img,
	.image-zoom:hover img {
		transform: scale(1.1);
	}

	.image-fade_in_back .back-image {
		opacity: 0;
		transition: opacity 0.35s ease;
	}

	.image-fade_in_back:hover .back-image {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.box-image img,
	.has-hover:hover .image-zoom img,
	.image-zoom:hover img {
		transition: none;
		transform: none;
	}
}

.back-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Chữ trong hộp ---------- */

.box-text {
	padding: 0 5px 10px;
	font-size: 0.9em;
}

.box-text.text-center {
	text-align: center;
}

@media (max-width: 549px) {
	.box-text {
		font-size: 85%;
	}
}

.box-text .name,
.box-text .product-title {
	color: var(--xmn-text);
}

.box-text a {
	color: inherit;
	text-decoration: none;
}

.box-text a:hover {
	color: var(--xmn-primary);
}

/* ---------- Giá ----------
   Theo quy tắc gốc: cỡ chữ thừa hưởng từ khối chứa, giá trong hộp sản phẩm
   là khối riêng một dòng. Màu giá gốc/giá bán do CSS riêng của site quyết định. */

.price {
	line-height: 1;
}

.price-wrapper .price {
	display: block;
}

/* Phân trang sản phẩm: các nút chỉ cách nhau bên phải (hẹp hơn phân trang
   bài viết), như trang gốc. */
.woocommerce-pagination ul.links li {
	margin-left: inherit;
}

/* Số tiền: đậm, không xuống dòng giữa số và ký hiệu ₫. Giá gốc (gạch ngang)
   dùng cùng màu nhưng mờ đi và không đậm — site gốc hiển thị như vậy; màu
   #999 của site.css đặt trên thẻ del nên chỉ còn tác dụng cho đường gạch. */
span.amount {
	color: #111;
	font-weight: bold;
	white-space: nowrap;
}

del span.amount {
	margin-right: 0.3em;
	font-weight: normal;
	opacity: 0.6;
}

.product-info .price {
	margin: 0.5em 0;
	font-size: 1.5em;
	font-weight: bolder;
}

/* ---------- Nhãn giảm giá ----------
   Kiểu nhãn chung (.badge) nằm ở layout.css. CSS của site đang ẩn khối nhãn
   trên hộp sản phẩm (.badge-container). */

.badge-container {
	margin: 30px 0 0;
}

/* ---------- Nút thao tác nổi trên ảnh ----------
   Khối .image-tools đặt ở góc ảnh (class top/bottom/left/right trong
   grid.css); các nút bên trong hiện khi rê chuột vào hộp (.has-hover). */

.image-tools {
	position: absolute;
	padding: 10px;
}

.image-tools.bottom.left {
	padding-top: 0;
	padding-right: 0;
}

.image-tools.top.right {
	padding-bottom: 0;
	padding-left: 0;
}

.image-tools a:last-child {
	margin-bottom: 0;
}

.grid-tools {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	padding: 0 !important;
	white-space: nowrap;
	backface-visibility: hidden;
}

.show-on-hover,
.hover-slide-in {
	opacity: 0;
	filter: blur(0);
	pointer-events: none;
	transition: opacity 0.5s, transform 0.3s, max-height 0.6s, filter 0.6s;
}

.hover-slide-in {
	transform: translateY(100%) translateZ(0);
}

.has-hover:hover .show-on-hover,
.has-hover:hover .hover-slide-in {
	opacity: 1;
	pointer-events: inherit;
	transform: scale(1) translateZ(0) translateY(0) !important;
}

.out-of-stock-label {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 4;
	transform: translateY(-50%);
	padding: 6px;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 0.8rem;
	text-align: center;
}

/* ---------- Sao đánh giá ---------- */

.star-rating {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1em;
	overflow: hidden;
	color: var(--xmn-accent);
	font-family: serif;
	font-size: 0.8rem;
	line-height: 1;
	white-space: nowrap;
}

.star-rating::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--xmn-border);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--xmn-accent);
}

/* ==========================================================================
   Nút của WooCommerce dùng hệ nút chung trong style.css (.button, .alt…).
   Nút mua trên trang sản phẩm (.single_add_to_cart_button) là một ẢNH do
   CSS của site vẽ.
   ========================================================================== */

.added_to_cart {
	display: inline-block;
	margin-left: 8px;
	font-size: 0.75rem;
}

/* ==========================================================================
   Trang sản phẩm
   ========================================================================== */

.product-main {
	padding: 0;
}

.product-info {
	padding-top: 10px;
}

ul.products li,
.product-thumbnails li,
.product-tabs li,
.slick-dots li,
.woocommerce-mini-cart li,
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
}

.product-main .product-title,
.product_title {
	margin-bottom: 0.4em;
	color: var(--xmn-text);
}


.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ---------- Ô số lượng ----------
   Nút giảm, ô số, nút tăng dính liền nhau; nút dùng kiểu "ô form" (.is-form,
   style.css). Số đo theo theme cũ: cao 40px, ô số 2.5em. */

.quantity,
.text-center .quantity {
	display: inline-flex;
	margin-right: 1em;
	white-space: nowrap;
	vertical-align: top;
	opacity: 1;
}

.button + .quantity,
.text-center .button + .quantity {
	margin-right: 0;
}

.quantity + .button {
	margin-right: 0;
	font-size: 1em;
}

.quantity .button.minus {
	border-right: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.quantity .button.plus {
	border-left: 0 !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.quantity .minus,
.quantity .plus {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.quantity input {
	display: inline-block;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	vertical-align: top;
}

.quantity input[type="number"] {
	width: 2.5em;
	max-width: 2.5em;
	border-radius: 0 !important;
	font-size: 1em;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.product-summary .quantity {
	margin-bottom: 1em;
}

@media (max-width: 549px) {
	.quantity input[type="number"] {
		width: 2em;
	}

	.product-quantity {
		text-align: right;
	}

	.cross-sells {
		overflow: hidden;
	}
}

.group_table .quantity,
.shop_table .quantity {
	margin: 0;
}

/* ---------- Tab sản phẩm ---------- */

.product-tabs {
	display: flex;
	gap: 4px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid var(--xmn-border);
	overflow-x: auto;
}

.product-tabs li a {
	display: block;
	padding: 10px 18px;
	color: var(--xmn-text-muted);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.product-tabs li.active a,
.product-tabs li a:hover {
	color: var(--xmn-primary);
	box-shadow: inset 0 -2px 0 var(--xmn-primary);
}

.woocommerce-Tabs-panel {
	padding: 20px 0;
}

/* ---------- Điều hướng sản phẩm ---------- */

.product-nav {
	display: flex;
	gap: 16px;
	font-size: 0.8rem;
}

/* ==========================================================================
   Giỏ hàng, thanh toán, tài khoản
   Khung và số đo như theme cũ. Ba trang này đi qua page-cart.php,
   page-checkout.php, page-my-account.php.
   ========================================================================== */

/* ---------- Thanh tiêu đề trang ---------- */

.page-title {
	position: relative;
}

.page-title-bg {
	overflow: hidden;
}

.page-title-inner {
	position: relative;
	min-height: 60px;
	padding-top: 20px;
}

.page-title-inner ul,
.page-title-inner select,
.page-title-inner form,
.page-title-inner button,
.page-title-inner p {
	margin-top: 0;
	margin-bottom: 0;
}

/* Thanh nền xám nhạt (tiêu đề "My account") */
.normal-title {
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	background-color: #f7f7f7;
}

.normal-title .page-title-inner {
	padding-top: 15px;
	padding-bottom: 15px;
}

.featured-title {
	background-color: var(--primary-color, #446084);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.featured-title .page-title-inner {
	padding-bottom: 20px;
}

.featured-title .page-title-bg {
	box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

.title-overlay {
	background-color: rgba(0, 0, 0, 0.25);
}

.my-account-header.featured-title .page-title-inner {
	min-height: 100px;
}

.my-account-header .button {
	margin-top: 5px;
	margin-bottom: 5px;
}

.flex-row-center {
	justify-content: center;
}

.flex-has-center > .flex-row > .flex-col:not(.flex-center),
.flex-has-center > .flex-col:not(.flex-center) {
	flex: 1;
}

@media (max-width: 849px) {
	.medium-flex-wrap {
		flex-flow: column wrap;
	}

	.medium-flex-wrap .flex-col {
		flex-grow: 0;
		width: 100%;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

/* Cỡ chữ tiêu đề dùng như class (nav.h2…) */
.h1 { font-size: 1.7em; line-height: 1.3; }
.h2 { font-size: 1.6em; line-height: 1.3; }
.h3 { font-size: 1.25em; }
.strong { font-weight: bold; }

/* ---------- Đường dẫn và dải bước thanh toán ---------- */

.breadcrumbs {
	padding: 0;
	color: #222;
	font-weight: bold;
	letter-spacing: 0;
}

.breadcrumbs .divider,
.breadcrumbs .separator {
	position: relative;
	top: 0;
	margin: 0 0.3em;
	font-weight: 300;
	opacity: 0.35;
}

.breadcrumbs a {
	color: rgba(102, 102, 102, 0.7);
	font-weight: normal;
}

.breadcrumbs a:first-of-type {
	margin-left: 0;
}

.breadcrumbs a.current,
.breadcrumbs a:hover {
	color: #111;
}

.product-info .breadcrumbs {
	margin: 0 0 0.5em;
	font-size: 0.85em;
}

/* "Giỏ hàng › Chi tiết thanh toán › Hoàn thành đơn hàng": bước hiện tại đậm
   màu, các bước khác xám nhạt. */
.checkout-breadcrumbs {
	padding: 15px 0;
}

.checkout-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	color: #ccc;
}

.checkout-breadcrumbs .divider {
	top: 2px;
	margin: 0 0.5em;
}

/* ---------- Bảng giỏ hàng / đơn hàng ---------- */

/* Trên điện thoại bảng cuộn ngang được nếu rộng hơn màn hình. */
@media (max-width: 549px) {
	.sm-touch-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.shop_table ul li,
.checkout ul li {
	margin: 0;
	list-style: none;
}

.shop_table .quantity {
	margin: 0;
}

td.product-name {
	word-break: break-word;
	text-overflow: ellipsis;
}

td.product-thumbnail {
	width: 90px;
	min-width: 60px;
	max-width: 90px;
}

td.product-remove {
	width: 20px;
	padding: 0;
}

.shop_table tfoot th {
	font-size: 85%;
	letter-spacing: 0;
	text-transform: inherit;
}

td.product-total,
.shop_table tfoot tr td,
.cart_totals tbody tr td,
.shop_table thead tr th:last-of-type,
.shop_table tr td:last-of-type {
	text-align: right;
}

.shop_table thead th,
.shop_table .order-total td,
.shop_table .order-total th {
	border-width: 3px;
}

.shop_table th:last-child {
	border-right: 0;
}

.shop_table .cart_item td {
	padding-top: 15px;
	padding-bottom: 15px;
}

.shop_table .actions {
	padding: 15px 0 10px;
	border: 0;
}

.shop_table .submit-col {
	padding-left: 30px;
}

@media (max-width: 849px) {
	.shop_table {
		font-size: 0.9em;
	}

	.shop_table tr.shipping th {
		width: 50%;
	}

	.shop_table .product-name {
		min-width: 80px;
	}

	.shop_table .product-remove {
		position: relative;
		width: 0;
	}

	.shop_table .product-remove a {
		position: absolute;
		top: 10px;
		left: 0;
		width: 24px;
		height: 24px;
		font-size: 18px !important;
		line-height: 18px !important;
	}

	.shop_table .mobile-product-price {
		margin: 0.5em 0;
	}
}

@media (max-width: 549px) {
	.shop_table .product-price,
	.shop_table .product-subtotal {
		display: none;
	}
}

/* Nút xoá sản phẩm: vòng tròn viền xám có dấu × */
a.remove,
a.icon-remove {
	display: block;
	width: 24px;
	height: 24px;
	border: 2px solid currentColor;
	border-radius: 100%;
	color: #ccc;
	font-size: 15px !important;
	font-weight: bold;
	line-height: 19px !important;
	text-align: center;
	text-decoration: none;
}

a.remove:hover,
a.icon-remove:hover {
	color: #000;
}

/* Tổng tiền */
.cart_totals > h2 {
	display: none;
}

.cart_totals tbody th {
	font-size: 0.9em;
	font-weight: normal;
	letter-spacing: 0;
	text-transform: inherit;
}

.cart_totals .button {
	display: block;
	min-width: 100%;
	margin-right: 0;
}

.cart_totals .wc-proceed-to-checkout {
	margin: 1.5em 0;
}

.cart-discount {
	background-color: rgba(122, 156, 89, 0.2);
	font-size: 0.85em;
}

.cart-discount th,
.cart-discount td {
	padding: 10px 5px;
}

.cart-sidebar .widget-title {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 3px solid #ececec;
	font-size: 0.95em;
}

/* Phí vận chuyển */
.woocommerce-shipping-calculator {
	margin-top: 0.5em;
	margin-bottom: 0;
}

.woocommerce-shipping-destination,
.shipping-calculator-button {
	font-size: 0.9em;
}

.shipping-calculator-form {
	margin-top: 5px;
	padding: 15px 15px 10px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.03);
}

tr.shipping input {
	margin-top: -2px;
	margin-bottom: 0;
}

tr.shipping input:checked + label {
	font-weight: bold;
}

tr.shipping span.amount {
	margin-left: 0.2em;
}

/* Sau khi thêm vào giỏ bằng AJAX */
.add_to_cart_button.added {
	display: none;
}

a.added_to_cart {
	display: inline-block;
	padding: 10px 0;
	font-size: 0.9em;
	font-weight: bold;
	text-transform: uppercase;
}

a.added_to_cart::after {
	content: " →";
}

/* ---------- Form thanh toán, đăng nhập ---------- */

.woocommerce-billing-fields {
	padding-top: 15px;
	border-top: 2px solid #ddd;
}

.woocommerce-billing-fields p {
	margin-bottom: 0.5em;
}

form.checkout h3 {
	overflow: hidden;
	padding-top: 10px;
	font-size: 1.1em;
	font-weight: bolder;
	text-transform: uppercase;
}

form.checkout input[type="checkbox"] {
	margin: 0 0.5em 0 0;
}

.payment_methods li + li {
	padding-top: 7px;
	border-top: 1px solid #ececec;
}

.payment_methods p {
	font-size: 0.9em;
}

p.form-row-wide {
	clear: both;
}

p.form-row-push {
	margin-top: -15px;
}

@media (min-width: 550px) {
	p.form-row-first,
	p.form-row-last {
		float: left;
		width: 48%;
	}

	p.form-row-first {
		margin-right: 4%;
	}
}

#billing_address_2_field > label,
#shipping_address_2_field > label {
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
}

@media (max-width: 549px) {
	#billing_address_2_field > label,
	#shipping_address_2_field > label {
		display: none;
	}
}

div.create-account {
	clear: both;
}

.form-row.create-account {
	margin: 0;
	font-size: 1.1em;
}

.form-row.create-account label {
	font-weight: normal;
}

.js_active .woocommerce-account-fields p.create-account + div.create-account,
.js_active .woocommerce-shipping-fields #ship-to-different-address + div.shipping_address {
	display: none;
}

.form-row input[type="submit"] {
	margin: 0;
}

.form-row input[type="submit"] + label {
	margin-left: 15px;
}

.form-row .select2-container {
	margin-bottom: 1em;
}

.woocommerce-form-login .button {
	margin-bottom: 0;
}

.message-wrapper + .login {
	padding: 30px;
	background-color: rgba(0, 0, 0, 0.03);
}

.woocommerce-form-register .woocommerce-privacy-policy-text {
	margin-bottom: 1.5em;
}

.page-checkout-simple {
	padding: 3% 0;
}

abbr[title="required"] {
	color: #b20000;
}

#billing_phone_field.form-row-first {
	float: none;
	width: 100%;
}

form.checkout .form-row label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 600;
	font-size: 0.9em;
}

form.checkout .form-row label .optional,
form.checkout .form-row label .required {
	font-weight: normal;
}

form.checkout .form-row input.input-text,
form.checkout .form-row select,
form.checkout .form-row textarea,
form.checkout .form-row .select2-container .select2-selection--single {
	height: 2.8em;
	padding: 0 0.75em;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	font-size: 0.95em;
	transition: border-color 0.2s;
}

form.checkout .form-row textarea {
	height: auto;
	min-height: 5em;
	padding: 0.6em 0.75em;
}

form.checkout .form-row input.input-text:focus,
form.checkout .form-row select:focus,
form.checkout .form-row textarea:focus {
	border-color: var(--xmn-primary, #00a298);
	outline: none;
}

form.checkout .form-row .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

form.checkout .form-row .select2-container .select2-selection__rendered {
	padding-left: 0;
	line-height: 1.4;
}

form.checkout .form-row .select2-container .select2-selection__arrow {
	height: 100%;
}

form.checkout .form-row {
	margin-bottom: 1em;
}

form.checkout .form-row .select2-container {
	margin-bottom: 0;
}

/* ---------- Trang tài khoản khi đã đăng nhập ---------- */

@media (max-width: 849px) {
	.dashboard-links li {
		width: 50%;
	}
}

@media (max-width: 549px) {
	.dashboard-links li {
		width: 100%;
	}
}

@media screen and (min-width: 850px) {
	.col-border {
		padding-right: 0;
		border-right: 1px solid #ececec;
	}

	.col-border + .col,
	.col-divided + .col {
		padding-left: 30px;
	}
}

.mt-half {
	margin-top: 15px;
}

/* ---------- Thông báo của WooCommerce ----------
   Template thông báo của site in ul.message-wrapper > li > .message-container. */

.message-wrapper {
	margin: 0;
	padding-bottom: 0.5em;
}

#wrapper > .message-wrapper {
	margin-bottom: 10px;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	font-size: 1.1em;
}

ul.message-wrapper li {
	list-style: none;
}

.message-container span {
	font-weight: bold;
}

.message-container .wc-forward {
	display: none;
}

.message-container a {
	margin: 0 15px 0 0;
}

.container .message-container {
	padding-left: 0;
	padding-right: 0;
}

.message-wrapper + main .product-main {
	padding-top: 0;
}

/* ==========================================================================
   Trang danh mục
   ========================================================================== */

.shop-page-title,
.category-page-title {
	margin: 20px 0 16px;
	font-size: 1.4rem;
}

.woocommerce-result-count {
	margin: 0;
	color: var(--xmn-text-muted);
	font-size: 0.82rem;
}

.woocommerce-ordering select {
	padding: 7px 10px;
	border: 1px solid var(--xmn-border);
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.82rem;
}

/* Danh mục con dạng ô */
.product-category .box-text {
	text-align: center;
}

/* ==========================================================================
   Dải sản phẩm dạng băng chuyền của site
   ========================================================================== */

.block-product-col {
	position: relative;
}

/* Chỉ dải "Sản phẩm nổi bật" (.section_sp) là băng chuyền; các khối theo danh
   mục là lưới do CSS của site chia cột. Trước khi slick khởi tạo, giữ dải
   băng chuyền trên một hàng để trang không nhảy bố cục. */
.section_sp .block-product-2:not(.slick-initialized) {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
}

.section_sp .block-product-2:not(.slick-initialized) > * {
	flex: 0 0 20%;
	max-width: 20%;
}

/* ==========================================================================
   Thư viện ảnh sản phẩm
   Template của site tự dựng dải ảnh nhỏ, không dùng flexslider của WooCommerce.
   ========================================================================== */

.product-gallery {
	position: relative;
}

/* Cột ảnh và các ô ảnh nhỏ không có đệm dưới như cột thường. */
.product-gallery,
.product-thumbnails .col {
	padding-bottom: 0 !important;
}

/* Khoảng cách tới dải ảnh nhỏ do class mb-half (15px) của template quyết định. */
.product-images {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

/* Chỉ hiện ảnh đang chọn; các ảnh còn lại chờ được bấm ở dải bên dưới */
.woocommerce-product-gallery__image {
	display: none;
	width: 100%;
}

.woocommerce-product-gallery__image:first-child,
.woocommerce-product-gallery__image.is-active {
	display: block;
}

.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--xmn-text);
	font-size: 1rem;
	text-decoration: none;
}

/* ---------- Dải ảnh nhỏ: một hàng, 4 ảnh mỗi khung nhìn ----------
   Theme cũ dựng bằng băng chuyền; ở đây dùng slick (đã có sẵn). Trước khi JS
   chạy, CSS vẫn giữ đúng một hàng để trang không nhảy bố cục. */

.product-thumbnails {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	margin: 0 -5px;
	padding: 0;
	overflow: hidden;
	list-style: none;
}

.product-thumbnails.slick-initialized {
	display: block;
	overflow: visible;
}

.product-thumbnails > .col,
.product-thumbnails .slick-slide {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 9.8px;
}

.product-thumbnails .slick-list {
	overflow: hidden;
}

/* Ô ảnh nhỏ: ảnh mờ một nửa; ảnh đang chọn (hoặc đang rê chuột) sáng lên,
   nhích lên 5px trong khung có viền mảnh — như theme cũ. */
.product-thumbnails a {
	display: block;
	overflow: hidden;
	border: 1px solid transparent;
	background-color: #fff;
	cursor: pointer;
	transform: translateY(0);
}

.product-thumbnails img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -5px;
	opacity: 0.5;
	backface-visibility: hidden;
	transition: transform 0.6s, opacity 0.6s;
}

.product-thumbnails .is-nav-selected a,
.product-thumbnails a:hover {
	border-color: rgba(0, 0, 0, 0.2);
}

.product-thumbnails .is-nav-selected a img,
.product-thumbnails a:hover img {
	opacity: 1;
	transform: translateY(-5px);
}

@media (prefers-reduced-motion: reduce) {
	.product-thumbnails img {
		transition: none;
	}
}

/* Mũi tên của dải ảnh nhỏ: chỉ hiện khi rê chuột vào dải, như theme cũ. */
.product-thumbnails .slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 28px;
	height: 38px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.85);
	color: #111;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.3s;
}

.product-thumbnails:hover .slick-arrow {
	opacity: 0.7;
}

.product-thumbnails .slick-prev { left: 5px; }
.product-thumbnails .slick-next { right: 5px; }

.product-thumbnails .slick-arrow.slick-disabled {
	opacity: 0;
	pointer-events: none;
}

/* ---------- Khối tab mô tả bên dưới ---------- */

.product-footer .woocommerce-tabs {
	padding: 30px 0;
	border-top: 1px solid #ececec;
}

.tab-panels {
	padding-top: 1em;
}

.tab-panels .entry-content {
	padding: 0;
}

/* Dải điều hướng của flexslider nếu vẫn còn sót thì ẩn đi */
.flex-control-nav {
	display: none !important;
}

/* ==========================================================================
   SỬA LỖI CÓ SẴN CỦA SITE — tên sản phẩm dài đè lên giá

   CSS riêng của site cho ô tiêu đề cao cố định 24px nhưng không cắt chữ, rồi
   đặt giá cách một khoảng cố định (30px trên máy tính, 45px trên điện thoại).
   Tên dài quá số dòng vừa khoảng đó sẽ tràn xuống đè lên giá. Lỗi này có
   trên site gốc (đã đối chiếu), không phải do theme mới.

   Cách sửa: ô tiêu đề (thẻ p) giữ đúng chiều cao cũ nên hộp và vị trí giá
   không xê dịch; chữ bên trong được hiện tối đa 2 dòng (48px), vừa trong
   khoảng trống có sẵn ở mọi cỡ màn hình, phần dư thành dấu "…". Dòng thứ ba
   (72px) sẽ chạm giá trên điện thoại nên không cho. Muốn trả về y như cũ thì
   xoá khối này.
   ========================================================================== */

.product-small .box-text .product-title {
	height: 24px;
}

/* Sản phẩm liên quan trên trang sản phẩm: CSS của site cho ô cao 40px. */
.single-product .product-small .box-text .product-title {
	height: 40px;
}

.product-small .box-text .product-title a,
.single-product .product-small .box-text .product-title a {
	display: -webkit-box;
	height: auto;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Khối block-product-1 đã tự cắt còn một dòng bằng CSS riêng — để nguyên. */
.block-product-1 .product-small .box-text .product-title {
	height: auto;
}