/* Phần bảng giá 3 thẻ (Basic / Pro / Pro năm) — tách file riêng, chỉ index.html nạp. */
.pricing-grid{grid-template-columns:repeat(2,1fr);max-width:820px;}
@media(max-width:700px){.pricing-grid{grid-template-columns:1fr;max-width:420px;}}
.pricing-grid-3{grid-template-columns:repeat(3,1fr);max-width:1080px;align-items:stretch;}
@media(max-width:900px){.pricing-grid-3{grid-template-columns:1fr;max-width:420px;}}
.pricing-note{max-width:640px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6;}

/* Thẻ "Pro · Annual" nổi bật riêng, tông vàng hổ phách để không lẫn với "MOST POPULAR" của thẻ Pro */
.price-card.value{
  border-color:rgba(232,176,74,.5) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(232,176,74,.22),0 28px 60px rgba(232,176,74,.14) !important;
}
.price-card.value .value-badge{background:linear-gradient(135deg,#F7D488 0%,#E8B04A 100%) !important;color:#3a2708 !important;}
.price-card.value .value-amount{color:#E8B04A;}
.price-card.value .value-off{background:rgba(232,176,74,.16);color:#F0C572;}
.price-card.value .value-btn{
  background:linear-gradient(180deg,#F7D488 0%,#E8B04A 100%) !important;color:#3a2708 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px rgba(232,176,74,.35) !important;
}
.price-card.value .value-btn:hover{filter:brightness(1.05);}
.price-card.value .price-countdown{color:#F0C572;}

/* Khung huy hiệu đầu thẻ: LUÔN có mặt (kể cả rỗng ở thẻ Basic) cùng chiều cao, để nhãn/giá/nút mọi thẻ thẳng hàng
   thay vì mỗi thẻ lệch tầng theo số dòng nội dung phía trên (huy hiệu, đồng hồ đếm, giá gạch...). */
.price-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:26px;margin-bottom:16px;}
.price-badge{
  position:static;background:var(--accent-grad);color:#0a0a0b;
  font-size:11px;font-weight:600;padding:5px 14px;border-radius:100px;letter-spacing:0.5px;white-space:nowrap;
}
.price-countdown{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);}
.price-countdown b{font-variant-numeric:tabular-nums;color:inherit;}
.price-strike-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.price-strike{color:var(--muted);text-decoration:line-through;font-size:15px;}
.price-off{
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;letter-spacing:0.3px;
  background:rgba(220,38,38,0.18);color:#ff8080;
}
.price-billing-note{font-size:12.5px;color:#c4c4d2;margin:0 0 18px;line-height:1.5;}
.price-promo{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:5px 12px;border-radius:100px;
  border:1px solid rgba(139,92,246,0.5);color:#8B5CF6;font-size:12px;font-weight:600;
}
.price-promo b{font-variant-numeric:tabular-nums;letter-spacing:0.5px;}

/* Con mèo trèo lên thẻ giá nổi bật: thẻ phải cho phần tử tràn ra ngoài, nên hình trang trí bên trong tự cắt theo bo góc */
.price-card.featured{overflow:visible;}
.price-card.featured .price-decor{clip-path:inset(0 round 16px);}
.price-climber{position:absolute;right:30px;top:-74px;width:92px;height:92px;z-index:4;pointer-events:none;}
.price-card.featured > .price-climber{position:absolute;z-index:4;}
.climber-head{position:absolute;inset:0;animation:climberSway 3.4s ease-in-out infinite;transform-origin:50% 100%;}
.climber-paws{position:absolute;left:0;top:64px;}
.paw{transform-box:fill-box;transform-origin:center;}
.paw-l{animation:pawGrip 2.2s ease-in-out infinite;}
.paw-r{animation:pawGrip 2.2s ease-in-out infinite 1.1s;}
@keyframes climberSway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
@keyframes pawGrip{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@media(prefers-reduced-motion:reduce){.climber-head,.paw{animation:none;}}
@media(max-width:768px){.price-climber{right:22px;}}