/* Thanh menu duoi kieu Facebook (dung chung chot.php, thong-ke.php): noi DE LEN noi dung, khong co dai nen rieng */
.tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) * .5 + 8px); z-index: 30;
        width: min(560px, calc(100% - 24px)); margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
        padding: 4px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 26px; background: rgba(255, 255, 255, .96);
        box-shadow: 0 8px 28px rgba(15, 23, 42, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tabs a { display: flex; align-items: center; justify-content: center; padding: 6px 0; border-radius: 22px; color: #111827; text-decoration: none; }
.tabs a span { display: none; }
.tabs a svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs a.on { background: #e7f0ff; color: #1d6bf3; }
.tabs a.on svg { fill: currentColor; }
.tabs a:active { background: #f1f5f9; }
.tabs a.on svg .in { stroke: #fff; }
.tabs a.desk { display: none; }
.tabs a svg circle { fill: none; }

/* May tinh (>= 900px): bo thanh duoi, dung menu trai co dinh (giong man Don hang). Dien thoai: giu thanh duoi, an menu trai. */
.deskside { display: none; }
@media (min-width: 900px) {
  .tabs { display: none !important; }
  .deskside { display: block; }
  .deskside .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; overflow-y: auto; }
  body { padding-left: 208px; }
  html.sbmin body { padding-left: 64px; }
}

/* nut quay lai dau man con */
.hd .hback { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid #e8ecf2;
             color: #0f172a; text-decoration: none; font-size: 26px; line-height: 1; padding-bottom: 3px; }
.hd .hback:active { background: #eef3fb; }

/* ===== 22/10/2026: muot nhu app that (app KhoLive + trinh duyet dien thoai) ===== */
.tabs a { position: relative; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: color .18s; }
.tabs a::before { content: ''; position: absolute; inset: 0; border-radius: 22px; background: #e7f0ff; transform: scale(.4); opacity: 0; transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; z-index: -1; }
.tabs a.on { background: transparent; }
.tabs a.on::before { transform: scale(1); opacity: 1; }
.tabs a svg { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.tabs a:active { background: transparent; }
.tabs a:active::before { opacity: .7; transform: scale(.92); }
.tabs a.pop::before { transform: scale(1); opacity: 1; animation: klbub .42s cubic-bezier(.34, 1.56, .64, 1); }   /* bong bong no ra khi cham */
.tabs a.pop svg { animation: klnay .42s cubic-bezier(.34, 1.56, .64, 1); }
.tabs a.pop { color: #1d6bf3; }
@keyframes klbub { 0% { transform: scale(.3); opacity: .3; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes klnay { 0% { transform: scale(1); } 35% { transform: scale(.78); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
.tabs { isolation: isolate; view-transition-name: kltabs; }   /* thanh menu dung yen khi chuyen trang */

/* Chuyen trang (PHP nhieu trang) khong nhay trang: trang cu mo, trang moi truot nhe vao. Chrome / WebView 126+, Safari 18.2+ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: klout .16s ease-in both; }
::view-transition-new(root) { animation: klin .22s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-group(kltabs) { animation-duration: 0s; }
@keyframes klout { to { opacity: 0; } }
@keyframes klin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .tabs a.pop::before, .tabs a.pop svg { animation: none; } }

/* Keo xuong de lam moi (chi trong app) */
.klptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); z-index: 90; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%;
         background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .18); display: grid; place-items: center; transform: translateY(-60px); opacity: 0; pointer-events: none; }
.klptr svg { width: 20px; height: 20px; stroke: #1d6bf3; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.klptr.go svg { animation: klspin .7s linear infinite; }
@keyframes klspin { to { transform: rotate(360deg); } }
html.klapp, html.klapp body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }