/* Thanh công cụ dưới màn hình – chỉ mobile; desktop ẩn hẳn */
@media (min-width: 850px) { .tpv-tb, .tpv-tb__sheet { display: none !important; } }
@media (max-width: 849px) {
.tpv-tb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99980; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 0 2px env(safe-area-inset-bottom, 0px);
  background: rgba(10,5,30,.97); border-top: 1px solid rgba(232,199,125,.35); box-shadow: 0 -8px 28px rgba(0,0,0,.45); }
.tpv-tb__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 60px; padding: 4px 2px; margin: 0; border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: #cbbfe8 !important; text-decoration: none !important; font: 600 11px/1.1 var(--tpv-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; -webkit-tap-highlight-color: transparent; }
.tpv-tb__a:hover, .tpv-tb__a:focus-visible, .tpv-tb__a:visited { color: #fff !important; outline: none; }
.tpv-tb__a:focus-visible .tpv-tb__ic { box-shadow: 0 0 0 2px #b48cff; }
.tpv-tb__a.is-cur, .tpv-tb__more[aria-expanded="true"] { color: #f8e6b4 !important; }
.tpv-tb__a.is-cur .tpv-tb__ic { background: rgba(232,199,125,.18); }
.tpv-tb__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 26px; border-radius: 999px; transition: background .15s; }
.tpv-tb__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tpv-tb__ic svg .f { fill: currentColor; stroke: none; }
.tpv-tb__tx { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Chừa chỗ cho thanh + đẩy các nút nổi khác lên */
body.has-tpv-tb { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
body.has-tpv-tb .back-to-top { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
body.has-tpv-tb .tpv-sh-fab { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
body.has-tpv-tb .tpv-tm { bottom: calc(134px + env(safe-area-inset-bottom, 0px)); }
body.has-tpv-tb .tpv-ung-ho--bar, body.has-tpv-tb .tpv-uh-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* Bảng chọn đủ công cụ (trượt từ dưới lên) */
.tpv-tb__sheet { position: fixed; inset: 0; z-index: 99995; }
body.tpv-tb-open .tpv-tm, body.tpv-tb-open .back-to-top, body.tpv-tb-open .tpv-sh-fab, body.tpv-tb-open .tpv-float { display: none !important; }
.tpv-tb__bd { position: absolute; inset: 0; background: rgba(3,1,12,.6); }
.tpv-tb__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; background: #110a2c; border-top: 1px solid rgba(232,199,125,.45); box-shadow: 0 -16px 48px rgba(0,0,0,.6); animation: tpv-tb-up .22s ease both; }
@keyframes tpv-tb-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.tpv-tb__hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; }
.tpv-tb__hd b { font-size: 16px; color: #f8e6b4; }
.tpv-tb__x { width: 34px; height: 34px; padding: 0; margin: 0; border: 1px solid rgba(232,199,125,.35); border-radius: 50%; background: rgba(255,255,255,.05); color: #f8e6b4; font-size: 16px; line-height: 1; cursor: pointer; }
.tpv-tb__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
.tpv-tb__grp h3 { margin: 10px 4px 6px; font: 700 12px/1.2 var(--tpv-sans, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #b3a7d6; }
.tpv-tb__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tpv-tb__t { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #e6ddff !important; text-decoration: none !important; font: 600 11.5px/1.15 var(--tpv-sans, system-ui, sans-serif); text-align: center; }
.tpv-tb__t:visited, .tpv-tb__t:hover, .tpv-tb__t:focus { color: #f8e6b4 !important; }
.tpv-tb__t .tpv-tb__ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(232,199,125,.1); color: #e8c77d; }
.tpv-tb__t .tpv-tb__tx { white-space: normal; }
.tpv-tb__t.is-cur { border-color: #e8c77d; background: rgba(232,199,125,.14); color: #f8e6b4 !important; }
.tpv-tb__t:active { transform: scale(.97); }
.tpv-tb__all { margin: 12px 4px 0; text-align: center; font-size: 13px; }
.tpv-tb__all a { color: #e8c77d; }
body.tpv-tb-open { overflow: hidden; }
@media (max-width: 359px) { .tpv-tb__grid { grid-template-columns: repeat(3, 1fr); } .tpv-tb__a { font-size: 10px; } }

/* Giao diện sáng */
html.tpv-light .tpv-tb { background: rgba(255,252,244,.98); border-top-color: #c9a24a; box-shadow: 0 -8px 28px rgba(60,40,10,.18); }
html.tpv-light .tpv-tb__a, html.tpv-light .tpv-tb__a:visited { color: #5a4a30 !important; }
html.tpv-light .tpv-tb__a:hover, html.tpv-light .tpv-tb__a:focus-visible, html.tpv-light .tpv-tb__a.is-cur, html.tpv-light .tpv-tb__more[aria-expanded="true"] { color: #6b4a00 !important; }
html.tpv-light .tpv-tb__a.is-cur .tpv-tb__ic { background: #ffecb8; }
html.tpv-light .tpv-tb__bd { background: rgba(40,30,10,.45); }
html.tpv-light .tpv-tb__panel { background: #fffdf8; border-top-color: #c9a24a; }
html.tpv-light .tpv-tb__hd b { color: #3a2a00; } html.tpv-light .tpv-tb__t.is-cur { color: #3a2a00 !important; }
html.tpv-light .tpv-tb__x { color: #6b4a00; border-color: #c9a24a; background: #fff6dd; }
html.tpv-light .tpv-tb__grp h3 { color: #7a6a50; }
html.tpv-light .tpv-tb__t, html.tpv-light .tpv-tb__t:visited { color: #2a2238 !important; background: #fff; border-color: rgba(60,40,10,.15); }
html.tpv-light .tpv-tb__t:hover, html.tpv-light .tpv-tb__t:focus { color: #6b4a00 !important; }
html.tpv-light .tpv-tb__t .tpv-tb__ic { background: #fff6dd; color: #8a6300; }
html.tpv-light .tpv-tb__t.is-cur { border-color: #8a6300; background: #ffecb8; }
html.tpv-light .tpv-tb__all a { color: #6b4a00; }
@media print { .tpv-tb, .tpv-tb__sheet { display: none !important; } body.has-tpv-tb { padding-bottom: 0; } }

}