.footer-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--color-black);color:var(--color-white);border-top:1px solid #202020;padding-bottom:env(safe-area-inset-bottom)}
.footer-nav__inner{display:grid;grid-template-columns:repeat(6,1fr);min-height:68px}
.footer-nav__item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 3px;border:0;background:transparent;color:var(--color-white);font-size:11px;line-height:1.1;cursor:pointer}
a.footer-nav__item:hover{text-decoration:none;background:#151515}
button.footer-nav__item:hover{background:#151515}
.footer-nav__icon{width:22px;height:22px}
.footer-nav__item--com .footer-nav__icon{color:#ff7097}
.footer-nav__item--pho .footer-nav__icon{color:#ff9fbd}
@media (max-width:720px){.footer-nav__inner{min-height:66px}}
@media (max-width:430px){.footer-nav__inner{min-height:62px}.footer-nav__item{font-size:10px;padding-inline:2px}.footer-nav__icon{width:21px;height:21px}}
@media (max-width:390px){.footer-nav__inner{min-height:58px}.footer-nav__item{font-size:9px;gap:3px}.footer-nav__icon{width:20px;height:20px}}

.footer-nav__icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px}
.notification-badge--footer{position:absolute;top:-5px;right:-7px;border:2px solid var(--color-black)}
@media (max-width:430px){.notification-badge--footer{right:-6px}}
@media (max-width:390px){.footer-nav__icon-wrap{width:26px;height:22px}.notification-badge--footer{top:-5px;right:-6px}}