/* ==================== BASE & LAYOUT ==================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.h-vh-100 {
	height:var(--real-vh,100dvh);
	overflow:hidden;
	box-sizing:border-box;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
.clan-main {
    background: #eee;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.clan-center {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.clan-detail::-webkit-scrollbar,
.clan-live-log::-webkit-scrollbar,
.random-clans-list::-webkit-scrollbar,
.member-list::-webkit-scrollbar,
.reward-list::-webkit-scrollbar,
.warehouse-list::-webkit-scrollbar,
.deposit-items-grid::-webkit-scrollbar,
.quick-stats::-webkit-scrollbar,
.shop-items-list::-webkit-scrollbar,
.policy-container::-webkit-scrollbar,
.setting-list::-webkit-scrollbar {
    display: none;
}
.no-clan-yet {
    width: 100%;
    z-index: 1;
    background: #fff;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.random-clans-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.view-clan-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
    color: #000;
}
.view-clan {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    text-decoration: none !important;
    color: #000;
    width: 100%;
}
.avatar-clan {
    width: 40px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}
.logo-clan {
        height: 110px;
    z-index: 1;
    margin-right: -30px;
}
.view-clan-info {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: #000;
}
.view-clan-info img {
    width: 40px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}
.random-clan-info {
    display: flex;
    flex-direction: column;
}
/* ==================== HEADER & COVER ==================== */
.clan-cover {
    background: #424242;
    height: 200px;
    position: relative;
    border-radius: 0 0 10px 10px;
    width: 90%;
}
.cover-img {
    width: 100%;
    height: 100%;
    border-radius: 0 0 10px 10px;
    object-fit: cover;
}
.change-cover {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--swal2-confirm-button-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.creator-info {
    position: relative;
    top: -50px;
    background: #fff;
    border-radius: 10px;
}
/* ==================== USER & AVATAR ==================== */
.clan-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 80%;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    margin: -50px 0 0;
}
.clan-avatar {
    width: 90px;
    height: 90px;
    aspect-ratio: 1 / 1;
    position: relative;
    padding: 3px;
    background: #fff;
    border-radius: 50%;
    margin-top: -45px;
}
.clan-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.5s;
}
.change-avatar {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--swal2-confirm-button-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.change-cover i,
.change-avatar i {
    background: var(--swal2-footer-border-color);
    padding: 5px;
    border-radius: 50%;
    font-size: 14px;
}
.creator-name {
    font-size: 1em;
    font-weight: 600;
}
/* ==================== PROGRESS & CLAN INFO ==================== */
.clan-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.clan-progress-info {
    width: 100%;
    max-width: 80%;
    flex: 1;
}
.clan-icon {
    width: 40px;
    border: 1px solid #007bff;
    border-radius: 50%;
    background: #fff;
    z-index: 1;
    padding: 2px;
    box-shadow: 0 1px 5px var(--indigo);
}
.clan-name-level {
    display: flex;
    align-items: center;
    gap: 6px;
}
.clan-name {
    font-size: 1em;
    font-family: monospace;
}
.clan-progress {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
}
.clan-progress .clan-member-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: monospace;
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.clan-progress .progress {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-color: var(--blue);
    color: #fff;
    margin: -2px;
}
.clan-info-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
/* ==================== POST & CONTENT ==================== */
.clan-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.clan-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80%;
}
.clan-view {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.clan-post-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.clan-post-display p {
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}
.clan-post-display img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
}
.post-image-wrapper { position: relative; }
.post-edit {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--swal2-backdrop);
    padding: 5px;
    color: #fff;
    cursor: pointer;
}
.selected-dragons {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgb(0 0 0 / 80%);
    color: #fff;
    padding: 0 5px;
    font-size: 13px;
}
.selected-dragon-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.selected-dragon-item img {
    width: 34px;
}
.clan-live-log {
    width: 100%;
    overflow-y: auto;
    max-height: 180px;
    height: 100%;
    padding: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.log-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.log-item {
    font-size: 1em;
    padding: 0 5px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}
.redemption-log {
    display: flex;
    align-items: center;
    gap: 5px;
}
.reward-log-img {
    width: 30px;
}
.log-teaser {
    position: relative;
}
.blur-log {
    filter: blur(4px);
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}
.join-to-see {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    width: 100%;
}
.treasure-img { height: 24px; width: auto; vertical-align: middle; border-radius: 4px; }
.clan-small-icon { width: 24px; aspect-ratio: 1 / 1; object-fit: cover; }
.post-images:has(.clan-post-display) {
    height: auto;
    min-height: 220px;
    border: none;
    display: flex;
    flex-direction: column;
}
.post-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.stat-item i { transition: all 0.2s; }
.stat-item.liked i { color: #dc3545; }
.like-btn:hover i { transform: scale(1.1); }
/* ==================== LIVE ROUND & MENU ==================== */
.clan-menu {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    padding: 10px;
    display: flex;
    gap: 1px;
    font-size: 13px;
}
.menu-item,
.settings-tab {
    padding: 5px 8px;
    border-radius: 20px;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s;
    text-decoration: none !important;
    display: block;
    cursor: pointer;
}
.menu-item.active,
.settings-tab.active {
    background: #f0f0f0 !important;
    color: #000 !important;
}
.clan-menu .live-rounds {
    background: #fff9e6;
    border: 1px solid #fd7e14;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    flex: 1;
    padding: 0 5px;
    display: none;
}
.clan-menu .live-round-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
/* Live Items */
.clan-live {
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    height: 120px;
}
.clan-live-item {
    flex: 1;
    border-radius: 10px;
    font-family: monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), url(/images/4k.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 0.3s;
}
.clan-live-item.active { border-color: #fd7e14; background: #fff9e6; }
.clan-live-item.completed { filter: grayscale(0.7); opacity: 0.8; }
.clan-live-item.locked {
    position: relative; 
}
.clan-live-item.locked .round-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 8px;
    color: #ffffff;
}
.round-header { font-weight: 700; color: #fd7e14; }
.round-time { font-size: 15px; color: #d35400; }
.round-status { font-size: 13px; }
.round-countdown,
.live-countdown {
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
}
.round-remaining,
.live-remaining {
    display: flex;
    align-items: center;
    color: #28a745;
    font-weight: bold;
}
.round-remaining img,
.live-remaining img { width: 24px; }
.round-status.locked-status {
    color: #888 !important;
    font-weight: 500;
}
/* ==================== KHO ẨM THỰC ==================== */
.clan-food-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.food-reset {
    flex: 1;
    position: relative;
}
.food-reset .progress {
    background-color: var(--blue);
    color: #fff;
}
.food-time-left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
}
.food-name {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--swal2-backdrop);
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 1.2em;
    font-weight: 500;
}
.food-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    border-radius: 5px;
}
/* ==================== KHO CLAN ==================== */
.clan-warehouse-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.clan-warehouse-progress {
    flex: 1;
    position: relative;
}
.clan-warehouse-progress.progress {
    background-color: var(--blue);
    color: #fff;
}
.clan-reward,
.clan-warehouse-body,
.shop-empty,
.clan-food-body {
    border: 1px solid #ccc;
    padding: 5px;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 14px;
    background: var(--light);
}
.reward-list,
.food-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    align-content: start;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.warehouse-list,
.deposit-items-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    align-content: start;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.warehouse-list {
    max-height: 200px;
}
.deposit-items-grid {
    height: auto
}
.reward-group-item,
.warehouse-item,
.deposit-item,
.food-item {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}
.reward-group-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.warehouse-item img,
.deposit-item img,
.food-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
}
.group-remaining {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0px 3px;
    background: var(--success);
    color: #fff;
    font-size: 12px;
}
.group-sold {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0px 3px;
    background: var(--orange);
    color: #fff;
    font-size: 12px;
}
.reward-group-item.sold-out {
    filter: grayscale(1);
    pointer-events: none;
    cursor: not-allowed;
}
.group-name {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 0px 3px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
}
.reward-info,
.reward-info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.reward-info span {
    color: var(--yellow);
}
.reward-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.reward-info-item img {
    border-radius: 5px;
    width: 70px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #fff;
}
.reward-convert {
    width: 70px;
    height: 10px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    background-size: 200% 100%;
    animation: flow 3s linear infinite;
    transform: translateY(-150%);
    z-index: -1;
}
@keyframes flow {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.reward-selects {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    padding: 5px;
}
.reward-selects .swal2-select,
.reward-selects .swal2-input {
    margin: 0 !important;
    height: auto !important;
    border: var(--swal2-input-border);
    border-radius: 5px;
    font-size: 12px;
    padding: 5px;
}
#select-provider {
    grid-column: span 3;
}
#select-reward {
    grid-column: span 5;
}
#swap-quantity {
    grid-column: span 2;
    text-align: center;
}
.deposit-qty,
.warehouse-item span,
.food-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--orange);
    padding: 1px;
    color: #fff;
    border-radius: 0 5px;
    font-size: 10px;
}
.food-count {
    font-size: 1em;
}
.warehouse-withdraw {
    display: flex;
    flex-direction: column;
}
.warehouse-withdraw span:nth-child(1) {
    font-weight: 500;
    font-size: 1em;
    color: var(--orange);
}
.warehouse-withdraw span:nth-child(2) {
    font-weight: 500;
    font-size: 1em;
    color: var(--yellow);
}
.clan-warehouse-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.warehouse-actions {
    background: var(--swal2-footer-border-color);
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}
.clan-warehouse-add {
    
}
.clan-warehouse-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 1px solid var(--swal2-footer-border-color);
    cursor: pointer;
}
.warehouse-user-count {
    background: var(--swal2-footer-border-color);
    padding: 5px 10px;
    text-align: center;
}
.load-more {
    text-align: center;
    cursor: pointer;
}
.load-more span {
    background: var(--swal2-footer-border-color);
    padding: 5px 10px;
    border-radius: 5px;
}
/* ==================== JOIN BUTTON ==================== */
.clan-left .join-clan {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}
.clan-left .owner-action,
.clan-left .member-action,
.clan-left .guest-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    color: #000;
}
.clan-center .join-clan {
    background: #fff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
.clan-center .owner-action,
.clan-center .member-action,
.clan-center .guest-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    color: #6c757d;
    cursor: pointer;
    gap: 3px;
    padding: 2px 0;
    width: 100%;

}
.owner-action img,
.member-action img,
.guest-action img {
    width: 20px
}
.join-clan-desktop {
    background: #fd7e14;
    padding: 10px 5px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
.guest-action.pending {
    background: #fd7e14;
    border-radius: 5px;
}
.guest-action {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}
.guest-action.join {
    background: var(--orange);
    color: #fff;
    padding: 5px;
    font-size: 1.2em;
}
.member-clan-info {
    padding: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
/* ==================== SHOP SECTION ==================== */
.shop-list .view {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-content: start;
    overflow-y: auto;
    height: 100%;
}
.shops-view-items {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--swal2-color);
    outline: 1px solid var(--swal2-footer-border-color);
    position: relative;
    display: flex;
    flex-direction: column;
}
.item-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-bottom: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}
.item-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px 0;
}
.item-description img {
    max-height: 200px;
    border-radius: 15px;
}
.item-description span {
    text-align: justify;
    font-size: 1rem;
}
.pet-card {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pet-card i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--orange);
}
.pet-card img {
    width: 100%;
    box-shadow: 0 4px 12px #fd7e14;
}
.item-price {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}
.shops-view-items .item-name {
    font-size: 13px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
.price-view {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}
.price-final {
    color: var(--green);
    font-size: 1.1em;
    font-weight: 600;
    position: relative;
}
.discount-tag {
    color: #e74c3c;
    font-size: 1em;
    position: absolute;
    top: -10px;
    right: -10px;
}
.price-owned { color: #fd7e14; }
.shops-view-items .btn-action {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: center;
    font-size: 13px;
    border-radius: 0 0 5px 5px;
    color: #fff;
    cursor: pointer;
    margin-top: auto;
}
.shops-view-items .btn-action.owned {
    background: #555;
    color: #aaa;
    cursor: not-allowed;
}
.shops-view-items .btn-action.buy { background: #007bff; }
.shops-view-items .btn-action.disabled { background: var(--red); }
/* ==================== OVERLAY & MODAL ==================== */
.post-images {
    height: 220px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;
}
.no-post-yet,
.warehouse-empty,
.shop-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
}
.no-post-yet p {
    margin: 8px 0 0;
    font-size: 15px;
}
/* Mobile Overlay */
.mobile-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0,0,0,0.85);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mobile-detail-overlay.show { display: flex; }
.mobile-detail-body {
    width: 100%;
}
.clan-post-detail {
    background: #fff;
    margin: 10px;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.clan-post-send {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.clan-info-detail,
.clan-dashboard-mini,
.clan-warehouse-add,
.member-privileges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100dvh;
    background: #fff;
    padding: 10px;
    overflow: hidden;
}
.clan-info-close {
    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 1px solid var(--swal2-footer-border-color);
    cursor: pointer;
}
.settings-tabs {
    display: flex;
    align-items: center;
    gap: 1px;
}
.settings-tab-content {
    height: 100%;
    overflow: hidden;
}
.section-title {
    font-size: 1.1em;
    font-weight: 600;
}
.member-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.member-search-input {
    width:100%;
    padding:10px;
    border-radius:8px;
    border:1px solid #ddd;
}
.member-item {
    display: flex;
    gap: 10px;
    padding: 5px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.member-avatar-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.member-avatar-wrapper img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.last-active {
    position: absolute;
    bottom: 0;
    right: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--green);
}
.member-actions.member-pending {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.action-btn.reject {
    color: var(--red);
    font-size: 24px;
    cursor: pointer;
}
.action-btn.approve {
    color: var(--green);
    font-size: 24px;
    cursor: pointer;
}
.member-info {
    display: flex;
    flex-direction: column;
}
.member-name {
    font-weight: 500;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.member-name i {
    background: var(--swal2-validation-message-background);
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}
.member-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.action-btn.ellipsis-btn {
    cursor: pointer;
    border-radius: 5px;
    background: var(--swal2-validation-message-background);
    padding: 5px 10px;
}
.contribution-points {
    display: flex;
    align-items: center;
    gap: 5px;
}
.member-action-popup {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    padding: 10px;
    overflow: hidden;
    animation: popupFadeIn 0.2s ease forwards;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1;
}
.action-item {
    background: var(--blue);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.action-item.danger {
    background: var(--orange);
}
@keyframes popupFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-8px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
.setting-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    height: 100%;
    scrollbar-width:none;
	-ms-overflow-style:none;
}
.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 14px;
}
.setting-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.setting-text small {
    font-style: italic;
}
.setting-mode {
    background: var(--swal2-footer-border-color);
    border: 1px solid #ccc;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    align-items: center;
}
.setting-mode[data-value="1"] {
    background: var(--orange);
}
.mode {
    font-size: 12px;
    font-weight: 600;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mode.on {
    opacity: 0;
}
.setting-mode[data-value="1"] .mode.off {
    opacity: 0;
}
.setting-mode[data-value="1"] .mode.on {
    opacity: 1;
}
.post-add-images,
.upgrade-clan {
    background: #f7f7f7;
    padding: 5px 10px;
    border-radius: 5px;
    color: #555;
    font-weight: 600;
    cursor: pointer;
}
.post-send {
    background: var(--orange);
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
#preview-post-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.dragon-balls-label { display: flex; flex-direction: column; }
.dragon-balls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.dragon-ball-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.dragon-ball-item img {
    width: 60px;
}
/* POPUP LOGIN */
.clan-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.clan-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.clan-login-header span:first-child {
    font-size: 1.2em;
    color: var(--orange);
    font-weight: 600;
}
.clan-login-header i {
    cursor: pointer;
}
.clan-login-social {
    display: flex;
    align-items: center;
    gap: 10px;
}
.clan-login-social img {
    width: 34px;
    cursor: pointer;
}
.clan-login-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}
.clan-login-body span {
    background: var(--orange);
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}
/* BUY ITEM */
.clan-buy-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 0 0;
}
.clan-buy-item img {
    width: 120px;
    border-radius: 5px;
    display:block;
    box-shadow: 0 4px 12px #fd7e14;
}
/* CHÍNH SÁCH */
.quick-stats,
.policy-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.show-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.stat-row {
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #f8f9fa61;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.stat-row span {
    font-size:12px;
}
.chart-top {
    height: 200px;
    background: #f8f9fa61;
}
.policy-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #f8f9fa61;
    padding: 5px;
    border-radius: 10px;
}
.shop-stats {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.shop-items-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.shop-item-mini {
    display: flex;
    gap: 5px;
}
.shop-item-mini img {
    width: 100px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.shop-item-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.view-image-full {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.view-image-full img {
    width: 100%;
}
.clan-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.clan-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.benefit-card {
    display: flex;
    flex-direction: column;
}
.benefit-card img {
    width: 24px;
}
.benefit-content {
    font-weight: 600;
}
/* Modal & SweetAlert */
.modal-dialog { height: 100% !important; }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header span {
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}
.modal-body {
    padding: 0;
    overflow: hidden !important;
    position: relative;
}
.swal2-popup,
.modal-content {
    border-radius: var(--border-radius-sm) !important;
    background: radial-gradient(circle at center, #7800ffa3, #000) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    color: #e5d7ff !important;
    padding: 0;
}
.swal2-styled:focus,
.swal2-popup .swal2-styled:focus,
.swal2-container button.swal2-styled:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    background: url(/images/arena/battle/vs-button.webp) center / 100% 100% no-repeat !important;
    padding: 10px 24px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow: var(--text-shadow) !important;
    color: var(--orange) !important;
    filter: drop-shadow(0 0 12px #ff6b0066) !important;
}
.swal2-styled.swal2-cancel {
    filter: grayscale(0.7) drop-shadow(0 0 8px #666) !important;
}
.swal2-backdrop-show { background: rgba(0,0,0,0.82) !important; }
.swal2-icon.swal2-error,
.swal2-title:where(.swal2-error ~ .swal2-title) {
    display: none !important;
}
div:where(.swal2-container) div:where(.swal2-html-container) {
    padding: 0 !important;
}
.swal2-select option {
    color: #000;
}
.current-level {
    background: var(--orange);
    color: #fff;
}
table {
    border-collapse: collapse;
    width: 100%;
}
thead {
    background: #add8e636;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 5px;
    text-align: left;
}
.progress-bar {
    background-color: var(--orange);
}
/* ==================== HOVER & MEDIA QUERIES ==================== */
@media (hover: hover) {
    .menu-item:hover {
        background: #f0f0f0;
        color: #000;
    }
}
@media (max-width: 767px) {
    .clan-center {
        grid-column: span 6;
    }
    .clan-cover,
    .clan-user,
    .clan-body {
        width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 1599px) {
    .clan-main {
        grid-template-columns: repeat(5, 1fr);
    }
    .clan-center {
        grid-column: span 3;
    }
    .clan-user {
        margin: -50px 0 0;
    }
    .shop-list .view {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .mobile-detail-body {
        max-width: 40%;
    }
    .warehouse-list,
    .deposit-items-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}
@media (min-width: 1600px) {
    .shop-list .view {
        grid-template-columns: repeat(6, 1fr);
    }
    .warehouse-list, .deposit-items-grid {
        grid-template-columns: repeat(20, 1fr);
    }
    .mobile-detail-body {
        max-width: 30%;
    }
}