/* =====================================================================
   BANNER ƯU ĐÃI TÀI CHÍNH (trang chủ) — dựng bằng code như hero, dùng
   ảnh cụm tài sản AI (nền trong suốt). ĐỘC LẬP với banner rail phải.
   ===================================================================== */
.mb-promo {
	--p-gold: #e6c477;
	--p-gold-dk: #d4a943;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	margin-top: 46px;
	padding: 30px clamp(20px, 3vw, 46px);
	display: grid;
	grid-template-columns: 1.04fr 0.96fr;
	align-items: center;
	gap: 18px;
	min-height: 300px;
	background: linear-gradient(118deg, #0e2660 0%, #14307a 48%, #1c4098 100%);
	box-shadow: 0 18px 44px rgba(12, 30, 74, .22);
	isolation: isolate;
}
/* Nền trang trí: vòng cung vàng + đốm sáng */
.mb-promo-arc {
	position: absolute; z-index: 0; pointer-events: none;
	top: -46%; right: -8%; width: 440px; height: 440px;
	border-radius: 50%;
	border: 1.5px solid rgba(230, 196, 119, .26);
	box-shadow: 0 0 0 26px rgba(230, 196, 119, .06);
}
.mb-promo-motes {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(3px 3px at 18% 30%, rgba(230, 200, 130, .8), transparent 60%),
		radial-gradient(2px 2px at 40% 70%, rgba(230, 200, 130, .55), transparent 60%),
		radial-gradient(2.4px 2.4px at 62% 22%, rgba(255, 255, 255, .5), transparent 60%),
		radial-gradient(2px 2px at 86% 58%, rgba(230, 200, 130, .5), transparent 60%);
}

/* ---- Cột chữ ---- */
.mb-promo-copy { position: relative; z-index: 2; color: #fff; }
.mb-promo-kicker {
	display: inline-block;
	font-size: 12px; font-weight: 700; letter-spacing: .14em;
	color: var(--p-gold);
	border: 1px solid rgba(230, 196, 119, .42);
	padding: 5px 13px; border-radius: 999px;
}
.mb-promo-title {
	margin: 14px 0 14px;
	font-weight: 800; text-transform: uppercase;
	line-height: 1.12; letter-spacing: .006em;
	font-size: clamp(19px, 2.1vw, 31px);
}
.mb-promo-line { display: block; }
.mb-promo-line.mb-pw { color: #fff; }
.mb-promo-line.mb-pg,
.mb-promo-rate-num {
	background-image: linear-gradient(110deg, #b5872f 0%, #e6c477 38%, #fff6d8 49%, #ffffff 50%, #fff6d8 51%, #e6c477 60%, #b5872f 100%);
	background-size: 220% 100%;
	background-position: 42% 0;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--p-gold);
}
/* Số lãi suất: dải sáng rộng & tương phản hơn để lấp lánh rõ */
.mb-promo-rate-num {
	background-image: linear-gradient(100deg, #c8973a 0%, #f1cf78 30%, #fff7df 47%, #ffffff 50%, #fff7df 53%, #f1cf78 70%, #c8973a 100%);
	background-size: 260% 100%;
}

/* ---- Khối lãi suất ---- */
.mb-promo-rate { margin-bottom: 16px; }
.mb-promo-rate-label {
	display: block; margin-bottom: 2px;
	font-size: 12.5px; letter-spacing: .04em; color: #cfe0f8;
}
.mb-promo-rate-num {
	font-weight: 800; line-height: 1;
	font-size: clamp(40px, 5.2vw, 62px);
}
.mb-promo-rate-unit { font-size: .3em; font-weight: 700; margin-left: 2px; }
.mb-promo-rate-unit i { font-style: normal; opacity: .9; margin-left: 1px; }

/* ---- Dải tiện ích ---- */
.mb-promo-feats {
	list-style: none; margin: 0 0 20px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 12px 20px;
}
.mb-promo-feats li {
	display: flex; flex-direction: column;
	border-left: 2px solid rgba(230, 196, 119, .5);
	padding-left: 11px;
}
.mb-promo-feats b { color: var(--p-gold); font-size: 17px; font-weight: 800; line-height: 1.15; }
.mb-promo-feats span { font-size: 11.5px; color: #b9c9e8; }

/* ---- Nút ---- */
.mb-promo-cta {
	display: inline-flex; align-items: center; gap: 9px;
	background: linear-gradient(180deg, #f2d284 0%, var(--p-gold-dk) 100%);
	color: #22315f; font-weight: 800; font-size: 15px;
	padding: 12px 24px; border-radius: 12px; text-decoration: none;
	box-shadow: 0 10px 22px rgba(212, 169, 67, .32);
	transition: transform .18s ease, box-shadow .18s ease;
}
.mb-promo-cta span { transition: transform .18s ease; }
.mb-promo-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(212, 169, 67, .4); }
.mb-promo-cta:hover span { transform: translateX(4px); }

/* ---- Cụm ảnh tài sản ---- */
.mb-promo-stage {
	position: relative; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	height: 100%;
}
.mb-promo-glow {
	position: absolute; z-index: 0;
	width: 92%; height: 90%; left: 6%; top: 6%;
	background: radial-gradient(closest-side, rgba(120, 165, 240, .5), rgba(120, 165, 240, 0) 72%);
	filter: blur(6px); pointer-events: none;
}
.mb-promo-scene {
	position: relative; z-index: 1;
	display: block; width: 100%; max-width: 100%; max-height: 380px;
	width: auto; margin: 0 auto; height: auto;
	filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .34));
}

/* ---- Chuyển động vào trang ---- */
@media (prefers-reduced-motion: no-preference) {
	.mb-promo-line, .mb-promo-rate, .mb-promo-feats, .mb-promo-cta { opacity: 0; animation: mbPromoRise .7s cubic-bezier(.16, 1, .3, 1) forwards; }
	.mb-promo-line:nth-child(1) { animation-delay: .05s; }
	.mb-promo-line:nth-child(2) { animation-delay: .13s; }
	.mb-promo-rate { animation-delay: .22s; }
	.mb-promo-feats { animation-delay: .3s; }
	.mb-promo-cta { animation-delay: .38s; }
	@keyframes mbPromoRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
	.mb-promo-scene { animation: mbPromoIn 1s cubic-bezier(.16, 1, .3, 1) .1s both; }
	@keyframes mbPromoIn { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
	/* Dòng vàng vừa "trồi lên" (giữ opacity về 1) vừa lấp lánh — phải khai báo
	   cả 2 animation, nếu chỉ đặt shimmer sẽ ghi đè entrance và kẹt opacity:0. */
	.mb-promo-line.mb-pg { animation: mbPromoRise .7s cubic-bezier(.16, 1, .3, 1) .13s forwards, mbPromoShine 3.8s linear infinite; }
	.mb-promo-rate-num { animation: mbPromoShine 2.8s linear infinite; }
	@keyframes mbPromoShine { from { background-position: 140% 0; } to { background-position: -140% 0; } }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.mb-promo { grid-template-columns: 1fr; gap: 6px; padding: 26px clamp(18px, 4vw, 30px); text-align: center; }
	.mb-promo-stage { order: -1; }
	.mb-promo-scene { max-height: 300px; }
	.mb-promo-feats { justify-content: center; }
	.mb-promo-arc { top: -30%; right: -30%; }
}
@media (max-width: 560px) {
	.mb-promo-scene { max-height: 220px; }
	.mb-promo-feats { gap: 10px 14px; }
	.mb-promo-feats li { padding-left: 8px; }
	.mb-promo-feats b { font-size: 15px; }
}