/**
 * Trang Bí cảnh
 */
@font-face{font-family:'UVNButLong2';src:url('../img/UVN-But-Long-2.TTF') format('truetype');font-weight:400;font-style:normal}
.yan-bi-canh-wrap {
    max-width: 100%;
    margin: 0 auto 32px;
    padding: 0 12px;
}

/* Dưới summary: đang khai thác / chưa vào */
.yan-bi-canh-idle-top {
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.yan-bi-canh-idle-top__inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
}

.yan-bi-canh-idle-top__icon {
    font-size: 1.25rem;
    opacity: 0.5;
    line-height: 1.2;
}

.yan-bi-canh-idle-top p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.yan-bi-canh-active-panel--top {
    margin-bottom: 18px;
    position: relative;
}

.yan-bi-canh-active-panel__badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(100, 200, 140, 0.25);
    border: 1px solid rgba(120, 220, 160, 0.45);
    color: #c8f5d4;
}

/* Tab hạng */
.yan-bi-canh-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    justify-content: center;

}

.yan-bi-canh-tab {
    flex: 0 1 auto;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yan-bi-canh-tab.bi-canh-so{
    background-image: linear-gradient(to right, #afe5da 0%, #5c8a7b 51%, #b5bab9 100%);
    box-shadow: 0 6px 12px rgba(141, 110, 99, .6);
}
.yan-bi-canh-tab.bi-canh-trung{
    background-image: linear-gradient(to right, #00b38f 0%, #8c9f3e 51%, #00b38f 100%);
    box-shadow: 0 6px 12px rgba(141, 110, 99, .6);
}
.yan-bi-canh-tab.bi-canh-cao{
    background-image: linear-gradient(to right, #d33 0%, #b71cff 51%, #d33 100%);
    box-shadow: 0 6px 12px rgba(141, 110, 99, .6);
}
.yan-bi-canh-tab:hover {
    border-color: rgba(200, 180, 100, 0.45);
    background: rgba(40, 35, 25, 0.5);
}

.yan-bi-canh-tab.is-active {
    box-shadow: 0 0 16px rgba(232, 197, 71, 0.12);
}

.yan-bi-canh-grid-title {
    margin-top: 0;
}

.yan-bi-canh-tab-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    opacity: 0.85;
}

.yan-bi-canh-summary {
    background: linear-gradient(135deg, rgb(219 140 24 / 6%) 0%, rgb(255 111 0 / 5%) 100%);
    border: 1px solid rgba(255, 152, 0, .25);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 12px;
    margin-top: 15px;
    color: #ffffffd4;
}

.yan-bi-canh-summary p {
    margin: 0.35em 0;
}

.yan-bi-canh-active-panel {
    background: linear-gradient(135deg, rgba(40, 80, 60, 0.35), rgba(20, 40, 30, 0.5));
    border: 1px solid rgba(100, 200, 140, 0.35);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
}

.yan-bi-canh-active-panel__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.yan-bi-canh-active-panel__thumb {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.yan-bi-canh-active-panel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yan-bi-canh-active-panel__body {
    flex: 1;
    min-width: 0;
}

.yan-bi-canh-active-panel h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.yan-bi-canh-timer {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 8px 0;
}

.yan-bi-canh-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .yan-bi-canh-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .yan-bi-canh-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .yan-bi-canh-grid {
        grid-template-columns: 1fr;
    }
}

.yan-bi-canh-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.yan-bi-canh-card:hover,
.yan-bi-canh-card:focus {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.yan-bi-canh-card__thumb {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.yan-bi-canh-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yan-bi-canh-card h4 {
    background: url(../img/hon_dau_la_052024.gif);
    background-size: auto;
    color: transparent;
    -webkit-background-clip: text;
    background-position: center;
    font-weight: 800;
    font-family: 'UVNButLong2', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    text-align: center;
}

.yan-bi-canh-card.style-2 h4{
    background-image: url(../img/dau_thanh_2024.gif);
}
.yan-bi-canh-card.style-3 h4{
    background-image: url(../img/color-text.webp);
}
.yan-bi-canh-card .meta {
    margin-bottom: 10px;
    text-align: center;
    color: #37b6c3;
    font-family: 'UVNButLong2', sans-serif;
}

.yan-bi-canh-card .badge-tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(180, 140, 60, 0.35);
    font-size: 0.8rem;
    margin-right: 6px;
}

.yan-bi-canh-msg {
    margin-top: 8px;
    font-size: 0.88rem;
    color: #ffd383e3;
}
.yan-bi-canh-card .yan-bi-canh-msg{
    text-align: center;
}
.yan-bi-canh-msg.error {
    color: #ff8a80;
}

.yan-bi-canh-msg.success {
    color: #a5d6a7;
}

.yan-bi-canh-btn {
    margin-top: 8px;
    margin-right: 8px;
}

.yan-bi-canh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.yan-bi-canh-card--inside {
    background: linear-gradient(135deg, rgba(40, 80, 60, 0.35), rgba(20, 40, 30, 0.5));
    border: 1px solid rgba(100, 200, 140, 0.35);
}

.yan-bi-canh-card--inside:hover,
.yan-bi-canh-card--inside:focus {
    border-color: rgba(120, 200, 160, 0.45);
    box-shadow: 0 0 0 2px rgba(120, 200, 160, 0.2);
}

.yan-bi-canh-click-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
    opacity: 0.9;
}

/* Modal danh sách tu sĩ */
.yan-bi-canh-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100050;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.yan-bi-canh-modal.is-open {
    display: flex;
}

.yan-bi-canh-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    cursor: pointer;
}

.yan-bi-canh-modal__box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: min(80vh, 520px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #1a1a1f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.icon-hammer{
    background: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M246.9 82.3L271 67.8C292.6 54.8 317.3 48 342.5 48C379.3 48 414.7 62.6 440.7 88.7L504.6 152.6C519.6 167.6 528 188 528 209.2L528 240.1L547.7 259.8L547.7 259.8C563.3 244.2 588.6 244.2 604.3 259.8C620 275.4 619.9 300.7 604.3 316.4L540.3 380.4C524.7 396 499.4 396 483.7 380.4C468 364.8 468.1 339.5 483.7 323.8L464 304L433.1 304C411.9 304 391.5 295.6 376.5 280.6L327.4 231.5C312.4 216.5 304 196.1 304 174.9L304 162.2C304 151 298.1 140.5 288.5 134.8L246.9 109.8C236.5 103.6 236.5 88.6 246.9 82.4zM50.7 466.7L272.8 244.6L363.3 335.1L141.2 557.2C116.2 582.2 75.7 582.2 50.7 557.2C25.7 532.2 25.7 491.7 50.7 466.7z'/%3E%3C/svg%3E") center center no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    margin-right: 3px;
}
.icon-gem{
    background: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M168.5 72L256 165l87.5-93-175 0zM383.9 99.1L311.5 176l129 0L383.9 99.1zm50 124.9L256 224 78.1 224 256 420.3 433.9 224zM71.5 176l129 0L128.1 99.1 71.5 176zm434.3 40.1l-232 256c-4.5 5-11 7.9-17.8 7.9s-13.2-2.9-17.8-7.9l-232-256c-7.7-8.5-8.3-21.2-1.5-30.4l112-152c4.5-6.1 11.7-9.8 19.3-9.8l240 0c7.6 0 14.8 3.6 19.3 9.8l112 152c6.8 9.2 6.1 21.9-1.5 30.4z'/%3E%3C/svg%3E") center center no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    margin-right: 3px;
}
.icon-king{
    background: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M345 151.2C354.2 143.9 360 132.6 360 120C360 97.9 342.1 80 320 80C297.9 80 280 97.9 280 120C280 132.6 285.9 143.9 295 151.2L226.6 258.8C216.6 274.5 195.3 278.4 180.4 267.2L120.9 222.7C125.4 216.3 128 208.4 128 200C128 177.9 110.1 160 88 160C65.9 160 48 177.9 48 200C48 221.8 65.5 239.6 87.2 240L119.8 457.5C124.5 488.8 151.4 512 183.1 512L456.9 512C488.6 512 515.5 488.8 520.2 457.5L552.8 240C574.5 239.6 592 221.8 592 200C592 177.9 574.1 160 552 160C529.9 160 512 177.9 512 200C512 208.4 514.6 216.3 519.1 222.7L459.7 267.3C444.8 278.5 423.5 274.6 413.5 258.9L345 151.2z'/%3E%3C/svg%3E") center center no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    margin-right: 3px;
}
.yan-bi-canh-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.yan-bi-canh-modal__close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.yan-bi-canh-modal__title {
    margin: 0;
    padding: 16px 44px 12px 16px;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.yan-bi-canh-modal__body {
    padding: 12px 16px 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.yan-bi-canh-modal__count {
    margin: 0 0 8px;
    font-size: 0.9rem;
    opacity: 0.85;
}

.yan-bi-canh-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yan-bi-canh-modal__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.yan-bi-canh-modal__user:last-child {
    border-bottom: none;
}

.yan-bi-canh-modal__avatar {
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.yan-bi-canh-modal__name {
    font-size: 0.95rem;
    word-break: break-word;
}