@charset "UTF-8";
/* ==========================================================================
   HIMPEL — Custom CSS (child theme: anbao)

   PHẠM VI: chỉ CSS phục vụ bộ điều khiển slider —
            progress bar, navigation (arrow), pagination, nút play/pause.
            Mọi CSS về bố cục / nền / chữ / thẻ đã được gỡ bỏ theo yêu cầu.

   01. Main visual slider  -> .elementor-element-9d84334 / -39a5f1b
   02. Thanh điều khiển dùng chung .hp-nav  +  best products (-3ecff10)
   03. News slider         -> .elementor-element-d19c5d1 / -fbfad83
   ========================================================================== */

:root {
	/* icon lấy nguyên từ trang mẫu (nhúng base64, không phụ thuộc CDN) */
	--hpv-arrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAASCAYAAACNdSR1AAAAn0lEQVQokZWSyw2CQBRFD1RgIS4c1iaurEMjsV4bsAIjxgo8LhwSMvAAX3J35868z61UFmoDvAHqBbAB7kALgBqpUTt/9VFPa0DVp5oi8FWAO3XURgiW8GEOHMLXPEQI9vB5DahSA+VVqqxxZVdbvN6paaqNXvtityND2VeaM0wdJeUhh4YmgkNDlLobcAS6QUy3c6nrf3ioF5XKP8L/BU9i7GZE6F9LAAAAAElFTkSuQmCC");
	--hpv-pause: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAALUlEQVR42mL8DwQMuAEjDnGcepgYqAxGDRw1cNTAUQNHDRw1cNTAwWMgQIABAJ+/BTCapIQ2AAAAAElFTkSuQmCC");
	--hpv-play: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAAjUlEQVQokZWSMQoCQRAEa1c536H5IfgO/YxwkfgrfYqBa+AXxOQiKQM5FNS93YLJpoKenqACtMAEOAM9OdTgm5u6VRuVX4Ma/Sapmxph4KguagTVXt2rM5WgRuCRDfriAqxqBIA2Fi4CJOBammE3ZBgTDuq85EpJXfunh8+m72pnpukpILAEGuDEyC89ATFvYYtDzt6aAAAAAElFTkSuQmCC");
	--hpv-play-mo: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAbCAYAAAB4Kn/lAAABUElEQVRIibXWsUtVYRjH8Y+3i4NjCdIuLU26CEIgtAjNgYODtSQIguFfEK5Bbf0HQWuTS02KIiKCSBhEQxAELmZDEP4azr0ml9R77nn9weGFcx6+fN/nPPC+Q0lgBA9xgi381jRJRpIc5l9+JFlJ0k5i0EeSJ/l/DpLMDApuYeKSzdzHR7zF3bqdaOHONTVzOOistcD95LbK/B1GS4K7eayyf1QaDGN4jzeqMS0GhiE8wx6mSoK7uYcNvNRj3xQMt/Ac+5gpCe5mHB/wGu12QTBV75cxXNL4YhZuCvzlJsCneFoavIlJbJcCn6p+2gN8hhJTsY5FfL34sonxrw5wthfK4MY7mMfRZQV1jf/gBaavglLP+BMWsN1PcQs/r6k5wyudMerXoo1vV3zfxVId4HmSTCQ56zn6j5MsJmk1uVdIsprke5KjJGtJRptcVpL4C0xMRq435xpIAAAAAElFTkSuQmCC");
	--hp-arrow-dark: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAASCAYAAACNdSR1AAAAt0lEQVQokYXSMW7CQBBG4c8WBwg5RCoqDhBRkHukIFeKZCQKyDFAVOmNqHODyCR9CijslZzFu95y9N6/M6Mp3qsPI2+KHyhHwDm+sILJCHjoktf4SyX3QbjgPJQcgw2WOMXJSZD/Ay5yYB9+wzEHBvgVFYocGOBrVCsk9l9i27URpEfstcPewbDBs3afSaH/3WfXa1KIe6s7oRkShgap8TIkpG4jFh4wy51oEL6129rlTjQIT/iFG+mML+naHLmSAAAAAElFTkSuQmCC");

	--hpv-reveal: 1600ms;
}

body .elementor-element-39a5f1b .elementor-image-carousel-wrapper.swiper {
	position: relative;
}

body .elementor-element-39a5f1b .elementor-image-carousel-wrapper > .swiper-pagination,
body .elementor-element-39a5f1b .elementor-image-carousel-wrapper ~ .swiper-pagination {
	display: none !important;
}

.hpv-controls {
	display: block;
	left: 50%;
	margin-top: 0;
	overflow: hidden;
	position: absolute;
	top: calc(50% + 410px);
	transform: translate(-50%, -50%);
	width: auto;
	z-index: 10;
}

.hpv-controls {
	top: min(calc(50% + 410px), calc(100% - 40px));
}

.hpv-controls-inner {
	align-items: center;
	box-sizing: content-box;
	display: flex;
	flex-wrap: nowrap;
	height: 30px;
	justify-content: center;
	opacity: 0;
	padding: 15px 0;
	position: relative;
	transform: translateY(100px);
	width: 370px;
}

.hpv-controls.is-revealed .hpv-controls-inner {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--hpv-reveal) ease, transform var(--hpv-reveal) ease;
}

.hpv-pagination {
	bottom: auto;
	position: relative;
	text-align: center;
	top: auto;
	width: 100%;
}

.hpv-pagination span {
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.hpv-pagination .hpv-current {
	left: 0;
}

.hpv-pagination .hpv-total {
	right: 89px;
}

.hpv-progress {
	background-color: hsla(0, 0%, 100%, 0.5);
	height: 3px;
	left: 36px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 210px;
	z-index: 10;
}

.hpv-progress .hpv-progress-bar {
	background-color: #fff;
	display: block;
	height: 100%;
	width: 0;
}

.hpv-controls-inner button,
.hpv-controls-inner button:hover,
.hpv-controls-inner button:focus,
.hpv-controls-inner button:focus-visible,
.hpv-controls-inner button:active {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
	filter: none;
	opacity: 1;
	text-decoration: none;
}

.hpv-controls-inner button:focus {
	outline: none;
}

.hpv-controls-inner button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 5px;
}

.hpv-prev,
.hpv-next {
	background-color: transparent;
	background-image: var(--hpv-arrow);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 18px;
	left: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-indent: -9999px;
	top: auto;
	white-space: nowrap;
	width: 11px;
}

.hpv-prev {
	right: 58px;
}

.hpv-next {
	right: 0;
	transform: rotate(-180deg);
}

.hpv-playpause {
	background-color: transparent;
	background-image: var(--hpv-pause);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 13px;
	left: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 31px;
	text-indent: -9999px;
	white-space: nowrap;
	width: 8px;
}

.hpv-playpause.is-play {
	background-image: var(--hpv-play);
	height: 13px;
	right: 28px;
	width: 12px;
}

@media screen and (max-width: 1210px) {
	.hpv-controls {
		bottom: 4.33vw;
		max-width: 92vw;
		top: auto;
	}

	.hpv-controls-inner {
		width: 32.17vw;
	}

	.hpv-pagination span {
		font-size: 2.17vw;
		font-weight: 600;
	}

	.hpv-pagination .hpv-total {
		right: 5.67vw;
	}

	.hpv-progress {
		height: 0.5vw;
		left: 4.58vw;
		width: 17.5vw;
	}

	.hpv-playpause {
		height: 2.17vw;
		right: 0;
		width: 1.67vw;
	}

	.hpv-playpause.is-play {
		background-image: var(--hpv-play-mo);
		height: 2.25vw;
		right: 0;
		width: 1.83vw;
	}

	.hpv-prev,
	.hpv-next {
		display: none;
	}
}

@media screen and (max-width: 750px) {
	.hpv-controls {
		bottom: 6.33vw;
		max-width: 90.4vw;
		top: auto;
	}

	.hpv-controls-inner {
		width: 51.47vw;
	}

	.hpv-pagination span {
		font-size: 3.47vw;
	}

	.hpv-pagination .hpv-total {
		right: 9.07vw;
	}

	.hpv-progress {
		height: 0.8vw;
		left: 7.33vw;
		width: 28vw;
	}

	.hpv-playpause {
		height: 3.47vw;
		right: 0;
		width: 2.67vw;
	}

	.hpv-playpause.is-play {
		height: 3.6vw;
		width: 2.93vw;
	}
}

.hp-nav {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	height: fit-content;
	justify-content: center;
	margin-top: 40px;
	width: 100%;
	z-index: 10;
}

.hp-nav__inner {
	align-items: center;
	box-sizing: content-box;
	display: flex;
	flex-wrap: nowrap;
	height: 30px;
	justify-content: center;
	position: relative;
	width: 244px;
}

.hp-nav__pagination {
	bottom: auto;
	position: relative;
	text-align: center;
	top: auto;
	width: 100%;
}

.hp-nav__pagination span {
	color: #9699a3;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.hp-nav__current {
	left: 0;
}

.hp-nav__total {
	right: 62px;
}

.hp-nav__progress {
	background-color: #eaebed;
	height: 3px;
	left: 36px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 110px;
	z-index: 10;
}

.hp-nav__bar {
	background-color: #9699a3;
	display: block;
	height: 100%;
	width: 0;
}

.hp-nav__prev,
.hp-nav__next {
	background-color: transparent;
	background-image: var(--hp-arrow-dark);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 18px;
	left: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-indent: -9999px;
	top: auto;
	white-space: nowrap;
	width: 11px;
}

.hp-nav__prev {
	right: 32px;
}

.hp-nav__next {
	right: 0;
	transform: rotate(-180deg);
}

.hp-nav__inner button,
.hp-nav__inner button:hover,
.hp-nav__inner button:focus,
.hp-nav__inner button:focus-visible,
.hp-nav__inner button:active {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
	filter: none;
	opacity: 1;
	text-decoration: none;
}

.hp-nav__inner button:focus {
	outline: none;
}

.hp-nav__inner button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

.hp-nav--light .hp-nav__pagination span {
	color: #fff;
}

.hp-nav--light .hp-nav__progress {
	background-color: hsla(0, 0%, 100%, 0.5);
}

.hp-nav--light .hp-nav__bar {
	background-color: #fff;
}

.hp-nav--light .hp-nav__prev,
.hp-nav--light .hp-nav__next {
	background-image: var(--hpv-arrow);
}

@media screen and (max-width: 1210px) {
	.hp-nav__inner {
		width: 28.67vw;
	}

	.hp-nav__pagination span {
		font-size: 2.17vw;
		font-weight: 600;
	}

	.hp-nav__total {
		right: 8.83vw;
	}

	.hp-nav__progress {
		height: 0.5vw;
		left: 4.5vw;
		width: 10.83vw;
	}

	.hp-nav__prev {
		right: 4.33vw;
	}

	.hp-nav__prev,
	.hp-nav__next {
		height: 2.17vw;
		width: 1.33vw;
	}
}

@media screen and (max-width: 750px) {
	.hp-nav__inner {
		width: 45.87vw;
	}

	.hp-nav__pagination span {
		font-size: 3.47vw;
	}

	.hp-nav__total {
		right: 14.13vw;
	}

	.hp-nav__progress {
		height: 0.8vw;
		left: 7.2vw;
		width: 17.33vw;
	}

	.hp-nav__prev {
		right: 6.93vw;
	}

	.hp-nav__prev,
	.hp-nav__next {
		height: 3.47vw;
		width: 2.13vw;
	}
}

body .elementor-2 .elementor-element.elementor-element-3ecff10 .swiper.elementor-loop-container {
	display: block;
	position: relative;
}

body .elementor-element-3ecff10 .swiper.elementor-loop-container > .swiper-wrapper {
	margin: 58px 0 0;
}

body .elementor-element-3ecff10 .elementor-swiper-button,
body .elementor-element-3ecff10 .swiper-pagination {
	display: none !important;
}

@media screen and (max-width: 1210px) {
	body .elementor-element-3ecff10 .swiper.elementor-loop-container > .swiper-wrapper {
		margin: 5.33vw 0 0;
	}

	.hp-nav {
		margin-top: 5.33vw;
	}
}

@media screen and (max-width: 750px) {
	body .elementor-element-3ecff10 .swiper.elementor-loop-container > .swiper-wrapper {
		margin: 10.67vw 0 0;
	}

	.hp-nav {
		margin-top: 10.67vw;
	}
}

body .elementor-2 .elementor-element.elementor-element-0bd23b7 {
	position: relative;
}

body .elementor-2 .elementor-element.elementor-element-0bd23b7 > .hp-nav {
	bottom: 0;
	justify-content: flex-start;
	left: 0;
	position: absolute;
	top: auto;
	width: 100%;
}

body .elementor-element-fbfad83 .elementor-swiper-button,
body .elementor-element-fbfad83 .swiper-pagination {
	display: none !important;
}

@media screen and (max-width: 1210px) {
	body .elementor-2 .elementor-element.elementor-element-0bd23b7 > .hp-nav {
		justify-content: center;
		margin: 5.83vw 0 0;
		position: relative;
	}
}

@media screen and (max-width: 750px) {
	body .elementor-2 .elementor-element.elementor-element-0bd23b7 > .hp-nav {
		margin: 9.33vw 0 0;
	}
}


/* ==========================================================================
   04. HOME — PRODUCT VIDEO GUIDES (chỉ phần điều khiển)
   --------------------------------------------------------------------------
   Trang mẫu : .main_how_to_use.main_box  ->  .how_to_use_swiper
   Trang đích : .elementor-element-cfa9e42  (Elementor Pro Loop Carousel)

   PHẠM VI: chỉ progress bar + navigation + pagination + nhịp chạy.

   Thông số gốc đo được từ trang mẫu (vp 1600x1000):
     - swiper      : slidesPerView "auto", spaceBetween 0, speed 1000,
                     autoplay 3000, loop, centeredSlides true,
                     KHÔNG có nút play/pause
     - thanh       : .swiper_button_wrap là con ĐẦU TIÊN của .swiper,
                     nằm TRÊN hàng slide, margin 36px 0 40px, canh giữa
     - .swiper_button : 244 x 30  -> đúng hình học generic .hp-nav (mục 2.0)
     - màu         : chữ #9699a3, track #eaebed, fill #9699a3,
                     mũi tên slide_arrow_icon02 (tối)
                     -> ĐÚNG biến thể mặc định của .hp-nav, không cần modifier
     - <= 1210px   : margin 5vw 0 5.5vw
     - <=  750px   : margin 10.13vw 0 11.2vw
     - <= 1 slide  : ẩn thanh (.swiper_button_wrap.hidden .swiper_button)
   ========================================================================== */

/* Modifier dùng chung: ẩn thanh khi slider chỉ có 1 slide. */
.hp-nav.is-hidden .hp-nav__inner {
	display: none;
}

/* .elementor-grid đặt display:grid -> ô grid nở theo .swiper-wrapper khiến
   thanh điều khiển rộng bằng cả dải slide (xem mục 2.2). */
body .elementor-2 .elementor-element.elementor-element-cfa9e42 .swiper.elementor-loop-container {
	display: block;
	position: relative;
}

body .elementor-element-cfa9e42 .swiper.elementor-loop-container > .hp-nav {
	margin: 36px 0 40px;
}

/* arrow + bullet mặc định của Elementor: bỏ, thay bằng thanh .hp-nav */
body .elementor-element-cfa9e42 .elementor-swiper-button,
body .elementor-element-cfa9e42 .swiper-pagination {
	display: none !important;
}

@media screen and (max-width: 1210px) {

	body .elementor-element-cfa9e42 .swiper.elementor-loop-container > .hp-nav {
		margin: 5vw 0 5.5vw;
	}
}

@media screen and (max-width: 750px) {

	body .elementor-element-cfa9e42 .swiper.elementor-loop-container > .hp-nav {
		margin: 10.13vw 0 11.2vw;
	}
}


/* ==========================================================================
   05. HOME — SNS MARQUEE (ảnh chạy liên tục phải -> trái)
   --------------------------------------------------------------------------
   Trang mẫu : .main_sns.main_box  ->  .sns_swiper.sns_swiper1
   Trang đích : .elementor-element-ea82244  (container flex 6 image-box,
                KHÔNG phải Swiper nên dựng marquee bằng CSS animation)

   Thông số gốc đo được từ trang mẫu (vp 1600x1000):
     - swiper : slidesPerView "auto", speed 8000, autoplay delay 0, loop
     - .swiper-wrapper { transition-timing-function: linear }
     - slide 398 x 398, margin-right 16
     -> vận tốc = (398 + 16) / 8000ms = 51.75 px/s
        (đo thực tế trên trang mẫu: trung bình ~51.7 px/s, đều)
     - hướng  : translateX giảm dần = chạy từ phải sang trái
     - không dừng khi hover, không có pagination/arrow

   JS (module 05) gói các con vào .hp-marquee__track, nhân đôi để nối liền
   mạch, rồi tính --hp-marquee-shift / --hp-marquee-duration theo đúng
   51.75 px/s nên tốc độ giống trang mẫu bất kể kích thước ảnh của bạn.
   ========================================================================== */

body .elementor-2 .elementor-element.elementor-element-ea82244.hp-marquee {
	display: block;
	overflow: hidden;
}

.hp-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	/* gap: inherit -> tự bám theo --gap responsive mà Elementor đặt cho container */
	gap: inherit;
	width: max-content;
	will-change: transform;
}

/* Trước khi gói vào track, 6 ô co lại vừa khít bề ngang container (248px).
   Trong track (width:max-content) chúng sẽ nở về kích thước ảnh gốc (400px),
   nên phải khoá lại đúng bề rộng cũ — JS đo và ghi vào --hp-marquee-item. */
.hp-marquee__track > * {
	flex: 0 0 var(--hp-marquee-item, auto);
	max-width: none;
}

/* Chỉ chạy sau khi JS đã đo xong quãng dịch, tránh chớp ở tốc độ mặc định. */
.hp-marquee__track.is-running {
	animation: hp-marquee-rtl var(--hp-marquee-duration, 30s) linear infinite;
}

@keyframes hp-marquee-rtl {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(var(--hp-marquee-shift, 0px) * -1), 0, 0);
	}
}


/* ==========================================================================
   06. HOME — BANNER ZONE MARQUEE (logo đối tác chạy phải -> trái)
   --------------------------------------------------------------------------
   Trang mẫu : .banner_zone_wrap  ->  .banner_zone_swiper
   Trang đích : .elementor-element-3ea13c4  (container flex, 11 widget image,
                KHÔNG phải Swiper)

   Thông số gốc đo được từ trang mẫu (vp 1600x1000):
     - swiper : slidesPerView "auto", speed 8000, autoplay delay 0, loop
     - .swiper-wrapper { transition-timing-function: linear }
     - slide 170px, margin-right 40px
     -> vận tốc = (170 + 40) / 8000ms = 26.25 px/s
        (đo thực tế trên trang mẫu: trung bình ~25.5 px/s)
     - CHẬM HƠN marquee SNS ở mục 05 (51.75 px/s)
     - .banner_zone_wrap { display:flex; align-items:center; overflow:hidden }

   Dùng chung khung .hp-marquee / .hp-marquee__track đã khai báo ở mục 05,
   nên ở đây chỉ cần bật overflow cho container.
   ========================================================================== */

body .elementor-2 .elementor-element.elementor-element-3ea13c4.hp-marquee {
	display: block;
	overflow: hidden;
}

/* Trang mẫu canh giữa theo chiều dọc (.banner_zone_wrap { align-items:center }) */
body .elementor-element-3ea13c4.hp-marquee .hp-marquee__track {
	align-items: center;
}


/* ==========================================================================
   07. STICKY HEADER
   --------------------------------------------------------------------------
   Trang mẫu : header .header_wrap
   Trang đích : .elementor-location-header > .elementor-element-b22e2e6
                (container đã bật Elementor Pro Sticky = Top, chỉ desktop)

   Hành vi gốc (js_common.bundle.js, listener scroll):
     y > lastY && y > 100  -> .hidden  + bỏ .active   (cuộn xuống: giấu header)
     y < lastY && y > 100  -> bỏ .hidden + .active    (cuộn lên: hiện, nền trắng)
     y <= 100              -> bỏ .hidden + bỏ .active (về đỉnh: trong suốt)

   CSS gốc:
     .header_wrap        { position:fixed; top:0; height:88px; z-index:70;
                           overflow:hidden; transition: all .5s ease }
     .header_wrap.hidden { transform: translateY(-100%) }
     .header_wrap.active { background: hsla(0,0%,100%,.9);
                           backdrop-filter: blur(3px) }
     .header_wrap.active #gnb ul li a { color:#464953 }
     .header_wrap.active h1 a         { logo_green.png }
     .header_wrap.active .search      { icon đen }

   Vị trí fixed/top do Elementor Sticky lo, ở đây chỉ thêm 3 trạng thái trên.
   ========================================================================== */

/* Trong Elementor, container này đang đặt Position = Absolute, sinh ra
   `position: absolute !important` ở post-41.css. Nó THẮNG inline style
   `position: fixed` mà Elementor Sticky ghi vào, nên Sticky bật mà header
   vẫn cuộn mất. Ép fixed ở đây (trang mẫu cũng là position:fixed).
   Cách sạch hơn: vào Elementor đổi Position của container về Default,
   khi đó có thể xoá 2 dòng position/top dưới đây. */
body .elementor-location-header .hp-header:not(.elementor-sticky__spacer) {
	position: fixed !important;
	top: 0;
	transition: transform 0.5s ease, background-color 0.5s ease,
		-webkit-backdrop-filter 0.5s ease, backdrop-filter 0.5s ease;
	will-change: transform;
}

/* cuộn xuống: trượt lên khuất */
body .elementor-location-header .hp-header--hidden:not(.elementor-sticky__spacer) {
	transform: translateY(-100%);
}

/* cuộn lên: hiện lại với nền trắng mờ */
body .elementor-location-header .hp-header--active:not(.elementor-sticky__spacer) {
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	background-color: hsla(0, 0%, 100%, 0.9);
}

/* chữ menu trắng -> #464953 để đọc được trên nền trắng.
   Cần .elementor-nav-menu--main để nặng hơn rule 0,5,0 của post-41.css
   (.elementor-41 .elementor-element.elementor-element-d1d3ced
    .elementor-nav-menu--main .elementor-item). */
body .elementor-location-header .hp-header--active:not(.elementor-sticky__spacer) .elementor-nav-menu--main .elementor-item {
	color: #464953;
	transition: color 0.5s ease;
}

/* icon tìm kiếm (SVG) trắng -> tối */
body .elementor-location-header .hp-header--active:not(.elementor-sticky__spacer) .elementor-widget-icon .e-font-icon-svg,
body .elementor-location-header .hp-header--active:not(.elementor-sticky__spacer) .elementor-icon svg {
	fill: #464953;
	transition: fill 0.5s ease;
}

/* logo đổi trắng <-> xanh (JS đổi src) — thêm transition cho mượt */
body .elementor-location-header .hp-header:not(.elementor-sticky__spacer) .elementor-widget-image img {
	transition: opacity 0.25s ease;
}


/* ==========================================================================
   08. MEGA MENU  (dùng submenu gốc của WordPress — giống cấu trúc trang mẫu)
   --------------------------------------------------------------------------
   Trang mẫu : header #gnb > ul > li > .sub_nav   +  .header_dimed
   Trang đích : menu WordPress "Header Mega" (5 mục cấp 1, mỗi mục có con),
                render bởi widget nav-menu d1d3ced trong header.
                -> DOM ra đúng dạng <li><a></a><ul class="sub-menu">…</ul></li>
                   nên mỗi cột tự canh thẳng dưới mục cha như trang mẫu.

   Cơ chế gốc: .header_wrap { overflow:hidden; height:88px }, hover #gnb ul thì
   gsap giãn chiều cao header trong 0.3s để lộ các .sub_nav (top:88px).
   Ở đây làm y hệt: header overflow:hidden + đổi height, JS đo chiều cao cột
   cao nhất.

   Số đo gốc (vp 1600x1000):
     #gnb>ul>li        : width 156px, height 100%, position relative,
                         transition all .3s;  hover -> nền #f6f9f9
     #gnb>ul>li>a      : #fff, 16px/700, flex canh giữa, cao 100%
                         hover -> #22724a
     .sub_nav          : absolute, top 88px (=100% của li), left 0, right 0,
                         padding 24px 0 74px
     .sub_nav a        : #767983, 16px/500, margin 12px 0, padding 2px 0
                         hover -> #22724a + gạch chân chạy 0->100% trong .35s
     .header_dimed     : fixed, rgba(0,0,0,.4), z-index 30, transition .35s
     .header_wrap.over : nền #fff đặc
   ========================================================================== */

/* header thành khung cắt, đổi chiều cao mượt (= .header_wrap) */
body .elementor-location-header .hp-mega-host:not(.elementor-sticky__spacer) {
	overflow: hidden;
	transition: transform 0.5s ease, background-color 0.5s ease,
		-webkit-backdrop-filter 0.5s ease, backdrop-filter 0.5s ease,
		height 0.3s ease;
}

/* mở mega -> thanh header nền trắng ĐẶC (= .header_wrap.over),
   khác .hp-header--active của mục 07 là trắng 90% + blur */
body .elementor-location-header .hp-header--over:not(.elementor-sticky__spacer) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background-color: #fff;
}

/* KHÔNG đụng padding của cột menu: chính nó quyết định chiều cao thanh header.
   Sau khi ẩn mũi tên dropdown, nhãn dài chỉ còn 2 dòng nên <li> giữ đúng
   chiều cao cũ và thanh vẫn 86px như ban đầu. */

/* stretch (mặc định) để mọi <li> cao bằng mục cao nhất — <li> có chiều cao
   xác định thì <a> mới dùng được height:100%. */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul.elementor-nav-menu {
	align-items: stretch;
}

/* Mục cấp 1 (= #gnb > ul > li). KHÔNG đụng chiều cao thật của <li>:
   - height:100% -> khi header giãn ra, <li> giãn theo và đẩy submenu xuống đáy
   - height cố định -> <li> cao lên làm cột cao lên làm header cao lên (lặp vô hạn)
   Nên giữ nguyên chiều cao tự nhiên, và phủ nền hover bằng ::before nới rộng
   thêm --hp-mega-gap lên/xuống để trùng trọn chiều cao thanh như trang mẫu. */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item {
	flex: none;
	position: relative;
	text-align: center;
	/* đúng bằng trang mẫu — nhãn dài ("Customer Service Center") xuống 2 dòng
	   y hệt mẫu, và cả hàng menu rộng 5 x 156 = 780px như #gnb của mẫu */
	width: 156px;
}

body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item:before {
	background-color: #f6f9f9;
	bottom: calc(var(--hp-mega-gap, 0px) * -1);
	content: "";
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: calc(var(--hp-mega-gap, 0px) * -1);
	transition: opacity 0.3s ease;
	z-index: 0;
}

body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item:hover:before {
	opacity: 1;
}

/* Khi mega đang mở, trang mẫu để <li> cao 100% (= cả header đã giãn) nên nền
   hover phủ TRỌN CỘT: thanh + toàn bộ vùng submenu bên dưới, không chỉ dải
   trên. JS ghi --hp-mega-drop = phần header giãn thêm để ::before kéo xuống
   đúng chừng đó. */
body .hp-mega-host.hp-mega-open .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item:before {
	bottom: calc((var(--hp-mega-gap, 0px) + var(--hp-mega-drop, 0px)) * -1);
}

/* submenu phải nằm TRÊN lớp nền hover */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li > ul.sub-menu {
	z-index: 1;
}

/* Elementor thêm mũi tên dropdown sau mỗi mục có con — trang mẫu không có */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item > a .sub-arrow {
	display: none;
}

body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item > a.elementor-item {
	align-items: center;
	display: flex;
	font-size: 16px;
	font-weight: 700;
	height: 100%;
	justify-content: center;
	/* trang mẫu để line-height đúng bằng font-size (16px) và padding 0 —
	   đây là thứ làm nhãn nhiều dòng khít lại thay vì rời rạc */
	line-height: 16px;
	/* Trang mẫu để <a> cao cứng 88px vì #gnb của họ position:absolute nên không
	   ảnh hưởng chiều cao header. Bên này menu nằm trong luồng, nên dùng
	   min-height đúng bằng chiều cao <li> ban đầu (46px) để thanh header giữ
	   nguyên 86px; chữ vẫn khít nhờ line-height 16px và canh giữa bằng flex. */
	min-height: 46px;
	padding: 0;
	position: relative;
	/* trang mẫu cho nhãn dài xuống dòng trong khung 156px */
	white-space: normal;
	width: 100%;
	z-index: 1;
}

/* Khi header giãn ra, hàng thanh trên (logo / menu / nút) không được canh giữa
   theo chiều cao mới — ghim lại đúng chiều cao thanh lúc đóng. */
body .hp-mega-host.hp-mega-open > .e-con-inner {
	align-items: flex-start;
	height: var(--hp-mega-bar, auto);
}

body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item:hover > a.elementor-item {
	color: #22724a;
}

/* submenu (= .sub_nav) — luôn nằm sẵn, bị header overflow:hidden che đi */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li > ul.sub-menu {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	display: block !important;
	/* Elementor đặt left:auto cho dropdown khiến submenu co theo nội dung và
	   lệch khỏi mục cha -> ép mốc trái + bề rộng đúng bằng <li> (156px). */
	left: 0 !important;
	margin: 0;
	min-width: 0;
	opacity: 0;
	padding: 24px 0 74px;
	position: absolute;
	right: auto !important;
	/* !important vì Elementor cũng đặt top:100% cho dropdown và thắng về
	   specificity — khi đó phần bù --hp-mega-gap bị bỏ qua. */
	top: calc(100% + var(--hp-mega-gap, 0px)) !important;
	transition: opacity 0.25s ease;
	visibility: hidden;
	width: 100% !important;
}

body .hp-mega-host.hp-mega-open .hp-mega-nav .elementor-nav-menu--main > ul > li > ul.sub-menu {
	opacity: 1;
	visibility: visible;
}

/* Elementor thụt padding-left 6px cho <li> con -> link lệch khỏi tâm cột.
   Nó còn kẻ đường phân cách VIỀN CHẤM CAM dưới mỗi mục (tuỳ chọn "Divider"
   của widget), sinh ra trong post-41.css:
     .elementor-41 .elementor-element.elementor-element-d1d3ced
     .elementor-nav-menu--dropdown li:not(:last-child)
     { border-style: dotted; border-color: #ffac00; border-bottom-width: 1px }
   Rule đó là 0,5,1 nên selector dưới phải kèm cả .elementor-nav-menu--dropdown
   (Elementor gán class này cho cả submenu trong menu chính) mới đủ nặng.
   Muốn dứt điểm từ gốc: Elementor > widget menu > tab Dropdown > Divider = None. */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li > ul.sub-menu.elementor-nav-menu--dropdown > li {
	border: 0;
	padding: 0;
	width: 100%;
}

/* Elementor để border-left 8px trong suốt cho link con (thụt lề dropdown)
   khiến link lệch 8px khỏi tâm cột. */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	border: 0;
}

/* ::after của Elementor trên mục cấp 1 (hiệu ứng pointer / vạch ngăn) —
   trang mẫu không có. ::before là lớp nền hover của mình, giữ nguyên. */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item:after {
	display: none;
}

/* link trong submenu (= .sub_nav > ul > li > a).
   Đủ 5 class để nặng hơn rule 0,5,0 Elementor sinh cho widget. */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	color: #767983;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	/* trang mẫu: line-height = font-size, link nhiều dòng khít lại */
	line-height: 16px;
	margin: 12px 0;
	padding: 2px 0;
	position: relative;
	white-space: normal;
	/* Elementor cho link rộng 100% -> gạch chân hover kéo hết 156px.
	   Trang mẫu để inline-block co theo chữ (120px) và canh giữa cột. */
	width: auto;
}

body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus {
	background-color: transparent;
	color: #22724a;
}

/* gạch chân chạy từ trái sang khi hover */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:after {
	background-color: #22724a;
	content: "";
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	top: 100%;
	transition: width 0.35s ease;
	width: 0;
	will-change: width;
}

body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover:after {
	width: 100%;
}

/* Đường kẻ ngăn giữa thanh header và mega menu.
   Trang mẫu: header .header_wrap::before
     { background:#d6dbe1; height:1px; top:90px; width:200%; z-index:100;
       opacity:0; transition:opacity .3s }
     + .header_wrap:hover::before { opacity:1 }
   Bên này dùng ::after vì ::before đã bị Elementor khai báo sẵn cho lớp phủ nền.
   top = chiều cao thanh + 2px, đúng tỉ lệ 90/88 của trang mẫu. */
body .elementor-location-header .hp-mega-host:not(.elementor-sticky__spacer):after {
	background-color: #d6dbe1;
	content: "";
	height: 1px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: calc(var(--hp-mega-bar, 86px) + 2px);
	transition: opacity 0.3s ease;
	z-index: 100;
}

body .elementor-location-header .hp-mega-host:not(.elementor-sticky__spacer):hover:after {
	opacity: 1;
}

/* trang mẫu ẩn đường kẻ này ở tablet/mobile */
@media screen and (max-width: 1210px) {

	body .elementor-location-header .hp-mega-host:not(.elementor-sticky__spacer):after {
		display: none;
	}
}

/* lớp phủ tối phía sau (= .header_dimed) */
.hp-mega-dim {
	background-color: rgba(0, 0, 0, 0.4);
	height: 100vh;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: opacity 0.35s, visibility 0.35s;
	visibility: hidden;
	width: 100vw;
	z-index: 30;
}

.hp-mega-dim.is-active {
	opacity: 1;
	visibility: visible;
}


/* ==========================================================================
   09. HEADER TRANG CON — không trong suốt
   --------------------------------------------------------------------------
   Trang mẫu : https://himpel.com/eng/appliance
     js_common.js: nếu đường dẫn KHÔNG phải /kr hoặc /eng thì thêm class `sub`
     CSS: header.sub .header_wrap  ==  header .header_wrap.active
          { background: hsla(0,0%,100%,.9); backdrop-filter: blur(3px) }
          header.sub #gnb ul li a { color:#464953 }
          header.sub h1 a         { logo_green.png }
     -> Trang con LUÔN có nền trắng mờ, chữ #464953, logo xanh, kể cả ở đỉnh
        trang. Vẫn ẩn khi cuộn xuống và hiện lại khi cuộn lên như trang chủ.

   Trang mẫu còn đẩy nội dung xuống đúng chiều cao header
   (.container { padding-top: 107px }) để banner không bị header phủ lên —
   bên này làm tương tự qua --hp-header-h (JS đo).
   ========================================================================== */

/* Nền + màu chữ: dùng lại đúng trạng thái .hp-header--active của mục 07,
   module 07 giữ class đó thường trực trên trang con nên không cần khai báo
   lại. Ở đây chỉ ghi rõ để không phụ thuộc thứ tự class. */
body .elementor-location-header .hp-header--sub:not(.elementor-sticky__spacer) {
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	background-color: hsla(0, 0%, 100%, 0.9);
}

/* Đẩy nội dung xuống dưới header cố định, chỉ ở khổ có header desktop
   (>=1025px — dưới ngưỡng đó Elementor dùng header mobile nằm trong luồng,
   không cần bù). */
@media screen and (min-width: 1025px) {

	body:not(.home) {
		padding-top: var(--hp-header-h, 86px);
	}
}


/* ==========================================================================
   10. CHIỀU CAO HEADER — khớp đúng số đo trang mẫu
   --------------------------------------------------------------------------
   Đo lại trang mẫu ở khổ 1600px (lần 1: computed style, lần 2: đọc thẳng
   CSS/JS gốc):

     header .header_wrap        { height: 88px; overflow: hidden }
     header .header_wrap #gnb > ul > li        { width: 156px }
     header .header_wrap.over  #gnb > ul > li  { padding: 0 10px }  (+ transition .3s)
     .container                 { padding-top: 88px }

   Khi mở mega, common.bundle.js đặt chiều cao header bằng:
     gsap.to(header, { duration:.3,
        height: max( subNav.rect.height + paddingTop + paddingBottom ) })
   -> KHÔNG cộng thanh 88px; lấy chiều cao cột cao nhất (đã gồm padding
      24/74) rồi cộng THÊM một lần padding nữa. Ở 1600px: 430 + 98 = 528px.
   Số đo đó lấy lúc <li> chưa kịp giãn padding (transition .3s), nên cột vẫn
   rộng 156px — module 08 cũng đo trước khi gắn class mở nên khớp.
   ========================================================================== */

/* thanh header đúng 88px (trước đây 86px do chiều cao tự nhiên của cột nút) */
body .elementor-location-header .hp-header:not(.elementor-sticky__spacer) {
	min-height: 88px;
}

/* mở mega -> cột rộng thêm 20px như .header_wrap.over #gnb > ul > li */
body .hp-mega-host .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item {
	transition: padding 0.3s ease, width 0.3s ease;
}

body .hp-mega-host.hp-mega-open .hp-mega-nav .elementor-nav-menu--main > ul > li.menu-item {
	padding: 0 10px;
	/* border-box bên mình, nên cộng luôn 20px padding để bằng 156 + 10 + 10
	   của trang mẫu (content-box) */
	width: 176px;
}


/* ==========================================================================
   11. FIND THE HIMPEL PRODUCT FOR YOU — bộ câu hỏi tìm sản phẩm
   --------------------------------------------------------------------------
   Trang mẫu : https://himpel.com/eng/appliance  (khối `.sub .appliance`)
   Số đo gốc (đọc common.css + đo computed ở 1600px, khớp 2 lượt):

     .white_area            text-align:center
       strong               32px / 42px, #22724a, 700, letter-spacing -.05em
       h4                   40px, 600, padding 26px 0 60px
       .messege             absolute, bottom 0, left 50%,
                            translate(-50%,50%), radius 16px, 22px,
                            padding 14px 33px, gap 5px,
                            .yellow #faf0e1 / .green #e8f2df,
                            ::before = tam giác 17x15 chỉ lên
     .green_area            #f6f9f9, flex column center, padding 60px 0 180px
     .appliance_question    width 672px
       li                   margin-bottom 24px (cuối 80px)
       button               #fff, radius 16px, shadow 9px 9px 10px -14px #949494,
                            28px / 34px, min-height 88px, padding 10px 42px,
                            màu #464953, canh trái, flex
         img                width 71px, margin-right 48px
         div                width calc(100% - 42px)
       li.active button     nền #e8f2df
     .btn_box               flex wrap, gap 40px 8px, max-width 342px, center
       .next  (btn_st02)    #22724a, radius 30px, padding 20px 28px, w 167px,
                            17px/600, gap 17px, icon 14x14
       .prev  (btn_st01)    nền trắng, chữ #22724a, padding 20px 49px 20px 59px,
                            w 167px, mũi tên quay 180deg
       .reset               #9fa0a0, 17px/600, h 24px, padding-right 32px, w 106px
     popup Start Over       .alert_popup 300px, radius 18px, min-height 206px,
                            padding 28px 0, viền 1px #dadade,
                            shadow 0 0 80px rgba(0,0,0,.2)
       strong               18px/26px #22724b 700
       p                    15px/25px #767983, margin 23px 0 35px
       button               radius 19px, h 38px, min-width 110px, gap 2px
       .btn01 #e7ece9/#464953 (hover -> #22724b/#fff), .btn02 #22724b/#fff

   Trang mẫu để `.appliance { margin-bottom: -180px }` cho footer đè lên đúng
   phần padding dưới của khối xanh — giữ nguyên cách đó.
   Mũi tên và tam giác vẽ bằng CSS (chưa tải icon gốc về media library).
   ========================================================================== */

.hp-finder {
	margin-bottom: -180px;
	position: relative;
}

/* Khối xanh tràn hết bề ngang dù widget nằm trong container boxed 1640 của
   Elementor. --hp-sbw = bề rộng thanh cuộn dọc (JS đo), phải trừ ra vì 100vw
   tính cả thanh cuộn -> nếu không sẽ sinh thanh cuộn NGANG. */
.hp-finder__green,
.hp-finder__white {
	margin-left: calc(50% - (100vw - var(--hp-sbw, 0px)) / 2);
	margin-right: calc(50% - (100vw - var(--hp-sbw, 0px)) / 2);
	width: calc(100vw - var(--hp-sbw, 0px));
}

.hp-finder__white {
	position: relative;
	text-align: center;
}

.hp-finder__no {
	color: #22724a;
	display: block;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 42px;
}

.hp-finder__q {
	color: #464953;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 40px;
	margin: 0;
	padding: 26px 0 60px;
}

.hp-finder__msg {
	align-items: center;
	border-radius: 16px;
	bottom: 0;
	display: flex;
	flex-wrap: nowrap;
	font-size: 22px;
	font-weight: 400;
	gap: 5px;
	justify-content: center;
	left: 50%;
	letter-spacing: -0.05em;
	padding: 14px 33px;
	position: absolute;
	transform: translate(-50%, 50%);
	width: max-content;
	z-index: 2;
}

.hp-finder__msg:before {
	border-left: 8.5px solid transparent;
	border-right: 8.5px solid transparent;
	bottom: 100%;
	content: "";
	height: 0;
	position: absolute;
	width: 0;
}

.hp-finder__msg--yellow {
	background-color: #faf0e1;
}

.hp-finder__msg--yellow:before {
	border-bottom: 15px solid #faf0e1;
}

.hp-finder__msg--green {
	background-color: #e8f2df;
}

.hp-finder__msg--green:before {
	border-bottom: 15px solid #e8f2df;
}

.hp-finder__msg img {
	flex: none;
	width: 32px;
}

.hp-finder__green {
	align-items: center;
	background-color: #f6f9f9;
	display: flex;
	flex-direction: column;
	padding: 60px 0 180px;
}

.hp-finder__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 672px;
}

.hp-finder__list li {
	margin-bottom: 24px;
}

.hp-finder__list li:last-of-type {
	margin-bottom: 80px;
}

/* nút đáp án — ghi đè cả reset.css của hello-elementor (button:hover nền #c36) */
.hp-finder__list button,
.hp-finder__list button:hover,
.hp-finder__list button:focus,
.hp-finder__list button:active {
	-webkit-appearance: none;
	align-items: center;
	appearance: none;
	background-color: #fff;
	border: 0;
	border-radius: 16px;
	box-shadow: 9px 9px 10px -14px #949494;
	color: #464953;
	cursor: pointer;
	display: flex;
	flex-wrap: nowrap;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 34px;
	min-height: 88px;
	padding: 10px 42px;
	text-align: left;
	text-decoration: none;
	transition: all 0.3s ease;
	/* theme đặt white-space:nowrap cho <button> -> nhãn dài không xuống dòng
	   được nên <div> không co lại và chữ tràn ra ngoài thẻ */
	white-space: normal;
	width: 100%;
}

.hp-finder__list button:focus {
	outline: none;
}

.hp-finder__list button:focus-visible {
	outline: 2px solid #22724a;
	outline-offset: 3px;
}

.hp-finder__list img {
	flex: none;
	margin-right: 48px;
	width: 71px;
}

.hp-finder__list button > div {
	box-sizing: border-box;
	width: calc(100% - 42px);
}

.hp-finder__list em {
	font-style: normal;
	font-weight: 600;
}

.hp-finder__list li.is-active button,
.hp-finder__list li.is-active button:hover {
	background-color: #e8f2df;
}

.hp-finder__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 8px;
	justify-content: center;
	max-width: 342px;
}

.hp-finder__btns button,
.hp-finder__btns button:hover,
.hp-finder__btns button:focus,
.hp-finder__btns button:active {
	-webkit-appearance: none;
	align-items: center;
	appearance: none;
	border: 0;
	border-radius: 30px;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	flex-wrap: nowrap;
	font-size: 17px;
	font-weight: 600;
	gap: 17px;
	justify-content: center;
	letter-spacing: -0.02em;
	/* trang mẫu không đặt line-height cho .btn_st01/02 nên nút cao đúng
	   20 + 17 + 20 = 57px; theme này mặc định 1.5 -> phải ép về 1 */
	line-height: 1;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.hp-finder__btns button:focus {
	outline: none;
}

.hp-finder__btns button:focus-visible {
	outline: 2px solid #22724a;
	outline-offset: 3px;
}

.hp-finder__next,
.hp-finder__next:hover,
.hp-finder__next:focus,
.hp-finder__next:active {
	background-color: #22724a;
	color: #fff;
	padding: 20px 28px;
	width: 167px;
}

.hp-finder__prev,
.hp-finder__prev:hover,
.hp-finder__prev:focus,
.hp-finder__prev:active {
	background-color: #fff;
	color: #22724a;
	flex: 1;
	padding: 20px 49px 20px 59px;
	width: 167px;
}

/* mũi tên: vẽ bằng CSS (chevron) thay cho pdp_visual_go_icon.png 14x14 */
.hp-finder__btns i {
	display: block;
	flex: none;
	height: 14px;
	position: relative;
	width: 14px;
}

.hp-finder__btns i:before {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	height: 8px;
	left: 1px;
	position: absolute;
	top: 3px;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	width: 8px;
}

.hp-finder__prev i:before {
	left: 4px;
	transform: rotate(-135deg);
}

.hp-finder__next:hover i:before {
	transform: rotate(45deg) translate(2px, -2px);
}

.hp-finder__prev:hover i:before {
	transform: rotate(-135deg) translate(2px, -2px);
}

/* nút Start Over — icon mũi tên vòng vẽ bằng SVG nội tuyến */
.hp-finder__reset,
.hp-finder__reset:hover,
.hp-finder__reset:focus,
.hp-finder__reset:active {
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239fa0a0' stroke-width='1.6'%3E%3Cpath d='M17 10a7 7 0 1 1-2.05-4.95'/%3E%3Cpath d='M17 3.5V7h-3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 5px center;
	background-repeat: no-repeat;
	background-size: 16px auto;
	border: 0;
	border-radius: 0;
	color: #9fa0a0;
	cursor: pointer;
	display: block;
	font-size: 17px;
	font-weight: 600;
	height: 24px;
	letter-spacing: -0.05em;
	padding: 0 32px 0 0;
	text-align: left;
	width: 106px;
}

/* ---- popup Start Over (= .dimmed > .alert_popup) ---- */
.hp-finder-dim {
	background-color: rgba(0, 0, 0, 0.5);
	height: 100vh;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	visibility: hidden;
	width: 100vw;
	z-index: 990;
}

.hp-finder-dim.is-open {
	opacity: 1;
	visibility: visible;
}

.hp-finder-pop {
	align-items: center;
	background-color: #fff;
	border: 1px solid #dadade;
	border-radius: 18px;
	box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	left: 50%;
	min-height: 206px;
	padding: 28px 0;
	position: relative;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
}

.hp-finder-pop strong {
	color: #22724b;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 26px;
}

.hp-finder-pop p {
	color: #767983;
	font-size: 15px;
	letter-spacing: -0.02em;
	line-height: 25px;
	margin: 23px 0 35px;
	text-align: center;
}

.hp-finder-pop .hp-finder-pop__btns {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	justify-content: center;
}

.hp-finder-pop button,
.hp-finder-pop button:hover,
.hp-finder-pop button:focus,
.hp-finder-pop button:active {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 19px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	height: 38px;
	min-width: 110px;
	width: 100%;
}

.hp-finder-pop .hp-finder-pop__no {
	background-color: #e7ece9;
	color: #464953;
	transition: all 0.2s ease;
}

.hp-finder-pop .hp-finder-pop__no:hover,
.hp-finder-pop .hp-finder-pop__yes,
.hp-finder-pop .hp-finder-pop__yes:hover {
	background-color: #22724b;
	color: #fff;
}

.hp-finder-pop .hp-finder-pop__close,
.hp-finder-pop .hp-finder-pop__close:hover,
.hp-finder-pop .hp-finder-pop__close:focus {
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' stroke='%23464953' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 2l14 14M16 2L2 16'/%3E%3C/svg%3E");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 0;
	height: 18px;
	min-width: 0;
	overflow: hidden;
	position: absolute;
	right: 24px;
	text-indent: -9999px;
	top: 21px;
	white-space: nowrap;
	width: 17px;
}

@media screen and (max-width: 1210px) {

	.hp-finder {
		margin-bottom: -20vw;
	}

	.hp-finder__no {
		font-size: 3vw;
		letter-spacing: -0.02em;
		line-height: 3.83vw;
	}

	.hp-finder__q {
		font-size: 4.17vw;
		letter-spacing: -0.04em;
		line-height: 5.83vw;
		padding: 3vw 0 6.67vw;
	}

	.hp-finder__msg {
		border-radius: 2.17vw;
		font-size: 2.33vw;
		font-weight: 500;
		gap: 0.5vw;
		margin: -7.67vw auto 0;
		padding: 2vw 3.75vw;
		position: static;
		transform: translateY(50%);
	}

	.hp-finder__msg:before {
		border-left-width: 0.79vw;
		border-right-width: 0.79vw;
		border-bottom-width: 1.25vw;
		left: 50%;
		margin-left: -0.79vw;
	}

	.hp-finder__msg img {
		width: 2.83vw;
	}

	.hp-finder__green {
		box-sizing: border-box;
		padding: 6.67vw 3.17vw 11.5vw;
	}

	.hp-finder__list {
		width: 100%;
	}

	.hp-finder__list li {
		margin-bottom: 2vw;
	}

	.hp-finder__list li:last-of-type {
		margin-bottom: 10.67vw;
	}

	.hp-finder__list button {
		font-size: 2.64vw;
		line-height: 3.47vw;
		min-height: 10.25vw;
		padding: 1.65vw 2.89vw;
	}

	.hp-finder__list img {
		margin-right: 1.73vw;
		width: 7.5vw;
	}

	.hp-finder__list button > div {
		width: calc(100% - 2.89vw);
	}
}

@media screen and (max-width: 750px) {

	.hp-finder {
		margin-bottom: -32vw;
	}

	.hp-finder__no {
		font-size: 4.8vw;
		line-height: 6.13vw;
	}

	.hp-finder__q {
		font-size: 6.67vw;
		letter-spacing: -0.04em;
		line-height: 9.33vw;
		padding: 4.8vw 0 10.67vw;
	}

	.hp-finder__msg {
		border-radius: 3.47vw;
		font-size: 3.73vw;
		gap: 0.8vw;
		margin-top: -12.27vw;
		padding: 3.07vw 3.73vw;
	}

	.hp-finder__msg:before {
		border-left-width: 1.27vw;
		border-right-width: 1.27vw;
		border-bottom-width: 2vw;
		margin-left: -1.27vw;
	}

	.hp-finder__msg img {
		width: 4.53vw;
	}

	.hp-finder__green {
		padding: 10.67vw 5.07vw 18.4vw;
	}

	.hp-finder__list li {
		margin-bottom: 3.2vw;
	}

	.hp-finder__list li:last-of-type {
		margin-bottom: 10.67vw;
	}

	.hp-finder__list button {
		font-size: 4.27vw;
		line-height: 5.6vw;
		min-height: 16.53vw;
		padding: 2.67vw 4.67vw;
	}

	.hp-finder__list img {
		margin-right: 1.73vw;
		width: 12vw;
	}

	.hp-finder__list button > div {
		width: calc(100% - 4.67vw);
	}

	.hp-finder__btns {
		gap: 6.4vw 0.67vw;
		max-width: 71.73vw;
	}

	.hp-finder__prev,
	.hp-finder__next {
		height: 12.53vw;
		width: 35.47vw;
	}

	.hp-finder__prev {
		padding: 2.67vw 6.53vw 2.67vw 7.87vw;
	}

	.hp-finder__next {
		padding: 2.67vw 4.27vw;
	}

	.hp-finder__reset {
		background-size: 3.2vw auto;
		font-size: 3.73vw;
		height: 5.33vw;
		padding-right: 6.53vw;
		width: 23.4vw;
	}
}

/* Trang kết quả không có sản phẩm nào khớp (trang mẫu: .no_data) */
.hp-noresult {
	padding: 120px 0;
	text-align: center;
	width: 100%;
}

.hp-noresult p {
	color: #767983;
	font-size: 20px;
	line-height: 32px;
	margin: 0 0 28px;
}

.hp-noresult__reset {
	background-color: #22724a;
	border-radius: 30px;
	color: #fff;
	display: inline-block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	padding: 20px 28px;
	text-decoration: none;
}

.hp-noresult__reset:hover,
.hp-noresult__reset:focus {
	background-color: #1b5c3b;
	color: #fff;
}


/* ==========================================================================
   12. FIND AN OFFICIAL OVERSEAS RETAILER — danh sách đại lý + bản đồ
   --------------------------------------------------------------------------
   Trang mẫu : https://himpel.com/eng/agency  (khối `.sub .agency`)
   Số đo gốc (đọc common.css + đo computed ở 1600px, khớp 2 lượt):

     .agency                display:flex, nowrap; khung chứa rộng 1460px
     .agency_in:first       width 530px, padding-right 54px  (nội dung 476px)
     .agency_in:nth(2)      width calc(100% - 530px) = 930px, height 884px,
                            border-radius 20px, overflow hidden; iframe 100%
     form                   flex, canh giữa; select 170x50 (mr 4px)
                            + input 200x50 + nút tròn 50x50 (ml 10px)
     select / input         viền 1px #d3d3d5, bo 8px, chữ 15px #767983,
                            select có mũi tên 12px cách phải 15px
     .search_btn            nền #22724a, bo 25px, icon kính lúp trắng 19px
     .search_result > p     15px, margin-top 44px, padding-bottom 16px
                              > span              17px, 600, #22724a
     ul                     border-top 1px #d6dbe1
     li                     height 190px, padding 40px 20px,
                            border-bottom 1px #d6dbe1
       strong               20px, 600
       p                    16px, #9699a3, padding 16px 0 38px
       span (liên hệ)       16px, #767983, flex, gap 6px,
                            ::before "T." màu #22724a, 700
       a.btn_st04           16px, 600, #22724a, gạch chân (offset 3px),
                            absolute right 20px top 44px
     .paging                flex center, 16px/700, margin-top 40px
       a                    36x36, #767983;  a.on nền #464953, bo 4px, chữ trắng

   Mũi tên select / kính lúp / mũi tên phân trang vẽ bằng SVG nội tuyến
   (trang mẫu dùng file PNG riêng).
   ========================================================================== */

.hp-agency {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 auto;
	max-width: 1460px;
	width: 100%;
}

.hp-agency__side {
	box-sizing: border-box;
	padding-right: 54px;
	width: 530px;
}

.hp-agency__map {
	border-radius: 20px;
	height: 884px;
	overflow: hidden;
	width: calc(100% - 530px);
}

.hp-agency__map iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

/* ---- hàng tìm kiếm ---- */
.hp-agency__form {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

.hp-agency__select {
	display: flex;
}

.hp-agency .hp-agency__select select {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23767983' stroke-width='1.5'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size: 12px auto;
	border: 1px solid #d3d3d5;
	border-radius: 8px;
	box-sizing: border-box;
	color: #767983;
	font-size: 15px;
	font-weight: 500;
	height: 50px;
	margin-right: 4px;
	min-width: 80px;
	padding: 0 34px 0 14px;
	width: 170px;
}

.hp-agency .hp-agency__input input {
	background-color: #fff;
	border: 1px solid #d3d3d5;
	border-radius: 8px;
	box-sizing: border-box;
	color: #767983;
	font-size: 15px;
	font-weight: 500;
	height: 50px;
	padding: 0 15px;
	width: 200px;
}

.hp-agency .hp-agency__input input::placeholder {
	color: #b3b5bd;
}

/* nút tìm — chặn cả nền hồng #c36 mà reset.css của hello-elementor gán cho
   button:hover / button:focus */
.hp-agency button.hp-agency__search,
.hp-agency button.hp-agency__search:hover,
.hp-agency button.hp-agency__search:focus,
.hp-agency button.hp-agency__search:active {
	-webkit-appearance: none;
	appearance: none;
	background-color: #22724a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 19px auto;
	border: 0;
	border-radius: 25px;
	color: transparent;
	cursor: pointer;
	flex: none;
	height: 50px;
	margin-left: 10px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	white-space: nowrap;
	width: 50px;
}

.hp-agency button.hp-agency__search:focus {
	outline: none;
}

.hp-agency button.hp-agency__search:focus-visible {
	outline: 2px solid #22724a;
	outline-offset: 3px;
}

/* ---- kết quả ---- */
.hp-agency__result > p {
	color: #464953;
	font-size: 15px;
	margin: 44px 0 0;
	padding-bottom: 16px;
}

.hp-agency__result > p > span {
	color: #22724a;
	font-size: 17px;
	font-weight: 600;
}

.hp-agency__result ul {
	border-top: 1px solid #d6dbe1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp-agency__result li {
	border-bottom: 1px solid #d6dbe1;
	box-sizing: border-box;
	cursor: pointer;
	height: 190px;
	padding: 40px 20px;
	position: relative;
}

.hp-agency__result li.hp-agency__empty {
	color: #9699a3;
	cursor: default;
	font-size: 16px;
	height: auto;
	padding: 40px 20px;
	text-align: center;
}

.hp-agency__result li strong {
	color: #464953;
	display: block;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.04em;
}

.hp-agency__result li p {
	color: #9699a3;
	font-size: 16px;
	letter-spacing: -0.04em;
	margin: 0;
	padding: 16px 0 38px;
}

.hp-agency__tel {
	color: #767983;
	display: flex;
	flex-wrap: nowrap;
	font-size: 16px;
	gap: 0 6px;
}

.hp-agency__tel:before {
	color: #22724a;
	content: "T.";
	font-size: 16px;
	font-weight: 700;
}

.hp-agency__result li .hp-agency__link {
	color: #22724a;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.04em;
	position: absolute;
	right: 20px;
	text-decoration: underline;
	text-underline-offset: 3px;
	top: 44px;
}

/* mục đang chọn (trang mẫu không tô nền, thêm nhẹ để biết bản đồ đang ở đâu) */
.hp-agency__result li.is-active {
	background-color: #f6f9f9;
}

/* ---- phân trang ---- */
.hp-agency__paging {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	font-size: 16px;
	font-weight: 700;
	justify-content: center;
	margin-top: 40px;
}

.hp-agency__paging-edge {
	display: flex;
	overflow: hidden;
}

.hp-agency .hp-agency__paging button,
.hp-agency .hp-agency__paging button:hover,
.hp-agency .hp-agency__paging button:focus,
.hp-agency .hp-agency__paging button:active {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 4px;
	color: #767983;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	height: 36px;
	line-height: 36px;
	padding: 0;
	text-align: center;
	width: 36px;
}

.hp-agency .hp-agency__paging button.is-on,
.hp-agency .hp-agency__paging button.is-on:hover {
	background-color: #464953;
	color: #fff;
}

.hp-agency .hp-agency__paging button:disabled {
	cursor: default;
	opacity: 0.35;
}

/* 4 nút đầu/trước/sau/cuối: thay chữ bằng mũi tên vẽ CSS */
.hp-agency .hp-agency__paging-edge button {
	color: transparent;
	overflow: hidden;
	position: relative;
	text-indent: -9999px;
	white-space: nowrap;
}

.hp-agency .hp-agency__paging-edge button:before,
.hp-agency .hp-agency__paging-edge button:after {
	border-right: 2px solid #767983;
	border-top: 2px solid #767983;
	content: "";
	height: 7px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 7px;
}

/* nút "trước" / "sau": 1 mũi tên; "đầu" / "cuối": 2 mũi tên */
.hp-agency .hp-agency__paging-edge button:before {
	transform: translate(-50%, -50%) rotate(-135deg);
}

.hp-agency .hp-agency__paging-edge button:after {
	display: none;
}

.hp-agency .hp-agency__paging-edge:first-of-type button:first-child:before {
	transform: translate(-20%, -50%) rotate(-135deg);
}

.hp-agency .hp-agency__paging-edge:first-of-type button:first-child:after {
	display: block;
	transform: translate(-90%, -50%) rotate(-135deg);
}

.hp-agency .hp-agency__paging-edge:last-of-type button:before {
	transform: translate(-70%, -50%) rotate(45deg);
}

.hp-agency .hp-agency__paging-edge:last-of-type button:last-child:before {
	transform: translate(-95%, -50%) rotate(45deg);
}

.hp-agency .hp-agency__paging-edge:last-of-type button:last-child:after {
	display: block;
	transform: translate(-20%, -50%) rotate(45deg);
}

/* đang tải */
.hp-agency__body.is-loading {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

@media screen and (max-width: 1210px) {

	.hp-agency {
		flex-direction: column-reverse;
		flex-wrap: wrap;
	}

	.hp-agency__side {
		padding-right: 0;
		width: 100%;
	}

	.hp-agency__map {
		border-radius: 2.5vw;
		height: 53.33vw;
		width: 100%;
	}

	.hp-agency__form {
		flex-wrap: wrap;
		margin-top: 5.83vw;
	}

	.hp-agency__select {
		width: 100%;
	}

	.hp-agency .hp-agency__select select {
		color: #464953;
		width: 100%;
	}

	.hp-agency__input {
		margin-top: 0.83vw;
		width: calc(100% - 7.92vw);
	}

	.hp-agency .hp-agency__input input {
		color: #464953;
		width: 100%;
	}

	.hp-agency__result > p {
		font-size: 2.17vw;
		font-weight: 400;
		margin-top: 5.17vw;
		padding-bottom: 3.33vw;
	}

	.hp-agency__result > p > span {
		font-size: 2.33vw;
	}

	.hp-agency__result li {
		height: 29vw;
		padding: 4.17vw 2.5vw;
	}

	.hp-agency__result li strong {
		font-size: 3.17vw;
		line-height: 4.5vw;
	}

	.hp-agency__paging {
		margin-top: 8.33vw;
	}
}

@media screen and (max-width: 750px) {

	.hp-agency__map {
		border-radius: 4vw;
		height: 80vw;
	}

	.hp-agency__form {
		margin-top: 9.33vw;
	}

	.hp-agency__input {
		margin-top: 1.33vw;
		width: calc(100% - 14.67vw);
	}

	.hp-agency__result > p {
		font-size: 3.47vw;
		margin-top: 8.27vw;
		padding-bottom: 5.33vw;
	}

	.hp-agency__result > p > span {
		font-size: 3.73vw;
	}

	.hp-agency__result li {
		height: auto;
		padding: 6.67vw 4vw;
	}

	.hp-agency__result li strong {
		font-size: 4.8vw;
		line-height: 6.4vw;
	}

	.hp-agency__result li p {
		font-size: 3.73vw;
		padding: 2.67vw 0 4vw;
	}

	.hp-agency__tel {
		font-size: 3.73vw;
	}

	.hp-agency__result li .hp-agency__link {
		font-size: 3.73vw;
		position: static;
		display: inline-block;
		margin-top: 4vw;
	}
}