/*
 * Thẻ sản phẩm dùng chung toàn site (task GD-02, sheet "Giao diện" dòng 5).
 * Màu theo yêu cầu khách: xanh #233179 (tên + nút Chi tiết), đỏ #d91d1b (nút Liên hệ — màu đỏ hotline trên banner/theme).
 */

/* 1. Ảnh hiện trọn (ảnh sp có logo phía trên và dải liên hệ phía dưới): khung vuông co theo độ rộng thẻ.
      Trước đây khung cao cố định 220px + object-fit:cover (custom-overrides.css) cắt mất 2 phần đó. */
.thp-card .thumb-wrapper {
	height: auto;
	aspect-ratio: 1 / 1;
	background: #fff;
}
.thp-card .thumb-wrapper .thumb,
.thp-card .thumb-wrapper .face {
	width: 100%;
	height: 100%;
}
.thp-card .thumb-wrapper img,
.thp-card .thumb-wrapper .face img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

/* 2. Tên sản phẩm to hơn, màu #233179; tối đa 2 dòng (chữ to hơn thì 1 dòng cắt mất nhiều). */
.thp-card .item-title {
	white-space: normal !important;
	padding-top: 14px !important;
	margin-bottom: 12px !important;
}
.thp-card .item-title h3,
.thp-card .item-title h4,
.thp-card .item-title p {
	margin: 0;
	min-height: 2.6em; /* 2 dòng → các thẻ cùng hàng thẳng nút */
	font-size: 17px;
	line-height: 1.3;
}
/* !important: rule gốc `.products-grid .item .item-inner .item-info .info-inner .item-title a` (6 class) đặt 14px/#000. */
.thp-card .item-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: inherit;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #233179 !important;
}
.thp-card .item-title a:hover,
.thp-card .item-title a:focus {
	color: #d91d1b !important;
	text-decoration: none;
}
.thp-card .item-price {
	margin: 0 0 12px;
}

/*
 * Thẻ cao bằng nhau trong 1 hàng, dù tên dài xuống 2 dòng hay có/không có
 * dòng giá: thẻ tự giãn hết chiều cao ô chứa (ô chứa co giãn đều nhờ
 * flex/grid mặc định align-items:stretch — trang /san-pham GD-09), rồi đẩy
 * 2 nút xuống sát đáy bằng margin-top:auto, không phụ thuộc còn bao nhiêu
 * chữ ở trên. Vô hại ở lưới nổi (float, chưa co giãn theo hàng): height:100%
 * không có tác dụng khi ô cha chưa có chiều cao rõ ràng.
 */
.thp-card {
	height: 100%;
}
.thp-card .item-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.thp-card .item-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/*
 * 3. Hai nút hàng ngang: trái "Chi tiết" (xanh), phải "Liên hệ" (đỏ, gọi
 * hotline). In đậm, viết hoa. Phản hồi lần 1 (29/09/2026): nút bản đầu (nền
 * đặc màu) bị khách chê "to quá" — đổi sang dạng VIỀN (nền trắng, chữ+viền
 * màu), nhỏ lại, chỉ đổi thành nền đặc màu lúc di chuột vào, như web gốc.
 */
.thp-card__actions {
	display: flex;
	gap: 8px;
	padding: 0 12px;
	margin-top: auto;
}
.thp-card__btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.thp-card__btn:hover,
.thp-card__btn:focus {
	text-decoration: none;
	color: #fff !important;
}
.thp-card__btn--detail {
	color: #233179 !important;
	border-color: #233179;
}
.thp-card__btn--detail:hover,
.thp-card__btn--detail:focus {
	background: #233179;
}
.thp-card__btn--contact {
	color: #d91d1b !important;
	border-color: #d91d1b;
}
.thp-card__btn--contact:hover,
.thp-card__btn--contact:focus {
	background: #d91d1b;
}

/* Thẻ hẹp (vd danh mục ở 768px: thẻ ~160px) — theo độ rộng CHÍNH THẺ, không theo màn hình:
   chữ nút nhỏ lại để "CHI TIẾT" / "LIÊN HỆ" không gãy 2 dòng. */
.thp-card {
	container-type: inline-size;
}
@container (max-width: 210px) {
	.thp-card__actions {
		gap: 4px;
		padding: 0 6px;
	}
	.thp-card__btn {
		padding: 8px 2px;
		font-size: 11px;
	}
	.thp-card .item-title h3,
	.thp-card .item-title h4,
	.thp-card .item-title p,
	.thp-card .item-title a {
		font-size: 15px !important;
	}
}

@media (max-width: 767px) {
	.thp-card .item-title h3,
	.thp-card .item-title h4,
	.thp-card .item-title p,
	.thp-card .item-title a {
		font-size: 16px !important;
	}
}

/*
 * Nút Zalo + Hotline dùng chung (task GD-10): trang chi tiết sp (dưới chữ "Liên hệ"), sidebar sp (GD-12).
 * Cùng họ với nút thẻ sp: xanh #233179 (Zalo) / đỏ #d91d1b (Hotline), đậm, viết hoa.
 */
.thp-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.thp-cta__btn {
	flex: 1 1 140px; /* 2 nút ngang cả trên điện thoại (khung ~360px); hẹp hơn nữa mới xuống hàng */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff !important;
	white-space: nowrap;
	transition: background-color .2s;
}
.thp-cta__btn:hover,
.thp-cta__btn:focus {
	text-decoration: none;
}
.thp-cta__btn img {
	width: 22px;
	height: 22px;
	flex: none;
	background: #fff;
	border-radius: 50%;
}
.thp-cta__btn .fa {
	font-size: 18px;
}
.thp-cta__btn--zalo {
	background: #233179;
}
.thp-cta__btn--zalo:hover,
.thp-cta__btn--zalo:focus {
	background: #1a2560;
}
.thp-cta__btn--hotline {
	background: #d91d1b;
}
.thp-cta__btn--hotline:hover,
.thp-cta__btn--hotline:focus {
	background: #b51715;
}
/* Trang chi tiết/landing (mẫu Canva): 2 nút căn đều hai bên, trải hết bề ngang khối thông tin. */
.thp-cta--product {
	clear: both;
	max-width: none;
	margin: 18px 0 6px;
}
.thp-cta--product .thp-cta__btn {
	flex: 1 1 0;
}

/* Ảnh sản phẩm KHÔNG gắn link (chỉ tên có link — mẫu Canva): khung ảnh là <span>, không phải <a>. */
.thp-card .thumb-wrapper span.thumb,
.thp-card .thumb-wrapper span.face {
	display: block;
}

/* Tên sản phẩm màu xanh đậm ở trang chi tiết/landing (mẫu Canva: "đồng bộ màu xanh đậm, H1"). */
.product-view .product-name h1 {
	color: #233179;
}

/* Tiêu đề khối "Sản phẩm liên quan" / "Bài viết liên quan": chữ hoa đậm + đường kẻ, dùng chung. */
.thp-related__head {
	margin: 0 0 18px;
	border-bottom: 2px solid #e5e5e5;
}
.thp-related__title {
	display: inline-block;
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 3px solid #233179;
	margin-bottom: -2px;
	color: #233179;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

/*
 * Phản hồi lần 3 (04/10/2026, ô I5, prnt CF1qvLv0_YJm) — đồng bộ toàn website:
 * 1/ chữ CHI TIẾT / LIÊN HỆ nhỏ xuống 1 chút (12 → 11px, nút 32 → 30px);
 * 2/ tên sản phẩm CĂN GIỮA theo chiều dọc giữa ảnh và 2 nút: vùng tên chiếm hết
 *    khoảng trống còn lại của thẻ, tên nằm giữa vùng đó (trước: tên dính sát ảnh,
 *    tên 1 dòng để lại khoảng trống lớn phía dưới).
 */
.thp-card .info-inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 10px !important;
}
.thp-card .item-title {
	padding: 0 !important;
	margin: 0 !important;
}
.thp-card .item-title h3,
.thp-card .item-title h4,
.thp-card .item-title p {
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thp-card .item-price { margin: 6px 0 0; }
.thp-card__actions { margin-top: 0; padding-bottom: 14px; }
.thp-card__btn {
	min-height: 30px;
	padding: 5px 6px;
	font-size: 11px;
	letter-spacing: .2px;
}
@media (max-width: 767px) {
	.thp-card__btn { font-size: 10.5px; }
}

/* Phản hồi lần 3 (I21-I.4): cột thông tin sp = cột flex, khối giá/Liên hệ/CTA dồn xuống đáy (thp-sidebar.js đặt min-height = tới đáy ảnh). */
@media (min-width: 768px) {
	.product-essential .product-shop { display: flex; flex-direction: column; }
	.product-essential .product-shop > .price-block { margin-top: auto; }
	.product-essential .product-shop > .price-block > :last-child { margin-bottom: 0; }
}
@media (min-width: 768px) { .product-essential .product-shop > .availability { align-self: flex-end; } }

/*
 * Phản hồi lần 3 (ô I2 → ghi chú G2 "đồng bộ nền cho TOÀN WEB — chỗ nào đang là nền xám thì đồng bộ hết về
 * màu trắng"): nền trang (#f3f3f3 của theme gốc) và dải breadcrumb (#f5f5f5) ở mọi trang trong → trắng;
 * dải breadcrumb giữ 1 đường kẻ mảnh để tách khỏi nội dung. File này nạp ở MỌI trang.
 */
html body { background-color: #fff !important; }
.breadcrumbs { background: #fff !important; border-bottom: 1px solid #eceef3; }
.main-container, .main-container .main, .col-main { background-color: #fff; }
/* Thẻ sp nằm trên nền trắng: viền mảnh để các thẻ vẫn tách nhau (trước tách nhờ nền xám) */
.thp-pgrid .thp-card, .thp-pg-slider .thp-card, .collection .thp-card { border: 1px solid #edf0f5; }

/* Cân đối thẻ sp (user báo 05/10: thừa khoảng dưới nút ở cả lưới lẫn danh sách): thẻ chỉ 1 viền ngoài, bỏ
   đệm/lề dưới của theme (article 15px + item-inner 12px) và viền khung trong; khoảng dưới nút = khoảng 2 bên nút (12px). */
.thp-card { padding-bottom: 0 !important; }
.thp-card .item-inner { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.thp-pgrid .thp-card .item-inner,
.thp-pg-slider .thp-card .item-inner,
.collection .thp-card .item-inner { border: 0 !important; box-shadow: none !important; }
.thp-card .thp-card__actions { padding-bottom: 12px !important; }
.thp-pgrid .thp-card { margin-bottom: 0 !important; }

/* Phản hồi lần 4 (K26, prnt -t4HPpZdMm6f): chữ tab "THÔNG TIN SẢN PHẨM" to bằng tiêu đề "Danh mục sản phẩm" ở sidebar (17px, trước 12px). Áp cho sp chi tiết + danh mục. */
.product-collateral .product-tabs > li > a { font-size: 17px !important; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }