/* ==========================================================================
   Mega menu dựng bằng UX Block ([bed_mega] + [bed_mega_col] / [bed_mega_products] / [bed_mega_banner])
   Dùng lại class .bed-mega__* của header; thêm style độc lập để xem trước đúng trong UX Builder.
   ========================================================================== */
.bed-mega__inner > .bed-mega-block { flex: 1 1 100%; min-width: 0; }
.bed-mega-block {
	display: flex; gap: 12px; align-items: stretch; width: 100%; box-sizing: border-box;
	background: #fff; color: var(--bed-fg); font-family: var(--bed-font-body);
}
.bed-mega-block .bed-mega__cols {
	flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 32px 0; list-style: none;
	display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px;
	max-height: min(400px, calc(100vh - 160px)); overflow: hidden auto; align-content: start; background: transparent;
}
.bed-mega-block .bed-mega__col { margin: 0; list-style: none; }
.bed-mega-block .bed-mega__title { display: block; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--bed-fg); }
.bed-mega-block .bed-mega__title a, .bed-mega-block .bed-mega__title span { padding: 0; color: inherit; }
.bed-mega-block .bed-mega__col > ul { margin: 16px 0 0; padding: 0; list-style: none; }
.bed-mega-block .bed-mega__link { display: list-item; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; }
.bed-mega-block .bed-mega__link + .bed-mega__link { margin-top: 12px; }
.bed-mega-block .bed-mega__link a { padding: 0 0 3px; color: var(--bed-fg); }
.bed-mega-block .bed-mega__link a:hover { color: var(--bed-link); }
.bed-mega-block .bed-mega__extra { flex: 0 1 auto; width: var(--bed-mega-extra, 33.3333%); padding: 20px 0; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bed-mega-block .bed-mega__banner img { display: block; width: 100%; height: auto; }
.bed-mega-block .bed-mega__banner a { display: block; }
.bed-mega-block .bed-mega__products { width: 100%; }
@media (max-width: 849px) { .bed-mega-block { flex-direction: column; } .bed-mega-block .bed-mega__extra { width: 100%; } }

/* Xem trước trong UX Builder / UX Block (khung phẳng: các con xếp ngang) */
.bed-mega-block--builder { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 32px; padding: 24px 32px; }
.bed-mega-block--builder .bed-mega__col--preview { flex: 1 1 160px; min-width: 140px; }
.bed-mega-block--builder .bed-mega__col--preview ul { margin: 12px 0 0; padding: 0; list-style: none; }
.bed-mega-block--builder .bed-mega__col--preview li { margin: 0 0 10px; }
.bed-mega-block--builder .bed-mega__extra--preview { flex: 1 1 280px; max-width: 420px; padding: 0; }

/* Flatsome menu item options → Design "Default (custom size)": bề rộng nội dung mega (px) */
.bed-mega--custom .bed-mega__inner { max-width: var(--bed-mega-w); margin-left: auto; margin-right: auto; }

/* Cột danh mục có ảnh tròn ([bed_mega_cats]) + tiêu đề IN HOA — mega "Sản phẩm" kiểu Wolf Yoga */
.bed-mega-block .bed-mega__cats { flex: 0 0 var(--bed-mega-cats, 25%); max-width: var(--bed-mega-cats, 25%); box-sizing: border-box; padding: 24px 16px 24px 0; border-right: 1px solid var(--bed-border, #e8e0d6); min-width: 0; max-height: min(460px, calc(100vh - 160px)); overflow: hidden auto; }
.bed-mega-block .bed-mega__catstitle { margin: 0 0 12px; font-size: 14px; font-weight: 700; line-height: 20px; text-transform: uppercase; letter-spacing: .04em; color: var(--bed-fg); }
.bed-mega-block .bed-mega__catlist { margin: 0; padding: 0; list-style: none; }
.bed-mega-block .bed-mega__catlist li { margin: 0; list-style: none; }
.bed-mega-block .bed-mega__catlist li + li { margin-top: 8px; }
.bed-mega-block .bed-mega__catlist a { display: flex; align-items: center; gap: 12px; padding: 4px 0; color: var(--bed-fg); }
.bed-mega-block .bed-mega__catlist a:hover .bed-mega__catname b { color: var(--bed-link); }
.bed-mega-block .bed-mega__catimg { flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: var(--bed-bg-soft, var(--bed-accent)); display: block; }
.bed-mega-block .bed-mega__catimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bed-mega-block .bed-mega__catname { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bed-mega-block .bed-mega__catname b { font-size: 15px; font-weight: 600; line-height: 22px; transition: color .2s; }
.bed-mega-block .bed-mega__catname small { font-size: 13px; line-height: 18px; color: var(--bed-muted, #6b6b6b); }
.bed-mega-block .bed-mega__catall a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--bed-link); text-decoration: underline; }
.bed-mega-block.has-cats .bed-mega__cols { padding-left: 16px; }
.bed-mega-block.is-upper .bed-mega__title { text-transform: uppercase; font-size: 14px; letter-spacing: .03em; font-weight: 700; }
@media (max-width: 849px) { .bed-mega-block .bed-mega__cats { flex: 1 1 auto; max-width: 100%; border-right: 0; } }

/* Mega kiểu tab ([bed_mega_tab]): cột trái là danh sách tab, bên phải là bảng nhóm liên kết + banner của tab đang chọn (mẫu OH! Cosmetics: 1000×400) */
.bed-mega-block.has-tabs { display: flex; align-items: stretch; gap: 0; width: 100%; max-width: 1000px; margin: 0; min-height: 400px; }
.bed-mega-block .bed-mega__tabs { flex: 0 0 var(--bed-mega-tabs, 200px); width: var(--bed-mega-tabs, 200px); margin: 0; padding: 0; list-style: none; border-right: 1px solid var(--bed-n50, #f0efed); box-sizing: border-box; }
.bed-mega-block .bed-mega__tab { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--bed-n50, #f0efed); }
.bed-mega-block .bed-mega__tab > a, .bed-mega-block .bed-mega__tab > span { position: relative; display: block; padding: 10px 30px 10px 10px; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--bed-fg); cursor: pointer; }
.bed-mega-block .bed-mega__tab > a::after, .bed-mega-block .bed-mega__tab > span::after { content: ''; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.bed-mega-block .bed-mega__tab.is-active > a, .bed-mega-block .bed-mega__tab.is-active > span { color: var(--bed-primary); background: var(--bed-accent); }
.bed-mega-block .bed-mega__panels { position: relative; flex: 1 1 auto; min-width: 0; }
.bed-mega-block .bed-mega__tabpanel { display: none; height: 100%; gap: 12px; box-sizing: border-box; padding: 0 0 0 16px; }
.bed-mega-block .bed-mega__tabpanel.is-active { display: flex; }
.bed-mega-block.has-tabs .bed-mega__cols { padding: 16px 0; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); max-height: none; }
.bed-mega-block.has-tabs .bed-mega__title { font-size: 16px; }
.bed-mega-block.has-tabs .bed-mega__col > ul { margin-top: 8px; }
.bed-mega-block.has-tabs .bed-mega__link { font-size: 13px; line-height: 20px; }
.bed-mega-block.has-tabs .bed-mega__link + .bed-mega__link { margin-top: 6px; }
.bed-mega-block.has-tabs .bed-mega__extra { flex: 0 0 210px; width: 210px; padding: 0; justify-content: flex-end; }
.bed-mega-block.has-tabs .bed-mega__banner img { height: 100%; object-fit: cover; }
.bed-mega__tabpreview { margin: 0 0 12px; }
@media (max-width: 849px) { .bed-mega-block.has-tabs { flex-direction: column; } .bed-mega-block .bed-mega__tabs { width: 100%; flex-basis: auto; } }