/*
Theme Name: Hoa Hồng Nhỏ
Theme URI: https://hoahongnhocenter.com
Description: Child theme của Twenty Twenty-Five cho Trung tâm Can Thiệp Sớm và Ngôn Ngữ Trị Liệu Hoa Hồng Nhỏ — Hành Động Để Yêu Thương.
Author: Hoa Hồng Nhỏ
Template: twentytwentyfive
Version: 1.7.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoahongnho-child
Tags: block-theme, full-site-editing, education
*/

/* ==========================================================================
   1. Badge — khối bo tròn hữu cơ, không phải pill đều
   ========================================================================== */

/* Dùng px thay vì %, vì % trên khối thấp-rộng sẽ ra hình elip đều đặn.
   Mỗi biến thể lệch góc một kiểu để các badge không giống hệt nhau. */
.hhn-badge {
	display: inline-block;
	padding: 0.6rem 2.25rem;
	border-radius: 30px 42px 34px 38px / 38px 30px 40px 32px;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.hhn-badge--b { border-radius: 44px 26px 40px 30px / 28px 42px 26px 40px; }
.hhn-badge--c { border-radius: 24px 44px 28px 42px / 42px 26px 44px 28px; }
.hhn-badge--d { border-radius: 38px 30px 46px 24px / 32px 44px 28px 40px; }

/* ==========================================================================
   2. Hình dạng ảnh
   ========================================================================== */

.hhn-blob img {
	border-radius: 58% 42% 47% 53% / 45% 50% 50% 55%;
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.hhn-circle img {
	border-radius: 50%;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.hhn-rounded img {
	border-radius: 22px;
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Ảnh hero: blob + đường viền lệch phía sau (theo ref) */
.hhn-hero-frame {
	position: relative;
}

.hhn-hero-frame img {
	position: relative;
	z-index: 1;
	border-radius: 56% 44% 50% 50% / 48% 52% 48% 52%;
	aspect-ratio: 1 / 0.92;
	object-fit: cover;
	width: 100%;
}

.hhn-hero-frame::before {
	content: "";
	position: absolute;
	inset: 14px -16px -16px 14px;
	border: 3px solid #ffb27a;
	border-radius: 56% 44% 50% 50% / 48% 52% 48% 52%;
	z-index: 0;
	pointer-events: none;
}

/* ==========================================================================
   3. Ba bước Đặt Lịch Hẹn — blob màu, số nổi phía trên
   ========================================================================== */

.hhn-step {
	position: relative;
	margin-top: 34px;
}

.hhn-step__blob {
	position: relative;
	min-height: 200px;
	padding: 3rem 1.6rem 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Ba khối ba dáng khác nhau: vòm cao, khối vuông bo mềm, vòm nghiêng. */
.hhn-step--1 .hhn-step__blob {
	background: #29a3d9;
	border-radius: 50% 50% 44% 56% / 74% 70% 30% 26%;
}

.hhn-step--2 .hhn-step__blob {
	background: #e8883a;
	border-radius: 78px 96px 62px 88px;
}

.hhn-step--3 .hhn-step__blob {
	background: #a8c256;
	border-radius: 64% 36% 54% 46% / 60% 64% 36% 40%;
}

.hhn-step__num {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	z-index: 2;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.hhn-step--1 .hhn-step__num { background: #e8883a; }
.hhn-step--2 .hhn-step__num { background: #a8c256; }
.hhn-step--3 .hhn-step__num { background: #e8883a; }

/* ==========================================================================
   4. Dịch vụ — không dùng card, chữ căn giữa dưới ảnh (theo ref)
   ========================================================================== */

.hhn-service img {
	border-radius: 20px;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.hhn-service h3 {
	letter-spacing: 0.06em;
}

/* ==========================================================================
   5. Tin tức — ngày | thumb tròn | nội dung
   ========================================================================== */

.hhn-news {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.2rem 0;
	border-bottom: 1px solid #ececec;
}

.hhn-news:last-child {
	border-bottom: 0;
}

.hhn-news__date {
	flex: 0 0 auto;
	width: 68px;
	text-align: center;
	line-height: 1.15;
}

.hhn-news__date strong {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	color: #29a3d9;
}

.hhn-news__date span {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #666666;
}

.hhn-news__thumb {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
}

.hhn-news__body {
	flex: 1 1 auto;
	min-width: 0;
}

.hhn-news__body h4 {
	margin: 0.45rem 0 0.35rem;
	font-size: 1rem;
	line-height: 1.4;
	color: #1565c0;
}

.hhn-news__body p {
	margin: 0;
	font-size: 0.875rem;
	color: #666666;
	line-height: 1.6;
}

.hhn-tag {
	display: inline-block;
	padding: 0.18rem 0.8rem;
	border-radius: 5px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #e8883a;
	color: #ffffff;
}

.hhn-tag--kienthuc { background: #4caf50; }
.hhn-tag--workshop { background: #1565c0; }

/* ==========================================================================
   6. Trang trí
   ========================================================================== */

.hhn-deco {
	position: relative;
	overflow: hidden;
}

.hhn-deco::after {
	content: "";
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	right: -120px;
	top: -120px;
	pointer-events: none;
}

.hhn-wave {
	line-height: 0;
	margin-bottom: -1px;
}

.hhn-wave svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   7. Topbar & header
   ========================================================================== */

/* theme.json đặt mọi link màu đỏ #C8102E qua a:where(:not(.wp-element-button)).
   Trên topbar đỏ thì link biến mất, trên footer xanh thì chói mắt.
   Ép trắng ở hai vùng này — selector .hhn-x a thắng về độ ưu tiên. */
.hhn-topbar {
	font-size: 0.875rem;
}

.hhn-topbar,
.hhn-topbar p,
.hhn-topbar a {
	color: #ffffff;
}

.hhn-topbar a {
	text-decoration: none;
}

.hhn-topbar a:hover,
.hhn-topbar a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.hhn-footer,
.hhn-footer p,
.hhn-footer li {
	color: #ffffff;
}

/* Tiêu đề cột trong footer. Cần !important + độ ưu tiên (0,2,0) vì
   WordPress đã có .has-white-color{...!important} và quy tắc h1..h6 của
   theme.json cùng tranh chấp — selector này thắng cả hai. */
.hhn-footer :is(h1, h2, h3, h4, h5, h6),
.hhn-footer .wp-block-heading {
	color: #ffffff !important;
}

.hhn-topbar :is(p, a, span) {
	color: #ffffff !important;
}

.hhn-footer a {
	color: #ffffff;
	text-decoration: none;
}

.hhn-footer a:hover,
.hhn-footer a:focus {
	color: #ffffff;
	text-decoration: underline;
}

/* Menu dính khi cuộn.
   Phải đặt sticky lên chính <header>, không phải .hhn-nav bên trong:
   phần tử sticky chỉ dính được trong phạm vi thẻ cha, mà <header> cao
   đúng bằng nội dung nên .hhn-nav không có khoảng nào để dính. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* Từ 600px trở xuống WordPress đổi admin bar sang position:absolute — nó cuộn
   đi cùng trang. Nếu vẫn bù 46px thì header dính cách mép trên đúng 46px,
   để hở một dải nền nhìn xuyên qua. Chỉ người đang đăng nhập mới thấy. */
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

.hhn-nav {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Nút gọi nhanh — chỉ hiện trên mobile, nơi topbar đã bị ẩn. */
.hhn-call {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #c8102e;
	color: #ffffff !important;
	text-decoration: none;
}

.hhn-call:hover,
.hhn-call:focus {
	background: #a50d26;
	color: #ffffff !important;
}

.hhn-call svg {
	display: block;
}

@media (max-width: 781px) {
	.hhn-call {
		display: inline-flex;
	}
}

.wp-block-site-logo img {
	border-radius: 0;
}

/* ==========================================================================
   8. Banner đầu trang con
   ========================================================================== */

.hhn-banner img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   9. Blob Sứ Mệnh / Tầm Nhìn (trang Giới Thiệu)
   ========================================================================== */

.hhn-vision {
	padding: 3rem 2.5rem;
	color: #ffffff;
	text-align: center;
	height: 100%;
}

.hhn-vision--mission {
	background: #e8883a;
	border-radius: 38% 62% 56% 44% / 48% 38% 62% 52%;
}

.hhn-vision--vision {
	background: #a8c256;
	border-radius: 64% 36% 42% 58% / 36% 58% 42% 64%;
}

.hhn-vision__label {
	display: inline-block;
	padding: 0.45rem 1.9rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}

.hhn-vision--mission .hhn-vision__label { background: #a8c256; }
.hhn-vision--vision  .hhn-vision__label { background: #e8883a; }

.hhn-vision p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.85;
}

/* ==========================================================================
   10. Đội ngũ
   ========================================================================== */

.hhn-member {
	text-align: center;
}

.hhn-member__photo {
	width: 170px;
	height: 170px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #e8f5e9;
	border: 5px solid #ffffff;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
}

.hhn-member__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.6rem;
	font-weight: 700;
	color: #c8102e;
	background: #ffe5e8;
}

.hhn-member h3 {
	margin: 0 0 0.2rem;
	font-size: 1.1rem;
	color: #1565c0;
}

.hhn-member p {
	margin: 0;
	font-size: 0.9rem;
	color: #666666;
}

/* ==========================================================================
   11. Thẻ liên hệ
   ========================================================================== */

.hhn-contact {
	background: #ffffff;
	border-radius: 22px;
	padding: 2rem 1.75rem;
	height: 100%;
	text-align: center;
	box-shadow: 0 6px 26px rgba(0, 0, 0, 0.07);
}

.hhn-contact__icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #ffffff;
	background: #c8102e;
}

.hhn-contact:nth-child(2n) .hhn-contact__icon { background: #4caf50; }
.hhn-contact:nth-child(3n) .hhn-contact__icon { background: #1565c0; }

.hhn-contact h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.hhn-contact p,
.hhn-contact a {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #666666;
	word-break: break-word;
}

.hhn-contact a {
	color: #c8102e;
	font-weight: 600;
	text-decoration: none;
}

.hhn-contact a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 781px) {
	.hhn-hero-frame::before {
		inset: 10px -10px -10px 10px;
	}

	.hhn-step__blob {
		min-height: 170px;
		padding: 2.6rem 1.2rem 2rem;
	}

	.hhn-deco::after {
		width: 200px;
		height: 200px;
		right: -80px;
		top: -80px;
	}

	.hhn-news__thumb {
		width: 64px;
		height: 64px;
	}

	.hhn-news__date {
		width: 54px;
	}

	.hhn-news__date strong {
		font-size: 1.6rem;
	}

	.hhn-banner img {
		aspect-ratio: 16 / 9;
	}

	.hhn-vision {
		border-radius: 40px;
		padding: 2.25rem 1.6rem;
	}

	.hhn-member__photo {
		width: 140px;
		height: 140px;
	}
}

/* ==========================================================================
   13. Header trên mobile — chỉ logo + hamburger + nút Đặt Lịch Hẹn
   ========================================================================== */

@media (max-width: 781px) {
	/* Topbar chiếm 2 dòng trên màn hẹp, bỏ hẳn.
	   Hotline và email vẫn còn ở footer và trang Liên Hệ. */
	.hhn-topbar {
		display: none;
	}

	.hhn-nav {
		padding-top: 0.45rem;
		padding-bottom: 0.45rem;
	}
}

/* Dưới 600px là ngưỡng WordPress đổi menu sang hamburger. */
@media (max-width: 599px) {
	/* Ép một hàng ngang duy nhất, không cho xuống dòng. */
	.hhn-nav > .wp-block-group {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	.hhn-nav > .wp-block-group > .wp-block-group {
		flex-wrap: nowrap;
		gap: 0.6rem;
		min-width: 0;
	}

	/* Chỉ giữ logo, bỏ tên trung tâm cho đỡ chật. */
	.hhn-nav .wp-block-site-title {
		display: none;
	}

	.hhn-nav .wp-block-site-logo img {
		width: 44px !important;
		height: auto !important;
	}

	.hhn-nav .wp-block-navigation__responsive-container-open {
		padding: 0;
	}

	.hhn-nav .wp-block-buttons .wp-block-button__link {
		padding: 0.5rem 1.05rem;
		font-size: 0.8rem;
		white-space: nowrap;
	}
}


/* ==========================================================================
   Khối liên hệ nổi — hoàn toàn độc lập với header

   Markup do functions.php in ra ở hook wp_footer, không nằm trong template
   nào cả. Nhờ vậy nó có mặt trên mọi trang kể cả trang 404, trang tìm kiếm
   và những trang tạo về sau, mà sửa header cũng không ảnh hưởng.

   Desktop: panel dọc bám mép phải, đóng được, còn lại bong bóng để mở lại.
   Mobile:  thanh ngang bám đáy màn hình, luôn hiện.

   z-index: header sticky đang ở 100, nên khối này phải cao hơn — panel và
   thanh đáy dùng 200, bong bóng 201 để nổi trên panel khi cả hai cùng có.
   ========================================================================== */

.hhn-cw {
	position: fixed;
	top: 50%;
	right: 18px;
	z-index: 200;
	width: 234px;
	transform: translateY(-50%);
	padding: 12px;
	border-radius: 14px;
	background-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
}

.hhn-cw__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 2px 10px 6px;
}

/* theme.json tô mọi link màu đỏ qua a:where(:not(.wp-element-button)) — trên
   nền đỏ này phải ép lại, và độ ưu tiên (0,1,1) đủ để thắng :where (0,1,0). */
.hhn-cw__title {
	color: #fff;
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1.3;
}

.hhn-cw__close {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hhn-cw__close:hover,
.hhn-cw__close:focus-visible {
	background-color: rgba(255, 255, 255, 0.34);
}

.hhn-cw a.hhn-cw__item,
.hhn-cw a.hhn-cw__item:hover,
.hhn-cw a.hhn-cw__item:focus {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 9px 11px;
	border-radius: 10px;
	background-color: #fff;
	color: var(--wp--preset--color--text);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.hhn-cw a.hhn-cw__item:hover,
.hhn-cw a.hhn-cw__item:focus-visible {
	transform: translateX(-4px);
	background-color: var(--wp--preset--color--light-pink);
}

.hhn-cw__sub {
	display: block;
	color: var(--wp--preset--color--text-light);
	font-size: 0.74rem;
	font-weight: 500;
}

/* Vuông 30×30 nên 50% ra hình tròn đúng — bẫy elip chỉ xảy ra với khối
   thấp-rộng như badge, ở đây dùng % được. */
.hhn-cw__ico {
	display: grid;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	place-items: center;
	color: #fff;
}

.hhn-cw__ico svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.hhn-cw-bubble {
	display: none;
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 201;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: #fff;
	cursor: pointer;
	place-items: center;
	box-shadow: 0 8px 24px rgba(200, 16, 46, 0.42);
	transition: transform 0.15s ease;
}

.hhn-cw-bubble svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.hhn-cw-bubble:hover {
	transform: scale(1.06);
}

.hhn-cw-is-closed .hhn-cw {
	display: none;
}

.hhn-cw-is-closed .hhn-cw-bubble {
	display: grid;
}

/* Thanh đáy cho mobile — mặc định tắt, chỉ bật ở breakpoint bên dưới. */
.hhn-cwbar {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	border-top: 1px solid #ececec;
	background-color: #fff;
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.1);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hhn-cwbar a,
.hhn-cwbar a:hover,
.hhn-cwbar a:focus {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 4px 9px;
	border-left: 1px solid #f1f1f1;
	color: var(--wp--preset--color--text);
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.hhn-cwbar a:first-child {
	border-left: 0;
}

.hhn-cwbar a:active {
	background-color: var(--wp--preset--color--light-pink);
}

/* Màu đặt inline lên span này, còn chữ nhãn giữ màu text mặc định — svg
   dùng fill: currentColor nên thừa hưởng đúng màu của span bọc ngoài. */
.hhn-cwbar__ico {
	display: flex;
}

.hhn-cwbar svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
}

@media (max-width: 781px) {
	.hhn-cw,
	.hhn-cw-bubble,
	.hhn-cw-is-closed .hhn-cw-bubble {
		display: none;
	}

	.hhn-cwbar {
		display: grid;
	}

	/* Chừa chỗ cho thanh đáy bằng cách nới chính padding của footer, không
	   nới body — nới body thì dải dưới footer hở ra nền trang, sai màu.
	   Footer đặt padding bằng style inline nên phải !important mới thắng. */
	.hhn-footer {
		padding-bottom: calc(var(--wp--preset--spacing--40) + 64px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hhn-cw a.hhn-cw__item,
	.hhn-cw-bubble,
	.hhn-cw__close {
		transition: none;
	}

	.hhn-cw a.hhn-cw__item:hover,
	.hhn-cw a.hhn-cw__item:focus-visible,
	.hhn-cw-bubble:hover {
		transform: none;
	}
}

@media print {
	.hhn-cw,
	.hhn-cw-bubble,
	.hhn-cwbar {
		display: none !important;
	}
}