/* ==== Banner ====  */
.banner_mainLayout {
    position: relative;
    width: 100%;
    height: 100dvh;

    background: url("../images/banner/Banner_object.png");
    background-position: top;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner_character {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.banner_objectCrystal {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.banner_logoFooter {
    position: absolute;
    z-index: 5;
    bottom: 0px;

    width: 950px;
}

.banner_footerText {
    position: absolute;
    bottom: 23px;
    text-align: center;
    width: 650px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* left: 130px; */
    left: 50%;
    transform: translateX(-50%) !important;
}

.banner_footer {
    position: absolute;
    z-index: 4;
    bottom: 0px;
    left: 0;

    width: 100%;
    height: 300px;
    background: linear-gradient(0deg, #100400 0%, #1b060000 100%);
}

/* ==== Content ====  */
.content_mainLayout {
    width: 100%;
    max-width: 1400px;
    min-height: 100dvh;
    height: 100%;
    margin: 0 auto;
    padding: 100px 20px 20px;

}

.content_logo {
    width: 500px;
}

.content_hr {
    width: 380px;
}

.conent_title {
    width: 500px;
    min-width: 500px;

    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content_rewardLayout {
    width: 400px;
    /* height: 182px;
    padding: 15px;

    background: url("../images/btn_02.png");
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; */
}


.content_rewardLayout01 {
    width: 350px;
}

.content_rewardCoustumeLayout {
    width: 400px;
    height: 265px;
    padding: 25px 20px;


    background: url("../images/btn_04.png");
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.content_rewardCoustumeImg {
    width: 200px;
    border-radius: 10px;
    overflow: hidden;
}

.content_rewardCoustumeLayout h6 {
    color: #ffe8b0;
    font-size: 20px;
}

.content_rewardCoustumeLayout02 {
    width: 745px;
    height: 300px;
    padding: 20px 20px;


    background: url("../images/btn_05.png");
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

/* == Teams ==  */
.teams_layout {
    width: 100%;
    max-width: 400px;
    /* height: 175px; */
    /* padding: 20px; */

    /* background: url("../images/btn_03.png");
    background-position: center;
    background-size: cover; */

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

    box-shadow: 1px 1px 5px #757575;
    transition: all .5s;
}

.teams_layout img {
    width: 100%;
}

.teams_layout:hover {
    box-shadow: 1px 1px 15px 5px #1b7bb3;
}

.teams_imgHead:hover {
    filter: drop-shadow(1px 1px 15px #1b7bb3);
}

.teams_layoutHead {
    width: 100%;
    max-width: 1300px;
    margin-bottom: 20px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.teams_imgHead {
    width: 150px;
}

.teams_imgHead img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* tournament  */
.tour_imgLocation {
    width: 1080px;
    height: 650px;
    border: 2px solid #ebc38c;
    border-right: 1px solid transparent;
}

.tour_contentMainLayout {
    position: relative;
    width: 425px;
    min-width: 425px;
    height: 650px;
    padding: 10px 10px;

    border: 2px solid #ebc38c;
    background: linear-gradient(180deg, #ebc38c 0%, #a49076 100%);
}

.tour_contentLayout {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: url("../images/object/tour_bg.png");
    background-position: center;
    background-size: cover;

    color: #000;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}

/* == event schedule ==  */
.schedule_content {
    /* width: 100%; */
    min-height: 600px;
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    background: #25292e;
    border: 1px solid #fff799;
    box-shadow: 2px 2px 10px 5px #000;
}

.schedule_content h4 {
    color: #676a6d;
    text-shadow: 2px 2px 3px #000;
    font-weight: 900;
    text-transform: uppercase;
}

.schedule_tableMainLayout {
    width: 100%;
    max-width: 700px;
    overflow: auto;
}

/* == community ==  */
.community_logo {
    width: 200px;
    transition: all .5s;
    filter: drop-shadow(1px 1px 3px #fff);
}

.community_logo:hover {
    filter: drop-shadow(1px 1px 8px #ffbb00ab);
}

.content_activitiesImg {
    width: 100%;
}

.community_contentMainLayout {
    width: 100%;
    margin: 20px 0px;
    padding: 20px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.community_logoCompany {
    width: 140px;
    min-width: 140px;
}

.community_contentLayout {
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.community_contentSocialLayout {
    width: 700px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.community_contenthr {
    width: 2px;
    min-width: 2px;
    height: 250px;
    margin: 0px 50px;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(255, 227, 38, 0) 0%, rgba(255, 227, 38, 1) 35%, rgba(255, 227, 38, 1) 65%, rgba(255, 227, 38, 0) 100%);
}

.community_webLayout {
    width: 200px;
    height: 230px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;

    background: url("../images/community/Community_layout_web.png");
    background-position: center;
    background-size: cover;

    filter: drop-shadow(1px 1px 3px #fff);

    font-size: 18px;
    line-height: 20px;
    color: #000;

    transition: all .5s;
}

.community_webLayout:hover {
    filter: drop-shadow(1px 1px 8px #008cfff1);
}

.comunity_webLogo {
    width: 100px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.community_fbLayout {
    width: 200px;
    height: 230px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;

    background: url("../images/community/Community_layout_fb.png");
    background-position: center;
    background-size: cover;

    filter: drop-shadow(1px 1px 3px #fff);

    font-size: 18px;
    line-height: 20px;
    color: #fff;

    transition: all .5s;
}

.community_fbLayout:hover {
    filter: drop-shadow(1px 1px 8px #001afff1);
}

.comunity_fbLogo {
    width: 100px;
    height: 60px;
    font-size: 45px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.community_youtubeLayout {
    width: 200px;
    height: 230px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;

    background: url("../images/community/Community_layout_youtube.png");
    background-position: center;
    background-size: cover;

    filter: drop-shadow(1px 1px 3px #fff);

    font-size: 18px;
    line-height: 20px;
    color: #fff;

    transition: all .5s;
}

.community_youtubeLayout:hover {
    filter: drop-shadow(1px 1px 8px #ff0022f1);
}

.comunity_youtubeLogo {
    width: 100px;
    height: 60px;
    font-size: 45px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.community_youtubeLayout span,
.community_fbLayout span,
.community_fbLayout span {
    width: 130px;
}

.community_bibiLayout {
    width: 200px;
    height: 230px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;

    background: url("../images/community/Community_layout_bibi.png");
    background-position: center;
    background-size: cover;

    filter: drop-shadow(1px 1px 3px #fff);

    font-size: 18px;
    line-height: 20px;
    color: #000;

    transition: all .5s;
}

.community_bibiLayout:hover {
    filter: drop-shadow(1px 1px 8px #82c3fff1);
}

.community_bibiLogo {
    width: 130px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Footer ====  */
.footer_mainLayout {
    width: 100%;
    height: 60px;
    padding: 10px;
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer_img {
    width: auto;
    height: 50px;
}

/* Bracket  */
.bracket_layoutImg {
    width: 100%;
}

.scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* ให้ scroll ได้ทุกทิศทาง */
    display: flex;
    justify-content: center;
    /* กึ่งกลางแนวนอน */
    /* align-items: start; */
    /* กึ่งกลางแนวตั้ง */
    background-color: #000;
    padding: 2rem;
    box-sizing: border-box;
}

/* รูปใน modal */
.bracket-full {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    display: block;
}

/* ป้องกัน modal บีบภาพ */
.modal-dialog,
.modal-content,
.modal-body {
    height: 100%;
}


.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.content_mainLayoutSection {
    /* min-height: 100dvh; */
    min-height: 550px;
    width: 100%;
    scroll-margin-top: 150px;
    margin-bottom: 100px;
    margin-top: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    justify-content: flex-start;
}


/* ===== Media ====  */
.media_contentMainLayut {
    width: 100%;
    /* max-width: 1080px; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.media_btnVideo {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: #00000073;
    /* opacity: .5; */
    transition: all .5s;
    border: 1px solid #fff79959;
}

.media_btnVideo:hover {
    background: transparent;
    border: 1px solid #ffdf99;
}

.media_contentlayout {
    position: relative;
    z-index: 9;
    width: 500px;
    height: 300px;

    /* border: 1px solid #fff799; */
}

.media_imgCover {
    width: 100%;
    height: 100%;
}

.media_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: #fff;
    font-size: 60px;
}

/* ===== Live Stream ====  */
.liveStream_mainLayoutContent {
    width: 100%;
    max-width: 800px;
    min-height: 500px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.liveStream_layoutImg {
    width: 150px;
    height: 95px;
    padding: 20px;

    background: url("../images/btn_03.png");
    background-position: center;
    background-size: cover;

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

    box-shadow: 1px 1px 5px #757575;
    transition: all .5s;
}

.liveStream_layoutImg img {
    width: 100px;
    object-fit: contain;
}

.liveStream_btn {
    width: 200px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px #000;

    display: flex;
    align-items: center;
    gap: 5px;
    transition: all .5s;
}

.liveStream_btn:hover {
    text-shadow: 0px 0px 2px #fff;
    color: #ffa162;
}

#Community,
#LiveStream {
    justify-content: center;
    /* margin-top: 200px; */
}

/* ====== player ====== */
.player_mainLayout {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding-top: 250px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.morning_star {
    background: url("https://img.gnjoy.in.th/2025/13/ragnarok_stars2025/player/morning_star/main_bg.png");
    background-position: top center;
    background-size: cover;
}

.alpha {
    background: url("../images/player/alpha/main_bg.png");
    background-position: top center;
    background-size: cover;
}

.babyshark {
    background: url("https://img.gnjoy.in.th/2025/13/ragnarok_stars2025/player/babyshark/main_bg.png");
    background-position: top center;
    background-size: cover;
}

.enthusiasm_gallant {
    background: url("https://img.gnjoy.in.th/2025/13/ragnarok_stars2025/player/enthusiasm_gallant/main_bg.png");
    background-position: top center;
    background-size: cover;
}

.meltdown_butter {
    /* background: url("https://img.gnjoy.in.th/2025/13/ragnarok_stars2025/player/meltdown_butter/main_bg.png"); */
    background: url("../images/player/meltdown_butter/main_bg.png");
    background-position: top center;
    background-size: cover;
}

.relentless {
    background: url("https://img.gnjoy.in.th/2025/13/ragnarok_stars2025/player/relentless/main_bg.png");
    background-position: top center;
    background-size: cover;
}

.player_teamBanner {
    position: relative;
    width: 100%;
    max-width: 2000px;
    height: 1780px;
    margin-bottom: 150px;
    /* padding-bottom: 100px; */

    display: flex;
    align-items: start;
    justify-content: center;
}

.player_teamMain {
    position: absolute;
    /* top: 50%;
    transform: translateY(40%); */
    bottom: 0px;
    /* padding: 50px; */

    width: 100%;
    max-width: 1190px;
    min-height: 600px;

    background: #000;
    border: 1px solid #ffe326;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-between; */
    justify-content: center;
}

.player_teamSloganLayout {
    width: 100%;
    padding: 50px;
    padding-bottom: 0px;
    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.player_teamLogo {
    width: 350px;
}

.player_teamLogoCompany {
    width: 240px;
}

.playver_teamhr {
    width: 2px;
    height: 250px;
    margin: 0px 100px;
    border-radius: 50%;

    background: linear-gradient(0deg, rgba(255, 227, 38, 0) 0%, rgba(255, 227, 38, 1) 35%, rgba(255, 227, 38, 1) 65%, rgba(255, 227, 38, 0) 100%);
}

.player_teamTitle {
    width: 1235px;
    height: 125px;
    padding: 10px;
    background: url("../images/player/object_title.png");
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    color: #000;
    font-family: "GoboldLowplus", sans-serif;
    font-size: 45px;
    font-weight: 800;
    letter-spacing: 1px;
}

.player_teamFooter {
    width: 100%;
    min-height: 100px;
    padding: 10px 25px;

    background: linear-gradient(to right,
            #662203a6 0%,
            #3d1f0fba 20%,
            #000000 50%,
            #3d1f0fba 80%,
            #662203a6 100%);
    box-shadow: inset 0px 0px 10px 2px #000;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;


    font-family: "DBHelvethaicaMonX", sans-serif;
    color: #fff;
    font-size: 30px;
    line-height: 30px;

}

.player_memberMainLayout {
    width: 100%;
    max-width: 1680px;
    min-height: 900px;
    padding: 50px;

    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    gap: 70px;
}

.player_memberLayout {
    position: relative;
    width: 400px;
    height: 650px;
    padding: 3px 3px;

    /* background: #fff; */
    display: flex;
    align-items: end;
    justify-content: center;
}

.player_memberImg {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.player_memberMainFooter {
    position: relative;
    z-index: 5;
    width: 100%;
    color: #fff;
    background: #000;
}

.player_memberFooter {
    width: 100%;
    height: 105px;
    padding: 10px 50px;

    background: linear-gradient(to right,
            #662203a6 0%,
            #3d1f0fba 20%,
            #000000 50%,
            #3d1f0fba 80%,
            #662203a6 100%);
    box-shadow: inset 0px 0px 10px 2px #000;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-family: "DBHelvethaicaMonX", sans-serif;
    color: #fff;
    font-size: 25px;
    line-height: 25px;
}

.player_memberTitleLayout {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 135px;
    padding: 20px;

    background: url("../images/player/object_title02.png");
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;

    font-family: "GoboldLowplus", sans-serif;
    font-size: 45px;
    line-height: 45px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #000;
    /* text-transform: uppercase; */
}

.player_memberIcon {
    width: 55px;
    filter: drop-shadow(3px 3px 2px #000);
    padding-bottom: 10px;
}