/* Thanh mục chính: viên thuốc kính mờ, 5 mục + Thêm; "viên sáng" hổ phách trượt theo lò xo tới mục được chọn, kéo được dọc thanh */
.nav .wrap{height:64px;gap:16px}
nav.tabbar{position:relative;flex:0 1 auto;margin-inline:auto;display:flex;align-items:center;gap:0;overflow:visible;padding:4px;border-radius:999px;background:rgba(255,253,248,.66);border:1px solid rgba(43,36,28,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(43,36,28,.04),0 8px 24px rgba(43,36,28,.06);backdrop-filter:blur(16px) saturate(1.2)}
.tabbar .tb{position:relative;z-index:2;display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:0;background:none;border-radius:999px;color:#6B5F50;text-decoration:none;font:500 14px/1 var(--f-body);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:color .35s}
.tabbar .tb:hover{color:#2B241C}
.tabbar .tb-ic{display:grid;place-items:center;transition:transform .5s var(--ease),color .35s}
.tabbar .tb-ic svg{width:17px;height:17px}
.tabbar .tb.on{color:#2B241C}
.tabbar .tb.on .tb-ic{color:#9A6E22}
.tabbar .tb:active .tb-ic{transform:scale(.88)}
.tb-light{position:absolute;z-index:1;left:0;top:4px;height:38px;width:90px;border-radius:999px;background:linear-gradient(180deg,#FFF8E6 0%,#F6E3B4 100%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(184,134,47,.32),0 4px 14px rgba(184,134,47,.22);opacity:0;transition:opacity .3s,width .45s var(--ease),height .45s var(--ease);cursor:grab;touch-action:none;will-change:transform}
.tb-light::after{content:"";position:absolute;left:50%;bottom:-7px;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:#C9963A;box-shadow:0 0 10px 2px rgba(232,180,80,.7)}
.tb-light.drag{cursor:grabbing}
.tb-pool{position:absolute;z-index:0;left:0;bottom:-18px;width:120px;height:26px;margin-left:-60px;border-radius:50%;background:radial-gradient(ellipse,rgba(232,180,80,.32),rgba(232,180,80,0) 70%);filter:blur(5px);opacity:0;transition:opacity .3s;pointer-events:none;will-change:transform}
.tabbar.lit .tb-light,.tabbar.lit .tb-pool{opacity:1}
.tb-more{position:relative;display:flex}
.tb-pop{position:absolute;top:calc(100% + 14px);right:-4px;min-width:210px;background:rgba(255,253,248,.97);border:1px solid rgba(43,36,28,.09);border-radius:18px;box-shadow:0 20px 44px rgba(43,36,28,.16);padding:6px;display:grid;gap:2px;backdrop-filter:blur(16px);animation:popIn .35s var(--ease) both;z-index:5}
.tb-pop[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.tb-pop a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#2B241C;text-decoration:none;font-size:14px}
.tb-pop a svg{color:#9A6E22;flex-shrink:0}
.tb-pop a:hover,.tb-pop a.on{background:rgba(184,134,47,.12)}
.nav-auth .btn{border-radius:999px;padding:9px 18px;height:40px}
.nav-auth .btn.ghost{border-color:rgba(43,36,28,.14);background:rgba(255,253,248,.6)}
.cal-btn{height:44px;min-height:44px;padding:5px 14px 5px 6px}
@media (max-width:1360px){.nav-auth .btn.ghost{display:none}}
@media (min-width:861px) and (max-width:1120px){.nav .brand b{display:none}.tabbar .tb{padding:0 9px;gap:5px}.tabbar .tb-t{font-size:13px}}
@media (max-width:1440px){.tabbar .tb{padding:0 12px;gap:6px}}
@media (max-width:1180px){.tabbar .tb{padding:0 10px}}
@media (max-width:1060px){.tabbar .tb-t{font-size:13px}.tabbar .tb{padding:0 9px}.nav-auth .btn.ghost{display:none}}
@media (max-width:860px){
  nav.tabbar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;margin:0;width:calc(100vw - 24px);max-width:420px;padding:4px 6px;justify-content:space-between;border-radius:30px;background:rgba(255,253,248,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 36px rgba(43,36,28,.2);transition:transform .45s var(--ease),opacity .3s}
  .tabbar .tb{flex:1;flex-direction:column;gap:4px;height:58px;padding:0;font-size:11.5px;border-radius:20px;color:#7A6E5E}
  .tabbar .tb-ic{width:52px;height:30px;border-radius:999px}
  .tabbar .tb-ic svg{width:21px;height:21px}
  .tabbar .tb.on{color:#2B241C}.tabbar .tb.on .tb-ic{transform:none}
  .tabbar a.tb[href="#ky-uc"]{display:none}
  .tb-light{border-radius:999px}
  .tb-light::after{display:none}
  .tabbar .tb.on .tb-t{font-weight:600}
  .tb-pool{display:none}
  body:has(.park.walking) nav.tabbar{transform:translate(-50%,140%);opacity:0;pointer-events:none}
  .nav-menu{display:none!important}
  .tb-pop{display:none!important}
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .msheet{z-index:44;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .snd{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
  #tbMore[aria-expanded="true"]{color:#2B241C}#tbMore[aria-expanded="true"] .tb-ic{color:#9A6E22}
  .toast{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
  .nav .wrap{height:60px}
  .cal-btn{margin-left:auto;height:46px;padding:5px 12px 5px 6px}.cal-btn i{width:34px;height:34px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.tb-pop{animation:none}}
@media (max-width:640px){.nav-auth{display:none}}
.nav .brand{gap:11px}.nav .brand svg{width:36px;height:36px}.nav .brand b{font-size:22px}
@media (max-width:860px){.nav .brand svg{width:32px;height:32px}.nav .brand b{font-size:20px}}
/* Logo khi rê chuột: hai thế giới tách ra rồi hoà lại, phần giao nhau sáng lên, chữ có vệt sáng lướt qua */
.nav .brand{position:relative;isolation:isolate}
.nav .brand::before{content:"";position:absolute;z-index:-1;left:18px;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:radial-gradient(circle,rgba(242,201,76,.45),rgba(242,201,76,0) 65%);opacity:0;transform:scale(.5);transition:opacity .5s,transform .7s var(--ease);pointer-events:none}
.nav .brand svg{overflow:visible}
.nav .brand svg circle,.nav .brand svg path{transform-box:fill-box;transform-origin:center}
.nav .brand b{background:linear-gradient(100deg,#2B241C 0 40%,#C9963A 50%,#2B241C 60% 100%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;transition:letter-spacing .5s var(--ease)}
.nav .brand:hover::before,.nav .brand:focus-visible::before{opacity:1;transform:scale(1)}
.nav .brand:hover svg circle:nth-of-type(1),.nav .brand:focus-visible svg circle:nth-of-type(1){animation:lgL 1.1s var(--ease) both}
.nav .brand:hover svg circle:nth-of-type(2),.nav .brand:focus-visible svg circle:nth-of-type(2){animation:lgR 1.1s var(--ease) both}
.nav .brand:hover svg path,.nav .brand:focus-visible svg path{animation:lgLens 1.1s var(--ease) both,lgGlow 2.4s 1.1s ease-in-out infinite}
.nav .brand:hover b,.nav .brand:focus-visible b{animation:lgShine 1.2s .25s ease-out both;letter-spacing:-.01em}
@keyframes lgL{35%{transform:translateX(-4px) rotate(-8deg)}70%{transform:translateX(.8px)}100%{transform:none}}
@keyframes lgR{35%{transform:translateX(4px) rotate(8deg)}70%{transform:translateX(-.8px)}100%{transform:none}}
@keyframes lgLens{0%{transform:none}35%{transform:scale(.2,.6);opacity:.3}70%{transform:scale(1.25);opacity:1}100%{transform:none}}
@keyframes lgGlow{50%{filter:drop-shadow(0 0 4px rgba(242,201,76,.95)) brightness(1.15)}}
@keyframes lgShine{from{background-position:100% 0}to{background-position:0 0}}
.nav .brand:active svg{transform:scale(.92);transition:transform .15s}
@media (prefers-reduced-motion:reduce){.nav .brand svg *,.nav .brand b{animation:none!important}}