/* CSS Variables for easy customization */
:root {
    /* Primary Colors */
    --primary-gradient-start: #ee8033;
    --primary-gradient-end: #fccf1b;
    --primary-border: #f4a428;
    --primary-shadow: #fccb1d;
    --primary-text: #facc15;
    --primary-bg: #321c00;

    /* Secondary Colors */
    --secondary-gradient-start: #b32def;
    --secondary-gradient-end: #8414c4;
    --secondary-border: #cf00fe;
    --secondary-shadow: #e058ff;
    --secondary-bg: #25011c;

    /* Common Values */
    --border-radius: 9px;
    --border-width: 3px;
    --shadow-blur: 10.3px;
}

.dg.ac {

    z-index: 99999999 !important
}

html {
    min-height: 100vh;
}


.modal{
    font-family: Kanit;
}


/* Language Dropdown Styles */
.language-dropdown {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.language-dropdown .btn {
    background: #198754;
    border: 2px solid rgb(31 157 98);
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3);
}

.language-dropdown .btn:hover {
    background: rgb(8 122 61);
    border-color: rgb(27 152 85);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3);
}

.language-dropdown .btn:focus {
    background: rgb(8 122 61);
    border-color: rgb(27 152 85);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3);
}

.language-dropdown .dropdown-menu {
    background: rgb(6 49 24);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 8px 0;
    /* box-shadow: 0 8px 25px rgb(146 25 19); */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    min-width: 160px;
}

.language-dropdown .dropdown-item {
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.language-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.language-dropdown .dropdown-item:active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.language-dropdown .flag-icon {
    margin-right: 8px;
    width: 20px;
    height: 15px;
    border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .language-dropdown {
        top: 15px;
        right: 15px;
    }

    .language-dropdown .btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .language-dropdown .dropdown-menu {
        min-width: 140px;
    }

    .language-dropdown .dropdown-item {
        padding: 8px 15px;
        font-size: 13px;
    }
}



.bg-game-main {
    position: fixed;
    width: 100%;
    height: 100%;
    /* background-color: red; */
    background-size: cover;
    background-position: center;
}

.bg-game-stage-1 {

background-image: url(../public/main/bg-lab.png);



background-position: center top;
}

.bg-game-stage-2 {
    /* background-image: url(../../../christmas-tree/10/public/main/background-02.png); */
}

.bg-game-stage-3 {
    /* background-image: url(../public/main/background-03.png); */
}

.modal-content {
    background-color: #ff000000;
    border: 0;
}

.logo-icon {
    width: 17rem;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.nav-button-text {
    /* width: 8.188rem; */
    position: relative;
    font-weight: 600;
    display: inline-block;
    /* text-shadow: 0 0 4px rgb(74 131 51); */
    text-align: center;
    /* width: 100%; */
    /* color: #7F0032; */
}

.sidebar-nav-button {
    text-decoration: none;
    align-self: stretch;
    box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--primary-border);
    box-sizing: border-box;
    min-height: 4.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: inherit;
    background-image: url(../../../christmas-tree/10/public/main/pattern-btn02.png);
    /* border: 3px solid #077a3c !important; */
    box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset;
    border-radius: 9px;
    /* border: 3px solid #FEBDCF !important; */
    /* background: linear-gradient(180deg, #FEAFC4 0%, #FE8BA8 100%); */
    /* box-shadow: 0 0 10.3px 0 #FF698F inset, 0 0 17.5px 0 #FFC8D5 inset; */
    /* color: #7F0032; */
    background-color: #101229;
    border: 3px solid #4f5464;
    color: #a2cdda;
}

.sidebar-nav-button--active {
    /* background: linear-gradient(180deg, var(--primary-gradient-start), var(--primary-gradient-end)); */
    text-align: center;
    background-image: url(../../../christmas-tree/10/public/main/pattern-btn01.png);
    /* border: 3px solid #4dca0a !important; */
    /* box-shadow: 0px 0px 15px var(--shadow-blur) #ffffff33 inset; */
    /* border-radius: 9px; */
    /* border: 3px solid #FF698E !important; */
    /* background: linear-gradient(180deg, #FE7496 0%, #FF2E65 100%); */
    /* box-shadow: 0 0 10.3px 0 #FF698F inset, 0 0 17.5px 0 #D7003A inset; */
    color: #ffffff;
    box-shadow: 0 0 16.6px #49b366 inset, 0 0 16.6px #49b366;
    border-radius: 8px;
    background: linear-gradient(180deg, #91ff66, #3d7b4c 69.71%, #37a961);
    border: 3px solid #bafdb8 !important;
}

/* Navigation Components */
.nav-button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.nav-button-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Daily Mission Components */
.daily-mission-reward-button--available {
    /* Inherits from .daily-mission-reward-button */
    cursor: pointer;
}

/* Checkpoint Reward Components */
.reward-checkmark-icon {
    width: 2rem;
    height: 1.5rem;
    object-fit: cover;
}

.mission-progress {
    position: relative;
    font-size: 0.875rem;
    text-align: center;
}

.mission-name {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.progress-status {
    position: relative;
    font-weight: 600;
}

.mission-action-details2,
.progress-text {
    align-items: center;
    justify-content: center;
}

.progress-text {
    align-self: stretch;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #fff;
    display: flex;
    flex-direction: row;
    padding: 0 0.5rem;
    text-align: center;
    color: #e53227;
}

.mission-action-details2 {
    text-decoration: none;
    box-shadow: 0 0 var(--shadow-blur) var(--secondary-shadow) inset;
    border-radius: var(--border-radius);
    background-color: var(--secondary-bg);
    border: var(--border-width) solid var(--secondary-border);
    box-sizing: border-box;
    height: 6.625rem;
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    cursor: pointer;
    color: inherit;
}

.mission-action-details2,
.mission-action-details5,
.sidebar-content1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.sidebar-content1 {
    flex: 1;
    overflow-y: auto;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    /* height: 290px; */
    /* background-color: red; */
}

.sidebar-logout-button {
    text-decoration: none;
    box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset;
    border-radius: var(--border-radius);
    background-color: var(--primary-bg);
    border: var(--border-width) solid var(--primary-border);
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    color: inherit;
    background-image: url(../../../christmas-tree/10/public/main/pattern-btn02.png);
    display: flex;
    border: 3px solid #077a3c !important;
    box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset;
    /* border-radius: 9px; */
    /* border: 3px solid #FEBDCF !important; */
    /* background: linear-gradient(180deg, #FEAFC4 0%, #FE8BA8 100%); */
    /* box-shadow: 0 0 10.3px 0 #FF698F inset, 0 0 17.5px 0 #FFC8D5 inset; */
    /* color: #7F0032; */
    color: #ffffff;
    box-shadow: 0 0 16.6px #49b366 inset, 0 0 16.6px #49b366;
    border-radius: 8px;
    background: linear-gradient(180deg, #91ff66, #3d7b4c 69.71%, #37a961);
    border: 3px solid #bafdb8 !important;
}

.sidebar-container,
.sidebar-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    align-items: stretch;
}

.sidebar-content {
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start;
    height: 85%;
    align-items: stretch;
}

.sidebar-container {
    width: 17.5rem;
    /* backdrop-filter: blur(13.3px); */
    /* border-radius: 12px; */
    /* background-color: rgba(0, 0, 0, 0.75); */
    /* border: 1px solid #063118; */
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    height: calc(100vh - (3.875rem * 2));
    height: 100vh;
    /* margin-top: -3.875rem; */
    position: sticky;
    top: 0;
    /* background-color: rgb(36 5 13 / 75%); */
    /* background: url(../public/main/pattern-sidebar.png); */
    /* background-size: contain; */
    backdrop-filter: blur(13.3px);
    background-color: rgba(0, 0, 0, 0.75);
    border: 1px solid #000;
}

.header-container-icon {
    width: 53.563rem;
    height: 6.938rem;
    object-fit: cover;
}

.user-info-label,
.user-info-value {
    position: relative;
    font-size: 0.8rem;
    color: #ffffff;
    /* color: #8a2c22; */
}

.user-info-value {
    color: #fff;
}

.user-info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.312rem;
}

.reward-icon {
    width: 1.813rem;
    position: relative;
    height: 1.813rem;
    object-fit: cover;
}

.user-info-row,
.user-stats-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.user-stats-container {
    justify-content: flex-start;
    gap: 1rem;
}

.user-info-row {
    align-self: stretch;
    backdrop-filter: blur(13.3px);
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.75);
    border: 1px solid #000;
    box-sizing: border-box;
    height: 5.875rem;
    overflow: hidden;
    flex-shrink: 0;
    justify-content: space-between;
    padding: 1rem;
    gap: 0;
}

.progress-bar {
    align-self: stretch;
    position: relative;
    border-radius: 15px;
    background-color: #d9d9d9;
    height: 0.813rem;
}

.progress-container,
.user-info {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.progress-container {
    backdrop-filter: blur(13.3px);
    border-radius: 12px;
    /* background-color: rgba(0, 0, 0, 0.75); */
    border: 1px solid #000;
    overflow: hidden;
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;
    border-width: 20px;
    border-radius: 0;
    border-style: solid;
    border-color: transparent;
    border-image: url(../../../valentine-chocolate/10/public/main/Frame1638.png) 60 / 1 / 0 round;
}

.progress-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000000;
    background: url(../../../christmas-tree/10/public/main/pattern-content.png) lightgray 50% / auto repeat;
}

.user-info {
    align-items: flex-start;
    gap: 1rem;
}

.door-selection-title {
    align-self: stretch;
    position: relative;
    font-weight: 600;
    text-shadow: -3px -2px 0 #000, -3px -1px 0 #000, -3px 0px 0 #000, -3px 1px 0 #000, -3px 2px 0 #000, -2px -3px 0 #000, -2px -2px 0 #000, -2px -1px 0 #000, -2px 0px 0 #000, -2px 1px 0 #000, -2px 2px 0 #000, -2px 3px 0 #000, -1px -3px 0 #000, -1px -2px 0 #000, -1px -1px 0 #000, -1px 0px 0 #000, -1px 1px 0 #000, -1px 2px 0 #000, -1px 3px 0 #000, 0px -3px 0 #000, 0px -2px 0 #000, 0px -1px 0 #000, 0px 0px 0 #000, 0px 1px 0 #000, 0px 2px 0 #000, 0px 3px 0 #000, 1px -3px 0 #000, 1px -2px 0 #000, 1px -1px 0 #000, 1px 0px 0 #000, 1px 1px 0 #000, 1px 2px 0 #000, 1px 3px 0 #000, 2px -3px 0 #000, 2px -2px 0 #000, 2px -1px 0 #000, 2px 0px 0 #000, 2px 1px 0 #000, 2px 2px 0 #000, 2px 3px 0 #000, 3px -2px 0 #000, 3px -1px 0 #000, 3px 0px 0 #000, 3px 1px 0 #000, 3px 2px 0 #000;

}

.door-image-icon {
    width: 23.831rem;
    position: relative;
    max-height: 100%;
    object-fit: cover;
    z-index: 0;
}

.f35a346f29bc5572b26750e751ba01-icon {
    width: 26.75rem;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 214.35px);
    left: calc(50% - 214.15px);
    max-height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    z-index: 1;
}

.door-container1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    gap: 0.625rem;
}

.door-cost {
    position: relative;
    font-size: 0.8rem;
    color: #fef3c7;
    text-align: center;
}

.door-info {
    align-self: stretch;
    box-shadow: 0 0 10.3px #e058ff inset;
    border-radius: 9px;
    background: linear-gradient(180deg, #b32def, #8414c4);
    border: 3px solid #cf00fe;
    box-sizing: border-box;
    /* height: 5.563rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
}

.door-container,
.door-selection {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.door-container {
    text-decoration: none;
    flex: 1;
    backdrop-filter: blur(13.3px);
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.75);
    border: 1px solid #000;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    color: inherit;
}

.door-selection {
    align-self: stretch;
    flex-direction: row;
    gap: 1rem;
    font-size: 1rem;
    color: #fff;
}

.door-selection-container,
.user-info-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.door-selection-container {
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
    color: #fef3c7;
}

.user-info-container {
    align-items: flex-start;
    gap: 1.5rem;
    color: #fde047;
}

.daily-mission-title {
    position: relative;
    font-weight: 500;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    color: #fcdd6c;
    font-size: 2rem;
}

.vector-icon {
    width: 1.75rem;
    position: relative;
    height: 1.75rem;
    object-fit: cover;
}

.action-container {
    text-decoration: none;
    width: 5rem;
    box-shadow: 0 0 0 2px #0cde8d inset, 0 0 0 3px #4bff84 inset;
    border-radius: 7px;
    background: linear-gradient(180deg, #22ee30, #009940);
    height: 4.375rem;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px #ffe700 inset, 0 0 0 3px #ffee51 inset;
    border-radius: 7px;
    background: linear-gradient(180deg, #fff443, #fcb832);
}

.mission-header {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
}

.daily-mission-details,
.daily-mission-info,
.mission-header {
    align-self: stretch;
    display: flex;
    align-items: center;
}

.daily-mission-info {
    box-shadow: 0 0 11.4px #000 inset;
    border-radius: 6px;
    background-color: #272028;
    border: 2px solid #3b2a40;
    box-sizing: border-box;
    height: 3.5rem;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    color: #ffc402;
}

.daily-mission-details {
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

.reward-text,
.reward-amount,
.reward-button-text,
.tab-button-text {
    position: relative;
    font-weight: 500;
    text-shadow: 0 0 4px rgb(54 147 0);
}

.daily-mission-reward-button--claimed {
    opacity: 0.4;
}

.daily-mission-reward-button {
    text-decoration: none;
    align-self: stretch;
    box-shadow: 0 0 10.3px #76ff00 inset;
    border-radius: 9px;
    background: linear-gradient(180deg, #76ff00, #33b300);
    border: 3px solid #4dca0a;
    box-sizing: border-box;
    height: 2.875rem;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    color: inherit;

}

.reward-lock-icon {
    width: 2rem;
    position: relative;
    height: 1.5rem;
    object-fit: cover;
}

.daily-mission-reward-button--locked {
    text-decoration: none;
    align-self: stretch;
    box-sizing: border-box;
    height: 2.875rem;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    text-shadow: 0 0 7px #ff2617;
    box-shadow: 0 0 10.3px #76ff00 inset;
    border-radius: 9px;
    background: linear-gradient(180deg, #76ff00, #33b300);
    border: 3px solid #4dca0a;
}

.progress-background-icon {
    width: 3.188rem;
    flex: 1;
    position: relative;
    max-height: 100%;
    object-fit: cover;
    z-index: 0;
}

.progress-count-text {
    width: 1.438rem;
    position: absolute;
    margin: 0 !important;
    top: 50%;
    left: 50%;
    display: inline-block;
    text-shadow: 0 0 4px #000;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.daily-mission-progress-indicator,
.daily-mission-progress-contain {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.daily-mission-progress-indicator {
    align-self: stretch;
    border-radius: 4px;
    background-color: #000402;
    border: 2px solid #165f34;
    box-sizing: border-box;
    height: 1.313rem;
    overflow: hidden;
    flex-shrink: 0;
    justify-content: flex-start;
    position: relative;
    font-size: 1rem;
}

.daily-mission-progress-contain {
    width: 9.188rem;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.daily-mission-item {
    align-self: stretch;
    box-shadow: 0 0 0 5px #043119 inset, 0 0 0 7px #0b582c inset;
    border-radius: 14px;
    background-color: #2c232c;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem;
    gap: 0;
    background: url(../../../christmas-tree/10/public/main/pattern-content-1.png);
}

.daily-mission-container {
    align-self: stretch;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    font-size: 1rem;
    color: #fff;
    padding: 0rem 0.5rem 0 0;
}

.theme-main-content-wp,
.reward-container-icon {
    align-self: stretch;
    overflow: hidden;
    flex-shrink: 0;
}

.theme-main-content-wp {
    /* background-color: #000; */
    /* height: 44.313rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    box-sizing: border-box;
    gap: 1.5rem;
    font-size: 1.5rem;
    /* border-width: 2.625rem; */
    /* border-style: solid; */
    /* border-color: transparent; */
    /* border-image: url(Frame1638.png) 62; */
}

.reward-container-icon {
    max-width: 100%;
    height: 10rem;
    object-fit: cover;
}

.reward-description {
    position: relative;
    font-size: 1rem;
    color: #fde047;
}

.reward-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.reward-button-icon {
    width: 1.5rem;
    position: relative;
    /* height: 2.188rem; */
    object-fit: cover;
}

.checkpoint-reward-button--disabled {
    text-decoration: none;
    align-self: stretch;
    /* box-shadow: 0 0 10.3px #e058ff inset; */
    border-radius: 9px;
    /* background: linear-gradient(180deg, #b32def, #8414c4); */
    /* border: 3px solid #cf00fe; */
    box-sizing: border-box;
    min-height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    gap: 0.5rem;
    opacity: 0.4;
    color: inherit;
    background: linear-gradient(180deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border: var(--border-width) solid var(--primary-border);
    box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset;
    text-shadow: 0 0 7px #ff2617 !important;
    background-image: url(../../../christmas-tree/10/public/main/pattern-btn.png);
    background-size: cover;
}

.checkpoint-reward-button--available {
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    align-self: stretch;
    /* box-shadow: 0 0 10.3px #e058ff inset; */
    border-radius: 9px;
    /* background: linear-gradient(180deg, #b32def, #8414c4); */
    /* border: 3px solid #cf00fe; */
    box-sizing: border-box;
    min-height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    background: linear-gradient(180deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border: var(--border-width) solid var(--primary-border);
    box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset;
    box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset;
    text-shadow: 0 0 7px #ff2617 !important;
    background-image: url(../../../christmas-tree/10/public/main/pattern-btn.png);
    background-size: cover;
}

.checkpoint-reward-button--claimed {
    text-decoration: none;
    align-self: stretch;
    /* box-shadow: 0 0 10.3px #e058ff inset; */
    border-radius: 9px;
    /* background: linear-gradient(180deg, #b32def, #8414c4); */
    /* border: 3px solid #cf00fe; */
    box-sizing: border-box;
    min-height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    background: linear-gradient(180deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border: var(--border-width) solid var(--primary-border);
    box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset;
    box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset;
    text-shadow: 0 0 7px #ff2617 !important;
    background-image: url(../../../christmas-tree/10/public/main/pattern-btn.png);
    background-size: cover;
}

.check-point-rewards1,
.reward-button,
.reward-container {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
}

.reward-button {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    text-align: left;
}

.check-point-rewards1,
.reward-container {
    align-items: center;
}

.reward-container {
    flex: 1;
    backdrop-filter: blur(13.3px);
    border-radius: 12px;
    /* background-color: rgba(0, 0, 0, 0.75); */
    border: 1px solid #000;
    flex-direction: column;
    padding: 1rem;
    gap: 1.375rem;
    height: 100%;
    border-width: 20px;
    border-radius: 0;
    border-style: solid;
    border-color: transparent;
    border-image: url(../../../valentine-chocolate/10/public/main/Frame1638.png) 60 / 1 / 0 round;
}

.reward-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000000;
    background: url(../../../christmas-tree/10/public/main/pattern-content.png) lightgray 50% / auto repeat;
}


.check-point-rewards1 {
    min-height: 18rem;
    flex-direction: column;
    gap: 1rem;
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: stretch;
}

.history-tab-button--active {
    text-decoration: none;
    align-self: stretch;
    /* box-shadow: 0 0 10.3px #e058ff inset; */
    /* border-radius: 9px; */
    /* background: linear-gradient(180deg, #b32def, #8414c4); */
    /* border: 3px solid #cf00fe; */
    box-sizing: border-box;
    height: 3.25rem;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    /* color: inherit; */
    /* text-shadow: 0 0 4px rgb(0 0 0); */
    /* background: linear-gradient(180deg, var(--primary-gradient-start), var(--primary-gradient-end)); */
    /* border: var(--border-width) solid var(--primary-border); */
    /* box-shadow: 0 0 var(--shadow-blur) var(--primary-shadow) inset; */
    text-shadow: 0 0 7px #ff2617 !important;
    /* background-image: url(../../../christmas-tree/10/public/main/pattern-btn.png); */
    /* background-size: contain; */
    /* box-shadow: 0 0 10.3px #ff2f2f inset; */
    /* border-radius: 9px; */
    /* background: linear-gradient(180deg, #76ff00, #33b300); */
    /* border: 3px solid #ff1f26; */
    /* background: linear-gradient(180deg, #ff7d9c, #ff4649); */
    color: #ffffff;
    box-shadow: 0 0 16.6px #49b366 inset, 0 0 16.6px #49b366;
    border-radius: 8px;
    background: linear-gradient(180deg, #91ff66, #3d7b4c 69.71%, #37a961);
    border: 3px solid #bafdb8 !important;
}

.reward-history-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.history-tab-button--active,
.history-tab-button--inactive {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.history-tab-button--inactive {
    text-decoration: none;
    align-self: stretch;
    /* box-shadow: 0 0 10.3px #e058ff inset; */
    border-radius: 9px;
    /* background-color: #25011c; */
    /* border: 3px solid #cf00fe; */
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: inherit;
    text-shadow: 0 0 4px rgb(0 0 0);
    /* background: linear-gradient(180deg, #ee8033, #fccf1b); */
    border: var(--border-width) solid #4dca07;
    /* box-shadow: 0 0 var(--shadow-blur) #73fc00 inset; */
    /* background-color: #0c582c; */
    /* box-shadow: 0 0 10.3px #840c0c inset; */
    border-radius: 9px;
    /* background: linear-gradient(180deg, #76ff00, #33b300); */
    /* border: 3px solid #ff1f26; */
    /* background: linear-gradient(180deg, #9f1d3c, #920002); */
    /* background-color: #101229; */
    border: 3px solid #4f5464;
    color: #a2cdda;
}

.reward-history-column {
    flex: 1;
    align-items: flex-start;
    gap: 1rem;
}

.reward-history-title {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    font-size: 1.2rem;
}

.reward-icon {
    width: 1.813rem;
    position: relative;
    /* background-color: red; */
    height: 1.813rem;
}

.reward-date-text {
    align-self: stretch;
    position: relative;
    opacity: 0.7;
}

.reward-name-text {
    align-self: stretch;
    position: relative;
    font-size: 1rem;
}

.reward-history-text-container,
.reward-item-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.reward-item-container {
    flex-direction: row;
    gap: 1rem;
}

.reward-code-text-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
}

.vector-icon10 {
    width: 0.875rem;
    position: relative;
    height: 1rem;
    object-fit: cover;
}

.reward-code-icon-container {
    width: 2rem;
    background-color: #df5aff;
    border-left: 1px solid #df5aff;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
}

.reward-code-container {
    border-radius: 4px;
    background-color: #1c161c;
    border: 1px solid #df5aff;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 1rem;
    color: #df5aff;
}

.reward-history-row1,
.reward-history-vbox,
.reward-history-vbox1 {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.reward-history-row1 {
    /* border-radius: 14px; */
    /* background-color: #2c232c; */
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: row;
    padding: 1.5rem;
    gap: 1rem;
    /* background: url(../public/main/pattern-content-1.png); */
    /* box-shadow: 0 0 0 5px #043119 inset, 0 0 0 7px #0b582c inset; */
    /* background: url(../public/main/image80.png) lightgray 0% 0% / 50px 50px repeat; */
    /* box-shadow: 0 0 0 5px #FFF inset, 0 0 0 8px #FFCED4 inset; */
    border-radius: 12px;
    background-color: #050a1d;
    border: 3px solid #264852;
}

.reward-history-vbox,
.reward-history-vbox1 {
    flex-direction: column;
}

.reward-name-text3 {
    font-size: 1rem;
    color: #a2cdda;
}

.reward-history-vbox1 {
    height: 15rem;
    overflow-y: auto;
    flex-shrink: 0;
    gap: 0.375rem;
    font-size: 0.75rem;
    padding: 0rem 0.5rem 0 0;
}

.reward-history-vbox {
    flex: 1;
    gap: 0.5rem;
}

.pagination-number-container,
.pagination-number-container1 {
    text-decoration: none;
    width: 1.5rem;
    border-radius: 23px;
    background-color: #050a1d;
    height: 1.5rem;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: inherit;
    border: 1px solid #264852;
}

.pagination-number-container1 {
    background-color: #56a253;
    background: linear-gradient(180deg, #91ff66, #3d7b4c 69.71%, #37a961);
}

.pagination-container,
.reward-history-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
}

.reward-history-container {
    align-self: stretch;
    background-color: #000;
    /* min-height: 44.313rem; */
    flex-direction: column;
    padding: 2rem;
    box-sizing: border-box;
    gap: 1rem;
    font-size: 1rem;
    color: #fff;
}

.reward-name-text6 {
    position: relative;
    font-size: 1.25rem;
    font-weight: 600;
}

.event-title {
    align-self: stretch;
    position: relative;
    font-weight: 500;
    /* text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); */
    color: #15ff75;
    position: sticky;
    top: 0;
    background-color: #050a1d;
    z-index: 2;
}

.event-date {
    position: relative;
    font-size: 1rem;
    color: #ffffff;
    /* white-space: pre-wrap; */
}

.event-info1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.event-date1 {
    align-self: stretch;
    position: relative;
    font-size: 1.25rem;
    color: #fff;
    white-space: pre-wrap;
}

.li {
    margin: 0;
}

.event-rules-list {
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    padding-left: 1.35rem;
}

.event-description {
    align-self: stretch;
    position: relative;
    font-size: 1.25rem;
    color: #ffffff;
}

.event-info,
.event-info-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event-info {
    flex: 1;
    overflow-y: auto;
    align-items: flex-start;
    gap: 0.5rem;
}

.event-info-container {
    background-color: #000;
    /* height: 44.313rem; */
    overflow: hidden;
    flex-shrink: 0;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
    font-size: 1.5rem;
}

.event-popup-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 32.688rem;
    height: 15.125rem;
    object-fit: cover;
}

.event-popup-title {
    position: absolute;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #ffffff, #e4b219);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1rem;
}

.event-popup-content {
    /* width: 32.688rem; */
    position: relative;
    /* height: 8rem; */
    z-index: 0;
}

.close-button-image,
.event-popup-close-button {
    width: 2.5rem;
    position: absolute;
    top: 0;
    height: 2.5rem;
}

.close-button-image {
    left: 0;
    object-fit: cover;
}

.event-popup-close-button {
    text-decoration: none;
    margin: 0 !important;
    right: 0;
    z-index: 1;
}

.event-popup-header {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    gap: 5.437rem;
    z-index: 1;
}

.event-popup-icon-image {
    width: 13rem;
    position: relative;
    height: 13rem;
    object-fit: cover;
}

.event-popup-icon {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.event-popup-status {
    align-self: stretch;
    position: relative;
}

.event-popup-reward {
    position: relative;
    font-size: 1rem;
    color: #fff;
    color: #ffffff;
}

.event-popup-reward.warning{
     font-size: 0.8rem;
     color: #ff0000;
}

.event-popup-image1,
.event-popup-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.event-popup-text {
    width: 17.375rem;
}

.event-popup-image1 {
    gap: 1.125rem;
}

.reward-popup-close {
    position: relative;
    font-weight: 500;
}

.reward-popup-footer-content {
    text-decoration: none;
    flex: 1;
    box-shadow:
        0 0 0 2px #ea2a61 inset,
        0 0 0 3px #f6938a inset;
    border-radius: 7px;
    background: linear-gradient(180deg, #ef2d6a, #c41417);
    min-height: 2.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    color: inherit;
    box-shadow: 0 0 0 2px #cf0100 inset, 0 0 0 3px #ff1500 inset;
    border-radius: 7px;
    background: linear-gradient(180deg, #ff2121, #ca0000);
}

.event-popup-details,
.reward-popup-footer {
    align-items: center;
    justify-content: flex-start;
}

.reward-popup-footer {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    text-align: left;
    color: #fff;
}

.event-popup-details {
    gap: 1rem;
}

.event-popup,
.event-popup-body,
.event-popup-details {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.event-popup-body {
    /* box-shadow: 0 0 0 5px #ffd323 inset, 0 0 0 8px #000 inset; */
    /* border-radius: 14px; */
    /* background-color: #2c232c; */
    overflow: hidden;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem 1rem;
    z-index: 0;
    /* margin-top: -1.875rem; */
    /* position: relative; */
    font-size: 0.8rem;
    /* box-shadow: 0 0 0 5px #332243 inset, 0 0 0 8px #000 inset; */
    border-width: 10px;
    border-radius: 10px;
    border-style: solid;
    border-color: transparent;
    border-image: url(../../../valentine-chocolate/10/public/main/Frame1638.png) 48 / 1 / 0 round;
    /* color: white; */
    position: relative;
    /* background: url(../public/main/pattern-content-1.png); */
    background-color: #fdeae9;
    color: #ffffff;
    border-radius: 12px;
    background-color: #050a1d;
    border: 3px solid #264852;
}

.event-popup {
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    font-size: 1rem;
    color: #ffc300;
    max-width: 300px;
    margin: 0 auto;
}

.reward-popup-title {
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translate(-50%);
    background: linear-gradient(180deg, #fff4dd, #ffcf64);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 20px;
}

.reward-popup-icon-image {
    align-self: stretch;
    width: 20.656rem;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.reward-popup-text {
    flex-direction: column;
    gap: 0.562rem;
}

.reward-code-container5,
.reward-popup-image1,
.reward-popup-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.reward-code-container5 {
    border-radius: 4px;
    background-color: #1c161c;
    border: 1px solid #df5aff;
    overflow: hidden;
    flex-direction: row;
    text-align: left;
    color: #df5aff;
}

.reward-popup-image1 {
    align-self: stretch;
    border-radius: 6px;
    flex-direction: column;

    gap: 1.125rem;
}

.reward-popup-action {
    text-decoration: none;
    flex: 1;
    box-shadow:
        0 0 0 2px #2398fe inset,
        0 0 0 3px #8ac4f6 inset;
    border-radius: 7px;
    background: linear-gradient(180deg, #225bee, #0033c6);
    /* height: 4.063rem; */
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    color: inherit;
    min-height: 2.5rem;
    box-shadow: 0 0 0 2px #0636ca inset, 0 0 0 3px #1e58ee inset;
    border-radius: 7px;
    background: linear-gradient(180deg, #225bee, #0033c6);
}

.event-date2 {
    position: relative;
    font-size: 1.25rem;
    color: #028638;
    text-align: left;
}

.event-info4 {
    align-self: stretch;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.event-info-container1 {
    align-self: stretch;
    background-color: #000;
    /* height: 44.313rem; */
    overflow: hidden;
    flex-shrink: 0;
    justify-content: flex-start;
    padding: 2rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 2.25rem;
}

.event-info-container1,
.main-content,
.main-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-content {
    width: 100%;
    justify-content: flex-start;
    gap: 1rem;
    max-width: 82.5rem;
    padding: 2rem 1rem;
    margin: auto 0;
}

.main-content-container {
    flex: 1;
    justify-content: center;
    padding: 0 1rem;
    font-size: 1.25rem;
    color: #ffffff;
    width: 100%;
    min-height: 100vh;
    position: relative;
}



.content-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.background-image {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.footer-content {
    /* width: 82.5rem; */
    align-items: center;
    max-width: 82.5rem;
    color: white;
}

.footer,
.footer-content,
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer {
    align-self: stretch;
    background-color: #000000a1;
    overflow: hidden;
    align-items: center;
    padding: 0.4rem 1rem;
    text-align: center;
    border-radius: 8px;
    font-size: 1rem;
}

.main-container {
    width: 100%;
    position: relative;
    align-items: flex-start;
    text-align: left;
    font-size: 1rem;
    color: #fff;
    font-family: Kanit;
    /* background: url(../public/Rectangle134.png) lightgray 50% / cover no-repeat; */
    background: url(../../../valentine-chocolate/10/css/bg-lab.png) lightgray 50% / cover no-repeat;
    background-position: center top;
    background-attachment: fixed;
    min-height: 100vh;
}

.theme-border-img {
    border-image-repeat: stretch;
    /* padding: 2rem 2rem; */
    border-width: 1.5rem;
    border-radius: 10px;
    border-style: solid;
    border-color: transparent;
    border-image: url(../../../valentine-chocolate/10/public/main/Frame1638.png) 40 / 1 / 0 round;
    color: white;
    position: relative;
    height: 30rem;
    /* background-color: #000000; */
    /* background: url(../public/main/pattern-content.png) lightgray 50% / auto repeat; */
    background-color: #fdeae9;
    border-radius: 26px;
    background-color: #050a1d;
    border: 3px solid #264852;
    padding: 1.5rem;
}

.theme-border-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000000;
    background: url(../../../christmas-tree/10/public/main/pattern-content.png) lightgray 50% / auto repeat;
}

/*! CSS Used from: https://navakarn.github.io/au-cake/change_path_here/cake-web-event/10/css/index.css */
/*! @import https://navakarn.github.io/au-cake/change_path_here/cake-web-event/10/css/fix-dev.css */
.itemcode-allow {
    padding: 3px;

}

/*! end @import */
.event-description {
    align-self: stretch;
    position: relative;
    font-size: 1rem;
}

.reward-icon42 {
    width: 1.813rem;
    position: relative;
    /* background-color:#ffffff; */
    height: 1.813rem;
    border-radius: 3px;
    object-fit: contain;
}

.reward-date-text {
    align-self: stretch;
    position: relative;
    opacity: 0.7;
    color: #a2cdda;
}

.reward-history-text-container,
.reward-item-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.reward-item-container {
    flex-direction: row;
    gap: 1rem;
}

.reward-code-icon-container {
    width: 2rem;
    height: 1.75rem;
}

.reward-code-container,
.reward-history-row1 {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.reward-code-container {
    border-radius: 4px;
    background-color: #1c161c;
    border: 1px solid #df5aff;
    align-items: center;
    font-size: 1rem;
    color: #df5aff;
}

.reward-code-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.reward-code-container {
    border-radius: 4px;
    background-color: #1c161c;
    border: 1px solid #df5aff;
    overflow: hidden;
    flex-direction: row;
    text-align: left;
    color: #df5aff;
}

.arrow-right-icon,
.reward-code-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.arrow-right-icon {
    text-decoration: none;
    width: 2rem;
    background-color: #27a60d;
    border-left: 1px solid #27a60d;
    box-sizing: border-box;
    justify-content: center;
    padding: 0.375rem;
    cursor: pointer;
    color: white;
    height: 100%;
    /* background: linear-gradient(0deg, rgb(236 74 25) 0%, rgba(253, 187, 45, 1) 100%); */
}

.reward-code-container {
    border-radius: 4px;
    background-color: #06351c;
    border: 1px solid #27a60d;
    overflow: hidden;
    justify-content: flex-start;
    font-size: 1rem;
    color: #7546d8;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.user-id-txt {
    padding: 0.3rem 0.7rem;
    /* box-sizing: border-box; */
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: top; */
    background: url(../public/main/image80.png) lightgray 0% 0% / 50px 50px repeat;
    /* box-shadow: 0 0 0 5px #FFF inset, 0 0 0 8px #FFCED4 inset; */
    background-color: #093f1f;
    width: 100%;
    word-break: break-all;
    overflow-wrap: break-word;
    width: 100%;
    color: #ffffff;
    border-radius: 8px;
    font-size: 1rem;
    /* display: none; */
}





/* Mobile Navigation - สำหรับหน้าจอกว้างน้อยกว่า 768px */
@media (max-width: 767px) {

    .theme-border-img {
        /* border-width: 20px; */
        /* border-radius: 15px; */
        /* border-image: url(../public/main/Frame1638.png) 60 / 1 / 0 round; */
        padding: 1rem;
    }

    /* แปลง sidebar-container เป็น floating navigation bar */
    .sidebar-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-top: 2px solid #fedc00 !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        padding: 8px 16px !important;
        z-index: 1000 !important;
        /* background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85)) !important; */
        backdrop-filter: blur(20px) !important;
        /* box-shadow: 0 -4px 20px rgba(207, 0, 254, 0.3) !important; */
        display: flex !important;
        /* flex-direction: row !important; */
        justify-content: space-around !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* ซ่อน logo ในมือถือ */
    .sidebar-container > img {
        display: none !important;
    }

    /* ปรับ sidebar-content ให้เป็นแนวนอน */
    .sidebar-content {
        flex-direction: row !important;
        height: auto !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: space-around !important;
        width: 100% !important;
    }

    /* ปรับ sidebar-content1 ให้เป็นแนวนอน */
    .sidebar-content1 {
        flex-direction: row !important;
        height: auto !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* แปลงปุ่มให้เป็นแนวนอนและแสดงเฉพาะไอคอน */
    .sidebar-nav-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
        /* background: rgba(255, 255, 255, 0.1) !important; */
        /* border: 1px solid rgb(222 254 0 / 30%) !important; */
        flex: 1 !important;
        min-width: 0 !important;
        /* max-width: 80px !important; */
        height: auto !important;
        text-decoration: none !important;
        color: white !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* เพิ่ม hover effect */
    .sidebar-nav-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(207, 0, 254, 0.2), transparent);
        transition: left 0.5s;
    }

    .sidebar-nav-button:hover::before {
        left: 100%;
    }

    .sidebar-nav-button:hover {
        /* background: rgb(180 163 0 / 20%) !important; */
        /* border-color: #fedc00 !important; */
        transform: translateY(-2px) !important;
        /* box-shadow: 0 4px 12px rgb(243 254 0 / 40%) !important; */
        background-image: url(../../../christmas-tree/10/public/main/pattern-btn01.png);
        border: 3px solid #4dca0a !important;
        box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset;
    }

    .sidebar-nav-button:active {
        transform: translateY(0) !important;
    }

    /* แสดงเฉพาะไอคอนในมือถือ */
    .sidebar-nav-button .d-flex.d-md-none {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 18px !important;
        margin-bottom: 4px !important;
        border-radius: 50% !important;
        /* background: linear-gradient(135deg, #B32DEF, #8414C4) !important; */
        /* box-shadow: 0 2px 8px rgba(179, 45, 239, 0.3) !important; */
    }

    /* ซ่อนข้อความในมือถือ */
    .sidebar-nav-button .d-none.d-md-flex {
        display: none !important;
    }

    /* ปรับปุ่ม Log Out */
    .sidebar-logout-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
        /*background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(207, 0, 254, 0.3) !important;*/
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 70px !important;
        height: auto !important;
        text-decoration: none !important;
        color: white !important;
        transition: all 0.3s ease !important;
    }

    .sidebar-logout-button:hover {

        transform: translateY(-2px) !important;
        background-image: url(../../../christmas-tree/10/public/main/pattern-btn01.png) !important;
        border: 3px solid #4dca0a !important;
        box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset !important;
    }

    .sidebar-logout-button:active {
        transform: translateY(0) !important;
    }

    /* เพิ่มไอคอนสำหรับ Log Out */
    .sidebar-logout-button::before {
        content: '';
        background: url(../../../christmas-tree/10/public/main/door.svg) no-repeat center;
        font-size: 16px;
        margin-bottom: 4px;
        display: block;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        /*background: linear-gradient(135deg, #B32DEF, #8414C4);
        box-shadow: 0 2px 8px rgba(179, 45, 239, 0.3);*/
    }




    /* ปรับ main-content-container ให้มี padding ด้านล่าง */
    .main-content-container {
        padding-bottom: 80px !important;
    }

    /* ปรับ content-container ให้รองรับ mobile nav */
    .content-container {
        /* padding-bottom: 80px !important; */
    }

    /* เพิ่ม safe area สำหรับ iPhone */
    .sidebar-container {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    /* ปรับขนาดและระยะห่างของ elements ต่างๆ ในมือถือ */
    .main-content {
        /* padding: 1rem !important; */
    }

    .user-info-row {
        flex-direction: column !important;
        gap: 8px !important;
        height: auto !important;
        padding: 12px !important;
    }

    .user-stats-container {
        justify-content: center !important;
        gap: 1rem !important;
    }

    .user-info-item {
        font-size: 0.9rem !important;
    }

    .door-selection-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .door-container {
        margin-bottom: 1rem !important;
    }

    /* เพิ่ม active state สำหรับปุ่มที่เลือก */
    .sidebar-nav-button--active {
        /* background: linear-gradient(135deg, rgb(254 227 0 / 30%), rgb(224 239 45 / 30%)) !important; */
        /* border-color: #fedc00 !important; */
        /* box-shadow: 0 2px 8px rgb(254 133 0 / 50%) !important; */
        background-image: url(../../../christmas-tree/10/public/main/pattern-btn01.png);
        border: 3px solid #4dca0a !important;
        box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset;
    }

    /* เพิ่ม label สำหรับปุ่มในมือถือ */
    .sidebar-nav-button::after {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
        color: #ffffff;
        margin-top: 2px;
    }

    /* เพิ่ม label สำหรับปุ่ม Log Out */
    .sidebar-logout-button::after {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
        color: #ffffff;
        margin-top: 2px;
    }

    /* ปรับขนาดไอคอนให้เหมาะสม */
    .sidebar-nav-button .d-flex.d-md-none {
        font-size: 16px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .background-image {
        /* padding: 2rem 0rem; */
    }
}

/* Tablet Navigation - สำหรับหน้าจอกว้าง 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {

    /* แปลง sidebar-container เป็น floating navigation bar สำหรับ tablet */
    .sidebar-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-top: 2px solid #f4d330 !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        padding: 12px 24px !important;
        z-index: 1000 !important;
        /* background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85)) !important; */
        backdrop-filter: blur(20px) !important;
        /* box-shadow: 0 -4px 20px rgba(207, 0, 254, 0.3) !important; */
        display: flex !important;
        /* flex-direction: row !important; */
        justify-content: space-around !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* ซ่อน logo ใน tablet */
    .sidebar-container > img {
        display: none !important;
    }

    /* ปรับ sidebar-content ให้เป็นแนวนอน */
    .sidebar-content {
        flex-direction: row !important;
        height: auto !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: space-around !important;
        width: 100% !important;
    }

    /* ปรับ sidebar-content1 ให้เป็นแนวนอน */
    .sidebar-content1 {
        flex-direction: row !important;
        height: auto !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* แปลงปุ่มให้เป็นแนวนอนและแสดงเฉพาะไอคอน */
    .sidebar-nav-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        border-radius: 12px !important;
        /* background: rgba(255, 255, 255, 0.1) !important; */
        /* border: 1px solid rgba(207, 0, 254, 0.3) !important; */
        flex: 1 !important;
        min-width: 0 !important;
        /* max-width: 100px !important; */
        height: auto !important;
        text-decoration: none !important;
        color: white !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* เพิ่ม hover effect */
    .sidebar-nav-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(118, 255, 0, 0.2), transparent);
        transition: left 0.5s;
    }

    .sidebar-nav-button:hover::before {
        left: 100%;
    }

    .sidebar-nav-button:hover {
        /* background: rgba(207, 0, 254, 0.2) !important; */
        /* border-color: #CF00FE !important; */
        transform: translateY(-2px) !important;
        /* box-shadow: 0 4px 12px rgba(207, 0, 254, 0.4) !important; */
        background-image: url(../../../christmas-tree/10/public/main/pattern-btn01.png);
        border: 3px solid #4dca0a !important;
        box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset;
    }

    .sidebar-nav-button:active {
        transform: translateY(0) !important;
    }

    /* แสดงเฉพาะไอคอนใน tablet */
    .sidebar-nav-button .d-flex.d-md-none {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 20px !important;
        margin-bottom: 6px !important;
        border-radius: 50% !important;
        /* background: linear-gradient(135deg, #B32DEF, #8414C4) !important; */
        /* box-shadow: 0 2px 8px rgba(179, 45, 239, 0.3) !important; */
    }

    /* ซ่อนข้อความใน tablet */
    .sidebar-nav-button .d-none.d-md-flex {
        display: none !important;
    }

    /* ปรับปุ่ม Log Out */
    .sidebar-logout-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        border-radius: 12px !important;
        /* background: rgba(255, 255, 255, 0.1) !important; */
        /* border: 1px solid rgba(207, 0, 254, 0.3) !important; */
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 100px !important;
        height: auto !important;
        text-decoration: none !important;
        color: white !important;
        transition: all 0.3s ease !important;
    }

    .sidebar-logout-button:hover {
        transform: translateY(-2px) !important;
        background-image: url(../../../christmas-tree/10/public/main/pattern-btn01.png);
        border: 3px solid #4dca0a !important;
        box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset;
    }

    .sidebar-logout-button:active {
        transform: translateY(0) !important;
    }

    /* เพิ่มไอคอนสำหรับ Log Out */
    .sidebar-logout-button::before {
        content: '';
        background: url(../../../christmas-tree/10/public/main/door.svg) no-repeat center;
        font-size: 20px;
        margin-bottom: 6px;
        display: block;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        /* background: linear-gradient(135deg, #B32DEF, #8414C4); */
        /* box-shadow: 0 2px 8px rgba(179, 45, 239, 0.3); */
    }

    /* เพิ่ม label สำหรับปุ่มใน tablet */
    .sidebar-nav-button::after {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
        color: #ffffff;
        margin-top: 2px;
    }

    /* เพิ่ม label สำหรับปุ่ม Log Out */
    .sidebar-logout-button::after {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
        color: #ffffff;
        margin-top: 2px;
    }

    /* ปรับ main-content-container ให้มี padding ด้านล่าง */
    .main-content-container {
        padding-bottom: 100px !important;
    }

    /* ปรับ content-container ให้รองรับ tablet nav */
    .content-container {
        padding-bottom: 100px !important;
    }

    /* เพิ่ม active state สำหรับปุ่มที่เลือก */
    .sidebar-nav-button--active {
        /* background: linear-gradient(135deg, rgba(207, 0, 254, 0.3), rgba(179, 45, 239, 0.3)) !important; */
        /* border-color: #CF00FE !important; */
        /* box-shadow: 0 2px 8px rgb(255 255 255 / 50%) !important; */
        background-image: url(../../../christmas-tree/10/public/main/pattern-btn01.png);
        border: 3px solid #4dca0a !important;
        box-shadow: 0 0 var(--shadow-blur) rgb(0 151 64 / 50%) inset;
    }

    /* Responsive adjustments สำหรับหน้าจอขนาดเล็กมาก */
    @media (max-width: 480px) {
        .sidebar-container {
            padding: 6px 12px !important;
            gap: 6px !important;
        }

        .sidebar-content1 {
            gap: 6px !important;
        }

        .mission-action-details1,
        .sidebar-logout-button {
            padding: 6px 8px !important;
            max-width: 60px !important;
        }

        .sidebar-nav-button .d-flex.d-md-none {
            width: 20px !important;
            height: 20px !important;
            font-size: 14px !important;
        }

        .sidebar-logout-button::before {
            width: 20px !important;
            height: 20px !important;
            font-size: 14px !important;
        }

        .mission-action-details1::after,
        .sidebar-logout-button::after {
            font-size: 9px !important;
        }
    }

    /* Responsive adjustments สำหรับหน้าจอกลาง */
    @media (min-width: 481px) and (max-width: 767px) {

        .mission-action-details1,
        .sidebar-logout-button {
            max-width: 70px !important;
        }
    }
}

/* Responsive adjustments สำหรับ tablet ขนาดเล็ก */
@media (min-width: 768px) and (max-width: 900px) {

    .mission-action-details1,
    .sidebar-logout-button {
        /* max-width: 90px !important; */
        padding: 8px 12px !important;
    }
}

/* Responsive adjustments สำหรับ tablet ขนาดใหญ่ */
@media (min-width: 901px) and (max-width: 1023px) {

    .mission-action-details1,
    .sidebar-logout-button {
        /* max-width: 110px !important; */
        padding: 12px 18px !important;
    }
}


.section-exchange{
    height: 41.5rem;
}


/************************************************/
/******************** Media Query  ************************/
/**********************************************************/

@media (max-width: 1920px) {
    .main-content-container::after {
        position: absolute;
        top: -50px;
        width: 100%;
        height: 269px;
        content: '';
        pointer-events: none;
        background-image: url(../../../christmas-tree/10/public/main/light-bulb.png);
        background-size: 100%;
        background-repeat: no-repeat;

    }
}


@media (min-width: 1200px) {
    .main-content {
        width: 100%;
        max-width: 80%;
    }

}

@media (max-width: 1200px) {
    .event-popup-content {
        /* height: 10.5rem; */
    }

    .event-popup-title {
        top: 7.25rem;
        font-size: 1.5rem;
    }

    .main-content-container::after {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .event-popup-content {
        /* height: 9rem; */
    }

    .event-popup-title {
        top: 6.70rem;
        font-size: 1.5rem;
    }

    .sidebar-container {
        /* background: url(../public/main/pattern-sidebar-1.png); */
        background-size: auto;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mission-name {
        margin-top: 50px;
    }

    .event-popup-content {
        /* height: 9.2rem; */
    }

    .event-popup-title {
        top: 7.25rem;
        font-size: 1.5rem;
    }

    .sidebar-container {
        /* background: url(../public/main/pattern-sidebar-1.png); */
        background-size: auto;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .mission-name {
        margin-top: 50px;
    }

    .event-popup-content {
        /* height: 9.2rem; */
    }

    /* กำหนดขนาด scrollbar */
    .christmas-wish-card-grid::-webkit-scrollbar,
    .daily-mission-container::-webkit-scrollbar,
    .event-info::-webkit-scrollbar,
    .reward-history-vbox1::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    .sidebar-container {
        /* background: url(../public/main/pattern-sidebar-1.png); */
        background-size: auto;
    }
}

@media (max-width: 575px) {

    /* กำหนดขนาด scrollbar */
    .christmas-wish-card-grid::-webkit-scrollbar,
    .daily-mission-container::-webkit-scrollbar,
    .event-info::-webkit-scrollbar,
    .reward-history-vbox1::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    .mission-name {
        margin-top: 50px;
    }

    .event-popup-content {
        /* height: 9.2rem; */
    }

    .event-popup-title {
        top: 7.25rem;
        font-size: 1.5rem;
    }

    .christmas-wish-theme-border,
    .theme-border-img {
        /* border-width: 15px; */
    }

    .sidebar-container {
        /* background: url(../public/main/pattern-sidebar-1.png); */
        background-size: auto;
    }
}