/* ===== VN Utilities Plugin Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

.vnu-card {
    font-family: 'Be Vietnam Pro', sans-serif;
    background: #ffffff;
    border: 1px solid #e8edf2;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    margin: 24px 0;
    overflow: hidden;
    max-width: 680px;
}

.vnu-card-header {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vnu-icon {
    font-size: 24px;
    line-height: 1;
}

.vnu-title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.vnu-body {
    padding: 24px;
}

/* ─── Form Elements ─── */
.vnu-row {
    margin-bottom: 16px;
}

.vnu-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.vnu-row input[type="text"],
.vnu-row input[type="number"],
.vnu-row input[type="date"],
.vnu-row select,
.vnu-row textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #dde3ed;
    border-radius: 8px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    color: #333;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    outline: none;
}

.vnu-row input:focus,
.vnu-row select:focus,
.vnu-row textarea:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
    background: #fff;
}

.vnu-row textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* ─── Buttons ─── */
.vnu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #1a73e8, #0d47a1);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 11px 22px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

.vnu-btn:hover {
    background: linear-gradient(135deg, #1565c0, #0a3880);
    box-shadow: 0 4px 14px rgba(26,115,232,0.4);
    transform: translateY(-1px);
}

.vnu-btn:active {
    transform: translateY(0);
}

.vnu-btn-outline {
    background: #fff;
    color: #1a73e8 !important;
    border: 1.5px solid #1a73e8;
    box-shadow: none;
}

.vnu-btn-outline:hover {
    background: #f0f6ff;
    color: #0d47a1 !important;
}

.vnu-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ─── Result Box ─── */
.vnu-result {
    margin-top: 16px;
}

.vnu-success {
    background: #f0f9f4;
    border: 1px solid #b7dfca;
    border-radius: 10px;
    padding: 16px 20px;
    color: #1b5e3c;
}

.vnu-warn {
    background: #fff8e6;
    border: 1px solid #f5d67b;
    border-radius: 8px;
    padding: 10px 14px;
    color: #7a4f00;
    display: block;
}

.vnu-info {
    background: #e8f0fe;
    border: 1px solid #aac4f6;
    border-radius: 8px;
    padding: 12px 16px;
    color: #1a3a80;
    display: block;
    line-height: 1.7;
}

.vnu-info a {
    color: #1a73e8;
    font-weight: 600;
}

.vnu-big-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a3a80;
    margin-bottom: 4px;
    line-height: 1.3;
}

.vnu-status {
    font-size: 16px;
    font-weight: 700;
    margin: 6px 0;
}

.vnu-geo {
    margin-top: 10px;
    font-size: 14px;
    color: #2d6a4f;
    line-height: 1.7;
}

.vnu-note {
    margin-top: 10px;
    font-size: 13px;
    color: #555;
    font-style: italic;
}

/* ─── Table ─── */
.vnu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 4px;
}

.vnu-table tr {
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.vnu-table tr:last-child {
    border-bottom: none;
}

.vnu-table td {
    padding: 8px 4px;
    color: #333;
}

.vnu-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: #1a3a80;
}

.vnu-table-total {
    font-size: 16px;
    font-weight: 700;
    background: rgba(26,115,232,0.06);
}

.vnu-table-total td {
    color: #0d47a1 !important;
    padding-top: 12px !important;
}

/* ─── Stats Grid ─── */
.vnu-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.vnu-stat-box {
    background: #f0f6ff;
    border: 1px solid #ccdcf8;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}

.vnu-stat-box span {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #1a73e8;
    line-height: 1;
}

.vnu-stat-box small {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 5px;
    line-height: 1.3;
}

/* ─── Tabs ─── */
.vnu-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.vnu-tab {
    background: #f0f3f8;
    border: 1.5px solid #dde3ed;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}

.vnu-tab.active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}

.vnu-tab:hover:not(.active) {
    border-color: #1a73e8;
    color: #1a73e8;
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
    .vnu-body { padding: 16px; }
    .vnu-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .vnu-big-value { font-size: 18px; }
    .vnu-btn-group { flex-direction: column; }
}