@hhgtech/hhg-components 1.29.349-beta-2 → 1.29.350

package/build/{index-a22f8c1a.js → index-4ff1cefe.js}

@@ -1,51 +1,51 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-821c3e9d.js');
+var tslib_es6 = require('./tslib.es6-7610e8e4.js');
 var React = require('react');
-var index$7 = require('./index-53165e12.js');
-var index$2 = require('./index-7440d34d.js');
-var normalizeLink = require('./normalizeLink-0cf91164.js');
-var dataTransform = require('./dataTransform-2cc339d2.js');
+var index$9 = require('./index-44bf2ce1.js');
+var index$7 = require('./index-a701bc62.js');
+var index$2 = require('./index-a64f9470.js');
+var normalizeLink = require('./normalizeLink-ed076d28.js');
+var dataTransform = require('./dataTransform-c05d6333.js');
 var core$1 = require('@hhgtech/icons/core');
 var core = require('@mantine/core');
-var index$c = require('./index-a00fb687.js');
-var index$4 = require('./index-8ad47f17.js');
+var index$d = require('./index-2594073e.js');
+var index$4 = require('./index-d68340ee.js');
 var throttle = require('lodash/throttle');
-var index$b = require('./index-752ddc7e.js');
+var index$c = require('./index-4f002d8f.js');
 require('@mantine/dates');
-require('./index-bbc8a07f.js');
-var index$3 = require('./index-17762e76.js');
-require('./useMantineLocale-1c9f789e.js');
-var index = require('./index-0e2bb8f0.js');
-var index$a = require('./index-114fb2b3.js');
-require('./index.styles-1994f67b.js');
-require('./translationsContext-8c59d7af.js');
+var index$3 = require('./index-e89d6ea8.js');
+require('./useMantineLocale-5e96023c.js');
+var index = require('./index-e4b83bc5.js');
+var index$b = require('./index-0bb69a29.js');
+require('./index.styles-7eb232b9.js');
+require('./translationsContext-58c99c1f.js');
 require('@mantine/hooks');
-var utils = require('./utils-dd2ba00a.js');
-require('./other-927d70d3.js');
-require('./index-99266313.js');
-var constants = require('./constants-ea411d36.js');
+var utils = require('./utils-62602343.js');
+require('./other-5db125e1.js');
+require('./index-bb0404b6.js');
+var constants = require('./constants-68bbb45a.js');
 var styled = require('@emotion/styled');
-var navigationProfileButton = require('./index-e3a8f461.js');
-var store = require('./store-f338d5dc.js');
-var index$1 = require('./index-1edfb3c4.js');
-var togetherComponentGlobalContext = require('./utils-e0ea8233.js');
+var navigationProfileButton = require('./index-a2146821.js');
+var store = require('./store-3db31396.js');
+var index$1 = require('./index-9fba1db4.js');
+var togetherComponentGlobalContext = require('./utils-da16f93d.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var constants$1 = require('./constants-eb523cb6.js');
+var constants$1 = require('./constants-b45a0f52.js');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-4f8e7d82.js');
-var index$5 = require('./index-aeddd5e1.js');
-var useIsInit = require('./useIsInit-2e69dc0a.js');
+var index$6 = require('./index-0e3a9ce5.js');
+var index$5 = require('./index-1a670332.js');
+var useIsInit = require('./useIsInit-3a02c33f.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$8 = require('./index-a48132cf.js');
+var index$8 = require('./index-2dd85aab.js');
 var other = require('@hhgtech/icons/other');
 var formatString = require('string-format');
-var index$9 = require('./index-b9ef6287.js');
-var Locale = require('./Locale-f15df359.js');
+var index$a = require('./index-17123607.js');
+var Locale = require('./Locale-efeb4779.js');
 var debounce = require('lodash/debounce');
-var core$2 = require('./core-a47d2c1c.js');
+var core$2 = require('./core-493a4c1f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -149,6 +149,7 @@ const useNavConfig = ({ locale, projectType, siteType, enableBookingBtn, }) => {
         const enableNavEcom = siteType !== 'marryBaby' && index$2.ECOM_LOCALES.includes(locale);
         const enableProfileEcom = siteType !== 'marryBaby' && index$2.ECOM_LOCALES.includes(locale);
         const enableProfileMyHealth = true;
+        const enableNavVideo = index$2.VIDEO_LOCALES.includes(locale);
         const baseUrl = normalizeLink.getCurrentBaseUrl(locale, siteType === 'marryBaby');
         let fixBaseUrl = baseUrl;
         if (typeof window !== 'undefined') {
@@ -163,6 +164,7 @@ const useNavConfig = ({ locale, projectType, siteType, enableBookingBtn, }) => {
                 HOME_PAGE_URL: fixBaseUrl,
                 CARE_URL_FE: `${fixBaseUrl}/care`,
                 TOGETHER_URL_FE: `${fixBaseUrl}/community`,
+                VIDEO_URL_FE: `${fixBaseUrl}/videos`,
                 SSO_URL: ssoUrl,
                 TOGETHER_API: normalizeLink.getTogetherApiDomain(),
                 DISCOVER_API: normalizeLink.getDiscoverApiDomain(locale),
@@ -175,6 +177,7 @@ const useNavConfig = ({ locale, projectType, siteType, enableBookingBtn, }) => {
             enableNavTogether,
             enableNavEcom,
             enableProfileEcom,
+            enableNavVideo,
             enableProfileMyHealth,
             enableNavDiscover,
             enableNavHealthTools,
@@ -312,6 +315,9 @@ const StyledItemGridLeft = styled__default["default"].div `
   padding: 5px 15px;
   ${utils.MediaQueries.mbUp} {
     border-right: 1px solid #e4e8ec;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 `;
 const StyledItem$6 = styled__default["default"].a `
@@ -335,7 +341,6 @@ const StyledItem$6 = styled__default["default"].a `
   .name {
     font-size: 16px;
     font-weight: 400;
-    line-height: 24px;
   }
 
   &[data-theme='marryBaby']:hover,
@@ -357,17 +362,6 @@ const StyledItem$6 = styled__default["default"].a `
   }
 
   &[data-theme='marryBaby'] {
-    &.tarot-menu {
-      .icon {
-        background: linear-gradient(148deg, #fc5e9a 16.04%, #fe98bf 94.24%);
-      }
-      .name {
-        background: linear-gradient(91deg, #ea4f8a 1.24%, #fe8eb8 46.02%);
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
     .icon {
       display: flex;
       align-items: center;
@@ -480,40 +474,38 @@ const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuI
     const { t } = index$4.useTranslations();
     const theme = core.useMantineTheme();
     return (React__default["default"].createElement(StyledItemGridLeft, null,
-        React__default["default"].createElement(StyledHeading$1, null,
-            React__default["default"].createElement(index$6.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
-        menuItems.slice(0, 6).map((item, index$1) => {
-            const href = (item === null || item === void 0 ? void 0 : item.link)
-                ? (item === null || item === void 0 ? void 0 : item.link.startsWith('http'))
-                    ? item === null || item === void 0 ? void 0 : item.link
-                    : `${UrlFE}/${item === null || item === void 0 ? void 0 : item.link.split('/').filter(Boolean).join('/')}/`
-                : '/';
-            const isTarotItem = (item === null || item === void 0 ? void 0 : item.id) === 'game' && siteType === 'marryBaby';
-            return (React__default["default"].createElement(StyledItem$6, Object.assign({ className: `iconMenu ${isTarotItem ? 'tarot-menu' : ''}`, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": href, "data-is-heading-category": false, "data-active": item.id && item.id === activeItem, "data-is-mobile-tool": item.isMobileAppTool, href: href }, (!index$7.isInternalLink(href) && {
-                target: '_blank',
-            }), { "data-theme": siteType, key: index$1, onClick: onClosePopup }),
-                React__default["default"].createElement("div", { className: "icon" },
-                    React__default["default"].createElement("img", { loading: "lazy", alt: item.name, src: item.thumbnail || '/images/avatar.jpg', style: {
-                            width: 32,
-                            height: 32,
-                            maxWidth: 32,
-                            maxHeight: 32,
-                            overflow: 'hidden',
-                        } })),
-                React__default["default"].createElement(NewWrapper, { isNew: item.isNew },
-                    React__default["default"].createElement("div", { style: {
-                            padding: '0 0.4rem',
-                            paddingRight: item.isNew ? 10 : 0,
-                        } },
-                        React__default["default"].createElement("p", { className: "name" }, item.name),
-                        item.isMobileAppTool && (React__default["default"].createElement(index.Text, { size: "n1", color: theme.fn.primaryColor(), weight: (item === null || item === void 0 ? void 0 : item.id) && (item === null || item === void 0 ? void 0 : item.id) === activeItem
-                                ? 'semiBold'
-                                : 'regular' }, t('home.calcWithApp'))))),
-                item.isMobileAppTool && (React__default["default"].createElement(StyledIconNav, null,
-                    React__default["default"].createElement(Phone, { className: "phone-icon", size: 16 }))),
-                React__default["default"].createElement(StyledIconNav, { className: "arrow-icon" },
-                    React__default["default"].createElement("img", { src: index$3.CommonGAssets.getAssetPath('chevronRight.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" }))));
-        }),
+        React__default["default"].createElement("div", null,
+            React__default["default"].createElement(StyledHeading$1, null,
+                React__default["default"].createElement(index$6.Heading, { tag: siteType === 'marryBaby' ? 'h5' : 'h6', as: "p", fontWeight: "semibold" }, headingTitle)), menuItems === null || menuItems === void 0 ? void 0 :
+            menuItems.slice(0, 6).map((item, index$1) => {
+                const href = (item === null || item === void 0 ? void 0 : item.link)
+                    ? (item === null || item === void 0 ? void 0 : item.link.startsWith('http'))
+                        ? item === null || item === void 0 ? void 0 : item.link
+                        : `${UrlFE}/${item === null || item === void 0 ? void 0 : item.link.split('/').filter(Boolean).join('/')}/`
+                    : '/';
+                return (React__default["default"].createElement(StyledItem$6, Object.assign({ className: "iconMenu", "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": href, "data-is-heading-category": false, "data-active": item.id && item.id === activeItem, "data-is-mobile-tool": item.isMobileAppTool, href: href }, (!index$7.isInternalLink(href) && {
+                    target: '_blank',
+                }), { "data-theme": siteType, key: index$1, onClick: onClosePopup }),
+                    React__default["default"].createElement("div", { className: "icon" },
+                        React__default["default"].createElement("img", { loading: "lazy", alt: item.name, src: item.thumbnail || '/images/avatar.jpg', style: {
+                                width: 32,
+                                height: 32,
+                                maxWidth: 32,
+                                maxHeight: 32,
+                                overflow: 'hidden',
+                            } })),
+                    React__default["default"].createElement(NewWrapper, { isNew: item.isNew },
+                        React__default["default"].createElement("div", { style: {
+                                padding: '0 0.4rem',
+                                paddingRight: item.isNew ? 10 : 0,
+                            } },
+                            React__default["default"].createElement("p", { className: "name" }, item.name),
+                            item.isMobileAppTool && (React__default["default"].createElement(index.Text, { size: "n1", color: theme.fn.primaryColor(), weight: "regular" }, t('home.calcWithApp'))))),
+                    item.isMobileAppTool && (React__default["default"].createElement(StyledIconNav, null,
+                        React__default["default"].createElement(Phone, { className: "phone-icon", size: 16 }))),
+                    React__default["default"].createElement(StyledIconNav, { className: "arrow-icon" },
+                        React__default["default"].createElement("img", { src: index$3.CommonGAssets.getAssetPath('chevronRight.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" }))));
+            })),
         titleBtnViewMore && (React__default["default"].createElement(StyledViewMore$1, { "data-theme": siteType, style: { textDecoration: 'none' }, href: hrefViewMore, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": hrefViewMore },
             React__default["default"].createElement(StyledItemAll, { onClick: onClosePopup, "data-theme": siteType, "data-is-heading-category": false },
                 titleBtnViewMore,
@@ -523,7 +515,7 @@ const Categories = ({ hrefViewMore, titleBtnViewMore, UrlFE, onClosePopup, menuI
                             : index$3.CommonGAssets.getAssetPath('chevronRightActive.svg'), style: { width: '16px', height: '16px' }, loading: "lazy" })))))));
 };
 
-const StyledContainerItems$4 = styled__default["default"].div `
+const StyledContainerItems$5 = styled__default["default"].div `
   display: grid;
 
   grid-template-columns: repeat(3, 1fr);
@@ -848,7 +840,7 @@ const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
     const { t } = index$4.useTranslations();
     const { siteType } = React.useContext(NavigationContext);
     return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlightHospitals') }, spotlights.length !== 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(StyledContainerItems$4, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 3).map((s, index) => (React__default["default"].createElement(Item$4, { key: index, index: index, item: s })))),
+        React__default["default"].createElement(StyledContainerItems$5, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 3).map((s, index) => (React__default["default"].createElement(Item$4, { key: index, index: index, item: s })))),
         React__default["default"].createElement("div", { style: {
                 position: 'absolute',
                 bottom: '6px',
@@ -858,7 +850,7 @@ const CareSpotlights = ({ spotlights = [], hrefViewMore }) => {
                 React__default["default"].createElement(index$1.Button, { theme: siteType, className: "survey-contact-submit", size: "md" }, t('home.navigator.menu.care.homeButton')))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.care.noDatas.title'), description: t('home.navigator.menu.care.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.care.homeButton'), icon: index$3.CommonGAssets.getAssetPath('community.svg') }))));
 };
 
-const StyledContainerItems$3 = styled__default["default"].div `
+const StyledContainerItems$4 = styled__default["default"].div `
   display: grid;
 
   grid-template-columns: repeat(4, 1fr);
@@ -924,7 +916,7 @@ const Item$3 = ({ item, index = 0 }) => {
 const CategorySpotlights = ({ spotlightsList = [], hrefViewMore }) => {
     const { t } = index$4.useTranslations();
     const { configs: { statics }, } = React.useContext(NavigationContext);
-    return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlights'), viewMore: t('home.navigator.menu.spotlights.seeAll'), link: hrefViewMore, dataEventAction: "Spotlight See More Click" }, spotlightsList.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$3, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((spotlight, index) => (React__default["default"].createElement(Item$3, { key: index, index: index, item: {
+    return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlights'), viewMore: t('home.navigator.menu.spotlights.seeAll'), link: hrefViewMore, dataEventAction: "Spotlight See More Click" }, spotlightsList.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$4, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((spotlight, index) => (React__default["default"].createElement(Item$3, { key: index, index: index, item: {
             id: spotlight.id,
             link: statics.HOME_PAGE_URL + spotlight.permalink,
             title: spotlight.name,
@@ -932,7 +924,7 @@ const CategorySpotlights = ({ spotlightsList = [], hrefViewMore }) => {
         } }))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.category.noDatas.title'), description: t('home.navigator.menu.category.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.category.noDatas.cta'), icon: index$3.CommonGAssets.getAssetPath('Spotlight.svg') }))));
 };
 
-const StyledContainerItems$2 = styled__default["default"].div `
+const StyledContainerItems$3 = styled__default["default"].div `
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 48px;
@@ -1084,10 +1076,10 @@ const Item$2 = ({ post, index = 0 }) => {
 const CommunitySpotlights = ({ spotlights = [] }) => {
     const { configs: { statics }, } = React.useContext(NavigationContext);
     const { t } = index$4.useTranslations();
-    return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.trendingPosts'), viewMore: t('home.navigator.menu.trendingPosts.seeMore'), link: normalizeLink.normalizeLink(statics.TOGETHER_URL_FE), dataEventAction: "Together See More Click" }, spotlights.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$2, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 4).map((p, index) => (React__default["default"].createElement(Item$2, { index: index, post: p, key: p.id }))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.together.noPosts.title'), description: t('home.navigator.menu.together.noPosts.description'), link: `${statics.HOME_PAGE_URL}/community/`, cta: t('home.navigator.menu.together.noPosts.cta'), icon: index$3.CommonGAssets.getAssetPath('community.svg') }))));
+    return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.trendingPosts'), viewMore: t('home.navigator.menu.trendingPosts.seeMore'), link: normalizeLink.normalizeLink(statics.TOGETHER_URL_FE), dataEventAction: "Together See More Click" }, spotlights.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$3, null, spotlights === null || spotlights === void 0 ? void 0 : spotlights.slice(0, 4).map((p, index) => (React__default["default"].createElement(Item$2, { index: index, post: p, key: p.id }))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.together.noPosts.title'), description: t('home.navigator.menu.together.noPosts.description'), link: `${statics.HOME_PAGE_URL}/community/`, cta: t('home.navigator.menu.together.noPosts.cta'), icon: index$3.CommonGAssets.getAssetPath('community.svg') }))));
 };
 
-const StyledContainerItems$1 = styled__default["default"].div `
+const StyledContainerItems$2 = styled__default["default"].div `
   display: grid;
 
   grid-template-columns: repeat(3, 1fr);
@@ -1127,7 +1119,7 @@ const EcomSpotlights = ({ helpfulUrls = [], }) => {
     // const { siteType } = useContext(NavigationContext)
     if (!helpfulUrls.length)
         return null;
-    return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlightEcom') }, helpfulUrls.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$1, null, helpfulUrls === null || helpfulUrls === void 0 ? void 0 : helpfulUrls.slice(0, 5).map((s, index) => (React__default["default"].createElement(Item$1, { key: index, index: index, item: s }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null)
+    return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlightEcom') }, helpfulUrls.length !== 0 ? (React__default["default"].createElement(StyledContainerItems$2, null, helpfulUrls === null || helpfulUrls === void 0 ? void 0 : helpfulUrls.slice(0, 5).map((s, index) => (React__default["default"].createElement(Item$1, { key: index, index: index, item: s }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null)
     // <SpotlightNoData
     //   title={t('home.navigator.menu.ecom.noDatas.title')}
     //   description={t('home.navigator.menu.ecom.noDatas.description')}
@@ -1138,7 +1130,7 @@ const EcomSpotlights = ({ helpfulUrls = [], }) => {
     )));
 };
 
-const StyledContainerItems = styled__default["default"].div `
+const StyledContainerItems$1 = styled__default["default"].div `
   display: grid;
 
   grid-template-columns: repeat(3, 1fr);
@@ -1540,15 +1532,32 @@ const ToolSpotlights = ({ hrefViewMore, spotlightHealthTools = [] }) => {
     const marryBabyCardColor = ['pink', 'orange', 'green'];
     const { siteType } = React.useContext(NavigationContext);
     return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.spotlightTools') },
-        spotlightHealthTools.length !== 0 && (React__default["default"].createElement(StyledContainerItems, null, spotlightHealthTools === null || spotlightHealthTools === void 0 ? void 0 : spotlightHealthTools.slice(0, 3).map((item, index) => siteType === 'marryBaby' ? (React__default["default"].createElement(ItemMarryBaby, { key: index, index: index, item: item, color: marryBabyCardColor[index] })) : (React__default["default"].createElement(Item, { key: index, index: index, item: item }))))),
+        spotlightHealthTools.length !== 0 && (React__default["default"].createElement(StyledContainerItems$1, null, spotlightHealthTools === null || spotlightHealthTools === void 0 ? void 0 : spotlightHealthTools.slice(0, 3).map((item, index) => siteType === 'marryBaby' ? (React__default["default"].createElement(ItemMarryBaby, { key: index, index: index, item: item, color: marryBabyCardColor[index] })) : (React__default["default"].createElement(Item, { key: index, index: index, item: item }))))),
         spotlightHealthTools.length === 0 && (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.healthTools.noDatas.title'), description: t('home.navigator.menu.healthTools.noDatas.description'), link: hrefViewMore, cta: t('home.navigator.menu.healthTools.noDatas.cta'), icon: index$3.CommonGAssets.getAssetPath('community.svg') }))));
 };
 
+const StyledContainerItems = styled__default["default"].div `
+  display: grid;
+
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  ${utils.MediaQueries.tdDown} {
+    gap: 12px;
+    grid-template-columns: 1fr;
+  }
+`;
+
+const VideoSpotlights = ({ spotlightsList = [], layout = 'default', }) => {
+    const { t } = index$4.useTranslations();
+    const { configs: { statics }, } = React.useContext(NavigationContext);
+    return (React__default["default"].createElement(Spotlights, { title: t('home.navigator.menu.lastestVideos') }, spotlightsList.length !== 0 ? (React__default["default"].createElement(StyledContainerItems, null, spotlightsList === null || spotlightsList === void 0 ? void 0 : spotlightsList.slice(0, 4).map((video, index) => (React__default["default"].createElement(index$7.VideoItem, { key: index, data: Object.assign(Object.assign({}, video), { type: index$9.VideoType.SHORTS }), layout: layout === 'default' ? 'overlay' : 'horizon', redirectToLandingPage: true }))))) : (React__default["default"].createElement(SpotlightNoData, { title: t('home.navigator.menu.category.noDatas.title'), description: t('home.navigator.menu.category.noDatas.description'), link: `${statics.VIDEO_URL_FE}/`, cta: t('home.navigator.menu.category.noDatas.cta'), icon: index$3.CommonGAssets.getAssetPath('Spotlight.svg') }))));
+};
+
 const MenuServiceList = ({ closePopup, menuItems = [] }) => {
     var _a, _b;
     const { 
     // siteType,
-    ssrMenuContent: { categories, healthTools, care, together, ecom }, activeMenuService, configs: { statics }, locale, } = React.useContext(NavigationContext);
+    ssrMenuContent: { categories, healthTools, care, together, ecom, videos }, activeMenuService, configs: { statics }, locale, } = React.useContext(NavigationContext);
     const { t } = index$4.useTranslations();
     return (React__default["default"].createElement(StyledMasterMenuContainer, { id: 'categories-menu' },
         React__default["default"].createElement(StyledWrapper, null,
@@ -1557,12 +1566,15 @@ const MenuServiceList = ({ closePopup, menuItems = [] }) => {
             activeMenuService === 'tools' && (React__default["default"].createElement(ToolSpotlights, { spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}${((_a = index$2.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.HEALTH_TOOLS) || ''}` })),
             activeMenuService === 'care' && (React__default["default"].createElement(CareSpotlights, { spotlights: care === null || care === void 0 ? void 0 : care.spotlights, hrefViewMore: `${statics.CARE_URL_FE}/${(_b = constants$1.LOCALIZED_SLUGS[locale]) === null || _b === void 0 ? void 0 : _b.SPECIALTIES}` })),
             activeMenuService === 'together' && (React__default["default"].createElement(CommunitySpotlights, { spotlights: together === null || together === void 0 ? void 0 : together.spotlights })),
-            activeMenuService === 'ecom' && (React__default["default"].createElement(EcomSpotlights, { helpfulUrls: ecom === null || ecom === void 0 ? void 0 : ecom.helpfulUrls })))));
+            activeMenuService === 'ecom' && (React__default["default"].createElement(EcomSpotlights, { helpfulUrls: ecom === null || ecom === void 0 ? void 0 : ecom.helpfulUrls })),
+            activeMenuService === 'video' && (React__default["default"].createElement(VideoSpotlights, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights, layout: "stack" })))));
 };
 
 const HamburgerMenu = ({ menuItems }) => {
-    const { siteType, configs: { enableNavTarotGame }, } = React.useContext(NavigationContext);
-    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = navigationProfileButton.useCSSFocusPopupHelper({ enableNavTarotGame });
+    const { siteType,
+    // configs: { enableSearchBar },
+     } = React.useContext(NavigationContext);
+    const { containerRef, onContainerFocus, onContainerBlur, onButtonMouseDown, onClose, } = navigationProfileButton.useCSSFocusPopupHelper();
     return (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbDown" },
         React__default["default"].createElement("header", { className: styles$2.menuContainer },
             React__default["default"].createElement("div", { className: styles$2.menuIcon, ref: containerRef, role: "button", tabIndex: 0, onBlur: onContainerBlur, onFocus: onContainerFocus },
@@ -1681,7 +1693,7 @@ const StyledHeader = styled__default["default"].div `
   ${utils.MediaQueries.mbDown} {
     position: relative;
     height: 56px;
-    background-color: ${(props) => props.isMarryBaby ? 'transparent' : '#fff'};
+    background: white;
     gap: 2px;
   }
 
@@ -1990,6 +2002,26 @@ const checkAvailableSpotlight = (spotlight) => {
             return false;
     }
     return true;
+};
+const formatVideoItem = (data) => {
+    if (typeof data === 'undefined' || !data)
+        return null;
+    return {
+        id: data.ID || '',
+        videoId: data.video_id || '',
+        url: data.video_url || '',
+        title: data.video_title || '',
+        type: data.type || index$9.VideoType.VIDEO,
+        totalView: data.total_view || 0,
+        description: data.description || '',
+        createTime: data.create_time || '',
+        duration: data.duration || 0,
+        image: data.image || '',
+        imageMedium: data.image_medium || '',
+        imageThumbnail: data.image_thumbnail || '',
+        active: false,
+        articleLink: data.article_link || '',
+    };
 };
 
 var styles = {"gridContainer":"q3nL5cp","container":"_2DNf80G","closeWrapper":"Q-glX-n"};
@@ -2002,10 +2034,10 @@ const BtnClosePopup = ({ onClosePopup }) => {
 
 const PopupWrapper = ({ onClosePopup, isDisplay, children, isNavMenu, hideCloseBtn, }) => {
     return (React__default["default"].createElement("div", { className: "hhgcomp-navigation-popupwrapper-menuwrapper top-menu-health-tools", "data-is-display": !!isDisplay, "data-is-nav-menu": !!isNavMenu },
-        React__default["default"].createElement(index$9.Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
+        React__default["default"].createElement(index$a.Container, { className: "hhgcomp-navigation-popupwrapper-menuwrapper-child" },
             !hideCloseBtn && (React__default["default"].createElement("div", { className: styles.container },
                 React__default["default"].createElement(BtnClosePopup, { onClosePopup: onClosePopup }))),
-            React__default["default"].createElement(index$9.Container, { className: styles.gridContainer }, children))));
+            React__default["default"].createElement(index$a.Container, { className: styles.gridContainer }, children))));
 };
 
 const MenuCareList = ({ careSpecialties = [], isOpen, onClose, spotlights = [], }) => {
@@ -2080,10 +2112,35 @@ const MenuHealthToolsList = ({ locale, onClose, isOpen, spotlightHealthTools = [
         React__default["default"].createElement(ToolSpotlights, { spotlightHealthTools: spotlightHealthTools, hrefViewMore: hrefViewMore })));
 };
 
+const MenuVideoList = ({ spotlightsList = [], onClose, isOpen }) => {
+    const { t } = index$4.useTranslations();
+    const { locale, configs: { statics }, } = React.useContext(NavigationContext);
+    const listing = React.useMemo(() => [
+        {
+            name: t('home.navigator.menu.videos'),
+            link: `${statics.VIDEO_URL_FE}/video/`,
+            thumbnail: index$3.CommonGAssets.getAssetPath('nav-icons/video.svg'),
+        },
+        {
+            name: t('home.navigator.menu.shorts'),
+            link: `${statics.VIDEO_URL_FE}/short/`,
+            thumbnail: index$3.CommonGAssets.getAssetPath('nav-icons/short.svg'),
+        },
+        {
+            name: t('home.navigator.menu.podcasts'),
+            link: `${statics.VIDEO_URL_FE}/podcast/`,
+            thumbnail: index$3.CommonGAssets.getAssetPath('nav-icons/podcast.svg'),
+        },
+    ], []);
+    return (React__default["default"].createElement(PopupWrapper, { onClosePopup: onClose, isDisplay: isOpen, isNavMenu: true },
+        React__default["default"].createElement(Categories, { hrefViewMore: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/videos/`, UrlFE: statics.HOME_PAGE_URL, onClosePopup: onClose, titleBtnViewMore: t('home.navigator.menuItem.allVideos'), menuItems: listing, headingTitle: t('home.navigator.menuItem.videoCategories') }),
+        React__default["default"].createElement(VideoSpotlights, { spotlightsList: spotlightsList })));
+};
+
 const ItemNavButton = ({ item, color = 'blue' }) => {
     const [Lottie, setLottie] = React.useState();
     const [iconJson, setIconJson] = React.useState();
-    const { locale, ssrMenuContent: { categories, healthTools, care, together }, } = React.useContext(NavigationContext);
+    const { locale, ssrMenuContent: { categories, healthTools, care, together, videos }, } = React.useContext(NavigationContext);
     const { containerRef, onButtonMouseDown, onClose } = navigationProfileButton.useCSSFocusPopupHelper({
         allowBgScroll: true,
     });
@@ -2096,7 +2153,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                Promise.resolve().then(function () { return require('./doctor-dd0d103b.js'); }).then((data) => {
+                Promise.resolve().then(function () { return require('./doctor-30b5162b.js'); }).then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -2126,7 +2183,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 background: 'transparent',
             };
     return (React__default["default"].createElement(Tag, { tabIndex: 0, href: item.link, "data-event-category": "Hamburger Navigation", "data-event-action": "Click", "data-event-label": item.link, className: styles$1.itemNavButton, ref: containerRef },
-        React__default["default"].createElement(index$a.Button, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default["default"].createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
+        React__default["default"].createElement(index$b.Button, { variant: "light", leftIcon: Lottie && iconJson ? (linkOnly ? (React__default["default"].createElement(Lottie, { animationData: iconJson, loop: true, autoplay: true, style: {
                     width: 28,
                     height: 28,
                 } })) : (React__default["default"].createElement("a", { href: normalizeLink.normalizeLinkSlash(item.link + '/') },
@@ -2150,10 +2207,10 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
             }, style: Object.assign(Object.assign({}, buttonStyle), { padding: '6px 8px 6px 8px', color: '#262626', height: 'unset' }), size: "sm", rightIcon: item.popupType ? (React__default["default"].createElement("div", { className: styles$1.menuIconWrapper },
                 React__default["default"].createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
                     React__default["default"].createElement("path", { d: "M11.5 7.5L9 10L6.5 7.5", stroke: "#202135", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" })))) : (React__default["default"].createElement("div", null)), onMouseDown: onButtonMouseDown }, item.name),
-        item.popupType === 'categories' ? (React__default["default"].createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights, onClose: onClose })) : item.popupType === 'tools' ? (React__default["default"].createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, onClose: onClose })) : item.popupType === 'together' ? (React__default["default"].createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights, onClose: onClose })) : item.popupType === 'care' ? (React__default["default"].createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights, onClose: onClose })) : null));
+        item.popupType === 'categories' ? (React__default["default"].createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights, onClose: onClose })) : item.popupType === 'tools' ? (React__default["default"].createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights, onClose: onClose })) : item.popupType === 'together' ? (React__default["default"].createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights, onClose: onClose })) : item.popupType === 'care' ? (React__default["default"].createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights, onClose: onClose })) : item.popupType === 'video' ? (React__default["default"].createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights, onClose: onClose })) : null));
 };
 
-const StyleInput = styled__default["default"](index$b.Input) `
+const StyleInput = styled__default["default"](index$c.Input) `
   .mantine-Input-input {
     border-radius: 40px;
     background: ${miscTheme.theme.colors.white};
@@ -2218,7 +2275,7 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
             setKeyword(searchValue);
         }
     }, []);
-    return isMobile && !isHomepage ? (React__default["default"].createElement(index$a.Button, { variant: "tertiary", style: {
+    return isMobile && !isHomepage ? (React__default["default"].createElement(index$b.Button, { variant: "tertiary", style: {
             padding: '6px',
         }, size: "sm", onClick: () => {
             goToSearchPage('');
@@ -2255,6 +2312,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     const { siteType, isMobile = false, locale, sitewideBanner, sitewideBannerShown = true, sponsorComponent, isHomepage = false, onBookingClick, currentUrl, onLoginClick, cartNumber, 
     // ssrMenuContent: { categories, healthTools, care, together },
     configs: { statics, enableNavCareBooking, enableSearchBar,
+    // enableNavVideo,
     // enableNavCare,
     // enableProfileMyHealth,
     // enableProfileMySaved,
@@ -2324,14 +2382,14 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
     const careNavItem = menuItems.find((m) => m.id === 'care');
     return (React__default["default"].createElement(StyledHeaderWrapper, { "data-site-type": siteType, "data-sponsored": isSponsored, "data-sitewide-banner-shown": isShowingSiteWideBanner, "data-header-type": "home", "data-collapsed": isCollapsed, "data-is-displayed": true, id: "site-header", ref: headerRef },
         sitewideBanner,
-        React__default["default"].createElement(StyledHeader, { "data-site-type": siteType, isMarryBaby: siteType === 'marryBaby' },
+        React__default["default"].createElement(StyledHeader, { "data-site-type": siteType },
             React__default["default"].createElement(StyledLeftGroup, { "data-site-type": siteType },
                 isMobile && React__default["default"].createElement(HamburgerMenu, { menuItems: menuItems }),
                 logoComponent || (React__default["default"].createElement("a", { style: {
                         flexShrink: 0,
                     }, href: HOME_PAGE_URL },
                     React__default["default"].createElement("div", null,
-                        React__default["default"].createElement(index$c.Logo, { style: {
+                        React__default["default"].createElement(index$d.Logo, { style: {
                                 display: 'flex',
                             }, type: logoType, badge: locale === 'id-ID' && (React__default["default"].createElement("img", { src: index$3.CommonGAssets.getAssetPath('sehat-badge.png'), width: "56", height: "23", loading: "lazy" })), dateForSeasonal: new Date(), locale: locale, key: typeof window !== 'undefined' ? 'client' : 'server' })))),
                 !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null, siteType === 'marryBaby' ? (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
@@ -2351,7 +2409,7 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                                 order: 10,
                             },
                         }) },
-                        React__default["default"].createElement(index$a.Button, { variant: "primary", size: isMobile ? 'sm' : 'md', leftIcon: React__default["default"].createElement(core$1.Download, { size: 20, color: "currentColor" }), styles: (theme) => ({
+                        React__default["default"].createElement(index$b.Button, { variant: "primary", size: isMobile ? 'sm' : 'md', leftIcon: React__default["default"].createElement(core$1.Download, { size: 20, color: "currentColor" }), styles: (theme) => ({
                                 root: {
                                     [theme.fn.smallerThan('sm')]: {
                                         paddingLeft: 8,
@@ -2394,9 +2452,9 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
 const NavigtionSearch = ({ siteType, projectType, isMobile = false, isHomepage = false, }) => (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", className: `${siteType === 'marryBaby' ? 'marry-baby' : ''} ${isHomepage ? 'block-show' : ''}` },
     React__default["default"].createElement(SearchInput, { id: "desktop", projectType: projectType, isMobile: isMobile, isHomepage: isHomepage })));
 const NavigationMenu = ({ menuItems }) => {
-    const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together }, } = React.useContext(NavigationContext);
+    const { siteType, locale, ssrMenuContent: { categories, healthTools, care, together, videos }, } = React.useContext(NavigationContext);
     return (React__default["default"].createElement(DisplayWrapper, { mediaQueryKey: "mbUp", style: { height: '100%' } },
-        React__default["default"].createElement(StyledWrapMenuItems, { "data-site-type": siteType }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map((menuItem, index) => (React__default["default"].createElement(ItemMenu, { key: index, item: menuItem, menu: menuItem.popupType === 'categories' ? (React__default["default"].createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights })) : menuItem.popupType === 'tools' ? (React__default["default"].createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights })) : menuItem.popupType === 'together' ? (React__default["default"].createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights })) : menuItem.popupType === 'care' ? (React__default["default"].createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights })) : null }))))));
+        React__default["default"].createElement(StyledWrapMenuItems, { "data-site-type": siteType }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map((menuItem, index) => (React__default["default"].createElement(ItemMenu, { key: index, item: menuItem, menu: menuItem.popupType === 'categories' ? (React__default["default"].createElement(MenuCategoriesList, { categories: categories === null || categories === void 0 ? void 0 : categories.items, spotlightsList: categories === null || categories === void 0 ? void 0 : categories.spotlights })) : menuItem.popupType === 'tools' ? (React__default["default"].createElement(MenuHealthToolsList, { locale: locale, healthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.items, spotlightHealthTools: healthTools === null || healthTools === void 0 ? void 0 : healthTools.spotlights })) : menuItem.popupType === 'together' ? (React__default["default"].createElement(MenuCommunitiesList, { communities: together === null || together === void 0 ? void 0 : together.items, spotlights: together === null || together === void 0 ? void 0 : together.spotlights })) : menuItem.popupType === 'care' ? (React__default["default"].createElement(MenuCareList, { careSpecialties: care === null || care === void 0 ? void 0 : care.items, spotlights: care === null || care === void 0 ? void 0 : care.spotlights })) : menuItem.popupType === 'video' ? (React__default["default"].createElement(MenuVideoList, { spotlightsList: videos === null || videos === void 0 ? void 0 : videos.spotlights })) : null }))))));
 };
 
 const useHeaderHeight = ({ hasSponsoredBanners, isSponsored, isShowingSiteWideBanner, isMobile, }) => {
@@ -2497,7 +2555,7 @@ const useInsider = () => {
 
 const useNavServices = () => {
     const { t } = index$4.useTranslations();
-    const { siteType, locale, configs: { enableNavDiscover, enableNavHealthTools, enableNavCare, enableNavTogether, enableNavEcom, enableNavTarotGame, statics, }, } = React.useContext(NavigationContext);
+    const { siteType, locale, configs: { enableNavDiscover, enableNavHealthTools, enableNavCare, enableNavTogether, enableNavEcom, enableNavVideo, statics, }, } = React.useContext(NavigationContext);
     const isMarryBaby = siteType === 'marryBaby';
     const services = React.useMemo(() => {
         var _a;
@@ -2506,13 +2564,22 @@ const useNavServices = () => {
             _services.push({
                 name: t('home.navigator.menuItem.discover'),
                 id: 'categories',
-                link: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/categories`,
+                link: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/categories/`,
                 niceName: '',
                 thumbnail: isMarryBaby
                     ? index$3.CommonGAssets.getAssetPath('categories-mb.svg')
                     : index$3.CommonGAssets.getAssetPath('nav-icons/discover.svg'),
                 popupType: 'categories',
             });
+        enableNavVideo &&
+            _services.push({
+                name: t('home.navigator.menuItem.video'),
+                id: 'video',
+                link: `${statics.HOME_PAGE_URL}${locale === 'tl-PH' ? '/fil' : ''}/videos/`,
+                niceName: '',
+                thumbnail: index$3.CommonGAssets.getAssetPath('nav-icons/video.svg'),
+                popupType: 'video',
+            });
         enableNavHealthTools &&
             _services.push({
                 name: t('home.navigator.menuItem.healthTools'),
@@ -2549,22 +2616,8 @@ const useNavServices = () => {
                 thumbnail: index$3.CommonGAssets.getAssetPath('nav-icons/care.svg'),
                 popupType: locale === 'id-ID' ? 'care' : null,
             });
-        enableNavTarotGame &&
-            _services.push({
-                name: 'MỚI - Tarot cho mẹ bầu',
-                id: 'game',
-                link: normalizeLink.normalizeLinkSlash(statics.HOME_PAGE_URL + '/xem-bai-tarot-online/'),
-                thumbnail: index$3.CommonGAssets.getAssetPath('play-card.svg'),
-                popupType: 'none',
-            });
         return _services;
-    }, [
-        locale,
-        enableNavCare,
-        enableNavTogether,
-        enableNavEcom,
-        enableNavTarotGame,
-    ]);
+    }, [locale, enableNavCare, enableNavTogether, enableNavEcom]);
     return services;
 };
 
@@ -2623,17 +2676,19 @@ const NavigationV2 = (props) => {
         React__default["default"].createElement(_NavigationV2, Object.assign({}, propsWithDefaultValues))));
 };
 const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const res = {};
     const isMarryBaby = locale === 'vi-VN_MB';
     try {
         const customLang = locale === 'tl-PH' ? 'lang=fil' : '';
         try {
-            const [categories, spotlights, healthtools, healthtoolsFavorites] = yield Promise.all([
+            const [categories, spotlights, healthtools, healthtoolsFavorites, videos,] = yield Promise.all([
                 fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/categories${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
                 fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/spotlights?per_page=10&order_by=start_date${customLang ? '&' + customLang : ''}`)).then((res) => res.json()),
                 fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/${isMarryBaby ? 'health-tools' : 'healthtools'}${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
                 fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/${isMarryBaby ? 'health-tools' : 'healthtools'}/favorites${customLang ? '?' + customLang : ''}`)).then((res) => res.json()),
+                locale === Locale.LOCALE.Vietnam &&
+                    fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getDiscoverApiDomain(locale)}/wp-json/api/video/navigation`)).then((res) => res.json()),
             ]);
             res.categories = {
                 items: ((_b = (_a = categories === null || categories === void 0 ? void 0 : categories.data) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, formatCategory)) || [],
@@ -2643,8 +2698,11 @@ const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0
                 items: ((_h = (_g = healthtools === null || healthtools === void 0 ? void 0 : healthtools.data) === null || _g === void 0 ? void 0 : _g.map) === null || _h === void 0 ? void 0 : _h.call(_g, formatHealthTool)) || [],
                 spotlights: ((_k = (_j = healthtoolsFavorites === null || healthtoolsFavorites === void 0 ? void 0 : healthtoolsFavorites.data) === null || _j === void 0 ? void 0 : _j.map) === null || _k === void 0 ? void 0 : _k.call(_j, formatHealthTool)) || [],
             };
+            res.videos = {
+                spotlights: ((_m = (_l = videos === null || videos === void 0 ? void 0 : videos.data) === null || _l === void 0 ? void 0 : _l.videos) !== null && _m !== void 0 ? _m : []).map(formatVideoItem),
+            };
         }
-        catch (_z) { }
+        catch (_1) { }
         if (isMarryBaby || index$2.TOGETHER_LOCALES.includes(locale)) {
             try {
                 const [communities, spotlightPosts] = yield Promise.all([
@@ -2652,11 +2710,11 @@ const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0
                     fetch(normalizeLink.normalizeLinkSlash(`${normalizeLink.getTogetherApiDomain()}/api/v1/options?website_url=https://${constantsDomainLocales.domainLocales[locale]}&meta_key=popular_post`)).then((res) => res.json()),
                 ]);
                 res.together = {
-                    items: ((_o = (_m = (_l = communities === null || communities === void 0 ? void 0 : communities.data) === null || _l === void 0 ? void 0 : _l.communities) === null || _m === void 0 ? void 0 : _m.map) === null || _o === void 0 ? void 0 : _o.call(_m, dataTransform.formatCommunity)) || [],
-                    spotlights: ((_r = (_q = (_p = spotlightPosts === null || spotlightPosts === void 0 ? void 0 : spotlightPosts.data) === null || _p === void 0 ? void 0 : _p.posts) === null || _q === void 0 ? void 0 : _q.map) === null || _r === void 0 ? void 0 : _r.call(_q, dataTransform.formatPost)) || [],
+                    items: ((_q = (_p = (_o = communities === null || communities === void 0 ? void 0 : communities.data) === null || _o === void 0 ? void 0 : _o.communities) === null || _p === void 0 ? void 0 : _p.map) === null || _q === void 0 ? void 0 : _q.call(_p, dataTransform.formatCommunity)) || [],
+                    spotlights: ((_t = (_s = (_r = spotlightPosts === null || spotlightPosts === void 0 ? void 0 : spotlightPosts.data) === null || _r === void 0 ? void 0 : _r.posts) === null || _s === void 0 ? void 0 : _s.map) === null || _t === void 0 ? void 0 : _t.call(_s, dataTransform.formatPost)) || [],
                 };
             }
-            catch (_0) { }
+            catch (_2) { }
         }
         if (index$2.CARE_LOCALES.includes(locale)) {
             try {
@@ -2667,11 +2725,11 @@ const getNavMenuContent = (locale) => tslib_es6.__awaiter(void 0, void 0, void 0
                         `/api/options/setting_menu?site=${constantsDomainLocales.domainLocales[locale]}&type=1`)).then((res) => res.json()),
                 ]);
                 res.care = {
-                    items: ((_v = (_u = (_t = (_s = specialties === null || specialties === void 0 ? void 0 : specialties._data) === null || _s === void 0 ? void 0 : _s.setting_menu) === null || _t === void 0 ? void 0 : _t.menu_specialty) === null || _u === void 0 ? void 0 : _u.map) === null || _v === void 0 ? void 0 : _v.call(_u, formatSpecialties)) || [],
-                    spotlights: ((_y = (_x = (_w = hospitals === null || hospitals === void 0 ? void 0 : hospitals._data.setting_menu) === null || _w === void 0 ? void 0 : _w.menu_hospital) === null || _x === void 0 ? void 0 : _x.map) === null || _y === void 0 ? void 0 : _y.call(_x, formatHospital)) || [],
+                    items: ((_x = (_w = (_v = (_u = specialties === null || specialties === void 0 ? void 0 : specialties._data) === null || _u === void 0 ? void 0 : _u.setting_menu) === null || _v === void 0 ? void 0 : _v.menu_specialty) === null || _w === void 0 ? void 0 : _w.map) === null || _x === void 0 ? void 0 : _x.call(_w, formatSpecialties)) || [],
+                    spotlights: ((_0 = (_z = (_y = hospitals === null || hospitals === void 0 ? void 0 : hospitals._data.setting_menu) === null || _y === void 0 ? void 0 : _y.menu_hospital) === null || _z === void 0 ? void 0 : _z.map) === null || _0 === void 0 ? void 0 : _0.call(_z, formatHospital)) || [],
                 };
             }
-            catch (_1) { }
+            catch (_3) { }
         }
     }
     catch (e) {