/* Hallmark · macrostructure: Classic MU portal · Hoài Niệm SS6 theme
 * paper: #000000 · accent: ember/gold · display: heavy uppercase sans · body: Tahoma/Arial
 */
* { box-sizing: border-box; }
html { background: #000; }
body {
    margin: 0;
    min-height: 100vh;
    color: #ead2a4;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0), #000 950px),
        url("hero-hoai-niem-ss6.png") center top / 1920px auto no-repeat,
        #000;
    padding-bottom: 54px;
}
a { color: inherit; }
.site {
    width: 1410px;
    max-width: calc(100% - 18px);
    min-height: calc(100vh - 54px);
    margin: 0 auto;
    background: transparent;
}
.source-header {
    width: 1000px;
    height: 165px;
    margin: 0 auto;
    position: relative;
}
.source-logo {
    width: 330px;
    height: 120px;
    position: absolute;
    left: 60px;
    top: 40px;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    background: url("muhoalong-source/images__logo.png") left top / contain no-repeat;
}
.btn:hover,
.feature-menu a:hover,
.table-actions a:hover { filter: brightness(1.16); }
.main {
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 250px minmax(0, 690px);
    gap: 20px;
    align-items: stretch;
    min-height: 720px;
}
.sidebar {
    padding-top: 80px;
}
.sidebar .install-card {
    margin-top: -80px;
}
.sidebar,
.panel,
.login-panel,
.news-panel {
    border: 1px solid #794719;
    background: rgba(13, 6, 4, .98);
}
.sidebar {
    border-color: #2a2d35;
    background: rgba(54, 60, 69, .96);
    align-self: start;
}
.sidebar h2,
.box-title {
    min-height: 42px;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #ffe2a0;
    font-size: 20px;
    font-weight: 900;
    background: linear-gradient(180deg, #64170c, #230805);
    border-bottom: 1px solid #8d5520;
    text-shadow: 0 2px 0 #210302;
}
.sidebar h2 {
    justify-content: center;
    min-height: 52px;
    color: #fff2d5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    background:
        url("muhoalong-source/images__subnav-title-camnang.png") center / cover no-repeat,
        linear-gradient(180deg, #343941, #272c34);
    border-color: rgba(255, 255, 255, .12);
}
.box-title.flat {
    background: transparent;
    border: 0;
    padding: 0;
}
.menu-block,
.menu-single,
.server-box {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.menu-block {
    padding: 0;
}
.menu-single {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 29px;
    color: #fff;
    text-decoration: none;
    background: rgba(54, 60, 69, .96);
    position: relative;
    transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}
.menu-single::before {
    content: "";
    width: 7px;
    height: 7px;
    background: url("muhoalong-source/images__subnav-icon.gif") center / contain no-repeat;
    position: absolute;
    left: 12px;
    color: #c9ced6;
    font-size: 14px;
}
.server-box {
    padding: 12px 14px;
}
.server-box h3 {
    margin: 0 0 8px;
    color: #ffc15b;
    font-size: 13px;
    text-transform: uppercase;
}
.menu-block summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 29px;
    color: #fff;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}
.menu-block summary::-webkit-details-marker { display: none; }
.menu-block summary::before {
    content: "+";
    width: 13px;
    height: 13px;
    position: absolute;
    left: 9px;
    top: 13px;
    display: grid;
    place-items: center;
    color: #111;
    background: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
.menu-block[open] summary::before {
    content: "▪";
    color: #dfe4ea;
    background: transparent;
    border-radius: 0;
    font-size: 15px;
}
.menu-block a,
.menu-block span {
    min-height: 32px;
    display: block;
    padding: 8px 10px 7px 36px;
    color: #fff;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(42, 47, 55, .94);
    position: relative;
    transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}
.menu-block a::before,
.menu-block span::before {
    content: "";
    width: 7px;
    height: 7px;
    top: 13px;
    background: url("muhoalong-source/images__subnav-icon.gif") center / contain no-repeat;
    position: absolute;
    left: 20px;
    color: #c9ced6;
    font-weight: 900;
}
.menu-block a:hover,
.menu-block summary:hover,
.menu-block a.active,
.menu-single.active,
.menu-single:hover {
    color: #ffd674;
    background: #303640;
    padding-left: 34px;
}
.menu-block.is-open > summary {
    background: #303640;
}
.menu-block span {
    color: #8f7c5e;
    cursor: default;
}
.menu-block span::before { color: #5f2b18; }
.server-box p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
}
.install-card {
    border: 1px solid #762100;
    border-bottom: 0;
    background: #160504;
}
.install-main {
    height: 108px;
    display: grid;
    place-items: center;
    color: #fff2d5;
    text-decoration: none;
    text-transform: uppercase;
    background: url("muhoalong-source/images__btn_caidatngay_normal.gif") center / 100% 100% no-repeat;
    text-shadow: 0 2px 3px #3b0301;
    transition: filter .18s ease, transform .18s ease;
}
.install-main strong {
    display: none;
}
.install-main span {
    display: none;
}
.install-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.install-actions a {
    min-height: 40px;
    display: grid;
    place-items: center;
    color: #fff;
    text-indent: -9999px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-right: 1px solid rgba(255, 255, 255, .08);
    background:
        url("muhoalong-source/images__bt-dkn.png") 0 0 / 250px 80px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent),
        #5a0804;
    transition: filter .18s ease, color .18s ease, background-color .18s ease;
}
.install-actions a:last-child { border-right: 0; }
.install-card a:hover {
    filter: brightness(1.16) saturate(1.1);
}
.install-main:hover {
    transform: translateY(-1px);
    background-image: url("muhoalong-source/images__btn_caidatngay_hover.gif");
}
.install-actions a:hover { background-position: 0 -40px; }
.install-actions a:nth-child(2) { background-position: -125px 0; }
.install-actions a:nth-child(2):hover { background-position: -125px -40px; }
.install-card a:active,
.btn:active,
.bottom-nav a:active {
    transform: translateY(1px);
}
.account-mini {
    min-height: 90px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
    color: #fff;
    border: 1px solid #262b32;
    border-top: 0;
    background:
        url("muhoalong-source/images__box-login.jpg") center / cover no-repeat,
        #252b33;
}
.account-mini.guest-login {
    display: block;
    min-height: 102px;
    padding: 12px 10px 9px;
}
.account-mini .avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #737985;
    background: #f1f1f1;
    font-weight: 900;
}
.account-mini p {
    margin: 0 0 4px;
}
.account-mini strong {
    color: #ffde55;
}
.account-mini a {
    color: #fff6cd;
    text-decoration: none;
}
.account-mini-links {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.account-mini-links a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.side-login-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 65px;
    gap: 10px;
    align-items: start;
}
.side-login-fields {
    display: grid;
    gap: 8px;
}
.side-login-fields input {
    width: 145px;
    height: 28px;
    padding: 0 7px;
    color: #111;
    border: 1px solid #c2c9cc;
    background: #dfe8eb;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}
.side-login-fields input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(58, 166, 255, .24), inset 0 1px 2px rgba(0, 0, 0, .16);
}
.side-login-fields a {
    color: #d9d0b4;
    font-size: 12px;
    text-decoration: underline;
}
.side-login-submit {
    width: 65px;
    height: 70px;
    padding: 0;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    border: 0;
    background: url("muhoalong-source/images__btn-dang-nhap.jpg") 0 0 / 65px 140px no-repeat;
    cursor: pointer;
}
.side-login-submit:hover {
    background-position: 0 -70px;
}
.side-login-submit:active {
    transform: translateY(1px);
}
.account-mini.guest-login .account-mini-links {
    margin-top: 8px;
    padding-top: 7px;
}
.server-box span { color: #d7bb88; }
.server-box strong { color: #ffd674; text-align: right; }
.sidebar-utility {
    display: grid;
    gap: 10px;
    margin: 10px 0;
}
.sidebar-utility a {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px 0 64px;
    color: #fff2d5;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #5a0707;
    background:
        linear-gradient(90deg, rgba(20, 0, 0, .2), rgba(20, 0, 0, .65)),
        url("muhoalong-source/images__button__hotro.png") left center / 52px auto no-repeat,
        #760d0d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 2px 2px #000;
}
.sidebar-utility a:hover {
    filter: brightness(1.12);
    text-decoration: none;
}
.sidebar-utility .trade {
    background-image:
        linear-gradient(90deg, rgba(20, 0, 0, .2), rgba(20, 0, 0, .65)),
        url("muhoalong-source/images__button__hotro_hover.png");
}
.sidebar-utility .maintain {
    background-image:
        linear-gradient(90deg, rgba(20, 0, 0, .2), rgba(20, 0, 0, .65)),
        url("muhoalong-source/images__button__thongtinmaychu.png");
}
.sidebar-utility .server-info {
    background-image:
        linear-gradient(90deg, rgba(20, 0, 0, .2), rgba(20, 0, 0, .65)),
        url("muhoalong-source/images__button__thongtinmaychu_h.png");
}
.event-banner {
    margin: 10px 0 0;
    overflow: hidden;
    background: #191c25;
}
.event-banner a {
    height: 362px;
    display: block;
    position: relative;
    color: #ffec52;
    text-decoration: none;
}
.event-banner img {
    width: 100%;
    height: 362px;
    display: block;
    object-fit: cover;
}
.event-banner strong {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    color: #fff22c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 2px #000, 0 0 8px #e00000;
}
.event-banner-pager {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 33px;
}
.event-banner-pager span {
    display: grid;
    place-items: center;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, .18);
    background: #232934;
    font-size: 17px;
    font-weight: 800;
}
.event-banner-pager span:first-child {
    background: #e42026;
}
.content { min-width: 0; }
.content {
    background:
        url("muhoalong-source/images__loop-content.png") left top repeat,
        rgba(25, 26, 37, .92);
    border-left: 0;
    border-right: 0;
}
.stack { display: grid; gap: 14px; }
.panel { padding-bottom: 16px; }
.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
}
.panel-head span {
    color: #ffc15b;
    font-weight: 800;
    text-transform: uppercase;
}
.panel-head h1,
.panel-head h2 {
    margin: 5px 0 0;
    color: #ffe2a0;
    font-size: 30px;
    line-height: 1.15;
}
.panel-head h2 { font-size: 24px; }
.home-panel {
    min-height: 260px;
    padding-bottom: 0;
    background:
        linear-gradient(90deg, rgba(6, 3, 2, .9), rgba(6, 3, 2, .35), rgba(6, 3, 2, .95)),
        url("muhoalong-source/images__slide__slide_2.jpg") center / cover no-repeat;
}
.portal-slider {
    padding: 0;
    overflow: hidden;
}
.slide-show {
    height: 260px;
    position: relative;
    border-bottom: 1px solid #794719;
    background: #070302;
}
.slide-show img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: .82;
}
.slide-show::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 3, 2, .9), rgba(6, 3, 2, .2) 48%, rgba(6, 3, 2, .86));
}
.slide-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 1;
}
.slide-caption h2 {
    margin: 0 0 8px;
    color: #ffe2a0;
    font-size: 25px;
    text-transform: uppercase;
    text-shadow: 0 3px 4px #000;
}
.slide-caption p {
    margin: 0;
    color: #f5ddb2;
    font-weight: 700;
    text-shadow: 0 2px 3px #000;
}
.slider-pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    background: #090302;
}
.slider-pager span {
    width: 24px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #ffd674;
    border: 1px solid #704117;
    background: linear-gradient(180deg, #2b0c06, #100403);
    font-weight: 900;
}
.slider-pager span:first-child {
    color: #fff7df;
    border-color: #c28638;
    background: linear-gradient(180deg, #d14719, #7c1408);
}
.home-copy {
    max-width: 520px;
    padding: 28px;
}
.home-copy-panel {
    max-width: none;
    padding: 18px;
}
.home-copy h1 {
    margin: 0 0 8px;
    color: #ffe2a0;
    font-size: 40px;
    text-transform: uppercase;
    text-shadow: 0 3px 4px #000;
}
.home-copy p {
    margin: 0 0 18px;
    color: #f5ddb2;
}
.news-board {
    min-height: 670px;
    border: 1px solid #3b3d4a;
    background:
        linear-gradient(90deg, rgba(24, 24, 36, .96), rgba(24, 24, 36, .88)),
        url("muhoalong-source/images__top-content.jpg") right top / auto no-repeat,
        url("muhoalong-source/images__slide__slide_5.jpg") center / cover no-repeat;
}
.static-server-head {
    width: 665px;
    max-width: 100%;
    min-height: 85px;
    margin: 0 0 20px;
    padding: 17px 24px 10px;
    background:
        url("muhoalong-source/images__top-content.jpg") right top no-repeat,
        rgba(42, 44, 57, .86);
    border: 1px solid rgba(255, 255, 255, .08);
}
.static-server-head h2 {
    margin: 0 0 4px;
    color: #ffdba4;
    font-size: 26px;
    line-height: 30px;
}
.static-server-head p {
    margin: 0;
    color: #cbd1dc;
    font-size: 16px;
    font-weight: 800;
}
.static-server-head a {
    color: #cbd1dc;
    text-decoration: none;
}
.news-server {
    min-height: 105px;
    padding: 18px 22px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), transparent),
        rgba(34, 35, 48, .88);
}
.news-server h1 {
    margin: 0 0 6px;
    color: #ffdca5;
    font-size: 26px;
    line-height: 1.15;
}
.news-server p {
    margin: 0;
    color: #ccd2dc;
    font-size: 16px;
    font-weight: 800;
}
.news-server span {
    color: #fff;
}
.news-title {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 22px 22px 10px;
}
.news-title span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #e02b2b;
    font-weight: 900;
}
.news-title h2 {
    margin: 0;
    color: #ff3333;
    font-size: 24px;
    text-transform: uppercase;
}
.news-list-mu {
    padding: 0 22px 24px;
}
.news-list-mu a {
    min-height: 25px;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto 42px 46px;
    align-items: center;
    gap: 4px;
    color: #ffd35f;
    text-decoration: none;
    border-bottom: 1px dotted rgba(64, 129, 163, .55);
}
.news-list-mu a:hover strong {
    color: #ff3b3b;
    text-decoration: underline;
}
.news-dot {
    width: 6px;
    height: 6px;
    background: #cbd1d9;
}
.news-list-mu strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 800;
}
.news-list-mu em {
    color: #c2c6cf;
    font-style: italic;
}
.news-list-mu img {
    max-width: 34px;
}
.news-list-mu time {
    color: #ffe2a0;
    text-align: right;
}
.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.event-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.event-cards a {
    min-height: 112px;
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #794719;
    background: #0d0604;
}
.event-cards img {
    width: 100%;
    height: 112px;
    display: block;
    object-fit: cover;
    opacity: .72;
}
.event-cards span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    color: #ffe2a0;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 2px 3px #000;
}
.rank-tabs-ui {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 14px;
}
.rank-tabs-ui a {
    min-height: 34px;
    display: grid;
    place-items: center;
    color: #ffe2a0;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    border: 1px solid #8d5520;
    background: linear-gradient(180deg, #401009, #120604);
}
.rank-tabs-ui a.active {
    color: #fff7df;
    border-color: #d99843;
    background: linear-gradient(180deg, #d14719, #7c1408);
}
.static-page .notice,
.guide-content {
    margin: 14px;
    padding: 14px;
    border: 1px solid #704117;
    background: rgba(5, 3, 2, .86);
}
.feature-notice {
    min-height: 170px;
    background:
        linear-gradient(90deg, rgba(10, 10, 13, .94), rgba(7, 7, 8, .96)),
        url("muhoalong-source/images__top-content.jpg") right top / auto no-repeat;
    margin: 14px;
    padding: 26px 28px;
}
.feature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.download-table {
    margin-top: 18px;
    border: 1px solid #30313b;
    background: rgba(25, 26, 37, .9);
}
.download-table p {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #30313b;
    color: #e5dfcc;
}
.download-table p:last-child {
    border-bottom: 0;
}
.download-table strong {
    color: #ff7a00;
}
.mu-download-page {
    min-height: 670px;
    padding: 26px 25px 34px;
    color: #fff4c9;
    background:
        url("muhoalong-source/images__top-content.jpg") right top no-repeat,
        url("muhoalong-source/images__logo.png") center 470px / 260px auto no-repeat;
}
.mu-download-page .mu-page-title {
    margin-bottom: 8px;
}
.download-intro {
    margin: 0 0 18px 35px;
    color: #d7dce5;
    font-size: 14px;
    font-weight: 800;
}
.download-hero {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    margin: 14px 0 18px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(48, 55, 64, .62);
}
.download-hero img {
    width: 230px;
    height: 150px;
    object-fit: cover;
    border: 1px solid #2a2d35;
}
.download-hero h3,
.download-guide h3 {
    margin: 0 0 8px;
    color: #ff3434;
    font-size: 22px;
    text-transform: uppercase;
}
.download-hero p {
    margin: 0 0 16px;
    color: #fff4c9;
    font-weight: 700;
}
.download-main-btn {
    width: 170px;
    min-height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    border: 1px solid #e26d00;
    background:
        url("muhoalong-source/images__button__btstyle01_bg.gif") center / cover repeat-x,
        linear-gradient(180deg, #ffb93d, #c21c0d);
    text-shadow: 0 2px 2px #5a0804;
}
.download-main-btn:hover {
    filter: brightness(1.14);
}
.download-links {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.download-links a {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 135px;
    align-items: center;
    min-height: 54px;
    padding: 0 14px;
    color: #fff4c9;
    text-decoration: none;
    border: 1px solid #30313b;
    background: rgba(25, 28, 38, .84);
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.download-links a:hover {
    border-color: #8d5520;
    background: rgba(69, 31, 22, .82);
    transform: translateX(2px);
}
.download-links strong {
    color: #ff7a00;
    font-size: 16px;
    text-transform: uppercase;
}
.download-links span {
    color: #e4e7ee;
    font-weight: 700;
}
.download-links em {
    color: #ffd674;
    font-style: normal;
    text-align: right;
}
.download-guide {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #30313b;
    background: rgba(25, 28, 38, .72);
}
.download-guide ol {
    margin: 0;
    padding-left: 22px;
}
.download-guide li {
    margin: 7px 0;
    color: #fff4c9;
    font-weight: 700;
}
.static-page .notice h3,
.guide-content strong { color: #ffd674; }
.static-page .notice h3 {
    margin: 0 0 8px;
    font-size: 18px;
}
.static-page .notice p,
.guide-content p {
    margin: 0 0 12px;
    color: #ead2a4;
}
.static-page .notice.locked { border-color: #5f2b18; }
.feature-page {
    padding-bottom: 0;
    background:
        url("muhoalong-source/images__loop-content.png") left top repeat,
        rgba(24, 25, 35, .92);
    border-color: #252839;
}
.feature-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 620px;
}
.feature-side {
    background: rgba(48, 51, 62, .96);
    border-right: 1px solid rgba(255, 255, 255, .08);
}
.feature-side h3 {
    min-height: 42px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 13px 0 29px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 34%),
        #cf1718;
    font-size: 15px;
    position: relative;
}
.feature-side h3::before {
    content: "−";
    width: 13px;
    height: 13px;
    position: absolute;
    left: 8px;
    display: grid;
    place-items: center;
    color: #cf1718;
    background: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}
.feature-side a {
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 36px;
    color: #d5d9e2;
    text-decoration: none;
    position: relative;
}
.feature-side a::before {
    content: "▪";
    position: absolute;
    left: 20px;
    color: #c9ced6;
}
.feature-side a.active,
.feature-side a:hover {
    color: #ff2828;
    font-weight: 900;
}
.feature-body {
    padding: 20px 26px 28px;
    color: #e8e2d2;
}
.feature-body h1 {
    margin: 0 0 18px;
    color: #ff3333;
    font-size: 25px;
    text-transform: uppercase;
}
.feature-body figure,
.single-feature-image {
    width: min(400px, 100%);
    margin: 0 auto 24px;
    text-align: center;
}
.feature-notice .single-feature-image {
    width: min(420px, 100%);
}
.feature-body img,
.single-feature-image img {
    width: 100%;
    display: block;
    border: 1px solid #252839;
}
.feature-notice .single-feature-image img {
    max-height: 210px;
    object-fit: cover;
}
.feature-body figcaption,
.single-feature-image figcaption {
    margin-top: 7px;
    color: #f6db9f;
    font-size: 13px;
}
.guide-content.inline {
    width: min(520px, 100%);
    margin: 0 auto;
    background: rgba(19, 20, 29, .78);
    border-color: #252839;
}
.feature-menu,
.stats,
.char-summary,
.action-grid {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}
.feature-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 14px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.char-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-menu a,
.table-actions a {
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0 12px;
    color: #ffe2a0;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    border: 1px solid #8d5520;
    background: linear-gradient(180deg, #401009, #120604);
}
.stats div,
.char-summary div,
.action-box {
    border: 1px solid #704117;
    background: rgba(5, 3, 2, .86);
    padding: 12px;
}
.stats span,
.char-summary span {
    display: block;
    margin-bottom: 5px;
    color: #ffc15b;
    text-transform: uppercase;
}
.stats strong {
    color: #ffe2a0;
    font-size: 22px;
}
.account-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 8px;
}
.account-title span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #d62b23;
    border-radius: 50%;
    font-weight: 900;
}
.account-title h1 {
    margin: 0;
    color: #ff3333;
    font-size: 24px;
    text-transform: uppercase;
}
.account-warnings {
    padding: 0 24px 10px;
    color: #fff6cd;
}
.account-warnings p {
    margin: 0 0 8px;
    color: #ff7a00;
    font-size: 16px;
    font-weight: 900;
}
.account-warnings strong {
    color: #ffd800;
}
.account-warnings ul {
    margin: 0;
    padding-left: 18px;
}
.account-warnings li {
    margin: 9px 0;
}
.account-table-wrap {
    padding: 0 24px 24px;
}
.account-table {
    border: 1px solid #22252c;
}
.account-table th,
.account-table td {
    border: 1px solid #22252c;
    background: #393a3f;
}
.account-table th {
    width: 28%;
    color: #f1e6c8;
    background: #34353a;
}
.account-table td {
    color: #f1e6c8;
}
.account-table td:nth-child(2) {
    color: #ff7a00;
    font-weight: 900;
}
.account-table a {
    color: #ffb13b;
    text-decoration: none;
    font-weight: 800;
}
.char-summary strong {
    color: #ffe2a0;
    font-size: 18px;
}
.form {
    display: grid;
    gap: 12px;
    padding: 16px;
}
.action-form { max-width: 560px; }
.form.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-all { grid-column: 1 / -1; }
label {
    display: grid;
    gap: 7px;
    color: #ffe2a0;
    font-weight: 800;
}
input,
select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    color: #fff2d0;
    font: inherit;
    border: 1px solid #8d5520;
    background: #060302;
    outline: none;
}
input:focus,
select:focus {
    border-color: #e0a13b;
    box-shadow: 0 0 0 2px rgba(224, 161, 59, .18);
}
.btn {
    min-height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0 16px;
    color: #ffe2a0;
    font: inherit;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #9c6128;
    background: linear-gradient(180deg, #4d120a, #170604);
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease, color .18s ease, border-color .18s ease;
}
.btn.primary {
    color: #fff7df;
    border-color: #d99843;
    background:
        url("muhoalong-source/images__button__btstyle01_bg.gif") center / cover repeat-x,
        linear-gradient(180deg, #d64017, #8a1107);
}
.btn:hover {
    color: #fff;
    border-color: #ffbf58;
}
.form-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 16px;
}
.form-links a,
.form-links span {
    color: #ffd674;
    text-decoration: none;
    font-weight: 800;
}
.auth-page {
    min-height: 720px;
    padding: 0 24px 40px;
    color: #fff4c9;
    background:
        url("muhoalong-source/images__top-content.jpg") right top no-repeat,
        url("muhoalong-source/images__logo.png") center 455px / 260px auto no-repeat;
}
.mu-form-panel {
    padding-top: 24px;
}
.mu-page-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 8px;
}
.mu-page-title span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #e02c2c;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}
.mu-page-title h1 {
    margin: 0;
    color: #ff3434;
    font-size: 25px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .2px;
}
.mu-form-note {
    margin: 0 0 44px;
    color: #fff6cf;
    font-style: italic;
    font-weight: 700;
}
.mu-form-note strong {
    color: #ffe0a4;
}
.mu-auth-form {
    display: grid;
    gap: 15px;
    width: 100%;
}
.login-auth-form {
    max-width: 520px;
    margin: 0 auto;
}
.register-auth-form {
    max-width: 620px;
    margin: 0 0 0 12px;
}
.mu-auth-form label,
.captcha-row,
.form-submit-row {
    display: grid;
    grid-template-columns: 130px 202px minmax(0, 1fr);
    gap: 10px 10px;
    align-items: center;
    color: #efe6c9;
    font-weight: 800;
}
.register-auth-form label,
.register-auth-form .captcha-row {
    grid-template-columns: 130px 202px minmax(0, 1fr);
}
.mu-auth-form label > span,
.captcha-row > span,
.form-submit-row > span {
    color: #efe6c9;
    text-align: right;
}
.register-auth-form label > span,
.register-auth-form .captcha-row > span {
    text-align: left;
}
.mu-auth-form input,
.mu-auth-form select {
    height: 27px;
    padding: 0 7px;
    color: #111;
    border: 1px solid #8c6a63;
    background: #dfe8e9;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
}
.mu-auth-form select {
    padding-right: 3px;
}
.mu-auth-form input:focus,
.mu-auth-form select:focus {
    border-color: #f3d196;
    box-shadow: 0 0 0 2px rgba(234, 170, 67, .18), inset 0 1px 2px rgba(0, 0, 0, .16);
}
.mu-auth-form em {
    color: #fff6cf;
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
}
.captcha-row a,
.auth-help a {
    color: #ffd86c;
    text-decoration: none;
}
.captcha-row a:hover,
.auth-help a:hover {
    color: #fff;
    text-decoration: underline;
}
.captcha-code {
    width: 52px;
    min-height: 27px;
    display: inline-grid;
    place-items: center;
    color: #00c20f;
    background: rgba(0, 0, 0, .28);
    font: 900 22px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 1px 0 #003a07;
}
.register-auth-form .captcha-code {
    color: #33e9ff;
}
.mini-check {
    width: fit-content;
    min-height: 21px;
    padding: 0 12px;
    color: #53585d;
    border: 1px solid #aeb4b8;
    border-radius: 11px;
    background: linear-gradient(#f4f5f5, #c8cccf);
    font: 11px Tahoma, Arial, sans-serif;
    cursor: pointer;
}
.mini-check:hover {
    filter: brightness(1.08);
}
.mu-gold-btn {
    width: fit-content;
    min-width: 102px;
    min-height: 31px;
    padding: 0 18px;
    color: #7d3a00;
    border: 1px solid #e3a532;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffd66a 0%, #f5a91d 48%, #da8610 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 #2b1300;
    font: 800 12px Tahoma, Arial, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}
.mu-gold-btn:hover {
    color: #4a1f00;
    filter: brightness(1.08);
}
.mu-gold-btn:active {
    transform: translateY(1px);
}
.auth-help {
    display: grid;
    gap: 8px;
    max-width: 520px;
    margin: 16px auto 0;
}
.sms-register {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    align-items: stretch;
    min-height: 53px;
    margin: 12px 0 20px;
    color: #fff4c9;
    background: rgba(49, 56, 65, .82);
}
.sms-register strong {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #fff;
    background: #a60f17;
}
.sms-register p {
    display: flex;
    align-items: center;
    margin: 0;
    color: #fff4c9;
    font-weight: 800;
}
.sms-register b {
    color: #ff7a00;
    font-size: 16px;
}
.green-tip {
    margin: -4px 0 5px 142px;
    color: #00b113;
    font-weight: 900;
    line-height: 1.6;
}
.register-warning {
    margin: 3px 0 0;
    color: #fff4c9;
    font-style: italic;
    font-weight: 700;
    line-height: 1.6;
}
.register-warning strong {
    color: #ff2626;
}
.register-submit-row {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}
.login-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.server-list {
    list-style: none;
    margin: 0;
    padding: 14px;
}
.server-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.table-wrap {
    overflow-x: auto;
    padding: 0 14px 14px;
}
.table-actions { display: flex; gap: 6px; }
.table-actions a {
    min-height: 28px;
    font-size: 11px;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5, 3, 2, .9);
}
th,
td {
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(112, 65, 23, .72);
}
th {
    color: #ffc15b;
    background: #2a0c06;
    text-transform: uppercase;
}
td { color: #ead2a4; }
td strong { color: #ffe2a0; }
.pill {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    padding: 0 12px;
    color: #ffd674;
    border: 1px solid #8d5520;
    background: #3b1009;
    font-weight: 900;
}
.empty {
    margin: 0;
    padding: 0 16px 16px;
    color: #d7bb88;
}
.note {
    margin: 0;
    padding: 12px 14px;
    color: #ead2a4;
    border: 1px solid #704117;
    background: rgba(5, 3, 2, .86);
}
.action-box.wide { grid-column: 1 / -1; }
.action-box h3 {
    margin: 0 0 6px;
    color: #ffd674;
    font-size: 17px;
}
.action-box p {
    min-height: 40px;
    margin: 0 0 12px;
    color: #d7bb88;
}
.point-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.alert {
    margin: 0 0 12px;
    padding: 11px 14px;
    font-weight: 800;
    border: 1px solid;
}
.alert.success {
    color: #e7ffe9;
    background: rgba(29, 92, 42, .92);
    border-color: #58b469;
}
.alert.error {
    color: #ffe1d8;
    background: rgba(107, 17, 10, .94);
    border-color: #d15d41;
}
.footer {
    width: 690px;
    max-width: 100%;
    margin: 18px auto 62px;
    padding: 0 0 8px;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    color: #7f7f83;
    border: 0;
    background:
        url("muhoalong-source/images__line-footer.png") center top repeat-x,
        transparent;
    font-size: 12px;
    text-align: center;
}
.age-box {
    width: 170px;
    min-height: 91px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 2px 6px;
    align-items: center;
    padding: 7px 8px 6px;
    color: #fff;
    border: 2px solid #646b72;
    border-radius: 10px;
    background: linear-gradient(180deg, #14181c, #07090b);
    box-shadow: inset 0 0 0 1px #0b0d0f, 0 0 0 1px rgba(255, 255, 255, .15);
}
.age-box strong {
    display: block;
    color: #f4f4f4;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -2px;
}
.age-box span {
    color: #f4f4f4;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.05;
    text-align: left;
}
.age-box em {
    grid-column: 1 / -1;
    color: #e5e5e5;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}
.footer-info {
    padding-top: 18px;
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 22px;
}
.footer-links a {
    min-height: 0;
    display: inline;
    color: #777a80;
    text-decoration: underline;
    border: 0;
    background: transparent;
    font-weight: 400;
}
.footer-links a + a::before {
    content: " - ";
    color: #777a80;
    text-decoration: none;
    display: inline-block;
    padding: 0 4px;
}
.footer-info p {
    margin: 7px 0 0;
    color: #777a80;
}
.footer-info p:last-child {
    margin-top: 26px;
    color: #6d6f75;
}
.footer-info a {
    color: #777a80;
    text-decoration: underline;
}
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: 50px;
    display: flex;
    justify-content: center;
    background:
        url("muhoalong-source/images__bg-footer.png") center top repeat-x,
        url("muhoalong-source/images__menu-footer.png") center / cover repeat-x,
        rgba(7, 13, 22, .96);
    border-top: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
}
.quick-top {
    position: fixed;
    right: calc(50% - 475px);
    bottom: 435px;
    z-index: 39;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    background: #c82227;
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: 12px;
    line-height: 1;
}
.quick-top:hover {
    background: #e42d33;
    text-decoration: none;
}
.bottom-nav a {
    min-width: 110px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #e7edf4;
    text-decoration: none;
    border-left: 1px solid rgba(255, 255, 255, .08);
    border-right: 1px solid rgba(0, 0, 0, .35);
    font-size: 16px;
    text-shadow: 0 2px 2px #000;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bottom-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 2px 0 #e00000;
}
.bottom-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 2px 0 #e00000;
}
.bottom-nav .bottom-red {
    min-width: 96px;
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 900;
    background: #e00000;
}
.bottom-nav .bottom-red:hover {
    background: #ff1515;
}
.bottom-nav .bottom-home {
    min-width: 56px;
    color: #fff;
    font-size: 35px;
    line-height: 1;
    background: rgba(255, 255, 255, .06);
}
@media (max-width: 980px) {
    .site { max-width: calc(100% - 16px); }
    .main {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .feature-layout {
        grid-template-columns: 1fr;
    }
    .bottom-nav {
        overflow-x: auto;
        justify-content: flex-start;
    }
    .bottom-nav a {
        min-width: 112px;
        flex: 0 0 auto;
    }
    .stats,
    .feature-menu,
    .char-summary,
    .event-cards,
    .action-grid,
    .rank-tabs-ui,
    .footer,
    .point-grid,
    .form.two,
    .form.three {
        grid-template-columns: 1fr;
    }
}