:root {
	--ais-mobile-header-height: 56px;
	--ais-layer-fixed-control: 70;
	--ais-layer-header: 900;
	--ais-layer-shell-backdrop: 910;
	--ais-layer-shell-panel: 920;
	--ais-focus-ring: 0 0 0 3px rgba(255, 90, 0, .28);
}

.mobileHeaderToolbar,
.mobileSearchHeader,
.mobileMenuHeader,
.mobileSubmenuToggle,
.mobileShellBackdrop {
	display: none;
}

@media screen and (max-width: 991px) {
	html {
		scroll-padding-top: calc(var(--ais-mobile-header-height) + env(safe-area-inset-top, 0px));
	}
	body.mobileShellOpen,
	body.accountLoginModalOpen,
	body.cartModalOpen,
	body.commerceVariantModalOpen,
	body.bkOptionsModalOpen {
		overflow: hidden;
		overscroll-behavior: none;
	}
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	select,
	textarea {
		font-size: 16px;
	}

	/* Mobile storefront shell */
	#insHeaderPage {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: var(--ais-layer-header);
		width: 100%;
		background: rgba(255, 255, 255, .97);
		box-shadow: 0 2px 10px rgba(18, 24, 32, .09);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	#insHeaderPage.headerFixed {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		box-shadow: 0 2px 10px rgba(18, 24, 32, .09);
	}
	#insHeaderPage.headerFixed #headerPage {
		display: block;
	}
	#headerPage > .container {
		width: 100%;
		padding: 0;
	}
	.mobileHeaderToolbar {
		display: grid;
		grid-template-columns: minmax(58px, 1fr) auto;
		align-items: center;
		width: 100%;
		height: calc(var(--ais-mobile-header-height) + env(safe-area-inset-top, 0px));
		min-height: calc(var(--ais-mobile-header-height) + env(safe-area-inset-top, 0px));
		padding: env(safe-area-inset-top, 0px) 8px 0;
		border-bottom: 1px solid rgba(26, 31, 36, .08);
		background: rgba(255, 255, 255, .96);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
	.mobileHeaderLogo {
		display: flex;
		align-items: center;
		min-width: 0;
		height: 44px;
		padding: 4px 6px;
		color: #ff5a00;
		font-size: 18px;
		font-weight: 800;
		line-height: 1;
	}
	.mobileHeaderLogo:hover,
	.mobileHeaderLogo:focus {
		color: #ff5a00;
		text-decoration: none;
	}
	.mobileHeaderLogo img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: 36px;
		object-fit: contain;
	}
	.mobileHeaderActions {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 44px;
		align-items: center;
	}
	.mobileHeaderAction {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-width: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 9px;
		background: transparent;
		color: #252a30;
		font-size: 19px;
		line-height: 1;
	}
	.mobileHeaderAction:hover,
	.mobileHeaderAction:focus,
	.mobileHeaderAction[aria-expanded="true"] {
		background: #f1f3f5;
		color: #ff5a00;
		text-decoration: none;
	}
	.mobileSearchClose:focus-visible,
	.mobileMenuClose:focus-visible,
	.mobileSubmenuToggle:focus-visible,
	.mobileShellBackdrop:focus-visible {
		outline: 0;
		box-shadow: var(--ais-focus-ring);
	}
	.mobileHeaderAction,
	.mobileHeaderAction:hover,
	.mobileHeaderAction:focus,
	.mobileHeaderAction:focus-visible,
	.mobileHeaderAction:active,
	.mobileHeaderAction[aria-expanded="true"] {
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
	}
	.mobileHeaderAction:focus-visible {
		box-shadow: inset 0 0 0 2px #6b737c !important;
	}
	.mobileHeaderSupportIcon {
		display: block;
		width: 22px;
		height: 22px;
		fill: currentColor;
	}
	.mobileHeaderCartCount {
		position: absolute;
		top: 2px;
		right: 1px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		border: 2px solid #fff;
		border-radius: 10px;
		background: #00a651;
		color: #fff;
		font-size: 9px;
		font-weight: 800;
		line-height: 14px;
	}

	#headerPage .insHeaderWrap {
		height: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
	}
	#headerPage .insHeaderWrap > .row {
		height: 0;
		margin: 0;
	}
	#headerLogo,
	#headerUser,
	#headerPage .overlayMenu {
		display: none !important;
	}

	/* Search sheet */
	#headerSearch {
		position: fixed;
		top: calc(var(--ais-mobile-header-height) + env(safe-area-inset-top, 0px));
		right: 0;
		left: 0;
		z-index: var(--ais-layer-shell-panel);
		float: none;
		display: block;
		width: 100%;
		max-height: calc(100vh - var(--ais-mobile-header-height) - env(safe-area-inset-top, 0px));
		max-height: calc(100dvh - var(--ais-mobile-header-height) - env(safe-area-inset-top, 0px));
		padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		background: #fff;
		box-shadow: 0 18px 40px rgba(13, 19, 26, .22);
		transform: translateY(-12px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	}
	#insHeaderPage.is-mobile-search-open #headerSearch {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	.mobileSearchHeader,
	.mobileMenuHeader {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.mobileSearchHeader {
		margin-bottom: 14px;
	}
	.mobileSearchHeader p,
	.mobileMenuHeader p {
		margin: 0 0 2px;
		color: #ff5a00;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: .15em;
	}
	.mobileSearchHeader h2,
	.mobileMenuHeader h2 {
		margin: 0;
		color: #1d2228;
		font-size: 19px;
		font-weight: 800;
		line-height: 1.25;
	}
	.mobileSearchClose,
	.mobileMenuClose {
		display: inline-flex;
		flex: 0 0 44px;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #30353a;
		font-size: 30px;
		font-weight: 300;
		line-height: 1;
	}
	#headerSearch .frmSearch {
		margin: 0;
	}
	#headerSearch .frmSearch input[type="search"] {
		display: block;
		width: 100%;
		height: 48px;
		padding: 0 16px;
		border: 1px solid #d6dbe0;
		border-radius: 10px;
		background: #fff;
		font-size: 16px;
		outline: none !important;
		box-shadow: none !important;
	}
	body.search #headerSearch .frmSearch input[type="search"] {
		padding-right: 52px;
	}
	#headerSearch .frmSearch input[type="search"]:focus,
	#headerSearch .frmSearch input[type="search"]:focus-visible {
		border-color: #d6dbe0;
		outline: none !important;
		box-shadow: none !important;
	}
	#headerSearch .frmSearch .insButton {
		display: none;
	}
	#headerSearch .searchEx {
		display: none;
	}
	#headerSearch .ajaxSearchAuto {
		position: static;
		width: 100%;
		max-height: min(55vh, 440px);
		margin-top: 8px;
		overflow-y: auto;
		border: 1px solid #e0e4e8;
		border-radius: 10px;
		box-shadow: none;
	}
	body.search #headerPage .insHeaderWrap,
	body.search #headerPage .insHeaderWrap > .row {
		height: auto;
	}
	body.search #headerSearch {
		position: static;
		width: 100%;
		max-height: none;
		padding: 8px 12px 12px;
		overflow: visible;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		box-shadow: none;
		transform: none;
	}
	body.search #headerSearch .mobileSearchHeader {
		display: none;
	}

	/* Menu drawer */
	#headerMenu {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: var(--ais-layer-shell-panel);
		display: block;
		width: 200px;
		width: fit-content;
		min-width: 150px;
		max-width: min(200px, calc(100vw - 12px));
		padding: 0;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		background: #fff;
		box-shadow: -18px 0 45px rgba(13, 19, 26, .24);
		transform: translateX(102%);
		transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
	}
	#insHeaderPage.is-mobile-menu-open #headerMenu {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);
	}
	#headerMenu > .container {
		width: 100%;
		height: 100%;
		padding: 0;
	}
	#headerNav {
		position: static;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		max-width: none;
		padding: 0;
		overflow: hidden;
		border: 0;
		background: #fff;
		box-shadow: none;
		transform: none;
		transition: none;
	}
	.mobileMenuHeader {
		flex: 0 0 auto;
		min-height: calc(68px + env(safe-area-inset-top, 0px));
		padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 16px;
		border-bottom: 1px solid #e6e9ec;
	}
	#headerNav #navWrap {
		display: block;
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	#headerMenu .navSiteMain ul.nav-navbar,
	#headerMenu .navSiteMain ul.nav-navbar > li {
		width: 100%;
		margin: 0;
	}
	#headerMenu .navSiteMain ul.nav-navbar li {
		position: relative;
		float: none;
	}
	#headerMenu .navSiteMain ul.nav-navbar li > a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 11px 54px 11px 16px;
		border: 0;
		border-bottom: 1px solid #edf0f2;
		background: #fff;
		color: #252a30;
		font-size: 14px;
		font-weight: 650;
		line-height: 1.35;
		white-space: normal;
	}
	#headerMenu .navSiteMain ul.nav-navbar li:not(.liChild) > a {
		padding-right: 16px;
	}
	#headerMenu .navSiteMain ul.nav-navbar li > a:hover,
	#headerMenu .navSiteMain ul.nav-navbar li > a:focus,
	#headerMenu .navSiteMain ul.nav-navbar li.active > a {
		background: #f6f7f8;
		color: #ff5a00;
		text-decoration: none;
	}
	#headerMenu .desktopMenuChevron {
		display: none;
	}
	.mobileSubmenuToggle {
		position: absolute;
		top: 2px;
		right: 2px;
		z-index: 2;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: #555d65;
		font-size: 18px;
	}
	#headerMenu li.liChild > .mobileSubmenuToggle {
		display: flex;
	}
	#headerMenu li.liChild > .mobileSubmenuToggle:hover,
	#headerMenu li.liChild > .mobileSubmenuToggle:focus,
	#headerMenu li.liChild > .mobileSubmenuToggle[aria-expanded="true"] {
		background: #eef1f3;
		color: #ff5a00;
	}
	#headerMenu .mobileSubmenuToggle i {
		transition: transform .2s ease;
	}
	#headerMenu .mobileSubmenuToggle[aria-expanded="true"] i {
		transform: rotate(180deg);
	}
	#headerMenu .mainChild,
	#headerMenu .mainChild.levlup_3 {
		position: static;
		display: none;
		width: 100%;
		max-height: none !important;
		padding: 0;
		overflow: visible;
		visibility: visible;
		opacity: 1;
		border: 0;
		border-radius: 0;
		background: #fafbfc;
		box-shadow: none;
		transform: none;
	}
	#headerMenu li.is-submenu-open > .mainChild {
		display: block;
	}
	#headerMenu .mainChild li > a {
		padding-left: 28px;
		background: #fafbfc;
		font-size: 13px;
	}
	#headerMenu .mainChild.levlup_3 li > a {
		padding-left: 42px;
		background: #f5f7f8;
	}
	#headerNav .closeMenuMB {
		display: none !important;
	}

	/* Shared shell backdrop and support top sheet */
	.mobileShellBackdrop {
		position: fixed;
		inset: 0;
		z-index: var(--ais-layer-shell-backdrop);
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: rgba(9, 14, 21, .58);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}
	.mobileShellBackdrop:not([hidden]) {
		display: block;
	}
	.homeSupportPanel {
		position: fixed;
		top: calc(var(--ais-mobile-header-height) + env(safe-area-inset-top, 0px));
		right: 0;
		bottom: auto;
		left: 0;
		z-index: var(--ais-layer-shell-panel);
		display: block;
		width: 100%;
		max-height: min(82vh, 680px);
		max-height: min(82dvh, 680px);
		padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
		overflow-x: hidden;
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		border: 0;
		border-radius: 0 0 18px 18px;
		background: #fff;
		box-shadow: 0 18px 45px rgba(13, 19, 26, .25);
		transform: translateY(-102%);
		transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
		overscroll-behavior: contain;
	}
	#insHeaderPage.is-mobile-support-open .homeSupportPanel {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	.homeSupportHeader {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		margin: 0 0 15px;
		padding: 0 0 14px;
		border-bottom: 1px solid #e4e8eb;
	}
	.homeSupportHeader p {
		margin: 0 0 3px;
		color: #ff5a00;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: .15em;
	}
	.homeSupportHeader h2 {
		margin: 0;
		color: #1d2228;
		font-size: 20px;
		font-weight: 800;
		line-height: 1.25;
	}
	.homeSupportClose {
		display: inline-flex;
		flex: 0 0 44px;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #30353a;
		font-size: 30px;
		font-weight: 300;
		line-height: 1;
	}
	.homeSupportLinks {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.homeSupportLink {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-width: 0;
		min-height: 56px;
		padding: 8px 10px;
		border: 1px solid #dfe3e8;
		border-radius: 10px;
		background: #fff;
		color: #252a30;
		font-size: 13px;
		font-weight: 750;
		line-height: 1.25;
		text-align: left;
	}
	.homeSupportLink:hover,
	.homeSupportLink:focus {
		border-color: #b9c0c8;
		color: #252a30;
		text-decoration: none;
	}
	.mobileSearchClose:hover,
	.mobileSearchClose:focus,
	.mobileMenuClose:hover,
	.mobileMenuClose:focus,
	.homeSupportClose:hover,
	.homeSupportClose:focus,
	.accountLoginClose:hover,
	.accountLoginClose:focus,
	.bkOptionsClose:hover,
	.bkOptionsClose:focus,
	.cartModalClose:hover,
	.cartModalClose:focus,
	.commerceVariantClose:hover,
	.commerceVariantClose:focus {
		border: 0 !important;
		border-radius: 0;
		background: transparent !important;
		box-shadow: none;
	}
	.homeSupportLink:focus-visible,
	.homeSupportClose:focus-visible,
	.homeSupportPolicy:focus-visible {
		outline: 0;
		box-shadow: var(--ais-focus-ring);
	}
	.homeSupportLinkIcon {
		flex: 0 0 36px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: #eef1f4;
		color: #333;
		font-size: 17px;
	}
	.homeSupportLink.is-messenger .homeSupportLinkIcon {
		background: #168aff;
		color: #fff;
	}
	.homeSupportLink.is-zalo .homeSupportLinkIcon {
		border: 1px solid #168aff;
		background: #fff;
		color: #168aff;
	}
	.homeSupportZaloMark {
		font-size: 10px;
		font-weight: 850;
		letter-spacing: -.03em;
	}
	.homeSupportLink.is-phone .homeSupportLinkIcon {
		background: #eaf7ef;
		color: #198754;
	}
	.homeSupportLink.is-policy .homeSupportLinkIcon {
		background: #fff2e9;
		color: #ff5a00;
	}
	.homeSupportPolicy {
		margin-top: 17px;
		padding-top: 16px;
		border-top: 1px solid #e4e8eb;
	}
	.homeSupportPolicy h3 {
		margin: 0 0 9px;
		color: #22272d;
		font-size: 15px;
		font-weight: 800;
	}
	.homeSupportPolicyList {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.homeSupportPolicyItem {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 10px;
		padding: 11px 0;
		border-bottom: 1px dashed #e1e4e8;
	}
	.homeSupportPolicyItem:last-child {
		border-bottom: 0;
	}
	.homeSupportPolicyIcon {
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}
	.homeSupportPolicyIcon img {
		display: block;
		width: 36px;
		height: 36px;
		object-fit: contain;
	}
	.homeSupportPolicyDetail,
	.homeSupportPolicyDetail > span {
		display: block;
	}
	.homeSupportPolicyDetail strong {
		display: block;
		margin-bottom: 3px;
		color: #292d32;
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
	}
	.homeSupportPolicyDetail > span {
		color: #697079;
		font-size: 12px;
		font-style: italic;
		line-height: 1.4;
	}

	/* Fixed controls must not compete with mobile sheets and commerce dialogs. */
	.insBreadcrumb {
		position: fixed;
		left: 0;
		bottom: env(safe-area-inset-bottom, 0px);
		z-index: var(--ais-layer-fixed-control);
		pointer-events: none;
	}
	.insBreadcrumbToggle {
		position: absolute;
		width: 44px;
		height: 44px;
	}
	.tempFixed .itemFixed {
		z-index: var(--ais-layer-fixed-control);
		width: 44px;
		height: 44px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.tempFixed .itemFixed a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}
	body.mobileShellOpen .tempFixed,
	body.mobileShellOpen .insBreadcrumb,
	body.accountLoginModalOpen .tempFixed,
	body.accountLoginModalOpen .insBreadcrumb,
	body.cartModalOpen .tempFixed,
	body.cartModalOpen .insBreadcrumb,
	body.commerceVariantModalOpen .tempFixed,
	body.commerceVariantModalOpen .insBreadcrumb,
	body.bkOptionsModalOpen .tempFixed,
	body.bkOptionsModalOpen .insBreadcrumb {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	/* Dynamic viewport, safe areas and touch targets for existing dialogs. */
	.accountLoginModal,
	.bkOptionsModal,
	.commerceVariantModal {
		padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
	}
	.accountLoginModal {
		align-items: flex-start;
	}
	.accountLoginDialog,
	.bkOptionsDialog,
	.commerceVariantDialog {
		max-height: calc(100vh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
		max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	}
	.cartModalDialog {
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
	}
	.cartModalHeader {
		padding-top: calc(13px + env(safe-area-inset-top, 0px));
	}
	.cartModalFooter {
		padding-bottom: calc(17px + env(safe-area-inset-bottom, 0px));
	}
	.cartModalQuantity {
		height: 46px;
	}
	.cartModalQuantityButton {
		width: 44px;
		height: 44px;
		font-size: 12px;
	}
	input.cartModalQuantityInput {
		flex-basis: 48px;
		width: 48px;
		min-width: 48px;
		height: 44px;
		font-size: 16px;
		line-height: 44px;
	}
	.cartModalRemove,
	.cartModalContinue {
		min-height: 44px;
	}
	.accountLoginClose,
	.bkOptionsClose,
	.cartModalClose,
	.commerceVariantClose {
		width: 44px;
		height: 44px;
		min-width: 44px;
	}
	.accountLoginField input,
	.commerceVariantSelect,
	.commerceVariantQuantityInput {
		font-size: 16px;
	}

	/* Touch-first product card action: keep one direct commerce action without hover. */
	.pdLoopAction {
		display: block;
		top: auto;
		right: 8px;
		bottom: 8px;
		width: 44px;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
	.pdLoopAction .listAction {
		overflow: visible;
	}
	.pdLoopAction .btnLoop {
		display: none;
	}
	.pdLoopAction .btnLoop.add-cart {
		display: inline-flex;
		width: 44px;
		height: 44px;
		margin: 0;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		background: rgba(20, 24, 29, .82);
	}
	.pdLoopAction .btnLoop.add-cart:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}

@media screen and (max-width: 370px) {
	.mobileHeaderToolbar {
		grid-template-columns: minmax(48px, 1fr) auto;
		padding-right: 4px;
		padding-left: 4px;
	}
	.mobileHeaderLogo {
		padding-right: 3px;
		padding-left: 3px;
	}
	.mobileHeaderLogo img {
		max-height: 31px;
	}
	.homeSupportLinks {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	#headerSearch,
	#headerMenu,
	.homeSupportPanel,
	.mobileSubmenuToggle i {
		transition: none !important;
	}
}