@charset "UTF-8";
/* ==========================================================================
   Người Đồng Hành — liên kết tự động giữa các mảng (ndh_auto)
   ==========================================================================

   Phần bổ sung của ndh_auto, không có trong theme WordPress gốc; chỉ nạp khi
   trang có khối (src/lib/ndh/links/*). Dựng bằng class sẵn có của theme:
   lưới .pprods (post-products.css), chip .ptag (post.css), ô .gold-kpi
   (gold.css). Tệp này chỉ bù khoảng cách và thẻ liên kết chéo nhỏ. Màu lấy
   từ tokens.css.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Cuối bài viết: "Sản phẩm được nhắc trong bài" + "Trang liên quan"
   -------------------------------------------------------------------------- */
.lender__main > .pprods--auto { margin-top: 32px; }

.ndhx-related {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--c-line);
}
.pprods--auto + .ndhx-related { border-top: 0; padding-top: 0; margin-top: 20px; }
.ndhx-related__label.ndhx-related__label {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--c-muted);
}
.ndhx-related__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ndhx-related__chips li { margin: 0; padding: 0; }
.ndhx-related__chips li::before { content: none; }
.ndhx-related__chips .ptag { text-decoration: none; }
.ndhx-related__chips .ptag .ico { color: var(--c-brand-600); }

/* --------------------------------------------------------------------------
   Trang giá vàng: "So với gửi tiết kiệm"
   -------------------------------------------------------------------------- */
.ndhx-gs .gold-kpi__value small { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.ndhx-gs .gold-kpi__value.is-up { color: var(--c-up); }
.ndhx-gs .gold-kpi__value.is-down { color: var(--c-down); }
.ndhx-gs__note { margin-top: 10px; }

/* --------------------------------------------------------------------------
   /gui-tiet-kiem/: thẻ "Giá vàng hôm nay"
   -------------------------------------------------------------------------- */
.ndhx-xcard { padding-bottom: 8px; }
.ndhx-xcard__box {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid var(--c-line);
	border-radius: 14px;
	background: #fff;
	color: var(--c-text);
	text-decoration: none;
	transition: border-color .2s, background-color .2s;
}
.ndhx-xcard__box:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); }
.ndhx-xcard__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--c-warm-50);
	color: var(--c-warm-700);
}
.ndhx-xcard__icon .ico { width: 22px; height: 22px; }
.ndhx-xcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ndhx-xcard__label { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--c-muted); }
.ndhx-xcard__title { font-size: 16px; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ndhx-xcard__title b { font-weight: 800; }
.ndhx-xcard__meta { font-size: 13px; color: var(--c-muted); }
.ndhx-xcard__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-brand-700);
}
.ndhx-xcard__go .ico { width: 14px; height: 14px; }

@media (max-width: 640px) {
	.ndhx-xcard__box { flex-wrap: wrap; align-items: flex-start; padding: 14px 16px; }
	.ndhx-xcard__body { flex-basis: calc(100% - 60px); }
	.ndhx-xcard__go { margin-left: 60px; }
}