/* ═══════════════════════════════════════════════════════════
   INNER.CSS — Shared inner-page styles
   Layout · Breadcrumb · Page Header · FB Grid · Load-More · Post Popup
   ═══════════════════════════════════════════════════════════ */

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:96px 24px 64px;}
.pg-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--sub);margin-bottom:22px;}
.pg-breadcrumb a{color:var(--sub);text-decoration:none;transition:.15s;}
.pg-breadcrumb a:hover{color:var(--txt);}
.pg-breadcrumb span{opacity:.4;}
.pg-hd{margin-bottom:36px;}
.pg-hd-icon{font-size:2.4rem;margin-bottom:8px;}
.pg-hd h1{font-size:1.9rem;font-weight:900;letter-spacing:-.5px;}
.pg-hd p{font-size:.9rem;color:var(--sub);margin-top:8px;line-height:1.7;}
.pg-hd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.fb-visit-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:#1877F2;color:#fff;border-radius:40px;font-weight:700;font-size:.85rem;text-decoration:none;transition:.25s;flex-shrink:0;}
.fb-visit-btn:hover{background:#1558b0;transform:translateY(-2px);}

/* ── FB GRID ─────────────────────────────────────────────── */
.fb-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.fb-card{border-radius:16px;background:var(--card);border:1px solid var(--brd);overflow:hidden;color:var(--txt);transition:.35s;display:flex;flex-direction:column;cursor:pointer;user-select:none;}
.fb-card:hover{transform:translateY(-6px);border-color:rgba(66,103,178,.48);box-shadow:0 16px 40px rgba(0,0,0,.3);}
.fb-card:focus{outline:2px solid var(--gr1);outline-offset:2px;}
.fb-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.fb-thumb-empty{width:100%;aspect-ratio:4/3;background:#0A4F20;opacity:.5;}
.fb-thumb-wrap{position:relative;display:block;line-height:0;}
.fb-vid-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);pointer-events:none;}
.fb-vid-badge span{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.68);border:2px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;transition:.2s;}
.fb-card:hover .fb-vid-badge span{background:rgba(0,0,0,.85);border-color:#fff;transform:scale(1.08);}
.fb-vid-badge svg{margin-left:3px;}
.fb-thumb-no-img{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#0c1a2e,#0a2010);display:flex;align-items:center;justify-content:center;}
.fb-thumb-no-img svg{opacity:.35;}
.fb-body{padding:11px 14px 8px;flex:1;}
.fb-text{font-size:.8rem;color:var(--sub);line-height:1.58;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.fb-foot{padding:8px 14px;border-top:1px solid rgba(255,255,255,.05);display:flex;gap:13px;align-items:center;}
.fb-stat{font-size:.68rem;color:rgba(255,255,255,.28);}
.fb-read{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--thuy);white-space:nowrap;}
.fb-empty{grid-column:1/-1;text-align:center;padding:80px 24px;color:var(--sub);}
.fb-empty-ico{font-size:3rem;margin-bottom:12px;}

/* ── LOAD MORE ───────────────────────────────────────────── */
.load-more-wrap{text-align:center;margin-top:32px;}
.btn-load-more{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;background:rgba(0,230,118,.1);color:var(--gr1);border:1px solid rgba(0,230,118,.3);border-radius:40px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;transition:.25s;}
.btn-load-more:hover{background:rgba(0,230,118,.18);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,230,118,.2);}

/* ── POST POPUP — FB embed ───────────────────────────────── */
.pp-ov{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);z-index:8000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:.22s;}
.pp-ov.open{opacity:1;pointer-events:all;}
.pp-box{background:#f0f2f5;border-radius:22px;width:min(540px,96vw);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;position:relative;transform:translateY(24px) scale(.97);transition:.22s;box-shadow:0 40px 100px rgba(0,0,0,.7);}
.pp-ov.open .pp-box{transform:none;}
.pp-close{position:absolute;top:10px;right:10px;z-index:10;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.32);border:none;color:#fff;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.pp-close:hover{background:rgba(0,0,0,.55);}
.pp-embed-wrap{flex:1;overflow-y:auto;line-height:0;background:#f0f2f5;}
.pp-embed-wrap iframe{width:100%;min-height:580px;display:block;border:none;overflow:hidden;}
.pp-bar{background:#1a1d27;border-top:1px solid rgba(255,255,255,.08);padding:10px 14px;display:flex;gap:8px;flex-shrink:0;}
.pp-fb-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:#1877F2;color:#fff;border-radius:10px;font-weight:700;font-size:.85rem;text-decoration:none;transition:.2s;}
.pp-fb-btn:hover{background:#1558b0;}
.pp-dismiss{padding:11px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:rgba(237,240,255,.5);font-size:.82rem;cursor:pointer;font-family:inherit;transition:.15s;}
.pp-dismiss:hover{background:rgba(255,255,255,.1);color:#EDF0FF;}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){.fb-posts-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){
  .wrap{padding:88px 16px 56px;}
  .fb-posts-grid{grid-template-columns:1fr;}
  .pg-hd-row{flex-direction:column;align-items:flex-start;}
  .pp-bar{flex-direction:column;}
}