.crewCommunityWrap,.crewPostWrap{max-width:1560px;margin:auto;padding:0 18px 22px}
.communityBanner,.postHero{position:relative;height:500px;border-radius:0 0 24px 24px;overflow:hidden;border-top:0;background:#050911;box-shadow:0 28px 80px rgba(0,0,0,.38)}
.communityBannerBg,.postHeroBg{position:absolute;inset:0;background-image:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.96) 12%,rgba(5,5,5,.78) 25%,rgba(5,5,5,.48) 38%,rgba(5,5,5,.12) 51%,rgba(5,5,5,0) 61%,rgba(5,5,5,.08) 70%,rgba(5,5,5,.42) 84%,#050505 100%),linear-gradient(180deg,rgba(5,5,5,.42) 0%,rgba(5,5,5,.08) 22%,rgba(5,5,5,0) 50%,rgba(5,5,5,.38) 82%,#050505 100%),url('../../crew-list/banner/home.jpg');background-size:cover;background-position:center;filter:saturate(1.18) contrast(1.05)}
.communityBannerText,.postHeroText{position:absolute;left:42px;bottom:36px;z-index:2;max-width:760px}
.communityBannerText span,.postMode{color:#ffffff;font-weight:1000;letter-spacing:2px;text-transform:uppercase}
.communityBannerText h1,.postHeroText h1{font-size:clamp(38px,5vw,60px);line-height:1;color:#fff;text-shadow:0 6px 0 rgba(0,0,0,.28),0 18px 36px rgba(0,0,0,.8);text-transform:uppercase}
.communityBannerText p,.postHeroText p{margin:0;color:#d8e7f7;line-height:1.6}
.createBuildBtn{display:inline-flex;margin-top:16px;background:linear-gradient(180deg,#b7842d,#755016);border:1px solid rgba(255,213,106,.45);border-radius:12px;color:#fff;font-weight:1000;padding:12px 18px}
.communityLayout{display:grid;grid-template-columns:310px 1fr;gap:14px;margin-top:14px}
.communityPanel,.postPanel{background:linear-gradient(180deg,rgba(13,27,44,.96),rgba(5,15,27,.96));border:1px solid rgba(255,213,106,.2);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden}
.communityHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(90deg,#0b2339,#1c3e5f);color:#ffd56a;font-weight:1000;text-transform:uppercase}
.communityHead:before{content:"✦";color:#ffb33d}
.buildListHead select{background:#071625;border:1px solid rgba(255,213,106,.25);border-radius:10px;color:#fff;padding:9px 12px;font-weight:900}
.contributorList{padding:12px;display:grid;gap:9px}.contributor{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#081625;cursor:pointer}.contributor:hover,.contributor.active{border-color:#4db4ff;background:#12243a}.rankBadge{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#ffd56a,#8a5a16);display:flex;align-items:center;justify-content:center;color:#081625;font-weight:1000}.contributor b{color:#fff}.contributor small{color:#9fb0c4}
.buildTabs{padding:14px 16px 0;display:flex;gap:10px;flex-wrap:wrap}.buildTabs button{background:#0e1d2d;border:1px solid rgba(255,213,106,.2);border-radius:10px;padding:10px 14px;color:#ffd56a;font-weight:900;cursor:pointer}.buildTabs button.active{background:linear-gradient(180deg,#173a5b,#102437);color:#fff;border-color:#408bd0}
.buildGrid{padding:14px 16px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.buildCard{position:relative;border:1px solid rgba(255,213,106,.18);border-radius:16px;background:#081625;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.buildBanner{height:120px;background-size:cover;background-position:center;position:relative}.buildBanner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),#081625)}
.buildIcon{position:absolute;top:72px;left:12px;width:62px;height:62px;border-radius:13px;z-index:2}.buildBody{padding:22px 12px 12px}.buildBody h3{margin:0 0 10px 72px;color:#fff}.miniSlots{display:flex;gap:6px;margin:10px 0}.miniSlots img{width:38px;height:38px;object-fit:contain;border-radius:8px;border:1px solid #9c6b21;background:#102036}.buildMeta{display:flex;justify-content:space-between;color:#cbd8e6;font-size:12px}.likes{color:#ffd56a;font-weight:1000}.buildCard a{position:absolute;inset:0;z-index:3}
.postMeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.postMeta span{background:rgba(7,17,30,.78);border:1px solid rgba(255,213,106,.18);border-radius:999px;padding:8px 12px;color:#fff;font-weight:900}
.postLayout{display:grid;grid-template-columns:1fr 360px;gap:14px;margin-top:14px}.postFormation{padding:24px;display:grid;grid-template-columns:repeat(3,150px);gap:18px;justify-content:center}.postSlot{height:150px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:center;position:relative}.postSlot:before{content:"♜";font-size:54px;color:rgba(255,255,255,.08)}.postSlot.filled:before{display:none}.postSlot img.heroFull{max-width:135px;max-height:145px;object-fit:contain}.postSlot .slotName{position:absolute;left:8px;right:8px;bottom:6px;text-align:center;background:rgba(0,0,0,.72);border-radius:8px;color:#ffd56a;font-size:12px;font-weight:1000}.postSlot.main{border-color:#ffd56a;box-shadow:0 0 22px rgba(255,213,106,.18)}
.postAuthorBox{padding:16px;display:grid;gap:10px}.postAuthorBox div,.postHeroList .postHeroItem{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#081625;padding:10px;color:#d8e7f7}.second{margin-top:12px}.postHeroList{padding:14px;display:grid;gap:10px}.postHeroItem{display:flex!important;align-items:center;gap:10px}.postHeroItem img{width:54px;height:54px;object-fit:contain;border-radius:10px;border:1px solid #9c6b21}
@media(max-width:980px){.communityLayout,.postLayout{grid-template-columns:1fr}.postFormation{grid-template-columns:repeat(3,1fr)}.postSlot{height:118px}.communityBanner,.postHero{height:330px}.communityBannerText,.postHeroText{left:20px;right:20px}}

/* v19 post standing layout + pagination */
.buildPager{display:flex;gap:8px;justify-content:center;padding:0 16px 18px}.buildPager button{border:1px solid rgba(255,213,106,.2);background:#0e1d2d;color:#fff;border-radius:8px;padding:8px 12px;font-weight:900}.buildPager button.active{background:#173a5b;color:#ffd56a}
.postFormation{position:relative;min-height:620px;padding:20px;background:radial-gradient(circle at 50% 40%,rgba(34,98,145,.18),transparent 60%)}
.postHeroStanding{position:absolute;width:150px;height:190px;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))}
.postHeroStanding img{max-width:150px;max-height:185px;object-fit:contain}
.postHeroStanding span{position:absolute;left:-8px;right:-8px;bottom:0;background:rgba(0,0,0,.72);border:1px solid rgba(255,213,106,.22);border-radius:8px;text-align:center;color:#ffd56a;font-size:12px;font-weight:1000;padding:4px}
.postHeroStanding.main{transform:scale(1.12);z-index:4}.slotPos0{left:24%;top:0%}.slotPos1{left:47%;top:0%}.slotPos2{left:70%;top:0%}.slotPos3{left:20%;top:31%}.slotPos4{left:47%;top:31%}.slotPos5{left:74%;top:31%}.slotPos6{left:24%;top:60%}.slotPos7{left:47%;top:60%}.slotPos8{left:70%;top:60%}
.formationAuthor{position:absolute;left:18px;top:18px;width:230px;background:rgba(7,17,30,.86);border:1px solid rgba(255,213,106,.2);border-radius:14px;padding:14px;color:#d8e7f7;display:grid;gap:8px}.formationAuthor b{color:#ffd56a}.formationAuthor button{margin-top:8px;border:1px solid rgba(255,213,106,.35);background:#0e1d2d;color:#fff;border-radius:10px;padding:10px;font-weight:1000}
.randomBuild{display:flex!important;gap:10px;align-items:center}.randomBuild img{width:54px;height:54px;border-radius:10px;border:1px solid #9c6b21;background:#071625}.randomBuild small{color:#9fb0c4}
@media(max-width:760px){.postFormation{min-height:540px}.formationAuthor{position:relative;left:auto;top:auto;width:auto;margin-bottom:12px}.postHeroStanding{width:110px;height:145px}.postHeroStanding img{max-width:110px;max-height:138px}.slotPos0{left:6%;top:34%}.slotPos1{left:36%;top:32%}.slotPos2{left:66%;top:34%}.slotPos3{left:4%;top:54%}.slotPos4{left:36%;top:52%}.slotPos5{left:68%;top:54%}.slotPos6{left:6%;top:74%}.slotPos7{left:36%;top:74%}.slotPos8{left:66%;top:74%}}

/* v20 post detail final layout */
.postLayout{grid-template-columns:1fr 360px}
.postFormation{display:grid!important;grid-template-columns:250px 1fr!important;gap:18px!important;align-items:stretch!important;min-height:620px!important;padding:20px!important}
.formationStage{position:relative;min-height:580px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:radial-gradient(circle at 50% 45%,rgba(34,98,145,.18),transparent 62%)}
.formationAuthor{position:relative!important;left:auto!important;top:auto!important;width:auto!important;order:0!important;height:max-content}
.postStar{position:absolute;bottom:30px;right:0;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,213,106,.8);background:#3a2707;color:#ffd56a;z-index:8;font-weight:1000;box-shadow:0 0 18px rgba(255,213,106,.45)}
.randomOnlyPanel .second{margin-top:0!important}
.randomBuild{display:flex!important;gap:10px;align-items:center;text-decoration:none}
.postAuthorBox{display:none!important}
@media(max-width:760px){
  .postLayout{grid-template-columns:1fr!important}
  .postFormation{display:flex!important;flex-direction:column!important;gap:12px!important;min-height:0!important;padding:12px!important}
  .formationStage{order:1;width:100%;min-height:520px}
  .formationAuthor{order:2;width:100%!important;margin:0!important}
  .randomOnlyPanel{width:100%}
}

/* v22 requested crew-post: PC author left, formation right; mobile formation first then author below */
.postFormation{display:grid!important;grid-template-columns:250px 1fr!important;gap:18px!important;align-items:stretch!important}
.formationAuthor{position:relative!important;left:auto!important;top:auto!important;width:auto!important;order:1!important;height:max-content}
.formationStage{order:2!important;position:relative;min-height:580px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:radial-gradient(circle at 50% 45%,rgba(34,98,145,.18),transparent 62%)}
@media(max-width:760px){
  .postFormation{display:flex!important;flex-direction:column!important;padding:12px!important;min-height:0!important}
  .formationStage{order:1!important;width:100%!important;min-height:520px!important}
  .formationAuthor{order:2!important;width:100%!important;margin:0!important}
}

/* v23 requested: mobile crew-index center alignment only */
@media(max-width:760px){
  .crewCommunityWrap{padding-left:10px!important;padding-right:10px!important}
  .communityLayout{grid-template-columns:1fr!important;justify-items:center!important}
  .communityPanel{width:100%!important;max-width:520px!important}
  .buildGrid{grid-template-columns:1fr!important;justify-items:center!important}
  .buildCard{width:100%!important;max-width:420px!important}
  .buildTabs{justify-content:center!important}
  .buildListHead{align-items:center!important;text-align:center!important}
}
/* v23 requested: post like + Facebook share buttons */
.postActionRow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.postActionRow button{border:1px solid rgba(255,213,106,.35);background:#0e1d2d;color:#fff;border-radius:10px;padding:10px;font-weight:1000;cursor:pointer}
.postActionRow button:hover{border-color:#4db4ff}

/* v26 requested fixes */
.formationStage{
  background-image:linear-gradient(180deg,rgba(5,10,18,.36),rgba(5,10,18,.62)),url('../../crew-list/formation/bg.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden!important;
}
.postHeroStanding{
  transform:translateX(-50%)!important;
}
.postHeroStanding.main{
  transform:translateX(-50%) scale(1.12)!important;
}
.slotPos0{left:24%!important}.slotPos1{left:50%!important}.slotPos2{left:76%!important}
.slotPos3{left:24%!important}.slotPos4{left:50%!important}.slotPos5{left:76%!important}
.slotPos6{left:24%!important}.slotPos7{left:50%!important}.slotPos8{left:76%!important}
@media(max-width:760px){
  .slotPos0{left:18%!important}.slotPos1{left:50%!important}.slotPos2{left:82%!important}
  .slotPos3{left:18%!important}.slotPos4{left:50%!important}.slotPos5{left:82%!important}
  .slotPos6{left:18%!important}.slotPos7{left:50%!important}.slotPos8{left:82%!important}
}

/* v27 fixed contributor collapse only */
.contributorHead{position:relative}
.toggleContributors{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  border:1px solid rgba(255,213,106,.52)!important;
  background:linear-gradient(180deg,#173a5b,#081625)!important;
  color:#ffd56a!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:1000!important;
  cursor:pointer!important;
  box-shadow:0 0 16px rgba(77,180,255,.18)!important;
  z-index:5!important;
}
.contributorPanel{
  transition:max-height .22s ease, box-shadow .18s ease, opacity .18s ease!important;
}
.contributorPanel.collapsed{
  max-height:62px!important;
  overflow:hidden!important;
}
.contributorPanel.collapsed .contributorList{
  display:none!important;
}

/* v28 requested only final layout fixes */
.buildCard{min-height:300px!important;display:flex;flex-direction:column!important}
.buildBanner{height:190px!important;margin-bottom:-76px!important}
.buildBody{position:relative!important;z-index:2!important;margin-top:auto!important;padding:0px 12px 12px!important;background:linear-gradient(180deg,rgba(8,22,37,.10),#081625 38%)!important}
.buildTitleRow{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:8px!important}
.buildTitleRow .buildIcon{position:static!important;width:46px!important;height:46px!important;flex:0 0 46px!important}
.buildTitleRow h3{margin:0!important;line-height:1.2!important}
.showAllAuthorPosts{width:100%;border:1px solid rgba(255,213,106,.32);background:#0e1d2d;color:#ffd56a;border-radius:10px;padding:10px;font-weight:1000;cursor:pointer}
.playerPanel{min-width:0!important}.playerInfo div{grid-template-columns:minmax(90px,1fr) minmax(0,1fr)!important}.playerInfo b{word-break:break-word!important}.myPostsLink{color:#4db4ff;font-weight:1000;text-decoration:none}.myPostsLink:hover{color:#ffd56a}

/* v30 final: equal standing heroes, no auto scale */
.postHeroStanding,
.postHeroStanding.main{
  width:200px!important;
  height:220px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
}
.postHeroStanding img,
.postHeroStanding.main img{
  max-width:200px!important;
  max-height:200px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}
@media(max-width:760px){
  .postHeroStanding,
  .postHeroStanding.main{
    width:125px!important;
    height:60px!important;
    transform:translateX(-50%)!important;
  }
  .postHeroStanding img,
  .postHeroStanding.main img{
    max-width:125px!important;
    max-height:125px!important;
  }
}

/* v31 contributor search box */
.contributorSearchBox{padding:10px 12px 0}
.contributorSearchBox input{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,213,106,.24);
  border-radius:10px;
  background:#071625;
  color:#fff;
  padding:10px 12px;
  outline:none;
}
.contributorSearchBox input:focus{border-color:#4db4ff;box-shadow:0 0 14px rgba(77,180,255,.18)}
.contributorPanel.collapsed .contributorSearchBox{display:none!important}

/* ================================================= */
/* BUILD BANNER - HOVER LÀM MỜ LỚP ĐEN              */
/* ================================================= */

#buildGrid .buildCard .buildBanner {
  position: relative;
  overflow: hidden;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  background-blend-mode: normal;

  filter:
    brightness(1)
    contrast(1.03)
    saturate(1.05);

  transition:
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

/* Hover: làm lớp đen mờ gần như biến mất */
#buildGrid .buildCard:hover .buildBanner {
  background-blend-mode: screen !important;

  filter:
    brightness(1.22)
    contrast(1.08)
    saturate(1.14);

  box-shadow:
    inset 0 0 45px rgba(255, 220, 120, 0.12),
    0 0 18px rgba(255, 190, 70, 0.18);
}

/* Vệt sáng quét nhẹ trên banner khi hover */
#buildGrid .buildCard .buildBanner::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -85%;

  width: 42%;
  height: 220%;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 35%,
      rgba(255, 255, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.06) 65%,
      transparent 100%
    );

  transform: rotate(18deg);
  opacity: 0;
  pointer-events: none;
}

#buildGrid .buildCard:hover .buildBanner::after {
  animation: buildBannerLightSweep 0.85s ease forwards;
  opacity: 1;
}

@keyframes buildBannerLightSweep {
  from {
    left: -85%;
  }

  to {
    left: 135%;
  }
}