/*!
 * SaaS Experience Bridge — Bốn khối khoá lớn và lời mời đăng ký
 *
 * 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.
 */

/* --------------------------------------------------------------------------
 * Smart price — ba chiến lược giá, con số bị khoá
 *
 * Ba thẻ ngang hàng nhau, không thẻ nào được nổi hơn: đây là ba lựa chọn, không
 * phải một khuyến nghị kèm hai phương án dự phòng. Cái nổi bật duy nhất là câu
 * mốc phía trên — con số thật mà cả ba dựa vào.
 * ----------------------------------------------------------------------- */

/* Hai khối giữa mang dáng "panel" của bản mẫu: đầu panel có vạch ngăn riêng. */
.spe-smart,
.spe-positions {
	background: var(--spe-surface);
	border: 1px solid var(--spe-border);
	border-radius: var(--spe-panel-radius);
	box-shadow: var(--spe-panel-shadow);
	display: block;
	padding: 0;
}

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

.spe-smart__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	justify-content: space-between;
}

.spe-smart__head .spe-section__title,
.spe-positions__head .spe-section__title {
	color: var(--spe-ink);
	font-size: 12.5px;
	letter-spacing: 0;
	margin: 0;
	text-transform: none;
}

.spe-positions__hint {
	color: var(--spe-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.spe-smart__anchor {
	color: var(--spe-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* Câu dẫn nằm ở đầu panel, canh phải — đúng chỗ `hint` của bản mẫu. */
/*
 * Một dòng: câu này đứng cạnh tiêu đề panel nên xuống dòng là hàng tiêu đề cao
 * gấp đôi. Không đặt trần độ rộng — để nó dùng hết phần ngang còn lại.
 */
.spe-smart__lead {
	color: var(--spe-muted);
	font-size: 11px;
	line-height: 1.4;
	margin: 0;
	text-align: end;
}

.spe-smart__grid {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	padding: 10px;
}

/*
 * Vạch màu ở mép trên chính là VIỀN của thẻ, không phải một thanh dán đè lên.
 * Dán đè thì góc bo của thanh và của thẻ không bao giờ khớp nhau tuyệt đối, và
 * ở khổ nhỏ nó lộ ra thành một đường lệch chạy quanh mép.
 */
.spe-smart__card {
	background: var(--spe-surface);
	border: 1px solid var(--spe-border);
	border-block-start: 3px solid currentColor;
	border-radius: var(--spe-panel-radius);
	display: grid;
	gap: 5px;
	padding: 10px 12px 11px;
}

.spe-smart__card--premium {
	color: var(--spe-warning);
}

.spe-smart__card--parity {
	color: var(--spe-accent-strong);
}

.spe-smart__card--value {
	color: var(--spe-good);
}

.spe-smart__top {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

.spe-smart__label {
	color: var(--spe-ink);
	font-size: 14px;
	font-weight: 700;
}

/*
 * Icon to hơn hẳn phần chữ: ở một thẻ mà con số đang bị khoá, hình mới là thứ
 * nói ra ý đồ của mức giá đó trước khi người ta kịp đọc.
 */
.spe-smart__icon {
	flex: none;
	height: 26px;
	width: 26px;
}

.spe-smart__price {
	align-items: center;
	display: flex;
	gap: 6px;
	min-block-size: 26px;
}

.spe-smart__unit {
	color: var(--spe-ink-2);
	font-size: 11.5px;
	font-weight: 600;
}

/* Ô khoá trong thẻ mang màu của chính chiến lược đó. */
.spe-smart__card .spe-locked-cell {
	color: inherit;
}

.spe-smart__caption {
	color: var(--spe-ink-2);
	font-size: 11.5px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
 * Giá trị thị trường — một con số bị khoá, đơn vị tiền thì không
 * ----------------------------------------------------------------------- */

.spe-value {
	background: var(--spe-surface);
	border: 1px solid var(--spe-border);
	border-radius: var(--spe-radius-sm);
	display: grid;
	gap: 0.45rem;
	padding: 0.8rem 0.9rem 0.9rem;
}

.spe-value .spe-section__title {
	margin-bottom: 0;
}

.spe-value__row {
	align-items: center;
	color: var(--spe-accent-strong);
	display: flex;
	gap: 0.5rem;
}

/* Đơn vị tiền là phần THẬT của khối này, nên nó đọc như một con số, không như chú thích. */
.spe-value__currency {
	color: var(--spe-ink);
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: 0.01em;
}

.spe-value__caption {
	color: var(--spe-muted);
	font-size: 0.75rem;
	line-height: 1.45;
	margin: 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
 * Chú giải thang giá — năm mức, giá trị bị khoá
 *
 * Cùng một thang màu với ô thứ hạng trong bảng: hai chỗ, một bảng màu. Chấm màu
 * và tên mức là thật — đó là bảng tra cho màu trong bảng; chỉ con số bị khoá.
 * ----------------------------------------------------------------------- */

.spe-band--cheapest {
	--spe-band: #38b6e8;
}

.spe-band--below {
	--spe-band: #2ea84e;
}

.spe-band--average {
	--spe-band: #b0737f;
}

.spe-band--above {
	--spe-band: #f8c36c;
}

.spe-band--highest {
	--spe-band: #f2a105;
}

.spe-positions__list {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 4px 12px 8px;
}

/* Mỗi mức một dòng có vạch ngăn, đúng như bản mẫu. */
.spe-positions__item {
	align-items: center;
	border-bottom: 1px solid var(--spe-border);
	display: grid;
	font-size: 12px;
	gap: 8px;
	grid-template-columns: 9px minmax(0, 1fr) auto;
	padding: 4.5px 0;
}

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

.spe-positions__dot {
	background: var(--spe-band, var(--spe-muted));
	block-size: 9px;
	border-radius: 50%;
	inline-size: 9px;
}

.spe-positions__name {
	color: var(--spe-ink);
	font-size: 12px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Tỉ lệ tồn kho — vòng tròn bị khoá, nằm trong một ô chỉ số
 *
 * Ổ khoá nằm trong LỖ vòng tròn, đúng chỗ con số sẽ hiện khi mở khoá. Vòng tròn
 * bị làm mờ và không kèm phần trăm nào.
 * ----------------------------------------------------------------------- */

.spe-stock {
	align-items: center;
	display: flex;
	gap: 11px;
}

.spe-stock__figure {
	block-size: 52px;
	flex: none;
	inline-size: 52px;
}

/*
 * `filter` được phép ở ĐÂY, và chỉ ở những chỗ như đây: vòng tròn tồn kho xuất
 * hiện đúng MỘT lần mỗi kết quả. Luật là "không filter nào được nhân theo số
 * dòng" — xem .spe-locked-cell__mask trong 09-lock.css.
 */
.spe-stock__chart {
	block-size: 100%;
	filter: blur(4px);
	inline-size: 100%;
}

.spe-stock__track {
	stroke: var(--spe-border-strong);
}

.spe-stock__arc {
	stroke: var(--spe-good);
}

.spe-stock__figure .spe-lock {
	height: 15px;
	width: 15px;
}

.spe-stock__side {
	display: grid;
	gap: 2px;
	justify-items: start;
	min-width: 0;
}

.spe-stock__legend {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spe-stock__key {
	align-items: center;
	color: var(--spe-ink-2);
	display: flex;
	font-size: 11px;
	font-weight: 500;
	gap: 6px;
}

.spe-stock__dot {
	block-size: 8px;
	border-radius: 50%;
	flex: none;
	inline-size: 8px;
}

.spe-stock__key--in .spe-stock__dot {
	background: var(--spe-good);
}

.spe-stock__key--out .spe-stock__dot {
	background: var(--spe-border-strong);
}

/* --------------------------------------------------------------------------
 * Giá trị thị trường — ô chỉ số bị khoá
 * ----------------------------------------------------------------------- */

.spe-stat--locked .spe-locked-cell {
	color: var(--spe-ink-2);
}

.spe-stat--locked .spe-locked-cell--lg .spe-locked-cell__mask {
	block-size: 1.15rem;
	inline-size: 96px;
}

.spe-stat--locked .spe-locked-cell--lg .spe-lock {
	height: 17px;
	width: 17px;
}

/* --------------------------------------------------------------------------
 * Lời mời đăng ký
 *
 * Nằm dưới bảng và dưới nút — hai chỗ người dùng dừng lại thật. Giữ nó ở dạng
 * một dải nhạt, không phải một banner: nó đi kèm kết quả chứ không tranh chỗ
 * với kết quả.
 * ----------------------------------------------------------------------- */

/*
 * Viền chứ không phải nền đặc: dải tiến trình ngay phía trên đã là một khối
 * nền nhạt rồi, hai khối cùng kiểu chồng nhau thì mắt đọc thành một cụm và
 * lời mời chìm vào trong đó.
 */
.spe-invite {
	align-items: flex-start;
	background: var(--spe-surface);
	border: 1px solid var(--spe-accent-strong);
	border-radius: var(--spe-panel-radius);
	display: flex;
	gap: 10px;
	margin-top: 10px;
	padding: 10px 12px;
}

.spe-invite__icon {
	color: var(--spe-accent-strong);
	display: inline-flex;
	flex: none;
	padding-top: 0.1rem;
}

.spe-invite__icon svg {
	height: 17px;
	width: 17px;
}

.spe-invite__body {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

.spe-invite__title {
	color: var(--spe-ink);
	font-size: 12.5px;
	font-weight: 700;
	text-wrap: pretty;
}

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

.spe-invite__note {
	color: var(--spe-muted);
	font-size: 11px;
	line-height: 1.5;
	margin-top: 2px;
	text-wrap: pretty;
}

/* Gạch đầu dòng gỡ rủi ro, ngay dưới nút. */
.spe-perks {
	color: var(--spe-ink-2);
	display: flex;
	flex-wrap: wrap;
	font-size: 11.5px;
	gap: 4px 12px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spe-perk {
	align-items: center;
	display: inline-flex;
	gap: 0.35rem;
}

.spe-perk svg {
	color: var(--spe-good);
	flex: none;
	height: 13px;
	width: 13px;
}

/* Lối quay lại kết quả sau khi đã đóng popup. */
.spe-resume {
	margin: 0.5rem 0 0;
	text-align: center;
}

.spe-chip--resume {
	background: var(--spe-accent-soft);
	border-color: transparent;
	color: var(--spe-accent-strong);
	font-weight: 600;
}

@container (max-width: 620px) {
	.spe-modal__head,
	.spe-modal__body,
	.spe-modal__foot {
		padding-inline: 1rem;
	}
}