.tkb-layout {
    --primary: #2563eb;
    --primary-soft: #eff6ff;
    --success: #16a34a;
    --danger: #dc2626;
    --bg: #f1f5f9;
    --card: #ffffff;
    --border: #e2e8f0;
    --text: #0f172a;
    --muted: #64748b;
    --radius: 14px;
    display: flex;
    gap: 16px;
    padding: 16px;
    height: 100vh;
    background: var(--bg);
    font-family: 'Segoe UI', sans-serif;
}

    /* ================= CARD CHUNG ================= */
    .tkb-layout .panel-card,
    .tkb-layout .chat-panel {
        background: var(--card);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }

    /* ================= CHAT ================= */
    .tkb-layout .chat {
        flex: 0 0 22%;
        min-width: 280px;
    }

    .tkb-layout .chat-header {
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        color: white;
        padding: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tkb-layout .bot-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tkb-layout .header-info h5 {
        margin: 0;
        font-size: 15px;
    }

    .tkb-layout .header-info small {
        opacity: 0.85;
        font-size: 12px;
    }

    .tkb-layout .btn-reset {
        margin-left: auto;
        background: rgba(255,255,255,0.2);
        border: none;
        padding: 6px 10px;
        border-radius: 8px;
        color: white;
        cursor: pointer;
    }

    /* CHAT BOX */
    .tkb-layout .chat-box {
        flex: 1;
        overflow-y: auto;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* MESSAGE */
    .tkb-layout .message-bubble {
        max-width: 75%;
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 13px;
        line-height: 1.5;
    }

    /* BOT */
    .tkb-layout .bot .message-bubble {
        background: #f1f5f9;
    }

    /* USER */
    .tkb-layout .user .message-bubble {
        background: var(--primary);
        color: white;
    }

    /* OPTIONS */
    .tkb-layout .btn-opt {
        border: 1px solid var(--primary);
        background: var(--primary-soft);
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
        cursor: pointer;
    }

    /* INPUT */
    .tkb-layout .chat-input-area {
        padding: 10px;
        border-top: 1px solid var(--border);
        display: flex;
        gap: 8px;
    }

    .tkb-layout input {
        flex: 1;
        padding: 10px 14px;
        border-radius: 20px;
        border: 1px solid var(--border);
    }

    .tkb-layout .btn-send {
        background: var(--primary);
        color: white;
        border-radius: 50%;
        width: 42px;
        height: 42px;
    }

    /* ================= DASHBOARD ================= */
    .tkb-layout .dashboard-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* TITLE */
    .tkb-layout h6 {
        margin: 0 0 6px;
        font-size: 13px;
        color: var(--muted);
    }

    /* ================= GRID ================= */
    .tkb-layout .tkb-grid-container {
        flex: 1;
        overflow: auto;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: white;
    }

    /* TABLE */
    .tkb-layout .tkb-grid {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

    /* HEADER */
    .tkb-layout .tkb-header th {
        position: sticky;
        top: 0;
        background: #e0f2fe;
        padding: 6px;
        font-size: 12px;
    }

    /* CELL */
    .tkb-layout .tkb-grid th,
    .tkb-layout .tkb-grid td {
        border: 1px solid var(--border);
        height: 32px;
        padding: 4px;
    }

    /* TEXT */
    .tkb-layout .mon {
        font-weight: 600;
    }

    .tkb-layout .gv {
        font-size: 11px;
        color: var(--muted);
    }

    /* ROW */
    .tkb-layout .tkb-grid tr:hover {
        background: #f8fafc;
    }

    /* SÁNG / CHIỀU */
    .tkb-layout .row-sang {
        background: #ffffff;
    }

    .tkb-layout .row-chieu {
        background: #f8fafc;
    }

    /* TITLE đẹp hơn */
    .tkb-layout .section-title {
        font-size: 13px;
        font-weight: 600;
        color: #334155;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* CARD riêng cho status */
    .tkb-layout .status-card {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px;
        background: linear-gradient(135deg, #eff6ff, #f0f9ff);
        border: 1px solid #dbeafe;
        position: relative;
        overflow: hidden;
    }

        /* Thanh accent bên trái */
        .tkb-layout .status-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #2563eb;
        }

    /* Label */
    .tkb-layout .status-label {
        font-size: 12px;
        color: #64748b;
    }

    /* Value */
    .tkb-layout .status-value {
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
        word-break: break-all;
    }

    /* GRID */
    .tkb-layout .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
    }

    /* CARD STAT */
    .tkb-layout .stat {
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        /* MÀU */
        .tkb-layout .stat.success {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
        }

        .tkb-layout .stat.danger {
            background: #fef2f2;
            border: 1px solid #fecaca;
        }

        /* VALUE TO */
        .tkb-layout .stat .status-value {
            font-size: 18px;
            font-weight: 700;
        }