html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html, body {
  font-size: 0.9rem !important;
  line-height: 1.5;
  background-color: #050C14;
  font-family: kohinoor-thai, sans-serif !important;
  font-weight: 500;
  font-style: normal;
  color: #9A9DA3;
}

hr {
  border-color: #55575A;
  margin: 1.5rem 0;
}

.badge {
  border-radius: 100px;
  padding: 0.05rem 0.5rem;
}

.text-truncate1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hidescroll::-webkit-scrollbar {
  display: none;
}

.hidescroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tooltip {
  font-size: 0.8rem;
  line-height: 1.2;
  z-index: 9999999999;
}

.tooltip-inner {
  padding: 0.5rem 1rem;
  text-align: left;
}

.alert {
  padding: 0.5rem;
  color: #fff;
  position: relative;
  margin-bottom: 0;
  border-bottom: 1px solid #1F262D;
}
.alert-primary {
  background-color: #ec327e;
  border-color: #ec327e;
  color: #fff;
}
.alert-secondary {
  background-color: #262E37;
  border-color: #262E37;
  color: #fff;
}
.alert-info {
  background-color: #FFB628;
  border-color: transparent;
  background: linear-gradient(0deg, #c28e29 0%, #ee8100 100%);
  color: #fff;
}
.alert-danger {
  background-color: transparent;
  background: linear-gradient(-90deg, rgba(184, 48, 48, 0) 10%, #ec327e 50%);
  border-color: transparent;
  border: none;
  color: #fff;
}

h1, .fs-1 {
  font-size: 2rem !important;
  font-weight: 600;
}

h2, .fs-2 {
  font-size: 1.8rem !important;
  font-weight: 600;
}

h3, .fs-3 {
  font-size: 1.65rem !important;
  font-weight: 600;
}

h4, .fs-4 {
  font-size: 1.5rem !important;
  font-weight: 600;
}

h5, .fs-5 {
  font-size: 1.3rem !important;
  font-weight: 600;
}

h6, .fs-6 {
  font-size: 1.1rem !important;
}

.fs-normal {
  font-size: 0.9rem !important;
}

.fw-normal {
  font-weight: 500;
}

.fss-1 {
  font-size: 0.8rem !important;
  line-height: 1.3;
}

.fss-2 {
  font-size: 0.7rem !important;
  line-height: 1.3;
}

.fss-3 {
  font-size: 0.6rem !important;
  line-height: 1.3;
}

.fss-4 {
  font-size: 0.55rem !important;
  line-height: 1.3;
}

.fs-0 {
  font-size: 0 !important;
}

.bg-none {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: 0 0 0 transparent !important;
  border: 0 !important;
  border-color: tranparent !important;
}

.bg-primary {
  background-color: #ec327e !important;
}

.bg-primary2 {
  background-color: #ec327e !important;
}

.bg-dark {
  background-color: #01050A !important;
}

.bg-dark2 {
  background-color: #01050A !important;
  background: linear-gradient(0deg, rgba(1, 5, 10, 0) 0%, #01050a 100%) !important;
}

.bg-dark3 {
  background-color: #050C14 !important;
}

.bg-dark4 {
  background-color: #01050A !important;
  background: linear-gradient(0deg, rgba(1, 5, 10, 0) 0%, #01050a 100%) !important;
}

.bg-dark5 {
  background-color: #01050A !important;
  background: linear-gradient(90deg, rgba(1, 5, 10, 0) 0%, #01050a 100%) !important;
}

.bg-secondary {
  background-color: #213142 !important;
}

.bg-secondary2 {
  background-color: #262E37 !important;
}

.bg-secondary3 {
  background-color: #1F262D !important;
}

.bg-secondary4 {
  background-color: #171B21 !important;
}

.bg-secondary5 {
  background-color: #171B21 !important;
  background: linear-gradient(0deg, rgba(23, 27, 33, 0) 0%, #171b21 50%) !important;
}

.bg-success {
  background-color: #6AB726 !important;
}

.bg-success2 {
  background-color: #A4BD09 !important;
  background: linear-gradient(0deg, #a4bd09 0%, #6ab726 100%) !important;
}

.bg-gold {
  background-color: #FFB628 !important;
  background: linear-gradient(0deg, #d7ac5a 0%, #ffb628 100%) !important;
}

.bg-gold2 {
  background-color: #262E37 !important;
  background: linear-gradient(0deg, #352913 0%, #262e37 100%) !important;
}

.bg-gold3 {
  background-color: #EE8100 !important;
  background: linear-gradient(0deg, #f8bc48 0%, #ee8100 100%) !important;
}

.bg-gold4 {
  background-color: #FFE176 !important;
  background: linear-gradient(0deg, #ffe176 0%, #c38c00 70%) !important;
}

.bg-purple {
  background-color: #6B33B1 !important;
}

.bg-purple2 {
  background-color: #6B33B1 !important;
  background: linear-gradient(0deg, #37263f 0%, #262e37 100%) !important;
}

.bg-red {
  background-color: #ec327e !important;
}

.bg-red2 {
  background-color: #ec327e !important;
  background: linear-gradient(0deg, #492525 0%, #262e37 100%) !important;
}

.bg-red-cny {
  background-color: #8B1A20;
}

.bg-red-cny2 {
  background-color: #350306;
}

.bg-red-cny3 {
  background-color: #5D0408;
}

.bg-blue {
  background-color: #1F43C1 !important;
}

.bg-blue2 {
  background-color: #1F43C1 !important;
  background: linear-gradient(0deg, #172556 0%, #262e37 100%) !important;
}

.bg-blueg {
  background-color: #053E46 !important;
}

.bg-grad-red {
  background-color: #ec327e !important;
  background: linear-gradient(0deg, #200808 0%, #01050a 100%) !important;
}

.container-s1 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.border {
  border-color: #262E37 !important;
}

.border-start {
  border-color: #262E37 !important;
}

.border-primary {
  border-color: #ec327e !important;
}

.border-secondary {
  border-color: #1F262D !important;
}

.border-secondary2 {
  border-color: #213142 !important;
}

.border-secondary3 {
  border-color: #9A9DA3 !important;
}

.border-secondary4 {
  border-color: #3F424E !important;
}

.border-secondary5 {
  border-color: #171B21 !important;
}

.border-blue {
  border-color: #4550C7 !important;
}

.border-blueg {
  border-color: #0F656A !important;
}

.border-dark {
  border-color: #050C14 !important;
}

.border-dark2 {
  border-color: #000 !important;
}

.border-gold {
  border-color: #FFD37E !important;
}

.border-gold2 {
  border-color: #ec327e !important;
}

.border-purple {
  border-color: #6B33B1 !important;
}#ec327e
.border-success {
  border-color: #6AB726 !important;
}

.border-red {
  border-color: #ec327e !important;
}

.border-3 {
  border-width: 3px;
}

.progress {
  height: 0.25rem;
  border-radius: 1000px;
  background-color: #262E37;
}

.progress-cny {
  background-color: #350306;
  border: 2px solid #8B1A20;
}

.progress-bar {
  background-color: #ec327e;
}

.form-label {
  margin-bottom: 0.25rem;
}

.form-control, .form-select {
  background-color: #1F262D;
  border-color: transparent;
  padding: 1.1rem 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  color: #fff;
  font-family: aktiv-grotesk-thai, sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

.form-control:focus, .form-select:focus {
  color: #fff;
  background-color: #1F262D;
  border-color: #1F262D;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(38, 46, 55, 0.5);
}

.form-control:disabled {
  background-color: rgba(31, 38, 45, 0.5);
  color: #55575A;
}

.form-control-s1 {
  border: 1px dashed #55575A;
}

.icon-form {
  color: #55575A;
}

.form-check-input {
  background-color: #262E37;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0;
  border-color: #262E37;
}

.form-check-input:checked {
  background-color: #6AB726;
  border-color: #6AB726;
}

.form-check-input:focus {
  border-color: #6AB726;
  box-shadow: 0 0 0 0.25rem rgba(106, 183, 38, 0.25);
}

.form-check {
  margin-bottom: 0;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
  background-image: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

a {
  color: #ec327e;
}

a:hover {
  color: #ec327e;
}

.btn {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  filter: brightness(1);
}
.btn-outline-primary {
  border-color: #ec327e;
  color: #fff;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  border-color: #ec327e !important;
  background-color: #ec327e !important;
  color: #fff;
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-outline-secondary {
  border-color: #213142;
  color: #9A9DA3;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  border-color: #213142 !important;
  background-color: #213142 !important;
  color: #9A9DA3;
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-outline-info {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
  border-color: #fff !important;
  background-color: #fff !important;
  color: #ec327e;
}
.btn-outline-info.disabled, .btn-outline-info:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-primary {
  color: #fff;
  background-color: #ec327e !important;
  border-color: #ec327e;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:first-child:active {
  background-color: #ec327e !important;
  background-image: none !important;
  border-color: #ec327e !important;
  color: #fff !important;
}
.btn-primary.disabled, .btn-primary:disabled {
  opacity: 0.4;
  border-color: #ec327e !important;
  pointer-events: none;
}
.btn-secondary {
  color: #fff;
  background-color: #55575A !important;
  border-color: #55575A;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-primary:active {
  border-color: transparent !important;
  color: #fff !important;
}
.btn-secondary.disabled, .btn-secondary:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-secondary2 {
  color: #fff;
  background-color: #1F262E !important;
  border-color: #1F262E;
}
.btn-secondary2:hover, .btn-secondary2:focus, .btn-secondary2:active {
  border-color: transparent !important;
  color: #fff !important;
}
.btn-secondary2.disabled, .btn-secondary2:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-info {
  color: #fff;
  background-color: #213142 !important;
  border-color: #213142;
}
.btn-info:hover, .btn-info:focus, .btn-primary:active {
  border-color: transparent !important;
  color: #fff !important;
  background-color: #262E37 !important;
  border-color: #262E37 !important;
}
.btn-info.disabled, .btn-info:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-link {
  color: #ec327e;
  text-decoration: none;
  border-color: transparent !important;
}
.btn-link:hover, .btn-link:focus, .btn-link:active {
  border-color: transparent !important;
  color: #ec327e !important;
  text-decoration: none !important;
}
.btn-link.disabled, .btn-link:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-link-cny {
  color: #fff;
  text-decoration: none;
  border-color: transparent !important;
}
.btn-link-cny:hover, .btn-link-cny:focus, .btn-link-cny:active {
  border-color: transparent !important;
  color: #FFD37E !important;
  text-decoration: none !important;
}
.btn-link-cny.disabled, .btn-link-cny:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-link2 {
  color: #171B21;
  text-decoration: none;
  border-color: transparent !important;
}
.btn-link2:hover, .btn-link2:focus, .btn-link2:active {
  border-color: transparent !important;
  color: #262E37 !important;
  text-decoration: none !important;
}
.btn-link2.disabled, .btn-link2:disabled {
  color: #ec327e;
  opacity: 0.4;
  pointer-events: none;
  border-color: transparent !important;
}
.btn-link2.active {
  color: #ec327e !important;
}
.btn-outline-style1 {
  border: 2px solid #262E37;
}
.btn-outline-style1:hover, .btn-outline-style1:focus, .btn-outline-style1:active {
  border: 2px solid #ec327e !important;
}
.btn-outline-style1.disabled, .btn-outline-style1:disabled {
  border: 2px solid #9A9DA3 !important;
  opacity: 0.4;
}
.btn-s1 {
  color: #fff;
  background-color: #4550C7 !important;
  border-color: #4550C7;
}
.btn-s1:hover, .btn-s1:focus, .btn-s1:active {
  background-color: #4550C7 !important;
  border-color: #4550C7 !important;
  color: #fff;
}
.btn-s1.disabled, .btn-s1:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-s2 {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-color: transparent;
}
.btn-s2:hover, .btn-s2:focus, .btn-s2:active {
  border-color: #ec327e;
  background-color: #ec327e;
  color: #fff !important;
}
.btn-s2.disabled, .btn-s2:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-s3 {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  border-radius: 0.5rem;
}
.btn-s3:hover, .btn-s3:focus, .btn-primary:active {
  border: 0;
  color: #fff !important;
  text-decoration: none !important;
  background-color: transparent;
  background: linear-gradient(0deg, #1f262d 0%, rgba(31, 38, 45, 0) 100%);
}
.btn-s3.disabled, .btn-s3:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-s4 {
  color: #ec327e;
  text-decoration: none;
  border-color: transparent !important;
  background-color: rgba(31, 38, 45, 0);
}
.btn-s4:hover, .btn-s4:focus, .btn-s4:active {
  border-color: transparent !important;
  color: #ec327e !important;
  text-decoration: none !important;
  background-color: rgba(33, 49, 66, 0.5) !important;
}
.btn-s4.disabled, .btn-s4:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-s5 {
  color: #9A9DA3;
  text-decoration: none;
  border: none;
  background-color: #050C14;
  background: linear-gradient(0deg, rgba(33, 49, 66, 0) 0%, rgba(33, 49, 66, 0) 100%);
  border-radius: 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.btn-s5 .navm_item-line {
  display: none;
}
.btn-s5 .navm_item-icon {
  opacity: 0.5;
}
.btn-s5:hover, .btn-s5:focus, .btn-s5:active {
  border: none !important;
  color: #fff !important;
  text-decoration: none !important;
  background-color: #050C14 !important;
  background: linear-gradient(0deg, rgba(33, 49, 66, 0.3) 0%, rgba(33, 49, 66, 0) 100%) !important;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.btn-s5:hover .navm_item-icon, .btn-s5:focus .navm_item-icon, .btn-s5:active .navm_item-icon {
  opacity: 1;
}
.btn-s5.disabled, .btn-s5:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-s5.active {
  color: #fff;
  background-color: #050C14 !important;
  background: linear-gradient(0deg, #213142 0%, rgba(33, 49, 66, 0) 100%) !important;
}
.btn-s5.active .navm_item-line {
  display: block;
}
.btn-s5.active .navm_item-icon {
  opacity: 1;
}
.btn-s6 {
  color: #9A9DA3;
  text-decoration: none;
  border: 1px solid rgba(249, 58, 58, 0);
  background-color: transparent;
  border-radius: 0.4rem;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.btn-s6 .navpc_item-icon {
  opacity: 0.5;
}
.btn-s6:hover, .btn-s6:focus, .btn-s6:active {
  border: 1px solid rgba(31, 38, 45, 0);
  color: #fff !important;
  text-decoration: none !important;
  background-color: rgba(31, 38, 45, 0.5);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.btn-s6:hover .navpc_item-icon, .btn-s6:focus .navpc_item-icon, .btn-s6:active .navpc_item-icon {
  opacity: 1;
}
.btn-s6.disabled, .btn-s6:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-s6.active {
  background-color: transparent;
  border: 1px solid #ec327e;
  color: #fff !important;
  pointer-events: not-allowed;
  cursor: default;
}
.btn-s6.active .navpc_item-icon {
  opacity: 1;
}
.btn-s7 {
  color: #fff;
  background-color: #ec327e;
  border: none;
  background: linear-gradient(0deg, #ff006a 0%, #ec327e 100%);
}
.btn-s7:hover, .btn-s7:focus, .btn-s7:active {
  background-color: #ec327e !important;
  border: none;
  color: #fff !important;
}
.btn-s7.disabled, .btn-s7:disabled {
  color: #fff !important;
  background-color: #ec327e !important;
  border: none;
  opacity: 0.4;
  pointer-events: none;
  background-image: none;
}
.btn-s7.claimed {
  color: #6AB726;
  pointer-events: none;
  background-color: #1F262D !important;
  background-image: none !important;
  border: 1px solid #6AB726 !important;
}
.btn-s8 {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
  background: linear-gradient(0deg, #171b21 0%, rgba(23, 27, 33, 0.2) 100%);
  filter: brightness(1);
  border: 0;
  border-radius: 0.5rem;
}
.btn-s8:hover, .btn-s8:focus, .btn-s8:active {
  border: 0;
  color: #fff !important;
  text-decoration: none !important;
  background-color: transparent;
  background: linear-gradient(0deg, #ec327e 0%, #171b21 100%);
  filter: brightness(1.2);
}
.btn-s8.disabled, .btn-s8:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-gold {
  color: #fff;
  background-color: #FFB628;
  background: linear-gradient(0deg, #f8bc48 0%, #ee8100 100%);
  border: 1px solid #FFB628;
}
.btn-gold:hover, .btn-gold:focus, .btn-gold:active {
  color: #fff !important;
  background-color: #FFB628;
  background: linear-gradient(0deg, #f8bc48 0%, #ee8100 100%);
  border: 1px solid #FFB628 !important;
}
.btn-gold.disabled, .btn-gold:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-gold2 {
  color: #fff;
  background-color: #EE8100;
  background: linear-gradient(0deg, #f8bc48 0%, #ee8100 100%);
  border: transparent;
}
.btn-gold2:hover, .btn-gold2:focus, .btn-gold2:active {
  color: #fff !important;
  background-color: #EE8100;
  border: transparent;
  filter: brightness(1.1);
}
.btn-gold2.disabled, .btn-gold2:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-sound {
  color: #9A9DA3;
  background-color: #212121;
  border-color: tranparent !important;
}
.btn-sound:hover, .btn-sound:focus, .btn-sound:active, .btn-sound:first-child:active {
  color: #fff;
  background-color: #262E37;
  border-color: tranparent !important;
}
.btn-sound.disabled, .btn-sound:disabled {
  opacity: 0.2;
  border-color: tranparent !important;
  pointer-events: none;
}
.btn-sound-cny {
  color: #fff;
  background-color: #350306;
  border-color: tranparent !important;
}
.btn-sound-cny:hover, .btn-sound-cny:focus, .btn-sound-cny:active, .btn-sound-cny:first-child:active {
  color: #fff;
  background-color: #5D0408;
  border-color: tranparent !important;
}
.btn-sound-cny.disabled, .btn-sound-cny:disabled {
  opacity: 0.2;
  border-color: tranparent !important;
  pointer-events: none;
}
.btn-secondary-cny {
  color: #fff;
  background-color: #350306 !important;
  border-color: #350306;
}
.btn-secondary-cny:hover, .btn-secondary-cny:focus, .btn-secondary-cny:active {
  border-color: transparent !important;
  color: #fff !important;
}
.btn-secondary-cny.disabled, .btn-secondary-cny:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-primary-cny {
  color: #fff;
  background-color: #D8251F;
  background: linear-gradient(0deg, #d8251f 0%, #8f1814 100%);
  border: 1px solid #FFB628;
}
.btn-primary-cny:hover, .btn-primary-cny:focus, .btn-primary-cny:active {
  color: #fff !important;
  background-color: #D8251F;
  border: 1px solid #FFB628;
  filter: brightness(1.1);
}
.btn-primary-cny.disabled, .btn-primary-cny:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn:hover, .btn:focus {
  filter: brightness(1.2);
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
  border-color: #ec327e;
}

.btn-rsJoindis {
  min-width: 311px;
  min-height: 60px;
}

.btn-close {
  color: #262E37;
}

.btn-close:hover {
  color: #55575A;
}

.dropdown-menu {
  min-width: auto;
}

.dropdown-menu-dark {
  background-color: #1F262D;
}
.dropdown-menu-dark .dropdown-item:focus, .dropdown-menu-dark .dropdown-item:hover {
  background-color: #262E37;
}

.rounded-0 {
  border-radius: 0;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-1 {
  border-radius: 0.5rem;
}

.rounded-2 {
  border-radius: 0.75rem;
}

.rounded-3 {
  border-radius: 1rem;
}

.rounded-4 {
  border-radius: 1.25rem;
}

.rounded-5 {
  border-radius: 1.5rem;
}

.rounded-6 {
  border-radius: 1.75rem;
}

.rounded-7 {
  border-radius: 2rem;
}

.rounded-8 {
  border-radius: 2.25rem;
}

.modal {
  z-index: 9999999;
}

.modal-content {
  background-color: #262E37;
}

.modal-header {
  border-bottom-color: #050C14;
  color: #fff;
}

.modal-body {
  padding: 1.5rem 1rem;
}

.modal-footer {
  border-top-color: #050C14;
}

.text-primary {
  color: #ec327e !important;
}

.text-primary2 {
  color: #ec327e !important;
}

.text-secondary {
  color: #9A9DA3 !important;
}

.text-secondary2 {
  color: #262E37 !important;
}

.text-secondary3 {
  color: #171B21 !important;
}

.text-success {
  color: #6AB726 !important;
}

.text-gold {
  color: #FFB628;
}

.text-gold2 {
  color: #FFB952;
}

.text-purple {
  color: #905ECE;
}

.text-blue {
  color: #2d57e9;
}

.text-red {
  color: #ec327e;
}

.icons-16 {
  width: 16px;
  height: 16px;
}

.icons-20 {
  width: 20px;
  height: 20px;
}

.icons-24 {
  width: 24px;
  height: 24px;
}

.icons-28 {
  width: 28px;
  height: 28px;
}

.icons-36 {
  width: 36px;
  height: 36px;
}

.icons-48 {
  width: 48px;
  height: 48px;
}

.icon-inbox {
  position: absolute;
  width: 196px;
  height: 134px;
  right: 0;
  top: 50%;
  transform: translate(10%, -50%);
}

.icon-inbox2 {
  max-width: 220px;
}

.tag-comingsoon {
  background-color: #ec327e;
  color: #fff;
  border: 1px solid #ec327e;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  font-size: small;
}

.nav-pills .nav-link, .nav-pills-s1 .nav-link {
  color: #9A9DA3;
}
.nav-pills .nav-link.favorite, .nav-pills-s1 .nav-link.favorite {
  color: #262E37;
}
.nav-pills .nav-link-line, .nav-pills-s1 .nav-link-line {
  width: 20px;
  height: 3px;
  background-color: #ec327e;
  border-radius: 500px;
  margin: 0 auto;
  opacity: 0;
}
.nav-pills .nav-link:focus, .nav-pills .nav-link:hover, .nav-pills .nav-link:active, .nav-pills .nav-link.favorite:focus, .nav-pills .nav-link.favorite:hover, .nav-pills .nav-link.favorite:active, .nav-pills-s1 .nav-link:focus, .nav-pills-s1 .nav-link:hover, .nav-pills-s1 .nav-link:active, .nav-pills-s1 .nav-link.favorite:focus, .nav-pills-s1 .nav-link.favorite:hover, .nav-pills-s1 .nav-link.favorite:active {
  color: #ec327e;
  background-color: transparent;
}
.nav-pills .nav-link.active + .nav-link-line, .nav-pills-s1 .nav-link.active + .nav-link-line {
  opacity: 1;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .nav-pills-s1 .nav-link.active, .nav-pills-s1 .show > .nav-link {
  background-color: transparent;
}
.nav-pills .nav-link.favorite.active, .nav-pills .show > .nav-link.favorite, .nav-pills-s1 .nav-link.favorite.active, .nav-pills-s1 .show > .nav-link.favorite {
  color: #ec327e;
}

.nav-pills-s2 {
  border-radius: 500px;
  border: 2px solid #1F262D;
  width: 100%;
}
.nav-pills-s2 .nav-item {
  width: 50%;
}
.nav-pills-s2 .nav-link {
  color: #fff;
  padding: 0.25rem 1rem;
  min-width: 120px;
  border-radius: 500px;
}
.nav-pills-s2 .nav-link:focus, .nav-pills-s2 .nav-link:hover, .nav-pills-s2 .nav-link:active {
  color: #fff;
  background-color: transparent;
  border-radius: 500px;
}
.nav-pills-s2 .nav-link.active, .nav-pills-s2 .show > .nav-link {
  background-color: #ec327e;
  background: linear-gradient(0deg, #ec327e 0%, #ec327e 100%);
  border-radius: 500px;
}

.card {
  background-color: transparent;
  border: none;
}

.navm {
  background-color: #050C14;
  padding: 0;
}

.sp-navm {
  padding-bottom: 120px;
}

.sp-topuporder {
  padding-bottom: 100px;
}

.minh-page {
  min-height: 400px;
}

.w-80 {
  width: 80%;
}

.w-70 {
  width: 70%;
}

.w-30 {
  width: 30%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-60 {
  width: 60%;
}

.textshadow-primary {
  text-shadow: 0 0 10px rgba(249, 58, 58, 0.8);
}

.shadow-primary {
  box-shadow: rgba(249, 58, 58, 0.5);
}

.shadow-primary2 {
  box-shadow: rgba(249, 58, 58, 0.8);
}

.shadow-gold {
  box-shadow: 0 0 15px #ec327e;
}

.shadow-red {
  box-shadow: 0 0 15px rgba(184, 48, 48, 0.5);
}

.shadow-green {
  box-shadow: 0 0 15px rgba(106, 183, 38, 0.5);
}

.noneclick {
  pointer-events: none;
  cursor: default;
}

.swal2-html-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.swal2-title {
  font-size: 1.6rem !important;
}

.swal2-popup {
  font-family: kohinoor-thai, sans-serif !important;
  font-weight: 500;
  font-style: normal;
}

.modal {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-indicators [data-bs-target] {
  width: 16px;
  border: none;
  background-color: #fff;
}

.carousel-indicators [data-bs-target]:hover, .carousel-indicators [data-bs-target]:focus, .carousel-indicators [data-bs-target]:active, .carousel-indicators.active {
  background-color: #ec327e !important;
}

::placeholder {
  color: #55575A !important;
  opacity: 1;
}

::-ms-input-placeholder {
  color: #55575A !important;
}

.card-body {
  color: #9A9DA3;
}

.card-title {
  color: #9A9DA3;
}

.card-text .text-muted {
  color: #ec327e !important;
}

.flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

@media (min-width: 768px) {
  html, body {
    font-size: 1rem !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-60 {
    width: 60% !important;
  }

  .text-truncate2 {
    -webkit-line-clamp: 3;
  }

  .icon-inbox2 {
    max-width: 280px;
  }

  .nav-pills-s2 {
    width: auto;
  }
  .nav-pills-s2 .nav-item {
    width: auto;
    min-width: 220px;
  }

  .swal2-title {
    font-size: 1.8rem !important;
  }

  .btn-rsJoindis {
    min-width: 365px;
  }
}
@media (min-width: 992px) {
  .container-smallpc {
    max-width: 768px;
    margin: 0 auto;
  }

  .icon-inbox2 {
    max-width: 300px;
  }
}
@media (min-width: 1200px) {
  .sp-navm {
    padding-bottom: 50px;
  }

  .sp-topuporder {
    padding-bottom: 10px;
  }

  .w-xl-auto {
    width: auto !important;
  }

  .icon-inbox2 {
    max-width: 250px;
  }

  .btn-rsJoindis {
    min-width: 330px;
  }

  .form-check-input {
    width: 1.3rem;
    height: 1.3rem;
  }
}
body {
  background: url(../../images/bg.jpg) no-repeat center top;
  background-size: 100%;
  min-height: 100vh;
}

body.bodylogin {
  background: url(../../images/bg-login.jpg) no-repeat center top;
  background-size: 100%;
}

.invite-top {
  background: url(../../images/bg-invite.png) no-repeat center top;
  background-size: 100%;
}

.body-red {
  background: url(../../images/bg-red.jpg) no-repeat center top;
  background-size: 100%;
  background-color: #01050A !important;
}

.topbar-logout {
  background-color: rgba(5, 12, 20, 0);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.topbar-logout.active {
  background-color: #050c14;
}

.topbar-logout-logo {
  max-width: 100px;
}

.pagebar-left {
  color: #ec327e;
  min-width: 24px;
  min-height: 24px;
}

.pagebar-title {
  color: white;
}

.pagebar-right {
  color: #9A9DA3;
  min-width: 24px;
  min-height: 24px;
}

.patternbg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: url(../../images/patternbg.png) repeat center bottom;
}

.patternbg.rev {
  background: url(../../images/patternbg.png) repeat left top;
}

.loginbox {
  background-color: rgba(1, 5, 10, 0.9);
  background: linear-gradient(0deg, rgba(1, 5, 10, 0) 0%, rgba(1, 5, 10, 0.8) 30%, rgba(1, 5, 10, 0.8) 100%);
  border-radius: 1rem 1rem 0 0;
  margin-top: 50%;
  height: 100%;
}

.tagevent-register {
  font-size: 1.1rem;
  position: absolute;
  border: 1px solid #ec327e;
  background-color: #ee8100;
  left: -8px;
  top: 0;
  transform: translate(0, -55%);
  box-shadow: 0 0 10px rgba(238, 129, 0, 0.5);
  text-shadow: 0 2px 2px rgba(38, 46, 55, 0.4);
  background: linear-gradient(0deg, #f8bc48 0%, #ee8100 100%);
}

.d_profile {
  background-color: #1F262D;
}

.d_profile-logo-line {
  height: 3px;
}

.d_profile-name {
  max-width: 200px;
}

.d_profile-logo-icon {
  margin-top: -1rem;
}

.d_profile-wp-point img {
  max-width: 20px;
}

.d_invite {
  background-color: #1F262D;
  background: linear-gradient(0deg, rgba(31, 38, 45, 0) 0%, rgba(31, 38, 45, 0.8) 50%, #1f262d 100%);
}

.d_invite-boxfriend {
  background: linear-gradient(0deg, rgba(20, 30, 41, 0.2) 0%, #213142 100%);
}

.d_invite-boxfriend-btn {
  background: linear-gradient(0deg, rgba(31, 38, 46, 0.2) 0%, #262e37 100%);
}

.d_subbtn {
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
  background-color: #1F262D;
  background: linear-gradient(0deg, #1f262d 0%, rgba(31, 38, 45, 0) 100%);
}

.navpc {
  background-color: rgba(5, 12, 20, 0);
  padding: 0.75rem 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.navpc.active {
  background-color: #050c14;
  border: 0;
  padding: 0.25rem 0;
}

.myqrcode {
  width: 110px;
  height: 110px;
}

.gr_cfitem-list-item {
  width: 100%;
  padding-bottom: 100%;
}
.gr_cfitem-list-item .gr_cfitem-list-itemgame {
  width: calc(100% + 200%);
}
.gr_cfitem-list-item .gr_cfitem-list-itemgamestamp {
  width: calc(100% + 130%);
}
.gr_cfitem-list-item .gr_cfitem-list-itemgamecardx {
  width: calc(100% + 160%);
}

.gr_cfitem-list-item.shadow-gold .gr_cfitem-list-itemgame {
  width: calc(100% + 250%);
}
.gr_cfitem-list-item.shadow-gold .gr_cfitem-list-itemgamecardx {
  width: calc(100% + 180%);
}

.gr_cfitem-list-item[data-bs-toggle="modal"] {
  cursor: pointer;
}

.barpage-sticky {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.barpage-sticky.active {
  background-color: #050C14;
  padding: 0.5rem 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.wp-price {
  background-color: #1F262D;
}

.wp-price.active {
  border: 1px solid #ec327e;
  box-shadow: 0 0 15px rgba(249, 58, 58, 0.5);
}

.taghistory {
  background-color: #FFB628;
  background: linear-gradient(0deg, #ffba52 0%, #e17d21 100%);
  padding: 0.5rem 1rem;
  border-radius: 500px;
  color: #fff;
  text-align: center;
  min-width: 100px;
}
.taghistory-success {
  background-color: #6AB726;
  background: linear-gradient(0deg, #a4bd09 0%, #6ab726 100%);
}
.taghistory-cancel {
  background-color: #ec327e;
  background: linear-gradient(0deg, #d65151 0%, #ec327e 100%);
}
.taghistory-reject {
  background-color: #ec327e;
  background: linear-gradient(0deg, #905ece 0%, #6b33b1 100%);
}
.taghistory-page {
  min-width: 185px;
}

.pmbox_top {
  background: url(../../images/bg-payment.jpg) no-repeat center top;
  background-size: 100%;
  background-color: #ec327e;
  padding-bottom: 115px;
  border-top-right-radius: 1.7rem;
  border-top-left-radius: 1.7rem;
  min-height: 164px;
}
.pmbox_top-form {
  background: none;
  background-color: #1F262D;
}
.pmbox_top-reject {
  background: url(../../images/bg-payment-reject.jpg) no-repeat center top;
  background-size: 100%;
  background-color: #6B33B1;
}
.pmbox_top-success {
  background: url(../../images/bg-payment-success.jpg) no-repeat center top;
  background-size: 100%;
  background-color: #6AB726;
}

.pmbox_middle {
  padding-top: 105px;
  background-color: #1F262D;
}

.pmbox_bottom {
  margin-top: 1px;
  background-color: #1F262D;
  border-bottom-right-radius: 1.7rem;
  border-bottom-left-radius: 1.7rem;
}

.pmbox_top-qrcode {
  width: 190px;
  height: 190px;
}

.shoppd_card {
  color: #fff;
  background-color: #1F262D;
}
.shoppd_card .shoppd_card-container {
  background-color: #171B21;
  background: linear-gradient(0deg, #1f262e 0%, #171b21 100%);
}
.shoppd_card .shoppd_card-footer {
  background-color: #2C4B6D;
  height: 3px;
  width: 100%;
}
.shoppd_card .shoppd_card-time {
  max-width: 120px;
  text-align: right;
}

.shoppd_card-blue .shoppd_card-container {
  background-color: #1F262D;
  background: linear-gradient(0deg, #181e32 10%, #1f262d 100%);
}
.shoppd_card-blue .shoppd_card-footer {
  background-color: #1F43C1;
}

.shoppd_card-red .shoppd_card-container {
  background-color: #1F262D;
  background: linear-gradient(0deg, #371c1c 10%, #1f262d 100%);
}
.shoppd_card-red .shoppd_card-footer {
  background-color: #ec327e;
}

.shoppd_card-purple .shoppd_card-container {
  background-color: #1F262D;
  background: linear-gradient(0deg, #261c33 10%, #1f262d 100%);
}
.shoppd_card-purple .shoppd_card-footer {
  background-color: #6B33B1;
}

.shoppd_card-gold .shoppd_card-container {
  background-color: #1F262D;
  background: linear-gradient(0deg, #352913 10%, #1f262d 100%);
}
.shoppd_card-gold .shoppd_card-footer {
  background-color: #FFB628;
}

.shoppd_card-bonusshop .shoppd_card-container {
  background-color: #1F262D;
  background: linear-gradient(0deg, #1f262e 10%, #1f262d 100%);
}
.shoppd_card-bonusshop .shoppd_card-footer {
  background-color: #9A9DA3;
}

.iconshop_detail {
  max-height: 130px;
}

.scroll-behavior {
  scroll-behavior: smooth;
}

.d_profile-uid {
  min-width: 160px;
}

.gcbonus_sum {
  max-height: 235px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ev-footer {
  background-color: #FFB628;
  background: linear-gradient(0deg, #333b8b 0%, #1b2370 100%);
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.news_tagnews {
  min-width: 65px;
}

.shop_itemlist-received {
  min-height: 55px;
}

.shop_itemlist-box {
  max-height: 200px;
}

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@media (min-width: 768px) {
  .topbar-logout-logo {
    max-width: 150px;
  }

  body {
    background: url(../../images/bg-md.jpg) no-repeat center top;
    background-size: cover;
  }

  body.bodylogin {
    background: url(../../images/bg-md-login.jpg) no-repeat center top;
    background-size: cover;
  }

  .invite-top {
    background: url(../../images/bg-invite-md.png) no-repeat center top;
    background-size: 100%;
    min-height: 700px;
  }

  body.body-red {
    background: url(../../images/bg-md.jpg) no-repeat center top;
    background-color: #01050A !important;
  }

  .loginbox {
    margin-top: 30%;
    color: #fff;
  }

  .d_profile-name {
    max-width: 350px;
  }

  .d_subbtn-group {
    background-color: rgba(31, 38, 45, 0.5);
  }

  .myqrcode {
    width: 140px;
    height: 140px;
  }

  .pmbox_top {
    padding-bottom: 145px;
  }

  .pmbox_middle {
    padding-top: 135px;
  }

  .pmbox_top-qrcode {
    width: 250px;
    height: 250px;
  }

  .shoppd_card-time {
    max-width: 150px;
  }

  .iconshop_detail {
    max-height: 180px;
  }

  .gcbonus_sum {
    max-height: 350px;
  }

  .d_profile-uid {
    max-width: none;
  }
}
@media (min-width: 992px) {
  .invite-top {
    background: url(../../images/bg-invite-lg.png) no-repeat center top;
  }

  body.body-red {
    background-color: #01050A !important;
  }

  .d_profile-name {
    max-width: 500px;
  }

  .myqrcode {
    width: 200px;
    height: 200px;
  }

  .d_profile-info {
    min-width: 170px;
  }

  .gcbonus_sum {
    max-height: 650px;
  }

  .shop_itemlist-box {
    max-height: 400px;
  }
}
@media (min-width: 1200px) {
  body {
    background: url(../../images/bg-xl.jpg) no-repeat center top;
  }

  body.bodylogin {
    background: url(../../images/bg-xl-login.jpg) no-repeat center top;
    background-size: cover;
  }

  body.body-red {
    background: url(../../images/bg-xl.jpg) no-repeat center top;
    background-size: auto;
  }

  .loginbox {
    margin-top: 10%;
    color: #fff;
    height: auto;
  }

  .invite-top {
    background: url(../../images/bg-invite-xl.png) no-repeat center top;
  }

  .myqrcode {
    width: 140px;
    height: 140px;
  }

  .iconshop_detail {
    max-height: 150px;
  }

  .gcbonus_sum {
    max-height: 300px;
  }
}



.btn-popup {
  aspect-ratio: 2.5/1;
  display: flex;
  width: 100%;
  margin: 0 2px;
}
.btn-popup:hover {
  filter: drop-shadow(0 0 3px #ea005e);
}
.btn-popup.btn-line-popup {
  background: url(../../images/btn-line.png) no-repeat center top;
  background-size: 100%;
}
.btn-popup.btn-line-popup:hover {
  background: url(../../images/btn-line-hover.png) no-repeat center top;
  background-size: 100%;
}
.btn-popup.btn-facebook-popup {
  background: url(../../images/btn-facebook.png) no-repeat center top;
  background-size: 100%;
}
.btn-popup.btn-facebook-popup:hover {
  background: url(../../images/btn-facebook-hover.png) no-repeat center top;
  background-size: 100%;
}
.btn-popup.btn-discord-popup {
  background: url(../../images/btn-discord.png) no-repeat center top;
  background-size: 100%;
}
.btn-popup.btn-discord-popup:hover {
  background: url(../../images/btn-discord-hover.png) no-repeat center top;
  background-size: 100%;
}