/** menu toggle button **/

.toggle-nav, .icon-bar {
	width: 24px;
	flex-direction: column;
	height: 20px;
	justify-content: space-between;
	border-radius: 3px
}

.toggle-nav .bar, .icon-bar .bar {
	height: 3px;
	background: #333;
	width: 24px;
	border-radius: 1px
}

.toggle-nav .bar:nth-child(2), .icon-bar .bar:nth-child(2) {
	width: 86% !important
}

.icon-bar {
	cursor: auto !important
}

.icon-bar .bar {
	background: var(--text-color);
	height: 2px
}

.icon-bar .bar:nth-child(2) {
	width: 20px
}
.header-icon {
  display: block;
  width: 44px;
}





/** end menu toggle button **/
/** mid header  **/
.mid-header {
	background: var(--header-background);
	padding: 10px 0px
}

.mid-header .logo-wrapper {
	max-width: 248px;
	display: block
}
.mid-header .toggle-nav {
	width: 24px;
	flex-direction: column;
	height: 20px;
	justify-content: space-between;
	border-radius: 3px
}

.mid-header .toggle-nav .bar {
	height: 3px;
	background: var(--primary-color);
	width: 24px;
	border-radius: 3px
}

.mid-header .toggle-nav .bar:nth-child(2) {
	width: 75%
}


@media (max-width:992px) {
	.mid-header .logo-wrapper {
		margin: auto
	}

}

/** end mid header  **/
/** header right **/


.header-right {
	font-size: 14px
}

.header-right .fas {
	font-size: 24px
}

.header-right a {
	color: var(--header-color);
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
}

.header-right a:hover {
	text-decoration: none;
}

/** end header right **/

/** mini cart **/

.mini-cart .no-item {
	text-align: center
}

.mini-cart .no-item p {
	margin: 0 auto
}

.mini-cart>a .count_item {
	position: absolute;
	display: inline-block;
	background: var(--primary-color);
	border-radius: 999px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: #000;
	font-size: 12px;
	top: -5px;
	right: 0
}

@media (max-width:575px) {
	.mini-cart>a .count_item {
		font-size: 9px
	}

}
.mini-cart .no-item {
	text-align: center
}

.mini-cart .no-item p {
	margin: 0 auto
}

.mini-cart>a .count_item {
	position: absolute;
	display: inline-block;
	background: var(--primary-color);
	border-radius: 999px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: #000;
	font-size: 12px;
	top: -5px;
	right: 0
}

@media (max-width:575px) {
	.mini-cart>a .count_item {
		font-size: 9px
	}

}
@media (max-width: 991px) {
	.mini-cart > a {
		display: flex;
		justify-content: flex-end;
		padding-right: 15px;
        padding: 0 5px;
	}
}

@media (max-width: 767px) {
	.mini-cart > a {
		position: relative;
	}
	.mini-cart .count_item{
		position: absolute;
		right: -12px;
		top: -5px;
		font-size: 10px;
	}
}
/** end mini-cart **/


/** search **/

#search-header .custom-input-group {
	z-index: 1000
}

#search-header .custom-input-group .input-group-field {
	background: #f1f1f1
}

@media (max-width:991px) {
	#search-header .custom-input-group .input-group-field {
		height: 35px;
		font-size: 12px
	}

}

@media (max-width:991px) {
	#search-header {
		order: 1;
		margin-top: 10px
	}

}

@media (max-width:375px) {
	#search-header .custom-input-group .input-group-field {
		padding-right: 45px
	}

	#search-header .btn {
		padding: 4px 10px
	}

}

#search-header .search-dropdow .search__list {
	display: block !important;
	white-space: nowrap;
	overflow: auto
}

#search-header .search-dropdow .search__list>li {
	display: inline-block
}
.search-overlay {
	position: fixed;
	z-index: -1;
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100vh;
	top: 0 !important;
	left: 0;
	opacity: 0;
	visibility: hidden
}

.search-overlay.active {
	opacity: 1;
	z-index: 999;
	visibility: visible
}

.search__list a {
	font-size: 12px;
	color: #6c757d
}

.search__list a:hover {
	color: var(--header-color)
}
/** end search **/

/** subheader **/
.subheader {
	--subheader-padding: 0px;
	background: var(--subheader-background);
	color: var(--subheader-color);
	display: flex;
	align-items: center;
	padding-top: 10px
}

.subheader .toogle-nav-wrapper {
	padding: 16px 0 20px;
	border-radius: 5px 5px 0px 0px;
	border: 1px;
	color: var(--subheader-background);
	background: var(--subheader-color);
	font-weight: 600
}

.subheader .navigation-wrapper {
	font-weight: 400
}

.subheader .toogle-nav-wrapper .icon-bar {
	width: 20px;
	height: 18px;
	margin-left: 15px
}

.subheader .toogle-nav-wrapper .icon-bar .bar {
	background: var(--subheader-background);
	width: 20px
}

@media (max-width:991px) {
	.subheader {
		display: none
	}

}

.subheader .container {
	display: grid;
	grid-template-columns: calc(20% - 24px) 1fr;
	justify-content: space-between;
	align-items: center;
	grid-gap: 15px
}

@media (max-width:1024px) {
	.subheader .container {
		grid-template-columns: calc(25% - 24px) 1fr
	}

}
.subheader .container>* {
	padding-bottom: 8px
}
.shop-policises {
	justify-content: flex-start
}

.shop-policises li {
	display: flex;
	align-items: center
}

.shop-policises li+* {
	margin-left: 15px
}

.shop-policises div {
	width: 40px;
	height: 40px;
	padding: 4px;
	margin-right: 6px;
	display: flex;
	align-items: center;
	justify-content: center
}

@media (max-width:991px) {
	.shop-policises div {
		width: 32px;
		height: 32px
	}

}

.shop-policises .link {
	font-size: 16px
}

@media (min-width:992px) {
	.shop-policises .link {
		color: var(--subheader-color)
	}

	.shop-policises .link:hover {
		color: var(--secondary-color)
	}

}

/** end subheader **/
/** ega-header **/
.header_sticky {
	position: fixed;
	transform: translateY(-120px);
	top: 0px !important;
	left: 0;
	width: 100%;
	z-index: -1;
	transition: transform .3s ease-out;
	box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.4);
	opacity: 0;
	background: #fff
}

.header_sticky.active {
	z-index: 1000;
	transform: translateY(0);
	opacity: 1
}

.header_sticky .mid-header {
	font-size: 14px;
	padding: 0px
}

.header_sticky .mid-header:after {
	content: none !important
}

.header_sticky .toogle-nav-wrapper {
	margin: -5px 0px
}

.header_sticky .toogle-nav-wrapper:hover ~ .sticky-overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	background: rgba(0, 0, 0, 0.3);
	left: 0;
	top: 0
}

.header_sticky .toogle-nav-wrapper .navigation-wrapper {
	margin-top: 0
}

.header_sticky .navigation {
	--nav-height: 75vh
}

.header_sticky #search-header {
	order: 0 !important;
	margin: 0 !important
}


.ega-header:not(.header_sticky) {
	top: 0;
	position: sticky;
	position: -webkit-sticky;
	z-index: 1000;
	background: #fff;
	/* VIETTA: header chính có border-bottom cố định theo mẫu vietta.pages.dev, không
	   chỉ dựa vào box-shadow lúc cuộn (.ega-header.active bên dưới) */
	border-bottom: 1px solid var(--border-color, #eee);
}

.ega-header.active {
	box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.4)
}

/* VIETTA: cột phải (.header-right) giờ chứa thêm .header-contact (hotline + nút CTA)
   nên không còn vừa trong 250px cố định như trước — đổi sang auto để co giãn theo
   nội dung thật, tránh đè lên menu chính. Cột giữa thêm minmax(0, 1fr) để chắc chắn
   menu co lại thay vì tràn ra ngoài khi cột phải giãn rộng. */
.ega-header .header-wrap {
	height: 64px;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

/* VIETTA 2026-08-16: logo ảnh (logo.png đã thay bằng file "logo VIETTA") — giới hạn
   chiều cao cho vừa header 64px, width co theo tỷ lệ, không kéo giãn méo.
   FIX 2026-08-16b: 40px -> 62px vì khách báo logo quá nhỏ + muốn logo vừa chiều cao
   thanh menu (mục menu cao ~61px, header 65px — kiểm chứng Playwright 1280px). */
.ega-header .logo-wrapper .logo-img {
	height: 62px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

/* VIETTA: header-wrap dùng chung class .container (max-width 960px/1140px như mọi
   container khác trên site — xem assets/bootstrap-lite.css) nhưng từ khi có thêm
   .header-contact (hotline + CTA), menu chính (Trang chủ/Giới thiệu/.../Kiến Thức)
   không đủ chỗ hiển thị hết trên 1 hàng, bị JS cắt bớt + hiện mũi tên prev/next.
   Nới riêng max-width của .header-wrap (không đụng .container dùng ở chỗ khác) để
   có thêm chỗ cho menu. */
@media (min-width:992px) {
	.ega-header .header-wrap.container {
		max-width: 1080px;
	}
}
@media (min-width:1200px) {
	.ega-header .header-wrap.container {
		max-width: 1320px;
	}
}

.ega-header .header-wrap .header-right {
	display: flex;
	justify-content: flex-end;
  gap: 6px;
	align-items: center;
}

.ega-header .header-wrap .header-right__icons {
	display: grid;
	grid-template-columns: var(--header-grid-template);
	text-align: center
}
.header-icon img {
  max-width: 30px;
}

.ega-header .header-wrap .header-right__icons .icon {
	font-size: 32px
}

.ega-header .header-wrap .header-right__icons .icon-action__search {
	cursor: pointer
}

.ega-header .header-wrap .header-right__icons #icon-account {
	position: relative
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action {
	position: absolute;
	background: #333;
	border-radius: 5px;
	color: #fff;
	transition-duration: .3s;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	visibility: hidden;
	text-align: left;
	left: 50%;
	transform: translateX(-50%);
	top: calc(100% + 10px);
	width: 95px
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action a {
	display: block;
	padding: 7px 8px
}
.ega-header .header-wrap .header-right__icons #icon-account .account-action a:hover {
	background: #6666;
}
.ega-header .header-wrap .header-right__icons #icon-account .account-action:before {
	background: transparent;
	content: '';
	position: absolute;
	bottom: 100%;
	height: 10px;
	left: 0;
	width: 100%
}

.ega-header .header-wrap .header-right__icons #icon-account .account-action:after {
	background: #333333;
	content: '';
	height: 14px;
	position: absolute;
	transform: rotate(45deg);
	width: 14px;
	z-index: -1;
	left: calc(50% - 7px);
	top: -7px
}

.ega-header .header-wrap .header-right__icons #icon-account:hover .account-action {
	opacity: 1;
	visibility: visible;
	z-index: 99;
}


.ega-header .mega-menu-content {
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	margin-top: 13px;
	padding: 5px 58px 10px 40px;
	background-color: #fff;
	border: 1px solid #EEE;
	border-top: 2px solid #d9121f;
	height: auto;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	-webkit-transition: opacity .2s ease;
	-o-transition: opacity .2s ease;
	transition: opacity .2s ease
}

.ega-header .mega-menu-content .nav-links {
	--col-menu: 3;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(100% / var(--col-menu)), 1fr))
}

.ega-header .mega-menu-content .nav-links__item {
	padding: 5px 10px
}

.ega-header #primary-menu {
	display: flex;
	justify-content: center
}

.ega-header.header_sticky {
	position: fixed
}

.ega-header.header_sticky .header-wrap {
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	justify-items: center
}
.ega-header.header_sticky .ega-form-search {
	width: 650px!important;
	max-width: 100%;
}
#ega-smartsearch-search-suggestion{
	width: 640px!important
}
 
.ega-header.header_sticky .ega-header-layer {
	display: none;
	position: absolute;
	content: "";
	background: #000;
	width: 100%;
	height: 100vh;
	opacity: .6;
	left: 0;
}

.ega-header.header_sticky.active .ega-header-layer {
	display: block
}

header.ega-header .navigation--horizontal {
	width: 100%;
	position: initial;
	justify-content: center;
}

/* VIETTA: giảm cỡ chữ menu chính (mặc định thừa hưởng 1rem/16px từ body) để menu đủ
   chỗ hiện hết category trên 1 hàng, không bị JS cắt bớt + hiện mũi tên prev/next.
   Chỉ nhắm menu ngang chính trong header (.navigation--horizontal), không đụng menu
   "DANH MỤC SẢN PHẨM" ở .subheader (dùng chung markup .navigation nhưng là UI khác).
   FIX 2026-08-16: kèm padding ngang 10px (thay vì 15px mặc định của .navigation) để 6 mục
   (Trang chủ…Bảo Hành) vừa khít 1 hàng trong header — kiểm chứng Playwright 1280/1440/1920:
   menu hiển thị đủ, không còn class .overflow + mũi tên prev/next.
   FIX 2026-08-16b: giữ font 14px (cỡ gốc theme) — bản 13px bị khách báo chữ quá nhỏ. */
header.ega-header .navigation--horizontal .list-group-item>a {
	font-size: 14px;
	padding: 20px 10px;
}

/* VIETTA: highlight mục menu đang chọn (link.active, xem snippets/main-nav.bwt) — chỉ
   nhắm menu ngang chính trong header, cùng lý do scope như block font-size ở trên. */
header.ega-header .navigation--horizontal .list-group-item.active>a {
	color: var(--primary-color);
}
@media (min-width:1024px) {
	header.ega-header .navigation--horizontal .list-group-item.active>a:after {
		width: calc(100% - 30px);
	}
}

/* VIETTA: chevron dropdown menu chính — mặc định trỏ xuống, lật lên khi hover mở submenu.
   Override riêng cho .ega-header .navigation--horizontal, không đụng rule chung
   .navigation .list-group-item>a i (dùng chung với dropdown "DANH MỤC SẢN PHẨM" ở .subheader).
   FIX 2026-08-16: symbol #icon-arrow trong snippets/font-icon.bwt là mũi tên trỏ PHẢI (`>`).
   Bản cũ xoay CẢ wrapper <i> lẫn <svg> cùng góc → tổng 2 lần xoay (vd 90+90=180, 270+270=540)
   khiến mũi tên trỏ ngược/không lật khi hover. Chỉ xoay riêng <svg>: mặc định 90deg (→ trỏ xuống),
   hover 270deg (→ trỏ lên). Wrapper <i> để transform:none để không cộng dồn. */
@media (min-width:992px) {
	header.ega-header .navigation--horizontal .list-group-item>a i {
		transform: none;
		margin-top: 0;
	}
	header.ega-header .navigation--horizontal .list-group-item>a svg {
		transform: rotate(90deg);
		margin-top: 0;
		transition: transform .18s ease;
	}
	header.ega-header .navigation--horizontal .list-group-item:hover>a svg {
		transform: rotate(270deg);
	}
}

/* VIETTA: restyle hộp dropdown submenu (mega-menu con) theo mẫu vietta.pages.dev — bo góc
   dưới, viền dưới màu primary, canh giữa dưới mục trigger. Override riêng cho menu chính
   trong header, giữ nguyên style gốc .navigation .submenu.default cho .subheader dùng chung. */
header.ega-header .navigation--horizontal .submenu.default {
	/* Không đổi left/transform: .menu-item cố tình để position:initial (xem
	   .navigation .menu-item { position: initial } ở trên) để biến thể .mega-menu
	   tràn hết chiều rộng header — .submenu.default đang dựa vào "static position"
	   (left:auto/inherit) để tự nằm đúng dưới trigger của nó, đổi left:50% sẽ canh
	   giữa theo cả header thay vì theo trigger, đã kiểm chứng lại bằng render test. */
	border-radius: 0 0 6px 6px;
	border-top: 2px solid var(--primary-color);
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
header.ega-header .navigation--horizontal .submenu__col .submenu__item:not(.submenu__item--main) a:hover,
header.ega-header .navigation--horizontal .submenu__item:not(.submenu__item--main) a:hover {
	color: var(--primary-color);
}

/* VIETTA 2026-08-16: thu gọn cụm hotline + CTA (header-contact) trong header để
   menu ngang chiếm ~70% khung header — kiểm chứng Playwright: menu đủ 6 mục,
   không bị JS cắt. Giữ nguyên field Admin hotline_number/header_cta_text. */
.ega-header .header-contact {
	gap: 6px;
	margin-right: 8px;
}
.ega-header .header-hotline {
	padding: 0 10px;
	height: 34px;
	font-size: .85rem;
}
.ega-header .header-contact .header-cta-btn {
	padding: 9px 12px;
	font-size: .85rem;
}

header.ega-header .navigation--horizontal .navigation-arrows {
	display: none
}

header.ega-header .navigation--horizontal .navigation-arrows i {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

header.ega-header .navigation--horizontal .navigation-arrows i:not(.disabled):hover {
	background: rgba(238, 238, 238, 0.4);
	border-radius: 100%
}

header.ega-header .navigation--horizontal .navigation-arrows i.disabled {
	cursor: not-allowed;
	opacity: 0.3
}

header.ega-header .navigation-wrapper {
	overflow: hidden;
	max-height: 64px;
}

header.ega-header .navigation-wrapper.overflow+.navigation-arrows {
	display: flex;
	align-items: center
}

@media(max-width: 991px){
	.ega-header.header_sticky .header-wrap {
		grid-template-columns: 1fr;
		padding-left: 0px;
		padding-right: 0px
		
	}
	.ega-header.header_sticky #logo,.ega-header.header_sticky .header-right {
		display: none!important
	}

}
@media (max-width:991px) {
	.ega-header .header-wrap {
		padding: 0 15px;
		grid-template-columns: 40px auto 1fr;
    gap: 10px;
	}

	.ega-header .header-wrap .header-right__icons {
		width: auto;
		display: inline-grid;
		gap: 3px;
		grid-template-columns: repeat(2, 1fr);
	}
.header-icon {
  width: 36px;
}
.ega-header .header-wrap .header-right__icons img {
  max-width: 24px;
}
    .ega-header .header-wrap .header-right__icons.has-wishlist{
        grid-template-columns: repeat(3, 1fr);
    }

	.ega-header .header-wrap #logo {
		text-align: center
	}
	#ega-smartsearch-search-suggestion, .ega-header.header_sticky .ega-form-search{
		width : 100%!important;
	}

	#ega-smartsearch-search-suggestion{
	width : calc(100% - 10px)!important
	}
}

/** end  ega-header **/
/** navigation **/

.navigation {
	--nav-height: 313px;
	min-height: 100%;
	overflow-x: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: 100%;
	width: 100%;
	
}

.navigation.overflow {
	overflow: hidden
}

.navigation::-webkit-scrollbar {
	display: none
}

.navigation .list-group-item {
	padding: 0px;
	border-bottom: 0px;
	background: transparent
}

.navigation .list-group-item:hover>a:after {
	filter: brightness(1.1)
}

.navigation .list-group-item>a {
	text-decoration: none;
	white-space: nowrap;
	display: flex;
	align-items: center;
	background: var(--main-menu-bg);
	color: var(--main-menu-color);
	padding: 20px 15px;
	position: relative;
	font-weight: 600;
}

.navigation .list-group-item>a:hover {
	color: var(--primary-color)
}

.navigation .list-group-item>a:after {
	background: var(--main-menu-color);
    background-color: currentColor;
    bottom: calc(1.25rem - 5px);
    content: "";
    height: 2px;
    left: 1rem;
    position: absolute;
	width: 0;
    transition: width .2s ease-in-out;
}
.navigation .list-group-item>a>img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    margin-right: 4px;
}
@media(min-width: 1024px){
.navigation .list-group-item:hover > a:after {
	width: calc(100% - 30px)
}
}
.navigation .list-group-item>a>span img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 4px;
	animation: pulsate 1s ease-in alternate;
	animation-iteration-count: infinite
}

.navigation .list-group-item>a i, .navigation .list-group-item>a svg {
	margin-left: 6px
}

@media (min-width:992px) {
	.navigation .list-group-item>a i, .navigation .list-group-item>a svg {
		transform: rotate(45deg);
		margin-top: -3px
	}

}

.header_sticky .navigation .list-group-item>a i, .header_sticky .navigation .list-group-item>a svg {
	transform: rotate(0deg)
}

.navigation .menu-item {
	position: initial
}

@media (min-width:992px) {
	.navigation .menu-item .submenu:hover, .navigation .menu-item a:hover + .submenu {
		display: block;
		z-index: 900
	}

}

.navigation .submenu {
	display: none;
	width: 100%;
	height: 320px;
	padding: 14px 20px;
	border-radius: 0px;
	position: absolute;
	bottom: 0px;
	top: 100%;
	left: 0;
	background: #fff;
	margin-left: 0px;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 5px 8px 0px;
	z-index: 1;
	overflow: auto;
	font-size: 1rem
}

.navigation .submenu__list {
	display: grid;
	/*grid-template-columns: repeat(auto-fill, minmax(calc(100% / var(--col-menu)), 1fr));*/
	grid-template-columns: repeat(var(--col-menu), 1fr);
	grid-gap: 10px  5px;
	padding: 0px;
	list-style: none
}

.navigation .submenu__col {
	display: flex;
	flex-direction: column;
	align-items: start;
	font-size: 1rem
}
.navigation .submenu__col .submenu__item{
	margin-bottom: 4px
}
.submenu__col .submenu__item:not(.submenu__item--main) a{
	color:#666666;
}
.submenu__col .submenu__item:not(.submenu__item--main) a:hover{
	color:var(--link-color);
}

.navigation .submenu__item--main {
	font-weight: 600;
		margin-bottom: 5px

}

.navigation .submenu.default {
	width: auto;
	bottom: initial;
	left: inherit;
	height: auto;
	width: 250px
}

.navigation .submenu.default .submenu__list {
	display: flex;
	flex-direction: column;
	alig-items: flex-start
}

/* VIETTA: đường kẻ phân cách trong submenu phẳng — Admin thêm 1 link tên "---" vào
   đúng vị trí cần chia trong linklist con (xem snippets/main-nav.bwt / main-nav-template.bwt) */
.navigation .submenu__divider {
	height: 1px;
	margin: 8px 0;
	background: var(--border-color, #eee);
	list-style: none;
}
.btn-live{
    border-radius: 5px;
    padding: 4px 10px 4px 22px;
    color: var(--header-live-color);
    border: 1px solid var(--header-live-color);
    background: transparent;
    outline: none;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    max-width: 130px;
    cursor: pointer!important;
    overflow: hidden;
    font-size: 13px;
}
 .btn-live:after {
    content: " ";
    background: var(--header-live-color);
    width: 8px;
    height: 8px;
    position: absolute;
    left: 7px;
    top: calc(50% - 4px);
    border-radius: 50%;
    animation: pulse-red 1.65s linear infinite;
}
@media (max-width:991px) {
  .btn-live {
    padding: 2px 5px 0px 20px;
  }
  .btn-live:after {
    left: 6px;
  }
}
@keyframes pulselive {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.6; }
  100% {
    opacity: 0.3; } 

}
@keyframes pulse-red {
	0% {
		transform: scale(0.8);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
	}
	
	100% {
		transform: scale(0.8);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
	}
}

/** end naviagtion **/

.modal-live {
    position: fixed;
    max-width: 45%;
    max-height: 75%;
    bottom: 5px;
  top: auto!important;
    left: 50%;
    z-index: 9999;
    transform: translateY(calc(100% + 5px)) translateX(-50%);
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.modal-live.opened {
    transform: translateY(0) translateX(-50%);
}

.modal-live .btn-close--live {
    position: absolute;
    right: -40px;
    top: 0;
    cursor: pointer;
    opacity: 0;
    padding: 0 10px;
}
.modal-live iframe {
    border-radius: 10px;
    display: block;
    width: 100%;
    height: 100%;
}
.modal-live .modal-live--inner {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.modal-live:hover .btn-close--live {
    opacity: 1;
}
@media(max-width: 767px){
  .ega-header .header-wrap #logo{
    width: 120px
  }
}

@media(max-width: 425px){
	.ega-header .header-wrap #logo{
	
		width: 100px
	}
}
.ae-lang-selected a{
  display: flex;
	white-space: nowrap;
padding : 0
}
img.ae-icon-left {
    object-fit: contain;
	width: 16px
}

.ae-type-dropdown{
	display: flex;
	align-items: center
}
.ae-lang-selected a  .ae-caret{
	width: auto
}
.ae-lang-selected a span{
		display :none
	}
	.ae-box-lang  a span{
		display :inline
	}
.ae-lang-selected a{
	justify-content: flex-start
}
#desktop-lang{
	min-width: 50px
}