/* ==========================================================================
   cs.aigaa.com 首页视觉升级 —— 工具门户风（深蓝 + 琥珀）
   --------------------------------------------------------------------------
   作用域：全部规则以 .hp-home / .hp-page-main 起头，仅影响首页，
           其余页面（calc_*.htm / article_*.htm）零影响。
   依赖：assets/css/bundle.min.css（主题） + loan.css，本文件在其后加载。
   作者：A先生    日期：2026-09-29
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 设计令牌 + 页面底色
   -------------------------------------------------------------------------- */
.hp-home {
	--hp-navy-900: #0b2447;
	--hp-navy-800: #11305c;
	--hp-navy-700: #17427c;
	--hp-navy-600: #1c56a0;
	--hp-blue-200: #cfe2f8;
	--hp-blue-100: #eaf2fd;
	--hp-blue-50: #f5f9ff;
	--hp-amber: #f2a71b;
	--hp-amber-600: #c97f06;
	--hp-amber-700: #9a6102;
	--hp-amber-50: #fdf4e2;
	--hp-ink: #122036;
	--hp-body: #33415c;
	--hp-text-2: #4b5b78;
	--hp-muted: #6c7d9b;
	--hp-line: #e2e9f4;
	--hp-soft: #f4f8fe;
	--hp-radius: 14px;
	--hp-shadow: 0 6px 22px -8px rgba(17, 48, 92, .12), 0 2px 6px rgba(17, 48, 92, .04);
	--hp-shadow-hover: 0 14px 26px -12px rgba(17, 48, 92, .30);

	font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
		"Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--hp-body);
}

/* 首页整体浅蓝底（只给首页的 .page-main 加类，见 index.htm 内联脚本） */
.page-main.hp-page-main {
	background: #f4f7fc;
}

/* 工具站不需要中文首行缩进（正文段落单独恢复，见 §8） */
.hp-home p {
	text-indent: 0;
}

/* --------------------------------------------------------------------------
   1. Hero 信息区
   -------------------------------------------------------------------------- */
.hp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin: 0 0 22px;
	padding: 34px 36px;
	border-radius: 20px;
	color: #fff;
	background:
		radial-gradient(130% 150% at 92% 4%, rgba(242, 167, 27, .22) 0%, rgba(242, 167, 27, 0) 48%),
		linear-gradient(128deg, #0a2244 0%, #113a70 48%, #1b58a2 100%);
	box-shadow: 0 18px 40px -18px rgba(11, 36, 71, .45);
}

/* 细网格纹理：呼应「计算/数据」的质感 */
.hp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, .3) 45%, transparent 78%);
	mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, .3) 45%, transparent 78%);
}

/* 右下琥珀光斑 */
.hp-hero::after {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -140px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle, rgba(242, 167, 27, .30), rgba(242, 167, 27, 0) 68%);
}

.hp-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 28px;
	align-items: center;
}

.hp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .3px;
	color: #ffd98a;
	background: rgba(242, 167, 27, .14);
	border: 1px solid rgba(242, 167, 27, .32);
}

.hp-hero__title {
	margin: 0 0 10px;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: 1px;
	text-align: left;
	color: #fff;
}

.hp-hero__title em {
	font-style: normal;
	color: #ffce6b;
}

.hp-hero__sub {
	margin: 0;
	max-width: 620px;
	font-size: 14px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .76);
}

.hp-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.hp-hero__tags span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 12px;
	color: rgba(255, 255, 255, .82);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
}

.hp-hero__tags span i {
	font-size: 13px;
	color: #ffce6b;
}

/* 利率速览卡 */
.hp-rates {
	padding: 16px 16px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .075);
	border: 1px solid rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hp-rates__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.hp-rates__head b {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .4px;
	color: rgba(255, 255, 255, .92);
}

.hp-rates__head em {
	font-style: normal;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .55);
}

.hp-rates__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.hp-rate {
	padding: 11px 12px;
	border-radius: 12px;
	background: rgba(9, 28, 55, .34);
	border: 1px solid rgba(255, 255, 255, .09);
}

.hp-rate__k {
	display: block;
	margin-bottom: 3px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .6);
	white-space: nowrap;
}

.hp-rate__v {
	display: block;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .3px;
	color: #fff;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.hp-rate--key .hp-rate__v {
	color: #ffc853;
}

.hp-rates__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.hp-rates__foot a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #0b2447;
	text-decoration: none;
	background: linear-gradient(135deg, #ffca63, #f2a71b);
	transition: filter .2s, transform .2s;
}

.hp-rates__foot a:hover {
	color: #0b2447;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   2. 区块标题
   -------------------------------------------------------------------------- */
.hp-sec {
	margin-bottom: 22px;
}

.hp-sec__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 13px;
}

.hp-sec__head h2 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: .3px;
	text-align: left;
	color: var(--hp-ink);
}

.hp-sec__head h2 i {
	font-size: 19px;
	color: var(--hp-amber-600);
}

.hp-sec__head p {
	margin: 0;
	font-size: 13px;
	color: var(--hp-muted);
}

/* --------------------------------------------------------------------------
   3. 计算器入口宫格
   -------------------------------------------------------------------------- */
.hp-tools__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.hp-tool {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 13px 14px;
	border-radius: var(--hp-radius);
	background: #fff;
	border: 1px solid var(--hp-line);
	box-shadow: 0 1px 3px rgba(17, 48, 92, .05);
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.hp-tool:hover {
	transform: translateY(-3px);
	border-color: #c6dcf6;
	box-shadow: var(--hp-shadow-hover);
	text-decoration: none;
}

.hp-tool__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 19px;
	color: var(--hp-navy-700);
	background: linear-gradient(145deg, #edf4fe, #dbe9fb);
	transition: color .2s, background .2s;
}

.hp-tool:hover .hp-tool__ico {
	color: #8a5700;
	background: linear-gradient(145deg, #fef3dd, #fbe2b2);
}

.hp-tool__txt {
	min-width: 0;
}

.hp-tool__t {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hp-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hp-tool__d {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--hp-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hp-tool--on .hp-tool__ico {
	color: #8a5700;
	background: linear-gradient(145deg, #fef3dd, #fbe2b2);
}

.hp-tool--on {
	border-color: #f0c477;
	box-shadow: 0 8px 20px -12px rgba(242, 167, 27, .9);
}

/* --------------------------------------------------------------------------
   4. 卡片通用（仅首页）
   -------------------------------------------------------------------------- */
.hp-home .card {
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	background: #fff;
	box-shadow: var(--hp-shadow);
}

.hp-home .card-body {
	padding: 22px;
}

.hp-home .card-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 800;
	text-align: left;
	color: var(--hp-ink);
}

.hp-home .card-title::before {
	content: "";
	flex: none;
	width: 3px;
	height: 15px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--hp-navy-600), var(--hp-navy-800));
}

.hp-home .card-header .card-title::before {
	background: linear-gradient(180deg, var(--hp-navy-600), var(--hp-navy-800));
}

.hp-home .card-title i {
	font-size: 17px;
	color: var(--hp-navy-600);
}


/* --------------------------------------------------------------------------
   5. 表单控件
   -------------------------------------------------------------------------- */
.hp-home .input-group {
	border-radius: 10px;
}

.hp-home .input-group > .input-group-text.start {
	justify-content: center;
	min-width: 94px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--hp-navy-800);
	background: var(--hp-soft);
	border: 1px solid var(--hp-line);
	border-right: 0;
	border-radius: 10px 0 0 10px;
}

.hp-home .input-group > .input-group-text.end {
	justify-content: center;
	min-width: 46px;
	padding: 9px 12px;
	font-size: 12.5px;
	color: var(--hp-muted);
	background: var(--hp-soft);
	border: 1px solid var(--hp-line);
	border-left: 0;
	border-radius: 0 10px 10px 0;
}

/* 「首次还款」那一行有两个 end 标签，中间的不能圆右角 */
.hp-home .input-group > .input-group-text.end:not(:last-child) {
	border-radius: 0;
	border-right: 1px solid var(--hp-line);
}

.hp-home .input-group > .form-control {
	padding: 9px 12px;
	font-size: 14.5px;
	color: var(--hp-ink);
	background: #fff;
	border: 1px solid var(--hp-line);
	box-shadow: none;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.hp-home .input-group > .form-control::placeholder {
	color: #a8b6cc;
}

.hp-home .input-group > .form-control:focus {
	z-index: 3;
	border-color: #8fb8e8;
	box-shadow: 0 0 0 3px rgba(28, 86, 160, .12);
}

.hp-home .input-group > .form-control:disabled,
.hp-home .input-group > .form-control[readonly] {
	background: #f8fafd;
	color: #7c8aa6;
}

.hp-home .input-group > .form-select {
	padding: 9px 30px 9px 12px;
	font-size: 14.5px;
	color: var(--hp-ink);
	border: 1px solid var(--hp-line);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.hp-home .input-group > .form-select:focus {
	z-index: 3;
	border-color: #8fb8e8;
	box-shadow: 0 0 0 3px rgba(28, 86, 160, .12);
}

/* select 的首尾圆角（bootstrap 只处理了一半） */
.hp-home .input-group > .form-select:last-child {
	border-radius: 0 10px 10px 0;
}

.hp-home .input-group > .form-select:not(:last-child) {
	border-radius: 0;
}

.hp-home textarea.form-control {
	padding: 12px;
	font-size: 14px;
	line-height: 1.75;
	border: 1px solid var(--hp-line);
	border-radius: 10px;
	resize: vertical;
}

.hp-home textarea.form-control:focus {
	border-color: #8fb8e8;
	box-shadow: 0 0 0 3px rgba(28, 86, 160, .12);
}

/* --------------------------------------------------------------------------
   6. 按钮
   -------------------------------------------------------------------------- */
.hp-home .btn {
	padding: 10px 16px;
	font-size: 14.5px;
	font-weight: 600;
	border-radius: 10px;
	transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}

.hp-home .btn i {
	font-size: 16px;
	vertical-align: -2px;
}

.hp-home .btn-primary {
	color: #fff !important;
	border: 0 !important;
	background: linear-gradient(135deg, var(--hp-navy-600), var(--hp-navy-800)) !important;
	box-shadow: 0 8px 18px -10px rgba(23, 66, 124, .85);
}

.hp-home .btn-primary:hover,
.hp-home .btn-primary:focus {
	color: #fff !important;
	background: linear-gradient(135deg, #2166b8, #123a70) !important;
}

.hp-home .btn-primary.disabled,
.hp-home .btn-primary:disabled {
	opacity: .55;
	box-shadow: none;
}

.hp-home .hp-btn-calc {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .6px;
	color: #3a2600;
	border: 0;
	background: linear-gradient(135deg, #ffc04d, var(--hp-amber));
	box-shadow: 0 10px 22px -10px rgba(242, 167, 27, .9);
}

.hp-home .hp-btn-calc:hover,
.hp-home .hp-btn-calc:focus {
	color: #3a2600;
	background: linear-gradient(135deg, #ffcb66, #e59a10);
	transform: translateY(-1px);
}

.hp-home .hp-btn-reset {
	font-weight: 600;
	color: var(--hp-navy-700);
	background: #fff;
	border: 1px solid #cddef5 !important;
}

.hp-home .hp-btn-reset:hover,
.hp-home .hp-btn-reset:focus {
	color: var(--hp-navy-800);
	background: var(--hp-blue-50);
	border-color: #a9c8ee !important;
}

/* --------------------------------------------------------------------------
   7. 结果卡：重点数字 + 明细表
   -------------------------------------------------------------------------- */
.hp-home .hp-res {
	overflow: hidden;
	background: #fff;
}

.hp-home .hp-res--a {
	border-top: 3px solid var(--hp-navy-600);
}

.hp-home .hp-res--b {
	border-top: 3px solid var(--hp-amber);
}

.hp-hl {
	margin-bottom: 14px;
	padding: 16px 14px 14px;
	border-radius: 12px;
	background: linear-gradient(180deg, #f8fbff, #eef4fd);
	border: 1px solid #e2ecf9;
	text-align: center;
}

.hp-hl__k {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: .3px;
	color: var(--hp-muted);
}

.hp-hl__big {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .5px;
	color: var(--hp-amber-600);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.hp-hl__big i {
	flex: none;
	margin-left: 0;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--hp-muted);
}

.hp-hl__big input {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	max-width: 100%;
	field-sizing: content;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-align: right;
	color: inherit;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
}

.hp-hl__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px dashed #d8e6f7;
}

.hp-hl__v {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hp-navy-800);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.hp-hl__v i {
	flex: none;
	margin-left: 0;
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var(--hp-muted);
}

.hp-hl__v input {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	max-width: 100%;
	field-sizing: content;
	padding: 0;
	font: inherit;
	text-align: right;
	color: inherit;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
}

.hp-hl input:disabled {
	color: inherit;
	background: transparent;
	opacity: 1;
}

.hp-rows {
	border: 1px solid var(--hp-line);
	border-radius: 11px;
	overflow: hidden;
}

.hp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
}

.hp-row:nth-child(odd) {
	background: #fafcff;
}

.hp-row+.hp-row {
	border-top: 1px solid #eef3fa;
}

.hp-row__k {
	flex: none;
	font-size: 13px;
	color: var(--hp-muted);
}

.hp-row__v {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 3px;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--hp-ink);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.hp-row__v i {
	flex: none;
	margin-left: 0;
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var(--hp-muted);
}

.hp-row__v input {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	max-width: 100%;
	field-sizing: content;
	padding: 0;
	font: inherit;
	text-align: right;
	color: inherit;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
}

.hp-row__v input:disabled {
	color: inherit;
	background: transparent;
	opacity: 1;
}

正文 / 说明
   -------------------------------------------------------------------------- */
.hp-home .hp-article {
	border-radius: var(--hp-radius);
}

.hp-home .hp-article h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 800;
	text-align: left;
	color: var(--hp-ink);
}

.hp-home .hp-article h2 i {
	font-size: 20px;
	color: var(--hp-navy-600);
}

.hp-home .hp-article p {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 2;
	color: var(--hp-text-2);
	text-indent: 2em;
}

.hp-home .hp-article p:last-child {
	margin-bottom: 0;
}

.hp-home .hp-sub {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 12px;
	font-size: 15px;
	font-weight: 800;
	color: var(--hp-navy-800);
}

.hp-home .hp-sub::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--hp-amber);
}

.hp-ol {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	counter-reset: hp-ol;
	display: grid;
	gap: 9px;
}

.hp-ol li {
	position: relative;
	padding-left: 34px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--hp-text-2);
}

.hp-ol li::before {
	counter-increment: hp-ol;
	content: counter(hp-ol);
	position: absolute;
	left: 0;
	top: 3px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	color: var(--hp-navy-700);
	background: var(--hp-blue-100);
}

/* --------------------------------------------------------------------------
   10. 侧栏（首页专用侧栏 inc-right-home.htm）
   -------------------------------------------------------------------------- */
.hp-main > .col-lg-4 .card {
	margin-bottom: 20px;
}

.hp-side-tip {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -6px 0 12px;
	padding: 8px 10px;
	border-radius: 9px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--hp-navy-700);
	background: var(--hp-blue-100);
}

.hp-side-tip i {
	font-size: 14px;
	color: var(--hp-navy-600);
}

.hp-main .card table {
	margin-bottom: 0;
	font-size: 13px;
}

.hp-main .card table th {
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--hp-navy-800);
	background: var(--hp-soft);
	border-color: #e6eefa;
	white-space: nowrap;
}

.hp-main .card table td {
	padding: 8px 10px;
	color: var(--hp-body);
	border-color: #eef3fa;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.hp-main .card table tbody tr:nth-child(even) td {
	background: #fbfdff;
}

.hp-main .card table td:last-child {
	font-weight: 700;
	color: var(--hp-navy-800);
}

.hp-main .card table a {
	font-weight: 700;
	color: var(--hp-navy-600);
	text-decoration: none;
}

.hp-table-note {
	margin: 9px 0 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--hp-muted);
	text-indent: 0;
}

.hp-main .list-group-no-border .list-group-item {
	padding: 9px 0;
	font-size: 13.5px;
	background: transparent;
	border: 0;
	border-bottom: 1px dashed #eaf0f9;
}

.hp-main .list-group-no-border .list-group-item:last-child {
	border-bottom: 0;
}

.hp-main .list-group-no-border .list-group-item>a {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--hp-body);
	text-decoration: none;
	transition: color .16s;
}

.hp-main .list-group-no-border .list-group-item>a i {
	flex: none;
	font-size: 14px;
	color: #b9c8dd;
	transition: color .16s, transform .16s;
}

.hp-main .list-group-no-border .list-group-item>a:hover {
	color: var(--hp-navy-600);
}

.hp-main .list-group-no-border .list-group-item>a:hover i {
	color: var(--hp-amber);
	transform: translateX(2px);
}

/* 侧栏小工具：输入更紧凑 */
.hp-main > .col-lg-4 .input-group > .input-group-text.start {
	min-width: 62px;
	font-size: 12.5px;
	padding: 8px 10px;
}

.hp-main > .col-lg-4 .input-group > .input-group-text.end {
	min-width: 40px;
	padding: 8px 10px;
	font-size: 12px;
}

.hp-main > .col-lg-4 .input-group > .form-control,
.hp-main > .col-lg-4 .input-group > .form-select {
	padding: 8px 10px;
	font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   11. 留言区 / 页脚
   -------------------------------------------------------------------------- */
.hp-home #message-card .card-body p {
	margin-bottom: 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--hp-text-2);
}

.hp-home .comment-list .comment-item:last-child {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
}

.hp-home .comment-user {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hp-navy-700);
}

.hp-home .comment-text {
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--hp-body);
}

.hp-page-main .footer-container {
	background: #d8e8fb;
	border-top: 1px solid rgba(30,58,138,.10);
}

.hp-page-main .footer-container h6 {
	font-size: 14px;
	font-weight: 700;
	color: #1e3a8a;
}

.hp-page-main .footer-container i {
	color: #2563eb;
}

.hp-page-main .footer-container p {
	font-size: 12.5px;
	line-height: 1.85;
	color: #475569;
}

.hp-page-main .link-container a {
	font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   12. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.hp-tool {
		padding: 12px;
	}

	.hp-tool__d {
		display: none;
	}
}

@media (max-width: 991px) {
	.hp-hero {
		padding: 26px 22px;
		border-radius: 16px;
	}

	.hp-hero__inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.hp-hero__title {
		font-size: 26px;
	}

	.hp-tools__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

}

@media (max-width: 575px) {
	.hp-hero {
		padding: 22px 18px;
	}

	.hp-hero__title {
		font-size: 23px;
		letter-spacing: .5px;
	}

	.hp-hero__sub {
		font-size: 13px;
		line-height: 1.8;
	}

	.hp-rates {
		padding: 13px 13px 12px;
	}

	.hp-rates__grid {
		gap: 8px;
	}

	.hp-rate {
		padding: 9px 10px;
	}

	.hp-rate__v {
		font-size: 18px;
	}

	.hp-sec__head h2 {
		font-size: 17px;
	}

	.hp-home .card-body {
		padding: 16px;
	}

	.hp-home .input-group > .input-group-text.start {
		min-width: 80px;
		font-size: 12.5px;
	}

	.hp-hl__big {
		font-size: 26px;
	}

	.hp-hl__v {
		font-size: 15px;
	}

	.hp-home .hp-article h2 {
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------
   10. 内页通用（计算器 / 资讯页复用首页设计语言）
   -------------------------------------------------------------------------- */
/* 页面级 Hero：比首页矮一档 */
.hp-hero--page {
	padding: 26px 30px;
	border-radius: 16px;
}

.hp-hero--page .hp-hero__title {
	font-size: 25px;
}

.hp-hero--page .hp-hero__sub {
	font-size: 13.5px;
}

.hp-hero__inner--solo {
	grid-template-columns: minmax(0, 1fr);
}

/* 内页 Q&A 折叠卡（沿用原 grid-item 结构，样式对齐首页） */
.hp-home .grid-item > .card-collapsed {
	overflow: hidden;
	background: #fff !important;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
}

.hp-home .grid-item .card-header {
	padding: 15px 18px;
	background: transparent;
	border-bottom: 0;
	cursor: pointer;
	transition: background .18s;
}

.hp-home .grid-item .card-header:hover {
	background: var(--hp-blue-50);
}

.hp-home .grid-item a.card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px !important;
	font-weight: 700;
	color: var(--hp-ink) !important;
	text-decoration: none;
}

.hp-home .grid-item a.card-title::before {
	display: none;
}

.hp-home .grid-item a.card-title i {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	font-size: 16px;
	color: var(--hp-amber-600) !important;
	background: var(--hp-amber-50);
}

.hp-home .grid-item .card-header:hover a.card-title i {
	color: #fff !important;
	background: linear-gradient(135deg, var(--hp-amber), var(--hp-amber-600));
}

.hp-home .grid-item .card-body p {
	margin-bottom: 10px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--hp-text-2);
}

.hp-home .grid-item .card-body p:last-child {
	margin-bottom: 0;
}

/* 表格（侧栏利率表 / 弹窗还款计划） */
.hp-home .table > :not(caption) > * > * {
	padding: 10px 14px;
}

.hp-home .table thead th {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .4px;
	color: var(--hp-muted);
	background: var(--hp-soft);
	border-bottom: 1px solid var(--hp-line);
}

.hp-home .table tbody td {
	color: var(--hp-text-2);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.hp-home .table-bordered,
.hp-home .table-bordered > :not(caption) > * > * {
	border-color: var(--hp-line);
}

.hp-home .table-hover > tbody > tr:hover > * {
	color: var(--hp-ink);
	background: var(--hp-blue-50);
	--bs-table-accent-bg: transparent;
}

/* 弹窗（还款计划） */
.hp-home .modal-content {
	border: 1px solid var(--hp-line);
	border-radius: 14px;
	box-shadow: 0 24px 60px -24px rgba(11, 36, 71, .45);
}

.hp-home .modal-header {
	border-bottom: 1px solid var(--hp-line);
}

.hp-home .modal-title {
	font-weight: 800;
	color: var(--hp-ink);
}

/* 分页 —— 数字方格 + 文字胶囊 */
.hp-home .pagination {
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.hp-home .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 11px;
	border: 1px solid var(--hp-line);
	border-radius: 11px !important;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--hp-navy-700);
	box-shadow: 0 1px 2px rgba(17, 48, 92, .05);
	transition: color .18s ease, background .18s ease, border-color .18s ease,
		box-shadow .18s ease, transform .18s ease;
}

.hp-home .page-item:first-child .page-link:hover,
.hp-home .page-item:nth-last-child(2) .page-link:hover,
.hp-home .page-item:last-child .page-link:hover {
	background: var(--hp-blue-100);
	border-color: var(--hp-blue-200);
	color: var(--hp-navy-700);
}

.hp-home .page-link:hover {
	color: var(--hp-navy-600);
	background: var(--hp-blue-50);
	border-color: var(--hp-blue-200);
	box-shadow: 0 8px 16px -10px rgba(28, 86, 160, .55);
	transform: translateY(-1px);
}

.hp-home .page-link:focus,
.hp-home .page-link:focus-visible {
	box-shadow: 0 0 0 3px rgba(28, 86, 160, .15);
	outline: none;
}

/* 上页 / 下页 / 尾页：淡蓝胶囊，与白色数字方格区分 */
.hp-home .page-item:first-child .page-link,
.hp-home .page-item:nth-last-child(2) .page-link,
.hp-home .page-item:last-child .page-link {
	background: var(--hp-blue-50);
	border-color: var(--hp-blue-200);
	color: var(--hp-navy-600);
}

.hp-home .page-item.active .page-link,
.hp-home .page-item.active .page-link:hover {
	color: #fff;
	background: linear-gradient(135deg, var(--hp-navy-600), var(--hp-navy-800));
	border-color: transparent;
	box-shadow: 0 8px 18px -8px rgba(17, 48, 92, .70);
	transform: translateY(-1px);
}

.hp-home .page-item.disabled .page-link,
.hp-home .page-item.disabled .page-link:hover {
	height: 40px;
	min-width: 40px;
	color: #b9c4d8;
	background: #f7f9fd;
	border-color: #eef3fa;
	box-shadow: none;
	transform: none;
}

/* 资讯列表卡 */

.hp-home .information-item {
	transition: box-shadow .18s;
}

.hp-home .information-item h3 a {
	color: var(--hp-ink);
	text-decoration: none;
	transition: color .18s;
}

.hp-home .information-item h3 a:hover {
	color: var(--hp-navy-600);
}

.hp-home .information-item .fz13,
.hp-home .information-item .text-muted {
	font-size: 12.5px;
}

（覆盖 .main-container 全局 60px），与横幅间距一致 */
.hp-home {
	margin-top: 10px;
}


/* --------------------------------------------------------------------------
   11. 结果汇总条（仿 chafangdai：还款总额=贷款总额+利息总额 + 贷款/利息比例条）
   -------------------------------------------------------------------------- */
.zx-sum {
	margin-bottom: 14px;
	padding: 14px 14px 12px;
	border-radius: 12px;
	background: linear-gradient(180deg, #f8fbff, #eef4fd);
	border: 1px solid #e2ecf9;
}

.zx-sum__calc {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.zx-sum__item {
	text-align: center;
	min-width: 56px;
}

.zx-sum__value {
	display: block;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--hp-navy-800);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.zx-sum__value--total {
	font-size: 20px;
	color: var(--hp-amber-600);
}

.zx-sum__value--int {
	color: #e34d4d;
}

.zx-sum__name {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--hp-muted);
}

.zx-sum__op {
	font-size: 15px;
	font-weight: 700;
	color: #9db4d4;
}

.zx-sum__range {
	display: flex;
	height: 26px;
	margin-top: 12px;
	border-radius: 6px;
	overflow: hidden;
}

.zx-sum__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	transition: width .4s ease;
}

.zx-sum__bar span {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
}

.zx-sum__bar--cost {
	background: #4a80e8;
}

.zx-sum__bar--int {
	background: #f06060;
}

.zx-title-accent {
	color: var(--hp-navy-600);
}

.hp-res--b .zx-title-accent {
	color: var(--hp-amber);
}

@media (max-width: 568px) {
	.zx-sum {
		padding: 12px 10px 10px;
	}

	.zx-sum__calc {
		gap: 8px;
	}

	.zx-sum__item {
		min-width: 48px;
	}

	.zx-sum__value {
		font-size: 16px;
	}

	.zx-sum__value--total {
		font-size: 17px;
	}
}


/* ===== 介绍卡（zx-intro-sec）正文排版：避免文字过密、行距过窄 ===== */
.zx-intro-sec .card-body {
	padding: 22px 26px;
}
.zx-intro-sec .card-body h2 {
	margin-bottom: 14px;
}
.zx-intro-sec .card-body p {
	font-size: 15px;
	line-height: 1.9;
	margin: 0 0 12px;
	color: #4b5563;
}
.zx-intro-sec .card-body p:last-child {
	margin-bottom: 0;
}
@media (max-width: 568px) {
	.zx-intro-sec .card-body p {
		font-size: 13px;
		line-height: 1.85;
		margin-bottom: 10px;
	}
}
/* ==== 历史LPR页：表格卡自动撑满左栏，消除右栏等高留下的空白 ==== */
/* 说明：table-responsive 的 flex-basis 必须是一个确定长度(700px)，
   若写 0%/auto，Chrome 计算列固有高度时会退回按内容高度(3300px+)，导致整页被撑长。 */
@media (min-width: 992px) {
	.lpr-fill-col { display: flex; flex-direction: column; }
	.lpr-fill-col > .card:last-of-type { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
	.lpr-fill-col > .card:last-of-type > .card-header { flex: 0 0 auto; }
	.lpr-fill-col > .card:last-of-type > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
	.lpr-fill-col > .card:last-of-type .table-responsive { flex: 1 1 700px; min-height: 320px; max-height: none; }
}
@media (max-width: 991.98px) {
	.lpr-fill-col .table-responsive { max-height: 700px; }
}

/* ===== 移动端精简：宫格 / 首页贷款相关 / 资讯页右栏卡片 2026-09-30 ===== */
@media (max-width: 991px) {
	.hp-tools,
	.home-loan-faq,
	.zixun-page > .row > .col-lg-4 > .card {
		display: none !important;
	}

	/* 分页：移动端紧凑排版，避免「上页 / 下页 / 尾页」被挤成竖排 */
	.hp-home .pagination {
		gap: 6px;
	}

	.hp-home .page-link {
		min-width: 32px;
		height: 34px;
		padding: 0 9px;
		border-radius: 10px !important;
		font-size: 13px;
		white-space: nowrap;
	}

	.hp-home .page-item.disabled .page-link {
		height: 34px;
		min-width: 32px;
	}
}

/* ===== 全国城市大全页 /chengshidaquan/   2026-09-30 ===== */
/* 内容区一比一仿 chafangdai.com/daquan/，外框沿用本站卡片风格 */
.hp-home .dq-city {
	margin-bottom: 20px;
	background: #fff;
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
}

.hp-home .dq-city__hd {
	padding: 25px 20px 0;
	text-align: center;
}

.hp-home .dq-city__hd h1 {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 800;
	color: var(--hp-ink);
}

.hp-home .dq-city__hd p {
	margin: 2px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--hp-muted);
}

.hp-home .dq-city__bd {
	padding: 15px 22px 20px;
}

.hp-home .dq-map {
	width: 100%;
	padding: 30px 0 20px;
	margin-bottom: 20px;
	background: var(--hp-soft);
	border-radius: 12px;
	text-align: center;
}

.hp-home .dq-map__svg {
	display: block;
	width: 560px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.hp-home .dq-map .dq-link path {
	cursor: pointer;
	transition: fill .16s ease;
}

.hp-home .dq-map .dq-link:hover path {
	fill: #cb625c;
}

/* 港澳台：源站地图上有形状但无对应城市分组，保留形状、去掉可点击态，避免点了没反应 */
.hp-home .dq-map .dq-link--static path,
.hp-home .dq-map .dq-link--static text {
	cursor: default;
	pointer-events: none;
}

.hp-home .dq-map text {
	fill: #333;
	text-anchor: middle;
	font: 12px Arial, Helvetica, sans-serif;
	cursor: pointer;
}

.hp-home .dq-row {
	padding: 2px 0;
	line-height: 32px;
	overflow: hidden;
}

.hp-home .dq-row__title {
	float: left;
	width: 100px;
	height: 32px;
	background: #eef4fd;
	border-radius: 6px;
	text-align: center;
	line-height: 32px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hp-navy-700);
}

.hp-home .dq-row__body {
	margin-left: 120px;
	line-height: 32px;
}

.hp-home .dq-row__body a {
	display: inline-block;
	padding: 0 10px;
	text-align: center;
	line-height: 32px;
	font-size: 14px;
	color: var(--hp-body);
	text-decoration: none;
	transition: color .16s ease;
}

.hp-home .dq-row__body a:hover {
	color: #cb625c;
	text-decoration: none;
}

@media (max-width: 991px) {
	.hp-home .dq-city__hd { padding: 18px 14px 0; }
	.hp-home .dq-city__hd h1 { font-size: 18px; line-height: 24px; }
	.hp-home .dq-city__hd p { font-size: 13px; line-height: 20px; }
	.hp-home .dq-city__bd { padding: 12px 12px 16px; }
	.hp-home .dq-map { padding: 20px 0 10px; margin-bottom: 14px; }
	.hp-home .dq-map__svg { width: 100%; }
	.hp-home .dq-row { padding: 8px 0 2px; }
	.hp-home .dq-row__title { float: none; margin: 0 auto 4px; }
	.hp-home .dq-row__body { margin-left: 0; text-align: center; line-height: 28px; }
	.hp-home .dq-row__body a { padding: 0 7px; font-size: 13px; line-height: 28px; }
}

/* ===== 顶部导航：窄桌面压缩 =====
   .side-menu 带 overflow-x:hidden，栏目多时右端会被静默裁掉；
   主题规则 .landing-page.horizontal .side-menu > li > a 的 padding/margin 带 !important，覆盖时必须同样加 !important */
@media (min-width: 1100px) and (max-width: 1199.98px) {
	.main-sidemenu .side-menu > li > a.side-menu__item {
		padding: 6px 5px !important;
		margin: -3px 3px !important;
	}
	.main-sidemenu .side-menu > li > a.side-menu__item,
	.main-sidemenu .side-menu > li > a.side-menu__item .side-menu__label,
	.main-sidemenu .side-menu > li > a.side-menu__item i {
		font-size: 14px;
	}
}
@media (min-width: 992px) and (max-width: 1099.98px) {
	.main-sidemenu .side-menu > li > a.side-menu__item {
		padding: 6px 4px !important;
		margin: -3px 2px !important;
	}
	.main-sidemenu .side-menu > li > a.side-menu__item,
	.main-sidemenu .side-menu > li > a.side-menu__item .side-menu__label,
	.main-sidemenu .side-menu > li > a.side-menu__item i {
		font-size: 13px;
	}
}

/* 城市页面包屑（源站城市页有「城市大全 / XX房贷计算器」），2026-09-30 */
.hp-home .hp-crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 12px;
	padding: 0 4px;
	font-size: 13px;
	color: var(--hp-muted);
}
.hp-home .hp-crumb a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--hp-navy-600);
	font-weight: 500;
	text-decoration: none;
}
.hp-home .hp-crumb a:hover {
	color: var(--hp-navy-800);
	text-decoration: underline;
}
.hp-home .hp-crumb > i {
	font-size: 14px;
	color: #b9c4d8;
}
.hp-home .hp-crumb a i {
	color: inherit;
	font-size: 14px;
}

/* ===== 移动端头部占位修复 2026-09-30 =====
   移动端 .hor-header.header 是 position:fixed 高 70px，但内容容器 top 只有 10px ——
   内容区没有为 header 留占位，导致 hero 顶部（badge 等）被 header 遮住。
   PC 端有另一个高度 ~64px 的占位元素所以正常，移动端缺失，这里补上。 */
@media (max-width: 991px) {
	.container.hp-home {
		padding-top: 60px;
	}
}

/* ==========================================================================
   SEO 语义化 H1 兼容层（2026-09-30）
   以下元素仅做「标签语义升级」，靠本层把浏览器/框架的默认样式拉回与原标签
   一致，保证视觉零变化。
   ========================================================================== */
/* 老式布局主标题：原 <h2>（2rem）升级为 <h1> */
.hp-h1-as-h2 {
	margin: 0 0 .5rem;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
}
/* 老式布局副标题：原 <h4>（1.5rem）降级为 <p>，避免 H1 之前出现 H4 */
.hp-title-lg {
	margin: 0 0 .5rem;
	font-size: 1.5rem;
	line-height: 1.2;
}
/* 面包屑容器：原 <div> 升级为 <h1>，完全继承父级排版 */
.hp-breadcrumb-h1 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	display: block;
}

/* ===== 城市页同省导航（SEO 差异化内容 + 内链）2026-09-30 ===== */
.ct-citynav .hp-sec__head p {
	margin: 6px 0 0;
	color: var(--hp-muted, #6b7891);
	font-size: 13.5px;
}
.ct-citynav__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 18px;
}
.ct-chip {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--hp-blue-50, #eef4ff);
	border: 1px solid #d7e4fb;
	color: var(--hp-navy-600, #2a4171);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	transition: background .2s, border-color .2s;
}
.ct-chip:hover {
	background: #dbe7ff;
	border-color: #c2d6fb;
	color: var(--hp-navy-800, #1b2a4a);
}
.ct-citynav__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--hp-muted, #6b7891);
}
@media (max-width: 991px) {
	.ct-chip { height: 34px; padding: 0 13px; font-size: 12.5px; }
	.ct-citynav__grid { gap: 8px; }
}