@font-face {
    font-family: 'Jakarta';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Jakarta';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Jakarta';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Jakarta';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-ext-500-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Jakarta';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Jakarta';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Jakarta';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Jakarta';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Display';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(fonts/poppins-latin-500-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Display';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(fonts/poppins-latin-ext-500-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Display';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(fonts/poppins-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Display';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(fonts/poppins-latin-ext-600-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Display';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(fonts/poppins-latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Display';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(fonts/poppins-latin-ext-700-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

:root {
    --red: #d9272e;
    --red-d: #b81d23;
    --ink: #222;
    --mut: #6f6f6f;
    --line: #e6e6e6;
    --bg: #f4f5f7;
    --side: #1b1b1b
}

body.adm {
    background: var(--bg);
    font-family: Jakarta, system-ui, sans-serif;
    font-size: .9rem;
    color: var(--ink)
}

.adm h1,
.adm h2,
.adm h3,
.adm h4,
.adm h5,
.adm h6,
.adm .btn,
.kn {
    font-family: Display, Jakarta, sans-serif;
    letter-spacing: -.01em
}

.adm a {
    text-decoration: none
}

.side {
    position: fixed;
    inset: 0 auto 0 0;
    width: 244px;
    background: var(--side);
    color: #bdbdbd;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s
}

.side .sb {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.2rem 1.2rem 1rem;
    color: #fff
}

.side .sb i {
    color: var(--red);
    font-size: 1.9rem
}

.side .sb b {
    font-family: Display;
    font-size: 1.2rem
}

.side .sb b em {
    font-style: normal;
    color: var(--red)
}

.side .sb small {
    display: block;
    font-size: .62rem;
    color: #8a8a8a;
    font-family: Jakarta
}

.side .grp {
    font-size: .66rem;
    letter-spacing: .12em;
    color: #7a7a7a;
    padding: 1rem 1.4rem .4rem;
    font-weight: 600
}

.nl {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem 1rem;
    margin: .12rem .8rem;
    border-radius: 8px;
    color: #c4c4c4;
    font-weight: 500;
    font-size: .88rem
}

.nl i {
    font-size: 1.05rem;
    width: 1.2rem
}

.nl:hover {
    background: #2a2a2a;
    color: #fff
}

.nl.on {
    background: var(--red);
    color: #fff;
    box-shadow: 0 6px 16px rgba(217, 39, 46, .35)
}

.nl .nb {
    margin-left: auto;
    background: #fff;
    color: var(--red);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    padding: .05rem .45rem
}

.nl.on .nb {
    background: #fff
}

.side .foot {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid #2a2a2a;
    font-size: .78rem
}

.main {
    margin-left: 244px;
    min-height: 100vh
}

.tbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1030
}

.tbar h1 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0
}

.av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
}

.content {
    padding: 1.5rem
}

@media(max-width:991px) {
    .side {
        transform: translateX(-100%)
    }

    .side.open {
        transform: none
    }

    .main {
        margin-left: 0
    }

    .content {
        padding: 1rem
    }

    .tbar {
        padding: .7rem 1rem
    }
}

.bk {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1035
}

.bk.open {
    display: block
}

.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px
}

.panel-h {
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.panel-h h2 {
    font-size: .98rem;
    margin: 0;
    font-weight: 600
}

.panel-b {
    padding: 1.2rem
}

.kcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem;
    display: flex;
    gap: .9rem;
    align-items: center;
    height: 100%
}

.kicon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex: none
}

.kn {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1
}

.kl {
    font-size: .78rem;
    color: var(--mut)
}

.ks {
    font-size: .7rem;
    color: #2e9e5b;
    font-weight: 600
}

.welcome {
    background: linear-gradient(100deg, #1b1b1b, #3a1417);
    color: #fff;
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.welcome h2 {
    font-size: 1.3rem;
    margin: 0
}

.welcome p {
    margin: .2rem 0 0;
    color: #cfcfcf
}

.btn-r {
    background: var(--red);
    color: #fff;
    font-weight: 600;
    border: 0;
    border-radius: 8px
}

.btn-r:hover {
    background: var(--red-d);
    color: #fff
}

.btn-w {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    border: 0;
    border-radius: 8px
}

.btn-w:hover {
    background: #f1f1f1
}

.btn-ghost {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 8px;
    font-weight: 500
}

.btn-ghost:hover {
    border-color: var(--red);
    color: var(--red)
}

.ib {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: #444;
    font-size: .85rem
}

.ib:hover {
    border-color: var(--red);
    color: var(--red)
}

.ib.del:hover {
    background: var(--red);
    color: #fff
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: .7rem;
    height: 170px
}

.bars>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    font-size: .7rem;
    color: var(--mut)
}

.bars span {
    display: block;
    width: 100%;
    max-width: 38px;
    background: linear-gradient(180deg, var(--red), #f0777c);
    border-radius: 6px 6px 0 0;
    min-height: 4px
}

.bars b {
    font-size: .74rem;
    color: var(--ink);
    margin-bottom: .25rem
}

.donut {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    flex: none
}

.donut::after {
    content: '';
    position: absolute;
    inset: 24px;
    background: #fff;
    border-radius: 50%
}

.donut div {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.donut b {
    font-size: 1.5rem;
    font-family: Display
}

.donut small {
    color: var(--mut);
    font-size: .68rem
}

.lg {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    margin-bottom: .4rem
}

.lg i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block
}

.hb {
    margin-bottom: .8rem
}

.hb .t {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    margin-bottom: .25rem
}

.hb .tr {
    height: 7px;
    background: #eee;
    border-radius: 99px;
    overflow: hidden
}

.hb .tr i {
    display: block;
    height: 100%;
    background: var(--red);
    border-radius: 99px
}

.tbl {
    width: 100%;
    margin: 0
}

.tbl th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mut);
    font-weight: 600;
    background: #fafafa;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap
}

.tbl td {
    padding: .75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle
}

.tbl tr:last-child td {
    border-bottom: 0
}

.tbl tbody tr:hover {
    background: #fcfcfc
}

.th {
    width: 54px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    background: #e8e8e8;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999
}

.pill {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600
}

.p-available,
.p-closed-g {
    background: #e5f6ec;
    color: #1e8a4c
}

.p-sold,
.p-new {
    background: #fdecec;
    color: var(--red)
}

.p-rented,
.p-read {
    background: #e6f0fc;
    color: #1f6ad0
}

.p-draft,
.p-closed {
    background: #eee;
    color: #666
}

.p-sale {
    background: #fff3e0;
    color: #c26a00
}

.p-rent {
    background: #e6f0fc;
    color: #1f6ad0
}

.form-control,
.form-select {
    border-color: var(--line);
    border-radius: 8px;
    font-size: .88rem
}

.form-control:focus,
.form-select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 .2rem rgba(217, 39, 46, .13)
}

.form-label {
    font-size: .76rem;
    font-weight: 600;
    color: #555;
    margin-bottom: .3rem
}

.form-check-input:checked {
    background-color: var(--red);
    border-color: var(--red)
}

.tabs a {
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: 1px solid var(--line)
}

.tabs a.on {
    background: var(--red);
    color: #fff;
    border-color: var(--red)
}

.tabs a span {
    opacity: .75;
    margin-left: .2rem
}

.mmedia {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line)
}

.mmedia img,
.mmedia video {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block
}

.mmedia label {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .7rem;
    padding: .25rem .5rem;
    margin: 0
}

.lg-wrap {
    min-height: 100vh;
    display: flex
}

.lg-l {
    flex: 1;
    background: linear-gradient(135deg, #1b1b1b, #4a171b);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.lg-r {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #fff
}

@media(max-width:860px) {
    .lg-l {
        display: none
    }
}

.p-contacted {
    background: #e6f0fc;
    color: #1f6ad0
}