/* =========================
   NAVBAR
========================== */
.navbarMainLayout {
   position: fixed;
   top: 10px;
   right: 10px;
   z-index: 10;

   width: 100%;
   height: 60px;
   padding: 5px 10px;

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


/* =========================
   FOOTER MAIN
========================== */
.footerMainLayout {
   position: relative;
   z-index: 2;
   width: 100%;
   min-height: 150px;
   background: #0b1d48;
   padding: 20px;
   gap: 10px;

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

.footer_socialLayout {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   padding: 5px;
   font-size: 20px;

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

   color: #fff;
}

.footer_socialLayout.facebook {
   background: #315aaf;
}

.footer_socialLayout.youtube {
   background: #a12323;
}

.footer_socialLayout.discord {
   background: #3e46ac;
}

.footer_logo {
   width: 200px;
}

.footer_link {
   color: #c7c7c7;
   transition: all 0.5s;
}

.footer_linkHr {
   width: 2px;
   height: 20px;
   background: #c7c7c7;
   margin: 0 10px;
}

.footer_link:hover {
   color: #fff;
   transition: all 0.5s;
}

/* =========================
   MODAL
========================== */
.modal-content {
   border-radius: 20px;
   padding: 3px;
   background: linear-gradient(180deg, rgba(251, 224, 156, 1) 60%, rgba(248, 178, 108, 1) 100%);
   border: 3px solid #000;
   color: #000;
   font-size: 13px;
   line-height: 15px;
   font-family: "FCVision", sans-serif;
   font-weight: 300;
}

.modalContentMain {
   width: 100%;
   height: 100%;
   border-radius: 15px;
   padding: 50px;
   background: #fff;
}

.modalItemTableMainLayout {
   width: 100%;
   min-height: 200px;
   padding: 20px 60px;
   display: flex;
   gap: 20px;
}

.modalItemCardLayout {
   width: 300px;
   min-width: 300px;
   min-height: 200px;

   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   font-family: "FCVision", sans-serif;
}

.modalItemImg {
   width: 70px;
}

.reward_TableDetail {
   color: #000;
   width: 100%;
   min-height: 180px;
   padding: 20px;
   background: #f5faff;
   border: 1px solid #6c7db9;
   font-family: "FCVision", sans-serif;

   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: start;
   gap: 10px;
   font-size: 14px;

}

.reward_TableTitle {
   width: 180px;
   min-width: 180px;
   min-height: 180px;
   padding: 20px;
   font-size: 14px;
   line-height: 20px;

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

   background: #fff;
   color: #1354b4;
   border: 1px solid #6c7db9;
   border-right: 0px solid transparent;
   font-family: "FCVision", sans-serif;
}

.reward_TableReward {
   width: 60px;
}

.reward_TableTitle p {
   line-height: 17px;
}

/* =========================
   Responsive
========================== */
/* ≤ 1200px (xl และต่ำกว่า) */
@media (max-width: 1199.98px) {}

/* ≤ 992px (lg และต่ำกว่า) */
@media (max-width: 991.98px) {}

/* ≤ 768px (md และต่ำกว่า) */
@media (max-width: 767.98px) {}

/* ≤ 576px (sm และต่ำกว่า — mobile เล็กสุด) */
@media (max-width: 575.98px) {}