/*
  FB mobile-like UI
  - Scoped by .cvh-fb-mobile wrapper or .cvh-bottom-nav
  - Designed to avoid affecting other pages
*/

/* Feed container */
.cvh-fb-mobile .fb-feed{max-width:720px;margin:0 auto;padding:12px 10px}
.cvh-fb-mobile .fb-card{background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.10);backdrop-filter:blur(8px)}
.cvh-fb-mobile .fb-card + .fb-card{margin-top:12px}
.cvh-fb-mobile .fb-card-hd{padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;gap:10px}
.cvh-fb-mobile .fb-card-bd{padding:12px 14px}
.cvh-fb-mobile .fb-title{font-weight:800;font-size:15px;margin:0}
.cvh-fb-mobile .fb-sub{font-size:12px;color:rgba(0,0,0,.58)}

/* Top icon bar + tabs (Facebook mobile-like) */
.cvh-fb-mobile .fb-iconbar{display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.06);border-radius:18px;
  padding:8px 10px;box-shadow:0 10px 28px rgba(0,0,0,.10);backdrop-filter:blur(10px);
  margin-bottom:10px
}
.cvh-fb-mobile .fb-iconbar a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  height:42px;border-radius:14px;text-decoration:none;color:rgba(0,0,0,.70);
  position:relative;transition:transform .08s ease, background .12s ease, color .12s ease
}
.cvh-fb-mobile .fb-iconbar a i{font-size:22px;line-height:1}
.cvh-fb-mobile .fb-iconbar a:active{transform:scale(.98)}
.cvh-fb-mobile .fb-iconbar a.active{background:rgba(13,110,253,.12);color:#0d6efd}
.cvh-fb-mobile .fb-iconbar a.active:after{content:"";position:absolute;left:26%;right:26%;bottom:4px;height:3px;border-radius:999px;background:#0d6efd}
.cvh-fb-mobile .fb-iconbar .fb-noti-dot{position:absolute;top:6px;right:18px;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#dc3545;color:#fff;
  font-size:11px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(220,53,69,.35)
}

.cvh-fb-mobile .fb-tabbar{display:flex;gap:10px;overflow:auto;scrollbar-width:none;padding:2px 2px 10px}
.cvh-fb-mobile .fb-tabbar::-webkit-scrollbar{display:none}
.cvh-fb-mobile .fb-tabbar a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:900;
  color:rgba(0,0,0,.60);background:rgba(255,255,255,.84);border:1px solid rgba(0,0,0,.06)
}
.cvh-fb-mobile .fb-tabbar a.active{color:#0d6efd;background:rgba(13,110,253,.12);border-color:rgba(13,110,253,.18)}
.cvh-fb-mobile .fb-managebar{display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(240,242,245,.92);border:1px solid rgba(0,0,0,.06);border-radius:14px;
  padding:10px 12px;margin:0 0 12px;color:rgba(0,0,0,.76);font-weight:900
}

/* Story/quick links */
.cvh-fb-mobile .fb-storybar{display:flex;gap:10px;overflow:auto;padding:6px 2px 10px;scrollbar-width:none}
.cvh-fb-mobile .fb-storybar::-webkit-scrollbar{display:none}
.cvh-fb-mobile .fb-story{flex:0 0 auto;width:120px;height:70px;border-radius:18px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(135deg, rgba(13,110,253,.14), rgba(111,66,193,.10));
}
.cvh-fb-mobile .fb-story a{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:10px 10px 9px;text-decoration:none;color:#111}
.cvh-fb-mobile .fb-story .i{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.82);border:1px solid rgba(0,0,0,.08);position:absolute;top:10px;left:10px}
.cvh-fb-mobile .fb-story .t{font-weight:800;font-size:12px;line-height:1.1}
.cvh-fb-mobile .fb-story .s{font-size:11px;opacity:.75;line-height:1.1}

/* Composer */
.cvh-fb-mobile .fb-composer{display:flex;gap:10px;align-items:center}
.cvh-fb-mobile .fb-ava{
  /* IMPORTANT: avatar frame must NOT be clipped by a circular mask */
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:auto;height:auto;
  border:none;background:transparent;
  overflow:visible;
}
/* Keep avatars round, but never round/clip the frame overlay */
.cvh-fb-mobile .fb-ava > img{width:42px;height:42px;border-radius:999px;object-fit:cover}
.cvh-fb-mobile .fb-ava .cvh-av-img{border-radius:999px;object-fit:cover}
.cvh-fb-mobile .fb-ava .cvh-av-frame{border-radius:0 !important;object-fit:contain !important}
.cvh-fb-mobile .fb-input{flex:1 1 auto;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.78);border-radius:999px;padding:10px 12px;color:rgba(0,0,0,.70);font-weight:600}
.cvh-fb-mobile .fb-actions{display:flex;gap:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.06);margin-top:12px}
.cvh-fb-mobile .fb-act{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 10px;border-radius:12px;text-decoration:none;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.86);color:#111;font-weight:800;font-size:13px}
.cvh-fb-mobile .fb-act:hover{background:rgba(13,110,253,.06);border-color:rgba(13,110,253,.22)}

/* Post */
.cvh-fb-mobile .fb-post-hd{display:flex;gap:10px;align-items:center}
.cvh-fb-mobile .fb-post-meta{min-width:0}
.cvh-fb-mobile .fb-post-name{font-weight:900;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvh-fb-mobile .fb-post-time{font-size:12px;color:rgba(0,0,0,.55)}
.cvh-fb-mobile .fb-post-menu{margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;color:rgba(0,0,0,.55);
  background:rgba(240,242,245,.85);border:1px solid rgba(0,0,0,.06)
}
.cvh-fb-mobile .fb-post-menu i{font-size:18px}
.cvh-fb-mobile .fb-post-title{margin:10px 0 6px;font-weight:900;font-size:15px;line-height:1.25}
.cvh-fb-mobile .fb-post-snippet{color:rgba(0,0,0,.76);font-size:14px;line-height:1.42}
.cvh-fb-mobile .fb-post-media{margin:10px -14px 0;border-top:1px solid rgba(0,0,0,.06)}
.cvh-fb-mobile .fb-post-media img{width:100%;height:auto;display:block}
.cvh-fb-mobile .fb-react-sum{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 0 8px;color:rgba(0,0,0,.60);font-weight:700;font-size:12px}
.cvh-fb-mobile .fb-react-left{display:flex;align-items:center;gap:8px;min-width:0}
.cvh-fb-mobile .fb-react-icons{display:inline-flex;align-items:center}
.cvh-fb-mobile .fb-react-ico{width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;border:2px solid #fff;margin-right:-5px;box-shadow:0 6px 14px rgba(0,0,0,.12)
}
.cvh-fb-mobile .fb-react-ico.like{background:#0d6efd}
.cvh-fb-mobile .fb-react-ico.love{background:#dc3545}
.cvh-fb-mobile .fb-react-right{white-space:nowrap}

.cvh-fb-mobile .fb-react-actions{display:flex;gap:6px;padding:8px 0 0;border-top:1px solid rgba(0,0,0,.06)}
.cvh-fb-mobile .fb-react-actions a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;
  height:40px;border-radius:12px;text-decoration:none;font-weight:900;
  color:rgba(0,0,0,.65);background:rgba(240,242,245,.75);border:1px solid rgba(0,0,0,.05)
}
.cvh-fb-mobile .fb-react-actions a i{font-size:16px}
.cvh-fb-mobile .fb-react-actions a:hover{background:rgba(13,110,253,.08);border-color:rgba(13,110,253,.16);color:#0d6efd}
.cvh-fb-mobile .fb-post-ft{display:flex;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.06)}
.cvh-fb-mobile .fb-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 10px;border-radius:12px;text-decoration:none;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.86);color:#0d6efd;font-weight:900;font-size:13px}
.cvh-fb-mobile .fb-btn:hover{background:rgba(13,110,253,.08);border-color:rgba(13,110,253,.22)}
.cvh-fb-mobile .fb-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900;
  background:rgba(220,53,69,.10);color:#dc3545;border:1px solid rgba(220,53,69,.20)}

/* Bottom nav (mobile) */
.cvh-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:1050;display:none;gap:6px;flex-wrap:nowrap;
  background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 14px 36px rgba(0,0,0,.16);backdrop-filter:blur(10px);
  padding:8px
}
.cvh-bottom-nav a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:rgba(0,0,0,.62);padding:7px 4px;border-radius:14px;font-weight:900;font-size:10px;white-space:nowrap}
.cvh-bottom-nav a i{font-size:17px}
.cvh-bottom-nav a.active{background:rgba(13,110,253,.12);color:#0d6efd}
.cvh-bottom-nav a:active{transform:scale(.98)}

@media (max-width: 576px){
  .cvh-bottom-nav{display:flex}
  /* 7 tab vẫn phải hiện đủ (Home/Feed/BXH/Chat/Shop/Tải game/Menu) */
  .cvh-bottom-nav{gap:4px;padding:7px}
  .cvh-bottom-nav a{padding:6px 3px;font-size:9px}
  .cvh-bottom-nav a i{font-size:16px}
  /* chừa chỗ cho bottom nav */
  main#app{padding-bottom:82px}
  /* giảm padding feed */
  .cvh-fb-mobile .fb-feed{padding:10px 10px}
  .cvh-fb-mobile .fb-iconbar a i{font-size:21px}
}