@charset "UTF-8";
/* ==========================================================================
   Người Đồng Hành — giao diện dùng chung
   ==========================================================================

   Nạp sau main.css trên mọi trang. Gồm: đầu trang, chân trang, trang chủ và
   những thẻ xuất hiện ở nhiều nơi (thẻ dự án, thẻ chuyên gia, thẻ bài viết,
   bảng cổ phiếu, công cụ tính). Bố cục riêng của trang module nằm ở
   ndh-pages.css.

   Ngôn ngữ thiết kế: nền trắng sạch, xanh ngọc đậm làm chủ đạo, vàng hổ phách
   cho hành động chính; bo góc lớn (14–20px), bóng mềm ám xanh; chữ số dùng
   tabular-nums để các cột giá thẳng hàng.
   -------------------------------------------------------------------------- */

:root {
	--r-card: 16px;
	--r-xl: 22px;
	--sh-soft: 0 1px 2px rgba(31, 31, 31, .05), 0 8px 24px -12px rgba(31, 31, 31, .18);
	--sh-lift: 0 2px 4px rgba(31, 31, 31, .06), 0 22px 44px -22px rgba(31, 31, 31, .35);
	--tone: var(--c-brand-600);
	--tone-bg: var(--c-brand-50);
}

.is-fin   { --tone: var(--c-pillar-fin);   --tone-bg: #F7F3EB; }
.is-stock { --tone: var(--c-pillar-stock); --tone-bg: #FDEED6; }
.is-bank  { --tone: var(--c-pillar-bank);  --tone-bg: #FDEDD3; }
.is-re    { --tone: var(--c-pillar-re);    --tone-bg: #FDF2E0; }

.ico.is-flip { transform: rotate(180deg); }

/* ==========================================================================
   Dải chỉ số thị trường
   ========================================================================== */
.mkt-strip {
	background: var(--c-night-900);
	color: rgba(255, 255, 255, .78);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* Rời khỏi đầu trang thì thu dải chỉ số lại, trả 34px cho nội dung; về sát đầu
   trang lại hiện. Thu bằng chiều cao chứ không bằng lề âm: dải này là phần tử
   đầu trong header nên lề âm sẽ gộp lề với header và kéo cả header thay vì thu
   riêng nó. Chiều cao thật do JS ghi vào --mkt-h. */
.site-head--mktauto .mkt-strip {
	height: var(--mkt-h, 34px);
	overflow: hidden;
	transition: height .24s ease, opacity .18s ease, visibility .24s;
}
.site-head--mktauto.is-mktoff .mkt-strip {
	height: 0;
	opacity: 0;
	visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.site-head--mktauto .mkt-strip { transition: none; }
}
.mkt-strip__inner { display: flex; align-items: center; gap: 18px; height: 34px; }
.mkt-strip__label {
	display: inline-flex; align-items: center; gap: 7px;
	flex: none;
	font-weight: 700; letter-spacing: .4px; text-transform: uppercase; font-size: 11px;
	color: var(--c-warm-400);
}
.mkt-strip__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: #E0B46E;
	box-shadow: 0 0 0 3px rgba(224, 180, 110, .22);
	animation: ndh-pulse 2.4s ease-in-out infinite;
}
@keyframes ndh-pulse { 50% { box-shadow: 0 0 0 6px rgba(224, 180, 110, 0); } }
@media (prefers-reduced-motion: reduce) { .mkt-strip__dot { animation: none; } }

.mkt-strip__list {
	display: flex; gap: 22px;
	flex: 1; min-width: 0;
	overflow-x: auto; scrollbar-width: none;
	white-space: nowrap;
}
.mkt-strip__list::-webkit-scrollbar { display: none; }
.mkt-strip__item, .mkt-strip__item a { display: inline-flex; align-items: center; gap: 7px; }
.mkt-strip__item a:hover .mkt-strip__name { color: #fff; text-decoration: underline; }
.mkt-strip__name { color: rgba(255, 255, 255, .62); }
.mkt-strip__val { font-weight: 600; color: #fff; }
.mkt-strip__chg { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.mkt-strip__chg .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.mkt-strip__item.is-up .mkt-strip__chg { color: #E7BE7C; }
.mkt-strip__item.is-down .mkt-strip__chg { color: #F87171; }
.mkt-strip__item.is-ref .mkt-strip__chg { color: #FCC976; }
.mkt-strip__time { flex: none; color: rgba(255, 255, 255, .5); font-size: 11.5px; }

/* ==========================================================================
   Đầu trang
   ========================================================================== */

/* fixed chứ không sticky: đầu trang co giãn (thu dải chỉ số, thu menu) mà vẫn
   nằm ngoài luồng, nên nội dung bên dưới không nhảy theo. Chỗ của nó do
   .head-space giữ, cao bằng đúng đầu trang lúc chưa thu (JS đo, ghi vào
   --head-space-h). */
.site-head { position: fixed; left: 0; right: 0; top: 0; }
.head-space { height: var(--head-space-h, 156px); }
/* Nhảy tới #main (link "Bỏ qua tới nội dung") phải dừng dưới đầu trang cố định,
   không thì dòng đầu bị che. */
#main { scroll-margin-top: calc(var(--sticky-top, 156px) + 12px); }
body.admin-bar .site-head { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-head { top: 46px; }
}

.topbar { border-bottom: 0; }
.topbar__inner { height: 72px; }
/* 72px khi cuộn: giữ nguyên chiều cao thanh, không thu lại cho logo khỏi chạm mép. */
.site-head.is-stuck .topbar__inner { height: 72px; }

.brand { gap: 11px; }

/*
 * Logo đặt chiều cao, để bề ngang tự co theo tỷ lệ. Đặt cả hai chiều thì lockup
 * bị kéo méo ngay khi đổi sang bản có hay không có slogan — hai bản khác tỷ lệ.
 */
/*
 * Đặt BỀ NGANG chứ không đặt chiều cao. Theme có max-width:100% cho mọi ảnh;
 * nếu khoá chiều cao rồi để bề ngang tự co thì gặp cột hẹp, max-width sẽ bóp
 * ngang lockup mà chiều cao giữ nguyên — chữ bị nén méo. Đặt bề ngang và để
 * height:auto thì co giãn vẫn đúng tỷ lệ.
 */
/*
   Bảng thông tin: liên hệ · giờ làm việc · văn phòng, ba thẻ cùng cỡ trong
   một khung sáng nhẹ nằm cạnh cột thương hiệu.

   Trước đây ba thứ này rải rác — email và giờ làm việc nhét trong cột thương
   hiệu khiến cột đó dài hơn các cột liên kết gần 200px, còn địa chỉ với pháp
   nhân thành một dải riêng căn lề trái, bỏ trống nửa phải chân trang. Gom
   lại một khung thì người đọc tìm thông tin liên hệ ở một chỗ duy nhất.
*/
.foot-info {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 30px;
	padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
	border-radius: var(--r-xl);
	background: rgba(255, 255, 255, .045);
	border: 1px solid var(--c-night-line);
}
.finfo { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.finfo__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--c-warm-400);
}
.finfo__title .ico { width: 14px; height: 14px; flex: none; opacity: .9; }

/*
   Huy hiệu trạng thái. Chấm xanh khi đang mở, xám khi đã đóng — cùng ngôn ngữ
   với bảng điện chứng khoán nên người đọc quen mắt sẵn. JavaScript mới bỏ
   hidden, chưa chạy được thì không hiện gì, bảng giờ bên dưới vẫn đủ ý.
*/
.fnow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--r-pill);
	align-self: start;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--c-night-line);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: rgba(255, 255, 255, .72);
}
.fnow__cham {
	width: 7px; height: 7px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
}
.fnow--mo { background: rgba(11, 122, 62, .18); border-color: rgba(42, 177, 101, .4); color: #8FE3B4; }
.fnow--mo .fnow__cham { background: #2AB165; box-shadow: 0 0 0 3px rgba(42, 177, 101, .22); }

/* Tên pháp nhân: dòng nặng nhất của thẻ Chủ quản. */
.finfo__cq { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: #fff; }

/*
   Dòng "nhãn — nội dung". Nhãn chiếm một cột cố định để MST, văn phòng và
   email thẳng hàng nhau; nội dung dài thì xuống dòng trong cột của nó chứ
   không chui xuống dưới nhãn.
*/
.finfo__dong {
	margin: 0;
	font-size: 13.5px;
	font-style: normal;
	line-height: 1.6;
	color: rgba(255, 255, 255, .86);
	overflow-wrap: anywhere;
}
/* Nhãn chạy liền mạch chữ, không chiếm cột riêng: cột nhãn cố định ăn mất
   gần 80px bề ngang thẻ, đẩy địa chỉ xuống bốn dòng. */
.finfo__dong > span {
	margin-right: 7px;
	font-size: 11.5px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	white-space: nowrap;
}
.finfo__dong a { color: inherit; }
.finfo__dong a:hover { color: var(--c-warm-400); }

/* Giờ làm việc: hai cột ngày | giờ, liệt kê đủ bảy ngày. */
.fhours {
	display: grid;
	grid-template-columns: auto auto;
	gap: 2px 14px;
	justify-content: start;
	font-size: 13.5px;
	line-height: 1.5;
	white-space: nowrap;
}
.fhours__ngay { color: rgba(255, 255, 255, .62); }
.fhours__gio { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Ngày nghỉ viết nhạt hơn để mắt lướt qua được ngay. */
.fhours__gio--nghi { color: rgba(255, 255, 255, .5); font-weight: 400; }

/* Liên kết bản đồ: một ô bấm được, tên ở trên, địa chỉ nhỏ ở dưới. */
.fmap {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 13px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--c-night-line);
	transition: background-color .2s, border-color .2s;
}
.fmap:hover { background: rgba(255, 255, 255, .1); border-color: rgba(249, 175, 57, .5); }
.fmap .ico { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--c-warm-400); }
.fmap span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fmap strong { font-size: 13.5px; font-weight: 600; color: #fff; }
.fmap em { font-style: normal; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .58); }

/* Icon mạng xã hội nằm trong thẻ Kết nối nên nhỏ hơn bản đứng riêng. */
.finfo .foot-social { margin-top: 2px; gap: 7px; }
.finfo .foot-social a { width: 36px; height: 36px; border-radius: 10px; }
.finfo .foot-social .ico { width: 17px; height: 17px; }

/* Nút tìm kiếm chỉ dùng ở màn hẹp; màn rộng đã có sẵn ô tìm kiếm. */
.search-toggle { display: none; }
/* Khối liên hệ cuối ngăn kéo: chỉ dùng ở màn hẹp. */
.nav-foot { display: none; }

.brand__lockup { display: block; width: 180px; height: auto; max-width: 100%; flex: none; }
.foot-brand .brand__lockup { width: 250px; }

/*
 * Màn hẹp: thanh đầu trang xuống hai hàng — logo và các nút ở hàng trên, ô tìm
 * kiếm chiếm trọn hàng dưới.
 *
 * Xếp một hàng thì logo và ô tìm kiếm tranh nhau chỗ: đo trên màn 360px, logo
 * đủ rộng để đọc được slogan sẽ bóp ô tìm kiếm còn 21px. Mà ngay cả trước khi
 * đổi logo, ô đó cũng chỉ còn 74px — gõ vào không thấy mình gõ gì. Tách hàng
 * thì cả hai cùng đủ chỗ.
 */
@media (max-width: 782px) {
	.topbar__inner { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 8px; }
	.site-head.is-stuck .topbar__inner { height: auto; }
	.topbar__inner .brand { margin-right: auto; }

	/*
	 * Ô tìm kiếm gập lại, mở ra khi bấm nút kính lúp. Để nó mở sẵn thì đầu
	 * trang mất hẳn một hàng (48px) cho việc người đọc ít dùng hơn lướt tin.
	 * Mở ra vẫn chiếm trọn hàng dưới để gõ cho thoải mái.
	 */
	.topbar__inner .topsearch { display: none; order: 3; flex: 1 0 100%; max-width: none; }
	body.search-open .topbar__inner .topsearch { display: flex; }

	.search-toggle {
		display: grid; place-items: center;
		width: 42px; height: 42px; flex: none;
		border: 1px solid var(--c-line); border-radius: 12px;
		background: #fff; color: var(--c-ink); cursor: pointer;
	}
	.search-toggle .ico { width: 20px; height: 20px; }
	.search-toggle .ico--close { display: none; }
	body.search-open .search-toggle { background: var(--c-soft); }
	body.search-open .search-toggle .ico--search { display: none; }
	body.search-open .search-toggle .ico--close { display: block; }

	/* Mở menu thì đóng ô tìm kiếm, tránh hai thứ cùng chiếm chỗ. */
	body.nav-open .topbar__inner .topsearch { display: none; }
	/*
	 * Co theo be ngang man, chan tren bang co desktop (180px). De 240px co dinh
	 * thi tren may 360px logo chiem 67% be ngang — to hon ca ban desktop va de
	 * lai mot khoang trong lon canh nut menu.
	 */
	.brand__lockup { width: clamp(150px, 44vw, 180px); }
	.foot-brand .brand__lockup { width: min(240px, 66vw); }
}

.brand__mark { width: 42px; height: 42px; flex: none; }
.brand .ndh-mark { width: 42px; height: 42px; filter: drop-shadow(0 6px 10px rgba(68, 68, 68, .28)); }
.brand__name { font-size: 19px; font-weight: 800; color: var(--c-brand-800); letter-spacing: -.4px; }
.brand__tag { font-size: 11.5px; font-weight: 600; color: var(--c-brand-500); line-height: 1.35; margin-top: 2px; }

.topsearch { max-width: 440px; background: var(--c-soft); border: 1px solid var(--c-line); }
.topsearch button { background: var(--c-brand-700); }
.topsearch input::placeholder { color: #949494; }

.head-experts {
	display: inline-flex; align-items: center; gap: 8px;
	height: 42px; padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	font-size: 14.5px; font-weight: 600; color: var(--c-brand-700);
	white-space: nowrap;
	transition: border-color .2s, background-color .2s;
}
.head-experts .ico { width: 19px; height: 19px; }
.head-experts:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); }

.head-cta {
	height: 42px;
	padding: 0 6px 0 18px;
	background: var(--c-warm-400);
	color: var(--c-ink);
	box-shadow: 0 8px 18px -10px rgba(109, 109, 109, .75);
}
.head-cta:hover { background: #F6BE64; }
.head-cta__tag { background: var(--c-ink); color: var(--c-warm-400); padding: 5px 10px; }

/* --- Thanh menu: trắng, gạch chân theo màu từng mảng --- */
.mainbar {
	background: #fff;
	border-top: 1px solid var(--c-line-soft);
	border-bottom: 1px solid var(--c-line);
}

/* Cuộn xuống thì thu thanh menu lại nhường chỗ cho nội dung, cuộn lên hiện lại
   ngay. Kéo bằng margin âm chứ không dùng overflow/height để menu thả xuống
   (mega menu) không bị cắt. Chiều cao thật do JS đo và ghi vào --mainbar-h. */
@media (min-width: 901px) {
	.site-head--autohide .mainbar {
		transition: margin-top .26s ease, opacity .2s ease, visibility .26s;
	}
	.site-head--autohide.is-navhidden .mainbar {
		margin-top: calc(-1 * var(--mainbar-h, 49px));
		opacity: 0;
		visibility: hidden;
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-head--autohide .mainbar { transition: none; }
}
.mainnav__link {
	height: 48px;
	padding: 0 16px;
	color: var(--c-ink);
	font-size: 15px;
	font-weight: 600;
}
.mainnav__link:hover { color: var(--tone, var(--c-brand-600)); }
.mainnav__item--stock { --tone: var(--c-pillar-stock); }
.mainnav__item--re    { --tone: var(--c-pillar-re); }
.mainnav__item--bank  { --tone: var(--c-pillar-bank); }
.mainnav__item--fin   { --tone: var(--c-pillar-fin); }
.mainnav__link::after { left: 16px; right: 16px; background: var(--tone, var(--c-brand-600)); }
.mainnav__item--parent > .mainnav__link::before {
	content: "";
	order: 2;
	width: 7px; height: 7px;
	margin-left: 8px; margin-top: -3px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
}
.mainnav__item.current-menu-item > .mainnav__link { color: var(--tone, var(--c-brand-600)); }

.mainbar__cta {
	background: var(--c-brand-50);
	border: 1px solid var(--c-brand-100);
	color: var(--c-brand-700);
}
.mainbar__cta:hover { background: var(--c-brand-100); }

/* --- Menu con --- */
.subnav {
	top: 100%;
	min-width: 280px;
	padding: 10px;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	box-shadow: 0 24px 60px -28px rgba(31, 31, 31, .45), 0 2px 6px rgba(31, 31, 31, .06);
}
.subnav__list { display: grid; gap: 2px; }
.subnav__link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; }
.subnav__link:hover { padding-left: 12px; background: var(--tone-bg, var(--c-brand-50)); color: var(--c-ink); }
.mainnav__item--stock { --tone-bg: #FDEED6; }
.mainnav__item--re    { --tone-bg: #FDF2E0; }
.mainnav__item--bank  { --tone-bg: #FDEDD3; }
.mainnav__item--fin   { --tone-bg: #F7F3EB; }
.subnav__ico {
	display: grid; place-items: center;
	width: 36px; height: 36px; flex: none;
	border-radius: 10px;
	background: var(--tone-bg, var(--c-brand-50));
	color: var(--tone, var(--c-brand-600));
}
.subnav__ico .ico { width: 19px; height: 19px; }
.subnav__text { display: flex; flex-direction: column; line-height: 1.3; }
.subnav__label { font-weight: 600; color: var(--c-ink); }
.subnav__desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.subnav__title {
	padding: 6px 12px 8px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
	color: var(--muted);
}
.subnav--mega {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(220px, 1fr));
	gap: 6px 10px;
	min-width: 560px;
	padding: 14px;
}
.mainnav__item--bank .subnav--mega { --cols: 3; min-width: 760px; left: -120px; }
.subnav__foot {
	grid-column: 1 / -1;
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 6px; padding: 12px 14px;
	border-radius: 12px;
	background: var(--tone-bg, var(--c-brand-50));
	font-size: 14px; font-weight: 700; color: var(--tone, var(--c-brand-700));
}
.subnav__foot .ico { width: 18px; height: 18px; }

/* ==========================================================================
   Nút, nhãn, chip dùng chung
   ========================================================================== */
.ndh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 46px; padding: 0 20px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	font-size: 15px; font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.ndh-btn .ico { width: 19px; height: 19px; }
.ndh-btn:hover { transform: translateY(-1px); }
.ndh-btn--warm { background: var(--c-warm-400); color: var(--c-ink); box-shadow: 0 10px 22px -12px rgba(109, 109, 109, .8); }
.ndh-btn--warm:hover { background: #F6BE64; }
.ndh-btn--primary { background: var(--c-brand-700); color: #fff; }
.ndh-btn--primary:hover { background: var(--c-brand-800); }
.ndh-btn--ghost { background: #fff; border-color: var(--c-line); color: var(--c-brand-700); }
.ndh-btn--ghost:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); }
.ndh-btn--glass { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); color: #fff; }
.ndh-btn--glass:hover { background: rgba(255, 255, 255, .2); }
.ndh-btn--block { display: flex; width: 100%; }

.ndh-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 11px 4px 8px;
	border-radius: var(--r-pill);
	background: var(--tone-bg);
	color: var(--tone);
	font-size: 12.5px; font-weight: 700;
	line-height: 1.5;
}
.ndh-chip .ico { width: 15px; height: 15px; }
.ndh-chip--fin   { --tone: var(--c-pillar-fin);   --tone-bg: #F7F3EB; }
.ndh-chip--stock { --tone: var(--c-pillar-stock); --tone-bg: #FDEED6; }
.ndh-chip--bank  { --tone: var(--c-pillar-bank);  --tone-bg: #FDEDD3; }
.ndh-chip--re    { --tone: var(--c-pillar-re);    --tone-bg: #FDF2E0; }
.ndh-chip--light { background: rgba(255, 255, 255, .14); color: #fff; }

.ndh-demo {
	display: inline-flex; align-items: center;
	padding: 2px 9px;
	border: 1px dashed #D89B38;
	border-radius: var(--r-pill);
	background: #FFFAF3;
	color: #5F5F5F;
	font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
	white-space: nowrap;
}
.ndh-demo--light { background: rgba(255, 250, 243, .14); color: #FEE3B7; border-color: rgba(254, 227, 183, .6); }

.ndh-delta, .ndh-upside { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-up > .ndh-delta, .ndh-delta.is-up, .ndh-upside.is-up { color: var(--c-up); }
.ndh-delta.is-down, .ndh-upside.is-down { color: var(--c-down); }
.ndh-delta.is-ref, .ndh-upside.is-ref { color: var(--c-ref); }
.ndh-upside { display: inline-block; padding: 2px 8px; border-radius: 6px; }
.ndh-upside.is-up { background: var(--c-up-50); }
.ndh-upside.is-down { background: var(--c-down-50); }

.ndh-rec {
	display: inline-flex; align-items: center;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font-size: 12.5px; font-weight: 700;
	white-space: nowrap;
}
.ndh-rec.is-up { background: var(--c-up-50); color: var(--c-up); }
.ndh-rec.is-ref { background: var(--c-ref-50); color: var(--c-ref); }
.ndh-rec.is-down { background: var(--c-down-50); color: var(--c-down); }

.ndh-stars { position: relative; display: inline-block; line-height: 0; vertical-align: -2px; }
.ndh-stars .ico { width: 15px; height: 15px; }
.ndh-stars__base { display: inline-flex; color: #DBDBDB; }
.ndh-stars__base .ico { fill: currentColor; stroke: none; }
.ndh-stars__fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; color: #FFA20D; white-space: nowrap; }
.ndh-stars__fill .ico { fill: currentColor; stroke: none; }

.ndh-ring { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; }
.ndh-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ndh-ring__track { fill: none; stroke: rgba(25, 25, 25, .1); stroke-width: 6; }
.ndh-ring__bar { fill: none; stroke: var(--c-act-500); stroke-width: 6; stroke-linecap: round; }
.ndh-ring__num { position: relative; font-size: 18px; font-weight: 800; color: var(--c-ink); }
.ndh-ring--lg { width: 92px; height: 92px; }
.ndh-ring--lg .ndh-ring__num { font-size: 26px; }

/* Avatar chữ viết tắt */
.ndh-avatar { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ndh-avatar--mono {
	display: grid; place-items: center;
	aspect-ratio: 1;
	background:
		/* Bóng 14%, không phải 28%: lớp sáng này phủ lên nền avatar, mà chữ viết
		   tắt in trắng ngay trên đó. Để 28% thì chỗ bóng sáng lên tới #AAAAAA,
		   chữ trắng chỉ còn 2,32:1. */
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%),
		linear-gradient(145deg, var(--av-a), var(--av-b));
	color: #fff;
	font-weight: 800;
	letter-spacing: .5px;
	container-type: inline-size;
}
.ndh-avatar--mono span { font-size: clamp(11px, 34cqi, 64px); }
.ndh-avatar--xs { width: 26px; height: 26px; border: 2px solid #fff; }
.ndh-avatar--admin { width: 40px; height: 40px; }

/* Hình minh họa đường chân trời */
.ndh-sky { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   Tiêu đề khối, lưới, chip khu vực, thẻ lọc
   ========================================================================== */
.sec-head__chip { background: #fff; border-color: var(--c-brand-100); color: var(--c-brand-600); }
.sec-head__chip.is-stock { color: var(--c-pillar-stock); border-color: #F7D8A4; background: #FFF6E8; }
.sec-head__chip.is-re { color: var(--c-pillar-re); border-color: #F5DEB9; background: #FFF8ED; }
.sec-head__chip.is-bank { color: var(--c-pillar-bank); border-color: #F6D7A6; background: #FFF7EB; }
.sec-head__title { font-weight: 500; }
.sec-head__big { font-weight: 800; }

.ndh-sechead {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.ndh-sechead .sec-head__chip { margin-bottom: 10px; }
.ndh-sechead__title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: var(--c-ink); line-height: 1.25; }
.ndh-sechead__lead { margin-top: 8px; max-width: 62ch; color: var(--text); font-size: 15px; line-height: 1.6; }
.ndh-sechead__more {
	display: inline-flex; align-items: center; gap: 8px;
	flex: none;
	padding: 10px 16px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: 14px; font-weight: 700; color: var(--c-brand-700);
	transition: border-color .2s, background-color .2s;
}
.ndh-sechead__more .ico { width: 17px; height: 17px; transition: transform .2s; }
.ndh-sechead__more:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); }
.ndh-sechead__more:hover .ico { transform: translateX(3px); }
.ndh-sechead--center { justify-content: center; text-align: center; }
.ndh-sechead--center .ndh-sechead__lead { margin-inline: auto; }

.ndh-grid { display: grid; gap: 22px; }
.ndh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ndh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ndh-grid--experts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ndh-quick {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 16px;
	font-size: 13.5px;
}
.ndh-quick > span { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .7); font-weight: 600; margin-right: 4px; }
.ndh-quick > span .ico { width: 16px; height: 16px; }
.ndh-quick a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 13px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff; font-weight: 600;
	transition: background-color .2s;
}
.ndh-quick a:hover { background: rgba(255, 255, 255, .22); }
.ndh-quick em { font-style: normal; opacity: .7; font-weight: 500; }
.ndh-quick--dark { margin: 0 0 22px; }
.ndh-quick--dark > span { color: var(--muted); }
.ndh-quick--dark a { background: #fff; border-color: var(--c-line); color: var(--c-ink); }
.ndh-quick--dark a:hover, .ndh-quick--dark a.is-active { border-color: var(--c-brand-300); background: var(--c-brand-50); color: var(--c-brand-700); }

.ndh-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ndh-tabs[hidden] { display: none; }
.ndh-tab {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 42px; padding: 0 16px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: 14.5px; font-weight: 600; color: var(--c-text);
	transition: background-color .2s, border-color .2s, color .2s;
}
.ndh-tab .ico { width: 18px; height: 18px; color: var(--tone); }
.ndh-tab em { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-pill); background: var(--c-soft); color: var(--muted); }
.ndh-tab:hover { border-color: var(--c-brand-300); color: var(--c-ink); }
.ndh-tab.is-active { background: var(--c-brand-800); border-color: var(--c-brand-800); color: #fff; }
.ndh-tab.is-active .ico { color: #fff; }
.ndh-tab.is-active em { background: rgba(255, 255, 255, .16); color: #fff; }
.ndh-tabs--pills { margin-bottom: 22px; }

.ndh-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.ndh-pager .page-numbers {
	display: grid; place-items: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: #fff;
	font-weight: 700; color: var(--c-text);
}
.ndh-pager .page-numbers.current { background: var(--c-brand-700); border-color: var(--c-brand-700); color: #fff; }
.ndh-pager a.page-numbers:hover { border-color: var(--c-brand-300); color: var(--c-brand-700); }
.ndh-pager .ico { width: 16px; height: 16px; }

.ndh-empty {
	display: grid; justify-items: center; gap: 12px;
	padding: 48px 20px;
	border: 1px dashed var(--c-line);
	border-radius: var(--r-card);
	text-align: center; color: var(--muted);
}
.ndh-empty > .ico { width: 34px; height: 34px; color: var(--c-brand-300); }

.ndh-alert {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #FFFAF3;
	border: 1px solid #FEE3B7;
	color: #5F5F5F;
	font-size: 14px;
}
.ndh-alert .ico { flex: none; margin-top: 1px; }

/* ==========================================================================
   Thẻ dự án
   ========================================================================== */
.rcard {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
.rcard:hover { box-shadow: var(--sh-lift); transform: translateY(-3px); border-color: transparent; }
.rcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-soft); }
.rcard__media img, .rcard__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rcard:hover .rcard__media img, .rcard:hover .rcard__media svg { transform: scale(1.04); }
.rcard__tags { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.rcard__status, .rcard__hot {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-size: 12px; font-weight: 700;
	background: #fff; color: var(--c-ink);
	box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3);
}
.rcard__status.is-dang-mo-ban { background: var(--c-act-700); color: #fff; }
.rcard__status.is-sap-mo-ban { background: var(--c-warm-400); color: var(--c-ink); }
.rcard__status.is-da-ban-giao { background: #fff; color: var(--c-brand-700); }
.rcard__hot { background: var(--c-ink); color: var(--c-warm-400); }
.rcard__hot .ico { width: 14px; height: 14px; }
.rcard__score {
	position: absolute; right: 12px; bottom: 12px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 5px 10px;
	border-radius: 10px;
	background: rgba(31, 31, 31, .82);
	backdrop-filter: blur(4px);
	color: #fff; font-weight: 800; font-size: 14px;
}
.rcard__score .ico { width: 14px; height: 14px; fill: var(--c-warm-400); stroke: none; }
.rcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.rcard__type { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--c-pillar-re); }
.rcard__title { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--c-ink); }
.rcard__title a:hover { color: var(--c-brand-600); }
.rcard__loc { display: flex; gap: 6px; font-size: 13.5px; color: var(--muted); }
.rcard__loc .ico { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.rcard__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.rcard__price strong { font-size: 18px; font-weight: 800; color: var(--c-down); font-variant-numeric: tabular-nums; }
.rcard__price span { font-size: 13px; color: var(--muted); }
.rcard__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; margin-top: auto; border-top: 1px dashed var(--c-line); font-size: 13px; color: var(--c-text); }
.rcard__facts li { display: inline-flex; align-items: center; gap: 5px; }
.rcard__facts .ico { width: 15px; height: 15px; color: var(--c-brand-500); }
.rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rcard__dev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Thẻ chuyên gia
   ========================================================================== */
.xcard {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	padding: 26px 20px 20px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	text-align: center;
	transition: box-shadow .25s, transform .25s, border-color .25s;
	height: 100%;
}
.xcard::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 74px;
	border-radius: var(--r-card) var(--r-card) 0 0;
	background: linear-gradient(135deg, var(--tone-bg), rgba(255, 255, 255, 0));
}
.xcard:hover { box-shadow: var(--sh-lift); transform: translateY(-3px); border-color: transparent; }
.xcard__photo {
	position: relative;
	width: 104px; height: 104px;
	padding: 4px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, var(--tone), var(--c-warm-400), var(--tone));
	flex: none;
}
.xcard__photo .ndh-avatar { border: 3px solid #fff; }
.xcard__verified {
	position: absolute; right: 2px; bottom: 4px;
	display: grid; place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--c-act-700);
	border: 3px solid #fff;
	color: #fff;
}
.xcard__verified .ico { width: 13px; height: 13px; stroke-width: 3; }
.xcard__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; width: 100%; margin-top: 14px; }
.xcard__field, .xcard__role { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tone); }
.xcard__name { font-size: 18px; font-weight: 800; color: var(--c-ink); line-height: 1.3; }
.xcard__name a:hover { color: var(--tone); }
.xcard__pos { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.xcard__rating { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.xcard__rating strong { color: var(--c-ink); }
.xcard__stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 6px; border-block: 1px solid var(--c-line-soft); }
.xcard__stats li { display: flex; flex-direction: column; padding: 10px 4px; }
.xcard__stats li + li { border-left: 1px solid var(--c-line-soft); }
.xcard__stats strong { font-size: 17px; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.xcard__stats span { font-size: 12px; color: var(--muted); }
.xcard__skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.xcard__skills li { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-soft); font-size: 12px; color: var(--c-text); }
.xcard__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: auto; padding-top: 12px; width: 100%; }
.xcard__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	flex: 1;
	min-height: 40px; padding: 0 14px;
	border-radius: var(--r-pill);
	background: var(--c-brand-50);
	color: var(--c-brand-700);
	font-size: 14px; font-weight: 700;
	transition: background-color .2s, color .2s;
}
.xcard__btn .ico { width: 16px; height: 16px; }
.xcard__btn:hover { background: var(--c-brand-700); color: #fff; }
.xcard__btn--ghost { flex: 0 1 auto; background: #fff; border: 1px solid var(--c-line); }

/* Kiểu mini — cột bên */
.xcard--mini {
	flex-direction: row; align-items: flex-start; gap: 14px;
	padding: 16px;
	text-align: left;
}
.xcard--mini::before { display: none; }
.xcard--mini:hover { transform: none; }
.xcard--mini .xcard__photo { width: 60px; height: 60px; padding: 3px; }
.xcard--mini .xcard__body { align-items: flex-start; margin-top: 0; gap: 3px; }
.xcard--mini .xcard__name { font-size: 16px; }
.xcard--mini .xcard__pos { font-size: 13px; }
.xcard--mini .xcard__rating { justify-content: flex-start; }
.xcard--mini .xcard__acts { justify-content: flex-start; padding-top: 10px; gap: 6px; }
.xcard--mini .xcard__btn { flex: 0 1 auto; min-height: 34px; padding: 0 12px; font-size: 13px; }

/* Kiểu hàng — cuối bài viết */
.xcard--row { flex-direction: row; align-items: flex-start; gap: 20px; text-align: left; padding: 22px; }
.xcard--row::before { display: none; }
.xcard--row:hover { transform: none; }
.xcard--row .xcard__photo { width: 96px; height: 96px; }
.xcard--row .xcard__body { align-items: flex-start; margin-top: 0; }
.xcard--row .xcard__rating, .xcard--row .xcard__skills, .xcard--row .xcard__acts { justify-content: flex-start; }
.xcard--row .xcard__stats { max-width: 320px; }
.xcard--row .xcard__acts .xcard__btn { flex: 0 1 auto; }
.xcard__bio { font-size: 14.5px; line-height: 1.6; color: var(--c-text); }

/* ==========================================================================
   Thẻ bài viết
   ========================================================================== */
.ndh-news { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 22px; }
.ndh-news .ncard--lead { grid-row: span 2; }
.ndh-news--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ncard {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: box-shadow .25s, border-color .25s;
}
.ncard:hover { box-shadow: var(--sh-soft); border-color: var(--c-brand-200); }
.ncard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-soft); }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; }
.ncard--lead .ncard__media { aspect-ratio: auto; flex: 1; min-height: 240px; }
.ncard__art {
	display: grid; place-items: center;
	width: 100%; height: 100%;
	color: var(--tone);
	background:
		radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 40%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 2px, rgba(255, 255, 255, 0) 2px 14px),
		var(--tone-bg);
}
.ncard__art .ico { width: 44px; height: 44px; stroke-width: 1.3; opacity: .85; }
.ncard--lead .ncard__art .ico { width: 72px; height: 72px; }
.ncard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 16px 18px 18px; }
.ncard__title { font-size: 16.5px; font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.ncard--lead .ncard__title { font-size: clamp(20px, 2vw, 25px); font-weight: 800; line-height: 1.3; }
.ncard__title a:hover { color: var(--c-brand-600); }
.ncard__excerpt { color: var(--c-text); font-size: 15px; line-height: 1.65; }
.ncard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; font-size: 12.5px; color: var(--muted); }
.ncard__by { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--c-ink); }

/* ==========================================================================
   Bảng cổ phiếu
   ========================================================================== */
.stbl-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	box-shadow: var(--sh-soft);
}
.stbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.stbl th, .stbl td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-line-soft); white-space: nowrap; }
.stbl thead th {
	position: sticky; top: 0;
	background: var(--c-soft);
	font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
	color: var(--muted);
}
.stbl thead th button { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.stbl thead th button .ico { width: 13px; height: 13px; opacity: .45; }
.stbl thead th[aria-sort="ascending"] button, .stbl thead th[aria-sort="descending"] button { color: var(--c-brand-700); }
.stbl thead th[aria-sort="ascending"] button .ico, .stbl thead th[aria-sort="descending"] button .ico { opacity: 1; }
.stbl .is-num { text-align: right; }
.stbl thead th.is-num button { flex-direction: row-reverse; }
.stbl tbody tr { transition: background-color .15s; }
.stbl tbody tr:hover { background: #FBFAF8; }
.stbl tbody tr:last-child > * { border-bottom: 0; }
.stbl__tk a { display: flex; align-items: center; gap: 12px; }
.stbl__logo {
	display: grid; place-items: center;
	width: 40px; height: 40px; flex: none;
	border-radius: 12px;
	background: linear-gradient(145deg, #FDF0DA, #FDF0DB);
	color: var(--c-pillar-stock);
	font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
}
.stbl__id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.stbl__id strong { font-size: 15px; font-weight: 800; color: var(--c-ink); }
.stbl__id span { max-width: 230px; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.stbl__tk a:hover strong { color: var(--c-pillar-stock); }
.stbl td.is-up { color: var(--c-up); font-weight: 700; }
.stbl td.is-down { color: var(--c-down); font-weight: 700; }
.stbl td.is-ref { color: var(--c-ref); font-weight: 700; }
.stbl__chart { width: 110px; }
.stbl__chart .spark { width: 96px; height: 30px; }
.stbl-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

.spark { display: block; overflow: visible; }
.spark__line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark--up .spark__line { stroke: var(--c-up); }
.spark--down .spark__line { stroke: var(--c-down); }
.spark--ref .spark__line { stroke: var(--c-ref); }
.spark--up .spark__area { fill: rgba(106, 106, 106, .1); }
.spark--down .spark__area { fill: rgba(198, 40, 40, .08); }
.spark--ref .spark__area { fill: rgba(113, 113, 113, .08); }

/* ==========================================================================
   Công cụ tính
   ========================================================================== */
.ncalc {
	padding: clamp(20px, 3vw, 30px);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-soft);
	scroll-margin-top: 140px;
}
.ncalc + .ncalc, div + .ncalc, .ncalc + div { margin-top: 24px; }
.ncalc__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.ncalc__icon {
	display: grid; place-items: center;
	width: 48px; height: 48px; flex: none;
	border-radius: 14px;
	background: linear-gradient(145deg, var(--c-brand-600), var(--c-brand-800));
	color: #fff;
}
.ncalc__icon .ico { width: 24px; height: 24px; }
.ncalc__title { font-size: 20px; font-weight: 800; color: var(--c-ink); }
.ncalc__lead { margin-top: 4px; font-size: 14px; color: var(--muted); }
.ncalc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.ncalc__form { display: grid; gap: 16px; align-content: start; }
.ncalc__form--inline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ncalc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ncalc__field { display: grid; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--c-text); }
.ncalc__field > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.ncalc__field output { font-weight: 800; color: var(--c-brand-700); }
.ncalc__input {
	display: flex; align-items: center;
	height: 46px; padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: var(--c-soft);
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ncalc__input:focus-within { border-color: var(--c-brand-500); background: #fff; box-shadow: 0 0 0 3px rgba(113, 113, 113, .14); }
.ncalc__input input, .ncalc__input select {
	flex: 1; min-width: 0;
	height: 100%;
	border: 0; background: none;
	font-size: 16px; font-weight: 700; color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}
.ncalc__input input:focus, .ncalc__input select:focus { outline: none; }
.ncalc__input em { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 500; }
.ncalc__field input[type="range"] { width: 100%; accent-color: var(--c-brand-600); height: 26px; }
.ncalc__out {
	display: flex; flex-direction: column; gap: 14px;
	padding: 20px;
	border-radius: 18px;
	background: linear-gradient(160deg, var(--c-brand-800), var(--c-night-900));
	color: #fff;
}
.ncalc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ncalc__stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.ncalc__stat dt { font-size: 12.5px; color: rgba(255, 255, 255, .68); }
.ncalc__stat dd { margin: 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ncalc__stat--main { grid-column: 1 / -1; background: rgba(243, 176, 70, .14); border: 1px solid rgba(243, 176, 70, .35); }
.ncalc__stat--main dd { font-size: 28px; color: var(--c-warm-400); }
.ncalc__hint { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.ncalc__hint .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--c-warm-400); }
.ncalc__hint strong { color: #fff; }
.ncalc__note { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.ncalc__stats--row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.ncalc__stats--row .ncalc__stat { background: var(--c-soft); color: var(--c-ink); }
.ncalc__stats--row .ncalc__stat dt { color: var(--muted); }
.ncalc__stats--row .ncalc__stat--main { grid-column: auto; background: var(--c-brand-800); border: 0; }
.ncalc__stats--row .ncalc__stat--main dt { color: rgba(255, 255, 255, .7); }
.ncalc__stats--row .ncalc__stat--main dd { font-size: 20px; color: var(--c-warm-400); }
.ncalc [data-r].is-up { color: #E7BE7C; }
.ncalc [data-r].is-down { color: #FCAFAF; }
.ncalc__stats--row .ncalc__stat:not(.ncalc__stat--main) [data-r].is-up { color: var(--c-up); }
.ncalc__stats--row .ncalc__stat:not(.ncalc__stat--main) [data-r].is-down { color: var(--c-down); }

/* ==========================================================================
   Cuối bài viết: mã, dự án, chuyên gia
   ========================================================================== */
.ndh-postrel { display: grid; gap: 26px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.ndh-postrel__title { display: flex; align-items: center; gap: 9px; margin: 0 0 14px !important; font-size: 17px !important; font-weight: 800; color: var(--c-ink); }
.ndh-postrel__title .ico { width: 20px; height: 20px; color: var(--c-brand-600); }
.ndh-tickers { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ndh-tickers li { margin: 0 !important; padding: 0 !important; }
.ndh-tickers li::before { display: none !important; }
.ndh-ticker {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 14px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: #fff;
	font-size: 14px; text-decoration: none !important;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}
.ndh-ticker strong { color: var(--c-ink); font-weight: 800; }
.ndh-ticker:hover { border-color: var(--c-brand-300); }

/* ==========================================================================
   Trang chủ
   ========================================================================== */
.nhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(40px, 6vw, 76px) clamp(44px, 6vw, 80px);
	background:
		linear-gradient(115deg, rgba(37, 37, 37, .98) 0%, rgba(68, 68, 68, .96) 55%, rgba(89, 89, 89, .94) 100%),
		var(--c-brand-800);
	color: #fff;
}
.nhero::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
}
.nhero__glow {
	position: absolute; z-index: -1;
	right: -8%; top: -30%;
	width: 620px; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 176, 70, .32), rgba(243, 176, 70, 0) 65%);
	pointer-events: none;
}
.nhero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.nhero__kicker { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 13px; font-weight: 700; letter-spacing: .3px; color: rgba(255, 255, 255, .9); }
.nhero__mark { width: 28px; height: 28px; }
.nhero__title { margin-top: 20px; font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; color: #fff; }
.nhero__title em { display: block; font-style: normal; background: linear-gradient(90deg, #F3B046, #FBE7C6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nhero__lead { margin-top: 18px; max-width: 56ch; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, .82); }
.nhero__search {
	display: flex; align-items: center; gap: 10px;
	max-width: 620px;
	margin-top: 28px;
	padding: 7px 7px 7px 18px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
}
.nhero__search > .ico { width: 22px; height: 22px; color: var(--muted); flex: none; }
.nhero__search input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font-size: 16px; color: var(--c-ink); }
.nhero__search input:focus { outline: none; }
.nhero__search button { height: 48px; padding: 0 24px; border-radius: 13px; background: var(--c-warm-400); color: var(--c-ink); font-weight: 800; font-size: 15px; transition: background-color .2s; }
.nhero__search button:hover { background: #F6BE64; }
.nhero__pillars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nhero__pillars a {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 14px 7px 10px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 14px; font-weight: 600; color: #fff;
	transition: background-color .2s, border-color .2s;
}
.nhero__pillars a .ico { width: 18px; height: 18px; color: var(--c-warm-400); }
.nhero__pillars a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.nhero__trust { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 12px 30px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.nhero__trust li { display: flex; flex-direction: column; }
.nhero__trust strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.nhero__trust span { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .68); }

/* Bảng tin thị trường */
.nboard {
	padding: 20px;
	border-radius: var(--r-xl);
	background: #fff;
	color: var(--c-text);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.nboard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.nboard__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--c-ink); }
.nboard__time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nboard__idx { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nboard__idx li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--c-soft); font-variant-numeric: tabular-nums; }
.nboard__idx li.is-up { background: linear-gradient(160deg, var(--c-up-50), #FBFAF7); }
.nboard__idx li.is-down { background: linear-gradient(160deg, var(--c-down-50), #FFF8F8); }
.nboard__name { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.nboard__idx strong { font-size: 19px; font-weight: 800; color: var(--c-ink); }
.nboard__sub { display: flex; align-items: center; gap: 7px; margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--c-ink); }
.nboard__sub .ico { width: 17px; height: 17px; color: var(--c-up); }
.nboard__picks { display: grid; gap: 6px; }
.nboard__picks a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; transition: background-color .2s; }
.nboard__picks a:hover { background: var(--c-soft); }
.nboard__picks .stbl__logo { width: 38px; height: 38px; font-size: 11px; }
.nboard__pick { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.nboard__pick strong { font-weight: 800; color: var(--c-ink); }
.nboard__pick span { font-size: 12.5px; color: var(--muted); }
.nboard__picks .spark { width: 72px; height: 26px; flex: none; }
.nboard__more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--c-brand-50); font-size: 14px; font-weight: 700; color: var(--c-brand-700); }
.nboard__more .ico { width: 17px; height: 17px; }
.nboard__more:hover { background: var(--c-brand-100); }

/* Bốn mảng */
.npillars { padding-block: clamp(48px, 6vw, 72px); }
.npillars__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.npillar {
	position: relative;
	display: flex; flex-direction: column; gap: 12px;
	padding: 22px;
	border-radius: var(--r-xl);
	background: #fff;
	border: 1px solid var(--c-line);
	overflow: hidden;
	transition: box-shadow .25s, transform .25s;
}
.npillar::after {
	content: "";
	position: absolute; inset: auto -40px -60px auto;
	width: 160px; aspect-ratio: 1;
	border-radius: 50%;
	background: var(--tone-bg);
	z-index: 0;
}
.npillar > * { position: relative; z-index: 1; }
.npillar:hover { box-shadow: var(--sh-lift); transform: translateY(-3px); }
.npillar__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.npillar__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--tone); color: #fff; box-shadow: 0 12px 20px -12px var(--tone); }
.npillar__icon .ico { width: 25px; height: 25px; }
.npillar__title { font-size: 19px; font-weight: 800; color: var(--c-ink); }
.npillar__go { width: 20px; height: 20px; color: var(--tone); transition: transform .2s; }
.npillar__head:hover .npillar__go { transform: translateX(4px); }
.npillar__desc { font-size: 14px; line-height: 1.6; color: var(--c-text); }
.npillar__links { display: grid; gap: 2px; }
.npillar__links a { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 14.5px; font-weight: 600; color: var(--c-ink); border-bottom: 1px dashed var(--c-line); }
.npillar__links a .ico { width: 15px; height: 15px; color: var(--tone); }
.npillar__links a:hover { color: var(--tone); }
.npillar__experts { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--tone); }
.npillar__faces { display: flex; }
.npillar__faces .ndh-avatar--xs { width: 30px; height: 30px; }
.npillar__faces > * + * { margin-left: -9px; }

.nnews { padding-top: 12px; }
.nstocks .stbl-wrap { box-shadow: none; }
.nbanking { padding-top: clamp(48px, 6vw, 72px); }
.nbanking .ndh-sechead { margin-bottom: 0; }
.nbanking .ndh-sechead__lead { margin-inline: auto; }

/* Công cụ: thẻ có mô tả thay cho số lượt dùng */
.toolcard__uses { color: var(--muted); }

/* ==========================================================================
   Chân trang
   ========================================================================== */
.foot-pledge {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap;
	margin-bottom: clamp(30px, 4vw, 48px);
	padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
	border-radius: var(--r-xl);
	background: linear-gradient(110deg, rgba(243, 176, 70, .16), rgba(113, 113, 113, .16));
	border: 1px solid rgba(255, 255, 255, .1);
}
.foot-pledge__kicker { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--c-warm-400); }
.foot-pledge__title { margin-top: 6px; font-size: clamp(18px, 2vw, 23px); font-weight: 800; line-height: 1.35; color: #fff; max-width: 34ch; }
.foot-pledge__cta { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--r-pill); background: var(--c-warm-400); color: var(--c-ink); font-weight: 800; }
.foot-pledge__cta .ico { width: 19px; height: 19px; }
.foot-pledge__cta:hover { background: #F6BE64; }
.foot-brand .brand__name { color: #fff; }
.foot-brand .brand__tag { color: var(--c-brand-300); }
.foot-social { display: flex; gap: 8px; margin-top: 18px; }
.foot-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid var(--c-night-line); color: #fff; }
.foot-social a:hover { background: rgba(255, 255, 255, .16); }
.foot-social .ico { width: 19px; height: 19px; }

/* ==========================================================================
   Đáp ứng màn hình
   ========================================================================== */
@media (max-width: 1180px) {
	.head-experts span { display: none; }
	.head-experts { width: 42px; padding: 0; justify-content: center; }
	.mainnav__link { padding: 0 12px; }
	.npillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndh-grid--experts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ncalc__form--inline, .ncalc__stats--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.nhero__grid { grid-template-columns: minmax(0, 1fr); }
	.nboard { max-width: 620px; }
	.ndh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndh-news, .ndh-news--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ndh-news .ncard--lead { grid-column: 1 / -1; grid-row: auto; }
	.ncalc__grid { grid-template-columns: minmax(0, 1fr); }
	.stbl .is-opt { display: none; }
}

@media (max-width: 900px) {
	.mkt-strip__time { display: none; }
	.head-experts { display: none; }

	/* Ngăn kéo menu di động: nền trắng, chữ đậm */

	/*
	 * Khoá cuộn ở thẻ html chứ không chỉ ở body: main.css đã đặt
	 * body.nav-open { overflow: hidden } nhưng trang này cuộn ở html, nên khoá
	 * body không có tác dụng — trang vẫn trôi sau lưng ngăn kéo, đầu trang thu
	 * lại và kéo ngăn kéo (bám theo --nav-top) xê dịch dưới ngón tay.
	 */
	html:has(body.nav-open) { overflow: hidden; }

	.mainbar { inset: var(--nav-top, 106px) 0 0 0; background: #fff; border: 0; }
	.mainnav__item { border-bottom: 1px solid var(--c-line-soft); }
	.mainnav__link { height: auto; padding: 16px; font-size: 16.5px; font-weight: 700; }
	.mainnav__item--parent > .mainnav__link::before { display: none; }


	.subnav, .subnav--mega {
		display: block;
		position: static;
		min-width: 0;
		/* inherit, không phải visible: khi ngăn kéo đóng (.mainbar ẩn) menu con
		   phải ẩn theo, nếu không các link vô hình vẫn nuốt cú chạm giữa trang. */
		opacity: 1; visibility: inherit; transform: none;
		padding: 0 8px 12px;
		border: 0; border-radius: 0;
		box-shadow: none;
		background: none;
	}
	.subnav__col + .subnav__col { margin-top: 6px; }
	.subnav__link { color: var(--c-text); padding: 9px 12px; }
	.subnav__link:hover { background: var(--c-brand-50); color: var(--c-ink); }
	.subnav__desc { display: none; }
	.subnav__ico { width: 32px; height: 32px; }
	.mainbar__cta { display: inline-flex; margin: 18px 16px 0; }
}

@media (max-width: 700px) {
	.mkt-strip__label { display: none; }
	/* Chiều cao để auto: thanh đầu trang ở màn hẹp xếp hai hàng. */
	.brand__name { font-size: 17px; }
	.brand .ndh-mark, .brand__mark { width: 36px; height: 36px; }
	.nhero__title { font-size: 34px; }
	.nhero__search { padding: 6px 6px 6px 14px; }
	.nhero__search button { padding: 0 16px; }
	.nhero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nboard__idx { grid-template-columns: 1fr 1fr; }
	.npillars__grid, .ndh-grid--3, .ndh-grid--2, .ndh-news, .ndh-news--flat { grid-template-columns: minmax(0, 1fr); }
	.ndh-grid--experts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.xcard { padding: 18px 12px 14px; }
	.xcard__photo { width: 80px; height: 80px; }
	.xcard__name { font-size: 15.5px; }
	.xcard__skills { display: none; }
	.xcard--row { flex-direction: column; }
	.ndh-sechead__more { width: 100%; justify-content: center; }
	.stbl th, .stbl td { padding: 10px; }
	.stbl__id span { display: none; }
	.stbl__chart { display: none; }
	.ncalc__form--inline, .ncalc__stats--row, .ncalc__stats, .ncalc__row { grid-template-columns: minmax(0, 1fr); }
	.foot-pledge__cta { width: 100%; justify-content: center; }
}

/* Khối ngân hàng trang chủ: tiêu đề mảng và hai hàng thẻ chung một nền. */
.nbanking { background: var(--bg-blue); }
.nbanking #chu-de { background: #fff; }
.nbanking .section--blue { padding-top: 36px; }
/* Ô nhập không được nở theo kích thước mặc định của <input> — giữ trong cột. */
.ncalc__field { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ncalc__input input, .ncalc__input select { width: 100%; }
/* Bảng đủ 11 cột phải vừa khung 1200px mà không cuộn ngang. */
.stbl th, .stbl td { padding: 12px 10px; }
.stbl th:first-child, .stbl td:first-child { padding-left: 14px; }
.stbl__id span { max-width: 170px; }
.stbl__chart { width: 92px; }
.stbl__chart .spark { width: 80px; }
.ndh-contact { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 18px 0 !important; padding: 0 !important; list-style: none !important; }
.ndh-contact li { display: flex; gap: 12px; margin: 0 !important; padding: 16px !important; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; }
.ndh-contact li::before { display: none !important; }
.ndh-contact .ico { width: 22px; height: 22px; flex: none; color: var(--c-brand-600); }
.ndh-contact span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.ndh-contact strong { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.pby__avatar--ndh { padding: 0; overflow: hidden; background: none; }
.pby__avatar--ndh .ndh-avatar { width: 100%; height: 100%; font-size: 14px; }
.pby__role { display: block; font-size: 12px; font-weight: 600; color: var(--c-brand-600); }

/* ==========================================================================
   Mảng Bảo hiểm (mảng thứ năm)
   ========================================================================== */
.is-ins { --tone: var(--c-pillar-ins); --tone-bg: #FFF1F3; }
.ndh-chip--ins { --tone: var(--c-pillar-ins); --tone-bg: #FFF1F3; }
.mainnav__item--ins { --tone: var(--c-pillar-ins); --tone-bg: #FFF1F3; }
.sec-head__chip.is-ins { color: var(--c-pillar-ins); border-color: #FBD0D9; background: #FFF7F8; }
.mainnav__item--ins .subnav--mega { --cols: 2; min-width: 560px; }

/* Năm thẻ mảng: 5 cột trên màn rộng, 3 + 2 trên màn vừa. */
.npillars__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.npillar { padding: 20px; }
.npillar__head { gap: 10px; }
.npillar__icon { width: 44px; height: 44px; border-radius: 13px; }
.npillar__title { font-size: 17.5px; }
@media (max-width: 1180px) { .npillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .npillars__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Chân trang — bố cục đáp ứng
   ==========================================================================
   Khai báo gộp một chỗ. Trước đây .foot-top bị viết lại bốn lần rải khắp file,
   rule có hiệu lực lại là rule cuối nằm ngoài mọi media query, nên sửa ở một
   chỗ mà màn hình lại đổi theo chỗ khác.

   Cột thương hiệu đặt sàn 300px: lockup đủ slogan rộng 250px, dưới mức đó
   grid bóp cột và slogan tụt xuống dưới ngưỡng đọc được.
*/
.foot-top { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.9fr); }
.foot-col a { font-size: 14px; }

/*
   Tiêu đề cột mang chip icon đúng như năm thẻ mảng ở trang chủ — chân trang
   không phải một danh sách lạ mà là cùng một hệ thống nhận diện.

   Màu --tone của mỗi mảng chọn để đọc trên nền trắng nên trên nền tối sẽ tối
   thui; ở đây chỉ mượn nó cho nền chip mờ, còn nét icon giữ màu vàng nhấn.
*/
.foot-col__title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.foot-col__ico {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	flex: none;
	border-radius: 9px;
	background: rgba(249, 175, 57, .13);
	border: 1px solid rgba(249, 175, 57, .22);
	color: var(--c-warm-400);
	transition: background-color .2s, border-color .2s;
}
.foot-col__ico .ico { width: 16px; height: 16px; }
.foot-col:hover .foot-col__ico { background: rgba(249, 175, 57, .22); border-color: rgba(249, 175, 57, .4); }
/* Gạch vàng dưới tiêu đề giờ thành thừa: chip icon đã mang màu nhấn rồi. */
.foot-col__title::after { display: none; }

/*
   Hai vạch ngăn dải nhạt dần về hai mép thay vì kẻ hết chiều ngang. Vạch chạy
   đụng mép khung làm chân trang trông như một cái bảng kẻ ô; nhạt dần thì nó
   chỉ còn làm nhiệm vụ tách dải.
*/
.foot-links,
.foot-bottom {
	border-top: 1px solid var(--c-night-line);
	border-image: linear-gradient(90deg, transparent, var(--c-night-line) 10%, var(--c-night-line) 90%, transparent) 1;
}

/* Màn vừa: bảng thông tin xuống dưới cột thương hiệu, liên kết còn 3 cột. */
@media (max-width: 1080px) {
	.foot-top { grid-template-columns: minmax(0, 1fr); }
	.foot-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.foot-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.foot-info { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

.foot-copy { margin-right: 6px; }
.foot-legal { margin-right: auto; }

/*
   Chừa chỗ cho nút hotline nổi chỉ khi nút đó thật sự có mặt — hotline để
   trống thì chân trang đang thừa ra 86px nền đen.
*/
.foot-bottom { padding-bottom: 20px; }
body:has(.hotline-float) .foot-bottom { padding-bottom: 86px; }
@media (max-width: 560px) {
	.foot-bottom { flex-direction: column; align-items: flex-start; }
	.foot-top-link { align-self: stretch; justify-content: center; }
}

/* Trang chủ: khối bảo hiểm. */
.ninsure__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ninsure__lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.iline {
	position: relative;
	display: flex; flex-direction: column; gap: 10px;
	padding: 18px;
	border-radius: var(--r-card);
	background: #fff;
	border: 1px solid var(--c-line);
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
.iline:hover { box-shadow: var(--sh-lift); transform: translateY(-3px); border-color: transparent; }
.iline__top { display: flex; align-items: center; gap: 12px; }
.iline__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: #FFF1F3; color: var(--c-pillar-ins); }
.iline__icon .ico { width: 23px; height: 23px; }
.iline__name { font-size: 16px; font-weight: 800; color: var(--c-ink); line-height: 1.3; }
.iline__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.iline__lead { font-size: 13.5px; line-height: 1.55; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iline__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 13px; font-weight: 700; color: var(--c-pillar-ins); }
.iline__foot .ico { width: 16px; height: 16px; transition: transform .2s; }
.iline:hover .iline__foot .ico { transform: translateX(3px); }
.ninsure__side { display: grid; gap: 12px; }
.ninsure__side-t { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--c-ink); }
.ninsure__side-t .ico { width: 20px; height: 20px; color: var(--c-pillar-ins); }
.ninsure__tip { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #FFF7F8; border: 1px solid #FBD0D9; font-size: 13.5px; line-height: 1.55; color: var(--c-ink); }
.ninsure__tip .ico { width: 19px; height: 19px; flex: none; color: var(--c-pillar-ins); margin-top: 1px; }
@media (max-width: 1024px) { .ninsure__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .ninsure__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ninsure__lines { grid-template-columns: minmax(0, 1fr); } }

/* Chuyên gia theo mảng — chèn cuối trang sản phẩm cũ (bảo hiểm…). */
.ndh-pexperts { padding-block: clamp(36px, 5vw, 56px); border-top: 1px solid var(--c-line); }

/* ==========================================================================
   Form đăng ký tư vấn (trang chuyên gia + popup trên mọi trang chi tiết)
   ========================================================================== */
.xlead { scroll-margin-top: 150px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--c-line); box-shadow: var(--sh-lift); border-top: 5px solid var(--c-warm-400); }
.xlead__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.xlead__av { width: 48px; height: 48px; flex: none; }
.xlead__head .ndh-avatar--mono span { font-size: 16px; }
.xlead__title { font-size: 18px; font-weight: 800; color: var(--c-ink); line-height: 1.25; }
.xlead__sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.xlead__body { display: grid; gap: 12px; }
.xlead__field { display: grid; gap: 5px; margin: 0; }
.xlead__field label { font-size: 13px; font-weight: 700; color: var(--c-ink); }
.xlead__field abbr { color: var(--c-danger); text-decoration: none; }
.xlead__opt { font-weight: 400; color: var(--muted); }
.xlead input[type="text"], .xlead input[type="tel"], .xlead input[type="email"], .xlead select, .xlead textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	background: var(--c-soft);
	font-size: 16px; color: var(--c-ink);
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.xlead textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.xlead input:focus, .xlead select:focus, .xlead textarea:focus { outline: none; background: #fff; border-color: var(--c-brand-500); box-shadow: 0 0 0 3px rgba(113, 113, 113, .14); }
.xlead [aria-invalid="true"] { border-color: var(--c-danger); background: #FFF8F8; }
.xlead__err { font-size: 12.5px; font-weight: 600; color: var(--c-danger); }
.xlead__err:empty { display: none; }
.xlead__consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--c-text); cursor: pointer; }
.xlead__consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--c-brand-600); }
.xlead__consent a { color: var(--c-brand-700); text-decoration: underline; }
.xlead__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xlead__submit { margin-top: 4px; }
.xlead__submit[disabled] { opacity: .7; cursor: progress; transform: none; }
.xlead__note { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.xlead__note .ico { width: 16px; height: 16px; flex: none; color: var(--c-act-700); }
.xlead__msg { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.xlead__msg[data-state="ok"] { background: var(--c-up-50); color: var(--c-act-800); border: 1px solid #E8D9C2; }
.xlead__msg[data-state="err"] { background: var(--c-down-50); color: var(--c-danger); border: 1px solid #F5C2C2; }
.xlead.is-done .xlead__body { display: none; }

/* ==========================================================================
   Popup đăng ký tư vấn với chuyên gia phụ trách + nút nổi "Tư vấn ngay"
   ========================================================================== */
/* Hộp bật lên phải nằm trên đầu trang dính (z-index 200). */
.cmodal { z-index: 400; }
.cmodal--lead .cmodal__box { max-width: 520px; }
.cmodal--lead .cmodal__title { font-size: 20px; }
.cmodal--lead .xlead { padding: 0; border: 0; box-shadow: none; border-radius: 0; }
.cmodal--lead .xlead__head { padding: 12px; border-radius: 14px; background: var(--c-brand-50); }
.cmodal--lead .xlead__body { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.cmodal--lead .xlead__body > * { grid-column: 1 / -1; }
.cmodal--lead .xlead__body > .xlead__field:nth-child(1) { grid-column: 1; }
.cmodal--lead .xlead__body > .xlead__field:nth-child(2) { grid-column: 2; }
.cmodal--lead .xlead__body > .xlead__field:nth-child(4) { grid-column: 1; }
.cmodal--lead .xlead__body > .xlead__field:nth-child(5) { grid-column: 2; }
@media (max-width: 520px) {
	.cmodal--lead .xlead__body > .xlead__field:nth-child(n) { grid-column: 1 / -1; }
}

.ndh-fab {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 150;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 6px 18px 6px 6px;
	border-radius: var(--r-pill);
	background: var(--c-warm-400);
	color: var(--c-ink);
	box-shadow: 0 16px 34px -14px rgba(109, 109, 109, .85), 0 2px 6px rgba(31, 31, 31, .12);
	transition: transform .2s, background-color .2s;
	animation: ndh-fab-in .5s .6s both cubic-bezier(.2, .9, .3, 1.2);
}
.ndh-fab:hover { background: #F6BE64; transform: translateY(-2px); }
.ndh-fab__av { position: relative; width: 44px; height: 44px; flex: none; }
.ndh-fab__av .ndh-avatar { width: 44px; height: 44px; border: 2px solid #fff; }
.ndh-fab__av .ndh-avatar--mono span { font-size: 15px; }
.ndh-fab__av i { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #DEA03E; border: 2px solid #fff; }
.ndh-fab__text { display: flex; flex-direction: column; line-height: 1.2; }
.ndh-fab__text strong { font-size: 15px; font-weight: 800; }
.ndh-fab__text span { font-size: 12px; font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Có nút gọi hotline nổi thì đứng lên trên nó. */
.hotline-float ~ .ndh-fab { bottom: 86px; }
@keyframes ndh-fab-in { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .ndh-fab { animation: none; } }
@media (max-width: 700px) {
	.ndh-fab { right: 12px; bottom: 12px; padding-right: 14px; }
	.ndh-fab__text span { display: none; }
}

/* Nút "Tư vấn ngay" cạnh nút đăng ký trên trang sản phẩm ngân hàng, bảo hiểm. */
.btn-consult {
	display: inline-flex; align-items: center; gap: 9px;
	min-height: 46px; padding: 4px 18px 4px 4px;
	border-radius: var(--r-pill);
	background: #fff;
	border: 2px solid var(--c-warm-400);
	color: var(--c-ink);
	font-size: 15px; font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s, transform .2s;
}
.btn-consult:hover { background: var(--c-warm-50); transform: translateY(-1px); }
.btn-consult__av { width: 34px; height: 34px; flex: none; }
.btn-consult .ndh-avatar--mono span { font-size: 12px; }
.btn-consult--lg { min-height: 54px; font-size: 16px; }
.btn-consult--lg .btn-consult__av { width: 42px; height: 42px; }

/*
 * Menu dạng gập — áp cho MỌI khổ có nút menu (<=900px), không chỉ điện
 * thoại. Trên máy tính bảng ngăn kéo cũng bung sẵn mọi mục con và cũng
 * dài y như vậy.
 */
@media (max-width: 900px) {
/*
 * Menu dạng gập. Trước đây mọi mục con bung sẵn, ngăn kéo dài 691px trên
 * máy 390px — muốn xem mảng cuối phải cuộn qua toàn bộ mảng đầu. Gập lại
 * thì năm mảng nội dung nằm gọn trong một màn, mở mảng nào thì bung mảng đó.
 *
 * Tên mảng vẫn là liên kết thật (bấm vào đi tới trang mảng đó); nút mũi tên
 * bên cạnh mới là thứ đóng mở. Gộp hai việc vào một chỗ thì mất đường đi
 * tới trang tổng của mảng.
 */
.mainnav__item--parent { position: relative; }
.mainnav__item--parent > .mainnav__link { padding-right: 58px; }
.mainnav__item--parent > .subnav { display: none; }
.mainnav__item--parent.is-open > .subnav { display: block; }

.subnav-toggle {
	position: absolute; top: 4px; right: 4px;
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border: 0; background: none; cursor: pointer;
	color: var(--c-muted);
}
.subnav-toggle svg { width: 18px; height: 18px; transition: transform .2s ease; }
.mainnav__item--parent.is-open > .subnav-toggle svg { transform: rotate(180deg); }
.mainnav__item--parent.is-open > .subnav-toggle { color: var(--c-brand-700); }

/* Khối liên hệ cuối ngăn kéo: trên màn hẹp các nút này vốn bị ẩn hẳn. */
/* Chặn bề ngang: trên máy tính bảng để tự do thì nút kéo dài hết 820px, nhìn giãn. */
.nav-foot { display: grid; gap: 10px; padding: 18px 16px 28px; max-width: 420px; }
.nav-foot__call,
.nav-foot__cta {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; border-radius: 14px;
	font-size: 15.5px; font-weight: 700; text-decoration: none;
}
.nav-foot__call { border: 1px solid var(--c-line); color: var(--c-ink); background: #fff; }
.nav-foot__cta  { background: var(--c-act-700); color: #fff; }
.nav-foot__call .ico, .nav-foot__cta .ico { width: 18px; height: 18px; }
}

/* ==========================================================================
   ndh_auto — SEO 17/10/2026 (chỉ chạy thật, không in khi NDH_PARITY):
   trang chủ — dòng khẩu hiệu dưới H1 và ba bảng số liệu trong hero
   (src/components/ndh/home/Hero.astro + Boards.astro). Dùng lại .nboard.
   ========================================================================== */
.nhero__slogan { margin-top: 14px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; color: rgba(255, 255, 255, .92); }
.nhero__boards { grid-column: 1 / -1; margin-top: -8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.nhero__boards .nboard { display: flex; flex-direction: column; max-width: none; padding: 18px; }
.nhero__boards .nboard__title { margin: 0; font-size: 15px; line-height: 1.3; }
.nhero__boards .nboard__idx strong { font-variant-numeric: tabular-nums; }
.nhero__boards .nboard__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 3px; }
.nhero__boards .nboard__name a:hover { color: var(--c-brand-700); }
.nboard__note { font-size: 12px; color: var(--muted); line-height: 1.35; }
.nboard__foot { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nboard__foot time { font-weight: 700; color: var(--c-ink); }
.nboard__foot a { color: var(--c-brand-700); text-decoration: underline; text-underline-offset: 3px; }
.nhero__boards .nboard__more { margin-top: 12px; padding: 10px; font-size: 13.5px; }
.nhero__facts { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.nhero__facts .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--c-warm-400); }
.nhero__facts a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
	.nhero__boards { grid-template-columns: minmax(0, 1fr); }
}