@charset "UTF-8";
/* ==========================================================================
   TheBank Portal
   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(13, 22, 48, .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(30, 58, 138, .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; }
.brand__name { font-size: 22px; font-weight: 400; color: var(--c-brand-700); letter-spacing: -.4px; }
.brand__name strong { font-weight: 700; }
/* 10px là mức nhỏ nhất còn đọc được; nhỏ hơn nữa chỉ còn là hoa văn. */
.brand__tag { font-size: 10px; color: var(--muted); letter-spacing: .1px; margin-top: 3px; }

/* --- Ô 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(59, 98, 212, .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(13, 22, 48, .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(13, 22, 48, .55), 0 2px 8px rgba(13, 22, 48, .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;
	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(10, 20, 50, .6);
	transition: transform .28s var(--ease, ease), box-shadow .28s ease;
}
.promo:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -18px rgba(10, 20, 50, .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(10, 20, 50, .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); }

.topic__img { aspect-ratio: 16 / 9; }

.topic__explore-head {
	padding: 13px 18px;
	background: var(--blue-100);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--head);
}

.topic__explore-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 18px;
	border-top: 1px solid var(--line-2);
	font-size: 15px;
	color: var(--text);
	transition: color .18s, background-color .18s;
}
.topic__explore-item:hover { color: var(--blue-text); background: var(--bg-alt); }
.topic__explore-item .ico { width: 17px; height: 17px; color: #C3C7CC; }

.topic__body { padding: 18px; }

.topic__heading {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--blue-150);
	font-size: 16.5px;
	font-weight: 700;
	color: var(--blue-text);
}
.topic__heading::before {
	content: "";
	width: 4px; height: 17px;
	background: var(--blue);
	border-radius: 1px;
	flex: none;
}

.topic__links { margin-top: 4px; }

.topic__link {
	display: block;
	padding: 13px 0;
	border-bottom: 1px dashed var(--line);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.45;
	transition: color .18s;
}
.topic__links li:last-child .topic__link { border-bottom: 0; padding-bottom: 0; }
.topic__link:hover { color: var(--blue-text); }

/* --------------------------------------------------------------------------
   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(13, 22, 48, .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(10, 20, 50, .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(37, 71, 176, .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;
}

/* Ô đồ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(11, 110, 79, .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(21, 26, 36, .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(59, 98, 212, .28), rgba(59, 98, 212, 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;
		opacity: 1; visibility: visible; 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; }
}

@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; }
}