.tn-tabbar{display:none}@media (max-width:900px){.tn-tabbar{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:1250;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;border:1px solid #f1e3d6;border-radius:18px;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px;display:grid;position:fixed;box-shadow:0 6px 22px #0000001f}.tn-tabbar>button{color:#6b7280;min-width:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:#0000;background:0 0;border:0;border-radius:12px;flex-direction:column;align-items:center;gap:1px;padding:2px 0 3px;display:flex}.tn-tabbar>button.on{color:#c1272d}.tn-tabbar>button.on .tb-label{background:#fde8e8}.tn-tabbar>button.open .tb-ico{transform:translateY(-2px)}.tn-tabbar .tb-ico{transition:transform .15s}.tn-tabbar .tb-label{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;border-radius:6px;max-width:100%;padding:1px 4px;font-size:11px;font-weight:600;line-height:14px;overflow:hidden}body:has(.tn-tabbar){padding-bottom:calc(80px + env(safe-area-inset-bottom))}}.tb-pop{transform-origin:var(--tb-arrow,50%) 100%;background:#fff;border:1px solid #f1e3d6;border-radius:18px;flex-direction:column;gap:2px;padding:10px 8px 8px;animation:.18s ease-out tb-pop;display:flex;position:absolute;bottom:calc(100% + 10px);left:0;right:0;box-shadow:0 -6px 30px -8px #00000038}.tb-pop:after{content:"";bottom:-7px;left:calc(var(--tb-arrow,50%) - 7px);background:#fff;border-bottom:1px solid #f1e3d6;border-right:1px solid #f1e3d6;border-radius:0 0 3px;width:14px;height:14px;position:absolute;transform:rotate(45deg)}@keyframes tb-pop{0%{opacity:0;transform:translateY(8px)scale(.97)}}.tb-pop-title{letter-spacing:.06em;text-transform:uppercase;color:#9ca3af;padding:0 10px 6px;font-size:12px;font-weight:800}.tb-pop-item{color:#1f2937;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:#0000;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:10px;font-size:15px;font-weight:600;text-decoration:none;display:flex}.tb-pop-item i{color:#c1272d;background:#fff1f1;border-radius:10px;flex:none;place-items:center;width:34px;height:34px;display:grid}.tb-pop-item:active,.tb-pop-item:hover{background:#fff5f5}.tb-pop-item.on{color:#9f1d22;background:#fde8e8}.tb-pop-item.on i{color:#fff;background:#c1272d}@media (prefers-reduced-motion:reduce){.tb-pop{animation:none}}.tn-tabbar .tb-ico{width:36px;height:36px;display:block;position:relative;overflow:hidden}.tn-tabbar .tb-ico:before{content:"";background:url(/trangnguyen/images/taskbar/bg.png) 0 0/300px no-repeat;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%;transform:scale(.7)}.tn-tabbar .tb-ico .tb-line{display:none}.tn-tabbar .tb-ico.home:before{background-position:-10px -42px}.tn-tabbar .tb-ico.hoctap:before{background-position:-66px -42px}.tn-tabbar .tb-ico.canhan:before{background-position:-238px -42px}.tn-tabbar .tb-ico.giaitri:before{background:url(/trangnguyen/images/taskbar/reels.svg) 50%/48px no-repeat}.tn-tabbar .tb-ico.khoahoc:before{background:url(/trangnguyen/images/taskbar/khoahoc.svg) 50%/48px no-repeat}.tn-tabbar button.on .tb-ico.home:before{background-position:-10px -120px}.tn-tabbar button.on .tb-ico.hoctap:before{background-position:-66px -120px}.tn-tabbar button.on .tb-ico.canhan:before{background-position:-238px -120px}.tn-tabbar button.on .tb-ico.giaitri:before{background-image:url(/trangnguyen/images/taskbar/reels-on.svg);background-size:50px}.tn-tabbar button.on .tb-ico.khoahoc:before{background-image:url(/trangnguyen/images/taskbar/khoahoc-on.svg);background-size:50px}html[data-theme=dark] .tn-tabbar{background:#19154aeb;border-color:#8b5cf64d}html[data-theme=dark] .tn-tabbar>button{color:#a9a5d6}html[data-theme=dark] .tn-tabbar>button.on{color:#fda4af}html[data-theme=dark] .tn-tabbar>button.on .tb-label{background:#f43f5e2e}html[data-theme=dark] .tn-tabbar .tb-pop,html[data-theme=dark] .tn-tabbar .tb-pop:after{background:#1f2133;border-color:#8b5cf64d}html[data-theme=dark] .tn-tabbar .tb-pop-item{color:#e8eaf6}html[data-theme=dark] .tn-tabbar .tb-pop-item i{color:#fda4af;background:#f43f5e29}html[data-theme=dark] .tn-tabbar .tb-pop-item:active,html[data-theme=dark] .tn-tabbar .tb-pop-item:hover{background:#ffffff0d}html[data-theme=dark] .tn-tabbar .tb-pop-item.on{color:#fecdd3;background:#f43f5e29}html[data-theme=dark] .tn-tabbar .tb-pop-item.on i{color:#fff;background:#c1272d}html[data-skin=hanzi] .tn-tabbar{background:var(--hz-card,#fffaf0);border:2px solid var(--hz-ink,#2a2421);box-shadow:3px 4px 0 0 var(--hz-shadow,#0003);border-radius:12px 16px 11px 15px/15px 11px 16px 12px}html[data-skin=hanzi] .tn-tabbar>button{color:var(--hz-ink-2,#6b5a48)}html[data-skin=hanzi] .tn-tabbar>button.on{color:var(--hz-ink,#2a2421)}html[data-skin=hanzi] .tn-tabbar>button.on .tb-label{background:0 0;font-weight:800}html[data-skin=hanzi] .tn-tabbar .tb-ico{border-radius:8px 10px 7px 9px;place-items:center;width:34px;height:30px;display:grid;overflow:visible}html[data-skin=hanzi] .tn-tabbar .tb-ico:before{display:none}html[data-skin=hanzi] .tn-tabbar .tb-ico .tb-line{width:22px;height:22px;display:block}html[data-skin=hanzi] .tn-tabbar button.on .tb-ico{background:var(--hz-mark,#f6c65b);box-shadow:0 0 0 1.6px var(--hz-ink,#2a2421),2px 2px 0 1px var(--hz-shadow,#0003);color:#c1272d}html[data-skin=hanzi] .tn-tabbar .tb-pop{background:var(--hz-card,#fffaf0);border:2px solid var(--hz-ink,#2a2421);box-shadow:3px 4px 0 0 var(--hz-shadow,#0003)}html[data-skin=hanzi] .tn-tabbar .tb-pop:after{background:var(--hz-card,#fffaf0);border-color:var(--hz-ink,#2a2421);border-style:solid;border-width:0 2px 2px 0}html[data-skin=hanzi] .tn-tabbar .tb-pop-item{color:var(--hz-ink,#2a2421)}html[data-skin=hanzi] .tn-tabbar .tb-pop-item i{background:var(--hz-mark,#f6c65b);color:var(--hz-ink,#2a2421)}html[data-skin=hanzi] .tn-tabbar .tb-pop-item.on{background:#f6c65b4d}html[data-skin=hanzi][data-theme=dark] .tn-tabbar{background:var(--hz-card)}html[data-skin=hanzi][data-theme=dark] .tn-tabbar>button.on{color:#f6ecdc}html[data-skin=hanzi][data-theme=dark] .tn-tabbar button.on .tb-ico{color:#8a1c1c}.tb-pop{--c1:#fbbf24;--c2:#f97316;border:0;border-radius:22px;gap:0;padding:0 0 6px;overflow:visible;box-shadow:0 18px 44px -14px #0f172a52,0 0 0 1px #0f172a0f}.tb-pop:after{border:0;box-shadow:3px 3px 6px -3px #0f172a1f}.tb-pop.g-hoctap{--c1:#4ade80;--c2:#16a34a}.tb-pop.g-giaitri{--c1:#fb7185;--c2:#db2777}.tb-pop.g-khoahoc{--c1:#60a5fa;--c2:#2563eb}.tb-pop.g-canhan{--c1:#f87171;--c2:#c1272d}.tb-pop-title{display:none}.tb-pop-head{background:linear-gradient(135deg, color-mix(in srgb, var(--c1) 22%, #fff), color-mix(in srgb, var(--c2) 12%, #fff));border-radius:22px 22px 0 0;align-items:center;gap:12px;margin-bottom:4px;padding:12px 14px;display:flex}.tb-pop-head>span:last-child{flex-direction:column;gap:1px;min-width:0;display:flex}.tb-pop-head>span:last-child b{color:#1f2937;font-size:16px;font-weight:800}.tb-pop-head>span:last-child small{color:#6b7280;font-size:12.5px}.tn-tabbar .tb-pop-head .tb-ico{width:46px;height:46px;filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--c2) 35%, transparent));flex:none}.tn-tabbar .tb-pop-head .tb-ico:before{transform:scale(.9)}.tn-tabbar .tb-pop-head .tb-ico.home:before{background-position:-10px -120px}.tn-tabbar .tb-pop-head .tb-ico.hoctap:before{background-position:-66px -120px}.tn-tabbar .tb-pop-head .tb-ico.canhan:before{background-position:-238px -120px}.tn-tabbar .tb-pop-head .tb-ico.giaitri:before{background-image:url(/trangnguyen/images/taskbar/reels-on.svg);background-size:52px}.tn-tabbar .tb-pop-head .tb-ico.khoahoc:before{background-image:url(/trangnguyen/images/taskbar/khoahoc-on.svg);background-size:52px}.tb-pop-item{border-radius:14px;gap:12px;margin:0 6px;padding:8px 10px;position:relative}.tb-pop-item i{background:linear-gradient(145deg, var(--c1), var(--c2));color:#fff;width:38px;height:38px;box-shadow:inset 0 1px 0 #ffffff73,inset 0 -2px 0 #0000001f,0 4px 10px -4px color-mix(in srgb, var(--c2) 70%, transparent);border-radius:12px}.tb-pop-item>span{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.tb-pop-item>span b{color:#1f2937;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:700;overflow:hidden}.tb-pop-item>span small{color:#9ca3af;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;overflow:hidden}.tb-pop-item .tb-pop-go{color:#d1d5db;flex:none;transition:transform .15s,color .15s}.tb-pop-item:hover,.tb-pop-item:active{background:color-mix(in srgb, var(--c2) 8%, #fff)}.tb-pop-item:hover .tb-pop-go,.tb-pop-item:active .tb-pop-go{color:var(--c2);transform:translate(2px)}.tb-pop-item.on{background:color-mix(in srgb, var(--c2) 12%, #fff);color:inherit}.tb-pop-item.on i{background:linear-gradient(145deg, var(--c1), var(--c2));color:#fff}.tb-pop-item.on b{color:color-mix(in srgb, var(--c2) 85%, #000)}.tb-pop-item.on:before{content:"";background:var(--c2);border-radius:0 3px 3px 0;width:3px;position:absolute;top:10px;bottom:10px;left:-6px}.tb-pop-item+.tb-pop-item{margin-top:2px}html[data-theme=dark] .tb-pop{box-shadow:0 18px 44px -14px #0009,0 0 0 1px #ffffff14}html[data-theme=dark] .tb-pop-head{background:linear-gradient(135deg, color-mix(in srgb, var(--c1) 22%, #1f2133), color-mix(in srgb, var(--c2) 14%, #1f2133))}html[data-theme=dark] .tb-pop-head>span:last-child b{color:#f1f2fb}html[data-theme=dark] .tb-pop-head>span:last-child small{color:#a9a5d6}html[data-theme=dark] .tb-pop-item>span b{color:#e8eaf6}html[data-theme=dark] .tb-pop-item>span small{color:#8f8bbd}html[data-theme=dark] .tb-pop-item .tb-pop-go{color:#4b4f73}html[data-theme=dark] .tb-pop-item:hover,html[data-theme=dark] .tb-pop-item:active{background:color-mix(in srgb, var(--c2) 14%, #1f2133)}html[data-theme=dark] .tb-pop-item.on{background:color-mix(in srgb, var(--c2) 20%, #1f2133)}html[data-theme=dark] .tb-pop-item.on b{color:#fff}html[data-skin=hanzi] .tb-pop-head{border-bottom:2px dashed var(--hz-ink,#2a2421);background:#f6c65b38;border-radius:12px 16px 0 0}html[data-skin=hanzi] .tb-pop-head b{color:var(--hz-ink,#2a2421)}html[data-skin=hanzi] .tb-pop-head .tb-ico{background:var(--hz-mark,#f6c65b);width:40px;height:40px;box-shadow:0 0 0 1.6px var(--hz-ink,#2a2421);color:#c1272d;filter:none;border-radius:10px;place-items:center;display:grid}html[data-skin=hanzi] .tb-pop-head .tb-ico .tb-line{width:24px;height:24px;display:block}html[data-skin=hanzi] .tb-pop-item i{background:var(--hz-card,#fffaf0);color:var(--hz-ink,#2a2421);box-shadow:0 0 0 1.6px var(--hz-ink,#2a2421),2px 2px 0 0 var(--hz-shadow,#0003)}html[data-skin=hanzi] .tb-pop-item.on{background:#f6c65b4d}html[data-skin=hanzi] .tb-pop-item.on i{background:var(--hz-mark,#f6c65b);color:var(--hz-ink,#2a2421)}html[data-skin=hanzi] .tb-pop-item.on:before{background:var(--hz-ink,#2a2421)}
