@charset "UTF-8";
/* ==========================================================================
   NDH – Người Đồng Hành
   Bố cục cổng tài chính: thanh tìm kiếm trắng · nav xanh · hero carousel ·
   bảng danh mục đè lên hero · banner · công cụ · lưới chủ đề · footer.
   Giá trị màu/khoảng cách lấy từ bản tham chiếu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/*
	 * Tên biến giữ nguyên để không phải sửa hàng trăm quy tắc bên dưới,
	 * nhưng giá trị nay lấy từ assets/css/tokens.css — một nguồn duy nhất
	 * cho cả trang chủ lẫn các trang tổ chức cho vay.
	 */
	--blue:        var(--c-brand-600);
	--blue-dark:   var(--c-brand-700);
	--blue-text:   var(--c-brand-600);
	--blue-deep:   var(--c-brand-700);
	--blue-50:     var(--c-brand-50);
	--blue-100:    var(--c-brand-100);
	--blue-150:    var(--c-brand-200);

	--orange:      var(--c-warm-600);
	--orange-dark: var(--c-warm-700);
	--orange-50:   var(--c-warm-50);
	--red:         var(--c-warm-700);
	/* Nút hero đặt chữ TỐI lên nền sáng nên dùng sắc hổ phách rực. */
	--yellow:      var(--c-warm-400);
	--yellow-dark: var(--c-warm-300);

	--green:       var(--c-act-700);
	--green-dark:  var(--c-act-800);

	--ink:         var(--c-ink);
	--text:        var(--c-text);
	--text-2:      var(--c-muted);
	--muted:       var(--c-muted);
	--head:        var(--c-ink);

	--bg:          var(--c-white);
	--bg-alt:      var(--c-soft);
	--bg-blue:     var(--c-brand-50);
	--line:        var(--c-line);
	--line-2:      var(--c-line-soft);

	--font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--shell: 1200px;
	--gutter: 16px;

	--r-sm: 4px;
	--r:    8px;
	--r-lg: 12px;
	--r-pill: 60px;

	--sh-1: 0 1px 3px rgba(0,0,0,.08);
	--sh-2: 0 2px 10px rgba(0,0,0,.08);
	--sh-3: 0 4px 20px rgba(0,0,0,.10);
	--sh-card: 0 2px 12px rgba(31,58,90,.10);

	--head-h: 80px;
	--nav-h:  50px;
}

/* --------------------------------------------------------------------------
   2. Nền tảng
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; color: var(--head); }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -80px; left: 16px;
	z-index: 999;
	padding: 10px 18px;
	background: var(--blue);
	color: #fff;
	border-radius: 0 0 var(--r) var(--r);
	transition: top .2s;
}
.skip-link:focus { top: 0; }

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ico { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------------------
   3. Thanh trắng phía trên
   -------------------------------------------------------------------------- */
.site-head {
	position: sticky;
	top: 0;
	z-index: 200;
}

.topbar {
	background: #fff;
	border-bottom: 1px solid var(--line-2);
	transition: box-shadow .28s ease;
}
.site-head.is-stuck .topbar { box-shadow: 0 6px 22px -14px rgba(6, 35, 31, .55); }

.topbar__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 22px);
	height: 76px;
	transition: height .28s ease;
}
.site-head.is-stuck .topbar__inner { height: 66px; }

/* --- Logo --- */
.brand { display: flex; align-items: center; gap: 10px; flex: none; }

.brand__mark {
	display: flex;
	align-items: flex-end;
	gap: 2.5px;
	width: 38px; height: 36px;
	padding: 7px 6px;
	background: linear-gradient(145deg, var(--c-brand-500), var(--c-brand-700));
	border-radius: 11px;
	box-shadow: 0 5px 14px -7px rgba(10, 77, 67, .9);
}
.brand__mark span { flex: 1; background: #fff; border-radius: 1.5px; opacity: .92; }
.brand__mark span:nth-child(1) { height: 45%; }
.brand__mark span:nth-child(2) { height: 100%; }
.brand__mark span:nth-child(3) { height: 68%; }

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
/* 600 cho cả tên: tên nay lấy từ Cài đặt nên không tách được thành hai nửa
   đậm nhạt như chuỗi viết cứng trước đây */
.brand__name { font-size: 22px; font-weight: 600; color: var(--c-brand-700); letter-spacing: -.4px; }
.brand__name strong { font-weight: 700; }

/* Biểu tượng site đứng chỗ dấu hiệu — cùng kích thước với ô vuông CSS nó thay */
.brand__icon { display: block; width: 38px; height: 38px; flex: none; object-fit: contain; }
/* Nền trắng ở chân trang: nửa xanh của biểu tượng gần trùng màu nền xanh đen,
   để trần thì mất hẳn một nửa hình. Không có bản đơn sắc cho nền tối nên lót
   một ô trắng — cách các thương hiệu vẫn dùng khi thiếu bản nghịch đảo. */
.foot-brand .brand__icon {
	width: 44px;
	height: 44px;
	padding: 5px;
	background: #fff;
	border-radius: 10px;
}

/* Logo thay cả khối chữ khi đã đặt ở Tùy biến */
.brand__logo { display: block; width: auto; height: auto; max-height: 40px; max-width: 200px; object-fit: contain; }
.foot-brand .brand__logo { max-height: 44px; }
/* 10px là mức nhỏ nhất còn đọc được; nhỏ hơn nữa chỉ còn là hoa văn. */
/* Cắt một dòng: câu mô tả lấy từ Cài đặt có thể dài hơn hẳn chuỗi viết cứng
   cũ, để tự do thì đầu trang cao vống lên */
.brand__tag {
	font-size: 10px;
	color: var(--muted);
	letter-spacing: .1px;
	margin-top: 3px;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.foot-brand .brand__tag { max-width: none; white-space: normal; }

/* --- Ô tìm kiếm --- */
.topsearch {
	flex: 1;
	/* Không có min-width:0 thì flex item không co dưới kích thước nội dung,
	   đẩy nút menu ra ngoài màn hình hẹp. */
	min-width: 0;
	max-width: 460px;
	display: flex;
	align-items: center;
	height: 46px;
	padding-left: 14px;
	padding-right: 5px;
	background: var(--c-soft);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.topsearch:focus-within {
	background: #fff;
	border-color: var(--c-brand-500);
	box-shadow: 0 0 0 3px rgba(18, 128, 107, .14);
}

.topsearch__ico { width: 19px; height: 19px; margin-right: 9px; color: var(--muted); flex: none; }

.topsearch input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	font-size: 15px;
	color: var(--c-ink);
}
.topsearch input:focus { outline: none; }
.topsearch input::placeholder { color: #98A0AE; }

.topsearch button {
	flex: none;
	height: 36px;
	padding: 0 20px;
	background: var(--c-brand-600);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	border-radius: var(--r-pill);
	white-space: nowrap;
	transition: background-color .2s;
}
.topsearch button:hover { background: var(--c-brand-700); }

/* --- Nhóm bên phải --- */
.head-right { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); margin-left: auto; flex: none; }

.head-hotline { display: flex; align-items: center; gap: 10px; }

.head-hotline__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--c-act-50);
	color: var(--c-act-700);
	transition: background-color .2s, color .2s;
}
.head-hotline__icon .ico { width: 18px; height: 18px; }
.head-hotline:hover .head-hotline__icon { background: var(--c-act-700); color: #fff; }

.head-hotline__body { display: flex; flex-direction: column; line-height: 1.15; }
.head-hotline__label { font-size: 11.5px; color: var(--muted); }
.head-hotline__num {
	font-size: 16px;
	font-weight: 700;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

/* Nút chính — nhãn "Miễn phí" dạng viên thay cho ruy băng xoay của bản cũ */
.head-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 8px 0 18px;
	background: var(--c-warm-600);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--r-pill);
	white-space: nowrap;
	box-shadow: 0 6px 16px -8px rgba(154, 74, 6, .9);
	transition: background-color .2s, transform .2s;
}
.head-cta:hover { background: var(--c-warm-700); transform: translateY(-1px); }

.head-cta__tag {
	padding: 4px 10px;
	/* Nền trắng mờ khiến chữ trắng chỉ đạt 3,41:1; nền tối cho 6,9:1. */
	background: rgba(6, 35, 31, .30);
	border-radius: var(--r-pill);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .2px;
}

.head-login {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	transition: color .2s;
}
.head-login .ico { width: 19px; height: 19px; color: var(--muted); transition: color .2s; }
.head-login:hover, .head-login:hover .ico { color: var(--c-brand-600); }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--c-brand-600);
	flex: none;
}
.nav-toggle .ico--close { display: none; }
body.nav-open .nav-toggle .ico--menu { display: none; }
body.nav-open .nav-toggle .ico--close { display: block; }

/* --------------------------------------------------------------------------
   4. Thanh nav
   -------------------------------------------------------------------------- */
.mainbar {
	background: linear-gradient(90deg, var(--c-brand-700), var(--c-brand-600));
	position: relative;
	z-index: 190;
}
.mainbar .shell { display: flex; align-items: center; gap: 16px; }

.mainnav { display: flex; align-items: center; flex: 1; min-width: 0; }

.mainnav__item { position: relative; }

.mainnav__link {
	position: relative;
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 14px;
	color: rgba(255, 255, 255, .92);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: color .2s;
}
.mainnav__link:hover { color: #fff; }

/* Vạch chỉ báo trượt lên thay cho mảng nền đổi màu */
.mainnav__link::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--c-warm-400);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}
.mainnav__item:hover > .mainnav__link::after,
.mainnav__item.current-menu-item > .mainnav__link::after { transform: scaleX(1); }

/* Nút phụ bên phải thanh nav */
.mainbar__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 7px 15px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--r-pill);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .2s;
}
.mainbar__cta:hover { background: rgba(255, 255, 255, .24); }
.mainbar__cta .ico { width: 17px; height: 17px; }

/* --- Menu con --- */
.subnav {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 244px;
	padding: 8px;
	background: #fff;
	border-radius: var(--r-lg);
	box-shadow: 0 18px 44px -20px rgba(6, 35, 31, .55), 0 2px 8px rgba(6, 35, 31, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

/* Vùng đệm vô hình để chuột không rơi ra ngoài khi đi xuống menu con */
.subnav::before {
	content: "";
	position: absolute;
	top: -10px; left: 0; right: 0;
	height: 10px;
}

.mainnav__item--parent:hover > .subnav,
.mainnav__item--parent:focus-within > .subnav {
	opacity: 1; visibility: visible; transform: none;
}

.subnav__link {
	display: block;
	padding: 10px 14px;
	border-radius: var(--r-sm);
	font-size: 14.5px;
	color: var(--text);
	transition: background-color .18s, color .18s, padding-left .2s;
}
.subnav__link:hover {
	background: var(--c-brand-50);
	color: var(--c-brand-700);
	padding-left: 18px;
}

/* --------------------------------------------------------------------------
   5. Hero carousel
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	background: var(--bg-blue);
}

.hero__viewport { position: relative; height: 600px; overflow: hidden; }

.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__bg { position: absolute; inset: 0; }

/* Lớp phủ giúp chữ trắng luôn đọc được trên mọi ảnh nền */
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.05) 75%);
}

.hero__copy { position: relative; max-width: 620px; color: #fff; }

.hero__title {
	font-size: 46px;
	font-weight: 700;
	line-height: 1.16;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

.hero__figure-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 16px;
	margin-top: 22px;
}

.hero__pre { width: 100%; font-size: 23px; font-weight: 400; text-shadow: 0 1px 8px rgba(0,0,0,.3); }

.hero__figure {
	font-size: 58px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--yellow);
	text-shadow: 0 2px 12px rgba(0,0,0,.3);
	font-variant-numeric: tabular-nums;
}

.hero__post {
	font-size: 19px;
	line-height: 1.35;
	white-space: pre-line;
	text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	padding: 15px 30px;
	background: var(--yellow);
	color: #1A1A1A;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	border-radius: var(--r-pill);
	transition: background-color .2s, transform .2s;
}
.hero__cta:hover { background: var(--yellow-dark); transform: translateY(-1px); }
.hero__cta .ico { width: 19px; height: 19px; }

/* Nút chuyển slide */
.hero__arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(0,0,0,.34);
	color: #fff;
	transition: background-color .2s;
}
.hero__arrow:hover { background: rgba(0,0,0,.55); }
.hero__arrow--prev { left: 24px; }
.hero__arrow--next { right: 24px; }
.hero__arrow--prev .ico { transform: rotate(180deg); }

.hero__dots {
	position: absolute;
	left: 50%; bottom: 18px;
	translate: -50% 0;
	z-index: 3;
	display: flex;
	gap: 8px;
}
.hero__dot {
	width: 34px; height: 4px;
	border-radius: 2px;
	background: rgba(255,255,255,.45);
	transition: background-color .2s;
}
.hero__dot.is-active { background: #fff; }

/* --------------------------------------------------------------------------
   6. Bảng danh mục đè lên hero
   -------------------------------------------------------------------------- */
/* Bảng đè lên phần dưới ảnh hero, giống bố cục tham chiếu. */
.tiles-wrap { position: relative; margin-top: -132px; z-index: 5; }

.tiles {
	position: relative;
	background: #fff;
	border-radius: var(--r);
	box-shadow: var(--sh-card);
	padding: 20px;
}

.tiles__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Căn giữa theo chiều dọc: ô chưa có sản phẩm thì không in dòng số, thiếu
	   một dòng mà vẫn cân với các ô bên cạnh. */
	justify-content: center;
	gap: 7px;
	padding: 18px 10px 16px;
	background: var(--blue-50);
	border-radius: var(--r);
	text-align: center;
	transition: background-color .2s, transform .2s, box-shadow .2s;
}
.tile:hover {
	background: var(--blue-100);
	transform: translateY(-2px);
	box-shadow: var(--sh-2);
}

.tile__icon { color: var(--blue-text); }
.tile__icon .ico { width: 30px; height: 30px; stroke-width: 1.5; }

.tile__name { font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.tile__count { font-size: 13px; color: var(--muted); }
.tile__link { position: absolute; inset: 0; }

/* Nút bung thêm */
.tiles__expand {
	position: absolute;
	left: 50%; bottom: -17px;
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 56px; height: 34px;
	background: #fff;
	border-radius: 0 0 var(--r) var(--r);
	box-shadow: 0 6px 10px -6px rgba(0,0,0,.20);
	color: var(--muted);
}
.tiles__expand .ico { transition: transform .3s; }
.tiles__expand[aria-expanded="true"] .ico { transform: rotate(180deg); }

.tiles__grid--extra { margin-top: 12px; }
.tiles__grid--extra[hidden] { display: none; }

/* --------------------------------------------------------------------------
   7. Khối chung
   -------------------------------------------------------------------------- */
.section { padding-block: 56px; }
.section--alt { background: var(--bg-alt); }
.section--blue { background: var(--bg-blue); }
.section--tight { padding-block: 36px; }

.sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(26px, 3.4vw, 42px); }

.sec-head__chip {
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 15px;
	background: var(--c-brand-50);
	border: 1px solid var(--c-brand-100);
	border-radius: var(--r-pill);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--c-brand-600);
}

.sec-head__title {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 400;
	color: var(--head);
	line-height: 1.3;
	letter-spacing: -.2px;
}
.sec-head__small { font-weight: 400; }
.sec-head__big { font-weight: 700; }

.sec-head__lead {
	max-width: 62ch;
	margin: 12px auto 0;
	font-size: 15.5px;
	color: var(--text);
	line-height: 1.65;
}

.section__gap { height: clamp(32px, 4vw, 52px); }

/* --------------------------------------------------------------------------
   8. Thẻ danh mục nổi bật
   -------------------------------------------------------------------------- */
.promo-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(14px, 1.6vw, 20px);
}

.promo {
	--promo-a: var(--c-brand-600);
	--promo-b: var(--c-brand-700);

	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 22px 22px 20px;
	background: linear-gradient(125deg, var(--promo-a), var(--promo-b));
	border-radius: var(--r-lg);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 10px 26px -16px rgba(5, 30, 26, .6);
	transition: transform .28s var(--ease, ease), box-shadow .28s ease;
}
.promo:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -18px rgba(5, 30, 26, .68); }

.promo--teal   { --promo-a: #10916A; --promo-b: var(--c-act-800); }
.promo--indigo { --promo-a: var(--c-brand-500); --promo-b: var(--c-brand-700); }
.promo--amber  { --promo-a: var(--c-warm-600); --promo-b: var(--c-warm-700); }

/* Vệt sáng chéo thay cho mảng gradient trống của bản cũ */
.promo__glow {
	position: absolute;
	z-index: -1;
	top: -60%; right: -18%;
	width: 62%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,0) 68%);
	pointer-events: none;
}

.promo__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	flex: none;
	border-radius: 14px;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.24);
}
.promo__icon .ico { width: 26px; height: 26px; stroke-width: 1.6; }

.promo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Độ đục cao để chữ nhỏ vẫn đạt AA trên thẻ sáng nhất. */
.promo__kicker { font-size: 13px; color: rgba(255,255,255,.94); }
.promo__title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.promo__meta {
	margin-top: 4px;
	font-size: 13px;
	color: rgba(255,255,255,.94);
	font-variant-numeric: tabular-nums;
}

.promo__go {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	flex: none;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	transition: background-color .25s ease, transform .28s ease;
}
.promo__go .ico { width: 17px; height: 17px; }
.promo:hover .promo__go { background: rgba(255,255,255,.28); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   9. Nhóm chủ đề "Khám phá thêm"
   -------------------------------------------------------------------------- */
.explore {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}

.explore__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 18px 18px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.explore__card:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 12px 28px -20px rgba(5, 30, 26, .55);
	transform: translateY(-2px);
}

.explore__icon {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	flex: none;
	border-radius: 13px;
	background: var(--c-brand-50);
	color: var(--c-brand-600);
	transition: background-color .22s ease, color .22s ease;
}
.explore__icon .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.explore__card:hover .explore__icon { background: var(--c-brand-600); color: #fff; }

.explore__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.explore__label { font-size: 16.5px; font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.explore__desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.explore__caret {
	width: 18px; height: 18px;
	flex: none;
	color: #B9BEC8;
	transition: transform .25s ease, color .22s ease;
}
.explore__card:hover .explore__caret { color: var(--c-brand-600); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   10. Công cụ tài chính
   -------------------------------------------------------------------------- */
.toolgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}

.toolcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.toolcard:hover {
	border-color: var(--c-warm-400);
	box-shadow: 0 12px 28px -20px rgba(60, 40, 10, .5);
	transform: translateY(-2px);
}

.toolcard__icon {
	display: grid; place-items: center;
	width: 48px; height: 48px;
	flex: none;
	border-radius: 13px;
	background: var(--c-warm-50);
	color: var(--c-warm-700);
	transition: background-color .22s ease, color .22s ease, transform .3s ease;
}
.toolcard__icon .ico { width: 23px; height: 23px; stroke-width: 1.6; }
.toolcard:hover .toolcard__icon {
	background: var(--c-warm-600);
	color: #fff;
	transform: rotate(-5deg);
}

.toolcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.toolcard__name { font-size: 15.5px; font-weight: 700; color: var(--c-ink); line-height: 1.35; }
.toolcard__uses {
	font-size: 13px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.toolcard__go {
	color: #C2C7D0;
	flex: none;
	transition: transform .25s ease, color .22s ease;
}
.toolcard__go .ico { width: 19px; height: 19px; }
.toolcard:hover .toolcard__go { color: var(--c-warm-700); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   11. Lưới chủ đề
   -------------------------------------------------------------------------- */
.topic-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.topic {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	transition: box-shadow .25s, transform .25s;
}
.topic:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }

/* Đầu thẻ: dải màu + tên nhóm + số sản phẩm đếm thật */
.topic__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	color: #fff;
}
.topic__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .16);
}
.topic__icon .ico { width: 24px; height: 24px; }
.topic__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topic__name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.topic__count { font-size: 13px; opacity: .85; font-variant-numeric: tabular-nums; }

.topic__label {
	padding: 14px 18px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
}
.topic__label--posts { border-top: 1px solid var(--line-2); margin-top: 4px; }

.topic__subs, .topic__posts { padding: 0 18px; }

.topic__sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-2);
	font-size: 15px;
	color: var(--text);
	transition: color .18s;
}
.topic__subs li:last-child .topic__sub { border-bottom: 0; }
.topic__sub:hover { color: var(--blue-text); }
.topic__sub-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Con số luôn thẳng cột nên so sánh giữa các dòng chỉ cần liếc qua */
.topic__sub-count {
	flex: none;
	min-width: 30px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--blue-50);
	color: var(--blue-text);
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.topic__post {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 8px 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--text);
	transition: color .18s;
}
.topic__post:hover { color: var(--blue-text); }
.topic__post-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #C3C7CC; }

/* Đẩy chân thẻ xuống đáy để các thẻ trong cùng hàng có chân thẳng nhau,
   kể cả khi thẻ này có bài viết còn thẻ kia thì không. */
.topic__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding: 14px 18px;
	border-top: 1px solid var(--line-2);
	background: var(--bg-alt);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--blue-text);
	transition: background-color .18s;
}
.topic__all:hover { background: var(--blue-50); }
.topic__all .ico { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   12. Đối tác
   -------------------------------------------------------------------------- */
.partners {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(10px, 1.2vw, 16px);
}

.partner {
	--pt-tint: var(--c-brand-50);
	--pt-ink:  var(--c-brand-600);
	--pt-edge: var(--c-brand-200);

	display: flex;
	align-items: center;
	gap: 11px;
	/* Grid item mặc định min-width:auto nên không co dưới kích thước nội dung,
	   gây tràn ngang ở màn hình hẹp. */
	min-width: 0;
	padding: 14px 14px 14px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.partner:hover {
	border-color: var(--pt-edge);
	box-shadow: 0 12px 28px -20px rgba(6, 35, 31, .55);
	transform: translateY(-2px);
}

/* Công ty bảo hiểm dùng tông xanh ngọc để phân biệt với ngân hàng */
.partner--insurer {
	--pt-tint: var(--c-act-50);
	--pt-ink:  var(--c-act-700);
	--pt-edge: #A7DCC6;
}

/* Dấu hiệu chữ viết tắt thay cho logo bên thứ ba */
.partner__mark {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	flex: none;
	border-radius: 11px;
	background: var(--pt-tint);
	color: var(--pt-ink);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .3px;
	transition: background-color .22s ease, color .22s ease;
}
.partner:hover .partner__mark { background: var(--pt-ink); color: #fff; }

.partner__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.partner__name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--c-ink);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.partner__type {
	font-size: 11.5px;
	color: var(--muted);
	letter-spacing: .2px;
	transition: color .22s ease;
}
.partner:hover .partner__type { color: var(--pt-ink); }

/* Dải số liệu dưới lưới */
.partners__sum {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px clamp(20px, 3vw, 40px);
	margin-top: clamp(20px, 2.6vw, 30px);
	padding-top: clamp(18px, 2.2vw, 26px);
	border-top: 1px solid var(--line);
}

.partners__sum li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	color: var(--text);
}
.partners__sum strong {
	font-weight: 700;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}
.partners__sum .ico { width: 18px; height: 18px; flex: none; color: var(--c-brand-600); }
.partners__sum li:nth-child(2) .ico { color: var(--c-act-700); }
.partners__sum li:nth-child(3) .ico { color: var(--c-warm-700); }

/* --------------------------------------------------------------------------
   13. Khối tư vấn
   -------------------------------------------------------------------------- */
.consult {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(115deg, var(--c-brand-700) 0%, var(--c-brand-600) 58%, var(--c-brand-500) 100%);
	border-radius: var(--r-lg);
	padding: clamp(26px, 3.4vw, 46px);
	color: #fff;
}

/* Vầng sáng nhẹ phía sau form, tạo chiều sâu cho mảng phẳng */
.consult__glow {
	position: absolute;
	z-index: -1;
	top: -30%; right: -6%;
	width: min(620px, 62%); aspect-ratio: 1;
	background: radial-gradient(circle, rgba(242,183,5,.20), rgba(242,183,5,0) 66%);
	pointer-events: none;
}

.consult__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

/* --- Cột trái --- */
.consult__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 11px;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.24);
	border-radius: var(--r-pill);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2px;
}
.consult__eyebrow .ico { width: 16px; height: 16px; color: var(--c-warm-400); }

.consult__title {
	margin-top: 16px;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
}

.consult__lead {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255,255,255,.88);
	max-width: 52ch;
}

/* Ba bước — kẻ nối dọc giữa các số */
.cflow { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; }

.cflow__item {
	position: relative;
	display: flex;
	gap: 14px;
	padding-bottom: 18px;
}
.cflow__item:last-child { padding-bottom: 0; }

.cflow__item::before {
	content: "";
	position: absolute;
	left: 15px; top: 32px; bottom: 4px;
	width: 2px;
	background: rgba(255,255,255,.22);
}
.cflow__item:last-child::before { display: none; }

.cflow__num {
	position: relative;
	z-index: 1;
	display: grid; place-items: center;
	width: 32px; height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--c-warm-400);
	color: var(--c-ink);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cflow__body { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.cflow__title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; }
.cflow__desc { font-size: 14.5px; color: rgba(255,255,255,.78); line-height: 1.55; }

/* Số liệu tin cậy */
.ctrust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 34px;
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.20);
}
.ctrust__item { display: flex; flex-direction: column; }
.ctrust__value {
	font-size: 22px;
	font-weight: 700;
	color: var(--c-warm-400);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.ctrust__label { margin: 2px 0 0; font-size: 13.5px; color: rgba(255,255,255,.78); }

.consult__hotline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	font-size: 15.5px;
	color: rgba(255,255,255,.88);
	transition: color .2s;
}
.consult__hotline strong { color: #fff; font-variant-numeric: tabular-nums; }
.consult__hotline .ico { width: 18px; height: 18px; color: var(--c-warm-400); }
.consult__hotline:hover { color: #fff; }

/* --- Form --- */
.cform {
	background: #fff;
	border-radius: var(--r-lg);
	padding: clamp(20px, 2.2vw, 26px);
	box-shadow: 0 22px 50px -24px rgba(5, 30, 26, .55);
	/*
	 * Khối cha đặt color:#fff — nếu không đặt lại ở đây thì chữ trong ô nhập
	 * sẽ là trắng trên nền trắng và người dùng không thấy mình đang gõ gì.
	 */
	color: var(--c-text);
}

.cform__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--line-2);
}

.cform__head-icon {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	flex: none;
	border-radius: 11px;
	background: var(--c-brand-50);
	color: var(--c-brand-600);
}
.cform__head-icon .ico { width: 21px; height: 21px; }

.cform__title { display: block; font-size: 18px; font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.cform__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

.cform__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ffield { margin: 0 0 14px; }

.ffield__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-ink);
}

.ffield__box {
	position: relative;
	display: block;
}

.ffield__ico {
	position: absolute;
	left: 12px; top: 50%;
	translate: 0 -50%;
	width: 18px; height: 18px;
	color: var(--muted);
	pointer-events: none;
	transition: color .2s;
}
.ffield__box:focus-within .ffield__ico { color: var(--c-brand-600); }

.ffield__input {
	width: 100%;
	height: 46px;
	padding: 0 12px 0 40px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--c-ink);
	font-size: 15px;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .2s, box-shadow .2s;
}
.ffield__input::placeholder { color: #9AA0A6; }
.ffield__input:focus {
	outline: none;
	border-color: var(--c-brand-600);
	box-shadow: 0 0 0 3px rgba(13, 101, 85, .14);
}

.ffield__input--select {
	padding-right: 36px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23646C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}

/*
 * Dòng gợi ý dưới ô nhập.
 *
 * Nói trước định dạng đúng thay vì đợi người ta gõ sai rồi mới báo lỗi — đỡ
 * một vòng sửa. aria-describedby ở markup khiến trình đọc màn hình đọc dòng
 * này ngay khi con trỏ vào ô.
 */
.ffield__hint {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted);
}

/*
 * :user-invalid chứ không phải :invalid — :invalid bôi đỏ ô bắt buộc ngay khi
 * biểu mẫu vừa hiện ra, lúc người dùng còn chưa chạm vào. :user-invalid chỉ đỏ
 * sau khi họ đã gõ rồi rời ô, hoặc sau khi bấm gửi.
 */
.ffield__input:user-invalid {
	border-color: var(--c-danger);
}
.ffield__input:user-invalid:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}
.ffield:has( .ffield__input:user-invalid ) .ffield__hint {
	color: var(--c-danger);
}

/* Ô đồng ý */
.cconsent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 4px 0 16px;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
	cursor: pointer;
}
.cconsent input {
	width: 17px; height: 17px;
	margin: 2px 0 0;
	flex: none;
	accent-color: var(--c-brand-600);
	cursor: pointer;
}
.cconsent a { color: var(--c-brand-600); text-decoration: underline; text-underline-offset: 2px; }

.cform__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 52px;
	background: var(--c-act-700);
	color: #fff;
	font-size: 16.5px;
	font-weight: 700;
	border-radius: var(--r-sm);
	box-shadow: 0 8px 20px -10px rgba(4, 120, 87, .9);
	transition: background-color .2s, transform .2s;
}
.cform__submit:hover { background: var(--c-act-800); transform: translateY(-1px); }
.cform__submit .ico { width: 18px; height: 18px; transition: transform .25s; }
.cform__submit:hover .ico { transform: translateX(3px); }

.cform__note {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.5;
	text-align: left;
}
.cform__note .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-act-700); }

/* --------------------------------------------------------------------------
   14. Nút nổi
   -------------------------------------------------------------------------- */
.hotline-float {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 200;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	background: var(--c-danger);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	border-radius: var(--r-pill);
	box-shadow: 0 6px 18px -6px rgba(15, 27, 26, .45);
	font-variant-numeric: tabular-nums;
}
.hotline-float .ico { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-foot {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--c-night-900);
	color: rgba(255, 255, 255, .72);
	padding-top: clamp(38px, 5vw, 62px);
	font-size: 14.5px;
}

/* Vệt sáng indigo phía trên, tách footer khỏi khối nội dung mà không cần kẻ */
.site-foot::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--c-brand-500), var(--c-act-500) 55%, var(--c-warm-400));
	opacity: .85;
}

.site-foot__glow {
	position: absolute;
	z-index: -1;
	top: -34%; left: 50%;
	translate: -50% 0;
	width: min(900px, 90%); aspect-ratio: 2 / 1;
	background: radial-gradient(ellipse at center, rgba(18, 128, 107, .28), rgba(18, 128, 107, 0) 68%);
	pointer-events: none;
}

.foot-top {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3.4vw, 46px);
	padding-bottom: clamp(28px, 3.6vw, 44px);
}

/* --- Cột thương hiệu --- */
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand .brand__name { color: #fff; }
.foot-brand .brand__tag { color: rgba(255, 255, 255, .58); }

.foot-desc {
	line-height: 1.7;
	max-width: 42ch;
	color: rgba(255, 255, 255, .72);
}

/* Thông tin liên hệ */
.foot-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px 22px;
	margin-top: 24px;
}

.fcontact { display: flex; align-items: flex-start; gap: 11px; }

.fcontact__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 11px;
	background: var(--c-night-800);
	border: 1px solid var(--c-night-line);
	color: var(--c-warm-400);
}
.fcontact__icon .ico { width: 18px; height: 18px; stroke-width: 1.7; }

.fcontact__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.fcontact__label {
	font-size: 12px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.fcontact__value {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	line-height: 1.4;
	transition: color .2s;
}
a.fcontact__value:hover { color: var(--c-warm-400); }

.fcontact__value--big {
	font-size: 20px;
	font-weight: 700;
	color: var(--c-warm-400);
	font-variant-numeric: tabular-nums;
}
a.fcontact__value--big:hover { color: #fff; }

/* --- Cột liên kết --- */
.foot-col__title {
	position: relative;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 18px;
	padding-bottom: 10px;
	letter-spacing: .2px;
}
.foot-col__title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 26px; height: 2px;
	border-radius: 2px;
	background: var(--c-warm-400);
}

.foot-col ul { display: flex; flex-direction: column; gap: 2px; }

.foot-col a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 0;
	color: rgba(255, 255, 255, .72);
	transition: color .2s, gap .22s;
}
.foot-col a:hover { color: #fff; gap: 9px; }

.foot-col__caret {
	width: 13px; height: 13px;
	flex: none;
	color: var(--c-brand-500);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .22s, transform .22s;
}
.foot-col a:hover .foot-col__caret { opacity: 1; transform: none; }

/* --- Ghi chú miễn trừ --- */
.foot-note {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 16px 18px;
	margin-bottom: clamp(20px, 2.6vw, 30px);
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--c-night-line);
	border-radius: var(--r);
	font-size: 13px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .62);
}
.foot-note .ico { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--c-brand-500); }

/* --- Địa chỉ hội sở --- */
.foot-addr {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: clamp(20px, 2.6vw, 30px);
	font-size: 13px;
	font-style: normal; /* <address> mặc định in nghiêng, không hợp dải chân trang. */
	line-height: 1.65;
	color: rgba(255, 255, 255, .55);
}
.foot-addr .ico { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--c-brand-500); }
.foot-addr strong { font-weight: 700; color: rgba(255, 255, 255, .78); letter-spacing: .01em; }
.foot-addr a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.foot-addr a:hover,
.foot-addr a:focus-visible { color: #fff; border-bottom-color: currentColor; }

/* --- Dải dưới cùng --- */
.foot-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 26px;
	flex-wrap: wrap;
	padding-block: 20px;
	/*
	 * Chừa chỗ cho nút hotline nổi cố định ở góc phải màn hình — nếu không,
	 * nó che mất liên kết cuối cùng khi cuộn tới đáy trang.
	 */
	padding-bottom: 86px;
	border-top: 1px solid var(--c-night-line);
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
}

.foot-legal { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.foot-legal a { transition: color .2s; }
.foot-legal a:hover { color: #fff; }

.foot-top-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--c-night-line);
	border-radius: var(--r-pill);
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .82);
	transition: background-color .2s, color .2s, transform .22s;
}
.foot-top-link .ico { width: 15px; height: 15px; transform: rotate(-90deg); }
.foot-top-link:hover { background: rgba(255, 255, 255, .14); color: #fff; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   16. Trang nội dung
   -------------------------------------------------------------------------- */
.page-head { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding-block: 26px; }

.crumbs {
	display: flex; align-items: center; gap: 6px;
	font-size: 13.5px; color: var(--muted); margin-bottom: 10px;
	flex-wrap: wrap;
}
.crumbs .ico { width: 13px; height: 13px; }
.crumbs a:hover { color: var(--blue-text); }

.page-title { font-size: 30px; line-height: 1.3; max-width: 30ch; }

.page-meta {
	margin-top: 12px;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	font-size: 13.5px; color: var(--muted);
}

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
	padding-block: 40px;
}
.no-sidebar .layout { grid-template-columns: minmax(0, 1fr); }

.prose { max-width: 76ch; font-size: 16.5px; line-height: 1.75; color: var(--text); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { margin-top: 2em; font-size: 24px; }
.prose h3 { margin-top: 1.7em; font-size: 19px; }
.prose a { color: var(--blue-text); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .45em; }
.prose li::marker { color: var(--blue-text); }
.prose img { border-radius: var(--r); }
.prose blockquote {
	margin-inline: 0;
	padding: 16px 22px;
	background: var(--blue-50);
	border-left: 4px solid var(--blue);
	border-radius: 0 var(--r) var(--r) 0;
	font-style: italic;
}
.prose code { padding: .12em .38em; background: var(--bg-alt); border-radius: 3px; font-size: .92em; }
.prose pre { padding: 18px; background: #2C3136; color: #EEE; border-radius: var(--r); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg-alt); font-weight: 700; }

/* Thẻ bài viết */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.pcard { position: relative; display: flex; flex-direction: column; }
.pcard__media {
	aspect-ratio: 16 / 9;
	border-radius: var(--r);
	overflow: hidden;
	background: linear-gradient(135deg, #CFE3F2, #8FB8D8);
	margin-bottom: 12px;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.pcard__cat { color: var(--blue-text); font-weight: 500; }
.pcard__title { font-size: 17px; line-height: 1.4; color: var(--ink); transition: color .18s; }
.pcard:hover .pcard__title { color: var(--blue-text); }
.pcard__excerpt { margin-top: 7px; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.pcard__link { position: absolute; inset: 0; }

/* Cột bên */
.sidebar { position: sticky; top: 20px; align-self: start; }
.sidebar > * + * { margin-top: 26px; }
.widget + .widget { margin-top: 26px; }

.widget__title, .sidebar h2, .sidebar h3, .sidebar .wp-block-search__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--head);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--blue);
	text-transform: uppercase;
	letter-spacing: .3px;
}

.sidebar ul { display: flex; flex-direction: column; gap: 2px; }
.sidebar li { line-height: 1.45; }
.sidebar a { display: block; padding: 7px 0; font-size: 14.5px; color: var(--text); transition: color .18s; }
.sidebar a:hover { color: var(--blue-text); }

.wp-block-search__inside-wrapper { display: flex; gap: 8px; }
.wp-block-search__input {
	flex: 1; min-width: 0; height: 40px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 15px;
}
.wp-block-search__input:focus { outline: none; border-color: var(--blue); }
.wp-block-search__button {
	flex: none; height: 40px; padding: 0 16px;
	background: var(--blue); color: #fff; border: 0;
	border-radius: var(--r-sm); font-size: 14px; font-weight: 500; cursor: pointer;
}
.wp-block-search__button:hover { background: var(--blue-dark); }
.wp-block-latest-posts__post-date, .wp-block-latest-comments__comment-date {
	display: block; font-size: 12.5px; color: var(--muted);
}

/*
 * Phân trang
 *
 * the_posts_pagination() bọc các nút trong .nav-links, nên flex phải đặt ở lớp
 * đó. Đặt trên <nav> thì cả cụm chỉ là một ô flex duy nhất và các nút xếp dọc
 * thành một cột — lỗi này có ở mọi trang phân trang từ trước tới nay.
 */
.pagination { padding-block: 26px; }
.pagination .nav-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 40px; height: 40px; padding-inline: 12px;
	border: 1px solid var(--line); border-radius: var(--r-sm);
	font-size: 15px; color: var(--text); transition: all .18s;
}
.pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue-text); }
.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 404 */
.err { text-align: center; padding-block: 70px; }
.err__code { font-size: 110px; font-weight: 700; line-height: 1; color: var(--blue-150); }
.err__label { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--blue-text); text-transform: uppercase; letter-spacing: 1px; }
.err__title { margin-top: 8px; font-size: 26px; }
.err__lead { margin-top: 12px; color: var(--text-2); }
.err__actions { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 22px;
	background: var(--blue); color: #fff;
	border-radius: var(--r-sm); font-size: 15px; font-weight: 500;
	transition: background-color .2s;
}
.btn:hover { background: var(--blue-dark); }
.btn--ghost { background: none; color: var(--blue-text); border: 1px solid var(--blue); }
.btn--ghost:hover { background: var(--blue-50); }

.searchform { display: flex; gap: 8px; }
.searchform input[type="search"] {
	flex: 1; height: 44px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 15px;
}
.searchform input[type="search"]:focus { outline: none; border-color: var(--blue); }

/* --------------------------------------------------------------------------
   17. Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.tiles__grid { grid-template-columns: repeat(4, 1fr); }
	.topic-grid { grid-template-columns: repeat(2, 1fr); }
	.partners { grid-template-columns: repeat(4, 1fr); }
	.consult__grid { grid-template-columns: 1fr; }
	.layout { grid-template-columns: 1fr; }
	.foot-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	/* Ẩn hotline / CTA / đăng nhập, nhường chỗ cho ô tìm kiếm và nút menu */
	.topsearch { max-width: none; }
	.head-hotline, .head-cta, .head-login, .mainbar__cta { display: none; }
	.nav-toggle { display: grid; }
	.brand__tag { display: none; }

	.mainbar {
		position: fixed;
		inset: 76px 0 0 0;
		z-index: 95;
		overflow-y: auto;
		padding-bottom: 40px;
		opacity: 0; visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .25s, transform .25s, visibility .25s;
	}
	body.nav-open .mainbar { opacity: 1; visibility: visible; transform: none; }

	.mainbar .shell { display: block; }
	.mainnav { flex-direction: column; align-items: stretch; height: auto; }
	.mainnav__item { border-bottom: 1px solid rgba(255,255,255,.16); }
	.mainnav__link { height: auto; padding: 15px 16px; font-size: 16px; }
	/* Vạch chỉ báo chỉ hợp với thanh ngang, tắt trong ngăn kéo dọc */
	.mainnav__link::after { display: none; }

	.subnav {
		position: static;
		/* inherit: ngăn kéo đóng thì menu con cũng ẩn, không nhận chạm */
		opacity: 1; visibility: inherit; transform: none;
		background: rgba(0,0,0,.12);
		box-shadow: none; border-radius: 0; padding: 4px 0;
	}
	.subnav__link { color: rgba(255,255,255,.86); padding: 10px 30px; font-size: 15px; }
	.subnav__link:hover { background: rgba(0,0,0,.18); color: #fff; }

	.hero__viewport { height: 420px; }
	.hero__title { font-size: 34px; }
	.hero__figure { font-size: 44px; }
	.hero__pre { font-size: 19px; }
	.hero__post { font-size: 16px; }
	.hero__arrow { width: 40px; height: 40px; }
	.hero__arrow--prev { left: 10px; }
	.hero__arrow--next { right: 10px; }

	.section { padding-block: 40px; }
}

@media (max-width: 700px) {
	.tiles-wrap { margin-top: 20px; }
	.tiles__grid { grid-template-columns: repeat(3, 1fr); }
	.topic-grid { grid-template-columns: 1fr; }
	.partners { grid-template-columns: repeat(2, 1fr); }
	.foot-top { grid-template-columns: 1fr; }
	.hero__viewport { height: 360px; }
	.hero__title { font-size: 27px; }
	.sec-head__title { font-size: 21px; }
	.page-title { font-size: 23px; }
	.hotline-float { padding: 10px 16px; font-size: 15px; }

	/* Hai ô họ tên / điện thoại xếp dọc cho đủ chỗ gõ */
	.cform__row { grid-template-columns: 1fr; }
	.ctrust { gap: 14px 24px; }

	/*
	 * 16px, không nhỏ hơn. Safari trên iPhone tự phóng to cả trang khi con trỏ
	 * nhảy vào ô chữ dưới 16px, và không thu lại sau khi gõ xong — người dùng
	 * bị bỏ lại ở trang phóng đại, phải vuốt ngang mới đọc tiếp được.
	 */
	.ffield__input { font-size: 16px; }
}

@media (max-width: 460px) {
	.tiles__grid { grid-template-columns: repeat(2, 1fr); }
	.brand__tag { display: none; }
	.topsearch button { padding: 0 13px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   18. Khả năng tiếp cận
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.site-head, .site-foot, .hotline-float, .hero, .consult { display: none; }
	body { background: #fff; color: #000; }
}


/* ==========================================================================
   Hộp bật lên chứa biểu mẫu tư vấn
   ========================================================================== */
.cmodal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 32px);
}

/*
 * display:flex ở trên đè lên luật [hidden]{display:none} của trình duyệt, nên
 * thiếu dòng này thì hộp luôn hiện và phủ kín trang ngay khi tải — nền mờ nuốt
 * mọi cú bấm, kể cả cú bấm vào chính nút mở nó.
 */
.cmodal[hidden] { display: none; }

.cmodal__veil {
	position: absolute;
	inset: 0;
	background: rgba(6, 35, 31, .58);
	backdrop-filter: blur(2px);
}

.cmodal__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	/* Hộp cao hơn màn hình thì cuộn trong hộp, không đẩy trang phía sau. */
	max-height: calc(100dvh - 2 * clamp(12px, 4vw, 32px));
	overflow-y: auto;
	padding: clamp(20px, 3vw, 30px);
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(6, 35, 31, .32);
}

.cmodal__x {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--c-soft);
	border: 0;
	border-radius: 50%;
	color: var(--c-muted);
	cursor: pointer;
	transition: background .16s, color .16s;
}

.cmodal__x:hover { background: var(--c-line); color: var(--c-ink); }
.cmodal__x .ico { width: 17px; height: 17px; }

.cmodal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.cmodal__heading { min-width: 0; }

.cmodal__title {
	margin: 0;
	font-size: clamp(19px, 2.2vw, 23px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-ink);
}

.cmodal__lead {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--c-muted);
}

/* Trong hộp, biểu mẫu đã có khung riêng nên bỏ nền và viền của nó. */
.cmodal .cform {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.cmodal .cform__head { display: none; }

/* ---- Lời cảm ơn khi không cấu hình đường dẫn chuyển hướng ---- */
.cmodal__done { text-align: center; padding: 8px 0 4px; }

.cmodal__done-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	background: var(--c-act-50);
	border-radius: 50%;
	color: var(--c-act-700);
}

.cmodal__done-mark .ico { width: 26px; height: 26px; stroke-width: 2; }

.cmodal__done-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--c-ink);
}

.cmodal__done-text {
	margin: 8px auto 18px;
	max-width: 42ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--c-muted);
}

.cmodal__done-btn {
	padding: 11px 26px;
	background: var(--c-brand-700);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.cmodal__done-btn:hover { background: var(--c-brand-600); }

/* --------------------------------------------------------------------------
   Hộp tác giả chuyên môn (E-E-A-T)
   --------------------------------------------------------------------------
   Hiện ở cuối bài viết và cuối trang tổng hợp, mà hai nơi đó nạp hai bộ CSS
   khác nhau — nên khối này đặt ở main.css và lấy màu thẳng từ tokens.css thay
   vì các biến --purple/--ink chỉ tồn tại bên trong .lender.

   Ba vùng theo ba câu hỏi người đọc đặt ra: ai viết, dựa vào đâu, có gì chứng
   minh. Mỗi vùng một cách trình bày khác nhau để mắt tách được chúng ra mà
   không cần bốn dòng chữ hoa chen nhau như bản đầu.
   -------------------------------------------------------------------------- */
.eauthor {
	position: relative;
	margin-top: clamp(34px, 4.4vw, 52px);
	padding: clamp(20px, 2.6vw, 28px);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 18px;
	/* Bóng rất nhạt thay cho nền xám: khối nổi lên khỏi trang mà không biến
	   thành một ô ghi chú phụ ở cuối bài */
	box-shadow: 0 24px 48px -40px rgba(6, 35, 31, .55);
}
/* Vạch thương hiệu chạy dọc mép trái — dấu hiệu "đây là tiếng nói của toà
   soạn", không phải một khối nội dung bình thường */
.eauthor::before {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 18px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--c-brand-600), var(--c-act-700));
}

/* ---------- Ai viết ---------- */
.eauthor__top {
	display: flex;
	align-items: center;
	gap: 16px;
}

.eauthor__photo {
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--c-soft);
	/* Vòng trắng + viền mảnh: ảnh chân dung nào cũng tách khỏi nền, kể cả ảnh
	   chụp trên phông sáng */
	box-shadow: 0 0 0 3px var(--c-white), 0 0 0 4px var(--c-line);
}
/* Tổ chức đứng tên: ô dấu hiệu thay ảnh chân dung — không có mặt người nào để
   đặt vào đây, và một avatar mặc định thì chỉ làm khối mất tin cậy */
.eauthor__photo--mark {
	display: grid;
	place-items: center;
	background: var(--c-brand-50);
	color: var(--c-brand-700);
}
.eauthor__photo--mark .ico { width: 38px; height: 38px; stroke-width: 1.5; }
/* Dòng "Thuộc …" cũng là một khối riêng để nhận được màu đặt tay */
.eauthor--team .eauthor__owner { display: block; }
/* Ngân hàng mẹ xuống hàng riêng ở mọi khổ màn hình: hai mệnh đề "Thuộc X" và
   "Thành viên của Y" viết liền một dòng thì đọc thành một câu vô nghĩa */
.eauthor--team .eauthor__org { display: block; }
.eauthor--team .eauthor__exp .ico { color: var(--c-brand-600); }
.eauthor--team .eauthor__creds .ico { color: var(--c-muted); }
.eauthor--team .eauthor__creds a { color: var(--c-brand-700); }

.eauthor__photo--blank {
	display: grid;
	place-items: center;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--c-brand-700);
	background: var(--c-brand-50);
}

/* flex: 1 1 0 chứ không để tự do — trình duyệt xếp dòng flex theo bề rộng
   NỘI DUNG của ô, mà dòng chức danh trải hết ra thì rộng hơn cả thẻ, nên ảnh
   bị đẩy nằm một mình một dòng trên màn hẹp */
.eauthor__who { flex: 1 1 0; min-width: 0; }

.eauthor__eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--c-act-700);
}
.eauthor__eyebrow .ico { width: 14px; height: 14px; }

.eauthor__name {
	margin-top: 5px;
	font-size: clamp(20px, 2.2vw, 23px);
	font-weight: 700;
	color: var(--c-ink);
	line-height: 1.22;
	letter-spacing: -.2px;
}

.eauthor__role { margin-top: 4px; font-size: 14.5px; color: var(--c-muted); line-height: 1.45; }
.eauthor__role a { color: var(--c-brand-700); text-decoration: none; }
.eauthor__role a:hover { text-decoration: underline; }
.eauthor__sep { margin: 0 5px; }

/* Đẩy sang mép phải, và là lối đi duy nhất tới trang hồ sơ */
.eauthor__profile {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: none;
	margin-left: auto;
	padding: 8px 14px;
	background: var(--c-brand-50);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-brand-700);
	text-decoration: none;
	transition: background-color .18s;
}
.eauthor__profile:hover { background: var(--c-brand-100); }
.eauthor__profile .ico { width: 14px; height: 14px; transition: transform .18s; }
.eauthor__profile:hover .ico { transform: translateX(2px); }

/* ---------- Dựa vào đâu ---------- */
/* 66ch: cùng độ dài dòng với phần nội dung bài, mắt không phải đổi nhịp đọc */
.eauthor__bio {
	max-width: 66ch;
	margin-top: 16px;
	font-size: 15.5px;
	color: var(--c-text);
	line-height: 1.68;
}

/* Số năm làm nghề là tín hiệu mạnh nhất trong bốn tín hiệu nên tách riêng,
   nhưng dùng sắc thương hiệu chứ không phải nền xanh cảnh báo như bản đầu */
.eauthor__exp {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	/* Cùng chiều rộng với đoạn giới thiệu: trang tổng hợp rộng hơn trang bài,
	   thả tự do thì hai khối chữ ngay trên dưới nhau lại dài ngắn khác nhau */
	max-width: 66ch;
	margin-top: 14px;
	padding: 12px 16px;
	background: var(--c-brand-50);
	border-left: 3px solid var(--c-brand-500);
	border-radius: 0 10px 10px 0;
	font-size: 14.5px;
	color: var(--c-ink);
	line-height: 1.6;
}
.eauthor__exp .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--c-brand-600); }

.eauthor__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--c-muted);
}
.eauthor__meta a { color: var(--c-brand-700); font-weight: 600; text-decoration: none; }
.eauthor__meta a:hover { text-decoration: underline; }
/* Dấu chấm ngăn cách ở dòng này luôn hiện, kể cả màn hẹp: hai mẩu đều ngắn */
.eauthor__meta .eauthor__sep { display: inline; margin: 0; }

/* ---------- Có gì chứng minh ---------- */
/* Hai cột: xếp dọc thì khối cao gần gấp đôi, mà đây chỉ là phần cuối bài */
.eauthor__proof {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px 28px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--c-line-soft);
}

.eauthor__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--c-muted);
}

.eauthor__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
	padding: 0;
	list-style: none;
}
.eauthor__tags li {
	padding: 5px 12px;
	background: var(--c-soft);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-size: 13.5px;
	color: var(--c-text);
}

.eauthor__creds { margin-top: 10px; padding: 0; list-style: none; }
.eauthor__creds li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14.5px;
	color: var(--c-text);
	line-height: 1.5;
}
.eauthor__creds li + li { margin-top: 8px; }
.eauthor__creds .ico { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--c-act-700); }

/* ---------- Đối chiếu ---------- */
.eauthor__verify {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--c-line-soft);
}
.eauthor__verify .eauthor__label { margin-right: 2px; }
.eauthor__verify a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-brand-700);
	text-decoration: none;
	transition: border-color .18s, background-color .18s;
}
.eauthor__verify a:hover { background: var(--c-brand-50); border-color: var(--c-brand-200); }
/* Mũi tên chếch lên: quy ước "mở sang trang ngoài" */
.eauthor__verify .ico {
	width: 13px;
	height: 13px;
	transform: rotate(-45deg);
	opacity: .75;
}

@media (max-width: 640px) {
	.eauthor__top { flex-wrap: wrap; gap: 14px; }
	/*
	 * Nơi công tác xuống hàng riêng, bỏ dấu chấm giữa: dòng chức danh gãy ở
	 * khoảng trắng trước dấu chấm, và một dấu chấm đứng đầu dòng trông y như
	 * dấu đầu dòng của một danh sách.
	 */
	.eauthor__sep { display: none; }
	.eauthor__org { display: block; }
	.eauthor__photo { width: 64px; height: 64px; }
	.eauthor__photo--blank { font-size: 20px; }
	/* Nút hồ sơ xuống hàng riêng, không chen vào cạnh tên trên màn hẹp */
	.eauthor__profile { margin-left: 0; width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Đầu trang tĩnh (nguyên tắc biên tập, điều khoản…)
   --------------------------------------------------------------------------
   Thân trang mượn khung .lender__body của trang bài viết, nên chỉ cần dựng
   riêng phần đầu. Nền chuyển sắc rất nhạt tách khối tiêu đề khỏi phần chữ mà
   không cần một dải xám đặc cắt ngang trang như bản cũ.
   -------------------------------------------------------------------------- */
.pdoc__hero {
	padding: clamp(22px, 3.2vw, 40px) 0 clamp(20px, 2.6vw, 32px);
	background: linear-gradient(170deg, var(--c-brand-50), var(--c-white) 82%);
	border-bottom: 1px solid var(--c-line-soft);
}

.pdoc__title {
	max-width: 22ch;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 900;
	line-height: 1.14;
	letter-spacing: -.6px;
	color: var(--c-ink);
	text-wrap: balance;
}

.pdoc__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--c-muted);
}
.pdoc__meta .ico { width: 15px; height: 15px; margin-right: 2px; }
.pdoc__dot { opacity: .5; }