/* ==========================================================================
   Hope Kids - base styles dùng chung cho mọi widget
   Token màu lấy theo Figma. Có thể override trong Elementor > Site Settings >
   Custom CSS, ví dụ: :root { --hk-orange: #F69B0F; }
   ========================================================================== */

:root {
	--hk-brown: #66320E;
	--hk-brown-2: #894E25;
	--hk-orange: #F69B0F;
	--hk-amber: #FFC001;
	--hk-gold: #F1AF15;
	--hk-yellow: #FDDD51;
	--hk-yellow-2: #FDC223;
	--hk-cream: #FFF8E6;
	--hk-cream-2: #FFF2C9;
	--hk-cream-3: #FFFDF7;
	--hk-beige: #F7EEDE;
	--hk-beige-2: #F5EEE0;
	--hk-ink: #1E1E1E;
	--hk-text: #4A4540;
	--hk-muted: #746E66;
	--hk-gray: #A8A8A8;
	--hk-lime: #B5F02E;
	--hk-cyan: #55D1ED;
	--hk-red: #EC5739;
	--hk-pink-soft: #FCE1E8;
	--hk-blue-soft: #DCF5FA;
	--hk-green-soft: #E5F4D4;
	--hk-white: #FFFFFF;

	--hk-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hk-font-alt: "Manrope", var(--hk-font);
	--hk-font-serif: "IBM Plex Serif", Georgia, serif;

	--hk-radius-sm: 12px;
	--hk-radius: 24px;
	--hk-radius-lg: 32px;
	--hk-radius-xl: 50px;

	--hk-ease: cubic-bezier(.22, .61, .36, 1);
}

[class*="elementor-widget-hk-"] {
	font-family: var(--hk-font);
}

[class*="elementor-widget-hk-"] *,
[class*="elementor-widget-hk-"] *::before,
[class*="elementor-widget-hk-"] *::after {
	box-sizing: border-box;
}

[class*="elementor-widget-hk-"] img {
	max-width: 100%;
	height: auto;
}

.hk-icon {
	width: 1em;
	height: 1em;
	display: block;
	flex: none;
}

/* Chữ nhấn trong heading: *chữ* */
.hk-hl {
	color: var(--hk-gold);
}

.hk-serif {
	font-family: var(--hk-font-serif);
	font-style: italic;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Nút pill có vòng tròn mũi tên (component "Đặt lịch tư vấn")
   ------------------------------------------------------------------------ */
.hk-btn {
	--hk-btn-fill: var(--hk-btn-icon-bg);
	--hk-btn-color: var(--hk-brown);
	--hk-btn-bg: var(--hk-white);
	--hk-btn-border: var(--hk-yellow);
	--hk-btn-icon-bg: var(--hk-yellow);
	--hk-btn-icon-color: var(--hk-brown);
	--hk-btn-h: 48px;
	--hk-btn-icon: 39px;

	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	min-height: var(--hk-btn-h);
	padding: 4px 4px 4px 20px;
	border: 1px solid var(--hk-btn-border);
	border-radius: 999px;
	background: var(--hk-btn-bg);
	color: var(--hk-btn-color);
	font-family: var(--hk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: background-color .25s var(--hk-ease), color .25s var(--hk-ease), box-shadow .25s var(--hk-ease);
}

/* Lớp nền vàng: bắt đầu bằng đúng vòng tròn icon, hover thì nở ra phủ cả nút. */
.hk-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--hk-btn-inset, 4px);
	z-index: -1;
	width: var(--hk-btn-icon);
	height: var(--hk-btn-icon);
	border-radius: 999px;
	background: var(--hk-btn-fill);
	transform: translateY(-50%);
	transition: width .35s cubic-bezier(.65, 0, .35, 1);
}

.hk-btn:hover::before,
.hk-btn:focus-visible::before {
	width: calc(100% - var(--hk-btn-inset, 4px) * 2);
}

.hk-btn:hover,
.hk-btn:focus-visible {
	color: var(--hk-btn-color);
	box-shadow: 0 6px 18px rgba(246, 155, 15, .25);
}

.hk-btn:focus-visible {
	outline: 2px solid var(--hk-orange);
	outline-offset: 3px;
}

.hk-btn__text {
	white-space: nowrap;
}

.hk-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--hk-btn-icon);
	height: var(--hk-btn-icon);
	border-radius: 50%;
	background: var(--hk-btn-icon-bg);
	color: var(--hk-btn-icon-color);
	font-size: calc(var(--hk-btn-icon) * .72);
	transition: transform .35s var(--hk-ease), background-color .25s var(--hk-ease);
}

.hk-btn__text {
	position: relative;
}

.hk-btn:hover .hk-btn__icon,
.hk-btn:focus-visible .hk-btn__icon {
	transform: rotate(45deg);
}

.hk-btn--yellow {
	--hk-btn-bg: var(--hk-yellow);
	--hk-btn-icon-bg: var(--hk-white);
}

.hk-btn--orange {
	--hk-btn-bg: var(--hk-orange);
	--hk-btn-border: var(--hk-orange);
	--hk-btn-color: var(--hk-white);
	--hk-btn-icon-bg: var(--hk-white);
}

.hk-btn--orange {
	--hk-btn-fill: var(--hk-yellow);
}

.hk-btn--orange:hover {
	--hk-btn-color: var(--hk-brown);
}

.hk-btn--outline {
	--hk-btn-border: var(--hk-brown-2);
	--hk-btn-h: 53px;
	--hk-btn-icon: 43px;
	--hk-btn-inset: 3px;

	position: relative;
	justify-content: center;
	width: 100%;
	padding-right: calc(var(--hk-btn-icon) + 10px);
	padding-left: calc(var(--hk-btn-icon) + 10px);
	border-width: 2px;
	font-size: 22px;
}

.hk-btn--outline .hk-btn__icon {
	position: absolute;
	top: 50%;
	right: 3px;
	margin-top: calc(var(--hk-btn-icon) / -2);
}

.hk-btn--outline:hover .hk-btn__icon {
	transform: rotate(45deg);
}

button.hk-btn {
	appearance: none;
	-webkit-appearance: none;
}

/* Blocksy tự style mọi [type=submit] (nền, viền, màu hover xanh + lớp ::before đổ bóng mờ).
   Đặt lại để nút HK dạng <button type="submit"> luôn theo thiết kế. */
.hk-btn[type="submit"],
.hk-btn[type="submit"]:hover,
.hk-btn[type="submit"]:focus-visible {
	min-height: var(--hk-btn-h);
	border-color: var(--hk-btn-border);
	background-color: var(--hk-btn-bg);
	color: var(--hk-btn-color);
	transform: none;
}

.hk-btn[type="submit"]::before,
.hk-btn[type="submit"]:hover::before {
	display: block;
	inset: auto;
	top: 50%;
	right: var(--hk-btn-inset, 4px);
	height: var(--hk-btn-icon);
	opacity: 1;
	filter: none;
	border-radius: 999px;
	background: var(--hk-btn-fill);
	transform: translateY(-50%);
}

.hk-btn[type="submit"]:hover::before,
.hk-btn[type="submit"]:focus-visible::before {
	width: calc(100% - var(--hk-btn-inset, 4px) * 2);
}

button.hk-btn[disabled] {
	opacity: .6;
	cursor: progress;
}

/* ---------------------------------------------------------------------------
   Nút điều hướng slider
   ------------------------------------------------------------------------ */
.hk-nav {
	--hk-nav-size: 40px;
	--hk-nav-color: var(--hk-brown);
	--hk-nav-bg: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hk-nav-size);
	height: var(--hk-nav-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hk-nav-bg);
	color: var(--hk-nav-color);
	font-size: calc(var(--hk-nav-size) * .6);
	line-height: 1;
	cursor: pointer;
	transition: transform .2s var(--hk-ease), background-color .2s var(--hk-ease), opacity .2s;
}

.hk-nav:hover {
	background: var(--hk-nav-bg);
	color: var(--hk-nav-color);
	transform: scale(1.08);
}

.hk-nav:focus-visible {
	outline: 2px solid var(--hk-orange);
	outline-offset: 2px;
}

.hk-nav.swiper-button-disabled,
.hk-nav[disabled] {
	opacity: .35;
	cursor: default;
	transform: none;
}

.hk-nav--filled {
	--hk-nav-bg: var(--hk-yellow);
	--hk-nav-size: 30px;
}

/* ---------------------------------------------------------------------------
   Nhân vật / hình động (Lottie + poster SVG)
   ------------------------------------------------------------------------ */
.hk-anim {
	--hk-anim-w: 84px;

	position: relative;
	display: inline-block;
	width: var(--hk-anim-w);
	aspect-ratio: 1;
	flex: none;
	line-height: 0;
	vertical-align: middle;
}

.hk-anim--lime,
.hk-anim--cyan {
	aspect-ratio: 100 / 96;
}

.hk-anim__poster,
.hk-anim > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hk-lottie > svg {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

.hk-lottie.is-loaded .hk-anim__poster {
	opacity: 0;
}

/* Hoa hướng dương (Figma: Sunflower / Infinite Rotation): xoay 120° mỗi 1.5s và "thở" phình to */
.hk-anim--spin .hk-anim__poster {
	animation: hk-sunflower 4.5s linear infinite;
}

/* Nhân vật chèn giữa dòng heading */
.hk-inline-icon {
	--hk-anim-w: 1.5em;

	margin: -.2em .12em 0;
}

@keyframes hk-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes hk-sunflower {
	0% { transform: rotate(0deg) scale(1); }
	33.33% { transform: rotate(120deg) scale(1.2); }
	66.66% { transform: rotate(240deg) scale(1.2); }
	100% { transform: rotate(360deg) scale(1); }
}

/* ---------------------------------------------------------------------------
   Badge danh mục
   ------------------------------------------------------------------------ */
.hk-badge {
	--hk-badge-bg: var(--hk-yellow);

	display: inline-flex;
	align-items: center;
	padding: 3px 13px;
	border-radius: 55px;
	background: var(--hk-badge-bg);
	color: rgba(0, 0, 0, .5);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

a.hk-badge:hover {
	color: rgba(0, 0, 0, .75);
}

.hk-badge--yellow { --hk-badge-bg: var(--hk-yellow); }
.hk-badge--orange { --hk-badge-bg: var(--hk-orange); }
.hk-badge--cyan { --hk-badge-bg: var(--hk-cyan); }
.hk-badge--lime { --hk-badge-bg: var(--hk-lime); }
.hk-badge--pink { --hk-badge-bg: #F1B7C6; }
.hk-badge--cream { --hk-badge-bg: var(--hk-cream-2); }

/* ---------------------------------------------------------------------------
   Tiện ích
   ------------------------------------------------------------------------ */
.hk-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hk-richtext > :first-child {
	margin-top: 0;
}

.hk-richtext > :last-child {
	margin-bottom: 0;
}

.hk-richtext p {
	margin: 0 0 1em;
}

.hk-richtext a {
	color: var(--hk-orange);
}

@media (prefers-reduced-motion: reduce) {
	.hk-anim--spin .hk-anim__poster,
	.hk-btn,
	.hk-btn__icon,
	.hk-nav {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Hiệu ứng xuất hiện khi cuộn (Figma: các variant Hide -> Default)
   html.hk-motion được gắn trong <head>; hk-base.js thêm .is-revealed khi phần tử vào màn hình.
     data-hk-reveal="up"     : mờ -> rõ + trượt lên (--hk-reveal-y)
     data-hk-reveal="lines"  : từng dòng tiêu đề trượt lên từ mask (.hk-line)
     data-hk-reveal="stagger": các con trực tiếp lần lượt trượt lên
     data-hk-reveal="draw"   : vẽ nét SVG
   ------------------------------------------------------------------------ */
[data-hk-reveal] {
	--hk-reveal-y: 48px;
	--hk-reveal-dur: .7s;
	--hk-reveal-delay: 0s;
	--hk-reveal-ease: cubic-bezier(.45, .05, .25, 1);
}

.hk-motion [data-hk-reveal="up"] {
	transition: opacity var(--hk-reveal-dur) var(--hk-reveal-ease) var(--hk-reveal-delay), transform var(--hk-reveal-dur) var(--hk-reveal-ease) var(--hk-reveal-delay);
}

.hk-motion [data-hk-reveal="up"]:not(.is-revealed) {
	opacity: 0;
	transform: translate3d(0, var(--hk-reveal-y), 0);
}

.hk-line {
	display: block;
	overflow: hidden;
	margin: -.14em 0;
	padding: .14em 0;
}

.hk-line__inner {
	display: block;
}

.hk-motion [data-hk-reveal="lines"] .hk-line__inner {
	transition: transform .76s cubic-bezier(.65, 0, .2, 1) calc(var(--hk-reveal-delay) + var(--hk-line-i, 0) * .1s), opacity .5s ease calc(var(--hk-reveal-delay) + var(--hk-line-i, 0) * .1s);
}

.hk-motion [data-hk-reveal="lines"]:not(.is-revealed) .hk-line__inner {
	opacity: 0;
	transform: translate3d(0, 105%, 0);
}

.hk-motion [data-hk-reveal="stagger"] > * {
	transition: opacity var(--hk-reveal-dur) var(--hk-reveal-ease), transform var(--hk-reveal-dur) var(--hk-reveal-ease);
	transition-delay: calc(var(--hk-reveal-delay) + var(--hk-stagger-i, 0) * .09s);
}

.hk-motion [data-hk-reveal="stagger"]:not(.is-revealed) > * {
	opacity: 0;
	transform: translate3d(0, var(--hk-reveal-y), 0);
}

.hk-motion [data-hk-reveal="draw"] path {
	stroke-dasharray: 1;
	transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .25, 1) var(--hk-reveal-delay);
}

.hk-motion [data-hk-reveal="draw"]:not(.is-revealed) path {
	stroke-dashoffset: 1;
}

/* clip-path đặt trên phần tử con: IntersectionObserver vẫn nhìn thấy phần tử được theo dõi */
.hk-motion [data-hk-reveal="wipe"] > * {
	transition: clip-path 2.2s cubic-bezier(.45, .05, .25, 1) var(--hk-reveal-delay);
}

.hk-motion [data-hk-reveal="wipe"]:not(.is-revealed) > * {
	clip-path: inset(0 100% 0 0);
}

/* Trong Elementor editor luôn hiện đầy đủ */
.elementor-editor-active [data-hk-reveal] *,
.elementor-editor-active [data-hk-reveal] {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	stroke-dashoffset: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-hk-reveal],
	[data-hk-reveal] *,
	.hk-btn::before {
		transition: none !important;
	}
}