@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(6, 35, 31, .05), 0 8px 24px -12px rgba(6, 35, 31, .18);
	--sh-lift: 0 2px 4px rgba(6, 35, 31, .06), 0 22px 44px -22px rgba(6, 35, 31, .35);
	--tone: var(--c-brand-600);
	--tone-bg: var(--c-brand-50);
}

.is-fin   { --tone: var(--c-pillar-fin);   --tone-bg: #E9F6F1; }
.is-stock { --tone: var(--c-pillar-stock); --tone-bg: #EAF0FE; }
.is-bank  { --tone: var(--c-pillar-bank);  --tone-bg: #F2ECFE; }
.is-re    { --tone: var(--c-pillar-re);    --tone-bg: #FDF1E4; }

.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: #34D399;
	box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
	animation: ndh-pulse 2.4s ease-in-out infinite;
}
@keyframes ndh-pulse { 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 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: #4ADE80; }
.mkt-strip__item.is-down .mkt-strip__chg { color: #F87171; }
.mkt-strip__item.is-ref .mkt-strip__chg { color: #FACC15; }
.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; }
.site-head.is-stuck .topbar__inner { height: 62px; }

.brand { gap: 11px; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand .ndh-mark { width: 42px; height: 42px; filter: drop-shadow(0 6px 10px rgba(10, 77, 67, .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: #8A9794; }

.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(161, 92, 0, .75);
}
.head-cta:hover { background: #F5BF55; }
.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(6, 35, 31, .45), 0 2px 6px rgba(6, 35, 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: #EAF0FE; }
.mainnav__item--re    { --tone-bg: #FDF1E4; }
.mainnav__item--bank  { --tone-bg: #F2ECFE; }
.mainnav__item--fin   { --tone-bg: #E9F6F1; }
.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(161, 92, 0, .8); }
.ndh-btn--warm:hover { background: #F5BF55; }
.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: #E9F6F1; }
.ndh-chip--stock { --tone: var(--c-pillar-stock); --tone-bg: #EAF0FE; }
.ndh-chip--bank  { --tone: var(--c-pillar-bank);  --tone-bg: #F2ECFE; }
.ndh-chip--re    { --tone: var(--c-pillar-re);    --tone-bg: #FDF1E4; }
.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 #C9A227;
	border-radius: var(--r-pill);
	background: #FFFBEB;
	color: #7A5A00;
	font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
	white-space: nowrap;
}
.ndh-demo--light { background: rgba(255, 251, 235, .14); color: #FDE68A; border-color: rgba(253, 230, 138, .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: #D6DDDB; }
.ndh-stars__base .ico { fill: currentColor; stroke: none; }
.ndh-stars__fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; color: #F2A900; 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(15, 27, 26, .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:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .28), 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: #CFDCFB; background: #F4F7FF; }
.sec-head__chip.is-re { color: var(--c-pillar-re); border-color: #F6DDC0; background: #FFF8F0; }
.sec-head__chip.is-bank { color: var(--c-pillar-bank); border-color: #E2D6FB; background: #FAF7FF; }
.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: #FFFBEB;
	border: 1px solid #FDE68A;
	color: #7A5A00;
	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(6, 35, 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: #F7FBFA; }
.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, #EAF0FE, #DCE6FD);
	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(11, 122, 62, .1); }
.spark--down .spark__area { fill: rgba(198, 40, 40, .08); }
.spark--ref .spark__area { fill: rgba(154, 103, 0, .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(18, 128, 107, .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(242, 177, 59, .14); border: 1px solid rgba(242, 177, 59, .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: #4ADE80; }
.ncalc [data-r].is-down { color: #FCA5A5; }
.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(5, 42, 37, .98) 0%, rgba(10, 77, 67, .96) 55%, rgba(13, 101, 85, .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(242, 177, 59, .32), rgba(242, 177, 59, 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, #F2B13B, #FBE7C2); -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: #F5BF55; }
.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), #F6FBF8); }
.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(242, 177, 59, .16), rgba(18, 128, 107, .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: #F5BF55; }
.foot-top { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.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)); }
	.foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.foot-brand { grid-column: 1 / -1; }
	.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 */
	.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; }
	.topbar__inner { height: 64px; }
	.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-top { grid-template-columns: 1fr 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; }
.foot-top { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot-col a { font-size: 14px; }
@media (max-width: 1180px) { .foot-top { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .foot-top { grid-template-columns: 1fr 1fr; } }
/* Ô 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: 5 cột liên kết. */
.foot-top { grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1180px) { .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .foot-top { grid-template-columns: 1fr 1fr; } }

/* 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(18, 128, 107, .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 #BBE5CB; }
.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(161, 92, 0, .85), 0 2px 6px rgba(6, 35, 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: #F5BF55; 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: #22C55E; 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; }