app/scss/globals.scss
@import 'normalize.css';

@font-face {
    font-family: 'LargeRetro';
    src: url('../../assets/fonts/large-retro.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    src: url('../../assets/fonts/lora-font.ttf');
}

@font-face {
    font-family: 'Merienda-Light';
    src: url('../../assets/fonts/Merienda-Light.ttf');
}

:root {
    --font-family:
        system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
        'Droid Sans', 'Helvetica Neue', sans-serif;
    --large-retro-font-family: 'LargeRetro', sans-serif;
    --message-text-font: 'Merienda-Light';
    --header-height: 9rem;
    --mobile-header-height: 6rem;
    --input-height: 4.4rem;
    --green: green;
}

[data-theme='light'] {
    --background: #ede0d0;
    --foreground: #171717;
    --bg-match-color: #edcfac;
    --text-color: #141414;
    --text-low-color: #5b5b5b;
    --black: #000;
    --black-low: #333;
    --white: #fff;
    --white-low: #d4d4d4;
    --red: #b54c37;
    --gray-color: #7a7a7a77;
    --gray-color-low: #a7a6a677;
    --pinned-message-color: #00000090;
    --delete-message-color: #b9b9b9;
    --reply-message-color: #ffffff90;
    --left-side-toggle-btn-color: #292626;
    --auth-item-bg: #ededed;
    --auth-item-bg-hover: #d2d2d2;
    --auth-bg-image:
        radial-gradient(#ffffff40, #fff0 40%),
        radial-gradient(hsl(280, 100%, 75%) 30%, hsl(190, 100%, 70%), hsla(190, 100%, 70%, 0.4) 41%, transparent 52%),
        radial-gradient(hsl(48, 100%, 70%) 37%, transparent 46%),
        linear-gradient(155deg, transparent 65%, hsl(10, 100%, 60%) 95%), linear-gradient(45deg, #ff00cc, #3333ff);
    --auth-opacity: 0.08;

    --notification-color: #dbbb99;
    --notification-bg: #fff;
    --notification-unread-color: #d8d8d8;
    --notification-item-hover-color: var(--background);
    --drop-box-box-shadow: rgba(103, 103, 103, 0.24) 0px 3px 8px;

    --expand-text-color: #7c1818;
    --search-color: #e0e0e0;
    --search-bg-color: #ede0d0;
    --search-title-box-shadow: 2px 2px #fefefe;
    --search-text-color: var(--text-color);
    --blur-btn-bg: #cfcfcf;
    --blue-btn: #4949ff;
    --image-preview-bg: #00000080;
    --image-preview-img-bg: #ffffff55;
    --image-preview-arrow-bg: #00000066;
    --image-preview-arrow-bg-hover: #000000e6;
    --input-bg: #ededed;
    --input-border-color: #d2d2d2;
    --input-border-focus-color: #3db8a7;
    --code-input-disable-bg: #bebebe;
    --code-input-bg: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
    --dot-loading-color: #a3a3a3;
    --input-drag-enter-bg: #e8c9c977;
    --overlay-bg: #0707074d;
    --phone-modal-nav-bg: #46464699;
    --phone-modal-nav-hover: #4e4e4e;
    --reaction-box-shadow: 0 0 10px 0 #0000001a;
    --border-color: #818181;
    --search-card-action-bg: #898989cc;
    --setting-box-des-color: #5e5e5e;
    --setting-box-cancel-btn-bg: #f0f0f0;
    --setting-box-cancel-btn-hover: #cbcbcb;
    --setting-box-border: none;
    --setting-bg: var(--white);

    --toggle-btn-color: #bbb;
    --toggle-btn-disable-color: #ededed;
    --eye-color: #ede0d0;

    --solid-border: 1px solid var(--foreground);
    --box-shadow: var(--black) 3px 3px;
    --white-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    --reply-box-box-shadow: var(--box-shadow);
    --creation-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    --light-close-icon-bg: #d2d2d2;
    --dark-close-icon-bg: #414141;
    --dark-close-icon-color: var(--white-low);
    --light-close-icon-color: var(--black-low);
    --input-search-placeholder-text-color: #747474;
    --message-noti-color: #4f4f4f;
}

[data-theme='dark'] {
    --background: #212121;
    --foreground: #ededed;
    --bg-match-color: #fdb564;
    --text-color: #e3e3e3;
    --text-low-color: #b3b3b3;
    --white: #2f2f2f;
    --white-low: #333;
    --black: #fff;
    --black-low: #ebebeb;
    --red: #b54c37;

    --gray-color: #7a7a7a77;
    --gray-color-low: #5a5a5a77;
    --pinned-message-color: #00000090;
    --delete-message-color: #b9b9b9;
    --reply-message-color: #ffffff;
    --left-side-toggle-btn-color: #a7a7a7;
    --auth-item-bg-hover: #8b8b8b;
    --auth-item-bg: #6a6a6a;
    --auth-bg-image:
        radial-gradient(#00000040, #0000 40%),
        radial-gradient(hsl(220, 60%, 25%) 30%, hsl(200, 60%, 20%), hsla(200, 60%, 20%, 0.4) 41%, transparent 52%),
        radial-gradient(hsl(48, 100%, 30%) 37%, transparent 46%),
        linear-gradient(155deg, transparent 65%, hsl(340, 80%, 40%) 95%), linear-gradient(45deg, #330066, #000033);
    --auth-opacity: 0.15;

    --notification-color: #edd0ac;
    --notification-unread-color: #3f3f3f;
    --notification-bg: #111;
    --notification-item-hover-color: #eac79c77;

    --expand-text-color: #7c1818;
    --search-color: #222;
    --search-bg-color: #e0e0e0;
    --search-title-box-shadow: 2px 2px #414141;
    --search-text-color: #333;

    --blur-btn-bg: var(--gray-color-low);

    --drop-box-box-shadow: rgb(61 61 61 / 24%) 0px 3px 8px;
    --blue-btn: #4949ff;
    --image-preview-bg: #00000080;
    --image-preview-img-bg: #ffffff55;
    --image-preview-arrow-bg: #ffffff;
    --image-preview-arrow-bg-hover: #ffffffcc;
    --input-bg: #535353;
    --input-border-color: #d2d2d2;
    --input-border-focus-color: #3db8a7;
    --code-input-disable-bg: #bebebe;
    --code-input-bg: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
    --dot-loading-color: #a3a3a3;
    --input-drag-enter-bg: #e8c9c977;
    --overlay-bg: #0707074d;
    --phone-modal-nav-bg: #46464699;
    --phone-modal-nav-hover: #4e4e4e;
    --reaction-box-shadow: 0 0 10px 0 #0000001a;
    --border-color: #818181;
    --search-card-action-bg: #626262dd;
    --setting-box-des-color: #c5c5c5;
    --setting-box-cancel-btn-bg: #3d3d3d;
    --setting-box-cancel-btn-hover: #6b6b6b;
    --setting-box-border: 1.5px solid #686868;
    --setting-bg: #111;

    --toggle-btn-color: #bbb;
    --toggle-btn-disable-color: #ededed;
    --eye-color: #2b2b2b;

    --solid-border: 1px solid #888888;
    --box-shadow: #6f6f6f 1.5px 1.5px;
    --white-box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    --reply-box-box-shadow: #fff 1px 1px;
    --creation-box-shadow: rgba(207, 207, 207, 0.2) 0px 2px 2px 0px;

    --dark-close-icon-bg: #d2d2d2;
    --light-close-icon-bg: #646464;
    --light-close-icon-color: var(--black-low);
    --dark-close-icon-color: var(--white-low);
    --input-search-placeholder-text-color: #4f4f4f;
    --message-noti-color: #8b8b8b;

    input::placeholder,
    textarea::placeholder {
        color: #c4c4c4; /* Màu xám nhạt */
        opacity: 0.7;
    }
}

html,
body {
    max-width: 100vw;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 62.5%;
    box-sizing: border-box;
    background-color: rgb(53, 53, 53);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.6rem;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.default-layout,
.other-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    background-color: var(--background);
    color: var(--foreground);

    .container {
        height: 100%;
        width: 100%;
    }

    .header,
    .content {
        width: 100%;
    }
}

.other-layout > .container,
.other-layout > .container > .content {
    height: 100vh;
}

.qr-container {
    max-width: 500px;
    width: 100%;
    min-height: 100px;
    margin: 0 12px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 40px 80px;
    border-radius: 16px;
    box-shadow:
        rgba(0, 0, 0, 0.19) 0px 10px 20px,
        rgba(0, 0, 0, 0.23) 0px 6px 6px;

    * {
        margin-bottom: 12px;
    }

    .qr-title {
        font-family: LargeRetro;
        letter-spacing: 1px;
        font-size: 2.6rem;
        text-transform: uppercase;
        font-weight: bold;
        color: black;
    }

    .logo-img {
        height: 100px;
        width: 100px;
        object-fit: cover;
    }
    .qr-code {
        margin-bottom: 12px;
        margin-top: 12px;
    }

    .download-btn {
        margin-top: 12px;
        // max-width: 360px;
        width: 100%;
        height: 44px;
        border-radius: 10rem;
        padding: 12px 42px;
        border: none;
        margin-top: 24px;
        font-family: var(--font-family);
        font-weight: 600;
        color: var(--white);
        font-size: 1.7rem;
        cursor: pointer;
        // background: #acb6e5; /* fallback for old browsers */

        background-image: linear-gradient(70.06deg, #2cccff -5%, #22dfbf 106%);

        background-color: #1dbfaf;
    }
}

@media (max-width: 600px) {
    .qr-container {
        max-width: 360px;

        .qr-code {
            width: 200px;
            height: 200px;
        }
    }
}

// Scrollbar

html *::-webkit-scrollbar {
    border-radius: 0;
    width: 8px;
}

html *::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #666;
}

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

html *::-webkit-scrollbar-thumb:hover {
    background: #444;
}

@media (max-width: 600px) {
    html *::-webkit-scrollbar {
        width: 4px;
    }

    html *::-webkit-scrollbar-thumb {
        width: 4px;
    }
}

// tippy

span[aria-describedby='tippy-tooltip'] {
    font-family: var(--font-family);
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--foreground);
}

// emoji-picker
.epr_x558go:focus {
    border: 1px solid #9a9a9a !important;
}

.epr_-f1jbax:focus:before {
    border: none !important;
}

.epr_-tul3d0 {
    max-height: 32px !important;
}
.epr_-a3ewa5 {
    max-width: 32px !important;
}

.epr_-u8wwnq {
    min-height: 32px !important;
}
.epr_xfdx0l {
    min-width: 32px !important;
}

.epr_jkst5z:focus {
    background-color: #fbb6a8 !important;
}

.epr_jkst5z:hover {
    background-color: #fbb6a8 !important;
}

.epr_-rk4ix5 {
    font-size: 1.4rem !important;
}

.epr_-3yva2a {
    border-top: 1px solid #9a9a9a !important;
}

.epr_cnf3p8 .epr-active {
    border: 1px solid #b54c37 !important;
}

.epr_-j7gyxp:focus {
    box-shadow: 0 0 0 3px #fbb6a8 !important;
}

.epr_6daqyu * {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif !important;
}

.epr_-ivanlx {
    border-radius: 50px !important;
    font-size: 1.4rem !important;
}

.epr_-z2fuzw {
    height: 36px !important;
}

.epr_-8ygbw8 {
    padding-bottom: 8px !important;
}

.epr_-kg0voo {
    display: none !important;
}

[data-theme='dark'] {
    .epr_-8623pq {
        background-color: #222 !important;
    }

    .epr_l33asz {
        background: transparent !important;
    }

    .epr_-xuzz9z {
        background-color: #222;
    }
}

// mention user

.mention-user {
    color: var(--red);
    padding: 2px 4px;
    border-radius: 4px;
    margin-right: 4px;
    font-weight: 500;
    cursor: pointer;
}
