.dc-hh-banner {
	--dc-hh-banner-placeholder: #e8edf3;
	--dc-hh-banner-transition: 650ms;
	--dc-hh-banner-entrance: 700ms;
	--dc-hh-banner-distance: 24px;
	--dc-hh-banner-ken-scale: 1.06;
	--dc-hh-banner-arrow-color: #fff;
	--dc-hh-banner-arrow-bg: rgba(0, 0, 0, .40);
	--dc-hh-banner-arrow-border: #fff;
	--dc-hh-banner-arrow-hover-border: #fff;
	--dc-hh-banner-arrow-border-width: 1.5;
	--dc-hh-banner-arrow-blur: 20.65px;
	--dc-hh-banner-arrow-hover-color: #fff;
	--dc-hh-banner-arrow-hover-bg: rgba(0, 0, 0, .55);
	--dc-hh-banner-dot: rgba(255, 255, 255, .55);
	--dc-hh-banner-dot-active: #fff;
	--dc-hh-banner-size-desktop: 43.6681%;
	--dc-hh-banner-size-tablet: 43.6681%;
	--dc-hh-banner-size-mobile: 68.9655%;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 2.29 / 1;
	background: var(--dc-hh-banner-placeholder);
	overflow: hidden;
	isolation: isolate;
}

/*
 * Intrinsic sizing fallback. The slider media layers are absolute, so they cannot
 * contribute height. This sizer keeps the banner measurable even if a responsive
 * Elementor rule/browser drops aspect-ratio at a breakpoint.
 */
.dc-hh-banner__sizer {
	display: block;
	width: 100%;
	height: 0;
	padding-top: var(--dc-hh-banner-size-desktop);
	pointer-events: none;
}

.dc-hh-banner--full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.dc-hh-banner__viewport,
.dc-hh-banner__track,
.dc-hh-banner__slide,
.dc-hh-banner__picture,
.dc-hh-banner__media-link,
.dc-hh-banner__image,
.dc-hh-banner__empty {
	width: 100%;
	height: 100%;
	min-width: 0;
	max-width: 100%;
}

.dc-hh-banner__viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.dc-hh-banner__track {
	position: absolute;
	inset: 0;
}

.dc-hh-banner__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dc-hh-banner-transition) ease, visibility 0s linear var(--dc-hh-banner-transition);
}

.dc-hh-banner__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.dc-hh-banner__picture,
.dc-hh-banner__media-link {
	display: block;
	position: absolute;
	inset: 0;
}

.dc-hh-banner__image {
	display: block;
	position: absolute;
	inset: 0;
	object-fit: cover;
	transform: scale(1);
	transition: transform var(--dc-hh-banner-transition) ease;
}

/* Elementor/Hello Elementor commonly applies .elementor img { height:auto; }.
 * This widget is a media-cover component, so the image must own the full slide box. */
.elementor .dc-hh-banner .dc-hh-banner__image,
.elementor-widget-dc_hoang_hung_banner_slider .dc-hh-banner .dc-hh-banner__image {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.dc-hh-banner__empty {
	display: block;
	background: var(--dc-hh-banner-placeholder);
}

/* Horizontal track mode. */
.dc-hh-banner--transition-slide .dc-hh-banner__track {
	display: flex;
	transform: translate3d(calc(var(--dc-hh-banner-index, 0) * -100%), 0, 0);
	transition: transform var(--dc-hh-banner-transition) cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}

.dc-hh-banner--transition-slide .dc-hh-banner__slide {
	position: relative;
	inset: auto;
	flex: 0 0 100%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

.dc-hh-banner--transition-slide .dc-hh-banner__slide[aria-hidden="true"] .dc-hh-banner__media-link {
	pointer-events: none;
}

.dc-hh-banner--transition-zoom .dc-hh-banner__slide {
	transform: scale(1.035);
	transition: opacity var(--dc-hh-banner-transition) ease, transform var(--dc-hh-banner-transition) ease, visibility 0s linear var(--dc-hh-banner-transition);
}

.dc-hh-banner--transition-zoom .dc-hh-banner__slide.is-active {
	transform: scale(1);
	transition-delay: 0s;
}

.dc-hh-banner--ken-burns .dc-hh-banner__slide.is-active .dc-hh-banner__image {
	animation: dc-hh-banner-ken-burns 7s ease-out both;
}

@keyframes dc-hh-banner-ken-burns {
	from { transform: scale(1); }
	to { transform: scale(var(--dc-hh-banner-ken-scale)); }
}

/* The Figma navigation is a 64×64 hexagon, not a circular button.
 * A clipped backdrop layer owns the blur; the icon and SVG outline stay sharp.
 * The real button remains a full keyboard/touch target and avoids clipping focus.
 * Scoped button backgrounds explicitly prevent Elementor Global Style bleed. */
.dc-hh-banner .dc-hh-banner__arrow,
.dc-hh-banner .dc-hh-banner__arrow:hover,
.dc-hh-banner .dc-hh-banner__arrow:focus,
.dc-hh-banner .dc-hh-banner__arrow:focus-visible,
.dc-hh-banner .dc-hh-banner__arrow:active {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--dc-hh-banner-arrow-color);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
	transform: translateY(-50%);
	cursor: pointer;
	touch-action: manipulation;
	transition: color 200ms ease, transform 200ms ease;
	--dc-hh-banner-arrow-current-bg: var(--dc-hh-banner-arrow-bg);
	--dc-hh-banner-arrow-current-border: var(--dc-hh-banner-arrow-border);
}

.dc-hh-banner .dc-hh-banner__arrow--prev { left: 68px; }
.dc-hh-banner .dc-hh-banner__arrow--next { right: 68px; }

.dc-hh-banner .dc-hh-banner__arrow::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--dc-hh-banner-arrow-current-bg);
	-webkit-backdrop-filter: blur(var(--dc-hh-banner-arrow-blur));
	backdrop-filter: blur(var(--dc-hh-banner-arrow-blur));
	clip-path: polygon(50% 0%, 93.30125% 25%, 93.30125% 75%, 50% 100%, 6.69875% 75%, 6.69875% 25%);
	transition: background-color 200ms ease;
}

.dc-hh-banner .dc-hh-banner__arrow .dc-hh-banner__hex-outline {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	fill: none;
	stroke: var(--dc-hh-banner-arrow-current-border);
	stroke-width: var(--dc-hh-banner-arrow-border-width);
	pointer-events: none;
	transition: stroke 200ms ease;
}

.dc-hh-banner .dc-hh-banner__arrow .dc-hh-banner__icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 28px;
	line-height: 1;
	flex: none;
	color: inherit;
	pointer-events: none;
}

.dc-hh-banner .dc-hh-banner__arrow .dc-hh-banner__icon svg,
.dc-hh-banner .dc-hh-banner__arrow .dc-hh-banner__icon i {
	display: block;
	width: 100%;
	height: 100%;
	font-size: inherit;
	line-height: 1;
	fill: currentColor;
	color: currentColor;
}

.dc-hh-banner .dc-hh-banner__arrow .dc-hh-banner__icon--custom i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dc-hh-banner .dc-hh-banner__arrow:not(:disabled):hover,
.dc-hh-banner .dc-hh-banner__arrow:not(:disabled):focus-visible {
	--dc-hh-banner-arrow-current-bg: var(--dc-hh-banner-arrow-hover-bg);
	--dc-hh-banner-arrow-current-border: var(--dc-hh-banner-arrow-hover-border);
	color: var(--dc-hh-banner-arrow-hover-color);
	transform: translateY(-50%) scale(1.04);
}

.dc-hh-banner .dc-hh-banner__arrow:focus-visible {
	outline: 2px solid var(--dc-hh-banner-arrow-hover-border);
	outline-offset: 3px;
}

.dc-hh-banner .dc-hh-banner__arrow:disabled {
	cursor: default;
	opacity: .5;
}

.dc-hh-banner__dots {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	max-width: calc(100% - 40px);
	transform: translateX(-50%);
}

.dc-hh-banner .dc-hh-banner__dot,
.dc-hh-banner .dc-hh-banner__dot:hover,
.dc-hh-banner .dc-hh-banner__dot:focus,
.dc-hh-banner .dc-hh-banner__dot:focus-visible,
.dc-hh-banner .dc-hh-banner__dot:active {
	inline-size: 9px;
	block-size: 9px;
	min-width: 9px;
	min-height: 9px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dc-hh-banner-dot);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: transform 180ms ease, background-color 180ms ease;
}

.dc-hh-banner .dc-hh-banner__dot.is-active,
.dc-hh-banner .dc-hh-banner__dot[aria-current="true"] {
	background: var(--dc-hh-banner-dot-active);
	transform: scale(1.25);
}

.dc-hh-banner .dc-hh-banner__dot:focus-visible {
	outline: 2px solid var(--dc-hh-banner-dot-active);
	outline-offset: 3px;
}

/* Entrance start state exists at first paint. */
.dc-hh-banner--motion {
	opacity: 0;
	transition: opacity var(--dc-hh-banner-entrance) ease, transform var(--dc-hh-banner-entrance) cubic-bezier(.22,.61,.36,1);
	animation: dc-hh-banner-failsafe .01s linear 2200ms forwards;
}

.dc-hh-banner--motion-fade-up { transform: translate3d(0, var(--dc-hh-banner-distance), 0); }
.dc-hh-banner--motion-zoom { transform: scale(.985); }
.dc-hh-banner--motion-fade { transform: none; }

.dc-hh-banner--motion.is-revealed,
.dc-hh-banner--motion.is-editor-visible {
	opacity: 1;
	transform: none;
	animation: none;
}

@keyframes dc-hh-banner-failsafe {
	to { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
	.dc-hh-banner { aspect-ratio: 2.29 / 1; }
	.dc-hh-banner__sizer { padding-top: var(--dc-hh-banner-size-tablet); }
	.dc-hh-banner .dc-hh-banner__arrow--prev { left: 32px; }
	.dc-hh-banner .dc-hh-banner__arrow--next { right: 32px; }
	.dc-hh-banner .dc-hh-banner__arrow,
	.dc-hh-banner .dc-hh-banner__arrow:hover,
	.dc-hh-banner .dc-hh-banner__arrow:focus,
	.dc-hh-banner .dc-hh-banner__arrow:focus-visible,
	.dc-hh-banner .dc-hh-banner__arrow:active {
		inline-size: 56px;
		block-size: 56px;
	}
}

@media (max-width: 767px) {
	.dc-hh-banner {
		aspect-ratio: 1.45 / 1;
		min-width: 0;
	}
	.dc-hh-banner__sizer { padding-top: var(--dc-hh-banner-size-mobile); }
	.dc-hh-banner__viewport,
	.dc-hh-banner__track,
	.dc-hh-banner__slide,
	.dc-hh-banner__picture,
	.dc-hh-banner__media-link {
		min-width: 0;
		min-height: 0;
	}
	.dc-hh-banner .dc-hh-banner__arrow--prev { left: 14px; }
	.dc-hh-banner .dc-hh-banner__arrow--next { right: 14px; }
	.dc-hh-banner .dc-hh-banner__arrow,
	.dc-hh-banner .dc-hh-banner__arrow:hover,
	.dc-hh-banner .dc-hh-banner__arrow:focus,
	.dc-hh-banner .dc-hh-banner__arrow:focus-visible,
	.dc-hh-banner .dc-hh-banner__arrow:active {
		inline-size: 48px;
		block-size: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dc-hh-banner,
	.dc-hh-banner *,
	.dc-hh-banner *::before,
	.dc-hh-banner *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.dc-hh-banner--motion { opacity: 1; transform: none; animation: none; }
}