/* Menu dùng chung: .bn = thanh chân trang (≤980px), .tn = thanh đầu trang (≥981px), cộng hiệu ứng đốm cam. */
.bn, .tn { display: none; }

@media (max-width: 980px) {
  body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .scroll-cue { display: none; }

  .bn {
    --bn-h: 68px;
    --bn-fab: 60px;
    --bn-hole: 39px;
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: block;
    width: min(460px, calc(100% - 24px));
    height: var(--bn-h);
    translate: -50% 0;
    filter: drop-shadow(0 12px 22px rgb(88 89 91 / 26%)) drop-shadow(0 2px 4px rgb(88 89 91 / 12%));
    animation: bn-in 700ms var(--ease) 250ms both;
  }
  :root[data-theme="dark"] .bn { filter: drop-shadow(0 14px 24px rgb(0 0 0 / 60%)) drop-shadow(0 0 1px rgb(255 255 255 / 10%)); }

  .bn-bar {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: var(--paper);
    /* khe lõm tròn ở giữa mép trên cho nút Trang chủ */
    -webkit-mask: radial-gradient(circle var(--bn-hole) at 50% 4px, transparent calc(var(--bn-hole) - 1px), #000 var(--bn-hole));
            mask: radial-gradient(circle var(--bn-hole) at 50% 4px, transparent calc(var(--bn-hole) - 1px), #000 var(--bn-hole));
  }

  .bn-list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 84px 1fr 1fr;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bn-item { position: relative; display: grid; min-width: 0; }
  .bn-link {
    display: grid;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 6px 2px 4px;
    color: var(--graphite);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-link svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 420ms cubic-bezier(.34, 1.7, .5, 1), stroke 200ms var(--ease);
  }
  .bn-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 200ms var(--ease); }
  .bn-link:active svg { transform: scale(.82); }
  .bn-link[aria-current="page"], .bn-link[aria-current="true"] { color: var(--ember); }
  .bn-link[aria-current="page"] svg, .bn-link[aria-current="true"] svg { transform: translateY(-3px) scale(1.08); stroke-width: 2.2; }
  .bn-link[aria-current="page"] span, .bn-link[aria-current="true"] span { font-weight: 800; }
  .bn-link.is-pop svg, .bn-link.is-hit svg { animation: bn-pop 520ms cubic-bezier(.34, 1.7, .5, 1); }

  /* nút Trang chủ nổi ở giữa */
  .bn-center { display: grid; place-items: end center; }
  .bn-fab {
    position: absolute;
    left: 50%;
    top: calc(4px - var(--bn-fab) / 2);
    display: grid;
    width: var(--bn-fab);
    height: var(--bn-fab);
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    translate: -50% 0;
    box-shadow: 0 12px 22px -6px rgb(241 90 36 / 65%), inset 0 1px 0 rgb(255 255 255 / 45%);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 380ms cubic-bezier(.34, 1.7, .5, 1), box-shadow 240ms var(--ease);
  }
  .bn-fab svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform 420ms cubic-bezier(.34, 1.7, .5, 1); }
  .bn-fab:active { transform: scale(.88); }
  .bn-fab[aria-current="page"], .bn-fab[aria-current="true"] { box-shadow: 0 14px 26px -6px rgb(241 90 36 / 80%), 0 0 0 5px rgb(253 185 19 / 28%), inset 0 1px 0 rgb(255 255 255 / 45%); }
  .bn-fab[aria-current="page"] svg, .bn-fab[aria-current="true"] svg { transform: scale(1.08); }
  .bn-fab.is-pop svg, .bn-fab.is-hit svg { animation: bn-pop 520ms cubic-bezier(.34, 1.7, .5, 1); }
  .bn-fab::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgb(255 255 255 / 55%), transparent 55%); opacity: 0; transform: scale(.2); }
  .bn-fab.is-ripple::after { animation: bn-ripple 520ms var(--ease); }
  .bn-center-label { position: absolute; left: 0; right: 0; bottom: 6px; color: var(--graphite); font-size: .6875rem; font-weight: 700; text-align: center; pointer-events: none; transition: color 200ms var(--ease); }
  .bn-center-label.is-on { color: var(--ember); font-weight: 800; }

  /* chấm báo trượt theo mục đang mở */
  .bn-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    width: 56px;
    height: 12px;
    place-items: start center;
    pointer-events: none;
    transition: transform 520ms cubic-bezier(.34, 1.45, .5, 1), opacity 220ms var(--ease);
  }
  .bn-indicator.is-hidden { opacity: 0; }
  .bn-indicator::before { content: ""; position: absolute; top: 0; width: 48px; height: 9px; border-radius: 0 0 40px 40px / 0 0 100% 100%; background: linear-gradient(180deg, rgb(253 185 19 / 38%), transparent); }
  .bn-indicator::after { content: ""; position: relative; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px rgb(241 90 36 / 70%); }
}

@keyframes bn-in { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bn-pop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9px) scale(1.2) rotate(-6deg); } 100% { transform: translateY(-3px) scale(1.08); } }
@keyframes bn-ripple { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.6); } }

@media (max-width: 360px) {
  .bn-list { grid-template-columns: 1fr 1fr 76px 1fr 1fr; }
  .bn-link { font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bn, .bn-link svg, .bn-fab, .bn-fab svg, .bn-indicator { animation: none !important; transition: none !important; }
}

/* ---------- thanh menu đầu trang (máy tính) ---------- */
@media (min-width: 981px) {
  .tn { position: relative; display: flex; align-items: center; justify-self: center; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 12px 28px -20px var(--shadow-card); animation: tn-in 650ms var(--ease) 150ms both; }
  .tn-list { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .tn-link { position: relative; display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; color: var(--graphite); font-size: .9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease); }
  .tn-link svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 420ms cubic-bezier(.34, 1.7, .5, 1); }
  .tn-link:hover { color: var(--ember); }
  .tn-link:hover svg { transform: translateY(-2px) scale(1.1); }
  .tn-link[aria-current="page"], .tn-link[aria-current="true"] { color: var(--ember); font-weight: 800; }
  .tn-link.is-pop svg, .tn-link.is-hit svg { animation: bn-pop 520ms cubic-bezier(.34, 1.7, .5, 1); }
  .tn-center { margin: 0 8px; }
  .tn-fab { position: relative; display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 10px 20px -8px rgb(241 90 36 / 65%), inset 0 1px 0 rgb(255 255 255 / 45%); text-decoration: none; transition: transform 380ms cubic-bezier(.34, 1.7, .5, 1), box-shadow 240ms var(--ease); }
  .tn-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform 420ms cubic-bezier(.34, 1.7, .5, 1); }
  .tn-fab:hover { transform: translateY(-2px) scale(1.06); }
  .tn-fab:active { transform: scale(.9); }
  .tn-fab[aria-current="page"], .tn-fab[aria-current="true"] { box-shadow: 0 12px 24px -8px rgb(241 90 36 / 80%), 0 0 0 4px rgb(253 185 19 / 28%), inset 0 1px 0 rgb(255 255 255 / 45%); }
  .tn-fab.is-hit svg { animation: bn-pop 520ms cubic-bezier(.34, 1.7, .5, 1); }
  .tn-hi { position: absolute; top: 5px; left: 0; z-index: 0; height: 44px; border-radius: 999px; background: rgb(247 148 30 / 15%); pointer-events: none; transition: transform 520ms cubic-bezier(.34, 1.45, .5, 1), width 520ms cubic-bezier(.34, 1.45, .5, 1), opacity 220ms var(--ease); }
  .tn-dot { position: absolute; bottom: 1px; left: 0; z-index: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px rgb(241 90 36 / 75%); pointer-events: none; transition: transform 520ms cubic-bezier(.34, 1.45, .5, 1), opacity 220ms var(--ease); }
  .tn-hi.is-hidden, .tn-dot.is-hidden { opacity: 0; }
}

/* ---------- hiệu ứng đốm cam thương hiệu ---------- */
.fx-spark, .fx-trail, .fx-ring, .fx-dot { position: fixed; z-index: 90; pointer-events: none; border-radius: 50%; }
.fx-spark { left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: radial-gradient(circle at 35% 32%, #fff 0, #fdb913 34%, #f15a24 100%); box-shadow: 0 0 14px 4px rgb(241 90 36 / 65%), 0 0 34px 12px rgb(253 185 19 / 38%); will-change: transform; }
.fx-trail { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: radial-gradient(circle, #fdb913, #f15a24); box-shadow: 0 0 10px rgb(241 90 36 / 60%); animation: fx-fade 480ms ease-out forwards; }
.fx-ring { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #f15a24; animation: fx-ring 560ms cubic-bezier(.2, .8, .3, 1) forwards; }
.fx-dot { width: 7px; height: 7px; background: linear-gradient(135deg, #fdb913, #f15a24); }
.is-launch { animation: fx-launch 420ms cubic-bezier(.34, 1.7, .5, 1); }
@keyframes fx-fade { to { opacity: 0; transform: scale(.2); } }
@keyframes fx-ring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(4.2); } }
@keyframes fx-launch { 0% { transform: scale(1); } 35% { transform: scale(.82); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes tn-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx-spark, .fx-trail, .fx-ring, .fx-dot { display: none; } .tn, .is-launch { animation: none !important; } .tn-hi, .tn-dot, .tn-link svg { transition: none !important; } }