/* ===== Bảng xếp hạng Agent ===== */
.re-agent{
  --gold-1:#f7e08a;
  --gold-2:#c9952f;
  --silver-1:#fff;
  --silver-2:#9aa5a1;
  --bronze-1:#ffd7a8;
  --bronze-2:#d07a2c;
  --agent-h:240px;      /* chiều cao khối Agent (desktop) */
  --agent-gap:30px;     /* khoảng cách Agent -> thẻ */
  position:relative;
  max-width:900px;
  margin:0 auto;
  color:#fff;
}
.re-agent *{box-sizing:border-box}

/* Khung viền bao hàng thẻ (desktop) */
.re-agent__frame{
  position:absolute;
  left:0;right:0;
  top:calc(var(--agent-h) + var(--agent-gap) + 45px);
  bottom:14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  background:rgba(0,0,0,.08);
  pointer-events:none;
}
.re-agent.no-agent .re-agent__frame{top:-20px}
.re-agent .swiper{padding:0 16px 34px}
.re-agent.no-agent .swiper{padding-top:10px}

/* ===== Khối Agent ===== */
.re-agent .agent{
  -height:var(--agent-h);
  margin-bottom:50px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.re-agent .agent__logo{max-width:240px;-margin-bottom:12px;object-fit:contain}
.re-agent .agent__name{
  font-size:24px;font-weight:800;letter-spacing:.5px;line-height:1.2;margin:0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.re-agent .agent--silver .agent__name{background-image:linear-gradient(180deg,var(--silver-1),var(--silver-2))}
.re-agent .agent--gold   .agent__name{background-image:linear-gradient(180deg,var(--gold-1),var(--gold-2))}
.re-agent .agent--bronze .agent__name{background-image:linear-gradient(180deg,var(--bronze-1),var(--bronze-2))}
.re-agent .agent__ornament{width:100%;max-width:200px;height:16px;margin:6px auto;display:block}
.re-agent .agent__stat{margin-top: 10px;}

/* ===== Thẻ ===== */
.re-agent .card{
  position:relative;
  border-radius:4px;
  aspect-ratio:3/4.4;
  background:#ddd;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  cursor:pointer;
}
.re-agent .card img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.re-agent .card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.9) 100%);
  opacity:.75;
  transition:opacity .4s ease;
}

/* Huy chương */
.s4_man .man1::before{background:url(https://sales.royalcentralpark.kg/wp-content/uploads/2026/07/1.png) center center no-repeat}
.s4_man .man2::before{background:url(https://sales.royalcentralpark.kg/wp-content/uploads/2026/07/2.png) center center no-repeat}
.s4_man .man3::before{background:url(https://sales.royalcentralpark.kg/wp-content/uploads/2026/07/3.png) center center no-repeat}
.s4_man .card::before{
  content:"";
  position:absolute;
  width:56px;height:72px;
  top:-28px;right:-16px;
  z-index:4;
  background-size:80% auto !important;
}

/* ===== Thông tin: slide up ===== */
.re-agent .card__info{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:3;
  display:grid;
  grid-template-rows:auto 0fr;          /* mặc định: chỉ hiện tên */
  transition:grid-template-rows .45s ease;
}
.re-agent .card__name{
  font-size:16px;font-weight:800;text-transform:uppercase;line-height:1.3;
  padding-bottom:0;
  border-bottom:1px solid transparent;
  transition:padding .45s ease,border-color .45s ease;
}
.re-agent .card__txt{
  min-height:0;overflow:hidden;
  font-size:13px;font-weight:500;line-height:1.6;text-transform:uppercase;
  opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .45s ease;
}
.re-agent .card__txt-inner{padding-top:8px}
.re-agent .card__txt p{margin:0}

/* Mở: hover (chuột) */
@media (hover:hover){
  .re-agent .card:hover .card__info{grid-template-rows:auto 1fr}
  .re-agent .card:hover .card__name{padding-bottom:8px;border-color:rgba(255,255,255,.6)}
  .re-agent .card:hover .card__txt{opacity:1;transform:none}
  .re-agent .card:hover::after{opacity:1}
}
/* Mở: slide active (cảm ứng) */
@media (hover:none){
  .re-agent .swiper-slide-active .card__info{grid-template-rows:auto 1fr}
  .re-agent .swiper-slide-active .card__name{padding-bottom:8px;border-color:rgba(255,255,255,.6)}
  .re-agent .swiper-slide-active .card__txt{opacity:1;transform:none}
  .re-agent .swiper-slide-active .card::after{opacity:1}
}

.re-agent .swiper-pagination-bullet{background:#fff;opacity:.4}
.re-agent .swiper-pagination-bullet-active{opacity:1;background:var(--gold-1)}

/* ===== Mobile ===== */
@media (max-width:640px){
  .re-agent{--agent-h:auto;--agent-gap:24px}
  .re-agent__frame{display:none}
  .re-agent .swiper{padding:0 0 34px}
  .re-agent.no-agent .swiper{padding-top:24px}
  .re-agent .slide-box{
    border:1px solid rgba(255,255,255,.45);
    border-radius:14px;
    padding:16px 16px 14px;
    background:rgba(0,0,0,.1);
  }
  .re-agent.no-agent .slide-box{padding-top:30px}
  .s4_man .card::before{right:-10px}
  .re-agent .swiper-slide{transition:transform .3s,opacity .3s;transform:scale(.9);opacity:.55}
  .re-agent .swiper-slide-active{transform:scale(1);opacity:1}
}