/* =============================================================================
   SECTION SO SÁNH — Tự làm rời rạc  vs  Giải pháp đồng bộ AiHomeiz
   Nạp riêng ở trang chủ (xem functions.php)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   CỘT TRÁI — phương án rủi ro
   Tông xám nhạt, opacity dưới 1 để tạo cảm giác "mờ nhạt" so với cột phải.
   -------------------------------------------------------------------------- */
.cmp-risk {
	background: linear-gradient(180deg, #F7F7F8 0%, #EDEEEF 100%);
	border: 1px solid #E2E4E6;
	opacity: .94;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1),
	            box-shadow .45s ease,
	            opacity .45s ease;
}
.cmp-risk:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px -18px rgba(11, 27, 43, .18);
	opacity: 1;
}

/* -----------------------------------------------------------------------------
   CỘT PHẢI — phương án giải pháp
   -------------------------------------------------------------------------- */
.cmp-win {
	position: relative;
	background: linear-gradient(165deg, #0B1B2B 0%, #132a41 55%, #0B1B2B 100%);
	box-shadow: 0 26px 56px -22px rgba(11, 27, 43, .55);
	transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}

/**
 * Viền gradient kim loại.
 * Kỹ thuật: lớp giả phủ toàn thẻ, tô gradient, rồi dùng mask kiểu "xor" để
 * chỉ chừa lại phần viền. Cách này giữ được bo góc, khác với border-image
 * (không bo góc được) hay lồng thêm div (thêm DOM thừa).
 */
.cmp-win::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: linear-gradient(140deg, #E0C684 0%, #C8A24A 28%, #8a7333 52%, #C8A24A 74%, #E0C684 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

/* Quầng sáng vàng phía sau thẻ */
.cmp-win::after {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(60% 50% at 50% 0%, rgba(200, 162, 74, .42), transparent 70%);
	opacity: .55;
	transition: opacity .45s ease;
}

.cmp-win:hover {
	transform: translateY(-8px);
	box-shadow: 0 40px 80px -24px rgba(200, 162, 74, .42);
}
.cmp-win:hover::after { opacity: 1; }

/* -----------------------------------------------------------------------------
   BADGE "ĐƯỢC ĐỀ XUẤT" — nền gradient kim loại + ánh sáng quét khi hover
   Dùng transform (chạy trên GPU) thay vì animate background-position.
   -------------------------------------------------------------------------- */
.cmp-badge {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #E0C684, #C8A24A 55%, #b08e3c);
	color: #0B1B2B;
	box-shadow: 0 8px 20px -6px rgba(200, 162, 74, .55);
}
.cmp-badge::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .6) 50%, transparent 64%);
	transform: translateX(-130%);
	transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.cmp-win:hover .cmp-badge::after { transform: translateX(130%); }

/* -----------------------------------------------------------------------------
   HÀNG TIÊU CHÍ
   -------------------------------------------------------------------------- */
.cmp-row { transition: background-color .3s ease; }
.cmp-win  .cmp-row:hover { background: rgba(200, 162, 74, .07); }
.cmp-risk .cmp-row:hover { background: rgba(11, 27, 43, .035); }

/* -----------------------------------------------------------------------------
   MOBILE — chuyển 2 cột thành tab
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.cmp-grid { display: block; }
	.cmp-pane { display: none; }
	.cmp-pane.active { display: block; }

	/* Bỏ hiệu ứng nâng trên cảm ứng — gây giật khi cuộn */
	.cmp-risk:hover,
	.cmp-win:hover { transform: none; box-shadow: none; }
}

@media (min-width: 1024px) {
	.cmp-tabs { display: none; }
	.cmp-pane { display: block !important; }
}

/* -----------------------------------------------------------------------------
   TÔN TRỌNG THIẾT LẬP GIẢM CHUYỂN ĐỘNG
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cmp-risk,
	.cmp-win,
	.cmp-row,
	.cmp-badge::after,
	.cmp-win::after {
		transition: none !important;
	}
	.cmp-risk:hover,
	.cmp-win:hover { transform: none; }
}