/* GLOBAL CSS */
html,
body {
    /** VIEWPORT DISPLAY **/
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    background-color: var(--surface);

    /** LAYOUT **/
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    /** TYPEFACE **/
    font-size: 16px;
    font-family: "Bricolage Grotesque", sans-serif;
}


/*---------------------------------------------------------- Large Divider ----------------------------------------------------------*/


/** (AUTO LAYOUT) TOP NAVIGATION LOGO **/
#top-navigation-page-title {
    width: 100%;
    position: fixed;
    z-index: 100;
    overflow: hidden;
    background-color: var(--primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 1.25rem 1rem;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(61, 63, 40, 0.2);
}

/*--------------------------------- Medium Divider ---------------------------------*/

/*** ICON CONTAINER 20 ***/
#icon-container-20 {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
}

/*--------------------------------- Medium Divider ---------------------------------*/

/*** (TEXT) HEADER PAGE TITLE ***/
#header-page-title p {
    margin: 0;
    padding: 0;
}

/*--------------------------------- Medium Divider ---------------------------------*/

/*** JUSTIFY BLANK SPACE ***/
#justify-blank-space {
    width: 1.5rem;
    height: 1.5rem;
}


/*----------------------------------------------------------


/** (AUTO LAYOUT) CONTENT CONTAINER **/
.content-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    box-sizing: border-box;
}

/*--------------------------------- Medium Divider ---------------------------------*/

/*** (GRAPHIC CONT) Mặt buồn ***/
#mat-buon-container {
    width: 80%;
    height: auto;
    margin: 0;
}

/**** (SVG) Mặt buồn ****/
#mat-buon-container svg {
    width: 100%;
    height: auto;
}

/*--------------------------------- Medium Divider ---------------------------------*/

/*** (TEXT) SUPPORT TITLE ***/
h1 {
    margin: -3rem 0 0 0;
    padding: 0;
    text-align: center;
}

/*--------------------------------- Medium Divider ---------------------------------*/

/*** (TEXT) SUPPORT SUB-TITLE ***/
h2 {
    margin: 0;
    padding: 0 5% 0 5%;
    text-align: center;
}

/*--------------------------------- Medium Divider ---------------------------------*/

/*** (PRIMARY FILLED BUTTON) QUAY TRỞ LẠI ***/
#back-button {
    width: 40%;
    background-color: var(--primary-filled-enabled);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 0.25rem 1.25rem #93934f;
}

#back-button a {
    text-decoration: none;
}



/*----------------------------------------------------------


/* MEDIA QUERIES FOR RESPONSIVE LAYOUT */
/** Tablet **/
@media only screen and (min-width: 769px) and (max-width: 1023px) {

    /*** (GRAPHIC CONT) Mặt buồn ***/
    #mat-buon-container {
        width: 60%;
    }
}

/*----------------------------------------------------------


/* MEDIA QUERIES FOR RESPONSIVE LAYOUT */
/** Desktop **/
@media (min-width: 1024px) {

    /*** (GRAPHIC CONT) Mặt buồn ***/
    #mat-buon-container {
        width: 20%;
    }
}