/* MENU_CSS_HEAD_v1 — gom CSS cua drawer luoi o, danh muc, avatar, nut nhac. Truoc day cac khoi nay in ra giua lam trinh duyet tinh lai layout (giat). */ /* --- vung cuon cua drawer --- */ .drawer-nav{overflow-y:auto;-webkit-overflow-scrolling:touch} .mg-wrap,.mc-wrap{flex:none} /* --- the nguoi dung + luoi o cong cu --- */ .mg-wrap{padding:12px 14px 4px} .mg-user{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:12px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;text-decoration:none;color:inherit} .mg-user .mg-u-name{font-weight:700;font-size:.95rem;line-height:1.25} .mg-user .mg-u-sub{font-size:.76rem;color:#64748b;line-height:1.3} .mg-ttl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;font-weight:700;margin:0 2px 8px} .mg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .mg-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;text-decoration:none;color:#0f172a;min-height:70px;text-align:center} .mg-cell:active{transform:scale(.97)} .mg-cell .mg-i{font-size:1.35rem;line-height:1} .mg-cell .mg-l{font-size:.73rem;font-weight:600;line-height:1.2} /* --- nut bat nhac + thong bao --- */ .mg-push{width:100%;padding:11px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font-weight:700;font-size:.86rem;cursor:pointer;font-family:inherit} .mg-push:disabled{opacity:.6} .mg-note{display:flex;align-items:center;gap:8px;width:100%;padding:11px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font-weight:700;font-size:.86rem;text-decoration:none;color:#0f172a;justify-content:center} .mg-note-b{background:#ef4444;color:#fff;border-radius:999px;font-size:.72rem;padding:1px 8px} /* --- danh muc chu de --- */ .mc-wrap{padding:4px 14px 14px} .mc-ttl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;font-weight:700;margin:14px 2px 6px} .mc-list{list-style:none;margin:0;padding:0} .mc-list a{display:flex;align-items:center;gap:10px;padding:9px 4px;text-decoration:none;color:#0f172a;font-size:.9rem;border-bottom:1px solid #f1f5f9} .mc-list .mc-i{font-size:1.05rem;width:22px;text-align:center;flex:none} .mc-list .mc-n{margin-left:auto;font-size:.74rem;font-weight:700;color:#64748b;background:#f1f5f9;border-radius:999px;padding:2px 8px;min-width:26px;text-align:center} .mc-all{display:block;margin-top:10px;text-align:center;font-weight:700;font-size:.84rem;text-decoration:none;color:#0f172a;background:#f1f5f9;border-radius:12px;padding:9px} /* --- avatar tai khoan --- */ .me-ava{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;color:#fff;font-weight:700;line-height:1;flex:none;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.9)} .me-ava-guest{background:#cbd5e1} .bottom-nav-item .me-ava{box-shadow:0 0 0 2px rgba(255,255,255,.9)} /* --- desktop dung drawer --- */ @media (min-width:1024px){ .mg-grid{grid-template-columns:repeat(3,1fr)} .mg-cell{min-height:78px} .mg-cell .mg-i{font-size:1.5rem} .mg-cell .mg-l{font-size:.78rem} }