/*
 * Khối lưới sản phẩm (feedback lần 2, 30/09/2026 — mẫu Canva "Danh mục sản
 * phẩm" / "Sản phẩm chi tiết"): 4 sản phẩm/hàng, tối đa 2 hàng/trang. Ít hơn 8
 * sản phẩm thì khung tự co lại (lưới CSS chỉ tạo số hàng cần thiết — không
 * chừa khoảng trắng); nhiều hơn 8 thì có số trang NGAY TRONG KHỐI, đổi trang
 * chỉ thay sản phẩm (thp-product-grid.js). Dùng cho trang danh mục, trang
 * landing danh mục và "Sản phẩm liên quan" ở trang chi tiết.
 */
.thp-pgrid {
	margin: 0 0 24px;
}
.thp-pgrid__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	transition: opacity .15s;
}
.thp-pgrid__cell {
	min-width: 0;
	display: flex; /* thẻ giãn hết ô → cùng hàng cao bằng nhau, nút thẳng hàng */
}
.thp-pgrid__cell > .thp-card {
	width: 100%;
}
.thp-pgrid.is-loading .thp-pgrid__list {
	opacity: .45;
	pointer-events: none;
}
/* Thẻ trong lưới: khung viền nhẹ như thẻ /san-pham (thẻ gốc chỉ có nền trắng). */
.thp-pgrid .thp-card .item-inner {
	background: #fff;
	border: 1px solid #ececec;
	padding-bottom: 12px;
}

/* Thanh số trang trong khối. */
.thp-pgrid__pager {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}
.thp-pgrid__pager:empty {
	display: none;
}
.thp-pgrid__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.thp-pgrid__pages button {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 3px;
	color: #233179;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.thp-pgrid__pages button:hover:not([disabled]),
.thp-pgrid__pages button:focus-visible {
	border-color: #233179;
	background: #eef0fa;
}
.thp-pgrid__pages button.is-current {
	background: #233179;
	border-color: #233179;
	color: #fff;
	cursor: default;
}
.thp-pgrid__pages button[disabled] {
	opacity: .4;
	cursor: default;
}
.thp-pgrid__gap {
	align-self: center;
	color: #888;
}

/* "Sản phẩm liên quan": tiêu đề chữ hoa đậm có đường kẻ, dưới phần nội dung, rộng hết khung. */
.thp-related {
	clear: both;
	padding: 28px 0 8px;
}

@media (max-width: 991px) {
	.thp-pgrid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 575px) {
	.thp-pgrid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* Mẫu Canva: "căn thẳng hàng chỗ thông tin chi tiết sang tới sidebar, không được để lệch" —
   bỏ lề trên 20px của khung nội dung để đỉnh nó trùng đỉnh sidebar. */
.thp-prod-body .product-collateral {
	margin-top: 0;
}

/* Phản hồi lần 3: cột nội dung đổi 9/12 → 8/12 (sidebar 4/12 như web cũ) — số cột lưới theo bề rộng thật:
   ≥1200: 750px → 4 cột; 992–1199: 617px → 3; 768–991: 470px → 2; 576–767 (1 cột lớn): 3; ≤575: 2. */
@media (min-width: 992px) and (max-width: 1199px) { .thp-pgrid__list, .thp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 768px) and (max-width: 991px) { .thp-pgrid__list, .thp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Phản hồi lần 3 (I21-II.3, prnt WlmN4): thanh công cụ trên lưới như hungphatsteel.com —
   [lưới][danh sách]  Hiển thị 1–8 của N kết quả .......... [Sắp xếp ▾] */
.thp-pgrid__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0 16px;
	padding: 8px 10px;
	background: #f5f6fa;
	border: 1px solid #e6e9f2;
	border-radius: 8px;
}
.thp-pgrid__views { display: flex; gap: 6px; }
.thp-pgrid__view {
	width: 34px; height: 34px;
	border: 1px solid #d5d9e6; border-radius: 6px;
	background: #fff; color: #233179; cursor: pointer;
}
.thp-pgrid__view.is-active { background: #233179; border-color: #233179; color: #fff; }
.thp-pgrid__count { flex: 1 1 auto; font-size: 14px; color: #555; }
.thp-pgrid__sort select {
	height: 34px; padding: 0 30px 0 12px;
	border: 1px solid #d5d9e6; border-radius: 17px;
	background: #fff; color: #233179; font-size: 14px; cursor: pointer;
}
@media (max-width: 575px) {
	.thp-pgrid__bar { flex-wrap: wrap; }
	.thp-pgrid__count { order: 3; flex-basis: 100%; }
	.thp-pgrid__sort { margin-left: auto; }
}
/* Dạng danh sách (nút ☰ trên thanh công cụ — theo thanh mẫu hungphatsteel khách chụp): mỗi hàng 1 sản phẩm,
   3 cột cân đối: ảnh vuông | tên (+ giá nếu có) | 2 nút xếp dọc bên phải. Bỏ lề/đệm thừa của theme
   (article 15+15px, item-inner 12px) làm thẻ cao hở trống bên dưới. (Chỉnh 05/10 theo nhận xét user.) */
.thp-pgrid.is-list .thp-pgrid__list { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
.thp-pgrid.is-list .thp-card {
	margin: 0 !important; padding: 14px !important; height: auto;
	border: 1px solid #e6e9f2 !important; border-radius: 10px; background: #fff;
	transition: box-shadow .2s, border-color .2s;
}
.thp-pgrid.is-list .thp-card:hover { border-color: #c9cfe3 !important; box-shadow: 0 6px 18px rgba(35, 49, 121, .08); }
.thp-pgrid.is-list .thp-card .item-inner { flex-direction: row; align-items: center; gap: 22px; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.thp-pgrid.is-list .thp-card .product-wrapper { flex: 0 0 140px; width: 140px; margin: 0 !important; }
.thp-pgrid.is-list .thp-card .thumb-wrapper,
.thp-pgrid.is-list .thp-card .thumb { width: 140px !important; height: 140px !important; border-radius: 8px; overflow: hidden; background: #f6f7fb; }
.thp-pgrid.is-list .thp-card .thumb img { width: 100% !important; height: 100% !important; object-fit: contain; }
.thp-pgrid.is-list .thp-card .item-info { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 22px; min-width: 0; }
.thp-pgrid.is-list .thp-card .info-inner { flex: 1 1 auto; align-items: flex-start; text-align: left; padding: 0 !important; min-width: 0; }
.thp-pgrid.is-list .thp-card .item-title h3,
.thp-pgrid.is-list .thp-card .item-title p { justify-content: flex-start; min-height: 0; text-align: left; }
.thp-pgrid.is-list .thp-card .item-title a { font-size: 18px !important; -webkit-line-clamp: 2; text-align: left; }
.thp-pgrid.is-list .thp-card .item-price { margin-top: 8px; }
.thp-pgrid.is-list .thp-card .thp-card__actions {
	flex: 0 0 150px; flex-direction: column; gap: 8px; padding: 0 !important; margin: 0 !important;
}
.thp-pgrid.is-list .thp-card__btn { flex: 0 0 auto; width: 100%; min-height: 36px; font-size: 12px; }
@media (max-width: 575px) {
	.thp-pgrid.is-list .thp-card .item-inner { gap: 14px; }
	.thp-pgrid.is-list .thp-card .product-wrapper { flex-basis: 96px; width: 96px; }
	.thp-pgrid.is-list .thp-card .thumb-wrapper, .thp-pgrid.is-list .thp-card .thumb { width: 96px !important; height: 96px !important; }
	.thp-pgrid.is-list .thp-card .item-info { flex-direction: column; align-items: stretch; gap: 10px; }
	.thp-pgrid.is-list .thp-card .thp-card__actions { flex: none; flex-direction: row; width: 100%; }
	.thp-pgrid.is-list .thp-card__btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 32px; }
	.thp-pgrid.is-list .thp-card .item-title a { font-size: 16px !important; }
}

/* Ô sắp xếp: theme gốc ép select rộng ~47px → chữ ("Mặc định"...) bị che, ô nằm lệch giữa thanh (user báo 05/10).
   Ô rộng cố định, luôn hiện lựa chọn đang dùng, dồn sát MÉP PHẢI thanh công cụ. */
.thp-pgrid .thp-pgrid__sort { margin: 0 0 0 auto !important; display: flex; justify-content: flex-end; flex: 0 0 auto; }
.thp-pgrid .thp-pgrid__sort select {
	width: 160px !important; min-width: 160px; max-width: none; height: 34px;
	padding: 0 32px 0 14px !important; text-indent: 0; line-height: 32px;
	font-size: 14px; font-weight: 600; color: #233179;
	-webkit-appearance: none; appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23233179%27 stroke-width=%272%27/%3E%3C/svg%3E") no-repeat right 12px center;
}
.thp-pgrid .thp-pgrid__count { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575px) { .thp-pgrid .thp-pgrid__sort select { width: 150px !important; min-width: 150px; } }