/* =============================================================
 * GDGT — CSS sửa lỗi theo AUDIT.md
 * ============================================================= */

/* -------------------------------------------------------------
 * C3 — Card sản phẩm: tên phải đọc được
 *
 * Trước: font 18px + -webkit-line-clamp:2 → vì cả 366 sản phẩm đều mở đầu
 * bằng "Theme WordPress Website" nên mọi card chỉ hiện "Theme WordPress…",
 * phần phân biệt nằm cuối tên lại bị cắt.
 *
 * PHP đã cắt tiền tố đó khi hiển thị trên card (inc/audit-fixes.php).
 * CSS chỉ cần cỡ chữ vừa với bề rộng card mobile (~161px) và cho 3 dòng.
 * ------------------------------------------------------------- */
.product-title .woocommerce-loop-product__link {
	font-size: 16px;
	line-height: 1.35;
	-webkit-line-clamp: 3;
	min-height: 0;
	margin-bottom: 10px;
}

@media (max-width: 767px) {
	.product-title .woocommerce-loop-product__link {
		font-size: 14px;
		line-height: 1.3;
		-webkit-line-clamp: 3;
		margin-bottom: 8px;
	}

	/* (Đã bỏ chiều cao ảnh 190px cố định: thẻ giờ theo tỉ lệ 3:4 ở style.css.) */
}

/* -------------------------------------------------------------
 * C13 — Khối upsell dịch vụ đã chuyển xuống dưới danh sách sản phẩm
 * (xem functions.php). Tạo khoảng cách với sản phẩm cuối.
 * ------------------------------------------------------------- */
.gdgt-shop-services-banner {
	margin-top: 40px;
}

/* -------------------------------------------------------------
 * §4 — Group "Chọn gói" là quyết định mua chính, không phải
 * dịch vụ thêm → làm nổi bật so với các group upsell khác.
 * ------------------------------------------------------------- */
.cweo-group.cweo-group-primary {
	border: 2px solid var(--primary-color, #1e5eff);
	border-radius: 10px;
	background: #f6f9ff;
}

.cweo-group.cweo-group-primary .cweo-group-header {
	padding-top: 10px;
}

.cweo-group.cweo-group-primary .cweo-option-label {
	align-items: flex-start;
	padding: 8px 6px;
	border-radius: 8px;
}

.cweo-group.cweo-group-primary .cweo-option-label:hover {
	background: #eaf1ff;
}

/* =============================================================
 * C4 — Thanh lọc ngành trên trang Shop / danh mục
 * Hiện trên MỌI kích thước màn hình (nút "LỌC" của Flatsome chỉ
 * hiện trên mobile nên khách desktop trước đây không lọc được gì).
 * ============================================================= */

.gdgt-shop-filter {
	margin: 0 0 24px;
	padding: 16px 18px;
	background: #f6f9ff;
	border: 1px solid #e2ebff;
	border-radius: 12px;
}

.gdgt-filter-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.gdgt-filter-label {
	font-weight: 700;
	font-size: 15px;
	color: #102d47;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* --- ô tìm kiếm --- */
.gdgt-filter-search {
	display: flex;
	align-items: stretch;
	flex: 1 1 280px;
	max-width: 380px;
	margin: 0;
}

.gdgt-filter-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	font-size: 14px;
	border: 1px solid #cfdcf7;
	border-radius: 8px 0 0 8px;
	background: #fff;
	box-shadow: none;
}

.gdgt-filter-search button {
	flex: 0 0 auto;
	width: 44px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: var(--primary-color, #1e5eff);
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.gdgt-filter-search button svg {
	width: 18px;
	height: 18px;
}

/* --- chip ngành --- */
.gdgt-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gdgt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: #2b3b4e;
	background: #fff;
	border: 1px solid #d8e3f7;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}

.gdgt-chip:hover {
	border-color: var(--primary-color, #1e5eff);
	color: var(--primary-color, #1e5eff);
}

.gdgt-chip.is-active {
	background: var(--primary-color, #1e5eff);
	border-color: var(--primary-color, #1e5eff);
	color: #fff;
}

.gdgt-chip-count {
	font-size: 12px;
	font-weight: 700;
	opacity: .65;
}

.gdgt-chip.is-active .gdgt-chip-count {
	opacity: .85;
}

/* --- mobile: chip cuộn ngang 1 hàng, không xuống 6 dòng --- */
@media (max-width: 767px) {
	.gdgt-shop-filter {
		padding: 14px;
		margin-bottom: 18px;
	}

	.gdgt-filter-label {
		font-size: 13px;
	}

	.gdgt-filter-search {
		max-width: none;
	}

	.gdgt-filter-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
		margin: 0 -14px;
		padding-left: 14px;
		padding-right: 14px;
	}

	.gdgt-filter-chips::-webkit-scrollbar {
		display: none;
	}

	.gdgt-chip {
		flex: 0 0 auto;
		font-size: 13px;
		padding: 7px 12px;
	}
}

/* Thu khoảng trống 55px giữa dropdown sắp xếp và thanh lọc trên mobile.
 * 55px = margin-bottom 20px của .shop-page-title + padding-top 30px của
 * .category-page-row + 5px. Trước đây chỗ đó là nút "LỌC" của Flatsome;
 * nay bỏ sidebar nên nút không còn, để lại một vùng trắng ngay màn hình đầu. */
@media (max-width: 767px) {
	.shop-page-title.category-page-title {
		margin-bottom: 8px;
	}

	.row.category-page-row {
		padding-top: 10px;
	}
}

/* =============================================================
 * C15/C16 — Combo chỉ còn 2 (Hoàn Thiện, Bứt Phá) và đã chuyển sang
 * trang /goi-website-tron-goi/. Lưới 2 cột, giới hạn bề rộng cho cân.
 * ============================================================= */
.gdgt-combos-grid.gdgt-combos-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	.gdgt-combos-grid.gdgt-combos-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* Link gọn thay cho 3 combo card trên trang sản phẩm */
.gdgt-fullpack-link {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0 8px;
	padding: 14px 18px;
	border: 1px dashed #c9d7f2;
	border-radius: 12px;
	background: #fbfcff;
	color: #2b3b4e;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}

.gdgt-fullpack-link:hover {
	border-color: var(--primary-color, #1e5eff);
	background: #f3f7ff;
	color: #2b3b4e;
}

.gdgt-fullpack-icon {
	flex: 0 0 auto;
	font-size: 24px;
}

.gdgt-fullpack-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	line-height: 1.4;
}

.gdgt-fullpack-text strong {
	font-size: 15px;
	color: #102d47;
}

.gdgt-fullpack-arrow {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--primary-color, #1e5eff);
}

/* C17 — ghi chú khi mua kèm hosting */
.gdgt-install-note {
	margin: 10px 0;
	padding: 9px 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #14532d;
	background: #ecfdf3;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

/* R3 — badge + mô tả gói khuyên dùng (chỉ hiện trên trang sản phẩm) */
.gdgt-tier-badge {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
	background: #f59e0b;
	border-radius: 999px;
	vertical-align: 1px;
}

.gdgt-tier-desc {
	flex-basis: 100%;
	margin: 2px 0 0 26px;
	font-size: 13px;
	color: #52606d;
}

/* D5 — khối "Bước tiếp theo" trên trang QR thanh toán */
.gdgt-next-steps {
	margin: 24px 0;
	padding: 18px 18px 16px;
	border: 1px solid #d8e3f7;
	border-radius: 12px;
	background: #f6f9ff;
	text-align: left;
}

.gdgt-next-title {
	margin: 0 0 12px;
	font-size: 17px;
	color: #102d47;
}

.gdgt-next-list {
	margin: 0 0 14px 20px;
	padding: 0;
}

.gdgt-next-list li {
	margin-bottom: 10px;
	line-height: 1.45;
}

.gdgt-next-list li strong {
	display: block;
	color: #102d47;
}

.gdgt-next-list li span {
	display: block;
	font-size: 14px;
	color: #52606d;
}

.gdgt-next-list code {
	padding: 1px 6px;
	font-size: 14px;
	color: #b91c1c;
	background: #fff;
	border: 1px solid #fecaca;
	border-radius: 4px;
}

.gdgt-next-zalo {
	display: block;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: #0068ff;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
}

.gdgt-next-zalo:hover {
	color: #fff;
	background: #0056d6;
}

/* =============================================================
 * Shop / danh mục: lưới sản phẩm tràn full chiều ngang như trang chủ
 * (trước bị bó trong container 1240px → thumb chỉ ~300px, khó nhìn).
 * Số cột tablet/mobile chỉnh trong inc/shop-filter.php.
 * ============================================================= */
.archive.woocommerce .row.category-page-row,
.archive.woocommerce .shop-page-title .page-title-inner,
.archive.woocommerce .shop-container > .products.row {
	max-width: none;
}