/* ============================================
   esign.vthangios.xyz – phần riêng thêm vào giao diện vthangios
   ============================================ */

[hidden] { display: none !important; }

/* Trang này có nhiều mục nên hiện tiêu đề mục */
.vthangios-section-title { display: flex; }
.vthangios-group-block { scroll-margin-top: calc(var(--vi-nav-h) + 12px); }

a.vthangios-app-cta,
a.vthangios-app-getkey { text-decoration: none; }

.esign-info-text { min-width: 0; }
.esign-info-text .vthangios-app-name { overflow-wrap: anywhere; }

/* Icon mặc định khi app/cert/DNS chưa có ảnh */
.esign-icon-txt {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--vi-accent), var(--vi-accent2));
    color: #fff;
    font-size: 36px;
}

/* Badge trạng thái, dùng nền liquid glass của vthangios-platform-badge */
.esign-badge-live {
    background: rgba(52,199,89,0.14);
    color: #1f9d4c;
    border-color: rgba(120,220,160,0.45);
}
.esign-badge-revoked {
    background: rgba(255,69,58,0.12);
    color: #e0342b;
    border-color: rgba(255,150,140,0.45);
}
.esign-badge-ios {
    background: rgba(191,90,242,0.12);
    color: #a347d9;
    border-color: rgba(220,170,255,0.45);
}
body.vthangios-dark .esign-badge-ios { color: #d29bff; }
.esign-badge-ios i,
.esign-badge-live i,
.esign-badge-revoked i { font-size: 12px; }
/* Nhãn iOS + trạng thái nằm cùng một hàng */
.esign-badges { display: flex; flex-wrap: nowrap; gap: 6px; }
body.vthangios-dark .esign-badge-live { color: #30d158; }
body.vthangios-dark .esign-badge-revoked { color: #ff6961; }

/* Khung trống + ghi chú, cùng chất liệu kính với app item */
.esign-empty,
.esign-note {
    margin: 0 16px 16px;
    border-radius: var(--vi-radius-sm);
    backdrop-filter: var(--vi-blur);
    -webkit-backdrop-filter: var(--vi-blur);
    font-weight: 600;
    line-height: 1.55;
}
.esign-empty {
    padding: 26px 18px;
    text-align: center;
    font-size: 14px;
    color: var(--vi-text-muted);
    background: var(--vi-surface);
    border: 1px solid var(--vi-border);
    box-shadow: var(--vi-shadow-sm);
}
.esign-note {
    padding: 13px 16px;
    font-size: 13.5px;
    color: #a15c00;
    background: rgba(255,159,10,0.12);
    border: 1px solid rgba(255,190,90,0.40);
}
body.vthangios-dark .esign-note {
    color: #ffb340;
    background: rgba(255,159,10,0.12);
    border-color: rgba(255,190,90,0.22);
}
@media (min-width: 900px) {
    .esign-empty, .esign-note { max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* Cảnh báo mở trong app khác (TikTok, Facebook, Zalo…) */
.esign-inapp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 4px;
}
.esign-inapp b { font-size: 14.5px; }
.esign-inapp .vthangios-app-getkey { margin-top: 4px; padding: 9px 14px; }

/* Nút Tải Cert kèm app khi cert đã thu hồi */
.vthangios-app-getkey.esign-getkey-off,
body.vthangios-dark .vthangios-app-getkey.esign-getkey-off {
    background: rgba(124,140,168,0.16);
    border-color: transparent;
    color: var(--vi-text-muted);
    box-shadow: none;
    cursor: default;
}
.vthangios-app-getkey.esign-getkey-off:active { transform: none; }

/* Icon hồ sơ cấu hình kiểu Cài đặt iOS: nền xám bạc, bánh răng trắng */
.esign-icon-txt.esign-icon-profile {
    background: linear-gradient(180deg, #b9bec6 0%, #8a8f98 100%);
    font-size: 48px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -1px 2px rgba(0,0,0,0.08);
}
.esign-icon-profile i { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }

/* Lưới thẻ: DNS đứng đầu rồi tới app */
.esign-cards { margin-top: 28px; }
.esign-cards > [id] { scroll-margin-top: calc(var(--vi-nav-h) + 12px); }
/* Ít thẻ thì căn giữa, tối đa 3 cột như vthangios */
@media (min-width: 900px) {
    .vthangios-app-list.esign-cards {
        grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
        justify-content: center;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Trang ngắn thì footer vẫn nằm sát đáy màn hình */
main[role="main"] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--vi-nav-h) - 10px);
    min-height: calc(100dvh - var(--vi-nav-h) - 10px);
}
.esign-page { flex: 1 0 auto; }

/* Bỏ chuông thông báo nên nút sáng/tối nằm bên phải */
.vthangios-nav { justify-content: flex-end; }

/* Trang báo lỗi / thu hồi */
.esign-back { display: flex; justify-content: center; margin: 4px 16px 24px; }