/* Nền cam luôn phủ toàn bộ hero */
.nihao-hero-base {
	background-color: #ffc94d !important;
	background-image: url("http://localhost:8100/wp-content/uploads/2026/08/f937b60c69aec5126afc484ae198364a8080580d.png") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* =========================
   DESKTOP: CAO ĐÚNG 544PX
   ========================= */

.nihao-hero-cover {
	height: 544px !important;
	min-height: 544px !important;
	max-height: 544px !important;
	overflow: hidden !important;
}

/*
 * Dùng contain để ảnh luôn được tính theo chiều cao 544px.
 * Khi kéo màn hình rộng ra, nhân vật sẽ không tiếp tục phóng lớn.
 */
.nihao-hero-cover .wp-block-cover__image-background {
	display: block !important;
	width: 100% !important;
	height: 544px !important;
	object-fit: contain !important;
	object-position: calc(50% + 90px) center !important;
}

.nihao-hero-inner,
.nihao-hero-content {
	height: 544px !important;
	min-height: 544px !important;
	max-height: 544px !important;
}

.nihao-content-width {
	width: 600px !important;
	max-width: 54% !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.nihao-hero-title {
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 46px !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.5px;
}

.nihao-hero-description {
	max-width: 540px;
	color: #222222 !important;
}

.nihao-hero-badges {
	flex-wrap: nowrap !important;
}

.nihao-hero-badges p {
	white-space: nowrap;
}

.nihao-hero-buttons {
	flex-wrap: nowrap !important;
}

.nihao-mobile-visual {
	display: none;
}

/* =========================
   TABLET VÀ MOBILE
   ========================= */

@media (max-width: 900px) {
	.nihao-hero-cover {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	/*
	 * Ẩn ảnh Cover trên mobile.
	 * Nếu không ẩn, ảnh sẽ trải qua cả phần chữ và bị crop rất lớn.
	 */
	.nihao-hero-cover .wp-block-cover__image-background {
		display: none !important;
	}

	.nihao-hero-cover .wp-block-cover__inner-container {
		width: 100% !important;
	}

	.nihao-hero-inner {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	/* Khối chữ trắng phía trên */
	.nihao-hero-content {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding: 34px 24px 32px !important;
		background: #ffffff !important;
		text-align: center;
	}

	.nihao-content-width {
		width: 100% !important;
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.nihao-hero-badges {
		justify-content: center !important;
		margin-bottom: 20px !important;
	}

	.nihao-hero-title {
		max-width: 560px;
		margin-left: auto !important;
		margin-right: auto !important;
		color: #111111 !important;
		font-size: 38px !important;
		line-height: 1.12 !important;
		text-align: center !important;
		text-decoration: none !important;
	}

	.nihao-hero-description {
		max-width: 540px;
		margin-left: auto !important;
		margin-right: auto !important;
		color: #444444 !important;
		text-align: center;
	}

	.nihao-hero-buttons {
		justify-content: center !important;
	}

	/*
	 * Vùng hình riêng phía dưới.
	 * 4771a có kích thước cố định theo chiều cao,
	 * không còn phụ thuộc chiều rộng màn hình.
	 */
	.nihao-mobile-visual {
		display: block !important;
		width: 100% !important;
		height: 360px !important;
		margin: 0 !important;
		background-color: #ffc94d !important;
		background-image:
			url("http://localhost:8100/wp-content/uploads/2026/08/4771a26a42b3b5035015d249626b5cfc867b8269.png"),
			url("http://localhost:8100/wp-content/uploads/2026/08/f937b60c69aec5126afc484ae198364a8080580d.png") !important;
		background-size:
			auto 500px,
			cover !important;
		background-position:
		calc(50% - 180px) center,
		center center !important;
		background-repeat:
			no-repeat,
			no-repeat !important;
	}
}

@media (min-width: 901px) {
	.nihao-hero-content {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-start !important;

		height: 544px !important;
		min-height: 544px !important;
		max-height: 544px !important;

		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {
	.nihao-hero-content {
		padding: 28px 20px 32px !important;
	}

	.nihao-hero-badges {
		flex-wrap: nowrap !important;
		gap: 5px !important;
	}

	.nihao-hero-badges p {
		padding: 5px 8px !important;
		font-size: 9px !important;
	}

	.nihao-hero-title {
		max-width: 320px;
		font-size: 27px !important;
		line-height: 1.15 !important;
	}

	.nihao-hero-description {
		max-width: 320px;
		font-size: 13px !important;
		line-height: 1.65 !important;
	}

	.nihao-hero-buttons {
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
	}

	.nihao-hero-buttons .wp-block-button {
		width: 176px !important;
	}

	.nihao-hero-buttons .wp-block-button__link {
		display: block;
		width: 100%;
		padding: 12px 10px !important;
		text-align: center;
		font-size: 13px;
	}

	.nihao-mobile-visual {
		display: block !important;
		width: 100% !important;
		height: 315px !important;

		background-image:
			url("http://localhost:8100/wp-content/uploads/2026/08/4771a26a42b3b5035015d249626b5cfc867b8269.png"),
			url("http://localhost:8100/wp-content/uploads/2026/08/f937b60c69aec5126afc484ae198364a8080580d.png") !important;

		background-size:
			auto 500px,
			cover !important;

		background-position:
			calc(50% - 225px) center,
			center center !important;

		background-repeat:
			no-repeat,
			no-repeat !important;
	}
}