/* =========================================================
 *  HOÀNG CUNG HOMELAB
 *  Modern Dark Glass Dashboard
 *  ========================================================= */


/* ---------------------------------------------------------
 *  1. GLOBAL
 *  --------------------------------------------------------- */

html,
body {
    background:
    radial-gradient(
        circle at 15% 10%,
        rgba(56, 189, 248, 0.08),
                    transparent 28%
    ),
    radial-gradient(
        circle at 85% 20%,
        rgba(139, 92, 246, 0.07),
                    transparent 30%
    ),
    #0b1120 !important;
}

body {
    letter-spacing: 0.01em;
}


/* ---------------------------------------------------------
 *  2. MAIN CONTAINER
 *  --------------------------------------------------------- */

#page_container {
max-width: 1800px !important;
margin: 0 auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
padding-bottom: 50px !important;
}


/* ---------------------------------------------------------
 *  3. HEADER
 *  --------------------------------------------------------- */

header {
    margin-bottom: 26px !important;
}

header h1 {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
}


/* ---------------------------------------------------------
 *  4. SECTION HEADERS
 *  --------------------------------------------------------- */

section > h2 {
    font-size: 1.05rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em;
    margin-top: 28px !important;
    margin-bottom: 12px !important;
}


/* ---------------------------------------------------------
 *  5. SERVICE CARDS
 *  --------------------------------------------------------- */

.service-card {
    background:
    linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.92),
                    rgba(15, 23, 42, 0.88)
    ) !important;

    border: 1px solid rgba(148, 163, 184, 0.12) !important;

    border-radius: 14px !important;

    box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;

    transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;

    overflow: hidden;
}


/* Hover */

.service-card:hover {
    transform: translateY(-3px);

    border-color: rgba(148, 163, 184, 0.28) !important;

    box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(148, 163, 184, 0.04) !important;
}


/* ---------------------------------------------------------
 *  6. SERVICE ICON
 *  --------------------------------------------------------- */

.service-card img {
    transition: transform 0.2s ease;
}

.service-card:hover img {
    transform: scale(1.08);
}


/* ---------------------------------------------------------
 *  7. SERVICE NAME
 *  --------------------------------------------------------- */

.service-card .service-name {
    font-weight: 650 !important;
    letter-spacing: -0.01em;
}


/* ---------------------------------------------------------
 *  8. DESCRIPTION
 *  --------------------------------------------------------- */

.service-card .service-description {
    color: rgba(203, 213, 225, 0.62) !important;
}


/* ---------------------------------------------------------
 *  9. WIDGET INSIDE SERVICE
 *  --------------------------------------------------------- */

.service-card .service-widget {
    margin-top: 10px !important;
}

.service-card .service-widget > div {
    background: rgba(15, 23, 42, 0.55) !important;

    border: 1px solid rgba(148, 163, 184, 0.07) !important;

    border-radius: 9px !important;
}


/* ---------------------------------------------------------
 *  10. WIDGET NUMBERS
 *  --------------------------------------------------------- */

.service-card .service-widget .text-2xl {
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
 *  11. STATUS DOT
 *  --------------------------------------------------------- */

.status-dot {
    box-shadow:
    0 0 8px currentColor,
    0 0 14px currentColor;
}


/* ---------------------------------------------------------
 *  12. GROUP / SECTION
 *  --------------------------------------------------------- */

.group {
    margin-bottom: 26px !important;
}


/* ---------------------------------------------------------
 *  13. UPTIME KUMA PANEL
 *  --------------------------------------------------------- */

.group[data-group="Giám sát"] .service-card {
    border-radius: 16px !important;

    background:
    linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.96),
                    rgba(15, 23, 42, 0.92)
    ) !important;
}


/* ---------------------------------------------------------
 *  14. WIDGET BLOCKS
 *  --------------------------------------------------------- */

.service-card .rounded-md {
    border-radius: 9px !important;
}


/* ---------------------------------------------------------
 *  15. SEARCH BAR
 *  --------------------------------------------------------- */

input[type="search"] {
    background: rgba(15, 23, 42, 0.72) !important;

    border: 1px solid rgba(148, 163, 184, 0.16) !important;

    border-radius: 10px !important;

    backdrop-filter: blur(10px);

    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

input[type="search"]:focus {
    border-color: rgba(96, 165, 250, 0.5) !important;

    box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.08) !important;
}


/* ---------------------------------------------------------
 *  16. SCROLLBAR
 *  --------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.3);
}


/* ---------------------------------------------------------
 *  17. LINKS
 *  --------------------------------------------------------- */

a {
    transition:
    color 0.15s ease,
    opacity 0.15s ease;
}


/* ---------------------------------------------------------
 *  18. MOBILE
 *  --------------------------------------------------------- */

@media (max-width: 900px) {

    #page_container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    }

    .service-card {
        border-radius: 12px !important;
    }

}


/* ---------------------------------------------------------
 *  19. SMALL PHONE
 *  --------------------------------------------------------- */

@media (max-width: 600px) {

    #page_container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

    header h1 {
        font-size: 1.35rem !important;
    }

    section > h2 {
        font-size: 0.95rem !important;
    }

    .service-card {
        border-radius: 11px !important;
    }

}