/*
 * JLPT180 Bottom Nav CSS owner.
 * P4.24: moved mobile bottom navigation from shell.css.
 * Scope: .bn / .bni only.
 */
body.jlpt180-clean-lobby .bn{
display: none;
}


@media (max-width: 899px){
body.jlpt180-clean-lobby .bn{
position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: 58px;
    padding: 6px 5px max(6px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    background: rgba(87, 218, 213, .86);
    border-top: 2px solid rgba(104,248,255,.9);
    
  }


  body.jlpt180-clean-lobby .bni{
min-width: 0;
    min-height: 44px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    border: 2px solid rgba(104,248,255,.82);
    border-radius: 8px;
    background: rgba(12, 92, 122, .52);
    color: #eaffff;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
  }


  body.jlpt180-clean-lobby .bni.active{
color: #ffe65b;
    background: rgba(28, 143, 136, .76);
    box-shadow: 0 0 12px rgba(104,248,255,.5);
  }
}


@media (max-width: 899px){
body.jlpt180-clean-lobby .bn{
background: rgba(255,255,255,.96);
    border-top: 1.5px solid rgba(147,197,253,.55);
    
    box-shadow: 0 -6px 24px rgba(14,165,233,.10);
    height: 60px;
    padding: 5px 6px max(5px, env(safe-area-inset-bottom));
  }


  body.jlpt180-clean-lobby .bni{
border: 1.5px solid rgba(147,197,253,.45);
    border-radius: 14px;
    background: linear-gradient(180deg, #f0f9ff, #e0f2fe);
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(14,165,233,.08);
  }


  body.jlpt180-clean-lobby .bni.active{
background: linear-gradient(135deg, #2563eb, #0891b2);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(37,99,235,.28);
  }


  body.jlpt180-clean-lobby .bni > i,
body.jlpt180-clean-lobby .bni img{
filter: none;
  }
}


@media (max-width: 899px){
body.jlpt180-clean-lobby .bn{
left: 8px;
    right: 8px;
    bottom: max(6px, env(safe-area-inset-bottom));
    height: 62px;
    padding: 7px 7px 8px;
    gap: 5px;
    border: 1px solid rgba(255, 196, 220, .92);
    border-radius: 22px 22px 26px 26px;
    background:
      radial-gradient(circle at 18% 20%, rgba(255, 221, 235, .98), transparent 34%),
      radial-gradient(circle at 74% 0%, rgba(215, 236, 255, .9), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255, 244, 250, .9));
    box-shadow:
      0 -12px 28px rgba(236, 72, 153, .16),
      0 10px 22px rgba(27, 116, 158, .12),
      inset 0 1px 0 rgba(255,255,255,.96);
    
    -webkit-
    overflow: visible;
  }


  body.jlpt180-clean-lobby .bn::before,
body.jlpt180-clean-lobby .bn::after{
content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
  }


  body.jlpt180-clean-lobby .bn::before{
left: 18px;
    right: 18px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 126, 179, .75), rgba(93, 213, 255, .58), transparent);
  }


  body.jlpt180-clean-lobby .bn::after{
inset: 8px 20px -10px;
    border-radius: 999px;
    background: rgba(255, 160, 199, .18);
    filter: none;
  }


  body.jlpt180-clean-lobby .bni{
--petal: #ec4899;
    --petal-soft: #ffe4f1;
    --petal-deep: #be185d;
    position: relative;
    min-width: 0;
    min-height: 48px;
    height: 48px;
    padding: 5px 2px 4px;
    gap: 2px;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 20px 20px 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), var(--petal-soft));
    color: color-mix(in srgb, var(--petal-deep) 80%, #14384f);
    box-shadow:
      0 5px 12px rgba(45, 83, 114, .08),
      inset 0 1px 0 rgba(255,255,255,.96);
    font-size: 10px;
    line-height: 1.02;
    text-shadow: none;
    transform: translateY(0);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  }


  body.jlpt180-clean-lobby .bni[data-view="dashboard"]{
--petal: #fb7185; --petal-soft: #fff1f2; --petal-deep: #e11d48;
  }


  body.jlpt180-clean-lobby .bni[data-view="hocluc"]{
--petal: #a855f7; --petal-soft: #f5edff; --petal-deep: #7e22ce;
  }


  body.jlpt180-clean-lobby .bni[data-view="tangkho"]{
--petal: #f472b6; --petal-soft: #fff0f7; --petal-deep: #db2777;
  }


  body.jlpt180-clean-lobby .bni[data-view="shop"]{
--petal: #f59e0b; --petal-soft: #fff7dd; --petal-deep: #b45309;
  }


  body.jlpt180-clean-lobby .bni[data-view="profile"]{
--petal: #38bdf8; --petal-soft: #e9f8ff; --petal-deep: #0284c7;
  }


  body.jlpt180-clean-lobby .bni::before{
content: "";
    position: absolute;
    inset: 4px 10px auto;
    height: 20px;
    border-radius: 999px 999px 12px 12px;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.88), transparent 70%);
    opacity: .78;
    pointer-events: none;
  }


  body.jlpt180-clean-lobby .bni::after{
content: "✿";
    position: absolute;
    right: 7px;
    top: 5px;
    color: var(--petal);
    font-size: 8px;
    line-height: 1;
    opacity: .42;
    filter: drop-shadow(0 1px 2px rgba(255,255,255,.9));
    pointer-events: none;
  }


  body.jlpt180-clean-lobby .bni i{
position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    color: var(--petal);
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(25, 82, 120, .1);
  }


  body.jlpt180-clean-lobby .bni span{
position: relative;
    z-index: 1;
    max-width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 900;
    letter-spacing: -.03em;
  }


  body.jlpt180-clean-lobby .bni.active{
min-height: 60px;
    height: 60px;
    margin-top: -17px;
    border-color: rgba(255,255,255,.96);
    border-radius: 28px 28px 18px 18px;
    background:
      radial-gradient(circle at 50% 14%, rgba(255,255,255,.9), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--petal) 82%, #fff), var(--petal));
    color: #fff;
    box-shadow:
      0 12px 22px color-mix(in srgb, var(--petal) 32%, transparent),
      0 5px 0 var(--petal-deep),
      inset 0 1px 0 rgba(255,255,255,.72);
    transform: translateY(-1px);
  }


  body.jlpt180-clean-lobby .bni.active::before{
inset: -7px 7px auto;
    height: 28px;
    border-radius: 999px 999px 16px 16px;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), color-mix(in srgb, var(--petal) 48%, #fff) 55%, transparent 74%);
    opacity: .9;
  }


  body.jlpt180-clean-lobby .bni.active::after{
content: "✿";
    left: 50%;
    right: auto;
    top: -3px;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--petal);
    font-size: 13px;
    opacity: 1;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--petal) 28%, transparent);
  }


  body.jlpt180-clean-lobby .bni.active i{
width: 25px;
    height: 25px;
    margin-top: 2px;
    background: rgba(255,255,255,.96);
    color: var(--petal-deep);
    box-shadow: 0 4px 12px rgba(255,255,255,.34);
  }


  body.jlpt180-clean-lobby .bni.active span{
color: #fff;
    text-shadow: 0 1px 2px color-mix(in srgb, var(--petal-deep) 55%, transparent);
  }
}


@media (max-width: 899px){
body.jlpt180-clean-lobby .bn{
pointer-events: auto;
    z-index: 2147482600;
  }


  body.jlpt180-clean-lobby .bni{
pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
  }
}