@media (max-width: 1600px) {

    .rewardContentDetailLayout {
        position: relative;
        width: 800px;
        min-width: 800px;
    }

    .rewardDetailNpcMainLayout {
        padding: 50px 50px;
        padding-top: 110px;
    }
}

@media (max-width: 1430px) {
    .contentMain.reward {
        gap: 20px;
    }

    .rewardContentDetailLayout {
        position: relative;
        width: 700px;
        min-width: 700px;
    }

    .rewardItemPopup.first {
        top: 0px;
        padding: 0px 30px;
        padding-right: 90px;
    }

    .rewardDetailNpcMainLayout {
        padding: 50px 30px;
        padding-top: 110px;
    }
}

/* ≤ 1400px */
@media (max-width: 1399.98px) {
    .rewardContentDetailLayout {
        position: relative;
        width: 600px;
        min-width: 600px;
        padding: 0px 50px;
        padding: 0px 20px;
        padding-left: 20px;
    }


    .btnReward-popup.lg {
        width: 140px;
        height: 140px;
    }

    .btnReward-popup {
        width: 120px;
        height: 120px;
    }

    .rewardItemPopup.third {
        bottom: 80px;
        padding: 0px 0px;
        padding-right: 10px;
    }

    .rewardItemPopup.first {
        top: 0px;
        padding: 0px 0px;
        padding-right: 50px;
    }

    .rewardItemPopup.secondary {
        top: 45%;
        transform: translateY(-50%);
        padding: 0px 15px;
    }
}

/* ≤ 1200px */
@media (max-width: 1199.98px) {
    .aboutContentMainLayout {
        position: relative;
        width: 1200px;
        height: 760px;
        padding: 130px 105px 130px 145px;
    }

    .aboutContentLeftLayout {
        justify-content: start;
    }

    .aboutContentRightLayout {
        position: relative;
        width: 460px;
        min-width: 460px;
    }

    .aboutContentNpc {
        width: 100px;
        min-width: 100px;
    }

    .aboutContentTagLayout {
        position: absolute;
        z-index: 1;
        width: 175px;
        height: 428px;
        padding: 61px 13px 45px 15px;
    }

    .aboutContentTagLayout h5 {
        font-size: 20px;
    }

    .abountContentTagItem {
        width: 100px;
        min-width: 100px;
    }

    .aboutContentTagLayout #detail {
        overflow: auto;
        height: 150px;
    }
}

/* ≤ 992px */
@media (max-width: 991.98px) {
    .aboutContentMainLayout {
        display: none;
    }

    .aboutMbContentMainLayout {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        width: 545px;
        height: 1105px;
        padding: 145px 0px 120px 0px;

        background: url("../images/about/frameMb.png");
        background-position: top center;
        background-size: cover;
    }

    .aboutHeaderMainLayout.about {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

    .aboutMainLayout {
        justify-content: start;
    }

    /* Slide  */
    .aboutMBContentSlideTrack {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.35s ease;
        cursor: grab;
        user-select: none;

        color: #314158;
        font-size: 14px;
        line-height: 18px;
        font-family: "LINESeedSansTH", sans-serif;
    }

    .aboutMBContentSlideTrack.is-dragging {
        transition: none;
        cursor: grabbing;
    }

    .aboutMBContentSlide {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        padding: 10px 50px 10px 40px;

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

    .aboutMBContentSlideDotLayout {
        position: relative;
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .aboutMBContentSlideDot {
        width: 10px;
        height: 10px;
        border-radius: 50px;
        background: #0d25594b;
        cursor: pointer;
    }

    .aboutMBContentSlideDot.active {
        background: #0d2559;
    }

    .aboutContentTagLayout {
        position: relative;
    }

    .aboutContentTagLayout.normal {
        background: url(../images/about/normalMainLayout.png);
        background-position: top center;
        background-size: cover;
        left: 0px;
        top: 0px;
        transform: rotate(0deg);
    }

    .aboutContentTagLayout.premiun {
        background: url(../images/about/premiumMainLayout.png);
        background-position: top center;
        background-size: cover;
        right: 0px;
        top: 0px;
        transform: rotate(0deg);
    }

    .aboutContentTagLayout.normal.active {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0px 0px 0px #13d7fa00);
    }

    .aboutContentTagLayout.premiun.active {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0px 0px 0px #13d7fa00);
    }

    .aboutContentTagLayout.normal:not(.active):hover {
        transform: rotate(0deg) scale(1) translateY(0px);
    }

    .aboutContentTagLayout.premiun:not(.active):hover {
        transform: rotate(0deg) scale(1) translateY(0px);
    }

    .aboutContentTagLayout.active .aboutContentTagObject {
        animation: pulseGlow 1.6s ease-in-out infinite;
    }

    .aboutContentTagLayout {
        width: 220px;
        height: 490px;
        padding: 80px 20px 51px 20px;
    }

    .aboutContentTagLayout #detail {
        overflow: auto;
        height: fit-content;
    }

    .howtoContentMainLayout {
        justify-content: start;
    }

    .howtoContentHr {
        display: none;
    }

    .contentMain.reward {
        gap: 40px;
        flex-direction: column;
        padding: 20px;
        overflow: auto;

    }

    .rewardSlideMainLayout {
        position: relative;
        z-index: 2;
        bottom: 0px;
        left: 0%;
        transform: translateX(0%);
        width: 100%;
    }


    .rewardNpcTOpic_object {
        display: none;
    }

    .rewardContentDetailLayout {
        position: relative;
        width: 100%;
        min-width: fit-content;
        padding: 0px 20px;
    }

    .rewardDetailNpcMainLayout {
        width: 100%;
        border-radius: 20px;
    }
}

/* ≤ 768px */
@media (max-width: 767.98px) {}

/* ≤ 576px */
@media (max-width: 575.98px) {
    .aboutMbContentMainLayout {
        width: 450px;
        height: 980px;
    }

    .aboutMBContentSlide {
        padding: 10px 25px 10px 15px;
    }

    .aboutMainLayout {
        padding: 20px 15px;
        padding-top: 70px;
    }

    .howtoMainLayout {
        padding: 20px 15px;
        padding-top: 70px;
    }

    .rewardNpcTopic {
        width: 100%;
        font-size: 25px;
        line-height: 25px;
    }

    .rewardSlideTopic {
        width: 130px;
        flex-direction: column;
        text-align: center;
        gap: 0px;
    }

    .rewardSlideTopicMainLayout {
        width: 130px;
    }

    .rewardSlideTopic img {
        width: 50px;
    }

    .rewardSlideTopic {
        font-size: 17px;
        line-height: 19px;
    }

    .rewardItemPopup.first {
        top: 0px;
        padding: 0px 0px;
        padding-right: 0px;
    }

    .rewardItemPopup.secondary {
        top: 33%;
        transform: translateY(-50%);
        padding: 0px 0px;
    }

    .rewardItemPopup.third {
        bottom: 135px;
        padding: 0px 0px;
        padding-right: 0px;
    }

    .btnReward-popup.lg {
        width: 100px;
        height: 100px;
    }

    .btnReward-popup {
        width: 100px;
        height: 100px;
    }

    .rewardContentDetailLayout {
        padding: 0px;
    }

    .aboutHeaderMainLayout {
        padding-top: 50px;
    }

    .aboutHeaderMainLayout.about {
        position: relative;
        top: 0px;
        left: 0%;
        transform: translateX(0%);
    }

}

@media (max-width: 440px) {
    .aboutMbContentMainLayout {
        width: 380px;
        height: 900px;
        padding: 120px 0px 100px 0px;
    }

    .aboutMBContentSlide {
        padding: 10px 37px 10px 25px;
        justify-content: start;
        text-align: center;
        overflow: auto;
        height: 100%;
    }

    .aboutMBContentSlide div {
        flex-direction: column;
    }

    .aboutContentHr {
        width: 100%;
        margin: 20px 0px;
    }

    .aboutContentNpc {
        width: 80px;
        min-width: 80px;
    }

    .rewardDetailNpcMainLayout {
        height: fit-content;
        padding: 50px 20px;
        padding-top: 95px;
    }

    .rewardItemPopup.first {
        position: relative;
        top: 0px;
        justify-content: center;
    }

    .rewardItemPopup.secondary {
        position: relative;
        top: 0%;
        transform: translateY(0%);
        justify-content: center;
    }

    .rewardItemPopup.third {
        position: relative;
        bottom: 0px;
        justify-content: center;
    }

    .aboutHeaderMainLayout {
        padding-top: 0px;
    }
}

@media (max-width: 410px) {
    .rewardSlideTopic img {
        display: none;
    }

    .rewardSlideTopic {
        width: 100px;
        text-align: center;
    }

    .rewardSlideTopicMainLayout {
        width: 100px;
    }
}

@media (max-width: 330px) {
    .aboutMbContentMainLayout {
        width: 280px;
        height: 980px;
        padding: 95px 0px 93px 0px;
    }

    .aboutMBContentSlide {
        padding: 20px 15px 10px 15px;
        justify-content: start;
        text-align: center;
        overflow: auto;
        height: 100%;
    }
}