/* Bảng chọn gói trên trang mẫu Giao diện Độc bản (inc/ai-bang-gia.php).
   Chỉ nạp trên trang sản phẩm có meta gdgt_ai=yes. */

.gdgt-cfg {
	border: 1px solid #e3e6ea;
	border-radius: 10px;
	padding: 18px 18px 16px;
	margin: 18px 0 14px;
	background: #fcfdfe;
}

.gdgt-cfg-head { margin-bottom: 14px; }
.gdgt-cfg-head strong { display: block; font-size: 1.05em; line-height: 1.35; }
.gdgt-cfg-head span { display: block; font-size: .87em; color: #6b7280; margin-top: 4px; line-height: 1.5; }

/* --- Bậc giá --- */
.gdgt-cfg-bac { display: grid; gap: 8px; }

.gdgt-cfg-bac-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #dfe3e8;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.gdgt-cfg-bac-item:hover { border-color: #b9c0c8; }
.gdgt-cfg-bac-item.is-chon { border-color: var(--primary-color, #d26e4b); box-shadow: 0 0 0 2px rgba(210, 110, 75, .14); }
.gdgt-cfg-bac-item input { margin: 3px 0 0; flex: none; }

.gdgt-cfg-bac-body { flex: 1 1 auto; min-width: 0; }
.gdgt-cfg-bac-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gdgt-cfg-bac-ten { font-weight: 700; }
.gdgt-cfg-bac-gia { font-weight: 700; color: var(--primary-color, #d26e4b); white-space: nowrap; }
.gdgt-cfg-bac-tom { display: block; font-size: .88em; color: #374151; margin-top: 1px; }
.gdgt-cfg-bac-chi { display: block; font-size: .8em; color: #6b7280; margin-top: 3px; line-height: 1.5; }
.gdgt-cfg-bac-ai  { display: block; font-size: .78em; color: #8a9099; margin-top: 4px; font-style: italic; line-height: 1.5; }

/* Bốn "cửa" của bậc Doanh nghiệp — thứ duy nhất khiến khách lớn phải vào bậc này,
   nên nó được trình bày nổi hẳn chứ không lẫn vào danh sách gạch đầu dòng. */
.gdgt-cfg-cua {
	display: block; margin-top: 8px; padding: 8px 10px;
	background: #f2f8ff; border-left: 3px solid #0068ff; border-radius: 0 4px 4px 0;
	font-size: .79em; line-height: 1.55;
}
.gdgt-cfg-cua strong { display: block; color: #0057d6; margin-bottom: 3px; }
.gdgt-cfg-cua span { display: block; color: #3b4a5a; padding-left: 12px; position: relative; }
.gdgt-cfg-cua span::before { content: "✓"; position: absolute; left: 0; color: #0068ff; font-weight: 700; }

.gdgt-cfg-bac-nhan {
	position: absolute; top: -8px; right: 12px;
	background: #0068ff; color: #fff;
	font-size: .64em; font-weight: 700; letter-spacing: .04em;
	padding: 2px 8px; border-radius: 3px; white-space: nowrap;
}

.gdgt-cfg-ngoai-bac { font-size: .82em; color: #6b7280; margin: 10px 0 0; line-height: 1.55; }

/* --- Mô-đun cộng thêm --- */
.gdgt-cfg-them { margin-top: 16px; border-top: 1px dashed #dfe3e8; padding-top: 14px; }
.gdgt-cfg-them-head { display: block; font-size: .95em; margin-bottom: 8px; }

.gdgt-cfg-mod {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0 0 7px; padding: 9px 11px;
	border: 1px solid #e8ebee; border-radius: 7px; background: #fff;
	cursor: pointer;
}
.gdgt-cfg-mod:hover { border-color: #c8cdd3; }
.gdgt-cfg-mod input[type="checkbox"] { margin: 3px 0 0; flex: none; }
.gdgt-cfg-mod.is-da-gom { background: #f4f6f8; color: #6b7280; cursor: default; }

.gdgt-cfg-mod-body { flex: 1 1 auto; min-width: 0; }
.gdgt-cfg-mod-ten { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 600; font-size: .92em; }
.gdgt-cfg-mod-gia { font-weight: 700; color: #374151; white-space: nowrap; font-size: .92em; }
.gdgt-cfg-mod-mo-ta { display: block; font-size: .8em; color: #6b7280; margin-top: 2px; line-height: 1.5; }

.gdgt-cfg-so { cursor: default; }
.gdgt-cfg-so input[type="number"] {
	width: 64px; margin: 0 4px; padding: 3px 7px;
	border: 1px solid #cbd2d9; border-radius: 5px;
	font-size: 1em; height: auto; box-shadow: none; display: inline-block;
}
.gdgt-cfg-tong-trang, .gdgt-cfg-bai-gom { color: #8a9099; }

/* --- Tổng + nút --- */
.gdgt-cfg-tong { margin-top: 16px; border-top: 1px solid #e3e6ea; padding-top: 14px; }
.gdgt-cfg-tong-so { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gdgt-cfg-tong-so span { font-size: .92em; color: #374151; }
.gdgt-cfg-tong-tien { font-size: 1.7em; font-weight: 700; color: var(--primary-color, #d26e4b); line-height: 1.2; }

/* Lời nhắc "bậc trên ngang giá" — màu cam để tách khỏi khối cửa màu xanh ở trên. */
.gdgt-cfg-combo {
	background: #fff6ef; border-left: 3px solid #d26e4b;
	padding: 9px 12px; margin: 10px 0 0;
	font-size: .84em; line-height: 1.55; color: #6b4a3a;
}

.gdgt-cfg-cta {
	display: block; width: 100%; box-sizing: border-box;
	margin-top: 12px; padding: 14px 18px;
	background: var(--primary-color, #d26e4b); color: #fff;
	border-radius: 7px; text-align: center;
	font-weight: 700; font-size: 1.02em;
}
.gdgt-cfg-cta:hover { background: #b85c3c; color: #fff; }

.gdgt-cfg-ghi-chu { font-size: .8em; color: #6b7280; margin: 9px 0 0; line-height: 1.55; }

@media (max-width: 600px) {
	.gdgt-cfg { padding: 14px 13px 13px; }
	.gdgt-cfg-bac-top { flex-wrap: wrap; }
	.gdgt-cfg-tong-tien { font-size: 1.5em; }
}

/* Khối Zalo/điện thoại (inc/ai-collection.php) giờ là phương án phụ,
   không còn là lối đi chính -> hạ cỡ nút cho khỏi chọi với nút báo giá. */
.gdgt-cfg + .gdgt-ai-cta .gdgt-ai-btn { padding: 10px 16px; font-size: .92em; }
.gdgt-cfg + .gdgt-ai-cta .gdgt-ai-btn-primary { background: #fff; color: #0068ff; border-color: #0068ff; }
.gdgt-cfg + .gdgt-ai-cta .gdgt-ai-btn-primary:hover { background: #f2f8ff; color: #0057d6; }