/*!
 * SaaS Experience Bridge — Bảng nơi bán
 *
 * Một phần của giao diện Experience. Thứ tự nạp do public/ui/manifest.php quy
 * định và là RÀNG BUỘC: nhiều quy tắc dựa vào việc file sau ghi đè file trước
 * ở cùng độ đặc hiệu. Đảo thứ tự là đổi giao diện.
 */

/* --------------------------------------------------------------------------
 * Section: offers — bảng nơi bán
 *
 * Một lưới, không phải một danh sách: người dùng đang so sánh theo cột (giá,
 * sức mạnh, quảng cáo), nên các ô phải thẳng hàng nhau. Hàng tiêu đề và mọi
 * dòng dùng chung --spe-offer-cols do JS đặt theo số cột thật.
 * ----------------------------------------------------------------------- */

/*
 * Bảng nơi bán mang dáng panel của bản mẫu: khung bo, hàng tiêu đề nền xám
 * nhạt, mỗi dòng một vạch ngăn, hover đổi nền. Vẫn là lưới div chứ không phải
 * <table>: ở khổ hẹp lưới gãy được thành thẻ, còn <table> thì không.
 */
.spe-offers {
	background: var(--spe-surface);
	border: 1px solid var(--spe-border);
	border-radius: var(--spe-panel-radius);
	box-shadow: var(--spe-panel-shadow);
	display: grid;
	overflow: hidden;
}

.spe-offers__head,
.spe-offer {
	align-items: center;
	column-gap: 0.75rem;
	display: grid;
	grid-template-columns: var(--spe-offer-cols, minmax(0, 1fr) auto);
}

.spe-offers__toolbar {
	align-items: center;
	border-bottom: 1px solid var(--spe-border);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	justify-content: space-between;
	padding: 8px 12px;
}

.spe-offers__title {
	color: var(--spe-ink);
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}

.spe-offers__note {
	color: var(--spe-ink-2);
	font-size: 11.5px;
	text-wrap: pretty;
}

.spe-offers__head {
	background: var(--spe-head-bg);
	border-bottom: 1px solid var(--spe-border-strong);
	color: var(--spe-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 6px 10px;
}

.spe-offers__col {
	align-items: center;
	display: flex;
	gap: 0.3rem;
	min-width: 0;
}

/*
 * Chỉ cột giá canh phải, đúng như `th.r` của bản mẫu; những cột sau canh trái
 * để mắt đi thẳng một mạch từ trái sang.
 */
.spe-offers__col--end {
	justify-content: flex-end;
	text-align: end;
}

.spe-offers__col--start {
	justify-content: flex-start;
	text-align: start;
}

/* --------------------------------------------------------------------------
 * Cột thứ hạng giá
 *
 * Con số THẬT, tính từ chính những giá đang hiện — không phải một ô khoá. Nó
 * đứng đầu dòng để bảng đọc ra ngay là một bảng xếp hạng theo giá.
 * ----------------------------------------------------------------------- */

.spe-offer__position {
	justify-content: flex-start;
}

/*
 * Khối chờ dùng chung cho mọi ô đang đọc dở; bề ngang do JS đặt theo từng ô để
 * chỗ trống đúng bằng thứ sắp hiện ra, không co giãn khi dữ liệu về.
 */

.spe-offer__pos {
	align-items: center;
	color: var(--spe-ink-2);
	display: inline-flex;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	gap: 5px;
	white-space: nowrap;
}

/* Chấm màu của mức giá, đúng như chip trong bản mẫu. */
.spe-offer__pos--band::before {
	background: var(--spe-band);
	block-size: 9px;
	border-radius: 50%;
	content: "";
	flex: none;
	inline-size: 9px;
}

/* Thang màu dùng chung với chú giải: một bảng màu cho cả hai chỗ. */
.spe-offer__pos--band {
	color: var(--spe-ink);
}

.spe-offer__pos-icon {
	block-size: 12px;
	color: var(--spe-band, var(--spe-good));
	flex: none;
	inline-size: 12px;
}

.spe-offers__col svg {
	height: 12px;
	opacity: 0.8;
	width: 12px;
}

/*
 * Dòng ngoài khung nhìn thì không vẽ.
 *
 * Một dòng nơi bán không rẻ: favicon, chip thứ hạng, ô giá, và 3–5 ô khoá mà
 * mỗi ô là một SVG. Nhân với một danh sách vài chục nơi bán thì mỗi khung hình
 * khi cuộn, trình duyệt phải lo cho hàng trăm phần tử mà người dùng đang không
 * nhìn thấy cái nào.
 *
 * `content-visibility: auto` cho phép bỏ qua hẳn layout và paint của phần thân
 * dòng khi nó nằm ngoài khung nhìn — chi phí cuộn thành tỉ lệ với những gì đang
 * hiện trên màn hình, không phải với độ dài danh sách.
 *
 * `contain-intrinsic-size: auto 41px` là chỗ giữ chiều cao. Từ khoá `auto` nói
 * trình duyệt NHỚ chiều cao thật sau lần vẽ đầu tiên và dùng lại nó — nên con
 * số 41px chỉ là phỏng đoán cho lần đầu, và thanh cuộn không nhảy khi dòng ra
 * vào khung nhìn. Ở khổ hẹp dòng gãy thành thẻ và cao hơn hẳn; `auto` xử lý
 * đúng chuyện đó mà không cần một con số thứ hai.
 */
.spe-offer {
	border-bottom: 1px solid var(--spe-border);
	color: inherit;
	contain-intrinsic-size: auto 41px;
	content-visibility: auto;
	font-size: 12.5px;
	padding: 6px 10px;
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.spe-offer:last-child {
	border-bottom: 0;
}

a.spe-offer:hover {
	background: var(--spe-head-bg);
}

a.spe-offer:focus-visible {
	box-shadow: var(--spe-ring);
	outline: none;
}

/*
 * Ảnh sản phẩm — chỉ có ở luồng domain (`product_links.image`, hợp đồng 1.3.0).
 * Kích thước cố định để dòng không xô lệch khi ảnh tải xong hoặc tải hỏng.
 */
.spe-offer__thumb {
	background-color: var(--spe-surface-2);
	border-radius: 8px;
	flex: none;
	height: 40px;
	overflow: hidden;
	width: 40px;
}

.spe-offer__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.spe-offer__seller {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	min-width: 0;
}

.spe-offer__icon {
	align-items: center;
	block-size: 26px;
	border-radius: 6px;
	display: inline-flex;
	flex: none;
	inline-size: 26px;
	justify-content: center;
	overflow: hidden;
}

.spe-offer__icon img {
	block-size: 24px;
	inline-size: 24px;
	object-fit: contain;
}

/*
 * Site không có favicon: hai chữ đầu trên nền màu, như logo vuông của bản mẫu.
 * Màu lấy theo tên miền nên cùng một shop luôn ra cùng một màu — đổi màu mỗi
 * lần tải thì nó thành nhiễu chứ không phải dấu hiệu nhận biết.
 */
.spe-offer__monogram {
	align-items: center;
	block-size: 100%;
	color: #fff;
	display: flex;
	font-size: 10px;
	font-weight: 700;
	inline-size: 100%;
	justify-content: center;
	line-height: 1;
}

/*
 * flex: 1 để khối này luôn có bề rộng thật. Dòng khung xương đo bằng phần trăm,
 * mà phần trăm đặt trong một khối co theo nội dung thì ra 0 — cả dòng chờ biến
 * mất trong khi DOM vẫn đúng. Dòng thật không đổi: tiêu đề vốn cắt bằng ellipsis.
 */
.spe-offer__body {
	display: grid;
	flex: 1 1 auto;
	gap: 0.1rem;
	min-width: 0;
}

.spe-offer__title {
	color: var(--spe-ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spe-offer__meta {
	align-items: center;
	display: flex;
	gap: 0.35rem;
	min-width: 0;
}

/*
 * Thứ hạng bị khoá: dính liền tên miền, đọc như một thuộc tính của nơi bán.
 * Không nền, không viền — nó là một con số nằm trong dòng, không phải một cái
 * tag; đúng khuôn "#12" của mấy công cụ kiểm tra thứ hạng đời đầu.
 */
.spe-offer__rank {
	align-items: center;
	display: inline-flex;
	flex: none;
	gap: 4px;
}

.spe-offer__sep {
	color: var(--spe-border-strong);
}

/* Ổ khoá của thứ hạng đi cùng màu với dòng "#rank:" ngay trước nó. */
.spe-offer__rank .spe-locked-cell {
	color: var(--spe-good);
}

/* Giữ nguyên của plugin: chữ thứ hạng màu xanh lá, kiểu dòng URL của Google. */
.spe-offer__rank-label {
	color: var(--spe-good);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Tên miền màu xanh dương như bản mẫu: cả dòng là một liên kết mở ra ngoài. */
.spe-offer__domain {
	color: var(--spe-link);
	font-size: 11px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spe-offer__aside {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	min-width: 0;
}

.spe-offer__cell {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	min-width: 0;
}

/* Nhãn cột lặp trong ô: chỉ có ích ở khổ hẹp, nơi hàng tiêu đề đã biến mất. */
.spe-offer__cell-label {
	color: var(--spe-muted);
	display: none;
	font-size: 0.75rem;
}

.spe-offer__price {
	color: var(--spe-ink);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * Ô giá đang được đọc.
 *
 * Rộng đúng bằng một khoảng giá thật để dòng không co giãn khi số về — danh
 * sách phải đứng yên, không thì lazy-load nhìn như trang đang giật. Dùng lại
 * .spe-skel để nó là CÙNG một ngôn ngữ chờ với phần còn lại của giao diện,
 * và để thừa hưởng luôn nhánh prefers-reduced-motion đã có.
 *
 * Sóng chờ nằm ở lớp giả và chạy bằng transform — xem .spe-skel trong
 * 11-feedback.css, hai bên dùng chung một keyframes.
 */
.spe-offer__price-wait {
	background: var(--spe-surface-2);
	border-radius: 6px;
	display: block;
	height: 1rem;
	overflow: hidden;
	position: relative;
	width: 84px;
}

/*
 * Lý do không đọc được giá, ở dạng CHỮ.
 *
 * Chỉ dùng khi cả lần chạy không ra giá nào và khoá đã tắt hết — xem fillPrice()
 * và locksAllowed(). Nhạt và nhỏ hơn một mức giá thật: nó là một lời giải thích,
 * không phải một con số để so.
 */
.spe-offer__reason {
	color: var(--spe-muted);
	font-size: 11.5px;
	line-height: 1.4;
	text-align: end;
	text-wrap: pretty;
}

.spe-offer__open {
	color: var(--spe-muted);
	flex: none;
	height: 12px;
	opacity: 0;
	transition: opacity 0.15s ease;
	width: 12px;
}

a.spe-offer:hover .spe-offer__domain {
	text-decoration: underline;
}

a.spe-offer:hover .spe-offer__open,
a.spe-offer:focus-visible .spe-offer__open {
	color: var(--spe-accent-strong);
	opacity: 1;
}