/**
 * Evabiz home v10 — Facebook feed cards
 * Fix excerpt under image · no duplicate status · no view stats
 */

body.eb-social-home {
  --n-bg: #f0ebe4;
  --n-surface: #ffffff;
  --n-ink: #1c1410;
  --n-soft: #3d342e;
  --n-muted: #7a7068;
  --n-faint: #a39a90;
  --n-line: rgba(28, 20, 16, 0.08);
  --n-plum: #3d2a32;
  --n-plum-deep: #2a1c22;
  --n-coral: #e07a5f;
  --n-coral-hot: #d4654a;
  --n-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --n-display: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --n-max: 1180px;
  --n-nav-h: 56px;
  --fb-left: 220px;
  --fb-right: 300px;
  --fb-gap: 1rem;

  background: var(--n-bg) !important;
  color: var(--n-ink) !important;
  font-family: var(--n-font) !important;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.eb-social-home,
body.eb-social-home h1,
body.eb-social-home h2,
body.eb-social-home h3,
body.eb-social-home p,
body.eb-social-home a,
body.eb-social-home span,
body.eb-social-home li,
body.eb-social-home button,
body.eb-social-home input {
  font-family: var(--n-font) !important;
}

body.eb-social-home #app {
  background: transparent !important;
}

body.eb-social-home .header-wrap,
body.eb-social-home .login-form-side,
body.eb-social-home .woodmart-close-side,
body.eb-social-home .promotion-sticky {
  display: none !important;
}

/* Legacy CMS layout (config_shows) — replaced by server feed */
body.eb-social-home #app > .section-content,
body.eb-social-home .section-content[data-eb-hidden-cms="1"] {
  display: none !important;
}

/* —— Nav —— */
.nang-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(42, 28, 34, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nang-nav-inner {
  max-width: var(--n-max);
  margin: 0 auto;
  min-height: var(--n-nav-h);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nang-logo {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  flex-shrink: 0;
}

/* Dark-bg logo only — no text wordmark */
.nang-logo-img,
.nang-logo-dark {
  height: 34px;
  width: auto;
  max-width: 148px;
  object-fit: contain;
  display: block;
}

.nang-logo-text {
  display: none !important;
}

.nang-search {
  flex: 1 1 auto;
  max-width: 280px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  color: rgba(250, 246, 241, 0.55);
}

.nang-search input {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100%;
  font-size: 0.85rem !important;
  color: #faf6f1 !important;
}

.nang-search input::placeholder {
  color: rgba(250, 246, 241, 0.45) !important;
}

.nang-nav-links {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}

.nang-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: rgba(250, 246, 241, 0.62) !important;
  text-decoration: none !important;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border-bottom: none !important;
}

.nang-nav-links a i {
  font-size: 1rem;
}

.nang-nav-links a.is-active,
.nang-nav-links a:hover {
  color: #faf6f1 !important;
  background: rgba(255, 255, 255, 0.08);
}

.nang-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nang-btn-write {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--n-coral);
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.nang-btn-write:hover {
  background: var(--n-coral-hot);
  color: #fff !important;
}

.nang-btn-ghost {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: rgba(250, 246, 241, 0.85) !important;
  text-decoration: none !important;
  padding: 0.4rem 0.65rem;
}

.nang-avatar-link img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* —— Featured hero —— */
.nang-hero,
.nang-featured-hero {
  background: linear-gradient(125deg, var(--n-plum-deep) 0%, var(--n-plum) 55%, #4a3038 100%);
  color: #f7f0e8;
  overflow: hidden;
  position: relative;
}

.nang-featured-inner {
  max-width: var(--n-max);
  margin: 0 auto;
  padding: 1.5rem 1rem 1.75rem;
  position: relative;
}

.nang-featured-kicker {
  margin: 0 0 0.25rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--n-coral) !important;
}

.nang-featured-head h1 {
  font-family: var(--n-display) !important;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem) !important;
  font-weight: 550 !important;
  color: #faf6f1 !important;
  margin: 0 0 0.25rem !important;
  line-height: 1.25 !important;
}

.nang-featured-sub {
  margin: 0 0 1rem !important;
  font-size: 0.88rem !important;
  color: rgba(250, 246, 241, 0.55) !important;
}

.nang-featured-track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.nang-featured-track::-webkit-scrollbar {
  display: none;
}

.nang-featured-card {
  flex: 0 0 min(300px, 78vw);
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  color: #faf6f1 !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, background 0.15s ease;
}

.nang-featured-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

.nang-featured-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #2a1c22;
}

.nang-featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.nang-featured-body {
  padding: 0.75rem 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.nang-featured-body h3 {
  margin: 0 !important;
  font-size: 0.98rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  color: #faf6f1 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nang-featured-author {
  margin: 0 !important;
  font-size: 0.75rem !important;
  color: rgba(250, 246, 241, 0.55) !important;
}

.nang-featured-empty {
  padding: 1.25rem;
  color: rgba(250, 246, 241, 0.7);
  font-size: 0.9rem;
}

.nang-featured-nav {
  position: absolute;
  right: 1rem;
  top: 1.5rem;
  display: flex;
  gap: 0.35rem;
}

.nang-feat-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nang-feat-btn:hover {
  background: rgba(224, 122, 95, 0.85);
  border-color: transparent;
}

.nang-chip,
.nang-chip-static {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100%;
  padding: 0.22rem 0.5rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--n-soft) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nang-cover-wrap .nang-chip {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 3 !important;
  box-shadow: 0 2px 8px rgba(28, 20, 16, 0.08);
}

/* —— Facebook 3-col shell —— */
.fb-shell {
  max-width: var(--n-max);
  margin: 0 auto;
  padding: 1rem 0.85rem 2.5rem;
  display: grid;
  grid-template-columns: var(--fb-left) minmax(0, 1fr) var(--fb-right);
  gap: var(--fb-gap);
  align-items: start;
}

.fb-col {
  min-width: 0;
}

.fb-left,
.fb-right {
  position: sticky;
  top: calc(var(--n-nav-h) + 12px);
  max-height: calc(100vh - var(--n-nav-h) - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.fb-panel {
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.75rem;
}

.fb-left-me {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none !important;
  color: var(--n-ink) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 0.35rem 0.25rem 0.65rem;
  border-bottom: 1px solid var(--n-line);
  margin-bottom: 0.45rem;
}

.fb-left-me img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.fb-left-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fb-left-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.45rem;
  border-radius: 8px;
  color: var(--n-soft) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.fb-left-nav a i {
  width: 1.25rem;
  text-align: center;
  color: var(--n-coral);
}

.fb-left-nav a:hover {
  background: var(--n-bg);
  color: var(--n-ink) !important;
}

/* Status composer (Facebook-like) */
.fb-composer {
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: 12px;
  padding: 0.85rem 1rem 0.55rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px rgba(28, 20, 16, 0.04);
}

.fb-composer-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.fb-composer-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.fb-composer-input {
  flex: 1;
  display: block;
  background: var(--n-bg);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  color: var(--n-muted) !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fb-composer-input:hover {
  border-color: var(--n-line);
  background: #efe8df;
}

.fb-composer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--n-line);
  padding-top: 0.35rem;
}

.fb-composer-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.35rem;
  border-radius: 8px;
  color: var(--n-muted) !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.fb-composer-act i {
  color: var(--n-coral);
}

.fb-composer-act:hover {
  background: var(--n-bg);
  color: var(--n-ink) !important;
}

.fb-feed-head h2 {
  margin: 0 0 0.65rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--n-muted) !important;
}

/* Feed: single column (Facebook) */
.fb-feed-list,
#eb-nang-grid,
.nang-feed-more.fb-feed,
.fb-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem;
}

/* —— Facebook post header —— */
.fb-post-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem 0.5rem;
}

.fb-post-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.fb-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-post-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.fb-post-name-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.fb-post-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--n-ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.fb-post-name:hover {
  text-decoration: underline !important;
}

/* Instagram-like blue verified badge (admin accounts) */
.fb-verified {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3897f0;
  color: #fff !important;
  flex-shrink: 0;
  font-size: 0.55rem !important;
  line-height: 1 !important;
}

.fb-verified i {
  font-size: 0.55rem !important;
  color: #fff !important;
}

.fb-post-time {
  font-size: 0.75rem !important;
  color: var(--n-faint) !important;
  margin-top: 0.1rem;
}

.fb-follow-btn {
  flex-shrink: 0;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: #e7f3ff;
  color: #1877f2 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  font-family: var(--n-font) !important;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.fb-follow-btn:hover {
  background: #d8ebff;
}

.fb-follow-btn.is-following {
  background: var(--n-bg);
  color: var(--n-muted) !important;
}

/*
 * Body stack (strict document flow — no absolute layers):
 *   title → excerpt → image → actions
 * Absolute images were stacking over long excerpts.
 */
body.eb-social-home .fb-feed-card .fb-post-body,
.fb-feed-card .fb-post-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: static !important;
  padding: 0.2rem 0 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
}

/* Title — kill theme .osahan-post-body .article-title { margin-bottom: -1rem } */
body.eb-social-home .fb-feed-card .article-title,
body.eb-social-home .fb-feed-card .fb-post-body .article-title,
.fb-feed-card .fb-post-body .article-title {
  display: block !important;
  position: static !important;
  order: 1 !important;
  flex: 0 0 auto !important;
  padding: 0.4rem 1rem 0.35rem !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
  font-size: 1.08rem !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  color: var(--n-ink) !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  z-index: auto !important;
}

body.eb-social-home .fb-feed-card .article-title a {
  display: inline !important;
  position: static !important;
  color: var(--n-ink) !important;
  text-decoration: none !important;
  background: none !important;
}

/* Excerpt — always above image, never under absolute layers */
body.eb-social-home .fb-feed-card .summary,
body.eb-social-home .fb-feed-card .nang-card-excerpt,
body.eb-social-home .fb-feed-card .fb-post-body .summary,
.fb-feed-card .fb-post-body .summary,
.fb-feed-card .fb-post-body .nang-card-excerpt {
  display: block !important;
  position: static !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  padding: 0 1rem 0.85rem !important;
  margin: 0 0 10px 0 !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--n-muted) !important;
  line-height: 1.5 !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 4.5em !important; /* ~3 lines */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  /* multi-line clamp without absolute ancestors */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  z-index: 2 !important;
  background: var(--n-surface) !important;
  transform: none !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Cover: IN FLOW only — img is static/block, never absolute */
body.eb-social-home .fb-feed-card .fb-post-media,
.fb-feed-card .fb-post-media {
  display: block !important;
  position: static !important;
  order: 3 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  overflow: hidden !important;
  background: #e8e0d6;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 1 !important;
  transform: none !important;
  inset: auto !important;
}

body.eb-social-home .fb-feed-card .fb-post-media-link,
.fb-feed-card .fb-post-media-link {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  float: none !important;
  inset: auto !important;
}

body.eb-social-home .fb-feed-card .fb-post-cover,
body.eb-social-home .fb-feed-card .fb-post-media img,
.fb-feed-card .fb-post-cover,
.fb-feed-card .fb-post-media img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 320px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  float: none !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
}

/* Hide view-count stats row (simple card) */
.fb-post-stats,
.fb-feed-card .osahan-post-footer,
.fb-feed .osahan-post-footer {
  display: none !important;
}

/* Hide CMS "Bạn đang nghĩ gì..." under feed (duplicate of top composer) */
#eb-feed-mount .box-social,
#eb-feed-mount .box-widget.box-social,
#eb-feed-mount .btn-think,
#eb-feed-mount .post-input,
#eb-nang-grid .box-social,
body.eb-social-home #eb-feed-mount .box.box-social {
  display: none !important;
}

/* NEVER show category / chuyên mục on feed cards */
.fb-feed-card a.cat,
.fb-feed-card .badge.category,
.fb-feed-card .nang-chip,
.fb-feed .nang-chip,
#eb-nang-grid a.cat,
#eb-nang-grid .badge.category,
#eb-feed-more a.cat,
#eb-feed-more .badge.category,
#eb-feed-more .nang-chip {
  display: none !important;
}

/* Featured chips stay small labels only (not category links) */
.nang-featured-body .nang-chip-static {
  position: static !important;
  align-self: flex-start;
}

.nang-feed-more:empty {
  display: none !important;
}

/* Cards full width */
.fb-feed-card,
.fb-feed .post-item,
.fb-feed .nang-v3-card,
#eb-nang-grid > .item-news,
#eb-nang-grid > .post-item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--n-surface) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(28, 20, 16, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
}

.fb-feed-card .style_img_left,
.fb-feed-card .match-height {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  float: none !important;
  height: auto !important;
}

.fb-feed-card .content {
  padding: 0.85rem 1rem !important;
  float: none !important;
  width: 100% !important;
}

/* Legacy cover wrappers — also force static flow (no absolute img) */
body.eb-social-home .fb-feed-card .image-wrapper,
body.eb-social-home .fb-feed-card .article-image-box .image,
body.eb-social-home .fb-feed-card .image-medium {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: #e8e0d6 !important;
  inset: auto !important;
}

body.eb-social-home .fb-feed-card .image-wrapper img,
body.eb-social-home .fb-feed-card .article-image-box img,
body.eb-social-home .fb-feed-card .image-medium img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  object-fit: cover !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
}

/* Avatar images must stay round, not full-width cover rules */
body.eb-social-home .fb-feed-card .fb-post-avatar img,
body.eb-social-home .fb-feed-card .user-avatar,
body.eb-social-home .fb-feed-card .osahan-post-header img {
  width: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  position: static !important;
}

.fb-feed-card .title-news a,
.fb-feed-card .article-title a,
.fb-feed .article-title a {
  color: var(--n-ink) !important;
  text-decoration: none !important;
}

.fb-feed-card .title-news a:hover,
.fb-feed-card .article-title a:hover,
.fb-feed .article-title a:hover {
  color: var(--n-coral-hot) !important;
}

.fb-feed-card .meta-news {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem 0.65rem !important;
  font-size: 0.78rem !important;
  color: var(--n-faint) !important;
  margin-top: 0.25rem !important;
}

.fb-feed-card .meta-news a.cat {
  display: none !important;
}

.fb-feed-card .user-avatar,
.fb-feed-card .author-meta img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Post-item header (AJAX) */
.fb-feed .osahan-post-header {
  padding: 0.85rem 1rem 0.35rem !important;
}

.fb-feed .dropdown-list-image img,
.fb-feed .osahan-post-header img.rounded-circle {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.fb-feed .osahan-post-body {
  padding: 0.35rem 1rem 0.5rem !important;
}

.fb-feed .osahan-post-footer {
  padding: 0.45rem 1rem !important;
  font-size: 0.8rem !important;
  color: var(--n-faint) !important;
  border-top: 1px solid var(--n-line) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* —— Action bar: equal 3 buttons, NO wrap —— */
.action-panel,
.fb-action-bar,
.fb-feed .action-panel,
body.eb-social-home .osahan-post .action-panel {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  border-top: 1px solid var(--n-line) !important;
  margin: 0 !important;
  padding: 0.2rem 0.35rem !important;
  width: 100% !important;
}

.action-panel .social-button,
.fb-action-bar .social-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  position: relative;
}

.action-panel .fb-action-btn,
.fb-action-bar .fb-action-btn,
.action-panel .social-button > a,
.fb-action-bar .social-button > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0.45rem 0.35rem !important;
  margin: 0 !important;
  border-radius: 8px !important;
  color: var(--n-muted) !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

.action-panel .fb-action-btn:hover,
.fb-action-bar .fb-action-btn:hover,
.action-panel .social-button > a:hover {
  background: var(--n-bg) !important;
  color: var(--n-ink) !important;
}

.action-panel .fb-action-btn i,
.fb-action-bar .fb-action-btn i,
.action-panel .social-button > a i {
  font-size: 1.05rem !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.action-panel .fb-action-btn span,
.fb-action-bar .fb-action-btn span,
.action-panel .social-button > a span {
  padding: 0 !important;
  margin: 0 !important;
}

/* On very narrow: icon + short text still one line */
@media (max-width: 420px) {
  .action-panel .fb-action-btn span,
  .fb-action-bar .fb-action-btn span,
  .action-panel .social-button > a > span:not(.lv-number-post-like) {
    font-size: 0.78rem !important;
  }
}

.action-panel .share-popup,
.fb-action-bar .dropdown-menu {
  z-index: 20;
}

/* Right panel cards */
.fb-right .nang-card {
  margin-bottom: 0;
}

.nang-card {
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: 12px;
  padding: 1rem;
}

.nang-card-quote {
  background: var(--n-plum) !important;
  border: none !important;
  color: #faf6f1;
}

.nang-card-quote blockquote {
  margin: 0 0 0.65rem !important;
  font-family: var(--n-display) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  color: #faf6f1 !important;
}

.nang-card-quote cite {
  font-style: normal !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 246, 241, 0.55) !important;
}

.nang-badge {
  display: inline-block;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: var(--n-bg);
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n-soft) !important;
}

.nang-card h3 {
  margin: 0.45rem 0 0.3rem !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  color: var(--n-ink) !important;
}

.nang-card-quote h3 {
  color: #faf6f1 !important;
}

.nang-card p {
  margin: 0 0 0.65rem !important;
  font-size: 0.85rem !important;
  color: var(--n-muted) !important;
}

.nang-card-quote p {
  color: rgba(250, 246, 241, 0.7) !important;
}

.nang-card-link {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--n-coral-hot) !important;
  text-decoration: none !important;
}

.nang-btn-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--n-coral);
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.nang-btn-block {
  width: 100%;
}

.fb-topics-panel h4 {
  margin: 0 0 0.55rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-muted) !important;
}

.nang-topics-light {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.nang-topic-light {
  display: inline-flex;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--n-bg);
  border: 1px solid var(--n-line);
  color: var(--n-soft) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.nang-topic-light:hover {
  border-color: rgba(224, 122, 95, 0.4);
  color: var(--n-coral-hot) !important;
}

/* CMS chrome hide */
#eb-feed-mount .nang-cms-label-quiet,
#eb-feed-mount .nang-cms-shell-empty,
#eb-feed-mount aside.col-right,
#eb-feed-mount .col-right {
  display: none !important;
}

#eb-feed-mount .container,
#eb-feed-mount .section_container,
#eb-feed-mount .section-content,
#eb-feed-mount .wraper-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

#eb-feed-mount .section {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Load more */
.nang-more-wrap {
  margin-top: 0.5rem;
}

.nang-more-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0 1rem;
}

.nang-btn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--n-line);
  background: var(--n-surface);
  color: var(--n-ink) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.nang-btn-more:hover:not(:disabled) {
  border-color: rgba(224, 122, 95, 0.45);
  color: var(--n-coral-hot) !important;
}

.nang-btn-more:disabled {
  opacity: 0.55;
}

.nang-load-spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem !important;
  color: var(--n-muted) !important;
}

.nang-load-spinner[hidden],
.nang-load-end[hidden],
.nang-btn-more[hidden] {
  display: none !important;
}

.nang-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--n-line);
  border-top-color: var(--n-coral);
  border-radius: 50%;
  animation: nang-spin 0.7s linear infinite;
}

@keyframes nang-spin {
  to {
    transform: rotate(360deg);
  }
}

.nang-load-end {
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: var(--n-faint) !important;
}

.nang-load-sentinel {
  height: 1px;
}

body.eb-social-home .footer {
  margin-top: 0.5rem;
  border-top: 1px solid var(--n-line);
}

.nang-bottom {
  display: none;
}

/* —— Tablet: 2 col (center + right stack) —— */
@media (max-width: 1100px) {
  .fb-shell {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .fb-left {
    display: none;
  }
}

/* —— Mobile —— */
@media (max-width: 767.98px) {
  .nang-search,
  .nang-nav-links span {
    display: none;
  }

  .nang-nav-links a {
    padding: 0.45rem;
  }

  .nang-btn-write span {
    display: none;
  }

  .nang-logo-img {
    height: 30px;
    max-width: 120px;
  }

  .nang-featured-inner {
    padding: 1.15rem 0.85rem 1.25rem;
  }

  .nang-featured-nav {
    display: none;
  }

  .nang-featured-card {
    flex: 0 0 min(280px, 85vw);
  }

  .fb-shell {
    grid-template-columns: 1fr;
    padding: 0.75rem 0.65rem 5rem;
  }

  .fb-left,
  .fb-right {
    display: none;
  }

  .fb-composer-act span {
    font-size: 0.8rem !important;
  }

  body.eb-social-home {
    padding-bottom: 4.5rem;
  }

  .nang-bottom {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: rgba(246, 241, 234, 0.97);
    border-top: 1px solid var(--n-line);
    padding: 0.4rem 0.15rem calc(0.4rem + env(safe-area-inset-bottom));
    justify-content: space-around;
  }

  .nang-bottom a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    color: var(--n-faint) !important;
    text-decoration: none !important;
    padding: 0.25rem;
  }

  .nang-bottom a i {
    font-size: 1.1rem;
  }

  .nang-bottom a.is-active,
  .nang-bottom a:hover {
    color: var(--n-ink) !important;
  }

  .nang-bottom-write {
    color: var(--n-coral) !important;
  }
}

/* —— Status feed: text-on-background (FB style) —— */
.eb-status-bg,
.eb-status-bg-feed {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  color: #fff !important;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
  margin: 0.35rem 0 0.5rem;
}
.eb-status-bg-feed {
  min-height: 200px;
  font-size: 1.2rem;
}
.eb-status-feed-text {
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--n-ink, #1c1410);
  margin: 0.15rem 0 0.5rem;
  white-space: pre-wrap;
}
.eb-bg-coral { background: linear-gradient(135deg, #e85d4c 0%, #c43a2a 100%); }
.eb-bg-plum { background: linear-gradient(135deg, #5c3d5e 0%, #2d1b2e 100%); }
.eb-bg-ocean { background: linear-gradient(135deg, #1a6b8a 0%, #0d3d52 100%); }
.eb-bg-sunset { background: linear-gradient(135deg, #f5a623 0%, #e85d4c 100%); }
.eb-bg-forest { background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%); }
.eb-bg-night { background: linear-gradient(135deg, #1e1e2f 0%, #0f0f18 100%); }

/* Link preview on feed cards */
.fb-feed-card .eb-link-card,
.fb-feed .eb-link-card {
  display: block;
  margin: 0.65rem 0 0;
  border: 1px solid var(--n-line, rgba(28, 20, 16, 0.1));
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  background: #f0f2f5;
}
.fb-feed-card .eb-link-card-media img,
.fb-feed .eb-link-card-media img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}
.fb-feed-card .eb-link-card-body,
.fb-feed .eb-link-card-body {
  padding: 0.55rem 0.75rem 0.65rem;
  background: #f7f8fa;
}
.fb-feed-card .eb-link-card-host,
.fb-feed .eb-link-card-host {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #65676b;
}
.fb-feed-card .eb-link-card-title,
.fb-feed .eb-link-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
.fb-feed-card .eb-link-card-desc,
.fb-feed .eb-link-card-desc {
  font-size: 0.8rem;
  color: #65676b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* —— Owner ⋯ menu (edit / delete) —— */
.fb-post-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.eb-owner-menu {
  position: relative;
}
.eb-owner-menu-btn,
.eb-status-menu-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--n-muted, #7a7068);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.eb-owner-menu-btn:hover,
.eb-status-menu-btn:hover {
  background: rgba(28, 20, 16, 0.06);
  color: var(--n-ink, #1c1410);
}
.eb-owner-menu-list {
  min-width: 11rem;
  border-radius: 10px;
  border: 1px solid var(--n-line, rgba(28,20,16,.1));
  padding: 0.35rem 0;
}
.eb-owner-menu-list .dropdown-item {
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  display: flex;
  align-items: center;
}
.eb-owner-menu-list .dropdown-item:hover {
  background: var(--n-bg, #f7f3ee);
}

/* —— Left: legal mini-links (bizinvest-style) —— */
.fb-left-links {
  padding: 0.65rem 0.75rem !important;
}
.fb-left-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
  align-items: center;
}
.fb-left-links-row a {
  font-size: 0.72rem !important;
  color: var(--n-muted) !important;
  text-decoration: none !important;
  line-height: 1.4;
}
.fb-left-links-row a:hover {
  color: var(--n-ink) !important;
  text-decoration: underline !important;
}
.fb-left-links-row a strong {
  font-size: 0.8rem;
  color: var(--n-ink);
  font-weight: 700;
}

/* —— Right: Có thể bạn biết —— */
.fb-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.fb-suggest-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--n-ink) !important;
}
.fb-suggest-all {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--n-coral) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.fb-suggest-all:hover {
  text-decoration: underline !important;
}
.fb-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.fb-suggest-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.fb-suggest-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.fb-suggest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fb-suggest-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.fb-suggest-name {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--n-ink) !important;
  text-decoration: none !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-suggest-name .fb-verified {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  font-size: 0.5rem;
}
.fb-suggest-info {
  font-size: 0.72rem;
  color: var(--n-muted);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-suggest-follow.fb-follow-btn {
  flex: 0 0 auto;
  font-size: 0.75rem !important;
  padding: 0.3rem 0.55rem !important;
  border-radius: 999px !important;
  white-space: nowrap;
  min-height: 30px;
}
.fb-suggest-empty {
  font-size: 0.85rem;
  color: var(--n-muted);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}