/**
 * DJJ Compare — tray, toast, bảng so sánh trong popup.
 *
 * Quy tắc: không một `!important` nào. Màu lấy từ Global Colors của Elementor,
 * chỉ có biến dự phòng khi kit chưa nạp.
 */

:root {
	--djj-cmp-line: #E0E0D8;
	--djj-cmp-surface: #F7F7F5;
	--djj-cmp-muted: #84847B;
	--djj-cmp-ink: var(--e-global-color-text, #1A1A1A);
	--djj-cmp-accent: var(--e-global-color-accent, #FFDA00);
	--djj-cmp-navy: var(--e-global-color-secondary, #2E3D52);
	--djj-cmp-band: var(--e-global-color-accent, #FFDA00);
}

/* ------------------------------------------------------------------ nút */

.djj-compare-btn {
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	padding: 9px 12px;
	border: 1px solid var(--djj-cmp-ink);
	border-radius: 3px;
	background: #fff;
	color: var(--djj-cmp-ink);
	transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.djj-compare-btn.is-added {
	background: var(--djj-cmp-accent);
	border-color: var(--djj-cmp-accent);
}

.djj-compare-btn.is-muted {
	opacity: .45;
}

/* ----------------------------------------------------------------- tray */

.djj-compare-tray {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9998;
	background: #fff;
	border-top: 1px solid var(--djj-cmp-line);
	box-shadow: 0 -8px 28px rgba(0, 0, 0, .10);
	transform: translateY(110%);
	transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.djj-compare-tray.is-on {
	transform: none;
}

.djj-compare-tray__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
}

.djj-compare-tray__item,
.djj-compare-tray__empty {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 170px;
	padding: 7px 9px;
	border: 1px solid var(--djj-cmp-line);
	border-radius: 3px;
	background: var(--djj-cmp-surface);
	font-size: 12.5px;
	font-weight: 600;
}

.djj-compare-tray__empty {
	justify-content: center;
	border-style: dashed;
	background: transparent;
	color: var(--djj-cmp-muted);
	font-weight: 500;
}

/* Ten san pham dai thi cat bang dau ba cham. Khong co lop nay thi o hep se
   xep chu theo chieu doc. */
.djj-compare-tray__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.djj-compare-tray__item button {
	margin-inline-start: auto;
	border: 0;
	background: transparent;
	color: var(--djj-cmp-muted);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.djj-compare-tray__spacer {
	flex: 1;
}

.djj-compare-tray__clear {
	border: 0;
	background: transparent;
	color: var(--djj-cmp-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 8px;
	cursor: pointer;
}

.djj-compare-tray__go {
	padding: 11px 20px;
	border: 1px solid var(--djj-cmp-accent);
	border-radius: 3px;
	background: var(--djj-cmp-accent);
	color: var(--djj-cmp-ink);
	font-weight: 700;
	cursor: pointer;
}

.djj-compare-tray__go[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

.djj-compare-tray__hint {
	width: 100%;
	margin: 0;
	font-size: 12px;
	color: var(--djj-cmp-muted);
}

/* ---------------------------------------------------------------- toast */

.djj-compare-toast {
	position: fixed;
	left: 50%;
	bottom: 104px;
	z-index: 10000;
	max-width: min(92vw, 420px);
	padding: 11px 18px;
	border-radius: 3px;
	background: var(--djj-cmp-navy);
	color: #fff;
	font-size: 13.5px;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity .18s ease, transform .18s ease;
}

.djj-compare-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- bảng */

.djj-compare-note {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #EFEFEA;
	font-size: 13px;
	color: #4A4A45;
}

/* Ba rule dưới đây neo vào #djj-compare-mount, KHÔNG phải để cho đẹp.
   Trước khi tách file, CSS in ở footer nên luôn nằm cuối tài liệu và thắng nhờ
   thứ tự. Sau khi tách, LiteSpeed gộp file này vào bộ CSS chung — hiện nó vẫn
   giữ đúng thứ tự nên vẫn thắng, nhưng đó là một bảo đảm mượn của plugin cache.
   Neo bằng id thì thắng bất kể thứ tự, không cần !important. */
#djj-compare-mount .djj-compare-scroll {
	overflow: auto;
	max-height: 62vh;
}

.djj-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.djj-compare-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #fff;
	border-bottom: 1px solid var(--djj-cmp-line);
	padding: 12px 14px 13px;
	text-align: start;
	vertical-align: top;
	font-weight: 400;
}

.djj-compare-table thead th:first-child {
	inset-inline-start: 0;
	z-index: 4;
	width: 196px;
}

.djj-compare-table__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--djj-cmp-muted);
}

.djj-compare-col {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-inline-end: 26px;
}

#djj-compare-mount .djj-compare-col img,
#djj-compare-mount .djj-compare-col__nofig {
	display: block;
	height: 86px;
	width: 100%;
	max-width: 100%;
	object-fit: contain;
	margin-bottom: 8px;
	background: var(--djj-cmp-surface);
	border: 1px solid var(--djj-cmp-line);
	border-radius: 3px;
}

#djj-compare-mount .djj-compare-col__x {
	position: absolute;
	top: -4px;
	inset-inline-end: 0;
	border: 0;
	background: transparent;
	color: var(--djj-cmp-muted);
	font-size: 17px;
	line-height: 1;
	padding: 2px 4px;
	cursor: pointer;
}

.djj-compare-col__brand {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--djj-cmp-muted);
}

.djj-compare-col__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.22;
}

.djj-compare-col__type {
	font-size: 12px;
	color: #4A4A45;
}

.djj-compare-table tbody th[scope="row"] {
	position: sticky;
	inset-inline-start: 0;
	z-index: 2;
	width: 196px;
	padding: 11px 14px;
	background: inherit;
	border-bottom: 1px solid var(--djj-cmp-line);
	text-align: start;
	font-size: 13.5px;
	font-weight: 500;
	color: #4A4A45;
}

.djj-compare-table tbody td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--djj-cmp-line);
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}

.djj-compare-table tbody tr {
	background: #fff;
}

.djj-compare-table tbody tr:nth-child(odd of .djj-compare-table__row) {
	background: var(--djj-cmp-surface);
}

.djj-compare-table td.is-diff {
	font-weight: 600;
}

.djj-compare-table .is-empty {
	color: var(--djj-cmp-muted);
	font-style: italic;
	font-size: 12.5px;
}

.djj-compare-table__src {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--djj-cmp-muted);
}

/* Scope đủ sâu để thắng rule `tbody tr:first-child th` của theme, vốn tô hàng
   nhóm ĐẦU TIÊN thành xám nhạt làm chữ trắng biến mất. Không dùng !important. */
.djj-compare-table tbody tr.djj-compare-table__group th {
	position: sticky;
	inset-inline-start: 0;
	padding: 8px 14px;
	background: var(--djj-cmp-band);
	color: var(--djj-cmp-ink);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: start;
}

/* tfoot KHÔNG dính đáy. Bảng thường chỉ có 2-3 hàng, hàng dính sẽ nằm đè lên
   chính hàng dữ liệu cuối cùng. Hàng tên sản phẩm dính ở trên mới là cái đáng
   giữ. */
.djj-compare-table tfoot td,
.djj-compare-table tfoot th {
	background: #fff;
	border-top: 1px solid var(--djj-cmp-line);
	padding: 12px 14px;
}

.djj-compare-table tfoot th {
	position: sticky;
	inset-inline-start: 0;
	z-index: 2;
}

.djj-compare-table__cta {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--djj-cmp-ink);
	border-radius: 3px;
	color: var(--djj-cmp-ink);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

/* ---------------------------------------------- dau popup va tuy chon */

/* 56px la co chu cua trang, qua lon cho mot hop thoai. */
#elementor-popup-modal-11265 .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.12;
}

.djj-compare-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 11px;
	border: 1px solid var(--djj-cmp-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--djj-cmp-ink);
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, background .15s ease;
}

.djj-compare-switch:hover {
	border-color: var(--djj-cmp-ink);
}

.djj-compare-switch:has(input:checked) {
	background: var(--djj-cmp-band);
	border-color: var(--djj-cmp-band);
}

.djj-compare-switch input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--djj-cmp-ink);
	cursor: pointer;
}

/* Khong san pham nao co anh thi bo han o anh: 86px trong nhan ba cot la
   khoang trang vo nghia trong mot hop thoai von da chat. */
#djj-compare-mount thead:not(:has(.djj-compare-col img)) .djj-compare-col__nofig {
	display: none;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.djj-compare-table thead th:first-child,
	.djj-compare-table tbody th[scope="row"],
	.djj-compare-table tfoot th {
		width: 104px;
		min-width: 104px;
	}

	.djj-compare-table thead th,
	.djj-compare-table tbody td,
	.djj-compare-table tfoot td {
		min-width: 140px;
		scroll-snap-align: start;
	}

	.djj-compare-scroll {
		scroll-snap-type: x proximity;
		max-height: 58vh;
	}

	/* Kho hep: ba o nam chung mot hang thi moi o chi con ~23px va ten vo vun.
	   O trong khong noi len dieu gi nen bo han; o da chon chiem tron mot hang,
	   hai nut xuong hang duoi. */
	.djj-compare-tray__inner {
		gap: 8px;
		padding: 10px 16px;
	}

	.djj-compare-tray__empty,
	.djj-compare-tray__spacer {
		display: none;
	}

	.djj-compare-tray__item {
		flex: 1 0 100%;
		min-width: 0;
	}

	.djj-compare-tray__go {
		margin-inline-start: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.djj-compare-tray,
	.djj-compare-toast,
	.djj-compare-btn {
		transition: none;
	}
}