/* ==========================================================================
   FUGA — thanh thông báo, header, mega menu, menu Trợ giúp, menu điện thoại
   ========================================================================== */
.fg-headgroup {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	background: var(--fg-black);
	color: var(--fg-white);
}

/* Thanh thông báo ----------------------------------------------------- */
.fg-announce {
	display: flex; align-items: center; justify-content: center; gap: 40px;
	padding: 12.8px 96px;
	background: var(--fg-black); color: var(--fg-white);
}
.fg-announce__arrow { display: flex; align-items: center; height: 19.6px; flex: none; }
.fg-announce__arrow .fg-icon { width: 10px; height: 10px; }
.fg-announce__list { display: grid; align-items: center; width: 560px; max-width: 100%; min-width: 0; }
.fg-announce__msg {
	grid-area: 1 / 1;
	font-size: 12px; line-height: normal; letter-spacing: .48px; text-align: center;
	opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.fg-announce__msg.is-active { opacity: 1; visibility: inherit; }
.fg-announce__msg a {
	background: linear-gradient(to right, currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size .3s var(--fg-ease);
}
.fg-announce__msg a:hover { background-size: 0 1px; background-position: 100% 100%; }
@media (max-width: 1399px) { .fg-announce { padding-inline: 32px; } }
@media (max-width: 699px) {
	.fg-announce { gap: 12px; padding: 11.2px 20px; }
	.fg-announce__list { width: auto; flex: 1; }
}

/* Header -------------------------------------------------------------- */
.fg-header {
	position: relative;
	display: grid;
	grid: "logo nav actions" / auto minmax(0, 1fr) auto;
	align-items: center; justify-content: center;
	column-gap: 176px;
	padding: 16px var(--fg-gutter);
	background: var(--fg-black); color: var(--fg-white);
	letter-spacing: normal;
}
.fg-header__logo { grid-area: logo; justify-self: start; line-height: 0; }
.fg-header__logo-img { width: var(--fg-logo-w, 155px); max-width: none; height: auto; }

.fg-header__nav { grid-area: nav; display: flex; align-items: center; min-width: 0; }
.fg-nav { display: flex; align-items: center; gap: 60px; }
.fg-nav__link { display: inline-block; padding-block: 2px; font-size: 16px; line-height: 20px; white-space: nowrap; }

.fg-header__actions { grid-area: actions; justify-self: end; display: flex; align-items: center; }
.fg-actions { display: flex; align-items: center; gap: 60px; }
.fg-actions__item { position: relative; }
.fg-actions__link { display: flex; align-items: center; font-size: 16px; line-height: 20px; white-space: nowrap; }
.fg-actions__cart { position: relative; }
.fg-cart-count {
	position: absolute; top: -6px; right: -12px;
	min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
	background: var(--fg-white); color: var(--fg-black);
	font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; text-align: center;
}
.fg-cart-count.is-empty { display: none; }

/* Mega menu: toàn chiều ngang, chữ bắt đầu thẳng hàng với menu chính (JS đặt --fg-mega-start) */
.fg-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	padding: 36px 88px 60px var(--fg-mega-start, 88px);
	background: var(--fg-black); color: var(--fg-white);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .2s, visibility .2s;
	overflow-x: hidden;
	z-index: 45;
}
.fg-nav__item.is-open > .fg-mega { opacity: 1; visibility: visible; pointer-events: auto; }
.fg-mega__cols { display: flex; align-items: flex-start; gap: 100px; }
.fg-mega__col { display: flex; flex-direction: column; flex: none; }
/* Cột rộng bằng tiêu đề cột; link dài hơn được tràn sang khoảng trống giữa các cột */
.fg-mega__list { contain: inline-size; }
.fg-mega__heading { display: block; margin-bottom: 10px; font-size: 16px; line-height: 20px; letter-spacing: .56px; white-space: nowrap; }
.fg-mega__link { display: block; font-size: 14px; line-height: 32px; white-space: nowrap; transition: opacity .2s; }
.fg-mega__heading:hover, .fg-mega__link:hover { opacity: .8; }

/* Menu Trợ giúp */
.fg-help {
	position: absolute; left: 50%; top: calc(100% + var(--fg-help-gap, 24px));
	transform: translateX(-50%);
	padding: 52px 36px 36px;
	background: var(--fg-black); color: var(--fg-white);
	opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
	z-index: 50;
}
.fg-help::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--fg-help-gap, 24px); }
.fg-actions__help.is-open .fg-help { opacity: 1; visibility: visible; }
.fg-help__list { display: grid; gap: 15px; }
.fg-help__link { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 20px; letter-spacing: .56px; white-space: nowrap; transition: opacity .2s; }
.fg-help__link:hover { opacity: .7; }
.fg-help__link .fg-icon { flex: none; }

/* Chữ menu dài (vd tiếng Việt) không đủ chỗ: JS thu khoảng cách (is-tight), vẫn thiếu thì chuyển sang
   kiểu điện thoại (is-compact). Dưới 1000px luôn là kiểu điện thoại. */
.fg-header.is-tight { column-gap: 40px; }
.fg-header.is-tight .fg-nav, .fg-header.is-tight .fg-actions { gap: 28px; }
.fg-header.is-compact .fg-only-desk { display: none !important; }
.fg-header:not(.is-compact) .fg-only-mob { display: none !important; }
@media (max-width: 999px) {
	.fg-header .fg-only-desk { display: none !important; }
	.fg-header:not(.is-compact) .fg-only-mob { display: revert !important; }
}
@media (max-width: 999px) {
	.fg-header { grid: "logo actions" / auto minmax(0, 1fr); column-gap: 20px; padding-block: 20px; }
	.fg-header__nav { display: none; }
	.fg-actions { gap: 24px; }
	.fg-actions__link .fg-icon { width: 24px; height: 24px; }
	.fg-cart-count { top: -4px; right: -8px; }
}
.fg-header.is-compact { grid: "logo actions" / auto minmax(0, 1fr); column-gap: 20px; padding-block: 20px; }
.fg-header.is-compact .fg-header__nav { display: none; }
.fg-header.is-compact .fg-actions { gap: 24px; }
.fg-header.is-compact .fg-actions__link .fg-icon { width: 24px; height: 24px; }
@media (max-width: 699px) {
	.fg-header__logo-img { width: var(--fg-logo-w-m, 100px); }
}

/* Menu điện thoại ------------------------------------------------------ */
.fg-mdrawer {
	letter-spacing: normal;
	position: fixed; left: 0; right: 0; bottom: 0;
	top: var(--fg-head-bottom, 106px);
	border-top: 1px solid #333;
	background: var(--fg-black); color: var(--fg-white);
	overflow: hidden;
	z-index: 39;
}
.fg-mdrawer__panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--fg-black); }
.fg-mdrawer__body { flex: 1 0 auto; padding: 20px 28px; }
.fg-mdrawer__link {
	display: flex; width: 100%; align-items: center; justify-content: space-between;
	padding: 24px 0;
	font-size: 14px; line-height: 19.6px; letter-spacing: .5px; text-transform: uppercase;
}
.fg-mdrawer__footer { padding: 20px; border-top: 1px solid #eee; }
.fg-mdrawer__social { padding: 15px 0; border-top: 1px solid var(--fg-ink); }
.fg-mdrawer__social .fg-social { justify-content: center; gap: 16px; }
.fg-mdrawer__account { padding: 16px 24px; border-top: 1px solid var(--fg-ink); }
.fg-mdrawer__account a { display: block; font-size: 12px; line-height: normal; letter-spacing: .48px; }

.fg-mdrawer__subhead {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 28px; border-bottom: 1px solid var(--fg-ink);
	background: var(--fg-black);
}
.fg-mdrawer__back { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; }
.fg-mdrawer__back .fg-icon { width: 28px; height: 28px; }
.fg-mdrawer__subtitle { flex: 1; text-align: center; font-size: 16px; line-height: 22.4px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.fg-mdrawer__spacer { width: 40px; flex: none; }
.fg-mdrawer__accordions { display: flex; flex-direction: column; }
.fg-mdrawer__summary {
	display: flex; align-items: center; justify-content: space-between;
	padding: 24px 28px;
	font-size: 14px; line-height: 19.6px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.fg-mdrawer__sign { width: 24px; text-align: center; font-size: 20px; line-height: 20px; font-weight: 400; }
.fg-mdrawer__sign::before { content: "+"; }
.fg-mdrawer__acc[open] .fg-mdrawer__sign::before { content: "\2212"; }
.fg-mdrawer__sublist { padding: 0 36px; }
.fg-mdrawer__sublist li { border-bottom: 1px solid rgba(26, 26, 26, .3); }
.fg-mdrawer__sublink { display: flex; padding: 20px 0; font-size: 13px; line-height: 18.2px; letter-spacing: .3px; text-transform: uppercase; }
.fg-mdrawer__helplist { padding: 20px 24px; }
.fg-mdrawer__helplist li { border-bottom: 1px solid var(--fg-ink); }
.fg-mdrawer__helplink { display: flex; align-items: center; gap: 12px; padding: 20px 0; font-size: 14px; line-height: 19.6px; }
.fg-mdrawer__helplink .fg-icon { flex: none; }

body.fg-lock { overflow: hidden; }