/* CSS cho plugin */

.longart-vip-packages .vip-package {

    border: 1px solid #ddd;

    padding: 10px;

    margin: 10px 0;

}



.longart-vip-packages .vip-package img {

    max-width: 100px;

    display: block;

    margin-bottom: 10px;

}



.longart-vip-packages .vip-package button.buy-vip {

    background-color: #0073aa;

    color: #fff;

    border: none;

    padding: 10px 20px;

    cursor: pointer;

}



.longart-vip-packages .vip-package button.buy-vip:hover {

    background-color: #005177;

}

/* Thêm CSS vào tệp style.css của theme của bạn hoặc sử dụng wp_enqueue_style để thêm vào plugin */

.download_vip_messenger p{

    text-align: center;

    color: #f0506e;

    border-radius: 5px;        /* Bo góc */

    margin-bottom: 20px;       /* Khoảng cách bên dưới */

    font-size: 16px;           /* Cỡ chữ */

}

.download_vip_messenger::after {

  content: url('/img/bell.png'); /* Thay 'bell-icon.png' bằng đường dẫn đến biểu tượng chuông */

  position: absolute;

  right: 15px; /* Điều chỉnh vị trí theo nhu cầu */

  top: 50%;

  transform: translateY(-50%);

  width: 24px; /* Điều chỉnh kích thước theo nhu cầu */

  height: 24px; /* Điều chỉnh kích thước theo nhu cầu */

  animation: shake 0.5s infinite alternate;

  }



  @keyframes shake {

        0% { transform: translateY(-50%) rotate(0deg); }

        50% { transform: translateY(-50%) rotate(10deg); }

        100% { transform: translateY(-50%) rotate(-10deg); }}



/* .leaderboard {

    width: 300px;

    margin-top: 50px;

} */

img.dpoints {

    width: 20px;

    margin-right: 5px;

}

.user {

    position: relative;

    display: flex;

    align-items: center;

    background-color: white;

    border-radius: 5px;

    margin-bottom: 10px;

    padding: 10px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.rank {

    position: absolute;

    border-radius: 0 50px 50px 0;

    top: -5px;

    left: -15px;

    background-color: #818b95;

    color: white;

    padding: 2px 5px;

    /* border-radius: 5px; */

    font-weight: bold;

    font-size: 11px;



}

.rank.rank-1{

    background-color:#fe3459;

}

.rank-1 .status{

    color:#fe3459;

    font-weight: bold;

    text-transform: uppercase;

}



.rank.rank-2{

    background:linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);

}

.rank-2 .status{

    color:#fd7a64;

    font-weight: bold;

}



.rank.rank-3{

    background:linear-gradient(135deg, #f59f54 10%, #ff6922 100%);

}

.rank-3 .status{

    color:#ff6922;

    font-weight: bold;

}



.leaderboard  .avatar, .vip-members  .avatar {

    width: 40px;

    height: 40px;

    background-color: #ddd;

    border-radius: 50%;

    margin-right: 10px;

}



.info {

    flex-grow: 1;

}



.name {

    font-weight: bold;

}



.status {

    font-size: 0.8em;

    color: grey;

}



.points {

    display: inline-block;

    border-radius: 4px;

    transition: .15s;

    border: 1px solid transparent;

    vertical-align: middle;

    padding: .3em .6em;

    text-align: center;

    box-shadow: none;

    background: rgba(136, 136, 136, 0.1);

    color: #000;

    text-shadow: 0 0 0;

    line-height: 1.44;

    font-size: 11px;

}



/* ========== LongArt Topup (UIkit-based) ========== */

/* Tất cả style đều được "namespace" dưới .lar-topup để tránh ảnh hưởng site khác */



.lar-topup .lar-pill {

  margin: 4px 6px;

  border-radius: 999px;

  transition: all .15s ease;

}

.lar-topup .lar-pill:hover {

  transform: translateY(-1px);

}

.lar-topup .lar-pill.lar-pill-active {

  border-color: #1e87f0;           /* UIkit primary */

  background: #edf6ff;

  box-shadow: inset 0 0 0 1px rgba(30,135,240,.15);

  font-weight: 600;

}



/* Vùng giá */

.lar-topup .lar-price-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 6px 0;

}

.lar-topup .lar-price-grand strong {

  font-size: 18px;

}



/* Bảng lịch sử */

.lar-topup #lar-history .uk-label {

  border-radius: 6px;

}

.lar-topup #lar-history td,

.lar-topup #lar-history th {

  vertical-align: middle;

}

.lar-topup #lar-history .uk-text-uppercase {

  text-transform: uppercase;

}

.lar-topup #lar-history .uk-icon-button {

  margin: 0 4px;

}



/* Modal QR */

#lar-topup-modal .uk-modal-dialog {

  border-radius: 12px;

}

#lar-topup-modal #lar-qr {

  max-width: 280px;

  height: auto;

}

#lar-topup-modal .lar-copy {

  margin-left: 8px;

}



/* Toast "đã sao chép" (JS sẽ inject inline style; đây là fallback) */

.lar-toast {

  position: fixed;

  z-index: 9999;

  left: 50%;

  top: 12px;

  transform: translateX(-50%);

  background: #111827;

  color: #fff;

  padding: 8px 12px;

  border-radius: 8px;

  font-size: 13px;

}



/* Nhấn mạnh hàng đang pending (tuỳ chọn) */

.lar-topup #lar-history tr[data-remaining]:not([data-remaining="0"]) .lar-status-cell .uk-label-warning {

  box-shadow: 0 0 0 2px rgba(255, 196, 0, .15);

}



/* Responsive tinh chỉnh nhẹ – UIkit đã lo phần lớn */

@media (max-width: 960px) {

  .lar-topup .lar-price-grand strong {

    font-size: 16px;

  }

  #lar-topup-modal #lar-qr {

    max-width: 240px;

  }

}



/* Dark mode (tùy site) */

@media (prefers-color-scheme: dark) {

  .lar-topup .lar-pill.lar-pill-active {

    background: rgba(30,135,240,.12);

  }

  .lar-toast {

    background: rgba(17,24,39,.95);

  }

}