body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; margin: 0; padding-bottom: 80px; user-select: none; color: #333; -webkit-tap-highlight-color: transparent;}
.card { background: white; margin: 15px; padding: 15px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.06); }
button { border: none; padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.1s; }
button:active { transform: scale(0.95); opacity: 0.8; }
input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 15px; outline: none; box-sizing: border-box; }

.bottom-nav { position: fixed; bottom: 0; width: 100%; height: 65px; background: #ffffff; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #e1e8ed; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; }
.nav-item { background: transparent; color: #94a3b8; display: flex; flex-direction: column; align-items: center; width: 25%; } /* Chuyển thành 25% cho 4 menu */
.nav-item .icon { font-size: 22px; margin-bottom: 2px; }
.nav-item .text { font-size: 11px; font-weight: bold; }
.nav-item.active { color: #11998e; }
.nav-item.active .icon { transform: scale(1.1); filter: drop-shadow(0 2px 4px rgba(17,153,142,0.3)); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid-item { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 10px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.grid-item h4 { font-size: 13px; margin: 5px 0; color: #2c3e50; }
.grid-item p { font-size: 11px; color: #7f8c8d; margin: 3px 0; line-height: 1.4; }

.toast-msg { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #1e293b; color: white; padding: 12px 24px; border-radius: 30px; font-size: 13px; font-weight: bold; z-index: 999999; opacity: 0; pointer-events: none; transition: 0.3s; }
.toast-msg.show { opacity: 1; top: 40px; }