* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff;
    color: #333;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
}
.site-wrapper {
    width: min(1180px, calc(100% - 30px));
    margin: 20px auto 80px;
}

.top-banner {
    width: 100%;
    margin-bottom: 15px;
}

.top-banner img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}

.page-layout {
    display: grid;

    grid-template-columns:
        230px
        minmax(0, 1fr)
        345px;

    gap: 14px;

    align-items: start;
}
.sidebar-box {
    background: #fff;

    margin-bottom: 15px;

    border:
        1px solid #ececec;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .05);
}

.sidebar-title {
    background: #2892d0;
    color: #fff;

    padding: 10px 12px;

    font-size: 14px;
}

.sidebar-box a {
    display: block;

    padding:
        8px
        12px;

    color: #0645ad;

    font-size: 13px;

    line-height: 1.3;
}

.sidebar-box a:hover {
    background: #f4f9fc;
    color: #2892d0;
}

.day-tabs {
    display: grid;

    grid-template-columns:
        1.25fr
        repeat(7, 1fr);

    height: 48px;

    margin-bottom: 15px;

    border:
        1px solid #e0e0e0;
}

.day-tabs button {
    border: 0;
    border-right:
        1px solid #ddd;

    background: #fff;
    color: #2892d0;

    cursor: pointer;

    font-size: 12px;
}

.day-tabs button:last-child {
    border-right: 0;
}

.day-tabs button.active {
    background: #2892d0;
    color: #fff;
}

.result-card {
    background: #fff;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, .06);

    padding-bottom: 15px;
}


.result-header {
    min-height: 83px;

    background: #2892d0;
    color: #fff;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 12px;

    text-align: center;
}

.result-header strong {
    font-size: 20px;
    margin-bottom: 8px;
}

.result-header span {
    font-size: 18px;
}

.number-container {
    display: flex;

    justify-content: center;

    gap: 9px;

    padding:
        12px
        10px
        4px;
}

.number-container div {
    width: 55px;
    height: 72px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #fff;
    color: #333;

    border:
        1px solid #333;

    border-radius: 5px;

    font-size: 51px;
    font-weight: 800;

    line-height: 1;
}

.result-date {
    text-align: center;

    color: #202b3c;

    font-size: 21px;
    font-weight: 700;

    padding:
        17px
        10px;
}
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.result-table {
    width: 90%;
    min-width: 480px;

    margin:
        0
        auto;

    border-collapse:
        collapse;

    table-layout:
        fixed;
}

.result-table td {
    width: 50%;

    border:
        1px solid #333;

    background:
        #fafafa;

    padding:
        13px
        10px;

    color: #555;

    text-align:
        center;

    font-size:
        18px;
}

.result-table td:last-child {
    font-weight: 600;
}
.main-ad {
    min-height: 525px;

    margin-top: 15px;

    position: relative;

    overflow: hidden;

    color: #fff;

    text-align: center;

    padding:
        25px
        25px
        20px;

    background:
        radial-gradient(
            circle at 75% 60%,
            rgba(255, 200, 180, .55),
            transparent 25%
        ),
        radial-gradient(
            circle at 25% 65%,
            rgba(255, 160, 130, .5),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #841713,
            #b42018 48%,
            #7d0f0d
        );

    border:
        1px solid #b02c24;
}

.main-ad::before,
.main-ad::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(255, 91, 70, .16);

    filter:
        blur(3px);
}

.main-ad::before {
    left: -80px;
    top: 100px;
}

.main-ad::after {
    right: -80px;
    bottom: 30px;
}


.ad-logo {
    position: relative;
    z-index: 2;

    font-size: 17px;
    font-weight: 800;

    color: #ffd98e;
}

.main-ad h2 {
    position: relative;
    z-index: 2;

    margin:
        5px
        0
        8px;

    font-family:
        Georgia,
        serif;

    font-size: 37px;
    font-style: italic;
}

.main-ad h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #ffd591;

    font-size: 21px;
    font-family:
        Georgia,
        serif;

    font-style: italic;
}


.jewelry-row {
    position: relative;
    z-index: 2;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 35px;

    margin-top: 50px;
}

.jewelry {
    width: 85px;
    height: 85px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        5px solid #f5d374;

    border-radius: 50%;

    color: #fff0b7;

    font-size: 50px;

    transform:
        rotate(-10deg);
}

.jewelry.big {
    width: 110px;
    height: 110px;

    font-size: 75px;

    color: #ffdc75;
}


.ad-couple {
    position: absolute;

    right: 55px;
    bottom: 85px;

    z-index: 2;

    font-size: 100px;

    color:
        rgba(255, 225, 195, .9);
}

.ad-bottom-text {
    position: absolute;

    bottom: 25px;
    left: 0;
    right: 0;

    z-index: 2;

    font-size: 13px;
    font-weight: 700;

    color: #ffd29a;
}

.number-filter {
    display: flex;

    align-items: center;

    overflow-x: auto;

    margin-top: 14px;

    border:
        1px solid #ddd;

    background: #fff;
}

.number-filter button {
    min-width: 42px;
    height: 45px;

    border: 0;
    border-right:
        1px solid #ddd;

    background: #fff;

    color: #2892d0;

    cursor: pointer;
}

.number-filter button.active {
    min-width: 70px;

    background: #2892d0;
    color: #fff;
}

.quick-links {
    background: #fff;

    padding:
        18px
        15px;

    border:
        1px solid #eee;

    margin-top: 12px;
}

.quick-links a {
    display: block;

    color: #111;

    padding: 6px 0;

    font-size: 13px;
}

.quick-links a:hover {
    color: #2892d0;
}

.history-section {
    margin-top: 15px;
}

.history-table {
    width: 100%;

    min-width: 650px;

    border-collapse:
        collapse;

    table-layout:
        fixed;
}

.history-table th,
.history-table td {
    border:
        1px solid #333;

    text-align:
        center;

    padding:
        9px
        5px;
}

.history-table th {
    background:
        linear-gradient(
            to bottom,
            #0876cf,
            #176db3
        );

    color: #fff;

    font-size: 13px;

    line-height: 1.35;
}

.history-table td {
    background: #fff;

    color: #111;

    font-size: 13px;
}

.history-table tbody tr:hover td {
    background: #f2f9ff;
}

.pagination {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin:
        22px
        0;
}

.pagination button {
    min-width: 36px;
    height: 36px;

    border: 0;

    border-radius: 3px;

    background: #f2f2f2;

    color: #555;

    cursor: pointer;
}

.pagination button.active {
    background: #0876cf;
    color: #fff;
}

.pagination button:hover:not(.active) {
    background: #ddd;
}

.water-ad {
    min-height: 195px;

    position: relative;

    overflow: hidden;

    margin-bottom: 15px;

    padding: 20px;

    color: #fff;

    text-align: right;

    background:
        radial-gradient(
            circle at 20% 90%,
            #82e4ff,
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #84ddf7,
            #0080c7 55%,
            #0b67b2
        );
}

.water-ad > span {
    position: absolute;

    top: 5px;
    right: 5px;

    background: red;

    padding:
        3px
        6px;

    font-size: 10px;

    font-weight: 800;
}

.water-ad small {
    display: block;

    margin-top: 8px;

    font-size: 11px;
}

.water-ad strong {
    display: block;

    margin-top: 4px;

    font-size: 17px;
}

.water-wave {
    position: absolute;

    left: 25px;
    bottom: 18px;

    font-size: 75px;
}


.right-title {
    background: #2892d0;
    color: #fff;

    padding:
        10px
        12px;

    font-size: 14px;
}


.top10-ad {
    min-height: 230px;

    padding: 20px;

    background: #fff;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: start;

    gap: 15px;

    border:
        1px solid #eee;
}

.top10-number {
    color: #111;

    font-size: 47px;

    letter-spacing:
        -4px;
}

.top10-number span {
    color: #cf123c;
}

.top10-ad > strong {
    color: #222;

    font-size: 16px;

    line-height: 1.3;
}

.top10-footer {
    grid-column:
        1 / -1;

    background: #c81343;
    color: #fff;

    padding: 15px;

    font-size: 30px;
}


.left-ad {
    min-height: 175px;

    padding: 12px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(85, 65, 40, .2),
            rgba(25, 25, 25, .5)
        ),
        #ad9d7d;

    color: #fff;
}

.left-ad strong {
    display: block;

    margin-top: 25px;

    font-size: 18px;

    transform:
        rotate(-4deg);
}

.left-ad span {
    display: block;

    margin-top: 8px;

    font-size: 11px;
}

@media (max-width: 1050px) {

    .page-layout {
        grid-template-columns:
            190px
            minmax(0, 1fr);
    }

    .right-sidebar {
        display: none;
    }

}


@media (max-width: 760px) {

    .site-wrapper {
        width: 100%;

        margin-top: 0;
    }

    .top-banner {
        margin-bottom: 8px;
    }

    .page-layout {
        display: block;
    }

    .left-sidebar,
    .right-sidebar {
        display: none;
    }

    .main-content {
        padding:
            0
            8px;
    }


    .day-tabs {
        display: flex;

        overflow-x: auto;
    }

    .day-tabs button {
        flex:
            0 0
            82px;
    }


    .result-header strong {
        font-size: 18px;
    }

    .result-header span {
        font-size: 15px;
    }


    .number-container {
        gap: 6px;
    }

    .number-container div {
        width: 48px;
        height: 65px;

        font-size: 43px;
    }


    .main-ad {
        min-height: 370px;
    }

    .main-ad h2 {
        font-size: 28px;
    }

    .main-ad h3 {
        font-size: 17px;
    }


    .jewelry-row {
        gap: 15px;

        margin-top: 40px;
    }

    .jewelry {
        width: 60px;
        height: 60px;

        font-size: 35px;
    }

    .jewelry.big {
        width: 80px;
        height: 80px;

        font-size: 50px;
    }

}


@media (max-width: 430px) {

    .number-container div {
        width: 44px;
        height: 60px;

        font-size: 39px;
    }

}