body.home header.site-header a.home,
body.puzzle header.site-header a.puzzle,
body.setup header.site-header a.setup,
body.about header.site-header a.about,
body.bmi header.site-header a.bmi,
body.game header.site-header a.game,
body.room header.site-header a.room,
body.dashboard header.site-header a.dashboard,
body.login header.site-header a.login,
body.news header.site-header a.news,
body.contact header.site-header a.contact {
    font-weight: 500;
}
body.home header.site-header a.home:before,
body.home header.site-header a.home::before,
body.puzzle header.site-header a.puzzle:before,
body.puzzle header.site-header a.puzzle::before,
body.setup header.site-header a.setup:before,
body.setup header.site-header a.setup::before,
body.about header.site-header a.about:before,
body.about header.site-header a.about::before,
body.bmi header.site-header a.bmi:before,
body.bmi header.site-header a.bmi::before,
body.game header.site-header a.game:before,
body.game header.site-header a.game::before,
body.room header.site-header a.room:before,
body.room header.site-header a.room::before,
body.dashboard header.site-header a.dashboard:before,
body.dashboard header.site-header a.dashboard::before,
body.login header.site-header a.login:before,
body.login header.site-header a.login::before,
body.news header.site-header a.news:before,
body.news header.site-header a.news::before,
body.contact header.site-header a.contact:before,
body.contact header.site-header a.contact::before {
    width: 100%;
}
body.register header.site-header a.register {
    background-color: beige !important;
    color: #f04124 !important;
}
body.home header.site-header ul.navbar-nav.old a.home,
body.puzzle header.site-header ul.navbar-nav.old a.puzzle,
body.setup header.site-header ul.navbar-nav.old a.setup,
body.about header.site-header ul.navbar-nav.old a.about,
body.bmi header.site-header ul.navbar-nav.old a.bmi,
body.game header.site-header ul.navbar-nav.old a.game,
body.room header.site-header ul.navbar-nav.old a.room,
body.dashboard header.site-header ul.navbar-nav.old a.dashboard,
body.news header.site-header ul.navbar-nav.old a.news,
body.contact header.site-header ul.navbar-nav.old a.contact {
    font-weight: 500;
}
body.home header.site-header ul.navbar-nav.old a.home:before,
body.home header.site-header ul.navbar-nav.old a.home::before,
body.puzzle header.site-header ul.navbar-nav.old a.puzzle:before,
body.puzzle header.site-header ul.navbar-nav.old a.puzzle::before,
body.setup header.site-header ul.navbar-nav.old a.setup:before,
body.setup header.site-header ul.navbar-nav.old a.setup::before,
body.about header.site-header ul.navbar-nav.old a.about:before,
body.about header.site-header ul.navbar-nav.old a.about::before,
body.bmi header.site-header ul.navbar-nav.old a.bmi:before,
body.bmi header.site-header ul.navbar-nav.old a.bmi::before,
body.game header.site-header ul.navbar-nav.old a.game:before,
body.game header.site-header ul.navbar-nav.old a.game::before,
body.room header.site-header ul.navbar-nav.old a.room:before,
body.room header.site-header ul.navbar-nav.old a.room::before,
body.dashboard header.site-header ul.navbar-nav.old a.dashboard:before,
body.dashboard header.site-header ul.navbar-nav.old a.dashboard::before,
body.news header.site-header ul.navbar-nav.old a.news:before,
body.news header.site-header ul.navbar-nav.old a.news::before,
body.contact header.site-header ul.navbar-nav.old a.contact:before,
body.contact header.site-header ul.navbar-nav.old a.contact::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
body.loading .navbar-brand img {
    -webkit-animation: spin 0.24s linear 0s infinite;
    -moz-animation: spin 0.24s linear 0s infinite;
    animation: spin 0.24s linear 0s infinite;
}
#header-status {
    font-size: 15px !important;
}
header.site-header {
    width: 100%;
    background-color: rgba(240, 65, 36, 0.96);
    z-index: 999;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
header.site-header ul.navbar-nav li.dropdown.language-switcher > a {
    border-left: 2px solid beige;
    padding-left: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
header.site-header ul.navbar-nav:hover a:before,
header.site-header ul.navbar-nav:hover a::before {
    width: 0;
}
header.site-header ul.navbar-nav .dropdown-menu {
    position: absolute;
    margin-top: -7px;
}
header.site-header ul.navbar-nav.old:hover a:before,
header.site-header ul.navbar-nav.old:hover a::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}
header.site-header ul.navbar-nav.old a {
    color: beige;
    position: relative;
    font-weight: 500;
}
header.site-header ul.navbar-nav.old a:not(.navbar-brand) {
    top: -5px;
}
header.site-header ul.navbar-nav.old a:not(.navbar-brand):before,
header.site-header ul.navbar-nav.old a:not(.navbar-brand)::before {
    content: "";
    position: absolute;
    height: 3px;
    right: 0;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    background-color: #ffdead;
    bottom: -5px;
    left: 0;
    z-index: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
header.site-header ul.navbar-nav.old a:not(.navbar-brand):hover {
    text-decoration: none;
    font-weight: 500;
}
header.site-header ul.navbar-nav.old a:not(.navbar-brand):hover:before,
header.site-header ul.navbar-nav.old a:not(.navbar-brand):hover::before {
    -webkit-transform: scaleX(1) !important;
    transform: scaleX(1) !important;
}
header.site-header a {
    color: beige;
    position: relative;
    font-weight: 500;
}
header.site-header a.register {
    background-color: beige !important;
    color: #f04124 !important;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 42px;
    border: 2px solid beige;
    text-decoration: none !important;
    -moz-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
header.site-header a.register::before {
    display: none !important;
}
header.site-header a.register:hover {
    background-color: beige !important;
    color: #f04124 !important;
}
header.site-header a.login {
    background-color: #f04124 !important;
    color: beige !important;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 42px;
    border: 2px solid beige;
    text-decoration: none !important;
    -moz-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
header.site-header a.login::before {
    display: none !important;
}
header.site-header a.login:hover {
    background-color: beige !important;
    color: #f04124 !important;
}
header.site-header a:not(.navbar-brand) {
    top: -5px;
}
header.site-header a:not(.navbar-brand):before,
header.site-header a:not(.navbar-brand)::before {
    content: "";
    position: absolute;
    height: 3px;
    left: 50%;
    background-color: #ffdead;
    bottom: -5px;
    width: 0;
    -moz-transition: width 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -o-transition: width 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transition: width 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: width 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
header.site-header a:not(.navbar-brand):hover {
    text-decoration: none;
    font-weight: 500;
}
header.site-header a:not(.navbar-brand):hover:before,
header.site-header a:not(.navbar-brand):hover::before {
    width: 100% !important;
}
header.site-header .navbar-brand {
    margin-top: 1px;
}
header.site-header .navbar-brand img {
    margin-right: 12px;
}
header.site-header .navbar-brand img:hover {
    -webkit-animation: spin 1.2s linear 0s infinite;
    -moz-animation: spin 1.2s linear 0s infinite;
    animation: spin 1.2s linear 0s infinite;
}
header.site-header .navbar-brand img:active {
    -webkit-animation: spin 0.42s linear 0s infinite;
    -moz-animation: spin 0.42s linear 0s infinite;
    animation: spin 0.42s linear 0s infinite;
}
header.site-header .navbar {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
}
header.site-header .navbar ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0 -14px;
}
header.site-header .navbar li {
    padding: 30px 12.5px 20px;
}
header.site-header .navbar li a {
    font-weight: 500;
    font-size: 14px;
}
header.site-header .navbar li a.waves-effect,
header.site-header .navbar li a.waves-light {
    display: inline !important;
}
header.site-header .dropdown-menu a {
    color: #f04124;
    top: 0 !important;
}
header.site-header .dropdown-menu a:before,
header.site-header .dropdown-menu a::before {
    display: none !important;
}
header.site-header .dropdown-menu .dropdown-item.active,
header.site-header .dropdown-menu .dropdown-item:active {
    background-color: #f04124 !important;
    color: beige;
}
header.site-header .menu-toggle {
    display: none;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    padding: 37px;
    z-index: 3;
}
header.site-header .menu-toggle.open {
    background-image: url(/img/ic-menu-open-beige.svg);
    width: 20px;
    height: 12px;
}
header.site-header .menu-toggle.close {
    background-image: url(/img/ic-menu-close-beige.svg);
    width: 20px;
    height: 15px;
}
@media (max-width: 1199.98px) {
    header.site-header ul.navbar-nav {
        overflow-y: auto !important;
        max-height: calc(100vh - 74px);
    }
    header.site-header ul.navbar-nav li.dropdown.language-switcher > a {
        border-left: none;
        padding: 0 !important;
    }
    header.site-header ul.navbar-nav .dropdown-menu {
        position: static;
        background-color: #fff;
    }
    header.site-header .navbar-brand {
        margin-left: auto;
    }
    header.site-header .navbar-brand h1,
    header.site-header .navbar-brand span {
        display: none !important;
    }
    header.site-header .navbar-brand img {
        margin-right: 0;
    }
    header.site-header .menu-toggle {
        display: block;
    }
    header.site-header .menu-toggle.open ~ nav.navbar {
        display: none;
    }
    header.site-header .menu-toggle.close ~ nav.navbar {
        display: block;
        position: absolute;
        background-color: rgba(240, 65, 36, 0.96);
        top: 74px;
        left: 0;
        z-index: 2;
        width: 100%;
    }
    header.site-header .menu-toggle.close ~ nav.navbar ul li {
        width: 100%;
        margin: 0;
        padding: 12px 24px;
    }
    header.site-header .menu-toggle.close ~ nav.navbar ul li a {
        color: beige;
    }
    header.site-header .menu-toggle.close ~ nav.navbar ul li .dropdown-menu a {
        color: #f04124;
    }
    header.site-header
        .menu-toggle.close
        ~ nav.navbar
        ul
        li
        .dropdown-menu
        .dropdown-item.active,
    header.site-header
        .menu-toggle.close
        ~ nav.navbar
        ul
        li
        .dropdown-menu
        .dropdown-item:active {
        background-color: #f04124;
        color: beige;
    }
}
footer {
    background-color: #181818;
    color: #fff;
    z-index: 123456789;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
footer a {
    color: #d2d2d2;
}
footer a:hover {
    color: #fff;
}
footer ul li {
    margin-bottom: 0.7em;
}
body.home footer a.home,
body.puzzle footer a.puzzle,
body.setup footer a.setup,
body.about footer a.about,
body.bmi footer a.bmi,
body.game footer a.game,
body.room footer a.room,
body.news footer a.news,
body.contact footer a.contact {
    text-decoration: underline;
}
footer ul.list-unstyled:hover a {
    text-decoration: none;
}
footer ul.list-unstyled > li > a:hover {
    text-decoration: underline !important;
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input,
input:before,
input:after,
textarea {
    -webkit-user-select: initial !important;
    -khtml-user-select: initial !important;
    -moz-user-select: initial !important;
    -ms-user-select: initial !important;
    user-select: initial !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid #dd9780 !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow: 0 0 0 0.25rem rgba(186, 46, 0, 0.25) !important;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(186, 46, 0, 0.25) !important;
    transition: background-color 1000s ease-in-out 0s;
}
body {
       font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif !important;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #312e2b !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Texturina", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif !important;
}
.form-control,
input:-internal-autofill-selected {
    background-color: #fef6e8 !important;
}
.form-control:focus,
input:-internal-autofill-selected:focus {
    border-color: #dd9780 !important;
    box-shadow: 0 0 0 0.25rem rgba(186, 46, 0, 0.25) !important;
}
.page-link:focus,
.form-check-input:focus {
    border-color: #dd9780 !important;
    box-shadow: 0 0 0 0.25rem rgba(186, 46, 0, 0.25) !important;
}
.hero {
    background-color: #faebd7;
}
.hero .hero-box {
    background-color: rgba(255, 250, 240, 0.42);
}
.hero .hero-box .nav-tabs {
    border-bottom: 2px solid #f04124;
}
.hero .hero-box .nav-tabs li a {
    cursor: pointer;
    padding: 12px 24px;
    display: block;
}
.hero .hero-box .nav-tabs li.active a {
    background-color: #f04124;
    color: #fff;
}
.hero .hero-box .nav-tabs li:not(.active) a {
    color: #f04124;
}
.hero .hero-box .nav-tabs li:nth-child(3) a {
    background-color: transparent;
    color: #f04124;
}
.hero .hero-box .nav-tabs li:nth-child(3).active a {
    text-decoration: underline;
}
.hero .hero-box .desc {
    color: #282f39;
    font-style: italic;
}
.hero .hero-box span#sleep_time_results ul,
.hero .hero-box span#wake_up_time_results ul {
    list-style: none;
    padding-left: 0;
    overflow: hidden;
}
.hero .hero-box span#sleep_time_results ul li,
.hero .hero-box span#wake_up_time_results ul li {
    display: block;
    width: auto;
    float: left;
    font-size: 18px;
    margin: 4px;
    padding: 4px 12px;
}
.comments {
    background-color: #fafafa;
}
.container-fluid.about,
.container-fluid.bmi,
.container-fluid.game,
.container-fluid.news,
.container-fluid.contact {
    background-color: #312e2b;
    color: beige;
}
.container-fluid.bmi-explanation,
.container-fluid.game-explanation {
    background-color: #f5e5b5;
}
#tao-phong a {
    color: #f04124 !important;
}
#tao-phong a i {
    color: #f04124 !important;
}
#tao-phong a:active {
    background-color: #f04124 !important;
    color: beige !important;
}
#tao-phong a:active i {
    color: beige !important;
}
#proverb {
    color: #fffaf0;
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}
#proverb #proverb_content:before,
#proverb #proverb_content::before {
    content: "“";
    position: relative;
    top: 24px;
    font-size: 32px;
}
#proverb span.content {
    cursor: pointer;
}
#proverb span.content.introjs-relativePosition {
    color: #f04124;
}
#proverb_refresh {
    display: inline-block;
    cursor: pointer;
}
#proverb_refresh i {
    color: #fffaf0;
    font-size: 29px;
}
#proverb_refresh:hover i {
    -webkit-animation: spin 900ms linear 0s infinite;
    -moz-animation: spin 900ms linear 0s infinite;
    animation: spin 900ms linear 0s infinite;
}
#result,
#compatibility,
#ket-qua,
#ghep-cap {
    height: 74px;
    margin-top: -74px;
    pointer-events: none;
    z-index: -1;
}
.chart {
    background-color: #fffaf0;
}
.chart #main_chart {
    height: 480px;
    width: calc(100% - 100px);
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.adsense {
    background-color: #fffaf0;
}
.btn {
    cursor: pointer;
    color: #fff;
}
.btn.bootbox-cancel {
    color: #222 !important;
}
.custom-select {
    cursor: pointer;
}
#dob {
    cursor: pointer;
}
.chart-nav {
    font-size: 48px;
    color: #97a4ad;
    top: 288px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.3));
}
.chart-nav:hover {
    color: #282f39;
}
#change-date {
    width: 150px;
    cursor: pointer;
    margin-bottom: 5px;
}
#ajax-chart {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}
#info {
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#info p {
    font-size: 20px;
}
.info {
    background-color: #fdfff5;
}
.info .controls {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 420ms ease-in-out;
    -moz-transition: max-height 420ms ease-in-out;
    -o-transition: max-height 420ms ease-in-out;
    transition: max-height 420ms ease-in-out;
    height: 64px;
}
.info .controls:hover,
.info .controls:active,
.info .controls:focus {
    max-height: 420px;
}
.info:hover .controls,
.info:active .controls,
.info:focus .controls {
    max-height: 420px;
}
.datepicker td,
.datepicker th {
    width: 36px !important;
    height: 36px !important;
}
.datepicker .datepicker-switch {
    width: 160px !important;
}
.highcharts-xaxis-labels text {
    cursor: pointer !important;
}
.highcharts-xaxis-labels text:hover {
    font-weight: bold;
    font-style: italic;
}
.tooltip {
    font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif !important;
    z-index: 100000 !important;
}
#bmi_app {
    box-sizing: content-box;
}
#bmi_app * {
    box-sizing: content-box !important;
}
#bmi_app .input-group-prepend .input-group-text {
    background-color: #f04124;
    color: #fff;
}
#bmi_app .input-group-prepend + input {
    background-color: #fff;
    color: #282f39;
}
#bmi_app .input-group-append .input-group-text {
    background-color: #282f39;
    color: #fff;
}
.page-item.active .page-link {
    background-color: #f04124 !important;
    border-color: #f04124 !important;
}
.fb_iframe_widget_fluid_desktop iframe {
    min-width: 100% !important;
}
@media (max-width: 413px) {
    .hero .hero-box {
        width: 100% !important;
    }
    .hero .hero-box .nav-tabs li {
        width: 100%;
    }
    .hero .hero-box .nav-tabs li a {
        text-align: center;
    }
    .hero .hero-box .desc {
        font-size: 12px;
    }
    .hero #proverb {
        width: 100% !important;
    }
}
@media (min-width: 414px) and (max-width: 575px) {
    .hero .hero-box {
        width: 100% !important;
    }
    .hero .hero-box .nav-tabs li {
        width: 100%;
    }
    .hero .hero-box .nav-tabs li a {
        text-align: center;
    }
    .hero .hero-box .desc {
        font-size: 12px;
    }
    .hero #proverb {
        width: 100% !important;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .hero .hero-box {
        width: 100% !important;
    }
    .hero .hero-box .nav-tabs li {
        width: 100%;
    }
    .hero .hero-box .nav-tabs li a {
        text-align: center;
    }
    .hero .hero-box .desc {
        font-size: 12px;
    }
    .hero #proverb {
        width: 100% !important;
    }
}
#at4-share {
    z-index: 0;
}
div.fb-comments.fb_iframe_widget.fb_iframe_widget_fluid_desktop {
    background-color: #eee !important;
}
.card
    .card-body
    div.fb-comments.fb_iframe_widget.fb_iframe_widget_fluid_desktop {
    background-color: #fff !important;
}
ins.adsbygoogle[data-ad-status="filled"] + a {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] + a {
    display: block;
}
.showPromotion {
    cursor: pointer;
}
.page-item.disabled .page-link {
    color: #aaa !important;
}
.tooltip-inner {
    max-width: 350px;
}
h5[data-toggle="tooltip"] {
    cursor: help;
    width: fit-content;
    margin: 0 auto;
}
#map {
    width: 100%;
    height: 420px;
}
@media screen and (min-width: 1400px) {
    .container {
        max-width: 1320px !important;
    }
}
.introjs-progressbar {
    background-color: #f04124 !important;
}
body.login .btn-facebook,
body.login .btn-google,
body.login .btn-github,
body.login .btn-linkedin,
body.login .btn-gitlab,
body.login .btn-bitbucket,
body.login .btn-zalo {
    width: 304px;
}
body.register .btn-facebook,
body.register .btn-google,
body.register .btn-github,
body.register .btn-linkedin,
body.register .btn-gitlab,
body.register .btn-bitbucket,
body.register .btn-zalo {
    width: 280px;
}
.btn-facebook {
    background-color: #3b5998 !important;
    border: 3px solid #3b5998 !important;
    color: #fff !important;
}
.btn-facebook:hover {
    background-color: #fff !important;
    border-color: #3b5998 !important;
    color: #3b5998 !important;
}
.btn-google {
    background-color: #ea4335 !important;
    border: 3px solid #ea4335 !important;
    color: #fff !important;
}
.btn-google:hover {
    background-color: #fff !important;
    border-color: #ea4335 !important;
    color: #ea4335 !important;
}
.btn-github {
    background-color: #000 !important;
    border: 3px solid #000 !important;
    color: #fff !important;
}
.btn-github:hover {
    background-color: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
}
.btn-linkedin {
    background-color: #0077b5 !important;
    border: 3px solid #0077b5 !important;
    color: #fff !important;
}
.btn-linkedin:hover {
    background-color: #fff !important;
    border-color: #0077b5 !important;
    color: #0077b5 !important;
}
.btn-gitlab {
    background-color: #fc6d26 !important;
    border: 3px solid #fc6d26 !important;
    color: #fff !important;
}
.btn-gitlab:hover {
    background-color: #fff !important;
    border-color: #fc6d26 !important;
    color: #fc6d26 !important;
}
.btn-bitbucket {
    background-color: #0357d1 !important;
    border: 3px solid #0357d1 !important;
    color: #fff !important;
}
.btn-bitbucket:hover {
    background-color: #fff !important;
    border-color: #0357d1 !important;
    color: #0357d1 !important;
}
.btn-zalo {
    background-color: #0067ff !important;
    border: 3px solid #0067ff !important;
    color: #fff !important;
}
.btn-zalo:hover {
    background-color: #fff !important;
    border-color: #0067ff !important;
    color: #0067ff !important;
}
a.animate {
    box-shadow: inset 0 0 0 0 #f04124;
    font-weight: bolder;
    color: #f04124;
    text-decoration: none !important;
    padding: 0 0.25rem;
    margin: 0 -0.25rem;
    border-radius: 0.5rem;
    transition: color 666ms ease-in-out, box-shadow 666ms ease-in-out;
}
a.animate:hover {
    color: #fff !important;
    box-shadow: inset 100em 0 0 0 #f04124;
    border-radius: 0.5rem;
}
a.animate-light {
    box-shadow: inset 0 0 0 0 #fff;
    font-weight: bolder;
    color: #f04124;
    text-decoration: none !important;
    padding: 0 0.25rem;
    margin: 0 -0.25rem;
    border-radius: 0.5rem;
    transition: color 666ms ease-in-out, box-shadow 666ms ease-in-out;
}
a.animate-light:hover {
    color: #f04124 !important;
    box-shadow: inset 100em 0 0 0 #fff;
    border-radius: 0.5rem;
}
.circle {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    position: absolute;
    border-radius: 15px;
    z-index: -1;
}
.modal-header {
    overflow-wrap: anywhere !important;
}
.highlight {
    box-shadow: inset 0 0 3px 3px #6d5330;
}
.highlight-red {
    box-shadow: inset 0 0 3px 3px red;
}
.highlight-black {
    box-shadow: inset 0 0 3px 3px #000;
}
#ban-co {
    touch-action: none !important;
    pointer-events: all;
    width: 100%;
    max-width: 380px;
    margin: 0 auto !important;
}
#ban-co:has(.notation-8c7a2) {
    padding: 21px 0 !important;
    background-color: #dfbd85 !important;
}
#ban-co:has(.notation-8c7a2):has(.spare-pieces-9e77b) {
    padding: 0 !important;
}
body.setup #ban-co {
    max-width: 310px !important;
}
#copy-url,
#url,
#copy-url-app,
#url-app,
#copy-url-red,
#url-red,
#copy-url-black,
#url-black {
    cursor: pointer;
}
.side-color {
    font-weight: bolder;
    font-size: 42px;
    text-align: center;
    line-height: 1.2em;
    display: block;
    cursor: default !important;
}
.side-color.red {
    color: red;
}
.side-color.black {
    color: #000;
}
body.setup #game-status {
    display: none !important;
}
#game-status {
    background-color: transparent !important;
    padding: 12px 24px;
    font-size: 17px;
    font-weight: bolder;
    color: beige;
    cursor: default !important;
    display: none;
}
#game-over {
    color: #2f4f4f;
    border-width: 1px;
    border-style: solid;
    border-color: #2f4f4f;
    padding: 12px 24px;
    background-color: #f5f5f5;
    font-weight: bolder;
    cursor: default !important;
}
#game-over:hover {
    color: #f5f5f5;
    border-color: #2f4f4f;
    background-color: #2f4f4f;
}
#room-code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif;
}
.table td,
.table th {
    vertical-align: middle !important;
}
.table td.room-code a {
    color: #f04124;
    font-family: "Noto Sans Mono", monospace;
}
.table td.room-code span {
    padding: 4px 7px 5px;
}
.table td.room-time {
    font-family: "Noto Sans Mono", monospace;
}
#room-code span.alert strong {
    font-family: "Noto Sans Mono", monospace;
}
ul#credit {
    color: #f04124 !important;
}
ul#credit li {
    color: #f04124 !important;
}
ul#credit li a {
    color: #f04124 !important;
    font-weight: bolder;
}
@media screen and (max-width: 380px) {
    #ban-co {
        width: calc(100% - 15px) !important;
    }
}
@media screen and (max-width: 991px) {
    #copy-url,
    #copy-url-red,
    #copy-url-black,
    #change-pass {
        width: 100% !important;
    }
    .btn.w-25 {
        width: 49% !important;
    }
    .btn.w-25.btn-success {
        width: 75% !important;
    }
    .h3,
    h3 {
        font-size: 1rem !important;
    }
    h2 {
        font-size: 1.2rem !important;
    }
    #ban-co {
        height: auto !important;
    }
}
@media (max-width: 1199.98px) {
    #game-status {
        display: inline-block;
    }
}
@media (min-width: 1200px) {
    #game-status {
        display: none;
    }
}
.pulse {
    position: relative;
    box-shadow: 0 0 0 0 rgba(33, 136, 56, 0.84);
    cursor: pointer;
    -webkit-animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-gold {
    position: relative;
    box-shadow: 0 0 0 0 rgba(255, 133, 27, 0.84);
    cursor: pointer;
    -webkit-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-red {
    position: relative;
    box-shadow: 0 0 0 0 rgba(240, 65, 36, 0.84);
    cursor: pointer;
    -webkit-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-light {
    position: relative;
    box-shadow: 0 0 0 0 rgba(238, 238, 238, 0.84);
    cursor: pointer;
    -webkit-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-dark {
    position: relative;
    box-shadow: 0 0 0 0 rgba(34, 34, 34, 0.84);
    cursor: pointer;
    -webkit-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse-gold 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse:hover,
.pulse-gold:hover,
.pulse-red:hover,
.pulse-light:hover,
.pulse-dark:hover {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
}
@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 17px rgba(33, 136, 56, 0);
    }
}
@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 17px rgba(33, 136, 56, 0);
    }
}
@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 17px rgba(33, 136, 56, 0);
    }
}
@keyframes pulse {
    to {
        box-shadow: 0 0 0 17px rgba(33, 136, 56, 0);
    }
}
@-webkit-keyframes pulse-gold {
    to {
        box-shadow: 0 0 0 17px rgba(255, 133, 27, 0);
    }
}
@-moz-keyframes pulse-gold {
    to {
        box-shadow: 0 0 0 17px rgba(255, 133, 27, 0);
    }
}
@-ms-keyframes pulse-gold {
    to {
        box-shadow: 0 0 0 17px rgba(255, 133, 27, 0);
    }
}
@keyframes pulse-gold {
    to {
        box-shadow: 0 0 0 17px rgba(255, 133, 27, 0);
    }
}
@-webkit-keyframes pulse-red {
    to {
        box-shadow: 0 0 0 17px rgba(240, 65, 36, 0);
    }
}
@-moz-keyframes pulse-red {
    to {
        box-shadow: 0 0 0 17px rgba(240, 65, 36, 0);
    }
}
@-ms-keyframes pulse-red {
    to {
        box-shadow: 0 0 0 17px rgba(240, 65, 36, 0);
    }
}
@keyframes pulse-red {
    to {
        box-shadow: 0 0 0 17px rgba(240, 65, 36, 0);
    }
}
@-webkit-keyframes pulse-light {
    to {
        box-shadow: 0 0 0 17px rgba(238, 238, 238, 0);
    }
}
@-moz-keyframes pulse-light {
    to {
        box-shadow: 0 0 0 17px rgba(238, 238, 238, 0);
    }
}
@-ms-keyframes pulse-light {
    to {
        box-shadow: 0 0 0 17px rgba(238, 238, 238, 0);
    }
}
@keyframes pulse-light {
    to {
        box-shadow: 0 0 0 17px rgba(238, 238, 238, 0);
    }
}
@-webkit-keyframes pulse-dark {
    to {
        box-shadow: 0 0 0 17px rgba(34, 34, 34, 0);
    }
}
@-moz-keyframes pulse-dark {
    to {
        box-shadow: 0 0 0 17px rgba(34, 34, 34, 0);
    }
}
@-ms-keyframes pulse-dark {
    to {
        box-shadow: 0 0 0 17px rgba(34, 34, 34, 0);
    }
}
@keyframes pulse-dark {
    to {
        box-shadow: 0 0 0 17px rgba(34, 34, 34, 0);
    }
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: #282f39 !important;
}
.dataTables_processing {
    color: #312e2b;
}
@keyframes fade {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.3);
        opacity: 0;
    }
}
@-webkit-keyframes fade {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.3);
        opacity: 0;
    }
}
@-moz-keyframes fade {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.3);
        opacity: 0;
    }
}
body.player .waitingIndicator .indicator,
body.dashboard .waitingIndicator .indicator {
    background-color: #f04124;
}
.waitingIndicator {
    position: relative;
    display: inline;
}
.waitingIndicator .indicator {
    background-color: #fff;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    display: inline-block;
    margin: 3px;
    opacity: 0;
}
.waitingIndicator .indicator:nth-child(1) {
    animation: fade 3s ease 0s infinite;
    -webkit-animation: fade 3s ease 0s infinite;
    -moz-animation: fade 3s ease 0s infinite;
}
.waitingIndicator .indicator:nth-child(2) {
    animation: fade 3s ease 250ms infinite;
    -webkit-animation: fade 3s ease 250ms infinite;
    -moz-animation: fade 3s ease 250ms infinite;
}
.waitingIndicator .indicator:nth-child(3) {
    animation: fade 3s ease 500ms infinite;
    -webkit-animation: fade 3s ease 500ms infinite;
    -moz-animation: fade 3s ease 500ms infinite;
}
.waitingIndicator .indicator:nth-child(4) {
    animation: fade 3s ease-in-out 1s infinite;
    -webkit-animation: fade 3s ease-in-out 1s infinite;
    -moz-animation: fade 3s ease-in-out 1s infinite;
}
.waitingIndicator .indicator:nth-child(5) {
    animation: fade 3s ease-in-out 2s infinite;
    -webkit-animation: fade 3s ease-in-out 2s infinite;
    -moz-animation: fade 3s ease-in-out 2s infinite;
}
#gozig {
    display: none !important;
}
.st-count,
.st-text {
    color: #fff !important;
}
.previewBtn {
    cursor: pointer;
}
.btn.text-light.bootbox-cancel {
    color: #eee !important;
}
#checkmateText {
    font-size: 10vw;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.84);
    display: none;
    color: #f04124;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Pacifico";
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: fadeInAnimation 2s ease-in forwards;
}
@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.compat {
    background-color: #f4f5f9;
}
.rhythms {
    width: 100%;
}
.rhythm {
    margin: 10px 0 30px;
    overflow: hidden;
    font-weight: bold;
}
.rhythm h1 {
    float: left;
    font-size: 1em;
}
.rhythm .percent {
    float: right;
}
.rhythm .percentage {
    height: 6px;
    overflow: hidden;
    clear: both;
    background: #dfe2e9;
}
.percentage-bar {
    float: left;
    height: 100%;
    width: 100%;
    background: #a3abbe;
    -webkit-transition: width 0.6s ease;
    -moz-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
.physical .percentage-bar {
    background: #ef7955;
}
.emotional .percentage-bar {
    background: #4fc281;
}
.intellectual .percentage-bar {
    background: #4b98dc;
}
.dates {
    text-align: center;
}
.date {
    display: inline-block;
    padding: 5px 3px;
    white-space: nowrap;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.date:hover {
    background: #dfe2e9;
}
.date select {
    padding: 4px;
    margin: 0 2px;
    width: 84px;
    font-size: 14px;
    box-shadow: 0 1px 1px 0 #a3abbe inset;
    color: #505b67;
}
.date select:hover,
.date select:focus {
    color: #4b98dc;
}
.separator {
    padding: 0 10px;
    color: #4b98dc;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1;
    position: relative;
    top: 5px;
}
@media only screen and (max-width: 750px) {
    .separator {
        display: block;
        top: 3px;
    }
}
.introjs-helperNumberLayer {
    font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif;
    font-size: 14px;
    text-shadow: none;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border: 2px solid #ecf0f1;
    border-radius: 50%;
    background: #e74c3c;
}
.introjs-helperLayer {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.84);
    border: none;
    border-radius: 2px;
}
.introjs-tooltip {
    letter-spacing: 0.1em;
    color: #f04124;
    font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.84);
}
.introjs-button {
    padding: 1em;
    text-shadow: none;
    font-weight: bold;
    color: #f04124;
    font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif;
    background: #ecf0f1;
    background-image: none;
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    -webkit-transition: background 0.3s, border 0.3s;
    -moz-transition: background 0.3s, border 0.3s;
    -ms-transition: background 0.3s, border 0.3s;
    -o-transition: background 0.3s, border 0.3s;
    transition: background 0.3s, border 0.3s;
}
.introjs-prevbutton {
    border-radius: 0.2em 0 0 0.2em;
}
.introjs-nextbutton {
    border-radius: 0 0.2em 0.2em 0;
}
.introjs-button:hover,
.introjs-button:focus {
    background: #f04124;
    color: #fff !important;
    box-shadow: none;
    border-color: #f04124;
    text-decoration: none;
    font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif;
}
.introjs-bullets ul li a {
    background-color: rgba(0, 117, 154, 0.42);
}
.introjs-bullets ul li a:hover {
    background-color: rgba(0, 117, 154, 0.84);
}
.introjs-bullets ul li a.active {
    background-color: #f04124;
}
.pace .pace-progress,
.pace .pace-activity {
    z-index: 1234567890;
}
.card-title a,
.card-title a:hover {
    color: #f04124;
}
.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    left: 10px;
    z-index: 42;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: rgba(240, 65, 36, 0.8) url(/img/cd-top-arrow.svg) no-repeat
        center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s,
        background-color 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s, background-color 0.3s 0s;
}
.cd-top.cd-top--show,
.cd-top.cd-top--fade-out,
.cd-top:hover {
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s,
        background-color 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s, background-color 0.3s 0s;
}
.cd-top.cd-top--show {
    visibility: visible;
    opacity: 1;
}
.cd-top.cd-top--fade-out {
    opacity: 0.5;
}
.cd-top:hover {
    background-color: #ff0028;
    opacity: 1;
}
@media only screen and (max-width: 767px) {
    .cd-top {
        bottom: 80px;
    }
}
@media only screen and (min-width: 768px) {
    .cd-top {
        left: 20px;
        bottom: 20px;
    }
}
@media only screen and (min-width: 1024px) {
    .cd-top {
        height: 60px;
        width: 60px;
        left: 30px;
        bottom: 30px;
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -khtml-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -khtml-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -khtml-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -khtml-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -khtml-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -khtml-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
} /*!
* xiangqiboard.js $version$
*
* Copyright 2013 Chris Oakman
* Copyright 2018 @lengyanyu258
* Released under the MIT license
* https://github.com/lengyanyu258/xiangqiboardjs/blob/master/LICENSE
*
* Date: $date$
*/
.clearfix-5f3b5 {
    clear: both;
}
.board-1ef78 {
    box-sizing: content-box;
    pointer-events: none !important;
    margin: auto;
}
.board-1ef78 .row-cb702:first-of-type .square-2b8ce .notation-8c7a2 {
    top: -21px !important;
    bottom: auto !important;
}
.board-1ef78 .row-cb702:last-of-type .square-2b8ce .notation-8c7a2 {
    bottom: -21px !important;
    top: auto !important;
}
.xiangqiboard-8ddcb .spare-pieces-top-e4b47 {
    margin-bottom: 21px !important;
}
.xiangqiboard-8ddcb .spare-pieces-bottom-29dac {
    margin-top: 21px !important;
}
.square-2b8ce {
    float: left;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none !important;
}
.square-2b8ce img {
    pointer-events: all !important;
}
.square-2b8ce:hover {
    z-index: 2;
}
.square-2b8ce:hover img {
    cursor: pointer;
}
.highlight1-e13fc,
.highlight2-e0a03 {
    box-shadow: inset 0 0 3px 3px #daa520;
}
.notation-8c7a2 {
    cursor: default;
    font-family: "Roboto", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC",
        sans-serif;
    font-size: 14px;
    position: absolute;
    color: #000;
}
.alpha-f4ef2 {
    bottom: 1px;
    right: 40%;
}
.numeric-fe76e {
    top: 40%;
    left: 1px;
}
.piece-1e8b9 {
    cursor: pointer;
}
th[role="columnheader"]:not(.no-sort) {
    cursor: pointer;
}
th[role="columnheader"]:not(.no-sort):after {
    content: "";
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #404040 transparent;
    visibility: hidden;
    opacity: 0;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
th[role="columnheader"]:not(.no-sort):hover:after {
    visibility: visible;
    opacity: 1;
}
th[aria-sort="ascending"]:not(.no-sort):after {
    border-bottom: none;
    border-width: 4px 4px 0;
}
th[aria-sort]:not(.no-sort):after {
    visibility: visible;
    opacity: 0.4;
}
table th.no-sort {
    cursor: default !important;
    pointer-events: none !important;
}
table th.no-sort::before,
table th.no-sort::after {
    display: none !important;
} /*# sourceMappingURL=index.css.map */

.puzzle-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    align-items: flex-start;
}
.puzzle-layout-board {
    flex: 1 1 520px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}
.puzzle-layout-panel {
    flex: 1 1 360px;
    min-width: 320px;
}
@media (max-width: 991.98px) {
    .puzzle-layout-panel,
    .puzzle-layout-board {
        width: 100%;
    }
}

.puzzle-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    align-items: flex-start;
}
.puzzle-layout-board {
    flex: 1 1 520px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}
.puzzle-layout-panel {
    flex: 1 1 360px;
    min-width: 320px;
}
@media (max-width: 991.98px) {
    .puzzle-layout-panel,
    .puzzle-layout-board {
        width: 100%;
    }
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:active ~ .custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before {
    background-color: #f04124 !important;
    border-color: #f04124 !important;
    box-shadow: rgba(240, 65, 36, 0.25) 0px 0px 0px 0.2rem;
}
.comment-action.liked {
    color: #f87171;
    cursor: default;
}
.comment-action.liked i {
    color: #f87171;
}
.comment-action:not(.liked):hover {
    color: #f87171;
    cursor: pointer;
}
.comment-action:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.fa-spinner {
    margin-left: 5px;
}
.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.highlight {
    background-color: #ffeb3b !important;
    opacity: 0.6;
}
html, body{
  background: url("/hinh/backgroundcotuong.png") center center / cover no-repeat fixed !important;
  background-color: #312e2b !important; /* fallback */
}

/* Các section có nền tối -> cho trong suốt để thấy ảnh nền */
.container-fluid.about,
.container-fluid.bmi,
.container-fluid.game,
.container-fluid.news,
.container-fluid.contact{
  background-color: transparent !important;
  color: beige;
}
:root {
  --brand-gray: #4a3f36;
  --brand-gray-rgb: 74,63,54;
}

header.site-header { 
  background-color: rgba(var(--brand-gray-rgb), .96) !important;
}
header.site-header a,
header.site-header ul.navbar-nav.old a,
header.site-header .dropdown-menu .dropdown-item:active,
header.site-header .dropdown-menu .dropdown-item.active {
  color: beige;
}
header.site-header a:not(.navbar-brand)::before,
header.site-header ul.navbar-nav.old a:not(.navbar-brand)::before {
  background-color: #ffdead; /* giữ line dưới chữ như cũ; muốn xám luôn thì đổi thành var(--brand-gray) */
}

/* Các điểm nhấn từng dùng đỏ chính */
.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:active ~ .custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before,
.introjs-progressbar,
.card-title a,
.card-title a:hover,
ul#credit, ul#credit li, ul#credit li a,
a.animate {
  color: var(--brand-gray) !important;
  border-color: var(--brand-gray) !important;
  background-color: var(--brand-gray) !important;
}

/* Nút “Đăng nhập/Đăng ký” giữ contrast đúng */
header.site-header a.register {
  background: beige !important; 
  color: var(--brand-gray) !important; 
  border-color: beige !important;
}
header.site-header a.login {
  background: var(--brand-gray) !important; 
  color: beige !important; 
  border-color: beige !important;
}

/* Viền focus/hover từng là đỏ nhạt */
.form-control:focus,
.page-link:focus,
.form-check-input:focus {
  border-color: #b5a8a0 !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-gray-rgb), 0.25) !important;
}