/*!
 * Layout: page chrome, header, footer, fixed overlays.
 */

.anchor {
    width: 180px;
    position: fixed;
    right: -180px;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.5s;
}

.anchor.open {
    right: 0;
}

.anchor.open .i-txt {
    transform: rotate(180deg);
}

.anchor .btn-download-dk {
    margin-left: 0;
}

.anchor .btn-download-dk .btn-download {
    width: 180px;
    height: 63px;
    background: url(../../img/btn-download.jpg);
    background-size: 100% 100%;
}

.anchor .btn-download-dk .btn-download:hover {
    background: url(../../img/btn-download-hover.jpg);
    background-size: 100% 100%;
}

.link-group {
    width: 180px;
    height: 178px;
    background: url(../../img/bg-link-nav-right.png) no-repeat;
}

.link-group a {
    width: 50%;
    height: 50%;
    float: left;
    text-align: center;
    padding-top: 58px;
    color: #fff;
}

.link-group a:hover {
    background: url(../../home.html) no-repeat;
    background-size: contain;
}

.link-group a:nth-child(3),
.link-group a:nth-child(4) {
    padding-top: 50px;
}

.box-giftcode {
    width: 180px;
    height: 217px;
    background: url(../../home.html);
    margin-top: 4px;
}

.box-giftcode .tit-bgc {
    line-height: 1.2;
    margin-left: 62px;
    padding-top: 17px;
}

.go-top {
    cursor: pointer;
    width: 49px;
    height: 129px;
    background: url(../../img/bg-go-top.png);
    margin: 5px auto 0;
}

.i-control {
    cursor: pointer;
    position: absolute;
    top: 63px;
    left: -27px;
    height: 90px;
    width: 27px;
    background: url(../../img/bg-control.png) 50%/100% 100% no-repeat;
}

.i-control .i-txt {
    margin-top: 19px;
    margin-left: 3px;
    height: 54px;
    width: 21px;
    background: url(../../img/icon-close-nav-right.png) 50%/100% 100% no-repeat;
    display: block;
    transform: rotate(0deg);
}

.i-control.i-control-open .i-txt {
    transform: rotate(180deg);
}

body {
    background: #c6e6f5 url(../../img/background/main-bg-4.png) top center no-repeat;
    background-size: auto;
}

body.has-video-bg {
    background: transparent !important;
}

.no-content {
    padding: 10.525rem 1rem;
    text-align: center;
    font-size: 1.25rem;
    color: #343a40;
}

.download-btn,
.game-payment {
    display: none;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

footer,
.custom-main-footer {
    margin-top: 0;
    min-height: 5rem;
    background-color: #1a1a1a;
    color: #888;
    padding: 20px 0;
    border-top: none;
}

footer .container,
.custom-main-footer .container {
    position: relative;
    height: 100%;
}

@font-face {
    font-family: 'Koulen';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/Koulen-Regular.woff2') format('woff2');
    unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}

/* Public fantasy navigation */
#homepage-header {
    background: transparent;
    padding: 12px 16px 0;
    position: relative;
    z-index: 20;
}

#homepage-header .homepage-nav-shell {
    align-items: flex-start;
    display: flex;
    max-width: 1280px;
}

#homepage-header .navbar-brand {
    align-items: center;
    display: flex;
    flex: 0 0 220px;
    height: 112px;
    justify-content: center;
    margin: 0 2px 0 0;
    padding: 0;
    position: relative;
    width: auto;
    z-index: 2;
}

#homepage-header .navbar-brand img {
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55));
    max-height: 92px;
    max-width: 210px;
    object-fit: contain;
}

#homepage-header .homepage-menu-collapse {
    flex: 1 1 auto;
    justify-content: center;
}

#homepage-header .homepage-menu-frame {
    aspect-ratio: 1453 / 224;
    background: url('../../img/menu/menu-bar.png') center / contain no-repeat;
    filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.42));
    max-width: 960px;
    position: relative;
    width: 100%;
}

#homepage-header .homepage-menu-list {
    align-items: stretch;
    bottom: 40%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    left: 18.5%;
    margin: 0;
    position: absolute;
    right: 18.5%;
    top: 28.5%;
    transform: translateY(9px);
}

#homepage-header .homepage-menu-list .nav-item {
    align-items: stretch;
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    position: relative;
}

#homepage-header .homepage-menu-list .nav-item + .nav-item::before {
    background: linear-gradient(to bottom, transparent, rgba(223, 193, 119, 0.7), transparent);
    content: "";
    height: 54%;
    left: 0;
    position: absolute;
    top: 23%;
    width: 1px;
}

#homepage-header .homepage-menu-list .nav-link {
    align-items: center;
    color: #f8e9bd;
    display: flex;
    font-size: 20px;
    font-weight: 700;
    justify-content: center;
    line-height: 1.1;
    overflow: hidden;
    padding: 0 9px;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.85);
    text-transform: uppercase;
    transition: color 150ms ease, text-shadow 150ms ease;
    white-space: nowrap;
    width: 100%;
}

#homepage-header .homepage-menu-list .nav-link:hover,
#homepage-header .homepage-menu-list .nav-link:focus-visible,
#homepage-header .homepage-menu-list .nav-link.active {
    color: #fff8d8;
    text-decoration: none;
    text-shadow: 0 0 7px rgba(255, 220, 124, 0.95), 0 2px 3px rgba(0, 0, 0, 0.85);
}

#homepage-header .homepage-menu-list .nav-link:focus-visible {
    outline: 2px solid #f3d982;
    outline-offset: -3px;
}

#homepage-header .homepage-menu-list .nav-link.km-text {
    font-family: 'Koulen', 'Bayon', 'Noto Sans Khmer', serif;
    font-weight: 400;
}

#homepage-header .homepage-menu-toggle {
    background: rgba(5, 36, 55, 0.94);
    border: 1px solid #c8aa61;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    height: 42px;
    margin-top: 25px;
    padding: 9px 10px;
    width: 46px;
}

#homepage-header .homepage-menu-toggle__line {
    background: #f2dda1;
    display: block;
    height: 2px;
    margin: 4px 0;
    width: 24px;
}

/* The frame floats below the header, over the background artwork, and lines up
   with the main column rather than with the page. Every one of these layouts
   is a narrow side column beside a wide one, so centring the frame on the page
   would leave it sitting visibly left of the panel it crowns.

   Left to itself the frame lands at 1071, because the logo takes a fixed 220px
   at the head of the same flex row and the frame then centres in what is left.
   The offsets below close the gap to the main column: 1123 on the inner pages,
   1177 on the homepage, where the banner is narrower than a content panel.

   Centring on the page instead is not available — at 948px wide the frame
   would reach back to 486 and cover the logo, which ends at 560.

   A browser without :has() keeps the inner-page value everywhere; that is 54px
   off on the homepage rather than anything broken. */
@media (min-width: 992px) {
    #homepage-header .homepage-menu-collapse {
        transform: translate(3.25rem, 20rem);
    }

    body:has(.banner) #homepage-header .homepage-menu-collapse {
        transform: translate(6.5rem, 20rem);
    }
}

@media (max-width: 991.98px) {
    #homepage-header {
        padding: 8px 14px 0;
    }

    #homepage-header .homepage-nav-shell {
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #homepage-header .navbar-brand {
        flex-basis: 180px;
        height: 92px;
        justify-content: flex-start;
    }

    #homepage-header .navbar-brand img {
        max-height: 78px;
        max-width: 175px;
    }

    #homepage-header .homepage-menu-collapse {
        flex-basis: 100%;
        transform: none;
        width: 100%;
    }

    #homepage-header .homepage-menu-frame {
        aspect-ratio: auto;
        background: linear-gradient(180deg, rgba(7, 54, 78, 0.98), rgba(2, 28, 45, 0.98));
        border: 1px solid #b99a54;
        border-radius: 4px;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
        margin: 6px 0 12px;
        max-width: none;
        padding: 7px;
    }

    #homepage-header .homepage-menu-list {
        display: block;
        position: static;
        transform: none;
    }

    #homepage-header .homepage-menu-list .nav-item {
        display: block;
    }

    #homepage-header .homepage-menu-list .nav-item + .nav-item::before {
        background: rgba(212, 182, 106, 0.24);
        height: 1px;
        left: 12px;
        right: 12px;
        top: 0;
        width: auto;
    }

    #homepage-header .homepage-menu-list .nav-link {
        font-size: 13px;
        justify-content: flex-start;
        min-height: 42px;
        padding: 10px 14px;
        text-align: left;
    }

}

.custom-main-footer .footer-content {
    gap: 22px;
}

.custom-main-footer .footer-logos {
    border-right: 1px solid #333;
    gap: 15px;
    flex: 0 0 auto;
    min-width: 0;
}

.custom-main-footer .footer-logo-img {
    display: block;
    flex: 0 0 auto;
    max-width: 360px;
    max-height: 160px;
    object-fit: contain;
}

.custom-main-footer .footer-logo-separator {
    width: 1px;
    height: 38px;
    background: #444;
    display: block;
    flex: 0 0 auto;
}

footer .footer-content .text-muted,
.custom-main-footer .footer-content .text-muted {
    color: #888 !important;
    font-size: 0.75rem;
}

.custom-main-footer .footer-links a {
    transition: color 0.2s;
}

.custom-main-footer .footer-links a:hover {
    color: #fff !important;
}

.custom-main-footer .lang-selector:hover .lang-selector-btn {
    border-color: #888 !important;
    color: #ccc !important;
}

.custom-main-footer .lang-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 5px;
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    min-width: 120px;
    padding: 5px 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.custom-main-footer .lang-selector:hover .lang-dropdown {
    display: block;
}

.custom-main-footer .lang-dropdown a {
    color: #888 !important;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.2s;
}

.custom-main-footer .lang-dropdown a:hover {
    color: #fff !important;
    background-color: #2a2a2a;
}

@media (max-width: 767px) {
    .custom-main-footer .footer-content {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 18px;
    }

    .custom-main-footer .footer-logos {
        border-right: 0;
        padding-right: 0 !important;
        padding-left: 0 !important;
        flex-wrap: wrap;
    }

    .custom-main-footer .footer-text {
        margin-left: 0 !important;
    }

    .custom-main-footer .footer-right-info {
        padding-right: 0 !important;
    }
}

#homepage-header {
    margin-bottom: 1rem;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f7f5f0;
    border-left: 1px solid #e1dcd4;
}

::-webkit-scrollbar-thumb {
    background: #d4ccbd;
    border-radius: 6px;
    border: 3px solid #f7f5f0;
}

::-webkit-scrollbar-thumb:hover {
    background: #a39587;
}

#back-to-top {
    position: fixed;
    bottom: 50px;
    right: 40px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
}

#back-to-top img {
    width: 60px;
    drop-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    transform: translateY(-5px);
}


/* Ember overlay. Sparks on black, screen-blended so only the sparks land.
   Height and brightness arrive as custom properties from the admin. */
.ember-layer {
    height: var(--ember-height, 100vh);
    left: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 900;
}

/* Thin the sparks towards the top so they read as rising. */
.ember-layer--full {
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.12) 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0, 0, 0, 0.45) 78%, rgba(0, 0, 0, 0.12) 100%);
}

/* Crop rather than stretch; stretching smears the sparks. */
.ember-layer__video {
    display: block;
    filter: brightness(var(--ember-intensity, 1));
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Fallback; the script also removes the layer outright. */
@media (prefers-reduced-motion: reduce) {
    .ember-layer {
        display: none;
    }
}

/* Music toggle. Rings are the button's pseudo-elements; the icon's ::after
   is taken by the mute slash below. */
.music-trigger {
    align-items: center;
    background: radial-gradient(circle at 34% 28%, #cdbd80 0%, #a99a61 58%, #8c7d47 100%);
    border: 3px solid #0c0e1d;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.35);
    cursor: pointer;
    display: flex;
    height: 60px;
    justify-content: center;
    position: fixed;
    right: 60px;
    top: 60px;
    transition: box-shadow 300ms ease, filter 300ms ease;
    width: 60px;
    z-index: 1000;
}

.music-trigger::before,
.music-trigger::after {
    animation: musicRipple 2.6s ease-out infinite;
    border: 1px solid rgba(206, 171, 96, 0.85);
    border-radius: 50%;
    content: "";
    inset: -3px;
    pointer-events: none;
    position: absolute;
}

/* Half a cycle apart so one ring is always leaving. */
.music-trigger::after {
    animation-delay: 1.3s;
}

@keyframes musicRipple {
    0%   { opacity: 0.75; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.75); }
}

.music-trigger i {
    color: #fff;
    font-size: 26px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: color 300ms ease;
}

@keyframes spinRound {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.music-trigger.playing i {
    animation: spinRound 4s linear infinite;
    display: inline-block;
}

/* Resting state: browsers block autoplay, so most visitors land here. */
.music-trigger.muted {
    background: radial-gradient(circle at 34% 28%, #4a4d57 0%, #33363f 60%, #23252c 100%);
    border-color: #0c0e1d;
}

.music-trigger.muted::before,
.music-trigger.muted::after {
    animation: none;
    opacity: 0;
}

.music-trigger.muted i {
    color: #9aa0ab;
    position: relative;
}

/* Slash indicating mute */
.music-trigger.muted i::after {
    background: #db4848;
    content: '';
    height: 2px;
    left: -5px;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: rotate(45deg);
}

.music-trigger:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 18px rgba(206, 171, 96, 0.85);
    filter: brightness(1.06);
}

.music-trigger:focus-visible {
    outline: 2px solid #f3d982;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .music-trigger::before,
    .music-trigger::after,
    .music-trigger.playing i {
        animation: none;
    }
}